diff --git a/backend/src/api.rs b/backend/src/api.rs
index f8204b5..3203f9c 100644
--- a/backend/src/api.rs
+++ b/backend/src/api.rs
@@ -321,7 +321,6 @@ struct UpdateRelayRequest {
     subdomain: String,
     icon: String,
     description: String,
-    plan: String,
     config: Option<RelayConfig>,
 }
 
@@ -363,7 +362,7 @@ async fn update_tenant_relay(
         subdomain: payload.subdomain.clone(),
         icon: payload.icon,
         description: payload.description,
-        plan: payload.plan,
+        plan: existing.plan,
         status: existing.status,
         config: payload.config,
     };
@@ -760,7 +759,7 @@ async fn admin_update_relay(
         subdomain: payload.subdomain.clone(),
         icon: payload.icon,
         description: payload.description,
-        plan: payload.plan,
+        plan: existing.plan,
         status: existing.status,
         config: payload.config,
     };
diff --git a/frontend/src/assets/menu-dots-2.svg b/frontend/src/assets/menu-dots-2.svg
new file mode 100644
index 0000000..604381c
--- /dev/null
+++ b/frontend/src/assets/menu-dots-2.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="5" r="2" transform="rotate(90 12 5)" stroke="#000000" stroke-width="1.5"/>
+<circle cx="12" cy="12" r="2" transform="rotate(90 12 12)" stroke="#000000" stroke-width="1.5"/>
+<circle cx="12" cy="19" r="2" transform="rotate(90 12 19)" stroke="#000000" stroke-width="1.5"/>
+</svg>
diff --git a/frontend/src/components/RelayDetailCard.tsx b/frontend/src/components/RelayDetailCard.tsx
index 84208a6..c6c9746 100644
--- a/frontend/src/components/RelayDetailCard.tsx
+++ b/frontend/src/components/RelayDetailCard.tsx
@@ -1,5 +1,7 @@
-import { For, Show } from "solid-js"
+import { A } from "@solidjs/router"
+import { Show, createEffect, createSignal, onCleanup } from "solid-js"
 import type { Relay } from "../lib/api"
+import menuDotsIcon from "../assets/menu-dots-2.svg"
 
 function Field(props: { label: string; children: any }) {
   return (
@@ -10,20 +12,60 @@ function Field(props: { label: string; children: any }) {
   )
 }
 
-function Badge(props: { on: boolean; onLabel?: string; offLabel?: string }) {
-  const label = () => (props.on ? (props.onLabel ?? "Yes") : (props.offLabel ?? "No"))
+function ToggleField(props: { label: string; children: any }) {
   return (
-    <span class={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${props.on ? "bg-green-100 text-green-700" : "bg-gray-100 text-gray-500"}`}>
-      {label()}
-    </span>
+    <div class="flex items-center justify-between gap-3">
+      <dt class="text-xs font-medium text-gray-500 uppercase tracking-wide">{props.label}</dt>
+      <dd class="text-sm text-gray-900">{props.children}</dd>
+    </div>
   )
 }
 
-function Section(props: { title: string; children: any }) {
+function ToggleButton(props: {
+  enabled: boolean
+  disabled?: boolean
+  onToggle?: () => void
+  onLabel?: string
+  offLabel?: string
+}) {
+  const label = () => (props.enabled ? (props.onLabel ?? "Enabled") : (props.offLabel ?? "Disabled"))
+
+  return (
+    <div class="inline-flex items-center gap-2">
+      <button
+        type="button"
+        role="switch"
+        aria-checked={props.enabled}
+        aria-label={label()}
+        class={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${props.enabled ? "bg-blue-600" : "bg-gray-300"} disabled:opacity-50`}
+        onClick={props.onToggle}
+        disabled={props.disabled}
+      >
+        <span
+          class={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${props.enabled ? "translate-x-5" : "translate-x-0.5"}`}
+        />
+      </button>
+      <span class={`text-xs font-medium ${props.enabled ? "text-blue-700" : "text-gray-500"}`}>{label()}</span>
+    </div>
+  )
+}
+
+function DetailSection(props: { title: string; children: any }) {
   return (
     <div>
       <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">{props.title}</h3>
-      <dl class="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-3">
+      <dl class="grid lg:grid-cols-2 gap-x-32 gap-y-4">
+        {props.children}
+      </dl>
+    </div>
+  )
+}
+
+function MembershipSection(props: { title: string; children: any }) {
+  return (
+    <div>
+      <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">{props.title}</h3>
+      <dl class="grid gap-x-6 gap-y-4 sm:grid-cols-2">
         {props.children}
       </dl>
     </div>
@@ -32,98 +74,223 @@ function Section(props: { title: string; children: any }) {
 
 type RelayDetailCardProps = {
   relay: Relay
+  currentMembers?: number
   showTenant?: boolean
+  editHref?: string
+  onDeactivate?: () => void
+  deactivating?: boolean
+  onTogglePublicJoin?: () => void
+  onToggleStripSignatures?: () => void
+  onToggleGroups?: () => void
+  onToggleManagement?: () => void
+  onToggleMediaStorage?: () => void
+  onTogglePushNotifications?: () => void
 }
 
 export default function RelayDetailCard(props: RelayDetailCardProps) {
   const r = () => props.relay
   const cfg = () => r().config
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  let menuContainerRef: HTMLDivElement | undefined
+
+  const memberLimitByPlan: Record<string, string> = {
+    free: "10",
+    basic: "100",
+    growth: "∞",
+  }
+
+  const memberLimitLabel = () => memberLimitByPlan[r().plan] ?? "?"
+  const isTopTier = () => r().plan === "growth"
+
+  createEffect(() => {
+    if (!menuOpen()) return
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node | null
+      if (target && !menuContainerRef?.contains(target)) {
+        setMenuOpen(false)
+      }
+    }
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setMenuOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside)
+    document.addEventListener("keydown", handleEscape)
+
+    onCleanup(() => {
+      document.removeEventListener("mousedown", handleClickOutside)
+      document.removeEventListener("keydown", handleEscape)
+    })
+  })
 
   return (
     <div class="space-y-6">
       {/* Header */}
-      <div class="flex items-start gap-4">
-        <Show when={r().icon}>
-          <img src={r().icon} alt="" class="w-14 h-14 rounded-xl object-cover flex-shrink-0 border border-gray-200" />
-        </Show>
-        <div class="min-w-0">
-          <h1 class="text-2xl font-bold text-gray-900">{r().name}</h1>
-          <a
-            href={`wss://${r().subdomain}.spaces.coracle.social`}
-            class="text-sm text-blue-600 hover:underline break-all"
-          >
-            wss://{r().subdomain}.spaces.coracle.social
-          </a>
-          <Show when={r().description.trim()}>
-            <p class="mt-2 text-sm text-gray-600">{r().description}</p>
+      <div class="flex items-start justify-between gap-4">
+        <div class="flex items-start gap-4 min-w-0">
+          <Show when={r().icon}>
+            <img src={r().icon} alt="" class="w-14 h-14 rounded-xl object-cover flex-shrink-0 border border-gray-200" />
           </Show>
+          <div class="min-w-0">
+            <h1 class="text-2xl font-bold text-gray-900">{r().name}</h1>
+            <a
+              href={`wss://${r().subdomain}.spaces.coracle.social`}
+              class="text-sm text-blue-600 hover:underline break-all"
+            >
+              wss://{r().subdomain}.spaces.coracle.social
+            </a>
+            <Show when={r().description.trim()}>
+              <p class="mt-2 text-sm text-gray-600">{r().description}</p>
+            </Show>
+          </div>
         </div>
+
+        <Show when={props.editHref && props.onDeactivate}>
+          <div class="relative flex-shrink-0" ref={menuContainerRef}>
+            <button
+              type="button"
+              class="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-200 hover:bg-gray-50"
+              aria-label="Open relay actions"
+              onClick={() => setMenuOpen((open) => !open)}
+            >
+              <img src={menuDotsIcon} alt="" class="h-5 w-5" />
+            </button>
+
+            <div
+              class="absolute right-0 mt-2 w-44 rounded-lg border border-gray-200 bg-white shadow-lg z-10 py-1 origin-top-right transition-all duration-150 ease-out"
+              classList={{
+                "opacity-100 scale-100": menuOpen(),
+                "opacity-0 scale-95 pointer-events-none": !menuOpen(),
+              }}
+            >
+              <A
+                href={props.editHref!}
+                class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+                onClick={() => setMenuOpen(false)}
+              >
+                Edit Details
+              </A>
+              <button
+                type="button"
+                class="block w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 disabled:opacity-50"
+                onClick={() => {
+                  setMenuOpen(false)
+                  props.onDeactivate?.()
+                }}
+                disabled={props.deactivating}
+              >
+                {props.deactivating ? "Deactivating..." : "Deactivate"}
+              </button>
+            </div>
+          </div>
+        </Show>
       </div>
 
       <hr class="border-gray-200" />
 
-      {/* Relay info */}
-      <Section title="Relay">
-        <Field label="Plan">
-          <span class="capitalize">{r().plan}</span>
+      <DetailSection title="Policy">
+        <ToggleField label="Public join">
+          <ToggleButton
+            enabled={cfg()?.policy.public_join ?? false}
+            onToggle={props.onTogglePublicJoin}
+          />
+        </ToggleField>
+        <ToggleField label="Strip signatures">
+          <ToggleButton
+            enabled={cfg()?.policy.strip_signatures ?? false}
+            onToggle={props.onToggleStripSignatures}
+          />
+        </ToggleField>
+      </DetailSection>
+
+      <hr class="border-gray-200" />
+
+      <DetailSection title="Features">
+        <ToggleField label="Rooms">
+          <ToggleButton
+            enabled={cfg()?.groups.enabled ?? true}
+            onToggle={props.onToggleGroups}
+          />
+        </ToggleField>
+        <ToggleField label="Management API">
+          <ToggleButton
+            enabled={cfg()?.management.enabled ?? true}
+            onToggle={props.onToggleManagement}
+          />
+        </ToggleField>
+        <ToggleField label="Push notifications">
+          <ToggleButton
+            enabled={cfg()?.push.enabled ?? true}
+            onToggle={props.onTogglePushNotifications}
+          />
+        </ToggleField>
+        <ToggleField label="Media storage">
+          <Show
+            when={r().plan !== "free"}
+            fallback={
+              <A
+                href={props.editHref ?? "#"}
+                class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+              >
+                Upgrade Plan
+              </A>
+            }
+          >
+            <ToggleButton
+              enabled={cfg()?.blossom.enabled ?? true}
+              onToggle={props.onToggleMediaStorage}
+            />
+          </Show>
+        </ToggleField>
+        <ToggleField label="Audio Rooms">
+          <Show
+            when={r().plan !== "free"}
+            fallback={
+              <A
+                href={props.editHref ?? "#"}
+                class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+              >
+                Upgrade Plan
+              </A>
+            }
+          >
+            <ToggleButton
+              enabled={cfg()?.livekit.enabled ?? true}
+              onToggle={props.onToggleMediaStorage}
+            />
+          </Show>
+        </ToggleField>
+      </DetailSection>
+
+      <hr class="border-gray-200" />
+
+      <MembershipSection title="Membership">
+        <Field label="Current members">
+          <span class="font-medium text-gray-900">{props.currentMembers ?? "—"}</span>
         </Field>
-        <Field label="Status">
-          <span class={`capitalize font-medium ${r().status === "active" ? "text-green-600" : r().status === "deactivated" ? "text-red-500" : "text-yellow-600"}`}>
-            {r().status}
-          </span>
+        <Field label="Member limit">
+          <span class="text-gray-900">{memberLimitLabel()}</span>
         </Field>
-        <Field label="Schema">{r().schema}</Field>
         <Show when={props.showTenant}>
           <Field label="Tenant">
             <span class="font-mono text-xs break-all">{r().tenant}</span>
           </Field>
         </Show>
-      </Section>
-
-      <hr class="border-gray-200" />
-
-      {/* Config sections */}
-      <Show when={cfg()}>
-        <Section title="Policy">
-          <Field label="Public join">
-            <Badge on={cfg().policy.public_join} onLabel="Enabled" offLabel="Disabled" />
+        <Show when={!isTopTier() && props.editHref}>
+          <Field label=" ">
+            <A
+              href={props.editHref!}
+              class="inline-flex items-center rounded-lg border border-blue-200 bg-blue-50 px-3 py-1.5 text-xs font-medium text-blue-700 hover:bg-blue-100"
+            >
+              Upgrade Plan
+            </A>
           </Field>
-          <Field label="Strip signatures">
-            <Badge on={cfg().policy.strip_signatures} onLabel="Enabled" offLabel="Disabled" />
-          </Field>
-        </Section>
-
-        <hr class="border-gray-200" />
-
-        <Section title="Groups (NIP 29)">
-          <Field label="Enabled">
-            <Badge on={cfg().groups.enabled} />
-          </Field>
-          <Field label="Auto-join">
-            <Badge on={cfg().groups.auto_join} />
-          </Field>
-        </Section>
-
-        <hr class="border-gray-200" />
-
-        <Section title="Management (NIP 86)">
-          <Field label="Enabled">
-            <Badge on={cfg().management.enabled} />
-          </Field>
-
-        </Section>
-
-        <hr class="border-gray-200" />
-
-        <Section title="Features">
-          <Field label="Blossom">
-            <Badge on={cfg().blossom.enabled} onLabel="Enabled" offLabel="Disabled" />
-          </Field>
-          <Field label="Push (NIP 9a)">
-            <Badge on={cfg().push.enabled} onLabel="Enabled" offLabel="Disabled" />
-          </Field>
-        </Section>
-      </Show>
+        </Show>
+      </MembershipSection>
     </div>
   )
 }
diff --git a/frontend/src/components/RelayForm.tsx b/frontend/src/components/RelayForm.tsx
index 34a1a9d..589dff4 100644
--- a/frontend/src/components/RelayForm.tsx
+++ b/frontend/src/components/RelayForm.tsx
@@ -1,6 +1,3 @@
-import type { RelayConfig } from "../lib/api"
-import Checkbox from "./Checkbox"
-
 type RelayFormProps = {
   name: string
   setName: (value: string) => void
@@ -10,11 +7,6 @@ type RelayFormProps = {
   setIcon: (value: string) => void
   description: string
   setDescription: (value: string) => void
-  plan: string
-  setPlan: (value: string) => void
-  plans: readonly string[]
-  config: RelayConfig
-  setConfig: (value: RelayConfig) => void
   onSubmit: (e: Event) => void
   submitting: boolean
   error?: string
@@ -23,10 +15,6 @@ type RelayFormProps = {
 }
 
 export default function RelayForm(props: RelayFormProps) {
-  function patchConfig(patch: Partial<RelayConfig>) {
-    props.setConfig({ ...props.config, ...patch })
-  }
-
   return (
     <form onSubmit={props.onSubmit} class="space-y-6">
       {/* Basic info */}
@@ -69,81 +57,6 @@ export default function RelayForm(props: RelayFormProps) {
           class="w-full border border-gray-300 rounded-lg px-3 py-2"
         />
       </div>
-      <div>
-        <label class="block text-sm font-medium text-gray-700 mb-2">Plan</label>
-        <div class="flex gap-2">
-          {props.plans.map(p => (
-            <button
-              type="button"
-              class={`rounded-lg border px-3 py-2 text-sm capitalize ${props.plan === p ? "border-blue-600 text-blue-700" : "border-gray-300 text-gray-700"}`}
-              onClick={() => props.setPlan(p)}
-            >
-              {p}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Policy */}
-      <fieldset class="border border-gray-200 rounded-lg p-4 space-y-3">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Policy</legend>
-        <Checkbox
-          label="Allow public join (anyone can join without an invite)"
-          checked={props.config.policy.public_join}
-          onChange={v => patchConfig({ policy: { ...props.config.policy, public_join: v } })}
-        />
-        <Checkbox
-          label="Strip signatures when serving events to non-admins"
-          checked={props.config.policy.strip_signatures}
-          onChange={v => patchConfig({ policy: { ...props.config.policy, strip_signatures: v } })}
-        />
-      </fieldset>
-
-      {/* Groups (NIP 29) */}
-      <fieldset class="border border-gray-200 rounded-lg p-4 space-y-3">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Groups (NIP 29)</legend>
-        <Checkbox
-          label="Enable NIP 29 groups"
-          checked={props.config.groups.enabled}
-          onChange={v => patchConfig({ groups: { ...props.config.groups, enabled: v } })}
-        />
-        <Checkbox
-          label="Allow members to join groups without approval"
-          checked={props.config.groups.auto_join}
-          onChange={v => patchConfig({ groups: { ...props.config.groups, auto_join: v } })}
-        />
-      </fieldset>
-
-      {/* Management (NIP 86) */}
-      <fieldset class="border border-gray-200 rounded-lg p-4 space-y-3">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Management (NIP 86)</legend>
-        <Checkbox
-          label="Enable NIP 86 relay management"
-          checked={props.config.management.enabled}
-          onChange={v => patchConfig({ management: { enabled: v } })}
-        />
-      </fieldset>
-
-      {/* Blossom */}
-      <fieldset class="border border-gray-200 rounded-lg p-4">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Blossom</legend>
-        <Checkbox
-          label="Enable Blossom media storage"
-          checked={props.config.blossom.enabled}
-          onChange={v => patchConfig({ blossom: { enabled: v } })}
-        />
-      </fieldset>
-
-      {/* Push (NIP 9a) */}
-      <fieldset class="border border-gray-200 rounded-lg p-4">
-        <legend class="text-sm font-semibold text-gray-700 px-1">Push (NIP 9a)</legend>
-        <Checkbox
-          label="Enable NIP 9a push notifications"
-          checked={props.config.push.enabled}
-          onChange={v => patchConfig({ push: { enabled: v } })}
-        />
-      </fieldset>
-
       {props.error && <p class="text-sm text-red-600">{props.error}</p>}
       <button
         type="submit"
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index f507e91..9f90849 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -1,4 +1,5 @@
 import { accounts, API_URL } from "./nostr"
+import { Relay as NostrRelay, RelayManagement } from "applesauce-relay"
 
 type NostrTag = string[]
 
@@ -146,7 +147,6 @@ export type UpdateRelayInput = {
   subdomain: string
   icon: string
   description: string
-  plan: string
   config: RelayConfig
 }
 
@@ -245,3 +245,17 @@ export function adminDeactivateRelay(id: string) {
     method: "POST",
   })
 }
+
+export async function getRelayMemberCount(relayUrl: string): Promise<number | undefined> {
+  const signer = getActiveSigner()
+  const management = new RelayManagement(new NostrRelay(relayUrl), signer)
+
+  try {
+    const members = await management.listAllowedPubkeys()
+    return members.length
+  } catch {
+    // ignore and fall back to unknown member count
+  }
+
+  return undefined
+}
diff --git a/frontend/src/pages/admin/AdminRelayDetail.tsx b/frontend/src/pages/admin/AdminRelayDetail.tsx
index 31e6fd0..e284df2 100644
--- a/frontend/src/pages/admin/AdminRelayDetail.tsx
+++ b/frontend/src/pages/admin/AdminRelayDetail.tsx
@@ -1,6 +1,6 @@
-import { useParams, A } from "@solidjs/router"
+import { useParams } from "@solidjs/router"
 import { createResource, createSignal, Show } from "solid-js"
-import { adminDeactivateRelay, adminGetRelay } from "../../lib/api"
+import { adminDeactivateRelay, adminGetRelay, adminUpdateRelay, type RelayConfig } from "../../lib/api"
 import BackLink from "../../components/BackLink"
 import PageContainer from "../../components/PageContainer"
 import RelayDetailCard from "../../components/RelayDetailCard"
@@ -10,10 +10,10 @@ import useMinLoading from "../../components/useMinLoading"
 export default function AdminRelayDetail() {
   const params = useParams()
   const relayId = () => params.id ?? ""
-  const [relay, { refetch }] = createResource(relayId, adminGetRelay)
+  const [relay, { refetch, mutate }] = createResource(relayId, adminGetRelay)
   const [busy, setBusy] = createSignal(false)
   const [error, setError] = createSignal("")
-  const loading = useMinLoading(() => relay.loading)
+  const loading = useMinLoading(() => relay.loading && !relay())
 
   async function handleDeactivate() {
     if (busy()) return
@@ -29,6 +29,108 @@ export default function AdminRelayDetail() {
     }
   }
 
+  function withDefaults(config?: RelayConfig): RelayConfig {
+    return {
+      policy: {
+        public_join: config?.policy.public_join ?? false,
+        strip_signatures: config?.policy.strip_signatures ?? false,
+      },
+      groups: {
+        enabled: config?.groups.enabled ?? true,
+        auto_join: config?.groups.auto_join ?? true,
+      },
+      management: {
+        enabled: config?.management.enabled ?? true,
+      },
+      blossom: {
+        enabled: config?.blossom.enabled ?? (relay()?.plan !== "free"),
+      },
+      push: {
+        enabled: config?.push.enabled ?? true,
+      },
+    }
+  }
+
+  async function updateFlags(nextConfig: RelayConfig, previousConfig: RelayConfig) {
+    const current = relay()
+    if (!current) return
+
+    setError("")
+    const optimisticRelay = {
+      ...current,
+      config: nextConfig,
+    }
+    mutate(optimisticRelay)
+
+    try {
+      await adminUpdateRelay(relayId(), {
+        name: current.name,
+        subdomain: current.subdomain,
+        icon: current.icon,
+        description: current.description,
+        config: nextConfig,
+      })
+      await refetch()
+    } catch (e) {
+      mutate({ ...current, config: previousConfig })
+      setError(e instanceof Error ? e.message : "Failed to update relay settings")
+    }
+  }
+
+  function togglePublicJoin() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      policy: { ...config.policy, public_join: !config.policy.public_join },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleStripSignatures() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      policy: { ...config.policy, strip_signatures: !config.policy.strip_signatures },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleGroups() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      groups: { ...config.groups, enabled: !config.groups.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleManagement() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      management: { enabled: !config.management.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleMediaStorage() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      blossom: { enabled: !config.blossom.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function togglePushNotifications() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      push: { enabled: !config.push.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
   return (
     <PageContainer>
       <BackLink href="/admin/relays" label="Relays" />
@@ -44,26 +146,22 @@ export default function AdminRelayDetail() {
       <Show when={!loading() && relay()}>
         {(r) => (
           <div class="mb-6">
-            <RelayDetailCard relay={r()} showTenant />
+            <RelayDetailCard
+              relay={r()}
+              showTenant
+              editHref={`/admin/relays/${params.id}/edit`}
+              onDeactivate={handleDeactivate}
+              deactivating={busy()}
+              onTogglePublicJoin={togglePublicJoin}
+              onToggleStripSignatures={toggleStripSignatures}
+              onToggleGroups={toggleGroups}
+              onToggleManagement={toggleManagement}
+              onToggleMediaStorage={toggleMediaStorage}
+              onTogglePushNotifications={togglePushNotifications}
+            />
           </div>
         )}
       </Show>
-
-      <div class="flex gap-3">
-        <A
-          href={`/admin/relays/${params.id}/edit`}
-          class="py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
-        >
-          Edit
-        </A>
-        <button
-          class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors disabled:opacity-50"
-          onClick={handleDeactivate}
-          disabled={busy()}
-        >
-          {busy() ? "Deactivating..." : "Deactivate"}
-        </button>
-      </div>
       <Show when={error()}>
         <p class="mt-3 text-sm text-red-600">{error()}</p>
       </Show>
diff --git a/frontend/src/pages/admin/AdminRelayEdit.tsx b/frontend/src/pages/admin/AdminRelayEdit.tsx
index d72e6b8..0d3d0aa 100644
--- a/frontend/src/pages/admin/AdminRelayEdit.tsx
+++ b/frontend/src/pages/admin/AdminRelayEdit.tsx
@@ -2,7 +2,6 @@ import { useNavigate, useParams } from "@solidjs/router"
 import { Show, createEffect, createResource, createSignal } from "solid-js"
 import { adminGetRelay, adminUpdateRelay, type RelayConfig } from "../../lib/api"
 import RelayForm from "../../components/RelayForm"
-import { RELAY_PLAN_IDS, type RelayPlanId } from "../../lib/relayPlans"
 import { slugify } from "../../lib/slugify"
 import BackLink from "../../components/BackLink"
 import PageContainer from "../../components/PageContainer"
@@ -28,8 +27,6 @@ export default function AdminRelayEdit() {
   const [subdomain, setSubdomain] = createSignal("")
   const [icon, setIcon] = createSignal("")
   const [description, setDescription] = createSignal("")
-  const [plan, setPlan] = createSignal<RelayPlanId>("free")
-  const [config, setConfig] = createSignal<RelayConfig>(DEFAULT_CONFIG)
   const [error, setError] = createSignal("")
   const [submitting, setSubmitting] = createSignal(false)
 
@@ -40,8 +37,6 @@ export default function AdminRelayEdit() {
     setSubdomain(data.subdomain)
     setIcon(data.icon)
     setDescription(data.description)
-    setPlan(RELAY_PLAN_IDS.includes(data.plan as RelayPlanId) ? (data.plan as RelayPlanId) : "free")
-    setConfig(data.config ?? DEFAULT_CONFIG)
   })
 
   async function handleSubmit(e: Event) {
@@ -54,8 +49,7 @@ export default function AdminRelayEdit() {
         subdomain: slugify(subdomain()),
         icon: icon().trim(),
         description: description().trim(),
-        plan: plan(),
-        config: config(),
+        config: relay()?.config ?? DEFAULT_CONFIG,
       })
       navigate(`/admin/relays/${relayId()}`)
     } catch (e) {
@@ -87,11 +81,6 @@ export default function AdminRelayEdit() {
           setIcon={setIcon}
           description={description()}
           setDescription={setDescription}
-          plan={plan()}
-          setPlan={setPlan}
-          plans={RELAY_PLAN_IDS}
-          config={config()}
-          setConfig={setConfig}
           onSubmit={handleSubmit}
           submitting={submitting()}
           error={error()}
diff --git a/frontend/src/pages/relays/RelayDetail.tsx b/frontend/src/pages/relays/RelayDetail.tsx
index 673a03b..41a9af7 100644
--- a/frontend/src/pages/relays/RelayDetail.tsx
+++ b/frontend/src/pages/relays/RelayDetail.tsx
@@ -1,6 +1,6 @@
-import { useParams, A } from "@solidjs/router"
-import { createResource, createSignal, Show } from "solid-js"
-import { deactivateTenantRelay, getTenantRelay } from "../../lib/api"
+import { useParams } from "@solidjs/router"
+import { createMemo, createResource, createSignal, Show } from "solid-js"
+import { deactivateTenantRelay, getRelayMemberCount, getTenantRelay, updateTenantRelay, type RelayConfig } from "../../lib/api"
 import BackLink from "../../components/BackLink"
 import PageContainer from "../../components/PageContainer"
 import RelayDetailCard from "../../components/RelayDetailCard"
@@ -10,10 +10,15 @@ import useMinLoading from "../../components/useMinLoading"
 export default function RelayDetail() {
   const params = useParams()
   const relayId = () => params.id ?? ""
-  const [relay, { refetch }] = createResource(relayId, getTenantRelay)
+  const [relay, { refetch, mutate }] = createResource(relayId, getTenantRelay)
+  const relayUrl = createMemo(() => {
+    const subdomain = relay()?.subdomain
+    return subdomain ? `wss://${subdomain}.spaces.coracle.social` : undefined
+  })
+  const [memberCount] = createResource(relayUrl, async (url) => getRelayMemberCount(url))
   const [busy, setBusy] = createSignal(false)
   const [error, setError] = createSignal("")
-  const loading = useMinLoading(() => relay.loading)
+  const loading = useMinLoading(() => relay.loading && !relay())
 
   async function handleDeactivate() {
     if (busy()) return
@@ -29,6 +34,104 @@ export default function RelayDetail() {
     }
   }
 
+  function withDefaults(config?: RelayConfig): RelayConfig {
+    return {
+      policy: {
+        public_join: config?.policy.public_join ?? false,
+        strip_signatures: config?.policy.strip_signatures ?? false,
+      },
+      groups: {
+        enabled: config?.groups.enabled ?? true,
+        auto_join: config?.groups.auto_join ?? true,
+      },
+      management: {
+        enabled: config?.management.enabled ?? true,
+      },
+      blossom: {
+        enabled: config?.blossom.enabled ?? (relay()?.plan !== "free"),
+      },
+      push: {
+        enabled: config?.push.enabled ?? true,
+      },
+    }
+  }
+
+  async function updateFlags(nextConfig: RelayConfig, previousConfig: RelayConfig) {
+    const current = relay()
+    if (!current) return
+
+    setError("")
+    mutate({ ...current, config: nextConfig })
+
+    try {
+      await updateTenantRelay(relayId(), {
+        name: current.name,
+        subdomain: current.subdomain,
+        icon: current.icon,
+        description: current.description,
+        config: nextConfig,
+      })
+      await refetch()
+    } catch (e) {
+      mutate({ ...current, config: previousConfig })
+      setError(e instanceof Error ? e.message : "Failed to update relay settings")
+    }
+  }
+
+  function togglePublicJoin() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      policy: { ...config.policy, public_join: !config.policy.public_join },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleStripSignatures() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      policy: { ...config.policy, strip_signatures: !config.policy.strip_signatures },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleGroups() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      groups: { ...config.groups, enabled: !config.groups.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleManagement() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      management: { enabled: !config.management.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function toggleMediaStorage() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      blossom: { enabled: !config.blossom.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
+  function togglePushNotifications() {
+    const config = withDefaults(relay()?.config)
+    const nextConfig = {
+      ...config,
+      push: { enabled: !config.push.enabled },
+    }
+    void updateFlags(nextConfig, config)
+  }
+
   return (
     <PageContainer>
       <BackLink href="/relays" label="Relays" />
@@ -44,26 +147,22 @@ export default function RelayDetail() {
       <Show when={!loading() && relay()}>
         {(r) => (
           <div class="mb-6">
-            <RelayDetailCard relay={r()} />
+            <RelayDetailCard
+              relay={r()}
+              currentMembers={memberCount()}
+              editHref={`/relays/${params.id}/edit`}
+              onDeactivate={handleDeactivate}
+              deactivating={busy()}
+              onTogglePublicJoin={togglePublicJoin}
+              onToggleStripSignatures={toggleStripSignatures}
+              onToggleGroups={toggleGroups}
+              onToggleManagement={toggleManagement}
+              onToggleMediaStorage={toggleMediaStorage}
+              onTogglePushNotifications={togglePushNotifications}
+            />
           </div>
         )}
       </Show>
-
-      <div class="flex gap-3">
-        <A
-          href={`/relays/${params.id}/edit`}
-          class="py-2 px-4 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition-colors"
-        >
-          Edit
-        </A>
-        <button
-          class="py-2 px-4 border border-red-300 text-red-600 font-medium rounded-lg hover:bg-red-50 transition-colors disabled:opacity-50"
-          onClick={handleDeactivate}
-          disabled={busy()}
-        >
-          {busy() ? "Deactivating..." : "Deactivate"}
-        </button>
-      </div>
       <Show when={error()}>
         <p class="mt-3 text-sm text-red-600">{error()}</p>
       </Show>
diff --git a/frontend/src/pages/relays/RelayEdit.tsx b/frontend/src/pages/relays/RelayEdit.tsx
index d887e36..1810dbe 100644
--- a/frontend/src/pages/relays/RelayEdit.tsx
+++ b/frontend/src/pages/relays/RelayEdit.tsx
@@ -2,7 +2,6 @@ import { useNavigate, useParams } from "@solidjs/router"
 import { Show, createEffect, createResource, createSignal } from "solid-js"
 import { getTenantRelay, updateTenantRelay, type RelayConfig } from "../../lib/api"
 import RelayForm from "../../components/RelayForm"
-import { RELAY_PLAN_IDS, type RelayPlanId } from "../../lib/relayPlans"
 import { slugify } from "../../lib/slugify"
 import BackLink from "../../components/BackLink"
 import PageContainer from "../../components/PageContainer"
@@ -28,8 +27,6 @@ export default function RelayEdit() {
   const [subdomain, setSubdomain] = createSignal("")
   const [icon, setIcon] = createSignal("")
   const [description, setDescription] = createSignal("")
-  const [plan, setPlan] = createSignal<RelayPlanId>("free")
-  const [config, setConfig] = createSignal<RelayConfig>(DEFAULT_CONFIG)
   const [error, setError] = createSignal("")
   const [submitting, setSubmitting] = createSignal(false)
 
@@ -40,8 +37,6 @@ export default function RelayEdit() {
     setSubdomain(data.subdomain)
     setIcon(data.icon)
     setDescription(data.description)
-    setPlan(RELAY_PLAN_IDS.includes(data.plan as RelayPlanId) ? (data.plan as RelayPlanId) : "free")
-    setConfig(data.config ?? DEFAULT_CONFIG)
   })
 
   async function handleSubmit(e: Event) {
@@ -54,8 +49,7 @@ export default function RelayEdit() {
         subdomain: slugify(subdomain()),
         icon: icon().trim(),
         description: description().trim(),
-        plan: plan(),
-        config: config(),
+        config: relay()?.config ?? DEFAULT_CONFIG,
       })
       navigate(`/relays/${relayId()}`)
     } catch (e) {
@@ -87,11 +81,6 @@ export default function RelayEdit() {
           setIcon={setIcon}
           description={description()}
           setDescription={setDescription}
-          plan={plan()}
-          setPlan={setPlan}
-          plans={RELAY_PLAN_IDS}
-          config={config()}
-          setConfig={setConfig}
           onSubmit={handleSubmit}
           submitting={submitting()}
           error={error()}
diff --git a/frontend/src/pages/relays/RelayNew.tsx b/frontend/src/pages/relays/RelayNew.tsx
index d14ff2f..96c1c7f 100644
--- a/frontend/src/pages/relays/RelayNew.tsx
+++ b/frontend/src/pages/relays/RelayNew.tsx
@@ -1,6 +1,6 @@
 import { Show, createSignal } from "solid-js"
 import { useNavigate } from "@solidjs/router"
-import { createTenantRelay } from "../../lib/api"
+import { createTenantRelay, type RelayConfig } from "../../lib/api"
 import { slugify } from "../../lib/slugify"
 
 const PLANS = [
@@ -11,6 +11,14 @@ const PLANS = [
 
 type PlanId = (typeof PLANS)[number]["id"]
 
+const DEFAULT_CONFIG: RelayConfig = {
+  policy: { public_join: false, strip_signatures: false },
+  groups: { enabled: true, auto_join: true },
+  management: { enabled: true },
+  blossom: { enabled: false },
+  push: { enabled: true },
+}
+
 export default function RelayNew() {
   const navigate = useNavigate()
   const [name, setName] = createSignal("")
@@ -40,6 +48,10 @@ export default function RelayNew() {
         icon: icon().trim(),
         description: description().trim(),
         plan: plan(),
+        config: {
+          ...DEFAULT_CONFIG,
+          blossom: { enabled: plan() !== "free" },
+        },
       })
       navigate(`/relays/${relay.id}`)
     } catch (e) {