diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 54cd40e..555ebaf 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -40,6 +40,18 @@
         </li>
       </ul>
 
+      <!-- Contact Email -->
+      <div class="mt-8 pt-6 border-t border-ghost-800/50">
+        <p class="text-ghost-500 text-xs">
+          Contact us:
+          <a
+            href="mailto:hello@ghostguild.org"
+            class="text-ghost-400 hover:text-ghost-300 transition-colors"
+            >hello@ghostguild.org</a
+          >
+        </p>
+      </div>
+
       <!-- Color Mode Switcher -->
       <div class="mb-6">
         <UColorModeButton size="md" class="w-full" />
@@ -149,7 +161,6 @@ const publicNavigationItems = [
   { 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 memberNavigationItems = [
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
deleted file mode 100644
index 28f72cf..0000000
--- a/app/pages/contact.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-  <div class="relative">
-    <!-- Hero Section -->
-    <section class="mb-24">
-      <div class="relative">
-        <h1
-          class="text-6xl md:text-8xl font-bold text-ghost-100 ethereal-text leading-tight mb-8"
-        >
-          Get in Touch
-        </h1>
-
-        <div class="mb-16">
-          <p class="text-ghost-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="mb-32 relative">
-      <div class="mb-12">
-        <h2 class="text-3xl font-light text-ghost-200 mb-4">
-          Send us a message (or email hello@ghostguild.org)
-        </h2>
-      </div>
-
-      <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>
-
-            <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"
-              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"
-              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-ghost-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 v-if="error" class="mt-6 p-4 border border-ghost-700 bg-ghost-900">
-          <p class="text-ghost-300 text-center">
-            {{ error }}
-          </p>
-        </div>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { reactive, ref, computed } from "vue";
-
-// Form state
-const form = reactive({
-  name: "",
-  email: "",
-  subject: "",
-  message: "",
-  newsletter: false,
-});
-
-// UI state
-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" },
-];
-
-// 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
-  );
-});
-
-// Form submission
-const handleSubmit = async () => {
-  if (isSubmitting.value) return;
-
-  isSubmitting.value = true;
-  error.value = "";
-  success.value = false;
-
-  try {
-    // Simulate API call
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-
-    // For now, just show success message
-    success.value = true;
-
-    // Reset form after success
-    setTimeout(() => {
-      Object.assign(form, {
-        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.";
-  } finally {
-    isSubmitting.value = false;
-  }
-};
-</script>
diff --git a/app/pages/join.vue b/app/pages/join.vue
index e5bb2c4..fe6de56 100644
--- a/app/pages/join.vue
+++ b/app/pages/join.vue
@@ -153,7 +153,7 @@
                   class="flex flex-col p-6 rounded-lg border-2 cursor-pointer transition-all hover:shadow-md"
                   :class="
                     form.circle === option.value
-                      ? 'border-neutral-900 bg-[--ui-bg]'
+                      ? 'border-primary bg-primary/5'
                       : 'border-neutral-200 hover:border-neutral-400'
                   "
                 >
@@ -162,7 +162,7 @@
                     type="radio"
                     :value="option.value"
                     name="circle"
-                    class="mb-3"
+                    class="sr-only"
                   />
                   <div class="font-medium text-lg mb-2">{{ option.label }}</div>
                   <div class="text-sm text-[--ui-text-muted]">