diff --git a/src/app.css b/src/app.css
index 9cb1555..6f594e5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -45,59 +45,61 @@ body {
     --grey-four: #182244;
     --grey-five: hsl(208, 30%, 75%);
     --grey-six: #202126;
-    --grey-seven: #18191D;
+    --grey-seven: #18191d;
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 ::selection {
-	background-color: var(--accent-low-opacity);
-	color: var(--accent-color);
+    background-color: var(--accent-low-opacity);
+    color: var(--accent-color);
 }
 
 /*-----headings-----*/
 
 h1 {
     color: var(--white);
-    font-weight: 700;
-    font-size: 1.5rem;
-    color: var(--white);
+    line-height: 1em;
+    font-size: 3rem;
     font-weight: 700;
     letter-spacing: -0.04em;
 }
 
 h2 {
     color: var(--grey-five);
-    font-weight: 400;
-    font-size: 1.3rem;
+    line-height: 1em;
+    font-size: 2.25rem;
+    letter-spacing: -0.075rem;
+    font-weight: 600;
 }
 
 h3 {
-    color: var(--white);
-    font-weight: 500;
-    font-size: 1rem;
+    font-size: 1.25rem;
+    color: var(--accent-color-two);
+    font-weight: 600;
 }
 
 h4 {
-    color: var(--white);
-    font-weight: 500;
-    font-size: 1.25rem;
+    color: var(--grey-five);
+    font-weight: 400;
+    font-size: 1.1rem;
     letter-spacing: 0.02rem;
 }
 
 h5 {
-    color: var(--accent-color-two);
-    font-weight: 300;
-    font-size: 1rem;
+    color: var(--grey-five);
+    font-weight: 400;
+    font-size: 0.9rem;
     letter-spacing: 0.02rem;
 }
 
 h6 {
     color: var(--grey-five);
-    font-weight: 300;
-    font-size: 1rem;
-    letter-spacing: 0.02rem;
+    font-weight: 500;
+    font-size: 0.8rem;
 }
 
+/*---------------*/
+
 ::-webkit-scrollbar {
     width: 5px;
     background-color: transparent;
diff --git a/src/lib/components/atoms/ContributorPerson.svelte b/src/lib/components/atoms/ContributorPerson.svelte
index e11e0b2..343fcd5 100644
--- a/src/lib/components/atoms/ContributorPerson.svelte
+++ b/src/lib/components/atoms/ContributorPerson.svelte
@@ -7,7 +7,7 @@
 
 <a href={url} rel="noreferrer" target="_blank">
 	<img src={pfp} {alt} />
-	<h2>{name}</h2>
+	<h5>{name}</h5>
 </a>
 
 <style>
@@ -25,17 +25,15 @@
 		border: 1px solid var(--grey-three);
 	}
 
-
 	a:hover {
 		background-color: var(--accent-color);
 	}
 
-	a:hover > h2 {
+	a:hover > h5 {
 		color: var(--grey-four);
 	}
 
-	h2 {
-		font-size: 0.95rem;
+	h5 {
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
diff --git a/src/lib/components/atoms/NavButton.svelte b/src/lib/components/atoms/NavButton.svelte
index 1998ea7..e5e97b8 100644
--- a/src/lib/components/atoms/NavButton.svelte
+++ b/src/lib/components/atoms/NavButton.svelte
@@ -1,12 +1,14 @@
 <script>
-  import RouterEvents from '../../../data/RouterEvents';
+	import RouterEvents from '../../../data/RouterEvents';
 	export let href = '/';
-  export let is_selected = target_url => href === target_url;
+	export let is_selected = (target_url) => href === target_url;
 </script>
 
 <a data-sveltekit-prefetch {href}>
 	<li class:selected={is_selected($RouterEvents.target_url.pathname)}>
-		<slot />
+		<h5>
+			<slot />
+		</h5>
 	</li>
 </a>
 
@@ -17,7 +19,7 @@
 		list-style: none;
 		position: relative;
 		font-weight: 500;
-		font-size: 0.9rem;
+		font-size: 1rem;
 		align-items: center;
 		border: var(--grey-six);
 		transition-timing-function: var(--bezier-one);
@@ -29,8 +31,9 @@
 		justify-content: center;
 	}
 
+
+
 	a {
-		color: var(--grey-five);
 		text-decoration: none;
 		font-size: 1rem;
 		user-select: none;
@@ -47,6 +50,10 @@
 		color: var(--accent-color);
 	}
 
+	li.selected h5 {
+		color: var(--accent-color);
+	}
+
 	@media (max-width: 768px) {
 		li {
 			padding: 1rem 1.5rem;
@@ -60,10 +67,8 @@
 			background-color: var(--accent-color);
 		}
 
-		li.selected {
-			color: var(--grey-four)
+		li.selected h5 {
+			color: var(--grey-four);
 		}
-
 	}
-
 </style>
diff --git a/src/lib/components/atoms/TreeMenuButton.svelte b/src/lib/components/atoms/TreeMenuButton.svelte
index 1da7ed1..6dac8a5 100644
--- a/src/lib/components/atoms/TreeMenuButton.svelte
+++ b/src/lib/components/atoms/TreeMenuButton.svelte
@@ -10,7 +10,7 @@
 	on:click={() =>
 		(current = current === name ? false : name) && window.scrollTo({ top: 0, behavior: 'smooth' })}
 >
-	<h3>{name}</h3>
+	<h5>{name}</h5>
 </div>
 
 <style>
@@ -26,16 +26,12 @@
 		transition: background-color 0.4s var(--bezier-one);
 	}
 
-	h3 {
-		font-size: 0.9rem;
-	}
-
-	.package > h3 {
+	.package h5 {
 		color: var(--grey-five);
 		transition: color 0.3s var(--bezier-one);
 	}
 
-	.selected > h3 {
+	.selected h5 {
 		color: var(--grey-four);
 		transition: color 0.3s var(--bezier-one);
 	}
@@ -47,7 +43,7 @@
 		background-color: var(--grey-six);
 	}
 
-	.package:not(.selected):hover > h3 {
+	.package:not(.selected):hover h5 {
 		color: var(--white);
 	}
 </style>
diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
index 4698a6d..4fff872 100644
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ b/src/lib/components/molecules/ContributorHost.svelte
@@ -17,7 +17,7 @@
 
 <div class="title">
 	<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
-		<h2>{repo_name}</h2>
+		<h4>{repo_name}</h4>
 	</a>
 </div>
 
@@ -38,9 +38,9 @@
 		border-radius: 4px;
 		transform: translateX(-6px);
 	}
-	h2 {
+
+	h4 {
 		text-align: center;
-		font-size: 1.25rem;
 	}
 
 	hr {
@@ -56,14 +56,14 @@
 		border-radius: 8px;
 	}
 
-	a > h2 {
+	a > h4 {
 		transition: all 0.3s var(--bezier-one);
 		width: max-content;
 		padding: 0rem 0.4rem;
 		border-radius: 4px;
 	}
 
-	a:hover > h2 {
+	a:hover > h4 {
 		width: max-content;
 		background-color: var(--grey-three);
 		color: var(--accent-color);
diff --git a/src/lib/components/molecules/Footer.svelte b/src/lib/components/molecules/Footer.svelte
index c16e041..57dd393 100644
--- a/src/lib/components/molecules/Footer.svelte
+++ b/src/lib/components/molecules/Footer.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { repositories } from "../../../data/api";
+	import { repositories } from '../../../data/api';
 </script>
 
 <hr />
@@ -8,48 +8,52 @@ import { repositories } from "../../../data/api";
 	<section class="main-content">
 		<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
 		<div>
-			<h1>
+			<h2>
 				<span>Re</span>Vanced
-			</h1>
-			<h6>Copyright © 2022</h6>
+			</h2>
+			<h5>Copyright © 2022</h5>
 		</div>
 	</section>
 
 	<section class="links-container">
 		<div class="link-column">
-			<h5>Pages</h5>
-			<a href="/"><h6>Home</h6></a>
-			<a href="/download"><h6>Download</h6></a>
-			<!-- <a href="/docs"><h6>Docs</h6></a> -->
-			<a href="/patches"><h6>Patches</h6></a>
-			<a href="/contributors"><h6>Contributors</h6></a>
+			<h4>Pages</h4>
+			<a href="/"><h5>Home</h5></a>
+			<a href="/download"><h5>Download</h5></a>
+			<!-- <a href="/docs"><h5>Docs</h5></a> -->
+			<a href="/patches"><h5>Patches</h5></a>
+			<a href="/contributors"><h5>Contributors</h5></a>
 		</div>
 		<div class="link-column">
-			<h5>Repos</h5>
+			<h4>Repos</h4>
 			{#each $repositories as { name }}
 				<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
 					<div>
-						<h6>
+						<h5>
 							{name
 								.replace(/-/g, ' ')
 								.replace(/revanced\/revanced/g, '')
 								.replace(/cli/g, 'CLI')
 								.replace(/api/g, 'API')
 								.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
-						</h6>
+						</h5>
 					</div>
 				</a>
 			{/each}
 		</div>
 		<div class="link-column">
 			<!-- to replace -->
-			<h5>Socials</h5>
-			<a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h6>GitHub</h6></a>
-			<a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h6>Discord</h6></a>
-			<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer"><h6>Reddit</h6></a>
-			<a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h6>Telegram</h6></a>
-			<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h6>Twitter</h6></a>
-			<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"><h6>YouTube</h6></a>
+			<h4>Socials</h4>
+			<a href="https://github.com/revanced" target="_blank" rel="noreferrer"><h5>GitHub</h5></a>
+			<a href="https://revanced.app/discord" target="_blank" rel="noreferrer"><h5>Discord</h5></a>
+			<a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer"><h5>Reddit</h5></a
+			>
+			<a href="https://t.me/app_revanced" target="_blank" rel="noreferrer"><h5>Telegram</h5></a>
+			<a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer"><h5>Twitter</h5></a
+			>
+			<a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer"
+				><h5>YouTube</h5></a
+			>
 		</div>
 	</section>
 </footer>
@@ -64,6 +68,16 @@ import { repositories } from "../../../data/api";
 		width: min(85%, 90rem);
 	}
 
+	h2 {
+		color: var(--white);
+		font-size: 1.5rem;
+		font-weight: 700;
+	}
+
+	h4 {
+		color: var(--accent-color-two);
+	}
+
 	.main-content {
 		display: flex;
 		gap: 1rem;
@@ -73,8 +87,7 @@ import { repositories } from "../../../data/api";
 		color: var(--accent-color);
 	}
 
-	.main-content h1 {
-		letter-spacing: -0.04rem;
+	.main-content h2 {
 		margin-bottom: 0.5rem;
 	}
 
@@ -86,14 +99,9 @@ import { repositories } from "../../../data/api";
 		text-decoration: none;
 	}
 
-	h6 {
-		font-size: 0.9rem;
-	}
-
 	.links-container {
 		display: flex;
 		gap: 5rem;
-
 	}
 
 	.link-column {
@@ -102,7 +110,6 @@ import { repositories } from "../../../data/api";
 		flex-direction: column;
 	}
 
-
 	@media screen and (max-width: 700px) {
 		footer {
 			flex-direction: column;
@@ -112,8 +119,6 @@ import { repositories } from "../../../data/api";
 			display: grid;
 			gap: 3rem;
 			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-
 		}
-
 	}
 </style>
diff --git a/src/lib/components/molecules/PatchCell.svelte b/src/lib/components/molecules/PatchCell.svelte
index 876710f..f81c310 100644
--- a/src/lib/components/molecules/PatchCell.svelte
+++ b/src/lib/components/molecules/PatchCell.svelte
@@ -18,7 +18,7 @@
 >
 	<div class="things">
 		<div class="title">
-			<h1>
+			<h3>
 				{patch.name
 					// im sorry
 					.replace(/-/g, ' ')
@@ -28,7 +28,7 @@
 					.replace(/Sponsorblock/g, 'SponsorBlock')
 					.replace(/Tiktok/g, 'TikTok')
 					.replace(/Vr/g, 'VR')}
-			</h1>
+			</h3>
 		</div>
 
 		{#if hasPatchOptions}
@@ -36,7 +36,8 @@
 		{/if}
 	</div>
 
-	<h4>{patch.description}</h4>
+	<h5>{patch.description}</h5>
+
 	<div class="info-container">
 		{#each patch.compatiblePackages as pkg, i}
 			<a
@@ -44,20 +45,20 @@
 				target="_blank"
 				rel="noreferrer"
 			>
-				<h2>📦 {pkg.name}</h2>
+				<h6 class="boxed">📦 {pkg.name}</h6>
 			</a>
 		{/each}
 		<!-- should i hardcode this to get the version of the first package? idk you cant stop me -->
 		{#if patch.compatiblePackages[0].versions.length}
-			<h2>
+			<h6 class="boxed">
 				🎯 {patch.compatiblePackages[0].versions.slice(-1)}
-			</h2>
+			</h6>
 		{/if}
 
-		<h2>🧩 {patch.version}</h2>
+		<h6 class="boxed">🧩 {patch.version}</h6>
 
 		{#if hasPatchOptions}
-			<h2>⚙️ Patch Options</h2>
+			<h6 class="boxed">⚙️ Patch Options</h6>
 		{/if}
 	</div>
 
@@ -66,8 +67,8 @@
 			<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
 				{#each patch.options as option}
 					<div class="option">
-						<h3>{option.title}</h3>
-						<h4>{option.description}</h4>
+						<h5 id="option-title">{option.title}</h5>
+						<h5>{option.description}</h5>
 					</div>
 				{/each}
 			</div>
@@ -76,24 +77,22 @@
 </div>
 
 <style>
-	h1 {
-		font-weight: 600;
+	h3 {
 		margin-right: 0.5rem;
-		font-size: 1.25rem;
-		color: var(--accent-color-two);
-		letter-spacing: normal;
 	}
 
-	h2 {
-		color: var(--accent-color);
-		font-size: 0.8rem;
-		font-weight: 500;
+	h6 {
 		border-radius: 8px;
+		color: var(--accent-color);
 		background-color: var(--grey-two);
 		padding: 0.2rem 0.4rem;
 		display: flex;
 	}
 
+	#option-title {
+		color: var(--accent-color);
+	}
+
 	a {
 		text-decoration: none;
 	}
@@ -106,19 +105,6 @@
 		width: 100%;
 	}
 
-	h3 {
-		color: var(--accent-color);
-		font-size: 0.9rem;
-		margin-bottom: 0.1rem;
-		font-weight: 500;
-	}
-
-	h4 {
-		color: var(--grey-five);
-		font-size: 0.9rem;
-		font-weight: 400;
-	}
-
 	.patch-container {
 		transition: all 2s var(--bezier-one);
 		background-color: var(--grey-six);
diff --git a/src/lib/components/organisms/Home.svelte b/src/lib/components/organisms/Home.svelte
index 1b4a13a..0a95994 100644
--- a/src/lib/components/organisms/Home.svelte
+++ b/src/lib/components/organisms/Home.svelte
@@ -8,9 +8,9 @@
 			<span>Re</span>Vanced
 		</h1>
 
-		<h2>
+		<h4>
 			ReVanced is an extensible framework for building <br /> Android application mods.
-		</h2>
+		</h4>
 
 		<div class="hero-buttons">
 			<Button icon="download" href="download" kind="primary">Download Manager</Button>
@@ -20,7 +20,14 @@
 </section>
 
 <style>
-	h2 {
+	h1 {
+		color: var(--white);
+		line-height: 1em;
+		font-size: 5rem;
+		font-weight: 700;
+	}
+
+	h4 {
 		margin-top: 1rem;
 		margin-bottom: 2rem;
 	}
@@ -43,11 +50,6 @@
 		color: var(--accent-color);
 	}
 
-	h1 {
-		line-height: 1em;
-		font-size: 5rem;
-	}
-
 	@media (max-width: 768px) {
 		.hero {
 			padding-bottom: 0;
@@ -55,11 +57,11 @@
 		}
 
 		h1 {
-			font-size: clamp(2.9rem, 10vw, 4rem);
+			font-size: clamp(3rem, 10vw, 4.5rem);
 		}
 
-		h2 {
-			font-size: 1.2rem;
+		h4 {
+			font-size: clamp(1rem, 1.2rem, 1.5rem);
 		}
 
 		br {
diff --git a/src/lib/documentation.scss b/src/lib/documentation.scss
index e366c09..d4898ca 100644
--- a/src/lib/documentation.scss
+++ b/src/lib/documentation.scss
@@ -26,7 +26,7 @@
         padding: 2px;
     }
 
-    h4 {
+    h5 {
         margin-bottom: 0.5rem;
     }
 
diff --git a/src/routes/contributors/+page.svelte b/src/routes/contributors/+page.svelte
index 13b3398..7fe6520 100644
--- a/src/routes/contributors/+page.svelte
+++ b/src/routes/contributors/+page.svelte
@@ -17,8 +17,8 @@
 <main>
 	<div class="wrapper">
 		<div class="text-container" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
-			<h1>Made possible by the community.</h1>
-			<h2>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h2>
+			<h2>Made possible by the community.</h2>
+			<h4>Want to show up here? <span><a href="https://github.com/revanced" target="_blank" rel="noreferrer">Become a contributor</a></span></h4>
 		</div>
 		<div class="contrib-grid">
 			{#each $repositories as { contributors: contribs, name }}
@@ -40,14 +40,13 @@
 		margin-bottom: 3rem;
 	}
 
-	h1 {
-		font-size: 2.25rem;
-		font-weight: 600;
+	h2 {
 		text-align: center;
 		color: var(--grey-four);
+		margin-bottom: 0.3rem;
 	}
-	h2 {
-		font-size: 1rem;
+	
+	h4 {
 		color: var(--grey-four);
 		text-align: center;
 	}
@@ -59,7 +58,7 @@
 		gap: 0.5rem;
 		margin-bottom: 2rem;
 		background-color: var(--accent-color);
-		padding: 2rem;
+		padding: 2.4rem;
 		border-radius: 8px;
 	}
 
diff --git a/src/routes/docs/[...slug]/+page.svelte b/src/routes/docs/[...slug]/+page.svelte
index a26a162..07e4633 100644
--- a/src/routes/docs/[...slug]/+page.svelte
+++ b/src/routes/docs/[...slug]/+page.svelte
@@ -16,7 +16,14 @@
 </svelte:head>
 
 <div id="markup-content">
-  <h1 class="title">{data.title}</h1>
+  <h2 class="title">{data.title}</h2>
 
   {@html data.content}
 </div>
+
+<style>
+  h2 {
+    color: var(--white);
+    line-height: 1.6;
+  }
+</style>
\ No newline at end of file
diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
index c58def6..e047275 100644
--- a/src/routes/download/+page.svelte
+++ b/src/routes/download/+page.svelte
@@ -12,7 +12,7 @@
 
 <div class="wrapper">
 	<h1>ReVanced <span>Manager</span></h1>
-	<h6>Patch your favourite apps, on-device.</h6>
+	<h4>Patch your favourite apps, on-device.</h4>
 	<Button kind="primary" icon="download" target="_blank" href={manager.assets[0].url}>{manager.version}</Button>
   <div class="screenshot">
     <Picture data={manager_screenshot} alt="Manager Screenshot" />
@@ -27,14 +27,14 @@
 		flex-direction: column;
 		align-items: center;
 	}
+
 	h1 {
-		font-size: 3rem;
 		text-align: center;
 		color: var(--white);
-
+		margin-bottom: 0.5rem;
 	}
 
-	h6 {
+	h4 {
 		text-align: center;
 		margin-bottom: 1.5rem;
 	}