diff --git a/src/app.css b/src/app.css
index 1225a1c..33d6d00 100644
--- a/src/app.css
+++ b/src/app.css
@@ -13,19 +13,18 @@ html {
     padding: 0;
     font-size: 100%;
     box-sizing: border-box;
+    overflow-y: scroll;
 }
 
 body {
     margin: 0;
     padding: 0;
     background-color: var(--bg-color);
-    overflow: hidden;
 }
 
 html,
 body {
-    width: 100vw;
-    overflow: auto;
+    max-width: 100%;
 }
 
 .wrapper {
@@ -44,8 +43,8 @@ body {
     --grey-three: #373e4d;
     --grey-four: #182244;
     --grey-five: hsl(208, 30%, 75%);
-    --grey-six: hsla(220, 12%, 15%, 0.655);
-    --grey-seven: #535563;
+    --grey-six: #202126;
+    --grey-seven: #202126;
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -67,7 +66,7 @@ h1 {
 h2 {
     color: var(--grey-five);
     font-weight: 400;
-    font-size: 1.2rem;
+    font-size: 1.3rem;
 }
 
 h3 {
@@ -98,13 +97,14 @@ h6 {
 }
 
 ::-webkit-scrollbar {
-    width: 11px;
+    width: 5px;
     background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--grey-two);
+    background-color: var(--grey-six);
     background-clip: content-box;
+    border-radius: 100px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte
index 9d17144..2c810b7 100644
--- a/src/lib/components/atoms/HeroImage.svelte
+++ b/src/lib/components/atoms/HeroImage.svelte
@@ -10,7 +10,7 @@
 <style>
   .hero-img :global(img) {
 	  height: 100%;
-	  border-radius: 2rem;
+	  border-radius: 1.75rem;
   }
 
 	.hero-img {
@@ -20,12 +20,9 @@
 		z-index: -1;
 		width: auto;
 		float: right;
-		padding: 0.75rem 0.75rem;
-		border-radius: 2.5rem;
-		background-color: var(--grey-two);
-		backdrop-filter: blur(15px);
-		-webkit-backdrop-filter: blur(15px);
-		box-shadow:0 50px 100px -20px rgba(16, 22, 31, 0.25), 0 30px 60px -30px rgba(18, 19, 22, 0.767), inset 0 -2px 20px 0 rgba(20, 21, 23, 0.598);
+		padding: 0.5rem 0.5rem;
+		border-radius: 1.75rem;
+		background-color: var(--grey-six);
 		user-select: none;
 		
 	}
diff --git a/src/lib/components/atoms/NavButton.svelte b/src/lib/components/atoms/NavButton.svelte
index f24a44d..1998ea7 100644
--- a/src/lib/components/atoms/NavButton.svelte
+++ b/src/lib/components/atoms/NavButton.svelte
@@ -46,4 +46,24 @@
 		background-color: var(--grey-two);
 		color: var(--accent-color);
 	}
+
+	@media (max-width: 768px) {
+		li {
+			padding: 1rem 1.5rem;
+			text-align: left;
+			justify-content: left;
+			border-radius: 16px;
+			font-size: 1.2rem;
+		}
+
+		li.selected {
+			background-color: var(--accent-color);
+		}
+
+		li.selected {
+			color: var(--grey-four)
+		}
+
+	}
+
 </style>
diff --git a/src/lib/components/atoms/TreeMenuButton.svelte b/src/lib/components/atoms/TreeMenuButton.svelte
index 2e7b43f..1da7ed1 100644
--- a/src/lib/components/atoms/TreeMenuButton.svelte
+++ b/src/lib/components/atoms/TreeMenuButton.svelte
@@ -15,7 +15,7 @@
 
 <style>
 	.package {
-		padding: 0.6rem;
+		padding: 0.6rem 1rem;
 		border-radius: 8px;
 		cursor: pointer;
 		display: flex;
@@ -23,23 +23,7 @@
 		gap: 0.6rem;
 		width: 100%;
 		user-select: none;
-		transition: all 0.4s var(--bezier-one);
-	}
-
-	.package::before {
-		content: '';
-		height: 5px;
-		inline-size: 4px;
-		border-radius: 200px;
-		background-color: var(--accent-color);
-		transition: all 0.2s var(--bezier-one);
-		opacity: 0;
-	}
-
-	.selected::before {
-		height: 20px;
-		transition: all 0.3s var(--bezier-one);
-		opacity: 1;
+		transition: background-color 0.4s var(--bezier-one);
 	}
 
 	h3 {
@@ -48,16 +32,18 @@
 
 	.package > h3 {
 		color: var(--grey-five);
-		transition: all 0.3s var(--bezier-one);
+		transition: color 0.3s var(--bezier-one);
 	}
 
 	.selected > h3 {
-		color: var(--accent-color);
-		transition: all 0.3s var(--bezier-one);
+		color: var(--grey-four);
+		transition: color 0.3s var(--bezier-one);
 	}
 
-	.package:hover,
 	.selected {
+		background-color: var(--accent-color);
+	}
+	.package:hover:not(.selected) {
 		background-color: var(--grey-six);
 	}
 
diff --git a/src/lib/components/molecules/MobileDropdown.svelte b/src/lib/components/molecules/MobileDropdown.svelte
index 625ba28..a0f5ded 100644
--- a/src/lib/components/molecules/MobileDropdown.svelte
+++ b/src/lib/components/molecules/MobileDropdown.svelte
@@ -10,16 +10,8 @@ import { slide } from 'svelte/transition';
   div {
     position: fixed;
     width: 100vw;
-    top: 75px;
-
+    top: 70px;
     z-index: 999;
-    /* background-color: var(--grey-six); guh @xafn */
-    background-color: hsla(220, 12%, 15%, 0.95);
-    border-style: solid;
-    border-color: var(--accent-color);
-
-    /* its rotated for some reason :skull: */
-    border-left: 0.5rem;
-    border-right: 0.5rem;
+    background-color: var(--grey-seven);
   }
 </style>
diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte
index 7a70b3d..279b43e 100644
--- a/src/lib/components/molecules/NavHost.svelte
+++ b/src/lib/components/molecules/NavHost.svelte
@@ -2,94 +2,109 @@
 	import Navigation from '../atoms/NavButton.svelte';
 	import { page } from '$app/stores';
 	import Button from '../atoms/Button.svelte';
-  import MobileDropdown from './MobileDropdown.svelte';
-  import { onMount } from 'svelte';
-  import RouterEvents from '../../../data/RouterEvents';
+	import MobileDropdown from './MobileDropdown.svelte';
+	import { onMount } from 'svelte';
+	import RouterEvents from '../../../data/RouterEvents';
 
 	let menuOpen = false;
 
-  onMount(() => {
-    return RouterEvents.subscribe(event => {
-      if (event.navigating) {
-        menuOpen = false;
-      }
-    });
-  });
+	onMount(() => {
+		return RouterEvents.subscribe((event) => {
+			if (event.navigating) {
+				menuOpen = false;
+			}
+		});
+	});
 </script>
 
 <nav>
-  <div class="navbar">
-	  <div class="left-side">
-		  <a href="/">
-			  <span class="logo">
-				  <img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-			  </span>
-		  </a>
+	<div class="navbar">
+		<div class="left-side">
+			<a href="/">
+				<span class="logo">
+					<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+				</span>
+			</a>
 
-		  <span class="desktop">
-			  <Navigation href="/">Home</Navigation>
-			  <Navigation href="/download">Download</Navigation>
-        <div hidden>
-          <!-- This is just temporary so the build doesn't fail -->
-			    <Navigation is_selected={target => target.startsWith("/docs")} href="/docs">Docs</Navigation>
-        </div>
-			  <Navigation href="/patches">Patches</Navigation>
-		  </span>
-	  </div>
+			<span class="desktop">
+				<Navigation href="/">Home</Navigation>
+				<Navigation href="/download">Download</Navigation>
+				<div hidden>
+					<!-- This is just temporary so the build doesn't fail -->
+					<Navigation is_selected={(target) => target.startsWith('/docs')} href="/docs"
+						>Docs</Navigation
+					>
+				</div>
+				<Navigation href="/patches">Patches</Navigation>
+			</span>
+		</div>
 
-    <div class="right-side">
-	    <span class="desktop">
-		    <Navigation href="/contributors/">
-			    <img src="/icons/contrib.svg" alt="Contributors"/>
-		    </Navigation>
-		    <Navigation href="/api-settings/">
-			    <img src="/icons/settings.svg" alt="Settings"/>
-		    </Navigation>
-	    </span>
+		<div class="right-side">
+			<span class="desktop">
+				<Navigation href="/contributors/">
+					<img src="/icons/contrib.svg" alt="Contributors" />
+				</Navigation>
+				<Navigation href="/api-settings/">
+					<img src="/icons/settings.svg" alt="Settings" />
+				</Navigation>
+			</span>
 
-      <!-- Should probably be moved to its own component. -->
-	    <button class="menu-btn mobile" class:open={menuOpen} on:click={() => {menuOpen = !menuOpen}}>
-		    <span class="menu-btn__burger" />
-	    </button>
-    </div>
-  </div>
+			<!-- Should probably be moved to its own component. -->
+			<button
+				class="menu-btn mobile"
+				class:open={menuOpen}
+				on:click={() => {
+					menuOpen = !menuOpen;
+				}}
+			>
+				<span class="menu-btn__burger" />
+			</button>
+		</div>
+	</div>
 
-  <div class="mobile">
-    {#if menuOpen}
-      <MobileDropdown>
-        <div class="mobile-menu">
-		      <Navigation href="/">Home</Navigation>
-		      <Navigation href="/download">Download</Navigation>
-		      <Navigation href="/patches">Patches</Navigation>
-		      <Navigation href="/contributors">Contributors</Navigation>
-		      <Navigation href="/api-settings">Settings</Navigation>
-        </div>
-      </MobileDropdown>
-    {/if}
-  </div>
+	<div class="mobile">
+		{#if menuOpen}
+			<MobileDropdown>
+				<div class="mobile-menu">
+					<div>
+						<Navigation href="/">Home</Navigation>
+						<Navigation href="/download">Download</Navigation>
+						<Navigation href="/patches">Patches</Navigation>
+					</div>
+					
+					<div class="bottom-mobile-container">
+						<Navigation href="/contributors/">
+							<img src="/icons/contrib.svg" alt="Contributors" />
+						</Navigation>
+						<Navigation href="/api-settings/">
+							<img src="/icons/settings.svg" alt="Settings" />
+						</Navigation>
+					</div>
+				</div>
+			</MobileDropdown>
+		{/if}
+	</div>
 </nav>
 
 <style>
-  nav {
-    position: fixed;
-    width: 100vw;
-    top: 0;
-    left: 0;
-    z-index: 999;
-  }
-  .navbar {
-	  padding: 0 1rem 0 2rem;
-
-	  display: flex;
-	  align-items: center;
-	  justify-content: space-between;
-	  min-height: 70px;
-	  width: 100%;
-	  z-index: 999;
-	  background-color: var(--grey-six);
-	  backdrop-filter: blur(15px);
-	  -webkit-backdrop-filter: blur(15px);
-  }
+	nav {
+		position: fixed;
+		width: 100vw;
+		top: 0;
+		left: 0;
+		z-index: 999;
+		border-bottom: 0.5px solid var(--grey-three);
+	}
+	.navbar {
+		padding: 0 1rem 0 2rem;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		min-height: 70px;
+		width: 100%;
+		z-index: 999;
+		background-color: var(--grey-seven);
+	}
 
 	.desktop {
 		display: flex;
@@ -97,14 +112,17 @@
 		align-items: center;
 	}
 
-  .mobile-menu {
-    display: block;
-    width: 80vw;
-    height: 100vh;
-    white-space: pre;
-    margin: 0 auto;
-    padding: 1ch 0;
-  }
+	.mobile-menu {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		width: 85vw;
+		height: calc(100vh - 70px);
+		white-space: pre;
+		padding: 2rem 0;
+		margin: 0 auto;
+		justify-content: space-between;
+	}
 
 	a {
 		text-decoration: none;
@@ -128,19 +146,29 @@
 		gap: 2.5rem;
 	}
 
-
 	img {
 		height: 20px;
 	}
 
-	@media screen and (max-width: 600px) {
+	@media screen and (max-width: 768px) {
 		.desktop {
 			display: none;
 		}
+
+		img {
+			height: 25px;
+		}
+
+		
+	}
+
+	.bottom-mobile-container {
+		display: flex;
+		float: bottom;
 	}
 
 	/* Hamburger mmm yum */
-	@media screen and (min-width: 600px) {
+	@media screen and (min-width: 768px) {
 		.mobile {
 			display: none !important;
 		}
@@ -156,15 +184,15 @@
 		cursor: pointer;
 		transition: all 0.5s var(--bezier-one);
 
-    /* We don't want it to look like a normal button. */
-    background-color: transparent;
-    border: none;
-    font-family: inherit;
-    font-size: inherit;
-    font-style: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    padding: 0;
+		/* We don't want it to look like a normal button. */
+		background-color: transparent;
+		border: none;
+		font-family: inherit;
+		font-size: inherit;
+		font-style: inherit;
+		font-weight: inherit;
+		line-height: inherit;
+		padding: 0;
 	}
 	.menu-btn__burger {
 		width: 25px;
@@ -173,8 +201,8 @@
 		background: var(--grey-five);
 		transition: all 0.5s var(--bezier-one);
 
-    display: flex;
-    flex-wrap: wrap;
+		display: flex;
+		flex-wrap: wrap;
 	}
 	.menu-btn__burger::before,
 	.menu-btn__burger::after {
diff --git a/src/lib/components/molecules/PatchCell.svelte b/src/lib/components/molecules/PatchCell.svelte
index c2872aa..1300642 100644
--- a/src/lib/components/molecules/PatchCell.svelte
+++ b/src/lib/components/molecules/PatchCell.svelte
@@ -127,7 +127,7 @@
 	}
 
 	.patch-container:active {
-		background-color: var(--grey-three);
+		filter: brightness(1.5);
 	}
 
 	.title {
@@ -171,4 +171,6 @@
 		display: flex;
 		flex-direction: column;
 	}
+
+
 </style>
diff --git a/src/lib/components/molecules/TreeMenu.svelte b/src/lib/components/molecules/TreeMenu.svelte
index f4ce08b..91901ff 100644
--- a/src/lib/components/molecules/TreeMenu.svelte
+++ b/src/lib/components/molecules/TreeMenu.svelte
@@ -12,13 +12,13 @@
 
 <style>
 	.menu {
-		height: calc(100vh - 7.5rem);
+		height: calc(100vh - 7rem);
 		width: 100%;
-		padding: 0px 10px 30px 10px;
+		padding: 0px 30px 30px 10px;
 		display: flex;
 		flex-direction: column;
 		position: sticky;
-		top: 7.5rem;
+		top: 7rem;
 		overflow-y: scroll;
 	}
 
diff --git a/src/lib/components/organisms/Home.svelte b/src/lib/components/organisms/Home.svelte
index 1961b23..1b4a13a 100644
--- a/src/lib/components/organisms/Home.svelte
+++ b/src/lib/components/organisms/Home.svelte
@@ -5,7 +5,7 @@
 <section class="hero">
 	<div class="hero-text">
 		<h1>
-			Your favourite <br />apps, <span class="flicker">ad</span><span class="blue">vanced.</span>
+			<span>Re</span>Vanced
 		</h1>
 
 		<h2>
@@ -21,7 +21,7 @@
 
 <style>
 	h2 {
-		margin-top: 1.75\rem;
+		margin-top: 1rem;
 		margin-bottom: 2rem;
 	}
 
@@ -39,52 +39,13 @@
 		gap: 1rem;
 	}
 
-	.blue {
+	span {
 		color: var(--accent-color);
 	}
 
-	@keyframes flicker {
-		0% {
-			color: var(--grey-two);
-		}
-		10% {
-			color: var(--accent-color);
-		}
-		15% {
-			color: var(--grey-two);
-		}
-		35% {
-			color: var(--accent-color);
-		}
-		45% {
-			color: var(--accent-color);
-		}
-		50% {
-			color: var(--grey-two);
-		}
-		52.5% {
-			color: var(--accent-color);
-		}
-		85% {
-			color: var(--accent-color);
-		}
-		100% {
-			color: var(--grey-two);
-		}
-	}
-
-	.flicker {
-		color: var(--accent-color);
-		/* animation: flicker 2s forwards;
-		animation-timing-function: var(--bezier-one);
-		animation-delay: 1.5s;
-		animation-iteration-count: 1; */
-	}
-
-
 	h1 {
 		line-height: 1em;
-		font-size: 4rem;
+		font-size: 5rem;
 	}
 
 	@media (max-width: 768px) {
diff --git a/src/routes/docs/+layout.svelte b/src/routes/docs/+layout.svelte
index ebbe13a..e8c08e2 100644
--- a/src/routes/docs/+layout.svelte
+++ b/src/routes/docs/+layout.svelte
@@ -1,34 +1,34 @@
 <script lang="ts">
-  import type { PageData } from './$types';
+	import type { PageData } from './$types';
 
-  import DocsNavTree from '$lib/components/molecules/DocsNavTree.svelte';
+	import DocsNavTree from '$lib/components/molecules/DocsNavTree.svelte';
 
-  import { fly } from 'svelte/transition';
-  import { quintOut } from 'svelte/easing';
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
 
-  export let data: PageData;
+	export let data: PageData;
 </script>
 
 <section id="doc-section-main" in:fly={{ y: 10, easing: quintOut, duration: 700 }}>
 	<div class="menu">
-    <DocsNavTree tree={data.tree} />
+		<DocsNavTree tree={data.tree} />
 	</div>
-  <slot></slot>
+	<slot />
 </section>
 
 <style lang="scss">
-.menu {
-	padding: 90px 15px 0px 15px;
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-}
+	.menu {
+		padding: 90px 15px 0px 15px;
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
 
-#doc-section-main {
-	display: grid;
-  grid-template-columns: 300px 3fr;
+	#doc-section-main {
+		display: grid;
+		grid-template-columns: 300px 3fr;
 
-	height: 100vh;
-	width: 100%;
-}
+		height: 100vh;
+		width: 100%;
+	}
 </style>
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index 40163bb..3a56f0d 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -31,7 +31,7 @@
 </svelte:head>
 
 <main>
-	<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+	<aside in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 100 }}>
 		<TreeMenu title="packages">
 			{#each packages as pkg}
 				<TreeMenuButton bind:current name={pkg} />
@@ -39,13 +39,15 @@
 		</TreeMenu>
 	</aside>
 
-	<div class="patches-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+	<div class="patches-container">
 		{#each patches as patch}
-			{#if search(current, patch.compatiblePackages) || !current}
-				<div>
-					<PatchCell bind:current {patch} />
-				</div>
-			{/if}
+			{#key current}
+				{#if search(current, patch.compatiblePackages) || !current}
+					<div in:fly={{ x: 10, easing: quintOut, duration: 750, delay: 100 }}>
+						<PatchCell bind:current {patch} />
+					</div>
+				{/if}
+			{/key}
 		{/each}
 	</div>
 </main>
@@ -62,13 +64,13 @@
 	}
 
 	.patches-container {
-		margin-top: 7.5rem;
+		margin-top: 7rem;
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
 		width: 100%;
 		position: sticky;
 		z-index: 1;
-		min-height: calc(100vh - 7.5rem);
+		min-height: calc(100vh - 7rem);
 	}
 </style>