diff --git a/src/app.html b/src/app.html
index 16f197d..340aca9 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,13 +3,19 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap" rel="stylesheet">
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200 font-jose font-light">
+	<body
+		data-sveltekit-preload-data="hover"
+		class="bg-stone-200 dark:bg-primary-900 text-primary-900 dark:text-stone-200 font-jose font-light"
+	>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/BottomNavigation.svelte b/src/lib/BottomNavigation.svelte
index db8f6e2..8a87d58 100644
--- a/src/lib/BottomNavigation.svelte
+++ b/src/lib/BottomNavigation.svelte
@@ -1,21 +1,13 @@
 <script>
 	import { page } from '$app/stores';
-	import {
-		BottomNav,
-		BottomNavItem,
-		BottomNavHeader,
-		BottomNavHeaderItem,
-		Tooltip,
-		Skeleton,
-		ImagePlaceholder
-	} from 'flowbite-svelte';
+	import { BottomNav, BottomNavItem } from 'flowbite-svelte';
 	import {
 		HomeSolid,
-		BookmarkSolid,
-		PlusOutline,
-		SearchOutline,
-		AdjustmentsVerticalOutline
+		ProfileCardOutline,
+		ImageOutline,
+		MobilePhoneOutline
 	} from 'flowbite-svelte-icons';
+
 	let activeBtn = 'home';
 	function handleNavItemClick(btnName) {
 		activeBtn = btnName;
@@ -24,43 +16,33 @@
 	$: isHidden = activeBtn === 'projects';
 </script>
 
-<p>{isHidden}</p>
-<BottomNav position="absolute" navType="group" classInner="grid-cols-5">
-	<BottomNavHeader hidden slot="header">
-		<BottomNavHeaderItem itemName="New" />
-		<BottomNavHeaderItem itemName="Popular" active={true} />
-		<BottomNavHeaderItem itemName="Following" />
-	</BottomNavHeader>
-	<BottomNavItem on:click={() => handleNavItemClick('home')} btnName="home" id="group-home">
+<BottomNav
+	position="sticky"
+	classInner="grid-cols-4"
+	outerClass="md:hidden w-full z-50 border-gray-200 dark:bg-slate-900 dark:border-gray-600 bottom-0"
+>
+	<BottomNavItem btnName="home" href="/">
 		<HomeSolid
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+			on:click={() => handleNavItemClick('home')}
 		/>
-		<Tooltip arrow={false}>Home</Tooltip>
 	</BottomNavItem>
-	<BottomNavItem on:click={() => handleNavItemClick('whoami')} btnName="whoami" id="group-whoami">
-		<BookmarkSolid
+	<BottomNavItem btnName="whoami" href="/about">
+		<ProfileCardOutline
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+			on:click={() => handleNavItemClick('whoami')}
 		/>
-		<Tooltip arrow={false}>whoami</Tooltip>
 	</BottomNavItem>
-	<BottomNavItem
-		on:click={() => handleNavItemClick('projects')}
-		btnName="projects"
-		id="group-projects"
-	>
-		<PlusOutline
+	<BottomNavItem btnName="projects">
+		<ImageOutline
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+			on:click={() => handleNavItemClick('projects')}
 		/>
-		<Tooltip arrow={false}>projects</Tooltip>
 	</BottomNavItem>
-	<BottomNavItem
-		on:click={() => handleNavItemClick('contact')}
-		btnName="contact"
-		id="group-contact"
-	>
-		<SearchOutline
+	<BottomNavItem btnName="contact" href="/contact">
+		<MobilePhoneOutline
 			class="w-6 h-6 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-primary-600 dark:group-hover:text-primary-500"
+			on:click={() => handleNavItemClick('contact')}
 		/>
-		<Tooltip arrow={false}>contact</Tooltip>
 	</BottomNavItem>
 </BottomNav>
diff --git a/src/lib/Landing/VendorCarousel.svelte b/src/lib/Landing/VendorCarousel.svelte
new file mode 100644
index 0000000..52b5b97
--- /dev/null
+++ b/src/lib/Landing/VendorCarousel.svelte
@@ -0,0 +1,17 @@
+<script>
+	import { Marquee } from 'flowbite-svelte';
+	import { projects } from '$lib/projects.js';
+	import VendorIcon from '../ProjectCard/VendorIcon.svelte';
+
+	const allVendors = Array.from(
+		new Map(
+			projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor])
+		).values()
+	);
+</script>
+
+<div class="p-4 bg-stone-200 dark:bg-slate-800 rounded-xl flex items-center overflow-scroll gap-4">
+	{#each allVendors as vendor}
+		<VendorIcon {...vendor} />
+	{/each}
+</div>
diff --git a/src/lib/Landing/VendorMarquee.svelte b/src/lib/Landing/VendorMarquee.svelte
index e109796..34cee10 100644
--- a/src/lib/Landing/VendorMarquee.svelte
+++ b/src/lib/Landing/VendorMarquee.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { Marquee } from 'flowbite-svelte';
 	import { projects } from '$lib/projects.js';
+	import VendorIcon from '../ProjectCard/VendorIcon.svelte';
+
 	const allVendors = Array.from(
 		new Map(
 			projects.flatMap((project) => project.vendors).map((vendor) => [vendor.name, vendor])
@@ -8,8 +10,12 @@
 	);
 </script>
 
-<Marquee speed={0.5} hoverSpeed={0.25} class="py-6 bg-stone-200 gradi">
+<Marquee
+	speed={0.5}
+	hoverSpeed={0.25}
+	class="py-4 bg-stone-200 dark:bg-slate-800 rounded-xl flex items-center"
+>
 	{#each allVendors as vendor}
-		<img class="w-16 h-16" alt={vendor.name} src={vendor.img} />
+		<VendorIcon {...vendor} />
 	{/each}
 </Marquee>
diff --git a/src/lib/ProjectCard/VendorIcon.svelte b/src/lib/ProjectCard/VendorIcon.svelte
index 82fb06c..b578892 100644
--- a/src/lib/ProjectCard/VendorIcon.svelte
+++ b/src/lib/ProjectCard/VendorIcon.svelte
@@ -7,6 +7,6 @@
 <a href={url}>
 	<div class="flex flex-col justify-center h-16 hover:scale-110">
 		<img src={img} alt={name} class="min-h-12 max-w-12 self-center" />
-		<p>{name}</p>
+		<p class="text-slate-900 dark:text-stone-200 font-normal">{name}</p>
 	</div>
 </a>
diff --git a/src/lib/TopNav.svelte b/src/lib/TopNav.svelte
new file mode 100644
index 0000000..e812f79
--- /dev/null
+++ b/src/lib/TopNav.svelte
@@ -0,0 +1,48 @@
+<script>
+	import {
+		Navbar,
+		NavBrand,
+		NavLi,
+		NavUl,
+		Dropdown,
+		DropdownItem,
+		DarkMode
+	} from 'flowbite-svelte';
+	import { ChevronDownOutline } from 'flowbite-svelte-icons';
+	import logo from '$lib/logo.png';
+	import { page } from '$app/stores';
+
+	$: activeUrl = $page.url.pathname;
+</script>
+
+<Navbar class="bg-transparent">
+	<NavBrand href="/">
+		<img src={logo} class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
+		<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-stone-200"
+			>rannes.dev</span
+		>
+	</NavBrand>
+	<div class="flex">
+		<DarkMode btnClass="block sm:hidden" />
+	</div>
+	<NavUl class="md:flex-row" {activeUrl}>
+		<NavLi href="/">home</NavLi>
+		<NavLi href="/about">whoami</NavLi>
+		<NavLi class="cursor-pointer">
+			projects<ChevronDownOutline class="w-6 h-6  text-primary-800 dark:text-stone-200 inline" />
+		</NavLi>
+		<Dropdown
+			{activeUrl}
+			activeClass="font-bold text-primary-800 dark:text-stone-200"
+			class="w-44 z-20"
+		>
+			<DropdownItem href="/projects/svelte">svelte</DropdownItem>
+			<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
+			<DropdownItem href="/projects/homelab">homelab</DropdownItem>
+		</Dropdown>
+		<NavLi href="/contact">contact</NavLi>
+		<NavLi class="hidden sm:block">
+			<DarkMode btnClass="p-0" />
+		</NavLi>
+	</NavUl>
+</Navbar>
diff --git a/src/lib/images/localWeather.png b/src/lib/images/localWeather.png
new file mode 100644
index 0000000..58b0fc8
Binary files /dev/null and b/src/lib/images/localWeather.png differ
diff --git a/src/lib/images/portfolio.png b/src/lib/images/portfolio.png
new file mode 100644
index 0000000..86f8537
Binary files /dev/null and b/src/lib/images/portfolio.png differ
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 71c45c1..d994125 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,62 +1,18 @@
 <script>
-	import {
-		Navbar,
-		NavBrand,
-		NavLi,
-		NavUl,
-		NavHamburger,
-		Dropdown,
-		DropdownItem,
-		DarkMode
-	} from 'flowbite-svelte';
-	import { ChevronDownOutline } from 'flowbite-svelte-icons';
 	import '../app.css';
 	import CloudflareAnalytics from '$lib/CloudflareAnalytics.svelte';
-	import logo from '$lib/logo.png';
-	import { page } from '$app/stores';
 	import BottomNavigation from '../lib/BottomNavigation.svelte';
-
-	$: activeUrl = $page.url.pathname;
+	import TopNav from '../lib/TopNav.svelte';
 </script>
 
 <CloudflareAnalytics />
-<Navbar class="bg-transparent">
-	<NavBrand href="/">
-		<img src={logo} class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
-		<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-stone-200"
-			>rannes.dev</span
-		>
-	</NavBrand>
-	<div class="flex">
-		<DarkMode btnClass="block sm:hidden" />
-	</div>
-	<NavUl class="md:flex-row" {activeUrl}>
-		<NavLi href="/">home</NavLi>
-		<NavLi href="/about">whoami</NavLi>
-		<NavLi class="cursor-pointer">
-			projects<ChevronDownOutline class="w-6 h-6  text-primary-800 dark:text-stone-200 inline" />
-		</NavLi>
-		<Dropdown
-			{activeUrl}
-			activeClass="font-bold text-primary-800 dark:text-stone-200"
-			class="w-44 z-20"
-		>
-			<DropdownItem href="/projects/svelte">svelte</DropdownItem>
-			<DropdownItem href="/projects/nextjs">nextjs</DropdownItem>
-			<DropdownItem href="/projects/homelab">homelab</DropdownItem>
-		</Dropdown>
-		<NavLi href="/contact">contact</NavLi>
-		<NavLi class="hidden sm:block">
-			<DarkMode btnClass="p-0" />
-		</NavLi>
-	</NavUl>
-</Navbar>
+<TopNav />
 <div class="px-2 sm:px-0 mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
 	<slot />
 </div>
-<footer>
-	<div class="text-sm text-stone-400 mt-12 text-center">
+<footer class="">
+	<div class="hidden md:block text-sm text-stone-400 mt-12 text-center">
 		<p>built by christian rannes 2024</p>
 	</div>
+	<BottomNavigation />
 </footer>
-<BottomNavigation />
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 044f627..ab804ae 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,16 +1,37 @@
 <script>
 	import VendorMarquee from '$lib/Landing/VendorMarquee.svelte';
+	import VendorCarousel from '../lib/Landing/VendorCarousel.svelte';
+	import { Carousel, Heading, Mark } from 'flowbite-svelte';
+	import rack from '$lib/images/rack.webp';
+	import portfolio from '$lib/images/portfolio.png';
+	import localWeather from '$lib/images/localWeather.png';
+
+	const images = [
+		{
+			title: '/projects/nextjs',
+			image: portfolio
+		}
+	];
 </script>
 
-<div class="main-container text-center">
-	<h1 class="text-xl mb-2">Welcome to my corner of the internet</h1>
-	<VendorMarquee />
-	<p>
-		You most likely ended up here after listening to me rambling about the wonders of self hosted
-		services, and how life would be much easier if we could just containerize everything.
-	</p>
-	<p class="italic text-sm mt-8">
-		This page is my initial svelte project to try out the framework, and at the time of writing
-		(24th April 2024) many pages are still lacking content.
+<div class="text-center text-xl">
+	<Heading tag="h1" class="my-4">father by day <Mark>developer</Mark> by night</Heading>
+	<h2 class="py-2">
+		welcome to my space. For now it is used to document my learnings and share my projects. It might
+		expand over time.
+	</h2>
+	<p class="py-2">
+		I like to explore many different technologies and frameworks mostly surrounding web development
+		or infrastructure.
 	</p>
+	<div class="hidden md:block py-2">
+		<VendorMarquee />
+	</div>
+	<div class="md:hidden py-2">
+		<VendorCarousel />
+	</div>
+	<h2 class="py-2">
+		You can see some of my web dev projects and a small write-up on my homelab in the projects
+		section.
+	</h2>
 </div>
