diff --git a/src/components/nav.astro b/src/components/nav.astro
new file mode 100644
index 0000000..54713df
--- /dev/null
+++ b/src/components/nav.astro
@@ -0,0 +1,28 @@
+---
+
+---
+
+<!doctype html>
+<div class="nav">
+        <h1> sako </h1>
+	<a href="/home">home</a>
+	<a href="/blog">blog</a>
+	<a href="/services">services</a>
+</div>
+<style>
+ a {
+     color: white;
+ }
+ a:link {
+     text-decoration: none;
+ }
+ a:visited {
+     text-decoration: none;
+ }
+ a:hover {
+     text-decoration: none;
+ }
+ a:active {
+     text-decoration: none;
+ }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index e3ed69d..1b9cb91 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -23,6 +23,6 @@ const { title } = Astro.props;
 <style is:global>
 	html {
 		font-family: monospace;
-		background: #13151a;
+		background: #101010;
 	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index ccfddb4..c6a2bb4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,66 +1,36 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import Nav from '../components/nav.astro';
 ---
 
 <Layout title="sako.lol">
-	<main>
-	    <h1>heh... <span class="text-gradient"><i><b>skibidi</b></i></span></h1>
-	</main>
+    <main>
+	<div class="center">
+	    <!-- <div class="nav">
+		 <a href="/">home</a>
+		 <a href="blog">blog</a>
+		 <a href="services">services</a>
+		 </div> -->
+	    <Nav/>
+	    <div>
+    </main>
 </Layout>
 
 <style>
-	main {
-		margin: auto;
-		padding: 1rem;
-		color: white;
-		font-size: 20px;
-	    line-height: 1.6;
-	    text-align: center;
-	}
-	.astro-a {
-		position: absolute;
-		top: -32px;
-		left: 50%;
-		transform: translatex(-50%);
-		width: 220px;
-		height: auto;
-		z-index: -1;
-	}
-	h1 {
-		font-size: 4rem;
-		font-weight: 700;
-		line-height: 1;
-	    text-align: center;
-	}
-	.text-gradient {
-		background-image: var(--accent-gradient);
-		-webkit-background-clip: text;
-		-webkit-text-fill-color: transparent;
-		background-size: 400%;
-		background-position: 0%;
-	}
-	.instructions {
-		margin-bottom: 2rem;
-		border: 1px solid rgba(var(--accent-light), 25%);
-		background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
-		padding: 1.5rem;
-		border-radius: 8px;
-	}
-	.instructions code {
-		font-size: 0.8em;
-		font-weight: bold;
-		background: rgba(var(--accent-light), 12%);
-		color: rgb(var(--accent-light));
-		border-radius: 4px;
-		padding: 0.3em 0.4em;
-	}
-	.instructions strong {
-		color: rgb(var(--accent-light));
-	}
-	.link-card-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-		gap: 2rem;
-		padding: 0;
-	}
+ main {
+     margin: auto;
+     padding: 1rem;
+     color: white;
+     font-size: 20px;
+     line-height: 1.6;
+     text-align: center;
+ }
+ .center {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     text-align: center;
+     min-height: 95vh;
+ }
 </style>
