diff --git a/src/components/nav.astro b/src/components/nav.astro
index 54713df..06b4862 100644
--- a/src/components/nav.astro
+++ b/src/components/nav.astro
@@ -10,6 +10,9 @@
 	<a href="/services">services</a>
 </div>
 <style>
+ .nav {
+     color: white;
+ }
  a {
      color: white;
  }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 1b9cb91..212a701 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -23,6 +23,7 @@ const { title } = Astro.props;
 <style is:global>
 	html {
 		font-family: monospace;
-		background: #101010;
+	    background: #101010;
+	    color: white;
 	}
 </style>
diff --git a/src/pages/home.astro b/src/pages/home.astro
new file mode 100644
index 0000000..1bd1900
--- /dev/null
+++ b/src/pages/home.astro
@@ -0,0 +1,30 @@
+---
+import Nav from "../components/nav.astro";
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="sako.lol - home">
+    <div class="top">
+	<Nav/>
+    </div>
+    <div class="content">
+	<h1>placeholder</h1>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> yap yap yap </p>
+	<p> todo make this extend to the bottom regardless if theres nothing</p>
+    </div>
+</Layout>
+<style>
+ .top {
+     text-align: center;
+     align-items: center;
+ }
+ .content {
+     background-color: #222222;
+     margin: auto;
+     max-width: 90vw;
+ }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c6a2bb4..9db4de6 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,11 +6,6 @@ import Nav from '../components/nav.astro';
 <Layout title="sako.lol">
     <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>