diff --git a/apps/web/src/components/nav/NavHubPanel.vue b/apps/web/src/components/nav/NavHubPanel.vue
new file mode 100644
index 0000000..926f393
--- /dev/null
+++ b/apps/web/src/components/nav/NavHubPanel.vue
@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted } from 'vue';
+import UiIcon from '@/components/UiIcon.vue';
+import type { NavHubDef } from '@/lib/nav-hubs';
+
+defineProps<{
+  hub: NavHubDef;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  go: [to: string];
+}>();
+
+function onKey(event: KeyboardEvent) {
+  if (event.key === 'Escape') emit('close');
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', onKey);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKey);
+});
+</script>
+
+<template>
+  <section class="hub" role="dialog" aria-modal="true" :aria-label="hub.title">
+    <header class="head">
+      <div class="copy">
+        <h1>{{ hub.title }}</h1>
+        <p>{{ hub.desc }}</p>
+      </div>
+      <span class="head-ico" :class="hub.tint" aria-hidden="true">
+        <UiIcon :name="hub.icon" :size="20" />
+      </span>
+    </header>
+
+    <div class="grid">
+      <button
+        v-for="card in hub.cards"
+        :key="card.to + card.title"
+        class="card"
+        type="button"
+        @click="emit('go', card.to)"
+      >
+        <span class="card-top">
+          <span class="card-title">
+            {{ card.title }}
+            <UiIcon name="chevron" :size="13" class="go" />
+          </span>
+          <span class="card-ico" :class="card.tint" aria-hidden="true">
+            <UiIcon :name="card.icon" :size="16" />
+          </span>
+        </span>
+        <span class="card-desc">{{ card.desc }}</span>
+      </button>
+    </div>
+
+    <div v-if="hub.shortcuts.length" class="quick">
+      <span class="quick-label">دسترسی سریع</span>
+      <div class="quick-row">
+        <button
+          v-for="item in hub.shortcuts"
+          :key="item.to + item.title"
+          class="quick-btn"
+          type="button"
+          @click="emit('go', item.to)"
+        >
+          <UiIcon :name="item.icon" :size="15" />
+          {{ item.title }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.hub {
+  width: min(28rem, calc(100vw - var(--hub-offset, 16rem) - 1.5rem));
+  max-height: calc(100dvh - 56px);
+  overflow: hidden;
+  padding: 0.9rem 0.9rem 0.8rem;
+  display: grid;
+  align-content: start;
+  gap: 0.7rem;
+  border-radius: 28px;
+  background: #fff;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
+}
+
+.head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: 0 0.15rem;
+}
+
+.copy h1 {
+  margin: 0;
+  font-size: 1.05rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.copy p {
+  margin: 0.15rem 0 0;
+  color: #94a3b8;
+  font-size: 0.75rem;
+}
+
+.head-ico,
+.card-ico {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.head-ico {
+  width: 2.2rem;
+  height: 2.2rem;
+  border-radius: 999px;
+}
+
+.card-ico {
+  width: 1.9rem;
+  height: 1.9rem;
+  border-radius: 10px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.card {
+  display: grid;
+  justify-items: stretch;
+  align-content: start;
+  gap: 0.28rem;
+  padding: 0.65rem 0.7rem 0.55rem;
+  border: 0;
+  border-radius: 16px;
+  background: #f7f8fa;
+  cursor: pointer;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+}
+
+.card:hover {
+  background: #f1f5f9;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.88rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.card-desc {
+  color: #94a3b8;
+  font-size: 0.72rem;
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.go {
+  transform: scaleX(-1);
+  color: #94a3b8;
+  flex-shrink: 0;
+}
+
+.quick {
+  display: grid;
+  gap: 0.4rem;
+}
+
+.quick-label {
+  padding-inline: 0.15rem;
+  color: #64748b;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.quick-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.45rem;
+}
+
+.quick-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 2.4rem;
+  padding: 0.45rem 0.7rem;
+  border: 0;
+  border-radius: 999px;
+  background: #ecfdf8;
+  color: #0f766e;
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.quick-btn:hover {
+  background: #d8faf3;
+}
+
+.mint {
+  background: #d8faf3;
+  color: #0f766e;
+}
+
+.violet {
+  background: #eee7ff;
+  color: #6d28d9;
+}
+
+.peach {
+  background: #ffedd5;
+  color: #c2410c;
+}
+
+.sky {
+  background: #e0f2fe;
+  color: #0369a1;
+}
+
+.rose {
+  background: #fce7f3;
+  color: #be185d;
+}
+
+.amber {
+  background: #fef3c7;
+  color: #b45309;
+}
+
+@media (max-width: 900px) {
+  .hub {
+    width: 100%;
+    max-height: min(86dvh, calc(100dvh - 3.5rem));
+    overflow: auto;
+    padding: 0.85rem 0.9rem calc(0.9rem + env(safe-area-inset-bottom));
+    border-radius: 24px 24px 0 0;
+    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.16);
+  }
+
+  .hub::before {
+    content: '';
+    display: block;
+    width: 2.6rem;
+    height: 0.28rem;
+    margin: 0 auto 0.65rem;
+    border-radius: 999px;
+    background: #e2e8f0;
+  }
+}
+</style>
diff --git a/apps/web/src/layouts/AppLayout.vue b/apps/web/src/layouts/AppLayout.vue
index f34333c..f2635d5 100644
--- a/apps/web/src/layouts/AppLayout.vue
+++ b/apps/web/src/layouts/AppLayout.vue
@@ -8,6 +8,8 @@ import UiIcon from '@/components/UiIcon.vue';
 import MentoLogo from '@/components/brand/MentoLogo.vue';
 import QuickCreate from '@/components/QuickCreate.vue';
 import BrandName from '@/components/brand/BrandName.vue';
+import NavHubPanel from '@/components/nav/NavHubPanel.vue';
+import { NAV_HUBS, type NavHubDef, type NavHubKey } from '@/lib/nav-hubs';
 import type {
   ActivitySummaryDto,
   NotificationDto,
@@ -29,17 +31,10 @@ const todayLabel = computed(() => formatJalaliShort(new Date()));
 const SIDEBAR_KEY = 'mento_sidebar_collapsed';
 const collapsed = ref(false);
 
-const customersOpen = ref(false);
-const salesOpen = ref(false);
-const activitiesOpen = ref(false);
-const supportOpen = ref(false);
-const toolsOpen = ref(false);
-const settingsOpen = ref(false);
+const openHubKey = ref<NavHubKey | null>(null);
 const globalSearch = ref('');
 const activityBadge = ref(0);
 
-type FoldKey = 'customers' | 'sales' | 'activities' | 'support' | 'tools' | 'settings';
-
 function pathIn(prefixes: string[]) {
   return prefixes.some(
     (p) => route.path === p || route.path.startsWith(`${p}/`),
@@ -66,18 +61,16 @@ const settingsActive = computed(() =>
     '/settings/faq',
   ]),
 );
-const peopleContactsActive = computed(
-  () => customersActive.value && route.query.tab !== 'companies',
-);
-const companyContactsActive = computed(
-  () => customersActive.value && route.query.tab === 'companies',
-);
-const myActivitiesActive = computed(
-  () =>
-    route.path === '/activities' ||
-    route.path.startsWith('/activities/new') ||
-    (route.path.startsWith('/activities/') && !route.path.startsWith('/activities/calendar')),
-);
+const openHub = computed<NavHubDef | null>(() => {
+  if (!openHubKey.value) return null;
+  const hub = NAV_HUBS.find((item) => item.key === openHubKey.value);
+  if (!hub) return null;
+  return {
+    ...hub,
+    cards: hub.cards.filter((card) => !card.admin || canSettings.value),
+    shortcuts: hub.shortcuts.filter((item) => !item.admin || canSettings.value),
+  };
+});
 
 function givenName(fullName: string): string {
   const parts = fullName.trim().split(/\s+/).filter(Boolean);
@@ -115,37 +108,19 @@ watch([profileFullName, collapsed], () => {
   void fitProfileName();
 });
 
-watch(
-  () => route.path,
-  () => {
-    if (customersActive.value) customersOpen.value = true;
-    if (salesActive.value) salesOpen.value = true;
-    if (activitiesActive.value) activitiesOpen.value = true;
-    if (supportActive.value) supportOpen.value = true;
-    if (toolsActive.value) toolsOpen.value = true;
-    if (settingsActive.value) settingsOpen.value = true;
-  },
-  { immediate: true },
-);
-
-function toggleFold(key: FoldKey) {
-  if (key === 'customers') customersOpen.value = !customersOpen.value;
-  if (key === 'sales') salesOpen.value = !salesOpen.value;
-  if (key === 'activities') activitiesOpen.value = !activitiesOpen.value;
-  if (key === 'support') supportOpen.value = !supportOpen.value;
-  if (key === 'tools') toolsOpen.value = !toolsOpen.value;
-  if (key === 'settings') settingsOpen.value = !settingsOpen.value;
+function closeHub() {
+  openHubKey.value = null;
 }
 
-function onFoldClick(key: FoldKey, fallback: string, event: Event) {
-  event.preventDefault();
-  event.stopPropagation();
-  if (collapsed.value) {
-    void router.push(fallback);
-    closeMenu();
-    return;
-  }
-  toggleFold(key);
+function onHubClick(key: NavHubKey) {
+  openHubKey.value = openHubKey.value === key ? null : key;
+  closeMenu();
+}
+
+function goHub(to: string) {
+  closeHub();
+  closeMenu();
+  void router.push(to);
 }
 
 const menuOpen = ref(false);
@@ -175,6 +150,7 @@ function closeNotif() {
 }
 
 function onLogout() {
+  closeHub();
   closeMenu();
   closeNotif();
   auth.logout();
@@ -254,17 +230,19 @@ function submitSearch() {
   void router.push({ name: 'contacts', query: { q } });
 }
 
-watch(menuOpen, (open) => {
-  document.body.style.overflow = open || notifOpen.value ? 'hidden' : '';
-});
-watch(notifOpen, (open) => {
-  document.body.style.overflow = open || menuOpen.value ? 'hidden' : '';
-});
+function syncBodyLock() {
+  document.body.style.overflow =
+    menuOpen.value || notifOpen.value || Boolean(openHubKey.value) ? 'hidden' : '';
+}
+watch(menuOpen, syncBodyLock);
+watch(notifOpen, syncBodyLock);
+watch(openHubKey, syncBodyLock);
 watch(
   () => route.fullPath,
   () => {
     closeMenu();
     closeNotif();
+    closeHub();
   },
 );
 
@@ -295,7 +273,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="shell" :class="{ 'menu-open': menuOpen, collapsed }">
+  <div class="shell" :class="{ 'menu-open': menuOpen, collapsed, 'hub-open': Boolean(openHub) }">
     <div v-if="menuOpen" class="backdrop" aria-hidden="true" @click="closeMenu" />
 
     <aside id="app-sidebar" class="sidebar" :class="{ open: menuOpen, collapsed }">
@@ -337,91 +315,55 @@ onUnmounted(() => {
       <div class="rail-stem">
       <nav class="side-nav">
         <div class="nav-primary">
-          <RouterLink to="/" class="nav-item" title="داشبورد" @click="closeMenu">
+          <RouterLink to="/" class="nav-item" title="داشبورد" @click="closeHub(); closeMenu()">
             <UiIcon name="home" :size="collapsed ? 20 : 18" />
             <span>داشبورد</span>
           </RouterLink>
 
-          <div class="nav-fold" :class="{ open: customersOpen, active: customersActive }">
+          <div class="nav-fold" :class="{ active: customersActive || openHubKey === 'customers' }">
             <button
               class="nav-item nav-fold-btn"
               type="button"
               title="مشتریان"
-              :class="{ 'router-link-active': customersActive }"
-              :aria-expanded="customersOpen"
-              @click="onFoldClick('customers', '/contacts', $event)"
+              :class="{ 'router-link-active': customersActive || openHubKey === 'customers', 'hub-on': openHubKey === 'customers' }"
+              :aria-expanded="openHubKey === 'customers'"
+              @click="onHubClick('customers')"
             >
               <UiIcon name="users" :size="collapsed ? 20 : 18" />
               <span>مشتریان</span>
               <i class="chev" aria-hidden="true" />
             </button>
-            <div v-show="customersOpen" class="nav-sub">
-              <RouterLink
-                to="/contacts"
-                :class="{ 'router-link-active': peopleContactsActive }"
-                @click="closeMenu"
-              >اشخاص</RouterLink>
-              <RouterLink
-                to="/contacts?tab=companies"
-                :class="{ 'router-link-active': companyContactsActive }"
-                @click="closeMenu"
-              >شرکت‌ها</RouterLink>
-            </div>
           </div>
 
-          <div class="nav-fold" :class="{ open: salesOpen, active: salesActive }">
+          <div class="nav-fold" :class="{ active: salesActive || openHubKey === 'sales' }">
             <button
               class="nav-item nav-fold-btn"
               type="button"
               title="فروش"
-              :class="{ 'router-link-active': salesActive }"
-              :aria-expanded="salesOpen"
-              @click="onFoldClick('sales', '/pipeline', $event)"
+              :class="{ 'router-link-active': salesActive || openHubKey === 'sales', 'hub-on': openHubKey === 'sales' }"
+              :aria-expanded="openHubKey === 'sales'"
+              @click="onHubClick('sales')"
             >
               <UiIcon name="briefcase" :size="collapsed ? 20 : 18" />
               <span>فروش</span>
               <i class="chev" aria-hidden="true" />
             </button>
-            <div v-show="salesOpen" class="nav-sub">
-              <RouterLink
-                to="/pipeline"
-                :class="{ 'router-link-active': pathIn(['/pipeline', '/deals']) }"
-                @click="closeMenu"
-              >کاریز فروش / معاملات</RouterLink>
-              <RouterLink to="/quotes" @click="closeMenu">پیش‌فاکتورها</RouterLink>
-              <RouterLink to="/invoices" @click="closeMenu">فاکتورها</RouterLink>
-              <RouterLink to="/commissions" @click="closeMenu">پورسانت</RouterLink>
-              <RouterLink
-                v-if="canSettings"
-                to="/settings/products"
-                @click="closeMenu"
-              >محصولات و خدمات</RouterLink>
-              <RouterLink to="/sales/forecast" @click="closeMenu">هدف و پیش‌بینی</RouterLink>
-            </div>
           </div>
 
-          <div class="nav-fold" :class="{ open: activitiesOpen, active: activitiesActive }">
+          <div class="nav-fold" :class="{ active: activitiesActive || openHubKey === 'activities' }">
             <button
               class="nav-item nav-fold-btn"
               type="button"
               title="فعالیت‌ها"
-              :class="{ 'router-link-active': activitiesActive }"
-              :aria-expanded="activitiesOpen"
-              @click="onFoldClick('activities', '/activities', $event)"
+              :class="{ 'router-link-active': activitiesActive || openHubKey === 'activities', 'hub-on': openHubKey === 'activities' }"
+              :aria-expanded="openHubKey === 'activities'"
+              @click="onHubClick('activities')"
             >
               <UiIcon name="check" :size="collapsed ? 20 : 18" />
               <span>فعالیت‌ها</span>
               <span v-if="activityBadge" class="nav-badge">{{ toFaDigits(activityBadge) }}</span>
               <i class="chev" aria-hidden="true" />
             </button>
-            <div v-show="activitiesOpen" class="nav-sub">
-              <RouterLink
-                to="/activities"
-                :class="{ 'router-link-active': myActivitiesActive }"
-                @click="closeMenu"
-              >فعالیت‌های من</RouterLink>
-              <RouterLink to="/activities/calendar" @click="closeMenu">تقویم فعالیت‌ها</RouterLink>
-            </div>
           </div>
 
           <RouterLink
@@ -429,35 +371,32 @@ onUnmounted(() => {
             class="nav-item"
             title="یادداشت‌ها"
             :class="{ 'router-link-active': notesActive }"
-            @click="closeMenu"
+            @click="closeHub(); closeMenu()"
           >
             <UiIcon name="document" :size="collapsed ? 20 : 18" />
             <span>یادداشت‌ها</span>
           </RouterLink>
 
-          <div class="nav-fold" :class="{ open: supportOpen, active: supportActive }">
+          <div class="nav-fold" :class="{ active: supportActive || openHubKey === 'support' }">
             <button
               class="nav-item nav-fold-btn"
               type="button"
               title="پشتیبانی"
-              :class="{ 'router-link-active': supportActive }"
-              :aria-expanded="supportOpen"
-              @click="onFoldClick('support', '/tickets', $event)"
+              :class="{ 'router-link-active': supportActive || openHubKey === 'support', 'hub-on': openHubKey === 'support' }"
+              :aria-expanded="openHubKey === 'support'"
+              @click="onHubClick('support')"
             >
               <UiIcon name="chat" :size="collapsed ? 20 : 18" />
               <span>پشتیبانی</span>
               <i class="chev" aria-hidden="true" />
             </button>
-            <div v-show="supportOpen" class="nav-sub">
-              <RouterLink to="/tickets" @click="closeMenu">تیکت‌ها</RouterLink>
-            </div>
           </div>
 
-          <RouterLink to="/loyalty" class="nav-item" title="باشگاه مشتریان" @click="closeMenu">
+          <RouterLink to="/loyalty" class="nav-item" title="باشگاه مشتریان" @click="closeHub(); closeMenu()">
             <UiIcon name="gift" :size="collapsed ? 20 : 18" />
             <span>باشگاه مشتریان</span>
           </RouterLink>
-          <RouterLink to="/reports" class="nav-item" title="گزارش‌ها" @click="closeMenu">
+          <RouterLink to="/reports" class="nav-item" title="گزارش‌ها" @click="closeHub(); closeMenu()">
             <UiIcon name="chart" :size="collapsed ? 20 : 18" />
             <span>گزارش‌ها</span>
           </RouterLink>
@@ -467,7 +406,7 @@ onUnmounted(() => {
             class="nav-item"
             title="اتوماسیون"
             :class="{ 'router-link-active': automationsActive }"
-            @click="closeMenu"
+            @click="closeHub(); closeMenu()"
           >
             <UiIcon name="layers" :size="collapsed ? 20 : 18" />
             <span>اتوماسیون</span>
@@ -477,61 +416,38 @@ onUnmounted(() => {
         <div class="nav-sep" aria-hidden="true" />
 
         <div class="nav-utility">
-          <div class="nav-fold" :class="{ open: toolsOpen, active: toolsActive }">
+          <div class="nav-fold" :class="{ active: toolsActive || openHubKey === 'tools' }">
             <button
               class="nav-item nav-fold-btn"
               type="button"
               title="ابزارها"
-              :class="{ 'router-link-active': toolsActive }"
-              :aria-expanded="toolsOpen"
-              @click="onFoldClick('tools', canSettings ? '/settings/lead-forms' : '/projects', $event)"
+              :class="{ 'router-link-active': toolsActive || openHubKey === 'tools', 'hub-on': openHubKey === 'tools' }"
+              :aria-expanded="openHubKey === 'tools'"
+              @click="onHubClick('tools')"
             >
               <UiIcon name="apps-plus" :size="collapsed ? 20 : 18" />
               <span>ابزارها</span>
               <i class="chev" aria-hidden="true" />
             </button>
-            <div v-show="toolsOpen" class="nav-sub">
-              <RouterLink
-                v-if="canSettings"
-                to="/settings/lead-forms"
-                @click="closeMenu"
-              >فرم‌ساز سرنخ</RouterLink>
-              <RouterLink
-                to="/projects"
-                :class="{ 'router-link-active': pathIn(['/projects', '/project-cards']) }"
-                @click="closeMenu"
-              >کاریز پروژه</RouterLink>
-              <RouterLink to="/inventory" @click="closeMenu">انبار</RouterLink>
-              <RouterLink to="/cheques" @click="closeMenu">چک‌ها</RouterLink>
-              <RouterLink to="/attachments" @click="closeMenu">پیوست‌ها</RouterLink>
-            </div>
           </div>
 
           <div
             v-if="canSettings"
             class="nav-fold"
-            :class="{ open: settingsOpen, active: settingsActive }"
+            :class="{ active: settingsActive || openHubKey === 'settings' }"
           >
             <button
               class="nav-item nav-fold-btn"
               type="button"
               title="تنظیمات"
-              :class="{ 'router-link-active': settingsActive }"
-              :aria-expanded="settingsOpen"
-              @click="onFoldClick('settings', '/settings/team', $event)"
+              :class="{ 'router-link-active': settingsActive || openHubKey === 'settings', 'hub-on': openHubKey === 'settings' }"
+              :aria-expanded="openHubKey === 'settings'"
+              @click="onHubClick('settings')"
             >
               <UiIcon name="settings" :size="collapsed ? 20 : 18" />
               <span>تنظیمات</span>
               <i class="chev" aria-hidden="true" />
             </button>
-            <div v-show="settingsOpen" class="nav-sub">
-              <RouterLink to="/settings/team#settings-org" @click="closeMenu">تنظیمات عمومی</RouterLink>
-              <RouterLink to="/settings/team#settings-team" @click="closeMenu">تیم و نقش‌ها</RouterLink>
-              <RouterLink to="/settings/custom-fields" @click="closeMenu">فیلدهای سفارشی</RouterLink>
-              <RouterLink to="/settings/currencies" @click="closeMenu">ارزها</RouterLink>
-              <RouterLink to="/settings/tahesab" @click="closeMenu">تنظیمات مالی / ته‌حساب</RouterLink>
-              <RouterLink to="/settings/faq" @click="closeMenu">FAQ</RouterLink>
-            </div>
           </div>
         </div>
       </nav>
@@ -655,6 +571,11 @@ onUnmounted(() => {
         <RouterView />
       </main>
     </div>
+
+    <div v-if="openHub" class="hub-layer">
+      <button class="hub-dim" type="button" aria-label="بستن منو" @click="closeHub" />
+      <NavHubPanel :hub="openHub" @close="closeHub" @go="goHub" />
+    </div>
     <QuickCreate />
   </div>
 </template>
@@ -664,6 +585,7 @@ onUnmounted(() => {
   --sidebar-card: 220px;
   --sidebar-gutter-start: 14px;
   --sidebar-gutter-end: 10px;
+  --hub-offset: calc(var(--sidebar-card) + var(--sidebar-gutter-start));
   display: grid;
   grid-template-columns: calc(var(--sidebar-card) + var(--sidebar-gutter-start) + var(--sidebar-gutter-end)) minmax(0, 1fr);
   min-height: 100vh;
@@ -694,6 +616,7 @@ onUnmounted(() => {
   position: sticky;
   top: 14px;
   align-self: start;
+  z-index: 20;
   height: calc(100dvh - 28px);
   margin: 14px;
   margin-inline-end: 10px;
@@ -806,6 +729,45 @@ onUnmounted(() => {
   color: #0f766e;
 }
 
+.shell.hub-open .nav-item.router-link-active:not(.hub-on) {
+  background: transparent;
+  color: #334155;
+  box-shadow: none;
+}
+
+.shell.hub-open .nav-item.router-link-active:not(.hub-on) :deep(.ico) {
+  color: inherit;
+}
+
+.shell.hub-open .sidebar {
+  z-index: 70;
+}
+
+.hub-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  pointer-events: none;
+}
+
+.hub-dim {
+  pointer-events: auto;
+  position: absolute;
+  inset: 0;
+  border: 0;
+  padding: 0;
+  background: rgba(15, 23, 42, 0.28);
+  cursor: default;
+}
+
+.hub-layer :deep(.hub) {
+  pointer-events: auto;
+  position: absolute;
+  top: 42px;
+  inset-inline-start: var(--hub-offset);
+  inset-inline-end: auto;
+}
+
 .nav-badge {
   margin-inline-start: auto;
   min-width: 1.35rem;
@@ -858,13 +820,13 @@ onUnmounted(() => {
   height: 0.42rem;
   border-right: 1.6px solid currentColor;
   border-bottom: 1.6px solid currentColor;
-  transform: rotate(45deg);
+  transform: rotate(135deg);
   transition: transform 0.15s ease;
   flex-shrink: 0;
 }
 
-.nav-fold.open > .nav-fold-btn .chev {
-  transform: rotate(-135deg);
+.nav-fold-btn.hub-on .chev {
+  transform: rotate(-45deg);
 }
 
 .nav-sub {
@@ -1108,6 +1070,7 @@ onUnmounted(() => {
 
 @media (min-width: 901px) {
   .shell.collapsed {
+    --hub-offset: 72px;
     grid-template-columns: 80px minmax(0, 1fr);
   }
 
@@ -1650,6 +1613,28 @@ onUnmounted(() => {
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
   }
 
+  .hub-layer {
+    z-index: 80;
+  }
+
+  .hub-layer :deep(.hub) {
+    top: auto;
+    bottom: 0;
+    inset-inline: 0;
+    width: 100%;
+    margin: 0;
+    animation: hub-sheet-up 0.28s ease;
+  }
+
+  @keyframes hub-sheet-up {
+    from {
+      transform: translateY(100%);
+    }
+    to {
+      transform: translateY(0);
+    }
+  }
+
   .content {
     padding: 1rem 0.85rem 1.4rem;
   }
diff --git a/apps/web/src/lib/nav-hubs.ts b/apps/web/src/lib/nav-hubs.ts
new file mode 100644
index 0000000..04afb9a
--- /dev/null
+++ b/apps/web/src/lib/nav-hubs.ts
@@ -0,0 +1,296 @@
+export type NavHubKey =
+  | 'customers'
+  | 'sales'
+  | 'activities'
+  | 'support'
+  | 'tools'
+  | 'settings';
+
+export type NavIconName =
+  | 'users'
+  | 'user'
+  | 'building'
+  | 'briefcase'
+  | 'filter'
+  | 'document'
+  | 'box'
+  | 'mail'
+  | 'dollar'
+  | 'target'
+  | 'check'
+  | 'calendar'
+  | 'chat'
+  | 'apps-plus'
+  | 'layers'
+  | 'flag'
+  | 'settings'
+  | 'pencil'
+  | 'chart'
+  | 'lightbulb'
+  | 'plus'
+  | 'user-plus';
+
+export type NavHubTint = 'mint' | 'violet' | 'peach' | 'sky' | 'rose' | 'amber';
+
+export type NavHubCard = {
+  to: string;
+  title: string;
+  desc: string;
+  icon: NavIconName;
+  tint: NavHubTint;
+  admin?: boolean;
+};
+
+export type NavHubShortcut = {
+  to: string;
+  title: string;
+  icon: NavIconName;
+  admin?: boolean;
+};
+
+export type NavHubDef = {
+  key: NavHubKey;
+  title: string;
+  desc: string;
+  icon: NavIconName;
+  tint: NavHubTint;
+  cards: NavHubCard[];
+  shortcuts: NavHubShortcut[];
+};
+
+export const NAV_HUBS: NavHubDef[] = [
+  {
+    key: 'customers',
+    title: 'مشتریان',
+    desc: 'اشخاص، شرکت‌ها و پرونده‌های ارتباطی',
+    icon: 'users',
+    tint: 'mint',
+    shortcuts: [
+      { to: '/contacts/people/new', title: 'شخص جدید', icon: 'user-plus' },
+      { to: '/contacts/companies/new', title: 'شرکت جدید', icon: 'building' },
+    ],
+    cards: [
+      {
+        to: '/contacts',
+        title: 'اشخاص',
+        desc: 'مخاطبان حقیقی و پرونده‌های مشتری',
+        icon: 'user',
+        tint: 'mint',
+      },
+      {
+        to: '/contacts?tab=companies',
+        title: 'شرکت‌ها',
+        desc: 'سازمان‌ها و مشتریان حقوقی',
+        icon: 'building',
+        tint: 'violet',
+      },
+    ],
+  },
+  {
+    key: 'sales',
+    title: 'فروش',
+    desc: 'مدیریت چرخه فروش و درآمد',
+    icon: 'briefcase',
+    tint: 'mint',
+    shortcuts: [
+      { to: '/deals/new', title: 'معامله جدید', icon: 'plus' },
+      { to: '/quotes/new', title: 'پیش‌فاکتور جدید', icon: 'document' },
+    ],
+    cards: [
+      {
+        to: '/pipeline',
+        title: 'کاریز فروش',
+        desc: 'سرنخ‌ها، معاملات و مراحل فروش',
+        icon: 'filter',
+        tint: 'mint',
+      },
+      {
+        to: '/settings/products',
+        title: 'محصولات و خدمات',
+        desc: 'مدیریت محصولات، قیمت‌ها و موجودی',
+        icon: 'box',
+        tint: 'peach',
+        admin: true,
+      },
+      {
+        to: '/invoices',
+        title: 'فاکتورها',
+        desc: 'صدور فاکتور و پیگیری پرداخت‌ها',
+        icon: 'mail',
+        tint: 'sky',
+      },
+      {
+        to: '/quotes',
+        title: 'پیش‌فاکتورها',
+        desc: 'پیشنهاد قیمت و پیگیری تایید',
+        icon: 'document',
+        tint: 'amber',
+      },
+      {
+        to: '/commissions',
+        title: 'پورسانت',
+        desc: 'سهم فروشندگان از فاکتورهای صادرشده',
+        icon: 'dollar',
+        tint: 'rose',
+      },
+      {
+        to: '/sales/forecast',
+        title: 'هدف و پیش‌بینی',
+        desc: 'تعیین اهداف و تحلیل عملکرد فروش',
+        icon: 'target',
+        tint: 'mint',
+      },
+    ],
+  },
+  {
+    key: 'activities',
+    title: 'فعالیت‌ها',
+    desc: 'کارها، تماس‌ها و برنامه‌ریزی روزانه',
+    icon: 'check',
+    tint: 'sky',
+    shortcuts: [
+      { to: '/activities/new', title: 'فعالیت جدید', icon: 'plus' },
+      { to: '/activities/calendar', title: 'تقویم', icon: 'calendar' },
+    ],
+    cards: [
+      {
+        to: '/activities',
+        title: 'فعالیت‌های من',
+        desc: 'کارها، تماس‌ها و پیگیری‌های جاری',
+        icon: 'check',
+        tint: 'mint',
+      },
+      {
+        to: '/activities/calendar',
+        title: 'تقویم فعالیت‌ها',
+        desc: 'نمای روز، هفته و زمان‌بندی کارها',
+        icon: 'calendar',
+        tint: 'violet',
+      },
+    ],
+  },
+  {
+    key: 'support',
+    title: 'پشتیبانی',
+    desc: 'درخواست‌ها و گفتگو با مشتری',
+    icon: 'chat',
+    tint: 'peach',
+    shortcuts: [
+      { to: '/tickets/new', title: 'تیکت جدید', icon: 'plus' },
+      { to: '/tickets', title: 'تیکت‌ها', icon: 'chat' },
+    ],
+    cards: [
+      {
+        to: '/tickets',
+        title: 'تیکت‌ها',
+        desc: 'درخواست‌ها و پیام‌های پشتیبانی',
+        icon: 'chat',
+        tint: 'peach',
+      },
+    ],
+  },
+  {
+    key: 'tools',
+    title: 'ابزارها',
+    desc: 'فرم‌ها، پروژه، انبار و اسناد مالی',
+    icon: 'apps-plus',
+    tint: 'violet',
+    shortcuts: [
+      { to: '/project-cards/new', title: 'کارت پروژه جدید', icon: 'plus' },
+      { to: '/cheques', title: 'ثبت چک', icon: 'document' },
+    ],
+    cards: [
+      {
+        to: '/settings/lead-forms',
+        title: 'فرم‌ساز سرنخ',
+        desc: 'فرم عمومی برای جذب سرنخ تازه',
+        icon: 'layers',
+        tint: 'mint',
+        admin: true,
+      },
+      {
+        to: '/projects',
+        title: 'کاریز پروژه',
+        desc: 'کارت‌ها و مراحل اجرای کار',
+        icon: 'flag',
+        tint: 'violet',
+      },
+      {
+        to: '/inventory',
+        title: 'انبار',
+        desc: 'موجودی کالا و گردش داخلی',
+        icon: 'box',
+        tint: 'peach',
+      },
+      {
+        to: '/cheques',
+        title: 'چک‌ها',
+        desc: 'چک‌های دریافتی و پرداختی',
+        icon: 'document',
+        tint: 'sky',
+      },
+      {
+        to: '/attachments',
+        title: 'پیوست‌ها',
+        desc: 'فایل‌های متصل به یادداشت‌ها',
+        icon: 'document',
+        tint: 'amber',
+      },
+    ],
+  },
+  {
+    key: 'settings',
+    title: 'تنظیمات',
+    desc: 'سازمان، تیم و پیکربندی سیستم',
+    icon: 'settings',
+    tint: 'sky',
+    shortcuts: [
+      { to: '/settings/team#settings-team', title: 'تیم و نقش‌ها', icon: 'users' },
+      { to: '/settings/tahesab', title: 'ته‌حساب', icon: 'chart' },
+    ],
+    cards: [
+      {
+        to: '/settings/team#settings-org',
+        title: 'تنظیمات عمومی',
+        desc: 'نام سازمان و تنظیمات پایه',
+        icon: 'building',
+        tint: 'mint',
+      },
+      {
+        to: '/settings/team#settings-team',
+        title: 'تیم و نقش‌ها',
+        desc: 'اعضا، دسترسی و نقش‌ها',
+        icon: 'users',
+        tint: 'violet',
+      },
+      {
+        to: '/settings/custom-fields',
+        title: 'فیلدهای سفارشی',
+        desc: 'فیلدهای اضافه روی پرونده‌ها',
+        icon: 'pencil',
+        tint: 'peach',
+      },
+      {
+        to: '/settings/currencies',
+        title: 'ارزها',
+        desc: 'ارز پایه و نرخ تبدیل',
+        icon: 'dollar',
+        tint: 'sky',
+      },
+      {
+        to: '/settings/tahesab',
+        title: 'ته‌حساب',
+        desc: 'اتصال مالی و تنظیمات حسابداری',
+        icon: 'chart',
+        tint: 'amber',
+      },
+      {
+        to: '/settings/faq',
+        title: 'FAQ',
+        desc: 'پرسش‌های پرتکرار سازمان',
+        icon: 'lightbulb',
+        tint: 'rose',
+      },
+    ],
+  },
+];
diff --git a/apps/web/src/views/AutomationsSettingsView.vue b/apps/web/src/views/AutomationsSettingsView.vue
index 4fc0a8c..31c4738 100644
--- a/apps/web/src/views/AutomationsSettingsView.vue
+++ b/apps/web/src/views/AutomationsSettingsView.vue
@@ -442,6 +442,10 @@ h2 {
   gap: 0.45rem;
 }
 
+.rules ul:empty {
+  display: none;
+}
+
 .rules li {
   border: 1px solid #e8eef3;
   border-radius: 14px;
@@ -599,7 +603,14 @@ h2 {
 
   .rules {
     grid-area: rules;
-    height: 100%;
+    /* Let the toolbar set the row height; don't let the rules card grow it. */
+    height: 0;
+    min-height: 100%;
+    padding: 0.85rem 1rem;
+    overflow: hidden;
+    box-sizing: border-box;
+    gap: 0.35rem;
+    align-content: center;
   }
 
   .studio {