diff --git a/web/src/components/sidebar.astro b/web/src/components/sidebar.astro
new file mode 100644
index 0000000..9319049
--- /dev/null
+++ b/web/src/components/sidebar.astro
@@ -0,0 +1,12 @@
+---
+import Navbar from "src/components/index/navbar.astro"
+---
+
+<div class="w-[32%] text-center">
+    <div class="flex flex-col">
+        <p class="text-4xl">breadone dot net</p>
+        <Navbar/>
+        <div class="mt-8"/>
+        <slot/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index e6b0c93..c82bf81 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,20 +1,14 @@
 ---
 import Base from "src/layout/Base.astro"
-import Navbar from "src/components/index/navbar.astro"
+import Sidebar from "src/components/sidebar.astro"
 ---
 
 <Base>
 	<div class="flex flex-row">
 		<!-- HeaderSection -->
+		<Sidebar/>
 
-		<div class="w-[32%] text-center">
-			<div class="flex flex-col">
-				<p class="text-4xl">breadone dot net</p>
-				<Navbar/>
-			</div>
-		</div>
-
-		<div class="w-[68%]">
+		<div class="content-panel bg-amber-200">
 			content
 		</div>
 	</div>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index b485907..2f3b995 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -26,4 +26,8 @@
   }
 }
 
+.content-panel {
+  @apply w-[68%];
+}
+
 @tailwind utilities;
\ No newline at end of file