diff --git a/src/app.scss b/src/app.scss
index c7c0503..6c85ee7 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -40,7 +40,7 @@ body {
     --white: hsl(206, 100%, 94%);
     --accent-color: hsl(206, 100%, 81%);
     --accent-color-two: hsl(208, 75%, 82%);
-    --accent-low-opacity: hsla(205, 100%, 81%, 0.15);
+    --accent-low-opacity: hsla(205, 91%, 69%, 0.15);
     --bg-color: hsl(252, 10%, 11%);
     --grey-one: hsl(210, 14%, 17%);
     --grey-two: hsl(212, 19%, 19%);
@@ -52,6 +52,7 @@ body {
     --grey-eight: hsla(207, 30%, 75%, 0.577);
     --grey-nine: hsla(240, 6%, 7%, 0.3);
     --grey-ten: hsl(230, 9.5%, 17.5%);
+    --grey-eleven: hsl(208, 10%, 40%);
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
@@ -84,8 +85,8 @@ h3 {
 
 h4 {
     color: var(--accent-color-two);
-    font-weight: 400;
-    font-size: 1.1rem;
+    font-weight: 500;
+    font-size: 1.2rem;
     letter-spacing: 0.02rem;
     line-height: 2rem;
 }
@@ -108,7 +109,7 @@ p {
     font-weight: 400;
     font-size: 0.95rem;
     letter-spacing: 0.02rem;
-    line-height: 1.875rem;
+    line-height: 1.75rem;
 }
 
 @media screen and (max-width: 768px) {
@@ -120,10 +121,6 @@ p {
     h2 {
         font-size: 2rem;
     }
-
-    p {
-        font-size: 0.875rem;
-    }
 }
 
 /*---------------*/
diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
index 7c4e0b5..6498b9d 100644
--- a/src/layout/Hero/HeroSection.svelte
+++ b/src/layout/Hero/HeroSection.svelte
@@ -8,9 +8,9 @@
 <section class="hero">
 	<div class="hero-text">
 		<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
-		<h4>
+		<p>
 			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
-		</h4>
+		</p>
 		<div class="hero-buttons">
 			<Button icon="download" kind="primary" href="download">Download Manager</Button>
 			<Button icon="docs" href="patches">View patches</Button>
@@ -24,7 +24,7 @@
 		margin-bottom: 1.5rem;
 	}
 
-	h4 {
+	p {
 		margin-bottom: 2rem;
 	}
 
diff --git a/src/layout/Navbar/NavHost.svelte b/src/layout/Navbar/NavHost.svelte
index 029fe57..ba294a3 100644
--- a/src/layout/Navbar/NavHost.svelte
+++ b/src/layout/Navbar/NavHost.svelte
@@ -6,7 +6,7 @@
 
 	import Navigation from './NavButton.svelte';
 	import Svg from '$lib/components/Svg.svelte';
-	import Modal from '$lib/components/Modal.svelte';
+	import Modal from '$lib/components/Dialogue.svelte';
 	import Button from '$lib/components/Button.svelte';
 
 	import { clear_and_reload } from '$data/api/cache';
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Dialogue.svelte
similarity index 55%
rename from src/lib/components/Modal.svelte
rename to src/lib/components/Dialogue.svelte
index 35900b6..2be42ff 100644
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Dialogue.svelte
@@ -2,6 +2,7 @@
 	import { fade } from 'svelte/transition';
 	import { quadInOut } from 'svelte/easing';
 	export let modalOpen = false;
+	export let fullscreen = false;
 </script>
 
 {#if modalOpen}
@@ -11,23 +12,34 @@
 		on:keypress={() => (modalOpen = !modalOpen)}
 		transition:fade={{ easing: quadInOut, duration: 150 }}
 	/>
+
 	<div
 		class="modal"
 		role="dialog"
+		class:fullscreen
 		aria-modal="true"
-		transition:fade={{ easing: quadInOut, duration: 250 }}
+		transition:fade={{ easing: quadInOut, duration: 150 }}
 	>
-		<div class="title">
-			<h3>
-				<slot name="title" />
-			</h3>
-		</div>
+		<div class="top">
+			<div class="title">
+				{#if fullscreen}
+					<button on:click={() => (modalOpen = !modalOpen)}>
+						<img src="../icons/back.svg" id="back" alt="back" />
+					</button>
+				{/if}
+				{#if $$slots.title}
+					<h4>
+						<slot name="title" />
+					</h4>
+				{/if}
+			</div>
 
-		{#if $$slots.description}
-			<p>
-				<slot name="description" />
-			</p>
-		{/if}
+			{#if $$slots.description}
+				<p>
+					<slot name="description" />
+				</p>
+			{/if}
+		</div>
 
 		<div class="slot"><slot /></div>
 	</div>
@@ -44,20 +56,23 @@
 		z-index: 999;
 	}
 
-	h3 {
-		text-align: center;
+	.top {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 20px;
 	}
 
 	.title {
 		position: sticky;
-		padding-top: 46px;
-		padding-bottom: 20px;
+		display: flex;
+		align-items: center;
+		gap: 1rem;
 		top: 0;
+		left: 0;
 		width: 100%;
 		background-color: var(--grey-six);
-	}
-	p {
-		margin-bottom: 1rem;
+		margin-bottom: 8px;
 	}
 
 	.modal {
@@ -78,12 +93,37 @@
 		flex-direction: column;
 		gap: 2px;
 		z-index: 1001;
+		padding: 32px;
 		box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
 			0px 2px 4px -1px rgba(0, 0, 0, 0.2);
 	}
 
+	button {
+		padding: 0;
+		margin: 0;
+		border: none;
+		background-color: transparent;
+		display: flex;
+		align-items: center;
+	}
+
+	#back {
+		height: 24px;
+	}
+
+	.fullscreen {
+		max-height: 100%;
+		width: 100%;
+		border-radius: 0;
+	}
+	.fullscreen .title {
+		justify-content: flex-start;
+	}
+
 	.slot {
-		padding: 0px 28px 36px 28px;
+		display: flex;
+		flex-direction: column;
+		align-content: center;
 	}
 
 	.modal::-webkit-scrollbar {
diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte
index 284dbc3..a3cc765 100644
--- a/src/lib/components/Spinner.svelte
+++ b/src/lib/components/Spinner.svelte
@@ -2,9 +2,7 @@
 	import { fade } from 'svelte/transition';
 </script>
 
-<div class="spinner-container">
-	<div class="spinner" transition:fade={{ duration: 250 }} />
-</div>
+<div class="spinner" transition:fade={{ duration: 250 }} />
 
 <style>
 	@keyframes spinner {
@@ -13,19 +11,15 @@
 		}
 	}
 
-	.spinner-container {
-		position: fixed;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
-
 	.spinner:before {
 		content: '';
 		box-sizing: border-box;
 		width: 50px;
 		height: 50px;
 		border-radius: 50%;
+		position: fixed;
+		top: 50%;
+		left: 50%;
 		border: 4.5px solid transparent;
 		border-top-color: var(--accent-color);
 		animation: spinner 0.6s linear infinite;
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
index 56c5730..2019255 100644
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -14,7 +14,7 @@
 
 <div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 	<h2>ReVanced <span>Manager</span></h2>
-	<h4>Patch your favourite apps, right on your device.</h4>
+	<p>Patch your favourite apps, right on your device.</p>
 	<div class="buttons">
 		<Button kind="primary" icon="download" href={manager.assets[0].url} target="_blank">
 			{manager.version}
@@ -40,7 +40,7 @@
 		color: var(--white);
 	}
 
-	h4 {
+	p {
 		text-align: center;
 		margin-bottom: 1.5rem;
 	}
diff --git a/src/routes/patches/+page.svelte b/src/routes/patches/+page.svelte
index 62f08a7..41f344a 100644
--- a/src/routes/patches/+page.svelte
+++ b/src/routes/patches/+page.svelte
@@ -11,7 +11,7 @@
 	import Footer from '$layout/Footer.svelte';
 	import Search from '$lib/components/Search.svelte';
 	import FilterChip from '$lib/components/FilterChip.svelte';
-	import Modal from '$lib/components/Modal.svelte';
+	import Dialogue from '$lib/components/Dialogue.svelte';
 
 	$: ({ patches, packages } = $api_patches);
 
@@ -76,39 +76,39 @@
 			title="Search for patches"
 			on:keyup={debounce}
 		/>
-		<div class="filter-chips">
-			<FilterChip
-				selected={selectedPkg}
-				dropdown
-				on:click={() => (mobilePackages = !mobilePackages)}
-			>
-				{selectedPkg ? selectedPkg : 'Packages'}
-			</FilterChip>
-			<!-- <FilterChip check>Universal</FilterChip>
-			<FilterChip>Patch options</FilterChip> -->
-		</div>
-
-		<div class="mobile-packages-modal">
-			<Modal bind:modalOpen={mobilePackages}>
-				<svelte:fragment slot="title">Packages</svelte:fragment>
-				<div class="mobile-packages">
-					<!-- <span on:click={() => (mobilePackages = !mobilePackages)}>
-						<Package bind:selectedPkg name="All packages" />
-					</span> -->
-					{#each packages as pkg}
-						<span
-							on:click={() => (mobilePackages = !mobilePackages)}
-							on:keypress={() => (mobilePackages = !mobilePackages)}
-						>
-							<Package bind:selectedPkg name={pkg} />
-						</span>
-					{/each}
-				</div>
-			</Modal>
-		</div>
 	</div>
 </div>
 <main>
+	<div class="filter-chips" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
+		<FilterChip selected={selectedPkg} dropdown on:click={() => (mobilePackages = !mobilePackages)}>
+			{selectedPkg ? selectedPkg : 'Packages'}
+		</FilterChip>
+		<!-- <FilterChip check>Universal</FilterChip>
+		<FilterChip>Patch options</FilterChip> -->
+	</div>
+
+	<div class="mobile-packages-Dialogue">
+		<Dialogue bind:modalOpen={mobilePackages} fullscreen>
+			<svelte:fragment slot="title">Packages</svelte:fragment>
+			<div class="mobile-packages">
+				<span
+					on:click={() => (mobilePackages = !mobilePackages)}
+					on:keypress={() => (mobilePackages = !mobilePackages)}
+				>
+					<Package bind:selectedPkg name="All packages" />
+				</span>
+				{#each packages as pkg}
+					<span
+						on:click={() => (mobilePackages = !mobilePackages)}
+						on:keypress={() => (mobilePackages = !mobilePackages)}
+					>
+						<Package bind:selectedPkg name={pkg} />
+					</span>
+				{/each}
+			</div>
+		</Dialogue>
+	</div>
+
 	<aside in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
 		<PackageMenu>
 			<span class="packages">
@@ -155,7 +155,7 @@
 
 	.search-contain {
 		width: min(90%, 80rem);
-		margin-inline: auto;
+		margin-inline: auto;;
 	}
 
 	.patches-container {
@@ -184,7 +184,7 @@
 	}
 
 	@media (min-width: 768px) {
-		.mobile-packages-modal {
+		.mobile-packages-Dialogue {
 			display: none;
 		}
 	}
@@ -199,8 +199,12 @@
 			display: none;
 		}
 
+		.search {
+			padding-top: 4.5rem;
+		}
+
 		.patches-container {
-			margin-top: 1.5rem;
+			margin-top: 1rem;
 			margin-bottom: 1.5rem;
 			gap: 0.75rem;
 		}
diff --git a/src/routes/patches/Package.svelte b/src/routes/patches/Package.svelte
index 02a508f..db367e5 100644
--- a/src/routes/patches/Package.svelte
+++ b/src/routes/patches/Package.svelte
@@ -3,15 +3,20 @@
 	export let name: string;
 
 	function handleClick() {
-		selectedPkg = selectedPkg === name ? false : name
-		window.scrollTo({ top: 0, behavior: 'smooth' })
+		// Assign the selected package, if already selected, make it false
+		if (selectedPkg === name || name === 'All packages') {
+			selectedPkg = false;
+		} else {
+			selectedPkg = name;
+		}
+		window.scrollTo({ top: 0, behavior: 'smooth' });
 	}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	class="package"
-	class:selected={selectedPkg === name}
+	class:selected={selectedPkg === name || (name === 'All packages' && !selectedPkg)}
 	on:click={handleClick}
 >
 	{name}
@@ -60,7 +65,7 @@
 			color: var(--grey-five);
 			border-bottom: 1px solid var(--grey-three);
 		}
-		
+
 		.selected {
 			color: var(--accent-color);
 			background-color: var(--accent-low-opacity);
diff --git a/static/icons/back.svg b/static/icons/back.svg
new file mode 100644
index 0000000..7ccad69
--- /dev/null
+++ b/static/icons/back.svg
@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M24 40.3 7.7 24 24 7.7l2.8 2.75L15.3 22h25v4h-25l11.5 11.5Z" fill="#AFD3F4"/></svg>
\ No newline at end of file