From 66004a0fbaa33a704a60182fd19963d0dc5363db Mon Sep 17 00:00:00 2001
From: Alireza Hassani <alirezahassani@Meshkees-Mac-mini.local>
Date: Sat, 1 Aug 2026 09:35:27 +0330
Subject: [PATCH] Add FA/EN locale, home activity charts, and theme-aware
 polish.

Ship shared LocaleProvider, business/customer i18n, branding defaultLocale, curated home tiles with dual 30-day charts, and chart/page aura tokens; refresh PROJECT_CONTEXT.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/business/index.html                      |  14 +-
 apps/business/src/App.tsx                     |   3 +
 .../src/components/Breadcrumbs.module.css     |   4 +
 apps/business/src/components/Breadcrumbs.tsx  |  13 +-
 .../src/components/CategoryRow.module.css     |  12 +-
 .../components/DailyActivityChart.module.css  | 138 ++++
 .../src/components/DailyActivityChart.tsx     | 164 +++++
 .../src/components/DashboardDocumentTitle.tsx |   9 +-
 .../business/src/components/Header.module.css |  20 +-
 apps/business/src/components/Header.tsx       |  94 ++-
 .../src/components/PageLayout.module.css      |   4 +-
 .../src/components/PortfolioCard.module.css   |   2 +-
 .../business/src/components/PortfolioCard.tsx |  18 +-
 .../ProductActivityChart.module.css           |   6 +-
 .../src/components/ProductActivityChart.tsx   |  34 +-
 .../src/components/ProductCard.module.css     |   8 +-
 .../components/SearchableSelect.module.css    |   2 +-
 .../src/components/SectionCard.module.css     |  60 +-
 apps/business/src/components/SectionCard.tsx  |  26 +-
 .../src/components/Sidebar.module.css         |  29 +-
 apps/business/src/components/Sidebar.tsx      | 269 ++++----
 .../src/components/StoreItemCard.module.css   |   2 +-
 .../WebsiteGroupItemCard.module.css           |   2 +-
 .../src/context/TenantBrandingContext.tsx     |  43 +-
 apps/business/src/i18n/messages.ts            | 621 ++++++++++++++++++
 apps/business/src/i18n/useT.ts                |  13 +
 apps/business/src/index.css                   |  77 ++-
 apps/business/src/lib/routeTitles.ts          |  48 +-
 apps/business/src/pages/AddNewProductPage.tsx |   8 +-
 .../src/pages/BusinessProfilePage.module.css  |   2 +-
 apps/business/src/pages/HomePage.tsx          | 186 ++++--
 apps/business/src/pages/LoginPage.module.css  |  13 +-
 apps/business/src/pages/LoginPage.tsx         | 154 ++---
 apps/business/src/pages/PortfolioListPage.tsx |  44 +-
 .../src/pages/ProductDetailsPage.module.css   |   4 +-
 apps/business/src/pages/ProductsPage.tsx      |  50 +-
 .../src/pages/StoreSettingsPage.module.css    |   4 +
 apps/business/src/pages/StoreSettingsPage.tsx |  37 +-
 .../src/services/dailyActivityService.ts      |  41 ++
 apps/business/src/services/orderService.ts    |   1 +
 .../business/src/services/portfolioService.ts |   1 +
 apps/business/src/services/settingsService.ts |  30 +-
 apps/business/src/services/tenantService.ts   |   2 +
 apps/business/src/types/auth.ts               |   2 +
 apps/business/src/types/portfolio.ts          |   1 +
 apps/business/src/utils/applyBusinessTheme.ts |   8 +
 .../src/utils/businessPrimaryColors.ts        |  26 +
 apps/business/src/utils/productActivity.ts    |  15 +-
 apps/customer/index.html                      |  14 +-
 apps/customer/src/App.tsx                     |   4 +-
 .../components/AddressFormModal.module.css    |  15 +
 .../src/components/AddressFormModal.tsx       | 357 ++++++++++
 .../src/components/DashboardDocumentTitle.tsx |   9 +-
 .../FavoriteStoreItemCard.module.css          |  10 +-
 .../src/components/FavoriteStoreItemCard.tsx  |  22 +-
 .../customer/src/components/Header.module.css |  22 +-
 apps/customer/src/components/Header.tsx       |  56 +-
 .../src/components/OrderItemsModal.tsx        |  45 +-
 .../src/components/OrderRow.module.css        |   9 +-
 apps/customer/src/components/OrderRow.tsx     |  73 +-
 .../src/components/PageLayout.module.css      |   4 +-
 .../src/components/Sidebar.module.css         |  30 +-
 apps/customer/src/components/Sidebar.tsx      |  41 +-
 .../checkout/CheckoutBackButton.module.css    |   4 +
 .../src/context/TenantBrandingContext.tsx     |  15 +-
 apps/customer/src/i18n/messages.ts            | 506 ++++++++++++++
 apps/customer/src/i18n/useT.ts                |  13 +
 apps/customer/src/index.css                   |   4 +-
 .../src/pages/AddressesPage.module.css        | 136 +++-
 apps/customer/src/pages/AddressesPage.tsx     | 366 +++++------
 apps/customer/src/pages/FavoritesPage.tsx     |  24 +-
 apps/customer/src/pages/HomePage.tsx          |  91 +--
 apps/customer/src/pages/LoginPage.module.css  |  13 +-
 apps/customer/src/pages/LoginPage.tsx         | 136 ++--
 apps/customer/src/pages/OrdersPage.module.css |  11 +-
 apps/customer/src/pages/OrdersPage.tsx        |  58 +-
 apps/customer/src/pages/ProfilePage.tsx       |  81 ++-
 apps/customer/src/services/authService.ts     |   2 +
 apps/customer/src/services/orderService.ts    |   1 +
 apps/customer/src/services/tenantService.ts   |   2 +
 apps/customer/src/utils/applyBusinessTheme.ts |   8 +
 .../src/utils/businessPrimaryColors.ts        |  26 +
 apps/customer/src/utils/orderSteps.ts         |  66 +-
 apps/customer/src/utils/storeProductGroups.ts |   5 +-
 apps/super-admin/index.html                   |   2 +-
 .../src/components/Header.module.css          |   7 -
 apps/super-admin/src/components/Header.tsx    |   7 -
 .../src/components/SectionCard.module.css     |   9 +
 apps/super-admin/src/index.css                |  11 +-
 .../src/pages/BusinessesPage.module.css       |  41 ++
 apps/super-admin/src/pages/BusinessesPage.tsx | 114 +++-
 apps/super-admin/src/pages/ProfilePage.tsx    |  34 +-
 .../src/services/businessSettingsService.ts   |  27 +
 .../src/services/profileService.ts            |   2 +
 apps/super-admin/src/types/auth.ts            |   2 +
 apps/super-admin/src/types/business.ts        |   2 +
 apps/super-admin/src/types/profile.ts         |   2 +
 .../src/utils/applyBusinessTheme.ts           |  42 ++
 .../src/utils/businessPrimaryColors.ts        |  42 ++
 docs/PROJECT_CONTEXT.md                       |  41 +-
 packages/dashboard-core/src/index.ts          |  10 +
 .../src/locale/dashboardLocale.ts             |  37 ++
 packages/dashboard-core/src/styles/tokens.css |  76 ++-
 packages/dashboard-core/src/types/auth.ts     |   2 +
 .../components/AddressListEditor.module.css   |   2 +-
 .../src/components/AddressListEditor.tsx      |  68 +-
 .../src/components/LanguageSelect.module.css  |  64 ++
 .../src/components/LanguageSelect.tsx         |  33 +
 .../components/PasswordResetModal.module.css  |   2 +-
 .../src/components/SectionCard.module.css     |   8 +
 .../src/context/LocaleContext.tsx             |  66 ++
 packages/dashboard-ui/src/index.ts            |   3 +
 112 files changed, 4338 insertions(+), 1061 deletions(-)
 create mode 100644 apps/business/src/components/DailyActivityChart.module.css
 create mode 100644 apps/business/src/components/DailyActivityChart.tsx
 create mode 100644 apps/business/src/i18n/messages.ts
 create mode 100644 apps/business/src/i18n/useT.ts
 create mode 100644 apps/business/src/services/dailyActivityService.ts
 create mode 100644 apps/customer/src/components/AddressFormModal.module.css
 create mode 100644 apps/customer/src/components/AddressFormModal.tsx
 create mode 100644 apps/customer/src/i18n/messages.ts
 create mode 100644 apps/customer/src/i18n/useT.ts
 create mode 100644 apps/super-admin/src/utils/applyBusinessTheme.ts
 create mode 100644 packages/dashboard-core/src/locale/dashboardLocale.ts
 create mode 100644 packages/dashboard-ui/src/components/LanguageSelect.module.css
 create mode 100644 packages/dashboard-ui/src/components/LanguageSelect.tsx
 create mode 100644 packages/dashboard-ui/src/context/LocaleContext.tsx

diff --git a/apps/business/index.html b/apps/business/index.html
index 715411a..730e9df 100644
--- a/apps/business/index.html
+++ b/apps/business/index.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
@@ -15,6 +15,18 @@
       rel="stylesheet"
     />
     <title>Business Dashboard</title>
+    <script>
+      try {
+        var l = localStorage.getItem('meshkee.dashboard.locale')
+        if (l === 'en') {
+          document.documentElement.lang = 'en'
+          document.documentElement.dir = 'ltr'
+        } else {
+          document.documentElement.lang = 'fa'
+          document.documentElement.dir = 'rtl'
+        }
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/business/src/App.tsx b/apps/business/src/App.tsx
index f0d9720..6e82b64 100644
--- a/apps/business/src/App.tsx
+++ b/apps/business/src/App.tsx
@@ -4,6 +4,7 @@ import { DashboardDocumentTitle } from './components/DashboardDocumentTitle'
 import { AuthProvider } from './context/AuthContext'
 import { BusinessThemeProvider } from './context/BusinessThemeContext'
 import { TenantBrandingProvider } from './context/TenantBrandingContext'
+import { LocaleProvider } from '@meshkee/dashboard-ui'
 import { ToastProvider } from './context/ToastContext'
 import { ProtectedRoute } from './components/ProtectedRoute'
 import { GuestRoute } from './components/GuestRoute'
@@ -50,6 +51,7 @@ import { WebsiteSpecialBrandsPage } from './pages/WebsiteSpecialBrandsPage'
 function App() {
   return (
     <BusinessDomainGuard>
+    <LocaleProvider>
     <BrowserRouter>
       <TenantBrandingProvider>
         <DashboardDocumentTitle />
@@ -111,6 +113,7 @@ function App() {
       </AuthProvider>
       </TenantBrandingProvider>
     </BrowserRouter>
+    </LocaleProvider>
     </BusinessDomainGuard>
   )
 }
diff --git a/apps/business/src/components/Breadcrumbs.module.css b/apps/business/src/components/Breadcrumbs.module.css
index be4529c..204e961 100644
--- a/apps/business/src/components/Breadcrumbs.module.css
+++ b/apps/business/src/components/Breadcrumbs.module.css
@@ -21,6 +21,10 @@
   color: var(--text-muted);
 }
 
+:global([dir='rtl']) .separator {
+  transform: scaleX(-1);
+}
+
 .link {
   font-size: 14px;
   font-weight: 500;
diff --git a/apps/business/src/components/Breadcrumbs.tsx b/apps/business/src/components/Breadcrumbs.tsx
index 1924ac9..4cab863 100644
--- a/apps/business/src/components/Breadcrumbs.tsx
+++ b/apps/business/src/components/Breadcrumbs.tsx
@@ -1,5 +1,8 @@
 import { Link } from 'react-router-dom'
 import { ChevronRight } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { translateBreadcrumbLabel } from '../i18n/messages'
+import { useT } from '../i18n/useT'
 import styles from './Breadcrumbs.module.css'
 
 export interface BreadcrumbItem {
@@ -12,11 +15,15 @@ interface BreadcrumbsProps {
 }
 
 export function Breadcrumbs({ items }: BreadcrumbsProps) {
+  const { locale } = useLocale()
+  const t = useT()
+
   return (
-    <nav className={styles.breadcrumbs} aria-label="Breadcrumb">
+    <nav className={styles.breadcrumbs} aria-label={t('common.breadcrumb')}>
       <ol className={styles.list}>
         {items.map((item, index) => {
           const isLast = index === items.length - 1
+          const label = translateBreadcrumbLabel(locale, item.label)
           return (
             <li key={`${item.label}-${index}`} className={styles.item}>
               {index > 0 && (
@@ -24,10 +31,10 @@ export function Breadcrumbs({ items }: BreadcrumbsProps) {
               )}
               {item.href && !isLast ? (
                 <Link to={item.href} className={styles.link}>
-                  {item.label}
+                  {label}
                 </Link>
               ) : (
-                <span className={isLast ? styles.current : styles.text}>{item.label}</span>
+                <span className={isLast ? styles.current : styles.text}>{label}</span>
               )}
             </li>
           )
diff --git a/apps/business/src/components/CategoryRow.module.css b/apps/business/src/components/CategoryRow.module.css
index 2aec8c9..867ca17 100644
--- a/apps/business/src/components/CategoryRow.module.css
+++ b/apps/business/src/components/CategoryRow.module.css
@@ -46,16 +46,24 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-left: 4px;
+  margin-inline-start: 4px;
   color: var(--text-muted);
   transition: transform 0.2s ease;
   vertical-align: middle;
 }
 
+:global([dir='rtl']) .chevron {
+  transform: scaleX(-1);
+}
+
 .chevronOpen {
   transform: rotate(90deg);
 }
 
+:global([dir='rtl']) .chevronOpen {
+  transform: scaleX(-1) rotate(90deg);
+}
+
 .names {
   display: flex;
   align-items: center;
@@ -75,7 +83,7 @@
 }
 
 .nameFa {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: 15px;
   font-weight: 500;
   color: var(--text-primary);
diff --git a/apps/business/src/components/DailyActivityChart.module.css b/apps/business/src/components/DailyActivityChart.module.css
new file mode 100644
index 0000000..516dac8
--- /dev/null
+++ b/apps/business/src/components/DailyActivityChart.module.css
@@ -0,0 +1,138 @@
+.card {
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius);
+  box-shadow: var(--glass-shadow);
+  padding: 24px;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.legendItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.legendDot {
+  width: 10px;
+  height: 10px;
+  border-radius: 3px;
+}
+
+.tonePrimary {
+  background: var(--primary);
+}
+
+.toneAccent {
+  background: var(--chart-accent, #a855f7);
+}
+
+.status,
+.error {
+  font-size: 14px;
+  text-align: center;
+  padding: 40px 12px;
+}
+
+.status {
+  color: var(--text-muted);
+}
+
+.error {
+  color: #dc2626;
+}
+
+.chartWrap {
+  overflow-x: auto;
+}
+
+.chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+  min-width: 100%;
+  padding-bottom: 4px;
+}
+
+.group {
+  flex: 1;
+  min-width: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
+.bars {
+  display: flex;
+  align-items: flex-end;
+  height: 180px;
+  gap: 2px;
+}
+
+.bar {
+  width: 7px;
+  border-radius: 4px 4px 2px 2px;
+  transition: height 0.3s ease;
+}
+
+.barPrimary {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--primary) 55%, #ffffff) 0%,
+    var(--primary) 100%
+  );
+}
+
+.barAccent {
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--chart-accent, #a855f7) 55%, #ffffff) 0%,
+    var(--chart-accent, #a855f7) 100%
+  );
+}
+
+.label {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-weight: 500;
+  font-family: var(--font-en), var(--font-ui), sans-serif;
+  line-height: 1;
+}
+
+@media (max-width: 768px) {
+  .header {
+    flex-direction: column;
+  }
+}
diff --git a/apps/business/src/components/DailyActivityChart.tsx b/apps/business/src/components/DailyActivityChart.tsx
new file mode 100644
index 0000000..eee0c9b
--- /dev/null
+++ b/apps/business/src/components/DailyActivityChart.tsx
@@ -0,0 +1,164 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { ApiError } from '../lib/api'
+import type {
+  DailyActivityPoint,
+  DualDailyActivityResponse,
+} from '../services/dailyActivityService'
+import { useT } from '../i18n/useT'
+import type { BusinessMessageKey } from '../i18n/messages'
+import styles from './DailyActivityChart.module.css'
+
+const CHART_HEIGHT = 180
+const BAR_GAP = 2
+
+interface DailyActivityChartProps {
+  titleKey: BusinessMessageKey
+  subtitleKey: BusinessMessageKey
+  primaryLegendKey: BusinessMessageKey
+  secondaryLegendKey: BusinessMessageKey
+  loadingKey: BusinessMessageKey
+  errorKey: BusinessMessageKey
+  primaryBarTitleKey: BusinessMessageKey
+  secondaryBarTitleKey: BusinessMessageKey
+  load: (signal: AbortSignal) => Promise<DualDailyActivityResponse>
+}
+
+function formatDayLabel(dateKey: string, locale: string): string {
+  const [year, month, day] = dateKey.split('-').map(Number)
+  const date = new Date(year, month - 1, day)
+  return date.toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US', {
+    day: 'numeric',
+    numberingSystem: 'latn',
+  })
+}
+
+export function DailyActivityChart({
+  titleKey,
+  subtitleKey,
+  primaryLegendKey,
+  secondaryLegendKey,
+  loadingKey,
+  errorKey,
+  primaryBarTitleKey,
+  secondaryBarTitleKey,
+  load,
+}: DailyActivityChartProps) {
+  const t = useT()
+  const { locale } = useLocale()
+  const [primaryItems, setPrimaryItems] = useState<DailyActivityPoint[]>([])
+  const [secondaryItems, setSecondaryItems] = useState<DailyActivityPoint[]>([])
+  const [primaryTotal, setPrimaryTotal] = useState(0)
+  const [secondaryTotal, setSecondaryTotal] = useState(0)
+  const [isLoading, setIsLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    const controller = new AbortController()
+
+    async function run() {
+      setIsLoading(true)
+      setError('')
+      try {
+        const data = await load(controller.signal)
+        if (controller.signal.aborted) return
+        setPrimaryItems(data.primary.items)
+        setSecondaryItems(data.secondary.items)
+        setPrimaryTotal(data.primary.total)
+        setSecondaryTotal(data.secondary.total)
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') return
+        if (err instanceof ApiError) {
+          setError(err.message)
+        } else {
+          setError(t(errorKey))
+        }
+      } finally {
+        if (!controller.signal.aborted) setIsLoading(false)
+      }
+    }
+
+    void run()
+    return () => controller.abort()
+  }, [load, t, errorKey])
+
+  const maxValue = useMemo(() => {
+    const peak = Math.max(
+      ...primaryItems.map((item) => item.count),
+      ...secondaryItems.map((item) => item.count),
+      0,
+    )
+    return peak > 0 ? peak : 1
+  }, [primaryItems, secondaryItems])
+
+  return (
+    <section className={styles.card} aria-label={t(titleKey)}>
+      <div className={styles.header}>
+        <div>
+          <h3 className={styles.title}>{t(titleKey)}</h3>
+          <p className={styles.subtitle}>{t(subtitleKey)}</p>
+        </div>
+        <div className={styles.legend}>
+          <span className={styles.legendItem}>
+            <span className={`${styles.legendDot} ${styles.tonePrimary}`} />
+            {t(primaryLegendKey, { count: primaryTotal })}
+          </span>
+          <span className={styles.legendItem}>
+            <span className={`${styles.legendDot} ${styles.toneAccent}`} />
+            {t(secondaryLegendKey, { count: secondaryTotal })}
+          </span>
+        </div>
+      </div>
+
+      {isLoading ? (
+        <p className={styles.status}>{t(loadingKey)}</p>
+      ) : error ? (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : (
+        <div className={styles.chartWrap}>
+          <div
+            className={styles.chart}
+            style={{ height: CHART_HEIGHT + 28 }}
+            role="img"
+            aria-label={t(titleKey)}
+          >
+            {primaryItems.map((item, index) => {
+              const secondary = secondaryItems[index]
+              const secondaryCount = secondary?.count ?? 0
+              const primaryHeight = (item.count / maxValue) * CHART_HEIGHT
+              const secondaryHeight = (secondaryCount / maxValue) * CHART_HEIGHT
+              const label = formatDayLabel(item.date, locale)
+
+              return (
+                <div key={item.date} className={styles.group}>
+                  <div className={styles.bars} style={{ gap: BAR_GAP }}>
+                    <div
+                      className={`${styles.bar} ${styles.barPrimary}`}
+                      style={{ height: Math.max(primaryHeight, item.count > 0 ? 4 : 0) }}
+                      title={t(primaryBarTitleKey, { day: label, count: item.count })}
+                    />
+                    <div
+                      className={`${styles.bar} ${styles.barAccent}`}
+                      style={{
+                        height: Math.max(secondaryHeight, secondaryCount > 0 ? 4 : 0),
+                      }}
+                      title={t(secondaryBarTitleKey, {
+                        day: label,
+                        count: secondaryCount,
+                      })}
+                    />
+                  </div>
+                  <span className={styles.label} lang="en" dir="ltr">
+                    {label}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}
diff --git a/apps/business/src/components/DashboardDocumentTitle.tsx b/apps/business/src/components/DashboardDocumentTitle.tsx
index 6040068..596f591 100644
--- a/apps/business/src/components/DashboardDocumentTitle.tsx
+++ b/apps/business/src/components/DashboardDocumentTitle.tsx
@@ -1,17 +1,18 @@
 import { useLocation } from 'react-router-dom'
-import { useDashboardDocumentTitle } from '@meshkee/dashboard-ui'
+import { useDashboardDocumentTitle, useLocale } from '@meshkee/dashboard-ui'
 import { useTenantBranding } from '../context/TenantBrandingContext'
-import { BUSINESS_DASHBOARD_NAME, businessRouteTitleRules } from '../lib/routeTitles'
+import { getBusinessRouteTitleRules, translate } from '../i18n/messages'
 
 export function DashboardDocumentTitle() {
   const { pathname } = useLocation()
   const { businessName } = useTenantBranding()
+  const { locale } = useLocale()
 
   useDashboardDocumentTitle({
     businessName,
-    dashboardName: BUSINESS_DASHBOARD_NAME,
+    dashboardName: translate(locale, 'app.dashboardName'),
     pathname,
-    routeRules: businessRouteTitleRules,
+    routeRules: getBusinessRouteTitleRules(locale),
   })
 
   return null
diff --git a/apps/business/src/components/Header.module.css b/apps/business/src/components/Header.module.css
index 408db9b..c959da9 100644
--- a/apps/business/src/components/Header.module.css
+++ b/apps/business/src/components/Header.module.css
@@ -60,9 +60,10 @@
 .badge {
   position: absolute;
   top: 4px;
-  right: 4px;
-  width: 18px;
+  inset-inline-end: 4px;
+  min-width: 18px;
   height: 18px;
+  padding: 0 4px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -70,7 +71,8 @@
   color: white;
   font-size: 10px;
   font-weight: 600;
-  border-radius: 50%;
+  line-height: 1;
+  border-radius: 999px;
   border: 2px solid white;
 }
 
@@ -82,7 +84,8 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 6px 12px 6px 6px;
+  padding-block: 6px;
+  padding-inline: 6px 12px;
   border-radius: 50px;
   background: rgba(255, 255, 255, 0.5);
   border: 1px solid var(--glass-border);
@@ -96,13 +99,6 @@
   border-color: rgba(var(--primary-rgb) / 0.25);
 }
 
-.avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
 .profileInfo {
   display: flex;
   flex-direction: column;
@@ -132,7 +128,7 @@
 .dropdown {
   position: absolute;
   top: calc(100% + 8px);
-  right: 0;
+  inset-inline-end: 0;
   min-width: 180px;
   padding: 6px;
   background: rgba(255, 255, 255, 0.95);
diff --git a/apps/business/src/components/Header.tsx b/apps/business/src/components/Header.tsx
index a5b77e5..56e750f 100644
--- a/apps/business/src/components/Header.tsx
+++ b/apps/business/src/components/Header.tsx
@@ -1,32 +1,52 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Menu, Bell, MessageSquare, ChevronDown, User, Settings, KeyRound, LogOut } from 'lucide-react'
-import { PasswordResetModal } from '@meshkee/dashboard-ui'
+import { LanguageSelect, PasswordResetModal, useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
+import { useT } from '../i18n/useT'
 import { changePassword } from '../services/authService'
 import styles from './Header.module.css'
 
-const profileMenuItems = [
-  { icon: User, label: 'Profile', to: '/profile' },
-  { icon: Settings, label: 'Setting', to: '/settings' },
-]
+function displayUserName(
+  user: {
+    firstName: string | null
+    lastName: string | null
+    firstNameEn?: string | null
+    lastNameEn?: string | null
+    cellNumber: string
+  } | null,
+  locale: 'en' | 'fa',
+  fallback: string,
+) {
+  if (!user) return fallback
+  const localized =
+    locale === 'en'
+      ? [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
+      : [user.firstName, user.lastName].filter(Boolean).join(' ')
+  const other =
+    locale === 'en'
+      ? [user.firstName, user.lastName].filter(Boolean).join(' ')
+      : [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
+  return localized || other || user.cellNumber || fallback
+}
 
 export function Header() {
   const navigate = useNavigate()
   const { user, logout } = useAuth()
+  const { locale } = useLocale()
+  const t = useT()
   const [menuOpen, setMenuOpen] = useState(false)
   const [passwordModalOpen, setPasswordModalOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
 
-  const displayName =
-    [user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.cellNumber || 'User'
+  const displayName = displayUserName(user, locale, t('app.userFallback'))
   const roleLabel =
     user?.roleLabel ??
     (user?.isSuperAdmin || user?.roles.includes('super_admin')
-      ? 'Super Admin'
+      ? t('role.superAdmin')
       : user?.businesses[0]?.isOwner
-        ? 'Business Owner'
-        : user?.businesses[0]?.teamRole ?? 'Staff')
+        ? t('role.owner')
+        : user?.businesses[0]?.teamRole ?? t('role.staff'))
 
   useEffect(() => {
     if (!menuOpen) return
@@ -64,21 +84,23 @@ export function Header() {
     <>
       <header className={styles.header}>
         <div className={styles.left}>
-          <button className={styles.menuBtn} aria-label="Toggle menu">
+          <button className={styles.menuBtn} aria-label={t('header.toggleMenu')}>
             <Menu size={22} />
           </button>
-          <h1 className={styles.title}>Admin Dashboard</h1>
+          <h1 className={styles.title}>{t('header.title')}</h1>
         </div>
 
         <div className={styles.right}>
-          <button className={styles.iconBtn} aria-label="Messages">
+          <LanguageSelect />
+
+          <button className={styles.iconBtn} aria-label={t('header.messages')}>
             <MessageSquare size={20} />
-            <span className={styles.badge}>5</span>
+            <span className={styles.badge}>0</span>
           </button>
 
-          <button className={styles.iconBtn} aria-label="Notifications">
+          <button className={styles.iconBtn} aria-label={t('header.notifications')}>
             <Bell size={20} />
-            <span className={styles.badge}>3</span>
+            <span className={styles.badge}>0</span>
           </button>
 
           <div className={styles.profileWrap} ref={menuRef}>
@@ -89,11 +111,6 @@ export function Header() {
               aria-expanded={menuOpen}
               aria-haspopup="menu"
             >
-              <img
-                src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(displayName)}`}
-                alt={displayName}
-                className={styles.avatar}
-              />
               <div className={styles.profileInfo}>
                 <span className={styles.name}>{displayName}</span>
                 <span className={styles.role}>{roleLabel}</span>
@@ -106,18 +123,24 @@ export function Header() {
 
             {menuOpen && (
               <div className={styles.dropdown} role="menu">
-                {profileMenuItems.map(({ icon: Icon, label, to }) => (
-                  <Link
-                    key={label}
-                    to={to}
-                    className={styles.dropdownItem}
-                    role="menuitem"
-                    onClick={() => setMenuOpen(false)}
-                  >
-                    <Icon size={16} />
-                    <span>{label}</span>
-                  </Link>
-                ))}
+                <Link
+                  to="/profile"
+                  className={styles.dropdownItem}
+                  role="menuitem"
+                  onClick={() => setMenuOpen(false)}
+                >
+                  <User size={16} />
+                  <span>{t('header.profile')}</span>
+                </Link>
+                <Link
+                  to="/settings"
+                  className={styles.dropdownItem}
+                  role="menuitem"
+                  onClick={() => setMenuOpen(false)}
+                >
+                  <Settings size={16} />
+                  <span>{t('header.setting')}</span>
+                </Link>
                 <button
                   type="button"
                   className={styles.dropdownItem}
@@ -125,7 +148,7 @@ export function Header() {
                   onClick={openPasswordModal}
                 >
                   <KeyRound size={16} />
-                  <span>Change password</span>
+                  <span>{t('header.changePassword')}</span>
                 </button>
                 <button
                   type="button"
@@ -134,7 +157,7 @@ export function Header() {
                   onClick={handleLogout}
                 >
                   <LogOut size={16} />
-                  <span>Logout</span>
+                  <span>{t('nav.logout')}</span>
                 </button>
               </div>
             )}
@@ -146,6 +169,7 @@ export function Header() {
         open={passwordModalOpen}
         onClose={() => setPasswordModalOpen(false)}
         onChangePassword={changePassword}
+        title={t('header.changePassword')}
       />
     </>
   )
diff --git a/apps/business/src/components/PageLayout.module.css b/apps/business/src/components/PageLayout.module.css
index 99e700e..a9cc624 100644
--- a/apps/business/src/components/PageLayout.module.css
+++ b/apps/business/src/components/PageLayout.module.css
@@ -4,7 +4,7 @@
 }
 
 .main {
-  margin-left: var(--sidebar-width);
+  margin-inline-start: var(--sidebar-width);
   min-height: 100vh;
   position: relative;
   z-index: 1;
@@ -12,6 +12,6 @@
 
 @media (max-width: 768px) {
   .main {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
diff --git a/apps/business/src/components/PortfolioCard.module.css b/apps/business/src/components/PortfolioCard.module.css
index 82e5732..b3d4825 100644
--- a/apps/business/src/components/PortfolioCard.module.css
+++ b/apps/business/src/components/PortfolioCard.module.css
@@ -64,7 +64,7 @@
 
 .titleFa {
   margin: 0;
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: 15px;
   font-weight: 500;
   line-height: 1.4;
diff --git a/apps/business/src/components/PortfolioCard.tsx b/apps/business/src/components/PortfolioCard.tsx
index eb6fbf2..d16d465 100644
--- a/apps/business/src/components/PortfolioCard.tsx
+++ b/apps/business/src/components/PortfolioCard.tsx
@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom'
-import { Pencil, MessageSquare, Trash2 } from 'lucide-react'
+import { ChevronUp, Pencil, MessageSquare, Trash2 } from 'lucide-react'
 import type { Portfolio } from '../types/portfolio'
 import { formatPortfolioCardDate } from '../services/portfolioService'
 import { textLocaleAttrs } from '../utils/textLocale'
@@ -10,6 +10,9 @@ import controlStyles from './ProductCard.module.css'
 interface PortfolioCardProps {
   portfolio: Portfolio
   commentCount: number
+  canMoveUp: boolean
+  isMovingUp?: boolean
+  onMoveUp: (id: string) => void
   onEdit: (id: string) => void
   onComments: (id: string) => void
   onRemove: (id: string) => void
@@ -18,6 +21,9 @@ interface PortfolioCardProps {
 export function PortfolioCard({
   portfolio,
   commentCount,
+  canMoveUp,
+  isMovingUp = false,
+  onMoveUp,
   onEdit,
   onComments,
   onRemove,
@@ -87,6 +93,16 @@ export function PortfolioCard({
       </Link>
 
       <div className={controlStyles.controls}>
+        <Tooltip label="Move up">
+          <button
+            type="button"
+            onClick={() => onMoveUp(portfolio.id)}
+            disabled={!canMoveUp || isMovingUp}
+            aria-label="Move up"
+          >
+            <ChevronUp size={16} />
+          </button>
+        </Tooltip>
         <Tooltip label="Edit portfolio">
           <button type="button" onClick={() => onEdit(portfolio.id)} aria-label="Edit">
             <Pencil size={16} />
diff --git a/apps/business/src/components/ProductActivityChart.module.css b/apps/business/src/components/ProductActivityChart.module.css
index 6a9aeee..983ec6b 100644
--- a/apps/business/src/components/ProductActivityChart.module.css
+++ b/apps/business/src/components/ProductActivityChart.module.css
@@ -53,7 +53,7 @@
 }
 
 .legendUpdated {
-  background: var(--primary-dark);
+  background: var(--chart-accent, #a855f7);
 }
 
 .status,
@@ -115,8 +115,8 @@
 .barUpdated {
   background: linear-gradient(
     180deg,
-    color-mix(in srgb, var(--primary-dark) 55%, #ffffff) 0%,
-    var(--primary-dark) 100%
+    color-mix(in srgb, var(--chart-accent, #a855f7) 55%, #ffffff) 0%,
+    var(--chart-accent, #a855f7) 100%
   );
 }
 
diff --git a/apps/business/src/components/ProductActivityChart.tsx b/apps/business/src/components/ProductActivityChart.tsx
index 149f3ac..2ded945 100644
--- a/apps/business/src/components/ProductActivityChart.tsx
+++ b/apps/business/src/components/ProductActivityChart.tsx
@@ -1,13 +1,17 @@
 import { useEffect, useMemo, useState } from 'react'
+import { useLocale } from '@meshkee/dashboard-ui'
 import { ApiError } from '../lib/api'
 import { listAllProducts } from '../services/productService'
 import { aggregateProductActivity, type ProductMonthActivity } from '../utils/productActivity'
+import { useT } from '../i18n/useT'
 import styles from './ProductActivityChart.module.css'
 
 const CHART_HEIGHT = 200
 const BAR_GAP = 6
 
 export function ProductActivityChart() {
+  const t = useT()
+  const { locale } = useLocale()
   const [data, setData] = useState<ProductMonthActivity[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState('')
@@ -16,7 +20,7 @@ export function ProductActivityChart() {
     const controller = new AbortController()
     void loadActivity(controller.signal)
     return () => controller.abort()
-  }, [])
+  }, [locale])
 
   async function loadActivity(signal?: AbortSignal) {
     setIsLoading(true)
@@ -24,13 +28,13 @@ export function ProductActivityChart() {
 
     try {
       const products = await listAllProducts(signal)
-      setData(aggregateProductActivity(products))
+      setData(aggregateProductActivity(products, locale))
     } catch (err) {
       if (err instanceof DOMException && err.name === 'AbortError') return
       if (err instanceof ApiError) {
         setError(err.message)
       } else {
-        setError('Unable to load product activity.')
+        setError(t('products.activity.error'))
       }
     } finally {
       setIsLoading(false)
@@ -51,26 +55,26 @@ export function ProductActivityChart() {
   )
 
   return (
-    <section className={styles.card} aria-label="Product activity chart">
+    <section className={styles.card} aria-label={t('products.activity.title')}>
       <div className={styles.header}>
         <div>
-          <h3 className={styles.title}>Product activity</h3>
-          <p className={styles.subtitle}>Products added or updated in the last 12 months</p>
+          <h3 className={styles.title}>{t('products.activity.title')}</h3>
+          <p className={styles.subtitle}>{t('products.activity.subtitle')}</p>
         </div>
         <div className={styles.legend}>
           <span className={styles.legendItem}>
             <span className={`${styles.legendDot} ${styles.legendAdded}`} />
-            Added ({totals.added})
+            {t('products.activity.added', { count: totals.added })}
           </span>
           <span className={styles.legendItem}>
             <span className={`${styles.legendDot} ${styles.legendUpdated}`} />
-            Updated ({totals.updated})
+            {t('products.activity.updated', { count: totals.updated })}
           </span>
         </div>
       </div>
 
       {isLoading ? (
-        <p className={styles.status}>Loading chart...</p>
+        <p className={styles.status}>{t('products.activity.loading')}</p>
       ) : error ? (
         <p className={styles.error} role="alert">
           {error}
@@ -81,7 +85,7 @@ export function ProductActivityChart() {
             className={styles.chart}
             style={{ height: CHART_HEIGHT + 32 }}
             role="img"
-            aria-label="Bar chart of products added and updated per month"
+            aria-label={t('products.activity.chartAria')}
           >
             {data.map((item) => {
               const addedHeight = (item.added / maxValue) * CHART_HEIGHT
@@ -93,12 +97,18 @@ export function ProductActivityChart() {
                     <div
                       className={`${styles.bar} ${styles.barAdded}`}
                       style={{ height: Math.max(addedHeight, item.added > 0 ? 4 : 0) }}
-                      title={`${item.label}: ${item.added} added`}
+                      title={t('products.activity.barAdded', {
+                        month: item.label,
+                        count: item.added,
+                      })}
                     />
                     <div
                       className={`${styles.bar} ${styles.barUpdated}`}
                       style={{ height: Math.max(updatedHeight, item.updated > 0 ? 4 : 0) }}
-                      title={`${item.label}: ${item.updated} updated`}
+                      title={t('products.activity.barUpdated', {
+                        month: item.label,
+                        count: item.updated,
+                      })}
                     />
                   </div>
                   <span className={styles.label}>{item.label}</span>
diff --git a/apps/business/src/components/ProductCard.module.css b/apps/business/src/components/ProductCard.module.css
index 9fa6f2f..18e97fe 100644
--- a/apps/business/src/components/ProductCard.module.css
+++ b/apps/business/src/components/ProductCard.module.css
@@ -79,7 +79,7 @@
 }
 
 .nameFa {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: 12px;
   font-weight: 500;
   color: var(--text-secondary);
@@ -160,6 +160,12 @@
   color: var(--primary);
 }
 
+.controls button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .controls button.danger:hover {
   background: rgba(239, 68, 68, 0.1);
   color: #ef4444;
diff --git a/apps/business/src/components/SearchableSelect.module.css b/apps/business/src/components/SearchableSelect.module.css
index 1c0c1db..0413447 100644
--- a/apps/business/src/components/SearchableSelect.module.css
+++ b/apps/business/src/components/SearchableSelect.module.css
@@ -130,7 +130,7 @@
 }
 
 .optionFa {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-weight: 500;
   direction: rtl;
 }
diff --git a/apps/business/src/components/SectionCard.module.css b/apps/business/src/components/SectionCard.module.css
index 729c796..9c62f5e 100644
--- a/apps/business/src/components/SectionCard.module.css
+++ b/apps/business/src/components/SectionCard.module.css
@@ -56,28 +56,78 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
+  min-height: 36px;
 }
 
-.link {
-  font-size: 14px;
-  font-weight: 500;
+.countMeta {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  height: 36px;
+  max-width: calc(100% - 48px);
+  padding: 0 14px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  background: rgba(var(--primary-rgb) / 0.1);
   color: var(--primary);
+  transition:
+    background 0.35s ease,
+    color 0.35s ease;
+}
+
+.countValue {
+  font-family: var(--font-en), var(--font-ui), sans-serif;
+  font-size: 16px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  color: inherit;
+}
+
+.countLabel {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  color: inherit;
+  opacity: 0.85;
+}
+
+.card:hover .countMeta {
+  background: var(--primary);
+  color: white;
+}
+
+.card:hover .countLabel {
+  opacity: 0.95;
 }
 
 .arrowBtn {
   width: 36px;
   height: 36px;
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(var(--primary-rgb) / 0.1);
   color: var(--primary);
-  transition: background 0.2s, transform 0.2s;
+  transition:
+    background 0.35s ease,
+    color 0.35s ease;
+}
+
+.arrowIcon {
+  display: block;
 }
 
 .card:hover .arrowBtn {
   background: var(--primary);
   color: white;
-  transform: translateX(2px);
+}
+
+:global([dir='rtl']) .arrowBtn {
+  transform: scaleX(-1);
 }
diff --git a/apps/business/src/components/SectionCard.tsx b/apps/business/src/components/SectionCard.tsx
index ff09ab6..bde173c 100644
--- a/apps/business/src/components/SectionCard.tsx
+++ b/apps/business/src/components/SectionCard.tsx
@@ -6,17 +6,26 @@ interface SectionCardProps {
   icon: LucideIcon
   title: string
   description: string
-  linkText: string
+  linkText?: string
   href: string
+  /** Entity total shown beside the arrow; omit for sections without a count (e.g. settings). */
+  count?: number | null
+  countLabel?: string
 }
 
 export function SectionCard({
   icon: Icon,
   title,
   description,
-  linkText,
   href,
+  count,
+  countLabel,
 }: SectionCardProps) {
+  const showCount = typeof count === 'number' && Number.isFinite(count)
+  const formattedCount = showCount
+    ? new Intl.NumberFormat('en-US').format(count)
+    : null
+
   return (
     <Link to={href} className={styles.card}>
       <div className={styles.iconWrap}>
@@ -27,9 +36,18 @@ export function SectionCard({
       <p className={styles.description}>{description}</p>
 
       <div className={styles.footer}>
-        <span className={styles.link}>{linkText}</span>
+        {formattedCount !== null && countLabel ? (
+          <div className={styles.countMeta}>
+            <span className={styles.countValue} lang="en" dir="ltr">
+              {formattedCount}
+            </span>
+            <span className={styles.countLabel}>{countLabel}</span>
+          </div>
+        ) : (
+          <span />
+        )}
         <span className={styles.arrowBtn} aria-hidden="true">
-          <ArrowRight size={18} />
+          <ArrowRight size={18} className={styles.arrowIcon} />
         </span>
       </div>
     </Link>
diff --git a/apps/business/src/components/Sidebar.module.css b/apps/business/src/components/Sidebar.module.css
index e9ef6c0..d114c34 100644
--- a/apps/business/src/components/Sidebar.module.css
+++ b/apps/business/src/components/Sidebar.module.css
@@ -1,7 +1,7 @@
 .sidebar {
   position: fixed;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: var(--sidebar-width);
   height: 100vh;
   display: flex;
@@ -10,7 +10,7 @@
   background: var(--glass-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border-right: 1px solid var(--glass-border);
+  border-inline-end: 1px solid var(--glass-border);
   z-index: 100;
 }
 
@@ -45,26 +45,26 @@
 }
 
 .brandDomain {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  line-height: 1.2;
-}
-
-.brandName {
   font-size: 11px;
   font-weight: 500;
   color: var(--text-muted);
   margin-top: 2px;
 }
 
+.brandName {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
 .nav {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 2px;
   overflow-y: auto;
-  padding-right: 2px;
+  padding-inline-end: 2px;
 }
 
 .navGroup {
@@ -83,7 +83,7 @@
   color: var(--text-secondary);
   transition: all 0.2s ease;
   width: 100%;
-  text-align: left;
+  text-align: start;
 }
 
 .navItem:hover {
@@ -118,9 +118,10 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin: 2px 0 4px 12px;
-  padding-left: 12px;
-  border-left: 2px solid rgba(148, 163, 184, 0.2);
+  margin-block: 2px 4px;
+  margin-inline-start: 12px;
+  padding-inline-start: 12px;
+  border-inline-start: 2px solid rgba(148, 163, 184, 0.2);
 }
 
 .subNavItem {
diff --git a/apps/business/src/components/Sidebar.tsx b/apps/business/src/components/Sidebar.tsx
index 2e5aecc..e4daf2d 100644
--- a/apps/business/src/components/Sidebar.tsx
+++ b/apps/business/src/components/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { NavLink, useLocation, useNavigate } from 'react-router-dom'
 import {
   Home,
@@ -15,7 +15,10 @@ import {
   Building2,
 } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
+import { useT } from '../i18n/useT'
+import type { BusinessMessageKey } from '../i18n/messages'
 import {
   BUSINESS_PROFILE_UPDATED_EVENT,
   getActiveBusinessDomain,
@@ -26,111 +29,29 @@ import meshkeeLogo from '../assets/meshkee-logo.png'
 import styles from './Sidebar.module.css'
 
 interface NavChild {
-  label: string
+  labelKey: BusinessMessageKey
   to: string
 }
 
 interface NavGroup {
   type: 'group'
+  id: string
   icon: LucideIcon
-  label: string
+  labelKey: BusinessMessageKey
   basePath: string
   children: NavChild[]
 }
 
 interface NavLinkItem {
   type: 'link'
+  id: string
   icon: LucideIcon
-  label: string
+  labelKey: BusinessMessageKey
   to: string
 }
 
 type NavItem = NavLinkItem | NavGroup
 
-const navItems: NavItem[] = [
-  { type: 'link', icon: Home, label: 'Home', to: '/' },
-  { type: 'link', icon: Building2, label: 'Business Profile', to: '/business-profile' },
-  {
-    type: 'group',
-    icon: ShoppingBag,
-    label: 'Products',
-    basePath: '/products',
-    children: [
-      { label: 'Overview', to: '/products' },
-      { label: 'My Products', to: '/products/list' },
-      { label: 'Add New Product', to: '/products/new' },
-      { label: 'Categories', to: '/products/categories' },
-      { label: 'Brands', to: '/products/brands' },
-      { label: 'Settings', to: '/products/settings' },
-    ],
-  },
-  {
-    type: 'group',
-    icon: Store,
-    label: 'Store',
-    basePath: '/store',
-    children: [
-      { label: 'Overview', to: '/store' },
-      { label: 'My Store Items', to: '/store/items' },
-      { label: 'My Orders', to: '/store/orders' },
-      { label: 'Shipping Fees', to: '/store/shipping' },
-      { label: 'Shopping Cards', to: '/store/cards' },
-      { label: 'Settings', to: '/store/settings' },
-    ],
-  },
-  { type: 'link', icon: Users, label: 'Customers', to: '/customers' },
-  { type: 'link', icon: Settings, label: 'Settings', to: '/settings' },
-  {
-    type: 'group',
-    icon: FileText,
-    label: 'Blog',
-    basePath: '/blog',
-    children: [
-      { label: 'Overview', to: '/blog' },
-      { label: 'My Blogs', to: '/blog/list' },
-      { label: 'Add New Blog', to: '/blog/new' },
-      { label: 'Categories', to: '/blog/categories' },
-      { label: 'Settings', to: '/blog/settings' },
-    ],
-  },
-  {
-    type: 'group',
-    icon: Briefcase,
-    label: 'Portfolios',
-    basePath: '/portfolios',
-    children: [
-      { label: 'Overview', to: '/portfolios' },
-      { label: 'My Portfolios', to: '/portfolios/list' },
-      { label: 'Add New Portfolio', to: '/portfolios/new' },
-      { label: 'Categories', to: '/portfolios/categories' },
-      { label: 'Settings', to: '/portfolios/settings' },
-    ],
-  },
-  {
-    type: 'group',
-    icon: Globe,
-    label: 'Website',
-    basePath: '/website',
-    children: [
-      { label: 'Overview', to: '/website' },
-      { label: 'Sliders', to: '/website/sliders' },
-      { label: 'Special Categories', to: '/website/special-categories' },
-      { label: 'Special Brands', to: '/website/special-brands' },
-      { label: 'Special Items', to: '/website/special-items' },
-      { label: 'Contact Us Form', to: '/website/contact' },
-      { label: 'Subscriptions', to: '/website/subscriptions' },
-      { label: 'FAQ', to: '/website/faq' },
-      { label: 'Badges', to: '/website/badges' },
-      { label: 'E-Payment', to: '/website/e-payment' },
-    ],
-  },
-]
-
-const footerItems = [
-  { icon: HelpCircle, label: 'Help Center' },
-  { icon: LogOut, label: 'Logout' },
-]
-
 function isGroupActive(basePath: string, pathname: string) {
   return pathname === basePath || pathname.startsWith(`${basePath}/`)
 }
@@ -139,12 +60,115 @@ export function Sidebar() {
   const { pathname } = useLocation()
   const navigate = useNavigate()
   const { user, logout } = useAuth()
+  const { locale } = useLocale()
+  const t = useT()
   const [openGroups, setOpenGroups] = useState<Record<string, boolean>>({})
   const [brandLogoUrl, setBrandLogoUrl] = useState<string | null>(null)
-  const [brandName, setBrandName] = useState('')
+  const [nameEn, setNameEn] = useState('')
+  const [nameFa, setNameFa] = useState('')
 
   const businessDomain = getActiveBusinessDomain()
-  const fallbackBusinessName = user?.businesses[0]?.name ?? 'Business'
+  const fallbackBusinessName = user?.businesses[0]?.name ?? t('app.storeFallback')
+
+  const brandName = useMemo(() => {
+    if (locale === 'fa') {
+      return nameFa.trim() || nameEn.trim() || fallbackBusinessName
+    }
+    return nameEn.trim() || nameFa.trim() || fallbackBusinessName
+  }, [locale, nameEn, nameFa, fallbackBusinessName])
+
+  const navItems = useMemo<NavItem[]>(
+    () => [
+      { type: 'link', id: 'home', icon: Home, labelKey: 'nav.home', to: '/' },
+      {
+        type: 'link',
+        id: 'business-profile',
+        icon: Building2,
+        labelKey: 'nav.businessProfile',
+        to: '/business-profile',
+      },
+      {
+        type: 'group',
+        id: 'products',
+        icon: ShoppingBag,
+        labelKey: 'nav.products',
+        basePath: '/products',
+        children: [
+          { labelKey: 'nav.products.overview', to: '/products' },
+          { labelKey: 'nav.products.list', to: '/products/list' },
+          { labelKey: 'nav.products.new', to: '/products/new' },
+          { labelKey: 'nav.products.categories', to: '/products/categories' },
+          { labelKey: 'nav.products.brands', to: '/products/brands' },
+          { labelKey: 'nav.products.settings', to: '/products/settings' },
+        ],
+      },
+      {
+        type: 'group',
+        id: 'store',
+        icon: Store,
+        labelKey: 'nav.store',
+        basePath: '/store',
+        children: [
+          { labelKey: 'nav.store.overview', to: '/store' },
+          { labelKey: 'nav.store.items', to: '/store/items' },
+          { labelKey: 'nav.store.orders', to: '/store/orders' },
+          { labelKey: 'nav.store.shipping', to: '/store/shipping' },
+          { labelKey: 'nav.store.cards', to: '/store/cards' },
+          { labelKey: 'nav.store.settings', to: '/store/settings' },
+        ],
+      },
+      { type: 'link', id: 'customers', icon: Users, labelKey: 'nav.customers', to: '/customers' },
+      { type: 'link', id: 'settings', icon: Settings, labelKey: 'nav.settings', to: '/settings' },
+      {
+        type: 'group',
+        id: 'blog',
+        icon: FileText,
+        labelKey: 'nav.blog',
+        basePath: '/blog',
+        children: [
+          { labelKey: 'nav.blog.overview', to: '/blog' },
+          { labelKey: 'nav.blog.list', to: '/blog/list' },
+          { labelKey: 'nav.blog.new', to: '/blog/new' },
+          { labelKey: 'nav.blog.categories', to: '/blog/categories' },
+          { labelKey: 'nav.blog.settings', to: '/blog/settings' },
+        ],
+      },
+      {
+        type: 'group',
+        id: 'portfolios',
+        icon: Briefcase,
+        labelKey: 'nav.portfolios',
+        basePath: '/portfolios',
+        children: [
+          { labelKey: 'nav.portfolios.overview', to: '/portfolios' },
+          { labelKey: 'nav.portfolios.list', to: '/portfolios/list' },
+          { labelKey: 'nav.portfolios.new', to: '/portfolios/new' },
+          { labelKey: 'nav.portfolios.categories', to: '/portfolios/categories' },
+          { labelKey: 'nav.portfolios.settings', to: '/portfolios/settings' },
+        ],
+      },
+      {
+        type: 'group',
+        id: 'website',
+        icon: Globe,
+        labelKey: 'nav.website',
+        basePath: '/website',
+        children: [
+          { labelKey: 'nav.website.overview', to: '/website' },
+          { labelKey: 'nav.website.sliders', to: '/website/sliders' },
+          { labelKey: 'nav.website.specialCategories', to: '/website/special-categories' },
+          { labelKey: 'nav.website.specialBrands', to: '/website/special-brands' },
+          { labelKey: 'nav.website.specialItems', to: '/website/special-items' },
+          { labelKey: 'nav.website.contact', to: '/website/contact' },
+          { labelKey: 'nav.website.subscriptions', to: '/website/subscriptions' },
+          { labelKey: 'nav.website.faq', to: '/website/faq' },
+          { labelKey: 'nav.website.badges', to: '/website/badges' },
+          { labelKey: 'nav.website.ePayment', to: '/website/e-payment' },
+        ],
+      },
+    ],
+    [],
+  )
 
   useEffect(() => {
     const controller = new AbortController()
@@ -153,11 +177,13 @@ export function Sidebar() {
       try {
         const data = await getBusinessProfile(controller.signal)
         setBrandLogoUrl(data.profile.logoUrl)
-        setBrandName(data.profile.nameEn.trim() || data.profile.nameFa.trim() || fallbackBusinessName)
+        setNameEn(data.profile.nameEn.trim())
+        setNameFa(data.profile.nameFa.trim())
       } catch (err) {
         if (isAbortError(err)) return
         setBrandLogoUrl(null)
-        setBrandName(fallbackBusinessName)
+        setNameEn('')
+        setNameFa('')
       }
     }
 
@@ -172,18 +198,18 @@ export function Sidebar() {
       controller.abort()
       window.removeEventListener(BUSINESS_PROFILE_UPDATED_EVENT, handleProfileUpdated)
     }
-  }, [fallbackBusinessName])
+  }, [])
 
   useEffect(() => {
     navItems.forEach((item) => {
       if (item.type === 'group' && isGroupActive(item.basePath, pathname)) {
-        setOpenGroups((prev) => ({ ...prev, [item.label]: true }))
+        setOpenGroups((prev) => ({ ...prev, [item.id]: true }))
       }
     })
-  }, [pathname])
+  }, [pathname, navItems])
 
-  function toggleGroup(label: string) {
-    setOpenGroups((prev) => ({ ...prev, [label]: !prev[label] }))
+  function toggleGroup(id: string) {
+    setOpenGroups((prev) => ({ ...prev, [id]: !prev[id] }))
   }
 
   return (
@@ -191,12 +217,12 @@ export function Sidebar() {
       <div className={styles.brand}>
         <img
           src={brandLogoUrl ?? meshkeeLogo}
-          alt={brandName || 'Business logo'}
+          alt={brandName || t('app.storeFallback')}
           className={`${styles.brandLogo} ${brandLogoUrl ? styles.brandLogoUploaded : ''}`}
         />
         <div className={styles.brandText}>
-          <span className={styles.brandDomain}>{businessDomain}</span>
           <span className={styles.brandName}>{brandName || fallbackBusinessName}</span>
+          <span className={styles.brandDomain}>{businessDomain}</span>
         </div>
       </div>
 
@@ -205,7 +231,7 @@ export function Sidebar() {
           if (item.type === 'link') {
             return (
               <NavLink
-                key={item.label}
+                key={item.id}
                 to={item.to}
                 end={item.to === '/'}
                 className={({ isActive }) =>
@@ -213,24 +239,24 @@ export function Sidebar() {
                 }
               >
                 <item.icon size={20} />
-                <span>{item.label}</span>
+                <span>{t(item.labelKey)}</span>
               </NavLink>
             )
           }
 
-          const isOpen = openGroups[item.label] ?? false
+          const isOpen = openGroups[item.id] ?? false
           const groupActive = isGroupActive(item.basePath, pathname)
 
           return (
-            <div key={item.label} className={styles.navGroup}>
+            <div key={item.id} className={styles.navGroup}>
               <button
                 type="button"
                 className={`${styles.navItem} ${styles.navGroupBtn} ${groupActive ? styles.active : ''}`}
-                onClick={() => toggleGroup(item.label)}
+                onClick={() => toggleGroup(item.id)}
                 aria-expanded={isOpen}
               >
                 <item.icon size={20} />
-                <span className={styles.navGroupLabel}>{item.label}</span>
+                <span className={styles.navGroupLabel}>{t(item.labelKey)}</span>
                 <ChevronDown
                   size={16}
                   className={`${styles.chevron} ${isOpen ? styles.chevronOpen : ''}`}
@@ -248,7 +274,7 @@ export function Sidebar() {
                         `${styles.subNavItem} ${isActive ? styles.subNavActive : ''}`
                       }
                     >
-                      {child.label}
+                      {t(child.labelKey)}
                     </NavLink>
                   ))}
                 </div>
@@ -259,22 +285,21 @@ export function Sidebar() {
       </nav>
 
       <div className={styles.footer}>
-        {footerItems.map(({ icon: Icon, label }) => (
-          <button
-            key={label}
-            type="button"
-            className={styles.navItem}
-            onClick={() => {
-              if (label === 'Logout') {
-                logout()
-                navigate('/login')
-              }
-            }}
-          >
-            <Icon size={20} />
-            <span>{label}</span>
-          </button>
-        ))}
+        <button type="button" className={styles.navItem}>
+          <HelpCircle size={20} />
+          <span>{t('nav.help')}</span>
+        </button>
+        <button
+          type="button"
+          className={styles.navItem}
+          onClick={() => {
+            logout()
+            navigate('/login')
+          }}
+        >
+          <LogOut size={20} />
+          <span>{t('nav.logout')}</span>
+        </button>
       </div>
     </aside>
   )
diff --git a/apps/business/src/components/StoreItemCard.module.css b/apps/business/src/components/StoreItemCard.module.css
index ebe8db2..ac3e001 100644
--- a/apps/business/src/components/StoreItemCard.module.css
+++ b/apps/business/src/components/StoreItemCard.module.css
@@ -101,7 +101,7 @@
 }
 
 .nameFa {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: 12px;
   font-weight: 500;
   color: var(--text-secondary);
diff --git a/apps/business/src/components/WebsiteGroupItemCard.module.css b/apps/business/src/components/WebsiteGroupItemCard.module.css
index a0cb097..f725e37 100644
--- a/apps/business/src/components/WebsiteGroupItemCard.module.css
+++ b/apps/business/src/components/WebsiteGroupItemCard.module.css
@@ -31,7 +31,7 @@
 
 .nameFa {
   margin-top: 4px;
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: 13px;
   font-weight: 500;
   color: var(--text-secondary);
diff --git a/apps/business/src/context/TenantBrandingContext.tsx b/apps/business/src/context/TenantBrandingContext.tsx
index 63e8d0e..c6d3371 100644
--- a/apps/business/src/context/TenantBrandingContext.tsx
+++ b/apps/business/src/context/TenantBrandingContext.tsx
@@ -4,10 +4,12 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from 'react'
 import { applyDocumentFavicon } from '@meshkee/dashboard-core'
+import { useLocale } from '@meshkee/dashboard-ui'
 import { isAbortError } from '../lib/api'
 import { getBusinessDomain } from '../lib/config'
 import { BUSINESS_PROFILE_UPDATED_EVENT } from '../lib/businessContext'
@@ -34,10 +36,13 @@ function pickBusinessName(
 }
 
 export function TenantBrandingProvider({ children }: { children: ReactNode }) {
-  const [businessName, setBusinessName] = useState('')
+  const { locale, setLocale } = useLocale()
+  const [nameEn, setNameEn] = useState('')
+  const [nameFa, setNameFa] = useState('')
   const [logoUrl, setLogoUrl] = useState<string | null>(null)
   const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
   const [refreshToken, setRefreshToken] = useState(0)
+  const defaultLocaleAppliedRef = useRef(false)
 
   const refreshBranding = useCallback(() => {
     setRefreshToken((value) => value + 1)
@@ -52,7 +57,8 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
         const tenant = await resolveTenantByDomain(domain)
         if (controller.signal.aborted) return
 
-        let name = pickBusinessName(tenant.name, tenant.nameFa, domain)
+        let nextNameEn = pickBusinessName(tenant.name, domain)
+        let nextNameFa = pickBusinessName(tenant.nameFa, tenant.name, domain)
         let nextLogo = tenant.logoUrl?.trim() || null
         let nextFavicon =
           tenant.faviconUrl?.trim() || tenant.logoUrl?.trim() || null
@@ -60,10 +66,15 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
         try {
           const profile = await getBusinessProfile(controller.signal)
           if (!controller.signal.aborted) {
-            name = pickBusinessName(
+            nextNameEn = pickBusinessName(
               profile.profile.nameEn,
+              nextNameEn,
+              domain,
+            )
+            nextNameFa = pickBusinessName(
               profile.profile.nameFa,
-              name,
+              profile.profile.nameEn,
+              nextNameFa,
               domain,
             )
             nextLogo = profile.profile.logoUrl?.trim() || nextLogo
@@ -79,14 +90,25 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
         }
 
         if (!controller.signal.aborted) {
-          setBusinessName(name || domain)
+          setNameEn(nextNameEn || domain)
+          setNameFa(nextNameFa || nextNameEn || domain)
           setLogoUrl(nextLogo)
           setFaviconUrl(nextFavicon)
           applyDocumentFavicon(nextFavicon)
+          if (!defaultLocaleAppliedRef.current) {
+            defaultLocaleAppliedRef.current = true
+            if (tenant.defaultLocale === 'en' || tenant.defaultLocale === 'fa') {
+              setLocale(tenant.defaultLocale)
+            } else {
+              setLocale('fa')
+            }
+          }
         }
       } catch (err) {
         if (isAbortError(err) || controller.signal.aborted) return
-        setBusinessName(domain)
+        const domain = getBusinessDomain()
+        setNameEn(domain)
+        setNameFa(domain)
         setLogoUrl(null)
         setFaviconUrl(null)
         applyDocumentFavicon(null)
@@ -104,7 +126,14 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
       controller.abort()
       window.removeEventListener(BUSINESS_PROFILE_UPDATED_EVENT, handleProfileUpdated)
     }
-  }, [refreshToken, refreshBranding])
+  }, [refreshToken, refreshBranding, setLocale])
+
+  const businessName = useMemo(() => {
+    if (locale === 'fa') {
+      return nameFa.trim() || nameEn.trim() || getBusinessDomain()
+    }
+    return nameEn.trim() || nameFa.trim() || getBusinessDomain()
+  }, [locale, nameEn, nameFa])
 
   const value = useMemo(
     () => ({ businessName, logoUrl, faviconUrl, refreshBranding }),
diff --git a/apps/business/src/i18n/messages.ts b/apps/business/src/i18n/messages.ts
new file mode 100644
index 0000000..3bbfb86
--- /dev/null
+++ b/apps/business/src/i18n/messages.ts
@@ -0,0 +1,621 @@
+import type { DashboardLocale, RouteTitleRule } from '@meshkee/dashboard-core'
+
+const en = {
+  'app.dashboardName': 'Business Dashboard',
+  'app.storeFallback': 'Business',
+  'app.poweredBy': 'powered by Meshkee.app',
+  'app.userFallback': 'User',
+
+  'role.superAdmin': 'Super Admin',
+  'role.owner': 'Business Owner',
+  'role.staff': 'Staff',
+
+  'nav.home': 'Home',
+  'nav.businessProfile': 'Business Profile',
+  'nav.products': 'Products',
+  'nav.products.overview': 'Overview',
+  'nav.products.list': 'My Products',
+  'nav.products.new': 'Add New Product',
+  'nav.products.categories': 'Categories',
+  'nav.products.brands': 'Brands',
+  'nav.products.settings': 'Settings',
+  'nav.store': 'Store',
+  'nav.store.overview': 'Overview',
+  'nav.store.items': 'My Store Items',
+  'nav.store.orders': 'My Orders',
+  'nav.store.shipping': 'Shipping Fees',
+  'nav.store.cards': 'Shopping Cards',
+  'nav.store.settings': 'Settings',
+  'nav.customers': 'Customers',
+  'nav.settings': 'Settings',
+  'nav.blog': 'Blog',
+  'nav.blog.overview': 'Overview',
+  'nav.blog.list': 'My Blogs',
+  'nav.blog.new': 'Add New Blog',
+  'nav.blog.categories': 'Categories',
+  'nav.blog.settings': 'Settings',
+  'nav.portfolios': 'Portfolios',
+  'nav.portfolios.overview': 'Overview',
+  'nav.portfolios.list': 'My Portfolios',
+  'nav.portfolios.new': 'Add New Portfolio',
+  'nav.portfolios.categories': 'Categories',
+  'nav.portfolios.settings': 'Settings',
+  'nav.website': 'Website',
+  'nav.website.overview': 'Overview',
+  'nav.website.sliders': 'Sliders',
+  'nav.website.specialCategories': 'Special Categories',
+  'nav.website.specialBrands': 'Special Brands',
+  'nav.website.specialItems': 'Special Items',
+  'nav.website.contact': 'Contact Us Form',
+  'nav.website.subscriptions': 'Subscriptions',
+  'nav.website.faq': 'FAQ',
+  'nav.website.badges': 'Badges',
+  'nav.website.ePayment': 'E-Payment',
+  'nav.help': 'Help Center',
+  'nav.logout': 'Logout',
+
+  'header.toggleMenu': 'Toggle menu',
+  'header.title': 'Admin Dashboard',
+  'header.messages': 'Messages',
+  'header.notifications': 'Notifications',
+  'header.profile': 'Profile',
+  'header.setting': 'Setting',
+  'header.changePassword': 'Change password',
+
+  'bc.dashboard': 'Dashboard',
+  'bc.editProduct': 'Edit Product',
+  'bc.productDetails': 'Product Details',
+  'bc.editBlog': 'Edit Blog',
+  'bc.blogDetails': 'Blog Details',
+  'bc.editPortfolio': 'Edit Portfolio',
+  'bc.portfolioDetails': 'Portfolio Details',
+
+  'home.welcome': 'Welcome back, {name}!',
+  'home.welcomeFallback': 'there',
+  'home.subtitle': "Here's what's happening with your store today.",
+  'home.card.products.title': 'Products',
+  'home.card.products.desc': 'Manage your products, inventory and categories.',
+  'home.card.products.link': 'View products',
+  'home.card.products.count': 'products',
+  'home.card.store.title': 'Store',
+  'home.card.store.desc': 'Manage your store settings, pages and themes.',
+  'home.card.store.link': 'View store',
+  'home.card.store.count': 'on sale',
+  'home.card.customers.title': 'Customers',
+  'home.card.customers.desc': 'View and manage your customers and their activity.',
+  'home.card.customers.link': 'View customers',
+  'home.card.customers.count': 'people',
+  'home.card.settings.title': 'Settings',
+  'home.card.settings.desc': 'Configure your store preferences and system settings.',
+  'home.card.settings.link': 'View settings',
+  'home.card.blog.title': 'Blog',
+  'home.card.blog.desc': 'Create and manage blog posts and categories.',
+  'home.card.blog.link': 'View blog',
+  'home.card.blog.count': 'posts',
+  'home.card.portfolios.title': 'Portfolios',
+  'home.card.portfolios.desc': 'Manage your portfolio items and showcase projects.',
+  'home.card.portfolios.link': 'View portfolios',
+  'home.card.portfolios.count': 'portfolios',
+  'home.card.website.title': 'Website',
+  'home.card.website.desc': 'Manage contact forms, FAQ, badges, subscriptions, and e-payment.',
+  'home.card.website.link': 'View website',
+
+  'home.chart.orders.title': 'Orders',
+  'home.chart.orders.subtitle': 'Orders and cart adds in the last 30 days',
+  'home.chart.orders.legend': 'Orders ({count})',
+  'home.chart.orders.cartLegend': 'Added to basket ({count})',
+  'home.chart.orders.loading': 'Loading chart...',
+  'home.chart.orders.error': 'Unable to load order activity.',
+  'home.chart.orders.bar': '{day}: {count} orders',
+  'home.chart.orders.cartBar': '{day}: {count} added to basket',
+  'home.chart.customers.title': 'Customers',
+  'home.chart.customers.subtitle': 'Registrations and active users in the last 30 days',
+  'home.chart.customers.legend': 'Registered ({count})',
+  'home.chart.customers.activeLegend': 'Active ({count})',
+  'home.chart.customers.loading': 'Loading chart...',
+  'home.chart.customers.error': 'Unable to load customer activity.',
+  'home.chart.customers.bar': '{day}: {count} registered',
+  'home.chart.customers.activeBar': '{day}: {count} active',
+
+  'products.overview.subtitle': 'Manage your products, inventory and categories.',
+  'products.card.list.desc': 'View, edit and manage all your existing products.',
+  'products.card.new.title': 'Add a New Product',
+  'products.card.new.desc': 'Create and publish a new product to your store.',
+  'products.form.edit.subtitle': 'Update product details and save changes.',
+  'products.card.categories.desc': 'Organize your products into categories and subcategories.',
+  'products.card.brands.desc': 'Manage product brands and assign them when creating products.',
+  'products.card.settings.desc': 'Configure product defaults, variants and display options.',
+  'products.activity.title': 'Product activity',
+  'products.activity.subtitle': 'Products added or updated in the last 12 months',
+  'products.activity.added': 'Added ({count})',
+  'products.activity.updated': 'Updated ({count})',
+  'products.activity.loading': 'Loading chart...',
+  'products.activity.error': 'Unable to load product activity.',
+  'products.activity.chartAria': 'Bar chart of products added and updated per month',
+  'products.activity.barAdded': '{month}: {count} added',
+  'products.activity.barUpdated': '{month}: {count} updated',
+
+  'title.signIn': 'Sign in',
+  'title.home': 'Home',
+  'title.businessProfile': 'Business Profile',
+  'title.products': 'Products',
+  'title.myProducts': 'My Products',
+  'title.addProduct': 'Add New Product',
+  'title.editProduct': 'Edit Product',
+  'title.productDetails': 'Product Details',
+  'title.categories': 'Categories',
+  'title.brands': 'Brands',
+  'title.settings': 'Settings',
+  'title.store': 'Store',
+  'title.storeItems': 'My Store Items',
+  'title.orders': 'My Orders',
+  'title.shoppingCards': 'Shopping Cards',
+  'title.customers': 'Customers',
+  'title.blog': 'Blog',
+  'title.myBlogs': 'My Blogs',
+  'title.addBlog': 'Add New Blog',
+  'title.editBlog': 'Edit Blog',
+  'title.blogDetails': 'Blog Details',
+  'title.portfolios': 'Portfolios',
+  'title.myPortfolios': 'My Portfolios',
+  'title.addPortfolio': 'Add New Portfolio',
+  'title.editPortfolio': 'Edit Portfolio',
+  'title.portfolioDetails': 'Portfolio Details',
+  'title.website': 'Website',
+  'title.sliders': 'Sliders',
+  'title.specialCategories': 'Special Categories',
+  'title.specialBrands': 'Special Brands',
+  'title.specialItems': 'Special Items',
+  'title.contactForm': 'Contact Us Form',
+  'title.subscriptions': 'Subscriptions',
+  'title.faq': 'FAQ',
+  'title.badges': 'Badges',
+  'title.ePayment': 'E-Payment',
+
+  'login.welcome': 'Welcome back',
+  'login.subtitle': 'Sign in with your mobile number',
+  'login.mobile': 'Mobile number',
+  'login.password': 'Password',
+  'login.passwordPlaceholder': 'Enter your password',
+  'login.hidePassword': 'Hide password',
+  'login.showPassword': 'Show password',
+  'login.forgot': 'Forgot password?',
+  'login.signIn': 'Sign in',
+  'login.signingIn': 'Signing in...',
+  'login.or': 'or',
+  'login.otp': 'One-time login with SMS',
+  'login.noAccount': "Don't have an account?",
+  'login.signUp': 'Sign up',
+  'login.error.signIn': 'Unable to sign in. Check your connection and try again.',
+  'login.error.sendCode': 'Unable to send verification code.',
+  'login.error.access': 'You do not have access to this business dashboard.',
+
+  'signup.title': 'Create account',
+  'signup.subtitle': 'Register for {domain}',
+  'signup.firstName': 'First name',
+  'signup.lastName': 'Last name',
+  'signup.passwordPlaceholder': 'Choose a password',
+  'signup.confirm': 'Confirm password',
+  'signup.confirmPlaceholder': 'Repeat your password',
+  'signup.create': 'Create account',
+  'signup.creating': 'Creating account...',
+  'signup.hasAccount': 'Already have an account?',
+  'signup.signIn': 'Sign in',
+  'signup.error.match': 'Passwords do not match.',
+  'signup.error.length': 'Password must be at least 8 characters.',
+  'signup.error.create': 'Unable to create account.',
+
+  'forgot.back': 'Back to sign in',
+  'forgot.title': 'Forgot password',
+  'forgot.subtitlePhone': 'We will send a verification code via SMS',
+  'forgot.subtitleCode': 'Enter the code and your new password',
+  'forgot.sendCode': 'Send SMS code',
+  'forgot.sending': 'Sending...',
+  'forgot.code': 'SMS verification code',
+  'forgot.newPassword': 'New password',
+  'forgot.newPasswordPlaceholder': 'Enter new password',
+  'forgot.reset': 'Reset password',
+  'forgot.verifying': 'Verifying...',
+  'forgot.error.length': 'Password must be at least 8 characters.',
+  'forgot.error.verify': 'Unable to verify code.',
+  'forgot.info.partial':
+    'Phone number verified. Full password reset via SMS is not available yet — please contact support or sign in if you remember your password.',
+
+  'otp.back': 'Back to sign in',
+  'otp.title': 'One-time login',
+  'otp.subtitlePhone': 'Verify your mobile number with a one-time SMS code',
+  'otp.subtitleCode': 'Enter the SMS code and your password',
+  'otp.sendCode': 'Send SMS code',
+  'otp.sending': 'Sending...',
+  'otp.code': 'SMS verification code',
+  'otp.password': 'Password',
+  'otp.passwordPlaceholder': 'Your account password',
+  'otp.signIn': 'Sign in',
+  'otp.signingIn': 'Signing in...',
+  'otp.error.password': 'Enter your account password to complete sign-in after SMS verification.',
+  'otp.error.signIn': 'Unable to sign in with SMS verification.',
+
+  'common.close': 'Close',
+  'common.resendIn': 'Resend code in {seconds}s',
+  'common.resend': 'Resend SMS code',
+  'common.codeSent': 'Verification code sent to {phone}',
+  'common.breadcrumb': 'Breadcrumb',
+  'common.overview': 'Overview',
+} as const
+
+type MessageKey = keyof typeof en
+
+const fa: Record<MessageKey, string> = {
+  'app.dashboardName': 'پنل کسب‌وکار',
+  'app.storeFallback': 'کسب‌وکار',
+  'app.poweredBy': 'قدرت‌گرفته از Meshkee.app',
+  'app.userFallback': 'کاربر',
+
+  'role.superAdmin': 'سوپرادمین',
+  'role.owner': 'صاحب کسب‌وکار',
+  'role.staff': 'کارمند',
+
+  'nav.home': 'خانه',
+  'nav.businessProfile': 'پروفایل کسب‌وکار',
+  'nav.products': 'محصولات',
+  'nav.products.overview': 'نمای کلی',
+  'nav.products.list': 'محصولات من',
+  'nav.products.new': 'افزودن محصول',
+  'nav.products.categories': 'دسته‌بندی‌ها',
+  'nav.products.brands': 'برندها',
+  'nav.products.settings': 'تنظیمات',
+  'nav.store': 'فروشگاه',
+  'nav.store.overview': 'نمای کلی',
+  'nav.store.items': 'اقلام فروشگاه',
+  'nav.store.orders': 'سفارش‌های من',
+  'nav.store.shipping': 'هزینه ارسال',
+  'nav.store.cards': 'کارت‌های خرید',
+  'nav.store.settings': 'تنظیمات',
+  'nav.customers': 'مشتریان',
+  'nav.settings': 'تنظیمات',
+  'nav.blog': 'بلاگ',
+  'nav.blog.overview': 'نمای کلی',
+  'nav.blog.list': 'بلاگ‌های من',
+  'nav.blog.new': 'افزودن بلاگ',
+  'nav.blog.categories': 'دسته‌بندی‌ها',
+  'nav.blog.settings': 'تنظیمات',
+  'nav.portfolios': 'نمونه کارها',
+  'nav.portfolios.overview': 'نمای کلی',
+  'nav.portfolios.list': 'نمونه کارهای من',
+  'nav.portfolios.new': 'افزودن نمونه کار',
+  'nav.portfolios.categories': 'دسته‌بندی‌ها',
+  'nav.portfolios.settings': 'تنظیمات',
+  'nav.website': 'وب‌سایت',
+  'nav.website.overview': 'نمای کلی',
+  'nav.website.sliders': 'اسلایدرها',
+  'nav.website.specialCategories': 'دسته‌های ویژه',
+  'nav.website.specialBrands': 'برندهای ویژه',
+  'nav.website.specialItems': 'اقلام ویژه',
+  'nav.website.contact': 'فرم تماس با ما',
+  'nav.website.subscriptions': 'عضویت‌ها',
+  'nav.website.faq': 'سوالات متداول',
+  'nav.website.badges': 'نشان‌ها',
+  'nav.website.ePayment': 'پرداخت الکترونیک',
+  'nav.help': 'مرکز راهنما',
+  'nav.logout': 'خروج',
+
+  'header.toggleMenu': 'باز و بسته کردن منو',
+  'header.title': 'پنل مدیریت',
+  'header.messages': 'پیام‌ها',
+  'header.notifications': 'اعلان‌ها',
+  'header.profile': 'پروفایل',
+  'header.setting': 'تنظیمات',
+  'header.changePassword': 'تغییر رمز عبور',
+
+  'bc.dashboard': 'داشبورد',
+  'bc.editProduct': 'ویرایش محصول',
+  'bc.productDetails': 'جزئیات محصول',
+  'bc.editBlog': 'ویرایش بلاگ',
+  'bc.blogDetails': 'جزئیات بلاگ',
+  'bc.editPortfolio': 'ویرایش نمونه کار',
+  'bc.portfolioDetails': 'جزئیات نمونه کار',
+
+  'home.welcome': '{name} عزیز، خوش آمدی.',
+  'home.welcomeFallback': 'کاربر',
+  'home.subtitle': 'وضعیت فروشگاهتان را از اینجا دنبال کنید.',
+  'home.card.products.title': 'محصولات',
+  'home.card.products.desc': 'محصولات، موجودی و دسته‌بندی‌ها را مدیریت کنید.',
+  'home.card.products.link': 'مشاهده محصولات',
+  'home.card.products.count': 'محصول',
+  'home.card.store.title': 'فروشگاه',
+  'home.card.store.desc': 'تنظیمات، صفحات و ظاهر فروشگاه را مدیریت کنید.',
+  'home.card.store.link': 'مشاهده فروشگاه',
+  'home.card.store.count': 'محصول فروش',
+  'home.card.customers.title': 'مشتریان',
+  'home.card.customers.desc': 'مشتریان و فعالیت آن‌ها را ببینید و مدیریت کنید.',
+  'home.card.customers.link': 'مشاهده مشتریان',
+  'home.card.customers.count': 'نفر',
+  'home.card.settings.title': 'تنظیمات',
+  'home.card.settings.desc': 'ترجیحات فروشگاه و تنظیمات سیستم را پیکربندی کنید.',
+  'home.card.settings.link': 'مشاهده تنظیمات',
+  'home.card.blog.title': 'بلاگ',
+  'home.card.blog.desc': 'مطالب و دسته‌بندی‌های بلاگ را ایجاد و مدیریت کنید.',
+  'home.card.blog.link': 'مشاهده بلاگ',
+  'home.card.blog.count': 'مطلب',
+  'home.card.portfolios.title': 'نمونه کارها',
+  'home.card.portfolios.desc': 'نمونه کارها و پروژه‌های نمایشی را مدیریت کنید.',
+  'home.card.portfolios.link': 'مشاهده نمونه کارها',
+  'home.card.portfolios.count': 'نمونه کار',
+  'home.card.website.title': 'وب‌سایت',
+  'home.card.website.desc': 'فرم تماس، سوالات متداول، نشان‌ها، عضویت‌ها و پرداخت الکترونیک.',
+  'home.card.website.link': 'مشاهده وب‌سایت',
+
+  'home.chart.orders.title': 'سفارش‌ها',
+  'home.chart.orders.subtitle': 'سفارش‌ها و افزودن به سبد در ۳۰ روز گذشته',
+  'home.chart.orders.legend': 'سفارش ({count})',
+  'home.chart.orders.cartLegend': 'افزودن به سبد ({count})',
+  'home.chart.orders.loading': 'در حال بارگذاری نمودار...',
+  'home.chart.orders.error': 'بارگذاری فعالیت سفارش‌ها ممکن نشد.',
+  'home.chart.orders.bar': '{day}: {count} سفارش',
+  'home.chart.orders.cartBar': '{day}: {count} افزودن به سبد',
+  'home.chart.customers.title': 'مشتریان',
+  'home.chart.customers.subtitle': 'ثبت‌نام و کاربران فعال در ۳۰ روز گذشته',
+  'home.chart.customers.legend': 'ثبت‌نام ({count})',
+  'home.chart.customers.activeLegend': 'فعال ({count})',
+  'home.chart.customers.loading': 'در حال بارگذاری نمودار...',
+  'home.chart.customers.error': 'بارگذاری فعالیت مشتریان ممکن نشد.',
+  'home.chart.customers.bar': '{day}: {count} ثبت‌نام',
+  'home.chart.customers.activeBar': '{day}: {count} فعال',
+
+  'products.overview.subtitle': 'محصولات، موجودی و دسته‌بندی‌ها را مدیریت کنید.',
+  'products.card.list.desc': 'همه محصولات موجود را ببینید، ویرایش و مدیریت کنید.',
+  'products.card.new.title': 'افزودن محصول جدید',
+  'products.card.new.desc': 'یک محصول جدید بسازید و در فروشگاه منتشر کنید.',
+  'products.form.edit.subtitle': 'جزئیات محصول را به‌روز کنید و ذخیره کنید.',
+  'products.card.categories.desc': 'محصولات را در دسته‌بندی‌ها و زیردسته‌ها سازماندهی کنید.',
+  'products.card.brands.desc': 'برندهای محصول را مدیریت کنید و هنگام ساخت محصول به آن‌ها اختصاص دهید.',
+  'products.card.settings.desc': 'پیش‌فرض‌ها، تنوع‌ها و گزینه‌های نمایش محصول را پیکربندی کنید.',
+  'products.activity.title': 'فعالیت محصولات',
+  'products.activity.subtitle': 'محصولات افزوده‌شده یا به‌روزرسانی‌شده در ۱۲ ماه گذشته',
+  'products.activity.added': 'افزوده‌شده ({count})',
+  'products.activity.updated': 'به‌روزرسانی‌شده ({count})',
+  'products.activity.loading': 'در حال بارگذاری نمودار...',
+  'products.activity.error': 'بارگذاری فعالیت محصولات ممکن نشد.',
+  'products.activity.chartAria': 'نمودار میله‌ای محصولات افزوده‌شده و به‌روزرسانی‌شده در هر ماه',
+  'products.activity.barAdded': '{month}: {count} افزوده‌شده',
+  'products.activity.barUpdated': '{month}: {count} به‌روزرسانی‌شده',
+
+  'title.signIn': 'ورود',
+  'title.home': 'خانه',
+  'title.businessProfile': 'پروفایل کسب‌وکار',
+  'title.products': 'محصولات',
+  'title.myProducts': 'محصولات من',
+  'title.addProduct': 'افزودن محصول',
+  'title.editProduct': 'ویرایش محصول',
+  'title.productDetails': 'جزئیات محصول',
+  'title.categories': 'دسته‌بندی‌ها',
+  'title.brands': 'برندها',
+  'title.settings': 'تنظیمات',
+  'title.store': 'فروشگاه',
+  'title.storeItems': 'اقلام فروشگاه',
+  'title.orders': 'سفارش‌های من',
+  'title.shoppingCards': 'کارت‌های خرید',
+  'title.customers': 'مشتریان',
+  'title.blog': 'بلاگ',
+  'title.myBlogs': 'بلاگ‌های من',
+  'title.addBlog': 'افزودن بلاگ',
+  'title.editBlog': 'ویرایش بلاگ',
+  'title.blogDetails': 'جزئیات بلاگ',
+  'title.portfolios': 'نمونه کارها',
+  'title.myPortfolios': 'نمونه کارهای من',
+  'title.addPortfolio': 'افزودن نمونه کار',
+  'title.editPortfolio': 'ویرایش نمونه کار',
+  'title.portfolioDetails': 'جزئیات نمونه کار',
+  'title.website': 'وب‌سایت',
+  'title.sliders': 'اسلایدرها',
+  'title.specialCategories': 'دسته‌های ویژه',
+  'title.specialBrands': 'برندهای ویژه',
+  'title.specialItems': 'اقلام ویژه',
+  'title.contactForm': 'فرم تماس با ما',
+  'title.subscriptions': 'عضویت‌ها',
+  'title.faq': 'سوالات متداول',
+  'title.badges': 'نشان‌ها',
+  'title.ePayment': 'پرداخت الکترونیک',
+
+  'login.welcome': 'خوش آمدید',
+  'login.subtitle': 'با شماره موبایل وارد شوید',
+  'login.mobile': 'شماره موبایل',
+  'login.password': 'رمز عبور',
+  'login.passwordPlaceholder': 'رمز عبور را وارد کنید',
+  'login.hidePassword': 'مخفی کردن رمز',
+  'login.showPassword': 'نمایش رمز',
+  'login.forgot': 'رمز عبور را فراموش کرده‌اید؟',
+  'login.signIn': 'ورود',
+  'login.signingIn': 'در حال ورود...',
+  'login.or': 'یا',
+  'login.otp': 'ورود یک‌بارمصرف با پیامک',
+  'login.noAccount': 'حساب ندارید؟',
+  'login.signUp': 'ثبت‌نام',
+  'login.error.signIn': 'ورود ممکن نشد. اتصال را بررسی کنید و دوباره تلاش کنید.',
+  'login.error.sendCode': 'ارسال کد تأیید ممکن نشد.',
+  'login.error.access': 'به این پنل کسب‌وکار دسترسی ندارید.',
+
+  'signup.title': 'ایجاد حساب',
+  'signup.subtitle': 'ثبت‌نام برای {domain}',
+  'signup.firstName': 'نام',
+  'signup.lastName': 'نام خانوادگی',
+  'signup.passwordPlaceholder': 'یک رمز عبور انتخاب کنید',
+  'signup.confirm': 'تأیید رمز عبور',
+  'signup.confirmPlaceholder': 'رمز عبور را تکرار کنید',
+  'signup.create': 'ایجاد حساب',
+  'signup.creating': 'در حال ایجاد حساب...',
+  'signup.hasAccount': 'قبلاً حساب دارید؟',
+  'signup.signIn': 'ورود',
+  'signup.error.match': 'رمزهای عبور یکسان نیستند.',
+  'signup.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
+  'signup.error.create': 'ایجاد حساب ممکن نشد.',
+
+  'forgot.back': 'بازگشت به ورود',
+  'forgot.title': 'فراموشی رمز عبور',
+  'forgot.subtitlePhone': 'کد تأیید را با پیامک ارسال می‌کنیم',
+  'forgot.subtitleCode': 'کد و رمز عبور جدید را وارد کنید',
+  'forgot.sendCode': 'ارسال کد پیامکی',
+  'forgot.sending': 'در حال ارسال...',
+  'forgot.code': 'کد تأیید پیامکی',
+  'forgot.newPassword': 'رمز عبور جدید',
+  'forgot.newPasswordPlaceholder': 'رمز عبور جدید را وارد کنید',
+  'forgot.reset': 'بازنشانی رمز عبور',
+  'forgot.verifying': 'در حال تأیید...',
+  'forgot.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
+  'forgot.error.verify': 'تأیید کد ممکن نشد.',
+  'forgot.info.partial':
+    'شماره تأیید شد. بازنشانی کامل رمز با پیامک هنوز فعال نیست — با پشتیبانی تماس بگیرید یا اگر رمز را به یاد دارید وارد شوید.',
+
+  'otp.back': 'بازگشت به ورود',
+  'otp.title': 'ورود یک‌بارمصرف',
+  'otp.subtitlePhone': 'شماره موبایل را با کد پیامکی یک‌بارمصرف تأیید کنید',
+  'otp.subtitleCode': 'کد پیامکی و رمز عبور را وارد کنید',
+  'otp.sendCode': 'ارسال کد پیامکی',
+  'otp.sending': 'در حال ارسال...',
+  'otp.code': 'کد تأیید پیامکی',
+  'otp.password': 'رمز عبور',
+  'otp.passwordPlaceholder': 'رمز عبور حساب',
+  'otp.signIn': 'ورود',
+  'otp.signingIn': 'در حال ورود...',
+  'otp.error.password': 'برای تکمیل ورود پس از تأیید پیامک، رمز عبور حساب را وارد کنید.',
+  'otp.error.signIn': 'ورود با تأیید پیامکی ممکن نشد.',
+
+  'common.close': 'بستن',
+  'common.resendIn': 'ارسال مجدد کد تا {seconds} ثانیه',
+  'common.resend': 'ارسال مجدد کد پیامکی',
+  'common.codeSent': 'کد تأیید به {phone} ارسال شد',
+  'common.breadcrumb': 'مسیر صفحه',
+  'common.overview': 'نمای کلی',
+}
+
+const dictionaries: Record<DashboardLocale, Record<MessageKey, string>> = {
+  en: en as Record<MessageKey, string>,
+  fa,
+}
+
+export type BusinessMessageKey = MessageKey
+
+/** Maps hardcoded English breadcrumb labels used across pages → message keys. */
+const BREADCRUMB_LABEL_KEYS: Record<string, MessageKey> = {
+  Home: 'nav.home',
+  Dashboard: 'bc.dashboard',
+  'Business Profile': 'nav.businessProfile',
+  Products: 'nav.products',
+  Overview: 'common.overview',
+  'My Products': 'nav.products.list',
+  'Add New Product': 'nav.products.new',
+  'Add a New Product': 'nav.products.new',
+  'Edit Product': 'bc.editProduct',
+  'Product Details': 'bc.productDetails',
+  Categories: 'title.categories',
+  Brands: 'title.brands',
+  Settings: 'title.settings',
+  Store: 'nav.store',
+  'My Store Items': 'nav.store.items',
+  'My Orders': 'nav.store.orders',
+  'Shipping Fees': 'nav.store.shipping',
+  'Shopping Cards': 'nav.store.cards',
+  Customers: 'nav.customers',
+  Blog: 'nav.blog',
+  'My Blogs': 'nav.blog.list',
+  'Add New Blog': 'nav.blog.new',
+  'Edit Blog': 'bc.editBlog',
+  'Blog Details': 'bc.blogDetails',
+  Portfolios: 'nav.portfolios',
+  'My Portfolios': 'nav.portfolios.list',
+  'Add New Portfolio': 'nav.portfolios.new',
+  'Edit Portfolio': 'bc.editPortfolio',
+  'Portfolio Details': 'bc.portfolioDetails',
+  Website: 'nav.website',
+  Sliders: 'nav.website.sliders',
+  'Special Categories': 'nav.website.specialCategories',
+  'Special Brands': 'nav.website.specialBrands',
+  'Special Items': 'nav.website.specialItems',
+  'Contact Us Form': 'nav.website.contact',
+  Subscriptions: 'nav.website.subscriptions',
+  FAQ: 'nav.website.faq',
+  Badges: 'nav.website.badges',
+  'E-Payment': 'nav.website.ePayment',
+  Orders: 'nav.store.orders',
+  Profile: 'header.profile',
+  'Sign in': 'title.signIn',
+}
+
+export function translate(
+  locale: DashboardLocale,
+  key: MessageKey,
+  vars?: Record<string, string | number>,
+): string {
+  const dict = dictionaries[locale] ?? dictionaries.en
+  let text = dict[key] ?? dictionaries.en[key] ?? key
+  if (vars) {
+    for (const [name, value] of Object.entries(vars)) {
+      text = text.replaceAll(`{${name}}`, String(value))
+    }
+  }
+  return text
+}
+
+export function translateBreadcrumbLabel(locale: DashboardLocale, label: string): string {
+  const key = BREADCRUMB_LABEL_KEYS[label]
+  return key ? translate(locale, key) : label
+}
+
+export function getBusinessRouteTitleRules(locale: DashboardLocale): RouteTitleRule[] {
+  const t = (key: MessageKey) => translate(locale, key)
+  return [
+    { match: '/login', labels: [t('title.signIn')] },
+    { match: '/business-profile', labels: [t('title.businessProfile')] },
+    { match: '/products/categories', labels: [t('title.products'), t('title.categories')] },
+    { match: '/products/brands', labels: [t('title.products'), t('title.brands')] },
+    { match: '/products/new', labels: [t('title.products'), t('title.addProduct')] },
+    { match: /^\/products\/edit\/[^/]+$/, labels: [t('title.products'), t('title.editProduct')] },
+    { match: '/products/list', labels: [t('title.products'), t('title.myProducts')] },
+    {
+      match: /^\/products\/detail\/[^/]+$/,
+      labels: [t('title.products'), t('title.productDetails')],
+    },
+    { match: '/products/settings', labels: [t('title.products'), t('title.settings')] },
+    { match: '/products', labels: [t('title.products')] },
+    { match: '/store/items', labels: [t('title.store'), t('title.storeItems')] },
+    { match: '/store/orders', labels: [t('title.store'), t('title.orders')] },
+    { match: '/store/cards', labels: [t('title.store'), t('title.shoppingCards')] },
+    { match: '/store/settings', labels: [t('title.store'), t('title.settings')] },
+    { match: '/store', labels: [t('title.store')] },
+    { match: '/customers', labels: [t('title.customers')] },
+    { match: '/blog/list', labels: [t('title.blog'), t('title.myBlogs')] },
+    { match: /^\/blog\/detail\/[^/]+$/, labels: [t('title.blog'), t('title.blogDetails')] },
+    { match: '/blog/new', labels: [t('title.blog'), t('title.addBlog')] },
+    { match: /^\/blog\/edit\/[^/]+$/, labels: [t('title.blog'), t('title.editBlog')] },
+    { match: '/blog/categories', labels: [t('title.blog'), t('title.categories')] },
+    { match: '/blog/settings', labels: [t('title.blog'), t('title.settings')] },
+    { match: '/blog', labels: [t('title.blog')] },
+    { match: '/portfolios/list', labels: [t('title.portfolios'), t('title.myPortfolios')] },
+    {
+      match: /^\/portfolios\/detail\/[^/]+$/,
+      labels: [t('title.portfolios'), t('title.portfolioDetails')],
+    },
+    { match: '/portfolios/new', labels: [t('title.portfolios'), t('title.addPortfolio')] },
+    {
+      match: /^\/portfolios\/edit\/[^/]+$/,
+      labels: [t('title.portfolios'), t('title.editPortfolio')],
+    },
+    { match: '/portfolios/categories', labels: [t('title.portfolios'), t('title.categories')] },
+    { match: '/portfolios/settings', labels: [t('title.portfolios'), t('title.settings')] },
+    { match: '/portfolios', labels: [t('title.portfolios')] },
+    { match: '/website/sliders', labels: [t('title.website'), t('title.sliders')] },
+    {
+      match: '/website/special-categories',
+      labels: [t('title.website'), t('title.specialCategories')],
+    },
+    { match: '/website/special-brands', labels: [t('title.website'), t('title.specialBrands')] },
+    { match: '/website/special-items', labels: [t('title.website'), t('title.specialItems')] },
+    { match: '/website/contact', labels: [t('title.website'), t('title.contactForm')] },
+    { match: '/website/subscriptions', labels: [t('title.website'), t('title.subscriptions')] },
+    { match: '/website/faq', labels: [t('title.website'), t('title.faq')] },
+    { match: '/website/badges', labels: [t('title.website'), t('title.badges')] },
+    { match: '/website/e-payment', labels: [t('title.website'), t('title.ePayment')] },
+    { match: '/website', labels: [t('title.website')] },
+    { match: '/', labels: [t('title.home')] },
+  ]
+}
diff --git a/apps/business/src/i18n/useT.ts b/apps/business/src/i18n/useT.ts
new file mode 100644
index 0000000..e70a4c0
--- /dev/null
+++ b/apps/business/src/i18n/useT.ts
@@ -0,0 +1,13 @@
+import { useCallback } from 'react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { translate, type BusinessMessageKey } from './messages'
+
+export function useT() {
+  const { locale } = useLocale()
+
+  return useCallback(
+    (key: BusinessMessageKey, vars?: Record<string, string | number>) =>
+      translate(locale, key, vars),
+    [locale],
+  )
+}
diff --git a/apps/business/src/index.css b/apps/business/src/index.css
index 4162c77..2856a09 100644
--- a/apps/business/src/index.css
+++ b/apps/business/src/index.css
@@ -13,6 +13,10 @@
   --primary-dark: #2563eb;
   --primary-rgb: 59 130 246;
   --primary-dark-rgb: 37 99 235;
+  --chart-accent: #06b6d4;
+  --chart-accent-dark: #0891b2;
+  --chart-accent-rgb: 6 182 212;
+  --chart-accent-dark-rgb: 8 145 178;
   --bg-gradient-start: color-mix(in srgb, var(--primary-light) 72%, #ffffff);
   --bg-gradient-mid: color-mix(in srgb, var(--primary-light) 42%, #ffffff);
   --bg-gradient-end: color-mix(in srgb, var(--primary-light) 18%, #ffffff);
@@ -33,8 +37,9 @@
   --field-padding-y: 9px;
   --field-padding-x: 12px;
   --field-height: 38px;
-  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-fa: 'IRANYekan', 'IranYekan', 'Yekan', Tahoma, sans-serif;
+  --font-ui: var(--font-en), var(--font-fa);
 }
 
 html {
@@ -47,18 +52,64 @@ body,
 }
 
 body {
-  font-family: var(--font-en);
+  font-family: var(--font-ui);
   color: var(--text-primary);
   background-color: var(--bg-gradient-mid);
-  background-image:
-    radial-gradient(ellipse 520px 520px at calc(100% - 40px) -60px, rgba(var(--primary-rgb) / 0.28), transparent 72%),
-    radial-gradient(ellipse 420px 420px at 18% calc(100% + 20px), rgba(var(--primary-rgb) / 0.18), transparent 72%),
-    radial-gradient(ellipse 320px 320px at -40px 42%, rgba(var(--primary-rgb) / 0.12), transparent 72%),
-    linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
+  background-image: linear-gradient(
+    135deg,
+    var(--bg-gradient-start) 0%,
+    var(--bg-gradient-mid) 50%,
+    var(--bg-gradient-end) 100%
+  );
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: -30%;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      ellipse 520px 520px at 72% 18%,
+      rgba(var(--primary-rgb) / 0.3),
+      transparent 72%
+    ),
+    radial-gradient(
+      ellipse 420px 420px at 22% 82%,
+      rgba(var(--primary-rgb) / 0.2),
+      transparent 72%
+    ),
+    radial-gradient(
+      ellipse 360px 360px at 8% 42%,
+      rgba(var(--chart-accent-rgb, var(--primary-rgb)) / 0.14),
+      transparent 72%
+    );
+  animation: pageAuraDrift 22s ease-in-out infinite alternate;
+  will-change: transform;
+}
+
+@keyframes pageAuraDrift {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3.5%, -2.5%, 0) scale(1.06);
+  }
+  100% {
+    transform: translate3d(-3%, 3.5%, 0) scale(1.04);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body::before {
+    animation: none;
+  }
 }
 
 button {
@@ -103,7 +154,7 @@ select:focus {
 
 input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
 textarea {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: var(--field-font-size);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -124,16 +175,16 @@ textarea:focus {
 
 input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])::placeholder,
 textarea::placeholder {
-  font-family: var(--font-en);
+  font-family: var(--font-ui);
   opacity: 1;
 }
 
 [dir='rtl'],
 :lang(fa),
 .faText {
-  font-family: var(--font-fa), var(--font-en);
-  font-weight: 400; /* IRANYekan Regular */
-  text-align: right;
+  font-family: var(--font-ui);
+  font-weight: 400; /* IRANYekan Regular for FA glyphs */
+  text-align: start;
 }
 
 [dir='rtl']::placeholder,
@@ -142,7 +193,7 @@ textarea::placeholder {
 input.faText::placeholder,
 input[dir='rtl']::placeholder,
 input[lang='fa']::placeholder {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-weight: 400;
   opacity: 1;
 }
diff --git a/apps/business/src/lib/routeTitles.ts b/apps/business/src/lib/routeTitles.ts
index eb34558..68886e9 100644
--- a/apps/business/src/lib/routeTitles.ts
+++ b/apps/business/src/lib/routeTitles.ts
@@ -1,47 +1,3 @@
-import type { RouteTitleRule } from '@meshkee/dashboard-core'
-
+/** Legacy helpers — prefer `../i18n/messages`. */
+export { getBusinessRouteTitleRules } from '../i18n/messages'
 export const BUSINESS_DASHBOARD_NAME = 'Business Dashboard'
-
-export const businessRouteTitleRules: RouteTitleRule[] = [
-  { match: '/login', labels: ['Sign in'] },
-  { match: '/business-profile', labels: ['Business Profile'] },
-  { match: '/products/categories', labels: ['Products', 'Categories'] },
-  { match: '/products/brands', labels: ['Products', 'Brands'] },
-  { match: '/products/new', labels: ['Products', 'Add New Product'] },
-  { match: /^\/products\/edit\/[^/]+$/, labels: ['Products', 'Edit Product'] },
-  { match: '/products/list', labels: ['Products', 'My Products'] },
-  { match: /^\/products\/detail\/[^/]+$/, labels: ['Products', 'Product Details'] },
-  { match: '/products/settings', labels: ['Products', 'Settings'] },
-  { match: '/products', labels: ['Products'] },
-  { match: '/store/items', labels: ['Store', 'My Store Items'] },
-  { match: '/store/orders', labels: ['Store', 'My Orders'] },
-  { match: '/store/cards', labels: ['Store', 'Shopping Cards'] },
-  { match: '/store/settings', labels: ['Store', 'Settings'] },
-  { match: '/store', labels: ['Store'] },
-  { match: '/customers', labels: ['Customers'] },
-  { match: '/blog/list', labels: ['Blog', 'My Blogs'] },
-  { match: /^\/blog\/detail\/[^/]+$/, labels: ['Blog', 'Blog Details'] },
-  { match: '/blog/new', labels: ['Blog', 'Add New Blog'] },
-  { match: /^\/blog\/edit\/[^/]+$/, labels: ['Blog', 'Edit Blog'] },
-  { match: '/blog/categories', labels: ['Blog', 'Categories'] },
-  { match: '/blog/settings', labels: ['Blog', 'Settings'] },
-  { match: '/blog', labels: ['Blog'] },
-  { match: '/portfolios/list', labels: ['Portfolios', 'My Portfolios'] },
-  { match: /^\/portfolios\/detail\/[^/]+$/, labels: ['Portfolios', 'Portfolio Details'] },
-  { match: '/portfolios/new', labels: ['Portfolios', 'Add New Portfolio'] },
-  { match: /^\/portfolios\/edit\/[^/]+$/, labels: ['Portfolios', 'Edit Portfolio'] },
-  { match: '/portfolios/categories', labels: ['Portfolios', 'Categories'] },
-  { match: '/portfolios/settings', labels: ['Portfolios', 'Settings'] },
-  { match: '/portfolios', labels: ['Portfolios'] },
-  { match: '/website/sliders', labels: ['Website', 'Sliders'] },
-  { match: '/website/special-categories', labels: ['Website', 'Special Categories'] },
-  { match: '/website/special-brands', labels: ['Website', 'Special Brands'] },
-  { match: '/website/special-items', labels: ['Website', 'Special Items'] },
-  { match: '/website/contact', labels: ['Website', 'Contact Us Form'] },
-  { match: '/website/subscriptions', labels: ['Website', 'Subscriptions'] },
-  { match: '/website/faq', labels: ['Website', 'FAQ'] },
-  { match: '/website/badges', labels: ['Website', 'Badges'] },
-  { match: '/website/e-payment', labels: ['Website', 'E-Payment'] },
-  { match: '/website', labels: ['Website'] },
-  { match: '/', labels: ['Home'] },
-]
diff --git a/apps/business/src/pages/AddNewProductPage.tsx b/apps/business/src/pages/AddNewProductPage.tsx
index 79e5ac9..1795f12 100644
--- a/apps/business/src/pages/AddNewProductPage.tsx
+++ b/apps/business/src/pages/AddNewProductPage.tsx
@@ -23,10 +23,12 @@ import type { Category, FlatCategory } from '../types/category'
 import { flattenCategories } from '../utils/categories'
 import pageStyles from '../components/PageContent.module.css'
 import styles from './AddNewProductPage.module.css'
+import { useT } from '../i18n/useT'
 
 export function AddNewProductPage() {
   const { id } = useParams()
   const navigate = useNavigate()
+  const t = useT()
   const isEdit = Boolean(id)
 
   const [categories, setCategories] = useState<Category[]>([])
@@ -183,12 +185,10 @@ export function AddNewProductPage() {
       <div className={pageStyles.pageHeader}>
         <div>
           <h2 className={pageStyles.pageTitle}>
-            {isEdit ? 'Edit Product' : 'Add a New Product'}
+            {isEdit ? t('title.editProduct') : t('products.card.new.title')}
           </h2>
           <p className={pageStyles.pageSubtitle}>
-            {isEdit
-              ? 'Update product details and save changes.'
-              : 'Create and publish a new product to your store.'}
+            {isEdit ? t('products.form.edit.subtitle') : t('products.card.new.desc')}
           </p>
         </div>
       </div>
diff --git a/apps/business/src/pages/BusinessProfilePage.module.css b/apps/business/src/pages/BusinessProfilePage.module.css
index 9db0847..598a494 100644
--- a/apps/business/src/pages/BusinessProfilePage.module.css
+++ b/apps/business/src/pages/BusinessProfilePage.module.css
@@ -130,7 +130,7 @@
 }
 
 .selectFieldFa {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   direction: rtl;
   text-align: right;
 }
diff --git a/apps/business/src/pages/HomePage.tsx b/apps/business/src/pages/HomePage.tsx
index e6777ad..7ef1974 100644
--- a/apps/business/src/pages/HomePage.tsx
+++ b/apps/business/src/pages/HomePage.tsx
@@ -1,105 +1,207 @@
+import { useCallback, useEffect, useState } from 'react'
 import { CalendarDays } from 'lucide-react'
 import {
   ShoppingBag,
   Store,
   Users,
-  Settings,
   FileText,
   Briefcase,
   Globe,
 } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
 import { SectionCard } from '../components/SectionCard'
+import { DailyActivityChart } from '../components/DailyActivityChart'
+import { useT } from '../i18n/useT'
+import type { BusinessMessageKey } from '../i18n/messages'
+import { listProducts } from '../services/productService'
+import { listStoreItems } from '../services/storeItemService'
+import { listCustomers } from '../services/customerService'
+import { listBlogs } from '../services/blogService'
+import { listPortfolios } from '../services/portfolioService'
+import {
+  getCustomersDailyActivity,
+  getOrdersDailyActivity,
+} from '../services/dailyActivityService'
 import styles from '../components/PageContent.module.css'
 
-const sections = [
+type CountKey = 'products' | 'store' | 'customers' | 'blog' | 'portfolios'
+
+const sections: {
+  icon: typeof ShoppingBag
+  titleKey: BusinessMessageKey
+  descKey: BusinessMessageKey
+  linkKey: BusinessMessageKey
+  countLabelKey?: BusinessMessageKey
+  href: string
+  countKey?: CountKey
+}[] = [
   {
     icon: ShoppingBag,
-    title: 'Products',
-    description: 'Manage your products, inventory and categories.',
-    linkText: 'View products',
+    titleKey: 'home.card.products.title',
+    descKey: 'home.card.products.desc',
+    linkKey: 'home.card.products.link',
+    countLabelKey: 'home.card.products.count',
     href: '/products',
+    countKey: 'products',
   },
   {
     icon: Store,
-    title: 'Store',
-    description: 'Manage your store settings, pages and themes.',
-    linkText: 'View store',
+    titleKey: 'home.card.store.title',
+    descKey: 'home.card.store.desc',
+    linkKey: 'home.card.store.link',
+    countLabelKey: 'home.card.store.count',
     href: '/store',
+    countKey: 'store',
   },
   {
     icon: Users,
-    title: 'Customers',
-    description: 'View and manage your customers and their activity.',
-    linkText: 'View customers',
+    titleKey: 'home.card.customers.title',
+    descKey: 'home.card.customers.desc',
+    linkKey: 'home.card.customers.link',
+    countLabelKey: 'home.card.customers.count',
     href: '/customers',
-  },
-  {
-    icon: Settings,
-    title: 'Settings',
-    description: 'Configure your store preferences and system settings.',
-    linkText: 'View settings',
-    href: '/settings',
+    countKey: 'customers',
   },
   {
     icon: FileText,
-    title: 'Blog',
-    description: 'Create and manage blog posts and categories.',
-    linkText: 'View blog',
+    titleKey: 'home.card.blog.title',
+    descKey: 'home.card.blog.desc',
+    linkKey: 'home.card.blog.link',
+    countLabelKey: 'home.card.blog.count',
     href: '/blog',
+    countKey: 'blog',
   },
   {
     icon: Briefcase,
-    title: 'Portfolios',
-    description: 'Manage your portfolio items and showcase projects.',
-    linkText: 'View portfolios',
+    titleKey: 'home.card.portfolios.title',
+    descKey: 'home.card.portfolios.desc',
+    linkKey: 'home.card.portfolios.link',
+    countLabelKey: 'home.card.portfolios.count',
     href: '/portfolios',
+    countKey: 'portfolios',
   },
   {
     icon: Globe,
-    title: 'Website',
-    description: 'Manage contact forms, FAQ, badges, subscriptions, and e-payment.',
-    linkText: 'View website',
+    titleKey: 'home.card.website.title',
+    descKey: 'home.card.website.desc',
+    linkKey: 'home.card.website.link',
     href: '/website',
   },
 ]
 
-function getFormattedDate() {
-  return new Intl.DateTimeFormat('en-US', {
+type SectionCounts = Partial<Record<CountKey, number>>
+
+async function loadSectionCounts(signal: AbortSignal): Promise<SectionCounts> {
+  const [products, store, customers, blog, portfolios] = await Promise.all([
+    listProducts(1, 1, signal).then((r) => r.total).catch(() => null),
+    listStoreItems(1, 1, signal).then((r) => r.total).catch(() => null),
+    listCustomers({ page: 1, pageSize: 1 }, signal).then((r) => r.total).catch(() => null),
+    listBlogs(1, 1, signal).then((r) => r.total).catch(() => null),
+    listPortfolios(1, 1, signal).then((r) => r.total).catch(() => null),
+  ])
+
+  const counts: SectionCounts = {}
+  if (products !== null) counts.products = products
+  if (store !== null) counts.store = store
+  if (customers !== null) counts.customers = customers
+  if (blog !== null) counts.blog = blog
+  if (portfolios !== null) counts.portfolios = portfolios
+  return counts
+}
+
+export function HomePage() {
+  const { user } = useAuth()
+  const { locale } = useLocale()
+  const t = useT()
+  const [counts, setCounts] = useState<SectionCounts>({})
+
+  useEffect(() => {
+    const controller = new AbortController()
+    void loadSectionCounts(controller.signal).then((next) => {
+      if (!controller.signal.aborted) setCounts(next)
+    })
+    return () => controller.abort()
+  }, [])
+
+  const loadOrdersActivity = useCallback(
+    (signal: AbortSignal) => getOrdersDailyActivity(30, signal),
+    [],
+  )
+  const loadCustomersActivity = useCallback(
+    (signal: AbortSignal) => getCustomersDailyActivity(30, signal),
+    [],
+  )
+
+  const firstName =
+    (locale === 'en'
+      ? user?.firstNameEn?.trim() || user?.firstName
+      : user?.firstName?.trim() || user?.firstNameEn) || t('home.welcomeFallback')
+
+  const formattedDate = new Intl.DateTimeFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
     month: 'long',
     day: 'numeric',
     year: 'numeric',
     weekday: 'long',
   }).format(new Date())
-}
-
-export function HomePage() {
-  const { user } = useAuth()
-  const firstName = user?.firstName || 'there'
 
   return (
     <main className={styles.content}>
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>
-            Welcome back, {firstName}! <span aria-hidden="true">👋</span>
-          </h2>
-          <p className={styles.pageSubtitle}>
-            Here&apos;s what&apos;s happening with your store today.
-          </p>
+          <h2 className={styles.pageTitle}>{t('home.welcome', { name: firstName })}</h2>
+          <p className={styles.pageSubtitle}>{t('home.subtitle')}</p>
         </div>
 
         <div className={styles.dateBadge}>
           <CalendarDays size={16} />
-          <span>{getFormattedDate()}</span>
+          <span>{formattedDate}</span>
         </div>
       </div>
 
       <div className={styles.gridHome}>
         {sections.map((section) => (
-          <SectionCard key={section.title} {...section} />
+          <SectionCard
+            key={section.href}
+            icon={section.icon}
+            title={t(section.titleKey)}
+            description={t(section.descKey)}
+            linkText={t(section.linkKey)}
+            href={section.href}
+            count={section.countKey ? counts[section.countKey] : undefined}
+            countLabel={section.countLabelKey ? t(section.countLabelKey) : undefined}
+          />
         ))}
       </div>
+
+      <div className={styles.grid12}>
+        <div className={styles.col6}>
+          <DailyActivityChart
+            titleKey="home.chart.orders.title"
+            subtitleKey="home.chart.orders.subtitle"
+            primaryLegendKey="home.chart.orders.legend"
+            secondaryLegendKey="home.chart.orders.cartLegend"
+            loadingKey="home.chart.orders.loading"
+            errorKey="home.chart.orders.error"
+            primaryBarTitleKey="home.chart.orders.bar"
+            secondaryBarTitleKey="home.chart.orders.cartBar"
+            load={loadOrdersActivity}
+          />
+        </div>
+        <div className={styles.col6}>
+          <DailyActivityChart
+            titleKey="home.chart.customers.title"
+            subtitleKey="home.chart.customers.subtitle"
+            primaryLegendKey="home.chart.customers.legend"
+            secondaryLegendKey="home.chart.customers.activeLegend"
+            loadingKey="home.chart.customers.loading"
+            errorKey="home.chart.customers.error"
+            primaryBarTitleKey="home.chart.customers.bar"
+            secondaryBarTitleKey="home.chart.customers.activeBar"
+            load={loadCustomersActivity}
+          />
+        </div>
+      </div>
     </main>
   )
 }
diff --git a/apps/business/src/pages/LoginPage.module.css b/apps/business/src/pages/LoginPage.module.css
index 63a7ad2..7bfab2a 100644
--- a/apps/business/src/pages/LoginPage.module.css
+++ b/apps/business/src/pages/LoginPage.module.css
@@ -24,11 +24,15 @@
 .brand {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 12px;
   margin-bottom: 28px;
 }
 
+.langSelect {
+  margin-inline-start: auto;
+}
+
 .logo {
   display: block;
   width: 48px;
@@ -112,7 +116,7 @@
 
 .inputIcon {
   position: absolute;
-  left: 12px;
+  inset-inline-start: 12px;
   color: var(--text-muted);
   pointer-events: none;
 }
@@ -120,7 +124,8 @@
 .inputWrap input {
   width: 100%;
   min-height: var(--field-height);
-  padding: var(--field-padding-y) 40px var(--field-padding-y) 38px;
+  padding-block: var(--field-padding-y);
+  padding-inline: 38px 40px;
   font-size: var(--field-font-size);
   line-height: 1.4;
   font-family: inherit;
@@ -140,7 +145,7 @@
 
 .togglePassword {
   position: absolute;
-  right: 12px;
+  inset-inline-end: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/apps/business/src/pages/LoginPage.tsx b/apps/business/src/pages/LoginPage.tsx
index dafb7e1..158a1cb 100644
--- a/apps/business/src/pages/LoginPage.tsx
+++ b/apps/business/src/pages/LoginPage.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Eye, EyeOff, Smartphone, Lock, KeyRound, ArrowLeft, User } from 'lucide-react'
+import { LanguageSelect } from '@meshkee/dashboard-ui'
 import { useAuth, BUSINESS_ACCESS_MESSAGE } from '../context/AuthContext'
 import { useTenantBranding } from '../context/TenantBrandingContext'
 import { ApiError } from '../lib/api'
@@ -13,6 +14,7 @@ import {
   sendOtp,
   verifyOtp,
 } from '../services/authService'
+import { useT } from '../i18n/useT'
 import meshkeeLogo from '../assets/meshkee-logo.png'
 import styles from './LoginPage.module.css'
 
@@ -24,6 +26,7 @@ export function LoginPage() {
   const { login } = useAuth()
   const { businessName, logoUrl } = useTenantBranding()
   const businessDomain = getBusinessDomain()
+  const t = useT()
 
   const [view, setView] = useState<AuthView>('login')
   const [smsStep, setSmsStep] = useState<SmsStep>('phone')
@@ -80,7 +83,11 @@ export function LoginPage() {
 
   function handleApiError(err: unknown, fallback: string) {
     if (err instanceof ApiError) {
-      setError(err.message)
+      if (err.message === BUSINESS_ACCESS_MESSAGE) {
+        setError(t('login.error.access'))
+      } else {
+        setError(err.message)
+      }
     } else {
       setError(fallback)
     }
@@ -102,7 +109,7 @@ export function LoginPage() {
       setSmsStep('code')
       startCountdown()
     } catch (err) {
-      handleApiError(err, 'Unable to send verification code.')
+      handleApiError(err, t('login.error.sendCode'))
     } finally {
       setIsSubmitting(false)
     }
@@ -118,7 +125,7 @@ export function LoginPage() {
       await login(cellNumber, password)
       navigate('/')
     } catch (err) {
-      handleApiError(err, 'Unable to sign in. Check your connection and try again.')
+      handleApiError(err, t('login.error.signIn'))
     } finally {
       setIsSubmitting(false)
     }
@@ -129,12 +136,12 @@ export function LoginPage() {
     clearMessages()
 
     if (password !== confirmPassword) {
-      setError('Passwords do not match.')
+      setError(t('signup.error.match'))
       return
     }
 
     if (password.length < 8) {
-      setError('Password must be at least 8 characters.')
+      setError(t('signup.error.length'))
       return
     }
 
@@ -152,16 +159,14 @@ export function LoginPage() {
 
       if (data.user.dashboard !== 'business' || data.user.businesses.length === 0) {
         logoutRequest()
-        setError(
-          `${BUSINESS_ACCESS_MESSAGE} Customer registration on ${businessDomain} does not grant dashboard access.`,
-        )
+        setError(t('login.error.access'))
         return
       }
 
       setActiveBusiness(data.user)
       navigate('/')
     } catch (err) {
-      handleApiError(err, 'Unable to create account.')
+      handleApiError(err, t('signup.error.create'))
     } finally {
       setIsSubmitting(false)
     }
@@ -172,7 +177,7 @@ export function LoginPage() {
     clearMessages()
 
     if (newPassword.length < 8) {
-      setError('Password must be at least 8 characters.')
+      setError(t('forgot.error.length'))
       return
     }
 
@@ -181,12 +186,10 @@ export function LoginPage() {
     try {
       const cellNumber = toE164CellNumber(phone)
       await verifyOtp(cellNumber, smsCode)
-      setInfo(
-        'Phone number verified. Full password reset via SMS is not available yet — please contact your administrator or sign in if you remember your password.',
-      )
+      setInfo(t('forgot.info.partial'))
       setTimeout(() => switchView('login'), 2500)
     } catch (err) {
-      handleApiError(err, 'Unable to verify code.')
+      handleApiError(err, t('forgot.error.verify'))
     } finally {
       setIsSubmitting(false)
     }
@@ -202,14 +205,14 @@ export function LoginPage() {
       await verifyOtp(cellNumber, smsCode)
 
       if (!password) {
-        setError('Enter your account password to complete sign-in after SMS verification.')
+        setError(t('otp.error.password'))
         return
       }
 
       await login(cellNumber, password)
       navigate('/')
     } catch (err) {
-      handleApiError(err, 'Unable to sign in with SMS verification.')
+      handleApiError(err, t('otp.error.signIn'))
     } finally {
       setIsSubmitting(false)
     }
@@ -222,14 +225,17 @@ export function LoginPage() {
           <img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
           <div className={styles.brandText}>
             <span className={styles.businessName}>{businessName || businessDomain}</span>
-            <span className={styles.appName}>powered by Meshkee.app</span>
+            <span className={styles.appName}>{t('app.poweredBy')}</span>
+          </div>
+          <div className={styles.langSelect}>
+            <LanguageSelect />
           </div>
         </div>
 
         {view === 'login' && (
           <>
-            <h1 className={styles.title}>Welcome back</h1>
-            <p className={styles.subtitle}>Sign in with your mobile number</p>
+            <h1 className={styles.title}>{t('login.welcome')}</h1>
+            <p className={styles.subtitle}>{t('login.subtitle')}</p>
 
             <form className={styles.form} onSubmit={handleLogin}>
               {error && (
@@ -240,7 +246,7 @@ export function LoginPage() {
               {info && <div className={styles.info}>{info}</div>}
 
               <div className={styles.field}>
-                <label htmlFor="login-phone">Mobile number</label>
+                <label htmlFor="login-phone">{t('login.mobile')}</label>
                 <div className={styles.inputWrap}>
                   <Smartphone size={18} className={styles.inputIcon} />
                   <input
@@ -257,13 +263,13 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="login-password">Password</label>
+                <label htmlFor="login-password">{t('login.password')}</label>
                 <div className={styles.inputWrap}>
                   <Lock size={18} className={styles.inputIcon} />
                   <input
                     id="login-password"
                     type={showPassword ? 'text' : 'password'}
-                    placeholder="Enter your password"
+                    placeholder={t('login.passwordPlaceholder')}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required
@@ -274,7 +280,7 @@ export function LoginPage() {
                     type="button"
                     className={styles.togglePassword}
                     onClick={() => setShowPassword((v) => !v)}
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                    aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
                     disabled={isSubmitting}
                   >
                     {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -289,17 +295,17 @@ export function LoginPage() {
                   onClick={() => switchView('forgot')}
                   disabled={isSubmitting}
                 >
-                  Forgot password?
+                  {t('login.forgot')}
                 </button>
               </div>
 
               <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                {isSubmitting ? 'Signing in...' : 'Sign in'}
+                {isSubmitting ? t('login.signingIn') : t('login.signIn')}
               </button>
             </form>
 
             <div className={styles.divider}>
-              <span>or</span>
+              <span>{t('login.or')}</span>
             </div>
 
             <button
@@ -309,18 +315,18 @@ export function LoginPage() {
               disabled={isSubmitting}
             >
               <KeyRound size={18} />
-              One-time login with SMS
+              {t('login.otp')}
             </button>
 
             <p className={styles.footerText}>
-              Don&apos;t have an account?{' '}
+              {t('login.noAccount')}{' '}
               <button
                 type="button"
                 className={styles.linkBtn}
                 onClick={() => switchView('signup')}
                 disabled={isSubmitting}
               >
-                Sign up
+                {t('login.signUp')}
               </button>
             </p>
           </>
@@ -328,8 +334,8 @@ export function LoginPage() {
 
         {view === 'signup' && (
           <>
-            <h1 className={styles.title}>Create account</h1>
-            <p className={styles.subtitle}>Staff accounts are invited by the business owner</p>
+            <h1 className={styles.title}>{t('signup.title')}</h1>
+            <p className={styles.subtitle}>{t('signup.subtitle', { domain: businessDomain })}</p>
 
             <form className={styles.form} onSubmit={handleSignup}>
               {error && (
@@ -340,13 +346,13 @@ export function LoginPage() {
 
               <div className={styles.fieldRow}>
                 <div className={styles.field}>
-                  <label htmlFor="signup-first">First name</label>
+                  <label htmlFor="signup-first">{t('signup.firstName')}</label>
                   <div className={styles.inputWrap}>
                     <User size={18} className={styles.inputIcon} />
                     <input
                       id="signup-first"
                       type="text"
-                      placeholder="First name"
+                      placeholder={t('signup.firstName')}
                       value={firstName}
                       onChange={(e) => setFirstName(e.target.value)}
                       required
@@ -356,13 +362,13 @@ export function LoginPage() {
                   </div>
                 </div>
                 <div className={styles.field}>
-                  <label htmlFor="signup-last">Last name</label>
+                  <label htmlFor="signup-last">{t('signup.lastName')}</label>
                   <div className={styles.inputWrap}>
                     <User size={18} className={styles.inputIcon} />
                     <input
                       id="signup-last"
                       type="text"
-                      placeholder="Last name"
+                      placeholder={t('signup.lastName')}
                       value={lastName}
                       onChange={(e) => setLastName(e.target.value)}
                       required
@@ -374,7 +380,7 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="signup-phone">Mobile number</label>
+                <label htmlFor="signup-phone">{t('login.mobile')}</label>
                 <div className={styles.inputWrap}>
                   <Smartphone size={18} className={styles.inputIcon} />
                   <input
@@ -391,13 +397,13 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="signup-password">Password</label>
+                <label htmlFor="signup-password">{t('login.password')}</label>
                 <div className={styles.inputWrap}>
                   <Lock size={18} className={styles.inputIcon} />
                   <input
                     id="signup-password"
                     type={showPassword ? 'text' : 'password'}
-                    placeholder="Choose a password"
+                    placeholder={t('signup.passwordPlaceholder')}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required
@@ -408,7 +414,7 @@ export function LoginPage() {
                     type="button"
                     className={styles.togglePassword}
                     onClick={() => setShowPassword((v) => !v)}
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                    aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
                     disabled={isSubmitting}
                   >
                     {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -417,13 +423,13 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="signup-confirm">Confirm password</label>
+                <label htmlFor="signup-confirm">{t('signup.confirm')}</label>
                 <div className={styles.inputWrap}>
                   <Lock size={18} className={styles.inputIcon} />
                   <input
                     id="signup-confirm"
                     type={showPassword ? 'text' : 'password'}
-                    placeholder="Repeat your password"
+                    placeholder={t('signup.confirmPlaceholder')}
                     value={confirmPassword}
                     onChange={(e) => setConfirmPassword(e.target.value)}
                     required
@@ -434,19 +440,19 @@ export function LoginPage() {
               </div>
 
               <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                {isSubmitting ? 'Creating account...' : 'Create account'}
+                {isSubmitting ? t('signup.creating') : t('signup.create')}
               </button>
             </form>
 
             <p className={styles.footerText}>
-              Already have an account?{' '}
+              {t('signup.hasAccount')}{' '}
               <button
                 type="button"
                 className={styles.linkBtn}
                 onClick={() => switchView('login')}
                 disabled={isSubmitting}
               >
-                Sign in
+                {t('signup.signIn')}
               </button>
             </p>
           </>
@@ -461,14 +467,12 @@ export function LoginPage() {
               disabled={isSubmitting}
             >
               <ArrowLeft size={18} />
-              Back to sign in
+              {t('forgot.back')}
             </button>
 
-            <h1 className={styles.title}>Forgot password</h1>
+            <h1 className={styles.title}>{t('forgot.title')}</h1>
             <p className={styles.subtitle}>
-              {smsStep === 'phone'
-                ? 'We will send a verification code via SMS'
-                : 'Enter the code and your new password'}
+              {smsStep === 'phone' ? t('forgot.subtitlePhone') : t('forgot.subtitleCode')}
             </p>
 
             <form className={styles.form} onSubmit={handleResetPassword}>
@@ -482,7 +486,7 @@ export function LoginPage() {
               {smsStep === 'phone' ? (
                 <>
                   <div className={styles.field}>
-                    <label htmlFor="forgot-phone">Mobile number</label>
+                    <label htmlFor="forgot-phone">{t('login.mobile')}</label>
                     <div className={styles.inputWrap}>
                       <Smartphone size={18} className={styles.inputIcon} />
                       <input
@@ -504,19 +508,17 @@ export function LoginPage() {
                     onClick={() => void handleSendCode()}
                     disabled={isSubmitting}
                   >
-                    {isSubmitting ? 'Sending...' : 'Send SMS code'}
+                    {isSubmitting ? t('forgot.sending') : t('forgot.sendCode')}
                   </button>
                 </>
               ) : (
                 <>
                   {codeSent && (
-                    <p className={styles.codeHint}>
-                      Verification code sent to <strong>{phone}</strong>
-                    </p>
+                    <p className={styles.codeHint}>{t('common.codeSent', { phone })}</p>
                   )}
 
                   <div className={styles.field}>
-                    <label htmlFor="forgot-code">SMS verification code</label>
+                    <label htmlFor="forgot-code">{t('forgot.code')}</label>
                     <div className={styles.inputWrap}>
                       <KeyRound size={18} className={styles.inputIcon} />
                       <input
@@ -534,13 +536,13 @@ export function LoginPage() {
                   </div>
 
                   <div className={styles.field}>
-                    <label htmlFor="forgot-new-password">New password</label>
+                    <label htmlFor="forgot-new-password">{t('forgot.newPassword')}</label>
                     <div className={styles.inputWrap}>
                       <Lock size={18} className={styles.inputIcon} />
                       <input
                         id="forgot-new-password"
                         type={showPassword ? 'text' : 'password'}
-                        placeholder="Enter new password"
+                        placeholder={t('forgot.newPasswordPlaceholder')}
                         value={newPassword}
                         onChange={(e) => setNewPassword(e.target.value)}
                         required
@@ -552,7 +554,9 @@ export function LoginPage() {
 
                   <div className={styles.resendRow}>
                     {countdown > 0 ? (
-                      <span className={styles.countdown}>Resend code in {countdown}s</span>
+                      <span className={styles.countdown}>
+                        {t('common.resendIn', { seconds: countdown })}
+                      </span>
                     ) : (
                       <button
                         type="button"
@@ -560,13 +564,13 @@ export function LoginPage() {
                         onClick={() => void handleSendCode()}
                         disabled={isSubmitting}
                       >
-                        Resend SMS code
+                        {t('common.resend')}
                       </button>
                     )}
                   </div>
 
                   <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                    {isSubmitting ? 'Verifying...' : 'Reset password'}
+                    {isSubmitting ? t('forgot.verifying') : t('forgot.reset')}
                   </button>
                 </>
               )}
@@ -583,14 +587,12 @@ export function LoginPage() {
               disabled={isSubmitting}
             >
               <ArrowLeft size={18} />
-              Back to sign in
+              {t('otp.back')}
             </button>
 
-            <h1 className={styles.title}>One-time login</h1>
+            <h1 className={styles.title}>{t('otp.title')}</h1>
             <p className={styles.subtitle}>
-              {smsStep === 'phone'
-                ? 'Sign in with a one-time SMS code'
-                : 'Enter the SMS code and your password'}
+              {smsStep === 'phone' ? t('otp.subtitlePhone') : t('otp.subtitleCode')}
             </p>
 
             <form className={styles.form} onSubmit={handleOtpLogin}>
@@ -603,7 +605,7 @@ export function LoginPage() {
               {smsStep === 'phone' ? (
                 <>
                   <div className={styles.field}>
-                    <label htmlFor="otp-phone">Mobile number</label>
+                    <label htmlFor="otp-phone">{t('login.mobile')}</label>
                     <div className={styles.inputWrap}>
                       <Smartphone size={18} className={styles.inputIcon} />
                       <input
@@ -625,19 +627,17 @@ export function LoginPage() {
                     onClick={() => void handleSendCode()}
                     disabled={isSubmitting}
                   >
-                    {isSubmitting ? 'Sending...' : 'Send SMS code'}
+                    {isSubmitting ? t('otp.sending') : t('otp.sendCode')}
                   </button>
                 </>
               ) : (
                 <>
                   {codeSent && (
-                    <p className={styles.codeHint}>
-                      Verification code sent to <strong>{phone}</strong>
-                    </p>
+                    <p className={styles.codeHint}>{t('common.codeSent', { phone })}</p>
                   )}
 
                   <div className={styles.field}>
-                    <label htmlFor="otp-code">SMS verification code</label>
+                    <label htmlFor="otp-code">{t('otp.code')}</label>
                     <div className={styles.inputWrap}>
                       <KeyRound size={18} className={styles.inputIcon} />
                       <input
@@ -655,13 +655,13 @@ export function LoginPage() {
                   </div>
 
                   <div className={styles.field}>
-                    <label htmlFor="otp-password">Password</label>
+                    <label htmlFor="otp-password">{t('otp.password')}</label>
                     <div className={styles.inputWrap}>
                       <Lock size={18} className={styles.inputIcon} />
                       <input
                         id="otp-password"
                         type={showPassword ? 'text' : 'password'}
-                        placeholder="Your account password"
+                        placeholder={t('otp.passwordPlaceholder')}
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         required
@@ -673,7 +673,9 @@ export function LoginPage() {
 
                   <div className={styles.resendRow}>
                     {countdown > 0 ? (
-                      <span className={styles.countdown}>Resend code in {countdown}s</span>
+                      <span className={styles.countdown}>
+                        {t('common.resendIn', { seconds: countdown })}
+                      </span>
                     ) : (
                       <button
                         type="button"
@@ -681,13 +683,13 @@ export function LoginPage() {
                         onClick={() => void handleSendCode()}
                         disabled={isSubmitting}
                       >
-                        Resend SMS code
+                        {t('common.resend')}
                       </button>
                     )}
                   </div>
 
                   <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                    {isSubmitting ? 'Signing in...' : 'Sign in'}
+                    {isSubmitting ? t('otp.signingIn') : t('otp.signIn')}
                   </button>
                 </>
               )}
diff --git a/apps/business/src/pages/PortfolioListPage.tsx b/apps/business/src/pages/PortfolioListPage.tsx
index 4a016e8..cd53d36 100644
--- a/apps/business/src/pages/PortfolioListPage.tsx
+++ b/apps/business/src/pages/PortfolioListPage.tsx
@@ -12,6 +12,7 @@ import {
   PORTFOLIOS_PER_PAGE,
   deletePortfolio,
   listPortfolios,
+  updatePortfolio,
 } from '../services/portfolioService'
 import type { Portfolio } from '../types/portfolio'
 import pageStyles from '../components/PageContent.module.css'
@@ -25,6 +26,7 @@ export function PortfolioListPage() {
   const [currentPage, setCurrentPage] = useState(1)
   const [isLoading, setIsLoading] = useState(true)
   const [isDeleting, setIsDeleting] = useState(false)
+  const [movingUpId, setMovingUpId] = useState<string | null>(null)
   const [error, setError] = useState('')
   const [commentCounts, setCommentCounts] = useState<Record<string, number>>({})
   const [deleteTarget, setDeleteTarget] = useState<{ id: string; title: string } | null>(null)
@@ -81,6 +83,43 @@ export function PortfolioListPage() {
     }
   }
 
+  async function handleMoveUp(id: string) {
+    const index = portfolios.findIndex((item) => item.id === id)
+    if (index < 0) return
+    if (index === 0 && currentPage === 1) return
+
+    const current = portfolios[index]
+    setMovingUpId(id)
+    setError('')
+
+    try {
+      if (index === 0) {
+        // First on this page, but not global first — bump above the current band.
+        await updatePortfolio(current.id, { sortOrder: current.sortOrder - 1 })
+      } else {
+        const previous = portfolios[index - 1]
+        if (current.sortOrder === previous.sortOrder) {
+          await updatePortfolio(current.id, { sortOrder: previous.sortOrder - 1 })
+        } else {
+          await Promise.all([
+            updatePortfolio(current.id, { sortOrder: previous.sortOrder }),
+            updatePortfolio(previous.id, { sortOrder: current.sortOrder }),
+          ])
+        }
+      }
+      showToast('Portfolio moved up.', 'success')
+      await loadPortfolios(currentPage)
+    } catch (err) {
+      if (err instanceof ApiError) {
+        setError(err.message)
+      } else {
+        setError('Unable to move portfolio.')
+      }
+    } finally {
+      setMovingUpId(null)
+    }
+  }
+
   async function confirmDelete() {
     if (!deleteTarget) return
 
@@ -152,11 +191,14 @@ export function PortfolioListPage() {
       ) : (
         <>
           <div className={pageStyles.gridCols4}>
-            {portfolios.map((portfolio) => (
+            {portfolios.map((portfolio, index) => (
               <PortfolioCard
                 key={portfolio.id}
                 portfolio={portfolio}
                 commentCount={commentCounts[portfolio.id] ?? portfolio.commentCount}
+                canMoveUp={!(index === 0 && currentPage === 1)}
+                isMovingUp={movingUpId === portfolio.id}
+                onMoveUp={handleMoveUp}
                 onEdit={handleEdit}
                 onComments={handleComments}
                 onRemove={handleRemoveRequest}
diff --git a/apps/business/src/pages/ProductDetailsPage.module.css b/apps/business/src/pages/ProductDetailsPage.module.css
index 2f024f0..c801ed6 100644
--- a/apps/business/src/pages/ProductDetailsPage.module.css
+++ b/apps/business/src/pages/ProductDetailsPage.module.css
@@ -139,7 +139,7 @@
 }
 
 .description {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: 14px;
   font-weight: 300; /* IRANYekan Light */
   line-height: 1.7;
@@ -149,7 +149,7 @@
 
 .description:global(.faText),
 .description:global(.faText) :where(*) {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-weight: 300;
   text-align: justify;
 }
diff --git a/apps/business/src/pages/ProductsPage.tsx b/apps/business/src/pages/ProductsPage.tsx
index 10d1d0a..dc80623 100644
--- a/apps/business/src/pages/ProductsPage.tsx
+++ b/apps/business/src/pages/ProductsPage.tsx
@@ -2,47 +2,51 @@ import { FolderTree, PlusCircle, Package, Settings, Tag } from 'lucide-react'
 import { SectionCard } from '../components/SectionCard'
 import { ProductActivityChart } from '../components/ProductActivityChart'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { useT } from '../i18n/useT'
+import type { BusinessMessageKey } from '../i18n/messages'
 import styles from '../components/PageContent.module.css'
 
-const productSections = [
+const productSections: {
+  icon: typeof Package
+  titleKey: BusinessMessageKey
+  descKey: BusinessMessageKey
+  href: string
+}[] = [
   {
     icon: Package,
-    title: 'My Products',
-    description: 'View, edit and manage all your existing products.',
-    linkText: 'View products',
+    titleKey: 'nav.products.list',
+    descKey: 'products.card.list.desc',
     href: '/products/list',
   },
   {
     icon: PlusCircle,
-    title: 'Add a New Product',
-    description: 'Create and publish a new product to your store.',
-    linkText: 'Add product',
+    titleKey: 'products.card.new.title',
+    descKey: 'products.card.new.desc',
     href: '/products/new',
   },
   {
     icon: FolderTree,
-    title: 'Categories',
-    description: 'Organize your products into categories and subcategories.',
-    linkText: 'View categories',
+    titleKey: 'nav.products.categories',
+    descKey: 'products.card.categories.desc',
     href: '/products/categories',
   },
   {
     icon: Tag,
-    title: 'Brands',
-    description: 'Manage product brands and assign them when creating products.',
-    linkText: 'View brands',
+    titleKey: 'nav.products.brands',
+    descKey: 'products.card.brands.desc',
     href: '/products/brands',
   },
   {
     icon: Settings,
-    title: 'Settings',
-    description: 'Configure product defaults, variants and display options.',
-    linkText: 'View settings',
+    titleKey: 'nav.products.settings',
+    descKey: 'products.card.settings.desc',
     href: '/products/settings',
   },
 ]
 
 export function ProductsPage() {
+  const t = useT()
+
   return (
     <main className={styles.content}>
       <Breadcrumbs
@@ -53,16 +57,20 @@ export function ProductsPage() {
       />
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>Products</h2>
-          <p className={styles.pageSubtitle}>
-            Manage your products, inventory and categories.
-          </p>
+          <h2 className={styles.pageTitle}>{t('title.products')}</h2>
+          <p className={styles.pageSubtitle}>{t('products.overview.subtitle')}</p>
         </div>
       </div>
 
       <div className={styles.gridHome}>
         {productSections.map((section) => (
-          <SectionCard key={section.title} {...section} />
+          <SectionCard
+            key={section.href}
+            icon={section.icon}
+            title={t(section.titleKey)}
+            description={t(section.descKey)}
+            href={section.href}
+          />
         ))}
       </div>
 
diff --git a/apps/business/src/pages/StoreSettingsPage.module.css b/apps/business/src/pages/StoreSettingsPage.module.css
index 12ec3ef..f7f839c 100644
--- a/apps/business/src/pages/StoreSettingsPage.module.css
+++ b/apps/business/src/pages/StoreSettingsPage.module.css
@@ -55,6 +55,10 @@
   transition: border-color 0.2s, box-shadow 0.2s;
 }
 
+.stepInputFa {
+  font-family: var(--font-fa);
+}
+
 .stepInput:focus {
   outline: none;
   border-color: rgba(var(--primary-rgb) / 0.5);
diff --git a/apps/business/src/pages/StoreSettingsPage.tsx b/apps/business/src/pages/StoreSettingsPage.tsx
index 70fa67f..b29ce73 100644
--- a/apps/business/src/pages/StoreSettingsPage.tsx
+++ b/apps/business/src/pages/StoreSettingsPage.tsx
@@ -34,6 +34,7 @@ function normalizeSteps(steps: OrderProcessStep[]) {
   return steps.map((step, index) => ({
     id: step.id,
     label: step.label.trim(),
+    labelFa: (step.labelFa ?? '').trim(),
     color: normalizeStepColor(step.color, defaultStepColorForId(step.id, index)),
   }))
 }
@@ -43,7 +44,10 @@ function stepsAreEqual(a: OrderProcessStep[], b: OrderProcessStep[]) {
   return a.every((step, index) => {
     const other = b[index]
     return (
-      step.id === other.id && step.label === other.label && step.color === other.color
+      step.id === other.id &&
+      step.label === other.label &&
+      step.labelFa === other.labelFa &&
+      step.color === other.color
     )
   })
 }
@@ -109,6 +113,12 @@ export function StoreSettingsPage() {
     )
   }
 
+  function updateStepLabelFa(id: string, labelFa: string) {
+    setDraftSteps((current) =>
+      current.map((step) => (step.id === id ? { ...step, labelFa } : step)),
+    )
+  }
+
   function updateStepColor(id: string, color: StepColorPreset) {
     setDraftSteps((current) =>
       current.map((step) => (step.id === id ? { ...step, color } : step)),
@@ -123,6 +133,7 @@ export function StoreSettingsPage() {
         {
           id,
           label: '',
+          labelFa: '',
           color: defaultStepColorForId(id, current.length),
         },
       ]
@@ -150,13 +161,13 @@ export function StoreSettingsPage() {
 
   async function handleSaveSteps() {
     const normalized = normalizeSteps(draftSteps)
-    const hasEmptyLabel = normalized.some((step) => !step.label)
+    const hasEmptyLabel = normalized.some((step) => !step.label || !step.labelFa)
     if (!normalized.length) {
       setError('Add at least one order process step.')
       return
     }
     if (hasEmptyLabel) {
-      setError('Every order step needs a label.')
+      setError('Every order step needs an English and Farsi label.')
       return
     }
 
@@ -186,7 +197,9 @@ export function StoreSettingsPage() {
   const canSaveSteps =
     stepsDirty &&
     draftSteps.length > 0 &&
-    draftSteps.every((step) => step.label.trim().length > 0)
+    draftSteps.every(
+      (step) => step.label.trim().length > 0 && step.labelFa.trim().length > 0,
+    )
 
   return (
     <main className={pageStyles.content}>
@@ -270,10 +283,22 @@ export function StoreSettingsPage() {
                     type="text"
                     className={styles.stepInput}
                     value={step.label}
-                    placeholder="Step label"
-                    aria-label={`Order step ${index + 1}`}
+                    placeholder="Label (EN)"
+                    aria-label={`Order step ${index + 1} English label`}
+                    dir="ltr"
+                    lang="en"
                     onChange={(e) => updateStepLabel(step.id, e.target.value)}
                   />
+                  <input
+                    type="text"
+                    className={`${styles.stepInput} ${styles.stepInputFa}`}
+                    value={step.labelFa ?? ''}
+                    placeholder="عنوان (فارسی)"
+                    aria-label={`Order step ${index + 1} Farsi label`}
+                    dir="rtl"
+                    lang="fa"
+                    onChange={(e) => updateStepLabelFa(step.id, e.target.value)}
+                  />
                   <div className={styles.stepControls}>
                     <Tooltip label="Move step up">
                       <button
diff --git a/apps/business/src/services/dailyActivityService.ts b/apps/business/src/services/dailyActivityService.ts
new file mode 100644
index 0000000..f4b1709
--- /dev/null
+++ b/apps/business/src/services/dailyActivityService.ts
@@ -0,0 +1,41 @@
+import { apiRequest } from '../lib/api'
+import { getActiveBusinessId } from '../lib/businessContext'
+
+export interface DailyActivityPoint {
+  date: string
+  count: number
+}
+
+export interface DailyActivitySeries {
+  days: number
+  total: number
+  items: DailyActivityPoint[]
+}
+
+export interface DualDailyActivityResponse {
+  days: number
+  primary: DailyActivitySeries
+  secondary: DailyActivitySeries
+}
+
+function businessPath(resource: 'orders' | 'customers', suffix = '') {
+  const businessId = getActiveBusinessId()
+  if (!businessId) {
+    throw new Error('No active business selected. Please sign in again.')
+  }
+  return `/businesses/${businessId}/${resource}${suffix}`
+}
+
+export async function getOrdersDailyActivity(days = 30, signal?: AbortSignal) {
+  return apiRequest<DualDailyActivityResponse>(
+    `${businessPath('orders', '/activity')}?days=${days}`,
+    { auth: true, signal },
+  )
+}
+
+export async function getCustomersDailyActivity(days = 30, signal?: AbortSignal) {
+  return apiRequest<DualDailyActivityResponse>(
+    `${businessPath('customers', '/activity')}?days=${days}`,
+    { auth: true, signal },
+  )
+}
diff --git a/apps/business/src/services/orderService.ts b/apps/business/src/services/orderService.ts
index 159ef09..e9f96b4 100644
--- a/apps/business/src/services/orderService.ts
+++ b/apps/business/src/services/orderService.ts
@@ -64,6 +64,7 @@ export interface Order {
   status: OrderStatus
   processStepId: string
   processStepLabel?: string | null
+  processStepLabelFa?: string | null
   processStepColor?: string | null
   source: OrderSource
   subtotal: number
diff --git a/apps/business/src/services/portfolioService.ts b/apps/business/src/services/portfolioService.ts
index 3f6c604..a505d02 100644
--- a/apps/business/src/services/portfolioService.ts
+++ b/apps/business/src/services/portfolioService.ts
@@ -105,6 +105,7 @@ export function mapPortfolioApiToUi(portfolio: PortfolioApi): Portfolio {
     categoryName: portfolio.categoryName,
     tags: portfolio.tags,
     titleImageUrl: resolvePortfolioTitleImageUrl(portfolio),
+    sortOrder: portfolio.sortOrder ?? 0,
     commentCount: portfolio.commentCount,
     publishedAt: portfolio.publishedAt,
     createdAt: portfolio.createdAt,
diff --git a/apps/business/src/services/settingsService.ts b/apps/business/src/services/settingsService.ts
index d1fb57f..1f707cb 100644
--- a/apps/business/src/services/settingsService.ts
+++ b/apps/business/src/services/settingsService.ts
@@ -5,6 +5,7 @@ import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
 
 export interface BrandingSettings {
   primaryColor: BusinessPrimaryColorId
+  defaultLocale?: 'en' | 'fa'
 }
 
 export interface DashboardSettings {
@@ -15,6 +16,7 @@ export interface DashboardSettings {
 export interface OrderProcessStep {
   id: string
   label: string
+  labelFa: string
   color: string
 }
 
@@ -35,10 +37,30 @@ export interface SettingsResponse {
 }
 
 export const DEFAULT_ORDER_PROCESS_STEPS: OrderProcessStep[] = [
-  { id: 'processing', label: 'Under processing', color: '#3B82F6' },
-  { id: 'ready-for-shipping', label: 'Ready for shipping', color: '#F59E0B' },
-  { id: 'shipped', label: 'Shipped', color: '#8B5CF6' },
-  { id: 'delivered', label: 'Delivered', color: '#22C55E' },
+  {
+    id: 'processing',
+    label: 'Under processing',
+    labelFa: 'در حال پردازش',
+    color: '#3B82F6',
+  },
+  {
+    id: 'ready-for-shipping',
+    label: 'Ready for shipping',
+    labelFa: 'آماده ارسال',
+    color: '#F59E0B',
+  },
+  {
+    id: 'shipped',
+    label: 'Shipped',
+    labelFa: 'ارسال‌شده',
+    color: '#8B5CF6',
+  },
+  {
+    id: 'delivered',
+    label: 'Delivered',
+    labelFa: 'تحویل‌شده',
+    color: '#22C55E',
+  },
 ]
 
 function settingsPath() {
diff --git a/apps/business/src/services/tenantService.ts b/apps/business/src/services/tenantService.ts
index fcce8e6..3ca5fe3 100644
--- a/apps/business/src/services/tenantService.ts
+++ b/apps/business/src/services/tenantService.ts
@@ -1,4 +1,5 @@
 import { apiRequest } from '../lib/api'
+import type { DashboardLocale } from '@meshkee/dashboard-core'
 
 export interface ResolvedTenant {
   id: string
@@ -6,6 +7,7 @@ export interface ResolvedTenant {
   nameFa: string | null
   slug: string
   domain: string
+  defaultLocale?: DashboardLocale
   logoUrl?: string | null
   faviconUrl?: string | null
 }
diff --git a/apps/business/src/types/auth.ts b/apps/business/src/types/auth.ts
index 87f0a6e..d1298e1 100644
--- a/apps/business/src/types/auth.ts
+++ b/apps/business/src/types/auth.ts
@@ -17,6 +17,8 @@ export interface AuthUser {
   email: string | null
   firstName: string | null
   lastName: string | null
+  firstNameEn: string | null
+  lastNameEn: string | null
   cellVerifiedAt: string | null
   roles: string[]
   dashboard: DashboardType
diff --git a/apps/business/src/types/portfolio.ts b/apps/business/src/types/portfolio.ts
index 5ceea80..a5740d8 100644
--- a/apps/business/src/types/portfolio.ts
+++ b/apps/business/src/types/portfolio.ts
@@ -17,6 +17,7 @@ export interface Portfolio {
   categoryName: string
   tags: string[]
   titleImageUrl: string | null
+  sortOrder: number
   commentCount: number
   publishedAt: string | null
   createdAt: string
diff --git a/apps/business/src/utils/applyBusinessTheme.ts b/apps/business/src/utils/applyBusinessTheme.ts
index e532218..8dbd3e7 100644
--- a/apps/business/src/utils/applyBusinessTheme.ts
+++ b/apps/business/src/utils/applyBusinessTheme.ts
@@ -11,6 +11,10 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
   '--primary-dark': '#2563eb',
   '--primary-rgb': '59 130 246',
   '--primary-dark-rgb': '37 99 235',
+  '--chart-accent': '#06b6d4',
+  '--chart-accent-dark': '#0891b2',
+  '--chart-accent-rgb': '6 182 212',
+  '--chart-accent-dark-rgb': '8 145 178',
 }
 
 export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -23,6 +27,10 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
   root.style.setProperty('--primary-dark', tokens.primaryDark)
   root.style.setProperty('--primary-rgb', tokens.primaryRgb)
   root.style.setProperty('--primary-dark-rgb', tokens.primaryDarkRgb)
+  root.style.setProperty('--chart-accent', tokens.chartAccent)
+  root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
+  root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
+  root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
 }
 
 export function resetBusinessPrimaryColor() {
diff --git a/apps/business/src/utils/businessPrimaryColors.ts b/apps/business/src/utils/businessPrimaryColors.ts
index 1129bd6..f2a22fc 100644
--- a/apps/business/src/utils/businessPrimaryColors.ts
+++ b/apps/business/src/utils/businessPrimaryColors.ts
@@ -20,8 +20,27 @@ export type BusinessPrimaryColorTokens = {
   primaryGlow: string
   primaryRgb: string
   primaryDarkRgb: string
+  /** Second chart series color (red→purple, blue→cyan, …). */
+  chartAccent: string
+  chartAccentDark: string
+  chartAccentRgb: string
+  chartAccentDarkRgb: string
 }
 
+const PURPLE_ACCENT = {
+  chartAccent: '#a855f7',
+  chartAccentDark: '#9333ea',
+  chartAccentRgb: '168 85 247',
+  chartAccentDarkRgb: '147 51 234',
+} as const
+
+const CYAN_ACCENT = {
+  chartAccent: '#06b6d4',
+  chartAccentDark: '#0891b2',
+  chartAccentRgb: '6 182 212',
+  chartAccentDarkRgb: '8 145 178',
+} as const
+
 export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
   BusinessPrimaryColorId,
   BusinessPrimaryColorTokens
@@ -34,6 +53,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#ef4444',
     primaryRgb: '239 68 68',
     primaryDarkRgb: '220 38 38',
+    ...PURPLE_ACCENT,
   },
   yellow: {
     label: 'Yellow',
@@ -43,6 +63,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#eab308',
     primaryRgb: '234 179 8',
     primaryDarkRgb: '202 138 4',
+    ...PURPLE_ACCENT,
   },
   black: {
     label: 'Black',
@@ -52,6 +73,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#334155',
     primaryRgb: '30 41 59',
     primaryDarkRgb: '15 23 42',
+    ...CYAN_ACCENT,
   },
   cyan: {
     label: 'Cyan',
@@ -61,6 +83,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#06b6d4',
     primaryRgb: '6 182 212',
     primaryDarkRgb: '8 145 178',
+    ...PURPLE_ACCENT,
   },
   purple: {
     label: 'Purple',
@@ -70,6 +93,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#a855f7',
     primaryRgb: '168 85 247',
     primaryDarkRgb: '147 51 234',
+    ...CYAN_ACCENT,
   },
   'light-blue': {
     label: 'Light Blue',
@@ -79,6 +103,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#38bdf8',
     primaryRgb: '56 189 248',
     primaryDarkRgb: '14 165 233',
+    ...CYAN_ACCENT,
   },
   'dark-blue': {
     label: 'Dark Blue',
@@ -88,6 +113,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#3b82f6',
     primaryRgb: '59 130 246',
     primaryDarkRgb: '37 99 235',
+    ...CYAN_ACCENT,
   },
 }
 
diff --git a/apps/business/src/utils/productActivity.ts b/apps/business/src/utils/productActivity.ts
index a1720d0..ecb945f 100644
--- a/apps/business/src/utils/productActivity.ts
+++ b/apps/business/src/utils/productActivity.ts
@@ -14,9 +14,13 @@ function toMonthKey(iso: string): string {
   return `${year}-${month}`
 }
 
-function formatMonthLabel(monthKey: string): string {
+function formatMonthLabel(monthKey: string, locale: string): string {
   const [year, month] = monthKey.split('-').map(Number)
-  return new Date(year, month - 1, 1).toLocaleString('en-US', { month: 'short' })
+  return new Date(year, month - 1, 1).toLocaleString(locale === 'fa' ? 'fa-IR' : 'en-US', {
+    month: 'short',
+    calendar: 'gregory',
+    numberingSystem: 'latn',
+  })
 }
 
 export function buildLast12MonthKeys(): string[] {
@@ -33,7 +37,10 @@ export function buildLast12MonthKeys(): string[] {
   return keys
 }
 
-export function aggregateProductActivity(products: ProductApi[]): ProductMonthActivity[] {
+export function aggregateProductActivity(
+  products: ProductApi[],
+  locale: string = 'en',
+): ProductMonthActivity[] {
   const monthKeys = buildLast12MonthKeys()
   const added = new Map(monthKeys.map((key) => [key, 0]))
   const updated = new Map(monthKeys.map((key) => [key, 0]))
@@ -56,7 +63,7 @@ export function aggregateProductActivity(products: ProductApi[]): ProductMonthAc
 
   return monthKeys.map((monthKey) => ({
     monthKey,
-    label: formatMonthLabel(monthKey),
+    label: formatMonthLabel(monthKey, locale),
     added: added.get(monthKey) ?? 0,
     updated: updated.get(monthKey) ?? 0,
   }))
diff --git a/apps/customer/index.html b/apps/customer/index.html
index de674fb..32792b4 100644
--- a/apps/customer/index.html
+++ b/apps/customer/index.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
@@ -15,6 +15,18 @@
       rel="stylesheet"
     />
     <title>Customer Dashboard</title>
+    <script>
+      try {
+        var l = localStorage.getItem('meshkee.dashboard.locale')
+        if (l === 'en') {
+          document.documentElement.lang = 'en'
+          document.documentElement.dir = 'ltr'
+        } else {
+          document.documentElement.lang = 'fa'
+          document.documentElement.dir = 'rtl'
+        }
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/apps/customer/src/App.tsx b/apps/customer/src/App.tsx
index d633f20..6e4ef3d 100644
--- a/apps/customer/src/App.tsx
+++ b/apps/customer/src/App.tsx
@@ -2,7 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom'
 import { AuthProvider } from './context/AuthContext'
 import { CustomerThemeProvider } from './context/CustomerThemeContext'
 import { TenantBrandingProvider } from './context/TenantBrandingContext'
-import { ToastProvider } from '@meshkee/dashboard-ui'
+import { LocaleProvider, ToastProvider } from '@meshkee/dashboard-ui'
 import { CustomerDomainGuard } from './components/CustomerDomainGuard'
 import { DashboardDocumentTitle } from './components/DashboardDocumentTitle'
 import { ProtectedRoute } from './components/ProtectedRoute'
@@ -26,6 +26,7 @@ import { CheckoutFailedStep } from './pages/checkout/CheckoutFailedStep'
 function App() {
   return (
     <CustomerDomainGuard>
+      <LocaleProvider>
       <CustomerThemeProvider>
       <BrowserRouter>
         <TenantBrandingProvider>
@@ -64,6 +65,7 @@ function App() {
         </TenantBrandingProvider>
       </BrowserRouter>
       </CustomerThemeProvider>
+      </LocaleProvider>
     </CustomerDomainGuard>
   )
 }
diff --git a/apps/customer/src/components/AddressFormModal.module.css b/apps/customer/src/components/AddressFormModal.module.css
new file mode 100644
index 0000000..0f04603
--- /dev/null
+++ b/apps/customer/src/components/AddressFormModal.module.css
@@ -0,0 +1,15 @@
+.modal {
+  max-width: 720px;
+}
+
+.overlay {
+  z-index: 1000;
+}
+
+.modal :global(select) {
+  background-position: right var(--select-arrow-offset) center;
+}
+
+:global([dir='rtl']) .modal :global(select) {
+  background-position: left var(--select-arrow-offset) center;
+}
diff --git a/apps/customer/src/components/AddressFormModal.tsx b/apps/customer/src/components/AddressFormModal.tsx
new file mode 100644
index 0000000..060e2dd
--- /dev/null
+++ b/apps/customer/src/components/AddressFormModal.tsx
@@ -0,0 +1,357 @@
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { X } from 'lucide-react'
+import {
+  getLocationOptionLabel,
+  matchCityByName,
+  matchProvinceByName,
+  useLocale,
+  useToast,
+} from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
+import { ApiError } from '../lib/api'
+import {
+  createAddress,
+  updateAddress,
+  type UserAddress,
+} from '../services/addressService'
+import {
+  listCitiesByProvinceSlug,
+  listIranProvinces,
+  type CityOption,
+} from '../services/citiesService'
+import modalStyles from './VariationsModal.module.css'
+import panelStyles from './checkout/CheckoutAddAddressPanel.module.css'
+import styles from './AddressFormModal.module.css'
+
+interface AddressFormModalProps {
+  open: boolean
+  address: UserAddress | null
+  onClose: () => void
+  onSaved: (address: UserAddress) => void
+}
+
+const ANIMATION_MS = 220
+
+export function AddressFormModal({ open, address, onClose, onSaved }: AddressFormModalProps) {
+  const t = useT()
+  const { locale, dir } = useLocale()
+  const { showToast } = useToast()
+  const [mounted, setMounted] = useState(open)
+  const [closing, setClosing] = useState(false)
+  const [formKey, setFormKey] = useState(0)
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true)
+      setClosing(false)
+      setFormKey((key) => key + 1)
+    } else if (mounted) {
+      setClosing(true)
+      const timer = setTimeout(() => {
+        setMounted(false)
+        setClosing(false)
+      }, ANIMATION_MS)
+      return () => clearTimeout(timer)
+    }
+  }, [open, mounted])
+
+  useEffect(() => {
+    if (!mounted || closing) return
+
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.body.style.overflow = prevOverflow
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [mounted, closing, onClose])
+
+  if (!mounted) return null
+
+  const isEdit = Boolean(address?.id)
+
+  return createPortal(
+    <div
+      className={`${modalStyles.overlay} ${styles.overlay} ${closing ? modalStyles.overlayOut : modalStyles.overlayIn}`}
+      onClick={onClose}
+    >
+      <div
+        className={`${modalStyles.modal} ${styles.modal} ${closing ? modalStyles.modalOut : modalStyles.modalIn}`}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="address-form-title"
+        lang={locale}
+        dir={dir}
+      >
+        <div className={modalStyles.header}>
+          <div>
+            <h2 id="address-form-title" className={modalStyles.title}>
+              {isEdit ? t('addresses.modal.editTitle') : t('addresses.modal.addTitle')}
+            </h2>
+            <p className={modalStyles.subtitle}>{t('addresses.modal.subtitle')}</p>
+          </div>
+          <button
+            type="button"
+            className={modalStyles.closeBtn}
+            onClick={onClose}
+            aria-label={t('common.close')}
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        <div className={modalStyles.body}>
+          <AddressFormFields
+            key={formKey}
+            address={address}
+            onCancel={onClose}
+            onSaved={(saved) => {
+              showToast(
+                isEdit ? t('addresses.toast.updated') : t('addresses.toast.created'),
+                'success',
+              )
+              onSaved(saved)
+              onClose()
+            }}
+          />
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+function AddressFormFields({
+  address,
+  onCancel,
+  onSaved,
+}: {
+  address: UserAddress | null
+  onCancel: () => void
+  onSaved: (address: UserAddress) => void
+}) {
+  const t = useT()
+  const { locale } = useLocale()
+  const [provinces, setProvinces] = useState<CityOption[]>([])
+  const [cities, setCities] = useState<CityOption[]>([])
+  const [loadingLocations, setLoadingLocations] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState('')
+  const [label, setLabel] = useState(address?.label ?? '')
+  const [provinceSlug, setProvinceSlug] = useState('')
+  const [city, setCity] = useState('')
+  const [street, setStreet] = useState(address?.address ?? '')
+  const [postalCode, setPostalCode] = useState(address?.postalCode ?? '')
+  const [landline, setLandline] = useState(address?.landline ?? '')
+
+  useEffect(() => {
+    const controller = new AbortController()
+
+    async function load() {
+      setLoadingLocations(true)
+      try {
+        const items = await listIranProvinces(controller.signal)
+        if (controller.signal.aborted) return
+        setProvinces(items)
+
+        if (!address) return
+
+        const province = matchProvinceByName(address.province, items)
+        if (!province) return
+
+        setProvinceSlug(province.slug)
+        const cityItems = await listCitiesByProvinceSlug(province.slug, controller.signal)
+        if (controller.signal.aborted) return
+        setCities(cityItems)
+        const matchedCity = matchCityByName(address.city, cityItems)
+        setCity(
+          matchedCity ? getLocationOptionLabel(matchedCity, locale) : address.city,
+        )
+      } catch {
+        if (!controller.signal.aborted) setError(t('addresses.error.loadLocations'))
+      } finally {
+        if (!controller.signal.aborted) setLoadingLocations(false)
+      }
+    }
+
+    void load()
+    return () => controller.abort()
+  }, [address, locale, t])
+
+  async function handleProvinceChange(slug: string) {
+    setProvinceSlug(slug)
+    setCity('')
+    setCities([])
+
+    if (!slug) return
+
+    try {
+      const items = await listCitiesByProvinceSlug(slug)
+      setCities(items)
+    } catch {
+      setError(t('addresses.error.loadCities'))
+    }
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError('')
+
+    const province = provinces.find((item) => item.slug === provinceSlug)
+    if (!label.trim() || !province || !city.trim() || !street.trim()) {
+      setError(t('addresses.error.incompleteForm'))
+      return
+    }
+
+    const payload = {
+      label: label.trim(),
+      province: getLocationOptionLabel(province, locale),
+      city: city.trim(),
+      address: street.trim(),
+      postalCode: postalCode.trim() || undefined,
+      landline: landline.trim() || undefined,
+    }
+
+    setSaving(true)
+    try {
+      const result = address?.id
+        ? await updateAddress(address.id, payload)
+        : await createAddress(payload)
+      onSaved(result.address)
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : t('addresses.error.save'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <form
+      className={[panelStyles.form, panelStyles.formInModal].join(' ')}
+      onSubmit={(e) => void handleSubmit(e)}
+    >
+      {error && (
+        <div className={panelStyles.error} role="alert">
+          {error}
+        </div>
+      )}
+
+      <div className={panelStyles.fieldRowTriple}>
+        <div className={panelStyles.field}>
+          <label htmlFor="address-label">{t('addresses.label')}</label>
+          <input
+            id="address-label"
+            type="text"
+            value={label}
+            disabled={saving}
+            onChange={(e) => setLabel(e.target.value)}
+            placeholder={t('addresses.labelPlaceholder')}
+          />
+        </div>
+
+        <div className={panelStyles.field}>
+          <label htmlFor="address-province">{t('addresses.province')}</label>
+          <select
+            id="address-province"
+            value={provinceSlug}
+            disabled={loadingLocations || saving}
+            onChange={(e) => void handleProvinceChange(e.target.value)}
+          >
+            <option value="">{t('addresses.selectProvince')}</option>
+            {provinces.map((province) => (
+              <option key={province.id} value={province.slug}>
+                {getLocationOptionLabel(province, locale)}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div className={panelStyles.field}>
+          <label htmlFor="address-city">{t('addresses.city')}</label>
+          <select
+            id="address-city"
+            value={city}
+            disabled={!provinceSlug || saving}
+            onChange={(e) => setCity(e.target.value)}
+          >
+            <option value="">{t('addresses.selectCity')}</option>
+            {cities.map((item) => (
+              <option key={item.id} value={getLocationOptionLabel(item, locale)}>
+                {getLocationOptionLabel(item, locale)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className={panelStyles.field}>
+        <label htmlFor="address-street">{t('addresses.address')}</label>
+        <input
+          id="address-street"
+          type="text"
+          value={street}
+          disabled={saving}
+          onChange={(e) => setStreet(e.target.value)}
+          placeholder={t('addresses.streetPlaceholder')}
+        />
+      </div>
+
+      <div className={panelStyles.fieldRow}>
+        <div className={panelStyles.field}>
+          <label htmlFor="address-postal">
+            {t('addresses.postalCode')}
+            <span className={panelStyles.optionalMark}> {t('addresses.optional')}</span>
+          </label>
+          <input
+            id="address-postal"
+            type="text"
+            inputMode="numeric"
+            value={postalCode}
+            disabled={saving}
+            onChange={(e) => setPostalCode(e.target.value)}
+            placeholder={t('addresses.postalPlaceholder')}
+            dir="ltr"
+          />
+        </div>
+
+        <div className={panelStyles.field}>
+          <label htmlFor="address-landline">
+            {t('addresses.landline')}
+            <span className={panelStyles.optionalMark}> {t('addresses.optional')}</span>
+          </label>
+          <input
+            id="address-landline"
+            type="tel"
+            value={landline}
+            disabled={saving}
+            onChange={(e) => setLandline(e.target.value)}
+            placeholder={t('addresses.landlinePlaceholder')}
+            dir="ltr"
+          />
+        </div>
+      </div>
+
+      <div className={panelStyles.formActions}>
+        <button
+          type="button"
+          className={panelStyles.cancelBtn}
+          onClick={onCancel}
+          disabled={saving}
+        >
+          {t('addresses.cancel')}
+        </button>
+        <button type="submit" className={panelStyles.saveBtn} disabled={saving}>
+          {saving ? t('addresses.saving') : t('addresses.saveOne')}
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/apps/customer/src/components/DashboardDocumentTitle.tsx b/apps/customer/src/components/DashboardDocumentTitle.tsx
index a2bf735..674dd3b 100644
--- a/apps/customer/src/components/DashboardDocumentTitle.tsx
+++ b/apps/customer/src/components/DashboardDocumentTitle.tsx
@@ -1,17 +1,18 @@
 import { useLocation } from 'react-router-dom'
-import { useDashboardDocumentTitle } from '@meshkee/dashboard-ui'
+import { useDashboardDocumentTitle, useLocale } from '@meshkee/dashboard-ui'
 import { useTenantBranding } from '../context/TenantBrandingContext'
-import { CUSTOMER_DASHBOARD_NAME, customerRouteTitleRules } from '../lib/routeTitles'
+import { getCustomerRouteTitleRules, translate } from '../i18n/messages'
 
 export function DashboardDocumentTitle() {
   const { pathname } = useLocation()
   const { businessName } = useTenantBranding()
+  const { locale } = useLocale()
 
   useDashboardDocumentTitle({
     businessName,
-    dashboardName: CUSTOMER_DASHBOARD_NAME,
+    dashboardName: translate(locale, 'app.dashboardName'),
     pathname,
-    routeRules: customerRouteTitleRules,
+    routeRules: getCustomerRouteTitleRules(locale),
   })
 
   return null
diff --git a/apps/customer/src/components/FavoriteStoreItemCard.module.css b/apps/customer/src/components/FavoriteStoreItemCard.module.css
index e3c13a3..b17bc99 100644
--- a/apps/customer/src/components/FavoriteStoreItemCard.module.css
+++ b/apps/customer/src/components/FavoriteStoreItemCard.module.css
@@ -62,13 +62,13 @@
 }
 
 .festivalBadge {
-  left: 8px;
+  inset-inline-start: 8px;
   text-transform: uppercase;
   color: #7c3aed;
 }
 
 .stockBadge {
-  right: 8px;
+  inset-inline-end: 8px;
   color: var(--primary);
 }
 
@@ -83,7 +83,7 @@
   color: var(--text-primary);
   line-height: 1.3;
   margin-bottom: 3px;
-  text-align: left;
+  text-align: start;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
@@ -91,7 +91,7 @@
 }
 
 .nameFa {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: 12px;
   color: var(--text-secondary);
   direction: rtl;
@@ -129,7 +129,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  padding-left: 4px;
+  padding-inline-start: 4px;
 }
 
 .controlsLeft button {
diff --git a/apps/customer/src/components/FavoriteStoreItemCard.tsx b/apps/customer/src/components/FavoriteStoreItemCard.tsx
index 4d52388..b379558 100644
--- a/apps/customer/src/components/FavoriteStoreItemCard.tsx
+++ b/apps/customer/src/components/FavoriteStoreItemCard.tsx
@@ -1,6 +1,8 @@
 import { useId } from 'react'
 import { Trash2 } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
 import type { FavoriteListing } from '../services/favoritesService'
+import { useT } from '../i18n/useT'
 import { formatVariantCount } from '../utils/storeProductGroups'
 import { StoreItemPrice } from './StoreItemPrice'
 import { Tooltip } from './Tooltip'
@@ -55,6 +57,8 @@ export function FavoriteStoreItemCard({
   onAddToCart,
   removing = false,
 }: FavoriteStoreItemCardProps) {
+  const t = useT()
+  const { locale } = useLocale()
   const plusGradientId = `add-cart-gradient-${useId().replace(/:/g, '')}`
 
   return (
@@ -71,16 +75,20 @@ export function FavoriteStoreItemCard({
           ) : (
             <div className={styles.imagePlaceholder} />
           )}
-          {listing.showFestival && <span className={styles.festivalBadge}>Festival</span>}
+          {listing.showFestival && (
+            <span className={styles.festivalBadge}>{t('favorites.festival')}</span>
+          )}
           {listing.productTotalStock > 0 && (
-            <span className={styles.stockBadge}>{listing.productTotalStock} in stock</span>
+            <span className={styles.stockBadge}>
+              {t('favorites.inStock', { count: listing.productTotalStock })}
+            </span>
           )}
         </div>
 
         <div className={styles.body}>
           <h3 className={styles.nameEn}>{listing.productTitle}</h3>
           {listing.productNameFa && <p className={styles.nameFa}>{listing.productNameFa}</p>}
-          <p className={styles.variantLabel}>{formatVariantCount(listing.variantCount)}</p>
+          <p className={styles.variantLabel}>{formatVariantCount(listing.variantCount, locale)}</p>
           <StoreItemPrice
             price={listing.displayPrice}
             discountedPrice={listing.displayDiscountedPrice}
@@ -90,25 +98,25 @@ export function FavoriteStoreItemCard({
 
       <div className={styles.controls}>
         <div className={styles.controlsLeft}>
-          <Tooltip label="Remove from favorites">
+          <Tooltip label={t('favorites.remove')}>
             <button
               type="button"
               className={styles.danger}
               onClick={() => onRemove(listing)}
               disabled={removing}
-              aria-label="Remove from favorites"
+              aria-label={t('favorites.remove')}
             >
               <Trash2 size={16} />
             </button>
           </Tooltip>
         </div>
 
-        <Tooltip label="Add to shopping cart">
+        <Tooltip label={t('favorites.addToCart')}>
           <button
             type="button"
             className={styles.addToCartBtn}
             onClick={() => onAddToCart(listing)}
-            aria-label="Add to shopping cart"
+            aria-label={t('favorites.addToCart')}
           >
             <GradientPlusIcon gradientId={plusGradientId} />
           </button>
diff --git a/apps/customer/src/components/Header.module.css b/apps/customer/src/components/Header.module.css
index 408db9b..58cc49f 100644
--- a/apps/customer/src/components/Header.module.css
+++ b/apps/customer/src/components/Header.module.css
@@ -60,9 +60,10 @@
 .badge {
   position: absolute;
   top: 4px;
-  right: 4px;
-  width: 18px;
+  inset-inline-end: 4px;
+  min-width: 18px;
   height: 18px;
+  padding: 0 4px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -70,7 +71,8 @@
   color: white;
   font-size: 10px;
   font-weight: 600;
-  border-radius: 50%;
+  line-height: 1;
+  border-radius: 999px;
   border: 2px solid white;
 }
 
@@ -81,8 +83,9 @@
 .profile {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 6px 12px 6px 6px;
+  gap: 10px;
+  padding-block: 8px;
+  padding-inline: 14px 12px;
   border-radius: 50px;
   background: rgba(255, 255, 255, 0.5);
   border: 1px solid var(--glass-border);
@@ -96,13 +99,6 @@
   border-color: rgba(var(--primary-rgb) / 0.25);
 }
 
-.avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
 .profileInfo {
   display: flex;
   flex-direction: column;
@@ -132,7 +128,7 @@
 .dropdown {
   position: absolute;
   top: calc(100% + 8px);
-  right: 0;
+  inset-inline-end: 0;
   min-width: 180px;
   padding: 6px;
   background: rgba(255, 255, 255, 0.95);
diff --git a/apps/customer/src/components/Header.tsx b/apps/customer/src/components/Header.tsx
index 627b4f9..569914c 100644
--- a/apps/customer/src/components/Header.tsx
+++ b/apps/customer/src/components/Header.tsx
@@ -1,20 +1,45 @@
 import { useEffect, useRef, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { Menu, Bell, MessageSquare, ChevronDown, User, KeyRound, LogOut } from 'lucide-react'
-import { PasswordResetModal } from '@meshkee/dashboard-ui'
+import { LanguageSelect, PasswordResetModal, useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
+import { useT } from '../i18n/useT'
 import { changePassword } from '../services/authService'
 import styles from './Header.module.css'
 
+function displayUserName(
+  user: {
+    firstName: string | null
+    lastName: string | null
+    firstNameEn: string | null
+    lastNameEn: string | null
+    cellNumber: string
+  } | null,
+  locale: 'en' | 'fa',
+  fallback: string,
+) {
+  if (!user) return fallback
+  const localized =
+    locale === 'en'
+      ? [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
+      : [user.firstName, user.lastName].filter(Boolean).join(' ')
+  const other =
+    locale === 'en'
+      ? [user.firstName, user.lastName].filter(Boolean).join(' ')
+      : [user.firstNameEn, user.lastNameEn].filter(Boolean).join(' ')
+  return localized || other || user.cellNumber || fallback
+}
+
 export function Header() {
   const navigate = useNavigate()
   const { user, logout } = useAuth()
+  const { locale } = useLocale()
+  const t = useT()
   const [menuOpen, setMenuOpen] = useState(false)
   const [passwordModalOpen, setPasswordModalOpen] = useState(false)
   const menuRef = useRef<HTMLDivElement>(null)
 
-  const displayName =
-    [user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.cellNumber || 'Customer'
+  const displayName = displayUserName(user, locale, t('app.role.customer'))
 
   useEffect(() => {
     if (!menuOpen) return
@@ -52,19 +77,22 @@ export function Header() {
     <>
       <header className={styles.header}>
         <div className={styles.left}>
-          <button className={styles.menuBtn} aria-label="Toggle menu">
+          <button className={styles.menuBtn} aria-label={t('header.toggleMenu')}>
             <Menu size={22} />
           </button>
-          <h1 className={styles.title}>Customer Dashboard</h1>
         </div>
 
         <div className={styles.right}>
-          <button className={styles.iconBtn} aria-label="Messages">
+          <LanguageSelect />
+
+          <button className={styles.iconBtn} aria-label={t('header.messages')}>
             <MessageSquare size={20} />
+            <span className={styles.badge}>0</span>
           </button>
 
-          <button className={styles.iconBtn} aria-label="Notifications">
+          <button className={styles.iconBtn} aria-label={t('header.notifications')}>
             <Bell size={20} />
+            <span className={styles.badge}>0</span>
           </button>
 
           <div className={styles.profileWrap} ref={menuRef}>
@@ -75,14 +103,9 @@ export function Header() {
               aria-expanded={menuOpen}
               aria-haspopup="menu"
             >
-              <img
-                src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${encodeURIComponent(displayName)}`}
-                alt={displayName}
-                className={styles.avatar}
-              />
               <div className={styles.profileInfo}>
                 <span className={styles.name}>{displayName}</span>
-                <span className={styles.role}>Customer</span>
+                <span className={styles.role}>{t('app.role.customer')}</span>
               </div>
               <ChevronDown
                 size={16}
@@ -99,7 +122,7 @@ export function Header() {
                   onClick={() => setMenuOpen(false)}
                 >
                   <User size={16} />
-                  <span>My Profile</span>
+                  <span>{t('header.myProfile')}</span>
                 </Link>
                 <button
                   type="button"
@@ -108,7 +131,7 @@ export function Header() {
                   onClick={openPasswordModal}
                 >
                   <KeyRound size={16} />
-                  <span>Change password</span>
+                  <span>{t('header.changePassword')}</span>
                 </button>
                 <button
                   type="button"
@@ -117,7 +140,7 @@ export function Header() {
                   onClick={handleLogout}
                 >
                   <LogOut size={16} />
-                  <span>Logout</span>
+                  <span>{t('nav.logout')}</span>
                 </button>
               </div>
             )}
@@ -129,6 +152,7 @@ export function Header() {
         open={passwordModalOpen}
         onClose={() => setPasswordModalOpen(false)}
         onChangePassword={changePassword}
+        title={t('header.changePassword')}
       />
     </>
   )
diff --git a/apps/customer/src/components/OrderItemsModal.tsx b/apps/customer/src/components/OrderItemsModal.tsx
index 3a62474..e47993d 100644
--- a/apps/customer/src/components/OrderItemsModal.tsx
+++ b/apps/customer/src/components/OrderItemsModal.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
+import { useT } from '../i18n/useT'
 import type { Order } from '../services/orderService'
 import { formatCellForDisplay } from '../lib/cellNumber'
 import { formatIrtPrice } from '../utils/irtPrice'
@@ -30,6 +31,7 @@ function totalQuantity(order: Order) {
 }
 
 export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps) {
+  const t = useT()
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
 
@@ -75,11 +77,16 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
         <div className={modalStyles.header}>
           <div>
             <h2 id="order-items-title" className={modalStyles.title}>
-              Order items
+              {t('orderItems.title')}
             </h2>
             <p className={modalStyles.subtitle}>{order.orderNumber}</p>
           </div>
-          <button type="button" className={modalStyles.closeBtn} onClick={onClose} aria-label="Close">
+          <button
+            type="button"
+            className={modalStyles.closeBtn}
+            onClick={onClose}
+            aria-label={t('common.close')}
+          >
             <X size={18} />
           </button>
         </div>
@@ -87,26 +94,27 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
         <div className={`${modalStyles.body} ${styles.body}`}>
           <div className={styles.metaRow}>
             <span className={styles.metaItem}>
-              Customer: <strong>{displayName(order)}</strong>
+              {t('orderItems.customer')}: <strong>{displayName(order)}</strong>
             </span>
             <span className={styles.metaItem}>
-              Phone: <strong>{formatCellForDisplay(order.customer.cellNumber)}</strong>
+              {t('orderItems.phone')}:{' '}
+              <strong>{formatCellForDisplay(order.customer.cellNumber)}</strong>
             </span>
             <span className={styles.metaItem}>
-              Items: <strong>{itemCount}</strong>
+              {t('orderItems.items')}: <strong>{itemCount}</strong>
             </span>
           </div>
 
           {order.items.length === 0 ? (
-            <p className={styles.empty}>No items in this order.</p>
+            <p className={styles.empty}>{t('orderItems.empty')}</p>
           ) : (
             <div className={styles.tableBlock}>
               <div className={styles.tableHead}>
                 <span aria-hidden="true" />
-                <span>Product</span>
-                <span>Qty</span>
-                <span>Unit price</span>
-                <span>Line total</span>
+                <span>{t('orderItems.product')}</span>
+                <span>{t('orderItems.qty')}</span>
+                <span>{t('orderItems.unitPrice')}</span>
+                <span>{t('orderItems.lineTotal')}</span>
               </div>
               <ul className={styles.itemList}>
                 {order.items.map((item) => (
@@ -122,7 +130,9 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
                       <div className={styles.itemTitle}>{item.productTitle}</div>
                       <div className={styles.itemVariant}>{formatVariantLabel(item.selections)}</div>
                       {item.variantSku && (
-                        <div className={styles.itemSku}>SKU: {item.variantSku}</div>
+                        <div className={styles.itemSku}>
+                          {t('orderItems.sku', { sku: item.variantSku })}
+                        </div>
                       )}
                     </div>
                     <div className={styles.qtyCell}>{item.quantity}</div>
@@ -136,20 +146,23 @@ export function OrderItemsModal({ open, order, onClose }: OrderItemsModalProps)
 
           <div className={styles.summary}>
             <span className={styles.summaryLabel}>
-              Order total · {itemCount} {itemCount === 1 ? 'item' : 'items'}
+              {t('orderItems.summary', {
+                count: itemCount,
+                itemsLabel:
+                  itemCount === 1 ? t('orderItems.item') : t('orderItems.itemsPlural'),
+              })}
             </span>
             <span className={styles.summaryValue}>{formatIrtPrice(order.total)}</span>
           </div>
 
           <div className={modalStyles.actions}>
             <button type="button" className={modalStyles.cancelBtn} onClick={onClose}>
-              Close
+              {t('orderItems.close')}
             </button>
           </div>
         </div>
       </div>
-    </div>
-  ,
-  document.body,
+    </div>,
+    document.body,
   )
 }
diff --git a/apps/customer/src/components/OrderRow.module.css b/apps/customer/src/components/OrderRow.module.css
index 08f6f24..f054a1f 100644
--- a/apps/customer/src/components/OrderRow.module.css
+++ b/apps/customer/src/components/OrderRow.module.css
@@ -1,6 +1,6 @@
 .td {
   padding: 10px 12px;
-  text-align: left;
+  text-align: start;
   border-bottom: 1px solid rgba(148, 163, 184, 0.16);
   vertical-align: middle;
   font-size: 13px;
@@ -75,16 +75,17 @@
 }
 
 .tdActions {
-  text-align: right;
+  text-align: end;
   white-space: nowrap;
-  padding-right: 10px;
+  padding-inline: 10px;
 }
 
 .rowActions {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0;
+  width: 100%;
 }
 
 .actionBtn {
diff --git a/apps/customer/src/components/OrderRow.tsx b/apps/customer/src/components/OrderRow.tsx
index 918c1f5..5b0eaa9 100644
--- a/apps/customer/src/components/OrderRow.tsx
+++ b/apps/customer/src/components/OrderRow.tsx
@@ -1,4 +1,6 @@
 import { Eye } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import type { Order, OrderSource } from '../services/orderService'
 import type { OrderProcessStep } from '../utils/orderSteps'
 import { stepLabel, stepColor } from '../utils/orderSteps'
@@ -12,12 +14,13 @@ interface OrderRowProps {
   onViewItems: (order: Order) => void
 }
 
-function formatDateTime(value: string) {
+function formatDateTime(value: string, locale: 'en' | 'fa') {
   const d = new Date(value)
   if (Number.isNaN(d.getTime())) return { date: value, time: '' }
+  const intlLocale = locale === 'fa' ? 'fa-IR' : 'en-US'
   return {
-    date: d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: '2-digit' }),
-    time: d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }),
+    date: d.toLocaleDateString(intlLocale, { year: 'numeric', month: 'short', day: '2-digit' }),
+    time: d.toLocaleTimeString(intlLocale, { hour: '2-digit', minute: '2-digit' }),
   }
 }
 
@@ -25,35 +28,37 @@ function totalItemQuantity(order: Order) {
   return order.items.reduce((sum, item) => sum + item.quantity, 0)
 }
 
-function sourceLabel(source: OrderSource) {
-  switch (source) {
-    case 'admin':
-      return 'Operator'
-    case 'app':
-      return 'Application'
-    case 'website':
-    default:
-      return 'Website'
-  }
-}
-
-function sourceClass(source: OrderSource) {
-  switch (source) {
-    case 'admin':
-      return styles.sourceOperator
-    case 'app':
-      return styles.sourceApplication
-    case 'website':
-    default:
-      return styles.sourceWebsite
-  }
-}
-
 export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) {
-  const { date, time } = formatDateTime(order.createdAt)
+  const { locale } = useLocale()
+  const t = useT()
+  const { date, time } = formatDateTime(order.createdAt, locale)
   const itemQty = totalItemQuantity(order)
   const processStepId = order.processStepId ?? processSteps[0]?.id ?? 'processing'
 
+  function sourceLabel(source: OrderSource) {
+    switch (source) {
+      case 'admin':
+        return t('orders.source.operator')
+      case 'app':
+        return t('orders.source.app')
+      case 'website':
+      default:
+        return t('orders.source.website')
+    }
+  }
+
+  function sourceClass(source: OrderSource) {
+    switch (source) {
+      case 'admin':
+        return styles.sourceOperator
+      case 'app':
+        return styles.sourceApplication
+      case 'website':
+      default:
+        return styles.sourceWebsite
+    }
+  }
+
   return (
     <tr>
       <td className={styles.td}>
@@ -74,7 +79,13 @@ export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) {
             stepColor(processSteps, processStepId, order.processStepColor),
           )}
         >
-          {stepLabel(processSteps, processStepId, order.processStepLabel)}
+          {stepLabel(
+            processSteps,
+            processStepId,
+            order.processStepLabel,
+            order.processStepLabelFa,
+            locale,
+          )}
         </span>
       </td>
       <td className={styles.td}>
@@ -88,8 +99,8 @@ export function OrderRow({ order, processSteps, onViewItems }: OrderRowProps) {
             type="button"
             className={styles.actionBtn}
             onClick={() => onViewItems(order)}
-            aria-label="View items"
-            title="View items"
+            aria-label={t('orders.viewItems')}
+            title={t('orders.viewItems')}
           >
             <Eye size={15} />
           </button>
diff --git a/apps/customer/src/components/PageLayout.module.css b/apps/customer/src/components/PageLayout.module.css
index 99e700e..a9cc624 100644
--- a/apps/customer/src/components/PageLayout.module.css
+++ b/apps/customer/src/components/PageLayout.module.css
@@ -4,7 +4,7 @@
 }
 
 .main {
-  margin-left: var(--sidebar-width);
+  margin-inline-start: var(--sidebar-width);
   min-height: 100vh;
   position: relative;
   z-index: 1;
@@ -12,6 +12,6 @@
 
 @media (max-width: 768px) {
   .main {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
 }
diff --git a/apps/customer/src/components/Sidebar.module.css b/apps/customer/src/components/Sidebar.module.css
index b2b1157..9f55dbb 100644
--- a/apps/customer/src/components/Sidebar.module.css
+++ b/apps/customer/src/components/Sidebar.module.css
@@ -1,7 +1,7 @@
 .sidebar {
   position: fixed;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: var(--sidebar-width);
   height: 100vh;
   display: flex;
@@ -10,7 +10,7 @@
   background: var(--glass-bg);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
-  border-right: 1px solid var(--glass-border);
+  border-inline-end: 1px solid var(--glass-border);
   z-index: 100;
 }
 
@@ -61,17 +61,18 @@
 }
 
 .brandDomain {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  line-height: 1.2;
-}
-
-.brandName {
   font-size: 11px;
   font-weight: 500;
   color: var(--text-muted);
   margin-top: 2px;
+  line-height: 1.2;
+}
+
+.brandName {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
 }
 
 .nav {
@@ -80,7 +81,7 @@
   flex-direction: column;
   gap: 2px;
   overflow-y: auto;
-  padding-right: 2px;
+  padding-inline-end: 2px;
 }
 
 .navGroup {
@@ -99,7 +100,7 @@
   color: var(--text-secondary);
   transition: all 0.2s ease;
   width: 100%;
-  text-align: left;
+  text-align: start;
 }
 
 .navItem:hover {
@@ -134,9 +135,10 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  margin: 2px 0 4px 12px;
-  padding-left: 12px;
-  border-left: 2px solid rgba(148, 163, 184, 0.2);
+  margin-block: 2px 4px;
+  margin-inline: 12px 0;
+  padding-inline-start: 12px;
+  border-inline-start: 2px solid rgba(148, 163, 184, 0.2);
 }
 
 .subNavItem {
diff --git a/apps/customer/src/components/Sidebar.tsx b/apps/customer/src/components/Sidebar.tsx
index 400f6aa..ddbc2af 100644
--- a/apps/customer/src/components/Sidebar.tsx
+++ b/apps/customer/src/components/Sidebar.tsx
@@ -1,32 +1,35 @@
 import { useEffect, useState } from 'react'
 import { NavLink, useNavigate } from 'react-router-dom'
-import { Home, User, MapPin, ShoppingBag, ShoppingCart, Heart, HelpCircle, LogOut } from 'lucide-react'
+import { Home, User, MapPin, ShoppingBag, Heart, HelpCircle, LogOut } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
+import { useT } from '../i18n/useT'
 import { getActiveBusinessDomain } from '../lib/businessContext'
 import { isAbortError } from '../lib/api'
 import { getWebsiteBusinessInfo } from '../services/websiteService'
 import meshkeeLogo from '../assets/meshkee-logo.png'
 import styles from './Sidebar.module.css'
 
-const navItems = [
-  { icon: Home, label: 'Home', to: '/' },
-  { icon: ShoppingCart, label: 'Shopping Cart', to: '/checkout' },
-  { icon: User, label: 'My Profile', to: '/profile' },
-  { icon: MapPin, label: 'My Addresses', to: '/addresses' },
-  { icon: ShoppingBag, label: 'My Orders', to: '/orders' },
-  { icon: Heart, label: 'My Favorites', to: '/favorites' },
-]
-
 export function Sidebar() {
   const navigate = useNavigate()
   const { user, logout } = useAuth()
+  const { locale } = useLocale()
+  const t = useT()
   const [brandName, setBrandName] = useState('')
   const [logoUrl, setLogoUrl] = useState<string | null>(null)
 
   const businessDomain = getActiveBusinessDomain()
-  const fallbackBusinessName = user?.customerBusinesses[0]?.name ?? 'Store'
+  const fallbackBusinessName = user?.customerBusinesses[0]?.name ?? t('app.storeFallback')
   const displayName = brandName || fallbackBusinessName
 
+  const navItems = [
+    { icon: Home, label: t('nav.home'), to: '/' },
+    { icon: User, label: t('nav.profile'), to: '/profile' },
+    { icon: MapPin, label: t('nav.addresses'), to: '/addresses' },
+    { icon: ShoppingBag, label: t('nav.orders'), to: '/orders' },
+    { icon: Heart, label: t('nav.favorites'), to: '/favorites' },
+  ]
+
   useEffect(() => {
     const controller = new AbortController()
 
@@ -34,7 +37,11 @@ export function Sidebar() {
       try {
         const info = await getWebsiteBusinessInfo(businessDomain, controller.signal)
         if (controller.signal.aborted) return
-        setBrandName(info.nameFa?.trim() || info.name.trim() || fallbackBusinessName)
+        const localized =
+          locale === 'fa'
+            ? info.nameFa?.trim() || info.name.trim()
+            : info.name.trim() || info.nameFa?.trim()
+        setBrandName(localized || fallbackBusinessName)
         setLogoUrl(info.logoUrl?.trim() || null)
       } catch (err) {
         if (isAbortError(err)) return
@@ -48,7 +55,7 @@ export function Sidebar() {
     return () => {
       controller.abort()
     }
-  }, [businessDomain, fallbackBusinessName])
+  }, [businessDomain, fallbackBusinessName, locale])
 
   return (
     <aside className={styles.sidebar}>
@@ -59,15 +66,15 @@ export function Sidebar() {
           className={styles.brandLogo}
         />
         <div className={styles.brandText}>
-          <span className={styles.brandDomain}>{businessDomain}</span>
           <span className={styles.brandName}>{displayName}</span>
+          <span className={styles.brandDomain}>{businessDomain}</span>
         </div>
       </div>
 
       <nav className={styles.nav}>
         {navItems.map((item) => (
           <NavLink
-            key={item.label}
+            key={item.to}
             to={item.to}
             end={item.to === '/'}
             className={({ isActive }) =>
@@ -83,7 +90,7 @@ export function Sidebar() {
       <div className={styles.footer}>
         <button type="button" className={styles.navItem}>
           <HelpCircle size={20} />
-          <span>Help Center</span>
+          <span>{t('nav.help')}</span>
         </button>
         <button
           type="button"
@@ -94,7 +101,7 @@ export function Sidebar() {
           }}
         >
           <LogOut size={20} />
-          <span>Logout</span>
+          <span>{t('nav.logout')}</span>
         </button>
       </div>
     </aside>
diff --git a/apps/customer/src/components/checkout/CheckoutBackButton.module.css b/apps/customer/src/components/checkout/CheckoutBackButton.module.css
index b78af3c..95973b6 100644
--- a/apps/customer/src/components/checkout/CheckoutBackButton.module.css
+++ b/apps/customer/src/components/checkout/CheckoutBackButton.module.css
@@ -17,3 +17,7 @@
 .backBtn span {
   line-height: 1.4;
 }
+
+:global([dir='rtl']) .backBtn svg {
+  transform: scaleX(-1);
+}
diff --git a/apps/customer/src/context/TenantBrandingContext.tsx b/apps/customer/src/context/TenantBrandingContext.tsx
index 1a03a4f..9a90078 100644
--- a/apps/customer/src/context/TenantBrandingContext.tsx
+++ b/apps/customer/src/context/TenantBrandingContext.tsx
@@ -3,10 +3,12 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from 'react'
 import { applyDocumentFavicon } from '@meshkee/dashboard-core'
+import { useLocale } from '@meshkee/dashboard-ui'
 import { isAbortError } from '../lib/api'
 import { getTenantDomain } from '../lib/config'
 import { getWebsiteBusinessInfo } from '../services/websiteService'
@@ -31,9 +33,11 @@ function pickBusinessName(
 }
 
 export function TenantBrandingProvider({ children }: { children: ReactNode }) {
+  const { setLocale } = useLocale()
   const [businessName, setBusinessName] = useState('')
   const [logoUrl, setLogoUrl] = useState<string | null>(null)
   const [faviconUrl, setFaviconUrl] = useState<string | null>(null)
+  const defaultLocaleAppliedRef = useRef(false)
   const domain = getTenantDomain()
 
   useEffect(() => {
@@ -68,6 +72,15 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
         setLogoUrl(nextLogo)
         setFaviconUrl(nextFavicon)
         applyDocumentFavicon(nextFavicon)
+
+        if (!defaultLocaleAppliedRef.current) {
+          defaultLocaleAppliedRef.current = true
+          if (tenant.defaultLocale === 'en' || tenant.defaultLocale === 'fa') {
+            setLocale(tenant.defaultLocale)
+          } else {
+            setLocale('fa')
+          }
+        }
       } catch (err) {
         if (isAbortError(err) || controller.signal.aborted) return
         setBusinessName(domain)
@@ -82,7 +95,7 @@ export function TenantBrandingProvider({ children }: { children: ReactNode }) {
     return () => {
       controller.abort()
     }
-  }, [domain])
+  }, [domain, setLocale])
 
   const value = useMemo(
     () => ({ businessName, logoUrl, faviconUrl }),
diff --git a/apps/customer/src/i18n/messages.ts b/apps/customer/src/i18n/messages.ts
new file mode 100644
index 0000000..5a1bf4a
--- /dev/null
+++ b/apps/customer/src/i18n/messages.ts
@@ -0,0 +1,506 @@
+import type { DashboardLocale } from '@meshkee/dashboard-core'
+
+const en = {
+  'app.dashboardName': 'Customer Dashboard',
+  'app.role.customer': 'Customer',
+  'app.storeFallback': 'Store',
+  'app.poweredBy': 'powered by Meshkee.app',
+
+  'nav.home': 'Home',
+  'nav.cart': 'Shopping Cart',
+  'nav.profile': 'My Profile',
+  'nav.addresses': 'My Addresses',
+  'nav.orders': 'My Orders',
+  'nav.favorites': 'My Favorites',
+  'nav.help': 'Help Center',
+  'nav.logout': 'Logout',
+
+  'header.toggleMenu': 'Toggle menu',
+  'header.messages': 'Messages',
+  'header.notifications': 'Notifications',
+  'header.changePassword': 'Change password',
+  'header.myProfile': 'My Profile',
+
+  'home.welcome': 'Welcome, dear {name}.',
+  'home.welcomeFallback': 'there',
+  'home.subtitle': 'Manage your profile, addresses, orders, and favorites in one place.',
+  'home.card.profile.title': 'My Profile',
+  'home.card.profile.desc': 'View and update your personal information and contact details.',
+  'home.card.profile.link': 'View profile',
+  'home.card.addresses.title': 'My Addresses',
+  'home.card.addresses.desc': 'Manage your shipping addresses for checkout and deliveries.',
+  'home.card.addresses.link': 'View addresses',
+  'home.card.orders.title': 'My Orders',
+  'home.card.orders.desc': 'Track your orders, view order history and order details.',
+  'home.card.orders.link': 'View orders',
+  'home.card.favorites.title': 'My Favorites',
+  'home.card.favorites.desc': 'Browse and manage your saved favorite products.',
+  'home.card.favorites.link': 'View favorites',
+
+  'profile.title': 'My Profile',
+  'profile.subtitle': 'Update your personal information and contact details.',
+  'profile.section.account': 'Account',
+  'profile.section.about': 'About',
+  'profile.section.social': 'Social',
+  'profile.mobile': 'Mobile number',
+  'profile.email': 'Email',
+  'profile.firstName': 'First name (FA)',
+  'profile.lastName': 'Last name (FA)',
+  'profile.firstNameEn': 'First name (EN)',
+  'profile.lastNameEn': 'Last name (EN)',
+  'profile.landline': 'Landline',
+  'profile.backupPhone': 'Backup phone number',
+  'profile.about': 'About',
+  'profile.instagram': 'Instagram',
+  'profile.telegram': 'Telegram',
+  'profile.linkedin': 'LinkedIn',
+  'profile.emailPlaceholder': 'you@example.com',
+  'profile.save': 'Save changes',
+  'profile.saving': 'Saving...',
+  'profile.toast.success': 'Profile updated successfully.',
+  'profile.error.update': 'Unable to update profile. Please try again.',
+
+  'addresses.title': 'My Addresses',
+  'addresses.subtitle': 'Manage your shipping addresses for orders at this store.',
+  'addresses.save': 'Save addresses',
+  'addresses.saveOne': 'Save address',
+  'addresses.saving': 'Saving...',
+  'addresses.cancel': 'Cancel',
+  'addresses.editorTitle': 'Saved addresses',
+  'addresses.add': 'Add address',
+  'addresses.edit': 'Edit address',
+  'addresses.empty': 'No addresses yet.',
+  'addresses.loading': 'Loading addresses...',
+  'addresses.label': 'Address name',
+  'addresses.labelPlaceholder': 'e.g. Home, Office',
+  'addresses.optional': '(optional)',
+  'addresses.province': 'Province',
+  'addresses.city': 'City',
+  'addresses.address': 'Address',
+  'addresses.postalCode': 'Postal code',
+  'addresses.landline': 'Landline',
+  'addresses.selectProvince': 'Select province',
+  'addresses.selectCity': 'Select city',
+  'addresses.streetPlaceholder': 'Street, plaque, unit',
+  'addresses.postalPlaceholder': 'Postal code',
+  'addresses.landlinePlaceholder': 'Landline',
+  'addresses.remove': 'Remove address',
+  'addresses.modal.addTitle': 'Add address',
+  'addresses.modal.editTitle': 'Edit address',
+  'addresses.modal.subtitle': 'Enter the shipping address details.',
+  'addresses.toast.removed': 'Address removed.',
+  'addresses.toast.saved': 'Addresses saved.',
+  'addresses.toast.created': 'Address saved.',
+  'addresses.toast.updated': 'Address updated.',
+  'addresses.error.load': 'Unable to load addresses.',
+  'addresses.error.remove': 'Unable to remove address.',
+  'addresses.error.incomplete': 'Add at least one complete address.',
+  'addresses.error.incompleteForm': 'Please fill in all required fields.',
+  'addresses.error.save': 'Unable to save address. Please try again.',
+  'addresses.error.loadLocations': 'Unable to load provinces.',
+  'addresses.error.loadCities': 'Unable to load cities.',
+
+  'orders.title': 'My Orders',
+  'orders.subtitle': 'View your order history and details.',
+  'orders.listTitle': 'Order list',
+  'orders.showing': 'Showing {from} - {to} of {total}',
+  'orders.none': 'No orders',
+  'orders.empty': 'You have no orders yet.',
+  'orders.loading': 'Loading orders...',
+  'orders.error.load': 'Unable to load orders.',
+  'orders.col.orderId': 'Order ID',
+  'orders.col.items': 'Items',
+  'orders.col.total': 'Total cost',
+  'orders.col.date': 'Date & time',
+  'orders.col.step': 'Step',
+  'orders.col.source': 'Registered by',
+  'orders.col.actions': 'Actions',
+  'orders.pageMeta': 'Page {page} / {totalPages} · {pageSize} per page · {total} total',
+  'orders.viewItems': 'View items',
+  'orders.source.operator': 'Operator',
+  'orders.source.app': 'Application',
+  'orders.source.website': 'Website',
+  'orders.step.processing': 'Under processing',
+  'orders.step.ready': 'Ready for shipping',
+  'orders.step.shipped': 'Shipped',
+  'orders.step.delivered': 'Delivered',
+
+  'orderItems.title': 'Order items',
+  'orderItems.customer': 'Customer',
+  'orderItems.phone': 'Phone',
+  'orderItems.items': 'Items',
+  'orderItems.empty': 'No items in this order.',
+  'orderItems.product': 'Product',
+  'orderItems.qty': 'Qty',
+  'orderItems.unitPrice': 'Unit price',
+  'orderItems.lineTotal': 'Line total',
+  'orderItems.sku': 'SKU: {sku}',
+  'orderItems.summary': 'Order total · {count} {itemsLabel}',
+  'orderItems.item': 'item',
+  'orderItems.itemsPlural': 'items',
+  'orderItems.close': 'Close',
+
+  'favorites.title': 'My Favorites',
+  'favorites.subtitle': 'Products you have saved for later.',
+  'favorites.loading': 'Loading favorites...',
+  'favorites.empty': 'No favorites yet.',
+  'favorites.error.load': 'Unable to load favorites.',
+  'favorites.toast.removed': 'Removed from favorites.',
+  'favorites.error.remove': 'Unable to remove favorite.',
+  'favorites.cartSoon': 'Shopping cart is coming soon.',
+  'favorites.remove': 'Remove from favorites',
+  'favorites.addToCart': 'Add to shopping cart',
+  'favorites.festival': 'Festival',
+  'favorites.inStock': '{count} in stock',
+  'favorites.variantOne': '1 variant',
+  'favorites.variantMany': '{count} variants',
+
+  'title.signIn': 'Sign in',
+  'title.checkout': 'Checkout',
+  'title.cart': 'Shopping Cart',
+  'title.delivery': 'Delivery',
+  'title.payment': 'Payment',
+  'title.success': 'Success',
+  'title.failed': 'Failed',
+
+  'login.welcome': 'Welcome back',
+  'login.subtitle': 'Sign in with your mobile number',
+  'login.mobile': 'Mobile number',
+  'login.password': 'Password',
+  'login.passwordPlaceholder': 'Enter your password',
+  'login.hidePassword': 'Hide password',
+  'login.showPassword': 'Show password',
+  'login.forgot': 'Forgot password?',
+  'login.signIn': 'Sign in',
+  'login.signingIn': 'Signing in...',
+  'login.or': 'or',
+  'login.otp': 'One-time login with SMS',
+  'login.noAccount': "Don't have an account?",
+  'login.signUp': 'Sign up',
+  'login.error.signIn': 'Unable to sign in. Check your connection and try again.',
+  'login.error.sendCode': 'Unable to send verification code.',
+
+  'signup.title': 'Create account',
+  'signup.subtitle': 'Register as a customer of {domain}',
+  'signup.firstName': 'First name',
+  'signup.lastName': 'Last name',
+  'signup.passwordPlaceholder': 'Choose a password',
+  'signup.confirm': 'Confirm password',
+  'signup.confirmPlaceholder': 'Repeat your password',
+  'signup.create': 'Create account',
+  'signup.creating': 'Creating account...',
+  'signup.hasAccount': 'Already have an account?',
+  'signup.signIn': 'Sign in',
+  'signup.error.match': 'Passwords do not match.',
+  'signup.error.length': 'Password must be at least 8 characters.',
+  'signup.error.create': 'Unable to create account.',
+
+  'forgot.back': 'Back to sign in',
+  'forgot.title': 'Forgot password',
+  'forgot.subtitlePhone': 'We will send a verification code via SMS',
+  'forgot.subtitleCode': 'Enter the code and your new password',
+  'forgot.sendCode': 'Send SMS code',
+  'forgot.sending': 'Sending...',
+  'forgot.code': 'SMS verification code',
+  'forgot.newPassword': 'New password',
+  'forgot.newPasswordPlaceholder': 'Enter new password',
+  'forgot.reset': 'Reset password',
+  'forgot.verifying': 'Verifying...',
+  'forgot.error.length': 'Password must be at least 8 characters.',
+  'forgot.error.verify': 'Unable to verify code.',
+  'forgot.info.partial':
+    'Phone number verified. Full password reset via SMS is not available yet — please contact support or sign in if you remember your password.',
+
+  'otp.back': 'Back to sign in',
+  'otp.title': 'One-time login',
+  'otp.subtitlePhone': 'Verify your mobile number with a one-time SMS code',
+  'otp.subtitleCode': 'Enter the SMS code and your password',
+  'otp.sendCode': 'Send SMS code',
+  'otp.sending': 'Sending...',
+  'otp.code': 'SMS verification code',
+  'otp.password': 'Password',
+  'otp.passwordPlaceholder': 'Your account password',
+  'otp.signIn': 'Sign in',
+  'otp.signingIn': 'Signing in...',
+  'otp.error.password': 'Enter your account password to complete sign-in after SMS verification.',
+  'otp.error.signIn': 'Unable to sign in with SMS verification.',
+
+  'common.close': 'Close',
+  'common.resendIn': 'Resend code in {seconds}s',
+  'common.resend': 'Resend SMS code',
+  'common.codeSent': 'Verification code sent to {phone}',
+} as const
+
+type MessageKey = keyof typeof en
+
+const fa: Record<MessageKey, string> = {
+  'app.dashboardName': 'پنل مشتری',
+  'app.role.customer': 'مشتری',
+  'app.storeFallback': 'فروشگاه',
+  'app.poweredBy': 'قدرت‌گرفته از Meshkee.app',
+
+  'nav.home': 'خانه',
+  'nav.cart': 'سبد خرید',
+  'nav.profile': 'پروفایل من',
+  'nav.addresses': 'آدرس‌های من',
+  'nav.orders': 'سفارش‌های من',
+  'nav.favorites': 'علاقه‌مندی‌ها',
+  'nav.help': 'مرکز راهنما',
+  'nav.logout': 'خروج',
+
+  'header.toggleMenu': 'باز و بسته کردن منو',
+  'header.messages': 'پیام‌ها',
+  'header.notifications': 'اعلان‌ها',
+  'header.changePassword': 'تغییر رمز عبور',
+  'header.myProfile': 'پروفایل من',
+
+  'home.welcome': '{name} عزیز، خوش آمدی.',
+  'home.welcomeFallback': 'کاربر',
+  'home.subtitle': 'پروفایل، آدرس‌ها، سفارش‌ها و علاقه‌مندی‌ها را از یکجا مدیریت کنید.',
+  'home.card.profile.title': 'پروفایل من',
+  'home.card.profile.desc': 'اطلاعات شخصی و راه‌های ارتباطی خود را مشاهده و به‌روزرسانی کنید.',
+  'home.card.profile.link': 'مشاهده پروفایل',
+  'home.card.addresses.title': 'آدرس‌های من',
+  'home.card.addresses.desc': 'آدرس‌های ارسال برای تسویه‌حساب و تحویل را مدیریت کنید.',
+  'home.card.addresses.link': 'مشاهده آدرس‌ها',
+  'home.card.orders.title': 'سفارش‌های من',
+  'home.card.orders.desc': 'سفارش‌ها را پیگیری کنید و تاریخچه و جزئیات را ببینید.',
+  'home.card.orders.link': 'مشاهده سفارش‌ها',
+  'home.card.favorites.title': 'علاقه‌مندی‌ها',
+  'home.card.favorites.desc': 'محصولات ذخیره‌شده مورد علاقه‌تان را ببینید و مدیریت کنید.',
+  'home.card.favorites.link': 'مشاهده علاقه‌مندی‌ها',
+
+  'profile.title': 'پروفایل من',
+  'profile.subtitle': 'اطلاعات شخصی و راه‌های ارتباطی خود را به‌روزرسانی کنید.',
+  'profile.section.account': 'حساب کاربری',
+  'profile.section.about': 'درباره من',
+  'profile.section.social': 'شبکه‌های اجتماعی',
+  'profile.mobile': 'شماره موبایل',
+  'profile.email': 'ایمیل',
+  'profile.firstName': 'نام (فارسی)',
+  'profile.lastName': 'نام خانوادگی (فارسی)',
+  'profile.firstNameEn': 'نام (انگلیسی)',
+  'profile.lastNameEn': 'نام خانوادگی (انگلیسی)',
+  'profile.landline': 'تلفن ثابت',
+  'profile.backupPhone': 'شماره تماس پشتیبان',
+  'profile.about': 'درباره من',
+  'profile.instagram': 'اینستاگرام',
+  'profile.telegram': 'تلگرام',
+  'profile.linkedin': 'لینکدین',
+  'profile.emailPlaceholder': 'you@example.com',
+  'profile.save': 'ذخیره تغییرات',
+  'profile.saving': 'در حال ذخیره...',
+  'profile.toast.success': 'پروفایل با موفقیت به‌روزرسانی شد.',
+  'profile.error.update': 'به‌روزرسانی پروفایل ممکن نشد. دوباره تلاش کنید.',
+
+  'addresses.title': 'آدرس‌های من',
+  'addresses.subtitle': 'آدرس‌های ارسال سفارش در این فروشگاه را مدیریت کنید.',
+  'addresses.save': 'ذخیره آدرس‌ها',
+  'addresses.saveOne': 'ذخیره آدرس',
+  'addresses.saving': 'در حال ذخیره...',
+  'addresses.cancel': 'انصراف',
+  'addresses.editorTitle': 'آدرس‌های ذخیره‌شده',
+  'addresses.add': 'افزودن آدرس',
+  'addresses.edit': 'ویرایش آدرس',
+  'addresses.empty': 'هنوز آدرسی ثبت نشده است.',
+  'addresses.loading': 'در حال بارگذاری آدرس‌ها...',
+  'addresses.label': 'عنوان آدرس',
+  'addresses.labelPlaceholder': 'مثلاً خانه، محل کار',
+  'addresses.optional': '(اختیاری)',
+  'addresses.province': 'استان',
+  'addresses.city': 'شهر',
+  'addresses.address': 'آدرس',
+  'addresses.postalCode': 'کد پستی',
+  'addresses.landline': 'تلفن ثابت',
+  'addresses.selectProvince': 'انتخاب استان',
+  'addresses.selectCity': 'انتخاب شهر',
+  'addresses.streetPlaceholder': 'خیابان، پلاک، واحد',
+  'addresses.postalPlaceholder': 'کد پستی',
+  'addresses.landlinePlaceholder': 'تلفن ثابت',
+  'addresses.remove': 'حذف آدرس',
+  'addresses.modal.addTitle': 'افزودن آدرس',
+  'addresses.modal.editTitle': 'ویرایش آدرس',
+  'addresses.modal.subtitle': 'جزئیات آدرس ارسال را وارد کنید.',
+  'addresses.toast.removed': 'آدرس حذف شد.',
+  'addresses.toast.saved': 'آدرس‌ها ذخیره شدند.',
+  'addresses.toast.created': 'آدرس ذخیره شد.',
+  'addresses.toast.updated': 'آدرس به‌روزرسانی شد.',
+  'addresses.error.load': 'بارگذاری آدرس‌ها ممکن نشد.',
+  'addresses.error.remove': 'حذف آدرس ممکن نشد.',
+  'addresses.error.incomplete': 'حداقل یک آدرس کامل اضافه کنید.',
+  'addresses.error.incompleteForm': 'لطفاً همه فیلدهای الزامی را تکمیل کنید.',
+  'addresses.error.save': 'ذخیره آدرس ممکن نشد. دوباره تلاش کنید.',
+  'addresses.error.loadLocations': 'بارگذاری استان‌ها ممکن نشد.',
+  'addresses.error.loadCities': 'بارگذاری شهرها ممکن نشد.',
+
+  'orders.title': 'سفارش‌های من',
+  'orders.subtitle': 'تاریخچه و جزئیات سفارش‌های خود را ببینید.',
+  'orders.listTitle': 'فهرست سفارش‌ها',
+  'orders.showing': 'نمایش {from} تا {to} از {total}',
+  'orders.none': 'بدون سفارش',
+  'orders.empty': 'هنوز سفارشی ندارید.',
+  'orders.loading': 'در حال بارگذاری سفارش‌ها...',
+  'orders.error.load': 'بارگذاری سفارش‌ها ممکن نشد.',
+  'orders.col.orderId': 'شماره سفارش',
+  'orders.col.items': 'اقلام',
+  'orders.col.total': 'مبلغ کل',
+  'orders.col.date': 'تاریخ و ساعت',
+  'orders.col.step': 'وضعیت',
+  'orders.col.source': 'ثبت‌شده توسط',
+  'orders.col.actions': 'عملیات',
+  'orders.pageMeta': 'صفحه {page} / {totalPages} · {pageSize} در هر صفحه · {total} کل',
+  'orders.viewItems': 'مشاهده اقلام',
+  'orders.source.operator': 'اپراتور',
+  'orders.source.app': 'اپلیکیشن',
+  'orders.source.website': 'وب‌سایت',
+  'orders.step.processing': 'در حال پردازش',
+  'orders.step.ready': 'آماده ارسال',
+  'orders.step.shipped': 'ارسال‌شده',
+  'orders.step.delivered': 'تحویل‌شده',
+
+  'orderItems.title': 'اقلام سفارش',
+  'orderItems.customer': 'مشتری',
+  'orderItems.phone': 'تلفن',
+  'orderItems.items': 'اقلام',
+  'orderItems.empty': 'اقلامی در این سفارش نیست.',
+  'orderItems.product': 'محصول',
+  'orderItems.qty': 'تعداد',
+  'orderItems.unitPrice': 'قیمت واحد',
+  'orderItems.lineTotal': 'جمع ردیف',
+  'orderItems.sku': 'کد کالا: {sku}',
+  'orderItems.summary': 'جمع سفارش · {count} {itemsLabel}',
+  'orderItems.item': 'قلم',
+  'orderItems.itemsPlural': 'قلم',
+  'orderItems.close': 'بستن',
+
+  'favorites.title': 'علاقه‌مندی‌ها',
+  'favorites.subtitle': 'محصولاتی که برای بعد ذخیره کرده‌اید.',
+  'favorites.loading': 'در حال بارگذاری علاقه‌مندی‌ها...',
+  'favorites.empty': 'هنوز علاقه‌مندی ندارید.',
+  'favorites.error.load': 'بارگذاری علاقه‌مندی‌ها ممکن نشد.',
+  'favorites.toast.removed': 'از علاقه‌مندی‌ها حذف شد.',
+  'favorites.error.remove': 'حذف از علاقه‌مندی‌ها ممکن نشد.',
+  'favorites.cartSoon': 'سبد خرید به‌زودی فعال می‌شود.',
+  'favorites.remove': 'حذف از علاقه‌مندی‌ها',
+  'favorites.addToCart': 'افزودن به سبد خرید',
+  'favorites.festival': 'جشنواره',
+  'favorites.inStock': '{count} موجود',
+  'favorites.variantOne': '۱ تنوع',
+  'favorites.variantMany': '{count} تنوع',
+
+  'title.signIn': 'ورود',
+  'title.checkout': 'تسویه‌حساب',
+  'title.cart': 'سبد خرید',
+  'title.delivery': 'ارسال',
+  'title.payment': 'پرداخت',
+  'title.success': 'موفق',
+  'title.failed': 'ناموفق',
+
+  'login.welcome': 'خوش آمدید',
+  'login.subtitle': 'با شماره موبایل وارد شوید',
+  'login.mobile': 'شماره موبایل',
+  'login.password': 'رمز عبور',
+  'login.passwordPlaceholder': 'رمز عبور خود را وارد کنید',
+  'login.hidePassword': 'مخفی کردن رمز',
+  'login.showPassword': 'نمایش رمز',
+  'login.forgot': 'رمز عبور را فراموش کرده‌اید؟',
+  'login.signIn': 'ورود',
+  'login.signingIn': 'در حال ورود...',
+  'login.or': 'یا',
+  'login.otp': 'ورود یک‌بارمصرف با پیامک',
+  'login.noAccount': 'حساب کاربری ندارید؟',
+  'login.signUp': 'ثبت‌نام',
+  'login.error.signIn': 'ورود ممکن نشد. اتصال خود را بررسی کنید و دوباره تلاش کنید.',
+  'login.error.sendCode': 'ارسال کد تأیید ممکن نشد.',
+
+  'signup.title': 'ایجاد حساب',
+  'signup.subtitle': 'به‌عنوان مشتری {domain} ثبت‌نام کنید',
+  'signup.firstName': 'نام',
+  'signup.lastName': 'نام خانوادگی',
+  'signup.passwordPlaceholder': 'یک رمز عبور انتخاب کنید',
+  'signup.confirm': 'تأیید رمز عبور',
+  'signup.confirmPlaceholder': 'رمز عبور را تکرار کنید',
+  'signup.create': 'ایجاد حساب',
+  'signup.creating': 'در حال ایجاد حساب...',
+  'signup.hasAccount': 'قبلاً حساب دارید؟',
+  'signup.signIn': 'ورود',
+  'signup.error.match': 'رمزهای عبور یکسان نیستند.',
+  'signup.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
+  'signup.error.create': 'ایجاد حساب ممکن نشد.',
+
+  'forgot.back': 'بازگشت به ورود',
+  'forgot.title': 'فراموشی رمز عبور',
+  'forgot.subtitlePhone': 'کد تأیید را از طریق پیامک ارسال می‌کنیم',
+  'forgot.subtitleCode': 'کد و رمز عبور جدید را وارد کنید',
+  'forgot.sendCode': 'ارسال کد پیامکی',
+  'forgot.sending': 'در حال ارسال...',
+  'forgot.code': 'کد تأیید پیامکی',
+  'forgot.newPassword': 'رمز عبور جدید',
+  'forgot.newPasswordPlaceholder': 'رمز عبور جدید را وارد کنید',
+  'forgot.reset': 'بازیابی رمز عبور',
+  'forgot.verifying': 'در حال تأیید...',
+  'forgot.error.length': 'رمز عبور باید حداقل ۸ کاراکتر باشد.',
+  'forgot.error.verify': 'تأیید کد ممکن نشد.',
+  'forgot.info.partial':
+    'شماره موبایل تأیید شد. بازیابی کامل رمز با پیامک هنوز در دسترس نیست — با پشتیبانی تماس بگیرید یا اگر رمز را به‌خاطر دارید وارد شوید.',
+
+  'otp.back': 'بازگشت به ورود',
+  'otp.title': 'ورود یک‌بارمصرف',
+  'otp.subtitlePhone': 'شماره موبایل خود را با کد یک‌بارمصرف پیامکی تأیید کنید',
+  'otp.subtitleCode': 'کد پیامکی و رمز عبور خود را وارد کنید',
+  'otp.sendCode': 'ارسال کد پیامکی',
+  'otp.sending': 'در حال ارسال...',
+  'otp.code': 'کد تأیید پیامکی',
+  'otp.password': 'رمز عبور',
+  'otp.passwordPlaceholder': 'رمز عبور حساب شما',
+  'otp.signIn': 'ورود',
+  'otp.signingIn': 'در حال ورود...',
+  'otp.error.password': 'برای تکمیل ورود پس از تأیید پیامکی، رمز حساب خود را وارد کنید.',
+  'otp.error.signIn': 'ورود با تأیید پیامکی ممکن نشد.',
+
+  'common.close': 'بستن',
+  'common.resendIn': 'ارسال مجدد کد تا {seconds} ثانیه',
+  'common.resend': 'ارسال مجدد کد پیامکی',
+  'common.codeSent': 'کد تأیید به {phone} ارسال شد',
+}
+
+const dictionaries: Record<DashboardLocale, Record<MessageKey, string>> = {
+  en: en as Record<MessageKey, string>,
+  fa,
+}
+
+export type CustomerMessageKey = MessageKey
+
+export function translate(
+  locale: DashboardLocale,
+  key: MessageKey,
+  vars?: Record<string, string | number>,
+): string {
+  const dict = dictionaries[locale] ?? dictionaries.en
+  let text = dict[key] ?? dictionaries.en[key] ?? key
+  if (vars) {
+    for (const [name, value] of Object.entries(vars)) {
+      text = text.replaceAll(`{${name}}`, String(value))
+    }
+  }
+  return text
+}
+
+export function getCustomerRouteTitleRules(locale: DashboardLocale) {
+  const t = (key: MessageKey) => translate(locale, key)
+  return [
+    { match: '/login', labels: [t('title.signIn')] },
+    { match: '/checkout/login', labels: [t('title.checkout'), t('title.signIn')] },
+    { match: '/checkout/cart', labels: [t('title.checkout'), t('title.cart')] },
+    { match: '/checkout/delivery', labels: [t('title.checkout'), t('title.delivery')] },
+    { match: '/checkout/payment', labels: [t('title.checkout'), t('title.payment')] },
+    { match: '/checkout/success', labels: [t('title.checkout'), t('title.success')] },
+    { match: '/checkout/failed', labels: [t('title.checkout'), t('title.failed')] },
+    { match: '/checkout', labels: [t('title.checkout')] },
+    { match: '/profile', labels: [t('nav.profile')] },
+    { match: '/addresses', labels: [t('nav.addresses')] },
+    { match: '/orders', labels: [t('nav.orders')] },
+    { match: '/favorites', labels: [t('nav.favorites')] },
+    { match: '/', labels: [t('nav.home')] },
+  ]
+}
diff --git a/apps/customer/src/i18n/useT.ts b/apps/customer/src/i18n/useT.ts
new file mode 100644
index 0000000..2caeca0
--- /dev/null
+++ b/apps/customer/src/i18n/useT.ts
@@ -0,0 +1,13 @@
+import { useCallback } from 'react'
+import { useLocale } from '@meshkee/dashboard-ui'
+import { translate, type CustomerMessageKey } from './messages'
+
+export function useT() {
+  const { locale } = useLocale()
+
+  return useCallback(
+    (key: CustomerMessageKey, vars?: Record<string, string | number>) =>
+      translate(locale, key, vars),
+    [locale],
+  )
+}
diff --git a/apps/customer/src/index.css b/apps/customer/src/index.css
index 65fd3f6..651317c 100644
--- a/apps/customer/src/index.css
+++ b/apps/customer/src/index.css
@@ -1,6 +1,8 @@
 @import '@meshkee/dashboard-core/styles/tokens.css';
 
-/* Customer app Farsi typography — Yekan Bakh for body, inputs, and placeholders */
+/* Customer: Montserrat (EN) + Yekan Bakh (FA) via --font-ui stack */
 :root {
+  --font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-fa: 'YekanBakh', Tahoma, sans-serif;
+  --font-ui: var(--font-en), var(--font-fa);
 }
diff --git a/apps/customer/src/pages/AddressesPage.module.css b/apps/customer/src/pages/AddressesPage.module.css
index 51f253d..a427e82 100644
--- a/apps/customer/src/pages/AddressesPage.module.css
+++ b/apps/customer/src/pages/AddressesPage.module.css
@@ -1,9 +1,3 @@
-.form {
-  display: flex;
-  flex-direction: column;
-  gap: 24px;
-}
-
 .section {
   width: 100%;
   background: var(--glass-bg);
@@ -15,26 +9,127 @@
   padding: 24px;
 }
 
-.actions {
-  display: flex;
-  justify-content: flex-end;
+.sectionTitle {
+  margin: 0 0 16px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
-.saveBtn {
-  padding: 10px 20px;
+.status {
+  margin: 0;
+  font-size: 14px;
+  color: var(--text-muted);
+}
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 40px 16px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.empty p {
+  margin: 0;
+  font-size: 14px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  padding: 10px 12px;
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.rowLine {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.rowLabel {
+  flex-shrink: 0;
   font-size: 14px;
   font-weight: 600;
-  color: #fff;
-  background: var(--primary);
-  border-radius: var(--radius-sm);
+  color: var(--text-primary);
 }
 
-.saveBtn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
+.rowText {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.rowActions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.editBtn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 8px;
+  color: var(--text-muted);
+  transition: background 0.2s, color 0.2s;
+}
+
+.editBtn:hover {
+  background: rgba(var(--primary-rgb) / 0.1);
+  color: var(--primary);
+}
+
+.addFab {
+  position: fixed;
+  inset-inline-end: 32px;
+  bottom: 32px;
+  z-index: 50;
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: white;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  box-shadow: 0 8px 24px rgba(var(--primary-rgb) / 0.4);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.addFab:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 28px rgba(var(--primary-rgb) / 0.45);
 }
 
 .error {
+  margin-bottom: 16px;
   padding: 12px 16px;
   border-radius: var(--radius-sm);
   font-size: 13px;
@@ -42,3 +137,10 @@
   background: rgba(239, 68, 68, 0.1);
   border: 1px solid rgba(239, 68, 68, 0.2);
 }
+
+@media (max-width: 768px) {
+  .addFab {
+    inset-inline-end: 20px;
+    bottom: 20px;
+  }
+}
diff --git a/apps/customer/src/pages/AddressesPage.tsx b/apps/customer/src/pages/AddressesPage.tsx
index 184ed95..3611795 100644
--- a/apps/customer/src/pages/AddressesPage.tsx
+++ b/apps/customer/src/pages/AddressesPage.tsx
@@ -1,259 +1,201 @@
-import { useEffect, useMemo, useState } from 'react'
-import {
-  AddressListEditor,
-  Breadcrumbs,
-  createEmptyAddressItem,
-  matchCityByName,
-  matchProvinceByName,
-  useToast,
-  type AddressListItem,
-  type CityOption,
-} from '@meshkee/dashboard-ui'
+import { useCallback, useEffect, useState } from 'react'
+import { MapPin, Pencil, Plus, Trash2 } from 'lucide-react'
+import { Breadcrumbs, useToast } from '@meshkee/dashboard-ui'
+import { AddressFormModal } from '../components/AddressFormModal'
+import { Tooltip } from '../components/Tooltip'
+import { useT } from '../i18n/useT'
 import { ApiError, isAbortError } from '../lib/api'
 import {
-  createAddress,
   listAddresses,
   removeAddress,
-  updateAddress,
   type UserAddress,
-  type UserAddressInput,
 } from '../services/addressService'
-import {
-  listCitiesByProvinceSlug,
-  listIranProvinces,
-} from '../services/citiesService'
 import pageStyles from '../components/PageContent.module.css'
+import rowBtnStyles from '../components/VariationsModal.module.css'
 import styles from './AddressesPage.module.css'
 
-type AddressDraft = AddressListItem
-
-function toDraft(
-  item: UserAddress,
-  provinces: CityOption[],
-  citiesByProvince: Record<string, CityOption[]>,
-): AddressDraft {
-  const province = matchProvinceByName(item.province, provinces)
-  const cities = province ? (citiesByProvince[province.slug] ?? []) : []
-  const city = matchCityByName(item.city, cities)
-  return {
-    id: item.id,
-    provinceSlug: province?.slug ?? '',
-    province: province?.nameEn ?? item.province,
-    city: city?.nameEn ?? item.city,
-    address: item.address,
-    postalCode: item.postalCode ?? '',
-    landline: item.landline ?? '',
-  }
-}
-
-function isCompleteAddress(item: AddressDraft) {
-  return item.province.trim() && item.city.trim() && item.address.trim()
-}
-
 export function AddressesPage() {
   const { showToast } = useToast()
-  const [provinces, setProvinces] = useState<CityOption[]>([])
-  const [citiesByProvince, setCitiesByProvince] = useState<Record<string, CityOption[]>>({})
-  const [addresses, setAddresses] = useState<AddressDraft[]>([createEmptyAddressItem()])
+  const t = useT()
+  const [addresses, setAddresses] = useState<UserAddress[]>([])
   const [loading, setLoading] = useState(true)
-  const [saving, setSaving] = useState(false)
   const [error, setError] = useState('')
+  const [removingId, setRemovingId] = useState<string | null>(null)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [editingAddress, setEditingAddress] = useState<UserAddress | null>(null)
+
+  const loadAddresses = useCallback(
+    async (signal?: AbortSignal) => {
+      setLoading(true)
+      setError('')
+      try {
+        const data = await listAddresses(signal)
+        if (signal?.aborted) return
+        setAddresses(data.items)
+      } catch (err) {
+        if (isAbortError(err) || signal?.aborted) return
+        setError(err instanceof ApiError ? err.message : t('addresses.error.load'))
+      } finally {
+        if (!signal?.aborted) setLoading(false)
+      }
+    },
+    [t],
+  )
 
   useEffect(() => {
     const controller = new AbortController()
-
-    async function load() {
-      setLoading(true)
-      setError('')
-
-      try {
-        const [provinceItems, data] = await Promise.all([
-          listIranProvinces(controller.signal),
-          listAddresses(controller.signal),
-        ])
-        if (controller.signal.aborted) return
-
-        setProvinces(provinceItems)
-
-        const draftItems =
-          data.items.length > 0 ? data.items : []
-
-        const slugs = [
-          ...new Set(
-            draftItems
-              .map((item) => matchProvinceByName(item.province, provinceItems)?.slug)
-              .filter(Boolean) as string[],
-          ),
-        ]
-        const cityGroups = await Promise.all(
-          slugs.map(async (slug) => ({
-            slug,
-            cities: await listCitiesByProvinceSlug(slug, controller.signal),
-          })),
-        )
-        if (controller.signal.aborted) return
-
-        const citiesMap = Object.fromEntries(cityGroups.map((group) => [group.slug, group.cities]))
-        setCitiesByProvince(citiesMap)
-        setAddresses(
-          draftItems.length > 0
-            ? draftItems.map((item) => toDraft(item, provinceItems, citiesMap))
-            : [createEmptyAddressItem()],
-        )
-      } catch (err) {
-        if (isAbortError(err) || controller.signal.aborted) return
-        setError(err instanceof ApiError ? err.message : 'Unable to load addresses.')
-      } finally {
-        if (!controller.signal.aborted) setLoading(false)
-      }
-    }
-
-    void load()
+    void loadAddresses(controller.signal)
     return () => controller.abort()
-  }, [])
+  }, [loadAddresses])
 
-  function updateAddressDraft(index: number, patch: Partial<AddressDraft>) {
-    setAddresses((prev) =>
-      prev.map((item, i) => (i === index ? { ...item, ...patch } : item)),
-    )
+  function openCreateModal() {
+    setEditingAddress(null)
+    setModalOpen(true)
   }
 
-  async function handleProvinceChange(index: number, provinceSlug: string) {
-    const province = provinces.find((item) => item.slug === provinceSlug)
-    updateAddressDraft(index, {
-      provinceSlug,
-      province: province?.nameEn ?? '',
-      city: '',
-    })
-
-    if (provinceSlug && !citiesByProvince[provinceSlug]) {
-      const cities = await listCitiesByProvinceSlug(provinceSlug)
-      setCitiesByProvince((prev) => ({ ...prev, [provinceSlug]: cities }))
-    }
+  function openEditModal(item: UserAddress) {
+    setEditingAddress(item)
+    setModalOpen(true)
   }
 
-  function addAddressRow() {
-    setAddresses((prev) => [...prev, createEmptyAddressItem()])
-  }
-
-  async function handleRemove(index: number) {
-    const target = addresses[index]
-    if (!target) return
-
-    if (!target.id) {
-      setAddresses((prev) =>
-        prev.length === 1 ? [createEmptyAddressItem()] : prev.filter((_, i) => i !== index),
-      )
-      return
-    }
-
-    setSaving(true)
-    setError('')
-
-    try {
-      await removeAddress(target.id)
-      setAddresses((prev) => {
-        const next = prev.filter((_, i) => i !== index)
-        return next.length > 0 ? next : [createEmptyAddressItem()]
-      })
-      showToast('Address removed.', 'success')
-    } catch (err) {
-      setError(err instanceof ApiError ? err.message : 'Unable to remove address.')
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setError('')
-
-    const payload = addresses.filter(isCompleteAddress)
-    if (payload.length === 0) {
-      setError('Add at least one complete address.')
-      return
-    }
-
-    setSaving(true)
-
-    try {
-      const saved: AddressDraft[] = []
-
-      for (const item of payload) {
-        const input: UserAddressInput = {
-          province: item.province.trim(),
-          city: item.city.trim(),
-          address: item.address.trim(),
-          postalCode: item.postalCode.trim() || undefined,
-          landline: item.landline?.trim() || undefined,
-        }
-
-        if (item.id) {
-          const result = await updateAddress(item.id, input)
-          saved.push(toDraft(result.address, provinces, citiesByProvince))
-        } else {
-          const result = await createAddress(input)
-          saved.push(toDraft(result.address, provinces, citiesByProvince))
-        }
+  function handleSaved(saved: UserAddress) {
+    setAddresses((prev) => {
+      const index = prev.findIndex((item) => item.id === saved.id)
+      if (index >= 0) {
+        const next = [...prev]
+        next[index] = saved
+        return next
       }
+      return [saved, ...prev]
+    })
+  }
 
-      setAddresses(saved.length > 0 ? saved : [createEmptyAddressItem()])
-      showToast('Addresses saved.', 'success')
+  async function handleRemove(item: UserAddress) {
+    setRemovingId(item.id)
+    setError('')
+    try {
+      await removeAddress(item.id)
+      setAddresses((prev) => prev.filter((row) => row.id !== item.id))
+      showToast(t('addresses.toast.removed'), 'success')
     } catch (err) {
-      const message =
-        err instanceof ApiError ? err.message : 'Unable to save addresses. Please try again.'
+      const message = err instanceof ApiError ? err.message : t('addresses.error.remove')
       setError(message)
       showToast(message, 'error')
     } finally {
-      setSaving(false)
+      setRemovingId(null)
     }
   }
 
-  const hasAddresses = useMemo(
-    () => addresses.some((item) => isCompleteAddress(item)),
-    [addresses],
-  )
+  function formatRowLine(item: UserAddress) {
+    return [
+      item.label || null,
+      item.province,
+      item.city,
+      item.address,
+      item.postalCode,
+      item.landline,
+    ]
+      .filter(Boolean)
+      .join(' · ')
+  }
 
   return (
     <main className={pageStyles.content}>
-      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Addresses' }]} />
+      <Breadcrumbs
+        items={[{ label: t('nav.home'), href: '/' }, { label: t('addresses.title') }]}
+      />
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>My Addresses</h2>
-          <p className={pageStyles.pageSubtitle}>
-            Manage your shipping addresses for orders at this store.
-          </p>
+          <h2 className={pageStyles.pageTitle}>{t('addresses.title')}</h2>
+          <p className={pageStyles.pageSubtitle}>{t('addresses.subtitle')}</p>
         </div>
       </div>
 
-      <form className={styles.form} onSubmit={handleSubmit}>
-        {error && (
-          <div className={styles.error} role="alert">
-            {error}
+      {error && (
+        <div className={styles.error} role="alert">
+          {error}
+        </div>
+      )}
+
+      <section className={styles.section}>
+        <h3 className={styles.sectionTitle}>{t('addresses.editorTitle')}</h3>
+
+        {loading && <p className={styles.status}>{t('addresses.loading')}</p>}
+
+        {!loading && addresses.length === 0 && (
+          <div className={styles.empty}>
+            <MapPin size={28} />
+            <p>{t('addresses.empty')}</p>
           </div>
         )}
 
-        <section className={styles.section}>
-          <AddressListEditor
-            addresses={addresses}
-            provinces={provinces}
-            citiesByProvince={citiesByProvince}
-            onAddressChange={updateAddressDraft}
-            onProvinceChange={handleProvinceChange}
-            onAdd={addAddressRow}
-            onRemove={(index) => void handleRemove(index)}
-            disabled={saving}
-            loading={loading}
-          />
-        </section>
+        {!loading && addresses.length > 0 && (
+          <ul className={styles.list}>
+            {addresses.map((item) => (
+              <li key={item.id} className={styles.row}>
+                <div className={styles.rowLine} title={formatRowLine(item)}>
+                  {item.label && <span className={styles.rowLabel}>{item.label}</span>}
+                  <span className={styles.rowText}>
+                    {[
+                      item.province,
+                      item.city,
+                      item.address,
+                      item.postalCode,
+                      item.landline,
+                    ]
+                      .filter(Boolean)
+                      .join(' · ')}
+                  </span>
+                </div>
 
-        <div className={styles.actions}>
-          <button type="submit" className={styles.saveBtn} disabled={saving || loading || !hasAddresses}>
-            {saving ? 'Saving...' : 'Save addresses'}
-          </button>
-        </div>
-      </form>
+                <div className={styles.rowActions}>
+                  <Tooltip label={t('addresses.edit')}>
+                    <button
+                      type="button"
+                      className={styles.editBtn}
+                      onClick={() => openEditModal(item)}
+                      aria-label={t('addresses.edit')}
+                    >
+                      <Pencil size={15} />
+                    </button>
+                  </Tooltip>
+                  <Tooltip label={t('addresses.remove')}>
+                    <button
+                      type="button"
+                      className={rowBtnStyles.removeRowBtn}
+                      onClick={() => void handleRemove(item)}
+                      disabled={removingId === item.id}
+                      aria-label={t('addresses.remove')}
+                    >
+                      <Trash2 size={15} />
+                    </button>
+                  </Tooltip>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <button
+        type="button"
+        className={styles.addFab}
+        onClick={openCreateModal}
+        aria-label={t('addresses.add')}
+      >
+        <Plus size={26} strokeWidth={2.5} />
+      </button>
+
+      <AddressFormModal
+        open={modalOpen}
+        address={editingAddress}
+        onClose={() => {
+          setModalOpen(false)
+          setEditingAddress(null)
+        }}
+        onSaved={handleSaved}
+      />
     </main>
   )
 }
diff --git a/apps/customer/src/pages/FavoritesPage.tsx b/apps/customer/src/pages/FavoritesPage.tsx
index d6bb9e7..b1e9023 100644
--- a/apps/customer/src/pages/FavoritesPage.tsx
+++ b/apps/customer/src/pages/FavoritesPage.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Heart } from 'lucide-react'
 import { Breadcrumbs, Pagination, useToast } from '@meshkee/dashboard-ui'
 import { FavoriteStoreItemCard } from '../components/FavoriteStoreItemCard'
+import { useT } from '../i18n/useT'
 import { ApiError, isAbortError } from '../lib/api'
 import {
   listFavorites,
@@ -16,6 +17,7 @@ const PAGE_SIZE = 24
 
 export function FavoritesPage() {
   const { showToast } = useToast()
+  const t = useT()
   const [data, setData] = useState<FavoritesListResponse | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
@@ -35,7 +37,7 @@ export function FavoritesPage() {
         setData(response)
       } catch (err) {
         if (isAbortError(err) || controller.signal.aborted) return
-        setError(err instanceof ApiError ? err.message : 'Unable to load favorites.')
+        setError(err instanceof ApiError ? err.message : t('favorites.error.load'))
       } finally {
         if (!controller.signal.aborted) setLoading(false)
       }
@@ -43,7 +45,7 @@ export function FavoritesPage() {
 
     void load()
     return () => controller.abort()
-  }, [page])
+  }, [page, t])
 
   async function handleRemove(listing: FavoriteListing) {
     setRemovingId(listing.favoriteId)
@@ -58,10 +60,10 @@ export function FavoritesPage() {
             }
           : prev,
       )
-      showToast('Removed from favorites.', 'success')
+      showToast(t('favorites.toast.removed'), 'success')
     } catch (err) {
       const message =
-        err instanceof ApiError ? err.message : 'Unable to remove favorite.'
+        err instanceof ApiError ? err.message : t('favorites.error.remove')
       showToast(message, 'error')
     } finally {
       setRemovingId(null)
@@ -69,17 +71,19 @@ export function FavoritesPage() {
   }
 
   function handleAddToCart() {
-    showToast('Shopping cart is coming soon.', 'success')
+    showToast(t('favorites.cartSoon'), 'success')
   }
 
   return (
     <main className={pageStyles.content}>
-      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Favorites' }]} />
+      <Breadcrumbs
+        items={[{ label: t('nav.home'), href: '/' }, { label: t('favorites.title') }]}
+      />
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>My Favorites</h2>
-          <p className={pageStyles.pageSubtitle}>Products you have saved for later.</p>
+          <h2 className={pageStyles.pageTitle}>{t('favorites.title')}</h2>
+          <p className={pageStyles.pageSubtitle}>{t('favorites.subtitle')}</p>
         </div>
       </div>
 
@@ -89,12 +93,12 @@ export function FavoritesPage() {
         </div>
       )}
 
-      {loading && <p className={styles.status}>Loading favorites...</p>}
+      {loading && <p className={styles.status}>{t('favorites.loading')}</p>}
 
       {!loading && data?.items.length === 0 && (
         <div className={styles.empty}>
           <Heart size={32} />
-          <p>No favorites yet.</p>
+          <p>{t('favorites.empty')}</p>
         </div>
       )}
 
diff --git a/apps/customer/src/pages/HomePage.tsx b/apps/customer/src/pages/HomePage.tsx
index 096cf66..acf3416 100644
--- a/apps/customer/src/pages/HomePage.tsx
+++ b/apps/customer/src/pages/HomePage.tsx
@@ -1,73 +1,76 @@
 import { CalendarDays, User, MapPin, ShoppingBag, Heart } from 'lucide-react'
+import { SectionCard, useLocale } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
-import { SectionCard } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import styles from '../components/PageContent.module.css'
 
-const sections = [
-  {
-    icon: User,
-    title: 'My Profile',
-    description: 'View and update your personal information and contact details.',
-    linkText: 'View profile',
-    href: '/profile',
-  },
-  {
-    icon: MapPin,
-    title: 'My Addresses',
-    description: 'Manage your shipping addresses for checkout and deliveries.',
-    linkText: 'View addresses',
-    href: '/addresses',
-  },
-  {
-    icon: ShoppingBag,
-    title: 'My Orders',
-    description: 'Track your orders, view order history and order details.',
-    linkText: 'View orders',
-    href: '/orders',
-  },
-  {
-    icon: Heart,
-    title: 'My Favorites',
-    description: 'Browse and manage your saved favorite products.',
-    linkText: 'View favorites',
-    href: '/favorites',
-  },
-]
+export function HomePage() {
+  const { user } = useAuth()
+  const { locale } = useLocale()
+  const t = useT()
+  const firstName =
+    (locale === 'en' ? user?.firstNameEn : user?.firstName) ||
+    user?.firstName ||
+    user?.firstNameEn ||
+    t('home.welcomeFallback')
 
-function getFormattedDate() {
-  return new Intl.DateTimeFormat('en-US', {
+  const sections = [
+    {
+      icon: User,
+      title: t('home.card.profile.title'),
+      description: t('home.card.profile.desc'),
+      linkText: t('home.card.profile.link'),
+      href: '/profile',
+    },
+    {
+      icon: MapPin,
+      title: t('home.card.addresses.title'),
+      description: t('home.card.addresses.desc'),
+      linkText: t('home.card.addresses.link'),
+      href: '/addresses',
+    },
+    {
+      icon: ShoppingBag,
+      title: t('home.card.orders.title'),
+      description: t('home.card.orders.desc'),
+      linkText: t('home.card.orders.link'),
+      href: '/orders',
+    },
+    {
+      icon: Heart,
+      title: t('home.card.favorites.title'),
+      description: t('home.card.favorites.desc'),
+      linkText: t('home.card.favorites.link'),
+      href: '/favorites',
+    },
+  ]
+
+  const formattedDate = new Intl.DateTimeFormat(locale === 'fa' ? 'fa-IR' : 'en-US', {
     month: 'long',
     day: 'numeric',
     year: 'numeric',
     weekday: 'long',
   }).format(new Date())
-}
-
-export function HomePage() {
-  const { user } = useAuth()
-  const firstName = user?.firstName || 'there'
 
   return (
     <main className={styles.content}>
       <div className={styles.pageHeader}>
         <div>
           <h2 className={styles.pageTitle}>
-            Welcome back, {firstName}! <span aria-hidden="true">👋</span>
+            {t('home.welcome', { name: firstName })}
           </h2>
-          <p className={styles.pageSubtitle}>
-            Manage your profile, addresses, orders, and favorites in one place.
-          </p>
+          <p className={styles.pageSubtitle}>{t('home.subtitle')}</p>
         </div>
 
         <div className={styles.dateBadge}>
           <CalendarDays size={16} />
-          <span>{getFormattedDate()}</span>
+          <span>{formattedDate}</span>
         </div>
       </div>
 
       <div className={styles.gridHome}>
         {sections.map((section) => (
-          <SectionCard key={section.title} {...section} />
+          <SectionCard key={section.href} {...section} />
         ))}
       </div>
     </main>
diff --git a/apps/customer/src/pages/LoginPage.module.css b/apps/customer/src/pages/LoginPage.module.css
index 56be423..babdbf0 100644
--- a/apps/customer/src/pages/LoginPage.module.css
+++ b/apps/customer/src/pages/LoginPage.module.css
@@ -24,11 +24,15 @@
 .brand {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 12px;
   margin-bottom: 28px;
 }
 
+.langSelect {
+  margin-inline-start: auto;
+}
+
 .logo {
   display: block;
   width: 48px;
@@ -112,7 +116,7 @@
 
 .inputIcon {
   position: absolute;
-  left: 12px;
+  inset-inline-start: 12px;
   color: var(--text-muted);
   pointer-events: none;
 }
@@ -120,7 +124,8 @@
 .inputWrap input {
   width: 100%;
   min-height: var(--field-height);
-  padding: var(--field-padding-y) 40px var(--field-padding-y) 38px;
+  padding-block: var(--field-padding-y);
+  padding-inline: 38px 40px;
   font-size: var(--field-font-size);
   line-height: 1.4;
   font-family: inherit;
@@ -140,7 +145,7 @@
 
 .togglePassword {
   position: absolute;
-  right: 12px;
+  inset-inline-end: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/apps/customer/src/pages/LoginPage.tsx b/apps/customer/src/pages/LoginPage.tsx
index 2aca384..f6a7bf2 100644
--- a/apps/customer/src/pages/LoginPage.tsx
+++ b/apps/customer/src/pages/LoginPage.tsx
@@ -16,6 +16,8 @@ import {
   sendOtp,
   verifyOtp,
 } from '../services/authService'
+import { LanguageSelect } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import meshkeeLogo from '../assets/meshkee-logo.png'
 import styles from './LoginPage.module.css'
 
@@ -36,6 +38,7 @@ export function LoginPage() {
   const { login } = useAuth()
   const { businessName, logoUrl } = useTenantBranding()
   const tenantDomain = getTenantDomain()
+  const t = useT()
 
   const [view, setView] = useState<AuthView>('login')
   const [smsStep, setSmsStep] = useState<SmsStep>('phone')
@@ -114,7 +117,7 @@ export function LoginPage() {
       setSmsStep('code')
       startCountdown()
     } catch (err) {
-      handleApiError(err, 'Unable to send verification code.')
+      handleApiError(err, t('login.error.sendCode'))
     } finally {
       setIsSubmitting(false)
     }
@@ -130,7 +133,7 @@ export function LoginPage() {
       await login(cellNumber, password)
       navigate(redirectTo)
     } catch (err) {
-      handleApiError(err, 'Unable to sign in. Check your connection and try again.')
+      handleApiError(err, t('login.error.signIn'))
     } finally {
       setIsSubmitting(false)
     }
@@ -141,12 +144,12 @@ export function LoginPage() {
     clearMessages()
 
     if (password !== confirmPassword) {
-      setError('Passwords do not match.')
+      setError(t('signup.error.match'))
       return
     }
 
     if (password.length < 8) {
-      setError('Password must be at least 8 characters.')
+      setError(t('signup.error.length'))
       return
     }
 
@@ -180,7 +183,7 @@ export function LoginPage() {
       await login(cellNumber, password)
       navigate(redirectTo)
     } catch (err) {
-      handleApiError(err, 'Unable to create account.')
+      handleApiError(err, t('signup.error.create'))
     } finally {
       setIsSubmitting(false)
     }
@@ -191,7 +194,7 @@ export function LoginPage() {
     clearMessages()
 
     if (newPassword.length < 8) {
-      setError('Password must be at least 8 characters.')
+      setError(t('forgot.error.length'))
       return
     }
 
@@ -200,12 +203,10 @@ export function LoginPage() {
     try {
       const cellNumber = toE164CellNumber(phone)
       await verifyOtp(cellNumber, smsCode)
-      setInfo(
-        'Phone number verified. Full password reset via SMS is not available yet — please contact support or sign in if you remember your password.',
-      )
+      setInfo(t('forgot.info.partial'))
       setTimeout(() => switchView('login'), 2500)
     } catch (err) {
-      handleApiError(err, 'Unable to verify code.')
+      handleApiError(err, t('forgot.error.verify'))
     } finally {
       setIsSubmitting(false)
     }
@@ -221,14 +222,14 @@ export function LoginPage() {
       await verifyOtp(cellNumber, smsCode)
 
       if (!password) {
-        setError('Enter your account password to complete sign-in after SMS verification.')
+        setError(t('otp.error.password'))
         return
       }
 
       await login(cellNumber, password)
       navigate(redirectTo)
     } catch (err) {
-      handleApiError(err, 'Unable to sign in with SMS verification.')
+      handleApiError(err, t('otp.error.signIn'))
     } finally {
       setIsSubmitting(false)
     }
@@ -241,14 +242,17 @@ export function LoginPage() {
           <img src={logoUrl || meshkeeLogo} alt="" className={styles.logo} />
           <div className={styles.brandText}>
             <span className={styles.domain}>{businessName || tenantDomain}</span>
-            <span className={styles.appName}>powered by Meshkee.app</span>
+            <span className={styles.appName}>{t('app.poweredBy')}</span>
+          </div>
+          <div className={styles.langSelect}>
+            <LanguageSelect />
           </div>
         </div>
 
         {view === 'login' && (
           <>
-            <h1 className={styles.title}>Welcome back</h1>
-            <p className={styles.subtitle}>Sign in with your mobile number</p>
+            <h1 className={styles.title}>{t('login.welcome')}</h1>
+            <p className={styles.subtitle}>{t('login.subtitle')}</p>
 
             <form className={styles.form} onSubmit={handleLogin}>
               {error && (
@@ -259,7 +263,7 @@ export function LoginPage() {
               {info && <div className={styles.info}>{info}</div>}
 
               <div className={styles.field}>
-                <label htmlFor="login-phone">Mobile number</label>
+                <label htmlFor="login-phone">{t('login.mobile')}</label>
                 <div className={styles.inputWrap}>
                   <Smartphone size={18} className={styles.inputIcon} />
                   <input
@@ -276,13 +280,13 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="login-password">Password</label>
+                <label htmlFor="login-password">{t('login.password')}</label>
                 <div className={styles.inputWrap}>
                   <Lock size={18} className={styles.inputIcon} />
                   <input
                     id="login-password"
                     type={showPassword ? 'text' : 'password'}
-                    placeholder="Enter your password"
+                    placeholder={t('login.passwordPlaceholder')}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required
@@ -293,7 +297,7 @@ export function LoginPage() {
                     type="button"
                     className={styles.togglePassword}
                     onClick={() => setShowPassword((v) => !v)}
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                    aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
                     disabled={isSubmitting}
                   >
                     {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -308,17 +312,17 @@ export function LoginPage() {
                   onClick={() => switchView('forgot')}
                   disabled={isSubmitting}
                 >
-                  Forgot password?
+                  {t('login.forgot')}
                 </button>
               </div>
 
               <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                {isSubmitting ? 'Signing in...' : 'Sign in'}
+                {isSubmitting ? t('login.signingIn') : t('login.signIn')}
               </button>
             </form>
 
             <div className={styles.divider}>
-              <span>or</span>
+              <span>{t('login.or')}</span>
             </div>
 
             <button
@@ -328,18 +332,18 @@ export function LoginPage() {
               disabled={isSubmitting}
             >
               <KeyRound size={18} />
-              One-time login with SMS
+              {t('login.otp')}
             </button>
 
             <p className={styles.footerText}>
-              Don&apos;t have an account?{' '}
+              {t('login.noAccount')}{' '}
               <button
                 type="button"
                 className={styles.linkBtn}
                 onClick={() => switchView('signup')}
                 disabled={isSubmitting}
               >
-                Sign up
+                {t('login.signUp')}
               </button>
             </p>
           </>
@@ -347,8 +351,8 @@ export function LoginPage() {
 
         {view === 'signup' && (
           <>
-            <h1 className={styles.title}>Create account</h1>
-            <p className={styles.subtitle}>Register as a customer of {tenantDomain}</p>
+            <h1 className={styles.title}>{t('signup.title')}</h1>
+            <p className={styles.subtitle}>{t('signup.subtitle', { domain: tenantDomain })}</p>
 
             <form className={styles.form} onSubmit={handleSignup}>
               {error && (
@@ -360,13 +364,13 @@ export function LoginPage() {
 
               <div className={styles.fieldRow}>
                 <div className={styles.field}>
-                  <label htmlFor="signup-first">First name</label>
+                  <label htmlFor="signup-first">{t('signup.firstName')}</label>
                   <div className={styles.inputWrap}>
                     <User size={18} className={styles.inputIcon} />
                     <input
                       id="signup-first"
                       type="text"
-                      placeholder="First name"
+                      placeholder={t('signup.firstName')}
                       value={firstName}
                       onChange={(e) => setFirstName(e.target.value)}
                       required
@@ -376,13 +380,13 @@ export function LoginPage() {
                   </div>
                 </div>
                 <div className={styles.field}>
-                  <label htmlFor="signup-last">Last name</label>
+                  <label htmlFor="signup-last">{t('signup.lastName')}</label>
                   <div className={styles.inputWrap}>
                     <User size={18} className={styles.inputIcon} />
                     <input
                       id="signup-last"
                       type="text"
-                      placeholder="Last name"
+                      placeholder={t('signup.lastName')}
                       value={lastName}
                       onChange={(e) => setLastName(e.target.value)}
                       required
@@ -394,7 +398,7 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="signup-phone">Mobile number</label>
+                <label htmlFor="signup-phone">{t('login.mobile')}</label>
                 <div className={styles.inputWrap}>
                   <Smartphone size={18} className={styles.inputIcon} />
                   <input
@@ -411,13 +415,13 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="signup-password">Password</label>
+                <label htmlFor="signup-password">{t('login.password')}</label>
                 <div className={styles.inputWrap}>
                   <Lock size={18} className={styles.inputIcon} />
                   <input
                     id="signup-password"
                     type={showPassword ? 'text' : 'password'}
-                    placeholder="Choose a password"
+                    placeholder={t('signup.passwordPlaceholder')}
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
                     required
@@ -428,7 +432,7 @@ export function LoginPage() {
                     type="button"
                     className={styles.togglePassword}
                     onClick={() => setShowPassword((v) => !v)}
-                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                    aria-label={showPassword ? t('login.hidePassword') : t('login.showPassword')}
                     disabled={isSubmitting}
                   >
                     {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -437,13 +441,13 @@ export function LoginPage() {
               </div>
 
               <div className={styles.field}>
-                <label htmlFor="signup-confirm">Confirm password</label>
+                <label htmlFor="signup-confirm">{t('signup.confirm')}</label>
                 <div className={styles.inputWrap}>
                   <Lock size={18} className={styles.inputIcon} />
                   <input
                     id="signup-confirm"
                     type={showPassword ? 'text' : 'password'}
-                    placeholder="Repeat your password"
+                    placeholder={t('signup.confirmPlaceholder')}
                     value={confirmPassword}
                     onChange={(e) => setConfirmPassword(e.target.value)}
                     required
@@ -454,19 +458,19 @@ export function LoginPage() {
               </div>
 
               <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                {isSubmitting ? 'Creating account...' : 'Create account'}
+                {isSubmitting ? t('signup.creating') : t('signup.create')}
               </button>
             </form>
 
             <p className={styles.footerText}>
-              Already have an account?{' '}
+              {t('signup.hasAccount')}{' '}
               <button
                 type="button"
                 className={styles.linkBtn}
                 onClick={() => switchView('login')}
                 disabled={isSubmitting}
               >
-                Sign in
+                {t('signup.signIn')}
               </button>
             </p>
           </>
@@ -481,14 +485,12 @@ export function LoginPage() {
               disabled={isSubmitting}
             >
               <ArrowLeft size={18} />
-              Back to sign in
+              {t('forgot.back')}
             </button>
 
-            <h1 className={styles.title}>Forgot password</h1>
+            <h1 className={styles.title}>{t('forgot.title')}</h1>
             <p className={styles.subtitle}>
-              {smsStep === 'phone'
-                ? 'We will send a verification code via SMS'
-                : 'Enter the code and your new password'}
+              {smsStep === 'phone' ? t('forgot.subtitlePhone') : t('forgot.subtitleCode')}
             </p>
 
             <form className={styles.form} onSubmit={handleResetPassword}>
@@ -502,7 +504,7 @@ export function LoginPage() {
               {smsStep === 'phone' ? (
                 <>
                   <div className={styles.field}>
-                    <label htmlFor="forgot-phone">Mobile number</label>
+                    <label htmlFor="forgot-phone">{t('login.mobile')}</label>
                     <div className={styles.inputWrap}>
                       <Smartphone size={18} className={styles.inputIcon} />
                       <input
@@ -524,19 +526,19 @@ export function LoginPage() {
                     onClick={() => void handleSendCode()}
                     disabled={isSubmitting}
                   >
-                    {isSubmitting ? 'Sending...' : 'Send SMS code'}
+                    {isSubmitting ? t('forgot.sending') : t('forgot.sendCode')}
                   </button>
                 </>
               ) : (
                 <>
                   {codeSent && (
                     <p className={styles.codeHint}>
-                      Verification code sent to <strong>{phone}</strong>
+                      {t('common.codeSent', { phone })}
                     </p>
                   )}
 
                   <div className={styles.field}>
-                    <label htmlFor="forgot-code">SMS verification code</label>
+                    <label htmlFor="forgot-code">{t('forgot.code')}</label>
                     <div className={styles.inputWrap}>
                       <KeyRound size={18} className={styles.inputIcon} />
                       <input
@@ -554,13 +556,13 @@ export function LoginPage() {
                   </div>
 
                   <div className={styles.field}>
-                    <label htmlFor="forgot-new-password">New password</label>
+                    <label htmlFor="forgot-new-password">{t('forgot.newPassword')}</label>
                     <div className={styles.inputWrap}>
                       <Lock size={18} className={styles.inputIcon} />
                       <input
                         id="forgot-new-password"
                         type={showPassword ? 'text' : 'password'}
-                        placeholder="Enter new password"
+                        placeholder={t('forgot.newPasswordPlaceholder')}
                         value={newPassword}
                         onChange={(e) => setNewPassword(e.target.value)}
                         required
@@ -572,7 +574,7 @@ export function LoginPage() {
 
                   <div className={styles.resendRow}>
                     {countdown > 0 ? (
-                      <span className={styles.countdown}>Resend code in {countdown}s</span>
+                      <span className={styles.countdown}>{t('common.resendIn', { seconds: countdown })}</span>
                     ) : (
                       <button
                         type="button"
@@ -580,13 +582,13 @@ export function LoginPage() {
                         onClick={() => void handleSendCode()}
                         disabled={isSubmitting}
                       >
-                        Resend SMS code
+                        {t('common.resend')}
                       </button>
                     )}
                   </div>
 
                   <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                    {isSubmitting ? 'Verifying...' : 'Reset password'}
+                    {isSubmitting ? t('forgot.verifying') : t('forgot.reset')}
                   </button>
                 </>
               )}
@@ -603,14 +605,12 @@ export function LoginPage() {
               disabled={isSubmitting}
             >
               <ArrowLeft size={18} />
-              Back to sign in
+              {t('otp.back')}
             </button>
 
-            <h1 className={styles.title}>One-time login</h1>
+            <h1 className={styles.title}>{t('otp.title')}</h1>
             <p className={styles.subtitle}>
-              {smsStep === 'phone'
-                ? 'Verify your mobile number with a one-time SMS code'
-                : 'Enter the SMS code and your password'}
+              {smsStep === 'phone' ? t('otp.subtitlePhone') : t('otp.subtitleCode')}
             </p>
 
             <form className={styles.form} onSubmit={handleOtpLogin}>
@@ -623,7 +623,7 @@ export function LoginPage() {
               {smsStep === 'phone' ? (
                 <>
                   <div className={styles.field}>
-                    <label htmlFor="otp-phone">Mobile number</label>
+                    <label htmlFor="otp-phone">{t('login.mobile')}</label>
                     <div className={styles.inputWrap}>
                       <Smartphone size={18} className={styles.inputIcon} />
                       <input
@@ -645,19 +645,19 @@ export function LoginPage() {
                     onClick={() => void handleSendCode()}
                     disabled={isSubmitting}
                   >
-                    {isSubmitting ? 'Sending...' : 'Send SMS code'}
+                    {isSubmitting ? t('forgot.sending') : t('forgot.sendCode')}
                   </button>
                 </>
               ) : (
                 <>
                   {codeSent && (
                     <p className={styles.codeHint}>
-                      Verification code sent to <strong>{phone}</strong>
+                      {t('common.codeSent', { phone })}
                     </p>
                   )}
 
                   <div className={styles.field}>
-                    <label htmlFor="otp-code">SMS verification code</label>
+                    <label htmlFor="otp-code">{t('otp.code')}</label>
                     <div className={styles.inputWrap}>
                       <KeyRound size={18} className={styles.inputIcon} />
                       <input
@@ -675,13 +675,13 @@ export function LoginPage() {
                   </div>
 
                   <div className={styles.field}>
-                    <label htmlFor="otp-password">Password</label>
+                    <label htmlFor="otp-password">{t('otp.password')}</label>
                     <div className={styles.inputWrap}>
                       <Lock size={18} className={styles.inputIcon} />
                       <input
                         id="otp-password"
                         type={showPassword ? 'text' : 'password'}
-                        placeholder="Your account password"
+                        placeholder={t('otp.passwordPlaceholder')}
                         value={password}
                         onChange={(e) => setPassword(e.target.value)}
                         required
@@ -693,7 +693,7 @@ export function LoginPage() {
 
                   <div className={styles.resendRow}>
                     {countdown > 0 ? (
-                      <span className={styles.countdown}>Resend code in {countdown}s</span>
+                      <span className={styles.countdown}>{t('common.resendIn', { seconds: countdown })}</span>
                     ) : (
                       <button
                         type="button"
@@ -701,13 +701,13 @@ export function LoginPage() {
                         onClick={() => void handleSendCode()}
                         disabled={isSubmitting}
                       >
-                        Resend SMS code
+                        {t('common.resend')}
                       </button>
                     )}
                   </div>
 
                   <button type="submit" className={styles.submitBtn} disabled={isSubmitting}>
-                    {isSubmitting ? 'Signing in...' : 'Sign in'}
+                    {isSubmitting ? t('login.signingIn') : t('login.signIn')}
                   </button>
                 </>
               )}
diff --git a/apps/customer/src/pages/OrdersPage.module.css b/apps/customer/src/pages/OrdersPage.module.css
index a25f634..a1404a6 100644
--- a/apps/customer/src/pages/OrdersPage.module.css
+++ b/apps/customer/src/pages/OrdersPage.module.css
@@ -71,7 +71,7 @@
 .th,
 .td {
   padding: 10px 12px;
-  text-align: left;
+  text-align: start;
   border-bottom: 1px solid rgba(148, 163, 184, 0.16);
   vertical-align: middle;
 }
@@ -217,21 +217,22 @@
 }
 
 .thActions {
-  text-align: center;
+  text-align: end;
   white-space: nowrap;
 }
 
 .tdActions {
-  text-align: right;
+  text-align: end;
   white-space: nowrap;
-  padding-right: 10px;
+  padding-inline: 10px;
 }
 
 .rowActions {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0;
+  width: 100%;
 }
 
 .actionBtn {
diff --git a/apps/customer/src/pages/OrdersPage.tsx b/apps/customer/src/pages/OrdersPage.tsx
index ab167dd..d17ded1 100644
--- a/apps/customer/src/pages/OrdersPage.tsx
+++ b/apps/customer/src/pages/OrdersPage.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useState } from 'react'
-import { Breadcrumbs, Pagination } from '@meshkee/dashboard-ui'
+import { Breadcrumbs, Pagination, useLocale } from '@meshkee/dashboard-ui'
 import { OrderItemsModal } from '../components/OrderItemsModal'
 import { OrderRow } from '../components/OrderRow'
+import { useT } from '../i18n/useT'
 import { ApiError, isAbortError } from '../lib/api'
 import {
   listOrders,
@@ -16,12 +17,16 @@ const PAGE_SIZE = 20
 const COLUMN_COUNT = 7
 
 export function OrdersPage() {
+  const t = useT()
+  const { locale } = useLocale()
   const [data, setData] = useState<OrdersListResponse | null>(null)
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
   const [page, setPage] = useState(1)
   const [viewOrder, setViewOrder] = useState<Order | null>(null)
 
+  const processSteps = DEFAULT_ORDER_PROCESS_STEPS
+
   useEffect(() => {
     const controller = new AbortController()
 
@@ -35,7 +40,7 @@ export function OrdersPage() {
         setData(response)
       } catch (err) {
         if (isAbortError(err) || controller.signal.aborted) return
-        setError(err instanceof ApiError ? err.message : 'Unable to load orders.')
+        setError(err instanceof ApiError ? err.message : t('orders.error.load'))
       } finally {
         if (!controller.signal.aborted) setLoading(false)
       }
@@ -43,7 +48,7 @@ export function OrdersPage() {
 
     void load()
     return () => controller.abort()
-  }, [page])
+  }, [page, t])
 
   const totalPages = useMemo(() => {
     const total = data?.total ?? 0
@@ -62,27 +67,29 @@ export function OrdersPage() {
 
   return (
     <main className={pageStyles.content}>
-      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Orders' }]} />
+      <Breadcrumbs items={[{ label: t('nav.home'), href: '/' }, { label: t('orders.title') }]} />
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>My Orders</h2>
-          <p className={pageStyles.pageSubtitle}>View your order history and details.</p>
+          <h2 className={pageStyles.pageTitle}>{t('orders.title')}</h2>
+          <p className={pageStyles.pageSubtitle}>{t('orders.subtitle')}</p>
         </div>
       </div>
 
       <div className={styles.tablePanel}>
         <div className={styles.tableWrap}>
           <div className={styles.tableHeader}>
-            <div className={styles.tableHeaderTitle}>Order list</div>
+            <div className={styles.tableHeaderTitle}>{t('orders.listTitle')}</div>
             <div className={styles.meta}>
               {data ? (
                 data.total > 0 ? (
-                  <>
-                    Showing {showingFrom} - {showingTo} of {data.total}
-                  </>
+                  t('orders.showing', {
+                    from: showingFrom,
+                    to: showingTo,
+                    total: data.total,
+                  })
                 ) : (
-                  'No orders'
+                  t('orders.none')
                 )
               ) : (
                 ' '
@@ -92,7 +99,7 @@ export function OrdersPage() {
 
           {error && <div className={styles.errorBanner}>{error}</div>}
 
-          <table className={styles.table}>
+          <table className={styles.table} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
             <colgroup>
               <col className={styles.colOrderId} />
               <col className={styles.colItems} />
@@ -104,20 +111,20 @@ export function OrdersPage() {
             </colgroup>
             <thead>
               <tr>
-                <th className={styles.th}>Order ID</th>
-                <th className={styles.th}>Items</th>
-                <th className={styles.th}>Total cost</th>
-                <th className={styles.th}>Date &amp; time</th>
-                <th className={styles.th}>Step</th>
-                <th className={styles.th}>Registered by</th>
-                <th className={`${styles.th} ${styles.thActions}`}>Actions</th>
+                <th className={styles.th}>{t('orders.col.orderId')}</th>
+                <th className={styles.th}>{t('orders.col.items')}</th>
+                <th className={styles.th}>{t('orders.col.total')}</th>
+                <th className={styles.th}>{t('orders.col.date')}</th>
+                <th className={styles.th}>{t('orders.col.step')}</th>
+                <th className={styles.th}>{t('orders.col.source')}</th>
+                <th className={`${styles.th} ${styles.thActions}`}>{t('orders.col.actions')}</th>
               </tr>
             </thead>
             <tbody>
               {loading && (
                 <tr>
                   <td className={styles.td} colSpan={COLUMN_COUNT}>
-                    Loading orders...
+                    {t('orders.loading')}
                   </td>
                 </tr>
               )}
@@ -125,7 +132,7 @@ export function OrdersPage() {
               {!loading && data?.items.length === 0 && (
                 <tr>
                   <td className={styles.td} colSpan={COLUMN_COUNT}>
-                    You have no orders yet.
+                    {t('orders.empty')}
                   </td>
                 </tr>
               )}
@@ -135,7 +142,7 @@ export function OrdersPage() {
                   <OrderRow
                     key={order.id}
                     order={order}
-                    processSteps={DEFAULT_ORDER_PROCESS_STEPS}
+                    processSteps={processSteps}
                     onViewItems={setViewOrder}
                   />
                 ))}
@@ -145,7 +152,12 @@ export function OrdersPage() {
           {data && data.total > PAGE_SIZE && (
             <div className={styles.pagination}>
               <div>
-                Page {page} / {totalPages} · {PAGE_SIZE} per page · {data.total} total
+                {t('orders.pageMeta', {
+                  page,
+                  totalPages,
+                  pageSize: PAGE_SIZE,
+                  total: data.total,
+                })}
               </div>
               <Pagination
                 currentPage={page}
diff --git a/apps/customer/src/pages/ProfilePage.tsx b/apps/customer/src/pages/ProfilePage.tsx
index 44efeec..0738f06 100644
--- a/apps/customer/src/pages/ProfilePage.tsx
+++ b/apps/customer/src/pages/ProfilePage.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
-import { Breadcrumbs } from '@meshkee/dashboard-ui'
+import { Breadcrumbs, useToast } from '@meshkee/dashboard-ui'
 import { useAuth } from '../context/AuthContext'
-import { useToast } from '@meshkee/dashboard-ui'
+import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
 import { formatCellForDisplay } from '../lib/cellNumber'
 import { updateProfile } from '../services/authService'
@@ -11,9 +11,12 @@ import styles from './ProfilePage.module.css'
 export function ProfilePage() {
   const { user, setUser } = useAuth()
   const { showToast } = useToast()
+  const t = useT()
 
   const [firstName, setFirstName] = useState('')
   const [lastName, setLastName] = useState('')
+  const [firstNameEn, setFirstNameEn] = useState('')
+  const [lastNameEn, setLastNameEn] = useState('')
   const [email, setEmail] = useState('')
   const [landline, setLandline] = useState('')
   const [backupPhone, setBackupPhone] = useState('')
@@ -29,6 +32,8 @@ export function ProfilePage() {
 
     setFirstName(user.firstName ?? '')
     setLastName(user.lastName ?? '')
+    setFirstNameEn(user.firstNameEn ?? '')
+    setLastNameEn(user.lastNameEn ?? '')
     setEmail(user.email ?? '')
     setLandline(user.profile.landline ?? '')
     setBackupPhone(user.profile.backupPhone ?? '')
@@ -47,6 +52,8 @@ export function ProfilePage() {
       const result = await updateProfile({
         firstName: firstName.trim(),
         lastName: lastName.trim(),
+        firstNameEn: firstNameEn.trim(),
+        lastNameEn: lastNameEn.trim(),
         email: email.trim() || undefined,
         landline: landline.trim(),
         backupPhone: backupPhone.trim(),
@@ -57,10 +64,10 @@ export function ProfilePage() {
       })
 
       setUser(result.user)
-      showToast('Profile updated successfully.', 'success')
+      showToast(t('profile.toast.success'), 'success')
     } catch (err) {
       const message =
-        err instanceof ApiError ? err.message : 'Unable to update profile. Please try again.'
+        err instanceof ApiError ? err.message : t('profile.error.update')
       setError(message)
       showToast(message, 'error')
     } finally {
@@ -70,14 +77,12 @@ export function ProfilePage() {
 
   return (
     <main className={pageStyles.content}>
-      <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'My Profile' }]} />
+      <Breadcrumbs items={[{ label: t('nav.home'), href: '/' }, { label: t('profile.title') }]} />
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>My Profile</h2>
-          <p className={pageStyles.pageSubtitle}>
-            Update your personal information and contact details.
-          </p>
+          <h2 className={pageStyles.pageTitle}>{t('profile.title')}</h2>
+          <p className={pageStyles.pageSubtitle}>{t('profile.subtitle')}</p>
         </div>
       </div>
 
@@ -89,10 +94,10 @@ export function ProfilePage() {
         )}
 
         <section className={styles.section}>
-          <h3 className={styles.sectionTitle}>Account</h3>
+          <h3 className={styles.sectionTitle}>{t('profile.section.account')}</h3>
           <div className={styles.grid}>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="profile-cell">Mobile number</label>
+              <label htmlFor="profile-cell">{t('profile.mobile')}</label>
               <input
                 id="profile-cell"
                 type="text"
@@ -101,37 +106,65 @@ export function ProfilePage() {
               />
             </div>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="profile-email">Email</label>
+              <label htmlFor="profile-email">{t('profile.email')}</label>
               <input
                 id="profile-email"
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                placeholder="you@example.com"
+                placeholder={t('profile.emailPlaceholder')}
               />
             </div>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="profile-first">First name</label>
+              <label htmlFor="profile-first">{t('profile.firstName')}</label>
               <input
                 id="profile-first"
                 type="text"
                 value={firstName}
                 onChange={(e) => setFirstName(e.target.value)}
                 required
+                dir="rtl"
+                lang="fa"
+                className="faText"
               />
             </div>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="profile-last">Last name</label>
+              <label htmlFor="profile-last">{t('profile.lastName')}</label>
               <input
                 id="profile-last"
                 type="text"
                 value={lastName}
                 onChange={(e) => setLastName(e.target.value)}
                 required
+                dir="rtl"
+                lang="fa"
+                className="faText"
               />
             </div>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="profile-landline">Landline</label>
+              <label htmlFor="profile-first-en">{t('profile.firstNameEn')}</label>
+              <input
+                id="profile-first-en"
+                type="text"
+                value={firstNameEn}
+                onChange={(e) => setFirstNameEn(e.target.value)}
+                dir="ltr"
+                lang="en"
+              />
+            </div>
+            <div className={`${styles.field} ${styles.col3}`}>
+              <label htmlFor="profile-last-en">{t('profile.lastNameEn')}</label>
+              <input
+                id="profile-last-en"
+                type="text"
+                value={lastNameEn}
+                onChange={(e) => setLastNameEn(e.target.value)}
+                dir="ltr"
+                lang="en"
+              />
+            </div>
+            <div className={`${styles.field} ${styles.col3}`}>
+              <label htmlFor="profile-landline">{t('profile.landline')}</label>
               <input
                 id="profile-landline"
                 type="text"
@@ -141,7 +174,7 @@ export function ProfilePage() {
               />
             </div>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="profile-backup-phone">Backup phone number</label>
+              <label htmlFor="profile-backup-phone">{t('profile.backupPhone')}</label>
               <input
                 id="profile-backup-phone"
                 type="tel"
@@ -155,10 +188,10 @@ export function ProfilePage() {
         </section>
 
         <section className={styles.section}>
-          <h3 className={styles.sectionTitle}>About</h3>
+          <h3 className={styles.sectionTitle}>{t('profile.section.about')}</h3>
           <div className={styles.grid}>
             <div className={`${styles.field} ${styles.col12}`}>
-              <label htmlFor="profile-about">About</label>
+              <label htmlFor="profile-about">{t('profile.about')}</label>
               <textarea
                 id="profile-about"
                 value={about}
@@ -170,10 +203,10 @@ export function ProfilePage() {
         </section>
 
         <section className={styles.section}>
-          <h3 className={styles.sectionTitle}>Social</h3>
+          <h3 className={styles.sectionTitle}>{t('profile.section.social')}</h3>
           <div className={styles.grid}>
             <div className={`${styles.field} ${styles.col4}`}>
-              <label htmlFor="profile-instagram">Instagram</label>
+              <label htmlFor="profile-instagram">{t('profile.instagram')}</label>
               <input
                 id="profile-instagram"
                 type="text"
@@ -182,7 +215,7 @@ export function ProfilePage() {
               />
             </div>
             <div className={`${styles.field} ${styles.col4}`}>
-              <label htmlFor="profile-telegram">Telegram</label>
+              <label htmlFor="profile-telegram">{t('profile.telegram')}</label>
               <input
                 id="profile-telegram"
                 type="text"
@@ -191,7 +224,7 @@ export function ProfilePage() {
               />
             </div>
             <div className={`${styles.field} ${styles.col4}`}>
-              <label htmlFor="profile-linkedin">LinkedIn</label>
+              <label htmlFor="profile-linkedin">{t('profile.linkedin')}</label>
               <input
                 id="profile-linkedin"
                 type="text"
@@ -204,7 +237,7 @@ export function ProfilePage() {
 
         <div className={styles.actions}>
           <button type="submit" className={styles.saveBtn} disabled={isSaving}>
-            {isSaving ? 'Saving...' : 'Save changes'}
+            {isSaving ? t('profile.saving') : t('profile.save')}
           </button>
         </div>
       </form>
diff --git a/apps/customer/src/services/authService.ts b/apps/customer/src/services/authService.ts
index 9ea00f3..36c846e 100644
--- a/apps/customer/src/services/authService.ts
+++ b/apps/customer/src/services/authService.ts
@@ -45,6 +45,8 @@ export async function updateProfile(
   payload: Partial<UserProfile> & {
     firstName?: string
     lastName?: string
+    firstNameEn?: string
+    lastNameEn?: string
     email?: string
   },
 ) {
diff --git a/apps/customer/src/services/orderService.ts b/apps/customer/src/services/orderService.ts
index 829d2b6..4b2f962 100644
--- a/apps/customer/src/services/orderService.ts
+++ b/apps/customer/src/services/orderService.ts
@@ -45,6 +45,7 @@ export interface Order {
   status: OrderStatus
   processStepId: string
   processStepLabel?: string | null
+  processStepLabelFa?: string | null
   processStepColor?: string | null
   source: OrderSource
   subtotal: number
diff --git a/apps/customer/src/services/tenantService.ts b/apps/customer/src/services/tenantService.ts
index 85cc597..b54e997 100644
--- a/apps/customer/src/services/tenantService.ts
+++ b/apps/customer/src/services/tenantService.ts
@@ -1,4 +1,5 @@
 import { apiRequest } from '../lib/api'
+import type { DashboardLocale } from '@meshkee/dashboard-core'
 import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
 
 export interface ResolvedTenant {
@@ -8,6 +9,7 @@ export interface ResolvedTenant {
   slug: string
   domain: string
   primaryColor: BusinessPrimaryColorId
+  defaultLocale?: DashboardLocale
   logoUrl?: string | null
   faviconUrl?: string | null
 }
diff --git a/apps/customer/src/utils/applyBusinessTheme.ts b/apps/customer/src/utils/applyBusinessTheme.ts
index e532218..8dbd3e7 100644
--- a/apps/customer/src/utils/applyBusinessTheme.ts
+++ b/apps/customer/src/utils/applyBusinessTheme.ts
@@ -11,6 +11,10 @@ const CSS_VAR_DEFAULTS: Record<string, string> = {
   '--primary-dark': '#2563eb',
   '--primary-rgb': '59 130 246',
   '--primary-dark-rgb': '37 99 235',
+  '--chart-accent': '#06b6d4',
+  '--chart-accent-dark': '#0891b2',
+  '--chart-accent-rgb': '6 182 212',
+  '--chart-accent-dark-rgb': '8 145 178',
 }
 
 export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -23,6 +27,10 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
   root.style.setProperty('--primary-dark', tokens.primaryDark)
   root.style.setProperty('--primary-rgb', tokens.primaryRgb)
   root.style.setProperty('--primary-dark-rgb', tokens.primaryDarkRgb)
+  root.style.setProperty('--chart-accent', tokens.chartAccent)
+  root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
+  root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
+  root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
 }
 
 export function resetBusinessPrimaryColor() {
diff --git a/apps/customer/src/utils/businessPrimaryColors.ts b/apps/customer/src/utils/businessPrimaryColors.ts
index 1129bd6..f2a22fc 100644
--- a/apps/customer/src/utils/businessPrimaryColors.ts
+++ b/apps/customer/src/utils/businessPrimaryColors.ts
@@ -20,8 +20,27 @@ export type BusinessPrimaryColorTokens = {
   primaryGlow: string
   primaryRgb: string
   primaryDarkRgb: string
+  /** Second chart series color (red→purple, blue→cyan, …). */
+  chartAccent: string
+  chartAccentDark: string
+  chartAccentRgb: string
+  chartAccentDarkRgb: string
 }
 
+const PURPLE_ACCENT = {
+  chartAccent: '#a855f7',
+  chartAccentDark: '#9333ea',
+  chartAccentRgb: '168 85 247',
+  chartAccentDarkRgb: '147 51 234',
+} as const
+
+const CYAN_ACCENT = {
+  chartAccent: '#06b6d4',
+  chartAccentDark: '#0891b2',
+  chartAccentRgb: '6 182 212',
+  chartAccentDarkRgb: '8 145 178',
+} as const
+
 export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
   BusinessPrimaryColorId,
   BusinessPrimaryColorTokens
@@ -34,6 +53,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#ef4444',
     primaryRgb: '239 68 68',
     primaryDarkRgb: '220 38 38',
+    ...PURPLE_ACCENT,
   },
   yellow: {
     label: 'Yellow',
@@ -43,6 +63,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#eab308',
     primaryRgb: '234 179 8',
     primaryDarkRgb: '202 138 4',
+    ...PURPLE_ACCENT,
   },
   black: {
     label: 'Black',
@@ -52,6 +73,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#334155',
     primaryRgb: '30 41 59',
     primaryDarkRgb: '15 23 42',
+    ...CYAN_ACCENT,
   },
   cyan: {
     label: 'Cyan',
@@ -61,6 +83,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#06b6d4',
     primaryRgb: '6 182 212',
     primaryDarkRgb: '8 145 178',
+    ...PURPLE_ACCENT,
   },
   purple: {
     label: 'Purple',
@@ -70,6 +93,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#a855f7',
     primaryRgb: '168 85 247',
     primaryDarkRgb: '147 51 234',
+    ...CYAN_ACCENT,
   },
   'light-blue': {
     label: 'Light Blue',
@@ -79,6 +103,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#38bdf8',
     primaryRgb: '56 189 248',
     primaryDarkRgb: '14 165 233',
+    ...CYAN_ACCENT,
   },
   'dark-blue': {
     label: 'Dark Blue',
@@ -88,6 +113,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryGlow: '#3b82f6',
     primaryRgb: '59 130 246',
     primaryDarkRgb: '37 99 235',
+    ...CYAN_ACCENT,
   },
 }
 
diff --git a/apps/customer/src/utils/orderSteps.ts b/apps/customer/src/utils/orderSteps.ts
index a81cf61..fbb3252 100644
--- a/apps/customer/src/utils/orderSteps.ts
+++ b/apps/customer/src/utils/orderSteps.ts
@@ -1,23 +1,74 @@
 export interface OrderProcessStep {
   id: string
   label: string
+  labelFa: string
   color: string
 }
 
 export const DEFAULT_ORDER_PROCESS_STEPS: OrderProcessStep[] = [
-  { id: 'processing', label: 'Under processing', color: '#3B82F6' },
-  { id: 'ready-for-shipping', label: 'Ready for shipping', color: '#F59E0B' },
-  { id: 'shipped', label: 'Shipped', color: '#8B5CF6' },
-  { id: 'delivered', label: 'Delivered', color: '#22C55E' },
+  {
+    id: 'processing',
+    label: 'Under processing',
+    labelFa: 'در حال پردازش',
+    color: '#3B82F6',
+  },
+  {
+    id: 'ready-for-shipping',
+    label: 'Ready for shipping',
+    labelFa: 'آماده ارسال',
+    color: '#F59E0B',
+  },
+  {
+    id: 'shipped',
+    label: 'Shipped',
+    labelFa: 'ارسال‌شده',
+    color: '#8B5CF6',
+  },
+  {
+    id: 'delivered',
+    label: 'Delivered',
+    labelFa: 'تحویل‌شده',
+    color: '#22C55E',
+  },
 ]
 
+function defaultFaForLabel(label: string | null | undefined) {
+  const trimmed = label?.trim()
+  if (!trimmed) return undefined
+  return DEFAULT_ORDER_PROCESS_STEPS.find(
+    (step) => step.label.toLowerCase() === trimmed.toLowerCase(),
+  )?.labelFa
+}
+
 export function stepLabel(
   steps: OrderProcessStep[],
   processStepId: string,
   processStepLabel?: string | null,
+  processStepLabelFa?: string | null,
+  locale: 'en' | 'fa' = 'en',
 ) {
+  const step =
+    steps.find((item) => item.id === processStepId) ??
+    DEFAULT_ORDER_PROCESS_STEPS.find((item) => item.id === processStepId)
+
+  if (locale === 'fa') {
+    let fa = processStepLabelFa?.trim() || step?.labelFa?.trim()
+
+    // Older API payloads sometimes echoed the English label as labelFa.
+    if (fa && processStepLabel?.trim() && fa === processStepLabel.trim()) {
+      fa = undefined
+    }
+
+    fa =
+      fa ||
+      defaultFaForLabel(processStepLabel) ||
+      defaultFaForLabel(step?.label)
+
+    if (fa) return fa
+  }
+
   if (processStepLabel?.trim()) return processStepLabel.trim()
-  return steps.find((step) => step.id === processStepId)?.label ?? processStepId
+  return step?.label ?? processStepId
 }
 
 export function stepColor(
@@ -28,7 +79,10 @@ export function stepColor(
   if (processStepColor?.trim()) return processStepColor.trim()
 
   const index = steps.findIndex((step) => step.id === processStepId)
-  const step = index >= 0 ? steps[index] : steps[0]
+  const step =
+    (index >= 0 ? steps[index] : undefined) ??
+    DEFAULT_ORDER_PROCESS_STEPS.find((item) => item.id === processStepId) ??
+    steps[0]
 
   if (step?.color) return step.color
 
diff --git a/apps/customer/src/utils/storeProductGroups.ts b/apps/customer/src/utils/storeProductGroups.ts
index 6cda757..bf032ec 100644
--- a/apps/customer/src/utils/storeProductGroups.ts
+++ b/apps/customer/src/utils/storeProductGroups.ts
@@ -1,3 +1,6 @@
-export function formatVariantCount(count: number): string {
+export function formatVariantCount(count: number, locale: 'en' | 'fa' = 'en'): string {
+  if (locale === 'fa') {
+    return count === 1 ? '۱ تنوع' : `${count} تنوع`
+  }
   return count === 1 ? '1 variant' : `${count} variants`
 }
diff --git a/apps/super-admin/index.html b/apps/super-admin/index.html
index 9fec3de..1a2af7b 100644
--- a/apps/super-admin/index.html
+++ b/apps/super-admin/index.html
@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
       rel="stylesheet"
     />
     <link
diff --git a/apps/super-admin/src/components/Header.module.css b/apps/super-admin/src/components/Header.module.css
index 9bc6775..4da2d77 100644
--- a/apps/super-admin/src/components/Header.module.css
+++ b/apps/super-admin/src/components/Header.module.css
@@ -89,13 +89,6 @@
   cursor: pointer;
 }
 
-.avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  object-fit: cover;
-}
-
 .profileInfo {
   display: flex;
   flex-direction: column;
diff --git a/apps/super-admin/src/components/Header.tsx b/apps/super-admin/src/components/Header.tsx
index abb9701..ecb1675 100644
--- a/apps/super-admin/src/components/Header.tsx
+++ b/apps/super-admin/src/components/Header.tsx
@@ -18,8 +18,6 @@ export function Header() {
     user?.cellNumber ||
     'Super Admin'
 
-  const avatarSeed = encodeURIComponent(user?.cellNumber ?? 'admin')
-
   useEffect(() => {
     if (!menuOpen) return
 
@@ -88,11 +86,6 @@ export function Header() {
               aria-expanded={menuOpen}
               aria-haspopup="menu"
             >
-              <img
-                src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${avatarSeed}`}
-                alt={displayName}
-                className={styles.avatar}
-              />
               <div className={styles.profileInfo}>
                 <span className={styles.name}>{displayName}</span>
                 <span className={styles.role}>Super Administrator</span>
diff --git a/apps/super-admin/src/components/SectionCard.module.css b/apps/super-admin/src/components/SectionCard.module.css
index dbc6843..b3c6830 100644
--- a/apps/super-admin/src/components/SectionCard.module.css
+++ b/apps/super-admin/src/components/SectionCard.module.css
@@ -71,3 +71,12 @@
   transform: translateX(2px);
   box-shadow: 0 4px 14px rgba(var(--primary-rgb) / 0.35);
 }
+
+:global([dir='rtl']) .arrowBtn {
+  transform: scaleX(-1);
+}
+
+:global([dir='rtl']) .card:hover .arrowBtn {
+  transform: scaleX(-1) translateX(2px);
+  box-shadow: 0 4px 14px rgba(var(--primary-rgb) / 0.35);
+}
diff --git a/apps/super-admin/src/index.css b/apps/super-admin/src/index.css
index 610f27c..67eecd9 100644
--- a/apps/super-admin/src/index.css
+++ b/apps/super-admin/src/index.css
@@ -36,8 +36,9 @@
   --field-padding-y: 9px;
   --field-padding-x: 12px;
   --field-height: 38px;
-  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-fa: 'IRANYekan', 'IranYekan', 'Yekan', Tahoma, sans-serif;
+  --font-ui: var(--font-en), var(--font-fa);
   --card-hover-lift: -4px;
   --card-hover-shadow: 0 16px 48px rgba(var(--primary-rgb) / 0.14);
   --card-hover-transition: transform 0.25s ease, box-shadow 0.25s ease;
@@ -50,7 +51,7 @@ body,
 }
 
 body {
-  font-family: var(--font-en);
+  font-family: var(--font-ui);
   color: var(--text-primary);
   background:
     radial-gradient(ellipse 80% 60% at 10% 0%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
@@ -126,7 +127,7 @@ select[multiple] option {
 
 input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
 textarea {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: var(--field-font-size);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -147,12 +148,12 @@ textarea:focus {
 
 input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])::placeholder,
 textarea::placeholder {
-  font-family: var(--font-en);
+  font-family: var(--font-ui);
 }
 
 [dir='rtl'],
 :lang(fa),
 .faText {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-weight: 400;
 }
diff --git a/apps/super-admin/src/pages/BusinessesPage.module.css b/apps/super-admin/src/pages/BusinessesPage.module.css
index 1d780f3..4cea5f3 100644
--- a/apps/super-admin/src/pages/BusinessesPage.module.css
+++ b/apps/super-admin/src/pages/BusinessesPage.module.css
@@ -402,6 +402,47 @@
   padding-right: 8px;
 }
 
+.thLocale,
+.tdLocale {
+  width: 1%;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.tdLocale {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.localeSelect {
+  min-height: var(--field-height);
+  padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y)
+    var(--field-padding-x);
+  font-size: var(--field-font-size);
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: rgba(255, 255, 255, 0.7);
+  color: var(--text-primary);
+  appearance: none;
+  -webkit-appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--select-arrow-offset) center;
+  background-size: var(--select-arrow-size);
+  cursor: pointer;
+}
+
+.localeSelect:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.localeSelect:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
+}
+
 .td {
   font-size: 13px;
   color: var(--text-primary);
diff --git a/apps/super-admin/src/pages/BusinessesPage.tsx b/apps/super-admin/src/pages/BusinessesPage.tsx
index b59343d..d9380e8 100644
--- a/apps/super-admin/src/pages/BusinessesPage.tsx
+++ b/apps/super-admin/src/pages/BusinessesPage.tsx
@@ -55,7 +55,10 @@ import {
 } from '../utils/businessPrimaryColors'
 import {
   getBusinessSettings,
+  updateBusinessBranding,
+  updateBusinessDefaultLocale,
   updateBusinessPrimaryColor,
+  type DashboardLocale,
 } from '../services/businessSettingsService'
 import { flattenBusinessCategories } from '../utils/categories'
 import { Pagination } from '@meshkee/dashboard-ui'
@@ -63,6 +66,11 @@ import pageStyles from '../components/PageContent.module.css'
 import styles from './BusinessesPage.module.css'
 
 const DEFAULT_PAGE_SIZE = 10
+const DEFAULT_LOCALE: DashboardLocale = 'fa'
+
+function normalizeDefaultLocale(value: unknown): DashboardLocale {
+  return value === 'en' || value === 'fa' ? value : DEFAULT_LOCALE
+}
 
 function formatDate(value: string) {
   const d = new Date(value)
@@ -190,6 +198,7 @@ export function BusinessesPage() {
   const [editPrimaryColor, setEditPrimaryColor] = useState<BusinessPrimaryColorId>(
     DEFAULT_BUSINESS_PRIMARY_COLOR_ID,
   )
+  const [editDefaultLocale, setEditDefaultLocale] = useState<DashboardLocale>(DEFAULT_LOCALE)
   const [editLoadingSettings, setEditLoadingSettings] = useState(false)
   const [editSubmitting, setEditSubmitting] = useState(false)
   const [editError, setEditError] = useState('')
@@ -216,6 +225,7 @@ export function BusinessesPage() {
   const [removeTarget, setRemoveTarget] = useState<BusinessListItem | null>(null)
   const [togglingId, setTogglingId] = useState<string | null>(null)
   const [savingColorId, setSavingColorId] = useState<string | null>(null)
+  const [savingLocaleId, setSavingLocaleId] = useState<string | null>(null)
 
   const [migrateOpen, setMigrateOpen] = useState(false)
   const [migrateBusiness, setMigrateBusiness] = useState<BusinessListItem | null>(null)
@@ -327,6 +337,7 @@ export function BusinessesPage() {
     setEditBusiness(b)
     setEditName(b.name)
     setEditPrimaryColor(normalizeBusinessPrimaryColorId(b.primaryColor))
+    setEditDefaultLocale(normalizeDefaultLocale(b.defaultLocale))
     setEditError('')
     setEditOpen(true)
     setEditLoadingSettings(true)
@@ -335,6 +346,7 @@ export function BusinessesPage() {
     void getBusinessSettings(b.id, controller.signal)
       .then((data) => {
         setEditPrimaryColor(data.settings.branding.primaryColor)
+        setEditDefaultLocale(normalizeDefaultLocale(data.settings.branding.defaultLocale))
       })
       .catch((err) => {
         if (isAbortError(err)) return
@@ -405,20 +417,76 @@ export function BusinessesPage() {
     }
   }
 
+  async function handleDefaultLocaleChange(b: BusinessListItem, defaultLocale: DashboardLocale) {
+    const currentLocale = normalizeDefaultLocale(b.defaultLocale)
+    if (currentLocale === defaultLocale) return
+
+    setSavingLocaleId(b.id)
+    setError('')
+
+    setData((prev) => {
+      if (!prev) return prev
+      return {
+        ...prev,
+        items: prev.items.map((item) =>
+          item.id === b.id ? { ...item, defaultLocale } : item,
+        ),
+      }
+    })
+
+    if (editBusiness?.id === b.id) {
+      setEditDefaultLocale(defaultLocale)
+    }
+
+    try {
+      await updateBusinessDefaultLocale(b.id, defaultLocale)
+      showToast(`Default language updated for "${b.name}".`, 'success')
+    } catch (err) {
+      setData((prev) => {
+        if (!prev) return prev
+        return {
+          ...prev,
+          items: prev.items.map((item) =>
+            item.id === b.id ? { ...item, defaultLocale: currentLocale } : item,
+          ),
+        }
+      })
+
+      if (editBusiness?.id === b.id) {
+        setEditDefaultLocale(currentLocale)
+      }
+
+      showToast(
+        err instanceof ApiError ? err.message : 'Unable to update default language.',
+        'error',
+      )
+    } finally {
+      setSavingLocaleId(null)
+    }
+  }
+
   async function submitEdit() {
     if (!editBusiness) return
     setEditSubmitting(true)
     setEditError('')
     try {
       await updateBusiness(editBusiness.id, { name: editName })
-      await updateBusinessPrimaryColor(editBusiness.id, editPrimaryColor)
+      await updateBusinessBranding(editBusiness.id, {
+        primaryColor: editPrimaryColor,
+        defaultLocale: editDefaultLocale,
+      })
       setData((prev) => {
         if (!prev) return prev
         return {
           ...prev,
           items: prev.items.map((item) =>
             item.id === editBusiness.id
-              ? { ...item, name: editName.trim(), primaryColor: editPrimaryColor }
+              ? {
+                  ...item,
+                  name: editName.trim(),
+                  primaryColor: editPrimaryColor,
+                  defaultLocale: editDefaultLocale,
+                }
               : item,
           ),
         }
@@ -828,13 +896,14 @@ export function BusinessesPage() {
                   <th className={styles.th}>Domain</th>
                   <th className={styles.th}>Owner</th>
                   <th className={`${styles.th} ${styles.thTheme}`}>Theme</th>
+                  <th className={`${styles.th} ${styles.thLocale}`}>Lang</th>
                   <th className={`${styles.th} ${styles.thActions}`}>Actions</th>
                 </tr>
               </thead>
               <tbody>
                 {loading && (
                   <tr>
-                    <td className={styles.td} colSpan={6}>
+                    <td className={styles.td} colSpan={7}>
                       Loading...
                     </td>
                   </tr>
@@ -842,7 +911,7 @@ export function BusinessesPage() {
 
                 {!loading && data?.items?.length === 0 && (
                   <tr>
-                    <td className={styles.td} colSpan={6}>
+                    <td className={styles.td} colSpan={7}>
                       No results found.
                     </td>
                   </tr>
@@ -900,6 +969,23 @@ export function BusinessesPage() {
                           }
                         />
                       </td>
+                      <td className={`${styles.td} ${styles.tdLocale}`}>
+                        <select
+                          className={styles.localeSelect}
+                          value={normalizeDefaultLocale(b.defaultLocale)}
+                          disabled={savingLocaleId === b.id}
+                          aria-label={`Default language for ${b.name}`}
+                          onChange={(e) =>
+                            void handleDefaultLocaleChange(
+                              b,
+                              normalizeDefaultLocale(e.target.value),
+                            )
+                          }
+                        >
+                          <option value="fa">FA</option>
+                          <option value="en">EN</option>
+                        </select>
+                      </td>
                       <td className={`${styles.td} ${styles.tdActions}`}>
                         <div className={styles.rowActions}>
                           <span className={styles.toggleInActions}>
@@ -1058,6 +1144,26 @@ export function BusinessesPage() {
             />
           )}
         </div>
+        <div className={styles.field}>
+          <label htmlFor="edit-default-locale">Default dashboard language</label>
+          {editLoadingSettings ? (
+            <p className={styles.helperText}>Loading language...</p>
+          ) : (
+            <select
+              id="edit-default-locale"
+              className={styles.localeSelect}
+              value={editDefaultLocale}
+              disabled={editSubmitting}
+              onChange={(e) => setEditDefaultLocale(normalizeDefaultLocale(e.target.value))}
+            >
+              <option value="fa">Farsi (FA)</option>
+              <option value="en">English (EN)</option>
+            </select>
+          )}
+          <p className={styles.helperText}>
+            Business and customer dashboards open in this language.
+          </p>
+        </div>
         <div style={{ height: 12 }} />
         <div className={styles.actionsRow}>
           <button
diff --git a/apps/super-admin/src/pages/ProfilePage.tsx b/apps/super-admin/src/pages/ProfilePage.tsx
index 48cd305..22262e5 100644
--- a/apps/super-admin/src/pages/ProfilePage.tsx
+++ b/apps/super-admin/src/pages/ProfilePage.tsx
@@ -13,6 +13,8 @@ function buildFormData(user: ReturnType<typeof useAuth>['user']): ProfileFormDat
   return {
     firstName: user?.firstName ?? '',
     lastName: user?.lastName ?? '',
+    firstNameEn: user?.firstNameEn ?? '',
+    lastNameEn: user?.lastNameEn ?? '',
     cellNumber: user ? formatCellForDisplay(user.cellNumber) : '',
     email: user?.email ?? '',
     about: user?.profile?.about ?? emptyProfile.about,
@@ -85,23 +87,51 @@ export function ProfilePage() {
           <h3 className={styles.sectionTitle}>General</h3>
           <div className={styles.grid}>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="firstName">Name</label>
+              <label htmlFor="firstName">First name (FA)</label>
               <input
                 id="firstName"
                 type="text"
                 value={form.firstName}
                 onChange={(e) => updateField('firstName', e.target.value)}
                 placeholder="First name"
+                dir="rtl"
+                lang="fa"
               />
             </div>
             <div className={`${styles.field} ${styles.col3}`}>
-              <label htmlFor="lastName">Last name</label>
+              <label htmlFor="lastName">Last name (FA)</label>
               <input
                 id="lastName"
                 type="text"
                 value={form.lastName}
                 onChange={(e) => updateField('lastName', e.target.value)}
                 placeholder="Last name"
+                dir="rtl"
+                lang="fa"
+              />
+            </div>
+            <div className={`${styles.field} ${styles.col3}`}>
+              <label htmlFor="firstNameEn">First name (EN)</label>
+              <input
+                id="firstNameEn"
+                type="text"
+                value={form.firstNameEn}
+                onChange={(e) => updateField('firstNameEn', e.target.value)}
+                placeholder="First name"
+                dir="ltr"
+                lang="en"
+              />
+            </div>
+            <div className={`${styles.field} ${styles.col3}`}>
+              <label htmlFor="lastNameEn">Last name (EN)</label>
+              <input
+                id="lastNameEn"
+                type="text"
+                value={form.lastNameEn}
+                onChange={(e) => updateField('lastNameEn', e.target.value)}
+                placeholder="Last name"
+                dir="ltr"
+                lang="en"
               />
             </div>
             <div className={`${styles.field} ${styles.col3}`}>
diff --git a/apps/super-admin/src/services/businessSettingsService.ts b/apps/super-admin/src/services/businessSettingsService.ts
index 231386b..f2e2a17 100644
--- a/apps/super-admin/src/services/businessSettingsService.ts
+++ b/apps/super-admin/src/services/businessSettingsService.ts
@@ -1,8 +1,11 @@
 import { apiRequest } from '../lib/api'
 import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
 
+export type DashboardLocale = 'en' | 'fa'
+
 export interface BrandingSettings {
   primaryColor: BusinessPrimaryColorId
+  defaultLocale: DashboardLocale
 }
 
 export interface BusinessSettings {
@@ -41,3 +44,27 @@ export async function updateBusinessPrimaryColor(
     },
   })
 }
+
+export async function updateBusinessDefaultLocale(
+  businessId: string,
+  defaultLocale: DashboardLocale,
+) {
+  return apiRequest<BusinessSettingsResponse>(`/businesses/${businessId}/settings`, {
+    method: 'PATCH',
+    auth: true,
+    body: {
+      branding: { defaultLocale },
+    },
+  })
+}
+
+export async function updateBusinessBranding(
+  businessId: string,
+  branding: Partial<BrandingSettings>,
+) {
+  return apiRequest<BusinessSettingsResponse>(`/businesses/${businessId}/settings`, {
+    method: 'PATCH',
+    auth: true,
+    body: { branding },
+  })
+}
diff --git a/apps/super-admin/src/services/profileService.ts b/apps/super-admin/src/services/profileService.ts
index 109e08e..4463bde 100644
--- a/apps/super-admin/src/services/profileService.ts
+++ b/apps/super-admin/src/services/profileService.ts
@@ -9,6 +9,8 @@ export async function updateProfile(data: ProfileFormData) {
     body: {
       firstName: data.firstName,
       lastName: data.lastName,
+      firstNameEn: data.firstNameEn,
+      lastNameEn: data.lastNameEn,
       email: data.email || null,
       about: data.about,
       city: data.city,
diff --git a/apps/super-admin/src/types/auth.ts b/apps/super-admin/src/types/auth.ts
index 5c83093..f1ffd61 100644
--- a/apps/super-admin/src/types/auth.ts
+++ b/apps/super-admin/src/types/auth.ts
@@ -17,6 +17,8 @@ export interface AuthUser {
   email: string | null
   firstName: string | null
   lastName: string | null
+  firstNameEn: string | null
+  lastNameEn: string | null
   cellVerifiedAt: string | null
   roles: string[]
   dashboard: DashboardType
diff --git a/apps/super-admin/src/types/business.ts b/apps/super-admin/src/types/business.ts
index 393d05e..430c73e 100644
--- a/apps/super-admin/src/types/business.ts
+++ b/apps/super-admin/src/types/business.ts
@@ -1,4 +1,5 @@
 import type { BusinessPrimaryColorId } from '../utils/businessPrimaryColors'
+import type { DashboardLocale } from '../services/businessSettingsService'
 
 export interface BusinessOwnerInfo {
   name: string | null
@@ -21,6 +22,7 @@ export interface BusinessListItem {
   ownerCellNumber: string | null
   isActive: boolean
   primaryColor: BusinessPrimaryColorId
+  defaultLocale: DashboardLocale
   oldBusinessId: string | null
 }
 
diff --git a/apps/super-admin/src/types/profile.ts b/apps/super-admin/src/types/profile.ts
index 6a48868..662b4f6 100644
--- a/apps/super-admin/src/types/profile.ts
+++ b/apps/super-admin/src/types/profile.ts
@@ -12,6 +12,8 @@ export interface UserProfile {
 export interface ProfileFormData {
   firstName: string
   lastName: string
+  firstNameEn: string
+  lastNameEn: string
   cellNumber: string
   email: string
   about: string
diff --git a/apps/super-admin/src/utils/applyBusinessTheme.ts b/apps/super-admin/src/utils/applyBusinessTheme.ts
new file mode 100644
index 0000000..8dbd3e7
--- /dev/null
+++ b/apps/super-admin/src/utils/applyBusinessTheme.ts
@@ -0,0 +1,42 @@
+import {
+  DEFAULT_BUSINESS_PRIMARY_COLOR_ID,
+  getBusinessPrimaryColorTokens,
+  type BusinessPrimaryColorId,
+} from './businessPrimaryColors'
+
+const CSS_VAR_DEFAULTS: Record<string, string> = {
+  '--primary': '#3b82f6',
+  '--primary-glow': '#3b82f6',
+  '--primary-light': '#dbeafe',
+  '--primary-dark': '#2563eb',
+  '--primary-rgb': '59 130 246',
+  '--primary-dark-rgb': '37 99 235',
+  '--chart-accent': '#06b6d4',
+  '--chart-accent-dark': '#0891b2',
+  '--chart-accent-rgb': '6 182 212',
+  '--chart-accent-dark-rgb': '8 145 178',
+}
+
+export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
+  const root = document.documentElement
+  const tokens = getBusinessPrimaryColorTokens(colorId ?? DEFAULT_BUSINESS_PRIMARY_COLOR_ID)
+
+  root.style.setProperty('--primary', tokens.primary)
+  root.style.setProperty('--primary-glow', tokens.primaryGlow)
+  root.style.setProperty('--primary-light', tokens.primaryLight)
+  root.style.setProperty('--primary-dark', tokens.primaryDark)
+  root.style.setProperty('--primary-rgb', tokens.primaryRgb)
+  root.style.setProperty('--primary-dark-rgb', tokens.primaryDarkRgb)
+  root.style.setProperty('--chart-accent', tokens.chartAccent)
+  root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
+  root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
+  root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
+}
+
+export function resetBusinessPrimaryColor() {
+  const root = document.documentElement
+
+  for (const [name, value] of Object.entries(CSS_VAR_DEFAULTS)) {
+    root.style.setProperty(name, value)
+  }
+}
diff --git a/apps/super-admin/src/utils/businessPrimaryColors.ts b/apps/super-admin/src/utils/businessPrimaryColors.ts
index 5be1e0e..f2a22fc 100644
--- a/apps/super-admin/src/utils/businessPrimaryColors.ts
+++ b/apps/super-admin/src/utils/businessPrimaryColors.ts
@@ -19,8 +19,28 @@ export type BusinessPrimaryColorTokens = {
   primaryLight: string
   primaryGlow: string
   primaryRgb: string
+  primaryDarkRgb: string
+  /** Second chart series color (red→purple, blue→cyan, …). */
+  chartAccent: string
+  chartAccentDark: string
+  chartAccentRgb: string
+  chartAccentDarkRgb: string
 }
 
+const PURPLE_ACCENT = {
+  chartAccent: '#a855f7',
+  chartAccentDark: '#9333ea',
+  chartAccentRgb: '168 85 247',
+  chartAccentDarkRgb: '147 51 234',
+} as const
+
+const CYAN_ACCENT = {
+  chartAccent: '#06b6d4',
+  chartAccentDark: '#0891b2',
+  chartAccentRgb: '6 182 212',
+  chartAccentDarkRgb: '8 145 178',
+} as const
+
 export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
   BusinessPrimaryColorId,
   BusinessPrimaryColorTokens
@@ -32,6 +52,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryLight: '#fee2e2',
     primaryGlow: '#ef4444',
     primaryRgb: '239 68 68',
+    primaryDarkRgb: '220 38 38',
+    ...PURPLE_ACCENT,
   },
   yellow: {
     label: 'Yellow',
@@ -40,6 +62,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryLight: '#fef9c3',
     primaryGlow: '#eab308',
     primaryRgb: '234 179 8',
+    primaryDarkRgb: '202 138 4',
+    ...PURPLE_ACCENT,
   },
   black: {
     label: 'Black',
@@ -48,6 +72,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryLight: '#e2e8f0',
     primaryGlow: '#334155',
     primaryRgb: '30 41 59',
+    primaryDarkRgb: '15 23 42',
+    ...CYAN_ACCENT,
   },
   cyan: {
     label: 'Cyan',
@@ -56,6 +82,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryLight: '#cffafe',
     primaryGlow: '#06b6d4',
     primaryRgb: '6 182 212',
+    primaryDarkRgb: '8 145 178',
+    ...PURPLE_ACCENT,
   },
   purple: {
     label: 'Purple',
@@ -64,6 +92,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryLight: '#f3e8ff',
     primaryGlow: '#a855f7',
     primaryRgb: '168 85 247',
+    primaryDarkRgb: '147 51 234',
+    ...CYAN_ACCENT,
   },
   'light-blue': {
     label: 'Light Blue',
@@ -72,6 +102,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryLight: '#e0f2fe',
     primaryGlow: '#38bdf8',
     primaryRgb: '56 189 248',
+    primaryDarkRgb: '14 165 233',
+    ...CYAN_ACCENT,
   },
   'dark-blue': {
     label: 'Dark Blue',
@@ -80,6 +112,8 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
     primaryLight: '#dbeafe',
     primaryGlow: '#3b82f6',
     primaryRgb: '59 130 246',
+    primaryDarkRgb: '37 99 235',
+    ...CYAN_ACCENT,
   },
 }
 
@@ -93,3 +127,11 @@ export function normalizeBusinessPrimaryColorId(value: unknown): BusinessPrimary
 
   return DEFAULT_BUSINESS_PRIMARY_COLOR_ID
 }
+
+export function getBusinessPrimaryColorTokens(
+  colorId: BusinessPrimaryColorId | undefined | null,
+): BusinessPrimaryColorTokens {
+  return BUSINESS_PRIMARY_COLOR_PALETTE[
+    normalizeBusinessPrimaryColorId(colorId ?? DEFAULT_BUSINESS_PRIMARY_COLOR_ID)
+  ]
+}
diff --git a/docs/PROJECT_CONTEXT.md b/docs/PROJECT_CONTEXT.md
index 144cbe2..f71e373 100644
--- a/docs/PROJECT_CONTEXT.md
+++ b/docs/PROJECT_CONTEXT.md
@@ -3,7 +3,7 @@
 > **For AI agents:** Read this file at the start of a new chat before making changes.  
 > Update this document when a major feature is completed or architecture changes.
 
-Last updated: July 26, 2026
+Last updated: August 1, 2026
 
 ---
 
@@ -496,11 +496,48 @@ SSL: Certbot cert `meshkee-dashboards` + cron `ssl-sync.sh` every 2h (option A:
 
 ---
 
+## Locale (FA / EN)
+
+Dashboards support **Farsi + English** via shared `LocaleProvider` (`@meshkee/dashboard-ui`) and `LanguageSelect` in headers.
+
+| Piece | Where |
+|-------|--------|
+| Locale state | `packages/dashboard-ui` → `LocaleContext` |
+| Default language per business | `settings.branding.defaultLocale`: `'fa' \| 'en'` (default **`fa`**) |
+| Applied on open | Business + customer `TenantBrandingProvider` once from tenant branding |
+| Super-admin edit | Businesses list **Lang** column + edit modal |
+| Business UI copy | `apps/business/src/i18n/messages.ts` + `useT()` |
+| Customer UI copy | `apps/customer/src/i18n/` (parallel pattern) |
+| Document titles | Locale-aware via `routeTitles` + `useDashboardDocumentTitle` |
+| Fonts | `--font-ui: var(--font-en), var(--font-fa)` — see `.cursor/rules/ui-farsi-fonts.mdc` |
+
+RTL: `dir="rtl"` when locale is `fa`.
+
+---
+
+## Business home dashboard
+
+Home is **not** a 1:1 mirror of the sidebar. Tiles are curated (no Settings tile).
+
+| Feature | Detail |
+|---------|--------|
+| Section cards | Count pill + arrow (settings/website have arrow only); hover fills primary |
+| Counts | Existing list `total` with `pageSize=1` — light, not a new stats join |
+| Charts (6/12 each) | Orders (+ add-to-basket) and Customers (+ active logins), last 30 days |
+| Chart API | `GET .../orders/activity?days=30`, `GET .../customers/activity?days=30` |
+| Chart colors | Primary series = theme primary; accent = purple for red theme, cyan for blue themes (`--chart-accent` from `businessPrimaryColors`) |
+| Page aura | Slow-moving radial blobs on `body::before` (tokens + business `index.css`) |
+
+Products overview page uses the same i18n + theme-aware `ProductActivityChart` (added vs updated, 12 months).
+
+---
+
 ## Suggested next work
 
 - Point `meshkee.com/invoices/*` at the public invoice viewer (proxy or dedicated host)
 - Business-dashboard invoice templates + issue flow (`owner_scope=business`)
-- Migrate business and super-admin to `@meshkee/dashboard-core` / `@meshkee/dashboard-ui`
+- Migrate business and super-admin fully onto `@meshkee/dashboard-core` / `@meshkee/dashboard-ui` (LocaleProvider already shared)
+- Finish FA/EN coverage on remaining business form pages (many labels still English)
 - Connect product comments to backend
 - Wire order status transitions to store `orderProcessSteps`
 - Enforce `onlineSellEnabled` on public website checkout
diff --git a/packages/dashboard-core/src/index.ts b/packages/dashboard-core/src/index.ts
index ade13c6..5b3705f 100644
--- a/packages/dashboard-core/src/index.ts
+++ b/packages/dashboard-core/src/index.ts
@@ -31,6 +31,16 @@ export {
 
 export { applyDocumentFavicon } from './utils/favicon'
 
+export {
+  applyDocumentLocale,
+  DASHBOARD_LOCALE_STORAGE_KEY,
+  getLocaleDirection,
+  isDashboardLocale,
+  readStoredLocale,
+  writeStoredLocale,
+  type DashboardLocale,
+} from './locale/dashboardLocale'
+
 export {
   BUSINESS_SUBDOMAIN_PREFIX,
   CUSTOMER_SUBDOMAIN_PREFIX,
diff --git a/packages/dashboard-core/src/locale/dashboardLocale.ts b/packages/dashboard-core/src/locale/dashboardLocale.ts
new file mode 100644
index 0000000..223553a
--- /dev/null
+++ b/packages/dashboard-core/src/locale/dashboardLocale.ts
@@ -0,0 +1,37 @@
+export type DashboardLocale = 'en' | 'fa'
+
+export const DASHBOARD_LOCALE_STORAGE_KEY = 'meshkee.dashboard.locale'
+
+export function isDashboardLocale(value: unknown): value is DashboardLocale {
+  return value === 'en' || value === 'fa'
+}
+
+export function getLocaleDirection(locale: DashboardLocale): 'ltr' | 'rtl' {
+  return locale === 'fa' ? 'rtl' : 'ltr'
+}
+
+export function applyDocumentLocale(locale: DashboardLocale): void {
+  if (typeof document === 'undefined') return
+  const root = document.documentElement
+  root.lang = locale
+  root.dir = getLocaleDirection(locale)
+}
+
+export function readStoredLocale(fallback: DashboardLocale = 'fa'): DashboardLocale {
+  if (typeof localStorage === 'undefined') return fallback
+  try {
+    const raw = localStorage.getItem(DASHBOARD_LOCALE_STORAGE_KEY)
+    return isDashboardLocale(raw) ? raw : fallback
+  } catch {
+    return fallback
+  }
+}
+
+export function writeStoredLocale(locale: DashboardLocale): void {
+  if (typeof localStorage === 'undefined') return
+  try {
+    localStorage.setItem(DASHBOARD_LOCALE_STORAGE_KEY, locale)
+  } catch {
+    // ignore quota / private mode
+  }
+}
diff --git a/packages/dashboard-core/src/styles/tokens.css b/packages/dashboard-core/src/styles/tokens.css
index ed47db5..8ebabd7 100644
--- a/packages/dashboard-core/src/styles/tokens.css
+++ b/packages/dashboard-core/src/styles/tokens.css
@@ -13,6 +13,10 @@
   --primary-dark: #2563eb;
   --primary-rgb: 59 130 246;
   --primary-dark-rgb: 37 99 235;
+  --chart-accent: #06b6d4;
+  --chart-accent-dark: #0891b2;
+  --chart-accent-rgb: 6 182 212;
+  --chart-accent-dark-rgb: 8 145 178;
   --bg-gradient-start: color-mix(in srgb, var(--primary-light) 72%, #ffffff);
   --bg-gradient-mid: color-mix(in srgb, var(--primary-light) 42%, #ffffff);
   --bg-gradient-end: color-mix(in srgb, var(--primary-light) 18%, #ffffff);
@@ -35,8 +39,10 @@
   --field-padding-y: 9px;
   --field-padding-x: 12px;
   --field-height: 38px;
-  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-en: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-fa: 'IRANYekan', 'IranYekan', 'Yekan', Tahoma, sans-serif;
+  /* Latin → Montserrat first; Arabic/Persian glyphs fall through to --font-fa */
+  --font-ui: var(--font-en), var(--font-fa);
   --card-hover-lift: -4px;
   --card-hover-shadow: 0 16px 48px rgba(var(--primary-rgb) / 0.14);
   --card-hover-transition: transform 0.25s ease, box-shadow 0.25s ease;
@@ -52,18 +58,64 @@ body,
 }
 
 body {
-  font-family: var(--font-en);
+  font-family: var(--font-ui);
   color: var(--text-primary);
   background-color: var(--bg-gradient-mid);
-  background-image:
-    radial-gradient(ellipse 520px 520px at calc(100% - 40px) -60px, rgba(var(--primary-rgb) / 0.28), transparent 72%),
-    radial-gradient(ellipse 420px 420px at 18% calc(100% + 20px), rgba(var(--primary-rgb) / 0.18), transparent 72%),
-    radial-gradient(ellipse 320px 320px at -40px 42%, rgba(var(--primary-rgb) / 0.12), transparent 72%),
-    linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-mid) 50%, var(--bg-gradient-end) 100%);
+  background-image: linear-gradient(
+    135deg,
+    var(--bg-gradient-start) 0%,
+    var(--bg-gradient-mid) 50%,
+    var(--bg-gradient-end) 100%
+  );
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
   -webkit-font-smoothing: antialiased;
+  overflow-x: hidden;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: -30%;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(
+      ellipse 520px 520px at 72% 18%,
+      rgba(var(--primary-rgb) / 0.3),
+      transparent 72%
+    ),
+    radial-gradient(
+      ellipse 420px 420px at 22% 82%,
+      rgba(var(--primary-rgb) / 0.2),
+      transparent 72%
+    ),
+    radial-gradient(
+      ellipse 360px 360px at 8% 42%,
+      rgba(var(--chart-accent-rgb, var(--primary-rgb)) / 0.14),
+      transparent 72%
+    );
+  animation: pageAuraDrift 22s ease-in-out infinite alternate;
+  will-change: transform;
+}
+
+@keyframes pageAuraDrift {
+  0% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3.5%, -2.5%, 0) scale(1.06);
+  }
+  100% {
+    transform: translate3d(-3%, 3.5%, 0) scale(1.04);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  body::before {
+    animation: none;
+  }
 }
 
 /* Interactive glass cards: lift + shadow on hover (no border change) */
@@ -119,7 +171,7 @@ select:focus {
 
 input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
 textarea {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-size: var(--field-font-size);
   outline: none;
   transition: border-color 0.2s, box-shadow 0.2s;
@@ -140,20 +192,20 @@ textarea:focus {
 
 input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])::placeholder,
 textarea::placeholder {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
 }
 
 [dir='rtl'],
 :lang(fa),
 .faText {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-weight: 400;
-  text-align: right;
+  text-align: start;
 }
 
 [dir='rtl']::placeholder,
 :lang(fa)::placeholder,
 .faText::placeholder {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   font-weight: 400;
 }
diff --git a/packages/dashboard-core/src/types/auth.ts b/packages/dashboard-core/src/types/auth.ts
index 776d2de..20ebd9c 100644
--- a/packages/dashboard-core/src/types/auth.ts
+++ b/packages/dashboard-core/src/types/auth.ts
@@ -18,6 +18,8 @@ export interface AuthUser {
   email: string | null
   firstName: string | null
   lastName: string | null
+  firstNameEn: string | null
+  lastNameEn: string | null
   cellVerifiedAt: string | null
   roles: string[]
   dashboard: DashboardType
diff --git a/packages/dashboard-ui/src/components/AddressListEditor.module.css b/packages/dashboard-ui/src/components/AddressListEditor.module.css
index 8e50e34..b912f50 100644
--- a/packages/dashboard-ui/src/components/AddressListEditor.module.css
+++ b/packages/dashboard-ui/src/components/AddressListEditor.module.css
@@ -69,7 +69,7 @@
 }
 
 .selectFieldFa {
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   direction: rtl;
   text-align: right;
 }
diff --git a/packages/dashboard-ui/src/components/AddressListEditor.tsx b/packages/dashboard-ui/src/components/AddressListEditor.tsx
index 4df4c02..a1eab9c 100644
--- a/packages/dashboard-ui/src/components/AddressListEditor.tsx
+++ b/packages/dashboard-ui/src/components/AddressListEditor.tsx
@@ -35,6 +35,23 @@ export function createEmptyAddressItem(): AddressListItem {
 
 export type AddressLocale = 'en' | 'fa'
 
+export type AddressListEditorLabels = {
+  title?: string
+  addLabel?: string
+  loading?: string
+  province?: string
+  city?: string
+  address?: string
+  postalCode?: string
+  landline?: string
+  selectProvince?: string
+  selectCity?: string
+  streetPlaceholder?: string
+  postalPlaceholder?: string
+  landlinePlaceholder?: string
+  removeAriaLabel?: string
+}
+
 export function getLocationOptionLabel(option: CityOption, locale: AddressLocale = 'en') {
   return locale === 'fa' ? option.nameFa : option.nameEn
 }
@@ -72,6 +89,7 @@ type AddressListEditorProps = {
   locale?: AddressLocale
   title?: string
   addLabel?: string
+  labels?: AddressListEditorLabels
 }
 
 export function AddressListEditor({
@@ -85,32 +103,50 @@ export function AddressListEditor({
   disabled = false,
   loading = false,
   locale = 'en',
-  title = 'Saved addresses',
-  addLabel = 'Add address',
+  title,
+  addLabel,
+  labels = {},
 }: AddressListEditorProps) {
   const selectClassName =
     locale === 'fa' ? `${styles.selectField} ${styles.selectFieldFa}` : styles.selectField
 
+  const resolved = {
+    title: labels.title ?? title ?? 'Saved addresses',
+    addLabel: labels.addLabel ?? addLabel ?? 'Add address',
+    loading: labels.loading ?? 'Loading addresses...',
+    province: labels.province ?? 'Province',
+    city: labels.city ?? 'City',
+    address: labels.address ?? 'Address',
+    postalCode: labels.postalCode ?? 'Postal code',
+    landline: labels.landline ?? 'Landline',
+    selectProvince: labels.selectProvince ?? 'Select province',
+    selectCity: labels.selectCity ?? 'Select city',
+    streetPlaceholder: labels.streetPlaceholder ?? 'Street address',
+    postalPlaceholder: labels.postalPlaceholder ?? 'Postal code',
+    landlinePlaceholder: labels.landlinePlaceholder ?? 'Landline',
+    removeAriaLabel: labels.removeAriaLabel ?? 'Remove address',
+  }
+
   return (
     <>
       <div className={styles.sectionHeader}>
-        <h3 className={styles.sectionTitle}>{title}</h3>
+        <h3 className={styles.sectionTitle}>{resolved.title}</h3>
         <button type="button" className={styles.addBtn} onClick={onAdd} disabled={disabled}>
           <Plus size={16} />
-          {addLabel}
+          {resolved.addLabel}
         </button>
       </div>
 
       {loading ? (
-        <p className={styles.helperText}>Loading addresses...</p>
+        <p className={styles.helperText}>{resolved.loading}</p>
       ) : (
         <div className={styles.duplicatorGrid}>
           <div className={styles.gridHeader}>
-            <span>Province</span>
-            <span>City</span>
-            <span>Address</span>
-            <span>Postal code</span>
-            <span>Landline</span>
+            <span>{resolved.province}</span>
+            <span>{resolved.city}</span>
+            <span>{resolved.address}</span>
+            <span>{resolved.postalCode}</span>
+            <span>{resolved.landline}</span>
             <span />
           </div>
 
@@ -127,7 +163,7 @@ export function AddressListEditor({
                   disabled={disabled}
                   onChange={(e) => void onProvinceChange(index, e.target.value)}
                 >
-                  <option value="">Select province</option>
+                  <option value="">{resolved.selectProvince}</option>
                   {provinces.map((province) => (
                     <option key={province.id} value={province.slug}>
                       {getLocationOptionLabel(province, locale)}
@@ -141,7 +177,7 @@ export function AddressListEditor({
                   disabled={disabled || !item.provinceSlug}
                   onChange={(e) => onAddressChange(index, { city: e.target.value })}
                 >
-                  <option value="">Select city</option>
+                  <option value="">{resolved.selectCity}</option>
                   {cities.map((city) => (
                     <option key={city.id} value={getLocationOptionLabel(city, locale)}>
                       {getLocationOptionLabel(city, locale)}
@@ -154,7 +190,7 @@ export function AddressListEditor({
                   value={item.address}
                   disabled={disabled}
                   onChange={(e) => onAddressChange(index, { address: e.target.value })}
-                  placeholder="Street address"
+                  placeholder={resolved.streetPlaceholder}
                 />
 
                 <input
@@ -162,7 +198,7 @@ export function AddressListEditor({
                   value={item.postalCode}
                   disabled={disabled}
                   onChange={(e) => onAddressChange(index, { postalCode: e.target.value })}
-                  placeholder="Postal code"
+                  placeholder={resolved.postalPlaceholder}
                 />
 
                 <input
@@ -170,14 +206,14 @@ export function AddressListEditor({
                   value={item.landline}
                   disabled={disabled}
                   onChange={(e) => onAddressChange(index, { landline: e.target.value })}
-                  placeholder="Landline"
+                  placeholder={resolved.landlinePlaceholder}
                 />
 
                 <button
                   type="button"
                   className={styles.removeBtn}
                   onClick={() => onRemove(index)}
-                  aria-label="Remove address"
+                  aria-label={resolved.removeAriaLabel}
                   disabled={disabled}
                 >
                   <Trash2 size={15} />
diff --git a/packages/dashboard-ui/src/components/LanguageSelect.module.css b/packages/dashboard-ui/src/components/LanguageSelect.module.css
new file mode 100644
index 0000000..126b867
--- /dev/null
+++ b/packages/dashboard-ui/src/components/LanguageSelect.module.css
@@ -0,0 +1,64 @@
+.wrap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  height: 38px;
+  border-radius: 50px;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid var(--glass-border);
+  transition: box-shadow 0.2s, border-color 0.2s;
+}
+
+.wrap:hover,
+.wrap:focus-within {
+  box-shadow: var(--glass-shadow);
+  border-color: rgba(var(--primary-rgb) / 0.25);
+}
+
+.icon {
+  position: absolute;
+  inset-inline-start: 12px;
+  color: var(--text-secondary);
+  pointer-events: none;
+}
+
+.chevron {
+  position: absolute;
+  inset-inline-end: 10px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.select {
+  appearance: none;
+  -webkit-appearance: none;
+  height: 100%;
+  min-width: 72px;
+  padding-block: 0;
+  padding-inline: 34px 28px;
+  border: none;
+  border-radius: 50px;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+  font-family: var(--font-ui);
+  cursor: pointer;
+  outline: none;
+}
+
+.select:focus {
+  outline: none;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/packages/dashboard-ui/src/components/LanguageSelect.tsx b/packages/dashboard-ui/src/components/LanguageSelect.tsx
new file mode 100644
index 0000000..287cd64
--- /dev/null
+++ b/packages/dashboard-ui/src/components/LanguageSelect.tsx
@@ -0,0 +1,33 @@
+import { ChevronDown, Languages } from 'lucide-react'
+import { useLocale } from '../context/LocaleContext'
+import type { DashboardLocale } from '@meshkee/dashboard-core'
+import styles from './LanguageSelect.module.css'
+
+const OPTIONS: { value: DashboardLocale; label: string }[] = [
+  { value: 'en', label: 'EN' },
+  { value: 'fa', label: 'فا' },
+]
+
+export function LanguageSelect() {
+  const { locale, setLocale } = useLocale()
+
+  return (
+    <label className={styles.wrap}>
+      <span className={styles.srOnly}>Language</span>
+      <Languages size={16} className={styles.icon} aria-hidden />
+      <select
+        className={styles.select}
+        value={locale}
+        onChange={(e) => setLocale(e.target.value as DashboardLocale)}
+        aria-label="Language"
+      >
+        {OPTIONS.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <ChevronDown size={14} className={styles.chevron} aria-hidden />
+    </label>
+  )
+}
diff --git a/packages/dashboard-ui/src/components/PasswordResetModal.module.css b/packages/dashboard-ui/src/components/PasswordResetModal.module.css
index 27e4dd2..fdf2012 100644
--- a/packages/dashboard-ui/src/components/PasswordResetModal.module.css
+++ b/packages/dashboard-ui/src/components/PasswordResetModal.module.css
@@ -60,7 +60,7 @@
   min-height: var(--field-height);
   padding: var(--field-padding-y) var(--field-padding-x);
   font-size: var(--field-font-size);
-  font-family: var(--font-fa), var(--font-en);
+  font-family: var(--font-ui);
   line-height: 1.4;
   color: var(--text-primary);
   background: rgba(255, 255, 255, 0.75);
diff --git a/packages/dashboard-ui/src/components/SectionCard.module.css b/packages/dashboard-ui/src/components/SectionCard.module.css
index 355b3ce..179c3a2 100644
--- a/packages/dashboard-ui/src/components/SectionCard.module.css
+++ b/packages/dashboard-ui/src/components/SectionCard.module.css
@@ -75,3 +75,11 @@
   color: white;
   transform: translateX(2px);
 }
+
+:global([dir='rtl']) .arrowBtn {
+  transform: scaleX(-1);
+}
+
+:global([dir='rtl']) .card:hover .arrowBtn {
+  transform: scaleX(-1) translateX(2px);
+}
diff --git a/packages/dashboard-ui/src/context/LocaleContext.tsx b/packages/dashboard-ui/src/context/LocaleContext.tsx
new file mode 100644
index 0000000..ec9b18a
--- /dev/null
+++ b/packages/dashboard-ui/src/context/LocaleContext.tsx
@@ -0,0 +1,66 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+import {
+  applyDocumentLocale,
+  getLocaleDirection,
+  readStoredLocale,
+  writeStoredLocale,
+  type DashboardLocale,
+} from '@meshkee/dashboard-core'
+
+interface LocaleContextValue {
+  locale: DashboardLocale
+  dir: 'ltr' | 'rtl'
+  isRtl: boolean
+  setLocale: (locale: DashboardLocale) => void
+}
+
+const LocaleContext = createContext<LocaleContextValue | null>(null)
+
+export function LocaleProvider({
+  children,
+  defaultLocale = 'fa',
+}: {
+  children: ReactNode
+  defaultLocale?: DashboardLocale
+}) {
+  const [locale, setLocaleState] = useState<DashboardLocale>(() =>
+    readStoredLocale(defaultLocale),
+  )
+
+  useEffect(() => {
+    applyDocumentLocale(locale)
+    writeStoredLocale(locale)
+  }, [locale])
+
+  const setLocale = useCallback((next: DashboardLocale) => {
+    setLocaleState(next)
+  }, [])
+
+  const value = useMemo<LocaleContextValue>(() => {
+    const dir = getLocaleDirection(locale)
+    return {
+      locale,
+      dir,
+      isRtl: dir === 'rtl',
+      setLocale,
+    }
+  }, [locale, setLocale])
+
+  return <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
+}
+
+export function useLocale(): LocaleContextValue {
+  const context = useContext(LocaleContext)
+  if (!context) {
+    throw new Error('useLocale must be used within LocaleProvider')
+  }
+  return context
+}
diff --git a/packages/dashboard-ui/src/index.ts b/packages/dashboard-ui/src/index.ts
index fb19abd..5b28ebe 100644
--- a/packages/dashboard-ui/src/index.ts
+++ b/packages/dashboard-ui/src/index.ts
@@ -4,6 +4,7 @@ export {
   getLocationOptionLabel,
   matchCityByName,
   matchProvinceByName,
+  type AddressListEditorLabels,
   type AddressListItem,
   type AddressLocale,
   type CityOption,
@@ -20,4 +21,6 @@ export {
   type ChangePasswordHandler,
   type PasswordResetModalProps,
 } from './components/PasswordResetModal'
+export { LanguageSelect } from './components/LanguageSelect'
+export { LocaleProvider, useLocale } from './context/LocaleContext'
 export { useDashboardDocumentTitle } from './hooks/useDashboardDocumentTitle'