diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..0abd815
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,329 @@
+## 2. Member Features
+
+### Member Profiles
+
+**Core Fields:**
+
+- Name, pronouns, time zone
+- Avatar/photo - choose from ghosts
+- Studio/organization affiliation
+- Bio (rich text)
+- Skills tags (searchable)
+- Location (city/region)
+- Social links (Mastodon, LinkedIn, etc.)
+- **Offering:** What I can contribute
+- **Looking For:** What I need support with
+
+**Privacy Controls:**
+
+- Public/members-only/private toggle per field
+- Opt-in to member directory
+
+### Member Updates/Mini Blog
+
+- Post updates about projects, learnings, questions
+- Rich text with image support
+- Comments enabled
+- Filter by circle or topic tags
+
+## 3. Events System
+
+### Core Features
+
+- RSVP with capacity limits
+- Waitlist management
+- Add to calendar (.ics download)
+- Pre-event discussion threads
+- Post-event recordings archive
+- Speaker/facilitator profiles
+
+### Member-Proposed Events
+
+**Proposal Flow:**
+
+1. Member submits event idea via form
+2. Include: Topic, format, target circle, time commitment
+3. Admin quick review (spam check only)
+4. Published to "Proposed Events" board
+5. Members can express interest (like feature upvote pages)
+6. If threshold met (e.g., 5 interested), event is scheduled
+7. Proposer gets facilitator support if needed
+
+## 4. Resources Integration
+
+### Consolidating Existing Assets
+
+**Import and organize from:**
+
+- learn.weirdghosts.ca content
+- Existing tools and templates
+- PA curriculum materials (where appropriate)
+- Case studies and examples
+
+**Organization Structure:**
+
+```
+Resources/
+├── Start Here/
+│   ├── Welcome Letter from Jennie & Eileen
+│   ├── How Ghost Guild Works
+│   └── Solidarity Economics Explained
+├── Learning Paths/
+│   ├── Community Track → links to learn.weirdghosts.ca
+│   ├── Founder Track → practical tools
+│   └── Practitioner Track → advanced resources
+├── Templates & Tools/
+│   ├── Governance/
+│   ├── Financial/
+│   ├── Operations/
+│   └── Legal/
+├── Case Studies/
+│   └── Member stories and examples
+└── External Resources/
+    └── Curated links and recommendations
+```
+
+### Resource Features
+
+- Tag by circle relevance (but accessible to all)
+- Download tracking for impact metrics
+- Version control for templates
+- Comment threads on resources
+- "Request a resource" feature
+
+## 5. Peer Support System
+
+### Cal.com Integration for 1:1s
+
+**Setup:**
+
+- Each member can enable peer support availability
+- Set their own hours/frequency
+- Cal.com handles scheduling
+- Types of sessions:
+    - Peer support (30 min)
+    - Co-founder check-in (45 min)
+    - Practitioner office hours (60 min)
+
+**Matching System:**
+
+- Simple questionnaire about current needs
+- Suggest 3 potential peers based on:
+    - Complementary skills/needs
+    - Time zone compatibility
+    - Circle alignment (optional)
+- Book directly via Cal.com links
+
+## 6. Dashboard Design
+
+### Personalized Sections
+
+**Welcome Block:**
+
+- "Welcome back, [Name]"
+- Your circle: [Circle] | Your contribution: $X/month
+- Quick stats: Days as member, events attended, peers met
+
+**Community Pulse:**
+
+- Recent member updates (mini blog posts)
+- Upcoming events this week
+- New resources added
+- New members to welcome
+
+**Your Activity:**
+
+- Your upcoming events
+- Scheduled peer sessions
+- Recent discussions you're in
+- Resources you've bookmarked
+
+**Take Action:**
+
+- Post an update
+- Propose an event
+- Book a peer session
+- Browse resources
+- Update profile
+
+**Impact Metrics:**
+
+- Total solidarity spots funded
+- Events hosted this month
+- Active members this week
+- Resources shared
+
+## 7. Collaborative Tools
+
+### Etherpad Integration
+
+**Use Cases:**
+
+- Meeting notes templates
+- Collaborative resource creation
+- Event planning documents
+- Shared learning notes
+
+**Implementation:**
+
+- Self-hosted Etherpad instance
+- SSO with Ghost Guild accounts
+- Auto-save and version history
+- Export to multiple formats
+- Embed in event pages for notes
+
+### Living Documents
+
+- Community-maintained guides
+- Glossaries and definitions
+- Frequently asked questions
+- Best practices collections
+
+## 8. Technical Infrastructure
+
+### Notification System
+
+**Channels:**
+
+- Email (via Resend)
+- In-app notifications
+- Slack integration via bot
+
+**Configurable Preferences:**
+
+- Event reminders
+- New resources in your area
+- Peer session invitations
+- Member updates digest
+- Community announcements
+
+### Search & Discovery
+
+- Full-text search across:
+    - Resources
+    - Member profiles
+    - Event descriptions
+    - Member updates
+- Filter by circle, tags, date
+- Save searches for alerts
+
+### Analytics & Reporting
+
+- Member engagement metrics
+- Resource usage stats
+- Event attendance patterns
+- Contribution distribution
+- Circle movement tracking
+
+## 9. Content for Launch
+
+### Essential Content Pieces
+
+1. **Welcome Video** - Jennie & Eileen introduce Ghost Guild
+2. **How This Works** - Clear explanation of circles and contributions
+3. **Circle Guides** - What to expect in each circle
+4. **Solidarity Economics** - Practical examples from gaming
+5. **Getting Started Checklist** - First week actions
+
+### Pre-Populated Content
+
+- 10-15 essential resources per circle
+- 3-5 upcoming events scheduled
+- Sample member updates to show activity
+- FAQ based on pre-registration questions
+
+## 10. Launch Strategy
+
+### Soft Launch (Week Before)
+
+- Invite 10-15 friendly testers
+- Each from different backgrounds/circles
+- Gather feedback on:
+    - Onboarding flow
+    - Resource organization
+    - Event system
+    - Profile creation
+
+### Launch Week
+
+**Day 1-2:** PA alumni and close network
+
+- Personal invitations
+- Extra support available
+- Gather testimonials
+
+**Day 3-4:** Gamma Space announcement
+
+- Post in relevant channels
+- Host info session
+
+**Day 5-7:** Public launch
+
+- Email pre-registration list
+- Social media announcement
+- Open registration
+
+### Success Metrics
+
+**Week 1:**
+
+- 30 members across all circles
+- 80% complete profiles
+- 50% attend first event
+
+**Month 1:**
+
+- 75 active members
+- 5 member-proposed events
+- 20 peer sessions booked
+- 90% Slack participation
+
+## 11. Ongoing Operations
+
+### Weekly Tasks
+
+- Review member proposals for events
+- Process Gamma Space channel access
+- Update resource library
+- Send member spotlight
+
+### Monthly Tasks
+
+- Impact report to members
+- Review and adjust contribution distribution
+- Plan next month's events
+- Gather member feedback
+
+### Quarterly Reviews
+
+- Assess circle definitions
+- Evaluate pricing model
+- Review platform features
+- Plan new initiatives
+
+---
+
+## Implementation Priority Order
+
+### Must Have for Launch
+
+1. Payment processing (Helcim)
+2. Basic Slack automation
+3. Member dashboard
+4. Simple resource library
+5. Event listing and RSVP
+
+### Nice to Have for Launch
+
+7. Member profiles
+8. Peer matching system
+9. Cal.com integration
+10. Member updates/blog
+
+### Can Build Post-Launch
+
+11. Etherpad integration
+12. Member-proposed events
+13. Advanced search
+14. Analytics dashboard
+15. Monthly themes
diff --git a/app/app.config.ts b/app/app.config.ts
index 51f28f0..363e07f 100644
--- a/app/app.config.ts
+++ b/app/app.config.ts
@@ -1,8 +1,13 @@
 export default defineAppConfig({
   ui: {
     colors: {
-      primary: "pink",
-      neutral: "zinc",
+      primary: "emerald",
+      neutral: "stone",
+    },
+    formField: {
+      slots: {
+        label: "block font-medium text-stone-200",
+      },
     },
   },
 });
diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index a5e24e1..22cb675 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -2,13 +2,145 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
-@theme {
+@theme static {
   /* Font families */
   --font-sans: "Inter", sans-serif;
   --font-body: "Inter", sans-serif;
   --font-mono: "Ubuntu Mono", monospace;
   --font-display: "NB Television Pro", monospace;
 
+  /* Ethereal color palette - grays, blacks, minimal color */
+  --color-ghost-50: #f0f0f0;
+  --color-ghost-100: #d0d0d0;
+  --color-ghost-200: #b0b0b0;
+  --color-ghost-300: #8a8a8a;
+  --color-ghost-400: #6a6a6a;
+  --color-ghost-500: #4a4a4a;
+  --color-ghost-600: #3a3a3a;
+  --color-ghost-700: #2a2a2a;
+  --color-ghost-800: #1a1a1a;
+  --color-ghost-900: #0a0a0a;
+  
+  /* Subtle accent - barely visible blue-gray */
+  --color-whisper-50: #d4dae6;
+  --color-whisper-100: #a8b3c7;
+  --color-whisper-200: #8491a8;
+  --color-whisper-300: #687291;
+  --color-whisper-400: #4f5d7a;
+  --color-whisper-500: #3a4964;
+  --color-whisper-600: #2f3b52;
+  --color-whisper-700: #252d40;
+  --color-whisper-800: #1a1f2e;
+  --color-whisper-900: #0f1419;
 
+  /* Sparkle accent */
+  --color-sparkle-50: #fafafa;
+  --color-sparkle-100: #f0f0f0;
+  --color-sparkle-200: #e8e8e8;
+  --color-sparkle-300: #d0d0d0;
+  --color-sparkle-400: #c0c0c0;
+  --color-sparkle-500: #a0a0a0;
+  --color-sparkle-600: #808080;
+  --color-sparkle-700: #606060;
+  --color-sparkle-800: #404040;
+  --color-sparkle-900: #202020;
+}
+
+/* Global ethereal background */
+:root {
+  --ethereal-bg: radial-gradient(circle at 20% 80%, rgba(232, 232, 232, 0.03) 0%, transparent 50%),
+                 radial-gradient(circle at 80% 20%, rgba(232, 232, 232, 0.02) 0%, transparent 50%),
+                 radial-gradient(circle at 40% 40%, rgba(232, 232, 232, 0.01) 0%, transparent 50%);
+  
+  --halftone-pattern: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
+  --halftone-size: 8px 8px;
+}
+
+html {
+  background: var(--color-ghost-900);
+  color: var(--color-ghost-200);
+}
+
+body {
+  background: var(--ethereal-bg), var(--color-ghost-900);
+  background-attachment: fixed;
+}
+
+/* Halftone texture overlay */
+.halftone-texture {
+  position: relative;
+}
+
+.halftone-texture::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--halftone-pattern);
+  background-size: var(--halftone-size);
+  opacity: 0.1;
+  pointer-events: none;
+}
+
+/* Sparkle effects */
+@keyframes sparkle {
+  0%, 100% { opacity: 0.3; transform: scale(0.8); }
+  50% { opacity: 1; transform: scale(1.2); }
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.2; }
+  25% { opacity: 0.8; }
+  75% { opacity: 0.4; }
+}
+
+.sparkle-field {
+  position: relative;
+  overflow: hidden;
+}
+
+.sparkle-field::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    radial-gradient(circle at 10% 20%, var(--color-sparkle-200) 1px, transparent 1px),
+    radial-gradient(circle at 90% 80%, var(--color-sparkle-400) 1px, transparent 1px),
+    radial-gradient(circle at 30% 70%, var(--color-sparkle-200) 0.5px, transparent 0.5px),
+    radial-gradient(circle at 70% 30%, var(--color-sparkle-400) 0.5px, transparent 0.5px),
+    radial-gradient(circle at 50% 10%, var(--color-sparkle-200) 1px, transparent 1px),
+    radial-gradient(circle at 20% 90%, var(--color-sparkle-400) 0.5px, transparent 0.5px);
+  background-size: 200px 200px, 300px 300px, 150px 150px, 250px 250px, 180px 180px, 220px 220px;
+  animation: twinkle 4s infinite ease-in-out;
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+/* Ethereal glow effects */
+.ethereal-glow {
+  box-shadow: 
+    0 0 20px rgba(232, 232, 232, 0.1),
+    0 0 40px rgba(232, 232, 232, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.ethereal-text {
+  text-shadow: 0 0 10px rgba(232, 232, 232, 0.3);
+}
+
+/* Dithered gradients */
+.dithered-bg {
+  background: 
+    linear-gradient(45deg, var(--color-ghost-800) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--color-ghost-800) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--color-ghost-700) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--color-ghost-700) 75%);
+  background-size: 4px 4px;
+  background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
 }
 
diff --git a/app/components/AppFooter.vue b/app/components/AppFooter.vue
index 74928a8..7f35a63 100644
--- a/app/components/AppFooter.vue
+++ b/app/components/AppFooter.vue
@@ -1,288 +1,31 @@
 <template>
-  <footer 
-    class="py-16 border-t"
-    :class="[
-      backgroundClass,
-      borderClass
-    ]"
-  >
-    <UContainer>
-      <!-- Main Footer Content -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
-        <!-- Brand Section -->
-        <div class="lg:col-span-1">
-          <div class="flex items-center gap-2 mb-4">
-            <div class="w-8 h-8 rounded-full flex items-center justify-center" :class="logoBackgroundClass">
-              <div class="w-4 h-4 bg-white rounded-sm" />
-            </div>
-            <div class="w-6 h-6" :class="logoBackgroundClass" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
-            <span class="text-2xl font-bold ml-2" :class="brandTextClass">{{ brandName }}</span>
-          </div>
-          <p :class="textColorClass" class="text-sm leading-relaxed">
-            {{ description }}
+  <footer class="mt-32 pb-16 px-8 md:px-12 lg:px-16">
+    <!-- Minimal footer content -->
+    <div class="max-w-4xl">
+      <div
+        class="flex flex-col md:flex-row justify-between items-start md:items-end gap-8"
+      >
+        <!-- Left: Copyright and minimal info -->
+        <div>
+          <p class="text-stone-500 text-xs mb-2">
+            © {{ currentYear }} Ghost Guild
           </p>
         </div>
-        
-        <!-- Navigation Links -->
-        <div class="lg:col-span-1">
-          <h3 class="font-semibold mb-4" :class="headingColorClass">Navigation</h3>
-          <ul class="space-y-2">
-            <li v-for="link in navigationLinks" :key="link.path">
-              <NuxtLink 
-                :to="link.path"
-                :class="linkColorClass"
-                class="text-sm hover:underline transition-colors"
-              >
-                {{ link.label }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-        
-        <!-- Community Links -->
-        <div class="lg:col-span-1">
-          <h3 class="font-semibold mb-4" :class="headingColorClass">Community</h3>
-          <ul class="space-y-2">
-            <li v-for="link in communityLinks" :key="link.path">
-              <NuxtLink 
-                :to="link.path"
-                :class="linkColorClass"
-                class="text-sm hover:underline transition-colors"
-              >
-                {{ link.label }}
-              </NuxtLink>
-            </li>
-          </ul>
-        </div>
-        
-        <!-- Contact/Social -->
-        <div class="lg:col-span-1">
-          <h3 class="font-semibold mb-4" :class="headingColorClass">Connect</h3>
-          <ul class="space-y-2">
-            <li v-for="link in socialLinks" :key="link.href">
-              <a 
-                :href="link.href"
-                :class="linkColorClass"
-                class="text-sm hover:underline transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {{ link.label }}
-              </a>
-            </li>
-          </ul>
+
+        <!-- Right: Contact links -->
+        <div class="flex flex-wrap gap-6 text-xs">
+          <a
+            href="mailto:hello@ghostguild.org"
+            class="text-stone-500 hover:text-stone-300 transition-colors"
+          >
+            Contact
+          </a>
         </div>
       </div>
-      
-      <!-- Decorative Elements (matching wireframe) -->
-      <div class="flex items-center justify-between mb-8">
-        <div class="flex items-center gap-2">
-          <div class="w-8 h-8 rounded-full flex items-center justify-center" :class="logoBackgroundClass">
-            <div class="w-4 h-4 bg-white rounded-sm" />
-          </div>
-          <div class="w-6 h-6" :class="logoBackgroundClass" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
-        </div>
-        
-        <div class="hidden md:flex items-center gap-8">
-          <div class="space-y-2">
-            <div class="h-1 w-16 rounded-full" :class="decorativeBarClass" />
-            <div class="h-1 w-12 rounded-full" :class="decorativeBarSecondaryClass" />
-            <div class="h-1 w-14 rounded-full" :class="decorativeBarTertiaryClass" />
-          </div>
-          <div class="space-y-2">
-            <div class="h-1 w-12 rounded-full" :class="decorativeBarClass" />
-            <div class="h-1 w-16 rounded-full" :class="decorativeBarSecondaryClass" />
-            <div class="h-1 w-10 rounded-full" :class="decorativeBarTertiaryClass" />
-          </div>
-          <div class="space-y-2">
-            <div class="h-1 w-14 rounded-full" :class="decorativeBarClass" />
-            <div class="h-1 w-10 rounded-full" :class="decorativeBarSecondaryClass" />
-            <div class="h-1 w-16 rounded-full" :class="decorativeBarTertiaryClass" />
-          </div>
-        </div>
-      </div>
-      
-      <!-- Copyright -->
-      <div class="pt-8 text-center" :class="borderClass">
-        <p :class="textColorClass" class="text-sm">
-          © {{ currentYear }} {{ brandName }}. {{ copyrightText }}
-        </p>
-      </div>
-    </UContainer>
+    </div>
   </footer>
 </template>
 
 <script setup>
-import { computed } from 'vue'
-
-const props = defineProps({
-  theme: {
-    type: String,
-    default: 'purple',
-    validator: (value) => ['purple', 'blue', 'emerald', 'gray'].includes(value)
-  },
-  brandName: {
-    type: String,
-    default: 'Ghost Guild'
-  },
-  description: {
-    type: String,
-    default: 'A community for game developers exploring cooperative models and building sustainable studios together.'
-  },
-  copyrightText: {
-    type: String,
-    default: 'All rights reserved.'
-  },
-  customNavigationLinks: {
-    type: Array,
-    default: () => []
-  },
-  customCommunityLinks: {
-    type: Array,
-    default: () => []
-  },
-  customSocialLinks: {
-    type: Array,
-    default: () => []
-  }
-})
-
-const currentYear = new Date().getFullYear()
-
-const navigationLinks = computed(() => {
-  if (props.customNavigationLinks.length > 0) {
-    return props.customNavigationLinks
-  }
-  return [
-    { label: 'Home', path: '/' },
-    { label: 'About', path: '/about' },
-    { label: 'Events', path: '/events' },
-    { label: 'Join', path: '/join' },
-    { label: 'Contact', path: '/contact' }
-  ]
-})
-
-const communityLinks = computed(() => {
-  if (props.customCommunityLinks.length > 0) {
-    return props.customCommunityLinks
-  }
-  return [
-    { label: 'Upcoming Events', path: '/events' },
-    { label: 'Past Events', path: '/events/past' },
-    { label: 'Event Calendar', path: '/events/calendar' },
-    { label: 'Members Directory', path: '/members' }
-  ]
-})
-
-const socialLinks = computed(() => {
-  if (props.customSocialLinks.length > 0) {
-    return props.customSocialLinks
-  }
-  return [
-    { label: 'Discord Community', href: 'https://discord.gg/ghostguild' },
-    { label: 'Twitter', href: 'https://twitter.com/ghostguild' },
-    { label: 'GitHub', href: 'https://github.com/ghostguild' },
-    { label: 'Contact Us', href: 'mailto:hello@ghostguild.org' }
-  ]
-})
-
-const backgroundClass = computed(() => {
-  const themes = {
-    purple: 'bg-purple-50 dark:bg-purple-900/20',
-    blue: 'bg-blue-50 dark:bg-blue-900/20',
-    emerald: 'bg-emerald-50 dark:bg-emerald-900/20',
-    gray: 'bg-gray-50 dark:bg-gray-900'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const borderClass = computed(() => {
-  const themes = {
-    purple: 'border-purple-200 dark:border-purple-800',
-    blue: 'border-blue-200 dark:border-blue-800',
-    emerald: 'border-emerald-200 dark:border-emerald-800',
-    gray: 'border-gray-200 dark:border-gray-700'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const logoBackgroundClass = computed(() => {
-  const themes = {
-    purple: 'bg-purple-500',
-    blue: 'bg-blue-500',
-    emerald: 'bg-emerald-500',
-    gray: 'bg-gray-500'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const brandTextClass = computed(() => {
-  const themes = {
-    purple: 'text-purple-600 dark:text-purple-400',
-    blue: 'text-blue-600 dark:text-blue-400',
-    emerald: 'text-emerald-600 dark:text-emerald-400',
-    gray: 'text-gray-900 dark:text-white'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const headingColorClass = computed(() => {
-  const themes = {
-    purple: 'text-purple-900 dark:text-purple-100',
-    blue: 'text-blue-900 dark:text-blue-100',
-    emerald: 'text-emerald-900 dark:text-emerald-100',
-    gray: 'text-gray-900 dark:text-white'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const textColorClass = computed(() => {
-  const themes = {
-    purple: 'text-purple-600 dark:text-purple-400',
-    blue: 'text-blue-600 dark:text-blue-400',
-    emerald: 'text-emerald-600 dark:text-emerald-400',
-    gray: 'text-gray-600 dark:text-gray-400'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const linkColorClass = computed(() => {
-  const themes = {
-    purple: 'text-purple-700 dark:text-purple-300 hover:text-purple-900 dark:hover:text-purple-100',
-    blue: 'text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100',
-    emerald: 'text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-100',
-    gray: 'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const decorativeBarClass = computed(() => {
-  const themes = {
-    purple: 'bg-purple-500',
-    blue: 'bg-blue-500',
-    emerald: 'bg-emerald-500',
-    gray: 'bg-gray-500'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const decorativeBarSecondaryClass = computed(() => {
-  const themes = {
-    purple: 'bg-purple-400',
-    blue: 'bg-blue-400',
-    emerald: 'bg-emerald-400',
-    gray: 'bg-gray-400'
-  }
-  return themes[props.theme] || themes.purple
-})
-
-const decorativeBarTertiaryClass = computed(() => {
-  const themes = {
-    purple: 'bg-purple-300',
-    blue: 'bg-blue-300',
-    emerald: 'bg-emerald-300',
-    gray: 'bg-gray-300'
-  }
-  return themes[props.theme] || themes.purple
-})
-</script>
\ No newline at end of file
+const currentYear = new Date().getFullYear();
+</script>
diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 5bbeb7e..f7b1473 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -1,142 +1,191 @@
 <template>
-  <nav class="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
-    <UContainer>
-      <div class="flex items-center justify-between py-4">
-        <!-- Logo/Brand -->
-        <NuxtLink to="/" class="flex items-center gap-2">
-          <div class="w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center">
-            <div class="w-4 h-4 bg-white rounded-sm" />
-          </div>
-          <div class="w-6 h-6 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
-          <span class="text-xl font-bold text-gray-900 dark:text-white ml-2">Ghost Guild</span>
-        </NuxtLink>
-        
-        <!-- Desktop Navigation -->
-        <div class="hidden md:flex items-center gap-8">
-          <NuxtLink 
-            v-for="item in navigationItems" 
-            :key="item.path"
-            :to="item.path"
-            class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium"
-            active-class="text-emerald-600 dark:text-emerald-400"
-          >
-            {{ item.label }}
-          </NuxtLink>
-          <!-- Auth-based buttons -->
-          <div v-if="isAuthenticated" class="flex items-center gap-3 ml-4">
-            <UButton 
-              to="/member/dashboard"
-              variant="solid"
-              size="sm"
-            >
-              Dashboard
-            </UButton>
-            <UButton 
-              @click="logout"
-              variant="outline"
-              size="sm"
-            >
-              Logout
-            </UButton>
-          </div>
-          <UButton 
-            v-else
-            to="/login"
-            variant="outline"
-            size="sm"
-            class="ml-4"
-          >
-            Login
-          </UButton>
-        </div>
-        
-        <!-- Mobile Menu Button -->
-        <button 
-          class="md:hidden p-2"
-          @click="toggleMobileMenu"
-          aria-label="Toggle menu"
+  <nav
+    class="w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col"
+  >
+    <!-- Logo/Brand at top -->
+    <div class="p-8 border-b border-ghost-800 bg-blue-400">
+      <NuxtLink to="/" class="flex flex-col items-center gap-3 group">
+        <span
+          class="text-xl font-bold text-stone-100 ethereal-text tracking-wider"
+          >Ghost Guild Logo</span
         >
-          <div class="space-y-1">
-            <div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'rotate-45 translate-y-1.5': mobileMenuOpen }" />
-            <div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'opacity-0': mobileMenuOpen }" />
-            <div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ '-rotate-45 -translate-y-1.5': mobileMenuOpen }" />
-          </div>
-        </button>
-      </div>
-      
-      <!-- Mobile Navigation -->
-      <div 
-        v-if="mobileMenuOpen"
-        class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700"
-      >
-        <div class="flex flex-col space-y-3">
-          <NuxtLink 
-            v-for="item in navigationItems" 
-            :key="item.path"
-            :to="item.path"
-            class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium py-2"
-            active-class="text-emerald-600 dark:text-emerald-400"
-            @click="mobileMenuOpen = false"
-          >
-            {{ item.label }}
+      </NuxtLink>
+    </div>
+
+    <!-- Vertical Navigation -->
+    <div class="flex-1 p-8 overflow-y-auto">
+      <ul class="space-y-6">
+        <li v-for="item in navigationItems" :key="item.path">
+          <NuxtLink :to="item.path" class="block group relative">
+            <!-- Hover indicator -->
+
+            <span
+              class="text-stone-200 hover:text-stone-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:ethereal-text"
+              active-class="text-stone-100 ethereal-text translate-x-2"
+            >
+              {{ item.label }}
+            </span>
           </NuxtLink>
-          <!-- Mobile auth buttons -->
-          <div v-if="isAuthenticated" class="flex flex-col gap-3 mt-4">
-            <UButton 
-              to="/member/dashboard"
-              variant="solid"
-              size="sm"
-              class="w-fit"
-              @click="mobileMenuOpen = false"
-            >
-              Dashboard
-            </UButton>
-            <UButton 
-              @click="logout; mobileMenuOpen = false"
-              variant="outline"
-              size="sm"
-              class="w-fit"
-            >
-              Logout
-            </UButton>
-          </div>
-          <UButton 
-            v-else
-            to="/login"
-            variant="outline"
-            size="sm"
-            class="mt-4 w-fit"
-            @click="mobileMenuOpen = false"
+        </li>
+      </ul>
+
+      <!-- Auth section -->
+      <div class="mt-12 pt-8 border-t border-ghost-800/50">
+        <div v-if="isAuthenticated" class="space-y-4">
+          <NuxtLink
+            to="/member/dashboard"
+            class="block text-stone-300 hover:text-stone-100 hover:ethereal-text transition-all duration-300 py-2"
           >
-            Login
-          </UButton>
+            <span class="block text-sm text-whisper-400 mb-1">{{
+              memberData?.name || "Member"
+            }}</span>
+            Dashboard
+          </NuxtLink>
+          <button
+            @click="logout"
+            class="text-stone-500 hover:text-stone-300 transition-all duration-300 text-sm"
+          >
+            Logout
+          </button>
+        </div>
+        <div v-else class="space-y-4">
+          <p class="text-stone-400 text-sm mb-4">
+            Enter your email to receive a login link
+          </p>
+
+          <UForm :state="loginForm" @submit="handleLogin">
+            <UFormField name="email">
+              <UInput
+                v-model="loginForm.email"
+                type="email"
+                size="md"
+                placeholder="your.email@example.com"
+                class="w-full"
+              />
+            </UFormField>
+
+            <UButton
+              type="submit"
+              :loading="isLoggingIn"
+              :disabled="!isLoginFormValid"
+              size="md"
+              class="w-full mt-3"
+            >
+              Send Magic Link
+            </UButton>
+          </UForm>
+
+          <div
+            v-if="loginSuccess"
+            class="p-3 bg-green-900/20 rounded border border-green-800"
+          >
+            <p class="text-green-300 text-sm">✅ Check your email!</p>
+          </div>
+
+          <div
+            v-if="loginError"
+            class="p-3 bg-red-900/20 rounded border border-red-800"
+          >
+            <p class="text-red-300 text-sm">{{ loginError }}</p>
+          </div>
         </div>
       </div>
-    </UContainer>
+    </div>
   </nav>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { reactive, ref, computed } from "vue";
 
-const mobileMenuOpen = ref(false)
-const { isAuthenticated, logout } = useAuth()
+const { isAuthenticated, logout, memberData } = useAuth();
 
-const navigationItems = [
-  { label: 'Home', path: '/' },
-  { label: 'About', path: '/about' },
-  { label: 'Events', path: '/events' },
-  { label: 'Members', path: '/members' },
-  { label: 'Join', path: '/join' },
-  { label: 'Contact', path: '/contact' },
-]
+const publicNavigationItems = [
+  { label: "Home", path: "/", accent: "entry point" },
+  { label: "About", path: "/about", accent: "who we are" },
+  { label: "Events", path: "/events", accent: "gatherings" },
+  { label: "Join", path: "/join", accent: "become one" },
+  { label: "Contact", path: "/contact", accent: "reach out" },
+];
 
-const toggleMobileMenu = () => {
-  mobileMenuOpen.value = !mobileMenuOpen.value
+const memberNavigationItems = [
+  { label: "Dashboard", path: "/member/dashboard" },
+  { label: "Events", path: "/events" },
+  { label: "Members", path: "/members" },
+  { label: "Resources", path: "/resources" },
+  { label: "Updates", path: "/updates" },
+  { label: "Peer Support", path: "/peer-support" },
+  { label: "Profile", path: "/member/profile" },
+];
+
+const navigationItems = computed(() =>
+  isAuthenticated.value ? memberNavigationItems : publicNavigationItems,
+);
+
+// Login form state
+const loginForm = reactive({
+  email: "",
+});
+
+const isLoggingIn = ref(false);
+const loginSuccess = ref(false);
+const loginError = ref("");
+
+const isLoginFormValid = computed(() => {
+  return loginForm.email && loginForm.email.includes("@");
+});
+
+const handleLogin = async () => {
+  if (isLoggingIn.value) return;
+
+  isLoggingIn.value = true;
+  loginError.value = "";
+  loginSuccess.value = false;
+
+  try {
+    const response = await $fetch("/api/auth/login", {
+      method: "POST",
+      body: {
+        email: loginForm.email,
+      },
+    });
+
+    if (response.success) {
+      loginSuccess.value = true;
+      loginError.value = "";
+      loginForm.email = "";
+    }
+  } catch (err) {
+    console.error("Login error:", err);
+
+    if (err.statusCode === 404) {
+      loginError.value = "No account found";
+    } else if (err.statusCode === 500) {
+      loginError.value = "Failed to send email";
+    } else {
+      loginError.value = "Something went wrong";
+    }
+  } finally {
+    isLoggingIn.value = false;
+  }
+};
+</script>
+
+<style scoped>
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  50% {
+    transform: translateY(-5px) rotate(10deg);
+  }
 }
 
-// Close mobile menu when clicking outside
-const closeMobileMenu = () => {
-  mobileMenuOpen.value = false
+.delay-75 {
+  animation-delay: 75ms;
 }
-</script>
\ No newline at end of file
+
+.delay-150 {
+  animation-delay: 150ms;
+}
+</style>
diff --git a/app/components/PageHeader.vue b/app/components/PageHeader.vue
index b756f47..a5646cc 100644
--- a/app/components/PageHeader.vue
+++ b/app/components/PageHeader.vue
@@ -1,65 +1,108 @@
 <template>
-  <header 
-    class="py-16 md:py-24"
-    :class="[
-      backgroundClass,
-      textColorClass
-    ]"
+  <header
+    class="relative py-16 md:py-24 bg-cover bg-center"
+    style="background-image: url(&quot;/background-dither.png&quot;)"
   >
-    <UContainer>
+    <div class="absolute inset-0 bg-black/40"></div>
+    <UContainer class="relative z-10">
       <div class="text-center max-w-4xl mx-auto">
-        <h1 
+        <h1
           class="font-bold mb-6 md:mb-8"
-          :class="[
-            titleSizeClass,
-            titleColorClass
-          ]"
+          :class="[titleSizeClass, titleColorClass]"
         >
           {{ title }}
         </h1>
-        
-        <p 
+
+        <p
           v-if="subtitle"
           class="text-lg md:text-xl leading-relaxed mb-8"
           :class="subtitleColorClass"
         >
           {{ subtitle }}
         </p>
-        
+
         <!-- Interactive Content Area (for hero sections with carousels, etc.) -->
-        <div v-if="showInteractiveArea" class="bg-white dark:bg-gray-800 rounded-2xl p-6 md:p-8 shadow-xl border border-blue-200 dark:border-blue-800 mb-12">
+        <div
+          v-if="showInteractiveArea"
+          :class="[
+            'rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm',
+            props.theme === 'ethereal'
+              ? 'bg-ghost-800/60 border border-ghost-700 ethereal-glow halftone-texture'
+              : 'bg-white dark:bg-gray-800 shadow-xl border border-blue-200 dark:border-blue-800',
+          ]"
+        >
           <div class="flex items-center justify-between">
-            <button 
-              class="p-3 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+            <button
+              :class="[
+                'p-3 rounded-full transition-all duration-300',
+                props.theme === 'ethereal'
+                  ? 'bg-whisper-600/80 text-stone-100 hover:bg-whisper-500 ethereal-glow'
+                  : 'bg-blue-500 text-white hover:bg-blue-600',
+              ]"
               @click="$emit('prev')"
             >
-              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+              <svg
+                class="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M15 19l-7-7 7-7"
+                />
               </svg>
             </button>
-            
+
             <div class="text-center flex-1">
               <slot name="interactive-content">
-                <p class="text-lg text-gray-600 dark:text-gray-300">
-                  {{ interactiveContent || 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' }}
+                <p
+                  :class="[
+                    'text-lg',
+                    props.theme === 'ethereal'
+                      ? 'text-stone-200'
+                      : 'text-gray-600 dark:text-gray-300',
+                  ]"
+                >
+                  {{
+                    interactiveContent ||
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+                  }}
                 </p>
               </slot>
             </div>
-            
-            <button 
-              class="p-3 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition-colors"
+
+            <button
+              :class="[
+                'p-3 rounded-full transition-all duration-300',
+                props.theme === 'ethereal'
+                  ? 'bg-whisper-600/80 text-stone-100 hover:bg-whisper-500 ethereal-glow'
+                  : 'bg-blue-500 text-white hover:bg-blue-600',
+              ]"
               @click="$emit('next')"
             >
-              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              <svg
+                class="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M9 5l7 7-7 7"
+                />
               </svg>
             </button>
           </div>
         </div>
-        
+
         <!-- Call to Action Button -->
         <div v-if="showCta" class="flex justify-center">
-          <UButton 
+          <UButton
             :to="ctaLink"
             :size="ctaSize"
             :color="ctaColor"
@@ -68,7 +111,7 @@
             {{ ctaText }}
           </UButton>
         </div>
-        
+
         <!-- Custom Content Slot -->
         <div v-if="$slots.default">
           <slot />
@@ -79,94 +122,93 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed } from "vue";
 
 const props = defineProps({
   title: {
     type: String,
-    required: true
+    required: true,
   },
   subtitle: {
     type: String,
-    default: ''
+    default: "",
   },
   theme: {
     type: String,
-    default: 'blue',
-    validator: (value) => ['blue', 'purple', 'emerald', 'gray'].includes(value)
+    default: "blue",
+    validator: (value) =>
+      ["blue", "purple", "emerald", "gray", "ethereal"].includes(value),
   },
   size: {
     type: String,
-    default: 'large',
-    validator: (value) => ['small', 'medium', 'large', 'hero'].includes(value)
+    default: "large",
+    validator: (value) => ["small", "medium", "large", "hero"].includes(value),
   },
   showInteractiveArea: {
     type: Boolean,
-    default: false
+    default: false,
   },
   interactiveContent: {
     type: String,
-    default: ''
+    default: "",
   },
   showCta: {
     type: Boolean,
-    default: false
+    default: false,
   },
   ctaText: {
     type: String,
-    default: 'Get Started'
+    default: "Get Started",
   },
   ctaLink: {
     type: String,
-    default: '/join'
+    default: "/join",
   },
   ctaSize: {
     type: String,
-    default: 'lg'
+    default: "lg",
   },
   ctaColor: {
     type: String,
-    default: 'primary'
-  }
-})
+    default: "primary",
+  },
+});
 
-defineEmits(['prev', 'next'])
+defineEmits(["prev", "next"]);
 
 const backgroundClass = computed(() => {
   const themes = {
-    blue: 'bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800',
-    purple: 'bg-gradient-to-br from-purple-50 to-violet-100 dark:from-gray-900 dark:to-purple-900/20',
-    emerald: 'bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-900 dark:to-emerald-900/20',
-    gray: 'bg-gray-50 dark:bg-gray-900'
-  }
-  return themes[props.theme] || themes.blue
-})
+    blue: "bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800",
+    purple:
+      "bg-gradient-to-br from-purple-50 to-violet-100 dark:from-gray-900 dark:to-purple-900/20",
+    emerald:
+      "bg-gradient-to-br from-emerald-50 to-teal-100 dark:from-gray-900 dark:to-emerald-900/20",
+    gray: "bg-gray-50 dark:bg-gray-900",
+    ethereal:
+      "bg-gradient-to-br from-ghost-900 via-ghost-800 to-whisper-900 halftone-texture",
+  };
+  return themes[props.theme] || themes.blue;
+});
 
 const titleSizeClass = computed(() => {
   const sizes = {
-    small: 'text-2xl md:text-3xl',
-    medium: 'text-3xl md:text-4xl',
-    large: 'text-4xl md:text-5xl',
-    hero: 'text-5xl md:text-6xl'
-  }
-  return sizes[props.size] || sizes.large
-})
+    small: "text-2xl md:text-3xl",
+    medium: "text-3xl md:text-4xl",
+    large: "text-4xl md:text-5xl",
+    hero: "text-5xl md:text-6xl",
+  };
+  return sizes[props.size] || sizes.large;
+});
 
 const titleColorClass = computed(() => {
-  const themes = {
-    blue: 'text-blue-600 dark:text-blue-400',
-    purple: 'text-purple-600 dark:text-purple-400',
-    emerald: 'text-emerald-600 dark:text-emerald-400',
-    gray: 'text-gray-900 dark:text-white'
-  }
-  return themes[props.theme] || themes.blue
-})
+  return "text-white";
+});
 
 const subtitleColorClass = computed(() => {
-  return 'text-gray-600 dark:text-gray-300'
-})
+  return "text-white";
+});
 
 const textColorClass = computed(() => {
-  return 'text-gray-900 dark:text-white'
-})
-</script>
\ No newline at end of file
+  return "text-white";
+});
+</script>
diff --git a/app/components/PrivacyToggle.vue b/app/components/PrivacyToggle.vue
new file mode 100644
index 0000000..8b0ca9a
--- /dev/null
+++ b/app/components/PrivacyToggle.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="flex items-center gap-2 text-sm">
+    <span class="text-gray-600 dark:text-gray-400">{{ label }}:</span>
+    <UButtonGroup size="xs">
+      <UButton
+        :variant="modelValue === 'public' ? 'solid' : 'ghost'"
+        :color="modelValue === 'public' ? 'blue' : 'gray'"
+        @click="updateValue('public')"
+      >
+        Public
+      </UButton>
+      <UButton
+        :variant="modelValue === 'members' ? 'solid' : 'ghost'"
+        :color="modelValue === 'members' ? 'blue' : 'gray'"
+        @click="updateValue('members')"
+      >
+        Members
+      </UButton>
+      <UButton
+        :variant="modelValue === 'private' ? 'solid' : 'ghost'"
+        :color="modelValue === 'private' ? 'blue' : 'gray'"
+        @click="updateValue('private')"
+      >
+        Private
+      </UButton>
+    </UButtonGroup>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: {
+    type: String,
+    default: 'members'
+  },
+  label: {
+    type: String,
+    default: 'Privacy'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = (value) => {
+  emit('update:modelValue', value)
+}
+</script>
diff --git a/app/components/UpdateCard.vue b/app/components/UpdateCard.vue
new file mode 100644
index 0000000..af76bc1
--- /dev/null
+++ b/app/components/UpdateCard.vue
@@ -0,0 +1,189 @@
+<template>
+  <UCard variant="outline" class="update-card">
+    <div class="flex gap-4">
+      <!-- Avatar -->
+      <div class="flex-shrink-0">
+        <img
+          v-if="update.author?.avatar"
+          :src="`/ghosties/Ghost-${capitalize(update.author.avatar)}.png`"
+          :alt="update.author.name"
+          class="w-12 h-12 rounded-full"
+          @error="handleImageError"
+        />
+        <div
+          v-else
+          class="w-12 h-12 rounded-full bg-stone-700 flex items-center justify-center text-stone-300 font-bold"
+        >
+          {{ update.author?.name?.charAt(0)?.toUpperCase() || "?" }}
+        </div>
+      </div>
+
+      <!-- Content -->
+      <div class="flex-1 min-w-0">
+        <!-- Header -->
+        <div class="flex items-start justify-between gap-4 mb-2">
+          <div>
+            <h3 class="font-semibold text-stone-100">
+              <NuxtLink
+                v-if="update.author?._id"
+                :to="`/updates/user/${update.author._id}`"
+                class="hover:text-stone-300 transition-colors"
+              >
+                {{ update.author.name }}
+              </NuxtLink>
+              <span v-else>Unknown Member</span>
+            </h3>
+            <div class="flex items-center gap-2 text-sm text-stone-400">
+              <time :datetime="update.createdAt">
+                {{ formatDate(update.createdAt) }}
+              </time>
+              <span v-if="isEdited" class="text-stone-500">(edited)</span>
+              <span
+                v-if="update.privacy === 'private'"
+                class="px-2 py-0.5 bg-stone-700 text-stone-300 rounded text-xs"
+              >
+                Private
+              </span>
+              <span
+                v-if="update.privacy === 'public'"
+                class="px-2 py-0.5 bg-stone-700 text-stone-300 rounded text-xs"
+              >
+                Public
+              </span>
+            </div>
+          </div>
+
+          <!-- Actions (for author only) -->
+          <div v-if="isAuthor" class="flex gap-2">
+            <UButton
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              icon="i-lucide-edit"
+              @click="$emit('edit', update)"
+            />
+            <UButton
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              icon="i-lucide-trash-2"
+              @click="$emit('delete', update)"
+            />
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="text-stone-200 whitespace-pre-wrap break-words mb-3">
+          <template v-if="showPreview && update.content.length > 300">
+            {{ update.content.substring(0, 300) }}...
+            <NuxtLink
+              :to="`/updates/${update._id}`"
+              class="text-stone-400 hover:text-stone-300 ml-1"
+            >
+              Read more
+            </NuxtLink>
+          </template>
+          <template v-else>
+            {{ update.content }}
+          </template>
+        </div>
+
+        <!-- Images (if any) -->
+        <div v-if="update.images?.length" class="mb-3 space-y-2">
+          <img
+            v-for="(image, index) in update.images"
+            :key="index"
+            :src="image.url"
+            :alt="image.alt || 'Update image'"
+            class="rounded-lg max-w-full h-auto"
+          />
+        </div>
+
+        <!-- Footer actions -->
+        <div class="flex items-center gap-4 text-sm text-stone-400">
+          <NuxtLink
+            :to="`/updates/${update._id}`"
+            class="hover:text-stone-300 transition-colors"
+          >
+            View full update
+          </NuxtLink>
+          <span v-if="update.commentsEnabled" class="text-stone-500">
+            Comments (coming soon)
+          </span>
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>
+
+<script setup>
+const props = defineProps({
+  update: {
+    type: Object,
+    required: true,
+  },
+  showPreview: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+defineEmits(["edit", "delete"]);
+
+const { memberData } = useAuth();
+
+const isAuthor = computed(() => {
+  return memberData.value && props.update.author?._id === memberData.value.id;
+});
+
+const isEdited = computed(() => {
+  const created = new Date(props.update.createdAt).getTime();
+  const updated = new Date(props.update.updatedAt).getTime();
+  return updated - created > 1000; // More than 1 second difference
+});
+
+const capitalize = (str) => {
+  if (!str) return "";
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+const handleImageError = (e) => {
+  e.target.src = "/ghosties/Ghost-Mild.png"; // Fallback ghost
+};
+
+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,
+  });
+};
+</script>
+
+<style scoped>
+.update-card {
+  background-color: rgb(41 37 36);
+  border-color: rgb(87 83 78);
+}
+
+.update-card:hover {
+  border-color: rgb(120 113 108);
+}
+
+:deep(.card) {
+  background-color: rgb(41 37 36);
+}
+</style>
diff --git a/app/components/UpdateForm.vue b/app/components/UpdateForm.vue
new file mode 100644
index 0000000..286e77b
--- /dev/null
+++ b/app/components/UpdateForm.vue
@@ -0,0 +1,182 @@
+<template>
+  <div class="space-y-6">
+    <UFormField label="What's on your mind?" name="content" required>
+      <UTextarea
+        v-model="formData.content"
+        placeholder="Share your thoughts, updates, questions, or learnings with the community..."
+        :rows="8"
+        autoresize
+        :maxrows="20"
+      />
+    </UFormField>
+
+    <!-- Privacy Settings -->
+    <div class="border border-stone-700 rounded-lg p-4 bg-stone-800/30">
+      <h3 class="text-sm font-medium text-stone-200 mb-4">Privacy Settings</h3>
+      <div class="space-y-3">
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            v-model="formData.privacy"
+            type="radio"
+            value="public"
+            class="w-4 h-4 text-stone-400"
+          />
+          <div>
+            <div class="text-stone-200 font-medium">Public</div>
+            <div class="text-sm text-stone-400">
+              Visible to everyone, including non-members
+            </div>
+          </div>
+        </label>
+
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            v-model="formData.privacy"
+            type="radio"
+            value="members"
+            class="w-4 h-4 text-stone-400"
+          />
+          <div>
+            <div class="text-stone-200 font-medium">Members Only</div>
+            <div class="text-sm text-stone-400">
+              Only visible to Ghost Guild members
+            </div>
+          </div>
+        </label>
+
+        <label class="flex items-center gap-3 cursor-pointer">
+          <input
+            v-model="formData.privacy"
+            type="radio"
+            value="private"
+            class="w-4 h-4 text-stone-400"
+          />
+          <div>
+            <div class="text-stone-200 font-medium">Private</div>
+            <div class="text-sm text-stone-400">Only visible to you</div>
+          </div>
+        </label>
+      </div>
+    </div>
+
+    <!-- Image Upload (Future) -->
+    <!-- TODO: Add image upload integration with Cloudinary -->
+
+    <!-- Comments Toggle -->
+    <div class="flex items-center gap-3">
+      <USwitch v-model="formData.commentsEnabled" />
+      <div>
+        <div class="text-stone-200 font-medium">Enable Comments</div>
+        <div class="text-sm text-stone-400">
+          Allow members to comment on this update
+        </div>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex justify-between items-center pt-4 border-t border-stone-700">
+      <UButton variant="ghost" color="neutral" @click="$emit('cancel')">
+        Cancel
+      </UButton>
+
+      <UButton
+        :loading="submitting"
+        :disabled="!formData.content.trim()"
+        @click="handleSubmit"
+      >
+        {{ submitLabel }}
+      </UButton>
+    </div>
+
+    <!-- Error Message -->
+    <div
+      v-if="error"
+      class="bg-red-500/10 border border-red-500/30 rounded-lg p-4"
+    >
+      <p class="text-red-300">{{ error }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  initialData: {
+    type: Object,
+    default: () => ({
+      content: "",
+      privacy: "members",
+      commentsEnabled: true,
+      images: [],
+    }),
+  },
+  submitLabel: {
+    type: String,
+    default: "Post Update",
+  },
+  submitting: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["submit", "cancel"]);
+
+const formData = reactive({
+  content: props.initialData.content || "",
+  privacy: props.initialData.privacy || "members",
+  commentsEnabled: props.initialData.commentsEnabled ?? true,
+  images: props.initialData.images || [],
+});
+
+const handleSubmit = () => {
+  if (!formData.content.trim()) return;
+  emit("submit", { ...formData });
+};
+
+// Watch for initialData changes (for edit mode)
+watch(
+  () => props.initialData,
+  (newData) => {
+    if (newData) {
+      formData.content = newData.content || "";
+      formData.privacy = newData.privacy || "members";
+      formData.commentsEnabled = newData.commentsEnabled ?? true;
+      formData.images = newData.images || [];
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped>
+/* Field labels */
+:deep(label) {
+  color: rgb(231 229 228) !important;
+  font-weight: 500;
+}
+
+/* Textarea styling */
+:deep(textarea) {
+  background-color: rgb(41 37 36) !important;
+  color: rgb(231 229 228) !important;
+  border-color: rgb(87 83 78) !important;
+}
+
+:deep(textarea::placeholder) {
+  color: rgb(120 113 108) !important;
+}
+
+:deep(textarea:focus) {
+  border-color: rgb(168 162 158) !important;
+  background-color: rgb(44 40 39) !important;
+}
+
+/* Radio buttons */
+input[type="radio"] {
+  accent-color: rgb(168 162 158);
+}
+</style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index befc6f9..07411f7 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,7 +1,35 @@
 <template>
-  <div>
-    <AppNavigation />
-    <slot />
-    <AppFooter />
+  <div class="min-h-screen bg-stone-800 flex relative">
+    <!-- Background image at top - full page width -->
+    <div
+      class="absolute inset-x-0 pointer-events-none z-0"
+      style="
+        background-image: url(&quot;/background-dither.png&quot;);
+        background-size: 100% auto;
+        background-position: top center;
+        background-repeat: no-repeat;
+        mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 1) 0%,
+          rgba(0, 0, 0, 0) 100%
+        );
+        -webkit-mask-image: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 1) 0%,
+          rgba(0, 0, 0, 0) 100%
+        );
+      "
+    />
+
+    <!-- Main Content Column - Left -->
+    <div class="flex-1 overflow-y-auto relative z-[5]">
+      <div class="p-8 md:p-12 lg:p-16 max-w-4xl relative">
+        <slot />
+      </div>
+      <AppFooter />
+    </div>
+
+    <!-- Navigation Column - Right -->
+    <AppNavigation class="relative z-20" />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/pages/about.vue b/app/pages/about.vue
index 44ddd0e..cbc7469 100644
--- a/app/pages/about.vue
+++ b/app/pages/about.vue
@@ -1,306 +1,278 @@
 <template>
   <div>
     <!-- Page Header -->
-    <PageHeader 
-      title="About"
-      subtitle="Learn about Ghost Guild, our mission to support cooperative game development, and the community we're building together."
+    <PageHeader
+      title="About Our Membership Circles"
+      subtitle="All members of Ghost Guild share the Baby Ghosts mission: Advancing cooperative and worker-centric labour models in the Canadian interactive digital arts sector."
       theme="blue"
       size="large"
     />
 
-    <!-- About Ghost Guild -->
+    <!-- How Ghost Guild Works -->
     <section class="py-20 bg-white dark:bg-gray-900">
       <UContainer>
         <div class="max-w-4xl mx-auto">
-          <div class="text-center mb-12">
-            <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-              About Ghost Guild
-            </h2>
-          </div>
+          <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">
+            How Ghost Guild Works
+          </h2>
 
-          <div class="space-y-8">
-            <!-- Main Description with Progress Bars -->
-            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800">
-              <div class="space-y-6 mb-8">
-                <div class="h-2 bg-blue-500 rounded-full" />
-                <div class="h-2 bg-blue-400 rounded-full w-5/6" />
-                <div class="h-2 bg-blue-300 rounded-full w-2/3" />
-              </div>
-              
-              <div class="prose prose-lg dark:prose-invert max-w-none">
-                <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ghost Guild is a cooperative community dedicated to supporting game developers who want to build sustainable, worker-owned studios. We believe in the power of collaboration and shared ownership to create better working conditions and more innovative games.
-                </p>
-                
-                <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Our community provides resources, mentorship, and financial support to help developers transition from traditional employment to cooperative ownership models. We're building a network of studios that prioritize worker wellbeing and creative freedom.
-                </p>
-                
-                <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Through our various circles and contribution-based membership model, we create an inclusive space where developers at all stages of their cooperative journey can find support and guidance.
-                </p>
-              </div>
-            </div>
+          <div class="prose prose-lg dark:prose-invert max-w-none">
+            <p class="text-xl font-semibold text-gray-900 dark:text-white mb-6">
+              Everyone gets everything. Your circle reflects where you are in
+              your cooperative journey. Your financial contribution reflects
+              what you can afford. These are completely separate choices.
+            </p>
 
-            <!-- Mission Statement -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-              <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
-                <h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">Our Mission</h3>
-                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. To democratize game development by empowering developers to create worker-owned studios that prioritize sustainability, creativity, and fair compensation.
-                </p>
-              </div>
-              
-              <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
-                <h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">Our Vision</h3>
-                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. A thriving ecosystem of cooperative game studios that create innovative experiences while providing their worker-owners with meaningful, sustainable careers.
-                </p>
-              </div>
-            </div>
+            <ul
+              class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 space-y-3 mb-12"
+            >
+              <li>
+                <strong>Equal access:</strong> The entire knowledge commons, all
+                events, and full community participation
+              </li>
+              <li>
+                <strong>Equal voice:</strong> One member, one vote in all
+                decisions
+              </li>
+              <li>
+                <strong>Solidarity economics:</strong> Pay what you can
+                ($0-50+/month), take what you need
+              </li>
+              <li>
+                <strong>Value Flow integration:</strong> Contribute your skills,
+                time, and knowledge - not just money
+              </li>
+            </ul>
           </div>
         </div>
       </UContainer>
     </section>
 
-    <!-- Who It's For -->
+    <!-- Find Your Circle -->
     <section class="py-20 bg-gray-50 dark:bg-gray-800">
       <UContainer>
-        <div class="text-center mb-16">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            Who It's For
+        <div class="max-w-4xl mx-auto">
+          <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+            Find Your Circle
           </h2>
-          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ghost Guild welcomes developers from all backgrounds and experience levels.
+          <p class="text-lg text-gray-700 dark:text-gray-300 mb-12">
+            Circles help us provide relevant guidance and connect you with
+            others at similar stages. Choose based on where you are, not what
+            you want to access.
           </p>
-        </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-5xl mx-auto">
-          <!-- Game Developers -->
-          <div class="flex items-start gap-6">
-            <div class="flex-shrink-0">
-              <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center">
-                <div class="w-8 h-8 bg-blue-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
-              </div>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Game Developers
+          <div class="space-y-12">
+            <!-- Community Circle -->
+            <div class="bg-white dark:bg-gray-900 rounded-xl p-8">
+              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                Community Circle
               </h3>
-              <div class="space-y-2 mb-4">
-                <div class="h-1 bg-blue-500 rounded-full w-full" />
-                <div class="h-1 bg-blue-300 rounded-full w-3/4" />
-                <div class="h-1 bg-blue-200 rounded-full w-1/2" />
-              </div>
-              <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Whether you're a solo indie developer, part of a small team, or working at a larger studio, our community provides resources for exploring cooperative models and building sustainable careers in game development.
+              <p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
+                You're exploring what cooperatives could mean for your work
               </p>
-            </div>
-          </div>
 
-          <!-- Studio Founders -->
-          <div class="flex items-start gap-6">
-            <div class="flex-shrink-0">
-              <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center">
-                <div class="w-8 h-8 bg-emerald-500 rounded" />
+              <div class="mb-6">
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  Where you might be:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>
+                    Curious about alternatives to traditional studio structures
+                  </li>
+                  <li>Researching cooperative principles</li>
+                  <li>Considering if a co-op is right for you</li>
+                  <li>Supporting the movement as an ally</li>
+                </ul>
               </div>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Studio Founders
-              </h3>
-              <div class="space-y-2 mb-4">
-                <div class="h-1 bg-emerald-500 rounded-full w-full" />
-                <div class="h-1 bg-emerald-300 rounded-full w-5/6" />
-                <div class="h-1 bg-emerald-200 rounded-full w-2/3" />
-              </div>
-              <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Entrepreneurs and leaders who want to build studios that prioritize worker ownership, democratic decision-making, and sustainable business practices will find mentorship and practical guidance in our community.
-              </p>
-            </div>
-          </div>
 
-          <!-- Industry Allies -->
-          <div class="flex items-start gap-6">
-            <div class="flex-shrink-0">
-              <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center">
-                <div class="w-8 h-8 bg-purple-500 rounded-full" />
+              <div class="mb-6">
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  We'll help you navigate:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Understanding cooperative basics</li>
+                  <li>Connecting with others asking similar questions</li>
+                  <li>Exploring real examples from game studios</li>
+                  <li>Deciding your next steps</li>
+                </ul>
               </div>
-            </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Industry Allies
-              </h3>
-              <div class="space-y-2 mb-4">
-                <div class="h-1 bg-purple-500 rounded-full w-4/5" />
-                <div class="h-1 bg-purple-300 rounded-full w-full" />
-                <div class="h-1 bg-purple-200 rounded-full w-3/5" />
-              </div>
-              <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Investors, publishers, service providers, and other industry professionals who want to support cooperative game development and learn about alternative business models.
-              </p>
-            </div>
-          </div>
 
-          <!-- Researchers & Advocates -->
-          <div class="flex items-start gap-6">
-            <div class="flex-shrink-0">
-              <div class="w-16 h-16 bg-yellow-100 dark:bg-yellow-900/30 rounded-2xl flex items-center justify-center">
-                <div class="w-8 h-8 bg-yellow-500 rounded-sm" />
+              <div>
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  You might be:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Individual game workers</li>
+                  <li>Researchers and students</li>
+                  <li>Industry allies and supporters</li>
+                  <li>Anyone co-op-curious</li>
+                </ul>
               </div>
             </div>
-            <div class="flex-1">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Researchers & Advocates
+
+            <!-- Founder Circle -->
+            <div class="bg-white dark:bg-gray-900 rounded-xl p-8">
+              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                Founder Circle
               </h3>
-              <div class="space-y-2 mb-4">
-                <div class="h-1 bg-yellow-500 rounded-full w-3/4" />
-                <div class="h-1 bg-yellow-300 rounded-full w-full" />
-                <div class="h-1 bg-yellow-200 rounded-full w-1/2" />
-              </div>
-              <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Academics, journalists, and advocates studying cooperative economics, worker ownership, and alternative organizational structures in the creative industries.
+              <p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
+                You're actively building or transitioning to a cooperative model
               </p>
+
+              <div class="mb-6">
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  Where you might be:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Forming a new cooperative studio</li>
+                  <li>Converting an existing studio to a co-op</li>
+                  <li>Preparing to apply for the Peer Accelerator</li>
+                  <li>Working through governance and structure decisions</li>
+                </ul>
+              </div>
+
+              <div class="mb-6">
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  We'll help you navigate:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Practical implementation challenges</li>
+                  <li>Governance document creation</li>
+                  <li>Financial planning for co-ops</li>
+                  <li>Peer connections with other founders</li>
+                  <li>Balancing ideals with sustainability</li>
+                </ul>
+              </div>
+
+              <div class="mb-6">
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  Two paths available:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>
+                    <strong>Peer Accelerator Prep Track:</strong> Structured
+                    preparation for the PA program
+                  </li>
+                  <li>
+                    <strong>Indie Track:</strong> Self-paced development for
+                    alternative pathways
+                  </li>
+                </ul>
+              </div>
+
+              <div>
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  You might be:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Founding teams</li>
+                  <li>Studios in transition</li>
+                  <li>PA program applicants</li>
+                  <li>Solo founders exploring structures</li>
+                </ul>
+              </div>
+            </div>
+
+            <!-- Practitioner Circle -->
+            <div class="bg-white dark:bg-gray-900 rounded-xl p-8">
+              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+                Practitioner Circle
+              </h3>
+              <p class="text-lg text-gray-600 dark:text-gray-400 mb-6">
+                You're operating a cooperative and contributing to the field
+              </p>
+
+              <div class="mb-6">
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  Where you might be:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Running an established cooperative studio</li>
+                  <li>Graduated from the Peer Accelerator</li>
+                  <li>Mentoring other cooperatives</li>
+                  <li>Advancing cooperative practices in games</li>
+                </ul>
+              </div>
+
+              <div class="mb-6">
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  We'll help you navigate:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Advanced operational challenges</li>
+                  <li>Opportunities to mentor and teach</li>
+                  <li>Contributing to best practices</li>
+                  <li>Cross-pollination with other co-ops</li>
+                  <li>Research and publication opportunities</li>
+                  <li>Co-op to co-op collaboration</li>
+                </ul>
+              </div>
+
+              <div>
+                <h4
+                  class="text-lg font-semibold text-gray-900 dark:text-white mb-3"
+                >
+                  You might be:
+                </h4>
+                <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                  <li>Peer Accelerator alumni</li>
+                  <li>Established co-op members</li>
+                  <li>Industry mentors</li>
+                  <li>Cooperative researchers</li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>
       </UContainer>
     </section>
 
-    <!-- Our Values -->
+    <!-- Important Notes -->
     <section class="py-20 bg-white dark:bg-gray-900">
       <UContainer>
-        <div class="text-center mb-16">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            Our Values
+        <div class="max-w-4xl mx-auto">
+          <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8">
+            Important Notes
           </h2>
-          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. These core principles guide everything we do at Ghost Guild.
-          </p>
-        </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <!-- Cooperation -->
-          <div class="text-center">
-            <div class="mb-6">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Cooperation
-              </h3>
-              <div class="space-y-2">
-                <div class="h-1 bg-blue-500 rounded-full w-full" />
-                <div class="h-1 bg-blue-400 rounded-full w-3/4 mx-auto" />
-                <div class="h-1 bg-blue-300 rounded-full w-1/2 mx-auto" />
-              </div>
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We believe in the power of working together, sharing knowledge, and supporting each other's success rather than competing for scarce resources.
+          <div class="space-y-6 text-lg text-gray-700 dark:text-gray-300">
+            <p>
+              <strong>Movement between circles is fluid.</strong> As you move
+              along in your journey, you can shift circles anytime. Just let us
+              know.
             </p>
-          </div>
 
-          <!-- Sustainability -->
-          <div class="text-center">
-            <div class="mb-6">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Sustainability
-              </h3>
-              <div class="space-y-2">
-                <div class="h-1 bg-emerald-500 rounded-full w-full" />
-                <div class="h-1 bg-emerald-400 rounded-full w-5/6 mx-auto" />
-                <div class="h-1 bg-emerald-300 rounded-full w-2/3 mx-auto" />
-              </div>
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We prioritize long-term thinking, environmental responsibility, and creating work cultures that support developer wellbeing and work-life balance.
+            <p>
+              <strong>Your contribution is separate from your circle.</strong>
+              Whether you contribute $0 or $50+/month, you get full access to
+              everything. Choose based on your financial capacity, not your
+              circle.
             </p>
-          </div>
 
-          <!-- Democracy -->
-          <div class="text-center">
-            <div class="mb-6">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Democracy
-              </h3>
-              <div class="space-y-2">
-                <div class="h-1 bg-purple-500 rounded-full w-full" />
-                <div class="h-1 bg-purple-400 rounded-full w-4/5 mx-auto" />
-                <div class="h-1 bg-purple-300 rounded-full w-3/5 mx-auto" />
-              </div>
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We advocate for democratic decision-making processes where all workers have a voice in shaping their workplace and the direction of their studio.
+            <p>
+              <strong>Not sure which circle?</strong> Start with Community - you
+              can always move. Or email us and we'll chat about what makes sense
+              for you.
             </p>
           </div>
-
-          <!-- Transparency -->
-          <div class="text-center">
-            <div class="mb-6">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Transparency
-              </h3>
-              <div class="space-y-2">
-                <div class="h-1 bg-cyan-500 rounded-full w-full" />
-                <div class="h-1 bg-cyan-400 rounded-full w-3/5 mx-auto" />
-                <div class="h-1 bg-cyan-300 rounded-full w-4/5 mx-auto" />
-              </div>
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We promote open communication, shared financial information, and clear decision-making processes that build trust and accountability.
-            </p>
-          </div>
-
-          <!-- Innovation -->
-          <div class="text-center">
-            <div class="mb-6">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Innovation
-              </h3>
-              <div class="space-y-2">
-                <div class="h-1 bg-orange-500 rounded-full w-full" />
-                <div class="h-1 bg-orange-400 rounded-full w-2/3 mx-auto" />
-                <div class="h-1 bg-orange-300 rounded-full w-5/6 mx-auto" />
-              </div>
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We encourage creative risk-taking, experimentation with new business models, and innovative approaches to both game development and studio management.
-            </p>
-          </div>
-
-          <!-- Solidarity -->
-          <div class="text-center">
-            <div class="mb-6">
-              <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-                Solidarity
-              </h3>
-              <div class="space-y-2">
-                <div class="h-1 bg-red-500 rounded-full w-full" />
-                <div class="h-1 bg-red-400 rounded-full w-4/6 mx-auto" />
-                <div class="h-1 bg-red-300 rounded-full w-3/4 mx-auto" />
-              </div>
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. We stand together in mutual support, recognizing that our individual success is connected to the wellbeing of our entire community.
-            </p>
-          </div>
-        </div>
-
-        <!-- Call to Action -->
-        <div class="mt-16 text-center">
-          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800 max-w-2xl mx-auto">
-            <h3 class="text-xl font-semibold mb-4 text-blue-600 dark:text-blue-400">
-              Join Our Community
-            </h3>
-            <p class="text-gray-600 dark:text-gray-300 mb-6">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ready to be part of the cooperative game development movement?
-            </p>
-            <UButton 
-              to="/join"
-              size="lg" 
-              color="primary"
-              class="px-8"
-            >
-              Get Started
-            </UButton>
-          </div>
         </div>
       </UContainer>
     </section>
@@ -309,4 +281,4 @@
 
 <script setup>
 // No specific logic needed for the about page at this time
-</script>
\ No newline at end of file
+</script>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index 6911855..4cdd7af 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -1,322 +1,204 @@
 <template>
-  <div>
-    <!-- Page Header -->
-    <PageHeader 
-      title="Contact"
-      subtitle="Get in touch with us. We're here to help and answer any questions you might have about Ghost Guild."
-      theme="blue"
-      size="large"
-    />
+  <div class="relative">
+    <!-- Hero Section -->
+    <section class="mb-24">
+      <div class="relative">
+        <h1
+          class="text-6xl md:text-8xl font-bold text-stone-100 ethereal-text leading-tight mb-8"
+        >
+          Get in Touch
+        </h1>
+
+        <div class="mb-16">
+          <p class="text-stone-100 text-lg max-w-md">
+            We'd be happy to answer any questions<br />
+            you might have about Ghost Guild
+          </p>
+        </div>
+      </div>
+    </section>
 
     <!-- Contact Form -->
-    <section class="py-20 bg-white dark:bg-gray-900">
-      <UContainer class="max-w-4xl">
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
-            Contact Form
-          </h2>
-          <p class="text-gray-600 dark:text-gray-300">
-            Send us a message and we'll get back to you as soon as possible
-          </p>
-        </div>
+    <section class="mb-32 relative">
+      <div class="mb-12">
+        <h2 class="text-3xl font-light text-stone-200 mb-4">
+          Send us a message (or email hello@ghostguild.org)
+        </h2>
+      </div>
 
-        <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl border border-blue-200 dark:border-blue-800">
-          <UForm :state="form" class="space-y-6" @submit="handleSubmit">
-            <!-- Name and Email Row -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <UFormField label="Your Name" name="name" required>
-                <UInput
-                  v-model="form.name"
-                  placeholder="Enter your full name"
-                  size="xl"
-                  class="w-full"
-                />
-              </UFormField>
-
-              <UFormField label="Email Address" name="email" required>
-                <UInput
-                  v-model="form.email"
-                  type="email"
-                  size="xl"
-                  class="w-full"
-                  placeholder="your.email@example.com"
-                />
-              </UFormField>
-            </div>
-
-            <!-- Subject -->
-            <UFormField label="Subject" name="subject" required>
-              <USelect
-                v-model="form.subject"
-                :options="subjectOptions"
-                placeholder="Select a subject"
+      <div class="border border-ghost-700">
+        <UForm :state="form" class="space-y-6" @submit="handleSubmit">
+          <!-- Name and Email Row -->
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <UFormField label="Your Name" name="name" required>
+              <UInput
+                v-model="form.name"
+                placeholder="Enter your full name"
                 size="xl"
                 class="w-full"
               />
             </UFormField>
 
-            <!-- Message -->
-            <UFormField label="Message" name="message" required>
-              <UTextarea
-                v-model="form.message"
-                placeholder="Tell us how we can help you..."
-                :rows="6"
+            <UFormField label="Email Address" name="email" required>
+              <UInput
+                v-model="form.email"
+                type="email"
                 size="xl"
                 class="w-full"
+                placeholder="your.email@example.com"
               />
             </UFormField>
-
-            <!-- Additional Options -->
-            <div class="flex items-center gap-4 pt-2">
-              <UCheckbox
-                id="newsletter"
-                v-model="form.newsletter"
-                label="Subscribe to our newsletter"
-              />
-            </div>
-
-            <!-- Submit Button -->
-            <div class="flex justify-center pt-4">
-              <UButton
-                type="submit"
-                :loading="isSubmitting"
-                :disabled="!isFormValid"
-                size="xl"
-                class="px-12"
-              >
-                Send Message
-              </UButton>
-            </div>
-          </UForm>
-
-          <!-- Success/Error Messages -->
-          <div v-if="success" class="mt-6 p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-            <p class="text-green-700 dark:text-green-300 text-center">
-              ✅ Thank you! Your message has been sent successfully. We'll get back to you soon.
-            </p>
           </div>
 
-          <div v-if="error" class="mt-6 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-            <p class="text-red-700 dark:text-red-300 text-center">
-              ❌ {{ error }}
-            </p>
-          </div>
-        </div>
-      </UContainer>
-    </section>
+          <!-- Subject -->
+          <UFormField label="Subject" name="subject" required>
+            <USelect
+              v-model="form.subject"
+              :options="subjectOptions"
+              placeholder="Select a subject"
+              size="xl"
+              class="w-full"
+            />
+          </UFormField>
 
-    <!-- Support Information -->
-    <section class="py-20 bg-gray-50 dark:bg-gray-800">
-      <UContainer>
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
-            Support
-          </h2>
-          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Here are various ways to get help and support.
+          <!-- Message -->
+          <UFormField label="Message" name="message" required>
+            <UTextarea
+              v-model="form.message"
+              placeholder="Tell us how we can help you..."
+              :rows="6"
+              size="xl"
+              class="w-full"
+            />
+          </UFormField>
+
+          <!-- Submit Button -->
+          <div class="pt-4">
+            <UButton
+              type="submit"
+              :loading="isSubmitting"
+              :disabled="!isFormValid"
+              size="xl"
+              class="px-12 border border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
+            >
+              Send Message
+            </UButton>
+          </div>
+        </UForm>
+
+        <!-- Success/Error Messages -->
+        <div
+          v-if="success"
+          class="mt-6 p-4 border border-whisper-600 bg-ghost-900/50"
+        >
+          <p class="text-whisper-300 text-center">
+            Thank you! Your message has been sent successfully. We'll get back
+            to you soon.
           </p>
         </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <!-- Help Center -->
-          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center">
-            <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
-              <div class="w-8 h-8 bg-blue-500 rounded flex items-center justify-center">
-                <span class="text-white text-sm font-bold">?</span>
-              </div>
-            </div>
-            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-              Help Center
-            </h3>
-            <div class="space-y-2 mb-6">
-              <div class="h-1 bg-blue-500 rounded-full w-full" />
-              <div class="h-1 bg-blue-300 rounded-full w-4/5 mx-auto" />
-              <div class="h-1 bg-blue-200 rounded-full w-3/5 mx-auto" />
-              <div class="h-1 bg-blue-100 rounded-full w-2/5 mx-auto" />
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 mb-6">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Browse our comprehensive help articles.
-            </p>
-            <UButton variant="outline" color="blue" size="sm">
-              Visit Help Center
-            </UButton>
-          </div>
-
-          <!-- Community Support -->
-          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center">
-            <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
-              <div class="w-8 h-8 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
-            </div>
-            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-              Community Support
-            </h3>
-            <div class="space-y-2 mb-6">
-              <div class="h-1 bg-emerald-500 rounded-full w-full" />
-              <div class="h-1 bg-emerald-300 rounded-full w-5/6 mx-auto" />
-              <div class="h-1 bg-emerald-200 rounded-full w-4/6 mx-auto" />
-              <div class="h-1 bg-emerald-100 rounded-full w-3/6 mx-auto" />
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 mb-6">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with other members in our community.
-            </p>
-            <UButton variant="outline" color="emerald" size="sm">
-              Join Discord
-            </UButton>
-          </div>
-
-          <!-- Direct Support -->
-          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg text-center md:col-span-2 lg:col-span-1">
-            <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
-              <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center">
-                <span class="text-white text-xs">✉</span>
-              </div>
-            </div>
-            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-              Direct Support
-            </h3>
-            <div class="space-y-2 mb-6">
-              <div class="h-1 bg-purple-500 rounded-full w-full" />
-              <div class="h-1 bg-purple-300 rounded-full w-3/4 mx-auto" />
-              <div class="h-1 bg-purple-200 rounded-full w-5/6 mx-auto" />
-              <div class="h-1 bg-purple-100 rounded-full w-1/2 mx-auto" />
-            </div>
-            <p class="text-gray-600 dark:text-gray-400 mb-6">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Get personalized help from our team.
-            </p>
-            <UButton variant="outline" color="purple" size="sm">
-              Email Us
-            </UButton>
-          </div>
-        </div>
-
-        <!-- Quick Contact Info -->
-        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
-          <div>
-            <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Email</h4>
-            <p class="text-gray-600 dark:text-gray-400">hello@ghostguild.org</p>
-          </div>
-          <div>
-            <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Response Time</h4>
-            <p class="text-gray-600 dark:text-gray-400">Usually within 24 hours</p>
-          </div>
-          <div>
-            <h4 class="font-semibold text-gray-900 dark:text-white mb-2">Best For</h4>
-            <p class="text-gray-600 dark:text-gray-400">General inquiries & support</p>
-          </div>
-        </div>
-      </UContainer>
-    </section>
-
-    <!-- Send Message CTA -->
-    <section class="py-20 bg-blue-50 dark:bg-blue-900/20">
-      <UContainer>
-        <div class="text-center max-w-3xl mx-auto">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            Send Message
-          </h2>
-          
-          <div class="space-y-6 mb-8">
-            <div class="flex justify-center">
-              <div class="h-2 bg-blue-500 rounded-full w-64" />
-            </div>
-            <div class="flex justify-center">
-              <div class="h-2 bg-blue-300 rounded-full w-48" />
-            </div>
-            <div class="flex justify-center">
-              <div class="h-2 bg-blue-500 rounded-full w-32" />
-            </div>
-          </div>
-
-          <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ready to get in touch? We're here to help.
+        <div v-if="error" class="mt-6 p-4 border border-ghost-700 bg-ghost-900">
+          <p class="text-stone-300 text-center">
+            {{ error }}
           </p>
-          
-          <UButton 
-            @click="scrollToForm"
-            size="xl" 
-            color="primary"
-            class="px-12 py-4"
-          >
-            Contact Us Now
-          </UButton>
         </div>
-      </UContainer>
+      </div>
     </section>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, computed } from 'vue'
+import { reactive, ref, computed } from "vue";
 
 // Form state
 const form = reactive({
-  name: '',
-  email: '',
-  subject: '',
-  message: '',
-  newsletter: false
-})
+  name: "",
+  email: "",
+  subject: "",
+  message: "",
+  newsletter: false,
+});
 
 // UI state
-const isSubmitting = ref(false)
-const error = ref('')
-const success = ref(false)
+const isSubmitting = ref(false);
+const error = ref("");
+const success = ref(false);
 
 // Subject options
 const subjectOptions = [
-  { label: 'General Inquiry', value: 'general' },
-  { label: 'Membership Questions', value: 'membership' },
-  { label: 'Technical Support', value: 'technical' },
-  { label: 'Partnership Opportunities', value: 'partnership' },
-  { label: 'Press & Media', value: 'media' },
-  { label: 'Other', value: 'other' }
-]
+  { label: "General Inquiry", value: "general" },
+  { label: "Membership Questions", value: "membership" },
+  { label: "Technical Support", value: "technical" },
+  { label: "Partnership Opportunities", value: "partnership" },
+  { label: "Press & Media", value: "media" },
+  { label: "Other", value: "other" },
+];
+
+// Support options
+const supportOptions = [
+  {
+    title: "Help Center",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Browse our comprehensive help articles.",
+    details: ["Documentation", "FAQs", "Tutorials"],
+  },
+  {
+    title: "Community Support",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with other members in our community.",
+    details: ["Discord", "Forums", "Slack"],
+  },
+  {
+    title: "Direct Support",
+    description:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Get personalized help from our team.",
+    details: ["Email", "Priority response", "One-on-one assistance"],
+  },
+];
 
 // Form validation
 const isFormValid = computed(() => {
-  return form.name && form.email && form.subject && form.message && form.message.length >= 10
-})
+  return (
+    form.name &&
+    form.email &&
+    form.subject &&
+    form.message &&
+    form.message.length >= 10
+  );
+});
 
 // Form submission
 const handleSubmit = async () => {
-  if (isSubmitting.value) return
+  if (isSubmitting.value) return;
 
-  isSubmitting.value = true
-  error.value = ''
-  success.value = false
+  isSubmitting.value = true;
+  error.value = "";
+  success.value = false;
 
   try {
     // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1500))
-    
+    await new Promise((resolve) => setTimeout(resolve, 1500));
+
     // For now, just show success message
-    success.value = true
-    
+    success.value = true;
+
     // Reset form after success
     setTimeout(() => {
       Object.assign(form, {
-        name: '',
-        email: '',
-        subject: '',
-        message: '',
-        newsletter: false
-      })
-      success.value = false
-    }, 5000)
-    
+        name: "",
+        email: "",
+        subject: "",
+        message: "",
+        newsletter: false,
+      });
+      success.value = false;
+    }, 5000);
   } catch (err) {
-    console.error('Contact form error:', err)
-    error.value = 'Sorry, there was an error sending your message. Please try again or contact us directly at hello@ghostguild.org.'
+    console.error("Contact form error:", err);
+    error.value =
+      "Sorry, there was an error sending your message. Please try again or contact us directly at hello@ghostguild.org.";
   } finally {
-    isSubmitting.value = false
+    isSubmitting.value = false;
   }
-}
-
-// Scroll to form function
-const scrollToForm = () => {
-  const formSection = document.querySelector('form')
-  if (formSection) {
-    formSection.scrollIntoView({ behavior: 'smooth', block: 'center' })
-  }
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/app/pages/events/[id].vue b/app/pages/events/[id].vue
index 06cc52f..3b3eea1 100644
--- a/app/pages/events/[id].vue
+++ b/app/pages/events/[id].vue
@@ -1,83 +1,105 @@
 <template>
-  <div v-if="pending" class="min-h-screen flex items-center justify-center">
+  <div
+    v-if="pending"
+    class="min-h-screen bg-stone-900 flex items-center justify-center"
+  >
     <div class="text-center">
-      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
-      <p class="text-gray-600 dark:text-gray-400">Loading event details...</p>
+      <div
+        class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"
+      ></div>
+      <p class="text-stone-200">Loading event details...</p>
     </div>
   </div>
-  
-  <div v-else-if="error" class="min-h-screen flex items-center justify-center">
+
+  <div
+    v-else-if="error"
+    class="min-h-screen bg-stone-900 flex items-center justify-center"
+  >
     <div class="text-center">
-      <Icon name="heroicons:exclamation-triangle" class="w-16 h-16 text-red-500 mx-auto mb-4" />
-      <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Event Not Found</h2>
-      <p class="text-gray-600 dark:text-gray-400 mb-6">The event you're looking for doesn't exist.</p>
-      <NuxtLink to="/events" class="text-blue-600 dark:text-blue-400 hover:underline">
+      <Icon
+        name="heroicons:exclamation-triangle"
+        class="w-16 h-16 text-red-500 mx-auto mb-4"
+      />
+      <h2 class="text-2xl font-bold text-stone-100 mb-2">Event Not Found</h2>
+      <p class="text-stone-300 mb-6">
+        The event you're looking for doesn't exist.
+      </p>
+      <NuxtLink to="/events" class="text-blue-400 hover:underline">
         ← Back to Events
       </NuxtLink>
     </div>
   </div>
-  
+
   <div v-else>
     <!-- Feature Image Header -->
-    <div v-if="event.featureImage && (event.featureImage.publicId || event.featureImage.url)" class="relative h-96 overflow-hidden">
-      <img 
+    <div
+      v-if="
+        event.featureImage &&
+        (event.featureImage.publicId || event.featureImage.url)
+      "
+      class="relative h-96 overflow-hidden"
+    >
+      <img
         :src="getImageUrl(event.featureImage)"
         :alt="event.featureImage.alt || event.title"
         class="w-full h-full object-cover"
         @error="handleImageError"
       />
-      <div class="absolute inset-0" style="background-color: rgba(0, 0, 0, 0.4);"></div>
+      <div
+        class="absolute inset-0"
+        style="background-color: rgba(0, 0, 0, 0.4)"
+      ></div>
       <div class="absolute inset-0 flex items-center">
         <UContainer>
           <div class="max-w-4xl">
             <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
               {{ event.title }}
             </h1>
-            <p v-if="event.tagline" class="text-xl text-gray-200">
-              {{ event.tagline }}
-            </p>
           </div>
         </UContainer>
       </div>
     </div>
 
     <!-- Page Header (fallback when no image) -->
-    <PageHeader 
-      v-else
-      :title="event.title"
-      :subtitle="event.tagline"
-      theme="blue"
-      size="medium"
-    />
+    <PageHeader v-else :title="event.title" theme="blue" size="medium" />
 
     <!-- Event Details Section -->
-    <section class="py-16 bg-white dark:bg-gray-900">
+    <section class="py-16 bg-stone-900">
       <UContainer>
         <div class="max-w-4xl mx-auto">
           <!-- Event Meta Info -->
-          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-xl p-6 mb-8 border border-blue-200 dark:border-blue-800">
+          <div class="bg-stone-800 rounded-xl p-6 mb-8 border border-stone-700">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
               <div class="flex items-center space-x-3">
-                <Icon name="heroicons:calendar-days" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
+                <Icon
+                  name="heroicons:calendar-days"
+                  class="w-6 h-6 text-blue-400"
+                />
                 <div>
-                  <p class="text-sm text-gray-600 dark:text-gray-400">Date</p>
-                  <p class="font-semibold text-gray-900 dark:text-white">{{ formatDate(event.startDate) }}</p>
+                  <p class="text-sm text-stone-400">Date</p>
+                  <p class="font-semibold text-stone-100">
+                    {{ formatDate(event.startDate) }}
+                  </p>
                 </div>
               </div>
-              
+
               <div class="flex items-center space-x-3">
-                <Icon name="heroicons:clock" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
+                <Icon name="heroicons:clock" class="w-6 h-6 text-blue-400" />
                 <div>
-                  <p class="text-sm text-gray-600 dark:text-gray-400">Time</p>
-                  <p class="font-semibold text-gray-900 dark:text-white">{{ formatTime(event.startDate, event.endDate) }}</p>
+                  <p class="text-sm text-stone-400">Time</p>
+                  <p class="font-semibold text-stone-100">
+                    {{ formatTime(event.startDate, event.endDate) }}
+                  </p>
                 </div>
               </div>
-              
+
               <div class="flex items-center space-x-3">
-                <Icon name="heroicons:map-pin" class="w-6 h-6 text-blue-600 dark:text-blue-400" />
+                <Icon name="heroicons:map-pin" class="w-6 h-6 text-blue-400" />
                 <div>
-                  <p class="text-sm text-gray-600 dark:text-gray-400">Location</p>
-                  <p class="font-semibold text-gray-900 dark:text-white">{{ event.location }}</p>
+                  <p class="text-sm text-stone-400">Location</p>
+                  <p class="font-semibold text-stone-100">
+                    {{ event.location }}
+                  </p>
                 </div>
               </div>
             </div>
@@ -85,16 +107,22 @@
 
           <!-- Event Cancelled Notice -->
           <div v-if="event.isCancelled" class="mb-8">
-            <div class="p-6 bg-red-50 dark:bg-red-900/20 rounded-xl border border-red-200 dark:border-red-800">
+            <div class="p-6 bg-red-900/20 rounded-xl border border-red-800">
               <div class="flex items-start">
-                <Icon name="heroicons:exclamation-triangle" class="w-6 h-6 text-red-600 dark:text-red-400 mr-3 mt-0.5" />
+                <Icon
+                  name="heroicons:exclamation-triangle"
+                  class="w-6 h-6 text-red-400 mr-3 mt-0.5"
+                />
                 <div>
-                  <h3 class="text-lg font-semibold text-red-700 dark:text-red-300 mb-2">Event Cancelled</h3>
-                  <p class="text-red-600 dark:text-red-400" v-if="event.cancellationMessage">
+                  <h3 class="text-lg font-semibold text-red-300 mb-2">
+                    Event Cancelled
+                  </h3>
+                  <p class="text-red-400" v-if="event.cancellationMessage">
                     {{ event.cancellationMessage }}
                   </p>
-                  <p class="text-red-600 dark:text-red-400" v-else>
-                    This event has been cancelled. We apologize for any inconvenience.
+                  <p class="text-red-400" v-else>
+                    This event has been cancelled. We apologize for any
+                    inconvenience.
                   </p>
                 </div>
               </div>
@@ -103,24 +131,36 @@
 
           <!-- Member-Only Badge -->
           <div v-if="event.membersOnly" class="mb-8">
-            <div class="inline-flex items-center px-4 py-2 bg-purple-100 dark:bg-purple-900/30 rounded-full">
-              <Icon name="heroicons:lock-closed" class="w-5 h-5 text-purple-600 dark:text-purple-400 mr-2" />
-              <span class="text-sm font-medium text-purple-700 dark:text-purple-300">
+            <div
+              class="inline-flex items-center px-4 py-2 bg-purple-100 dark:bg-purple-900/30 rounded-full"
+            >
+              <Icon
+                name="heroicons:lock-closed"
+                class="w-5 h-5 text-purple-600 dark:text-purple-400 mr-2"
+              />
+              <span
+                class="text-sm font-medium text-purple-700 dark:text-purple-300"
+              >
                 Members Only Event - Open to all circles and contribution levels
               </span>
             </div>
           </div>
 
           <!-- Target Circles -->
-          <div v-if="event.targetCircles && event.targetCircles.length > 0" class="mb-8">
+          <div
+            v-if="event.targetCircles && event.targetCircles.length > 0"
+            class="mb-8"
+          >
             <div class="flex items-center space-x-2">
-              <Icon name="heroicons:user-group" class="w-5 h-5 text-blue-600 dark:text-blue-400" />
-              <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Recommended for:</span>
+              <Icon name="heroicons:user-group" class="w-5 h-5 text-blue-400" />
+              <span class="text-sm font-medium text-stone-200"
+                >Recommended for:</span
+              >
               <div class="flex flex-wrap gap-2">
-                <span 
-                  v-for="circle in event.targetCircles" 
-                  :key="circle" 
-                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400"
+                <span
+                  v-for="circle in event.targetCircles"
+                  :key="circle"
+                  class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-900/30 text-blue-400"
                 >
                   {{ formatCircleName(circle) }}
                 </span>
@@ -130,32 +170,64 @@
 
           <!-- Event Description -->
           <div class="prose prose-lg dark:prose-invert max-w-none mb-12">
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">About This Event</h2>
-            <p class="text-gray-700 dark:text-gray-300">{{ event.description }}</p>
-            
+            <h2 class="text-2xl font-bold text-stone-100 mb-4">
+              About This Event
+            </h2>
+            <p class="text-stone-200">
+              {{ event.description }}
+            </p>
+
             <div v-if="event.agenda && event.agenda.length > 0" class="mt-8">
-              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Event Agenda</h3>
+              <h3 class="text-xl font-semibold text-stone-100 mb-4">
+                Event Agenda
+              </h3>
               <ul class="space-y-3">
-                <li v-for="(item, index) in event.agenda" :key="index" class="flex items-start">
-                  <span class="inline-block w-6 h-6 bg-blue-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5">
+                <li
+                  v-for="(item, index) in event.agenda"
+                  :key="index"
+                  class="flex items-start"
+                >
+                  <span
+                    class="inline-block w-6 h-6 bg-blue-500 text-white text-sm rounded-full flex items-center justify-center mr-3 mt-0.5"
+                  >
                     {{ index + 1 }}
                   </span>
-                  <span class="text-gray-700 dark:text-gray-300">{{ item }}</span>
+                  <span class="text-stone-200">{{ item }}</span>
                 </li>
               </ul>
             </div>
 
-            <div v-if="event.speakers && event.speakers.length > 0" class="mt-8">
-              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Speakers</h3>
+            <div
+              v-if="event.speakers && event.speakers.length > 0"
+              class="mt-8"
+            >
+              <h3 class="text-xl font-semibold text-stone-100 mb-4">
+                Speakers
+              </h3>
               <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div v-for="speaker in event.speakers" :key="speaker.name" class="flex items-start space-x-4">
-                  <div class="w-16 h-16 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
-                    <Icon name="heroicons:user" class="w-8 h-8 text-gray-400 dark:text-gray-500" />
+                <div
+                  v-for="speaker in event.speakers"
+                  :key="speaker.name"
+                  class="flex items-start space-x-4"
+                >
+                  <div
+                    class="w-16 h-16 bg-stone-700 rounded-full flex items-center justify-center"
+                  >
+                    <Icon
+                      name="heroicons:user"
+                      class="w-8 h-8 text-stone-500"
+                    />
                   </div>
                   <div>
-                    <p class="font-semibold text-gray-900 dark:text-white">{{ speaker.name }}</p>
-                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ speaker.role }}</p>
-                    <p class="text-sm text-gray-500 dark:text-gray-500 mt-1">{{ speaker.bio }}</p>
+                    <p class="font-semibold text-stone-100">
+                      {{ speaker.name }}
+                    </p>
+                    <p class="text-sm text-stone-300">
+                      {{ speaker.role }}
+                    </p>
+                    <p class="text-sm text-stone-400 mt-1">
+                      {{ speaker.bio }}
+                    </p>
                   </div>
                 </div>
               </div>
@@ -163,30 +235,75 @@
           </div>
 
           <!-- Registration Section -->
-          <div v-if="!event.isCancelled" class="bg-gray-50 dark:bg-gray-800 rounded-xl p-8 border border-gray-200 dark:border-gray-700">
-            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-6">Register for This Event</h3>
-            
+          <div
+            v-if="!event.isCancelled"
+            class="bg-stone-800 rounded-xl p-8 border border-stone-700"
+          >
+            <h3 class="text-xl font-bold text-stone-100 mb-6">
+              Register for This Event
+            </h3>
+
             <!-- Registration Status -->
             <div v-if="registrationStatus === 'registered'" class="mb-6">
-              <div class="flex items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
-                <Icon name="heroicons:check-circle" class="w-6 h-6 text-green-600 dark:text-green-400 mr-3" />
-                <div>
-                  <p class="font-semibold text-green-700 dark:text-green-300">You're registered!</p>
-                  <p class="text-sm text-green-600 dark:text-green-400">We've sent a confirmation to your email</p>
+              <div
+                class="p-4 bg-green-900/20 rounded-lg border border-green-800"
+              >
+                <div class="flex items-start justify-between">
+                  <div class="flex items-center">
+                    <Icon
+                      name="heroicons:check-circle"
+                      class="w-6 h-6 text-green-400 mr-3"
+                    />
+                    <div>
+                      <p class="font-semibold text-green-300">
+                        You're registered!
+                      </p>
+                      <p class="text-sm text-green-400">
+                        We've sent a confirmation to your email
+                      </p>
+                    </div>
+                  </div>
+                  <UButton
+                    color="red"
+                    variant="ghost"
+                    size="sm"
+                    @click="handleCancelRegistration"
+                    :loading="isCancelling"
+                  >
+                    Cancel Registration
+                  </UButton>
                 </div>
               </div>
             </div>
 
             <!-- Member Gate Warning -->
-            <div v-if="event.membersOnly && !isMember && registrationStatus !== 'registered'" class="mb-6">
-              <div class="flex items-start p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-800">
-                <Icon name="heroicons:exclamation-triangle" class="w-6 h-6 text-amber-600 dark:text-amber-400 mr-3 mt-0.5" />
+            <div
+              v-if="
+                event.membersOnly &&
+                !isMember &&
+                registrationStatus !== 'registered'
+              "
+              class="mb-6"
+            >
+              <div
+                class="flex items-start p-4 bg-amber-900/20 rounded-lg border border-amber-800"
+              >
+                <Icon
+                  name="heroicons:exclamation-triangle"
+                  class="w-6 h-6 text-amber-400 mr-3 mt-0.5"
+                />
                 <div>
-                  <p class="font-semibold text-amber-700 dark:text-amber-300">Membership Required</p>
-                  <p class="text-sm text-amber-600 dark:text-amber-400 mt-1">
-                    This event is exclusive to Ghost Guild members. Join any circle to gain access.
+                  <p class="font-semibold text-amber-300">
+                    Membership Required
                   </p>
-                  <NuxtLink to="/join" class="inline-flex items-center text-sm font-medium text-amber-700 dark:text-amber-300 hover:underline mt-2">
+                  <p class="text-sm text-amber-400 mt-1">
+                    This event is exclusive to Ghost Guild members. Join any
+                    circle to gain access.
+                  </p>
+                  <NuxtLink
+                    to="/join"
+                    class="inline-flex items-center text-sm font-medium text-amber-300 hover:underline mt-2"
+                  >
                     Become a member
                     <Icon name="heroicons:arrow-right" class="w-4 h-4 ml-1" />
                   </NuxtLink>
@@ -195,40 +312,53 @@
             </div>
 
             <!-- Registration Form -->
-            <form v-if="registrationStatus !== 'registered'" @submit.prevent="handleRegistration" class="space-y-4">
+            <form
+              v-if="registrationStatus !== 'registered'"
+              @submit.prevent="handleRegistration"
+              class="space-y-4"
+            >
               <!-- Show form fields only for public events OR for logged-in members -->
               <template v-if="!event.membersOnly || isMember">
                 <div>
-                  <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label
+                    for="name"
+                    class="block text-sm font-medium text-stone-200 mb-2"
+                  >
                     Full Name
                   </label>
-                  <UInput 
-                    id="name" 
-                    v-model="registrationForm.name" 
-                    type="text" 
-                    required 
+                  <UInput
+                    id="name"
+                    v-model="registrationForm.name"
+                    type="text"
+                    required
                     placeholder="Enter your full name"
                   />
                 </div>
 
                 <div>
-                  <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label
+                    for="email"
+                    class="block text-sm font-medium text-stone-200 mb-2"
+                  >
                     Email Address
                   </label>
-                  <UInput 
-                    id="email" 
-                    v-model="registrationForm.email" 
-                    type="email" 
-                    required 
+                  <UInput
+                    id="email"
+                    v-model="registrationForm.email"
+                    type="email"
+                    required
                     placeholder="Enter your email"
                   />
                 </div>
 
                 <div>
-                  <label for="membershipLevel" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  <label
+                    for="membershipLevel"
+                    class="block text-sm font-medium text-stone-200 mb-2"
+                  >
                     Membership Status
                   </label>
-                  <USelect 
+                  <USelect
                     id="membershipLevel"
                     v-model="registrationForm.membershipLevel"
                     :options="membershipOptions"
@@ -236,28 +366,19 @@
                 </div>
               </template>
 
-
               <div class="pt-4">
-                <UButton 
+                <UButton
                   v-if="!event.membersOnly || isMember"
-                  type="submit" 
-                  color="primary" 
-                  size="lg" 
+                  type="submit"
+                  color="primary"
+                  size="lg"
                   block
                   :loading="isRegistering"
                 >
-                  {{ isRegistering ? 'Registering...' : 'Register for Event' }}
+                  {{ isRegistering ? "Registering..." : "Register for Event" }}
                 </UButton>
-                <NuxtLink 
-                  v-else
-                  to="/join" 
-                  class="block"
-                >
-                  <UButton 
-                    color="primary" 
-                    size="lg" 
-                    block
-                  >
+                <NuxtLink v-else to="/join" class="block">
+                  <UButton color="primary" size="lg" block>
                     Become a Member to Register
                   </UButton>
                 </NuxtLink>
@@ -265,15 +386,20 @@
             </form>
 
             <!-- Event Capacity -->
-            <div v-if="event.maxAttendees" class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <div
+              v-if="event.maxAttendees"
+              class="mt-6 pt-6 border-t border-stone-700"
+            >
               <div class="flex items-center justify-between">
-                <span class="text-sm text-gray-600 dark:text-gray-400">Event Capacity</span>
+                <span class="text-sm text-stone-300">Event Capacity</span>
                 <div class="flex items-center space-x-2">
-                  <span class="text-sm font-semibold text-gray-900 dark:text-white">
+                  <span class="text-sm font-semibold text-stone-100">
                     {{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
                   </span>
-                  <div class="w-24 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-                    <div 
+                  <div
+                    class="w-24 h-2 bg-stone-700 rounded-full overflow-hidden"
+                  >
+                    <div
                       class="h-full bg-blue-500 rounded-full"
                       :style="`width: ${((event.registeredCount || 0) / event.maxAttendees) * 100}%`"
                     />
@@ -284,12 +410,15 @@
           </div>
 
           <!-- Additional Information -->
-          <div class="mt-8 p-6 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-200 dark:border-blue-800">
-            <h4 class="font-semibold text-gray-900 dark:text-white mb-3">Questions?</h4>
-            <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
-              If you have any questions about this event, please reach out to our events team.
+          <div class="mt-8 p-6 bg-stone-800 rounded-xl border border-stone-700">
+            <h4 class="font-semibold text-stone-100 mb-3">Questions?</h4>
+            <p class="text-sm text-stone-200 mb-3">
+              If you have any questions about this event please drop us a line.
             </p>
-            <a href="mailto:events@ghostguild.org" class="inline-flex items-center text-blue-600 dark:text-blue-400 hover:underline">
+            <a
+              href="mailto:events@ghostguild.org"
+              class="inline-flex items-center text-blue-400 hover:underline"
+            >
               <Icon name="heroicons:envelope" class="w-4 h-4 mr-2" />
               events@ghostguild.org
             </a>
@@ -301,164 +430,254 @@
 </template>
 
 <script setup>
-const route = useRoute()
-const toast = useToast()
+const route = useRoute();
+const toast = useToast();
 
 // Fetch event data from API
-const { data: event, pending, error } = await useFetch(`/api/events/${route.params.id}`)
+const {
+  data: event,
+  pending,
+  error,
+} = await useFetch(`/api/events/${route.params.id}`);
 
 // Handle event not found
 if (error.value?.statusCode === 404) {
   throw createError({
     statusCode: 404,
-    statusMessage: 'Event not found'
-  })
+    statusMessage: "Event not found",
+  });
 }
 
 // Authentication
-const { isMember, memberData, checkMemberStatus } = useAuth()
+const { isMember, memberData, checkMemberStatus } = useAuth();
 
 // Check member status on mount
 onMounted(async () => {
-  await checkMemberStatus()
-  
+  await checkMemberStatus();
+
   // Pre-fill form if member is logged in
   if (memberData.value) {
-    registrationForm.value.name = memberData.value.name
-    registrationForm.value.email = memberData.value.email
-    registrationForm.value.membershipLevel = memberData.value.membershipLevel || 'non-member'
+    registrationForm.value.name = memberData.value.name;
+    registrationForm.value.email = memberData.value.email;
+    registrationForm.value.membershipLevel =
+      memberData.value.membershipLevel || "non-member";
+
+    // Check if user is already registered
+    await checkRegistrationStatus();
   }
-})
+});
+
+// Check if user is already registered for this event
+const checkRegistrationStatus = async () => {
+  if (!memberData.value?.email) return;
+
+  try {
+    const response = await $fetch(
+      `/api/events/${route.params.id}/check-registration`,
+      {
+        method: "POST",
+        body: { email: memberData.value.email },
+      },
+    );
+
+    if (response.isRegistered) {
+      registrationStatus.value = "registered";
+    }
+  } catch (error) {
+    console.error("Failed to check registration status:", error);
+  }
+};
 
 // Registration form state
 const registrationForm = ref({
-  name: '',
-  email: '',
-  membershipLevel: 'non-member'
-})
+  name: "",
+  email: "",
+  membershipLevel: "non-member",
+});
 
 const membershipOptions = [
-  { label: 'Non-member', value: 'non-member' },
-  { label: 'Circle of Community', value: 'community' },
-  { label: 'Circle of Founders', value: 'founder' },
-  { label: 'Circle of Practitioners', value: 'practitioner' }
-]
+  { label: "Non-member", value: "non-member" },
+  { label: "Circle of Community", value: "community" },
+  { label: "Circle of Founders", value: "founder" },
+  { label: "Circle of Practitioners", value: "practitioner" },
+];
 
-const isRegistering = ref(false)
-const registrationStatus = ref('not-registered') // 'not-registered', 'registered'
+const isRegistering = ref(false);
+const isCancelling = ref(false);
+const registrationStatus = ref("not-registered"); // 'not-registered', 'registered'
 
 // Format date for display
 const formatDate = (dateString) => {
-  const date = new Date(dateString)
-  return new Intl.DateTimeFormat('en-US', {
-    weekday: 'long',
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-  }).format(date)
-}
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  }).format(date);
+};
 
 // Format time range for display
 const formatTime = (startDate, endDate) => {
-  const start = new Date(startDate)
-  const end = new Date(endDate)
-  
-  const timeFormat = new Intl.DateTimeFormat('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-    timeZoneName: 'short'
-  })
-  
-  return `${timeFormat.format(start)} - ${timeFormat.format(end)}`
-}
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  const timeFormat = new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short",
+  });
+
+  return `${timeFormat.format(start)} - ${timeFormat.format(end)}`;
+};
 
 // Format circle name for display
 const formatCircleName = (circleValue) => {
   const circleNames = {
-    'community': 'Community Circle',
-    'founder': 'Founder Circle',
-    'practitioner': 'Practitioner Circle'
-  }
-  return circleNames[circleValue] || circleValue
-}
+    community: "Community Circle",
+    founder: "Founder Circle",
+    practitioner: "Practitioner Circle",
+  };
+  return circleNames[circleValue] || circleValue;
+};
 
 // Get optimized Cloudinary image URL
 const getOptimizedImageUrl = (publicId, transformations) => {
-  if (!publicId) return ''
-  
-  const config = useRuntimeConfig()
-  return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`
-}
+  if (!publicId) return "";
+
+  const config = useRuntimeConfig();
+  return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`;
+};
 
 // Get image URL with fallback logic
 const getImageUrl = (featureImage) => {
-  if (!featureImage) return ''
-  
+  if (!featureImage) return "";
+
   // If we have a direct URL, use it as primary (since seed data uses external URLs)
   if (featureImage.url) {
-    return featureImage.url
+    return featureImage.url;
   }
-  
+
   // Fallback to Cloudinary if we have a publicId
   if (featureImage.publicId) {
-    return getOptimizedImageUrl(featureImage.publicId, 'w_1200,h_400,c_fill')
+    return getOptimizedImageUrl(featureImage.publicId, "w_1200,h_400,c_fill");
   }
-  
-  return ''
-}
+
+  return "";
+};
 
 // Handle image loading errors
 const handleImageError = (event) => {
-  console.warn('Image failed to load:', event.target.src)
+  console.warn("Image failed to load:", event.target.src);
   // Optionally hide the image container or show a placeholder
-}
+};
 
 // Handle registration submission
 const handleRegistration = async () => {
-  isRegistering.value = true
-  
+  isRegistering.value = true;
+
   try {
     // Submit registration to API using slug or ID
     const response = await $fetch(`/api/events/${route.params.id}/register`, {
-      method: 'POST',
-      body: registrationForm.value
-    })
-    
+      method: "POST",
+      body: registrationForm.value,
+    });
+
     // Update registration status
-    registrationStatus.value = 'registered'
-    
+    registrationStatus.value = "registered";
+
     // Show success toast
     toast.add({
-      title: 'Registration Successful!',
+      title: "Registration Successful!",
       description: `You're registered for ${event.value.title}. Check your email for confirmation.`,
-      color: 'green'
-    })
-    
+      color: "green",
+    });
+
     // Update registered count
     if (event.value.registeredCount !== undefined) {
-      event.value.registeredCount++
+      event.value.registeredCount++;
     }
   } catch (error) {
-    console.error('Registration failed:', error)
-    
+    console.error("Registration failed:", error);
+
     // Handle specific error messages
-    const errorMessage = error.data?.statusMessage || 'Something went wrong. Please try again.'
-    
+    const errorMessage =
+      error.data?.statusMessage || "Something went wrong. Please try again.";
+
     toast.add({
-      title: 'Registration Failed',
+      title: "Registration Failed",
       description: errorMessage,
-      color: 'red'
-    })
+      color: "red",
+    });
   } finally {
-    isRegistering.value = false
+    isRegistering.value = false;
   }
-}
+};
+
+// Handle registration cancellation
+const handleCancelRegistration = async () => {
+  if (
+    !confirm(
+      "Are you sure you want to cancel your registration for this event?",
+    )
+  ) {
+    return;
+  }
+
+  isCancelling.value = true;
+
+  try {
+    const response = await $fetch(
+      `/api/events/${route.params.id}/cancel-registration`,
+      {
+        method: "POST",
+        body: {
+          email: registrationForm.value.email || memberData.value?.email,
+        },
+      },
+    );
+
+    // Update registration status
+    registrationStatus.value = "not-registered";
+
+    // Show success toast
+    toast.add({
+      title: "Registration Cancelled",
+      description: "Your registration has been cancelled successfully.",
+      color: "blue",
+    });
+
+    // Update registered count
+    if (event.value.registeredCount !== undefined) {
+      event.value.registeredCount--;
+    }
+  } catch (error) {
+    console.error("Cancel registration failed:", error);
+
+    const errorMessage =
+      error.data?.statusMessage ||
+      "Failed to cancel registration. Please try again.";
+
+    toast.add({
+      title: "Cancellation Failed",
+      description: errorMessage,
+      color: "red",
+    });
+  } finally {
+    isCancelling.value = false;
+  }
+};
 
 // SEO Meta
 useHead(() => ({
-  title: event.value ? `${event.value.title} - Ghost Guild Events` : 'Event - Ghost Guild',
+  title: event.value
+    ? `${event.value.title} - Ghost Guild Events`
+    : "Event - Ghost Guild",
   meta: [
-    { name: 'description', content: event.value?.description || 'View event details and register' }
-  ]
-}))
-</script>
\ No newline at end of file
+    {
+      name: "description",
+      content: event.value?.description || "View event details and register",
+    },
+  ],
+}));
+</script>
diff --git a/app/pages/events/index.vue b/app/pages/events/index.vue
index 7029d4a..48ecfb1 100644
--- a/app/pages/events/index.vue
+++ b/app/pages/events/index.vue
@@ -1,141 +1,219 @@
 <template>
   <div>
     <!-- Page Header -->
-    <PageHeader 
+    <PageHeader
       title="Events"
-      subtitle="Join our community events, workshops, and gatherings designed to connect developers and share knowledge about cooperative game development."
-      theme="blue"
+      subtitle="Join our community events, workshops, and gatherings"
       size="large"
     />
 
-    <!-- Event Calendar -->
-    <section class="py-20 bg-white dark:bg-gray-900">
+    <!-- Events Section with Tabs -->
+    <section class="py-20 bg-stone-900 dark:bg-stone-950">
       <UContainer>
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            Event Calendar
-          </h2>
-          <div class="flex items-center justify-center gap-2 mb-8">
-            <div class="w-6 h-6 bg-blue-500 rounded-full" />
-            <div class="w-6 h-6 bg-blue-400 rounded-full" />
-            <div class="w-8 h-1 bg-blue-300 rounded-full" />
-            <div class="w-8 h-1 bg-blue-200 rounded-full" />
-            <div class="w-8 h-1 bg-blue-100 rounded-full" />
-          </div>
-        </div>
-        
-        <div class="max-w-5xl mx-auto">
-          <div class="bg-gray-50 dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700">
-            <ClientOnly>
-              <div v-if="pending" class="min-h-[400px] bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
-                <div class="text-center">
-                  <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
-                  <p class="text-gray-600 dark:text-gray-400">Loading events...</p>
-                </div>
-              </div>
-              <VueCal 
-                v-else
-                :events="events"
-                :time="false"
-                active-view="month"
-                class="custom-calendar"
-                :disable-views="['years', 'year']"
-                :hide-weekends="false"
-                today-button
-                events-on-month-view="short"
-                :editable-events="{
-                  title: false,
-                  drag: false,
-                  resize: false,
-                  delete: false,
-                  create: false
-                }"
-                @event-click="onEventClick"
-              />
-              <template #fallback>
-                <div class="min-h-[400px] bg-gray-100 dark:bg-gray-700 rounded-xl flex items-center justify-center">
-                  <div class="text-center">
-                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"></div>
-                    <p class="text-gray-600 dark:text-gray-400">Loading calendar...</p>
+        <UTabs
+          v-model="activeTab"
+          :items="[
+            { label: 'Upcoming Events', value: 'upcoming', slot: 'upcoming' },
+            { label: 'Calendar', value: 'calendar', slot: 'calendar' },
+          ]"
+          class="max-w-6xl mx-auto"
+        >
+          <template #upcoming>
+            <div class="max-w-4xl mx-auto space-y-6 pt-8">
+              <NuxtLink
+                v-for="event in upcomingEvents"
+                :key="event.id"
+                :to="`/events/${event.slug || event.id}`"
+                class="group flex items-start gap-4 py-2 hover:opacity-80 transition-opacity"
+              >
+                <div class="flex-shrink-0 text-center">
+                  <div class="text-2xl font-bold text-stone-100">
+                    {{ event.start.getDate() }}
+                  </div>
+                  <div class="text-xs text-stone-400 uppercase">
+                    {{
+                      event.start.toLocaleDateString("en-US", {
+                        month: "short",
+                      })
+                    }}
                   </div>
                 </div>
-              </template>
-            </ClientOnly>
-          </div>
-        </div>
+
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-start gap-2 mb-1">
+                    <h3
+                      class="text-lg font-semibold text-stone-100 group-hover:text-blue-400 transition-colors"
+                    >
+                      {{ event.title }}
+                    </h3>
+                    <Icon
+                      v-if="event.membersOnly"
+                      name="heroicons:lock-closed"
+                      class="w-4 h-4 text-purple-500 flex-shrink-0 mt-1"
+                    />
+                  </div>
+
+                  <p class="text-sm text-stone-300 mb-2 line-clamp-2">
+                    {{ event.content }}
+                  </p>
+
+                  <div
+                    v-if="event.series?.isSeriesEvent"
+                    class="flex items-center gap-1 text-xs text-purple-600 dark:text-purple-400"
+                  >
+                    <div
+                      class="w-4 h-4 bg-purple-100 dark:bg-purple-900/30 rounded-full flex items-center justify-center text-xs font-bold"
+                    >
+                      {{ event.series.position }}
+                    </div>
+                    {{ event.series.title }}
+                  </div>
+                </div>
+
+                <Icon
+                  name="heroicons:arrow-right"
+                  class="w-5 h-5 text-stone-400 group-hover:text-blue-400 group-hover:translate-x-1 transition-all flex-shrink-0 mt-1"
+                />
+              </NuxtLink>
+            </div>
+          </template>
+
+          <template #calendar>
+            <div class="pt-8">
+              <ClientOnly>
+                <div
+                  v-if="pending"
+                  class="min-h-[400px] bg-stone-700 rounded-xl flex items-center justify-center"
+                >
+                  <div class="text-center">
+                    <p class="text-stone-200">Loading events...</p>
+                  </div>
+                </div>
+                <VueCal
+                  v-else
+                  :events="events"
+                  :time="false"
+                  active-view="month"
+                  class="custom-calendar"
+                  :disable-views="['years', 'year']"
+                  :hide-weekends="false"
+                  today-button
+                  events-on-month-view="short"
+                  :editable-events="{
+                    title: false,
+                    drag: false,
+                    resize: false,
+                    delete: false,
+                    create: false,
+                  }"
+                  @event-click="onEventClick"
+                />
+                <template #fallback>
+                  <div
+                    class="min-h-[400px] bg-stone-700 rounded-xl flex items-center justify-center"
+                  >
+                    <div class="text-center">
+                      <div
+                        class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mx-auto mb-4"
+                      ></div>
+                      <p class="text-stone-200">Loading calendar...</p>
+                    </div>
+                  </div>
+                </template>
+              </ClientOnly>
+            </div>
+          </template>
+        </UTabs>
       </UContainer>
     </section>
 
     <!-- Event Series -->
-    <section v-if="activeSeries.length > 0" class="py-20 bg-purple-50 dark:bg-purple-900/20">
+    <section
+      v-if="activeSeries.length > 0"
+      class="py-20 bg-stone-800 dark:bg-stone-900"
+    >
       <UContainer>
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-8">
+          <h2 class="text-3xl font-bold text-stone-100 mb-8">
             Active Event Series
           </h2>
-          <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
-            Multi-part workshops and recurring events designed to deepen your knowledge and build community connections.
+          <p class="text-stone-300 max-w-2xl mx-auto">
+            Multi-part workshops and recurring events designed to deepen your
+            knowledge and build community connections.
           </p>
         </div>
-        
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
+
+        <div
+          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto"
+        >
           <div
             v-for="series in activeSeries.slice(0, 6)"
             :key="series.id"
-            class="bg-white dark:bg-gray-900 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700"
+            class="bg-stone-900 rounded-xl p-6 shadow-lg border border-stone-700"
           >
             <div class="flex items-start justify-between mb-4">
-              <div :class="[
-                'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium',
-                getSeriesTypeBadgeClass(series.type)
-              ]">
+              <div
+                :class="[
+                  'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium',
+                  getSeriesTypeBadgeClass(series.type),
+                ]"
+              >
                 {{ formatSeriesType(series.type) }}
               </div>
-              <div class="flex items-center gap-1 text-xs text-gray-500">
+              <div class="flex items-center gap-1 text-xs text-stone-400">
                 <Icon name="heroicons:calendar-days" class="w-4 h-4" />
                 <span>{{ series.eventCount }} events</span>
               </div>
             </div>
-          
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
+
+            <h3 class="text-lg font-semibold text-stone-100 mb-2">
               {{ series.title }}
             </h3>
-            
-            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">
+
+            <p class="text-sm text-stone-300 mb-4 line-clamp-2">
               {{ series.description }}
             </p>
-            
+
             <div class="space-y-2 mb-4">
-              <div 
-                v-for="event in series.events.slice(0, 3)" 
+              <div
+                v-for="event in series.events.slice(0, 3)"
                 :key="event.id"
                 class="flex items-center justify-between text-xs"
               >
                 <div class="flex items-center gap-2">
-                  <div class="w-6 h-6 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full flex items-center justify-center text-xs font-medium">
-                    {{ event.series?.position || '?' }}
+                  <div
+                    class="w-6 h-6 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full flex items-center justify-center text-xs font-medium"
+                  >
+                    {{ event.series?.position || "?" }}
                   </div>
-                  <span class="text-gray-600 dark:text-gray-400 truncate">{{ event.title }}</span>
+                  <span class="text-stone-300 truncate">{{ event.title }}</span>
                 </div>
-                <span class="text-gray-500 dark:text-gray-500">
+                <span class="text-stone-400">
                   {{ formatEventDate(event.startDate) }}
                 </span>
               </div>
-              <div v-if="series.events.length > 3" class="text-xs text-gray-500 dark:text-gray-500 text-center pt-1">
+              <div
+                v-if="series.events.length > 3"
+                class="text-xs text-stone-400 text-center pt-1"
+              >
                 +{{ series.events.length - 3 }} more events
               </div>
             </div>
-            
+
             <div class="flex items-center justify-between text-sm">
-              <div class="text-gray-500 dark:text-gray-500">
+              <div class="text-stone-400">
                 {{ formatDateRange(series.startDate, series.endDate) }}
               </div>
-              <span :class="[
-                'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
-                series.status === 'active' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' :
-                series.status === 'upcoming' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' :
-                'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
-              ]">
+              <span
+                :class="[
+                  'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium',
+                  series.status === 'active'
+                    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                    : series.status === 'upcoming'
+                      ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                      : 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400',
+                ]"
+              >
                 {{ series.status }}
               </span>
             </div>
@@ -144,237 +222,101 @@
       </UContainer>
     </section>
 
-    <!-- Upcoming Events -->
-    <section class="py-20 bg-gray-50 dark:bg-gray-800">
-      <UContainer>
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            Upcoming Events
-          </h2>
-        </div>
-        
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
-          <NuxtLink
-            v-for="event in upcomingEvents"
-            :key="event.id"
-            :to="`/events/${event.slug || event.id}`"
-            class="group bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-all hover:shadow-xl"
-          >
-            <!-- Feature Image -->
-            <div v-if="event.featureImage?.url" class="aspect-video w-full overflow-hidden">
-              <img 
-                :src="getImageUrl(event.featureImage)"
-                :alt="event.featureImage.alt || event.title"
-                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-                @error="handleImageError"
-              />
-            </div>
-            
-            <div class="p-6">
-              <!-- Series Badge -->
-              <div v-if="event.series?.isSeriesEvent" class="mb-3">
-                <div class="inline-flex items-center gap-1 text-xs font-medium text-purple-600 dark:text-purple-400">
-                  <div class="w-4 h-4 bg-purple-100 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full flex items-center justify-center text-xs font-bold">
-                    {{ event.series.position }}
-                  </div>
-                  <Icon name="heroicons:squares-2x2" class="w-3 h-3" />
-                  {{ event.series.title }}
-                </div>
-              </div>
-              
-              <div class="flex items-start justify-between mb-4">
-                <div :class="[
-                  'inline-flex items-center px-3 py-1 rounded-full text-xs font-medium',
-                  event.class === 'event-community' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' :
-                  event.class === 'event-workshop' ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400' :
-                  event.class === 'event-social' ? 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400' :
-                  'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400'
-                ]">
-                  {{ event.class === 'event-community' ? 'Community' :
-                     event.class === 'event-workshop' ? 'Workshop' :
-                     event.class === 'event-social' ? 'Social' : 'Showcase' }}
-                </div>
-                <Icon v-if="event.membersOnly" name="heroicons:lock-closed" class="w-4 h-4 text-purple-500" />
-              </div>
-            
-              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
-                {{ event.title }}
-              </h3>
-              
-              <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-                {{ event.content }}
-              </p>
-              
-              <div class="flex items-center text-sm text-gray-500 dark:text-gray-500">
-                <Icon name="heroicons:calendar" class="w-4 h-4 mr-1" />
-                {{ formatEventDate(event.start) }}
-              </div>
-              
-              <div class="mt-4 pt-4 border-t border-gray-100 dark:border-gray-800">
-                <span class="inline-flex items-center text-sm font-medium text-blue-600 dark:text-blue-400 group-hover:translate-x-1 transition-transform">
-                  View Details
-                  <Icon name="heroicons:arrow-right" class="w-4 h-4 ml-1" />
-                </span>
-              </div>
-            </div>
-          </NuxtLink>
-        </div>
-      </UContainer>
-    </section>
-
     <!-- Attend Our Events -->
-    <section class="py-20 bg-white dark:bg-gray-900">
+    <section class="py-20 bg-stone-800 dark:bg-stone-900">
       <UContainer>
         <div class="text-center mb-16">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
+          <h2 class="text-3xl font-bold text-stone-100 mb-8">
             Attend Our Events
           </h2>
         </div>
 
         <div class="max-w-4xl mx-auto">
-          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800 mb-12">
-            <div class="space-y-6 mb-8">
-              <div class="h-2 bg-blue-500 rounded-full" />
-              <div class="h-2 bg-blue-400 rounded-full w-5/6" />
-              <div class="h-2 bg-blue-300 rounded-full w-2/3" />
-            </div>
-            
+          <div
+            class="bg-stone-900 rounded-2xl p-8 border border-stone-700 mb-12"
+          >
             <div class="prose prose-lg dark:prose-invert max-w-none">
-              <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
-                Our events are designed to build community, share knowledge, and support developers exploring cooperative models. From informal networking sessions to structured workshops, there's something for everyone.
+              <p class="text-lg leading-relaxed text-stone-200 mb-6">
+                Our events are ,Lorem ipsum, dolor sit amet consectetur
+                adipisicing elit. Quibusdam exercitationem delectus ab
+                voluptates aspernatur, quia deleniti aut maxime, veniam
+                accusantium non dolores saepe error, ipsam laudantium asperiores
+                dolorum alias nulla!
               </p>
-              
-              <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300 mb-6">
-                Regular events include monthly community meetups, quarterly workshops on cooperative business structures, and seasonal social gatherings. We also host special events featuring guest speakers and collaborative project showcases.
-              </p>
-              
-              <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
-                All events are welcoming to developers at any stage of their cooperative journey, from those just curious about alternative models to experienced co-op members sharing their insights.
+
+              <p class="text-lg leading-relaxed text-stone-200 mb-6">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
               </p>
             </div>
           </div>
 
           <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
             <div class="text-center">
-              <div class="w-16 h-16 bg-blue-100 dark:bg-blue-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <div class="w-8 h-8 bg-blue-500 rounded" />
-              </div>
-              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Monthly Meetups</h3>
-              <div class="space-y-1 mb-3">
-                <div class="h-1 bg-blue-500 rounded-full" />
-                <div class="h-1 bg-blue-300 rounded-full w-3/4 mx-auto" />
-              </div>
-              <p class="text-sm text-gray-600 dark:text-gray-400">
-                Casual networking and knowledge sharing sessions
+              <h3 class="text-lg font-semibold text-stone-100 mb-2">
+                Monthly Meetups
+              </h3>
+
+              <p class="text-sm text-stone-300">
+                Casual knowledge sharing sessions
               </p>
             </div>
 
             <div class="text-center">
-              <div class="w-16 h-16 bg-emerald-100 dark:bg-emerald-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <div class="w-8 h-8 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
-              </div>
-              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Workshops</h3>
-              <div class="space-y-1 mb-3">
-                <div class="h-1 bg-emerald-500 rounded-full" />
-                <div class="h-1 bg-emerald-300 rounded-full w-5/6 mx-auto" />
-              </div>
-              <p class="text-sm text-gray-600 dark:text-gray-400">
-                Hands-on learning about cooperative business models
+              <h3 class="text-lg font-semibold text-stone-100 mb-2">
+                Workshops
+              </h3>
+
+              <p class="text-sm text-stone-300">
+                Hands-on learning about cooperative and worker-centric business
+                models
               </p>
             </div>
 
             <div class="text-center">
-              <div class="w-16 h-16 bg-purple-100 dark:bg-purple-900/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
-                <div class="w-8 h-8 bg-purple-500 rounded-full" />
-              </div>
-              <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Social Events</h3>
-              <div class="space-y-1 mb-3">
-                <div class="h-1 bg-purple-500 rounded-full" />
-                <div class="h-1 bg-purple-300 rounded-full w-2/3 mx-auto" />
-              </div>
-              <p class="text-sm text-gray-600 dark:text-gray-400">
-                Community building and celebration gatherings
+              <h3 class="text-lg font-semibold text-stone-100 mb-2">
+                Social Events
+              </h3>
+              <p class="text-sm text-stone-300">
+                Game nights, socials, and more
               </p>
             </div>
           </div>
         </div>
       </UContainer>
     </section>
-
-    <!-- Event Highlights -->
-    <section class="py-20 bg-gray-50 dark:bg-gray-800">
-      <UContainer>
-        <div class="text-center mb-16">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            Event Highlights
-          </h2>
-        </div>
-
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
-          <div class="space-y-6">
-            <div class="space-y-4">
-              <div class="h-2 bg-blue-500 rounded-full" />
-              <div class="h-2 bg-blue-400 rounded-full w-5/6" />
-              <div class="h-2 bg-blue-300 rounded-full w-3/4" />
-              <div class="h-2 bg-blue-200 rounded-full w-1/2" />
-            </div>
-
-            <div class="space-y-6">
-              <div>
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
-                  Recent Highlights
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">
-                  Our latest workshop on "Building Sustainable Game Co-ops" brought together 50+ developers to explore practical strategies for transitioning to cooperative models.
-                </p>
-                <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-                  The quarterly showcase featured three member studios presenting their games and sharing insights about democratic decision-making in creative projects.
-                </p>
-              </div>
-
-              <div>
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-3">
-                  Upcoming Features
-                </h3>
-                <p class="text-gray-600 dark:text-gray-400 leading-relaxed">
-                  Next month's event will include a panel discussion on funding cooperative studios, featuring successful co-op founders and supporting investors.
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div class="flex items-center justify-center">
-            <div class="w-full max-w-md h-64 bg-blue-100 dark:bg-blue-900/30 rounded-2xl border-2 border-dashed border-blue-300 dark:border-blue-700 flex items-center justify-center">
-              <div class="text-center">
-                <div class="w-16 h-16 bg-blue-200 dark:bg-blue-800 rounded-xl flex items-center justify-center mx-auto mb-4">
-                  <div class="w-8 h-8 bg-blue-500 rounded" />
-                </div>
-                <p class="text-blue-600 dark:text-blue-400 font-medium">Event Photos</p>
-                <p class="text-sm text-blue-500 dark:text-blue-500 mt-2">Coming Soon</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </UContainer>
-    </section>
-
   </div>
 </template>
 
 <script setup>
-import { VueCal } from 'vue-cal'
-import 'vue-cal/style.css'
+import { VueCal } from "vue-cal";
+import "vue-cal/style.css";
+
+// Active tab state
+const activeTab = ref("upcoming");
 
 // Fetch events from API
-const { data: eventsData, pending, error } = await useFetch('/api/events')
+const { data: eventsData, pending, error } = await useFetch("/api/events");
 // Fetch series from API
-const { data: seriesData } = await useFetch('/api/series')
+const { data: seriesData } = await useFetch("/api/series");
 
 // Transform events for calendar display
 const events = computed(() => {
-  if (!eventsData.value) return []
-  
-  return eventsData.value.map(event => ({
+  if (!eventsData.value) return [];
+
+  return eventsData.value.map((event) => ({
     id: event.id || event._id,
     slug: event.slug,
     start: new Date(event.startDate),
@@ -388,117 +330,128 @@ const events = computed(() => {
     registeredCount: event.registeredCount,
     maxAttendees: event.maxAttendees,
     featureImage: event.featureImage,
-    series: event.series
-  }))
-})
+    series: event.series,
+  }));
+});
 
 // Get active event series
 const activeSeries = computed(() => {
-  if (!seriesData.value) return []
-  return seriesData.value.filter(series => 
-    series.status === 'active' || series.isOngoing || series.isUpcoming
-  )
-})
+  if (!seriesData.value) return [];
+  return seriesData.value.filter(
+    (series) =>
+      series.status === "active" || series.isOngoing || series.isUpcoming,
+  );
+});
 
 // Get upcoming events (future events)
 const upcomingEvents = computed(() => {
-  const now = new Date()
+  const now = new Date();
   return events.value
-    .filter(event => event.start > now)
+    .filter((event) => event.start > now)
     .sort((a, b) => a.start - b.start)
-    .slice(0, 6) // Show max 6 upcoming events
-})
+    .slice(0, 6); // Show max 6 upcoming events
+});
 
 // Format event date for display
 const formatEventDate = (date) => {
-  return new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric'
-  }).format(date)
-}
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(date);
+};
 
 // Get optimized Cloudinary image URL
 const getOptimizedImageUrl = (publicId, transformations) => {
-  if (!publicId) return ''
-  
-  const config = useRuntimeConfig()
-  return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`
-}
+  if (!publicId) return "";
+
+  const config = useRuntimeConfig();
+  return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/${transformations}/f_auto,q_auto/${publicId}`;
+};
 
 // Get image URL with fallback logic
 const getImageUrl = (featureImage) => {
-  if (!featureImage) return ''
-  
+  if (!featureImage) return "";
+
   // If we have a direct URL, use it as primary (since seed data uses external URLs)
   if (featureImage.url) {
-    return featureImage.url
+    return featureImage.url;
   }
-  
+
   // Fallback to Cloudinary if we have a publicId
   if (featureImage.publicId) {
-    return getOptimizedImageUrl(featureImage.publicId, 'w_400,h_200,c_fill')
+    return getOptimizedImageUrl(featureImage.publicId, "w_400,h_200,c_fill");
   }
-  
-  return ''
-}
+
+  return "";
+};
 
 // Handle image loading errors
 const handleImageError = (event) => {
-  console.warn('Image failed to load:', event.target.src)
+  console.warn("Image failed to load:", event.target.src);
   // Optionally hide the image container or show a placeholder
-}
+};
 
 // Handle calendar event click
 const onEventClick = (event) => {
   if (event.id) {
-    navigateTo(`/events/${event.slug || event.id}`)
+    navigateTo(`/events/${event.slug || event.id}`);
   }
-}
+};
 
 // Series helper functions
 const formatSeriesType = (type) => {
   const types = {
-    'workshop_series': 'Workshop Series',
-    'recurring_meetup': 'Recurring Meetup',
-    'multi_day': 'Multi-Day Event',
-    'course': 'Course',
-    'tournament': 'Tournament'
-  }
-  return types[type] || type
-}
+    workshop_series: "Workshop Series",
+    recurring_meetup: "Recurring Meetup",
+    multi_day: "Multi-Day Event",
+    course: "Course",
+    tournament: "Tournament",
+  };
+  return types[type] || type;
+};
 
 const getSeriesTypeBadgeClass = (type) => {
   const classes = {
-    'workshop_series': 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
-    'recurring_meetup': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-    'multi_day': 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
-    'course': 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
-    'tournament': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
-  }
-  return classes[type] || 'bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400'
-}
+    workshop_series:
+      "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400",
+    recurring_meetup:
+      "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+    multi_day:
+      "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
+    course:
+      "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
+    tournament: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
+  };
+  return (
+    classes[type] ||
+    "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+  );
+};
 
 const formatDateRange = (startDate, endDate) => {
-  if (!startDate || !endDate) return 'No dates'
-  
-  const start = new Date(startDate)
-  const end = new Date(endDate)
-  
-  const startMonth = start.toLocaleDateString('en-US', { month: 'short' })
-  const endMonth = end.toLocaleDateString('en-US', { month: 'short' })
-  const startDay = start.getDate()
-  const endDay = end.getDate()
-  const year = end.getFullYear()
-  
-  if (start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear()) {
-    return `${startMonth} ${startDay}-${endDay}, ${year}`
+  if (!startDate || !endDate) return "No dates";
+
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  const startMonth = start.toLocaleDateString("en-US", { month: "short" });
+  const endMonth = end.toLocaleDateString("en-US", { month: "short" });
+  const startDay = start.getDate();
+  const endDay = end.getDate();
+  const year = end.getFullYear();
+
+  if (
+    start.getMonth() === end.getMonth() &&
+    start.getFullYear() === end.getFullYear()
+  ) {
+    return `${startMonth} ${startDay}-${endDay}, ${year}`;
   } else if (start.getFullYear() === end.getFullYear()) {
-    return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`
+    return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`;
   } else {
-    return `${formatEventDate(startDate)} - ${formatEventDate(endDate)}`
+    return `${formatEventDate(startDate)} - ${formatEventDate(endDate)}`;
   }
-}
+};
 </script>
 
 <style scoped>
@@ -511,19 +464,127 @@ const formatDateRange = (startDate, endDate) => {
 
 /* Custom calendar styling to match the site theme */
 .custom-calendar {
-  --vuecal-primary-color: #3b82f6;
-  --vuecal-text-color: #374151;
-  --vuecal-border-color: #e5e7eb;
-  --vuecal-header-color: #f9fafb;
-  --vuecal-today-color: #dbeafe;
+  --vuecal-primary-color: #fff;
+  --vuecal-text-color: #e7e5e4;
+  --vuecal-border-color: #57534e;
+  --vuecal-header-color: #1c1917;
+  --vuecal-today-color: #292524;
+  background-color: #292524;
 }
 
-.dark .custom-calendar {
-  --vuecal-primary-color: #60a5fa;
-  --vuecal-text-color: #d1d5db;
-  --vuecal-border-color: #4b5563;
-  --vuecal-header-color: #374151;
-  --vuecal-today-color: #1e3a8a;
+.custom-calendar :deep(.vuecal__bg) {
+  background-color: #292524;
+}
+
+.custom-calendar :deep(.vuecal__header) {
+  background-color: #1c1917;
+  border-bottom: 1px solid #57534e;
+}
+
+.custom-calendar :deep(.vuecal__title-bar) {
+  background-color: #1c1917;
+}
+
+.custom-calendar :deep(.vuecal__title) {
+  color: #e7e5e4;
+}
+
+.custom-calendar :deep(.vuecal__weekdays-headings) {
+  background-color: #1c1917;
+  border-bottom: 1px solid #57534e;
+}
+
+.custom-calendar :deep(.vuecal__heading) {
+  color: #a8a29e;
+}
+
+.custom-calendar :deep(.vuecal__cell) {
+  background-color: #292524;
+  border-color: #57534e;
+  color: #e7e5e4;
+}
+
+.custom-calendar :deep(.vuecal__cell:hover) {
+  background-color: #44403c;
+}
+
+.custom-calendar :deep(.vuecal__cell-content) {
+  color: #e7e5e4;
+}
+
+.custom-calendar :deep(.vuecal__cell--today) {
+  background-color: #44403c;
+}
+
+.custom-calendar :deep(.vuecal__cell--out-of-scope) {
+  background-color: #1c1917;
+  color: #78716c;
+}
+
+.custom-calendar :deep(.vuecal__arrow) {
+  color: #a8a29e;
+}
+
+.custom-calendar :deep(.vuecal__arrow:hover) {
+  background-color: #44403c;
+}
+
+.custom-calendar :deep(.vuecal__today-btn) {
+  background-color: #44403c;
+  color: white;
+  border: 1px solid #78716c;
+}
+
+.custom-calendar :deep(.vuecal__today-btn:hover) {
+  background-color: #57534e;
+  border-color: #a8a29e;
+}
+
+.custom-calendar :deep(.vuecal__view-btn),
+.custom-calendar :deep(button[class*="view"]) {
+  background-color: #44403c !important;
+  color: #ffffff !important;
+  border: 1px solid #78716c !important;
+  font-weight: 600 !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.custom-calendar :deep(.vuecal__view-btn:hover),
+.custom-calendar :deep(button[class*="view"]:hover) {
+  background-color: #57534e !important;
+  border-color: #a8a29e !important;
+  color: #ffffff !important;
+}
+
+.custom-calendar :deep(.vuecal__view-btn--active),
+.custom-calendar :deep(button[class*="view"][class*="active"]) {
+  background-color: #0c0a09 !important;
+  color: #ffffff !important;
+  border-color: #a8a29e !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+}
+
+.custom-calendar :deep(.vuecal__view-btn--active:hover),
+.custom-calendar :deep(button[class*="view"][class*="active"]:hover) {
+  background-color: #1c1917 !important;
+  border-color: #d6d3d1 !important;
+  color: #ffffff !important;
+}
+
+.custom-calendar :deep(.vuecal__title-bar button) {
+  color: #ffffff !important;
+  font-weight: 600 !important;
+}
+
+.custom-calendar :deep(.vuecal__title-bar .default-view-btn) {
+  background-color: #44403c !important;
+  color: #ffffff !important;
+  border: 1px solid #78716c !important;
+}
+
+.custom-calendar :deep(.vuecal__title-bar .default-view-btn.active) {
+  background-color: #0c0a09 !important;
+  border-color: #a8a29e !important;
 }
 
 /* Event type styling */
@@ -562,4 +623,4 @@ const formatDateRange = (startDate, endDate) => {
   color: var(--vuecal-primary-color);
   font-weight: 600;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 4eedc1f..d9d048c 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,104 +1,114 @@
 <template>
-  <div>
-    <!-- Hero Section -->
-    <PageHeader 
-      title="Discover Ghost Guild"
-      subtitle="A community for game developers exploring cooperative models"
-      theme="blue"
-      size="hero"
-      :show-interactive-area="true"
-      interactive-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-    />
+  <div class="relative">
+    <!-- Experimental Hero Section -->
+    <section class="mb-24">
+      <div class="relative">
+        <!-- Large artistic title -->
+        <h1
+          class="text-6xl md:text-8xl font-bold text-stone-100 ethereal-text leading-tight mb-8"
+        >
+          Become a Ghostie
+        </h1>
 
-    <!-- Join Us Today -->
-    <section class="py-20 bg-white dark:bg-gray-900">
-      <UContainer>
-        <div class="text-center max-w-3xl mx-auto">
-          <h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-12">
-            Join Us Today
-          </h2>
-          
-          <div class="space-y-6">
-            <div class="h-2 bg-blue-500 rounded-full mx-auto max-w-sm" />
-            <div class="h-12 bg-blue-500 rounded-xl mx-auto max-w-xs flex items-center justify-center">
-              <UButton to="/join" size="lg" color="primary" class="text-white font-semibold">
-                Get Started
-              </UButton>
+        <!-- Floating subtitle -->
+        <div class="mb-16">
+          <p class="text-stone-100 text-lg max-w-md">
+            A community for creatives and game devs<br />
+            exploring cooperative models
+          </p>
+        </div>
+
+        <!-- Decorative elements -->
+        <div
+          class="absolute top-0 right-0 w-32 h-32 border border-ghost-800 rounded-full opacity-20"
+        />
+        <div
+          class="absolute top-20 -left-8 w-16 h-px bg-whisper-500 opacity-40"
+        />
+      </div>
+    </section>
+
+    <!-- Join Section - Offset Layout -->
+    <section class="mb-32 relative">
+      <div>
+        <NuxtLink
+          to="/join"
+          class="inline-block px-8 py-3 border border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
+        >
+          Join Us Today →
+        </NuxtLink>
+      </div>
+
+      <!-- Decorative corner element -->
+      <div
+        class="absolute -right-4 top-0 w-20 h-20 border-t border-r border-ghost-800 opacity-30"
+      />
+    </section>
+
+    <!-- Circles - Asymmetrical Grid -->
+    <section class="mb-32">
+      <div class="space-y-8">
+        <div
+          v-for="(circle, index) in circles"
+          :key="circle.value"
+          class="flex gap-8 items-start"
+        >
+          <!-- Content -->
+          <div class="flex-1 max-w-lg">
+            <h3 class="text-xl text-stone-100 mb-3">{{ circle.label }}</h3>
+            <p class="text-stone-200 text-sm leading-relaxed mb-4">
+              {{ circle.description }}
+            </p>
+
+            <!-- Features as inline text -->
+            <div class="text-sm text-stone-400">
+              <span v-for="(feature, i) in circle.features" :key="feature">
+                {{ feature
+                }}<span v-if="i < circle.features.length - 1"> • </span>
+              </span>
             </div>
           </div>
+
+          <!-- Side accent -->
         </div>
-      </UContainer>
+      </div>
     </section>
 
-    <!-- About Our Circles -->
-    <section class="py-20 bg-gray-50 dark:bg-gray-800">
-      <UContainer>
-        <div class="text-center mb-16">
-          <h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            About Our Circles
-          </h2>
-        </div>
-        
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-          <UCard v-for="circle in circles" :key="circle.value" class="h-full">
-            <template #header>
-              <div class="flex items-center gap-4 mb-4">
-                <div v-if="circle.value === 'community'" class="w-8 h-8 bg-blue-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
-                <div v-else-if="circle.value === 'founder'" class="w-8 h-8 bg-blue-500 flex items-center justify-center">
-                  <div class="w-4 h-1 bg-white" />
-                  <div class="w-1 h-4 bg-white absolute" />
-                </div>
-                <div v-else class="w-8 h-8 bg-blue-500 rounded" />
-                <h3 class="text-xl font-semibold text-gray-900 dark:text-white">{{ circle.label }}</h3>
-              </div>
-            </template>
-            
-            <div class="space-y-4">
-              <p class="text-gray-600 dark:text-gray-300">{{ circle.description }}</p>
-              
-              <div class="space-y-2">
-                <div class="h-1 bg-blue-500 rounded-full" />
-                <div class="h-1 bg-blue-300 rounded-full" />
-                <div class="h-1 bg-blue-200 rounded-full" />
-              </div>
-              
-              <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                <li v-for="feature in circle.features" :key="feature" class="flex items-start">
-                  <span class="mr-2">•</span>
-                  <span>{{ feature }}</span>
-                </li>
-              </ul>
-            </div>
-          </UCard>
-        </div>
-      </UContainer>
-    </section>
+    <!-- Why Join? - Diagonal Layout -->
+    <section class="mb-32 relative">
+      <div class="transform -rotate-1">
+        <h2 class="text-3xl font-light text-stone-200 mb-12">Why Join?</h2>
+      </div>
 
-    <!-- Why Join? -->
-    <section class="py-20 bg-white dark:bg-gray-900">
-      <UContainer>
-        <div class="text-center max-w-4xl mx-auto">
-          <h2 class="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-12">
-            Why Join?
-          </h2>
-          
-          <div class="bg-blue-50 dark:bg-blue-900/20 rounded-2xl p-12 border border-blue-200 dark:border-blue-800">
-            <div class="max-w-2xl mx-auto">
-              <div class="h-2 bg-blue-500 rounded-full mb-8" />
-              <p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-              </p>
-            </div>
-          </div>
-        </div>
-      </UContainer>
-    </section>
+      <div class="ml-12 relative">
+        <div
+          class="absolute -left-4 top-0 w-32 h-px bg-whisper-500 opacity-30 transform rotate-12"
+        />
 
+        <div class="max-w-2xl">
+          <p class="text-stone-300 leading-loose text-lg mb-8">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+          </p>
+
+          <p class="text-stone-400 leading-relaxed ml-8">
+            Sed do eiusmod tempor incididunt ut labore et dolore magna
+            aliqua.<br />
+            Ut enim ad minim veniam, quis nostrud exercitation.
+          </p>
+        </div>
+
+        <div
+          class="absolute -bottom-8 right-0 text-6xl text-stone-800 opacity-20 font-bold"
+        >
+          ?
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
 <script setup>
-import { getCircleOptions } from '~/config/circles'
+import { getCircleOptions } from "~/config/circles";
 
-const circles = getCircleOptions()
-</script>
\ No newline at end of file
+const circles = getCircleOptions();
+</script>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index 3e530d4..2356e07 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <!-- Page Header -->
-    <PageHeader 
-      title="Join"
-      subtitle="Become a member of our cooperative community and start building the future of game development together"
-      theme="blue"
+    <PageHeader
+      title="Join Ghost Guild"
+      subtitle="Become a member of our community and start building a more worker-centric future for games."
+      theme="gray"
       size="large"
     />
 
@@ -12,11 +12,13 @@
     <section class="py-20 bg-white dark:bg-gray-900">
       <UContainer class="max-w-4xl">
         <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
+          <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
             Membership Sign Up
           </h2>
-          <p class="text-gray-600 dark:text-gray-300">
-            Choose your circle and contribution level to get started
+          <p class="text-lg text-gray-700 dark:text-gray-300">
+            Choose your circle to connect with others at your stage. Choose your
+            contribution based on what you can afford. Everyone gets full
+            access.
           </p>
         </div>
 
@@ -24,64 +26,88 @@
         <div class="flex justify-center mb-8">
           <div class="flex items-center space-x-4">
             <div class="flex items-center">
-              <div 
+              <div
                 :class="[
                   'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
-                  currentStep >= 1 
-                    ? 'bg-blue-500 text-white' 
-                    : 'bg-gray-200 text-gray-500'
+                  currentStep >= 1
+                    ? 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-500',
                 ]"
               >
                 1
               </div>
-              <span class="ml-2 font-medium" :class="currentStep === 1 ? 'text-blue-600' : 'text-gray-500'">
+              <span
+                class="ml-2 font-medium"
+                :class="
+                  currentStep === 1
+                    ? 'text-gray-900 dark:text-white'
+                    : 'text-gray-500'
+                "
+              >
                 Information
               </span>
             </div>
-            
-            <div v-if="needsPayment" class="w-16 h-1 bg-gray-200">
-              <div 
-                class="h-full bg-blue-500 transition-all"
+
+            <div
+              v-if="needsPayment"
+              class="w-16 h-1 bg-gray-200 dark:bg-gray-700"
+            >
+              <div
+                class="h-full bg-gray-900 dark:bg-white transition-all"
                 :style="{ width: currentStep >= 2 ? '100%' : '0%' }"
               />
             </div>
-            
+
             <div v-if="needsPayment" class="flex items-center">
-              <div 
+              <div
                 :class="[
                   'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
-                  currentStep >= 2 
-                    ? 'bg-blue-500 text-white' 
-                    : 'bg-gray-200 text-gray-500'
+                  currentStep >= 2
+                    ? 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-500',
                 ]"
               >
                 2
               </div>
-              <span class="ml-2 font-medium" :class="currentStep === 2 ? 'text-blue-600' : 'text-gray-500'">
+              <span
+                class="ml-2 font-medium"
+                :class="
+                  currentStep === 2
+                    ? 'text-gray-900 dark:text-white'
+                    : 'text-gray-500'
+                "
+              >
                 Payment
               </span>
             </div>
-            
-            <div class="w-16 h-1 bg-gray-200">
-              <div 
-                class="h-full bg-blue-500 transition-all"
+
+            <div class="w-16 h-1 bg-gray-200 dark:bg-gray-700">
+              <div
+                class="h-full bg-gray-900 dark:bg-white transition-all"
                 :style="{ width: currentStep >= 3 ? '100%' : '0%' }"
               />
             </div>
-            
+
             <div class="flex items-center">
-              <div 
+              <div
                 :class="[
                   'w-10 h-10 rounded-full flex items-center justify-center font-semibold',
-                  currentStep >= 3 
-                    ? 'bg-blue-500 text-white' 
-                    : 'bg-gray-200 text-gray-500'
+                  currentStep >= 3
+                    ? 'bg-gray-900 dark:bg-white text-white dark:text-gray-900'
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-500',
                 ]"
               >
                 <span v-if="needsPayment">3</span>
                 <span v-else>2</span>
               </div>
-              <span class="ml-2 font-medium" :class="currentStep === 3 ? 'text-blue-600' : 'text-gray-500'">
+              <span
+                class="ml-2 font-medium"
+                :class="
+                  currentStep === 3
+                    ? 'text-gray-900 dark:text-white'
+                    : 'text-gray-500'
+                "
+              >
                 Confirmation
               </span>
             </div>
@@ -94,7 +120,7 @@
         </div>
 
         <!-- Step 1: Information -->
-        <div v-if="currentStep === 1" class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl border border-blue-200 dark:border-blue-800">
+        <div v-if="currentStep === 1" class="bg-white dark:bg-gray-800">
           <UForm :state="form" class="space-y-8" @submit="handleSubmit">
             <!-- Personal Information -->
             <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -128,8 +154,8 @@
                   class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
                   :class="
                     form.circle === option.value
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                      : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'
+                      ? 'border-gray-900 dark:border-white bg-gray-50 dark:bg-gray-800'
+                      : 'border-gray-200 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500'
                   "
                 >
                   <input
@@ -138,44 +164,33 @@
                     :value="option.value"
                     name="circle"
                     class="mb-3"
-                  >
+                  />
                   <div class="font-medium text-lg mb-2">{{ option.label }}</div>
                   <div class="text-sm text-gray-600 dark:text-gray-400">
                     {{ option.description }}
                   </div>
                 </label>
               </div>
+              <p class="text-sm text-gray-600 dark:text-gray-400 mt-3 italic">
+                Not sure? Start with Community - you can always move.
+              </p>
             </div>
 
             <!-- Contribution Selection -->
             <div>
-              <h3 class="text-lg font-semibold mb-4">Choose Your Monthly Contribution</h3>
-              <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                <label
-                  v-for="option in contributionOptions"
-                  :key="option.value"
-                  class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
-                  :class="
-                    form.contributionTier === option.value
-                      ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                      : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'
-                  "
-                >
-                  <input
-                    v-model="form.contributionTier"
-                    type="radio"
-                    :value="option.value"
-                    name="contributionTier"
-                    class="mb-3"
-                  >
-                  <div class="font-medium text-lg mb-2">{{ option.label }}</div>
-                  <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
-                    <li v-for="feature in option.features.slice(0, 2)" :key="feature">
-                      • {{ feature }}
-                    </li>
-                  </ul>
-                </label>
-              </div>
+              <UFormField
+                label="Choose Your Monthly Contribution"
+                name="contributionTier"
+                required
+              >
+                <USelect
+                  v-model="form.contributionTier"
+                  :items="contributionOptions"
+                  value-key="value"
+                  size="xl"
+                  class="w-full"
+                />
+              </UFormField>
             </div>
 
             <!-- Submit Button -->
@@ -187,14 +202,19 @@
                 size="xl"
                 class="px-12"
               >
-                {{ needsPayment ? 'Continue to Payment' : 'Complete Registration' }}
+                {{
+                  needsPayment ? "Continue to Payment" : "Complete Registration"
+                }}
               </UButton>
             </div>
           </UForm>
         </div>
-        
+
         <!-- Step 2: Payment -->
-        <div v-if="currentStep === 2" class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl border border-blue-200 dark:border-blue-800">
+        <div
+          v-if="currentStep === 2"
+          class="bg-white dark:bg-gray-800 rounded-xl p-8"
+        >
           <div class="mb-6">
             <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
               Payment Information
@@ -202,18 +222,19 @@
             <p class="text-gray-600 dark:text-gray-400">
               You're signing up for the {{ selectedTier.label }} plan
             </p>
-            <p class="text-lg font-semibold text-blue-600 dark:text-blue-400 mt-2">
+            <p class="text-lg font-semibold text-gray-900 dark:text-white mt-2">
               ${{ selectedTier.amount }} CAD / month
             </p>
           </div>
-          
+
           <!-- Payment Instructions -->
           <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-6">
             <p class="text-gray-700 dark:text-gray-300">
-              Click "Complete Payment" below to open the secure payment modal and verify your payment method.
+              Click "Complete Payment" below to open the secure payment modal
+              and verify your payment method.
             </p>
           </div>
-          
+
           <!-- Action Buttons -->
           <div class="flex justify-between pt-6">
             <UButton
@@ -224,34 +245,47 @@
             >
               Back
             </UButton>
-            <UButton
-              size="lg"
-              :loading="isSubmitting"
-              @click="processPayment"
-            >
+            <UButton size="lg" :loading="isSubmitting" @click="processPayment">
               Complete Payment
             </UButton>
           </div>
         </div>
-        
+
         <!-- Step 3: Confirmation -->
-        <div v-if="currentStep === 3" class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-xl border border-blue-200 dark:border-blue-800">
+        <div
+          v-if="currentStep === 3"
+          class="bg-white dark:bg-gray-800 rounded-xl p-8"
+        >
           <div class="text-center">
-            <div class="w-20 h-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-6">
-              <svg class="w-10 h-10 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+            <div
+              class="w-20 h-20 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-6"
+            >
+              <svg
+                class="w-10 h-10 text-green-500"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M5 13l4 4L19 7"
+                />
               </svg>
             </div>
-            
+
             <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
               Welcome to Ghost Guild!
             </h3>
-            
+
             <div v-if="successMessage" class="mb-6">
               <UAlert color="green" :title="successMessage" />
             </div>
-            
-            <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-6 text-left">
+
+            <div
+              class="bg-gray-50 dark:bg-gray-700 rounded-lg p-6 mb-6 text-left"
+            >
               <h4 class="font-semibold mb-3">Membership Details:</h4>
               <dl class="space-y-2">
                 <div class="flex justify-between">
@@ -267,7 +301,9 @@
                   <dd class="font-medium capitalize">{{ form.circle }}</dd>
                 </div>
                 <div class="flex justify-between">
-                  <dt class="text-gray-600 dark:text-gray-400">Contribution:</dt>
+                  <dt class="text-gray-600 dark:text-gray-400">
+                    Contribution:
+                  </dt>
                   <dd class="font-medium">{{ selectedTier.label }}</dd>
                 </div>
                 <div v-if="customerCode" class="flex justify-between">
@@ -276,30 +312,24 @@
                 </div>
               </dl>
             </div>
-            
+
             <p class="text-gray-600 dark:text-gray-400 mb-4">
-              We've sent a confirmation email to {{ form.email }} with your membership details.
+              We've sent a confirmation email to {{ form.email }} with your
+              membership details.
             </p>
-            
-            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 mb-8">
-              <p class="text-blue-800 dark:text-blue-200 text-center">
-                You will be automatically redirected to your dashboard in a few seconds...
+
+            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 mb-8">
+              <p class="text-gray-700 dark:text-gray-300 text-center">
+                You will be automatically redirected to your dashboard in a few
+                seconds...
               </p>
             </div>
-            
+
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
-              <UButton
-                to="/member/dashboard"
-                size="lg"
-                class="px-8"
-              >
+              <UButton to="/member/dashboard" size="lg" class="px-8">
                 Go to Dashboard Now
               </UButton>
-              <UButton
-                variant="outline"
-                size="lg"
-                @click="resetForm"
-              >
+              <UButton variant="outline" size="lg" @click="resetForm">
                 Register Another Member
               </UButton>
             </div>
@@ -308,68 +338,52 @@
       </UContainer>
     </section>
 
-    <!-- Membership Benefits -->
+    <!-- How Ghost Guild Works -->
     <section class="py-20 bg-gray-50 dark:bg-gray-800">
       <UContainer>
-        <div class="text-center mb-12">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
-            Membership Benefits
-          </h2>
-          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Join our community and unlock these amazing benefits.
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg">
-            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-6">
-              <div class="w-6 h-6 bg-blue-500 rounded" />
-            </div>
-            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-              Community Access
-            </h3>
-            <div class="space-y-2 mb-4">
-              <div class="h-1 bg-blue-500 rounded-full w-full" />
-              <div class="h-1 bg-blue-300 rounded-full w-3/4" />
-              <div class="h-1 bg-blue-200 rounded-full w-1/2" />
-            </div>
-            <p class="text-gray-600 dark:text-gray-400">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Access to forums and resources.
+        <div class="max-w-4xl mx-auto">
+          <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">
+              How Ghost Guild Works
+            </h2>
+            <p class="text-lg text-gray-700 dark:text-gray-300">
+              Every member gets everything. Your circle helps you find relevant
+              content and peers. Your contribution helps sustain our solidarity
+              economy.
             </p>
           </div>
 
-          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg">
-            <div class="w-12 h-12 bg-emerald-100 dark:bg-emerald-900/30 rounded-lg flex items-center justify-center mb-6">
-              <div class="w-6 h-6 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <!-- Full Access -->
+            <div class="bg-white dark:bg-gray-900 rounded-xl p-6">
+              <h3
+                class="text-xl font-semibold mb-4 text-gray-900 dark:text-white"
+              >
+                Full Access
+              </h3>
+              <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                <li>Complete resource library</li>
+                <li>All workshops and events</li>
+                <li>Slack community</li>
+                <li>Voting rights</li>
+                <li>Peer support opportunities</li>
+              </ul>
             </div>
-            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-              Learning Resources
-            </h3>
-            <div class="space-y-2 mb-4">
-              <div class="h-1 bg-emerald-500 rounded-full w-full" />
-              <div class="h-1 bg-emerald-300 rounded-full w-2/3" />
-              <div class="h-1 bg-emerald-200 rounded-full w-3/4" />
-            </div>
-            <p class="text-gray-600 dark:text-gray-400">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Educational content and workshops.
-            </p>
-          </div>
 
-          <div class="bg-white dark:bg-gray-900 rounded-xl p-8 shadow-lg md:col-span-2 lg:col-span-1">
-            <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-6">
-              <div class="w-6 h-6 bg-purple-500 rounded-full" />
+            <!-- Circle-Specific Guidance -->
+            <div class="bg-white dark:bg-gray-900 rounded-xl p-6">
+              <h3
+                class="text-xl font-semibold mb-4 text-gray-900 dark:text-white"
+              >
+                Circle-Specific Guidance
+              </h3>
+              <ul class="text-gray-700 dark:text-gray-300 space-y-2">
+                <li>Curated resources for your stage</li>
+                <li>Connection with peers on similar journeys</li>
+                <li>Relevant workshop recommendations</li>
+                <li>Targeted support for your challenges</li>
+              </ul>
             </div>
-            <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
-              Network & Support
-            </h3>
-            <div class="space-y-2 mb-4">
-              <div class="h-1 bg-purple-500 rounded-full w-5/6" />
-              <div class="h-1 bg-purple-300 rounded-full w-full" />
-              <div class="h-1 bg-purple-200 rounded-full w-2/3" />
-            </div>
-            <p class="text-gray-600 dark:text-gray-400">
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Connect with like-minded professionals.
-            </p>
           </div>
         </div>
       </UContainer>
@@ -378,76 +392,70 @@
     <!-- How to Join -->
     <section class="py-20 bg-white dark:bg-gray-900">
       <UContainer>
-        <div class="text-center mb-16">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-4">
-            How to Join
-          </h2>
-          <p class="text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Follow these simple steps to become a member.
-          </p>
-        </div>
-
         <div class="max-w-4xl mx-auto">
-          <div class="space-y-12">
-            <div class="flex flex-col md:flex-row items-center gap-8">
+          <div class="space-y-8">
+            <div class="flex items-start gap-6">
               <div class="flex-shrink-0">
-                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
+                <div
+                  class="w-12 h-12 bg-gray-900 dark:bg-white rounded-full flex items-center justify-center text-white dark:text-gray-900 font-bold text-xl"
+                >
                   1
                 </div>
               </div>
-              <div class="flex-1 text-center md:text-left">
-                <div class="space-y-3 mb-4">
-                  <div class="h-2 bg-blue-500 rounded-full max-w-md mx-auto md:mx-0" />
-                  <div class="h-2 bg-blue-300 rounded-full max-w-sm mx-auto md:mx-0" />
-                  <div class="h-2 bg-blue-200 rounded-full max-w-xs mx-auto md:mx-0" />
-                </div>
-                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
-                  Choose Your Circle
+              <div class="flex-1">
+                <h3
+                  class="text-xl font-semibold mb-2 text-gray-900 dark:text-white"
+                >
+                  Pick your circle
                 </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Select the circle that matches your interests.
+                <p class="text-gray-700 dark:text-gray-300">
+                  Where are you in your co-op journey? Select based on where you
+                  are in your cooperative journey - exploring, building, or
+                  practicing. Not sure? Start with Community.
                 </p>
               </div>
             </div>
 
-            <div class="flex flex-col md:flex-row items-center gap-8">
+            <div class="flex items-start gap-6">
               <div class="flex-shrink-0">
-                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
+                <div
+                  class="w-12 h-12 bg-gray-900 dark:bg-white rounded-full flex items-center justify-center text-white dark:text-gray-900 font-bold text-xl"
+                >
                   2
                 </div>
               </div>
-              <div class="flex-1 text-center md:text-left">
-                <div class="space-y-3 mb-4">
-                  <div class="h-2 bg-blue-500 rounded-full max-w-lg mx-auto md:mx-0" />
-                  <div class="h-2 bg-blue-300 rounded-full max-w-md mx-auto md:mx-0" />
-                  <div class="h-2 bg-blue-200 rounded-full max-w-sm mx-auto md:mx-0" />
-                </div>
-                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
-                  Set Your Contribution
+              <div class="flex-1">
+                <h3
+                  class="text-xl font-semibold mb-2 text-gray-900 dark:text-white"
+                >
+                  Choose your contribution
                 </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Choose a contribution level based on your means.
+                <p class="text-gray-700 dark:text-gray-300">
+                  What can you afford? ($0-50+/month) Choose based on your
+                  financial capacity. From $0 for those who need support to $50+
+                  for those who can sponsor others. You can adjust anytime.
                 </p>
               </div>
             </div>
 
-            <div class="flex flex-col md:flex-row items-center gap-8">
+            <div class="flex items-start gap-6">
               <div class="flex-shrink-0">
-                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
+                <div
+                  class="w-12 h-12 bg-gray-900 dark:bg-white rounded-full flex items-center justify-center text-white dark:text-gray-900 font-bold text-xl"
+                >
                   3
                 </div>
               </div>
-              <div class="flex-1 text-center md:text-left">
-                <div class="space-y-3 mb-4">
-                  <div class="h-2 bg-blue-500 rounded-full max-w-sm mx-auto md:mx-0" />
-                  <div class="h-2 bg-blue-300 rounded-full max-w-lg mx-auto md:mx-0" />
-                  <div class="h-2 bg-blue-200 rounded-full max-w-md mx-auto md:mx-0" />
-                </div>
-                <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">
-                  Complete Registration
+              <div class="flex-1">
+                <h3
+                  class="text-xl font-semibold mb-2 text-gray-900 dark:text-white"
+                >
+                  Join the community
                 </h3>
-                <p class="text-gray-600 dark:text-gray-400">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Finalize your membership and start participating.
+                <p class="text-gray-700 dark:text-gray-300">
+                  Get instant access to everything. Fill out your profile, agree
+                  to our community guidelines, and complete payment (if
+                  applicable). You'll get instant access to our community.
                 </p>
               </div>
             </div>
@@ -455,298 +463,278 @@
         </div>
       </UContainer>
     </section>
-
-    <!-- Ready to Join CTA -->
-    <section class="py-20 bg-blue-50 dark:bg-blue-900/20">
-      <UContainer>
-        <div class="text-center max-w-3xl mx-auto">
-          <h2 class="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-8">
-            Ready to Join?
-          </h2>
-          
-          <div class="flex flex-col md:flex-row items-center justify-center gap-8 mb-8">
-            <div class="bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg border border-blue-200 dark:border-blue-800 flex-1 max-w-md">
-              <div class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-2">
-                Start Today
-              </div>
-              <p class="text-gray-600 dark:text-gray-300 mb-4">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              </p>
-              <div class="space-y-2">
-                <div class="h-1 bg-blue-500 rounded-full" />
-                <div class="h-1 bg-blue-300 rounded-full w-3/4" />
-                <div class="h-1 bg-blue-200 rounded-full w-1/2" />
-              </div>
-            </div>
-            
-            <div class="flex flex-col items-center gap-4">
-              <UButton 
-                to="#membership-form"
-                size="xl" 
-                color="primary"
-                class="px-8 py-4"
-              >
-                Join Now
-              </UButton>
-              <div class="h-2 bg-blue-500 rounded-full w-32" />
-            </div>
-          </div>
-
-          <p class="text-gray-600 dark:text-gray-300">
-            Questions? Contact us at <a href="mailto:hello@ghostguild.org" class="text-blue-600 dark:text-blue-400 hover:underline">hello@ghostguild.org</a>
-          </p>
-        </div>
-      </UContainer>
-    </section>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, computed, onMounted, onUnmounted } from 'vue'
-import { getCircleOptions } from '~/config/circles'
-import { getContributionOptions, requiresPayment, getContributionTierByValue } from '~/config/contributions'
+import { reactive, ref, computed, onMounted, onUnmounted } from "vue";
+import { getCircleOptions } from "~/config/circles";
+import {
+  getContributionOptions,
+  requiresPayment,
+  getContributionTierByValue,
+} from "~/config/contributions";
 
 // Form state
 const form = reactive({
-  email: '',
-  name: '',
-  circle: 'community',
-  contributionTier: '15',
+  email: "",
+  name: "",
+  circle: "community",
+  contributionTier: "15",
   billingAddress: {
-    street: '',
-    city: '',
-    province: '',
-    postalCode: '',
-    country: 'CA'
-  }
-})
+    street: "",
+    city: "",
+    province: "",
+    postalCode: "",
+    country: "CA",
+  },
+});
 
 // UI state
-const isSubmitting = ref(false)
-const currentStep = ref(1) // 1: Info, 2: Billing (paid only), 3: Payment, 4: Confirmation
-const errorMessage = ref('')
-const successMessage = ref('')
+const isSubmitting = ref(false);
+const currentStep = ref(1); // 1: Info, 2: Billing (paid only), 3: Payment, 4: Confirmation
+const errorMessage = ref("");
+const successMessage = ref("");
 
 // Helcim state
-const customerId = ref(null)
-const customerCode = ref(null)
-const subscriptionData = ref(null)
-const paymentToken = ref(null)
+const customerId = ref(null);
+const customerCode = ref(null);
+const subscriptionData = ref(null);
+const paymentToken = ref(null);
 
 // Circle options from central config
-const circleOptions = getCircleOptions()
+const circleOptions = getCircleOptions();
 
 // Contribution options from central config
-const contributionOptions = getContributionOptions()
+const contributionOptions = getContributionOptions();
 
 // Initialize composables
-const { initializeHelcimPay, verifyPayment, cleanup: cleanupHelcimPay } = useHelcimPay()
-const { checkMemberStatus } = useAuth()
+const {
+  initializeHelcimPay,
+  verifyPayment,
+  cleanup: cleanupHelcimPay,
+} = useHelcimPay();
+const { checkMemberStatus } = useAuth();
 
 // Form validation
 const isFormValid = computed(() => {
-  return form.name && form.email && form.circle && form.contributionTier
-})
+  return form.name && form.email && form.circle && form.contributionTier;
+});
 
 // Check if payment is required
 const needsPayment = computed(() => {
-  return requiresPayment(form.contributionTier)
-})
-
+  return requiresPayment(form.contributionTier);
+});
 
 // Get selected tier info
 const selectedTier = computed(() => {
-  return getContributionTierByValue(form.contributionTier)
-})
+  return getContributionTierByValue(form.contributionTier);
+});
 
 // Step 1: Create customer
 const handleSubmit = async () => {
-  if (isSubmitting.value || !isFormValid.value) return
-  
-  isSubmitting.value = true
-  errorMessage.value = ''
-  
+  if (isSubmitting.value || !isFormValid.value) return;
+
+  isSubmitting.value = true;
+  errorMessage.value = "";
+
   try {
     // Create customer in Helcim
-    const response = await $fetch('/api/helcim/customer', {
-      method: 'POST',
+    const response = await $fetch("/api/helcim/customer", {
+      method: "POST",
       body: {
         name: form.name,
         email: form.email,
         circle: form.circle,
         contributionTier: form.contributionTier,
-        billingAddress: form.billingAddress
-      }
-    })
-    
+        billingAddress: form.billingAddress,
+      },
+    });
+
     if (response.success) {
-      console.log('Customer response:', response)
-      customerId.value = response.customerId
-      customerCode.value = response.customerCode
-      
+      console.log("Customer response:", response);
+      customerId.value = response.customerId;
+      customerCode.value = response.customerCode;
+
       // Token is now set as httpOnly cookie by the server
       // No need to manually set cookie on client side
-      
+
       // Move to next step
       if (needsPayment.value) {
-        currentStep.value = 2
+        currentStep.value = 2;
         // Debug log
-        console.log('Customer ID:', customerId.value, 'Customer Code:', customerCode.value)
+        console.log(
+          "Customer ID:",
+          customerId.value,
+          "Customer Code:",
+          customerCode.value,
+        );
         // Initialize HelcimPay.js session for card verification
-        await initializeHelcimPay(customerId.value, customerCode.value, 0)
+        await initializeHelcimPay(customerId.value, customerCode.value, 0);
       } else {
         // For free tier, create subscription directly
-        await createSubscription()
+        await createSubscription();
         // Check member status to ensure user is properly authenticated
-        await checkMemberStatus()
-        
+        await checkMemberStatus();
+
         // Automatically redirect to dashboard after a short delay
         setTimeout(() => {
-          navigateTo('/member/dashboard')
-        }, 3000) // 3 second delay to show success message
+          navigateTo("/member/dashboard");
+        }, 3000); // 3 second delay to show success message
       }
     }
   } catch (error) {
-    console.error('Error creating customer:', error)
-    errorMessage.value = error.data?.message || 'Failed to create account. Please try again.'
+    console.error("Error creating customer:", error);
+    errorMessage.value =
+      error.data?.message || "Failed to create account. Please try again.";
   } finally {
-    isSubmitting.value = false
+    isSubmitting.value = false;
   }
-}
+};
 
 // Step 2: Process payment
 const processPayment = async () => {
-  if (isSubmitting.value) return
-  
-  console.log('Starting payment process...')
-  isSubmitting.value = true
-  errorMessage.value = ''
-  
+  if (isSubmitting.value) return;
+
+  console.log("Starting payment process...");
+  isSubmitting.value = true;
+  errorMessage.value = "";
+
   try {
-    console.log('Calling verifyPayment()...')
+    console.log("Calling verifyPayment()...");
     // Verify payment through HelcimPay.js
-    const paymentResult = await verifyPayment()
-    console.log('Payment result from HelcimPay:', paymentResult)
-    
+    const paymentResult = await verifyPayment();
+    console.log("Payment result from HelcimPay:", paymentResult);
+
     if (paymentResult.success) {
-      paymentToken.value = paymentResult.cardToken
-      console.log('Payment successful, cardToken:', paymentResult.cardToken)
-      
-      console.log('Calling verify-payment endpoint...')
+      paymentToken.value = paymentResult.cardToken;
+      console.log("Payment successful, cardToken:", paymentResult.cardToken);
+
+      console.log("Calling verify-payment endpoint...");
       // Verify payment on server
-      const verifyResult = await $fetch('/api/helcim/verify-payment', {
-        method: 'POST',
+      const verifyResult = await $fetch("/api/helcim/verify-payment", {
+        method: "POST",
         body: {
           cardToken: paymentResult.cardToken,
-          customerId: customerId.value
-        }
-      })
-      console.log('Payment verification result:', verifyResult)
-      
-      console.log('Calling createSubscription...')
+          customerId: customerId.value,
+        },
+      });
+      console.log("Payment verification result:", verifyResult);
+
+      console.log("Calling createSubscription...");
       // Create subscription (don't let subscription errors prevent form progression)
-      const subscriptionResult = await createSubscription(paymentResult.cardToken)
-      
+      const subscriptionResult = await createSubscription(
+        paymentResult.cardToken,
+      );
+
       if (!subscriptionResult || !subscriptionResult.success) {
-        console.warn('Subscription creation failed but payment succeeded:', subscriptionResult?.error)
+        console.warn(
+          "Subscription creation failed but payment succeeded:",
+          subscriptionResult?.error,
+        );
         // Still progress to success page since payment worked
-        currentStep.value = 3
-        successMessage.value = 'Payment successful! Subscription setup may need manual completion.'
+        currentStep.value = 3;
+        successMessage.value =
+          "Payment successful! Subscription setup may need manual completion.";
       }
     }
   } catch (error) {
-    console.error('Payment process error:', error)
-    console.error('Error details:', {
+    console.error("Payment process error:", error);
+    console.error("Error details:", {
       message: error.message,
       statusCode: error.statusCode,
       statusMessage: error.statusMessage,
-      data: error.data
-    })
-    errorMessage.value = error.message || 'Payment verification failed. Please try again.'
+      data: error.data,
+    });
+    errorMessage.value =
+      error.message || "Payment verification failed. Please try again.";
   } finally {
-    isSubmitting.value = false
+    isSubmitting.value = false;
   }
-}
+};
 
 // Create subscription
 const createSubscription = async (cardToken = null) => {
   try {
-    console.log('Creating subscription with:', {
+    console.log("Creating subscription with:", {
       customerId: customerId.value,
       contributionTier: form.contributionTier,
-      cardToken: cardToken ? 'present' : 'null'
-    })
-    
-    const response = await $fetch('/api/helcim/subscription', {
-      method: 'POST',
+      cardToken: cardToken ? "present" : "null",
+    });
+
+    const response = await $fetch("/api/helcim/subscription", {
+      method: "POST",
       body: {
         customerId: customerId.value,
         customerCode: customerCode.value,
         contributionTier: form.contributionTier,
-        cardToken: cardToken
-      }
-    })
-    
-    console.log('Subscription creation response:', response)
-    
+        cardToken: cardToken,
+      },
+    });
+
+    console.log("Subscription creation response:", response);
+
     if (response.success) {
-      subscriptionData.value = response.subscription
-      console.log('Moving to step 3 - success!')
-      currentStep.value = 3
-      successMessage.value = 'Your membership has been activated successfully!'
-      
+      subscriptionData.value = response.subscription;
+      console.log("Moving to step 3 - success!");
+      currentStep.value = 3;
+      successMessage.value = "Your membership has been activated successfully!";
+
       // Check member status to ensure user is properly authenticated
-      await checkMemberStatus()
-      
+      await checkMemberStatus();
+
       // Automatically redirect to dashboard after a short delay
       setTimeout(() => {
-        navigateTo('/member/dashboard')
-      }, 3000) // 3 second delay to show success message
+        navigateTo("/member/dashboard");
+      }, 3000); // 3 second delay to show success message
     } else {
-      throw new Error('Subscription creation failed - response not successful')
+      throw new Error("Subscription creation failed - response not successful");
     }
   } catch (error) {
-    console.error('Subscription creation error:', error)
-    console.error('Error details:', {
+    console.error("Subscription creation error:", error);
+    console.error("Error details:", {
       message: error.message,
       statusCode: error.statusCode,
       statusMessage: error.statusMessage,
-      data: error.data
-    })
-    console.error('Subscription creation completely failed, but payment was successful')
+      data: error.data,
+    });
+    console.error(
+      "Subscription creation completely failed, but payment was successful",
+    );
     // Don't throw error - let the calling function handle progression
     return {
       success: false,
-      error: error.data?.message || error.message || 'Failed to create subscription'
-    }
+      error:
+        error.data?.message || error.message || "Failed to create subscription",
+    };
   }
-}
+};
 
 // Go back to previous step
 const goBack = () => {
   if (currentStep.value > 1) {
-    currentStep.value--
-    errorMessage.value = ''
+    currentStep.value--;
+    errorMessage.value = "";
   }
-}
+};
 
 // Reset form
 const resetForm = () => {
-  currentStep.value = 1
-  customerId.value = null
-  customerCode.value = null
-  subscriptionData.value = null
-  paymentToken.value = null
-  errorMessage.value = ''
-  successMessage.value = ''
-  form.email = ''
-  form.name = ''
-  form.circle = 'community'
-  form.contributionTier = '15'
-}
+  currentStep.value = 1;
+  customerId.value = null;
+  customerCode.value = null;
+  subscriptionData.value = null;
+  paymentToken.value = null;
+  errorMessage.value = "";
+  successMessage.value = "";
+  form.email = "";
+  form.name = "";
+  form.circle = "community";
+  form.contributionTier = "15";
+};
 
 // Cleanup on unmount
 onUnmounted(() => {
-  cleanupHelcimPay()
-})
-</script>
\ No newline at end of file
+  cleanupHelcimPay();
+});
+</script>
diff --git a/app/pages/member/dashboard.vue b/app/pages/member/dashboard.vue
index 70e53ff..1a6093a 100644
--- a/app/pages/member/dashboard.vue
+++ b/app/pages/member/dashboard.vue
@@ -1,161 +1,639 @@
 <template>
   <div>
     <!-- Page Header -->
-    <PageHeader 
+    <PageHeader
       title="Member Dashboard"
       :subtitle="`Welcome back, ${memberData?.name || 'Member'}!`"
       theme="blue"
       size="medium"
     />
 
-    <section class="py-12 bg-white dark:bg-gray-900">
-      <UContainer>
-        <div v-if="!memberData || authPending" class="flex justify-center items-center py-20">
-          <div class="text-center">
-            <div class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-            <p class="text-gray-600 dark:text-gray-400">Loading your dashboard...</p>
-          </div>
+    <UContainer class="py-12">
+      <!-- Loading State -->
+      <div
+        v-if="!memberData || authPending"
+        class="flex justify-center items-center py-20"
+      >
+        <div class="text-center">
+          <div
+            class="w-8 h-8 border-4 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+          ></div>
+          <p class="text-stone-300">Loading your dashboard...</p>
         </div>
+      </div>
 
-        <div v-else class="space-y-8">
-          <!-- Welcome Section -->
-          <div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8">
-            <div class="flex items-start justify-between">
-              <div>
-                <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">
+      <!-- Dashboard Content -->
+      <div v-else class="space-y-8">
+        <!-- Welcome Card -->
+        <UCard
+          class="sparkle-field"
+          :ui="{
+            root: 'bg-ghost-900 border border-ghost-700',
+            header: 'border-b border-ghost-700',
+            body: 'bg-ghost-900',
+          }"
+        >
+          <template #header>
+            <div class="flex items-start justify-between gap-4">
+              <div class="flex-1">
+                <h1 class="text-2xl font-bold text-stone-100 ethereal-text">
                   Welcome to Ghost Guild, {{ memberData?.name }}!
                 </h1>
-                <p class="text-gray-600 dark:text-gray-300 mb-4">
-                  Your membership is active and you're part of our cooperative community.
+                <p class="text-stone-300 mt-2">
+                  Your membership is active and you're part of our cooperative
+                  community.
                 </p>
-                <div class="flex flex-wrap gap-4 text-sm">
-                  <div class="bg-white dark:bg-gray-800 rounded-lg px-4 py-2 border">
-                    <span class="text-gray-500">Circle:</span>
-                    <span class="font-medium text-blue-600 dark:text-blue-400 ml-1 capitalize">{{ memberData?.circle }}</span>
-                  </div>
-                  <div class="bg-white dark:bg-gray-800 rounded-lg px-4 py-2 border">
-                    <span class="text-gray-500">Contribution:</span>
-                    <span class="font-medium text-green-600 dark:text-green-400 ml-1">${{ memberData?.contributionTier }} CAD/month</span>
-                  </div>
-                </div>
               </div>
-              <div class="flex-shrink-0">
-                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">
+              <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-ghost-700 border border-ghost-600 flex items-center justify-center text-stone-200 font-bold text-xl"
+                >
                   {{ memberData?.name?.charAt(0)?.toUpperCase() }}
                 </div>
               </div>
             </div>
-          </div>
+          </template>
 
-          <!-- Quick Actions -->
-          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
-              <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-4">
-                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                </svg>
+          <div class="flex flex-wrap gap-4 text-sm">
+            <div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
+              <span class="text-stone-400">Circle:</span>
+              <span class="font-medium text-whisper-300 ml-1 capitalize">{{
+                memberData?.circle
+              }}</span>
+            </div>
+            <div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
+              <span class="text-stone-400">Contribution:</span>
+              <span class="font-medium text-whisper-300 ml-1"
+                >${{ memberData?.contributionTier }} CAD/month</span
+              >
+            </div>
+          </div>
+        </UCard>
+
+        <!-- Quick Links -->
+        <UCard
+          :ui="{
+            root: 'bg-ghost-900 border border-ghost-700',
+            header: 'border-b border-ghost-700 bg-ghost-900',
+            body: 'bg-ghost-900',
+          }"
+        >
+          <template #header>
+            <h2 class="text-xl font-bold text-stone-100 ethereal-text">
+              Quick Links
+            </h2>
+          </template>
+
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            <UButton
+              to="/member/my-updates"
+              variant="outline"
+              class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
+              block
+            >
+              <template #leading>
+                <Icon name="heroicons:pencil-square" class="w-5 h-5" />
+              </template>
+              Post an Update
+            </UButton>
+
+            <UButton
+              disabled
+              variant="outline"
+              class="border-ghost-600 text-stone-500 cursor-not-allowed justify-start"
+              block
+              title="Coming soon"
+            >
+              <template #leading>
+                <Icon name="heroicons:calendar-days" class="w-5 h-5" />
+              </template>
+              Propose an Event
+            </UButton>
+
+            <UButton
+              disabled
+              variant="outline"
+              class="border-ghost-600 text-stone-500 cursor-not-allowed justify-start"
+              block
+              title="Coming soon"
+            >
+              <template #leading>
+                <Icon name="heroicons:user-group" class="w-5 h-5" />
+              </template>
+              Book a Peer Session
+            </UButton>
+
+            <UButton
+              disabled
+              variant="outline"
+              class="border-ghost-600 text-stone-500 cursor-not-allowed justify-start"
+              block
+              title="Coming soon"
+            >
+              <template #leading>
+                <Icon name="heroicons:book-open" class="w-5 h-5" />
+              </template>
+              Browse Resources
+            </UButton>
+
+            <UButton
+              to="/member/profile"
+              variant="outline"
+              class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
+              block
+            >
+              <template #leading>
+                <Icon name="heroicons:user-circle" class="w-5 h-5" />
+              </template>
+              Update Profile
+            </UButton>
+          </div>
+        </UCard>
+
+        <!-- Quick Actions Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <UCard
+            :ui="{
+              root: 'bg-ghost-900 border border-ghost-700 hover:border-whisper-600 transition-colors',
+              header: 'border-b-0',
+              body: 'bg-ghost-900',
+              footer: 'border-t-0 bg-ghost-900',
+            }"
+            class="hover:border-whisper-600 transition-colors"
+          >
+            <template #header>
+              <div
+                class="w-12 h-12 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
+              >
+                <Icon
+                  name="heroicons:calendar-days"
+                  class="w-6 h-6 text-whisper-400"
+                />
               </div>
-              <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
-                Upcoming Events
-              </h3>
-              <p class="text-gray-600 dark:text-gray-400 mb-4">
-                Discover and register for community events and workshops.
-              </p>
-              <UButton to="/events" variant="outline" size="sm">
+            </template>
+
+            <h3 class="text-lg font-semibold mb-2 text-stone-100">
+              Upcoming Events
+            </h3>
+            <p class="text-stone-300 mb-4">
+              Discover and register for community events and workshops.
+            </p>
+
+            <template #footer>
+              <UButton
+                to="/events"
+                variant="outline"
+                size="sm"
+                class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500"
+              >
                 View Events
               </UButton>
-            </div>
+            </template>
+          </UCard>
 
-            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
-              <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center mb-4">
-                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                </svg>
+          <UCard
+            :ui="{
+              root: 'bg-ghost-900 border border-ghost-700 hover:border-whisper-600 transition-colors',
+              header: 'border-b-0',
+              body: 'bg-ghost-900',
+              footer: 'border-t-0 bg-ghost-900',
+            }"
+          >
+            <template #header>
+              <div
+                class="w-12 h-12 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
+              >
+                <Icon
+                  name="heroicons:user-group"
+                  class="w-6 h-6 text-whisper-400"
+                />
               </div>
-              <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
-                Community
-              </h3>
-              <p class="text-gray-600 dark:text-gray-400 mb-4">
-                Connect with other members in your circle and beyond.
-              </p>
-              <UButton to="/members" variant="outline" size="sm">
+            </template>
+
+            <h3 class="text-lg font-semibold mb-2 text-stone-100">Community</h3>
+            <p class="text-stone-300 mb-4">
+              Connect with other members in your circle and beyond.
+            </p>
+
+            <template #footer>
+              <UButton
+                to="/members"
+                variant="outline"
+                size="sm"
+                class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500"
+              >
                 Browse Members
               </UButton>
-            </div>
+            </template>
+          </UCard>
 
-            <div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg border border-gray-200 dark:border-gray-700">
-              <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-4">
-                <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                </svg>
+          <UCard
+            :ui="{
+              root: 'bg-ghost-900 border border-ghost-700 hover:border-whisper-600 transition-colors',
+              header: 'border-b-0',
+              body: 'bg-ghost-900',
+              footer: 'border-t-0 bg-ghost-900',
+            }"
+          >
+            <template #header>
+              <div
+                class="w-12 h-12 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
+              >
+                <Icon
+                  name="heroicons:cog-6-tooth"
+                  class="w-6 h-6 text-whisper-400"
+                />
               </div>
-              <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-white">
-                Account Settings
-              </h3>
-              <p class="text-gray-600 dark:text-gray-400 mb-4">
-                Manage your profile and membership settings.
-              </p>
-              <UButton variant="outline" size="sm" disabled>
-                Coming Soon
+            </template>
+
+            <h3 class="text-lg font-semibold mb-2 text-stone-100">
+              Account Settings
+            </h3>
+            <p class="text-stone-300 mb-4">
+              Manage your profile and membership settings.
+            </p>
+
+            <template #footer>
+              <UButton
+                to="/member/profile#account"
+                variant="outline"
+                size="sm"
+                class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500"
+              >
+                Manage Account
+              </UButton>
+            </template>
+          </UCard>
+        </div>
+
+        <!-- Your Registered Events -->
+        <UCard
+          :ui="{
+            root: 'bg-ghost-900 border border-ghost-700',
+            header: 'border-b border-ghost-700 bg-ghost-900',
+            body: 'bg-ghost-900',
+          }"
+        >
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h2 class="text-xl font-bold text-stone-100 ethereal-text">
+                Your Upcoming Events
+              </h2>
+              <UButton
+                to="/events"
+                variant="ghost"
+                size="sm"
+                class="text-stone-300 hover:text-stone-100"
+              >
+                Browse All Events
               </UButton>
             </div>
+          </template>
+
+          <div v-if="loadingEvents" class="text-center py-8">
+            <div
+              class="w-6 h-6 border-2 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto"
+            ></div>
           </div>
 
-          <!-- Recent Activity (Placeholder) -->
-          <div class="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg border border-gray-200 dark:border-gray-700">
-            <h2 class="text-xl font-bold mb-6 text-gray-900 dark:text-white">
-              Recent Activity
-            </h2>
-            <div class="text-center py-12">
-              <svg class="w-16 h-16 text-gray-300 dark:text-gray-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-              </svg>
-              <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-2">
-                No recent activity
-              </h3>
-              <p class="text-gray-500 dark:text-gray-400">
-                Your activity and event history will appear here as you participate in the community.
-              </p>
+          <div v-else-if="registeredEvents.length" class="space-y-4">
+            <NuxtLink
+              v-for="evt in registeredEvents"
+              :key="evt._id"
+              :to="`/events/${evt.slug || evt._id}`"
+              class="block p-4 border border-ghost-700 hover:border-whisper-500 transition-colors"
+            >
+              <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-ghost-800 border border-ghost-600 flex items-center justify-center"
+                >
+                  <Icon
+                    name="heroicons:calendar-days"
+                    class="w-8 h-8 text-whisper-400"
+                  />
+                </div>
+                <div class="flex-1 min-w-0">
+                  <h3 class="font-semibold text-stone-100 mb-1">
+                    {{ evt.title }}
+                  </h3>
+                  <div class="flex items-center gap-4 text-sm text-stone-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-stone-500"
+                  />
+                </div>
+              </div>
+            </NuxtLink>
+          </div>
+
+          <div v-else class="text-center py-8">
+            <Icon
+              name="heroicons:calendar-days"
+              class="w-12 h-12 text-stone-600 mx-auto mb-3"
+            />
+            <p class="text-stone-400 mb-4">
+              You haven't registered for any upcoming events
+            </p>
+            <UButton
+              to="/events"
+              size="sm"
+              class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500"
+            >
+              Browse Events
+            </UButton>
+          </div>
+        </UCard>
+
+        <!-- Community Pulse - Recent Updates -->
+        <UCard
+          class="sparkle-field"
+          :ui="{
+            root: 'bg-ghost-900 border border-ghost-700',
+            header: 'border-b border-ghost-700 bg-ghost-900',
+            body: 'bg-ghost-900',
+          }"
+        >
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h2 class="text-xl font-bold text-stone-100 ethereal-text">
+                Community Pulse
+              </h2>
+              <UButton
+                to="/updates"
+                variant="ghost"
+                size="sm"
+                class="text-stone-300 hover:text-stone-100"
+              >
+                View All
+              </UButton>
+            </div>
+          </template>
+
+          <div v-if="loadingUpdates" class="text-center py-8">
+            <div
+              class="w-6 h-6 border-2 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto"
+            ></div>
+          </div>
+
+          <div v-else-if="recentUpdates.length" class="space-y-4">
+            <div
+              v-for="update in recentUpdates"
+              :key="update._id"
+              class="border-l-2 border-ghost-600 pl-4 py-2"
+            >
+              <div class="flex items-start gap-3">
+                <img
+                  v-if="
+                    update.author?.avatar && isValidAvatar(update.author.avatar)
+                  "
+                  :src="`/ghosties/Ghost-${capitalize(update.author.avatar)}.png`"
+                  :alt="update.author.name"
+                  class="w-8 h-8 flex-shrink-0"
+                />
+                <div
+                  v-else-if="update.author?.name"
+                  class="w-8 h-8 bg-ghost-700 border border-ghost-600 flex items-center justify-center text-stone-200 text-xs font-bold flex-shrink-0"
+                >
+                  {{ update.author.name.charAt(0).toUpperCase() }}
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-baseline gap-2 mb-1">
+                    <span class="font-semibold text-stone-100 text-sm">
+                      {{ update.author?.name }}
+                    </span>
+                    <span class="text-xs text-stone-500">
+                      {{ formatTimeAgo(update.createdAt) }}
+                    </span>
+                  </div>
+                  <p class="text-stone-300 text-sm line-clamp-2">
+                    {{ update.content }}
+                  </p>
+                  <NuxtLink
+                    :to="`/updates/${update._id}`"
+                    class="text-xs text-whisper-400 hover:text-whisper-300 mt-1 inline-block"
+                  >
+                    Read more
+                  </NuxtLink>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
-      </UContainer>
-    </section>
+
+          <div v-else class="text-center py-8">
+            <p class="text-stone-400 mb-4">No community updates yet</p>
+            <UButton
+              to="/updates/new"
+              size="sm"
+              variant="outline"
+              class="border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500"
+            >
+              Post the First Update
+            </UButton>
+          </div>
+        </UCard>
+      </div>
+    </UContainer>
   </div>
 </template>
 
 <script setup>
-const { memberData, checkMemberStatus } = useAuth()
+const { memberData, checkMemberStatus } = useAuth();
+
+const recentUpdates = ref([]);
+const loadingUpdates = ref(false);
+const registeredEvents = ref([]);
+const loadingEvents = ref(false);
 
 // Handle authentication check on page load
-const { pending: authPending } = await useLazyAsyncData('dashboard-auth', async () => {
-  // Only check authentication on client side
-  if (process.server) return null
-  
-  console.log('📊 Dashboard auth check - memberData exists:', !!memberData.value)
-  
-  // If no member data, try to authenticate
-  if (!memberData.value) {
-    console.log('  - No member data, checking authentication...')
-    const isAuthenticated = await checkMemberStatus()
-    console.log('  - Auth result:', isAuthenticated)
-    
-    if (!isAuthenticated) {
-      console.log('  - Redirecting to login')
-      await navigateTo('/login')
-      return null
+const { pending: authPending } = await useLazyAsyncData(
+  "dashboard-auth",
+  async () => {
+    // Only check authentication on client side
+    if (process.server) return null;
+
+    console.log(
+      "📊 Dashboard auth check - memberData exists:",
+      !!memberData.value,
+    );
+
+    // If no member data, try to authenticate
+    if (!memberData.value) {
+      console.log("  - No member data, checking authentication...");
+      const isAuthenticated = await checkMemberStatus();
+      console.log("  - Auth result:", isAuthenticated);
+
+      if (!isAuthenticated) {
+        console.log("  - Redirecting to login");
+        await navigateTo("/login");
+        return null;
+      }
     }
+
+    console.log("  - ✅ Dashboard auth successful");
+    return memberData.value;
+  },
+);
+
+// Load recent updates
+const loadRecentUpdates = async () => {
+  loadingUpdates.value = true;
+  try {
+    const response = await $fetch("/api/updates", {
+      params: { limit: 5, skip: 0 },
+    });
+    recentUpdates.value = response.updates;
+  } catch (error) {
+    console.error("Failed to load recent updates:", error);
+  } finally {
+    loadingUpdates.value = false;
   }
-  
-  console.log('  - ✅ Dashboard auth successful')
-  return memberData.value
-})
+};
+
+// Load registered events
+const loadRegisteredEvents = async () => {
+  console.log(
+    "🔍 memberData.value:",
+    JSON.stringify(memberData.value, null, 2),
+  );
+  console.log("🔍 memberData.value._id:", memberData.value?._id);
+  console.log("🔍 memberData.value.id:", memberData.value?.id);
+
+  const memberId = memberData.value?._id || memberData.value?.id;
+
+  if (!memberId) {
+    console.log("❌ No member ID available");
+    return;
+  }
+
+  console.log("📅 Loading events for member:", memberId);
+  loadingEvents.value = true;
+  try {
+    const response = await $fetch("/api/members/my-events", {
+      params: { memberId },
+    });
+    console.log("📅 Events response:", response);
+    registeredEvents.value = response.events;
+  } catch (error) {
+    console.error("Failed to load registered events:", error);
+  } finally {
+    loadingEvents.value = false;
+  }
+};
+
+// Valid ghost avatar options
+const validAvatars = [
+  "disbelieving",
+  "double-take",
+  "exasperated",
+  "mild",
+  "sweet",
+];
+
+const isValidAvatar = (avatar) => {
+  if (!avatar) return false;
+  return validAvatars.includes(avatar.toLowerCase());
+};
+
+const capitalize = (str) => {
+  if (!str) return "";
+  // Handle kebab-case or multi-word avatars (e.g., "double-take" -> "Double-Take")
+  return str
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join("-");
+};
+
+const formatTimeAgo = (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)}m ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)}h ago`;
+  if (diffInSeconds < 604800)
+    return `${Math.floor(diffInSeconds / 86400)}d ago`;
+
+  return updateDate.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+  });
+};
+
+// Helper functions for event display
+const getEventImageUrl = (featureImage) => {
+  if (!featureImage) return "";
+
+  if (featureImage.url) {
+    return featureImage.url;
+  }
+
+  if (featureImage.publicId) {
+    const config = useRuntimeConfig();
+    return `https://res.cloudinary.com/${config.public.cloudinaryCloudName}/image/upload/w_200,h_200,c_fill,f_auto,q_auto/${featureImage.publicId}`;
+  }
+
+  return "";
+};
+
+const formatEventDate = (dateString) => {
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(date);
+};
+
+const formatEventTime = (dateString) => {
+  const date = new Date(dateString);
+  return new Intl.DateTimeFormat("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  }).format(date);
+};
+
+onMounted(() => {
+  loadRecentUpdates();
+  loadRegisteredEvents();
+});
 
 // Set page meta
 useHead({
-  title: 'Member Dashboard - Ghost Guild'
-})
+  title: "Member Dashboard - Ghost Guild",
+});
 
 // Removed middleware - handling auth directly in the page component
-</script>
\ No newline at end of file
+</script>
diff --git a/app/pages/member/my-updates.vue b/app/pages/member/my-updates.vue
new file mode 100644
index 0000000..9a900ce
--- /dev/null
+++ b/app/pages/member/my-updates.vue
@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <PageHeader
+      title="My Updates"
+      subtitle="View and manage your updates"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- Stats -->
+        <div v-if="!pending" class="mb-8 flex items-center justify-between">
+          <div class="text-stone-300">
+            <span class="text-2xl font-bold text-stone-100">{{ total }}</span>
+            {{ total === 1 ? "update" : "updates" }} posted
+          </div>
+          <UButton to="/updates/new" icon="i-lucide-plus"> New Update </UButton>
+        </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-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading your updates...</p>
+          </div>
+        </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"
+          />
+
+          <!-- Load More -->
+          <div v-if="hasMore" class="flex justify-center pt-4">
+            <UButton
+              variant="outline"
+              color="neutral"
+              :loading="loadingMore"
+              @click="loadMore"
+            >
+              Load More
+            </UButton>
+          </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-stone-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"
+              />
+            </svg>
+          </div>
+          <h3 class="text-lg font-medium text-stone-300 mb-2">
+            No updates yet
+          </h3>
+          <p class="text-stone-400 mb-6">
+            Share your first update with the community
+          </p>
+          <UButton to="/updates/new" icon="i-lucide-plus">
+            Post Your First Update
+          </UButton>
+        </div>
+      </UContainer>
+    </section>
+
+    <!-- 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>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup>
+const { isAuthenticated, checkMemberStatus } = useAuth();
+
+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);
+
+// Check authentication
+onMounted(async () => {
+  if (!isAuthenticated.value) {
+    const authenticated = await checkMemberStatus();
+    if (!authenticated) {
+      await navigateTo("/login");
+      return;
+    }
+  }
+
+  await loadUpdates();
+});
+
+// Load updates
+const loadUpdates = async () => {
+  pending.value = true;
+  try {
+    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;
+  } catch (error) {
+    console.error("Failed to load updates:", error);
+  } finally {
+    pending.value = false;
+  }
+};
+
+// Load more updates
+const loadMore = async () => {
+  loadingMore.value = true;
+  try {
+    const response = await $fetch("/api/updates/my-updates", {
+      params: { limit: 20, skip: updates.value.length },
+    });
+    updates.value.push(...response.updates);
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load more updates:", error);
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+// Handle edit
+const handleEdit = (update) => {
+  navigateTo(`/updates/${update._id}/edit`);
+};
+
+// Handle delete
+const handleDelete = (update) => {
+  updateToDelete.value = update;
+  showDeleteModal.value = true;
+};
+
+// Confirm delete
+const confirmDelete = async () => {
+  if (!updateToDelete.value) return;
+
+  deleting.value = true;
+  try {
+    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
+      method: "DELETE",
+    });
+
+    // Remove from list
+    updates.value = updates.value.filter(
+      (u) => u._id !== updateToDelete.value._id,
+    );
+    total.value--;
+
+    showDeleteModal.value = false;
+    updateToDelete.value = null;
+  } catch (error) {
+    console.error("Failed to delete update:", error);
+    alert("Failed to delete update. Please try again.");
+  } finally {
+    deleting.value = false;
+  }
+};
+
+useHead({
+  title: "My Updates - Ghost Guild",
+});
+</script>
diff --git a/app/pages/member/profile.vue b/app/pages/member/profile.vue
new file mode 100644
index 0000000..b2e96c7
--- /dev/null
+++ b/app/pages/member/profile.vue
@@ -0,0 +1,1273 @@
+<template>
+  <div>
+    <PageHeader
+      title="Your Profile"
+      subtitle="Manage your profile information and privacy settings"
+      theme="blue"
+      size="medium"
+    />
+
+    <section class="py-12">
+      <UContainer>
+        <div
+          v-if="!memberData || loading"
+          class="flex justify-center items-center py-20"
+        >
+          <div class="text-center">
+            <div
+              class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading your profile...</p>
+          </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-2xl font-semibold mb-8 text-stone-100 ethereal-text"
+                  >
+                    Basic Information
+                  </h2>
+
+                  <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"
+                        disabled
+                      />
+                    </UFormField>
+
+                    <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"
+                          />
+                        </UFormField>
+                        <PrivacyToggle
+                          v-model="formData.pronounsPrivacy"
+                          class="mt-2"
+                        />
+                      </div>
+
+                      <div>
+                        <UFormField
+                          label="Time Zone"
+                          name="timeZone"
+                          description="Helps coordinate meetings"
+                        >
+                          <UInput
+                            v-model="formData.timeZone"
+                            placeholder="e.g., America/Toronto"
+                          />
+                        </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-blue-400 bg-blue-500/20'
+                                : 'border-stone-700 bg-stone-800/50 hover:border-stone-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-blue-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-2xl font-semibold mb-8 text-stone-100 ethereal-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"
+                          />
+                        </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"
+                          />
+                        </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
+                        />
+                      </UFormField>
+                      <PrivacyToggle
+                        v-model="formData.bioPrivacy"
+                        class="mt-2"
+                      />
+                    </div>
+
+                    <div>
+                      <UFormField
+                        label="Skills"
+                        name="skills"
+                        description="Add your skills (press Enter or comma to add)"
+                      >
+                        <div class="space-y-3">
+                          <UInput
+                            v-model="currentSkillInput"
+                            placeholder="Type a skill and press Enter"
+                            @keydown.enter.prevent="addSkill"
+                            @keydown.comma.prevent="addSkill"
+                          />
+                          <div
+                            v-if="formData.skills?.length"
+                            class="flex flex-wrap gap-2"
+                          >
+                            <span
+                              v-for="(skill, index) in formData.skills"
+                              :key="skill"
+                              class="px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm border border-blue-500/30 flex items-center gap-2 group hover:bg-blue-500/30 transition-colors cursor-pointer"
+                              @click="removeSkill(index)"
+                            >
+                              {{ skill }}
+                              <span class="opacity-50 group-hover:opacity-100"
+                                >×</span
+                              >
+                            </span>
+                          </div>
+                        </div>
+                      </UFormField>
+                      <PrivacyToggle
+                        v-model="formData.skillsPrivacy"
+                        class="mt-2"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Community Connections -->
+                <div>
+                  <h2
+                    class="text-2xl font-semibold mb-8 text-stone-100 ethereal-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"
+                      >
+                        <UTextarea
+                          v-model="formData.offering"
+                          placeholder="e.g., Mentorship in game design, playtesting, technical advice..."
+                          :rows="3"
+                          autoresize
+                        />
+                      </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"
+                      >
+                        <UTextarea
+                          v-model="formData.lookingFor"
+                          placeholder="e.g., Co-founder for studio, help with publishing, feedback on project..."
+                          :rows="3"
+                          autoresize
+                        />
+                      </UFormField>
+                      <PrivacyToggle
+                        v-model="formData.lookingForPrivacy"
+                        class="mt-2"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Social Links -->
+                <div>
+                  <h2
+                    class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
+                  >
+                    Social Links
+                  </h2>
+
+                  <div class="space-y-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                      <UFormField label="Mastodon" name="mastodon">
+                        <UInput
+                          v-model="formData.socialLinks.mastodon"
+                          placeholder="@username@instance.social"
+                        />
+                      </UFormField>
+
+                      <UFormField label="LinkedIn" name="linkedin">
+                        <UInput
+                          v-model="formData.socialLinks.linkedin"
+                          placeholder="https://linkedin.com/in/username"
+                        />
+                      </UFormField>
+
+                      <UFormField label="Website" name="website">
+                        <UInput
+                          v-model="formData.socialLinks.website"
+                          placeholder="https://yourwebsite.com"
+                        />
+                      </UFormField>
+
+                      <UFormField label="Other" name="other">
+                        <UInput
+                          v-model="formData.socialLinks.other"
+                          placeholder="Any other relevant link"
+                        />
+                      </UFormField>
+                    </div>
+
+                    <PrivacyToggle
+                      v-model="formData.socialLinksPrivacy"
+                      label="Privacy for all social links"
+                    />
+                  </div>
+                </div>
+
+                <!-- Directory Settings -->
+                <div>
+                  <h2
+                    class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
+                  >
+                    Directory Visibility
+                  </h2>
+
+                  <div class="flex items-start gap-4">
+                    <USwitch v-model="formData.showInDirectory" />
+                    <div>
+                      <p class="font-medium text-stone-200">
+                        Show in Member Directory
+                      </p>
+                      <p class="text-sm text-stone-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-green-500/10 border border-green-500/30 rounded-lg p-4"
+                >
+                  <p class="text-green-300">✓ Profile updated successfully!</p>
+                </div>
+
+                <div
+                  v-if="saveError"
+                  class="backdrop-blur-sm bg-red-500/10 border border-red-500/30 rounded-lg p-4"
+                >
+                  <p class="text-red-300">
+                    {{ saveError }}
+                  </p>
+                </div>
+
+                <!-- Actions -->
+                <div
+                  class="flex justify-between items-center pt-4 border-t border-ghost-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 #updates>
+              <div class="mt-8">
+                <!-- Loading State -->
+                <div
+                  v-if="loadingUpdates && !myUpdates.length"
+                  class="flex justify-center items-center py-20"
+                >
+                  <div class="text-center">
+                    <div
+                      class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+                    ></div>
+                    <p class="text-stone-400">Loading your updates...</p>
+                  </div>
+                </div>
+
+                <!-- Updates List -->
+                <div v-else-if="myUpdates.length" class="space-y-6">
+                  <UpdateCard
+                    v-for="update in myUpdates"
+                    :key="update._id"
+                    :update="update"
+                    :show-preview="true"
+                    @edit="handleEditUpdate"
+                    @delete="handleDeleteUpdate"
+                  />
+
+                  <!-- Load More -->
+                  <div v-if="hasMoreUpdates" class="flex justify-center pt-4">
+                    <UButton
+                      variant="outline"
+                      color="neutral"
+                      :loading="loadingMoreUpdates"
+                      @click="loadMoreUpdates"
+                    >
+                      Load More
+                    </UButton>
+                  </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-stone-600"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                      />
+                    </svg>
+                  </div>
+                  <h3 class="text-lg font-medium text-stone-300 mb-2">
+                    No updates yet
+                  </h3>
+                  <p class="text-stone-400 mb-6">
+                    Share your first update with the community!
+                  </p>
+                  <UButton to="/updates/new"> Post Your First Update </UButton>
+                </div>
+              </div>
+            </template>
+
+            <template #account>
+              <div class="space-y-8 mt-8">
+                <!-- Current Membership -->
+                <div>
+                  <h2
+                    class="text-2xl font-semibold mb-6 text-stone-100 ethereal-text"
+                  >
+                    Current Membership
+                  </h2>
+
+                  <div
+                    class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6 space-y-4"
+                  >
+                    <div class="flex items-start justify-between">
+                      <div>
+                        <p class="text-sm text-stone-400">Circle</p>
+                        <p
+                          class="text-lg font-medium text-stone-100 capitalize"
+                        >
+                          {{ memberData.circle }}
+                        </p>
+                      </div>
+                      <div>
+                        <p class="text-sm text-stone-400">Contribution Level</p>
+                        <p class="text-lg font-medium text-stone-100">
+                          ${{ contributionTierDetails?.amount }}/month
+                        </p>
+                      </div>
+                    </div>
+
+                    <div v-if="memberData.subscriptionStartDate">
+                      <p class="text-sm text-stone-400">Member Since</p>
+                      <p class="text-stone-100">
+                        {{ formatDate(memberData.subscriptionStartDate) }}
+                      </p>
+                    </div>
+
+                    <div
+                      v-if="
+                        memberData.nextBillingDate &&
+                        memberData.contributionTier !== '0'
+                      "
+                    >
+                      <p class="text-sm text-stone-400">Next Billing Date</p>
+                      <p class="text-stone-100">
+                        {{ formatDate(memberData.nextBillingDate) }}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Change Contribution Level -->
+                <div>
+                  <h2
+                    class="text-2xl font-semibold mb-6 text-stone-100 ethereal-text"
+                  >
+                    Change Contribution Level
+                  </h2>
+
+                  <div
+                    class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6"
+                  >
+                    <p class="text-stone-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-blue-400 bg-blue-500/20'
+                            : 'border-stone-600 bg-stone-900/30 hover:border-stone-500',
+                        ]"
+                        @click="selectedContributionTier = tier.value"
+                      >
+                        <div class="flex items-center justify-between">
+                          <div>
+                            <p class="font-medium text-stone-100">
+                              {{ tier.label }}
+                            </p>
+                            <p class="text-sm text-stone-400 mt-1">
+                              {{ tier.features[0] }}
+                            </p>
+                          </div>
+                          <div
+                            v-if="selectedContributionTier === tier.value"
+                            class="w-6 h-6 bg-blue-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-red-500/10 border border-red-500/30 rounded-lg p-4"
+                    >
+                      <p class="text-red-300">{{ contributionChangeError }}</p>
+                    </div>
+
+                    <div
+                      v-if="contributionChangeSuccess"
+                      class="mb-4 backdrop-blur-sm bg-green-500/10 border border-green-500/30 rounded-lg p-4"
+                    >
+                      <p class="text-green-300">
+                        ✓ 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-2xl font-semibold mb-6 text-stone-100 ethereal-text"
+                  >
+                    Cancel Membership
+                  </h2>
+
+                  <div
+                    class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6"
+                  >
+                    <p class="text-stone-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-stone-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>
+              </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>
+            </template>
+          </UModal>
+
+          <!-- Delete Update Modal -->
+          <UModal
+            v-model:open="showDeleteUpdateModal"
+            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="showDeleteUpdateModal = false"
+                >
+                  Cancel
+                </UButton>
+                <UButton
+                  color="red"
+                  :loading="deletingUpdate"
+                  @click="confirmDeleteUpdate"
+                >
+                  Delete
+                </UButton>
+              </div>
+            </template>
+          </UModal>
+        </div>
+      </UContainer>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const { memberData, checkMemberStatus } = useAuth();
+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: "My Updates",
+    slot: "updates",
+    value: "updates",
+  },
+  {
+    label: "Account",
+    slot: "account",
+    value: "account",
+  },
+];
+
+// 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",
+  },
+];
+
+// Form state
+const formData = reactive({
+  name: "",
+  pronouns: "",
+  timeZone: "",
+  avatar: "",
+  studio: "",
+  bio: "",
+  skills: [],
+  location: "",
+  offering: "",
+  lookingFor: "",
+  socialLinks: {
+    mastodon: "",
+    linkedin: "",
+    website: "",
+    other: "",
+  },
+  showInDirectory: true,
+  // Privacy settings
+  pronounsPrivacy: "members",
+  timeZonePrivacy: "members",
+  avatarPrivacy: "public",
+  studioPrivacy: "members",
+  bioPrivacy: "members",
+  skillsPrivacy: "members",
+  locationPrivacy: "members",
+  offeringPrivacy: "members",
+  lookingForPrivacy: "members",
+  socialLinksPrivacy: "members",
+});
+
+const currentSkillInput = ref("");
+const loading = ref(false);
+const saving = ref(false);
+const saveSuccess = ref(false);
+const saveError = ref(null);
+const initialData = ref(null);
+
+// Updates state
+const myUpdates = ref([]);
+const loadingUpdates = ref(false);
+const loadingMoreUpdates = ref(false);
+const hasMoreUpdates = ref(false);
+const showDeleteUpdateModal = ref(false);
+const updateToDelete = ref(null);
+const deletingUpdate = ref(false);
+
+// 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("");
+
+// 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);
+});
+
+// Add skill
+const addSkill = () => {
+  const skill = currentSkillInput.value.trim().replace(/,$/, "");
+  if (skill && !formData.skills.includes(skill)) {
+    formData.skills.push(skill);
+    currentSkillInput.value = "";
+  }
+};
+
+// Remove skill
+const removeSkill = (index) => {
+  formData.skills.splice(index, 1);
+};
+
+// Load member data
+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.skills = memberData.value.skills || [];
+    formData.location = memberData.value.location || "";
+    formData.offering = memberData.value.offering || "";
+    formData.lookingFor = memberData.value.lookingFor || "";
+    formData.socialLinks = memberData.value.socialLinks || {
+      mastodon: "",
+      linkedin: "",
+      website: "",
+      other: "",
+    };
+    formData.showInDirectory = memberData.value.showInDirectory ?? true;
+
+    // Load privacy settings (with defaults)
+    const privacy = memberData.value.privacy || {};
+    formData.pronounsPrivacy = privacy.pronouns || "members";
+    formData.timeZonePrivacy = privacy.timeZone || "members";
+    formData.avatarPrivacy = privacy.avatar || "public";
+    formData.studioPrivacy = privacy.studio || "members";
+    formData.bioPrivacy = privacy.bio || "members";
+    formData.skillsPrivacy = privacy.skills || "members";
+    formData.locationPrivacy = privacy.location || "members";
+    formData.offeringPrivacy = privacy.offering || "members";
+    formData.lookingForPrivacy = privacy.lookingFor || "members";
+    formData.socialLinksPrivacy = privacy.socialLinks || "members";
+
+    // Store initial state for change detection
+    initialData.value = JSON.parse(JSON.stringify(formData));
+  }
+};
+
+// Handle form submission
+const handleSubmit = async () => {
+  saving.value = true;
+  saveSuccess.value = false;
+  saveError.value = null;
+
+  try {
+    await $fetch("/api/members/profile", {
+      method: "PATCH",
+      body: formData,
+    });
+
+    saveSuccess.value = true;
+
+    // Refresh member data
+    await checkMemberStatus();
+    loadProfile();
+
+    // Clear success message after 3 seconds
+    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.";
+  } finally {
+    saving.value = false;
+  }
+};
+
+// Reset form to initial state
+const resetForm = () => {
+  loadProfile();
+  saveSuccess.value = false;
+  saveError.value = null;
+};
+
+// Load user's updates
+const loadUpdates = async () => {
+  if (!memberData.value?.id) return;
+
+  loadingUpdates.value = true;
+  try {
+    const response = await $fetch(`/api/updates/user/${memberData.value.id}`, {
+      params: { limit: 20, skip: 0 },
+    });
+    myUpdates.value = response.updates;
+    hasMoreUpdates.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load updates:", error);
+  } finally {
+    loadingUpdates.value = false;
+  }
+};
+
+// Load more updates
+const loadMoreUpdates = async () => {
+  if (!memberData.value?.id) return;
+
+  loadingMoreUpdates.value = true;
+  try {
+    const response = await $fetch(`/api/updates/user/${memberData.value.id}`, {
+      params: { limit: 20, skip: myUpdates.value.length },
+    });
+    myUpdates.value.push(...response.updates);
+    hasMoreUpdates.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load more updates:", error);
+  } finally {
+    loadingMoreUpdates.value = false;
+  }
+};
+
+// Handle edit update
+const handleEditUpdate = (update) => {
+  navigateTo(`/updates/${update._id}/edit`);
+};
+
+// Handle delete update
+const handleDeleteUpdate = (update) => {
+  updateToDelete.value = update;
+  showDeleteUpdateModal.value = true;
+};
+
+// Confirm delete update
+const confirmDeleteUpdate = async () => {
+  if (!updateToDelete.value) return;
+
+  deletingUpdate.value = true;
+  try {
+    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
+      method: "DELETE",
+    });
+
+    // Remove from list
+    myUpdates.value = myUpdates.value.filter(
+      (u) => u._id !== updateToDelete.value._id,
+    );
+
+    showDeleteUpdateModal.value = false;
+    updateToDelete.value = null;
+  } catch (error) {
+    console.error("Failed to delete update:", error);
+    alert("Failed to delete update. Please try again.");
+  } finally {
+    deletingUpdate.value = false;
+  }
+};
+
+// 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
+      console.log("Upgrading from free to paid - showing payment popup");
+      await handlePaymentSetup();
+      console.log("Payment setup completed successfully, returning early");
+      return;
+    }
+
+    console.log("Calling update-contribution API");
+    // 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
+      console.log("Showing payment modal - payment setup required");
+      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;
+
+      console.log(
+        customerResponse.existing
+          ? "Using existing Helcim customer:"
+          : "Created new Helcim customer:",
+        customerId.value,
+      );
+    } 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();
+    console.log("Payment result:", paymentResult);
+
+    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;
+  }
+};
+
+// Initialize on mount
+onMounted(async () => {
+  if (!memberData.value) {
+    loading.value = true;
+    const isAuthenticated = await checkMemberStatus();
+    loading.value = false;
+
+    if (!isAuthenticated) {
+      await navigateTo("/login");
+      return;
+    }
+  }
+
+  loadProfile();
+  loadUpdates();
+  loadContributionOptions();
+  selectedContributionTier.value = memberData.value?.contributionTier || "";
+});
+
+useHead({
+  title: "Your Profile - Ghost Guild",
+});
+</script>
+
+<style scoped>
+/* Field labels - bright and readable */
+:deep(label) {
+  color: rgb(231 229 228) !important; /* stone-200 */
+  font-weight: 500;
+}
+
+/* Field descriptions - lighter gray for readability */
+:deep([class*="description"]) {
+  color: rgb(
+    168 162 158
+  ) !important; /* stone-400 - lighter than the dark background */
+  opacity: 0.9;
+}
+
+/* Full width inputs */
+:deep(input),
+:deep(textarea) {
+  width: 100% !important;
+}
+
+/* Input fields - ensure good contrast */
+:deep(input),
+:deep(textarea) {
+  background-color: rgb(41 37 36) !important; /* stone-800 */
+  color: rgb(231 229 228) !important; /* stone-200 */
+  border-color: rgb(87 83 78) !important; /* stone-600 */
+}
+
+:deep(input::placeholder),
+:deep(textarea::placeholder) {
+  color: rgb(120 113 108) !important; /* stone-500 */
+}
+
+:deep(input:focus),
+:deep(textarea:focus) {
+  border-color: rgb(147 197 253) !important; /* blue-300 */
+  background-color: rgb(44 40 39) !important; /* slightly lighter stone */
+}
+</style>
diff --git a/app/pages/members.vue b/app/pages/members.vue
new file mode 100644
index 0000000..eb84e64
--- /dev/null
+++ b/app/pages/members.vue
@@ -0,0 +1,400 @@
+<template>
+  <div>
+    <PageHeader
+      title="Member Directory"
+      subtitle="Connect with members of the Ghost Guild community"
+      theme="purple"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- Search and Filters -->
+        <div class="mb-8 space-y-4">
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <!-- Search -->
+            <div class="md:col-span-2">
+              <UInput
+                v-model="searchQuery"
+                placeholder="Search by name or bio..."
+                icon="i-heroicons-magnifying-glass"
+                size="lg"
+                @input="debouncedSearch"
+              />
+            </div>
+
+            <!-- Circle Filter -->
+            <USelect
+              v-model="selectedCircle"
+              :options="circleOptions"
+              placeholder="All Circles"
+              size="lg"
+              @change="loadMembers"
+            />
+          </div>
+
+          <!-- Skills Filter -->
+          <div v-if="availableSkills.length > 0">
+            <div class="flex flex-wrap gap-2">
+              <span class="text-sm text-stone-400 mr-2 self-center"
+                >Filter by skill:</span
+              >
+              <button
+                v-for="skill in availableSkills.slice(
+                  0,
+                  showAllSkills ? undefined : 10,
+                )"
+                :key="skill"
+                type="button"
+                class="px-3 py-1 rounded-full text-sm transition-all border"
+                :class="
+                  selectedSkills.includes(skill)
+                    ? 'bg-purple-500/20 text-purple-300 border-purple-500/50'
+                    : 'bg-stone-800/50 text-stone-400 border-stone-700 hover:border-stone-600'
+                "
+                @click="toggleSkill(skill)"
+              >
+                {{ skill }}
+              </button>
+              <button
+                v-if="availableSkills.length > 10"
+                type="button"
+                class="px-3 py-1 text-sm text-purple-400 hover:text-purple-300"
+                @click="showAllSkills = !showAllSkills"
+              >
+                {{
+                  showAllSkills
+                    ? "Show less"
+                    : `+${availableSkills.length - 10} more`
+                }}
+              </button>
+            </div>
+          </div>
+
+          <!-- Active Filters -->
+          <div
+            v-if="selectedCircle || selectedSkills.length > 0"
+            class="flex items-center gap-2 text-sm"
+          >
+            <span class="text-stone-400">Active filters:</span>
+            <span
+              v-if="selectedCircle"
+              class="px-2 py-1 bg-purple-500/20 text-purple-300 rounded-full border border-purple-500/30 flex items-center gap-1"
+            >
+              {{ circleLabels[selectedCircle] }}
+              <button
+                type="button"
+                class="hover:text-purple-200"
+                @click="clearCircleFilter"
+              >
+                ×
+              </button>
+            </span>
+            <button
+              v-if="selectedSkills.length > 0"
+              type="button"
+              class="text-purple-400 hover:text-purple-300"
+              @click="clearAllFilters"
+            >
+              Clear all filters
+            </button>
+          </div>
+        </div>
+
+        <!-- Loading State -->
+        <div
+          v-if="loading && !members.length"
+          class="flex justify-center items-center py-20"
+        >
+          <div class="text-center">
+            <div
+              class="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading members...</p>
+          </div>
+        </div>
+
+        <!-- Members List -->
+        <div v-else-if="members.length > 0">
+          <div class="mb-4 text-stone-400 text-sm">
+            {{ totalCount }} {{ totalCount === 1 ? "member" : "members" }} found
+          </div>
+
+          <div class="space-y-2">
+            <div
+              v-for="member in members"
+              :key="member._id"
+              class="backdrop-blur-sm bg-stone-900/50 border border-stone-700/50 rounded-lg p-4 hover:border-purple-500/50 transition-all group flex items-center gap-4"
+            >
+              <!-- Avatar -->
+              <div
+                class="w-12 h-12 rounded-lg bg-stone-800 border border-stone-700 flex items-center justify-center flex-shrink-0 group-hover:border-purple-500/50 transition-colors"
+              >
+                <img
+                  v-if="member.avatar"
+                  :src="`/ghosties/Ghost-${member.avatar.charAt(0).toUpperCase() + member.avatar.slice(1)}.png`"
+                  :alt="member.name"
+                  class="w-8 h-8 object-contain"
+                />
+                <span v-else class="text-xl text-stone-600">👻</span>
+              </div>
+
+              <!-- Name and Info -->
+              <div class="flex-1 min-w-0">
+                <div class="flex items-baseline gap-2 flex-wrap">
+                  <NuxtLink
+                    :to="`/updates/user/${member._id}`"
+                    class="font-semibold text-stone-100 hover:text-purple-300 transition-colors"
+                  >
+                    {{ member.name }}
+                  </NuxtLink>
+                  <span v-if="member.pronouns" class="text-sm text-stone-400">
+                    {{ member.pronouns }}
+                  </span>
+                  <span
+                    class="px-2 py-0.5 bg-purple-500/20 text-purple-300 rounded text-xs border border-purple-500/30"
+                  >
+                    {{ circleLabels[member.circle] }}
+                  </span>
+                  <span v-if="member.studio" class="text-sm text-stone-400">
+                    {{ member.studio }}
+                  </span>
+                  <span v-if="member.location" class="text-sm text-stone-500">
+                    {{ member.location }}
+                  </span>
+                </div>
+              </div>
+
+              <!-- Social Links -->
+              <div
+                v-if="member.socialLinks && hasSocialLinks(member.socialLinks)"
+                class="flex gap-3 flex-shrink-0"
+              >
+                <a
+                  v-if="member.socialLinks.mastodon"
+                  :href="member.socialLinks.mastodon"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-stone-400 hover:text-purple-400 transition-colors"
+                  title="Mastodon"
+                >
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path
+                      d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"
+                    />
+                  </svg>
+                </a>
+                <a
+                  v-if="member.socialLinks.linkedin"
+                  :href="member.socialLinks.linkedin"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-stone-400 hover:text-purple-400 transition-colors"
+                  title="LinkedIn"
+                >
+                  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path
+                      d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
+                    />
+                  </svg>
+                </a>
+                <a
+                  v-if="member.socialLinks.website"
+                  :href="member.socialLinks.website"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-stone-400 hover:text-purple-400 transition-colors"
+                  title="Website"
+                >
+                  <svg
+                    class="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"
+                    />
+                  </svg>
+                </a>
+                <a
+                  v-if="member.socialLinks.other"
+                  :href="member.socialLinks.other"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="text-stone-400 hover:text-purple-400 transition-colors"
+                  title="Other link"
+                >
+                  <svg
+                    class="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
+                    />
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Empty State -->
+        <div v-else class="text-center py-20">
+          <div class="w-16 h-16 mx-auto mb-4 opacity-50">
+            <svg
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              class="text-stone-600"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+              />
+            </svg>
+          </div>
+          <h3 class="text-lg font-medium text-stone-300 mb-2">
+            No members found
+          </h3>
+          <p class="text-stone-400 mb-6">
+            Try adjusting your search or filters
+          </p>
+          <UButton variant="outline" @click="clearAllFilters">
+            Clear Filters
+          </UButton>
+        </div>
+
+        <!-- Not Authenticated Notice -->
+        <div
+          v-if="!isAuthenticated && members.length > 0"
+          class="mt-8 backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-6 text-center"
+        >
+          <p class="text-purple-200 mb-4">
+            🔒 Some member information is visible to members only
+          </p>
+          <div class="flex gap-3 justify-center">
+            <UButton to="/login" variant="outline"> Log In </UButton>
+            <UButton to="/join"> Join Ghost Guild </UButton>
+          </div>
+        </div>
+      </UContainer>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const { isAuthenticated } = useAuth();
+
+// State
+const members = ref([]);
+const totalCount = ref(0);
+const availableSkills = ref([]);
+const loading = ref(false);
+const searchQuery = ref("");
+const selectedCircle = ref("");
+const selectedSkills = ref([]);
+const showAllSkills = ref(false);
+
+// Circle options
+const circleOptions = [
+  { label: "All Circles", value: "" },
+  { label: "Community", value: "community" },
+  { label: "Founder", value: "founder" },
+  { label: "Practitioner", value: "practitioner" },
+];
+
+const circleLabels = {
+  community: "Community",
+  founder: "Founder",
+  practitioner: "Practitioner",
+};
+
+// Helper to check if member has social links
+const hasSocialLinks = (links) => {
+  if (!links) return false;
+  return !!(links.mastodon || links.linkedin || links.website || links.other);
+};
+
+// Load members
+const loadMembers = async () => {
+  loading.value = true;
+
+  try {
+    const params = {};
+    if (searchQuery.value) params.search = searchQuery.value;
+    if (selectedCircle.value) params.circle = selectedCircle.value;
+    if (selectedSkills.value.length > 0)
+      params.skills = selectedSkills.value.join(",");
+
+    const data = await $fetch("/api/members/directory", { params });
+
+    members.value = data.members;
+    totalCount.value = data.totalCount;
+    availableSkills.value = data.filters.availableSkills;
+  } catch (error) {
+    console.error("Failed to load members:", error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Debounced search
+let searchTimeout;
+const debouncedSearch = () => {
+  clearTimeout(searchTimeout);
+  searchTimeout = setTimeout(() => {
+    loadMembers();
+  }, 300);
+};
+
+// Toggle skill filter
+const toggleSkill = (skill) => {
+  const index = selectedSkills.value.indexOf(skill);
+  if (index > -1) {
+    selectedSkills.value.splice(index, 1);
+  } else {
+    selectedSkills.value.push(skill);
+  }
+  loadMembers();
+};
+
+// Clear filters
+const clearCircleFilter = () => {
+  selectedCircle.value = "";
+  loadMembers();
+};
+
+const clearAllFilters = () => {
+  searchQuery.value = "";
+  selectedCircle.value = "";
+  selectedSkills.value = [];
+  loadMembers();
+};
+
+// Load on mount
+onMounted(() => {
+  loadMembers();
+});
+
+useHead({
+  title: "Member Directory - Ghost Guild",
+  meta: [
+    {
+      name: "description",
+      content:
+        "Connect with members of the Ghost Guild community - game developers, founders, and practitioners building solidarity economy studios.",
+    },
+  ],
+});
+</script>
diff --git a/app/pages/members/index.vue b/app/pages/members/index.vue
deleted file mode 100644
index 831e755..0000000
--- a/app/pages/members/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<!-- pages/members/index.vue -->
-<template>
-  <UDashboard>
-    <UDashboardPanel>
-      <UDashboardHeader>
-        <template #title> Welcome back, {{ member?.name }}! </template>
-      </UDashboardHeader>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <UCard>
-          <template #header>Your Circle</template>
-          <p class="text-xl font-semibold">{{ circleLabel }}</p>
-          <p class="text-sm text-zinc-600 mt-1">{{ circleDescription }}</p>
-          <UButton variant="soft" size="sm" class="mt-2">
-            Request Circle Change
-          </UButton>
-        </UCard>
-
-        <UCard>
-          <template #header>Your Contribution</template>
-          <p class="text-xl font-semibold">{{ contributionLabel }}</p>
-          <p class="text-sm text-zinc-600">Supporting 2 solidarity spots</p>
-          <UButton variant="soft" size="sm" class="mt-2">
-            Adjust Contribution
-          </UButton>
-        </UCard>
-      </div>
-
-      <UCard class="mt-6">
-        <template #header>Quick Links</template>
-        <UList>
-          <li><NuxtLink to="/members/resources">Resource Library</NuxtLink></li>
-          <li><a href="https://gamma-space.slack.com">Slack Community</a></li>
-          <li><NuxtLink to="/members/events">Upcoming Events</NuxtLink></li>
-        </UList>
-      </UCard>
-    </UDashboardPanel>
-  </UDashboard>
-</template>
-
-<script setup>
-import { computed } from 'vue'
-import { getCircleByValue } from '~/config/circles'
-import { getContributionTierByValue } from '~/config/contributions'
-
-// Mock member data - in real app this would come from authentication/API
-const member = ref({
-  name: 'Guest User',
-  circle: 'community',
-  contributionTier: '15'
-})
-
-// Computed properties for display labels
-const circleLabel = computed(() => {
-  const circle = getCircleByValue(member.value?.circle)
-  return circle?.label || member.value?.circle
-})
-
-const circleDescription = computed(() => {
-  const circle = getCircleByValue(member.value?.circle)
-  return circle?.description || ''
-})
-
-const contributionLabel = computed(() => {
-  const tier = getContributionTierByValue(member.value?.contributionTier)
-  return tier?.label || `$${member.value?.contributionTier}/month`
-})
-</script>
diff --git a/app/pages/updates/[id]/edit.vue b/app/pages/updates/[id]/edit.vue
new file mode 100644
index 0000000..b11e603
--- /dev/null
+++ b/app/pages/updates/[id]/edit.vue
@@ -0,0 +1,135 @@
+<template>
+  <div>
+    <PageHeader
+      title="Edit Update"
+      subtitle="Make changes to your update"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- 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-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading update...</p>
+          </div>
+        </div>
+
+        <!-- Edit Form -->
+        <div v-else-if="update" class="max-w-3xl">
+          <UpdateForm
+            :initial-data="update"
+            :submitting="submitting"
+            :error="error"
+            submit-label="Update"
+            @submit="handleSubmit"
+            @cancel="handleCancel"
+          />
+
+          <!-- Success Message -->
+          <div
+            v-if="success"
+            class="mt-6 bg-green-500/10 border border-green-500/30 rounded-lg p-4"
+          >
+            <p class="text-green-300">✓ Update saved successfully!</p>
+          </div>
+        </div>
+
+        <!-- Not Found -->
+        <div v-else class="text-center py-20">
+          <p class="text-stone-400 mb-4">Update not found</p>
+          <UButton to="/updates" variant="outline" color="neutral">
+            Back to Updates
+          </UButton>
+        </div>
+      </UContainer>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+const { isAuthenticated, checkMemberStatus, memberData } = useAuth();
+
+const update = ref(null);
+const loading = ref(true);
+const submitting = ref(false);
+const error = ref(null);
+const success = ref(false);
+
+// Load update
+const loadUpdate = async () => {
+  loading.value = true;
+  try {
+    const data = await $fetch(`/api/updates/${route.params.id}`);
+
+    // Check if user is the author
+    if (memberData.value && data.author._id !== memberData.value.id) {
+      error.value = "You can only edit your own updates";
+      update.value = null;
+      return;
+    }
+
+    update.value = data;
+  } catch (err) {
+    console.error("Failed to load update:", err);
+    error.value = err.data?.statusMessage || "Failed to load update";
+  } finally {
+    loading.value = false;
+  }
+};
+
+// Check authentication
+onMounted(async () => {
+  if (!isAuthenticated.value) {
+    const authenticated = await checkMemberStatus();
+    if (!authenticated) {
+      await navigateTo("/login");
+      return;
+    }
+  }
+
+  await loadUpdate();
+});
+
+const handleSubmit = async (formData) => {
+  submitting.value = true;
+  error.value = null;
+  success.value = false;
+
+  try {
+    await $fetch(`/api/updates/${route.params.id}`, {
+      method: "PATCH",
+      body: formData,
+    });
+
+    success.value = true;
+
+    // Redirect to the update after a short delay
+    setTimeout(() => {
+      navigateTo(`/updates/${route.params.id}`);
+    }, 1000);
+  } catch (err) {
+    console.error("Failed to update:", err);
+    error.value =
+      err.data?.statusMessage || "Failed to save update. Please try again.";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const handleCancel = () => {
+  navigateTo(`/updates/${route.params.id}`);
+};
+
+useHead({
+  title: "Edit Update - Ghost Guild",
+});
+</script>
diff --git a/app/pages/updates/[id]/index.vue b/app/pages/updates/[id]/index.vue
new file mode 100644
index 0000000..b1d6c99
--- /dev/null
+++ b/app/pages/updates/[id]/index.vue
@@ -0,0 +1,153 @@
+<template>
+  <div>
+    <PageHeader
+      title="Update"
+      subtitle="Member update"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- 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-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading update...</p>
+          </div>
+        </div>
+
+        <!-- Update Content -->
+        <div v-else-if="update" class="max-w-3xl">
+          <UpdateCard
+            :update="update"
+            :show-preview="false"
+            @edit="handleEdit"
+            @delete="handleDelete"
+          />
+
+          <!-- Comments Placeholder -->
+          <div
+            class="mt-8 p-8 border border-stone-700 rounded-lg bg-stone-800/30"
+          >
+            <h3 class="text-lg font-semibold text-stone-200 mb-4">Comments</h3>
+            <p class="text-stone-400 text-center py-8">Comments coming soon</p>
+          </div>
+
+          <!-- Back Button -->
+          <div class="mt-6">
+            <UButton
+              to="/updates"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-arrow-left"
+            >
+              Back to Updates
+            </UButton>
+          </div>
+        </div>
+
+        <!-- Error State -->
+        <div v-else-if="error" class="text-center py-20">
+          <p class="text-stone-400 mb-4">{{ error }}</p>
+          <UButton to="/updates" variant="outline" color="neutral">
+            Back to Updates
+          </UButton>
+        </div>
+      </UContainer>
+    </section>
+
+    <!-- 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>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+
+const update = ref(null);
+const loading = ref(true);
+const error = ref(null);
+const showDeleteModal = ref(false);
+const deleting = ref(false);
+
+// Load update
+const loadUpdate = async () => {
+  loading.value = true;
+  error.value = null;
+
+  try {
+    const data = await $fetch(`/api/updates/${route.params.id}`);
+    update.value = data;
+    console.log("✅ Update loaded successfully:", data);
+  } catch (err) {
+    console.error("❌ Failed to load update:", err);
+    console.error("Error details:", {
+      status: err.statusCode,
+      message: err.data?.statusMessage,
+      data: err.data,
+    });
+    error.value =
+      err.data?.statusMessage || err.statusMessage || "Update not found";
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadUpdate();
+});
+
+const handleEdit = () => {
+  navigateTo(`/updates/${route.params.id}/edit`);
+};
+
+const handleDelete = () => {
+  showDeleteModal.value = true;
+};
+
+const confirmDelete = async () => {
+  deleting.value = true;
+  try {
+    await $fetch(`/api/updates/${route.params.id}`, {
+      method: "DELETE",
+    });
+
+    // Redirect to updates feed
+    await navigateTo("/updates");
+  } catch (err) {
+    console.error("Failed to delete update:", err);
+    alert("Failed to delete update. Please try again.");
+    deleting.value = false;
+  }
+};
+
+useHead({
+  title: computed(() =>
+    update.value
+      ? `Update by ${update.value.author?.name} - Ghost Guild`
+      : "Update - Ghost Guild",
+  ),
+});
+</script>
diff --git a/app/pages/updates/index.vue b/app/pages/updates/index.vue
new file mode 100644
index 0000000..dde1f05
--- /dev/null
+++ b/app/pages/updates/index.vue
@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <PageHeader
+      title="Community Updates"
+      subtitle="Share and discover what members are working on, learning, and thinking about"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- New Update Button -->
+        <div v-if="isAuthenticated" class="mb-8 flex justify-end">
+          <UButton to="/updates/new" icon="i-lucide-plus"> New Update </UButton>
+        </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-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading updates...</p>
+          </div>
+        </div>
+
+        <!-- Updates Feed -->
+        <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"
+          />
+
+          <!-- Load More -->
+          <div v-if="hasMore" class="flex justify-center pt-4">
+            <UButton
+              variant="outline"
+              color="neutral"
+              :loading="loadingMore"
+              @click="loadMore"
+            >
+              Load More
+            </UButton>
+          </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-stone-600"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+              />
+            </svg>
+          </div>
+          <h3 class="text-lg font-medium text-stone-300 mb-2">
+            No updates yet
+          </h3>
+          <p class="text-stone-400 mb-6">
+            Be the first to share an update with the community!
+          </p>
+          <UButton v-if="isAuthenticated" to="/updates/new">
+            Post Your First Update
+          </UButton>
+        </div>
+      </UContainer>
+    </section>
+
+    <!-- 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>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup>
+const { isAuthenticated } = useAuth();
+
+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);
+
+// Load initial updates
+const loadUpdates = async () => {
+  pending.value = true;
+  try {
+    const response = await $fetch("/api/updates", {
+      params: { limit: 20, skip: 0 },
+    });
+    updates.value = response.updates;
+    total.value = response.total;
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load updates:", error);
+  } finally {
+    pending.value = false;
+  }
+};
+
+// Load more updates
+const loadMore = async () => {
+  loadingMore.value = true;
+  try {
+    const response = await $fetch("/api/updates", {
+      params: { limit: 20, skip: updates.value.length },
+    });
+    updates.value.push(...response.updates);
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load more updates:", error);
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+// Handle edit
+const handleEdit = (update) => {
+  navigateTo(`/updates/${update._id}/edit`);
+};
+
+// Handle delete
+const handleDelete = (update) => {
+  updateToDelete.value = update;
+  showDeleteModal.value = true;
+};
+
+// Confirm delete
+const confirmDelete = async () => {
+  if (!updateToDelete.value) return;
+
+  deleting.value = true;
+  try {
+    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
+      method: "DELETE",
+    });
+
+    // Remove from list
+    updates.value = updates.value.filter(
+      (u) => u._id !== updateToDelete.value._id,
+    );
+    total.value--;
+
+    showDeleteModal.value = false;
+    updateToDelete.value = null;
+  } catch (error) {
+    console.error("Failed to delete update:", error);
+    alert("Failed to delete update. Please try again.");
+  } finally {
+    deleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadUpdates();
+});
+
+useHead({
+  title: "Community Updates - Ghost Guild",
+});
+</script>
diff --git a/app/pages/updates/new.vue b/app/pages/updates/new.vue
new file mode 100644
index 0000000..b8f0a12
--- /dev/null
+++ b/app/pages/updates/new.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <PageHeader
+      title="New Update"
+      subtitle="Share what you're working on, learning, or thinking about"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <div class="max-w-3xl">
+          <UpdateForm
+            :submitting="submitting"
+            :error="error"
+            submit-label="Post Update"
+            @submit="handleSubmit"
+            @cancel="handleCancel"
+          />
+
+          <!-- Success Message -->
+          <div
+            v-if="success"
+            class="mt-6 bg-green-500/10 border border-green-500/30 rounded-lg p-4"
+          >
+            <p class="text-green-300">✓ Update posted successfully!</p>
+          </div>
+        </div>
+      </UContainer>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const { isAuthenticated, checkMemberStatus } = useAuth();
+
+const submitting = ref(false);
+const error = ref(null);
+const success = ref(false);
+
+// Check authentication
+onMounted(async () => {
+  if (!isAuthenticated.value) {
+    const authenticated = await checkMemberStatus();
+    if (!authenticated) {
+      await navigateTo("/login");
+    }
+  }
+});
+
+const handleSubmit = async (formData) => {
+  submitting.value = true;
+  error.value = null;
+  success.value = false;
+
+  try {
+    const update = await $fetch("/api/updates", {
+      method: "POST",
+      body: formData,
+    });
+
+    success.value = true;
+
+    // Redirect to the update after a short delay
+    setTimeout(() => {
+      navigateTo(`/updates/${update._id}`);
+    }, 1000);
+  } catch (err) {
+    console.error("Failed to create update:", err);
+    error.value =
+      err.data?.statusMessage || "Failed to post update. Please try again.";
+  } finally {
+    submitting.value = false;
+  }
+};
+
+const handleCancel = () => {
+  navigateTo("/updates");
+};
+
+useHead({
+  title: "New Update - Ghost Guild",
+});
+</script>
diff --git a/app/pages/updates/user/[id].vue b/app/pages/updates/user/[id].vue
new file mode 100644
index 0000000..e58f4a4
--- /dev/null
+++ b/app/pages/updates/user/[id].vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <PageHeader
+      :title="user?.name ? `${user.name}'s Updates` : 'User Updates'"
+      :subtitle="user?.name ? `All updates from ${user.name}` : 'Loading...'"
+      theme="stone"
+      size="medium"
+    />
+
+    <section class="py-12 px-4">
+      <UContainer class="px-4">
+        <!-- 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-stone-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
+            ></div>
+            <p class="text-stone-400">Loading updates...</p>
+          </div>
+        </div>
+
+        <!-- Updates Feed -->
+        <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"
+          />
+
+          <!-- Load More -->
+          <div v-if="hasMore" class="flex justify-center pt-4">
+            <UButton
+              variant="outline"
+              color="neutral"
+              :loading="loadingMore"
+              @click="loadMore"
+            >
+              Load More
+            </UButton>
+          </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-stone-600"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+              />
+            </svg>
+          </div>
+          <h3 class="text-lg font-medium text-stone-300 mb-2">
+            No updates yet
+          </h3>
+          <p class="text-stone-400">
+            {{ user?.name || "This user" }} hasn't posted any updates.
+          </p>
+        </div>
+      </UContainer>
+    </section>
+
+    <!-- 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>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>
+
+<script setup>
+const route = useRoute();
+const userId = computed(() => route.params.id);
+
+const updates = ref([]);
+const user = ref(null);
+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);
+
+// Load user updates
+const loadUpdates = async () => {
+  pending.value = true;
+  try {
+    const response = await $fetch(`/api/updates/user/${userId.value}`, {
+      params: { limit: 20, skip: 0 },
+    });
+    updates.value = response.updates;
+    user.value = response.user;
+    total.value = response.total;
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load updates:", error);
+  } finally {
+    pending.value = false;
+  }
+};
+
+// Load more updates
+const loadMore = async () => {
+  loadingMore.value = true;
+  try {
+    const response = await $fetch(`/api/updates/user/${userId.value}`, {
+      params: { limit: 20, skip: updates.value.length },
+    });
+    updates.value.push(...response.updates);
+    hasMore.value = response.hasMore;
+  } catch (error) {
+    console.error("Failed to load more updates:", error);
+  } finally {
+    loadingMore.value = false;
+  }
+};
+
+// Handle edit
+const handleEdit = (update) => {
+  navigateTo(`/updates/${update._id}/edit`);
+};
+
+// Handle delete
+const handleDelete = (update) => {
+  updateToDelete.value = update;
+  showDeleteModal.value = true;
+};
+
+// Confirm delete
+const confirmDelete = async () => {
+  if (!updateToDelete.value) return;
+
+  deleting.value = true;
+  try {
+    await $fetch(`/api/updates/${updateToDelete.value._id}`, {
+      method: "DELETE",
+    });
+
+    // Remove from list
+    updates.value = updates.value.filter(
+      (u) => u._id !== updateToDelete.value._id,
+    );
+    total.value--;
+
+    showDeleteModal.value = false;
+    updateToDelete.value = null;
+  } catch (error) {
+    console.error("Failed to delete update:", error);
+    alert("Failed to delete update. Please try again.");
+  } finally {
+    deleting.value = false;
+  }
+};
+
+onMounted(() => {
+  loadUpdates();
+});
+
+useHead({
+  title: computed(() => user.value?.name ? `${user.value.name}'s Updates - Ghost Guild` : 'User Updates - Ghost Guild'),
+});
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f96b896..f51c43e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -3,6 +3,11 @@ export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
   devtools: { enabled: true },
   modules: ["@nuxt/eslint", "@nuxt/ui", "@nuxtjs/plausible"],
+  ui: {
+    theme: {
+      colors: ['primary', 'neutral', 'ghost', 'whisper', 'sparkle']
+    }
+  },
   build: {
     transpile: ['vue-cal']
   },
@@ -16,6 +21,9 @@ export default defineNuxtConfig({
     jwtSecret: process.env.JWT_SECRET || 'dev-secret-change-in-production',
     resendApiKey: process.env.RESEND_API_KEY || '',
     helcimApiToken: process.env.HELCIM_API_TOKEN || '',
+    slackBotToken: process.env.SLACK_BOT_TOKEN || '',
+    slackSigningSecret: process.env.SLACK_SIGNING_SECRET || '',
+    slackVettingChannelId: process.env.SLACK_VETTING_CHANNEL_ID || '',
     
     // Public keys (available on client-side)
     public: {
diff --git a/package-lock.json b/package-lock.json
index 4be3954..f1f2978 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,9 @@
         "@headlessui/vue": "^1.7.23",
         "@heroicons/vue": "^2.2.0",
         "@nuxt/eslint": "^1.9.0",
-        "@nuxt/ui": "^3.3.2",
+        "@nuxt/ui": "^4.0.0",
         "@nuxtjs/plausible": "^1.2.0",
+        "@slack/web-api": "^7.10.0",
         "bcryptjs": "^3.0.2",
         "chrono-node": "^2.8.4",
         "cloudinary": "^2.7.0",
@@ -29,6 +30,77 @@
         "zod": "^4.1.3"
       }
     },
+    "node_modules/@ai-sdk/gateway": {
+      "version": "1.0.32",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-1.0.32.tgz",
+      "integrity": "sha512-TQRIM63EI/ccJBc7RxeB8nq/CnGNnyl7eu5stWdLwL41stkV5skVeZJe0QRvFbaOrwCkgUVE0yrUqJi4tgDC1A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.10"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-2.0.0.tgz",
+      "integrity": "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/provider-utils": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.10.tgz",
+      "integrity": "sha512-T1gZ76gEIwffep6MWI0QNy9jgoybUHE7TRaHB5k54K8mF91ciGFlbtCGxDYhMH3nCRergKwYFIDeFF0hJSIQHQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@standard-schema/spec": "^1.0.0",
+        "eventsource-parser": "^3.0.5"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
+    "node_modules/@ai-sdk/vue": {
+      "version": "2.0.59",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/vue/-/vue-2.0.59.tgz",
+      "integrity": "sha512-bnu14TB1i4mOATCyQwyekrch/16qwYUFV8mywvOIQzOm+ZRLzHm1mUM7RDlfPI0ZE3y/M76CWNwyxfaxB/BlmA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "3.0.10",
+        "ai": "5.0.59",
+        "swrv": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4",
+        "zod": "^3.25.76 || ^4.1.8"
+      },
+      "peerDependenciesMeta": {
+        "vue": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -68,9 +140,9 @@
       }
     },
     "node_modules/@antfu/utils": {
-      "version": "8.1.1",
-      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-8.1.1.tgz",
-      "integrity": "sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==",
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-9.2.1.tgz",
+      "integrity": "sha512-TMilPqXyii1AsiEii6l6ubRzbo76p6oshUSYPaKsmXDavyMLqjzVDkcp3pHp5ELMUNJHATcEOGxKTTsX9yYhGg==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -1561,9 +1633,9 @@
       }
     },
     "node_modules/@iconify/collections": {
-      "version": "1.0.588",
-      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.588.tgz",
-      "integrity": "sha512-K6jijh3aEZ937R+ES5Swd62NOCZ868PNCyHNg+R7c9Kn9yurtuiLM/zkpN8KxRwVvTX8w83EkBqhUjqo+wFgDw==",
+      "version": "1.0.600",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.600.tgz",
+      "integrity": "sha512-N1bJSLAfwZzAkEOKBoFAI8DPNpWrWw0dwVG3b1JMcq4BytftD7EbtcCPTy4+63ABZxqVIPLWEd8yCjB84jt0Ig==",
       "license": "MIT",
       "dependencies": {
         "@iconify/types": "*"
@@ -1576,18 +1648,18 @@
       "license": "MIT"
     },
     "node_modules/@iconify/utils": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-2.3.0.tgz",
-      "integrity": "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.0.2.tgz",
+      "integrity": "sha512-EfJS0rLfVuRuJRn4psJHtK2A9TqVnkxPpHY6lYHiB9+8eSuudsxbwMiavocG45ujOo6FJ+CIRlRnlOGinzkaGQ==",
       "license": "MIT",
       "dependencies": {
-        "@antfu/install-pkg": "^1.0.0",
-        "@antfu/utils": "^8.1.0",
+        "@antfu/install-pkg": "^1.1.0",
+        "@antfu/utils": "^9.2.0",
         "@iconify/types": "^2.0.0",
-        "debug": "^4.4.0",
-        "globals": "^15.14.0",
+        "debug": "^4.4.1",
+        "globals": "^15.15.0",
         "kolorist": "^1.8.0",
-        "local-pkg": "^1.0.0",
+        "local-pkg": "^1.1.1",
         "mlly": "^1.7.4"
       }
     },
@@ -2721,27 +2793,76 @@
       }
     },
     "node_modules/@nuxt/icon": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-1.15.0.tgz",
-      "integrity": "sha512-kA0rxqr1B601zNJNcOXera8CyYcxUCEcT7dXEC7rwAz71PRCN5emf7G656eKEQgtqrD4JSj6NQqWDgrmFcf/GQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.0.0.tgz",
+      "integrity": "sha512-sy8+zkKMYp+H09S0cuTteL3zPTmktqzYPpPXV9ZkLNjrQsaPH08n7s/9wjr+C/K/w2R3u18E3+P1VIQi3xaq1A==",
       "license": "MIT",
       "dependencies": {
-        "@iconify/collections": "^1.0.563",
+        "@iconify/collections": "^1.0.579",
         "@iconify/types": "^2.0.0",
-        "@iconify/utils": "^2.3.0",
+        "@iconify/utils": "^3.0.0",
         "@iconify/vue": "^5.0.0",
-        "@nuxt/devtools-kit": "^2.5.0",
-        "@nuxt/kit": "^3.17.5",
+        "@nuxt/devtools-kit": "^2.6.2",
+        "@nuxt/kit": "^4.0.3",
         "consola": "^3.4.2",
         "local-pkg": "^1.1.1",
         "mlly": "^1.7.4",
         "ohash": "^2.0.11",
         "pathe": "^2.0.3",
-        "picomatch": "^4.0.2",
+        "picomatch": "^4.0.3",
         "std-env": "^3.9.0",
         "tinyglobby": "^0.2.14"
       }
     },
+    "node_modules/@nuxt/icon/node_modules/@nuxt/kit": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
+      "integrity": "sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.3.0",
+        "rc9": "^2.1.2",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.15",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
+    "node_modules/@nuxt/icon/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "3.18.1",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.18.1.tgz",
@@ -2819,26 +2940,27 @@
       }
     },
     "node_modules/@nuxt/ui": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/@nuxt/ui/-/ui-3.3.2.tgz",
-      "integrity": "sha512-LN8axCK/0zCqWC/m0nN5R4vQyGmv6Viu9K1ZyzApgAg4vsyRYKXLtr2ta/vXv2y4/CtKfncry1zs/IfsktDyuw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/ui/-/ui-4.0.0.tgz",
+      "integrity": "sha512-pu5FZ8NZN2YKAiExOXuM0ImjOMe3h4/CsVgm71it+1On7OmIYHeh6SGgvaSX4Ly7FibUFllZMzJ+M5jo6KAEuw==",
       "license": "MIT",
       "dependencies": {
+        "@ai-sdk/vue": "^2.0.48",
         "@iconify/vue": "^5.0.0",
-        "@internationalized/date": "^3.8.2",
-        "@internationalized/number": "^3.6.4",
+        "@internationalized/date": "^3.9.0",
+        "@internationalized/number": "^3.6.5",
         "@nuxt/fonts": "^0.11.4",
-        "@nuxt/icon": "^1.15.0",
+        "@nuxt/icon": "^2.0.0",
         "@nuxt/kit": "^4.0.3",
         "@nuxt/schema": "^4.0.3",
         "@nuxtjs/color-mode": "^3.5.2",
         "@standard-schema/spec": "^1.0.0",
-        "@tailwindcss/postcss": "^4.1.12",
-        "@tailwindcss/vite": "^4.1.12",
+        "@tailwindcss/postcss": "^4.1.13",
+        "@tailwindcss/vite": "^4.1.13",
         "@tanstack/vue-table": "^8.21.3",
-        "@unhead/vue": "^2.0.14",
-        "@vueuse/core": "^13.6.0",
-        "@vueuse/integrations": "^13.6.0",
+        "@unhead/vue": "^2.0.17",
+        "@vueuse/core": "^13.9.0",
+        "@vueuse/integrations": "^13.9.0",
         "colortranslator": "^5.0.0",
         "consola": "^3.4.2",
         "defu": "^6.1.4",
@@ -2848,37 +2970,38 @@
         "embla-carousel-class-names": "^8.6.0",
         "embla-carousel-fade": "^8.6.0",
         "embla-carousel-vue": "^8.6.0",
-        "embla-carousel-wheel-gestures": "^8.0.2",
+        "embla-carousel-wheel-gestures": "^8.1.0",
         "fuse.js": "^7.1.0",
         "hookable": "^5.5.3",
         "knitwork": "^1.2.0",
-        "magic-string": "^0.30.17",
-        "mlly": "^1.7.4",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
+        "motion-v": "^1.7.1",
         "ohash": "^2.0.11",
         "pathe": "^2.0.3",
-        "reka-ui": "2.4.1",
+        "reka-ui": "2.5.0",
         "scule": "^1.3.0",
         "tailwind-merge": "^3.3.1",
-        "tailwind-variants": "2.0.1",
-        "tailwindcss": "^4.1.12",
-        "tinyglobby": "^0.2.14",
-        "unplugin": "^2.3.5",
-        "unplugin-auto-import": "^19.3.0",
-        "unplugin-vue-components": "^28.8.0",
+        "tailwind-variants": "^3.1.1",
+        "tailwindcss": "^4.1.13",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^2.3.10",
+        "unplugin-auto-import": "^20.1.0",
+        "unplugin-vue-components": "^29.1.0",
         "vaul-vue": "0.4.1",
-        "vue-component-type-helpers": "^3.0.5"
+        "vue-component-type-helpers": "^3.0.7"
       },
       "bin": {
         "nuxt-ui": "cli/index.mjs"
       },
       "peerDependencies": {
         "@inertiajs/vue3": "^2.0.7",
-        "joi": "^17.13.0",
+        "joi": "^18.0.0",
         "superstruct": "^2.0.0",
         "typescript": "^5.6.3",
         "valibot": "^1.0.0",
         "vue-router": "^4.5.0",
-        "yup": "^1.6.0",
+        "yup": "^1.7.0",
         "zod": "^3.24.0 || ^4.0.0"
       },
       "peerDependenciesMeta": {
@@ -2937,6 +3060,70 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/@nuxt/ui/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/@nuxt/ui/node_modules/unplugin-auto-import": {
+      "version": "20.2.0",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-20.2.0.tgz",
+      "integrity": "sha512-vfBI/SvD9hJqYNinipVOAj5n8dS8DJXFlCKFR5iLDp2SaQwsfdnfLXgZ+34Kd3YY3YEY9omk8XQg0bwos3Q8ug==",
+      "license": "MIT",
+      "dependencies": {
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.19",
+        "picomatch": "^4.0.3",
+        "unimport": "^5.4.0",
+        "unplugin": "^2.3.10",
+        "unplugin-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^4.0.0",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@nuxt/ui/node_modules/unplugin-utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.0.tgz",
+      "integrity": "sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/@nuxt/vite-builder": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@nuxt/vite-builder/-/vite-builder-4.0.3.tgz",
@@ -3065,6 +3252,15 @@
         "ufo": "^1.5.4"
       }
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@oxc-minify/binding-android-arm64": {
       "version": "0.80.0",
       "resolved": "https://registry.npmjs.org/@oxc-minify/binding-android-arm64/-/binding-android-arm64-0.80.0.tgz",
@@ -4668,6 +4864,65 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@slack/logger": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@slack/logger/-/logger-4.0.0.tgz",
+      "integrity": "sha512-Wz7QYfPAlG/DR+DfABddUZeNgoeY7d1J39OCR2jR+v7VBsB8ezulDK5szTnDDPDwLH5IWhLvXIHlCFZV7MSKgA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": ">=18.0.0"
+      },
+      "engines": {
+        "node": ">= 18",
+        "npm": ">= 8.6.0"
+      }
+    },
+    "node_modules/@slack/types": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/@slack/types/-/types-2.16.0.tgz",
+      "integrity": "sha512-bICnyukvdklXhwxprR3uF1+ZFkTvWTZge4evlCS4G1H1HU6QLY68AcjqzQRymf7/5gNt6Y4OBb4NdviheyZcAg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12.13.0",
+        "npm": ">= 6.12.0"
+      }
+    },
+    "node_modules/@slack/web-api": {
+      "version": "7.10.0",
+      "resolved": "https://registry.npmjs.org/@slack/web-api/-/web-api-7.10.0.tgz",
+      "integrity": "sha512-kT+07JvOqpYH3b/ttVo3iqKIFiHV2NKmD6QUc/F7HrjCgSdSA10zxqi0euXEF2prB49OU7SfjadzQ0WhNc7tiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@slack/logger": "^4.0.0",
+        "@slack/types": "^2.9.0",
+        "@types/node": ">=18.0.0",
+        "@types/retry": "0.12.0",
+        "axios": "^1.11.0",
+        "eventemitter3": "^5.0.1",
+        "form-data": "^4.0.4",
+        "is-electron": "2.2.2",
+        "is-stream": "^2",
+        "p-queue": "^6",
+        "p-retry": "^4",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">= 18",
+        "npm": ">= 8.6.0"
+      }
+    },
+    "node_modules/@slack/web-api/node_modules/is-stream": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
+      "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@speed-highlight/core": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/@speed-highlight/core/-/core-1.2.7.tgz",
@@ -4710,24 +4965,24 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.12.tgz",
-      "integrity": "sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.13.tgz",
+      "integrity": "sha512-eq3ouolC1oEFOAvOMOBAmfCIqZBJuvWvvYWh5h5iOYfe1HFC6+GZ6EIL0JdM3/niGRJmnrOc+8gl9/HGUaaptw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.4",
         "enhanced-resolve": "^5.18.3",
         "jiti": "^2.5.1",
         "lightningcss": "1.30.1",
-        "magic-string": "^0.30.17",
+        "magic-string": "^0.30.18",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.12"
+        "tailwindcss": "4.1.13"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.12.tgz",
-      "integrity": "sha512-gM5EoKHW/ukmlEtphNwaGx45fGoEmP10v51t9unv55voWh6WrOL19hfuIdo2FjxIaZzw776/BUQg7Pck++cIVw==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.13.tgz",
+      "integrity": "sha512-CPgsM1IpGRa880sMbYmG1s4xhAy3xEt1QULgTJGQmZUeNgXFR7s1YxYygmJyBGtou4SyEosGAGEeYqY7R53bIA==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -4738,24 +4993,24 @@
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.12",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.12",
-        "@tailwindcss/oxide-darwin-x64": "4.1.12",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.12",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.12",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.12",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.12",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.12",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.12",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.12",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.12",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.12"
+        "@tailwindcss/oxide-android-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.13",
+        "@tailwindcss/oxide-darwin-x64": "4.1.13",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.13",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.13",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.13",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.13",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.13",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.13"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.12.tgz",
-      "integrity": "sha512-oNY5pq+1gc4T6QVTsZKwZaGpBb2N1H1fsc1GD4o7yinFySqIuRZ2E4NvGasWc6PhYJwGK2+5YT1f9Tp80zUQZQ==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.13.tgz",
+      "integrity": "sha512-BrpTrVYyejbgGo57yc8ieE+D6VT9GOgnNdmh5Sac6+t0m+v+sKQevpFVpwX3pBrM2qKrQwJ0c5eDbtjouY/+ew==",
       "cpu": [
         "arm64"
       ],
@@ -4769,9 +5024,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.12.tgz",
-      "integrity": "sha512-cq1qmq2HEtDV9HvZlTtrj671mCdGB93bVY6J29mwCyaMYCP/JaUBXxrQQQm7Qn33AXXASPUb2HFZlWiiHWFytw==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.13.tgz",
+      "integrity": "sha512-YP+Jksc4U0KHcu76UhRDHq9bx4qtBftp9ShK/7UGfq0wpaP96YVnnjFnj3ZFrUAjc5iECzODl/Ts0AN7ZPOANQ==",
       "cpu": [
         "arm64"
       ],
@@ -4785,9 +5040,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.12.tgz",
-      "integrity": "sha512-6UCsIeFUcBfpangqlXay9Ffty9XhFH1QuUFn0WV83W8lGdX8cD5/+2ONLluALJD5+yJ7k8mVtwy3zMZmzEfbLg==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.13.tgz",
+      "integrity": "sha512-aAJ3bbwrn/PQHDxCto9sxwQfT30PzyYJFG0u/BWZGeVXi5Hx6uuUOQEI2Fa43qvmUjTRQNZnGqe9t0Zntexeuw==",
       "cpu": [
         "x64"
       ],
@@ -4801,9 +5056,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.12.tgz",
-      "integrity": "sha512-JOH/f7j6+nYXIrHobRYCtoArJdMJh5zy5lr0FV0Qu47MID/vqJAY3r/OElPzx1C/wdT1uS7cPq+xdYYelny1ww==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.13.tgz",
+      "integrity": "sha512-Wt8KvASHwSXhKE/dJLCCWcTSVmBj3xhVhp/aF3RpAhGeZ3sVo7+NTfgiN8Vey/Fi8prRClDs6/f0KXPDTZE6nQ==",
       "cpu": [
         "x64"
       ],
@@ -4817,9 +5072,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.12.tgz",
-      "integrity": "sha512-v4Ghvi9AU1SYgGr3/j38PD8PEe6bRfTnNSUE3YCMIRrrNigCFtHZ2TCm8142X8fcSqHBZBceDx+JlFJEfNg5zQ==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.13.tgz",
+      "integrity": "sha512-mbVbcAsW3Gkm2MGwA93eLtWrwajz91aXZCNSkGTx/R5eb6KpKD5q8Ueckkh9YNboU8RH7jiv+ol/I7ZyQ9H7Bw==",
       "cpu": [
         "arm"
       ],
@@ -4833,9 +5088,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.12.tgz",
-      "integrity": "sha512-YP5s1LmetL9UsvVAKusHSyPlzSRqYyRB0f+Kl/xcYQSPLEw/BvGfxzbH+ihUciePDjiXwHh+p+qbSP3SlJw+6g==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.13.tgz",
+      "integrity": "sha512-wdtfkmpXiwej/yoAkrCP2DNzRXCALq9NVLgLELgLim1QpSfhQM5+ZxQQF8fkOiEpuNoKLp4nKZ6RC4kmeFH0HQ==",
       "cpu": [
         "arm64"
       ],
@@ -4849,9 +5104,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.12.tgz",
-      "integrity": "sha512-V8pAM3s8gsrXcCv6kCHSuwyb/gPsd863iT+v1PGXC4fSL/OJqsKhfK//v8P+w9ThKIoqNbEnsZqNy+WDnwQqCA==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.13.tgz",
+      "integrity": "sha512-hZQrmtLdhyqzXHB7mkXfq0IYbxegaqTmfa1p9MBj72WPoDD3oNOh1Lnxf6xZLY9C3OV6qiCYkO1i/LrzEdW2mg==",
       "cpu": [
         "arm64"
       ],
@@ -4865,9 +5120,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.12.tgz",
-      "integrity": "sha512-xYfqYLjvm2UQ3TZggTGrwxjYaLB62b1Wiysw/YE3Yqbh86sOMoTn0feF98PonP7LtjsWOWcXEbGqDL7zv0uW8Q==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.13.tgz",
+      "integrity": "sha512-uaZTYWxSXyMWDJZNY1Ul7XkJTCBRFZ5Fo6wtjrgBKzZLoJNrG+WderJwAjPzuNZOnmdrVg260DKwXCFtJ/hWRQ==",
       "cpu": [
         "x64"
       ],
@@ -4881,9 +5136,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.12.tgz",
-      "integrity": "sha512-ha0pHPamN+fWZY7GCzz5rKunlv9L5R8kdh+YNvP5awe3LtuXb5nRi/H27GeL2U+TdhDOptU7T6Is7mdwh5Ar3A==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.13.tgz",
+      "integrity": "sha512-oXiPj5mi4Hdn50v5RdnuuIms0PVPI/EG4fxAfFiIKQh5TgQgX7oSuDWntHW7WNIi/yVLAiS+CRGW4RkoGSSgVQ==",
       "cpu": [
         "x64"
       ],
@@ -4897,9 +5152,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.12.tgz",
-      "integrity": "sha512-4tSyu3dW+ktzdEpuk6g49KdEangu3eCYoqPhWNsZgUhyegEda3M9rG0/j1GV/JjVVsj+lG7jWAyrTlLzd/WEBg==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.13.tgz",
+      "integrity": "sha512-+LC2nNtPovtrDwBc/nqnIKYh/W2+R69FA0hgoeOn64BdCX522u19ryLh3Vf3F8W49XBcMIxSe665kwy21FkhvA==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -4926,9 +5181,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.12.tgz",
-      "integrity": "sha512-iGLyD/cVP724+FGtMWslhcFyg4xyYyM+5F4hGvKA7eifPkXHRAUDFaimu53fpNg9X8dfP75pXx/zFt/jlNF+lg==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.13.tgz",
+      "integrity": "sha512-dziTNeQXtoQ2KBXmrjCxsuPk3F3CQ/yb7ZNZNA+UkNTeiTGgfeh+gH5Pi7mRncVgcPD2xgHvkFCh/MhZWSgyQg==",
       "cpu": [
         "arm64"
       ],
@@ -4942,9 +5197,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.12.tgz",
-      "integrity": "sha512-NKIh5rzw6CpEodv/++r0hGLlfgT/gFN+5WNdZtvh6wpU2BpGNgdjvj6H2oFc8nCM839QM1YOhjpgbAONUb4IxA==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.13.tgz",
+      "integrity": "sha512-3+LKesjXydTkHk5zXX01b5KMzLV1xl2mcktBJkje7rhFUpUlYJy7IMOLqjIRQncLTa1WZZiFY/foAeB5nmaiTw==",
       "cpu": [
         "x64"
       ],
@@ -4958,36 +5213,36 @@
       }
     },
     "node_modules/@tailwindcss/oxide/node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.1.tgz",
+      "integrity": "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.12.tgz",
-      "integrity": "sha512-5PpLYhCAwf9SJEeIsSmCDLgyVfdBhdBpzX1OJ87anT9IVR0Z9pjM0FNixCAUAHGnMBGB8K99SwAheXrT0Kh6QQ==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.13.tgz",
+      "integrity": "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ==",
       "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.12",
-        "@tailwindcss/oxide": "4.1.12",
+        "@tailwindcss/node": "4.1.13",
+        "@tailwindcss/oxide": "4.1.13",
         "postcss": "^8.4.41",
-        "tailwindcss": "4.1.12"
+        "tailwindcss": "4.1.13"
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.12.tgz",
-      "integrity": "sha512-4pt0AMFDx7gzIrAOIYgYP0KCBuKWqyW8ayrdiLEjoJTT4pKTjrzG/e4uzWtTLDziC+66R9wbUqZBccJalSE5vQ==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.13.tgz",
+      "integrity": "sha512-0PmqLQ010N58SbMTJ7BVJ4I2xopiQn/5i6nlb4JmxzQf8zcS5+m2Cv6tqh+sfDwtIdjoEnOvwsGQ1hkUi8QEHQ==",
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.1.12",
-        "@tailwindcss/oxide": "4.1.12",
-        "tailwindcss": "4.1.12"
+        "@tailwindcss/node": "4.1.13",
+        "@tailwindcss/oxide": "4.1.13",
+        "tailwindcss": "4.1.13"
       },
       "peerDependencies": {
         "vite": "^5.2.0 || ^6 || ^7"
@@ -5102,7 +5357,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.3.0.tgz",
       "integrity": "sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==",
       "license": "MIT",
-      "optional": true,
       "dependencies": {
         "undici-types": "~7.10.0"
       }
@@ -5125,6 +5379,12 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
       "license": "MIT"
     },
+    "node_modules/@types/retry": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
+      "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
+      "license": "MIT"
+    },
     "node_modules/@types/triple-beam": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz",
@@ -5375,13 +5635,13 @@
       }
     },
     "node_modules/@unhead/vue": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.14.tgz",
-      "integrity": "sha512-Ym9f+Kd2Afqek2FtUHvYvK+j2uZ2vbZ6Rr9NCnNGGBMdmafAuiZpT117YGyh0ARcueL6Znia0U8ySqPsnHOZIg==",
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/@unhead/vue/-/vue-2.0.17.tgz",
+      "integrity": "sha512-jzmGZYeMAhETV6qfetmLbZzUjjx1TjdNvFSobeFZb73D7dwD9wl/nOAx36qq+TvjZsLJdF5PQWToz2oDGAUqCg==",
       "license": "MIT",
       "dependencies": {
         "hookable": "^5.5.3",
-        "unhead": "2.0.14"
+        "unhead": "2.0.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/harlan-zw"
@@ -6012,14 +6272,14 @@
       "license": "MIT"
     },
     "node_modules/@vueuse/core": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.7.0.tgz",
-      "integrity": "sha512-myagn09+c6BmS6yHc1gTwwsdZilAovHslMjyykmZH3JNyzI5HoWhv114IIdytXiPipdHJ2gDUx0PB93jRduJYg==",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.9.0.tgz",
+      "integrity": "sha512-ts3regBQyURfCE2BcytLqzm8+MmLlo5Ln/KLoxDVcsZ2gzIwVNnQpQOL/UKV8alUqjSZOlpFZcRNsLRqj+OzyA==",
       "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.7.0",
-        "@vueuse/shared": "13.7.0"
+        "@vueuse/metadata": "13.9.0",
+        "@vueuse/shared": "13.9.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -6029,13 +6289,13 @@
       }
     },
     "node_modules/@vueuse/integrations": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-13.7.0.tgz",
-      "integrity": "sha512-Na5p0ONLepNV/xCBi8vBMuzCOZh9CFT/OHnrUlABWXgWTWSHM3wrVaLS1xvAijPLU5B1ysyJDDW/hKak80oLGA==",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/integrations/-/integrations-13.9.0.tgz",
+      "integrity": "sha512-SDobKBbPIOe0cVL7QxMzGkuUGHvWTdihi9zOrrWaWUgFKe15cwEcwfWmgrcNzjT6kHnNmWuTajPHoIzUjYNYYQ==",
       "license": "MIT",
       "dependencies": {
-        "@vueuse/core": "13.7.0",
-        "@vueuse/shared": "13.7.0"
+        "@vueuse/core": "13.9.0",
+        "@vueuse/shared": "13.9.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -6095,18 +6355,18 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.7.0.tgz",
-      "integrity": "sha512-8okFhS/1ite8EwUdZZfvTYowNTfXmVCOrBFlA31O0HD8HKXhY+WtTRyF0LwbpJfoFPc+s9anNJIXMVrvP7UTZg==",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.9.0.tgz",
+      "integrity": "sha512-1AFRvuiGphfF7yWixZa0KwjYH8ulyjDCC0aFgrGRz8+P4kvDFSdXLVfTk5xAN9wEuD1J6z4/myMoYbnHoX07zg==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/shared": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.7.0.tgz",
-      "integrity": "sha512-Wi2LpJi4UA9kM0OZ0FCZslACp92HlVNw1KPaDY6RAzvQ+J1s7seOtcOpmkfbD5aBSmMn9NvOakc8ZxMxmDXTIg==",
+      "version": "13.9.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.9.0.tgz",
+      "integrity": "sha512-e89uuTLMh0U5cZ9iDpEI2senqPGfbPRTHM/0AaQkcxnpqjkZqDYP8rpfm7edOz8s+pOCOROEy1PIveSW8+fL5g==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -6249,6 +6509,24 @@
         "node": ">= 14"
       }
     },
+    "node_modules/ai": {
+      "version": "5.0.59",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-5.0.59.tgz",
+      "integrity": "sha512-SuAFxKXt2Ha9FiXB3gaOITkOg9ek/3QNVatGVExvTT4gNXc+hJpuNe1dmuwf6Z5Op4fzc8wdbsrYP27ZCXBzlw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/gateway": "1.0.32",
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.10",
+        "@opentelemetry/api": "1.9.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4.1.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -6457,6 +6735,12 @@
       "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.21",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@@ -6494,6 +6778,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.11.0.tgz",
+      "integrity": "sha512-1Lx3WLFQWm3ooKDYZD1eXmoGO9fxYQjrycfHFC8P0sCfQVXyROp0p9PFWBehewBOdCwHc+f/b8I0fMto5eSfwA==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.6.7",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz",
@@ -7235,6 +7530,18 @@
       "integrity": "sha512-Z3UPUKasUVDFCDYAjP2fmlVRf1jFHJv1izAmPjiOa0OCIw1W7iC8PZ2GsoDa8uZv+mKyWopxxStT9q05+27h7w==",
       "license": "Apache-2.0"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
@@ -7726,9 +8033,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -7809,6 +8116,15 @@
       "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/denque": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz",
@@ -8333,6 +8649,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
@@ -9075,6 +9406,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "license": "MIT"
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -9084,6 +9421,15 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.6.tgz",
+      "integrity": "sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/execa": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
@@ -9357,6 +9703,26 @@
       "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==",
       "license": "MIT"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fontaine": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/fontaine/-/fontaine-0.6.0.tgz",
@@ -9406,6 +9772,43 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/form-data/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/formdata-polyfill": {
       "version": "4.0.10",
       "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
@@ -9431,6 +9834,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.12.tgz",
+      "integrity": "sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.12",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-2.0.0.tgz",
@@ -9795,6 +10225,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -9816,6 +10261,12 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -10120,6 +10571,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-electron": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-electron/-/is-electron-2.2.2.tgz",
+      "integrity": "sha512-FO/Rhvz5tuw4MCWkpMzHFKWD2LsfHzIb7i6MdPYZ/KW7AlxawyLkqdy+jPZP1WubqEADE3O4FUENlJHDfQASRg==",
+      "license": "MIT"
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -10394,6 +10851,12 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "license": "MIT"
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
     "node_modules/json-schema-to-typescript-lite": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-to-typescript-lite/-/json-schema-to-typescript-lite-15.0.0.tgz",
@@ -11101,9 +11564,9 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.30.18",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
-      "integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
+      "version": "0.30.19",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+      "integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.5"
@@ -11500,6 +11963,36 @@
         "url": "https://opencollective.com/mongoose"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.23.12",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.12.tgz",
+      "integrity": "sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
+    "node_modules/motion-v": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/motion-v/-/motion-v-1.7.2.tgz",
+      "integrity": "sha512-h2qfae2LUMLw5KIjQF5cT+r0MrLwP4AFDMOisyp25x/oDI3PHgjLHJrhHx77q8iBNegk4llt5p6deC12EJ5fvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "12.23.12",
+        "hey-listen": "^1.0.8",
+        "motion-dom": "12.23.12"
+      },
+      "peerDependencies": {
+        "@vueuse/core": ">=10.0.0",
+        "vue": ">=3.0.0"
+      }
+    },
     "node_modules/mpath": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz",
@@ -12331,6 +12824,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-finally": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
+      "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/p-limit": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
@@ -12373,6 +12875,53 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/p-queue": {
+      "version": "6.6.2",
+      "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
+      "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "eventemitter3": "^4.0.4",
+        "p-timeout": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-queue/node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
+    "node_modules/p-queue/node_modules/p-timeout": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
+      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
+      "license": "MIT",
+      "dependencies": {
+        "p-finally": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-retry": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz",
+      "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/retry": "0.12.0",
+        "retry": "^0.13.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/p-timeout": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-6.1.4.tgz",
@@ -13208,6 +13757,12 @@
       "integrity": "sha512-hHVTzba3wboROl0/aWRRG9dMytgH6ow//STBZh43l/wQgmMhYhOFi0EHWAPtoCz9IAUymsyP0TSBHkhgMEGNnQ==",
       "license": "MIT"
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/pump": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.3.tgz",
@@ -13495,9 +14050,9 @@
       }
     },
     "node_modules/reka-ui": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.4.1.tgz",
-      "integrity": "sha512-NB7DrCsODN8MH02BWtgiExygfFcuuZ5/PTn6fMgjppmFHqePvNhmSn1LEuF35nel6PFbA4v+gdj0IoGN1yZ+vw==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
+      "integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/dom": "^1.6.13",
@@ -13630,6 +14185,15 @@
       "integrity": "sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==",
       "license": "MIT"
     },
+    "node_modules/retry": {
+      "version": "0.13.1",
+      "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
+      "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -14456,6 +15020,15 @@
         "node": ">=16"
       }
     },
+    "node_modules/swrv": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/swrv/-/swrv-1.1.0.tgz",
+      "integrity": "sha512-pjllRDr2s0iTwiE5Isvip51dZGR7GjLH1gCSVyE8bQnbAx6xackXsFdojau+1O5u98yHF5V73HQGOFxKUXO9gQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "vue": ">=3.2.26 < 4"
+      }
+    },
     "node_modules/system-architecture": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/system-architecture/-/system-architecture-0.1.0.tgz",
@@ -14479,9 +15052,9 @@
       }
     },
     "node_modules/tailwind-variants": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-2.0.1.tgz",
-      "integrity": "sha512-1wt8c4PWO3jbZcKGBrjIV8cehWarREw1C2os0k8Mcq0nof/CbafNhUUjb0LRWiiRfAvDK6v1deswtHLsygKglw==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.1.1.tgz",
+      "integrity": "sha512-ftLXe3krnqkMHsuBTEmaVUXYovXtPyTK7ckEfDRXS8PBZx0bAUas+A0jYxuKA5b8qg++wvQ3d2MQ7l/xeZxbZQ==",
       "license": "MIT",
       "engines": {
         "node": ">=16.x",
@@ -14498,9 +15071,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.12.tgz",
-      "integrity": "sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==",
+      "version": "4.1.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
+      "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -14790,8 +15363,7 @@
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
       "integrity": "sha512-t5Fy/nfn+14LuOc2KNYg75vZqClpAiqscVvMygNnlsHBFpSXdJaYtXMcdNLpl/Qvc3P2cB3s6lOV51nqsFq4ag==",
-      "license": "MIT",
-      "optional": true
+      "license": "MIT"
     },
     "node_modules/unenv": {
       "version": "2.0.0-rc.19",
@@ -14807,9 +15379,9 @@
       }
     },
     "node_modules/unhead": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/unhead/-/unhead-2.0.14.tgz",
-      "integrity": "sha512-dRP6OCqtShhMVZQe1F4wdt/WsYl2MskxKK+cvfSo0lQnrPJ4oAUQEkxRg7pPP+vJENabhlir31HwAyHUv7wfMg==",
+      "version": "2.0.17",
+      "resolved": "https://registry.npmjs.org/unhead/-/unhead-2.0.17.tgz",
+      "integrity": "sha512-xX3PCtxaE80khRZobyWCVxeFF88/Tg9eJDcJWY9us727nsTC7C449B8BUfVBmiF2+3LjPcmqeoB2iuMs0U4oJQ==",
       "license": "MIT",
       "dependencies": {
         "hookable": "^5.5.3"
@@ -14861,30 +15433,62 @@
       }
     },
     "node_modules/unimport": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-5.2.0.tgz",
-      "integrity": "sha512-bTuAMMOOqIAyjV4i4UH7P07pO+EsVxmhOzQ2YJ290J6mkLUdozNhb5I/YoOEheeNADC03ent3Qj07X0fWfUpmw==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-5.4.0.tgz",
+      "integrity": "sha512-g/OLFZR2mEfqbC6NC9b2225eCJGvufxq34mj6kM3OmI5gdSL0qyqtnv+9qmsGpAmnzSl6x0IWZj4W+8j2hLkMA==",
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.15.0",
         "escape-string-regexp": "^5.0.0",
         "estree-walker": "^3.0.3",
-        "local-pkg": "^1.1.1",
-        "magic-string": "^0.30.17",
-        "mlly": "^1.7.4",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
         "pathe": "^2.0.3",
         "picomatch": "^4.0.3",
-        "pkg-types": "^2.2.0",
+        "pkg-types": "^2.3.0",
         "scule": "^1.3.0",
         "strip-literal": "^3.0.0",
-        "tinyglobby": "^0.2.14",
-        "unplugin": "^2.3.5",
-        "unplugin-utils": "^0.2.4"
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^2.3.10",
+        "unplugin-utils": "^0.3.0"
       },
       "engines": {
         "node": ">=18.12.0"
       }
     },
+    "node_modules/unimport/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/unimport/node_modules/unplugin-utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.0.tgz",
+      "integrity": "sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
+      }
+    },
     "node_modules/unixify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unixify/-/unixify-1.0.0.tgz",
@@ -14910,9 +15514,9 @@
       }
     },
     "node_modules/unplugin": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.8.tgz",
-      "integrity": "sha512-lkaSIlxceytPyt9yfb1h7L9jDFqwMqvUZeGsKB7Z8QrvAO3xZv2S+xMQQYzxk0AGJHcQhbcvhKEstrMy99jnuQ==",
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-2.3.10.tgz",
+      "integrity": "sha512-6NCPkv1ClwH+/BGE9QeoTIl09nuiAt0gS28nn1PvYXsGKRwM2TCbFA2QiilmehPDTXIe684k4rZI1yl3A1PCUw==",
       "license": "MIT",
       "dependencies": {
         "@jridgewell/remapping": "^2.3.5",
@@ -14924,63 +15528,6 @@
         "node": ">=18.12.0"
       }
     },
-    "node_modules/unplugin-auto-import": {
-      "version": "19.3.0",
-      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-19.3.0.tgz",
-      "integrity": "sha512-iIi0u4Gq2uGkAOGqlPJOAMI8vocvjh1clGTfSK4SOrJKrt+tirrixo/FjgBwXQNNdS7ofcr7OxzmOb/RjWxeEQ==",
-      "license": "MIT",
-      "dependencies": {
-        "local-pkg": "^1.1.1",
-        "magic-string": "^0.30.17",
-        "picomatch": "^4.0.2",
-        "unimport": "^4.2.0",
-        "unplugin": "^2.3.4",
-        "unplugin-utils": "^0.2.4"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@nuxt/kit": "^3.2.2",
-        "@vueuse/core": "*"
-      },
-      "peerDependenciesMeta": {
-        "@nuxt/kit": {
-          "optional": true
-        },
-        "@vueuse/core": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/unplugin-auto-import/node_modules/unimport": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/unimport/-/unimport-4.2.0.tgz",
-      "integrity": "sha512-mYVtA0nmzrysnYnyb3ALMbByJ+Maosee2+WyE0puXl+Xm2bUwPorPaaeZt0ETfuroPOtG8jj1g/qeFZ6buFnag==",
-      "license": "MIT",
-      "dependencies": {
-        "acorn": "^8.14.1",
-        "escape-string-regexp": "^5.0.0",
-        "estree-walker": "^3.0.3",
-        "local-pkg": "^1.1.1",
-        "magic-string": "^0.30.17",
-        "mlly": "^1.7.4",
-        "pathe": "^2.0.3",
-        "picomatch": "^4.0.2",
-        "pkg-types": "^2.1.0",
-        "scule": "^1.3.0",
-        "strip-literal": "^3.0.0",
-        "tinyglobby": "^0.2.12",
-        "unplugin": "^2.2.2",
-        "unplugin-utils": "^0.2.4"
-      },
-      "engines": {
-        "node": ">=18.12.0"
-      }
-    },
     "node_modules/unplugin-utils": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.2.5.tgz",
@@ -14998,19 +15545,19 @@
       }
     },
     "node_modules/unplugin-vue-components": {
-      "version": "28.8.0",
-      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-28.8.0.tgz",
-      "integrity": "sha512-2Q6ZongpoQzuXDK0ZsVzMoshH0MWZQ1pzVL538G7oIDKRTVzHjppBDS8aB99SADGHN3lpGU7frraCG6yWNoL5Q==",
+      "version": "29.1.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-29.1.0.tgz",
+      "integrity": "sha512-z/9ACPXth199s9aCTCdKZAhe5QGOpvzJYP+Hkd0GN1/PpAmsu+W3UlRY3BJAewPqQxh5xi56+Og6mfiCV1Jzpg==",
       "license": "MIT",
       "dependencies": {
         "chokidar": "^3.6.0",
-        "debug": "^4.4.1",
-        "local-pkg": "^1.1.1",
-        "magic-string": "^0.30.17",
-        "mlly": "^1.7.4",
-        "tinyglobby": "^0.2.14",
-        "unplugin": "^2.3.5",
-        "unplugin-utils": "^0.2.4"
+        "debug": "^4.4.3",
+        "local-pkg": "^1.1.2",
+        "magic-string": "^0.30.19",
+        "mlly": "^1.8.0",
+        "tinyglobby": "^0.2.15",
+        "unplugin": "^2.3.10",
+        "unplugin-utils": "^0.3.0"
       },
       "engines": {
         "node": ">=14"
@@ -15056,7 +15603,19 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/unplugin-vue-components/node_modules/picomatch": {
+    "node_modules/unplugin-vue-components/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/readdirp/node_modules/picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
@@ -15068,16 +15627,36 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/unplugin-vue-components/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+    "node_modules/unplugin-vue-components/node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
       "license": "MIT",
       "dependencies": {
-        "picomatch": "^2.2.1"
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
       },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/unplugin-utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.0.tgz",
+      "integrity": "sha512-JLoggz+PvLVMJo+jZt97hdIIIZ2yTzGgft9e9q8iMrC4ewufl62ekeW7mixBghonn2gVb/ICjyvlmOCUBnJLQg==",
+      "license": "MIT",
+      "dependencies": {
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=20.19.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sxzz"
       }
     },
     "node_modules/unplugin-vue-router": {
@@ -15864,9 +16443,9 @@
       }
     },
     "node_modules/vue-component-type-helpers": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.0.6.tgz",
-      "integrity": "sha512-6CRM8X7EJqWCJOiKPvSLQG+hJPb/Oy2gyJx3pLjUEhY7PuaCthQu3e0zAGI1lqUBobrrk9IT0K8sG2GsCluxoQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-3.1.0.tgz",
+      "integrity": "sha512-cC1pYNRZkSS1iCvdlaMbbg2sjDwxX098FucEjtz9Yig73zYjWzQsnMe5M9H8dRNv55hAIDGUI29hF2BEUA4FMQ==",
       "license": "MIT"
     },
     "node_modules/vue-devtools-stub": {
@@ -16384,9 +16963,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.3.tgz",
-      "integrity": "sha512-1neef4bMce1hNTrxvHVKxWjKfGDn0oAli3Wy1Uwb7TRO1+wEwoZUZNP1NXIEESybOBiFnBOhI6a4m6tCLE8dog==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.11.tgz",
+      "integrity": "sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==",
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
diff --git a/package.json b/package.json
index 289240f..5120588 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,9 @@
     "@headlessui/vue": "^1.7.23",
     "@heroicons/vue": "^2.2.0",
     "@nuxt/eslint": "^1.9.0",
-    "@nuxt/ui": "^3.3.2",
+    "@nuxt/ui": "^4.0.0",
     "@nuxtjs/plausible": "^1.2.0",
+    "@slack/web-api": "^7.10.0",
     "bcryptjs": "^3.0.2",
     "chrono-node": "^2.8.4",
     "cloudinary": "^2.7.0",
diff --git a/public/background-dither.png b/public/background-dither.png
new file mode 100644
index 0000000..b06849a
Binary files /dev/null and b/public/background-dither.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 18993ad..0000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/ghosties/Ghost-Disbelieving.png b/public/ghosties/Ghost-Disbelieving.png
new file mode 100644
index 0000000..c8e5118
Binary files /dev/null and b/public/ghosties/Ghost-Disbelieving.png differ
diff --git a/public/ghosties/Ghost-Disbelieving.svg b/public/ghosties/Ghost-Disbelieving.svg
new file mode 100644
index 0000000..ab4634c
--- /dev/null
+++ b/public/ghosties/Ghost-Disbelieving.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="135px" height="129px" viewBox="0 0 135 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Ghost-Disbelieving Copy</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ghost-Disbelieving-Copy">
+            <g id="Bod" fill="#E58FFC">
+                <polygon id="Ectoball" points="59.75 0 59.75 1.79362973 50.7916667 1.79362973 50.7916667 3.58526875 43.6269907 3.58526875 43.6269907 7.16854678 34.6686574 7.16854678 34.6686574 10.7518248 27.5 10.7518248 27.5 16.1267419 22.125 16.1267419 22.125 21.5016589 16.7519907 21.5016589 16.7519907 28.668215 13.1666667 28.668215 13.1666667 37.6264101 9.58333333 37.6264101 9.58333333 44.7909754 7.79365741 44.7909754 7.79365741 53.7491705 6 53.7491705 6 75.2508295 7.79365741 75.2508295 7.79365741 84.2090246 9.58333333 84.2090246 9.58333333 91.3755806 13.1666667 91.3755806 13.1666667 100.333776 16.7519907 100.333776 16.7519907 107.498341 22.125 107.498341 22.125 112.873258 27.5 112.873258 27.5 118.250166 34.6686574 118.250166 34.6686574 121.831453 43.6269907 121.831453 43.6269907 125.414731 50.7916667 125.414731 50.7916667 127.208361 59.75 127.208361 59.75 129 81.25 129 81.25 127.208361 90.2083333 127.208361 90.2083333 125.414731 97.3769907 125.414731 97.3769907 121.831453 106.335324 121.831453 106.335324 118.250166 113.5 118.250166 113.5 112.873258 118.875 112.873258 118.875 107.498341 124.251991 107.498341 124.251991 100.333776 127.833333 100.333776 127.833333 91.3755806 131.416667 91.3755806 131.416667 84.2090246 133.210324 84.2090246 133.210324 75.2508295 135 75.2508295 135 53.7491705 133.210324 53.7491705 133.210324 44.7909754 131.416667 44.7909754 131.416667 37.6264101 127.833333 37.6264101 127.833333 28.668215 124.251991 28.668215 124.251991 21.5016589 118.875 21.5016589 118.875 16.1267419 113.5 16.1267419 113.5 10.7518248 106.335324 10.7518248 106.335324 7.16854678 97.3769907 7.16854678 97.3769907 3.58526875 90.2083333 3.58526875 90.2083333 1.79362973 81.25 1.79362973 81.25 0"></polygon>
+                <polygon id="Flagellum" points="1.35555319 82 1.35555319 83.3080672 0 83.3080672 0 98.9990253 1.35555319 98.9990253 1.35555319 100.309042 9.50101161 100.309042 9.50101161 104.231294 8.1434352 104.231294 8.1434352 106.847428 1.35555319 106.847428 1.35555319 108.153546 0 108.153546 0 114.693882 1.35555319 114.693882 1.35555319 116 10.8545416 116 10.8545416 114.693882 13.5696944 114.693882 13.5696944 112.079697 16.2848472 112.079697 16.2848472 109.463563 17.6444468 109.463563 17.6444468 104.231294 19 104.231294 19 83.3080672 17.6444468 83.3080672 17.6444468 82"></polygon>
+            </g>
+            <g id="Disbelieving-Face" transform="translate(39, 39)" fill="#000000">
+                <path d="M4.29107692,12.5 L4.29107692,13.75 L4.90297436,13.75 L4.90297436,15.0019873 L5.51682051,15.0019873 L5.51682051,15.6259936 L6.7425641,15.6259936 L6.7425641,16.2519873 L12.2574359,16.2519873 L12.2574359,15.6259936 L13.4831795,15.6259936 L13.4831795,15.0019873 L14.0950769,15.0019873 L14.0950769,13.75 L14.7089231,13.75 L14.7089231,12.5 L15.3208205,12.5 L15.3208205,7.5 L14.7089231,7.5 L14.7089231,6.24801272 L14.0950769,6.24801272 L14.0950769,5 L13.4831795,5 L13.4831795,4.37400636 L12.2574359,4.37400636 L12.2574359,3.75 L6.7425641,3.75 L6.7425641,4.37400636 L5.51682051,4.37400636 L5.51682051,5 L4.90297436,5 L4.90297436,6.24801272 L4.29107692,6.24801272 L4.29107692,7.5 L3.67723077,7.5 L3.67723077,12.5 L4.29107692,12.5 Z M0,13.1240064 L0,6.87400636 L0.611897436,6.87400636 L0.611897436,5 L1.22574359,5 L1.22574359,3.75 L1.83764103,3.75 L1.83764103,3.12400636 L2.45148718,3.12400636 L2.45148718,2.5 L3.06338462,2.5 L3.06338462,1.87400636 L3.67723077,1.87400636 L3.67723077,1.25 L4.29107692,1.25 L4.29107692,0.624006359 L6.12871795,0.624006359 L6.12871795,0 L12.8693333,0 L12.8693333,0.624006359 L14.7089231,0.624006359 L14.7089231,1.25 L15.3208205,1.25 L15.3208205,1.87400636 L15.9346667,1.87400636 L15.9346667,2.5 L16.5465641,2.5 L16.5465641,3.12400636 L17.1604103,3.12400636 L17.1604103,3.75 L17.7742564,3.75 L17.7742564,5 L18.3861538,5 L18.3861538,6.87400636 L19,6.87400636 L19,13.1240064 L18.3861538,13.1240064 L18.3861538,15.0019873 L17.7742564,15.0019873 L17.7742564,16.2519873 L17.1604103,16.2519873 L17.1604103,16.8759936 L16.5465641,16.8759936 L16.5465641,17.5019873 L15.9346667,17.5019873 L15.9346667,18.1259936 L15.3208205,18.1259936 L15.3208205,18.7519873 L14.7089231,18.7519873 L14.7089231,19.3759936 L12.8693333,19.3759936 L12.8693333,20 L6.12871795,20 L6.12871795,19.3759936 L4.29107692,19.3759936 L4.29107692,18.7519873 L3.67723077,18.7519873 L3.67723077,18.1259936 L3.06338462,18.1259936 L3.06338462,17.5019873 L2.45148718,17.5019873 L2.45148718,16.8759936 L1.83764103,16.8759936 L1.83764103,16.2519873 L1.22574359,16.2519873 L1.22574359,15.0019873 L0.611897436,15.0019873 L0.611897436,13.1240064 L0,13.1240064 Z" id="Eye---Left"></path>
+                <path d="M51.6541785,37.150159 L53.5444805,37.150159 L53.5444805,35.9049133 L54.8053501,35.9049133 L54.8053501,34.0380347 L55.4367872,34.0380347 L55.4367872,31.5455636 L56.0662197,31.5455636 L56.0662197,23.4524567 L55.4367872,23.4524567 L55.4367872,20.9619653 L54.8053501,20.9619653 L54.8053501,19.0950867 L53.5444805,19.0950867 L53.5444805,17.849841 L51.6541785,17.849841 L51.6541785,17.2282081 L45.3478261,17.2282081 L45.3478261,17.849841 L43.457524,17.849841 L43.457524,19.0950867 L42.1966545,19.0950867 L42.1966545,20.9619653 L41.567222,20.9619653 L41.567222,23.4524567 L40.9357849,23.4524567 L40.9357849,31.5455636 L41.567222,31.5455636 L41.567222,34.0380347 L42.1966545,34.0380347 L42.1966545,35.9049133 L43.457524,35.9049133 L43.457524,37.150159 L45.3478261,37.150159 L45.3478261,37.7717919 L51.6541785,37.7717919 L51.6541785,37.150159 Z M52.283611,11 L52.283611,11.621633 L54.8053501,11.621633 L54.8053501,12.8668786 L57.3270892,12.8668786 L57.3270892,14.114104 L59.2173913,14.114104 L59.2173913,15.3593497 L60.4782609,15.3593497 L60.4782609,17.2282081 L61.7391304,17.2282081 L61.7391304,19.7167197 L62.3705675,19.7167197 L62.3705675,22.8308237 L63,22.8308237 L63,32.1671966 L62.3705675,32.1671966 L62.3705675,35.2832803 L61.7391304,35.2832803 L61.7391304,37.7717919 L60.4782609,37.7717919 L60.4782609,39.6406503 L59.2173913,39.6406503 L59.2173913,40.8878757 L57.3270892,40.8878757 L57.3270892,42.1331214 L54.8053501,42.1331214 L54.8053501,43.378367 L52.283611,43.378367 L52.283611,44 L44.7183936,44 L44.7183936,43.378367 L42.1966545,43.378367 L42.1966545,42.1331214 L39.6749153,42.1331214 L39.6749153,40.8878757 L37.7826087,40.8878757 L37.7826087,39.6406503 L36.5217391,39.6406503 L36.5217391,37.7717919 L35.2608696,37.7717919 L35.2608696,35.2832803 L34.6314371,35.2832803 L34.6314371,32.1671966 L34,32.1671966 L34,22.8308237 L34.6314371,22.8308237 L34.6314371,19.7167197 L35.2608696,19.7167197 L35.2608696,17.2282081 L36.5217391,17.2282081 L36.5217391,15.3593497 L37.7826087,15.3593497 L37.7826087,14.114104 L39.6749153,14.114104 L39.6749153,12.8668786 L42.1966545,12.8668786 L42.1966545,11.621633 L44.7183936,11.621633 L44.7183936,11 L52.283611,11 Z" id="Mouth"></path>
+                <path d="M76.2910769,12.5 L76.2910769,13.75 L76.9029744,13.75 L76.9029744,15.0019873 L77.5168205,15.0019873 L77.5168205,15.6259936 L78.7425641,15.6259936 L78.7425641,16.2519873 L84.2574359,16.2519873 L84.2574359,15.6259936 L85.4831795,15.6259936 L85.4831795,15.0019873 L86.0950769,15.0019873 L86.0950769,13.75 L86.7089231,13.75 L86.7089231,12.5 L87.3208205,12.5 L87.3208205,7.5 L86.7089231,7.5 L86.7089231,6.24801272 L86.0950769,6.24801272 L86.0950769,5 L85.4831795,5 L85.4831795,4.37400636 L84.2574359,4.37400636 L84.2574359,3.75 L78.7425641,3.75 L78.7425641,4.37400636 L77.5168205,4.37400636 L77.5168205,5 L76.9029744,5 L76.9029744,6.24801272 L76.2910769,6.24801272 L76.2910769,7.5 L75.6772308,7.5 L75.6772308,12.5 L76.2910769,12.5 Z M72,13.1240064 L72,6.87400636 L72.6118974,6.87400636 L72.6118974,5 L73.2257436,5 L73.2257436,3.75 L73.837641,3.75 L73.837641,3.12400636 L74.4514872,3.12400636 L74.4514872,2.5 L75.0633846,2.5 L75.0633846,1.87400636 L75.6772308,1.87400636 L75.6772308,1.25 L76.2910769,1.25 L76.2910769,0.624006359 L78.1287179,0.624006359 L78.1287179,0 L84.8693333,0 L84.8693333,0.624006359 L86.7089231,0.624006359 L86.7089231,1.25 L87.3208205,1.25 L87.3208205,1.87400636 L87.9346667,1.87400636 L87.9346667,2.5 L88.5465641,2.5 L88.5465641,3.12400636 L89.1604103,3.12400636 L89.1604103,3.75 L89.7742564,3.75 L89.7742564,5 L90.3861538,5 L90.3861538,6.87400636 L91,6.87400636 L91,13.1240064 L90.3861538,13.1240064 L90.3861538,15.0019873 L89.7742564,15.0019873 L89.7742564,16.2519873 L89.1604103,16.2519873 L89.1604103,16.8759936 L88.5465641,16.8759936 L88.5465641,17.5019873 L87.9346667,17.5019873 L87.9346667,18.1259936 L87.3208205,18.1259936 L87.3208205,18.7519873 L86.7089231,18.7519873 L86.7089231,19.3759936 L84.8693333,19.3759936 L84.8693333,20 L78.1287179,20 L78.1287179,19.3759936 L76.2910769,19.3759936 L76.2910769,18.7519873 L75.6772308,18.7519873 L75.6772308,18.1259936 L75.0633846,18.1259936 L75.0633846,17.5019873 L74.4514872,17.5019873 L74.4514872,16.8759936 L73.837641,16.8759936 L73.837641,16.2519873 L73.2257436,16.2519873 L73.2257436,15.0019873 L72.6118974,15.0019873 L72.6118974,13.1240064 L72,13.1240064 Z" id="Eye---Right"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/ghosties/Ghost-Double-Take.png b/public/ghosties/Ghost-Double-Take.png
new file mode 100644
index 0000000..c174d2a
Binary files /dev/null and b/public/ghosties/Ghost-Double-Take.png differ
diff --git a/public/ghosties/Ghost-Double-Take.svg b/public/ghosties/Ghost-Double-Take.svg
new file mode 100644
index 0000000..af1f1d3
--- /dev/null
+++ b/public/ghosties/Ghost-Double-Take.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="135px" height="129px" viewBox="0 0 135 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Ghost-Double-Take  Copy</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ghost-Double-Take--Copy">
+            <g id="Bod" fill="#FF8C49">
+                <polygon id="Ectoball" points="59.75 0 59.75 1.79362973 50.7916667 1.79362973 50.7916667 3.58526875 43.6269907 3.58526875 43.6269907 7.16854678 34.6686574 7.16854678 34.6686574 10.7518248 27.5 10.7518248 27.5 16.1267419 22.125 16.1267419 22.125 21.5016589 16.7519907 21.5016589 16.7519907 28.668215 13.1666667 28.668215 13.1666667 37.6264101 9.58333333 37.6264101 9.58333333 44.7909754 7.79365741 44.7909754 7.79365741 53.7491705 6 53.7491705 6 75.2508295 7.79365741 75.2508295 7.79365741 84.2090246 9.58333333 84.2090246 9.58333333 91.3755806 13.1666667 91.3755806 13.1666667 100.333776 16.7519907 100.333776 16.7519907 107.498341 22.125 107.498341 22.125 112.873258 27.5 112.873258 27.5 118.250166 34.6686574 118.250166 34.6686574 121.831453 43.6269907 121.831453 43.6269907 125.414731 50.7916667 125.414731 50.7916667 127.208361 59.75 127.208361 59.75 129 81.25 129 81.25 127.208361 90.2083333 127.208361 90.2083333 125.414731 97.3769907 125.414731 97.3769907 121.831453 106.335324 121.831453 106.335324 118.250166 113.5 118.250166 113.5 112.873258 118.875 112.873258 118.875 107.498341 124.251991 107.498341 124.251991 100.333776 127.833333 100.333776 127.833333 91.3755806 131.416667 91.3755806 131.416667 84.2090246 133.210324 84.2090246 133.210324 75.2508295 135 75.2508295 135 53.7491705 133.210324 53.7491705 133.210324 44.7909754 131.416667 44.7909754 131.416667 37.6264101 127.833333 37.6264101 127.833333 28.668215 124.251991 28.668215 124.251991 21.5016589 118.875 21.5016589 118.875 16.1267419 113.5 16.1267419 113.5 10.7518248 106.335324 10.7518248 106.335324 7.16854678 97.3769907 7.16854678 97.3769907 3.58526875 90.2083333 3.58526875 90.2083333 1.79362973 81.25 1.79362973 81.25 0"></polygon>
+                <polygon id="Flagellum" points="1.35555319 82 1.35555319 83.3080672 0 83.3080672 0 98.9990253 1.35555319 98.9990253 1.35555319 100.309042 9.50101161 100.309042 9.50101161 104.231294 8.1434352 104.231294 8.1434352 106.847428 1.35555319 106.847428 1.35555319 108.153546 0 108.153546 0 114.693882 1.35555319 114.693882 1.35555319 116 10.8545416 116 10.8545416 114.693882 13.5696944 114.693882 13.5696944 112.079697 16.2848472 112.079697 16.2848472 109.463563 17.6444468 109.463563 17.6444468 104.231294 19 104.231294 19 83.3080672 17.6444468 83.3080672 17.6444468 82"></polygon>
+            </g>
+            <g id="Double-Take-Face" transform="translate(30, 50)" fill="#000000">
+                <path d="M17.6541785,26.150159 L19.5444805,26.150159 L19.5444805,24.9049133 L20.8053501,24.9049133 L20.8053501,23.0380347 L21.4367872,23.0380347 L21.4367872,20.5455636 L22.0662197,20.5455636 L22.0662197,12.4524567 L21.4367872,12.4524567 L21.4367872,9.96196532 L20.8053501,9.96196532 L20.8053501,8.09508669 L19.5444805,8.09508669 L19.5444805,6.84984102 L17.6541785,6.84984102 L17.6541785,6.22820805 L11.3478261,6.22820805 L11.3478261,6.84984102 L9.45752402,6.84984102 L9.45752402,8.09508669 L8.19665445,8.09508669 L8.19665445,9.96196532 L7.56722195,9.96196532 L7.56722195,12.4524567 L6.93578489,12.4524567 L6.93578489,20.5455636 L7.56722195,20.5455636 L7.56722195,23.0380347 L8.19665445,23.0380347 L8.19665445,24.9049133 L9.45752402,24.9049133 L9.45752402,26.150159 L11.3478261,26.150159 L11.3478261,26.7717919 L17.6541785,26.7717919 L17.6541785,26.150159 Z M18.283611,0 L18.283611,0.621632971 L20.8053501,0.621632971 L20.8053501,1.86687864 L23.3270892,1.86687864 L23.3270892,3.11410403 L25.2173913,3.11410403 L25.2173913,4.35934969 L26.4782609,4.35934969 L26.4782609,6.22820805 L27.7391304,6.22820805 L27.7391304,8.71671966 L28.3705675,8.71671966 L28.3705675,11.8308237 L29,11.8308237 L29,21.1671966 L28.3705675,21.1671966 L28.3705675,24.2832803 L27.7391304,24.2832803 L27.7391304,26.7717919 L26.4782609,26.7717919 L26.4782609,28.6406503 L25.2173913,28.6406503 L25.2173913,29.8878757 L23.3270892,29.8878757 L23.3270892,31.1331214 L20.8053501,31.1331214 L20.8053501,32.378367 L18.283611,32.378367 L18.283611,33 L10.7183936,33 L10.7183936,32.378367 L8.19665445,32.378367 L8.19665445,31.1331214 L5.67491532,31.1331214 L5.67491532,29.8878757 L3.7826087,29.8878757 L3.7826087,28.6406503 L2.52173913,28.6406503 L2.52173913,26.7717919 L1.26086957,26.7717919 L1.26086957,24.2832803 L0.631437064,24.2832803 L0.631437064,21.1671966 L0,21.1671966 L0,11.8308237 L0.631437064,11.8308237 L0.631437064,8.71671966 L1.26086957,8.71671966 L1.26086957,6.22820805 L2.52173913,6.22820805 L2.52173913,4.35934969 L3.7826087,4.35934969 L3.7826087,3.11410403 L5.67491532,3.11410403 L5.67491532,1.86687864 L8.19665445,1.86687864 L8.19665445,0.621632971 L10.7183936,0.621632971 L10.7183936,0 L18.283611,0 Z" id="Eye---Left"></path>
+                <polygon id="Mouth" points="64.3735661 26 64.3735661 26.5988557 65 26.5988557 65 31.3992371 64.3735661 31.3992371 64.3735661 32 33.6284289 32 33.6284289 31.3992371 33 31.3992371 33 26.5988557 33.6284289 26.5988557 33.6284289 26"></polygon>
+                <path d="M85.6541785,26.150159 L87.5444805,26.150159 L87.5444805,24.9049133 L88.8053501,24.9049133 L88.8053501,23.0380347 L89.4367872,23.0380347 L89.4367872,20.5455636 L90.0662197,20.5455636 L90.0662197,12.4524567 L89.4367872,12.4524567 L89.4367872,9.96196532 L88.8053501,9.96196532 L88.8053501,8.09508669 L87.5444805,8.09508669 L87.5444805,6.84984102 L85.6541785,6.84984102 L85.6541785,6.22820805 L79.3478261,6.22820805 L79.3478261,6.84984102 L77.457524,6.84984102 L77.457524,8.09508669 L76.1966545,8.09508669 L76.1966545,9.96196532 L75.567222,9.96196532 L75.567222,12.4524567 L74.9357849,12.4524567 L74.9357849,20.5455636 L75.567222,20.5455636 L75.567222,23.0380347 L76.1966545,23.0380347 L76.1966545,24.9049133 L77.457524,24.9049133 L77.457524,26.150159 L79.3478261,26.150159 L79.3478261,26.7717919 L85.6541785,26.7717919 L85.6541785,26.150159 Z M86.283611,0 L86.283611,0.621632971 L88.8053501,0.621632971 L88.8053501,1.86687864 L91.3270892,1.86687864 L91.3270892,3.11410403 L93.2173913,3.11410403 L93.2173913,4.35934969 L94.4782609,4.35934969 L94.4782609,6.22820805 L95.7391304,6.22820805 L95.7391304,8.71671966 L96.3705675,8.71671966 L96.3705675,11.8308237 L97,11.8308237 L97,21.1671966 L96.3705675,21.1671966 L96.3705675,24.2832803 L95.7391304,24.2832803 L95.7391304,26.7717919 L94.4782609,26.7717919 L94.4782609,28.6406503 L93.2173913,28.6406503 L93.2173913,29.8878757 L91.3270892,29.8878757 L91.3270892,31.1331214 L88.8053501,31.1331214 L88.8053501,32.378367 L86.283611,32.378367 L86.283611,33 L78.7183936,33 L78.7183936,32.378367 L76.1966545,32.378367 L76.1966545,31.1331214 L73.6749153,31.1331214 L73.6749153,29.8878757 L71.7826087,29.8878757 L71.7826087,28.6406503 L70.5217391,28.6406503 L70.5217391,26.7717919 L69.2608696,26.7717919 L69.2608696,24.2832803 L68.6314371,24.2832803 L68.6314371,21.1671966 L68,21.1671966 L68,11.8308237 L68.6314371,11.8308237 L68.6314371,8.71671966 L69.2608696,8.71671966 L69.2608696,6.22820805 L70.5217391,6.22820805 L70.5217391,4.35934969 L71.7826087,4.35934969 L71.7826087,3.11410403 L73.6749153,3.11410403 L73.6749153,1.86687864 L76.1966545,1.86687864 L76.1966545,0.621632971 L78.7183936,0.621632971 L78.7183936,0 L86.283611,0 Z" id="Eye---Right"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/ghosties/Ghost-Exasperated.png b/public/ghosties/Ghost-Exasperated.png
new file mode 100644
index 0000000..31dc074
Binary files /dev/null and b/public/ghosties/Ghost-Exasperated.png differ
diff --git a/public/ghosties/Ghost-Exasperated.svg b/public/ghosties/Ghost-Exasperated.svg
new file mode 100644
index 0000000..b81c9e4
--- /dev/null
+++ b/public/ghosties/Ghost-Exasperated.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="136px" height="129px" viewBox="0 0 136 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Ghost-Exasperated Copy</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ghost-Exasperated-Copy" transform="translate(0.6667, 0)">
+            <g id="Bod" fill="#FFDE17">
+                <polygon id="Ectoball" points="59.75 0 59.75 1.79362973 50.7916667 1.79362973 50.7916667 3.58526875 43.6269907 3.58526875 43.6269907 7.16854678 34.6686574 7.16854678 34.6686574 10.7518248 27.5 10.7518248 27.5 16.1267419 22.125 16.1267419 22.125 21.5016589 16.7519907 21.5016589 16.7519907 28.668215 13.1666667 28.668215 13.1666667 37.6264101 9.58333333 37.6264101 9.58333333 44.7909754 7.79365741 44.7909754 7.79365741 53.7491705 6 53.7491705 6 75.2508295 7.79365741 75.2508295 7.79365741 84.2090246 9.58333333 84.2090246 9.58333333 91.3755806 13.1666667 91.3755806 13.1666667 100.333776 16.7519907 100.333776 16.7519907 107.498341 22.125 107.498341 22.125 112.873258 27.5 112.873258 27.5 118.250166 34.6686574 118.250166 34.6686574 121.831453 43.6269907 121.831453 43.6269907 125.414731 50.7916667 125.414731 50.7916667 127.208361 59.75 127.208361 59.75 129 81.25 129 81.25 127.208361 90.2083333 127.208361 90.2083333 125.414731 97.3769907 125.414731 97.3769907 121.831453 106.335324 121.831453 106.335324 118.250166 113.5 118.250166 113.5 112.873258 118.875 112.873258 118.875 107.498341 124.251991 107.498341 124.251991 100.333776 127.833333 100.333776 127.833333 91.3755806 131.416667 91.3755806 131.416667 84.2090246 133.210324 84.2090246 133.210324 75.2508295 135 75.2508295 135 53.7491705 133.210324 53.7491705 133.210324 44.7909754 131.416667 44.7909754 131.416667 37.6264101 127.833333 37.6264101 127.833333 28.668215 124.251991 28.668215 124.251991 21.5016589 118.875 21.5016589 118.875 16.1267419 113.5 16.1267419 113.5 10.7518248 106.335324 10.7518248 106.335324 7.16854678 97.3769907 7.16854678 97.3769907 3.58526875 90.2083333 3.58526875 90.2083333 1.79362973 81.25 1.79362973 81.25 0"></polygon>
+                <polygon id="Flagellum" points="1.35555319 82 1.35555319 83.3080672 0 83.3080672 0 98.9990253 1.35555319 98.9990253 1.35555319 100.309042 9.50101161 100.309042 9.50101161 104.231294 8.1434352 104.231294 8.1434352 106.847428 1.35555319 106.847428 1.35555319 108.153546 0 108.153546 0 114.693882 1.35555319 114.693882 1.35555319 116 10.8545416 116 10.8545416 114.693882 13.5696944 114.693882 13.5696944 112.079697 16.2848472 112.079697 16.2848472 109.463563 17.6444468 109.463563 17.6444468 104.231294 19 104.231294 19 83.3080672 17.6444468 83.3080672 17.6444468 82"></polygon>
+            </g>
+            <g id="Exasperated-Face" transform="translate(30, 63)" fill="#000000">
+                <polygon id="Eye---Left" points="19.3948738 0 19.3948738 0.599046105 20 0.599046105 20 5.3990461 19.3948738 5.3990461 19.3948738 6 0.605126229 6 0.605126229 5.3990461 0 5.3990461 0 0.599046105 0.605126229 0.599046105 0.605126229 0"></polygon>
+                <polygon id="Mouth" points="64.3735661 13 64.3735661 13.5988557 65 13.5988557 65 18.3992371 64.3735661 18.3992371 64.3735661 19 33.6284289 19 33.6284289 18.3992371 33 18.3992371 33 13.5988557 33.6284289 13.5988557 33.6284289 13"></polygon>
+                <polygon id="Eye---Right" points="96.3948738 0 96.3948738 0.599046105 97 0.599046105 97 5.3990461 96.3948738 5.3990461 96.3948738 6 77.6051262 6 77.6051262 5.3990461 77 5.3990461 77 0.599046105 77.6051262 0.599046105 77.6051262 0"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/ghosties/Ghost-Mild.png b/public/ghosties/Ghost-Mild.png
new file mode 100644
index 0000000..4b86529
Binary files /dev/null and b/public/ghosties/Ghost-Mild.png differ
diff --git a/public/ghosties/Ghost-Mild.svg b/public/ghosties/Ghost-Mild.svg
new file mode 100644
index 0000000..1b3b325
--- /dev/null
+++ b/public/ghosties/Ghost-Mild.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="136px" height="129px" viewBox="0 0 136 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Ghost-Mild Copy</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ghost-Mild-Copy" transform="translate(0.3333, 0)">
+            <g id="Bod" fill="#EA2E69">
+                <polygon id="Ectoball" points="59.75 0 59.75 1.79362973 50.7916667 1.79362973 50.7916667 3.58526875 43.6269907 3.58526875 43.6269907 7.16854678 34.6686574 7.16854678 34.6686574 10.7518248 27.5 10.7518248 27.5 16.1267419 22.125 16.1267419 22.125 21.5016589 16.7519907 21.5016589 16.7519907 28.668215 13.1666667 28.668215 13.1666667 37.6264101 9.58333333 37.6264101 9.58333333 44.7909754 7.79365741 44.7909754 7.79365741 53.7491705 6 53.7491705 6 75.2508295 7.79365741 75.2508295 7.79365741 84.2090246 9.58333333 84.2090246 9.58333333 91.3755806 13.1666667 91.3755806 13.1666667 100.333776 16.7519907 100.333776 16.7519907 107.498341 22.125 107.498341 22.125 112.873258 27.5 112.873258 27.5 118.250166 34.6686574 118.250166 34.6686574 121.831453 43.6269907 121.831453 43.6269907 125.414731 50.7916667 125.414731 50.7916667 127.208361 59.75 127.208361 59.75 129 81.25 129 81.25 127.208361 90.2083333 127.208361 90.2083333 125.414731 97.3769907 125.414731 97.3769907 121.831453 106.335324 121.831453 106.335324 118.250166 113.5 118.250166 113.5 112.873258 118.875 112.873258 118.875 107.498341 124.251991 107.498341 124.251991 100.333776 127.833333 100.333776 127.833333 91.3755806 131.416667 91.3755806 131.416667 84.2090246 133.210324 84.2090246 133.210324 75.2508295 135 75.2508295 135 53.7491705 133.210324 53.7491705 133.210324 44.7909754 131.416667 44.7909754 131.416667 37.6264101 127.833333 37.6264101 127.833333 28.668215 124.251991 28.668215 124.251991 21.5016589 118.875 21.5016589 118.875 16.1267419 113.5 16.1267419 113.5 10.7518248 106.335324 10.7518248 106.335324 7.16854678 97.3769907 7.16854678 97.3769907 3.58526875 90.2083333 3.58526875 90.2083333 1.79362973 81.25 1.79362973 81.25 0"></polygon>
+                <polygon id="Flagellum" points="1.35555319 82 1.35555319 83.3080672 0 83.3080672 0 98.9990253 1.35555319 98.9990253 1.35555319 100.309042 9.50101161 100.309042 9.50101161 104.231294 8.1434352 104.231294 8.1434352 106.847428 1.35555319 106.847428 1.35555319 108.153546 0 108.153546 0 114.693882 1.35555319 114.693882 1.35555319 116 10.8545416 116 10.8545416 114.693882 13.5696944 114.693882 13.5696944 112.079697 16.2848472 112.079697 16.2848472 109.463563 17.6444468 109.463563 17.6444468 104.231294 19 104.231294 19 83.3080672 17.6444468 83.3080672 17.6444468 82"></polygon>
+            </g>
+            <g id="Mild-Face" transform="translate(50, 38)" fill="#000000">
+                <polygon id="Eye---Left" points="7.0724506 0.641835112 7.0724506 2.56938451 7.71428571 2.56938451 7.71428571 4.49897797 8.35816489 4.49897797 8.35816489 6.42652737 9 6.42652737 9 8.35612083 8.35816489 8.35612083 8.35816489 9 4.50102203 9 4.50102203 8.35612083 3.85918692 8.35612083 3.85918692 6.42652737 2.57142857 6.42652737 2.57142857 4.49897797 1.28571429 4.49897797 1.28571429 2.56938451 0 2.56938451 0 0.641835112 0.641835112 0.641835112 0.641835112 0 6.43061549 0 6.43061549 0.641835112"></polygon>
+                <polygon id="Mouth" points="40.3948738 25 40.3948738 25.5990461 41 25.5990461 41 30.3990461 40.3948738 30.3990461 40.3948738 31 21.6051262 31 21.6051262 30.3990461 21 30.3990461 21 25.5990461 21.6051262 25.5990461 21.6051262 25"></polygon>
+                <polygon id="Eye---Right" points="52.0724506 0.641835112 52.0724506 2.56938451 52.7142857 2.56938451 52.7142857 4.49897797 53.3581649 4.49897797 53.3581649 6.42652737 54 6.42652737 54 8.35612083 53.3581649 8.35612083 53.3581649 9 49.501022 9 49.501022 8.35612083 48.8591869 8.35612083 48.8591869 6.42652737 47.5714286 6.42652737 47.5714286 4.49897797 46.2857143 4.49897797 46.2857143 2.56938451 45 2.56938451 45 0.641835112 45.6418351 0.641835112 45.6418351 0 51.4306155 0 51.4306155 0.641835112"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/ghosties/Ghost-Sweet.png b/public/ghosties/Ghost-Sweet.png
new file mode 100644
index 0000000..a173037
Binary files /dev/null and b/public/ghosties/Ghost-Sweet.png differ
diff --git a/public/ghosties/Ghost-Sweet.svg b/public/ghosties/Ghost-Sweet.svg
new file mode 100644
index 0000000..f2eb8f8
--- /dev/null
+++ b/public/ghosties/Ghost-Sweet.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="136px" height="129px" viewBox="0 0 136 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Ghost-Sweet Copy</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ghost-Sweet-Copy" transform="translate(0.6667, 0)">
+            <g id="Bod" fill="#2FE17F">
+                <polygon id="Ectoball" points="59.75 0 59.75 1.79362973 50.7916667 1.79362973 50.7916667 3.58526875 43.6269907 3.58526875 43.6269907 7.16854678 34.6686574 7.16854678 34.6686574 10.7518248 27.5 10.7518248 27.5 16.1267419 22.125 16.1267419 22.125 21.5016589 16.7519907 21.5016589 16.7519907 28.668215 13.1666667 28.668215 13.1666667 37.6264101 9.58333333 37.6264101 9.58333333 44.7909754 7.79365741 44.7909754 7.79365741 53.7491705 6 53.7491705 6 75.2508295 7.79365741 75.2508295 7.79365741 84.2090246 9.58333333 84.2090246 9.58333333 91.3755806 13.1666667 91.3755806 13.1666667 100.333776 16.7519907 100.333776 16.7519907 107.498341 22.125 107.498341 22.125 112.873258 27.5 112.873258 27.5 118.250166 34.6686574 118.250166 34.6686574 121.831453 43.6269907 121.831453 43.6269907 125.414731 50.7916667 125.414731 50.7916667 127.208361 59.75 127.208361 59.75 129 81.25 129 81.25 127.208361 90.2083333 127.208361 90.2083333 125.414731 97.3769907 125.414731 97.3769907 121.831453 106.335324 121.831453 106.335324 118.250166 113.5 118.250166 113.5 112.873258 118.875 112.873258 118.875 107.498341 124.251991 107.498341 124.251991 100.333776 127.833333 100.333776 127.833333 91.3755806 131.416667 91.3755806 131.416667 84.2090246 133.210324 84.2090246 133.210324 75.2508295 135 75.2508295 135 53.7491705 133.210324 53.7491705 133.210324 44.7909754 131.416667 44.7909754 131.416667 37.6264101 127.833333 37.6264101 127.833333 28.668215 124.251991 28.668215 124.251991 21.5016589 118.875 21.5016589 118.875 16.1267419 113.5 16.1267419 113.5 10.7518248 106.335324 10.7518248 106.335324 7.16854678 97.3769907 7.16854678 97.3769907 3.58526875 90.2083333 3.58526875 90.2083333 1.79362973 81.25 1.79362973 81.25 0"></polygon>
+                <polygon id="Flagellum" points="1.35555319 82 1.35555319 83.3080672 0 83.3080672 0 98.9990253 1.35555319 98.9990253 1.35555319 100.309042 9.50101161 100.309042 9.50101161 104.231294 8.1434352 104.231294 8.1434352 106.847428 1.35555319 106.847428 1.35555319 108.153546 0 108.153546 0 114.693882 1.35555319 114.693882 1.35555319 116 10.8545416 116 10.8545416 114.693882 13.5696944 114.693882 13.5696944 112.079697 16.2848472 112.079697 16.2848472 109.463563 17.6444468 109.463563 17.6444468 104.231294 19 104.231294 19 83.3080672 17.6444468 83.3080672 17.6444468 82"></polygon>
+            </g>
+            <g id="Sweet-Face" transform="translate(37, 38)" fill="#000000">
+                <polygon id="Eye---Left" points="23 19.6117369 23 21.3724564 22.3585576 21.3724564 22.3585576 22 16.3179678 22 16.3179678 21.3724564 15.6765254 21.3724564 15.6765254 17.5392442 14.5202949 17.5392442 14.5202949 14.331577 13.5560885 14.331577 13.5560885 10.184593 12.5285549 10.184593 12.5285549 7.10483285 10.4734879 7.10483285 10.4734879 10.184593 9.44391154 10.184593 9.44391154 14.331577 8.48174793 14.331577 8.48174793 17.5392442 7.32551736 17.5392442 7.32551736 21.3724564 6.68203215 21.3724564 6.68203215 22 0.643485212 22 0.643485212 21.3724564 0 21.3724564 0 19.6117369 1.02753353 19.6117369 1.02753353 16.2801599 2.18580691 16.2801599 2.18580691 13.2643532 3.14797051 13.2643532 3.14797051 10.184593 4.17550404 10.184593 4.17550404 7.10483285 5.65449862 7.10483285 5.65449862 3.08175872 7.06812328 3.08175872 7.06812328 0.629542151 7.71160849 0.629542151 7.71160849 0 15.2924771 0 15.2924771 0.629542151 15.9339195 0.629542151 15.9339195 3.08175872 17.3455014 3.08175872 17.3455014 7.10483285 18.824496 7.10483285 18.824496 10.184593 19.8520295 10.184593 19.8520295 13.2643532 20.8182787 13.2643532 20.8182787 16.2801599 21.9724665 16.2801599 21.9724665 19.6117369"></polygon>
+                <polygon id="Mouth" points="50 35.6418351 50 43.3561208 49.3581649 43.3561208 49.3581649 44 41.6418351 44 41.6418351 43.3561208 41 43.3561208 41 35.6418351 41.6418351 35.6418351 41.6418351 35 49.3581649 35 49.3581649 35.6418351"></polygon>
+                <polygon id="Eye---Right" points="79 19.6117369 79 21.3724564 78.3585576 21.3724564 78.3585576 22 72.3179678 22 72.3179678 21.3724564 71.6765254 21.3724564 71.6765254 17.5392442 70.5202949 17.5392442 70.5202949 14.331577 69.5560885 14.331577 69.5560885 10.184593 68.5285549 10.184593 68.5285549 7.10483285 66.4734879 7.10483285 66.4734879 10.184593 65.4439115 10.184593 65.4439115 14.331577 64.4817479 14.331577 64.4817479 17.5392442 63.3255174 17.5392442 63.3255174 21.3724564 62.6820322 21.3724564 62.6820322 22 56.6434852 22 56.6434852 21.3724564 56 21.3724564 56 19.6117369 57.0275335 19.6117369 57.0275335 16.2801599 58.1858069 16.2801599 58.1858069 13.2643532 59.1479705 13.2643532 59.1479705 10.184593 60.175504 10.184593 60.175504 7.10483285 61.6544986 7.10483285 61.6544986 3.08175872 63.0681233 3.08175872 63.0681233 0.629542151 63.7116085 0.629542151 63.7116085 0 71.2924771 0 71.2924771 0.629542151 71.9339195 0.629542151 71.9339195 3.08175872 73.3455014 3.08175872 73.3455014 7.10483285 74.824496 7.10483285 74.824496 10.184593 75.8520295 10.184593 75.8520295 13.2643532 76.8182787 13.2643532 76.8182787 16.2801599 77.9724665 16.2801599 77.9724665 19.6117369"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/ghosties/Ghost-WTF.png b/public/ghosties/Ghost-WTF.png
new file mode 100644
index 0000000..19e70df
Binary files /dev/null and b/public/ghosties/Ghost-WTF.png differ
diff --git a/public/ghosties/Ghost-WTF.svg b/public/ghosties/Ghost-WTF.svg
new file mode 100644
index 0000000..9cbd097
--- /dev/null
+++ b/public/ghosties/Ghost-WTF.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="136px" height="129px" viewBox="0 0 136 129" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Ghost-WTF Copy</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ghost-WTF-Copy" transform="translate(0.3333, 0)">
+            <g id="Bod" fill="#0088A5">
+                <polygon id="Ectoball" points="59.75 0 59.75 1.79362973 50.7916667 1.79362973 50.7916667 3.58526875 43.6269907 3.58526875 43.6269907 7.16854678 34.6686574 7.16854678 34.6686574 10.7518248 27.5 10.7518248 27.5 16.1267419 22.125 16.1267419 22.125 21.5016589 16.7519907 21.5016589 16.7519907 28.668215 13.1666667 28.668215 13.1666667 37.6264101 9.58333333 37.6264101 9.58333333 44.7909754 7.79365741 44.7909754 7.79365741 53.7491705 6 53.7491705 6 75.2508295 7.79365741 75.2508295 7.79365741 84.2090246 9.58333333 84.2090246 9.58333333 91.3755806 13.1666667 91.3755806 13.1666667 100.333776 16.7519907 100.333776 16.7519907 107.498341 22.125 107.498341 22.125 112.873258 27.5 112.873258 27.5 118.250166 34.6686574 118.250166 34.6686574 121.831453 43.6269907 121.831453 43.6269907 125.414731 50.7916667 125.414731 50.7916667 127.208361 59.75 127.208361 59.75 129 81.25 129 81.25 127.208361 90.2083333 127.208361 90.2083333 125.414731 97.3769907 125.414731 97.3769907 121.831453 106.335324 121.831453 106.335324 118.250166 113.5 118.250166 113.5 112.873258 118.875 112.873258 118.875 107.498341 124.251991 107.498341 124.251991 100.333776 127.833333 100.333776 127.833333 91.3755806 131.416667 91.3755806 131.416667 84.2090246 133.210324 84.2090246 133.210324 75.2508295 135 75.2508295 135 53.7491705 133.210324 53.7491705 133.210324 44.7909754 131.416667 44.7909754 131.416667 37.6264101 127.833333 37.6264101 127.833333 28.668215 124.251991 28.668215 124.251991 21.5016589 118.875 21.5016589 118.875 16.1267419 113.5 16.1267419 113.5 10.7518248 106.335324 10.7518248 106.335324 7.16854678 97.3769907 7.16854678 97.3769907 3.58526875 90.2083333 3.58526875 90.2083333 1.79362973 81.25 1.79362973 81.25 0"></polygon>
+                <polygon id="Flagellum" points="1.35555319 82 1.35555319 83.3080672 0 83.3080672 0 98.9990253 1.35555319 98.9990253 1.35555319 100.309042 9.50101161 100.309042 9.50101161 104.231294 8.1434352 104.231294 8.1434352 106.847428 1.35555319 106.847428 1.35555319 108.153546 0 108.153546 0 114.693882 1.35555319 114.693882 1.35555319 116 10.8545416 116 10.8545416 114.693882 13.5696944 114.693882 13.5696944 112.079697 16.2848472 112.079697 16.2848472 109.463563 17.6444468 109.463563 17.6444468 104.231294 19 104.231294 19 83.3080672 17.6444468 83.3080672 17.6444468 82"></polygon>
+            </g>
+            <g id="WTF-Face" transform="translate(27, 38)" fill="#000000">
+                <path d="M14.8,38.7482888 L22.2,38.7482888 L22.2,38.12431 L24.0509804,38.12431 L24.0509804,36.8743652 L25.9,36.8743652 L25.9,35.6244204 L27.1333333,35.6244204 L27.1333333,33.7465224 L28.3666667,33.7465224 L28.3666667,31.24862 L29.6,31.24862 L29.6,28.1227644 L30.2156863,28.1227644 L30.2156863,16.8752484 L29.6,16.8752484 L29.6,13.7493928 L28.3666667,13.7493928 L28.3666667,11.2495032 L27.1333333,11.2495032 L27.1333333,9.3755796 L25.9,9.3755796 L25.9,8.1256348 L24.0509804,8.1256348 L24.0509804,6.8737028 L22.2,6.8737028 L22.2,6.249724 L14.8,6.249724 L14.8,6.8737028 L12.9509804,6.8737028 L12.9509804,8.1256348 L11.1,8.1256348 L11.1,9.3755796 L9.86666667,9.3755796 L9.86666667,11.2495032 L8.63333333,11.2495032 L8.63333333,13.7493928 L7.40196078,13.7493928 L7.40196078,16.8752484 L6.78431373,16.8752484 L6.78431373,28.1227644 L7.40196078,28.1227644 L7.40196078,31.24862 L8.63333333,31.24862 L8.63333333,33.7465224 L9.86666667,33.7465224 L9.86666667,35.6244204 L11.1,35.6244204 L11.1,36.8743652 L12.9509804,36.8743652 L12.9509804,38.12431 L14.8,38.12431 L14.8,38.7482888 Z M37,16.2512696 L37,28.7487304 L36.3843137,28.7487304 L36.3843137,32.4965776 L35.1509804,32.4965776 L35.1509804,35.6244204 L33.9176471,35.6244204 L33.9176471,37.498344 L32.6843137,37.498344 L32.6843137,39.3722676 L31.4509804,39.3722676 L31.4509804,40.6222124 L30.2156863,40.6222124 L30.2156863,41.8741444 L28.3666667,41.8741444 L28.3666667,43.1240892 L25.9,43.1240892 L25.9,44.374034 L22.8176471,44.374034 L22.8176471,45 L14.1843137,45 L14.1843137,44.374034 L11.1,44.374034 L11.1,43.1240892 L8.63333333,43.1240892 L8.63333333,41.8741444 L6.78431373,41.8741444 L6.78431373,40.6222124 L5.55098039,40.6222124 L5.55098039,39.3722676 L4.31764706,39.3722676 L4.31764706,37.498344 L3.08235294,37.498344 L3.08235294,35.6244204 L1.85098039,35.6244204 L1.85098039,32.4965776 L0.617647059,32.4965776 L0.617647059,28.7487304 L0,28.7487304 L0,16.2512696 L0.617647059,16.2512696 L0.617647059,12.499448 L1.85098039,12.499448 L1.85098039,9.3755796 L3.08235294,9.3755796 L3.08235294,7.49768161 L4.31764706,7.49768161 L4.31764706,5.623758 L5.55098039,5.623758 L5.55098039,4.3738132 L6.78431373,4.3738132 L6.78431373,3.1238684 L8.63333333,3.1238684 L8.63333333,1.8739236 L11.1,1.8739236 L11.1,0.623978803 L14.1843137,0.623978803 L14.1843137,0 L22.8176471,0 L22.8176471,0.623978803 L25.9,0.623978803 L25.9,1.8739236 L28.3666667,1.8739236 L28.3666667,3.1238684 L30.2156863,3.1238684 L30.2156863,4.3738132 L31.4509804,4.3738132 L31.4509804,5.623758 L32.6843137,5.623758 L32.6843137,7.49768161 L33.9176471,7.49768161 L33.9176471,9.3755796 L35.1509804,9.3755796 L35.1509804,12.499448 L36.3843137,12.499448 L36.3843137,16.2512696 L37,16.2512696 Z" id="Eye---Left"></path>
+                <polygon id="Mouth" points="70.3735661 38 70.3735661 38.5988557 71 38.5988557 71 43.3992371 70.3735661 43.3992371 70.3735661 44 39.6284289 44 39.6284289 43.3992371 39 43.3992371 39 38.5988557 39.6284289 38.5988557 39.6284289 38"></polygon>
+                <path d="M90.6541785,38.150159 L92.5444805,38.150159 L92.5444805,36.9049133 L93.8053501,36.9049133 L93.8053501,35.0380347 L94.4367872,35.0380347 L94.4367872,32.5455636 L95.0662197,32.5455636 L95.0662197,24.4524567 L94.4367872,24.4524567 L94.4367872,21.9619653 L93.8053501,21.9619653 L93.8053501,20.0950867 L92.5444805,20.0950867 L92.5444805,18.849841 L90.6541785,18.849841 L90.6541785,18.2282081 L84.3478261,18.2282081 L84.3478261,18.849841 L82.457524,18.849841 L82.457524,20.0950867 L81.1966545,20.0950867 L81.1966545,21.9619653 L80.567222,21.9619653 L80.567222,24.4524567 L79.9357849,24.4524567 L79.9357849,32.5455636 L80.567222,32.5455636 L80.567222,35.0380347 L81.1966545,35.0380347 L81.1966545,36.9049133 L82.457524,36.9049133 L82.457524,38.150159 L84.3478261,38.150159 L84.3478261,38.7717919 L90.6541785,38.7717919 L90.6541785,38.150159 Z M91.283611,12 L91.283611,12.621633 L93.8053501,12.621633 L93.8053501,13.8668786 L96.3270892,13.8668786 L96.3270892,15.114104 L98.2173913,15.114104 L98.2173913,16.3593497 L99.4782609,16.3593497 L99.4782609,18.2282081 L100.73913,18.2282081 L100.73913,20.7167197 L101.370567,20.7167197 L101.370567,23.8308237 L102,23.8308237 L102,33.1671966 L101.370567,33.1671966 L101.370567,36.2832803 L100.73913,36.2832803 L100.73913,38.7717919 L99.4782609,38.7717919 L99.4782609,40.6406503 L98.2173913,40.6406503 L98.2173913,41.8878757 L96.3270892,41.8878757 L96.3270892,43.1331214 L93.8053501,43.1331214 L93.8053501,44.378367 L91.283611,44.378367 L91.283611,45 L83.7183936,45 L83.7183936,44.378367 L81.1966545,44.378367 L81.1966545,43.1331214 L78.6749153,43.1331214 L78.6749153,41.8878757 L76.7826087,41.8878757 L76.7826087,40.6406503 L75.5217391,40.6406503 L75.5217391,38.7717919 L74.2608696,38.7717919 L74.2608696,36.2832803 L73.6314371,36.2832803 L73.6314371,33.1671966 L73,33.1671966 L73,23.8308237 L73.6314371,23.8308237 L73.6314371,20.7167197 L74.2608696,20.7167197 L74.2608696,18.2282081 L75.5217391,18.2282081 L75.5217391,16.3593497 L76.7826087,16.3593497 L76.7826087,15.114104 L78.6749153,15.114104 L78.6749153,13.8668786 L81.1966545,13.8668786 L81.1966545,12.621633 L83.7183936,12.621633 L83.7183936,12 L91.283611,12 Z" id="Eye---Right"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/scripts/fix-avatars.js b/scripts/fix-avatars.js
new file mode 100644
index 0000000..4b102ee
--- /dev/null
+++ b/scripts/fix-avatars.js
@@ -0,0 +1,58 @@
+import mongoose from "mongoose";
+import dotenv from "dotenv";
+
+// Load environment variables
+dotenv.config();
+
+const memberSchema = new mongoose.Schema({
+  name: String,
+  avatar: String,
+  email: String,
+});
+
+const Member = mongoose.model("Member", memberSchema);
+
+const validAvatars = [
+  "disbelieving",
+  "double-take",
+  "exasperated",
+  "mild",
+  "sweet",
+];
+
+async function fixAvatars() {
+  try {
+    await mongoose.connect(
+      process.env.NUXT_MONGODB_URI || process.env.MONGODB_URI,
+    );
+    console.log("Connected to MongoDB");
+
+    const members = await Member.find({ avatar: { $exists: true, $ne: "" } });
+    console.log(`\nFound ${members.length} members with avatars set`);
+
+    for (const member of members) {
+      if (!validAvatars.includes(member.avatar?.toLowerCase())) {
+        console.log(`\n❌ Invalid avatar found:`);
+        console.log(`   Email: ${member.email}`);
+        console.log(`   Name: ${member.name}`);
+        console.log(`   Current avatar: "${member.avatar}"`);
+
+        // Set to a default valid avatar
+        member.avatar = "mild";
+        await member.save();
+        console.log(`   ✅ Fixed to: "mild"`);
+      } else {
+        console.log(`✓ ${member.email} - avatar: "${member.avatar}" (valid)`);
+      }
+    }
+
+    await mongoose.disconnect();
+    console.log("\n✅ Done!");
+    process.exit(0);
+  } catch (error) {
+    console.error("Error:", error);
+    process.exit(1);
+  }
+}
+
+fixAvatars();
diff --git a/scripts/setup-helcim-plans.js b/scripts/setup-helcim-plans.js
new file mode 100644
index 0000000..fbbc345
--- /dev/null
+++ b/scripts/setup-helcim-plans.js
@@ -0,0 +1,121 @@
+// Script to create missing Helcim payment plans
+// Run with: node scripts/setup-helcim-plans.js
+
+import { config } from "dotenv";
+import { fileURLToPath } from "url";
+import { dirname, resolve } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Load .env file
+config({ path: resolve(__dirname, "../.env") });
+
+const HELCIM_API_BASE = "https://api.helcim.com/v2";
+
+async function createPlan(name, amount) {
+  const helcimToken = process.env.NUXT_PUBLIC_HELCIM_TOKEN;
+
+  if (!helcimToken) {
+    throw new Error(
+      "NUXT_PUBLIC_HELCIM_TOKEN environment variable not set in .env file",
+    );
+  }
+
+  console.log(`Creating plan: ${name} ($${amount}/month)...`);
+
+  const response = await fetch(`${HELCIM_API_BASE}/payment-plans`, {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "content-type": "application/json",
+      "api-token": helcimToken,
+    },
+    body: JSON.stringify({
+      name: name,
+      description: `Ghost Guild ${name}`,
+      type: "subscription",
+      status: "active",
+      currency: "CAD",
+      setupAmount: 0,
+      recurringAmount: parseFloat(amount),
+      billingPeriod: "monthly",
+      billingPeriodIncrements: 1,
+      dateBilling: "Sign-up",
+      termType: "forever",
+      freeTrialPeriod: 0,
+      taxType: "customer",
+      paymentMethod: "card",
+    }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Failed to create plan: ${errorText}`);
+  }
+
+  const planData = await response.json();
+  console.log(`✓ Created plan ID: ${planData.id}`);
+
+  return planData;
+}
+
+async function main() {
+  console.log("Setting up Helcim payment plans...\n");
+
+  const plans = [
+    { name: "Ghost Guild - Member ($15)", amount: 15, tier: "MEMBER" },
+    { name: "Ghost Guild - Advocate ($30)", amount: 30, tier: "ADVOCATE" },
+    { name: "Ghost Guild - Champion ($50)", amount: 50, tier: "CHAMPION" },
+  ];
+
+  const results = [];
+
+  for (const plan of plans) {
+    try {
+      const result = await createPlan(plan.name, plan.amount);
+      results.push({
+        tier: plan.tier,
+        planId: result.id,
+        amount: plan.amount,
+      });
+    } catch (error) {
+      console.error(`✗ Failed to create ${plan.name}:`, error.message);
+    }
+  }
+
+  console.log("\n--- Plan IDs to update in contributions.js ---");
+  results.forEach(({ tier, planId, amount }) => {
+    console.log(`${tier}: helcimPlanId: ${planId}, // $${amount}/month`);
+  });
+
+  console.log("\n--- Copy this to update server/config/contributions.js ---");
+  console.log(`
+  MEMBER: {
+    value: '15',
+    amount: 15,
+    label: '$15 - I can sustain the community',
+    tier: 'member',
+    helcimPlanId: ${results.find((r) => r.tier === "MEMBER")?.planId || "null"},
+    ...
+  },
+  ADVOCATE: {
+    value: '30',
+    amount: 30,
+    label: '$30 - I can support others too',
+    tier: 'advocate',
+    helcimPlanId: ${results.find((r) => r.tier === "ADVOCATE")?.planId || "null"},
+    ...
+  },
+  CHAMPION: {
+    value: '50',
+    amount: 50,
+    label: '$50 - I want to sponsor multiple members',
+    tier: 'champion',
+    helcimPlanId: ${results.find((r) => r.tier === "CHAMPION")?.planId || "null"},
+    ...
+  }
+  `);
+}
+
+main().catch(console.error);
diff --git a/server/api/auth/login.post.js b/server/api/auth/login.post.js
index 27d07b5..afc9fc1 100644
--- a/server/api/auth/login.post.js
+++ b/server/api/auth/login.post.js
@@ -1,55 +1,57 @@
 // server/api/auth/login.post.js
-import jwt from 'jsonwebtoken'
-import { Resend } from 'resend'
-import Member from '../../models/member.js'
-import { connectDB } from '../../utils/mongoose.js'
+import jwt from "jsonwebtoken";
+import { Resend } from "resend";
+import Member from "../../models/member.js";
+import { connectDB } from "../../utils/mongoose.js";
 
-const resend = new Resend(process.env.RESEND_API_KEY)
+const resend = new Resend(process.env.RESEND_API_KEY);
 
 export default defineEventHandler(async (event) => {
   // Connect to database
-  await connectDB()
-  
-  const { email } = await readBody(event)
-  
+  await connectDB();
+
+  const { email } = await readBody(event);
+
   if (!email) {
-    throw createError({ 
-      statusCode: 400, 
-      statusMessage: 'Email is required' 
-    })
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Email is required",
+    });
   }
-  
-  const member = await Member.findOne({ email })
+
+  const member = await Member.findOne({ email });
   if (!member) {
-    throw createError({ 
-      statusCode: 404, 
-      statusMessage: 'No account found with that email address' 
-    })
+    throw createError({
+      statusCode: 404,
+      statusMessage: "No account found with that email address",
+    });
   }
-  
+
   // Generate magic link token
   const token = jwt.sign(
-    { memberId: member._id }, 
+    { memberId: member._id },
     process.env.JWT_SECRET,
-    { expiresIn: '15m' } // Shorter expiry for security
-  )
-  
+    { expiresIn: "15m" }, // Shorter expiry for security
+  );
+
   // Get the base URL for the magic link
-  const headers = getHeaders(event)
-  const baseUrl = process.env.BASE_URL || `${headers.host?.includes('localhost') ? 'http' : 'https'}://${headers.host}`
-  
+  const headers = getHeaders(event);
+  const baseUrl =
+    process.env.BASE_URL ||
+    `${headers.host?.includes("localhost") ? "http" : "https"}://${headers.host}`;
+
   // Send magic link via Resend
   try {
     await resend.emails.send({
-      from: 'Ghost Guild <noreply@ghostguild.org>',
+      from: "Ghost Guild <ghostguild@babyghosts.org>",
       to: email,
-      subject: 'Your Ghost Guild login link',
+      subject: "Your Ghost Guild login link",
       html: `
         <div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto;">
           <h2 style="color: #2563eb;">Welcome back to Ghost Guild!</h2>
           <p>Click the button below to sign in to your account:</p>
           <div style="text-align: center; margin: 30px 0;">
-            <a href="${baseUrl}/api/auth/verify?token=${token}" 
+            <a href="${baseUrl}/api/auth/verify?token=${token}"
                style="background-color: #2563eb; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; display: inline-block;">
               Sign In to Ghost Guild
             </a>
@@ -58,19 +60,18 @@ export default defineEventHandler(async (event) => {
             This link will expire in 15 minutes for security. If you didn't request this login link, you can safely ignore this email.
           </p>
         </div>
-      `
-    })
-    
-    return { 
-      success: true, 
-      message: 'Login link sent to your email' 
-    }
-    
+      `,
+    });
+
+    return {
+      success: true,
+      message: "Login link sent to your email",
+    };
   } catch (error) {
-    console.error('Failed to send email:', error)
-    throw createError({ 
-      statusCode: 500, 
-      statusMessage: 'Failed to send login email. Please try again.' 
-    })
+    console.error("Failed to send email:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to send login email. Please try again.",
+    });
   }
-})
\ No newline at end of file
+});
diff --git a/server/api/auth/member.get.js b/server/api/auth/member.get.js
index 6a7d62f..fdbbac4 100644
--- a/server/api/auth/member.get.js
+++ b/server/api/auth/member.get.js
@@ -1,45 +1,59 @@
-import jwt from 'jsonwebtoken'
-import Member from '../../models/member.js'
-import { connectDB } from '../../utils/mongoose.js'
+import jwt from "jsonwebtoken";
+import Member from "../../models/member.js";
+import { connectDB } from "../../utils/mongoose.js";
 
 export default defineEventHandler(async (event) => {
-  await connectDB()
-  
-  const token = getCookie(event, 'auth-token')
-  console.log('Auth check - token found:', !!token)
-  
+  await connectDB();
+
+  const token = getCookie(event, "auth-token");
+  console.log("Auth check - token found:", !!token);
+
   if (!token) {
-    console.log('No auth token found in cookies')
-    throw createError({ 
-      statusCode: 401, 
-      statusMessage: 'Not authenticated' 
-    })
+    console.log("No auth token found in cookies");
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Not authenticated",
+    });
   }
-  
+
   try {
-    const decoded = jwt.verify(token, process.env.JWT_SECRET)
-    const member = await Member.findById(decoded.memberId).select('-__v')
-    
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    const member = await Member.findById(decoded.memberId).select("-__v");
+
     if (!member) {
-      throw createError({ 
-        statusCode: 404, 
-        statusMessage: 'Member not found' 
-      })
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Member not found",
+      });
     }
-    
+
     return {
+      _id: member._id,
       id: member._id,
       email: member.email,
       name: member.name,
       circle: member.circle,
       contributionTier: member.contributionTier,
-      membershipLevel: `${member.circle}-${member.contributionTier}`
-    }
+      membershipLevel: `${member.circle}-${member.contributionTier}`,
+      // Profile fields
+      pronouns: member.pronouns,
+      timeZone: member.timeZone,
+      avatar: member.avatar,
+      studio: member.studio,
+      bio: member.bio,
+      skills: member.skills,
+      location: member.location,
+      socialLinks: member.socialLinks,
+      offering: member.offering,
+      lookingFor: member.lookingFor,
+      showInDirectory: member.showInDirectory,
+      privacy: member.privacy,
+    };
   } catch (err) {
-    console.error('Token verification error:', err)
-    throw createError({ 
-      statusCode: 401, 
-      statusMessage: 'Invalid or expired token' 
-    })
+    console.error("Token verification error:", err);
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid or expired token",
+    });
   }
-})
\ No newline at end of file
+});
diff --git a/server/api/contributions/options.get.js b/server/api/contributions/options.get.js
new file mode 100644
index 0000000..5d0f4b2
--- /dev/null
+++ b/server/api/contributions/options.get.js
@@ -0,0 +1,19 @@
+// Get available contribution options
+import { getContributionOptions } from '../../config/contributions.js'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const options = getContributionOptions()
+
+    return {
+      success: true,
+      options
+    }
+  } catch (error) {
+    console.error('Error fetching contribution options:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to fetch contribution options'
+    })
+  }
+})
diff --git a/server/api/events/[id]/cancel-registration.post.js b/server/api/events/[id]/cancel-registration.post.js
new file mode 100644
index 0000000..b8a84d2
--- /dev/null
+++ b/server/api/events/[id]/cancel-registration.post.js
@@ -0,0 +1,69 @@
+import Event from '../../../models/event';
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, 'id');
+  const body = await readBody(event);
+  const { email } = body;
+
+  if (!email) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Email is required'
+    });
+  }
+
+  try {
+    // Check if id is a valid ObjectId or treat as slug
+    const isObjectId = /^[0-9a-fA-F]{24}$/.test(id);
+    const query = isObjectId
+      ? { $or: [{ _id: id }, { slug: id }] }
+      : { slug: id };
+
+    const eventDoc = await Event.findOne(query);
+
+    if (!eventDoc) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Event not found'
+      });
+    }
+
+    // Find the registration index
+    const registrationIndex = eventDoc.registrations.findIndex(
+      registration => registration.email.toLowerCase() === email.toLowerCase()
+    );
+
+    if (registrationIndex === -1) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Registration not found'
+      });
+    }
+
+    // Remove the registration
+    eventDoc.registrations.splice(registrationIndex, 1);
+
+    // Update registered count
+    eventDoc.registeredCount = eventDoc.registrations.length;
+
+    await eventDoc.save();
+
+    return {
+      success: true,
+      message: 'Registration cancelled successfully',
+      registeredCount: eventDoc.registeredCount
+    };
+  } catch (error) {
+    console.error('Error cancelling registration:', error);
+
+    // Re-throw known errors
+    if (error.statusCode) {
+      throw error;
+    }
+
+    throw createError({
+      statusCode: 500,
+      statusMessage: 'Failed to cancel registration'
+    });
+  }
+});
diff --git a/server/api/events/[id]/check-registration.post.js b/server/api/events/[id]/check-registration.post.js
new file mode 100644
index 0000000..95b354c
--- /dev/null
+++ b/server/api/events/[id]/check-registration.post.js
@@ -0,0 +1,49 @@
+import Event from "../../../models/event";
+
+export default defineEventHandler(async (event) => {
+  const id = getRouterParam(event, "id");
+  const body = await readBody(event);
+  const { email } = body;
+
+  if (!email) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Email is required",
+    });
+  }
+
+  try {
+    // Check if id is a valid ObjectId or treat as slug
+    const isObjectId = /^[0-9a-fA-F]{24}$/.test(id);
+    const query = isObjectId
+      ? { $or: [{ _id: id }, { slug: id }] }
+      : { slug: id };
+
+    const eventDoc = await Event.findOne(query);
+
+    if (!eventDoc) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Event not found",
+      });
+    }
+
+    // Check if the email exists in the registrations array
+    const isRegistered = eventDoc.registrations.some(
+      (registration) =>
+        registration.email.toLowerCase() === email.toLowerCase(),
+    );
+
+    return {
+      isRegistered,
+      eventId: eventDoc._id,
+      eventTitle: eventDoc.title,
+    };
+  } catch (error) {
+    console.error("Error checking registration:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to check registration status",
+    });
+  }
+});
diff --git a/server/api/events/[id]/register.post.js b/server/api/events/[id]/register.post.js
index e5ecfe2..96b0ea1 100644
--- a/server/api/events/[id]/register.post.js
+++ b/server/api/events/[id]/register.post.js
@@ -1,130 +1,141 @@
-import Event from '../../../models/event.js'
-import Member from '../../../models/member.js'
-import { connectDB } from '../../../utils/mongoose.js'
-import mongoose from 'mongoose'
+import Event from "../../../models/event.js";
+import Member from "../../../models/member.js";
+import { connectDB } from "../../../utils/mongoose.js";
+import mongoose from "mongoose";
 
 export default defineEventHandler(async (event) => {
   try {
     // Ensure database connection
-    await connectDB()
-    const identifier = getRouterParam(event, 'id')
-    const body = await readBody(event)
-    
+    await connectDB();
+    const identifier = getRouterParam(event, "id");
+    const body = await readBody(event);
+
     if (!identifier) {
       throw createError({
         statusCode: 400,
-        statusMessage: 'Event identifier is required'
-      })
+        statusMessage: "Event identifier is required",
+      });
     }
-    
+
     // Validate required fields
     if (!body.name || !body.email) {
       throw createError({
         statusCode: 400,
-        statusMessage: 'Name and email are required'
-      })
+        statusMessage: "Name and email are required",
+      });
     }
-    
+
     // Fetch the event - try by slug first, then by ID
-    let eventData
-    
+    let eventData;
+
     // Check if identifier is a valid MongoDB ObjectId
     if (mongoose.Types.ObjectId.isValid(identifier)) {
-      eventData = await Event.findById(identifier)
+      eventData = await Event.findById(identifier);
     }
-    
+
     // If not found by ID or not a valid ObjectId, try by slug
     if (!eventData) {
-      eventData = await Event.findOne({ slug: identifier })
+      eventData = await Event.findOne({ slug: identifier });
     }
-    
+
     if (!eventData) {
       throw createError({
         statusCode: 404,
-        statusMessage: 'Event not found'
-      })
+        statusMessage: "Event not found",
+      });
     }
-    
+
     // Check if event is full
-    if (eventData.maxAttendees && eventData.registrations.length >= eventData.maxAttendees) {
+    if (
+      eventData.maxAttendees &&
+      eventData.registrations.length >= eventData.maxAttendees
+    ) {
       throw createError({
         statusCode: 400,
-        statusMessage: 'Event is full'
-      })
+        statusMessage: "Event is full",
+      });
     }
-    
+
     // Check if already registered
     const alreadyRegistered = eventData.registrations.some(
-      reg => reg.email.toLowerCase() === body.email.toLowerCase()
-    )
-    
+      (reg) => reg.email.toLowerCase() === body.email.toLowerCase(),
+    );
+
     if (alreadyRegistered) {
       throw createError({
         statusCode: 400,
-        statusMessage: 'You are already registered for this event'
-      })
+        statusMessage: "You are already registered for this event",
+      });
     }
-    
+
     // Check member status and handle different registration scenarios
-    const member = await Member.findOne({ email: body.email.toLowerCase() })
-    
+    const member = await Member.findOne({ email: body.email.toLowerCase() });
+
     if (eventData.membersOnly && !member) {
       throw createError({
         statusCode: 403,
-        statusMessage: 'This event is for members only. Please become a member to register.'
-      })
+        statusMessage:
+          "This event is for members only. Please become a member to register.",
+      });
     }
-    
+
     // If event requires payment and user is not a member, redirect to payment flow
-    if (eventData.pricing.paymentRequired && !eventData.pricing.isFree && !member) {
+    if (
+      eventData.pricing.paymentRequired &&
+      !eventData.pricing.isFree &&
+      !member
+    ) {
       throw createError({
         statusCode: 402, // Payment Required
-        statusMessage: 'This event requires payment. Please use the payment registration endpoint.'
-      })
+        statusMessage:
+          "This event requires payment. Please use the payment registration endpoint.",
+      });
     }
-    
+
     // Set member status and membership level
-    let isMember = false
-    let membershipLevel = 'non-member'
-    
+    let isMember = false;
+    let membershipLevel = "non-member";
+
     if (member) {
-      isMember = true
-      membershipLevel = `${member.circle}-${member.contributionTier}`
+      isMember = true;
+      membershipLevel = `${member.circle}-${member.contributionTier}`;
     }
-    
+
     // Add registration
     eventData.registrations.push({
+      memberId: member ? member._id : null,
       name: body.name,
       email: body.email.toLowerCase(),
       membershipLevel,
       isMember,
-      paymentStatus: 'not_required', // Free events or member registrations
+      paymentStatus: "not_required", // Free events or member registrations
       amountPaid: 0,
       dietary: body.dietary || false,
-      registeredAt: new Date()
-    })
-    
+      registeredAt: new Date(),
+    });
+
     // Save the updated event
-    await eventData.save()
-    
+    await eventData.save();
+
     // TODO: Send confirmation email using Resend
     // await sendEventRegistrationEmail(body.email, eventData)
-    
+
     return {
       success: true,
-      message: 'Successfully registered for the event',
-      registrationId: eventData.registrations[eventData.registrations.length - 1]._id
-    }
+      message: "Successfully registered for the event",
+      registrationId:
+        eventData.registrations[eventData.registrations.length - 1]._id,
+    };
   } catch (error) {
-    console.error('Error registering for event:', error)
-    
+    console.error("Error registering for event:", error);
+
     if (error.statusCode) {
-      throw error
+      throw error;
     }
-    
+
     throw createError({
       statusCode: 500,
-      statusMessage: 'Failed to register for event'
-    })
+      statusMessage: "Failed to register for event",
+    });
   }
-})
\ No newline at end of file
+});
diff --git a/server/api/helcim/create-plan.post.js b/server/api/helcim/create-plan.post.js
new file mode 100644
index 0000000..32e3672
--- /dev/null
+++ b/server/api/helcim/create-plan.post.js
@@ -0,0 +1,61 @@
+// Create a new Helcim payment plan
+const HELCIM_API_BASE = 'https://api.helcim.com/v2'
+
+export default defineEventHandler(async (event) => {
+  try {
+    const config = useRuntimeConfig(event)
+    const body = await readBody(event)
+
+    // Validate required fields
+    if (!body.name || !body.amount || !body.frequency) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Name, amount, and frequency are required'
+      })
+    }
+
+    const helcimToken = config.public.helcimToken || process.env.NUXT_PUBLIC_HELCIM_TOKEN
+
+    console.log('Creating payment plan:', body.name)
+
+    const response = await fetch(`${HELCIM_API_BASE}/payment-plans`, {
+      method: 'POST',
+      headers: {
+        'accept': 'application/json',
+        'content-type': 'application/json',
+        'api-token': helcimToken
+      },
+      body: JSON.stringify({
+        planName: body.name,
+        planAmount: parseFloat(body.amount),
+        planFrequency: body.frequency, // 'monthly', 'weekly', 'biweekly', etc.
+        planCurrency: body.currency || 'CAD'
+      })
+    })
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      console.error('Failed to create payment plan:', response.status, errorText)
+
+      throw createError({
+        statusCode: response.status,
+        statusMessage: `Failed to create payment plan: ${errorText}`
+      })
+    }
+
+    const planData = await response.json()
+    console.log('Payment plan created:', planData)
+
+    return {
+      success: true,
+      plan: planData
+    }
+
+  } catch (error) {
+    console.error('Error creating Helcim payment plan:', error)
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.message || 'Failed to create payment plan'
+    })
+  }
+})
diff --git a/server/api/helcim/customer-code.get.js b/server/api/helcim/customer-code.get.js
new file mode 100644
index 0000000..7ee0be0
--- /dev/null
+++ b/server/api/helcim/customer-code.get.js
@@ -0,0 +1,83 @@
+// Get customer code for an existing Helcim customer
+import jwt from 'jsonwebtoken'
+import Member from '../../models/member.js'
+import { connectDB } from '../../utils/mongoose.js'
+
+const HELCIM_API_BASE = 'https://api.helcim.com/v2'
+
+export default defineEventHandler(async (event) => {
+  try {
+    await connectDB()
+    const config = useRuntimeConfig(event)
+    const token = getCookie(event, 'auth-token')
+
+    if (!token) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Not authenticated'
+      })
+    }
+
+    // Decode JWT token
+    let decoded
+    try {
+      decoded = jwt.verify(token, process.env.JWT_SECRET)
+    } catch (err) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Invalid or expired token'
+      })
+    }
+
+    // Get member
+    const member = await Member.findById(decoded.memberId)
+    if (!member) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Member not found'
+      })
+    }
+
+    if (!member.helcimCustomerId) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'No Helcim customer ID found'
+      })
+    }
+
+    const helcimToken = config.public.helcimToken || process.env.NUXT_PUBLIC_HELCIM_TOKEN
+
+    const response = await fetch(
+      `${HELCIM_API_BASE}/customers/${member.helcimCustomerId}`,
+      {
+        headers: {
+          'accept': 'application/json',
+          'api-token': helcimToken
+        }
+      }
+    )
+
+    if (!response.ok) {
+      const errorText = await response.text()
+      throw createError({
+        statusCode: response.status,
+        statusMessage: `Failed to get customer: ${errorText}`
+      })
+    }
+
+    const customerData = await response.json()
+
+    return {
+      success: true,
+      customerId: customerData.id,
+      customerCode: customerData.customerCode
+    }
+
+  } catch (error) {
+    console.error('Error getting customer code:', error)
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.message || 'Failed to get customer code'
+    })
+  }
+})
diff --git a/server/api/helcim/get-or-create-customer.post.js b/server/api/helcim/get-or-create-customer.post.js
new file mode 100644
index 0000000..c842913
--- /dev/null
+++ b/server/api/helcim/get-or-create-customer.post.js
@@ -0,0 +1,130 @@
+// Get existing or create new Helcim customer (for upgrading members)
+import jwt from 'jsonwebtoken'
+import Member from '../../models/member.js'
+import { connectDB } from '../../utils/mongoose.js'
+
+const HELCIM_API_BASE = 'https://api.helcim.com/v2'
+
+export default defineEventHandler(async (event) => {
+  try {
+    await connectDB()
+    const config = useRuntimeConfig(event)
+    const token = getCookie(event, 'auth-token')
+
+    if (!token) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Not authenticated'
+      })
+    }
+
+    // Decode JWT token
+    let decoded
+    try {
+      decoded = jwt.verify(token, process.env.JWT_SECRET)
+    } catch (err) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: 'Invalid or expired token'
+      })
+    }
+
+    // Get member
+    const member = await Member.findById(decoded.memberId)
+    if (!member) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Member not found'
+      })
+    }
+
+    const helcimToken = config.public.helcimToken || process.env.NUXT_PUBLIC_HELCIM_TOKEN
+
+    // First, search for existing customer
+    try {
+      const searchResponse = await fetch(
+        `${HELCIM_API_BASE}/customers?search=${encodeURIComponent(member.email)}`,
+        {
+          headers: {
+            'accept': 'application/json',
+            'api-token': helcimToken
+          }
+        }
+      )
+
+      if (searchResponse.ok) {
+        const searchData = await searchResponse.json()
+
+        if (searchData.customers && searchData.customers.length > 0) {
+          const existingCustomer = searchData.customers.find(c => c.email === member.email)
+
+          if (existingCustomer) {
+            console.log('Found existing Helcim customer:', existingCustomer.id)
+
+            // Update member record with customer ID if not already set
+            if (!member.helcimCustomerId) {
+              member.helcimCustomerId = existingCustomer.id
+              await member.save()
+            }
+
+            return {
+              success: true,
+              customerId: existingCustomer.id,
+              customerCode: existingCustomer.customerCode,
+              existing: true
+            }
+          }
+        }
+      }
+    } catch (searchError) {
+      console.log('Error searching for customer:', searchError)
+      // Continue to create new customer
+    }
+
+    // No existing customer found, create new one
+    console.log('Creating new Helcim customer for:', member.email)
+    const createResponse = await fetch(`${HELCIM_API_BASE}/customers`, {
+      method: 'POST',
+      headers: {
+        'accept': 'application/json',
+        'content-type': 'application/json',
+        'api-token': helcimToken
+      },
+      body: JSON.stringify({
+        contactName: member.name,
+        businessName: member.name,
+        email: member.email
+      })
+    })
+
+    if (!createResponse.ok) {
+      const errorText = await createResponse.text()
+      console.error('Failed to create Helcim customer:', createResponse.status, errorText)
+      throw createError({
+        statusCode: createResponse.status,
+        statusMessage: `Failed to create Helcim customer: ${errorText}`
+      })
+    }
+
+    const customerData = await createResponse.json()
+    console.log('Created Helcim customer:', customerData.id)
+
+    // Update member record with customer ID
+    member.helcimCustomerId = customerData.id
+    await member.save()
+
+    return {
+      success: true,
+      customerId: customerData.id,
+      customerCode: customerData.customerCode,
+      existing: false
+    }
+
+  } catch (error) {
+    console.error('Error in get-or-create-customer:', error)
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.message || 'Failed to get or create customer'
+    })
+  }
+})
diff --git a/server/api/helcim/subscription.post.js b/server/api/helcim/subscription.post.js
index 1e0155f..08cf6fa 100644
--- a/server/api/helcim/subscription.post.js
+++ b/server/api/helcim/subscription.post.js
@@ -2,9 +2,74 @@
 import { getHelcimPlanId, requiresPayment } from '../../config/contributions.js'
 import Member from '../../models/member.js'
 import { connectDB } from '../../utils/mongoose.js'
+import { getSlackService } from '../../utils/slack.ts'
 
 const HELCIM_API_BASE = 'https://api.helcim.com/v2'
 
+// Function to invite member to Slack
+async function inviteToSlack(member) {
+  try {
+    const slackService = getSlackService()
+    if (!slackService) {
+      console.warn('Slack service not configured, skipping invitation')
+      return
+    }
+
+    console.log(`Processing Slack invitation for ${member.email}...`)
+    
+    const inviteResult = await slackService.inviteUserToSlack(
+      member.email,
+      member.name
+    )
+
+    if (inviteResult.success) {
+      // Update member record based on the actual result
+      if (inviteResult.status === 'existing_user_added_to_channel' || 
+          inviteResult.status === 'user_already_in_channel' || 
+          inviteResult.status === 'new_user_invited_to_workspace') {
+        member.slackInviteStatus = 'sent'
+        member.slackUserId = inviteResult.userId
+        member.slackInvited = true
+      } else {
+        // Manual invitation required
+        member.slackInviteStatus = 'pending'
+        member.slackInvited = false
+      }
+      await member.save()
+      
+      // Send notification to vetting channel
+      await slackService.notifyNewMember(
+        member.name,
+        member.email,
+        member.circle,
+        member.contributionTier,
+        inviteResult.status
+      )
+      
+      console.log(`Successfully processed Slack invitation for ${member.email}: ${inviteResult.status}`)
+    } else {
+      // Update member record to reflect failed invitation
+      member.slackInviteStatus = 'failed'
+      await member.save()
+      
+      console.error(`Failed to process Slack invitation for ${member.email}: ${inviteResult.error}`)
+      // Don't throw error - subscription creation should still succeed
+    }
+  } catch (error) {
+    console.error('Error during Slack invitation process:', error)
+    
+    // Update member record to reflect failed invitation
+    try {
+      member.slackInviteStatus = 'failed'
+      await member.save()
+    } catch (saveError) {
+      console.error('Failed to update member Slack status:', saveError)
+    }
+    
+    // Don't throw error - subscription creation should still succeed
+  }
+}
+
 export default defineEventHandler(async (event) => {
   try {
     await connectDB()
@@ -44,6 +109,9 @@ export default defineEventHandler(async (event) => {
       
       console.log('Updated member for free tier:', member)
       
+      // Send Slack invitation for free tier members
+      await inviteToSlack(member)
+      
       return {
         success: true,
         subscription: null,
@@ -82,6 +150,9 @@ export default defineEventHandler(async (event) => {
         { new: true }
       )
 
+      // Send Slack invitation even when no plan is configured
+      await inviteToSlack(member)
+
       return {
         success: true,
         subscription: {
@@ -193,6 +264,9 @@ export default defineEventHandler(async (event) => {
             { new: true }
           )
 
+          // Send Slack invitation even when subscription setup fails
+          await inviteToSlack(member)
+
           return {
             success: true,
             subscription: {
@@ -234,6 +308,9 @@ export default defineEventHandler(async (event) => {
         { new: true }
       )
 
+      // Send Slack invitation for paid tier members
+      await inviteToSlack(member)
+
       return {
         success: true,
         subscription: {
@@ -260,6 +337,9 @@ export default defineEventHandler(async (event) => {
         { new: true }
       )
 
+      // Send Slack invitation even when subscription fetch fails
+      await inviteToSlack(member)
+
       return {
         success: true,
         subscription: {
diff --git a/server/api/members/cancel-subscription.post.js b/server/api/members/cancel-subscription.post.js
new file mode 100644
index 0000000..955bf59
--- /dev/null
+++ b/server/api/members/cancel-subscription.post.js
@@ -0,0 +1,100 @@
+// Cancel member subscription
+import jwt from "jsonwebtoken";
+import Member from "../../models/member.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+const HELCIM_API_BASE = "https://api.helcim.com/v2";
+
+export default defineEventHandler(async (event) => {
+  try {
+    await connectDB();
+    const config = useRuntimeConfig(event);
+    const token = getCookie(event, "auth-token");
+
+    if (!token) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: "Not authenticated",
+      });
+    }
+
+    // Decode JWT token
+    let decoded;
+    try {
+      decoded = jwt.verify(token, process.env.JWT_SECRET);
+    } catch (err) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: "Invalid or expired token",
+      });
+    }
+
+    // Get member
+    const member = await Member.findById(decoded.memberId);
+    if (!member) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Member not found",
+      });
+    }
+
+    // If already on free tier, nothing to cancel
+    if (member.contributionTier === "0" || !member.helcimSubscriptionId) {
+      return {
+        success: true,
+        message: "No active subscription to cancel",
+        member,
+      };
+    }
+
+    const helcimToken =
+      config.public.helcimToken || process.env.NUXT_PUBLIC_HELCIM_TOKEN;
+
+    try {
+      // Cancel Helcim subscription
+      const response = await fetch(
+        `${HELCIM_API_BASE}/subscriptions/${member.helcimSubscriptionId}`,
+        {
+          method: "DELETE",
+          headers: {
+            accept: "application/json",
+            "api-token": helcimToken,
+          },
+        },
+      );
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        console.error(
+          "Failed to cancel Helcim subscription:",
+          response.status,
+          errorText,
+        );
+        // Continue anyway - we'll update the member record
+      }
+    } catch (error) {
+      console.error("Error canceling Helcim subscription:", error);
+      // Continue anyway - we'll update the member record
+    }
+
+    // Update member status
+    member.status = "cancelled";
+    member.contributionTier = "0";
+    member.helcimSubscriptionId = null;
+    member.paymentMethod = "none";
+    member.subscriptionEndDate = new Date();
+    await member.save();
+
+    return {
+      success: true,
+      message: "Subscription cancelled successfully",
+      member,
+    };
+  } catch (error) {
+    console.error("Error cancelling subscription:", error);
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.message || "Failed to cancel subscription",
+    });
+  }
+});
diff --git a/server/api/members/create.post.js b/server/api/members/create.post.js
index b7828ad..1ed831c 100644
--- a/server/api/members/create.post.js
+++ b/server/api/members/create.post.js
@@ -1,9 +1,74 @@
 // server/api/members/create.post.js
 import Member from '../../models/member.js'
 import { connectDB } from '../../utils/mongoose.js'
+import { getSlackService } from '../../utils/slack.ts'
 // Simple payment check function to avoid import issues
 const requiresPayment = (contributionValue) => contributionValue !== '0'
 
+// Function to invite member to Slack
+async function inviteToSlack(member) {
+  try {
+    const slackService = getSlackService()
+    if (!slackService) {
+      console.warn('Slack service not configured, skipping invitation')
+      return
+    }
+
+    console.log(`Processing Slack invitation for ${member.email}...`)
+    
+    const inviteResult = await slackService.inviteUserToSlack(
+      member.email,
+      member.name
+    )
+
+    if (inviteResult.success) {
+      // Update member record based on the actual result
+      if (inviteResult.status === 'existing_user_added_to_channel' || 
+          inviteResult.status === 'user_already_in_channel' || 
+          inviteResult.status === 'new_user_invited_to_workspace') {
+        member.slackInviteStatus = 'sent'
+        member.slackUserId = inviteResult.userId
+        member.slackInvited = true
+      } else {
+        // Manual invitation required
+        member.slackInviteStatus = 'pending'
+        member.slackInvited = false
+      }
+      await member.save()
+      
+      // Send notification to vetting channel
+      await slackService.notifyNewMember(
+        member.name,
+        member.email,
+        member.circle,
+        member.contributionTier,
+        inviteResult.status
+      )
+      
+      console.log(`Successfully processed Slack invitation for ${member.email}: ${inviteResult.status}`)
+    } else {
+      // Update member record to reflect failed invitation
+      member.slackInviteStatus = 'failed'
+      await member.save()
+      
+      console.error(`Failed to process Slack invitation for ${member.email}: ${inviteResult.error}`)
+      // Don't throw error - member creation should still succeed
+    }
+  } catch (error) {
+    console.error('Error during Slack invitation process:', error)
+    
+    // Update member record to reflect failed invitation
+    try {
+      member.slackInviteStatus = 'failed'
+      await member.save()
+    } catch (saveError) {
+      console.error('Failed to update member Slack status:', saveError)
+    }
+    
+    // Don't throw error - member creation should still succeed
+  }
+}
+
 export default defineEventHandler(async (event) => {
   // Ensure database is connected
   await connectDB()
@@ -23,6 +88,9 @@ export default defineEventHandler(async (event) => {
     const member = new Member(body)
     await member.save()
     
+    // Send Slack invitation for new members
+    await inviteToSlack(member)
+    
     // TODO: Process payment with Helcim if not free tier
     if (requiresPayment(body.contributionTier)) {
       // Payment processing will be added here
diff --git a/server/api/members/directory.get.js b/server/api/members/directory.get.js
new file mode 100644
index 0000000..3c37b01
--- /dev/null
+++ b/server/api/members/directory.get.js
@@ -0,0 +1,115 @@
+import jwt from "jsonwebtoken";
+import Member from "../../models/member.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  // Check if user is authenticated
+  const token = getCookie(event, "auth-token");
+  let isAuthenticated = false;
+  let currentMemberId = null;
+
+  if (token) {
+    try {
+      const decoded = jwt.verify(token, process.env.JWT_SECRET);
+      currentMemberId = decoded.memberId;
+      isAuthenticated = true;
+    } catch (err) {
+      // Invalid token, treat as public
+      isAuthenticated = false;
+    }
+  }
+
+  const query = getQuery(event);
+  const search = query.search || "";
+  const circle = query.circle || "";
+  const skills = query.skills ? query.skills.split(",") : [];
+
+  // Build query
+  const dbQuery = {
+    showInDirectory: true,
+    status: "active",
+  };
+
+  // Filter by circle if specified
+  if (circle) {
+    dbQuery.circle = circle;
+  }
+
+  // Search by name or bio
+  if (search) {
+    dbQuery.$or = [
+      { name: { $regex: search, $options: "i" } },
+      { bio: { $regex: search, $options: "i" } },
+    ];
+  }
+
+  // Filter by skills
+  if (skills.length > 0) {
+    dbQuery.skills = { $in: skills };
+  }
+
+  try {
+    const members = await Member.find(dbQuery)
+      .select(
+        "name pronouns timeZone avatar studio bio skills location socialLinks offering lookingFor privacy circle createdAt"
+      )
+      .sort({ createdAt: -1 })
+      .lean();
+
+    // Filter fields based on privacy settings
+    const filteredMembers = members.map((member) => {
+      const privacy = member.privacy || {};
+      const filtered = {
+        _id: member._id,
+        name: member.name,
+        circle: member.circle,
+        createdAt: member.createdAt,
+      };
+
+      // Helper function to check if field should be visible
+      const isVisible = (field) => {
+        const privacySetting = privacy[field] || "members";
+        if (privacySetting === "public") return true;
+        if (privacySetting === "members" && isAuthenticated) return true;
+        if (privacySetting === "private") return false;
+        return false;
+      };
+
+      // Add fields based on privacy settings
+      if (isVisible("avatar")) filtered.avatar = member.avatar;
+      if (isVisible("pronouns")) filtered.pronouns = member.pronouns;
+      if (isVisible("timeZone")) filtered.timeZone = member.timeZone;
+      if (isVisible("studio")) filtered.studio = member.studio;
+      if (isVisible("bio")) filtered.bio = member.bio;
+      if (isVisible("skills")) filtered.skills = member.skills;
+      if (isVisible("location")) filtered.location = member.location;
+      if (isVisible("socialLinks")) filtered.socialLinks = member.socialLinks;
+      if (isVisible("offering")) filtered.offering = member.offering;
+      if (isVisible("lookingFor")) filtered.lookingFor = member.lookingFor;
+
+      return filtered;
+    });
+
+    // Get unique skills for filter options
+    const allSkills = members
+      .flatMap((m) => m.skills || [])
+      .filter((skill, index, self) => self.indexOf(skill) === index)
+      .sort();
+
+    return {
+      members: filteredMembers,
+      totalCount: filteredMembers.length,
+      filters: {
+        availableSkills: allSkills,
+      },
+    };
+  } catch (error) {
+    console.error("Directory fetch error:", error);
+    throw createError({
+      statusCode: 500,
+      message: "Failed to fetch member directory",
+    });
+  }
+});
diff --git a/server/api/members/my-events.get.js b/server/api/members/my-events.get.js
new file mode 100644
index 0000000..f87cbf6
--- /dev/null
+++ b/server/api/members/my-events.get.js
@@ -0,0 +1,60 @@
+import Event from "../../models/event";
+import Member from "../../models/member";
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event);
+  const { memberId } = query;
+
+  if (!memberId) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Member ID is required",
+    });
+  }
+
+  try {
+    // Verify member exists
+    const member = await Member.findById(memberId);
+    if (!member) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Member not found",
+      });
+    }
+
+    // Find all events where the user is registered
+    // Filter out cancelled events and only show future events
+    const now = new Date();
+
+    const events = await Event.find({
+      "registrations.memberId": memberId,
+      isCancelled: { $ne: true },
+      startDate: { $gte: now },
+    })
+      .select(
+        "title slug description startDate endDate location featureImage maxAttendees registeredCount",
+      )
+      .sort({ startDate: 1 })
+      .limit(10);
+
+    console.log(
+      `Found ${events.length} registered events for member ${memberId}`,
+    );
+
+    return {
+      events,
+      count: events.length,
+    };
+  } catch (error) {
+    console.error("Error fetching member events:", error);
+
+    if (error.statusCode) {
+      throw error;
+    }
+
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch registered events",
+    });
+  }
+});
diff --git a/server/api/members/profile.patch.js b/server/api/members/profile.patch.js
new file mode 100644
index 0000000..1a7c03a
--- /dev/null
+++ b/server/api/members/profile.patch.js
@@ -0,0 +1,117 @@
+import jwt from "jsonwebtoken";
+import Member from "../../models/member.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const token = getCookie(event, "auth-token");
+
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Not authenticated",
+    });
+  }
+
+  let memberId;
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    memberId = decoded.memberId;
+  } catch (err) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid or expired token",
+    });
+  }
+
+  const body = await readBody(event);
+
+  // Define allowed profile fields
+  const allowedFields = [
+    "pronouns",
+    "timeZone",
+    "avatar",
+    "studio",
+    "bio",
+    "skills",
+    "location",
+    "socialLinks",
+    "offering",
+    "lookingFor",
+    "showInDirectory",
+    "helcimCustomerId",
+  ];
+
+  // Define privacy fields
+  const privacyFields = [
+    "pronounsPrivacy",
+    "timeZonePrivacy",
+    "avatarPrivacy",
+    "studioPrivacy",
+    "bioPrivacy",
+    "skillsPrivacy",
+    "locationPrivacy",
+    "socialLinksPrivacy",
+    "offeringPrivacy",
+    "lookingForPrivacy",
+  ];
+
+  // Build update object
+  const updateData = {};
+
+  allowedFields.forEach((field) => {
+    if (body[field] !== undefined) {
+      updateData[field] = body[field];
+    }
+  });
+
+  // Handle privacy settings
+  privacyFields.forEach((privacyField) => {
+    if (body[privacyField] !== undefined) {
+      const baseField = privacyField.replace("Privacy", "");
+      updateData[`privacy.${baseField}`] = body[privacyField];
+    }
+  });
+
+  try {
+    const member = await Member.findByIdAndUpdate(
+      memberId,
+      { $set: updateData },
+      { new: true, runValidators: true },
+    );
+
+    if (!member) {
+      throw createError({
+        statusCode: 404,
+        message: "Member not found",
+      });
+    }
+
+    // Return sanitized member data
+    return {
+      id: member._id,
+      email: member.email,
+      name: member.name,
+      circle: member.circle,
+      contributionTier: member.contributionTier,
+      pronouns: member.pronouns,
+      timeZone: member.timeZone,
+      avatar: member.avatar,
+      studio: member.studio,
+      bio: member.bio,
+      skills: member.skills,
+      location: member.location,
+      socialLinks: member.socialLinks,
+      offering: member.offering,
+      lookingFor: member.lookingFor,
+      showInDirectory: member.showInDirectory,
+    };
+  } catch (error) {
+    console.error("Profile update error:", error);
+    throw createError({
+      statusCode: 500,
+      message: "Failed to update profile",
+    });
+  }
+});
diff --git a/server/api/members/update-contribution.post.js b/server/api/members/update-contribution.post.js
new file mode 100644
index 0000000..7ff8736
--- /dev/null
+++ b/server/api/members/update-contribution.post.js
@@ -0,0 +1,354 @@
+// Update member's contribution tier
+import jwt from "jsonwebtoken";
+import {
+  getHelcimPlanId,
+  requiresPayment,
+  isValidContributionValue,
+} from "../../config/contributions.js";
+import Member from "../../models/member.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+const HELCIM_API_BASE = "https://api.helcim.com/v2";
+
+export default defineEventHandler(async (event) => {
+  try {
+    await connectDB();
+    const config = useRuntimeConfig(event);
+    const body = await readBody(event);
+    const token = getCookie(event, "auth-token");
+
+    if (!token) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: "Not authenticated",
+      });
+    }
+
+    // Decode JWT token
+    let decoded;
+    try {
+      decoded = jwt.verify(token, process.env.JWT_SECRET);
+    } catch (err) {
+      throw createError({
+        statusCode: 401,
+        statusMessage: "Invalid or expired token",
+      });
+    }
+
+    // Validate contribution tier
+    if (
+      !body.contributionTier ||
+      !isValidContributionValue(body.contributionTier)
+    ) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: "Invalid contribution tier",
+      });
+    }
+
+    // Get member
+    const member = await Member.findById(decoded.memberId);
+    if (!member) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Member not found",
+      });
+    }
+
+    const oldTier = member.contributionTier;
+    const newTier = body.contributionTier;
+
+    // If same tier, nothing to do
+    if (oldTier === newTier) {
+      return {
+        success: true,
+        message: "Already on this tier",
+        member,
+      };
+    }
+
+    const helcimToken =
+      config.public.helcimToken || process.env.NUXT_PUBLIC_HELCIM_TOKEN;
+    const oldRequiresPayment = requiresPayment(oldTier);
+    const newRequiresPayment = requiresPayment(newTier);
+
+    // Case 1: Moving from free to paid tier
+    if (!oldRequiresPayment && newRequiresPayment) {
+      // Check if member has Helcim customer ID with saved payment method
+      if (!member.helcimCustomerId) {
+        throw createError({
+          statusCode: 400,
+          statusMessage:
+            "Please use the subscription creation flow to upgrade to a paid tier",
+          data: { requiresPaymentSetup: true },
+        });
+      }
+
+      // Try to fetch customer info from Helcim to check for saved cards
+      const helcimToken =
+        config.public.helcimToken || process.env.NUXT_PUBLIC_HELCIM_TOKEN;
+
+      try {
+        const customerResponse = await fetch(
+          `${HELCIM_API_BASE}/customers/${member.helcimCustomerId}`,
+          {
+            method: "GET",
+            headers: {
+              accept: "application/json",
+              "api-token": helcimToken,
+            },
+          },
+        );
+
+        if (!customerResponse.ok) {
+          throw new Error("Failed to fetch customer info");
+        }
+
+        const customerData = await customerResponse.json();
+        const customerCode = customerData.customerCode;
+
+        if (!customerCode) {
+          throw new Error("No customer code found");
+        }
+
+        // Check if customer has saved cards
+        const cardsResponse = await fetch(
+          `${HELCIM_API_BASE}/card-terminals?customerId=${member.helcimCustomerId}`,
+          {
+            method: "GET",
+            headers: {
+              accept: "application/json",
+              "api-token": helcimToken,
+            },
+          },
+        );
+
+        let hasCards = false;
+        if (cardsResponse.ok) {
+          const cardsData = await cardsResponse.json();
+          hasCards = cardsData.cards && cardsData.cards.length > 0;
+        }
+
+        if (!hasCards) {
+          throw new Error("No saved payment methods");
+        }
+
+        // Create new subscription with saved payment method
+        const newPlanId = getHelcimPlanId(newTier);
+
+        if (!newPlanId) {
+          throw createError({
+            statusCode: 400,
+            statusMessage: `Plan not configured for tier ${newTier}`,
+          });
+        }
+
+        // Generate idempotency key
+        const chars =
+          "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+        let idempotencyKey = "";
+        for (let i = 0; i < 25; i++) {
+          idempotencyKey += chars.charAt(
+            Math.floor(Math.random() * chars.length),
+          );
+        }
+
+        // Get tier amount
+        const { getContributionTierByValue } = await import(
+          "../../config/contributions.js"
+        );
+        const tierInfo = getContributionTierByValue(newTier);
+
+        const subscriptionResponse = await fetch(
+          `${HELCIM_API_BASE}/subscriptions`,
+          {
+            method: "POST",
+            headers: {
+              accept: "application/json",
+              "content-type": "application/json",
+              "api-token": helcimToken,
+              "idempotency-key": idempotencyKey,
+            },
+            body: JSON.stringify({
+              subscriptions: [
+                {
+                  dateActivated: new Date().toISOString().split("T")[0],
+                  paymentPlanId: parseInt(newPlanId),
+                  customerCode: customerCode,
+                  recurringAmount: parseFloat(tierInfo.amount),
+                  paymentMethod: "card",
+                },
+              ],
+            }),
+          },
+        );
+
+        if (!subscriptionResponse.ok) {
+          const errorText = await subscriptionResponse.text();
+          console.error("Failed to create subscription:", errorText);
+          throw new Error(`Failed to create subscription: ${errorText}`);
+        }
+
+        const subscriptionData = await subscriptionResponse.json();
+        const subscription = subscriptionData.data?.[0];
+
+        if (!subscription) {
+          throw new Error("No subscription returned in response");
+        }
+
+        // Update member record
+        member.contributionTier = newTier;
+        member.helcimSubscriptionId = subscription.id;
+        member.paymentMethod = "card";
+        member.status = "active";
+        await member.save();
+
+        return {
+          success: true,
+          message: "Successfully upgraded to paid tier",
+          member,
+          subscription: {
+            subscriptionId: subscription.id,
+            status: subscription.status,
+            nextBillingDate: subscription.nextBillingDate,
+          },
+        };
+      } catch (error) {
+        console.error("Error creating subscription with saved payment:", error);
+        // If we can't use saved payment, require new payment setup
+        throw createError({
+          statusCode: 400,
+          statusMessage:
+            "Payment information required. You'll be redirected to complete payment setup.",
+          data: { requiresPaymentSetup: true },
+        });
+      }
+    }
+
+    // Case 2: Moving from paid to free tier (cancel subscription)
+    if (oldRequiresPayment && !newRequiresPayment) {
+      if (member.helcimSubscriptionId) {
+        try {
+          // Cancel Helcim subscription
+          const response = await fetch(
+            `${HELCIM_API_BASE}/subscriptions/${member.helcimSubscriptionId}`,
+            {
+              method: "DELETE",
+              headers: {
+                accept: "application/json",
+                "api-token": helcimToken,
+              },
+            },
+          );
+
+          if (!response.ok) {
+            console.error(
+              "Failed to cancel Helcim subscription:",
+              response.status,
+            );
+          }
+        } catch (error) {
+          console.error("Error canceling Helcim subscription:", error);
+          // Continue anyway - we'll update the member record
+        }
+      }
+
+      // Update member to free tier
+      member.contributionTier = newTier;
+      member.helcimSubscriptionId = null;
+      member.paymentMethod = "none";
+      await member.save();
+
+      return {
+        success: true,
+        message: "Successfully downgraded to free tier",
+        member,
+      };
+    }
+
+    // Case 3: Moving between paid tiers
+    if (oldRequiresPayment && newRequiresPayment) {
+      const newPlanId = getHelcimPlanId(newTier);
+
+      if (!newPlanId) {
+        throw createError({
+          statusCode: 400,
+          statusMessage: `Plan not configured for tier ${newTier}`,
+        });
+      }
+
+      if (!member.helcimSubscriptionId) {
+        // No subscription exists - they need to go through payment flow
+        throw createError({
+          statusCode: 400,
+          statusMessage:
+            "Payment information required. You'll be redirected to complete payment setup.",
+          data: { requiresPaymentSetup: true },
+        });
+      }
+
+      try {
+        // Update subscription plan in Helcim
+        const response = await fetch(
+          `${HELCIM_API_BASE}/subscriptions/${member.helcimSubscriptionId}`,
+          {
+            method: "PATCH",
+            headers: {
+              accept: "application/json",
+              "content-type": "application/json",
+              "api-token": helcimToken,
+            },
+            body: JSON.stringify({
+              paymentPlanId: parseInt(newPlanId),
+            }),
+          },
+        );
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          console.error(
+            "Failed to update Helcim subscription:",
+            response.status,
+            errorText,
+          );
+          throw new Error(`Failed to update subscription: ${errorText}`);
+        }
+
+        const subscriptionData = await response.json();
+
+        // Update member record
+        member.contributionTier = newTier;
+        await member.save();
+
+        return {
+          success: true,
+          message: "Successfully updated contribution level",
+          member,
+          subscription: subscriptionData,
+        };
+      } catch (error) {
+        console.error("Error updating Helcim subscription:", error);
+        throw createError({
+          statusCode: 500,
+          statusMessage: error.message || "Failed to update subscription",
+        });
+      }
+    }
+
+    // Case 4: Moving between free tiers (shouldn't happen but handle it)
+    member.contributionTier = newTier;
+    await member.save();
+
+    return {
+      success: true,
+      message: "Successfully updated contribution level",
+      member,
+    };
+  } catch (error) {
+    console.error("Error updating contribution tier:", error);
+    throw createError({
+      statusCode: error.statusCode || 500,
+      statusMessage: error.message || "Failed to update contribution tier",
+    });
+  }
+});
diff --git a/server/api/slack/test-bot.get.ts b/server/api/slack/test-bot.get.ts
new file mode 100644
index 0000000..65b8ba5
--- /dev/null
+++ b/server/api/slack/test-bot.get.ts
@@ -0,0 +1,68 @@
+import { WebClient } from '@slack/web-api'
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig()
+  
+  if (!config.slackBotToken) {
+    return {
+      success: false,
+      error: 'Slack bot token not configured'
+    }
+  }
+
+  const client = new WebClient(config.slackBotToken)
+
+  try {
+    // Test basic API access
+    const authTest = await client.auth.test()
+    console.log('Auth test result:', authTest)
+
+    // Test if admin API is available
+    let adminApiAvailable = false
+    let adminError = null
+    
+    try {
+      // Try to call admin.users.list to test admin API access
+      await client.admin.users.list({ limit: 1 })
+      adminApiAvailable = true
+    } catch (error: any) {
+      adminError = error.data?.error || error.message
+      console.log('Admin API test failed:', adminError)
+    }
+
+    // Test channel access if channel ID is configured
+    let channelAccess = false
+    let channelError = null
+    
+    if (config.slackVettingChannelId) {
+      try {
+        const channelInfo = await client.conversations.info({
+          channel: config.slackVettingChannelId
+        })
+        channelAccess = !!channelInfo.channel
+      } catch (error: any) {
+        channelError = error.data?.error || error.message
+      }
+    }
+
+    return {
+      success: true,
+      botInfo: {
+        user: authTest.user,
+        team: authTest.team,
+        url: authTest.url
+      },
+      adminApiAvailable,
+      adminError: adminApiAvailable ? null : adminError,
+      channelAccess,
+      channelError: channelAccess ? null : channelError,
+      channelId: config.slackVettingChannelId || 'Not configured'
+    }
+
+  } catch (error: any) {
+    return {
+      success: false,
+      error: error.data?.error || error.message || 'Unknown error'
+    }
+  }
+})
\ No newline at end of file
diff --git a/server/api/updates/[id].delete.js b/server/api/updates/[id].delete.js
new file mode 100644
index 0000000..ed7dda2
--- /dev/null
+++ b/server/api/updates/[id].delete.js
@@ -0,0 +1,59 @@
+import jwt from "jsonwebtoken";
+import Update from "../../models/update.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const token = getCookie(event, "auth-token");
+
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Not authenticated",
+    });
+  }
+
+  let memberId;
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    memberId = decoded.memberId;
+  } catch (err) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid or expired token",
+    });
+  }
+
+  const id = getRouterParam(event, "id");
+
+  try {
+    const update = await Update.findById(id);
+
+    if (!update) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Update not found",
+      });
+    }
+
+    // Check if user is the author
+    if (update.author.toString() !== memberId) {
+      throw createError({
+        statusCode: 403,
+        statusMessage: "You can only delete your own updates",
+      });
+    }
+
+    await Update.findByIdAndDelete(id);
+
+    return { success: true };
+  } catch (error) {
+    if (error.statusCode) throw error;
+    console.error("Delete update error:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to delete update",
+    });
+  }
+});
diff --git a/server/api/updates/[id].get.js b/server/api/updates/[id].get.js
new file mode 100644
index 0000000..6dda80f
--- /dev/null
+++ b/server/api/updates/[id].get.js
@@ -0,0 +1,60 @@
+import jwt from "jsonwebtoken";
+import Update from "../../models/update.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const id = getRouterParam(event, "id");
+  const token = getCookie(event, "auth-token");
+  let memberId = null;
+
+  // Check if user is authenticated
+  if (token) {
+    try {
+      const decoded = jwt.verify(token, process.env.JWT_SECRET);
+      memberId = decoded.memberId;
+    } catch (err) {
+      // Token invalid, continue as non-member
+    }
+  }
+
+  try {
+    const update = await Update.findById(id).populate("author", "name avatar");
+
+    if (!update) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Update not found",
+      });
+    }
+
+    // Check privacy permissions
+    if (update.privacy === "private") {
+      // Only author can view private updates
+      if (!memberId || update.author._id.toString() !== memberId) {
+        throw createError({
+          statusCode: 403,
+          statusMessage: "You don't have permission to view this update",
+        });
+      }
+    } else if (update.privacy === "members") {
+      // Must be authenticated to view members-only updates
+      if (!memberId) {
+        throw createError({
+          statusCode: 403,
+          statusMessage: "You must be a member to view this update",
+        });
+      }
+    }
+
+    return update;
+  } catch (error) {
+    if (error.statusCode) throw error;
+    console.error("Get update error:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch update",
+    });
+  }
+});
diff --git a/server/api/updates/[id].patch.js b/server/api/updates/[id].patch.js
new file mode 100644
index 0000000..fcd5e5c
--- /dev/null
+++ b/server/api/updates/[id].patch.js
@@ -0,0 +1,68 @@
+import jwt from "jsonwebtoken";
+import Update from "../../models/update.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const token = getCookie(event, "auth-token");
+
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Not authenticated",
+    });
+  }
+
+  let memberId;
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    memberId = decoded.memberId;
+  } catch (err) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid or expired token",
+    });
+  }
+
+  const id = getRouterParam(event, "id");
+  const body = await readBody(event);
+
+  try {
+    const update = await Update.findById(id);
+
+    if (!update) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "Update not found",
+      });
+    }
+
+    // Check if user is the author
+    if (update.author.toString() !== memberId) {
+      throw createError({
+        statusCode: 403,
+        statusMessage: "You can only edit your own updates",
+      });
+    }
+
+    // Update allowed fields
+    if (body.content !== undefined) update.content = body.content;
+    if (body.images !== undefined) update.images = body.images;
+    if (body.privacy !== undefined) update.privacy = body.privacy;
+    if (body.commentsEnabled !== undefined)
+      update.commentsEnabled = body.commentsEnabled;
+
+    await update.save();
+    await update.populate("author", "name avatar");
+
+    return update;
+  } catch (error) {
+    if (error.statusCode) throw error;
+    console.error("Update edit error:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to update",
+    });
+  }
+});
diff --git a/server/api/updates/index.get.js b/server/api/updates/index.get.js
new file mode 100644
index 0000000..2cb28fb
--- /dev/null
+++ b/server/api/updates/index.get.js
@@ -0,0 +1,56 @@
+import jwt from "jsonwebtoken";
+import Update from "../../models/update.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const token = getCookie(event, "auth-token");
+  let memberId = null;
+
+  // Check if user is authenticated
+  if (token) {
+    try {
+      const decoded = jwt.verify(token, process.env.JWT_SECRET);
+      memberId = decoded.memberId;
+    } catch (err) {
+      // Token invalid, continue as non-member
+    }
+  }
+
+  const query = getQuery(event);
+  const limit = parseInt(query.limit) || 20;
+  const skip = parseInt(query.skip) || 0;
+
+  try {
+    // Build privacy filter
+    let privacyFilter;
+    if (!memberId) {
+      // Not authenticated - only show public updates
+      privacyFilter = { privacy: "public" };
+    } else {
+      // Authenticated member - show public and members-only updates
+      privacyFilter = { privacy: { $in: ["public", "members"] } };
+    }
+
+    const updates = await Update.find(privacyFilter)
+      .populate("author", "name avatar")
+      .sort({ createdAt: -1 })
+      .limit(limit)
+      .skip(skip);
+
+    const total = await Update.countDocuments(privacyFilter);
+
+    return {
+      updates,
+      total,
+      hasMore: skip + limit < total,
+    };
+  } catch (error) {
+    console.error("Get updates error:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch updates",
+    });
+  }
+});
diff --git a/server/api/updates/index.post.js b/server/api/updates/index.post.js
new file mode 100644
index 0000000..97d659a
--- /dev/null
+++ b/server/api/updates/index.post.js
@@ -0,0 +1,57 @@
+import jwt from "jsonwebtoken";
+import Update from "../../models/update.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const token = getCookie(event, "auth-token");
+
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Not authenticated",
+    });
+  }
+
+  let memberId;
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    memberId = decoded.memberId;
+  } catch (err) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid or expired token",
+    });
+  }
+
+  const body = await readBody(event);
+
+  if (!body.content || !body.content.trim()) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: "Content is required",
+    });
+  }
+
+  try {
+    const update = await Update.create({
+      author: memberId,
+      content: body.content,
+      images: body.images || [],
+      privacy: body.privacy || "members",
+      commentsEnabled: body.commentsEnabled ?? true,
+    });
+
+    // Populate author details
+    await update.populate("author", "name avatar");
+
+    return update;
+  } catch (error) {
+    console.error("Create update error:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to create update",
+    });
+  }
+});
diff --git a/server/api/updates/my-updates.get.js b/server/api/updates/my-updates.get.js
new file mode 100644
index 0000000..60e6da5
--- /dev/null
+++ b/server/api/updates/my-updates.get.js
@@ -0,0 +1,53 @@
+import jwt from "jsonwebtoken";
+import Update from "../../models/update.js";
+import { connectDB } from "../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const token = getCookie(event, "auth-token");
+
+  if (!token) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Not authenticated",
+    });
+  }
+
+  let memberId;
+  try {
+    const decoded = jwt.verify(token, process.env.JWT_SECRET);
+    memberId = decoded.memberId;
+  } catch (err) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: "Invalid or expired token",
+    });
+  }
+
+  const query = getQuery(event);
+  const limit = parseInt(query.limit) || 20;
+  const skip = parseInt(query.skip) || 0;
+
+  try {
+    const updates = await Update.find({ author: memberId })
+      .populate("author", "name avatar")
+      .sort({ createdAt: -1 })
+      .limit(limit)
+      .skip(skip);
+
+    const total = await Update.countDocuments({ author: memberId });
+
+    return {
+      updates,
+      total,
+      hasMore: skip + limit < total,
+    };
+  } catch (error) {
+    console.error("Get my updates error:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch updates",
+    });
+  }
+});
diff --git a/server/api/updates/user/[id].get.js b/server/api/updates/user/[id].get.js
new file mode 100644
index 0000000..7eee274
--- /dev/null
+++ b/server/api/updates/user/[id].get.js
@@ -0,0 +1,76 @@
+import jwt from "jsonwebtoken";
+import Update from "../../../models/update.js";
+import Member from "../../../models/member.js";
+import { connectDB } from "../../../utils/mongoose.js";
+
+export default defineEventHandler(async (event) => {
+  await connectDB();
+
+  const userId = getRouterParam(event, "id");
+  const token = getCookie(event, "auth-token");
+  let currentMemberId = null;
+
+  // Check if user is authenticated
+  if (token) {
+    try {
+      const decoded = jwt.verify(token, process.env.JWT_SECRET);
+      currentMemberId = decoded.memberId;
+    } catch (err) {
+      // Token invalid, continue as non-member
+    }
+  }
+
+  const query = getQuery(event);
+  const limit = parseInt(query.limit) || 20;
+  const skip = parseInt(query.skip) || 0;
+
+  try {
+    // Verify the user exists
+    const user = await Member.findById(userId);
+    if (!user) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: "User not found",
+      });
+    }
+
+    // Build privacy filter
+    let privacyFilter;
+    if (!currentMemberId) {
+      // Not authenticated - only show public updates
+      privacyFilter = { author: userId, privacy: "public" };
+    } else if (currentMemberId === userId) {
+      // Viewing own updates - show all
+      privacyFilter = { author: userId };
+    } else {
+      // Authenticated member viewing another's updates - show public and members-only
+      privacyFilter = { author: userId, privacy: { $in: ["public", "members"] } };
+    }
+
+    const updates = await Update.find(privacyFilter)
+      .populate("author", "name avatar")
+      .sort({ createdAt: -1 })
+      .limit(limit)
+      .skip(skip);
+
+    const total = await Update.countDocuments(privacyFilter);
+
+    return {
+      updates,
+      total,
+      hasMore: skip + limit < total,
+      user: {
+        _id: user._id,
+        name: user.name,
+        avatar: user.avatar,
+      },
+    };
+  } catch (error) {
+    if (error.statusCode) throw error;
+    console.error("Get user updates error:", error);
+    throw createError({
+      statusCode: 500,
+      statusMessage: "Failed to fetch user updates",
+    });
+  }
+});
diff --git a/server/config/contributions.js b/server/config/contributions.js
index d621e81..0f2441c 100644
--- a/server/config/contributions.js
+++ b/server/config/contributions.js
@@ -4,68 +4,65 @@
 // Central configuration for Ghost Guild Contribution Levels and Helcim Plans
 export const CONTRIBUTION_TIERS = {
   FREE: {
-    value: '0',
+    value: "0",
     amount: 0,
-    label: '$0 - I need support right now',
-    tier: 'free',
+    label: "$0 - I need support right now",
+    tier: "free",
     helcimPlanId: null, // No Helcim plan needed for free tier
-    features: [
-      'Access to basic resources',
-      'Community forum access'
-    ]
+    features: ["Access to basic resources", "Community forum access"],
   },
   SUPPORTER: {
-    value: '5',
+    value: "5",
     amount: 5,
-    label: '$5 - I can contribute a little',
-    tier: 'supporter',
+    label: "$5 - I can contribute a little",
+    tier: "supporter",
     helcimPlanId: 20162,
     features: [
-      'All Free Membership benefits',
-      'Priority community support',
-      'Early access to events'
-    ]
+      "All Free Membership benefits",
+      "Priority community support",
+      "Early access to events",
+    ],
   },
   MEMBER: {
-    value: '15',
+    value: "15",
     amount: 15,
-    label: '$15 - I can sustain the community',
-    tier: 'member',
-    helcimPlanId: null, // TODO: Create $15/month plan in Helcim dashboard
+    label: "$15 - I can sustain the community",
+    tier: "member",
+    helcimPlanId: 21596,
     features: [
-      'All Supporter benefits',
-      'Access to premium workshops',
-      'Monthly 1-on-1 sessions',
-      'Advanced resource library'
-    ]
+      "All Supporter benefits",
+      "Access to premium workshops",
+      "Monthly 1-on-1 sessions",
+      "Advanced resource library",
+    ],
   },
   ADVOCATE: {
-    value: '30',
+    value: "30",
     amount: 30,
-    label: '$30 - I can support others too',
-    tier: 'advocate',
-    helcimPlanId: null, // TODO: Create $30/month plan in Helcim dashboard
+    label: "$30 - I can support others too",
+    tier: "advocate",
+    helcimPlanId: 21597,
     features: [
-      'All Member benefits',
-      'Weekly group mentoring',
-      'Access to exclusive events',
-      'Direct messaging with experts'
-    ]
+      "All Member benefits",
+      "Weekly group mentoring",
+      "Access to exclusive events",
+      "Direct messaging with experts",
+    ],
   },
   CHAMPION: {
-    value: '50',
+    value: "50",
     amount: 50,
-    label: '$50 - I want to sponsor multiple members',
-    tier: 'champion',
-    helcimPlanId: null, // TODO: Create $50/month plan in Helcim dashboard
+    label: "$50 - I want to sponsor multiple members",
+    tier: "champion",
+    helcimPlanId: 21598,
     features: [
-      'All Advocate benefits',
-      'Personal mentoring sessions',
-      'VIP event access',
-      'Custom project support',
-      'Annual strategy session'
-    ]
-  }
+      "All Advocate benefits",
+      "Personal mentoring sessions",
+      "VIP event access",
+      "Custom project support",
+      "Annual strategy session",
+    ],
+  },
 };
 
 // Get all contribution options as an array (useful for forms)
@@ -75,12 +72,12 @@ export const getContributionOptions = () => {
 
 // Get valid contribution values for validation
 export const getValidContributionValues = () => {
-  return Object.values(CONTRIBUTION_TIERS).map(tier => tier.value);
+  return Object.values(CONTRIBUTION_TIERS).map((tier) => tier.value);
 };
 
 // Get contribution tier by value
 export const getContributionTierByValue = (value) => {
-  return Object.values(CONTRIBUTION_TIERS).find(tier => tier.value === value);
+  return Object.values(CONTRIBUTION_TIERS).find((tier) => tier.value === value);
 };
 
 // Get Helcim plan ID for a contribution tier
@@ -102,10 +99,12 @@ export const isValidContributionValue = (value) => {
 
 // Get contribution tier by Helcim plan ID
 export const getContributionTierByHelcimPlan = (helcimPlanId) => {
-  return Object.values(CONTRIBUTION_TIERS).find(tier => tier.helcimPlanId === helcimPlanId);
+  return Object.values(CONTRIBUTION_TIERS).find(
+    (tier) => tier.helcimPlanId === helcimPlanId,
+  );
 };
 
 // Get paid tiers only (excluding free tier)
 export const getPaidContributionTiers = () => {
-  return Object.values(CONTRIBUTION_TIERS).filter(tier => tier.amount > 0);
+  return Object.values(CONTRIBUTION_TIERS).filter((tier) => tier.amount > 0);
 };
diff --git a/server/models/event.js b/server/models/event.js
index d160776..e777385 100644
--- a/server/models/event.js
+++ b/server/models/event.js
@@ -1,4 +1,4 @@
-import mongoose from 'mongoose'
+import mongoose from "mongoose";
 
 const eventSchema = new mongoose.Schema({
   title: { type: String, required: true },
@@ -9,14 +9,14 @@ const eventSchema = new mongoose.Schema({
   featureImage: {
     url: String, // Cloudinary URL
     publicId: String, // Cloudinary public ID for transformations
-    alt: String // Alt text for accessibility
+    alt: String, // Alt text for accessibility
   },
   startDate: { type: Date, required: true },
   endDate: { type: Date, required: true },
   eventType: {
     type: String,
-    enum: ['community', 'workshop', 'social', 'showcase'],
-    default: 'community'
+    enum: ["community", "workshop", "social", "showcase"],
+    default: "community",
   },
   // Online-first location handling
   location: {
@@ -24,14 +24,15 @@ const eventSchema = new mongoose.Schema({
     required: true,
     // This will typically be a Slack channel or video conference link
     validate: {
-      validator: function(v) {
+      validator: function (v) {
         // Must be either a valid URL or a Slack channel reference
         const urlPattern = /^https?:\/\/.+/;
         const slackPattern = /^#[a-zA-Z0-9-_]+$/;
         return urlPattern.test(v) || slackPattern.test(v);
       },
-      message: 'Location must be a valid URL (video conference link) or Slack channel (starting with #)'
-    }
+      message:
+        "Location must be a valid URL (video conference link) or Slack channel (starting with #)",
+    },
   },
   isOnline: { type: Boolean, default: true }, // Default to online-first
   // Visibility and status controls
@@ -46,97 +47,110 @@ const eventSchema = new mongoose.Schema({
     description: String, // Series description
     type: {
       type: String,
-      enum: ['workshop_series', 'recurring_meetup', 'multi_day', 'course', 'tournament'],
-      default: 'workshop_series'
+      enum: [
+        "workshop_series",
+        "recurring_meetup",
+        "multi_day",
+        "course",
+        "tournament",
+      ],
+      default: "workshop_series",
     },
     position: Number, // Order within the series (e.g., 1 = first event, 2 = second, etc.)
     totalEvents: Number, // Total planned events in the series
-    isSeriesEvent: { type: Boolean, default: false } // Flag to identify series events
+    isSeriesEvent: { type: Boolean, default: false }, // Flag to identify series events
   },
   // Event pricing for public attendees (deprecated - use tickets instead)
   pricing: {
     isFree: { type: Boolean, default: true },
     publicPrice: { type: Number, default: 0 }, // Price for non-members
-    currency: { type: String, default: 'CAD' },
-    paymentRequired: { type: Boolean, default: false }
+    currency: { type: String, default: "CAD" },
+    paymentRequired: { type: Boolean, default: false },
   },
   // Ticket configuration
   tickets: {
     enabled: { type: Boolean, default: false },
     public: {
       available: { type: Boolean, default: false },
-      name: { type: String, default: 'Public Ticket' },
+      name: { type: String, default: "Public Ticket" },
       description: String,
       price: { type: Number, default: 0 },
       quantity: Number, // null = unlimited
       sold: { type: Number, default: 0 },
       earlyBirdPrice: Number,
-      earlyBirdDeadline: Date
-    }
+      earlyBirdDeadline: Date,
+    },
   },
   // Circle targeting
-  targetCircles: [{
-    type: String,
-    enum: ['community', 'founder', 'practitioner'],
-    required: false
-  }],
+  targetCircles: [
+    {
+      type: String,
+      enum: ["community", "founder", "practitioner"],
+      required: false,
+    },
+  ],
   maxAttendees: Number,
   registrationRequired: { type: Boolean, default: false },
   registrationDeadline: Date,
   agenda: [String],
-  speakers: [{
-    name: String,
-    role: String,
-    bio: String
-  }],
-  registrations: [{
-    name: String,
-    email: String,
-    membershipLevel: String,
-    isMember: { type: Boolean, default: false },
-    paymentStatus: { 
-      type: String, 
-      enum: ['pending', 'completed', 'failed', 'not_required'], 
-      default: 'not_required' 
+  speakers: [
+    {
+      name: String,
+      role: String,
+      bio: String,
     },
-    paymentId: String, // Helcim transaction ID
-    amountPaid: { type: Number, default: 0 },
-    registeredAt: { type: Date, default: Date.now }
-  }],
+  ],
+  registrations: [
+    {
+      memberId: { type: mongoose.Schema.Types.ObjectId, ref: "Member" }, // Reference to Member model
+      name: String,
+      email: String,
+      membershipLevel: String,
+      isMember: { type: Boolean, default: false },
+      paymentStatus: {
+        type: String,
+        enum: ["pending", "completed", "failed", "not_required"],
+        default: "not_required",
+      },
+      paymentId: String, // Helcim transaction ID
+      amountPaid: { type: Number, default: 0 },
+      registeredAt: { type: Date, default: Date.now },
+    },
+  ],
   createdBy: { type: String, required: true },
   createdAt: { type: Date, default: Date.now },
-  updatedAt: { type: Date, default: Date.now }
-})
+  updatedAt: { type: Date, default: Date.now },
+});
 
 // Generate slug from title
 function generateSlug(title) {
   return title
     .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
 }
 
 // Pre-save hook to generate slug
-eventSchema.pre('save', async function(next) {
+eventSchema.pre("save", async function (next) {
   try {
-    if (this.isNew || this.isModified('title')) {
-      let baseSlug = generateSlug(this.title)
-      let slug = baseSlug
-      let counter = 1
-      
+    if (this.isNew || this.isModified("title")) {
+      let baseSlug = generateSlug(this.title);
+      let slug = baseSlug;
+      let counter = 1;
+
       // Ensure slug is unique
       while (await this.constructor.findOne({ slug, _id: { $ne: this._id } })) {
-        slug = `${baseSlug}-${counter}`
-        counter++
+        slug = `${baseSlug}-${counter}`;
+        counter++;
       }
-      
-      this.slug = slug
-    }
-    next()
-  } catch (error) {
-    console.error('Error in pre-save hook:', error)
-    next(error)
-  }
-})
 
-export default mongoose.models.Event || mongoose.model('Event', eventSchema)
\ No newline at end of file
+      this.slug = slug;
+    }
+    next();
+  } catch (error) {
+    console.error("Error in pre-save hook:", error);
+    next(error);
+  }
+});
+
+export default mongoose.models.Event || mongoose.model("Event", eventSchema);
diff --git a/server/models/member.js b/server/models/member.js
index 3546717..0212ce4 100644
--- a/server/models/member.js
+++ b/server/models/member.js
@@ -1,46 +1,125 @@
 // server/models/member.js
-import mongoose from 'mongoose'
-import { resolve } from 'path'
-import { fileURLToPath } from 'url'
+import mongoose from "mongoose";
+import { resolve } from "path";
+import { fileURLToPath } from "url";
 
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 // Import configs using dynamic imports to avoid build issues
-const getValidCircleValues = () => ['community', 'founder', 'practitioner']
-const getValidContributionValues = () => ['0', '5', '15', '30', '50']
+const getValidCircleValues = () => ["community", "founder", "practitioner"];
+const getValidContributionValues = () => ["0", "5", "15", "30", "50"];
 
 const memberSchema = new mongoose.Schema({
   email: { type: String, required: true, unique: true },
   name: { type: String, required: true },
-  circle: { 
-    type: String, 
+  circle: {
+    type: String,
     enum: getValidCircleValues(),
-    required: true 
+    required: true,
   },
   contributionTier: {
     type: String,
     enum: getValidContributionValues(),
-    required: true
+    required: true,
   },
   status: {
     type: String,
-    enum: ['pending_payment', 'active', 'suspended', 'cancelled'],
-    default: 'pending_payment'
+    enum: ["pending_payment", "active", "suspended", "cancelled"],
+    default: "pending_payment",
   },
   helcimCustomerId: String,
   helcimSubscriptionId: String,
   paymentMethod: {
     type: String,
-    enum: ['card', 'bank', 'none'],
-    default: 'none'
+    enum: ["card", "bank", "none"],
+    default: "none",
   },
   subscriptionStartDate: Date,
   subscriptionEndDate: Date,
   nextBillingDate: Date,
   slackInvited: { type: Boolean, default: false },
+  slackInviteStatus: {
+    type: String,
+    enum: ["pending", "sent", "failed", "accepted"],
+    default: "pending",
+  },
+  slackUserId: String,
+
+  // Profile fields
+  pronouns: String,
+  timeZone: String,
+  avatar: String,
+  studio: String,
+  bio: String,
+  skills: [String],
+  location: String,
+  socialLinks: {
+    mastodon: String,
+    linkedin: String,
+    website: String,
+    other: String,
+  },
+  offering: String,
+  lookingFor: String,
+  showInDirectory: { type: Boolean, default: true },
+
+  // Privacy settings for profile fields
+  privacy: {
+    pronouns: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    timeZone: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    avatar: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "public",
+    },
+    studio: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    bio: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    skills: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    location: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    socialLinks: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    offering: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+    lookingFor: {
+      type: String,
+      enum: ["public", "members", "private"],
+      default: "members",
+    },
+  },
+
   createdAt: { type: Date, default: Date.now },
-  lastLogin: Date
-})
+  lastLogin: Date,
+});
 
 // Check if model already exists to prevent re-compilation in development
-export default mongoose.models.Member || mongoose.model('Member', memberSchema)
\ No newline at end of file
+export default mongoose.models.Member || mongoose.model("Member", memberSchema);
diff --git a/server/models/update.js b/server/models/update.js
new file mode 100644
index 0000000..0e23991
--- /dev/null
+++ b/server/models/update.js
@@ -0,0 +1,50 @@
+import mongoose from "mongoose";
+
+const updateSchema = new mongoose.Schema({
+  author: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "Member",
+    required: true,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  images: [
+    {
+      url: String,
+      publicId: String,
+      alt: String,
+    },
+  ],
+  privacy: {
+    type: String,
+    enum: ["public", "members", "private"],
+    default: "members",
+  },
+  commentsEnabled: {
+    type: Boolean,
+    default: true,
+  },
+  createdAt: {
+    type: Date,
+    default: Date.now,
+  },
+  updatedAt: {
+    type: Date,
+    default: Date.now,
+  },
+});
+
+// Update the updatedAt timestamp on save
+updateSchema.pre("save", function (next) {
+  this.updatedAt = Date.now();
+  next();
+});
+
+// Indexes for performance
+updateSchema.index({ createdAt: -1 }); // For sorting by date
+updateSchema.index({ privacy: 1, createdAt: -1 }); // Compound index for filtering and sorting
+updateSchema.index({ author: 1 }); // For author lookups
+
+export default mongoose.models.Update || mongoose.model("Update", updateSchema);
diff --git a/server/utils/slack.ts b/server/utils/slack.ts
new file mode 100644
index 0000000..3547694
--- /dev/null
+++ b/server/utils/slack.ts
@@ -0,0 +1,233 @@
+import { WebClient } from "@slack/web-api";
+
+export class SlackService {
+  private client: WebClient;
+  private vettingChannelId: string;
+
+  constructor(botToken: string, vettingChannelId: string) {
+    this.client = new WebClient(botToken);
+    this.vettingChannelId = vettingChannelId;
+  }
+
+  /**
+   * Invite user to workspace and channel (using proper admin and conversation scopes)
+   */
+  async inviteUserToSlack(
+    email: string,
+    realName: string
+  ): Promise<{
+    success: boolean;
+    userId?: string;
+    status?: string;
+    error?: string;
+  }> {
+    try {
+      // First, check if user already exists in workspace
+      const existingUser = await this.findUserByEmail(email);
+
+      if (existingUser) {
+        // User exists, invite them to the vetting channel
+        try {
+          await this.client.conversations.invite({
+            channel: this.vettingChannelId,
+            users: existingUser,
+          });
+
+          console.log(
+            `Successfully invited existing user ${email} to vetting channel`
+          );
+          return {
+            success: true,
+            userId: existingUser,
+            status: "existing_user_added_to_channel",
+          };
+        } catch (error: any) {
+          if (error.data?.error === "already_in_channel") {
+            return {
+              success: true,
+              userId: existingUser,
+              status: "user_already_in_channel",
+            };
+          }
+          throw error;
+        }
+      }
+
+      // User doesn't exist, try to invite to workspace using admin API
+      try {
+        const inviteResponse = await this.client.admin.users.invite({
+          email: email,
+          real_name: realName,
+          channel_ids: [this.vettingChannelId],
+          is_restricted: true, // Single-channel guest
+          is_ultra_restricted: false,
+        });
+
+        if (inviteResponse.ok && inviteResponse.user) {
+          console.log(
+            `Successfully invited ${email} to workspace as single-channel guest`
+          );
+          return {
+            success: true,
+            userId: inviteResponse.user.id,
+            status: "new_user_invited_to_workspace",
+          };
+        } else {
+          throw new Error(`Admin invite failed: ${inviteResponse.error}`);
+        }
+      } catch (adminError: any) {
+        console.log(
+          `Admin API not available or failed: ${
+            adminError.data?.error || adminError.message
+          }`
+        );
+
+        // Fall back to manual process
+        return {
+          success: true,
+          status: "manual_invitation_required",
+          error: `Admin API unavailable: ${
+            adminError.data?.error || adminError.message
+          }`,
+        };
+      }
+    } catch (error: any) {
+      console.error(`Failed to process invitation for ${email}:`, error);
+
+      return {
+        success: false,
+        error: error.data?.error || error.message || "Unknown error occurred",
+      };
+    }
+  }
+
+  /**
+   * Find user in workspace by email
+   */
+  private async findUserByEmail(email: string): Promise<string | null> {
+    try {
+      const response = await this.client.users.lookupByEmail({ email });
+      return response.user?.id || null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Send a notification to the vetting channel about a new member
+   */
+  async notifyNewMember(
+    memberName: string,
+    memberEmail: string,
+    circle: string,
+    contributionTier: string,
+    invitationStatus: string = "manual_invitation_required"
+  ): Promise<void> {
+    try {
+      let statusMessage = "";
+      let actionMessage = "";
+
+      switch (invitationStatus) {
+        case "existing_user_added_to_channel":
+          statusMessage =
+            "✅ Existing user automatically added to this channel.";
+          actionMessage = "Ready for vetting!";
+          break;
+        case "user_already_in_channel":
+          statusMessage = "✅ User is already in this channel.";
+          actionMessage = "Ready for vetting!";
+          break;
+        case "new_user_invited_to_workspace":
+          statusMessage =
+            "🎉 User successfully invited to workspace as single-channel guest.";
+          actionMessage = "Ready for vetting!";
+          break;
+        case "manual_invitation_required":
+          statusMessage = "📧 User needs to be manually invited to join Slack.";
+          actionMessage = `Please vet this new member before inviting them to other channels.`;
+          break;
+        default:
+          statusMessage = "⚠️ Invitation status unknown.";
+          actionMessage = "Manual review required.";
+      }
+
+      await this.client.chat.postMessage({
+        channel: this.vettingChannelId,
+        text: `New Ghost Guild member: ${memberName}`,
+        blocks: [
+          {
+            type: "header",
+            text: {
+              type: "plain_text",
+              text: "New Ghost Guild Member Registration",
+            },
+          },
+          {
+            type: "section",
+            fields: [
+              {
+                type: "mrkdwn",
+                text: `*Name:*\n${memberName}`,
+              },
+              {
+                type: "mrkdwn",
+                text: `*Email:*\n${memberEmail}`,
+              },
+              {
+                type: "mrkdwn",
+                text: `*Circle:*\n${circle}`,
+              },
+              {
+                type: "mrkdwn",
+                text: `*Contribution:*\n$${contributionTier}/month`,
+              },
+            ],
+          },
+          {
+            type: "section",
+            text: {
+              type: "mrkdwn",
+              text: `*Status:* ${statusMessage}\n*Action:* ${actionMessage}`,
+            },
+          },
+          {
+            type: "divider",
+          },
+        ],
+      });
+    } catch (error) {
+      console.error("Failed to send Slack notification:", error);
+      // Don't throw - this is non-critical
+    }
+  }
+
+  /**
+   * Verify the Slack channel exists and bot has access
+   */
+  async verifyChannelAccess(): Promise<boolean> {
+    try {
+      const response = await this.client.conversations.info({
+        channel: this.vettingChannelId,
+      });
+      return response.ok && !!response.channel;
+    } catch {
+      return false;
+    }
+  }
+}
+
+/**
+ * Get configured Slack service instance
+ */
+export function getSlackService(): SlackService | null {
+  const config = useRuntimeConfig();
+
+  if (!config.slackBotToken || !config.slackVettingChannelId) {
+    console.warn(
+      "Slack integration not configured - missing bot token or channel ID"
+    );
+    return null;
+  }
+
+  return new SlackService(config.slackBotToken, config.slackVettingChannelId);
+}
diff --git a/slack-app-manifest.yaml b/slack-app-manifest.yaml
new file mode 100644
index 0000000..b125530
--- /dev/null
+++ b/slack-app-manifest.yaml
@@ -0,0 +1,30 @@
+display_information:
+  name: Ghost Guild Member Bot
+  description: Automatically invites new Ghost Guild members to Slack as single-channel guests for vetting
+  background_color: "#2c2d30"
+  long_description: This bot automatically invites newly registered Ghost Guild members to a designated vetting channel as single-channel guests. Staff can then manually verify and upgrade members as needed. The bot also sends notifications about new members to help with the vetting process.
+
+features:
+  bot_user:
+    display_name: Ghost Guild Member Bot
+    always_online: false
+
+oauth_config:
+  scopes:
+    bot:
+      - channels:read                # To verify channel access
+      - channels:join                # To join channels if needed
+      - chat:write                   # To send notifications to vetting channel
+      - chat:write.public            # To post in public channels
+      - users:read                   # To get user information
+      - users:read.email             # To match users by email
+      - conversations:write.invites  # Modern scope for inviting to channels
+      - conversations:history        # To read channel messages
+      - admin.users:write           # To invite users to workspace
+      - admin.conversations:write   # To manage conversations administratively
+      - im:write                    # To send direct messages
+
+settings:
+  org_deploy_enabled: false
+  socket_mode_enabled: false
+  token_rotation_enabled: false
\ No newline at end of file