diff --git a/src/app/dashboard/(active)/account/loading.tsx b/src/app/dashboard/(active)/account/loading.tsx
new file mode 100644
index 0000000..f67b7c1
--- /dev/null
+++ b/src/app/dashboard/(active)/account/loading.tsx
@@ -0,0 +1,34 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { NewPasskeyButton } from "./passkey-button"
+
+export default function Loading() {
+  return (
+    <main className="container">
+      <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Account</h2>
+      <div className="flex gap-4 mb-12">
+        <Skeleton className="h-32 w-32 rounded-full" />
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Name:</span>
+            <Skeleton className="w-40 h-5" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Email:</span>
+            <Skeleton className="w-70 h-5" />
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Telegram:</span>
+            <Skeleton className="w-60 h-5" />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 justify-start items-start">
+        <h3>Passkeys</h3>
+        <Skeleton className="w-full h-10" />
+        <NewPasskeyButton />
+      </div>
+    </main>
+  )
+}
diff --git a/src/app/dashboard/(active)/account/page.tsx b/src/app/dashboard/(active)/account/page.tsx
index d48316d..0ac592a 100644
--- a/src/app/dashboard/(active)/account/page.tsx
+++ b/src/app/dashboard/(active)/account/page.tsx
@@ -21,7 +21,7 @@ export default async function Account() {
   const { user } = session
 
   return (
-    <main className="container mx-auto px-4 py-8">
+    <main className="container">
       <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Account</h2>
       <div className="flex gap-4 mb-12">
         <ProfilePic user={user} />
diff --git a/src/app/dashboard/(active)/azure/members/loading.tsx b/src/app/dashboard/(active)/azure/members/loading.tsx
index ac43fc0..a6bd30c 100644
--- a/src/app/dashboard/(active)/azure/members/loading.tsx
+++ b/src/app/dashboard/(active)/azure/members/loading.tsx
@@ -2,7 +2,7 @@ import { SkeletonAssocTable } from "./table"
 
 export default function Loading() {
   return (
-    <div className="container p-8">
+    <div className="container">
       <SkeletonAssocTable />
     </div>
   )
diff --git a/src/app/dashboard/(active)/azure/members/page.tsx b/src/app/dashboard/(active)/azure/members/page.tsx
index cefb25c..4a4d975 100644
--- a/src/app/dashboard/(active)/azure/members/page.tsx
+++ b/src/app/dashboard/(active)/azure/members/page.tsx
@@ -8,7 +8,7 @@ export default async function AssocMembers() {
   const members = await getAzureMembers()
 
   return (
-    <div className="container p-8">
+    <div className="container">
       <ErrorBoundary fallback={<div>Something went wrong</div>}>
         <Suspense fallback={<Spinner />}>
           <AssocTable members={members} />
diff --git a/src/app/dashboard/(active)/azure/members/table.tsx b/src/app/dashboard/(active)/azure/members/table.tsx
index 18b19fe..2a5bf70 100644
--- a/src/app/dashboard/(active)/azure/members/table.tsx
+++ b/src/app/dashboard/(active)/azure/members/table.tsx
@@ -33,7 +33,7 @@ export function AssocTable({ members }: { members: AzureMember[] }) {
   const users = sociFilter ? members.filter((v) => v.isMember) : members
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 w-full">
       <div className="flex gap-2 items-center">
         <p>Utenti MS @polinetwork.org</p>
         <Badge
@@ -60,7 +60,7 @@ export function AssocTable({ members }: { members: AzureMember[] }) {
 
 export function SkeletonAssocTable() {
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 w-full">
       <div className="flex gap-2 items-center">
         <p>Utenti MS @polinetwork.org</p>
         <Badge className="animate-pulse w-15" />
diff --git a/src/app/dashboard/(active)/azure/page.tsx b/src/app/dashboard/(active)/azure/page.tsx
deleted file mode 100644
index 853533d..0000000
--- a/src/app/dashboard/(active)/azure/page.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { UsersRound } from "lucide-react"
-import Image from "next/image"
-import Link from "next/link"
-import azureSvg from "@/assets/svg/azure.svg"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-
-export default function AssocIndex() {
-  return (
-    <div className="container py-8 px-2 flex flex-col gap-4">
-      <h2 className="text-accent-foreground text-3xl font-bold flex gap-2 items-center">
-        <Image alt="azure logo" src={azureSvg} className="size-7" />
-        Azure
-      </h2>
-      <div className="gap-4 flex justify-start flex-wrap items-center">
-        <Link href="/dashboard/azure/members">
-          <Card className="w-90 hover:bg-accent transition-colors">
-            <CardHeader>
-              <CardTitle className="flex gap-2 items-center">
-                <UsersRound size={20} />
-                Members
-              </CardTitle>
-              <CardDescription>Manage all @polinetwork.org accounts</CardDescription>
-            </CardHeader>
-          </Card>
-        </Link>
-      </div>
-    </div>
-  )
-}
diff --git a/src/app/dashboard/(active)/breadcrumb.tsx b/src/app/dashboard/(active)/breadcrumb.tsx
new file mode 100644
index 0000000..17052fe
--- /dev/null
+++ b/src/app/dashboard/(active)/breadcrumb.tsx
@@ -0,0 +1,74 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { Fragment, useMemo } from "react"
+import { NAV_MAP } from "@/components/dashboard-sidebar/data"
+import {
+  BreadcrumbItem as BreadcrumbItemComponent,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  Breadcrumb as BreadcrumbRoot,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+
+export type BreadcrumbItem = {
+  title: string
+  url?: string
+}
+
+export function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  const pathname = usePathname()
+  const items = useMemo(() => getBreadcrumbs(NAV_MAP, pathname), [pathname])
+
+  return (
+    <BreadcrumbRoot className={className} {...props}>
+      <BreadcrumbList>
+        {items.map((item, i) => (
+          <Fragment key={`breadcrumb-item-${i}`}>
+            <BreadcrumbItemComponent className="hidden md:block">
+              {i === items.length - 1 ? (
+                <BreadcrumbPage>{item.title}</BreadcrumbPage>
+              ) : item.url ? (
+                <BreadcrumbLink href={item.url}>{item.title}</BreadcrumbLink>
+              ) : (
+                item.title
+              )}
+            </BreadcrumbItemComponent>
+            {i < items.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </BreadcrumbRoot>
+  )
+}
+
+function getBreadcrumbs(navMap: Map<string, string>, pathname: string): BreadcrumbItem[] {
+  const segments = pathname.split("/").filter(Boolean)
+  const breadcrumbs: BreadcrumbItem[] = []
+
+  let currentPath = ""
+  let i = 0
+
+  for (const segment of segments) {
+    currentPath += `/${segment}`
+    let title = navMap.get(currentPath)
+    if (!title) {
+      if (isUUIDorId(segment)) {
+        title = "Details"
+      } else {
+        title = segment.charAt(0).toUpperCase() + segment.slice(1)
+      }
+    }
+
+    // note: at the moment we do not plan to make category pages.
+    // If such pages are made in the future, this logic can be removed
+    breadcrumbs.push({ title, url: i !== 1 ? currentPath : undefined })
+    i++
+  }
+
+  return breadcrumbs
+}
+
+function isUUIDorId(segment: string) {
+  return !Number.isNaN(Number(segment)) || segment.length > 20 // Regex custom a seconda dei tuoi ID
+}
diff --git a/src/app/dashboard/(active)/complete-profile.tsx b/src/app/dashboard/(active)/complete-profile.tsx
index 8de2c3f..89fc4ac 100644
--- a/src/app/dashboard/(active)/complete-profile.tsx
+++ b/src/app/dashboard/(active)/complete-profile.tsx
@@ -1,13 +1,17 @@
 "use client"
 
-import type { User } from "better-auth"
 import { UserRoundPenIcon } from "lucide-react"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
+import { useSession } from "@/lib/auth"
+
+export function CompleteProfile() {
+  const { data, isPending } = useSession()
+
+  if (!data || isPending) return null
 
-export function CompleteProfile({ user }: { user: User }) {
   return (
-    !user.name && (
+    !data.user.name && (
       <div className="flex items-center p-2 pl-4 mb-4 gap-2 rounded-lg border text-accent-foreground bg-yellow-400/10 border-yellow-400">
         <UserRoundPenIcon size={16} />
         <p className="grow">Your profile is incomplete, please enter the missing information.</p>
diff --git a/src/app/dashboard/(active)/layout.tsx b/src/app/dashboard/(active)/layout.tsx
new file mode 100644
index 0000000..016881d
--- /dev/null
+++ b/src/app/dashboard/(active)/layout.tsx
@@ -0,0 +1,50 @@
+import { cookies } from "next/headers"
+import { DashboardSidebar } from "@/components/dashboard-sidebar"
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { COOKIES } from "@/constants"
+import { Breadcrumb } from "./breadcrumb"
+
+function parseCookie(cookie: string) {
+  try {
+    const parsed = JSON.parse(cookie)
+    return parsed
+  } catch (_e) {
+    return {}
+  }
+}
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const sidebarCookies = await getSidebarCookies()
+
+  return (
+    <SidebarProvider
+      defaultOpen={sidebarCookies.open}
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <DashboardSidebar categoryState={sidebarCookies.state} />
+      <SidebarInset className="px-4">
+        <header className="flex h-16 shrink-0 relative items-center justify-between gap-2 border-b mb-8">
+          <SidebarTrigger className="-ml-1" size="icon" />
+          <Breadcrumb className="absolute left-1/2 -translate-x-1/2" />
+          <div></div>
+        </header>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+async function getSidebarCookies() {
+  const cookieStore = await cookies()
+
+  const sidebarCategoryStateCookie = cookieStore.get(COOKIES.SIDEBAR_CATEGORY_STATE)?.value
+  const sidebarOpenCookie = cookieStore.get(COOKIES.SIDEBAR_OPEN)?.value
+  const state: Record<string, boolean> = sidebarCategoryStateCookie ? parseCookie(sidebarCategoryStateCookie) : {}
+  const open: boolean = sidebarOpenCookie !== undefined ? parseCookie(sidebarOpenCookie) : true
+
+  return { state, open }
+}
diff --git a/src/app/dashboard/(active)/not-found.tsx b/src/app/dashboard/(active)/not-found.tsx
new file mode 100644
index 0000000..e962605
--- /dev/null
+++ b/src/app/dashboard/(active)/not-found.tsx
@@ -0,0 +1,19 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-8 px-4">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="font-heading text-[12rem] leading-none font-bold tracking-tight text-primary">404</h1>
+        <h2 className="font-heading text-2xl font-semibold text-foreground">Not found</h2>
+        <p className="max-w-sm text-muted-foreground">
+          The resource you&apos;re looking for doesn&apos;t exist or has been moved.
+        </p>
+      </div>
+      <Link href=".">
+        <Button>Go Back</Button>
+      </Link>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/(active)/page.tsx b/src/app/dashboard/(active)/page.tsx
index db2caba..a0cb34b 100644
--- a/src/app/dashboard/(active)/page.tsx
+++ b/src/app/dashboard/(active)/page.tsx
@@ -1,45 +1,16 @@
-import Image from "next/image"
-import Link from "next/link"
-import azureSvg from "@/assets/svg/azure.svg"
-import telegramSvg from "@/assets/svg/telegram.svg"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import { getServerSession } from "@/server/auth"
+import { InfoIcon } from "lucide-react"
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { CompleteProfile } from "./complete-profile"
 
-export default async function AdminHome() {
-  const { data: session } = await getServerSession()
+export default function AdminHome() {
   return (
-    session && (
-      <div className="container py-8 px-2">
-        <CompleteProfile user={session.user} />
-        <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Home</h2>
-
-        <div className="gap-4 flex justify-start flex-wrap items-center">
-          <Link href="/dashboard/azure">
-            <Card className="w-90 hover:bg-accent transition-colors">
-              <CardHeader>
-                <CardTitle className="flex gap-2">
-                  <Image alt="azure logo" src={azureSvg} className="size-5" />
-                  Azure
-                </CardTitle>
-                <CardDescription>Manage Azure related things</CardDescription>
-              </CardHeader>
-            </Card>
-          </Link>
-
-          <Link href="/dashboard/telegram">
-            <Card className="w-90 hover:bg-accent transition-colors">
-              <CardHeader>
-                <CardTitle className="flex gap-2">
-                  <Image alt="telegram logo" src={telegramSvg} className="size-5" />
-                  Telegram
-                </CardTitle>
-                <CardDescription>Manage Telegram related things</CardDescription>
-              </CardHeader>
-            </Card>
-          </Link>
-        </div>
-      </div>
-    )
+    <div className="container">
+      <CompleteProfile />
+      <Alert variant="info">
+        <InfoIcon />
+        <AlertTitle>Page under construction</AlertTitle>
+        <AlertDescription>Use the sidebar to access the sections</AlertDescription>
+      </Alert>
+    </div>
   )
 }
diff --git a/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx b/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx
index 8743e65..c12558b 100644
--- a/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx
+++ b/src/app/dashboard/(active)/telegram/grants/delete-grant.tsx
@@ -19,7 +19,13 @@ import {
 import { Button } from "@/components/ui/button"
 import { interruptGrant } from "@/server/actions/grants"
 
-export function DeleteGrant({ userId, onDelete }: { userId: number; onDelete(): void }) {
+export function DeleteGrant({
+  userId,
+  // onDelete
+}: {
+  userId: number
+  // onDelete(): void
+}) {
   const router = useRouter()
   const [open, setOpen] = useState(false)
 
@@ -33,7 +39,7 @@ export function DeleteGrant({ userId, onDelete }: { userId: number; onDelete():
       else {
         toast.success("Grant interrupted successfully")
         router.refresh()
-        onDelete()
+        // onDelete()
       }
     } catch (err) {
       toast.error("There was an error")
diff --git a/src/app/dashboard/(active)/telegram/grants/grant-list.tsx b/src/app/dashboard/(active)/telegram/grants/grant-list.tsx
index 6f7e02c..aeb93a0 100644
--- a/src/app/dashboard/(active)/telegram/grants/grant-list.tsx
+++ b/src/app/dashboard/(active)/telegram/grants/grant-list.tsx
@@ -19,7 +19,7 @@ export function GrantList({ grants, isScheduled }: { grants: Grants; isScheduled
         <GrantRow row={r} key={r.grant.id} />
       ))}
       {grants.length === 0 && (
-        <div className="w-full text-center py-2 italic">
+        <div className="w-full text-center py-4 italic">
           There are no {isScheduled ? "scheduled" : "ongoing"} grants
         </div>
       )}
@@ -36,7 +36,7 @@ function GrantRow({ row: r }: { row: Grants[number] }) {
       </p>
       <p>{format(r.grant.validSince, "yyyy/MM/dd HH:mm")}</p>
       <p>{format(r.grant.validUntil, "yyyy/MM/dd HH:mm")}</p>
-      <DeleteGrant userId={r.grant.userId} onDelete={() => null} />
+      <DeleteGrant userId={r.grant.userId} />
     </div>
   )
 }
diff --git a/src/app/dashboard/(active)/telegram/grants/loading.tsx b/src/app/dashboard/(active)/telegram/grants/loading.tsx
index f74f889..3d6aca2 100644
--- a/src/app/dashboard/(active)/telegram/grants/loading.tsx
+++ b/src/app/dashboard/(active)/telegram/grants/loading.tsx
@@ -4,13 +4,13 @@ import { NewGrant } from "./new-grant"
 
 export default async function Loading() {
   return (
-    <div className="container p-8 h-full">
-      <div className="py-4 flex  gap-4 justify-start items-center">
+    <div className="container h-full">
+      <div className="flex gap-4 justify-start items-center">
         <p>Telegram Grants</p>
         <NewGrant />
       </div>
 
-      <Tabs defaultValue="all">
+      <Tabs defaultValue="all" className="w-full">
         <TabsList>
           <TabsTrigger className="w-30" value="all">
             All
@@ -36,7 +36,7 @@ export default async function Loading() {
 function Content() {
   return (
     <div className="flex flex-col w-full items-start justify-start py-4">
-      <div className="grid gap-4 items-center grid-cols-5 w-full border-b py-2 font-semibold">
+      <div className="grid gap-4 items-center grid-cols-5 w-full border-b py-2 font-bold">
         <p>Telegram ID</p>
         <p>Username</p>
         <p>Start Date</p>
diff --git a/src/app/dashboard/(active)/telegram/grants/page.tsx b/src/app/dashboard/(active)/telegram/grants/page.tsx
index 737f356..0ca8cb4 100644
--- a/src/app/dashboard/(active)/telegram/grants/page.tsx
+++ b/src/app/dashboard/(active)/telegram/grants/page.tsx
@@ -8,13 +8,13 @@ export default async function GrantsPage() {
   const { grants: scheduled } = await trpc.tg.grants.getScheduled.query()
 
   return (
-    <div className="container p-8 h-full">
-      <div className="py-4 flex  gap-4 justify-start items-center">
+    <div className="container">
+      <div className="flex gap-4 justify-start items-center">
         <p>Telegram Grants</p>
         <NewGrant />
       </div>
 
-      <Tabs defaultValue="all">
+      <Tabs defaultValue="all" className="w-full">
         <TabsList>
           <TabsTrigger className="w-30" value="all">
             All
diff --git a/src/app/dashboard/(active)/telegram/groups/group-row.tsx b/src/app/dashboard/(active)/telegram/groups/group-row.tsx
index f5b6e9a..bfb8006 100644
--- a/src/app/dashboard/(active)/telegram/groups/group-row.tsx
+++ b/src/app/dashboard/(active)/telegram/groups/group-row.tsx
@@ -57,7 +57,7 @@ export function GroupRow({ row: r }: { row: TgGroup }) {
           <Copy />
         </Button>
       </div>
-      <div className="flex items-center justify-start gap-2">
+      <div className="flex items-center justify-end gap-2">
         <p>
           {r.hide ? (
             <Badge onClick={toggleHide} className="bg-yellow-800 hover:bg-yellow-600 cursor-pointer">
diff --git a/src/app/dashboard/(active)/telegram/groups/loading.tsx b/src/app/dashboard/(active)/telegram/groups/loading.tsx
index 9bd5207..b66a765 100644
--- a/src/app/dashboard/(active)/telegram/groups/loading.tsx
+++ b/src/app/dashboard/(active)/telegram/groups/loading.tsx
@@ -1,21 +1,21 @@
+import { SearchInput } from "@/components/search-input"
 import { Skeleton } from "@/components/ui/skeleton"
-import { SearchInput } from "./search-input"
 
 export default async function Loading() {
   return (
-    <div className="container p-8">
+    <div className="container">
       <SearchInput disabled />
-      <div className="flex items-center pt-4 gap-1">
+      <div className="flex items-center gap-1">
         <p className="text-sm text-muted-foreground">Count: </p>
         <Skeleton className="w-10 h-5" />
       </div>
-      <div className="flex flex-col w-full items-start justify-start py-4">
-        <div className="grid gap-4 items-center grid-cols-[1fr_2fr_1fr_3fr_1fr] w-full border-b py-2">
-          <p>telegram ID</p>
+      <div className="flex flex-col w-full items-start justify-start">
+        <div className="grid gap-4 items-center grid-cols-[1fr_2fr_1fr_3fr_1fr] w-full border-b py-2 font-bold">
+          <p>Telegram ID</p>
           <p>Title</p>
           <p>Tag</p>
           <p>Invite Link</p>
-          <p>Actions</p>
+          <p className="text-end">Actions</p>
         </div>
         {new Array(12).fill(0).map((_, i) => (
           <Skeleton key={i} className="h-10 w-full my-2" />
diff --git a/src/app/dashboard/(active)/telegram/groups/page.tsx b/src/app/dashboard/(active)/telegram/groups/page.tsx
index 6753e61..47ba9cd 100644
--- a/src/app/dashboard/(active)/telegram/groups/page.tsx
+++ b/src/app/dashboard/(active)/telegram/groups/page.tsx
@@ -1,6 +1,6 @@
+import { SearchInput } from "@/components/search-input"
 import { trpc } from "@/server/trpc"
 import { GroupRow } from "./group-row"
-import { SearchInput } from "./search-input"
 
 export default async function TgGroups({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
   const { q } = await searchParams
@@ -12,18 +12,18 @@ export default async function TgGroups({ searchParams }: { searchParams: Promise
   const sorted = rows.sort((a, b) => a.title.localeCompare(b.title))
 
   return (
-    <div className="container p-8">
+    <div className="container">
       <SearchInput />
-      <p className="pt-4 text-sm text-muted-foreground">
+      <p className="text-sm text-muted-foreground">
         Count: <span className="text-foreground">{rows.length}</span>
       </p>
-      <div className="flex flex-col w-full items-start justify-start py-4">
-        <div className="grid gap-4 items-center grid-cols-[1fr_2fr_1fr_3fr_1fr] w-full border-b py-2">
-          <p>telegram ID</p>
+      <div className="flex flex-col w-full items-start justify-start">
+        <div className="grid gap-4 items-center grid-cols-[1fr_2fr_1fr_3fr_1fr] w-full border-b py-2 font-bold">
+          <p>Telegram ID</p>
           <p>Title</p>
           <p>Tag</p>
           <p>Invite Link</p>
-          <p>Actions</p>
+          <p className="text-end">Actions</p>
         </div>
         {sorted.map((r) => (
           <GroupRow row={r} key={r.telegramId} />
diff --git a/src/app/dashboard/(active)/telegram/page.tsx b/src/app/dashboard/(active)/telegram/page.tsx
deleted file mode 100644
index c9adc44..0000000
--- a/src/app/dashboard/(active)/telegram/page.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { MessageCircleMore, Sparkle, UserCog, Users } from "lucide-react"
-import Image from "next/image"
-import Link from "next/link"
-import telegramSvg from "@/assets/svg/telegram.svg"
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-
-export default function TelegramIndex() {
-  return (
-    <div className="container py-8 px-2 flex flex-col gap-4">
-      <h2 className="text-accent-foreground text-3xl font-bold flex gap-2 items-center">
-        <Image alt="telegram logo" src={telegramSvg} className="size-7" />
-        Telegram
-      </h2>
-      <div className="gap-4 flex justify-start flex-wrap items-center">
-        <Link href="/dashboard/telegram/groups">
-          <Card className="w-90 hover:bg-accent transition-colors">
-            <CardHeader>
-              <CardTitle className="flex gap-2 items-center">
-                <MessageCircleMore size={20} />
-                Groups
-              </CardTitle>
-              <CardDescription>Search groups and get links</CardDescription>
-            </CardHeader>
-          </Card>
-        </Link>
-
-        <Link href="/dashboard/telegram/user-details">
-          <Card className="w-90 hover:bg-accent transition-colors">
-            <CardHeader>
-              <CardTitle className="flex gap-2 items-center">
-                <UserCog size={20} />
-                User Details
-              </CardTitle>
-              <CardDescription>Manage user roles and group admins</CardDescription>
-            </CardHeader>
-          </Card>
-        </Link>
-
-        <Link href="/dashboard/telegram/user-list">
-          <Card className="w-90 hover:bg-accent transition-colors">
-            <CardHeader>
-              <CardTitle className="flex gap-2 items-center">
-                <Users size={20} />
-                User List
-              </CardTitle>
-              <CardDescription>See list of all our users</CardDescription>
-            </CardHeader>
-          </Card>
-        </Link>
-
-        <Link href="/dashboard/telegram/grants">
-          <Card className="w-90 hover:bg-accent transition-colors">
-            <CardHeader>
-              <CardTitle className="flex gap-2 items-center">
-                <Sparkle size={20} />
-                Grants
-              </CardTitle>
-              <CardDescription>Manage grants</CardDescription>
-            </CardHeader>
-          </Card>
-        </Link>
-      </div>
-    </div>
-  )
-}
diff --git a/src/app/dashboard/(active)/telegram/user-details/page.tsx b/src/app/dashboard/(active)/telegram/user-details/page.tsx
deleted file mode 100644
index 40d1671..0000000
--- a/src/app/dashboard/(active)/telegram/user-details/page.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-"use client"
-import { ArrowLeft, RefreshCcw, Search, X } from "lucide-react"
-import Link from "next/link"
-import { Suspense, useState, useTransition } from "react"
-import { Spinner } from "@/components/spinner"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { searchUser } from "@/server/actions/users"
-import { AuditLogCard } from "./card-audit-log"
-import { GroupAdminCard } from "./card-group-admin"
-import { MessageCard } from "./card-message"
-import { UserGrantCard } from "./card-user-grant"
-import { UserInfoCard } from "./card-user-info"
-import { NewGroupAdmin } from "./new-group-admin"
-
-type Data = Awaited<ReturnType<typeof searchUser>>
-
-export default function TgUsers() {
-  const [username, setUsername] = useState("")
-  const [data, setData] = useState<Data | null>(null)
-  const [pending, startTransition] = useTransition()
-
-  async function submit() {
-    startTransition(async () => {
-      const user = await searchUser(username)
-      setData(user)
-    })
-  }
-
-  async function reset() {
-    setUsername("")
-    setData(null)
-  }
-
-  return (
-    <div className="container p-8">
-      <Link href="/dashboard/telegram" className="flex gap-1 items-center text-muted-foreground mb-2 hover:underline">
-        <ArrowLeft size={16} /> Back
-      </Link>
-
-      <form action={submit} className="pt-2 gap-y-4 flex flex-col justify-start items-start">
-        <div className="flex gap-2 flex-col items-start justify-start">
-          <Label htmlFor="email" className="text-base">
-            Search by username
-          </Label>
-          <div className="flex gap-2 items-center justify-start">
-            <Input
-              id="group-query"
-              type="text"
-              placeholder="Username"
-              disabled={!!data}
-              className="bg-card w-auto"
-              required
-              onChange={(e) => {
-                setUsername(e.target.value)
-              }}
-              value={username}
-            />
-
-            {data ? (
-              <Button variant="outline" disabled={pending} onClick={() => startTransition(reset)}>
-                <X />
-                Reset
-              </Button>
-            ) : (
-              <Button disabled={pending} type="submit" size="icon" className={pending ? "bg-muted" : ""}>
-                {pending ? <Spinner /> : <Search />}
-              </Button>
-            )}
-            {data && (
-              <Button disabled={pending} variant="secondary" type="submit">
-                <RefreshCcw />
-                Refresh
-              </Button>
-            )}
-          </div>
-        </div>
-      </form>
-
-      <br />
-
-      {data && (
-        <>
-          <div className="grid grid-cols-3 items-start gap-4">
-            <UserInfoCard user={data.user} roles={data.roles ?? []} onUpdate={submit} />
-            {data.grant && <UserGrantCard user={data.user} grant={data.grant} onDelete={submit} />}
-          </div>
-
-          <div className="pt-6 flex gap-4 items-center">
-            <p>Admin in groups:</p>
-            <NewGroupAdmin
-              user={data.user}
-              alreadyIn={data.groupAdmin.map((g) => g?.group.id ?? 0) ?? []}
-              onConfirm={submit}
-            />
-          </div>
-          <div className="grid grid-cols-4 py-2 gap-4">
-            {data.groupAdmin
-              .filter((m) => m !== null && m !== undefined)
-              .map((m) => (
-                <GroupAdminCard groupAdminInfo={m} user={data.user} key={m.group.id} onDelete={submit} />
-              ))}
-
-            {data.groupAdmin.length === 0 && (
-              <p className="bg-card rounded-lg p-3 italic text-muted-foreground text-sm">
-                This user is not group admin in any group.
-              </p>
-            )}
-          </div>
-
-          <p className="pt-6">Last messages (max 12):</p>
-          <div className="grid grid-cols-3 py-2 gap-4">
-            {data.messages?.map((m) => (
-              <MessageCard message={m} key={`${m.chatId}-${m.messageId}`} />
-            ))}
-
-            {data.messages?.length === 0 && (
-              <p className="bg-card rounded-lg p-3 italic text-muted-foreground text-sm">
-                No recent messages sent by this user
-              </p>
-            )}
-          </div>
-
-          <p className="pt-6">Audit log:</p>
-          <div className="grid grid-cols-3 py-2 gap-4">
-            {data.audits.map((m) => (
-              <Suspense fallback={null} key={`${m.id}-${m.type}`}>
-                <AuditLogCard log={m} />
-              </Suspense>
-            ))}
-            {data.audits.length === 0 && (
-              <p className="bg-card rounded-lg p-3 italic text-muted-foreground text-sm">
-                No audit log found for this user
-              </p>
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  )
-}
diff --git a/src/app/dashboard/(active)/telegram/user-list/page.tsx b/src/app/dashboard/(active)/telegram/user-list/page.tsx
deleted file mode 100644
index 42e0f5e..0000000
--- a/src/app/dashboard/(active)/telegram/user-list/page.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { trpc } from "@/server/trpc"
-import type { ApiOutput } from "@/server/trpc/types"
-
-type Users = NonNullable<ApiOutput["tg"]["users"]["getAll"]["users"]>
-
-export default async function TgUsers() {
-  const data = await trpc.tg.users.getAll.query()
-  return (
-    <div className="container p-8">
-      <p className="pt-4 text-sm text-muted-foreground">
-        Count: <span className="text-foreground">{data.users?.length}</span>
-      </p>
-      <div className="flex flex-col w-full items-start justify-start py-4">
-        <div className="grid gap-4 items-center grid-cols-3 w-full border-b py-2 font-bold">
-          <p>Telegram ID</p>
-          <p>Username</p>
-          <p>Name</p>
-        </div>
-        {data?.users?.map((r) => (
-          <UserRow row={r} key={r.id} />
-        ))}
-      </div>
-    </div>
-  )
-}
-
-function UserRow({ row: r }: { row: Users[number] }) {
-  return (
-    <div className="grid gap-4 items-center grid-cols-3 border-b py-2 w-full">
-      <p>{r.id}</p>
-      <p className={r.username ? "" : "text-muted-foreground italic"}>{r.username ? `@${r.username}` : `<unset>`}</p>
-      <p>
-        {r.firstName ?? ""} {r.lastName ?? ""}
-      </p>
-    </div>
-  )
-}
diff --git a/src/app/dashboard/(active)/telegram/user-details/add-role.tsx b/src/app/dashboard/(active)/telegram/users/[id]/add-role.tsx
similarity index 94%
rename from src/app/dashboard/(active)/telegram/user-details/add-role.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/add-role.tsx
index dfd5685..361ddc1 100644
--- a/src/app/dashboard/(active)/telegram/user-details/add-role.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/add-role.tsx
@@ -1,6 +1,7 @@
 "use client"
 import { USER_ROLE } from "@polinetwork/backend"
 import { Plus } from "lucide-react"
+import { useRouter } from "next/navigation"
 import { useState } from "react"
 import { toast } from "sonner"
 import { Spinner } from "@/components/spinner"
@@ -29,7 +30,15 @@ const ARRAY_USER_ROLES = [
   USER_ROLE.PRESIDENT,
 ] as const
 
-export function AddRole({ user, alreadyRoles, onAdd }: { user: TgUser; alreadyRoles: TgUserRole[]; onAdd(): void }) {
+export function AddRole({
+  user,
+  alreadyRoles,
+  // onAdd
+}: {
+  user: TgUser
+  alreadyRoles: TgUserRole[]
+  // onAdd(): void
+}) {
   const availableRoles = ARRAY_USER_ROLES.filter((r) => !alreadyRoles.includes(r)).map((g) => ({
     value: g,
     label: `${g.slice(0, 1).toUpperCase()}${g.slice(1)}`,
@@ -39,6 +48,8 @@ export function AddRole({ user, alreadyRoles, onAdd }: { user: TgUser; alreadyRo
   const [pending, setPending] = useState(false)
   const [selectedRole, setSelectedRole] = useState<TgUserRole | null>(null)
 
+  const router = useRouter()
+
   async function submit() {
     if (!selectedRole) return toast.warning("No group selected, cannot proceed")
     if (!user) return toast.warning("Invalid user, try restarting the dialog")
@@ -53,7 +64,8 @@ export function AddRole({ user, alreadyRoles, onAdd }: { user: TgUser; alreadyRo
       else if (error === "UNAUTHORIZED_SELF_ASSIGN") toast.error("You cannot add roles to yourself")
       else {
         toast.success(`Role added!`)
-        onAdd()
+        router.refresh()
+        // onAdd()
       }
       handleOpenChange(false)
     } catch (err) {
diff --git a/src/app/dashboard/(active)/telegram/user-details/card-audit-log.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-audit-log.tsx
similarity index 91%
rename from src/app/dashboard/(active)/telegram/user-details/card-audit-log.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/card-audit-log.tsx
index 681216e..4c412d8 100644
--- a/src/app/dashboard/(active)/telegram/user-details/card-audit-log.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/card-audit-log.tsx
@@ -1,8 +1,8 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { fmtUser } from "@/lib/utils/telegram"
-import type { searchUser } from "@/server/actions/users"
+import type { getUserDetails } from "@/server/actions/users"
 
-type Data = Awaited<ReturnType<typeof searchUser>>
+type Data = Awaited<ReturnType<typeof getUserDetails>>
 type Log = NonNullable<Data>["audits"][number]
 
 export function AuditLogCard({ log: m }: { log: Log }) {
diff --git a/src/app/dashboard/(active)/telegram/user-details/card-group-admin.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-group-admin.tsx
similarity index 91%
rename from src/app/dashboard/(active)/telegram/user-details/card-group-admin.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/card-group-admin.tsx
index e098242..ea70a93 100644
--- a/src/app/dashboard/(active)/telegram/user-details/card-group-admin.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/card-group-admin.tsx
@@ -10,11 +10,11 @@ type GroupAdminSingle = NonNullable<ApiOutput["tg"]["permissions"]["getRoles"]["
 export function GroupAdminCard({
   user,
   groupAdminInfo: m,
-  onDelete,
+  // onDelete,
 }: {
   user: NonNullable<User>
   groupAdminInfo: GroupAdminSingle
-  onDelete(): void
+  // onDelete(): void
 }) {
   return (
     <Card>
@@ -32,7 +32,7 @@ export function GroupAdminCard({
         </p>
       </CardContent>
       <CardFooter className="justify-end gap-2">
-        <DeleteGroupAdmin userId={user.id} chatId={m.group.id} onDelete={onDelete} />
+        <DeleteGroupAdmin userId={user.id} chatId={m.group.id} />
       </CardFooter>
     </Card>
   )
diff --git a/src/app/dashboard/(active)/telegram/user-details/card-message.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-message.tsx
similarity index 100%
rename from src/app/dashboard/(active)/telegram/user-details/card-message.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/card-message.tsx
diff --git a/src/app/dashboard/(active)/telegram/user-details/card-user-grant.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-user-grant.tsx
similarity index 78%
rename from src/app/dashboard/(active)/telegram/user-details/card-user-grant.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/card-user-grant.tsx
index 05a80ab..7dbeb37 100644
--- a/src/app/dashboard/(active)/telegram/user-details/card-user-grant.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/card-user-grant.tsx
@@ -3,9 +3,17 @@ import { format } from "date-fns"
 import { Sparkle } from "lucide-react"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import type { TgGrant, TgUser } from "@/server/trpc/types"
-import { DeleteGrant } from "../grants/delete-grant"
+import { DeleteGrant } from "../../grants/delete-grant"
 
-export function UserGrantCard({ user, grant, onDelete }: { user: TgUser; grant: TgGrant; onDelete(): void }) {
+export function UserGrantCard({
+  user,
+  grant,
+  //onDelete
+}: {
+  user: TgUser
+  grant: TgGrant
+  //onDelete(): void
+}) {
   return (
     <Card className="h-full">
       <CardHeader>
@@ -19,7 +27,7 @@ export function UserGrantCard({ user, grant, onDelete }: { user: TgUser; grant:
         <p>End: {format(grant.validUntil, "yyyy/MM/dd HH:mm")}</p>
       </CardContent>
       <CardFooter className="gap-2">
-        <DeleteGrant userId={user.id} onDelete={onDelete} />
+        <DeleteGrant userId={user.id} />
       </CardFooter>
     </Card>
   )
diff --git a/src/app/dashboard/(active)/telegram/user-details/card-user-info.tsx b/src/app/dashboard/(active)/telegram/users/[id]/card-user-info.tsx
similarity index 89%
rename from src/app/dashboard/(active)/telegram/user-details/card-user-info.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/card-user-info.tsx
index ca2362a..52741df 100644
--- a/src/app/dashboard/(active)/telegram/user-details/card-user-info.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/card-user-info.tsx
@@ -1,3 +1,4 @@
+"use client"
 import { Star } from "lucide-react"
 import { Badge } from "@/components/ui/badge"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
@@ -12,11 +13,11 @@ type UserRoles = ApiOutput["tg"]["permissions"]["getRoles"]["roles"]
 export function UserInfoCard({
   user,
   roles,
-  onUpdate,
+  // onUpdate,
 }: {
   user: NonNullable<User>
   roles: UserRoles
-  onUpdate(): void
+  // onUpdate(): void
 }) {
   const sesh = useSession()
   const seshUserId = sesh.data?.user.telegramId
@@ -49,8 +50,8 @@ export function UserInfoCard({
         </div>
       </CardContent>
       <CardFooter className="gap-2">
-        <AddRole alreadyRoles={roles ?? []} user={user} onAdd={onUpdate} />
-        <RemoveRole alreadyRoles={roles ?? []} user={user} onDelete={onUpdate} />
+        <AddRole alreadyRoles={roles ?? []} user={user} />
+        <RemoveRole alreadyRoles={roles ?? []} user={user} />
       </CardFooter>
     </Card>
   )
diff --git a/src/app/dashboard/(active)/telegram/user-details/delete-group-admin.tsx b/src/app/dashboard/(active)/telegram/users/[id]/delete-group-admin.tsx
similarity index 90%
rename from src/app/dashboard/(active)/telegram/user-details/delete-group-admin.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/delete-group-admin.tsx
index 3a2cdcc..25b0b36 100644
--- a/src/app/dashboard/(active)/telegram/user-details/delete-group-admin.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/delete-group-admin.tsx
@@ -1,6 +1,7 @@
 "use client"
 
 import { Trash2, Trash2Icon } from "lucide-react"
+import { useRouter } from "next/navigation"
 import { useState } from "react"
 import { toast } from "sonner"
 import { Spinner } from "@/components/spinner"
@@ -19,10 +20,20 @@ import {
 import { Button } from "@/components/ui/button"
 import { delGroupAdmin } from "@/server/actions/users"
 
-export function DeleteGroupAdmin({ userId, chatId, onDelete }: { userId: number; chatId: number; onDelete(): void }) {
+export function DeleteGroupAdmin({
+  userId,
+  chatId,
+  // onDelete
+}: {
+  userId: number
+  chatId: number
+  // onDelete(): void
+}) {
   const [open, setOpen] = useState(false)
   const [pending, setPending] = useState(false)
 
+  const router = useRouter()
+
   async function deleteGroupAdmin() {
     setPending(true)
 
@@ -35,7 +46,8 @@ export function DeleteGroupAdmin({ userId, chatId, onDelete }: { userId: number;
       else if (error === "UNAUTHORIZED_SELF_ASSIGN") toast.error("You cannot delete on yourself")
       else {
         toast.success("Group Admin deleted!")
-        onDelete()
+        router.refresh()
+        // onDelete()
       }
     } catch (err) {
       toast.error("There was an error")
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/loading.tsx b/src/app/dashboard/(active)/telegram/users/[id]/loading.tsx
new file mode 100644
index 0000000..be3d0ae
--- /dev/null
+++ b/src/app/dashboard/(active)/telegram/users/[id]/loading.tsx
@@ -0,0 +1,37 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+export default async function Loading() {
+  return (
+    <div className="container">
+      <div className="grid grid-cols-3 items-start gap-4 w-full">
+        <Skeleton className="w-full h-44 rounded-xl" />
+        <Skeleton className="w-full h-44 rounded-xl" />
+      </div>
+
+      <div className="w-full">
+        <p>Admin in groups:</p>
+        <div className="grid grid-cols-4 py-3 gap-4 w-full">
+          <Skeleton className="w-full h-44 rounded-xl" />
+          <Skeleton className="w-full h-44 rounded-xl" />
+        </div>
+      </div>
+
+      <div className="w-full">
+        <p>Last messages (max 12):</p>
+        <div className="grid grid-cols-3 py-3 gap-4 w-full">
+          <Skeleton className="w-full h-44 rounded-xl" />
+          <Skeleton className="w-full h-44 rounded-xl" />
+        </div>
+      </div>
+
+      <div className="w-full">
+        <p>Audit log:</p>
+        <div className="grid grid-cols-3 py-3 gap-4 w-full">
+          {new Array(9).fill(0).map((_, i) => (
+            <Skeleton key={i} className="w-full h-44 rounded-xl" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/(active)/telegram/user-details/new-group-admin.tsx b/src/app/dashboard/(active)/telegram/users/[id]/new-group-admin.tsx
similarity index 94%
rename from src/app/dashboard/(active)/telegram/user-details/new-group-admin.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/new-group-admin.tsx
index 58763cc..840e20d 100644
--- a/src/app/dashboard/(active)/telegram/user-details/new-group-admin.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/new-group-admin.tsx
@@ -1,5 +1,6 @@
 "use client"
 import { Plus, Search, X } from "lucide-react"
+import { useRouter } from "next/navigation"
 import { useState } from "react"
 import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
@@ -23,12 +24,22 @@ import type { ApiOutput } from "@/server/trpc/types"
 type Groups = ApiOutput["tg"]["groups"]["search"]["groups"]
 type User = ApiOutput["tg"]["users"]["getByUsername"]["user"]
 
-export function NewGroupAdmin({ user, alreadyIn, onConfirm }: { user: User; alreadyIn: number[]; onConfirm(): void }) {
+export function NewGroupAdmin({
+  user,
+  alreadyIn,
+  // onConfirm
+}: {
+  user: User
+  alreadyIn: number[]
+  // onConfirm(): void
+}) {
   const [open, setOpen] = useState(false)
   const [groupQuery, setGroupQuery] = useState("")
   const [groups, setGroups] = useState<Groups>([])
   const [selectedGroup, setSelectedGroup] = useState<Groups[number] | null>(null)
 
+  const router = useRouter()
+
   async function search() {
     const { groups } = await searchGroup(groupQuery)
     setGroups(groups.filter((g) => !alreadyIn.includes(g.telegramId)))
@@ -44,7 +55,8 @@ export function NewGroupAdmin({ user, alreadyIn, onConfirm }: { user: User; alre
         toast.error("You don't have enough permissions")
       } else {
         toast.info(`Group admin added`)
-        onConfirm()
+        router.refresh()
+        // onConfirm()
       }
     } catch (err) {
       console.error(err)
diff --git a/src/app/dashboard/(active)/telegram/users/[id]/page.tsx b/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
new file mode 100644
index 0000000..bc83ede
--- /dev/null
+++ b/src/app/dashboard/(active)/telegram/users/[id]/page.tsx
@@ -0,0 +1,83 @@
+import { notFound } from "next/navigation"
+import { Suspense } from "react"
+import { getUserDetails } from "@/server/actions/users"
+import { AuditLogCard } from "./card-audit-log"
+import { GroupAdminCard } from "./card-group-admin"
+import { MessageCard } from "./card-message"
+import { UserGrantCard } from "./card-user-grant"
+import { UserInfoCard } from "./card-user-info"
+import { NewGroupAdmin } from "./new-group-admin"
+
+export default async function TgUserDetails({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const parsedInt = parseInt(id, 10)
+  if (isNaN(parsedInt)) notFound()
+  const data = await getUserDetails(parsedInt)
+
+  if (!data) notFound()
+
+  return (
+    <div className="container">
+      {data && (
+        <>
+          <div className="grid grid-cols-3 items-start gap-4 w-full">
+            <UserInfoCard user={data.user} roles={data.roles ?? []} />
+            {data.grant && <UserGrantCard user={data.user} grant={data.grant} />}
+          </div>
+
+          <div className="w-full">
+            <div className="flex gap-4 items-center w-full">
+              <p>Admin in groups:</p>
+              <NewGroupAdmin user={data.user} alreadyIn={data.groupAdmin.map((g) => g?.group.id ?? 0) ?? []} />
+            </div>
+
+            <div className="grid grid-cols-4 py-3 gap-4 w-full">
+              {data.groupAdmin
+                .filter((m) => m !== null && m !== undefined)
+                .map((m) => (
+                  <GroupAdminCard groupAdminInfo={m} user={data.user} key={m.group.id} />
+                ))}
+
+              {data.groupAdmin.length === 0 && (
+                <p className="bg-card rounded-lg p-3 italic text-muted-foreground text-sm">
+                  This user is not group admin in any group.
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="w-full">
+            <p>Last messages (max 15):</p>
+            <div className="grid grid-cols-3 py-3 gap-4 w-full">
+              {data.messages?.map((m) => (
+                <MessageCard message={m} key={`${m.chatId}-${m.messageId}`} />
+              ))}
+
+              {data.messages?.length === 0 && (
+                <p className="bg-card rounded-lg p-3 italic text-muted-foreground text-sm">
+                  No recent messages sent by this user
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="w-full">
+            <p>Audit log:</p>
+            <div className="grid grid-cols-3 py-3 gap-4 w-full">
+              {data.audits.map((m) => (
+                <Suspense fallback={null} key={`${m.id}-${m.type}`}>
+                  <AuditLogCard log={m} />
+                </Suspense>
+              ))}
+              {data.audits.length === 0 && (
+                <p className="bg-card rounded-lg p-3 italic text-muted-foreground text-sm">
+                  No audit log found for this user
+                </p>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
diff --git a/src/app/dashboard/(active)/telegram/user-details/remove-role.tsx b/src/app/dashboard/(active)/telegram/users/[id]/remove-role.tsx
similarity index 96%
rename from src/app/dashboard/(active)/telegram/user-details/remove-role.tsx
rename to src/app/dashboard/(active)/telegram/users/[id]/remove-role.tsx
index fcf7f23..82ddde0 100644
--- a/src/app/dashboard/(active)/telegram/user-details/remove-role.tsx
+++ b/src/app/dashboard/(active)/telegram/users/[id]/remove-role.tsx
@@ -1,6 +1,7 @@
 "use client"
 import { USER_ROLE } from "@polinetwork/backend"
 import { Minus } from "lucide-react"
+import { useRouter } from "next/navigation"
 import { useState } from "react"
 import { toast } from "sonner"
 import { Spinner } from "@/components/spinner"
@@ -33,11 +34,11 @@ const ARRAY_USER_ROLES = [
 export function RemoveRole({
   user,
   alreadyRoles,
-  onDelete,
+  // onDelete,
 }: {
   user: TgUser
   alreadyRoles: TgUserRole[]
-  onDelete(): void
+  // onDelete(): void
 }) {
   const sesh = useSession()
   const removerId = sesh.data?.user.telegramId
@@ -51,6 +52,8 @@ export function RemoveRole({
   const [pending, setPending] = useState(false)
   const [selectedRole, setSelectedRole] = useState<TgUserRole | null>(null)
 
+  const router = useRouter()
+
   async function submit() {
     if (!removerId) return toast.warning("Invalid session, try reloading the page")
     if (!selectedRole) return toast.warning("No group selected, cannot proceed")
@@ -66,7 +69,8 @@ export function RemoveRole({
       else if (error === "UNAUTHORIZED_SELF_ASSIGN") toast.error("You cannot delete on yourself")
       else {
         toast.success("Role removed!")
-        onDelete()
+        router.refresh()
+        // onDelete()
       }
     } catch (err) {
       console.error(err)
diff --git a/src/app/dashboard/(active)/telegram/user-list/loading.tsx b/src/app/dashboard/(active)/telegram/users/loading.tsx
similarity index 66%
rename from src/app/dashboard/(active)/telegram/user-list/loading.tsx
rename to src/app/dashboard/(active)/telegram/users/loading.tsx
index 55f8aa6..e289840 100644
--- a/src/app/dashboard/(active)/telegram/user-list/loading.tsx
+++ b/src/app/dashboard/(active)/telegram/users/loading.tsx
@@ -1,17 +1,20 @@
+import { SearchInput } from "@/components/search-input"
 import { Skeleton } from "@/components/ui/skeleton"
 
 export default async function Loading() {
   return (
-    <div className="container p-8">
-      <div className="flex items-center pt-4 gap-1">
+    <div className="container">
+      <SearchInput disabled />
+      <div className="flex items-center gap-1">
         <p className="text-sm text-muted-foreground">Count: </p>
         <Skeleton className="w-10 h-5" />
       </div>
-      <div className="flex flex-col w-full items-start justify-start py-4">
-        <div className="grid gap-4 items-center grid-cols-3 w-full border-b py-2 font-bold">
+      <div className="flex flex-col w-full items-start justify-start">
+        <div className="grid gap-4 items-center grid-cols-4 w-full border-b py-2 font-bold">
           <p>Telegram ID</p>
           <p>Username</p>
           <p>Name</p>
+          <p className="text-end">Actions</p>
         </div>
         {new Array(12).fill(0).map((_, i) => (
           <Skeleton key={i} className="h-10 w-full my-2" />
diff --git a/src/app/dashboard/(active)/telegram/users/page.tsx b/src/app/dashboard/(active)/telegram/users/page.tsx
new file mode 100644
index 0000000..5a52f6d
--- /dev/null
+++ b/src/app/dashboard/(active)/telegram/users/page.tsx
@@ -0,0 +1,56 @@
+import { Eye } from "lucide-react"
+import Link from "next/link"
+import { SearchInput } from "@/components/search-input"
+import { Button } from "@/components/ui/button"
+import { trpc } from "@/server/trpc"
+import type { ApiOutput } from "@/server/trpc/types"
+
+type Users = NonNullable<ApiOutput["tg"]["users"]["getAll"]["users"]>
+
+export default async function TgUsers({ searchParams }: { searchParams: Promise<{ q?: string }> }) {
+  const { q } = await searchParams
+  const { users } = await trpc.tg.users.getAll.query()
+
+  const data = (!q ? users : users?.filter((u) => u.username?.toLowerCase().replace("@", "").startsWith(q))) ?? []
+
+  return (
+    <div className="container">
+      <SearchInput />
+      <p className="text-sm text-muted-foreground">
+        Count: <span className="text-foreground">{users?.length}</span>
+      </p>
+      <div className="flex flex-col w-full items-start justify-start">
+        <div className="grid gap-4 items-center grid-cols-4 w-full border-b py-2 font-bold">
+          <p>Telegram ID</p>
+          <p>Username</p>
+          <p>Name</p>
+          <p className="text-end">Actions</p>
+        </div>
+        {data.length > 0 ? (
+          data.map((r) => <UserRow row={r} key={r.id} />)
+        ) : (
+          <div className="flex gap-4 justify-center items-center border-b py-2 w-full">No users found</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function UserRow({ row: r }: { row: Users[number] }) {
+  return (
+    <div className="grid gap-4 items-center grid-cols-4 border-b py-2 w-full">
+      <p>{r.id}</p>
+      <p className={r.username ? "" : "text-muted-foreground italic"}>{r.username ? `@${r.username}` : `<unset>`}</p>
+      <p>
+        {r.firstName ?? ""} {r.lastName ?? ""}
+      </p>
+      <div className="flex justify-end gap-2 items-center">
+        <Link href={`/dashboard/telegram/users/${r.id}`}>
+          <Button size="icon" aria-label="see user details">
+            <Eye />
+          </Button>
+        </Link>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index d55b79f..54aee61 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -1,5 +1,4 @@
 import { redirect } from "next/navigation"
-import { AdminHeader } from "@/components/admin-header"
 import { getServerSession } from "@/server/auth"
 import { trpc } from "@/server/trpc"
 
@@ -21,10 +20,5 @@ export default async function AdminLayout({ children }: { children: React.ReactN
   if (!roles.includes("owner") && !roles.includes("direttivo") && !roles.includes("president"))
     redirect("/onboarding/unauthorized")
 
-  return (
-    <>
-      <AdminHeader />
-      {children}
-    </>
-  )
+  return children
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b503bb8..02c7f72 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -43,9 +43,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           disableTransitionOnChange
         >
           <TooltipProvider>
-            <div className="flex h-screen overflow-y-auto w-full flex-col items-center justify-start px-4 sm:px-8">
-              {children}
-            </div>
+            <div className="flex h-screen overflow-y-auto w-full flex-col items-center justify-start ">{children}</div>
             <Toaster richColors position="bottom-center" />
           </TooltipProvider>
         </ThemeProvider>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index abdba51..a658b62 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,12 +9,12 @@ export default async function IndexPage() {
   if (session.data?.user) redirect("/dashboard")
 
   return (
-    <>
+    <div className="px-4 sm:px-8">
       <Header />
       <main className="text-accent container mx-auto flex grow flex-col items-center justify-start space-y-6 px-4 pb-8 pt-12">
         <WhatIs />
         <CanIAccess />
       </main>
-    </>
+    </div>
   )
 }
diff --git a/src/components/admin-header/index.tsx b/src/components/admin-header/index.tsx
deleted file mode 100644
index 135217e..0000000
--- a/src/components/admin-header/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Link from "next/link"
-import { Logo } from "../logo"
-import { RightNav } from "./right-nav"
-
-export function AdminHeader() {
-  return (
-    <header className="bg-accent/40 sticky top-4 backdrop-blur-xl rounded-2xl isolate z-20 grid grid-cols-[7rem_1fr_7rem] h-(--header-height) w-full container shrink-0 items-center justify-center space-x-6 px-4">
-      <Link href="/dashboard">
-        <Logo size={32} />
-      </Link>
-      <nav className="flex grow items-center justify-center gap-6">
-        <Link href="/dashboard" className="hover:underline">
-          Home
-        </Link>
-        <Link href="/dashboard/azure" className="hover:underline">
-          Azure
-        </Link>
-        <Link href="/dashboard/telegram" className="hover:underline">
-          Telegram
-        </Link>
-      </nav>
-      <nav className="flex justify-end items-center h-full">
-        <RightNav />
-      </nav>
-    </header>
-  )
-}
diff --git a/src/components/admin-header/right-nav.tsx b/src/components/admin-header/right-nav.tsx
deleted file mode 100644
index 808a440..0000000
--- a/src/components/admin-header/right-nav.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-"use client"
-import { LogOutIcon, Settings2, UserIcon } from "lucide-react"
-import Link from "next/link"
-import { redirect } from "next/navigation"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { signOut, useSession } from "@/lib/auth"
-import { getInitials } from "@/lib/utils"
-
-export function RightNav() {
-  const { data } = useSession()
-
-  return data ? (
-    <DropdownMenu>
-      <DropdownMenuTrigger
-        render={
-          <Button variant="ghost" size="icon" className="rounded-full">
-            <Avatar size="lg">
-              <AvatarImage src={data.user.image || undefined} alt={`propic of ${data.user.name}`} />
-              <AvatarFallback className="rounded-full text-base text-foreground">
-                {data.user.name ? getInitials(data.user.name) : <UserIcon className="size-5" />}
-              </AvatarFallback>
-            </Avatar>
-          </Button>
-        }
-      />
-      <DropdownMenuContent align="end" sideOffset={10}>
-        <DropdownMenuGroup>
-          <DropdownMenuLabel>Account</DropdownMenuLabel>
-          <Link href="/dashboard/account">
-            <DropdownMenuItem>
-              <Settings2 />
-              Settings
-            </DropdownMenuItem>
-          </Link>
-          <DropdownMenuItem
-            onClick={async () => {
-              await signOut()
-              redirect("/login")
-            }}
-            variant="destructive"
-          >
-            <LogOutIcon /> Logout
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  ) : (
-    <div className="size-9 rounded-full bg-accent animate-pulse" />
-  )
-}
diff --git a/src/components/dashboard-sidebar/data.tsx b/src/components/dashboard-sidebar/data.tsx
new file mode 100644
index 0000000..7401a0c
--- /dev/null
+++ b/src/components/dashboard-sidebar/data.tsx
@@ -0,0 +1,41 @@
+import { MessageCircleMoreIcon, Sparkle, Users } from "lucide-react"
+import Image from "next/image"
+import azureSvg from "@/assets/svg/azure.svg"
+import telegramSvg from "@/assets/svg/telegram.svg"
+
+export const DSData = {
+  mainNav: [
+    {
+      title: "Telegram",
+      icon: <Image alt="telegram logo" src={telegramSvg} className="size-4" />,
+      items: [
+        { title: "Grants", url: "/dashboard/telegram/grants", icon: <Sparkle /> },
+        { title: "Groups", url: "/dashboard/telegram/groups", icon: <MessageCircleMoreIcon /> },
+        { title: "Users", url: "/dashboard/telegram/users", icon: <Users /> },
+      ],
+    },
+    {
+      title: "Azure",
+      icon: <Image alt="azure logo" src={azureSvg} className="size-4" />,
+      items: [{ title: "Members", url: "/dashboard/azure/members", icon: <Users /> }],
+    },
+  ],
+}
+
+const flattenNavigation = (): Map<string, string> => {
+  const map = new Map<string, string>()
+  const traverse = (list: { title: string; url?: string }[]) => {
+    for (const item of list) {
+      if (!item.url) continue
+      map.set(item.url, item.title)
+    }
+  }
+  Object.entries(DSData).forEach(([_k, nav]) => {
+    nav.forEach((category) => {
+      traverse(category.items)
+    })
+  })
+  return map
+}
+
+export const NAV_MAP = flattenNavigation()
diff --git a/src/components/dashboard-sidebar/index.tsx b/src/components/dashboard-sidebar/index.tsx
new file mode 100644
index 0000000..4fb0080
--- /dev/null
+++ b/src/components/dashboard-sidebar/index.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import Link from "next/link"
+import type * as React from "react"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+import { Logo } from "../logo"
+import { DSMainNav } from "./main-nav"
+import { DSUserNav } from "./user-nav"
+
+export function DashboardSidebar({
+  categoryState,
+  ...props
+}: React.ComponentProps<typeof Sidebar> & { categoryState: Record<string, boolean> }) {
+  return (
+    <Sidebar variant="floating" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<Link href="/dashboard" />}>
+              <Logo />
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">PoliNetwork APS</span>
+                <span className="truncate text-xs">Admin Dashboard</span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <DSMainNav categoryState={categoryState} />
+      </SidebarContent>
+      <SidebarFooter>
+        <DSUserNav />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
diff --git a/src/components/dashboard-sidebar/main-nav.tsx b/src/components/dashboard-sidebar/main-nav.tsx
new file mode 100644
index 0000000..7b7acf5
--- /dev/null
+++ b/src/components/dashboard-sidebar/main-nav.tsx
@@ -0,0 +1,103 @@
+"use client"
+import { ChevronRight } from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useState } from "react"
+import { COOKIES } from "@/constants"
+import { useCookieStorage } from "@/hooks/use-cookie-storage"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "../ui/sidebar"
+import { DSData } from "./data"
+
+export function DSMainNav({ categoryState }: { categoryState: Record<string, boolean> }) {
+  const [_, setCategoryState] = useCookieStorage<Record<string, boolean>>(
+    COOKIES.SIDEBAR_CATEGORY_STATE,
+    {},
+    { expires: 60 * 60 * 24 * 7 }
+  )
+
+  return (
+    <SidebarGroup>
+      <SidebarMenu className="gap-2">
+        {DSData.mainNav.map((category) => (
+          <DSMenuCategory
+            category={category}
+            key={category.title}
+            initialOpen={categoryState[category.title]}
+            onPersistOpen={(open) => {
+              setCategoryState((state) => ({ ...state, [category.title]: open }))
+            }}
+          />
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}
+
+function DSMenuCategory({
+  category,
+  initialOpen,
+  onPersistOpen,
+}: {
+  category: (typeof DSData)["mainNav"][0]
+  initialOpen?: boolean
+  onPersistOpen: (open: boolean) => void
+}) {
+  const pathname = usePathname()
+  const categoryUrl = category.items[0]?.url.split("/").slice(0, 3).join("/")
+  const [open, setOpen] = useState<boolean>(initialOpen ?? (categoryUrl ? pathname.startsWith(categoryUrl) : false))
+
+  function handleOpenChange(open: boolean) {
+    setOpen(open)
+    onPersistOpen(open)
+  }
+
+  return (
+    <Collapsible render={<SidebarMenuItem />} open={open} onOpenChange={handleOpenChange} className="group/collapsible">
+      <CollapsibleTrigger
+        render={
+          <SidebarMenuButton className="font-medium">
+            {category.icon}
+            {category.title}
+            <ChevronRight className="ml-auto transition-transform ease-linear rotate-0 group-data-open/collapsible:rotate-90" />
+          </SidebarMenuButton>
+        }
+      />
+      <CollapsibleContent>
+        {category.items?.length ? (
+          <SidebarMenuSub className="px-1.5">
+            {category.items.map((item) => (
+              <DSMenuItem key={item.url === "#" ? item.title : item.url} item={item} />
+            ))}
+          </SidebarMenuSub>
+        ) : null}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+function DSMenuItem({ item }: { item: (typeof DSData)["mainNav"][0]["items"][0] }) {
+  const path = usePathname()
+
+  // NOTE: as of now, we have only 1 level depth of submenu, so using startsWith to
+  // match also subroutes is ok.
+  // If we go with multiple levels of depth it should be changed accordingly.
+  const isActive = path.startsWith(item.url)
+
+  return (
+    <SidebarMenuSubItem key={item.title}>
+      <SidebarMenuSubButton isActive={isActive} render={<Link href={item.url} />}>
+        {item.icon}
+        {item.title}
+      </SidebarMenuSubButton>
+    </SidebarMenuSubItem>
+  )
+}
diff --git a/src/components/dashboard-sidebar/user-nav.tsx b/src/components/dashboard-sidebar/user-nav.tsx
new file mode 100644
index 0000000..580c2cc
--- /dev/null
+++ b/src/components/dashboard-sidebar/user-nav.tsx
@@ -0,0 +1,110 @@
+"use client"
+
+import { Bell, ChevronsUpDown, LogOut, UserIcon } from "lucide-react"
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar"
+import { signOut, useSession } from "@/lib/auth"
+import { getInitials } from "@/lib/utils"
+import { Skeleton } from "../ui/skeleton"
+
+export function DSUserNav() {
+  const { data } = useSession()
+  const { isMobile } = useSidebar()
+  const router = useRouter()
+
+  const user = data?.user
+
+  if (!user) return <Skeleton />
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              >
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.image ?? undefined} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">
+                    {user.name ? getInitials(user.name) : <UserIcon size={48} />}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+                <ChevronsUpDown className="ml-auto size-4" />
+              </SidebarMenuButton>
+            }
+          />
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar className="h-8 w-8">
+                    <AvatarImage src={user.image ?? undefined} alt={user.name} />
+                    <AvatarFallback>{user.name ? getInitials(user.name) : <UserIcon size={48} />}</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">{user.name}</span>
+                    <span className="truncate text-xs">{user.email}</span>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <Link href="/dashboard/account">
+                <DropdownMenuItem>
+                  <UserIcon />
+                  Account
+                </DropdownMenuItem>
+              </Link>
+              <DropdownMenuItem disabled>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              variant="destructive"
+              onClick={() =>
+                signOut({
+                  fetchOptions: {
+                    onSuccess: () => {
+                      toast.success("Logged out!")
+                      router.refresh()
+                    },
+                  },
+                })
+              }
+            >
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}
diff --git a/src/app/dashboard/(active)/telegram/groups/search-input.tsx b/src/components/search-input.tsx
similarity index 100%
rename from src/app/dashboard/(active)/telegram/groups/search-input.tsx
rename to src/components/search-input.tsx
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index e130133..52a36bc 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -9,6 +9,7 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
+        info: "bg-primary/20 text-primary-foreground",
         destructive:
           "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
       },
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 598ffa0..e696922 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -25,12 +25,12 @@ const buttonVariants = cva(
         xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
         sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
         lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        icon: "size-8",
+        icon: "size-8 [&_svg:not([class*='size-'])]:size-4.5",
         "icon-xs":
           "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
         "icon-sm":
-          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-4",
+        "icon-lg": "size-9 [&_svg:not([class*='size-'])]:size-5",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
new file mode 100644
index 0000000..3205f8a
--- /dev/null
+++ b/src/components/ui/sidebar.tsx
@@ -0,0 +1,727 @@
+"use client"
+
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils/shadcn"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { PanelLeftIcon } from "lucide-react"
+import { useCookieStorage } from "@/hooks/use-cookie-storage"
+import { COOKIES } from "@/constants"
+
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContextProps = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_, setOpenCookie] = useCookieStorage<boolean>(
+    COOKIES.SIDEBAR_OPEN,
+    false,
+    { expires: 60 * 60 * 24 * 7 }
+  )
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      setOpenCookie(openState)
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <div
+        data-slot="sidebar-wrapper"
+        style={
+          {
+            "--sidebar-width": SIDEBAR_WIDTH,
+            "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+            ...style,
+          } as React.CSSProperties
+        }
+        className={cn(
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  dir,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          dir={dir}
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          "relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        data-side={side}
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon-sm"
+      className={cn(className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("h-8 w-full bg-background shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & React.ComponentProps<"div">) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-label",
+      sidebar: "group-label",
+    },
+  })
+}
+
+function SidebarGroupAction({
+  className,
+  render,
+  ...props
+}: useRender.ComponentProps<"button"> & React.ComponentProps<"button">) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-group-action",
+      sidebar: "group-action",
+    },
+  })
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-0", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  render,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const { isMobile, state } = useSidebar()
+  const comp = useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      },
+      props
+    ),
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
+    state: {
+      slot: "sidebar-menu-button",
+      sidebar: "menu-button",
+      size,
+      active: isActive,
+    },
+  })
+
+  if (!tooltip) {
+    return comp
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      {comp}
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  render,
+  showOnHover = false,
+  ...props
+}: useRender.ComponentProps<"button"> &
+  React.ComponentProps<"button"> & {
+    showOnHover?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "button",
+    props: mergeProps<"button">(
+      {
+        className: cn(
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          showOnHover &&
+            "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-action",
+      sidebar: "menu-action",
+    },
+  })
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const [width] = React.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  })
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  render,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: useRender.ComponentProps<"a"> &
+  React.ComponentProps<"a"> & {
+    size?: "sm" | "md"
+    isActive?: boolean
+  }) {
+  return useRender({
+    defaultTagName: "a",
+    props: mergeProps<"a">(
+      {
+        className: cn(
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          className
+        ),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "sidebar-menu-sub-button",
+      sidebar: "menu-sub-button",
+      size,
+      active: isActive,
+    },
+  })
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}
diff --git a/src/constants.ts b/src/constants.ts
index 80aa13a..b0d438f 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,39 +1,4 @@
-export const USER_ROLE = {
-  ADMIN_ORG: "owner",
-  MEMBER: "member",
-  INACTIVE: "inactive",
-  DISABLED: "disabled",
+export const COOKIES = {
+  SIDEBAR_OPEN: "sidebar_open",
+  SIDEBAR_CATEGORY_STATE: "sidebar_category_state",
 } as const
-export type TUserRole = (typeof USER_ROLE)[keyof typeof USER_ROLE]
-
-export const DEPARTMENT_ID = {
-  IT: "it",
-  SOCIAL: "social",
-  HR: "hr",
-  INST_RELATIONS: "institutional_relations",
-  EVENTS: "events",
-} as const
-export type TDepartmentId = (typeof DEPARTMENT_ID)[keyof typeof DEPARTMENT_ID]
-
-// department roles
-export const DEP_ROLE = {
-  HEAD: "head",
-  DEPUTY_HEAD: "deputy_head",
-  MEMBER: "member",
-} as const
-export type TDepRole = (typeof DEP_ROLE)[keyof typeof DEP_ROLE]
-
-export const BOARD_ROLE = {
-  PRESIDENT: "president",
-  VICE_PRESIDENT: "vice_president",
-  SECRETARY: "secretary",
-  TREASURER: "treasurer",
-  MEMBER: "member",
-} as const
-export type TBoardRole = (typeof BOARD_ROLE)[keyof typeof BOARD_ROLE]
-
-export const INCOMPATIBLE_BOARD_ROLES: TBoardRole[] = [
-  BOARD_ROLE.PRESIDENT,
-  BOARD_ROLE.VICE_PRESIDENT,
-  BOARD_ROLE.SECRETARY,
-] as const
diff --git a/src/hooks/use-cookie-storage.tsx b/src/hooks/use-cookie-storage.tsx
new file mode 100644
index 0000000..a6339cc
--- /dev/null
+++ b/src/hooks/use-cookie-storage.tsx
@@ -0,0 +1,49 @@
+import { type Dispatch, type SetStateAction, useCallback, useMemo, useState } from "react"
+import { type CookieOptions, deleteCookie, getCookie, getDefaultCookieOptions, setCookie } from "@/utils/cookies"
+
+export function useCookieStorage<T>(
+  key: string,
+  initialValue: T,
+  options: CookieOptions = {}
+): [T, Dispatch<SetStateAction<T>>] {
+  const envOptions = useMemo(() => getDefaultCookieOptions(), [])
+  const mergedOptions = useMemo(() => ({ ...envOptions, ...options }), [options, envOptions])
+
+  const readValue = useCallback((): T => {
+    if (typeof document === "undefined") {
+      return initialValue
+    }
+
+    try {
+      const item = getCookie(key)
+      return item ? (JSON.parse(item) as T) : initialValue
+    } catch (error) {
+      console.warn(`Error reading cookie "${key}":`, error)
+      return initialValue
+    }
+  }, [key, initialValue])
+
+  const [storedValue, setStoredValue] = useState<T>(readValue)
+
+  const setValue: Dispatch<SetStateAction<T>> = useCallback(
+    (value) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value
+        setStoredValue(valueToStore)
+
+        if (typeof document !== "undefined") {
+          if (valueToStore === null || valueToStore === undefined) {
+            deleteCookie(key, { path: mergedOptions.path, domain: mergedOptions.domain })
+          } else {
+            setCookie(key, JSON.stringify(valueToStore), mergedOptions)
+          }
+        }
+      } catch (error) {
+        console.warn(`Error setting cookie "${key}":`, error)
+      }
+    },
+    [key, storedValue, mergedOptions]
+  )
+
+  return [storedValue, setValue]
+}
diff --git a/src/hooks/use-session-storage.tsx b/src/hooks/use-session-storage.tsx
new file mode 100644
index 0000000..b1de618
--- /dev/null
+++ b/src/hooks/use-session-storage.tsx
@@ -0,0 +1,39 @@
+import { type Dispatch, type SetStateAction, useCallback, useState } from "react"
+
+export function useSessionStorage<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>] {
+  // Read from sessionStorage on initialization
+  const readValue = useCallback((): T => {
+    if (typeof window === "undefined") {
+      return initialValue
+    }
+
+    try {
+      const item = window.sessionStorage.getItem(key)
+      return item ? (JSON.parse(item) as T) : initialValue
+    } catch (error) {
+      console.warn(`Error reading sessionStorage key "${key}":`, error)
+      return initialValue
+    }
+  }, [key, initialValue])
+
+  const [storedValue, setStoredValue] = useState<T>(readValue)
+
+  // Return a memoized setter function
+  const setValue: Dispatch<SetStateAction<T>> = useCallback(
+    (value) => {
+      try {
+        const valueToStore = value instanceof Function ? value(storedValue) : value
+        setStoredValue(valueToStore)
+
+        if (typeof window !== "undefined") {
+          window.sessionStorage.setItem(key, JSON.stringify(valueToStore))
+        }
+      } catch (error) {
+        console.warn(`Error setting sessionStorage key "${key}":`, error)
+      }
+    },
+    [key, storedValue]
+  )
+
+  return [storedValue, setValue]
+}
diff --git a/src/index.css b/src/index.css
index 41a1b5f..d09261d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -82,7 +82,7 @@
   --placeholder: oklch(0.5623 0.04 280.47);
   --accent: oklch(0.35 0.04 254.63);
   --accent-foreground: oklch(0.96 0.01 292.8);
-  --destructive: oklch(0.51 0.19 27.08);
+  --destructive: oklch(0.61 0.19 27.08);
   --destructive-foreground: oklch(1 0 0);
   --border: oklch(0.35 0.04 254.63);
   --input: oklch(0.3961 0.03 259.05);
@@ -92,13 +92,13 @@
   --chart-3: oklch(0.72 0.15 58.79);
   --chart-4: oklch(0.66 0.2 335.4);
   --chart-5: oklch(0.76 0.12 214.15);
-  --sidebar: oklch(0.19 0.03 256.45);
+  --sidebar: oklch(0.24 0.03 259.05);
   --sidebar-foreground: oklch(0.82 0.02 256.74);
-  --sidebar-primary: oklch(0.49 0.22 264.38);
-  --sidebar-primary-foreground: oklch(1 0 0);
-  --sidebar-accent: oklch(0.27 0.03 254.37);
-  --sidebar-accent-foreground: oklch(0.97 0 286.38);
-  --sidebar-border: oklch(0 0 0);
+  --sidebar-primary: oklch(0.47 0.16 257.42);
+  --sidebar-primary-foreground: oklch(0.96 0.01 278.64);
+  --sidebar-accent: oklch(0.3 0.03 254.37);
+  --sidebar-accent-foreground: oklch(0.96 0.01 292.8);
+  --sidebar-border: oklch(0.35 0.04 254.63);
   --sidebar-ring: oklch(0.47 0.16 257.42);
   --font-sans: Poppins, sans-serif;
   --font-serif: Libre Baskerville, serif;
@@ -174,3 +174,8 @@
 @theme {
   --breakpoint-xs: 30rem;
 }
+
+@utility container {
+  margin-inline: auto;
+  @apply pb-8 flex flex-col items-start justify-start gap-6;
+}
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
deleted file mode 100644
index f2b1b92..0000000
--- a/src/lib/i18n.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-// THIS FILE IS TEMPORARY UNTIL i18n IS PROPER IMPLEMENTED
-// HERE ARE IMPLEMENTED SOME FUNCTION THAT ARE USEFUL IN THIS EARLY STAGE
-// FOR REPLACING IDS with WORDS
-
-import { BOARD_ROLE, DEP_ROLE, type TBoardRole, type TDepRole } from "@/constants"
-
-const BOARD_ROLE_STRING_EN: Record<TBoardRole, string> = {
-  [BOARD_ROLE.PRESIDENT]: "President",
-  [BOARD_ROLE.VICE_PRESIDENT]: "Vice President",
-  [BOARD_ROLE.SECRETARY]: "Secretary",
-  [BOARD_ROLE.TREASURER]: "Treasurer",
-  [BOARD_ROLE.MEMBER]: "",
-}
-
-export function getBoardRoleString(role: TBoardRole): string {
-  return BOARD_ROLE_STRING_EN[role]
-}
-
-const DEP_ROLE_STRING_EN: Record<TDepRole, string> = {
-  [DEP_ROLE.HEAD]: "Head",
-  [DEP_ROLE.DEPUTY_HEAD]: "Deputy Head",
-  [DEP_ROLE.MEMBER]: "",
-}
-
-export function getDepartmentRoleString(role: TDepRole): string {
-  return DEP_ROLE_STRING_EN[role]
-}
diff --git a/src/server/actions/users.ts b/src/server/actions/users.ts
index c377959..cb826d6 100644
--- a/src/server/actions/users.ts
+++ b/src/server/actions/users.ts
@@ -26,8 +26,8 @@ export async function searchUserInfo(username: string) {
   return (await trpc.tg.users.getByUsername.query({ username })).user ?? null
 }
 
-export async function searchUser(username: string) {
-  const user = await searchUserInfo(username)
+export async function getUserDetails(userId: number) {
+  const { user } = await trpc.tg.users.get.query({ userId: userId })
   if (!user) return null
 
   const { roles, groupAdmin } = await trpc.tg.permissions.getRoles.query({ userId: user.id })
diff --git a/src/utils/cookies.ts b/src/utils/cookies.ts
new file mode 100644
index 0000000..e424ead
--- /dev/null
+++ b/src/utils/cookies.ts
@@ -0,0 +1,56 @@
+export type CookieOptions = {
+  expires?: Date | number // Date or seconds from now
+  path?: string
+  domain?: string
+  secure?: boolean
+  sameSite?: "strict" | "lax" | "none"
+}
+
+export function setCookie(name: string, value: string, options: CookieOptions = {}): void {
+  if (typeof document === "undefined") return
+
+  const { expires, path, domain, secure, sameSite } = options
+
+  let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
+
+  if (expires !== undefined) {
+    const date = expires instanceof Date ? expires : new Date(Date.now() + expires * 1000)
+    cookieString += `; expires=${date.toUTCString()}`
+  }
+
+  if (path) cookieString += `; path=${path}`
+  if (domain) cookieString += `; domain=${domain}`
+  if (secure) cookieString += "; secure"
+  if (sameSite) cookieString += `; samesite=${sameSite}`
+
+  // biome-ignore lint/suspicious/noDocumentCookie: same as @/ui/sidebar strategy
+  document.cookie = cookieString
+}
+
+export function getCookie(name: string): string | null {
+  if (typeof document === "undefined") return null
+
+  const match = document.cookie.match(
+    new RegExp(`(?:^|; )${encodeURIComponent(name).replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}=([^;]*)`)
+  )
+
+  return match?.[1] ? decodeURIComponent(match[1]) : null
+}
+
+export function deleteCookie(name: string, options: Pick<CookieOptions, "path" | "domain"> = {}): void {
+  setCookie(name, "", { ...options, expires: new Date(0) })
+}
+
+export function getDefaultCookieOptions(): CookieOptions {
+  return process.env.NODE_ENV === "development"
+    ? {
+        path: "/",
+        sameSite: "lax",
+      }
+    : {
+        path: "/",
+        domain: ".polinetwork.org",
+        secure: true,
+        sameSite: "strict",
+      }
+}