diff --git a/src/components/content.astro b/src/components/content.astro
new file mode 100644
index 0000000..a5c6c03
--- /dev/null
+++ b/src/components/content.astro
@@ -0,0 +1,21 @@
+---
+import Footer from "../components/footer.astro";
+---
+
+<!doctype html>
+<div class="content">
+    <slot />
+</div>
+<Footer/>
+
+<style>
+ .content {
+     background-color: #222222;
+     margin: auto;
+     max-width: 90vw;
+     min-height: 80vh;
+     padding-left: 1vw;
+     padding-right: 1vw;
+     padding-top: 0.1vh;
+ }
+</style>
diff --git a/src/pages/home.astro b/src/pages/home.astro
index e9260d9..70373a4 100644
--- a/src/pages/home.astro
+++ b/src/pages/home.astro
@@ -1,36 +1,21 @@
 ---
 import Nav from "../components/nav.astro";
-import Footer from "../components/footer.astro"
 import Layout from "../layouts/Layout.astro";
+import Content from "../components/content.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> todo make this extend to the bottom regardless if theres nothing</p>
-    </div>
-    <Footer/>
+    <Content>
+	<h1> hi i am a component </h1>
+	<p> (i'm still too lazy to do this) </p>
+    </Content>
 </Layout>
 <style>
  .top {
      text-align: center;
      align-items: center;
  }
- .content {
-     background-color: #222222;
-     margin: auto;
-     max-width: 90vw;
-     min-height: 80vh;
-     padding-left: 1vw;
-     padding-right: 1vw;
-     padding-top: 0.1vh;
- }
- 
 </style>
