diff --git a/frontend/website/package.json b/frontend/website/package.json
index 8e4986493..a03f4cdc9 100644
--- a/frontend/website/package.json
+++ b/frontend/website/package.json
@@ -40,5 +40,9 @@
 		"vite": "^4.1.1",
 		"vitest": "^0.25.3"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"@fontsource/be-vietnam-pro": "^4.5.8",
+		"@fontsource/comfortaa": "^4.5.11"
+	}
 }
diff --git a/frontend/website/src/app.html b/frontend/website/src/app.html
index effe0d0d2..6769ed5e8 100644
--- a/frontend/website/src/app.html
+++ b/frontend/website/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
diff --git a/frontend/website/src/routes/+layout.svelte b/frontend/website/src/routes/+layout.svelte
new file mode 100644
index 000000000..1594ff7cf
--- /dev/null
+++ b/frontend/website/src/routes/+layout.svelte
@@ -0,0 +1,6 @@
+<script>
+	import "@fontsource/be-vietnam-pro";
+	import "@fontsource/comfortaa";
+</script>
+
+<slot />
diff --git a/frontend/website/src/routes/+page.svelte b/frontend/website/src/routes/+page.svelte
index 16af9e524..c070b475a 100644
--- a/frontend/website/src/routes/+page.svelte
+++ b/frontend/website/src/routes/+page.svelte
@@ -1,12 +1,334 @@
-<script lang="ts">
-	import init, { add } from "player";
-	import { onMount } from "svelte";
-
-	onMount(async () => {
-		await init();
-		console.log(add(1, 2));
-	});
-</script>
-
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<body>
+	<div class="body container">
+		<div class="top-margin">
+			<div class="container header">
+				<span class="blurred-circle blue pos-1" />
+				<h1 class="wordmark">Scuffle.tv</h1>
+				<p class="heading-description">
+					We’re building a streaming platform.
+					<br />
+					A <span class="highlight">community driven streaming platform</span>, that is.
+				</p>
+			</div>
+			<div class="section">
+				<span class="blurred-circle blue pos-2" />
+				<h2>For Fun&trade;</h2>
+				<p>
+					Have you ever thought of making your own streaming platform? No?
+					<br />
+					Well... We are making a streaming platform. An <span class="highlight">open-source</span>
+					streaming platform.
+					<br />
+					You can join us on our journey of world conquer... It will be fun... Probably.
+				</p>
+			</div>
+			<div class="section center">
+				<h1>So... how do we conquer the world?</h1>
+				<div class="bar-container">
+					<div class="rust-bar flex-text">
+						<p>90% Rust</p>
+						<p class="magic-text">10% Magic</p>
+					</div>
+					<div class="magic-bar" />
+				</div>
+				<p>
+					With the power of <span class="highlight">Rust</span>.. and
+					<span class="highlight">Magic</span>, of course.
+				</p>
+			</div>
+			<div class="section">
+				<h2>Rust? Like the game?</h2>
+				<p>
+					No. Not the game, we’re talking ‘bout the programming language.
+					<br />
+					If you’re a programmer you must have heard of it before.
+					<br />
+					Fast and safe. That’s all you need to know about Rust.
+					<br />
+					Did we mention it’s fast? <span class="blazing-fast-text">Blazingly Fast&trade;.</span>
+				</p>
+			</div>
+			<div class="section center">
+				<span class="blurred-circle brown pos-3" />
+				<h1>So... What makes it community driven?</h1>
+				<p>
+					Open source. Made by a community of people who actually care about their work.
+					<br />
+					We plan on having everything be as transparent as possible.
+					<br />
+					Transparent moderation, development.
+					<br />
+					That’s what it’s all about.
+				</p>
+			</div>
+			<div class="section center">
+				<h1>Aren’t streaming platforms super expensive?</h1>
+				<p>
+					Yes, they are...
+					<br />
+					Our biggest goal and challenge is making everything cost effective and self sustainable.
+				</p>
+			</div>
+			<div class="section">
+				<span class="blurred-circle blue pos-4" />
+				<span class="blurred-circle green pos-5" />
+				<h2>Alright, you convinced me. Where can I join in on the fun?</h2>
+				<p>You can join our Discord, and check out the source code on GitHub.</p>
+			</div>
+			<div class="buttons-container center bottom">
+				<a href="https://github.com/scuffletv" target="_blank" rel="noopener noreferrer">
+					<button class="github-button">GitHub</button>
+				</a>
+				<a href="https://discord.gg/CVyX3WerGr" target="_blank" rel="noopener noreferrer">
+					<button class="discord-button">Discord</button>
+				</a>
+			</div>
+		</div>
+	</div>
+</body>
+
+<style lang="scss">
+	h1,
+	h2,
+	p {
+		z-index: 1;
+	}
+
+	.body {
+		max-width: 40rem;
+		margin: 0 auto;
+	}
+
+	button {
+		border: none;
+		border-radius: 0.5rem;
+		padding: 1rem 3rem;
+		font-size: 1.2rem;
+		font-weight: 600;
+		cursor: pointer;
+		transition: background 0.2s ease-in-out;
+	}
+
+	.discord-button {
+		background: #5865f2;
+		color: white;
+	}
+
+	.discord-button:hover {
+		background: #7289da;
+	}
+
+	.github-button {
+		background: #292929;
+		color: white;
+	}
+
+	.github-button:hover {
+		background: #3f3f3f;
+	}
+
+	.buttons-container {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 2rem;
+	}
+
+	.bottom {
+		margin-bottom: 25rem;
+	}
+
+	.flex-text {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: flex-start;
+	}
+	.flex-text > p {
+		color: black;
+	}
+
+	.bar-container {
+		margin-top: 1rem;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		width: 70%;
+	}
+
+	.magic-text {
+		// move it to the right
+		transform: translateX(2rem);
+	}
+
+	.rust-bar {
+		width: 90%;
+		height: 3rem;
+		background: #dea584;
+		border-radius: 0.5rem 0 0 0.5rem;
+		text-align: left;
+		padding-left: 1rem;
+	}
+
+	.magic-bar {
+		width: 10%;
+		height: 3rem;
+		background: linear-gradient(to bottom right, #6fcbff, #fff, #ff72f9);
+		border-radius: 0 0.5rem 0.5rem 0;
+	}
+
+	.section {
+		position: relative;
+		margin-top: 7rem;
+		display: flex;
+		flex-direction: column;
+		text-align: left;
+		align-items: flex-start;
+		justify-content: start;
+	}
+
+	.highlight {
+		color: white;
+		font-weight: bold;
+	}
+
+	h1,
+	h2 {
+		// get rid of the default margin
+		margin: 0;
+	}
+
+	.header {
+		position: relative;
+	}
+	.heading-description {
+		text-align: center;
+		margin-top: -0.1rem;
+	}
+
+	p {
+		color: rgb(163, 163, 163);
+		font-weight: 100;
+	}
+
+	.blazing-fast-text {
+		font-weight: 800;
+		color: #ffe145;
+		background: linear-gradient(#ffe145, #ff0000);
+		background-clip: text;
+		-webkit-linear-gradient: (#ffe145, #ff0000);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
+
+	.wordmark {
+		font-family: "Comfortaa", sans-serif;
+		font-weight: 700;
+		font-size: 5rem;
+		color: #ff7357;
+		background: linear-gradient(#ff7357, #ff4c6d);
+		background-clip: text;
+		-webkit-linear-gradient: (#ff7357, #ff4c6d);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+	}
+
+	.blurred-circle {
+		position: absolute;
+		width: 30rem;
+		height: 30rem;
+		overflow: hidden;
+
+		animation: scale-up-center 7s cubic-bezier(0.39, 0.575, 0.565, 1) infinite both;
+
+		@keyframes scale-up-center {
+			0% {
+				transform: scale(1); 
+			}
+			33% {
+				transform: scale(1.1); 
+			}
+			66% {
+				transform: scale(0.9); 
+			}
+			100% {
+				transform: scale(1); 
+			}
+		}
+		/**.fade-delay-2000 {
+			animation-delay: 2s;
+		}
+		.fade-delay-4000 {
+			animation-delay: 4s;
+		}*/
+
+		&.blue {
+			background: radial-gradient(
+				50% 50% at 50% 50%,
+				rgba(47, 130, 255, 0.3) 0%,
+				rgba(0, 0, 0, 0) 100%
+			);
+		}
+		&.brown {
+			background: radial-gradient(
+				50% 50% at 50% 50%,
+				rgba(255, 180, 136, 0.259) 0%,
+				rgba(0, 0, 0, 0) 100%
+			);
+		}
+		&.green {
+			background: radial-gradient(
+				50% 50% at 50% 50%,
+				rgba(136, 255, 234, 0.35) 0%,
+				rgba(0, 0, 0, 0) 100%
+			);
+		}
+		&.pos-1 {
+			top: -18rem;
+			left: 35rem;
+		}
+		&.pos-2 {
+			top: -10rem;
+			left: -10rem;
+		}
+		&.pos-3 {
+			top: -15rem;
+			left: 25rem;
+		}
+		&.pos-4 {
+			top: 2rem;
+			left: -20rem;
+		}
+		&.pos-5 {
+			top: 5rem;
+			left: 35rem;
+		}
+	}
+
+	body {
+		margin: 0;
+		overflow-x: hidden;
+		height: 100%;
+		// background-image: linear-gradient(to bottom ,#0F1314, #0F1314);
+		// background-repeat: no-repeat;
+		// background-size: cover;
+		// background-position: center;
+		background-color: #0f1314;
+		color: white;
+		font-family: "Be Vietnam Pro", sans-serif;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.top-margin {
+		margin-top: 10rem;
+	}
+</style>
diff --git a/frontend/website/svelte.config.js b/frontend/website/svelte.config.js
index 87081a053..1448ea2cb 100644
--- a/frontend/website/svelte.config.js
+++ b/frontend/website/svelte.config.js
@@ -1,5 +1,5 @@
-import adapter from "svelte-adapter-deno";
 import { vitePreprocess } from "@sveltejs/kit/vite";
+import adapter from "svelte-adapter-deno";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
diff --git a/frontend/website/tests/test.ts b/frontend/website/tests/test.ts
index 5076f5217..757c1c7a8 100644
--- a/frontend/website/tests/test.ts
+++ b/frontend/website/tests/test.ts
@@ -2,5 +2,5 @@ import { expect, test } from "@playwright/test";
 
 test("index page has expected h1", async ({ page }) => {
 	await page.goto("/");
-	await expect(page.getByRole("heading", { name: "Welcome to SvelteKit" })).toBeVisible();
+	await expect(page.getByRole("heading", { name: "Scuffle.tv" })).toBeVisible();
 });
diff --git a/yarn.lock b/yarn.lock
index a1dee9f83..5fec2e5a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -316,6 +316,16 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@fontsource/be-vietnam-pro@^4.5.8":
+  version "4.5.8"
+  resolved "https://registry.yarnpkg.com/@fontsource/be-vietnam-pro/-/be-vietnam-pro-4.5.8.tgz#fb26070f83ab763df8952a8bb89632b7f1dff7c3"
+  integrity sha512-02BI3zS+7Rs4vffa2U6AznQEjG2skMn4nswjEzwQc7uzE04n1MLxh9Mhf3KT5GBuP9HuPHJYVgytcGQ1xNLJfw==
+
+"@fontsource/comfortaa@^4.5.11":
+  version "4.5.11"
+  resolved "https://registry.yarnpkg.com/@fontsource/comfortaa/-/comfortaa-4.5.11.tgz#f3dc5e07637fc26b87e80897c611d60229d5e24c"
+  integrity sha512-KKC2C6KbF9BD6m9+wMf5hK0wFjIi3p3J/6C4JZW6OF9G6K4qZJFp2dBZzsEBepKh4s9/Q5G1SWsUUZY3ZeZNDA==
+
 "@humanwhocodes/config-array@^0.11.8":
   version "0.11.8"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.8.tgz#03595ac2075a4dc0f191cc2131de14fbd7d410b9"
@@ -898,7 +908,7 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha512-BrgHpW9NURQgzoNyjfq0Wu6VFO6D7IZEmJNdtgNqpzGG8RuNFHt2jQxWlAs4HMe119chBnv+34syEZtc6IhLtA==
 
-chokidar@^3.4.1:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.1:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -1687,6 +1697,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immutable@^4.0.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.4.tgz#83260d50889526b4b531a5e293709a77f7c55a2a"
+  integrity sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2601,6 +2616,15 @@ sander@^0.5.0:
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
+sass@^1.58.3:
+  version "1.58.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.3.tgz#2348cc052061ba4f00243a208b09c40e031f270d"
+  integrity sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 "semver@2 || 3 || 4 || 5":
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@@ -2690,7 +2714,7 @@ sorcery@^0.11.0:
     minimist "^1.2.0"
     sander "^0.5.0"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
