From 1ac21d6a981c3c8ab5b197e932276c0d6e2f93ff Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Thu, 2 Apr 2026 21:35:32 +0100
Subject: [PATCH] feat: reskin member pages to zine direction

---
 app/pages/member/account.vue    |  315 +++++
 app/pages/member/dashboard.vue  |  796 ++++++++-----
 app/pages/member/my-updates.vue |  647 +++++++---
 app/pages/member/profile.vue    | 1968 +++++++++++--------------------
 4 files changed, 1972 insertions(+), 1754 deletions(-)
 create mode 100644 app/pages/member/account.vue

diff --git a/app/pages/member/account.vue b/app/pages/member/account.vue
new file mode 100644
index 0000000..ed93263
--- /dev/null
+++ b/app/pages/member/account.vue
@@ -0,0 +1,315 @@
+<template>
+  <div>
+    <!-- Unauthenticated -->
+    <div v-if="!memberData" class="loading">
+      <p>Please sign in to access your account settings.</p>
+      <button class="btn btn-primary" @click="openLoginModal({ title: 'Sign in to manage your account' })">Sign In</button>
+    </div>
+
+    <div v-else>
+      <!-- PAGE HEADER -->
+      <PageHeader title="Account Settings" subtitle="Manage your membership and billing" />
+
+      <!-- CONTENT AREA WITH EVENTS SIDEBAR -->
+      <div class="content-area">
+        <div class="page-content">
+          <div class="account-columns">
+
+            <!-- LEFT COLUMN: Membership Status & Email -->
+            <div class="account-col-left">
+              <div class="section-label">Current Membership</div>
+
+              <div class="membership-card">
+                <table>
+                  <tr>
+                    <td>Status</td>
+                    <td>
+                      <span class="status-dot" :class="memberData.status || 'active'"></span>
+                      {{ memberData.status || 'Active' }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Circle</td>
+                    <td :style="{ color: `var(--c-${memberData.circle || 'community'})` }">
+                      {{ memberData.circle || 'Community' }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Contribution</td>
+                    <td>${{ memberData.contributionAmount || 0 }} / month</td>
+                  </tr>
+                  <tr>
+                    <td>Member since</td>
+                    <td>{{ formatMemberSince(memberData.createdAt) }}</td>
+                  </tr>
+                </table>
+              </div>
+
+              <!-- Email -->
+              <hr class="section-divider">
+              <div class="section-label">Email</div>
+              <div class="email-display">
+                <span class="email-value">{{ memberData.email }}</span>
+              </div>
+              <div class="email-hint">Used for login magic links and notifications</div>
+
+              <!-- Danger Zone -->
+              <hr class="section-divider danger">
+              <div class="section-label danger">Danger Zone</div>
+              <div class="danger-zone">
+                <p>Cancelling your membership will immediately revoke access to member-only resources, events, and the Slack workspace. <strong>This action cannot be easily undone.</strong></p>
+                <button class="btn btn-danger" @click="handleCancelMembership" :disabled="isCancelling">
+                  {{ isCancelling ? 'Cancelling...' : 'Cancel Membership' }}
+                </button>
+              </div>
+            </div>
+
+            <!-- RIGHT COLUMN: Change Contribution & Circle -->
+            <div class="account-col-right">
+              <div class="section-label">Change Contribution</div>
+
+              <TierPicker v-model="selectedTier" :tiers="tiers" />
+              <div class="tier-hint">Changes take effect on your next billing cycle</div>
+              <button
+                class="btn btn-primary btn-section"
+                @click="handleUpdateTier"
+                :disabled="selectedTier === memberData.contributionAmount || isUpdating"
+              >
+                {{ isUpdating ? 'Updating...' : 'Update Contribution' }}
+              </button>
+
+              <!-- Change Circle -->
+              <hr class="section-divider">
+              <div class="section-label">Change Circle</div>
+
+              <CirclePicker v-model="selectedCircle" :circles="circleOptions" />
+              <button
+                class="btn btn-primary btn-section"
+                @click="handleUpdateCircle"
+                :disabled="selectedCircle === memberData.circle || isUpdating"
+              >
+                {{ isUpdating ? 'Updating...' : 'Update Circle' }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- EVENTS MINI SIDEBAR -->
+        <EventsMiniSidebar :events="upcomingEvents" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth',
+})
+
+const { memberData, checkMemberStatus } = useAuth()
+const { openLoginModal } = useLoginModal()
+const toast = useToast()
+
+const selectedTier = ref(0)
+const selectedCircle = ref('')
+const isUpdating = ref(false)
+const isCancelling = ref(false)
+
+const tiers = [
+  { amount: 0, display: '$0', label: 'Solidarity' },
+  { amount: 5, display: '$5', label: 'Supporter' },
+  { amount: 15, display: '$15', label: 'Sustainer' },
+  { amount: 30, display: '$30', label: 'Builder' },
+  { amount: 50, display: '$50', label: 'Champion' },
+]
+
+const circleOptions = [
+  { value: 'community', label: 'Community', description: 'For anyone interested in cooperative game dev. Access discussions, events, and resources.' },
+  { value: 'founder', label: 'Founder', description: 'For those actively building or running a cooperative studio. Peer support and deep dives.' },
+  { value: 'practitioner', label: 'Practitioner', description: 'For professionals advising co-ops: lawyers, accountants, facilitators, consultants.' },
+]
+
+// Initialize from member data
+watchEffect(() => {
+  if (memberData.value) {
+    selectedTier.value = memberData.value.contributionAmount || 0
+    selectedCircle.value = memberData.value.circle || 'community'
+  }
+})
+
+const { data: upcomingEvents } = await useFetch('/api/events', {
+  query: { limit: 3, upcoming: true },
+  default: () => [],
+})
+
+const formatMemberSince = (dateStr) => {
+  if (!dateStr) return ''
+  return new Date(dateStr).toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+}
+
+const handleUpdateTier = async () => {
+  isUpdating.value = true
+  try {
+    await $fetch('/api/members/update-contribution', {
+      method: 'POST',
+      body: { amount: selectedTier.value },
+    })
+    await checkMemberStatus()
+    toast.add({ title: 'Contribution updated', color: 'green' })
+  } catch (err) {
+    toast.add({ title: 'Update failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
+  } finally {
+    isUpdating.value = false
+  }
+}
+
+const handleUpdateCircle = async () => {
+  isUpdating.value = true
+  try {
+    await $fetch('/api/members/update-circle', {
+      method: 'POST',
+      body: { circle: selectedCircle.value },
+    })
+    await checkMemberStatus()
+    toast.add({ title: 'Circle updated', color: 'green' })
+  } catch (err) {
+    toast.add({ title: 'Update failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
+  } finally {
+    isUpdating.value = false
+  }
+}
+
+const handleCancelMembership = async () => {
+  isCancelling.value = true
+  try {
+    await $fetch('/api/members/cancel', { method: 'POST' })
+    await checkMemberStatus()
+    toast.add({ title: 'Membership cancelled', color: 'orange' })
+  } catch (err) {
+    toast.add({ title: 'Cancellation failed', description: err.data?.statusMessage || 'Please try again.', color: 'red' })
+  } finally {
+    isCancelling.value = false
+  }
+}
+</script>
+
+<style scoped>
+.loading {
+  padding: 48px 32px;
+  color: var(--text-dim);
+}
+
+/* ---- CONTENT AREA ---- */
+.content-area {
+  display: grid;
+  grid-template-columns: 1fr 200px;
+}
+.page-content {
+  min-width: 0;
+}
+
+/* ---- TWO-COLUMN LAYOUT ---- */
+.account-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+.account-col-left {
+  padding: 24px 28px;
+  border-right: 1px dashed var(--border);
+}
+.account-col-right {
+  padding: 24px 28px;
+}
+
+/* ---- MEMBERSHIP CARD ---- */
+.membership-card {
+  border: 1px dashed var(--border);
+  padding: 16px 20px;
+  margin-bottom: 12px;
+}
+.membership-card table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.membership-card td {
+  padding: 4px 0;
+  font-size: 12px;
+  border-bottom: 1px dashed var(--border);
+}
+.membership-card tr:last-child td {
+  border-bottom: none;
+}
+.membership-card td:first-child {
+  color: var(--text-faint);
+  width: 120px;
+}
+.membership-card td:last-child {
+  color: var(--text);
+}
+
+.status-dot {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+.status-dot.active { background: var(--green); }
+.status-dot.suspended { background: var(--ember); }
+.status-dot.cancelled { background: var(--text-faint); }
+.status-dot.pending_payment { background: var(--candle); }
+
+/* ---- EMAIL ---- */
+.email-display {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  font-size: 13px;
+}
+.email-value {
+  color: var(--text);
+}
+.email-hint {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-top: 6px;
+}
+
+/* ---- DANGER ZONE ---- */
+.section-divider.danger {
+  border-color: var(--ember);
+}
+.section-label.danger {
+  color: var(--ember);
+}
+.danger-zone p {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 12px;
+  max-width: 400px;
+}
+
+/* ---- TIER HINT ---- */
+.tier-hint {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-bottom: 12px;
+}
+
+.btn-section {
+  width: 100%;
+  text-align: center;
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 1024px) {
+  .content-area { grid-template-columns: 1fr; }
+  .account-columns { grid-template-columns: 1fr; }
+  .account-col-left {
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+  }
+}
+</style>
diff --git a/app/pages/member/dashboard.vue b/app/pages/member/dashboard.vue
index f92c61b..5b68461 100644
--- a/app/pages/member/dashboard.vue
+++ b/app/pages/member/dashboard.vue
@@ -1,347 +1,154 @@
 <template>
-  <div>
-    <!-- Page Header -->
-    <PageHeader
-      title="Member Dashboard"
-      :subtitle="`Welcome back, ${memberData?.name || 'Member'}!`"
-      size="medium"
-    />
+  <div class="dashboard">
+    <!-- Loading State -->
+    <div v-if="authPending" class="loading-state">
+      <div class="spinner" />
+      <p>Loading your dashboard...</p>
+    </div>
 
-    <UContainer class="">
-      <!-- Loading State -->
-      <div
-        v-if="authPending"
-        class="flex justify-center items-center py-20"
+    <!-- Unauthenticated State -->
+    <div v-else-if="!memberData" class="unauth-state">
+      <h2>Sign in required</h2>
+      <p>Please sign in to access your member dashboard.</p>
+      <button
+        class="btn btn-primary"
+        @click="openLoginModal({ title: 'Sign in to your dashboard', description: 'Enter your email to access your member dashboard' })"
       >
-        <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"
-          />
-          <p class="text-guild-300">Loading your dashboard...</p>
+        Sign In
+      </button>
+    </div>
+
+    <!-- Dashboard Content -->
+    <template v-else>
+      <!-- Member Status Banner -->
+      <MemberStatusBanner :dismissible="true" />
+
+      <!-- Welcome Header -->
+      <div class="welcome">
+        <h1>Welcome back, {{ memberData?.name }}</h1>
+        <div class="meta">
+          <CircleBadge :circle="memberData?.circle || 'community'" />
+          <span>${{ memberData?.contributionTier }} CAD/mo</span>
         </div>
       </div>
 
-      <!-- Unauthenticated State -->
-      <div
-        v-else-if="!memberData"
-        class="flex justify-center items-center py-20"
-      >
-        <div class="text-center max-w-md">
-          <div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
-            <Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
-          </div>
-          <h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
-          <p class="text-guild-400 mb-6">Please sign in to access your member dashboard.</p>
-          <UButton @click="openLoginModal({ title: 'Sign in to your dashboard', description: 'Enter your email to access your member dashboard' })">
-            Sign In
-          </UButton>
-        </div>
-      </div>
+      <!-- Upcoming Events + Quick Actions -->
+      <div class="content-row">
+        <div class="content-block">
+          <div class="section-label">Your Upcoming Events</div>
 
-      <!-- Dashboard Content -->
-      <div v-else class="space-y-8">
-        <!-- Member Status Banner -->
-        <MemberStatusBanner :dismissible="true" />
-        <!-- Welcome Card -->
-        <UCard
-          
-          :ui="{
-            root: 'bg-guild-900 border border-guild-700',
-            header: 'border-b border-guild-700',
-            body: 'bg-guild-900',
-          }"
-        >
-          <template #header>
-            <div class="flex items-start justify-between gap-4">
-              <div class="flex-1">
-                <h1 class="text-display-lg text-guild-100 warm-text">
-                  Welcome to Ghost Guild, {{ memberData?.name }}!
-                </h1>
-                <p
-                  :class="[
-                    'mt-2',
-                    isActive ? 'text-guild-300' : statusConfig.textColor,
-                  ]"
-                >
-                  {{
-                    isActive ? "Your membership is active!" : statusConfig.label
-                  }}
-                </p>
-              </div>
-              <div class="flex-shrink-0" v-if="memberData?.avatar">
-                <img
-                  :src="`/ghosties/Ghost-${capitalize(memberData.avatar)}.png`"
-                  :alt="memberData.name"
-                  class="w-16 h-16"
-                />
-              </div>
-              <div v-else class="flex-shrink-0">
-                <div
-                  class="w-16 h-16 bg-guild-700 border border-guild-600 flex items-center justify-center text-guild-200 font-bold text-xl"
-                >
-                  {{ memberData?.name?.charAt(0)?.toUpperCase() }}
-                </div>
-              </div>
-            </div>
-          </template>
-
-          <div class="flex flex-wrap gap-4 text-sm">
-            <div class="bg-guild-800 border border-guild-600 px-4 py-2">
-              <span class="text-ui-label text-guild-200">Circle:</span>
-              <span class="font-medium text-stone-50 ml-1 capitalize">{{
-                memberData?.circle
-              }}</span>
-            </div>
-            <div class="bg-guild-800 border border-guild-600 px-4 py-2">
-              <span class="text-ui-label text-guild-200">Contribution:</span>
-              <span class="font-medium text-stone-50 ml-1"
-                >${{ memberData?.contributionTier }} CAD/month</span
-              >
-            </div>
-          </div>
-        </UCard>
-
-        <!-- Quick Links -->
-        <UCard
-          :ui="{
-            root: 'bg-guild-900 border border-guild-700',
-            header: 'border-b border-guild-700 bg-guild-900',
-            body: 'bg-guild-900',
-          }"
-        >
-          <template #header>
-            <h2 class="text-display-sm text-guild-100 warm-text">
-              Quick Links
-            </h2>
-          </template>
-
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
-            <UButton
-              to="/members?peerSupport=true"
-              variant="outline"
-              :disabled="!canPeerSupport"
-              :class="[
-                'border-guild-600 text-guild-200 justify-start',
-                canPeerSupport
-                  ? 'hover:bg-guild-800 hover:border-candlelight-500'
-                  : 'opacity-50 cursor-not-allowed',
-              ]"
-              block
-              :title="
-                !canPeerSupport
-                  ? 'Complete your membership to book peer sessions'
-                  : ''
-              "
-            >
-              Book a Peer Session
-            </UButton>
-
-            <UButton
-              to="https://wiki.ghostguild.org"
-              target="_blank"
-              variant="outline"
-              class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
-              block
-            >
-              Browse Resources
-            </UButton>
-
-            <UButton
-              to="/member/profile"
-              variant="outline"
-              class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
-              block
-            >
-              Update Profile
-            </UButton>
-
-            <UButton
-              to="/events"
-              variant="outline"
-              class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
-              block
-            >
-              View Events
-            </UButton>
-
-            <UButton
-              to="/members"
-              variant="outline"
-              class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
-              block
-            >
-              Browse Members
-            </UButton>
-
-            <UButton
-              to="/member/profile#account"
-              variant="outline"
-              class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
-              block
-            >
-              Manage Account
-            </UButton>
-          </div>
-        </UCard>
-
-        <!-- Your Registered Events -->
-        <UCard
-          :ui="{
-            root: 'bg-guild-900 border border-guild-700',
-            header: 'border-b border-guild-700 bg-guild-900',
-            body: 'bg-guild-900',
-          }"
-        >
-          <template #header>
-            <div class="flex items-center justify-between">
-              <h2 class="text-display-sm text-guild-100 warm-text">
-                Your Upcoming Events
-              </h2>
-              <div class="flex items-center gap-2">
-                <UButton
-                  v-if="registeredEvents.length > 0"
-                  @click="copyCalendarLink"
-                  variant="ghost"
-                  size="sm"
-                  class="text-guild-300 hover:text-guild-100"
-                  icon="heroicons:calendar"
-                >
-                  {{
-                    calendarLinkCopied ? "Link Copied!" : "Get Calendar Link"
-                  }}
-                </UButton>
-                <UButton
-                  to="/events"
-                  variant="ghost"
-                  size="sm"
-                  class="text-guild-300 hover:text-guild-100"
-                >
-                  Browse All Events
-                </UButton>
-              </div>
-            </div>
-          </template>
-
-          <div v-if="loadingEvents" class="text-center py-8">
-            <div
-              class="w-6 h-6 border-2 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto"
-            ></div>
+          <div v-if="loadingEvents" class="loading-inline">
+            <div class="spinner spinner-sm" />
           </div>
 
-          <div v-else-if="registeredEvents.length" class="space-y-4">
+          <div v-else-if="registeredEvents.length" class="event-list">
             <NuxtLink
               v-for="evt in registeredEvents"
               :key="evt._id"
               :to="`/events/${evt.slug || evt._id}`"
-              class="block p-4 border border-guild-700 hover:border-candlelight-500 transition-colors"
+              class="event-item"
             >
-              <div class="flex items-start gap-4">
-                <div
-                  v-if="
-                    evt.featureImage &&
-                    (evt.featureImage.publicId || evt.featureImage.url)
-                  "
-                  class="flex-shrink-0 w-20 h-20 overflow-hidden"
-                >
-                  <img
-                    :src="getEventImageUrl(evt.featureImage)"
-                    :alt="evt.title"
-                    class="w-full h-full object-cover"
-                  />
-                </div>
-                <div
-                  v-else
-                  class="flex-shrink-0 w-20 h-20 bg-guild-800 border border-guild-600 flex items-center justify-center"
-                >
-                  <Icon
-                    name="heroicons:calendar-days"
-                    class="w-8 h-8 text-candlelight-400"
-                  />
-                </div>
-                <div class="flex-1 min-w-0">
-                  <h3 class="font-semibold text-guild-100 mb-1">
-                    {{ evt.title }}
-                  </h3>
-                  <div class="flex items-center gap-4 text-ui-mono text-guild-400">
-                    <span class="flex items-center gap-1">
-                      <Icon name="heroicons:calendar" class="w-4 h-4" />
-                      {{ formatEventDate(evt.startDate) }}
-                    </span>
-                    <span class="flex items-center gap-1">
-                      <Icon name="heroicons:clock" class="w-4 h-4" />
-                      {{ formatEventTime(evt.startDate) }}
-                    </span>
-                  </div>
-                </div>
-                <div class="flex-shrink-0">
-                  <Icon
-                    name="heroicons:chevron-right"
-                    class="w-5 h-5 text-guild-500"
-                  />
-                </div>
-              </div>
+              <span class="event-date">{{ formatEventDate(evt.startDate) }}</span>
+              <span class="event-title">{{ evt.title }}</span>
+              <CircleBadge v-if="evt.circle" :circle="evt.circle" />
             </NuxtLink>
+
+            <!-- Calendar subscription -->
+            <button class="calendar-btn" @click="copyCalendarLink">
+              {{ calendarLinkCopied ? 'Link copied!' : 'Subscribe to calendar' }}
+            </button>
           </div>
 
-          <div v-else class="text-center py-8">
-            <Icon
-              name="heroicons:calendar-days"
-              class="w-12 h-12 text-guild-600 mx-auto mb-3"
-            />
-            <p class="text-guild-400 mb-4">
-              You haven't registered for any upcoming events
-            </p>
-            <UButton
-              to="/events"
-              size="sm"
-              class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500"
-            >
-              Browse Events
-            </UButton>
+          <div v-else class="empty-state">
+            <p>You haven't registered for any upcoming events</p>
           </div>
 
+          <NuxtLink to="/events" class="section-link">Browse all events &rarr;</NuxtLink>
+
           <!-- Calendar subscription instructions -->
-          <div
-            v-if="registeredEvents.length > 0 && showCalendarInstructions"
-            class="mt-4 p-4 bg-guild-800 border border-guild-600"
-          >
-            <div class="flex items-start justify-between gap-4">
-              <div class="flex-1">
-                <h4 class="text-sm font-semibold text-guild-100 mb-2">
-                  How to Subscribe to Your Calendar
-                </h4>
-                <ul
-                  class="text-xs text-guild-300 space-y-1 list-disc list-inside"
-                >
-                  <li>
-                    <strong>Google Calendar:</strong> Click "+" → "From URL" →
-                    Paste the link
-                  </li>
-                  <li>
-                    <strong>Apple Calendar:</strong> File → New Calendar
-                    Subscription → Paste the link
-                  </li>
-                  <li>
-                    <strong>Outlook:</strong> Add Calendar → Subscribe from web
-                    → Paste the link
-                  </li>
-                </ul>
-                <p class="text-xs text-guild-400 mt-2">
-                  Your calendar will automatically update when you register or
-                  unregister from events.
-                </p>
-              </div>
-              <button
-                @click="showCalendarInstructions = false"
-                class="text-guild-400 hover:text-guild-200"
-              >
-                <Icon name="heroicons:x-mark" class="w-5 h-5" />
-              </button>
+          <div v-if="registeredEvents.length > 0 && showCalendarInstructions" class="calendar-instructions">
+            <div class="ci-header">
+              <strong>How to Subscribe to Your Calendar</strong>
+              <button @click="showCalendarInstructions = false" class="ci-close">&times;</button>
             </div>
+            <ul>
+              <li><strong>Google Calendar:</strong> Click "+" then "From URL" then paste the link</li>
+              <li><strong>Apple Calendar:</strong> File then New Calendar Subscription then paste the link</li>
+              <li><strong>Outlook:</strong> Add Calendar then Subscribe from web then paste the link</li>
+            </ul>
+            <p class="ci-note">Your calendar will automatically update when you register or unregister from events.</p>
           </div>
-        </UCard>
+        </div>
+
+        <div class="content-block">
+          <div class="section-label">Quick Actions</div>
+          <NuxtLink
+            to="/members?peerSupport=true"
+            class="quick-action"
+            :class="{ disabled: !canPeerSupport }"
+            :title="!canPeerSupport ? 'Complete your membership to book peer sessions' : ''"
+          >
+            Book a peer session<span class="arrow">&rarr;</span>
+          </NuxtLink>
+          <NuxtLink to="/member/profile" class="quick-action">
+            Update your profile<span class="arrow">&rarr;</span>
+          </NuxtLink>
+          <a href="https://wiki.ghostguild.org" target="_blank" class="quick-action">
+            Browse the wiki<span class="arrow">&rarr;</span>
+          </a>
+          <NuxtLink to="/members" class="quick-action">
+            Browse members<span class="arrow">&rarr;</span>
+          </NuxtLink>
+          <NuxtLink to="/member/profile#account" class="quick-action">
+            Manage account<span class="arrow">&rarr;</span>
+          </NuxtLink>
+        </div>
       </div>
-    </UContainer>
+
+      <!-- Membership Summary + Peer Support -->
+      <div class="content-row">
+        <div class="content-block">
+          <div class="section-label">Your Membership</div>
+          <div class="membership-row">
+            <span class="key">Circle</span>
+            <span class="val" :style="{ color: `var(--c-${memberData?.circle || 'community'})` }">
+              {{ memberData?.circle }}
+            </span>
+          </div>
+          <div class="membership-row">
+            <span class="key">Contribution</span>
+            <span class="val">${{ memberData?.contributionTier }} CAD/month</span>
+          </div>
+          <div class="membership-row">
+            <span class="key">Status</span>
+            <span class="val">
+              <span :class="isActive ? 'status-active' : ''">
+                {{ isActive ? 'Active' : statusConfig.label }}
+              </span>
+            </span>
+          </div>
+          <div v-if="memberData?.createdAt" class="membership-row">
+            <span class="key">Member since</span>
+            <span class="val">{{ formatMemberSince(memberData.createdAt) }}</span>
+          </div>
+          <NuxtLink to="/member/profile#account" class="section-link">
+            Change circle or contribution &rarr;
+          </NuxtLink>
+        </div>
+
+        <div class="content-block">
+          <div class="section-label">Peer Support</div>
+          <DashedBox>
+            <p class="peer-text">
+              Interested in offering peer support? Set up your profile to connect with other members who share your interests and experience.
+            </p>
+            <NuxtLink to="/member/profile" class="section-link">
+              Set up peer support &rarr;
+            </NuxtLink>
+          </DashedBox>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
@@ -473,7 +280,6 @@ const formatEventDate = (dateString) => {
   return new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
-    year: "numeric",
   }).format(date);
 };
 
@@ -485,6 +291,14 @@ const formatEventTime = (dateString) => {
   }).format(date);
 };
 
+const formatMemberSince = (dateString) => {
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    year: "numeric",
+  }).format(date);
+};
+
 onMounted(() => {
   loadRegisteredEvents();
 });
@@ -493,6 +307,340 @@ onMounted(() => {
 useHead({
   title: "Member Dashboard - Ghost Guild",
 });
-
-// Removed middleware - handling auth directly in the page component
 </script>
+
+<style scoped>
+/* ---- DASHBOARD LAYOUT ---- */
+.dashboard {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+/* ---- LOADING / UNAUTH STATES ---- */
+.loading-state {
+  text-align: center;
+  padding: 80px 24px;
+  color: var(--text-faint);
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px dashed var(--candle);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 12px;
+}
+
+.spinner-sm {
+  width: 16px;
+  height: 16px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.loading-inline {
+  padding: 24px 0;
+  text-align: center;
+}
+
+.unauth-state {
+  text-align: center;
+  padding: 80px 24px;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.unauth-state h2 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+
+.unauth-state p {
+  color: var(--text-dim);
+  font-size: 12px;
+  margin-bottom: 20px;
+}
+
+/* ---- WELCOME HEADER ---- */
+.welcome {
+  padding: 28px 28px;
+  border-bottom: 1px dashed var(--border);
+  display: flex;
+  align-items: baseline;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.welcome h1 {
+  font-family: 'Brygada 1918', serif;
+  font-size: 24px;
+  font-weight: 500;
+  color: var(--text-bright);
+  line-height: 1.2;
+}
+
+.welcome .meta {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+/* ---- CONTENT GRID ---- */
+.content-row {
+  display: grid;
+  grid-template-columns: repeat(2, 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;
+}
+
+/* ---- EVENT LIST ---- */
+.event-list {
+  margin-bottom: 4px;
+}
+
+.event-item {
+  display: grid;
+  grid-template-columns: 64px 1fr auto;
+  gap: 12px;
+  align-items: baseline;
+  padding: 10px 0;
+  border-bottom: 1px dashed var(--border);
+  transition: padding-left 0.2s;
+  text-decoration: none;
+  color: inherit;
+}
+
+.event-item:last-of-type {
+  border-bottom: none;
+}
+
+.event-item:hover {
+  padding-left: 4px;
+  text-decoration: none;
+}
+
+.event-date {
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+.event-title {
+  color: var(--text);
+  font-size: 13px;
+}
+
+.event-item:hover .event-title {
+  color: var(--candle);
+}
+
+/* ---- CALENDAR BUTTON ---- */
+.calendar-btn {
+  font-family: 'Commit Mono', monospace;
+  font-size: 11px;
+  color: var(--candle-dim);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px 0 0;
+}
+
+.calendar-btn:hover {
+  color: var(--candle);
+}
+
+/* ---- CALENDAR INSTRUCTIONS ---- */
+.calendar-instructions {
+  margin-top: 16px;
+  padding: 16px 20px;
+  border: 1px dashed var(--border);
+  font-size: 12px;
+}
+
+.ci-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 8px;
+  color: var(--text-bright);
+  font-size: 12px;
+}
+
+.ci-close {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 16px;
+  line-height: 1;
+  padding: 0;
+}
+
+.ci-close:hover {
+  color: var(--text);
+}
+
+.calendar-instructions ul {
+  list-style: disc;
+  padding-left: 16px;
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.8;
+}
+
+.ci-note {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-top: 8px;
+}
+
+/* ---- EMPTY STATE ---- */
+.empty-state {
+  padding: 16px 0;
+}
+
+.empty-state p {
+  color: var(--text-faint);
+  font-size: 12px;
+}
+
+/* ---- SECTION LINK ---- */
+.section-link {
+  display: inline-block;
+  margin-top: 16px;
+  font-size: 12px;
+  color: var(--candle);
+  text-decoration: none;
+}
+
+.section-link:hover {
+  text-decoration: underline;
+}
+
+/* ---- QUICK ACTIONS ---- */
+.quick-action {
+  border: 1px dashed var(--border);
+  padding: 14px 20px;
+  margin-bottom: 8px;
+  transition: border-color 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: var(--text);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.quick-action:hover {
+  border-color: var(--candle-faint);
+  color: var(--candle);
+  text-decoration: none;
+}
+
+.quick-action.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.quick-action .arrow {
+  color: var(--text-faint);
+  margin-left: 8px;
+  transition: color 0.2s;
+}
+
+.quick-action:hover .arrow {
+  color: var(--candle-faint);
+}
+
+/* ---- MEMBERSHIP SUMMARY ---- */
+.membership-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 0;
+  border-bottom: 1px dashed var(--border);
+  font-size: 12px;
+}
+
+.membership-row:last-of-type {
+  border-bottom: none;
+}
+
+.membership-row .key {
+  color: var(--text-faint);
+}
+
+.membership-row .val {
+  color: var(--text);
+  text-transform: capitalize;
+}
+
+.status-active {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-active::before {
+  content: '';
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--green);
+}
+
+/* ---- PEER SUPPORT ---- */
+.peer-text {
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+/* ---- 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;
+  }
+
+  .welcome {
+    padding: 24px 20px;
+  }
+
+  .content-block {
+    padding: 20px;
+  }
+
+  .event-item {
+    grid-template-columns: 56px 1fr auto;
+    gap: 8px;
+  }
+}
+</style>
diff --git a/app/pages/member/my-updates.vue b/app/pages/member/my-updates.vue
index fea70b0..d625f3f 100644
--- a/app/pages/member/my-updates.vue
+++ b/app/pages/member/my-updates.vue
@@ -2,231 +2,580 @@
   <div>
     <PageHeader
       title="My Updates"
-      subtitle="View and manage your updates"
-      size="medium"
+      subtitle="Your activity and milestones in the Guild"
     />
 
-    <section class="py-12 px-4">
-      <UContainer class="px-4">
-        <!-- Stats -->
-        <div v-if="isAuthenticated && !pending" class="mb-8 flex items-center justify-between">
-          <div class="text-guild-300">
-            <span class="text-2xl font-bold text-guild-100">{{ total }}</span>
-            {{ total === 1 ? "update" : "updates" }} posted
-          </div>
-          <UButton to="/updates/new" icon="i-lucide-plus"> New Update </UButton>
+    <!-- Content Area: two-column with events mini sidebar -->
+    <div class="content-area">
+
+      <!-- Main Content -->
+      <div class="content-main">
+
+        <!-- Stats + New Update row -->
+        <div v-if="isAuthenticated && !pending" class="stats-row">
+          <span class="stats-count">
+            <strong>{{ total }}</strong> {{ total === 1 ? 'update' : 'updates' }} posted
+          </span>
+          <NuxtLink to="/updates/new" class="btn btn-primary">+ New Update</NuxtLink>
         </div>
 
         <!-- Loading State -->
-        <div
-          v-if="pending && !updates.length"
-          class="flex justify-center items-center py-20"
-        >
-          <div class="text-center">
-            <div
-              class="w-8 h-8 border-4 border-guild-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
-            ></div>
-            <p class="text-guild-400">Loading your updates...</p>
-          </div>
+        <div v-if="pending && !updates.length" class="state-box">
+          <div class="spinner"></div>
+          <p class="state-text">Loading your updates...</p>
         </div>
 
         <!-- Unauthenticated State -->
-        <div
-          v-else-if="!isAuthenticated"
-          class="flex justify-center items-center py-20"
-        >
-          <div class="text-center max-w-md">
-            <div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
-              <Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
-            </div>
-            <h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
-            <p class="text-guild-400 mb-6">Please sign in to view your updates.</p>
-            <UButton @click="openLoginModal({ title: 'Sign in to view your updates', description: 'Enter your email to access your updates' })">
-              Sign In
-            </UButton>
+        <div v-else-if="!isAuthenticated" class="state-box">
+          <div class="state-icon">
+            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+            </svg>
           </div>
+          <h2 class="state-heading">Sign in required</h2>
+          <p class="state-text">Please sign in to view your updates.</p>
+          <button
+            class="btn btn-primary"
+            @click="openLoginModal({ title: 'Sign in to view your updates', description: 'Enter your email to access your updates' })"
+          >
+            Sign In
+          </button>
         </div>
 
-        <!-- Updates List -->
-        <div v-else-if="updates.length" class="space-y-6">
-          <UpdateCard
-            v-for="update in updates"
-            :key="update._id"
-            :update="update"
-            :show-preview="true"
-            @edit="handleEdit"
-            @delete="handleDelete"
-          />
+        <!-- Updates Timeline -->
+        <div v-else-if="updates.length" class="timeline-wrap">
+          <div class="timeline">
+            <div
+              v-for="update in updates"
+              :key="update._id"
+              class="tl-item"
+            >
+              <div class="tl-dot">&#9998;</div>
+              <div class="tl-time">{{ formatDate(update.createdAt) }}</div>
+              <div class="tl-text">
+                <NuxtLink :to="`/updates/${update._id}`" class="tl-title">
+                  {{ getUpdateTitle(update) }}
+                </NuxtLink>
+                <span v-if="isEdited(update)" class="tl-edited">(edited)</span>
+                <span v-if="update.privacy === 'private'" class="badge">Private</span>
+                <span v-if="update.privacy === 'public'" class="badge">Public</span>
+              </div>
+              <div v-if="getUpdatePreview(update)" class="tl-detail">
+                {{ getUpdatePreview(update) }}
+              </div>
+
+              <!-- Images -->
+              <div v-if="update.images?.length" class="tl-images">
+                <img
+                  v-for="(image, index) in update.images"
+                  :key="index"
+                  :src="image.url"
+                  :alt="image.alt || 'Update image'"
+                  class="tl-image"
+                />
+              </div>
+
+              <!-- Actions -->
+              <div v-if="isAuthor(update)" class="tl-actions">
+                <button class="tl-action-btn" @click="handleEdit(update)">Edit</button>
+                <span class="tl-action-sep">&middot;</span>
+                <button class="tl-action-btn tl-action-danger" @click="handleDelete(update)">Delete</button>
+              </div>
+            </div>
+          </div>
 
           <!-- Load More -->
-          <div v-if="hasMore" class="flex justify-center pt-4">
-            <UButton
-              variant="outline"
-              color="neutral"
-              :loading="loadingMore"
+          <div v-if="hasMore" class="load-more">
+            <button
+              class="btn"
+              :disabled="loadingMore"
               @click="loadMore"
             >
-              Load More
-            </UButton>
+              {{ loadingMore ? 'Loading...' : 'Load More' }}
+            </button>
           </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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
-              />
+        <div v-else class="state-box">
+          <div class="state-icon">
+            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
             </svg>
           </div>
-          <h3 class="text-lg font-medium text-guild-300 mb-2">
-            No updates yet
-          </h3>
-          <p class="text-guild-400 mb-6">
-            Share your first update with the community
-          </p>
-          <UButton to="/updates/new" icon="i-lucide-plus">
-            Post Your First Update
-          </UButton>
+          <h2 class="state-heading">No updates yet</h2>
+          <p class="state-text">Share your first update with the community</p>
+          <NuxtLink to="/updates/new" class="btn btn-primary">+ Post Your First Update</NuxtLink>
         </div>
-      </UContainer>
-    </section>
+
+      </div>
+
+      <!-- Events Mini Sidebar -->
+      <EventsMiniSidebar :events="upcomingEvents" />
+
+    </div>
 
     <!-- Delete Confirmation Modal -->
-    <UModal
-      v-model:open="showDeleteModal"
-      title="Delete Update?"
-      description="Are you sure you want to delete this update? This action cannot be undone."
-    >
-      <template #footer>
-        <div class="flex justify-end gap-3">
-          <UButton
-            variant="ghost"
-            color="neutral"
-            @click="showDeleteModal = false"
-          >
-            Cancel
-          </UButton>
-          <UButton color="red" :loading="deleting" @click="confirmDelete">
-            Delete
-          </UButton>
+    <Teleport to="body">
+      <div v-if="showDeleteModal" class="modal-overlay" @click.self="showDeleteModal = false">
+        <div class="modal-box">
+          <h3 class="modal-heading">Delete Update?</h3>
+          <p class="modal-text">Are you sure you want to delete this update? This action cannot be undone.</p>
+          <div class="modal-actions">
+            <button class="btn" @click="showDeleteModal = false">Cancel</button>
+            <button class="btn btn-danger" :disabled="deleting" @click="confirmDelete">
+              {{ deleting ? 'Deleting...' : 'Delete' }}
+            </button>
+          </div>
         </div>
-      </template>
-    </UModal>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup>
-const { isAuthenticated, checkMemberStatus } = useAuth();
-const { openLoginModal } = useLoginModal();
+const { isAuthenticated, memberData, checkMemberStatus } = useAuth()
+const { openLoginModal } = useLoginModal()
 
-const updates = ref([]);
-const pending = ref(false);
-const loadingMore = ref(false);
-const hasMore = ref(false);
-const total = ref(0);
+const updates = ref([])
+const pending = ref(false)
+const loadingMore = ref(false)
+const hasMore = ref(false)
+const total = ref(0)
 
-const showDeleteModal = ref(false);
-const updateToDelete = ref(null);
-const deleting = ref(false);
+const showDeleteModal = ref(false)
+const updateToDelete = ref(null)
+const deleting = ref(false)
+
+const upcomingEvents = ref([])
+
+// Check if current user is the author of an update
+const isAuthor = (update) => {
+  return memberData.value && update.author?._id === memberData.value.id
+}
+
+// Check if update was edited
+const isEdited = (update) => {
+  const created = new Date(update.createdAt).getTime()
+  const updated = new Date(update.updatedAt).getTime()
+  return updated - created > 1000
+}
+
+// Extract a title from update content (first line or first ~60 chars)
+const getUpdateTitle = (update) => {
+  if (!update.content) return 'Untitled update'
+  const firstLine = update.content.split('\n')[0]
+  if (firstLine.length <= 80) return firstLine
+  return firstLine.substring(0, 80) + '...'
+}
+
+// Get a preview of the update content (after the first line)
+const getUpdatePreview = (update) => {
+  if (!update.content) return ''
+  const lines = update.content.split('\n')
+  if (lines.length <= 1 && update.content.length <= 80) return ''
+  // If the first line was truncated, show the full content as preview
+  if (lines.length <= 1) return ''
+  const rest = lines.slice(1).join(' ').trim()
+  if (!rest) return ''
+  return rest.length > 200 ? rest.substring(0, 200) + '...' : rest
+}
+
+// Format date with relative time
+const formatDate = (date) => {
+  const now = new Date()
+  const updateDate = new Date(date)
+  const diffInSeconds = Math.floor((now - updateDate) / 1000)
+
+  if (diffInSeconds < 60) return 'just now'
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`
+  if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} days ago`
+
+  return updateDate.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: updateDate.getFullYear() !== now.getFullYear() ? 'numeric' : undefined,
+  })
+}
 
 // Check authentication
 onMounted(async () => {
   if (!isAuthenticated.value) {
-    const authenticated = await checkMemberStatus();
+    const authenticated = await checkMemberStatus()
     if (!authenticated) {
-      // Show login modal instead of redirecting
       openLoginModal({
-        title: "Sign in to view your updates",
-        description: "Enter your email to access your updates",
-      });
-      return;
+        title: 'Sign in to view your updates',
+        description: 'Enter your email to access your updates',
+      })
+      return
     }
   }
 
-  await loadUpdates();
-});
+  await Promise.all([loadUpdates(), loadUpcomingEvents()])
+})
 
 // Load updates
 const loadUpdates = async () => {
-  pending.value = true;
+  pending.value = true
   try {
-    const response = await $fetch("/api/updates/my-updates", {
+    const response = await $fetch('/api/updates/my-updates', {
       params: { limit: 20, skip: 0 },
-    });
-    updates.value = response.updates;
-    total.value = response.total;
-    hasMore.value = response.hasMore;
+    })
+    updates.value = response.updates
+    total.value = response.total
+    hasMore.value = response.hasMore
   } catch (error) {
-    console.error("Failed to load updates:", error);
+    console.error('Failed to load updates:', error)
   } finally {
-    pending.value = false;
+    pending.value = false
   }
-};
+}
+
+// Load upcoming events for sidebar
+const loadUpcomingEvents = async () => {
+  try {
+    const response = await $fetch('/api/events', {
+      params: { limit: 3, upcoming: true },
+    })
+    upcomingEvents.value = response.events || response || []
+  } catch (error) {
+    console.error('Failed to load upcoming events:', error)
+  }
+}
 
 // Load more updates
 const loadMore = async () => {
-  loadingMore.value = true;
+  loadingMore.value = true
   try {
-    const response = await $fetch("/api/updates/my-updates", {
+    const response = await $fetch('/api/updates/my-updates', {
       params: { limit: 20, skip: updates.value.length },
-    });
-    updates.value.push(...response.updates);
-    hasMore.value = response.hasMore;
+    })
+    updates.value.push(...response.updates)
+    hasMore.value = response.hasMore
   } catch (error) {
-    console.error("Failed to load more updates:", error);
+    console.error('Failed to load more updates:', error)
   } finally {
-    loadingMore.value = false;
+    loadingMore.value = false
   }
-};
+}
 
 // Handle edit
 const handleEdit = (update) => {
-  navigateTo(`/updates/${update._id}/edit`);
-};
+  navigateTo(`/updates/${update._id}/edit`)
+}
 
 // Handle delete
 const handleDelete = (update) => {
-  updateToDelete.value = update;
-  showDeleteModal.value = true;
-};
+  updateToDelete.value = update
+  showDeleteModal.value = true
+}
 
 // Confirm delete
 const confirmDelete = async () => {
-  if (!updateToDelete.value) return;
+  if (!updateToDelete.value) return
 
-  deleting.value = true;
+  deleting.value = true
   try {
     await $fetch(`/api/updates/${updateToDelete.value._id}`, {
-      method: "DELETE",
-    });
+      method: 'DELETE',
+    })
 
     // Remove from list
     updates.value = updates.value.filter(
       (u) => u._id !== updateToDelete.value._id,
-    );
-    total.value--;
+    )
+    total.value--
 
-    showDeleteModal.value = false;
-    updateToDelete.value = null;
+    showDeleteModal.value = false
+    updateToDelete.value = null
   } catch (error) {
-    console.error("Failed to delete update:", error);
-    alert("Failed to delete update. Please try again.");
+    console.error('Failed to delete update:', error)
+    alert('Failed to delete update. Please try again.')
   } finally {
-    deleting.value = false;
+    deleting.value = false
   }
-};
+}
 
 useHead({
-  title: "My Updates - Ghost Guild",
-});
+  title: 'My Updates - Ghost Guild',
+})
 </script>
+
+<style scoped>
+/* ---- TWO-COLUMN LAYOUT ---- */
+.content-area {
+  display: grid;
+  grid-template-columns: 1fr 200px;
+}
+
+.content-main {
+  min-width: 0;
+}
+
+/* ---- STATS ROW ---- */
+.stats-row {
+  padding: 16px 32px;
+  border-bottom: 1px dashed var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.stats-count {
+  color: var(--text-dim);
+}
+
+.stats-count strong {
+  color: var(--text-bright);
+  font-size: 18px;
+}
+
+/* ---- STATE BOXES (loading, empty, unauth) ---- */
+.state-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 32px;
+  text-align: center;
+}
+
+.state-icon {
+  width: 48px;
+  height: 48px;
+  border: 1px dashed var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  color: var(--text-faint);
+}
+
+.state-heading {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 6px;
+}
+
+.state-text {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-bottom: 20px;
+  max-width: 320px;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px dashed var(--candle);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  margin-bottom: 12px;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ---- TIMELINE ---- */
+.timeline-wrap {
+  padding: 24px 32px 48px;
+}
+
+.timeline {
+  position: relative;
+  padding-left: 32px;
+}
+
+.timeline::before {
+  content: '';
+  position: absolute;
+  left: 11px;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  border-left: 1px dashed var(--border);
+}
+
+.tl-item {
+  position: relative;
+  padding: 0 0 24px;
+}
+
+.tl-item:last-child {
+  padding-bottom: 0;
+}
+
+.tl-dot {
+  position: absolute;
+  left: -32px;
+  top: 2px;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg);
+  border: 1px dashed var(--border);
+  font-size: 11px;
+  color: var(--text-dim);
+}
+
+.tl-time {
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-bottom: 2px;
+}
+
+.tl-text {
+  font-size: 13px;
+  color: var(--text);
+  line-height: 1.5;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tl-title {
+  color: var(--text-bright);
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.tl-title:hover {
+  color: var(--candle);
+  text-decoration: underline;
+}
+
+.tl-edited {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+.tl-detail {
+  font-size: 12px;
+  color: var(--text-dim);
+  margin-top: 4px;
+  padding: 8px 12px;
+  border-left: 2px solid var(--border);
+  line-height: 1.6;
+}
+
+.tl-images {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.tl-image {
+  max-width: 200px;
+  height: auto;
+  border: 1px dashed var(--border);
+}
+
+.tl-actions {
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.tl-action-btn {
+  font-family: 'Commit Mono', monospace;
+  font-size: 11px;
+  color: var(--text-faint);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.15s;
+}
+
+.tl-action-btn:hover {
+  color: var(--candle);
+}
+
+.tl-action-danger:hover {
+  color: var(--ember);
+}
+
+.tl-action-sep {
+  color: var(--border);
+  font-size: 10px;
+}
+
+/* ---- LOAD MORE ---- */
+.load-more {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+}
+
+/* ---- MODAL ---- */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(42, 32, 21, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 50;
+}
+
+.modal-box {
+  background: var(--bg);
+  border: 1px dashed var(--border);
+  padding: 28px 32px;
+  max-width: 400px;
+  width: 90%;
+}
+
+.modal-heading {
+  font-family: 'Brygada 1918', serif;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 8px;
+}
+
+.modal-text {
+  font-size: 12px;
+  color: var(--text-dim);
+  line-height: 1.7;
+  margin-bottom: 20px;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 1024px) {
+  .content-area {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .stats-row {
+    padding: 12px 20px;
+  }
+
+  .timeline-wrap {
+    padding: 20px 20px 40px;
+  }
+
+  .state-box {
+    padding: 48px 20px;
+  }
+}
+</style>
diff --git a/app/pages/member/profile.vue b/app/pages/member/profile.vue
index 2a4675f..69cf3f0 100644
--- a/app/pages/member/profile.vue
+++ b/app/pages/member/profile.vue
@@ -1,1133 +1,452 @@
 <template>
   <div>
-    <PageHeader
-      title="Your Profile"
-      subtitle="Manage your profile information and privacy settings"
-      size="medium"
-    />
+    <!-- Loading State -->
+    <div v-if="loading" class="loading-state">
+      <p style="color: var(--text-faint)">Loading your profile...</p>
+    </div>
 
-    <section class="py-12">
-      <UContainer>
-        <!-- Loading State -->
-        <div
-          v-if="loading"
-          class="flex justify-center items-center py-20"
-        >
-          <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 your profile...
-            </p>
-          </div>
-        </div>
+    <!-- Unauthenticated State -->
+    <div v-else-if="!memberData" class="loading-state">
+      <p style="color: var(--text-faint); margin-bottom: 12px;">Please sign in to access your profile settings.</p>
+      <button
+        class="btn btn-primary"
+        @click="openLoginModal({ title: 'Sign in to your profile', description: 'Enter your email to manage your profile settings' })"
+      >
+        Sign In
+      </button>
+    </div>
 
-        <!-- Unauthenticated State -->
-        <div
-          v-else-if="!memberData"
-          class="flex justify-center items-center py-20"
-        >
-          <div class="text-center max-w-md">
-            <div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
-              <Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
+    <div v-else>
+      <!-- PAGE HEADER -->
+      <PageHeader
+        title="Edit Profile"
+        subtitle="How you appear to other members"
+      />
+
+      <!-- TWO-COLUMN FORM -->
+      <form class="page-content" @submit.prevent="handleSubmit">
+        <div class="profile-columns">
+
+          <!-- ======== LEFT COLUMN ======== -->
+          <div class="profile-col-left">
+
+            <div class="section-label">Basics</div>
+
+            <div class="field">
+              <label>Name</label>
+              <input v-model="formData.name" type="text" placeholder="Your name" required />
             </div>
-            <h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
-            <p class="text-guild-400 mb-6">Please sign in to access your profile settings.</p>
-            <UButton @click="openLoginModal({ title: 'Sign in to your profile', description: 'Enter your email to manage your profile settings' })">
-              Sign In
-            </UButton>
+
+            <div class="row-2">
+              <div class="field">
+                <div class="label-row">
+                  <label>Pronouns</label>
+                  <PrivacyToggle v-model="formData.pronounsPrivacy" />
+                </div>
+                <input v-model="formData.pronouns" type="text" placeholder="e.g., she/her, they/them" />
+              </div>
+              <div class="field">
+                <div class="label-row">
+                  <label>Timezone</label>
+                  <PrivacyToggle v-model="formData.timeZonePrivacy" />
+                </div>
+                <input v-model="formData.timeZone" type="text" placeholder="e.g., America/Toronto" />
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="label-row">
+                <label>Avatar</label>
+                <PrivacyToggle v-model="formData.avatarPrivacy" />
+              </div>
+              <div class="avatar-row">
+                <button
+                  v-for="ghost in availableGhosts"
+                  :key="ghost.value"
+                  type="button"
+                  class="avatar-option"
+                  :class="{ selected: formData.avatar === ghost.value }"
+                  :title="ghost.label"
+                  @click="formData.avatar = ghost.value"
+                >
+                  <img :src="ghost.image" :alt="ghost.label" />
+                </button>
+              </div>
+            </div>
+
+            <!-- About You -->
+            <hr class="section-divider section-divider-left" />
+            <div class="section-label">About You</div>
+
+            <div class="row-2">
+              <div class="field">
+                <div class="label-row">
+                  <label>Studio / Organization</label>
+                  <PrivacyToggle v-model="formData.studioPrivacy" />
+                </div>
+                <input v-model="formData.studio" type="text" placeholder="Studio name" />
+              </div>
+              <div class="field">
+                <div class="label-row">
+                  <label>Location</label>
+                  <PrivacyToggle v-model="formData.locationPrivacy" />
+                </div>
+                <input v-model="formData.location" type="text" placeholder="Toronto, ON" />
+              </div>
+            </div>
+
+            <div class="field">
+              <div class="label-row">
+                <label>Bio</label>
+                <PrivacyToggle v-model="formData.bioPrivacy" />
+              </div>
+              <textarea v-model="formData.bio" rows="2" placeholder="Share your background, interests, and experience..." maxlength="300"></textarea>
+              <div class="char-count">{{ formData.bio?.length || 0 }} / 300</div>
+            </div>
+
+            <!-- Skills Exchange -->
+            <hr class="section-divider section-divider-left" />
+            <div class="section-label">Skills Exchange</div>
+
+            <div class="field">
+              <div class="label-row">
+                <label>What I Can Contribute</label>
+                <PrivacyToggle v-model="formData.offeringPrivacy" />
+              </div>
+              <TagInput v-model="formData.offering.tags" placeholder="add skill..." />
+            </div>
+            <div class="field">
+              <label>Details</label>
+              <textarea v-model="formData.offering.text" rows="2" placeholder="e.g., I have 10+ years in Unity and love helping new devs."></textarea>
+            </div>
+
+            <div class="field">
+              <div class="label-row">
+                <label>What I'm Looking For</label>
+                <PrivacyToggle v-model="formData.lookingForPrivacy" />
+              </div>
+              <TagInput v-model="formData.lookingFor.tags" placeholder="add topic..." />
+            </div>
+            <div class="field">
+              <label>Details</label>
+              <textarea v-model="formData.lookingFor.text" rows="2" placeholder="e.g., Seeking a business-minded co-founder for a worker co-op studio."></textarea>
+            </div>
+
+            <!-- Visibility -->
+            <hr class="section-divider section-divider-left" />
+            <div class="section-label">Visibility</div>
+
+            <div class="toggle-field">
+              <USwitch v-model="formData.showInDirectory" />
+              <div class="toggle-label">
+                Show in Member Directory
+                <span class="toggle-sub">Your profile will appear in the public member listing</span>
+              </div>
+            </div>
+
           </div>
-        </div>
 
-        <div v-else>
-          <UTabs :items="tabItems" v-model="activeTab">
-            <template #profile>
-              <UForm
-                :state="formData"
-                @submit="handleSubmit"
-                class="space-y-12 mt-8 max-w-4xl"
-              >
-                <!-- Basic Information -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-8 text-guild-100 warm-text"
-                  >
-                    Basic Information
-                  </h2>
+          <!-- ======== RIGHT COLUMN ======== -->
+          <div class="profile-col-right">
 
-                  <div class="space-y-6">
-                    <UFormField
-                      label="Name"
-                      name="name"
-                      description="Your display name across Ghost Guild"
-                      required
-                    >
-                      <UInput
-                        v-model="formData.name"
-                        placeholder="Your name"
-                        class="w-full"
-                      />
-                    </UFormField>
+            <div class="section-label">Peer Support</div>
 
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                      <div>
-                        <UFormField
-                          label="Pronouns"
-                          name="pronouns"
-                          description="How you'd like to be addressed"
-                        >
-                          <UInput
-                            v-model="formData.pronouns"
-                            placeholder="e.g., she/her, they/them"
-                            class="w-full"
-                          />
-                        </UFormField>
-                        <PrivacyToggle
-                          v-model="formData.pronounsPrivacy"
-                          class="mt-2"
-                        />
-                      </div>
+            <div class="toggle-field">
+              <USwitch v-model="formData.peerSupportEnabled" />
+              <div class="toggle-label">
+                Offer Peer Support
+                <span class="toggle-sub">Let other members request 1:1 time with you</span>
+              </div>
+            </div>
 
-                      <div>
-                        <UFormField
-                          label="Time Zone"
-                          name="timeZone"
-                          description="Helps coordinate meetings"
-                        >
-                          <UInput
-                            v-model="formData.timeZone"
-                            placeholder="e.g., America/Toronto"
-                            class="w-full"
-                          />
-                        </UFormField>
-                        <PrivacyToggle
-                          v-model="formData.timeZonePrivacy"
-                          class="mt-2"
-                        />
-                      </div>
-                    </div>
-
-                    <div>
-                      <UFormField
-                        label="Avatar"
-                        name="avatar"
-                        description="Choose your ghost avatar"
-                      >
-                        <div class="grid grid-cols-3 sm:grid-cols-6 gap-4 mt-2">
-                          <button
-                            v-for="ghost in availableGhosts"
-                            :key="ghost.value"
-                            type="button"
-                            class="relative aspect-square rounded-lg border-2 transition-all hover:scale-105"
-                            :class="
-                              formData.avatar === ghost.value
-                                ? 'border-candlelight-400 bg-candlelight-900/20'
-                                : 'border-guild-700 bg-guild-800/50 hover:border-guild-600'
-                            "
-                            @click="formData.avatar = ghost.value"
-                          >
-                            <img
-                              :src="ghost.image"
-                              :alt="ghost.label"
-                              class="w-full h-full object-contain p-2"
-                            />
-                            <span
-                              v-if="formData.avatar === ghost.value"
-                              class="absolute -top-2 -right-2 w-6 h-6 bg-candlelight-500 rounded-full flex items-center justify-center text-white text-xs"
-                            >
-                              ✓
-                            </span>
-                          </button>
-                        </div>
-                      </UFormField>
-                      <PrivacyToggle
-                        v-model="formData.avatarPrivacy"
-                        class="mt-2"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Professional Info -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-8 text-guild-100 warm-text"
-                  >
-                    Professional Information
-                  </h2>
-
-                  <div class="space-y-6">
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                      <div>
-                        <UFormField
-                          label="Studio/Organization"
-                          name="studio"
-                          description="Your current affiliation"
-                        >
-                          <UInput
-                            v-model="formData.studio"
-                            placeholder="Studio name"
-                            class="w-full"
-                          />
-                        </UFormField>
-                        <PrivacyToggle
-                          v-model="formData.studioPrivacy"
-                          class="mt-2"
-                        />
-                      </div>
-
-                      <div>
-                        <UFormField
-                          label="Location"
-                          name="location"
-                          description="City/region"
-                        >
-                          <UInput
-                            v-model="formData.location"
-                            placeholder="Toronto, ON"
-                            class="w-full"
-                          />
-                        </UFormField>
-                        <PrivacyToggle
-                          v-model="formData.locationPrivacy"
-                          class="mt-2"
-                        />
-                      </div>
-                    </div>
-
-                    <div>
-                      <UFormField
-                        label="Bio"
-                        name="bio"
-                        description="Tell the community about yourself"
-                      >
-                        <UTextarea
-                          v-model="formData.bio"
-                          placeholder="Share your background, interests, and experience..."
-                          :rows="4"
-                          autoresize
-                          class="w-full"
-                        />
-                      </UFormField>
-                      <PrivacyToggle
-                        v-model="formData.bioPrivacy"
-                        class="mt-2"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Community Connections -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-8 text-guild-100 warm-text"
-                  >
-                    Community Connections
-                  </h2>
-
-                  <div class="space-y-6">
-                    <div>
-                      <UFormField
-                        label="What I Can Contribute"
-                        name="offering"
-                        description="Skills, resources, or support you can offer the community"
-                      >
-                        <div class="space-y-3">
-                          <!-- Tags input -->
-                          <div>
-                            <label
-                              class="block text-sm font-medium text-guild-200 mb-2"
-                            >
-                              Skills & Topics
-                            </label>
-                            <UInput
-                              v-model="currentOfferingTagInput"
-                              placeholder="Type a skill and press Enter (e.g., Unity, Playtesting)"
-                              @keydown.enter.prevent="addOfferingTag"
-                              @keydown.comma.prevent="addOfferingTag"
-                              class="w-full"
-                            />
-                            <div
-                              v-if="formData.offering.tags?.length"
-                              class="flex flex-wrap gap-2 mt-2"
-                            >
-                              <span
-                                v-for="(tag, index) in formData.offering.tags"
-                                :key="tag"
-                                class="px-3 py-1 bg-guild-800 text-guild-200 rounded-full text-sm border border-guild-600 flex items-center gap-2 group hover:bg-guild-700 transition-colors cursor-pointer"
-                                @click="removeOfferingTag(index)"
-                              >
-                                {{ tag }}
-                                <span class="opacity-50 group-hover:opacity-100"
-                                  >×</span
-                                >
-                              </span>
-                            </div>
-                          </div>
-
-                          <!-- Description textarea -->
-                          <div>
-                            <label
-                              class="block text-sm font-medium text-guild-200 mb-2"
-                            >
-                              Details
-                            </label>
-                            <UTextarea
-                              v-model="formData.offering.text"
-                              placeholder="e.g., I have 10+ years in Unity and love helping new devs. Can also playtest narrative games."
-                              :rows="3"
-                              autoresize
-                              class="w-full"
-                            />
-                          </div>
-                        </div>
-                      </UFormField>
-                      <PrivacyToggle
-                        v-model="formData.offeringPrivacy"
-                        class="mt-2"
-                      />
-                    </div>
-
-                    <div>
-                      <UFormField
-                        label="What I'm Looking For"
-                        name="lookingFor"
-                        description="Support, collaboration, or resources you need"
-                      >
-                        <div class="space-y-3">
-                          <!-- Tags input -->
-                          <div>
-                            <label
-                              class="block text-sm font-medium text-guild-200 mb-2"
-                            >
-                              Skills & Topics
-                            </label>
-                            <UInput
-                              v-model="currentLookingForTagInput"
-                              placeholder="Type what you need and press Enter (e.g., Co-founder, Marketing)"
-                              @keydown.enter.prevent="addLookingForTag"
-                              @keydown.comma.prevent="addLookingForTag"
-                              class="w-full"
-                            />
-                            <div
-                              v-if="formData.lookingFor.tags?.length"
-                              class="flex flex-wrap gap-2 mt-2"
-                            >
-                              <span
-                                v-for="(tag, index) in formData.lookingFor.tags"
-                                :key="tag"
-                                class="px-3 py-1 bg-candlelight-900/20 text-candlelight-500 rounded-full text-sm border border-candlelight-500/30 flex items-center gap-2 group hover:bg-candlelight-900/30 transition-colors cursor-pointer"
-                                @click="removeLookingForTag(index)"
-                              >
-                                {{ tag }}
-                                <span class="opacity-50 group-hover:opacity-100"
-                                  >×</span
-                                >
-                              </span>
-                            </div>
-                          </div>
-
-                          <!-- Description textarea -->
-                          <div>
-                            <label
-                              class="block text-sm font-medium text-guild-200 mb-2"
-                            >
-                              Details
-                            </label>
-                            <UTextarea
-                              v-model="formData.lookingFor.text"
-                              placeholder="e.g., Seeking a business-minded co-founder for a worker co-op studio. Also need help understanding the publishing landscape."
-                              :rows="3"
-                              autoresize
-                              class="w-full"
-                            />
-                          </div>
-                        </div>
-                      </UFormField>
-                      <PrivacyToggle
-                        v-model="formData.lookingForPrivacy"
-                        class="mt-2"
-                      />
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Peer Support -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-8 text-guild-100 warm-text"
-                  >
-                    Peer Support
-                  </h2>
-
-                  <div class="space-y-6">
-                    <!-- Enable Toggle -->
-                    <div class="flex items-start gap-4">
-                      <USwitch v-model="formData.peerSupportEnabled" />
-                      <div>
-                        <p
-                          class="font-medium text-guild-200"
-                        >
-                          Offer Peer Support
-                        </p>
-                        <p
-                          class="text-sm text-guild-400 mt-1"
-                        >
-                          Make yourself available to support other members
-                        </p>
-                      </div>
-                    </div>
-
-                    <!-- Conditional Fields -->
-                    <div
-                      v-if="formData.peerSupportEnabled"
-                      class="space-y-6 pl-4 border-l-2 border-candlelight-500/30"
-                    >
-                      <!-- Skill-Based Topics -->
-                      <UFormField
-                        label="Skill-Based Topics"
-                        name="peerSupportSkillTopics"
-                        description="Skills from your offerings where you can provide guidance"
-                      >
-                        <div class="space-y-3">
-                          <UInput
-                            v-model="currentPeerSkillTopicInput"
-                            placeholder="Type a skill and press Enter"
-                            @keydown.enter.prevent="addPeerSkillTopic"
-                            @keydown.comma.prevent="addPeerSkillTopic"
-                            class="w-full"
-                          />
-                          <div
-                            v-if="formData.peerSupportSkillTopics?.length"
-                            class="flex flex-wrap gap-2"
-                          >
-                            <span
-                              v-for="(
-                                topic, index
-                              ) in formData.peerSupportSkillTopics"
-                              :key="topic"
-                              class="px-3 py-1 bg-guild-800 text-guild-200 rounded-full text-sm border border-guild-600 flex items-center gap-2 group hover:bg-guild-700 transition-colors cursor-pointer"
-                              @click="removePeerSkillTopic(index)"
-                            >
-                              {{ topic }}
-                              <span class="opacity-50 group-hover:opacity-100"
-                                >×</span
-                              >
-                            </span>
-                          </div>
-                          <p class="text-xs text-guild-500 mt-2">
-                            Suggested from your offerings:
-                            <span
-                              v-for="tag in formData.offering.tags?.filter(
-                                (t) =>
-                                  !formData.peerSupportSkillTopics?.includes(t),
-                              )"
-                              :key="tag"
-                              class="inline-block ml-2 text-primary-400 hover:text-primary-300 cursor-pointer underline"
-                              @click="addSuggestedSkillTopic(tag)"
-                            >
-                              {{ tag }}
-                            </span>
-                          </p>
-                        </div>
-                      </UFormField>
-
-                      <!-- Conversational Support Topics -->
-                      <UFormField
-                        label="Conversational Support Topics"
-                        name="peerSupportSupportTopics"
-                      >
-                        <UCheckboxGroup
-                          v-model="formData.peerSupportSupportTopics"
-                          :items="availableSupportTopics"
-                          color="primary"
-                        />
-                      </UFormField>
-
-                      <!-- Availability -->
-                      <UFormField
-                        label="Your Availability"
-                        name="peerSupportAvailability"
-                        description="When are you generally available for peer support sessions?"
-                        required
-                      >
-                        <UTextarea
-                          v-model="formData.peerSupportAvailability"
-                          placeholder="e.g., Weekday evenings (6-9pm EST), weekends flexible, or by appointment"
-                          rows="3"
-                          autoresize
-                          class="w-full"
-                        />
-                      </UFormField>
-
-                      <!-- Personal Message -->
-                      <UFormField
-                        label="Personal Message to Potential Chatters"
-                        name="peerSupportMessage"
-                        description="A friendly message to encourage people to reach out"
-                      >
-                        <UTextarea
-                          v-model="formData.peerSupportMessage"
-                          placeholder="e.g., I love talking about this stuff! No question is too basic."
-                          rows="2"
-                          maxlength="200"
-                          autoresize
-                          class="w-full"
-                        />
-                        <template #hint>
-                          <span
-                            class="text-xs text-guild-500"
-                          >
-                            {{ formData.peerSupportMessage?.length || 0 }}/200
-                            characters
-                          </span>
-                        </template>
-                      </UFormField>
-
-                      <!-- Slack Username -->
-                      <UFormField
-                        label="Slack Username"
-                        name="peerSupportSlackUsername"
-                        description="Your Slack username so members can message you"
-                        required
-                      >
-                        <UInput
-                          v-model="formData.peerSupportSlackUsername"
-                          placeholder="@yourslackname"
-                          class="w-full"
-                        />
-                      </UFormField>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Directory Settings -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-8 text-guild-100 warm-text"
-                  >
-                    Directory Visibility
-                  </h2>
-
-                  <div class="flex items-start gap-4">
-                    <USwitch v-model="formData.showInDirectory" />
-                    <div>
-                      <p class="font-medium text-guild-200">
-                        Show in Member Directory
-                      </p>
-                      <p class="text-sm text-guild-400 mt-1">
-                        Allow other members to discover and connect with you
-                        through the directory
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Success/Error Messages -->
-                <div
-                  v-if="saveSuccess"
-                  class="backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-4"
-                >
-                  <p class="text-candlelight-500">✓ Profile updated successfully!</p>
-                </div>
-
-                <div
-                  v-if="saveError"
-                  class="backdrop-blur-sm bg-ember-900/20 border border-ember-400/30 rounded-lg p-4"
-                >
-                  <p class="text-ember-400">
-                    {{ saveError }}
-                  </p>
-                </div>
-
-                <!-- Actions -->
-                <div
-                  class="flex justify-between items-center pt-4 border-t border-guild-800/50"
-                >
-                  <UButton
-                    type="button"
-                    variant="ghost"
-                    color="gray"
-                    @click="resetForm"
-                  >
-                    Reset Changes
-                  </UButton>
-
-                  <UButton
-                    type="submit"
-                    :loading="saving"
-                    :disabled="!hasChanges"
-                  >
-                    Save Profile
-                  </UButton>
-                </div>
-              </UForm>
-            </template>
-
-            <template #account>
-              <div class="space-y-8 mt-8">
-                <!-- Member Status Banner -->
-                <MemberStatusBanner :dismissible="false" />
-
-                <!-- Current Membership -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-6 text-guild-100 warm-text"
-                  >
-                    Current Membership
-                  </h2>
-
-                  <div
-                    class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6 space-y-4"
-                  >
-                    <!-- Status Badge -->
-                    <div
-                      class="flex items-center justify-between pb-4 border-b border-guild-700"
-                    >
-                      <div>
-                        <p class="text-sm text-guild-400">
-                          Membership Status
-                        </p>
-                        <div class="flex items-center gap-2 mt-1">
-                          <Icon
-                            :name="statusConfig.icon"
-                            :class="['w-5 h-5', statusConfig.textColor]"
-                          />
-                          <p
-                            :class="[
-                              'text-lg font-medium',
-                              statusConfig.textColor,
-                            ]"
-                          >
-                            {{ statusConfig.label }}
-                          </p>
-                        </div>
-                      </div>
-                      <span
-                        :class="[
-                          'px-4 py-2 rounded-full text-xs font-medium',
-                          statusConfig.bgColor,
-                          statusConfig.borderColor,
-                          'border',
-                          statusConfig.textColor,
-                        ]"
-                      >
-                        {{ statusConfig.label }}
-                      </span>
-                    </div>
-
-                    <div class="flex items-start justify-between">
-                      <div>
-                        <p class="text-sm text-guild-400">
-                          Circle
-                        </p>
-                        <p
-                          class="text-lg font-medium text-guild-100 capitalize"
-                        >
-                          {{ memberData.circle }}
-                        </p>
-                      </div>
-                      <div>
-                        <p class="text-sm text-guild-400">
-                          Contribution Level
-                        </p>
-                        <p
-                          class="text-lg font-medium text-guild-100"
-                        >
-                          ${{ contributionTierDetails?.amount }}/month
-                        </p>
-                      </div>
-                    </div>
-
-                    <div v-if="memberData.subscriptionStartDate">
-                      <p class="text-sm text-guild-400">
-                        Member Since
-                      </p>
-                      <p class="text-guild-100">
-                        {{ formatDate(memberData.subscriptionStartDate) }}
-                      </p>
-                    </div>
-
-                    <div
-                      v-if="
-                        memberData.nextBillingDate &&
-                        memberData.contributionTier !== '0'
-                      "
-                    >
-                      <p class="text-sm text-guild-400">
-                        Next Billing Date
-                      </p>
-                      <p class="text-guild-100">
-                        {{ formatDate(memberData.nextBillingDate) }}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Change Contribution Level -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-6 text-guild-100 warm-text"
-                  >
-                    Change Contribution Level
-                  </h2>
-
-                  <div
-                    class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6"
-                  >
-                    <p class="text-guild-300 mb-6">
-                      Choose a new contribution level that works for you.
-                      Changes will take effect on your next billing cycle.
-                    </p>
-
-                    <div class="space-y-3 mb-6">
-                      <button
-                        v-for="tier in contributionOptions"
-                        :key="tier.value"
-                        type="button"
-                        :class="[
-                          'w-full text-left p-4 rounded-lg border-2 transition-all',
-                          selectedContributionTier === tier.value
-                            ? 'border-candlelight-400 bg-candlelight-900/20'
-                            : 'border-guild-600 bg-guild-900/30 hover:border-guild-500',
-                        ]"
-                        @click="selectedContributionTier = tier.value"
-                      >
-                        <div class="flex items-center justify-between">
-                          <div>
-                            <p
-                              class="font-medium text-guild-100"
-                            >
-                              {{ tier.label }}
-                            </p>
-                          </div>
-                          <div
-                            v-if="selectedContributionTier === tier.value"
-                            class="w-6 h-6 bg-candlelight-500 rounded-full flex items-center justify-center text-white text-xs"
-                          >
-                            ✓
-                          </div>
-                        </div>
-                      </button>
-                    </div>
-
-                    <div
-                      v-if="contributionChangeError"
-                      class="mb-4 backdrop-blur-sm bg-ember-900/20 border border-ember-400/30 rounded-lg p-4"
-                    >
-                      <p class="text-ember-400">{{ contributionChangeError }}</p>
-                    </div>
-
-                    <div
-                      v-if="contributionChangeSuccess"
-                      class="mb-4 backdrop-blur-sm bg-candlelight-900/20 border border-candlelight-500/30 rounded-lg p-4"
-                    >
-                      <p class="text-candlelight-500">
-                        ✓ Contribution level updated successfully!
-                      </p>
-                    </div>
-
-                    <UButton
-                      :disabled="
-                        selectedContributionTier ===
-                          memberData.contributionTier || updatingContribution
-                      "
-                      :loading="updatingContribution"
-                      @click="updateContributionLevel"
-                    >
-                      Update Contribution Level
-                    </UButton>
-                  </div>
-                </div>
-
-                <!-- Cancel Membership -->
-                <div>
-                  <h2
-                    class="text-display-sm mb-6 text-guild-100 warm-text"
-                  >
-                    Cancel Membership
-                  </h2>
-
-                  <div
-                    class="backdrop-blur-sm bg-guild-800/50 border border-guild-700 rounded-lg p-6"
-                  >
-                    <p class="text-guild-300 mb-4">
-                      We're sorry to see you go. If you cancel, you'll lose
-                      access to member benefits at the end of your current
-                      billing period.
-                    </p>
-                    <p class="text-sm text-guild-400 mb-6">
-                      Need a break? Consider switching to the free tier instead.
-                    </p>
-
-                    <UButton
-                      color="red"
-                      variant="outline"
-                      @click="showCancelModal = true"
-                    >
-                      Cancel Membership
-                    </UButton>
-                  </div>
+            <div v-if="formData.peerSupportEnabled" class="peer-panel">
+              <div class="field">
+                <label>Skill-Based Topics</label>
+                <TagInput v-model="formData.peerSupportSkillTopics" placeholder="add topic..." />
+                <div v-if="suggestedSkillTopics.length" class="suggested">
+                  Suggested from your offerings:
+                  <a
+                    v-for="tag in suggestedSkillTopics"
+                    :key="tag"
+                    @click="addSuggestedSkillTopic(tag)"
+                  >{{ tag }}</a>
                 </div>
               </div>
-            </template>
-          </UTabs>
 
-          <!-- Cancel Membership Modal -->
-          <UModal
-            v-model:open="showCancelModal"
-            title="Cancel Membership?"
-            description="Are you sure you want to cancel your Ghost Guild membership? You'll lose access to member benefits at the end of your billing period."
-          >
-            <template #footer>
-              <div class="flex justify-end gap-3">
-                <UButton
-                  variant="ghost"
-                  color="neutral"
-                  @click="showCancelModal = false"
-                >
-                  Keep Membership
-                </UButton>
-                <UButton
-                  color="red"
-                  :loading="cancelingMembership"
-                  @click="cancelMembership"
-                >
-                  Cancel Membership
-                </UButton>
+              <div class="field">
+                <label>Conversational Topics</label>
+                <div class="checkbox-grid">
+                  <label
+                    v-for="topic in availableSupportTopics"
+                    :key="topic"
+                    class="checkbox-item"
+                    :class="{ checked: formData.peerSupportSupportTopics.includes(topic) }"
+                    @click.prevent="toggleSupportTopic(topic)"
+                  >
+                    <span class="cb">&#10003;</span>
+                    {{ topic }}
+                  </label>
+                </div>
               </div>
-            </template>
-          </UModal>
+
+              <div class="field">
+                <label>Availability</label>
+                <textarea v-model="formData.peerSupportAvailability" rows="2" placeholder="e.g. Weekday afternoons ET"></textarea>
+              </div>
+
+              <div class="field">
+                <label>Slack Handle</label>
+                <input v-model="formData.peerSupportSlackUsername" type="text" placeholder="@yourslackname" />
+              </div>
+
+              <div class="field">
+                <label>Personal Message</label>
+                <textarea v-model="formData.peerSupportMessage" rows="2" maxlength="200" placeholder="Brief note shown to people requesting time with you"></textarea>
+                <div class="char-count">{{ formData.peerSupportMessage?.length || 0 }} / 200</div>
+              </div>
+            </div>
+
+            <!-- Notifications -->
+            <hr class="section-divider section-divider-right" />
+            <div class="section-label">Notifications</div>
+
+            <div class="toggle-field">
+              <USwitch v-model="formData.notifyEvents" />
+              <div class="toggle-label">
+                Event reminders
+                <span class="toggle-sub">Get notified about upcoming events</span>
+              </div>
+            </div>
+
+            <div class="toggle-field">
+              <USwitch v-model="formData.notifyUpdates" />
+              <div class="toggle-label">
+                Community updates
+                <span class="toggle-sub">New posts from members you follow</span>
+              </div>
+            </div>
+
+            <div class="toggle-field">
+              <USwitch v-model="formData.notifyPeerRequests" />
+              <div class="toggle-label">
+                Peer support requests
+                <span class="toggle-sub">When someone wants to connect</span>
+              </div>
+            </div>
+
+          </div>
+
         </div>
-      </UContainer>
-    </section>
+
+        <!-- ======== SAVE BAR ======== -->
+        <div class="save-bar">
+          <button type="submit" class="btn btn-primary" :disabled="saving || !hasChanges">
+            {{ saving ? 'Saving...' : 'Save Profile' }}
+          </button>
+          <button type="button" class="btn" @click="resetForm">Reset Changes</button>
+          <span v-if="saveSuccess" class="save-msg save-msg-ok">Profile updated.</span>
+          <span v-if="saveError" class="save-msg save-msg-err">{{ saveError }}</span>
+        </div>
+      </form>
+    </div>
   </div>
 </template>
 
 <script setup>
-const { memberData, checkMemberStatus } = useAuth();
-const { openLoginModal } = useLoginModal();
-const { statusConfig } = useMemberStatus();
-const route = useRoute();
-
-// Initialize active tab from URL hash or default to 'profile'
-const getInitialTab = () => {
-  const hash = route.hash.replace("#", "");
-  return hash && ["profile", "updates", "account"].includes(hash)
-    ? hash
-    : "profile";
-};
-
-const activeTab = ref(getInitialTab());
-
-// Watch for hash changes
-watch(
-  () => route.hash,
-  (newHash) => {
-    const hash = newHash.replace("#", "");
-    if (hash && ["profile", "updates", "account"].includes(hash)) {
-      activeTab.value = hash;
-    } else if (!hash) {
-      activeTab.value = "profile";
-    }
-  },
-);
-
-// Tab configuration
-const tabItems = [
-  {
-    label: "Profile",
-    slot: "profile",
-    value: "profile",
-  },
-  {
-    label: "Account",
-    slot: "account",
-    value: "account",
-  },
-];
+const { memberData, checkMemberStatus } = useAuth()
+const { openLoginModal } = useLoginModal()
 
 // Available ghost avatars
 const availableGhosts = [
-  {
-    value: "disbelieving",
-    label: "Disbelieving",
-    image: "/ghosties/Ghost-Disbelieving.png",
-  },
-  {
-    value: "double-take",
-    label: "Double Take",
-    image: "/ghosties/Ghost-Double-Take.png",
-  },
-  {
-    value: "exasperated",
-    label: "Exasperated",
-    image: "/ghosties/Ghost-Exasperated.png",
-  },
-  {
-    value: "mild",
-    label: "Mild",
-    image: "/ghosties/Ghost-Mild.png",
-  },
-  {
-    value: "sweet",
-    label: "Sweet",
-    image: "/ghosties/Ghost-Sweet.png",
-  },
-  {
-    value: "wtf",
-    label: "WTF",
-    image: "/ghosties/Ghost-WTF.png",
-  },
-];
+  { value: 'disbelieving', label: 'Disbelieving', image: '/ghosties/Ghost-Disbelieving.png' },
+  { value: 'double-take', label: 'Double Take', image: '/ghosties/Ghost-Double-Take.png' },
+  { value: 'exasperated', label: 'Exasperated', image: '/ghosties/Ghost-Exasperated.png' },
+  { value: 'mild', label: 'Mild', image: '/ghosties/Ghost-Mild.png' },
+  { value: 'sweet', label: 'Sweet', image: '/ghosties/Ghost-Sweet.png' },
+  { value: 'wtf', label: 'WTF', image: '/ghosties/Ghost-WTF.png' },
+]
 
 // Form state
 const formData = reactive({
-  name: "",
-  pronouns: "",
-  timeZone: "",
-  avatar: "",
-  studio: "",
-  bio: "",
-  location: "",
-  offering: {
-    text: "",
-    tags: [],
-  },
-  lookingFor: {
-    text: "",
-    tags: [],
-  },
+  name: '',
+  pronouns: '',
+  timeZone: '',
+  avatar: '',
+  studio: '',
+  bio: '',
+  location: '',
+  offering: { text: '', tags: [] },
+  lookingFor: { text: '', tags: [] },
   showInDirectory: true,
-  // Peer support fields
+  // Peer support
   peerSupportEnabled: false,
   peerSupportSkillTopics: [],
   peerSupportSupportTopics: [],
-  peerSupportAvailability: "",
-  peerSupportMessage: "",
-  peerSupportSlackUsername: "",
-  // Privacy settings
-  pronounsPrivacy: "members",
-  timeZonePrivacy: "members",
-  avatarPrivacy: "members",
-  studioPrivacy: "members",
-  bioPrivacy: "members",
-  locationPrivacy: "members",
-  offeringPrivacy: "members",
-  lookingForPrivacy: "members",
-});
+  peerSupportAvailability: '',
+  peerSupportMessage: '',
+  peerSupportSlackUsername: '',
+  // Privacy
+  pronounsPrivacy: 'members',
+  timeZonePrivacy: 'members',
+  avatarPrivacy: 'members',
+  studioPrivacy: 'members',
+  bioPrivacy: 'members',
+  locationPrivacy: 'members',
+  offeringPrivacy: 'members',
+  lookingForPrivacy: 'members',
+  // Notifications
+  notifyEvents: true,
+  notifyUpdates: true,
+  notifyPeerRequests: true,
+})
 
-// Tag input refs
-const currentOfferingTagInput = ref("");
-const currentLookingForTagInput = ref("");
-const currentPeerSkillTopicInput = ref("");
+const loading = ref(false)
+const saving = ref(false)
+const saveSuccess = ref(false)
+const saveError = ref(null)
+const initialData = ref(null)
 
-const loading = ref(false);
-const saving = ref(false);
-const saveSuccess = ref(false);
-const saveError = ref(null);
-const initialData = ref(null);
-
-// Available conversational support topics for peer support
+// Available conversational support topics
 const availableSupportTopics = [
-  "Co-founder relationships",
-  "Burnout prevention",
-  "Impostor syndrome",
-  "Work-life boundaries",
-  "Conflict resolution",
-  "General chat & support",
-];
-
-// Account management state
-const contributionOptions = ref([]);
-const selectedContributionTier = ref("");
-const updatingContribution = ref(false);
-const contributionChangeError = ref(null);
-const contributionChangeSuccess = ref(false);
-const showCancelModal = ref(false);
-const cancelingMembership = ref(false);
-
-// Helcim payment integration
-const {
-  initializeHelcimPay,
-  verifyPayment,
-  cleanup: cleanupHelcimPay,
-} = useHelcimPay();
-const customerId = ref("");
-const customerCode = ref("");
+  'Co-founder relationships',
+  'Burnout prevention',
+  'Impostor syndrome',
+  'Work-life boundaries',
+  'Conflict resolution',
+  'General chat & support',
+]
 
 // Computed
-const contributionTierDetails = computed(() => {
-  return contributionOptions.value.find(
-    (tier) => tier.value === memberData.value?.contributionTier,
-  );
-});
-
 const hasChanges = computed(() => {
-  return JSON.stringify(formData) !== JSON.stringify(initialData.value);
-});
+  return JSON.stringify(formData) !== JSON.stringify(initialData.value)
+})
 
-// Offering tag management
-const addOfferingTag = () => {
-  const tag = currentOfferingTagInput.value.trim().replace(/,$/, "");
-  if (!Array.isArray(formData.offering.tags)) {
-    formData.offering.tags = [];
+const suggestedSkillTopics = computed(() => {
+  if (!formData.offering.tags?.length) return []
+  return formData.offering.tags.filter(
+    (t) => !formData.peerSupportSkillTopics?.includes(t)
+  )
+})
+
+// Toggle a support topic in/out of the selection
+const toggleSupportTopic = (topic) => {
+  const idx = formData.peerSupportSupportTopics.indexOf(topic)
+  if (idx >= 0) {
+    formData.peerSupportSupportTopics.splice(idx, 1)
+  } else {
+    formData.peerSupportSupportTopics.push(topic)
   }
-  if (tag && !formData.offering.tags.includes(tag)) {
-    formData.offering.tags.push(tag);
-    currentOfferingTagInput.value = "";
-  }
-};
-
-const removeOfferingTag = (index) => {
-  if (!formData.offering.tags) return;
-  formData.offering.tags.splice(index, 1);
-};
-
-// Looking For tag management
-const addLookingForTag = () => {
-  const tag = currentLookingForTagInput.value.trim().replace(/,$/, "");
-  if (!Array.isArray(formData.lookingFor.tags)) {
-    formData.lookingFor.tags = [];
-  }
-  if (tag && !formData.lookingFor.tags.includes(tag)) {
-    formData.lookingFor.tags.push(tag);
-    currentLookingForTagInput.value = "";
-  }
-};
-
-const removeLookingForTag = (index) => {
-  if (!formData.lookingFor.tags) return;
-  formData.lookingFor.tags.splice(index, 1);
-};
-
-// Peer support skill topic management
-const addPeerSkillTopic = () => {
-  const topic = currentPeerSkillTopicInput.value.trim().replace(/,$/, "");
-  if (topic && !formData.peerSupportSkillTopics.includes(topic)) {
-    formData.peerSupportSkillTopics.push(topic);
-    currentPeerSkillTopicInput.value = "";
-  }
-};
-
-const removePeerSkillTopic = (index) => {
-  formData.peerSupportSkillTopics.splice(index, 1);
-};
+}
 
 const addSuggestedSkillTopic = (tag) => {
   if (!Array.isArray(formData.peerSupportSkillTopics)) {
-    formData.peerSupportSkillTopics = [];
+    formData.peerSupportSkillTopics = []
   }
   if (!formData.peerSupportSkillTopics.includes(tag)) {
-    formData.peerSupportSkillTopics.push(tag);
+    formData.peerSupportSkillTopics.push(tag)
   }
-};
+}
 
-// Load member data
+// Load member data into form
 const loadProfile = () => {
   if (memberData.value) {
-    formData.name = memberData.value.name || "";
-    formData.pronouns = memberData.value.pronouns || "";
-    formData.timeZone = memberData.value.timeZone || "";
-    formData.avatar = memberData.value.avatar || "";
-    formData.studio = memberData.value.studio || "";
-    formData.bio = memberData.value.bio || "";
-    formData.location = memberData.value.location || "";
+    formData.name = memberData.value.name || ''
+    formData.pronouns = memberData.value.pronouns || ''
+    formData.timeZone = memberData.value.timeZone || ''
+    formData.avatar = memberData.value.avatar || ''
+    formData.studio = memberData.value.studio || ''
+    formData.bio = memberData.value.bio || ''
+    formData.location = memberData.value.location || ''
 
     // Load offering (handle both old string and new object format)
-    if (typeof memberData.value.offering === "string") {
-      formData.offering.text = memberData.value.offering;
-      formData.offering.tags = [];
+    if (typeof memberData.value.offering === 'string') {
+      formData.offering.text = memberData.value.offering
+      formData.offering.tags = []
     } else if (memberData.value.offering) {
-      formData.offering.text = memberData.value.offering?.text || "";
+      formData.offering.text = memberData.value.offering?.text || ''
       formData.offering.tags = Array.isArray(memberData.value.offering?.tags)
         ? [...memberData.value.offering.tags]
-        : [];
+        : []
     } else {
-      formData.offering.text = "";
-      formData.offering.tags = [];
+      formData.offering.text = ''
+      formData.offering.tags = []
     }
 
     // Load lookingFor (handle both old string and new object format)
-    if (typeof memberData.value.lookingFor === "string") {
-      formData.lookingFor.text = memberData.value.lookingFor;
-      formData.lookingFor.tags = [];
+    if (typeof memberData.value.lookingFor === 'string') {
+      formData.lookingFor.text = memberData.value.lookingFor
+      formData.lookingFor.tags = []
     } else if (memberData.value.lookingFor) {
-      formData.lookingFor.text = memberData.value.lookingFor?.text || "";
-      formData.lookingFor.tags = Array.isArray(
-        memberData.value.lookingFor?.tags,
-      )
+      formData.lookingFor.text = memberData.value.lookingFor?.text || ''
+      formData.lookingFor.tags = Array.isArray(memberData.value.lookingFor?.tags)
         ? [...memberData.value.lookingFor.tags]
-        : [];
+        : []
     } else {
-      formData.lookingFor.text = "";
-      formData.lookingFor.tags = [];
+      formData.lookingFor.text = ''
+      formData.lookingFor.tags = []
     }
 
-    formData.showInDirectory = memberData.value.showInDirectory ?? true;
+    formData.showInDirectory = memberData.value.showInDirectory ?? true
 
     // Load peer support data
     if (memberData.value.peerSupport) {
-      formData.peerSupportEnabled =
-        memberData.value.peerSupport.enabled || false;
-      formData.peerSupportSkillTopics = Array.isArray(
-        memberData.value.peerSupport.skillTopics,
-      )
+      formData.peerSupportEnabled = memberData.value.peerSupport.enabled || false
+      formData.peerSupportSkillTopics = Array.isArray(memberData.value.peerSupport.skillTopics)
         ? [...memberData.value.peerSupport.skillTopics]
-        : [];
-      formData.peerSupportSupportTopics = Array.isArray(
-        memberData.value.peerSupport.supportTopics,
-      )
+        : []
+      formData.peerSupportSupportTopics = Array.isArray(memberData.value.peerSupport.supportTopics)
         ? [...memberData.value.peerSupport.supportTopics]
-        : [];
-      formData.peerSupportAvailability =
-        memberData.value.peerSupport.availability || "";
-      formData.peerSupportMessage =
-        memberData.value.peerSupport.personalMessage || "";
-      formData.peerSupportSlackUsername =
-        memberData.value.peerSupport.slackUsername || "";
+        : []
+      formData.peerSupportAvailability = memberData.value.peerSupport.availability || ''
+      formData.peerSupportMessage = memberData.value.peerSupport.personalMessage || ''
+      formData.peerSupportSlackUsername = memberData.value.peerSupport.slackUsername || ''
     } else {
-      formData.peerSupportEnabled = false;
-      formData.peerSupportSkillTopics = [];
-      formData.peerSupportSupportTopics = [];
-      formData.peerSupportAvailability = "";
-      formData.peerSupportMessage = "";
-      formData.peerSupportSlackUsername = "";
+      formData.peerSupportEnabled = false
+      formData.peerSupportSkillTopics = []
+      formData.peerSupportSupportTopics = []
+      formData.peerSupportAvailability = ''
+      formData.peerSupportMessage = ''
+      formData.peerSupportSlackUsername = ''
     }
 
     // Load privacy settings (with defaults)
-    const privacy = memberData.value.privacy || {};
-    formData.pronounsPrivacy = privacy.pronouns || "members";
-    formData.timeZonePrivacy = privacy.timeZone || "members";
-    formData.avatarPrivacy = privacy.avatar || "members";
-    formData.studioPrivacy = privacy.studio || "members";
-    formData.bioPrivacy = privacy.bio || "members";
-    formData.locationPrivacy = privacy.location || "members";
-    formData.offeringPrivacy = privacy.offering || "members";
-    formData.lookingForPrivacy = privacy.lookingFor || "members";
+    const privacy = memberData.value.privacy || {}
+    formData.pronounsPrivacy = privacy.pronouns || 'members'
+    formData.timeZonePrivacy = privacy.timeZone || 'members'
+    formData.avatarPrivacy = privacy.avatar || 'members'
+    formData.studioPrivacy = privacy.studio || 'members'
+    formData.bioPrivacy = privacy.bio || 'members'
+    formData.locationPrivacy = privacy.location || 'members'
+    formData.offeringPrivacy = privacy.offering || 'members'
+    formData.lookingForPrivacy = privacy.lookingFor || 'members'
+
+    // Load notification prefs
+    const notifs = memberData.value.notifications || {}
+    formData.notifyEvents = notifs.events ?? true
+    formData.notifyUpdates = notifs.updates ?? true
+    formData.notifyPeerRequests = notifs.peerRequests ?? true
 
     // Store initial state for change detection
-    initialData.value = JSON.parse(JSON.stringify(formData));
+    initialData.value = JSON.parse(JSON.stringify(formData))
   }
-};
+}
 
 // Handle form submission
 const handleSubmit = async () => {
-  saving.value = true;
-  saveSuccess.value = false;
-  saveError.value = null;
+  saving.value = true
+  saveSuccess.value = false
+  saveError.value = null
 
   try {
     // Save profile data
-    await $fetch("/api/members/profile", {
-      method: "PATCH",
+    await $fetch('/api/members/profile', {
+      method: 'PATCH',
       body: formData,
-    });
+    })
 
     // Save peer support data separately
-    await $fetch("/api/members/me/peer-support", {
-      method: "PATCH",
+    await $fetch('/api/members/me/peer-support', {
+      method: 'PATCH',
       body: {
         enabled: formData.peerSupportEnabled,
         skillTopics: formData.peerSupportSkillTopics,
@@ -1136,258 +455,345 @@ const handleSubmit = async () => {
         personalMessage: formData.peerSupportMessage,
         slackUsername: formData.peerSupportSlackUsername,
       },
-    });
+    })
 
-    saveSuccess.value = true;
+    saveSuccess.value = true
 
     // Refresh member data
-    await checkMemberStatus();
-    loadProfile();
+    await checkMemberStatus()
+    loadProfile()
 
-    // Clear success message after 3 seconds
-    setTimeout(() => {
-      saveSuccess.value = false;
-    }, 3000);
+    setTimeout(() => { saveSuccess.value = false }, 3000)
   } catch (error) {
-    console.error("Profile save error:", error);
-    saveError.value =
-      error.data?.message || "Failed to save profile. Please try again.";
+    console.error('Profile save error:', error)
+    saveError.value = error.data?.message || 'Failed to save profile. Please try again.'
   } finally {
-    saving.value = false;
+    saving.value = false
   }
-};
+}
 
 // Reset form to initial state
 const resetForm = () => {
-  loadProfile();
-  saveSuccess.value = false;
-  saveError.value = null;
-};
-
-// Format date helper
-const formatDate = (dateString) => {
-  if (!dateString) return "";
-  const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  });
-};
-
-// Load contribution options
-const loadContributionOptions = async () => {
-  try {
-    const response = await $fetch("/api/contributions/options");
-    contributionOptions.value = response.options;
-  } catch (error) {
-    console.error("Failed to load contribution options:", error);
-  }
-};
-
-// Check if tier requires payment
-const requiresPayment = (tier) => {
-  const tierInfo = contributionOptions.value.find((t) => t.value === tier);
-  return tierInfo?.amount > 0;
-};
-
-// Update contribution level
-const updateContributionLevel = async () => {
-  if (selectedContributionTier.value === memberData.value.contributionTier) {
-    return;
-  }
-
-  updatingContribution.value = true;
-  contributionChangeError.value = null;
-  contributionChangeSuccess.value = false;
-
-  try {
-    const oldTierRequiresPayment = requiresPayment(
-      memberData.value.contributionTier,
-    );
-    const newTierRequiresPayment = requiresPayment(
-      selectedContributionTier.value,
-    );
-
-    // Check if upgrading from free to paid tier
-    if (!oldTierRequiresPayment && newTierRequiresPayment) {
-      // Always show payment popup when upgrading from free to paid
-      // Even if they have a customer ID, they might not have an active subscription
-      await handlePaymentSetup();
-      return;
-    }
-
-    // Call API to update contribution
-    await $fetch("/api/members/update-contribution", {
-      method: "POST",
-      body: {
-        contributionTier: selectedContributionTier.value,
-      },
-    });
-
-    contributionChangeSuccess.value = true;
-
-    // Refresh member data
-    await checkMemberStatus();
-
-    // Clear success message after 3 seconds
-    setTimeout(() => {
-      contributionChangeSuccess.value = false;
-    }, 3000);
-  } catch (error) {
-    console.error("Failed to update contribution level:", error);
-
-    // Check if this requires payment setup
-    const requiresPayment =
-      error.data?.requiresPaymentSetup ||
-      error.cause?.data?.requiresPaymentSetup ||
-      (error.statusMessage || error.message || "").includes(
-        "Payment information required",
-      );
-
-    if (requiresPayment) {
-      // Show payment modal
-      try {
-        await handlePaymentSetup();
-        // If successful, return early without showing error
-        return;
-      } catch (paymentError) {
-        console.error("Payment setup failed:", paymentError);
-        contributionChangeError.value =
-          paymentError.message || "Payment setup failed. Please try again.";
-      }
-    } else {
-      contributionChangeError.value =
-        error.data?.message ||
-        "Failed to update contribution level. Please try again.";
-    }
-  } finally {
-    updatingContribution.value = false;
-  }
-};
-
-// Handle payment setup for upgrading to paid tier
-const handlePaymentSetup = async () => {
-  try {
-    // Get or create Helcim customer
-    if (!memberData.value.helcimCustomerId) {
-      // Use server-side endpoint to avoid CORS issues
-      const customerResponse = await $fetch(
-        "/api/helcim/get-or-create-customer",
-        {
-          method: "POST",
-        },
-      );
-
-      customerId.value = customerResponse.customerId;
-      customerCode.value = customerResponse.customerCode;
-    } else {
-      // Get customer code from existing customer via server-side endpoint
-      const customerResponse = await $fetch("/api/helcim/customer-code");
-      customerId.value = customerResponse.customerId;
-      customerCode.value = customerResponse.customerCode;
-    }
-
-    // Initialize Helcim payment with $0 for card verification
-    await initializeHelcimPay(customerId.value, customerCode.value, 0);
-
-    // Show payment modal
-    const paymentResult = await verifyPayment();
-
-    if (!paymentResult.success) {
-      throw new Error("Payment verification failed");
-    }
-
-    // Verify payment on backend
-    const verifyResult = await $fetch("/api/helcim/verify-payment", {
-      method: "POST",
-      body: {
-        cardToken: paymentResult.cardToken,
-        customerId: customerId.value,
-      },
-    });
-
-    if (!verifyResult.success) {
-      throw new Error("Payment verification failed");
-    }
-
-    // Create subscription
-    const subscriptionResponse = await $fetch("/api/helcim/subscription", {
-      method: "POST",
-      body: {
-        customerId: customerId.value,
-        customerCode: customerCode.value,
-        contributionTier: selectedContributionTier.value,
-        cardToken: paymentResult.cardToken,
-      },
-    });
-
-    if (!subscriptionResponse.success) {
-      throw new Error("Subscription creation failed");
-    }
-
-    contributionChangeSuccess.value = true;
-
-    // Refresh member data
-    await checkMemberStatus();
-
-    // Clear success message after 3 seconds
-    setTimeout(() => {
-      contributionChangeSuccess.value = false;
-    }, 3000);
-  } catch (error) {
-    console.error("Payment setup error:", error);
-    throw error;
-  } finally {
-    cleanupHelcimPay();
-  }
-};
-
-// Cancel membership
-const cancelMembership = async () => {
-  cancelingMembership.value = true;
-
-  try {
-    await $fetch("/api/members/cancel-subscription", {
-      method: "POST",
-    });
-
-    // Redirect to cancellation confirmation or dashboard
-    await navigateTo("/member/dashboard?cancelled=true");
-  } catch (error) {
-    console.error("Failed to cancel membership:", error);
-    alert(
-      error.data?.message || "Failed to cancel membership. Please try again.",
-    );
-  } finally {
-    cancelingMembership.value = false;
-    showCancelModal.value = false;
-  }
-};
+  loadProfile()
+  saveSuccess.value = false
+  saveError.value = null
+}
 
 // Initialize on mount
 onMounted(async () => {
   if (!memberData.value) {
-    loading.value = true;
-    const isAuthenticated = await checkMemberStatus();
-    loading.value = false;
+    loading.value = true
+    const isAuthenticated = await checkMemberStatus()
+    loading.value = false
 
     if (!isAuthenticated) {
-      // Show login modal instead of redirecting
       openLoginModal({
-        title: "Sign in to your profile",
-        description: "Enter your email to manage your profile settings",
-      });
-      return;
+        title: 'Sign in to your profile',
+        description: 'Enter your email to manage your profile settings',
+      })
+      return
     }
   }
 
-  loadProfile();
-  loadContributionOptions();
-  selectedContributionTier.value = memberData.value?.contributionTier || "";
-});
+  loadProfile()
+})
 
 useHead({
-  title: "Your Profile - Ghost Guild",
-});
+  title: 'Edit Profile - Ghost Guild',
+})
 </script>
+
+<style scoped>
+/* ---- LOADING / EMPTY STATE ---- */
+.loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 80px 20px;
+  text-align: center;
+}
+
+/* ---- CONTENT AREA ---- */
+.page-content {
+  padding: 0 28px;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ---- TWO-COLUMN LAYOUT ---- */
+.profile-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  flex: 1;
+}
+
+.profile-col-left {
+  padding-right: 24px;
+  padding-top: 14px;
+  border-right: 1px dashed var(--border);
+}
+
+.profile-col-right {
+  padding-left: 24px;
+  padding-top: 14px;
+}
+
+/* ---- SECTION DIVIDERS (full bleed) ---- */
+.section-divider-left {
+  margin-left: -28px;
+  margin-right: -24px;
+}
+
+.section-divider-right {
+  margin-left: -24px;
+  margin-right: -28px;
+}
+
+/* ---- MULTI-COLUMN ROWS ---- */
+.row-2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+/* ---- LABEL WITH PRIVACY ---- */
+.label-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 3px;
+}
+
+.label-row label {
+  margin-bottom: 0;
+}
+
+/* ---- AVATAR PICKER ---- */
+.avatar-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.avatar-option {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--border);
+  background: var(--bg);
+  cursor: pointer;
+  padding: 3px;
+  transition: all 0.12s;
+}
+
+.avatar-option img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.avatar-option:hover {
+  border-color: var(--candle-dim);
+  background: var(--surface-hover);
+}
+
+.avatar-option.selected {
+  border: 2px solid var(--candle);
+  background: var(--surface);
+}
+
+/* ---- TEXTAREA RESIZE ---- */
+.field textarea {
+  resize: vertical;
+}
+
+/* ---- CHAR COUNT ---- */
+.char-count {
+  font-size: 10px;
+  color: var(--text-faint);
+  text-align: right;
+  margin-top: 2px;
+}
+
+/* ---- TOGGLE FIELD ---- */
+.toggle-field {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.toggle-label {
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.4;
+}
+
+.toggle-sub {
+  display: block;
+  font-size: 11px;
+  color: var(--text-faint);
+  margin-top: 1px;
+}
+
+/* ---- CHECKBOX GRID ---- */
+.checkbox-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3px 12px;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 2px 0;
+  user-select: none;
+}
+
+.checkbox-item .cb {
+  width: 13px;
+  height: 13px;
+  border: 1px dashed var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  color: transparent;
+  flex-shrink: 0;
+}
+
+.checkbox-item.checked .cb {
+  border-color: var(--candle);
+  border-style: solid;
+  color: var(--candle);
+}
+
+.checkbox-item:hover {
+  color: var(--text);
+}
+
+/* ---- PEER SUPPORT PANEL ---- */
+.peer-panel {
+  border: 1px dashed var(--border);
+  padding: 12px 14px;
+  margin-top: 4px;
+  margin-bottom: 12px;
+  background: var(--surface);
+}
+
+.peer-panel .suggested {
+  font-size: 10px;
+  color: var(--text-faint);
+  margin-top: 4px;
+}
+
+.peer-panel .suggested a {
+  color: var(--candle);
+  text-decoration: underline;
+  cursor: pointer;
+  margin-left: 4px;
+}
+
+/* ---- DISABLED BUTTON ---- */
+.btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ---- SAVE BAR ---- */
+.save-bar {
+  margin-left: -28px;
+  margin-right: -28px;
+  padding: 16px 28px 24px;
+  margin-top: 20px;
+  border-top: 1px dashed var(--border);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.save-msg {
+  font-size: 11px;
+  margin-left: auto;
+}
+
+.save-msg-ok {
+  color: var(--green, var(--candle));
+}
+
+.save-msg-err {
+  color: var(--ember);
+}
+
+/* ---- RESPONSIVE ---- */
+@media (max-width: 1024px) {
+  .profile-columns {
+    grid-template-columns: 1fr;
+  }
+
+  .profile-col-left {
+    padding-right: 0;
+    border-right: none;
+    border-bottom: 1px dashed var(--border);
+    padding-bottom: 20px;
+    margin-bottom: 20px;
+    margin-left: -28px;
+    margin-right: -28px;
+    padding-left: 28px;
+    padding-right: 28px;
+  }
+
+  .profile-col-right {
+    padding-left: 0;
+  }
+
+  .section-divider-left,
+  .section-divider-right {
+    margin-left: -28px;
+    margin-right: -28px;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-content {
+    padding: 0 16px;
+  }
+
+  .row-2 {
+    grid-template-columns: 1fr;
+  }
+
+  .checkbox-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .profile-col-left {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+
+  .section-divider-left,
+  .section-divider-right {
+    margin-left: -16px;
+    margin-right: -16px;
+  }
+
+  .save-bar {
+    margin-left: -16px;
+    margin-right: -16px;
+    padding-left: 16px;
+    padding-right: 16px;
+    flex-wrap: wrap;
+  }
+}
+</style>