From 092767b6f26583140d89631919cdadf867884e6c Mon Sep 17 00:00:00 2001
From: Mahdi <mahdi.banilohi@gmail.com>
Date: Sat, 5 Sep 2026 02:29:41 +0330
Subject: [PATCH] Align older CRM pages with the Mento visual language.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restyle list, form, settings, and secondary modules to match contacts/activities patterns with teal chrome, soft panels, and mobile layouts — without changing already-redesigned screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/web/src/views/ActivitiesCalendarView.vue | 218 ++++--
 .../web/src/views/AutomationsSettingsView.vue | 112 ++-
 apps/web/src/views/CompanyFormView.vue        | 514 ++++++-------
 apps/web/src/views/CurrencySettingsView.vue   |  96 ++-
 .../src/views/CustomFieldsSettingsView.vue    | 118 ++-
 apps/web/src/views/FaqSettingsView.vue        | 131 +++-
 apps/web/src/views/InvoiceFormView.vue        |  75 +-
 apps/web/src/views/InvoicesView.vue           | 582 ++++++++++++---
 apps/web/src/views/LeadFormsSettingsView.vue  | 124 +++-
 apps/web/src/views/LoyaltyClubView.vue        | 228 ++++--
 apps/web/src/views/PersonFormView.vue         | 645 +++++++---------
 apps/web/src/views/ProductsSettingsView.vue   | 110 ++-
 apps/web/src/views/ProjectBoardView.vue       | 422 ++++++++---
 apps/web/src/views/ProjectCardFormView.vue    | 249 +++++--
 apps/web/src/views/QuoteFormView.vue          |  61 +-
 apps/web/src/views/QuotesView.vue             | 551 +++++++++++---
 apps/web/src/views/ReportsView.vue            | 264 +++++--
 apps/web/src/views/SalesForecastView.vue      | 153 ++--
 apps/web/src/views/TahesabSettingsView.vue    | 170 +++--
 apps/web/src/views/TeamSettingsView.vue       | 100 ++-
 apps/web/src/views/TicketFormView.vue         |  51 +-
 apps/web/src/views/TicketsView.vue            | 689 ++++++++++++++----
 22 files changed, 3946 insertions(+), 1717 deletions(-)

diff --git a/apps/web/src/views/ActivitiesCalendarView.vue b/apps/web/src/views/ActivitiesCalendarView.vue
index 05b43d7..25b6b44 100644
--- a/apps/web/src/views/ActivitiesCalendarView.vue
+++ b/apps/web/src/views/ActivitiesCalendarView.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import UiIcon from '@/components/UiIcon.vue';
 import type { ActivityDto, PaginatedResponse } from '@mento/shared';
 import {
   addJalaliMonths,
@@ -256,25 +257,38 @@ onMounted(() => {
 
 <template>
   <section class="page">
+    <nav class="crumbs" aria-label="مسیر">
+      <RouterLink :to="{ name: 'home' }">خانه</RouterLink>
+      <span>‹</span>
+      <RouterLink :to="{ name: 'activities' }">فعالیت‌ها</RouterLink>
+      <span>‹</span>
+      <span>تقویم</span>
+    </nav>
+
     <header class="page-head">
-      <div>
-        <p class="eyebrow">پیگیری</p>
+      <div class="head-copy">
         <h1>تقویم فعالیت‌ها</h1>
         <p class="lead">نمای ماهانه شمسی موعد تماس، جلسه و وظیفه.</p>
       </div>
       <div class="head-actions">
-        <RouterLink class="btn btn-ghost" :to="{ name: 'activities' }">لیست</RouterLink>
-        <RouterLink class="btn" :to="newForSelected()">فعالیت جدید</RouterLink>
+        <RouterLink class="btn ghost" :to="{ name: 'activities' }">
+          <UiIcon name="list" :size="18" />
+          لیست
+        </RouterLink>
+        <RouterLink class="btn primary" :to="newForSelected()">
+          <span>+</span>
+          فعالیت جدید
+        </RouterLink>
       </div>
     </header>
 
     <div class="nav">
-      <button class="btn btn-ghost" type="button" @click="goMonth(-1)">ماه قبل</button>
+      <button class="btn ghost nav-btn" type="button" @click="goMonth(-1)">ماه قبل</button>
       <div class="nav-center">
         <strong>{{ monthLabel }}</strong>
         <button class="linkish" type="button" @click="goToday">برو به امروز</button>
       </div>
-      <button class="btn btn-ghost" type="button" @click="goMonth(1)">ماه بعد</button>
+      <button class="btn ghost nav-btn" type="button" @click="goMonth(1)">ماه بعد</button>
     </div>
 
     <p v-if="error" class="error">{{ error }}</p>
@@ -319,7 +333,7 @@ onMounted(() => {
       <aside class="day-panel">
         <header>
           <h2>{{ selectedLabel || 'یک روز را انتخاب کنید' }}</h2>
-          <RouterLink v-if="selectedKey" class="btn btn-ghost" :to="newForSelected()">
+          <RouterLink v-if="selectedKey" class="btn ghost sm" :to="newForSelected()">
             افزودن در این روز
           </RouterLink>
         </header>
@@ -349,6 +363,25 @@ onMounted(() => {
   display: grid;
   gap: 1rem;
   min-width: 0;
+  overflow-x: clip;
+}
+
+.crumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+  align-items: center;
+  color: #94a3b8;
+  font-size: 0.78rem;
+}
+
+.crumbs a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.crumbs a:hover {
+  color: #0f766e;
 }
 
 .page-head {
@@ -359,27 +392,66 @@ onMounted(() => {
   flex-wrap: wrap;
 }
 
+.head-copy {
+  min-width: 0;
+}
+
 .head-actions {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.55rem;
   flex-wrap: wrap;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+h1 {
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
-h1 {
-  margin: 0.2rem 0;
-  font-size: 1.85rem;
+h2 {
+  margin: 0;
+  font-size: 1.05rem;
+  color: #0f172a;
 }
 
 .lead,
 .muted,
 .meta {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
+.btn.sm {
+  min-height: 36px;
+  padding: 0.4rem 0.75rem;
+  font-size: 0.88rem;
 }
 
 .nav {
@@ -388,25 +460,27 @@ h1 {
   align-items: center;
   gap: 0.75rem;
   flex-wrap: wrap;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.65rem 0.85rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.75rem 0.95rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }
 
 .nav-center {
   display: grid;
   justify-items: center;
   gap: 0.15rem;
+  color: #0f766e;
 }
 
 .linkish {
   border: 0;
   background: transparent;
-  color: var(--accent);
+  color: #14b8a6;
   cursor: pointer;
   font: inherit;
   font-size: 0.85rem;
+  font-weight: 700;
   padding: 0;
 }
 
@@ -418,11 +492,10 @@ h1 {
 }
 
 .calendar {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: 0.75rem;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  padding: 0.85rem;
   min-width: 0;
 }
 
@@ -431,10 +504,10 @@ h1 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
   gap: 0.35rem;
   margin-bottom: 0.35rem;
-  color: var(--muted);
+  color: #94a3b8;
   font-size: 0.85rem;
   text-align: center;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .grid {
@@ -445,9 +518,9 @@ h1 {
 
 .day {
   min-height: 92px;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: #fbfcfb;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  background: #f8fafc;
   padding: 0.45rem;
   text-align: right;
   cursor: pointer;
@@ -457,6 +530,11 @@ h1 {
   font: inherit;
   color: inherit;
   min-width: 0;
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+
+.day:hover {
+  border-color: #99f6e4;
 }
 
 .day.outside {
@@ -464,17 +542,19 @@ h1 {
 }
 
 .day.today {
-  border-color: var(--accent);
-  background: var(--accent-soft);
+  border-color: #14b8a6;
+  background: #f0fdfa;
 }
 
 .day.selected {
-  outline: 2px solid var(--accent);
+  outline: 2px solid #14b8a6;
   outline-offset: 1px;
+  background: #fff;
 }
 
 .day.has .num {
-  font-weight: 700;
+  font-weight: 800;
+  color: #0f766e;
 }
 
 .num {
@@ -484,10 +564,11 @@ h1 {
 .count {
   justify-self: start;
   font-size: 0.72rem;
-  background: #13201b;
-  color: #edf5f1;
+  background: #0f766e;
+  color: #fff;
   border-radius: 999px;
   padding: 0.05rem 0.4rem;
+  font-weight: 700;
 }
 
 .previews {
@@ -501,7 +582,7 @@ h1 {
 
 .previews li {
   font-size: 0.72rem;
-  color: var(--muted);
+  color: #64748b;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -512,10 +593,9 @@ h1 {
 }
 
 .day-panel {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
   padding: 1rem;
   display: grid;
   gap: 0.85rem;
@@ -530,11 +610,6 @@ h1 {
   flex-wrap: wrap;
 }
 
-.day-panel h2 {
-  margin: 0;
-  font-size: 1.05rem;
-}
-
 .day-list {
   list-style: none;
   margin: 0;
@@ -546,15 +621,22 @@ h1 {
 .day-list a {
   display: grid;
   gap: 0.15rem;
-  padding: 0.7rem 0.8rem;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  background: #fbfcfb;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid #f1f5f9;
+  border-radius: 14px;
+  background: #f8fafc;
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 0.15s ease;
+}
+
+.day-list a:hover {
+  border-color: #99f6e4;
 }
 
 .day-list .type {
   font-size: 0.78rem;
-  color: var(--accent);
+  color: #0f766e;
   font-weight: 700;
 }
 
@@ -562,11 +644,32 @@ h1 {
   opacity: 0.7;
 }
 
+.error {
+  margin: 0;
+  color: #b91c1c;
+}
+
 @media (max-width: 900px) {
+  .crumbs {
+    display: none;
+  }
+
   .layout {
     grid-template-columns: 1fr;
   }
 
+  .page-head {
+    flex-direction: column;
+  }
+
+  .head-actions {
+    width: 100%;
+  }
+
+  .head-actions .btn {
+    flex: 1;
+  }
+
   .day {
     min-height: 68px;
   }
@@ -576,11 +679,20 @@ h1 {
   }
 }
 
-@media (max-width: 520px) {
+@media (max-width: 700px) {
+  h1 {
+    font-size: 1.55rem;
+  }
+
   .nav {
     justify-content: center;
   }
 
+  .nav-btn {
+    flex: 1;
+    min-width: 0;
+  }
+
   .day {
     min-height: 54px;
     padding: 0.3rem;
diff --git a/apps/web/src/views/AutomationsSettingsView.vue b/apps/web/src/views/AutomationsSettingsView.vue
index 4159449..47becda 100644
--- a/apps/web/src/views/AutomationsSettingsView.vue
+++ b/apps/web/src/views/AutomationsSettingsView.vue
@@ -142,14 +142,13 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">اتوماسیون</p>
+      <div class="head-copy">
         <h1>اگر / آنگاه</h1>
         <p class="lead">
           بعد از بردن معامله یا حل شدن تیکت، فعالیت، اعلان یا امتیاز باشگاه بسازید.
         </p>
       </div>
-      <button class="btn btn-ghost" type="button" :disabled="loading" @click="load">
+      <button class="btn ghost" type="button" :disabled="loading" @click="load">
         بروزرسانی
       </button>
     </header>
@@ -198,12 +197,12 @@ onMounted(load);
         فعال
       </label>
       <div class="actions">
-        <button class="btn" type="submit" :disabled="saving">
+        <button class="btn primary" type="submit" :disabled="saving">
           {{ saving ? 'در حال ذخیره…' : editingId ? 'به‌روزرسانی' : 'ساخت' }}
         </button>
         <button
           v-if="editingId"
-          class="btn btn-ghost"
+          class="btn ghost"
           type="button"
           @click="resetForm"
         >
@@ -245,68 +244,114 @@ onMounted(load);
   display: grid;
   gap: 1rem;
   max-width: 860px;
+  min-width: 0;
+  overflow-x: clip;
 }
+
 .page-head {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
+  align-items: flex-start;
 }
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+
+.head-copy {
+  min-width: 0;
 }
+
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
+
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }
+
 .panel {
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: 1rem;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  padding: 1.1rem;
   background: #fff;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
   display: grid;
   gap: 0.75rem;
 }
+
 h2 {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #0f172a;
 }
+
 .form label {
   display: grid;
   gap: 0.35rem;
   font-size: 0.9rem;
-  color: var(--muted);
+  color: #64748b;
 }
+
 input,
 select,
 textarea {
-  border: 1px solid var(--line);
-  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
   padding: 0.6rem 0.75rem;
   font: inherit;
-  color: var(--ink);
+  color: #0f172a;
+  background: #fff;
 }
+
 .grid2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.65rem;
 }
+
 .check {
   display: flex !important;
   align-items: center;
   gap: 0.45rem;
 }
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+  box-shadow: none;
+}
+
 .actions,
 .row-actions {
   display: flex;
   gap: 0.55rem;
   flex-wrap: wrap;
 }
+
 .list {
   list-style: none;
   margin: 0;
@@ -314,34 +359,51 @@ textarea {
   display: grid;
   gap: 0.7rem;
 }
+
 .list li {
   display: flex;
   justify-content: space-between;
   gap: 0.75rem;
   flex-wrap: wrap;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid #e2e8f0;
   padding-bottom: 0.65rem;
 }
+
 .link {
   background: none;
   border: none;
-  color: var(--accent);
+  color: #0f766e;
   cursor: pointer;
   font: inherit;
   padding: 0;
+  font-weight: 600;
 }
+
 .danger {
-  color: #b42318;
+  color: #b91c1c;
 }
+
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
+
 .ok {
-  color: #067647;
+  margin: 0;
+  color: #0f766e;
+  font-weight: 600;
 }
-@media (max-width: 640px) {
+
+@media (max-width: 700px) {
   .grid2 {
     grid-template-columns: 1fr;
   }
+
+  .actions,
+  .row-actions,
+  .list li {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 </style>
diff --git a/apps/web/src/views/CompanyFormView.vue b/apps/web/src/views/CompanyFormView.vue
index fb67796..6eb08ae 100644
--- a/apps/web/src/views/CompanyFormView.vue
+++ b/apps/web/src/views/CompanyFormView.vue
@@ -1,486 +1,386 @@
 <script setup lang="ts">
-
 import { computed, onMounted, ref } from 'vue';
-
 import { RouterLink, useRoute, useRouter } from 'vue-router';
-
 import axios from 'axios';
-
 import { api } from '@/lib/api';
-
 import type { CompanyDto, CreateCompanyRequest } from '@mento/shared';
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
 import EntityTimeline from '@/components/EntityTimeline.vue';
-
-
+import UiIcon from '@/components/UiIcon.vue';
 
 const route = useRoute();
-
 const router = useRouter();
-
 const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
-
 const isNew = computed(() => route.name === 'company-new');
-
-
+const pageTitle = computed(() => (isNew.value ? 'شرکت جدید' : 'ویرایش شرکت'));
 
 const loading = ref(false);
-
 const saving = ref(false);
-
 const error = ref('');
 
-
-
 const name = ref('');
-
 const nationalId = ref('');
-
 const phone = ref('');
-
 const email = ref('');
-
 const website = ref('');
-
 const address = ref('');
-
 const notes = ref('');
-
 const customFields = ref<Record<string, unknown>>({});
 
-
-
 function fill(c: CompanyDto) {
-
   name.value = c.name;
-
   nationalId.value = c.nationalId ?? '';
-
   phone.value = c.phone ?? '';
-
   email.value = c.email ?? '';
-
   website.value = c.website ?? '';
-
   address.value = c.address ?? '';
-
   notes.value = c.notes ?? '';
   customFields.value = { ...(c.customFields ?? {}) };
-
 }
 
-
-
 async function load() {
-
   if (isNew.value) return;
-
   loading.value = true;
-
   error.value = '';
-
   try {
-
     const { data } = await api.get<CompanyDto>(`/companies/${id.value}`);
-
     fill(data);
-
   } catch {
-
     error.value = 'بارگذاری شرکت ناموفق بود.';
-
   } finally {
-
     loading.value = false;
-
   }
-
 }
 
-
-
 function payload(): CreateCompanyRequest {
-
   return {
-
     name: name.value,
-
     nationalId: nationalId.value || undefined,
-
     phone: phone.value || undefined,
-
     email: email.value || undefined,
-
     website: website.value || undefined,
-
     address: address.value || undefined,
-
     notes: notes.value || undefined,
-
     customFields: customFields.value,
-
   };
-
 }
 
-
-
 async function submit() {
-
   saving.value = true;
-
   error.value = '';
-
   try {
-
     if (isNew.value) {
-
       const { data } = await api.post<CompanyDto>('/companies', payload());
-
       await router.replace({ name: 'company-detail', params: { id: data.id } });
-
     } else {
-
       await api.patch(`/companies/${id.value}`, payload());
-
       await router.push({ name: 'contacts', query: { tab: 'companies' } });
-
     }
-
   } catch (e) {
-
     if (axios.isAxiosError(e)) {
-
       if (!e.response) {
-
         error.value = 'اتصال به سرور برقرار نشد.';
-
       } else {
-
         const msg = (e.response.data as { message?: string | string[] })?.message;
-
         error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره ناموفق بود');
-
       }
-
     } else {
-
       error.value = 'ذخیره ناموفق بود';
-
     }
-
   } finally {
-
     saving.value = false;
-
   }
-
 }
 
-
-
 async function remove() {
-
   if (!id.value || !confirm('این شرکت حذف شود؟ افراد متصل بدون شرکت می‌مانند.')) return;
-
   try {
-
     await api.delete(`/companies/${id.value}`);
-
     await router.push({ name: 'contacts', query: { tab: 'companies' } });
-
   } catch {
-
     error.value = 'حذف ناموفق بود';
-
   }
-
 }
 
-
+function cancel() {
+  void router.push({ name: 'contacts', query: { tab: 'companies' } });
+}
 
 onMounted(load);
-
 </script>
 
-
-
 <template>
-
   <section class="page">
-
-    <header class="page-head">
-
-      <div>
-
-        <p class="eyebrow">شرکت</p>
-
-        <h1>{{ isNew ? 'شرکت جدید' : 'ویرایش شرکت' }}</h1>
-
+    <header class="desktop-head">
+      <div class="title-block">
+        <span class="doc-ico"><UiIcon name="building" :size="22" /></span>
+        <div>
+          <h1>{{ pageTitle }}</h1>
+          <p class="crumb">
+            <RouterLink :to="{ name: 'contacts', query: { tab: 'companies' } }">شرکت‌ها</RouterLink>
+            <span>›</span>
+            <strong>{{ pageTitle }}</strong>
+          </p>
+        </div>
+      </div>
+      <div class="desk-actions">
+        <button class="btn primary" type="button" :disabled="saving" @click="submit">
+          <UiIcon name="check-plain" :size="16" />
+          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
+        </button>
+        <button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
+        <button v-if="!isNew" class="btn danger" type="button" :disabled="saving" @click="remove">
+          حذف
+        </button>
       </div>
-
-      <RouterLink class="btn btn-ghost" :to="{ name: 'contacts', query: { tab: 'companies' } }">
-
-        بازگشت
-
-      </RouterLink>
-
     </header>
 
-
+    <header class="mobile-head">
+      <button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
+        <UiIcon name="check-plain" :size="22" />
+      </button>
+      <h1>{{ pageTitle }}</h1>
+      <button class="icon-btn" type="button" aria-label="بستن" @click="cancel">
+        <UiIcon name="x" :size="20" />
+      </button>
+    </header>
 
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
-
-    <form v-else class="form-card" @submit.prevent="submit">
-
-      <div class="grid">
-
-        <div class="field wide">
-
-          <label for="name">نام شرکت</label>
-
-          <input id="name" v-model="name" required minlength="2" />
-
+    <form v-else class="form" @submit.prevent="submit">
+      <section class="card">
+        <div class="grid">
+          <div class="field wide">
+            <label for="name">نام شرکت</label>
+            <input id="name" v-model="name" required minlength="2" />
+          </div>
+          <div class="field">
+            <label for="nationalId">شناسه ملی</label>
+            <input id="nationalId" v-model="nationalId" />
+          </div>
+          <div class="field">
+            <label for="phone">تلفن</label>
+            <input id="phone" v-model="phone" inputmode="tel" />
+          </div>
+          <div class="field">
+            <label for="email">ایمیل</label>
+            <input id="email" v-model="email" type="email" />
+          </div>
+          <div class="field">
+            <label for="website">وب‌سایت</label>
+            <input id="website" v-model="website" />
+          </div>
+          <div class="field wide">
+            <label for="address">آدرس</label>
+            <input id="address" v-model="address" />
+          </div>
+          <div class="field wide">
+            <label for="notes">یادداشت</label>
+            <textarea id="notes" v-model="notes" rows="4" />
+          </div>
         </div>
-
-        <div class="field">
-
-          <label for="nationalId">شناسه ملی</label>
-
-          <input id="nationalId" v-model="nationalId" />
-
-        </div>
-
-        <div class="field">
-
-          <label for="phone">تلفن</label>
-
-          <input id="phone" v-model="phone" inputmode="tel" />
-
-        </div>
-
-        <div class="field">
-
-          <label for="email">ایمیل</label>
-
-          <input id="email" v-model="email" type="email" />
-
-        </div>
-
-        <div class="field">
-
-          <label for="website">وب‌سایت</label>
-
-          <input id="website" v-model="website" />
-
-        </div>
-
-        <div class="field wide">
-
-          <label for="address">آدرس</label>
-
-          <input id="address" v-model="address" />
-
-        </div>
-
-        <div class="field wide">
-
-          <label for="notes">یادداشت</label>
-
-          <textarea id="notes" v-model="notes" rows="4" />
-
-        </div>
-
-      </div>
-
-
+      </section>
 
       <CustomFieldsSection entity-type="company" v-model="customFields" />
-
-      <EntityTimeline
-        v-if="!isNew && id"
-        entity-type="company"
-        :entity-id="id"
-      />
+      <EntityTimeline v-if="!isNew && id" entity-type="company" :entity-id="id" />
 
       <p v-if="error" class="error">{{ error }}</p>
 
-
-
-      <div class="form-actions">
-
-        <button class="btn" type="submit" :disabled="saving">
-
+      <div class="mobile-actions">
+        <button class="btn primary" type="submit" :disabled="saving">
           {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-
         </button>
-
-        <button
-
-          v-if="!isNew"
-
-          class="btn btn-danger"
-
-          type="button"
-
-          :disabled="saving"
-
-          @click="remove"
-
-        >
-
+        <button v-if="!isNew" class="btn danger" type="button" :disabled="saving" @click="remove">
           حذف
-
         </button>
-
       </div>
-
     </form>
-
   </section>
-
 </template>
 
-
-
 <style scoped>
-
 .page {
-
   display: grid;
-
-  gap: 1.1rem;
-
+  gap: 0.85rem;
   max-width: 820px;
-
+  min-width: 0;
+  padding-bottom: 1.5rem;
 }
 
-
-
-.page-head {
-
-  display: flex;
-
+.desktop-head {
+  display: none;
   justify-content: space-between;
-
   gap: 1rem;
-
-  align-items: flex-start;
-
+  align-items: center;
 }
 
-
-
-.eyebrow {
-
-  margin: 0;
-
-  color: var(--accent);
-
-  font-weight: 700;
-
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
-
+.doc-ico {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: #ecfdf5;
+  color: #0f766e;
+}
 
 h1 {
+  margin: 0;
+  font-size: 1.35rem;
+}
 
+.crumb {
   margin: 0.2rem 0 0;
-
-  font-size: 1.7rem;
-
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
 }
 
-
-
-.muted {
-
-  color: var(--muted);
-
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
 }
 
+.desk-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
 
-
-.form-card {
-
-  background: var(--surface);
-
-  border: 1px solid var(--line);
-
-  border-radius: var(--radius);
-
-  box-shadow: var(--shadow);
-
-  padding: 1.2rem;
-
+.mobile-head {
   display: grid;
-
-  gap: 1rem;
-
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
 }
 
+.mobile-head h1 {
+  text-align: center;
+  font-size: 1.05rem;
+}
 
+.icon-btn {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: none;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.form {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.card {
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.95rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
 
 .grid {
-
   display: grid;
-
   grid-template-columns: repeat(2, minmax(0, 1fr));
-
-  gap: 0.9rem;
-
+  gap: 0.85rem;
 }
 
+.field {
+  display: grid;
+  gap: 0.35rem;
+}
 
-
-.wide {
-
+.field.wide {
   grid-column: 1 / -1;
-
 }
 
+.field label {
+  color: #64748b;
+  font-size: 0.88rem;
+  font-weight: 700;
+}
 
-
-textarea {
-
-  border: 1px solid var(--line);
-
-  border-radius: 12px;
-
-  padding: 0.8rem 0.95rem;
-
-  background: #fff;
-
-  font: inherit;
-
+.field input,
+.field select,
+.field textarea {
   width: 100%;
-
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.7rem 0.85rem;
+  font: inherit;
+  background: #fff;
 }
 
-
-
-.form-actions {
-
-  display: flex;
-
-  gap: 0.6rem;
-
-  flex-wrap: wrap;
-
+.muted {
+  color: #64748b;
+  margin: 0;
 }
 
+.error {
+  color: #b91c1c;
+  margin: 0;
+}
 
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
 
-@media (max-width: 700px) {
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
 
-  .grid {
+.btn.cancel {
+  background: #fff;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
 
-    grid-template-columns: 1fr;
+.btn.danger {
+  background: #fff;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
 
+.mobile-actions {
+  display: grid;
+  gap: 0.5rem;
+}
+
+@media (min-width: 960px) {
+  .desktop-head {
+    display: flex;
   }
 
+  .mobile-head,
+  .mobile-actions {
+    display: none;
+  }
 }
 
+@media (max-width: 700px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
-
-
diff --git a/apps/web/src/views/CurrencySettingsView.vue b/apps/web/src/views/CurrencySettingsView.vue
index f1fdce2..a994cca 100644
--- a/apps/web/src/views/CurrencySettingsView.vue
+++ b/apps/web/src/views/CurrencySettingsView.vue
@@ -102,20 +102,21 @@ onMounted(load);
 
 <template>
   <section class="page">
-    <header>
-      <p class="eyebrow">تنظیمات</p>
-      <h1>ارزها و نرخ تبدیل</h1>
-      <p class="lead">
-        ارز پایه برای جمع‌ها و پیش‌بینی استفاده می‌شود. نرخ یعنی چند واحد ارز پایه
-        برابر با ۱ واحد ارز خارجی است.
-      </p>
+    <header class="page-head">
+      <div class="head-copy">
+        <h1>ارزها و نرخ تبدیل</h1>
+        <p class="lead">
+          ارز پایه برای جمع‌ها و پیش‌بینی استفاده می‌شود. نرخ یعنی چند واحد ارز پایه
+          برابر با ۱ واحد ارز خارجی است.
+        </p>
+      </div>
     </header>
 
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
     <p v-if="error" class="error">{{ error }}</p>
     <p v-if="ok" class="ok">{{ ok }}</p>
 
-    <form v-if="!loading" class="card" @submit.prevent="save">
+    <form v-if="!loading" class="panel" @submit.prevent="save">
       <div class="field">
         <label>ارز پایه</label>
         <select v-model="baseCurrency" @change="onBaseChange">
@@ -166,7 +167,7 @@ onMounted(load);
         </p>
       </div>
 
-      <button class="btn" type="submit" :disabled="saving">
+      <button class="btn primary" type="submit" :disabled="saving">
         {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
       </button>
     </form>
@@ -178,30 +179,41 @@ onMounted(load);
   display: grid;
   gap: 1rem;
   max-width: 640px;
+  min-width: 0;
+  overflow-x: clip;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }
 
-.card {
+.panel {
   display: grid;
   gap: 1rem;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  padding: 1.1rem;
 }
 
 .field {
@@ -210,13 +222,13 @@ h1 {
 }
 
 label {
-  color: var(--muted);
+  color: #64748b;
   font-size: 0.9rem;
 }
 
 select,
 input[type='number'] {
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.7rem 0.85rem;
   font: inherit;
@@ -234,7 +246,7 @@ input[type='number'] {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 999px;
   padding: 0.4rem 0.75rem;
   cursor: pointer;
@@ -243,8 +255,9 @@ input[type='number'] {
 }
 
 .chip.on {
-  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
-  background: color-mix(in srgb, var(--accent) 8%, #fff);
+  border-color: #99f6e4;
+  background: #f0fdfa;
+  color: #0f766e;
 }
 
 .chip.locked {
@@ -259,6 +272,8 @@ input[type='number'] {
 .rates h2 {
   margin: 0;
   font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
 }
 
 .rate-row {
@@ -268,12 +283,39 @@ input[type='number'] {
   align-items: center;
 }
 
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
 
 .ok {
-  color: var(--accent);
+  margin: 0;
+  color: #0f766e;
   font-weight: 600;
 }
+
+@media (max-width: 700px) {
+  .rate-row {
+    grid-template-columns: 1fr;
+  }
+}
 </style>
diff --git a/apps/web/src/views/CustomFieldsSettingsView.vue b/apps/web/src/views/CustomFieldsSettingsView.vue
index bacbc93..8fb3408 100644
--- a/apps/web/src/views/CustomFieldsSettingsView.vue
+++ b/apps/web/src/views/CustomFieldsSettingsView.vue
@@ -114,16 +114,15 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">تنظیمات</p>
+      <div class="head-copy">
         <h1>فیلدهای سفارشی</h1>
-        <p class="muted">
+        <p class="lead">
           فیلدهای اختصاصی سازمان را برای شخص، شرکت یا معامله تعریف کنید.
         </p>
       </div>
     </header>
 
-    <form class="form-card" @submit.prevent="createField">
+    <form class="panel" @submit.prevent="createField">
       <h2>فیلد جدید</h2>
       <div class="grid">
         <div class="field">
@@ -163,7 +162,7 @@ onMounted(load);
           />
         </div>
       </div>
-      <button class="btn" type="submit" :disabled="saving">
+      <button class="btn primary" type="submit" :disabled="saving">
         {{ saving ? 'در حال ثبت…' : 'افزودن فیلد' }}
       </button>
     </form>
@@ -208,42 +207,61 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 920px;
+  min-width: 0;
+  overflow-x: clip;
 }
 
-.page-head h1 {
-  margin: 0.2rem 0 0.35rem;
-  font-size: 1.7rem;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
 }
 
-.eyebrow {
+.head-copy {
+  min-width: 0;
+}
+
+h1 {
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
+}
+
+.lead,
+.muted,
+.meta {
   margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+  color: #64748b;
 }
 
-.muted {
-  color: var(--muted);
+.error {
+  margin: 0;
+  color: #b91c1c;
 }
 
-.form-card,
+.panel,
 .row {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
   padding: 1.1rem;
 }
 
-.form-card {
+.panel {
   display: grid;
   gap: 0.9rem;
 }
 
-.form-card h2 {
+.panel h2 {
   margin: 0;
   font-size: 1.05rem;
+  font-weight: 700;
+  color: #0f172a;
 }
 
 .grid {
@@ -256,9 +274,14 @@ onMounted(load);
   grid-column: 1 / -1;
 }
 
+.field label {
+  color: #64748b;
+  font-size: 0.9rem;
+}
+
 select,
 input[type='text'] {
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.8rem 0.95rem;
   background: #fff;
@@ -281,6 +304,45 @@ input[type='text'] {
   display: flex;
   gap: 0.6rem;
   align-items: center;
+  flex-wrap: wrap;
+}
+
+.toolbar select {
+  flex: 1;
+  min-width: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn-ghost {
+  background: #fff;
+  color: #0f766e;
+  border: 1px solid #99f6e4;
+  box-shadow: none;
+}
+
+.btn-danger {
+  background: #fff;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+  box-shadow: none;
 }
 
 .list {
@@ -296,8 +358,7 @@ input[type='text'] {
 }
 
 .meta {
-  margin: 0.25rem 0 0;
-  color: var(--muted);
+  margin-top: 0.25rem;
   font-size: 0.92rem;
 }
 
@@ -313,8 +374,7 @@ code {
 }
 
 @media (max-width: 700px) {
-  .grid,
-  .row {
+  .grid {
     grid-template-columns: 1fr;
   }
 
@@ -322,5 +382,11 @@ code {
     flex-direction: column;
     align-items: stretch;
   }
+
+  .actions,
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 </style>
diff --git a/apps/web/src/views/FaqSettingsView.vue b/apps/web/src/views/FaqSettingsView.vue
index da03bff..c6cba2b 100644
--- a/apps/web/src/views/FaqSettingsView.vue
+++ b/apps/web/src/views/FaqSettingsView.vue
@@ -118,8 +118,7 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">تنظیمات</p>
+      <div class="head-copy">
         <h1>پایگاه دانش (FAQ)</h1>
         <p class="lead">سؤالات پرتکرار برای کاهش تیکت تکراری.</p>
       </div>
@@ -129,7 +128,7 @@ onMounted(load);
     <p v-if="ok" class="ok">{{ ok }}</p>
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <form class="form" @submit.prevent="save">
+    <form class="panel" @submit.prevent="save">
       <h2>{{ editingId ? 'ویرایش مقاله' : 'مقاله جدید' }}</h2>
       <div class="field">
         <label>سؤال</label>
@@ -154,12 +153,12 @@ onMounted(load);
         </label>
       </div>
       <div class="form-actions">
-        <button class="btn" type="submit" :disabled="saving">
+        <button class="btn primary" type="submit" :disabled="saving">
           {{ saving ? '…' : editingId ? 'ذخیره تغییرات' : 'افزودن' }}
         </button>
         <button
           v-if="editingId"
-          class="btn btn-ghost"
+          class="btn ghost"
           type="button"
           @click="resetForm"
         >
@@ -177,10 +176,10 @@ onMounted(load);
         </header>
         <p>{{ row.answer }}</p>
         <div class="card-actions">
-          <button class="btn btn-ghost" type="button" @click="startEdit(row)">
+          <button class="btn ghost" type="button" @click="startEdit(row)">
             ویرایش
           </button>
-          <button class="btn btn-danger" type="button" @click="remove(row)">
+          <button class="btn danger" type="button" @click="remove(row)">
             حذف
           </button>
         </div>
@@ -193,41 +192,54 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 720px;
+  min-width: 0;
+  overflow-x: clip;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 h2 {
   margin: 0;
   font-size: 1.05rem;
+  font-weight: 700;
+  color: #0f172a;
 }
 
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }
 
-.form,
+.panel,
 .list {
   display: grid;
   gap: 0.75rem;
 }
 
-.form {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+.panel {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  padding: 1.1rem;
 }
 
 .field {
@@ -248,13 +260,13 @@ h2 {
 }
 
 label {
-  color: var(--muted);
+  color: #64748b;
   font-size: 0.9rem;
 }
 
 input,
 textarea {
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.7rem 0.85rem;
   font: inherit;
@@ -270,6 +282,39 @@ textarea {
   padding-bottom: 0.5rem;
 }
 
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+  box-shadow: none;
+}
+
+.btn.danger {
+  background: #fff;
+  color: #b91c1c;
+  border-color: #fecaca;
+  box-shadow: none;
+}
+
 .form-actions,
 .card-actions {
   display: flex;
@@ -278,10 +323,11 @@ textarea {
 }
 
 .card {
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
   padding: 0.9rem 1rem;
-  background: var(--surface);
+  background: #fff;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
 }
 
 .card header {
@@ -295,31 +341,50 @@ textarea {
 .card p {
   margin: 0 0 0.65rem;
   white-space: pre-wrap;
-  color: var(--muted);
+  color: #64748b;
 }
 
 .tag {
   font-size: 0.75rem;
-  color: var(--accent);
+  color: #0f766e;
   font-weight: 700;
 }
 
 .muted-tag {
-  color: var(--muted);
+  color: #64748b;
 }
 
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
 
 .ok {
-  color: #027a48;
+  margin: 0;
+  color: #0f766e;
+  font-weight: 600;
 }
 
 .empty {
   padding: 1rem;
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
-  color: var(--muted);
+  border: 1px dashed #e2e8f0;
+  border-radius: 18px;
+  color: #64748b;
+}
+
+@media (max-width: 700px) {
+  .row-fields {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .row-fields .field {
+    min-width: 0;
+  }
+
+  .form-actions,
+  .card-actions {
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/apps/web/src/views/InvoiceFormView.vue b/apps/web/src/views/InvoiceFormView.vue
index 4061710..0a398f2 100644
--- a/apps/web/src/views/InvoiceFormView.vue
+++ b/apps/web/src/views/InvoiceFormView.vue
@@ -373,15 +373,15 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head no-print">
-      <div>
-        <RouterLink class="back" :to="{ name: 'invoices' }"
-          >← بازگشت به لیست</RouterLink
-        >
+      <div class="head-copy">
+        <p class="crumb">
+          <RouterLink :to="{ name: 'invoices' }">فاکتورها</RouterLink>
+          <span>›</span>
+          <strong>{{ isNew ? 'فاکتور جدید' : number || 'فاکتور' }}</strong>
+        </p>
         <h1>{{ isNew ? 'فاکتور جدید' : number || 'فاکتور' }}</h1>
       </div>
-      <button v-if="!isNew" class="btn btn-ghost" type="button" @click="printInvoice">
-        چاپ
-      </button>
+      <button v-if="!isNew" class="btn ghost" type="button" @click="printInvoice">چاپ</button>
     </header>
 
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
@@ -613,8 +613,9 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 860px;
+  min-width: 0;
 }
 
 .page-head {
@@ -624,14 +625,41 @@ onMounted(load);
   align-items: flex-start;
 }
 
-.back {
-  color: var(--muted);
+.head-copy {
+  min-width: 0;
+}
+
+.crumb {
+  margin: 0 0 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
+}
+
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
   text-decoration: none;
-  font-size: 0.9rem;
 }
 
 h1 {
-  margin: 0.25rem 0 0;
+  margin: 0;
+  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
+  font-weight: 800;
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border: 1px solid #99f6e4;
+  border-radius: 12px;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
 }
 
 .form,
@@ -645,13 +673,28 @@ h1 {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
-  padding: 0.75rem 1rem;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
+  padding: 0.85rem 1rem;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
   font-weight: 600;
 }
 
+.form {
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
+
+.lines-block,
+.pay-block {
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
diff --git a/apps/web/src/views/InvoicesView.vue b/apps/web/src/views/InvoicesView.vue
index 0644fe8..c72d10d 100644
--- a/apps/web/src/views/InvoicesView.vue
+++ b/apps/web/src/views/InvoicesView.vue
@@ -4,6 +4,8 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatMoney } from '@/lib/money';
+import { toFaDigits } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
 import type { InvoiceDto, InvoiceStatus, PaginatedResponse } from '@mento/shared';
 
 const route = useRoute();
@@ -15,12 +17,11 @@ const data = ref<PaginatedResponse<InvoiceDto> | null>(null);
 const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
 const status = ref<InvoiceStatus | 'all'>(
   typeof route.query.status === 'string' &&
-    ['draft', 'issued', 'partially_paid', 'paid', 'canceled'].includes(
-      route.query.status,
-    )
+    ['draft', 'issued', 'partially_paid', 'paid', 'canceled'].includes(route.query.status)
     ? (route.query.status as InvoiceStatus)
     : 'all',
 );
+const filterOpen = ref(false);
 
 const statusLabel: Record<InvoiceStatus, string> = {
   draft: 'پیش‌نویس',
@@ -31,25 +32,24 @@ const statusLabel: Record<InvoiceStatus, string> = {
 };
 
 const items = computed(() => data.value?.items ?? []);
+const listEmpty = computed(() => !loading.value && !items.value.length);
+const statusFilterLabel = computed(() =>
+  status.value === 'all' ? 'همه وضعیت‌ها' : statusLabel[status.value],
+);
 
 async function load() {
   loading.value = true;
   error.value = '';
+  filterOpen.value = false;
   try {
-    const { data: res } = await api.get<PaginatedResponse<InvoiceDto>>(
-      '/invoices',
-      {
-        params: {
-          q: q.value || undefined,
-          status: status.value === 'all' ? undefined : status.value,
-          dealId:
-            typeof route.query.dealId === 'string'
-              ? route.query.dealId
-              : undefined,
-          limit: 50,
-        },
+    const { data: res } = await api.get<PaginatedResponse<InvoiceDto>>('/invoices', {
+      params: {
+        q: q.value || undefined,
+        status: status.value === 'all' ? undefined : status.value,
+        dealId: typeof route.query.dealId === 'string' ? route.query.dealId : undefined,
+        limit: 50,
       },
-    );
+    });
     data.value = res;
   } catch (e) {
     if (axios.isAxiosError(e) && !e.response) {
@@ -63,7 +63,7 @@ async function load() {
 }
 
 function onSearch() {
-  router.replace({
+  void router.replace({
     name: 'invoices',
     query: {
       ...route.query,
@@ -73,15 +73,19 @@ function onSearch() {
   });
 }
 
+function setStatus(next: InvoiceStatus | 'all') {
+  status.value = next;
+  filterOpen.value = false;
+  onSearch();
+}
+
 watch(
   () => [route.query.q, route.query.status, route.query.dealId],
   () => {
     q.value = typeof route.query.q === 'string' ? route.query.q : '';
     status.value =
       typeof route.query.status === 'string' &&
-      ['draft', 'issued', 'partially_paid', 'paid', 'canceled'].includes(
-        route.query.status,
-      )
+      ['draft', 'issued', 'partially_paid', 'paid', 'canceled'].includes(route.query.status)
         ? (route.query.status as InvoiceStatus)
         : 'all';
     void load();
@@ -92,154 +96,506 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
+  <section class="page" @click="filterOpen = false">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">مالی سبک</p>
+      <div class="head-copy">
         <h1>فاکتورها</h1>
-        <p class="lead">
-          صدور فاکتور، ثبت پرداخت و پیگیری اقساط ساده.
-        </p>
+        <p class="lead">صدور فاکتور، ثبت پرداخت و پیگیری اقساط ساده.</p>
       </div>
-      <RouterLink class="btn" :to="{ name: 'invoice-new', query: route.query }"
-        >فاکتور جدید</RouterLink
-      >
+      <RouterLink class="add-btn" :to="{ name: 'invoice-new', query: route.query }" aria-label="فاکتور جدید">
+        <span>+</span>
+      </RouterLink>
     </header>
 
-    <form class="toolbar" @submit.prevent="onSearch">
-      <input v-model="q" type="search" placeholder="جستجو در عنوان یا شماره…" />
-      <select v-model="status" @change="onSearch">
-        <option value="all">همه وضعیت‌ها</option>
-        <option v-for="(label, key) in statusLabel" :key="key" :value="key">
-          {{ label }}
-        </option>
-      </select>
-      <button class="btn btn-ghost" type="submit">جستجو</button>
-    </form>
+    <div class="tools">
+      <form class="search" @submit.prevent="onSearch">
+        <UiIcon name="search" :size="18" />
+        <input v-model="q" type="search" placeholder="جستجو در عنوان یا شماره…" />
+      </form>
+      <div class="filter-wrap" @click.stop>
+        <button class="btn ghost filter-btn" type="button" @click="filterOpen = !filterOpen">
+          <UiIcon name="filter" :size="16" />
+          <span class="btn-full">{{ statusFilterLabel }}</span>
+          <span class="btn-short">وضعیت</span>
+          <UiIcon name="chevron" :size="14" class="chev" />
+        </button>
+        <div v-if="filterOpen" class="popover">
+          <button type="button" :class="{ on: status === 'all' }" @click="setStatus('all')">
+            همه وضعیت‌ها
+          </button>
+          <button
+            v-for="(label, key) in statusLabel"
+            :key="key"
+            type="button"
+            :class="{ on: status === key }"
+            @click="setStatus(key as InvoiceStatus)"
+          >
+            {{ label }}
+          </button>
+        </div>
+      </div>
+    </div>
 
     <p v-if="error" class="error">{{ error }}</p>
     <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <div v-else class="list">
-      <RouterLink
-        v-for="invoice in items"
-        :key="invoice.id"
-        class="row"
-        :to="{ name: 'invoice-detail', params: { id: invoice.id } }"
-      >
-        <div>
-          <strong>{{ invoice.title }}</strong>
-          <p class="muted">
-            {{ invoice.number }}
-            · {{ statusLabel[invoice.status as InvoiceStatus] || invoice.status }}
-            <span v-if="invoice.person"> · {{ invoice.person.fullName }}</span>
+    <div v-else-if="listEmpty" class="empty-card">
+      <div class="art" aria-hidden="true">
+        <svg viewBox="0 0 168 148" fill="none">
+          <rect x="38" y="18" width="92" height="112" rx="16" fill="#E7F6F3" />
+          <rect x="50" y="32" width="68" height="84" rx="10" fill="#fff" />
+          <path d="M62 52h28" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 68h36" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 84h22" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <circle cx="118" cy="112" r="20" fill="#14b8a6" />
+          <path d="M118 104v16M110 112h16" stroke="#fff" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </div>
+      <h2>هنوز فاکتوری نیست</h2>
+      <p>اولین فاکتور را صادر کنید تا پرداخت‌ها و اقساط را اینجا ببینید.</p>
+      <RouterLink class="btn primary wide" :to="{ name: 'invoice-new', query: route.query }">
+        <span>+</span>
+        فاکتور جدید
+      </RouterLink>
+    </div>
+
+    <template v-else>
+      <div class="list-head">
+        <strong>{{ toFaDigits(items.length) }} فاکتور</strong>
+      </div>
+
+      <div class="table-wrap desktop-only">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>عنوان</th>
+              <th>شماره</th>
+              <th>وضعیت</th>
+              <th>مشتری / معامله</th>
+              <th>مبلغ</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="invoice in items" :key="invoice.id">
+              <td>
+                <RouterLink class="title" :to="{ name: 'invoice-detail', params: { id: invoice.id } }">
+                  {{ invoice.title }}
+                </RouterLink>
+              </td>
+              <td class="muted">{{ invoice.number }}</td>
+              <td>
+                <span class="badge" :class="invoice.status">
+                  {{ statusLabel[invoice.status as InvoiceStatus] || invoice.status }}
+                </span>
+              </td>
+              <td class="muted">
+                <span v-if="invoice.person">{{ invoice.person.fullName }}</span>
+                <span v-if="invoice.person && invoice.deal"> · </span>
+                <span v-if="invoice.deal">{{ invoice.deal.title }}</span>
+                <span v-if="!invoice.person && !invoice.deal">—</span>
+              </td>
+              <td class="amounts">
+                <strong>{{ formatMoney(invoice.totalAmount, invoice.currency) }}</strong>
+                <span v-if="invoice.paidAmount > 0" class="paid">
+                  وصول: {{ formatMoney(invoice.paidAmount, invoice.currency) }}
+                </span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="cards mobile-only">
+        <RouterLink
+          v-for="invoice in items"
+          :key="invoice.id"
+          class="m-card"
+          :to="{ name: 'invoice-detail', params: { id: invoice.id } }"
+        >
+          <div class="m-top">
+            <strong>{{ invoice.title }}</strong>
+            <span class="badge" :class="invoice.status">
+              {{ statusLabel[invoice.status as InvoiceStatus] || invoice.status }}
+            </span>
+          </div>
+          <p class="muted">{{ invoice.number }}</p>
+          <p v-if="invoice.person || invoice.deal" class="meta">
+            <span v-if="invoice.person">{{ invoice.person.fullName }}</span>
             <span v-if="invoice.deal"> · {{ invoice.deal.title }}</span>
           </p>
-        </div>
-        <div class="amounts">
-          <strong>{{ formatMoney(invoice.totalAmount, invoice.currency) }}</strong>
-          <span v-if="invoice.paidAmount > 0" class="muted paid">
-            وصول: {{ formatMoney(invoice.paidAmount, invoice.currency) }}
-          </span>
-        </div>
-      </RouterLink>
-      <p v-if="!items.length" class="empty">هنوز فاکتوری نیست.</p>
-    </div>
+          <div class="m-foot">
+            <strong>{{ formatMoney(invoice.totalAmount, invoice.currency) }}</strong>
+            <span v-if="invoice.paidAmount > 0" class="paid">
+              وصول: {{ formatMoney(invoice.paidAmount, invoice.currency) }}
+            </span>
+          </div>
+        </RouterLink>
+      </div>
+    </template>
   </section>
 </template>
 
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
 }
 
 .page-head {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
-  flex-wrap: wrap;
   align-items: flex-start;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 .lead,
-.muted {
-  color: var(--muted);
+.muted,
+.error,
+.meta {
+  margin: 0;
 }
 
-.toolbar {
-  display: flex;
-  gap: 0.55rem;
-  flex-wrap: wrap;
+.lead,
+.muted,
+.meta {
+  color: #64748b;
 }
 
-.toolbar input,
-.toolbar select {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.7rem 0.85rem;
-  font: inherit;
-  background: #fff;
-  min-width: 0;
-  flex: 1;
+.error {
+  color: #b91c1c;
 }
 
-.list {
+.add-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
   display: grid;
-  gap: 0.55rem;
-}
-
-.row {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: center;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.9rem 1rem;
+  place-items: center;
   text-decoration: none;
-  color: inherit;
+  font-size: 1.6rem;
+  font-weight: 700;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
+  flex-shrink: 0;
 }
 
-.row p {
-  margin: 0.25rem 0 0;
+.tools {
+  display: flex;
+  gap: 0.55rem;
+  align-items: center;
+}
+
+.search {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0 0.85rem;
+  color: #94a3b8;
+}
+
+.search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.75rem 0;
+  font: inherit;
+}
+
+.filter-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
+.btn.wide {
+  width: min(100%, 320px);
+}
+
+.filter-btn .chev {
+  transform: rotate(90deg);
+}
+
+.btn-short {
+  display: none;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-end: 0;
+  min-width: 11rem;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  padding: 0.35rem;
+  display: grid;
+  z-index: 8;
+}
+
+.popover button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border: 0;
+  background: none;
+  padding: 0.6rem 0.7rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.popover button:hover,
+.popover button.on {
+  background: #f0fdfa;
+  color: #0f766e;
+}
+
+.empty-card {
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
+  padding: 2.4rem 1.2rem 2rem;
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: 0.7rem;
+}
+
+.art svg {
+  width: 148px;
+  height: auto;
+  display: block;
+}
+
+.empty-card h2 {
+  margin: 0.2rem 0 0;
+  font-size: 1.15rem;
+}
+
+.empty-card > p {
+  max-width: 22rem;
+  color: #94a3b8;
+  line-height: 1.8;
+}
+
+.list-head {
+  color: #0f766e;
+}
+
+.table-wrap {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  overflow: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 640px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 0.9rem 1rem;
+  text-align: start;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.data-table th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
+  background: #f8fafc;
+}
+
+.title {
+  color: #0f172a;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.title:hover {
+  color: #0f766e;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #475569;
+  white-space: nowrap;
+}
+
+.badge.draft {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.badge.issued {
+  background: #ecfeff;
+  color: #0e7490;
+}
+
+.badge.partially_paid {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.badge.paid {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.badge.canceled {
+  background: #fef2f2;
+  color: #b91c1c;
 }
 
 .amounts {
   display: grid;
-  gap: 0.2rem;
-  text-align: end;
+  gap: 0.15rem;
   white-space: nowrap;
 }
 
 .paid {
-  font-size: 0.85rem;
+  font-size: 0.8rem;
+  color: #64748b;
 }
 
-.empty,
-.error {
-  margin: 0;
+.desktop-only {
+  display: block;
 }
 
-.error {
-  color: #b42318;
+.mobile-only {
+  display: none;
 }
 
-.empty {
-  padding: 1rem;
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
-  color: var(--muted);
+.cards {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.m-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.95rem 1rem;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
+  text-decoration: none;
+  color: inherit;
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.m-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.6rem;
+  align-items: flex-start;
+}
+
+.m-top strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.m-foot {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 0.75rem;
+  align-items: baseline;
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 900px) {
+  .page-head {
+    align-items: center;
+  }
+
+  .tools {
+    flex-wrap: wrap;
+  }
+
+  .search {
+    flex: 1 1 100%;
+  }
+
+  .btn-full {
+    display: none;
+  }
+
+  .btn-short {
+    display: inline;
+  }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: grid;
+  }
+}
+
+@media (max-width: 520px) {
+  .add-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .m-card {
+    padding: 0.85rem;
+  }
 }
 </style>
diff --git a/apps/web/src/views/LeadFormsSettingsView.vue b/apps/web/src/views/LeadFormsSettingsView.vue
index bc9aa39..e7265a8 100644
--- a/apps/web/src/views/LeadFormsSettingsView.vue
+++ b/apps/web/src/views/LeadFormsSettingsView.vue
@@ -122,18 +122,19 @@ onMounted(load);
 
 <template>
   <section class="page">
-    <header>
-      <p class="eyebrow">تنظیمات</p>
-      <h1>فرم‌ساز سرنخ</h1>
-      <p class="lead">
-        فرم وب بسازید، لینک یا iframe بگیرید؛ ارسال‌ها به‌صورت شخص و معامله در کاریز ثبت می‌شوند.
-      </p>
+    <header class="page-head">
+      <div class="head-copy">
+        <h1>فرم‌ساز سرنخ</h1>
+        <p class="lead">
+          فرم وب بسازید، لینک یا iframe بگیرید؛ ارسال‌ها به‌صورت شخص و معامله در کاریز ثبت می‌شوند.
+        </p>
+      </div>
     </header>
 
     <p v-if="error" class="error">{{ error }}</p>
     <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <form class="create" @submit.prevent="createForm">
+    <form class="panel" @submit.prevent="createForm">
       <h2>فرم جدید</h2>
       <div class="grid">
         <label>
@@ -172,7 +173,7 @@ onMounted(load);
           </button>
         </div>
       </div>
-      <button class="btn" type="submit" :disabled="saving">
+      <button class="btn primary" type="submit" :disabled="saving">
         {{ saving ? 'در حال ساخت…' : 'ساخت فرم با فیلدهای پیش‌فرض' }}
       </button>
     </form>
@@ -201,15 +202,15 @@ onMounted(load);
             لینک عمومی
             <div class="row">
               <input :value="publicUrl(form)" readonly />
-              <button type="button" class="btn btn-ghost" @click="copyText(publicUrl(form))">کپی</button>
-              <a class="btn btn-ghost" :href="form.publicPath" target="_blank" rel="noopener">بازکردن</a>
+              <button type="button" class="btn ghost" @click="copyText(publicUrl(form))">کپی</button>
+              <a class="btn ghost" :href="form.publicPath" target="_blank" rel="noopener">بازکردن</a>
             </div>
           </label>
           <label>
             کد iframe
             <div class="row">
               <input :value="iframeSnippet(form)" readonly />
-              <button type="button" class="btn btn-ghost" @click="copyText(iframeSnippet(form))">کپی</button>
+              <button type="button" class="btn ghost" @click="copyText(iframeSnippet(form))">کپی</button>
             </div>
           </label>
           <div class="qr">
@@ -226,42 +227,56 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.2rem;
+  gap: 1rem;
   max-width: 900px;
+  min-width: 0;
+  overflow-x: clip;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }
 
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
 
-.create,
+.panel,
 .card {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  padding: 1.1rem;
   display: grid;
   gap: 0.85rem;
 }
 
-.create h2 {
+.panel h2 {
   margin: 0;
   font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
 }
 
 .grid {
@@ -278,20 +293,47 @@ label {
   display: grid;
   gap: 0.35rem;
   font-size: 0.9rem;
-  color: var(--muted);
+  color: #64748b;
 }
 
 input,
 select {
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.7rem 0.85rem;
   font: inherit;
   background: #fff;
-  color: var(--text, var(--ink));
+  color: #0f172a;
   width: 100%;
 }
 
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+  box-shadow: none;
+}
+
 .chips {
   display: flex;
   flex-wrap: wrap;
@@ -299,7 +341,7 @@ select {
 }
 
 .chip {
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   background: #fff;
   border-radius: 999px;
   padding: 0.35rem 0.75rem;
@@ -308,9 +350,9 @@ select {
 }
 
 .chip.on {
-  background: var(--accent-soft);
-  border-color: transparent;
-  color: var(--accent);
+  background: #f0fdfa;
+  border-color: #99f6e4;
+  color: #0f766e;
   font-weight: 700;
 }
 
@@ -339,13 +381,14 @@ select {
 .actions button {
   border: 0;
   background: transparent;
-  color: var(--muted);
+  color: #64748b;
   cursor: pointer;
   font: inherit;
+  font-weight: 600;
 }
 
 .actions .danger {
-  color: #b42318;
+  color: #b91c1c;
 }
 
 .share {
@@ -366,19 +409,26 @@ select {
 
 .qr img {
   border-radius: 12px;
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   background: #fff;
 }
 
 .empty {
   padding: 1rem;
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
+  border: 1px dashed #e2e8f0;
+  border-radius: 18px;
 }
 
 @media (max-width: 700px) {
   .grid {
     grid-template-columns: 1fr;
   }
+
+  .card-head,
+  .row,
+  .actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 </style>
diff --git a/apps/web/src/views/LoyaltyClubView.vue b/apps/web/src/views/LoyaltyClubView.vue
index 3de6fef..f975de9 100644
--- a/apps/web/src/views/LoyaltyClubView.vue
+++ b/apps/web/src/views/LoyaltyClubView.vue
@@ -4,6 +4,7 @@ import axios from 'axios';
 import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
 import { canManageSettings } from '@/lib/roles';
+import UiIcon from '@/components/UiIcon.vue';
 import type {
   CreateLoyaltyTierRequest,
   LoyaltyMemberDto,
@@ -128,12 +129,11 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">مشتریان</p>
+      <div class="head-copy">
         <h1>باشگاه مشتریان</h1>
         <p class="lead">امتیاز و سطح وفاداری پایه برای اشخاص.</p>
       </div>
-      <button class="btn btn-ghost" type="button" :disabled="loading" @click="load">
+      <button class="btn ghost" type="button" :disabled="loading" @click="load">
         بروزرسانی
       </button>
     </header>
@@ -145,7 +145,7 @@ onMounted(load);
       <h2>سطوح</h2>
       <ul class="tiers">
         <li v-for="t in tiers" :key="t.id">
-          <span class="swatch" :style="{ background: t.color || '#ccc' }" />
+          <span class="swatch" :style="{ background: t.color || '#cbd5e1' }" />
           <strong>{{ t.name }}</strong>
           <span class="muted">از {{ t.minPoints }} امتیاز</span>
           <span class="muted">{{ t.memberCount ?? 0 }} عضو</span>
@@ -160,12 +160,12 @@ onMounted(load);
         <input v-model="tierName" type="text" placeholder="نام سطح" required minlength="2" />
         <input v-model.number="tierMin" type="number" min="0" placeholder="حداقل امتیاز" />
         <input v-model="tierColor" type="text" placeholder="رنگ (مثلاً #d4af37)" />
-        <button class="btn" type="submit" :disabled="saving">
+        <button class="btn primary" type="submit" :disabled="saving">
           {{ editingTierId ? 'به‌روزرسانی سطح' : 'سطح جدید' }}
         </button>
         <button
           v-if="editingTierId"
-          class="btn btn-ghost"
+          class="btn ghost"
           type="button"
           @click="resetTierForm"
         >
@@ -178,8 +178,8 @@ onMounted(load);
       <div class="row">
         <h2>اعضا</h2>
         <form class="search" @submit.prevent="load">
-          <input v-model="q" type="search" placeholder="جستجو…" />
-          <button class="btn btn-ghost" type="submit">جستجو</button>
+          <UiIcon name="search" :size="18" />
+          <input v-model="q" type="search" placeholder="جستجو در اعضا…" />
         </form>
       </div>
 
@@ -191,7 +191,7 @@ onMounted(load);
           </option>
         </select>
         <input v-model.number="adjustDelta" type="number" step="1" />
-        <button class="btn" type="submit" :disabled="saving">تغییر امتیاز</button>
+        <button class="btn primary" type="submit" :disabled="saving">تغییر امتیاز</button>
       </form>
 
       <div class="table-wrap">
@@ -212,7 +212,7 @@ onMounted(load);
                 <span
                   v-if="m.loyaltyTier"
                   class="tier-pill"
-                  :style="{ borderColor: m.loyaltyTier.color || '#ccc' }"
+                  :style="{ borderColor: m.loyaltyTier.color || '#cbd5e1' }"
                 >
                   {{ m.loyaltyTier.name }}
                 </span>
@@ -222,7 +222,7 @@ onMounted(load);
             </tr>
           </tbody>
         </table>
-        <p v-if="!members.length && !loading" class="muted">عضوی نیست.</p>
+        <p v-if="!members.length && !loading" class="muted empty-msg">عضوی نیست.</p>
       </div>
     </section>
   </section>
@@ -232,110 +232,250 @@ onMounted(load);
 .page {
   display: grid;
   gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
 }
+
 .page-head {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
+  align-items: flex-start;
 }
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+
+.head-copy {
+  min-width: 0;
 }
+
 h1 {
-  margin: 0.2rem 0;
-}
-.lead,
-.muted {
-  color: var(--muted);
-}
-.panel {
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: 1rem;
-  background: #fff;
-  display: grid;
-  gap: 0.75rem;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
+
 h2 {
   margin: 0;
-  font-size: 1.1rem;
+  font-size: 1.05rem;
+  color: #0f172a;
 }
+
+.lead,
+.muted {
+  margin: 0;
+  color: #64748b;
+}
+
+.panel {
+  border-radius: 18px;
+  padding: 1rem 1.05rem;
+  background: #fff;
+  display: grid;
+  gap: 0.85rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  min-width: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
 .tiers {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 0.45rem;
+  gap: 0.5rem;
 }
+
 .tiers li {
   display: flex;
   flex-wrap: wrap;
   gap: 0.55rem;
   align-items: center;
+  padding: 0.55rem 0.65rem;
+  background: #f8fafc;
+  border-radius: 12px;
 }
+
 .swatch {
   width: 12px;
   height: 12px;
   border-radius: 999px;
+  flex-shrink: 0;
 }
+
 .tier-form,
 .adjust,
-.search,
 .row {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: 0.55rem;
   align-items: center;
 }
+
 .row {
   justify-content: space-between;
 }
-input,
-select {
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 0.55rem 0.7rem;
+
+.search {
+  flex: 1 1 200px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0 0.85rem;
+  color: #94a3b8;
+}
+
+.search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.75rem 0;
   font: inherit;
 }
+
+input,
+select {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.65rem 0.85rem;
+  font: inherit;
+  background: #fff;
+  min-width: 0;
+}
+
 .table-wrap {
   overflow-x: auto;
+  min-width: 0;
 }
+
 table {
   width: 100%;
   border-collapse: collapse;
+  min-width: 480px;
 }
+
 th,
 td {
   text-align: right;
-  padding: 0.55rem 0.4rem;
-  border-bottom: 1px solid var(--line);
+  padding: 0.65rem 0.5rem;
+  border-bottom: 1px solid #f1f5f9;
   font-size: 0.92rem;
 }
+
+th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
+}
+
 .tier-pill {
   display: inline-block;
   border: 1px solid;
   border-radius: 999px;
-  padding: 0.1rem 0.55rem;
+  padding: 0.15rem 0.55rem;
   font-size: 0.82rem;
+  font-weight: 700;
+  color: #0f766e;
+  background: #f0fdfa;
 }
+
 .link {
   background: none;
   border: none;
-  color: var(--accent);
+  color: #0f766e;
   cursor: pointer;
   font: inherit;
   padding: 0;
+  font-weight: 700;
 }
+
 .danger {
-  color: #b42318;
+  color: #b91c1c;
 }
+
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
+
 .ok {
-  color: #067647;
+  margin: 0;
+  color: #047857;
+}
+
+.empty-msg {
+  padding: 0.75rem 0;
+  text-align: center;
+}
+
+@media (max-width: 900px) {
+  .row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .search {
+    flex: 1 1 auto;
+    width: 100%;
+  }
+}
+
+@media (max-width: 700px) {
+  .page-head {
+    flex-direction: column;
+  }
+
+  .page-head .btn.ghost {
+    width: 100%;
+  }
+
+  .tier-form,
+  .adjust {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .tier-form input,
+  .tier-form select,
+  .adjust input,
+  .adjust select,
+  .tier-form .btn,
+  .adjust .btn {
+    width: 100%;
+  }
 }
 </style>
diff --git a/apps/web/src/views/PersonFormView.vue b/apps/web/src/views/PersonFormView.vue
index 6a9f92a..deda26b 100644
--- a/apps/web/src/views/PersonFormView.vue
+++ b/apps/web/src/views/PersonFormView.vue
@@ -1,588 +1,479 @@
 <script setup lang="ts">
-
 import { computed, onMounted, ref } from 'vue';
-
 import { RouterLink, useRoute, useRouter } from 'vue-router';
-
 import axios from 'axios';
-
 import { api } from '@/lib/api';
-
 import type { CompanyDto, CreatePersonRequest, PersonDto, PersonMood } from '@mento/shared';
 import { PERSON_MOOD_LABELS, PERSON_MOODS } from '@/lib/person-mood';
 import CustomFieldsSection from '@/components/CustomFieldsSection.vue';
 import CustomerMoodFace from '@/components/CustomerMoodFace.vue';
 import EntityTimeline from '@/components/EntityTimeline.vue';
 import MentoMemoryPanel from '@/components/MentoMemoryPanel.vue';
-
-
+import UiIcon from '@/components/UiIcon.vue';
 
 const route = useRoute();
-
 const router = useRouter();
-
 const id = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
-
 const isNew = computed(() => route.name === 'person-new');
-
-
+const pageTitle = computed(() => (isNew.value ? 'شخص جدید' : 'ویرایش شخص'));
 
 const loading = ref(false);
-
 const saving = ref(false);
-
 const error = ref('');
-
 const companies = ref<CompanyDto[]>([]);
 
-
-
 const firstName = ref('');
-
 const lastName = ref('');
-
 const email = ref('');
-
 const phone = ref('');
-
 const mobile = ref('');
-
 const position = ref('');
-
 const notes = ref('');
-
 const companyId = ref('');
 const mood = ref<PersonMood>('newcomer');
 const customFields = ref<Record<string, unknown>>({});
 const loyaltyPoints = ref(0);
 const loyaltyTierName = ref('');
 
-
+const backTo = computed(() =>
+  isNew.value ? { name: 'contacts' as const } : { name: 'person-detail' as const, params: { id: id.value } },
+);
 
 function fill(p: PersonDto) {
-
   firstName.value = p.firstName;
-
   lastName.value = p.lastName;
-
   email.value = p.email ?? '';
-
   phone.value = p.phone ?? '';
-
   mobile.value = p.mobile ?? '';
-
   position.value = p.position ?? '';
-
   notes.value = p.notes ?? '';
-
   companyId.value = p.company?.id ?? '';
   mood.value = p.mood || 'newcomer';
   customFields.value = { ...(p.customFields ?? {}) };
   loyaltyPoints.value = p.loyaltyPoints ?? 0;
   loyaltyTierName.value = p.loyaltyTier?.name ?? '';
-
 }
 
-
-
 async function load() {
-
   loading.value = true;
-
   error.value = '';
-
   try {
-
     const companiesRes = await api.get<{ items: CompanyDto[] }>('/companies', {
-
       params: { limit: 100 },
-
     });
-
     companies.value = companiesRes.data.items;
-
     if (!isNew.value && id.value) {
-
       const { data } = await api.get<PersonDto>(`/people/${id.value}`);
-
       fill(data);
-
     }
-
   } catch {
-
     error.value = 'بارگذاری فرم ناموفق بود.';
-
   } finally {
-
     loading.value = false;
-
   }
-
 }
 
-
-
 function payload(): CreatePersonRequest {
-
   return {
-
     firstName: firstName.value,
-
     lastName: lastName.value,
-
     email: email.value || undefined,
-
     phone: phone.value || undefined,
-
     mobile: mobile.value || undefined,
-
     position: position.value || undefined,
-
     notes: notes.value || undefined,
-
     companyId: companyId.value || null,
     mood: mood.value,
     customFields: customFields.value,
-
   };
-
 }
 
-
-
 async function submit() {
-
   saving.value = true;
-
   error.value = '';
-
   try {
-
     if (isNew.value) {
-
       const { data } = await api.post<PersonDto>('/people', payload());
-
       await router.replace({ name: 'person-detail', params: { id: data.id } });
-
     } else {
-
       await api.patch(`/people/${id.value}`, payload());
-
       await router.push({ name: 'person-detail', params: { id: id.value } });
-
     }
-
   } catch (e) {
-
     if (axios.isAxiosError(e)) {
-
       if (!e.response) {
-
         error.value = 'اتصال به سرور برقرار نشد.';
-
       } else {
-
         const msg = (e.response.data as { message?: string | string[] })?.message;
-
         error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ذخیره ناموفق بود');
-
       }
-
     } else {
-
       error.value = 'ذخیره ناموفق بود';
-
     }
-
   } finally {
-
     saving.value = false;
-
   }
-
 }
 
-
-
 async function remove() {
-
   if (!id.value || !confirm('این شخص حذف شود؟')) return;
-
   try {
-
     await api.delete(`/people/${id.value}`);
-
     await router.push({ name: 'contacts' });
-
   } catch {
-
     error.value = 'حذف ناموفق بود';
-
   }
-
 }
 
-
+function cancel() {
+  void router.push(backTo.value);
+}
 
 onMounted(load);
-
 </script>
 
-
-
 <template>
-
   <section class="page">
-
-    <header class="page-head">
-
-      <div>
-
-        <p class="eyebrow">شخص</p>
-
-        <h1>{{ isNew ? 'شخص جدید' : 'ویرایش شخص' }}</h1>
-
+    <header class="desktop-head">
+      <div class="title-block">
+        <span class="doc-ico"><UiIcon name="user" :size="22" /></span>
+        <div>
+          <h1>{{ pageTitle }}</h1>
+          <p class="crumb">
+            <RouterLink :to="{ name: 'contacts' }">مخاطبین</RouterLink>
+            <span>›</span>
+            <strong>{{ pageTitle }}</strong>
+          </p>
+        </div>
+      </div>
+      <div class="desk-actions">
+        <button class="btn primary" type="button" :disabled="saving" @click="submit">
+          <UiIcon name="check-plain" :size="16" />
+          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
+        </button>
+        <button class="btn cancel" type="button" :disabled="saving" @click="cancel">انصراف</button>
+        <button v-if="!isNew" class="btn danger" type="button" :disabled="saving" @click="remove">
+          حذف
+        </button>
       </div>
-
-      <RouterLink
-        class="btn btn-ghost"
-        :to="isNew ? { name: 'contacts' } : { name: 'person-detail', params: { id } }"
-      >بازگشت</RouterLink>
-
     </header>
 
-
+    <header class="mobile-head">
+      <button class="icon-btn" type="button" aria-label="ذخیره" :disabled="saving" @click="submit">
+        <UiIcon name="check-plain" :size="22" />
+      </button>
+      <h1>{{ pageTitle }}</h1>
+      <button class="icon-btn" type="button" aria-label="بستن" @click="cancel">
+        <UiIcon name="x" :size="20" />
+      </button>
+    </header>
 
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
-
-    <form v-else class="form-card" @submit.prevent="submit">
-
-      <div class="grid">
-
-        <div class="field">
-
-          <label for="firstName">نام</label>
-
-          <input id="firstName" v-model="firstName" required />
-
-        </div>
-
-        <div class="field">
-
-          <label for="lastName">نام خانوادگی</label>
-
-          <input id="lastName" v-model="lastName" required />
-
-        </div>
-
-        <div class="field">
-
-          <label for="mobile">موبایل</label>
-
-          <input id="mobile" v-model="mobile" inputmode="tel" />
-
-        </div>
-
-        <div class="field">
-
-          <label for="phone">تلفن</label>
-
-          <input id="phone" v-model="phone" inputmode="tel" />
-
-        </div>
-
-        <div class="field">
-
-          <label for="email">ایمیل</label>
-
-          <input id="email" v-model="email" type="email" />
-
-        </div>
-
-        <div class="field">
-
-          <label for="position">سمت</label>
-
-          <input id="position" v-model="position" />
-
-        </div>
-
-        <div class="field wide">
-
-          <label>وضعیت مشتری</label>
-
-          <div class="moods">
-            <button
-              v-for="item in PERSON_MOODS"
-              :key="item"
-              class="mood"
-              type="button"
-              :class="{ on: mood === item }"
-              @click="mood = item"
-            >
-              <CustomerMoodFace :mood="item" :size="44" />
-              <span>{{ PERSON_MOOD_LABELS[item] }}</span>
-            </button>
+    <form v-else class="form" @submit.prevent="submit">
+      <section class="card">
+        <div class="grid">
+          <div class="field">
+            <label for="firstName">نام</label>
+            <input id="firstName" v-model="firstName" required />
+          </div>
+          <div class="field">
+            <label for="lastName">نام خانوادگی</label>
+            <input id="lastName" v-model="lastName" required />
+          </div>
+          <div class="field">
+            <label for="mobile">موبایل</label>
+            <input id="mobile" v-model="mobile" inputmode="tel" />
+          </div>
+          <div class="field">
+            <label for="phone">تلفن</label>
+            <input id="phone" v-model="phone" inputmode="tel" />
+          </div>
+          <div class="field">
+            <label for="email">ایمیل</label>
+            <input id="email" v-model="email" type="email" />
+          </div>
+          <div class="field">
+            <label for="position">سمت</label>
+            <input id="position" v-model="position" />
+          </div>
+          <div class="field wide">
+            <label>وضعیت مشتری</label>
+            <div class="moods">
+              <button
+                v-for="item in PERSON_MOODS"
+                :key="item"
+                class="mood"
+                type="button"
+                :class="{ on: mood === item }"
+                @click="mood = item"
+              >
+                <CustomerMoodFace :mood="item" :size="44" />
+                <span>{{ PERSON_MOOD_LABELS[item] }}</span>
+              </button>
+            </div>
+          </div>
+          <div class="field wide">
+            <label for="companyId">شرکت</label>
+            <select id="companyId" v-model="companyId">
+              <option value="">بدون شرکت</option>
+              <option v-for="c in companies" :key="c.id" :value="c.id">{{ c.name }}</option>
+            </select>
+          </div>
+          <div class="field wide">
+            <label for="notes">یادداشت</label>
+            <textarea id="notes" v-model="notes" rows="4" />
+          </div>
+          <div v-if="!isNew" class="field wide loyalty-box">
+            <p class="muted">باشگاه مشتریان</p>
+            <p>
+              {{ loyaltyPoints }} امتیاز
+              <span v-if="loyaltyTierName"> · سطح {{ loyaltyTierName }}</span>
+            </p>
+            <RouterLink :to="{ name: 'loyalty' }">مدیریت باشگاه</RouterLink>
           </div>
-
         </div>
-
-        <div class="field wide">
-
-          <label for="companyId">شرکت</label>
-
-          <select id="companyId" v-model="companyId">
-
-            <option value="">بدون شرکت</option>
-
-            <option v-for="c in companies" :key="c.id" :value="c.id">{{ c.name }}</option>
-
-          </select>
-
-        </div>
-
-        <div class="field wide">
-
-          <label for="notes">یادداشت</label>
-
-          <textarea id="notes" v-model="notes" rows="4" />
-
-        </div>
-
-        <div v-if="!isNew" class="field wide loyalty-box">
-          <p class="muted">باشگاه مشتریان</p>
-          <p>
-            {{ loyaltyPoints }} امتیاز
-            <span v-if="loyaltyTierName"> · سطح {{ loyaltyTierName }}</span>
-          </p>
-          <RouterLink :to="{ name: 'loyalty' }">مدیریت باشگاه</RouterLink>
-        </div>
-
-      </div>
-
-
+      </section>
 
       <CustomFieldsSection entity-type="person" v-model="customFields" />
-
       <MentoMemoryPanel v-if="!isNew && id" :person-id="id" />
-
-      <EntityTimeline
-        v-if="!isNew && id"
-        entity-type="person"
-        :entity-id="id"
-      />
+      <EntityTimeline v-if="!isNew && id" entity-type="person" :entity-id="id" />
 
       <p v-if="error" class="error">{{ error }}</p>
 
-
-
-      <div class="form-actions">
-
-        <button class="btn" type="submit" :disabled="saving">
-
+      <div class="mobile-actions">
+        <button class="btn primary" type="submit" :disabled="saving">
           {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
-
         </button>
-
-        <button
-
-          v-if="!isNew"
-
-          class="btn btn-danger"
-
-          type="button"
-
-          :disabled="saving"
-
-          @click="remove"
-
-        >
-
+        <button v-if="!isNew" class="btn danger" type="button" :disabled="saving" @click="remove">
           حذف
-
         </button>
-
       </div>
-
     </form>
-
   </section>
-
 </template>
 
-
-
 <style scoped>
-
 .page {
-
   display: grid;
-
-  gap: 1.1rem;
-
+  gap: 0.85rem;
   max-width: 820px;
-
+  min-width: 0;
+  padding-bottom: 1.5rem;
 }
 
-
-
-.page-head {
-
-  display: flex;
-
+.desktop-head {
+  display: none;
   justify-content: space-between;
-
   gap: 1rem;
-
-  align-items: flex-start;
-
+  align-items: center;
 }
 
-
-
-.eyebrow {
-
-  margin: 0;
-
-  color: var(--accent);
-
-  font-weight: 700;
-
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
-
+.doc-ico {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: #ecfdf5;
+  color: #0f766e;
+}
 
 h1 {
+  margin: 0;
+  font-size: 1.35rem;
+}
 
+.crumb {
   margin: 0.2rem 0 0;
-
-  font-size: 1.7rem;
-
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
 }
 
-
-
-.muted {
-
-  color: var(--muted);
-
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
 }
 
+.desk-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
 
-
-.form-card {
-
-  background: var(--surface);
-
-  border: 1px solid var(--line);
-
-  border-radius: var(--radius);
-
-  box-shadow: var(--shadow);
-
-  padding: 1.2rem;
-
+.mobile-head {
   display: grid;
-
-  gap: 1rem;
-
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
 }
 
+.mobile-head h1 {
+  text-align: center;
+  font-size: 1.05rem;
+}
 
+.icon-btn {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: none;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.form {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.card {
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.95rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
 
 .grid {
-
   display: grid;
-
   grid-template-columns: repeat(2, minmax(0, 1fr));
-
-  gap: 0.9rem;
-
+  gap: 0.85rem;
 }
 
+.field {
+  display: grid;
+  gap: 0.35rem;
+}
 
-
-.wide {
-
+.field.wide {
   grid-column: 1 / -1;
-
 }
 
+.field label {
+  color: #64748b;
+  font-size: 0.88rem;
+  font-weight: 700;
+}
 
-
-select,
-
-textarea {
-
-  border: 1px solid var(--line);
-
-  border-radius: 12px;
-
-  padding: 0.8rem 0.95rem;
-
-  background: #fff;
-
-  font: inherit;
-
+.field input,
+.field select,
+.field textarea {
   width: 100%;
-
-}
-
-
-
-.form-actions {
-
-  display: flex;
-
-  gap: 0.6rem;
-
-  flex-wrap: wrap;
-
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.7rem 0.85rem;
+  font: inherit;
+  background: #fff;
 }
 
 .moods {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.55rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
 .mood {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  min-height: 56px;
-  padding: 0.4rem 0.65rem;
+  display: grid;
+  justify-items: center;
+  gap: 0.25rem;
   border: 1px solid #e2e8f0;
-  border-radius: 14px;
   background: #fff;
-  font: inherit;
-  text-align: start;
+  border-radius: 14px;
+  padding: 0.45rem 0.55rem;
   cursor: pointer;
+  font: inherit;
+  color: #64748b;
+  font-size: 0.75rem;
 }
 
 .mood.on {
   border-color: #14b8a6;
-  background: #ecfdf5;
-  box-shadow: 0 0 0 3px #ccfbf1;
+  background: #f0fdfa;
+  color: #0f766e;
+  font-weight: 700;
 }
 
-@media (min-width: 700px) {
-  .moods {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+.loyalty-box {
+  background: #f8fafc;
+  border-radius: 12px;
+  padding: 0.75rem 0.85rem;
+}
+
+.loyalty-box a {
+  color: #0f766e;
+  font-weight: 700;
+}
+
+.muted {
+  color: #64748b;
+  margin: 0;
+}
+
+.error {
+  color: #b91c1c;
+  margin: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.cancel {
+  background: #fff;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+.btn.danger {
+  background: #fff;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.mobile-actions {
+  display: grid;
+  gap: 0.5rem;
+}
+
+@media (min-width: 960px) {
+  .desktop-head {
+    display: flex;
+  }
+
+  .mobile-head,
+  .mobile-actions {
+    display: none;
   }
 }
 
 @media (max-width: 700px) {
-
   .grid {
-
     grid-template-columns: 1fr;
-
   }
-
 }
-
 </style>
-
-
diff --git a/apps/web/src/views/ProductsSettingsView.vue b/apps/web/src/views/ProductsSettingsView.vue
index 8324563..93842b8 100644
--- a/apps/web/src/views/ProductsSettingsView.vue
+++ b/apps/web/src/views/ProductsSettingsView.vue
@@ -103,14 +103,13 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">تنظیمات</p>
+      <div class="head-copy">
         <h1>محصولات و خدمات</h1>
-        <p class="muted">کاتالوگ محصول برای افزودن به معاملات.</p>
+        <p class="lead">کاتالوگ محصول برای افزودن به معاملات.</p>
       </div>
     </header>
 
-    <form class="form-card" @submit.prevent="createProduct">
+    <form class="panel" @submit.prevent="createProduct">
       <h2>محصول جدید</h2>
       <div class="grid">
         <div class="field">
@@ -138,7 +137,7 @@ onMounted(load);
           <input id="p-desc" v-model="description" />
         </div>
       </div>
-      <button class="btn" type="submit" :disabled="saving">
+      <button class="btn primary" type="submit" :disabled="saving">
         {{ saving ? 'در حال ثبت…' : 'افزودن محصول' }}
       </button>
     </form>
@@ -173,42 +172,61 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 920px;
+  min-width: 0;
+  overflow-x: clip;
 }
 
-.page-head h1 {
-  margin: 0.2rem 0 0.35rem;
-  font-size: 1.7rem;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+  flex-wrap: wrap;
 }
 
-.eyebrow {
+.head-copy {
+  min-width: 0;
+}
+
+h1 {
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
+}
+
+.lead,
+.muted,
+.meta {
   margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+  color: #64748b;
 }
 
-.muted {
-  color: var(--muted);
+.error {
+  margin: 0;
+  color: #b91c1c;
 }
 
-.form-card,
+.panel,
 .row {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
   padding: 1.1rem;
 }
 
-.form-card {
+.panel {
   display: grid;
   gap: 0.9rem;
 }
 
-.form-card h2 {
+.panel h2 {
   margin: 0;
   font-size: 1.05rem;
+  font-weight: 700;
+  color: #0f172a;
 }
 
 .grid {
@@ -221,8 +239,14 @@ onMounted(load);
   grid-column: 1 / -1;
 }
 
-input {
-  border: 1px solid var(--line);
+.field label {
+  color: #64748b;
+  font-size: 0.9rem;
+}
+
+input,
+select {
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.8rem 0.95rem;
   background: #fff;
@@ -230,6 +254,39 @@ input {
   width: 100%;
 }
 
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn-ghost {
+  background: #fff;
+  color: #0f766e;
+  border: 1px solid #99f6e4;
+  box-shadow: none;
+}
+
+.btn-danger {
+  background: #fff;
+  color: #b91c1c;
+  border: 1px solid #fecaca;
+  box-shadow: none;
+}
+
 .list {
   display: grid;
   gap: 0.7rem;
@@ -243,8 +300,7 @@ input {
 }
 
 .meta {
-  margin: 0.25rem 0 0;
-  color: var(--muted);
+  margin-top: 0.25rem;
   font-size: 0.92rem;
 }
 
@@ -263,5 +319,9 @@ input {
     flex-direction: column;
     align-items: stretch;
   }
+
+  .actions {
+    flex-direction: column;
+  }
 }
 </style>
diff --git a/apps/web/src/views/ProjectBoardView.vue b/apps/web/src/views/ProjectBoardView.vue
index cdce752..82ff239 100644
--- a/apps/web/src/views/ProjectBoardView.vue
+++ b/apps/web/src/views/ProjectBoardView.vue
@@ -4,6 +4,7 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { useAuthStore } from '@/stores/auth';
+import UiIcon from '@/components/UiIcon.vue';
 import type {
   ProjectBoardBoardDto,
   ProjectBoardDto,
@@ -143,35 +144,20 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
-    <header class="page-head">
-      <div>
-        <p class="eyebrow">پس‌ازفروش</p>
-        <h1>{{ board?.board.name || 'کاریز پروژه' }}</h1>
-        <p class="lead">
-          کارهای داخلی و تحویل را روی برد جابه‌جا کنید.
-          <span v-if="board">{{ cardCount }} کارت</span>
-        </p>
+  <section class="page" dir="rtl">
+    <header class="toolbar">
+      <div class="title-block">
+        <span class="brand-ico" aria-hidden="true">
+          <UiIcon name="grid" :size="18" />
+        </span>
+        <div class="title-copy">
+          <h1>{{ board?.board.name || 'کاریز پروژه' }}</h1>
+          <p v-if="board" class="sub">{{ cardCount }} کارت</p>
+        </div>
       </div>
-      <div class="actions">
-        <button class="btn btn-ghost" type="button" :disabled="loading" @click="load">
-          بروزرسانی
-        </button>
-        <RouterLink
-          class="btn"
-          :to="{
-            name: 'project-card-new',
-            query: selectedBoardId ? { boardId: selectedBoardId } : undefined,
-          }"
-        >
-          کارت جدید
-        </RouterLink>
-      </div>
-    </header>
 
-    <div class="pipeline-bar">
-      <label class="picker">
-        <span>برد</span>
+      <label class="board-pick">
+        <span class="sr">انتخاب برد</span>
         <select
           :value="selectedBoardId"
           :disabled="loading || !boards.length"
@@ -181,16 +167,33 @@ onMounted(load);
             {{ b.name }}{{ b.isDefault ? ' (پیش‌فرض)' : '' }}
           </option>
         </select>
+        <UiIcon class="chev" name="chevron" :size="16" />
       </label>
-      <button
-        v-if="canCreateBoard"
-        class="btn btn-ghost"
-        type="button"
-        @click="showCreate = !showCreate"
-      >
-        برد جدید
-      </button>
-    </div>
+
+      <div class="toolbar-actions">
+        <button class="btn-ghost-sm" type="button" :disabled="loading" @click="load">
+          بروزرسانی
+        </button>
+        <button
+          v-if="canCreateBoard"
+          class="btn-ghost-sm"
+          type="button"
+          @click="showCreate = !showCreate"
+        >
+          برد جدید
+        </button>
+        <RouterLink
+          class="btn primary"
+          :to="{
+            name: 'project-card-new',
+            query: selectedBoardId ? { boardId: selectedBoardId } : undefined,
+          }"
+        >
+          <UiIcon name="plus" :size="16" />
+          کارت جدید
+        </RouterLink>
+      </div>
+    </header>
 
     <form
       v-if="showCreate && canCreateBoard"
@@ -205,10 +208,10 @@ onMounted(load);
         required
         minlength="2"
       />
-      <button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
+      <button class="btn primary" type="submit" :disabled="saving || newName.trim().length < 2">
         {{ saving ? 'در حال ساخت…' : 'ساخت' }}
       </button>
-      <button class="btn btn-ghost" type="button" @click="showCreate = false">انصراف</button>
+      <button class="btn-ghost-sm" type="button" @click="showCreate = false">انصراف</button>
     </form>
 
     <p v-if="error" class="error">{{ error }}</p>
@@ -225,8 +228,11 @@ onMounted(load);
         @drop="onDrop(stage.id, $event)"
       >
         <div class="column-head">
-          <h2>{{ stage.name }}</h2>
-          <span>{{ stage.cards.length }}</span>
+          <div class="title-wrap">
+            <span class="dot" aria-hidden="true" />
+            <h2>{{ stage.name }}</h2>
+          </div>
+          <span class="count">{{ stage.cards.length }}</span>
         </div>
         <div class="cards">
           <article
@@ -258,134 +264,330 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1rem;
-  min-width: 0;
-}
-.page-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: flex-start;
-  flex-wrap: wrap;
-}
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
-}
-h1 {
-  margin: 0.2rem 0;
-  font-size: 1.85rem;
-}
-.lead,
-.muted {
-  color: var(--muted);
-}
-.actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.pipeline-bar {
-  display: flex;
-  flex-wrap: wrap;
   gap: 0.65rem;
-  align-items: center;
+  min-width: 0;
+  overflow-x: clip;
+  direction: rtl;
+  text-align: right;
 }
-.picker {
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.65rem;
+  margin-bottom: 0.35rem;
+}
+
+.title-block {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  flex: 1 1 200px;
+  gap: 0.55rem;
+  margin-inline-end: 0.25rem;
   min-width: 0;
-  color: var(--muted);
-  font-size: 0.9rem;
 }
-.picker select {
-  flex: 1;
+
+.brand-ico {
+  width: 2.15rem;
+  height: 2.15rem;
+  border-radius: 10px;
+  display: grid;
+  place-items: center;
+  background: #0f766e;
+  color: #fff;
+  flex-shrink: 0;
+}
+
+.title-copy {
   min-width: 0;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.65rem 0.85rem;
+}
+
+h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: #0f172a;
+}
+
+.sub,
+.muted {
+  margin: 0.1rem 0 0;
+  color: #64748b;
+  font-size: 0.82rem;
+}
+
+.board-pick {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-width: 140px;
+}
+
+.board-pick select {
+  appearance: none;
+  border: 1px solid #e2e8f0;
   background: #fff;
+  border-radius: 12px;
+  padding: 0.55rem 2rem 0.55rem 0.85rem;
+  font: inherit;
+  font-weight: 600;
+  color: #0f172a;
+  min-width: 150px;
+  cursor: pointer;
+}
+
+.board-pick .chev {
+  position: absolute;
+  left: 0.65rem;
+  pointer-events: none;
+  color: #94a3b8;
+  transform: rotate(-90deg);
+}
+
+.toolbar-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  margin-inline-start: auto;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn-ghost-sm {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+  color: #0f766e;
+  border-radius: 10px;
+  padding: 0.45rem 0.75rem;
+  font-weight: 700;
+  font-size: 0.85rem;
+  cursor: pointer;
   font: inherit;
 }
+
 .create-box {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   align-items: center;
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.85rem 1rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }
+
 .create-box input {
   flex: 1 1 180px;
-  border: 1px solid var(--line);
+  min-width: 0;
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.65rem 0.85rem;
+  background: #fff;
   font: inherit;
 }
+
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
+
 .board {
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(240px, 280px);
-  gap: 0.85rem;
+  display: flex;
+  gap: 0.75rem;
   overflow-x: auto;
-  padding-bottom: 0.5rem;
+  padding-bottom: 0.75rem;
+  scroll-snap-type: x proximity;
+  min-width: 0;
 }
+
 .column {
-  background: #f6f7f9;
-  border: 1px solid var(--line);
-  border-radius: 16px;
-  padding: 0.75rem;
-  min-height: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  flex: 1 1 0;
+  min-height: 420px;
+  padding: 0.35rem 0.15rem 0.5rem;
+  border-radius: 18px;
+  border: 1px solid transparent;
+  background: transparent;
+  transition: background 0.15s ease, border-color 0.15s ease;
 }
+
 .column.drop {
-  outline: 2px dashed var(--accent);
+  background: color-mix(in srgb, #ccfbf1 70%, transparent);
+  border-color: #99f6e4;
 }
+
 .column-head {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.65rem;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.15rem 0.25rem;
 }
+
+.title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.dot {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: 999px;
+  background: #14b8a6;
+  flex: 0 0 auto;
+}
+
 .column-head h2 {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.98rem;
+  font-weight: 800;
+  color: #0f172a;
 }
-.column-head span {
-  color: var(--muted);
-  font-size: 0.85rem;
+
+.count {
+  font-size: 0.78rem;
+  color: #64748b;
+  font-weight: 600;
+  white-space: nowrap;
 }
+
 .cards {
-  display: grid;
-  gap: 0.55rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  flex: 1;
+  min-height: 4rem;
 }
+
 .card {
   background: #fff;
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.7rem 0.8rem;
+  border: 1px solid color-mix(in srgb, #e2e8f0 70%, transparent);
+  border-radius: 16px;
+  padding: 0.95rem 1rem;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
   cursor: grab;
+  transition:
+    box-shadow 0.18s ease,
+    border-color 0.18s ease,
+    opacity 0.18s ease;
+  min-width: 0;
 }
+
+.card:hover {
+  border-color: color-mix(in srgb, #14b8a6 28%, #e2e8f0);
+  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.07);
+}
+
 .card.dragging {
   opacity: 0.55;
 }
+
 .card h3 {
   margin: 0 0 0.35rem;
   font-size: 0.98rem;
+  font-weight: 800;
   cursor: pointer;
+  color: #0f172a;
 }
+
 .meta {
   margin: 0.15rem 0 0;
-  color: var(--muted);
+  color: #64748b;
   font-size: 0.82rem;
 }
+
 .empty {
-  margin: 0.5rem 0 0;
-  color: var(--muted);
-  font-size: 0.85rem;
+  margin: 1rem 0;
   text-align: center;
+  color: #64748b;
+  font-size: 0.85rem;
+}
+
+.sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+
+@media (max-width: 900px) {
+  .toolbar {
+    align-items: stretch;
+  }
+
+  .title-block {
+    width: 100%;
+  }
+
+  .board-pick,
+  .toolbar-actions {
+    flex: 1 1 auto;
+  }
+
+  .board-pick select {
+    width: 100%;
+  }
+
+  .toolbar-actions {
+    margin-inline-start: 0;
+    width: 100%;
+  }
+
+  .toolbar-actions .btn.primary {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .column {
+    flex: 0 0 auto;
+    width: min(320px, 86vw);
+    min-width: min(320px, 86vw);
+    scroll-snap-align: start;
+  }
+}
+
+@media (max-width: 700px) {
+  .column {
+    width: 88vw;
+    min-width: 88vw;
+    min-height: 360px;
+  }
+
+  .create-box {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .create-box input,
+  .create-box .btn,
+  .create-box .btn-ghost-sm {
+    width: 100%;
+  }
 }
 </style>
diff --git a/apps/web/src/views/ProjectCardFormView.vue b/apps/web/src/views/ProjectCardFormView.vue
index e45255a..3bed159 100644
--- a/apps/web/src/views/ProjectCardFormView.vue
+++ b/apps/web/src/views/ProjectCardFormView.vue
@@ -4,10 +4,12 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import type { ProjectCardDto } from '@mento/shared';
+import UiIcon from '@/components/UiIcon.vue';
 
 const route = useRoute();
 const router = useRouter();
 const isNew = computed(() => route.name === 'project-card-new');
+const pageTitle = computed(() => (isNew.value ? 'کارت جدید' : 'ویرایش کارت'));
 
 const loading = ref(false);
 const saving = ref(false);
@@ -78,42 +80,74 @@ async function removeCard() {
   }
 }
 
+function cancel() {
+  void router.push({ name: 'projects' });
+}
+
 onMounted(load);
 </script>
 
 <template>
   <section class="page">
-    <header class="page-head">
-      <div>
-        <RouterLink class="back" :to="{ name: 'projects' }">← بازگشت به برد</RouterLink>
-        <h1>{{ isNew ? 'کارت جدید' : 'ویرایش کارت' }}</h1>
+    <header class="desktop-head">
+      <div class="title-block">
+        <span class="doc-ico"><UiIcon name="document" :size="22" /></span>
+        <div>
+          <h1>{{ pageTitle }}</h1>
+          <p class="crumb">
+            <RouterLink :to="{ name: 'projects' }">پروژه‌ها</RouterLink>
+            <span>›</span>
+            <strong>{{ pageTitle }}</strong>
+          </p>
+        </div>
       </div>
+      <div class="desk-actions">
+        <button
+          class="btn primary"
+          type="button"
+          :disabled="saving || title.trim().length < 2"
+          @click="save"
+        >
+          {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
+        </button>
+        <button class="btn cancel" type="button" @click="cancel">انصراف</button>
+        <button v-if="!isNew" class="btn danger" type="button" @click="removeCard">حذف</button>
+      </div>
+    </header>
+
+    <header class="mobile-head">
+      <button
+        class="icon-btn"
+        type="button"
+        aria-label="ذخیره"
+        :disabled="saving || title.trim().length < 2"
+        @click="save"
+      >
+        <UiIcon name="check-plain" :size="22" />
+      </button>
+      <h1>{{ pageTitle }}</h1>
+      <button class="icon-btn" type="button" aria-label="بستن" @click="cancel">
+        <UiIcon name="x" :size="20" />
+      </button>
     </header>
 
     <p v-if="error" class="error">{{ error }}</p>
     <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <form v-else class="form" @submit.prevent="save">
-      <label>
-        عنوان
-        <input v-model="title" type="text" required minlength="2" maxlength="200" />
-      </label>
-      <label>
-        یادداشت
-        <textarea v-model="notes" rows="5" maxlength="4000" />
-      </label>
-      <div class="actions">
-        <button class="btn" type="submit" :disabled="saving || title.trim().length < 2">
+    <form v-else class="card" @submit.prevent="save">
+      <div class="field">
+        <label for="card-title">عنوان</label>
+        <input id="card-title" v-model="title" type="text" required minlength="2" maxlength="200" />
+      </div>
+      <div class="field">
+        <label for="card-notes">یادداشت</label>
+        <textarea id="card-notes" v-model="notes" rows="5" maxlength="4000" />
+      </div>
+      <div class="mobile-actions">
+        <button class="btn primary" type="submit" :disabled="saving || title.trim().length < 2">
           {{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
         </button>
-        <button
-          v-if="!isNew"
-          class="btn btn-ghost danger"
-          type="button"
-          @click="removeCard"
-        >
-          حذف
-        </button>
+        <button v-if="!isNew" class="btn danger" type="button" @click="removeCard">حذف</button>
       </div>
     </form>
   </section>
@@ -122,67 +156,168 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1rem;
+  gap: 0.85rem;
   max-width: 640px;
   min-width: 0;
   width: 100%;
 }
-.back {
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 0.9rem;
+
+.desktop-head {
+  display: none;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: center;
 }
+
+.title-block {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.doc-ico {
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: #ecfdf5;
+  color: #0f766e;
+}
+
 h1 {
-  margin: 0.35rem 0 0;
+  margin: 0;
+  font-size: 1.35rem;
 }
-.form {
+
+.crumb {
+  margin: 0.2rem 0 0;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
+}
+
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.desk-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.mobile-head {
+  display: grid;
+  grid-template-columns: 40px 1fr 40px;
+  align-items: center;
+}
+
+.mobile-head h1 {
+  text-align: center;
+  font-size: 1.05rem;
+}
+
+.icon-btn {
+  width: 40px;
+  height: 40px;
+  border: 0;
+  background: none;
+  color: #0f766e;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.card {
   display: grid;
   gap: 0.85rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
 }
-label {
+
+.field {
   display: grid;
   gap: 0.35rem;
-  color: var(--muted);
-  font-size: 0.9rem;
 }
+
+.field label {
+  color: #64748b;
+  font-size: 0.88rem;
+  font-weight: 700;
+}
+
 input,
 textarea {
   width: 100%;
   min-width: 0;
-  max-width: 100%;
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.7rem 0.85rem;
   font: inherit;
-  color: var(--ink);
 }
-.actions {
-  display: flex;
-  flex-wrap: wrap;
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.cancel {
+  background: #fff;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+.btn.danger {
+  background: #fff;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.mobile-actions {
+  display: grid;
   gap: 0.5rem;
 }
 
-@media (max-width: 900px) {
-  h1 {
-    font-size: 1.35rem;
-  }
-
-  .actions {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .actions .btn {
-    width: 100%;
-  }
-}
 .error {
-  color: #b42318;
+  color: #b91c1c;
+  margin: 0;
 }
+
 .muted {
-  color: var(--muted);
+  color: #64748b;
+  margin: 0;
 }
-.danger {
-  color: #b42318;
+
+@media (min-width: 960px) {
+  .desktop-head {
+    display: flex;
+  }
+
+  .mobile-head,
+  .mobile-actions {
+    display: none;
+  }
 }
 </style>
diff --git a/apps/web/src/views/QuoteFormView.vue b/apps/web/src/views/QuoteFormView.vue
index c5ee2ea..08a591e 100644
--- a/apps/web/src/views/QuoteFormView.vue
+++ b/apps/web/src/views/QuoteFormView.vue
@@ -229,15 +229,19 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head no-print">
-      <div>
-        <RouterLink class="back" :to="{ name: 'quotes' }">← بازگشت به لیست</RouterLink>
+      <div class="head-copy">
+        <p class="crumb">
+          <RouterLink :to="{ name: 'quotes' }">پیش‌فاکتورها</RouterLink>
+          <span>›</span>
+          <strong>{{ isNew ? 'پیش‌فاکتور جدید' : number || 'پیش‌فاکتور' }}</strong>
+        </p>
         <h1>{{ isNew ? 'پیش‌فاکتور جدید' : number || 'پیش‌فاکتور' }}</h1>
       </div>
       <div class="head-actions">
-        <button v-if="!isNew" class="btn btn-ghost" type="button" @click="printQuote">چاپ</button>
+        <button v-if="!isNew" class="btn ghost" type="button" @click="printQuote">چاپ</button>
         <RouterLink
           v-if="!isNew && id"
-          class="btn btn-ghost"
+          class="btn ghost"
           :to="{ name: 'invoice-new', query: { fromQuoteId: id } }"
         >
           صدور فاکتور
@@ -336,8 +340,9 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 860px;
+  min-width: 0;
 }
 
 .page-head {
@@ -347,26 +352,60 @@ onMounted(load);
   align-items: flex-start;
 }
 
+.head-copy {
+  min-width: 0;
+}
+
+.crumb {
+  margin: 0 0 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
+}
+
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
+  text-decoration: none;
+}
+
 .head-actions {
   display: flex;
   gap: 0.5rem;
   flex-wrap: wrap;
 }
 
-.back {
-  color: var(--muted);
-  text-decoration: none;
-  font-size: 0.9rem;
+h1 {
+  margin: 0;
+  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
+  font-weight: 800;
 }
 
-h1 {
-  margin: 0.25rem 0 0;
+.btn.ghost {
+  display: inline-flex;
+  align-items: center;
+  background: #fff;
+  color: #0f766e;
+  border: 1px solid #99f6e4;
+  border-radius: 12px;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  text-decoration: none;
 }
 
 .form,
 .lines-block {
   display: grid;
   gap: 0.85rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
 }
 
 .grid {
diff --git a/apps/web/src/views/QuotesView.vue b/apps/web/src/views/QuotesView.vue
index cabc86f..8a64116 100644
--- a/apps/web/src/views/QuotesView.vue
+++ b/apps/web/src/views/QuotesView.vue
@@ -4,6 +4,8 @@ import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
 import { formatMoney } from '@/lib/money';
+import { toFaDigits } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
 import type { PaginatedResponse, QuoteDto, QuoteStatus } from '@mento/shared';
 
 const route = useRoute();
@@ -19,6 +21,7 @@ const status = ref<QuoteStatus | 'all'>(
     ? (route.query.status as QuoteStatus)
     : 'all',
 );
+const filterOpen = ref(false);
 
 const statusLabel: Record<QuoteStatus, string> = {
   draft: 'پیش‌نویس',
@@ -29,10 +32,15 @@ const statusLabel: Record<QuoteStatus, string> = {
 };
 
 const items = computed(() => data.value?.items ?? []);
+const listEmpty = computed(() => !loading.value && !items.value.length);
+const statusFilterLabel = computed(() =>
+  status.value === 'all' ? 'همه وضعیت‌ها' : statusLabel[status.value],
+);
 
 async function load() {
   loading.value = true;
   error.value = '';
+  filterOpen.value = false;
   try {
     const { data: res } = await api.get<PaginatedResponse<QuoteDto>>('/quotes', {
       params: {
@@ -55,7 +63,7 @@ async function load() {
 }
 
 function onSearch() {
-  router.replace({
+  void router.replace({
     name: 'quotes',
     query: {
       ...route.query,
@@ -65,6 +73,12 @@ function onSearch() {
   });
 }
 
+function setStatus(next: QuoteStatus | 'all') {
+  status.value = next;
+  filterOpen.value = false;
+  onSearch();
+}
+
 watch(
   () => [route.query.q, route.query.status, route.query.dealId],
   () => {
@@ -82,136 +96,485 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
+  <section class="page" @click="filterOpen = false">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">مالی سبک</p>
+      <div class="head-copy">
         <h1>پیش‌فاکتورها</h1>
         <p class="lead">از روی معامله یا جداگانه پیش‌فاکتور بسازید و وضعیت را پیگیری کنید.</p>
       </div>
-      <RouterLink class="btn" :to="{ name: 'quote-new', query: route.query }">پیش‌فاکتور جدید</RouterLink>
+      <RouterLink class="add-btn" :to="{ name: 'quote-new', query: route.query }" aria-label="پیش‌فاکتور جدید">
+        <span>+</span>
+      </RouterLink>
     </header>
 
-    <form class="toolbar" @submit.prevent="onSearch">
-      <input v-model="q" type="search" placeholder="جستجو در عنوان یا شماره…" />
-      <select v-model="status" @change="onSearch">
-        <option value="all">همه وضعیت‌ها</option>
-        <option v-for="(label, key) in statusLabel" :key="key" :value="key">{{ label }}</option>
-      </select>
-      <button class="btn btn-ghost" type="submit">جستجو</button>
-    </form>
+    <div class="tools">
+      <form class="search" @submit.prevent="onSearch">
+        <UiIcon name="search" :size="18" />
+        <input v-model="q" type="search" placeholder="جستجو در عنوان یا شماره…" />
+      </form>
+      <div class="filter-wrap" @click.stop>
+        <button class="btn ghost filter-btn" type="button" @click="filterOpen = !filterOpen">
+          <UiIcon name="filter" :size="16" />
+          <span class="btn-full">{{ statusFilterLabel }}</span>
+          <span class="btn-short">وضعیت</span>
+          <UiIcon name="chevron" :size="14" class="chev" />
+        </button>
+        <div v-if="filterOpen" class="popover">
+          <button type="button" :class="{ on: status === 'all' }" @click="setStatus('all')">
+            همه وضعیت‌ها
+          </button>
+          <button
+            v-for="(label, key) in statusLabel"
+            :key="key"
+            type="button"
+            :class="{ on: status === key }"
+            @click="setStatus(key as QuoteStatus)"
+          >
+            {{ label }}
+          </button>
+        </div>
+      </div>
+    </div>
 
     <p v-if="error" class="error">{{ error }}</p>
     <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <div v-else class="list">
-      <RouterLink
-        v-for="quote in items"
-        :key="quote.id"
-        class="row"
-        :to="{ name: 'quote-detail', params: { id: quote.id } }"
-      >
-        <div>
-          <strong>{{ quote.title }}</strong>
-          <p class="muted">
-            {{ quote.number }}
-            · {{ statusLabel[quote.status as QuoteStatus] || quote.status }}
-            <span v-if="quote.person"> · {{ quote.person.fullName }}</span>
+    <div v-else-if="listEmpty" class="empty-card">
+      <div class="art" aria-hidden="true">
+        <svg viewBox="0 0 168 148" fill="none">
+          <rect x="38" y="18" width="92" height="112" rx="16" fill="#E7F6F3" />
+          <rect x="50" y="32" width="68" height="84" rx="10" fill="#fff" />
+          <path d="M62 52h28" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 68h36" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 84h22" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <circle cx="118" cy="112" r="20" fill="#14b8a6" />
+          <path d="M118 104v16M110 112h16" stroke="#fff" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </div>
+      <h2>هنوز پیش‌فاکتوری نیست</h2>
+      <p>اولین پیش‌فاکتور را بسازید تا پیشنهادهای قیمت اینجا جمع شوند.</p>
+      <RouterLink class="btn primary wide" :to="{ name: 'quote-new', query: route.query }">
+        <span>+</span>
+        پیش‌فاکتور جدید
+      </RouterLink>
+    </div>
+
+    <template v-else>
+      <div class="list-head">
+        <strong>{{ toFaDigits(items.length) }} پیش‌فاکتور</strong>
+      </div>
+
+      <div class="table-wrap desktop-only">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>عنوان</th>
+              <th>شماره</th>
+              <th>وضعیت</th>
+              <th>مشتری / معامله</th>
+              <th>مبلغ</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="quote in items" :key="quote.id">
+              <td>
+                <RouterLink class="title" :to="{ name: 'quote-detail', params: { id: quote.id } }">
+                  {{ quote.title }}
+                </RouterLink>
+              </td>
+              <td class="muted">{{ quote.number }}</td>
+              <td>
+                <span class="badge" :class="quote.status">
+                  {{ statusLabel[quote.status as QuoteStatus] || quote.status }}
+                </span>
+              </td>
+              <td class="muted">
+                <span v-if="quote.person">{{ quote.person.fullName }}</span>
+                <span v-if="quote.person && quote.deal"> · </span>
+                <span v-if="quote.deal">{{ quote.deal.title }}</span>
+                <span v-if="!quote.person && !quote.deal">—</span>
+              </td>
+              <td>
+                <strong>{{ formatMoney(quote.totalAmount, quote.currency) }}</strong>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="cards mobile-only">
+        <RouterLink
+          v-for="quote in items"
+          :key="quote.id"
+          class="m-card"
+          :to="{ name: 'quote-detail', params: { id: quote.id } }"
+        >
+          <div class="m-top">
+            <strong>{{ quote.title }}</strong>
+            <span class="badge" :class="quote.status">
+              {{ statusLabel[quote.status as QuoteStatus] || quote.status }}
+            </span>
+          </div>
+          <p class="muted">{{ quote.number }}</p>
+          <p v-if="quote.person || quote.deal" class="meta">
+            <span v-if="quote.person">{{ quote.person.fullName }}</span>
             <span v-if="quote.deal"> · {{ quote.deal.title }}</span>
           </p>
-        </div>
-        <strong class="amount">{{ formatMoney(quote.totalAmount, quote.currency) }}</strong>
-      </RouterLink>
-      <p v-if="!items.length" class="empty">هنوز پیش‌فاکتوری نیست.</p>
-    </div>
+          <div class="m-foot">
+            <strong>{{ formatMoney(quote.totalAmount, quote.currency) }}</strong>
+          </div>
+        </RouterLink>
+      </div>
+    </template>
   </section>
 </template>
 
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
 }
 
 .page-head {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
-  flex-wrap: wrap;
   align-items: flex-start;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 .lead,
-.muted {
-  color: var(--muted);
-}
-
-.toolbar {
-  display: flex;
-  gap: 0.55rem;
-  flex-wrap: wrap;
-}
-
-.toolbar input,
-.toolbar select {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.7rem 0.85rem;
-  font: inherit;
-  background: #fff;
-  min-width: 0;
-  flex: 1;
-}
-
-.list {
-  display: grid;
-  gap: 0.55rem;
-}
-
-.row {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: center;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.9rem 1rem;
-  text-decoration: none;
-  color: inherit;
-}
-
-.row p {
-  margin: 0.25rem 0 0;
-}
-
-.amount {
-  white-space: nowrap;
-}
-
-.empty,
-.error {
+.muted,
+.error,
+.meta {
   margin: 0;
 }
 
-.error {
-  color: #b42318;
+.lead,
+.muted,
+.meta {
+  color: #64748b;
 }
 
-.empty {
-  padding: 1rem;
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
-  color: var(--muted);
+.error {
+  color: #b91c1c;
+}
+
+.add-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
+  display: grid;
+  place-items: center;
+  text-decoration: none;
+  font-size: 1.6rem;
+  font-weight: 700;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
+  flex-shrink: 0;
+}
+
+.tools {
+  display: flex;
+  gap: 0.55rem;
+  align-items: center;
+}
+
+.search {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0 0.85rem;
+  color: #94a3b8;
+}
+
+.search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.75rem 0;
+  font: inherit;
+}
+
+.filter-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
+.btn.wide {
+  width: min(100%, 320px);
+}
+
+.filter-btn .chev {
+  transform: rotate(90deg);
+}
+
+.btn-short {
+  display: none;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-end: 0;
+  min-width: 11rem;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  padding: 0.35rem;
+  display: grid;
+  z-index: 8;
+}
+
+.popover button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border: 0;
+  background: none;
+  padding: 0.6rem 0.7rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.popover button:hover,
+.popover button.on {
+  background: #f0fdfa;
+  color: #0f766e;
+}
+
+.empty-card {
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
+  padding: 2.4rem 1.2rem 2rem;
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: 0.7rem;
+}
+
+.art svg {
+  width: 148px;
+  height: auto;
+  display: block;
+}
+
+.empty-card h2 {
+  margin: 0.2rem 0 0;
+  font-size: 1.15rem;
+}
+
+.empty-card > p {
+  max-width: 22rem;
+  color: #94a3b8;
+  line-height: 1.8;
+}
+
+.list-head {
+  color: #0f766e;
+}
+
+.table-wrap {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  overflow: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 640px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 0.9rem 1rem;
+  text-align: start;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.data-table th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
+  background: #f8fafc;
+}
+
+.title {
+  color: #0f172a;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.title:hover {
+  color: #0f766e;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #475569;
+  white-space: nowrap;
+}
+
+.badge.draft {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.badge.sent {
+  background: #ecfeff;
+  color: #0e7490;
+}
+
+.badge.accepted {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.badge.rejected {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.badge.expired {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.desktop-only {
+  display: block;
+}
+
+.mobile-only {
+  display: none;
+}
+
+.cards {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.m-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.95rem 1rem;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
+  text-decoration: none;
+  color: inherit;
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.m-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.6rem;
+  align-items: flex-start;
+}
+
+.m-top strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.m-foot {
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 900px) {
+  .page-head {
+    align-items: center;
+  }
+
+  .tools {
+    flex-wrap: wrap;
+  }
+
+  .search {
+    flex: 1 1 100%;
+  }
+
+  .btn-full {
+    display: none;
+  }
+
+  .btn-short {
+    display: inline;
+  }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: grid;
+  }
+}
+
+@media (max-width: 520px) {
+  .add-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .m-card {
+    padding: 0.85rem;
+  }
 }
 </style>
diff --git a/apps/web/src/views/ReportsView.vue b/apps/web/src/views/ReportsView.vue
index fcaa773..f4af333 100644
--- a/apps/web/src/views/ReportsView.vue
+++ b/apps/web/src/views/ReportsView.vue
@@ -68,23 +68,22 @@ onMounted(() => {
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">مدیریت</p>
+      <div class="head-copy">
         <h1>گزارشات و داشبورد</h1>
         <p class="lead">نمای یک‌صفحه‌ای فروش، فعالیت، تیم و پشتیبانی.</p>
       </div>
     </header>
 
     <form class="toolbar" @submit.prevent="load">
-      <label>
-        از
+      <label class="field">
+        <span>از</span>
         <JalaliDateInput v-model="from" />
       </label>
-      <label>
-        تا
+      <label class="field">
+        <span>تا</span>
         <JalaliDateInput v-model="to" />
       </label>
-      <button class="btn" type="submit" :disabled="loading">اعمال</button>
+      <button class="btn primary" type="submit" :disabled="loading">اعمال</button>
       <a
         v-if="org"
         class="portal-link"
@@ -116,7 +115,7 @@ onMounted(() => {
           <strong>{{ data.sales.winRate }}٪</strong>
           <small>{{ data.sales.lostCount }} باخت</small>
         </article>
-        <article>
+        <article class="accent">
           <span>اشخاص جدید</span>
           <strong>{{ data.peopleCreated }}</strong>
           <small>در بازه</small>
@@ -126,28 +125,30 @@ onMounted(() => {
       <div class="grid">
         <section class="panel">
           <h2>قیف فروش (باز)</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>مرحله</th>
-                <th>تعداد</th>
-                <th>مبلغ</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="s in data.funnel" :key="s.stageId">
-                <td>
-                  {{ s.stageName }}
-                  <span class="muted"> · {{ s.pipelineName }}</span>
-                </td>
-                <td>{{ s.count }}</td>
-                <td>{{ money(s.amount) }}</td>
-              </tr>
-              <tr v-if="!data.funnel.length">
-                <td colspan="3" class="muted">داده‌ای نیست</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>مرحله</th>
+                  <th>تعداد</th>
+                  <th>مبلغ</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="s in data.funnel" :key="s.stageId">
+                  <td>
+                    {{ s.stageName }}
+                    <span class="muted"> · {{ s.pipelineName }}</span>
+                  </td>
+                  <td>{{ s.count }}</td>
+                  <td>{{ money(s.amount) }}</td>
+                </tr>
+                <tr v-if="!data.funnel.length">
+                  <td colspan="3" class="muted">داده‌ای نیست</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </section>
 
         <section class="panel">
@@ -166,25 +167,27 @@ onMounted(() => {
 
         <section class="panel">
           <h2>تیم</h2>
-          <table>
-            <thead>
-              <tr>
-                <th>کاربر</th>
-                <th>برد</th>
-                <th>فعالیت انجام‌شده</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="u in data.team" :key="u.userId">
-                <td>{{ u.fullName }}</td>
-                <td>{{ u.wonCount }} · {{ money(u.wonAmount) }}</td>
-                <td>{{ u.activitiesDone }}</td>
-              </tr>
-              <tr v-if="!data.team.length">
-                <td colspan="3" class="muted">داده‌ای نیست</td>
-              </tr>
-            </tbody>
-          </table>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th>کاربر</th>
+                  <th>برد</th>
+                  <th>فعالیت انجام‌شده</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="u in data.team" :key="u.userId">
+                  <td>{{ u.fullName }}</td>
+                  <td>{{ u.wonCount }} · {{ money(u.wonAmount) }}</td>
+                  <td>{{ u.activitiesDone }}</td>
+                </tr>
+                <tr v-if="!data.team.length">
+                  <td colspan="3" class="muted">داده‌ای نیست</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </section>
 
         <section class="panel">
@@ -212,46 +215,102 @@ onMounted(() => {
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
+}
+
+h2 {
+  margin: 0 0 0.85rem;
+  font-size: 1.05rem;
+  color: #0f172a;
 }
 
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }
 
 .toolbar {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: 0.65rem;
   align-items: end;
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.95rem 1rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }
 
-.toolbar label {
+.field {
   display: grid;
-  gap: 0.25rem;
+  gap: 0.3rem;
   font-size: 0.85rem;
-  color: var(--muted);
+  color: #64748b;
+  min-width: 0;
+}
+
+.field span {
+  font-weight: 700;
 }
 
 .toolbar :deep(.trigger) {
   min-width: 11.5rem;
 }
 
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .portal-link {
   margin-inline-start: auto;
-  color: var(--accent);
+  color: #0f766e;
   font-size: 0.9rem;
+  font-weight: 700;
+  text-decoration: none;
+  align-self: center;
+}
+
+.portal-link:hover {
+  color: #14b8a6;
 }
 
 .kpis {
@@ -261,22 +320,33 @@ h1 {
 }
 
 .kpis article {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.9rem 1rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem 1.05rem;
   display: grid;
   gap: 0.25rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  min-width: 0;
+}
+
+.kpis article.accent {
+  background: linear-gradient(135deg, #f0fdfa 0%, #fff 100%);
+  border: 1px solid #99f6e4;
 }
 
 .kpis span,
 .kpis small {
-  color: var(--muted);
+  color: #64748b;
   font-size: 0.85rem;
 }
 
 .kpis strong {
   font-size: 1.15rem;
+  color: #0f172a;
+}
+
+.kpis .accent strong {
+  color: #0f766e;
 }
 
 .grid {
@@ -286,28 +356,36 @@ h1 {
 }
 
 .panel {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem 1.05rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  min-width: 0;
 }
 
-.panel h2 {
-  margin: 0 0 0.75rem;
-  font-size: 1.05rem;
+.table-wrap {
+  overflow-x: auto;
+  min-width: 0;
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
   font-size: 0.92rem;
+  min-width: 0;
 }
 
 th,
 td {
   text-align: start;
-  padding: 0.45rem 0.25rem;
-  border-bottom: 1px solid var(--line);
+  padding: 0.55rem 0.35rem;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
 }
 
 .stats {
@@ -315,17 +393,47 @@ td {
   padding: 0;
   list-style: none;
   display: grid;
-  gap: 0.35rem;
+  gap: 0.4rem;
+  color: #334155;
 }
 
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
 
 @media (max-width: 900px) {
-  .kpis,
+  .kpis {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .grid {
     grid-template-columns: 1fr;
   }
+
+  .portal-link {
+    margin-inline-start: 0;
+    width: 100%;
+  }
+}
+
+@media (max-width: 700px) {
+  .kpis {
+    grid-template-columns: 1fr;
+  }
+
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .field :deep(.trigger) {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .btn.primary {
+    width: 100%;
+  }
 }
 </style>
diff --git a/apps/web/src/views/SalesForecastView.vue b/apps/web/src/views/SalesForecastView.vue
index 229e508..60268bf 100644
--- a/apps/web/src/views/SalesForecastView.vue
+++ b/apps/web/src/views/SalesForecastView.vue
@@ -139,15 +139,14 @@ onMounted(() => {
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">فروش</p>
+      <div class="head-copy">
         <h1>هدف و پیش‌بینی</h1>
         <p class="lead">
           هدف ماهانه را بگذارید و تحقق، کاریز باز و پیش‌بینی ساده را ببینید.
           <span v-if="!showAllHint"> اعداد بر اساس پرونده‌های شماست.</span>
         </p>
       </div>
-      <RouterLink class="btn btn-ghost" :to="{ name: 'home' }">خانه</RouterLink>
+      <RouterLink class="btn ghost" :to="{ name: 'home' }">خانه</RouterLink>
     </header>
 
     <p v-if="error" class="error">{{ error }}</p>
@@ -234,7 +233,7 @@ onMounted(() => {
           <input v-model="notes" maxlength="2000" />
         </div>
       </div>
-      <button class="btn" type="submit" :disabled="saving">
+      <button class="btn primary" type="submit" :disabled="saving">
         {{ saving ? 'در حال ذخیره…' : 'ثبت هدف' }}
       </button>
     </form>
@@ -252,7 +251,7 @@ onMounted(() => {
               <span v-else> · سازمانی</span>
             </p>
           </div>
-          <button class="btn btn-ghost" type="button" @click="removeGoal(g.id)">
+          <button class="btn ghost" type="button" @click="removeGoal(g.id)">
             حذف
           </button>
         </div>
@@ -265,8 +264,10 @@ onMounted(() => {
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 920px;
+  min-width: 0;
+  overflow-x: clip;
 }
 
 .page-head {
@@ -277,99 +278,147 @@ onMounted(() => {
   align-items: flex-start;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 h2 {
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.85rem;
   font-size: 1.05rem;
+  color: #0f172a;
 }
 
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.primary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
 }
 
 .metrics {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.65rem;
+  gap: 0.75rem;
 }
 
 .metrics article {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.85rem 1rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 0.95rem 1.05rem;
   display: grid;
   gap: 0.25rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  min-width: 0;
 }
 
 .metrics .accent {
-  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
+  background: linear-gradient(135deg, #f0fdfa 0%, #fff 100%);
+  border: 1px solid #99f6e4;
+}
+
+.metrics .accent strong {
+  color: #0f766e;
 }
 
 .label {
   margin: 0;
-  color: var(--muted);
+  color: #64748b;
   font-size: 0.85rem;
 }
 
 .progress-block {
   display: grid;
-  gap: 0.45rem;
+  gap: 0.5rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem 1.05rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
 }
 
 .progress-head {
   display: flex;
   justify-content: space-between;
   gap: 0.5rem;
+  color: #0f766e;
+  font-weight: 700;
 }
 
 .bar {
   height: 10px;
   border-radius: 999px;
-  background: color-mix(in srgb, var(--line) 80%, #fff);
+  background: #e2e8f0;
   overflow: hidden;
 }
 
 .fill {
   height: 100%;
-  background: var(--accent);
+  background: linear-gradient(90deg, #14b8a6, #0f766e);
   border-radius: 999px;
   min-width: 0;
+  transition: width 0.3s ease;
 }
 
 .period {
-  margin: 0;
   font-size: 0.9rem;
 }
 
 .form-card,
 .goals {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem 1.05rem;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
+  min-width: 0;
 }
 
 .grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0.7rem;
+  gap: 0.75rem;
   margin-bottom: 0.85rem;
 }
 
 .field {
   display: grid;
   gap: 0.3rem;
+  min-width: 0;
 }
 
 .field.wide {
@@ -377,23 +426,25 @@ h2 {
 }
 
 label {
-  color: var(--muted);
+  color: #64748b;
   font-size: 0.9rem;
+  font-weight: 700;
 }
 
 input,
 select {
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.7rem 0.85rem;
   font: inherit;
   background: #fff;
   width: 100%;
+  min-width: 0;
 }
 
 .goal-list {
   display: grid;
-  gap: 0.5rem;
+  gap: 0.55rem;
 }
 
 .goal-row {
@@ -401,9 +452,11 @@ select {
   justify-content: space-between;
   gap: 0.75rem;
   align-items: center;
-  padding: 0.7rem 0.8rem;
-  border: 1px solid var(--line);
-  border-radius: 12px;
+  padding: 0.75rem 0.85rem;
+  border: 1px solid #f1f5f9;
+  border-radius: 14px;
+  background: #f8fafc;
+  min-width: 0;
 }
 
 .goal-row p {
@@ -416,24 +469,40 @@ select {
 }
 
 .error {
-  color: #b42318;
+  color: #b91c1c;
 }
 
 .empty {
-  color: var(--muted);
+  color: #64748b;
 }
 
-@media (max-width: 800px) {
-  .metrics,
-  .grid {
-    grid-template-columns: 1fr 1fr;
+@media (max-width: 900px) {
+  .metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-@media (max-width: 520px) {
+@media (max-width: 700px) {
   .metrics,
   .grid {
     grid-template-columns: 1fr;
   }
+
+  .page-head {
+    flex-direction: column;
+  }
+
+  .page-head .btn.ghost {
+    width: 100%;
+  }
+
+  .goal-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .goal-row .btn.ghost {
+    width: 100%;
+  }
 }
 </style>
diff --git a/apps/web/src/views/TahesabSettingsView.vue b/apps/web/src/views/TahesabSettingsView.vue
index 3f88921..fe3298a 100644
--- a/apps/web/src/views/TahesabSettingsView.vue
+++ b/apps/web/src/views/TahesabSettingsView.vue
@@ -213,13 +213,14 @@ onMounted(load);
 
 <template>
   <section class="page">
-    <header>
-      <p class="eyebrow">تنظیمات</p>
-      <h1>اتصال ته‌حساب</h1>
-      <p class="lead">
-        هر نسخه/دیتابیس ته‌حساب یک اتصال جدا است (آدرس وب‌سرویس + توکن + نام DB).
-        اگر فقط یک اتصال دارید، همان به‌عنوان پیش‌فرض استفاده می‌شود.
-      </p>
+    <header class="page-head">
+      <div class="head-copy">
+        <h1>اتصال ته‌حساب</h1>
+        <p class="lead">
+          هر نسخه/دیتابیس ته‌حساب یک اتصال جدا است (آدرس وب‌سرویس + توکن + نام DB).
+          اگر فقط یک اتصال دارید، همان به‌عنوان پیش‌فرض استفاده می‌شود.
+        </p>
+      </div>
     </header>
 
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
@@ -300,7 +301,7 @@ onMounted(load);
         پذیرش گواهی SSL خودامضا (فقط شبکه داخلی)
       </label>
       <div class="form-actions">
-        <button class="btn" type="submit" :disabled="saving">
+        <button class="btn primary" type="submit" :disabled="saving">
           {{ saving ? 'در حال ذخیره…' : editingId ? 'به‌روزرسانی' : 'افزودن' }}
         </button>
         <button v-if="editingId" type="button" class="btn ghost" @click="resetForm">انصراف</button>
@@ -354,124 +355,185 @@ onMounted(load);
   display: grid;
   gap: 1rem;
   max-width: 720px;
+  min-width: 0;
+  overflow-x: clip;
 }
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
 }
+
+.head-copy {
+  min-width: 0;
+}
+
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
+
 h2 {
   margin: 0;
   font-size: 1.05rem;
+  font-weight: 700;
+  color: #0f172a;
 }
+
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }
+
 .list {
   display: grid;
   gap: 0.75rem;
 }
+
 .card {
   display: grid;
   gap: 0.75rem;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  padding: 1.1rem;
 }
+
 .row {
   grid-template-columns: 1fr auto;
   align-items: start;
   gap: 0.75rem;
 }
+
 .row-main {
   display: grid;
   gap: 0.25rem;
+  min-width: 0;
 }
+
 .meta {
   font-size: 0.85rem;
-  color: var(--muted);
+  color: #64748b;
 }
+
 .health.ok {
   color: #15803d;
   font-size: 0.85rem;
 }
+
 .health.bad {
   color: #b91c1c;
   font-size: 0.85rem;
 }
+
 .row-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.35rem;
 }
+
 .field {
   display: grid;
   gap: 0.35rem;
 }
+
 label {
-  color: var(--muted);
+  color: #64748b;
   font-size: 0.9rem;
 }
+
 input[type='text'],
 input:not([type]),
 input[type='password'],
-input[type='url'] {
-  border: 1px solid var(--line);
-  border-radius: 10px;
+input[type='url'],
+input[type='number'] {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
   padding: 0.55rem 0.7rem;
-  background: var(--bg);
-  color: var(--text);
+  background: #fff;
+  color: #0f172a;
+  font: inherit;
+  width: 100%;
 }
+
+select {
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0.55rem 0.7rem;
+  background: #fff;
+  color: #0f172a;
+  font: inherit;
+  width: 100%;
+}
+
 .check {
   display: flex;
   align-items: center;
   gap: 0.45rem;
-  color: var(--text);
+  color: #0f172a;
 }
+
 .form-actions {
   display: flex;
   gap: 0.5rem;
+  flex-wrap: wrap;
 }
+
 .btn {
-  border: 0;
-  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
   padding: 0.55rem 0.9rem;
-  background: var(--accent);
-  color: #fff;
-  font-weight: 600;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
   cursor: pointer;
+  font: inherit;
 }
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
 .btn.ghost {
-  background: transparent;
-  color: var(--text);
-  border: 1px solid var(--line);
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+  box-shadow: none;
 }
+
 .btn.danger {
-  background: transparent;
+  background: #fff;
   color: #b91c1c;
-  border: 1px solid #fecaca;
+  border-color: #fecaca;
+  box-shadow: none;
 }
+
 .error {
+  margin: 0;
   color: #b91c1c;
 }
+
 .ok {
-  color: #15803d;
-}
-@media (max-width: 640px) {
-  .row {
-    grid-template-columns: 1fr;
-  }
+  margin: 0;
+  color: #0f766e;
+  font-weight: 600;
 }
+
 .sync-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0.5rem;
 }
+
 .sync-results {
   list-style: none;
   margin: 0;
@@ -479,24 +541,30 @@ input[type='url'] {
   display: grid;
   gap: 0.5rem;
 }
+
 .sync-results li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
   padding: 0.5rem 0;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 1px solid #e2e8f0;
 }
-select {
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 0.55rem 0.7rem;
-  background: var(--bg);
-  color: var(--text);
-}
-@media (max-width: 640px) {
+
+@media (max-width: 700px) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+
   .sync-grid {
     grid-template-columns: 1fr;
   }
+
+  .row-actions,
+  .form-actions,
+  .sync-results li {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 </style>
diff --git a/apps/web/src/views/TeamSettingsView.vue b/apps/web/src/views/TeamSettingsView.vue
index 14dd447..4df1815 100644
--- a/apps/web/src/views/TeamSettingsView.vue
+++ b/apps/web/src/views/TeamSettingsView.vue
@@ -153,15 +153,16 @@ onMounted(load);
 
 <template>
   <section class="page">
-    <header>
-      <p class="eyebrow">تنظیمات</p>
-      <h1>تیم و نقش‌ها</h1>
-      <p class="lead">
-        زمینه فعالیت سازمان و کاربران را اینجا مدیریت کنید. تنظیمات سازمانی فقط برای مالک و مدیر است.
-      </p>
+    <header class="page-head">
+      <div class="head-copy">
+        <h1>تیم و نقش‌ها</h1>
+        <p class="lead">
+          زمینه فعالیت سازمان و کاربران را اینجا مدیریت کنید. تنظیمات سازمانی فقط برای مالک و مدیر است.
+        </p>
+      </div>
     </header>
 
-    <form v-if="org" class="invite" @submit.prevent="saveOrg">
+    <form v-if="org" class="panel" @submit.prevent="saveOrg">
       <h2>سازمان</h2>
       <div class="grid">
         <label>
@@ -179,7 +180,7 @@ onMounted(load);
         </label>
       </div>
       <p v-if="orgOk" class="ok">{{ orgOk }}</p>
-      <button v-if="canEditOrg" class="btn" type="submit" :disabled="orgSaving">
+      <button v-if="canEditOrg" class="btn primary" type="submit" :disabled="orgSaving">
         {{ orgSaving ? 'در حال ذخیره…' : 'ذخیره مشخصات سازمان' }}
       </button>
     </form>
@@ -187,7 +188,7 @@ onMounted(load);
     <p v-if="error" class="error">{{ error }}</p>
     <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <form v-if="canInvite" class="invite" @submit.prevent="invite">
+    <form v-if="canInvite" class="panel" @submit.prevent="invite">
       <h2>دعوت کاربر</h2>
       <div class="grid">
         <label>
@@ -211,7 +212,7 @@ onMounted(load);
           </select>
         </label>
       </div>
-      <button class="btn" type="submit" :disabled="saving">
+      <button class="btn primary" type="submit" :disabled="saving">
         {{ saving ? 'در حال ثبت…' : 'افزودن کاربر' }}
       </button>
     </form>
@@ -249,51 +250,66 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.2rem;
+  gap: 1rem;
   max-width: 820px;
+  min-width: 0;
+  overflow-x: clip;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.page-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 .lead,
 .muted {
-  color: var(--muted);
+  margin: 0;
+  color: #64748b;
 }
 
 .error {
-  color: #b42318;
+  margin: 0;
+  color: #b91c1c;
 }
 
 .ok {
   margin: 0;
   color: #0f766e;
   font-size: 0.9rem;
+  font-weight: 600;
 }
 
-.invite,
+.panel,
 .row {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 1rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+  padding: 1.1rem;
 }
 
-.invite {
+.panel {
   display: grid;
   gap: 0.85rem;
 }
 
-.invite h2 {
+.panel h2 {
   margin: 0;
   font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
 }
 
 .grid {
@@ -306,17 +322,36 @@ label {
   display: grid;
   gap: 0.35rem;
   font-size: 0.9rem;
-  color: var(--muted);
+  color: #64748b;
 }
 
 input,
 select {
-  border: 1px solid var(--line);
+  border: 1px solid #e2e8f0;
   border-radius: 12px;
   padding: 0.7rem 0.85rem;
   font: inherit;
   background: #fff;
-  color: var(--text);
+  color: #0f172a;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
 }
 
 .list {
@@ -337,8 +372,8 @@ select {
 }
 
 .role-pill {
-  background: var(--accent-soft);
-  color: var(--accent);
+  background: #f0fdfa;
+  color: #0f766e;
   border-radius: 999px;
   padding: 0.25rem 0.7rem;
   font-size: 0.85rem;
@@ -349,5 +384,10 @@ select {
   .grid {
     grid-template-columns: 1fr;
   }
+
+  .row {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 </style>
diff --git a/apps/web/src/views/TicketFormView.vue b/apps/web/src/views/TicketFormView.vue
index cfb0c34..d5efc57 100644
--- a/apps/web/src/views/TicketFormView.vue
+++ b/apps/web/src/views/TicketFormView.vue
@@ -272,10 +272,12 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head">
-      <div>
-        <RouterLink class="back" :to="{ name: 'tickets' }"
-          >← بازگشت به لیست</RouterLink
-        >
+      <div class="head-copy">
+        <p class="crumb">
+          <RouterLink :to="{ name: 'tickets' }">تیکت‌ها</RouterLink>
+          <span>›</span>
+          <strong>{{ isNew ? 'تیکت جدید' : number || 'تیکت' }}</strong>
+        </p>
         <h1>{{ isNew ? 'تیکت جدید' : number || 'تیکت' }}</h1>
       </div>
     </header>
@@ -459,8 +461,9 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 760px;
+  min-width: 0;
 }
 
 .page-head {
@@ -469,14 +472,29 @@ onMounted(load);
   gap: 1rem;
 }
 
-.back {
-  color: var(--muted);
+.head-copy {
+  min-width: 0;
+}
+
+.crumb {
+  margin: 0 0 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
+}
+
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
   text-decoration: none;
-  font-size: 0.9rem;
 }
 
 h1 {
-  margin: 0.25rem 0 0;
+  margin: 0;
+  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
+  font-weight: 800;
 }
 
 h2 {
@@ -491,11 +509,20 @@ h2 {
   gap: 0.85rem;
 }
 
+.form,
+.thread,
+.csat {
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
+
 .sla-box {
   padding: 0.75rem 1rem;
-  border-radius: var(--radius);
-  border: 1px solid var(--line);
-  background: color-mix(in srgb, var(--accent) 8%, #fff);
+  border-radius: 18px;
+  border: 1px solid #99f6e4;
+  background: #f0fdfa;
   font-size: 0.95rem;
 }
 
diff --git a/apps/web/src/views/TicketsView.vue b/apps/web/src/views/TicketsView.vue
index 5306888..65b4693 100644
--- a/apps/web/src/views/TicketsView.vue
+++ b/apps/web/src/views/TicketsView.vue
@@ -3,6 +3,8 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { RouterLink, useRoute, useRouter } from 'vue-router';
 import axios from 'axios';
 import { api } from '@/lib/api';
+import { toFaDigits } from '@/lib/jalali';
+import UiIcon from '@/components/UiIcon.vue';
 import type {
   PaginatedResponse,
   TicketDto,
@@ -19,13 +21,12 @@ const data = ref<PaginatedResponse<TicketDto> | null>(null);
 const q = ref(typeof route.query.q === 'string' ? route.query.q : '');
 const status = ref<TicketStatus | 'all'>(
   typeof route.query.status === 'string' &&
-    ['open', 'in_progress', 'waiting', 'resolved', 'closed'].includes(
-      route.query.status,
-    )
+    ['open', 'in_progress', 'waiting', 'resolved', 'closed'].includes(route.query.status)
     ? (route.query.status as TicketStatus)
     : 'all',
 );
 const slaOnly = ref(route.query.sla === 'overdue');
+const filterOpen = ref(false);
 
 const statusLabel: Record<TicketStatus, string> = {
   open: 'باز',
@@ -43,6 +44,10 @@ const priorityLabel: Record<TicketPriority, string> = {
 };
 
 const items = computed(() => data.value?.items ?? []);
+const listEmpty = computed(() => !loading.value && !items.value.length);
+const statusFilterLabel = computed(() =>
+  status.value === 'all' ? 'همه وضعیت‌ها' : statusLabel[status.value],
+);
 
 function formatSla(iso: string | null) {
   if (!iso) return '';
@@ -59,18 +64,16 @@ function formatSla(iso: string | null) {
 async function load() {
   loading.value = true;
   error.value = '';
+  filterOpen.value = false;
   try {
-    const { data: res } = await api.get<PaginatedResponse<TicketDto>>(
-      '/tickets',
-      {
-        params: {
-          q: q.value || undefined,
-          status: status.value === 'all' ? undefined : status.value,
-          sla: slaOnly.value ? 'overdue' : undefined,
-          limit: 50,
-        },
+    const { data: res } = await api.get<PaginatedResponse<TicketDto>>('/tickets', {
+      params: {
+        q: q.value || undefined,
+        status: status.value === 'all' ? undefined : status.value,
+        sla: slaOnly.value ? 'overdue' : undefined,
+        limit: 50,
       },
-    );
+    });
     data.value = res;
   } catch (e) {
     if (axios.isAxiosError(e) && !e.response) {
@@ -84,7 +87,7 @@ async function load() {
 }
 
 function onSearch() {
-  router.replace({
+  void router.replace({
     name: 'tickets',
     query: {
       q: q.value.trim() || undefined,
@@ -94,15 +97,24 @@ function onSearch() {
   });
 }
 
+function setStatus(next: TicketStatus | 'all') {
+  status.value = next;
+  filterOpen.value = false;
+  onSearch();
+}
+
+function toggleSla() {
+  slaOnly.value = !slaOnly.value;
+  onSearch();
+}
+
 watch(
   () => [route.query.q, route.query.status, route.query.sla],
   () => {
     q.value = typeof route.query.q === 'string' ? route.query.q : '';
     status.value =
       typeof route.query.status === 'string' &&
-      ['open', 'in_progress', 'waiting', 'resolved', 'closed'].includes(
-        route.query.status,
-      )
+      ['open', 'in_progress', 'waiting', 'resolved', 'closed'].includes(route.query.status)
         ? (route.query.status as TicketStatus)
         : 'all';
     slaOnly.value = route.query.sla === 'overdue';
@@ -114,176 +126,555 @@ onMounted(load);
 </script>
 
 <template>
-  <section class="page">
+  <section class="page" @click="filterOpen = false">
     <header class="page-head">
-      <div>
-        <p class="eyebrow">پشتیبانی</p>
+      <div class="head-copy">
         <h1>تیکت‌ها</h1>
         <p class="lead">درخواست‌های پشتیبانی را ثبت و پیگیری کنید.</p>
       </div>
-      <RouterLink class="btn" :to="{ name: 'ticket-new' }">تیکت جدید</RouterLink>
+      <RouterLink class="add-btn" :to="{ name: 'ticket-new' }" aria-label="تیکت جدید">
+        <span>+</span>
+      </RouterLink>
     </header>
 
-    <form class="toolbar" @submit.prevent="onSearch">
-      <input v-model="q" type="search" placeholder="جستجو در موضوع یا شماره…" />
-      <select v-model="status" @change="onSearch">
-        <option value="all">همه وضعیت‌ها</option>
-        <option v-for="(label, key) in statusLabel" :key="key" :value="key">
-          {{ label }}
-        </option>
-      </select>
-      <label class="check">
-        <input v-model="slaOnly" type="checkbox" @change="onSearch" />
-        فقط تأخیر SLA
-      </label>
-      <button class="btn btn-ghost" type="submit">جستجو</button>
-    </form>
+    <div class="tools">
+      <form class="search" @submit.prevent="onSearch">
+        <UiIcon name="search" :size="18" />
+        <input v-model="q" type="search" placeholder="جستجو در موضوع یا شماره…" />
+      </form>
+      <button
+        class="btn ghost sla-btn"
+        type="button"
+        :class="{ on: slaOnly }"
+        @click="toggleSla"
+      >
+        فقط SLA
+      </button>
+      <div class="filter-wrap" @click.stop>
+        <button class="btn ghost filter-btn" type="button" @click="filterOpen = !filterOpen">
+          <UiIcon name="filter" :size="16" />
+          <span class="btn-full">{{ statusFilterLabel }}</span>
+          <span class="btn-short">وضعیت</span>
+          <UiIcon name="chevron" :size="14" class="chev" />
+        </button>
+        <div v-if="filterOpen" class="popover">
+          <button type="button" :class="{ on: status === 'all' }" @click="setStatus('all')">
+            همه وضعیت‌ها
+          </button>
+          <button
+            v-for="(label, key) in statusLabel"
+            :key="key"
+            type="button"
+            :class="{ on: status === key }"
+            @click="setStatus(key as TicketStatus)"
+          >
+            {{ label }}
+          </button>
+        </div>
+      </div>
+    </div>
 
     <p v-if="error" class="error">{{ error }}</p>
     <p v-else-if="loading" class="muted">در حال بارگذاری…</p>
 
-    <div v-else class="list">
-      <RouterLink
-        v-for="ticket in items"
-        :key="ticket.id"
-        class="row"
-        :class="{ breached: ticket.slaBreached }"
-        :to="{ name: 'ticket-detail', params: { id: ticket.id } }"
-      >
-        <div>
-          <strong>{{ ticket.subject }}</strong>
+    <div v-else-if="listEmpty" class="empty-card">
+      <div class="art" aria-hidden="true">
+        <svg viewBox="0 0 168 148" fill="none">
+          <rect x="38" y="18" width="92" height="112" rx="16" fill="#E7F6F3" />
+          <rect x="50" y="32" width="68" height="84" rx="10" fill="#fff" />
+          <path d="M62 52h28" stroke="#14b8a6" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 68h36" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <path d="M62 84h22" stroke="#99f6e4" stroke-width="4" stroke-linecap="round" />
+          <circle cx="118" cy="112" r="20" fill="#14b8a6" />
+          <path d="M118 104v16M110 112h16" stroke="#fff" stroke-width="3" stroke-linecap="round" />
+        </svg>
+      </div>
+      <h2>هنوز تیکتی نیست</h2>
+      <p>اولین درخواست پشتیبانی را ثبت کنید تا پیگیری‌ها اینجا جمع شوند.</p>
+      <RouterLink class="btn primary wide" :to="{ name: 'ticket-new' }">
+        <span>+</span>
+        تیکت جدید
+      </RouterLink>
+    </div>
+
+    <template v-else>
+      <div class="list-head">
+        <strong>{{ toFaDigits(items.length) }} تیکت</strong>
+      </div>
+
+      <div class="table-wrap desktop-only">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>موضوع</th>
+              <th>شماره</th>
+              <th>وضعیت</th>
+              <th>اولویت</th>
+              <th>مشتری / مسئول</th>
+              <th>SLA</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="ticket in items" :key="ticket.id" :class="{ breached: ticket.slaBreached }">
+              <td>
+                <RouterLink class="title" :to="{ name: 'ticket-detail', params: { id: ticket.id } }">
+                  {{ ticket.subject }}
+                </RouterLink>
+              </td>
+              <td class="muted">{{ ticket.number }}</td>
+              <td>
+                <span class="badge" :class="ticket.status">
+                  {{ statusLabel[ticket.status as TicketStatus] || ticket.status }}
+                </span>
+              </td>
+              <td>
+                <span class="prio" :class="ticket.priority">
+                  {{ priorityLabel[ticket.priority as TicketPriority] || ticket.priority }}
+                </span>
+              </td>
+              <td class="muted">
+                <span v-if="ticket.person">{{ ticket.person.fullName }}</span>
+                <span v-if="ticket.person && ticket.assignee"> · </span>
+                <span v-if="ticket.assignee">{{ ticket.assignee.fullName }}</span>
+                <span v-if="!ticket.person && !ticket.assignee">—</span>
+              </td>
+              <td>
+                <span v-if="ticket.slaBreached" class="sla bad">تأخیر SLA</span>
+                <span v-else-if="ticket.firstRespondedAt" class="sla ok">پاسخ داده شد</span>
+                <span v-else-if="ticket.slaDueAt" class="sla">مهلت {{ formatSla(ticket.slaDueAt) }}</span>
+                <span v-else class="muted">—</span>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="cards mobile-only">
+        <RouterLink
+          v-for="ticket in items"
+          :key="ticket.id"
+          class="m-card"
+          :class="{ breached: ticket.slaBreached }"
+          :to="{ name: 'ticket-detail', params: { id: ticket.id } }"
+        >
+          <div class="m-top">
+            <strong>{{ ticket.subject }}</strong>
+            <span class="badge" :class="ticket.status">
+              {{ statusLabel[ticket.status as TicketStatus] || ticket.status }}
+            </span>
+          </div>
           <p class="muted">
-            {{ ticket.number }}
-            · {{ statusLabel[ticket.status as TicketStatus] || ticket.status }}
-            · {{ priorityLabel[ticket.priority as TicketPriority] || ticket.priority }}
-            <span v-if="ticket.person"> · {{ ticket.person.fullName }}</span>
+            {{ ticket.number }} ·
+            {{ priorityLabel[ticket.priority as TicketPriority] || ticket.priority }}
+          </p>
+          <p v-if="ticket.person || ticket.assignee" class="meta">
+            <span v-if="ticket.person">{{ ticket.person.fullName }}</span>
             <span v-if="ticket.assignee"> · {{ ticket.assignee.fullName }}</span>
           </p>
-          <p v-if="ticket.slaDueAt" class="sla-line">
-            <span v-if="ticket.slaBreached" class="badge-sla bad">تأخیر SLA</span>
-            <span v-else-if="ticket.firstRespondedAt" class="badge-sla ok"
-              >پاسخ داده شد</span
-            >
-            <span v-else class="badge-sla">مهلت {{ formatSla(ticket.slaDueAt) }}</span>
-          </p>
-        </div>
-      </RouterLink>
-      <p v-if="!items.length" class="empty">هنوز تیکتی نیست.</p>
-    </div>
+          <div class="m-foot">
+            <span v-if="ticket.slaBreached" class="sla bad">تأخیر SLA</span>
+            <span v-else-if="ticket.firstRespondedAt" class="sla ok">پاسخ داده شد</span>
+            <span v-else-if="ticket.slaDueAt" class="sla">مهلت {{ formatSla(ticket.slaDueAt) }}</span>
+          </div>
+        </RouterLink>
+      </div>
+    </template>
   </section>
 </template>
 
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
+  min-width: 0;
+  overflow-x: clip;
 }
 
 .page-head {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
-  flex-wrap: wrap;
   align-items: flex-start;
 }
 
-.eyebrow {
-  margin: 0;
-  color: var(--accent);
-  font-weight: 700;
+.head-copy {
+  min-width: 0;
 }
 
 h1 {
-  margin: 0.2rem 0;
+  margin: 0 0 0.3rem;
+  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
+  font-weight: 800;
 }
 
 .lead,
-.muted {
-  color: var(--muted);
-}
-
-.toolbar {
-  display: flex;
-  gap: 0.55rem;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
-.toolbar input,
-.toolbar select {
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 0.7rem 0.85rem;
-  font: inherit;
-  background: #fff;
-  min-width: 0;
-  flex: 1;
-}
-
-.check {
-  display: flex;
-  align-items: center;
-  gap: 0.35rem;
-  white-space: nowrap;
-  font-size: 0.9rem;
-}
-
-.list {
-  display: grid;
-  gap: 0.55rem;
-}
-
-.row {
-  display: block;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  padding: 0.9rem 1rem;
-  text-decoration: none;
-  color: inherit;
-}
-
-.row.breached {
-  border-color: color-mix(in srgb, #b42318 35%, var(--line));
-}
-
-.row p {
-  margin: 0.25rem 0 0;
-}
-
-.sla-line {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.35rem;
-}
-
-.badge-sla {
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--accent);
-}
-
-.badge-sla.bad {
-  color: #b42318;
-}
-
-.badge-sla.ok {
-  color: #027a48;
-}
-
-.empty,
-.error {
+.muted,
+.error,
+.meta {
   margin: 0;
 }
 
-.error {
-  color: #b42318;
+.lead,
+.muted,
+.meta {
+  color: #64748b;
 }
 
-.empty {
-  padding: 1rem;
-  border: 1px dashed var(--line);
-  border-radius: var(--radius);
-  color: var(--muted);
+.error {
+  color: #b91c1c;
+}
+
+.add-btn {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: #14b8a6;
+  color: #fff;
+  display: grid;
+  place-items: center;
+  text-decoration: none;
+  font-size: 1.6rem;
+  font-weight: 700;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
+  flex-shrink: 0;
+}
+
+.tools {
+  display: flex;
+  gap: 0.55rem;
+  align-items: center;
+}
+
+.search {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 0 0.85rem;
+  color: #94a3b8;
+}
+
+.search input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  background: none;
+  padding: 0.75rem 0;
+  font: inherit;
+}
+
+.filter-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+.btn.primary {
+  background: #14b8a6;
+  color: #fff;
+  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.24);
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border-color: #99f6e4;
+}
+
+.btn.ghost.on {
+  background: #f0fdfa;
+  border-color: #14b8a6;
+}
+
+.btn.wide {
+  width: min(100%, 320px);
+}
+
+.sla-btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.filter-btn .chev {
+  transform: rotate(90deg);
+}
+
+.btn-short {
+  display: none;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  inset-inline-end: 0;
+  min-width: 11rem;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
+  padding: 0.35rem;
+  display: grid;
+  z-index: 8;
+}
+
+.popover button {
+  display: block;
+  width: 100%;
+  text-align: start;
+  border: 0;
+  background: none;
+  padding: 0.6rem 0.7rem;
+  border-radius: 8px;
+  font: inherit;
+  cursor: pointer;
+  color: #0f172a;
+}
+
+.popover button:hover,
+.popover button.on {
+  background: #f0fdfa;
+  color: #0f766e;
+}
+
+.empty-card {
+  background: #fff;
+  border-radius: 22px;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
+  padding: 2.4rem 1.2rem 2rem;
+  display: grid;
+  justify-items: center;
+  text-align: center;
+  gap: 0.7rem;
+}
+
+.art svg {
+  width: 148px;
+  height: auto;
+  display: block;
+}
+
+.empty-card h2 {
+  margin: 0.2rem 0 0;
+  font-size: 1.15rem;
+}
+
+.empty-card > p {
+  max-width: 22rem;
+  color: #94a3b8;
+  line-height: 1.8;
+}
+
+.list-head {
+  color: #0f766e;
+}
+
+.table-wrap {
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+  overflow: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  min-width: 720px;
+}
+
+.data-table th,
+.data-table td {
+  padding: 0.9rem 1rem;
+  text-align: start;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.data-table th {
+  font-size: 0.78rem;
+  color: #94a3b8;
+  font-weight: 700;
+  background: #f8fafc;
+}
+
+.data-table tr.breached td {
+  background: color-mix(in srgb, #fef2f2 55%, #fff);
+}
+
+.title {
+  color: #0f172a;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.title:hover {
+  color: #0f766e;
+}
+
+.badge,
+.prio {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  background: #f1f5f9;
+  color: #475569;
+  white-space: nowrap;
+}
+
+.badge.open,
+.prio.normal {
+  background: #ecfeff;
+  color: #0e7490;
+}
+
+.badge.in_progress {
+  background: #fff7ed;
+  color: #c2410c;
+}
+
+.badge.waiting {
+  background: #fefce8;
+  color: #a16207;
+}
+
+.badge.resolved,
+.badge.closed {
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.prio.low {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.prio.high,
+.prio.urgent {
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.sla {
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #0f766e;
+}
+
+.sla.bad {
+  color: #b91c1c;
+}
+
+.sla.ok {
+  color: #047857;
+}
+
+.desktop-only {
+  display: block;
+}
+
+.mobile-only {
+  display: none;
+}
+
+.cards {
+  display: grid;
+  gap: 0.65rem;
+}
+
+.m-card {
+  background: #fff;
+  border-radius: 16px;
+  padding: 0.95rem 1rem;
+  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
+  text-decoration: none;
+  color: inherit;
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.m-card.breached {
+  box-shadow: 0 0 0 1px color-mix(in srgb, #b91c1c 25%, transparent),
+    0 6px 18px rgba(15, 23, 42, 0.05);
+}
+
+.m-top {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.6rem;
+  align-items: flex-start;
+}
+
+.m-top strong {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.m-foot {
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 900px) {
+  .page-head {
+    align-items: center;
+  }
+
+  .tools {
+    flex-wrap: wrap;
+  }
+
+  .search {
+    flex: 1 1 100%;
+  }
+
+  .btn-full {
+    display: none;
+  }
+
+  .btn-short {
+    display: inline;
+  }
+
+  .desktop-only {
+    display: none;
+  }
+
+  .mobile-only {
+    display: grid;
+  }
+}
+
+@media (max-width: 520px) {
+  .add-btn {
+    width: 44px;
+    height: 44px;
+  }
+
+  .sla-btn {
+    font-size: 0.85rem;
+    padding-inline: 0.7rem;
+  }
+
+  .m-card {
+    padding: 0.85rem;
+  }
 }
 </style>