Lots of UI fixes

app/pages/events/[id].vue

@@ -202,14 +202,10 @@
             v-if="!event.isCancelled"
             class="bg-ghost-800 rounded-xl p-8 border border-ghost-700"
           >
-            <h3 class="text-xl font-bold text-ghost-100 mb-6">
-              Register for This Event
-            </h3>
-
-            <!-- Registration Status -->
-            <div v-if="registrationStatus === 'registered'" class="mb-6">
+            <!-- Already Registered Status -->
+            <div v-if="registrationStatus === 'registered'">
               <div
-                class="p-4 bg-green-900/20 rounded-lg border border-green-800"
+                class="p-4 bg-green-900/20 rounded-lg border border-green-800 mb-6"
               >
                 <div class="flex items-start justify-between">
                   <div>
@@ -233,40 +229,51 @@
               </div>
             </div>
 
-            <!-- Member Gate Warning -->
+            <!-- Logged In - Can Register -->
             <div
-              v-if="
-                event.membersOnly &&
-                !isMember &&
-                registrationStatus !== 'registered'
-              "
-              class="mb-6"
+              v-else-if="memberData && (!event.membersOnly || isMember)"
+              class="text-center"
             >
-              <div
-                class="p-4 bg-amber-900/20 rounded-lg border border-amber-800"
+              <p class="text-lg text-ghost-200 mb-6">
+                You are logged in, {{ memberData.name }}.
+              </p>
+              <UButton
+                color="primary"
+                size="xl"
+                @click="handleRegistration"
+                :loading="isRegistering"
+                class="px-12 py-4"
               >
-                <p class="font-semibold text-amber-300">Membership Required</p>
-                <p class="text-sm text-amber-400 mt-1">
+                {{ isRegistering ? "Registering..." : "Register Now" }}
+              </UButton>
+            </div>
+
+            <!-- Member Gate Warning -->
+            <div v-else-if="event.membersOnly && !isMember" class="text-center">
+              <div
+                class="p-6 bg-amber-900/20 rounded-lg border border-amber-800 mb-6"
+              >
+                <p class="font-semibold text-amber-300 text-lg mb-2">
+                  Membership Required
+                </p>
+                <p class="text-amber-400">
                   This event is exclusive to Ghost Guild members. Join any
                   circle to gain access.
                 </p>
-                <NuxtLink
-                  to="/join"
-                  class="inline-flex items-center text-sm font-medium text-amber-300 hover:underline mt-2"
-                >
-                  Become a member →
-                </NuxtLink>
               </div>
+              <NuxtLink to="/join">
+                <UButton color="primary" size="xl" class="px-12 py-4">
+                  Become a Member to Register
+                </UButton>
+              </NuxtLink>
             </div>
 
-            <!-- Registration Form -->
-            <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">
+            <!-- Not Logged In - Show Registration Form -->
+            <div v-else>
+              <h3 class="text-xl font-bold text-ghost-100 mb-6">
+                Register for This Event
+              </h3>
+              <form @submit.prevent="handleRegistration" class="space-y-4">
                 <div>
                   <label
                     for="name"
@@ -312,26 +319,22 @@
                     :options="membershipOptions"
                   />
                 </div>
-              </template>
 
-              <div class="pt-4">
-                <UButton
-                  v-if="!event.membersOnly || isMember"
-                  type="submit"
-                  color="primary"
-                  size="lg"
-                  block
-                  :loading="isRegistering"
-                >
-                  {{ isRegistering ? "Registering..." : "Register for Event" }}
-                </UButton>
-                <NuxtLink v-else to="/join" class="block">
-                  <UButton color="primary" size="lg" block>
-                    Become a Member to Register
+                <div class="pt-4">
+                  <UButton
+                    type="submit"
+                    color="primary"
+                    size="lg"
+                    block
+                    :loading="isRegistering"
+                  >
+                    {{
+                      isRegistering ? "Registering..." : "Register for Event"
+                    }}
                   </UButton>
-                </NuxtLink>
-              </div>
-            </form>
+                </div>
+              </form>
+            </div>
 
             <!-- Event Capacity -->
             <div