diff --git a/.gitignore b/.gitignore
index 5fc16a0..ccd1e13 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ build/
 out/
 *.local
 .agent/
+apps/backend/uploads
 
 # Prisma generated client
 apps/backend/generated/*
diff --git a/apps/backend/src/controllers/auth.controller.ts b/apps/backend/src/controllers/auth.controller.ts
index 9e83ae8..e330c9d 100644
--- a/apps/backend/src/controllers/auth.controller.ts
+++ b/apps/backend/src/controllers/auth.controller.ts
@@ -319,6 +319,7 @@ export class AuthController {
           email: true,
           emailVerified: true,
           avatar: true,
+          bio: true,
           createdAt: true,
         },
       })
diff --git a/apps/backend/src/routes/user.routes.ts b/apps/backend/src/routes/user.routes.ts
index c1c2a6c..8c51f90 100644
--- a/apps/backend/src/routes/user.routes.ts
+++ b/apps/backend/src/routes/user.routes.ts
@@ -41,12 +41,17 @@ router.get("/search", authMiddleware, async (req, res) => {
 })
 
 
-router.get("/:username", async (req, res) => {
+router.get("/:username", authMiddleware, async (req, res) => {
   const parsed = usernameParamsSchema.safeParse(req.params)
   if (!parsed.success) {
     return respondWithZodError(res, parsed.error)
   }
 
+  const currentUserId = req.user?.id
+  if (!currentUserId) {
+    return res.status(401).json({ message: "Not authenticated" })
+  }
+
   const { username } = parsed.data;
 
   const user = await prisma.user.findUnique({
@@ -56,13 +61,97 @@ router.get("/:username", async (req, res) => {
       username: true,
       name: true,
       avatar: true,
-      publicNumericId: true
+      bio: true,
+      publicNumericId: true,
+      isOnline: true,
+      lastLogin: true,
+      createdAt: true,
     }
   });
 
   if (!user) return res.status(404).json({ message: "User not found" });
 
-  res.json({ user });
+  const targetUserId = user.id
+
+  const [friendship, pendingRequest, currentFriends, targetFriends, currentZones, targetZones] =
+    await Promise.all([
+      prisma.friend.findFirst({
+        where: {
+          OR: [
+            { user1Id: currentUserId, user2Id: targetUserId },
+            { user1Id: targetUserId, user2Id: currentUserId },
+          ],
+        },
+        select: { id: true },
+      }),
+      prisma.friendRequest.findFirst({
+        where: {
+          status: "PENDING",
+          OR: [
+            { senderId: currentUserId, receiverId: targetUserId },
+            { senderId: targetUserId, receiverId: currentUserId },
+          ],
+        },
+        select: { id: true },
+      }),
+      prisma.friend.findMany({
+        where: { OR: [{ user1Id: currentUserId }, { user2Id: currentUserId }] },
+        select: { user1Id: true, user2Id: true },
+      }),
+      prisma.friend.findMany({
+        where: { OR: [{ user1Id: targetUserId }, { user2Id: targetUserId }] },
+        select: { user1Id: true, user2Id: true },
+      }),
+      prisma.chatParticipant.findMany({
+        where: { userId: currentUserId, chat: { type: "ZONE" } },
+        select: { chat: { select: { id: true, publicId: true, name: true } } },
+      }),
+      prisma.chatParticipant.findMany({
+        where: { userId: targetUserId, chat: { type: "ZONE" } },
+        select: { chat: { select: { id: true, publicId: true, name: true } } },
+      }),
+    ])
+
+  const friendStatus = friendship ? "accepted" : pendingRequest ? "pending" : "none"
+
+  const currentFriendIds = new Set(
+    currentFriends.map((f) => (f.user1Id === currentUserId ? f.user2Id : f.user1Id)),
+  )
+  const targetFriendIds = new Set(
+    targetFriends.map((f) => (f.user1Id === targetUserId ? f.user2Id : f.user1Id)),
+  )
+  const mutualFriendIds = [...currentFriendIds].filter((id) => targetFriendIds.has(id))
+
+  const mutualFriends = mutualFriendIds.length
+    ? await prisma.user.findMany({
+        where: { id: { in: mutualFriendIds } },
+        select: { id: true, name: true, username: true },
+      })
+    : []
+
+  const currentZoneMap = new Map(currentZones.map((entry) => [entry.chat.id, entry.chat]))
+  const mutualZones = targetZones
+    .map((entry) => currentZoneMap.get(entry.chat.id))
+    .filter((zone): zone is { id: number; publicId: string; name: string } => Boolean(zone))
+    .map((zone) => ({ id: zone.publicId, name: zone.name }))
+
+  res.json({
+    user: {
+      id: String(user.id),
+      name: user.name ?? user.username,
+      avatar: user.avatar,
+      bio: user.bio,
+      friendStatus,
+      mutualFriends: mutualFriends.map((friend) => ({
+        id: String(friend.id),
+        name: friend.name ?? friend.username,
+      })),
+      mutualZones,
+      isOnline: user.isOnline,
+      lastLogin: user.lastLogin,
+      createdAt: user.createdAt,
+    },
+  });
 });
 
 router.patch(
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index cbbdc43..2280beb 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -9,6 +9,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.1.0",
+    "@emoji-mart/react": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
diff --git a/apps/frontend/src/app/auth/page.tsx b/apps/frontend/src/app/auth/page.tsx
index 7562935..8bb8031 100644
--- a/apps/frontend/src/app/auth/page.tsx
+++ b/apps/frontend/src/app/auth/page.tsx
@@ -6,6 +6,7 @@ import { Eye, EyeOff, Mail, Lock, User, CheckCircle2, AlertCircle, Loader2, Spar
 import { useRouter } from "next/navigation";
 import { api } from '@openchat/lib';
 import { Checkbox, Label } from "@openchat/ui"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogTrigger, DialogFooter } from "@openchat/ui"
 import { signupSchema } from "@openchat/lib/validations/auth";
 import { useGoogleLogin } from "@react-oauth/google";
 import Link from 'next/link';
diff --git a/apps/frontend/src/app/dashboard/layout.tsx b/apps/frontend/src/app/dashboard/layout.tsx
index 9aaa9d1..dd0d9b8 100644
--- a/apps/frontend/src/app/dashboard/layout.tsx
+++ b/apps/frontend/src/app/dashboard/layout.tsx
@@ -13,7 +13,7 @@ export default async function DashboardLayout({
   }
 
   return (
-    <div className="min-h-screen bg-[#0b1220] text-foreground">
+    <div className="min-h-screen bg-sidebar text-foreground">
       {children}
     </div>
   )
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
index bf8c825..d0e7085 100644
--- a/apps/frontend/src/app/layout.tsx
+++ b/apps/frontend/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default async function RootLayout({
 
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="min-h-screen bg-[#0b1220]">
+      <body className="min-h-screen bg-main">
         < ClientProviders initialUser={user} >
           {children}
         </ClientProviders >
diff --git a/apps/frontend/src/app/settings/_components/SettingsSidebar.tsx b/apps/frontend/src/app/settings/_components/SettingsSidebar.tsx
index 65a9646..d239fe2 100644
--- a/apps/frontend/src/app/settings/_components/SettingsSidebar.tsx
+++ b/apps/frontend/src/app/settings/_components/SettingsSidebar.tsx
@@ -2,12 +2,18 @@
 
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
+import { useState } from 'react'
 import { api, cn } from '@openchat/lib'
-import { User, Shield, Lock, Bell, Trash2, LogOut, ArrowLeft, Keyboard } from 'lucide-react'
+import { User, Shield, Lock, Bell, Trash2, LogOut, ArrowLeft, Keyboard, Menu, X } from 'lucide-react'
 import { useUserStore } from '@/app/stores/user-store'
 import { useChatsStore } from '@/app/stores/chat-store'
 import { useFriendsStore } from '@/app/stores/friends-store'
 import { Button } from 'packages/ui'
+import {
+  Sheet,
+  SheetContent,
+  SheetTrigger,
+} from 'packages/ui'
 
 const tabs = [
   { name: 'Profile', href: '/settings/profile', icon: User },
@@ -18,7 +24,7 @@ const tabs = [
   { name: 'Account', href: '/settings/account', icon: Trash2 },
 ]
 
-export default function SettingsSidebar() {
+function SettingsNav({ onLinkClick }: { onLinkClick?: () => void }) {
   const pathname = usePathname()
   const router = useRouter()
 
@@ -36,23 +42,21 @@ export default function SettingsSidebar() {
     useChatsStore.getState().reset()
     useFriendsStore.getState().reset()
 
-    // Use window.location.href to ensure a clean state and clear server-side caches
     window.location.href = '/auth'
   }
 
   return (
-    <div className="fixed min-h-[100vh] w-64 bg-[#0a101c] border-r border-white/5 p-6 flex flex-col">
+    <div className="flex flex-col h-full p-6">
       <div className="mb-6">
         <Button
           variant="ghost"
           onClick={() => router.push('/zone')}
-          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-white transition"
+          className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition"
         >
           <ArrowLeft size={16} />
           Back
         </Button>
       </div>
-      {/* Tabs */}
       <div className="space-y-2 flex-1">
         {tabs.map((tab) => {
           const Icon = tab.icon
@@ -62,11 +66,12 @@ export default function SettingsSidebar() {
             <Link
               key={tab.name}
               href={tab.href}
+              onClick={onLinkClick}
               className={cn(
                 'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all duration-200',
                 active
                   ? 'bg-primary/15 text-primary border-l-2 border-primary'
-                  : 'text-muted-foreground hover:bg-white/5 hover:text-white'
+                  : 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
               )}
             >
               <Icon size={16} />
@@ -75,20 +80,40 @@ export default function SettingsSidebar() {
           )
         })}
       </div>
-
-      {/* Divider */}
-      <div className="h-px bg-white/5 my-4" />
-
-      {/* Logout */}
+      <div className="h-px bg-border my-4" />
       <Button
         variant="destructive"
         onClick={handleLogout}
-        className="flex justify-start gap-3 px-3 py-2 rounded-lg text-sm text-red-400 transition-all duration-200 hover:bg-red-500/10 hover:text-red-500"
+        className="flex justify-start gap-3 px-3 py-2 rounded-lg text-sm text-red-500 transition-all duration-200 hover:bg-red-500/10"
       >
         <LogOut size={16} />
         Logout
       </Button>
-
     </div>
   )
 }
+
+export default function SettingsSidebar() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <div className="hidden md:flex fixed min-h-[100vh] w-64 bg-sidebar border-r">
+        <SettingsNav />
+      </div>
+
+      <div className="md:hidden fixed top-4 left-4 z-50">
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="rounded-lg">
+              <Menu size={20} />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="p-0 w-[280px] bg-sidebar border-r">
+            <SettingsNav onLinkClick={() => setOpen(false)} />
+          </SheetContent>
+        </Sheet>
+      </div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/app/settings/account/page.tsx b/apps/frontend/src/app/settings/account/page.tsx
index 6c4a443..1486955 100644
--- a/apps/frontend/src/app/settings/account/page.tsx
+++ b/apps/frontend/src/app/settings/account/page.tsx
@@ -46,7 +46,7 @@ export default function AccountPage() {
       </div>
 
       {/* Sessions */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Sessions</CardTitle>
           <CardDescription>
@@ -75,7 +75,7 @@ export default function AccountPage() {
       </Card>
 
       {/* Data */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Your Data</CardTitle>
           <CardDescription>
diff --git a/apps/frontend/src/app/settings/keyboard/page.tsx b/apps/frontend/src/app/settings/keyboard/page.tsx
index 6ad5bbf..396d224 100644
--- a/apps/frontend/src/app/settings/keyboard/page.tsx
+++ b/apps/frontend/src/app/settings/keyboard/page.tsx
@@ -102,7 +102,7 @@ function ShortcutRecorder({ action, value, onChange, otherShortcut }: ShortcutRe
 
   return (
     <div className="flex items-center justify-between gap-4">
-      <span className="text-sm font-medium text-zinc-200">{label}</span>
+      <span className="text-sm font-medium">{label}</span>
       <div className="flex items-center gap-2">
         {recording ? (
           <div className="flex items-center gap-1.5 px-3 py-1.5 bg-purple-600/20 border border-purple-500/50 rounded-md min-w-[120px]">
@@ -113,11 +113,11 @@ function ShortcutRecorder({ action, value, onChange, otherShortcut }: ShortcutRe
           </div>
         ) : value ? (
           <div className="flex items-center gap-1 px-3 py-1.5 bg-white/5 border border-white/10 rounded-md min-w-[120px]">
-            <Keyboard className="w-3.5 h-3.5 text-zinc-400" />
-            <span className="text-sm text-zinc-200 font-mono">{value}</span>
+            <Keyboard className="w-3.5 h-3.5 text-muted-foreground" />
+            <span className="text-sm font-mono">{value}</span>
             <button
               onClick={clearShortcut}
-              className="ml-1 p-0.5 hover:bg-white/10 rounded text-zinc-500 hover:text-zinc-300 transition-colors"
+              className="ml-1 p-0.5 hover:bg-muted rounded text-muted-foreground hover:text-foreground transition-colors"
               title="Clear shortcut"
             >
               <X className="w-3 h-3" />
@@ -126,7 +126,7 @@ function ShortcutRecorder({ action, value, onChange, otherShortcut }: ShortcutRe
         ) : (
           <button
             onClick={startRecording}
-            className="px-3 py-1.5 text-sm text-zinc-400 hover:text-white bg-white/5 hover:bg-white/10 border border-white/10 rounded-md transition-colors min-w-[120px]"
+            className="px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground bg-muted hover:bg-muted/50 border-border rounded-md transition-colors min-w-[120px]"
           >
             Not set
           </button>
@@ -170,7 +170,7 @@ export default function KeyboardShortcutsPage() {
         </p>
       </div>
 
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Keyboard className="w-5 h-5" />
@@ -197,11 +197,11 @@ export default function KeyboardShortcutsPage() {
         </CardContent>
       </Card>
 
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle className="text-base">Tips</CardTitle>
         </CardHeader>
-        <CardContent className="space-y-2 text-sm text-zinc-400">
+        <CardContent className="space-y-2 text-sm text-muted-foreground">
           <p>• Shortcuts work only when the app window is focused</p>
           <p>• Shortcuts are disabled when typing in input fields</p>
           <p>• Press Escape to cancel recording</p>
diff --git a/apps/frontend/src/app/settings/layout.tsx b/apps/frontend/src/app/settings/layout.tsx
index e33f08f..05ec37b 100644
--- a/apps/frontend/src/app/settings/layout.tsx
+++ b/apps/frontend/src/app/settings/layout.tsx
@@ -18,11 +18,11 @@ export default async function SettingsLayout({
 
   return (
     <SettingsClientWrapper>
-      <div className="flex min-h-screen bg-[#0b1220]">
+      <div className="flex min-h-screen bg-main">
         <SettingsSidebar />
 
-        <div className="flex-1 flex justify-center">
-          <div className="w-full max-w-4xl p-12">
+        <div className="flex-1 flex justify-center md:pl-64">
+          <div className="w-full max-w-4xl p-4 md:p-12">
             {children}
           </div>
         </div>
diff --git a/apps/frontend/src/app/settings/notifications/page.tsx b/apps/frontend/src/app/settings/notifications/page.tsx
index 58be871..dbc7601 100644
--- a/apps/frontend/src/app/settings/notifications/page.tsx
+++ b/apps/frontend/src/app/settings/notifications/page.tsx
@@ -51,7 +51,7 @@ export default function NotificationsPage() {
       </div>
 
       {/* In-App */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>In-App Notifications</CardTitle>
           <CardDescription>
@@ -80,7 +80,7 @@ export default function NotificationsPage() {
       </Card>
 
       {/* Email */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Email Notifications</CardTitle>
           <CardDescription>
@@ -128,7 +128,7 @@ export default function NotificationsPage() {
       </Card>
 
       {/* Sound */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Sound</CardTitle>
           <CardDescription>
diff --git a/apps/frontend/src/app/settings/privacy/page.tsx b/apps/frontend/src/app/settings/privacy/page.tsx
index bd83e8f..7faa98a 100644
--- a/apps/frontend/src/app/settings/privacy/page.tsx
+++ b/apps/frontend/src/app/settings/privacy/page.tsx
@@ -50,7 +50,7 @@ export default function PrivacyPage() {
       </div>
 
       {/* Account Visibility */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Account Visibility</CardTitle>
           <CardDescription>
@@ -79,7 +79,7 @@ export default function PrivacyPage() {
       </Card>
 
       {/* Activity Status */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Activity Status</CardTitle>
           <CardDescription>
@@ -108,7 +108,7 @@ export default function PrivacyPage() {
       </Card>
 
       {/* Messaging */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Messaging</CardTitle>
           <CardDescription>
diff --git a/apps/frontend/src/app/settings/profile/page.tsx b/apps/frontend/src/app/settings/profile/page.tsx
index b4492ab..fd56a01 100644
--- a/apps/frontend/src/app/settings/profile/page.tsx
+++ b/apps/frontend/src/app/settings/profile/page.tsx
@@ -72,7 +72,7 @@ export default function ProfilePage() {
            <Skeleton className="h-8 w-48" />
            <Skeleton className="h-4 w-64" />
          </div>
-         <Card className="bg-[#111a2b] border border-white/5">
+         <Card className="bg-surface border-border">
            <CardContent className="h-40 flex items-center gap-6">
               <Skeleton className="h-28 w-28 rounded-full" />
               <div className="space-y-2 flex-1">
@@ -139,6 +139,13 @@ export default function ProfilePage() {
   }
 
   const handleAvatarChange = async (file: File) => {
+    const MAX_SIZE = 2 * 1024 * 1024 // 2MB
+    
+    if (file.size > MAX_SIZE) {
+      toast.error('File too large. Maximum size is 2MB')
+      return
+    }
+
     const preview = URL.createObjectURL(file)
 
     updateUser({ avatar: preview }) // optimistic preview
@@ -204,7 +211,7 @@ export default function ProfilePage() {
       </div>
 
       {/* Avatar Card */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Profile Picture</CardTitle>
           <CardDescription>
@@ -269,7 +276,7 @@ export default function ProfilePage() {
       </Card>
 
       {/* Personal Info Card */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Personal Information</CardTitle>
           <CardDescription>
@@ -305,7 +312,7 @@ export default function ProfilePage() {
               <Textarea
                 {...register('bio')}
                 rows={4}
-                className="bg-[#0f172a]/40 border-white/10 focus:border-purple-500"
+                className="bg-background border-border focus:border-primary"
               />
             </div>
 
diff --git a/apps/frontend/src/app/settings/security/page.tsx b/apps/frontend/src/app/settings/security/page.tsx
index 8f92812..7637b78 100644
--- a/apps/frontend/src/app/settings/security/page.tsx
+++ b/apps/frontend/src/app/settings/security/page.tsx
@@ -37,7 +37,7 @@ export default function SecurityPage() {
       </div>
 
       {/* Change Password */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Change Password</CardTitle>
           <CardDescription>
@@ -79,7 +79,7 @@ export default function SecurityPage() {
       </Card>
 
       {/* Active Sessions */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Active Sessions</CardTitle>
           <CardDescription>
@@ -88,7 +88,7 @@ export default function SecurityPage() {
         </CardHeader>
 
         <CardContent className="space-y-4">
-          <div className="flex items-center justify-between p-4 rounded-lg bg-[#0f172a]/40 border border-white/5">
+          <div className="flex items-center justify-between p-4 rounded-lg bg-background border-border">
             <div>
               <p className="text-sm font-medium">
                 Chrome • Linux
@@ -103,7 +103,7 @@ export default function SecurityPage() {
             </Button>
           </div>
 
-          <div className="flex items-center justify-between p-4 rounded-lg bg-[#0f172a]/40 border border-white/5">
+          <div className="flex items-center justify-between p-4 rounded-lg bg-background border-border">
             <div>
               <p className="text-sm font-medium">
                 Safari • iPhone
@@ -121,7 +121,7 @@ export default function SecurityPage() {
       </Card>
 
       {/* Two Factor */}
-      <Card className="bg-[#111a2b] border border-white/5">
+      <Card className="bg-surface border-border">
         <CardHeader>
           <CardTitle>Two-Factor Authentication</CardTitle>
           <CardDescription>
diff --git a/apps/frontend/src/app/zone/_components/chat/EmojiPicker.tsx b/apps/frontend/src/app/zone/_components/chat/EmojiPicker.tsx
new file mode 100644
index 0000000..bef468a
--- /dev/null
+++ b/apps/frontend/src/app/zone/_components/chat/EmojiPicker.tsx
@@ -0,0 +1,118 @@
+'use client'
+
+import { useState, useEffect, useRef, useCallback, Suspense, lazy } from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@openchat/lib'
+
+const Picker = lazy(() => import('@emoji-mart/react'))
+
+function PickerFallback() {
+  return (
+    <div className="w-72 h-80 bg-background rounded-2xl border border-border flex items-center justify-center">
+      <span className="text-muted-foreground text-sm animate-pulse">Loading...</span>
+    </div>
+  )
+}
+
+type EmojiPickerProps = {
+  onSelect: (emoji: string) => void
+  onClose: () => void
+  className?: string
+}
+
+export default function EmojiPicker({ onSelect, onClose, className }: EmojiPickerProps) {
+  const [isMounted, setIsMounted] = useState(false)
+  const pickerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  const handleClickOutside = useCallback((event: MouseEvent) => {
+    const target = event.target as Node
+    if (pickerRef.current && !pickerRef.current.contains(target)) {
+      onClose()
+    }
+  }, [onClose])
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      onClose()
+    }
+  }, [onClose])
+
+  useEffect(() => {
+    if (!isMounted) return
+    
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleKeyDown)
+    
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isMounted, handleClickOutside, handleKeyDown])
+
+  if (!isMounted) return null
+
+  return (
+    <div
+      ref={pickerRef}
+      className={cn(
+        'fixed bottom-[5.5rem] right-4 md:right-8 z-[100] animate-in fade-in slide-in-from-bottom-2 duration-150',
+        className
+      )}
+    >
+      <div className="relative">
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 z-10 p-1.5 rounded-full bg-background/90 hover:bg-muted transition-colors shadow-lg border border-border"
+          aria-label="Close emoji picker"
+        >
+          <X className="w-4 h-4" />
+        </button>
+        
+        <Suspense fallback={<PickerFallback />}>
+          <Picker
+            data={async () => {
+              const module = await import('@emoji-mart/data')
+              return module.default
+            }}
+            onEmojiClick={(emoji: { native: string }) => {
+              onSelect(emoji.native)
+              onClose()
+            }}
+            theme="dark"
+            previewPosition="none"
+            skinTonePosition="none"
+            set="native"
+            perLine={8}
+            emojiSize={22}
+            emojiButtonSize={32}
+            initialCategory="people"
+            I18n={{
+              search: 'Search...',
+              categories: {
+                activity: 'Activity',
+                custom: 'Custom',
+                flags: 'Flags',
+                foods: 'Food',
+                nature: 'Nature',
+                objects: 'Objects',
+                people: 'Smileys',
+                symbols: 'Symbols',
+                travel: 'Travel'
+              }
+            }}
+            style={{
+              backgroundColor: 'hsl(var(--background) / 1)',
+              borderRadius: '14px',
+              border: '1px solid hsl(var(--border) / 1)',
+              width: '320px'
+            }}
+          />
+        </Suspense>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/app/zone/_components/chat/GifPicker.tsx b/apps/frontend/src/app/zone/_components/chat/GifPicker.tsx
index 6a7b52b..150bb61 100644
--- a/apps/frontend/src/app/zone/_components/chat/GifPicker.tsx
+++ b/apps/frontend/src/app/zone/_components/chat/GifPicker.tsx
@@ -7,10 +7,12 @@ import { cn } from '@openchat/lib'
 
 export default function GifPicker({ 
   onSelect, 
-  onClose 
+  onClose,
+  autoClose = true
 }: { 
   onSelect: (url: string) => void,
   onClose: () => void
+  autoClose?: boolean
 }) {
   const [search, setSearch] = useState('')
   
diff --git a/apps/frontend/src/app/zone/_components/voice/VoiceParticipants.tsx b/apps/frontend/src/app/zone/_components/voice/VoiceParticipants.tsx
index 758adda..14bfdb0 100644
--- a/apps/frontend/src/app/zone/_components/voice/VoiceParticipants.tsx
+++ b/apps/frontend/src/app/zone/_components/voice/VoiceParticipants.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import { Avatar, AvatarFallback } from 'packages/ui'
-import { getAvatarUrl, cn } from '@openchat/lib'
+import { cn } from '@openchat/lib'
 import {
     type ChannelVoiceParticipant,
     useCallStore,
 } from '@/app/stores/call-store'
-import { Headphones, MicOff, HeadphoneOff } from 'lucide-react'
+import { MicOff, HeadphoneOff } from 'lucide-react'
+import { UserAvatar } from '@/components/UserAvatar'
 
 export default function VoiceParticipants({
     participants,
@@ -19,7 +19,6 @@ export default function VoiceParticipants({
     return (
         <div className="ml-9 mt-0.5 space-y-0.5 pb-2">
             {participants.map((participant) => {
-                const avatarUrl = getAvatarUrl(participant.avatar)
                 const isSpeaking = speakingUsers.has(participant.userId)
 
                 return (
@@ -28,27 +27,18 @@ export default function VoiceParticipants({
                         className="group flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 cursor-pointer transition-colors"
                     >
                         <div className="relative">
-                            <Avatar
+                            <UserAvatar
+                                name={participant.username}
+                                avatar={participant.avatar}
                                 className={cn(
                                     'h-6 w-6 transition-all duration-200 ring-offset-2 ring-offset-background',
                                     isSpeaking
                                         ? 'ring-2 ring-emerald-500'
                                         : 'ring-0'
                                 )}
-                            >
-                                {avatarUrl ? (
-                                    <img
-                                        src={avatarUrl}
-                                        alt={participant.username}
-                                        className="h-full w-full object-cover rounded-full"
-                                    />
-                                ) : (
-                                    <AvatarFallback className="bg-white/10 text-[10px] font-bold text-zinc-300">
-                                        {participant.username?.[0]?.toUpperCase() ??
-                                            'U'}
-                                    </AvatarFallback>
-                                )}
-                            </Avatar>
+                                fallbackText={participant.username}
+                                fallbackClassName="bg-white/10 text-[10px] font-bold text-zinc-300"
+                            />
                             {isSpeaking && (
                                 <div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 bg-emerald-500 rounded-full border-2 border-[#1e1f22] animate-pulse" />
                             )}
diff --git a/apps/frontend/src/app/zone/_components/zones/CreateZoneModal.tsx b/apps/frontend/src/app/zone/_components/zones/CreateZoneModal.tsx
index 7dc2332..f6c1dd8 100644
--- a/apps/frontend/src/app/zone/_components/zones/CreateZoneModal.tsx
+++ b/apps/frontend/src/app/zone/_components/zones/CreateZoneModal.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from "react"
 import { Camera, Plus, X } from "lucide-react"
+import { toast } from "sonner"
 
 type ModalProps = {
   open: boolean
@@ -45,6 +46,10 @@ export function CreateZoneModal({ open, onClose, onCreate }: ModalProps) {
       setError("Zone name is required")
       return
     }
+    if (name.length > 50) {
+      setError("Zone name must be 50 characters or less")
+      return
+    }
     setIsSubmitting(true)
     onCreate(name, avatar)
     onClose()
@@ -148,13 +153,21 @@ export function CreateZoneModal({ open, onClose, onCreate }: ModalProps) {
                   disabled={isSubmitting}
                   onChange={(e) => {
                     const file = e.target.files?.[0]
-                    if (file) setAvatar(file)
+                    if (file) {
+                      const MAX_SIZE = 2 * 1024 * 1024
+                      if (file.size > MAX_SIZE) {
+                        toast.error("File too large. Maximum size is 2MB")
+                        return
+                      }
+                      setAvatar(file)
+                    }
                   }}
                 />
 
                 <p className="text-xs text-white/40 font-medium uppercase tracking-widest">
                   Upload Avatar
                 </p>
+                <p className="text-[10px] text-white/30 mt-1">JPG, PNG up to 2MB</p>
               </div>
 
               <div className="space-y-2">
diff --git a/apps/frontend/src/app/zone/_components/zones/ZoneDashboardSheet.tsx b/apps/frontend/src/app/zone/_components/zones/ZoneDashboardSheet.tsx
deleted file mode 100644
index 984a48f..0000000
--- a/apps/frontend/src/app/zone/_components/zones/ZoneDashboardSheet.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-'use client'
-
-import { useEffect, useMemo, useState } from 'react'
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-  Button,
-  Input,
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from 'packages/ui'
-import { getAvatarUrl, socket } from '@openchat/lib'
-import { useStartDirectMessageMutation } from '@/features/chat/mutations'
-import { useCreateChannelMutation } from '@/features/channels/mutations'
-import { useChannels } from '@/features/channels/queries'
-import { useCreateZoneInviteMutation, useRemoveZoneMemberMutation, useUpdateZoneMemberRoleMutation, useUpdateZoneMutation } from '@/features/zones/mutations'
-import { useZoneMembers } from '@/features/zones/queries'
-import { apiClient } from '@/lib/api/client'
-import { useUser } from '@/features/user/queries'
-
-type Friend = {
-  id: number
-  username: string
-  avatar?: string | null
-}
-
-export default function ZoneDashboardSheet({
-  zonePublicId,
-  zoneName,
-  zoneAvatar,
-  open,
-  onOpenChange,
-  onZoneUpdated,
-}: {
-  zonePublicId: string
-  zoneName: string
-  zoneAvatar?: string | null
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  onZoneUpdated?: (zone: { name: string; avatar: string | null }) => void
-}) {
-  const { data: currentUser } = useUser()
-  const { data: members = [] } = useZoneMembers(zonePublicId, open)
-  const { data: channels = [] } = useChannels(zonePublicId, open)
-  const updateZoneMutation = useUpdateZoneMutation(zonePublicId)
-  const removeMemberMutation = useRemoveZoneMemberMutation(zonePublicId)
-  const updateRoleMutation = useUpdateZoneMemberRoleMutation(zonePublicId)
-  const createChannelMutation = useCreateChannelMutation(zonePublicId)
-  const createInviteMutation = useCreateZoneInviteMutation(zonePublicId)
-  const startDirectMessageMutation = useStartDirectMessageMutation()
-
-  const [friends, setFriends] = useState<Friend[]>([])
-  const [inviteSearch, setInviteSearch] = useState('')
-  const [newChannelName, setNewChannelName] = useState('')
-  const [newChannelType, setNewChannelType] = useState<'TEXT' | 'VOICE'>('TEXT')
-  const [draftZoneName, setDraftZoneName] = useState(zoneName)
-  const [draftZoneAvatar, setDraftZoneAvatar] = useState<string | null>(zoneAvatar ?? null)
-  const [avatarFile, setAvatarFile] = useState<File | null>(null)
-  const [sendingInviteFor, setSendingInviteFor] = useState<number | 'general' | null>(null)
-  const [sentInviteFor, setSentInviteFor] = useState<number | 'general' | null>(null)
-
-  useEffect(() => {
-    setDraftZoneName(zoneName)
-  }, [zoneName])
-
-  useEffect(() => {
-    setDraftZoneAvatar(zoneAvatar ?? null)
-  }, [zoneAvatar])
-
-  useEffect(() => {
-    if (!open) return
-
-    let cancelled = false
-
-    const loadFriends = async () => {
-      try {
-        const data = await apiClient.get<{ friends: Friend[] }>('/friends/list')
-
-        if (!cancelled) {
-          setFriends(data.friends ?? [])
-        }
-      } catch {
-        if (!cancelled) {
-          setFriends([])
-        }
-      }
-    }
-
-    void loadFriends()
-
-    return () => {
-      cancelled = true
-    }
-  }, [open])
-
-  const myMembership = useMemo(
-    () => members.find((member) => member.id === currentUser?.id) ?? null,
-    [currentUser?.id, members],
-  )
-
-  const manageableFriends = useMemo(() => {
-    const memberIds = new Set(members.map((member) => member.id))
-    return friends.filter((friend) => !memberIds.has(friend.id))
-  }, [friends, members])
-
-  const filteredFriends = useMemo(() => {
-    const query = inviteSearch.trim().toLowerCase()
-    if (!query) return manageableFriends
-    return manageableFriends.filter((friend) => friend.username.toLowerCase().includes(query))
-  }, [inviteSearch, manageableFriends])
-
-  const canManageMembers = myMembership?.role === 'OWNER' || myMembership?.role === 'ADMIN'
-  const canManageRoles = myMembership?.role === 'OWNER'
-  const canCreateChannels = canManageMembers
-  const canManageZoneInfo = canManageMembers
-
-  const updateZoneInfo = async () => {
-    const nextName = draftZoneName.trim()
-    if (!canManageZoneInfo || (!nextName && !avatarFile)) return
-
-    const zone = await updateZoneMutation.mutateAsync({
-      name: nextName,
-      avatar: avatarFile,
-    })
-
-    setDraftZoneName(zone.name)
-    setDraftZoneAvatar(zone.avatar ?? null)
-    setAvatarFile(null)
-    onZoneUpdated?.({ name: zone.name, avatar: zone.avatar ?? null })
-  }
-
-  const createInviteLink = async () => {
-    const invite = await createInviteMutation.mutateAsync()
-    return `${window.location.origin}/zone/invite/${invite.code}`
-  }
-
-  const copyInviteLink = async (target: 'general') => {
-    setSendingInviteFor(target)
-
-    try {
-      const link = await createInviteLink()
-      await navigator.clipboard.writeText(link)
-      setSentInviteFor(target)
-      window.setTimeout(() => {
-        setSentInviteFor((current) => (current === target ? null : current))
-      }, 2000)
-    } finally {
-      setSendingInviteFor(null)
-    }
-  }
-
-  const sendInviteToFriend = async (friend: Friend) => {
-    setSendingInviteFor(friend.id)
-
-    try {
-      const link = await createInviteLink()
-      const chatPublicId = await startDirectMessageMutation.mutateAsync(friend.id)
-
-      socket.emit('join-room', { chatPublicId })
-      socket.emit('private-message', {
-        chatPublicId,
-        text: `Join my zone: ${link}`,
-      })
-
-      setSentInviteFor(friend.id)
-      window.setTimeout(() => {
-        setSentInviteFor((current) => (current === friend.id ? null : current))
-      }, 2000)
-    } finally {
-      setSendingInviteFor(null)
-    }
-  }
-
-  return (
-    <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right" className="w-full overflow-y-auto border-white/10 bg-[#0f172a] text-white sm:max-w-xl">
-        <SheetHeader>
-          <SheetTitle>{zoneName} Dashboard</SheetTitle>
-          <SheetDescription>
-            Manage channels, members, and permissions in real time.
-          </SheetDescription>
-        </SheetHeader>
-
-        <div className="mt-6 space-y-8">
-          {canManageZoneInfo && (
-            <section className="space-y-3">
-              <div>
-                <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-zinc-400">Zone Profile</h3>
-                <p className="text-sm text-zinc-500">Rename the zone or upload a new icon.</p>
-              </div>
-
-              <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-                <div className="flex items-center gap-4">
-                  <Avatar className="h-16 w-16 ring-1 ring-white/10">
-                    <AvatarImage src={getAvatarUrl(draftZoneAvatar)} />
-                    <AvatarFallback className="bg-white/10 text-zinc-100">
-                      {draftZoneName?.[0]?.toUpperCase() ?? '#'}
-                    </AvatarFallback>
-                  </Avatar>
-
-                  <div className="flex-1 space-y-2">
-                    <Input
-                      value={draftZoneName}
-                      onChange={(event) => setDraftZoneName(event.target.value)}
-                      placeholder="Zone name"
-                      className="border-white/10 bg-white/[0.04] text-white"
-                    />
-                    <Input
-                      type="file"
-                      accept="image/*"
-                      className="border-white/10 bg-white/[0.04] text-white"
-                      onChange={(event) => {
-                        const file = event.target.files?.[0] ?? null
-                        setAvatarFile(file)
-                        if (file) {
-                          setDraftZoneAvatar(URL.createObjectURL(file))
-                        }
-                      }}
-                    />
-                  </div>
-                </div>
-
-                <div className="mt-3 flex justify-end">
-                  <Button onClick={() => { void updateZoneInfo() }} disabled={updateZoneMutation.isPending}>
-                    Save zone
-                  </Button>
-                </div>
-              </div>
-            </section>
-          )}
-
-          <section className="space-y-3">
-            <div>
-              <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-zinc-400">Channels</h3>
-              <p className="text-sm text-zinc-500">All rooms in this zone update live.</p>
-            </div>
-
-            <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-3">
-              {channels.map((channel) => (
-                <div key={channel.publicId} className="flex items-center justify-between rounded-xl bg-white/[0.03] px-3 py-2">
-                  <span className="font-medium text-zinc-100">#{channel.name}</span>
-                  <span className="text-xs uppercase tracking-[0.2em] text-zinc-500">{channel.type}</span>
-                </div>
-              ))}
-            </div>
-
-            {canCreateChannels && (
-              <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
-                <p className="mb-3 text-sm font-medium text-zinc-200">Create channel</p>
-                <div className="flex gap-2">
-                  <Input
-                    value={newChannelName}
-                    onChange={(event) => setNewChannelName(event.target.value)}
-                    placeholder="new-room"
-                    className="border-white/10 bg-white/[0.04] text-white"
-                  />
-                  <select
-                    value={newChannelType}
-                    onChange={(event) => setNewChannelType(event.target.value as 'TEXT' | 'VOICE')}
-                    className="rounded-md border border-white/10 bg-white/[0.04] px-3 text-sm text-white"
-                  >
-                    <option value="TEXT">Text</option>
-                    <option value="VOICE">Voice</option>
-                  </select>
-                  <Button
-                    onClick={() => {
-                      void createChannelMutation.mutateAsync({
-                        name: newChannelName,
-                        type: newChannelType,
-                      }).then(() => setNewChannelName(''))
-                    }}
-                    disabled={!newChannelName.trim() || createChannelMutation.isPending}
-                  >
-                    Create
-                  </Button>
-                </div>
-              </div>
-            )}
-          </section>
-
-          <section className="space-y-3">
-            <div>
-              <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-zinc-400">Members</h3>
-              <p className="text-sm text-zinc-500">Change roles or remove members from the zone.</p>
-            </div>
-
-            <div className="space-y-2 rounded-2xl border border-white/10 bg-white/[0.03] p-3">
-              {members.map((member) => {
-                const canRemove =
-                  canManageMembers &&
-                  member.id !== currentUser?.id &&
-                  member.role !== 'OWNER' &&
-                  !(myMembership?.role === 'ADMIN' && member.role === 'ADMIN')
-
-                const canEditRole =
-                  canManageRoles &&
-                  member.id !== currentUser?.id &&
-                  member.role !== 'OWNER'
-
-                return (
-                  <div key={member.id} className="flex items-center gap-3 rounded-xl bg-white/[0.03] px-3 py-2">
-                    <Avatar className="h-10 w-10 ring-1 ring-white/10">
-                      <AvatarImage src={getAvatarUrl(member.avatar)} />
-                      <AvatarFallback className="bg-white/10 text-zinc-100">
-                        {member.username[0]?.toUpperCase()}
-                      </AvatarFallback>
-                    </Avatar>
-
-                    <div className="min-w-0 flex-1">
-                      <p className="truncate font-medium text-zinc-100">{member.username}</p>
-                      <p className="text-xs uppercase tracking-[0.2em] text-zinc-500">{member.role}</p>
-                    </div>
-
-                    {canEditRole ? (
-                      <select
-                        value={member.role}
-                        onChange={(event) => {
-                          void updateRoleMutation.mutateAsync({
-                            userId: member.id,
-                            role: event.target.value as 'ADMIN' | 'MEMBER',
-                          })
-                        }}
-                        className="rounded-md border border-white/10 bg-white/[0.04] px-3 py-2 text-sm text-white"
-                      >
-                        <option value="ADMIN">ADMIN</option>
-                        <option value="MEMBER">MEMBER</option>
-                      </select>
-                    ) : (
-                      <div className="rounded-md border border-white/10 bg-white/[0.04] px-3 py-2 text-xs text-zinc-400">
-                        {member.role}
-                      </div>
-                    )}
-
-                    {canRemove && (
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => {
-                          void removeMemberMutation.mutateAsync(member.id)
-                        }}
-                      >
-                        Remove
-                      </Button>
-                    )}
-                  </div>
-                )
-              })}
-            </div>
-          </section>
-
-          {canManageMembers && (
-            <section className="space-y-3">
-              <div>
-                <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-zinc-400">Invite By Link</h3>
-                <p className="text-sm text-zinc-500">Nobody gets added directly. They have to open the invite link and join themselves.</p>
-              </div>
-
-              <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3">
-                <div className="mb-3 flex items-center justify-between rounded-xl bg-white/[0.03] px-3 py-3">
-                  <div>
-                    <p className="text-sm font-medium text-zinc-100">General invite link</p>
-                    <p className="text-xs text-zinc-500">Copy it and send it anywhere in DM.</p>
-                  </div>
-                  <Button
-                    size="sm"
-                    onClick={() => {
-                      void copyInviteLink('general')
-                    }}
-                    disabled={sendingInviteFor === 'general'}
-                  >
-                    {sentInviteFor === 'general' ? 'Copied' : 'Copy Link'}
-                  </Button>
-                </div>
-
-                <Input
-                  value={inviteSearch}
-                  onChange={(event) => setInviteSearch(event.target.value)}
-                  placeholder="Search friends..."
-                  className="mb-3 border-white/10 bg-white/[0.04] text-white"
-                />
-
-                <div className="space-y-2">
-                  {filteredFriends.map((friend) => (
-                    <div key={friend.id} className="flex items-center gap-3 rounded-xl bg-white/[0.03] px-3 py-2">
-                      <Avatar className="h-9 w-9 ring-1 ring-white/10">
-                        <AvatarImage src={getAvatarUrl(friend.avatar)} />
-                        <AvatarFallback className="bg-white/10 text-zinc-100">
-                          {friend.username[0]?.toUpperCase()}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span className="flex-1 truncate text-sm font-medium text-zinc-100">{friend.username}</span>
-                      <Button
-                        size="sm"
-                        onClick={() => {
-                          void sendInviteToFriend(friend)
-                        }}
-                        disabled={sendingInviteFor === friend.id}
-                      >
-                        {sentInviteFor === friend.id ? 'Sent' : 'Send Invite'}
-                      </Button>
-                    </div>
-                  ))}
-
-                  {filteredFriends.length === 0 && (
-                    <p className="py-6 text-center text-sm text-zinc-500">
-                      No available friends to add.
-                    </p>
-                  )}
-                </div>
-              </div>
-            </section>
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
-  )
-}
diff --git a/apps/frontend/src/app/zone/_components/zones/ZoneDropdownMenu.tsx b/apps/frontend/src/app/zone/_components/zones/ZoneDropdownMenu.tsx
index b8f3487..c10c537 100644
--- a/apps/frontend/src/app/zone/_components/zones/ZoneDropdownMenu.tsx
+++ b/apps/frontend/src/app/zone/_components/zones/ZoneDropdownMenu.tsx
@@ -17,7 +17,7 @@ import {
     useUpdateZoneMutation,
 } from '@/features/zones/mutations'
 import { useUser } from '@/features/user/queries'
-import { ZoneSettingsModal } from './ZoneSettingsModal'
+import ZoneSettings from './ZoneSettings'
 
 type ZoneDropdownMenuProps = {
     zonePublicId: string
@@ -160,7 +160,6 @@ export function ZoneDropdownMenu({
                                         </button>
                                     )}
                                 </div>
-
                                 <div className="border-t border-white/10 py-1">
                                     {isOwner ? (
                                         <button
@@ -286,9 +285,9 @@ export function ZoneDropdownMenu({
                 </div>
             )}
 
-            <ZoneSettingsModal
+            <ZoneSettings
                 open={showSettings}
-                onClose={() => setShowSettings(false)}
+                onOpenChange={(open) => setShowSettings(open)}
                 zonePublicId={zonePublicId}
             />
         </>
diff --git a/apps/frontend/src/app/zone/_components/zones/ZoneSettings.tsx b/apps/frontend/src/app/zone/_components/zones/ZoneSettings.tsx
new file mode 100644
index 0000000..12677d8
--- /dev/null
+++ b/apps/frontend/src/app/zone/_components/zones/ZoneSettings.tsx
@@ -0,0 +1,626 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  Input,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from 'packages/ui'
+import { getAvatarUrl, socket } from '@openchat/lib'
+import { useStartDirectMessageMutation } from '@/features/chat/mutations'
+import { useCreateChannelMutation } from '@/features/channels/mutations'
+import { useChannels } from '@/features/channels/queries'
+import { useCreateZoneInviteMutation, useRemoveZoneMemberMutation, useUpdateZoneMemberRoleMutation, useUpdateZoneMutation, useDeleteZoneMutation, useLeaveZoneMutation } from '@/features/zones/mutations'
+import { useZoneMembers, useZone } from '@/features/zones/queries'
+import { apiClient } from '@/lib/api/client'
+import { useUser } from '@/features/user/queries'
+import { toast } from 'sonner'
+import { AlertTriangle, Camera, Plus } from 'lucide-react'
+import { cn } from '@openchat/lib'
+
+type Friend = {
+  id: number
+  username: string
+  avatar?: string | null
+}
+
+type ZoneSettingsProps = {
+  zonePublicId: string
+  zoneName?: string
+  zoneAvatar?: string | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onZoneUpdated?: (zone: { name: string; avatar: string | null }) => void
+}
+
+export default function ZoneSettings({
+  zonePublicId,
+  zoneName,
+  zoneAvatar,
+  open,
+  onOpenChange,
+  onZoneUpdated,
+}: ZoneSettingsProps) {
+  const { data: zone } = useZone(zonePublicId)
+  const { data: currentUser } = useUser()
+  const { data: members = [] } = useZoneMembers(zonePublicId, open)
+  const { data: channels = [] } = useChannels(zonePublicId, open)
+  
+  const updateZoneMutation = useUpdateZoneMutation(zonePublicId)
+  const deleteZoneMutation = useDeleteZoneMutation(zonePublicId)
+  const leaveZoneMutation = useLeaveZoneMutation(zonePublicId)
+  const removeMemberMutation = useRemoveZoneMemberMutation(zonePublicId)
+  const updateRoleMutation = useUpdateZoneMemberRoleMutation(zonePublicId)
+  const createChannelMutation = useCreateChannelMutation(zonePublicId)
+  const createInviteMutation = useCreateZoneInviteMutation(zonePublicId)
+  const startDirectMessageMutation = useStartDirectMessageMutation()
+
+  const [friends, setFriends] = useState<Friend[]>([])
+  const [inviteSearch, setInviteSearch] = useState('')
+  const [newChannelName, setNewChannelName] = useState('')
+  const [newChannelType, setNewChannelType] = useState<'TEXT' | 'VOICE'>('TEXT')
+  const [draftZoneName, setDraftZoneName] = useState(zoneName ?? zone?.name ?? '')
+  const [draftZoneAvatar, setDraftZoneAvatar] = useState<string | null>(zoneAvatar ?? null)
+  const [avatarFile, setAvatarFile] = useState<File | null>(null)
+  const [sendingInviteFor, setSendingInviteFor] = useState<number | 'general' | null>(null)
+  const [sentInviteFor, setSentInviteFor] = useState<number | 'general' | null>(null)
+  
+  const [activeTab, setActiveTab] = useState<'general' | 'members' | 'channels' | 'invites' | 'danger'>('general')
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [deleteConfirmText, setDeleteConfirmText] = useState('')
+  const [showLeaveConfirm, setShowLeaveConfirm] = useState(false)
+
+  const myMembership = useMemo(
+    () => members.find((member) => member.id === currentUser?.id) ?? null,
+    [currentUser?.id, members],
+  )
+
+  const isOwner = myMembership?.role === 'OWNER'
+
+  useEffect(() => {
+    if (zoneName !== undefined) {
+      setDraftZoneName(zoneName)
+    } else if (zone?.name) {
+      setDraftZoneName(zone.name)
+    }
+  }, [zoneName, zone?.name])
+
+  useEffect(() => {
+    if (zoneAvatar !== undefined) {
+      setDraftZoneAvatar(zoneAvatar ?? null)
+    } else if (zone?.avatar !== undefined) {
+      setDraftZoneAvatar(zone.avatar ?? null)
+    }
+  }, [zoneAvatar, zone?.avatar])
+
+  useEffect(() => {
+    if (!open) return
+
+    let cancelled = false
+
+    const loadFriends = async () => {
+      try {
+        const data = await apiClient.get<{ friends: Friend[] }>('/friends/list')
+
+        if (!cancelled) {
+          setFriends(data.friends ?? [])
+        }
+      } catch {
+        if (!cancelled) {
+          setFriends([])
+        }
+      }
+    }
+
+    void loadFriends()
+
+    return () => {
+      cancelled = true
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (!open) {
+      setActiveTab('general')
+      setShowDeleteConfirm(false)
+      setDeleteConfirmText('')
+      setShowLeaveConfirm(false)
+    }
+  }, [open])
+
+  const manageableFriends = useMemo(() => {
+    const memberIds = new Set(members.map((member) => member.id))
+    return friends.filter((friend) => !memberIds.has(friend.id))
+  }, [friends, members])
+
+  const filteredFriends = useMemo(() => {
+    const query = inviteSearch.trim().toLowerCase()
+    if (!query) return manageableFriends
+    return manageableFriends.filter((friend) => friend.username.toLowerCase().includes(query))
+  }, [inviteSearch, manageableFriends])
+
+  const canManageMembers = myMembership?.role === 'OWNER' || myMembership?.role === 'ADMIN'
+  const canManageRoles = myMembership?.role === 'OWNER'
+  const canCreateChannels = canManageMembers
+  const canManageZoneInfo = canManageMembers
+
+  const handleAvatarChange = (file: File | null) => {
+    if (!file) return
+    const MAX_SIZE = 2 * 1024 * 1024
+    if (file.size > MAX_SIZE) {
+      toast.error("File too large. Maximum size is 2MB")
+      return
+    }
+    setAvatarFile(file)
+    setDraftZoneAvatar(URL.createObjectURL(file))
+  }
+
+  const updateZoneInfo = async () => {
+    const nextName = draftZoneName.trim()
+    if (!canManageZoneInfo || (!nextName && !avatarFile)) return
+    
+    if (nextName.length > 50) {
+      toast.error("Zone name must be 50 characters or less")
+      return
+    }
+
+    const zone = await updateZoneMutation.mutateAsync({
+      name: nextName,
+      avatar: avatarFile,
+    })
+
+    setDraftZoneName(zone.name)
+    setDraftZoneAvatar(zone.avatar ?? null)
+    setAvatarFile(null)
+    onZoneUpdated?.({ name: zone.name, avatar: zone.avatar ?? null })
+  }
+
+  const createInviteLink = async () => {
+    const invite = await createInviteMutation.mutateAsync()
+    return `${window.location.origin}/zone/invite/${invite.code}`
+  }
+
+  const copyInviteLink = async (target: 'general') => {
+    setSendingInviteFor(target)
+
+    try {
+      const link = await createInviteLink()
+      await navigator.clipboard.writeText(link)
+      setSentInviteFor(target)
+      window.setTimeout(() => {
+        setSentInviteFor((current) => (current === target ? null : current))
+      }, 2000)
+    } finally {
+      setSendingInviteFor(null)
+    }
+  }
+
+  const sendInviteToFriend = async (friend: Friend) => {
+    setSendingInviteFor(friend.id)
+
+    try {
+      const link = await createInviteLink()
+      const chatPublicId = await startDirectMessageMutation.mutateAsync(friend.id)
+
+      socket.emit('join-room', { chatPublicId })
+      socket.emit('private-message', {
+        chatPublicId,
+        text: `Join my zone: ${link}`,
+      })
+
+      setSentInviteFor(friend.id)
+      window.setTimeout(() => {
+        setSentInviteFor((current) => (current === friend.id ? null : current))
+      }, 2000)
+    } finally {
+      setSendingInviteFor(null)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (deleteConfirmText !== draftZoneName) return
+    try {
+      await deleteZoneMutation.mutateAsync()
+      window.location.href = '/zone/zones'
+    } catch {
+      // Error is handled by the mutation
+    }
+  }
+
+  const handleLeave = async () => {
+    await leaveZoneMutation.mutateAsync()
+    window.location.href = '/zone/zones'
+  }
+
+  const tabs = [
+    { id: 'general', label: 'General' },
+    { id: 'members', label: 'Members' },
+    { id: 'channels', label: 'Channels' },
+    ...(canManageMembers ? [{ id: 'invites', label: 'Invites' }] : []),
+    { id: 'danger', label: 'Danger' },
+  ]
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full overflow-hidden border-white/10 bg-main text-foreground sm:max-w-xl flex flex-col">
+        <SheetHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <SheetTitle>{zoneName} Settings</SheetTitle>
+              <SheetDescription>
+                Manage zone settings, members, and channels.
+              </SheetDescription>
+            </div>
+          </div>
+        </SheetHeader>
+
+        <div className="flex border-b border-white/10 mt-4 -mx-6 px-6">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as typeof activeTab)}
+              className={cn(
+                "flex-1 py-3 text-sm font-medium transition-colors",
+                activeTab === tab.id
+                  ? "text-foreground border-b-2 border-[hsl(var(--primary))]"
+                  : "text-muted-foreground hover:text-foreground"
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        <div className="flex-1 overflow-y-auto mt-6 space-y-6">
+          {activeTab === 'general' && (
+            <div className="space-y-6">
+              {canManageZoneInfo && (
+                <section className="space-y-3">
+                  <div className="flex flex-col items-center gap-4">
+                    <div
+                      className="group relative cursor-pointer"
+                      onClick={() => {
+                        const input = document.createElement('input')
+                        input.type = 'file'
+                        input.accept = 'image/*'
+                        input.onchange = (e) => {
+                          const file = (e.target as HTMLInputElement).files?.[0] ?? null
+                          handleAvatarChange(file)
+                        }
+                        input.click()
+                      }}
+                    >
+                      <div className="h-24 w-24 rounded-full border-2 border-white/10 bg-surface overflow-hidden transition-all group-hover:border-[hsl(var(--primary))]/50 group-hover:scale-105">
+                        {draftZoneAvatar ? (
+                          <Avatar className="h-full w-full">
+                            <AvatarImage src={getAvatarUrl(draftZoneAvatar)} className="object-cover" />
+                            <AvatarFallback className="bg-transparent">
+                              <Plus className="w-8 h-8 text-muted-foreground" />
+                            </AvatarFallback>
+                          </Avatar>
+                        ) : (
+                          <div className="h-full w-full flex items-center justify-center">
+                            <Plus className="w-8 h-8 text-muted-foreground" />
+                          </div>
+                        )}
+                      </div>
+                      <div className="absolute inset-0 flex items-center justify-center bg-black/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
+                        <Camera className="w-6 h-6 text-white" />
+                      </div>
+                    </div>
+                    <p className="text-xs text-muted-foreground font-medium uppercase tracking-widest">
+                      Change Avatar
+                    </p>
+                    <p className="text-[10px] text-muted-foreground/60 -mt-3">JPG, PNG up to 2MB</p>
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-foreground">Zone Name</label>
+                    <Input
+                      value={draftZoneName}
+                      onChange={(event) => setDraftZoneName(event.target.value)}
+                      placeholder="Zone name"
+                      className="border-white/10 bg-white/5 text-foreground"
+                    />
+                  </div>
+
+                  <Button
+                    onClick={() => { void updateZoneInfo() }}
+                    disabled={updateZoneMutation.isPending}
+                    className="w-full"
+                  >
+                    {updateZoneMutation.isPending ? "Saving..." : "Save Changes"}
+                  </Button>
+                </section>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'members' && (
+            <section className="space-y-3">
+              <p className="text-sm text-muted-foreground">{members.length} members</p>
+              <div className="space-y-2">
+                {members.map((member) => {
+                  const canRemove =
+                    canManageMembers &&
+                    member.id !== currentUser?.id &&
+                    member.role !== 'OWNER' &&
+                    !(myMembership?.role === 'ADMIN' && member.role === 'ADMIN')
+
+                  const canEditRole =
+                    canManageRoles &&
+                    member.id !== currentUser?.id &&
+                    member.role !== 'OWNER'
+
+                  return (
+                    <div key={member.id} className="flex items-center gap-3 rounded-xl bg-white/5 px-3 py-2">
+                      <Avatar className="h-10 w-10 ring-1 ring-white/10">
+                        <AvatarImage src={getAvatarUrl(member.avatar)} />
+                        <AvatarFallback className="bg-white/10 text-foreground">
+                          {member.username[0]?.toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate font-medium text-foreground">{member.username}</p>
+                        <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">{member.role}</p>
+                      </div>
+
+                      {canEditRole ? (
+                        <select
+                          value={member.role}
+                          onChange={(event) => {
+                            void updateRoleMutation.mutateAsync({
+                              userId: member.id,
+                              role: event.target.value as 'ADMIN' | 'MEMBER',
+                            })
+                          }}
+                          className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-foreground"
+                        >
+                          <option value="ADMIN">ADMIN</option>
+                          <option value="MEMBER">MEMBER</option>
+                        </select>
+                      ) : (
+                        <div className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-xs text-muted-foreground">
+                          {member.role}
+                        </div>
+                      )}
+
+                      {canRemove && (
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          onClick={() => {
+                            void removeMemberMutation.mutateAsync(member.id)
+                          }}
+                        >
+                          Remove
+                        </Button>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+            </section>
+          )}
+
+          {activeTab === 'channels' && (
+            <section className="space-y-3">
+              <div>
+                <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Channels</h3>
+                <p className="text-sm text-muted-foreground">All rooms in this zone update live.</p>
+              </div>
+
+              <div className="space-y-2 rounded-2xl border border-white/10 bg-surface p-3">
+                {channels.map((channel) => (
+                  <div key={channel.publicId} className="flex items-center justify-between rounded-xl bg-white/5 px-3 py-2">
+                    <span className="font-medium text-foreground">#{channel.name}</span>
+                    <span className="text-xs uppercase tracking-[0.2em] text-muted-foreground">{channel.type}</span>
+                  </div>
+                ))}
+              </div>
+
+              {canCreateChannels && (
+                <div className="rounded-2xl border border-white/10 bg-surface p-3">
+                  <p className="mb-3 text-sm font-medium text-foreground">Create channel</p>
+                  <div className="flex gap-2">
+                    <Input
+                      value={newChannelName}
+                      onChange={(event) => setNewChannelName(event.target.value)}
+                      placeholder="new-room"
+                      className="border-white/10 bg-white/5 text-foreground"
+                    />
+                    <select
+                      value={newChannelType}
+                      onChange={(event) => setNewChannelType(event.target.value as 'TEXT' | 'VOICE')}
+                      className="rounded-md border border-white/10 bg-white/5 px-3 text-sm text-foreground"
+                    >
+                      <option value="TEXT">Text</option>
+                      <option value="VOICE">Voice</option>
+                    </select>
+                    <Button
+                      onClick={() => {
+                        void createChannelMutation.mutateAsync({
+                          name: newChannelName,
+                          type: newChannelType,
+                        }).then(() => setNewChannelName(''))
+                      }}
+                      disabled={!newChannelName.trim() || createChannelMutation.isPending}
+                    >
+                      Create
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </section>
+          )}
+
+          {activeTab === 'invites' && canManageMembers && (
+            <section className="space-y-3">
+              <div>
+                <h3 className="text-sm font-semibold uppercase tracking-[0.2em] text-muted-foreground">Invite By Link</h3>
+                <p className="text-sm text-muted-foreground">Nobody gets added directly. They have to open the invite link and join themselves.</p>
+              </div>
+
+              <div className="rounded-2xl border border-white/10 bg-surface p-3">
+                <div className="mb-3 flex items-center justify-between rounded-xl bg-white/5 px-3 py-3">
+                  <div>
+                    <p className="text-sm font-medium text-foreground">General invite link</p>
+                    <p className="text-xs text-muted-foreground">Copy it and send it anywhere in DM.</p>
+                  </div>
+                  <Button
+                    size="sm"
+                    onClick={() => {
+                      void copyInviteLink('general')
+                    }}
+                    disabled={sendingInviteFor === 'general'}
+                  >
+                    {sentInviteFor === 'general' ? 'Copied' : 'Copy Link'}
+                  </Button>
+                </div>
+
+                <Input
+                  value={inviteSearch}
+                  onChange={(event) => setInviteSearch(event.target.value)}
+                  placeholder="Search friends..."
+                  className="mb-3 border-white/10 bg-white/5 text-foreground"
+                />
+
+                <div className="space-y-2">
+                  {filteredFriends.map((friend) => (
+                    <div key={friend.id} className="flex items-center gap-3 rounded-xl bg-white/5 px-3 py-2">
+                      <Avatar className="h-9 w-9 ring-1 ring-white/10">
+                        <AvatarImage src={getAvatarUrl(friend.avatar)} />
+                        <AvatarFallback className="bg-white/10 text-foreground">
+                          {friend.username[0]?.toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      <span className="flex-1 truncate text-sm font-medium text-foreground">{friend.username}</span>
+                      <Button
+                        size="sm"
+                        onClick={() => {
+                          void sendInviteToFriend(friend)
+                        }}
+                        disabled={sendingInviteFor === friend.id}
+                      >
+                        {sentInviteFor === friend.id ? 'Sent' : 'Send Invite'}
+                      </Button>
+                    </div>
+                  ))}
+
+                  {filteredFriends.length === 0 && (
+                    <p className="py-6 text-center text-sm text-muted-foreground">
+                      No available friends to add.
+                    </p>
+                  )}
+                </div>
+              </div>
+            </section>
+          )}
+
+          {activeTab === 'danger' && (
+            <section className="space-y-6">
+              {isOwner ? (
+                <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                  <div className="flex items-center gap-3 mb-3">
+                    <AlertTriangle className="w-5 h-5 text-red-400" />
+                    <h3 className="font-semibold text-foreground">Delete Zone</h3>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    This action is irreversible. All channels and messages will be permanently deleted.
+                  </p>
+
+                  {!showDeleteConfirm ? (
+                    <Button
+                      variant="destructive"
+                      onClick={() => setShowDeleteConfirm(true)}
+                      className="w-full"
+                    >
+                      Delete Zone
+                    </Button>
+                  ) : (
+                    <div className="space-y-3">
+                      <p className="text-xs text-muted-foreground">
+                        Please type the zone name to confirm deletion
+                      </p>
+                      <Input
+                        type="text"
+                        value={deleteConfirmText}
+                        onChange={(e) => setDeleteConfirmText(e.target.value)}
+                        className="w-full px-3 py-2 rounded-lg bg-surface border border-white/10 text-foreground text-sm placeholder:text-muted-foreground/50 focus:outline-none focus:border-red-500/50"
+                        placeholder={`Type "${draftZoneName}"`}
+                      />
+                      <div className="flex gap-2">
+                        <Button
+                          variant="ghost"
+                          onClick={() => {
+                            setShowDeleteConfirm(false)
+                            setDeleteConfirmText('')
+                          }}
+                          className="flex-1 text-muted-foreground hover:text-foreground"
+                        >
+                          Cancel
+                        </Button>
+                        <Button
+                          onClick={handleDelete}
+                          disabled={deleteConfirmText !== draftZoneName || deleteZoneMutation.isPending}
+                          className="flex-1 bg-red-600 hover:bg-red-700 disabled:opacity-50"
+                        >
+                          {deleteZoneMutation.isPending ? "Deleting..." : "Confirm Delete"}
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
+                  <div className="flex items-center gap-3 mb-3">
+                    <AlertTriangle className="w-5 h-5 text-red-400" />
+                    <h3 className="font-semibold text-foreground">Leave Zone</h3>
+                  </div>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    You will be removed from this zone and lose access to all channels.
+                  </p>
+
+                  {!showLeaveConfirm ? (
+                    <Button
+                      variant="destructive"
+                      onClick={() => setShowLeaveConfirm(true)}
+                      className="w-full"
+                    >
+                      Leave Zone
+                    </Button>
+                  ) : (
+                    <div className="flex gap-2">
+                      <Button
+                        variant="ghost"
+                        onClick={() => setShowLeaveConfirm(false)}
+                        className="flex-1 text-muted-foreground hover:text-foreground"
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        onClick={handleLeave}
+                        disabled={leaveZoneMutation.isPending}
+                        className="flex-1 bg-red-600 hover:bg-red-700 disabled:opacity-50"
+                      >
+                        {leaveZoneMutation.isPending ? "Leaving..." : "Confirm Leave"}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              )}
+            </section>
+          )}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/app/zone/_components/zones/ZoneSettingsModal.tsx b/apps/frontend/src/app/zone/_components/zones/ZoneSettingsModal.tsx
deleted file mode 100644
index e7debc9..0000000
--- a/apps/frontend/src/app/zone/_components/zones/ZoneSettingsModal.tsx
+++ /dev/null
@@ -1,309 +0,0 @@
-"use client"
-
-import { useState, useRef, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import { Camera, Plus, X, AlertTriangle } from "lucide-react"
-import { Button, Avatar, AvatarFallback, AvatarImage } from "packages/ui"
-import { useZone, useZoneMembers } from "@/features/zones/queries"
-import { useUpdateZoneMutation, useDeleteZoneMutation, useLeaveZoneMutation } from "@/features/zones/mutations"
-import { useUser } from "@/features/user/queries"
-import { cn } from "@openchat/lib"
-
-type ZoneSettingsModalProps = {
-  open: boolean
-  onClose: () => void
-  zonePublicId: string
-}
-
-export function ZoneSettingsModal({ open, onClose, zonePublicId }: ZoneSettingsModalProps) {
-  const router = useRouter()
-  const { data: zone } = useZone(zonePublicId)
-  const { data: members = [] } = useZoneMembers(zonePublicId)
-  const { data: currentUser } = useUser()
-  const updateZoneMutation = useUpdateZoneMutation(zonePublicId)
-  const deleteZoneMutation = useDeleteZoneMutation(zonePublicId)
-  const leaveZoneMutation = useLeaveZoneMutation(zonePublicId)
-
-  const [activeTab, setActiveTab] = useState<"general" | "members" | "danger">("general")
-  const [name, setName] = useState("")
-  const [avatar, setAvatar] = useState<File | null>(null)
-  const [preview, setPreview] = useState<string>("")
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const [deleteConfirmText, setDeleteConfirmText] = useState("")
-  const [showLeaveConfirm, setShowLeaveConfirm] = useState(false)
-  const fileInputRef = useRef<HTMLInputElement>(null)
-
-  const isOwner = members.some((m) => m.id === currentUser?.id && m.role === "OWNER")
-
-  useEffect(() => {
-    if (zone) setName(zone.name)
-  }, [zone])
-
-  useEffect(() => {
-    if (!open) {
-      setName(zone?.name ?? "")
-      setAvatar(null)
-      setPreview("")
-      setShowDeleteConfirm(false)
-      setDeleteConfirmText("")
-      setShowLeaveConfirm(false)
-    }
-  }, [open, zone])
-
-  useEffect(() => {
-    if (!avatar) {
-      setPreview("")
-      return
-    }
-    const objectUrl = URL.createObjectURL(avatar)
-    setPreview(objectUrl)
-    return () => URL.revokeObjectURL(objectUrl)
-  }, [avatar])
-
-  const handleSave = async () => {
-    if (!name.trim()) return
-    await updateZoneMutation.mutateAsync({ name, avatar })
-    setAvatar(null)
-    onClose()
-  }
-
-  const handleDelete = async () => {
-    if (deleteConfirmText !== zone?.name) return
-    try {
-      await deleteZoneMutation.mutateAsync()
-      onClose()
-    } catch (err) {
-      // Error is handled by the mutation, no need to do anything here
-    }
-  }
-
-  const handleLeave = async () => {
-    await leaveZoneMutation.mutateAsync()
-    router.push("/zone/zones")
-  }
-
-  if (!open) return null
-
-  const currentAvatar = preview || zone?.avatar || null
-
-  return (
-    <div className="fixed inset-0 z-50">
-      <div className="fixed inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
-      <div className="fixed inset-0 flex items-center justify-center p-4">
-        <div className="relative w-full max-w-lg bg-[#0f0f13]/95 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden">
-          <div className="absolute -top-20 -left-20 w-40 h-40 bg-[hsl(var(--primary))]/20 rounded-full blur-3xl" />
-          <div className="absolute -bottom-20 -right-20 w-40 h-40 bg-[hsl(var(--primary))]/20 rounded-full blur-3xl" />
-
-          <div className="relative">
-            <div className="flex items-center justify-between px-6 py-4 border-b border-white/10">
-              <h2 className="text-lg font-bold text-white">Zone Settings</h2>
-              <button
-                onClick={onClose}
-                className="p-1.5 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors"
-              >
-                <X className="w-4 h-4" />
-              </button>
-            </div>
-
-            <div className="flex border-b border-white/10">
-              {["general", "members", "danger"].map((tab) => (
-                <button
-                  key={tab}
-                  onClick={() => setActiveTab(tab as typeof activeTab)}
-                  className={cn(
-                    "flex-1 py-3 text-sm font-medium transition-colors capitalize",
-                    activeTab === tab
-                      ? "text-white border-b-2 border-[hsl(var(--primary))]"
-                      : "text-white/50 hover:text-white/70"
-                  )}
-                >
-                  {tab}
-                </button>
-              ))}
-            </div>
-
-            <div className="p-6 max-h-[60vh] overflow-y-auto">
-              {activeTab === "general" && (
-                <div className="space-y-6">
-                  <div className="flex flex-col items-center gap-4">
-                    <div
-                      className="group relative cursor-pointer"
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      <div className="h-24 w-24 rounded-full border-2 border-white/10 bg-white/5 overflow-hidden transition-all group-hover:border-[hsl(var(--primary))]/50 group-hover:scale-105">
-                        {currentAvatar ? (
-                          <Avatar className="h-full w-full">
-                            <AvatarImage src={currentAvatar} className="object-cover" />
-                            <AvatarFallback className="bg-transparent">
-                              <Plus className="w-8 h-8 text-white/40" />
-                            </AvatarFallback>
-                          </Avatar>
-                        ) : (
-                          <div className="h-full w-full flex items-center justify-center">
-                            <Plus className="w-8 h-8 text-white/40" />
-                          </div>
-                        )}
-                      </div>
-                      <div className="absolute inset-0 flex items-center justify-center bg-black/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Camera className="w-6 h-6 text-white" />
-                      </div>
-                    </div>
-                    <input
-                      type="file"
-                      ref={fileInputRef}
-                      className="hidden"
-                      accept="image/*"
-                      onChange={(e) => setAvatar(e.target.files?.[0] || null)}
-                    />
-                    <p className="text-xs text-white/40 font-medium uppercase tracking-widest">
-                      Change Avatar
-                    </p>
-                  </div>
-
-                  <div className="space-y-2">
-                    <label className="text-sm font-medium text-white/70">Zone Name</label>
-                    <input
-                      type="text"
-                      value={name}
-                      onChange={(e) => setName(e.target.value)}
-                      className="w-full px-4 py-3 rounded-xl bg-white/[0.03] border border-white/[0.08] text-white placeholder:text-white/30 outline-none transition-all focus:border-[hsl(var(--primary))]/50 focus:ring-2 focus:ring-[hsl(var(--primary))]/20"
-                      placeholder="Enter zone name"
-                    />
-                  </div>
-
-                  <Button
-                    onClick={handleSave}
-                    disabled={!name.trim() || updateZoneMutation.isPending}
-                    className="w-full bg-[hsl(var(--primary))] hover:brightness-110 text-white font-semibold"
-                  >
-                    {updateZoneMutation.isPending ? "Saving..." : "Save Changes"}
-                  </Button>
-                </div>
-              )}
-
-              {activeTab === "members" && (
-                <div className="space-y-3">
-                  <p className="text-sm text-white/50 mb-4">{members.length} members</p>
-                  <div className="space-y-2">
-                    {members.map((member) => (
-                      <div
-                        key={member.id}
-                        className="flex items-center gap-3 p-3 rounded-lg bg-white/5 hover:bg-white/10 transition-colors"
-                      >
-                        <Avatar className="h-9 w-9">
-                          <AvatarImage src={member.avatar ?? undefined} />
-                          <AvatarFallback className="bg-[hsl(var(--primary))] text-white text-sm">
-                            {member.username[0]?.toUpperCase()}
-                          </AvatarFallback>
-                        </Avatar>
-                        <div className="flex-1 min-w-0">
-                          <p className="text-sm font-medium text-white truncate">{member.username}</p>
-                          <p className="text-xs text-white/40 capitalize">{member.role.toLowerCase()}</p>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {activeTab === "danger" && (
-                <div className="space-y-6">
-                  {isOwner ? (
-                    <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
-                      <div className="flex items-center gap-3 mb-3">
-                        <AlertTriangle className="w-5 h-5 text-red-400" />
-                        <h3 className="font-semibold text-white">Delete Zone</h3>
-                      </div>
-                      <p className="text-sm text-white/60 mb-4">
-                        This action is irreversible. All channels and messages will be permanently deleted.
-                      </p>
-
-                      {!showDeleteConfirm ? (
-                        <Button
-                          variant="destructive"
-                          onClick={() => setShowDeleteConfirm(true)}
-                          className="w-full bg-red-600 hover:bg-red-700"
-                        >
-                          Delete Zone
-                        </Button>
-                        ) : (
-                        <div className="space-y-3">
-                          <p className="text-xs text-white/50">
-                            Please type the zone name to confirm deletion
-                          </p>
-                          <input
-                            type="text"
-                            value={deleteConfirmText}
-                            onChange={(e) => setDeleteConfirmText(e.target.value)}
-                            className="w-full px-3 py-2 rounded-lg bg-white/5 border border-white/10 text-white text-sm placeholder:text-white/30 focus:outline-none focus:border-red-500/50"
-                            placeholder={`Type "${zone?.name}"`}
-                          />
-                          <div className="flex gap-2">
-                            <Button
-                              variant="ghost"
-                              onClick={() => {
-                                setShowDeleteConfirm(false)
-                                setDeleteConfirmText('')
-                              }}
-                              className="flex-1 text-white/60 hover:text-white"
-                            >
-                              Cancel
-                            </Button>
-                            <Button
-                              onClick={handleDelete}
-                              disabled={deleteConfirmText !== zone?.name || deleteZoneMutation.isPending}
-                              className="flex-1 bg-red-600 hover:bg-red-700 disabled:opacity-50"
-                            >
-                              {deleteZoneMutation.isPending ? "Deleting..." : "Confirm Delete"}
-                            </Button>
-                          </div>
-                        </div>
-                      )}
-                    </div>
-                  ) : (
-                    <div className="p-4 rounded-lg bg-red-500/10 border border-red-500/20">
-                      <div className="flex items-center gap-3 mb-3">
-                        <AlertTriangle className="w-5 h-5 text-red-400" />
-                        <h3 className="font-semibold text-white">Leave Zone</h3>
-                      </div>
-                      <p className="text-sm text-white/60 mb-4">
-                        You will be removed from this zone and lose access to all channels.
-                      </p>
-
-                      {!showLeaveConfirm ? (
-                        <Button
-                          variant="destructive"
-                          onClick={() => setShowLeaveConfirm(true)}
-                          className="w-full bg-red-600 hover:bg-red-700"
-                        >
-                          Leave Zone
-                        </Button>
-                      ) : (
-                        <div className="flex gap-2">
-                          <Button
-                            variant="ghost"
-                            onClick={() => setShowLeaveConfirm(false)}
-                            className="flex-1 text-white/60 hover:text-white"
-                          >
-                            Cancel
-                          </Button>
-                          <Button
-                            onClick={handleLeave}
-                            disabled={leaveZoneMutation.isPending}
-                            className="flex-1 bg-red-600 hover:bg-red-700 disabled:opacity-50"
-                          >
-                            {leaveZoneMutation.isPending ? "Leaving..." : "Confirm Leave"}
-                          </Button>
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
\ No newline at end of file
diff --git a/apps/frontend/src/app/zone/chat/ChatList.tsx b/apps/frontend/src/app/zone/chat/ChatList.tsx
index 1907981..1bc4db1 100644
--- a/apps/frontend/src/app/zone/chat/ChatList.tsx
+++ b/apps/frontend/src/app/zone/chat/ChatList.tsx
@@ -2,11 +2,12 @@
 
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
-import { Avatar, AvatarFallback, Skeleton } from 'packages/ui'
+import { Skeleton } from 'packages/ui'
 import { X } from 'lucide-react'
-import { cn, getAvatarUrl, api } from '@openchat/lib'
+import { cn, api } from '@openchat/lib'
 import { useChatsStore } from '@/app/stores/chat-store'
 import { useFriendsStore } from '@/app/stores/friends-store'
+import { UserAvatar } from '@/components/UserAvatar'
 
 // type ChatItem = {
 //   chatPublicId: string
@@ -107,7 +108,6 @@ export default function ChatList({ currentUserId }: { currentUserId?: number | n
         if (!other) return null
 
         const isActive = chat.chatPublicId === chatPublicId
-        const avatarUrl = getAvatarUrl(other.avatar)
         const isOnline = onlineUsers.has(other.id) || other.isOnline === true
 
         return (
@@ -124,20 +124,13 @@ export default function ChatList({ currentUserId }: { currentUserId?: number | n
             )}
           >
             <div className="relative shrink-0">
-              <Avatar className="h-8 w-8">
-                {avatarUrl ? (
-                  <img
-                    src={avatarUrl}
-                    alt={other.username}
-                    className="h-full w-full object-cover rounded-full"
-                    loading="lazy"
-                  />
-                ) : (
-                  <AvatarFallback className="bg-white/10 text-xs font-bold uppercase transition-colors">
-                    {other.username?.[0]?.toUpperCase()}
-                  </AvatarFallback>
-                )}
-              </Avatar>
+              <UserAvatar
+                name={other.username}
+                avatar={other.avatar}
+                className="h-8 w-8"
+                fallbackText={other.username}
+                fallbackClassName="bg-white/10 text-xs font-bold uppercase transition-colors"
+              />
               <div
                 className={cn(
                   'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-background',
diff --git a/apps/frontend/src/app/zone/chat/[chatPublicId]/page.tsx b/apps/frontend/src/app/zone/chat/[chatPublicId]/page.tsx
index 87b80dc..b5b3f35 100644
--- a/apps/frontend/src/app/zone/chat/[chatPublicId]/page.tsx
+++ b/apps/frontend/src/app/zone/chat/[chatPublicId]/page.tsx
@@ -9,10 +9,7 @@ import {
   AvatarFallback,
   Avatar,
   AvatarImage,
-  DropdownMenu,
-  DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuTrigger,
   Sheet,
   SheetContent,
   SheetDescription,
@@ -20,15 +17,20 @@ import {
   Skeleton,
 } from 'packages/ui'
 import { useChatsStore } from '@/app/stores/chat-store'
-import { ArrowLeft, Info, Paperclip, PhoneCall, Pin, Send, ShieldBan, User, UserMinus, Video, X, Smile, Sticker as StickerIcon, Gift, SquarePen, Trash, Search } from 'lucide-react'
+import { ArrowLeft, Paperclip, Pin, Send, ShieldBan, UserMinus, X, Smile, Sticker as StickerIcon, Gift, SquarePen, Trash, Search, PanelRight } from 'lucide-react'
 import { api, getAvatarUrl } from '@openchat/lib'
 import MessageText from '../../_components/chat/MessageText'
 import GifPicker from '../../_components/chat/GifPicker'
+import EmojiPicker from '../../_components/chat/EmojiPicker'
 import StickerPicker from '../../_components/chat/StickerPicker'
 // import { useVoiceCall } from "@/hooks/useVoiceCall"
-import { useCallStore } from "@/app/stores/call-store"
 import { startOutgoingCallSession } from "@/app/lib/session-runtime"
 import { useUserStore } from '@/app/stores/user-store'
+import { EmptyChatState } from '@/components/EmptyChatState'
+import { ChatHeader } from '@/components/ChatHeader'
+import { useFriendsStore } from '@/app/stores/friends-store'
+import { ChatSidebar } from '@/components/ChatSidebar'
+import { ProfileModal } from '@/components/ProfileModal'
 
 type Message = {
   id: number
@@ -46,7 +48,9 @@ type Message = {
 type ChatParticipant = {
   id: number
   username: string
+  name?: string | null
   avatar?: string | null
+  isOnline?: boolean
 }
 
 type ChatData = {
@@ -120,11 +124,28 @@ export default function ChatPage() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
   const [previewUrl, setPreviewUrl] = useState<string | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
   const [typingUsers, setTypingUsers] = useState<Set<number>>(new Set())
   const [headerActionBusy, setHeaderActionBusy] = useState(false)
   const [pinnedPanelOpen, setPinnedPanelOpen] = useState(false)
   const [showGifs, setShowGifs] = useState(false)
+  const [showEmojis, setShowEmojis] = useState(false)
   const [showStickers, setShowStickers] = useState(false)
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true)
+  const [isSidebarSheetOpen, setIsSidebarSheetOpen] = useState(false)
+  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false)
+  const [profile, setProfile] = useState<{
+    id: string | number
+    name: string
+    avatar?: string | null
+    bio?: string | null
+    friendStatus?: 'none' | 'pending' | 'accepted'
+    mutualFriends?: { id: string; name: string }[]
+    mutualZones?: { id: string; name: string }[]
+    joinedAt?: string | null
+    isOnline?: boolean
+    lastSeen?: string | null
+  } | null>(null)
   const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
   // const endRef = useRef<HTMLDivElement>(null)
@@ -134,7 +155,7 @@ export default function ChatPage() {
   const chats = useChatsStore((s) => s.chats)
   const hideChat = useChatsStore((s) => s.hideChat)
   const currentUser = useUserStore((s) => s.user)
-  const speakingUsers = useCallStore(s => s.speakingUsers)
+  const onlineUsers = useFriendsStore((s) => s.onlineUsers)
 
   // const {
   //   startCall,
@@ -156,6 +177,35 @@ export default function ChatPage() {
     ? activeChat?.participants.find((participant) => participant.id !== currentUserId)
     : null
 
+  const emptyChatName = isGroup
+    ? (activeChat?.name ?? 'Group')
+    : (otherUser?.name ?? otherUser?.username ?? 'User')
+
+  const sidebarProfile = !isGroup && otherUser
+    ? {
+        id: otherUser.id,
+        name: otherUser.name ?? otherUser.username ?? 'User',
+        avatar: otherUser.avatar ?? null,
+      }
+    : null
+
+  const handleToggleSidebar = () => {
+    if (typeof window !== 'undefined' && window.matchMedia('(min-width: 1024px)').matches) {
+      setIsSidebarOpen((prev) => !prev)
+      return
+    }
+
+    setIsSidebarSheetOpen(true)
+  }
+
+  const resolvedProfile = profile ?? sidebarProfile
+  const canManageFriend = Boolean(currentUser && otherUser && currentUser.id !== otherUser.id)
+
+  const handleOpenProfileModal = () => {
+    setIsProfileModalOpen(true)
+    setIsSidebarSheetOpen(false)
+  }
+
   const pinnedMessages = (messages ?? [])
     .filter((message) => message.isPinned && !message.isDeleted)
     .sort((a, b) => {
@@ -189,6 +239,45 @@ export default function ChatPage() {
       .finally(() => setLoading(false))
   }, [chatPublicId])
 
+  useEffect(() => {
+    if (!otherUser?.username) {
+      setProfile(null)
+      return
+    }
+
+    let active = true
+
+    api(`/users/${otherUser.username}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!active) return
+        const user = data?.user
+        if (!user) {
+          setProfile(null)
+          return
+        }
+        setProfile({
+          id: user.id,
+          name: user.name ?? user.username ?? 'User',
+          avatar: user.avatar ?? null,
+          bio: user.bio ?? null,
+          friendStatus: user.friendStatus,
+          mutualFriends: Array.isArray(user.mutualFriends) ? user.mutualFriends : undefined,
+          mutualZones: Array.isArray(user.mutualZones) ? user.mutualZones : undefined,
+          joinedAt: user.createdAt ?? null,
+          isOnline: user.isOnline ?? undefined,
+          lastSeen: user.lastLogin ?? null,
+        })
+      })
+      .catch(() => {
+        if (active) setProfile(null)
+      })
+
+    return () => {
+      active = false
+    }
+  }, [otherUser?.username])
+
   useEffect(() => {
     if (!chatPublicId) return
 
@@ -325,6 +414,19 @@ export default function ChatPage() {
     }
   }, [chatPublicId, hideChat, otherUser, router])
 
+  const addFriend = useCallback(async () => {
+    if (!otherUser?.username) return
+
+    const res = await api('/friends/request', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ username: otherUser.username }),
+    })
+    if (res.ok) {
+      setProfile((prev) => (prev ? { ...prev, friendStatus: 'pending' } : prev))
+    }
+  }, [otherUser])
+
   const togglePinMessage = useCallback(async (messageId: number) => {
     await api(`/chats/messages/${messageId}/pin`, {
       method: 'PATCH',
@@ -549,135 +651,94 @@ export default function ChatPage() {
             h-full min-h-0 w-full
           "
     >
-      <div
-        className="
-                sticky top-0 z-10 flex items-center shrink-0
-                px-4 py-4
-                bg-background
-                border-b
-                gap-3
-              "
-      >
-        <div
-          className="
-                    md:hidden
-                  "
-        >
+      <ChatHeader
+        user={
+          isGroup
+            ? {
+                id: activeChat?.chatPublicId ?? chatPublicId,
+                name: activeChat?.name ?? 'Group',
+                avatar: activeChat?.avatar ?? null,
+              }
+            : {
+                id: otherUser?.id ?? 'unknown',
+                name: otherUser?.name ?? otherUser?.username ?? 'User',
+                avatar: otherUser?.avatar ?? null,
+                isOnline: otherUser
+                  ? onlineUsers.has(otherUser.id) || otherUser.isOnline === true
+                  : false,
+              }
+        }
+        leading={
           <button
             onClick={() => router.push('/zone/chat')}
-            className="rounded-md p-2 text-zinc-400 transition-colors hover:bg-muted hover:text-white"
+            className="md:hidden rounded-full h-10 w-10 flex items-center justify-center text-zinc-400 transition-colors hover:bg-muted hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             aria-label="Back to messages"
+            type="button"
           >
             <ArrowLeft className="h-5 w-5" />
           </button>
-        </div>
-
-        <div className="relative">
-          <Avatar
-            className="
-                    h-10 w-10
-                  "
-          >
-            <AvatarImage src={getAvatarUrl(otherUser?.avatar)} />
-            <AvatarFallback
-              className="
-                        text-primary-foreground
-                      "
-            >
-              <User
-                className="
-                            h-5 w-5
-                          "
-              />
-            </AvatarFallback>
-          </Avatar>
-          {otherUser && speakingUsers.has(otherUser.id) && (
-            <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 bg-emerald-500 rounded-full border-2 border-[#313338] animate-pulse shadow-[0_0_10px_rgba(16,185,129,0.5)]" />
-          )}
-        </div>
-
-        <div
-          className="
-                    flex-1
-                  "
-        >
-          <p
-            className="
-                        font-medium text-sm
-                      "
-          >
-            {isGroup ? activeChat?.name : otherUser?.username}
-          </p>
-          {pinnedMessages.length > 0 && (
+        }
+        center={
+          pinnedMessages.length > 0 ? (
             <button
-              className="mt-1 flex items-center gap-1 text-[11px] text-amber-300"
+              type="button"
+              className="hidden sm:flex items-center gap-1 text-[11px] text-amber-300 hover:underline"
               onClick={() => setPinnedPanelOpen(true)}
+              aria-label="Show pinned messages"
             >
               <Pin className="h-3 w-3" />
               {pinnedMessages.length} pinned
             </button>
-          )}
-        </div>
-
-
-        {/* <MicTest /> */}
-
-        <Button
-          onClick={() => {
-            if (!otherUser || !chatPublicId) return
-
-            void startOutgoingCallSession({
-              chatPublicId,
-              toUserId: otherUser.id,
-              user: {
-                id: otherUser.id,
-                name: otherUser.username,
-                image: otherUser.avatar,
-              },
-            })
-          }}
-        >
-          <PhoneCall className="w-3 h-3 scale-[1.25]" strokeWidth={2} />
-        </Button>
-
-
-
-        <Button
-          variant="destructive"
-        >
-          <Video className="w-3 h-3 scale-[1.55]" strokeWidth={2} />
-        </Button>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
+          ) : null
+        }
+        trailing={
+          resolvedProfile ? (
             <Button
+              type="button"
               variant="ghost"
-              disabled={!otherUser || headerActionBusy}
+              size="icon"
+              className="h-10 w-10 rounded-full"
+              aria-label={isSidebarOpen ? 'Hide details' : 'Show details'}
+              onClick={handleToggleSidebar}
             >
-              <Info className="w-3 h-3 scale-[1.35]" strokeWidth={2} />
+              <PanelRight className="h-4 w-4" />
             </Button>
-          </DropdownMenuTrigger>
-
-          <DropdownMenuContent align="end" className="w-44">
-            <DropdownMenuItem
-              onClick={removeCurrentFriend}
-              className="cursor-pointer"
-            >
-              <UserMinus className="mr-2 h-4 w-4" />
-              Remove Friend
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={blockCurrentFriend}
-              className="cursor-pointer text-red-500 focus:text-red-500"
-            >
-              <ShieldBan className="mr-2 h-4 w-4" />
-              Block User
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-
-
-      </div>
+          ) : null
+        }
+        onCall={() => {
+          if (!otherUser || !chatPublicId) return
+          void startOutgoingCallSession({
+            chatPublicId,
+            toUserId: otherUser.id,
+            user: {
+              id: otherUser.id,
+              name: otherUser.username,
+              image: otherUser.avatar,
+            },
+          })
+        }}
+        callDisabled={!otherUser || !chatPublicId}
+        // Video calling not implemented yet (keep button disabled but visible).
+        videoDisabled
+        moreDisabled={!otherUser || headerActionBusy || isGroup}
+        moreMenu={
+          !isGroup ? (
+            <>
+              <DropdownMenuItem onClick={removeCurrentFriend} className="cursor-pointer">
+                <UserMinus className="mr-2 h-4 w-4" />
+                Remove Friend
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={blockCurrentFriend}
+                className="cursor-pointer text-red-500 focus:text-red-500"
+              >
+                <ShieldBan className="mr-2 h-4 w-4" />
+                Block User
+              </DropdownMenuItem>
+            </>
+          ) : null
+        }
+      />
 
       <Sheet open={pinnedPanelOpen} onOpenChange={setPinnedPanelOpen}>
         <SheetContent side="right" className="w-full sm:max-w-md">
@@ -713,18 +774,55 @@ export default function ChatPage() {
         </SheetContent>
       </Sheet>
 
-      <div
-        ref={messagesRef}
-        dir="ltr"
-        className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden p-4 w-full overscroll-y-contain"
-      >
-        <div className="flex flex-col min-h-full justify-end">
-          {messages.map((m, idx) => {
-            const isMe = m.senderId === currentUserId
-            const sender = isMe ? currentUser : otherUser
-            const prevMsg = messages[idx - 1]
-            const isGrouped = !!prevMsg && prevMsg.senderId === m.senderId &&
-              (getMessageTimestamp(m) - getMessageTimestamp(prevMsg) < 300000)
+      <Sheet open={isSidebarSheetOpen} onOpenChange={setIsSidebarSheetOpen}>
+        <SheetContent side="right" className="w-full sm:max-w-sm lg:hidden">
+          {resolvedProfile ? (
+            <ChatSidebar
+              profile={resolvedProfile}
+              canManageFriend={canManageFriend}
+              onAddFriend={addFriend}
+              onRemoveFriend={removeCurrentFriend}
+              onBlock={blockCurrentFriend}
+              onViewProfile={handleOpenProfileModal}
+              className="w-full border-0 bg-transparent"
+            />
+          ) : null}
+        </SheetContent>
+      </Sheet>
+
+      <ProfileModal
+        profile={resolvedProfile}
+        open={isProfileModalOpen}
+        onClose={() => setIsProfileModalOpen(false)}
+        canManageFriend={canManageFriend}
+        onAddFriend={addFriend}
+        onRemoveFriend={removeCurrentFriend}
+        onBlock={blockCurrentFriend}
+      />
+
+      <div className="flex min-h-0 flex-1">
+        <div className="flex flex-col min-h-0 flex-1">
+          <div
+            ref={messagesRef}
+            dir="ltr"
+            className={cn(
+              'flex-1 min-h-0 overflow-x-hidden p-4 w-full overscroll-y-contain',
+              messages.length === 0 ? 'overflow-hidden' : 'overflow-y-auto',
+            )}
+          >
+            {messages.length === 0 ? (
+              <EmptyChatState
+                name={emptyChatName}
+                onSelectMessage={(msg) => setInput(msg)}
+              />
+            ) : (
+              <div className="flex flex-col min-h-full justify-end">
+                {messages.map((m, idx) => {
+                  const isMe = m.senderId === currentUserId
+                  const sender = isMe ? currentUser : otherUser
+                  const prevMsg = messages[idx - 1]
+                  const isGrouped = !!prevMsg && prevMsg.senderId === m.senderId &&
+                    (getMessageTimestamp(m) - getMessageTimestamp(prevMsg) < 300000)
 
             if (isGrouped) {
               return (
@@ -741,18 +839,18 @@ export default function ChatPage() {
                   )}
                   {editingId === m.id ? (
                     <div>
-                      <input
-                        value={editText}
-                        autoFocus
-                        onChange={(e) => setEditText(e.target.value)}
-                        onKeyDown={async (e) => {
-                          if (e.key === 'Enter') {
-                            const res = await api(`/chats/messages/${m.id}`, {
-                              method: 'PATCH',
-                              headers: { 'Content-Type': 'application/json' },
-                              body: JSON.stringify({ text: editText }),
-                              credentials: 'include'
-                            })
+	                      <input
+	                        value={editText}
+	                        autoFocus
+	                        onChange={(e) => setEditText(e.target.value)}
+	                        onKeyDown={async (e) => {
+	                          if (e.key === 'Enter') {
+	                            await api(`/chats/messages/${m.id}`, {
+	                              method: 'PATCH',
+	                              headers: { 'Content-Type': 'application/json' },
+	                              body: JSON.stringify({ text: editText }),
+	                              credentials: 'include'
+	                            })
 
                             setEditingId(null)
                           }
@@ -885,18 +983,18 @@ export default function ChatPage() {
 
                   {editingId === m.id ? (
                     <div>
-                      <input
-                        value={editText}
-                        autoFocus
-                        onChange={(e) => setEditText(e.target.value)}
-                        onKeyDown={async (e) => {
-                          if (e.key === 'Enter') {
-                            const res = await api(`/chats/messages/${m.id}`, {
-                              method: 'PATCH',
-                              headers: { 'Content-Type': 'application/json' },
-                              body: JSON.stringify({ text: editText }),
-                              credentials: 'include'
-                            })
+	                      <input
+	                        value={editText}
+	                        autoFocus
+	                        onChange={(e) => setEditText(e.target.value)}
+	                        onKeyDown={async (e) => {
+	                          if (e.key === 'Enter') {
+	                            await api(`/chats/messages/${m.id}`, {
+	                              method: 'PATCH',
+	                              headers: { 'Content-Type': 'application/json' },
+	                              body: JSON.stringify({ text: editText }),
+	                              credentials: 'include'
+	                            })
 
                             setEditingId(null)
                           }
@@ -1001,6 +1099,7 @@ export default function ChatPage() {
 
           <div ref={bottomRef} />
         </div>
+        )}
       </div>
 
       <div
@@ -1045,6 +1144,7 @@ export default function ChatPage() {
           </Button>
 
           <Input
+            ref={inputRef}
             value={input}
             onChange={(e) => handleInputChange(e.target.value)}
             onKeyDown={(e) => {
@@ -1059,21 +1159,22 @@ export default function ChatPage() {
             className="border-0 bg-transparent focus-visible:ring-0 text-white placeholder:text-zinc-500 min-w-0"
           />
 
-          <div className="hidden sm:flex items-center gap-0.5 shrink-0">
-             <Button size="icon" variant="ghost" className="h-9 w-9 text-zinc-400 hover:text-zinc-200" title="Gift Nitro">
+<div className="hidden sm:flex items-center gap-0.5 shrink-0">
+              <Button size="icon" variant="ghost" className="h-9 w-9 text-zinc-400 hover:text-zinc-200" title="Gift Nitro">
                 <Gift className="h-5 w-5" />
-             </Button>
+              </Button>
 
-             <div className="relative">
+              <div className="relative">
                 <Button 
                   size="icon" 
                   variant="ghost" 
                   className={cn("h-9 w-9 transition-colors", showGifs ? "text-primary" : "text-zinc-400 hover:text-zinc-200")} 
-                  onClick={() => { setShowGifs(!showGifs); setShowStickers(false); }}
+                  onClick={() => { setShowGifs(!showGifs); setShowStickers(false); setShowEmojis(false); }}
                   title="Send GIF"
                 >
-                   <Search className="h-5 w-5" strokeWidth={2.5} />
+                  <Search className="h-5 w-5" strokeWidth={2.5} />
                 </Button>
+
                 {showGifs && (
                   <GifPicker 
                     onClose={() => setShowGifs(false)} 
@@ -1083,21 +1184,39 @@ export default function ChatPage() {
                     }} 
                   />
                 )}
-             </div>
-
-             <Button size="icon" variant="ghost" className="h-9 w-9 text-zinc-400 hover:text-zinc-200" title="Pick an Emoji">
-                <Smile className="h-5 w-5" />
-             </Button>
+              </div>
 
-             <div className="relative">
+              <div className="relative">
                 <Button 
+                  size="icon" 
+                  variant="ghost" 
+                  className={cn("h-9 w-9 transition-colors", showEmojis ? "text-primary" : "text-zinc-400 hover:text-zinc-200")} 
+                  onClick={() => { setShowEmojis(!showEmojis); setShowGifs(false); setShowStickers(false); }}
+                  title="Pick an Emoji"
+                >
+                  <Smile className="h-5 w-5" />
+                </Button>
+
+                {showEmojis && (
+                  <EmojiPicker 
+                    onClose={() => setShowEmojis(false)} 
+                    onSelect={(emoji) => {
+                      setInput(prev => prev + emoji)
+                      inputRef.current?.focus()
+                    }} 
+                  />
+                )}
+              </div>
+
+              <div className="relative">
+                <Button
                   size="icon" 
                   variant="ghost" 
                   className={cn("h-9 w-9 transition-colors", showStickers ? "text-primary" : "text-zinc-400 hover:text-zinc-200")} 
-                  onClick={() => { setShowStickers(!showStickers); setShowGifs(false); }}
+                  onClick={() => { setShowStickers(!showStickers); setShowGifs(false); setShowEmojis(false); }}
                   title="Custom Stickers"
                 >
-                   <StickerIcon className="h-5 w-5" />
+                  <StickerIcon className="h-5 w-5" />
                 </Button>
                 {showStickers && (
                   <StickerPicker 
@@ -1134,6 +1253,21 @@ export default function ChatPage() {
           />
         </div>
       </div>
-    </div >
+        </div>
+
+        {resolvedProfile && isSidebarOpen ? (
+          <div className="hidden lg:flex">
+            <ChatSidebar
+              profile={resolvedProfile}
+              canManageFriend={canManageFriend}
+              onAddFriend={addFriend}
+              onRemoveFriend={removeCurrentFriend}
+              onBlock={blockCurrentFriend}
+              onViewProfile={handleOpenProfileModal}
+            />
+          </div>
+        ) : null}
+      </div>
+    </div>
   )
 }
diff --git a/apps/frontend/src/app/zone/friends/BlockedUsers.tsx b/apps/frontend/src/app/zone/friends/BlockedUsers.tsx
index 0ea530e..664b095 100644
--- a/apps/frontend/src/app/zone/friends/BlockedUsers.tsx
+++ b/apps/frontend/src/app/zone/friends/BlockedUsers.tsx
@@ -1,10 +1,11 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Avatar, AvatarFallback, AvatarImage, Button, Card } from 'packages/ui'
+import { Button, Card } from 'packages/ui'
 import { ShieldCheck } from 'lucide-react'
-import { api, getAvatarUrl } from '@openchat/lib'
+import { api } from '@openchat/lib'
 import { useFriendsStore } from '@/app/stores/friends-store'
+import { UserAvatar } from '@/components/UserAvatar'
 
 type BlockedUser = {
   id: number
@@ -61,12 +62,12 @@ export default function BlockedUsers() {
           className="flex items-center justify-between p-4 shadow-sm border-muted/60"
         >
           <div className="flex items-center gap-4">
-            <Avatar className="h-11 w-11 border-2 border-background shadow-sm">
-              <AvatarImage src={getAvatarUrl(user.avatar)} />
-              <AvatarFallback className="bg-secondary text-secondary-foreground font-semibold text-xs">
-                {user.username.slice(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
+            <UserAvatar
+              name={user.name || user.username}
+              avatar={user.avatar}
+              className="h-11 w-11 border-2 border-background shadow-sm"
+              fallbackText={user.username}
+            />
 
             <div className="flex flex-col">
               <span className="text-sm font-bold tracking-tight">
diff --git a/apps/frontend/src/app/zone/friends/FriendList.tsx b/apps/frontend/src/app/zone/friends/FriendList.tsx
index d7153a1..4e341f9 100644
--- a/apps/frontend/src/app/zone/friends/FriendList.tsx
+++ b/apps/frontend/src/app/zone/friends/FriendList.tsx
@@ -3,8 +3,6 @@
 import { useEffect, useState } from 'react'
 import { useParams } from 'next/navigation'
 import {
-  Avatar,
-  AvatarFallback,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -14,9 +12,10 @@ import {
   Skeleton,
 } from 'packages/ui'
 import { Info, ShieldBan, UserMinus, Users } from 'lucide-react'
-import { cn, getAvatarUrl } from '@openchat/lib'
+import { cn } from '@openchat/lib'
 import { api } from '@openchat/lib'
 import { useFriendsStore } from '@/app/stores/friends-store'
+import { UserAvatar } from '@/components/UserAvatar'
 
 type Friend = {
   id: number
@@ -172,7 +171,6 @@ export default function FriendList({ onSelectFriend }: FriendListProps) {
             <div className="space-y-1">
               {friends.map((friend) => {
                 const isActive = username === friend.username
-                const avatarUrl = getAvatarUrl(friend.avatar)
 
                 return (
                   <div
@@ -188,20 +186,12 @@ export default function FriendList({ onSelectFriend }: FriendListProps) {
                         className="flex flex-1 items-center gap-3 rounded-md p-1 text-left"
                       >
                         <div className="relative">
-                          <Avatar className="h-10 w-10 ring-1 ring-border">
-                            {avatarUrl ? (
-                              <img
-                                src={avatarUrl}
-                                alt={friend.username}
-                                className="h-full w-full object-cover rounded-full"
-                                loading="lazy"
-                              />
-                            ) : (
-                              <AvatarFallback>
-                                {friend.username?.[0]?.toUpperCase()}
-                              </AvatarFallback>
-                            )}
-                          </Avatar>
+                          <UserAvatar
+                            name={friend.name || friend.username}
+                            avatar={friend.avatar}
+                            className="h-10 w-10 ring-1 ring-border"
+                            fallbackText={friend.username}
+                          />
                           {onlineUsers.has(friend.id) && (
                             <div className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 border-2 border-background rounded-full" />
                           )}
diff --git a/apps/frontend/src/app/zone/friends/FriendRequests.tsx b/apps/frontend/src/app/zone/friends/FriendRequests.tsx
index 44f7189..9ff8c49 100644
--- a/apps/frontend/src/app/zone/friends/FriendRequests.tsx
+++ b/apps/frontend/src/app/zone/friends/FriendRequests.tsx
@@ -2,16 +2,20 @@
 
 import { useEffect } from 'react'
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
   Button,
   Card
 } from 'packages/ui'
-import { Check, X, UserPlus } from 'lucide-react'
+import { Check, X } from 'lucide-react'
 import { api } from '@openchat/lib'
-import { useFriendsStore } from '@/app/stores/friends-store'
+import { useFriendsStore, type FriendRequest, type User } from '@/app/stores/friends-store'
 import { formatDistanceToNow } from 'date-fns'
+import { UserAvatar } from '@/components/UserAvatar'
+
+type ApiIncomingFriendRequest = {
+  id: number
+  sender: User
+  createdAt: string
+}
 
 export default function FriendRequests() {
   const requests = useFriendsStore(s => s.requests)
@@ -24,8 +28,8 @@ export default function FriendRequests() {
 
     api('/friends/requests')
       .then(res => res.json())
-      .then(data => {
-        const normalized = (data.requests || []).map((r: any) => ({
+      .then((data: { requests?: ApiIncomingFriendRequest[] }) => {
+        const normalized: FriendRequest[] = (data.requests ?? []).map((r) => ({
           id: r.id,
           from: r.sender,
           createdAt: r.createdAt,
@@ -37,7 +41,7 @@ export default function FriendRequests() {
 
   }, [requestsLoaded, setRequests])
 
-  const accept = async (req: any) => {
+  const accept = async (req: FriendRequest) => {
     const res = await api(`/friends/accept/${req.id}`, { method: 'POST' })
     if (!res.ok) {
       throw new Error("Failed to accept friend request")
@@ -54,61 +58,60 @@ export default function FriendRequests() {
   }
 
   if (requests.length === 0) {
-    return (<div className="flex flex-col items-center justify-center py-16 px-4 border-2 border-dashed rounded-2xl bg-muted/20"> <p className="text-sm font-medium text-muted-foreground italic">
-      No friend requests </p> </div>
+    return (
+      <div className="flex flex-col items-center justify-center py-16 px-4 border-2 border-dashed rounded-2xl bg-muted/20">
+        <p className="text-sm font-medium text-muted-foreground italic">
+          No friend requests
+        </p>
+      </div>
     )
   }
 
-  return (<div className="grid gap-3">
-    {requests.map((req: any) => (<Card
-      key={req.id}
-      className="group flex items-center justify-between p-4 shadow-sm border-muted/60 hover:border-muted-foreground/20 transition-all duration-200"
-    > <div className="flex items-center gap-4">
-        <Avatar className="h-11 w-11 border-2 border-background shadow-sm">
-          {req.from.avatar && (
-            <AvatarImage src={req.from.avatar} />
-          )}
-          <AvatarFallback className="bg-secondary text-secondary-foreground font-semibold text-xs">
-            {req.from.username.slice(0, 2).toUpperCase()}
-          </AvatarFallback>
-        </Avatar>
-
-        <div className="flex flex-col space-y-0.5">
-          <span className="text-sm font-bold tracking-tight group-hover:text-primary transition-colors">
-            {req.from.username}
-          </span>
-
-          <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-widest">
-            Sent {formatDistanceToNow(new Date(req.createdAt), { addSuffix: true })}
-          </span>
-        </div>
-
-      </div>
-
-      <div className="flex gap-2">
-
-        <Button
-          size="sm"
-          className="h-8 px-3 text-xs font-bold active:scale-95"
-          onClick={() => accept(req)}
-        >
-          <Check className="h-4 w-4" />
-        </Button>
-
-        <Button
-          size="sm"
-          variant="destructive"
-          className="h-8 px-3 text-xs font-bold active:scale-95"
-          onClick={() => reject(req.id)}
+  return (
+    <div className="grid gap-3">
+      {requests.map((req) => (
+        <Card
+          key={req.id}
+          className="flex items-center justify-between p-4 shadow-sm border-muted/60 hover:border-muted-foreground/20 transition-all duration-200"
         >
-          <X className="h-4 w-4" />
-        </Button>
-
-      </div>
-    </Card>
-    ))
-    }
-  </div>
-
+          <div className="flex items-center gap-4">
+            <UserAvatar
+              name={req.from.name || req.from.username}
+              avatar={req.from.avatar}
+              className="h-12 w-12 border-2 border-background shadow-sm"
+            />
+
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold text-foreground">
+                {req.from.name || req.from.username}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                @{req.from.username} · Sent {req.createdAt ? formatDistanceToNow(new Date(req.createdAt), { addSuffix: true }) : 'recently'}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              className="h-8 px-3 text-xs font-semibold bg-green-600 hover:bg-green-700 active:scale-95"
+              onClick={() => accept(req)}
+            >
+              <Check className="h-4 w-4 mr-1" />
+              Accept
+            </Button>
+
+            <Button
+              size="sm"
+              variant="outline"
+              className="h-8 px-3 text-xs font-semibold text-muted-foreground hover:text-destructive hover:border-destructive/30 active:scale-95"
+              onClick={() => reject(req.id)}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          </div>
+        </Card>
+      ))}
+    </div>
   )
 }
diff --git a/apps/frontend/src/app/zone/friends/PendingRequests.tsx b/apps/frontend/src/app/zone/friends/PendingRequests.tsx
index 6056696..942b12a 100644
--- a/apps/frontend/src/app/zone/friends/PendingRequests.tsx
+++ b/apps/frontend/src/app/zone/friends/PendingRequests.tsx
@@ -1,16 +1,18 @@
 "use client"
+
 import { api } from "@openchat/lib"
-import { useEffect, useState } from "react"
-import { Avatar, AvatarFallback, AvatarImage, Button, Card, Skeleton } from "packages/ui"
+import { useEffect } from "react"
+import { Button, Card, Skeleton } from "packages/ui"
 import { formatDistanceToNow } from "date-fns"
 import { useFriendsStore } from "@/app/stores/friends-store"
+import { X } from "lucide-react"
+import { UserAvatar } from "@/components/UserAvatar"
 
 export default function PendingRequests() {
   const pending = useFriendsStore((s) => s.pendingRequests)
   const pendingLoaded = useFriendsStore((s) => s.pendingRequestsLoaded)
   const setPendingRequests = useFriendsStore((s) => s.setPendingRequests)
   const removePendingRequest = useFriendsStore((s) => s.removePendingRequest)
-  const [processingIds, setProcessingIds] = useState<number[]>([])
 
   useEffect(() => {
     if (pendingLoaded) return
@@ -20,20 +22,15 @@ export default function PendingRequests() {
       .then((data) => {
         setPendingRequests(data.requests ?? [])
       })
-      .catch((error) => {
-        console.error("Failed to fetch pending requests:", error)
-      })
+      .catch(() => {})
   }, [pendingLoaded, setPendingRequests])
 
   const cancelRequest = async (id: number) => {
-    setProcessingIds(prev => [...prev, id])
     try {
       await api(`/friends/reject/${id}`, { method: "DELETE" })
       removePendingRequest(id)
     } catch (error) {
       console.error("Failed to cancel:", error)
-    } finally {
-      setProcessingIds(prev => prev.filter(pid => pid !== id))
     }
   }
 
@@ -43,7 +40,7 @@ export default function PendingRequests() {
         {[1, 2, 3].map((i) => (
           <div key={i} className="flex items-center justify-between p-4 border rounded-xl bg-card/50">
             <div className="flex items-center gap-4">
-              <Skeleton className="h-10 w-10 rounded-full bg-muted" />
+              <Skeleton className="h-12 w-12 rounded-full bg-muted" />
               <div className="space-y-2">
                 <Skeleton className="h-4 w-28 bg-muted" />
                 <Skeleton className="h-3 w-20 bg-muted/60" />
@@ -59,7 +56,7 @@ export default function PendingRequests() {
   if (pending.length === 0) {
     return (
       <div className="flex flex-col items-center justify-center py-16 px-4 border-2 border-dashed rounded-2xl bg-muted/20">
-        <p className="text-sm font-medium text-muted-foreground italic">No pending requests found</p>
+        <p className="text-sm font-medium text-muted-foreground italic">No pending requests</p>
       </div>
     )
   }
@@ -67,21 +64,20 @@ export default function PendingRequests() {
   return (
     <div className="grid gap-3">
       {pending.map(r => (
-        <Card key={r.id} className="group flex items-center justify-between p-4 shadow-sm border-muted/60 hover:border-muted-foreground/20 transition-all duration-200">
+        <Card key={r.id} className="flex items-center justify-between p-4 shadow-sm border-muted/60 hover:border-muted-foreground/20 transition-all duration-200">
           <div className="flex items-center gap-4">
-            <Avatar className="h-11 w-11 border-2 border-background shadow-sm">
-              {r.to.avatar && <AvatarImage src={r.to.avatar} alt={r.to.name ?? undefined} />}
-              <AvatarFallback className="bg-secondary text-secondary-foreground font-semibold text-xs">
-                {(r.to.name ?? "?").substring(0, 2).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
+            <UserAvatar
+              name={r.to.name || r.to.username}
+              avatar={r.to.avatar}
+              className="h-12 w-12 border-2 border-background shadow-sm"
+            />
 
-            <div className="flex flex-col space-y-0.5">
-              <span className="text-sm font-bold tracking-tight group-hover:text-primary transition-colors">
-                {r.to.name}
+            <div className="flex flex-col">
+              <span className="text-sm font-semibold text-foreground">
+                {r.to.name || r.to.username}
               </span>
-              <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-widest">
-                Sent {r.createdAt ? formatDistanceToNow(new Date(r.createdAt), { addSuffix: true }) : "recently"}
+              <span className="text-xs text-muted-foreground">
+                @{r.to.username} · Sent {r.createdAt ? formatDistanceToNow(new Date(r.createdAt), { addSuffix: true }) : "recently"}
               </span>
             </div>
           </div>
@@ -89,18 +85,11 @@ export default function PendingRequests() {
           <Button
             variant="outline"
             size="sm"
-            className="h-8 px-4 text-xs font-bold text-destructive hover:bg-destructive/5 hover:text-destructive hover:border-destructive/30 transition-all active:scale-95"
+            className="h-8 px-3 text-xs font-semibold text-muted-foreground hover:text-destructive hover:border-destructive/30 active:scale-95"
             onClick={() => cancelRequest(r.id)}
-            disabled={processingIds.includes(r.id)}
           >
-            {processingIds.includes(r.id) ? (
-              <div className="flex items-center gap-2">
-                <div className="w-3 h-3 border-2 border-destructive/20 border-t-destructive rounded-full animate-spin" />
-                <span>Wait</span>
-              </div>
-            ) : (
-              "Cancel"
-            )}
+            <X className="h-4 w-4 mr-1" />
+            Cancel
           </Button>
         </Card>
       ))}
diff --git a/apps/frontend/src/app/zone/page.tsx b/apps/frontend/src/app/zone/page.tsx
index c29c065..10b1425 100644
--- a/apps/frontend/src/app/zone/page.tsx
+++ b/apps/frontend/src/app/zone/page.tsx
@@ -14,6 +14,7 @@ import AddFriend from './friends/AddFriend'
 import { useFriendsStore } from '@/app/stores/friends-store'
 import { useStartDirectMessageMutation } from '@/features/chat/mutations'
 import { useUser } from '@/features/user/queries'
+import { VerifyEmailDialog } from '@/components/verify-email/VerifyEmailDialog'
 
 export default function ZoneHome() {
   const router = useRouter()
@@ -21,6 +22,7 @@ export default function ZoneHome() {
   const startDirectMessageMutation = useStartDirectMessageMutation()
   const [activeTab, setActiveTab] = useState<'friends' | 'requests' | 'pending' | 'blocked' | 'add'>('friends')
   const [searchQuery, setSearchQuery] = useState('')
+  const [verifyEmailOpen, setVerifyEmailOpen] = useState(false)
 
   const requests = useFriendsStore(s => s.requests)
   const friends = useFriendsStore(s => s.friends)
@@ -39,7 +41,7 @@ export default function ZoneHome() {
             <span>Please verify your email</span>
           </div>
           <button
-            onClick={() => router.push('/verify-email')}
+            onClick={() => setVerifyEmailOpen(true)}
             className="font-medium hover:underline"
           >
             Verify now
@@ -127,6 +129,8 @@ export default function ZoneHome() {
           </>
         )}
       </div>
+
+      <VerifyEmailDialog open={verifyEmailOpen} onOpenChange={setVerifyEmailOpen} />
     </div>
   )
 }
diff --git a/apps/frontend/src/app/zone/zones/[zonePublicId]/channels/[channelPublicId]/page.tsx b/apps/frontend/src/app/zone/zones/[zonePublicId]/channels/[channelPublicId]/page.tsx
index 55af1ee..3f6e2f2 100644
--- a/apps/frontend/src/app/zone/zones/[zonePublicId]/channels/[channelPublicId]/page.tsx
+++ b/apps/frontend/src/app/zone/zones/[zonePublicId]/channels/[channelPublicId]/page.tsx
@@ -12,22 +12,50 @@ import {
     Sheet,
     SheetContent,
     SheetTitle,
+    SheetDescription,
     SheetTrigger,
 } from 'packages/ui'
-import { Check, Hash, Info, Link2, Menu, Plus, Send } from 'lucide-react'
-import { getAvatarUrl, socket } from '@openchat/lib'
+import {
+    Check,
+    Hash,
+    Info,
+    Link2,
+    Menu,
+    Plus,
+    Send,
+    Smile,
+    Pin,
+    Image,
+    MoreHorizontal,
+    Pencil,
+    Trash2,
+    Gift,
+} from 'lucide-react'
+import { api, getAvatarUrl, socket } from '@openchat/lib'
 import { VisuallyHidden } from '@radix-ui/react-visually-hidden'
 import MessageText from '../../../../_components/chat/MessageText'
-import ZoneDashboardSheet from '../../../../_components/zones/ZoneDashboardSheet'
+import ZoneSettings from '../../../../_components/zones/ZoneSettings'
 import ZoneSidebar from '../../../../_components/ZoneSidebar'
 import ZonesList from '../../../../_components/zones/ZonesList'
+import GifPicker from '../../../../_components/chat/GifPicker'
+import EmojiPicker from '../../../../_components/chat/EmojiPicker'
 import { useChatsStore } from '@/app/stores/chat-store'
-import { useSendChannelMessageMutation } from '@/features/chat/mutations'
-import { useMessages } from '@/features/chat/queries'
+import {
+    useSendChannelMessageMutation,
+    useEditChannelMessageMutation,
+    useDeleteChannelMessageMutation,
+} from '@/features/chat/mutations'
+import { useMessages, useChannelPinnedMessages } from '@/features/chat/queries'
 import { useChannel } from '@/features/channels/queries'
 import { useCreateZoneInviteMutation } from '@/features/zones/mutations'
 import { useZone } from '@/features/zones/queries'
 import { useUser } from '@/features/user/queries'
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from 'packages/ui'
 
 function getMessageTimestamp(message: { createdAt?: string; id: number }) {
     if (message.createdAt) {
@@ -38,6 +66,19 @@ function getMessageTimestamp(message: { createdAt?: string; id: number }) {
     return message.id
 }
 
+type ChannelMessage = {
+    id: number
+    text?: string | null
+    fileUrl?: string | null
+    fileType?: string | null
+    senderId: number
+    sender?: { id: number; username: string; avatar?: string | null } | null
+    createdAt: string
+    isDeleted?: boolean
+    isPinned?: boolean
+    pinnedAt?: string | null
+}
+
 export default function ChannelPage() {
     const { zonePublicId, channelPublicId } = useParams<{
         zonePublicId: string
@@ -53,10 +94,22 @@ export default function ChannelPage() {
         zonePublicId,
         channelPublicId
     )
+    const { data: pinnedMessages = [] } = useChannelPinnedMessages(
+        zonePublicId,
+        channelPublicId
+    )
     const sendMessageMutation = useSendChannelMessageMutation(
         zonePublicId,
         channelPublicId
     )
+    const editMessageMutation = useEditChannelMessageMutation(
+        zonePublicId,
+        channelPublicId
+    )
+    const deleteMessageMutation = useDeleteChannelMessageMutation(
+        zonePublicId,
+        channelPublicId
+    )
     const createZoneInviteMutation = useCreateZoneInviteMutation(zonePublicId)
 
     const [input, setInput] = useState('')
@@ -64,9 +117,17 @@ export default function ChannelPage() {
     const [previewUrl, setPreviewUrl] = useState<string | null>(null)
     const [inviteCopied, setInviteCopied] = useState(false)
     const [dashboardOpen, setDashboardOpen] = useState(false)
+    const [showGifs, setShowGifs] = useState(false)
+    const [showEmojis, setShowEmojis] = useState(false)
+    const [editingId, setEditingId] = useState<number | null>(null)
+    const [editText, setEditText] = useState('')
+    const [pinnedPanelOpen, setPinnedPanelOpen] = useState(false)
+    const [typingUsers, setTypingUsers] = useState<Set<number>>(new Set())
 
     const messagesRef = useRef<HTMLDivElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
+    const inputRef = useRef<HTMLInputElement>(null)
+    const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
     const setActiveChat = useChatsStore((state) => state.setActiveChat)
     const setActiveChannel = useChatsStore((state) => state.setActiveChannel)
@@ -103,6 +164,27 @@ export default function ChannelPage() {
         }
     }, [channelPublicId, zonePublicId])
 
+    useEffect(() => {
+        const handler = ({
+            userId,
+            isTyping,
+        }: {
+            userId: number
+            isTyping: boolean
+        }) => {
+            setTypingUsers((prev) => {
+                const next = new Set(prev)
+                if (isTyping) next.add(userId)
+                else next.delete(userId)
+                return next
+            })
+        }
+        socket.on('chat:typing', handler)
+        return () => {
+            socket.off('chat:typing', handler)
+        }
+    }, [])
+
     useEffect(() => {
         if (!messagesRef.current) return
 
@@ -161,10 +243,80 @@ export default function ChannelPage() {
         sendMessageMutation,
     ])
 
+    const handlePinMessage = useCallback(async (messageId: number) => {
+        await api(`/chats/messages/${messageId}/pin`, {
+            method: 'PATCH',
+            credentials: 'include',
+        })
+    }, [])
+
+    const handleEditMessage = useCallback(
+        async (messageId: number) => {
+            if (!editText.trim()) return
+            await editMessageMutation.mutateAsync({
+                messageId,
+                text: editText,
+            })
+            setEditingId(null)
+            setEditText('')
+        },
+        [editText, editMessageMutation]
+    )
+
+    const handleDeleteMessage = useCallback(
+        async (messageId: number) => {
+            await deleteMessageMutation.mutateAsync(messageId)
+        },
+        [deleteMessageMutation]
+    )
+
+    const startEditing = useCallback(
+        (
+            message: Omit<ChannelMessage, 'createdAt'> & { createdAt?: string }
+        ) => {
+            setEditingId(message.id)
+            setEditText(message.text || '')
+        },
+        []
+    )
+
+    const emitTyping = useCallback(() => {
+        if (typingTimeoutRef.current) {
+            clearTimeout(typingTimeoutRef.current)
+        }
+        socket.emit('chat:typing', {
+            chatPublicId: zonePublicId,
+            channelPublicId,
+            isTyping: true,
+        })
+        typingTimeoutRef.current = setTimeout(() => {
+            socket.emit('chat:typing', {
+                chatPublicId: zonePublicId,
+                channelPublicId,
+                isTyping: false,
+            })
+            typingTimeoutRef.current = null
+        }, 3000)
+    }, [channelPublicId, zonePublicId])
+
+    useEffect(() => {
+        return () => {
+            if (typingTimeoutRef.current) {
+                clearTimeout(typingTimeoutRef.current)
+            }
+        }
+    }, [])
+
+    const scrollToMessage = useCallback((messageId: number) => {
+        const element = document.getElementById(`message-${messageId}`)
+        if (!element) return
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    }, [])
+
     if (zoneLoading || channelLoading || messagesLoading || !zone || !channel) {
         return (
             <div className="flex h-full min-h-0 flex-col bg-background">
-                <div className="h-12 border-b border-white/5 flex items-center px-4 gap-2">
+                <div className="h-12 border-b border-border flex items-center px-4 gap-2">
                     <Skeleton className="h-5 w-5 rounded-full" />
                     <Skeleton className="h-4 w-24" />
                 </div>
@@ -186,14 +338,16 @@ export default function ChannelPage() {
         )
     }
 
+    const currentUserId = currentUser?.id
+
     return (
         <div className="flex h-full min-h-0 flex-col bg-background">
-            <div className="h-12 shrink-0 border-b border-white/5 flex items-center px-4 justify-between shadow-sm bg-background">
+            <div className="h-12 shrink-0 border-b border-border flex items-center px-4 justify-between shadow-sm bg-background">
                 <div className="flex items-center gap-2">
                     <div className="md:hidden">
                         <Sheet>
                             <SheetTrigger asChild>
-                                <button className="rounded-md p-1 text-zinc-400 hover:bg-white/5 hover:text-white">
+                                <button className="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground">
                                     <Menu className="h-5 w-5" />
                                 </button>
                             </SheetTrigger>
@@ -208,12 +362,22 @@ export default function ChannelPage() {
                             </SheetContent>
                         </Sheet>
                     </div>
-                    <Hash className="w-5 h-5 text-zinc-500" />
+                    <Hash className="w-5 h-5 text-muted-foreground" />
                     <h1 className="font-bold text-sm tracking-tight">
                         {channel.name}
                     </h1>
                 </div>
-                <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                    {pinnedMessages.length > 0 && (
+                        <button
+                            type="button"
+                            className="hidden sm:flex items-center gap-1 text-[11px] text-amber-500 hover:underline"
+                            onClick={() => setPinnedPanelOpen(true)}
+                        >
+                            <Pin className="h-3 w-3" />
+                            {pinnedMessages.length} pinned
+                        </button>
+                    )}
                     <Button
                         size="icon"
                         variant="ghost"
@@ -221,7 +385,7 @@ export default function ChannelPage() {
                             void copyInviteLink()
                         }}
                         disabled={createZoneInviteMutation.isPending}
-                        className="h-8 w-8 text-zinc-400 hover:text-white transition-colors"
+                        className="h-8 w-8"
                         title="Copy invite link"
                     >
                         {inviteCopied ? (
@@ -234,15 +398,75 @@ export default function ChannelPage() {
                         size="icon"
                         variant="ghost"
                         onClick={() => setDashboardOpen(true)}
-                        className="h-8 w-8 text-zinc-400 hover:text-white transition-colors"
+                        className="h-8 w-8"
                     >
                         <Info size={18} />
                     </Button>
                 </div>
             </div>
 
+            <Sheet open={pinnedPanelOpen} onOpenChange={setPinnedPanelOpen}>
+                <SheetContent side="right" className="w-full sm:max-w-md">
+                    <SheetTitle>Pinned Messages</SheetTitle>
+                    <SheetDescription>
+                        Quick access to the most important messages in this
+                        channel.
+                    </SheetDescription>
+
+                    <div className="mt-6 space-y-3">
+                        {pinnedMessages.length === 0 && (
+                            <p className="text-sm text-muted-foreground">
+                                No pinned messages yet.
+                            </p>
+                        )}
+                        {pinnedMessages.map((m) => (
+                            <div
+                                key={m.id}
+                                className="p-3 rounded-lg border bg-muted/30 cursor-pointer hover:bg-muted/50 transition-colors"
+                                onClick={() => scrollToMessage(m.id)}
+                            >
+                                <div className="flex items-center gap-2">
+                                    <Avatar className="h-6 w-6">
+                                        <AvatarImage
+                                            src={getAvatarUrl(m.sender?.avatar)}
+                                        />
+                                        <AvatarFallback className="text-[10px]">
+                                            {m.sender?.username[0]?.toUpperCase()}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    <span className="text-xs font-medium">
+                                        {m.sender?.username}
+                                    </span>
+                                    <span className="text-[10px] text-muted-foreground">
+                                        {new Date(
+                                            getMessageTimestamp(m)
+                                        ).toLocaleTimeString([], {
+                                            hour: '2-digit',
+                                            minute: '2-digit',
+                                        })}
+                                    </span>
+                                </div>
+                                <p className="text-sm mt-1 line-clamp-2">
+                                    {m.isDeleted ? (
+                                        <span className="italic text-muted-foreground">
+                                            Message deleted
+                                        </span>
+                                    ) : m.text ? (
+                                        <MessageText text={m.text} />
+                                    ) : m.fileUrl ? (
+                                        <span className="text-muted-foreground">
+                                            Sent an image
+                                        </span>
+                                    ) : null}
+                                </p>
+                            </div>
+                        ))}
+                    </div>
+                </SheetContent>
+            </Sheet>
+
             {zone && (
-                <ZoneDashboardSheet
+                <ZoneSettings
                     zonePublicId={zonePublicId}
                     zoneName={zone.name}
                     zoneAvatar={zone.avatar}
@@ -257,21 +481,21 @@ export default function ChannelPage() {
             >
                 <div className="flex flex-col min-h-full justify-end">
                     <div className="px-4">
-                        <div className="w-16 h-16 bg-white/[0.05] rounded-full flex items-center justify-center mb-4">
-                            <Hash size={32} className="text-white" />
+                        <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4">
+                            <Hash size={32} />
                         </div>
                         {channel && (
                             <>
-                                <h2 className="text-2xl font-bold text-white mb-1">
+                                <h2 className="text-2xl font-bold mb-1">
                                     Welcome to #{channel.name}!
                                 </h2>
-                                <p className="text-zinc-400 text-sm">
+                                <p className="text-muted-foreground text-sm">
                                     This is the start of the #{channel.name}{' '}
                                     channel.
                                 </p>
                             </>
                         )}
-                        <div className="h-[1px] bg-white/5 w-full my-6" />
+                        <div className="h-[1px] bg-border w-full my-6" />
                     </div>
 
                     {messages.map((message, index) => {
@@ -287,26 +511,70 @@ export default function ChannelPage() {
                             username: 'User',
                             avatar: null,
                         }
+                        const isOwn = message.senderId === currentUserId
 
                         if (isGrouped) {
                             return (
                                 <div
                                     key={message.id}
-                                    className="pl-14 pr-4 py-0.5 hover:bg-white/[0.02] transition-colors group relative"
+                                    id={`message-${message.id}`}
+                                    className="pl-14 pr-4 py-0.5 hover:bg-muted/30 transition-colors group relative"
                                 >
-                                    <div className="text-[14px] text-zinc-300 leading-[1.375rem]">
+                                    <div className="text-[14px] leading-[1.375rem]">
                                         {message.isDeleted ? (
-                                            <span className="text-zinc-500 italic">
+                                            <span className="italic text-muted-foreground">
                                                 Message deleted
                                             </span>
                                         ) : message.text ? (
-                                            <MessageText text={message.text} />
+                                            editingId === message.id ? (
+                                                <div className="flex gap-2">
+                                                    <Input
+                                                        value={editText}
+                                                        onChange={(e) =>
+                                                            setEditText(
+                                                                e.target.value
+                                                            )
+                                                        }
+                                                        className="h-8"
+                                                        onKeyDown={(e) => {
+                                                            if (
+                                                                e.key ===
+                                                                'Enter'
+                                                            )
+                                                                handleEditMessage(
+                                                                    message.id
+                                                                )
+                                                            if (
+                                                                e.key ===
+                                                                'Escape'
+                                                            )
+                                                                setEditingId(
+                                                                    null
+                                                                )
+                                                        }}
+                                                    />
+                                                    <Button
+                                                        size="sm"
+                                                        onClick={() =>
+                                                            handleEditMessage(
+                                                                message.id
+                                                            )
+                                                        }
+                                                    >
+                                                        Save
+                                                    </Button>
+                                                </div>
+                                            ) : (
+                                                <MessageText
+                                                    text={message.text}
+                                                />
+                                            )
                                         ) : null}
                                     </div>
                                     {message.fileUrl && (
                                         <img
                                             src={message.fileUrl}
-                                            className="mt-2 rounded-lg max-h-80 ring-1 ring-white/10"
+                                            className="mt-2 rounded-lg max-h-80 ring-1 ring-border"
                                         />
                                     )}
                                 </div>
@@ -316,23 +584,24 @@ export default function ChannelPage() {
                         return (
                             <div
                                 key={message.id}
-                                className="flex gap-4 px-4 py-3 hover:bg-white/[0.02] transition-colors mt-2"
+                                id={`message-${message.id}`}
+                                className="flex gap-4 px-4 py-3 hover:bg-muted/30 transition-colors mt-2 group"
                             >
-                                <Avatar className="h-10 w-10 shrink-0 mt-0.5 ring-1 ring-white/5">
+                                <Avatar className="h-10 w-10 shrink-0 mt-0.5">
                                     <AvatarImage
                                         src={getAvatarUrl(sender.avatar)}
                                     />
-                                    <AvatarFallback className="bg-primary text-primary-foreground">
+                                    <AvatarFallback>
                                         {sender.username[0]?.toUpperCase()}
                                     </AvatarFallback>
                                 </Avatar>
 
                                 <div className="flex-1 min-w-0">
                                     <div className="flex items-baseline gap-2 mb-0.5">
-                                        <span className="font-bold text-[15px] text-white hover:underline cursor-pointer">
+                                        <span className="font-bold text-[15px] hover:underline cursor-pointer">
                                             {sender.username}
                                         </span>
-                                        <span className="text-[11px] text-zinc-500">
+                                        <span className="text-[11px] text-muted-foreground">
                                             {new Date(
                                                 getMessageTimestamp(message)
                                             ).toLocaleTimeString([], {
@@ -340,12 +609,45 @@ export default function ChannelPage() {
                                                 minute: '2-digit',
                                             })}
                                         </span>
+                                        {message.isPinned && (
+                                            <Pin className="h-3 w-3 text-amber-500" />
+                                        )}
                                     </div>
-                                    <div className="text-[14px] text-zinc-300 leading-[1.375rem] whitespace-pre-wrap break-words">
+                                    <div className="text-[14px] leading-[1.375rem] whitespace-pre-wrap break-words">
                                         {message.isDeleted ? (
-                                            <span className="text-zinc-500 italic">
+                                            <span className="italic text-muted-foreground">
                                                 Message deleted
                                             </span>
+                                        ) : editingId === message.id ? (
+                                            <div className="flex gap-2">
+                                                <Input
+                                                    value={editText}
+                                                    onChange={(e) =>
+                                                        setEditText(
+                                                            e.target.value
+                                                        )
+                                                    }
+                                                    className="h-8"
+                                                    onKeyDown={(e) => {
+                                                        if (e.key === 'Enter')
+                                                            handleEditMessage(
+                                                                message.id
+                                                            )
+                                                        if (e.key === 'Escape')
+                                                            setEditingId(null)
+                                                    }}
+                                                />
+                                                <Button
+                                                    size="sm"
+                                                    onClick={() =>
+                                                        handleEditMessage(
+                                                            message.id
+                                                        )
+                                                    }
+                                                >
+                                                    Save
+                                                </Button>
+                                            </div>
                                         ) : message.text ? (
                                             <MessageText text={message.text} />
                                         ) : null}
@@ -353,29 +655,116 @@ export default function ChannelPage() {
                                     {message.fileUrl && (
                                         <img
                                             src={message.fileUrl}
-                                            className="mt-2 rounded-lg max-h-80 ring-1 ring-white/10"
+                                            className="mt-2 rounded-lg max-h-80 ring-1 ring-border"
                                         />
                                     )}
                                 </div>
+
+                                {!message.isDeleted && isOwn && (
+                                    <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-start gap-1">
+                                        <DropdownMenu>
+                                            <DropdownMenuTrigger asChild>
+                                                <button className="p-1.5 rounded-md hover:bg-muted transition-colors">
+                                                    <MoreHorizontal className="h-4 w-4" />
+                                                </button>
+                                            </DropdownMenuTrigger>
+                                            <DropdownMenuContent>
+                                                <DropdownMenuItem
+                                                    onClick={() =>
+                                                        startEditing(message)
+                                                    }
+                                                    className="cursor-pointer"
+                                                >
+                                                    <Pencil className="mr-2 h-4 w-4" />
+                                                    Edit
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem
+                                                    onClick={() =>
+                                                        handleDeleteMessage(
+                                                            message.id
+                                                        )
+                                                    }
+                                                    className="cursor-pointer text-red-500 focus:text-red-500"
+                                                >
+                                                    <Trash2 className="mr-2 h-4 w-4" />
+                                                    Delete
+                                                </DropdownMenuItem>
+                                                <DropdownMenuItem
+                                                    onClick={() =>
+                                                        handlePinMessage(
+                                                            message.id
+                                                        )
+                                                    }
+                                                    className="cursor-pointer"
+                                                >
+                                                    <Pin className="mr-2 h-4 w-4" />
+                                                    {message.isPinned
+                                                        ? 'Unpin'
+                                                        : 'Pin'}
+                                                </DropdownMenuItem>
+                                            </DropdownMenuContent>
+                                        </DropdownMenu>
+                                    </div>
+                                )}
                             </div>
                         )
                     })}
+
+                    {typingUsers.size > 0 &&
+                        Array.from(typingUsers).map((uid) => {
+                            const user = messages.find(
+                                (m) => m.senderId === uid
+                            )?.sender
+                            if (!user) return null
+                            return (
+                                <div key={uid} className="px-4 py-1">
+                                    <span className="text-xs text-muted-foreground animate-pulse">
+                                        {user.username} is typing...
+                                    </span>
+                                </div>
+                            )
+                        })}
                 </div>
             </div>
 
             <div
-                className="shrink-0 border-t border-white/5 bg-background/95 px-4 pt-2 safe-bottom backdrop-blur"
+                className="shrink-0 border-t border-border bg-background/95 px-4 pt-2 safe-bottom backdrop-blur"
                 style={{
                     paddingBottom:
                         'calc(env(safe-area-inset-bottom, 0px) + 1rem)',
                 }}
             >
-                <div className="bg-white/[0.04] rounded-lg p-2.5 flex flex-col gap-2 shadow-lg ring-1 ring-white/5 focus-within:ring-white/10 transition-shadow">
+                {showGifs && (
+                    <div className="mb-2">
+                        <GifPicker
+                            onSelect={(gifUrl) => {
+                                setInput((prev) => prev + gifUrl)
+                                setShowGifs(false)
+                                inputRef.current?.focus()
+                            }}
+                            onClose={() => setShowGifs(false)}
+                        />
+                    </div>
+                )}
+
+                {showEmojis && (
+                    <div className="mb-2">
+                        <EmojiPicker
+                            onSelect={(emoji) => {
+                                setInput((prev) => prev + emoji)
+                                inputRef.current?.focus()
+                            }}
+                            onClose={() => setShowEmojis(false)}
+                        />
+                    </div>
+                )}
+
+                <div className="bg-muted rounded-lg p-2.5 flex flex-col gap-2 shadow-sm border focus-within:border-primary transition-colors">
                     {previewUrl && (
                         <div className="relative w-24 h-24 mb-2 group">
                             <img
                                 src={previewUrl}
-                                className="w-full h-full object-cover rounded-md ring-1 ring-white/10"
+                                className="w-full h-full object-cover rounded-md ring-1 ring-border"
                             />
                             <button
                                 onClick={clearSelectedFile}
@@ -392,16 +781,20 @@ export default function ChannelPage() {
                             size="icon"
                             variant="ghost"
                             onClick={() => fileInputRef.current?.click()}
-                            className="h-8 w-8 text-zinc-400 hover:text-white transition-colors shrink-0"
+                            className="h-8 w-8 shrink-0"
                         >
                             <Plus className="h-5 w-5" />
                         </Button>
 
                         <Input
+                            ref={inputRef}
                             value={input}
-                            onChange={(event) => setInput(event.target.value)}
+                            onChange={(event) => {
+                                setInput(event.target.value)
+                                emitTyping()
+                            }}
                             placeholder={`Message #${channel.name}`}
-                            className="bg-transparent border-none focus-visible:ring-0 px-0 h-auto text-sm placeholder:text-zinc-500 text-zinc-200"
+                            className="bg-transparent border-none focus-visible:ring-0 px-0 h-auto text-sm"
                             onKeyDown={(event) => {
                                 if (event.key === 'Enter' && !event.shiftKey) {
                                     event.preventDefault()
@@ -410,6 +803,24 @@ export default function ChannelPage() {
                             }}
                         />
 
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            onClick={() => setShowGifs(!showGifs)}
+                            className={`h-8 w-8 shrink-0 ${showGifs ? 'bg-muted' : ''}`}
+                        >
+                            <Gift className="h-5 w-5" />
+                        </Button>
+
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            onClick={() => setShowEmojis(!showEmojis)}
+                            className={`h-8 w-8 shrink-0 ${showEmojis ? 'bg-muted' : ''}`}
+                        >
+                            <Smile className="h-5 w-5" />
+                        </Button>
+
                         <Button
                             size="icon"
                             disabled={
@@ -419,7 +830,7 @@ export default function ChannelPage() {
                             onClick={() => {
                                 void send()
                             }}
-                            className="h-8 w-8 shrink-0 bg-primary/20 hover:bg-primary/40 text-primary transition-colors"
+                            className="h-8 w-8 shrink-0"
                         >
                             <Send className="h-4 w-4" />
                         </Button>
@@ -442,7 +853,7 @@ export default function ChannelPage() {
                         setPreviewUrl(URL.createObjectURL(file))
                     }}
                 />
-                <p className="text-[10px] text-zinc-500 mt-2 px-2">
+                <p className="text-[10px] text-muted-foreground mt-2 px-2">
                     Press Enter to send. Use Shift+Enter for new line.
                 </p>
             </div>
diff --git a/apps/frontend/src/app/zone/zones/page.tsx b/apps/frontend/src/app/zone/zones/page.tsx
index df0d40b..0304899 100644
--- a/apps/frontend/src/app/zone/zones/page.tsx
+++ b/apps/frontend/src/app/zone/zones/page.tsx
@@ -50,12 +50,12 @@ export default function ZonesHubPage() {
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-background">
-      <div className="shrink-0 border-b border-white/5 px-4 py-4">
+    <div className="flex h-full min-h-0 flex-col bg-main">
+      <div className="shrink-0 px-4 py-5">
         <div className="mb-4 flex items-center justify-between">
           <div>
-            <p className="text-[11px] font-black uppercase tracking-[0.22em] text-zinc-500">Spaces</p>
-            <h1 className="mt-1 text-2xl font-bold text-white">Your zones</h1>
+            <p className="text-[11px] font-black uppercase tracking-[0.22em] text-muted-foreground">Spaces</p>
+            <h1 className="mt-1 text-2xl font-bold text-foreground">Your zones</h1>
           </div>
           <Button
             onClick={() => setShowCreateModal(true)}
@@ -67,20 +67,20 @@ export default function ZonesHubPage() {
         </div>
 
         <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-zinc-500" />
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <input
             type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder="Search zones..."
-            className="w-full h-10 pl-10 pr-10 rounded-xl bg-white/[0.03] border border-white/[0.08] text-white placeholder:text-white/30 outline-none transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20"
+            className="w-full h-10 pl-10 pr-10 rounded-xl bg-surface border border-white/10 text-foreground placeholder:text-muted-foreground/50 outline-none transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20"
           />
           {searchQuery && (
             <button
               onClick={() => setSearchQuery('')}
               className="absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded hover:bg-white/10 transition-colors"
             >
-              <X className="h-4 w-4 text-zinc-400" />
+              <X className="h-4 w-4 text-muted-foreground" />
             </button>
           )}
         </div>
@@ -90,17 +90,17 @@ export default function ZonesHubPage() {
         {isLoading ? (
           <div className="space-y-3">
             {[...Array(4)].map((_, index) => (
-              <div key={index} className="h-28 animate-pulse rounded-3xl border border-white/5 bg-white/[0.03]" />
+              <div key={index} className="h-28 animate-pulse rounded-3xl border border-white/5 bg-surface" />
             ))}
           </div>
         ) : filteredZones.length === 0 ? (
           zones.length === 0 ? (
-            <div className="flex min-h-full flex-col items-center justify-center rounded-[32px] border border-dashed border-white/10 bg-white/[0.03] px-6 py-12 text-center">
+            <div className="flex min-h-full flex-col items-center justify-center rounded-[32px] border border-dashed border-white/10 bg-surface px-6 py-12 text-center">
               <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-3xl bg-primary/15 text-primary">
                 <Hash className="h-7 w-7" />
               </div>
-              <h2 className="text-xl font-bold text-white">No zones yet</h2>
-              <p className="mt-2 max-w-xs text-sm text-zinc-400">
+              <h2 className="text-xl font-bold text-foreground">No zones yet</h2>
+              <p className="mt-2 max-w-xs text-sm text-muted-foreground">
                 Create your first zone and keep your chats and channels in one place.
               </p>
               <Button onClick={() => setShowCreateModal(true)} className="mt-6 rounded-2xl px-5">
@@ -110,9 +110,9 @@ export default function ZonesHubPage() {
             </div>
           ) : (
             <div className="flex min-h-full flex-col items-center justify-center px-6 py-12 text-center">
-              <Search className="h-10 w-10 text-zinc-600 mb-4" />
-              <h2 className="text-lg font-bold text-white">No results found</h2>
-              <p className="mt-2 max-w-xs text-sm text-zinc-400">
+              <Search className="h-10 w-10 text-muted-foreground mb-4" />
+              <h2 className="text-lg font-bold text-foreground">No results found</h2>
+              <p className="mt-2 max-w-xs text-sm text-muted-foreground">
                 No zones matching "{searchQuery}"
               </p>
               <Button 
@@ -180,7 +180,7 @@ function ZoneCard({
         'w-full rounded-[28px] border px-4 py-4 text-left transition-all active:scale-[0.99]',
         isRecent
           ? 'border-primary/30 bg-primary/10 shadow-[0_20px_50px_rgba(124,58,237,0.16)]'
-          : 'border-white/6 bg-white/[0.03] hover:bg-white/[0.05]'
+          : 'border-white/6 bg-surface hover:bg-white/[0.05]'
       )}
     >
       <div className="flex items-start gap-4">
@@ -201,8 +201,8 @@ function ZoneCard({
         <div className="min-w-0 flex-1">
           <div className="flex items-center justify-between gap-3">
             <div className="min-w-0">
-              <h2 className="truncate text-base font-bold text-white">{zone.name}</h2>
-              <p className="mt-1 text-xs uppercase tracking-[0.18em] text-zinc-500">
+              <h2 className="truncate text-base font-bold text-foreground">{zone.name}</h2>
+              <p className="mt-1 text-xs uppercase tracking-[0.18em] text-muted-foreground">
                 {zoneChannels.length > 0
                   ? `${textChannels.length} text • ${voiceChannels.length} voice`
                   : 'Hover or tap to warm this zone'}
@@ -227,7 +227,7 @@ function ZoneCard({
                 </span>
               ))}
               {zoneChannels.length > 3 && (
-                <span className="inline-flex items-center rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-zinc-400">
+                <span className="inline-flex items-center rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-muted-foreground">
                   +{zoneChannels.length - 3} more
                 </span>
               )}
diff --git a/apps/frontend/src/components/Avatar.tsx b/apps/frontend/src/components/Avatar.tsx
new file mode 100644
index 0000000..552e764
--- /dev/null
+++ b/apps/frontend/src/components/Avatar.tsx
@@ -0,0 +1,4 @@
+'use client'
+
+export { UserAvatar as Avatar } from './UserAvatar'
+export type { UserAvatarProps as AvatarProps } from './UserAvatar'
diff --git a/apps/frontend/src/components/ChatHeader.tsx b/apps/frontend/src/components/ChatHeader.tsx
new file mode 100644
index 0000000..c43b220
--- /dev/null
+++ b/apps/frontend/src/components/ChatHeader.tsx
@@ -0,0 +1,150 @@
+'use client'
+
+import { memo, useMemo, type ReactNode } from 'react'
+import { formatDistanceToNow } from 'date-fns'
+import { PhoneCall, Video, MoreVertical } from 'lucide-react'
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from 'packages/ui'
+import { cn } from '@openchat/lib'
+import { UserAvatar } from '@/components/UserAvatar'
+
+export type ChatHeaderUser = {
+  id: string | number
+  name: string
+  avatar?: string | null
+  isOnline?: boolean
+  lastSeen?: string // ISO date
+}
+
+export type ChatHeaderProps = {
+  user: ChatHeaderUser
+  leading?: ReactNode
+  center?: ReactNode
+  trailing?: ReactNode
+  moreMenu?: ReactNode
+
+  onCall?: () => void
+  onVideo?: () => void
+
+  callDisabled?: boolean
+  videoDisabled?: boolean
+  moreDisabled?: boolean
+
+  className?: string
+}
+
+function formatLastSeen(lastSeen?: string) {
+  if (!lastSeen) return null
+  const date = new Date(lastSeen)
+  if (Number.isNaN(date.getTime())) return null
+  return `Last seen ${formatDistanceToNow(date, { addSuffix: true })}`
+}
+
+function ChatHeaderImpl({
+  user,
+  leading,
+  center,
+  trailing,
+  moreMenu,
+  onCall,
+  onVideo,
+  callDisabled,
+  videoDisabled,
+  moreDisabled,
+  className,
+}: ChatHeaderProps) {
+  const name = user.name?.trim() || 'User'
+
+  const status = useMemo(() => {
+    if (user.isOnline === true) return { type: 'online' as const, text: 'Online' }
+    const lastSeen = formatLastSeen(user.lastSeen)
+    if (lastSeen) return { type: 'lastSeen' as const, text: lastSeen }
+    return null
+  }, [user.isOnline, user.lastSeen])
+
+  return (
+    <div
+      className={cn(
+        'sticky top-0 z-10 flex items-center justify-between h-16 px-4 border-b bg-background gap-3',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-3 min-w-0">
+        {leading}
+
+        <UserAvatar
+          name={name}
+          avatar={user.avatar}
+          className="w-10 h-10"
+          fallbackClassName="bg-primary/20 text-primary font-bold"
+        />
+
+        <div className="flex flex-col min-w-0">
+          <span className="font-semibold truncate max-w-[220px] sm:max-w-[320px]">
+            {name}
+          </span>
+
+          {status?.type === 'online' ? (
+            <span className="text-xs text-green-500 flex items-center gap-1">
+              <span className="w-2 h-2 bg-green-500 rounded-full" aria-hidden="true" />
+              {status.text}
+            </span>
+          ) : status?.type === 'lastSeen' ? (
+            <span className="text-xs text-muted-foreground">{status.text}</span>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex-1 min-w-0 flex items-center justify-center">{center}</div>
+
+      <div className="flex items-center gap-2 shrink-0">
+        {trailing}
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-10 w-10 rounded-full"
+          aria-label="Call"
+          onClick={onCall}
+          disabled={callDisabled || !onCall}
+        >
+          <PhoneCall className="h-4 w-4" />
+        </Button>
+
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="h-10 w-10 rounded-full"
+          aria-label="Video call"
+          onClick={onVideo}
+          disabled={videoDisabled || !onVideo}
+        >
+          <Video className="h-4 w-4" />
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              className="h-10 w-10 rounded-full"
+              aria-label="More options"
+              disabled={moreDisabled || !moreMenu}
+            >
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          {moreMenu ? <DropdownMenuContent align="end" className="w-44">{moreMenu}</DropdownMenuContent> : null}
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}
+
+export const ChatHeader = memo(ChatHeaderImpl)
diff --git a/apps/frontend/src/components/ChatSidebar.tsx b/apps/frontend/src/components/ChatSidebar.tsx
new file mode 100644
index 0000000..e67c30a
--- /dev/null
+++ b/apps/frontend/src/components/ChatSidebar.tsx
@@ -0,0 +1,168 @@
+'use client'
+
+import { Button } from 'packages/ui'
+import { UserAvatar } from '@/components/UserAvatar'
+import { cn } from '@openchat/lib'
+
+export type Profile = {
+  id: string | number
+  name: string
+  avatar?: string | null
+  bio?: string | null
+  mutualFriends?: { id: string; name: string }[]
+  mutualZones?: { id: string; name: string }[]
+  friendStatus?: 'none' | 'pending' | 'accepted'
+}
+
+export type ChatSidebarProps = {
+  profile: Profile
+  canManageFriend?: boolean
+  onAddFriend?: () => void
+  onRemoveFriend?: () => void
+  onBlock?: () => void
+  onViewProfile?: () => void
+  className?: string
+}
+
+export function ChatSidebar({
+  profile,
+  canManageFriend,
+  onAddFriend,
+  onRemoveFriend,
+  onBlock,
+  onViewProfile,
+  className,
+}: ChatSidebarProps) {
+  const name = profile.name?.trim() || 'User'
+  const hasBio = Boolean(profile.bio && profile.bio.trim().length > 0)
+  const hasMutualFriends = Boolean(profile.mutualFriends && profile.mutualFriends.length > 0)
+  const hasMutualZones = Boolean(profile.mutualZones && profile.mutualZones.length > 0)
+  const hasSharedInfo = hasBio || hasMutualFriends || hasMutualZones
+  const hasZonesData = Array.isArray(profile.mutualZones)
+  const showNoSharedInfo = !hasSharedInfo
+  const showNoSharedZones = !hasMutualZones && !showNoSharedInfo && hasZonesData
+
+  return (
+    <aside
+      className={cn(
+        'w-[300px] border-l flex flex-col gap-6 p-4 bg-sidebar overflow-y-auto h-full',
+        className,
+      )}
+    >
+      <div className="flex flex-col items-center text-center gap-3">
+        <UserAvatar
+          name={name}
+          avatar={profile.avatar}
+          className="w-20 h-20"
+          fallbackClassName="bg-primary/20 text-primary text-2xl font-bold"
+        />
+
+        <div className="min-w-0">
+          <h3 className="text-lg font-semibold truncate">{name}</h3>
+          {hasBio ? (
+            <p className="text-sm text-muted-foreground max-w-[220px]">{profile.bio}</p>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-3">
+        {hasMutualFriends && (
+          <div className="rounded-xl border p-3 bg-muted/30">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide">
+              Mutual Friends
+            </span>
+            <p className="text-sm font-medium mt-1">
+              {profile.mutualFriends?.length} mutual friend{profile.mutualFriends!.length !== 1 ? 's' : ''}
+            </p>
+            {profile.mutualFriends && profile.mutualFriends.length > 0 ? (
+              <p className="mt-1 text-xs text-muted-foreground truncate">
+                {profile.mutualFriends.slice(0, 3).map((friend) => friend.name).join(', ')}
+                {profile.mutualFriends.length > 3 ? '…' : ''}
+              </p>
+            ) : null}
+          </div>
+        )}
+
+        {hasMutualZones ? (
+          <div className="rounded-xl border p-3 bg-muted/30">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide">
+              Shared Zones
+            </span>
+            <p className="text-sm font-medium mt-1">
+              {profile.mutualZones?.length} shared zone{profile.mutualZones!.length !== 1 ? 's' : ''}
+            </p>
+            <ul className="mt-2 space-y-1 text-xs text-muted-foreground">
+              {profile.mutualZones?.map((zone) => (
+                <li key={zone.id} className="truncate">{zone.name}</li>
+              ))}
+            </ul>
+          </div>
+        ) : showNoSharedZones ? (
+          <div className="rounded-xl border p-3 bg-muted/30">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide">
+              Shared Zones
+            </span>
+            <p className="text-sm text-muted-foreground mt-1">No shared zones</p>
+          </div>
+        ) : null}
+
+        {showNoSharedInfo ? (
+          <div className="rounded-xl border p-3 bg-muted/30">
+            <span className="text-xs text-muted-foreground uppercase tracking-wide">
+              Info
+            </span>
+            <p className="text-sm text-muted-foreground mt-1">No shared information</p>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Button
+          onClick={onViewProfile}
+          disabled={!onViewProfile}
+          className="w-full"
+          variant="outline"
+        >
+          View Profile
+        </Button>
+
+        {canManageFriend && profile.friendStatus === 'none' ? (
+          <Button
+            onClick={onAddFriend}
+            disabled={!onAddFriend}
+            className="w-full"
+          >
+            Add Friend
+          </Button>
+        ) : null}
+
+        {canManageFriend && profile.friendStatus === 'pending' ? (
+          <Button disabled className="w-full" variant="secondary">
+            Pending
+          </Button>
+        ) : null}
+
+        {canManageFriend && profile.friendStatus === 'accepted' ? (
+          <Button
+            onClick={onRemoveFriend}
+            disabled={!onRemoveFriend}
+            className="w-full bg-red-500 hover:bg-red-600"
+          >
+            Remove Friend
+          </Button>
+        ) : null}
+
+        {canManageFriend ? (
+          <Button
+            onClick={onBlock}
+            disabled={!onBlock}
+            className="w-full text-red-500 hover:bg-red-500/10"
+            variant="ghost"
+          >
+            Block
+          </Button>
+        ) : null}
+      </div>
+    </aside>
+  )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/EmptyChatState.tsx b/apps/frontend/src/components/EmptyChatState.tsx
new file mode 100644
index 0000000..28e9c03
--- /dev/null
+++ b/apps/frontend/src/components/EmptyChatState.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+export type EmptyChatStateProps = {
+  name: string
+  onSelectMessage: (message: string) => void
+}
+
+const QUICK_MESSAGES = ['Hi', 'Hello', "What's up"] as const
+
+export function EmptyChatState({ name, onSelectMessage }: EmptyChatStateProps) {
+  const displayName = name?.trim() || 'User'
+
+  return (
+    <div className="flex items-center justify-center h-full">
+      <div className="flex flex-col items-center gap-4 text-center">
+        <h2 className="text-2xl font-bold">👋 Say hi to {displayName}</h2>
+
+        <p className="text-sm text-muted-foreground">
+          This is the beginning of your conversation
+        </p>
+
+        <div className="flex gap-2 mt-2">
+          {QUICK_MESSAGES.map((msg) => (
+            <button
+              key={msg}
+              type="button"
+              onClick={() => onSelectMessage(msg)}
+              className="px-4 py-2 rounded-full border hover:bg-muted transition-colors"
+            >
+              {msg}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/apps/frontend/src/components/ProfileModal.tsx b/apps/frontend/src/components/ProfileModal.tsx
new file mode 100644
index 0000000..8ac4d00
--- /dev/null
+++ b/apps/frontend/src/components/ProfileModal.tsx
@@ -0,0 +1,202 @@
+'use client'
+
+import { useEffect } from 'react'
+import { UserAvatar } from '@/components/UserAvatar'
+
+export type ProfileModalProfile = {
+  id: string | number
+  name: string
+  avatar?: string | null
+  bio?: string | null
+  mutualFriends?: { id: string; name: string }[]
+  mutualZones?: { id: string; name: string }[]
+  joinedAt?: string | null
+  isOnline?: boolean
+  lastSeen?: string | null
+  friendStatus?: 'none' | 'pending' | 'accepted'
+}
+
+export type ProfileModalProps = {
+  profile: ProfileModalProfile | null
+  open: boolean
+  onClose: () => void
+  canManageFriend?: boolean
+  onAddFriend?: () => void
+  onRemoveFriend?: () => void
+  onBlock?: () => void
+  onViewProfile?: () => void
+}
+
+export function ProfileModal({
+  profile,
+  open,
+  onClose,
+  canManageFriend,
+  onAddFriend,
+  onRemoveFriend,
+  onBlock,
+  onViewProfile,
+}: ProfileModalProps) {
+  useEffect(() => {
+    if (!open) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') onClose()
+    }
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [open, onClose])
+
+  if (!open || !profile) return null
+
+  const name = profile.name?.trim() || 'User'
+  const hasBio = Boolean(profile.bio && profile.bio.trim().length > 0)
+  const hasMutualFriends = Boolean(profile.mutualFriends && profile.mutualFriends.length > 0)
+  const hasMutualZones = Boolean(profile.mutualZones && profile.mutualZones.length > 0)
+  const hasSharedInfo = hasBio || hasMutualFriends || hasMutualZones
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div
+        className="w-full max-w-md bg-background rounded-xl shadow-lg"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex flex-col gap-6 p-6">
+          <div className="flex flex-col items-center text-center gap-3">
+            <UserAvatar
+              name={name}
+              avatar={profile.avatar}
+              className="w-20 h-20"
+              fallbackClassName="bg-primary/20 text-primary text-2xl font-bold"
+            />
+
+            <div className="min-w-0">
+              <h2 className="text-lg font-semibold truncate">{name}</h2>
+              {hasBio ? (
+                <p className="text-sm text-muted-foreground max-w-[220px]">{profile.bio}</p>
+              ) : null}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-3">
+            {hasMutualFriends && (
+              <div className="rounded-xl border p-3 bg-muted/30">
+                <span className="text-xs text-muted-foreground uppercase tracking-wide">
+                  Mutual Friends
+                </span>
+                <p className="text-sm font-medium mt-1">
+                  {profile.mutualFriends?.length} mutual friend{profile.mutualFriends!.length !== 1 ? 's' : ''}
+                </p>
+                {profile.mutualFriends && profile.mutualFriends.length > 0 ? (
+                  <p className="mt-1 text-xs text-muted-foreground truncate">
+                    {profile.mutualFriends.slice(0, 3).map((friend) => friend.name).join(', ')}
+                    {profile.mutualFriends.length > 3 ? '…' : ''}
+                  </p>
+                ) : null}
+              </div>
+            )}
+
+            {hasMutualZones ? (
+              <div className="rounded-xl border p-3 bg-muted/30">
+                <span className="text-xs text-muted-foreground uppercase tracking-wide">
+                  Shared Zones
+                </span>
+                <p className="text-sm font-medium mt-1">
+                  {profile.mutualZones?.length} shared zone{profile.mutualZones!.length !== 1 ? 's' : ''}
+                </p>
+                <ul className="mt-2 space-y-1 text-xs text-muted-foreground">
+                  {profile.mutualZones?.map((zone) => (
+                    <li key={zone.id} className="truncate">{zone.name}</li>
+                  ))}
+                </ul>
+              </div>
+            ) : null}
+
+            {!hasSharedInfo ? (
+              <div className="rounded-xl border p-3 bg-muted/30">
+                <span className="text-xs text-muted-foreground uppercase tracking-wide">
+                  Info
+                </span>
+                <p className="text-sm text-muted-foreground mt-1">No shared information</p>
+              </div>
+            ) : null}
+          </div>
+
+          {(profile.joinedAt || profile.isOnline !== undefined || profile.lastSeen) ? (
+            <div className="text-xs text-muted-foreground space-y-1">
+              {profile.joinedAt ? (
+                <div>Joined {new Date(profile.joinedAt).toLocaleDateString()}</div>
+              ) : null}
+              {profile.isOnline === true ? (
+                <div className="text-green-500">Online now</div>
+              ) : profile.lastSeen ? (
+                <div>Last seen {new Date(profile.lastSeen).toLocaleString()}</div>
+              ) : null}
+            </div>
+          ) : null}
+
+          <div className="flex flex-col gap-3">
+            <button
+              onClick={onViewProfile}
+              disabled={!onViewProfile}
+              className="w-full py-2 rounded-lg border hover:bg-muted transition-all duration-200 hover:scale-[1.02] disabled:opacity-50 disabled:hover:scale-100"
+            >
+              View Profile
+            </button>
+
+            {canManageFriend && profile.friendStatus === 'none' ? (
+              <button
+                onClick={onAddFriend}
+                disabled={!onAddFriend}
+                className="w-full py-2 rounded-lg bg-primary text-white hover:bg-primary/90 transition-all duration-200 hover:scale-[1.02] disabled:opacity-50 disabled:hover:scale-100"
+              >
+                Add Friend
+              </button>
+            ) : null}
+
+            {canManageFriend && profile.friendStatus === 'pending' ? (
+              <button
+                disabled
+                className="w-full py-2 rounded-lg bg-muted text-muted-foreground transition-all duration-200 disabled:opacity-50"
+              >
+                Pending
+              </button>
+            ) : null}
+
+            {canManageFriend && profile.friendStatus === 'accepted' ? (
+              <button
+                onClick={onRemoveFriend}
+                disabled={!onRemoveFriend}
+                className="w-full py-2 rounded-lg bg-red-500 text-white hover:bg-red-600 transition-all duration-200 hover:scale-[1.02] disabled:opacity-50 disabled:hover:scale-100"
+              >
+                Remove Friend
+              </button>
+            ) : null}
+
+            {canManageFriend ? (
+              <button
+                onClick={onBlock}
+                disabled={!onBlock}
+                className="w-full py-2 rounded-lg text-red-500 hover:bg-red-500/10 transition-all duration-200 hover:scale-[1.02] disabled:opacity-50 disabled:hover:scale-100"
+              >
+                Block
+              </button>
+            ) : null}
+          </div>
+
+          <button
+            type="button"
+            onClick={onClose}
+            className="w-full py-2 rounded-lg border hover:bg-muted transition-all duration-200"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/components/UserAvatar.tsx b/apps/frontend/src/components/UserAvatar.tsx
new file mode 100644
index 0000000..a453557
--- /dev/null
+++ b/apps/frontend/src/components/UserAvatar.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { cn, getAvatarUrl } from '@openchat/lib'
+
+export type UserAvatarProps = {
+  name?: string | null
+  avatar?: string | null
+  alt?: string
+  fallbackText?: string
+  className?: string
+  imgClassName?: string
+  fallbackClassName?: string
+}
+
+function getFallback(text?: string | null) {
+  const trimmed = (text ?? '').trim()
+  return trimmed.charAt(0).toUpperCase() || '?'
+}
+
+export function UserAvatar({
+  name,
+  avatar,
+  alt,
+  fallbackText,
+  className,
+  imgClassName,
+  fallbackClassName,
+}: UserAvatarProps) {
+  const displayName = (name ?? '').trim()
+
+  const src = useMemo(() => {
+    const trimmed = (avatar ?? '').trim()
+    if (!trimmed) return null
+    return getAvatarUrl(trimmed) ?? null
+  }, [avatar])
+
+  const fallback = fallbackText ? getFallback(fallbackText) : getFallback(displayName)
+  const resolvedAlt = (alt ?? displayName).trim() || 'User avatar'
+
+  const [erroredSrc, setErroredSrc] = useState<string | null>(null)
+  const [loadedSrc, setLoadedSrc] = useState<string | null>(null)
+
+  const showImage = Boolean(src) && erroredSrc !== src
+  const loaded = Boolean(src) && loadedSrc === src
+
+  return (
+    <div
+      className={cn(
+        'relative w-10 h-10 rounded-full overflow-hidden shrink-0',
+        showImage && !loaded && 'bg-muted animate-pulse',
+        className,
+      )}
+    >
+      {showImage ? (
+        <img
+          src={src!}
+          alt={resolvedAlt}
+          loading="lazy"
+          decoding="async"
+          className={cn(
+            'w-full h-full object-cover transition-opacity',
+            loaded ? 'opacity-100' : 'opacity-0',
+            imgClassName,
+          )}
+          onLoad={() => setLoadedSrc(src!)}
+          onError={() => {
+            setErroredSrc(src!)
+            setLoadedSrc(null)
+          }}
+        />
+      ) : (
+        <div
+          className={cn(
+            'w-full h-full flex items-center justify-center text-sm font-bold text-primary',
+            fallbackClassName ?? 'bg-gradient-to-br from-primary/20 to-primary/5',
+          )}
+        >
+          {fallback}
+        </div>
+      )}
+    </div>
+  )
+}
+
diff --git a/apps/frontend/src/components/verify-email/VerifyEmailDialog.tsx b/apps/frontend/src/components/verify-email/VerifyEmailDialog.tsx
new file mode 100644
index 0000000..7342143
--- /dev/null
+++ b/apps/frontend/src/components/verify-email/VerifyEmailDialog.tsx
@@ -0,0 +1,159 @@
+'use client'
+
+import { useState } from "react"
+import { api } from "@openchat/lib"
+import { useQueryClient } from "@tanstack/react-query"
+import { userKeys } from "@/features/user/queries"
+import type { AppUser } from "@/features/user/types"
+import { Dialog, DialogContent } from "@openchat/components/ui/dialog"
+import { Mail, Copy, CheckCircle, AlertCircle, Loader2 } from "lucide-react"
+
+interface VerifyEmailDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function VerifyEmailDialog({ open, onOpenChange }: VerifyEmailDialogProps) {
+  const queryClient = useQueryClient()
+
+  const [code, setCode] = useState("")
+  const [loading, setLoading] = useState(false)
+  const [message, setMessage] = useState("")
+  const [messageType, setMessageType] = useState<"success" | "error" | "info" | null>(null)
+  const [resending, setResending] = useState(false)
+
+  async function handleVerify() {
+    if (code.length !== 6) return
+    
+    setLoading(true)
+    setMessage("")
+    setMessageType(null)
+
+    const res = await api("/auth/verify-email", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ code }),
+    })
+
+    const data = await res.json()
+    setLoading(false)
+
+    if (res.ok) {
+      setMessage("Email verified successfully!")
+      setMessageType("success")
+
+      setTimeout(() => {
+        queryClient.setQueryData<AppUser | null>(userKeys.current(), (current) => {
+          if (!current) return current
+          return { ...current, emailVerified: true }
+        })
+        queryClient.invalidateQueries({ queryKey: userKeys.current() })
+        onOpenChange(false)
+      }, 1500)
+    } else {
+      setMessage(data.message || "Invalid code")
+      setMessageType("error")
+    }
+  }
+
+  async function handleResend() {
+    setResending(true)
+    setMessage("")
+    setMessageType(null)
+
+    const res = await api("/auth/resend-email", {
+      method: "POST",
+    })
+
+    const data = await res.json()
+    setResending(false)
+
+    if (res.ok) {
+      setMessage("Verification code sent!")
+      setMessageType("info")
+    } else {
+      setMessage(data.message || "Something went wrong")
+      setMessageType("error")
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-main border-white/10 max-w-sm mx-4 p-0 overflow-hidden">
+        <div className="relative">
+          <div className="absolute inset-0 bg-gradient-to-b from-primary/20 to-transparent opacity-50" />
+          
+          <div className="relative p-6 pb-4">
+            <div className="flex justify-center mb-4">
+              <div className="w-14 h-14 rounded-2xl bg-primary/20 flex items-center justify-center">
+                <Mail className="w-7 h-7 text-primary" />
+              </div>
+            </div>
+
+            <div className="text-center mb-5">
+              <h2 className="text-lg font-semibold text-foreground">
+                Verify your email
+              </h2>
+              <p className="text-sm text-muted-foreground mt-1.5">
+                Enter the 6-digit code sent to your email
+              </p>
+            </div>
+
+            <div className="space-y-4">
+              <input
+                type="text"
+                inputMode="numeric"
+                maxLength={6}
+                value={code}
+                onChange={(e) => setCode(e.target.value.replace(/\D/g, ""))}
+                placeholder="000000"
+                className="w-full bg-surface border border-white/10 rounded-xl py-3.5 text-center text-2xl tracking-[0.4em] text-foreground placeholder:text-muted-foreground/40 focus:outline-none focus:border-primary/50 transition-all"
+              />
+
+              <button
+                onClick={handleVerify}
+                disabled={loading || code.length !== 6}
+                className="w-full bg-primary hover:opacity-90 text-primary-foreground font-medium py-3 rounded-xl transition-all disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                {loading && <Loader2 className="w-4 h-4 animate-spin" />}
+                {loading ? "Verifying..." : "Verify Email"}
+              </button>
+
+              <div className="flex items-center justify-center gap-3">
+                <div className="h-px flex-1 bg-white/10" />
+                <span className="text-xs text-muted-foreground">or</span>
+                <div className="h-px flex-1 bg-white/10" />
+              </div>
+
+              <button
+                onClick={handleResend}
+                disabled={resending}
+                className="w-full text-sm text-muted-foreground hover:text-foreground transition-colors flex items-center justify-center gap-2 py-2"
+              >
+                {resending ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <Copy className="w-4 h-4" />
+                )}
+                {resending ? "Sending..." : "Resend code"}
+              </button>
+            </div>
+
+            {message && (
+              <div className={`mt-4 flex items-center justify-center gap-2 text-sm font-medium ${
+                messageType === "success" ? "text-green-500" :
+                messageType === "error" ? "text-red-500" :
+                "text-blue-500"
+              }`}>
+                {messageType === "success" && <CheckCircle className="w-4 h-4" />}
+                {messageType === "error" && <AlertCircle className="w-4 h-4" />}
+                {messageType === "info" && <Mail className="w-4 h-4" />}
+                {message}
+              </div>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
\ No newline at end of file
diff --git a/apps/frontend/src/features/chat/mutations.ts b/apps/frontend/src/features/chat/mutations.ts
index b6198cb..89c419f 100644
--- a/apps/frontend/src/features/chat/mutations.ts
+++ b/apps/frontend/src/features/chat/mutations.ts
@@ -123,3 +123,42 @@ export function useSendChannelMessageMutation(chatPublicId: string, channelPubli
     },
   })
 }
+
+export function useEditChannelMessageMutation(chatPublicId: string, channelPublicId: string) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async ({ messageId, text }: { messageId: number; text: string }) => {
+      const data = await apiClient.patch<{ message: ChannelMessage }>(`/chats/messages/${messageId}`, {
+        text,
+      })
+      return data.message
+    },
+    onSuccess(message) {
+      queryClient.setQueryData<ChannelMessage[]>(
+        messageKeys.list(chatPublicId, channelPublicId),
+        (current = []) => mergeMessage(current, message),
+      )
+    },
+  })
+}
+
+export function useDeleteChannelMessageMutation(chatPublicId: string, channelPublicId: string) {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: async (messageId: number) => {
+      await apiClient.delete(`/chats/messages/${messageId}`)
+      return messageId
+    },
+    onSuccess(messageId) {
+      queryClient.setQueryData<ChannelMessage[]>(
+        messageKeys.list(chatPublicId, channelPublicId),
+        (current = []) =>
+          current.map((m) =>
+            m.id === messageId ? { ...m, isDeleted: true, text: null } : m,
+          ),
+      )
+    },
+  })
+}
diff --git a/apps/frontend/src/features/chat/queries.ts b/apps/frontend/src/features/chat/queries.ts
index f7dbb1c..035f8fe 100644
--- a/apps/frontend/src/features/chat/queries.ts
+++ b/apps/frontend/src/features/chat/queries.ts
@@ -73,3 +73,26 @@ export function useMessages(chatPublicId?: string, channelPublicId?: string) {
     enabled: Boolean(chatPublicId && channelPublicId),
   })
 }
+
+export function useChannelPinnedMessages(chatPublicId?: string, channelPublicId?: string) {
+  return useQuery<ChannelMessage[]>({
+    queryKey:
+      chatPublicId && channelPublicId
+        ? [...messageKeys.list(chatPublicId, channelPublicId), "pinned"]
+        : [...messageKeys.all, "idle"],
+    queryFn: async () => {
+      if (!chatPublicId || !channelPublicId) {
+        return []
+      }
+
+      const data = await apiClient.get<MessagesResponse>(`/chats/${chatPublicId}/messages`, {
+        query: { channelPublicId, pinned: true },
+      })
+
+      return data.messages?.filter(m => m.isPinned && !m.isDeleted) ?? []
+    },
+    staleTime: 20_000,
+    gcTime: 20 * 60_000,
+    enabled: Boolean(chatPublicId && channelPublicId),
+  })
+}
diff --git a/apps/frontend/src/features/chat/types.ts b/apps/frontend/src/features/chat/types.ts
index d29b911..a56773f 100644
--- a/apps/frontend/src/features/chat/types.ts
+++ b/apps/frontend/src/features/chat/types.ts
@@ -12,6 +12,8 @@ export type ChannelMessage = {
   fileUrl?: string | null
   fileType?: string | null
   isDeleted?: boolean
+  isPinned?: boolean
+  pinnedAt?: string | null
   createdAt?: string
   channelPublicId?: string | null
   chatPublicId?: string
diff --git a/apps/frontend/src/globals.css b/apps/frontend/src/globals.css
index b899ae9..ef2dce7 100644
--- a/apps/frontend/src/globals.css
+++ b/apps/frontend/src/globals.css
@@ -97,6 +97,18 @@ body {
   .text-foreground {
     @apply text-[color:hsl(var(--foreground))];
   }
+
+  .bg-sidebar {
+    @apply bg-[color:hsl(var(--sidebar))];
+  }
+
+  .bg-main {
+    @apply bg-[color:hsl(var(--bg-main))];
+  }
+
+  .bg-surface {
+    @apply bg-[color:hsl(var(--surface))];
+  }
 }
 
 
@@ -122,6 +134,9 @@ body {
     --input: 214.3 31.8% 91.4%;
     --ring: 263.4 70% 50.4%;
     --radius: 0.75rem;
+    --sidebar: 0 0% 100%;
+    --bg-main: 0 0% 100%;
+    --surface: 0 0% 98%;
   }
 
   .dark {
@@ -144,6 +159,9 @@ body {
     --border: 215 28% 17%;
     --input: 215 28% 17%;
     --ring: 263.4 70% 50.4%;
+    --sidebar: 224 71% 4%;
+    --bg-main: 224 71% 4%;
+    --surface: 215 27% 12%;
   }
 }
 
@@ -159,6 +177,14 @@ body {
   .high-perf-gradient {
     @apply bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 via-purple-400 to-cyan-400;
   }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
 }
 
 @layer base {
diff --git a/apps/frontend/src/hooks/useInputWithCursor.ts b/apps/frontend/src/hooks/useInputWithCursor.ts
new file mode 100644
index 0000000..b869192
--- /dev/null
+++ b/apps/frontend/src/hooks/useInputWithCursor.ts
@@ -0,0 +1,51 @@
+import { useState, useCallback, useRef } from 'react'
+
+type UseInputWithCursorReturn = {
+  input: string
+  setInput: React.Dispatch<React.SetStateAction<string>>
+  inputRef: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>
+  insertAtCursor: (text: string) => void
+  setInputRef: (ref: HTMLInputElement | HTMLTextAreaElement | null) => void
+}
+
+export function useInputWithCursor(initialValue = ''): UseInputWithCursorReturn {
+  const [input, setInput] = useState(initialValue)
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null)
+
+  const setInputRef = useCallback((ref: HTMLInputElement | HTMLTextAreaElement | null) => {
+    (inputRef as React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>).current = ref
+  }, [])
+
+  const insertAtCursor = useCallback((text: string) => {
+    const inputElement = inputRef.current
+    if (!inputElement) {
+      setInput(prev => prev + text)
+      return
+    }
+
+    const start = inputElement.selectionStart ?? input.length
+    const end = inputElement.selectionEnd ?? input.length
+    const currentValue = inputElement.value
+
+    const newValue = 
+      currentValue.substring(0, start) + 
+      text + 
+      currentValue.substring(end)
+
+    setInput(newValue)
+
+    requestAnimationFrame(() => {
+      const newCursorPosition = start + text.length
+      inputElement.focus()
+      inputElement.setSelectionRange(newCursorPosition, newCursorPosition)
+    })
+  }, [input.length])
+
+  return {
+    input,
+    setInput,
+    inputRef,
+    insertAtCursor,
+    setInputRef
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 3fe512c..303d9c1 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,8 @@
     "node": ">=20.19"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
+    "@emoji-mart/react": "^1.1.1",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-avatar": "^1.1.11",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce7d7c1..ea9beb2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@emoji-mart/data':
+        specifier: ^1.2.1
+        version: 1.2.1
+      '@emoji-mart/react':
+        specifier: ^1.1.1
+        version: 1.1.1(emoji-mart@5.6.0)(react@19.2.0)
       '@hookform/resolvers':
         specifier: ^5.2.2
         version: 5.2.2(react-hook-form@7.71.1(react@19.2.0))
@@ -223,6 +229,12 @@ importers:
 
   apps/frontend:
     dependencies:
+      '@emoji-mart/data':
+        specifier: ^1.1.0
+        version: 1.2.1
+      '@emoji-mart/react':
+        specifier: ^1.1.1
+        version: 1.1.1(emoji-mart@5.6.0)(react@19.2.0)
       '@radix-ui/react-dropdown-menu':
         specifier: ^2.1.16
         version: 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -538,6 +550,15 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
+  '@emoji-mart/data@1.2.1':
+    resolution: {integrity: sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw==}
+
+  '@emoji-mart/react@1.1.1':
+    resolution: {integrity: sha512-NMlFNeWgv1//uPsvLxvGQoIerPuVdXwK/EUek8OOkJ6wVOWPUizRBJU0hDqWZCOROVpfBgCemaC3m6jDOXi03g==}
+    peerDependencies:
+      emoji-mart: ^5.2
+      react: ^16.8 || ^17 || ^18
+
   '@esbuild/aix-ppc64@0.25.12':
     resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==}
     engines: {node: '>=18'}
@@ -1964,6 +1985,7 @@ packages:
     resolution: {integrity: sha512-6qbjdm1K5kizVKv9TNqhIN3doq2anRhdF2XaFMFSn4m8L22S69RV+FilvlyVT4RoJyMxtPU5rs4RpdFa/PEC7A==}
     peerDependencies:
       react: ^18 || ^19
+
   '@tootallnate/once@2.0.0':
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
     engines: {node: '>= 10'}
@@ -2999,6 +3021,9 @@ packages:
     engines: {node: '>= 12.20.55'}
     hasBin: true
 
+  emoji-mart@5.6.0:
+    resolution: {integrity: sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -5781,6 +5806,13 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emoji-mart/data@1.2.1': {}
+
+  '@emoji-mart/react@1.1.1(emoji-mart@5.6.0)(react@19.2.0)':
+    dependencies:
+      emoji-mart: 5.6.0
+      react: 19.2.0
+
   '@esbuild/aix-ppc64@0.25.12':
     optional: true
 
@@ -6927,6 +6959,7 @@ snapshots:
     dependencies:
       '@tanstack/query-core': 5.96.0
       react: 19.2.0
+
   '@tootallnate/once@2.0.0': {}
 
   '@tsconfig/node10@1.0.12': {}
@@ -8190,6 +8223,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  emoji-mart@5.6.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}