diff --git a/apps/web/src/components/allies/allies-page.tsx b/apps/web/src/components/allies/allies-page.tsx
index 89ed59e..33170d1 100644
--- a/apps/web/src/components/allies/allies-page.tsx
+++ b/apps/web/src/components/allies/allies-page.tsx
@@ -13,10 +13,12 @@ import { Button } from "@repo/ui/components/button"
 import { Input } from "@repo/ui/components/input"
 import { ScrollArea } from "@repo/ui/components/scroll-area"
 import { Skeleton } from "@repo/ui/components/skeleton"
+import { useIsMobile } from "@repo/ui/hooks/use-mobile"
 import { cn } from "@repo/ui/lib/utils"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import {
   Check,
+  Menu,
   MessageCircle,
   Search,
   ShieldOff,
@@ -28,6 +30,7 @@ import {
 import { useState } from "react"
 import { toast } from "sonner"
 import { UserAvatar } from "@/components/ui/user-avatar"
+import { useMobileSidebar } from "@/context/mobile-sidebar-context"
 import { useBlockedUsers } from "@/hooks/use-blocked-users"
 import { useCreateDM } from "@/hooks/use-create-dm"
 import { apiClient } from "@/lib/api-client"
@@ -205,6 +208,8 @@ function BlockedUserRow({
 export function AlliesPage() {
   const queryClient = useQueryClient()
   const createDM = useCreateDM()
+  const isMobile = useIsMobile()
+  const { setOpen: openMobileSidebar } = useMobileSidebar()
   const [tab, setTab] = useState<Tab>("all")
   const [search, setSearch] = useState("")
   const [addUsername, setAddUsername] = useState("")
@@ -391,6 +396,15 @@ export function AlliesPage() {
     <div className="flex h-full flex-1 flex-col bg-background">
       {/* Header */}
       <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border px-4">
+        {isMobile && (
+          <button
+            type="button"
+            onClick={() => openMobileSidebar(true)}
+            className="rounded-sm p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+          >
+            <Menu className="size-5" />
+          </button>
+        )}
         <Users className="size-5 text-muted-foreground" />
         <h1 className="text-base font-semibold">Allies</h1>
         <div className="mx-2 h-5 w-px bg-border" />
diff --git a/apps/web/src/components/chat/header.tsx b/apps/web/src/components/chat/header.tsx
index b7f19a1..b9ae2b0 100644
--- a/apps/web/src/components/chat/header.tsx
+++ b/apps/web/src/components/chat/header.tsx
@@ -4,8 +4,11 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@repo/ui/components/tooltip"
-import { Hash, PanelRight, Pin } from "lucide-react"
+import { useIsMobile } from "@repo/ui/hooks/use-mobile"
+import { useParams } from "@tanstack/react-router"
+import { Hash, Menu, PanelRight, Pin } from "lucide-react"
 import { useRightSidebar } from "@/components/sidebar/right-panel/right-sidebar-context"
+import { useMobileSidebar } from "@/context/mobile-sidebar-context"
 import { HeaderSearch } from "./header-search"
 
 export type ChatContext =
@@ -27,10 +30,23 @@ export function ChatHeader({
   channelId: string
   onTogglePinnedMessages?: () => void
 }) {
-  const { isCollapsed, toggleCollapsed } = useRightSidebar()
+  const { view, setView, clearView, isCollapsed, toggleCollapsed } =
+    useRightSidebar()
+  const isMobile = useIsMobile()
+  const { setOpen: openMobileSidebar } = useMobileSidebar()
+  const { guildSlug } = useParams({ strict: false })
 
   return (
     <div className="flex h-12 shrink-0 items-center gap-2 border-b border-border px-4">
+      {isMobile && (
+        <button
+          type="button"
+          onClick={() => openMobileSidebar(true)}
+          className="rounded-sm p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+        >
+          <Menu className="size-5" />
+        </button>
+      )}
       {context.type === "channel" && (
         <Hash className="size-5 shrink-0 text-muted-foreground" />
       )}
@@ -77,20 +93,46 @@ export function ChatHeader({
             <TooltipContent>Pinned Messages</TooltipContent>
           </Tooltip>
         )}
-        {isCollapsed && context.type === "channel" && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={toggleCollapsed}
-                className="rounded-sm p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
-              >
-                <PanelRight className="size-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>Show Panel</TooltipContent>
-          </Tooltip>
-        )}
+        {context.type === "channel" &&
+          (isMobile ? (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => {
+                    if (view) {
+                      clearView()
+                    } else {
+                      setView({
+                        type: "guild-members",
+                        guildSlug: guildSlug ?? "",
+                        channelId,
+                      })
+                    }
+                  }}
+                  className="rounded-sm p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+                >
+                  <PanelRight className="size-4" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>Members</TooltipContent>
+            </Tooltip>
+          ) : (
+            isCollapsed && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={toggleCollapsed}
+                    className="rounded-sm p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
+                  >
+                    <PanelRight className="size-4" />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent>Show Panel</TooltipContent>
+              </Tooltip>
+            )
+          ))}
       </div>
     </div>
   )
diff --git a/apps/web/src/components/onboarding/onboarding-dialog.tsx b/apps/web/src/components/onboarding/onboarding-dialog.tsx
index 1b74188..287e2d3 100644
--- a/apps/web/src/components/onboarding/onboarding-dialog.tsx
+++ b/apps/web/src/components/onboarding/onboarding-dialog.tsx
@@ -152,11 +152,11 @@ export function OnboardingDialog({ open }: { open: boolean }) {
     if (!channelsRes.ok) return null
 
     const channels = await channelsRes.json()
-    return (
-      channels.uncategorized[0]?.id ??
-      channels.categories[0]?.channels[0]?.id ??
-      null
-    )
+    if (channels.uncategorized[0]?.id) return channels.uncategorized[0].id
+    for (const cat of channels.categories) {
+      if (cat.channels[0]?.id) return cat.channels[0].id
+    }
+    return null
   }
 
   const handleCreate = async (e: React.FormEvent) => {
@@ -477,7 +477,7 @@ export function OnboardingDialog({ open }: { open: boolean }) {
                     <Label htmlFor="invite-link">Invite Link or Code</Label>
                     <Input
                       id="invite-link"
-                      placeholder="https://townhall.chat/invite/abc123 or abc123"
+                      placeholder="https://app.townhall.chat/invite/abc123 or abc123"
                       value={inviteLink}
                       onChange={(e) => setInviteLink(e.target.value)}
                       disabled={loading}
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 d47a543..19708ee 100644
--- a/apps/web/src/components/sidebar/channel-panel/channel-list.tsx
+++ b/apps/web/src/components/sidebar/channel-panel/channel-list.tsx
@@ -38,6 +38,7 @@ import {
 } from "lucide-react"
 import { AnimatePresence, motion } from "motion/react"
 import { useCallback, useState } from "react"
+import { useMobileSidebar } from "@/context/mobile-sidebar-context"
 import { useUnread } from "@/context/unread-context"
 import { apiClient } from "@/lib/api-client"
 import type { Channel, ListChannelsResponse } from "@/lib/api-types"
@@ -109,6 +110,7 @@ export function ChannelList() {
   const { guildSlug, channelId: activeChannelId } = useParams({ strict: false })
   const navigate = useNavigate()
   const queryClient = useQueryClient()
+  const { setOpen: closeMobileSidebar } = useMobileSidebar()
 
   const { data, isPending } = useQuery({
     queryKey: ["channels", guildSlug],
@@ -386,7 +388,7 @@ export function ChannelList() {
                   active={activeChannelId === ch.id}
                   canManage={canManage}
                   canDelete={canDelete}
-                  onClick={() =>
+                  onClick={() => {
                     navigate({
                       to: "/$guildSlug/$channelId",
                       params: {
@@ -394,7 +396,8 @@ export function ChannelList() {
                         channelId: ch.id,
                       },
                     })
-                  }
+                    closeMobileSidebar(false)
+                  }}
                 />
               ))}
             </div>
@@ -417,12 +420,13 @@ export function ChannelList() {
               activeChannelId={activeChannelId}
               canManage={canManage}
               canDelete={canDelete}
-              onChannelClick={(channelId) =>
+              onChannelClick={(channelId) => {
                 navigate({
                   to: "/$guildSlug/$channelId",
                   params: { guildSlug: guildSlug as string, channelId },
                 })
-              }
+                closeMobileSidebar(false)
+              }}
             />
           ))}
         </SortableContext>
diff --git a/apps/web/src/components/sidebar/dm-panel/dm-list.tsx b/apps/web/src/components/sidebar/dm-panel/dm-list.tsx
index 5fb2f78..6c16382 100644
--- a/apps/web/src/components/sidebar/dm-panel/dm-list.tsx
+++ b/apps/web/src/components/sidebar/dm-panel/dm-list.tsx
@@ -8,6 +8,7 @@ import {
 import { cn } from "@repo/ui/lib/utils"
 import { useQuery } from "@tanstack/react-query"
 import { useNavigate, useParams } from "@tanstack/react-router"
+import { useMobileSidebar } from "@/context/mobile-sidebar-context"
 import { useUnread } from "@/context/unread-context"
 import { apiClient } from "@/lib/api-client"
 import type { DMember } from "@/lib/api-types"
@@ -16,6 +17,7 @@ import { UserAvatar } from "../../ui/user-avatar"
 export function DMList() {
   const navigate = useNavigate()
   const { dmId } = useParams({ strict: false })
+  const { setOpen: closeMobileSidebar } = useMobileSidebar()
 
   const { data } = useQuery({
     queryKey: ["dms"],
@@ -52,9 +54,10 @@ export function DMList() {
             lastMessageAuthor={dm.lastMessage?.author.name ?? null}
             isGroupDM={dm.type === "group_dm"}
             active={dmId === dm.id}
-            onClick={() =>
+            onClick={() => {
               navigate({ to: "/dms/$dmId", params: { dmId: dm.id } })
-            }
+              closeMobileSidebar(false)
+            }}
           />
         )
       })}
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 06626a2..07b6cb4 100644
--- a/apps/web/src/components/sidebar/dm-panel/dm-panel.tsx
+++ b/apps/web/src/components/sidebar/dm-panel/dm-panel.tsx
@@ -4,6 +4,7 @@ import { cn } from "@repo/ui/lib/utils"
 import { useNavigate, useParams } from "@tanstack/react-router"
 import { Plus, Users } from "lucide-react"
 import { useState } from "react"
+import { useMobileSidebar } from "@/context/mobile-sidebar-context"
 import { SearchBar } from "../channel-panel/search-bar"
 import { UserBar } from "../channel-panel/user-bar"
 import { DMList } from "./dm-list"
@@ -12,6 +13,7 @@ import { NewDMDialog } from "./new-dm-dialog"
 export function DMPanel() {
   const navigate = useNavigate()
   const { dmId } = useParams({ strict: false })
+  const { setOpen: closeMobileSidebar } = useMobileSidebar()
   const [newDMOpen, setNewDMOpen] = useState(false)
 
   return (
@@ -20,7 +22,10 @@ export function DMPanel() {
       <div className="space-y-0.5 px-2 pt-3">
         <button
           type="button"
-          onClick={() => navigate({ to: "/dms" })}
+          onClick={() => {
+            navigate({ to: "/dms" })
+            closeMobileSidebar(false)
+          }}
           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
diff --git a/apps/web/src/components/sidebar/guild-bar/create-guild-dialog.tsx b/apps/web/src/components/sidebar/guild-bar/create-guild-dialog.tsx
new file mode 100644
index 0000000..f43dee9
--- /dev/null
+++ b/apps/web/src/components/sidebar/guild-bar/create-guild-dialog.tsx
@@ -0,0 +1,312 @@
+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 { sluggify } from "@repo/utils/slug"
+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"
+import { apiClient } from "@/lib/api-client"
+
+type Step = "choose" | "create" | "join"
+
+function normalizeSlugInput(value: string) {
+  return value
+    .toLowerCase()
+    .replace(/\s+/g, "-")
+    .replace(/[^a-z0-9-]/g, "")
+}
+
+export function CreateGuildDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const [step, setStep] = useState<Step>("choose")
+  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()
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setStep("choose")
+      setName("")
+      setSlug("")
+      setSlugEdited(false)
+      setInviteLink("")
+      setError(null)
+      setLoading(false)
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!slugEdited) {
+      setSlug(sluggify(name))
+    }
+  }, [name, slugEdited])
+
+  const getFirstChannelId = async (guildSlug: string) => {
+    const channelsRes = await apiClient.v1.guilds[":guildSlug"].channels.$get({
+      param: { guildSlug },
+    })
+    if (!channelsRes.ok) return null
+    const channels = await channelsRes.json()
+    if (channels.uncategorized[0]?.id) return channels.uncategorized[0].id
+    for (const cat of channels.categories) {
+      if (cat.channels[0]?.id) return cat.channels[0].id
+    }
+    return null
+  }
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const normalizedSlug = sluggify(slug)
+    if (!name.trim() || !normalizedSlug) return
+    setError(null)
+    setLoading(true)
+
+    try {
+      const res = await authClient.organization.create({
+        name: name.trim(),
+        slug: normalizedSlug,
+      })
+
+      if (res.error) {
+        const message = (res.error.message ?? "Failed to create guild").replace(
+          /organization/gi,
+          "Guild"
+        )
+        setError(message)
+        return
+      }
+
+      const createdGuildSlug = res.data?.slug ?? normalizedSlug
+      await queryClient.invalidateQueries({ queryKey: ["guilds"] })
+
+      let firstChannelId: string | null = null
+      try {
+        firstChannelId = await getFirstChannelId(createdGuildSlug)
+      } catch {}
+
+      onOpenChange(false)
+
+      if (firstChannelId) {
+        navigate({
+          to: "/$guildSlug/$channelId",
+          params: { guildSlug: createdGuildSlug, channelId: firstChannelId },
+        })
+      } else {
+        navigate({
+          to: "/$guildSlug",
+          params: { guildSlug: createdGuildSlug },
+        })
+      }
+    } catch {
+      setError("Something went wrong. Please try again.")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleJoin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!inviteLink.trim()) return
+    setError(null)
+    setLoading(true)
+
+    const trimmed = inviteLink.trim()
+    const inviteMatch = trimmed.match(
+      /(?:^|\/)invite\/([A-Za-z0-9]+)(?:\/)?(?:[?#].*)?$/i
+    )
+    const inviteCode = /^[A-Za-z0-9]+$/.test(trimmed)
+      ? trimmed
+      : (inviteMatch?.[1] ?? null)
+
+    if (!inviteCode) {
+      setError("Enter a valid invite link or invite code.")
+      setLoading(false)
+      return
+    }
+
+    onOpenChange(false)
+    await navigate({
+      to: "/invite/$code",
+      params: { code: inviteCode },
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        {step === "choose" && (
+          <>
+            <DialogHeader>
+              <DialogTitle>Add a Guild</DialogTitle>
+              <DialogDescription>
+                Create a new guild or join an existing one.
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-3 pt-2">
+              <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("choose")
+                setError(null)
+              }}
+              className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+            >
+              <ArrowLeft className="size-3.5" />
+              Back
+            </button>
+            <DialogHeader>
+              <DialogTitle>Create a Guild</DialogTitle>
+              <DialogDescription>
+                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 px-1 shadow-none focus-visible:ring-0"
+                    placeholder="my-awesome-guild"
+                    value={slug}
+                    onChange={(e) => {
+                      setSlugEdited(true)
+                      setSlug(normalizeSlugInput(e.target.value))
+                    }}
+                    onBlur={() =>
+                      setSlug((currentSlug) => sluggify(currentSlug))
+                    }
+                    disabled={loading}
+                  />
+                </div>
+              </div>
+              {error && <p className="text-sm text-destructive">{error}</p>}
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={loading || !name.trim() || !sluggify(slug)}
+              >
+                {loading && <Loader2 className="mr-2 size-4 animate-spin" />}
+                Create Guild
+              </Button>
+            </form>
+          </>
+        )}
+
+        {step === "join" && (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                setStep("choose")
+                setError(null)
+              }}
+              className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground"
+            >
+              <ArrowLeft className="size-3.5" />
+              Back
+            </button>
+            <DialogHeader>
+              <DialogTitle>Join a Guild</DialogTitle>
+              <DialogDescription>
+                Paste an invite link or code 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 or Code</Label>
+                <Input
+                  id="invite-link"
+                  placeholder="https://app.townhall.chat/invite/abc123 or 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>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/apps/web/src/components/sidebar/guild-bar/guild-bar.tsx b/apps/web/src/components/sidebar/guild-bar/guild-bar.tsx
index 4feca09..9241810 100644
--- a/apps/web/src/components/sidebar/guild-bar/guild-bar.tsx
+++ b/apps/web/src/components/sidebar/guild-bar/guild-bar.tsx
@@ -3,6 +3,8 @@ import { cn } from "@repo/ui/lib/utils"
 import { useQuery } from "@tanstack/react-query"
 import { useNavigate, useParams } from "@tanstack/react-router"
 import { MessageCircle, Plus } from "lucide-react"
+import { useState } from "react"
+import { CreateGuildDialog } from "./create-guild-dialog"
 
 function GuildIcon({
   name,
@@ -55,6 +57,7 @@ function GuildIcon({
 
 export function GuildBar() {
   const navigate = useNavigate()
+  const [createDialogOpen, setCreateDialogOpen] = useState(false)
 
   const { guildSlug } = useParams({ strict: false })
 
@@ -120,11 +123,20 @@ export function GuildBar() {
       <div className="mx-auto my-1 h-px w-8 rounded-full bg-border" />
 
       {/* Add guild button */}
-      <div className="group relative flex items-center justify-center px-3 py-1">
+      <button
+        type="button"
+        onClick={() => setCreateDialogOpen(true)}
+        className="group relative flex items-center justify-center px-3 py-1"
+      >
         <div className="flex size-12 items-center justify-center rounded-[24px] bg-muted text-emerald-500 transition-all hover:rounded-2xl hover:bg-emerald-500 hover:text-white">
           <Plus className="size-6" />
         </div>
-      </div>
+      </button>
+
+      <CreateGuildDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+      />
     </div>
   )
 }
diff --git a/apps/web/src/components/sidebar/index.tsx b/apps/web/src/components/sidebar/index.tsx
index 993c523..595541b 100644
--- a/apps/web/src/components/sidebar/index.tsx
+++ b/apps/web/src/components/sidebar/index.tsx
@@ -4,10 +4,13 @@ import {
   ResizablePanelGroup,
   useDefaultLayout,
 } from "@repo/ui/components/resizable"
+import { Sheet, SheetContent } from "@repo/ui/components/sheet"
+import { useIsMobile } from "@repo/ui/hooks/use-mobile"
 import { cn } from "@repo/ui/lib/utils"
 import { useParams } from "@tanstack/react-router"
 import { AnimatePresence, motion } from "motion/react"
-import { useCallback, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useMobileSidebar } from "@/context/mobile-sidebar-context"
 import { ChannelPanel } from "./channel-panel/channel-panel"
 import { DMPanel } from "./dm-panel/dm-panel"
 import { GuildBar } from "./guild-bar/guild-bar"
@@ -17,7 +20,36 @@ import {
 } from "./right-panel/right-sidebar-context"
 import { RightSidebarPanel } from "./right-panel/right-sidebar-panel"
 
-function SidebarLayout({ children }: { children: React.ReactNode }) {
+function LeftSidebarContent() {
+  const { guildSlug } = useParams({ strict: false })
+
+  return (
+    <div className="flex h-full w-full">
+      <GuildBar />
+      <div className="min-w-0 flex-1">
+        {guildSlug ? <ChannelPanel /> : <DMPanel />}
+      </div>
+    </div>
+  )
+}
+
+function MobileSidebar() {
+  const { open, setOpen } = useMobileSidebar()
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetContent
+        side="left"
+        showCloseButton={false}
+        className="w-[320px] p-0 sm:max-w-[320px]"
+      >
+        <LeftSidebarContent />
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function DesktopSidebarLayout({ children }: { children: React.ReactNode }) {
   const { guildSlug } = useParams({ strict: false })
   const { view, isCollapsed, panelWidth, setPanelWidth, isHydrated } =
     useRightSidebar()
@@ -48,9 +80,7 @@ function SidebarLayout({ children }: { children: React.ReactNode }) {
       }
 
       const handleMouseUp = () => {
-        // Commit width first so the next render has the correct value
         setPanelWidth(widthRef.current)
-        // Use rAF to clear resizing after React has committed the new width
         requestAnimationFrame(() => setIsResizing(false))
         document.removeEventListener("mousemove", handleMouseMove)
         document.removeEventListener("mouseup", handleMouseUp)
@@ -117,6 +147,50 @@ function SidebarLayout({ children }: { children: React.ReactNode }) {
   )
 }
 
+function MobileRightPanel() {
+  const { view, clearView } = useRightSidebar()
+  const { guildSlug } = useParams({ strict: false })
+  const open = !!view && !!guildSlug
+
+  useEffect(() => {
+    if (!guildSlug && view) clearView()
+  }, [guildSlug, view, clearView])
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(isOpen) => {
+        if (!isOpen) clearView()
+      }}
+      modal
+    >
+      <SheetContent
+        side="right"
+        showCloseButton={false}
+        className="w-[300px] p-0 sm:max-w-[300px]"
+      >
+        {view && <RightSidebarPanel view={view} />}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function SidebarLayout({ children }: { children: React.ReactNode }) {
+  const isMobile = useIsMobile()
+
+  if (isMobile) {
+    return (
+      <div className="flex h-full w-full flex-col">
+        <MobileSidebar />
+        <MobileRightPanel />
+        {children}
+      </div>
+    )
+  }
+
+  return <DesktopSidebarLayout>{children}</DesktopSidebarLayout>
+}
+
 export function Sidebar({ children }: { children: React.ReactNode }) {
   return (
     <RightSidebarProvider>
diff --git a/apps/web/src/components/sidebar/right-panel/guild-members-panel.tsx b/apps/web/src/components/sidebar/right-panel/guild-members-panel.tsx
index 579156f..30cf56f 100644
--- a/apps/web/src/components/sidebar/right-panel/guild-members-panel.tsx
+++ b/apps/web/src/components/sidebar/right-panel/guild-members-panel.tsx
@@ -34,6 +34,7 @@ import {
 } from "@repo/ui/components/dropdown-menu"
 import { ScrollArea } from "@repo/ui/components/scroll-area"
 import { Skeleton } from "@repo/ui/components/skeleton"
+import { useIsMobile } from "@repo/ui/hooks/use-mobile"
 import { cn } from "@repo/ui/lib/utils"
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { MoreHorizontal, PanelRight } from "lucide-react"
@@ -304,7 +305,8 @@ export function GuildMembersPanel({ view }: { view: GuildMembersSidebarView }) {
   const socket = useSocket()
   const queryClient = useQueryClient()
   const { data: session } = authClient.useSession()
-  const { toggleCollapsed } = useRightSidebar()
+  const { toggleCollapsed, clearView } = useRightSidebar()
+  const isMobile = useIsMobile()
   const [moderationDialog, setModerationDialog] =
     useState<ModerationDialogState>(null)
   const queryKey = useMemo(
@@ -639,7 +641,7 @@ export function GuildMembersPanel({ view }: { view: GuildMembersSidebarView }) {
           </span>
           <button
             type="button"
-            onClick={toggleCollapsed}
+            onClick={isMobile ? clearView : toggleCollapsed}
             className="rounded-sm p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
           >
             <PanelRight className="size-4" />
diff --git a/apps/web/src/components/sidebar/right-panel/pinned-messages-panel.tsx b/apps/web/src/components/sidebar/right-panel/pinned-messages-panel.tsx
index d04b259..0d6ba13 100644
--- a/apps/web/src/components/sidebar/right-panel/pinned-messages-panel.tsx
+++ b/apps/web/src/components/sidebar/right-panel/pinned-messages-panel.tsx
@@ -1,4 +1,5 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@repo/ui/components/avatar"
+import { useIsMobile } from "@repo/ui/hooks/use-mobile"
 import { formatTime } from "@repo/utils/date"
 import { useQuery } from "@tanstack/react-query"
 import { ArrowLeft, PanelRight, Pin } from "lucide-react"
@@ -17,7 +18,8 @@ export function PinnedMessagesPanel({
 }: {
   view: PinnedMessagesSidebarView
 }) {
-  const { setView, toggleCollapsed } = useRightSidebar()
+  const { setView, toggleCollapsed, clearView } = useRightSidebar()
+  const isMobile = useIsMobile()
 
   const goBack = () => {
     setView({
@@ -54,7 +56,7 @@ export function PinnedMessagesPanel({
         <span className="text-sm font-semibold">Pinned Messages</span>
         <button
           type="button"
-          onClick={toggleCollapsed}
+          onClick={isMobile ? clearView : toggleCollapsed}
           className="ml-auto rounded-sm p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <PanelRight className="size-4" />
diff --git a/apps/web/src/context/mobile-sidebar-context.tsx b/apps/web/src/context/mobile-sidebar-context.tsx
new file mode 100644
index 0000000..2f82191
--- /dev/null
+++ b/apps/web/src/context/mobile-sidebar-context.tsx
@@ -0,0 +1,25 @@
+import { createContext, type ReactNode, useContext, useState } from "react"
+
+interface MobileSidebarContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const MobileSidebarContext = createContext<MobileSidebarContextValue>({
+  open: false,
+  setOpen: () => {},
+})
+
+export function MobileSidebarProvider({ children }: { children: ReactNode }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <MobileSidebarContext.Provider value={{ open, setOpen }}>
+      {children}
+    </MobileSidebarContext.Provider>
+  )
+}
+
+export function useMobileSidebar() {
+  return useContext(MobileSidebarContext)
+}
diff --git a/apps/web/src/routes/_authenticated.tsx b/apps/web/src/routes/_authenticated.tsx
index 2c1d43f..3fedd57 100644
--- a/apps/web/src/routes/_authenticated.tsx
+++ b/apps/web/src/routes/_authenticated.tsx
@@ -10,6 +10,7 @@ import { useEffect } from "react"
 import { OnboardingDialog } from "../components/onboarding/onboarding-dialog"
 import { SettingsDialog } from "../components/settings/settings-dialog"
 import { Sidebar } from "../components/sidebar"
+import { MobileSidebarProvider } from "../context/mobile-sidebar-context"
 import { SettingsProvider } from "../context/settings-context"
 import { SocketProvider } from "../context/socket-context"
 import { UnreadProvider } from "../context/unread-context"
@@ -78,13 +79,15 @@ function AuthenticatedLayout() {
       <UnreadProvider>
         <SettingsProvider>
           <BrowserNotifications />
-          <div className="flex h-screen select-none overflow-hidden bg-background text-foreground">
-            <Sidebar>
-              <Outlet />
-            </Sidebar>
-            <OnboardingDialog open={showOnboarding} />
-            <SettingsDialog />
-          </div>
+          <MobileSidebarProvider>
+            <div className="flex h-screen select-none overflow-hidden bg-background text-foreground">
+              <Sidebar>
+                <Outlet />
+              </Sidebar>
+              <OnboardingDialog open={showOnboarding} />
+              <SettingsDialog />
+            </div>
+          </MobileSidebarProvider>
         </SettingsProvider>
       </UnreadProvider>
     </SocketProvider>
diff --git a/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx b/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx
index 54389ff..2e55baf 100644
--- a/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx
+++ b/apps/web/src/routes/_authenticated/$guildSlug/$channelId.tsx
@@ -4,6 +4,7 @@ import {
   isGuildRole,
   roleHasPermissions,
 } from "@repo/auth/permissions"
+import { useIsMobile } from "@repo/ui/hooks/use-mobile"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { createFileRoute } from "@tanstack/react-router"
 import { useCallback, useEffect, useMemo } from "react"
@@ -54,6 +55,7 @@ function ChannelView() {
   const { msgId } = Route.useSearch()
   const navigate = Route.useNavigate()
   const socket = useSocket()
+  const isMobile = useIsMobile()
   useAutoMarkRead(channelId)
   const queryClient = useQueryClient()
   const { view, setView, clearView, isCollapsed, toggleCollapsed } =
@@ -74,15 +76,17 @@ function ChannelView() {
   }, [guildSlug, channelId])
 
   useEffect(() => {
-    setView({
-      type: "guild-members",
-      guildSlug,
-      channelId,
-    })
+    if (isMobile === false) {
+      setView({
+        type: "guild-members",
+        guildSlug,
+        channelId,
+      })
+    }
     return () => {
       clearView()
     }
-  }, [setView, clearView, guildSlug, channelId])
+  }, [setView, clearView, guildSlug, channelId, isMobile])
 
   const { data, isPending, isError, error } = useQuery({
     queryKey: ["channel", guildSlug, channelId],