diff --git a/app/pages/about.vue b/app/pages/about.vue
index a9222b2..fa48bf9 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,148 +1,219 @@
 <template>
   <div>
-    <!-- Page Header -->
-    <PageHeader
-      title="About Ghost Guild"
-      subtitle=""
-      size="large"
-    />
+    <!-- ABOUT HERO (side by side) -->
+    <div class="about-hero">
+      <div class="about-hero-left">
+        <h1>About Ghost Guild</h1>
+        <p>A membership community for game developers exploring cooperative business models.</p>
+      </div>
+      <div class="about-hero-right">
+        <div class="section-label">Our Story</div>
+        <p>Ghost Guild grew out of Baby Ghosts, a Canadian nonprofit that's been supporting indie game developers since 2018. We noticed a gap: game developers interested in cooperative models had nowhere to learn, practice, and connect with others doing the same work.</p>
+        <p>Ghost Guild is the response &mdash; a membership program where developers at every stage of cooperative practice can find resources, events, mentorship, and community.</p>
+        <p>We don't prescribe a single model. We're a place to explore the options, learn from people who've tried them, and build something that works for your team.</p>
+      </div>
+    </div>
 
-    <!-- Main Content -->
-    <section class="py-20 bg-[--ui-bg]">
-      <UContainer>
-        <div class="max-w-3xl prose prose-lg dark:prose-invert">
-          <!-- directives:[] -->
-          <div id="content">
-            <p>
-              Ghost Guild is a community of learning and practice for anyone,
-              anywhere interested in a video game industry-wide shift to
-              worker-owned studio models.
-            </p>
-            <p>
-              We reject hierarchy wherever it shows up. Ghost Guild is
-              tier-less, but peer-full.
-            </p>
-            <h2 id="our-story">Our Story</h2>
-            <p>
-              Ghost Guild is the membership program of Baby Ghosts, a Canadian
-              nonprofit that provides resources and support for worker-owned
-              game studios.
-            </p>
-            <p>
-              For three years, Baby Ghosts has run the Peer Accelerator - an
-              intensive program pairing early-stage studios with mentorship,
-              peer learning, and grants. Twenty-five studios have graduated. The
-              model works! Peer learning builds stronger foundations than
-              top-down advice ever could.
-            </p>
-            <p>
-              But not everyone can commit to a six-month cohort. Some folks are
-              still exploring. Others are already running established
-              cooperatives and want to give back. Many are scattered across the
-              world and just need to know they're not alone in wanting to build
-              something different.
-            </p>
-            <p><em>Ghost Guild is how we open the doors wider.</em></p>
-            <p>
-              As we build our knowledge commons, more folks can benefit from
-              collectively compiled wisdom and find community - whether or not
-              they ever apply to the Peer Accelerator. The intensive program
-              continues. Ghost Guild expands access to everything around it.
-            </p>
-            <h2 id="the-circles">The Circles</h2>
-            <p>
-              We've loosely named some circles you can join. This is not to rank
-              you, but to connect you with folks at a similar stage and with
-              resources that fit where you are right now.
-            </p>
-            <p>
-              No circle is superior. There's no shame in sticking with one for a
-              while, or moving between them to find the best fit.
-            </p>
-            <p>
-              The Community Circle is for individuals exploring cooperative
-              principles. Whether you're working in the industry or in academia,
-              you'll get access to the knowledge commons, workshops, resources,
-              guides, community Slack and peer support, and social events and
-              networking.
-            </p>
-            <p>
-              The Founder Circle is for those actively building a worker-owned
-              studio. You'll have access to everything within the platform, just
-              like any other member, but you might be particularly interested in
-              peer matching with studios at similar stages and Peer Accelerator
-              alumni, and templates for governance, financial modelling, and
-              decision-making.
-            </p>
-            <p>
-              The Practitioner Circle is for Peer Accelerator alumni and
-              experienced cooperative studio leaders. You'll hopefully find
-              yourself providing paid support to other members, as well as
-              engaging in collaborative research opportunities with academic
-              partners, connecting to other coops for business development, and
-              helping build a platform for changing industry practices.
-            </p>
-            <h2 id="how-contribution-works">How Contribution Works</h2>
-            <p>
-              Choosing your financial contribution is also not about paying for
-              access. Everything is available to every member, no matter their
-              circle or contribution level.
-            </p>
-            <p>
-              Rather, it's about finding a dues level that's meaningful to you
-              without being a burden.
-            </p>
-            <p>
-              The knowledge commons is open to all Ghosties. Your contribution
-              sustains a community you believe in.
-            </p>
-            <p>
-              If dues are a barrier, that's okay. Members who are able to
-              contribute more can direct additional funds to the Solidarity
-              Fund, which covers dues for those who need support.
-            </p>
-            <h2 id="community">Community</h2>
-            <p>
-              When you join Ghost Guild, you join a community of Ghosties -
-              folks at every stage of the journey, learning from each other.
-            </p>
-            <p>
-              Our Slack community is built with care. New members are welcomed
-              thoughtfully, channels are structured to help you find your
-              people, and we grow at a pace that protects what makes this space
-              special.
-            </p>
-            <p>
-              This is a cascading mentorship structure where everyone is both
-              learning and teaching. Practitioners mentor Founders. Founders
-              mentor Community members. And Community members bring fresh
-              perspectives that keep everyone honest.
-            </p>
-            <p>Welcome, Ghostie! 👻</p>
+    <!-- CONTENT AREA WITH EVENTS SIDEBAR -->
+    <div class="content-area">
+      <div class="content-main">
+
+        <!-- THE CIRCLES -->
+        <div class="about-section" id="circles">
+          <div class="section-label">The Circles</div>
+          <div class="circles-grid">
+            <div id="community" class="circle-cell">
+              <h3 style="color: var(--c-community);">Community</h3>
+              <div class="circle-subtitle">"The open hall"</div>
+              <p>For anyone exploring cooperative models. Wiki access, public events, Slack community, monthly meetings.</p>
+            </div>
+            <div id="founder" class="circle-cell">
+              <h3 style="color: var(--c-founder);">Founder</h3>
+              <div class="circle-subtitle">"The workshop"</div>
+              <p>For people actively building cooperatives. Peer accelerator, mentorship, governance templates.</p>
+            </div>
+            <div id="practitioner" class="circle-cell">
+              <h3 style="color: var(--c-practitioner);">Practitioner</h3>
+              <div class="circle-subtitle">"The alcove"</div>
+              <p>For experienced practitioners. Mentoring, teaching, shaping the program direction.</p>
+            </div>
           </div>
         </div>
-      </UContainer>
-    </section>
 
-    <!-- Link to Membership Circles -->
-    <section class="py-20 bg-[--ui-bg-elevated]">
-      <UContainer>
-        <div class="max-w-3xl">
-          <h2 class="text-display-sm font-bold text-[--ui-text] mb-4">
-            Membership Circles
-          </h2>
-          <p class="text-lg text-[--ui-text-muted] mb-6">
-            Learn about our three membership circles and find where you fit.
-          </p>
-          <UButton to="/about/circles" variant="outline" size="lg">
-            Explore Membership Circles
-          </UButton>
+        <!-- HOW CONTRIBUTION WORKS -->
+        <div class="about-section">
+          <div class="section-label">How Contribution Works</div>
+          <p>Membership is $0&ndash;50/month, pay what you can. Nobody is excluded for lack of funds. Your contribution supports infrastructure, events, and community resources.</p>
+          <ul class="tier-list">
+            <li><span class="tier-amt">$0</span> I need support right now</li>
+            <li><span class="tier-amt">$5</span> I can contribute</li>
+            <li><span class="tier-amt">$15</span> I can sustain the community</li>
+            <li><span class="tier-amt">$30</span> I can support others too</li>
+            <li><span class="tier-amt">$50</span> I want to sponsor multiple members</li>
+          </ul>
         </div>
-      </UContainer>
-    </section>
+
+        <!-- COMMUNITY -->
+        <div class="about-section">
+          <div class="section-label">Community</div>
+          <p>We gather in Slack, at monthly meetings, and through peer support sessions. The wiki is our shared knowledge base &mdash; growing as members contribute. Events range from workshops to social hangs to deep-dive series.</p>
+          <NuxtLink to="/join" class="cta">Join the Guild &rarr;</NuxtLink>
+        </div>
+
+        <!-- ABOUT BABY GHOSTS -->
+        <div class="about-section">
+          <div class="section-label">About Baby Ghosts</div>
+          <p>Ghost Guild is a program of Baby Ghosts, a Canadian nonprofit advancing cooperative models in game development. No tracking. No ads. No venture capital.</p>
+          <p><a href="https://babyghosts.fund" target="_blank">babyghosts.fund &rarr;</a></p>
+        </div>
+      </div>
+
+      <!-- EVENTS MINI SIDEBAR -->
+      <EventsMiniSidebar :events="upcomingEvents" />
+    </div>
   </div>
 </template>
 
 <script setup>
-// No specific logic needed for the about page at this time
+const { data: upcomingEvents } = await useFetch('/api/events', {
+  query: { limit: 3, upcoming: true },
+  default: () => [],
+})
 </script>
+
+<style scoped>
+/* ---- ABOUT HERO ---- */
+.about-hero {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  border-bottom: 1px dashed var(--border);
+}
+.about-hero-left {
+  padding: 32px 32px 28px;
+  border-right: 1px dashed var(--border);
+}
+.about-hero-left h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  margin-bottom: 12px;
+}
+.about-hero-left p {
+  color: var(--text-dim);
+  line-height: 1.7;
+  font-size: 13px;
+}
+.about-hero-right {
+  padding: 32px;
+}
+.about-hero-right p {
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.7;
+  margin-bottom: 10px;
+}
+
+/* ---- CONTENT AREA ---- */
+.content-area {
+  display: grid;
+  grid-template-columns: 1fr 200px;
+}
+.content-main {
+  padding: 0;
+  min-width: 0;
+}
+
+/* ---- SECTIONS ---- */
+.about-section {
+  padding: 28px 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.about-section > p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 8px;
+  max-width: 560px;
+}
+.cta {
+  display: inline-block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--candle);
+}
+
+/* ---- CIRCLES GRID ---- */
+.circles-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0;
+  border: 1px dashed var(--border);
+}
+.circle-cell {
+  padding: 20px;
+  border-right: 1px dashed var(--border);
+}
+.circle-cell:last-child { border-right: none; }
+.circle-cell h3 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 2px;
+}
+.circle-subtitle {
+  font-style: italic;
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 8px;
+}
+.circle-cell p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.65;
+}
+
+/* ---- TIER LIST ---- */
+.tier-list {
+  list-style: none;
+  padding: 0;
+}
+.tier-list li {
+  padding: 5px 0;
+  font-size: 12px;
+  color: var(--text-dim);
+  border-bottom: 1px dashed var(--border);
+  display: flex;
+  gap: 12px;
+}
+.tier-list li:last-child { border-bottom: none; }
+.tier-amt {
+  color: var(--text-bright);
+  font-weight: 600;
+  min-width: 36px;
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 1024px) {
+  .content-area { grid-template-columns: 1fr; }
+  .circles-grid { grid-template-columns: 1fr; }
+  .circle-cell {
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+  }
+  .circle-cell:last-child { border-bottom: none; }
+}
+@media (max-width: 768px) {
+  .about-hero {
+    grid-template-columns: 1fr;
+  }
+  .about-hero-left {
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+  }
+}
+</style>
diff --git a/app/pages/about/circles.vue b/app/pages/about/circles.vue
index 710fec1..c597e5c 100644
--- a/app/pages/about/circles.vue
+++ b/app/pages/about/circles.vue
@@ -1,212 +1,4 @@
-<template>
-  <div>
-    <!-- Page Header -->
-    <PageHeader
-      title="About Our Membership Circles"
-      subtitle="All members of Ghost Guild share the Baby Ghosts mission: Advancing cooperative and worker-centric labour models in the Canadian interactive digital arts sector."
-      size="large"
-    />
-
-    <!-- How Ghost Guild Works -->
-    <section class="py-20 bg-[--ui-bg]">
-      <UContainer>
-        <div class="max-w-4xl mx-auto">
-          <h2 class="text-display font-bold text-[--ui-text] mb-6">
-            How membership works
-          </h2>
-
-          <div class="prose prose-lg dark:prose-invert max-w-none">
-            <p class="text-xl font-semibold text-[--ui-text] mb-6">
-              Everyone gets everything. Your circle reflects where you are in
-              your cooperative journey. Your financial contribution reflects
-              what you can afford. These are completely separate choices.
-            </p>
-
-            <ul
-              class="list-disc pl-6 text-lg leading-relaxed text-[--ui-text-muted] space-y-3 mb-12"
-            >
-              <li>
-                The entire knowledge commons, all events, and full community
-                participation on our private Slack
-              </li>
-              <li>One member, one vote in all decisions</li>
-              <li>Pay what you can ($0-50+/month)</li>
-              <li>Contribute your skills, time, and knowledge</li>
-            </ul>
-          </div>
-        </div>
-      </UContainer>
-    </section>
-
-    <!-- Find Your Circle -->
-    <section class="py-20 bg-[--ui-bg-elevated]">
-      <UContainer>
-        <div class="max-w-4xl mx-auto">
-          <h2 class="text-display font-bold text-[--ui-text] mb-4">
-            Find your circle
-          </h2>
-          <p class="text-lg text-[--ui-text-muted] mb-12">
-            Circles help us provide relevant guidance and connect you with
-            others at similar stages. Choose based on where you are now!
-          </p>
-
-          <div class="space-y-12">
-            <!-- Community Circle -->
-            <div class="circle-surface-community rounded-xl p-6">
-              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
-                Community Circle
-              </h3>
-
-              <div
-                class="prose prose-lg dark:prose-invert max-w-none text-[--ui-text-muted]"
-              >
-                <p>
-                  Maybe you've heard rumours about cooperatives in game dev and
-                  you're curious. Or you're frustrated with traditional studio
-                  hierarchies and wondering if there's another way. This circle
-                  is for anyone exploring whether cooperative principles might
-                  fit their work.
-                </p>
-
-                <p>
-                  This space is for you if you're: an individual game worker
-                  dreaming of different possibilities • a researcher digging
-                  into the rise of alternative studio models • an industry ally
-                  who wants to support cooperative work • <em>anyone</em> who's
-                  co-op-curious!
-                </p>
-
-                <p>
-                  Our resources and community space will help you understand
-                  cooperative basics, connect with others asking the same
-                  questions, and give you a look at real examples from game
-                  studios. You don't need to have a studio or project of your
-                  own - just join and see what strikes your fancy!
-                </p>
-              </div>
-            </div>
-
-            <!-- Founder Circle -->
-            <div class="circle-surface-founder rounded-xl p-6">
-              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
-                Founder Circle
-              </h3>
-
-              <div
-                class="prose prose-lg dark:prose-invert max-w-none text-[--ui-text-muted]"
-              >
-                <p>
-                  You're way past wondering about "what if" and into "how do we
-                  actually do this?" Perhaps you're forming a new cooperative
-                  studio from scratch, or converting an existing team to a co-op
-                  structure, or working through the messy reality of turning
-                  values into sustainable practice.
-                </p>
-
-                <p>
-                  This is the space for the practical stuff: governance
-                  documents you can read and adapt, financial models for
-                  cooperative studios, connections with other founders
-                  navigating similar challenges.
-                </p>
-
-                <p>
-                  We have two paths through this circle that we will be
-                  launching soon:
-                </p>
-
-                <ul>
-                  <li>
-                    Peer Accelerator Prep Track <em>(coming soon)</em> –
-                    Structured preparation if you're planning to apply for the
-                    PA program
-                  </li>
-                  <li>
-                    Indie Track <em>(coming soon)</em> – Flexible, self-paced
-                    support for teams building at their own pace
-                  </li>
-                </ul>
-
-                <p>
-                  Join us to figure out how you can balance your values with
-                  keeping the lights on - whether you're a full founding team, a
-                  solo founder exploring structures, or an existing studio in
-                  transition.
-                </p>
-              </div>
-            </div>
-
-            <!-- Practitioner Circle -->
-            <div class="circle-surface-practitioner rounded-xl p-6">
-              <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
-                Practitioner Circle
-              </h3>
-
-              <div
-                class="prose prose-lg dark:prose-invert max-w-none text-[--ui-text-muted]"
-              >
-                <p>
-                  You've done it. You're actually running a
-                  cooperative/worker-centric studio or you've been through our
-                  Peer Accelerator. Now you're figuring out how to sustain it,
-                  improve it, and maybe help others learn from what
-                  <em>you've</em> learned.
-                </p>
-
-                <p>
-                  This circle is for: Peer Accelerator alumni • members of
-                  established co-ops • mentors who want to support other
-                  cooperatives • researchers studying cooperative models in
-                  practice
-                </p>
-
-                <p>
-                  Here, we create space for practitioners to share what's
-                  actually working (and what isn't), support emerging
-                  cooperatives, collaborate across studios, and contribute to
-                  building a knowledge commons.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </UContainer>
-    </section>
-
-    <!-- Important Notes -->
-    <section class="py-20 bg-[--ui-bg]">
-      <UContainer>
-        <div class="max-w-4xl mx-auto">
-          <h2 class="text-display font-bold text-[--ui-text] mb-8">
-            Important Notes
-          </h2>
-
-          <div class="space-y-6 text-lg text-[--ui-text-muted]">
-            <p>
-              <strong>Movement between circles is fluid.</strong> As you move
-              along in your journey, you can shift circles anytime. Just let us
-              know.
-            </p>
-
-            <p>
-              <strong>Your contribution is separate from your circle.</strong>
-              Whether you contribute $0 or $50+/month, you get full access to
-              everything. Choose based on your financial capacity, not your
-              circle.
-            </p>
-
-            <p>
-              <strong>Not sure which circle?</strong> Start with Community - you
-              can always move. Or email us and we'll chat about what makes sense
-              for you.
-            </p>
-          </div>
-        </div>
-      </UContainer>
-    </section>
-  </div>
-</template>
-
 <script setup>
-// No specific logic needed for the circles page at this time
+// Circles content has moved to the About page
+navigateTo('/about#circles', { redirectCode: 301 })
 </script>
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index b298c5a..b490639 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -1,931 +1,511 @@
 <template>
-  <div
-    v-if="pending"
-    class="min-h-screen bg-guild-900 flex items-center justify-center"
-  >
-    <div class="text-center">
-      <div
-        class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"
-      ></div>
-      <p class="text-guild-200">Loading event details...</p>
-    </div>
-  </div>
+  <div v-if="pending" class="loading">Loading event details...</div>
 
-  <div
-    v-else-if="error"
-    class="min-h-screen bg-guild-900 flex items-center justify-center"
-  >
-    <div class="text-center">
-      <h2 class="text-2xl font-bold text-guild-100 mb-2">Event Not Found</h2>
-      <p class="text-guild-300 mb-6">
-        The event you're looking for doesn't exist.
-      </p>
-      <NuxtLink to="/events" class="text-candlelight-500 hover:underline">
-        ← Back to Events
-      </NuxtLink>
-    </div>
+  <div v-else-if="error" class="loading">
+    <h2>Event Not Found</h2>
+    <p>The event you're looking for doesn't exist.</p>
+    <NuxtLink to="/events">&larr; Back to Events</NuxtLink>
   </div>
 
   <div v-else>
-    <!-- Feature Image Header -->
-    <div
-      v-if="
-        event.featureImage &&
-        (event.featureImage.publicId || event.featureImage.url)
-      "
-      class="relative h-96 overflow-hidden"
-    >
-      <!-- Members Only Banner -->
-      <div
-        v-if="event.membersOnly"
-        class="absolute top-0 left-0 right-0 z-10 bg-candlelight-500/95 backdrop-blur-sm py-2"
-      >
-        <UContainer>
-          <div class="flex items-center justify-center">
-            <span class="text-sm font-medium text-white">
-              Members Only Event - Open to all circles and contribution levels
-            </span>
-          </div>
-        </UContainer>
-      </div>
+    <!-- BACK LINK -->
+    <div class="back-link">
+      <NuxtLink to="/events">&larr; Back to Events</NuxtLink>
+    </div>
 
-      <img
-        :src="getImageUrl(event.featureImage)"
-        :alt="event.featureImage.alt || event.title"
-        class="w-full h-full object-cover"
-        @error="handleImageError"
-      />
-      <div
-        class="absolute inset-0"
-        style="background-color: rgba(0, 0, 0, 0.4)"
-      ></div>
-      <div class="absolute inset-0 flex items-center">
-        <UContainer>
-          <div class="max-w-4xl">
-            <h1 class="text-display-xl font-bold text-white mb-4">
-              {{ event.title }}
-            </h1>
-          </div>
-        </UContainer>
+    <!-- EVENT HEADER -->
+    <div class="event-header">
+      <h1>{{ event.title }}</h1>
+      <div class="event-meta-row">
+        <div class="event-meta-item">
+          <span class="meta-label">Date</span>
+          {{ formatDate(event.startDate) }}
+        </div>
+        <div class="event-meta-item">
+          <span class="meta-label">Time</span>
+          {{ formatTime(event.startDate, event.endDate) }}
+        </div>
+        <div class="event-meta-item">
+          <span class="meta-label">Location</span>
+          {{ event.location }}
+        </div>
+        <div v-if="event.circle" class="event-meta-item">
+          <CircleBadge :circle="event.circle" />
+        </div>
+        <div v-if="event.maxAttendees" class="event-meta-item">
+          <span class="meta-label">Capacity</span>
+          {{ event.registeredCount || 0 }}/{{ event.maxAttendees }} seats
+        </div>
       </div>
     </div>
 
-    <!-- Page Header (fallback when no image) -->
-    <PageHeader v-else :title="event.title" size="medium" />
+    <!-- CANCELLED NOTICE -->
+    <div v-if="event.isCancelled" class="cancelled-notice">
+      <strong>Event Cancelled</strong>
+      <p v-if="event.cancellationMessage">{{ event.cancellationMessage }}</p>
+      <p v-else>This event has been cancelled. We apologize for any inconvenience.</p>
+    </div>
 
-    <!-- Event Details Section -->
-    <section class="py-16 bg-guild-900">
-      <UContainer>
-        <div class="max-w-4xl mx-auto">
-          <!-- Event Meta Info -->
-          <div class="mb-8">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-              <div>
-                <p class="text-ui-label text-guild-400">Date</p>
-                <p class="text-ui-mono font-semibold text-guild-100">
-                  {{ formatDate(event.startDate) }}
-                </p>
-              </div>
-
-              <div>
-                <p class="text-ui-label text-guild-400">Time</p>
-                <p class="text-ui-mono font-semibold text-guild-100">
-                  {{ formatTime(event.startDate, event.endDate) }}
-                </p>
-              </div>
-
-              <div>
-                <p class="text-ui-label text-guild-400">Location</p>
-                <p class="font-semibold text-guild-100">
-                  {{ event.location }}
-                </p>
-              </div>
-
-              <div>
-                <p class="text-sm text-guild-400">Calendar</p>
-                <UButton
-                  :href="`/api/events/${route.params.id}/calendar`"
-                  download
-                  variant="outline"
-                  size="sm"
-                  class="mt-1"
-                  icon="i-heroicons-calendar-days"
-                >
-                  Add to Calendar
-                </UButton>
-              </div>
-            </div>
-          </div>
-
-          <!-- Event Cancelled Notice -->
-          <div v-if="event.isCancelled" class="mb-8">
-            <div class="p-6 bg-ember-900/20 rounded-xl border border-ember-800">
-              <h3 class="text-lg font-semibold text-ember-300 mb-2">
-                Event Cancelled
-              </h3>
-              <p class="text-ember-400" v-if="event.cancellationMessage">
-                {{ event.cancellationMessage }}
-              </p>
-              <p class="text-ember-400" v-else>
-                This event has been cancelled. We apologize for any
-                inconvenience.
-              </p>
-            </div>
-          </div>
-
-          <!-- Series Badge -->
-          <div v-if="event.series?.isSeriesEvent" class="mb-8">
-            <EventSeriesBadge
-              :title="event.series.title"
-              :position="event.series.position"
-              :total-events="event.series.totalEvents"
-              :series-id="event.series.id"
-            />
-          </div>
-
-          <!-- Target Circles -->
-          <div
-            v-if="event.targetCircles && event.targetCircles.length > 0"
-            class="mb-8"
-          >
-            <div class="flex items-center space-x-2">
-              <span
-                class="text-sm font-medium text-guild-200"
-                >Recommended for:</span
-              >
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="circle in event.targetCircles"
-                  :key="circle"
-                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-candlelight-900/20 dark:bg-candlelight-900/30 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700 dark:border-candlelight-800/50"
-                >
-                  {{ formatCircleName(circle) }}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Event Description -->
-          <div class="prose prose-lg dark:prose-invert max-w-none mb-12">
-            <h2 class="text-display-sm font-bold text-guild-100 mb-4">
-              About This Event
-            </h2>
-
-            <!-- Series Description -->
-            <div
-              v-if="event.series?.isSeriesEvent && event.series.description"
-              class="event-series-description mb-6 p-4 bg-guild-800/30 dark:bg-guild-700/20 rounded-lg border border-guild-600 dark:border-guild-600"
-            >
-              <h3
-                class="event-series-description__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
-              >
-                About the {{ event.series.title }} Series
-              </h3>
-              <p class="event-series-description__text text-guild-200">
-                {{ event.series.description }}
-              </p>
-            </div>
-
-            <p class="text-guild-200">
-              {{ event.description }}
-            </p>
-
-            <div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
-              <h3 class="text-display-sm font-semibold text-guild-100 mb-4">
-                Event Agenda
-              </h3>
-              <ul class="space-y-3">
-                <li
-                  v-for="(item, index) in event.agenda"
-                  :key="index"
-                  class="flex items-start"
-                >
-                  <span
-                    class="inline-block w-6 h-6 bg-candlelight-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5"
-                  >
-                    {{ index + 1 }}
-                  </span>
-                  <span class="text-guild-200">{{ item }}</span>
-                </li>
-              </ul>
-            </div>
-
-            <div
-              v-if="event.speakers && event.speakers.length > 0"
-              class="mt-8"
-            >
-              <h3 class="text-display-sm font-semibold text-guild-100 mb-4">
-                Speakers
-              </h3>
-              <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div
-                  v-for="speaker in event.speakers"
-                  :key="speaker.name"
-                  class="flex items-start space-x-4"
-                >
-                  <div>
-                    <p class="font-semibold text-guild-100">
-                      {{ speaker.name }}
-                    </p>
-                    <p class="text-sm text-guild-300">
-                      {{ speaker.role }}
-                    </p>
-                    <p class="text-sm text-guild-400 mt-1">
-                      {{ speaker.bio }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Registration Section -->
-          <div v-if="!event.isCancelled">
-            <!-- Use new ticket system if tickets are enabled -->
-            <EventTicketPurchase
-              v-if="event.tickets?.enabled"
-              :event-id="event._id || event.id"
-              :event-start-date="event.startDate"
-              :event-title="event.title"
-              :user-email="memberData?.email"
-              @success="handleTicketSuccess"
-              @error="handleTicketError"
-            />
-
-            <!-- Legacy registration system (for events without tickets enabled) -->
-            <div v-else>
-              <!-- Already Registered Status -->
-              <div v-if="registrationStatus === 'registered'">
-                <div
-                  class="p-4 bg-candlelight-900/20 dark:bg-candlelight-900/20 rounded-lg border border-candlelight-700 dark:border-candlelight-800 mb-6"
-                >
-                  <div
-                    class="flex flex-col md:flex-row md:items-start md:justify-between gap-4"
-                  >
-                    <div>
-                      <p
-                        class="font-semibold text-candlelight-500 dark:text-candlelight-400"
-                      >
-                        You're registered!
-                      </p>
-                      <p class="text-sm text-candlelight-600 dark:text-candlelight-500">
-                        We've sent a confirmation to your email
-                      </p>
-                    </div>
-                    <UButton
-                      color="error"
-                      size="md"
-                      @click="handleCancelRegistration"
-                      :loading="isCancelling"
-                    >
-                      Cancel Registration
-                    </UButton>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Member Status Check (pending payment, suspended, cancelled) -->
-              <div v-else-if="memberData && !canRSVP" class="text-center">
-                <div
-                  :class="[
-                    'p-6 rounded-lg border mb-6',
-                    statusConfig.bgColor,
-                    statusConfig.borderColor,
-                  ]"
-                >
-                  <Icon
-                    :name="statusConfig.icon"
-                    :class="['w-8 h-8 mx-auto mb-3', statusConfig.textColor]"
-                  />
-                  <p
-                    :class="[
-                      'font-semibold text-lg mb-2',
-                      statusConfig.textColor,
-                    ]"
-                  >
-                    {{ statusConfig.label }}
-                  </p>
-                  <p :class="['mb-4', statusConfig.textColor]">
-                    {{ getRSVPMessage }}
-                  </p>
-                  <UButton
-                    v-if="isPendingPayment"
-                    color="orange"
-                    size="lg"
-                    class="px-8"
-                    :loading="isProcessingPayment"
-                    @click="completePayment"
-                  >
-                    {{
-                      isProcessingPayment ? "Processing..." : "Complete Payment"
-                    }}
-                  </UButton>
-                  <NuxtLink
-                    v-else-if="isCancelled"
-                    to="/member/profile#account"
-                  >
-                    <UButton color="primary" size="lg" class="px-8">
-                      Reactivate Membership
-                    </UButton>
-                  </NuxtLink>
-                  <a
-                    v-else-if="isSuspended"
-                    href="mailto:support@ghostguild.org"
-                  >
-                    <UButton color="gray" size="lg" class="px-8">
-                      Contact Support
-                    </UButton>
-                  </a>
-                </div>
-              </div>
-
-              <!-- Member Gate Warning (members-only locked event) -->
-              <div
-                v-else-if="event.membersOnly && memberData && !isMember"
-                class="text-center"
-              >
-                <div
-                  class="p-6 bg-amber-900/20 rounded-lg border border-amber-800 mb-6"
-                >
-                  <p class="font-semibold text-amber-300 text-lg mb-2">
-                    Membership Required
-                  </p>
-                  <p class="text-amber-400">
-                    This event is exclusive to Ghost Guild members. Join any
-                    circle to gain access.
-                  </p>
-                </div>
-                <NuxtLink to="/join">
-                  <UButton color="primary" size="xl" class="px-12 py-4">
-                    Become a Member to Register
-                  </UButton>
-                </NuxtLink>
-              </div>
-
-              <!-- Logged In - Can Register -->
-              <div
-                v-else-if="memberData && (!event.membersOnly || isMember)"
-                class="text-center"
-              >
-                <p class="text-lg text-guild-200 mb-6">
-                  You are logged in, {{ memberData.name }}.
-                </p>
-                <UButton
-                  color="primary"
-                  size="xl"
-                  @click="handleRegistration"
-                  :loading="isRegistering"
-                  class="px-12 py-4"
-                >
-                  {{ isRegistering ? "Registering..." : "Register Now" }}
-                </UButton>
-              </div>
-
-              <!-- Not Logged In - Show Registration Form -->
-              <div v-else>
-                <h3 class="text-display-sm font-bold text-guild-100 mb-6">
-                  Register for This Event
-                </h3>
-                <form @submit.prevent="handleRegistration" class="space-y-4">
-                  <div>
-                    <label
-                      for="name"
-                      class="block text-sm font-medium text-guild-200 mb-2"
-                    >
-                      Full Name
-                    </label>
-                    <UInput
-                      id="name"
-                      v-model="registrationForm.name"
-                      type="text"
-                      required
-                      placeholder="Enter your full name"
-                    />
-                  </div>
-
-                  <div>
-                    <label
-                      for="email"
-                      class="block text-sm font-medium text-guild-200 mb-2"
-                    >
-                      Email Address
-                    </label>
-                    <UInput
-                      id="email"
-                      v-model="registrationForm.email"
-                      type="email"
-                      required
-                      placeholder="Enter your email"
-                    />
-                  </div>
-
-                  <div>
-                    <label
-                      for="membershipLevel"
-                      class="block text-sm font-medium text-guild-200 mb-2"
-                    >
-                      Membership Status
-                    </label>
-                    <USelect
-                      id="membershipLevel"
-                      v-model="registrationForm.membershipLevel"
-                      :options="membershipOptions"
-                    />
-                  </div>
-
-                  <div class="pt-4">
-                    <UButton
-                      type="submit"
-                      color="primary"
-                      size="lg"
-                      block
-                      :loading="isRegistering"
-                    >
-                      {{
-                        isRegistering ? "Registering..." : "Register for Event"
-                      }}
-                    </UButton>
-                  </div>
-                </form>
-              </div>
-
-              <!-- Event Capacity -->
-              <div
-                v-if="event.maxAttendees"
-                class="mt-6 pt-6 border-t border-guild-700"
-              >
-                <div class="flex items-center justify-between">
-                  <span class="text-sm text-guild-300">Event Capacity</span>
-                  <div class="flex items-center space-x-2">
-                    <span class="text-sm font-semibold text-guild-100">
-                      {{ event.registeredCount || 0 }} /
-                      {{ event.maxAttendees }}
-                    </span>
-                    <div
-                      class="w-24 h-2 bg-guild-700 rounded-full overflow-hidden"
-                    >
-                      <div
-                        class="h-full bg-candlelight-500 rounded-full"
-                        :style="`width: ${((event.registeredCount || 0) / event.maxAttendees) * 100}%`"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Waitlist Section -->
-              <div
-                v-if="event.tickets?.waitlist?.enabled && isEventFull"
-                class="mt-6 pt-6 border-t border-guild-700"
-              >
-                <!-- Already on Waitlist -->
-                <div v-if="isOnWaitlist" class="text-center">
-                  <div class="p-4 bg-amber-900/20 rounded-lg border border-amber-800 mb-4">
-                    <p class="font-semibold text-amber-300">
-                      You're on the waitlist!
-                    </p>
-                    <p class="text-sm text-amber-400 mt-1">
-                      Position #{{ waitlistPosition }} - We'll email you if a spot opens up
-                    </p>
-                  </div>
-                  <UButton
-                    color="gray"
-                    variant="outline"
-                    size="sm"
-                    @click="handleLeaveWaitlist"
-                    :loading="isJoiningWaitlist"
-                  >
-                    Leave Waitlist
-                  </UButton>
-                </div>
-
-                <!-- Join Waitlist Form -->
-                <div v-else>
-                  <div class="p-4 bg-amber-900/20 rounded-lg border border-amber-800 mb-4">
-                    <p class="font-semibold text-amber-300">
-                      This event is full
-                    </p>
-                    <p class="text-sm text-amber-400 mt-1">
-                      Join the waitlist and we'll notify you if a spot opens up
-                    </p>
-                  </div>
-
-                  <form @submit.prevent="handleJoinWaitlist" class="space-y-4">
-                    <div v-if="!memberData">
-                      <UInput
-                        v-model="waitlistForm.email"
-                        type="email"
-                        placeholder="Your email address"
-                        required
-                      />
-                    </div>
-                    <UButton
-                      type="submit"
-                      color="warning"
-                      block
-                      :loading="isJoiningWaitlist"
-                    >
-                      {{ isJoiningWaitlist ? "Joining..." : "Join Waitlist" }}
-                    </UButton>
-                  </form>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Additional Information -->
-          <div class="mt-8 p-6 rounded-xl border border-guild-700">
-            <h4 class="font-semibold text-guild-100 mb-3">Questions?</h4>
-            <p class="text-sm text-guild-200 mb-3">
-              If you have any questions about this event please drop us a line.
-            </p>
-            <a
-              href="mailto:events@ghostguild.org"
-              class="text-candlelight-500 hover:underline"
-            >
-              events@ghostguild.org
-            </a>
+    <!-- TWO-COLUMN BODY -->
+    <div class="event-body">
+      <!-- LEFT: MAIN CONTENT -->
+      <div class="event-main">
+        <!-- Series Badge -->
+        <div v-if="event.series?.isSeriesEvent" class="section">
+          <div class="series-note">
+            <span class="section-label">Part of Series</span>
+            <NuxtLink :to="`/series/${event.series.id}`">{{ event.series.title }}</NuxtLink>
+            &mdash; Event {{ event.series.position }} of {{ event.series.totalEvents }}
           </div>
         </div>
-      </UContainer>
-    </section>
+
+        <!-- Target Circles -->
+        <div v-if="event.targetCircles?.length" class="section">
+          <span class="section-label">Recommended for</span>
+          <div class="circle-badges">
+            <CircleBadge v-for="circle in event.targetCircles" :key="circle" :circle="circle" />
+          </div>
+        </div>
+
+        <!-- Description -->
+        <div class="section">
+          <h2>About This Event</h2>
+          <p>{{ event.description }}</p>
+        </div>
+
+        <!-- Series Description -->
+        <div v-if="event.series?.isSeriesEvent && event.series.description" class="section">
+          <h2>About the {{ event.series.title }} Series</h2>
+          <p>{{ event.series.description }}</p>
+        </div>
+
+        <!-- Agenda -->
+        <div v-if="event.agenda?.length" class="section">
+          <h2>Agenda</h2>
+          <ol class="agenda-list">
+            <li v-for="(item, index) in event.agenda" :key="index">{{ item }}</li>
+          </ol>
+        </div>
+
+        <!-- Speakers -->
+        <div v-if="event.speakers?.length" class="section">
+          <h2>Speakers</h2>
+          <div v-for="speaker in event.speakers" :key="speaker.name" class="speaker">
+            <div class="speaker-name">{{ speaker.name }}</div>
+            <div v-if="speaker.role" class="speaker-role">{{ speaker.role }}</div>
+            <div v-if="speaker.bio" class="speaker-bio">{{ speaker.bio }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- RIGHT: SIDEBAR PANELS -->
+      <div v-if="!event.isCancelled" class="event-aside">
+        <!-- Ticket System -->
+        <EventTicketPurchase
+          v-if="event.tickets?.enabled"
+          :event-id="event._id || event.id"
+          :event-start-date="event.startDate"
+          :event-title="event.title"
+          :user-email="memberData?.email"
+          @success="handleTicketSuccess"
+          @error="handleTicketError"
+        />
+
+        <!-- Legacy Registration -->
+        <template v-else>
+          <!-- Already Registered -->
+          <div v-if="registrationStatus === 'registered'" class="dashed-box">
+            <div class="box-title">Registration</div>
+            <p class="reg-status" style="color: var(--green);">You're registered!</p>
+            <p class="reg-price">Confirmation sent to your email</p>
+            <button class="btn btn-danger" @click="handleCancelRegistration" :disabled="isCancelling">
+              {{ isCancelling ? 'Cancelling...' : 'Cancel Registration' }}
+            </button>
+          </div>
+
+          <!-- Member Status Issues -->
+          <div v-else-if="memberData && !canRSVP" class="dashed-box">
+            <div class="box-title">Registration</div>
+            <p class="reg-status" style="color: var(--ember);">{{ statusConfig.label }}</p>
+            <p class="reg-price">{{ getRSVPMessage }}</p>
+            <NuxtLink v-if="isPendingPayment" to="#" @click.prevent="completePayment">
+              <button class="btn btn-primary" :disabled="isProcessingPayment">
+                {{ isProcessingPayment ? 'Processing...' : 'Complete Payment' }}
+              </button>
+            </NuxtLink>
+          </div>
+
+          <!-- Members-Only Gate -->
+          <div v-else-if="event.membersOnly && memberData && !isMember" class="dashed-box">
+            <div class="box-title">Registration</div>
+            <p class="reg-status" style="color: var(--ember);">Membership Required</p>
+            <p class="reg-price">This event is exclusive to members.</p>
+            <NuxtLink to="/join"><button class="btn btn-primary">Become a Member</button></NuxtLink>
+          </div>
+
+          <!-- Can Register (logged in) -->
+          <div v-else-if="memberData && (!event.membersOnly || isMember)" class="dashed-box">
+            <div class="box-title">Registration</div>
+            <div v-if="event.maxAttendees" class="reg-status">
+              {{ event.maxAttendees - (event.registeredCount || 0) }} spots remaining
+            </div>
+            <div class="reg-price">Free for members</div>
+            <button class="btn btn-primary" @click="handleRegistration" :disabled="isRegistering">
+              {{ isRegistering ? 'Registering...' : 'Register for this event' }}
+            </button>
+            <a :href="`/api/events/${route.params.id}/calendar`" download class="cal-link">Add to calendar</a>
+          </div>
+
+          <!-- Not Logged In -->
+          <div v-else class="dashed-box">
+            <div class="box-title">Registration</div>
+            <form @submit.prevent="handleRegistration">
+              <div class="field">
+                <label>Name</label>
+                <input v-model="registrationForm.name" type="text" required />
+              </div>
+              <div class="field">
+                <label>Email</label>
+                <input v-model="registrationForm.email" type="email" required />
+              </div>
+              <button type="submit" class="btn btn-primary" :disabled="isRegistering">
+                {{ isRegistering ? 'Registering...' : 'Register for Event' }}
+              </button>
+            </form>
+          </div>
+
+          <!-- Waitlist -->
+          <div v-if="event.tickets?.waitlist?.enabled && isEventFull" class="dashed-box">
+            <div class="box-title">Waitlist</div>
+            <div v-if="isOnWaitlist">
+              <p class="reg-status">You're on the waitlist (#{{ waitlistPosition }})</p>
+              <button class="btn" @click="handleLeaveWaitlist" :disabled="isJoiningWaitlist">Leave Waitlist</button>
+            </div>
+            <div v-else>
+              <p class="reg-status" style="color: var(--ember);">This event is full</p>
+              <form @submit.prevent="handleJoinWaitlist">
+                <div v-if="!memberData" class="field">
+                  <label>Email</label>
+                  <input v-model="waitlistForm.email" type="email" required />
+                </div>
+                <button type="submit" class="btn" :disabled="isJoiningWaitlist">
+                  {{ isJoiningWaitlist ? 'Joining...' : 'Join Waitlist' }}
+                </button>
+              </form>
+            </div>
+          </div>
+        </template>
+
+        <!-- Event Details Box -->
+        <div class="dashed-box">
+          <div class="box-title">Event Details</div>
+          <div v-if="event.eventType" class="detail-row">
+            <span class="detail-key">Type</span>
+            <span class="detail-val">{{ event.eventType }}</span>
+          </div>
+          <div v-if="event.membersOnly" class="detail-row">
+            <span class="detail-key">Members only</span>
+            <span class="detail-val">Yes</span>
+          </div>
+        </div>
+
+        <!-- Questions -->
+        <div class="dashed-box">
+          <div class="box-title">Questions?</div>
+          <p style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px;">Drop us a line.</p>
+          <a href="mailto:events@ghostguild.org" style="font-size: 12px;">events@ghostguild.org</a>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
-const route = useRoute();
-const toast = useToast();
+const route = useRoute()
+const toast = useToast()
 
-// Fetch event data from API
-const {
-  data: event,
-  pending,
-  error,
-} = await useFetch(`/api/events/${route.params.id}`);
+const { data: event, pending, error } = await useFetch(`/api/events/${route.params.id}`)
 
-// Handle event not found
 if (error.value?.statusCode === 404) {
-  throw createError({
-    statusCode: 404,
-    statusMessage: "Event not found",
-  });
+  throw createError({ statusCode: 404, statusMessage: 'Event not found' })
 }
 
-// Authentication
-const { isMember, memberData, checkMemberStatus } = useAuth();
-const {
-  isPendingPayment,
-  isSuspended,
-  isCancelled,
-  canRSVP,
-  statusConfig,
-  getRSVPMessage,
-} = useMemberStatus();
-const { completePayment, isProcessingPayment, paymentError } =
-  useMemberPayment();
+const { isMember, memberData, checkMemberStatus } = useAuth()
+const { isPendingPayment, isSuspended, isCancelled, canRSVP, statusConfig, getRSVPMessage } = useMemberStatus()
+const { completePayment, isProcessingPayment } = useMemberPayment()
 
-// Check member status on mount
 onMounted(async () => {
-  await checkMemberStatus();
-
-  // Pre-fill form if member is logged in
+  await checkMemberStatus()
   if (memberData.value) {
-    registrationForm.value.name = memberData.value.name;
-    registrationForm.value.email = memberData.value.email;
-    registrationForm.value.membershipLevel =
-      memberData.value.membershipLevel || "non-member";
-
-    // Check if user is already registered
-    await checkRegistrationStatus();
-
-    // Check waitlist status
-    checkWaitlistStatus();
+    registrationForm.value.name = memberData.value.name
+    registrationForm.value.email = memberData.value.email
+    registrationForm.value.membershipLevel = memberData.value.membershipLevel || 'non-member'
+    await checkRegistrationStatus()
+    checkWaitlistStatus()
   }
-});
+})
 
-// Check if user is already registered for this event
 const checkRegistrationStatus = async () => {
-  if (!memberData.value?.email) return;
-
+  if (!memberData.value?.email) return
   try {
-    const response = await $fetch(
-      `/api/events/${route.params.id}/check-registration`,
-      {
-        method: "POST",
-        body: { email: memberData.value.email },
-      },
-    );
-
-    if (response.isRegistered) {
-      registrationStatus.value = "registered";
-    }
-  } catch (error) {
-    console.error("Failed to check registration status:", error);
+    const response = await $fetch(`/api/events/${route.params.id}/check-registration`, {
+      method: 'POST',
+      body: { email: memberData.value.email },
+    })
+    if (response.isRegistered) registrationStatus.value = 'registered'
+  } catch (err) {
+    console.error('Failed to check registration status:', err)
   }
-};
+}
 
-// Registration form state
-const registrationForm = ref({
-  name: "",
-  email: "",
-  membershipLevel: "non-member",
-});
+const registrationForm = ref({ name: '', email: '', membershipLevel: 'non-member' })
+const isRegistering = ref(false)
+const isCancelling = ref(false)
+const registrationStatus = ref('not-registered')
+const isJoiningWaitlist = ref(false)
+const isOnWaitlist = ref(false)
+const waitlistPosition = ref(0)
+const waitlistForm = ref({ email: '' })
 
-const membershipOptions = [
-  { label: "Non-member", value: "non-member" },
-  { label: "Circle of Community", value: "community" },
-  { label: "Circle of Founders", value: "founder" },
-  { label: "Circle of Practitioners", value: "practitioner" },
-];
-
-const isRegistering = ref(false);
-const isCancelling = ref(false);
-const registrationStatus = ref("not-registered"); // 'not-registered', 'registered'
-
-// Waitlist state
-const isJoiningWaitlist = ref(false);
-const isOnWaitlist = ref(false);
-const waitlistPosition = ref(0);
-const waitlistForm = ref({
-  email: "",
-});
-
-// Computed: Check if event is full
 const isEventFull = computed(() => {
-  if (!event.value?.maxAttendees) return false;
-  return (event.value.registeredCount || 0) >= event.value.maxAttendees;
-});
+  if (!event.value?.maxAttendees) return false
+  return (event.value.registeredCount || 0) >= event.value.maxAttendees
+})
 
-// Check waitlist status
-const checkWaitlistStatus = async () => {
-  const email = memberData.value?.email || waitlistForm.value.email;
-  if (!email || !event.value?.tickets?.waitlist?.enabled) return;
+const checkWaitlistStatus = () => {
+  const email = memberData.value?.email || waitlistForm.value.email
+  if (!email || !event.value?.tickets?.waitlist?.enabled) return
+  const entries = event.value.tickets.waitlist.entries || []
+  const idx = entries.findIndex((e) => e.email.toLowerCase() === email.toLowerCase())
+  if (idx !== -1) { isOnWaitlist.value = true; waitlistPosition.value = idx + 1 }
+}
 
-  const entries = event.value.tickets.waitlist.entries || [];
-  const entryIndex = entries.findIndex(
-    (e) => e.email.toLowerCase() === email.toLowerCase()
-  );
-
-  if (entryIndex !== -1) {
-    isOnWaitlist.value = true;
-    waitlistPosition.value = entryIndex + 1;
-  } else {
-    isOnWaitlist.value = false;
-    waitlistPosition.value = 0;
-  }
-};
-
-// Join waitlist handler
 const handleJoinWaitlist = async () => {
-  isJoiningWaitlist.value = true;
-
+  isJoiningWaitlist.value = true
   try {
-    const email = memberData.value?.email || waitlistForm.value.email;
-    const name = memberData.value?.name || "Guest";
+    const email = memberData.value?.email || waitlistForm.value.email
+    const name = memberData.value?.name || 'Guest'
+    const response = await $fetch(`/api/events/${route.params.id}/waitlist`, { method: 'POST', body: { email, name } })
+    isOnWaitlist.value = true
+    waitlistPosition.value = response.position
+    toast.add({ title: 'Added to Waitlist', description: `You're #${response.position} on the waitlist.`, color: 'orange' })
+  } catch (err) {
+    toast.add({ title: "Couldn't Join Waitlist", description: err.data?.statusMessage || 'Please try again.', color: 'red' })
+  } finally { isJoiningWaitlist.value = false }
+}
 
-    const response = await $fetch(`/api/events/${route.params.id}/waitlist`, {
-      method: "POST",
-      body: { email, name },
-    });
-
-    isOnWaitlist.value = true;
-    waitlistPosition.value = response.position;
-
-    toast.add({
-      title: "Added to Waitlist",
-      description: `You're #${response.position} on the waitlist. We'll email you if a spot opens up.`,
-      color: "orange",
-    });
-  } catch (error) {
-    const errorMessage =
-      error.data?.statusMessage || "Failed to join waitlist. Please try again.";
-
-    toast.add({
-      title: "Couldn't Join Waitlist",
-      description: errorMessage,
-      color: "red",
-    });
-  } finally {
-    isJoiningWaitlist.value = false;
-  }
-};
-
-// Leave waitlist handler
 const handleLeaveWaitlist = async () => {
-  isJoiningWaitlist.value = true;
-
+  isJoiningWaitlist.value = true
   try {
-    const email = memberData.value?.email || waitlistForm.value.email;
+    const email = memberData.value?.email || waitlistForm.value.email
+    await $fetch(`/api/events/${route.params.id}/waitlist`, { method: 'DELETE', body: { email } })
+    isOnWaitlist.value = false
+    waitlistPosition.value = 0
+    toast.add({ title: 'Removed from Waitlist', color: 'blue' })
+  } catch (err) {
+    toast.add({ title: 'Error', description: 'Failed to leave waitlist.', color: 'red' })
+  } finally { isJoiningWaitlist.value = false }
+}
 
-    await $fetch(`/api/events/${route.params.id}/waitlist`, {
-      method: "DELETE",
-      body: { email },
-    });
+const formatDate = (dateStr) => {
+  const d = new Date(dateStr)
+  return new Intl.DateTimeFormat('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }).format(d)
+}
 
-    isOnWaitlist.value = false;
-    waitlistPosition.value = 0;
+const formatTime = (start, end) => {
+  const fmt = new Intl.DateTimeFormat('en-US', { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' })
+  return `${fmt.format(new Date(start))} – ${fmt.format(new Date(end))}`
+}
 
-    toast.add({
-      title: "Removed from Waitlist",
-      description: "You've been removed from the waitlist.",
-      color: "blue",
-    });
-  } catch (error) {
-    toast.add({
-      title: "Error",
-      description: "Failed to leave waitlist. Please try again.",
-      color: "red",
-    });
-  } finally {
-    isJoiningWaitlist.value = false;
-  }
-};
-
-// Format date for display
-const formatDate = (dateString) => {
-  const date = new Date(dateString);
-  return new Intl.DateTimeFormat("en-US", {
-    weekday: "long",
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  }).format(date);
-};
-
-// Format time range for display
-const formatTime = (startDate, endDate) => {
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-
-  const timeFormat = new Intl.DateTimeFormat("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    timeZoneName: "short",
-  });
-
-  return `${timeFormat.format(start)} - ${timeFormat.format(end)}`;
-};
-
-// Format circle name for display
-const formatCircleName = (circleValue) => {
-  const circleNames = {
-    community: "Community Circle",
-    founder: "Founder Circle",
-    practitioner: "Practitioner Circle",
-  };
-  return circleNames[circleValue] || circleValue;
-};
-
-// Get optimized Cloudinary image URL
-const getOptimizedImageUrl = (publicId, transformations) => {
-  if (!publicId) return "";
-
-  const config = useRuntimeConfig();
-  return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`;
-};
-
-// Get image URL with fallback logic
-const getImageUrl = (featureImage) => {
-  if (!featureImage) return "";
-
-  // If we have a direct URL, use it as primary (since seed data uses external URLs)
-  if (featureImage.url) {
-    return featureImage.url;
-  }
-
-  // Fallback to Cloudinary if we have a publicId
-  if (featureImage.publicId) {
-    return getOptimizedImageUrl(featureImage.publicId, "w_1200,h_400,c_fill");
-  }
-
-  return "";
-};
-
-// Handle image loading errors
-const handleImageError = (event) => {
-  console.warn("Image failed to load:", event.target.src);
-  // Optionally hide the image container or show a placeholder
-};
-
-// Handle registration submission
 const handleRegistration = async () => {
-  isRegistering.value = true;
-
+  isRegistering.value = true
   try {
-    // Submit registration to API using slug or ID
-    const response = await $fetch(`/api/events/${route.params.id}/register`, {
-      method: "POST",
-      body: registrationForm.value,
-    });
+    await $fetch(`/api/events/${route.params.id}/register`, { method: 'POST', body: registrationForm.value })
+    registrationStatus.value = 'registered'
+    toast.add({ title: 'Registered!', description: `You're registered for ${event.value.title}.`, color: 'green' })
+    if (event.value.registeredCount !== undefined) event.value.registeredCount++
+  } catch (err) {
+    toast.add({ title: 'Registration Failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
+  } finally { isRegistering.value = false }
+}
 
-    // Update registration status
-    registrationStatus.value = "registered";
-
-    // Show success toast
-    toast.add({
-      title: "Registration Successful!",
-      description: `You're registered for ${event.value.title}. Check your email for confirmation.`,
-      color: "green",
-    });
-
-    // Update registered count
-    if (event.value.registeredCount !== undefined) {
-      event.value.registeredCount++;
-    }
-  } catch (error) {
-    console.error("Registration failed:", error);
-
-    // Handle specific error messages
-    const errorMessage =
-      error.data?.statusMessage || "Something went wrong. Please try again.";
-
-    toast.add({
-      title: "Registration Failed",
-      description: errorMessage,
-      color: "red",
-    });
-  } finally {
-    isRegistering.value = false;
-  }
-};
-
-// Handle registration cancellation
 const handleCancelRegistration = async () => {
-  if (
-    !confirm(
-      "Are you sure you want to cancel your registration for this event?",
-    )
-  ) {
-    return;
-  }
-
-  isCancelling.value = true;
-
+  isCancelling.value = true
   try {
-    const response = await $fetch(
-      `/api/events/${route.params.id}/cancel-registration`,
-      {
-        method: "POST",
-        body: {
-          email: registrationForm.value.email || memberData.value?.email,
-        },
-      },
-    );
+    await $fetch(`/api/events/${route.params.id}/cancel-registration`, {
+      method: 'POST',
+      body: { email: registrationForm.value.email || memberData.value?.email },
+    })
+    registrationStatus.value = 'not-registered'
+    toast.add({ title: 'Registration Cancelled', color: 'blue' })
+    if (event.value.registeredCount !== undefined) event.value.registeredCount--
+  } catch (err) {
+    toast.add({ title: 'Cancellation Failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
+  } finally { isCancelling.value = false }
+}
 
-    // Update registration status
-    registrationStatus.value = "not-registered";
+const handleTicketSuccess = () => { if (event.value.registeredCount !== undefined) event.value.registeredCount++ }
+const handleTicketError = (err) => { console.error('Ticket purchase failed:', err) }
 
-    // Show success toast
-    toast.add({
-      title: "Registration Cancelled",
-      description: "Your registration has been cancelled successfully.",
-      color: "blue",
-    });
-
-    // Update registered count
-    if (event.value.registeredCount !== undefined) {
-      event.value.registeredCount--;
-    }
-  } catch (error) {
-    console.error("Cancel registration failed:", error);
-
-    const errorMessage =
-      error.data?.statusMessage ||
-      "Failed to cancel registration. Please try again.";
-
-    toast.add({
-      title: "Cancellation Failed",
-      description: errorMessage,
-      color: "red",
-    });
-  } finally {
-    isCancelling.value = false;
-  }
-};
-
-// Handle ticket purchase success
-const handleTicketSuccess = (response) => {
-  // Update registered count if needed
-  if (event.value.registeredCount !== undefined) {
-    event.value.registeredCount++;
-  }
-};
-
-// Handle ticket purchase error
-const handleTicketError = (error) => {
-  console.error("Ticket purchase failed:", error);
-};
-
-// SEO Meta
 useHead(() => ({
-  title: event.value
-    ? `${event.value.title} - Ghost Guild Events`
-    : "Event - Ghost Guild",
-  meta: [
-    {
-      name: "description",
-      content: event.value?.description || "View event details and register",
-    },
-  ],
-}));
+  title: event.value ? `${event.value.title} - Ghost Guild Events` : 'Event - Ghost Guild',
+  meta: [{ name: 'description', content: event.value?.description || 'View event details and register' }],
+}))
 </script>
+
+<style scoped>
+.loading {
+  padding: 48px 32px;
+  color: var(--text-dim);
+}
+.loading h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 22px;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+
+.back-link {
+  padding: 12px 32px;
+  border-bottom: 1px dashed var(--border);
+  font-size: 12px;
+}
+.back-link a { color: var(--candle); text-decoration: none; }
+
+.event-header {
+  padding: 28px 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.event-header h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.15;
+  margin-bottom: 16px;
+}
+.event-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.meta-label {
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  display: block;
+  margin-bottom: 2px;
+}
+
+.cancelled-notice {
+  padding: 20px 32px;
+  border-bottom: 1px dashed var(--border);
+  color: var(--ember);
+  font-size: 12px;
+}
+.cancelled-notice strong {
+  display: block;
+  margin-bottom: 4px;
+}
+
+/* ---- TWO-COLUMN BODY ---- */
+.event-body {
+  display: grid;
+  grid-template-columns: 1fr 280px;
+}
+.event-main {
+  min-width: 0;
+}
+.event-aside {
+  border-left: 1px dashed var(--border);
+  padding: 0;
+}
+.event-aside .dashed-box {
+  margin: 0;
+  border: none;
+  border-bottom: 1px dashed var(--border);
+  padding: 20px 24px;
+}
+.event-aside .dashed-box:hover { border-color: var(--border); }
+
+.section {
+  padding: 24px 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.section h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+.section p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  max-width: 560px;
+}
+
+.circle-badges {
+  display: flex;
+  gap: 6px;
+  margin-top: 4px;
+}
+
+.series-note {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.agenda-list {
+  padding-left: 20px;
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 2;
+}
+
+.speaker {
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+}
+.speaker:last-child { border-bottom: none; }
+.speaker-name { font-size: 13px; color: var(--text-bright); font-weight: 500; }
+.speaker-role { font-size: 11px; color: var(--text-dim); }
+.speaker-bio { font-size: 11px; color: var(--text-faint); margin-top: 2px; }
+
+.box-title {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 8px;
+}
+.reg-status { font-size: 13px; color: var(--text); margin-bottom: 4px; }
+.reg-price { font-size: 11px; color: var(--text-faint); margin-bottom: 10px; }
+.cal-link {
+  display: block;
+  margin-top: 8px;
+  font-size: 11px;
+  color: var(--candle);
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 0;
+  font-size: 12px;
+  border-bottom: 1px dashed var(--border);
+}
+.detail-row:last-child { border-bottom: none; }
+.detail-key { color: var(--text-faint); }
+.detail-val { color: var(--text); }
+
+@media (max-width: 768px) {
+  .event-body { grid-template-columns: 1fr; }
+  .event-aside { border-left: none; border-top: 1px dashed var(--border); }
+  .event-meta-row { flex-direction: column; gap: 8px; }
+}
+</style>
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index e0962d4..5bbf9de 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -1,974 +1,259 @@
 <template>
   <div>
-    <!-- Page Header -->
-    <PageHeader
-      title="Events"
-      subtitle="Join our community events, workshops, and gatherings"
-      size="large"
-    />
-
-    <!-- Events Section with Tabs -->
-    <section class="bg-guild-900 dark:bg-guild-950">
-      <UContainer>
-        <UTabs
-          v-model="activeTab"
-          :items="[
-            { label: 'What\'s On', value: 'upcoming', slot: 'upcoming' },
-            { label: 'Calendar', value: 'calendar', slot: 'calendar' },
-          ]"
-          class="max-w-6xl mx-auto"
-        >
-          <template #upcoming>
-            <!-- Search and Filter Controls -->
-            <div class="pt-8">
-              <div class="max-w-4xl mx-auto mb-8">
-                <div class="flex flex-col gap-4">
-                  <!-- Search Input -->
-                  <div
-                    class="flex flex-row flex-wrap gap-4 items-center justify-center"
-                  >
-                    <UInput
-                      v-model="searchQuery"
-                      placeholder="Search events..."
-                      autocomplete="off"
-                      size="xl"
-                      class="rounded-md shadow-sm text-lg w-full md:w-2/3"
-                      :ui="{ icon: { trailing: { pointer: '' } } }"
-                    >
-                      <template #trailing>
-                        <UButton
-                          v-show="searchQuery"
-                          icon="i-heroicons-x-mark-20-solid"
-                          color="gray"
-                          variant="ghost"
-                          @click="searchQuery = ''"
-                          class="mr-1"
-                        />
-                      </template>
-                    </UInput>
-
-                    <!-- Past Events Toggle -->
-                    <div
-                      class="flex flex-col items-center md:items-start gap-2"
-                    >
-                      <label class="text-sm font-medium text-guild-200">
-                        Show past events?
-                      </label>
-                      <USwitch v-model="includePastEvents" />
-                    </div>
-                  </div>
-
-                  <!-- Category Filter -->
-                  <div class="flex justify-center">
-                    <UPopover
-                      :ui="{ base: 'overflow-visible' }"
-                      :popper="{
-                        placement: 'bottom-end',
-                        strategy: 'absolute',
-                      }"
-                    >
-                      <UButton
-                        icon="i-heroicons-adjustments-vertical-20-solid"
-                        variant="outline"
-                        color="primary"
-                        size="sm"
-                        class="rounded-md shadow-sm"
-                      >
-                        Filter Events
-                      </UButton>
-
-                      <template #panel="{ close }">
-                        <div
-                          class="bg-guild-800 dark:bg-guild-900 p-6 rounded-md shadow-lg w-80 space-y-4"
-                        >
-                          <div class="space-y-2">
-                            <label class="text-sm font-medium text-guild-200">
-                              Filter by category
-                            </label>
-                            <USelectMenu
-                              v-model="selectedCategories"
-                              :options="eventCategories"
-                              option-attribute="name"
-                              multiple
-                              value-attribute="id"
-                              placeholder="Select categories..."
-                              :ui="{
-                                base: 'overflow-visible',
-                                menu: { maxHeight: '200px', overflowY: 'auto' },
-                                popper: { strategy: 'absolute' },
-                              }"
-                            />
-                          </div>
-                        </div>
-                      </template>
-                    </UPopover>
-                  </div>
-                </div>
-
-                <!-- Search Status Message -->
-                <div v-if="isSearching" class="mt-6 text-center">
-                  <p class="text-guild-300 text-sm">
-                    {{
-                      filteredEvents.length > 0
-                        ? `Found ${filteredEvents.length} event${
-                            filteredEvents.length !== 1 ? "s" : ""
-                          }`
-                        : "No events found matching your search"
-                    }}
-                  </p>
-                </div>
-              </div>
-            </div>
-
-            <!-- Events List -->
-            <div class="max-w-4xl mx-auto space-y-6 pb-8">
-              <NuxtLink
-                v-for="event in upcomingEvents"
-                :key="event.id"
-                :to="`/events/${event.slug || event.id}`"
-                class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
-              >
-                <div class="flex-shrink-0 text-center">
-                  <div class="text-2xl font-display font-bold text-guild-100">
-                    {{ event.start.getDate() }}
-                  </div>
-                  <div class="text-ui-label text-guild-400">
-                    {{
-                      event.start.toLocaleDateString("en-US", {
-                        month: "short",
-                      })
-                    }}
-                  </div>
-                </div>
-
-                <div class="flex-1 min-w-0">
-                  <div class="flex items-start gap-2 mb-1">
-                    <h3
-                      class="text-lg font-semibold text-guild-100 group-hover:text-primary transition-colors"
-                    >
-                      {{ event.title }}
-                    </h3>
-                    <Icon
-                      v-if="event.membersOnly"
-                      name="heroicons:lock-closed"
-                      class="w-4 h-4 text-candlelight-500 flex-shrink-0 mt-1"
-                    />
-                  </div>
-
-                  <p class="text-sm text-guild-300 mb-2 line-clamp-2">
-                    {{ event.content }}
-                  </p>
-
-                  <div v-if="event.series?.isSeriesEvent" class="mt-2">
-                    <EventSeriesBadge
-                      :title="event.series.title"
-                      :position="event.series.position"
-                      :total-events="event.series.totalEvents"
-                      :series-id="event.series.id"
-                    />
-                  </div>
-                </div>
-
-                <Icon
-                  name="heroicons:arrow-right"
-                  class="w-5 h-5 text-guild-400 group-hover:text-primary group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
-                />
-              </NuxtLink>
-            </div>
-          </template>
-
-          <template #calendar>
-            <div class="pt-8 pb-8">
-              <div class="max-w-6xl mx-auto" id="event-calendar">
-                <ClientOnly>
-                  <div
-                    v-if="pending"
-                    class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
-                  >
-                    <div class="text-center">
-                      <div
-                        class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
-                      ></div>
-                      <p class="text-guild-200">Loading calendar...</p>
-                    </div>
-                  </div>
-                  <div v-else style="min-height: 600px">
-                    <VueCal
-                      ref="vuecal"
-                      :events="calendarEvents"
-                      :time="false"
-                      active-view="month"
-                      class="guild-calendar"
-                      :disable-views="['years', 'year']"
-                      :hide-view-selector="false"
-                      events-on-month-view="short"
-                      today-button
-                      @event-click="onEventClick"
-                    >
-                    </VueCal>
-                  </div>
-                  <template #fallback>
-                    <div
-                      class="min-h-[400px] bg-guild-800 rounded-xl flex items-center justify-center"
-                    >
-                      <div class="text-center">
-                        <div
-                          class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
-                        ></div>
-                        <p class="text-guild-200">Loading calendar...</p>
-                      </div>
-                    </div>
-                  </template>
-                </ClientOnly>
-              </div>
-            </div>
-          </template>
-        </UTabs>
-      </UContainer>
-    </section>
-
-    <!-- Event Series -->
-    <div v-if="activeSeries.length > 0" class="text-center my-12">
-      <h2 class="text-display font-bold text-guild-100 mb-8">
-        Current Event Series
-      </h2>
+    <!-- HERO (compact) -->
+    <div class="hero">
+      <h1>Events</h1>
+      <p>Workshops, meetups, and gatherings for game developers practicing cooperative models.</p>
     </div>
 
-    <div
-      v-if="activeSeries.length > 0"
-      class="space-y-6 max-w-6xl mx-auto mb-20"
-    >
-      <NuxtLink
-        v-for="series in activeSeries.slice(0, 6)"
-        :key="series.id"
-        :to="`/series/${series.id}`"
-        class="series-list-item block bg-guild-800/50 dark:bg-guild-700/30 rounded-xl p-6 border border-guild-600 dark:border-guild-600 hover:border-guild-500 hover:bg-guild-800/70 dark:hover:bg-guild-700/50 transition-all duration-300"
+    <!-- FILTER BAR -->
+    <FilterBar v-model="activeFilter" :filters="filterOptions">
+      <label class="filter-toggle">
+        <input type="checkbox" v-model="includePastEvents"> Show past events
+      </label>
+    </FilterBar>
+
+    <!-- EVENT LIST -->
+    <div class="event-list-full">
+      <div
+        v-for="event in filteredEvents"
+        :key="event._id"
+        class="event-row"
       >
-        <div class="flex items-start justify-between mb-4">
-          <div class="flex items-center gap-2">
-            <span
-              class="series-list-item__label text-sm font-semibold text-guild-300 dark:text-guild-300"
-            >
-              Event Series
-            </span>
-            <span
-              class="series-list-item__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
-            >
-              {{ series.eventCount }} events
-            </span>
+        <span class="event-date">{{ formatDate(event.startDate) }}</span>
+        <div class="event-info">
+          <div class="event-title">
+            <NuxtLink :to="`/events/${event._id}`">{{ event.title }}</NuxtLink>
           </div>
-          <span
-            :class="[
-              'series-list-item__status inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
-              series.status === 'active'
-                ? 'bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400'
-                : series.status === 'upcoming'
-                  ? 'bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300'
-                  : 'bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400',
-            ]"
-          >
-            {{ series.status }}
-          </span>
+          <div v-if="event.eventType" class="event-type">{{ event.eventType }}</div>
         </div>
-
-        <h3
-          class="series-list-item__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
-        >
-          {{ series.title }}
-        </h3>
-
-        <p
-          class="series-list-item__description text-sm text-guild-300 dark:text-guild-300 mb-4 line-clamp-2"
-        >
-          {{ series.description }}
-        </p>
-
-        <div class="series-list-item__events space-y-2 mb-4">
-          <div
-            v-for="(event, index) in series.events.slice(0, 3)"
-            :key="index"
-            class="series-list-item__event flex items-center justify-between text-xs"
-          >
-            <div class="flex items-center gap-2">
-              <div
-                class="series-list-item__event-number w-6 h-6 bg-guild-700/50 dark:bg-guild-600/50 text-guild-200 dark:text-guild-200 rounded-full flex items-center justify-center text-xs font-medium border border-guild-600 dark:border-guild-500"
-              >
-                {{ event.series?.position || index + 1 }}
-              </div>
-              <span
-                class="series-list-item__event-title text-guild-200 dark:text-guild-200 truncate"
-                >{{ event.title }}</span
-              >
-            </div>
-            <span
-              class="series-list-item__event-date text-guild-300 dark:text-guild-300"
-            >
-              {{ formatEventDate(event.startDate) }}
+        <span class="event-capacity">
+          <template v-if="event.maxAttendees">
+            <span :class="{ 'seats-warn': isAlmostFull(event) }">
+              {{ event.registeredCount || 0 }}/{{ event.maxAttendees }} seats
             </span>
-          </div>
-          <div
-            v-if="series.events.length > 3"
-            class="series-list-item__more-events text-xs text-guild-300 dark:text-guild-300 text-center pt-1"
-          >
-            +{{ series.events.length - 3 }} more events
-          </div>
-        </div>
-
-        <div
-          class="series-list-item__date-range text-sm text-guild-300 dark:text-guild-300"
-        >
-          {{ formatDateRange(series.startDate, series.endDate) }}
-        </div>
-      </NuxtLink>
+          </template>
+          <template v-else>Open</template>
+        </span>
+        <CircleBadge v-if="event.circle" :circle="event.circle" />
+        <span v-else class="badge all">All</span>
+      </div>
+      <div v-if="!filteredEvents?.length" class="empty">No events found</div>
     </div>
 
-    <!-- Attend Our Events -->
-    <section class="py-20 bg-guild-800 dark:bg-guild-900">
-      <UContainer>
-        <div class="text-center mb-16">
-          <h2 class="text-display font-bold text-guild-100 mb-8">
-            Attend Our Events
-          </h2>
-        </div>
-
-        <div class="max-w-4xl mx-auto">
-          <div
-            class="bg-guild-900 rounded-2xl p-8 border border-guild-700 mb-12"
-          >
-            <div class="prose prose-lg dark:prose-invert max-w-none">
-              <p class="text-lg leading-relaxed text-guild-200 mb-6">
-                Our events bring together game developers, founders, and practitioners
-                who are building more equitable workplaces. From hands-on workshops
-                about governance and finance to casual co-working sessions and game nights,
-                there's something for every stage of your journey.
-              </p>
-
-              <p class="text-lg leading-relaxed text-guild-200 mb-6">
-                All events are designed to be accessible, with most offered free to members
-                and sliding-scale pricing for non-members. Can't make it live?
-                Many sessions are recorded and shared in our resource library.
-              </p>
-            </div>
+    <!-- EVENT SERIES -->
+    <div v-if="activeSeries?.length" class="full-section">
+      <div class="section-label">Event Series</div>
+      <div class="series-grid">
+        <NuxtLink
+          v-for="series in activeSeries"
+          :key="series._id"
+          :to="`/series/${series._id}`"
+          class="series-box"
+        >
+          <h3>{{ series.title }}</h3>
+          <p class="series-desc">{{ series.description }}</p>
+          <div class="series-meta">
+            <span>{{ series.eventCount || series.events?.length || 0 }} sessions</span>
+            <span v-if="series.startDate">{{ formatDate(series.startDate) }} &ndash; {{ formatDate(series.endDate) }}</span>
           </div>
+        </NuxtLink>
+      </div>
+    </div>
 
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-            <div class="text-center">
-              <h3 class="text-lg font-semibold text-guild-100 mb-2">
-                Monthly Meetups
-              </h3>
-
-              <p class="text-sm text-guild-300">
-                Casual knowledge sharing sessions
-              </p>
-            </div>
-
-            <div class="text-center">
-              <h3 class="text-lg font-semibold text-guild-100 mb-2">
-                Workshops
-              </h3>
-
-              <p class="text-sm text-guild-300">
-                Hands-on learning about cooperative and worker-centric business
-                models
-              </p>
-            </div>
-
-            <div class="text-center">
-              <h3 class="text-lg font-semibold text-guild-100 mb-2">
-                Social Events
-              </h3>
-              <p class="text-sm text-guild-300">
-                Game nights, socials, and more
-              </p>
-            </div>
-          </div>
-        </div>
-      </UContainer>
-    </section>
+    <!-- PROPOSE AN EVENT -->
+    <div class="full-section">
+      <div class="section-label">Have an idea?</div>
+      <DashedBox>
+        <h3>Propose an Event</h3>
+        <p>Members can propose events for any circle. Workshops, social hangs, talks, or anything else that serves the community.</p>
+        <NuxtLink to="/events" class="cta">Propose an event &rarr;</NuxtLink>
+      </DashedBox>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { VueCal } from "vue-cal";
-import "vue-cal/style.css";
+const activeFilter = ref('all')
+const includePastEvents = ref(false)
 
-// Composables
-const { formatDateRange, formatDate, isPastDate } = useEventDateUtils();
-const {
-  searchQuery,
-  includePastEvents,
-  searchResults,
-  selectedCategories,
-  isSearching,
-  saveSearchState,
-  loadSearchState,
-  clearSearch: clearSearchFilters,
-} = useCalendarSearch();
+const filterOptions = [
+  { label: 'All', value: 'all' },
+  { label: 'Workshops', value: 'workshop' },
+  { label: 'Community', value: 'community' },
+  { label: 'Social', value: 'social' },
+  { label: 'Showcase', value: 'showcase' },
+]
 
-// Active tab state
-const activeTab = ref("upcoming");
+const { data: eventsData } = await useFetch('/api/events')
+const { data: seriesData } = await useFetch('/api/series')
 
-// Hover state for calendar cells
-const hoveredCells = ref({});
+const now = new Date()
 
-const handleMouseEnter = (date) => {
-  hoveredCells.value[date] = true;
-};
-
-const handleMouseLeave = (date) => {
-  hoveredCells.value[date] = false;
-};
-
-const isHovered = (date) => {
-  return hoveredCells.value[date] || false;
-};
-
-// Fetch events from API
-const { data: eventsData, pending, error } = await useFetch("/api/events");
-// Fetch series from API
-const { data: seriesData } = await useFetch("/api/series");
-
-// Event categories for filtering
-const eventCategories = computed(() => {
-  if (!eventsData.value) return [];
-  const categories = new Set();
-  eventsData.value.forEach((event) => {
-    if (event.eventType) {
-      categories.add(event.eventType);
-    }
-  });
-  return Array.from(categories).map((type) => ({
-    id: type,
-    name: type.charAt(0).toUpperCase() + type.slice(1),
-  }));
-});
-
-// Transform events for calendar display
-const events = computed(() => {
-  if (!eventsData.value) {
-    return [];
-  }
-
-  const transformed = eventsData.value.map((event) => ({
-    id: event.id || event._id,
-    slug: event.slug,
-    start: new Date(event.startDate),
-    end: new Date(event.endDate),
-    title: event.title,
-    content: event.description,
-    class: `event-${event.eventType}`,
-    membersOnly: event.membersOnly,
-    eventType: event.eventType,
-    location: event.location,
-    registeredCount: event.registeredCount,
-    maxAttendees: event.maxAttendees,
-    featureImage: event.featureImage,
-    series: event.series,
-  }));
-  return transformed;
-});
-
-// Helper function to format date for VueCal
-// When time is disabled, VueCal expects just 'YYYY-MM-DD' format
-const formatDateForVueCal = (date) => {
-  const d = date instanceof Date ? date : new Date(date);
-  const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-};
-
-// Transform events for calendar view
-const calendarEvents = computed(() => {
-  const filtered = events.value
-    .filter((event) => {
-      // Filter by past events setting
-      if (!includePastEvents.value && isPastDate(event.start)) {
-        return false;
-      }
-      return true;
-    })
-    .map((event) => {
-      // VueCal expects Date objects when time is disabled
-      // Only pass title (no content/description) for clean display
-      return {
-        start: event.start, // Use Date object directly
-        end: event.end, // Use Date object directly
-        title: event.title, // Only title, no description
-        class: event.class,
-      };
-    });
-
-  return filtered;
-});
-
-// Filter events based on search query and selected categories
 const filteredEvents = computed(() => {
-  return events.value.filter((event) => {
-    // Filter by past events setting
-    if (!includePastEvents.value && isPastDate(event.start)) {
-      return false;
-    }
+  if (!eventsData.value) return []
+  return eventsData.value.filter((event) => {
+    if (!includePastEvents.value && new Date(event.startDate) < now) return false
+    if (activeFilter.value !== 'all' && event.eventType !== activeFilter.value) return false
+    return true
+  })
+})
 
-    // Filter by search query
-    if (searchQuery.value) {
-      const query = searchQuery.value.toLowerCase();
-      const matchesTitle = event.title.toLowerCase().includes(query);
-      const matchesDescription =
-        event.content?.toLowerCase().includes(query) || false;
-      if (!matchesTitle && !matchesDescription) {
-        return false;
-      }
-    }
-
-    // Filter by selected categories
-    if (selectedCategories.value.length > 0) {
-      if (!selectedCategories.value.includes(event.eventType)) {
-        return false;
-      }
-    }
-
-    return true;
-  });
-});
-
-// Get active event series
 const activeSeries = computed(() => {
-  if (!seriesData.value) return [];
+  if (!seriesData.value) return []
   return seriesData.value.filter(
-    (series) =>
-      series.status === "active" || series.isOngoing || series.isUpcoming,
-  );
-});
+    (s) => s.status === 'active' || s.isOngoing || s.isUpcoming,
+  )
+})
 
-// Get upcoming events (future events, respecting filters)
-const upcomingEvents = computed(() => {
-  const now = new Date();
-  return filteredEvents.value
-    .filter((event) => event.start > now)
-    .sort((a, b) => a.start - b.start)
-    .slice(0, 10); // Show max 10 upcoming events
-});
+const formatDate = (dateStr) => {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
 
-// Format event date for display
-const formatEventDate = (date) => {
-  const dateObj = date instanceof Date ? date : new Date(date);
-  return new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  }).format(dateObj);
-};
-
-// Get optimized Cloudinary image URL
-const getOptimizedImageUrl = (publicId, transformations) => {
-  if (!publicId) return "";
-
-  const config = useRuntimeConfig();
-  return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`;
-};
-
-// Get image URL with fallback logic
-const getImageUrl = (featureImage) => {
-  if (!featureImage) return "";
-
-  // If we have a direct URL, use it as primary (since seed data uses external URLs)
-  if (featureImage.url) {
-    return featureImage.url;
-  }
-
-  // Fallback to Cloudinary if we have a publicId
-  if (featureImage.publicId) {
-    return getOptimizedImageUrl(featureImage.publicId, "w_400,h_200,c_fill");
-  }
-
-  return "";
-};
-
-// Handle image loading errors
-const handleImageError = (event) => {
-  console.warn("Image failed to load:", event.target.src);
-  // Optionally hide the image container or show a placeholder
-};
-
-// Handle calendar event click
-const onEventClick = (event) => {
-  if (event.id) {
-    navigateTo(`/events/${event.slug || event.id}`);
-  }
-};
-
-// Series helper functions
-const formatSeriesType = (type) => {
-  const types = {
-    workshop_series: "Workshop Series",
-    recurring_meetup: "Recurring Meetup",
-    multi_day: "Multi-Day Event",
-    course: "Course",
-    tournament: "Tournament",
-  };
-  return types[type] || type;
-};
-
-const getSeriesTypeBadgeClass = (type) => {
-  const classes = {
-    workshop_series:
-      "bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
-    recurring_meetup:
-      "bg-guild-800 text-guild-300 dark:bg-guild-700/30 dark:text-guild-300",
-    multi_day:
-      "bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
-    course:
-      "bg-candlelight-900/20 text-candlelight-500 dark:bg-candlelight-900/30 dark:text-candlelight-400",
-    tournament: "bg-ember-900/20 text-ember-500 dark:bg-ember-900/30 dark:text-ember-400",
-  };
-  return (
-    classes[type] ||
-    "bg-guild-800 text-guild-400 dark:bg-guild-700/30 dark:text-guild-400"
-  );
-};
+const isAlmostFull = (event) => {
+  if (!event.maxAttendees) return false
+  return (event.registeredCount || 0) / event.maxAttendees > 0.8
+}
 </script>
 
 <style scoped>
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.hero {
+  padding: 32px 32px 24px;
+  border-bottom: 1px dashed var(--border);
 }
-
-/* Calendar styling based on tranzac design principles */
-.guild-calendar :deep(.vuecal__event) {
-  border-radius: 0.5rem;
-  border: 2px solid #292524;
-  transform: translateZ(0);
-  transition: transform 300ms;
-}
-
-.guild-calendar :deep(.vuecal__event:hover) {
-  transform: scale(1.05);
-}
-
-.guild-calendar :deep(.vuecal__event-title) {
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.guild-calendar :deep(.vuecal__event-time) {
-  display: none;
-}
-
-.guild-calendar :deep(.vuecal__event.event-community) {
-  background-color: var(--color-guild-400);
-  color: #f5f5f4;
-  border-color: var(--color-guild-500);
-}
-
-.guild-calendar :deep(.vuecal__event.event-workshop) {
-  background-color: var(--color-candlelight-500);
-  color: #f5f5f4;
-  border-color: var(--color-candlelight-600);
-}
-
-.guild-calendar :deep(.vuecal__event.event-social) {
-  background-color: var(--color-guild-400);
-  color: #f5f5f4;
-  border-color: var(--color-guild-500);
-}
-
-.guild-calendar :deep(.vuecal__event.event-showcase) {
-  background-color: var(--color-ember-400);
-  color: #f5f5f4;
-  border-color: var(--color-ember-500);
-}
-
-#event-calendar {
-  .vuecal__cell-events-count {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.25rem;
-    left: auto;
-    background-color: transparent;
-    color: #f5f5f4;
-    font-weight: 700;
-    font-size: 1.25rem;
-  }
-
-  .month-view .vuecal__cell--today,
-  .vuecal__cell--today {
-    background-color: rgba(184, 135, 58, 0.15);
-    color: #f5f5f4;
-    border: 2px solid var(--color-candlelight-500) !important;
-
-    .day-of-month {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .day-of-month::before {
-      content: "Today";
-      text-transform: uppercase;
-      font-size: 0.75rem;
-      margin-right: 0.5rem;
-      display: none;
-      color: var(--color-candlelight-500);
-      font-weight: 600;
-    }
-
-    @media (min-width: 768px) {
-      .day-of-month::before {
-        display: block;
-      }
-    }
-  }
-
-  .vuecal__cell--selected {
-    background-color: transparent;
-  }
-
-  .past-date {
-    background-color: rgba(120, 113, 108, 0.1);
-    color: #78716c;
-  }
-
-  .vuecal__cell--has-events {
-  }
-
-  .vuecal__cell--disabled {
-  }
-
-  .vuecal__cell-events {
-  }
-
-  .vuecal__event {
-    border-radius: 0.5rem;
-    border: 2px solid #3a3a3a;
-    transform: translateZ(0);
-    transition: transform 300ms;
-
-    &:hover {
-      transform: scale(1.05);
-    }
-
-    &.vuecal__event--selected {
-      background-color: #2a2a2a;
-    }
-
-    .vuecal__cell--today {
-      background-color: transparent;
-    }
-
-    .vuecal__event-title {
-      font-weight: 700;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      color: #f5f5f4;
-    }
-
-    .vuecal__event-time {
-      font-weight: 400;
-      color: #a8a29e;
-    }
-
-    &.event-community {
-      background-color: var(--color-guild-400);
-      color: #f5f5f4;
-      border-color: var(--color-guild-500);
-    }
-
-    &.event-workshop {
-      background-color: var(--color-candlelight-500);
-      color: #f5f5f4;
-      border-color: var(--color-candlelight-600);
-    }
-
-    &.event-social {
-      background-color: var(--color-guild-400);
-      color: #f5f5f4;
-      border-color: var(--color-guild-500);
-    }
-
-    &.event-showcase {
-      background-color: var(--color-ember-400);
-      color: #f5f5f4;
-      border-color: var(--color-ember-500);
-    }
-  }
-
-  .vuecal__cell.vuecal__cell--out-of-scope {
-    pointer-events: none;
-    cursor: not-allowed;
-    border: none;
-  }
-
-  .outOfScope {
-    height: 100%;
-    width: 100%;
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.5);
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  :not(.vuecal__cell--out-of-scope) .vuecal__cell {
-    border: 1px solid #3a3a3a;
-  }
-
-  .vuecal__cell:before {
-    border: none;
-  }
-
-  .vuecal__title-bar {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-}
-
-/* Ghost calendar theme */
-.guild-calendar {
-  --vuecal-primary-color: #fff;
-  --vuecal-text-color: #e7e5e4;
-  --vuecal-border-color: #57534e;
-  --vuecal-header-color: #1c1917;
-  --vuecal-today-color: #292524;
-  background-color: #292524;
-}
-
-.guild-calendar :deep(.vuecal__bg) {
-  background-color: #292524;
-}
-
-.guild-calendar :deep(.vuecal__header) {
-  background-color: #1c1917;
-  border-bottom: 1px solid #57534e;
-}
-
-.guild-calendar :deep(.vuecal__title-bar) {
-  background-color: #1c1917;
-}
-
-.guild-calendar :deep(.vuecal__title) {
-  color: #e7e5e4;
+.hero h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
   font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+.hero p {
+  color: var(--text-dim);
+  font-size: 13px;
+  line-height: 1.7;
+  max-width: 460px;
 }
 
-.guild-calendar :deep(.vuecal__weekdays-headings) {
-  background-color: #1c1917;
-  border-bottom: 1px solid #57534e;
+/* ---- EVENT LIST ---- */
+.event-list-full {
+  padding: 0 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.event-row {
+  display: grid;
+  grid-template-columns: 80px 1fr auto auto;
+  gap: 16px;
+  align-items: baseline;
+  padding: 12px 0;
+  border-bottom: 1px dashed var(--border);
+  transition: padding-left 0.2s;
+}
+.event-row:first-child { padding-top: 16px; }
+.event-row:last-child { border-bottom: none; padding-bottom: 16px; }
+.event-row:hover { padding-left: 4px; }
+.event-date { color: var(--text-faint); font-size: 12px; white-space: nowrap; }
+.event-info { min-width: 0; }
+.event-title { color: var(--text); font-size: 13px; }
+.event-title a { color: var(--text); text-decoration: none; }
+.event-title a:hover { color: var(--candle); }
+.event-type { font-size: 10px; color: var(--text-faint); margin-top: 1px; }
+.event-capacity { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
+.seats-warn { color: var(--ember); }
+
+/* ---- FULL SECTION ---- */
+.full-section {
+  padding: 32px;
+  border-bottom: 1px dashed var(--border);
 }
 
-.guild-calendar :deep(.vuecal__heading) {
-  color: #a8a29e;
+/* ---- SERIES ---- */
+.series-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+  border: 1px dashed var(--border);
+}
+.series-box {
+  padding: 20px;
+  border-right: 1px dashed var(--border);
+  text-decoration: none;
+  transition: background 0.15s;
+}
+.series-box:last-child { border-right: none; }
+.series-box:hover { background: var(--surface-hover); }
+.series-box h3 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 16px;
   font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 4px;
+}
+.series-desc {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.6;
+  margin-bottom: 8px;
+}
+.series-meta {
+  font-size: 10px;
+  color: var(--text-faint);
+  display: flex;
+  gap: 12px;
+  align-items: center;
 }
 
-.guild-calendar :deep(.vuecal__cell) {
-  background-color: #292524;
-  border-color: #57534e;
-  color: #e7e5e4;
+/* ---- PROPOSE ---- */
+.full-section h3 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 4px;
+}
+.full-section p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  max-width: 560px;
+}
+.cta {
+  display: inline-block;
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--candle);
 }
 
-.guild-calendar :deep(.vuecal__cell:hover) {
-  background-color: #44403c;
-  border-color: #78716c;
+.filter-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-faint);
+  cursor: pointer;
+}
+.filter-toggle input {
+  accent-color: var(--candle-dim);
 }
 
-.guild-calendar :deep(.vuecal__cell-content) {
-  color: #e7e5e4;
+.empty {
+  padding: 24px 0;
+  color: var(--text-faint);
+  font-size: 12px;
 }
 
-.guild-calendar :deep(.vuecal__cell--today) {
-  background-color: rgba(184, 135, 58, 0.1);
-  border: 2px solid var(--color-candlelight-500);
-}
-
-.guild-calendar :deep(.vuecal__cell--out-of-scope) {
-  background-color: #1c1917;
-  color: #78716c;
-}
-
-.guild-calendar :deep(.vuecal__arrow) {
-  color: #a8a29e;
-}
-
-.guild-calendar :deep(.vuecal__arrow:hover) {
-  background-color: #44403c;
-}
-
-.guild-calendar :deep(.vuecal__today-btn) {
-  background-color: #44403c;
-  color: #fff;
-  border: 1px solid #78716c;
-  font-weight: 600;
-}
-
-.guild-calendar :deep(.vuecal__today-btn:hover) {
-  background-color: #57534e;
-  border-color: #a8a29e;
-}
-
-.guild-calendar :deep(.vuecal__view-btn),
-.guild-calendar :deep(button[class*="view"]) {
-  background-color: #44403c !important;
-  color: #ffffff !important;
-  border: 1px solid #78716c !important;
-  font-weight: 600 !important;
-}
-
-.guild-calendar :deep(.vuecal__view-btn:hover),
-.guild-calendar :deep(button[class*="view"]:hover) {
-  background-color: #57534e !important;
-  border-color: #a8a29e !important;
-  color: #ffffff !important;
-}
-
-.guild-calendar :deep(.vuecal__view-btn--active),
-.guild-calendar :deep(button[class*="view"][class*="active"]) {
-  background-color: #0c0a09 !important;
-  color: #ffffff !important;
-  border-color: #a8a29e !important;
-}
-
-.guild-calendar :deep(.vuecal__view-btn--active:hover),
-.guild-calendar :deep(button[class*="view"][class*="active"]:hover) {
-  background-color: #1c1917 !important;
-  border-color: #d6d3d1 !important;
-  color: #ffffff !important;
-}
-
-.guild-calendar :deep(.vuecal__title-bar button) {
-  color: #ffffff !important;
-  font-weight: 600 !important;
-}
-
-.guild-calendar :deep(.vuecal__title-bar .default-view-btn) {
-  background-color: #44403c !important;
-  color: #ffffff !important;
-  border: 1px solid #78716c !important;
-}
-
-.guild-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
-  background-color: #0c0a09 !important;
-  border-color: #a8a29e !important;
-}
-
-/* Responsive calendar */
-.vuecal {
-  border-radius: 0.75rem;
-  overflow: hidden;
-}
-
-.vuecal__header {
-  background-color: var(--vuecal-header-color);
-  color: var(--vuecal-text-color);
-}
-
-.vuecal__title {
-  color: var(--vuecal-primary-color);
-  font-weight: 600;
+@media (max-width: 768px) {
+  .event-row {
+    grid-template-columns: 60px 1fr;
+    gap: 8px;
+  }
+  .event-capacity { display: none; }
+  .series-grid { grid-template-columns: 1fr; }
+  .series-box { border-right: none; border-bottom: 1px dashed var(--border); }
+  .series-box:last-child { border-bottom: none; }
 }
 </style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 125a162..0899f1b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,186 +1,270 @@
 <template>
-  <div class="max-w-6xl mx-auto px-6 md:px-8">
-    <!-- Hero Section -->
-    <section class="py-16 md:py-24 ink-grain">
-      <div class="max-w-2xl">
-        <h1
-          class="text-display-xl font-light text-guild-100 leading-tight mb-2"
-        >
-          Build your co-op studio
-        </h1>
-        <p
-          class="text-display-xl font-light text-guild-500 leading-tight mb-8"
-        >
-          with people who get it.
-        </p>
+  <div>
+    <!-- HERO -->
+    <div class="hero">
+      <h1>Ghost Guild is where game developers practice cooperative business models.</h1>
+      <p>Resources, events, and a community of people figuring it out. Three circles, no hierarchy. $0–50/mo, pay what you can.</p>
+      <div class="hero-links">
+        <NuxtLink to="/join" class="hero-link primary">Become a member</NuxtLink>
+        <NuxtLink to="/wiki" class="hero-link">Read the wiki</NuxtLink>
+        <NuxtLink to="/about" class="hero-link">What is this?</NuxtLink>
+      </div>
+    </div>
 
-        <p class="text-lg text-guild-400 leading-relaxed mb-8 max-w-xl">
-          Ghost Guild is a peer community for game developers exploring
-          cooperative models. Find support, share knowledge, grow together.
-        </p>
+    <!-- THREE CIRCLES -->
+    <div class="content-row">
+      <div v-for="circle in circleData" :key="circle.value" class="content-block">
+        <div class="label" :style="{ color: `var(--c-${circle.value})` }">{{ circle.label }}</div>
+        <h2>{{ circle.metaphor }}</h2>
+        <p>{{ circle.blurb }}</p>
+        <details>
+          <summary>What's included?</summary>
+          <p>{{ circle.included }}</p>
+        </details>
+      </div>
+    </div>
 
-        <!-- Signup Form -->
-        <form @submit.prevent="handleJoinSubmit" class="mb-4">
-          <div class="flex flex-col sm:flex-row gap-3">
-            <UInput
-              v-model="joinEmail"
-              type="email"
-              placeholder="your.email@example.com"
-              size="lg"
-              class="flex-1"
-              :disabled="isSubmitting"
-            />
-            <UButton
-              type="submit"
-              size="lg"
-              :loading="isSubmitting"
-              :disabled="!isEmailValid"
-            >
-              Join Us
-            </UButton>
+    <!-- UPCOMING EVENTS + WIKI -->
+    <div class="content-row two-col">
+      <div class="content-block">
+        <div class="label">Upcoming Events</div>
+        <div v-if="events?.length" class="event-list">
+          <div v-for="event in events" :key="event._id" class="event-item">
+            <span class="event-date">{{ formatDate(event.date) }}</span>
+            <span class="event-title">
+              <NuxtLink :to="`/events/${event._id}`">{{ event.title }}</NuxtLink>
+            </span>
+            <CircleBadge v-if="event.circle" :circle="event.circle" />
           </div>
-        </form>
-
-        <p class="text-sm text-guild-600">Free to join. Pay what you can.</p>
-
-        <!-- Success/Error Messages -->
-        <div
-          v-if="submitSuccess"
-          class="mt-4 p-3 bg-primary-500/10 border border-primary-500/30 rounded-lg"
-        >
-          <p class="text-primary-400 text-sm">
-            Check your email to complete signup!
-          </p>
         </div>
-        <div
-          v-if="submitError"
-          class="mt-4 p-3 bg-ember-900/20 border border-ember-500/30 rounded-lg"
-        >
-          <p class="text-ember-400 text-sm">{{ submitError }}</p>
+        <p v-else class="empty">No upcoming events</p>
+      </div>
+      <div class="content-block">
+        <div class="label">Recently in the Wiki</div>
+        <div class="wiki-list">
+          <div class="wiki-item">
+            <a href="/wiki">Revenue sharing models</a>
+          </div>
+          <div class="wiki-item">
+            <a href="/wiki">What is a cooperative studio?</a>
+          </div>
+          <div class="wiki-item">
+            <a href="/wiki">Governance structures</a>
+          </div>
+          <div class="wiki-item">
+            <a href="/wiki">Legal incorporation guide</a>
+          </div>
         </div>
       </div>
-    </section>
+    </div>
 
-    <GuildDivider variant="woodcut" />
-
-    <!-- Value Props Section -->
-    <section class="py-16">
-      <div class="grid md:grid-cols-3 gap-8 md:gap-12">
-        <div>
-          <p class="text-ui-label text-candlelight-400 mb-3">Peer Support</p>
-          <p class="text-guild-400 leading-relaxed">
-            Connect with founders at your stage and practitioners who've been
-            there. Real conversations, real help.
-          </p>
-        </div>
-        <div>
-          <p class="text-ui-label text-candlelight-400 mb-3">
-            Shared Knowledge
-          </p>
-          <p class="text-guild-400 leading-relaxed">
-            Templates, governance docs, financial models—tools built by co-ops,
-            for co-ops. All members get full access.
-          </p>
-        </div>
-        <div>
-          <p class="text-ui-label text-candlelight-400 mb-3">
-            Solidarity Economics
-          </p>
-          <p class="text-guild-400 leading-relaxed">
-            Those who can, support those who can't. No tiers, no gatekeeping.
-            Everyone gets everything.
-          </p>
-        </div>
-      </div>
-    </section>
-
-    <GuildDivider variant="woodcut" />
-
-    <!-- Circles Section -->
-    <section class="py-16">
-      <p class="text-ui-label text-guild-600 mb-8">Find your people</p>
-
-      <div class="space-y-4 mb-8">
-        <NuxtLink
-          v-for="circle in circles"
-          :key="circle.value"
-          to="/about/circles"
-          class="flex items-baseline gap-8 group py-2"
-        >
-          <span
-            class="text-guild-300 group-hover:text-guild-100 transition-colors w-32 md:w-40"
-          >
-            {{ circle.label }}
-          </span>
-          <span class="text-guild-600">
-            {{ circle.shortDescription }}
-          </span>
-        </NuxtLink>
-      </div>
-
-      <p class="text-sm text-guild-600 italic">
-        These reflect your journey, not your status. Move between them as you
-        grow.
-      </p>
-    </section>
-
-    <GuildDivider variant="woodcut" />
-
-    <!-- Bottom CTA Section -->
-    <section class="py-24 text-center">
-      <p class="text-ui-label text-guild-600 mb-4">Part of the Baby Ghosts family</p>
-      <h2 class="text-display font-light text-guild-200 mb-8">
-        Ready to find your people?
-      </h2>
-      <UButton
-        to="/join"
-        variant="outline"
-        size="lg"
-        class="hover:bg-primary-500/10"
-      >
-        Become a Ghostie
-      </UButton>
-    </section>
+    <!-- PARCHMENT INSET -->
+    <ParchmentInset>
+      <div class="label" style="color: var(--candle-faint); opacity: 0.6; margin-bottom: 12px;">From the Wiki</div>
+      <h2>What is a cooperative studio?</h2>
+      <p>A cooperative studio is a game development company owned and governed by the people who work there. Decisions are made collectively. Profits are shared according to contribution, not ownership stake.</p>
+      <p>The games industry is full of stories about crunch, layoffs, and studios that extract value from workers. Cooperatives are one alternative — not the only one, but one worth <a href="/wiki">practicing together</a>.</p>
+      <p><a href="/wiki">Read more in the wiki &rarr;</a></p>
+    </ParchmentInset>
   </div>
 </template>
 
 <script setup>
-import { getCircleOptions } from "~/config/circles";
-
 definePageMeta({
   layout: "default",
-});
+})
 
-const circles = getCircleOptions();
+const { data: events } = await useFetch('/api/events', {
+  query: { limit: 4, upcoming: true },
+  default: () => [],
+})
 
-// Join form state
-const joinEmail = ref("");
-const isSubmitting = ref(false);
-const submitSuccess = ref(false);
-const submitError = ref("");
+const circleData = [
+  {
+    value: 'community',
+    label: 'Community',
+    metaphor: 'The open hall',
+    blurb: 'Arrival, curiosity, orientation. For anyone exploring cooperative models in game development. Access the wiki, public events, and Slack.',
+    included: 'Wiki access, public events, Slack community, monthly guild meetings. Free or pay-what-you-can.',
+  },
+  {
+    value: 'founder',
+    label: 'Founder',
+    metaphor: 'The workshop',
+    blurb: 'For people actively building cooperatives. Structured practice, peer support, templates, and hands-on resources.',
+    included: 'Everything in Community plus the peer accelerator, 1:1 mentorship matching, and Founder-only workshops.',
+  },
+  {
+    value: 'practitioner',
+    label: 'Practitioner',
+    metaphor: 'The alcove',
+    blurb: 'Where experience is shared and knowledge given back. Teaching, advising, shaping the program itself.',
+    included: 'Everything in Founder plus the ability to mentor, propose events, contribute to the wiki, and help govern the Guild.',
+  },
+]
 
-const isEmailValid = computed(() => {
-  return joinEmail.value && joinEmail.value.includes("@");
-});
-
-const handleJoinSubmit = async () => {
-  if (!isEmailValid.value || isSubmitting.value) return;
-
-  isSubmitting.value = true;
-  submitSuccess.value = false;
-  submitError.value = "";
-
-  try {
-    // Redirect to join page with email pre-filled
-    await navigateTo({
-      path: "/join",
-      query: { email: joinEmail.value },
-    });
-  } catch (err) {
-    console.error("Join error:", err);
-    submitError.value = "Something went wrong. Please try again.";
-  } finally {
-    isSubmitting.value = false;
-  }
-};
+const formatDate = (dateStr) => {
+  if (!dateStr) return ''
+  const d = new Date(dateStr)
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+}
 </script>
+
+<style scoped>
+/* ---- HERO ---- */
+.hero {
+  padding: 48px 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.hero h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 36px;
+  font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+  max-width: 540px;
+}
+.hero p {
+  color: var(--text-dim);
+  max-width: 460px;
+  line-height: 1.7;
+  margin-bottom: 20px;
+}
+.hero-links {
+  display: flex;
+  gap: 16px;
+  font-size: 13px;
+}
+.hero-link {
+  color: var(--candle);
+  padding: 6px 16px;
+  border: 1px dashed var(--candle-faint);
+  transition: all 0.2s;
+  text-decoration: none;
+}
+.hero-link:hover {
+  border-color: var(--candle);
+  border-style: solid;
+  text-decoration: none;
+}
+.hero-link.primary {
+  background: var(--candle);
+  color: var(--bg);
+  border-color: var(--candle);
+  border-style: solid;
+}
+.hero-link.primary:hover {
+  background: var(--candle-dim);
+  border-color: var(--candle-dim);
+}
+
+/* ---- CONTENT GRID ---- */
+.content-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-bottom: 1px dashed var(--border);
+}
+.content-row.two-col {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.content-block {
+  padding: 24px 28px;
+  border-right: 1px dashed var(--border);
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.content-block:last-child { border-right: none; }
+.content-block h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+.content-block p {
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.65;
+}
+.content-block .label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: 8px;
+}
+
+/* ---- DETAILS ---- */
+details {
+  margin-top: 12px;
+}
+details summary {
+  font-size: 12px;
+  color: var(--candle-dim);
+  cursor: pointer;
+  list-style: none;
+}
+details summary::before {
+  content: '+ ';
+}
+details[open] summary::before {
+  content: '− ';
+}
+details p {
+  margin-top: 8px;
+}
+
+/* ---- EVENT LIST ---- */
+.event-item {
+  display: grid;
+  grid-template-columns: 80px 1fr auto;
+  gap: 16px;
+  align-items: baseline;
+  padding: 10px 0;
+  border-bottom: 1px dashed var(--border);
+  transition: padding-left 0.2s;
+}
+.event-item:last-child { border-bottom: none; }
+.event-item:hover { padding-left: 4px; }
+.event-date { color: var(--text-faint); font-size: 12px; }
+.event-title { color: var(--text); font-size: 13px; }
+.event-title a { color: var(--text); text-decoration: none; }
+.event-title a:hover { color: var(--candle); }
+
+/* ---- WIKI LIST ---- */
+.wiki-item {
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+  font-size: 13px;
+}
+.wiki-item:last-child { border-bottom: none; }
+.wiki-item a { color: var(--text); text-decoration: none; }
+.wiki-item a:hover { color: var(--candle); }
+
+.empty {
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 768px) {
+  .content-row,
+  .content-row.two-col {
+    grid-template-columns: 1fr;
+  }
+  .content-block {
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+  }
+  .content-block:last-child { border-bottom: none; }
+  .hero-links {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .hero-link {
+    text-align: center;
+  }
+}
+</style>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 447d339..e90c1ae 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -1,404 +1,305 @@
 <template>
   <div>
-    <!-- Page Header - Context aware -->
-    <PageHeader
-      v-if="!isAuthenticated"
-      title="Join Ghost Guild"
-      subtitle=""
-      size="large"
-    />
-    <PageHeader
-      v-else
-      title="You're Already a Member!"
-      :subtitle="`Welcome back, ${memberData?.name || 'member'}. You're already part of Ghost Guild in the ${memberData?.circle || 'community'} circle.`"
-      size="large"
-    />
+    <!-- HERO -->
+    <div class="hero">
+      <h1>Join Ghost Guild</h1>
+      <p>Resources, events, and a community of people figuring it out. Everyone gets everything. Pay what you can.</p>
+    </div>
 
-    <!-- How Ghost Guild Works -->
-    <section class="py-20 bg-[--ui-bg-elevated]">
-      <UContainer>
-        <div class="max-w-2xl">
-          <h2 class="text-display font-bold text-[--ui-text] mb-6">
-            How Membership Works
-          </h2>
-          <p class="text-lg text-[--ui-text] mb-4">
-            Every member gets full access to our resource library, workshops,
-            events, Slack community, and peer support. Your circle connects you
-            with other folks and resources for your stage.
-          </p>
-          <p class="text-lg text-[--ui-text]">
-            Contribute what you can afford ($0–50+/month). Higher contributions
-            create solidarity spots for those who need them. You can adjust
-            anytime.
-          </p>
-        </div>
-      </UContainer>
-    </section>
+    <!-- Already a member -->
+    <template v-if="isAuthenticated">
+      <div class="full-section">
+        <h2>You're already a member</h2>
+        <p class="section-intro">
+          Welcome back, {{ memberData?.name || 'member' }}. You're part of Ghost Guild in the
+          <span class="capitalize">{{ memberData?.circle || 'community' }}</span> circle.
+        </p>
 
-    <!-- Membership Sign Up Form -->
-    <section v-if="!isAuthenticated" class="py-20 bg-[--ui-bg]">
-      <UContainer class="max-w-4xl">
-        <div class="text-center mb-12">
-          <h2 class="text-display font-bold text-[--ui-text] mb-4">
-            Membership Sign Up
-          </h2>
+        <div class="member-info-grid">
+          <DashedBox :hoverable="false">
+            <div class="section-label">Circle</div>
+            <div class="info-value capitalize">{{ memberData?.circle || 'Community' }}</div>
+          </DashedBox>
+          <DashedBox :hoverable="false">
+            <div class="section-label">Contribution</div>
+            <div class="info-value">${{ memberData?.contributionTier || '0' }} CAD/month</div>
+          </DashedBox>
         </div>
 
-        <!-- Step Indicators -->
-        <div class="flex justify-center mb-8">
-          <div class="flex items-center space-x-4">
-            <div class="flex items-center">
-              <div
-                :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
-                  currentStep >= 1
-                    ? 'bg-guild-800 text-candlelight-400'
-                    : 'bg-guild-700 text-guild-500',
-                ]"
-              >
-                1
-              </div>
-              <span
-                class="ml-2 font-medium"
-                :class="
-                  currentStep === 1 ? 'text-[--ui-text]' : 'text-guild-500'
-                "
-              >
-                Information
-              </span>
-            </div>
+        <div class="button-row">
+          <NuxtLink to="/member/dashboard" class="form-submit">Go to Dashboard</NuxtLink>
+          <NuxtLink to="/member/profile" class="btn">Edit Profile</NuxtLink>
+        </div>
+      </div>
 
-            <div v-if="needsPayment" class="w-16 h-1 bg-guild-700">
-              <div
-                class="h-full bg-candlelight-500 transition-all"
-                :style="{ width: currentStep >= 2 ? '100%' : '0%' }"
-              />
-            </div>
+      <ParchmentInset>
+        <h2>Want to change your circle or contribution?</h2>
+        <p>You can update your circle and adjust your monthly contribution at any time from your profile settings.</p>
+        <NuxtLink to="/member/profile" class="parchment-link">Update Membership Settings</NuxtLink>
+      </ParchmentInset>
+    </template>
 
-            <div v-if="needsPayment" class="flex items-center">
-              <div
-                :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
-                  currentStep >= 2
-                    ? 'bg-guild-800 text-candlelight-400'
-                    : 'bg-guild-700 text-guild-500',
-                ]"
-              >
-                2
-              </div>
-              <span
-                class="ml-2 font-medium"
-                :class="
-                  currentStep === 2 ? 'text-[--ui-text]' : 'text-guild-500'
-                "
-              >
-                Payment
-              </span>
-            </div>
+    <!-- Not authenticated: show full join page -->
+    <template v-else>
+      <!-- HOW MEMBERSHIP WORKS -->
+      <ParchmentInset>
+        <h2>How membership works</h2>
+        <ul>
+          <li>Full access to the knowledge commons, events, Slack community, and peer support</li>
+          <li>One member, one vote in all decisions</li>
+          <li>Your circle is where you are in your journey, not rank</li>
+          <li>Your contribution is what you can afford ($0--50+/month, separate from your circle)</li>
+          <li>Higher contributions create solidarity spots for those who need them</li>
+        </ul>
+      </ParchmentInset>
 
-            <div class="w-16 h-1 bg-guild-700">
-              <div
-                class="h-full bg-candlelight-500 transition-all"
-                :style="{ width: currentStep >= 3 ? '100%' : '0%' }"
-              />
-            </div>
+      <!-- THREE CIRCLES -->
+      <div class="content-row">
+        <div class="content-block">
+          <div class="section-label" style="color: var(--c-community);">Community</div>
+          <h2>Exploring</h2>
+          <p>For game workers curious about cooperatives and people exploring alternative work models. You might be a solo developer, a student, a researcher, or just someone who heard about this and wants to know more. Start here.</p>
+          <p class="circle-not-sure">Not sure where you fit? Start with Community. You can always move later.</p>
+        </div>
+        <div class="content-block">
+          <div class="section-label" style="color: var(--c-founder);">Founder</div>
+          <h2>Building</h2>
+          <p>For people actively building cooperative studios. You have a team, or you are forming one. You are working through governance, legal structure, revenue sharing, and all the hard parts. You want structured support and peers doing the same thing.</p>
+        </div>
+        <div class="content-block">
+          <div class="section-label" style="color: var(--c-practitioner);">Practitioner</div>
+          <h2>Practicing</h2>
+          <p>For those already running cooperative studios or with deep experience in cooperative business. You are here to teach, advise, mentor, and help shape the program itself. Peer Accelerator alumni land here.</p>
+        </div>
+      </div>
 
-            <div class="flex items-center">
-              <div
-                :class="[
-                  'w-10 h-10 rounded-full flex items-center justify-center text-ui-mono font-semibold',
-                  currentStep >= 3
-                    ? 'bg-guild-800 text-candlelight-400'
-                    : 'bg-guild-700 text-guild-500',
-                ]"
-              >
-                <span v-if="needsPayment">3</span>
-                <span v-else>2</span>
-              </div>
-              <span
-                class="ml-2 font-medium"
-                :class="
-                  currentStep === 3 ? 'text-[--ui-text]' : 'text-guild-500'
-                "
-              >
-                Confirmation
-              </span>
-            </div>
+      <!-- CONTRIBUTION TIERS -->
+      <div class="full-section">
+        <div class="section-label" style="margin-bottom: 12px;">Monthly Contribution</div>
+        <h2>Pay what you can</h2>
+        <div class="tier-row">
+          <div class="tier-card">
+            <div class="tier-amount">$0</div>
+            <div class="tier-freq">/month</div>
+            <div class="tier-desc">Access is a right</div>
+          </div>
+          <div class="tier-card">
+            <div class="tier-amount">$5</div>
+            <div class="tier-freq">/month</div>
+            <div class="tier-desc">A small gesture</div>
+          </div>
+          <div class="tier-card suggested">
+            <div class="tier-amount">$15</div>
+            <div class="tier-freq">/month</div>
+            <div class="tier-desc">Sustaining</div>
+            <div class="tier-badge">suggested</div>
+          </div>
+          <div class="tier-card">
+            <div class="tier-amount">$30</div>
+            <div class="tier-freq">/month</div>
+            <div class="tier-desc">Supporting</div>
+          </div>
+          <div class="tier-card">
+            <div class="tier-amount">$50</div>
+            <div class="tier-freq">/month</div>
+            <div class="tier-desc">Solidarity</div>
           </div>
         </div>
+        <p class="solidarity-note">Every dollar above $0 goes to the Solidarity Fund, which covers membership for people who need it. Higher tiers directly sponsor other members. Your contribution is never a gate -- it is a gift.</p>
+      </div>
+
+      <!-- SIGN UP FORM -->
+      <div v-if="currentStep === 1" class="form-section">
+        <h2>Become a member</h2>
+        <p class="form-intro">We will send you a magic link to confirm your email. No passwords, no fuss.</p>
 
         <!-- Error Message -->
-        <div v-if="errorMessage" class="mb-6">
-          <UAlert color="red" :title="errorMessage" />
+        <div v-if="errorMessage" class="error-box">
+          {{ errorMessage }}
         </div>
 
-        <!-- Step 1: Information -->
-        <div v-if="currentStep === 1" class="bg-[--ui-bg-elevated]">
-          <UForm :state="form" class="space-y-8" @submit="handleSubmit">
-            <!-- Personal Information -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <UFormField label="Full Name" name="name" required>
-                <UInput
-                  v-model="form.name"
-                  placeholder="Enter your full name"
-                  size="xl"
-                  class="w-full"
-                />
-              </UFormField>
-
-              <UFormField label="Email Address" name="email" required>
-                <UInput
-                  v-model="form.email"
-                  type="email"
-                  size="xl"
-                  class="w-full"
-                  placeholder="Enter your email address"
-                />
-              </UFormField>
+        <form @submit.prevent="handleSubmit">
+          <div class="form-grid">
+            <div class="form-group">
+              <label class="form-label" for="join-name">Full Name</label>
+              <input
+                id="join-name"
+                v-model="form.name"
+                class="form-input"
+                type="text"
+                placeholder="Your name"
+                required
+              />
             </div>
-
-            <!-- Circle Selection -->
-            <div>
-              <h3 class="text-lg font-semibold mb-4">Choose Your Circle</h3>
-              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                <label
-                  v-for="option in circleOptions"
-                  :key="option.value"
-                  class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
-                  :class="
-                    form.circle === option.value
-                      ? 'border-primary bg-primary/5'
-                      : 'border-neutral-200 hover:border-neutral-400'
-                  "
-                >
+            <div class="form-group">
+              <label class="form-label" for="join-email">Email Address</label>
+              <input
+                id="join-email"
+                v-model="form.email"
+                class="form-input"
+                type="email"
+                placeholder="you@example.com"
+                required
+              />
+            </div>
+            <div class="form-group full-width">
+              <label class="form-label">Circle</label>
+              <div class="circle-radios">
+                <div class="circle-radio community">
                   <input
+                    id="circle-community"
                     v-model="form.circle"
                     type="radio"
-                    :value="option.value"
                     name="circle"
-                    class="sr-only"
+                    value="community"
                   />
-                  <div class="font-medium text-lg mb-2">{{ option.label }}</div>
-                  <div class="text-sm text-[--ui-text-muted]">
-                    {{ option.description }}
-                  </div>
-                </label>
+                  <label for="circle-community">
+                    <span class="circle-label-name" style="color: var(--c-community);">Community</span>
+                    <span class="circle-label-desc">Exploring</span>
+                  </label>
+                </div>
+                <div class="circle-radio founder">
+                  <input
+                    id="circle-founder"
+                    v-model="form.circle"
+                    type="radio"
+                    name="circle"
+                    value="founder"
+                  />
+                  <label for="circle-founder">
+                    <span class="circle-label-name" style="color: var(--c-founder);">Founder</span>
+                    <span class="circle-label-desc">Building</span>
+                  </label>
+                </div>
+                <div class="circle-radio practitioner">
+                  <input
+                    id="circle-practitioner"
+                    v-model="form.circle"
+                    type="radio"
+                    name="circle"
+                    value="practitioner"
+                  />
+                  <label for="circle-practitioner">
+                    <span class="circle-label-name" style="color: var(--c-practitioner);">Practitioner</span>
+                    <span class="circle-label-desc">Practicing</span>
+                  </label>
+                </div>
               </div>
-              <p class="text-sm text-[--ui-text-muted] mt-3 italic">
-                Not sure? Start with Community - you can always move.
-              </p>
             </div>
-
-            <!-- Contribution Selection -->
-            <div>
-              <UFormField
-                label="Choose Your Monthly Contribution"
-                name="contributionTier"
-                required
+            <div class="form-group full-width">
+              <label class="form-label" for="join-contribution">Monthly Contribution</label>
+              <select
+                id="join-contribution"
+                v-model="form.contributionTier"
+                class="form-select"
               >
-                <USelect
-                  v-model="form.contributionTier"
-                  :items="contributionOptions"
-                  value-key="value"
-                  size="xl"
-                  class="w-full"
-                />
-              </UFormField>
+                <option value="0">$0/mo -- Access is a right</option>
+                <option value="5">$5/mo -- A small gesture</option>
+                <option value="15">$15/mo -- Sustaining (suggested)</option>
+                <option value="30">$30/mo -- Supporting</option>
+                <option value="50">$50/mo -- Solidarity</option>
+              </select>
             </div>
-
-            <!-- Submit Button -->
-            <div class="flex justify-center pt-6">
-              <UButton
+            <div class="form-group">
+              <button
+                class="form-submit"
                 type="submit"
-                :loading="isSubmitting"
-                :disabled="!isFormValid"
-                size="xl"
-                class="px-12"
+                :disabled="!isFormValid || isSubmitting"
               >
-                {{
-                  needsPayment ? "Continue to Payment" : "Complete Registration"
-                }}
-              </UButton>
+                <span v-if="isSubmitting">Processing...</span>
+                <span v-else-if="needsPayment">Continue to Payment</span>
+                <span v-else>Become a Member</span>
+              </button>
             </div>
-          </UForm>
+          </div>
+          <p class="form-note">By joining you agree to our <NuxtLink to="/guidelines">community guidelines</NuxtLink>. You can change your circle or contribution at any time from your dashboard. Payment is handled securely through <a href="https://www.helcim.com" target="_blank" rel="noopener">Helcim</a>.</p>
+        </form>
+      </div>
+
+      <!-- Step 2: Payment -->
+      <div v-if="currentStep === 2" class="form-section">
+        <h2>Payment Information</h2>
+        <p class="form-intro">
+          You're signing up for the {{ selectedTier.label }} plan --
+          ${{ selectedTier.amount }} CAD / month
+        </p>
+
+        <!-- Error Message -->
+        <div v-if="errorMessage" class="error-box">
+          {{ errorMessage }}
         </div>
 
-        <!-- Step 2: Payment -->
-        <div
-          v-if="currentStep === 2"
-          class="bg-[--ui-bg-elevated] rounded-xl p-8"
-        >
-          <div class="mb-6">
-            <h3 class="text-display-sm font-bold text-[--ui-text] mb-2">
-              Payment Information
-            </h3>
-            <p class="text-[--ui-text-muted]">
-              You're signing up for the {{ selectedTier.label }} plan
-            </p>
-            <p class="text-lg font-semibold text-[--ui-text] mt-2">
-              ${{ selectedTier.amount }} CAD / month
-            </p>
-          </div>
+        <DashedBox :hoverable="false">
+          <p class="payment-instruction">Click "Complete Payment" below to open the secure payment modal and verify your payment method.</p>
+        </DashedBox>
 
-          <!-- Payment Instructions -->
-          <div class="bg-[--ui-bg] rounded-lg p-6 mb-6">
-            <p class="text-[--ui-text]">
-              Click "Complete Payment" below to open the secure payment modal
-              and verify your payment method.
-            </p>
-          </div>
+        <div class="button-row" style="margin-top: 24px;">
+          <button
+            class="btn"
+            :disabled="isSubmitting"
+            @click="goBack"
+          >
+            Back
+          </button>
+          <button
+            class="form-submit"
+            :disabled="isSubmitting"
+            @click="processPayment"
+          >
+            <span v-if="isSubmitting">Processing...</span>
+            <span v-else>Complete Payment</span>
+          </button>
+        </div>
+      </div>
 
-          <!-- Action Buttons -->
-          <div class="flex justify-between pt-6">
-            <UButton
-              variant="outline"
-              size="lg"
-              @click="goBack"
-              :disabled="isSubmitting"
-            >
-              Back
-            </UButton>
-            <UButton size="lg" :loading="isSubmitting" @click="processPayment">
-              Complete Payment
-            </UButton>
-          </div>
+      <!-- Step 3: Confirmation -->
+      <div v-if="currentStep === 3" class="form-section">
+        <h2>Welcome to Ghost Guild!</h2>
+
+        <div v-if="successMessage" class="success-box">
+          {{ successMessage }}
         </div>
 
-        <!-- Step 3: Confirmation -->
-        <div
-          v-if="currentStep === 3"
-          class="bg-[--ui-bg-elevated] rounded-xl p-8"
-        >
-          <div class="text-center">
-            <div
-              class="w-20 h-20 bg-candlelight-900/20 rounded-full flex items-center justify-center mx-auto mb-6"
-            >
-              <svg
-                class="w-10 h-10 text-candlelight-400"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M5 13l4 4L19 7"
-                />
-              </svg>
+        <DashedBox :hoverable="false">
+          <div class="section-label" style="margin-bottom: 12px;">Membership Details</div>
+          <dl class="details-list">
+            <div class="details-row">
+              <dt>Name</dt>
+              <dd>{{ form.name }}</dd>
             </div>
-
-            <h3 class="text-display-sm font-bold text-[--ui-text] mb-4">
-              Welcome to Ghost Guild!
-            </h3>
-
-            <div v-if="successMessage" class="mb-6">
-              <UAlert color="green" :title="successMessage" />
+            <div class="details-row">
+              <dt>Email</dt>
+              <dd>{{ form.email }}</dd>
             </div>
-
-            <div class="bg-[--ui-bg] rounded-lg p-6 mb-6 text-left">
-              <h4 class="font-semibold mb-3">Membership Details:</h4>
-              <dl class="space-y-2">
-                <div class="flex justify-between">
-                  <dt class="text-[--ui-text-muted]">Name:</dt>
-                  <dd class="font-medium">{{ form.name }}</dd>
-                </div>
-                <div class="flex justify-between">
-                  <dt class="text-[--ui-text-muted]">Email:</dt>
-                  <dd class="font-medium">{{ form.email }}</dd>
-                </div>
-                <div class="flex justify-between">
-                  <dt class="text-[--ui-text-muted]">Circle:</dt>
-                  <dd class="font-medium capitalize">{{ form.circle }}</dd>
-                </div>
-                <div class="flex justify-between">
-                  <dt class="text-[--ui-text-muted]">Contribution:</dt>
-                  <dd class="font-medium">{{ selectedTier.label }}</dd>
-                </div>
-                <div v-if="customerCode" class="flex justify-between">
-                  <dt class="text-[--ui-text-muted]">Member ID:</dt>
-                  <dd class="font-medium">{{ customerCode }}</dd>
-                </div>
-              </dl>
+            <div class="details-row">
+              <dt>Circle</dt>
+              <dd class="capitalize">{{ form.circle }}</dd>
             </div>
-
-            <p class="text-[--ui-text-muted] mb-4">
-              We've sent a confirmation email to {{ form.email }} with your
-              membership details.
-            </p>
-
-            <div class="bg-[--ui-bg] rounded-lg p-4 mb-8">
-              <p class="text-[--ui-text] text-center">
-                You will be automatically redirected to your dashboard in a few
-                seconds...
-              </p>
+            <div class="details-row">
+              <dt>Contribution</dt>
+              <dd>{{ selectedTier.label }}</dd>
             </div>
-
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-              <UButton to="/member/dashboard" size="lg" class="px-8">
-                Go to Dashboard Now
-              </UButton>
-              <UButton variant="outline" size="lg" @click="resetForm">
-                Register Another Member
-              </UButton>
+            <div v-if="customerCode" class="details-row">
+              <dt>Member ID</dt>
+              <dd>{{ customerCode }}</dd>
             </div>
-          </div>
+          </dl>
+        </DashedBox>
+
+        <p class="form-note" style="margin-top: 20px;">
+          We've sent a confirmation email to {{ form.email }} with your membership details.
+        </p>
+
+        <DashedBox :hoverable="false" style="margin-top: 16px;">
+          <p class="redirect-note">You will be automatically redirected to your dashboard in a few seconds...</p>
+        </DashedBox>
+
+        <div class="button-row" style="margin-top: 24px;">
+          <NuxtLink to="/member/dashboard" class="form-submit">Go to Dashboard Now</NuxtLink>
+          <button class="btn" @click="resetForm">Register Another Member</button>
         </div>
-      </UContainer>
-    </section>
-
-    <!-- Member Info Section - Shows for logged-in members -->
-    <section v-if="isAuthenticated" class="py-20 bg-[--ui-bg]">
-      <UContainer class="max-w-4xl">
-        <div class="bg-[--ui-bg-elevated] rounded-xl p-8 mb-8">
-          <h2 class="text-display-sm font-bold text-[--ui-text] mb-6">
-            Your Membership
-          </h2>
-
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
-            <div class="bg-[--ui-bg] rounded-lg p-6">
-              <h3 class="text-sm font-medium text-[--ui-text-muted] mb-2">
-                Circle
-              </h3>
-              <p class="text-xl font-semibold text-[--ui-text] capitalize">
-                {{ memberData?.circle || "Community" }}
-              </p>
-            </div>
-
-            <div class="bg-[--ui-bg] rounded-lg p-6">
-              <h3 class="text-sm font-medium text-[--ui-text-muted] mb-2">
-                Contribution
-              </h3>
-              <p class="text-xl font-semibold text-[--ui-text]">
-                ${{ memberData?.contributionTier || "0" }} CAD/month
-              </p>
-            </div>
-          </div>
-
-          <div class="flex flex-col sm:flex-row gap-4">
-            <UButton to="/member/dashboard" size="lg">
-              Go to Dashboard
-            </UButton>
-            <UButton to="/member/profile" variant="outline" size="lg">
-              Edit Profile
-            </UButton>
-          </div>
-        </div>
-
-        <div class="bg-guild-800 rounded-lg p-6">
-          <h3 class="text-lg font-semibold text-[--ui-text] mb-3">
-            Want to change your circle or contribution?
-          </h3>
-          <p class="text-[--ui-text] mb-4">
-            You can update your circle and adjust your monthly contribution at
-            any time from your profile settings.
-          </p>
-          <UButton to="/member/profile" variant="soft" color="primary">
-            Update Membership Settings
-          </UButton>
-        </div>
-      </UContainer>
-    </section>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -651,3 +552,478 @@ onUnmounted(() => {
   cleanupHelcimPay();
 });
 </script>
+
+<style scoped>
+/* ---- HERO ---- */
+.hero {
+  padding: 48px 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.hero h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 36px;
+  font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+  margin-bottom: 16px;
+  max-width: 540px;
+}
+.hero p {
+  color: var(--text-dim);
+  max-width: 460px;
+  line-height: 1.7;
+}
+
+/* ---- PARCHMENT LIST STYLES ---- */
+:deep(.parchment-inset ul) {
+  list-style: none;
+  max-width: 560px;
+  padding: 0;
+}
+:deep(.parchment-inset ul li) {
+  font-size: 13px;
+  color: #c8bea8;
+  line-height: 1.75;
+  padding: 4px 0;
+  padding-left: 16px;
+  position: relative;
+}
+:deep(.parchment-inset ul li::before) {
+  content: "--";
+  position: absolute;
+  left: 0;
+  color: var(--candle-dim);
+  opacity: 0.5;
+}
+
+.parchment-link {
+  color: var(--candle-faint);
+  font-size: 12px;
+}
+.parchment-link:hover {
+  color: var(--candle-dim);
+}
+
+/* ---- CONTENT ROW (three circles) ---- */
+.content-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-bottom: 1px dashed var(--border);
+}
+.content-block {
+  padding: 24px 28px;
+  border-right: 1px dashed var(--border);
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.content-block:last-child {
+  border-right: none;
+}
+.content-block h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+.content-block p {
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.65;
+}
+.circle-not-sure {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-top: 10px;
+  line-height: 1.6;
+}
+
+/* ---- FULL-WIDTH SECTION ---- */
+.full-section {
+  padding: 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.full-section h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 16px;
+}
+.section-intro {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.65;
+  margin-bottom: 20px;
+}
+
+/* ---- TIER CARDS ---- */
+.tier-row {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 12px;
+  margin: 16px 0;
+}
+.tier-card {
+  border: 1px dashed var(--border);
+  padding: 20px 16px;
+  text-align: center;
+  transition: border-color 0.2s;
+}
+.tier-card:hover {
+  border-color: var(--candle-faint);
+}
+.tier-card.suggested {
+  border-color: var(--candle-dim);
+  border-style: solid;
+}
+.tier-card.suggested:hover {
+  border-color: var(--candle);
+}
+.tier-amount {
+  font-family: 'Brygada 1918', serif;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 2px;
+}
+.tier-card.suggested .tier-amount {
+  color: var(--candle);
+}
+.tier-freq {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-bottom: 10px;
+}
+.tier-desc {
+  font-size: 11px;
+  color: var(--text-faint);
+  line-height: 1.5;
+}
+.tier-badge {
+  display: inline-block;
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--candle-dim);
+  border: 1px dashed var(--candle-faint);
+  padding: 1px 6px;
+  margin-top: 8px;
+}
+.solidarity-note {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.65;
+  margin-top: 16px;
+  max-width: 560px;
+}
+
+/* ---- FORM SECTION ---- */
+.form-section {
+  padding: 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.form-section h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 4px;
+}
+.form-intro {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 24px;
+  line-height: 1.65;
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  max-width: 600px;
+}
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.form-group.full-width {
+  grid-column: 1 / -1;
+}
+.form-label {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+.form-input {
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  color: var(--text-bright);
+  font-family: 'Commit Mono', monospace;
+  font-size: 13px;
+  padding: 10px 14px;
+  transition: border-color 0.2s;
+  outline: none;
+  width: 100%;
+}
+.form-input:focus {
+  border-color: var(--candle-dim);
+  border-style: solid;
+}
+.form-input::placeholder {
+  color: var(--text-faint);
+}
+
+/* ---- CIRCLE RADIOS ---- */
+.circle-radios {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+.circle-radio {
+  position: relative;
+}
+.circle-radio input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.circle-radio label {
+  display: block;
+  border: 1px dashed var(--border);
+  padding: 14px 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-align: center;
+}
+.circle-radio label:hover {
+  border-color: var(--candle-faint);
+}
+.circle-radio input:checked + label {
+  border-style: solid;
+}
+.circle-radio input:checked + label .circle-label-name {
+  color: var(--text-bright);
+}
+.circle-radio.community input:checked + label {
+  border-color: var(--c-community);
+}
+.circle-radio.founder input:checked + label {
+  border-color: var(--c-founder);
+}
+.circle-radio.practitioner input:checked + label {
+  border-color: var(--c-practitioner);
+}
+.circle-label-name {
+  font-size: 12px;
+  color: var(--text-dim);
+  display: block;
+  margin-bottom: 2px;
+}
+.circle-label-desc {
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+/* ---- CONTRIBUTION SELECT ---- */
+.form-select {
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  color: var(--text-bright);
+  font-family: 'Commit Mono', monospace;
+  font-size: 13px;
+  padding: 10px 14px;
+  transition: border-color 0.2s;
+  outline: none;
+  width: 100%;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238a7e6a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  cursor: pointer;
+}
+.form-select:focus {
+  border-color: var(--candle-dim);
+  border-style: solid;
+}
+.form-select option {
+  background: var(--surface);
+  color: var(--text-bright);
+}
+
+/* ---- SUBMIT BUTTON ---- */
+.form-submit {
+  display: inline-block;
+  background: var(--parch);
+  color: var(--candle-faint);
+  font-family: 'Commit Mono', monospace;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  border: 1px solid var(--parch);
+  padding: 12px 28px;
+  cursor: pointer;
+  transition: all 0.2s;
+  text-decoration: none;
+  text-align: center;
+}
+.form-submit:hover {
+  background: #3a3025;
+  border-color: #3a3025;
+  color: var(--candle-dim);
+  text-decoration: none;
+}
+.form-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ---- FORM NOTE ---- */
+.form-note {
+  font-size: 11px;
+  color: var(--text-faint);
+  line-height: 1.6;
+  margin-top: 16px;
+  max-width: 460px;
+}
+.form-note a,
+.form-note :deep(a) {
+  color: var(--candle-dim);
+}
+
+/* ---- ERROR & SUCCESS BOXES ---- */
+.error-box {
+  border: 1px dashed var(--ember);
+  color: var(--ember);
+  padding: 12px 16px;
+  font-size: 12px;
+  margin-bottom: 20px;
+  max-width: 600px;
+}
+.success-box {
+  border: 1px dashed var(--green, var(--candle));
+  color: var(--green, var(--candle));
+  padding: 12px 16px;
+  font-size: 12px;
+  margin-bottom: 20px;
+  max-width: 600px;
+}
+
+/* ---- DETAILS LIST (confirmation) ---- */
+.details-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.details-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 13px;
+}
+.details-row dt {
+  color: var(--text-faint);
+}
+.details-row dd {
+  color: var(--text-bright);
+  font-weight: 500;
+}
+
+/* ---- PAYMENT INSTRUCTION ---- */
+.payment-instruction {
+  font-size: 13px;
+  color: var(--text-dim);
+  line-height: 1.65;
+}
+
+/* ---- REDIRECT NOTE ---- */
+.redirect-note {
+  font-size: 12px;
+  color: var(--text-dim);
+  text-align: center;
+}
+
+/* ---- BUTTON ROW ---- */
+.button-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  margin-top: 20px;
+}
+
+/* ---- MEMBER INFO GRID ---- */
+.member-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  max-width: 500px;
+  margin-bottom: 8px;
+}
+.info-value {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-top: 4px;
+}
+
+/* ---- UTILITY ---- */
+.capitalize {
+  text-transform: capitalize;
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 768px) {
+  .content-row {
+    grid-template-columns: 1fr;
+  }
+  .content-block {
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+  }
+  .content-block:last-child {
+    border-bottom: none;
+  }
+  .tier-row {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+  .form-group.full-width {
+    grid-column: auto;
+  }
+  .circle-radios {
+    grid-template-columns: 1fr;
+  }
+  .member-info-grid {
+    grid-template-columns: 1fr;
+  }
+  .hero {
+    padding: 32px 20px;
+  }
+  .hero h1 {
+    font-size: 28px;
+  }
+  .full-section,
+  .form-section {
+    padding: 24px 20px;
+  }
+  .content-block {
+    padding: 20px;
+  }
+}
+
+@media (max-width: 480px) {
+  .tier-row {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .button-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
diff --git a/app/pages/members.vue b/app/pages/members.vue
index 5c23fff..9c7e30f 100644
--- a/app/pages/members.vue
+++ b/app/pages/members.vue
@@ -1,426 +1,242 @@
 <template>
-  <div>
+  <div class="members-page">
+    <!-- Page Header -->
     <PageHeader
-      title="Member Directory"
-      subtitle="Connect with members of the Ghost Guild community"
-      size="medium"
+      title="Members"
+      :subtitle="`${totalCount} member${totalCount === 1 ? '' : 's'} across 3 circles`"
     />
 
-    <section class="">
-      <UContainer class="px-4">
-        <!-- Search and Filters -->
-        <div class="mb-8 space-y-4">
-          <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-            <!-- Search -->
-            <div class="md:col-span-2">
-              <UInput
-                v-model="searchQuery"
-                placeholder="Search by name or bio..."
-                icon="i-heroicons-magnifying-glass"
-                size="lg"
-                @input="debouncedSearch"
-              />
-            </div>
-
-            <!-- Circle Filter -->
-            <USelect
-              v-model="selectedCircle"
-              :items="circleOptions"
-              size="lg"
-              @update:model-value="loadMembers"
-            />
-
-            <!-- Peer Support Filter -->
-            <USelect
-              v-model="peerSupportFilter"
-              :items="peerSupportOptions"
-              size="lg"
-              @update:model-value="loadMembers"
-            />
-          </div>
-
-          <!-- Skills Filter -->
-          <div v-if="availableSkills && availableSkills.length > 0">
-            <div class="flex flex-wrap gap-2">
-              <span class="text-sm text-guild-400 mr-2 self-center"
-                >Filter by skill:</span
-              >
-              <button
-                v-for="skill in (availableSkills || []).slice(
-                  0,
-                  showAllSkills ? undefined : 10,
-                )"
-                :key="skill"
-                type="button"
-                class="px-3 py-1 rounded-full text-sm transition-all border"
-                :class="
-                  selectedSkills.includes(skill)
-                    ? 'bg-candlelight-900/20 text-candlelight-500 border-candlelight-500/50'
-                    : 'bg-guild-800/50 text-guild-400 border-guild-700 hover:border-guild-600'
-                "
-                @click="toggleSkill(skill)"
-              >
-                {{ skill }}
-              </button>
-              <button
-                v-if="availableSkills && availableSkills.length > 10"
-                type="button"
-                class="px-3 py-1 text-sm text-primary hover:text-primary-600"
-                @click="showAllSkills = !showAllSkills"
-              >
-                {{
-                  showAllSkills
-                    ? "Show less"
-                    : `+${availableSkills.length - 10} more`
-                }}
-              </button>
-            </div>
-          </div>
-
-          <!-- Peer Support Topics Filter -->
-          <div v-if="availableTopics && availableTopics.length > 0">
-            <div class="flex flex-wrap gap-2">
-              <span class="text-sm text-guild-400 mr-2 self-center"
-                >Filter by peer support topic:</span
-              >
-              <button
-                v-for="topic in (availableTopics || []).slice(
-                  0,
-                  showAllTopics ? undefined : 10,
-                )"
-                :key="topic"
-                type="button"
-                class="px-3 py-1 rounded-full text-sm transition-all border"
-                :class="
-                  selectedTopics.includes(topic)
-                    ? 'bg-candlelight-900/20 text-candlelight-500 border-candlelight-500/50'
-                    : 'bg-guild-800/50 text-guild-400 border-guild-700 hover:border-guild-600'
-                "
-                @click="toggleTopic(topic)"
-              >
-                {{ topic }}
-              </button>
-              <button
-                v-if="availableTopics && availableTopics.length > 10"
-                type="button"
-                class="px-3 py-1 text-sm text-primary hover:text-primary-600"
-                @click="showAllTopics = !showAllTopics"
-              >
-                {{
-                  showAllTopics
-                    ? "Show less"
-                    : `+${availableTopics.length - 10} more`
-                }}
-              </button>
-            </div>
-          </div>
-
-          <!-- Active Filters -->
-          <div
-            v-if="
-              (selectedCircle && selectedCircle !== 'all') ||
-              (peerSupportFilter && peerSupportFilter !== 'all') ||
-              selectedSkills.length > 0 ||
-              selectedTopics.length > 0
-            "
-            class="flex items-center gap-2 text-sm flex-wrap"
-          >
-            <span class="text-guild-400">Active filters:</span>
-            <span
-              v-if="selectedCircle && selectedCircle !== 'all'"
-              class="px-2 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full border border-candlelight-500/30 flex items-center gap-1"
-            >
-              {{ circleLabels[selectedCircle] }}
-              <button
-                type="button"
-                class="hover:text-primary"
-                @click="clearCircleFilter"
-              >
-                ×
-              </button>
-            </span>
-            <span
-              v-if="peerSupportFilter && peerSupportFilter !== 'all'"
-              class="px-2 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full border border-candlelight-500/30 flex items-center gap-1"
-            >
-              Offering Peer Support
-              <button
-                type="button"
-                class="hover:text-primary"
-                @click="clearPeerSupportFilter"
-              >
-                ×
-              </button>
-            </span>
-            <button
-              v-if="selectedSkills.length > 0 || selectedTopics.length > 0"
-              type="button"
-              class="text-primary hover:text-primary-600"
-              @click="clearAllFilters"
-            >
-              Clear all filters
-            </button>
-          </div>
-        </div>
-
-        <!-- Loading State -->
-        <div
-          v-if="loading && !members.length"
-          class="flex justify-center items-center py-20"
+    <!-- Filter Bar -->
+    <div class="filter-bar">
+      <input
+        v-model="searchQuery"
+        type="text"
+        class="filter-search"
+        placeholder="Search members..."
+        @input="debouncedSearch"
+      >
+      <select
+        v-model="selectedCircle"
+        class="filter-select"
+        @change="loadMembers"
+      >
+        <option v-for="opt in circleOptions" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </select>
+      <label class="filter-toggle">
+        <input
+          type="checkbox"
+          :checked="peerSupportFilter === 'true'"
+          @change="togglePeerSupport"
         >
-          <div class="text-center">
-            <div
-              class="w-8 h-8 border-4 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
-            ></div>
-            <p class="text-guild-400">Loading members...</p>
-          </div>
-        </div>
+        Offering support
+      </label>
+      <span class="filter-count">Showing {{ totalCount }} member{{ totalCount === 1 ? '' : 's' }}</span>
+    </div>
 
-        <!-- Members List -->
-        <div v-else-if="members.length > 0">
-          <div class="mb-4 text-guild-400 text-sm">
-            {{ totalCount }} {{ totalCount === 1 ? "member" : "members" }} found
-          </div>
+    <!-- Skills Filter -->
+    <div v-if="availableSkills && availableSkills.length > 0" class="skills-bar">
+      <span class="tag-label">Skills:</span>
+      <button
+        v-for="skill in (availableSkills || []).slice(0, showAllSkills ? undefined : 10)"
+        :key="skill"
+        type="button"
+        class="skill-tag"
+        :class="{ active: selectedSkills.includes(skill) }"
+        @click="toggleSkill(skill)"
+      >
+        {{ skill }}
+      </button>
+      <button
+        v-if="availableSkills && availableSkills.length > 10"
+        type="button"
+        class="more-btn"
+        @click="showAllSkills = !showAllSkills"
+      >
+        {{ showAllSkills ? 'Show less' : `+${availableSkills.length - 10} more` }}
+      </button>
+    </div>
 
-          <div class="space-y-4">
-            <div
-              v-for="member in members"
-              :key="member._id"
-              class="relative backdrop-blur-sm bg-guild-900/50 border border-guild-700/50 rounded-lg p-6 hover:border-candlelight-500/50 transition-all group"
+    <!-- Topics Filter -->
+    <div v-if="availableTopics && availableTopics.length > 0" class="skills-bar">
+      <span class="tag-label">Topics:</span>
+      <button
+        v-for="topic in (availableTopics || []).slice(0, showAllTopics ? undefined : 10)"
+        :key="topic"
+        type="button"
+        class="skill-tag"
+        :class="{ active: selectedTopics.includes(topic) }"
+        @click="toggleTopic(topic)"
+      >
+        {{ topic }}
+      </button>
+      <button
+        v-if="availableTopics && availableTopics.length > 10"
+        type="button"
+        class="more-btn"
+        @click="showAllTopics = !showAllTopics"
+      >
+        {{ showAllTopics ? 'Show less' : `+${availableTopics.length - 10} more` }}
+      </button>
+    </div>
+
+    <!-- Active Filters -->
+    <div
+      v-if="hasActiveFilters"
+      class="active-filters"
+    >
+      <span class="af-label">Active filters:</span>
+      <span
+        v-if="selectedCircle && selectedCircle !== 'all'"
+        class="af-tag"
+      >
+        {{ circleLabels[selectedCircle] }}
+        <button type="button" @click="clearCircleFilter">&times;</button>
+      </span>
+      <span
+        v-if="peerSupportFilter && peerSupportFilter !== 'all'"
+        class="af-tag"
+      >
+        Offering Peer Support
+        <button type="button" @click="clearPeerSupportFilter">&times;</button>
+      </span>
+      <span
+        v-for="skill in selectedSkills"
+        :key="'s-' + skill"
+        class="af-tag"
+      >
+        {{ skill }}
+        <button type="button" @click="toggleSkill(skill)">&times;</button>
+      </span>
+      <span
+        v-for="topic in selectedTopics"
+        :key="'t-' + topic"
+        class="af-tag"
+      >
+        {{ topic }}
+        <button type="button" @click="toggleTopic(topic)">&times;</button>
+      </span>
+      <button
+        v-if="selectedSkills.length > 0 || selectedTopics.length > 0"
+        type="button"
+        class="clear-all-btn"
+        @click="clearAllFilters"
+      >
+        Clear all
+      </button>
+    </div>
+
+    <!-- Loading State -->
+    <div v-if="loading && !members.length" class="loading-state">
+      <p>Loading members...</p>
+    </div>
+
+    <!-- Member Grid -->
+    <div v-else-if="members.length > 0" class="member-grid">
+      <div
+        v-for="member in members"
+        :key="member._id"
+        class="member-card"
+      >
+        <div class="mc-head">
+          <div class="mc-avatar">
+            <img
+              v-if="member.avatar"
+              :src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
+              :alt="member.name"
+              class="mc-avatar-img"
             >
-              <!-- Peer Support Sticker Badge -->
-              <PeerSupportBadge
-                v-if="member.peerSupport?.enabled"
-                type="sticker"
-              />
-
-              <!-- Header Section -->
-              <div class="flex items-start gap-4 mb-4">
-                <!-- Avatar -->
-                <div
-                  class="w-16 h-16 rounded-lg bg-guild-800 border border-guild-700 flex items-center justify-center flex-shrink-0 group-hover:border-candlelight-500/50 transition-colors"
-                >
-                  <img
-                    v-if="member.avatar"
-                    :src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
-                    :alt="member.name"
-                    class="w-12 h-12 object-contain"
-                  />
-                  <span v-else class="text-2xl text-guild-600">👻</span>
-                </div>
-
-                <!-- Name and Meta Info -->
-                <div class="flex-1 min-w-0">
-                  <div class="flex items-baseline gap-2 flex-wrap mb-2">
-                    <h3 class="font-semibold text-lg text-guild-100">
-                      {{ member.name }}
-                    </h3>
-                    <span v-if="member.pronouns" class="text-sm text-guild-400">
-                      {{ member.pronouns }}
-                    </span>
-                  </div>
-
-                  <div class="flex items-center gap-2 flex-wrap">
-                    <span
-                      :class="['px-2 py-0.5 rounded text-xs', circleBadgeClass(member.circle)]"
-                    >
-                      {{ circleLabels[member.circle] }}
-                    </span>
-                    <span v-if="member.studio" class="text-sm text-guild-400">
-                      {{ member.studio }}
-                    </span>
-                    <span v-if="member.location" class="text-sm text-guild-500">
-                      📍 {{ member.location }}
-                    </span>
-                    <span v-if="member.timeZone" class="text-sm text-guild-500">
-                      🕐 {{ member.timeZone }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Bio -->
-              <div
-                v-if="member.bio"
-                class="mb-4 text-guild-300 text-sm leading-relaxed prose prose-invert prose-sm max-w-none"
-                v-html="renderMarkdown(member.bio)"
-              ></div>
-
-              <!-- Peer Support Section -->
-              <div
-                v-if="member.peerSupport?.enabled"
-                class="mb-4 p-4 bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg"
-              >
-                <div class="mb-3">
-                  <p class="text-candlelight-500 font-medium text-sm mb-2">
-                    {{ member.name }} offers 1:1 chats on:
-                  </p>
-                </div>
-
-                <!-- Topics -->
-                <div
-                  v-if="
-                    member.peerSupport.topics &&
-                    member.peerSupport.topics.length > 0
-                  "
-                  class="mb-2"
-                >
-                  <div class="flex flex-wrap gap-1">
-                    <span
-                      v-for="topic in member.peerSupport.topics"
-                      :key="topic"
-                      class="px-2 py-0.5 bg-candlelight-900/20 text-candlelight-400 rounded text-xs border border-candlelight-500/40"
-                    >
-                      {{ topic }}
-                    </span>
-                  </div>
-                </div>
-
-                <!-- Personal Message -->
-                <div
-                  v-if="member.peerSupport.personalMessage"
-                  class="text-sm text-guild-300 italic mb-2"
-                >
-                  "{{ member.peerSupport.personalMessage }}"
-                </div>
-
-                <!-- Availability -->
-                <div
-                  v-if="member.peerSupport.availability"
-                  class="text-xs text-guild-400 mb-2"
-                >
-                  Availability: {{ member.peerSupport.availability }}
-                </div>
-
-                <!-- Contact Section -->
-                <div v-if="member.peerSupport.slackUsername" class="space-y-2">
-                  <p class="text-sm text-candlelight-500 font-medium">
-                    Book a Peer Support call now:
-                  </p>
-                  <a
-                    :href="`slack://user?team=T03A96LV4&id=${member.slackUserId}`"
-                    @click.prevent="openSlackDM(member)"
-                    class="inline-block px-3 py-1.5 bg-candlelight-900/20 text-candlelight-500 rounded border border-candlelight-500/30 hover:bg-candlelight-900/30 transition-colors text-sm font-medium cursor-pointer"
-                  >
-                    Message {{ member.peerSupport.slackUsername }} on Slack
-                  </a>
-                </div>
-              </div>
-
-              <!-- Offering and Looking For -->
-              <div
-                v-if="member.offering || member.lookingFor"
-                class="space-y-4"
-              >
-                <h4
-                  class="text-ui-label text-candlelight-500"
-                >
-                  Skills Exchange
-                </h4>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                  <!-- Offering -->
-                  <div v-if="member.offering" class="space-y-2">
-                    <h5 class="text-ui-label text-candlelight-400 text-xs">
-                      Can share
-                    </h5>
-                    <p
-                      v-if="member.offering.description"
-                      class="text-guild-300 text-sm"
-                    >
-                      {{ member.offering.description }}
-                    </p>
-                    <div
-                      v-if="
-                        member.offering.tags && member.offering.tags.length > 0
-                      "
-                      class="flex flex-wrap gap-1"
-                    >
-                      <span
-                        v-for="tag in member.offering.tags"
-                        :key="tag"
-                        class="px-2 py-0.5 bg-candlelight-900/20 text-candlelight-500 rounded text-xs border border-candlelight-500/30"
-                      >
-                        {{ tag }}
-                      </span>
-                    </div>
-                  </div>
-
-                  <!-- Looking For -->
-                  <div v-if="member.lookingFor" class="space-y-2">
-                    <h5 class="text-ui-label text-candlelight-400 text-xs">
-                      Looking to learn
-                    </h5>
-                    <p
-                      v-if="member.lookingFor.description"
-                      class="text-guild-300 text-sm"
-                    >
-                      {{ member.lookingFor.description }}
-                    </p>
-                    <div
-                      v-if="
-                        member.lookingFor.tags &&
-                        member.lookingFor.tags.length > 0
-                      "
-                      class="flex flex-wrap gap-1"
-                    >
-                      <span
-                        v-for="tag in member.lookingFor.tags"
-                        :key="tag"
-                        class="px-2 py-0.5 bg-guild-800 text-guild-200 rounded text-xs border border-guild-600"
-                      >
-                        {{ tag }}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+            <span v-else>{{ getInitials(member.name) }}</span>
+          </div>
+          <div class="mc-info">
+            <div class="mc-name">
+              <NuxtLink v-if="isAuthenticated" :to="`/members/${member._id}`">{{ member.name }}</NuxtLink>
+              <span v-else>{{ member.name }}</span>
+              <span v-if="member.pronouns" class="mc-pronouns">{{ member.pronouns }}</span>
+            </div>
+            <div class="mc-meta">
+              <span class="badge" :class="member.circle">{{ circleLabels[member.circle] }}</span>
+              <template v-if="member.studio">
+                <span class="sep">&middot;</span>
+                {{ member.studio }}
+              </template>
             </div>
           </div>
         </div>
 
-        <!-- Empty State -->
-        <div v-else class="text-center py-20">
-          <div class="w-16 h-16 mx-auto mb-4 opacity-50">
-            <svg
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-              class="text-guild-600"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
-              />
-            </svg>
-          </div>
-          <h3 class="text-lg font-medium text-guild-300 mb-2">
-            No members found
-          </h3>
-          <p class="text-guild-400 mb-6">
-            Try adjusting your search or filters
-          </p>
-          <UButton variant="outline" @click="clearAllFilters">
-            Clear Filters
-          </UButton>
+        <div
+          v-if="member.bio"
+          class="mc-bio"
+          v-html="renderMarkdown(member.bio)"
+        ></div>
+
+        <div v-if="member.location || member.timeZone" class="mc-location">
+          {{ [member.location, member.timeZone].filter(Boolean).join(' \u00b7 ') }}
         </div>
 
-        <!-- Not Authenticated Notice -->
+        <!-- Skills tags -->
         <div
-          v-if="!isAuthenticated && members.length > 0"
-          class="mt-8 backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-6 text-center"
+          v-if="member.offering?.tags && member.offering.tags.length > 0"
+          class="mc-tags"
         >
-          <p class="text-guild-200 mb-4">
-            🔒 Some member information is visible to members only
-          </p>
-          <div class="flex gap-3 justify-center">
-            <UButton @click="openLoginModal({ title: 'Sign in to see more', description: 'Log in to view full member profiles' })" variant="outline"> Log In </UButton>
-            <UButton to="/join"> Join Ghost Guild </UButton>
-          </div>
+          <span class="tag-label">Skills:</span>
+          <span
+            v-for="tag in member.offering.tags"
+            :key="tag"
+            class="skill-tag"
+          >{{ tag }}</span>
         </div>
-      </UContainer>
-    </section>
+
+        <!-- Looking for -->
+        <div
+          v-if="member.lookingFor?.tags && member.lookingFor.tags.length > 0"
+          class="mc-looking"
+        >
+          Looking for: {{ member.lookingFor.tags.join(', ') }}
+        </div>
+
+        <!-- Peer support session link -->
+        <a
+          v-if="member.peerSupport?.enabled && member.peerSupport?.slackUsername"
+          href="#"
+          class="mc-session"
+          @click.prevent="openSlackDM(member)"
+        >
+          Book session
+        </a>
+      </div>
+    </div>
+
+    <!-- Empty State -->
+    <div v-else class="empty-state">
+      <p class="empty-title">No members found</p>
+      <p class="empty-sub">Try adjusting your search or filters</p>
+      <button type="button" class="btn" @click="clearAllFilters">Clear Filters</button>
+    </div>
+
+    <!-- Load more / count -->
+    <div v-if="members.length > 0" class="load-more">
+      <span>Showing {{ members.length }} of {{ totalCount }} member{{ totalCount === 1 ? '' : 's' }}</span>
+    </div>
+
+    <!-- Not Authenticated Notice -->
+    <div
+      v-if="!isAuthenticated && members.length > 0"
+      class="auth-notice"
+    >
+      <p>Some member information is visible to members only.</p>
+      <div class="auth-actions">
+        <button
+          type="button"
+          class="btn"
+          @click="openLoginModal({ title: 'Sign in to see more', description: 'Log in to view full member profiles' })"
+        >
+          Log In
+        </button>
+        <NuxtLink to="/join" class="btn btn-primary">Join Ghost Guild</NuxtLink>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -434,7 +250,7 @@ const members = ref([]);
 const totalCount = ref(0);
 const availableSkills = ref([]);
 const availableTopics = ref([]);
-const loading = ref(true); // Start with loading true
+const loading = ref(true);
 const searchQuery = ref("");
 const selectedCircle = ref("all");
 const peerSupportFilter = ref("all");
@@ -457,26 +273,31 @@ const circleLabels = {
   practitioner: "Practitioner",
 };
 
-// Map circle names to badge classes
-const circleBadgeClass = (circle) => {
-  const classes = {
-    community: 'circle-badge-community',
-    founder: 'circle-badge-founder',
-    practitioner: 'circle-badge-practitioner',
-  };
-  return classes[circle] || 'circle-badge-community';
-};
-
 // Peer support filter options
 const peerSupportOptions = [
   { label: "All Members", value: "all" },
   { label: "Offering Peer Support", value: "true" },
 ];
 
-// Helper to check if member has social links
-const hasSocialLinks = (links) => {
-  if (!links) return false;
-  return !!(links.mastodon || links.linkedin || links.website || links.other);
+// Computed: has active filters
+const hasActiveFilters = computed(() => {
+  return (
+    (selectedCircle.value && selectedCircle.value !== 'all') ||
+    (peerSupportFilter.value && peerSupportFilter.value !== 'all') ||
+    selectedSkills.value.length > 0 ||
+    selectedTopics.value.length > 0
+  );
+});
+
+// Get initials from name
+const getInitials = (name) => {
+  if (!name) return '?';
+  return name
+    .split(' ')
+    .map((w) => w[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
 };
 
 // Load members
@@ -512,6 +333,12 @@ const loadMembers = async () => {
   }
 };
 
+// Toggle peer support checkbox
+const togglePeerSupport = (e) => {
+  peerSupportFilter.value = e.target.checked ? 'true' : 'all';
+  loadMembers();
+};
+
 // Debounced search
 let searchTimeout;
 const debouncedSearch = () => {
@@ -567,14 +394,12 @@ const clearAllFilters = () => {
 const openSlackDM = async (member) => {
   const username = member.peerSupport?.slackUsername || member.name;
 
-  // Copy username to clipboard
   try {
     await navigator.clipboard.writeText(username);
   } catch (err) {
     console.log("Could not copy to clipboard:", err);
   }
 
-  // Show alert and open Slack
   alert(
     `Opening Slack...\n\nSearch for: ${username}\n\n(Username copied to clipboard)`,
   );
@@ -583,7 +408,6 @@ const openSlackDM = async (member) => {
 
 // Load on mount and handle query params
 onMounted(() => {
-  // Check for peerSupport query parameter
   const route = useRoute();
   if (route.query.peerSupport === "true") {
     peerSupportFilter.value = "true";
@@ -603,3 +427,416 @@ useHead({
   ],
 });
 </script>
+
+<style scoped>
+/* ---- FILTER BAR ---- */
+.filter-bar {
+  padding: 16px 24px;
+  border-bottom: 1px dashed var(--border);
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.filter-search {
+  font-family: 'Commit Mono', monospace;
+  font-size: 12px;
+  padding: 5px 12px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text);
+  outline: none;
+  min-width: 180px;
+  transition: border-color 0.15s;
+}
+.filter-search::placeholder {
+  color: var(--text-faint);
+}
+.filter-search:focus {
+  border-color: var(--candle-faint);
+}
+
+.filter-select {
+  font-family: 'Commit Mono', monospace;
+  font-size: 11px;
+  padding: 5px 10px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238a7e6a' stroke-width='1.2'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 8px center;
+  padding-right: 26px;
+}
+.filter-select:focus {
+  border-color: var(--candle-faint);
+}
+
+.filter-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+.filter-toggle input {
+  accent-color: var(--candle-dim);
+}
+
+.filter-count {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+/* ---- SKILLS / TOPICS BAR ---- */
+.skills-bar {
+  padding: 12px 24px;
+  border-bottom: 1px dashed var(--border);
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.skills-bar .tag-label {
+  font-size: 10px;
+  color: var(--text-faint);
+  margin-right: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.skills-bar .skill-tag {
+  font-family: 'Commit Mono', monospace;
+  font-size: 10px;
+  color: var(--text-dim);
+  padding: 2px 8px;
+  border: 1px dashed var(--border);
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s;
+}
+.skills-bar .skill-tag:hover {
+  border-color: var(--candle-faint);
+  color: var(--text);
+}
+.skills-bar .skill-tag.active {
+  border-color: var(--candle-dim);
+  border-style: solid;
+  color: var(--candle);
+  background: rgba(154, 116, 32, 0.08);
+}
+
+.more-btn {
+  font-family: 'Commit Mono', monospace;
+  font-size: 10px;
+  color: var(--candle);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+.more-btn:hover {
+  text-decoration: underline;
+}
+
+/* ---- ACTIVE FILTERS ---- */
+.active-filters {
+  padding: 10px 24px;
+  border-bottom: 1px dashed var(--border);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 11px;
+}
+
+.af-label {
+  color: var(--text-faint);
+}
+
+.af-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border: 1px dashed var(--candle-faint);
+  color: var(--candle);
+  font-size: 10px;
+  letter-spacing: 0.04em;
+}
+.af-tag button {
+  background: none;
+  border: none;
+  color: var(--candle);
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 1;
+  padding: 0 0 0 2px;
+}
+.af-tag button:hover {
+  color: var(--ember);
+}
+
+.clear-all-btn {
+  font-family: 'Commit Mono', monospace;
+  font-size: 10px;
+  color: var(--candle);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.clear-all-btn:hover {
+  text-decoration: underline;
+}
+
+/* ---- LOADING ---- */
+.loading-state {
+  padding: 60px 24px;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+/* ---- MEMBER GRID ---- */
+.member-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+}
+
+.member-card {
+  padding: 16px 20px;
+  border-bottom: 1px dashed var(--border);
+  border-right: 1px dashed var(--border);
+  transition: background 0.15s;
+}
+.member-card:hover {
+  background: var(--surface);
+}
+.member-card:nth-child(2n) {
+  border-right: none;
+}
+
+.mc-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.mc-avatar {
+  width: 32px;
+  height: 32px;
+  background: var(--surface);
+  border: 1px dashed var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.mc-avatar-img {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+}
+
+.mc-info {
+  min-width: 0;
+}
+
+.mc-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-bright);
+}
+.mc-name a {
+  color: var(--text-bright);
+  text-decoration: none;
+}
+.mc-name a:hover {
+  color: var(--candle);
+  text-decoration: underline;
+}
+
+.mc-pronouns {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-left: 4px;
+  font-weight: 400;
+}
+
+.mc-meta {
+  font-size: 11px;
+  color: var(--text-dim);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 1px;
+}
+.mc-meta .sep {
+  color: var(--border);
+}
+
+.mc-bio {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.6;
+  margin: 8px 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.mc-bio :deep(p) {
+  margin: 0;
+}
+
+.mc-location {
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-top: 2px;
+}
+
+.mc-tags {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-top: 6px;
+}
+.mc-tags .tag-label {
+  font-size: 10px;
+  color: var(--text-faint);
+  margin-right: 2px;
+}
+
+.mc-tags .skill-tag {
+  font-size: 10px;
+  color: var(--text-dim);
+  padding: 1px 6px;
+  border: 1px dashed var(--border);
+  white-space: nowrap;
+}
+
+.mc-looking {
+  font-size: 11px;
+  color: var(--text-faint);
+  font-style: italic;
+  margin-top: 4px;
+}
+
+.mc-session {
+  display: inline-block;
+  margin-top: 6px;
+  font-family: 'Commit Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 3px 10px;
+  border: 1px dashed var(--candle-faint);
+  color: var(--candle);
+  cursor: pointer;
+  transition: all 0.15s;
+  background: transparent;
+  text-decoration: none;
+}
+.mc-session:hover {
+  border-color: var(--candle);
+  background: rgba(122, 90, 16, 0.06);
+  text-decoration: none;
+}
+
+/* ---- LOAD MORE ---- */
+.load-more {
+  padding: 20px 24px;
+  border-bottom: 1px dashed var(--border);
+  font-size: 12px;
+  color: var(--text-faint);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* ---- EMPTY STATE ---- */
+.empty-state {
+  padding: 60px 24px;
+  text-align: center;
+}
+.empty-title {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  color: var(--text-dim);
+  margin-bottom: 6px;
+}
+.empty-sub {
+  font-size: 12px;
+  color: var(--text-faint);
+  margin-bottom: 16px;
+}
+
+/* ---- AUTH NOTICE ---- */
+.auth-notice {
+  padding: 24px;
+  margin: 20px 24px;
+  border: 1px dashed var(--candle-faint);
+  text-align: center;
+}
+.auth-notice p {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 12px;
+}
+.auth-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 1024px) {
+  .member-grid {
+    grid-template-columns: 1fr;
+  }
+  .member-card {
+    border-right: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .filter-bar {
+    flex-direction: column;
+    align-items: stretch;
+    padding: 14px 20px;
+  }
+  .filter-count {
+    margin-left: 0;
+  }
+  .skills-bar {
+    padding: 10px 20px;
+  }
+  .active-filters {
+    padding: 8px 20px;
+  }
+  .member-card {
+    padding: 14px 16px;
+  }
+  .auth-notice {
+    margin: 16px;
+  }
+}
+</style>
diff --git a/app/pages/series/[id].vue b/app/pages/series/[id].vue
index 4a5d8ca..5f12af8 100644
--- a/app/pages/series/[id].vue
+++ b/app/pages/series/[id].vue
@@ -1,503 +1,164 @@
 <template>
   <div>
-    <div v-if="pending" class="min-h-screen flex items-center justify-center">
-      <div class="text-center">
-        <div
-          class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4"
-        ></div>
-        <p class="text-[--ui-text-muted]">Loading series details...</p>
-      </div>
-    </div>
+    <div v-if="pending" class="loading">Loading series details...</div>
 
-    <div
-      v-else-if="error"
-      class="min-h-screen flex items-center justify-center"
-    >
-      <div class="text-center">
-        <h2 class="text-2xl font-bold text-[--ui-text] mb-2">
-          Series Not Found
-        </h2>
-        <p class="text-[--ui-text-muted] mb-6">
-          The event series you're looking for doesn't exist.
-        </p>
-        <NuxtLink to="/series" class="text-primary hover:underline">
-          ← Back to Event Series
-        </NuxtLink>
-      </div>
+    <div v-else-if="error" class="loading">
+      <h2>Series Not Found</h2>
+      <p>The event series you're looking for doesn't exist.</p>
+      <NuxtLink to="/events">&larr; Back to Events</NuxtLink>
     </div>
 
     <div v-else>
-      <!-- Page Header -->
-      <PageHeader :title="series.title" size="large" />
+      <!-- BACK LINK -->
+      <div class="back-link">
+        <NuxtLink to="/events">&larr; Back to Events</NuxtLink>
+      </div>
 
-      <!-- Series Meta -->
-      <section class="py-20 bg-[--ui-bg]">
-        <UContainer>
-          <div class="max-w-4xl mx-auto">
-            <!-- Series Description -->
-            <div v-if="series.description" class="mb-8">
-              <p class="text-lg text-[--ui-text-muted] leading-relaxed">
-                {{ series.description }}
-              </p>
-            </div>
+      <!-- SERIES HEADER -->
+      <div class="series-header">
+        <h1>{{ series.title }}</h1>
+        <div class="series-meta-row">
+          <span v-if="series.type" class="badge all">{{ formatSeriesType(series.type) }}</span>
+          <span class="meta-text">{{ series.events?.length || 0 }} sessions</span>
+          <span v-if="series.startDate" class="meta-text">
+            {{ formatDate(series.startDate) }} &ndash; {{ formatDate(series.endDate) }}
+          </span>
+        </div>
+      </div>
 
-            <div class="flex items-center gap-4 mb-8 flex-wrap">
-              <span
-                :class="[
-                  'inline-flex items-center px-3 py-1 rounded text-sm font-medium',
-                  getSeriesTypeBadgeClass(series.type),
-                ]"
-              >
-                {{ formatSeriesType(series.type) }}
-              </span>
-              <span
-                :class="[
-                  'inline-flex items-center px-3 py-1 rounded text-sm font-medium',
-                  getSeriesStatusClass(),
-                ]"
-              >
-                {{ getSeriesStatusText() }}
-              </span>
-            </div>
+      <!-- DESCRIPTION -->
+      <div v-if="series.description" class="section">
+        <p>{{ series.description }}</p>
+      </div>
 
-            <!-- Series Stats -->
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
-              <div>
-                <div class="text-3xl font-bold text-[--ui-text] mb-1">
-                  {{ series.statistics.totalEvents }}
-                </div>
-                <div class="text-sm text-[--ui-text-muted]">Total Events</div>
-              </div>
-
-              <div>
-                <div class="text-3xl font-bold text-[--ui-text] mb-1">
-                  {{ series.statistics.completedEvents }}
-                </div>
-                <div class="text-sm text-[--ui-text-muted]">Completed</div>
-              </div>
-
-              <div>
-                <div class="text-3xl font-bold text-[--ui-text] mb-1">
-                  {{ series.statistics.upcomingEvents }}
-                </div>
-                <div class="text-sm text-[--ui-text-muted]">Upcoming</div>
-              </div>
-
-              <div v-if="series.statistics.totalRegistrations">
-                <div class="text-3xl font-bold text-[--ui-text] mb-1">
-                  {{ series.statistics.totalRegistrations }}
-                </div>
-                <div class="text-sm text-[--ui-text-muted]">Registrations</div>
-              </div>
-            </div>
-
-            <!-- Series Date Range -->
-            <div
-              v-if="series.startDate && series.endDate"
-              class="flex items-center gap-2 text-[--ui-text-muted] mb-8"
-            >
-              <Icon name="heroicons:calendar-days" class="w-5 h-5" />
-              <span>
-                Series runs from
-                {{ formatDateRange(series.startDate, series.endDate) }}
-              </span>
-            </div>
-
-            <!-- Status Message -->
-            <div
-              v-if="series?.statistics?.isOngoing"
-              class="p-4 bg-candlelight-900/20 border border-candlelight-700/30 rounded mb-8"
-            >
-              <p class="text-candlelight-500 dark:text-candlelight-400 font-semibold mb-1">
-                This series is currently ongoing!
-              </p>
-              <p class="text-sm text-[--ui-text-muted]">
-                Register for upcoming events to join the learning journey.
-              </p>
-            </div>
-
-            <div
-              v-else-if="series?.statistics?.isUpcoming"
-              class="p-4 bg-guild-500/10 border border-guild-500/30 rounded mb-8"
-            >
-              <p class="text-guild-300 dark:text-guild-300 font-semibold mb-1">
-                This series is starting soon!
-              </p>
-              <p class="text-sm text-[--ui-text-muted]">
-                Mark your calendar and register for the events.
-              </p>
-            </div>
-
-            <div
-              v-else-if="series?.statistics?.isCompleted"
-              class="p-4 bg-guild-500/10 border border-guild-500/30 rounded mb-8"
-            >
-              <p class="text-[--ui-text] font-semibold mb-1">
-                This series has concluded.
-              </p>
-              <p class="text-sm text-[--ui-text-muted]">
-                Check out our other event series for more opportunities to learn
-                and connect.
-              </p>
-            </div>
-          </div>
-        </UContainer>
-      </section>
-
-      <!-- Series Pass Purchase (if tickets enabled) -->
-      <section v-if="series?.tickets?.enabled" class="py-20 bg-[--ui-bg]">
-        <UContainer>
-          <div class="max-w-4xl mx-auto">
-            <h2 class="text-display-sm font-bold text-[--ui-text] mb-8">
-              Get Your Series Pass
-            </h2>
-            <SeriesPassPurchase
-              :series-id="series.id || series._id"
-              :series-info="{
-                id: series.id,
-                title: series.title,
-                totalEvents: series?.statistics?.totalEvents || 0,
-                type: series.type,
-              }"
-              :series-events="series.events || []"
-              :user-email="user?.email"
-              :user-name="user?.name"
-              @purchase-success="handlePurchaseSuccess"
-            />
-          </div>
-        </UContainer>
-      </section>
-
-      <!-- Events Timeline -->
-      <section class="py-20 bg-[--ui-bg-elevated]">
-        <UContainer>
-          <div class="max-w-4xl mx-auto">
-            <h2 class="text-display-sm font-bold text-[--ui-text] mb-8">
-              Event Schedule
-            </h2>
-
-            <div class="space-y-4">
-              <div
-                v-for="(event, index) in series?.events || []"
-                :key="event.id"
-                class="group"
-              >
-                <div class="flex items-start gap-4">
-                  <!-- Position indicator -->
-                  <div class="flex flex-col items-center flex-shrink-0">
-                    <div
-                      :class="[
-                        'w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border',
-                        getEventTimelineColor(event),
-                      ]"
-                    >
-                      {{ event.series?.position || index + 1 }}
-                    </div>
-                    <div
-                      v-if="index < (series?.events?.length || 0) - 1"
-                      class="w-0.5 h-12 bg-[--ui-border]"
-                    ></div>
-                  </div>
-
-                  <!-- Event Card -->
-                  <NuxtLink
-                    :to="`/events/${event.slug || event.id}`"
-                    class="flex-1 border border-[--ui-border] rounded p-4 hover:border-primary transition-colors"
-                  >
-                    <div
-                      class="flex flex-col md:flex-row md:items-start md:justify-between gap-3"
-                    >
-                      <!-- Event Info -->
-                      <div class="flex-1 min-w-0">
-                        <div class="flex items-start gap-2 mb-2 flex-wrap">
-                          <h3
-                            class="text-lg font-semibold text-[--ui-text] group-hover:text-primary transition-colors"
-                          >
-                            {{ event.title }}
-                          </h3>
-                          <span
-                            :class="[
-                              'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium flex-shrink-0',
-                              getEventStatusClass(event),
-                            ]"
-                          >
-                            {{ getEventStatus(event) }}
-                          </span>
-                        </div>
-
-                        <p
-                          v-if="event.description"
-                          class="text-[--ui-text-muted] mb-3 line-clamp-2"
-                        >
-                          {{ event.description }}
-                        </p>
-
-                        <div
-                          class="flex flex-wrap items-center gap-3 text-sm text-[--ui-text-muted]"
-                        >
-                          <div class="flex items-center gap-1">
-                            <Icon
-                              name="heroicons:calendar-days"
-                              class="w-4 h-4"
-                            />
-                            {{ formatEventDate(event.startDate) }}
-                          </div>
-                          <div class="flex items-center gap-1">
-                            <Icon name="heroicons:clock" class="w-4 h-4" />
-                            {{ formatEventTime(event.startDate) }}
-                          </div>
-                          <div
-                            v-if="event.location"
-                            class="flex items-center gap-1"
-                          >
-                            <Icon name="heroicons:map-pin" class="w-4 h-4" />
-                            {{ event.location }}
-                          </div>
-                          <div
-                            v-if="event.registeredCount"
-                            class="flex items-center gap-1"
-                          >
-                            <Icon name="heroicons:users" class="w-4 h-4" />
-                            {{ event.registeredCount }} registered
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- Arrow -->
-                      <div class="flex items-center md:pt-1">
-                        <Icon
-                          name="heroicons:arrow-right"
-                          class="w-5 h-5 text-[--ui-text-muted] group-hover:text-primary group-hover:translate-x-1 transition-all"
-                        />
-                      </div>
-                    </div>
-                  </NuxtLink>
-                </div>
-              </div>
-            </div>
-          </div>
-        </UContainer>
-      </section>
-
-      <!-- Questions -->
-      <section class="py-20 bg-[--ui-bg]">
-        <UContainer>
-          <div class="max-w-4xl mx-auto">
-            <h3 class="text-xl font-bold text-[--ui-text] mb-3">
-              Questions About This Series?
-            </h3>
-            <p class="text-[--ui-text-muted] mb-4">
-              If you have any questions about this event series, please reach
-              out to us.
-            </p>
-            <a
-              href="mailto:events@ghostguild.org"
-              class="text-primary hover:underline"
-            >
-              events@ghostguild.org
-            </a>
-
-            <div class="mt-8">
-              <NuxtLink to="/series" class="text-primary hover:underline">
-                ← Back to all event series
+      <!-- EVENT LIST -->
+      <div class="section">
+        <div class="section-label">Sessions</div>
+        <div v-if="series.events?.length">
+          <div v-for="(event, index) in series.events" :key="event._id || index" class="event-row">
+            <span class="event-num">{{ String(index + 1).padStart(2, '0') }}</span>
+            <span class="event-date">{{ formatDate(event.startDate) }}</span>
+            <div class="event-info">
+              <NuxtLink :to="`/events/${event.slug || event._id || event.id}`" class="event-title-link">
+                {{ event.title }}
               </NuxtLink>
+              <span class="event-status">{{ getEventStatus(event) }}</span>
             </div>
           </div>
-        </UContainer>
-      </section>
+        </div>
+        <p v-else class="empty">No sessions scheduled yet.</p>
+      </div>
+
+      <!-- PASS PURCHASE -->
+      <div v-if="series.passPrice" class="section">
+        <DashedBox>
+          <div class="section-label">Series Pass</div>
+          <p>Get access to all sessions in this series with a single pass.</p>
+          <div class="pass-price">${{ series.passPrice }}</div>
+        </DashedBox>
+      </div>
+
+      <!-- QUESTIONS -->
+      <div class="section">
+        <div class="section-label">Questions?</div>
+        <p>If you have questions about this series, reach out to us.</p>
+        <a href="mailto:events@ghostguild.org">events@ghostguild.org</a>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup>
-const route = useRoute();
-const { data: session } = useAuth();
-const toast = useToast();
+const route = useRoute()
 
-// Get user info
-const user = computed(() => session?.value?.user || null);
+const { data: series, pending, error } = await useFetch(`/api/series/${route.params.id}`)
 
-// Fetch series data from API
-const {
-  data: series,
-  pending,
-  error,
-  refresh: refreshSeries,
-} = await useFetch(`/api/series/${route.params.id}`);
-
-// Handle series not found
 if (error.value?.statusCode === 404) {
-  throw createError({
-    statusCode: 404,
-    statusMessage: "Event series not found",
-  });
+  throw createError({ statusCode: 404, statusMessage: 'Event series not found' })
 }
 
-// Handle successful series pass purchase
-const handlePurchaseSuccess = async (response) => {
-  // Refresh series data to show updated registration status
-  await refreshSeries();
-
-  // Scroll to top to show success message
-  window.scrollTo({ top: 0, behavior: "smooth" });
-};
-
-// Helper functions
 const formatSeriesType = (type) => {
-  const types = {
-    workshop_series: "Workshop Series",
-    recurring_meetup: "Recurring Meetup",
-    multi_day: "Multi-Day Event",
-    course: "Course",
-    tournament: "Tournament",
-  };
-  return types[type] || type;
-};
+  const types = { workshop_series: 'Workshop Series', recurring_meetup: 'Recurring Meetup', multi_day: 'Multi-Day Event', course: 'Course', tournament: 'Tournament' }
+  return types[type] || type
+}
 
-const getSeriesTypeBadgeClass = (type) => {
-  const classes = {
-    workshop_series:
-      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
-    recurring_meetup:
-      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
-    multi_day:
-      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
-    course:
-      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
-    tournament:
-      "bg-ember-900/20 text-ember-500 dark:text-ember-400 border border-ember-700/30",
-  };
-  return (
-    classes[type] ||
-    "bg-earth-900/20 text-earth-400 dark:text-earth-400 border border-earth-700/30"
-  );
-};
-
-const getSeriesStatusText = () => {
-  if (!series.value?.statistics) return "Active";
-  if (series.value.statistics.isOngoing) return "Ongoing";
-  if (series.value.statistics.isUpcoming) return "Starting Soon";
-  if (series.value.statistics.isCompleted) return "Completed";
-  return "Active";
-};
-
-const getSeriesStatusClass = () => {
-  if (!series.value?.statistics)
-    return "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30";
-  if (series.value.statistics.isOngoing)
-    return "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30";
-  if (series.value.statistics.isUpcoming)
-    return "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30";
-  if (series.value.statistics.isCompleted)
-    return "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30";
-  return "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30";
-};
-
-const formatEventDate = (date) => {
-  return new Date(date).toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
-};
-
-const formatEventTime = (date) => {
-  return new Date(date).toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-  });
-};
-
-const formatDateRange = (startDate, endDate) => {
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-
-  const formatter = new Intl.DateTimeFormat("en-US", {
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-  });
-
-  return `${formatter.format(start)} to ${formatter.format(end)}`;
-};
+const formatDate = (dateStr) => {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+}
 
 const getEventStatus = (event) => {
-  const now = new Date();
-  const startDate = new Date(event.startDate);
-  const endDate = new Date(event.endDate);
+  const now = new Date()
+  const start = new Date(event.startDate)
+  const end = new Date(event.endDate)
+  if (now < start) return 'Upcoming'
+  if (now >= start && now <= end) return 'Ongoing'
+  return 'Completed'
+}
 
-  if (now < startDate) return "Upcoming";
-  if (now >= startDate && now <= endDate) return "Ongoing";
-  return "Completed";
-};
-
-const getEventStatusClass = (event) => {
-  const status = getEventStatus(event);
-  const classes = {
-    Upcoming:
-      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border border-guild-500/30",
-    Ongoing:
-      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border border-candlelight-700/30",
-    Completed:
-      "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30",
-  };
-  return (
-    classes[status] ||
-    "bg-guild-500/10 text-guild-400 dark:text-guild-400 border border-guild-500/30"
-  );
-};
-
-const getEventTimelineColor = (event) => {
-  const status = getEventStatus(event);
-  const classes = {
-    Upcoming:
-      "bg-guild-500/10 text-guild-300 dark:text-guild-300 border-guild-500/30",
-    Ongoing:
-      "bg-candlelight-900/20 text-candlelight-500 dark:text-candlelight-400 border-candlelight-700/30",
-    Completed:
-      "bg-earth-900/20 text-earth-400 dark:text-earth-400 border-earth-700/30",
-  };
-  return (
-    classes[status] ||
-    "bg-guild-500/10 text-guild-400 dark:text-guild-400 border-guild-500/30"
-  );
-};
-
-// SEO Meta
-useHead(() => {
-  if (!series || !series.value) {
-    return {
-      title: "Event Series - Ghost Guild",
-      meta: [
-        {
-          name: "description",
-          content:
-            "Explore our multi-event series designed for learning and growth",
-        },
-      ],
-    };
-  }
-
-  return {
-    title: `${series.value.title} - Event Series - Ghost Guild`,
-    meta: [
-      {
-        name: "description",
-        content:
-          series.value.description ||
-          "Explore our multi-event series designed for learning and growth",
-      },
-    ],
-  };
-});
+useHead(() => ({
+  title: series.value ? `${series.value.title} - Event Series - Ghost Guild` : 'Event Series - Ghost Guild',
+  meta: [{ name: 'description', content: series.value?.description || 'Multi-event series' }],
+}))
 </script>
 
 <style scoped>
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+.loading { padding: 48px 32px; color: var(--text-dim); }
+.loading h2 { font-family: 'Brygada 1918', serif; font-size: 22px; color: var(--text-bright); margin-bottom: 8px; }
+
+.back-link { padding: 12px 32px; border-bottom: 1px dashed var(--border); font-size: 12px; }
+.back-link a { color: var(--candle); text-decoration: none; }
+
+.series-header {
+  padding: 28px 32px;
+  border-bottom: 1px dashed var(--border);
 }
+.series-header h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 28px;
+  font-weight: 600;
+  color: var(--text-bright);
+  line-height: 1.15;
+  margin-bottom: 12px;
+}
+.series-meta-row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  font-size: 12px;
+}
+.meta-text { color: var(--text-faint); }
+
+.section {
+  padding: 24px 32px;
+  border-bottom: 1px dashed var(--border);
+}
+.section p { font-size: 12px; color: var(--text-dim); line-height: 1.7; max-width: 560px; margin-bottom: 8px; }
+.section a { font-size: 12px; color: var(--candle); }
+
+.event-row {
+  display: grid;
+  grid-template-columns: 32px 80px 1fr;
+  gap: 12px;
+  align-items: baseline;
+  padding: 10px 0;
+  border-bottom: 1px dashed var(--border);
+  font-size: 12px;
+}
+.event-row:last-child { border-bottom: none; }
+.event-num { color: var(--text-faint); font-size: 11px; }
+.event-date { color: var(--text-faint); }
+.event-title-link { color: var(--text); text-decoration: none; font-size: 13px; }
+.event-title-link:hover { color: var(--candle); }
+.event-status { font-size: 10px; color: var(--text-faint); margin-left: 8px; }
+
+.pass-price {
+  font-family: 'Brygada 1918', serif;
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--candle);
+  margin-top: 8px;
+}
+
+.empty { font-size: 12px; color: var(--text-faint); }
 </style>