Polish dashboard page chrome and user access UI.

Rename Customers to Users with FA/EN titles, compact headers and filter bars across apps, and refine manager role copy plus a customer-header link to the business dashboard.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/BlogCategoriesPage.tsx

@@ -3,6 +3,7 @@ import { Plus } from 'lucide-react'
 import { CategoryModal } from '../components/CategoryModal'
 import { BlogCategoryTree } from '../components/BlogCategoryTree'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import type { Category, CategoryFormData } from '../types/category'
 import { ApiError } from '../lib/api'
@@ -159,7 +160,7 @@ export function BlogCategoriesPage() {
       />
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('blog.categories.title')}</h2>
+          <PageTitle en="BLOG CATEGORIES">{t('blog.categories.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('blog.categories.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/BlogDetailsPage.tsx

@@ -117,7 +117,7 @@ export function BlogDetailsPage() {
           </h2>
           {blog.abstract ? (
             <p
-              className={[pageStyles.pageSubtitle, abstractLocale.className]
+              className={[pageStyles.pageSubtitleContent, abstractLocale.className]
                 .filter(Boolean)
                 .join(' ')}
               lang={abstractLocale.lang}

apps/business/src/pages/BlogListPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { FileText, Plus } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { BlogCard } from '../components/BlogCard'
 import { BlogCommentsModal } from '../components/BlogCommentsModal'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
@@ -164,7 +165,7 @@ export function BlogListPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.myBlogs')}</h2>
+          <PageTitle en="BLOGS">{t('title.myBlogs')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>
             {t('blog.list.subtitle', { count: totalBlogs })}
           </p>

apps/business/src/pages/BlogPage.tsx

@@ -1,6 +1,7 @@
 import { FileText, PlusCircle, FolderTree, Settings } from 'lucide-react'
 import { SectionCard } from '../components/SectionCard'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { useT } from '../i18n/useT'
 import type { BusinessMessageKey } from '../i18n/messages'
 import styles from '../components/PageContent.module.css'
@@ -55,7 +56,7 @@ export function BlogPage() {
       />
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>{t('title.blog')}</h2>
+          <PageTitle en="BLOG">{t('title.blog')}</PageTitle>
           <p className={styles.pageSubtitle}>{t('blog.page.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/BlogSettingsPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { Switch } from '../components/Switch'
 import { useToast } from '../context/ToastContext'
 import { useT } from '../i18n/useT'
@@ -83,7 +84,7 @@ export function BlogSettingsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('blog.settings.title')}</h2>
+          <PageTitle en="BLOG SETTINGS">{t('blog.settings.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('blog.settings.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/BrandsPage.tsx

@@ -4,6 +4,7 @@ import { useToast } from '../context/ToastContext'
 import { BrandModal } from '../components/BrandModal'
 import { BrandRow } from '../components/BrandRow'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import type { Brand, BrandFormData } from '../types/brand'
 import { ApiError } from '../lib/api'
@@ -142,7 +143,7 @@ export function BrandsPage() {
       />
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.brands')}</h2>
+          <PageTitle en="BRANDS">{t('title.brands')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('brands.page.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/BusinessProfilePage.tsx

@@ -10,6 +10,7 @@ import {
   type AddressListItem,
 } from '@meshkee/dashboard-ui'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ImageCropper } from '../components/ImageCropper'
 import { MultiSelectDropdown } from '../components/MultiSelectDropdown'
 import { RichTextEditor } from '../components/RichTextEditor'
@@ -340,7 +341,7 @@ export function BusinessProfilePage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.businessProfile')}</h2>
+          <PageTitle en="BUSINESS PROFILE">{t('title.businessProfile')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('bizProfile.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/CategoriesPage.tsx

@@ -5,6 +5,7 @@ import { CategoryModal } from '../components/CategoryModal'
 import { CategoryAiPromptModal } from '../components/CategoryAiPromptModal'
 import { CategoryTree } from '../components/CategoryTree'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { VariationsModal } from '../components/VariationsModal'
 import { TechnicalFormModal } from '../components/TechnicalFormModal'
@@ -427,7 +428,7 @@ export function CategoriesPage() {
       />
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.categories')}</h2>
+          <PageTitle en="CATEGORIES">{t('title.categories')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('categories.page.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/CustomerProductDetailsPage.tsx

@@ -3,6 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'
 import { ImageOff, MapPin, Pencil, User } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { UserProductStatusModal } from '../components/UserProductStatusModal'
 import { useToast } from '../context/ToastContext'
 import { useT } from '../i18n/useT'
@@ -197,8 +198,8 @@ export function CustomerProductDetailsPage() {
 
       <div className={styles.headerRow}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('customerProducts.detailsTitle')}</h2>
-          <p className={pageStyles.pageSubtitle}>{t('customerProducts.detailsSubtitle')}</p>
+          <PageTitle en="CUSTOMER PRODUCT">{t('customerProducts.detailsTitle')}</PageTitle>
+          <p className={pageStyles.pageSubtitleContent}>{t('customerProducts.detailsSubtitle')}</p>
         </div>
         <div className={styles.actions}>
           <button

apps/business/src/pages/CustomerProductsPage.tsx

@@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'
 import { Package, Plus } from 'lucide-react'
 import { Pagination } from '@meshkee/dashboard-ui'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { UserProductCard } from '../components/UserProductCard'
 import { UserProductStatusModal } from '../components/UserProductStatusModal'
 import { useToast } from '../context/ToastContext'
@@ -174,7 +175,7 @@ export function CustomerProductsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('customerProducts.title')}</h2>
+          <PageTitle en="CUSTOMER PRODUCTS">{t('customerProducts.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>
             {t('customerProducts.subtitle', { count: total })}
           </p>

apps/business/src/pages/CustomersPage.module.css

@@ -1,11 +1,3 @@
-.pageHeaderCompact {
-  margin-bottom: 12px;
-}
-
-.pageHeaderCompact :global(h2) {
-  margin-bottom: 0;
-}
-
 .tablePanel {
   margin-top: 12px;
   padding: 0;
@@ -26,7 +18,7 @@
   padding: 12px 16px;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-end;
   border-bottom: 1px solid rgba(148, 163, 184, 0.2);
 }
 
@@ -49,23 +41,27 @@
 }
 
 .colName {
-  width: 22%;
+  width: 18%;
+}
+
+.colRole {
+  width: 16%;
 }
 
 .colCell {
-  width: 14%;
+  width: 13%;
 }
 
 .colOrders {
-  width: 12%;
+  width: 10%;
 }
 
 .colTransactions {
-  width: 14%;
+  width: 12%;
 }
 
 .colDate {
-  width: 12%;
+  width: 11%;
 }
 
 .colActions {

apps/business/src/pages/CustomersPage.tsx

@@ -6,6 +6,7 @@ import { Breadcrumbs } from '../components/Breadcrumbs'
 import { ChangeUserAccessModal } from '../components/ChangeUserAccessModal'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { EditCustomerModal } from '../components/EditCustomerModal'
+import { PageTitle } from '../components/PageTitle'
 import { Pagination } from '../components/Pagination'
 import { ToggleSwitch } from '../components/ToggleSwitch'
 import { Tooltip } from '../components/Tooltip'
@@ -32,7 +33,7 @@ import accessStyles from '../components/ChangeUserAccessModal.module.css'
 import styles from './CustomersPage.module.css'
 
 const PAGE_SIZE = 24
-const COLUMN_COUNT = 6
+const COLUMN_COUNT = 7
 
 function formatDate(value: string, locale: 'en' | 'fa') {
   const d = new Date(value)
@@ -53,13 +54,13 @@ function formatTransactionTotal(total: number | null | undefined) {
   return formatIrtPrice(total)
 }
 
-function accessBadgeKey(user: BusinessCustomerListItem): BusinessMessageKey | null {
+function accessBadgeKey(user: BusinessCustomerListItem): BusinessMessageKey {
   if (user.isBusinessOwner) return 'customers.access.badge.owner'
   if (user.teamRole === 'admin') return 'customers.access.badge.admin'
   if (user.teamRole === 'editor') return 'customers.access.badge.editor'
   if (user.teamRole === 'viewer') return 'customers.access.badge.viewer'
   if (user.businessMemberId) return 'customers.access.badge.manager'
-  return null
+  return 'customers.access.customer'
 }
 
 function teamRoleMessageKey(teamRole: string): BusinessMessageKey {
@@ -310,15 +311,13 @@ export function CustomersPage() {
     <main className={pageStyles.content}>
       <Breadcrumbs
         items={[
-          { label: 'Home', href: '/' },
-          { label: 'Customers' },
+          { label: t('nav.home'), href: '/' },
+          { label: t('customers.title') },
         ]}
       />
 
-      <div className={`${pageStyles.pageHeader} ${styles.pageHeaderCompact}`}>
-        <div>
-          <h2 className={pageStyles.pageTitle}>{t('customers.title')}</h2>
-        </div>
+      <div className={pageStyles.pageHeader}>
+        <PageTitle en="USERS">{t('customers.title')}</PageTitle>
       </div>
 
       <div className={filterStyles.filtersPanel}>
@@ -384,7 +383,6 @@ export function CustomersPage() {
       <div className={styles.tablePanel}>
         <div className={styles.tableWrap}>
           <div className={styles.tableHeader}>
-            <div className={styles.tableHeaderTitle}>{t('customers.listTitle')}</div>
             <div className={styles.meta}>
               {data ? (
                 data.total > 0 ? (
@@ -410,6 +408,7 @@ export function CustomersPage() {
           >
             <colgroup>
               <col className={styles.colName} />
+              <col className={styles.colRole} />
               <col className={styles.colCell} />
               <col className={styles.colOrders} />
               <col className={styles.colTransactions} />
@@ -419,6 +418,7 @@ export function CustomersPage() {
             <thead>
               <tr>
                 <th className={styles.th}>{t('customers.col.name')}</th>
+                <th className={styles.th}>{t('customers.col.role')}</th>
                 <th className={styles.th}>{t('customers.col.cell')}</th>
                 <th className={styles.th}>{t('customers.col.orders')}</th>
                 <th className={styles.th}>{t('customers.col.transactions')}</th>
@@ -468,13 +468,13 @@ export function CustomersPage() {
                         >
                           {name}
                         </div>
-                        {badgeKey ? (
-                          <span className={accessStyles.roleBadge}>{t(badgeKey)}</span>
-                        ) : null}
                         {!customer.isEnabled && (
                           <div className={styles.statusDisabled}>{t('customers.disabled')}</div>
                         )}
                       </td>
+                      <td className={styles.td}>
+                        <span className={accessStyles.roleBadge}>{t(badgeKey)}</span>
+                      </td>
                       <td className={styles.td}>{formatCellForDisplay(customer.cellNumber)}</td>
                       <td className={styles.td}>
                         {customer.orderCount == null || customer.orderCount === 0 ? (

apps/business/src/pages/MyProductsPage.tsx

@@ -9,6 +9,7 @@ import { ProductVariantsModal } from '../components/ProductVariantsModal'
 import { ProductTechnicalInfoModal } from '../components/ProductTechnicalInfoModal'
 import { ProductCommentsModal } from '../components/ProductCommentsModal'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
 import {
@@ -201,7 +202,7 @@ export function MyProductsPage() {
       />
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.myProducts')}</h2>
+          <PageTitle en="PRODUCTS">{t('title.myProducts')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>
             {t('products.list.subtitle', { count: totalProducts })}
           </p>

apps/business/src/pages/OrdersPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { CreditCard, Eye, RotateCcw, Search, Trash2 } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { OrderItemsModal } from '../components/OrderItemsModal'
 import { OrderStepModal } from '../components/OrderStepModal'
@@ -314,7 +315,7 @@ export function OrdersPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('orders.title')}</h2>
+          <PageTitle en="ORDERS">{t('orders.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('orders.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/PortfolioCategoriesPage.tsx

@@ -3,6 +3,7 @@ import { Plus } from 'lucide-react'
 import { CategoryModal } from '../components/CategoryModal'
 import { BlogCategoryTree } from '../components/BlogCategoryTree'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import type { Category, CategoryFormData } from '../types/category'
 import { ApiError } from '../lib/api'
@@ -159,7 +160,7 @@ export function PortfolioCategoriesPage() {
       />
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('portfolio.categories.title')}</h2>
+          <PageTitle en="PORTFOLIO CATEGORIES">{t('portfolio.categories.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('portfolio.categories.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/PortfolioDetailsPage.tsx

@@ -101,7 +101,7 @@ export function PortfolioDetailsPage() {
           <div>
             <h2 className={pageStyles.pageTitle}>{portfolio.title}</h2>
             {portfolio.abstract && (
-              <p className={pageStyles.pageSubtitle}>{portfolio.abstract}</p>
+              <p className={pageStyles.pageSubtitleContent}>{portfolio.abstract}</p>
             )}
           </div>
         </div>

apps/business/src/pages/PortfolioListPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Plus } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { PortfolioCard } from '../components/PortfolioCard'
 import { PortfolioCommentsModal } from '../components/PortfolioCommentsModal'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
@@ -172,7 +173,7 @@ export function PortfolioListPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.myPortfolios')}</h2>
+          <PageTitle en="PORTFOLIOS">{t('title.myPortfolios')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>
             {t('portfolio.list.subtitle', { count: totalPortfolios })}
           </p>

apps/business/src/pages/PortfolioSettingsPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { Switch } from '../components/Switch'
 import { useToast } from '../context/ToastContext'
 import { useT } from '../i18n/useT'
@@ -83,7 +84,7 @@ export function PortfolioSettingsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('portfolio.settings.title')}</h2>
+          <PageTitle en="PORTFOLIO SETTINGS">{t('portfolio.settings.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('portfolio.settings.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/PortfoliosPage.tsx

@@ -1,6 +1,7 @@
 import { Briefcase, PlusCircle, FolderTree, Settings } from 'lucide-react'
 import { SectionCard } from '../components/SectionCard'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { useT } from '../i18n/useT'
 import type { BusinessMessageKey } from '../i18n/messages'
 import styles from '../components/PageContent.module.css'
@@ -55,7 +56,7 @@ export function PortfoliosPage() {
       />
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>{t('title.portfolios')}</h2>
+          <PageTitle en="PORTFOLIOS">{t('title.portfolios')}</PageTitle>
           <p className={styles.pageSubtitle}>{t('portfolio.page.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/ProductSettingsPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { Switch } from '../components/Switch'
 import { useToast } from '../context/ToastContext'
 import { useT } from '../i18n/useT'
@@ -104,7 +105,7 @@ export function ProductSettingsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('productSettings.title')}</h2>
+          <PageTitle en="PRODUCT SETTINGS">{t('productSettings.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('productSettings.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/ProductsPage.tsx

@@ -2,6 +2,7 @@ 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 { PageTitle } from '../components/PageTitle'
 import { useT } from '../i18n/useT'
 import type { BusinessMessageKey } from '../i18n/messages'
 import styles from '../components/PageContent.module.css'
@@ -57,7 +58,7 @@ export function ProductsPage() {
       />
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>{t('title.products')}</h2>
+          <PageTitle en="PRODUCTS">{t('title.products')}</PageTitle>
           <p className={styles.pageSubtitle}>{t('products.overview.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/ProfilePage.tsx

@@ -10,6 +10,7 @@ import {
   type AddressListItem,
 } from '@meshkee/dashboard-ui'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import pageStyles from '../components/PageContent.module.css'
 import { useAuth } from '../context/AuthContext'
 import { useToast } from '../context/ToastContext'
@@ -289,7 +290,7 @@ export function ProfilePage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('profile.title')}</h2>
+          <PageTitle en="PROFILE">{t('profile.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('profile.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/ShoppingCardsPage.tsx

@@ -3,6 +3,7 @@ import { Play, RotateCcw, Search, Trash2 } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { Pagination } from '../components/Pagination'
 import { Tooltip } from '../components/Tooltip'
@@ -202,7 +203,7 @@ export function ShoppingCardsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('shoppingCards.title')}</h2>
+          <PageTitle en="SHOPPING CARDS">{t('shoppingCards.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('shoppingCards.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/StoreItemsPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { Plus, RotateCcw, Search } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { CreateStoreItemsModal } from '../components/CreateStoreItemsModal'
 import { EditStoreItemsModal } from '../components/EditStoreItemsModal'
@@ -282,7 +283,7 @@ function StoreItemsPageContent() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.storeItems')}</h2>
+          <PageTitle en="STORE ITEMS">{t('title.storeItems')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('storeItems.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/StorePage.tsx

@@ -7,6 +7,7 @@ import {
 } from 'lucide-react'
 import { SectionCard } from '../components/SectionCard'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { useT } from '../i18n/useT'
 import type { BusinessMessageKey } from '../i18n/messages'
 import styles from '../components/PageContent.module.css'
@@ -62,7 +63,7 @@ export function StorePage() {
       />
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>{t('title.store')}</h2>
+          <PageTitle en="STORE">{t('title.store')}</PageTitle>
           <p className={styles.pageSubtitle}>{t('store.page.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/StoreSettingsPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { ChevronDown, ChevronUp, Plus, Trash2 } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { StepColorPicker } from '../components/StepColorPicker'
 import { Switch } from '../components/Switch'
 import { Tooltip } from '../components/Tooltip'
@@ -215,7 +216,7 @@ export function StoreSettingsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('storeSettings.title')}</h2>
+          <PageTitle en="STORE SETTINGS">{t('storeSettings.title')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('storeSettings.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/StoreSpecialsPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Plus } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { EditStoreItemsModal } from '../components/EditStoreItemsModal'
 import { PickStoreSpecialItemsModal } from '../components/PickStoreSpecialItemsModal'
@@ -311,7 +312,7 @@ export function StoreSpecialsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.specialItems')}</h2>
+          <PageTitle en="SPECIAL ITEMS">{t('title.specialItems')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('website.specialItems.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/WebsiteContactPage.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from 'react'
 import { RotateCcw, Search } from 'lucide-react'
 import { useLocale } from '@meshkee/dashboard-ui'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ContactSubmissionDetailModal } from '../components/ContactSubmissionDetailModal'
 import { Pagination } from '../components/Pagination'
 import { useT } from '../i18n/useT'
@@ -112,7 +113,7 @@ export function WebsiteContactPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.contactForm')}</h2>
+          <PageTitle en="CONTACT">{t('title.contactForm')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('website.contact.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/WebsitePage.tsx

@@ -11,6 +11,7 @@ import {
 } from 'lucide-react'
 import { SectionCard } from '../components/SectionCard'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { useT } from '../i18n/useT'
 import type { BusinessMessageKey } from '../i18n/messages'
 import styles from '../components/PageContent.module.css'
@@ -100,7 +101,7 @@ export function WebsitePage() {
       />
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>{t('title.website')}</h2>
+          <PageTitle en="WEBSITE">{t('title.website')}</PageTitle>
           <p className={styles.pageSubtitle}>{t('website.page.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/WebsiteSlidersPage.tsx

@@ -4,6 +4,7 @@ import {
   type WebsiteSliderSlideFormData,
 } from '../components/AddWebsiteSliderSlideModal'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { WebsiteSliderGallery } from '../components/WebsiteSliderGallery'
 import { useToast } from '../context/ToastContext'
@@ -138,7 +139,7 @@ export function WebsiteSlidersPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.sliders')}</h2>
+          <PageTitle en="SLIDERS">{t('title.sliders')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('website.sliders.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/WebsiteSpecialBrandsPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Plus } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { PickWebsiteBrandsModal } from '../components/PickWebsiteBrandsModal'
 import { StoreSpecialModal } from '../components/StoreSpecialModal'
@@ -204,7 +205,7 @@ export function WebsiteSpecialBrandsPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.specialBrands')}</h2>
+          <PageTitle en="SPECIAL BRANDS">{t('title.specialBrands')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('website.specialBrands.subtitle')}</p>
         </div>
       </div>

apps/business/src/pages/WebsiteSpecialCategoriesPage.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Plus } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
+import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { PickWebsiteCategoriesModal } from '../components/PickWebsiteCategoriesModal'
 import { StoreSpecialModal } from '../components/StoreSpecialModal'
@@ -204,7 +205,7 @@ export function WebsiteSpecialCategoriesPage() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <h2 className={pageStyles.pageTitle}>{t('title.specialCategories')}</h2>
+          <PageTitle en="SPECIAL CATEGORIES">{t('title.specialCategories')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('website.specialCategories.subtitle')}</p>
         </div>
       </div>