diff --git a/src/app.css b/src/app.css
index ffea6f6..d9dcfd4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -27,13 +27,15 @@
 }
 
 .dark hr {
-	border-color: white;
-	border-width: 2px;
+	border: unset;
+	background-color: white;
+	height: 2px;
 }
 
 hr {
-	border-color: black;
-	border-width: 2px;
+	border: unset;
+	background-color: black;
+	height: 2px;
 }
 
 #svelte {
diff --git a/src/lib/footer/Social.svelte b/src/lib/footer/Social.svelte
index 18663fa..bcc4651 100644
--- a/src/lib/footer/Social.svelte
+++ b/src/lib/footer/Social.svelte
@@ -11,10 +11,10 @@
 	href={url}
 	{title}
 	target="_blank"
-	class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-blue-300 dark:hover:bg-blue-600 hover:scale-110 duration-150 shadow"
+	class="rounded-xl bg-opacity-50 hover:bg-opacity-100 bg-slate-300 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-110 duration-150 shadow"
 >
-	<div class="aspect-square flex flex-col items-center justify-center p-5">
-		<span class="text-5xl ">{icon}</span>
-		<span class="text-gray-600 dark:text-gray-300 font-light text-base text-center">{text}</span>
+	<div class="flex flex-col gap-1 items-center justify-center p-3 lg:p-5">
+		<span class="text-xl lg:text-5xl">{icon}</span>
+		<span class="text-gray-700 dark:text-gray-300 font-light text-xs lg:text-base text-center">{text}</span>
 	</div>
 </a>
diff --git a/src/lib/header/Button.svelte b/src/lib/header/Button.svelte
deleted file mode 100644
index 408bc11..0000000
--- a/src/lib/header/Button.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-	import { page } from '$app/stores';
-
-	export let text;
-	export let url;
-	export let type;
-	export let disabled;
-
-	let classes;
-
-	initButton($page.url.pathname);
-
-	function initButton(givenUrl) {
-		let current;
-		classes = "h-full py-2 px-10 flex justify-center items-center uppercase group";
-
-		switch (type) {
-			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";
-				break;
-		}
-
-		if (disabled) {
-			url = null;
-			classes += " cursor-not-allowed opacity-50 select-none";
-		}
-
-		if(url == "/") current = givenUrl == "/";
-		if(url != "/") current = givenUrl.includes(url);
-
-		if(current == true) {
-			classes += " text-white bg-white bg-opacity-10";
-		} else {
-			classes += " text-gray-200";
-		}
-	}
-
-	page.subscribe(value => {
-		initButton(value.url.pathname);
-	});
-</script>
-
-<a href={url} class={classes}>
-	<p class="transform duration-300 {!disabled ? "group-hover:scale-110" : ''}">
-		{text}
-	</p>
-</a>
diff --git a/src/lib/header/Nav.svelte b/src/lib/header/Nav.svelte
index 09db303..a691b40 100644
--- a/src/lib/header/Nav.svelte
+++ b/src/lib/header/Nav.svelte
@@ -2,14 +2,13 @@
 	// @ts-nocheck
 	import ThemeSwitcher from '$lib/ThemeSwitcher.svelte';
 
-	import Button from './Button.svelte';
-	import Dropdown from './Dropdown.svelte';
+	import NavButton from './NavButton.svelte';
+	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="/">
-			<!-- <Button url="/" text="<img src='/bart.png' />" type="title" /> -->
 			<img
 				src="/bart.png"
 				alt="Logo"
@@ -17,24 +16,25 @@
 			/>
 		</a>
 		<div class="hidden lg:flex h-16">
-			<Button url="/" text="Home" />
-			<Button disabled="true" url="/blog" text="Blog" />
-			<Button disabled="true" url="/portfolio" text="Portfolio" />
-			<Button disabled="true" url="/esu" text="ESU" />
-			<Button disabled="true" url="/furry" text="Furry" />
+			<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 disabled="true" url="/furry" text="Furry" />
 		</div>
 	</div>
 	<div class="hidden lg:flex h-16">
 		<ThemeSwitcher />
 	</div>
 	<div class="flex lg:hidden h-16">
-		<Dropdown text="🍔">
-			<Button url="/" text="Home" />
-			<Button disabled="true" url="/blog" text="Blog" />
-			<Button disabled="true" url="/portfolio" text="Portfolio" />
-			<Button disabled="true" url="/esu" text="ESU" />
-			<Button disabled="true" url="/furry" text="Furry" />
+		<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 disabled="true" url="/furry" text="Furry" />
+			<hr class="bg-white" />
 			<ThemeSwitcher />
-		</Dropdown>
+		</NavDropdown>
 	</div>
 </div>
diff --git a/src/lib/header/Dropdown.svelte b/src/lib/header/NavDropdown.svelte
similarity index 55%
rename from src/lib/header/Dropdown.svelte
rename to src/lib/header/NavDropdown.svelte
index 2eb9632..3769470 100644
--- a/src/lib/header/Dropdown.svelte
+++ b/src/lib/header/NavDropdown.svelte
@@ -1,7 +1,10 @@
 <script>
+	import NavButton from "./NavButton.svelte";
+
 	export let text;
 	export let type;
 
+	let dropdown;
 	let classes = "h-full px-5 flex justify-center items-center";
 
 	switch (type) {
@@ -16,24 +19,24 @@
 			break;
 	}
 
-	function openMenu() {
-		let dropdown = document.querySelector("#dropdown");
-		console.log(dropdown);
-		dropdown.classList.toggle("block");
+	function toggle() {
+		dropdown.classList.toggle("flex");
 		dropdown.classList.toggle("hidden");
+		console.log(dropdown);
 	}
 </script>
 
-<main class="relative">
-	<!-- <MenuIcon /> -->
-	<button on:click={openMenu} type="none" class={classes} id="trigger">
+<main>
+	<button on:click={toggle} type="none" class={classes} id="trigger">
 		{text}
 	</button>
 
 	<div
-		class="absolute w-screen right-0 bg-white dark:bg-black hidden z-50"
-		id="dropdown"
+		class="fixed flex-col w-screen h-screen inset-0 bg-blue-600 hidden z-50"
+		bind:this={dropdown}
 	>
+		<NavButton text="Close Menu" on:click={toggle} />
+		<hr class="bg-white" />
 		<slot />
 	</div>
 </main>
diff --git a/src/lib/header/DropdownButton.svelte b/src/lib/header/NavDropdownButton.svelte
similarity index 100%
rename from src/lib/header/DropdownButton.svelte
rename to src/lib/header/NavDropdownButton.svelte
diff --git a/src/lib/home/Banner.svelte b/src/lib/home/Banner.svelte
index ff4fb42..1f50b17 100644
--- a/src/lib/home/Banner.svelte
+++ b/src/lib/home/Banner.svelte
@@ -61,6 +61,7 @@
 				const word = words[Math.floor(Math.random() * words.length)];
 				let element = document.createElement('span');
 				element.innerHTML = word;
+				element.classList.add("text-9xl", "p-10");
 
 				list.appendChild(element);
 			}
@@ -73,8 +74,9 @@
 	randomBannerPic = "/homepage/banner.png";
 </script>
 
-<main class="flex gap-5 items-center pt-5 pb-60 justify-between px-6 lg:px-20 relative z-0 overflow-hidden">
-	<div class="absolute inset-0 w-full h-full flex flex-col items-center gap-1 justify-center font-bold anim text-xs" id="lists"></div>
+<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">
+	<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">
@@ -84,7 +86,7 @@
 			/>
 		</div>
 
-		<div class="flex flex-col gap-5 justify-center w-3/5 z-10">
+		<div class="flex flex-col gap-5 justify-center lg:w-3/5 z-10">
 			<span>
 				<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
 			</span>
@@ -121,19 +123,18 @@
 	.anim {
 		user-select: none;
 		opacity: 2%;
-		overflow: hidden;
 		animation: anim;
-		animation-duration: 120s;
+		animation-duration: 200s;
 		animation-timing-function: linear;
 		animation-iteration-count: infinite;
 	}
 
 	@keyframes anim {
 		0% {
-			transform: scale(10) translate(100px, -100px) rotate(-45deg);
+			transform: translate(100%, -100%) rotate(-30deg);
 		}
 		100% {
-			transform: scale(10) translate(-100px, 100px) rotate(-45deg);
+			transform: translate(-100%, 100%) rotate(-30deg);
 		}
 	}
 	.popout {
diff --git a/src/lib/home/Card.svelte b/src/lib/home/Card.svelte
index 44171d9..d49032a 100644
--- a/src/lib/home/Card.svelte
+++ b/src/lib/home/Card.svelte
@@ -1,10 +1,10 @@
 <script>
-	export let buttonText;
+	export let buttonText = "";
 	export let buttonRedirect = "";
-	export let buttonHref;
-	export let disabled;
+	export let buttonHref = "";
+	export let disabled = false;
 
-	let classes = "z-10 flex flex-col group relative";
+	let classes = "z-10 flex flex-col group relative overflow-hidden";
 
 	if(disabled) {
 		classes += " opacity-50";
@@ -31,6 +31,6 @@
 	{/if}
 
 	{#if disabled}
-		<span class="absolute inset-0 flex justify-center text-center items-center text-white -rotate-45 font-bold text-6xl group-hover:-translate-y-1 duration-300 select-none">UNFINISHED PROJECT</span>
+		<span class="absolute top-0 bottom-0 flex justify-center text-center items-center text-black dark:text-white -rotate-45 font-bold text-6xl group-hover:-translate-y-1 duration-300 select-none">UNFINISHED PROJECT</span>
 	{/if}
 </div>
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index f0a80b9..d78ee6a 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -11,7 +11,7 @@
 <main>
 	<Banner />
 
-	<div class="relative h-80 -mt-80 overflow-hidden">
+	<div class="relative h-56 lg:h-80 -mt-80 overflow-hidden">
 		<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"
@@ -43,7 +43,7 @@
 				<Card
 					buttonHref="https://puppypride.social"
 					buttonText="🌐 Visit Puppy Pride"
-					disabled="true"
+					disabled={true}
 				>
 					<h3
 						class="text-xl font-bold inline-flex items-center gap-3"
@@ -258,17 +258,16 @@
 	</svg>
 
 	<section
-		class="relative container px-5 lg:px-0 mb-20 flex flex-col lg:flex-row gap-10 h-full justify-center items-center"
+		class="relative container overflow-hidden px-5 lg:px-0 mb-20 flex 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>
 
-		<img src="/homepage/fullbody.png" class="lg:w-1/3 h-full z-10" alt="contact" />
+		<img src="/homepage/fullbody.png" class="lg:block hidden lg:w-1/3 h-full z-10" alt="contact" />
 
-		<div class="absolute inset-0 w-full h-full opacity-80 bg-contain bg-no-repeat bg-center block dark:hidden" style="background-image: url('homepage/blob2-light.svg')"></div>
-		<div class="absolute inset-0 w-full h-full opacity-20 bg-contain bg-no-repeat bg-center hidden dark:block" style="background-image: url('homepage/blob2-dark.svg')"></div>
-		<!-- <div class="absolute right-0 top-0 bottom-0 w-1/2 h-full opacity-5 bg-contain bg-no-repeat" style="background-image: url('homepage/fullbody.png')"></div> -->
+		<div class="absolute inset-0 w-full h-full opacity-80 bg-contain bg-no-repeat bg-center dark:hidden lg:block hidden" style="background-image: url('homepage/blob2-light.svg')"></div>
+		<div class="absolute inset-0 w-full h-full opacity-20 bg-contain bg-no-repeat bg-center hidden dark:block lg:block" style="background-image: url('homepage/blob2-dark.svg')"></div>
 	</section>
 </main>