diff --git a/web/src/pages/copyright.astro b/web/src/pages/copyright.astro
index 1fbcdff..d53c0b2 100644
--- a/web/src/pages/copyright.astro
+++ b/web/src/pages/copyright.astro
@@ -4,11 +4,8 @@ import Sidebar from "src/components/sidebar.astro"
 ---
 
 <Base>
-	<div class="flex flex-row">
-		<Sidebar/>
-
-		<div class="content-panel">
-			<p class="text-xl">Copyright & License</p>
+    <div slot="content">
+        <p class="text-xl">Copyright & License</p>
 			
 			<p>© 2023-{new Date().getFullYear()} breadone.net. All Rights Reserved.</p>
 			
@@ -22,6 +19,5 @@ import Sidebar from "src/components/sidebar.astro"
 			<p>
 				For permission requests, please <a href="mailto:contact@breadone.net">email</a> me.
             </p>
-		</div>
-	</div>
+    </div>
 </Base>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index fad0762..383c7df 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,14 +1,13 @@
 ---
 import Base from "src/layout/Base.astro"
-import Sidebar from "src/components/sidebar.astro"
 ---
 
 <Base>
-	<div class="flex flex-row">
-		<Sidebar/>
+	<div slot="sidebar">
+		sidebar stuff
+	</div>
 
-		<div class="content-panel">
-			content
-		</div>
+	<div slot="content">
+		ya
 	</div>
 </Base>
diff --git a/web/src/pages/photos/index.astro b/web/src/pages/photos/index.astro
index d77821f..9e5b148 100644
--- a/web/src/pages/photos/index.astro
+++ b/web/src/pages/photos/index.astro
@@ -18,33 +18,31 @@ const getImageLink = async (record: RecordModel) => {
 ---
 
 <Base>
-    <div class="flex flex-row">
-        <Sidebar>
-            <p class="text-2xl">Photography :)</p>
-            Chuck me an email if you'd like a print of these, I'll see what I can do
-        </Sidebar>
-        
-        <div class="content-panel">
-            {
-                photos.map(photo => (
-                <div class="max-w-md  overflow-hidden md:max-w-2xl md:my-2">
-                    <div class="md:flex">
-                        <div class="md:shrink-0">
-                            <img class="h-full w-full object-cover md:h-full md:w-96" src={ pb.files.getURL(photo, photo.image, {'thumb': '1080x0'}) } alt={photo.alt}>
-                        </div>
-                        <div class="md:pl-4 md:mt-2 mb-8 mt-3">
-                            <div class="bold text-xl">{photo.title === "" ? "Untitled" : photo.title}</div>
-                            
-                            <div class="pt-2">
-                                <p>📌 {photo.location}</p>
-                                <p>📷 {photo.camera}</p>
-                            </div>
+    <div slot="sidebar">
+        <p class="text-2xl">Photography :)</p>
+        Chuck me an email if you'd like a print of these, I'll see what I can do
+    </div>
+    
+    <div slot="content">
+        {
+            photos.map(photo => (
+            <div class="max-w-md  overflow-hidden md:max-w-2xl md:my-2">
+                <div class="md:flex">
+                    <div class="md:shrink-0">
+                        <img class="h-full w-full object-cover md:h-full md:w-96" src={ pb.files.getURL(photo, photo.image, {'thumb': '1080x0'}) } alt={photo.alt}>
+                    </div>
+                    <div class="md:pl-4 md:mt-2 mb-8 mt-3">
+                        <div class="bold text-xl">{photo.title === "" ? "Untitled" : photo.title}</div>
+                        
+                        <div class="pt-2">
+                            <p>📌 {photo.location}</p>
+                            <p>📷 {photo.camera}</p>
                         </div>
                     </div>
                 </div>
-                ))
-            }
-            
-        </div>
+            </div>
+            ))
+        }
     </div>
+    
 </Base>
\ No newline at end of file