diff --git a/.DS_Store b/.DS_Store
index ca8c306..a258023 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
new file mode 100644
index 0000000..e7c13af
--- /dev/null
+++ b/src/lib/components/atoms/Button.svelte
@@ -0,0 +1,50 @@
+<script>
+	export let kind = 'secondary';
+	$: type = 'button-' + kind;
+	export let href = '#';
+</script>
+
+
+<button class={type}>
+	<a {href}>
+		<slot/>
+	</a>
+</button>
+
+<style>
+	a {
+		color: var(--white);
+		text-decoration: none;
+	} 
+
+	button,
+	.button-secondary {
+		font-weight: 600;
+		color: var(--white);
+		border: 3px solid var(--red);
+		border-radius: 200px;
+		padding: 12px 40px;
+		cursor: pointer;
+		background-color: transparent;
+		font-size: 1.5rem;
+		margin-top: 45px;
+		transform: translateX(-5%);
+		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+		transition-duration: 0.4s;
+		margin-right: 20px;
+
+	}
+
+	.button-primary {
+		background-color: var(--red);
+		box-shadow: 0px 0px 32px 1px var(--red-glow);
+	}
+
+	.button-primary:hover {
+		box-shadow: 0px 0px 32px 1px var(--red-glow), 0px 0px 32px 1px var(--red-glow);
+	}
+
+	button:hover {
+		transform: translate(-5%, -5%);
+	}
+</style>
diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte
new file mode 100644
index 0000000..a34af52
--- /dev/null
+++ b/src/lib/components/atoms/HeroImage.svelte
@@ -0,0 +1,15 @@
+<script>
+ 
+</script>
+
+<img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager"/>
+
+<style>
+	.hero-img {
+		width: 400px;
+		border-radius: 20px;
+		float: right;
+		transform: rotate(3.7deg) translateY(-24%) translateX(-12%);
+	}
+</style>
+
diff --git a/src/lib/components/atoms/IndexHeroTitle.svelte b/src/lib/components/atoms/IndexHeroTitle.svelte
new file mode 100644
index 0000000..116d2ab
--- /dev/null
+++ b/src/lib/components/atoms/IndexHeroTitle.svelte
@@ -0,0 +1,14 @@
+<h1><span class="redder">Re</span>Vanced</h1>
+
+<style>
+	.redder {
+		color: var(--red);
+	}
+
+	h1 {
+		color: var(--white);
+		font-weight: 800;
+        font-size: 6.5rem;
+		letter-spacing: -0.04em;
+	}
+</style>
diff --git a/src/lib/components/atoms/Navigation.svelte b/src/lib/components/atoms/Navigation.svelte
new file mode 100644
index 0000000..d5d8f80
--- /dev/null
+++ b/src/lib/components/atoms/Navigation.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { page } from '$app/stores';
+	export let href = '/';
+	$: current = (href == $page.url.pathname);
+
+</script>
+
+<li class:selected="{current === true}"><a {href}><slot/></a></li>
+
+<style>
+	li {
+		width: 160px;
+		text-align: center;
+		list-style: none;
+		display: inline-block;
+		position: relative;
+		align-items: center;
+	}
+
+	a {
+		color: var(--white);
+		text-decoration: none;
+		font-size: 1.25rem;
+	}
+
+	li:hover {
+		font-weight: 500;
+		border: 3px solid var(--grey-two);
+		padding: 10px 30px;
+		border-radius: 200px;
+	}
+
+	li.selected	 {
+		font-weight: 600;
+		border: 3px solid var(--red);
+		padding: 10px 30px;
+		border-radius: 200px;
+	}
+</style>
diff --git a/src/lib/components/atoms/Wave.svelte b/src/lib/components/atoms/Wave.svelte
new file mode 100644
index 0000000..6dbbfdf
--- /dev/null
+++ b/src/lib/components/atoms/Wave.svelte
@@ -0,0 +1,45 @@
+<svg
+  viewBox="0 0 1440 500"
+  xmlns="http://www.w3.org/2000/svg"
+  preserveAspectRatio="none"
+  {...$$props}
+>
+  <path class="wave" />
+</svg>
+
+<style>
+  .wave {
+    animation: wave-anim 40s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    fill: var(--red);
+  }
+
+  @keyframes wave-anim {
+    0% {
+      d: path(
+        "M 0,500 C 0,500 0,250 0,250 C 176.53333333333336,300.1333333333333 353.0666666666667,350.2666666666667 496,325 C 638.9333333333333,299.7333333333333 748.2666666666667,199.06666666666666 900,174 C 1051.7333333333333,148.93333333333334 1245.8666666666668,199.46666666666667 1440,250 C 1440,250 1440,500 1440,500 Z"
+      );
+    }
+    25% {
+      d: path(
+        "M 0,500 C 0,500 0,250 0,250 C 154.13333333333333,219.20000000000002 308.26666666666665,188.40000000000003 449,209 C 589.7333333333333,229.59999999999997 717.0666666666668,301.59999999999997 880,317 C 1042.9333333333332,332.40000000000003 1241.4666666666667,291.20000000000005 1440,250 C 1440,250 1440,500 1440,500 Z"
+      );
+    }
+    50% {
+      d: path(
+        "M 0,500 C 0,500 0,250 0,250 C 132.8,242.93333333333334 265.6,235.86666666666667 414,246 C 562.4,256.1333333333333 726.3999999999999,283.46666666666664 900,287 C 1073.6000000000001,290.53333333333336 1256.8000000000002,270.26666666666665 1440,250 C 1440,250 1440,500 1440,500 Z"
+      );
+    }
+    75% {
+      d: path(
+        "M 0,500 C 0,500 0,250 0,250 C 151.33333333333331,206.66666666666669 302.66666666666663,163.33333333333334 472,176 C 641.3333333333334,188.66666666666666 828.6666666666667,257.3333333333333 993,279 C 1157.3333333333333,300.6666666666667 1298.6666666666665,275.33333333333337 1440,250 C 1440,250 1440,500 1440,500 Z"
+      );
+    }
+    100% {
+      d: path(
+        "M 0,500 C 0,500 0,250 0,250 C 176.53333333333336,300.1333333333333 353.0666666666667,350.2666666666667 496,325 C 638.9333333333333,299.7333333333333 748.2666666666667,199.06666666666666 900,174 C 1051.7333333333333,148.93333333333334 1245.8666666666668,199.46666666666667 1440,250 C 1440,250 1440,500 1440,500 Z"
+      );
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte
new file mode 100644
index 0000000..f23b510
--- /dev/null
+++ b/src/lib/components/molecules/NavHost.svelte
@@ -0,0 +1,25 @@
+<script>
+	import Navigation from '../atoms/Navigation.svelte';
+</script>
+
+<nav>
+	<div class="logo">ReVanced</div>
+	<ul>
+		<Navigation href="/">Home</Navigation>
+		<Navigation href="/download">Download</Navigation>
+		<Navigation href="/docs">Docs</Navigation>
+		<Navigation href="/credits">Credits</Navigation>
+	</ul>
+</nav>
+
+<style>
+	nav {
+		width: 100%;
+		display: flex;
+		padding-top: 1.25rem;
+		padding-right: 4rem;
+		justify-content: space-between;
+		align-items: center;
+        min-height: 83px;
+	}
+</style>
diff --git a/src/lib/components/organisms/IndexDescription.svelte b/src/lib/components/organisms/IndexDescription.svelte
new file mode 100644
index 0000000..07b1a96
--- /dev/null
+++ b/src/lib/components/organisms/IndexDescription.svelte
@@ -0,0 +1,26 @@
+<script>
+	import Button from '$lib/components/atoms/Button.svelte';
+    import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
+</script>
+
+<section class="hero">
+    <div class="hero-text">
+        <!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
+        <IndexHeroTitle></IndexHeroTitle>
+        <h3>An extensible framework for<br />building application mods.</h3>
+        <Button kind="primary" href="/download">Download</Button>
+        <Button href="/docs">Read The Docs</Button>
+    </div>
+</section>
+
+<style>
+	.hero-text {
+		margin-top: 3%;
+		align-items: center;
+	}
+
+	.hero-text h1 {
+		font-size: 6.5rem;
+		letter-spacing: -0.04em;
+	}
+</style>
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 077f603..12241c4 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,3 +1,10 @@
+<script>
+
+import Button from "$lib/components/atoms/Button.svelte";
+import NavHost from "$lib/components/molecules/NavHost.svelte";
+
+</script>
+
 <svelte:head>
 	<meta charset="UTF-8" />
 	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -12,8 +19,10 @@
 	<link rel="stylesheet" href="css/styles.css" />
 </svelte:head>
 
+<NavHost></NavHost>
 <slot />
 
+
 <style>
 	:global(*) {
 		box-sizing: inherit;
@@ -44,19 +53,19 @@
 		--grey-three: #3e404f;
 	}
 
-	::selection {
+	:global(::selection) {
 		color: var(--white);
 		background: var(--red);
 	}
 
 	/*-----headings-----*/
 
-	h1 {
+	:global(h1) {
 		color: var(--white);
 		font-weight: 800;
 	}
 
-	h3 {
+	:global(h3) {
 		color: var(--white);
 		font-weight: 300;
 		font-size: 1.85rem;
@@ -64,123 +73,27 @@
 
 	/*-----scrollbar-----*/
 
-	::-webkit-scrollbar {
+	:global(::-webkit-scrollbar) {
 		width: 20px;
-	}
-
-	::-webkit-scrollbar-track {
 		background-color: transparent;
 	}
 
-	::-webkit-scrollbar-thumb {
+	:global(::-webkit-scrollbar-thumb) {
 		background-color: var(--grey-two);
 		border-radius: 20px;
 		border: 6px solid transparent;
 		background-clip: content-box;
 	}
 
-	::-webkit-scrollbar-thumb:hover {
+	:global(::-webkit-scrollbar-thumb:hover) {
 		background-color: var(--grey-three);
 	}
 
-	/*-----navbar-----*/
-
-	.logo {
-		color: #0f111a;
-		font-weight: 800;
-		font-size: 2.5rem;
+	:global(::-webkit-scrollbar-track-piece){
+		display:none;
 	}
 
-	nav {
-		width: 100%;
-		display: flex;
-		padding: 1.5rem 4rem 1.5rem 4rem;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	nav li {
-		width: 160px;
-		text-align: center;
-		list-style: none;
-		display: inline-block;
-		position: relative;
-		align-items: center;
-	}
-
-	nav a {
-		color: var(--white);
-		text-decoration: none;
-		font-size: 1.25rem;
-	}
-
-	nav li:hover {
-		font-weight: 600;
-		border: 3px solid var(--grey-two);
-		padding: 10px 30px;
-		border-radius: 200px;
-	}
-
-	/*-----body-----*/
-
-	.wrapper {
-		padding-left: 6rem;
-		padding-right: 6rem;
-	}
-
-	.hero-text {
-		margin-top: 3%;
-		align-items: center;
-	}
-
-	.hero-text h1 {
-		font-size: 6.5rem;
-		letter-spacing: -0.04em;
-	}
-
-	.redder {
-		color: var(--red);
-	}
-
-	button {
-		font-weight: 600;
-		color: var(--white);
-		border: 3px solid var(--red);
-		border-radius: 200px;
-		padding: 12px 40px;
-		cursor: pointer;
-		background-color: transparent;
-	}
-
-	.hero-text button {
-		font-size: 1.5rem;
-		margin-top: 45px;
-		transform: translateX(-5%);
-		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-		transition-duration: 0.4s;
-	}
-
-	.filled-button {
-		background-color: var(--red);
-	}
-
-	.hero-text .filled-button {
-		margin-right: 20px;
-		box-shadow: 0px 0px 32px 1px var(--red-glow);
-	}
-
-	.hero-text .filled-button:hover {
-		box-shadow: 0px 0px 32px 1px var(--red-glow), 0px 0px 32px 1px var(--red-glow);
-	}
-
-	.hero-text button:hover {
-		transform: translate(-5%, -5%);
-	}
-
-	.hero-img {
-		width: 400px;
-		border-radius: 20px;
-		float: right;
-		transform: rotate(3.7deg) translateY(-24%) translateX(-12%);
+	:global(::-webkit-scrollbar-track) {
+  		background: rgba(0, 0, 0, 0.2);
 	}
 </style>
diff --git a/src/routes/credits.html b/src/routes/credits.svelte
similarity index 100%
rename from src/routes/credits.html
rename to src/routes/credits.svelte
diff --git a/src/routes/docs.html b/src/routes/docs.svelte
similarity index 100%
rename from src/routes/docs.html
rename to src/routes/docs.svelte
diff --git a/src/routes/download.html b/src/routes/download.svelte
similarity index 100%
rename from src/routes/download.html
rename to src/routes/download.svelte
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index dd5fff5..944a9f1 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,195 +1,20 @@
-<nav>
-	<div class="logo">ReVanced</div>
-	<ul>
-		<li><a href="/index.html">Home</a></li>
-		<li><a href="/download.html">Download</a></li>
-		<li><a href="/docs.html">Docs</a></li>
-		<li><a href="/credits.html">Credits</a></li>
-	</ul>
-</nav>
+<script>
+	import IndexDescription from '$lib/components/organisms/IndexDescription.svelte';
+	import Wave from '$lib/components/atoms/Wave.svelte';
+	import HeroImage from '$lib/components/atoms/HeroImage.svelte';
+</script>
 
 <div class="wrapper">
-	<section class="hero">
-		<div class="hero-text">
-			<div class=" hero-header">
-				<h1><span class="redder">Re</span>Vanced</h1>
-			</div>
-			<h3>An extensible framework for<br />building application mods.</h3>
-			<button class="filled-button">Download</button>
-			<button>Read The Docs</button>
-			<img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" />
-		</div>
-	</section>
+	<IndexDescription />
+	<HeroImage />
 </div>
 
+<Wave />
+
+
 <style>
-	* {
-		box-sizing: inherit;
-		margin: 0;
-		padding: 0;
-		font-family: 'Manrope', sans-serif;
-	}
-
-	html {
-		font-size: 100%;
-		box-sizing: border-box;
-		overflow-x: hidden;
-	}
-
-	body {
-		margin: 0;
-		padding: 0;
-		line-height: 1.3;
-		background-color: #0f111a;
-	}
-
-	:root {
-		--white: #ffe1e1;
-		--red: #ff4151;
-		--red-glow: #ff838d40;
-		--grey-one: #1c1e29;
-		--grey-two: #2b2d3a;
-		--grey-three: #3e404f;
-	}
-
-	::selection {
-		color: var(--white);
-		background: var(--red);
-	}
-
-	/*-----headings-----*/
-
-	h1 {
-		color: var(--white);
-		font-weight: 800;
-	}
-
-	h3 {
-		color: var(--white);
-		font-weight: 300;
-		font-size: 1.85rem;
-	}
-
-	/*-----scrollbar-----*/
-
-	::-webkit-scrollbar {
-		width: 20px;
-	}
-
-	::-webkit-scrollbar-track {
-		background-color: transparent;
-	}
-
-	::-webkit-scrollbar-thumb {
-		background-color: var(--grey-two);
-		border-radius: 20px;
-		border: 6px solid transparent;
-		background-clip: content-box;
-	}
-
-	::-webkit-scrollbar-thumb:hover {
-		background-color: var(--grey-three);
-	}
-
-	/*-----navbar-----*/
-
-	.logo {
-		color: #0f111a;
-		font-weight: 800;
-		font-size: 2.5rem;
-	}
-
-	nav {
-		width: 100%;
-		display: flex;
-		padding: 1.5rem 4rem 1.5rem 4rem;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	nav li {
-		width: 160px;
-		text-align: center;
-		list-style: none;
-		display: inline-block;
-		position: relative;
-		align-items: center;
-	}
-
-	nav a {
-		color: var(--white);
-		text-decoration: none;
-		font-size: 1.25rem;
-	}
-
-	nav li:hover {
-		font-weight: 600;
-		border: 3px solid var(--grey-two);
-		padding: 10px 30px;
-		border-radius: 200px;
-	}
-
-	/*-----body-----*/
-
 	.wrapper {
 		padding-left: 6rem;
 		padding-right: 6rem;
 	}
-
-	.hero-text {
-		margin-top: 3%;
-		align-items: center;
-	}
-
-	.hero-text h1 {
-		font-size: 6.5rem;
-		letter-spacing: -0.04em;
-	}
-
-	.redder {
-		color: var(--red);
-	}
-
-	button {
-		font-weight: 600;
-		color: var(--white);
-		border: 3px solid var(--red);
-		border-radius: 200px;
-		padding: 12px 40px;
-		cursor: pointer;
-		background-color: transparent;
-        user-select: none;
-	}
-
-	.hero-text button {
-		font-size: 1.5rem;
-		margin-top: 45px;
-		transform: translateX(-5%);
-		transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-		transition-duration: 0.4s;
-	}
-
-	.filled-button {
-		background-color: var(--red);
-	}
-
-	.hero-text .filled-button {
-		margin-right: 20px;
-		box-shadow: 0px 0px 32px 1px var(--red-glow);
-	}
-
-	.hero-text .filled-button:hover {
-		box-shadow: 0px 0px 32px 1px var(--red-glow), 0px 0px 32px 1px var(--red-glow);
-	}
-
-	.hero-text button:hover {
-		transform: translate(-5%, -5%);
-	}
-
-	.hero-img {
-		width: 400px;
-		border-radius: 20px;
-		float: right;
-		transform: rotate(3.7deg) translateY(-24%) translateX(-12%);
-	}
 </style>
diff --git a/static/favicon.png b/static/favicon.png
index 825b9e6..83029e3 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/static/logo.svg b/static/logo.svg
new file mode 100644
index 0000000..819e663
--- /dev/null
+++ b/static/logo.svg
@@ -0,0 +1,6 @@
+<svg width="51" height="43" viewBox="0 0 51 43" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3571 27.8116C52.2143 25.0064 52.2143 17.9936 47.3571 15.1884L22.7679 0.98728C17.9107 -1.81788 11.8393 1.68858 11.8393 7.2989V11.2962L5.46429 7.61446C3.03572 6.21189 9.23091e-07 7.96511 9.23091e-07 10.7703L0 32.2297C-8.51576e-08 35.0349 3.03571 36.7881 5.46429 35.3855L11.8393 31.7038V35.7011C11.8393 41.3114 17.9107 44.8179 22.7679 42.0127L47.3571 27.8116ZM11.8393 11.2962L11.8393 31.7038L24.0429 24.6558C26.4714 23.2532 26.4714 19.7468 24.0429 18.3442L11.8393 11.2962Z" fill="#FF4151"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3571 27.8116C52.2143 25.0064 52.2143 17.9936 47.3571 15.1884L22.7679 0.98728C17.9107 -1.81788 11.8393 1.68858 11.8393 7.2989V11.2962L5.46429 7.61446C3.03572 6.21189 9.23091e-07 7.96511 9.23091e-07 10.7703L0 32.2297C-8.51576e-08 35.0349 3.03571 36.7881 5.46429 35.3855L11.8393 31.7038V35.7011C11.8393 41.3114 17.9107 44.8179 22.7679 42.0127L47.3571 27.8116ZM11.8393 11.2962L11.8393 31.7038L24.0429 24.6558C26.4714 23.2532 26.4714 19.7468 24.0429 18.3442L11.8393 11.2962Z" fill="#FF4151"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3571 15.1884C52.2143 17.9936 52.2143 25.0064 47.3571 27.8116L22.7679 42.0127C17.9107 44.8179 11.8393 41.3114 11.8393 35.7011V31.7038L24.0429 24.6558C26.4714 23.2532 26.4714 19.7468 24.0429 18.3442L11.8393 11.2962V7.2989C11.8393 1.68858 17.9107 -1.81788 22.7679 0.98728L47.3571 15.1884Z" fill="#FF4151"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.3571 15.1884C52.2143 17.9936 52.2143 25.0064 47.3571 27.8116L22.7679 42.0127C17.9107 44.8179 11.8393 41.3114 11.8393 35.7011V31.7038L24.0429 24.6558C26.4714 23.2532 26.4714 19.7468 24.0429 18.3442L11.8393 11.2962V7.2989C11.8393 1.68858 17.9107 -1.81788 22.7679 0.98728L47.3571 15.1884Z" fill="white"/>
+</svg>