diff --git a/src/lib/Socials.svelte b/src/lib/Socials.svelte
index b6c5fb2..9656ebd 100644
--- a/src/lib/Socials.svelte
+++ b/src/lib/Socials.svelte
@@ -1,8 +1,14 @@
 <script>
 	import Social from "./footer/Social.svelte";
+	export let text = false;
 </script>
 
-<div class="flex w-full gap-3">
+<div class="grid {text ? "grid-cols-4" : "lg:grid-cols-6 grid-cols-3"} flex-wrap gap-3">
+	{#if text}
+		<div class="col-span-2 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
+			Social Profiles
+		</div>
+	{/if}
 	<Social
 		url="https://twitter.com/midblep"
 		title="The Bird App"
@@ -11,10 +17,16 @@
 	/>
 	<Social
 		url="https://gitlab.com/midblep"
-		title="I don't use GitHub"
+		title="GitLab"
 		icon="🦊"
 		text="GitLab"
 	/>
+	<Social
+		url="https://github.com/midblep"
+		title="Very new, mostly empty"
+		icon="🐙"
+		text="GitHub"
+	/>
 	<Social
 		url="https://discord.com/users/191525900880183296"
 		title="Mid#0001"
@@ -27,4 +39,9 @@
 		icon="✉️"
 		text="E-Mail"
 	/>
+	{#if text}
+		<div class="col-span-1 items-center justify-center flex text-xl font-bold rounded-xl bg-opacity-50 bg-slate-300 dark:bg-slate-800 duration-150 shadow">
+			// EOL
+		</div>
+	{/if}
 </div>
diff --git a/src/lib/ThemeSwitcher.svelte b/src/lib/ThemeSwitcher.svelte
index 29519a0..649f061 100644
--- a/src/lib/ThemeSwitcher.svelte
+++ b/src/lib/ThemeSwitcher.svelte
@@ -2,8 +2,7 @@
 	import { onMount } from "svelte";
 	import { getCookie } from "./helpers/cookies";
 
-	let classes =
-		"h-full py-2 px-5 flex justify-center items-center group hover:bg-white hover:bg-opacity-30 text-white text-lg duration-300";
+	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";
 
 	function switchTheme() {
 		if (document.documentElement.classList.contains("dark")) {
@@ -15,13 +14,13 @@
 
 	function setLight() {
 		document.documentElement.classList.remove("dark");
-		document.querySelector("#theme").innerHTML = "Set to Dark";
+		document.querySelector("#theme").innerHTML = "☀️";
 		document.cookie = "theme=light";
 	}
 
 	function setDark() {
 		document.documentElement.classList.add("dark");
-		document.querySelector("#theme").innerHTML = "Set to Light";
+		document.querySelector("#theme").innerHTML = "🌙";
 		document.cookie = "theme=dark";
 	}
 
diff --git a/src/lib/footer/Footer.svelte b/src/lib/footer/Footer.svelte
index 49ddc6a..537b09b 100644
--- a/src/lib/footer/Footer.svelte
+++ b/src/lib/footer/Footer.svelte
@@ -1,29 +1,34 @@
 <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";
 </script>
 
-<main
-	class="py-10 px-2 lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-20"
+<footer
+	class="py-20 px-2 lg:px-10 bg-white dark:bg-black dark:bg-opacity-50 text-black dark:text-white shadow z-20 flex flex-col gap-10"
 >
+	<section
+		class="container relative overflow-hidden px-5 lg:px-0 flex flex-col lg:flex-row gap-10 h-full justify-between"
+		id="contact"
+	>
+		<div class="absolute top-0 -mt-40" id="contact"></div>
+
+		<div class="flex gap-10 w-full">
+			<Form />
+		</div>
+
+		<img src="/homepage/fullbody.png" class="lg:block hidden lg:h-[500px] z-10" alt="contact" />
+	</section>
+
+	<hr class="container" />
+
 	<section
 		class="container flex flex-col-reverse lg:flex-row justify-between gap-10"
 	>
 		<div class="flex flex-col gap-3">
 			<h4 class="text-xl font-bold baron-light">Bart Industries</h4>
-			<hr />
 			<p class="text-xs">Copyright 2022 Mid // Midblep. All rights reserved.</p>
 		</div>
-
-		<!-- <div class="flex flex-col gap-5 lg:items-end">
-			<Socials />
-			<div class="text-amber-500 flex gap-2 items-center font-bold">
-				<span class="text-xs">Theme:</span>
-				<span class="bg-gray-100 dark:bg-gray-800"
-					><ThemeSwitcher /></span
-				>
-			</div>
-		</div> -->
 	</section>
-</main>
+</footer>
diff --git a/src/lib/header/Nav.svelte b/src/lib/header/Nav.svelte
index 47f9f03..1e4b7cd 100644
--- a/src/lib/header/Nav.svelte
+++ b/src/lib/header/Nav.svelte
@@ -16,10 +16,10 @@
 		</a>
 		<div class="hidden lg:flex h-16">
 			<NavButton url="/" text="Home" />
-			<NavButton disabled={true} url="/blog" text="Blog" />
-			<NavButton disabled={true} url="/portfolio" text="Portfolio" />
-			<NavButton disabled={true} url="/esu" text="ESU" />
-			<NavButton url="/furry" text="Furry" />
+			<NavButton url="#portfolio" text="Portfolio" />
+			<NavButton url="#blog" text="Blog" />
+			<NavButton url="#furry" text="Furry" />
+			<NavButton url="#contact" text="Contact" />
 		</div>
 	</div>
 	<div class="hidden lg:flex h-16">
@@ -28,10 +28,10 @@
 	<div class="flex lg:hidden h-16">
 		<NavDropdown text="🍔">
 			<NavButton url="/" text="Home" />
-			<NavButton disabled={true} url="/blog" text="Blog" />
-			<NavButton disabled={true} url="/portfolio" text="Portfolio" />
-			<NavButton disabled={true} url="/esu" text="ESU" />
-			<NavButton url="/furry" text="Furry" />
+			<NavButton url="#portfolio" text="Portfolio" />
+			<NavButton url="#blog" text="Blog" />
+			<NavButton url="#furry" text="Furry" />
+			<NavButton url="#contact" text="Contact" />
 			<hr class="bg-white" />
 			<ThemeSwitcher />
 		</NavDropdown>
diff --git a/src/lib/home/Banner.svelte b/src/lib/home/Banner.svelte
index 1f50b17..590d209 100644
--- a/src/lib/home/Banner.svelte
+++ b/src/lib/home/Banner.svelte
@@ -49,7 +49,10 @@
 		"Blade",
 		"JSX",
 		"Pug",
-		"Wordpress"
+		"Wordpress",
+		"Vercel",
+		"Netlify",
+		"AWS S3"
 	];
 
 	onMount(() => {
@@ -74,41 +77,44 @@
 	randomBannerPic = "/homepage/banner.png";
 </script>
 
-<main class="flex flex-col lg:flex-row gap-5 items-center pt-5 pb-60 justify-between px-6 lg:px-20 relative z-0 overflow-hidden">
+<main class="flex flex-col lg:flex-row gap-5 items-center pt-5 pb-52 justify-between px-6 lg:px-20 relative z-0 overflow-hidden">
 	<div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim" id="lists">
 	</div>
 
-	<div class="container flex gap-5 items-center pt-5 pb-20 justify-between px-6 lg:px-20">
-		<div class="hidden lg:block h-full w-1/2 z-10">
+	<div class="flex lg:mx-20 gap-10 items-center pt-5 pb-96 px-6 lg:px-20">
+		<div class="hidden lg:block h-full w-1/3 z-10">
 			<img
 				src={randomBannerPic}
 				alt="mid"
 			/>
 		</div>
 
-		<div class="flex flex-col gap-5 justify-center lg:w-3/5 z-10">
+		<div class="flex flex-col gap-10 justify-center lg:w-4/12 z-10">
 			<span>
 				<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
 			</span>
 
 			<span class="flex flex-wrap gap-2 items-end">
-				<h2 class="text-4xl font-extrabold">I'm Midnight,</h2>
+				<h2 class="text-4xl font-extrabold relative">I'm Midnight,</h2>
 				<span class="text-3xl font-extralight">
-					I like to make things on the web
+					and I like to make things on the web
 				</span>
 			</span>
 
-			<hr class="w-1/3 my-2" />
+			<hr class="w-1/4" />
 
-			<span class="my-2">
-				<p class="text-gray-800 dark:text-gray-300 lg:w-3/4">
-					Bart Industries is a collection of everything I've done such as my projects, involvements and ambitions,
-					but also other things such as my furry side, stories, socials, blogposts and everything else I feel like sharing.
-					<br/><br/>
-					I am open for opportunities,
-					if you want to reach out you can use one of the methods below or <a href="#contact" class="a">the contact form</a>.
-				</p>
-			</span>
+			<p class="text-gray-800 dark:text-gray-300 text-lg">
+				Bart Industries is an online collection of me such as my socials, work experiences,
+				past-time projects, artworks and hobbies, random blogposts, fursonas and anything else I feel proud enough of to share.
+				<br/><br/>
+				For my skills and experiences I implore you to visit my <a href="#portfolio" class="a">portfolio section</a>, but
+				I am always excited to explore other technologies and have new experiences.
+				<br/><br/>
+				I am open to new opportunities and am always eager to work,
+				you can reach out using one of the methods below or <a href="#contact" class="a">the contact form</a>.
+			</p>
+
+			<hr class="w-1/4" />
 
 			<Socials />
 		</div>
@@ -117,6 +123,23 @@
 			<img src="/downarrow.png" class="w-10" />
 		</span>
 	</div>
+
+	<div class="w-screen absolute bottom-0 left-0">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
+			<path
+				class="block dark:hidden"
+				fill="rgba(229, 231, 235, 1)"
+				fill-opacity="1"
+				d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
+			/>
+			<path
+				class="hidden dark:block"
+				fill="rgba(31, 41, 55, 1)"
+				fill-opacity="1"
+				d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
+			/>
+		</svg>
+	</div>
 </main>
 
 <style>
diff --git a/src/lib/home/Card.svelte b/src/lib/home/Card.svelte
index ef647a8..cb667cc 100644
--- a/src/lib/home/Card.svelte
+++ b/src/lib/home/Card.svelte
@@ -9,7 +9,7 @@
 <div class={classes}>
 	<span class="h-4 group-hover:-translate-y-1 bg-blue-600 rounded-t-xl duration-300"></span>
 
-	<div class="flex-grow flex flex-col gap-2 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700">
+	<div class="flex-grow flex flex-col gap-2 w-full relative p-10 group-hover:-translate-y-1 duration-300 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
 		<slot />
 	</div>
 
diff --git a/src/lib/home/Form.svelte b/src/lib/home/Form.svelte
index 218b9d8..b2adb15 100644
--- a/src/lib/home/Form.svelte
+++ b/src/lib/home/Form.svelte
@@ -14,80 +14,82 @@
 	}
 </script>
 
-<main class="flex flex-col gap-10">
-	<img src="/homepage/contact.png" class="w-1/2" alt="fullbody of mid" />
+<main class="flex flex-col gap-10 w-full">
+	<img src="/homepage/contact.png" class="w-60 mb-2" alt="fullbody of mid" />
 
-	<section
-		class="bg-slate-200 dark:bg-gray-800 p-10 rounded-xl shadow w-full flex flex-col gap-5"
-	>
-
-		<form
-			class="flex flex-col gap-5"
-			action="https://api.staticforms.xyz/submit"
-			method="post"
+	<article class="flex gap-10">
+		<section
+			class="bg-slate-300 bg-opacity-50 dark:bg-slate-800 p-10 rounded-xl shadow w-full flex flex-col gap-5 lg:w-1/3"
 		>
-			<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
-				>
+			<form
+				class="flex flex-col gap-5"
+				action="https://api.staticforms.xyz/submit"
+				method="post"
+			>
 				<input
-					id="email"
-					name="email"
-					type="text"
-					class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
-					bind:value={email}
+					type="hidden"
+					name="accessKey"
+					value="f237579b-85d1-414f-846c-409b8c8f57f0"
 				/>
-			</div>
+				<input type="text" name="honeypot" style="display: none;" />
+				<input type="hidden" name="redirectTo" value={variables.appUrl} />
 
-			<div class="flex flex-col">
-				<label for="message" value="E-Mail" class="text-lg font-bold"
-					>Message</label
-				>
-				<textarea
-					id="message"
-					name="message"
-					class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
-					bind:value={message}
-					rows="5"
-				/>
-			</div>
+				<div class="flex flex-col">
+					<label for="email" value="E-Mail" class="text-lg font-bold"
+						>E-Mail</label
+					>
+					<input
+						id="email"
+						name="email"
+						type="text"
+						class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
+						bind:value={email}
+					/>
+				</div>
+
+				<div class="flex flex-col">
+					<label for="message" value="E-Mail" class="text-lg font-bold"
+						>Message</label
+					>
+					<textarea
+						id="message"
+						name="message"
+						class="py-1 px-2 rounded-lg shadow dark:bg-gray-600"
+						bind:value={message}
+						rows="5"
+					/>
+				</div>
 
-			<div class="flex flex-col">
-                {#if email != "" && message != ""}
-                    <button
-                        type="submit"
-                        on:click={send}
-                        class="bg-blue-600 py-2 px-3 rounded-lg font-bold text-white shadow button"
-                        >Send</button
-                    >
-                {:else}
-                    <button
-                        disabled
-                        type="none"
-                        on:click={send}
-                        title="Fill in the fields before submitting"
-                        class="bg-white dark:bg-black bg-opacity-50 dark:bg-opacity-50 py-2 px-3 rounded-lg font-bold shadow text-gray-400"
-                    >
-                        Send
-                    </button>
-                {/if}
-			</div>
+				<div class="flex flex-col">
+					{#if email != "" && message != ""}
+						<button
+							type="submit"
+							on:click={send}
+							class="bg-blue-600 py-2 px-3 rounded-lg font-bold text-white shadow button"
+							>Send</button
+						>
+					{:else}
+						<button
+							disabled
+							type="none"
+							on:click={send}
+							title="Fill in the fields before submitting"
+							class="bg-white dark:bg-black bg-opacity-50 dark:bg-opacity-20 py-2 px-3 rounded-lg font-bold shadow text-gray-400"
+						>
+							Send
+						</button>
+					{/if}
+				</div>
 
-			{#if notify}
-				<p class="text-green-500 font-bold text-lg">{notify}</p>
-			{/if}
-		</form>
-	</section>
+				{#if notify}
+					<p class="text-green-500 font-bold text-lg">{notify}</p>
+				{/if}
+			</form>
+		</section>
 
-	<Socials />
+		<div class="w-1/3"><Socials text={true} /></div>
+	</article>
 </main>
 
 <style>
diff --git a/src/lib/home/Sona.svelte b/src/lib/home/Sona.svelte
index 1dcff74..f1ce985 100644
--- a/src/lib/home/Sona.svelte
+++ b/src/lib/home/Sona.svelte
@@ -1,33 +1,37 @@
-<main class="flex flex-col gap-20 min-h-screen">
-	<section class="w-full h-full">
+<main class="container flex flex-col gap-20 py-20 relative">
+	<div class="absolute top-0 -mt-20" id="furry"></div>
+
+	<section class="w-full h-full flex justify-between gap-20">
 		<!-- <div class="absolute inset-0 blur-xl overflow-hidden">
 			<img src="/furry/Background.png" class="w-full scale-110" alt="background" />
 		</div> -->
-		<article class="flex container mx-auto py-20 flex-col col-span-2 gap-10 items-center italic">
+		<article class="flex container mx-auto flex-col col-span-2 gap-10">
 			<div class="flex items-center gap-5 lg:gap-10">
-				<img src="/furry/MidFingers.jpg" class="rounded-full h-32 lg:h-40 shadow-xl aspect-square" alt='background' />
+				<img src="/favicon.png" class="rounded-lg h-32 lg:h-40 shadow-xl skew-y-3 -skew-x-3 aspect-square hover:scale-95 duration-300" alt='background' />
 				<span>
 					<img src="/homepage/sona/midtitle.png" class="w-32 lg:w-40" alt="fullbody of mid" />
 				</span>
 			</div>
-			<h4 class="w-10/12 lg:w-1/2 text-center font-normal">
-				Mid <sup>(aka Midnight)</sup> is my primary fursona. He is a fictional character that I use and represent myself with online.
-				If you are wondering what a furry or fursona is, go check <a href="https://www.whatisfurry.org/" target="blank" class="text-blue-600 dark:text-blue-300 hover:underline">whatisfurry.org</a>.
-				<br/><br/>
-				Mid is a cat with black fur and blue hair that stands twice as tall as the people around him.
-				Some noticable traits are his unusually large whiskers, the white spot on his chest, and his fluffy tail. He also loves coffee, as any good programmer should.
+			<h4 class="font-normal text-lg">
+				Mid <sup>(aka Midnight)</sup> is my primary fursona out of the many that I have accumulated over the years. He is a fictional character that I use and represent myself with online, one that I have grown comfortable with. I commission artists to create depictions of him to bring him to life, showing and using him on places like this website.
 				<br/><br/>
-				A library of arts of Mid and other characters will be added to explore some time soon.
+				Mid is a cat with black fur and blue hair that stands twice as tall as the people around him. He loves coffee perhaps a bit too much, as any good programmer does, and likes to stay busy.
+				Some noticable traits are his unusually large whiskers, the white moon-shaped spot of fur on his chest, and his fluffy tail.
 			</h4>
-
-			<div class="flex justify-center w-full flex-col gap-5">
-				<div class="w-10/12 lg:w-1/2 mx-auto grid grid-cols-2 lg:grid-cols-4 gap-2 lg:gap-5">
-					<img src="/homepage/sona/midblep_2-2_sivkyne.png" class="rounded-xl aspect-square object-contain" alt="sona symbol" />
-					<img src="/homepage/sona/midblep_3.png" class="rounded-xl aspect-square" alt="sona symbol" />
-					<img src="/homepage/sona/midblep_7 (1).png" class="rounded-xl aspect-square" alt="sona symbol" />
-					<img src="/homepage/sona/midblep_2-6_sivkyne.png" class="rounded-xl aspect-square" alt="sona symbol" />
-				</div>
-			</div>
 		</article>
+
+		<section class="w-full h-full flex flex-col gap-5 text-center">
+			<img src="/VRChat_1920x1080_2022-06-12_00-59-32.363.png" class="rounded-xl shadow-xl hover:-rotate-2 hover:scale-105 duration-300"/>
+			<p class="text-sm text-zinc-700 dark:text-zinc-300">Picture from the SocialVR game VRChat showing the 3D model of Mid.</p>
+		</section>
 	</section>
+
+	<!-- <div class="flex w-full flex-col gap-5">
+		<div class="grid grid-cols-2 lg:grid-cols-10 gap-2 lg:gap-5">
+			<img src="/homepage/sona/midblep_2-2_sivkyne.png" class="rounded-xl aspect-square object-contain" alt="sona symbol" />
+			<img src="/homepage/sona/midblep_3.png" class="rounded-xl aspect-square" alt="sona symbol" />
+			<img src="/homepage/sona/midblep_7 (1).png" class="rounded-xl aspect-square" alt="sona symbol" />
+			<img src="/homepage/sona/midblep_2-6_sivkyne.png" class="rounded-xl aspect-square" alt="sona symbol" />
+		</div>
+	</div> -->
 </main>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 2f4cbc8..2086e53 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -9,131 +9,80 @@ import Sona from "$lib/home/Sona.svelte";
 	<title>Home | Bart Industries</title>
 </svelte:head>
 
-<main class="overflow-x-hidden">
+<main class="overflow-x-hidden flex flex-col gap-20">
 	<Banner />
 
-	<div class="relative h-56 lg:h-80 -mt-80 overflow-hidden scale-x-150">
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute inset-0 h-96 w-full scale-x-150">
-			<path
-				class="block dark:hidden"
-				fill="rgba(229, 231, 235, 1)"
-				fill-opacity="1"
-				d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
-			/>
-			<path
-				class="hidden dark:block"
-				fill="rgba(31, 41, 55, 1)"
-				fill-opacity="1"
-				d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
-			/>
-		</svg>
-	</div>
+	<section class="bg-gray-200 pb-40 -mt-20 dark:bg-gray-800 z-20 relative">
+		<div class="absolute top-0 -mt-40" id="blog"></div>
+		<div class="container px-5 flex flex-col gap-10 justify-center">
+			Latest posts
+		</div>
+	</section>
 
-	<section class="bg-gray-200 pt-10 dark:bg-gray-800 z-20" id="works">
+	<section class="pb-20 z-20 relative">
+		<div class="absolute top-0 -mt-40" id="portfolio"></div>
 		<div class="container px-5 flex flex-col gap-10 justify-center">
 			<div class="flex flex-col gap-5">
 				<h2 class="font-bold text-4xl">I do a lot of things</h2>
-				<p>
-					Like any aspiring developer my ambitions are great, and so I tend to be part of a lot of places.
-					<br/>
-					Below are some of the things I do and develop for, resulting in experience with a range of technologies and people.
+				<p class="text-lg">
+					Below are some of the things I work on and currently occupy the majority of my time.
 				</p>
 			</div>
 
 			<div class="grid grid-cols-1 lg:grid-cols-3 gap-10 justify-between">
 				<Card
-					buttonHref="https://puppypride.social"
-					buttonText="🌐 Visit Puppy Pride"
+					buttonHref="https://flamesoftware.net/"
+					buttonText="🔥 Visit early website"
 				>
 					<h3
 						class="text-xl font-bold inline-flex items-center gap-3"
 					>
 						<img
-							src="/puppypride.png"
+							src="/logo.png"
 							class="h-8"
-							alt="puppypride"
-						/> Puppy Pride
+							alt="flame"
+						/> Flame Software
 					</h3>
 					<p class="text-sm text-gray-800 dark:text-gray-100">
-						I was the developer of the new Puppy Pride social
-						network over the course of 2021, and continue to support and expand
-						it to this day. The site was built from the ground up
-						using the TALL stack in PHP.
-						<br /><br />
-						The site sports a whole array of social features including
-						blogging, picture albums, statuses, user profiles, forums,
-						events, groups with roles and custom pages, location data,
-						instant messaging, various networking tools like friending
-						and blocking, notifications through channels like push and
-						mail, live feed, subscriptions and viewcounts, comment
-						sections, likes and followers, and much more.
-						<br /><br />
-						The project is nearing completion and will be released soon.
-						You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
+						Flame Software is a Software-as-a-Service company that is developing a new communications app
+						that intends to revolutionize the way we talk and socialize online.
+						Our mission is to make the net more connected, more privacy focused, and more healthy for your mind.
+						We are currently in our early development stage, where I work as the CTO to lay down the groundworks
+						for this new app, which will be built using a combination of languages like Rust and TypeScript.
 					</p>
 				</Card>
 
 				<Card
-					buttonHref="https://discord.gg/ygw4DNnKvt"
-					buttonText="🚪 Join the Discord"
+					buttonHref="https://puppypride.social"
+					buttonText="🌐 Visit Puppy Pride"
 				>
 					<h3
 						class="text-xl font-bold inline-flex items-center gap-3"
 					>
 						<img
-							src="/moonlitden.png"
+							src="/puppypride.png"
 							class="h-8"
-							alt="moonlitden"
-						/> The Moonlit Den
-					</h3>
-					<p class="text-sm text-gray-800 dark:text-gray-100">
-						Successor to the wildly popular Wumpus' Universe, a
-						cornerstone of Discord's early fanatic community, The
-						Moonlit Den is a small piece of what it once was. Today,
-						it continues to do much of the same it always did,
-						becoming more sophisticated and professional as it's
-						main sponsor DubbelNull improves.
-						<br /><br />
-						Moonlit Den is a generalistic Discord community aimed at
-						being a friendly place to make your home online. We run various
-						gameservers, have game nights together, and overall just
-						like to chat about whatever.
-					</p>
-				</Card>
-
-				<Card
-					buttonHref="https://dubbelnull.com"
-					buttonText="➡️ Go to DubbelNull.com"
-				>
-					<h3
-						class="text-xl font-bold inline-flex items-center gap-3"
-					>
-						<img
-							src="/dubbelnull.png"
-							class="h-10 -my-2"
-							alt="dubbelnull"
-						/> DubbelNull
+							alt="puppypride"
+						/> Puppy Pride
 					</h3>
 					<p class="text-sm text-gray-800 dark:text-gray-100">
-						I am the founder and CTO of DubbelNull, and do most of
-						the programming and technological work there today. We
-						run our own server architecture and sponsor several
-						communities to do what they want, such as run their
-						gameservers, websites, scripts and services.
+						I am the core developer of the new Puppy Pride social
+						network since January 2021, and continue to support and expand
+						it to this day. The site was built from the ground up
+						using the TALL stack in PHP (Tailwindcss, Alpine, Livewire and Laravel)
+						and gave me a lot of experience working with not just PHP and every field inside Laravel,
+						but also a very large array of different kinds of features and business processes at each step of development.
 						<br /><br />
-						DubbelNull currently offers specialized website design and
-						construction of any type, be it a webapp or simple portfolio.
-						We focus on efficiency in communication and satisfaction
-						of the end result.
+						Puppy Pride is an adult themed England based social network for people into petplay.
+						The project is nearing its completion and will be released soon.
+						You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
 					</p>
 				</Card>
 			</div>
 
-			<hr class="my-10 opacity-10" />
-
-			<div class="flex flex-col gap-5">
+			<div class="flex flex-col gap-5 pt-10">
 				<h2 class="font-bold text-4xl">I make stunning pages that fit</h2>
-				<p>
+				<p class="text-lg">
 					I love to make personalized websites for small creators and businesses that truly show their personality to the world with unique design.
 				</p>
 			</div>
@@ -223,45 +172,34 @@ import Sona from "$lib/home/Sona.svelte";
 				</Card>
 
 				<Card
+					buttonHref="https://dubbelnull.com/showcase"
+					buttonText="➡️ View DubbelNull showcase"
 				>
 					<h3
 						class="text-xl font-bold inline-flex items-center gap-3"
 					>
-						Upcoming: Sona Factory
+						<img
+							src="/dubbelnull.png"
+							class="h-10 -my-1 -ml-1"
+							alt="dubbelnull"
+						/> More at DubbelNull
 					</h3>
 					<p class="text-sm text-gray-800 dark:text-gray-100">
-						I am currently working on developing a portfolio site called Sona Factory,
-						featuring an open folder directory containing arts and works, a gallery and contact form,
-						and unique page designs for various characters displayed on the site called fursonas.
+						I am the Lead Developer at DubbelNull and do most of
+						the programming and technological work there today. DubbelNull
+						primarily designs, creates and hosts websites for clients, but we also
+						maintain and operate our own servers. We focus on efficiency in communication and satisfaction
+						of the end result.
+						You can find several other examples of past happy clients on our website's showcase page.
 					</p>
 				</Card>
 			</div>
 		</div>
 	</section>
 
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
-		<path
-			class="block dark:hidden"
-			fill="rgba(229, 231, 235, 1)"
-			fill-opacity="1"
-			d="M0,320L34.3,288C68.6,256,137,192,206,186.7C274.3,181,343,235,411,229.3C480,224,549,160,617,128C685.7,96,754,96,823,112C891.4,128,960,160,1029,170.7C1097.1,181,1166,171,1234,160C1302.9,149,1371,139,1406,133.3L1440,128L1440,0L1405.7,0C1371.4,0,1303,0,1234,0C1165.7,0,1097,0,1029,0C960,0,891,0,823,0C754.3,0,686,0,617,0C548.6,0,480,0,411,0C342.9,0,274,0,206,0C137.1,0,69,0,34,0L0,0Z"
-		/>
-		<path
-			class="hidden dark:block"
-			fill="rgba(31, 41, 55, 1)"
-			fill-opacity="1"
-			d="M0,320L34.3,288C68.6,256,137,192,206,186.7C274.3,181,343,235,411,229.3C480,224,549,160,617,128C685.7,96,754,96,823,112C891.4,128,960,160,1029,170.7C1097.1,181,1166,171,1234,160C1302.9,149,1371,139,1406,133.3L1440,128L1440,0L1405.7,0C1371.4,0,1303,0,1234,0C1165.7,0,1097,0,1029,0C960,0,891,0,823,0C754.3,0,686,0,617,0C548.6,0,480,0,411,0C342.9,0,274,0,206,0C137.1,0,69,0,34,0L0,0Z"
-		/>
-	</svg>
-
-	<section
-		class="relative container overflow-hidden px-5 lg:px-0 flex mb-40 flex-col lg:flex-row gap-10 h-full justify-center items-center"
-		id="contact"
-	>
-		<div class="lg:w-1/3 z-10">
-			<Form />
-		</div>
+	<hr class="container my-10 opacity-10" />
 
-		<img src="/homepage/fullbody.png" class="lg:block hidden lg:w-1/3 h-full z-10" alt="contact" />
+	<section class="mb-40">
+		<Sona/>
 	</section>
 </main>
diff --git a/src/routes/portfolio.svelte b/src/routes/portfolio.svelte
index 02e961e..2bf0ab2 100644
--- a/src/routes/portfolio.svelte
+++ b/src/routes/portfolio.svelte
@@ -1,4 +1,5 @@
 <script>
+	import Card from "$lib/home/Card.svelte";
 	import Socials from "$lib/Socials.svelte";
 </script>
 
@@ -17,8 +18,31 @@
 
 	<div class="container">
 		<section class="py-20 flex gap-10 flex-col items-between">
-			<section class="w-1/2 h-96">
-				<h2 class="font-bold text-4xl">The Moonlit Den</h2>
+			<section class="w-1/3 flex flex-col gap-5">
+				<h2 class="font-bold text-4xl">Puppy Pride</h2>
+
+				<Card
+					buttonHref="https://puppypride.social"
+					buttonText="🌐 Visit Puppy Pride"
+				>
+					<p class="text-sm text-gray-800 dark:text-gray-100">
+						I was the developer of the new Puppy Pride social
+						network over the course of 2021, and continue to support and expand
+						it to this day. The site was built from the ground up
+						using the TALL stack in PHP.
+						<br /><br />
+						The site sports a whole array of social features including
+						blogging, picture albums, statuses, user profiles, forums,
+						events, groups with roles and custom pages, location data,
+						instant messaging, various networking tools like friending
+						and blocking, notifications through channels like push and
+						mail, live feed, subscriptions and viewcounts, comment
+						sections, likes and followers, and much more.
+						<br /><br />
+						The project is nearing completion and will be released soon.
+						You may find a beta release public at <a target="_blank" class="a" href="https://beta.puppypride.social">beta.puppypride.social</a>.
+					</p>
+				</Card>
 			</section>
 
 			<section class="w-1/2 h-96">
diff --git a/static/VRChat_1920x1080_2022-06-12_00-59-32.363.png b/static/VRChat_1920x1080_2022-06-12_00-59-32.363.png
new file mode 100644
index 0000000..804638d
Binary files /dev/null and b/static/VRChat_1920x1080_2022-06-12_00-59-32.363.png differ
diff --git a/static/banner4.png b/static/banner4.png
new file mode 100644
index 0000000..38ca601
Binary files /dev/null and b/static/banner4.png differ
diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 0000000..830e02b
Binary files /dev/null and b/static/logo.png differ
diff --git a/static/mid2_wonivero.png b/static/mid2_wonivero.png
new file mode 100644
index 0000000..bcf800d
Binary files /dev/null and b/static/mid2_wonivero.png differ