diff --git a/src/app/[locale]/admin/layout.tsx b/src/app/[locale]/admin/layout.tsx
index 76eeccb..b0fd79f 100644
--- a/src/app/[locale]/admin/layout.tsx
+++ b/src/app/[locale]/admin/layout.tsx
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 
+import { AdminShell, type NavGroup } from "@/components/admin/AdminShell";
 import { getCurrentUser } from "@/lib/auth/session";
 
 export const dynamic = "force-dynamic";
@@ -15,58 +16,66 @@ export default async function AdminLayout({
     redirect("/dashboard");
   }
   const t = await getTranslations("auto.appAdminLayout");
-  const links: { href: string; label: string }[] = [
-    { href: "/admin/stats", label: t("stats") },
-    { href: "/admin/categories", label: t("categories") },
-    { href: "/admin/templates", label: t("templates") },
-    { href: "/admin/projects", label: t("projects") },
-    { href: "/admin/ranking", label: t("ranking") },
-    { href: "/admin/tags", label: t("tags") },
-    { href: "/admin/fonts", label: t("fonts") },
-    { href: "/admin/music", label: t("music") },
-    { href: "/admin/blogs", label: t("blogs") },
-    { href: "/admin/slides", label: t("slides") },
-    { href: "/admin/home-events", label: t("homeEvents") },
-    { href: "/admin/routes", label: t("routes") },
-    { href: "/admin/comments", label: t("comments") },
-    { href: "/admin/files", label: t("media") },
-    { href: "/admin/ai", label: t("aiContent") },
-    { href: "/admin/messaging", label: t("messaging") },
-    { href: "/admin/integrations", label: t("integrations") },
-    { href: "/admin/marketing", label: t("marketing") },
-    { href: "/admin/crm", label: t("crm") },
-    { href: "/admin/users", label: t("users") },
-    { href: "/admin/plans", label: t("plans") },
-    { href: "/admin/discounts", label: t("discounts") },
-    { href: "/admin/settings", label: t("siteSettings") },
-    { href: "/admin/nodes", label: t("nodes") },
-    { href: "/admin/node-fonts", label: t("nodeFonts") },
-    { href: "/admin/renders", label: t("renderQueue") },
-    { href: "/admin/exports", label: t("exports") },
+
+  const groups: NavGroup[] = [
+    {
+      title: "نمای کلی",
+      items: [{ href: "/admin/stats", label: t("stats") }],
+    },
+    {
+      title: "محتوا",
+      items: [
+        { href: "/admin/categories", label: t("categories") },
+        { href: "/admin/templates", label: t("templates") },
+        { href: "/admin/projects", label: t("projects") },
+        { href: "/admin/ranking", label: t("ranking") },
+        { href: "/admin/tags", label: t("tags") },
+        { href: "/admin/fonts", label: t("fonts") },
+        { href: "/admin/music", label: t("music") },
+        { href: "/admin/blogs", label: t("blogs") },
+        { href: "/admin/slides", label: t("slides") },
+        { href: "/admin/home-events", label: t("homeEvents") },
+        { href: "/admin/routes", label: t("routes") },
+        { href: "/admin/comments", label: t("comments") },
+        { href: "/admin/files", label: t("media") },
+        { href: "/admin/ai", label: t("aiContent") },
+      ],
+    },
+    {
+      title: "رشد و ارتباطات",
+      items: [
+        { href: "/admin/messaging", label: t("messaging") },
+        { href: "/admin/integrations", label: t("integrations") },
+        { href: "/admin/marketing", label: t("marketing") },
+        { href: "/admin/crm", label: t("crm") },
+      ],
+    },
+    {
+      title: "کاربران و مالی",
+      items: [
+        { href: "/admin/users", label: t("users") },
+        { href: "/admin/plans", label: t("plans") },
+        { href: "/admin/discounts", label: t("discounts") },
+      ],
+    },
+    {
+      title: "فارم رندر",
+      items: [
+        { href: "/admin/nodes", label: t("nodes") },
+        { href: "/admin/node-fonts", label: t("nodeFonts") },
+        { href: "/admin/renders", label: t("renderQueue") },
+        { href: "/admin/exports", label: t("exports") },
+      ],
+    },
+    {
+      title: "سیستم",
+      items: [{ href: "/admin/settings", label: t("siteSettings") }],
+    },
   ];
+
   return (
-    <div className="min-h-screen bg-[#0c0e1a] text-gray-200">
-      <nav className="border-b border-[#1e2235] bg-[#0f1120] px-6 py-3">
-        <div className="mx-auto flex max-w-7xl flex-wrap items-center gap-x-5 gap-y-2">
-          <span className="text-sm font-semibold text-white">{t("brand")}</span>
-          {links.map((l) => (
-            <a
-              key={l.href}
-              href={l.href}
-              className="text-sm text-gray-400 transition-colors hover:text-white"
-            >
-              {l.label}
-            </a>
-          ))}
-          <a
-            href="/dashboard"
-            className="ms-auto text-xs text-gray-500 transition-colors hover:text-gray-300"
-          >
-            {t("backToDashboard")}
-          </a>
-        </div>
-      </nav>
-      <main className="mx-auto max-w-7xl px-6 py-8">{children}</main>
-    </div>
+    <AdminShell groups={groups} brand={t("brand")} back={t("backToDashboard")}>
+      {children}
+    </AdminShell>
   );
 }
diff --git a/src/components/admin/AdminShell.tsx b/src/components/admin/AdminShell.tsx
new file mode 100644
index 0000000..95ef663
--- /dev/null
+++ b/src/components/admin/AdminShell.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+export interface NavItem { href: string; label: string }
+export interface NavGroup { title: string; items: NavItem[] }
+
+export function AdminShell({
+  groups,
+  brand,
+  back,
+  children,
+}: {
+  groups: NavGroup[];
+  brand: string;
+  back: string;
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname() ?? "";
+  const [open, setOpen] = useState(false);
+
+  // Strip a leading locale segment (e.g. /en) so fa (no prefix) and en both match.
+  const clean = pathname.replace(/^\/[a-z]{2}(?=\/)/, "");
+  const isActive = (href: string) => clean === href || clean.startsWith(href + "/");
+  const current = groups.flatMap((g) => g.items).find((i) => isActive(i.href));
+
+  return (
+    <div className="min-h-screen bg-[#0c0e1a] text-gray-200">
+      {/* Sidebar */}
+      <aside
+        className={`fixed inset-y-0 start-0 z-40 flex w-60 flex-col border-e border-[#1e2235] bg-[#0d0f1c] transition-transform lg:translate-x-0 ${
+          open ? "translate-x-0" : "rtl:translate-x-full ltr:-translate-x-full"
+        }`}
+      >
+        <div className="flex h-14 items-center gap-2 border-b border-[#1e2235] px-5">
+          <span className="grid h-7 w-7 place-items-center rounded-lg bg-indigo-600 text-sm font-bold text-white">F</span>
+          <span className="text-sm font-semibold text-white">{brand}</span>
+        </div>
+        <nav className="flex-1 space-y-5 overflow-y-auto px-3 py-4">
+          {groups.map((g) => (
+            <div key={g.title}>
+              <div className="px-2 pb-1.5 text-[10px] font-semibold uppercase tracking-wider text-gray-600">{g.title}</div>
+              <div className="space-y-0.5">
+                {g.items.map((item) => {
+                  const active = isActive(item.href);
+                  return (
+                    <Link
+                      key={item.href}
+                      href={item.href}
+                      onClick={() => setOpen(false)}
+                      className={`block rounded-lg px-3 py-1.5 text-sm transition-colors ${
+                        active
+                          ? "bg-indigo-600/15 font-medium text-indigo-300"
+                          : "text-gray-400 hover:bg-[#161a2e] hover:text-white"
+                      }`}
+                    >
+                      {item.label}
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          ))}
+        </nav>
+        <div className="border-t border-[#1e2235] p-3">
+          <a href="/dashboard" className="block rounded-lg px-3 py-1.5 text-sm text-gray-400 hover:bg-[#161a2e] hover:text-white">
+            ← {back}
+          </a>
+        </div>
+      </aside>
+
+      {/* Mobile overlay */}
+      {open && <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setOpen(false)} />}
+
+      {/* Main column */}
+      <div className="lg:ms-60">
+        <header className="sticky top-0 z-20 flex h-14 items-center gap-3 border-b border-[#1e2235] bg-[#0f1120]/90 px-5 backdrop-blur">
+          <button
+            className="rounded-lg border border-[#262b40] p-1.5 text-gray-300 hover:bg-[#161a2e] lg:hidden"
+            onClick={() => setOpen(true)}
+            aria-label="menu"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
+          </button>
+          <h2 className="text-sm font-semibold text-white">{current?.label ?? brand}</h2>
+          <a href="/dashboard" className="ms-auto text-xs text-gray-500 transition-colors hover:text-gray-300">{back}</a>
+        </header>
+        <main className="mx-auto max-w-7xl px-5 py-7">{children}</main>
+      </div>
+    </div>
+  );
+}