diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 4c5b57b..16dfa71 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -38,6 +38,9 @@
   --green: #4a6a38;
   --green-bg: rgba(74, 106, 56, 0.08);
   --ember-bg: rgba(138, 68, 32, 0.1);
+  --page-pad-x: 28px;
+  --page-pad-y: 24px;
+  --page-collapse: 1024px;
 }
 
 .dark {
@@ -65,6 +68,9 @@
   --green: #6e9c52;
   --green-bg: rgba(110, 156, 82, 0.12);
   --ember-bg: rgba(202, 106, 58, 0.14);
+  --page-pad-x: 28px;
+  --page-pad-y: 24px;
+  --page-collapse: 1024px;
 }
 
 /* ---- TAILWIND @THEME MAPPING ---- */
diff --git a/app/components/ColumnsLayout.vue b/app/components/ColumnsLayout.vue
new file mode 100644
index 0000000..b0fa072
--- /dev/null
+++ b/app/components/ColumnsLayout.vue
@@ -0,0 +1,98 @@
+<template>
+  <div
+    class="columns-layout"
+    :class="[`columns-${cols}`, `divider-${divider}`, `collapse-${collapse}`]"
+  >
+    <template v-if="cols === 'events-sidebar'">
+      <div class="col col-main">
+        <slot />
+      </div>
+      <EventsMiniSidebar :events="upcomingEvents" />
+    </template>
+    <template v-else>
+      <!-- cols="2": named slots only. Use <template #left> and <template #right>. -->
+      <div class="col col-left">
+        <slot name="left" />
+      </div>
+      <div class="col col-right">
+        <slot name="right" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  cols: { type: String, default: '2' }, // "2" | "events-sidebar"
+  divider: { type: String, default: 'dashed' }, // "dashed" | "none"
+  collapse: { type: String, default: '1024' }, // "1024" | "768"
+  limit: { type: Number, default: 3 },
+})
+
+const upcomingEvents = ref([])
+if (props.cols === 'events-sidebar') {
+  const { data } = await useFetch('/api/events', {
+    query: { upcoming: true, limit: props.limit },
+    default: () => [],
+  })
+  upcomingEvents.value = data.value || []
+}
+</script>
+
+<style scoped>
+.columns-layout {
+  display: grid;
+  align-items: stretch;
+}
+
+/* cols="2" */
+.columns-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+/* cols="events-sidebar" */
+.columns-events-sidebar {
+  grid-template-columns: 1fr 200px;
+}
+
+/* Ensure grid children don't overflow */
+.col {
+  min-width: 0;
+}
+
+/* Dashed divider: right border on the first column child */
+.divider-dashed .col:first-child,
+.divider-dashed .col-main {
+  border-right: 1px dashed var(--border);
+}
+
+/* Responsive collapse at 1024px (default) */
+.collapse-1024 {
+  --col-collapse: 1024px;
+}
+
+/* Responsive collapse at 768px */
+.collapse-768 {
+  --col-collapse: 768px;
+}
+
+@media (max-width: 1024px) {
+  .collapse-1024 {
+    grid-template-columns: 1fr;
+  }
+  .collapse-1024 .col:first-child,
+  .collapse-1024 .col-main {
+    border-right: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .collapse-768 {
+    grid-template-columns: 1fr;
+  }
+  .collapse-768 .col:first-child,
+  .collapse-768 .col-main {
+    border-right: none;
+  }
+}
+</style>
diff --git a/app/components/PageHeader.vue b/app/components/PageHeader.vue
index 0547c4a..4c162fc 100644
--- a/app/components/PageHeader.vue
+++ b/app/components/PageHeader.vue
@@ -15,7 +15,7 @@ defineProps({
 
 <style scoped>
 .page-header {
-  padding: 24px 28px 16px;
+  padding: var(--page-pad-y) var(--page-pad-x) 16px;
   border-bottom: 1px dashed var(--border);
 }
 .page-header h1 {
diff --git a/app/components/PageSection.vue b/app/components/PageSection.vue
new file mode 100644
index 0000000..82c85de
--- /dev/null
+++ b/app/components/PageSection.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="page-section" :class="`divider-${divider}`">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  divider: { type: String, default: 'none' }, // "top" | "bottom" | "none"
+})
+</script>
+
+<style scoped>
+.page-section {
+  padding: var(--page-pad-x) var(--page-pad-x);
+}
+.page-section.divider-top {
+  border-top: 1px dashed var(--border);
+}
+.page-section.divider-bottom {
+  border-bottom: 1px dashed var(--border);
+}
+</style>
diff --git a/app/components/PageShell.vue b/app/components/PageShell.vue
new file mode 100644
index 0000000..e76a2a4
--- /dev/null
+++ b/app/components/PageShell.vue
@@ -0,0 +1,24 @@
+<template>
+  <component :is="as" class="page-shell">
+    <PageHeader v-if="title" :title="title" :subtitle="subtitle" />
+    <slot />
+  </component>
+</template>
+
+<script setup>
+defineProps({
+  title: { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  as: { type: String, default: 'div' },
+})
+</script>
+
+<style scoped>
+.page-shell {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+}
+</style>
diff --git a/app/components/SidebarLayout.vue b/app/components/SidebarLayout.vue
index 62f3de7..dbae39c 100644
--- a/app/components/SidebarLayout.vue
+++ b/app/components/SidebarLayout.vue
@@ -41,6 +41,3 @@ const { data: upcomingEvents } = await useFetch('/api/events', {
   }
 }
 </style>
-```
-
-Now let me apply this to each page. Let me update all four in parallel:
diff --git a/app/pages/series/index.vue b/app/pages/series/index.vue
index 8e2d00b..521db6e 100644
--- a/app/pages/series/index.vue
+++ b/app/pages/series/index.vue
@@ -4,7 +4,6 @@
     <PageHeader
       title="Event Series"
       subtitle="Discover our multi-event series designed to take you on a journey of learning and growth"
-      size="large"
     />
 
     <!-- Series Grid -->
diff --git a/app/pages/welcome.vue b/app/pages/welcome.vue
index c7ad4fe..f617592 100644
--- a/app/pages/welcome.vue
+++ b/app/pages/welcome.vue
@@ -3,7 +3,6 @@
     <PageHeader
       title="Welcome to Ghost Guild"
       subtitle="You're officially part of the community!"
-      size="large"
     />
 
     <section class="py-16 bg-guild-900">