diff --git a/app/components/AppNavigation.vue b/app/components/AppNavigation.vue
index 070611b..6a82cd0 100644
--- a/app/components/AppNavigation.vue
+++ b/app/components/AppNavigation.vue
@@ -7,85 +7,123 @@
 
     <!-- Navigation sections -->
     <div class="sidebar-body">
-      <template v-if="isAuthenticated">
-        <!-- Logged-in nav -->
-        <div class="sidebar-section">You</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in youItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
+      <ClientOnly>
+        <template v-if="isAuthenticated">
+          <!-- Logged-in nav -->
+          <div class="sidebar-section">You</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in youItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
 
-        <div class="sidebar-section">Explore</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in exploreItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
+          <div class="sidebar-section">Explore</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in exploreItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
 
-        <div class="sidebar-section">Community</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in communityItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
-      </template>
+          <div class="sidebar-section">Community</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in communityItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+        </template>
 
-      <template v-else>
-        <!-- Public nav -->
-        <div class="sidebar-section">Navigate</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in publicItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
+        <template v-else>
+          <!-- Public nav -->
+          <div class="sidebar-section">Navigate</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in publicItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
 
-        <div class="sidebar-section">Join</div>
-        <ul class="sidebar-nav">
-          <li v-for="item in joinItems" :key="item.path">
-            <NuxtLink
-              :to="item.path"
-              :class="{ active: isActive(item.path) }"
-              @click="handleNavigate"
-            >{{ item.label }}</NuxtLink>
-          </li>
-        </ul>
-      </template>
+          <div class="sidebar-section">Join</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in joinItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+        </template>
+
+        <template #fallback>
+          <!-- Public nav (SSR fallback) -->
+          <div class="sidebar-section">Navigate</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in publicItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+
+          <div class="sidebar-section">Join</div>
+          <ul class="sidebar-nav">
+            <li v-for="item in joinItems" :key="item.path">
+              <NuxtLink
+                :to="item.path"
+                :class="{ active: isActive(item.path) }"
+                @click="handleNavigate"
+              >{{ item.label }}</NuxtLink>
+            </li>
+          </ul>
+        </template>
+      </ClientOnly>
     </div>
 
     <!-- Meta at bottom -->
     <div class="sidebar-meta">
-      <template v-if="isAuthenticated">
-        <span class="member-name">{{ memberData?.name || 'Member' }}</span><br>
-        <span
-          v-if="memberData?.circle"
-          class="member-circle"
-          :style="{ color: `var(--c-${memberData.circle})` }"
-        >{{ memberData.circle }}</span>
-        <br v-if="memberData?.circle">
-        <a href="#" @click.prevent="handleLogout">Sign out</a>
-      </template>
-      <template v-else>
-        Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
-        A Canadian nonprofit<br>
-        <a href="#" @click.prevent="openLogin">Sign in</a>
-      </template>
+      <ClientOnly>
+        <template v-if="isAuthenticated">
+          <span class="member-name">{{ memberData?.name || 'Member' }}</span><br>
+          <span
+            v-if="memberData?.circle"
+            class="member-circle"
+            :style="{ color: `var(--c-${memberData.circle})` }"
+          >{{ memberData.circle }}</span>
+          <br v-if="memberData?.circle">
+          <a href="#" @click.prevent="handleLogout">Sign out</a>
+        </template>
+        <template v-else>
+          Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
+          A Canadian nonprofit<br>
+          <a href="#" @click.prevent="openLogin">Sign in</a>
+        </template>
+
+        <template #fallback>
+          Part of <a href="https://babyghosts.fund" target="_blank">Baby Ghosts</a><br>
+          A Canadian nonprofit<br>
+          <a href="#" @click.prevent="openLogin">Sign in</a>
+        </template>
+      </ClientOnly>
+      <ClientOnly>
+        <ColorModeToggle />
+      </ClientOnly>
     </div>
   </aside>
 </template>
diff --git a/app/components/ColorModeToggle.vue b/app/components/ColorModeToggle.vue
new file mode 100644
index 0000000..fc7b28d
--- /dev/null
+++ b/app/components/ColorModeToggle.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="color-mode-toggle">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      :class="{ active: colorMode.preference === option.value }"
+      @click="colorMode.preference = option.value"
+    >{{ option.label }}</button>
+  </div>
+</template>
+
+<script setup>
+const colorMode = useColorMode()
+
+const options = [
+  { label: 'Light', value: 'light' },
+  { label: 'System', value: 'system' },
+  { label: 'Dark', value: 'dark' },
+]
+</script>
+
+<style scoped>
+.color-mode-toggle {
+  display: flex;
+  margin-top: 10px;
+}
+
+.color-mode-toggle button {
+  flex: 1;
+  padding: 4px 0;
+  font-family: 'Commit Mono', monospace;
+  font-size: 10px;
+  letter-spacing: 0.04em;
+  background: transparent;
+  color: var(--text-faint);
+  border: 1px dashed var(--border);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.color-mode-toggle button + button {
+  border-left: none;
+}
+
+.color-mode-toggle button:hover {
+  color: var(--text-dim);
+}
+
+.color-mode-toggle button.active {
+  color: var(--candle);
+  border-color: var(--candle);
+  border-style: solid;
+  background: var(--surface);
+}
+
+/* When active button is adjacent to dashed, restore left border */
+.color-mode-toggle button.active + button {
+  border-left: 1px dashed var(--border);
+}
+.color-mode-toggle button:has(+ button.active) {
+  border-right: none;
+}
+</style>
diff --git a/app/pages/admin/events/index.vue b/app/pages/admin/events/index.vue
index 2c23bde..e598956 100644
--- a/app/pages/admin/events/index.vue
+++ b/app/pages/admin/events/index.vue
@@ -23,7 +23,7 @@
           <USelect
             v-model="typeFilter"
             :items="[
-              { label: 'All Types', value: '' },
+              { label: 'All Types', value: 'all' },
               { label: 'Community', value: 'community' },
               { label: 'Workshop', value: 'workshop' },
               { label: 'Social', value: 'social' },
@@ -34,7 +34,7 @@
           <USelect
             v-model="statusFilter"
             :items="[
-              { label: 'All Status', value: '' },
+              { label: 'All Status', value: 'all' },
               { label: 'Upcoming', value: 'upcoming' },
               { label: 'Ongoing', value: 'ongoing' },
               { label: 'Past', value: 'past' },
@@ -44,7 +44,7 @@
           <USelect
             v-model="seriesFilter"
             :items="[
-              { label: 'All Events', value: '' },
+              { label: 'All Events', value: 'all' },
               { label: 'Series Events Only', value: 'series-only' },
               { label: 'Standalone Only', value: 'standalone-only' },
             ]"
@@ -370,9 +370,9 @@ const {
 } = await useFetch("/api/admin/events");
 
 const searchQuery = ref("");
-const typeFilter = ref("");
-const statusFilter = ref("");
-const seriesFilter = ref("");
+const typeFilter = ref("all");
+const statusFilter = ref("all");
+const seriesFilter = ref("all");
 
 const filteredEvents = computed(() => {
   if (!events.value) return [];
@@ -384,14 +384,14 @@ const filteredEvents = computed(() => {
       event.description.toLowerCase().includes(searchQuery.value.toLowerCase());
 
     const matchesType =
-      !typeFilter.value || event.eventType === typeFilter.value;
+      typeFilter.value === "all" || event.eventType === typeFilter.value;
 
     const eventStatus = getEventStatus(event);
     const matchesStatus =
-      !statusFilter.value || eventStatus.toLowerCase() === statusFilter.value;
+      statusFilter.value === "all" || eventStatus.toLowerCase() === statusFilter.value;
 
     const matchesSeries =
-      !seriesFilter.value ||
+      seriesFilter.value === "all" ||
       (seriesFilter.value === "series-only" && event.series?.isSeriesEvent) ||
       (seriesFilter.value === "standalone-only" &&
         !event.series?.isSeriesEvent);