diff --git a/src/layout/Footer.svelte b/src/layout/Footer.svelte
new file mode 100644
index 0000000..b06734b
--- /dev/null
+++ b/src/layout/Footer.svelte
@@ -0,0 +1,171 @@
+<script lang="ts">
+	import { repositories } from '$data/api';
+	import { friendlyName } from '$lib/utils';
+</script>
+
+<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
+		<g clip-path="url(#clip0_2426_11367)">
+			<path
+				d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
+				stroke-linecap="square"
+			/>
+		</g>
+	</pattern>
+	<rect width="100%" height="100%" fill="url(#a)" />
+</svg>
+<footer>
+	<div class="footer-top">
+		<section class="main-content">
+			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+			<div>
+				<p>
+					ReVanced was born out of Vanced's discontinuation and it is our goal to continue the legacy
+					of what Vanced left behind. Thanks to ReVanced Patcher, it's possible to create long-lasting
+					patches for nearly any Android app. ReVanced's patching system is designed to allow patches
+					to work on new versions of the apps automatically with bare minimum maintenance.
+				</p>
+			</div>
+		</section>
+	
+		<section class="links-container">
+			<div class="link-column">
+				<li>Pages</li>
+				<li><a href="/">Home</a></li>
+				<li><a href="/download">Download</a></li>
+				<li><a href="/docs">Documentation</a></li>
+				<li><a href="/patches">Patches</a></li>
+				<li><a href="/contributors">Contributors</a></li>
+			</div>
+			<div class="link-column">
+				<li>Repositories</li>
+				{#each $repositories as { name }}
+					<li>
+						<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
+							{friendlyName(name)}
+						</a>
+					</li>
+				{/each}
+			</div>
+			<div class="link-column">
+				<!-- to replace -->
+				<li>Socials</li>
+				<li><a href="https://github.com/revanced" target="_blank" rel="noreferrer">GitHub</a></li>
+				<li><a href="https://revanced.app/discord" target="_blank" rel="noreferrer">Discord</a></li>
+				<li><a href="https://reddit.com/r/revancedapp" target="_blank" rel="noreferrer">Reddit</a></li>
+				<li><a href="https://t.me/app_revanced" target="_blank" rel="noreferrer">Telegram</a></li>
+				<li><a href="https://twitter.com/revancedapp" target="_blank" rel="noreferrer">Twitter</a></li>
+				<li><a href="https://www.youtube.com/c/ReVanced" target="_blank" rel="noreferrer">YouTube</a></li>
+			</div>
+		</section>
+	</div>
+	<div class="footer-bottom">
+		<div id="logo-name"><span>Re</span>Vanced</div>
+		<a href="https://liberapay.com/ReVanced/donate"><div>Donate</div></a>
+		<a href="mailto:contact@revanced.app"><div>Email</div></a>
+	</div>
+</footer>
+
+
+<style>
+	footer {
+		margin: 4rem 0 5rem 0;
+		margin-inline: auto;
+		padding-bottom: 1rem;
+		width: min(87%, 80rem);
+	}
+
+	.footer-top {
+		display: flex;
+		gap: 8rem;
+		justify-content: space-between;
+		margin-bottom: 4rem;
+	}
+
+	.footer-bottom {
+		display: flex;
+		gap: 2rem;
+		align-items: center;
+	}
+
+	#logo-name {
+		font-size: 1.4rem;
+		color: var(--white);
+		font-weight: 600;
+	}
+
+	#logo-name span {
+		color: var(--accent-color)
+	}
+
+	.footer-bottom a {
+		text-decoration: none;
+		color: var(--grey-five);
+		font-weight: 500;
+	}
+
+	li {
+		list-style: none;
+		color: var(--grey-five);
+		font-size: 0.9rem;
+		font-weight: 500;
+	}
+
+	li a {
+		color: var(--accent-color);
+		font-weight: 500;
+		font-size: 0.95rem;
+	}
+
+	g path {
+		stroke: var(--grey-three);
+	}
+
+	.main-content {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		align-items: flex-start;
+	}
+
+	img {
+		height: 2.5rem;
+	}
+
+	a {
+		text-decoration: none;
+	}
+
+	a:hover {
+		text-decoration: underline;
+		text-decoration-style: wavy;
+		text-decoration-color: var(--accent-color-two);
+		color: var(--white);
+	}
+
+	.links-container {
+		display: flex;
+		gap: 10rem;
+		margin-top: 1rem;
+	}
+
+	.link-column {
+		display: flex;
+		gap: 1rem;
+		flex-direction: column;
+		width: max-content;
+	}
+
+	@media screen and (max-width: 1050px) {
+		.footer-top {
+			flex-direction: column;
+			gap: 2rem;
+		}
+
+		.links-container {
+			display: grid;
+			gap: 3rem;
+			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+		}
+	}
+</style>
diff --git a/src/layout/Hero/HeroSection.svelte b/src/layout/Hero/HeroSection.svelte
new file mode 100644
index 0000000..7c4e0b5
--- /dev/null
+++ b/src/layout/Hero/HeroSection.svelte
@@ -0,0 +1,68 @@
+<script>
+	import { fly } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+
+	import Button from '$lib/components/Button.svelte';
+</script>
+
+<section class="hero">
+	<div class="hero-text">
+		<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
+		<h4>
+			Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
+		</h4>
+		<div class="hero-buttons">
+			<Button icon="download" kind="primary" href="download">Download Manager</Button>
+			<Button icon="docs" href="patches">View patches</Button>
+		</div>
+	</div>
+</section>
+
+<style>
+	h1 {
+		color: var(--white);
+		margin-bottom: 1.5rem;
+	}
+
+	h4 {
+		margin-bottom: 2rem;
+	}
+
+	.hero {
+		padding-bottom: 9rem;
+	}
+
+	.hero-text {
+		align-items: center;
+	}
+
+	.hero-buttons {
+		display: flex;
+		user-select: none;
+		gap: 1rem;
+	}
+
+	span {
+		color: var(--accent-color);
+	}
+
+	@media (max-width: 768px) {
+		.hero {
+			padding-bottom: 0;
+		}
+
+		h4 {
+			font-size: clamp(1rem, 1.2rem, 1.5rem);
+		}
+
+		br {
+			content: ' ';
+		}
+	}
+
+	@media screen and (max-width: 450px) {
+		.hero-buttons {
+			flex-direction: column;
+		}
+	}
+</style>
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/Button.svelte
similarity index 76%
rename from src/lib/components/atoms/Button.svelte
rename to src/lib/components/Button.svelte
index 43b182d..1b1c690 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -3,7 +3,6 @@
 	$: type = 'button-' + kind;
 	export let icon = '';
 	export let href = '';
-	export let capitalize = false;
 	export let target = '';
 </script>
 
@@ -13,7 +12,6 @@
 		{href}
 		{target}
 		class={type}
-		class:capitalize
 	>
 		{#if icon}
 			<img src="../icons/{icon}.svg" alt={icon} />
@@ -26,48 +24,52 @@
 	button {
 		border: none;
 		background-color: transparent;
+		padding: 0;
+		margin: 0;
 	}
 
-
 	a,
 	div {
 		min-width: max-content;
-		min-height: 57px;
-		font-size: 0.9rem;
+		font-size: 0.95rem;
 		text-decoration: none;
 		color: var(--white);
 		font-weight: 600;
 		border: none;
 		border-radius: 12px;
-		padding: 1rem 1.5rem;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		gap: 0.5rem;
 		cursor: pointer;
-		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
 		user-select: none;
 	}
 
-	.capitalize {
-		text-transform: uppercase;
-		letter-spacing: 0.03rem;
-		font-weight: 700;
-		font-size: 0.8rem;
-	}
-
 	.button-primary {
 		background-color: var(--accent-color);
-		box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
 		color: var(--grey-four);
 	}
+	.button-secondary {
+		background-color: var(--grey-two);
+	}
+
+	.button-primary, .button-secondary {
+		padding: 16px 24px;
+	}
+
+	.button-tertiary {
+		background-color: transparent;
+		color: var(--accent-color);
+		font-weight: 500;
+		letter-spacing: 0.01rem;
+	}
 
 	div:hover {
 		filter: brightness(85%);
 	}
 
 	img {
-		height: 25px;
+		height: 20px;
 	}
 </style>
diff --git a/src/lib/components/atoms/Modal.svelte b/src/lib/components/Modal.svelte
similarity index 62%
rename from src/lib/components/atoms/Modal.svelte
rename to src/lib/components/Modal.svelte
index db3a468..a3b69e8 100644
--- a/src/lib/components/atoms/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -5,11 +5,19 @@
 </script>
 
 {#if modalOpen}
-	<div class="modal-container" transition:fade={{ easing: quadInOut, duration: 150 }}>
-		<div class="modal">
-			<slot />
-		</div>
-		<div class="overlay" on:click={() => (modalOpen = !modalOpen)} />
+	<div
+		class="overlay"
+		on:click={() => (modalOpen = !modalOpen)}
+		on:keypress={() => (modalOpen = !modalOpen)}
+		transition:fade={{ easing: quadInOut, duration: 150 }}
+	/>
+	<div
+		class="modal"
+		role="dialog"
+		aria-modal="true"
+		transition:fade={{ easing: quadInOut, duration: 250 }}
+	>
+		<slot />
 	</div>
 {/if}
 
@@ -18,20 +26,20 @@
 		position: fixed;
 		top: 0;
 		left: 0;
-		width: 100vw;
-		height: 100vh;
+		width: 100%;
+		height: 100%;
 		background-color: rgba(0, 0, 0, 0.5);
-		z-index: 1000;
+		z-index: 999;
 	}
 
 	.modal {
 		position: fixed;
-		width: min(95%, 500px);
+		width: min(85%, 425px);
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		padding: 42px;
-		border-radius: 16px;
+		padding: 46px 36px;
+		border-radius: 26px;
 		background-color: var(--grey-six);
 		display: flex;
 		user-select: none;
diff --git a/src/lib/components/atoms/Search.svelte b/src/lib/components/Search.svelte
similarity index 89%
rename from src/lib/components/atoms/Search.svelte
rename to src/lib/components/Search.svelte
index 30292a4..d897c7e 100644
--- a/src/lib/components/atoms/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -76,17 +76,11 @@
 			right: 26px;
 			top: 38px;
 		}
-
 	
 		input {
-			background-color: transparent;
+			background-color: var(--grey-ten);
 			border: none;
-			border-radius: 0;
-			border-bottom: 1px solid var(--grey-one);
+			border-radius: 100px;
 		}	
-
-		input:focus {
-			border-radius: 8px;
-		}
 	}
 </style>
diff --git a/src/lib/components/atoms/TreeMenuButton.svelte b/src/lib/components/TreeView/TreeMenuButton.svelte
similarity index 83%
rename from src/lib/components/atoms/TreeMenuButton.svelte
rename to src/lib/components/TreeView/TreeMenuButton.svelte
index 7cad29d..dfd2acb 100644
--- a/src/lib/components/atoms/TreeMenuButton.svelte
+++ b/src/lib/components/TreeView/TreeMenuButton.svelte
@@ -14,12 +14,13 @@
 	class:selected={selectedPkg === name}
 	on:click={handleClick}
 >
-	<h5>{name}</h5>
+	{name}
 </div>
 
 <style>
 	.package {
 		padding: 0.6rem 1rem;
+		font-size: 0.9rem;
 		border-radius: 8px;
 		cursor: pointer;
 		display: flex;
@@ -30,12 +31,12 @@
 		transition: background-color 0.4s var(--bezier-one);
 	}
 
-	.package h5 {
+	.package{
 		color: var(--grey-five);
 		transition: color 0.3s var(--bezier-one);
 	}
 
-	.selected h5 {
+	.selected {
 		color: var(--grey-four);
 		transition: color 0.3s var(--bezier-one);
 	}
@@ -47,27 +48,29 @@
 		background-color: var(--grey-six);
 	}
 
-	.package:not(.selected):hover h5 {
+	.package:not(.selected):hover {
 		color: var(--white);
 	}
 
 	@media (max-width: 768px) {
 		.package {
 			border-radius: 12px;
+			padding: 0.5rem 1rem;
 			width: max-content;
 			background-color: transparent;
 			border: 1px solid var(--grey-three);
 		}
 
-		.package h5 {
+		.package{
 			overflow: hidden;
 			text-overflow: ellipsis;
+			color: var(--accent-color);
 		}
 
 		.selected {
-			background-color: var(--accent-color);
+			background-color: var(--accent-low-opacity);
 		}
-		.package:not(.selected):hover h5 {
+		.package:not(.selected):hover {
 			color: var(--grey-five);
 		}
 	}
diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte
deleted file mode 100644
index 8bb33f8..0000000
--- a/src/lib/components/molecules/ContributorHost.svelte
+++ /dev/null
@@ -1,86 +0,0 @@
-<script lang="ts">
-	import type { Contributor } from 'src/data/types';
-	import ContributorButton from '../atoms/ContributorPerson.svelte';
-
-	export let contributors: Contributor[];
-	export let repo: string;
-
-	let repo_name = repo
-		.replace(/-/g, ' ')
-		.replace(/revanced\/revanced/g, 'ReVanced')
-		.replace(/cli/g, 'CLI')
-		.replace(/api/g, 'API')
-		.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase());
-
-	// Yes
-	let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
-</script>
-
-<div class="title">
-	<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
-		<h4>{repo_name}</h4>
-	</a>
-</div>
-
-<hr />
-
-<div class="contrib-host">
-	{#each contributors as { login, avatar_url, html_url }}
-		{#if !usersIwantToExplodeSoBadly.includes(login)}
-			<ContributorButton name={login} pfp={avatar_url} url={html_url} />
-		{/if}
-	{/each}
-</div>
-
-<style>
-	.title {
-		display: flex;
-		align-items: center;
-		border-radius: 4px;
-		transform: translateX(-6px);
-	}
-
-	h4 {
-		text-align: center;
-	}
-
-	hr {
-		margin-top: 0.5rem;
-		margin-bottom: 1rem;
-		border-top: 1px solid var(--grey-two);
-	}
-	a {
-		transition: all 0.3s var(--bezier-one);
-		display: flex;
-		text-decoration: none;
-		width: max-content;
-		border-radius: 8px;
-	}
-
-	a > h4 {
-		transition: all 0.3s var(--bezier-one);
-		width: max-content;
-		padding: 0rem 0.4rem;
-		border-radius: 4px;
-	}
-
-	a:hover > h4 {
-		width: max-content;
-		background-color: var(--grey-three);
-		color: var(--accent-color);
-	}
-
-	.contrib-host {
-		gap: 0.5rem;
-		display: grid;
-		justify-items: center;
-		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-	}
-
-	@media (max-width: 768px) {
-		.contrib-host {
-			gap: 0.25rem;
-			grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
-		}
-	}
-</style>
diff --git a/src/lib/components/molecules/Footer.svelte b/src/lib/components/molecules/Footer.svelte
deleted file mode 100644
index 176363d..0000000
--- a/src/lib/components/molecules/Footer.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script lang="ts">
-	import { repositories } from '../../../data/api';
-</script>
-
-<hr />
-
-<footer>
-	<section class="main-content">
-		<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
-		<div>
-			<h2>
-				<span>Re</span>Vanced
-			</h2>
-			<h5>Copyright © 2022</h5>
-		</div>
-	</section>
-
-	<section class="links-container">
-		<div class="link-column">
-			<h4>Pages</h4>
-			<a href="/"><h5>Home</h5></a>
-			<a href="/download"><h5>Download</h5></a>
-			<!-- <a href="/docs"><h5>Documentation</h5></a> -->
-			<a href="/patches"><h5>Patches</h5></a>
-			<a href="/contributors"><h5>Contributors</h5></a>
-		</div>
-		<div class="link-column">
-			<h4>Repositories</h4>
-			{#each $repositories as { name }}
-				<a href="https://github.com/{name}" target="_blank" rel="noreferrer">
-					<div>
-						<h5>
-							{name
-								.replace(/-/g, ' ')
-								.replace(/revanced\/revanced/g, '')
-								.replace(/cli/g, 'CLI')
-								.replace(/api/g, 'API')
-								.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())}
-						</h5>
-					</div>
-				</a>
-			{/each}
-		</div>
-		<div class="link-column">
-			<!-- to replace -->
-			<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>
-
-<style>
-	footer {
-		margin: 4rem 0 5rem 0;
-		margin-inline: auto;
-		display: flex;
-		gap: 2rem;
-		justify-content: space-between;
-		width: min(90%, 80rem);
-	}
-
-	h2 {
-		color: var(--white);
-		font-size: 1.5rem;
-		font-weight: 700;
-	}
-
-	h4 {
-		color: var(--accent-color-two);
-	}
-
-	.main-content {
-		display: flex;
-		gap: 1rem;
-	}
-
-	.main-content span {
-		color: var(--accent-color);
-	}
-
-	.main-content h2 {
-		margin-bottom: 0.5rem;
-	}
-
-	img {
-		height: 3rem;
-	}
-
-	a {
-		text-decoration: none;
-	}
-
-	.links-container {
-		display: flex;
-		gap: 5rem;
-	}
-
-	.link-column {
-		display: flex;
-		gap: 0.5rem;
-		flex-direction: column;
-	}
-
-	@media screen and (max-width: 700px) {
-		footer {
-			flex-direction: column;
-		}
-
-		.links-container {
-			display: grid;
-			gap: 3rem;
-			grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
-		}
-	}
-</style>
diff --git a/src/lib/components/atoms/ContributorPerson.svelte b/src/routes/contributors/ContributorPerson.svelte
similarity index 74%
rename from src/lib/components/atoms/ContributorPerson.svelte
rename to src/routes/contributors/ContributorPerson.svelte
index 5d9ccb5..bbb303d 100644
--- a/src/lib/components/atoms/ContributorPerson.svelte
+++ b/src/routes/contributors/ContributorPerson.svelte
@@ -14,23 +14,22 @@
 	a {
 		color: var(--white);
 		text-decoration: none;
-		padding: 0.5rem;
+		cursor: pointer;
+		padding: 0.9rem 1rem;
 		width: 100%;
 		transition: background-color 0.3s var(--bezier-one);
-		border-radius: 6px;
 		display: flex;
 		gap: 1rem;
 		align-items: center;
-		background-color: var(--grey-six);
-		border: 1px solid var(--grey-three);
+		border-right: 1px solid var(--grey-three);
+		border-bottom: 1px solid var(--grey-three);
 	}
 
 	a:hover {
-		background-color: var(--accent-color);
-	}
-
-	a:hover > h5 {
-		color: var(--grey-four);
+		text-decoration: underline;
+		text-decoration-style: wavy;
+		text-decoration-color: var(--accent-color);
+		color: var(--white);
 	}
 
 	h5 {
@@ -41,8 +40,8 @@
 
 	img {
 		border-radius: 50%;
-		height: 30px;
-		width: 30px;
+		height: 32px;
+		width: 32px;
 		background-color: var(--grey-two);
 		transition: transform 0.4s var(--bezier-one);
 		user-select: none;
@@ -58,11 +57,9 @@
 			width: 48px;
 		}
 		a {
-			border-radius: 16px;
 			width: max-content;
 			background-color: transparent;
 			border: none;
 		}
-
 	}
 </style>
diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
new file mode 100644
index 0000000..786896c
--- /dev/null
+++ b/src/routes/contributors/ContributorSection.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { friendlyName } from '$lib/utils';
+	import { slide, fade } from 'svelte/transition';
+	import { quintOut } from 'svelte/easing';
+	import type { Contributor } from '$lib/types';
+	import ContributorButton from './ContributorPerson.svelte';
+
+	export let contributors: Contributor[];
+	export let repo: string;
+	let expanded = true;
+
+	// Yes
+	let usersIwantToExplodeSoBadly = ['semantic-release-bot'];
+	let repo_name = friendlyName(repo);
+</script>
+
+<div class="section-container">
+	<div
+		class="title"
+		class:closed={!expanded}
+		on:click={() => (expanded = !expanded)}
+		on:keypress={() => (expanded = !expanded)}
+	>
+		<a href="https://github.com/{repo}" rel="noreferrer" target="_blank">
+			<h4>{repo_name}</h4>
+		</a>
+		<img
+			id="arrow"
+			style:transform={expanded ? 'rotate(0deg)' : 'rotate(-180deg)'}
+			src="/icons/arrow.svg"
+			alt="dropdown"
+		/>
+	</div>
+
+	{#if expanded}
+		<div class="contrib-host" transition:slide|local={{ easing: quintOut, duration: 500 }}>
+			{#each contributors as { login, avatar_url, html_url }}
+				{#if !usersIwantToExplodeSoBadly.includes(login)}
+					<ContributorButton name={login} pfp={avatar_url} url={html_url} />
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.title {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		background-color: var(--grey-six);
+		padding: 0.75rem 1.25rem;
+		border-bottom: 1px solid var(--grey-three);
+		transition: all 0.2s var(--bezier-one);
+	}
+
+	.closed {
+		border-bottom: none;
+	}
+
+	#arrow {
+		height: 1.5rem;
+		transition: all 0.2s var(--bezier-one);
+		user-select: none;
+	}
+
+	.section-container {
+		border-radius: 20px;
+		overflow: hidden;
+		border: 1px solid var(--grey-three);
+	}
+
+	a {
+		transition: all 0.3s var(--bezier-one);
+		display: flex;
+		text-decoration: none;
+		width: max-content;
+		border-radius: 8px;
+	}
+
+	a:hover {
+		text-decoration: underline;
+		text-decoration-style: wavy;
+		text-decoration-color: var(--accent-color);
+		color: var(--white);
+	}
+
+	.contrib-host {
+		margin-right: -1px;
+		margin-bottom: -1px;
+		display: grid;
+		justify-items: center;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	}
+
+	@media (max-width: 768px) {
+		.contrib-host {
+			padding: 0.75rem;
+			gap: 0.25rem;
+			grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
+		}
+	}
+</style>
diff --git a/src/lib/components/molecules/PatchCell.svelte b/src/routes/patches/PatchItem.svelte
similarity index 81%
rename from src/lib/components/molecules/PatchCell.svelte
rename to src/routes/patches/PatchItem.svelte
index 7bd7947..fb40f47 100644
--- a/src/lib/components/molecules/PatchCell.svelte
+++ b/src/routes/patches/PatchItem.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { slide, fade } from 'svelte/transition';
 	import { quintOut } from 'svelte/easing';
-	import type { CompatiblePackage, Patch } from 'src/data/types';
+	import type { Patch } from '$lib/types';
+	import { friendlyName } from '$lib/utils'
+
 
 	export let patch: Patch;
 	const hasPatchOptions = !!patch.options.length;
@@ -17,26 +19,13 @@
 >
 	<div class="things">
 		<div class="title">
-			<h3>
-				{patch.name
-					// im sorry
-					.replace(/-/g, ' ')
-					.replace(/(?:^|\s)\S/g, (x) => x.toUpperCase())
-					.replace(/Microg/g, 'MicroG')
-					.replace(/Hdr/g, 'HDR')
-					.replace(/Sponsorblock/g, 'SponsorBlock')
-					.replace(/ktok/g, 'kTok')
-					.replace(/Vr/g, 'VR')}
-			</h3>
+			<h3>{friendlyName(patch.name)}</h3>
 		</div>
-
 		{#if hasPatchOptions}
 			<img id="arrow" src="/icons/arrow.svg" alt="dropdown" />
 		{/if}
 	</div>
-
 	<h5>{patch.description}</h5>
-
 	<div class="info-container">
 		{#each patch.compatiblePackages as pkg, i}
 			<a
@@ -47,20 +36,25 @@
 				<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.length}
-			{#if patch.compatiblePackages[0].versions.length}
-				<h6 class="boxed">
-					🎯 {patch.compatiblePackages[0].versions.slice(-1)}
-				</h6>
-			{/if}
+		{#if patch.compatiblePackages.length && patch.compatiblePackages[0].versions.length}
+			<h6 class="boxed">
+				🎯 {patch.compatiblePackages[0].versions.slice(-1)}
+			</h6>
 		{/if}
 
+		{#if !patch.compatiblePackages.length}
+		<h6 class="boxed">
+			🌎 Universal patch
+		</h6>
+		{/if}
+
+
 		<h6 class="boxed">🧩 {patch.version}</h6>
 
 		{#if hasPatchOptions}
-			<h6 class="boxed">⚙️ Patch Options</h6>
+			<h6 class="boxed">⚙️ Patch options</h6>
 		{/if}
 	</div>
 
@@ -81,6 +75,11 @@
 <style>
 	h3 {
 		margin-right: 0.5rem;
+		margin-bottom: 0.3rem;
+	}
+
+	h5 {
+		margin-bottom: 0.5rem;
 	}
 
 	h6 {