diff --git a/app/pages/about.vue b/app/pages/about.vue
index 738a02a..e3a8b6f 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="about-page">
+  <PageShell>
     <!-- ABOUT HERO (side by side) -->
     <div class="about-hero">
       <div class="about-hero-left">
@@ -31,7 +31,7 @@
     </div>
 
     <!-- CONTENT AREA WITH EVENTS SIDEBAR -->
-    <SidebarLayout>
+    <ColumnsLayout cols="events-sidebar" :limit="3">
       <!-- THE CIRCLES -->
       <div class="about-section" id="circles">
         <div class="section-label">The Circles</div>
@@ -111,21 +111,13 @@
           >
         </p>
       </div>
-    </SidebarLayout>
-  </div>
+    </ColumnsLayout>
+  </PageShell>
 </template>
 
 <script setup></script>
 
 <style scoped>
-/* Flex chain from layout .main-body: hero + grid grow so sidebar column matches main height */
-.about-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
 /* ---- ABOUT HERO ---- */
 .about-hero {
   display: grid;