diff --git a/src/app/base.ts b/src/app/base.ts
index 944076c..414cfe3 100644
--- a/src/app/base.ts
+++ b/src/app/base.ts
@@ -8,7 +8,9 @@ import {Nip46Broker, Nip46Signer, Nip07Signer, Nip01Signer} from "@welshman/sign
 import {synced} from "@lib/util"
 import type {Session} from "@app/types"
 
-export const INDEXER_RELAYS = ["wss://purplepag.es", "wss://relay.damus.io", "wss://nos.lol"]
+export const DEFAULT_RELAYS = ["wss://groups.fiatjaf.com/"]
+
+export const INDEXER_RELAYS = ["wss://purplepag.es/", "wss://relay.damus.io/", "wss://nos.lol/"]
 
 export const DUFFLEPUD_URL = "https://dufflepud.onrender.com"
 
@@ -33,6 +35,8 @@ export const addSession = (session: Session) => {
   pk.set(session.pubkey)
 }
 
+export const nip46Perms = "sign_event:22242,nip04_encrypt,nip04_decrypt,nip44_encrypt,nip44_decrypt"
+
 export const getSigner = memoize((session: Session) => {
   switch (session?.method) {
     case "extension":
diff --git a/src/app/commands.ts b/src/app/commands.ts
index dd1fe50..5a10642 100644
--- a/src/app/commands.ts
+++ b/src/app/commands.ts
@@ -1,11 +1,34 @@
 import {uniqBy, uniq, now} from "@welshman/lib"
-import {GROUPS, asDecryptedEvent, getGroupTags, getRelayTagValues, readList, editList, makeList, createList} from "@welshman/util"
+import {
+  GROUPS,
+  asDecryptedEvent,
+  getGroupTags,
+  getRelayTagValues,
+  readList,
+  editList,
+  makeList,
+  createList,
+} from "@welshman/util"
 import {pk, signer, repository, INDEXER_RELAYS} from "@app/base"
-import {getWriteRelayUrls, loadGroup, loadGroupMembership, loadProfile, loadFollows, loadMutes, loadRelaySelections, publish, ensurePlaintext} from "@app/state"
+import {
+  getWriteRelayUrls,
+  loadGroup,
+  loadGroupMembership,
+  loadProfile,
+  loadFollows,
+  loadMutes,
+  loadRelaySelections,
+  publish,
+  ensurePlaintext,
+} from "@app/state"
 
 export const loadUserData = async (pubkey: string, hints: string[] = []) => {
   const relaySelections = await loadRelaySelections(pubkey, INDEXER_RELAYS)
-  const relays = uniq([...getRelayTagValues(relaySelections?.tags || []), ...INDEXER_RELAYS, ...hints])
+  const relays = uniq([
+    ...getRelayTagValues(relaySelections?.tags || []),
+    ...INDEXER_RELAYS,
+    ...hints,
+  ])
   const membership = await loadGroupMembership(pubkey, relays)
   const promises = [
     loadProfile(pubkey, relays),
diff --git a/src/app/components/GroupNote.svelte b/src/app/components/GroupNote.svelte
index 00155aa..ed34de5 100644
--- a/src/app/components/GroupNote.svelte
+++ b/src/app/components/GroupNote.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+  import twColors from "tailwindcss/colors"
   import {readable} from "svelte/store"
+  import {hash} from "@welshman/lib"
   import type {CustomEvent} from "@welshman/util"
   import {GROUP_REPLY, getAncestorTags, displayProfile, displayPubkey} from "@welshman/util"
   import {fly} from "@lib/transition"
@@ -10,10 +12,34 @@
   export let event: CustomEvent
   export let showPubkey: boolean
 
+  const colors = [
+    ['amber', twColors.amber[600]],
+    ['blue', twColors.blue[600]],
+    ['cyan', twColors.cyan[600]],
+    ['emerald', twColors.emerald[600]],
+    ['fuchsia', twColors.fuchsia[600]],
+    ['green', twColors.green[600]],
+    ['indigo', twColors.indigo[600]],
+    ['lightBlue', twColors.lightBlue[600]],
+    ['lime', twColors.lime[600]],
+    ['orange', twColors.orange[600]],
+    ['pink', twColors.pink[600]],
+    ['purple', twColors.purple[600]],
+    ['red', twColors.red[600]],
+    ['rose', twColors.rose[600]],
+    ['sky', twColors.sky[600]],
+    ['teal', twColors.teal[600]],
+    ['violet', twColors.violet[600]],
+    ['yellow', twColors.yellow[600]],
+    ['zinc', twColors.zinc[600]],
+  ]
+
   const profile = deriveProfile(event.pubkey)
   const {replies} = getAncestorTags(event.tags)
-  const parentEvent =
-    replies.length > 0 ? deriveEvent(replies[0][1], [replies[0][2]]) : readable(null)
+  const parentId = replies[0]?.[1]
+  const parentHints = [replies[0]?.[2]].filter(Boolean)
+  const parentEvent = parentId ? deriveEvent(parentId, parentHints) : readable(null)
+  const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
   $: parentPubkey = $parentEvent?.pubkey || replies[0]?.[4]
   $: parentProfile = deriveProfile(parentPubkey)
@@ -41,7 +67,7 @@
     {/if}
     <div class="-mt-1">
       {#if showPubkey}
-        <strong class="text-sm text-primary"
+        <strong class="text-sm" style="color: {colorValue}" data-color={colorName}
           >{displayProfile($profile, displayPubkey(event.pubkey))}</strong>
       {/if}
       <p class="text-sm">{event.content}</p>
diff --git a/src/app/components/InfoNip29.svelte b/src/app/components/InfoNip29.svelte
index c466c7e..431253b 100644
--- a/src/app/components/InfoNip29.svelte
+++ b/src/app/components/InfoNip29.svelte
@@ -21,8 +21,8 @@
     >. If you do decide to join someone else's, make sure to follow their directions for registering
     as a user.
   </p>
-  <div class="alert !flex justify-between items-center">
-    <div class="flex gap-2 items-center">
+  <div class="alert !flex items-center justify-between">
+    <div class="flex items-center gap-2">
       <Icon icon="remote-controller-minimalistic" />
       groups.fiatjaf.com
     </div>
diff --git a/src/app/components/LogIn.svelte b/src/app/components/LogIn.svelte
index 178278e..e0c9900 100644
--- a/src/app/components/LogIn.svelte
+++ b/src/app/components/LogIn.svelte
@@ -4,14 +4,15 @@
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import SignUp from "@app/components/SignUp.svelte"
   import InfoNostr from "@app/components/LogIn.svelte"
   import {pushModal, clearModal} from "@app/modal"
   import {pushToast} from "@app/toast"
-  import {addSession} from "@app/base"
+  import {addSession, nip46Perms} from "@app/base"
   import {loadHandle} from "@app/state"
   import {loadUserData} from "@app/commands"
 
-  const back = () => history.back()
+  const signUp = () => pushModal(SignUp)
 
   const tryLogin = async () => {
     const secret = makeSecret()
@@ -29,7 +30,7 @@
 
     loadUserData(pubkey, relays)
 
-    if (await broker.connect()) {
+    if (await broker.connect("", nip46Perms)) {
       addSession({method: "nip46", pubkey, secret, handler})
       pushToast({message: "Successfully logged in!"})
       clearModal()
@@ -62,14 +63,12 @@
 </script>
 
 <form class="column gap-4" on:submit|preventDefault={login}>
-  <div class="py-2">
-    <h1 class="heading">Log in with Nostr</h1>
-    <p class="text-center">
-      Flotilla is built using the
-      <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which
-      allows you to own your social identity.
-    </p>
-  </div>
+  <h1 class="heading">Log in with Nostr</h1>
+  <p class="m-auto max-w-sm text-center">
+    Flotilla is built using the
+    <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
+    you to own your social identity.
+  </p>
   <Field>
     <div class="flex items-center gap-2" slot="input">
       <label class="input input-bordered flex w-full items-center gap-2">
@@ -80,13 +79,13 @@
     </div>
   </Field>
   <div class="flex flex-col gap-2">
-    <Button type="submit" class="btn btn-primary" disabled={loading}>
+    <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
       <Spinner {loading}>Log In</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
     <div class="text-sm">
       Need an account?
-      <Button class="link" on:click={back}>Register</Button>
+      <Button class="link" on:click={signUp}>Register instead</Button>
     </div>
   </div>
 </form>
diff --git a/src/app/components/LogOut.svelte b/src/app/components/LogOut.svelte
new file mode 100644
index 0000000..6ce9afa
--- /dev/null
+++ b/src/app/components/LogOut.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import {clearStorage} from "@app/storage"
+
+  const back = () => history.back()
+
+  const logout = async () => {
+    loading = true
+
+    try {
+      await clearStorage()
+      localStorage.clear()
+    } finally {
+      loading = false
+    }
+
+    window.location.reload()
+  }
+
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={logout}>
+  <h1 class="heading">Are you sure you want to log out?</h1>
+  <div class="flex flex-row items-center justify-between gap-4">
+    <Button class="btn btn-link" on:click={back}>
+      <Icon icon="alt-arrow-left" />
+      Go back
+    </Button>
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Log Out</Spinner>
+    </Button>
+  </div>
+</form>
diff --git a/src/app/components/SignUp.svelte b/src/app/components/SignUp.svelte
index e69de29..0bc0bb1 100644
--- a/src/app/components/SignUp.svelte
+++ b/src/app/components/SignUp.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import {makeSecret, Nip46Broker} from "@welshman/signer"
+  import Icon from "@lib/components/Icon.svelte"
+  import Field from "@lib/components/Field.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import LogIn from "@app/components/LogIn.svelte"
+  import InfoNostr from "@app/components/LogIn.svelte"
+  import {pushModal, clearModal} from "@app/modal"
+  import {pushToast} from "@app/toast"
+  import {addSession, nip46Perms} from "@app/base"
+  import {loadHandle} from "@app/state"
+
+  const login = () => pushModal(LogIn)
+
+  const trySignup = async () => {
+    const secret = makeSecret()
+    const handle = await loadHandle(`${username}@${handler.domain}`)
+
+    if (handle?.pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like that account already exists. Try logging in instead.",
+      })
+    }
+
+    const signupBroker = Nip46Broker.get("", secret, handler)
+    const pubkey = await signupBroker.createAccount(username, nip46Perms)
+
+    if (!pubkey) {
+      return pushToast({
+        theme: "error",
+        message: "Sorry, it looks like something went wrong. Please try again.",
+      })
+    }
+
+    const loginBroker = Nip46Broker.get(pubkey, secret, handler)
+
+    if (await loginBroker.connect("", nip46Perms)) {
+      addSession({method: "nip46", pubkey, secret, handler})
+      pushToast({message: "Successfully logged in!"})
+      clearModal()
+    } else {
+      pushToast({
+        theme: "error",
+        message: "Something went wrong! Please try again.",
+      })
+    }
+  }
+
+  const signup = async () => {
+    loading = true
+
+    try {
+      await trySignup()
+    } finally {
+      loading = false
+    }
+  }
+
+  const handler = {
+    domain: "nsec.app",
+    relays: ["wss://relay.nsec.app"],
+    pubkey: "e24a86943d37a91ab485d6f9a7c66097c25ddd67e8bd1b75ed252a3c266cf9bb",
+  }
+
+  let username = ""
+  let loading = false
+</script>
+
+<form class="column gap-4" on:submit|preventDefault={signup}>
+  <h1 class="heading">Sign up with Nostr</h1>
+  <p class="m-auto max-w-sm text-center">
+    Flotilla is built using the
+    <Button class="link" on:click={() => pushModal(InfoNostr)}>nostr protocol</Button>, which allows
+    you to own your social identity.
+  </p>
+  <Field>
+    <div class="flex items-center gap-2" slot="input">
+      <label class="input input-bordered flex w-full items-center gap-2">
+        <Icon icon="user-rounded" />
+        <input bind:value={username} class="grow" type="text" placeholder="username" />
+      </label>
+      @{handler.domain}
+    </div>
+  </Field>
+  <div class="flex flex-col gap-2">
+    <Button type="submit" class="btn btn-primary" disabled={!username || loading}>
+      <Spinner {loading}>Sign Up</Spinner>
+      <Icon icon="alt-arrow-right" />
+    </Button>
+    <div class="text-sm">
+      Already have an account?
+      <Button class="link" on:click={login}>Log in instead</Button>
+    </div>
+  </div>
+</form>
diff --git a/src/app/components/SpaceCreate.svelte b/src/app/components/SpaceCreate.svelte
index d62b05d..b661a3b 100644
--- a/src/app/components/SpaceCreate.svelte
+++ b/src/app/components/SpaceCreate.svelte
@@ -39,7 +39,7 @@
     </label>
     <p slot="info">
       This should be a NIP-29 compatible nostr relay where you'd like to host your space.
-      <Button class="link" on:click={() => pushModal(InfoNip29)}>More information</Button>
+      <Button class="link" on:click={() => pushModal(InfoNip29)}>What is a relay?</Button>
     </p>
   </Field>
   <div class="flex flex-row items-center justify-between gap-4">
diff --git a/src/app/components/SpaceJoin.svelte b/src/app/components/SpaceJoin.svelte
index abe4998..5b7643f 100644
--- a/src/app/components/SpaceJoin.svelte
+++ b/src/app/components/SpaceJoin.svelte
@@ -1,14 +1,11 @@
 <script lang="ts">
-  import {append, remove} from '@welshman/lib'
-  import {displayRelayUrl} from '@welshman/util'
+  import {append, remove} from "@welshman/lib"
+  import {displayRelayUrl} from "@welshman/util"
   import {goto} from "$app/navigation"
-  import CardButton from "@lib/components/CardButton.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import InfoNip29 from '@app/components/InfoNip29.svelte'
-  import {pushToast} from "@app/toast"
+  import InfoNip29 from "@app/components/InfoNip29.svelte"
   import {pushModal} from "@app/modal"
   import {deriveGroup, displayGroup, relayUrlsByNom} from "@app/state"
   import {addGroupMemberships} from "@app/commands"
@@ -20,7 +17,9 @@
   const back = () => history.back()
 
   const onUrlChange = (e: any) => {
-    urls = urls.includes(e.target.value) ? remove(e.target.value, urls) : append(e.target.value, urls)
+    urls = urls.includes(e.target.value)
+      ? remove(e.target.value, urls)
+      : append(e.target.value, urls)
   }
 
   const join = async () => {
@@ -48,15 +47,20 @@
   </h1>
   <p class="text-center">
     Please select which relays you'd like to use for this group.
-    <Button class="link" on:click={() => pushModal(InfoNip29)}>More information</Button>
+    <Button class="link" on:click={() => pushModal(InfoNip29)}>What is a relay?</Button>
   </p>
   {#each urlOptions as url}
-    <div class="alert !flex justify-between items-center">
-      <div class="flex gap-2 items-center">
+    <div class="alert !flex items-center justify-between">
+      <div class="flex items-center gap-2">
         <Icon icon="remote-controller-minimalistic" />
         {displayRelayUrl(url)}
       </div>
-      <input type="checkbox" value={url} class="toggle toggle-primary" checked={urls.includes(url)} on:change={onUrlChange} />
+      <input
+        type="checkbox"
+        value={url}
+        class="toggle toggle-primary"
+        checked={urls.includes(url)}
+        on:change={onUrlChange} />
     </div>
   {/each}
   <div class="flex flex-row items-center justify-between gap-4">
diff --git a/src/app/state.ts b/src/app/state.ts
index 7d5c50d..12517e2 100644
--- a/src/app/state.ts
+++ b/src/app/state.ts
@@ -36,7 +36,7 @@ import {
 } from "@welshman/util"
 import type {SignedEvent, CustomEvent, PublishedProfile, PublishedList} from "@welshman/util"
 import type {SubscribeRequest, PublishRequest} from "@welshman/net"
-import {publish as basePublish, subscribe} from "@welshman/net"
+import {publish as basePublish, subscribe as baseSubscribe} from "@welshman/net"
 import {decrypt} from "@welshman/signer"
 import {deriveEvents, deriveEventsMapped, getter, withGetter} from "@welshman/store"
 import {createSearch} from "@lib/util"
@@ -123,9 +123,17 @@ export const publish = (request: PublishRequest) => {
   return basePublish(request)
 }
 
+export const subscribe = (request: SubscribeRequest) => {
+  const sub = baseSubscribe({delay: 50, ...request})
+
+  sub.emitter.on("event", (url: string, e: SignedEvent) => repository.publish(e))
+
+  return sub
+}
+
 export const load = (request: SubscribeRequest) =>
   new Promise<CustomEvent[]>(resolve => {
-    const sub = subscribe({closeOnEose: true, timeout: 3000, delay: 50, ...request})
+    const sub = subscribe({closeOnEose: true, timeout: 3000, ...request})
     const events: CustomEvent[] = []
 
     sub.emitter.on("event", (url: string, e: SignedEvent) => {
diff --git a/src/lib/components/SecondaryNavItem.svelte b/src/lib/components/SecondaryNavItem.svelte
index 1998cfa..ffde018 100644
--- a/src/lib/components/SecondaryNavItem.svelte
+++ b/src/lib/components/SecondaryNavItem.svelte
@@ -48,7 +48,7 @@
     on:click
     class={cx(
       $$props.class,
-      "flex items-center gap-3 transition-all hover:bg-base-100 hover:text-base-content",
+      "flex w-full items-center gap-3 transition-all hover:bg-base-100 hover:text-base-content",
     )}
     class:text-base-content={active}
     class:bg-base-100={active}>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e56d9b8..cbbf591 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,8 @@
   import "@src/app.css"
   import {onMount} from "svelte"
   import {page} from "$app/stores"
+  import {goto} from "$app/navigation"
+  import {browser} from "$app/environment"
   import {createEventStore} from "@welshman/store"
   import ModalBox from "@lib/components/ModalBox.svelte"
   import Toast from "@app/components/Toast.svelte"
@@ -9,8 +11,8 @@
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
   import {theme} from "@app/theme"
-  import {pk, session, repository} from "@app/base"
-  import {relays, handles} from "@app/state"
+  import {pk, session, repository, DEFAULT_RELAYS} from "@app/base"
+  import {relays, handles, loadRelay} from "@app/state"
   import {initStorage} from "@app/storage"
   import {loadUserData} from "@app/commands"
 
@@ -24,6 +26,10 @@
   $: {
     if (!modal && !$session) {
       modal = {component: Landing}
+
+      if (browser && $page.route?.id !== "/home") {
+        goto("/home")
+      }
     }
 
     if (modal) {
@@ -35,6 +41,10 @@
   }
 
   onMount(() => {
+    for (const url of DEFAULT_RELAYS) {
+      loadRelay(url)
+    }
+
     if ($pk) {
       loadUserData($pk)
     }
diff --git a/src/routes/discover/+page.svelte b/src/routes/discover/+page.svelte
index af477c7..0d76249 100644
--- a/src/routes/discover/+page.svelte
+++ b/src/routes/discover/+page.svelte
@@ -4,7 +4,15 @@
   import {GROUP_META, displayRelayUrl} from "@welshman/util"
   import Icon from "@lib/components/Icon.svelte"
   import {makeSpacePath} from "@app/routes"
-  import {load, displayGroup, relays, searchGroups, relayUrlsByNom, userMembership} from "@app/state"
+  import {DEFAULT_RELAYS} from "@app/base"
+  import {
+    load,
+    displayGroup,
+    relays,
+    searchGroups,
+    relayUrlsByNom,
+    userMembership,
+  } from "@app/state"
 
   const getRelayUrls = (nom: string): string[] => $relayUrlsByNom.get(nom) || []
 
@@ -12,7 +20,7 @@
 
   onMount(() => {
     load({
-      relays: $relays.map(r => r.url),
+      relays: [...DEFAULT_RELAYS, ...$relays.map(r => r.url)],
       filters: [{kinds: [GROUP_META]}],
     })
   })
diff --git a/src/routes/settings/+layout.svelte b/src/routes/settings/+layout.svelte
new file mode 100644
index 0000000..d818cb9
--- /dev/null
+++ b/src/routes/settings/+layout.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import LogOut from "@app/components/LogOut.svelte"
+  import {pushModal} from "@app/modal"
+
+  const logout = () => pushModal(LogOut)
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly|local>
+      <SecondaryNavItem href="/settings">
+        <Icon icon="settings" /> Settings
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem class="text-error hover:text-error" on:click={logout}>
+        <Icon icon="exit" /> Log Out
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index e69de29..5f25a83 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -0,0 +1 @@
+Settings: who needs em?
diff --git a/src/routes/spaces/[nom]/+layout.svelte b/src/routes/spaces/[nom]/+layout.svelte
index 237c44e..2515d67 100644
--- a/src/routes/spaces/[nom]/+layout.svelte
+++ b/src/routes/spaces/[nom]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {page} from '$app/stores'
+  import {page} from "$app/stores"
   import {fly} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
@@ -67,18 +67,13 @@
       <div class="h-2" />
       <SecondaryNavHeader>
         Rooms
-        <div class="cursor-pointer">
+        <Button on:click={() => alert("Uh, I don't know how to do rooms on NIP 29")}>
           <Icon icon="add-circle" />
-        </div>
+        </Button>
       </SecondaryNavHeader>
       <div in:fly|local>
-        <SecondaryNavItem href="/invalid">
-          <Icon icon="hashtag" /> Spaces
-        </SecondaryNavItem>
-      </div>
-      <div in:fly|local={{delay: 50}}>
-        <SecondaryNavItem href="/invalid">
-          <Icon icon="hashtag" /> Themes
+        <SecondaryNavItem href="/spaces/{nom}/general">
+          <Icon icon="hashtag" /> General
         </SecondaryNavItem>
       </div>
     </SecondaryNavSection>
diff --git a/src/routes/spaces/[nom]/+page.svelte b/src/routes/spaces/[nom]/[[room]]/+page.svelte
similarity index 67%
rename from src/routes/spaces/[nom]/+page.svelte
rename to src/routes/spaces/[nom]/[[room]]/+page.svelte
index 1ba0c1e..6bdd5ef 100644
--- a/src/routes/spaces/[nom]/+page.svelte
+++ b/src/routes/spaces/[nom]/[[room]]/+page.svelte
@@ -1,22 +1,26 @@
-<script lang="ts">
-  import {sortBy} from "@welshman/lib"
-  import type {CustomEvent} from "@welshman/util"
-  import {page} from "$app/stores"
-  import {formatTimestampAsDate} from "@lib/util"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import GroupNote from "@app/components/GroupNote.svelte"
-  import {deriveGroupConversation} from "@app/state"
-
-  $: conversation = deriveGroupConversation($page.params.nom)
-
-  const assertEvent = (e: any) => e as CustomEvent
-
+<script lang="ts" context="module">
   type Element = {
     id: string
     type: "date" | "note"
     value: string | CustomEvent
     showPubkey: boolean
   }
+</script>
+
+<script lang="ts">
+  import {sortBy} from "@welshman/lib"
+  import type {CustomEvent} from "@welshman/util"
+  import {page} from "$app/stores"
+  import {formatTimestampAsDate} from "@lib/util"
+  import Icon from "@lib/components/Icon.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
+  import GroupNote from "@app/components/GroupNote.svelte"
+  import {deriveGroupConversation} from "@app/state"
+
+  const {nom} = $page.params
+  const conversation = deriveGroupConversation(nom)
+
+  const assertEvent = (e: any) => e as CustomEvent
 
   let loading = true
   let elements: Element[] = []
@@ -54,15 +58,22 @@
   }, 3000)
 </script>
 
-<div class="flex h-screen flex-col">
-  <div class="min-h-24 bg-base-100 shadow-xl"></div>
+<div class="relative flex h-screen flex-col">
+  <div class="relative z-feature px-2 pt-4">
+    <div class="flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+      <div class="flex items-center gap-2">
+        <Icon icon="hashtag" />
+        <strong>General</strong>
+      </div>
+    </div>
+  </div>
   <div class="flex flex-grow flex-col-reverse overflow-auto">
     {#each elements as { type, id, value, showPubkey } (id)}
       {#if type === "date"}
-        <div class="flex items-center gap-2 py-2 text-xs opacity-50">
-          <div class="h-px flex-grow bg-base-content" />
+        <div class="flex items-center gap-2 p-2 text-xs opacity-50">
+          <div class="h-px flex-grow bg-base-content opacity-25" />
           <p>{value}</p>
-          <div class="h-px flex-grow bg-base-content" />
+          <div class="h-px flex-grow bg-base-content opacity-25" />
         </div>
       {:else}
         <GroupNote event={assertEvent(value)} {showPubkey} />
@@ -78,5 +89,7 @@
       </Spinner>
     </p>
   </div>
-  <div class="shadow-top-xl min-h-32 bg-base-100"></div>
+  <div class="relative z-feature border-t border-solid border-base-100 px-2 py-2">
+    <div class="shadow-top-xl flex min-h-12 items-center gap-4 rounded-xl bg-base-100 px-4"></div>
+  </div>
 </div>
diff --git a/src/routes/spaces/[nom]/+page.ts b/src/routes/spaces/[nom]/[[room]]/+page.ts
similarity index 100%
rename from src/routes/spaces/[nom]/+page.ts
rename to src/routes/spaces/[nom]/[[room]]/+page.ts
diff --git a/tailwind.config.js b/tailwind.config.js
index 13ef74a..a684c49 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,9 +9,10 @@ export default {
       none: 0,
       "nav-active": 1,
       "nav-item": 2,
-      popover: 3,
-      modal: 4,
-      toast: 5,
+      feature: 3,
+      popover: 4,
+      modal: 5,
+      toast: 6,
     },
   },
   plugins: [daisyui],