diff --git a/packages/website/src/assets/code-sample.png b/packages/website/src/assets/code-sample.png
new file mode 100644
index 000000000..a1e37da04
Binary files /dev/null and b/packages/website/src/assets/code-sample.png differ
diff --git a/packages/website/src/assets/djs_logo_rainbow_400x400.png b/packages/website/src/assets/djs_logo_rainbow_400x400.png
new file mode 100644
index 000000000..c909324fb
Binary files /dev/null and b/packages/website/src/assets/djs_logo_rainbow_400x400.png differ
diff --git a/packages/website/src/routes/index.tsx b/packages/website/src/routes/index.tsx
index 2ffb59b4a..6fe535eb4 100644
--- a/packages/website/src/routes/index.tsx
+++ b/packages/website/src/routes/index.tsx
@@ -1,8 +1,47 @@
+import codeSample from '../assets/code-sample.png';
+import logo from '../assets/djs_logo_rainbow_400x400.png';
+import * as text from '../text.json';
+
+interface ButtonProps {
+	title: string;
+}
+
+function Button({ title }: ButtonProps) {
+	return (
+		<div className="max-h-[70px] bg-blurple px-3 py-4 rounded-lg">
+			<p className="font-semibold text-white m-0">{title}</p>
+		</div>
+	);
+}
+
 export default function IndexRoute() {
 	return (
-		<main className="w-full h-screen">
-			<div className="h-screen grid place-content-center">
-				<h1 className="">Coming soon...</h1>
+		<main className="w-full max-w-full max-h-full h-full flex-col bg-white dark:bg-dark overflow-y-auto">
+			<div className="flex h-[65px] sticky top-0 border-b border-slate-300 justify-center px-10 bg-white dark:bg-dark">
+				<div className="flex align-center items-center w-full max-w-[1100px] justify-between">
+					<div className="h-[50px] w-[50px] rounded-lg overflow-hidden">
+						<img className="h-[50px] w-[50px]" src={logo} />
+					</div>
+					<div className="flex flex-row space-x-8">
+						<a className="text-blurple font-semibold">Docs</a>
+						<a className="text-blurple font-semibold">Guide</a>
+					</div>
+				</div>
+			</div>
+			<div className="xl:flex xl:justify-center w-full max-w-full box-border px-10">
+				<div className="flex flex-col xl:flex-row grow max-w-[1100px] mt-10 pb-10 space-y-10 xl:space-x-20 place-items-center">
+					<div className="flex flex-col max-w-[800px] lt-xl:items-center">
+						<h1 className="font-bold text-6xl text-blurple mb-2">{text.heroTitle}</h1>
+						<p className="text-xl text-dark-100 dark:text-gray-400">{text.heroDescription}</p>
+						<div className="flex flew-row space-x-4">
+							<Button title="Read the guide" />
+							<Button title="Check out the docs" />
+						</div>
+					</div>
+					<div className="sm:flex sm:grow sm:shrink h-full sm:align-center xl:items-center hidden">
+						<img src={codeSample} className="max-w-[600px] rounded-xl shadow-md overflow-hidden" />
+					</div>
+				</div>
 			</div>
 		</main>
 	);
diff --git a/packages/website/src/text.json b/packages/website/src/text.json
new file mode 100644
index 000000000..b571a2ea5
--- /dev/null
+++ b/packages/website/src/text.json
@@ -0,0 +1,4 @@
+{
+	"heroTitle": "The most popular way to build Discord bots.",
+	"heroDescription": "discord.js is a powerful Node.js  module that allows you to interact with the Discord API  very easily. It takes a much more object-oriented approach than most other JS Discord libraries, making your bot's code significantly tidier and easier to comprehend."
+}
diff --git a/packages/website/unocss.config.ts b/packages/website/unocss.config.ts
index a6f49a178..f0f81cad9 100644
--- a/packages/website/unocss.config.ts
+++ b/packages/website/unocss.config.ts
@@ -2,8 +2,15 @@ import presetWebFonts from '@unocss/preset-web-fonts';
 import { defineConfig, presetUno } from 'unocss';
 
 export default defineConfig({
+	theme: {
+		colors: {
+			blurple: '#5865F2',
+		},
+	},
 	presets: [
-		presetUno({ dark: 'media' }),
+		presetUno({
+			dark: 'media',
+		}),
 		presetWebFonts({
 			provider: 'google',
 			fonts: {