diff --git a/src/lib/Socials.svelte b/src/lib/Socials.svelte
index 72db741..299d0f1 100644
--- a/src/lib/Socials.svelte
+++ b/src/lib/Socials.svelte
@@ -3,19 +3,21 @@
 	export let type = 'default';
 </script>
 
-<div class="@container grid grid-cols-2 @xl:grid-cols-3 @4xl:grid-cols-4 flex-wrap gap-3">
-	<Social
+<div class="@container grid grid-cols-2 @2xl:grid-cols-3 flex-wrap gap-5">
+	<!-- <Social
 		url="https://mastodon.social/@midblep"
 		title="My profile on the fediverse!"
 		icon="🐘"
 		text="Mastodon"
+
 	/>
 	<Social
 		url="https://mastodon.social/@midblep"
 		title="Bird app (or X?)"
 		icon="🐦"
 		text="Twitter (X)"
-	/>
+
+	/> -->
 	<Social url="https://git.bartindustries.com/" title="Git repositories" icon="🗃️" text="Git" />
 	<Social url="https://gitlab.com/midblep" title="GitLab repositories" icon="🦊" text="GitLab" />
 	<Social url="https://github.com/midblep" title="GitHub repositories" icon="🐙" text="GitHub" />
diff --git a/src/lib/ThemeSwitcher.svelte b/src/lib/ThemeSwitcher.svelte
index 649f061..a6fd7bc 100644
--- a/src/lib/ThemeSwitcher.svelte
+++ b/src/lib/ThemeSwitcher.svelte
@@ -1,11 +1,11 @@
 <script>
-	import { onMount } from "svelte";
-	import { getCookie } from "./helpers/cookies";
+	import { onMount } from 'svelte';
+	import { getCookie } from './helpers/cookies';
 
-	let classes = "h-full py-2 px-10 text-white flex justify-center items-center uppercase group hover:bg-white hover:bg-opacity-20 font-bold text-lg duration-300";
+	let classes = 'p-2 ml-2';
 
 	function switchTheme() {
-		if (document.documentElement.classList.contains("dark")) {
+		if (document.documentElement.classList.contains('dark')) {
 			setLight();
 		} else {
 			setDark();
@@ -13,31 +13,29 @@
 	}
 
 	function setLight() {
-		document.documentElement.classList.remove("dark");
-		document.querySelector("#theme").innerHTML = "☀️";
-		document.cookie = "theme=light";
+		document.documentElement.classList.remove('dark');
+		document.querySelector('#theme').innerHTML = '☀️';
+		document.cookie = 'theme=light';
 	}
 
 	function setDark() {
-		document.documentElement.classList.add("dark");
-		document.querySelector("#theme").innerHTML = "🌙";
-		document.cookie = "theme=dark";
+		document.documentElement.classList.add('dark');
+		document.querySelector('#theme').innerHTML = '🌙';
+		document.cookie = 'theme=dark';
 	}
 
 	onMount(() => {
-		let theme = getCookie("theme");
+		let theme = getCookie('theme');
 
 		if (!theme) {
-			document.cookie = "theme=light";
+			document.cookie = 'theme=light';
 		} else {
-			if (theme == "light") setLight();
-			if (theme == "dark") setDark();
+			if (theme == 'light') setLight();
+			if (theme == 'dark') setDark();
 		}
 	});
 </script>
 
 <button type="none" class={classes} on:click={switchTheme} id="theme">
-	<span class="transform group-hover:scale-90 duration-300">
-		Dark / Light
-	</span>
+	<span class="transform group-hover:scale-90 duration-300"> Dark / Light </span>
 </button>
diff --git a/src/lib/footer/Footer.svelte b/src/lib/footer/Footer.svelte
index f19c7f3..c17de10 100644
--- a/src/lib/footer/Footer.svelte
+++ b/src/lib/footer/Footer.svelte
@@ -1,33 +1,16 @@
 <script>
-	import Form from "$lib/home/Form.svelte";
-	import Socials from "$lib/Socials.svelte";
-	import ThemeSwitcher from "$lib/ThemeSwitcher.svelte";
-	import Social from "./Social.svelte";
+	import Form from '$lib/home/Form.svelte';
+	import Socials from '$lib/Socials.svelte';
+	import ThemeSwitcher from '$lib/ThemeSwitcher.svelte';
+	import Social from './Social.svelte';
 </script>
 
 <footer
-	class="@container py-20 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white z-20 flex flex-col gap-10"
+	class="@container py-20 lg:mt-40 bg-gradient-to-t from-blue-500 dark:from-blue-900 text-black dark:text-white z-20 flex flex-col gap-10"
 >
-	<div class="absolute top-0 -mt-40" id="contact"></div>
-
-	<section
-		class="container grid grid-cols-1 @xl:grid-cols-2 gap-20 justify-between"
-		id="contact"
-	>
-		<Form />
-
-		<div class="@lg:flex justify-end items-start">
-			<img src="/homepage/fullbody.png" class="w-[500px]" alt="contact" />
-		</div>
-	</section>
-
-	<hr class="container my-10 lg:my-10 opacity-10" />
-
-	<section
-		class="container flex flex-col-reverse lg:flex-row justify-between gap-10"
-	>
-		<div class="flex flex-col gap-3">
-			<h4 class="text-2xl font-bold">Bart Industries</h4>
+	<section class="container flex flex-col justify-between gap-5">
+		<h4 class="text-2xl font-bold">Bart Industries</h4>
+		<div class="flex flex-col">
 			<p class="text-sm">Copyright 2022 Pascal van Ginkel. All rights reserved.</p>
 			<p class="text-sm">Website made using SvelteKit, hosted on Vercel.</p>
 		</div>
diff --git a/src/lib/footer/Social.svelte b/src/lib/footer/Social.svelte
index aff4f14..a7baca3 100644
--- a/src/lib/footer/Social.svelte
+++ b/src/lib/footer/Social.svelte
@@ -3,8 +3,9 @@
 	export let icon;
 	export let url;
 	export let title;
-	export let align = "center";
-	export let justify = "center";
+	export let align = 'center';
+	export let justify = 'center';
+	export let stay = null;
 
 	if (title == null) title = text;
 </script>
@@ -13,10 +14,10 @@
 	href={url}
 	{title}
 	target="_blank"
-	class="rounded-xl bg-gray-200 bg-opacity-80 hover:bg-opacity-100 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-[101%] hover:shadow-2xl duration-150 shadow"
+	class="border-2 border-white border-opacity-20 bg-opacity-10 bg-white hover:bg-opacity-40 rounded-xl duration-300"
 >
-	<div class="flex gap-2 items-center justify-{justify} p-2 lg:p-5">
-		<span class="text-2xl lg:text-5xl">{icon}</span>
-		<span class="text-gray-700 dark:text-gray-300 font-light text-base lg:text-lg text-{align}">{text}</span>
+	<div class="flex gap-4 items-center py-2 px-4">
+		<span class="text-2xl">{icon}</span>
+		<span class="font-light text-base lg:text-lg text-{align}">{text}</span>
 	</div>
 </a>
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
index 8f7bb23..4a86514 100644
--- a/src/lib/header/Header.svelte
+++ b/src/lib/header/Header.svelte
@@ -1,14 +1,7 @@
 <script>
-	import Nav from "./Nav.svelte";
+	import Nav from './Nav.svelte';
 </script>
 
-<main
-	class="bg-gradient-to-r h-16 fixed w-full from-blue-700 to-blue-900 dark:bg-opacity-50 text-black dark:text-white z-40 overflow-hidden"
->
-	<section class="">
-		<Nav />
-	</section>
+<main class="px-5 w-full from-blue-700 to-blue-900 dark:bg-opacity-50 text-black dark:text-white">
+	<Nav />
 </main>
-<div class="h-16">
-
-</div>
\ No newline at end of file
diff --git a/src/lib/header/Nav.svelte b/src/lib/header/Nav.svelte
index 998e67a..af1a15a 100644
--- a/src/lib/header/Nav.svelte
+++ b/src/lib/header/Nav.svelte
@@ -5,39 +5,19 @@
 	import NavDropdown from './NavDropdown.svelte';
 </script>
 
-<div class="flex items-center justify-between">
-	<div class="flex items-center">
-		<a class="flex h-16 hover:bg-white hover:bg-opacity-20 duration-300" href="/">
-			<img
-				src="/bart.png"
-				alt="Logo"
-				class="h-full px-5 py-3 transform hover:scale-95 duration-300"
-			/>
+<div class="@container">
+	<div class="flex flex-col @2xl:flex-row items-center gap-2 p-2 justify-between">
+		<a
+			class="flex items-center rounded-xl hover:dark:bg-white hover:bg-black hover:bg-opacity-20 hover:dark:bg-opacity-20 whitepigeon duration-300 text-center text-xl @2xl:text-4xl"
+			href="/"
+		>
+			<span class="transform hover:scale-95 duration-300 px-4 py-2">Bart Industries</span>
 		</a>
-		<div class="hidden lg:flex h-16">
-			<NavButton url="/" text="Home" />
-			<NavButton url="/#blog" text="Blog" />
-			<NavButton url="/#portfolio" text="Portfolio" />
-			<NavButton url="/#about" text="About" />
-			<NavButton url="/#vr" text="VR" />
-			<!-- <NavButton url="/#furry" text="Furry" /> -->
-			<NavButton url="/#contact" text="Contact" />
-		</div>
-	</div>
-	<div class="hidden lg:flex h-16">
-		<ThemeSwitcher />
-	</div>
-	<div class="flex lg:hidden h-16">
-		<NavDropdown text="🍔">
-			<NavButton url="/" text="Home" />
-			<NavButton url="/#blog" text="Blog" />
-			<NavButton url="/#portfolio" text="Portfolio" />
-			<NavButton url="/#about" text="About" />
-			<NavButton url="/#vr" text="VR" />
-			<!-- <NavButton url="/#furry" text="Furry" /> -->
-			<NavButton url="/#contact" text="Contact" />
-			<hr class="bg-white" />
+		<div class="flex gap-2">
+			<NavButton url="/about" text="About" />
+			<NavButton url="/portfolio" text="Portfolio" />
+			<NavButton url="/blog" text="Blog" />
 			<ThemeSwitcher />
-		</NavDropdown>
+		</div>
 	</div>
 </div>
diff --git a/src/lib/header/NavButton.svelte b/src/lib/header/NavButton.svelte
index 6a3c82f..ff97877 100644
--- a/src/lib/header/NavButton.svelte
+++ b/src/lib/header/NavButton.svelte
@@ -1,9 +1,9 @@
 <script>
 	import { page } from '$app/stores';
 
-	export let text = "";
-	export let url = "";
-	export let type = "";
+	export let text = '';
+	export let url = '';
+	export let type = '';
 	export let disabled = false;
 
 	let classes;
@@ -12,44 +12,44 @@
 
 	function initButton(givenUrl) {
 		let current;
-		classes = "h-full py-2 px-10 flex justify-center items-center uppercase group";
+		classes =
+			'h-full xl:py-2 py-1 xl:px-10 px-2 flex justify-center items-center uppercase group rounded-xl';
 
 		switch (type) {
-			case "title":
-				classes +=
-					" text-xl font-bold bg-amber-500 duration-300";
+			case 'title':
+				classes += ' text-xl font-bold bg-amber-500 duration-300';
 				break;
 
 			default:
 				classes +=
-					" hover:bg-white hover:bg-opacity-20 font-bold text-lg duration-300";
+					' hover:bg-black hover:dark:bg-white hover:bg-opacity-20 hover:dark:bg-opacity-20 font-bold text-lg duration-300';
 				break;
 		}
 
 		if (disabled) {
 			url = null;
-			classes += " cursor-not-allowed opacity-50 select-none";
+			classes += ' cursor-not-allowed opacity-50 select-none';
 		}
 
-		if(url == "/") current = givenUrl == "/";
-		if(url != "/") current = givenUrl.includes(url);
+		if (url == '/') current = givenUrl == '/';
+		if (url != '/') current = givenUrl.includes(url);
 
 		current = false;
 
-		if(current == true) {
-			classes += " text-white bg-white bg-opacity-10";
+		if (current == true) {
+			classes += ' text-black dark:text-white bg-white bg-opacity-10';
 		} else {
-			classes += " text-gray-200";
+			classes += ' text-gray-900 dark:text-gray-200';
 		}
 	}
 
-	page.subscribe(value => {
+	page.subscribe((value) => {
 		initButton(value.url.pathname);
 	});
 </script>
 
 <a href={url} class={classes} on:click>
-	<p class="transform duration-300 {!disabled ? "group-hover:scale-110" : ''}">
+	<p class="transform duration-300 {!disabled ? 'group-hover:scale-110' : ''}">
 		{text}
 	</p>
 </a>
diff --git a/src/lib/home/Banner.svelte b/src/lib/home/Banner.svelte
index c8268c2..984c933 100644
--- a/src/lib/home/Banner.svelte
+++ b/src/lib/home/Banner.svelte
@@ -1,91 +1,89 @@
 <script>
-	import Socials from "$lib/Socials.svelte";
-	import { onMount } from "svelte";
-	import { fade, blur, fly, slide, scale } from "svelte/transition";
-	import { quintOut } from "svelte/easing";
+	import Socials from '$lib/Socials.svelte';
+	import { onMount } from 'svelte';
+	import { fade, blur, fly, slide, scale } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 
-	let name = "Midnight";
+	let name = 'Midnight';
 
 	const array = [
-		"/banner1.png",
-		"/banner2.png",
-		"/banner3.png",
-		"/banner4.png",
-		"/banner5.jpeg",
-		"/banner6.png",
-		"/banner7.png",
-		"/banner8.png",
+		'/banner1.png',
+		'/banner2.png',
+		'/banner3.png',
+		'/banner4.png',
+		'/banner5.jpeg',
+		'/banner6.png',
+		'/banner7.png',
+		'/banner8.png'
 	];
 
 	const words = [
-		"JavaScript",
-		"TypeScript",
-		"MySQL",
-		"Laravel",
-		"PHP",
-		"Livewire",
-		"NestJS",
-		"NodeJS",
-		"Unity",
-		"Substance Painter",
-		"Blender",
-		"PostgreSQL",
-		"TailwindCSS",
-		"Bootstrap",
-		"Fontawesome",
-		"Sass",
-		"Webpack",
-		"Redis",
-		"Svelte",
-		"SvelteKit",
-		"Python",
-		"Django",
-		"Vue",
-		"Java",
-		"JavaFX",
-		"NGINX",
-		"Docker",
-		"REST",
-		"GraphQL",
-		"TypeORM",
-		"Eloquent",
-		"Express",
-		"Linux",
-		"Composer",
-		"AlpineJS",
-		"Blade",
-		"JSX",
-		"Pug",
-		"Wordpress",
-		"Vercel",
-		"Netlify",
-		"AWS S3",
-		"Backblaze"
+		'JavaScript',
+		'TypeScript',
+		'MySQL',
+		'Laravel',
+		'PHP',
+		'Livewire',
+		'NestJS',
+		'NodeJS',
+		'Unity',
+		'Substance Painter',
+		'Blender',
+		'PostgreSQL',
+		'TailwindCSS',
+		'Bootstrap',
+		'Fontawesome',
+		'Sass',
+		'Webpack',
+		'Redis',
+		'Svelte',
+		'SvelteKit',
+		'Python',
+		'Django',
+		'Vue',
+		'Java',
+		'JavaFX',
+		'NGINX',
+		'Docker',
+		'REST',
+		'GraphQL',
+		'TypeORM',
+		'Eloquent',
+		'Express',
+		'Linux',
+		'Composer',
+		'AlpineJS',
+		'Blade',
+		'JSX',
+		'Pug',
+		'Wordpress',
+		'Vercel',
+		'Netlify',
+		'AWS S3',
+		'Backblaze',
+		'EntityFramework',
+		'.NET Core'
 	];
 
-	const names = [
-		"Pascal",
-		"Mid",
-		"Midblep",
-		"Midnight"
-	];
+	const names = ['Pascal', 'Mid', 'Midblep', 'Midnight'];
 
-	function calculateAge(birthday) { // birthday is a date
+	function calculateAge(birthday) {
+		// birthday is a date
 		var ageDifMs = Date.now() - birthday;
 		var ageDate = new Date(ageDifMs); // miliseconds from epoch
 		return Math.abs(ageDate.getUTCFullYear() - 1970);
 	}
 
 	onMount(() => {
-		for(let j = 0; j < 20; j++) {
+		for (let j = 0; j < 20; j++) {
 			let list = document.createElement('div');
-			list.classList.add('flex', "gap-2");
+			list.classList.add('flex', 'gap-2');
 
 			for (let i = 0; i < 20; i++) {
 				const word = words[Math.floor(Math.random() * words.length)];
 				let element = document.createElement('span');
 				element.innerHTML = word;
-				element.classList.add("text-9xl", "p-10", "whitespace-nowrap");
+				element.classList.add('text-9xl', 'p-10', 'whitespace-nowrap');
 
 				list.appendChild(element);
 			}
@@ -101,62 +99,81 @@
 	});
 
 	let randomBannerPic = array[Math.floor(Math.random() * array.length)];
-	randomBannerPic = "/homepage/banner.png";
+	randomBannerPic = '/homepage/banner.png';
 </script>
 
-<main class="relative overflow-hidden min-h-screen @container">
-	<div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim opacity-5 dark:opacity-5" id="lists">
-	</div>
-
-	<div class="flex h-full w-full @4xl:p-20 gap-20 p-5 z-10">
-		<div class="items-start @7xl:block hidden z-10">
-			<img
-				src={randomBannerPic}
-				alt="mid"
-				class="w-[40vw] z-10"
-			/>
-		</div>
-
-		<div class="flex flex-col py-5 h-full gap-10 z-10">
-			<div class="flex flex-col gap-10">
-				<span>
-					<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
-				</span>
+<main class="w-full h-full @container">
+	<section
+		class="bg-[#3A53FF] @2xl:rounded-t-[40px] relative overflow-hidden @container text-white"
+	>
+		<div
+			class="absolute inset-0 w-full h-full bg-no-repeat bg-cover bg-top opacity-50 rounded-t-[40px]"
+			style="background-image: url('portfoliobackg.svg')"
+		/>
+
+		<div
+			class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim opacity-5 dark:opacity-5"
+			id="lists"
+		/>
+
+		<div class="flex h-full w-full @4xl:p-20 gap-20 p-5 z-10">
+			<div class="items-start @7xl:block hidden z-10 w-full">
+				<img src={randomBannerPic} alt="mid" class="w-[40vw] z-10" />
+			</div>
 
-				<span class="flex gap-2 flex-wrap items-end">
-					<h2 class="text-4xl flex gap-2 font-extrabold">I'm
+			<div class="flex flex-col py-5 h-full gap-10 z-10 w-full">
+				<div class="flex flex-col gap-2">
+					<p class="text-4xl font-bold"><span class="whitepigeon">Hello</span></p>
+					<h2 class="text-6xl flex gap-2 font-extralight">
+						I'm
 						<span class="flex items-center">
 							{#key name}
 								<span in:scale>{name}</span>
 							{/key}
-							<h2 class="text-4xl font-extrabold">,</h2>
 						</span>
 					</h2>
-					<span class="text-3xl font-extralight">
-						and i really like to build things
-					</span>
-				</span>
+				</div>
+
+				<p class="lg:text-lg @2xl:mb-10">
+					I'm a {calculateAge(new Date('2001-10-30'))} year old programmer and tech enthusiast from The
+					Netherlands. I have a Bachelor of Science degree in Software Engineering and run a development
+					company called DubbelNull. During the week I work at Agro IT and build software that improves
+					the lives of people through efficient solutions.
+					<br /><br />
+					Bart Industries is my public digital home. It's a collection of my socials, work experiences
+					and past projects, artworks, hobbies and interests, fursonas and anything else I feel like
+					sharing with the world.
+					<br /><br />
+					Feel free to have a look around and learn about who I am and the things I've worked on.
+				</p>
+
+				<Socials stay="light" type="default" />
 			</div>
-
-			<p class="text-gray-800 dark:text-gray-300 lg:text-lg max-w-[800px]">
-				I'm a {calculateAge(new Date("2001-10-30"))} year old programmer and tech enthusiast from The Netherlands. I have an entrepreneurial spirit and own a webdevelopment studio called DubbelNull.
-				I am motivated by creating reliable software that makes a difference and improves the lives of people through unique solutions.
-				<br/><br/>
-				Bart Industries is my public digital home. It's a collection of my socials, work experiences and past projects, artworks, hobbies and interests, fursonas and anything else I feel like sharing with the world.
-				<br/><br/>
-				Feel free to have a look around and learn about who I am and the things I've worked on.
-			</p>
-
-			<Socials type="default" />
-
-			<span class="hidden 2xl:flex justify-center text-8xl float text-blue-600">
-				<img src="/downarrow.png" class="w-10" />
-			</span>
 		</div>
-	</div>
 
-	<svg class="dark:hidden block absolute left-0 bottom-0 right-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#e5e7eb" fill-opacity="1" d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
-	<svg class="hidden dark:block absolute left-0 bottom-0 right-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#1f2937" fill-opacity="1" d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
+		<div class="hidden @2xl:block">
+			<svg
+				class="dark:hidden block absolute left-0 bottom-0 right-0 scale-105 -ml-5"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 1440 320"
+				><path
+					fill="#fff"
+					fill-opacity="1"
+					d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+				/></svg
+			>
+			<svg
+				class="hidden dark:block absolute left-0 bottom-0 right-0 scale-105 -ml-5"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 1440 320"
+				><path
+					fill="#000"
+					fill-opacity="1"
+					d="M0,96L48,96C96,96,192,96,288,112C384,128,480,160,576,176C672,192,768,192,864,213.3C960,235,1056,277,1152,266.7C1248,256,1344,192,1392,160L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"
+				/></svg
+			>
+		</div>
+	</section>
 </main>
 
 <style>
@@ -230,4 +247,4 @@
 			padding-bottom: 30px;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/home/Form.svelte b/src/lib/home/Form.svelte
index 6812946..b7c9876 100644
--- a/src/lib/home/Form.svelte
+++ b/src/lib/home/Form.svelte
@@ -1,16 +1,16 @@
 <script>
-	import Socials from "$lib/Socials.svelte";
+	import Socials from '$lib/Socials.svelte';
 
-	import { variables } from "$lib/helpers/variables";
+	import { variables } from '$lib/helpers/variables';
 
-	let email = "";
-	let message = "";
+	let email = '';
+	let message = '';
 	let notify;
 
 	function send() {
-		email = "";
-		message = "";
-		notify = "Email sent!";
+		email = '';
+		message = '';
+		notify = 'Email sent!';
 	}
 </script>
 
@@ -18,27 +18,14 @@
 	<img src="/homepage/contact.png" class="w-60 mb-2" alt="fullbody of mid" />
 
 	<article class="flex flex-col gap-5 lg:gap-10">
-		<section
-			class="bg-slate-300 bg-opacity-50 dark:bg-slate-800 p-10 rounded-xl shadow flex flex-col gap-5 flex-grow"
-		>
-
-			<form
-				class="flex flex-col gap-5"
-				action="https://api.staticforms.xyz/submit"
-				method="post"
-			>
-				<input
-					type="hidden"
-					name="accessKey"
-					value="f237579b-85d1-414f-846c-409b8c8f57f0"
-				/>
+		<section class="flex flex-col gap-5 flex-grow">
+			<form class="flex flex-col gap-5" action="https://api.staticforms.xyz/submit" method="post">
+				<input type="hidden" name="accessKey" value="f237579b-85d1-414f-846c-409b8c8f57f0" />
 				<input type="text" name="honeypot" style="display: none;" />
 				<input type="hidden" name="redirectTo" value={variables.appUrl} />
 
 				<div class="flex flex-col">
-					<label for="email" value="E-Mail" class="text-lg font-bold"
-						>E-Mail</label
-					>
+					<label for="email" value="E-Mail" class="text-lg font-bold">E-Mail</label>
 					<input
 						id="email"
 						name="email"
@@ -49,9 +36,7 @@
 				</div>
 
 				<div class="flex flex-col">
-					<label for="message" value="E-Mail" class="text-lg font-bold"
-						>Message</label
-					>
+					<label for="message" value="E-Mail" class="text-lg font-bold">Message</label>
 					<textarea
 						id="message"
 						name="message"
@@ -62,7 +47,7 @@
 				</div>
 
 				<div class="flex flex-col">
-					{#if email != "" && message != ""}
+					{#if email != '' && message != ''}
 						<button
 							type="submit"
 							on:click={send}
@@ -88,7 +73,7 @@
 			</form>
 		</section>
 
-		<Socials/>
+		<Socials />
 	</article>
 </main>
 
diff --git a/src/lib/home/Portfolio.svelte b/src/lib/home/Portfolio.svelte
index e2afd34..04c23c6 100644
--- a/src/lib/home/Portfolio.svelte
+++ b/src/lib/home/Portfolio.svelte
@@ -60,7 +60,7 @@
 
 <section class="relative">
 	<div class="@container flex flex-col justify-center">
-		<div class="flex flex-col gap-2 whitepigeon text-white text-center">
+		<div class="flex flex-col gap-2 whitepigeon text-center">
 			<h2 class="font-bold text-4xl lg:text-8xl">Portfolio</h2>
 			<p class="lg:text-lg">
 				A collection of some of the projects and experiences I am most proud of
@@ -68,7 +68,7 @@
 		</div>
 
 		<div
-			class="container my-5 lg:my-20 grid grid-cols-1 @2xl:grid-cols-2 @6xl:grid-cols-3 gap-5 justify-between"
+			class="my-5 lg:my-20 grid grid-cols-1 @2xl:grid-cols-2 @4xl:grid-cols-3 @7xl:grid-cols-4 gap-5 justify-between"
 		>
 			<div class="absolute top-0 -mt-40" id="portfolio" />
 
@@ -80,11 +80,12 @@
 					<span class="text-sm font-light">2023 and ongoing</span>
 				</h3>
 				<p class="text-sm text-gray-800 dark:text-gray-100">
-					During my study's internship at Agro IT I developed a user friendly web environment for
-					their RVDM.<br /><br />
-					The company liked what I built and wanted to expand upon it, so they hired me after the internship
-					to finish the prototype and roll it out to clients. Now I work on creating web versions for
-					all their products.<br /><br />
+					During an internship at Agro IT I developed a web environment for RVDM, a realtime manure
+					transport compliance system. The company liked what I built and hired me to develop it
+					further as a sidejob. I then developed another system for hour and work registration for
+					my graduation project, and was hired to continue as a software engineer after my studies.
+					Now I help Agro IT transition their products to the cloud and develop new systems for
+					customers.
 				</p>
 				<img src="/rvdm.png" class="rounded-xl" alt="Picture of some people from the DevOps Team" />
 			</Card>
@@ -135,12 +136,11 @@
 					<span class="text-sm font-light">2020 to 2024</span>
 				</h3>
 				<p class="text-sm text-gray-800 dark:text-gray-100">
-					I am a year 4 student at the Saxion University of Applied Sciences in The Netherlands
-					majoring in Software Engineering and expected to graduate in July of 2024.
-					<br /><br />
-					During the study I've done several projects for real clients and worked in teams comprised
-					of people with lots of different backgrounds. I have mostly worked with Java, JavaScript, Python
-					and C#.
+					I obtained a Bachelor in HBO-ICT (Software Engineering) at the Saxion University of
+					Applied Sciences in The Netherlands. During the study I've done a multitude of projects
+					for clients and worked in teams comprised of people with lots of different backgrounds. I
+					have mostly worked with Java, JavaScript, Python and C#, and also have professional and
+					practical skills with many sysadmin tasks.
 				</p>
 				<img src="homepage/computer.png" class="w-40" />
 			</Card>
@@ -162,122 +162,145 @@
 				</Card>
 			</span>
 
-			<span class="@xl:row-span-3 @container">
+			<span class="@2xl:row-span-2">
+				<Card>
+					<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
+						<div class="inline-flex gap-3">⚔️ Skills</div>
+					</h3>
+					<p class="text-sm text-gray-800 dark:text-gray-100">
+						I can work with a wide range of systems, frameworks and technologies! I have a lot of
+						common knowledge around computer software and hardware that i can use to quickly adapt
+						to new languages and frameworks. Here is a constantly expanding list of some of the
+						things I am comfortable and like working with:
+					</p>
+					<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
+						{#each words as word, key}
+							<p>
+								{#if key == words.length - 2}
+									{@html word} and
+								{:else if key == words.length - 1}
+									{@html word}.
+								{:else}
+									{@html word},
+								{/if}
+							</p>
+						{/each}
+					</div>
+					<p class="text-sm font-bold italic pt-5">... and always eager to try out new things!</p>
+				</Card>
+			</span>
+
+			<span class="@xl:row-span-1 @xl:col-span-2 @container">
 				<Card>
 					<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
 						<div class="inline-flex gap-3">🏢 Internships</div>
 					</h3>
 
-					<div class="flex flex-col gap-2">
-						<span class="flex justify-between items-end"
-							><b class="text-lg">Agro IT - Graduation project</b>
-							<p class="text-sm">2024</p></span
-						>
-						<p class="text-sm text-gray-800 dark:text-gray-100">
-							I also did my graduation project at Agro IT, where I will build a complete system
-							around employee management, time tracking and employee payouts that integrates with
-							existing infrastructure and streamline the administrative process within the company
-							as well as for customers.
-						</p>
-					</div>
+					<div class="grid grid-cols-2 gap-10">
+						<div class="flex flex-col gap-2">
+							<span class="flex justify-between items-end"
+								><b class="text-lg">Agro IT - Graduation project</b>
+								<p class="text-sm">2024</p></span
+							>
+							<p class="text-sm text-gray-800 dark:text-gray-100">
+								I also did my graduation project at Agro IT, where I built a complete system around
+								employee management, time tracking and employee payouts that integrates with
+								existing infrastructure and streamline the administrative process within the company
+								as well as for customers.
+							</p>
+						</div>
 
-					<div class="flex flex-col gap-2">
-						<span class="flex justify-between items-end"
-							><b class="text-lg">Agro IT</b>
-							<p class="text-sm">2023</p></span
-						>
-						<p class="text-sm text-gray-800 dark:text-gray-100">
-							Agro IT is an agricultural software company in The Netherlands. In my 5 month long
-							internship I developed a new modern web app that connected to their existing APIs and
-							made it possible for customers to use their systems from anywhere.
-						</p>
-					</div>
+						<div class="flex flex-col gap-2">
+							<span class="flex justify-between items-end"
+								><b class="text-lg">Agro IT - 3rd year internship</b>
+								<p class="text-sm">2023</p></span
+							>
+							<p class="text-sm text-gray-800 dark:text-gray-100">
+								Agro IT is an agricultural software company in The Netherlands. In my 5 month long
+								internship I developed a new modern web app that connected to their existing APIs
+								and made it possible for customers to use their systems from anywhere.
+							</p>
+						</div>
 
-					<div class="flex flex-col gap-2">
-						<span class="flex justify-between items-end"
-							><b class="text-lg">Witteveen+Bos</b>
-							<p class="text-sm">2022</p></span
-						>
-						<p class="text-sm text-gray-800 dark:text-gray-100">
-							Witteveen+Bos is a major worldwide agricultural software company. During my internship
-							me and my team developed a generic authentication system in Django that would be used
-							as a customized plug-in template for new projects at the company.
-						</p>
-					</div>
+						<div class="flex flex-col gap-2">
+							<span class="flex justify-between items-end"
+								><b class="text-lg">Witteveen+Bos</b>
+								<p class="text-sm">2022</p></span
+							>
+							<p class="text-sm text-gray-800 dark:text-gray-100">
+								Witteveen+Bos is a major worldwide agricultural software company. During my
+								internship me and my team developed a generic authentication system in Django that
+								would be used as a customized plug-in template for new projects at the company.
+							</p>
+						</div>
 
-					<div class="flex flex-col gap-2">
-						<span class="flex justify-between items-end"
-							><b class="text-lg">AgroVision</b>
-							<p class="text-sm">2021</p></span
-						>
-						<p class="text-sm text-gray-800 dark:text-gray-100">
-							AgroVision is a Dutch software company for farmers. During my internship I worked on
-							an app that generates reports about CO2 usage on farms and informs the farmer on how
-							to reduce thecir emmissions.
-						</p>
-					</div>
+						<div class="flex flex-col gap-2">
+							<span class="flex justify-between items-end"
+								><b class="text-lg">AgroVision</b>
+								<p class="text-sm">2021</p></span
+							>
+							<p class="text-sm text-gray-800 dark:text-gray-100">
+								AgroVision is a Dutch software company for farmers. During my internship I worked on
+								an app that generates reports about CO2 usage on farms and informs the farmer on how
+								to reduce thecir emmissions.
+							</p>
+						</div>
 
-					<div class="flex flex-col gap-2">
-						<span class="flex justify-between items-end"
-							><b class="text-lg">SuiteSeven</b>
-							<p class="text-sm">2019</p></span
-						>
-						<p class="text-sm text-gray-800 dark:text-gray-100">
-							SuitSeven is a local webdevelopment studio. During my internship I worked on the
-							design for a client's website.
-						</p>
-					</div>
+						<div class="flex flex-col gap-2">
+							<span class="flex justify-between items-end"
+								><b class="text-lg">SuiteSeven</b>
+								<p class="text-sm">2019</p></span
+							>
+							<p class="text-sm text-gray-800 dark:text-gray-100">
+								SuitSeven is a local webdevelopment studio. During my internship I worked on the
+								design for a client's website.
+							</p>
+						</div>
 
-					<div class="flex flex-col gap-2">
-						<span class="flex justify-between items-end"
-							><b class="text-lg">Profity</b>
-							<p class="text-sm">2018</p></span
-						>
-						<p class="text-sm text-gray-800 dark:text-gray-100">
-							Profity is a software company creating ERP suites for the Dutch steel industry. During
-							my internship I learned the dynamics of a team and the different processes involved in
-							software development.
-						</p>
+						<div class="flex flex-col gap-2">
+							<span class="flex justify-between items-end"
+								><b class="text-lg">Profity</b>
+								<p class="text-sm">2018</p></span
+							>
+							<p class="text-sm text-gray-800 dark:text-gray-100">
+								Profity is a software company creating ERP suites for the Dutch steel industry.
+								During my internship I learned the dynamics of a team and the different processes
+								involved in software development.
+							</p>
+						</div>
 					</div>
 				</Card>
 			</span>
 
-			<span class="@2xl:col-span-2">
+			<span class="@2xl:col-span-1">
 				<Card buttonHref="https://furality.org/" buttonText="🦊 Visit furality.org">
-					<div class="grid grid-cols-2 gap-10">
-						<div class="w-full flex flex-col gap-5">
-							<h3
-								class="w-full text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
-							>
-								<div class="inline-flex gap-3">
-									<img src="/fox.png" class="h-8" alt="furality" /> Furality
-								</div>
-								<span class="text-sm font-light">2023 and ongoing</span>
-							</h3>
-							<p class="text-sm text-gray-800 dark:text-gray-100">
-								Furality is a nonprofit organisation that organises Furality Online Experience
-								(F.O.X.), the largest online furry convention in the world hosted inside VRChat.
-								<br /><br />
-								Since December 2023 I volunteer for Furality Inc. as a Backend Developer. I work together
-								with the rest of the DevOps Department to work on APIs and systems that use things such
-								as TypeScript, NestJS, Grafana, Prometheus, RabbitMQ, Authentik, C#, Unity, and more.
-								<br /><br />
-								I am mainly tasked with developing Furality's in-house OIDC system, and expanding Furality's
-								Unity plugins. But I also work on upgrading and scaling queue runners, updating existing
-								APIs that connect with Discord, Patreon, VRChat and others to run the convention itself,
-								and maintaining databases and infrastructure surrounding the systems.
-							</p>
-						</div>
-						<img
-							src="/furalitypic.png"
-							class="rounded-xl w-full aspect-square object-cover"
-							alt="Picture of some people from the DevOps Team"
-						/>
+					<div class="w-full flex flex-col gap-5">
+						<h3
+							class="w-full text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between"
+						>
+							<div class="inline-flex gap-3">
+								<img src="/fox.png" class="h-8" alt="furality" /> Furality
+							</div>
+							<span class="text-sm font-light">2023 and ongoing</span>
+						</h3>
+						<p class="text-sm text-gray-800 dark:text-gray-100">
+							Furality is a nonprofit organisation that organises Furality Online Experience
+							(F.O.X.), the largest online furry convention in the world hosted inside VRChat.
+							<br /><br />
+							Since December 2023 I volunteer for Furality Inc. as a Backend Developer. I work together
+							with the rest of the DevOps Department to work on APIs and systems that use things such
+							as TypeScript, NestJS, Grafana, Prometheus, RabbitMQ, Authentik, C#, Unity, and more.
+							<br /><br />
+							I am mainly tasked with developing Furality's in-house OIDC system, and expanding Furality's
+							Unity plugins. But I also work on upgrading and scaling queue runners, updating existing
+							APIs that connect with Discord, Patreon, VRChat and others to run the convention itself,
+							and maintaining databases and infrastructure surrounding the systems.
+						</p>
 					</div>
 				</Card>
 			</span>
 
-			<span class="@xl:row-span-3">
+			<!-- <span class="@xl:row-span-3">
 				<Card>
 					<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3">
 						<img src="/homepage/esu.png" class="h-10 rounded-full bg-black p-1" alt="esu" /> Easter System
@@ -302,35 +325,7 @@
 						<img src="/homepage/esubanner.png" alt="cover of act 1" />
 					</span>
 				</Card>
-			</span>
-
-			<span class="@2xl:row-span-2">
-				<Card>
-					<h3 class="text-xl font-bold flex-wrap inline-flex items-center gap-3 justify-between">
-						<div class="inline-flex gap-3">⚔️ Skills</div>
-					</h3>
-					<p class="text-sm text-gray-800 dark:text-gray-100">
-						I can work with a wide range of systems, frameworks and technologies! I have a lot of
-						common knowledge around computer software and hardware that i can use to quickly adapt
-						to new languages and frameworks. Here is a constantly expanding list of some of the
-						things I am comfortable and like working with:
-					</p>
-					<div id="scroll-container" class="flex flex-wrap gap-1 w-full text-center">
-						{#each words as word, key}
-							<p>
-								{#if key == words.length - 2}
-									{@html word} and
-								{:else if key == words.length - 1}
-									{@html word}.
-								{:else}
-									{@html word},
-								{/if}
-							</p>
-						{/each}
-					</div>
-					<p class="text-sm font-bold italic pt-5">... and always eager to try out new things!</p>
-				</Card>
-			</span>
+			</span> -->
 
 			<span class="@xl:row-span-2 @container">
 				<Card>
diff --git a/src/lib/home/Sona.svelte b/src/lib/home/Sona.svelte
index fc5df2e..3d1ce90 100644
--- a/src/lib/home/Sona.svelte
+++ b/src/lib/home/Sona.svelte
@@ -16,18 +16,18 @@
 	</h3>
 	<div class="grid lg:grid-cols-5 gap-5">
 		<div class="lg:col-span-3 flex flex-col gap-5">
-			<div class="flex flex-wrap gap-2 bg-black bg-opacity-5 dark:bg-opacity-40 p-5">
+			<div class="flex flex-wrap gap-2 bg-blue-500 bg-opacity-20 dark:bg-opacity-40 p-5">
 				<p class="font-bold">
 					Hey there! I'm Pascal, but my internet name is Mid. Nice to have you here on my website.
 					I'm a {calculateAge(new Date('2001-10-30'))} year old programmer and tech enthusiast from The
 					Netherlands. If you wanna know a little more about me then here are some of the things I like
 					to do. For my past experience and portfolio visit
-					<a href="#portfolio" class="a">my portfolio section</a>.
+					<a href="/portfolio" class="a">my portfolio section</a>.
 				</p>
 			</div>
 
 			<div
-				class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
+				class="flex flex-col gap-5 relative text-sm p-5 border-gray-400 border-opacity-20 dark:border-opacity-20 border-4"
 			>
 				<span id="about-computers" class="absolute top-0 -mt-40" />
 
@@ -47,7 +47,7 @@
 			</div>
 
 			<div
-				class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
+				class="flex flex-col gap-5 relative text-sm p-5 border-gray-400 border-opacity-20 dark:border-opacity-20 border-4"
 			>
 				<span id="about-furry" class="absolute top-0 -mt-40" />
 
@@ -70,7 +70,7 @@
 			</div>
 
 			<div
-				class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
+				class="flex flex-col gap-5 relative text-sm p-5 border-gray-400 border-opacity-20 dark:border-opacity-20 border-4"
 			>
 				<span id="about-drones" class="absolute top-0 -mt-40" />
 
@@ -93,7 +93,7 @@
 			</div>
 
 			<div
-				class="flex flex-col gap-5 relative text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-4"
+				class="flex flex-col gap-5 relative text-sm p-5 border-gray-400 border-opacity-20 dark:border-opacity-20 border-4"
 			>
 				<span id="about-coding" class="absolute top-0 -mt-40" />
 
@@ -106,7 +106,7 @@
 					wrote the following on their website:
 				</p>
 
-				<div class="bg-gray-200 p-5 flex gap-5">
+				<div class="bg-neutral-200 dark:bg-neutral-900 p-5 flex gap-5">
 					<p class="text-6xl font-extrabold">"</p>
 					<blockquote cite="https://msx.horse/about.php">
 						as time has gone on, i have become fairly exhausted with the unnecesary bloat in all
@@ -132,10 +132,10 @@
 
 		<div class="lg:col-span-2 flex flex-col gap-5 overflow-x-hidden pt-10">
 			<div
-				class="flex flex-col gap-1 text-sm p-5 border-black border-opacity-10 dark:border-opacity-20 border-dashed border-4"
+				class="flex flex-col gap-1 text-sm p-5 border-gray-400 border-opacity-20 dark:border-opacity-20 border-dashed border-4"
 			>
 				<h4
-					class="-mt-12 lg:-mt-16 lg:text-lg bg-gray-100 dark:bg-gray-900 -mx-3 text-blue-500 overflow-x-hidden"
+					class="-mt-12 lg:-mt-16 lg:text-lg bg-white dark:bg-black -mx-3 text-blue-500 overflow-x-hidden"
 				>
 					<b
 						>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</b
diff --git a/src/lib/home/Virtual.svelte b/src/lib/home/Virtual.svelte
index 54e37ba..8574b61 100644
--- a/src/lib/home/Virtual.svelte
+++ b/src/lib/home/Virtual.svelte
@@ -1,89 +1,7 @@
 <main class="@container flex flex-col relative">
-	<div class="absolute top-0 -mt-40" id="vr" />
+	<div class="absolute top-0" id="vr" />
 
-	<div class="text-center text-xl font-bold flex flex-col text-[#2563EB] fira @2xl:-mt-60">
-		<div class="opacity-10 flex w-screen justify-between">
-			<span>//</span>
-			<span>//</span>
-		</div>
-		<div class="opacity-20 flex w-screen justify-between">
-			<span>///</span>
-			<span>///</span>
-		</div>
-		<div class="opacity-30 flex w-screen justify-between">
-			<span>////</span>
-			<span>////</span>
-		</div>
-		<div class="opacity-40 flex w-screen justify-between">
-			<span>/////</span>
-			<span>/////</span>
-		</div>
-		<div class="opacity-50 flex w-screen justify-between">
-			<span>//////////</span>
-			<span>//////////</span>
-		</div>
-		<div class="opacity-60 flex w-screen justify-between">
-			<span>////////////////////</span>
-			<span>////////////////////</span>
-		</div>
-		<div class="opacity-70 flex w-screen justify-between">
-			<span>//////////////////////////////</span>
-			<span>//////////////////////////////</span>
-		</div>
-		<div class="opacity-80 flex w-screen justify-between">
-			<span>////////////////////////////////////////</span>
-			<span>////////////////////////////////////////</span>
-		</div>
-		<div class="opacity-90">
-			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-		</div>
-		<div class="opacity-100">
-			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-		</div>
-		<div class="opacity-100">
-			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-		</div>
-		<div class="opacity-100">
-			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-		</div>
-		<div class="opacity-90">
-			////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
-		</div>
-		<div class="opacity-80 flex w-screen justify-between">
-			<span>////////////////////////////////////////</span>
-			<span>////////////////////////////////////////</span>
-		</div>
-		<div class="opacity-70 flex w-screen justify-between">
-			<span>//////////////////////////////</span>
-			<span>//////////////////////////////</span>
-		</div>
-		<div class="opacity-60 flex w-screen justify-between">
-			<span>////////////////////</span>
-			<span>////////////////////</span>
-		</div>
-		<div class="opacity-50 flex w-screen justify-between">
-			<span>//////////</span>
-			<span>//////////</span>
-		</div>
-		<div class="opacity-40 flex w-screen justify-between">
-			<span>/////</span>
-			<span>/////</span>
-		</div>
-		<div class="opacity-30 flex w-screen justify-between">
-			<span>////</span>
-			<span>////</span>
-		</div>
-		<div class="opacity-20 flex w-screen justify-between">
-			<span>///</span>
-			<span>///</span>
-		</div>
-		<div class="opacity-10 flex w-screen justify-between">
-			<span>//</span>
-			<span>//</span>
-		</div>
-	</div>
-
-	<section class="w-full h-full flex flex-col justify-between gap-10 @2xl:gap-20 @2xl:-mt-40">
+	<section class="w-full h-full flex flex-col justify-between gap-10 @2xl:gap-20">
 		<div class="baron text-2xl lg:text-4xl 2xl:text-5xl text-center text-blue-600 mx-auto">
 			<h2 class="text-4xl lg:text-4xl 2xl:text-6xl">Discover</h2>
 			<h2 class="text-4xl lg:text-6xl 2xl:text-8xl">Virtual Creativity</h2>
@@ -98,13 +16,13 @@
 			</h2>
 
 			<img
-				src="/homepage/vr/vr.png"
+				src="/homepage/vr/fancy.png"
 				class="skew-x-3 lg:ml-3 object-cover @6xl:aspect-[1/2] w-full h-full @6xl:row-span-2"
 				alt="couch"
 			/>
 
 			<img
-				src="/homepage/vr/fancy.png"
+				src="/homepage/vr/me.png"
 				class="skew-x-3 object-cover @6xl:aspect-[1/1] w-full h-full"
 				alt="couch"
 			/>
@@ -132,7 +50,7 @@
 			/>
 
 			<img
-				src="/homepage/vr/couch.png"
+				src="/homepage/vr/group.png"
 				class="skew-x-3 lg:-skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[3/2] w-full h-full @6xl:col-span-3 @6xl:row-span-2"
 				alt="couch"
 			/>
@@ -150,7 +68,7 @@
 			/>
 
 			<img
-				src="/homepage/vr/meet.png"
+				src="/homepage/vr/couch.png"
 				class="skew-x-3 lg:-ml-3 object-cover @6xl:aspect-[2/1] w-full h-full @6xl:col-span-2"
 				alt="couch"
 			/>
diff --git a/src/routes/(landing)/+layout.svelte b/src/routes/(landing)/+layout.svelte
new file mode 100644
index 0000000..5181914
--- /dev/null
+++ b/src/routes/(landing)/+layout.svelte
@@ -0,0 +1,11 @@
+<script>
+	import Header from '$lib/header/Header.svelte';
+	import '../../app.css';
+</script>
+
+<div class="bg-white h-screen overflow-y-auto dark:bg-black text-black dark:text-white">
+	<div class="w-full min-h-screen max-w-[2000px] flex flex-col gap-5 mx-auto">
+		<Header />
+		<slot />
+	</div>
+</div>
diff --git a/src/routes/(landing)/+page.svelte b/src/routes/(landing)/+page.svelte
new file mode 100644
index 0000000..b72e2b0
--- /dev/null
+++ b/src/routes/(landing)/+page.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Banner from '$lib/home/Banner.svelte';
+	import Blog from '$lib/home/Blog.svelte';
+	import Portfolio from '$lib/home/Portfolio.svelte';
+	import Sona from '$lib/home/Sona.svelte';
+	import Virtual from '$lib/home/Virtual.svelte';
+	import Furry from '$lib/home/Furry.svelte';
+	import Nav from '$lib/header/Nav.svelte';
+	import Header from '$lib/header/Header.svelte';
+</script>
+
+<svelte:head>
+	<title>Bart Industries</title>
+</svelte:head>
+
+<Banner />
diff --git a/src/routes/(pages)/+layout.svelte b/src/routes/(pages)/+layout.svelte
new file mode 100644
index 0000000..292e2d6
--- /dev/null
+++ b/src/routes/(pages)/+layout.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Footer from '$lib/footer/Footer.svelte';
+	import Header from '$lib/header/Header.svelte';
+	import '../../app.css';
+</script>
+
+<div class="bg-white h-screen overflow-y-auto dark:bg-black text-black dark:text-white">
+	<div class="w-full min-h-screen max-w-[2000px] flex flex-col mx-auto">
+		<Header />
+		<slot />
+	</div>
+	<Footer />
+</div>
diff --git a/src/routes/(pages)/about/+page.svelte b/src/routes/(pages)/about/+page.svelte
new file mode 100644
index 0000000..1ba6d3a
--- /dev/null
+++ b/src/routes/(pages)/about/+page.svelte
@@ -0,0 +1,18 @@
+<script>
+	import Banner from '$lib/home/Banner.svelte';
+	import Blog from '$lib/home/Blog.svelte';
+	import Portfolio from '$lib/home/Portfolio.svelte';
+	import Sona from '$lib/home/Sona.svelte';
+	import Virtual from '$lib/home/Virtual.svelte';
+	import Furry from '$lib/home/Furry.svelte';
+	import Footer from '$lib/footer/Footer.svelte';
+</script>
+
+<svelte:head>
+	<title>Bart Industries</title>
+</svelte:head>
+
+<main class="flex flex-col mt-20 gap-40">
+	<Sona />
+	<Virtual />
+</main>
diff --git a/src/routes/(pages)/blog/+layout.svelte b/src/routes/(pages)/blog/+layout.svelte
new file mode 100644
index 0000000..aaed333
--- /dev/null
+++ b/src/routes/(pages)/blog/+layout.svelte
@@ -0,0 +1,3 @@
+<main class="pt-10 pb-20 min-h-screen">
+	<slot />
+</main>
diff --git a/src/routes/(pages)/blog/+page.svelte b/src/routes/(pages)/blog/+page.svelte
new file mode 100644
index 0000000..a0c5755
--- /dev/null
+++ b/src/routes/(pages)/blog/+page.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Footer from '$lib/footer/Footer.svelte';
+	import Blog from '$lib/home/Blog.svelte';
+</script>
+
+<Blog />
diff --git a/src/routes/blog/centering-a-div/+page.svelte b/src/routes/(pages)/blog/centering-a-div/+page.svelte
similarity index 100%
rename from src/routes/blog/centering-a-div/+page.svelte
rename to src/routes/(pages)/blog/centering-a-div/+page.svelte
diff --git a/src/routes/blog/my-internship-at-agro-it/+page.svelte b/src/routes/(pages)/blog/my-internship-at-agro-it/+page.svelte
similarity index 100%
rename from src/routes/blog/my-internship-at-agro-it/+page.svelte
rename to src/routes/(pages)/blog/my-internship-at-agro-it/+page.svelte
diff --git a/src/routes/blog/releasing-puppy-pride/+page.svelte b/src/routes/(pages)/blog/releasing-puppy-pride/+page.svelte
similarity index 100%
rename from src/routes/blog/releasing-puppy-pride/+page.svelte
rename to src/routes/(pages)/blog/releasing-puppy-pride/+page.svelte
diff --git a/src/routes/blog/the-power-of-vr/+page.svelte b/src/routes/(pages)/blog/the-power-of-vr/+page.svelte
similarity index 100%
rename from src/routes/blog/the-power-of-vr/+page.svelte
rename to src/routes/(pages)/blog/the-power-of-vr/+page.svelte
diff --git a/src/routes/(pages)/portfolio/+page.svelte b/src/routes/(pages)/portfolio/+page.svelte
new file mode 100644
index 0000000..be6cb86
--- /dev/null
+++ b/src/routes/(pages)/portfolio/+page.svelte
@@ -0,0 +1,17 @@
+<script>
+	import Banner from '$lib/home/Banner.svelte';
+	import Blog from '$lib/home/Blog.svelte';
+	import Portfolio from '$lib/home/Portfolio.svelte';
+	import Sona from '$lib/home/Sona.svelte';
+	import Virtual from '$lib/home/Virtual.svelte';
+	import Furry from '$lib/home/Furry.svelte';
+	import Footer from '$lib/footer/Footer.svelte';
+</script>
+
+<svelte:head>
+	<title>Bart Industries</title>
+</svelte:head>
+
+<main class="flex flex-col mt-20">
+	<Portfolio />
+</main>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
deleted file mode 100644
index 2a818fe..0000000
--- a/src/routes/+layout.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-	import Footer from "$lib/footer/Footer.svelte";
-	import Header from "$lib/header/Header.svelte";
-
-	import "../app.css";
-</script>
-
-<div class="bg-gray-100 dark:bg-gray-900 text-black dark:text-white">
-	<div class="min-h-screen">
-		<Header />
-
-		<slot />
-	</div>
-
-	<Footer />
-</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
deleted file mode 100644
index 81ba77b..0000000
--- a/src/routes/+page.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script>
-	import Banner from '$lib/home/Banner.svelte';
-	import Blog from '$lib/home/Blog.svelte';
-	import Portfolio from '$lib/home/Portfolio.svelte';
-	import Sona from '$lib/home/Sona.svelte';
-	import Virtual from '$lib/home/Virtual.svelte';
-	import Furry from '$lib/home/Furry.svelte';
-</script>
-
-<svelte:head>
-	<title>Bart Industries</title>
-</svelte:head>
-
-<main class="overflow-x-hidden flex flex-col">
-	<Banner />
-
-	<div class="bg-gray-200 dark:bg-gray-800 pb-20">
-		<Blog />
-	</div>
-
-	<div
-		class="bg-gradient-to-b from-gray-200 via-gray-100 dark:via-gray-900 dark:from-gray-800 w-full"
-	>
-		<div class="bg-[#3A53FF] rounded-t-[50px] py-20 lg:mx-5 relative">
-			<div
-				class="absolute inset-0 w-full h-full bg-no-repeat bg-cover bg-top rounded-t-[50px]"
-				style="background-image: url('portfoliobackg.svg')"
-			/>
-
-			<Portfolio />
-		</div>
-	</div>
-
-	<img class="scale-150 lg:mx-5 lg:scale-100 -mt-[1px]" src="/homepage/steps.svg" />
-
-	<div class="py-20">
-		<Sona />
-	</div>
-
-	<div class="bg-repeat-y bg-contain dotsandlines mt-20 mb-20">
-		<Virtual />
-	</div>
-
-	<!-- <Furry/> -->
-</main>
diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte
deleted file mode 100644
index c007390..0000000
--- a/src/routes/blog/+layout.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<main class="container pt-10 pb-20 min-h-screen">
-    <slot/>
-</main>
\ No newline at end of file
diff --git a/static/homepage/vr/group.png b/static/homepage/vr/group.png
new file mode 100644
index 0000000..924958c
Binary files /dev/null and b/static/homepage/vr/group.png differ
diff --git a/static/homepage/vr/me.png b/static/homepage/vr/me.png
new file mode 100644
index 0000000..d6c2c54
Binary files /dev/null and b/static/homepage/vr/me.png differ