diff --git a/apps/api/src/app.ts b/apps/api/src/app.ts
index dbfc1ec..8b82992 100644
--- a/apps/api/src/app.ts
+++ b/apps/api/src/app.ts
@@ -1,5 +1,4 @@
 import { auth } from "@repo/auth"
-import { env } from "@repo/env/server"
 import { cors } from "hono/cors"
 import createApp from "@/lib/helpers/app/create-app"
 import configureOpenAPI from "@/lib/helpers/openapi/configure-openapi"
@@ -13,10 +12,7 @@ const app = createApp()
 app.use(
   "*",
   cors({
-    origin:
-      env.NODE_ENV === "development"
-        ? "http://localhost:3000"
-        : env.NEXT_PUBLIC_API_URL,
+    origin: (origin) => origin,
     credentials: true,
   })
 )
diff --git a/apps/web/public/townhall-onboarding.png b/apps/web/public/townhall-onboarding.png
new file mode 100644
index 0000000..2cbcdc9
Binary files /dev/null and b/apps/web/public/townhall-onboarding.png differ
diff --git a/apps/web/public/townhall-onboarding2.png b/apps/web/public/townhall-onboarding2.png
new file mode 100644
index 0000000..a76e237
Binary files /dev/null and b/apps/web/public/townhall-onboarding2.png differ
diff --git a/apps/web/src/components/onboarding/onboarding-dialog.tsx b/apps/web/src/components/onboarding/onboarding-dialog.tsx
new file mode 100644
index 0000000..ba3aacc
--- /dev/null
+++ b/apps/web/src/components/onboarding/onboarding-dialog.tsx
@@ -0,0 +1,285 @@
+"use client"
+
+import { authClient } from "@repo/auth/client"
+import { Button } from "@repo/ui/components/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@repo/ui/components/dialog"
+import { Input } from "@repo/ui/components/input"
+import { Label } from "@repo/ui/components/label"
+import { useQueryClient } from "@tanstack/react-query"
+import { useNavigate } from "@tanstack/react-router"
+import { ArrowLeft, Loader2, Plus, Users } from "lucide-react"
+import { useEffect, useState } from "react"
+
+type Step = "welcome" | "create" | "join"
+
+function toSlug(name: string) {
+  return name
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9\s-]/g, "")
+    .replace(/\s+/g, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 50)
+}
+
+export function OnboardingDialog({ open }: { open: boolean }) {
+  const [step, setStep] = useState<Step>("welcome")
+  const [name, setName] = useState("")
+  const [slug, setSlug] = useState("")
+  const [slugEdited, setSlugEdited] = useState(false)
+  const [inviteLink, setInviteLink] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const queryClient = useQueryClient()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    if (!slugEdited) {
+      setSlug(toSlug(name))
+    }
+  }, [name, slugEdited])
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!name.trim() || !slug.trim()) return
+    setError(null)
+    setLoading(true)
+
+    try {
+      const res = await authClient.organization.create({
+        name: name.trim(),
+        slug: slug.trim(),
+      })
+
+      if (res.error) {
+        setError(res.error.message ?? "Failed to create guild")
+        setLoading(false)
+        return
+      }
+
+      // Best-effort — guild was created successfully so proceed regardless
+      try {
+        await authClient.updateUser({ onboardingCompleted: true })
+      } catch {
+        // Non-blocking: dialog will reappear next session but guild exists
+        setError("Guild created, but failed to save onboarding state.")
+      }
+
+      await queryClient.invalidateQueries({ queryKey: ["guilds"] })
+      navigate({ to: "/$guildSlug", params: { guildSlug: slug.trim() } })
+    } catch {
+      setError("Something went wrong. Please try again.")
+      setLoading(false)
+    }
+  }
+
+  const handleJoin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!inviteLink.trim()) return
+    setError(null)
+    setLoading(true)
+    // TODO: implement join via invite link API
+    setError("Joining via invite link is not yet supported.")
+    setLoading(false)
+  }
+
+  return (
+    <Dialog open={open}>
+      <DialogContent
+        showCloseButton={false}
+        onInteractOutside={(e) => e.preventDefault()}
+        onEscapeKeyDown={(e) => e.preventDefault()}
+        className="overflow-hidden p-0 sm:max-w-2xl"
+      >
+        <div className="flex min-h-[460px]">
+          {/* Left decorative panel */}
+          <div className="relative hidden w-[220px] shrink-0 overflow-hidden sm:block">
+            <img
+              src="/townhall-onboarding2.png"
+              alt="A medieval campsite at night"
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          </div>
+
+          {/* Right content panel */}
+          <div className="flex flex-1 flex-col justify-center p-8">
+            {step === "welcome" && (
+              <>
+                <DialogHeader className="mb-8 text-left">
+                  <DialogTitle className="text-2xl">
+                    Welcome to Townhall
+                  </DialogTitle>
+                  <DialogDescription className="text-sm">
+                    Get started by creating a new guild or joining one you've
+                    been invited to.
+                  </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-3">
+                  <button
+                    type="button"
+                    onClick={() => setStep("create")}
+                    className="group flex w-full items-center gap-4 rounded-lg border border-border bg-card p-4 text-left transition-colors hover:border-primary/50 hover:bg-accent"
+                  >
+                    <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary group-hover:bg-primary/20">
+                      <Plus className="size-5" />
+                    </div>
+                    <div>
+                      <p className="font-medium">Create a Guild</p>
+                      <p className="text-sm text-muted-foreground">
+                        Start your own community from scratch
+                      </p>
+                    </div>
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={() => setStep("join")}
+                    className="group flex w-full items-center gap-4 rounded-lg border border-border bg-card p-4 text-left transition-colors hover:border-primary/50 hover:bg-accent"
+                  >
+                    <div className="flex size-10 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary group-hover:bg-primary/20">
+                      <Users className="size-5" />
+                    </div>
+                    <div>
+                      <p className="font-medium">Join an Existing Guild</p>
+                      <p className="text-sm text-muted-foreground">
+                        Enter an invite link to join a guild
+                      </p>
+                    </div>
+                  </button>
+                </div>
+              </>
+            )}
+
+            {step === "create" && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setStep("welcome")
+                    setError(null)
+                  }}
+                  className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+                >
+                  <ArrowLeft className="size-3.5" />
+                  Back
+                </button>
+
+                <DialogHeader className="mb-6 text-left">
+                  <DialogTitle className="text-2xl">Create a Guild</DialogTitle>
+                  <DialogDescription className="text-sm">
+                    Give your community a name and a unique URL.
+                  </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={handleCreate} className="space-y-4">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="guild-name">Guild Name</Label>
+                    <Input
+                      id="guild-name"
+                      placeholder="My Awesome Guild"
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                      disabled={loading}
+                      autoFocus
+                    />
+                  </div>
+
+                  <div className="space-y-1.5">
+                    <Label htmlFor="guild-slug">Slug</Label>
+                    <div className="flex items-center rounded-md border border-input bg-muted px-3 text-sm focus-within:ring-1 focus-within:ring-ring">
+                      <span className="shrink-0 text-muted-foreground">
+                        townhall.chat/
+                      </span>
+                      <Input
+                        id="guild-slug"
+                        className="min-w-0 flex-1 border-0 bg-transparent shadow-none focus-visible:ring-0 px-1"
+                        placeholder="my-awesome-guild"
+                        value={slug}
+                        onChange={(e) => {
+                          setSlugEdited(true)
+                          setSlug(toSlug(e.target.value))
+                        }}
+                        disabled={loading}
+                      />
+                    </div>
+                  </div>
+
+                  {error && <p className="text-sm text-destructive">{error}</p>}
+
+                  <Button
+                    type="submit"
+                    className="w-full"
+                    disabled={loading || !name.trim() || !slug.trim()}
+                  >
+                    {loading && (
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                    )}
+                    Create Guild
+                  </Button>
+                </form>
+              </>
+            )}
+
+            {step === "join" && (
+              <>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setStep("welcome")
+                    setError(null)
+                  }}
+                  className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+                >
+                  <ArrowLeft className="size-3.5" />
+                  Back
+                </button>
+
+                <DialogHeader className="mb-6 text-left">
+                  <DialogTitle className="text-2xl">Join a Guild</DialogTitle>
+                  <DialogDescription className="text-sm">
+                    Paste an invite link to join an existing guild.
+                  </DialogDescription>
+                </DialogHeader>
+
+                <form onSubmit={handleJoin} className="space-y-4">
+                  <div className="space-y-1.5">
+                    <Label htmlFor="invite-link">Invite Link</Label>
+                    <Input
+                      id="invite-link"
+                      placeholder="https://townhall.gg/invite/abc123"
+                      value={inviteLink}
+                      onChange={(e) => setInviteLink(e.target.value)}
+                      disabled={loading}
+                      autoFocus
+                    />
+                  </div>
+
+                  {error && <p className="text-sm text-destructive">{error}</p>}
+
+                  <Button
+                    type="submit"
+                    className="w-full"
+                    disabled={loading || !inviteLink.trim()}
+                  >
+                    {loading && (
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                    )}
+                    Join Guild
+                  </Button>
+                </form>
+              </>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/src/components/sidebar/channel-panel/channel-list.tsx b/apps/web/src/components/sidebar/channel-panel/channel-list.tsx
index 7836b18..0772ff4 100644
--- a/apps/web/src/components/sidebar/channel-panel/channel-list.tsx
+++ b/apps/web/src/components/sidebar/channel-panel/channel-list.tsx
@@ -15,6 +15,13 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@repo/ui/components/dropdown-menu"
 import { Skeleton } from "@repo/ui/components/skeleton"
 import { cn } from "@repo/ui/lib/utils"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
@@ -24,6 +31,7 @@ import {
   Hash,
   Megaphone,
   MessageSquare,
+  MoreHorizontal,
   Volume2,
 } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
@@ -535,6 +543,8 @@ function SortableChannelItem({
     isDragging,
   } = useSortable({ id })
 
+  const [menuOpen, setMenuOpen] = useState(false)
+
   const style = {
     transform: CSS.Translate.toString(transform),
     transition,
@@ -542,18 +552,20 @@ function SortableChannelItem({
   }
 
   return (
-    <button
+    // biome-ignore lint/a11y/useSemanticElements: dnd-kit requires a div here to avoid nested interactive elements
+    // biome-ignore lint/a11y/noStaticElementInteractions: dnd-kit requires a div here
+    // biome-ignore lint/a11y/useKeyWithClickEvents: dnd-kit handles keyboard interactions
+    <div
       ref={setNodeRef}
       style={style}
-      type="button"
       onClick={onClick}
       {...attributes}
       {...listeners}
       className={cn(
         "group relative flex w-full items-center gap-2 rounded-lg px-2 py-[6px] text-[14px] hover:bg-foreground/[0.06] cursor-pointer",
-        active
-          ? "bg-foreground/[0.06] font-medium text-foreground"
-          : "text-muted-foreground"
+        active && "bg-foreground/[0.06] font-medium text-foreground",
+        !active && "text-muted-foreground",
+        menuOpen && "bg-foreground/[0.06]"
       )}
     >
       {active && (
@@ -561,7 +573,32 @@ function SortableChannelItem({
       )}
       <ChannelIcon type={type} />
       <span className="truncate">{name}</span>
-    </button>
+      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
+        <DropdownMenuTrigger
+          onClick={(e) => e.stopPropagation()}
+          className={cn(
+            "ml-auto flex size-5 items-center justify-center rounded opacity-0 hover:bg-foreground/10 group-hover:opacity-100",
+            menuOpen && "opacity-100"
+          )}
+        >
+          <MoreHorizontal className="size-4 shrink-0" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent side="bottom" align="start">
+          {/* TODO: handleEditChannel */}
+          <DropdownMenuItem disabled>Edit Channel</DropdownMenuItem>
+          {/* TODO: handleCopyChannelId */}
+          <DropdownMenuItem disabled>Copy Channel ID</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {/* TODO: handleDeleteChannel — requires confirmation */}
+          <DropdownMenuItem
+            disabled
+            className="text-destructive focus:text-destructive"
+          >
+            Delete Channel
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
   )
 }
 
diff --git a/apps/web/src/components/sidebar/channel-panel/channel-panel.tsx b/apps/web/src/components/sidebar/channel-panel/channel-panel.tsx
index f63a0c3..244c818 100644
--- a/apps/web/src/components/sidebar/channel-panel/channel-panel.tsx
+++ b/apps/web/src/components/sidebar/channel-panel/channel-panel.tsx
@@ -9,7 +9,7 @@ export function ChannelPanel() {
     <div className="flex h-full flex-col border-r border-border bg-card">
       <GuildHeader />
       <SearchBar />
-      <ScrollArea className="flex-1 px-3 pl-1 pt-3">
+      <ScrollArea className="flex-1 px-2 pt-3">
         <ChannelList />
       </ScrollArea>
       <UserBar />
diff --git a/apps/web/src/components/sidebar/channel-panel/user-bar.tsx b/apps/web/src/components/sidebar/channel-panel/user-bar.tsx
index 497e75e..db87e33 100644
--- a/apps/web/src/components/sidebar/channel-panel/user-bar.tsx
+++ b/apps/web/src/components/sidebar/channel-panel/user-bar.tsx
@@ -9,6 +9,7 @@ import {
   DropdownMenuTrigger,
 } from "@repo/ui/components/dropdown-menu"
 import { ToggleGroup, ToggleGroupItem } from "@repo/ui/components/toggle-group"
+import { useNavigate } from "@tanstack/react-router"
 import {
   ChevronsUpDown,
   Laptop,
@@ -23,105 +24,126 @@ import { UserAvatar } from "../../ui/user-avatar"
 export function UserBar() {
   const { data: session } = authClient.useSession()
   const { setTheme, theme } = useTheme()
+  const navigate = useNavigate()
 
   const name = session?.user.name ?? "User"
   const email = session?.user.email ?? ""
 
   const handleLogout = async () => {
-    await authClient.signOut()
+    try {
+      await authClient.signOut()
+    } catch (err) {
+      console.error("Sign out failed:", err)
+    }
+  }
+
+  const handleOpenSettings = () => {
+    // TODO: Navigate to settings page
+    // navigate({ to: "/settings" })
   }
 
   return (
     <div className="border-t border-border px-2 py-2">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <button
-            type="button"
-            className="flex w-full items-center gap-2.5 rounded-md px-1.5 py-1.5 hover:bg-foreground/5"
-          >
-            <div className="relative">
-              <UserAvatar name={name} src={session?.user.image} size="sm" />
-              <div className="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-[2px] border-card bg-emerald-500" />
-            </div>
-            <div className="min-w-0 flex-1 text-left">
-              <div className="truncate text-[13px] font-semibold leading-tight">
-                {name}
+      <div className="flex items-center gap-1">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button
+              type="button"
+              className="flex flex-1 min-w-0 items-center gap-2.5 rounded-md px-1.5 py-1.5 hover:bg-foreground/5"
+            >
+              <div className="relative">
+                <UserAvatar name={name} src={session?.user.image} size="sm" />
+                <div className="absolute -bottom-0.5 -right-0.5 size-2.5 rounded-full border-[2px] border-card bg-emerald-500" />
               </div>
-              <div className="truncate text-[11px] leading-tight text-muted-foreground">
-                Online
+              <div className="min-w-0 flex-1 text-left">
+                <div className="truncate text-[13px] font-semibold leading-tight">
+                  {name}
+                </div>
+                <div className="truncate text-[11px] leading-tight text-muted-foreground">
+                  Online
+                </div>
               </div>
-            </div>
-            <ChevronsUpDown className="size-4 text-muted-foreground" />
-          </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent
-          className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
-          side="top"
-          align="start"
-          sideOffset={4}
-        >
-          <DropdownMenuLabel className="p-0 font-normal">
-            <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-              <UserAvatar name={name} src={session?.user.image} size="sm" />
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{name}</span>
-                <span className="truncate text-xs text-muted-foreground">
-                  {email}
-                </span>
+              <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            side="top"
+            align="start"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <UserAvatar name={name} src={session?.user.image} size="sm" />
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{name}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {email}
+                  </span>
+                </div>
               </div>
-            </div>
-          </DropdownMenuLabel>
+            </DropdownMenuLabel>
 
-          <DropdownMenuItem
-            className="cursor-default"
-            onSelect={(e) => e.preventDefault()}
-          >
-            Theme
-            <ToggleGroup
-              size="sm"
-              type="single"
-              className="ml-auto flex gap-1 items-center border border-border rounded-lg px-1 h-8"
-              value={theme}
-              onValueChange={(value) => value && setTheme(value)}
+            <DropdownMenuItem
+              className="cursor-default"
+              onSelect={(e) => e.preventDefault()}
             >
-              <ToggleGroupItem
-                className="h-6 w-6 p-1.5 rounded-md"
-                value="light"
+              Theme
+              <ToggleGroup
+                size="sm"
+                type="single"
+                className="ml-auto flex gap-1 items-center border border-border rounded-lg px-1 h-8"
+                value={theme}
+                onValueChange={(value) => value && setTheme(value)}
               >
-                <Sun className="h-4 w-4" />
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                className="h-6 w-6 p-1.5 rounded-md"
-                value="dark"
-              >
-                <Moon className="h-4 w-4" />
-              </ToggleGroupItem>
-              <ToggleGroupItem
-                className="h-6 w-6 p-1.5 rounded-md"
-                value="system"
-              >
-                <Laptop className="h-4 w-4" />
-              </ToggleGroupItem>
-            </ToggleGroup>
-          </DropdownMenuItem>
+                <ToggleGroupItem
+                  className="h-6 w-6 p-1.5 rounded-md"
+                  value="light"
+                >
+                  <Sun className="h-4 w-4" />
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  className="h-6 w-6 p-1.5 rounded-md"
+                  value="dark"
+                >
+                  <Moon className="h-4 w-4" />
+                </ToggleGroupItem>
+                <ToggleGroupItem
+                  className="h-6 w-6 p-1.5 rounded-md"
+                  value="system"
+                >
+                  <Laptop className="h-4 w-4" />
+                </ToggleGroupItem>
+              </ToggleGroup>
+            </DropdownMenuItem>
 
-          <DropdownMenuSeparator />
+            <DropdownMenuSeparator />
 
-          <DropdownMenuGroup>
-            <DropdownMenuItem>
-              <Settings className="h-4 w-4 mr-2" />
-              Settings
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
+            <DropdownMenuGroup>
+              <DropdownMenuItem onSelect={handleOpenSettings}>
+                <Settings className="h-4 w-4 mr-2" />
+                Settings
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
 
-          <DropdownMenuSeparator />
+            <DropdownMenuSeparator />
 
-          <DropdownMenuItem variant="destructive" onClick={handleLogout}>
-            <LogOut className="h-4 w-4 mr-2" />
-            Log out
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+            <DropdownMenuItem variant="destructive" onSelect={handleLogout}>
+              <LogOut className="h-4 w-4 mr-2" />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <button
+          type="button"
+          aria-label="Open settings"
+          title="Open settings"
+          onClick={handleOpenSettings}
+          className="flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
+        >
+          <Settings className="size-4" />
+        </button>
+      </div>
     </div>
   )
 }
diff --git a/apps/web/src/components/sidebar/dm-panel/dm-panel.tsx b/apps/web/src/components/sidebar/dm-panel/dm-panel.tsx
index 75e8f65..e8d08f0 100644
--- a/apps/web/src/components/sidebar/dm-panel/dm-panel.tsx
+++ b/apps/web/src/components/sidebar/dm-panel/dm-panel.tsx
@@ -1,16 +1,49 @@
 import { ScrollArea } from "@repo/ui/components/scroll-area"
-import { Plus } from "lucide-react"
+import { Separator } from "@repo/ui/components/separator"
+import { cn } from "@repo/ui/lib/utils"
+import { useNavigate, useParams } from "@tanstack/react-router"
+import { Inbox, Plus, Users } from "lucide-react"
 import { SearchBar } from "../channel-panel/search-bar"
 import { UserBar } from "../channel-panel/user-bar"
 import { DMList } from "./dm-list"
 
 export function DMPanel() {
+  const navigate = useNavigate()
+  const { dmId } = useParams({ strict: false })
+
   return (
     <div className="flex h-full flex-col border-r border-border bg-card">
-      <div className="flex h-[49px] items-center justify-between border-b border-border px-4">
-        <h2 className="text-[15px] font-bold tracking-tight">
+      <SearchBar />
+      <div className="space-y-0.5 px-2 pt-3">
+        <button
+          type="button"
+          onClick={() => navigate({ to: "/dms" })}
+          className={cn(
+            "flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-[14px] font-medium hover:bg-foreground/[0.06]",
+            !dmId
+              ? "bg-foreground/[0.06] text-foreground"
+              : "text-muted-foreground"
+          )}
+        >
+          <Users className="size-4 shrink-0" />
+          Allies
+        </button>
+        {/* TODO: implement navigateToMessageRequests */}
+        <button
+          type="button"
+          disabled
+          aria-disabled="true"
+          className="flex w-full items-center gap-2.5 rounded-lg px-2 py-1.5 text-[14px] font-medium text-muted-foreground opacity-50 cursor-not-allowed"
+        >
+          <Inbox className="size-4 shrink-0" />
+          Message Requests
+        </button>
+      </div>
+      <Separator className="mx-2 mt-3 w-auto" />
+      <div className="mt-3 flex items-center justify-between px-4 pb-1">
+        <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
           Direct Messages
-        </h2>
+        </span>
         <button
           type="button"
           className="text-muted-foreground hover:text-foreground"
@@ -18,8 +51,7 @@ export function DMPanel() {
           <Plus className="size-4" />
         </button>
       </div>
-      <SearchBar />
-      <ScrollArea className="flex-1 px-3 pt-3">
+      <ScrollArea className="flex-1 px-2">
         <DMList />
       </ScrollArea>
       <UserBar />
diff --git a/apps/web/src/routes/_authenticated.tsx b/apps/web/src/routes/_authenticated.tsx
index 4cf65d8..f58a948 100644
--- a/apps/web/src/routes/_authenticated.tsx
+++ b/apps/web/src/routes/_authenticated.tsx
@@ -1,4 +1,5 @@
 import { authClient } from "@repo/auth/client"
+import { useQuery } from "@tanstack/react-query"
 import {
   createFileRoute,
   Outlet,
@@ -6,6 +7,7 @@ import {
   useNavigate,
 } from "@tanstack/react-router"
 import { useEffect } from "react"
+import { OnboardingDialog } from "../components/onboarding/onboarding-dialog"
 import { Sidebar } from "../components/sidebar"
 
 const LAST_PATH_KEY = "townhall:last-path"
@@ -31,6 +33,15 @@ function AuthenticatedLayout() {
     }
   }, [location.pathname])
 
+  const { data: guilds } = useQuery({
+    queryKey: ["guilds"],
+    queryFn: async () => {
+      const res = await authClient.organization.list()
+      return res.data
+    },
+    enabled: !!session,
+  })
+
   if (isPending) {
     return (
       <div className="flex h-screen items-center justify-center">
@@ -43,11 +54,19 @@ function AuthenticatedLayout() {
     return null
   }
 
+  // Only show onboarding if explicitly not completed AND no existing guilds
+  // (guards against existing users whose flag defaulted to false)
+  const showOnboarding =
+    session.user.onboardingCompleted === false &&
+    guilds !== undefined &&
+    guilds?.length === 0
+
   return (
     <div className="flex h-screen select-none overflow-hidden bg-background text-foreground">
       <Sidebar>
         <Outlet />
       </Sidebar>
+      <OnboardingDialog open={showOnboarding} />
     </div>
   )
 }
diff --git a/packages/auth/src/lib/auth.ts b/packages/auth/src/lib/auth.ts
index e114b42..2e7abaf 100644
--- a/packages/auth/src/lib/auth.ts
+++ b/packages/auth/src/lib/auth.ts
@@ -8,8 +8,19 @@ export const auth = betterAuth({
   baseURL: env.NEXT_PUBLIC_API_URL,
   database: drizzleAdapter(db, { provider: "pg", schema }),
   secret: env.BETTER_AUTH_SECRET,
+  user: {
+    additionalFields: {
+      onboardingCompleted: {
+        type: "boolean",
+        defaultValue: false,
+        returned: true,
+      },
+    },
+  },
   trustedOrigins:
-    env.NODE_ENV === "development" ? ["http://localhost:3000"] : [],
+    env.NODE_ENV === "development"
+      ? ["http://localhost:3000", "http://localhost:3001"]
+      : [],
   emailAndPassword: {
     enabled: true,
   },
@@ -36,11 +47,11 @@ export const auth = betterAuth({
               fieldName: "ownerId",
               references: {
                 field: "id",
-                table: "user",
                 model: "user",
                 onDelete: "restrict",
               },
-              required: true,
+              required: false,
+              input: false,
               returned: true,
             },
           },
@@ -68,6 +79,11 @@ export const auth = betterAuth({
           },
         },
       },
+      organizationHooks: {
+        beforeCreateOrganization: async ({ organization, user }) => {
+          return { data: { ...organization, ownerId: user.id } }
+        },
+      },
       dynamicAccessControl: {
         enabled: true,
       },
diff --git a/packages/db/src/schemas/users.ts b/packages/db/src/schemas/users.ts
index 3a0b66a..e6410bf 100644
--- a/packages/db/src/schemas/users.ts
+++ b/packages/db/src/schemas/users.ts
@@ -25,6 +25,7 @@ export const user = pgTable("user", {
   username: text("username").unique(),
   displayUsername: text("display_username"),
   twoFactorEnabled: boolean("two_factor_enabled").default(false),
+  onboardingCompleted: boolean("onboarding_completed").default(false).notNull(),
 })
 
 export const userRelations = relations(user, ({ many }) => ({
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
new file mode 100644
index 0000000..8d50f68
--- /dev/null
+++ b/packages/ui/src/components/dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import { Button } from "@repo/ui/components/button"
+import { cn } from "@repo/ui/lib/utils"
+import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+import type * as React from "react"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}