diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
index cd3aa331..acc9333f 100644
--- a/src/lib/components/AbstractContent.svelte
+++ b/src/lib/components/AbstractContent.svelte
@@ -1,38 +1,81 @@
-<script> 
-    import {
-    	DarkMode,
-    	Navbar,
-    	NavBrand,
-    	NavHamburger,
-    	NavLi,
-    	NavUl
-    } from 'flowbite-svelte';
-
-    import {
-    	MoonSolid,
-    	SunSolid
-    } from 'flowbite-svelte-icons';
-
-    import logo_dark from '../assets/mondey_dark.svg';
-    import logo_light from '../assets/mondey_light.svg';
+<script>
+	import {
+		BottomNav,
+		BottomNavItem,
+		DarkMode,
+		Navbar,
+		NavBrand,
+		NavHamburger,
+		NavLi,
+		NavUl,
+		Tooltip
+	} from 'flowbite-svelte';
+
+	import {
+		CaretLeftSolid,
+		CaretRightSolid,
+		LightbulbSolid,
+		MoonSolid,
+		SunSolid
+	} from 'flowbite-svelte-icons';
+
+	import logo_dark from '../assets/mondey_dark.svg';
+	import logo_light from '../assets/mondey_light.svg';
+
+	// button stylings
+	export const basicBtnForm = 'rounded-lg text-xl p-2';
+
+	export const basicBtnColor =
+		'text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700';
+
+	export const topBarBtnClass = basicBtnColor + basicBtnForm;
+
+	export const bottomBarBtnClass =
+		'w-8 h-8 mb-1 group-hover:text-primary-800 dark:group-hover:text-primary-500' + basicBtnColor;
+
+	// styling for the nav
+	const navULclass =
+		'flex flex-col p-4 mt-4 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:text-lg md:font-medium';
+
+    // variables for communication upon hitting the page
+	// FIXME: these are placehorlders and must later be changed using contexts or other better mechanisms for inter component comunication
+	$: lastpage = '/';
+	$: nextpage = '/';
+	$: infopage = '/';
 </script>
 
+<!-- Top element-->
+<Navbar>
+	<NavBrand href="/">
+		<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
+		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
+	</NavBrand>
+	<NavHamburger />
+	<NavUl ulClass={navULclass}>
+		<NavLi href="/" active={true}>Home</NavLi>
+		<NavLi href="/">Aktuelles</NavLi>
+		<NavLi href="/">Downloads</NavLi>
+		<NavLi href="/">Kontakt</NavLi>
+		<DarkMode class={topBarBtnClass}>
+			<MoonSolid slot="darkIcon" />
+			<SunSolid slot="lightIcon" />
+		</DarkMode>
+		<Tooltip arrow={false}>Darkmode ein- oder ausschalten</Tooltip>
+	</NavUl>
+</Navbar>
 
-<Navbar > 
-<NavBrand href="/"> 
-	<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
-	<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
-</NavBrand>
-<NavHamburger />
-<NavUl>
-    <NavLi href="/" active={true}>Home</NavLi>
-    <NavLi href="/">Aktuelles</NavLi>
-    <NavLi href="/">Downloads</NavLi>
-    <NavLi href="/">Kontakt</NavLi>
-    <DarkMode class='text-lg'>
-        <MoonSolid slot="lightIcon"  color="var(--primary-500)"/>
-        <SunSolid slot="darkIcon" color="var(--dark-primary-500)"/> 
-    </DarkMode>
-</NavUl>
-
-</Navbar>
\ No newline at end of file
+<!-- bottom element: back, info and next buttons-->
+<BottomNav position="absolute" navType="application" classInner="grid-cols-3">
+	<BottomNavItem href={lastpage} appBtnPosition="left" btnName="Back" btnClass={topBarBtnClass}>
+		<CaretLeftSolid class={bottomBarBtnClass} />
+		<Tooltip arrow={false}>Zur letzten Seite</Tooltip>
+	</BottomNavItem>
+	<BottomNavItem href={infopage} appBtnPosition="middle" btnName="Help" btnClass={topBarBtnClass}>
+		<LightbulbSolid class={bottomBarBtnClass} />
+		<Tooltip arrow={false}>Hilfe</Tooltip>
+	</BottomNavItem>
+	<BottomNavItem href={nextpage} appBtnPosition="right" btnName="Next" btnClass={topBarBtnClass}>
+		<CaretRightSolid class={bottomBarBtnClass} />
+		<Tooltip arrow={false}>Zur naechsten Seite</Tooltip>
+	</BottomNavItem>
+</BottomNav>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 180d2f6b..dfa2b6bd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -25,7 +25,20 @@ export default {
 					800: '#CC4522',
 					900: '#A5371B'
 				}
-			}
+			}, 
+            fontSize: {
+                'xs': '.75rem',
+                'sm': '.875rem',
+                'base': '1rem',
+                'lg': '1.125rem',
+                'xl': '1.25rem',
+                '2xl': '1.5rem',
+                '3xl': '1.875rem',
+                '4xl': '2.25rem',
+                '5xl': '3rem',
+                '6xl': '4rem',
+                '7xl': '5rem'
+            }
 		}
 	},