From a5e458ed25721ab597e67cdefb2a1cb06873b4a2 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Sun, 14 Jun 2026 10:08:46 +0330
Subject: [PATCH 1/3] Split desktop and mobile layouts with shared page data so
 APIs fetch once per context.

Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components.d.ts                               |   2 +
 index.html                                    |  33 +
 src/App.vue                                   | 122 +--
 src/assets/css/boursecu-theme.less            |   5 +
 src/assets/css/main.less                      |  47 +-
 src/components/ListAnim.vue                   |  11 +-
 src/components/SupportContactBar.vue          |  38 +
 src/composables/useOnceAsync.ts               |  44 ++
 src/composables/useProductsCatalog.ts         |  32 +
 src/composables/useWalletAssets.ts            |   6 +-
 src/config-loader.js                          |  10 +
 src/layouts/AppLayoutShell.vue                |  12 +
 src/layouts/components/ResponsiveViewPair.vue |  47 ++
 src/layouts/composables/useAppLayout.ts       |  34 +
 src/layouts/composables/useAppNavigation.ts   |  43 ++
 .../composables/useResponsiveLayout.ts        |  21 +
 src/layouts/config/navigation.ts              |  29 +
 src/layouts/constants.ts                      |   4 +
 src/layouts/desktop/DesktopAppLayout.vue      |  40 +
 src/layouts/desktop/DesktopNavItem.vue        |  25 +
 src/layouts/desktop/DesktopSidebar.vue        |  55 ++
 src/layouts/desktop/desktop-layout.less       | 157 ++++
 .../desktop/styles/desktop-page-common.less   |  83 ++
 src/layouts/mobile/MobileAppLayout.vue        |  57 ++
 src/layouts/mobile/MobileBottomNav.vue        | 107 +++
 src/layouts/mobile/MobileOverflowMenu.vue     |  53 ++
 src/layouts/mobile/mobile-layout.less         | 145 ++++
 src/layouts/styles/desktop-shell.less         | 126 +++
 src/layouts/styles/mobile-frame.less          |  84 ++
 src/layouts/types.ts                          |   6 +
 src/store/settingsStore.ts                    |  24 +-
 src/utils/config.ts                           |  15 +-
 src/utils/persianDigits.ts                    |  29 +
 src/utils/productAssets.ts                    |   1 +
 src/utils/productPrice.ts                     |  28 +-
 .../about/components/AboutSectionsContent.vue |  67 ++
 .../about/components/AboutSupportActions.vue  |  41 +
 .../base/about/composables/useAboutPage.ts    |  48 ++
 .../base/about/desktop/DesktopAboutView.vue   |  50 ++
 .../about/desktop/styles/desktop-about.less   | 234 ++++++
 src/views/base/about/index.vue                | 176 +----
 .../base/about/mobile/MobileAboutView.vue     |  31 +
 .../components/AboutUsContentPanel.vue        |  55 ++
 .../aboutUs/composables/useAboutUsPage.ts     |  27 +
 .../aboutUs/desktop/DesktopAboutUsView.vue    |  41 +
 .../desktop/styles/desktop-about-us.less      | 168 ++++
 src/views/base/aboutUs/index.vue              |  66 +-
 .../base/aboutUs/mobile/MobileAboutUsView.vue |  29 +
 .../base/address/components/AddressForm.vue   | 101 +++
 .../address/components/AddressMobileItem.vue  |  94 +++
 src/views/base/address/components/Item.vue    | 221 +++---
 .../address/composables/useAddressPage.ts     | 145 ++++
 .../address/composables/useAddressPageData.ts |  82 ++
 .../address/desktop/DesktopAddressView.vue    |  86 +++
 .../desktop/styles/desktop-address.less       | 307 ++++++++
 src/views/base/address/index.vue              | 275 +------
 .../base/address/mobile/MobileAddressView.vue |  72 ++
 .../earnMoney/composables/useEarnMoneyPage.ts |  90 +++
 .../desktop/DesktopEarnMoneyView.vue          | 121 +++
 .../desktop/styles/desktop-earn-money.less    | 244 ++++++
 src/views/base/earnMoney/index.vue            | 163 +---
 .../earnMoney/mobile/MobileEarnMoneyView.vue  | 101 +++
 .../components/EducateContentPanel.vue        | 103 +++
 .../components/EducateSupportActions.vue      |  43 ++
 .../educate/composables/useEducatePage.ts     | 105 +++
 .../educate/desktop/DesktopEducateView.vue    |  52 ++
 .../desktop/styles/desktop-educate.less       | 231 ++++++
 src/views/base/educate/index.vue              | 208 +----
 .../base/educate/mobile/MobileEducateView.vue |  27 +
 src/views/base/fund/components/Item.vue       |  11 +-
 .../base/fund/composables/useFundPage.ts      | 119 +++
 .../base/fund/desktop/DesktopFundView.vue     | 138 ++++
 .../fund/desktop/styles/desktop-fund.less     | 495 ++++++++++++
 src/views/base/fund/index.vue                 | 171 +----
 .../fund/info/components/FundEditActions.vue  |  48 ++
 .../info/components/FundTransactionForm.vue   |  82 ++
 .../fund/info/composables/useFundInfoPage.ts  | 185 +++++
 .../fund/info/desktop/DesktopFundInfoView.vue |  78 ++
 src/views/base/fund/info/index.vue            | 346 ++-------
 .../fund/info/mobile/MobileFundInfoView.vue   |  63 ++
 src/views/base/fund/mobile/MobileFundView.vue | 161 ++++
 .../newFund/composables/useFundNewPage.ts     | 117 +++
 .../newFund/desktop/DesktopFundNewView.vue    |  81 ++
 src/views/base/fund/newFund/index.vue         | 199 +----
 .../fund/newFund/mobile/MobileFundNewView.vue |  74 ++
 .../base/giftCard/components/GiftCardForm.vue |  52 ++
 .../giftCard/composables/useGiftCardPage.ts   |  58 ++
 .../giftCard/desktop/DesktopGiftCardView.vue  |  50 ++
 .../desktop/styles/desktop-gift-card.less     | 186 +++++
 src/views/base/giftCard/index.vue             |  80 +-
 .../giftCard/mobile/MobileGiftCardView.vue    |  18 +
 .../gold/desktop/styles/desktop-gold.less     |  79 ++
 src/views/base/gold/index.vue                 |  66 +-
 src/views/base/home/components/AppHeader.vue  |  71 +-
 .../base/home/components/AssetsSection.vue    |  47 +-
 .../base/home/components/BalanceSheet.vue     |   6 +-
 .../home/components/HomeQuickActionBox.vue    |  41 +
 .../base/home/components/HomeSkeleton.vue     | 101 ++-
 src/views/base/home/components/PriceChart.vue | 259 +++++--
 src/views/base/home/components/PriceStats.vue |  22 +-
 .../base/home/components/ReferralSection.vue  | 131 +++-
 src/views/base/home/components/ShareModal.vue |  13 +-
 src/views/base/home/composables/useBanners.ts |  95 ++-
 .../base/home/composables/useHomePage.ts      | 237 ++++++
 .../base/home/composables/useHomePageData.ts  |  76 ++
 .../base/home/composables/usePriceChart.ts    | 246 +++++-
 .../base/home/composables/useUserFunds.ts     |  64 +-
 .../base/home/desktop/HomeDesktopView.vue     |  17 +
 .../desktop/components/DesktopAssetsCard.vue  |  38 +
 .../components/DesktopAssetsMetrics.vue       | 111 +++
 .../components/DesktopBannersPanel.vue        |  20 +
 .../desktop/components/DesktopChartPanel.vue  |  27 +
 .../components/DesktopChartSection.vue        |  27 +
 .../components/DesktopDefaultActions.vue      |  32 +
 .../components/DesktopGaroosiAssets.vue       |  30 +
 .../desktop/components/DesktopHomeAlerts.vue  |  36 +
 .../desktop/components/DesktopHomeCard.vue    |  12 +
 .../desktop/components/DesktopHomeHeader.vue  |  49 ++
 .../desktop/components/DesktopHomeSection.vue |  15 +
 .../desktop/components/DesktopHomeShell.vue   |  15 +
 .../desktop/components/DesktopHomeTopbar.vue  |  43 ++
 .../desktop/components/DesktopLivePrice.vue   |  46 ++
 .../components/DesktopPriceOverview.vue       |  32 +
 .../desktop/components/DesktopPriceRange.vue  |  28 +
 .../components/DesktopQuickActionsGrid.vue    |  40 +
 .../components/DesktopQuickActionsPanel.vue   |  42 +
 .../components/DesktopReferralPanel.vue       |  14 +
 .../desktop/layouts/BoursecuDesktopHome.vue   |  51 ++
 .../desktop/layouts/DefaultDesktopHome.vue    |  68 ++
 .../home/desktop/styles/desktop-home.less     | 516 +++++++++++++
 src/views/base/home/index.vue                 | 306 +-------
 .../base/home/layouts/HomeLayoutRenderer.vue  |  56 ++
 .../base/home/layouts/configs/boursecu.ts     |  21 +
 .../layouts/configs/boursecuQuickActions.ts   |  40 +
 .../base/home/layouts/configs/default.ts      |  19 +
 src/views/base/home/layouts/registry.ts       |  47 ++
 .../layouts/sections/AssetsSectionBlock.vue   |  16 +
 .../home/layouts/sections/BannersSection.vue  |  15 +
 .../sections/BoursecuQuickActionsSection.vue  |  30 +
 .../layouts/sections/CurrentPriceSection.vue  |   7 +
 .../layouts/sections/GaroosiAssetsSection.vue |  23 +
 .../sections/LimitedPriceAlertSection.vue     |  28 +
 .../layouts/sections/MainActionsSection.vue   |  20 +
 .../layouts/sections/MarketClosedSection.vue  |  14 +
 .../layouts/sections/PriceChartSection.vue    |  22 +
 .../layouts/sections/PriceStatsSection.vue    |  13 +
 .../layouts/sections/ReferralSectionBlock.vue |  11 +
 src/views/base/home/layouts/sections/index.ts |  31 +
 src/views/base/home/layouts/types.ts          |  41 +
 src/views/base/home/mobile/MobileHomeView.vue |  23 +
 src/views/base/home/shell/HomePageShell.vue   |  17 +
 src/views/base/index.vue                      | 450 +----------
 .../physicalReceive/components/NewRequest.vue | 226 +-----
 .../PhysicalReceiveAddressPicker.vue          |  51 ++
 .../components/PhysicalReceiveCartRow.vue     |  78 ++
 .../components/RequestItem.vue                |  63 +-
 .../components/RequestList.vue                |  38 +-
 .../composables/useNewPhysicalRequestPage.ts  | 153 ++++
 .../composables/usePhysicalReceiveList.ts     |  37 +
 .../composables/usePhysicalReceiveShell.ts    |  23 +
 .../desktop/DesktopNewRequestView.vue         | 119 +++
 .../desktop/DesktopPhysicalReceiveChrome.vue  |  32 +
 .../desktop/DesktopRequestListView.vue        |  36 +
 .../styles/desktop-physical-receive.less      | 301 ++++++++
 src/views/base/physicalReceive/index.vue      |  51 +-
 .../mobile/MobileNewRequestView.vue           |  76 ++
 .../mobile/MobilePhysicalReceiveChrome.vue    |  21 +
 .../mobile/MobileRequestListView.vue          |  23 +
 .../base/priceTrigger/components/Item.vue     | 212 ++---
 .../components/PriceTriggerForm.vue           |  63 ++
 .../composables/usePriceTriggerPage.ts        | 135 ++++
 .../desktop/DesktopPriceTriggerView.vue       |  78 ++
 .../desktop/styles/desktop-price-trigger.less | 273 +++++++
 src/views/base/priceTrigger/index.vue         | 203 +----
 .../mobile/MobilePriceTriggerView.vue         |  58 ++
 .../products/composables/useProductsPage.ts   | 147 ++++
 .../composables/useProductsPageData.ts        | 152 ++++
 .../products/desktop/DesktopProductsView.vue  |  64 ++
 .../desktop/components/DesktopProductCard.vue |  81 ++
 .../desktop/styles/desktop-products.less      | 173 +++++
 src/views/base/products/index.vue             | 351 +++------
 .../products/mobile/MobileProductsView.vue    |  62 ++
 .../rules/components/RulesContentPanel.vue    |  68 ++
 .../rules/components/RulesSupportActions.vue  |  41 +
 .../base/rules/composables/useRulesPage.ts    |  55 ++
 .../base/rules/desktop/DesktopRulesView.vue   |  50 ++
 .../rules/desktop/styles/desktop-rules.less   | 212 +++++
 src/views/base/rules/index.vue                | 193 +----
 .../base/rules/mobile/MobileRulesView.vue     |  31 +
 .../composables/usePermissionsPage.ts         |  26 +
 .../desktop/DesktopPermissionsView.vue        |  59 ++
 .../desktop/styles/desktop-permissions.less   | 168 ++++
 .../mobile/MobilePermissionsView.vue          |  33 +
 .../base/rules/permissions/permissions.vue    | 154 +---
 .../transactions/BoursecuTransactionsPage.vue | 202 +++++
 .../transactions/DefaultTransactionsPage.vue  |  79 ++
 .../base/transactions/components/Item.vue     | 245 +++---
 .../components/TransactionDetailPanel.vue     | 131 ++++
 .../composables/useTransactionsPage.ts        | 188 +++++
 .../composables/useTransactionsPageData.ts    | 157 ++++
 .../base/transactions/config/boursecuTabs.ts  | 103 +++
 .../DesktopBoursecuTransactionsView.vue       | 126 +++
 .../DesktopDefaultTransactionsView.vue        |  86 +++
 .../desktop/styles/desktop-transactions.less  | 286 +++++++
 src/views/base/transactions/index.vue         | 232 +-----
 .../base/user/components/UserPasswordForm.vue |  56 ++
 .../base/user/components/UserProfileForm.vue  |  59 ++
 .../base/user/composables/useUserPage.ts      | 280 +++++++
 .../base/user/desktop/DesktopUserView.vue     | 105 +++
 .../user/desktop/styles/desktop-user.less     | 252 ++++++
 src/views/base/user/index.vue                 | 557 ++------------
 src/views/base/user/mobile/MobileUserView.vue | 111 +++
 .../wallet/components/WalletAddCardForm.vue   |  65 ++
 .../base/wallet/composables/useWalletPage.ts  | 291 +++++++
 .../wallet/composables/useWalletPageData.ts   | 187 +++++
 .../base/wallet/desktop/DesktopWalletView.vue | 192 +++++
 .../wallet/desktop/styles/desktop-wallet.less | 296 +++++++
 src/views/base/wallet/index.vue               | 726 ++----------------
 .../base/wallet/mobile/MobileWalletView.vue   | 193 +++++
 src/views/login/components/Login.vue          | 231 ++++--
 src/views/login/components/Register.vue       | 157 ++--
 src/views/login/composables/useLoginForm.ts   | 188 +++++
 src/views/login/composables/useLoginPage.ts   |  45 ++
 .../login/composables/useRegisterForm.ts      |  60 ++
 src/views/login/desktop/DesktopLoginView.vue  |  36 +
 .../desktop/components/DesktopAuthShell.vue   |  79 ++
 .../desktop/components/DesktopLoginForm.vue   | 204 +++++
 .../components/DesktopPwaGuideModal.vue       |  66 ++
 .../components/DesktopRegisterForm.vue        | 144 ++++
 .../login/desktop/styles/desktop-auth.less    | 490 ++++++++++++
 src/views/login/index.vue                     |  83 +-
 src/views/login/mobile/MobileLoginView.vue    |  37 +
 src/views/login/shell/LoginPageShell.vue      |  24 +
 uno.config.ts                                 |   5 +-
 234 files changed, 18425 insertions(+), 5503 deletions(-)
 create mode 100644 src/components/SupportContactBar.vue
 create mode 100644 src/composables/useOnceAsync.ts
 create mode 100644 src/composables/useProductsCatalog.ts
 create mode 100644 src/layouts/AppLayoutShell.vue
 create mode 100644 src/layouts/components/ResponsiveViewPair.vue
 create mode 100644 src/layouts/composables/useAppLayout.ts
 create mode 100644 src/layouts/composables/useAppNavigation.ts
 create mode 100644 src/layouts/composables/useResponsiveLayout.ts
 create mode 100644 src/layouts/config/navigation.ts
 create mode 100644 src/layouts/constants.ts
 create mode 100644 src/layouts/desktop/DesktopAppLayout.vue
 create mode 100644 src/layouts/desktop/DesktopNavItem.vue
 create mode 100644 src/layouts/desktop/DesktopSidebar.vue
 create mode 100644 src/layouts/desktop/desktop-layout.less
 create mode 100644 src/layouts/desktop/styles/desktop-page-common.less
 create mode 100644 src/layouts/mobile/MobileAppLayout.vue
 create mode 100644 src/layouts/mobile/MobileBottomNav.vue
 create mode 100644 src/layouts/mobile/MobileOverflowMenu.vue
 create mode 100644 src/layouts/mobile/mobile-layout.less
 create mode 100644 src/layouts/styles/desktop-shell.less
 create mode 100644 src/layouts/styles/mobile-frame.less
 create mode 100644 src/layouts/types.ts
 create mode 100644 src/utils/persianDigits.ts
 create mode 100644 src/views/base/about/components/AboutSectionsContent.vue
 create mode 100644 src/views/base/about/components/AboutSupportActions.vue
 create mode 100644 src/views/base/about/composables/useAboutPage.ts
 create mode 100644 src/views/base/about/desktop/DesktopAboutView.vue
 create mode 100644 src/views/base/about/desktop/styles/desktop-about.less
 create mode 100644 src/views/base/about/mobile/MobileAboutView.vue
 create mode 100644 src/views/base/aboutUs/components/AboutUsContentPanel.vue
 create mode 100644 src/views/base/aboutUs/composables/useAboutUsPage.ts
 create mode 100644 src/views/base/aboutUs/desktop/DesktopAboutUsView.vue
 create mode 100644 src/views/base/aboutUs/desktop/styles/desktop-about-us.less
 create mode 100644 src/views/base/aboutUs/mobile/MobileAboutUsView.vue
 create mode 100644 src/views/base/address/components/AddressForm.vue
 create mode 100644 src/views/base/address/components/AddressMobileItem.vue
 create mode 100644 src/views/base/address/composables/useAddressPage.ts
 create mode 100644 src/views/base/address/composables/useAddressPageData.ts
 create mode 100644 src/views/base/address/desktop/DesktopAddressView.vue
 create mode 100644 src/views/base/address/desktop/styles/desktop-address.less
 create mode 100644 src/views/base/address/mobile/MobileAddressView.vue
 create mode 100644 src/views/base/earnMoney/composables/useEarnMoneyPage.ts
 create mode 100644 src/views/base/earnMoney/desktop/DesktopEarnMoneyView.vue
 create mode 100644 src/views/base/earnMoney/desktop/styles/desktop-earn-money.less
 create mode 100644 src/views/base/earnMoney/mobile/MobileEarnMoneyView.vue
 create mode 100644 src/views/base/educate/components/EducateContentPanel.vue
 create mode 100644 src/views/base/educate/components/EducateSupportActions.vue
 create mode 100644 src/views/base/educate/composables/useEducatePage.ts
 create mode 100644 src/views/base/educate/desktop/DesktopEducateView.vue
 create mode 100644 src/views/base/educate/desktop/styles/desktop-educate.less
 create mode 100644 src/views/base/educate/mobile/MobileEducateView.vue
 create mode 100644 src/views/base/fund/composables/useFundPage.ts
 create mode 100644 src/views/base/fund/desktop/DesktopFundView.vue
 create mode 100644 src/views/base/fund/desktop/styles/desktop-fund.less
 create mode 100644 src/views/base/fund/info/components/FundEditActions.vue
 create mode 100644 src/views/base/fund/info/components/FundTransactionForm.vue
 create mode 100644 src/views/base/fund/info/composables/useFundInfoPage.ts
 create mode 100644 src/views/base/fund/info/desktop/DesktopFundInfoView.vue
 create mode 100644 src/views/base/fund/info/mobile/MobileFundInfoView.vue
 create mode 100644 src/views/base/fund/mobile/MobileFundView.vue
 create mode 100644 src/views/base/fund/newFund/composables/useFundNewPage.ts
 create mode 100644 src/views/base/fund/newFund/desktop/DesktopFundNewView.vue
 create mode 100644 src/views/base/fund/newFund/mobile/MobileFundNewView.vue
 create mode 100644 src/views/base/giftCard/components/GiftCardForm.vue
 create mode 100644 src/views/base/giftCard/composables/useGiftCardPage.ts
 create mode 100644 src/views/base/giftCard/desktop/DesktopGiftCardView.vue
 create mode 100644 src/views/base/giftCard/desktop/styles/desktop-gift-card.less
 create mode 100644 src/views/base/giftCard/mobile/MobileGiftCardView.vue
 create mode 100644 src/views/base/gold/desktop/styles/desktop-gold.less
 create mode 100644 src/views/base/home/components/HomeQuickActionBox.vue
 create mode 100644 src/views/base/home/composables/useHomePage.ts
 create mode 100644 src/views/base/home/composables/useHomePageData.ts
 create mode 100644 src/views/base/home/desktop/HomeDesktopView.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopAssetsCard.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopAssetsMetrics.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopBannersPanel.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopChartPanel.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopChartSection.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopDefaultActions.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopGaroosiAssets.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopHomeAlerts.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopHomeCard.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopHomeHeader.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopHomeSection.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopHomeShell.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopHomeTopbar.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopLivePrice.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopPriceOverview.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopPriceRange.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopQuickActionsGrid.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopQuickActionsPanel.vue
 create mode 100644 src/views/base/home/desktop/components/DesktopReferralPanel.vue
 create mode 100644 src/views/base/home/desktop/layouts/BoursecuDesktopHome.vue
 create mode 100644 src/views/base/home/desktop/layouts/DefaultDesktopHome.vue
 create mode 100644 src/views/base/home/desktop/styles/desktop-home.less
 create mode 100644 src/views/base/home/layouts/HomeLayoutRenderer.vue
 create mode 100644 src/views/base/home/layouts/configs/boursecu.ts
 create mode 100644 src/views/base/home/layouts/configs/boursecuQuickActions.ts
 create mode 100644 src/views/base/home/layouts/configs/default.ts
 create mode 100644 src/views/base/home/layouts/registry.ts
 create mode 100644 src/views/base/home/layouts/sections/AssetsSectionBlock.vue
 create mode 100644 src/views/base/home/layouts/sections/BannersSection.vue
 create mode 100644 src/views/base/home/layouts/sections/BoursecuQuickActionsSection.vue
 create mode 100644 src/views/base/home/layouts/sections/CurrentPriceSection.vue
 create mode 100644 src/views/base/home/layouts/sections/GaroosiAssetsSection.vue
 create mode 100644 src/views/base/home/layouts/sections/LimitedPriceAlertSection.vue
 create mode 100644 src/views/base/home/layouts/sections/MainActionsSection.vue
 create mode 100644 src/views/base/home/layouts/sections/MarketClosedSection.vue
 create mode 100644 src/views/base/home/layouts/sections/PriceChartSection.vue
 create mode 100644 src/views/base/home/layouts/sections/PriceStatsSection.vue
 create mode 100644 src/views/base/home/layouts/sections/ReferralSectionBlock.vue
 create mode 100644 src/views/base/home/layouts/sections/index.ts
 create mode 100644 src/views/base/home/layouts/types.ts
 create mode 100644 src/views/base/home/mobile/MobileHomeView.vue
 create mode 100644 src/views/base/home/shell/HomePageShell.vue
 create mode 100644 src/views/base/physicalReceive/components/PhysicalReceiveAddressPicker.vue
 create mode 100644 src/views/base/physicalReceive/components/PhysicalReceiveCartRow.vue
 create mode 100644 src/views/base/physicalReceive/composables/useNewPhysicalRequestPage.ts
 create mode 100644 src/views/base/physicalReceive/composables/usePhysicalReceiveList.ts
 create mode 100644 src/views/base/physicalReceive/composables/usePhysicalReceiveShell.ts
 create mode 100644 src/views/base/physicalReceive/desktop/DesktopNewRequestView.vue
 create mode 100644 src/views/base/physicalReceive/desktop/DesktopPhysicalReceiveChrome.vue
 create mode 100644 src/views/base/physicalReceive/desktop/DesktopRequestListView.vue
 create mode 100644 src/views/base/physicalReceive/desktop/styles/desktop-physical-receive.less
 create mode 100644 src/views/base/physicalReceive/mobile/MobileNewRequestView.vue
 create mode 100644 src/views/base/physicalReceive/mobile/MobilePhysicalReceiveChrome.vue
 create mode 100644 src/views/base/physicalReceive/mobile/MobileRequestListView.vue
 create mode 100644 src/views/base/priceTrigger/components/PriceTriggerForm.vue
 create mode 100644 src/views/base/priceTrigger/composables/usePriceTriggerPage.ts
 create mode 100644 src/views/base/priceTrigger/desktop/DesktopPriceTriggerView.vue
 create mode 100644 src/views/base/priceTrigger/desktop/styles/desktop-price-trigger.less
 create mode 100644 src/views/base/priceTrigger/mobile/MobilePriceTriggerView.vue
 create mode 100644 src/views/base/products/composables/useProductsPage.ts
 create mode 100644 src/views/base/products/composables/useProductsPageData.ts
 create mode 100644 src/views/base/products/desktop/DesktopProductsView.vue
 create mode 100644 src/views/base/products/desktop/components/DesktopProductCard.vue
 create mode 100644 src/views/base/products/desktop/styles/desktop-products.less
 create mode 100644 src/views/base/products/mobile/MobileProductsView.vue
 create mode 100644 src/views/base/rules/components/RulesContentPanel.vue
 create mode 100644 src/views/base/rules/components/RulesSupportActions.vue
 create mode 100644 src/views/base/rules/composables/useRulesPage.ts
 create mode 100644 src/views/base/rules/desktop/DesktopRulesView.vue
 create mode 100644 src/views/base/rules/desktop/styles/desktop-rules.less
 create mode 100644 src/views/base/rules/mobile/MobileRulesView.vue
 create mode 100644 src/views/base/rules/permissions/composables/usePermissionsPage.ts
 create mode 100644 src/views/base/rules/permissions/desktop/DesktopPermissionsView.vue
 create mode 100644 src/views/base/rules/permissions/desktop/styles/desktop-permissions.less
 create mode 100644 src/views/base/rules/permissions/mobile/MobilePermissionsView.vue
 create mode 100644 src/views/base/transactions/BoursecuTransactionsPage.vue
 create mode 100644 src/views/base/transactions/DefaultTransactionsPage.vue
 create mode 100644 src/views/base/transactions/components/TransactionDetailPanel.vue
 create mode 100644 src/views/base/transactions/composables/useTransactionsPage.ts
 create mode 100644 src/views/base/transactions/composables/useTransactionsPageData.ts
 create mode 100644 src/views/base/transactions/config/boursecuTabs.ts
 create mode 100644 src/views/base/transactions/desktop/DesktopBoursecuTransactionsView.vue
 create mode 100644 src/views/base/transactions/desktop/DesktopDefaultTransactionsView.vue
 create mode 100644 src/views/base/transactions/desktop/styles/desktop-transactions.less
 create mode 100644 src/views/base/user/components/UserPasswordForm.vue
 create mode 100644 src/views/base/user/components/UserProfileForm.vue
 create mode 100644 src/views/base/user/composables/useUserPage.ts
 create mode 100644 src/views/base/user/desktop/DesktopUserView.vue
 create mode 100644 src/views/base/user/desktop/styles/desktop-user.less
 create mode 100644 src/views/base/user/mobile/MobileUserView.vue
 create mode 100644 src/views/base/wallet/components/WalletAddCardForm.vue
 create mode 100644 src/views/base/wallet/composables/useWalletPage.ts
 create mode 100644 src/views/base/wallet/composables/useWalletPageData.ts
 create mode 100644 src/views/base/wallet/desktop/DesktopWalletView.vue
 create mode 100644 src/views/base/wallet/desktop/styles/desktop-wallet.less
 create mode 100644 src/views/base/wallet/mobile/MobileWalletView.vue
 create mode 100644 src/views/login/composables/useLoginForm.ts
 create mode 100644 src/views/login/composables/useLoginPage.ts
 create mode 100644 src/views/login/composables/useRegisterForm.ts
 create mode 100644 src/views/login/desktop/DesktopLoginView.vue
 create mode 100644 src/views/login/desktop/components/DesktopAuthShell.vue
 create mode 100644 src/views/login/desktop/components/DesktopLoginForm.vue
 create mode 100644 src/views/login/desktop/components/DesktopPwaGuideModal.vue
 create mode 100644 src/views/login/desktop/components/DesktopRegisterForm.vue
 create mode 100644 src/views/login/desktop/styles/desktop-auth.less
 create mode 100644 src/views/login/mobile/MobileLoginView.vue
 create mode 100644 src/views/login/shell/LoginPageShell.vue

diff --git a/components.d.ts b/components.d.ts
index 7dd7195..ef35dfd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -62,11 +62,13 @@ declare module 'vue' {
     Size: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/size.vue')['default']
     StartEnd: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/start-end.vue')['default']
     Suffix: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/suffix.vue')['default']
+    SupportContactBar: typeof import('./src/components/SupportContactBar.vue')['default']
     Switchable: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/switchable.vue')['default']
     Text: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/text.vue')['default']
     Time: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/time.vue')['default']
     TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanField: typeof import('vant/es')['Field']
   }
 }
diff --git a/index.html b/index.html
index 8e95d78..3ffff25 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,39 @@
         <meta name="enamad" content="44889195">
         <link rel="manifest" href="https://nerkh.gold/get_user/monifist.json"/>
         <title></title>
+    <script>
+      (function () {
+        if (window.matchMedia('(min-width: 768px)').matches) {
+          document.documentElement.classList.add('app-layout--desktop')
+        }
+      })()
+    </script>
+    <style>
+      /* Critical: full-viewport splash before Vue/CSS hydrate */
+      html, body, #app {
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+      }
+      @media (min-width: 768px) {
+        html, body, #app {
+          width: 100%;
+          max-width: none;
+        }
+        body {
+          display: block !important;
+        }
+      }
+      .app-splash-screen {
+        position: fixed;
+        inset: 0;
+        width: 100vw;
+        min-height: 100vh;
+        left: 0 !important;
+        right: 0 !important;
+        z-index: 2147483646;
+      }
+    </style>
 
     </head>
 <body>
diff --git a/src/App.vue b/src/App.vue
index 2738761..ff2a1ad 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="desktopConfig w-full right-0 left-0 absolute">
+  <div class="desktopConfig w-full right-0 left-0">
     <div v-if="popVisible" class="top-0 bottom-0 wrap-fix bg-primary z-100 opacity-60">
       <div class="absolute right-0 left-0 bottom-10vh flex flex-col items-center">
         <div>
@@ -10,60 +10,47 @@
       </div>
     </div>
     <AConfigProvider :theme="antTheme ?? undefined" direction="rtl">
-      <transition mode="out-in" name="fade">
-
-        <div v-if="!showSplash">
-          <router-view v-slot="{ Component, route }">
-            <transition :name="(route.meta.transition as string | undefined) || 'fade'">
-
-              <div>
-                <component :is="Component"/>
-              </div>
-            </transition>
-          </router-view>
-
-        </div>
-        <div
-          v-else
-          class="flex bottom-0 wrap-fix top-0 z-1000000000000 justify-center"
-          :style="{ backgroundColor: getProjectSplashBackground() }"
-        >
-          <template v-if="!isBoursecuProject()">
-            <div class="top-0 wrap-fix h-1/3 w-screen flex">
-              <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover"/>
-              <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
-            </div>
-            <div class="wrap-fix bottom-0 h-1/3 w-screen">
-              <img
-                  :src="img_bottomGradiant"
-                  alt=""
-                  class="absolute z-10 w-screen h-full object-cover"
-              />
-              <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none"/>
-            </div>
-          </template>
-          <div class="self-center splash_appear_fade_in">
+      <div v-if="showSplash" class="app-splash-screen flex justify-center" :style="{ backgroundColor: getProjectSplashBackground() }">
+        <template v-if="!isBoursecuProject()">
+          <div class="app-splash-screen__gradient app-splash-screen__gradient--top h-1/3 flex">
+            <img :src="img_topGradiant" alt="" class="absolute z-10 w-full h-full object-cover"/>
+            <img :src="img_pattern" alt="" class="absolute w-full h-full object-none"/>
+          </div>
+          <div class="app-splash-screen__gradient app-splash-screen__gradient--bottom h-1/3">
             <img
-              :src="getProjectLoginLogo(config?.config?.avatar)"
-              :class="hasCustomLoginLogoLayout()
-                ? 'w-[80vw] max-w-[320px] h-auto object-contain'
-                : 'h-[20vh] object-contain'"
-            >
-
+                :src="img_bottomGradiant"
+                alt=""
+                class="absolute z-10 w-full h-full object-cover"
+            />
+            <img :src="img_pattern" alt="" class="absolute w-full h-full object-none"/>
           </div>
-          <div class="fixed w-full bottom-5 home_appear_fade_in_up">
-            <div
-              class="text-center text-xs"
-              :class="isBoursecuProject() ? 'text-white' : ''"
-            >
-              نسخه: {{ pkg.version }}
-            </div>
-          </div>
-          <div class="absolute bottom-10">
-            <a-spin :indicator="splashIndicator" size="small"/>
+        </template>
+        <div class="self-center splash_appear_fade_in">
+          <img
+            :src="getProjectLoginLogo(config?.config?.avatar)"
+            :class="hasCustomLoginLogoLayout()
+              ? 'w-[80vw] max-w-[320px] h-auto object-contain'
+              : 'h-[20vh] object-contain'"
+          >
+        </div>
+        <div class="fixed w-full bottom-5 home_appear_fade_in_up">
+          <div
+            class="text-center text-xs"
+            :class="isBoursecuProject() ? 'text-white' : ''"
+          >
+            نسخه: {{ pkg.version }}
           </div>
         </div>
-      </transition>
+        <div class="absolute bottom-10">
+          <a-spin :indicator="splashIndicator" size="small"/>
+        </div>
+      </div>
+
+      <div v-else class="app-main">
+        <router-view v-slot="{ Component, route }">
+          <component :is="Component" :key="route.fullPath" />
+        </router-view>
+      </div>
     </AConfigProvider>
     <van-dialog
         v-model:show="versionDialog"
@@ -115,7 +102,7 @@
 <script lang="ts" setup>
 import pkg from '../package.json'
 import {useRegisterSW} from 'virtual:pwa-register/vue'
-import {computed, h, onMounted, ref} from 'vue'
+import {computed, h, onMounted, ref, watch} from 'vue'
 import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
 import img_pattern from '@/views/login/assets/img/pattern.svg'
 import {LoadingOutlined} from '@ant-design/icons-vue'
@@ -123,9 +110,12 @@ import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
 import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import {useConfigStore} from "@/store/configStore";
-import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject} from "@/utils/config";
+import {getProjectFontFamily, getProjectLoginLogo, getProjectSplashBackground, getProjectBrandRed, hasCustomLoginLogoLayout, isBoursecuProject, resetAppSurfaceBackground} from "@/utils/config";
 import {ConfigProvider as AConfigProvider} from 'ant-design-vue'
 import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
+import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
+
+useApplyDesktopLayoutClass()
 
 const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW()
 const config = useConfigStore()
@@ -171,6 +161,12 @@ onMounted(async () => {
   }, 2000)
 })
 
+watch(showSplash, (visible) => {
+  if (!visible) {
+    resetAppSurfaceBackground()
+  }
+})
+
 const versionDialog = ref<boolean>(false)
 
 function checkVersion() {
@@ -200,6 +196,7 @@ function update() {
   --app-credit-footer-offset: calc(var(--app-credit-bar-inner) + var(--app-safe-bottom));
   --app-nav-height: 80px;
   --app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-credit-footer-offset));
+  --app-desktop-sidebar-width: 260px;
   --app-add-card-height: 88px;
   /* بخشی از کارت کیف‌پول زیر نوار «افزودن کارت جدید» دیده می‌شود */
   --wallet-card-dock-overlap: 52px;
@@ -210,6 +207,16 @@ function update() {
   --app-z-dialog: 5300;
 }
 
+.app-main {
+  width: 100%;
+  min-height: 100vh;
+  opacity: 1 !important;
+}
+
+.desktopConfig {
+  min-height: 100vh;
+}
+
 .app-credit-footer {
   position: fixed;
   bottom: 0;
@@ -249,10 +256,17 @@ function update() {
   z-index: 9999;
 }
 
-@media screen and (min-width: 426px) {
+@media screen and (min-width: 426px) and (max-width: 767.98px) {
   .desktopConfig {
     width: 426px;
     position: relative !important;
   }
 }
+
+html.app-layout--desktop {
+  #support-button {
+    bottom: 12px;
+    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px);
+  }
+}
 </style>
diff --git a/src/assets/css/boursecu-theme.less b/src/assets/css/boursecu-theme.less
index 2740a3d..b98c440 100644
--- a/src/assets/css/boursecu-theme.less
+++ b/src/assets/css/boursecu-theme.less
@@ -1,4 +1,9 @@
 html.project-boursecu {
+  .ant-input-group-addon {
+    background-color: @secondary-color !important;
+    color: @App-primary-color !important;
+  }
+
   .text-red,
   .text-red-600,
   .text-red-700,
diff --git a/src/assets/css/main.less b/src/assets/css/main.less
index 38eb0e3..90bebb4 100644
--- a/src/assets/css/main.less
+++ b/src/assets/css/main.less
@@ -2,9 +2,29 @@
 @import (less) './fonts.less';
 @import (less) './ant.less';
 @import (less) './boursecu-theme.less';
+@import (less) '../../layouts/styles/desktop-shell.less';
+@import (less) '../../layouts/styles/mobile-frame.less';
+@import (less) '../../views/login/desktop/styles/desktop-auth.less';
+@import (less) '../../views/base/user/desktop/styles/desktop-user.less';
+@import (less) '../../views/base/products/desktop/styles/desktop-products.less';
+@import (less) '../../views/base/transactions/desktop/styles/desktop-transactions.less';
+@import (less) '../../views/base/wallet/desktop/styles/desktop-wallet.less';
+@import (less) '../../views/base/priceTrigger/desktop/styles/desktop-price-trigger.less';
+@import (less) '../../views/base/about/desktop/styles/desktop-about.less';
+@import (less) '../../views/base/rules/desktop/styles/desktop-rules.less';
+@import (less) '../../views/base/rules/permissions/desktop/styles/desktop-permissions.less';
+@import (less) '../../views/base/giftCard/desktop/styles/desktop-gift-card.less';
+@import (less) '../../views/base/address/desktop/styles/desktop-address.less';
+@import (less) '../../views/base/educate/desktop/styles/desktop-educate.less';
+@import (less) '../../views/base/aboutUs/desktop/styles/desktop-about-us.less';
+@import (less) '../../views/base/earnMoney/desktop/styles/desktop-earn-money.less';
+@import (less) '../../views/base/physicalReceive/desktop/styles/desktop-physical-receive.less';
+@import (less) '../../views/base/fund/desktop/styles/desktop-fund.less';
+@import (less) '../../views/base/gold/desktop/styles/desktop-gold.less';
 
 html {
   scroll-behavior: smooth;
+  background-color: @prefixCls-background-color;
 }
 
 body {
@@ -34,7 +54,7 @@ body {
   @apply flex justify-center relative;
   position: relative;
 }
-@media screen and (min-width: 426px) {
+@media screen and (min-width: 426px) and (max-width: 767.98px) {
   .van-popup--bottom.van-popup--round {
     width: 426px;
     left: calc(50vw - 213px);
@@ -44,10 +64,31 @@ body {
   position: fixed;
   right: 0;
   left: 0;
-  @media screen and (min-width: 426px) {
+  width: 100%;
+  max-width: 100vw;
+  box-sizing: border-box;
+
+  @media screen and (min-width: 426px) and (max-width: 767.98px) {
     width: 426px;
-    left: auto;
+    max-width: 426px;
+    left: 50%;
     right: auto;
+    transform: translateX(-50%);
+  }
+}
+
+html.app-layout--desktop {
+  @media screen and (min-width: 426px) {
+    .van-popup--bottom.van-popup--round {
+      width: min(480px, calc(100vw - var(--app-desktop-sidebar-width, 260px) - 48px));
+      left: calc(
+        (100vw - var(--app-desktop-sidebar-width, 260px) - min(480px, calc(100vw - var(--app-desktop-sidebar-width, 260px) - 48px))) / 2
+      );
+    }
+  }
+
+  #goftino_w {
+    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px) !important;
   }
 }
 
diff --git a/src/components/ListAnim.vue b/src/components/ListAnim.vue
index d091156..2cd105e 100644
--- a/src/components/ListAnim.vue
+++ b/src/components/ListAnim.vue
@@ -33,16 +33,7 @@ $total-items: 6
     animation: 1s ease slideInFromRight
     animation-fill-mode: both
 
-//@if($counter < 13)
-//  .animate > div
-    animation: 1s ease 0s 1 slideInFromRight
-    animation-fill-mode: both
-//transform: translateX(100%)
-//@for $i from 1 through $total-items
-//  .animate:nth-child(#{$i})
-//    animation-delay: .25s * $i
-
-//transform: translateX(100%)
+// Duplicate animation block removed — was leaking styles without a selector
 
 @keyframes slideInFromRight
   0%
diff --git a/src/components/SupportContactBar.vue b/src/components/SupportContactBar.vue
new file mode 100644
index 0000000..895f619
--- /dev/null
+++ b/src/components/SupportContactBar.vue
@@ -0,0 +1,38 @@
+<template>
+  <div :class="variant === 'desktop' ? 'dpage-support' : 'wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white'">
+    <a class="w-full" :href="supportHref">
+      <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
+    </a>
+    <a :href="baleHref" target="_blank" rel="noopener noreferrer">
+      <img src="@/assets/img/bale.png" alt="بله" :class="variant === 'desktop' ? 'dpage-support__bale' : 'h-10 w-10'" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { useConfigStore } from '@/store/configStore'
+import { getProjectBaleLink, getProjectSupportPhoneLink } from '@/utils/config'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const config = useConfigStore()
+
+const supportHref = computed(() =>
+  config.config.name === 'garoosi'
+    ? 'tel:09031265925'
+    : getProjectSupportPhoneLink(),
+)
+
+const baleHref = computed(() =>
+  config.config.name === 'garoosi'
+    ? 'https://ble.ir/garoosigallery'
+    : getProjectBaleLink(),
+)
+</script>
diff --git a/src/composables/useOnceAsync.ts b/src/composables/useOnceAsync.ts
new file mode 100644
index 0000000..faf1de5
--- /dev/null
+++ b/src/composables/useOnceAsync.ts
@@ -0,0 +1,44 @@
+/**
+ * Deduplicate async work across remounts (e.g. accidental v-if layout switches).
+ * Prefer fixing layout with v-show + parent-level fetch; use this in stores/shared loaders.
+ */
+
+const cache = new Map<string, unknown>()
+const inflight = new Map<string, Promise<unknown>>()
+
+export async function runOnceAsync<T>(key: string, fn: () => Promise<T>, force = false): Promise<T> {
+  if (!force && cache.has(key)) {
+    return cache.get(key) as T
+  }
+
+  if (!force && inflight.has(key)) {
+    return inflight.get(key) as Promise<T>
+  }
+
+  const promise = fn()
+    .then((result) => {
+      cache.set(key, result)
+      return result
+    })
+    .finally(() => {
+      if (inflight.get(key) === promise) {
+        inflight.delete(key)
+      }
+    })
+
+  inflight.set(key, promise)
+  return promise
+}
+
+export function resetOnceAsync(key: string) {
+  cache.delete(key)
+  inflight.delete(key)
+}
+
+export function resetOnceAsyncByPrefix(prefix: string) {
+  for (const key of [...cache.keys(), ...inflight.keys()]) {
+    if (key.startsWith(prefix)) {
+      resetOnceAsync(key)
+    }
+  }
+}
diff --git a/src/composables/useProductsCatalog.ts b/src/composables/useProductsCatalog.ts
new file mode 100644
index 0000000..bdb24ce
--- /dev/null
+++ b/src/composables/useProductsCatalog.ts
@@ -0,0 +1,32 @@
+import { getProducts } from '@/api/products'
+import type { Product } from '@/models/products'
+
+/** Shared product catalog — dedupes getProducts() across wallet assets and chart offset. */
+let catalogCache: Product[] | null = null
+let catalogPromise: Promise<Product[]> | null = null
+
+export function getProductsCatalog(force = false): Promise<Product[]> {
+  if (!force && catalogCache) {
+    return Promise.resolve(catalogCache)
+  }
+
+  if (!force && catalogPromise) {
+    return catalogPromise
+  }
+
+  catalogPromise = getProducts()
+    .then((products) => {
+      catalogCache = products ?? []
+      return catalogCache
+    })
+    .finally(() => {
+      catalogPromise = null
+    })
+
+  return catalogPromise
+}
+
+export function clearProductsCatalog() {
+  catalogCache = null
+  catalogPromise = null
+}
diff --git a/src/composables/useWalletAssets.ts b/src/composables/useWalletAssets.ts
index ad20133..8cb9bf4 100644
--- a/src/composables/useWalletAssets.ts
+++ b/src/composables/useWalletAssets.ts
@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 import { getWalletAssets } from '@/api/wallet'
-import { getProducts } from '@/api/products'
+import { getProductsCatalog } from '@/composables/useProductsCatalog'
 import type { WalletAssetsSummary } from '@/models/walletAssets'
 import { enrichInventoryCardsWithCatalog } from '@/utils/productAssets'
 
@@ -17,8 +17,8 @@ export function useWalletAssets() {
       return assetsPromise
     }
 
-    // سرور مرجع دارایی‌هاست (main_wallet_products هم سمت سرور هندل می‌شود)؛ کلاینت فقط نمایش می‌دهد
-    assetsPromise = Promise.all([getWalletAssets(), getProducts()])
+    // Reuses cached getProductsCatalog() — same catalog as chart offset logic
+    assetsPromise = Promise.all([getWalletAssets(), getProductsCatalog(force)])
       .then(([data, catalog]) => {
         assetsSummary.value = {
           ...data,
diff --git a/src/config-loader.js b/src/config-loader.js
index cdedbf4..a4078c5 100644
--- a/src/config-loader.js
+++ b/src/config-loader.js
@@ -97,6 +97,16 @@
       window.__APP_CONFIG__ = config
       window.__CONFIG_READY__ = true
 
+      // Early splash background — full viewport before Vue mounts
+      const projectName = config?.user?.name
+      if (projectName === 'boursecu') {
+        const splashBg = '#133050'
+        document.documentElement.style.backgroundColor = splashBg
+        document.body.style.backgroundColor = splashBg
+        const metaTheme = document.querySelector('meta[name="theme-color"]')
+        if (metaTheme) metaTheme.setAttribute('content', splashBg)
+      }
+
       // Resolve the promise
       if (configResolve) {
         configResolve(config)
diff --git a/src/layouts/AppLayoutShell.vue b/src/layouts/AppLayoutShell.vue
new file mode 100644
index 0000000..2752ab6
--- /dev/null
+++ b/src/layouts/AppLayoutShell.vue
@@ -0,0 +1,12 @@
+<template>
+  <DesktopAppLayout v-if="isDesktopLayout" />
+  <MobileAppLayout v-else />
+</template>
+
+<script lang="ts" setup>
+import { useDesktopBreakpoint } from './composables/useAppLayout'
+import DesktopAppLayout from './desktop/DesktopAppLayout.vue'
+import MobileAppLayout from './mobile/MobileAppLayout.vue'
+
+const isDesktopLayout = useDesktopBreakpoint()
+</script>
diff --git a/src/layouts/components/ResponsiveViewPair.vue b/src/layouts/components/ResponsiveViewPair.vue
new file mode 100644
index 0000000..0565d63
--- /dev/null
+++ b/src/layouts/components/ResponsiveViewPair.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="responsive-view-pair">
+    <div
+      v-show="!isDesktop"
+      class="responsive-view-pair__pane"
+      :class="{ 'responsive-pane--hidden': isDesktop }"
+    >
+      <slot name="mobile" />
+    </div>
+    <div
+      v-show="isDesktop"
+      class="responsive-view-pair__pane"
+      :class="{ 'responsive-pane--hidden': !isDesktop }"
+    >
+      <slot name="desktop" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDesktopBreakpoint } from '../composables/useResponsiveLayout'
+
+const isDesktop = useDesktopBreakpoint()
+</script>
+
+<style scoped>
+.responsive-view-pair {
+  min-height: 100%;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+}
+
+.responsive-view-pair__pane {
+  min-height: 100%;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.responsive-pane--hidden {
+  /* v-show already sets display:none; class reserved for layout overrides */
+}
+</style>
diff --git a/src/layouts/composables/useAppLayout.ts b/src/layouts/composables/useAppLayout.ts
new file mode 100644
index 0000000..1de3af2
--- /dev/null
+++ b/src/layouts/composables/useAppLayout.ts
@@ -0,0 +1,34 @@
+import { useMediaQuery } from '@vueuse/core'
+import { onUnmounted, watch } from 'vue'
+import { DESKTOP_LAYOUT_MIN_WIDTH } from '../constants'
+
+const DESKTOP_LAYOUT_CLASS = 'app-layout--desktop'
+
+export function useDesktopBreakpoint() {
+  return useMediaQuery(`(min-width: ${DESKTOP_LAYOUT_MIN_WIDTH}px)`)
+}
+
+/** Apply html class for global desktop shell styles. Call once from App.vue. */
+export function useApplyDesktopLayoutClass() {
+  const isDesktopLayout = useDesktopBreakpoint()
+
+  const stop = watch(
+    isDesktopLayout,
+    (desktop) => {
+      document.documentElement.classList.toggle(DESKTOP_LAYOUT_CLASS, desktop)
+    },
+    { immediate: true },
+  )
+
+  onUnmounted(() => {
+    stop()
+    document.documentElement.classList.remove(DESKTOP_LAYOUT_CLASS)
+  })
+}
+
+/** @deprecated use useDesktopBreakpoint + useApplyDesktopLayoutClass */
+export function useAppLayout() {
+  const isDesktopLayout = useDesktopBreakpoint()
+  useApplyDesktopLayoutClass()
+  return { isDesktopLayout }
+}
diff --git a/src/layouts/composables/useAppNavigation.ts b/src/layouts/composables/useAppNavigation.ts
new file mode 100644
index 0000000..7a65a9d
--- /dev/null
+++ b/src/layouts/composables/useAppNavigation.ts
@@ -0,0 +1,43 @@
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useAppNavigation() {
+  const router = useRouter()
+  const route = useRoute()
+
+  const popVisible = ref(false)
+  const currentRoute = computed(() => route.name)
+  const hideMenu = computed(() => !!route.meta.hideMenu)
+
+  function isNavActive(routeName: string) {
+    return currentRoute.value === routeName
+  }
+
+  function navItemClass(routeName: string) {
+    return isNavActive(routeName) ? 'text-primary' : 'text-gray-400'
+  }
+
+  function navigateTo(routeName: string) {
+    popVisible.value = false
+    router.push({ name: routeName })
+  }
+
+  function toggleOverflowMenu() {
+    popVisible.value = !popVisible.value
+  }
+
+  function closeOverflowMenu() {
+    popVisible.value = false
+  }
+
+  return {
+    popVisible,
+    currentRoute,
+    hideMenu,
+    isNavActive,
+    navItemClass,
+    navigateTo,
+    toggleOverflowMenu,
+    closeOverflowMenu,
+  }
+}
diff --git a/src/layouts/composables/useResponsiveLayout.ts b/src/layouts/composables/useResponsiveLayout.ts
new file mode 100644
index 0000000..879723e
--- /dev/null
+++ b/src/layouts/composables/useResponsiveLayout.ts
@@ -0,0 +1,21 @@
+import { useMediaQuery } from '@vueuse/core'
+import { DESKTOP_LAYOUT_MIN_WIDTH } from '../constants'
+
+/**
+ * Reactive desktop breakpoint. Use only for UI switching — never tie API calls to this ref.
+ */
+export function useDesktopBreakpoint() {
+  return useMediaQuery(`(min-width: ${DESKTOP_LAYOUT_MIN_WIDTH}px)`)
+}
+
+/**
+ * Guidelines for responsive pages (Vue):
+ *
+ * 1. Call page composables (with onMounted fetch) exactly once in the route `index.vue` shell.
+ * 2. Switch Mobile/Desktop views with `v-show`, not `v-if`, so resize does not destroy children.
+ * 3. Keep `<router-view>` outside responsive chrome wrappers so child routes are not remounted.
+ * 4. Mobile/Desktop views consume shared state via provide/inject — they must not fetch independently.
+ * 5. Prefer store/composable request dedup (in-flight promise + cached result) for shared data.
+ */
+
+export const RESPONSIVE_HIDDEN_CLASS = 'responsive-pane--hidden'
diff --git a/src/layouts/config/navigation.ts b/src/layouts/config/navigation.ts
new file mode 100644
index 0000000..5186129
--- /dev/null
+++ b/src/layouts/config/navigation.ts
@@ -0,0 +1,29 @@
+import { isBoursecuProject } from '@/utils/config'
+import type { AppNavItem } from '../types'
+
+const BOURSECU_PRIMARY_NAV: AppNavItem[] = [
+  { id: 'buyProduct', routeName: 'buyProduct', label: 'سفارش‌ها', icon: 'vuesax-linear:box' },
+  { id: 'transactions', routeName: 'transactions', label: 'تراکنش‌ها', icon: 'vuesax-linear:receipt-item' },
+  { id: 'home', routeName: 'home', label: 'صفحه اصلی', icon: 'vuesax-linear:home' },
+  { id: 'wallet', routeName: 'wallet', label: 'کیف پول', icon: 'vuesax-linear:wallet-1' },
+  { id: 'user', routeName: 'user', label: 'تنظیمات', icon: 'vuesax-linear:setting-2' },
+]
+
+const DEFAULT_PRIMARY_NAV: AppNavItem[] = [
+  { id: 'home', routeName: 'home', label: 'صفحه اصلی', icon: 'vuesax-linear:home' },
+  { id: 'transactions', routeName: 'transactions', label: 'گزارش', icon: 'vuesax-linear:receipt-item' },
+  { id: 'buyProduct', routeName: 'buyProduct', label: 'محصولات', icon: 'vuesax-linear:coin' },
+  { id: 'wallet', routeName: 'wallet', label: 'کیف پول', icon: 'vuesax-linear:wallet-1' },
+  { id: 'user', routeName: 'user', label: 'تنظیمات', icon: 'vuesax-linear:setting-2' },
+]
+
+export const SECONDARY_NAV: AppNavItem[] = [
+  { id: 'notifyTrigger', routeName: 'notifyTrigger', label: 'هشدار قیمت', icon: 'vuesax-linear:bill' },
+  { id: 'about', routeName: 'about', label: 'درباره ما', icon: 'vuesax-linear:info-circle' },
+  { id: 'rules', routeName: 'rules', label: 'قوانین و مقررات', icon: 'vuesax-linear:task' },
+  { id: 'giftCard', routeName: 'giftCard', label: 'ثبت کارت هدیه', icon: 'vuesax-linear:gift' },
+]
+
+export function getPrimaryNavItems(): AppNavItem[] {
+  return isBoursecuProject() ? BOURSECU_PRIMARY_NAV : DEFAULT_PRIMARY_NAV
+}
diff --git a/src/layouts/constants.ts b/src/layouts/constants.ts
new file mode 100644
index 0000000..409b42f
--- /dev/null
+++ b/src/layouts/constants.ts
@@ -0,0 +1,4 @@
+/** Minimum viewport width for desktop app shell (sidebar layout). */
+export const DESKTOP_LAYOUT_MIN_WIDTH = 768
+
+export const DESKTOP_SIDEBAR_WIDTH = 260
diff --git a/src/layouts/desktop/DesktopAppLayout.vue b/src/layouts/desktop/DesktopAppLayout.vue
new file mode 100644
index 0000000..923698c
--- /dev/null
+++ b/src/layouts/desktop/DesktopAppLayout.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="desktop-app-layout">
+    <DesktopSidebar v-if="!hideMenu" />
+    <main
+      class="desktop-app-layout__main"
+      :class="{ 'desktop-app-layout__main--full': hideMenu }"
+    >
+      <router-view v-slot="{ Component, route }">
+        <component
+          :is="Component"
+          :key="route.fullPath"
+          class="desktop-app-layout__content"
+        />
+      </router-view>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, watch } from 'vue'
+import { useAppNavigation } from '../composables/useAppNavigation'
+import DesktopSidebar from './DesktopSidebar.vue'
+
+const NO_SIDEBAR_CLASS = 'app-layout--desktop-no-sidebar'
+const { hideMenu } = useAppNavigation()
+
+watch(
+  hideMenu,
+  (hidden) => {
+    document.documentElement.classList.toggle(NO_SIDEBAR_CLASS, hidden)
+  },
+  { immediate: true },
+)
+
+onUnmounted(() => {
+  document.documentElement.classList.remove(NO_SIDEBAR_CLASS)
+})
+</script>
+
+<style lang="less" src="./desktop-layout.less"></style>
diff --git a/src/layouts/desktop/DesktopNavItem.vue b/src/layouts/desktop/DesktopNavItem.vue
new file mode 100644
index 0000000..729ad61
--- /dev/null
+++ b/src/layouts/desktop/DesktopNavItem.vue
@@ -0,0 +1,25 @@
+<template>
+  <button
+    type="button"
+    class="desktop-nav-item"
+    :class="{ 'desktop-nav-item--active': active }"
+    @click="$emit('click')"
+  >
+    <BasicIcon :icon="icon" size="20" class="desktop-nav-item__icon" />
+    <span class="desktop-nav-item__label">{{ label }}</span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+
+defineProps<{
+  icon: string
+  label: string
+  active: boolean
+}>()
+
+defineEmits<{
+  click: []
+}>()
+</script>
diff --git a/src/layouts/desktop/DesktopSidebar.vue b/src/layouts/desktop/DesktopSidebar.vue
new file mode 100644
index 0000000..1f79045
--- /dev/null
+++ b/src/layouts/desktop/DesktopSidebar.vue
@@ -0,0 +1,55 @@
+<template>
+  <aside
+    class="desktop-sidebar"
+    :class="{ 'desktop-sidebar--boursecu': isBoursecu }"
+  >
+    <div class="desktop-sidebar__brand">
+      <img
+        :src="navLogo"
+        alt=""
+        class="desktop-sidebar__logo"
+      />
+    </div>
+
+    <nav class="desktop-sidebar__section" aria-label="منوی اصلی">
+      <DesktopNavItem
+        v-for="item in primaryItems"
+        :key="item.id"
+        :icon="item.icon"
+        :label="item.label"
+        :active="isNavActive(item.routeName)"
+        @click="navigateTo(item.routeName)"
+      />
+    </nav>
+
+    <div class="desktop-sidebar__divider" />
+
+    <nav class="desktop-sidebar__section desktop-sidebar__section--secondary" aria-label="منوی فرعی">
+      <DesktopNavItem
+        v-for="item in secondaryItems"
+        :key="item.id"
+        :icon="item.icon"
+        :label="item.label"
+        :active="isNavActive(item.routeName)"
+        @click="navigateTo(item.routeName)"
+      />
+    </nav>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+import { getProjectNavLogo, isBoursecuProject } from '@/utils/config'
+import { getPrimaryNavItems, SECONDARY_NAV } from '../config/navigation'
+import { useAppNavigation } from '../composables/useAppNavigation'
+import DesktopNavItem from './DesktopNavItem.vue'
+
+const config = useConfigStore()
+const isBoursecu = isBoursecuProject()
+const navLogo = computed(() => getProjectNavLogo(config.config?.avatar))
+const primaryItems = getPrimaryNavItems()
+const secondaryItems = SECONDARY_NAV
+
+const { isNavActive, navigateTo } = useAppNavigation()
+</script>
diff --git a/src/layouts/desktop/desktop-layout.less b/src/layouts/desktop/desktop-layout.less
new file mode 100644
index 0000000..cf0a758
--- /dev/null
+++ b/src/layouts/desktop/desktop-layout.less
@@ -0,0 +1,157 @@
+.desktop-app-layout {
+  display: flex;
+  flex-direction: row;
+  min-height: 100vh;
+  width: 100%;
+  max-width: 100vw;
+  background: @prefixCls-background-color;
+}
+
+.desktop-app-layout__main {
+  flex: 1;
+  min-width: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.desktop-app-layout__main--full {
+  width: 100%;
+}
+
+.desktop-app-layout__content {
+  height: 100vh;
+  width: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  background: @prefixCls-background-color;
+}
+
+.desktop-sidebar {
+  flex-shrink: 0;
+  width: var(--app-desktop-sidebar-width, 260px);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  padding: 20px 12px 16px;
+  box-sizing: border-box;
+}
+
+.desktop-sidebar--boursecu {
+  background: var(--App-brand-nav, #133050);
+
+  .desktop-sidebar__divider {
+    background: rgba(255, 255, 255, 0.12);
+  }
+
+  .desktop-nav-item {
+    color: rgba(255, 255, 255, 0.72);
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.08);
+      color: #fff;
+    }
+
+    &--active {
+      background: rgba(255, 255, 255, 0.14);
+      color: #fff;
+
+      .desktop-nav-item__icon {
+        color: #fff;
+      }
+    }
+  }
+
+  .desktop-nav-item__icon {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .desktop-sidebar__logo {
+    max-width: 200px;
+    max-height: 80px;
+  }
+}
+
+.desktop-sidebar__brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px 20px;
+  margin-bottom: 4px;
+}
+
+.desktop-sidebar__logo {
+  max-width: 140px;
+  max-height: 48px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.desktop-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.desktop-sidebar__section--secondary {
+  margin-top: auto;
+}
+
+.desktop-sidebar__divider {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.08);
+  margin: 12px 8px;
+}
+
+.desktop-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  text-align: right;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+    color: @App-primary-color;
+  }
+
+  &--active {
+    background: rgba(0, 0, 0, 0.05);
+    color: @App-primary-color;
+
+    .desktop-nav-item__icon {
+      color: @App-primary-color;
+    }
+  }
+}
+
+.desktop-nav-item__icon {
+  flex-shrink: 0;
+  color: #9ca3af;
+}
+
+.desktop-nav-item__label {
+  flex: 1;
+  line-height: 1.3;
+}
+
+.desktop-sidebar__section--secondary .desktop-nav-item {
+  font-size: 13px;
+  font-weight: 500;
+  padding: 8px 12px;
+}
diff --git a/src/layouts/desktop/styles/desktop-page-common.less b/src/layouts/desktop/styles/desktop-page-common.less
new file mode 100644
index 0000000..f798c40
--- /dev/null
+++ b/src/layouts/desktop/styles/desktop-page-common.less
@@ -0,0 +1,83 @@
+/* Shared desktop page primitives */
+
+.dpage-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 6px 0 0;
+    line-height: 1.6;
+  }
+}
+
+.dpage-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dpage-support {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  > a:first-child {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__bale {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+}
diff --git a/src/layouts/mobile/MobileAppLayout.vue b/src/layouts/mobile/MobileAppLayout.vue
new file mode 100644
index 0000000..f7e9ff4
--- /dev/null
+++ b/src/layouts/mobile/MobileAppLayout.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <MobileOverflowMenu
+      :visible="popVisible"
+      :overflow-items="overflowItems"
+      @close="closeOverflowMenu"
+      @navigate="navigateTo"
+    />
+
+    <div :class="['main-with-bottom-chrome', { 'main-with-bottom-chrome--no-nav': hideMenu }]">
+      <router-view v-slot="{ Component, route }">
+        <transition :name="route.meta.transition || 'fade'">
+          <component :is="Component" class="main-with-bottom-chrome-inner" />
+        </transition>
+      </router-view>
+    </div>
+
+    <MobileBottomNav
+      v-if="!hideMenu"
+      :is-boursecu="isBoursecu"
+      :nav-logo="navLogo"
+      :nav-item-class="navItemClass"
+      @navigate="navigateTo"
+      @toggle-overflow="toggleOverflowMenu"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+import { getProjectNavLogo, isBoursecuProject } from '@/utils/config'
+import { SECONDARY_NAV } from '../config/navigation'
+import { useAppNavigation } from '../composables/useAppNavigation'
+import MobileBottomNav from './MobileBottomNav.vue'
+import MobileOverflowMenu from './MobileOverflowMenu.vue'
+
+const config = useConfigStore()
+const isBoursecu = isBoursecuProject()
+const navLogo = computed(() => getProjectNavLogo(config.config?.avatar))
+
+const {
+  popVisible,
+  hideMenu,
+  navItemClass,
+  navigateTo,
+  toggleOverflowMenu,
+  closeOverflowMenu,
+} = useAppNavigation()
+
+const overflowItems = [
+  { id: 'user', routeName: 'user', label: 'حساب کاربری', icon: 'vuesax-linear:user' },
+  ...SECONDARY_NAV,
+]
+</script>
+
+<style lang="less" src="./mobile-layout.less"></style>
diff --git a/src/layouts/mobile/MobileBottomNav.vue b/src/layouts/mobile/MobileBottomNav.vue
new file mode 100644
index 0000000..24b4e16
--- /dev/null
+++ b/src/layouts/mobile/MobileBottomNav.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="bottom-appbar w-auto mx-auto bg-white">
+    <div class="tabs bottom-0">
+      <div
+        v-if="isBoursecu"
+        :class="navItemClass('buyProduct')"
+        class="tab"
+        @click="$emit('navigate', 'buyProduct')"
+      >
+        <Icon icon="vuesax-linear:box" />
+        <div class="text-xs mt-1 font-bold">سفارش ها</div>
+      </div>
+      <div
+        v-else
+        :class="navItemClass('home')"
+        class="tab"
+        @click="$emit('navigate', 'home')"
+      >
+        <Icon icon="vuesax-linear:home" />
+        <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
+      </div>
+
+      <div
+        :class="navItemClass('transactions')"
+        class="tab"
+        @click="$emit('navigate', 'transactions')"
+      >
+        <Icon icon="vuesax-linear:receipt-item" />
+        <div class="text-xs mt-1 font-bold">{{ isBoursecu ? 'تراکنش ها' : 'گزارش' }}</div>
+      </div>
+
+      <div
+        v-if="isBoursecu"
+        :class="navItemClass('home')"
+        class="tab"
+        @click="$emit('navigate', 'home')"
+      >
+        <Icon icon="vuesax-linear:home" />
+        <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
+      </div>
+      <div v-else class="main_in" @click="$emit('navigate', 'buyProduct')">
+        <div
+          class="circle_in"
+          :class="isWhiteNavLogo ? 'is-white-nav-logo' : 'text-white'"
+        >
+          <div class="circle_into" @click.stop="$emit('toggle-overflow')">
+            <div
+              v-if="projectName === 'garoosi'"
+              class="p-2 text-tertiary flex flex-col justify-center items-center"
+            >
+              <Icon icon="vuesax-linear:coin" />
+              <div class="text-[9px] font-bold">محصولات</div>
+            </div>
+            <img
+              v-else
+              class="p-2"
+              :src="navLogo"
+              alt=""
+            />
+          </div>
+        </div>
+      </div>
+
+      <div
+        :class="navItemClass('wallet')"
+        class="tab"
+        @click="$emit('navigate', 'wallet')"
+      >
+        <Icon icon="vuesax-linear:wallet-1" />
+        <div class="text-xs mt-1 font-bold">کیف پول</div>
+      </div>
+      <div
+        :class="navItemClass('user')"
+        class="tab"
+        @click="$emit('navigate', 'user')"
+      >
+        <Icon icon="vuesax-linear:setting-2" />
+        <div class="text-xs mt-1 font-bold">تنظیمات</div>
+      </div>
+    </div>
+
+    <div v-if="!isBoursecu" class="main">
+      <div class="circle" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { getConfigApp } from '@/utils/config'
+
+defineProps<{
+  isBoursecu: boolean
+  navLogo: string
+  navItemClass: (routeName: string) => string
+}>()
+
+defineEmits<{
+  navigate: [routeName: string]
+  'toggle-overflow': []
+}>()
+
+const projectName = getConfigApp('name')
+const whiteNavLogoProjects = ['goldenramin']
+const isWhiteNavLogo = computed(() => whiteNavLogoProjects.includes(projectName))
+</script>
diff --git a/src/layouts/mobile/MobileOverflowMenu.vue b/src/layouts/mobile/MobileOverflowMenu.vue
new file mode 100644
index 0000000..c5b3552
--- /dev/null
+++ b/src/layouts/mobile/MobileOverflowMenu.vue
@@ -0,0 +1,53 @@
+<template>
+  <Teleport to="body">
+    <Transition>
+      <div
+        v-if="visible"
+        class="top-0 bottom-0 bg-primary wrap-fix z-2000 opacity-60"
+        @click="$emit('close')"
+      />
+    </Transition>
+    <Transition name="slide-fade">
+      <div v-if="visible" class="wrap-fix bottom-11vh z-2000">
+        <div class="relative flex flex-col items-center">
+          <div
+            class="flex items-center justify-center bg-white rounded-full w-[30px] h-[30px] mb-2"
+            @click="$emit('close')"
+          >
+            <BasicIcon icon="vuesax-linear:close-circle" />
+          </div>
+          <div class="flex flex-col items-center gap-2">
+            <BasicButton
+              v-for="item in overflowItems"
+              :key="item.id"
+              icon-size="16"
+              class="!font-bold w-15rem"
+              @click="$emit('navigate', item.routeName)"
+            >
+              <div class="flex gap-2 items-center">
+                <BasicIcon :icon="item.icon" size="16" class="absolute right-2" />
+                <div>{{ item.label }}</div>
+              </div>
+            </BasicButton>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import type { AppNavItem } from '../types'
+
+defineProps<{
+  visible: boolean
+  overflowItems: AppNavItem[]
+}>()
+
+defineEmits<{
+  close: []
+  navigate: [routeName: string]
+}>()
+</script>
diff --git a/src/layouts/mobile/mobile-layout.less b/src/layouts/mobile/mobile-layout.less
new file mode 100644
index 0000000..9a1b821
--- /dev/null
+++ b/src/layouts/mobile/mobile-layout.less
@@ -0,0 +1,145 @@
+.bottom-appbar {
+  z-index: var(--app-z-nav, 5000);
+  height: var(--app-nav-height, 80px);
+  position: fixed;
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+  bottom: var(--app-credit-footer-offset, 28px);
+  right: 0;
+  left: 0;
+  width: 100%;
+  max-width: 100vw;
+  box-sizing: border-box;
+
+  @media screen and (min-width: 426px) {
+    width: 426px;
+    max-width: 426px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
+  .tabs {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    background: #fff;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 0;
+    z-index: 400;
+    box-shadow: 0 -2px 4px -2px #0000001a;
+
+    .tab {
+      width: 80px;
+      text-align: center;
+      flex-flow: column;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      align-content: center;
+    }
+
+    .main_in {
+      width: 70px;
+      height: 70px;
+      flex-shrink: 0;
+      align-self: center;
+
+      .circle_in {
+        margin-top: -10px;
+        border-radius: 50%;
+        width: 70px;
+        height: 70px;
+        flex-shrink: 0;
+        z-index: 20;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        flex-wrap: wrap;
+        background-color: @App-primary-color;
+
+        .circle_into {
+          overflow: hidden;
+          @apply bg-primary;
+          border-radius: 50%;
+          width: 56px;
+          height: 56px;
+          flex-shrink: 0;
+          display: flex;
+          justify-content: center;
+          align-content: center;
+          flex-wrap: wrap;
+          border: white 1px solid;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+
+      .circle_in.is-white-nav-logo {
+        .circle_into {
+          background: #fff !important;
+          border-color: rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+  }
+
+  .main {
+    height: 70px;
+    width: 70px;
+    position: relative;
+
+    .circle {
+      border-radius: 50%;
+      height: 70px;
+      width: 70px;
+      z-index: 20;
+      box-shadow: 0 -5px 4px -2px #0000001a;
+      position: absolute;
+    }
+  }
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.main-with-bottom-chrome {
+  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
+}
+
+.main-with-bottom-chrome-inner {
+  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
+}
+
+.main-with-bottom-chrome--no-nav,
+.main-with-bottom-chrome--no-nav .main-with-bottom-chrome-inner {
+  height: calc(100vh - var(--app-credit-footer-offset, 28px));
+}
diff --git a/src/layouts/styles/desktop-shell.less b/src/layouts/styles/desktop-shell.less
new file mode 100644
index 0000000..034a291
--- /dev/null
+++ b/src/layouts/styles/desktop-shell.less
@@ -0,0 +1,126 @@
+@desktop-layout-min: 768px;
+@mobile-frame-max: 767.98px;
+
+/**
+ * Full-width desktop shell — applies on first paint (no JS class needed).
+ * Sidebar-specific wrap-fix offset stays on html.app-layout--desktop.
+ */
+@media screen and (min-width: @desktop-layout-min) {
+  html {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  body {
+    display: block;
+    width: 100%;
+    min-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  #app {
+    width: 100%;
+    max-width: none;
+    min-height: 100vh;
+  }
+
+  .desktopConfig {
+    position: static !important;
+    width: 100% !important;
+    max-width: none !important;
+    min-height: 100vh;
+    left: auto !important;
+    right: auto !important;
+  }
+
+  .wrap-fix {
+    width: auto !important;
+    max-width: none !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  :root {
+    --app-credit-bar-inner: 0px;
+    --app-credit-footer-offset: 0px;
+  }
+
+  .app-credit-footer {
+    display: none !important;
+  }
+
+  /* Teleport to body escapes parent v-show — hide mobile dock chrome on desktop */
+  .app-dock-add-bar,
+  .wallet-card-slider {
+    display: none !important;
+  }
+
+  .transaction-list,
+  .card-slider-wrap {
+    width: 100% !important;
+    max-width: none !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+html.app-layout--desktop {
+  @media screen and (min-width: @desktop-layout-min) {
+    .wrap-fix {
+      right: var(--app-desktop-sidebar-width, 260px) !important;
+    }
+  }
+
+  &.app-layout--desktop-no-sidebar .wrap-fix {
+    right: 0 !important;
+  }
+}
+
+/* Splash — always full viewport; never sidebar-offset */
+.app-splash-screen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  min-height: 100vh;
+  max-width: none;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 1000000000000;
+
+  &__gradient {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+
+    &--top {
+      top: 0;
+    }
+
+    &--bottom {
+      bottom: 0;
+    }
+  }
+}
+
+html.app-layout--desktop .app-splash-screen {
+  right: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+}
+
+/* Login — full viewport on desktop */
+html.app-layout--desktop {
+  .login-page-root,
+  .dauth {
+    width: 100% !important;
+    min-height: 100vh;
+  }
+
+  .dauth__layout {
+    min-height: 100vh;
+  }
+}
diff --git a/src/layouts/styles/mobile-frame.less b/src/layouts/styles/mobile-frame.less
new file mode 100644
index 0000000..1dc33dd
--- /dev/null
+++ b/src/layouts/styles/mobile-frame.less
@@ -0,0 +1,84 @@
+/**
+ * Mobile shell width rules.
+ * Below 426px: full viewport (phones).
+ * 426px–767px: centered 426px frame (tablet-ish mobile).
+ */
+
+html:not(.app-layout--desktop) {
+  /* Teleport to body — dock bar must span viewport, not shrink to content */
+  .app-dock-add-bar,
+  .wallet-card-slider {
+    box-sizing: border-box;
+  }
+
+  @media screen and (max-width: 425.98px) {
+    body {
+      display: block !important;
+      width: 100% !important;
+      overflow-x: hidden;
+    }
+
+    #app,
+    .desktopConfig,
+    .app-main,
+    .main-with-bottom-chrome,
+    .main-with-bottom-chrome-inner {
+      width: 100% !important;
+      max-width: 100vw !important;
+      min-width: 0 !important;
+      margin: 0 !important;
+    }
+
+    .wrap-fix,
+    .bottom-appbar {
+      width: 100% !important;
+      max-width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin: 0 !important;
+      transform: none !important;
+    }
+
+    .app-dock-add-bar,
+    .wallet-card-slider {
+      width: 100% !important;
+      max-width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin: 0 !important;
+      transform: none !important;
+    }
+  }
+
+  @media screen and (min-width: 426px) and (max-width: 767.98px) {
+    body {
+      display: flex !important;
+      justify-content: center;
+    }
+
+    .desktopConfig {
+      width: 426px !important;
+      max-width: 426px !important;
+    }
+
+    .wrap-fix,
+    .bottom-appbar {
+      width: 426px !important;
+      max-width: 426px !important;
+      left: 50% !important;
+      right: auto !important;
+      margin: 0 !important;
+      transform: translateX(-50%) !important;
+    }
+
+    .app-dock-add-bar,
+    .wallet-card-slider {
+      width: 426px !important;
+      max-width: 426px !important;
+      left: 50% !important;
+      right: auto !important;
+      margin: 0 !important;
+      transform: translateX(-50%) !important;
+    }
+  }
+}
diff --git a/src/layouts/types.ts b/src/layouts/types.ts
new file mode 100644
index 0000000..0a9d464
--- /dev/null
+++ b/src/layouts/types.ts
@@ -0,0 +1,6 @@
+export interface AppNavItem {
+  id: string
+  routeName: string
+  label: string
+  icon: string
+}
diff --git a/src/store/settingsStore.ts b/src/store/settingsStore.ts
index 828a20c..7a80678 100644
--- a/src/store/settingsStore.ts
+++ b/src/store/settingsStore.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { getSettings } from '@/api/configuration'
 import { resolveMeltedGoldLabel, resolveMetalTypeLabel } from '@/utils/metalLabels'
 import { resolveTradeWeightUnit } from '@/utils/weightUnit'
+import { runOnceAsync } from '@/composables/useOnceAsync'
 
 export interface AppSetting {
   id?: number
@@ -45,17 +46,20 @@ export const useSettingsStore = defineStore('settings', () => {
     settings.value = merged
   }
 
-  async function fetchSettings() {
-    try {
-      const data = await getSettings()
-      if (Array.isArray(data)) {
-        mergeSettings(data)
+  async function fetchSettings(force = false) {
+    return runOnceAsync('settings:all', async () => {
+      try {
+        const data = await getSettings()
+        if (Array.isArray(data)) {
+          mergeSettings(data)
+        }
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loaded.value = true
       }
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loaded.value = true
-    }
+      return settings.value
+    }, force)
   }
 
   const metalTypeSettingValue = computed(() => getSettingByKey('metal_type'))
diff --git a/src/utils/config.ts b/src/utils/config.ts
index fa96c1e..29aa636 100644
--- a/src/utils/config.ts
+++ b/src/utils/config.ts
@@ -114,7 +114,7 @@ export function getProjectLoginTaglineLines() {
   }
 
   return [
-    'بورس مس مرجع هوشمند معاملات',
+    'مرجع هوشمند معاملات',
     ' و سرمایه‌گذاری در صنعت مس',
   ]
 }
@@ -123,6 +123,18 @@ export function getProjectSplashBackground() {
   return isBoursecuProject() ? BOURSECU_BRAND_NAV : '#ffffff'
 }
 
+/** Reset splash-time inline backgrounds so mobile overscroll shows white again. */
+export function resetAppSurfaceBackground() {
+  const background = '#ffffff'
+  document.documentElement.style.backgroundColor = background
+  document.body.style.backgroundColor = background
+
+  const metaTheme = document.querySelector('meta[name="theme-color"]')
+  if (metaTheme) {
+    metaTheme.setAttribute('content', background)
+  }
+}
+
 export function getProjectFontFamily() {
   return getConfigApp('name') === 'boursecu' ? "'dana', sans-serif" : "'iran-sans', sans-serif"
 }
@@ -142,6 +154,7 @@ export function applyProjectTheme() {
   }
 
   document.documentElement.classList.add('project-boursecu')
+  document.documentElement.style.setProperty('--App-brand-nav', BOURSECU_BRAND_NAV)
   document.documentElement.style.setProperty('--App-brand-red', BOURSECU_BRAND_RED)
   document.documentElement.style.setProperty('--App-brand-red-50', '#f8ecec')
   document.documentElement.style.setProperty('--App-brand-red-100', '#f0d8d8')
diff --git a/src/utils/persianDigits.ts b/src/utils/persianDigits.ts
new file mode 100644
index 0000000..76a9d4e
--- /dev/null
+++ b/src/utils/persianDigits.ts
@@ -0,0 +1,29 @@
+const PERSIAN_DIGITS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'] as const
+
+export function toPersianDigits(value: string | number | null | undefined): string {
+  if (value === null || value === undefined) return ''
+  return String(value).replace(/\d/g, (digit) => PERSIAN_DIGITS[Number(digit)] ?? digit)
+}
+
+export function toEnglishDigits(value: string): string {
+  return value.replace(/[۰-۹]/g, (digit) => {
+    const index = PERSIAN_DIGITS.indexOf(digit as (typeof PERSIAN_DIGITS)[number])
+    return index >= 0 ? String(index) : digit
+  })
+}
+
+export function formatFixed(value: string | number | null | undefined, decimals = 2): string {
+  const num = Number(value)
+  if (!Number.isFinite(num)) return toPersianDigits(String(value ?? ''))
+  return toPersianDigits(num.toFixed(decimals))
+}
+
+export function formatPercent(
+  value: number,
+  decimals = 2,
+  options: { showSign?: boolean; suffix?: string } = {},
+): string {
+  const { showSign = false, suffix = '%' } = options
+  const prefix = showSign && value > 0 ? '+' : value < 0 ? '-' : showSign ? '+' : ''
+  return `${prefix}${formatFixed(Math.abs(value), decimals)}${suffix}`
+}
diff --git a/src/utils/productAssets.ts b/src/utils/productAssets.ts
index fb2cd43..ca1b347 100644
--- a/src/utils/productAssets.ts
+++ b/src/utils/productAssets.ts
@@ -1,3 +1,4 @@
+import { toPersianDigits } from '@/utils/persianDigits'
 import type { Product } from '@/models/products'
 import type { UserWalletLine } from '@/models/wallet'
 import type { ProductFile } from '@/utils/file'
diff --git a/src/utils/productPrice.ts b/src/utils/productPrice.ts
index ed67af2..6b021e3 100644
--- a/src/utils/productPrice.ts
+++ b/src/utils/productPrice.ts
@@ -2,13 +2,37 @@ import type { Product } from '@/models/products'
 import { getTradeBuyPrice, getTradeSellPrice, lastPrice } from '@/utils/price'
 import { isMetalCommodityGroup, isMeltedProductUsingAppPrice, isMeltedTradeGroup } from '@/utils/productCategories'
 
-function applyPriceOffsetPercent(basePrice: number, offsetPercent?: number | null) {
+export function resolvePriceOffsetRatio(offsetPercent?: number | null) {
   const offset = Number(offsetPercent ?? 0)
   if (!offset) {
+    return 0
+  }
+
+  // 5 => 5% ، 0.05 => 5% (اعشاری)
+  if (Math.abs(offset) > 0 && Math.abs(offset) < 1) {
+    return offset
+  }
+
+  return offset / 100
+}
+
+export function applyPriceOffsetPercent(basePrice: number, offsetPercent?: number | null) {
+  const ratio = resolvePriceOffsetRatio(offsetPercent)
+  if (!ratio) {
     return basePrice
   }
 
-  return Math.round(basePrice * (1 + offset / 100))
+  return Math.round(basePrice * (1 + ratio))
+}
+
+/** boursecu chart: قیمت + (قیمت × offset) */
+export function applyChartPriceOffset(basePrice: number, offsetPercent?: number | null) {
+  const ratio = resolvePriceOffsetRatio(offsetPercent)
+  if (!ratio) {
+    return basePrice
+  }
+
+  return Math.round(basePrice + basePrice * ratio)
 }
 
 /** قیمت خرید نمایشی محصول (همان مقداری که در لیست و اکشن‌شیت نشان داده می‌شود) */
diff --git a/src/views/base/about/components/AboutSectionsContent.vue b/src/views/base/about/components/AboutSectionsContent.vue
new file mode 100644
index 0000000..92bdcea
--- /dev/null
+++ b/src/views/base/about/components/AboutSectionsContent.vue
@@ -0,0 +1,67 @@
+<template>
+  <div
+    :class="variant === 'desktop'
+      ? (isBoursecu ? 'dabout-content--boursecu' : 'dabout-content--default')
+      : (isBoursecuProject()
+        ? 'mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4 text-xs leading-5'
+        : 'bg-primary text-white rounded-[12px] p-4 text-xs leading-5')"
+    class="dabout-content"
+  >
+    <template v-for="(section, sectionIndex) in aboutSections" :key="sectionIndex">
+      <div
+        v-if="sectionIndex > 0"
+        :class="variant === 'desktop' ? 'dabout-content__divider' : 'w-full h-1px my-3 bg-tertiary'"
+      ></div>
+      <div
+        v-if="section.title"
+        :class="variant === 'desktop' ? 'dabout-content__title' : 'font-bold text-sm mb-2'"
+      >
+        {{ section.title }}
+      </div>
+      <div
+        v-for="(paragraph, paragraphIndex) in section.paragraphs ?? []"
+        :key="`paragraph-${sectionIndex}-${paragraphIndex}`"
+        :class="[
+          variant === 'desktop' ? 'dabout-content__paragraph' : '',
+          paragraphIndex > 0 ? 'mt-3' : '',
+        ]"
+      >
+        {{ paragraph }}
+      </div>
+      <ul
+        v-if="(section.items ?? []).length"
+        :class="variant === 'desktop' ? 'dabout-content__list' : ''"
+      >
+        <li
+          v-for="(item, itemIndex) in section.items ?? []"
+          :key="`item-${sectionIndex}-${itemIndex}`"
+          :class="variant === 'desktop' ? 'dabout-content__list-item' : 'mt-2'"
+        >
+          <template v-if="variant !== 'desktop'">• {{ item }}</template>
+          <template v-else>{{ item }}</template>
+        </li>
+      </ul>
+    </template>
+    <div
+      v-if="variant !== 'desktop'"
+      class="w-full h-1px my-3 bg-tertiary"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAboutPageContext } from '../composables/useAboutPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const {
+  aboutSections,
+  isBoursecu,
+  isBoursecuProject,
+} = useAboutPageContext()
+</script>
diff --git a/src/views/base/about/components/AboutSupportActions.vue b/src/views/base/about/components/AboutSupportActions.vue
new file mode 100644
index 0000000..cc9ed7a
--- /dev/null
+++ b/src/views/base/about/components/AboutSupportActions.vue
@@ -0,0 +1,41 @@
+<template>
+  <div :class="variant === 'desktop' ? 'dabout-support' : 'wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white'">
+    <a class="w-full" :href="supportHref">
+      <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
+    </a>
+    <a :href="baleHref" target="_blank" rel="noopener noreferrer">
+      <img src="@/assets/img/bale.png" alt="بله" :class="variant === 'desktop' ? 'dabout-support__bale' : 'h-10 w-10'" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { useAboutPageContext } from '../composables/useAboutPage'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const {
+  config,
+  getProjectSupportPhoneLink,
+  getProjectBaleLink,
+} = useAboutPageContext()
+
+const supportHref = computed(() =>
+  config.config.name === 'garoosi'
+    ? 'tel:09031265925'
+    : getProjectSupportPhoneLink(),
+)
+
+const baleHref = computed(() =>
+  config.config.name === 'garoosi'
+    ? 'https://ble.ir/garoosigallery'
+    : getProjectBaleLink(),
+)
+</script>
diff --git a/src/views/base/about/composables/useAboutPage.ts b/src/views/base/about/composables/useAboutPage.ts
new file mode 100644
index 0000000..aeeb379
--- /dev/null
+++ b/src/views/base/about/composables/useAboutPage.ts
@@ -0,0 +1,48 @@
+import { computed, inject, provide, type InjectionKey, type ComputedRef } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+import {
+  getProjectBaleLink,
+  getProjectSupportPhoneLink,
+  isBoursecuProject,
+} from '@/utils/config'
+import { getAboutSections, type AboutSection } from '../aboutContent'
+
+export interface AboutPageContext {
+  config: ReturnType<typeof useConfigStore>
+  aboutSections: ComputedRef<AboutSection[]>
+  isBoursecu: ComputedRef<boolean>
+  isBoursecuProject: typeof isBoursecuProject
+  getProjectSupportPhoneLink: typeof getProjectSupportPhoneLink
+  getProjectBaleLink: typeof getProjectBaleLink
+}
+
+export const ABOUT_PAGE_CONTEXT_KEY: InjectionKey<AboutPageContext> = Symbol('aboutPageContext')
+
+export function useAboutPage() {
+  const config = useConfigStore()
+  const nameProject = config.config.name_fa
+
+  const isBoursecu = computed(() => isBoursecuProject())
+
+  const aboutSections = computed(() => getAboutSections(nameProject, isBoursecu.value))
+
+  const context: AboutPageContext = {
+    config,
+    aboutSections,
+    isBoursecu,
+    isBoursecuProject,
+    getProjectSupportPhoneLink,
+    getProjectBaleLink,
+  }
+
+  provide(ABOUT_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useAboutPageContext() {
+  const context = inject(ABOUT_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useAboutPageContext must be used within a page that calls useAboutPage()')
+  }
+  return context
+}
diff --git a/src/views/base/about/desktop/DesktopAboutView.vue b/src/views/base/about/desktop/DesktopAboutView.vue
new file mode 100644
index 0000000..cd81c73
--- /dev/null
+++ b/src/views/base/about/desktop/DesktopAboutView.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="dabout">
+    <div class="dabout__container">
+      <header class="dabout-topbar">
+        <button type="button" class="dabout-topbar__back" @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          <span>بازگشت</span>
+        </button>
+        <div class="dabout-topbar__meta">
+          <p class="dabout-topbar__eyebrow">اطلاعات</p>
+          <h1 class="dabout-topbar__title">درباره ما</h1>
+        </div>
+      </header>
+
+      <div class="dabout-layout">
+        <section class="dabout-surface dabout-main">
+          <div class="dabout-main__intro">
+            <div class="dabout-main__logo">
+              <BasicIcon icon="vuesax-linear:info-circle" size="28" />
+            </div>
+            <div>
+              <h2 class="dabout-main__project">{{ config.config.name_fa }}</h2>
+              <p class="dabout-main__tagline">آشنایی با خدمات و چشم‌انداز ما</p>
+            </div>
+          </div>
+
+          <AboutSectionsContent variant="desktop" />
+        </section>
+
+        <aside class="dabout-surface dabout-side">
+          <h3 class="dabout-side__title">پشتیبانی و ارتباط</h3>
+          <p class="dabout-side__text">
+            در صورت نیاز به راهنمایی یا پاسخ به سوالات، از راه‌های زیر با ما در ارتباط باشید.
+          </p>
+          <AboutSupportActions variant="desktop" />
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import AboutSectionsContent from '../components/AboutSectionsContent.vue'
+import AboutSupportActions from '../components/AboutSupportActions.vue'
+import { useAboutPageContext } from '../composables/useAboutPage'
+
+const { config } = useAboutPageContext()
+</script>
diff --git a/src/views/base/about/desktop/styles/desktop-about.less b/src/views/base/about/desktop/styles/desktop-about.less
new file mode 100644
index 0000000..8f940a0
--- /dev/null
+++ b/src/views/base/about/desktop/styles/desktop-about.less
@@ -0,0 +1,234 @@
+/* Premium desktop about page */
+
+.dabout {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dabout__container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dabout-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dabout-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
+  gap: 20px;
+  align-items: start;
+}
+
+.dabout-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dabout-main {
+  padding: 28px;
+
+  &__intro {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef0f3;
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: rgba(9, 61, 81, 0.08);
+    color: @App-primary-color;
+    flex-shrink: 0;
+  }
+
+  &__project {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 4px;
+  }
+
+  &__tagline {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+  }
+}
+
+.dabout-content {
+  &--default {
+    padding: 0;
+    background: transparent;
+    color: #374151;
+  }
+
+  &--boursecu {
+    padding: 20px;
+    border: 1px solid rgba(9, 61, 81, 0.15);
+    border-radius: 12px;
+    background: rgba(9, 61, 81, 0.03);
+    color: @App-primary-color;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    background: #eef0f3;
+    margin: 20px 0;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 700;
+    color: inherit;
+    margin: 0 0 10px;
+  }
+
+  &__paragraph {
+    font-size: 14px;
+    line-height: 1.9;
+    color: inherit;
+    text-align: justify;
+    margin: 0 0 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__list-item {
+    position: relative;
+    padding-right: 16px;
+    font-size: 14px;
+    line-height: 1.7;
+    color: inherit;
+
+    &::before {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 10px;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+      opacity: 0.6;
+    }
+  }
+}
+
+.dabout-side {
+  padding: 24px;
+  position: sticky;
+  top: 24px;
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 8px;
+  }
+
+  &__text {
+    font-size: 13px;
+    line-height: 1.7;
+    color: #6b7280;
+    margin: 0 0 20px;
+  }
+}
+
+.dabout-support {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  > a:first-child {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__bale {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .dabout-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .dabout-side {
+    position: static;
+  }
+}
diff --git a/src/views/base/about/index.vue b/src/views/base/about/index.vue
index 87ddebb..929bd0c 100644
--- a/src/views/base/about/index.vue
+++ b/src/views/base/about/index.vue
@@ -1,176 +1,24 @@
 <template>
-  <div>
-    <div class="bg-white wrap-fix z-200001 py-3 px-3 text-primary font-bold drop-shadow flex">
-      <div @click="router.back()" class="cursor-pointer">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">درباره ما</div>
-    </div>
-    <div class="pt-20">
-      <div>
-        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
-      </div>
-      <div class="text-justify text-base z-200000 relative">
-        <div class="px-10">
-<!--          <img :src="logoFull" class="mb-20 mt-5" />-->
-          <div class="overflow-y-auto h-65vh pb-20">
-            <div class="bg-primary text-white rounded-[12px] p-4 text-xs leading-5">
-              <template v-for="(section, sectionIndex) in aboutSections" :key="sectionIndex">
-                <div v-if="sectionIndex > 0" class="w-full h-1px my-3 bg-tertiary"></div>
-                <div v-if="section.title" class="font-bold text-sm mb-2">
-                  {{ section.title }}
-                </div>
-                <div
-                  v-for="(paragraph, paragraphIndex) in section.paragraphs ?? []"
-                  :key="`paragraph-${sectionIndex}-${paragraphIndex}`"
-                  :class="paragraphIndex > 0 ? 'mt-3' : ''"
-                >
-                  {{ paragraph }}
-                </div>
-                <div
-                  v-for="(item, itemIndex) in section.items ?? []"
-                  :key="`item-${sectionIndex}-${itemIndex}`"
-                  class="mt-2"
-                >
-                  • {{ item }}
-                </div>
-              </template>
-              <div class="w-full h-1px my-3 bg-tertiary"></div>
-            </div>
-          </div>
-        </div>
-        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
-          <a class="w-full" href="tel:09031265925">
-            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-          </a>
-          <a href="https://ble.ir/garoosigallery">
-            <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
-          </a>
-        </div>
-        <div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
-          <a class="w-full" :href="getProjectSupportPhoneLink()">
-            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-          </a>
-          <a :href="getProjectBaleLink()" target="_blank" rel="noopener noreferrer">
-            <img src="@/assets/img/bale.png" alt="بله" class="h-10 w-10"/>
-          </a>
-        </div>
-      </div>
-    </div>
-    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
+  <div class="about-page-root">
+    <DesktopAboutView v-show="isDesktop" />
+    <MobileAboutView v-show="!isDesktop" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, computed } from 'vue'
-import img from '@/assets/img/user_ly1.svg'
-import gr_bottom from './assets/img/gr_bottom_white.svg'
-import { loading } from '@/utils'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import { lengthValidation, required } from '@/utils/inputRules'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import type { User } from '@/models/login'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
-import type { FormInstance } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
-import { updateMe } from '@/api/me'
-import { useUserStore } from '@/store/userStore'
-import {useConfigStore} from "@/store/configStore";
-import {getProjectBaleLink, getProjectSupportPhoneLink, getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
-import { getAboutSections } from './aboutContent'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useAboutPage } from './composables/useAboutPage'
+import DesktopAboutView from './desktop/DesktopAboutView.vue'
+import MobileAboutView from './mobile/MobileAboutView.vue'
 
-const config=useConfigStore()
+const isDesktop = useDesktopBreakpoint()
 
-const userFormState = ref<User>({
-  fname: '',
-  lname: '',
-  mobile: undefined,
-  birth_date: '',
-  phone_number: '',
-  province: '',
-  city: '',
-  n_code: undefined
-})
-const formRef = ref<FormInstance>()
-const userStore = useUserStore()
-const nameProject= useConfigStore().config.name_fa
-const aboutSections = computed(() => getAboutSections(nameProject, isBoursecuProject()))
-
-// const editPassVisible = ref<boolean>(false)
-const editPassVisible = ref<boolean>(false)
-
-function setForm() {
-  userFormState.value = userStore.userInfo
-}
-
-function copyCode() {
-  // nextTick(() => {
-  const val = userStore.userInfo?.referral_id
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-function shareCode() {
-  const val = getReferralShareText({
-    userName: userStore.userInfo?.name,
-    projectName: nameProject,
-    referralId: userStore.userInfo?.referral_id,
-  })
-  navigator.share({
-    title: getReferralShareTitle(nameProject),
-    text: val
-  })
-}
-
-const resetData = () => {
-  formRef.value?.resetFields()
-  userFormState.value = {
-    fname: '',
-    lname: '',
-    mobile: undefined,
-    birth_date: '',
-    phone_number: '',
-    province: '',
-    city: '',
-    n_code: undefined
-  }
-}
-
-onMounted(() => {
-  setForm()
-})
-
-function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      await updateMe(userFormState.value)
-      await userStore.getMyInfo()
-      editPassVisible.value = false
-      message.success('اطلاعات شما با موفقیت به روز رسانی شد')
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
+useAboutPage()
 </script>
 
 <style scoped>
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
+.about-page-root {
+  min-height: 100%;
+  height: 100%;
 }
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
 </style>
diff --git a/src/views/base/about/mobile/MobileAboutView.vue b/src/views/base/about/mobile/MobileAboutView.vue
new file mode 100644
index 0000000..faae3ec
--- /dev/null
+++ b/src/views/base/about/mobile/MobileAboutView.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="bg-white wrap-fix z-200001 py-3 px-3 text-primary font-bold drop-shadow flex">
+      <div class="cursor-pointer" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">درباره ما</div>
+    </div>
+    <div class="pt-20">
+      <div>
+        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
+      </div>
+      <div class="text-justify text-base z-200000 relative">
+        <div class="px-10">
+          <div class="overflow-y-auto h-65vh pb-20">
+            <AboutSectionsContent variant="mobile" />
+          </div>
+        </div>
+        <AboutSupportActions variant="mobile" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import img from '@/assets/img/user_ly1.svg'
+import router from '@/router'
+import AboutSectionsContent from '../components/AboutSectionsContent.vue'
+import AboutSupportActions from '../components/AboutSupportActions.vue'
+</script>
diff --git a/src/views/base/aboutUs/components/AboutUsContentPanel.vue b/src/views/base/aboutUs/components/AboutUsContentPanel.vue
new file mode 100644
index 0000000..4959b06
--- /dev/null
+++ b/src/views/base/aboutUs/components/AboutUsContentPanel.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    :class="variant === 'desktop'
+      ? 'daboutus-content'
+      : 'mt-5 text-5 border-solid border-2 border-[#093D51] text-[#093D51] rounded-[12px] p-4'"
+  >
+    <img
+      v-if="variant !== 'desktop'"
+      :src="config.config?.avatar"
+      class="mb-2 mt-5 w-10rem"
+      style="justify-self: center"
+      alt=""
+    />
+
+    <div :class="variant === 'desktop' ? 'daboutus-content__body' : 'text-sm leading-7 space-y-2'">
+      <h2 :class="variant === 'desktop' ? 'daboutus-content__title' : 'text-base font-bold mb-3'">درباره ما</h2>
+
+      <div :class="variant === 'desktop' ? 'daboutus-content__paragraph' : 'mt-3'">
+        گروسی گالری بستری امن و آنلاین برای خرید و فروش طلای آبشده فراهم کرده تا کاربران بتوانند سرمایه‌های خرد خود را به راحتی پس‌انداز و مدیریت کنند.
+      </div>
+      <div :class="variant === 'desktop' ? 'daboutus-content__paragraph' : 'mt-3'">
+        هدف ما ایجاد تجربه‌ای سریع، شفاف و کاربرپسند در معاملات طلای آبشده است.
+      </div>
+    </div>
+
+    <div :class="variant === 'desktop' ? 'daboutus-content__enamad' : ''" style="justify-self: center">
+      <a
+        referrerpolicy="origin"
+        target="_blank"
+        href="https://trustseal.enamad.ir/?id=710578&Code=DdltBYWJgvc7LJs9eM46SEliXRRU0kSW"
+      >
+        <img
+          referrerpolicy="origin"
+          src="https://trustseal.enamad.ir/logo.aspx?id=710578&Code=DdltBYWJgvc7LJs9eM46SEliXRRU0kSW"
+          alt="enamad"
+          style="cursor:pointer"
+          code="DdltBYWJgvc7LJs9eM46SEliXRRU0kSW"
+        />
+      </a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useAboutUsPageContext } from '../composables/useAboutUsPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const { config } = useAboutUsPageContext()
+</script>
diff --git a/src/views/base/aboutUs/composables/useAboutUsPage.ts b/src/views/base/aboutUs/composables/useAboutUsPage.ts
new file mode 100644
index 0000000..f95daa4
--- /dev/null
+++ b/src/views/base/aboutUs/composables/useAboutUsPage.ts
@@ -0,0 +1,27 @@
+import { inject, provide, type InjectionKey } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+
+export interface AboutUsPageContext {
+  config: ReturnType<typeof useConfigStore>
+}
+
+export const ABOUT_US_PAGE_CONTEXT_KEY: InjectionKey<AboutUsPageContext> = Symbol('aboutUsPageContext')
+
+export function useAboutUsPage() {
+  const config = useConfigStore()
+
+  const context: AboutUsPageContext = {
+    config,
+  }
+
+  provide(ABOUT_US_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useAboutUsPageContext() {
+  const context = inject(ABOUT_US_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useAboutUsPageContext must be used within a page that calls useAboutUsPage()')
+  }
+  return context
+}
diff --git a/src/views/base/aboutUs/desktop/DesktopAboutUsView.vue b/src/views/base/aboutUs/desktop/DesktopAboutUsView.vue
new file mode 100644
index 0000000..03e9711
--- /dev/null
+++ b/src/views/base/aboutUs/desktop/DesktopAboutUsView.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="daboutus">
+    <div class="daboutus__container">
+      <header class="daboutus-topbar">
+        <button type="button" class="daboutus-topbar__back" @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          <span>بازگشت</span>
+        </button>
+        <div class="daboutus-topbar__meta">
+          <p class="daboutus-topbar__eyebrow">اطلاعات</p>
+          <h1 class="daboutus-topbar__title">درباره ما</h1>
+        </div>
+      </header>
+
+      <section class="daboutus-surface daboutus-main">
+        <div class="daboutus-main__intro">
+          <div class="daboutus-main__logo">
+            <img :src="config.config?.avatar" alt="" class="daboutus-main__avatar" />
+          </div>
+          <div>
+            <h2 class="daboutus-main__project">{{ config.config.name_fa }}</h2>
+            <p class="daboutus-main__tagline">آشنایی با خدمات و چشم‌انداز ما</p>
+          </div>
+        </div>
+
+        <div class="daboutus-main__scroll">
+          <AboutUsContentPanel variant="desktop" />
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import AboutUsContentPanel from '../components/AboutUsContentPanel.vue'
+import { useAboutUsPageContext } from '../composables/useAboutUsPage'
+
+const { config } = useAboutUsPageContext()
+</script>
diff --git a/src/views/base/aboutUs/desktop/styles/desktop-about-us.less b/src/views/base/aboutUs/desktop/styles/desktop-about-us.less
new file mode 100644
index 0000000..ccfecf4
--- /dev/null
+++ b/src/views/base/aboutUs/desktop/styles/desktop-about-us.less
@@ -0,0 +1,168 @@
+/* Premium desktop about-us page */
+
+.daboutus {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.daboutus__container {
+  max-width: 860px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.daboutus-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.daboutus-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.daboutus-main {
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: calc(100vh - 180px);
+
+  &__intro {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef0f3;
+    flex-shrink: 0;
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: rgba(9, 61, 81, 0.08);
+    flex-shrink: 0;
+    overflow: hidden;
+  }
+
+  &__avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    padding: 6px;
+  }
+
+  &__project {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 4px;
+  }
+
+  &__tagline {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+  }
+
+  &__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding-left: 4px;
+    margin-left: -4px;
+  }
+}
+
+.daboutus-content {
+  padding: 20px;
+  border: 1px solid rgba(9, 61, 81, 0.15);
+  border-radius: 12px;
+  background: rgba(9, 61, 81, 0.03);
+  color: @App-primary-color;
+
+  &__title {
+    font-size: 16px;
+    font-weight: 700;
+    color: inherit;
+    margin: 0 0 12px;
+  }
+
+  &__paragraph {
+    font-size: 14px;
+    line-height: 1.9;
+    color: inherit;
+    text-align: justify;
+    margin: 0 0 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__enamad {
+    display: flex;
+    justify-content: center;
+    margin-top: 24px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(9, 61, 81, 0.12);
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .daboutus-main {
+    max-height: none;
+  }
+}
diff --git a/src/views/base/aboutUs/index.vue b/src/views/base/aboutUs/index.vue
index 6253846..6978f8a 100644
--- a/src/views/base/aboutUs/index.vue
+++ b/src/views/base/aboutUs/index.vue
@@ -1,64 +1,24 @@
 <template>
-  <div>
-    <div class="wrap-fix z-1 bg-white py-3 px-3 text-black font-bold drop-shadow flex">
-      <div @click="router.back()" class="cursor-pointer">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">درباره ما</div>
-    </div>
-    <div class="pt-20">
-      <div>
-        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
-      </div>
-      <div class="text-justify text-base z-200000 relative">
-        <div class="px-10">
-          <img :src="config.config?.avatar" class="mb-2 mt-5 w-10rem" style="justify-self: center"/>
-          <div class="overflow-y-auto h-65vh pb-20 border-[#093D51]">
-            <div
-              class="mt-5 text-5 border-solid border-2 border-[#093D51] text-[#093D51] rounded-[12px] p-4"
-            >
-              <div class="text-sm leading-7 space-y-2">
-                <h2 class="text-base font-bold mb-3">درباره ما</h2>
-
-                <div class="mt-3"> گروسی گالری بستری امن و آنلاین برای خرید و فروش طلای آبشده فراهم کرده تا کاربران بتوانند سرمایه‌های خرد خود را به راحتی پس‌انداز و مدیریت کنند. </div>
-                <div class="mt-3"> هدف ما ایجاد تجربه‌ای سریع، شفاف و کاربرپسند در معاملات طلای آبشده است. </div>
-
-<!--                <div class="mt-4 border-t pt-3">
-                  <h3 class="font-semibold mb-2">اطلاعات تماس</h3>
-                  <div class="space-y-1">
-                    <div> <span class="font-medium">ایمیل:</span> <a href="mailto:hajiabolfath@gmail.com" class="text-blue-600">hajiabolfath@gmail.com</a> </div>
-                    <div> <span class="font-medium">کد پستی:</span> ۳۷۱۳۷۶۴۸۹۰ </div>
-                    <div> <span class="font-medium">آدرس:</span> استان قم، شهرستان قم، بخش مرکزی، شهر قم، محله ارم (بازار)، کوچه مرعشی نجفی ۸، خیابان آیت‌الله مرعشی نجفی (ارم)، تجاری ارم، طبقه ۱، واحد ۱۵۵</div>
-                  </div>
-                </div>-->
-              </div>
-
-              <div style="justify-self: center">
-                <a referrerpolicy='origin' target='_blank' href='https://trustseal.enamad.ir/?id=710578&Code=DdltBYWJgvc7LJs9eM46SEliXRRU0kSW'>
-                  <img referrerpolicy='origin' src='https://trustseal.enamad.ir/logo.aspx?id=710578&Code=DdltBYWJgvc7LJs9eM46SEliXRRU0kSW'
-                       alt='enamad'
-                       style='cursor:pointer'
-                       code='DdltBYWJgvc7LJs9eM46SEliXRRU0kSW'
-                  >
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div class="about-us-page-root">
+    <DesktopAboutUsView v-show="isDesktop" />
+    <MobileAboutUsView v-show="!isDesktop" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useConfigStore} from "@/store/configStore";
-import img from '@/assets/img/user_ly1.svg'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useAboutUsPage } from './composables/useAboutUsPage'
+import DesktopAboutUsView from './desktop/DesktopAboutUsView.vue'
+import MobileAboutUsView from './mobile/MobileAboutUsView.vue'
 
-const config = useConfigStore()
+const isDesktop = useDesktopBreakpoint()
 
+useAboutUsPage()
 </script>
 
 <style scoped>
+.about-us-page-root {
+  min-height: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/views/base/aboutUs/mobile/MobileAboutUsView.vue b/src/views/base/aboutUs/mobile/MobileAboutUsView.vue
new file mode 100644
index 0000000..127917f
--- /dev/null
+++ b/src/views/base/aboutUs/mobile/MobileAboutUsView.vue
@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <div class="wrap-fix z-1 bg-white py-3 px-3 text-black font-bold drop-shadow flex">
+      <div class="cursor-pointer" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">درباره ما</div>
+    </div>
+    <div class="pt-20">
+      <div>
+        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
+      </div>
+      <div class="text-justify text-base z-200000 relative">
+        <div class="px-10">
+          <div class="overflow-y-auto h-65vh pb-20 border-[#093D51]">
+            <AboutUsContentPanel variant="mobile" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import img from '@/assets/img/user_ly1.svg'
+import router from '@/router'
+import AboutUsContentPanel from '../components/AboutUsContentPanel.vue'
+</script>
diff --git a/src/views/base/address/components/AddressForm.vue b/src/views/base/address/components/AddressForm.vue
new file mode 100644
index 0000000..be4a7f0
--- /dev/null
+++ b/src/views/base/address/components/AddressForm.vue
@@ -0,0 +1,101 @@
+<template>
+  <a-form
+    ref="formRef"
+    :model="address"
+    :class="variant === 'desktop' ? 'daddr-form' : '!mt-5'"
+    name="address-form"
+  >
+    <div :class="variant === 'desktop' ? 'daddr-form__fields' : 'flex flex-col items-center'">
+      <div
+        v-if="variant !== 'desktop'"
+        class="font-bold text-lg mb-2"
+      >
+        آدرس
+      </div>
+      <div
+        :class="variant === 'desktop'
+          ? 'daddr-form__grid'
+          : 'flex flex-col gap-4 pb-20 w-full h-60vh overflow-y-scroll'"
+      >
+        <a-form-item label="استان" name="province" :rules="[required()]">
+          <BasicSelect
+            v-model:value="address.province"
+            :items="provinceList"
+            value-name="title"
+            key-name="title"
+            :size="variant === 'desktop' ? 'large' : undefined"
+            @change="changeProvince"
+          />
+        </a-form-item>
+        <a-form-item label="شهر" name="city" :rules="[required()]">
+          <BasicSelect
+            v-model:value="address.city"
+            :disabled="!cityList"
+            value-name="title"
+            :items="cityList"
+            key-name="title"
+            :size="variant === 'desktop' ? 'large' : undefined"
+          />
+        </a-form-item>
+        <a-form-item label="کد پستی" name="zip" :rules="[required()]">
+          <BasicInput
+            v-model:value="address.zip"
+            placeholder="کد پستی را وارد نمایید"
+            :size="variant === 'desktop' ? 'large' : undefined"
+          />
+        </a-form-item>
+        <a-form-item label="تلفن تماس" name="phone" :rules="[required()]">
+          <BasicInput
+            v-model:value="address.phone"
+            placeholder="تلفن تماس را وارد نمایید"
+            :size="variant === 'desktop' ? 'large' : undefined"
+          />
+        </a-form-item>
+        <a-form-item
+          label="آدرس کامل"
+          name="address"
+          :rules="[required()]"
+          :class="variant === 'desktop' ? 'daddr-form__address-item' : ''"
+        >
+          <BasicTextArea
+            v-model:value="address.address"
+            placeholder="آدرس کامل را وارد نمایید"
+          />
+        </a-form-item>
+        <BasicButton
+          :class="variant === 'desktop' ? 'daddr-form__submit' : '!text-white px-3 pb-4rem'"
+          type="primary"
+          @click="handleOk"
+        >
+          {{ editId ? 'ویرایش آدرس' : 'ثبت آدرس' }}
+        </BasicButton>
+      </div>
+    </div>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
+import BasicTextArea from '@/components/BasicPacks/BasicTextArea.vue'
+import { required } from '@/utils/inputRules'
+import { useAddressPageContext } from '../composables/useAddressPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const {
+  address,
+  formRef,
+  editId,
+  provinceList,
+  cityList,
+  changeProvince,
+  handleOk,
+} = useAddressPageContext()
+</script>
diff --git a/src/views/base/address/components/AddressMobileItem.vue b/src/views/base/address/components/AddressMobileItem.vue
new file mode 100644
index 0000000..6794caf
--- /dev/null
+++ b/src/views/base/address/components/AddressMobileItem.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="address-mobile-item shadow mb-2 p-2 rounded-lg w-full">
+    <div class="flex justify-between">
+      <div>
+        <div class="font-semibold text-base mb-2">{{ item.address }}</div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2 mt-2">
+      <BasicInfoItem is-line title="استان" :value="item.province" />
+      <BasicInfoItem is-line title="شهر" :value="item.city" />
+      <BasicInfoItem is-line title="کد پستی" :value="item.zip" />
+      <BasicInfoItem is-line title="شماره تلفن" :value="item.phone" />
+    </div>
+    <a-divider class="!my-3" />
+
+    <div class="flex justify-between mt-1">
+      <div class="mb-2">{{ formatAddressDate(item.created_at) }}</div>
+      <div class="flex gap-2">
+        <BasicIcon
+          color="red"
+          icon="vuesax-linear:trash"
+          class="p-1"
+          @click.stop="deleteConfirmVisible = true"
+        />
+        <BasicIcon
+          color="green"
+          icon="vuesax-linear:edit"
+          class="p-1"
+          @click.stop="emits('edit', item)"
+        />
+      </div>
+    </div>
+
+    <DialogVant
+      v-model:show="deleteConfirmVisible"
+      teleport="body"
+      :close-on-click-overlay="false"
+      :time-out="-1"
+    >
+      <template #title>
+        <div class="flex flex-col items-center">
+          <div class="p-5 text-sm">آیا از حذف آدرس اطمینان دارید؟</div>
+        </div>
+      </template>
+      <template #button>
+        <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
+          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
+        </div>
+        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
+      </template>
+    </DialogVant>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { toJalali } from '@/utils/useDateTime'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
+import DialogVant from '@/components/DialogVant.vue'
+import type { Address } from '@/models/address'
+import { deleteAddress } from '@/api/address'
+
+const deleteLoading = ref(false)
+const deleteConfirmVisible = ref(false)
+
+const props = defineProps<{
+  item: Address
+}>()
+
+const emits = defineEmits<{
+  edit: [item: Address]
+  refresh: []
+}>()
+
+function formatAddressDate(dateTime?: string) {
+  if (!dateTime) return ''
+  const formatted = toJalali(dateTime)
+  return formatted.includes('Invalid') ? '' : formatted
+}
+
+async function deleteItem() {
+  try {
+    deleteLoading.value = true
+    await deleteAddress(props.item.id!)
+    deleteConfirmVisible.value = false
+    emits('refresh')
+  } catch (e) {
+    console.log(e)
+  } finally {
+    deleteLoading.value = false
+  }
+}
+</script>
diff --git a/src/views/base/address/components/Item.vue b/src/views/base/address/components/Item.vue
index a975372..2335245 100644
--- a/src/views/base/address/components/Item.vue
+++ b/src/views/base/address/components/Item.vue
@@ -1,112 +1,155 @@
 <template>
-  <div @click="infoVisible = true" class="shadow mb-2 p-2 rounded-lg">
+  <div v-if="variant === 'desktop'" class="daddr-card">
+    <p class="daddr-card__address">{{ item.address }}</p>
 
+    <div class="daddr-card__meta">
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">استان:</span>
+        <span class="daddr-card__value">{{ item.province }}</span>
+      </div>
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">شهر:</span>
+        <span class="daddr-card__value">{{ item.city }}</span>
+      </div>
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">کد پستی:</span>
+        <span class="daddr-card__value">{{ item.zip }}</span>
+      </div>
+      <div class="daddr-card__row">
+        <span class="daddr-card__label">شماره تلفن:</span>
+        <span class="daddr-card__value">{{ item.phone }}</span>
+      </div>
+    </div>
+
+    <div class="daddr-card__actions">
+      <button
+        type="button"
+        class="daddr-card__icon-btn daddr-card__icon-btn--edit"
+        @click.stop="emits('edit', item)"
+      >
+        <BasicIcon color="green" icon="vuesax-linear:edit" size="18" />
+      </button>
+      <button
+        type="button"
+        class="daddr-card__icon-btn daddr-card__icon-btn--danger"
+        @click.stop="deleteConfirmVisible = true"
+      >
+        <BasicIcon color="red" icon="vuesax-linear:trash" size="18" />
+      </button>
+    </div>
+
+    <div class="daddr-card__footer">
+      <span class="daddr-card__date">{{ formatAddressDate(item.created_at) }}</span>
+    </div>
+
+    <DialogVant
+      v-model:show="deleteConfirmVisible"
+      :close-on-click-overlay="false"
+      :time-out="-1"
+      teleport="body"
+    >
+      <template #title>
+        <div class="flex flex-col items-center">
+          <div class="p-5 text-sm">آیا از حذف آدرس اطمینان دارید؟</div>
+        </div>
+      </template>
+      <template #button>
+        <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
+          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
+        </div>
+        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
+      </template>
+    </DialogVant>
+  </div>
+
+  <div v-else class="shadow mb-2 p-2 rounded-lg">
     <div class="flex justify-between">
       <div>
-        <div class="font-semibold text-base mb-2">{{item.address }}</div>
+        <div class="font-semibold text-base mb-2">{{ item.address }}</div>
       </div>
-
     </div>
     <div class="flex flex-col gap-2 mt-2">
-      <BasicInfoItem is-line title="استان" :value="item.province"/>
-      <BasicInfoItem is-line title="شهر" :value="item.city"/>
-      <BasicInfoItem is-line title="کد پستی" :value="item.zip"/>
-      <BasicInfoItem is-line title="شماره تلفن" :value="item.phone"/>
+      <BasicInfoItem is-line title="استان" :value="item.province" />
+      <BasicInfoItem is-line title="شهر" :value="item.city" />
+      <BasicInfoItem is-line title="کد پستی" :value="item.zip" />
+      <BasicInfoItem is-line title="شماره تلفن" :value="item.phone" />
     </div>
     <a-divider class="!my-3" />
 
     <div class="flex justify-between mt-1">
-      <div class="mb-2">{{toJalali(item.created_at)}}</div>
-      <div class="flex gap-2 ">
-        <BasicIcon color="red" icon="vuesax-linear:trash" @click.stop="deleteConfirmVisible = true" class="p-1"/>
-        <BasicIcon color="green" icon="vuesax-linear:edit" @click.stop="emits('edit',item)" class="p-1"/>
+      <div class="mb-2">{{ formatAddressDate(item.created_at) }}</div>
+      <div class="flex gap-2">
+        <BasicIcon
+          color="red"
+          icon="vuesax-linear:trash"
+          class="p-1"
+          @click.stop="deleteConfirmVisible = true"
+        />
+        <BasicIcon
+          color="green"
+          icon="vuesax-linear:edit"
+          class="p-1"
+          @click.stop="emits('edit', item)"
+        />
       </div>
     </div>
 
-  </div>
-
-<!--  <teleport to="app">-->
-    <DialogVant v-model:show="deleteConfirmVisible" teleport="body" :closeOnClickOverlay="false" :timeOut="-1">
-      <!--      <template v-slot:img>
-              <img :src="registerDelayImage" alt="" class="opacity-80">
-            </template>-->
-
-      <template v-slot:title>
+    <DialogVant
+      v-model:show="deleteConfirmVisible"
+      teleport="body"
+      :close-on-click-overlay="false"
+      :time-out="-1"
+    >
+      <template #title>
         <div class="flex flex-col items-center">
-          <div class="p-5 text-sm">
-            آیا از حذف آدرس اطمینان دارید؟
-          </div>
+          <div class="p-5 text-sm">آیا از حذف آدرس اطمینان دارید؟</div>
         </div>
       </template>
-
-      <template v-slot:button>
+      <template #button>
         <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
-          <a-spin :spinning="deleteLoading" size="small">
-            تایید
-          </a-spin>
-        </div>
-        <div class="text-center" @click="deleteConfirmVisible = false">
-          انصراف
+          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
         </div>
+        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
       </template>
-
     </DialogVant>
-<!--  </teleport>-->
-
+  </div>
 </template>
 
 <script lang="ts" setup>
-
-import { computed, onMounted, ref } from 'vue'
-import { toJalali } from '../../../../utils/useDateTime'
+import { ref } from 'vue'
+import { toJalali } from '@/utils/useDateTime'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
 import DialogVant from '@/components/DialogVant.vue'
-import { updatePriceTrigger } from '@/api/triggerPrice'
-import { loading } from '@/utils'
 import type { Address } from '@/models/address'
 import { deleteAddress } from '@/api/address'
 
-const infoVisible = ref<boolean>(false)
-
-const isActive = ref<boolean>(false)
-
 const deleteLoading = ref(false)
 const deleteConfirmVisible = ref(false)
 
-interface Prop {
-  item: Address
-}
-function changeActive(val: boolean) {
-  console.log(val)
-  try {
-    loading.value = true
-    updatePriceTrigger(props?.item.id, {is_active: val})
-  } catch (e) {
-    console.log(e)
-    isActive.value = !isActive.value
-  } finally {
-    loading.value = false
-  }
-}
+const props = withDefaults(
+  defineProps<{
+    item: Address
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
 
-function returnPriceCondition(val: string) {
-  switch (val) {
-    case '==': return 'مساوی'
-    case '<': return 'کوچکتر'
-    // case '==': return 'مساوی'
-  }
-/*  if (val === '=='){
-    return 'مساوی'
-  } else if (val === '<'){
-    return 'کوچکتر'
-  }*/
+const emits = defineEmits<{
+  edit: [item: Address]
+  refresh: []
+}>()
+
+function formatAddressDate(dateTime?: string) {
+  if (!dateTime) return ''
+  const formatted = toJalali(dateTime)
+  return formatted.includes('Invalid') ? '' : formatted
 }
 
 async function deleteItem() {
   try {
     deleteLoading.value = true
-    await deleteAddress(props.item.id)
+    await deleteAddress(props.item.id!)
     deleteConfirmVisible.value = false
     emits('refresh')
   } catch (e) {
@@ -115,42 +158,4 @@ async function deleteItem() {
     deleteLoading.value = false
   }
 }
-
-function returnAction(val: string) {
-  switch (val) {
-    case 'sms': return 'پیامک'
-    case 'email': return 'ایمیل'
-    case 'notify': return 'نوتیفیکیشن'
-    // case '==': return 'مساوی'
-  }
-  /*  if (val === '=='){
-      return 'مساوی'
-    } else if (val === '<'){
-      return 'کوچکتر'
-    }*/
-}
-
-
-const props = withDefaults(defineProps<Prop>(), {})
-const emits = defineEmits(['edit','refresh'])
-
-/*const title = computed(() => {
-  if (isUp.value) {
-    if (isGold.value) {
-      return 'واریز ریالی'
-    } else {
-      return 'خرید طلا'
-    }
-  } else {
-    if (isGold.value) {
-      return 'برداشت ریالی'
-    } else {
-      return 'فروش طلا'
-    }
-  }
-})*/
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/base/address/composables/useAddressPage.ts b/src/views/base/address/composables/useAddressPage.ts
new file mode 100644
index 0000000..3e2731e
--- /dev/null
+++ b/src/views/base/address/composables/useAddressPage.ts
@@ -0,0 +1,145 @@
+import { inject, onMounted, provide, ref, type InjectionKey, type Ref } from 'vue'
+import { cloneDeep } from 'lodash'
+import { type FormInstance, message } from 'ant-design-vue'
+import { createAddress, getCity, updateAddress } from '@/api/address'
+import type { Address } from '@/models/address'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { loading, loadingMore } from '@/utils'
+import { isBazretalaProject } from '@/utils/config'
+import {
+  addressItems,
+  addressProvinceList,
+  initAddressPageData,
+  refreshAddressItems,
+} from './useAddressPageData'
+
+export interface AddressPageContext {
+  provinceList: typeof addressProvinceList
+  cityList: Ref<any[] | undefined>
+  items: typeof addressItems
+  addAddressVisible: Ref<boolean>
+  editId: Ref<number | undefined>
+  address: Ref<Address>
+  formRef: Ref<FormInstance | undefined>
+  loading: typeof loading
+  loadingMore: typeof loadingMore
+  isBazretalaProject: typeof isBazretalaProject
+  resetFields: () => void
+  openAdd: () => void
+  openEdit: (val: Address) => void
+  handleOk: (e?: MouseEvent) => void
+  initItems: () => Promise<void>
+  changeProvince: (obj: { id: number }) => Promise<void>
+}
+
+export const ADDRESS_PAGE_CONTEXT_KEY: InjectionKey<AddressPageContext> =
+  Symbol('addressPageContext')
+
+const emptyAddress = (): Address => ({
+  city: '',
+  province: '',
+  phone: '',
+  address: '',
+  zip: '',
+  default_address: false,
+})
+
+export function useAddressPage() {
+  const isDesktop = useDesktopBreakpoint()
+  const cityList = ref<any[]>()
+  const addAddressVisible = ref(false)
+  const editId = ref<number | undefined>(undefined)
+  const formRef = ref<FormInstance>()
+  const address = ref<Address>(emptyAddress())
+
+  function resetFields() {
+    editId.value = undefined
+    address.value = emptyAddress()
+    cityList.value = undefined
+  }
+
+  function openAdd() {
+    resetFields()
+    editId.value = undefined
+    addAddressVisible.value = !isDesktop.value
+  }
+
+  async function openEdit(val: Address) {
+    address.value = cloneDeep(val)
+    editId.value = address.value.id
+    if (address.value.province) {
+      const province = addressProvinceList.value.find((item) => item.title === address.value.province)
+      if (province?.id) {
+        cityList.value = await getCity(province.id)
+      }
+    }
+    addAddressVisible.value = true
+  }
+
+  const handleOk = (_e?: MouseEvent) => {
+    formRef.value?.validate().then(async () => {
+      if (editId.value) {
+        await updateAddress(editId.value, address.value)
+      } else {
+        await createAddress(address.value)
+      }
+      await initItems()
+      addAddressVisible.value = false
+      message.success('آدرس با موفقیت ثبت شد')
+      resetFields()
+    }).catch((error) => {
+      console.log('error', error)
+    })
+  }
+
+  async function initItems() {
+    await refreshAddressItems()
+  }
+
+  const changeProvince = async (obj: { id: number }) => {
+    try {
+      loading.value = true
+      cityList.value = undefined
+      address.value.city = undefined
+      cityList.value = await getCity(obj.id)
+    } catch (e) {
+      message.error('خطا در دریافت شهرها')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(async () => {
+    await initAddressPageData()
+  })
+
+  const context: AddressPageContext = {
+    provinceList: addressProvinceList,
+    cityList,
+    items: addressItems,
+    addAddressVisible,
+    editId,
+    address,
+    formRef,
+    loading,
+    loadingMore,
+    isBazretalaProject,
+    resetFields,
+    openAdd,
+    openEdit,
+    handleOk,
+    initItems,
+    changeProvince,
+  }
+
+  provide(ADDRESS_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useAddressPageContext() {
+  const context = inject(ADDRESS_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useAddressPageContext must be used within a page that calls useAddressPage()')
+  }
+  return context
+}
diff --git a/src/views/base/address/composables/useAddressPageData.ts b/src/views/base/address/composables/useAddressPageData.ts
new file mode 100644
index 0000000..a90605e
--- /dev/null
+++ b/src/views/base/address/composables/useAddressPageData.ts
@@ -0,0 +1,82 @@
+import { ref } from 'vue'
+import { getProvince, tableAddress } from '@/api/address'
+import type { Address } from '@/models/address'
+import { loading, loadingMore } from '@/utils'
+import { runOnceAsync, resetOnceAsyncByPrefix } from '@/composables/useOnceAsync'
+
+/**
+ * Shared address page datasets — mobile and desktop views read this module state only.
+ */
+let initPromise: Promise<void> | null = null
+const initialized = ref(false)
+
+export const addressItems = ref<Address[]>([])
+export const addressProvinceList = ref<any[]>([])
+
+export function isAddressPageDataInitialized() {
+  return initialized.value
+}
+
+export async function refreshAddressItems() {
+  try {
+    loading.value = true
+    const data = await tableAddress({ page: 0, limit: 150 })
+    addressItems.value = data.rows
+  } catch (error) {
+    console.error('Address list refresh error:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+async function loadAddressItems() {
+  const data = await tableAddress({ page: 0, limit: 150 })
+  addressItems.value = data.rows
+}
+
+async function loadProvinces() {
+  addressProvinceList.value = await getProvince()
+}
+
+export async function initAddressPageData(force = false) {
+  if (!force && initialized.value) {
+    return
+  }
+
+  if (!force && initPromise) {
+    return initPromise
+  }
+
+  initPromise = (async () => {
+    try {
+      if (force) {
+        resetAddressPageData()
+      }
+
+      loading.value = true
+
+      await Promise.all([
+        runOnceAsync('address:items', () => loadAddressItems(), force),
+        runOnceAsync('address:provinces', () => loadProvinces(), force),
+      ])
+
+      initialized.value = true
+    } catch (error) {
+      console.error('Address page initialization error:', error)
+    } finally {
+      loading.value = false
+      initPromise = null
+    }
+  })()
+
+  return initPromise
+}
+
+export function resetAddressPageData() {
+  initialized.value = false
+  initPromise = null
+  resetOnceAsyncByPrefix('address:')
+  addressItems.value = []
+  addressProvinceList.value = []
+}
diff --git a/src/views/base/address/desktop/DesktopAddressView.vue b/src/views/base/address/desktop/DesktopAddressView.vue
new file mode 100644
index 0000000..c58bfb3
--- /dev/null
+++ b/src/views/base/address/desktop/DesktopAddressView.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="daddr">
+    <div class="daddr__container">
+      <header class="daddr-topbar">
+        <p class="daddr-topbar__eyebrow">حساب کاربری</p>
+        <h1 class="daddr-topbar__title">آدرس‌ها</h1>
+        <p class="daddr-topbar__subtitle">آدرس‌های تحویل سفارش خود را مدیریت کنید</p>
+      </header>
+
+      <div
+        v-if="isBazretalaProject()"
+        class="daddr-notice"
+      >
+        جهت تحویل فیزیکی محصول در تهران و قم ازطریق معرف اقدام فرمائید یا با شماره امورمالی و حسابداری 09925202099 درارتباط باشید.
+      </div>
+
+      <div class="daddr-grid">
+        <section class="daddr-surface daddr-form">
+          <div class="daddr-form__header">
+            <h2 class="daddr-form__title">{{ editId ? 'ویرایش آدرس' : 'ثبت آدرس جدید' }}</h2>
+            <button
+              v-if="editId"
+              type="button"
+              class="daddr-form__reset"
+              @click="openAdd()"
+            >
+              آدرس جدید
+            </button>
+          </div>
+          <AddressForm variant="desktop" />
+        </section>
+
+        <section class="daddr-surface daddr-list">
+          <div class="daddr-list__header">
+            <h3 class="daddr-list__title">آدرس‌های ثبت‌شده</h3>
+            <span class="daddr-list__count">{{ items.length }} مورد</span>
+          </div>
+
+          <div v-if="loading" class="daddr-list__skeletons">
+            <TransactionSkeleton v-for="i in 6" :key="i" class="mt-1" />
+          </div>
+
+          <div v-else-if="items.length" class="daddr-list__items">
+            <list-anim>
+              <Item
+                v-for="item in items"
+                :key="`desktop-${item.id}`"
+                :item="item"
+                variant="desktop"
+                @edit="openEdit"
+                @refresh="initItems"
+              />
+            </list-anim>
+          </div>
+
+          <div v-else class="daddr-empty">
+            <BasicIcon icon="vuesax-linear:location" size="36" />
+            <p>هنوز آدرسی ثبت نشده است.</p>
+            <button type="button" class="daddr-empty__btn" @click="openAdd()">
+              افزودن اولین آدرس
+            </button>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import AddressForm from '../components/AddressForm.vue'
+import Item from '../components/Item.vue'
+import { useAddressPageContext } from '../composables/useAddressPage'
+
+const {
+  items,
+  loading,
+  editId,
+  isBazretalaProject,
+  openAdd,
+  openEdit,
+  initItems,
+} = useAddressPageContext()
+</script>
diff --git a/src/views/base/address/desktop/styles/desktop-address.less b/src/views/base/address/desktop/styles/desktop-address.less
new file mode 100644
index 0000000..b175923
--- /dev/null
+++ b/src/views/base/address/desktop/styles/desktop-address.less
@@ -0,0 +1,307 @@
+/* Premium desktop address page — scoped to desktop shell only */
+
+html.app-layout--desktop {
+  .daddr {
+    min-height: 100%;
+    background: #f6f7f9;
+    color: #111827;
+  }
+
+  .daddr__container {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding: 28px 36px 40px;
+  }
+
+  .daddr-topbar {
+    margin-bottom: 24px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+    &__eyebrow {
+      font-size: 12px;
+      font-weight: 500;
+      color: #9ca3af;
+      margin: 0 0 4px;
+    }
+
+    &__title {
+      font-size: 26px;
+      font-weight: 600;
+      letter-spacing: -0.03em;
+      color: #111827;
+      margin: 0 0 6px;
+      line-height: 1.2;
+    }
+
+    &__subtitle {
+      font-size: 14px;
+      color: #6b7280;
+      margin: 0;
+      max-width: 520px;
+      line-height: 1.6;
+    }
+  }
+
+  .daddr-notice {
+    margin-bottom: 20px;
+    padding: 14px 16px;
+    border-radius: 12px;
+    border: 1px solid rgba(59, 130, 246, 0.15);
+    background: rgba(59, 130, 246, 0.06);
+    color: @App-primary-color;
+    font-size: 13px;
+    line-height: 1.8;
+    text-align: justify;
+  }
+
+  .daddr-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
+    gap: 20px;
+    align-items: start;
+  }
+
+  .daddr-surface {
+    background: #fff;
+    border: 1px solid rgba(15, 23, 42, 0.06);
+    border-radius: 16px;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  }
+
+  .daddr-form {
+    padding: 24px;
+
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+
+    &__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #111827;
+      margin: 0;
+    }
+
+    &__reset {
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      background: #fff;
+      color: #6b7280;
+      font-size: 12px;
+      font-weight: 600;
+      font-family: inherit;
+      padding: 6px 10px;
+      cursor: pointer;
+      transition: border-color 0.15s ease, color 0.15s ease;
+
+      &:hover {
+        border-color: @App-primary-color;
+        color: @App-primary-color;
+      }
+    }
+
+    &__fields {
+      width: 100%;
+    }
+
+    &__grid {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    &__address-item {
+      margin-bottom: 8px !important;
+    }
+
+    &__submit {
+      width: 100%;
+      margin-top: 8px;
+    }
+  }
+
+  .daddr-list {
+    display: flex;
+    flex-direction: column;
+    min-height: 420px;
+
+    &__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 20px 24px 0;
+    }
+
+    &__title {
+      font-size: 16px;
+      font-weight: 600;
+      color: #111827;
+      margin: 0;
+    }
+
+    &__count {
+      font-size: 12px;
+      font-weight: 600;
+      color: #6b7280;
+      background: #f3f4f6;
+      border-radius: 999px;
+      padding: 4px 10px;
+    }
+
+    &__items {
+      padding: 16px 24px 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    &__skeletons {
+      padding: 16px 24px 24px;
+    }
+  }
+
+  .daddr-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 12px 16px;
+    padding: 16px 18px;
+    border: 1px solid #eef0f3;
+    border-radius: 12px;
+    background: #fafbfc;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      border-color: #dbe0e6;
+      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+    }
+
+    &__address {
+      grid-column: 1 / -1;
+      font-size: 16px;
+      font-weight: 700;
+      color: #111827;
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    &__meta {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    &__row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: #6b7280;
+    }
+
+    &__label {
+      color: #9ca3af;
+      flex-shrink: 0;
+    }
+
+    &__value {
+      color: #374151;
+      font-weight: 600;
+    }
+
+    &__actions {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+    }
+
+    &__icon-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 34px;
+      height: 34px;
+      border: 1px solid #e5e7eb;
+      border-radius: 10px;
+      background: #fff;
+      cursor: pointer;
+      transition: border-color 0.15s ease, background 0.15s ease;
+
+      &:hover {
+        background: #f9fafb;
+      }
+
+      &--danger:hover {
+        border-color: #fecaca;
+        background: #fef2f2;
+      }
+
+      &--edit:hover {
+        border-color: #bbf7d0;
+        background: #f0fdf4;
+      }
+    }
+
+    &__footer {
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding-top: 10px;
+      border-top: 1px solid #eef0f3;
+    }
+
+    &__date {
+      font-size: 12px;
+      color: #9ca3af;
+    }
+  }
+
+  .daddr-empty {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 48px 24px;
+    color: #6b7280;
+    text-align: center;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+    }
+
+    &__btn {
+      margin-top: 4px;
+      border: none;
+      border-radius: 10px;
+      background: @App-primary-color;
+      color: #fff;
+      font-size: 13px;
+      font-weight: 600;
+      font-family: inherit;
+      padding: 10px 16px;
+      cursor: pointer;
+      transition: opacity 0.15s ease;
+
+      &:hover {
+        opacity: 0.92;
+      }
+    }
+  }
+
+  @media (max-width: 1023.98px) {
+    .daddr-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+}
diff --git a/src/views/base/address/index.vue b/src/views/base/address/index.vue
index 6d8b584..27add88 100644
--- a/src/views/base/address/index.vue
+++ b/src/views/base/address/index.vue
@@ -1,257 +1,40 @@
 <template>
-  <div>
-    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow wrap-fix flex  z-10">
-      <div @click="router.back()">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">آدرس ها</div>
-    </div>
-    <div>
-      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
-    </div>
-    <!--    <a-spin :spinning="loading">-->
-    <div ref="el" :class="loading? 'h-screen': ''" class="px-3 pt-16  pb-2 overflow-y-scroll"
-         style="max-height: calc(100vh - 50px)">
-
-      <div
-        v-if="isBazretalaProject()"
-        class="text-justify text-sm text-primary mb-4 px-1 leading-7"
-      >
-        جهت تحویل فیزیکی محصول در تهران و قم ازطریق معرف اقدام فرمائید یا با شماره امورمالی و حسابداری 09925202099 درارتباط باشید.
-      </div>
-      <list-anim v-if="!loading" class="pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
-        <Item v-for="item in items" :key="item.id" :item="item" @edit="openEdit" @refresh="initItems" />
-        <!--        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />-->
-      </list-anim>
-      <div v-if="loading">
-        <TransactionSkeleton v-for="i in 13" :key="i" class="mt-1" />
-      </div>
-
-    </div>
-    <!--    </a-spin>-->
-    <BasicActionSheet v-model:show="addAddressVisible" class="h-80vh" >
-      <a-form ref="formRef" :model="address" class="!mt-5" name="basic"
-              @finish="ok()">
-        <div class="flex flex-col items-center">
-          <div class="font-bold text-lg mb-2">آدرس</div>
-          <div class="flex flex-col gap-4 pb-20 w-full h-60vh overflow-y-scroll">
-            <a-form-item label="استان" name="province" :rules="[required()]">
-              <BasicSelect
-                  v-model:value="address.province"
-                  :items="provinceList"
-                  @change="changeProvince"
-                  valueName="title"
-                  keyName="title"
-              />
-            </a-form-item>
-            <a-form-item label="شهر" name="city" :rules="[required()]">
-              <BasicSelect
-                  :disabled="!cityList"
-                  v-model:value="address.city"
-                  valueName="title"
-                  :items="cityList"
-                  keyName="title"
-              />
-            </a-form-item>
-
-            <a-form-item
-                label="کد پستی" name="zip" :rules="[required()]">
-              <BasicInput placeholder="کد پستی را وارد نمایید" v-model:value="address.zip" />
-            </a-form-item>
-            <a-form-item
-                label="تلفن تماس" name="phone" :rules="[required()]"
-            >
-              <BasicInput placeholder="تلفن تماس را وارد نمایید" v-model:value="address.phone" />
-            </a-form-item>
-            <!--        <FormItem label="کد پستی" name="">
-              <Input placeholder="کد پستی را وارد نمایید" />
-            </FormItem>-->
-            <a-form-item
-                label="آدرس کامل"
-                name="address"
-                :rules="[required()]"
-            >
-              <BasicTextArea placeholder="آدرس کامل را وارد نمایید" v-model:value="address.address" />
-            </a-form-item>
-<!--          <div class=" w-full pb-5  !text-white flex justify-center items-center">-->
-            <BasicButton class=" !text-white px-3 pb-4rem" type="primary" @click="handleOk">ثبت آدرس
-            </BasicButton>
-          </div>
-
-          <!--          </div>-->
-
-        </div>
-      </a-form>
+  <div v-if="!isDesktop">
+    <MobileAddressView />
 
+    <BasicActionSheet v-model:show="addAddressVisible" class="h-80vh">
+      <AddressForm />
     </BasicActionSheet>
-    <!--    <div class="bg-primary w-3rem h-3rem flex items-center justify-center rounded-lg fixed bottom-12vh left-8vw"
-             @click="openAdd()">
-          <BasicIcon icon="vuesax-linear:add" color="white" />
-        </div>-->
-    <Teleport to="body">
-      <div
-        v-if="!addAddressVisible"
-        class="add-address app-dock-add-bar"
-        @click="openAdd()"
-      >
-        <div>افزودن آدرس جدید</div>
-        <BasicIcon icon="vuesax-linear:add" />
-      </div>
-    </Teleport>
   </div>
+
+  <template v-else>
+    <DesktopAddressView />
+
+    <BasicModal
+      v-model:visible="addAddressVisible"
+      :title="editId ? 'ویرایش آدرس' : 'ثبت آدرس جدید'"
+      width="520px"
+      destroy-on-close
+      custom-footer
+    >
+      <AddressForm variant="desktop" />
+      <template #footer>
+        <div></div>
+      </template>
+    </BasicModal>
+  </template>
 </template>
 
 <script lang="ts" setup>
-import { createPriceTrigger, getPriceTriggers, updatePriceTrigger } from '@/api/triggerPrice'
-
-const radioStyle = reactive({
-  display: '',
-  height: '30px',
-  lineHeight: '30px'
-})
-import type { SelectItem } from '@/models/SelectItem'
-
-// import Item from "./components/Item.vue";
-/*import {lengthValidation, required} from "@/utils/inputRules";
-import {loading} from "@/utils";
-import BasicButton from "@/components/BasicPacks/BasicButton.vue";
-import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
-import BasicInput from "@/components/BasicPacks/BasicInput.vue";*/
-import { onMounted, reactive, ref } from 'vue'
-import type { TableEngineInput, TableOutput } from '@/models/table'
-import { loading, loadingMore } from '@/utils'
-// import {getOrders} from "@/api/order";
-import { getTransactionTable } from '@/api/transaction'
-import type { Transaction } from '@/models/transaction'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
-import { useInfiniteScroll, useScroll } from '@vueuse/core'
-import ListAnim from '@/components/ListAnim.vue'
-import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
-import { mobileValidation, required } from '@/utils/inputRules'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import type { User } from '@/models/login'
-import { type FormInstance, message } from 'ant-design-vue'
-import type { PriceTrigger } from '@/models/PriceTrigger'
-import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
-import Item from './components/Item.vue'
-import { cloneDeep } from 'lodash'
-import router from '@/router'
-import type { Address } from '@/models/address'
-import { createAddress, getCity, getProvince, tableAddress, updateAddress } from '@/api/address'
-import BasicTextArea from '@/components/BasicPacks/BasicTextArea.vue'
-import img from "@/assets/img/user_ly1.svg";
-import { isBazretalaProject } from '@/utils/config'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useAddressPage } from './composables/useAddressPage'
+import AddressForm from './components/AddressForm.vue'
+import DesktopAddressView from './desktop/DesktopAddressView.vue'
+import MobileAddressView from './mobile/MobileAddressView.vue'
 
-const provinceList = ref<any[]>([])
-const cityList = ref<any[]>()
-const items = ref<PriceTrigger[]>([])
-const addAddressVisible = ref<boolean>(false)
-const editId = ref<number | undefined>(undefined)
-const el = ref()
-
-const address = ref<Address>({
-  city: '',
-  province: '',
-  phone: '',
-  address: '',
-  zip: '',
-  default_address: false
-})
-const formRef = ref<FormInstance>()
-
-onMounted(async () => {
-  await initItems()
-  provinceList.value = await getProvince()
-})
-
-function resetFields() {
-  editId.value = undefined
-  address.value = {
-    city: '',
-    province: '',
-    phone: '',
-    address: '',
-    zip: '',
-    default_address: false
-  }
-}
-
-function openAdd() {
-  resetFields()
-  editId.value = undefined
-  addAddressVisible.value = true
-}
-
-const handleOk = (e: MouseEvent) => {
-  formRef.value?.validate().then(async () => {
-    editId.value ? await updateAddress(editId.value, address.value) : await createAddress(address.value)
-    await initItems()
-    addAddressVisible.value = false
-    message.success('آدرس با موفقیت ثبت شد')
-    resetFields()
-  })
-    .catch((error) => {
-      console.log('error', error)
-    })
-}
-
-async function initItems() {
-  try {
-    items.value = []
-    const data = await tableAddress({ page: 0, limit: 150 })
-    items.value = data.rows
-
-    // console.log(items.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    loadingMore.value = false
-  }
-}
-
-const changeProvince = async (obj: any) => {
-  try {
-    loading.value = true
-    cityList.value = undefined
-    address.value.city = undefined
-    cityList.value = await getCity(obj.id)
-  } catch (e) {
-    message.error('خطا در دریافت شهرها')
-  } finally {
-    loading.value = false
-  }
-}
-
-function openEdit(val: PriceTrigger) {
-  address.value = cloneDeep(val)
-  editId.value = address.value.id
-  addAddressVisible.value = true
-}
-
-async function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      editId.value ? await updatePriceTrigger(editId.value, address.value) : await createPriceTrigger(address.value)
-      message.success('آدرس با موفقیت ایجاد شد')
-      await initItems()
-      addAddressVisible.value = false
-      //
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
+const isDesktop = useDesktopBreakpoint()
 
+const { addAddressVisible, editId } = useAddressPage()
 </script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/base/address/mobile/MobileAddressView.vue b/src/views/base/address/mobile/MobileAddressView.vue
new file mode 100644
index 0000000..1288fd8
--- /dev/null
+++ b/src/views/base/address/mobile/MobileAddressView.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow wrap-fix flex z-10">
+      <div @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">آدرس ها</div>
+    </div>
+    <div>
+      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
+    </div>
+
+    <div
+      :class="loading ? 'h-screen' : ''"
+      class="px-3 pt-16 pb-2 overflow-y-scroll"
+      style="max-height: calc(100vh - 50px)"
+    >
+      <div
+        v-if="isBazretalaProject()"
+        class="text-justify text-sm text-primary mb-4 px-1 leading-7"
+      >
+        جهت تحویل فیزیکی محصول در تهران و قم ازطریق معرف اقدام فرمائید یا با شماره امورمالی و حسابداری 09925202099 درارتباط باشید.
+      </div>
+
+      <div
+        v-if="!loading"
+        class="pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]"
+      >
+        <Item
+          v-for="item in items"
+          :key="item.id"
+          :item="item"
+          @edit="openEdit"
+          @refresh="initItems"
+        />
+      </div>
+      <div v-if="loading">
+        <TransactionSkeleton v-for="i in 13" :key="i" class="mt-1" />
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="!addAddressVisible"
+        class="add-address app-dock-add-bar"
+        @click="openAdd()"
+      >
+        <div>افزودن آدرس جدید</div>
+        <BasicIcon icon="vuesax-linear:add" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import img from '@/assets/img/user_ly1.svg'
+import router from '@/router'
+import Item from '../components/Item.vue'
+import { useAddressPageContext } from '../composables/useAddressPage'
+
+const {
+  items,
+  loading,
+  addAddressVisible,
+  isBazretalaProject,
+  openAdd,
+  openEdit,
+  initItems,
+} = useAddressPageContext()
+</script>
diff --git a/src/views/base/earnMoney/composables/useEarnMoneyPage.ts b/src/views/base/earnMoney/composables/useEarnMoneyPage.ts
new file mode 100644
index 0000000..2e66a21
--- /dev/null
+++ b/src/views/base/earnMoney/composables/useEarnMoneyPage.ts
@@ -0,0 +1,90 @@
+import { inject, onMounted, provide, ref, type InjectionKey, type Ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { getEarnMoney } from '@/api/earnMoney'
+import type { EarnMoney } from '@/models/earnMoney'
+import { useUserStore } from '@/store/userStore'
+import { useConfigStore } from '@/store/configStore'
+import { getReferralShareText, getReferralShareTitle } from '@/utils/config'
+import { loading } from '@/utils'
+
+export interface EarnMoneyPageContext {
+  data: Ref<EarnMoney | undefined>
+  userStore: ReturnType<typeof useUserStore>
+  nameProject: string
+  isTransaction: Ref<boolean>
+  loading: typeof loading
+  setIsTransaction: (value: boolean) => void
+  copyCode: () => void
+  shareCode: () => void
+  loadEarnMoney: () => Promise<void>
+}
+
+export const EARN_MONEY_PAGE_CONTEXT_KEY: InjectionKey<EarnMoneyPageContext> =
+  Symbol('earnMoneyPageContext')
+
+export function useEarnMoneyPage() {
+  const data = ref<EarnMoney>()
+  const userStore = useUserStore()
+  const nameProject = useConfigStore().config.name_fa
+  const isTransaction = ref<boolean>(false)
+
+  function setIsTransaction(value: boolean) {
+    isTransaction.value = value
+  }
+
+  function copyCode() {
+    const val = userStore.userInfo?.referral_id
+    navigator.clipboard.writeText(val)
+    message.info('کد رونوشت شد')
+  }
+
+  function shareCode() {
+    const val = getReferralShareText({
+      userName: userStore.userInfo?.name,
+      projectName: nameProject,
+      referralId: userStore.userInfo?.referral_id,
+    })
+    navigator.share({
+      title: getReferralShareTitle(nameProject),
+      text: val,
+    })
+  }
+
+  async function loadEarnMoney() {
+    try {
+      loading.value = true
+      data.value = await getEarnMoney()
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  onMounted(() => {
+    loadEarnMoney()
+  })
+
+  const context: EarnMoneyPageContext = {
+    data,
+    userStore,
+    nameProject,
+    isTransaction,
+    loading,
+    setIsTransaction,
+    copyCode,
+    shareCode,
+    loadEarnMoney,
+  }
+
+  provide(EARN_MONEY_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useEarnMoneyPageContext() {
+  const context = inject(EARN_MONEY_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useEarnMoneyPageContext must be used within a page that calls useEarnMoneyPage()')
+  }
+  return context
+}
diff --git a/src/views/base/earnMoney/desktop/DesktopEarnMoneyView.vue b/src/views/base/earnMoney/desktop/DesktopEarnMoneyView.vue
new file mode 100644
index 0000000..d496308
--- /dev/null
+++ b/src/views/base/earnMoney/desktop/DesktopEarnMoneyView.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="dearn">
+    <div class="dearn__container">
+      <header class="dearn-topbar">
+        <p class="dearn-topbar__eyebrow">بازاریابی</p>
+        <h1 class="dearn-topbar__title">کسب درآمد</h1>
+        <p class="dearn-topbar__subtitle">با دعوت دوستان، پاداش دریافت کنید</p>
+      </header>
+
+      <section class="dearn-surface dearn-referral">
+        <div class="dearn-referral__header">
+          <div class="dearn-referral__icon">
+            <img :src="coin" alt="" />
+          </div>
+          <div>
+            <h2 class="dearn-referral__title">دعوت دوستان</h2>
+            <p class="dearn-referral__desc">هر دعوت موفق 10 سوت طلا هدیه</p>
+          </div>
+        </div>
+
+        <div class="dearn-referral__code">
+          <span class="dearn-referral__code-label">کد بازاریابی</span>
+          <span class="dearn-referral__code-value">{{ userStore.userInfo.referral_id }}</span>
+        </div>
+
+        <div class="dearn-referral__actions">
+          <BasicButton
+            icon="vuesax-linear:share"
+            type="primary"
+            class="dearn-referral__btn"
+            icon-size="18"
+            @click.stop="shareCode()"
+          >
+            اشتراک گذاری
+          </BasicButton>
+          <BasicButton
+            icon="vuesax-linear:copy"
+            class="dearn-referral__btn"
+            icon-size="18"
+            @click.stop="copyCode()"
+          >
+            رونوشت
+          </BasicButton>
+        </div>
+      </section>
+
+      <div class="dearn-stats">
+        <div class="dearn-stats__card dearn-stats__card--users">
+          <span class="dearn-stats__value">{{ data?.usersSum ?? 0 }} عدد</span>
+          <span class="dearn-stats__label">تعداد زیر مجموعه</span>
+        </div>
+        <div class="dearn-stats__card dearn-stats__card--gifts">
+          <span class="dearn-stats__value">{{ data?.giftsSum ?? 0 }} سوت</span>
+          <span class="dearn-stats__label">میزان کل پاداش ها</span>
+        </div>
+      </div>
+
+      <div class="dearn-tabs">
+        <button
+          type="button"
+          class="dearn-tabs__btn"
+          :class="{ 'dearn-tabs__btn--active': isTransaction }"
+          @click="setIsTransaction(true)"
+        >
+          پاداش ها
+        </button>
+        <button
+          type="button"
+          class="dearn-tabs__btn"
+          :class="{ 'dearn-tabs__btn--active': !isTransaction }"
+          @click="setIsTransaction(false)"
+        >
+          فهرست زیر مجموعه
+        </button>
+      </div>
+
+      <section class="dearn-surface dearn-list">
+        <div v-if="loading" class="dearn-list__loading">
+          <TransactionSkeleton v-for="i in 6" :key="i" class="mt-1" />
+        </div>
+
+        <template v-else>
+          <div v-if="isTransaction" class="dearn-list__items">
+            <GiftCard v-for="(val, i) in data?.gifts" :key="i" :item="val" />
+            <div v-if="!data?.gifts?.length" class="dearn-empty">
+              <BasicIcon icon="vuesax-linear:gift" size="36" />
+              <p>هنوز پاداشی ثبت نشده است.</p>
+            </div>
+          </div>
+          <div v-else class="dearn-list__items">
+            <EarnCard v-for="(val, i) in data?.users" :key="i" :item="val" />
+            <div v-if="!data?.users?.length" class="dearn-empty">
+              <BasicIcon icon="vuesax-linear:people" size="36" />
+              <p>هنوز زیرمجموعه‌ای ثبت نشده است.</p>
+            </div>
+          </div>
+        </template>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import coin from '@/assets/img/coin.png'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import EarnCard from '../components/EarnCard.vue'
+import GiftCard from '../components/GiftCard.vue'
+import { useEarnMoneyPageContext } from '../composables/useEarnMoneyPage'
+
+const {
+  data,
+  userStore,
+  isTransaction,
+  loading,
+  setIsTransaction,
+  copyCode,
+  shareCode,
+} = useEarnMoneyPageContext()
+</script>
diff --git a/src/views/base/earnMoney/desktop/styles/desktop-earn-money.less b/src/views/base/earnMoney/desktop/styles/desktop-earn-money.less
new file mode 100644
index 0000000..b3a47fe
--- /dev/null
+++ b/src/views/base/earnMoney/desktop/styles/desktop-earn-money.less
@@ -0,0 +1,244 @@
+/* Premium desktop earn money page */
+
+.dearn {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dearn__container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dearn-topbar {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0 0 6px;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0;
+  }
+}
+
+.dearn-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dearn-referral {
+  padding: 24px 28px;
+  margin-bottom: 20px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef0f3;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: #dbeafe;
+    flex-shrink: 0;
+
+    img {
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    }
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 6px;
+  }
+
+  &__desc {
+    font-size: 13px;
+    line-height: 1.6;
+    color: #6b7280;
+    margin: 0;
+  }
+
+  &__code {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 14px 18px;
+    margin-bottom: 16px;
+    border-radius: 12px;
+    background: #f9fafb;
+    border: 1px dashed #d1d5db;
+  }
+
+  &__code-label {
+    font-size: 12px;
+    color: #6b7280;
+    font-weight: 500;
+  }
+
+  &__code-value {
+    font-size: 18px;
+    font-weight: 700;
+    color: @App-primary-color;
+    letter-spacing: 0.02em;
+  }
+
+  &__actions {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  &__btn {
+    min-height: 44px;
+  }
+}
+
+.dearn-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+
+  &__card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 20px 16px;
+    border-radius: 14px;
+    text-align: center;
+
+    &--users {
+      background: #dbeafe;
+      color: #2563eb;
+    }
+
+    &--gifts {
+      background: #fef9c3;
+      color: #ca8a04;
+    }
+  }
+
+  &__value {
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+
+  &__label {
+    font-size: 13px;
+    font-weight: 500;
+    opacity: 0.9;
+  }
+}
+
+.dearn-tabs {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  margin-bottom: 20px;
+  background: #f3f4f6;
+  border-radius: 12px;
+
+  &__btn {
+    min-width: 140px;
+    padding: 10px 18px;
+    border: none;
+    border-radius: 10px;
+    background: transparent;
+    font-size: 14px;
+    font-weight: 600;
+    color: #6b7280;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      color: #374151;
+    }
+
+    &--active {
+      background: #fff;
+      color: @App-primary-color;
+      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+    }
+  }
+}
+
+.dearn-list {
+  padding: 20px 24px 24px;
+
+  &__loading,
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+
+.dearn-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  color: #9ca3af;
+  text-align: center;
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    color: #6b7280;
+  }
+
+  svg,
+  .basic-icon {
+    color: #d1d5db;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .dearn-stats {
+    grid-template-columns: 1fr;
+  }
+
+  .dearn-referral__actions {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/views/base/earnMoney/index.vue b/src/views/base/earnMoney/index.vue
index 16a1bf7..06a4770 100644
--- a/src/views/base/earnMoney/index.vue
+++ b/src/views/base/earnMoney/index.vue
@@ -1,159 +1,24 @@
 <template>
-  <div>
-    <div class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow  flex">
-      <div @click="router.back()">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">کسب درآمد</div>
-    </div>
+  <div class="earn-money-page-root">
+    <DesktopEarnMoneyView v-show="isDesktop" />
+    <MobileEarnMoneyView v-show="!isDesktop" />
   </div>
-  <div class="p-4">
-    <div class="text-center p-3 border-solid  border-1 rounded-[8px] border-primary ">
-      <div class="flex  items-center">
-        <div class=" bg-[#DBEAFE] h-10 w-10 rounded-100% flex justify-center items-center">
-          <img :src="coin" />
-        </div>
-        <div class="mr-4">
-          <div class="flex  ">
-            <div class="font-bold">دعوت دوستان</div>
-<!--            <div class="text-xs ">راهنمای کسب درآمد</div>-->
-          </div>
-          <div class="text-center mt-2 text-xs">هر دعوت موفق 10 سوت طلا هدیه</div>
-        </div>
-      </div>
-      <div class="flex justify-center mt-4">
-        <div class="text-[10px] content-center ">کد بازاریابی</div>
-        <div class="mr-2 font-bold">{{userStore.userInfo.referral_id}}</div>
-      </div>
-      <div class="flex mt-4 gap-2">
-        <BasicButton icon="vuesax-linear:share" size="small" class="flex-1" icon-size="18" @click.stop="shareCode()">
-          اشتراک گذاری
-        </BasicButton>
-          <BasicButton icon="vuesax-linear:copy" size="small" class="flex-1" icon-size="18" @click.stop="copyCode()">
-            رونوشت
-          </BasicButton>
-      </div>
-    </div>
-    <div class="grid grid-cols-2 gap-4 mt-4 ">
-      <div class="text-center bg-[#DBEAFE] p-2 rounded-[8px]">
-        <div class="font-bold text-[#2563EB] text-md">
-          {{data?.usersSum}} عدد
-        </div>
-        <div class="text-xs text-[#2563EB] mt-2">تعداد زیر مجموعه</div>
-      </div>
-      <div class="text-center bg-[#FEF9C3] p-2 rounded-[8px]">
-        <div class="font-bold text-[#CA8A04] text-md">
-          {{data?.giftsSum}} سوت
-        </div>
-        <div class="text-xs text-[#CA8A04] mt-2">میزان کل پاداش ها</div>
-      </div>
-    </div>
-    <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded-lg mt-6 ">
-      <div :class="isTransaction?'text-primary bg-white h-8 w-1/2 rounded-lg':'text-gray-400'" class="w-full text-center z-2 flex items-center justify-center"
-           @click.stop="setIsTransaction(true) ">
-        پاداش ها
-      </div>
-      <div :class="!isTransaction?'text-primary bg-white h-8 w-1/2 rounded-lg':'text-gray-400'" class="w-full text-center z-2 flex items-center justify-center"
-           @click.stop="setIsTransaction(false) ">
-        فهرست زیر مجموعه
-      </div>
-    </div>
-<!--    //**************************************-->
-<!--    <div class="flex mt-6">-->
-<!--      <div class="bg-[#0A1B37] p-2 rounded-[8px] w-full">-->
-<!--        <div class="text-white text-center">فهرست زیرمجموعه</div>-->
-<!--      </div>-->
-<!--      <div class="bg-[#0A1B37] p-2 rounded-[8px] w-full mr-2">-->
-<!--        <div class="text-white text-center">پاداش ها</div>-->
-<!--      </div>-->
-<!--    </div>-->
-    <div class="border-solid  border-1 border-[#E5E7EB] mt-6 "></div>
-    <div v-if="isTransaction">
-      <GiftCard v-for="(val,i) in data?.gifts" :key="i" :item="val"/>
-    </div>
-    <div v-else>
-      <EarnCard v-for="(val,i) in data?.users" :key="i" :item="val"/>
-    </div>
-  </div>
-
 </template>
 
 <script lang="ts" setup>
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useEarnMoneyPage } from './composables/useEarnMoneyPage'
+import DesktopEarnMoneyView from './desktop/DesktopEarnMoneyView.vue'
+import MobileEarnMoneyView from './mobile/MobileEarnMoneyView.vue'
 
-import router from '@/router'
-import coin from '@/assets/img/coin.png'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import { useUserStore } from '@/store/userStore'
-import { type FormInstance, message } from 'ant-design-vue'
-import { onMounted, reactive, ref } from 'vue'
-import type { EarnMoney } from '@/models/earnMoney'
-import { loading } from '@/utils'
-import { getEarnMoney } from '@/api/earnMoney'
-import EarnCard from '@/views/base/earnMoney/components/EarnCard.vue'
-import TransactionCard from '@/views/base/transactions/components/Item.vue'
-import GiftCard from '@/views/base/earnMoney/components/GiftCard.vue'
-import {useConfigStore} from "@/store/configStore";
-import {getReferralShareText, getReferralShareTitle} from "@/utils/config";
-
-const data = ref<EarnMoney>()
-
-const userStore = useUserStore()
-const nameProject= useConfigStore().config.name_fa
-
-const isTransaction = ref<boolean>(false)
-
-function setIsTransaction(value: boolean) {
-  isTransaction.value = value
-}
-
-function copyCode() {
-  // nextTick(() => {
-  const val = userStore.userInfo?.referral_id
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-function shareCode() {
-  const val = getReferralShareText({
-    userName: userStore.userInfo?.name,
-    projectName: nameProject,
-    referralId: userStore.userInfo?.referral_id,
-  })
-  navigator.share({
-    title: getReferralShareTitle(nameProject),
-    text: val
-  })
-}
-
-async function earnMoney() {
-  try {
-    loading.value = true
-    data.value = await getEarnMoney()
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-function subsetList(){
-
-}
-onMounted(async () => {
-  earnMoney()
-})
-
-function useStyle() {
-  if (data.value?.User) return 'right: 2%;'
-    // if (isbuy.value) return 'animation-direction: normal'
-  // else return 'animation-direction: reverse'
-  else return ' right: 98%; transform: translate(100%, 0);'
-}
+const isDesktop = useDesktopBreakpoint()
 
+useEarnMoneyPage()
 </script>
 
 <style scoped>
-
-</style>
\ No newline at end of file
+.earn-money-page-root {
+  min-height: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/base/earnMoney/mobile/MobileEarnMoneyView.vue b/src/views/base/earnMoney/mobile/MobileEarnMoneyView.vue
new file mode 100644
index 0000000..26001f6
--- /dev/null
+++ b/src/views/base/earnMoney/mobile/MobileEarnMoneyView.vue
@@ -0,0 +1,101 @@
+<template>
+  <div>
+    <div class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow flex">
+      <div @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">کسب درآمد</div>
+    </div>
+  </div>
+  <div class="p-4">
+    <div class="text-center p-3 border-solid border-1 rounded-[8px] border-primary">
+      <div class="flex items-center">
+        <div class="bg-[#DBEAFE] h-10 w-10 rounded-100% flex justify-center items-center">
+          <img :src="coin" alt="" />
+        </div>
+        <div class="mr-4">
+          <div class="flex">
+            <div class="font-bold">دعوت دوستان</div>
+          </div>
+          <div class="text-center mt-2 text-xs">هر دعوت موفق 10 سوت طلا هدیه</div>
+        </div>
+      </div>
+      <div class="flex justify-center mt-4">
+        <div class="text-[10px] content-center">کد بازاریابی</div>
+        <div class="mr-2 font-bold">{{ userStore.userInfo.referral_id }}</div>
+      </div>
+      <div class="flex mt-4 gap-2">
+        <BasicButton
+          icon="vuesax-linear:share"
+          size="small"
+          class="flex-1"
+          icon-size="18"
+          @click.stop="shareCode()"
+        >
+          اشتراک گذاری
+        </BasicButton>
+        <BasicButton
+          icon="vuesax-linear:copy"
+          size="small"
+          class="flex-1"
+          icon-size="18"
+          @click.stop="copyCode()"
+        >
+          رونوشت
+        </BasicButton>
+      </div>
+    </div>
+    <div class="grid grid-cols-2 gap-4 mt-4">
+      <div class="text-center bg-[#DBEAFE] p-2 rounded-[8px]">
+        <div class="font-bold text-[#2563EB] text-md">
+          {{ data?.usersSum }} عدد
+        </div>
+        <div class="text-xs text-[#2563EB] mt-2">تعداد زیر مجموعه</div>
+      </div>
+      <div class="text-center bg-[#FEF9C3] p-2 rounded-[8px]">
+        <div class="font-bold text-[#CA8A04] text-md">
+          {{ data?.giftsSum }} سوت
+        </div>
+        <div class="text-xs text-[#CA8A04] mt-2">میزان کل پاداش ها</div>
+      </div>
+    </div>
+    <div
+      class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded-lg mt-6"
+    >
+      <div
+        :class="isTransaction ? 'text-primary bg-white h-8 w-1/2 rounded-lg' : 'text-gray-400'"
+        class="w-full text-center z-2 flex items-center justify-center"
+        @click.stop="setIsTransaction(true)"
+      >
+        پاداش ها
+      </div>
+      <div
+        :class="!isTransaction ? 'text-primary bg-white h-8 w-1/2 rounded-lg' : 'text-gray-400'"
+        class="w-full text-center z-2 flex items-center justify-center"
+        @click.stop="setIsTransaction(false)"
+      >
+        فهرست زیر مجموعه
+      </div>
+    </div>
+    <div class="border-solid border-1 border-[#E5E7EB] mt-6"></div>
+    <div v-if="isTransaction">
+      <GiftCard v-for="(val, i) in data?.gifts" :key="i" :item="val" />
+    </div>
+    <div v-else>
+      <EarnCard v-for="(val, i) in data?.users" :key="i" :item="val" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import coin from '@/assets/img/coin.png'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import router from '@/router'
+import EarnCard from '../components/EarnCard.vue'
+import GiftCard from '../components/GiftCard.vue'
+import { useEarnMoneyPageContext } from '../composables/useEarnMoneyPage'
+
+const { data, userStore, isTransaction, setIsTransaction, copyCode, shareCode } =
+  useEarnMoneyPageContext()
+</script>
diff --git a/src/views/base/educate/components/EducateContentPanel.vue b/src/views/base/educate/components/EducateContentPanel.vue
new file mode 100644
index 0000000..ecc428d
--- /dev/null
+++ b/src/views/base/educate/components/EducateContentPanel.vue
@@ -0,0 +1,103 @@
+<template>
+  <div
+    :class="variant === 'desktop'
+      ? 'deducate-content'
+      : 'mt-5 text-5 border-solid border-2 border-[#093D51] text-[#093D51] rounded-[12px] p-4'"
+  >
+    <div
+      v-if="variant === 'desktop'"
+      class="deducate-content__avatar-wrap"
+    >
+      <img :src="config.config.avatar" alt="" class="deducate-content__avatar" />
+    </div>
+    <div
+      v-else
+      class="h-20vh flex justify-center"
+    >
+      <img :src="config.config.avatar" alt="" class="mb-20 h-15vh mt-5" />
+    </div>
+
+    <div :class="variant === 'desktop' ? 'deducate-content__body' : ''">
+      <div
+        :class="variant === 'desktop' ? 'deducate-content__section-title' : 'font-bold text-sm text-[#093D51]'"
+      >
+        شیوهٔ ورود و ثبت ‌نام در گروسی گالری
+      </div>
+      <div :class="variant === 'desktop' ? 'deducate-content__text' : 'mt-5 text-xs leading-5'">
+        • برای ثبت‌نام در گروسی گالری، اگر قبلاً حساب کاربری دارید می‌توانید از طریق پیامک وارد شوید.<br />
+        • اگر حساب کاربری ندارید، "از این قسمت" وارد صفحه ثبت نام شده و با وارد کردن نام و شماره تلفنی که با کد ملی شما مطابقت دارد، حساب کاربری بسازید.<br />
+        • الزامی به وارد کردن کد معرف نیست.
+      </div>
+      <img :src="img1" :class="variant === 'desktop' ? 'deducate-content__image' : ''" />
+
+      <div :class="variant === 'desktop' ? 'deducate-content__divider' : 'w-full h-1px my-3 bg-secondary'"></div>
+      <div :class="variant === 'desktop' ? 'deducate-content__section-title' : 'font-bold mt-4 text-sm text-[#093D51]'">
+        شارژ کیف پول
+      </div>
+      <div :class="variant === 'desktop' ? 'deducate-content__text' : 'mt-5 text-xs leading-5'">
+        • ابتدا کیف پول را در منو انتخاب کرده، مبلغ مورد نظر را وارد نموده و دکمه واریز را انتخاب کنید تا کیف پول شما شارژ شود.<br />
+      </div>
+      <img :src="img2" :class="variant === 'desktop' ? 'deducate-content__image' : ''" />
+
+      <div :class="variant === 'desktop' ? 'deducate-content__divider' : 'w-full h-1px my-3 bg-secondary'"></div>
+      <div :class="variant === 'desktop' ? 'deducate-content__section-title' : 'font-bold mt-4 text-sm text-[#093D51]'">
+        شیوهٔ خرید از گروسی گالری
+      </div>
+      <div :class="variant === 'desktop' ? 'deducate-content__text' : 'mt-5 text-xs leading-5'">
+        • سپس از بخش «خرید و فروش» انتخاب کنید که طلای آب‌شده می‌خواهید یا محصولات دیگر (شامل گوی، شمش یا مکعب).<br />
+        • توجه داشته باشید کارمزد طلای آب‌شده حدود ۲٪ است و کارمزد ریالی محصولات دیگر در پایین صفحه قیمت درج شده است.
+      </div>
+      <img :src="img4" :class="variant === 'desktop' ? 'deducate-content__image' : ''" />
+
+      <div :class="variant === 'desktop' ? 'deducate-content__divider' : 'w-full h-1px my-3 bg-secondary'"></div>
+      <div :class="variant === 'desktop' ? 'deducate-content__section-title' : 'font-bold mt-4 text-sm text-[#093D51]'">
+        شیوهٔ فروش در گروسی گالری
+      </div>
+      <div :class="variant === 'desktop' ? 'deducate-content__text' : 'mt-5 text-xs leading-5'">
+        • برای فروش محصولاتی که خریداری کرده‌اید، به بخش «خرید و فروش» مراجعه کرده، محصول موردنظر را انتخاب و گزینه فروش را بزنید تا مبلغ قابل دریافت نمایش داده شود.<br />
+        • مبلغ به کیف پول شما واریز می‌شود و از طریق پیام پشتیبانی می‌توانید درخواست برداشت دهید.<br />
+        • اگر موجودی کیف پول بیش از ۱۰ میلیون تومان باشد، مبلغ تا پایان روز کاری بعد به حساب اعلام‌شده شما واریز خواهد شد.
+      </div>
+
+      <div :class="variant === 'desktop' ? 'deducate-content__divider' : 'w-full h-1px my-3 bg-secondary'"></div>
+      <div :class="variant === 'desktop' ? 'deducate-content__section-title' : 'font-bold mt-4 text-sm text-[#093D51]'">
+        شیوهٔ دریافت فیزیکی طلا (ارسال)
+      </div>
+      <div :class="variant === 'desktop' ? 'deducate-content__text' : 'mt-5 text-xs leading-5'">
+        • ابتدا موجودی محصول موردنظر را با پشتیبانی در واتساپ هماهنگ کنید.<br />
+        • سپس روی لوگو کلیک کرده، گزینه «برداشت فیزیکی» و بعد «درخواست جدید» را انتخاب کنید.<br />
+        • محصولات خریداری‌شده و تعداد آن‌ها را مشخص کرده و آدرس خود را ثبت نمایید.<br />
+        • پشتیبانی عکس و وزن محصول را برای شما ارسال می‌کند.<br />
+        • ارسال به‌صورت پس‌کرایه و بیمه‌شده انجام می‌شود.<br />
+      </div>
+
+      <div :class="variant === 'desktop' ? 'deducate-content__divider' : 'w-full h-1px my-3 bg-secondary'"></div>
+      <div :class="variant === 'desktop' ? 'deducate-content__section-title' : 'font-bold mt-4 text-sm text-[#093D51]'">
+        پاداش معرفی
+      </div>
+      <div :class="variant === 'desktop' ? 'deducate-content__text' : 'mt-5 text-xs leading-5'">
+        • در صفحه اصلی روی "تنظیمات" کلیک کرده و وارد حساب کاربری خود شوید.
+      </div>
+      <div :class="variant === 'desktop' ? 'deducate-content__text' : 'mt-5 text-xs leading-5'">
+        • سپس گزینه «اشتراک‌گذاری» یا «کپی لینک» را انتخاب کرده و لینک دعوت را برای دوستانتان ارسال کنید.<br />
+        • در صورتی که دوستان شما از طریق لینک شما ثبت‌نام کنند، به‌صورت خودکار ۱ سوت طلا به‌عنوان پاداش دریافت خواهید کرد.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import img1 from '@/assets/img/1.png'
+import img2 from '@/assets/img/2.png'
+import img4 from '@/assets/img/4.png'
+import { useEducatePageContext } from '../composables/useEducatePage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const { config } = useEducatePageContext()
+</script>
diff --git a/src/views/base/educate/components/EducateSupportActions.vue b/src/views/base/educate/components/EducateSupportActions.vue
new file mode 100644
index 0000000..a4295cb
--- /dev/null
+++ b/src/views/base/educate/components/EducateSupportActions.vue
@@ -0,0 +1,43 @@
+<template>
+  <div
+    v-if="config.config.name === 'garoosi'"
+    :class="variant === 'desktop' ? 'deducate-support' : 'wrap-fix bottom-0 px-10 py-6 flex gap-2 bg-white'"
+  >
+    <a class="w-full" href="tel:09031265925">
+      <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
+    </a>
+    <a href="https://ble.ir/garoosigallery">
+      <img
+        src="@/assets/img/bale.png"
+        alt=""
+        :class="variant === 'desktop' ? 'deducate-support__bale' : 'h-10 w-10'"
+      />
+    </a>
+  </div>
+
+  <div
+    v-else
+    :class="variant === 'desktop' ? 'deducate-support' : 'wrap-fix bottom-0 px-10 py-5 flex gap-2 bg-white'"
+  >
+    <a class="w-full" href="tel:09306612518">
+      <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
+    </a>
+    <a href="">
+      <BasicButton icon="vuesax-linear:whatsapp" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { useEducatePageContext } from '../composables/useEducatePage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const { config } = useEducatePageContext()
+</script>
diff --git a/src/views/base/educate/composables/useEducatePage.ts b/src/views/base/educate/composables/useEducatePage.ts
new file mode 100644
index 0000000..679e55a
--- /dev/null
+++ b/src/views/base/educate/composables/useEducatePage.ts
@@ -0,0 +1,105 @@
+import { inject, onMounted, provide, ref, type InjectionKey } from 'vue'
+import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import { updateMe } from '@/api/me'
+import type { User } from '@/models/login'
+import { useConfigStore } from '@/store/configStore'
+import { useUserStore } from '@/store/userStore'
+import { loading } from '@/utils'
+
+export interface EducatePageContext {
+  config: ReturnType<typeof useConfigStore>
+  userFormState: ReturnType<typeof ref<User>>
+  formRef: ReturnType<typeof ref<FormInstance | undefined>>
+  editPassVisible: ReturnType<typeof ref<boolean>>
+  setForm: () => void
+  copyCode: () => void
+  resetData: () => void
+  ok: () => void
+}
+
+export const EDUCATE_PAGE_CONTEXT_KEY: InjectionKey<EducatePageContext> = Symbol('educatePageContext')
+
+export function useEducatePage() {
+  const config = useConfigStore()
+  const userStore = useUserStore()
+
+  const userFormState = ref<User>({
+    fname: '',
+    lname: '',
+    mobile: undefined,
+    birth_date: '',
+    phone_number: '',
+    province: '',
+    city: '',
+    n_code: undefined,
+  })
+  const formRef = ref<FormInstance>()
+  const editPassVisible = ref<boolean>(false)
+
+  function setForm() {
+    userFormState.value = userStore.userInfo
+  }
+
+  function copyCode() {
+    const val = userStore.userInfo?.referral_id
+    navigator.clipboard.writeText(val)
+    message.info('کد رونوشت شد')
+  }
+
+  const resetData = () => {
+    formRef.value?.resetFields()
+    userFormState.value = {
+      fname: '',
+      lname: '',
+      mobile: undefined,
+      birth_date: '',
+      phone_number: '',
+      province: '',
+      city: '',
+      n_code: undefined,
+    }
+  }
+
+  function ok() {
+    formRef.value?.validateFields().then(async () => {
+      try {
+        loading.value = true
+        await updateMe(userFormState.value)
+        await userStore.getMyInfo()
+        editPassVisible.value = false
+        message.success('اطلاعات شما با موفقیت به روز رسانی شد')
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loading.value = false
+      }
+    })
+  }
+
+  onMounted(() => {
+    setForm()
+  })
+
+  const context: EducatePageContext = {
+    config,
+    userFormState,
+    formRef,
+    editPassVisible,
+    setForm,
+    copyCode,
+    resetData,
+    ok,
+  }
+
+  provide(EDUCATE_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useEducatePageContext() {
+  const context = inject(EDUCATE_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useEducatePageContext must be used within a page that calls useEducatePage()')
+  }
+  return context
+}
diff --git a/src/views/base/educate/desktop/DesktopEducateView.vue b/src/views/base/educate/desktop/DesktopEducateView.vue
new file mode 100644
index 0000000..4f17b9d
--- /dev/null
+++ b/src/views/base/educate/desktop/DesktopEducateView.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="deducate">
+    <div class="deducate__container">
+      <header class="deducate-topbar">
+        <button type="button" class="deducate-topbar__back" @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          <span>بازگشت</span>
+        </button>
+        <div class="deducate-topbar__meta">
+          <p class="deducate-topbar__eyebrow">راهنما</p>
+          <h1 class="deducate-topbar__title">آموزش نرم افزار</h1>
+        </div>
+      </header>
+
+      <div class="deducate-layout">
+        <section class="deducate-surface deducate-main">
+          <div class="deducate-main__intro">
+            <div class="deducate-main__logo">
+              <BasicIcon icon="vuesax-linear:book" size="28" />
+            </div>
+            <div>
+              <h2 class="deducate-main__project">{{ config.config.name_fa }}</h2>
+              <p class="deducate-main__tagline">آموزش گام‌به‌گام استفاده از خدمات</p>
+            </div>
+          </div>
+
+          <div class="deducate-main__scroll">
+            <EducateContentPanel variant="desktop" />
+          </div>
+        </section>
+
+        <aside class="deducate-surface deducate-side">
+          <h3 class="deducate-side__title">پشتیبانی و ارتباط</h3>
+          <p class="deducate-side__text">
+            در صورت نیاز به راهنمایی بیشتر، با پشتیبانی تماس بگیرید.
+          </p>
+          <EducateSupportActions variant="desktop" />
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import EducateContentPanel from '../components/EducateContentPanel.vue'
+import EducateSupportActions from '../components/EducateSupportActions.vue'
+import { useEducatePageContext } from '../composables/useEducatePage'
+
+const { config } = useEducatePageContext()
+</script>
diff --git a/src/views/base/educate/desktop/styles/desktop-educate.less b/src/views/base/educate/desktop/styles/desktop-educate.less
new file mode 100644
index 0000000..f4218b1
--- /dev/null
+++ b/src/views/base/educate/desktop/styles/desktop-educate.less
@@ -0,0 +1,231 @@
+/* Premium desktop educate page */
+
+.deducate {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.deducate__container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.deducate-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.deducate-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
+  gap: 20px;
+  align-items: start;
+}
+
+.deducate-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.deducate-main {
+  padding: 28px;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: calc(100vh - 180px);
+
+  &__intro {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef0f3;
+    flex-shrink: 0;
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: rgba(9, 61, 81, 0.08);
+    color: @App-primary-color;
+    flex-shrink: 0;
+  }
+
+  &__project {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 4px;
+  }
+
+  &__tagline {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+  }
+
+  &__scroll {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding-left: 4px;
+    margin-left: -4px;
+  }
+}
+
+.deducate-content {
+  padding: 20px;
+  border: 1px solid rgba(9, 61, 81, 0.15);
+  border-radius: 12px;
+  background: rgba(9, 61, 81, 0.03);
+  color: @App-primary-color;
+
+  &__avatar-wrap {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+
+  &__avatar {
+    max-height: 120px;
+    width: auto;
+    object-fit: contain;
+  }
+
+  &__section-title {
+    font-size: 15px;
+    font-weight: 700;
+    color: inherit;
+    margin: 0 0 10px;
+  }
+
+  &__text {
+    font-size: 13px;
+    line-height: 1.8;
+    color: inherit;
+    text-align: justify;
+    margin: 0 0 12px;
+  }
+
+  &__image {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    margin: 12px 0 4px;
+    border-radius: 8px;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    background: rgba(9, 61, 81, 0.12);
+    margin: 16px 0;
+  }
+}
+
+.deducate-side {
+  padding: 24px;
+  position: sticky;
+  top: 24px;
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 8px;
+  }
+
+  &__text {
+    font-size: 13px;
+    line-height: 1.7;
+    color: #6b7280;
+    margin: 0 0 20px;
+  }
+}
+
+.deducate-support {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  > a:first-child {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__bale {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .deducate-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .deducate-side {
+    position: static;
+  }
+
+  .deducate-main {
+    max-height: none;
+  }
+}
diff --git a/src/views/base/educate/index.vue b/src/views/base/educate/index.vue
index ae612ab..0744f6b 100644
--- a/src/views/base/educate/index.vue
+++ b/src/views/base/educate/index.vue
@@ -1,208 +1,24 @@
 <template>
-  <div>
-    <div class="wrap-fix z-1 bg-white py-3 px-3 text-black font-bold drop-shadow flex">
-      <div @click="router.back()" class="cursor-pointer">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">آموزش نرم افزار</div>
-    </div>
-    <div class="pt-10">
-      <div>
-<!--        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />-->
-<!--        <img :src="config.config.avatar" alt="" class="mt-2 w-full absolute bottom-0">-->
-      </div>
-      <div class="text-justify text-base z-200000 relative">
-        <div class="px-10">
-          <div class="h-20vh flex justify-center">
-            <img :src="config.config.avatar" alt="" class="mb-20 h-15vh mt-5">
-          </div>
-          <div class="overflow-y-auto h-60vh pb-10 border-[#093D51]">
-            <div
-                class="mt-5 text-5 border-solid border-2 border-[#093D51] text-[#093D51] rounded-[12px] p-4"
-            >
-              <div class="font-bold text-sm text-[#093D51]">
-                شیوهٔ ورود و ثبت ‌نام در گروسی گالری
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • برای ثبت‌نام در گروسی گالری، اگر قبلاً حساب کاربری دارید می‌توانید از طریق پیامک وارد شوید.<br />
-                • اگر حساب کاربری ندارید، "از این قسمت" وارد صفحه ثبت نام شده و با وارد کردن نام و شماره تلفنی که با کد ملی شما مطابقت دارد، حساب کاربری بسازید.<br />
-                • الزامی به وارد کردن کد معرف نیست.
-              </div>
-              <img :src="img1" />
-
-              <div class="w-full h-1px my-3 bg-secondary"></div>
-              <div class="font-bold mt-4 text-sm text-[#093D51]">
-                شارژ کیف پول
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • ابتدا کیف پول را در منو انتخاب کرده، مبلغ مورد نظر را وارد نموده و دکمه واریز را انتخاب کنید تا کیف پول شما شارژ شود.<br />
-              </div>
-              <img :src="img2" />
-
-              <div class="w-full h-1px my-3 bg-secondary"></div>
-              <div class="font-bold mt-4 text-sm text-[#093D51]">
-                شیوهٔ خرید از گروسی گالری
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • سپس از بخش «خرید و فروش» انتخاب کنید که طلای آب‌شده می‌خواهید یا محصولات دیگر (شامل گوی، شمش یا مکعب).<br />
-                • توجه داشته باشید کارمزد طلای آب‌شده حدود ۲٪ است و کارمزد ریالی محصولات دیگر در پایین صفحه قیمت درج شده است.
-              </div>
-              <img :src="img4" />
-
-              <div class="w-full h-1px my-3 bg-secondary"></div>
-              <div class="font-bold mt-4 text-sm text-[#093D51]">
-                شیوهٔ فروش در گروسی گالری
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • برای فروش محصولاتی که خریداری کرده‌اید، به بخش «خرید و فروش» مراجعه کرده، محصول موردنظر را انتخاب و گزینه فروش را بزنید تا مبلغ قابل دریافت نمایش داده شود.<br />
-                • مبلغ به کیف پول شما واریز می‌شود و از طریق پیام پشتیبانی می‌توانید درخواست برداشت دهید.<br />
-                • اگر موجودی کیف پول بیش از ۱۰ میلیون تومان باشد، مبلغ تا پایان روز کاری بعد به حساب اعلام‌شده شما واریز خواهد شد.
-              </div>
-
-              <div class="w-full h-1px my-3 bg-secondary"></div>
-              <div class="font-bold mt-4 text-sm text-[#093D51]">
-                شیوهٔ دریافت فیزیکی طلا (ارسال)
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • ابتدا موجودی محصول موردنظر را با پشتیبانی در واتساپ هماهنگ کنید.<br />
-                • سپس روی لوگو کلیک کرده، گزینه «برداشت فیزیکی» و بعد «درخواست جدید» را انتخاب کنید.<br />
-                • محصولات خریداری‌شده و تعداد آن‌ها را مشخص کرده و آدرس خود را ثبت نمایید.<br />
-                • پشتیبانی عکس و وزن محصول را برای شما ارسال می‌کند.<br />
-                • ارسال به‌صورت پس‌کرایه و بیمه‌شده انجام می‌شود.<br />
-              </div>
-
-              <div class="w-full h-1px my-3 bg-secondary"></div>
-              <div class="font-bold mt-4 text-sm text-[#093D51]">
-                پاداش معرفی
-              </div>
-              <div class="mt-5 text-xs leading-5">
-                • در صفحه اصلی روی "تنظیمات" کلیک کرده و وارد حساب کاربری خود شوید.
-              </div>
-<!--              <img :src="img2" />-->
-              <div class="mt-5 text-xs leading-5">
-                • سپس گزینه «اشتراک‌گذاری» یا «کپی لینک» را انتخاب کرده و لینک دعوت را برای دوستانتان ارسال کنید.<br />
-                • در صورتی که دوستان شما از طریق لینک شما ثبت‌نام کنند، به‌صورت خودکار ۱ سوت طلا به‌عنوان پاداش دریافت خواهید کرد.
-              </div>
-<!--              <img :src="img3" />-->
-            </div>
-          </div>
-        </div>
-
-        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 py-6 flex gap-2 bg-white">
-          <a class="w-full" href="tel:09031265925">
-            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-          </a>
-          <a href="https://ble.ir/garoosigallery">
-            <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
-          </a>
-        </div>
-
-        <div v-else class="wrap-fix bottom-0 px-10 py-5 flex gap-2 bg-white">
-          <a class="w-full" href="tel:09306612518">
-            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-          </a>
-          <a href="">
-            <BasicButton icon="vuesax-linear:whatsapp" />
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
+  <div class="educate-page-root">
+    <DesktopEducateView v-show="isDesktop" />
+    <MobileEducateView v-show="!isDesktop" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue'
-import img from '@/assets/img/user_ly1.svg'
-import img1 from '@/assets/img/1.png'
-import img2 from '@/assets/img/2.png'
-import img4 from '@/assets/img/4.png'
-import { loading } from '@/utils'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import type { User } from '@/models/login'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
-import type { FormInstance } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
-import { updateMe } from '@/api/me'
-import { useUserStore } from '@/store/userStore'
-import {useConfigStore} from "@/store/configStore";
-const config=useConfigStore()
-const userFormState = ref<User>({
-  fname: '',
-  lname: '',
-  mobile: undefined,
-  birth_date: '',
-  phone_number: '',
-  province: '',
-  city: '',
-  n_code: undefined
-})
-const formRef = ref<FormInstance>()
-const userStore = useUserStore()
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useEducatePage } from './composables/useEducatePage'
+import DesktopEducateView from './desktop/DesktopEducateView.vue'
+import MobileEducateView from './mobile/MobileEducateView.vue'
 
-// const editPassVisible = ref<boolean>(false)
-const editPassVisible = ref<boolean>(false)
+const isDesktop = useDesktopBreakpoint()
 
-function setForm() {
-  userFormState.value = userStore.userInfo
-}
-
-function copyCode() {
-  // nextTick(() => {
-  const val = userStore.userInfo?.referral_id
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-const resetData = () => {
-  formRef.value?.resetFields()
-  userFormState.value = {
-    fname: '',
-    lname: '',
-    mobile: undefined,
-    birth_date: '',
-    phone_number: '',
-    province: '',
-    city: '',
-    n_code: undefined
-  }
-}
-
-onMounted(() => {
-  setForm()
-})
-
-function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      await updateMe(userFormState.value)
-      await userStore.getMyInfo()
-      editPassVisible.value = false
-      message.success('اطلاعات شما با موفقیت به روز رسانی شد')
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
+useEducatePage()
 </script>
 
 <style scoped>
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
+.educate-page-root {
+  min-height: 100%;
+  height: 100%;
 }
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
 </style>
diff --git a/src/views/base/educate/mobile/MobileEducateView.vue b/src/views/base/educate/mobile/MobileEducateView.vue
new file mode 100644
index 0000000..8912b40
--- /dev/null
+++ b/src/views/base/educate/mobile/MobileEducateView.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="wrap-fix z-1 bg-white py-3 px-3 text-black font-bold drop-shadow flex">
+      <div class="cursor-pointer" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">آموزش نرم افزار</div>
+    </div>
+    <div class="pt-10">
+      <div class="text-justify text-base z-200000 relative">
+        <div class="px-10">
+          <div class="overflow-y-auto h-60vh pb-10 border-[#093D51]">
+            <EducateContentPanel variant="mobile" />
+          </div>
+        </div>
+        <EducateSupportActions variant="mobile" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import EducateContentPanel from '../components/EducateContentPanel.vue'
+import EducateSupportActions from '../components/EducateSupportActions.vue'
+</script>
diff --git a/src/views/base/fund/components/Item.vue b/src/views/base/fund/components/Item.vue
index e5c7e33..9e690f7 100644
--- a/src/views/base/fund/components/Item.vue
+++ b/src/views/base/fund/components/Item.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="item" class="bg-white flex flex-col items-center p-3 rounded-xl">
+  <div
+    v-if="item"
+    class="bg-white flex flex-col items-center p-3 rounded-xl"
+    :class="{ 'dfund-card': variant === 'desktop' }"
+  >
     <img :src="displayImage" class="w-[87px] h-[87px] object-contain" alt="" @error="onImageError">
     <div class="mt-3">{{ item.title ?? '-' }}</div>
     <div class="mt-1 flex flex-col items-center gap-0.5 text-center">
@@ -21,9 +25,12 @@ import { getProductDisplayImage } from '@/utils/productAssets'
 
 interface Prop {
   item: WalletInventoryCard
+  variant?: 'mobile' | 'desktop'
 }
 
-const props = defineProps<Prop>()
+const props = withDefaults(defineProps<Prop>(), {
+  variant: 'mobile',
+})
 const imageSrc = ref('')
 
 const displayImage = computed(() => imageSrc.value || resolveImage())
diff --git a/src/views/base/fund/composables/useFundPage.ts b/src/views/base/fund/composables/useFundPage.ts
new file mode 100644
index 0000000..d62d318
--- /dev/null
+++ b/src/views/base/fund/composables/useFundPage.ts
@@ -0,0 +1,119 @@
+import { computed, inject, onMounted, provide, type InjectionKey, type Ref } from 'vue'
+import router from '@/router'
+import { loading } from '@/utils'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import { useConfigStore } from '@/store/configStore'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import type { WalletMetalTotal } from '@/models/walletAssets'
+import { resolveSummaryMetalWeight, fundPageInventoryCards } from '@/utils/productAssets'
+import { useWalletStore } from '@/store/walletStore'
+import {
+  getProjectFundEmptyImage,
+  getProjectFundEmptyText,
+  getProjectFundHeaderBackground,
+  isBazretalaProject,
+} from '@/utils/config'
+import img from '@/assets/img/user_ly1.svg'
+import empty from '@/assets/img/cash_empty.svg'
+
+export interface FundPageContext {
+  isDesktop: Ref<boolean>
+  nameProject: string
+  meta: ReturnType<typeof computed>
+  inventoryCards: ReturnType<typeof computed>
+  metalTotals: ReturnType<typeof computed>
+  primaryMetalTotal: ReturnType<typeof computed>
+  cashWallet: ReturnType<typeof computed>
+  totalRialValue: ReturnType<typeof computed>
+  countBasedInventory: ReturnType<typeof computed>
+  fundHeaderBackground: string
+  fundEmptyImage: string
+  fundEmptyText: string
+  isBazretalaProject: typeof isBazretalaProject
+  formatMetalTotal: (metal: WalletMetalTotal) => string
+  openFundInfo: (productId: number) => void
+  goBack: () => void
+}
+
+export const FUND_PAGE_KEY: InjectionKey<FundPageContext> = Symbol('fundPage')
+
+export function useFundPage(isDesktop: Ref<boolean>) {
+  const nameProject = useConfigStore().config.name
+  const { assetsSummary, loadWalletAssets } = useWalletAssets()
+  const walletStore = useWalletStore()
+  const fundHeaderBackground = getProjectFundHeaderBackground(img)
+  const fundEmptyImage = getProjectFundEmptyImage(empty)
+  const fundEmptyText = getProjectFundEmptyText()
+
+  const meta = computed(() => assetsSummary.value?.meta)
+  const inventoryCards = computed(() =>
+    fundPageInventoryCards(assetsSummary.value?.inventory_cards ?? [])
+  )
+  const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
+  const primaryMetalTotal = computed(() => metalTotals.value[0])
+  const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
+  const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
+  const countBasedInventory = computed(() =>
+    (assetsSummary.value?.count_products ?? []).reduce(
+      (sum, item) => sum + Number(item.quantity ?? 0),
+      0
+    )
+  )
+
+  function formatMetalTotal(metal: WalletMetalTotal) {
+    return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
+  }
+
+  function openFundInfo(productId: number) {
+    router.push({ name: 'fund_info', params: { id: productId } })
+  }
+
+  function goBack() {
+    router.back()
+  }
+
+  onMounted(async () => {
+    try {
+      loading.value = true
+      const tasks = [loadWalletAssets(true)]
+      if (isBazretalaProject()) {
+        tasks.push(walletStore.getMyWallet())
+      }
+      await Promise.all(tasks)
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  })
+
+  const context: FundPageContext = {
+    isDesktop,
+    nameProject,
+    meta,
+    inventoryCards,
+    metalTotals,
+    primaryMetalTotal,
+    cashWallet,
+    totalRialValue,
+    countBasedInventory,
+    fundHeaderBackground,
+    fundEmptyImage,
+    fundEmptyText,
+    isBazretalaProject,
+    formatMetalTotal,
+    openFundInfo,
+    goBack,
+  }
+
+  provide(FUND_PAGE_KEY, context)
+  return context
+}
+
+export function useFundPageContext() {
+  const context = inject(FUND_PAGE_KEY)
+  if (!context) {
+    throw new Error('useFundPageContext must be used within useFundPage')
+  }
+  return context
+}
diff --git a/src/views/base/fund/desktop/DesktopFundView.vue b/src/views/base/fund/desktop/DesktopFundView.vue
new file mode 100644
index 0000000..c5882ec
--- /dev/null
+++ b/src/views/base/fund/desktop/DesktopFundView.vue
@@ -0,0 +1,138 @@
+<template>
+  <div class="dfund">
+    <div class="dfund__container">
+      <header class="dfund-topbar">
+        <button type="button" class="dfund-topbar__back" @click="goBack()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          بازگشت
+        </button>
+        <div class="dfund-topbar__meta">
+          <p class="dfund-topbar__eyebrow">دارایی</p>
+          <h1 class="dfund-topbar__title">دارایی‌ها</h1>
+          <p class="dfund-topbar__subtitle">نمای کلی موجودی محصولات و کیف پول</p>
+        </div>
+      </header>
+
+      <section
+        class="dfund-summary"
+        :class="{ 'dfund-summary--bazretala': isBazretalaProject() }"
+      >
+        <img
+          :src="fundHeaderBackground"
+          alt=""
+          class="dfund-summary__bg"
+          :class="{ 'dfund-summary__bg--cover': isBazretalaProject() }"
+        />
+        <div class="dfund-summary__content">
+          <h2 class="dfund-summary__title">موجودی دارایی‌ها</h2>
+
+          <div v-if="meta?.has_count_based_products" class="dfund-summary__row">
+            <span>محصولات</span>
+            <strong>{{ countBasedInventory }} عدد</strong>
+          </div>
+
+          <template v-if="isBazretalaProject()">
+            <div class="dfund-summary__row">
+              <span>دارایی نقره</span>
+              <strong>{{ walletStore.walletInfo?.count_silver ?? 0 }} گرم</strong>
+            </div>
+            <div class="dfund-summary__row">
+              <span>دارایی طلایی</span>
+              <strong>{{ walletStore.walletInfo?.count_gold_wallet ?? 0 }} گرم</strong>
+            </div>
+          </template>
+          <template v-else-if="meta?.single_metal && primaryMetalTotal">
+            <div class="dfund-summary__row">
+              <span>{{ primaryMetalTotal.label }}</span>
+              <strong>{{ formatMetalTotal(primaryMetalTotal) }}</strong>
+            </div>
+          </template>
+          <template v-else>
+            <div
+              v-for="metal in metalTotals"
+              :key="`metal-${metal.metal_id}`"
+              class="dfund-summary__row"
+            >
+              <span>{{ metal.label }}</span>
+              <strong>{{ formatMetalTotal(metal) }}</strong>
+            </div>
+          </template>
+
+          <div
+            v-if="meta?.has_count_based_products && !isBazretalaProject()"
+            class="dfund-summary__row"
+          >
+            <span>مجموع موجودی</span>
+            <strong>{{ countBasedInventory }} عدد</strong>
+          </div>
+          <div class="dfund-summary__row">
+            <span>دارایی ریالی</span>
+            <strong class="number-ltr">{{ usePriceWithoutType(cashWallet) }} ریال</strong>
+          </div>
+          <div class="dfund-summary__row dfund-summary__row--highlight">
+            <span>معادل ریالی مجموع</span>
+            <strong class="number-ltr">{{ usePriceWithoutType(totalRialValue) }} ریال</strong>
+          </div>
+        </div>
+      </section>
+
+      <section class="dfund-inventory">
+        <div class="dfund-inventory__header">
+          <h3 class="dfund-inventory__title">لیست دارایی‌ها</h3>
+          <span class="dfund-inventory__count">{{ inventoryCards.length }} مورد</span>
+        </div>
+
+        <div
+          v-if="inventoryCards.length === 0 && !loading"
+          class="dfund-inventory__empty"
+        >
+          <img :src="fundEmptyImage" alt="" class="dfund-inventory__empty-img" />
+          <p v-if="nameProject !== 'abaeigold'">{{ fundEmptyText }}</p>
+        </div>
+
+        <a-spin :spinning="loading">
+          <div v-if="inventoryCards.length" class="dfund-inventory__grid">
+            <button
+              v-for="item in inventoryCards"
+              :key="item.product_id"
+              type="button"
+              class="dfund-inventory__card"
+              @click="openFundInfo(item.product_id)"
+            >
+              <Item :item="item" variant="desktop" />
+            </button>
+          </div>
+        </a-spin>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { loading } from '@/utils'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import { useWalletStore } from '@/store/walletStore'
+import Item from '../components/Item.vue'
+import { useFundPageContext } from '../composables/useFundPage'
+
+const walletStore = useWalletStore()
+
+const {
+  nameProject,
+  meta,
+  inventoryCards,
+  metalTotals,
+  primaryMetalTotal,
+  cashWallet,
+  totalRialValue,
+  countBasedInventory,
+  fundHeaderBackground,
+  fundEmptyImage,
+  fundEmptyText,
+  isBazretalaProject,
+  formatMetalTotal,
+  openFundInfo,
+  goBack,
+} = useFundPageContext()
+</script>
diff --git a/src/views/base/fund/desktop/styles/desktop-fund.less b/src/views/base/fund/desktop/styles/desktop-fund.less
new file mode 100644
index 0000000..d4b73eb
--- /dev/null
+++ b/src/views/base/fund/desktop/styles/desktop-fund.less
@@ -0,0 +1,495 @@
+/* Premium desktop fund page */
+
+.dfund {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dfund__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dfund-topbar {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+    flex-shrink: 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 6px 0 0;
+    line-height: 1.6;
+  }
+}
+
+.dfund-summary {
+  position: relative;
+  overflow: hidden;
+  border-radius: 16px;
+  margin-bottom: 24px;
+  background: @App-primary-color;
+  color: #fff;
+
+  &--bazretala {
+    background: #000;
+  }
+
+  &__bg {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    opacity: 0.08;
+    pointer-events: none;
+
+    &--cover {
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.35;
+    }
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    padding: 24px 28px;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px 24px;
+  }
+
+  &__title {
+    grid-column: 1 / -1;
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 4px;
+    color: #fff;
+  }
+
+  &__row {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: 13px;
+
+    span {
+      opacity: 0.85;
+    }
+
+    strong {
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    &--highlight {
+      grid-column: 1 / -1;
+      padding-top: 8px;
+      border-top: 1px solid rgba(255, 255, 255, 0.2);
+    }
+  }
+}
+
+.dfund-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dfund-inventory {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+    color: #111827;
+  }
+
+  &__count {
+    font-size: 13px;
+    color: #9ca3af;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  &__card {
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    font-family: inherit;
+    text-align: inherit;
+    width: 100%;
+
+    &:hover .dfund-card {
+      border-color: rgba(15, 23, 42, 0.12);
+      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
+    }
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 48px 24px;
+    text-align: center;
+    color: #6b7280;
+  }
+
+  &__empty-img {
+    width: 160px;
+    max-width: 100%;
+  }
+}
+
+.dfund-card {
+  width: 100%;
+  border: 1px solid rgba(15, 23, 42, 0.08) !important;
+  border-radius: 14px !important;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+@media (max-width: 1024px) {
+  .dfund-summary__content {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .dfund-inventory__grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .dfund-inventory__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+/* Fund info desktop */
+
+.dfund-info {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dfund-info__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dfund-info-topbar {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+    flex-shrink: 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dfund-info__layout {
+  display: grid;
+  grid-template-columns: 280px minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.dfund-info__hero {
+  padding: 28px 24px;
+  text-align: center;
+}
+
+.dfund-info__image {
+  width: 120px;
+  height: 120px;
+  margin: 0 auto 16px;
+  border-radius: 16px;
+  background: #e0f2fe;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+
+  img {
+    max-width: 80%;
+    max-height: 80%;
+    object-fit: contain;
+  }
+}
+
+.dfund-info__balance {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 6px;
+}
+
+.dfund-info__balance-value {
+  font-size: 28px;
+  font-weight: 700;
+  color: @App-primary-color;
+}
+
+.dfund-info__balance-unit {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.dfund-info__balance-label {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: #9ca3af;
+}
+
+.dfund-info__transactions {
+  padding: 24px;
+}
+
+.dfund-info__transactions-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.dfund-info__transactions-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.dfund-info__transactions-count {
+  font-size: 13px;
+  color: #9ca3af;
+}
+
+.dfund-info__transactions-list {
+  max-height: 520px;
+  overflow-y: auto;
+}
+
+/* Fund new desktop */
+
+.dfund-new {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dfund-new__container {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dfund-new-topbar {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+    flex-shrink: 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dfund-new__card {
+  padding: 32px 28px;
+}
+
+.dfund-new__preview {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+.dfund-new__preview-img {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  border-radius: 16px;
+  background: #e0f2fe;
+  padding: 16px;
+}
+
+.dfund-new__label {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 8px;
+}
+
+.dfund-new__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 20px 0 28px;
+}
+
+.dfund-new__tag {
+  padding: 8px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  background: #f3f4f6;
+  color: #4b5563;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+
+  &--active {
+    background: @App-primary-color;
+    border-color: @App-primary-color;
+    color: #fff;
+  }
+}
+
+.dfund-new__submit {
+  width: 100%;
+}
diff --git a/src/views/base/fund/index.vue b/src/views/base/fund/index.vue
index 5d3ce08..ce9b24f 100644
--- a/src/views/base/fund/index.vue
+++ b/src/views/base/fund/index.vue
@@ -1,170 +1,23 @@
 <template>
-  <div>
-    <div class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow fixed md:absolute top-0 flex h-12 z-20">
-      <div @click="router.back()">
-        <BasicIcon icon="vuesax-linear:arrow-right-1"/>
-      </div>
-      <div class="mr-2">دارایی ها</div>
-    </div>
-    <div
-      class="w-screen md:w-full h-[70vh] fixed md:absolute overflow-hidden"
-      :class="isBazretalaProject() ? 'bazretala-fund-header' : 'text-tertiary bg-primary'"
-    >
-      <img
-        :src="fundHeaderBackground"
-        alt=""
-        :class="isBazretalaProject()
-          ? 'pointer-events-none z-0 absolute inset-0 w-full object-cover object-center'
-          : 'pointer-events-none z-0 w-full absolute bottom-0 left-0 opacity-5'"
-      />
-      <div
-        class="pt-15 flex flex-col relative z-10"
-        :class="isBazretalaProject() ? 'text-white' : 'text-tertiary'"
-      >
-        <div class="font-bold mr-5 z-20">موجودی دارایی ها</div>
-        <div v-if="meta?.has_count_based_products" class="flex mt-4 justify-center mt-2 w-full z-20">
-          محصولات:
-          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
-        </div>
-        <template v-if="isBazretalaProject()">
-          <div class="flex justify-center mt-2 w-full z-20">
-            دارایی نقره:
-            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_silver ?? 0 }}گرم</div>
-          </div>
-          <div class="flex justify-center mt-2 w-full z-20">
-            دارایی طلایی:
-            <div class="text-l mr-4 font-bold">{{ walletStore.walletInfo?.count_gold_wallet ?? 0 }}گرم</div>
-          </div>
-        </template>
-        <template v-else-if="meta?.single_metal && primaryMetalTotal">
-          <div class="flex justify-center mt-2 w-full z-20">
-            {{ primaryMetalTotal.label }}:
-            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
-          </div>
-        </template>
-        <template v-else>
-          <div
-            v-for="metal in metalTotals"
-            :key="`metal-${metal.metal_id}`"
-            class="flex justify-center mt-2 w-full z-20"
-          >
-            {{ metal.label }}:
-            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(metal) }}</div>
-          </div>
-        </template>
-        <div v-if="meta?.has_count_based_products && !isBazretalaProject()" class="flex justify-center mt-2 w-full z-20">
-          مجموع موجودی:
-          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
-        </div>
-        <div class="flex justify-center mt-2 w-full z-20">
-          دارایی ریالی:
-          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(cashWallet) }}ریال</div>
-        </div>
-        <div class="flex justify-center mt-2 w-full z-20">
-          معادل ریالی مجموع دارایی ها:
-          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(totalRialValue) }}ریال</div>
-        </div>
-      </div>
-    </div>
-    <div class="pt-[20rem] ">
-      <div class="bg-gray-100 w-screen md:w-full z-20 relative rounded-t-3xl h-[calc(100vh-20rem-70px)] overflow-y-auto pb-15"
-           style="box-shadow: 0px -2px 4px -2px #0000001A;">
-
-        <div v-if="inventoryCards.length === 0 && !loading" class="w-full h-full flex justify-center items-center">
-          <div>
-            <img
-              :src="fundEmptyImage"
-              alt=""
-              :class="isBazretalaProject() ? 'w-48 max-w-[11rem]' : 'w-70'"
-            >
-            <div v-if="nameProject !== 'abaeigold'" class="text-center text-lg">{{ fundEmptyText }}</div>
-          </div>
-        </div>
-
-        <a-spin :spinning="loading">
-          <div :class="loading ? 'h-[40vh]' : ''" class="grid grid-cols-2 gap-3 p-5">
-            <Item
-              v-for="item in inventoryCards"
-              :key="item.product_id"
-              :item="item"
-              @click="router.push({ name: 'fund_info', params: { id: item.product_id } })"
-            />
-          </div>
-        </a-spin>
-      </div>
-    </div>
+  <div class="fund-page-root">
+    <DesktopFundView v-show="isDesktop" />
+    <MobileFundView v-show="!isDesktop" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import router from '@/router'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import img from '@/assets/img/user_ly1.svg'
-import empty from '@/assets/img/cash_empty.svg'
-import Item from './components/Item.vue'
-import { onMounted, computed } from 'vue'
-import { loading } from '@/utils'
-import { usePriceWithoutType } from '@/utils/usePrice'
-import { useConfigStore } from '@/store/configStore'
-import { useWalletAssets } from '@/composables/useWalletAssets'
-import type { WalletMetalTotal } from '@/models/walletAssets'
-import { resolveSummaryMetalWeight, fundPageInventoryCards } from '@/utils/productAssets'
-import { useWalletStore } from '@/store/walletStore'
-import {
-  getProjectFundEmptyImage,
-  getProjectFundEmptyText,
-  getProjectFundHeaderBackground,
-  isBazretalaProject,
-} from '@/utils/config'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useFundPage } from './composables/useFundPage'
+import DesktopFundView from './desktop/DesktopFundView.vue'
+import MobileFundView from './mobile/MobileFundView.vue'
 
-const nameProject = useConfigStore().config.name
-const { assetsSummary, loadWalletAssets } = useWalletAssets()
-const walletStore = useWalletStore()
-const fundHeaderBackground = getProjectFundHeaderBackground(img)
-const fundEmptyImage = getProjectFundEmptyImage(empty)
-const fundEmptyText = getProjectFundEmptyText()
-
-const meta = computed(() => assetsSummary.value?.meta)
-const inventoryCards = computed(() => fundPageInventoryCards(assetsSummary.value?.inventory_cards ?? []))
-const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
-const primaryMetalTotal = computed(() => metalTotals.value[0])
-const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
-const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
-const countBasedInventory = computed(() =>
-  (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
-)
-
-onMounted(async () => {
-  try {
-    loading.value = true
-    const tasks = [loadWalletAssets(true)]
-    if (isBazretalaProject()) {
-      tasks.push(walletStore.getMyWallet())
-    }
-    await Promise.all(tasks)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-})
-
-function formatMetalTotal(metal: WalletMetalTotal) {
-  return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
-}
+const isDesktop = useDesktopBreakpoint()
+useFundPage(isDesktop)
 </script>
 
 <style scoped>
-.bazretala-fund-header {
-  background-color: #000;
-}
-
-.bazretala-fund-header::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background: rgba(0, 0, 0, 0.45);
-  pointer-events: none;
+.fund-page-root {
+  min-height: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/views/base/fund/info/components/FundEditActions.vue b/src/views/base/fund/info/components/FundEditActions.vue
new file mode 100644
index 0000000..ed5bb91
--- /dev/null
+++ b/src/views/base/fund/info/components/FundEditActions.vue
@@ -0,0 +1,48 @@
+<template>
+  <div :class="variant === 'desktop' ? 'dfund-info-edit' : ''">
+    <div v-if="variant !== 'desktop'" class="font-bold text-lg">گنج {{ info?.title }}</div>
+
+    <BasicButton
+      :class="variant === 'desktop' ? 'mt-4 w-full' : 'mt-12 w-full'"
+      icon="vuesax-linear:edit"
+      icon-size="16"
+      @click="$router.push({ name: 'fund_add', query: { id: infoId } })"
+    >
+      <div class="flex w-full justify-right">ویرایش</div>
+    </BasicButton>
+    <BasicButton
+      :loading="loading"
+      :class="variant === 'desktop' ? 'mt-2 w-full !text-red-600' : 'mb-10 mt-2 w-full !text-red-600'"
+      icon="vuesax-linear:trash"
+      icon-size="16"
+      @click="deleteFundConfirm"
+    >
+      <div class="flex w-full justify-right">حذف</div>
+    </BasicButton>
+
+    <BasicButton
+      v-if="variant !== 'desktop'"
+      class="mb-20 mt-2 w-full"
+      type="primary"
+      @click="transactionShow = false"
+    >
+      بازگشت
+    </BasicButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { loading } from '@/utils'
+import { useFundInfoPageContext } from '../composables/useFundInfoPage'
+
+interface Props {
+  variant?: 'mobile' | 'desktop'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'mobile',
+})
+
+const { info, infoId, transactionShow, deleteFundConfirm } = useFundInfoPageContext()
+</script>
diff --git a/src/views/base/fund/info/components/FundTransactionForm.vue b/src/views/base/fund/info/components/FundTransactionForm.vue
new file mode 100644
index 0000000..41be6aa
--- /dev/null
+++ b/src/views/base/fund/info/components/FundTransactionForm.vue
@@ -0,0 +1,82 @@
+<template>
+  <div :class="variant === 'desktop' ? 'dfund-info-form' : ''">
+    <div v-if="variant !== 'desktop'" class="font-bold text-lg">
+      {{ isDeposit ? 'واریز' : 'برداشت' }}
+    </div>
+    <a-form
+      ref="formRef"
+      :model="userFormState"
+      :class="variant === 'desktop' ? '!mt-0' : '!mt-5'"
+      name="basic"
+      @finish="transaction()"
+    >
+      <a-form-item :rules="[required()]" label="مقدار گرم طلا" name="value" class="!block">
+        <BasicInput
+          v-model:value="userFormState.value"
+          addon-before="گرم"
+          place-holder="گرم"
+          type="text"
+          inputmode="decimal"
+          size="large"
+        />
+        <div v-if="isDeposit" class="mt-2 text-xs font-bold leading-5">
+          <div>{{ formatGoldWalletBalanceText(walletStore?.walletInfo?.gold ?? 0) }}</div>
+          <div v-if="info?.wallet?.gold !== 0">
+            {{ `موجودی قابل برداشت گنج: ${info?.wallet?.gold ?? 0} گرم` }}
+          </div>
+        </div>
+        <div v-else class="mt-2 text-xs font-bold">
+          موجودی گنج {{ info?.title }}: {{ info?.wallet?.gold }} گرم
+        </div>
+      </a-form-item>
+      <a-form-item>
+        <BasicButton
+          :disabled="transButtonDisable"
+          class="w-full py-2 mt-2"
+          html-type="submit"
+          type="primary"
+        >
+          <div>
+            <a-spin v-if="loading" size="small" />
+            <div v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
+          </div>
+        </BasicButton>
+        <BasicButton
+          v-if="variant !== 'desktop'"
+          class="mb-20 mt-2 w-full"
+          @click="transactionShow = false"
+        >
+          بازگشت
+        </BasicButton>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import { loading } from '@/utils'
+import { required } from '@/utils/inputRules'
+import { formatGoldWalletBalanceText } from '@/utils/productDealMethod'
+import { useFundInfoPageContext } from '../composables/useFundInfoPage'
+
+interface Props {
+  variant?: 'mobile' | 'desktop'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'mobile',
+})
+
+const {
+  info,
+  isDeposit,
+  formRef,
+  userFormState,
+  transButtonDisable,
+  walletStore,
+  transactionShow,
+  transaction,
+} = useFundInfoPageContext()
+</script>
diff --git a/src/views/base/fund/info/composables/useFundInfoPage.ts b/src/views/base/fund/info/composables/useFundInfoPage.ts
new file mode 100644
index 0000000..cc2c018
--- /dev/null
+++ b/src/views/base/fund/info/composables/useFundInfoPage.ts
@@ -0,0 +1,185 @@
+import { computed, inject, onMounted, provide, reactive, ref, watch, type InjectionKey } from 'vue'
+import router from '@/router'
+import { loading } from '@/utils'
+import { deleteFund, fundDeposit, fundWithdraw, getFundById, getFundTransactionTable } from '@/api/fund'
+import type { FundTransaction } from '@/models/fund'
+import type { TableInput, TableOutput } from '@/models/table'
+import type { Transaction } from '@/models/transaction'
+import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import { useWalletStore } from '@/store/walletStore'
+import { useFundUserStore } from '@/store/fundStore'
+import { getOneProductWallet } from '@/api/products'
+import type { Product } from '@/models/products'
+import homeImg from '@/assets/img/cash_home.svg'
+import giftImg from '@/assets/img/cash_gift.svg'
+import circulationImg from '@/assets/img/cash_circulation.svg'
+import loveImg from '@/assets/img/cash_love.svg'
+import repairsImg from '@/assets/img/cash_repairs.svg'
+import savingImg from '@/assets/img/cash_saving.svg'
+
+export const FUND_INFO_PAGE_KEY: InjectionKey<ReturnType<typeof useFundInfoPage>> =
+  Symbol('fundInfoPage')
+
+export function useFundInfoPage() {
+  const info = ref<Product>()
+  const items = ref<Transaction[]>([])
+  const tableOutput = ref<TableOutput<Transaction> | null>(null)
+  const pagination = ref<TableInput>({})
+  const transactionShow = ref<boolean>()
+  const editShow = ref<boolean>()
+  const showDeleteConfirm = ref<boolean>()
+  const isDeposit = ref<boolean>()
+  const formRef = ref<FormInstance>()
+  const fundStore = useFundUserStore()
+  const walletStore = useWalletStore()
+
+  const infoId: number = parseInt(String(router.currentRoute.value.params.id))
+  const userFormState = reactive<FundTransaction>({
+    value: undefined,
+    fund_id: infoId,
+  })
+
+  watch(transactionShow, (n) => (!n ? (userFormState.value = undefined) : ''))
+
+  const transButtonDisable = computed(() => {
+    if (!loading.value) {
+      if (userFormState.value !== undefined) {
+        if (isDeposit.value) {
+          return userFormState.value > walletStore?.walletInfo?.gold
+        }
+        return userFormState.value > (info.value?.wallet?.gold ?? 0)
+      }
+      return true
+    }
+    return true
+  })
+
+  const itemImg = computed(() => {
+    switch (info.value?.title) {
+      case 'خرید لوازم منزل':
+        return homeImg
+      case 'هدیه':
+        return giftImg
+      case 'گردش':
+        return circulationImg
+      case 'ازدواج':
+        return loveImg
+      case 'تعمیرات':
+        return repairsImg
+      case 'پس انداز':
+        return savingImg
+      default:
+        return savingImg
+    }
+  })
+
+  function deleteFundConfirm() {
+    if (info.value?.wallet === undefined || info.value?.wallet?.gold === 0) {
+      showDeleteConfirm.value = true
+    } else {
+      message.error('ابتدا گنج خود را خالی کنید')
+      editShow.value = false
+    }
+  }
+
+  async function deleteFundFunction() {
+    try {
+      loading.value = true
+      showDeleteConfirm.value = false
+      await deleteFund(infoId)
+      await fundStore.getMyFund()
+      router.back()
+      message.success('گنج با موفقیت حذف شد')
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function initInfo() {
+    try {
+      loading.value = true
+      info.value = await getOneProductWallet(infoId)
+      await initTable()
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function initTable() {
+    if (info.value?.wallet) {
+      try {
+        loading.value = true
+        items.value = []
+        Object.assign(pagination.value, { wallet_id: info.value?.wallet?.id })
+        tableOutput.value = await getFundTransactionTable(pagination.value)
+        items.value.push(...tableOutput.value.rows)
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loading.value = false
+      }
+    }
+  }
+
+  async function transaction() {
+    formRef.value?.validateFields().then(async () => {
+      try {
+        loading.value = true
+        userFormState.fund_id = infoId
+        isDeposit.value ? await fundDeposit(userFormState) : await fundWithdraw(userFormState)
+        await initInfo()
+        await fundStore.getMyFund()
+        await walletStore.getMyWallet()
+        message.success(`با موفقیت${isDeposit.value ? ' واریز' : ' برداشت'} شد`)
+        transactionShow.value = false
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loading.value = false
+      }
+    })
+  }
+
+  function goBack() {
+    router.back()
+  }
+
+  onMounted(() => {
+    initInfo()
+  })
+
+  const context = {
+    info,
+    items,
+    transactionShow,
+    editShow,
+    showDeleteConfirm,
+    isDeposit,
+    formRef,
+    userFormState,
+    transButtonDisable,
+    itemImg,
+    walletStore,
+    deleteFundConfirm,
+    deleteFundFunction,
+    transaction,
+    goBack,
+    infoId,
+  }
+
+  provide(FUND_INFO_PAGE_KEY, context)
+  return context
+}
+
+export function useFundInfoPageContext() {
+  const context = inject(FUND_INFO_PAGE_KEY)
+  if (!context) {
+    throw new Error('useFundInfoPageContext must be used within useFundInfoPage')
+  }
+  return context
+}
diff --git a/src/views/base/fund/info/desktop/DesktopFundInfoView.vue b/src/views/base/fund/info/desktop/DesktopFundInfoView.vue
new file mode 100644
index 0000000..89f336a
--- /dev/null
+++ b/src/views/base/fund/info/desktop/DesktopFundInfoView.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="dfund-info">
+    <div class="dfund-info__container">
+      <header class="dfund-info-topbar">
+        <button type="button" class="dfund-info-topbar__back" @click="goBack()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          بازگشت
+        </button>
+        <div class="dfund-info-topbar__meta">
+          <p class="dfund-info-topbar__eyebrow">جزئیات دارایی</p>
+          <h1 class="dfund-info-topbar__title">{{ info?.title ?? '—' }}</h1>
+        </div>
+      </header>
+
+      <div class="dfund-info__layout">
+        <section class="dfund-info__hero dfund-surface">
+          <a-spin :spinning="loading">
+            <div class="dfund-info__image">
+              <img v-if="info?.group_type == 'گوی'" :src="goyImg" alt="" />
+              <img v-if="info?.group_type == 'مکعب'" :src="mokaabImg" alt="" />
+              <img v-if="info?.group_type == 'سکه'" :src="sekkeImg" alt="" />
+              <img v-if="info?.group_type == 'مس'" :src="mesImg" alt="" />
+              <img v-if="info?.group_type == 'نقره'" :src="noghrehImg" alt="" />
+              <img
+                v-if="info?.group_type == 'طلا' || info?.group_type == 'آبشده' || info?.group_type == null"
+                :src="defaultImg"
+                alt=""
+              />
+            </div>
+          </a-spin>
+          <div class="dfund-info__balance">
+            <span class="dfund-info__balance-value">{{ info?.wallet?.gold ?? 0 }}</span>
+            <span class="dfund-info__balance-unit">{{ info?.unit }}</span>
+          </div>
+          <p class="dfund-info__balance-label">موجودی گنج {{ info?.title }}</p>
+        </section>
+
+        <section class="dfund-info__transactions dfund-surface">
+          <div class="dfund-info__transactions-header">
+            <h2 class="dfund-info__transactions-title">تراکنش‌ها</h2>
+            <span class="dfund-info__transactions-count">{{ items.length }} مورد</span>
+          </div>
+
+          <div class="dfund-info__transactions-list">
+            <list-anim v-if="!loading">
+              <Item
+                v-for="item in items"
+                :key="item.id"
+                :item="item"
+                :title="info?.title"
+              />
+            </list-anim>
+            <TransactionSkeleton v-for="i in 6" v-else :key="i" class="mt-1" />
+            <empty v-if="items.length === 0 && !loading" text="هیچ تراکنشی یافت نشد" />
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { loading } from '@/utils'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import Empty from '@/components/empty.vue'
+import Item from '../components/Item.vue'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
+import sekkeImg from '@/assets/img/sekkeImg.svg'
+import mesImg from '@/assets/img/mesImg.jpg'
+import noghrehImg from '@/assets/img/noghrehImg.webp'
+import defaultImg from '@/assets/img/defaultAbshodeh.svg'
+import { useFundInfoPageContext } from '../composables/useFundInfoPage'
+
+const { info, items, goBack } = useFundInfoPageContext()
+</script>
diff --git a/src/views/base/fund/info/index.vue b/src/views/base/fund/info/index.vue
index 9d21b76..5e0c3bd 100644
--- a/src/views/base/fund/info/index.vue
+++ b/src/views/base/fund/info/index.vue
@@ -1,305 +1,79 @@
 <template>
-  <div>
-    <div class="bg-white wrap-fix py-3 px-3 text-primary font-bold drop-shadow flex h-12 z-20 justify-between">
-      <div class="flex 	">
-        <div @click="router.back()" class="cursor-pointer">
-          <BasicIcon icon="vuesax-linear:arrow-right-1" />
-        </div>
-        <div class="mr-2">{{ info?.title }}</div>
-      </div>
-<!--      <div @click="editShow = true">
-        <BasicIcon icon="vuesax-linear:setting-4" />
-      </div>-->
-    </div>
-    <div class="pt-20 flex flex-col justify-center items-center">
-      <a-spin :spinning="loading">
-        <div class="bg-sky-100 w-[120px] aspect-square flex justify-center rounded-xl">
-<!--          <img v-if="!loading" :src="itemImg" alt="">-->
-          <img v-if="info?.group_type=='گوی'"  :src="goyImg">
-          <img v-if="info?.group_type=='مکعب'" :src="mokaabImg">
-          <img v-if="info?.group_type=='سکه'" :src="sekkeImg">
-          <img v-if="info?.group_type=='مس'" :src="mesImg">
-          <img v-if="info?.group_type=='نقره'" :src="noghrehImg">
-          <img v-if="info?.group_type=='طلا' || info?.group_type=='آبشده' || info?.group_type== null" :src="defaultImg">
-        </div>
-      </a-spin>
-      <div class="mt-2 font-bold flex text-xs items-center text-gray-500">
-        <div class="ml-1 text-base text-primary">{{ info?.wallet?.gold?? 0 }}</div>
-        {{info?.unit}}
-      </div>
-      <div class="text-gray-400">موجودی گنج {{ info?.title }}</div>
-      <div class="w-full p-5">
-<!--        <div class="w-full flex gap-3">
-          <BasicButton class="w-full !bg-[#F3F0E9] !border-0 !rounded" icon="vuesax-linear:add-square" icon-size="18"
-                       @click="()=> {transactionShow = true; isDeposit= false}">برداشت
-          </BasicButton>
-          <BasicButton class="w-full !bg-[#F3F0E9] !border-0 !rounded" icon="vuesax-linear:arrow-up" icon-size="18"
-                       @click="()=> {transactionShow = true; isDeposit= true}">واریز
-          </BasicButton>
-        </div>-->
-        <div class=" font-bold mt-5">تراکنش ها</div>
-        <!--        <a-spin :spinning="loading">-->
-        <div class="mt-5 pb-17 overflow-y-scroll h-[54vh]">
-          <list-anim v-if="!loading">
-            <Item v-for="item in items" :key="item.id" :item="item"  :title="info?.title"/>
-          </list-anim>
-          <TransactionSkeleton v-for="i in 8" v-else :key="i" class="mt-1" />
-          <empty v-if="items.length === 0 && !loading" text="هیچ تراکنشی یافت نشد" />
-        </div>
-        <!--        </a-spin>-->
-      </div>
-    </div>
-    <BasicActionSheet v-model:show="transactionShow">
-      <div class="font-bold text-lg">{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
-      <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="transaction()">
-        <a-form-item :rules="[required()]" label="مقدار گرم طلا" name="value" class="!block">
-          <BasicInput v-model:value="userFormState.value"
-                      addon-before="گرم" place-holder="گرم"
-                      type="text" inputmode="decimal"
-                      size="large" />
-          <div v-if="isDeposit" class="mt-2 text-xs font-bold leading-5">
-            <div>{{ formatGoldWalletBalanceText(walletStore?.walletInfo?.gold ?? 0) }}</div>
-            <div v-if="info?.wallet?.gold !== 0">
-              {{ `موجودی قابل برداشت گنج: ${info?.wallet?.gold ?? 0} گرم` }}
-            </div>
-          </div>
-          <div v-else class="mt-2 text-xs font-bold">موجودی گنج {{ info.title }}: {{ info?.wallet?.gold }} گرم
-          </div>
-        </a-form-item>
-        <a-form-item>
-          <BasicButton
-            :disabled="transButtonDisable"
-            class=" w-full py-2 mt-2"
-            html-type="submit"
-            type="primary"
-          >
-            <div>
-              <a-spin v-if="loading" size="small" />
-              <div v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
-            </div>
-          </BasicButton>
-          <BasicButton class="mb-20 mt-2 w-full" @click="transactionShow = false">بازگشت</BasicButton>
-        </a-form-item>
-      </a-form>
+  <div class="fund-info-page-root">
+    <DesktopFundInfoView v-show="isDesktop" />
+    <MobileFundInfoView v-show="!isDesktop" />
+
+    <BasicActionSheet v-if="!isDesktop" v-model:show="transactionShow">
+      <FundTransactionForm />
     </BasicActionSheet>
-    <BasicActionSheet v-model:show="editShow">
-      <div class="font-bold text-lg">گنج {{ info?.title }}</div>
+    <BasicModal
+      v-else
+      v-model:visible="transactionShow"
+      :title="isDeposit ? 'واریز' : 'برداشت'"
+      width="480px"
+      destroy-on-close
+      custom-footer
+    >
+      <FundTransactionForm variant="desktop" />
+      <template #footer>
+        <div></div>
+      </template>
+    </BasicModal>
 
-      <BasicButton class="mt-12 w-full" icon="vuesax-linear:edit"
-                   icon-size="16" @click="$router.push({name: 'fund_add', query:{id:infoId}})">
-        <div class="flex w-full justify-right">ویرایش</div>
-      </BasicButton>
-      <BasicButton :loading="loading" class="mb-10 mt-2 w-full !text-red-600"
-                   icon="vuesax-linear:trash"
-                   icon-size="16"
-                   @click="deleteFundConfirm">
-        <div class="flex w-full justify-right">حذف</div>
-      </BasicButton>
-
-      <BasicButton class="mb-20 mt-2 w-full" type="primary" @click="transactionShow = false">بازگشت</BasicButton>
+    <BasicActionSheet v-if="!isDesktop" v-model:show="editShow">
+      <FundEditActions />
     </BasicActionSheet>
-    <DialogVant v-model:show="showDeleteConfirm" :closeOnClickOverlay="true" :timeOut="-1">
-      <!--      <template v-slot:img>
-              <img :src="registerDelayImage" alt="" class="opacity-80">
-            </template>-->
-
-      <template v-slot:title>
-        <div class="p-5 text-sm">
-          آیا از حذف گنج خود اطمینان دارید؟
-        </div>
+    <BasicModal
+      v-else
+      v-model:visible="editShow"
+      :title="`گنج ${info?.title ?? ''}`"
+      width="420px"
+      destroy-on-close
+      custom-footer
+    >
+      <FundEditActions variant="desktop" />
+      <template #footer>
+        <div></div>
       </template>
+    </BasicModal>
 
-      <template v-slot:button>
-        <div class="text-center text-red" @click="deleteFundFunction">
-          حذف
-        </div>
-        <div class="text-center" @click="showDeleteConfirm = false">
-          انصراف
-        </div>
+    <DialogVant v-model:show="showDeleteConfirm" :close-on-click-overlay="true" :time-out="-1">
+      <template #title>
+        <div class="p-5 text-sm">آیا از حذف گنج خود اطمینان دارید؟</div>
+      </template>
+      <template #button>
+        <div class="text-center text-red" @click="deleteFundFunction">حذف</div>
+        <div class="text-center" @click="showDeleteConfirm = false">انصراف</div>
       </template>
-
     </DialogVant>
   </div>
 </template>
 
 <script lang="ts" setup>
-
-import router from '@/router'
-import { computed, onMounted, reactive, ref, watch } from 'vue'
-import Item from './components/Item.vue'
-import homeImg from '@/assets/img/cash_home.svg'
-import giftImg from '@/assets/img/cash_gift.svg'
-import circulationImg from '@/assets/img/cash_circulation.svg'
-import loveImg from '@/assets/img/cash_love.svg'
-import repairsImg from '@/assets/img/cash_repairs.svg'
-import savingImg from '@/assets/img/cash_saving.svg'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import { loading } from '@/utils'
-import { deleteFund, fundDeposit, fundWithdraw, getFundById, getFundTransactionTable } from '@/api/fund'
-import type { Fund, FundTransaction } from '@/models/fund'
-import type { TableInput, TableOutput } from '@/models/table'
-import type { Transaction } from '@/models/transaction'
-import Empty from '@/components/empty.vue'
-import { required } from '@/utils/inputRules'
-import type { FormInstance } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import { formatGoldWalletBalanceText } from '@/utils/productDealMethod'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import { useWalletStore } from '@/store/walletStore'
-import ListAnim from '@/components/ListAnim.vue'
-import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import DialogVant from '@/components/DialogVant.vue'
-import { useFundUserStore } from '@/store/fundStore'
-import { getOneProductWallet } from '@/api/products'
-import goyImg from '@/assets/img/goyImg.svg'
-import mokaabImg from '@/assets/img/mokaabImg.svg'
-import sekkeImg from "@/assets/img/sekkeImg.svg"
-import mesImg from "@/assets/img/mesImg.jpg"
-import noghrehImg from "@/assets/img/noghrehImg.webp"
-import defaultImg from '@/assets/img/defaultAbshodeh.svg'
-import type { Product } from '@/models/products'
-
-const info = ref<Product>()
-const items = ref<Transaction[]>([])
-const tableOutput = ref<TableOutput<Transaction> | null>(null)
-const pagination = ref<TableInput>({/*limit: 100, page: 0*/ })
-const transactionShow = ref<boolean>()
-const editShow = ref<boolean>()
-const showDeleteConfirm = ref<boolean>()
-const isDeposit = ref<boolean>()
-const formRef = ref<FormInstance>()
-let fundStore = useFundUserStore()
-let walletStore = useWalletStore()
-
-
-onMounted(() => {
-  initInfo()
-  // initTable()
-})
-
-function deleteFundConfirm() {
-  if (info.value?.wallet === undefined || info.value?.wallet?.gold === 0) {
-    showDeleteConfirm.value = true
-  } else {
-    message.error('ابتدا گنج خود را خالی کنید')
-    editShow.value = false
-  }
-}
-
-async function deleteFundFunction() {
-  try {
-    loading.value = true
-    showDeleteConfirm.value = false
-    await deleteFund(infoId)
-    await fundStore.getMyFund()
-    router.back()
-    message.success('گنج با موفقیت حذف شد')
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-const infoId: number = parseInt(<string>router.currentRoute.value.params.id)
-const userFormState = reactive<FundTransaction>({
-  value: undefined,
-  fund_id: infoId
-})
-
-watch(transactionShow, (n) => !n ? userFormState.value = undefined : '')
-
-const transButtonDisable = computed(() => {
-    if (!loading.value) {
-      if (userFormState.value !== undefined) {
-        if (isDeposit.value) {
-          return userFormState.value > walletStore?.walletInfo?.gold
-        } else {
-          return userFormState.value > info.value?.wallet?.gold
-        }
-        // return isDeposit.value ? userFormState.value > walletStore?.walletInfo?.gold : userFormState.value > info.value?.wallet?.gold
-      } else return true
-    } else {
-      return true
-    }
-  }
-)
-
-async function initInfo() {
-  try {
-    loading.value = true
-    info.value = await getOneProductWallet(infoId)
-    //pagination.value.page=0
-    await initTable()
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-async function initTable() {
-  if (info.value?.wallet)
-    try {
-      loading.value = true
-      items.value = []
-      Object.assign(pagination.value, { wallet_id: info.value?.wallet?.id })
-      // pagination.value.fund_id = infoId
-      tableOutput.value = await getFundTransactionTable(pagination.value)
-      items.value.push(...tableOutput.value.rows)
-      // console.log(tableOutput.value)
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-}
-
-async function transaction() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      userFormState.fund_id = infoId
-      isDeposit.value ? await fundDeposit(userFormState) : await fundWithdraw(userFormState)
-      await initInfo()
-      // await initTable()
-      await fundStore.getMyFund()
-      await walletStore.getMyWallet()
-      fundStore = useWalletStore()
-      walletStore = useWalletStore()
-      message.success(` با موفقیت${isDeposit.value ? ' واریز' : ' برداشت'} شد`)
-      transactionShow.value = false
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
-
-const itemImg = computed(() => {
-  switch (info.value?.title) {
-    case 'خرید لوازم منزل':
-      return homeImg
-    case 'هدیه':
-      return giftImg
-    case 'گردش':
-      return circulationImg
-    case 'ازدواج':
-      return loveImg
-    case 'تعمیرات':
-      return repairsImg
-    case 'پس انداز':
-      return savingImg
-    default:
-      return savingImg
-  }
-})
-
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useFundInfoPage } from './composables/useFundInfoPage'
+import DesktopFundInfoView from './desktop/DesktopFundInfoView.vue'
+import MobileFundInfoView from './mobile/MobileFundInfoView.vue'
+import FundTransactionForm from './components/FundTransactionForm.vue'
+import FundEditActions from './components/FundEditActions.vue'
 
+const isDesktop = useDesktopBreakpoint()
+const {
+  info,
+  transactionShow,
+  editShow,
+  showDeleteConfirm,
+  isDeposit,
+  deleteFundFunction,
+} = useFundInfoPage()
 </script>
 
 <style scoped>
-
+.fund-info-page-root {
+  min-height: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/views/base/fund/info/mobile/MobileFundInfoView.vue b/src/views/base/fund/info/mobile/MobileFundInfoView.vue
new file mode 100644
index 0000000..27a61ae
--- /dev/null
+++ b/src/views/base/fund/info/mobile/MobileFundInfoView.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div
+      class="bg-white wrap-fix py-3 px-3 text-primary font-bold drop-shadow flex h-12 z-20 justify-between"
+    >
+      <div class="flex">
+        <div class="cursor-pointer" @click="goBack()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" />
+        </div>
+        <div class="mr-2">{{ info?.title }}</div>
+      </div>
+    </div>
+    <div class="pt-20 flex flex-col justify-center items-center">
+      <a-spin :spinning="loading">
+        <div class="bg-sky-100 w-[120px] aspect-square flex justify-center rounded-xl">
+          <img v-if="info?.group_type == 'گوی'" :src="goyImg" alt="" />
+          <img v-if="info?.group_type == 'مکعب'" :src="mokaabImg" alt="" />
+          <img v-if="info?.group_type == 'سکه'" :src="sekkeImg" alt="" />
+          <img v-if="info?.group_type == 'مس'" :src="mesImg" alt="" />
+          <img v-if="info?.group_type == 'نقره'" :src="noghrehImg" alt="" />
+          <img
+            v-if="info?.group_type == 'طلا' || info?.group_type == 'آبشده' || info?.group_type == null"
+            :src="defaultImg"
+            alt=""
+          />
+        </div>
+      </a-spin>
+      <div class="mt-2 font-bold flex text-xs items-center text-gray-500">
+        <div class="ml-1 text-base text-primary">{{ info?.wallet?.gold ?? 0 }}</div>
+        {{ info?.unit }}
+      </div>
+      <div class="text-gray-400">موجودی گنج {{ info?.title }}</div>
+      <div class="w-full p-5">
+        <div class="font-bold mt-5">تراکنش ها</div>
+        <div class="mt-5 pb-17 overflow-y-scroll h-[54vh]">
+          <list-anim v-if="!loading">
+            <Item v-for="item in items" :key="item.id" :item="item" :title="info?.title" />
+          </list-anim>
+          <TransactionSkeleton v-for="i in 8" v-else :key="i" class="mt-1" />
+          <empty v-if="items.length === 0 && !loading" text="هیچ تراکنشی یافت نشد" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { loading } from '@/utils'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import Empty from '@/components/empty.vue'
+import Item from '../components/Item.vue'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
+import sekkeImg from '@/assets/img/sekkeImg.svg'
+import mesImg from '@/assets/img/mesImg.jpg'
+import noghrehImg from '@/assets/img/noghrehImg.webp'
+import defaultImg from '@/assets/img/defaultAbshodeh.svg'
+import { useFundInfoPageContext } from '../composables/useFundInfoPage'
+
+const { info, items, goBack } = useFundInfoPageContext()
+</script>
diff --git a/src/views/base/fund/mobile/MobileFundView.vue b/src/views/base/fund/mobile/MobileFundView.vue
new file mode 100644
index 0000000..a0e182f
--- /dev/null
+++ b/src/views/base/fund/mobile/MobileFundView.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <div
+      class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow fixed md:absolute top-0 flex h-12 z-20"
+    >
+      <div @click="goBack()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">دارایی ها</div>
+    </div>
+    <div
+      class="w-screen md:w-full h-[70vh] fixed md:absolute overflow-hidden"
+      :class="isBazretalaProject() ? 'bazretala-fund-header' : 'text-tertiary bg-primary'"
+    >
+      <img
+        :src="fundHeaderBackground"
+        alt=""
+        :class="
+          isBazretalaProject()
+            ? 'pointer-events-none z-0 absolute inset-0 w-full object-cover object-center'
+            : 'pointer-events-none z-0 w-full absolute bottom-0 left-0 opacity-5'
+        "
+      />
+      <div
+        class="pt-15 flex flex-col relative z-10"
+        :class="isBazretalaProject() ? 'text-white' : 'text-tertiary'"
+      >
+        <div class="font-bold mr-5 z-20">موجودی دارایی ها</div>
+        <div
+          v-if="meta?.has_count_based_products"
+          class="flex mt-4 justify-center mt-2 w-full z-20"
+        >
+          محصولات:
+          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
+        </div>
+        <template v-if="isBazretalaProject()">
+          <div class="flex justify-center mt-2 w-full z-20">
+            دارایی نقره:
+            <div class="text-l mr-4 font-bold">
+              {{ walletStore.walletInfo?.count_silver ?? 0 }}گرم
+            </div>
+          </div>
+          <div class="flex justify-center mt-2 w-full z-20">
+            دارایی طلایی:
+            <div class="text-l mr-4 font-bold">
+              {{ walletStore.walletInfo?.count_gold_wallet ?? 0 }}گرم
+            </div>
+          </div>
+        </template>
+        <template v-else-if="meta?.single_metal && primaryMetalTotal">
+          <div class="flex justify-center mt-2 w-full z-20">
+            {{ primaryMetalTotal.label }}:
+            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
+          </div>
+        </template>
+        <template v-else>
+          <div
+            v-for="metal in metalTotals"
+            :key="`metal-${metal.metal_id}`"
+            class="flex justify-center mt-2 w-full z-20"
+          >
+            {{ metal.label }}:
+            <div class="text-l mr-4 font-bold">{{ formatMetalTotal(metal) }}</div>
+          </div>
+        </template>
+        <div
+          v-if="meta?.has_count_based_products && !isBazretalaProject()"
+          class="flex justify-center mt-2 w-full z-20"
+        >
+          مجموع موجودی:
+          <div class="text-l mr-4 font-bold">{{ countBasedInventory }} عدد</div>
+        </div>
+        <div class="flex justify-center mt-2 w-full z-20">
+          دارایی ریالی:
+          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(cashWallet) }}ریال</div>
+        </div>
+        <div class="flex justify-center mt-2 w-full z-20">
+          معادل ریالی مجموع دارایی ها:
+          <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(totalRialValue) }}ریال</div>
+        </div>
+      </div>
+    </div>
+    <div class="pt-[20rem]">
+      <div
+        class="bg-gray-100 w-screen md:w-full z-20 relative rounded-t-3xl h-[calc(100vh-20rem-70px)] overflow-y-auto pb-15"
+        style="box-shadow: 0px -2px 4px -2px #0000001a"
+      >
+        <div
+          v-if="inventoryCards.length === 0 && !loading"
+          class="w-full h-full flex justify-center items-center"
+        >
+          <div>
+            <img
+              :src="fundEmptyImage"
+              alt=""
+              :class="isBazretalaProject() ? 'w-48 max-w-[11rem]' : 'w-70'"
+            />
+            <div v-if="nameProject !== 'abaeigold'" class="text-center text-lg">
+              {{ fundEmptyText }}
+            </div>
+          </div>
+        </div>
+
+        <a-spin :spinning="loading">
+          <div :class="loading ? 'h-[40vh]' : ''" class="grid grid-cols-2 gap-3 p-5">
+            <Item
+              v-for="item in inventoryCards"
+              :key="item.product_id"
+              :item="item"
+              @click="openFundInfo(item.product_id)"
+            />
+          </div>
+        </a-spin>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { loading } from '@/utils'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import { useWalletStore } from '@/store/walletStore'
+import Item from '../components/Item.vue'
+import { useFundPageContext } from '../composables/useFundPage'
+
+const walletStore = useWalletStore()
+
+const {
+  nameProject,
+  meta,
+  inventoryCards,
+  metalTotals,
+  primaryMetalTotal,
+  cashWallet,
+  totalRialValue,
+  countBasedInventory,
+  fundHeaderBackground,
+  fundEmptyImage,
+  fundEmptyText,
+  isBazretalaProject,
+  formatMetalTotal,
+  openFundInfo,
+  goBack,
+} = useFundPageContext()
+</script>
+
+<style scoped>
+.bazretala-fund-header {
+  background-color: #000;
+}
+
+.bazretala-fund-header::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+}
+</style>
diff --git a/src/views/base/fund/newFund/composables/useFundNewPage.ts b/src/views/base/fund/newFund/composables/useFundNewPage.ts
new file mode 100644
index 0000000..50eeab2
--- /dev/null
+++ b/src/views/base/fund/newFund/composables/useFundNewPage.ts
@@ -0,0 +1,117 @@
+import { computed, inject, onMounted, provide, ref, type InjectionKey } from 'vue'
+import router from '@/router'
+import { loading } from '@/utils'
+import { usePrefix } from '@/utils/usePrefix'
+import { createFund, editFund, getFundById } from '@/api/fund'
+import { message } from 'ant-design-vue/es'
+import { useFundUserStore } from '@/store/fundStore'
+import type { Fund } from '@/models/fund'
+import homeImg from '@/assets/img/cash_home.svg'
+import giftImg from '@/assets/img/cash_gift.svg'
+import circulationImg from '@/assets/img/cash_circulation.svg'
+import loveImg from '@/assets/img/cash_love.svg'
+import repairsImg from '@/assets/img/cash_repairs.svg'
+import savingImg from '@/assets/img/cash_saving.svg'
+
+export const FUND_NEW_PAGE_KEY: InjectionKey<ReturnType<typeof useFundNewPage>> =
+  Symbol('fundNewPage')
+
+const types = [
+  { name: 'خرید لوازم منزل' },
+  { name: 'پس انداز' },
+  { name: 'گردش' },
+  { name: 'ازدواج' },
+  { name: 'تعمیرات' },
+  { name: 'هدیه' },
+]
+
+export function useFundNewPage() {
+  const fundStore = useFundUserStore()
+  const edit_id = computed(() => parseInt(router.currentRoute.value.query.id as string))
+  const name = ref<string>('پس انداز')
+  const { prefixCls } = usePrefix('input_name')
+  const info = ref<Fund>()
+
+  const itemImg = computed(() => {
+    switch (name.value) {
+      case 'خرید لوازم منزل':
+        return homeImg
+      case 'هدیه':
+        return giftImg
+      case 'گردش':
+        return circulationImg
+      case 'ازدواج':
+        return loveImg
+      case 'تعمیرات':
+        return repairsImg
+      case 'پس انداز':
+        return savingImg
+      default:
+        return savingImg
+    }
+  })
+
+  async function getEditInfo() {
+    try {
+      loading.value = true
+      info.value = await getFundById(edit_id.value)
+      name.value = info.value?.title ?? ''
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function ok() {
+    try {
+      loading.value = true
+      if (!name.value) {
+        message.error('ابتدا نام گنج را وارد کنید')
+        return
+      }
+      edit_id.value
+        ? await editFund(edit_id.value, { title: name.value })
+        : await createFund({ title: name.value })
+      await fundStore.getMyFund()
+      message.success(`گنج با موفقیت ${edit_id.value ? 'ویرایش' : 'ساخته'} شد`)
+      router.back()
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function goBack() {
+    router.back()
+  }
+
+  onMounted(() => {
+    if (edit_id.value) {
+      getEditInfo()
+    }
+  })
+
+  const context = {
+    types,
+    edit_id,
+    name,
+    prefixCls,
+    info,
+    itemImg,
+    ok,
+    goBack,
+  }
+
+  provide(FUND_NEW_PAGE_KEY, context)
+  return context
+}
+
+export function useFundNewPageContext() {
+  const context = inject(FUND_NEW_PAGE_KEY)
+  if (!context) {
+    throw new Error('useFundNewPageContext must be used within useFundNewPage')
+  }
+  return context
+}
diff --git a/src/views/base/fund/newFund/desktop/DesktopFundNewView.vue b/src/views/base/fund/newFund/desktop/DesktopFundNewView.vue
new file mode 100644
index 0000000..fb5acd3
--- /dev/null
+++ b/src/views/base/fund/newFund/desktop/DesktopFundNewView.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="dfund-new">
+    <div class="dfund-new__container">
+      <header class="dfund-new-topbar">
+        <button type="button" class="dfund-new-topbar__back" @click="goBack()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          بازگشت
+        </button>
+        <div class="dfund-new-topbar__meta">
+          <p class="dfund-new-topbar__eyebrow">گنج</p>
+          <h1 class="dfund-new-topbar__title">
+            {{ edit_id ? `ویرایش گنج ${name}` : 'صندوق جدید' }}
+          </h1>
+        </div>
+      </header>
+
+      <a-spin :spinning="loading">
+        <section class="dfund-new__card dfund-surface">
+          <div class="dfund-new__preview">
+            <img :src="itemImg" alt="" class="dfund-new__preview-img" />
+          </div>
+
+          <div class="dfund-new__field" :class="[prefixCls]">
+            <label class="dfund-new__label">عنوان گنج</label>
+            <van-field
+              v-model="name"
+              label=""
+              placeholder="عنوان را وارد کنید"
+              input-align="center"
+              :show-word-limit="true"
+              maxlength="25"
+              rows="1"
+              size="small"
+            />
+          </div>
+
+          <div class="dfund-new__tags">
+            <button
+              v-for="item in types"
+              :key="item.name"
+              type="button"
+              class="dfund-new__tag"
+              :class="{ 'dfund-new__tag--active': item.name === name }"
+              @click="name = item.name"
+            >
+              {{ item.name }}
+            </button>
+          </div>
+
+          <BasicButton class="dfund-new__submit" type="primary" :disabled="loading" @click="ok()">
+            <a-spin v-if="loading" size="small" />
+            <span v-else>{{ edit_id ? 'ویرایش گنج' : 'ساخت گنج' }}</span>
+          </BasicButton>
+        </section>
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { loading } from '@/utils'
+import { useFundNewPageContext } from '../composables/useFundNewPage'
+
+const { types, edit_id, name, prefixCls, itemImg, ok, goBack } = useFundNewPageContext()
+</script>
+
+<style lang="less">
+@prefix: ~'@{prefixCls}-input_name';
+
+.@{prefix} {
+  .van-field__value {
+    @apply flex;
+  }
+
+  .van-field__body {
+    @apply w-full mr-5;
+  }
+}
+</style>
diff --git a/src/views/base/fund/newFund/index.vue b/src/views/base/fund/newFund/index.vue
index 529a54e..65d5c1c 100644
--- a/src/views/base/fund/newFund/index.vue
+++ b/src/views/base/fund/newFund/index.vue
@@ -1,194 +1,23 @@
 <template>
-  <div>
-    <div class="bg-white wrap-fix py-3 px-3 text-primary font-bold drop-shadow flex h-12 z-20 justify-between">
-      <div class="flex 	">
-        <div @click="router.back()" class="cursor-pointer">
-          <BasicIcon icon="vuesax-linear:arrow-right-1"/>
-        </div>
-        <div class="mr-2">{{edit_id? `ویرایش گنج ${name}`: 'صندوق جدید'}}</div>
-      </div>
-      <div @click="router.back()">
-        <!--        <BasicIcon icon="vuesax-linear:setting-4"/>-->
-      </div>
-    </div>
-    <a-spin :spinning="loading">
-      <div class="pt-20 flex flex-col justify-center items-center">
-        <div class="bg-sky-100 w-[120px] aspect-square flex justify-center rounded-xl"><img :src="itemImg" alt=""></div>
-        <!--      <div class="mt-1 text-xs">تغییر عکس</div>-->
-        <div class="flex mt-3 w-full relative px-5" :class="[prefixCls]">
-          <!--        <div class="text-primary font-bold mx-auto items-center">پس انداز</div>
-                  <div class="absolute left-5 text-gray-400 text-xs">7/25</div>-->
-          <van-field
-              v-model="name"
-              label=""
-              class="font-bold"
-              placeholder="عنوان را وارد کنید"
-              input-align="center"
-              :show-word-limit="true"
-              maxlength="25"
-              rows="1"
-              size="small"
-          />
-        </div>
-        <div class="flex overflow-x-scroll gap-2 whitespace-nowrap max-w-[320px] mt-2 px-3">
-          <!--        <BasicTags
-                      :items="types"
-                      color="green"
-                      :has-add="false"
-                  />-->
-          <!--        <BasicButton v-for="item in types" size="small">{{item.name}}</BasicButton>-->
-          <div v-for="item in types"
-               class="border-1 px-3 py-2 flex-nowrap rounded text-xs color-transition background-color-transition"
-               :key="item.name"
-               :class="item.name === name? 'bg-primary text-white':'bg-gray-200 text-gray-600'"
-               @click="name = item.name">
-            {{ item.name }}
-          </div>
-        </div>
-        <!-- <div class="mt-2 font-bold flex text-xs items-center text-gray-500">
-          <div class="ml-1 text-base text-primary">{{ router.currentRoute.value.query.amount }}</div>
-          گرم
-        </div>
-        <div class="text-gray-400">موجودی صندوق {{itemName}}</div>
-        <div class="w-full p-5">
-          <div class="w-full flex gap-3">
-            <BasicButton class="w-full !bg-light" icon="vuesax-linear:add-square" icon-size="18">برداشت</BasicButton>
-            <BasicButton class="w-full !bg-light" icon="vuesax-linear:arrow-up" icon-size="18">واریز</BasicButton>
-          </div>
-          <div class="text-lg font-bold mt-5">تراکنش ها</div>
-         <div class="mt-5 pb-17">
-            <Item v-for="item in items" :is-up="item.isUp" :has-transition="item.hasTransition" :key="item"/>
-          </div>
-      </div>-->
-        <div class="wrap-fix flex justify-center bottom-23 px-5 z-200" @click="ok()">
-          <BasicButton class="rounded w-full  px-5 py-2 text-center" type="primary" :disabled="loading">
-            <a-spin v-if="loading" size="small"/>
-            <div v-else>{{edit_id? 'ویرایش گنج':'ساخت گنج'}}</div>
-          </BasicButton>
-        </div>
-      </div>
-    </a-spin>
-
+  <div class="fund-new-page-root">
+    <DesktopFundNewView v-show="isDesktop" />
+    <MobileFundNewView v-show="!isDesktop" />
   </div>
 </template>
 
 <script setup lang="ts">
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useFundNewPage } from './composables/useFundNewPage'
+import DesktopFundNewView from './desktop/DesktopFundNewView.vue'
+import MobileFundNewView from './mobile/MobileFundNewView.vue'
 
-import router from "@/router";
-import {computed, onMounted, ref} from "vue";
-import homeImg from "@/assets/img/cash_home.svg";
-import giftImg from "@/assets/img/cash_gift.svg";
-import circulationImg from "@/assets/img/cash_circulation.svg";
-import loveImg from "@/assets/img/cash_love.svg";
-import repairsImg from "@/assets/img/cash_repairs.svg";
-import savingImg from "@/assets/img/cash_saving.svg";
-import {usePrefix} from "@/utils/usePrefix";
-import {loading} from "@/utils";
-import {createFund, editFund, getFundById} from "@/api/fund";
-import {message} from "ant-design-vue/es";
-import {useFundUserStore} from "@/store/fundStore";
-import BasicButton from "@/components/BasicPacks/BasicButton.vue";
-import type {Fund} from "@/models/fund";
-
-const fundStore = useFundUserStore()
-
-
-const types = [
-  {
-    name: 'خرید لوازم منزل'
-  },
-  {
-    name: 'پس انداز'
-  },
-  {
-    name: 'گردش'
-  },
-  {
-    name: 'ازدواج'
-  },
-  {
-    name: 'تعمیرات'
-  },
-  {
-    name: 'هدیه'
-  },
-]
-
-const edit_id = computed(() => {
-  return parseInt(router.currentRoute.value.query.id as string)
-})
-const name = ref<string>('پس انداز')
-const {prefixCls} = usePrefix('input_name')
-const info = ref<Fund>()
-
-async function getEditInfo() {
-  try {
-    loading.value = true
-    info.value = await getFundById(edit_id.value)
-    name.value = info.value?.title?? ''
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-onMounted(() => {
-  if (edit_id.value) {
-    getEditInfo()
-  }
-})
-
-const itemImg = computed(() => {
-  switch (name.value) {
-    case 'خرید لوازم منزل':
-      return homeImg
-    case 'هدیه':
-      return giftImg
-    case 'گردش':
-      return circulationImg
-    case 'ازدواج':
-      return loveImg
-    case 'تعمیرات':
-      return repairsImg
-    case 'پس انداز':
-      return savingImg
-    default:
-      return savingImg
-  }
-})
-
-async function ok() {
-  try {
-    loading.value = true
-    // console.log(name.value)
-    name.value ? edit_id.value? await editFund(edit_id.value,{title: name.value}) :await createFund({title: name.value}) : () => {
-      message.error('ابتدا نام گنج را وارد کنید')
-      return
-    }
-    await fundStore.getMyFund()
-    message.success(`گنج با موفقیت ${edit_id.value? 'ویرایش':'ساخته'} شد`)
-    router.back()
-    // name.value? message.warn('ss'): message.error('ابتدا نام صندوق را وارد کنید')
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
+const isDesktop = useDesktopBreakpoint()
+useFundNewPage()
 </script>
 
-<style lang="less">
-@prefix: ~'@{prefixCls}-input_name';
-
-.@{prefix} {
-  .van-field__value {
-  @apply flex;
-  }
-
-  .van-field__body {
-  @apply w-full mr-5;
-  }
+<style scoped>
+.fund-new-page-root {
+  min-height: 100%;
+  height: 100%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/base/fund/newFund/mobile/MobileFundNewView.vue b/src/views/base/fund/newFund/mobile/MobileFundNewView.vue
new file mode 100644
index 0000000..1e34d0f
--- /dev/null
+++ b/src/views/base/fund/newFund/mobile/MobileFundNewView.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div
+      class="bg-white wrap-fix py-3 px-3 text-primary font-bold drop-shadow flex h-12 z-20 justify-between"
+    >
+      <div class="flex">
+        <div class="cursor-pointer" @click="goBack()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" />
+        </div>
+        <div class="mr-2">{{ edit_id ? `ویرایش گنج ${name}` : 'صندوق جدید' }}</div>
+      </div>
+    </div>
+    <a-spin :spinning="loading">
+      <div class="pt-20 flex flex-col justify-center items-center">
+        <div class="bg-sky-100 w-[120px] aspect-square flex justify-center rounded-xl">
+          <img :src="itemImg" alt="" />
+        </div>
+        <div class="flex mt-3 w-full relative px-5" :class="[prefixCls]">
+          <van-field
+            v-model="name"
+            label=""
+            class="font-bold"
+            placeholder="عنوان را وارد کنید"
+            input-align="center"
+            :show-word-limit="true"
+            maxlength="25"
+            rows="1"
+            size="small"
+          />
+        </div>
+        <div class="flex overflow-x-scroll gap-2 whitespace-nowrap max-w-[320px] mt-2 px-3">
+          <div
+            v-for="item in types"
+            :key="item.name"
+            class="border-1 px-3 py-2 flex-nowrap rounded text-xs color-transition background-color-transition"
+            :class="item.name === name ? 'bg-primary text-white' : 'bg-gray-200 text-gray-600'"
+            @click="name = item.name"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="wrap-fix flex justify-center bottom-23 px-5 z-200" @click="ok()">
+          <BasicButton class="rounded w-full px-5 py-2 text-center" type="primary" :disabled="loading">
+            <a-spin v-if="loading" size="small" />
+            <div v-else>{{ edit_id ? 'ویرایش گنج' : 'ساخت گنج' }}</div>
+          </BasicButton>
+        </div>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { loading } from '@/utils'
+import { useFundNewPageContext } from '../composables/useFundNewPage'
+
+const { types, edit_id, name, prefixCls, itemImg, ok, goBack } = useFundNewPageContext()
+</script>
+
+<style lang="less">
+@prefix: ~'@{prefixCls}-input_name';
+
+.@{prefix} {
+  .van-field__value {
+    @apply flex;
+  }
+
+  .van-field__body {
+    @apply w-full mr-5;
+  }
+}
+</style>
diff --git a/src/views/base/giftCard/components/GiftCardForm.vue b/src/views/base/giftCard/components/GiftCardForm.vue
new file mode 100644
index 0000000..78c81f2
--- /dev/null
+++ b/src/views/base/giftCard/components/GiftCardForm.vue
@@ -0,0 +1,52 @@
+<template>
+  <a-form
+    :model="form"
+    class="!mt-0"
+    name="gift-card-form"
+    @finish="registerGiftCard"
+  >
+    <a-form-item :rules="[required()]" label="کد کارت هدیه" name="code">
+      <BasicInput
+        v-model:value="form.code"
+        place-holder="کد کارت هدیه را وارد کنید"
+        size="large"
+        type="text"
+      />
+    </a-form-item>
+    <p :class="variant === 'desktop' ? 'dgift-form__hint' : 'font-bold text-xs mt-3'">
+      کد کارت هدیه خود را در فیلد بالا وارد کنید و سپس دکمه ثبت را بزنید.
+    </p>
+    <a-form-item>
+      <BasicButton
+        :disabled="disableButton"
+        :class="variant === 'desktop' ? 'dgift-form__submit' : 'w-full py-2 mt-5'"
+        html-type="submit"
+        type="primary"
+      >
+        <a-spin v-if="loading" size="small" />
+        <span v-else>ثبت کد</span>
+      </BasicButton>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import { required } from '@/utils/inputRules'
+import { useGiftCardPageContext } from '../composables/useGiftCardPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const {
+  form,
+  disableButton,
+  loading,
+  registerGiftCard,
+} = useGiftCardPageContext()
+</script>
diff --git a/src/views/base/giftCard/composables/useGiftCardPage.ts b/src/views/base/giftCard/composables/useGiftCardPage.ts
new file mode 100644
index 0000000..b9e7927
--- /dev/null
+++ b/src/views/base/giftCard/composables/useGiftCardPage.ts
@@ -0,0 +1,58 @@
+import { computed, inject, provide, ref, type ComputedRef, type InjectionKey, type Ref } from 'vue'
+import { loading } from '@/utils'
+import { registerCodeGiftCard } from '@/api/giftCard'
+import { message } from 'ant-design-vue'
+
+export interface GiftCardPageContext {
+  form: Ref<{ code: string }>
+  disableButton: ComputedRef<boolean>
+  loading: typeof loading
+  registerGiftCard: () => Promise<void>
+}
+
+export const GIFT_CARD_PAGE_CONTEXT_KEY: InjectionKey<GiftCardPageContext> =
+  Symbol('giftCardPageContext')
+
+export function useGiftCardPage() {
+  const form = ref<{ code: string }>({
+    code: '',
+  })
+
+  const disableButton = computed(() => {
+    if (!loading.value) {
+      return !form.value.code || form.value.code.trim().length === 0
+    }
+    return true
+  })
+
+  async function registerGiftCard() {
+    try {
+      loading.value = true
+      await registerCodeGiftCard(form.value.code)
+      message.success('کد کارت هدیه با موفقیت ثبت شد')
+      form.value.code = ''
+    } catch (e: any) {
+      message.error(e?.response?.data?.message || 'خطا در ثبت کد کارت هدیه')
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const context: GiftCardPageContext = {
+    form,
+    disableButton,
+    loading,
+    registerGiftCard,
+  }
+
+  provide(GIFT_CARD_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useGiftCardPageContext() {
+  const context = inject(GIFT_CARD_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useGiftCardPageContext must be used within a page that calls useGiftCardPage()')
+  }
+  return context
+}
diff --git a/src/views/base/giftCard/desktop/DesktopGiftCardView.vue b/src/views/base/giftCard/desktop/DesktopGiftCardView.vue
new file mode 100644
index 0000000..131057e
--- /dev/null
+++ b/src/views/base/giftCard/desktop/DesktopGiftCardView.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="dgift">
+    <div class="dgift__container">
+      <header class="dgift-topbar">
+        <button type="button" class="dgift-topbar__back" @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          <span>بازگشت</span>
+        </button>
+        <div class="dgift-topbar__meta">
+          <p class="dgift-topbar__eyebrow">هدایا</p>
+          <h1 class="dgift-topbar__title">ثبت کارت هدیه</h1>
+        </div>
+      </header>
+
+      <div class="dgift-layout">
+        <section class="dgift-surface dgift-form">
+          <div class="dgift-form__header">
+            <div class="dgift-form__icon">
+              <BasicIcon icon="vuesax-linear:gift" size="28" />
+            </div>
+            <div>
+              <h2 class="dgift-form__title">ثبت کد کارت هدیه</h2>
+              <p class="dgift-form__subtitle">کد دریافتی خود را وارد کنید تا اعتبار به حساب شما اضافه شود</p>
+            </div>
+          </div>
+          <GiftCardForm variant="desktop" />
+        </section>
+
+        <aside class="dgift-surface dgift-guide">
+          <h3 class="dgift-guide__title">راهنمای استفاده</h3>
+          <ol class="dgift-guide__steps">
+            <li>کد کارت هدیه را از پیامک یا کارت فیزیکی دریافت کنید.</li>
+            <li>کد را بدون فاصله اضافی در فیلد مربوطه وارد کنید.</li>
+            <li>روی «ثبت کد» بزنید و پیام تأیید را بررسی کنید.</li>
+          </ol>
+          <div class="dgift-guide__note">
+            <BasicIcon icon="vuesax-linear:info-circle" size="18" />
+            <p>هر کد فقط یک‌بار قابل استفاده است و پس از ثبت موفق، موجودی کیف پول به‌روزرسانی می‌شود.</p>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import GiftCardForm from '../components/GiftCardForm.vue'
+</script>
diff --git a/src/views/base/giftCard/desktop/styles/desktop-gift-card.less b/src/views/base/giftCard/desktop/styles/desktop-gift-card.less
new file mode 100644
index 0000000..e0d81a4
--- /dev/null
+++ b/src/views/base/giftCard/desktop/styles/desktop-gift-card.less
@@ -0,0 +1,186 @@
+/* Premium desktop gift card page */
+
+.dgift {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dgift__container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dgift-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dgift-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
+  gap: 20px;
+  align-items: start;
+}
+
+.dgift-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dgift-form {
+  padding: 28px;
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef0f3;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: rgba(9, 61, 81, 0.08);
+    color: @App-primary-color;
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 6px;
+  }
+
+  &__subtitle {
+    font-size: 13px;
+    line-height: 1.6;
+    color: #6b7280;
+    margin: 0;
+  }
+
+  &__hint {
+    font-size: 13px;
+    line-height: 1.7;
+    color: #6b7280;
+    margin: 0 0 16px;
+  }
+
+  &__submit {
+    width: 100%;
+    min-height: 44px;
+    margin-top: 8px;
+  }
+}
+
+.dgift-guide {
+  padding: 24px;
+  position: sticky;
+  top: 24px;
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 16px;
+  }
+
+  &__steps {
+    margin: 0 0 20px;
+    padding: 0 20px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    font-size: 13px;
+    line-height: 1.7;
+    color: #4b5563;
+  }
+
+  &__note {
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+    padding: 14px;
+    border-radius: 12px;
+    background: #f9fafb;
+    border: 1px solid #eef0f3;
+    color: #6b7280;
+
+    p {
+      margin: 0;
+      font-size: 12px;
+      line-height: 1.7;
+    }
+
+    svg,
+    .basic-icon {
+      color: @App-primary-color;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .dgift-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .dgift-guide {
+    position: static;
+  }
+}
diff --git a/src/views/base/giftCard/index.vue b/src/views/base/giftCard/index.vue
index 75a5e7f..25adcf0 100644
--- a/src/views/base/giftCard/index.vue
+++ b/src/views/base/giftCard/index.vue
@@ -1,78 +1,24 @@
 <template>
-  <div>
-    <div class="bg-white py-3 px-3 text-black font-bold drop-shadow z-[1999] wrap-fix">کارت هدیه</div>
-    <div class="px-5 pt-26 pb-2">
-      <a-form :model="form" class="!mt-5" name="basic" @finish="registerGiftCard">
-        <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
-          <bg_main />
-          <div class="z-100 relative">
-            <a-form-item :rules="[required()]" label="کد کارت هدیه" name="code">
-              <BasicInput
-                v-model:value="form.code"
-                place-holder="کد کارت هدیه را وارد کنید"
-                size="large"
-                type="text"
-              />
-            </a-form-item>
-            <div class="font-bold text-xs mt-3">
-              کد کارت هدیه خود را در فیلد بالا وارد کنید و سپس دکمه ثبت را بزنید.
-            </div>
-          </div>
-        </div>
-        <a-form-item>
-          <BasicButton
-            :disabled="disableButton"
-            class="w-full py-2 mt-5"
-            html-type="submit"
-            type="primary"
-          >
-            <div>
-              <a-spin v-if="loading" size="small" />
-              <div v-else>ثبت کد</div>
-            </div>
-          </BasicButton>
-        </a-form-item>
-      </a-form>
-    </div>
+  <div class="gift-card-page-root">
+    <DesktopGiftCardView v-show="isDesktop" />
+    <MobileGiftCardView v-show="!isDesktop" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { loading } from '@/utils'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import Bg_main from '@/components/bg_main.vue'
-import { registerCodeGiftCard } from '@/api/giftCard'
-import { message } from 'ant-design-vue'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import { required } from '@/utils/inputRules'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useGiftCardPage } from './composables/useGiftCardPage'
+import DesktopGiftCardView from './desktop/DesktopGiftCardView.vue'
+import MobileGiftCardView from './mobile/MobileGiftCardView.vue'
 
-const form = ref<{ code: string }>({
-  code: ''
-})
+const isDesktop = useDesktopBreakpoint()
 
-const disableButton = computed(() => {
-  if (!loading.value) {
-    return !form.value.code || form.value.code.trim().length === 0
-  } else {
-    return true
-  }
-})
-
-async function registerGiftCard() {
-  try {
-    loading.value = true
-    await registerCodeGiftCard(form.value.code)
-    message.success('کد کارت هدیه با موفقیت ثبت شد')
-    form.value.code = ''
-  } catch (e: any) {
-    message.error(e?.response?.data?.message || 'خطا در ثبت کد کارت هدیه')
-  } finally {
-    loading.value = false
-  }
-}
+useGiftCardPage()
 </script>
 
 <style scoped>
-
+.gift-card-page-root {
+  min-height: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/views/base/giftCard/mobile/MobileGiftCardView.vue b/src/views/base/giftCard/mobile/MobileGiftCardView.vue
new file mode 100644
index 0000000..4dd4816
--- /dev/null
+++ b/src/views/base/giftCard/mobile/MobileGiftCardView.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <div class="bg-white py-3 px-3 text-black font-bold drop-shadow z-[1999] wrap-fix">کارت هدیه</div>
+    <div class="px-5 pt-26 pb-2">
+      <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
+        <bg_main />
+        <div class="z-100 relative">
+          <GiftCardForm variant="mobile" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Bg_main from '@/components/bg_main.vue'
+import GiftCardForm from '../components/GiftCardForm.vue'
+</script>
diff --git a/src/views/base/gold/desktop/styles/desktop-gold.less b/src/views/base/gold/desktop/styles/desktop-gold.less
new file mode 100644
index 0000000..d9e239b
--- /dev/null
+++ b/src/views/base/gold/desktop/styles/desktop-gold.less
@@ -0,0 +1,79 @@
+/* Desktop standalone gold trade page */
+
+.dgold {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+  padding: 28px 36px 40px;
+}
+
+.dgold-topbar {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  max-width: 720px;
+  margin: 0 auto 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+    flex-shrink: 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dgold__panel {
+  max-width: 720px;
+  margin: 0 auto;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  overflow-y: auto;
+  max-height: calc(100vh - 180px);
+  padding-bottom: 16px;
+}
+
+.dgold__panel .mb-25vh {
+  margin-bottom: 2rem !important;
+}
+
+.dgold__panel .bottom-18 {
+  position: static !important;
+  margin-top: 1rem;
+}
diff --git a/src/views/base/gold/index.vue b/src/views/base/gold/index.vue
index a2399aa..3487c94 100644
--- a/src/views/base/gold/index.vue
+++ b/src/views/base/gold/index.vue
@@ -1,5 +1,16 @@
 <template>
-  <div class="h-35rem overflow-y-auto">
+  <div :class="isStandaloneDesktop ? 'dgold' : 'h-35rem overflow-y-auto'">
+    <header v-if="isStandaloneDesktop" class="dgold-topbar">
+      <button type="button" class="dgold-topbar__back" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+        بازگشت
+      </button>
+      <div class="dgold-topbar__meta">
+        <p class="dgold-topbar__eyebrow">معامله</p>
+        <h1 class="dgold-topbar__title">خرید و فروش {{ tradeProductLabel }}</h1>
+      </div>
+    </header>
+    <div :class="isStandaloneDesktop ? 'dgold__panel' : ''">
     <div class=" !overflow-y-scroll bg-white py-3   text-primary font-bold  flex justify-evenly">
       <!--      <div @click="isBuy = false" class="w-full text-center" :class="!isBuy?'text-primary':'text-gray-400'">خرید طلا</div>
             <div @click="isBuy = true" class="w-full text-center" :class="isBuy?'text-primary':'text-gray-400'">فروش طلا</div>-->
@@ -150,7 +161,7 @@
             </div>-->
     </div>
 
-    <BasicActionSheet v-model:show="confirmAction">
+    <BasicActionSheet v-if="!isStandaloneDesktop" v-model:show="confirmAction">
       <div class="font-bold text-lg"></div>
       <div class="w-full rounded-lg bg-gray-50 p-3">
         <div class="flex justify-between ">
@@ -185,6 +196,52 @@
       </div>
       <BasicButton class="mb-20 mt-5 w-full" type="primary" @click="ok(); confirmAction= false">ثبت نهایی</BasicButton>
     </BasicActionSheet>
+    <BasicModal
+      v-else
+      v-model:visible="confirmAction"
+      title="تأیید سفارش"
+      width="480px"
+      destroy-on-close
+      custom-footer
+    >
+      <div class="w-full rounded-lg bg-gray-50 p-3">
+        <div class="flex justify-between ">
+          <div>وزن:</div>
+          <div class="flex items-center">
+            <div class="font-bold">{{ form.goldValue }}</div>
+            <div class="text-xs mr-1">{{ weightUnit }}</div>
+          </div>
+        </div>
+        <div class="flex justify-between mt-3">
+          <div>مظنه:</div>
+          <div class="flex items-center">
+            <div class="font-bold">{{ usePriceWithoutType(Math.round(goldPriceValue)) }}</div>
+            <div class="text-xs mr-1">ریال</div>
+          </div>
+        </div>
+        <div class="flex justify-between mt-3">
+          <div>کارمزد:</div>
+          <div class="flex items-center gap-2">
+            <div class="font-bold text-xl">{{ feeInGrams }}</div>
+            <div class="text-xs mr-1">{{ weightUnit }}</div>
+          </div>
+        </div>
+        <div>(معادل {{ equivalentPrice }} ریال)</div>
+        <div class="flex justify-between mt-3">
+          <div>{{ isBuy ? 'قیمت قابل پرداخت:' : 'مبلغ دریافتی:' }}</div>
+          <div class="flex items-center">
+            <div class="font-bold">{{ usePriceWithoutType(payablePrice.toFixed(0)) }}</div>
+            <div class="text-xs mr-1">ریال</div>
+          </div>
+        </div>
+      </div>
+      <BasicButton class="mt-5 w-full" type="primary" @click="ok(); confirmAction = false">
+        ثبت نهایی
+      </BasicButton>
+      <template #footer>
+        <div></div>
+      </template>
+    </BasicModal>
     <van-dialog v-model:show="noCompleteVisible" class="completeButtonStyle" confirm-button-text="تکمیل اطلاعات"
                 show-confirm-button @confirm="router.push({name: 'user',query:{showEdit: true}})">
       <div class="flex flex-col items-center p-2">
@@ -197,6 +254,7 @@
         </div>
       </div>
     </van-dialog>
+    </div>
   </div>
 </template>
 
@@ -218,6 +276,8 @@ import { getLastPrice } from '@/api/home'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
 import { useUserStore } from '@/store/userStore'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import { justNumber } from '@/utils/inputRules'
 import GoldSkeleton from '@/views/base/gold/components/GoldSkeleton.vue'
 import GoldLoading from '@/components/GoldLoading.vue'
@@ -270,6 +330,8 @@ interface Prop {
 }
 
 const props = withDefaults(defineProps<Prop>(), {})
+const isDesktop = useDesktopBreakpoint()
+const isStandaloneDesktop = computed(() => isDesktop.value && !props.ProductItem)
 const isBuy = ref<boolean>(true)
 
 const tradeProductLabel = computed(() => {
diff --git a/src/views/base/home/components/AppHeader.vue b/src/views/base/home/components/AppHeader.vue
index ca43d94..ebe83b1 100644
--- a/src/views/base/home/components/AppHeader.vue
+++ b/src/views/base/home/components/AppHeader.vue
@@ -1,13 +1,17 @@
 <template>
   <div
-      :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
-      class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
+    :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
+    class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
   >
-    <div class="flex justify-between my-2">
-      <div class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
+    <div class="flex justify-between my-2 items-center">
+      <div v-if="isBoursecuProject()" class="flex items-center gap-2">
+        <img :src="projectLogo" alt="" class="h-8 w-auto object-contain" />
+        <div class="color-transition font-bold text-primary">{{ appName }}</div>
+      </div>
+      <div v-else class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
         <div
-            class="z-100000 rounded-full border-1"
-            :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
+          class="z-100000 rounded-full border-1"
+          :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
         >
           <Icon icon="vuesax-linear:user" size="20" />
         </div>
@@ -15,26 +19,69 @@
           {{ userStore.userInfo?.name }}
         </div>
       </div>
-      <Icon
-          :color="y > 50 ? '#0A1B37' : '#0A1B37'"
-          class="color-transition"
-          icon="vuesax-linear:logout"
+
+      <div class="flex items-center gap-2">
+        <button
+          v-if="isBoursecuProject()"
+          type="button"
+          class="mhome-header-btn"
+          @click="router.push({ name: 'user' })"
+        >
+          <Icon icon="vuesax-linear:user" size="18" />
+        </button>
+        <button
+          type="button"
+          class="mhome-header-btn mhome-header-btn--logout"
           @click="$emit('logout')"
-      />
+        >
+          <Icon icon="vuesax-linear:logout" size="18" />
+          <span>خروج</span>
+        </button>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useWindowScroll } from '@vueuse/core'
 import { useUserStore } from '@/store/userStore'
+import { useConfigStore } from '@/store/configStore'
 import router from '@/router'
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { getProjectNavLogo, isBoursecuProject } from '@/utils/config'
 
 const { y } = useWindowScroll()
 const userStore = useUserStore()
+const config = useConfigStore()
+const projectLogo = computed(() => getProjectNavLogo())
+const appName = computed(() => config.config?.name_fa || config.config?.name || 'بورس مس')
 
 defineEmits<{
   logout: []
 }>()
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.mhome-header-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 6px 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+  color: #0a1b37;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.mhome-header-btn--logout {
+  color: #dc2626;
+  border-color: #fecaca;
+  background: #fef2f2;
+}
+</style>
diff --git a/src/views/base/home/components/AssetsSection.vue b/src/views/base/home/components/AssetsSection.vue
index d6ccc99..4da29b9 100644
--- a/src/views/base/home/components/AssetsSection.vue
+++ b/src/views/base/home/components/AssetsSection.vue
@@ -1,26 +1,31 @@
 <template>
-  <div class="bg-primary rounded-lg p-2 py-3 mt-2">
-    <div v-if="meta?.has_count_based_products" class="flex justify-center text-tertiary w-full z-20">
+  <div :class="plain ? 'py-2' : 'bg-primary rounded-lg p-2 py-3 mt-2'">
+    <div
+      v-if="meta?.has_count_based_products"
+      :class="rowClass"
+      class="flex justify-center w-full z-20"
+    >
       محصولات:
       <div class="text-l mr-2 font-bold">{{ countBasedInventory }} عدد</div>
     </div>
     <template v-if="meta?.single_metal && primaryMetalTotal">
-      <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+      <div :class="[rowClass, meta?.has_count_based_products ? 'mt-2' : '']" class="flex justify-center w-full z-20">
         {{ primaryMetalTotal.label }}:
         <div class="text-l mr-2 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
         <BasicIcon
           icon="vuesax-linear:info-circle"
           size="18"
-          color="tertiary"
+          :color="iconColor"
           @click="$emit('openGoldModal', primaryMetalTotal)"
         />
       </div>
     </template>
     <template v-else>
       <div
-        v-for="metal in metalTotals"
+        v-for="(metal, index) in metalTotals"
         :key="metal.metal_id"
-        class="flex mt-2 justify-center text-tertiary w-full z-20"
+        :class="[rowClass, index > 0 || meta?.has_count_based_products ? 'mt-2' : '']"
+        class="flex justify-center w-full z-20"
       >
         {{ metal.label }}:
         <div class="text-l mr-2 font-bold">{{ formatMetalTotal(metal) }}</div>
@@ -28,34 +33,50 @@
           v-if="metal.metal_id === metalTotals[0]?.metal_id"
           icon="vuesax-linear:info-circle"
           size="18"
-          color="tertiary"
+          :color="iconColor"
           @click="$emit('openGoldModal', metal)"
         />
       </div>
     </template>
-    <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+    <div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
       دارایی ریالی:
       <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(totalRialValue) }} ریال</div>
-      <BasicIcon @click="$emit('openRialModal')" icon="vuesax-linear:info-circle" size="18" color="tertiary" />
+      <BasicIcon
+        icon="vuesax-linear:info-circle"
+        size="18"
+        :color="iconColor"
+        @click="$emit('openRialModal')"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
 import { resolveSummaryMetalWeight } from '@/utils/productAssets'
 
-const { assetsSummary, loadWalletAssets } = useWalletAssets()
+const props = withDefaults(
+  defineProps<{
+    plain?: boolean
+  }>(),
+  { plain: false }
+)
+
+/** Display-only — wallet assets are loaded once in useHomePageData.initHomePageData() */
+const { assetsSummary } = useWalletAssets()
 
 defineEmits<{
   openGoldModal: [metal: WalletMetalTotal]
   openRialModal: []
 }>()
 
+const rowClass = computed(() => (props.plain ? 'text-primary' : 'text-tertiary'))
+const iconColor = computed(() => (props.plain ? 'primary' : 'tertiary'))
+
 const meta = computed(() => assetsSummary.value?.meta)
 const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
 const primaryMetalTotal = computed(() => metalTotals.value[0])
@@ -65,10 +86,6 @@ const countBasedInventory = computed(() =>
   (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
 )
 
-onMounted(() => {
-  void loadWalletAssets()
-})
-
 function formatMetalTotal(metal: WalletMetalTotal) {
   return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
 }
diff --git a/src/views/base/home/components/BalanceSheet.vue b/src/views/base/home/components/BalanceSheet.vue
index 5d2d179..190a0a8 100644
--- a/src/views/base/home/components/BalanceSheet.vue
+++ b/src/views/base/home/components/BalanceSheet.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue'
+import { computed, watch } from 'vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
 import { usePrice } from '@/utils/usePrice'
@@ -81,10 +81,6 @@ const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
 const assetsRialValue = computed(() => assetsSummary.value?.assets_rial_value ?? 0)
 const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
 
-onMounted(() => {
-  void loadWalletAssets()
-})
-
 watch(
   () => props.show,
   (open) => {
diff --git a/src/views/base/home/components/HomeQuickActionBox.vue b/src/views/base/home/components/HomeQuickActionBox.vue
new file mode 100644
index 0000000..033042a
--- /dev/null
+++ b/src/views/base/home/components/HomeQuickActionBox.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { isBoursecuProject } from '@/utils/config'
+import type { HomeQuickActionItem } from '../layouts/types'
+
+defineProps<{
+  action: HomeQuickActionItem
+}>()
+
+defineEmits<{
+  click: []
+}>()
+
+const isBoursecu = isBoursecuProject()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="home-quick-action-box flex flex-col items-center justify-center gap-2 rounded-xl border-2 p-3 min-h-[96px] w-full"
+    :class="{ 'home-quick-action-box--boursecu': isBoursecu }"
+    @click="$emit('click')"
+  >
+    <div class="flex h-11 w-11 shrink-0 items-center justify-center">
+      <Icon class="text-primary" :icon="action.icon" size="28" />
+    </div>
+    <span class="text-primary text-xs font-bold text-center leading-5">{{ action.label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.home-quick-action-box {
+  appearance: none;
+  cursor: pointer;
+}
+
+.home-quick-action-box--boursecu {
+  background-color: #eff5f3;
+  border-color: #d4e3de;
+}
+</style>
diff --git a/src/views/base/home/components/HomeSkeleton.vue b/src/views/base/home/components/HomeSkeleton.vue
index 1e4b861..5311191 100644
--- a/src/views/base/home/components/HomeSkeleton.vue
+++ b/src/views/base/home/components/HomeSkeleton.vue
@@ -1,63 +1,54 @@
 <template>
-  <div ref="skeletonRatio" class="h-fit">
-    <content-loader :width="skeletonSize.width" class="bg-white" height="100vh">
-      <rect :width="skeletonSize.width" height="5" rx="3" ry="3" x="0" y="0"/>
-      <rect :width="skeletonSize.width" height="5" rx="3" ry="3" x="0" y="84"/>
-      <rect :width="5" height="85" rx="3" ry="3" x="0" y="0"/>
-      <rect :width="5" :x="skeletonSize.width-5" height="85" rx="3" ry="3" y="0"/>
-      <rect :width="2" :x="skeletonSize.width/2" height="60" rx="3" ry="3" y="15"/>
-      <rect :width="skeletonSize.width/2-20" :x="10" height="20" rx="10" ry="10" y="15"/>
-      <rect :width="skeletonSize.width/2-20" :x="skeletonSize.width/2 + 10" height="20" rx="10" ry="10" y="15"/>
-      <rect :width="skeletonSize.width/2-40" :x="20" height="10" rx="5" ry="5" y="40"/>
-      <rect :width="skeletonSize.width/2-40" :x="skeletonSize.width/2 + 20" height="10" rx="5" ry="5" y="40"/>
-      <rect :width="skeletonSize.width/2-30" :x="15" height="18" rx="10" ry="10" y="60"/>
-      <rect :width="skeletonSize.width/2-30" :x="skeletonSize.width/2 + 15" height="18" rx="10" ry="10" y="60"/>
-      <circle :cx="skeletonSize.width/4-skeletonSize.width/8" cy="145" r="20"/>
-      <circle :cx="skeletonSize.width/4+skeletonSize.width/8" cy="145" r="20"/>
-      <circle :cx="skeletonSize.width/2+ skeletonSize.width/8" cy="145" r="20"/>
-      <circle :cx="skeletonSize.width - skeletonSize.width/8" cy="145" r="20"/>
-      <rect :width="50" :x="skeletonSize.width/4-skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
-      <rect :width="50" :x="skeletonSize.width/4+skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
-      <rect :width="50" :x="skeletonSize.width/2+ skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
-      <rect :width="50" :x="skeletonSize.width - skeletonSize.width/8 - 25" height="15" rx="3" ry="3" y="170"/>
-      <rect :width="skeletonSize.width - 45" :x="45" height="20" rx="3" ry="3" y="230"/>
-      <rect :width="skeletonSize.width" :x="0" height="80" rx="3" ry="3" y="260"/>
-      <rect :width="skeletonSize.width/2 - 5" :x="0" height="50" rx="3" ry="3" y="360"/>
-      <rect :width="skeletonSize.width/2 - 5" :x="skeletonSize.width/2 + 5" height="50" rx="3" ry="3" y="360"/>
-      <rect :width="skeletonSize.width" :x="0" height="170" rx="3" ry="3" y="440"/>
-      <!--      <rect height="20" rx="3" ry="3" width="100" x="0" y="0"/>
-            <rect :width="skeletonSize.width/4 + 40" :x="skeletonSize.width/2" height="20" rx="3" ry="3" y="0"/>
-            <rect height="20" rx="3" ry="3" width="80" x="0" y="30"/>
-            <rect :x="skeletonSize.width - 40" height="40" rx="12" ry="12" width="40" y="0"/>
-            <rect :width="skeletonSize.width" :x="0" :y="skeletonSize.height-5" height="2" rx="12" ry="12"/>-->
-      <!--      <circle :cx="skeletonSize.width - 20" :cy="skeletonSize.height/2 - 10" r="20" />-->
-      <!--      <rect :x="10" y="20" rx="3" ry="3" :width="skeletonSize.width - 20" height="150"/>
-            <circle :cx="skeletonSize.width/2" cy="170" r="15" />
-            <rect :x="skeletonSize.width/2 - skeletonSize.width/3 -10" y="190" rx="3" ry="3" :width="skeletonSize.width/3 + skeletonSize.width/3 + 20" height="20"/>
-            <rect :x="skeletonSize.width/2 - skeletonSize.width/3 +20" y="220" rx="3" ry="3" :width="skeletonSize.width/3 + skeletonSize.width/3 - 40" height="20"/>-->
-      <!--    <rect x="90" y="0" rx="3" ry="3" width="80" height="20" />
-          <rect x="180" y="0" rx="3" ry="3" width="80" height="20" />
-          <rect x="270" y="0" rx="3" ry="3" width="80" height="20" ♥/>-->
+  <div ref="skeletonRatio" class="h-fit w-full min-h-[620px]">
+    <content-loader
+      :width="skeletonWidth"
+      class="bg-white"
+      :height="skeletonHeight"
+    >
+      <rect :width="skeletonWidth" height="5" rx="3" ry="3" x="0" y="0" />
+      <rect :width="skeletonWidth" height="5" rx="3" ry="3" x="0" y="84" />
+      <rect width="5" height="85" rx="3" ry="3" x="0" y="0" />
+      <rect width="5" :x="skeletonWidth - 5" height="85" rx="3" ry="3" y="0" />
+      <rect width="2" :x="skeletonWidth / 2" height="60" rx="3" ry="3" y="15" />
+      <rect :width="halfWidth(20)" x="10" height="20" rx="10" ry="10" y="15" />
+      <rect :width="halfWidth(20)" :x="skeletonWidth / 2 + 10" height="20" rx="10" ry="10" y="15" />
+      <rect :width="halfWidth(40)" x="20" height="10" rx="5" ry="5" y="40" />
+      <rect :width="halfWidth(40)" :x="skeletonWidth / 2 + 20" height="10" rx="5" ry="5" y="40" />
+      <rect :width="halfWidth(30)" x="15" height="18" rx="10" ry="10" y="60" />
+      <rect :width="halfWidth(30)" :x="skeletonWidth / 2 + 15" height="18" rx="10" ry="10" y="60" />
+      <circle :cx="skeletonWidth / 4 - skeletonWidth / 8" cy="145" r="20" />
+      <circle :cx="skeletonWidth / 4 + skeletonWidth / 8" cy="145" r="20" />
+      <circle :cx="skeletonWidth / 2 + skeletonWidth / 8" cy="145" r="20" />
+      <circle :cx="skeletonWidth - skeletonWidth / 8" cy="145" r="20" />
+      <rect width="50" :x="skeletonWidth / 4 - skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
+      <rect width="50" :x="skeletonWidth / 4 + skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
+      <rect width="50" :x="skeletonWidth / 2 + skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
+      <rect width="50" :x="skeletonWidth - skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
+      <rect :width="fullWidth(45)" x="45" height="20" rx="3" ry="3" y="230" />
+      <rect :width="skeletonWidth" x="0" height="80" rx="3" ry="3" y="260" />
+      <rect :width="halfWidth(10)" x="0" height="50" rx="3" ry="3" y="360" />
+      <rect :width="halfWidth(10)" :x="skeletonWidth / 2 + 5" height="50" rx="3" ry="3" y="360" />
+      <rect :width="skeletonWidth" x="0" height="170" rx="3" ry="3" y="440" />
     </content-loader>
   </div>
 </template>
 
-
 <script lang="ts" setup>
-import {reactive, ref, watch} from "vue";
-import {useElementSize} from "@vueuse/core";
-import {ContentLoader} from "vue-content-loader";
+import { computed, ref } from 'vue'
+import { useElementSize } from '@vueuse/core'
+import { ContentLoader } from 'vue-content-loader'
 
-const skeletonRatio = ref(null)
-const skeletonSize = reactive(
-    useElementSize(skeletonRatio, {width: 0, height: 0}, {box: 'border-box'})
-)
-/*watch(skeletonSize, () => {
-  console.log(skeletonSize)
-})*/
+const skeletonHeight = 620
+const skeletonRatio = ref<HTMLElement | null>(null)
+const { width } = useElementSize(skeletonRatio, { width: 0, height: 0 }, { box: 'border-box' })
+
+const skeletonWidth = computed(() => Math.max(width.value, 320))
+
+function halfWidth(padding: number) {
+  return Math.max(skeletonWidth.value / 2 - padding, 0)
+}
+
+function fullWidth(padding: number) {
+  return Math.max(skeletonWidth.value - padding, 0)
+}
 </script>
-
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/base/home/components/PriceChart.vue b/src/views/base/home/components/PriceChart.vue
index 8d650b8..5f78bf8 100644
--- a/src/views/base/home/components/PriceChart.vue
+++ b/src/views/base/home/components/PriceChart.vue
@@ -1,17 +1,45 @@
 <template>
-  <div class="bg-gray-50 w-full flex justify-evenly rounded-lg py-4 mt-4 h-[15rem]">
+  <div
+    class="bg-gray-50 w-full rounded-lg py-4"
+    :class="[
+      chartContainerClass,
+      variant === 'desktop' ? 'mt-0' : 'mt-4',
+      layout === 'boursecu' && variant !== 'desktop' ? 'price-chart-box--boursecu' : '',
+    ]"
+  >
     <div class="w-full text-center pt-2">
-      <a-radio-group v-model:value="selectedValue" button-style="solid">
+      <div v-if="showMetalSelector" class="chart-metal-segment mb-3">
+        <button
+          type="button"
+          class="chart-metal-segment__item"
+          :class="{ 'chart-metal-segment__item--active': selectedMetal === 'katod' }"
+          @click="emit('update:selectedMetal', 'katod')"
+        >
+          کاتد مس
+        </button>
+        <button
+          type="button"
+          class="chart-metal-segment__item"
+          :class="{ 'chart-metal-segment__item--active': selectedMetal === 'maftol' }"
+          @click="emit('update:selectedMetal', 'maftol')"
+        >
+          مفتول مس
+        </button>
+      </div>
+      <a-radio-group v-model:value="selectedValue" button-style="solid" class="chart-timeline-group">
         <a-radio-button value="DAILY" @click="handleUpdate('DAILY')">24 ساعت اخیر</a-radio-button>
         <a-radio-button value="WEEKLY" @click="handleUpdate('WEEKLY')">هفته گذشته</a-radio-button>
         <a-radio-button value="MONTHLY" @click="handleUpdate('MONTHLY')">ماه گذشته</a-radio-button>
       </a-radio-group>
-      <div id="chart-timeline">
+      <div ref="chartContainerRef" id="chart-timeline" class="w-full" :class="chartInnerClass">
         <apexchart
-            type="area"
-            height="200"
-            :options="chartOptions"
-            :series="props.priceChartSeries"
+          v-if="canRenderChart"
+          :key="`${layout}-${variant}-${selectedMetal}-${chartSelection}-${seriesLength}`"
+          type="area"
+          width="100%"
+          :height="chartHeight"
+          :options="chartOptions"
+          :series="props.priceChartSeries"
         />
       </div>
     </div>
@@ -19,21 +47,71 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { useConfigStore } from '@/store/configStore'
-import {usePrice} from "@/utils/usePrice";
-import {getProjectFontFamily} from "@/utils/config";
+import { usePrice } from '@/utils/usePrice'
+import { getProjectFontFamily } from '@/utils/config'
+import { useElementSize } from '@vueuse/core'
 
-const props = defineProps<{
-  priceChartSeries: any[]
-}>()
+import type { ChartMetalType } from '../composables/usePriceChart'
+
+const props = withDefaults(
+  defineProps<{
+    priceChartSeries: any[]
+    layout?: 'default' | 'boursecu'
+    variant?: 'mobile' | 'desktop'
+    chartSelection?: string
+    selectedMetal?: ChartMetalType
+  }>(),
+  {
+    layout: 'default',
+    variant: 'mobile',
+    chartSelection: 'DAILY',
+    selectedMetal: 'katod',
+  }
+)
+
+const chartHeight = computed(() => (props.variant === 'desktop' ? 320 : 200))
+const chartContainerClass = computed(() => {
+  if (props.variant === 'desktop') {
+    return 'min-h-[22rem]'
+  }
+  return props.layout === 'default' ? 'min-h-[15rem] h-[15rem]' : 'min-h-[15rem]'
+})
+const chartInnerClass = computed(() =>
+  props.variant === 'desktop' ? 'min-h-[320px]' : 'min-h-[200px]'
+)
+
+const showMetalSelector = computed(() => props.layout === 'boursecu')
 
 const emit = defineEmits<{
   updateData: [timeline: string]
+  'update:selectedMetal': [metal: ChartMetalType]
 }>()
 
 const config = useConfigStore()
-const selectedValue = ref('DAILY')
+const chartContainerRef = ref<HTMLElement | null>(null)
+const chartMounted = ref(false)
+const selectedValue = ref(props.chartSelection)
+
+const { width: chartWidth } = useElementSize(chartContainerRef)
+
+const seriesLength = computed(() => props.priceChartSeries?.[0]?.data?.length ?? 0)
+const canRenderChart = computed(
+  () => chartMounted.value && chartWidth.value > 0 && seriesLength.value > 0
+)
+
+watch(
+  () => props.chartSelection,
+  (timeline) => {
+    selectedValue.value = timeline
+  }
+)
+
+onMounted(async () => {
+  await nextTick()
+  chartMounted.value = true
+})
 
 const toPersianNumber = (num: number) => {
   return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
@@ -43,67 +121,108 @@ const chartOptions = computed(() => {
   const fontFamily = getProjectFontFamily()
 
   return {
-  chart: {
-    id: 'نوسانات قیمت',
-    type: 'area',
-    height: 200,
-    toolbar: { show: false },
-    zoom: { autoScaleYaxis: true }
-  },
-  grid: {
-    padding: { top: 0, right: 0, bottom: 0, left: 0 },
-    yaxis: { lines: { show: false } }
-  },
-  stroke: { width: 2 },
-  dataLabels: {
-    enabled: false,
-    // formatter: (val) => toPersianNumber(val),
-    style: {
-      fontFamily
-    }
-  },
-  yaxis: {
-    tickAmount: 8,
-    show: false,
-    labels: {
+    chart: {
+      id: 'نوسانات قیمت',
+      type: 'area',
+      height: 200,
+      toolbar: { show: false },
+      zoom: { autoScaleYaxis: true },
+      redrawOnParentResize: true,
+    },
+    grid: {
+      padding: { top: 0, right: 0, bottom: 0, left: 0 },
+      yaxis: { lines: { show: false } },
+    },
+    stroke: { width: 2 },
+    dataLabels: {
+      enabled: false,
+      style: {
+        fontFamily,
+      },
+    },
+    yaxis: {
+      tickAmount: 8,
+      show: false,
+      labels: {
+        formatter: (val: number) => toPersianNumber(usePrice(val, true, 'ه.ریال')),
+        style: { fontSize: '13px', fontFamily },
+      },
+    },
+    xaxis: {
+      show: false,
+      type: 'datetime',
+      axisTicks: { show: false },
+      tooltip: { enabled: false },
+      labels: { show: false },
+    },
+    tooltip: {
+      x: {
+        formatter: (value: number) => {
+          const date = new Date(value)
+          return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
+            hour: '2-digit',
+            minute: '2-digit',
+          })}`
+        },
+      },
       formatter: (val: number) => toPersianNumber(usePrice(val, true, 'ه.ریال')),
-      style: { fontSize: '13px', fontFamily }
-    }
-  },
-  xaxis: {
-    show: false,
-    type: 'datetime',
-    axisTicks: { show: false },
-    tooltip: { enabled: false },
-    labels: { show: false }
-  },
-  tooltip: {
-    x: {
-      formatter: (value: number) => {
-        const date = new Date(value)
-        return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
-          hour: '2-digit',
-          minute: '2-digit'
-        })}`
-      }
+      style: { fontFamily },
+    },
+    colors: [config.config.color],
+    fill: {
+      type: 'gradient',
+      gradient: {
+        shadeIntensity: 1,
+        opacityFrom: 0.7,
+        opacityTo: 0.9,
+        stops: [0, 100],
+      },
     },
-    formatter: (val: number) => toPersianNumber(usePrice(val, true, 'ه.ریال')),
-    style: { fontFamily }
-  },
-  colors: [config.config.color],
-  fill: {
-    type: 'gradient',
-    gradient: {
-      shadeIntensity: 1,
-      opacityFrom: 0.7,
-      opacityTo: 0.9,
-      stops: [0, 100]
-    }
-  }
   }
 })
 
 const handleUpdate = (timeline: string) => {
   emit('updateData', timeline)
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="less">
+@boursecu-surface-border: #d4e3de;
+
+.price-chart-box--boursecu {
+  border: 2px solid @boursecu-surface-border;
+}
+
+.chart-metal-segment {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: #dfe8e5;
+}
+
+.chart-metal-segment__item {
+  appearance: none;
+  cursor: pointer;
+  min-width: 6.5rem;
+  padding: 0.4rem 0.75rem;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: @App-primary-color;
+  opacity: 0.65;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.25;
+  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.chart-metal-segment__item--active {
+  background: #fff;
+  color: @App-primary-color;
+  opacity: 1;
+  font-weight: 700;
+  box-shadow: 0 1px 4px rgba(10, 27, 55, 0.12);
+}
+</style>
diff --git a/src/views/base/home/components/PriceStats.vue b/src/views/base/home/components/PriceStats.vue
index 59ffe47..6bff178 100644
--- a/src/views/base/home/components/PriceStats.vue
+++ b/src/views/base/home/components/PriceStats.vue
@@ -1,5 +1,11 @@
 <template>
-  <div class="w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in mt-6 pb-45">
+  <div
+    class="w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in"
+    :class="[
+      layout === 'boursecu' ? 'mt-8 pt-2' : 'mt-6',
+      variant === 'mobile' ? 'pb-45' : 'mt-0 pb-0',
+    ]"
+  >
     <div class="text-center w-full">
       <div>بالاترین قیمت امروز</div>
       <div v-if="price" class="flex flex-col items-center mt-3">
@@ -29,9 +35,17 @@ import { computed } from 'vue'
 import { getTradeBuyPrice, getTradeSellPrice } from '@/utils/price'
 import { usePriceWithoutType } from '../../../../utils/usePrice'
 
-const props = defineProps<{
-  price: any
-}>()
+const props = withDefaults(
+  defineProps<{
+    price: any
+    layout?: 'default' | 'boursecu'
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  {
+    layout: 'default',
+    variant: 'mobile',
+  }
+)
 
 const highPrice = computed(() => props.price?.up?.buy ?? getTradeBuyPrice(props.price))
 const lowPrice = computed(() => props.price?.up?.sell ?? getTradeSellPrice(props.price))
diff --git a/src/views/base/home/components/ReferralSection.vue b/src/views/base/home/components/ReferralSection.vue
index 5799cc2..7f4b328 100644
--- a/src/views/base/home/components/ReferralSection.vue
+++ b/src/views/base/home/components/ReferralSection.vue
@@ -1,35 +1,32 @@
 <template>
-  <div class="bg-primary rounded-lg p-2 py-1 mt-2">
-    <div class="p-2">
-      <div
-          v-if="userStore.userInfo?.referral_id"
-          class="text-tertiary font-bold w-full text-center flex justify-between gap-2 items-center"
+  <div class="home-referral bg-primary rounded-lg">
+    <div
+      v-if="userStore.userInfo?.referral_id"
+      class="home-referral__code text-tertiary font-bold"
+    >
+      <span>کد معرف:</span>
+      <span class="home-referral__code-value">{{ userStore.userInfo?.referral_id }}</span>
+    </div>
+
+    <div class="home-referral__actions">
+      <BasicButton
+        icon="vuesax-linear:share"
+        size="small"
+        class="home-referral__btn !bg-primary !border-tertiary !text-tertiary"
+        icon-size="18"
+        @click.stop="shareCode"
       >
-        کد معرف:
-        <div class="flex gap-2">
-          <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
-        </div>
-      </div>
-      <div class="w-full flex gap-2 mt-1">
-        <BasicButton
-            icon="vuesax-linear:share"
-            size="small"
-            class="flex-1 !bg-primary !border-tertiary !text-tertiary"
-            icon-size="18"
-            @click.stop="shareCode"
-        >
-          دعوت از دوستان
-        </BasicButton>
-        <BasicButton
-            icon="vuesax-linear:copy"
-            size="small"
-            class="flex-1 !bg-primary !border-tertiary !text-tertiary"
-            icon-size="18"
-            @click.stop="copyCode"
-        >
-          رونوشت
-        </BasicButton>
-      </div>
+        دعوت از دوستان
+      </BasicButton>
+      <BasicButton
+        icon="vuesax-linear:copy"
+        size="small"
+        class="home-referral__btn !bg-primary !border-tertiary !text-tertiary"
+        icon-size="18"
+        @click.stop="copyCode"
+      >
+        رونوشت
+      </BasicButton>
     </div>
   </div>
 </template>
@@ -58,4 +55,76 @@ const copyCode = () => {
     message.info('کد رونوشت شد')
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="less">
+.home-referral {
+  container-type: inline-size;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin-top: 8px;
+  padding: 10px 12px;
+  overflow: hidden;
+
+  &__code {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+    margin-bottom: 8px;
+  }
+
+  &__code-value {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+  }
+
+  &__btn {
+    flex: 1 1 0;
+    min-width: 0 !important;
+    max-width: 100%;
+
+    :deep(.ant-btn) {
+      width: 100%;
+      min-width: 0;
+      max-width: 100%;
+      height: auto;
+      padding-inline: 8px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    :deep(.ant-btn > div) {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  @container (max-width: 340px) {
+    &__actions {
+      flex-direction: column;
+    }
+
+    &__btn {
+      flex: none;
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/base/home/components/ShareModal.vue b/src/views/base/home/components/ShareModal.vue
index f1198f5..c1fd5a7 100644
--- a/src/views/base/home/components/ShareModal.vue
+++ b/src/views/base/home/components/ShareModal.vue
@@ -42,10 +42,15 @@ import { message } from 'ant-design-vue'
 import { useUserStore } from '@/store/userStore'
 import { getReferralShareText, getReferralShareTitle } from '@/utils/config'
 
-const props = defineProps<{
-  show: boolean
-  referralId: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    referralId?: string
+  }>(),
+  {
+    referralId: '',
+  }
+)
 
 const emit = defineEmits<{
   'update:show': [value: boolean]
diff --git a/src/views/base/home/composables/useBanners.ts b/src/views/base/home/composables/useBanners.ts
index de7dfb6..e98a96a 100644
--- a/src/views/base/home/composables/useBanners.ts
+++ b/src/views/base/home/composables/useBanners.ts
@@ -1,37 +1,74 @@
 import { ref } from 'vue'
 import { getConstByKey } from '@/api/const'
 
-export function useBanners() {
-    const banners = ref([])
-    const loading = ref(false)
+/** Module-level banner state — shared by mobile and desktop home layouts. */
+const banners = ref<unknown[]>([])
+const bannersLoading = ref(false)
+let bannersPromise: Promise<void> | null = null
+let bannersLoaded = false
 
-    const loadBanners = async () => {
-        try {
-            loading.value = true
-            const response = await getConstByKey('header_banner')
-            if (!response) return
+async function fetchBanners(force = false) {
+  if (!force && bannersLoaded) {
+    return
+  }
 
-            let list = []
-            if (typeof response === 'string') {
-                list = JSON.parse(response)
-            } else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
-                list = typeof response.value === 'string' ? JSON.parse(response.value) : response.value
-            } else if (Array.isArray(response) && response.length > 0) {
-                const first = response[0]
-                if (first.value) {
-                    list = typeof first.value === 'string' ? JSON.parse(first.value) : first.value
-                } else if (first.icon) {
-                    list = response
-                }
-            }
+  if (!force && bannersPromise) {
+    return bannersPromise
+  }
 
-            banners.value = Array.isArray(list) ? list.filter(b => b.show === true) : []
-        } catch (error) {
-            console.error('Error loading banners:', error)
-        } finally {
-            loading.value = false
+  bannersPromise = (async () => {
+    try {
+      bannersLoading.value = true
+      const response = await getConstByKey('header_banner')
+      if (!response) {
+        banners.value = []
+        return
+      }
+
+      let list: unknown[] = []
+      if (typeof response === 'string') {
+        list = JSON.parse(response)
+      } else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
+        const value = (response as { value: unknown }).value
+        list = typeof value === 'string' ? JSON.parse(value) : (value as unknown[])
+      } else if (Array.isArray(response) && response.length > 0) {
+        const first = response[0] as { value?: unknown; icon?: unknown }
+        if (first.value) {
+          list = typeof first.value === 'string' ? JSON.parse(first.value) : (first.value as unknown[])
+        } else if (first.icon) {
+          list = response
         }
-    }
+      }
 
-    return { banners, loading, loadBanners }
-}
\ No newline at end of file
+      banners.value = Array.isArray(list)
+        ? list.filter((banner) => (banner as { show?: boolean }).show === true)
+        : []
+      bannersLoaded = true
+    } catch (error) {
+      console.error('Error loading banners:', error)
+    } finally {
+      bannersLoading.value = false
+      bannersPromise = null
+    }
+  })()
+
+  return bannersPromise
+}
+
+export function useBanners() {
+  return {
+    banners,
+    loading: bannersLoading,
+    loadBanners: fetchBanners,
+  }
+}
+
+export function loadHomeBanners(force = false) {
+  return fetchBanners(force)
+}
+
+export function resetHomeBanners() {
+  banners.value = []
+  bannersLoaded = false
+  bannersPromise = null
+}
diff --git a/src/views/base/home/composables/useHomePage.ts b/src/views/base/home/composables/useHomePage.ts
new file mode 100644
index 0000000..191439d
--- /dev/null
+++ b/src/views/base/home/composables/useHomePage.ts
@@ -0,0 +1,237 @@
+import { computed, inject, onMounted, onUnmounted, provide, ref, type InjectionKey } from 'vue'
+import router from '@/router'
+import { loading, removeToken } from '@/utils'
+import { useUserStore } from '@/store/userStore'
+import { useWalletStore } from '@/store/walletStore'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import type { WalletMetalTotal } from '@/models/walletAssets'
+import { formatMetalAssetsInfoText, formatRialAssetsInfoText } from '@/utils/productAssets'
+import { useConfigStore } from '@/store/configStore'
+import { lastPrice, stopLastPricePolling } from '@/utils/price'
+import { message, Modal } from 'ant-design-vue'
+import { getReferralShareText, getReferralShareTitle } from '@/utils/config'
+import { useBanners } from './useBanners'
+import { usePriceChart, type ChartMetalType } from './usePriceChart'
+import type { HomeActionItem } from '../layouts/types'
+import { getHomeLayoutId } from '../layouts/registry'
+import { initHomePageData, resetHomePageData } from './useHomePageData'
+import { resetWalletPageData } from '../../wallet/composables/useWalletPageData'
+import { resetAddressPageData } from '../../address/composables/useAddressPageData'
+import { resetTransactionsPageData } from '../../transactions/composables/useTransactionsPageData'
+import { resetProductsPageData } from '../../products/composables/useProductsPageData'
+
+export interface HomePageContext {
+  loading: typeof loading
+  isGaroosi: ReturnType<typeof computed<boolean>>
+  limitedPrice: ReturnType<typeof computed>
+  showClosedMessage: ReturnType<typeof computed<boolean>>
+  closedMessage: ReturnType<typeof computed>
+  mainActions: ReturnType<typeof computed<HomeActionItem[]>>
+  banners: ReturnType<typeof useBanners>['banners']
+  priceChartSeries: ReturnType<typeof usePriceChart>['priceChartSeries']
+  chartSelection: ReturnType<typeof usePriceChart>['chartSelection']
+  updateChartData: ReturnType<typeof usePriceChart>['updateChartData']
+  selectedChartMetal: ReturnType<typeof usePriceChart>['selectedChartMetal']
+  setChartMetal: (metal: ChartMetalType) => void
+  isBoursecuHomeLayout: ReturnType<typeof computed<boolean>>
+  handleBannerClick: (banner: { typeClick?: string; modalText?: string; link?: string }) => void
+  openGoldModal: (metal: WalletMetalTotal) => void
+  openRialModal: () => void
+}
+
+export const HOME_PAGE_CONTEXT_KEY: InjectionKey<HomePageContext> = Symbol('homePageContext')
+
+export function useHomePage() {
+  const userStore = useUserStore()
+  const walletStore = useWalletStore()
+  const configStore = useConfigStore()
+  const { assetsSummary, clearWalletAssets } = useWalletAssets()
+
+  const showLogoutConfirm = ref(false)
+  const wholeBalanceVisible = ref(false)
+  const showTextBanner = ref(false)
+  const showShare = ref(false)
+  const TextBanner = ref('')
+
+  const { banners } = useBanners()
+  const {
+    updateChartData,
+    priceChartSeries,
+    chartSelection,
+    selectedChartMetal,
+    setChartMetal,
+  } = usePriceChart()
+  const isBoursecuHomeLayout = computed(() => getHomeLayoutId() === 'boursecu')
+
+  const isGaroosi = computed(() => configStore.config?.name === 'garoosi')
+  const closedMessage = computed(() => userStore.getValueByKey('closed_message'))
+  const showClosedMessage = computed(
+    () => Boolean(closedMessage.value && lastPrice?.value?.price_last === 0)
+  )
+  const limitedPrice = computed(() => walletStore.limitedPrice?.[0])
+  const goldVal = computed(() => lastPrice.value?.price_last ?? 1)
+
+  const mainActions = computed<HomeActionItem[]>(() => [
+    {
+      name: 'buySell',
+      icon: 'vuesax-linear:money-receive',
+      label: 'خرید و فروش',
+      handler: () => router.push({ name: 'buyProduct' }),
+    },
+    {
+      name: 'deposit',
+      icon: 'vuesax-linear:card-add',
+      label: isGaroosi.value ? 'واریز و برداشت' : 'واریز نقدی',
+      handler: () => router.push({ name: 'wallet', query: { state: 'deposit' } }),
+    },
+    {
+      name: 'balance',
+      icon: 'vuesax-linear:receipt-item',
+      label: 'موجودی',
+      handler: () => {
+        wholeBalanceVisible.value = true
+      },
+    },
+    {
+      name: 'assets',
+      icon: 'vuesax-linear:cup',
+      label: isGaroosi.value ? 'دعوت از دوستان' : 'دارایی ها',
+      handler: () => (isGaroosi.value ? shareCode() : router.push({ name: 'fund' })),
+    },
+  ])
+
+  async function shareCode() {
+    const text = getReferralShareText({
+      userName: userStore.userInfo?.name,
+      projectName: configStore.config.name,
+      referralId: userStore.userInfo?.referral_id,
+    })
+
+    try {
+      await navigator.share({
+        title: getReferralShareTitle(configStore.config.name),
+        text,
+      })
+    } catch {
+      copyCode()
+    }
+  }
+
+  function copyCode() {
+    const code = userStore.userInfo?.referral_id
+    if (code) {
+      navigator.clipboard.writeText(code)
+      message.info('کد رونوشت شد')
+    }
+  }
+
+  async function logout() {
+    userStore.userInfo = undefined
+    walletStore.walletInfo = undefined
+    clearWalletAssets()
+    resetHomePageData()
+    resetWalletPageData()
+    resetAddressPageData()
+    resetTransactionsPageData()
+    resetProductsPageData()
+    removeToken()
+    await router.push({ name: 'login' })
+    window.location.reload()
+  }
+
+  function openGoldModal(metal: WalletMetalTotal) {
+    Modal.confirm({
+      title: formatMetalAssetsInfoText(metal),
+      okText: 'متوجه شدم',
+      centered: true,
+      cancelButtonProps: { style: { display: 'none' } },
+    })
+  }
+
+  function openRialModal() {
+    const summary = assetsSummary.value
+    Modal.confirm({
+      title: formatRialAssetsInfoText(
+        summary?.cash_wallet ?? 0,
+        summary?.assets_rial_value ?? 0
+      ),
+      okText: 'متوجه شدم',
+      centered: true,
+      cancelButtonProps: { style: { display: 'none' } },
+    })
+  }
+
+  function handleBannerClick(banner: { typeClick?: string; modalText?: string; link?: string }) {
+    const handlers: Record<string, () => void> = {
+      share: () => {
+        showShare.value = true
+      },
+      modal: () => {
+        if (banner.modalText) {
+          TextBanner.value = banner.modalText
+          showTextBanner.value = true
+        }
+      },
+      link: () => {
+        if (banner.link) {
+          if (banner.link.startsWith('http')) {
+            window.open(banner.link, '_blank')
+          } else {
+            router.push(banner.link)
+          }
+        }
+      },
+    }
+    handlers[banner.typeClick ?? '']?.()
+  }
+
+  const context: HomePageContext = {
+    loading,
+    isGaroosi,
+    limitedPrice,
+    showClosedMessage,
+    closedMessage,
+    mainActions,
+    banners,
+    priceChartSeries,
+    chartSelection,
+    updateChartData,
+    selectedChartMetal,
+    setChartMetal,
+    isBoursecuHomeLayout,
+    handleBannerClick,
+    openGoldModal,
+    openRialModal,
+  }
+
+  provide(HOME_PAGE_CONTEXT_KEY, context)
+
+  onUnmounted(() => {
+    stopLastPricePolling()
+  })
+
+  onMounted(() => {
+    // Single shared fetch for mobile + desktop — safe to call on remount (deduped in useHomePageData)
+    void initHomePageData()
+  })
+
+  return {
+    userStore,
+    walletStore,
+    showLogoutConfirm,
+    wholeBalanceVisible,
+    showTextBanner,
+    showShare,
+    TextBanner,
+    goldVal,
+    logout,
+  }
+}
+
+export function useHomePageContext() {
+  const context = inject(HOME_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useHomePageContext must be used within useHomePage')
+  }
+  return context
+}
diff --git a/src/views/base/home/composables/useHomePageData.ts b/src/views/base/home/composables/useHomePageData.ts
new file mode 100644
index 0000000..7c987ad
--- /dev/null
+++ b/src/views/base/home/composables/useHomePageData.ts
@@ -0,0 +1,76 @@
+import { ref } from 'vue'
+import { loading } from '@/utils'
+import { getLastPrices, startLastPricePolling, stopLastPricePolling } from '@/utils/price'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import { clearProductsCatalog } from '@/composables/useProductsCatalog'
+import { getHomeLayoutId } from '../layouts/registry'
+import { fetchHomeChartPrices, loadHomeMaftolOffset, resetHomePriceChart } from './usePriceChart'
+import { loadHomeBanners, resetHomeBanners } from './useBanners'
+import { loadHomeFunds, resetHomeFunds } from './useUserFunds'
+
+/**
+ * Single entry point for all homepage API calls.
+ * Mobile and desktop layouts must not fetch independently — they consume shared module state.
+ */
+let initPromise: Promise<void> | null = null
+const initialized = ref(false)
+
+export function isHomePageDataInitialized() {
+  return initialized.value
+}
+
+export async function initHomePageData(force = false) {
+  if (!force && initialized.value) {
+    // Resume live price updates when returning to home without refetching datasets
+    startLastPricePolling()
+    return
+  }
+
+  if (!force && initPromise) {
+    return initPromise
+  }
+
+  initPromise = (async () => {
+    try {
+      loading.value = true
+      const { loadWalletAssets } = useWalletAssets()
+
+      await Promise.all([
+        loadHomeFunds(force),
+        loadWalletAssets(force),
+        getLastPrices(),
+        fetchHomeChartPrices(force),
+        startLastPricePolling(),
+        loadHomeBanners(force),
+      ])
+
+      if (getHomeLayoutId() === 'boursecu') {
+        await loadHomeMaftolOffset(force)
+      }
+
+      initialized.value = true
+    } catch (error) {
+      console.error('Home page initialization error:', error)
+    } finally {
+      loading.value = false
+      initPromise = null
+    }
+  })()
+
+  return initPromise
+}
+
+/** Clears homepage caches — call on logout or when a full refresh is required. */
+export function resetHomePageData() {
+  initialized.value = false
+  initPromise = null
+  stopLastPricePolling()
+  resetHomeBanners()
+  resetHomeFunds()
+  resetHomePriceChart()
+  clearProductsCatalog()
+}
+
+export function useHomePageInitState() {
+  return { initialized }
+}
diff --git a/src/views/base/home/composables/usePriceChart.ts b/src/views/base/home/composables/usePriceChart.ts
index 9a56a33..1982ffe 100644
--- a/src/views/base/home/composables/usePriceChart.ts
+++ b/src/views/base/home/composables/usePriceChart.ts
@@ -1,33 +1,225 @@
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import { getAllPrices } from '@/api/home'
+import type { Product } from '@/models/products'
+import { getProductsCatalog } from '@/composables/useProductsCatalog'
+import { getHomeLayoutId } from '../layouts/registry'
+import { getProductBuyPrice, resolvePriceOffsetRatio } from '@/utils/productPrice'
+import { isKatodMesGroup, isMaftolMesGroup } from '@/utils/productDealMethod'
+import { getTradeBuyPrice, lastPrice } from '@/utils/price'
+
+export type ChartMetalType = 'katod' | 'maftol'
+
+type ChartPoint = [number, number]
+
+/** Module-level chart state — one dataset shared by mobile and desktop PriceChart instances. */
+const priceChartSeries = ref<{ name: string; data: ChartPoint[] }[]>([
+  { name: 'قیمت', data: [] },
+])
+const rawChartPoints = ref<ChartPoint[]>([])
+const chartSelection = ref('DAILY')
+const chartLoading = ref(false)
+const selectedChartMetal = ref<ChartMetalType>('katod')
+const maftolChartRatio = ref(0)
+
+let chartFetchPromise: Promise<void> | null = null
+let chartInitialized = false
+let maftolOffsetPromise: Promise<void> | null = null
+let maftolOffsetLoaded = false
+
+function findKatodProduct(products: Product[]) {
+  return (
+    products.find((product) => isKatodMesGroup(product.group_type))
+    ?? products.find((product) => (product.title ?? '').includes('کاتد'))
+  )
+}
+
+function findMaftolProduct(products: Product[]) {
+  return (
+    products.find((product) => isMaftolMesGroup(product.group_type))
+    ?? products.find((product) => (product.title ?? '').includes('مفتول'))
+  )
+}
+
+function applyChartRatio(basePrice: number, ratio: number) {
+  if (!ratio) {
+    return basePrice
+  }
+
+  return Math.round(basePrice + basePrice * ratio)
+}
+
+function deriveMaftolChartRatio(maftolProduct?: Product, katodProduct?: Product) {
+  const offsetRatio = resolvePriceOffsetRatio(maftolProduct?.price_offset_percent)
+  if (offsetRatio) {
+    return offsetRatio
+  }
+
+  if (!maftolProduct) {
+    return 0
+  }
+
+  const basePrice = getTradeBuyPrice(lastPrice.value)
+  const katodPrice = katodProduct ? getProductBuyPrice(katodProduct) : basePrice
+  const maftolPrice = getProductBuyPrice(maftolProduct)
+  const referencePrice = katodPrice || basePrice
+
+  if (!referencePrice || !maftolPrice || referencePrice === maftolPrice) {
+    return 0
+  }
+
+  return (maftolPrice - referencePrice) / referencePrice
+}
+
+function normalizeChartTimestamp(timestamp: number) {
+  return timestamp < 1_000_000_000_000 ? timestamp * 1000 : timestamp
+}
+
+function resolvePricesMap(response: unknown): Record<string, Array<{ timestamp: number; value: number }>> | null {
+  if (!response || typeof response !== 'object') {
+    return null
+  }
+
+  const body = response as Record<string, unknown>
+  const nested = body.data
+
+  if (nested && typeof nested === 'object' && 'prices' in nested) {
+    return (nested as { prices: Record<string, Array<{ timestamp: number; value: number }>> }).prices
+  }
+
+  if ('prices' in body) {
+    return body.prices as Record<string, Array<{ timestamp: number; value: number }>>
+  }
+
+  return null
+}
+
+function buildChartPoints(items: Array<{ timestamp: number; value: number }>): ChartPoint[] {
+  return items.map((item) => [
+    normalizeChartTimestamp(item.timestamp),
+    item.value - 1,
+  ])
+}
+
+function syncChartSeries() {
+  const data =
+    getHomeLayoutId() === 'boursecu' && selectedChartMetal.value === 'maftol'
+      ? rawChartPoints.value.map(
+          ([timestamp, value]) =>
+            [timestamp, applyChartRatio(value, maftolChartRatio.value)] as ChartPoint
+        )
+      : rawChartPoints.value
+
+  priceChartSeries.value[0].data = data
+}
+
+watch([selectedChartMetal, maftolChartRatio], () => {
+  syncChartSeries()
+})
+
+async function fetchPrices(force = false) {
+  if (!force && chartInitialized && rawChartPoints.value.length > 0) {
+    syncChartSeries()
+    return
+  }
+
+  if (!force && chartFetchPromise) {
+    return chartFetchPromise
+  }
+
+  chartFetchPromise = (async () => {
+    try {
+      chartLoading.value = true
+      const response = await getAllPrices()
+      const data = resolvePricesMap(response)
+      const selectedData = data?.[chartSelection.value] ?? []
+      rawChartPoints.value = buildChartPoints(selectedData)
+      syncChartSeries()
+      chartInitialized = true
+    } catch (error) {
+      console.error('Error fetching prices:', error)
+    } finally {
+      chartLoading.value = false
+      chartFetchPromise = null
+    }
+  })()
+
+  return chartFetchPromise
+}
+
+async function loadMaftolOffset(force = false) {
+  if (getHomeLayoutId() !== 'boursecu') {
+    maftolChartRatio.value = 0
+    syncChartSeries()
+    return
+  }
+
+  if (!force && maftolOffsetLoaded) {
+    return
+  }
+
+  if (!force && maftolOffsetPromise) {
+    return maftolOffsetPromise
+  }
+
+  maftolOffsetPromise = (async () => {
+    try {
+      const products = await getProductsCatalog(force)
+      const katodProduct = findKatodProduct(products)
+      const maftolProduct = findMaftolProduct(products)
+      maftolChartRatio.value = deriveMaftolChartRatio(maftolProduct, katodProduct)
+      syncChartSeries()
+      maftolOffsetLoaded = true
+    } catch (error) {
+      console.error('Error loading maftol chart ratio:', error)
+      maftolChartRatio.value = 0
+      syncChartSeries()
+    } finally {
+      maftolOffsetPromise = null
+    }
+  })()
+
+  return maftolOffsetPromise
+}
+
+function updateChartData(timeline: string) {
+  chartSelection.value = timeline
+  void fetchPrices(true)
+}
+
+function setChartMetal(metal: ChartMetalType) {
+  selectedChartMetal.value = metal
+}
 
 export function usePriceChart() {
-    const priceChartSeries = ref([{ name: 'قیمت', data: [] }])
-    const selection = ref('DAILY')
-    const chartLoading = ref(false)
+  return {
+    priceChartSeries,
+    chartSelection,
+    chartLoading,
+    selectedChartMetal,
+    maftolChartRatio,
+    updateChartData,
+    fetchPrices,
+    loadMaftolOffset,
+    setChartMetal,
+  }
+}
 
-    const toPersianNumber = (num: number) => {
-        return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
-    }
+export function fetchHomeChartPrices(force = false) {
+  return fetchPrices(force)
+}
 
-    const fetchPrices = async () => {
-        try {
-            chartLoading.value = true
-            const response = await getAllPrices()
-            const data = response.data?.prices
-            const selectedData = data[selection.value] || []
-            priceChartSeries.value[0].data = selectedData.map((item: any) => [item.timestamp, item.value - 1])
-        } catch (error) {
-            console.error('Error fetching prices:', error)
-        } finally {
-            chartLoading.value = false
-        }
-    }
+export function loadHomeMaftolOffset(force = false) {
+  return loadMaftolOffset(force)
+}
 
-    const updateChartData = (timeline: string) => {
-        selection.value = timeline
-        fetchPrices()
-    }
-
-    return { priceChartSeries, chartLoading, updateChartData, fetchPrices }
-}
\ No newline at end of file
+export function resetHomePriceChart() {
+  priceChartSeries.value = [{ name: 'قیمت', data: [] }]
+  rawChartPoints.value = []
+  chartSelection.value = 'DAILY'
+  selectedChartMetal.value = 'katod'
+  maftolChartRatio.value = 0
+  chartInitialized = false
+  chartFetchPromise = null
+  maftolOffsetLoaded = false
+  maftolOffsetPromise = null
+}
diff --git a/src/views/base/home/composables/useUserFunds.ts b/src/views/base/home/composables/useUserFunds.ts
index f85f53d..449d241 100644
--- a/src/views/base/home/composables/useUserFunds.ts
+++ b/src/views/base/home/composables/useUserFunds.ts
@@ -1,22 +1,54 @@
 import { ref } from 'vue'
 import { useFundUserStore } from '@/store/fundStore'
 
-export function useUserFunds() {
-    const funds = ref([])
-    const loading = ref(false)
-    const fundStore = useFundUserStore()
+/** Module-level fund list — shared across home layout variants. */
+const funds = ref<unknown[]>([])
+const fundsLoading = ref(false)
+let fundsPromise: Promise<void> | null = null
+let fundsLoaded = false
 
-    const loadFunds = async () => {
-        try {
-            loading.value = true
-            const result = await fundStore.getMyFund()
-            funds.value = result?.rows || []
-        } catch (error) {
-            console.error('Error loading funds:', error)
-        } finally {
-            loading.value = false
-        }
+async function fetchFunds(force = false) {
+  if (!force && fundsLoaded) {
+    return
+  }
+
+  if (!force && fundsPromise) {
+    return fundsPromise
+  }
+
+  const fundStore = useFundUserStore()
+
+  fundsPromise = (async () => {
+    try {
+      fundsLoading.value = true
+      const result = await fundStore.getMyFund()
+      funds.value = result?.rows || []
+      fundsLoaded = true
+    } catch (error) {
+      console.error('Error loading funds:', error)
+    } finally {
+      fundsLoading.value = false
+      fundsPromise = null
     }
+  })()
 
-    return { funds, loading, loadFunds }
-}
\ No newline at end of file
+  return fundsPromise
+}
+
+export function useUserFunds() {
+  return {
+    funds,
+    loading: fundsLoading,
+    loadFunds: fetchFunds,
+  }
+}
+
+export function loadHomeFunds(force = false) {
+  return fetchFunds(force)
+}
+
+export function resetHomeFunds() {
+  funds.value = []
+  fundsLoaded = false
+  fundsPromise = null
+}
diff --git a/src/views/base/home/desktop/HomeDesktopView.vue b/src/views/base/home/desktop/HomeDesktopView.vue
new file mode 100644
index 0000000..09045a1
--- /dev/null
+++ b/src/views/base/home/desktop/HomeDesktopView.vue
@@ -0,0 +1,17 @@
+<template>
+  <BoursecuDesktopHome v-if="layoutId === 'boursecu'" @logout="$emit('logout')" />
+  <DefaultDesktopHome v-else @logout="$emit('logout')" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { getHomeLayoutId } from '../layouts/registry'
+import BoursecuDesktopHome from './layouts/BoursecuDesktopHome.vue'
+import DefaultDesktopHome from './layouts/DefaultDesktopHome.vue'
+
+defineEmits<{
+  logout: []
+}>()
+
+const layoutId = computed(() => getHomeLayoutId())
+</script>
diff --git a/src/views/base/home/desktop/components/DesktopAssetsCard.vue b/src/views/base/home/desktop/components/DesktopAssetsCard.vue
new file mode 100644
index 0000000..0a58640
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopAssetsCard.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import AssetsSection from '../../components/AssetsSection.vue'
+import DesktopHomeCard from './DesktopHomeCard.vue'
+import type { WalletMetalTotal } from '@/models/walletAssets'
+
+defineEmits<{
+  openGoldModal: [metal: WalletMetalTotal]
+  openRialModal: []
+}>()
+</script>
+
+<template>
+  <DesktopHomeCard title="دارایی‌های من">
+    <AssetsSection
+      plain
+      class="home-desktop-assets"
+      @open-gold-modal="$emit('openGoldModal', $event)"
+      @open-rial-modal="$emit('openRialModal')"
+    />
+  </DesktopHomeCard>
+</template>
+
+<style scoped>
+:deep(.home-desktop-assets) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+:deep(.home-desktop-assets > div) {
+  margin-top: 0 !important;
+  justify-content: flex-start !important;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  background: #eff5f3;
+  border: 1px solid #d4e3de;
+}
+</style>
diff --git a/src/views/base/home/desktop/components/DesktopAssetsMetrics.vue b/src/views/base/home/desktop/components/DesktopAssetsMetrics.vue
new file mode 100644
index 0000000..2096e42
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopAssetsMetrics.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import type { WalletMetalTotal } from '@/models/walletAssets'
+import { resolveSummaryMetalWeight } from '@/utils/productAssets'
+
+const emit = defineEmits<{
+  openGoldModal: [metal: WalletMetalTotal]
+  openRialModal: []
+}>()
+
+const { assetsSummary } = useWalletAssets()
+
+const meta = computed(() => assetsSummary.value?.meta)
+const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
+const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
+const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
+const countBasedInventory = computed(() =>
+  (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0),
+)
+
+type MetricItem = {
+  id: string
+  label: string
+  value: string
+  metal?: WalletMetalTotal
+  showInfo?: boolean
+  onInfo?: 'gold' | 'rial'
+}
+
+const metrics = computed<MetricItem[]>(() => {
+  const items: MetricItem[] = []
+
+  if (meta.value?.has_count_based_products) {
+    items.push({
+      id: 'products',
+      label: 'محصولات',
+      value: `${countBasedInventory.value} عدد`,
+    })
+  }
+
+  if (meta.value?.single_metal && metalTotals.value[0]) {
+    const metal = metalTotals.value[0]
+    items.push({
+      id: `metal-${metal.metal_id}`,
+      label: metal.label,
+      value: formatMetalTotal(metal),
+      metal,
+      showInfo: true,
+      onInfo: 'gold',
+    })
+  } else {
+    metalTotals.value.forEach((metal, index) => {
+      items.push({
+        id: `metal-${metal.metal_id}`,
+        label: metal.label,
+        value: formatMetalTotal(metal),
+        metal,
+        showInfo: index === 0,
+        onInfo: 'gold',
+      })
+    })
+  }
+
+  items.push({
+    id: 'rial',
+    label: 'دارایی ریالی',
+    value: `${usePriceWithoutType(totalRialValue.value)} ریال`,
+    showInfo: true,
+    onInfo: 'rial',
+  })
+
+  return items
+})
+
+function formatMetalTotal(metal: WalletMetalTotal) {
+  return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
+}
+
+function handleInfo(metric: MetricItem) {
+  if (metric.onInfo === 'rial') {
+    emit('openRialModal')
+    return
+  }
+  if (metric.metal) {
+    emit('openGoldModal', metric.metal)
+  }
+}
+</script>
+
+<template>
+  <div class="dhome-metrics">
+    <article v-for="metric in metrics" :key="metric.id" class="dhome-metric-tile">
+      <div class="dhome-metric-tile__head">
+        <span class="dhome-metric-tile__label">{{ metric.label }}</span>
+        <button
+          v-if="metric.showInfo"
+          type="button"
+          class="dhome-metric-tile__info"
+          aria-label="اطلاعات بیشتر"
+          @click="handleInfo(metric)"
+        >
+          <BasicIcon icon="vuesax-linear:info-circle" size="14" />
+        </button>
+      </div>
+      <p class="dhome-metric-tile__value">{{ metric.value }}</p>
+    </article>
+  </div>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopBannersPanel.vue b/src/views/base/home/desktop/components/DesktopBannersPanel.vue
new file mode 100644
index 0000000..07bc24a
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopBannersPanel.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import BannerSlider from '../../components/BannerSlider.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <DesktopHomeSection
+    v-if="ctx.isGaroosi.value && ctx.banners.value?.length"
+    title="بنرها"
+  >
+    <BannerSlider
+      :banners="ctx.banners.value"
+      @bannerClick="ctx.handleBannerClick"
+    />
+  </DesktopHomeSection>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopChartPanel.vue b/src/views/base/home/desktop/components/DesktopChartPanel.vue
new file mode 100644
index 0000000..6dd270c
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopChartPanel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, toValue } from 'vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import PriceChart from '../../components/PriceChart.vue'
+import DesktopHomeCard from '../components/DesktopHomeCard.vue'
+
+const ctx = useHomePageContext()
+
+const chartLayout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
+const priceChartSeries = computed(() => toValue(ctx.priceChartSeries))
+const chartSelection = computed(() => toValue(ctx.chartSelection))
+const selectedChartMetal = computed(() => toValue(ctx.selectedChartMetal))
+</script>
+
+<template>
+  <DesktopHomeCard title="نمودار قیمت">
+    <PriceChart
+      variant="desktop"
+      :price-chart-series="priceChartSeries"
+      :layout="chartLayout"
+      :chart-selection="chartSelection"
+      :selected-metal="selectedChartMetal"
+      @update-data="ctx.updateChartData"
+      @update:selected-metal="ctx.setChartMetal"
+    />
+  </DesktopHomeCard>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopChartSection.vue b/src/views/base/home/desktop/components/DesktopChartSection.vue
new file mode 100644
index 0000000..931fecb
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopChartSection.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, toValue } from 'vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import PriceChart from '../../components/PriceChart.vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+
+const ctx = useHomePageContext()
+
+const chartLayout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
+const priceChartSeries = computed(() => toValue(ctx.priceChartSeries))
+const chartSelection = computed(() => toValue(ctx.chartSelection))
+const selectedChartMetal = computed(() => toValue(ctx.selectedChartMetal))
+</script>
+
+<template>
+  <DesktopHomeSection title="نمودار قیمت" class="dhome-chart">
+    <PriceChart
+      variant="desktop"
+      :price-chart-series="priceChartSeries"
+      :layout="chartLayout"
+      :chart-selection="chartSelection"
+      :selected-metal="selectedChartMetal"
+      @update-data="ctx.updateChartData"
+      @update:selected-metal="ctx.setChartMetal"
+    />
+  </DesktopHomeSection>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopDefaultActions.vue b/src/views/base/home/desktop/components/DesktopDefaultActions.vue
new file mode 100644
index 0000000..4577d18
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopDefaultActions.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { toValue } from 'vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import type { HomeActionItem } from '../../layouts/types'
+
+const ctx = useHomePageContext()
+
+function runAction(action: HomeActionItem) {
+  action.handler()
+}
+</script>
+
+<template>
+  <DesktopHomeSection title="عملیات">
+    <div class="dhome-default-actions">
+      <button
+        v-for="action in toValue(ctx.mainActions)"
+        :key="action.name"
+        type="button"
+        class="dhome-default-action"
+        @click="runAction(action)"
+      >
+        <span class="dhome-default-action__icon">
+          <BasicIcon :icon="action.icon" size="20" />
+        </span>
+        <span class="dhome-default-action__label">{{ action.label }}</span>
+      </button>
+    </div>
+  </DesktopHomeSection>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopGaroosiAssets.vue b/src/views/base/home/desktop/components/DesktopGaroosiAssets.vue
new file mode 100644
index 0000000..48326ec
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopGaroosiAssets.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const userStore = useUserStore()
+</script>
+
+<template>
+  <DesktopHomeSection v-if="ctx.isGaroosi.value" title="دارایی‌ها">
+    <div class="dhome-garoosi-assets">
+      <div class="dhome-garoosi-assets__item">
+        <span class="dhome-garoosi-assets__label">دارایی طلایی</span>
+        <span class="dhome-garoosi-assets__value">
+          {{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }} گرم
+        </span>
+      </div>
+      <div class="dhome-garoosi-assets__divider" />
+      <div class="dhome-garoosi-assets__item">
+        <span class="dhome-garoosi-assets__label">دارایی ریالی</span>
+        <span class="dhome-garoosi-assets__value">
+          {{ usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0) }} ریال
+        </span>
+      </div>
+    </div>
+  </DesktopHomeSection>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopHomeAlerts.vue b/src/views/base/home/desktop/components/DesktopHomeAlerts.vue
new file mode 100644
index 0000000..0a239e7
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopHomeAlerts.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const userStore = useUserStore()
+
+const showLimitedPrice = computed(
+  () =>
+    ctx.limitedPrice.value !== undefined &&
+    userStore.userInfo?.trade_active !== 1,
+)
+
+const limitedPriceText = computed(() =>
+  usePriceWithoutType(Number(ctx.limitedPrice.value?.value ?? 0)),
+)
+</script>
+
+<template>
+  <div v-if="showLimitedPrice || ctx.showClosedMessage.value" class="dhome-alerts">
+    <div v-if="showLimitedPrice" class="dhome-alert dhome-alert--warning">
+      <BasicIcon icon="vuesax-linear:info-circle" size="14" />
+      <span>
+        حداقل مبلغ اولیه برای ثبت سفارش {{ limitedPriceText }} ریال می‌باشد.
+      </span>
+    </div>
+    <div
+      v-if="ctx.showClosedMessage.value"
+      class="dhome-alert dhome-alert--info"
+      v-html="ctx.closedMessage.value"
+    />
+  </div>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopHomeCard.vue b/src/views/base/home/desktop/components/DesktopHomeCard.vue
new file mode 100644
index 0000000..f95ac1a
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopHomeCard.vue
@@ -0,0 +1,12 @@
+<template>
+  <section class="rounded-xl border border-[#d4e3de] bg-white p-5 shadow-sm">
+    <h2 v-if="title" class="mb-4 text-base font-bold text-primary">{{ title }}</h2>
+    <slot />
+  </section>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title?: string
+}>()
+</script>
diff --git a/src/views/base/home/desktop/components/DesktopHomeHeader.vue b/src/views/base/home/desktop/components/DesktopHomeHeader.vue
new file mode 100644
index 0000000..445dda1
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopHomeHeader.vue
@@ -0,0 +1,49 @@
+<template>
+  <header class="flex items-center justify-between gap-4">
+    <div>
+      <p class="text-sm text-gray-500">خوش آمدید</p>
+      <h1 class="text-xl font-bold text-gray-900">
+        {{ userStore.userInfo?.name ?? 'کاربر' }}
+      </h1>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <button
+        type="button"
+        class="flex items-center gap-2 rounded-lg border border-[#d4e3de] bg-[#eff5f3] px-4 py-2 text-sm font-bold text-primary transition hover:bg-[#e4efea]"
+        @click="router.push({ name: 'user' })"
+      >
+        <BasicIcon icon="vuesax-linear:user" size="18" />
+        <span>حساب کاربری</span>
+      </button>
+      <button
+        v-if="showLogout"
+        type="button"
+        class="flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-bold text-gray-600 transition hover:bg-gray-50"
+        @click="$emit('logout')"
+      >
+        <BasicIcon icon="vuesax-linear:logout" size="18" />
+        <span>خروج</span>
+      </button>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useUserStore } from '@/store/userStore'
+import router from '@/router'
+
+withDefaults(
+  defineProps<{
+    showLogout?: boolean
+  }>(),
+  { showLogout: true },
+)
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+</script>
diff --git a/src/views/base/home/desktop/components/DesktopHomeSection.vue b/src/views/base/home/desktop/components/DesktopHomeSection.vue
new file mode 100644
index 0000000..88f4d9a
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopHomeSection.vue
@@ -0,0 +1,15 @@
+<template>
+  <section class="dhome-surface">
+    <header v-if="title" class="dhome-section__header">
+      <h2 class="dhome-section__title">{{ title }}</h2>
+      <slot name="header-extra" />
+    </header>
+    <slot />
+  </section>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title?: string
+}>()
+</script>
diff --git a/src/views/base/home/desktop/components/DesktopHomeShell.vue b/src/views/base/home/desktop/components/DesktopHomeShell.vue
new file mode 100644
index 0000000..7d615ac
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopHomeShell.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="dhome" :class="{ 'dhome--boursecu': isBoursecu }">
+    <div class="dhome__container">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { isBoursecuProject } from '@/utils/config'
+
+const isBoursecu = isBoursecuProject()
+</script>
+
+<style lang="less" src="../styles/desktop-home.less"></style>
diff --git a/src/views/base/home/desktop/components/DesktopHomeTopbar.vue b/src/views/base/home/desktop/components/DesktopHomeTopbar.vue
new file mode 100644
index 0000000..30183b4
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopHomeTopbar.vue
@@ -0,0 +1,43 @@
+<template>
+  <header class="dhome-topbar">
+    <div>
+      <p class="dhome-topbar__eyebrow">نمای کلی</p>
+      <h1 class="dhome-topbar__title">{{ userStore.userInfo?.name ?? 'کاربر' }}</h1>
+    </div>
+
+    <div class="dhome-topbar__actions">
+      <button type="button" class="dhome-btn-ghost" @click="router.push({ name: 'user' })">
+        <BasicIcon icon="vuesax-linear:user" size="16" />
+        <span>حساب کاربری</span>
+      </button>
+      <button
+        v-if="showLogout"
+        type="button"
+        class="dhome-btn-ghost"
+        @click="$emit('logout')"
+      >
+        <BasicIcon icon="vuesax-linear:logout" size="16" />
+        <span>خروج</span>
+      </button>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useUserStore } from '@/store/userStore'
+import router from '@/router'
+
+withDefaults(
+  defineProps<{
+    showLogout?: boolean
+  }>(),
+  { showLogout: true },
+)
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+</script>
diff --git a/src/views/base/home/desktop/components/DesktopLivePrice.vue b/src/views/base/home/desktop/components/DesktopLivePrice.vue
new file mode 100644
index 0000000..a69174f
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopLivePrice.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="dhome-surface dhome-hero-price">
+    <span class="dhome-label">قیمت لحظه‌ای</span>
+    <p class="dhome-hero-price__brand">{{ config.config?.name_fa }}</p>
+    <div class="dhome-hero-price__value-row">
+      <span
+        v-if="percentChange !== 0"
+        class="dhome-hero-price__delta"
+        :class="percentChange >= 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
+      >
+        {{ useTowDecimal(percentChange) }}%
+      </span>
+      <Vue3Odometer
+        :value="displayGoldVal"
+        class="dhome-hero-price__odometer o-text"
+        style="font-family: var(--App-font-family)"
+      />
+      <span class="dhome-hero-price__unit">ریال</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Vue3Odometer from 'vue3-odometer'
+import 'odometer/themes/odometer-theme-default.css'
+import { useConfigStore } from '@/store/configStore'
+import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
+import { useTowDecimal } from '@/utils/usePrice'
+
+const config = useConfigStore()
+
+const isMarketClosed = computed(
+  () => lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0,
+)
+
+const displayGoldVal = computed(() => {
+  if (isMarketClosed.value) return 0
+  return getTradeBuyPrice(lastPrice.value)
+})
+
+const percentChange = computed(() => {
+  if (!getTradeBuyPrice(lastPrice.value)) return 0
+  return percentPriceChanged()
+})
+</script>
diff --git a/src/views/base/home/desktop/components/DesktopPriceOverview.vue b/src/views/base/home/desktop/components/DesktopPriceOverview.vue
new file mode 100644
index 0000000..8a2468c
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopPriceOverview.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, toValue } from 'vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import { price } from '@/utils/price'
+import CurrentPrice from '../../components/CurrentPrice.vue'
+import PriceStats from '../../components/PriceStats.vue'
+import DesktopHomeCard from './DesktopHomeCard.vue'
+
+const ctx = useHomePageContext()
+const statsLayout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+    <DesktopHomeCard title="قیمت لحظه‌ای">
+      <CurrentPrice class="home-desktop-current-price" />
+    </DesktopHomeCard>
+
+    <DesktopHomeCard title="بازه قیمت امروز">
+      <PriceStats variant="desktop" :price="price" :layout="statsLayout" />
+    </DesktopHomeCard>
+  </div>
+</template>
+
+<style scoped>
+:deep(.home-desktop-current-price) {
+  margin-top: 0;
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+</style>
diff --git a/src/views/base/home/desktop/components/DesktopPriceRange.vue b/src/views/base/home/desktop/components/DesktopPriceRange.vue
new file mode 100644
index 0000000..a9bcb3b
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopPriceRange.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getTradeBuyPrice, getTradeSellPrice, price } from '@/utils/price'
+import { usePriceWithoutType } from '@/utils/usePrice'
+
+const highPrice = computed(() => price.value?.up?.buy ?? getTradeBuyPrice(price.value))
+const lowPrice = computed(() => price.value?.up?.sell ?? getTradeSellPrice(price.value))
+</script>
+
+<template>
+  <div class="dhome-surface dhome-price-range">
+    <div class="dhome-price-range__item">
+      <span class="dhome-label">بیشترین امروز</span>
+      <span class="dhome-price-range__value dhome-price-range__value--high">
+        {{ usePriceWithoutType(highPrice) }}
+        <span class="text-xs font-medium text-gray-400 mr-1">ریال</span>
+      </span>
+    </div>
+    <div class="dhome-price-range__divider" />
+    <div class="dhome-price-range__item">
+      <span class="dhome-label">کمترین امروز</span>
+      <span class="dhome-price-range__value dhome-price-range__value--low">
+        {{ usePriceWithoutType(lowPrice) }}
+        <span class="text-xs font-medium text-gray-400 mr-1">ریال</span>
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopQuickActionsGrid.vue b/src/views/base/home/desktop/components/DesktopQuickActionsGrid.vue
new file mode 100644
index 0000000..f1f7524
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopQuickActionsGrid.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import router from '@/router'
+import HomeQuickActionBox from '../../components/HomeQuickActionBox.vue'
+import DesktopHomeCard from './DesktopHomeCard.vue'
+import { boursecuQuickActions } from '../../layouts/configs/boursecuQuickActions'
+import type { HomeQuickActionItem } from '../../layouts/types'
+
+const props = withDefaults(
+  defineProps<{
+    actions?: HomeQuickActionItem[]
+  }>(),
+  {
+    actions: () => boursecuQuickActions,
+  },
+)
+
+function handleClick(action: HomeQuickActionItem) {
+  router.push(action.route)
+}
+</script>
+
+<template>
+  <DesktopHomeCard title="دسترسی سریع">
+    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
+      <HomeQuickActionBox
+        v-for="action in props.actions"
+        :key="action.id"
+        :action="action"
+        class="home-desktop-quick-action"
+        @click="handleClick(action)"
+      />
+    </div>
+  </DesktopHomeCard>
+</template>
+
+<style scoped>
+:deep(.home-desktop-quick-action) {
+  min-height: 108px;
+}
+</style>
diff --git a/src/views/base/home/desktop/components/DesktopQuickActionsPanel.vue b/src/views/base/home/desktop/components/DesktopQuickActionsPanel.vue
new file mode 100644
index 0000000..7ad3d62
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopQuickActionsPanel.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import router from '@/router'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import { boursecuQuickActions } from '../../layouts/configs/boursecuQuickActions'
+import type { HomeQuickActionItem } from '../../layouts/types'
+
+const props = withDefaults(
+  defineProps<{
+    actions?: HomeQuickActionItem[]
+    title?: string
+  }>(),
+  {
+    actions: () => boursecuQuickActions,
+    title: 'میانبرها',
+  },
+)
+
+function navigate(action: HomeQuickActionItem) {
+  router.push(action.route)
+}
+</script>
+
+<template>
+  <DesktopHomeSection :title="title">
+    <nav class="dhome-actions" aria-label="میانبرهای صفحه اصلی">
+      <button
+        v-for="action in props.actions"
+        :key="action.id"
+        type="button"
+        class="dhome-action"
+        @click="navigate(action)"
+      >
+        <span class="dhome-action__icon">
+          <BasicIcon :icon="action.icon" size="18" />
+        </span>
+        <span class="dhome-action__label">{{ action.label }}</span>
+        <BasicIcon icon="vuesax-linear:arrow-left" size="14" class="dhome-action__chevron" />
+      </button>
+    </nav>
+  </DesktopHomeSection>
+</template>
diff --git a/src/views/base/home/desktop/components/DesktopReferralPanel.vue b/src/views/base/home/desktop/components/DesktopReferralPanel.vue
new file mode 100644
index 0000000..4ce38fa
--- /dev/null
+++ b/src/views/base/home/desktop/components/DesktopReferralPanel.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import ReferralSection from '../../components/ReferralSection.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <DesktopHomeSection v-if="ctx.isGaroosi.value" title="دعوت از دوستان">
+    <ReferralSection />
+  </DesktopHomeSection>
+</template>
diff --git a/src/views/base/home/desktop/layouts/BoursecuDesktopHome.vue b/src/views/base/home/desktop/layouts/BoursecuDesktopHome.vue
new file mode 100644
index 0000000..dffd48e
--- /dev/null
+++ b/src/views/base/home/desktop/layouts/BoursecuDesktopHome.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { loading } from '@/utils'
+import { useHomePageContext } from '../../composables/useHomePage'
+import HomeSkeleton from '../../components/HomeSkeleton.vue'
+import DesktopHomeShell from '../components/DesktopHomeShell.vue'
+import DesktopHomeTopbar from '../components/DesktopHomeTopbar.vue'
+import DesktopHomeAlerts from '../components/DesktopHomeAlerts.vue'
+import DesktopLivePrice from '../components/DesktopLivePrice.vue'
+import DesktopPriceRange from '../components/DesktopPriceRange.vue'
+import DesktopAssetsMetrics from '../components/DesktopAssetsMetrics.vue'
+import DesktopChartSection from '../components/DesktopChartSection.vue'
+import DesktopQuickActionsPanel from '../components/DesktopQuickActionsPanel.vue'
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+const ctx = useHomePageContext()
+
+const showSkeleton = computed(() => loading.value || !userStore.userInfo)
+const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
+</script>
+
+<template>
+  <DesktopHomeShell>
+    <DesktopHomeTopbar @logout="$emit('logout')" />
+    <DesktopHomeAlerts />
+
+    <HomeSkeleton v-if="showSkeleton" />
+
+    <template v-else-if="showContent">
+      <section class="dhome-hero-row">
+        <DesktopLivePrice />
+        <DesktopPriceRange />
+      </section>
+
+      <DesktopAssetsMetrics
+        @open-gold-modal="ctx.openGoldModal"
+        @open-rial-modal="ctx.openRialModal"
+      />
+
+      <section class="dhome-main-grid">
+        <DesktopChartSection />
+        <DesktopQuickActionsPanel />
+      </section>
+    </template>
+  </DesktopHomeShell>
+</template>
diff --git a/src/views/base/home/desktop/layouts/DefaultDesktopHome.vue b/src/views/base/home/desktop/layouts/DefaultDesktopHome.vue
new file mode 100644
index 0000000..5ee49ba
--- /dev/null
+++ b/src/views/base/home/desktop/layouts/DefaultDesktopHome.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { loading } from '@/utils'
+import { useHomePageContext } from '../../composables/useHomePage'
+import HomeSkeleton from '../../components/HomeSkeleton.vue'
+import DesktopHomeShell from '../components/DesktopHomeShell.vue'
+import DesktopHomeTopbar from '../components/DesktopHomeTopbar.vue'
+import DesktopHomeAlerts from '../components/DesktopHomeAlerts.vue'
+import DesktopLivePrice from '../components/DesktopLivePrice.vue'
+import DesktopPriceRange from '../components/DesktopPriceRange.vue'
+import DesktopAssetsMetrics from '../components/DesktopAssetsMetrics.vue'
+import DesktopChartSection from '../components/DesktopChartSection.vue'
+import DesktopDefaultActions from '../components/DesktopDefaultActions.vue'
+import DesktopGaroosiAssets from '../components/DesktopGaroosiAssets.vue'
+import DesktopReferralPanel from '../components/DesktopReferralPanel.vue'
+import DesktopBannersPanel from '../components/DesktopBannersPanel.vue'
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+const ctx = useHomePageContext()
+
+const showSkeleton = computed(() => loading.value || !userStore.userInfo)
+const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
+</script>
+
+<template>
+  <DesktopHomeShell>
+    <DesktopHomeTopbar @logout="$emit('logout')" />
+    <DesktopHomeAlerts />
+
+    <HomeSkeleton v-if="showSkeleton" />
+
+    <template v-else-if="showContent">
+      <section class="dhome-hero-row">
+        <DesktopLivePrice />
+        <DesktopPriceRange />
+      </section>
+
+      <DesktopAssetsMetrics
+        v-if="!ctx.isGaroosi.value"
+        @open-gold-modal="ctx.openGoldModal"
+        @open-rial-modal="ctx.openRialModal"
+      />
+
+      <div v-if="ctx.isGaroosi.value" class="dhome-default-grid">
+        <div class="dhome-default-grid__main">
+          <DesktopDefaultActions />
+          <DesktopBannersPanel />
+          <DesktopChartSection />
+        </div>
+
+        <aside class="dhome-default-grid__side">
+          <DesktopGaroosiAssets />
+          <DesktopReferralPanel />
+        </aside>
+      </div>
+
+      <template v-else>
+        <DesktopDefaultActions />
+        <DesktopChartSection />
+      </template>
+    </template>
+  </DesktopHomeShell>
+</template>
diff --git a/src/views/base/home/desktop/styles/desktop-home.less b/src/views/base/home/desktop/styles/desktop-home.less
new file mode 100644
index 0000000..69818c2
--- /dev/null
+++ b/src/views/base/home/desktop/styles/desktop-home.less
@@ -0,0 +1,516 @@
+/* Premium desktop home — SaaS dashboard design tokens */
+
+.dhome {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+  font-feature-settings: 'ss01' on;
+}
+
+.dhome__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dhome-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: #9ca3af;
+  margin-bottom: 6px;
+}
+
+.dhome-surface {
+  background: #ffffff;
+  border-radius: 14px;
+  padding: 22px 24px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  min-width: 0;
+  overflow: hidden;
+
+  .home-referral {
+    margin-top: 0;
+  }
+}
+
+.dhome-section {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+    letter-spacing: -0.01em;
+  }
+}
+
+/* Topbar */
+.dhome-topbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin-bottom: 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    line-height: 1.2;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+.dhome-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+
+  &:hover {
+    color: #111827;
+    background: rgba(15, 23, 42, 0.04);
+  }
+}
+
+/* Alerts */
+.dhome-alerts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.dhome-alert {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+
+  &--warning {
+    background: #fef3f2;
+    color: #b42318;
+  }
+
+  &--info {
+    background: #f0f4ff;
+    color: #344054;
+  }
+}
+
+/* Hero price */
+.dhome-hero-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.dhome-hero-price {
+  &__brand {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0 0 12px;
+  }
+
+  &__value-row {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  &__odometer {
+    font-size: 32px !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.03em;
+    color: #111827;
+    direction: ltr;
+    line-height: 1;
+  }
+
+  &__unit {
+    font-size: 14px;
+    font-weight: 500;
+    color: #9ca3af;
+  }
+
+  &__delta {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    direction: ltr;
+
+    &--up {
+      background: #ecfdf3;
+      color: #027a48;
+    }
+
+    &--down {
+      background: #fef3f2;
+      color: #b42318;
+    }
+  }
+}
+
+.dhome-price-range {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+  height: 100%;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    direction: ltr;
+    text-align: right;
+  }
+
+  &__value--high {
+    color: #027a48;
+  }
+
+  &__value--low {
+    color: #b42318;
+  }
+
+  &__divider {
+    height: 1px;
+    background: rgba(15, 23, 42, 0.06);
+  }
+}
+
+/* Asset metrics */
+.dhome-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.dhome-metric-tile {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px 18px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  transition: box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: #9ca3af;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background: #f3f4f6;
+      color: #374151;
+    }
+  }
+
+  &__value {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: #111827;
+    line-height: 1.2;
+  }
+}
+
+/* Main dashboard grid */
+.dhome-main-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 272px;
+  gap: 16px;
+  align-items: start;
+}
+
+.dhome-chart {
+  :deep(.bg-gray-50) {
+    background: transparent !important;
+    border-radius: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  :deep(.w-full.text-center.pt-2) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  :deep(.chart-metal-segment) {
+    display: inline-flex;
+    background: #f3f4f6;
+    border-radius: 8px;
+    padding: 3px;
+    margin-bottom: 0 !important;
+    flex-shrink: 0;
+  }
+
+  :deep(.chart-metal-segment__item) {
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  :deep(.chart-timeline-group) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+    margin-bottom: 4px;
+  }
+
+  :deep(.chart-timeline-group .ant-radio-button-wrapper) {
+    margin: 0;
+  }
+}
+
+/* Quick actions */
+.dhome-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dhome-action {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 11px 10px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  text-align: right;
+  font-family: inherit;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: #f9fafb;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: #f3f4f6;
+    color: @App-primary-color;
+    flex-shrink: 0;
+    transition: background 0.15s ease;
+  }
+
+  &:hover &__icon {
+    background: #eef2f6;
+  }
+
+  &__label {
+    flex: 1;
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  &__chevron {
+    color: #d1d5db;
+    flex-shrink: 0;
+  }
+}
+
+/* Default layout grid */
+.dhome-default-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 16px;
+  align-items: start;
+}
+
+.dhome-default-grid__main,
+.dhome-default-grid__side {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.dhome-default-actions {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.dhome-default-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 12px;
+  border: none;
+  border-radius: 12px;
+  background: #f9fafb;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s ease, transform 0.15s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    transform: translateY(-1px);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    background: #ffffff;
+    color: @App-primary-color;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #374151;
+    text-align: center;
+    line-height: 1.4;
+  }
+}
+
+/* Garoosi assets strip */
+.dhome-garoosi-assets {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: #111827;
+    direction: ltr;
+    text-align: right;
+  }
+
+  &__divider {
+    height: 1px;
+    background: rgba(15, 23, 42, 0.06);
+  }
+}
+
+/* Boursecu subtle accent */
+.dhome--boursecu {
+  .dhome-action__icon {
+    background: rgba(19, 48, 80, 0.06);
+    color: #133050;
+  }
+
+  .dhome-hero-price__odometer {
+    color: #133050;
+  }
+}
+
+@media (max-width: 1024px) {
+  .dhome__container {
+    padding: 24px 28px 36px;
+  }
+
+  .dhome-hero-row,
+  .dhome-main-grid,
+  .dhome-default-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dhome-default-actions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/src/views/base/home/index.vue b/src/views/base/home/index.vue
index 0c50ce7..bcf810d 100644
--- a/src/views/base/home/index.vue
+++ b/src/views/base/home/index.vue
@@ -1,293 +1,51 @@
 <template>
-  <div class="mt-10 p-5">
-    <div v-if="userStore.userInfo && !loading">
-      <!-- هشدار حداقل مبلغ -->
-      <div
-          v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
-          class="text-red text-xs flex gap-1 items-center justify-center mb-2"
-      >
-        <Icon icon="vuesax-linear:info-circle" size="16"/>
-        حداقل مبلغ اولیه برای ثبت سفارش {{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
-      </div>
+  <div class="home-page-root">
+    <HomePageShell @logout="showLogoutConfirm = true" />
 
-      <!-- بخش اصلی -->
-      <div class="p-1  from-primary rounded-lg p-px to-transparent" :class="isGaroosi ? 'mt-0' : 'mt-5'">
-        <!-- دارایی‌ها (فقط گاروسی) -->
-        <div v-if="isGaroosi" class="flex justify-between px-2 mb-2">
-          <AssetItem label="دارایی طلایی:" :value="`${(userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3)} گرم`"/>
-          <AssetItem label="دارایی ریالی:"
-                     :value="`${usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)} ریال`"/>
-        </div>
+    <LogoutConfirmDialog v-model:show="showLogoutConfirm" @confirm="logout" />
 
-        <!-- دکمه‌های اصلی -->
-        <div class="p-2 py-3 rounded-lg bg-tertiary">
-          <div class="flex justify-between">
-            <ActionButton
-                v-for="action in mainActions"
-                :key="action.name"
-                :action="action"
-                @click="action.handler"
-            />
-          </div>
-        </div>
+    <BalanceSheet
+      v-model:show="wholeBalanceVisible"
+      :wallet-info="walletStore.walletInfo"
+      :gold-val="goldVal"
+    />
 
-        <!-- بخش کد معرف (گاروسی) -->
-        <ReferralSection v-if="isGaroosi"/>
-
-        <!-- بخش دارایی‌ها (سایر پروژه‌ها) -->
-        <AssetsSection v-else @openGoldModal="openGoldModal" @openRialModal="openRialModal"/>
-
-        <!-- پیام بسته بودن بازار -->
-        <MarketClosedMessage v-if="showClosedMessage" :message="closedMessage"/>
-
-        <!-- قیمت فعلی -->
-        <CurrentPrice/>
-
-        <!-- بنرها -->
-        <BannerSlider v-if="isGaroosi && banners?.length" :banners="banners" @bannerClick="handleBannerClick"/>
-
-        <!-- نمودار قیمت -->
-        <PriceChart @updateData="updateChartData" :price-chart-series="priceChartSeries"/>
-
-        <!-- آمار بالا و پایین -->
-        <PriceStats :price="price"/>
-      </div>
-
-      <!-- اسکلت لودینگ -->
-      <HomeSkeleton v-if="loading" class="w-full"/>
-    </div>
-
-    <!-- هدر -->
-    <AppHeader @logout="showLogoutConfirm = true"/>
-
-    <!-- دیالوگ خروج -->
-    <LogoutConfirmDialog v-model:show="showLogoutConfirm" @confirm="logout"/>
-
-    <!-- شیت موجودی -->
-    <BalanceSheet v-model:show="wholeBalanceVisible" :walletInfo="walletStore.walletInfo" :goldVal="goldVal"/>
-
-    <!-- مودال‌ها -->
-    <BasicModal v-model:visible="showTextBanner" :custom-footer="true" destroyOnClose>
-      <div class="max-h-[54vh] ql-editor" v-html="TextBanner"></div>
+    <BasicModal v-model:visible="showTextBanner" :custom-footer="true" destroy-on-close>
+      <div class="max-h-[54vh] ql-editor" v-html="TextBanner" />
     </BasicModal>
 
-    <ShareModal v-model:visible="showShare" :referralId="userStore.userInfo?.referral_id"/>
+    <ShareModal v-model:show="showShare" :referral-id="userStore.userInfo?.referral_id" />
   </div>
 </template>
 
 <script lang="tsx" setup>
-import {computed, onMounted, onUnmounted, ref} from 'vue'
-import router from '@/router'
-import {useWindowScroll} from '@vueuse/core'
-import {loading, removeToken} from '@/utils'
-import {useUserStore} from '@/store/userStore'
-import {useWalletStore} from '@/store/walletStore'
-import { useWalletAssets } from '@/composables/useWalletAssets'
-import type { WalletMetalTotal } from '@/models/walletAssets'
-import { formatMetalAssetsInfoText, formatRialAssetsInfoText } from '@/utils/productAssets'
-import {useConfigStore} from '@/store/configStore'
-import {useFundUserStore} from '@/store/fundStore'
-import {usePriceWithoutType} from '../../../utils/usePrice'
-import {getLastPrices, lastPrice, price, startLastPricePolling, stopLastPricePolling} from '@/utils/price'
-import {getConstByKey} from '@/api/const'
-import {message, Modal} from 'ant-design-vue'
-
-// Components
-import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
 import BasicModal from '@/components/BasicPacks/BasicModal.vue'
-import AssetItem from './components/AssetItem.vue'
-import ActionButton from './components/ActionButton.vue'
-import ReferralSection from './components/ReferralSection.vue'
-import AssetsSection from './components/AssetsSection.vue'
-import MarketClosedMessage from './components/MarketClosedMessage.vue'
-import CurrentPrice from './components/CurrentPrice.vue'
-import BannerSlider from './components/BannerSlider.vue'
-import PriceChart from './components/PriceChart.vue'
-import PriceStats from './components/PriceStats.vue'
-import AppHeader from './components/AppHeader.vue'
 import LogoutConfirmDialog from './components/LogoutConfirmDialog.vue'
 import BalanceSheet from './components/BalanceSheet.vue'
 import ShareModal from './components/ShareModal.vue'
+import HomePageShell from './shell/HomePageShell.vue'
+import { useHomePage } from './composables/useHomePage'
 
-// Composables
-import {useBanners} from './composables/useBanners'
-import {usePriceChart} from './composables/usePriceChart'
-import {useUserFunds} from './composables/useUserFunds'
-import {getReferralShareText, getReferralShareTitle} from '@/utils/config'
-
-// Stores
-const userStore = useUserStore()
-const walletStore = useWalletStore()
-const configStore = useConfigStore()
-const fundStore = useFundUserStore()
-const { assetsSummary, loadWalletAssets } = useWalletAssets()
-
-// Config
-const isGaroosi = computed(() => configStore.config.name === 'garoosi')
-const closedMessage = computed(() => userStore.getValueByKey('closed_message'))
-const showClosedMessage = computed(() =>
-    closedMessage.value &&
-    lastPrice?.value?.price_last === 0)
-
-
-// State
-const showLogoutConfirm = ref(false)
-const wholeBalanceVisible = ref(false)
-const showTextBanner = ref(false)
-const showShare = ref(false)
-const TextBanner = ref('')
-const odometerKey = ref(0)
-const {x, y} = useWindowScroll()
-
-// Composables
-const {banners, loadBanners} = useBanners()
-const {updateChartData, priceChartSeries, fetchPrices} = usePriceChart()
-const {funds, loadFunds} = useUserFunds()
-
-// Computed
-const limitedPrice = computed(() => walletStore.limitedPrice?.[0])
-const goldVal = computed(() => {
-  return lastPrice.value?.price_last ?? 1
-})
-
-// Actions
-const mainActions = computed(() => [
-  {
-    name: 'buySell',
-    icon: 'vuesax-linear:money-receive',
-    label: 'خرید و فروش',
-    handler: () => router.push({name: 'buyProduct'})
-  },
-  {
-    name: 'deposit',
-    icon: 'vuesax-linear:card-add',
-    label: isGaroosi.value ? 'واریز و برداشت' : 'واریز نقدی',
-    handler: () => router.push({name: 'wallet', query: {state: 'deposit'}})
-  },
-  {
-    name: 'balance',
-    icon: 'vuesax-linear:receipt-item',
-    label: 'موجودی',
-    handler: () => wholeBalanceVisible.value = true
-  },
-  {
-    name: 'assets',
-    icon: 'vuesax-linear:cup',
-    label: isGaroosi.value ? 'دعوت از دوستان' : 'دارایی ها',
-    handler: () => isGaroosi.value ? shareCode() : router.push({name: 'fund'})
-  }
-])
-
-// Methods
-async function shareCode() {
-  const text = getReferralShareText({
-    userName: userStore.userInfo?.name,
-    projectName: configStore.config.name,
-    referralId: userStore.userInfo?.referral_id,
-  })
-
-  try {
-    await navigator.share({
-      title: getReferralShareTitle(configStore.config.name),
-      text,
-    })
-  } catch {
-    copyCode()
-  }
-}
-
-function copyCode() {
-  const code = userStore.userInfo?.referral_id
-  if (code) {
-    navigator.clipboard.writeText(code)
-    message.info('کد رونوشت شد')
-  }
-}
-
-async function logout() {
-  userStore.userInfo = undefined
-  walletStore.walletInfo = undefined
-  useWalletAssets().clearWalletAssets()
-  removeToken()
-  await router.push({name: 'login'})
-  window.location.reload()
-}
-
-function openGoldModal(metal: WalletMetalTotal) {
-  Modal.confirm({
-    title: formatMetalAssetsInfoText(metal),
-    okText: 'متوجه شدم',
-    centered: true,
-    cancelButtonProps: {style: {display: 'none'}}
-  })
-}
-
-function openRialModal() {
-  const summary = assetsSummary.value
-  Modal.confirm({
-    title: formatRialAssetsInfoText(
-      summary?.cash_wallet ?? 0,
-      summary?.assets_rial_value ?? 0
-    ),
-    okText: 'متوجه شدم',
-    centered: true,
-    cancelButtonProps: {style: {display: 'none'}}
-  })
-}
-
-function handleBannerClick(banner) {
-  const handlers = {
-    share: () => showShare.value = true,
-    modal: () => {
-      if (banner.modalText) {
-        TextBanner.value = banner.modalText
-        showTextBanner.value = true
-      }
-    },
-    link: () => {
-      if (banner.link) {
-        if (banner.link.startsWith('http')) {
-          window.open(banner.link, '_blank')
-        } else {
-          router.push(banner.link)
-        }
-      }
-    }
-  }
-  handlers[banner.typeClick]?.()
-}
-
-// Lifecycle
-onMounted(async () => {
-  try {
-    loading.value = true
-    await Promise.all([
-      loadFunds(),
-      loadWalletAssets(),
-      getLastPrices(),
-      fetchPrices(),
-      startLastPricePolling(),
-      loadBanners()
-    ])
-
-    // شروع آپدیت قیمت
-    const updateInterval = setInterval(() => {
-      odometerKey.value++
-    }, 1000)
-
-    onUnmounted(() => {
-      clearInterval(updateInterval)
-      stopLastPricePolling()
-    })
-  } catch (error) {
-    console.error('Initialization error:', error)
-  } finally {
-    loading.value = false
-  }
-})
+const {
+  userStore,
+  walletStore,
+  showLogoutConfirm,
+  wholeBalanceVisible,
+  showTextBanner,
+  showShare,
+  TextBanner,
+  goldVal,
+  logout,
+} = useHomePage()
 </script>
 
+<style scoped>
+.home-page-root {
+  min-height: 100%;
+  height: 100%;
+}
+</style>
+
 <style lang="less">
 .odometer {
   font-size: 60px;
@@ -314,4 +72,4 @@ label:focus-within {
     background: #fff;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/base/home/layouts/HomeLayoutRenderer.vue b/src/views/base/home/layouts/HomeLayoutRenderer.vue
new file mode 100644
index 0000000..d695353
--- /dev/null
+++ b/src/views/base/home/layouts/HomeLayoutRenderer.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { loading } from '@/utils'
+import HomeSkeleton from '../components/HomeSkeleton.vue'
+import { getHomeLayoutConfig } from './registry'
+import { HOME_SECTION_COMPONENTS } from './sections'
+import type { HomeLayoutConfig, HomeSectionId } from './types'
+
+const props = defineProps<{
+  layoutConfig?: HomeLayoutConfig
+}>()
+
+const userStore = useUserStore()
+const layoutConfig = computed(() => props.layoutConfig ?? getHomeLayoutConfig())
+
+const outerSections = computed(() =>
+  (layoutConfig.value.outerSections ?? []).filter((section) => section.visible !== false)
+)
+
+const innerSections = computed(() =>
+  layoutConfig.value.sections.filter((section) => section.visible !== false)
+)
+
+function resolveSectionComponent(sectionId: HomeSectionId) {
+  return HOME_SECTION_COMPONENTS[sectionId]
+}
+</script>
+
+<template>
+  <div v-if="userStore.userInfo && !loading">
+    <component
+      :is="resolveSectionComponent(section.id)"
+      v-for="section in outerSections"
+      :key="`outer-${section.id}`"
+    />
+
+    <div v-if="layoutConfig.wrapperClass" :class="layoutConfig.wrapperClass">
+      <component
+        :is="resolveSectionComponent(section.id)"
+        v-for="section in innerSections"
+        :key="section.id"
+      />
+    </div>
+
+    <template v-else>
+      <component
+        :is="resolveSectionComponent(section.id)"
+        v-for="section in innerSections"
+        :key="section.id"
+      />
+    </template>
+  </div>
+
+  <HomeSkeleton v-if="loading" class="w-full" />
+</template>
diff --git a/src/views/base/home/layouts/configs/boursecu.ts b/src/views/base/home/layouts/configs/boursecu.ts
new file mode 100644
index 0000000..ca3fdb7
--- /dev/null
+++ b/src/views/base/home/layouts/configs/boursecu.ts
@@ -0,0 +1,21 @@
+import type { HomeLayoutConfig } from '../types'
+
+/**
+ * چیدمان اختصاصی boursecu — فقط وقتی home_layout=boursecu یا پروژه boursecu باشد.
+ * شامل: دارایی بدون بک‌گراند، گرید ۶ باکس، نمودار کاتد/مفتول، و ...
+ */
+export const boursecuHomeLayoutConfig: HomeLayoutConfig = {
+  id: 'boursecu',
+  wrapperClass: 'rounded-lg mt-5',
+  outerSections: [
+    { id: 'assets' },
+    { id: 'boursecuQuickActions' },
+    { id: 'limitedPriceAlert' },
+  ],
+  sections: [
+    { id: 'marketClosed' },
+    { id: 'currentPrice' },
+    { id: 'priceChart' },
+    { id: 'priceStats' },
+  ],
+}
diff --git a/src/views/base/home/layouts/configs/boursecuQuickActions.ts b/src/views/base/home/layouts/configs/boursecuQuickActions.ts
new file mode 100644
index 0000000..32c33fb
--- /dev/null
+++ b/src/views/base/home/layouts/configs/boursecuQuickActions.ts
@@ -0,0 +1,40 @@
+import type { HomeQuickActionItem } from '../types'
+
+export const boursecuQuickActions: HomeQuickActionItem[] = [
+  {
+    id: 'buySell',
+    label: 'خرید و فروش',
+    icon: 'vuesax-linear:money-receive',
+    route: { name: 'buyProduct' },
+  },
+  {
+    id: 'wallet',
+    label: 'واریز و برداشت',
+    icon: 'vuesax-linear:wallet-1',
+    route: { name: 'wallet' },
+  },
+  {
+    id: 'assets',
+    label: 'دارایی ها',
+    icon: 'vuesax-linear:cup',
+    route: { name: 'fund' },
+  },
+  {
+    id: 'transactions',
+    label: 'تراکنش ها',
+    icon: 'vuesax-linear:receipt-item',
+    route: { name: 'transactions' },
+  },
+  {
+    id: 'physicalReceive',
+    label: 'تحویل فیزیکی',
+    icon: 'vuesax-linear:direct-inbox',
+    route: { name: 'physicalReceive' },
+  },
+  {
+    id: 'convert',
+    label: 'تبدیل',
+    icon: 'vuesax-linear:refresh-circle',
+    route: { name: 'buyProduct' },
+  },
+]
diff --git a/src/views/base/home/layouts/configs/default.ts b/src/views/base/home/layouts/configs/default.ts
new file mode 100644
index 0000000..a5cfc52
--- /dev/null
+++ b/src/views/base/home/layouts/configs/default.ts
@@ -0,0 +1,19 @@
+import type { HomeLayoutConfig } from '../types'
+
+/** چیدمان پیش‌فرض — همه پروژه‌ها به‌جز boursecu */
+export const defaultHomeLayoutConfig: HomeLayoutConfig = {
+  id: 'default',
+  wrapperClass: 'p-1 from-primary rounded-lg p-px to-transparent mt-5',
+  outerSections: [{ id: 'limitedPriceAlert' }],
+  sections: [
+    { id: 'garoosiAssets' },
+    { id: 'mainActions' },
+    { id: 'referral' },
+    { id: 'assets' },
+    { id: 'marketClosed' },
+    { id: 'currentPrice' },
+    { id: 'banners' },
+    { id: 'priceChart' },
+    { id: 'priceStats' },
+  ],
+}
diff --git a/src/views/base/home/layouts/registry.ts b/src/views/base/home/layouts/registry.ts
new file mode 100644
index 0000000..29416b8
--- /dev/null
+++ b/src/views/base/home/layouts/registry.ts
@@ -0,0 +1,47 @@
+import type { Component } from 'vue'
+import { getConfigApp, isBoursecuProject } from '@/utils/config'
+import type { HomeLayoutConfig, HomeLayoutId } from './types'
+import { defaultHomeLayoutConfig } from './configs/default'
+import { boursecuHomeLayoutConfig } from './configs/boursecu'
+import HomeLayoutRenderer from './HomeLayoutRenderer.vue'
+
+const HOME_LAYOUT_CONFIGS: Record<HomeLayoutId, HomeLayoutConfig> = {
+  default: defaultHomeLayoutConfig,
+  boursecu: boursecuHomeLayoutConfig,
+}
+
+const HOME_LAYOUT_COMPONENTS: Record<HomeLayoutId, Component> = {
+  default: HomeLayoutRenderer,
+  boursecu: HomeLayoutRenderer,
+}
+
+export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'default'
+
+export function isHomeLayoutId(value: unknown): value is HomeLayoutId {
+  return typeof value === 'string' && value in HOME_LAYOUT_CONFIGS
+}
+
+export function getHomeLayoutId(): HomeLayoutId {
+  const adminLayout = getConfigApp('home_layout')
+  if (isHomeLayoutId(adminLayout)) {
+    return adminLayout
+  }
+
+  if (isBoursecuProject()) {
+    return 'boursecu'
+  }
+
+  return DEFAULT_HOME_LAYOUT_ID
+}
+
+export function getHomeLayoutConfig(layoutId = getHomeLayoutId()): HomeLayoutConfig {
+  return HOME_LAYOUT_CONFIGS[layoutId] ?? HOME_LAYOUT_CONFIGS[DEFAULT_HOME_LAYOUT_ID]
+}
+
+export function resolveHomeLayoutComponent(layoutId = getHomeLayoutId()): Component {
+  return HOME_LAYOUT_COMPONENTS[layoutId] ?? HOME_LAYOUT_COMPONENTS[DEFAULT_HOME_LAYOUT_ID]
+}
+
+export function registerHomeLayoutConfig(layoutId: HomeLayoutId, config: HomeLayoutConfig) {
+  HOME_LAYOUT_CONFIGS[layoutId] = config
+}
diff --git a/src/views/base/home/layouts/sections/AssetsSectionBlock.vue b/src/views/base/home/layouts/sections/AssetsSectionBlock.vue
new file mode 100644
index 0000000..afc9610
--- /dev/null
+++ b/src/views/base/home/layouts/sections/AssetsSectionBlock.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import AssetsSection from '../../components/AssetsSection.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const isPlainAssets = computed(() => ctx.isBoursecuHomeLayout.value)
+</script>
+
+<template>
+  <AssetsSection
+    v-if="!ctx.isGaroosi.value"
+    :plain="isPlainAssets"
+    @open-gold-modal="ctx.openGoldModal"
+    @open-rial-modal="ctx.openRialModal"
+  />
+</template>
diff --git a/src/views/base/home/layouts/sections/BannersSection.vue b/src/views/base/home/layouts/sections/BannersSection.vue
new file mode 100644
index 0000000..a1e2354
--- /dev/null
+++ b/src/views/base/home/layouts/sections/BannersSection.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import BannerSlider from '../../components/BannerSlider.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <BannerSlider
+    v-if="ctx.isGaroosi.value && ctx.banners.value?.length"
+    :banners="ctx.banners.value"
+    @bannerClick="ctx.handleBannerClick"
+  />
+</template>
diff --git a/src/views/base/home/layouts/sections/BoursecuQuickActionsSection.vue b/src/views/base/home/layouts/sections/BoursecuQuickActionsSection.vue
new file mode 100644
index 0000000..3c85a30
--- /dev/null
+++ b/src/views/base/home/layouts/sections/BoursecuQuickActionsSection.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import router from '@/router'
+import HomeQuickActionBox from '../../components/HomeQuickActionBox.vue'
+import { boursecuQuickActions } from '../configs/boursecuQuickActions'
+import type { HomeQuickActionItem } from '../types'
+
+const props = withDefaults(
+  defineProps<{
+    actions?: HomeQuickActionItem[]
+  }>(),
+  {
+    actions: () => boursecuQuickActions,
+  }
+)
+
+function handleClick(action: HomeQuickActionItem) {
+  router.push(action.route)
+}
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-3 mt-4">
+    <HomeQuickActionBox
+      v-for="action in props.actions"
+      :key="action.id"
+      :action="action"
+      @click="handleClick(action)"
+    />
+  </div>
+</template>
diff --git a/src/views/base/home/layouts/sections/CurrentPriceSection.vue b/src/views/base/home/layouts/sections/CurrentPriceSection.vue
new file mode 100644
index 0000000..f27215d
--- /dev/null
+++ b/src/views/base/home/layouts/sections/CurrentPriceSection.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import CurrentPrice from '../../components/CurrentPrice.vue'
+</script>
+
+<template>
+  <CurrentPrice />
+</template>
diff --git a/src/views/base/home/layouts/sections/GaroosiAssetsSection.vue b/src/views/base/home/layouts/sections/GaroosiAssetsSection.vue
new file mode 100644
index 0000000..a36b931
--- /dev/null
+++ b/src/views/base/home/layouts/sections/GaroosiAssetsSection.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import AssetItem from '../../components/AssetItem.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const userStore = useUserStore()
+</script>
+
+<template>
+  <div v-if="ctx.isGaroosi.value" class="flex justify-between px-2 mb-2">
+    <AssetItem
+      label="دارایی طلایی:"
+      :value="`${(userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3)} گرم`"
+    />
+    <AssetItem
+      label="دارایی ریالی:"
+      :value="`${usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)} ریال`"
+    />
+  </div>
+</template>
diff --git a/src/views/base/home/layouts/sections/LimitedPriceAlertSection.vue b/src/views/base/home/layouts/sections/LimitedPriceAlertSection.vue
new file mode 100644
index 0000000..48cb9aa
--- /dev/null
+++ b/src/views/base/home/layouts/sections/LimitedPriceAlertSection.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const userStore = useUserStore()
+
+const isVisible = computed(
+  () =>
+    ctx.limitedPrice.value !== undefined &&
+    userStore.userInfo?.trade_active !== 1
+)
+</script>
+
+<template>
+  <div
+    v-if="isVisible"
+    class="text-red text-xs flex gap-1 items-center justify-center mb-2"
+  >
+    <Icon icon="vuesax-linear:info-circle" size="16" />
+    حداقل مبلغ اولیه برای ثبت سفارش
+    {{ usePriceWithoutType(Number(ctx.limitedPrice.value?.value ?? 0)) }}
+    ریال می باشد.
+  </div>
+</template>
diff --git a/src/views/base/home/layouts/sections/MainActionsSection.vue b/src/views/base/home/layouts/sections/MainActionsSection.vue
new file mode 100644
index 0000000..2572a0b
--- /dev/null
+++ b/src/views/base/home/layouts/sections/MainActionsSection.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import ActionButton from '../../components/ActionButton.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <div class="p-2 py-3 rounded-lg bg-tertiary">
+    <div class="flex justify-between">
+      <ActionButton
+        v-for="action in ctx.mainActions.value"
+        :key="action.name"
+        :action="action"
+        @click="action.handler"
+      />
+    </div>
+  </div>
+</template>
diff --git a/src/views/base/home/layouts/sections/MarketClosedSection.vue b/src/views/base/home/layouts/sections/MarketClosedSection.vue
new file mode 100644
index 0000000..6372e2c
--- /dev/null
+++ b/src/views/base/home/layouts/sections/MarketClosedSection.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import MarketClosedMessage from '../../components/MarketClosedMessage.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <MarketClosedMessage
+    v-if="ctx.showClosedMessage.value"
+    :message="ctx.closedMessage.value as string"
+  />
+</template>
diff --git a/src/views/base/home/layouts/sections/PriceChartSection.vue b/src/views/base/home/layouts/sections/PriceChartSection.vue
new file mode 100644
index 0000000..b46b54d
--- /dev/null
+++ b/src/views/base/home/layouts/sections/PriceChartSection.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed, inject, toValue } from 'vue'
+import PriceChart from '../../components/PriceChart.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const layout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
+const priceChartSeries = computed(() => toValue(ctx.priceChartSeries))
+const chartSelection = computed(() => toValue(ctx.chartSelection))
+const selectedChartMetal = computed(() => toValue(ctx.selectedChartMetal))
+</script>
+
+<template>
+  <PriceChart
+    :price-chart-series="priceChartSeries"
+    :layout="layout"
+    :chart-selection="chartSelection"
+    :selected-metal="selectedChartMetal"
+    @update-data="ctx.updateChartData"
+    @update:selected-metal="ctx.setChartMetal"
+  />
+</template>
diff --git a/src/views/base/home/layouts/sections/PriceStatsSection.vue b/src/views/base/home/layouts/sections/PriceStatsSection.vue
new file mode 100644
index 0000000..2b194c6
--- /dev/null
+++ b/src/views/base/home/layouts/sections/PriceStatsSection.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import PriceStats from '../../components/PriceStats.vue'
+import { price } from '@/utils/price'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const layout = computed(() => (ctx.isBoursecuHomeLayout.value ? 'boursecu' : 'default'))
+</script>
+
+<template>
+  <PriceStats :price="price" :layout="layout" />
+</template>
diff --git a/src/views/base/home/layouts/sections/ReferralSectionBlock.vue b/src/views/base/home/layouts/sections/ReferralSectionBlock.vue
new file mode 100644
index 0000000..8d75fa4
--- /dev/null
+++ b/src/views/base/home/layouts/sections/ReferralSectionBlock.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import ReferralSection from '../../components/ReferralSection.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <ReferralSection v-if="ctx.isGaroosi.value" />
+</template>
diff --git a/src/views/base/home/layouts/sections/index.ts b/src/views/base/home/layouts/sections/index.ts
new file mode 100644
index 0000000..fcf4562
--- /dev/null
+++ b/src/views/base/home/layouts/sections/index.ts
@@ -0,0 +1,31 @@
+import type { Component } from 'vue'
+import type { HomeSectionId } from '../types'
+import LimitedPriceAlertSection from './LimitedPriceAlertSection.vue'
+import GaroosiAssetsSection from './GaroosiAssetsSection.vue'
+import MainActionsSection from './MainActionsSection.vue'
+import BoursecuQuickActionsSection from './BoursecuQuickActionsSection.vue'
+import ReferralSectionBlock from './ReferralSectionBlock.vue'
+import AssetsSectionBlock from './AssetsSectionBlock.vue'
+import MarketClosedSection from './MarketClosedSection.vue'
+import CurrentPriceSection from './CurrentPriceSection.vue'
+import BannersSection from './BannersSection.vue'
+import PriceChartSection from './PriceChartSection.vue'
+import PriceStatsSection from './PriceStatsSection.vue'
+
+export const HOME_SECTION_COMPONENTS: Record<HomeSectionId, Component> = {
+  limitedPriceAlert: LimitedPriceAlertSection,
+  garoosiAssets: GaroosiAssetsSection,
+  mainActions: MainActionsSection,
+  boursecuQuickActions: BoursecuQuickActionsSection,
+  referral: ReferralSectionBlock,
+  assets: AssetsSectionBlock,
+  marketClosed: MarketClosedSection,
+  currentPrice: CurrentPriceSection,
+  banners: BannersSection,
+  priceChart: PriceChartSection,
+  priceStats: PriceStatsSection,
+}
+
+export function registerHomeSection(id: HomeSectionId, component: Component) {
+  HOME_SECTION_COMPONENTS[id] = component
+}
diff --git a/src/views/base/home/layouts/types.ts b/src/views/base/home/layouts/types.ts
new file mode 100644
index 0000000..28f964c
--- /dev/null
+++ b/src/views/base/home/layouts/types.ts
@@ -0,0 +1,41 @@
+/** چیدمان‌های صفحه اصلی — هر پروژه/ادمین می‌تواند یکی را انتخاب کند */
+export type HomeLayoutId = 'default' | 'boursecu'
+
+export type HomeSectionId =
+  | 'limitedPriceAlert'
+  | 'garoosiAssets'
+  | 'mainActions'
+  | 'boursecuQuickActions'
+  | 'referral'
+  | 'assets'
+  | 'marketClosed'
+  | 'currentPrice'
+  | 'banners'
+  | 'priceChart'
+  | 'priceStats'
+
+export interface HomeQuickActionItem {
+  id: string
+  label: string
+  icon: string
+  route: { name: string; query?: Record<string, string> }
+}
+
+export interface HomeLayoutSectionConfig {
+  id: HomeSectionId
+  visible?: boolean
+}
+
+export interface HomeLayoutConfig {
+  id: HomeLayoutId
+  wrapperClass?: string
+  outerSections?: HomeLayoutSectionConfig[]
+  sections: HomeLayoutSectionConfig[]
+}
+
+export interface HomeActionItem {
+  name: string
+  icon: string
+  label: string
+  handler: () => void
+}
diff --git a/src/views/base/home/mobile/MobileHomeView.vue b/src/views/base/home/mobile/MobileHomeView.vue
new file mode 100644
index 0000000..68608c4
--- /dev/null
+++ b/src/views/base/home/mobile/MobileHomeView.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="mt-10 p-5">
+    <component :is="layoutComponent" :layout-config="layoutConfig" />
+    <AppHeader @logout="$emit('logout')" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import AppHeader from '../components/AppHeader.vue'
+import {
+  getHomeLayoutConfig,
+  getHomeLayoutId,
+  resolveHomeLayoutComponent,
+} from '../layouts/registry'
+
+defineEmits<{
+  logout: []
+}>()
+
+const layoutComponent = computed(() => resolveHomeLayoutComponent())
+const layoutConfig = computed(() => getHomeLayoutConfig(getHomeLayoutId()))
+</script>
diff --git a/src/views/base/home/shell/HomePageShell.vue b/src/views/base/home/shell/HomePageShell.vue
new file mode 100644
index 0000000..2e1887d
--- /dev/null
+++ b/src/views/base/home/shell/HomePageShell.vue
@@ -0,0 +1,17 @@
+<template>
+  <!-- v-show: breakpoint switches must not destroy layouts or re-run child mount hooks -->
+  <MobileHomeView v-show="!isDesktop" @logout="$emit('logout')" />
+  <HomeDesktopView v-show="isDesktop" @logout="$emit('logout')" />
+</template>
+
+<script lang="ts" setup>
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import MobileHomeView from '../mobile/MobileHomeView.vue'
+import HomeDesktopView from '../desktop/HomeDesktopView.vue'
+
+defineEmits<{
+  logout: []
+}>()
+
+const isDesktop = useDesktopBreakpoint()
+</script>
diff --git a/src/views/base/index.vue b/src/views/base/index.vue
index 82f34f7..cdf0e24 100644
--- a/src/views/base/index.vue
+++ b/src/views/base/index.vue
@@ -1,453 +1,7 @@
 <template>
-  <div>
-    <Transition>
-      <div v-if="popVisible" class="top-0 bottom-0 bg-primary wrap-fix z-2000 opacity-60"
-           @click="popVisible = false">
-      </div>
-    </Transition>
-    <Transition name="slide-fade">
-      <div v-if="popVisible" class="wrap-fix bottom-11vh z-2000">
-        <div class="relative flex flex-col items-center ">
-          <div class="flex items-center justify-center bg-white rounded-full w-[30px] h-[30px] mb-2"
-               @click="popVisible = !popVisible">
-            <BasicIcon
-                icon="vuesax-linear:close-circle"
-            />
-          </div>
-          <div class="flex flex-col items-center gap-2">
-            <BasicButton icon-size="16" class="!font-bold w-15rem"
-                         @click="$router.push({name: 'user'}); popVisible = false">
-              <div class="flex gap-2 items-center">
-                <BasicIcon icon="vuesax-linear:user" size="16" class="absolute right-2"/>
-                <div>حساب کاربری</div>
-              </div>
-            </BasicButton>
-            <BasicButton icon-size="16" class="!font-bold w-15rem"
-                         @click="$router.push({name: 'notifyTrigger'}); popVisible = false">
-              <div class="flex gap-2 items-center">
-                <BasicIcon icon="vuesax-linear:bill" size="16" class="absolute right-2"/>
-                <div>هشدار قیمت</div>
-              </div>
-            </BasicButton>
-            <BasicButton icon-size="16" class="!font-bold w-15rem"
-                         @click="$router.push({name: 'about'}); popVisible = false">
-              <div class="flex gap-2 items-center">
-                <BasicIcon icon="vuesax-linear:info-circle" size="16" class="absolute right-2"/>
-                <div>درباره ما</div>
-              </div>
-            </BasicButton>
-            <!--            <BasicButton icon-size="16" class="!font-bold w-15rem"-->
-            <!--                         @click="$router.push({name: 'physicalReceive'}); popVisible = false">-->
-            <!--              <div class="flex gap-2 items-center">-->
-            <!--                <BasicIcon icon="vuesax-linear:direct-inbox" size="16" class="absolute right-2" />-->
-            <!--                <div>دریافت طلای فیزیکی</div>-->
-            <!--              </div>-->
-            <!--            </BasicButton>-->
-            <BasicButton icon-size="16" class="!font-bold w-15rem"
-                         @click="$router.push({name: 'rules'}); popVisible = false">
-              <div class="flex gap-2 items-center">
-                <BasicIcon icon="vuesax-linear:task" size="16" class="absolute right-2"/>
-                <div>قوانین و مقررات</div>
-              </div>
-            </BasicButton>
-            <BasicButton icon-size="16" class="!font-bold w-15rem"
-                         @click="$router.push({name: 'giftCard'}); popVisible = false">
-              <div class="flex gap-2 items-center">
-                <BasicIcon icon="vuesax-linear:gift" size="16" class="absolute right-2"/>
-                <div>ثبت کارت هدیه</div>
-              </div>
-            </BasicButton>
-            <!--            <BasicButton icon-size="16" class="!font-bold w-50vw md:w-full"
-                                     @click="$router.push({name: 'permissions'}); popVisible = false">
-                          <div class="flex gap-2 items-center">
-                            <BasicIcon icon="vuesax-linear:archive-book" size="16" class="absolute right-2" />
-                            <div>مجوز ها</div>
-                          </div>
-                        </BasicButton>-->
-            <!--            <BasicButton icon-size="16" class="!font-bold w-50vw md:w-full"
-                                     @click="$router.push({name: 'earnMoney'}); popVisible = false">
-                          <div class="flex gap-2 items-center">
-                            <BasicIcon icon="vuesax-linear:dollar-circle" size="16" class="absolute right-2" />
-                            <div>کسب درآمد</div>
-                          </div>
-                        </BasicButton>-->
-          </div>
-        </div>
-      </div>
-    </Transition>
-    <div :class="['main-with-bottom-chrome', {'main-with-bottom-chrome--no-nav': hideMenu}]">
-      <router-view v-slot="{ Component, route }">
-        <!-- Use any custom transition and  to `fade` -->
-        <transition :name="route.meta.transition || 'fade'">
-          <component :is="Component" class="main-with-bottom-chrome-inner"/>
-        </transition>
-      </router-view>
-    </div>
-    <!--      <canvas ref="canvas" id="canvas1" width="400" height="80" class="w-full"></canvas>-->
-    <div v-if="!hideMenu" class="bottom-appbar w-auto mx-auto bg-white">
-      <div class="tabs bottom-0">
-        <div :class="setNavColor('home')" class="tab" @click="setRoute('home')">
-          <Icon icon="vuesax-linear:home"/>
-          <div class="text-xs mt-1 font-bold">صفحه اصلی</div>
-        </div>
-        <div :class="setNavColor('transactions')" class="tab" @click="setRoute('transactions')">
-          <Icon icon="vuesax-linear:receipt-item"/>
-          <div class="text-xs mt-1 font-bold">گزارش</div>
-        </div>
-        <div class="main_in" @click="setRoute('buyProduct')">
-          <div
-            class="circle_in"
-            :class="isBoursecuNavLogo
-              ? 'is-boursecu-nav-logo'
-              : isWhiteNavLogo
-                ? 'is-white-nav-logo'
-                : 'text-white'"
-          >
-            <div class="circle_into" @click="popVisible = !popVisible">
-              <div v-if="getConfigApp('name')=='garoosi'"
-                   class="p-2 text-tertiary flex flex-col justify-center items-center"
-              >
-                <icon icon="vuesax-linear:coin"/>
-                <div class="text-[9px] font-bold">
-                  محصولات
-                </div>
-              </div>
-
-              <img v-else
-                   :class="isBoursecuNavLogo ? 'p-1' : 'p-2'"
-                   :src="getProjectNavLogo(config.config?.avatar)"
-              />
-            </div>
-            <!--           <div class="flex justify-center">خرید </div>
-                       <div class="flex justify-center">محصول </div>-->
-          </div>
-        </div>
-        <!--        <div :class="setNavColor('buyProduct')" class="tab" @click="setRoute('buyProduct')">
-                  <Icon icon="vuesax-linear:coin" />
-                  <div class="text-xs mt-1 font-bold">خرید محصول</div>
-                </div>-->
-        <div :class="setNavColor('wallet')" class="tab" @click="setRoute('wallet')">
-          <Icon icon="vuesax-linear:wallet-1"/>
-          <div class="text-xs mt-1 font-bold">کیف پول</div>
-        </div>
-        <div :class="setNavColor('setting')" class="tab" @click="setRoute('user')">
-          <Icon icon="vuesax-linear:setting-2"/>
-          <div class="text-xs mt-1 font-bold">تنظیمات</div>
-        </div>
-      </div>
-
-      <div class="main">
-        <div class="circle">
-
-        </div>
-      </div>
-
-    </div>
-
-  </div>
+  <AppLayoutShell />
 </template>
 
 <script lang="ts" setup>
-import {computed, ref} from 'vue'
-import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import type {Transaction} from '@/models/transaction'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import {useConfigStore} from "@/store/configStore";
-import {getConfigApp, getProjectNavLogo, isBoursecuProject} from "@/utils/config";
-
-/*onMounted(async () => {
-  const c = await document.getElementById("canvas1");
-  const ctx = c.getContext("2d");
-  console.log(ctx)
-  ctx.beginPath();
-  ctx.moveTo(0,20);
-  ctx.lineTo(165,20)
-  ctx.arc(200, 50, 45, 3.9, 5.5, false);
-  ctx.lineTo(400,20)
-  ctx.stroke();
-})*/
-const currentRoute = computed(() => router.currentRoute.value.name)
-const hideMenu = computed(() => !!router.currentRoute.value.meta.hideMenu)
-const config = useConfigStore()
-const popVisible = ref(false)
-const whiteNavLogoProjects = ['goldenramin']
-const isWhiteNavLogo = computed(() => whiteNavLogoProjects.includes(getConfigApp('name')))
-const isBoursecuNavLogo = computed(() => isBoursecuProject())
-
-function setNavColor(val: string) {
-  if (currentRoute.value === val) {
-    return 'text-primary'
-  } else {
-    return 'text-gray-400'
-  }
-}
-
-function setRoute(val: string) {
-  popVisible.value = false
-  router.push({name: val})
-}
-
+import AppLayoutShell from '@/layouts/AppLayoutShell.vue'
 </script>
-
-
-<style lang="less">
-
-.bottom-appbar {
-  z-index: 5000;
-  height: 80px;
-  position: fixed;
-  display: flex;
-  justify-content: space-evenly;
-  background: #fff;
-  /* دقیقاً بالای نوار اعتبار App.vue (متغیر --app-credit-footer-offset) */
-  bottom: var(--app-credit-footer-offset, 28px);
-  right: 0;
-  left: 0;
-  @media screen and (min-width: 426px) {
-    width: 426px;
-    margin: 0 auto;
-  }
-
-  .tabs {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    background: #fff;
-    justify-content: space-between;
-    position: absolute;
-    bottom: 0;
-    z-index: 400;
-    //border: 1px dashed primary;
-    box-shadow: 0px -2px 4px -2px #0000001A;
-
-    .tab {
-      width: 80px;
-      text-align: center;
-      flex-flow: column;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      align-content: center;
-    }
-
-    .main_in {
-      width: 70px;
-      height: 70px;
-      flex-shrink: 0;
-      align-self: center;
-
-      .circle_in {
-        margin-top: -10px;
-        border-radius: 50%;
-        width: 70px;
-        height: 70px;
-        flex-shrink: 0;
-        z-index: 20;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        flex-wrap: wrap;
-        background-color: @App-primary-color;
-
-        .circle_into {
-          overflow: hidden;
-        @apply bg-primary;
-          border-radius: 50%;
-          width: 56px;
-          height: 56px;
-          flex-shrink: 0;
-          display: flex;
-          justify-content: center;
-          align-content: center;
-          flex-wrap: wrap;
-          border: white 1px solid;
-        }
-
-        .circle_into img {
-          width: 100%;
-          height: 100%;
-          object-fit: cover;
-        }
-
-      }
-    }
-
-    /* goldenramin: فقط دایرهٔ داخلی سفید؛ حلقهٔ بیرونی همان primary می‌ماند */
-    .circle_in.is-white-nav-logo {
-      .circle_into {
-        background: #fff !important;
-        border-color: rgba(0, 0, 0, 0.08);
-      }
-    }
-
-    /* boursecu: هر دو دایره با رنگ برند */
-    .circle_in.is-boursecu-nav-logo {
-      background-color: #133050 !important;
-
-      .circle_into {
-        background: #133050 !important;
-        border-color: #fff;
-
-        img {
-          object-fit: contain;
-        }
-      }
-    }
-  }
-
-  .main {
-    height: 70px;
-    width: 70px;
-    position: relative;
-
-    .circle {
-      border-radius: 50%;
-      height: 70px;
-      width: 70px;
-      z-index: 20;
-      //border: 1px dashed primary;
-      box-shadow: 0px -5px 4px -2px #0000001A;
-      position: absolute;
-    }
-  }
-}
-
-/*.wrapper{
-  max-width: 400px;
-  margin: 0px auto;
-}
-.page{
-  width: 100vw;
-  height: 100vh;
-  padding: 20px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  img{
-    max-width: 60%;
-    height: auto;
-    display: block;
-  }
-}
-.bottom-appbar {
-  height: 70px;
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  .tabs {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    .tab {
-      &--left {
-        width: 100%;
-        border-top-right-radius: 30px;
-        border-top: 1px solid rgba(167, 161, 161, 0.69);
-        box-shadow: 0px 6px 7px 0px rgba(23, 23, 23, 0.28);
-      }
-      &--right {
-        width: 100%;
-        border-top-left-radius: 30px;
-        border-top: 1px solid rgba(167, 161, 161, 0.69);
-        box-shadow: 15px 4px 15px 0px rgba(23, 23, 23, 0.28);
-      }
-      &--fab {
-        width: 180px;
-        height: 100%;
-        background: transparent;
-        border: none;
-        display: flex;
-
-        .top {
-          width: 100%;
-          height: 50%;
-          border-bottom-left-radius: 100px;
-          border-bottom-right-radius: 100px;
-          background-color: transparent;
-          box-shadow: 0px 30px 0px 25px #fff;
-          border-bottom: 1px solid rgba(167, 161, 161, 0.69);
-          display: flex;
-        }
-      }
-      background-color: #fff;
-      width: 33.4%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex-direction: column;
-      border-top: 1px solid #eee;
-      box-shadow: 1x 1x 3px #ccc, -1px -1px 3px #ccc;
-      font-size: 24px;
-      span {
-        font-size: 12px;
-      }
-      i {
-        font-size: 24px;
-      }
-      &.is-active {
-        color: #fd9d97;
-      }
-    }
-    .fab {
-      border-radius: 50%;
-      background-color: #fe989c;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 70px;
-      height: 70px;
-      font-weight: bold;
-      font-size: 22px;
-      color: #fff;
-      position: relative;
-      justify-content: center;
-      transform: translate(2px,-60%);
-    }
-  }
-}*/
-
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-
-.slide-fade-enter-active {
-  transition: all 0.3s ease-out;
-}
-
-.slide-fade-leave-active {
-  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
-}
-
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateX(20px);
-  opacity: 0;
-}
-
-.main-with-bottom-chrome {
-  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
-}
-
-.main-with-bottom-chrome-inner {
-  height: calc(100vh - 72px - var(--app-credit-footer-offset, 28px));
-}
-
-.main-with-bottom-chrome--no-nav,
-.main-with-bottom-chrome--no-nav .main-with-bottom-chrome-inner {
-  height: calc(100vh - var(--app-credit-footer-offset, 28px));
-}
-</style>
\ No newline at end of file
diff --git a/src/views/base/physicalReceive/components/NewRequest.vue b/src/views/base/physicalReceive/components/NewRequest.vue
index 8ba6de5..6f560ae 100644
--- a/src/views/base/physicalReceive/components/NewRequest.vue
+++ b/src/views/base/physicalReceive/components/NewRequest.vue
@@ -1,224 +1,14 @@
 <template>
-  <div>
-    <div ref="el" class="px-3 pt-15"
-    >
-      <div class="flex gap-2">
-        <BasicSelect v-model:value="selectedProduct" :items="items"
-                     class="w-full"
-                     key-name="id"
-                     :show-search="false"
-                     value-name="title"
-                     size="large"
-                     placeholder="لطفا محصول را انتخاب کنید"
-                     :has-tooltip="false"/>
-        <BasicButton :disabled-b="selectedProduct==null"  type="primary" @click="handleAdd">افزودن</BasicButton>
-      </div>
-      <div class="h-70vh rounded-lg bg-white mt-2 border-gray-200 border-1 overflow-y-auto p-2">
-        <div v-for="(val,index) in selectedProducts" class="rounded-lg p-2 bg-gray-100 mb-2">
-          <div class="flex">
-            <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2">
-              <img v-if="val.product.group_type=='گوی'" :src="goyImg">
-              <img v-if="val.product.group_type=='مکعب'" :src="mokaabImg">
-              <img v-if="val.product.group_type=='سکه'" :src="sekkeImg">
-              <img v-if="val.product.group_type=='مس'" :src="mesImg">
-              <img v-if="val.product.group_type=='نقره'" :src="noghrehImg">
-            </div>
-            <div class="w-full">
-              <div class="flex justify-between">
-                <div class="font-bold text-lg">
-                  {{ val.product.title }}
-                </div>
-                <BasicButton icon="vuesax-linear:trash" icon-class="text-red" @click="handleRemove(val.product.id)"/>
-              </div>
-              <div class="flex mt-3 justify-between items-center">
-                <div>تعداد موجودی:</div>
-                <div class="flex flex-col items-end gap-0.5">
-                  <div class="flex gap-1 items-center">
-                    <div class="font-bold">{{ val.product.wallet.gold }}</div>
-                    <div>{{ getProductQuantityUnit(val.product) }}</div>
-                  </div>
-                  <div v-if="getProductUnitWeightLabel(val.product)" class="text-xs text-gray-500">
-                    هر عدد {{ getProductUnitWeightLabel(val.product) }}
-                  </div>
-                </div>
-              </div>
-              <div class="flex justify-between items-center mt-2">
-                <div>تعداد درخواستی:</div>
-                <div class="flex gap-1 items-center w-40%">
-                  <BasicInput v-model:value="val.count" :addon-before="getProductQuantityUnit(val.product)"/>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <BasicButton :disabled-b="selectedProducts.length==0" class="w-full absolute bottom-10 mt-2"
-                   @click="handelFirstSubmit()">ثبت
-      </BasicButton>
-    </div>
-    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
-  </div>
-  <BasicActionSheet v-model:show="showAddress">
-    <div class="h-120 flex flex-col ">
-      <div class="text-center">
-        انتخاب آدرس
-      </div>
-      <div class="overflow-y-scroll h-85">
-        <ARadioGroup v-model:value="selectedAddressID">
-          <div class="flex flex-col  ">
-            <div class="text-base  rounded-lg  p-4 m-2   shadow-md font-medium" v-for="item in address">
-              <ARadio :value="item.id">{{ item.province }} / {{ item.city }} / {{ item.address }}</ARadio>
-            </div>
-          </div>
-        </ARadioGroup>
-      </div>
-      <div class="flex gap-2 pt-2">
-
-        <BasicButton class=" "  @click="showAddress=false;addAddressVisible=true">افزودن آدرس +</BasicButton>
-        <BasicButton class="w-2/3 " type="primary" @click="handelsubmit">ثبت نهایی</BasicButton>
-      </div>
-
-    </div>
-
-  </BasicActionSheet>
-  <BasicActionSheet v-model:show="addAddressVisible" >
-    <div class="   ">
-      <New_EditAddress @onOk="handleAddress"></New_EditAddress>
-    </div>
-
-  </BasicActionSheet>
+  <MobileNewRequestView v-show="!isDesktop" />
+  <DesktopNewRequestView v-show="isDesktop" />
 </template>
 
 <script lang="ts" setup>
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
-import {onMounted, ref} from 'vue'
-import {loading} from '@/utils'
-import {getProductInventory} from '@/api/products'
-import type {CountPInventory, PInventory} from '@/models/products'
-import goyImg from '@/assets/img/goyImg.svg'
-import mokaabImg from '@/assets/img/mokaabImg.svg'
-import sekkeImg from '@/assets/img/sekkeImg.svg'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import {cloneDeep} from 'lodash'
-import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue"
-import {tableAddress} from "@/api/address"
-import type {Address} from "@/models/address"
-import {physicalReceiveApi} from "@/api/physicalreceive"
-import {message} from "ant-design-vue"
-import New_EditAddress from "@/views/base/address/components/New_EditAddress.vue"
-import mesImg from "@/assets/img/mesImg.jpg";
-import noghrehImg from "@/assets/img/noghrehImg.webp";
-import { getProductQuantityUnit, getProductUnitWeightLabel } from '@/utils/productDealMethod'
-
-const items = ref<PInventory[]>()
-const baseItems = ref<PInventory[]>()
-const selectedAddressID = ref<number>()
-const selectedProduct = ref<number>()
-const productsByWalletId = ref<Array>([])
-const address = ref<Address>()
-const selectedProducts = ref<CountPInventory[]>([])
-const showAddress = ref<boolean>(false)
-const addAddressVisible = ref<boolean>(false)
-
-function handleAdd() {
-  console.log(selectedProducts.value)
-  selectedProducts.value?.push({
-    count: 0,
-    product: items.value?.find(x => x.id === selectedProduct.value)
-  })
-  items.value?.splice(items.value?.findIndex(x => x.id === selectedProduct.value), 1)
-  selectedProduct.value = undefined
-}
-function handleAddress() {
-    getAddress()
-    addAddressVisible.value = false
-    showAddress.value = true
-}
-
-function handleRemove(id: number) {
-  const findItem = baseItems.value?.find(x => x.id === id)
-  console.log(baseItems.value, id)
-  if (findItem) {
-    items.value?.push(findItem)
-  }
-  selectedProducts.value?.splice(selectedProducts.value?.findIndex(x => x.product.id === id), 1)
-}
-
-async function initProductWallet() {
-  try {
-    loading.value = true
-    items.value = (await getProductInventory()).rows
-    baseItems.value = cloneDeep(items.value)
-    console.log('baseItems.value',baseItems.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-async function handelFirstSubmit() {
-  try {
-    const zeroAmount = selectedProducts.value.map(item => item.count <= 0)
-    if (zeroAmount.includes(true)) {
-      message.error(`لطفاً تعداد درخواستی محصول را وارد کنید.`)
-    }
-    else {
-      showAddress.value = true
-    }
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-async function handelsubmit() {
-  try {
-      loading.value = true
-      productsByWalletId.value = selectedProducts.value.map((val) => {
-        return {
-          wallet_id: val.product.wallet.id,
-          value: val.count
-        }
-      })
-      await physicalReceiveApi({
-            address_id: selectedAddressID.value,
-            wallets: productsByWalletId.value
-          }
-      )
-      await initProductWallet()
-      message.success("درخواست شما با موفقیت ارسال شد")
-      selectedProducts.value = []
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    showAddress.value = false
-  }
-}
-
-onMounted(async () => {
-  await initProductWallet()
-  await getAddress()
-})
-async function getAddress(){
-  let {rows} = await tableAddress({page: 0, limit: 150})
-  address.value = rows
-}
+import { useNewPhysicalRequestPage } from '../composables/useNewPhysicalRequestPage'
+import { usePhysicalReceiveShellContext } from '../composables/usePhysicalReceiveShell'
+import DesktopNewRequestView from '../desktop/DesktopNewRequestView.vue'
+import MobileNewRequestView from '../mobile/MobileNewRequestView.vue'
 
+const { isDesktop } = usePhysicalReceiveShellContext()
+useNewPhysicalRequestPage()
 </script>
-
-<style scoped>
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
-</style>
diff --git a/src/views/base/physicalReceive/components/PhysicalReceiveAddressPicker.vue b/src/views/base/physicalReceive/components/PhysicalReceiveAddressPicker.vue
new file mode 100644
index 0000000..3f7b8ad
--- /dev/null
+++ b/src/views/base/physicalReceive/components/PhysicalReceiveAddressPicker.vue
@@ -0,0 +1,51 @@
+<template>
+  <div :class="variant === 'desktop' ? 'dpr-address-picker dpr-address-picker--desktop' : 'h-120 flex flex-col'">
+    <div v-if="variant !== 'desktop'" class="text-center">انتخاب آدرس</div>
+    <div :class="variant === 'desktop' ? 'dpr-address-picker__list' : 'overflow-y-scroll h-85'">
+      <ARadioGroup v-model:value="selectedAddressID">
+        <div class="flex flex-col">
+          <div
+            v-for="addr in addresses"
+            :key="addr.id"
+            :class="variant === 'desktop' ? 'dpr-address-picker__item' : 'text-base rounded-lg p-4 m-2 shadow-md font-medium'"
+          >
+            <ARadio :value="addr.id">
+              {{ addr.province }} / {{ addr.city }} / {{ addr.address }}
+            </ARadio>
+          </div>
+        </div>
+      </ARadioGroup>
+    </div>
+    <div :class="variant === 'desktop' ? 'dpr-address-picker__actions' : 'flex gap-2 pt-2'">
+      <BasicButton @click="emit('addAddress')">افزودن آدرس +</BasicButton>
+      <BasicButton
+        :class="variant === 'desktop' ? '' : 'w-2/3'"
+        type="primary"
+        @click="emit('submit')"
+      >
+        ثبت نهایی
+      </BasicButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import type { Address } from '@/models/address'
+
+interface Props {
+  addresses?: Address[]
+  variant?: 'mobile' | 'desktop'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'mobile',
+})
+
+const selectedAddressID = defineModel<number | undefined>('selectedAddressID')
+
+const emit = defineEmits<{
+  addAddress: []
+  submit: []
+}>()
+</script>
diff --git a/src/views/base/physicalReceive/components/PhysicalReceiveCartRow.vue b/src/views/base/physicalReceive/components/PhysicalReceiveCartRow.vue
new file mode 100644
index 0000000..478ae3a
--- /dev/null
+++ b/src/views/base/physicalReceive/components/PhysicalReceiveCartRow.vue
@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <div class="flex">
+      <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2 shrink-0">
+        <img v-if="item.product.group_type == 'گوی'" :src="goyImg" alt="" />
+        <img v-if="item.product.group_type == 'مکعب'" :src="mokaabImg" alt="" />
+        <img v-if="item.product.group_type == 'سکه'" :src="sekkeImg" alt="" />
+        <img v-if="item.product.group_type == 'مس'" :src="mesImg" alt="" />
+        <img v-if="item.product.group_type == 'نقره'" :src="noghrehImg" alt="" />
+      </div>
+      <div class="w-full min-w-0">
+        <div class="flex justify-between gap-2">
+          <div class="font-bold text-lg truncate">{{ item.product.title }}</div>
+          <BasicButton
+            icon="vuesax-linear:trash"
+            icon-class="text-red"
+            @click="emit('remove', item.product.id)"
+          />
+        </div>
+        <div class="flex mt-3 justify-between items-center">
+          <div>تعداد موجودی:</div>
+          <div class="flex flex-col items-end gap-0.5">
+            <div class="flex gap-1 items-center">
+              <div class="font-bold">{{ item.product.wallet.gold }}</div>
+              <div>{{ getProductQuantityUnit(item.product) }}</div>
+            </div>
+            <div v-if="getProductUnitWeightLabel(item.product)" class="text-xs text-gray-500">
+              هر عدد {{ getProductUnitWeightLabel(item.product) }}
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-between items-center mt-2 gap-2">
+          <div>تعداد درخواستی:</div>
+          <div
+            class="flex gap-1 items-center"
+            :class="variant === 'desktop' ? 'dpr-cart-row__input' : 'w-40%'"
+          >
+            <BasicInput
+              v-model:value="item.count"
+              :addon-before="getProductQuantityUnit(item.product)"
+              :addon-bg-color="config.config?.color"
+              addon-text-color="white"
+              :size="variant === 'desktop' ? 'large' : undefined"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import { useConfigStore } from '@/store/configStore'
+import type { CountPInventory } from '@/models/products'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
+import sekkeImg from '@/assets/img/sekkeImg.svg'
+import mesImg from '@/assets/img/mesImg.jpg'
+import noghrehImg from '@/assets/img/noghrehImg.webp'
+import { getProductQuantityUnit, getProductUnitWeightLabel } from '@/utils/productDealMethod'
+
+interface Props {
+  item: CountPInventory
+  variant?: 'mobile' | 'desktop'
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'mobile',
+})
+
+const config = useConfigStore()
+
+const emit = defineEmits<{
+  remove: [id: number]
+}>()
+</script>
diff --git a/src/views/base/physicalReceive/components/RequestItem.vue b/src/views/base/physicalReceive/components/RequestItem.vue
index 6e33dce..1874b4f 100644
--- a/src/views/base/physicalReceive/components/RequestItem.vue
+++ b/src/views/base/physicalReceive/components/RequestItem.vue
@@ -1,26 +1,33 @@
 <template>
-  <div class="rounded-lg shadow-md mx-2  bg-gradient-to-l   from-primary rounded-lg p-[2px]  to-transparent ">
-    <div class="rounded-lg flex flex-col gap-2  bg-white p-2 ">
-      <div class="flex justify-between  ">
+  <div
+    class="rounded-lg shadow-md mx-2 bg-gradient-to-l from-primary rounded-lg p-[2px] to-transparent"
+    :class="{ 'dpr-item': variant === 'desktop' }"
+  >
+    <div class="rounded-lg flex flex-col gap-2 bg-white p-2">
+      <div class="flex justify-between">
         <div class="font-bold">شماره سند: {{ props.item.id }}</div>
         <div class="font-bold">{{ toJalali(props.item.created_at) }}</div>
       </div>
       <div class="flex justify-between">
-
-        <div class="flex flex-col w-full gap-1 ">
-          <div class="w-full flex justify-between" v-for="item in props.item.transaction">
-            <div class="flex items-center gap-1  ">
-              <div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100 ">
-                <img width="30"  class="p-1" :src="item.product.group_type=='گوی'?goyImg:mokaabImg">
+        <div class="flex flex-col w-full gap-1">
+          <div
+            v-for="tx in props.item.transaction"
+            :key="tx.id ?? tx.title"
+            class="w-full flex justify-between"
+          >
+            <div class="flex items-center gap-1">
+              <div class="w-7 h-7 flex justify-center rounded-lg bg-gray-100">
+                <img
+                  width="30"
+                  class="p-1"
+                  :src="tx.product.group_type == 'گوی' ? goyImg : mokaabImg"
+                  alt=""
+                />
               </div>
-              <div>{{ item.title }}</div>
-
-
-
+              <div>{{ tx.title }}</div>
             </div>
-            <div>{{ item.gold * -1 }} عدد</div>
+            <div>{{ tx.gold * -1 }} عدد</div>
           </div>
-
         </div>
       </div>
       <div class="flex justify-between">
@@ -28,30 +35,30 @@
         <ATag color="blue" class="!py-1 !px-2 !ml-0">
           {{ props.item.sts_str }}
         </ATag>
-
       </div>
-      <ADivider class="!m-1"></ADivider>
+      <ADivider class="!m-1" />
       <div class="flex flex-col justify-between">
         <div class="font-bold">آدرس:</div>
-        <div>{{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}</div>
+        <div>
+          {{ props.item.address.province }}/{{ props.item.address.city }}/{{ props.item.address.address }}
+        </div>
       </div>
     </div>
-
   </div>
 </template>
 
 <script setup lang="ts">
-import type {Physicalreceive} from "@/models/physicalreceive";
-import {toJalali} from "../../../../utils/useDateTime";
-import goyImg from "@/assets/img/goyImg.svg"
-import mokaabImg from "@/assets/img/mokaabImg.svg"
+import type { Physicalreceive } from '@/models/physicalreceive'
+import { toJalali } from '@/utils/useDateTime'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
 
 interface Prop {
   item: Physicalreceive
+  variant?: 'mobile' | 'desktop'
 }
 
-const props = withDefaults(defineProps<Prop>(), {})</script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+const props = withDefaults(defineProps<Prop>(), {
+  variant: 'mobile',
+})
+</script>
diff --git a/src/views/base/physicalReceive/components/RequestList.vue b/src/views/base/physicalReceive/components/RequestList.vue
index c3557b1..12ee934 100644
--- a/src/views/base/physicalReceive/components/RequestList.vue
+++ b/src/views/base/physicalReceive/components/RequestList.vue
@@ -1,36 +1,14 @@
 <template>
-  <div>
-    <div class="flex flex-col gap-4 pt-13 px-2 pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
-      <RequestItem v-for="item in requestItems" :item="item"></RequestItem>
-    </div>
-    <Teleport to="body">
-      <div class="add-request app-dock-add-bar" @click="openAdd()">
-        <div>افزودن درخواست جدید</div>
-        <BasicIcon icon="vuesax-linear:add" />
-      </div>
-    </Teleport>
-  </div>
+  <MobileRequestListView v-show="!isDesktop" />
+  <DesktopRequestListView v-show="isDesktop" />
 </template>
 
 <script setup lang="ts">
-import {onMounted, ref} from "vue";
-import {getPhysicalReceiveList} from "@/api/physicalreceive";
-import type {Physicalreceive} from "@/models/physicalreceive";
-import RequestItem from "@/views/base/physicalReceive/components/RequestItem.vue";
-import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
-import router from "@/router";
+import { usePhysicalReceiveList } from '../composables/usePhysicalReceiveList'
+import { usePhysicalReceiveShellContext } from '../composables/usePhysicalReceiveShell'
+import DesktopRequestListView from '../desktop/DesktopRequestListView.vue'
+import MobileRequestListView from '../mobile/MobileRequestListView.vue'
 
-const requestItems = ref<Physicalreceive[]>([])
-const openAdd = () => {
-  router.push('physicalReceive/new')
-}
-onMounted(async () => {
-  let {rows} = await getPhysicalReceiveList()
-  requestItems.value = rows
-  console.log(rows)
-})
+const { isDesktop } = usePhysicalReceiveShellContext()
+usePhysicalReceiveList()
 </script>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/views/base/physicalReceive/composables/useNewPhysicalRequestPage.ts b/src/views/base/physicalReceive/composables/useNewPhysicalRequestPage.ts
new file mode 100644
index 0000000..9cdf1af
--- /dev/null
+++ b/src/views/base/physicalReceive/composables/useNewPhysicalRequestPage.ts
@@ -0,0 +1,153 @@
+import { inject, onMounted, provide, ref, type InjectionKey, type Ref } from 'vue'
+import { cloneDeep } from 'lodash'
+import { message } from 'ant-design-vue'
+import { getProductInventory } from '@/api/products'
+import { physicalReceiveApi } from '@/api/physicalreceive'
+import { tableAddress } from '@/api/address'
+import type { CountPInventory, PInventory } from '@/models/products'
+import type { Address } from '@/models/address'
+import { loading } from '@/utils'
+import { usePhysicalReceiveShellContext } from './usePhysicalReceiveShell'
+
+export interface NewPhysicalRequestContext {
+  isDesktop: Ref<boolean>
+  items: Ref<PInventory[] | undefined>
+  selectedProduct: Ref<number | undefined>
+  selectedProducts: Ref<CountPInventory[]>
+  address: Ref<Address[] | undefined>
+  selectedAddressID: Ref<number | undefined>
+  showAddress: Ref<boolean>
+  addAddressVisible: Ref<boolean>
+  handleAdd: () => void
+  handleRemove: (id: number) => void
+  handelFirstSubmit: () => Promise<void>
+  handelsubmit: () => Promise<void>
+  handleAddress: () => void
+}
+
+export const NEW_PHYSICAL_REQUEST_KEY: InjectionKey<NewPhysicalRequestContext> =
+  Symbol('newPhysicalRequest')
+
+export function useNewPhysicalRequestPage() {
+  const { isDesktop } = usePhysicalReceiveShellContext()
+
+  const items = ref<PInventory[]>()
+  const baseItems = ref<PInventory[]>()
+  const selectedAddressID = ref<number>()
+  const selectedProduct = ref<number>()
+  const productsByWalletId = ref<Array<{ wallet_id: number; value: number }>>([])
+  const address = ref<Address[]>()
+  const selectedProducts = ref<CountPInventory[]>([])
+  const showAddress = ref(false)
+  const addAddressVisible = ref(false)
+
+  function handleAdd() {
+    selectedProducts.value?.push({
+      count: 0,
+      product: items.value?.find((x) => x.id === selectedProduct.value)!,
+    })
+    items.value?.splice(items.value?.findIndex((x) => x.id === selectedProduct.value)!, 1)
+    selectedProduct.value = undefined
+  }
+
+  function handleAddress() {
+    getAddress()
+    addAddressVisible.value = false
+    showAddress.value = true
+  }
+
+  function handleRemove(id: number) {
+    const findItem = baseItems.value?.find((x) => x.id === id)
+    if (findItem) {
+      items.value?.push(findItem)
+    }
+    selectedProducts.value?.splice(
+      selectedProducts.value?.findIndex((x) => x.product.id === id),
+      1
+    )
+  }
+
+  async function initProductWallet() {
+    try {
+      loading.value = true
+      items.value = (await getProductInventory()).rows
+      baseItems.value = cloneDeep(items.value)
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function handelFirstSubmit() {
+    try {
+      const zeroAmount = selectedProducts.value.map((item) => item.count <= 0)
+      if (zeroAmount.includes(true)) {
+        message.error('لطفاً تعداد درخواستی محصول را وارد کنید.')
+      } else {
+        showAddress.value = true
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
+  async function handelsubmit() {
+    try {
+      loading.value = true
+      productsByWalletId.value = selectedProducts.value.map((val) => ({
+        wallet_id: val.product.wallet.id,
+        value: val.count,
+      }))
+      await physicalReceiveApi({
+        address_id: selectedAddressID.value,
+        wallets: productsByWalletId.value,
+      })
+      await initProductWallet()
+      message.success('درخواست شما با موفقیت ارسال شد')
+      selectedProducts.value = []
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+      showAddress.value = false
+    }
+  }
+
+  async function getAddress() {
+    const { rows } = await tableAddress({ page: 0, limit: 150 })
+    address.value = rows
+  }
+
+  onMounted(async () => {
+    await initProductWallet()
+    await getAddress()
+  })
+
+  const context: NewPhysicalRequestContext = {
+    isDesktop,
+    items,
+    selectedProduct,
+    selectedProducts,
+    address,
+    selectedAddressID,
+    showAddress,
+    addAddressVisible,
+    handleAdd,
+    handleRemove,
+    handelFirstSubmit,
+    handelsubmit,
+    handleAddress,
+  }
+
+  provide(NEW_PHYSICAL_REQUEST_KEY, context)
+  return context
+}
+
+export function useNewPhysicalRequestContext() {
+  const context = inject(NEW_PHYSICAL_REQUEST_KEY)
+  if (!context) {
+    throw new Error('useNewPhysicalRequestContext must be used within useNewPhysicalRequestPage')
+  }
+  return context
+}
diff --git a/src/views/base/physicalReceive/composables/usePhysicalReceiveList.ts b/src/views/base/physicalReceive/composables/usePhysicalReceiveList.ts
new file mode 100644
index 0000000..de296e0
--- /dev/null
+++ b/src/views/base/physicalReceive/composables/usePhysicalReceiveList.ts
@@ -0,0 +1,37 @@
+import { inject, onMounted, provide, ref, type InjectionKey, type Ref } from 'vue'
+import { getPhysicalReceiveList } from '@/api/physicalreceive'
+import type { Physicalreceive } from '@/models/physicalreceive'
+import router from '@/router'
+
+export interface PhysicalReceiveListContext {
+  requestItems: Ref<Physicalreceive[]>
+  openAdd: () => void
+}
+
+export const PHYSICAL_RECEIVE_LIST_KEY: InjectionKey<PhysicalReceiveListContext> =
+  Symbol('physicalReceiveList')
+
+export function usePhysicalReceiveList() {
+  const requestItems = ref<Physicalreceive[]>([])
+
+  function openAdd() {
+    router.push('physicalReceive/new')
+  }
+
+  onMounted(async () => {
+    const { rows } = await getPhysicalReceiveList()
+    requestItems.value = rows
+  })
+
+  const context: PhysicalReceiveListContext = { requestItems, openAdd }
+  provide(PHYSICAL_RECEIVE_LIST_KEY, context)
+  return context
+}
+
+export function usePhysicalReceiveListContext() {
+  const context = inject(PHYSICAL_RECEIVE_LIST_KEY)
+  if (!context) {
+    throw new Error('usePhysicalReceiveListContext must be used within usePhysicalReceiveList')
+  }
+  return context
+}
diff --git a/src/views/base/physicalReceive/composables/usePhysicalReceiveShell.ts b/src/views/base/physicalReceive/composables/usePhysicalReceiveShell.ts
new file mode 100644
index 0000000..9ff147f
--- /dev/null
+++ b/src/views/base/physicalReceive/composables/usePhysicalReceiveShell.ts
@@ -0,0 +1,23 @@
+import { inject, provide, type InjectionKey } from 'vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+
+export interface PhysicalReceiveShellContext {
+  isDesktop: ReturnType<typeof useDesktopBreakpoint>
+}
+
+export const PHYSICAL_RECEIVE_SHELL_KEY: InjectionKey<PhysicalReceiveShellContext> =
+  Symbol('physicalReceiveShell')
+
+export function usePhysicalReceiveShell() {
+  const isDesktop = useDesktopBreakpoint()
+  provide(PHYSICAL_RECEIVE_SHELL_KEY, { isDesktop })
+  return { isDesktop }
+}
+
+export function usePhysicalReceiveShellContext() {
+  const context = inject(PHYSICAL_RECEIVE_SHELL_KEY)
+  if (!context) {
+    throw new Error('usePhysicalReceiveShellContext must be used within physical receive shell')
+  }
+  return context
+}
diff --git a/src/views/base/physicalReceive/desktop/DesktopNewRequestView.vue b/src/views/base/physicalReceive/desktop/DesktopNewRequestView.vue
new file mode 100644
index 0000000..afadd11
--- /dev/null
+++ b/src/views/base/physicalReceive/desktop/DesktopNewRequestView.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="dpr-new">
+    <div class="dpr-new__grid">
+      <section class="dpr-surface dpr-new__picker">
+        <h2 class="dpr-new__section-title">انتخاب محصول</h2>
+        <div class="dpr-new__picker-row">
+          <BasicSelect
+            v-model:value="selectedProduct"
+            :items="items"
+            class="w-full"
+            key-name="id"
+            :show-search="false"
+            value-name="title"
+            size="large"
+            placeholder="لطفا محصول را انتخاب کنید"
+            :has-tooltip="false"
+          />
+          <BasicButton :disabled-b="selectedProduct == null" type="primary" @click="handleAdd">
+            افزودن
+          </BasicButton>
+        </div>
+        <p v-if="items?.length" class="dpr-new__hint">
+          {{ items.length }} محصول با موجودی قابل تحویل
+        </p>
+      </section>
+
+      <section class="dpr-surface dpr-new__cart">
+        <div class="dpr-new__cart-header">
+          <h2 class="dpr-new__section-title">سبد درخواست</h2>
+          <span class="dpr-new__cart-count">{{ selectedProducts.length }} مورد</span>
+        </div>
+
+        <div v-if="selectedProducts.length" class="dpr-new__cart-items">
+          <div
+            v-for="val in selectedProducts"
+            :key="val.product.id"
+            class="dpr-new__cart-item"
+          >
+            <PhysicalReceiveCartRow :item="val" variant="desktop" @remove="handleRemove" />
+          </div>
+        </div>
+
+        <div v-else class="dpr-new__cart-empty">
+          <BasicIcon icon="vuesax-linear:box" size="32" />
+          <p>محصولی به سبد اضافه نشده است.</p>
+        </div>
+
+        <div class="dpr-new__actions">
+          <BasicButton
+            :disabled-b="selectedProducts.length == 0"
+            class="w-full"
+            type="primary"
+            @click="handelFirstSubmit()"
+          >
+            ادامه و انتخاب آدرس
+          </BasicButton>
+        </div>
+      </section>
+    </div>
+
+    <BasicModal
+      v-model:visible="showAddress"
+      title="انتخاب آدرس"
+      width="520px"
+      destroy-on-close
+      custom-footer
+    >
+      <PhysicalReceiveAddressPicker
+        v-model:selected-address-id="selectedAddressID"
+        :addresses="address"
+        variant="desktop"
+        @add-address="addAddressVisible = true; showAddress = false"
+        @submit="handelsubmit"
+      />
+      <template #footer>
+        <div></div>
+      </template>
+    </BasicModal>
+
+    <BasicModal
+      v-model:visible="addAddressVisible"
+      title="افزودن آدرس"
+      width="520px"
+      destroy-on-close
+      custom-footer
+    >
+      <New_EditAddress @onOk="handleAddress" />
+      <template #footer>
+        <div></div>
+      </template>
+    </BasicModal>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import New_EditAddress from '@/views/base/address/components/New_EditAddress.vue'
+import PhysicalReceiveCartRow from '../components/PhysicalReceiveCartRow.vue'
+import PhysicalReceiveAddressPicker from '../components/PhysicalReceiveAddressPicker.vue'
+import { useNewPhysicalRequestContext } from '../composables/useNewPhysicalRequestPage'
+
+const {
+  items,
+  selectedProduct,
+  selectedProducts,
+  address,
+  selectedAddressID,
+  showAddress,
+  addAddressVisible,
+  handleAdd,
+  handleRemove,
+  handelFirstSubmit,
+  handelsubmit,
+  handleAddress,
+} = useNewPhysicalRequestContext()
+</script>
diff --git a/src/views/base/physicalReceive/desktop/DesktopPhysicalReceiveChrome.vue b/src/views/base/physicalReceive/desktop/DesktopPhysicalReceiveChrome.vue
new file mode 100644
index 0000000..743d2f0
--- /dev/null
+++ b/src/views/base/physicalReceive/desktop/DesktopPhysicalReceiveChrome.vue
@@ -0,0 +1,32 @@
+<template>
+  <header class="dpr-topbar">
+    <button type="button" class="dpr-topbar__back" @click="router.back()">
+      <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+      بازگشت
+    </button>
+    <div class="dpr-topbar__meta">
+      <p class="dpr-topbar__eyebrow">سفارش</p>
+      <h1 class="dpr-topbar__title">{{ pageTitle }}</h1>
+      <p class="dpr-topbar__subtitle">{{ pageSubtitle }}</p>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import router from '@/router'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+
+const route = useRoute()
+
+const pageTitle = computed(() =>
+  route.name === 'list' ? 'دریافت فیزیکی' : 'درخواست جدید'
+)
+
+const pageSubtitle = computed(() =>
+  route.name === 'list'
+    ? 'پیگیری درخواست‌های تحویل فیزیکی محصول'
+    : 'انتخاب محصول و ثبت آدرس تحویل'
+)
+</script>
diff --git a/src/views/base/physicalReceive/desktop/DesktopRequestListView.vue b/src/views/base/physicalReceive/desktop/DesktopRequestListView.vue
new file mode 100644
index 0000000..23f9af0
--- /dev/null
+++ b/src/views/base/physicalReceive/desktop/DesktopRequestListView.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="dpr-list">
+    <div class="dpr-list__toolbar">
+      <span class="dpr-list__count">{{ requestItems.length }} درخواست</span>
+      <button type="button" class="dpr-list__add" @click="openAdd()">
+        <BasicIcon icon="vuesax-linear:add" size="16" />
+        درخواست جدید
+      </button>
+    </div>
+
+    <div v-if="requestItems.length" class="dpr-list__items">
+      <RequestItem
+        v-for="item in requestItems"
+        :key="item.id"
+        :item="item"
+        variant="desktop"
+      />
+    </div>
+
+    <div v-else class="dpr-list__empty">
+      <BasicIcon icon="vuesax-linear:box" size="40" />
+      <p>هنوز درخواستی ثبت نشده است.</p>
+      <button type="button" class="dpr-list__empty-btn" @click="openAdd()">
+        ثبت اولین درخواست
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import RequestItem from '../components/RequestItem.vue'
+import { usePhysicalReceiveListContext } from '../composables/usePhysicalReceiveList'
+
+const { requestItems, openAdd } = usePhysicalReceiveListContext()
+</script>
diff --git a/src/views/base/physicalReceive/desktop/styles/desktop-physical-receive.less b/src/views/base/physicalReceive/desktop/styles/desktop-physical-receive.less
new file mode 100644
index 0000000..8dc8e4d
--- /dev/null
+++ b/src/views/base/physicalReceive/desktop/styles/desktop-physical-receive.less
@@ -0,0 +1,301 @@
+/* Premium desktop physical receive */
+
+.dpr {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dpr__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dpr-topbar {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+    flex-shrink: 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 6px 0 0;
+    line-height: 1.6;
+  }
+}
+
+.dpr-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dpr-list {
+  padding: 24px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  &__count {
+    font-size: 14px;
+    color: #6b7280;
+  }
+
+  &__add {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 18px;
+    border: none;
+    border-radius: 10px;
+    background: @App-primary-color;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(0.95);
+    }
+  }
+
+  &__items {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    min-height: 240px;
+    padding: 32px 16px;
+    color: #6b7280;
+    text-align: center;
+
+    p {
+      margin: 0;
+      font-size: 15px;
+    }
+  }
+
+  &__empty-btn {
+    margin-top: 8px;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 10px;
+    background: @App-primary-color;
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    font-family: inherit;
+    cursor: pointer;
+  }
+}
+
+.dpr-item {
+  margin: 0 !important;
+  border-radius: 16px !important;
+}
+
+.dpr-new {
+  &__grid {
+    display: grid;
+    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
+    gap: 20px;
+    align-items: start;
+  }
+
+  &__picker,
+  &__cart {
+    padding: 24px;
+  }
+
+  &__section-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 16px;
+  }
+
+  &__picker-row {
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+  }
+
+  &__hint {
+    margin: 12px 0 0;
+    font-size: 13px;
+    color: #9ca3af;
+  }
+
+  &__cart-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 16px;
+  }
+
+  &__cart-count {
+    font-size: 13px;
+    color: #9ca3af;
+  }
+
+  &__cart-items {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-height: 420px;
+    overflow-y: auto;
+    margin-bottom: 20px;
+  }
+
+  &__cart-item {
+    padding: 14px;
+    border-radius: 12px;
+    background: #f9fafb;
+    border: 1px solid rgba(15, 23, 42, 0.05);
+  }
+
+  &__cart-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    min-height: 200px;
+    color: #9ca3af;
+    text-align: center;
+
+    p {
+      margin: 0;
+      font-size: 14px;
+    }
+  }
+
+  &__actions {
+    padding-top: 8px;
+    border-top: 1px solid rgba(15, 23, 42, 0.06);
+  }
+}
+
+.dpr-cart-row__input {
+  width: min(100%, 240px);
+  min-width: 220px;
+  flex-shrink: 0;
+
+  .noname-input,
+  .ant-input-group-wrapper {
+    width: 100%;
+  }
+
+  .ant-input-group-addon {
+    min-width: 4.75rem;
+    padding-inline: 10px;
+    white-space: nowrap;
+    font-size: 12px;
+    font-weight: 600;
+  }
+}
+
+.dpr-address-picker {
+  &--desktop {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  &__list {
+    max-height: 320px;
+    overflow-y: auto;
+  }
+
+  &__item {
+    padding: 14px 16px;
+    margin-bottom: 10px;
+    border-radius: 12px;
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    background: #f9fafb;
+    font-size: 14px;
+  }
+
+  &__actions {
+    display: flex;
+    gap: 10px;
+    padding-top: 8px;
+
+    > button:last-child {
+      flex: 1;
+    }
+  }
+}
+
+@media (max-width: 900px) {
+  .dpr-list__items {
+    grid-template-columns: 1fr;
+  }
+
+  .dpr-new__grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/views/base/physicalReceive/index.vue b/src/views/base/physicalReceive/index.vue
index 6508706..7366885 100644
--- a/src/views/base/physicalReceive/index.vue
+++ b/src/views/base/physicalReceive/index.vue
@@ -1,43 +1,36 @@
 <template>
-  <div style="max-height: calc(100vh - 50px)">
-    <div class="bg-white py-3 px-3 z-100000 text-primary font-bold drop-shadow flex flex-col  wrap-fix">
-      <div class="flex">
-        <div @click="router.back()">
-          <BasicIcon icon="vuesax-linear:arrow-right-1"/>
-        </div>
-        <div v-if="route.name=='list'" class="mr-2">دریافت فیزیکی</div>
-        <div v-else class="mr-2">دریافت فیزیکی-درخواست جدید</div>
+  <div class="physical-receive-page-root" :class="{ 'physical-receive-page-root--desktop': isDesktop }">
+    <MobilePhysicalReceiveChrome v-show="!isDesktop" />
+
+    <div :class="isDesktop ? 'dpr' : ''">
+      <div :class="isDesktop ? 'dpr__container' : 'physical-receive-page-root__content'">
+        <DesktopPhysicalReceiveChrome v-show="isDesktop" />
+        <router-view />
       </div>
     </div>
-    <div>
-      <router-view></router-view>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ref} from "vue";
-import RequestList from "@/views/base/physicalReceive/components/RequestList.vue";
-import NewRequest from "@/views/base/physicalReceive/components/NewRequest.vue";
-import router from "@/router";
-import BasicIcon from "@/components/BasicPacks/BasicIcon.vue";
-import {useRoute} from "vue-router";
+import { usePhysicalReceiveShell } from './composables/usePhysicalReceiveShell'
+import DesktopPhysicalReceiveChrome from './desktop/DesktopPhysicalReceiveChrome.vue'
+import MobilePhysicalReceiveChrome from './mobile/MobilePhysicalReceiveChrome.vue'
 
-const activekey=ref(1)
-const  route=useRoute()
+const { isDesktop } = usePhysicalReceiveShell()
 </script>
 
 <style scoped>
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
+.physical-receive-page-root {
+  min-height: 100%;
+  height: 100%;
 }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
+.physical-receive-page-root__content {
+  min-height: 0;
+}
+
+.physical-receive-page-root--desktop {
+  height: auto;
+  min-height: 0;
+}
 </style>
diff --git a/src/views/base/physicalReceive/mobile/MobileNewRequestView.vue b/src/views/base/physicalReceive/mobile/MobileNewRequestView.vue
new file mode 100644
index 0000000..c682b32
--- /dev/null
+++ b/src/views/base/physicalReceive/mobile/MobileNewRequestView.vue
@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div ref="el" class="px-3 pt-15">
+      <div class="flex gap-2">
+        <BasicSelect
+          v-model:value="selectedProduct"
+          :items="items"
+          class="w-full"
+          key-name="id"
+          :show-search="false"
+          value-name="title"
+          size="large"
+          placeholder="لطفا محصول را انتخاب کنید"
+          :has-tooltip="false"
+        />
+        <BasicButton :disabled-b="selectedProduct == null" type="primary" @click="handleAdd">
+          افزودن
+        </BasicButton>
+      </div>
+      <div class="h-70vh rounded-lg bg-white mt-2 border-gray-200 border-1 overflow-y-auto p-2">
+        <div
+          v-for="val in selectedProducts"
+          :key="val.product.id"
+          class="rounded-lg p-2 bg-gray-100 mb-2"
+        >
+          <PhysicalReceiveCartRow :item="val" @remove="handleRemove" />
+        </div>
+      </div>
+      <BasicButton
+        :disabled-b="selectedProducts.length == 0"
+        class="w-full absolute bottom-10 mt-2"
+        @click="handelFirstSubmit()"
+      >
+        ثبت
+      </BasicButton>
+    </div>
+
+    <BasicActionSheet v-model:show="showAddress">
+      <PhysicalReceiveAddressPicker
+        v-model:selected-address-id="selectedAddressID"
+        :addresses="address"
+        @add-address="addAddressVisible = true; showAddress = false"
+        @submit="handelsubmit"
+      />
+    </BasicActionSheet>
+
+    <BasicActionSheet v-model:show="addAddressVisible">
+      <New_EditAddress @onOk="handleAddress" />
+    </BasicActionSheet>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import New_EditAddress from '@/views/base/address/components/New_EditAddress.vue'
+import PhysicalReceiveCartRow from '../components/PhysicalReceiveCartRow.vue'
+import PhysicalReceiveAddressPicker from '../components/PhysicalReceiveAddressPicker.vue'
+import { useNewPhysicalRequestContext } from '../composables/useNewPhysicalRequestPage'
+
+const {
+  items,
+  selectedProduct,
+  selectedProducts,
+  address,
+  selectedAddressID,
+  showAddress,
+  addAddressVisible,
+  handleAdd,
+  handleRemove,
+  handelFirstSubmit,
+  handelsubmit,
+  handleAddress,
+} = useNewPhysicalRequestContext()
+</script>
diff --git a/src/views/base/physicalReceive/mobile/MobilePhysicalReceiveChrome.vue b/src/views/base/physicalReceive/mobile/MobilePhysicalReceiveChrome.vue
new file mode 100644
index 0000000..cde7446
--- /dev/null
+++ b/src/views/base/physicalReceive/mobile/MobilePhysicalReceiveChrome.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="physical-receive-mobile-chrome" style="max-height: calc(100vh - 50px)">
+    <div class="bg-white py-3 px-3 z-100000 text-primary font-bold drop-shadow flex flex-col wrap-fix">
+      <div class="flex">
+        <div @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" />
+        </div>
+        <div v-if="route.name === 'list'" class="mr-2">دریافت فیزیکی</div>
+        <div v-else class="mr-2">دریافت فیزیکی-درخواست جدید</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import router from '@/router'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
diff --git a/src/views/base/physicalReceive/mobile/MobileRequestListView.vue b/src/views/base/physicalReceive/mobile/MobileRequestListView.vue
new file mode 100644
index 0000000..6024e94
--- /dev/null
+++ b/src/views/base/physicalReceive/mobile/MobileRequestListView.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <div
+      class="flex flex-col gap-4 pt-13 px-2 pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]"
+    >
+      <RequestItem v-for="item in requestItems" :key="item.id" :item="item" />
+    </div>
+    <Teleport to="body">
+      <div class="add-request app-dock-add-bar" @click="openAdd()">
+        <div>افزودن درخواست جدید</div>
+        <BasicIcon icon="vuesax-linear:add" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import RequestItem from '../components/RequestItem.vue'
+import { usePhysicalReceiveListContext } from '../composables/usePhysicalReceiveList'
+
+const { requestItems, openAdd } = usePhysicalReceiveListContext()
+</script>
diff --git a/src/views/base/priceTrigger/components/Item.vue b/src/views/base/priceTrigger/components/Item.vue
index d07fa2e..512581f 100644
--- a/src/views/base/priceTrigger/components/Item.vue
+++ b/src/views/base/priceTrigger/components/Item.vue
@@ -1,90 +1,145 @@
 <template>
-  <div @click="infoVisible = true" class="shadow mb-2 p-2 rounded-lg">
+  <div v-if="variant === 'desktop'" class="dptr-card">
+    <p class="dptr-card__price">{{ usePrice(item.target_price) }}</p>
 
+    <div class="dptr-card__meta">
+      <div class="dptr-card__row">
+        <span class="dptr-card__label">جهت قیمت:</span>
+        <span class="dptr-card__value">{{ returnPriceCondition(item.price_condition) }}</span>
+      </div>
+      <div class="dptr-card__row">
+        <span class="dptr-card__label">نوع هشدار:</span>
+        <span class="dptr-card__value">{{ returnAction(item.action) }}</span>
+      </div>
+    </div>
+
+    <div class="dptr-card__actions">
+      <button
+        type="button"
+        class="dptr-card__icon-btn dptr-card__icon-btn--edit"
+        @click.stop="emits('edit', item)"
+      >
+        <BasicIcon color="green" icon="vuesax-linear:edit" size="18" />
+      </button>
+      <button
+        type="button"
+        class="dptr-card__icon-btn dptr-card__icon-btn--danger"
+        @click.stop="deleteConfirmVisible = true"
+      >
+        <BasicIcon color="red" icon="vuesax-linear:trash" size="18" />
+      </button>
+    </div>
+
+    <div class="dptr-card__footer">
+      <span class="dptr-card__date">{{ toJalali(item.created_at) }}</span>
+      <a-switch
+        v-model:checked="isActive"
+        checked-children="فعال"
+        un-checked-children="غیر فعال"
+        @change="changeActive"
+      />
+    </div>
+
+    <DialogVant v-model:show="deleteConfirmVisible" :closeOnClickOverlay="false" :timeOut="-1" teleport="body">
+      <template #title>
+        <div class="flex flex-col items-center">
+          <div class="p-5 text-sm">آیا از حذف هشدار اطمینان دارید؟</div>
+        </div>
+      </template>
+      <template #button>
+        <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
+          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
+        </div>
+        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
+      </template>
+    </DialogVant>
+  </div>
+
+  <div v-else @click="infoVisible = true" class="shadow mb-2 p-2 rounded-lg">
     <div class="flex justify-between">
       <div>
-        <div class="font-bold text-base mb-2">{{usePrice(item.target_price) }}</div>
+        <div class="font-bold text-base mb-2">{{ usePrice(item.target_price) }}</div>
       </div>
-
-      <div class="flex gap-2 ">
-        <BasicIcon color="red" icon="vuesax-linear:trash" @click.stop="deleteConfirmVisible = true" class="p-1"/>
-        <BasicIcon color="green" icon="vuesax-linear:edit" @click.stop="emits('edit',item)" class="p-1"/>
+      <div class="flex gap-2">
+        <BasicIcon
+          class="p-1"
+          color="red"
+          icon="vuesax-linear:trash"
+          @click.stop="deleteConfirmVisible = true"
+        />
+        <BasicIcon
+          class="p-1"
+          color="green"
+          icon="vuesax-linear:edit"
+          @click.stop="emits('edit', item)"
+        />
       </div>
     </div>
     <div class="flex flex-col gap-2 mt-2">
-      <BasicInfoItem is-line title="جهت قیمت" :value="returnPriceCondition(item.price_condition)"/>
-
-      <BasicInfoItem is-line title="نوع هشدار" :value="returnAction(item.action)"/>
+      <BasicInfoItem is-line title="جهت قیمت" :value="returnPriceCondition(item.price_condition)" />
+      <BasicInfoItem is-line title="نوع هشدار" :value="returnAction(item.action)" />
     </div>
     <a-divider class="!my-3" />
-
     <div class="flex justify-between mt-1">
-      <div class="mb-2">{{toJalali(item.created_at)}}</div>
-      <a-switch v-model:checked="isActive" checked-children="فعال" un-checked-children="غیر فعال" @change="changeActive"/>
+      <div class="mb-2">{{ toJalali(item.created_at) }}</div>
+      <a-switch
+        v-model:checked="isActive"
+        checked-children="فعال"
+        un-checked-children="غیر فعال"
+        @change="changeActive"
+      />
     </div>
 
-  </div>
-
-<!--  <teleport to="app">-->
-    <DialogVant v-model:show="deleteConfirmVisible" teleport="body" :closeOnClickOverlay="false" :timeOut="-1">
-      <!--      <template v-slot:img>
-              <img :src="registerDelayImage" alt="" class="opacity-80">
-            </template>-->
-
-      <template v-slot:title>
+    <DialogVant v-model:show="deleteConfirmVisible" :closeOnClickOverlay="false" :timeOut="-1" teleport="body">
+      <template #title>
         <div class="flex flex-col items-center">
-          <div class="p-5 text-sm">
-            آیا از حذف هشدار اطمینان دارید؟
-          </div>
+          <div class="p-5 text-sm">آیا از حذف هشدار اطمینان دارید؟</div>
         </div>
       </template>
-
-      <template v-slot:button>
+      <template #button>
         <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
-          <a-spin :spinning="deleteLoading" size="small">
-            تایید
-          </a-spin>
-        </div>
-        <div class="text-center" @click="deleteConfirmVisible = false">
-          انصراف
+          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
         </div>
+        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
       </template>
-
     </DialogVant>
-<!--  </teleport>-->
-
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { usePrice, usePriceWithoutType } from '../../../../utils/usePrice'
-import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import { computed, onMounted, ref } from 'vue'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import { toJalali, toJalaliNotime, toJalaliOutOfUTC, toTime } from '../../../../utils/useDateTime'
+import { usePrice } from '../../../../utils/usePrice'
+import { onMounted, ref } from 'vue'
+import { toJalali } from '../../../../utils/useDateTime'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import type { PriceTrigger } from '@/models/PriceTrigger'
 import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
 import DialogVant from '@/components/DialogVant.vue'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
 import { deletePriceTrigger, updatePriceTrigger } from '@/api/triggerPrice'
 import { loading } from '@/utils'
 
-const infoVisible = ref<boolean>(false)
-
-const isActive = ref<boolean>(false)
-
+const infoVisible = ref(false)
+const isActive = ref(false)
 const deleteLoading = ref(false)
 const deleteConfirmVisible = ref(false)
 
-interface Prop {
-  item: PriceTrigger
-}
-onMounted(()=> isActive.value = props.item.is_active)
+const props = withDefaults(
+  defineProps<{
+    item: PriceTrigger
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const emits = defineEmits(['edit', 'refresh'])
+
+onMounted(() => {
+  isActive.value = props.item.is_active
+})
+
 function changeActive(val: boolean) {
-  console.log(val)
   try {
     loading.value = true
-    updatePriceTrigger(props?.item.id, {is_active: val})
+    updatePriceTrigger(props?.item.id, { is_active: val })
   } catch (e) {
     console.log(e)
     isActive.value = !isActive.value
@@ -95,15 +150,13 @@ function changeActive(val: boolean) {
 
 function returnPriceCondition(val: string) {
   switch (val) {
-    case '==': return 'مساوی'
-    case '<': return 'کوچکتر'
-    // case '==': return 'مساوی'
+    case '==':
+      return 'مساوی'
+    case '<':
+      return 'کوچکتر'
+    case '>':
+      return 'بزرگتر'
   }
-/*  if (val === '=='){
-    return 'مساوی'
-  } else if (val === '<'){
-    return 'کوچکتر'
-  }*/
 }
 
 async function deleteItem() {
@@ -121,41 +174,12 @@ async function deleteItem() {
 
 function returnAction(val: string) {
   switch (val) {
-    case 'sms': return 'پیامک'
-    case 'email': return 'ایمیل'
-    case 'notify': return 'نوتیفیکیشن'
-    // case '==': return 'مساوی'
+    case 'sms':
+      return 'پیامک'
+    case 'email':
+      return 'ایمیل'
+    case 'notify':
+      return 'نوتیفیکیشن'
   }
-  /*  if (val === '=='){
-      return 'مساوی'
-    } else if (val === '<'){
-      return 'کوچکتر'
-    }*/
 }
-
-
-const props = withDefaults(defineProps<Prop>(), {})
-const emits = defineEmits(['edit','refresh'])
-
-const isUp = computed(() => props.item.type === 3 || props.item.type === 1 || props.item.type === 8)
-const isGold = computed(() => props.item.type === 1 || props.item.type === 2 || props.item.type === 10)
-/*const title = computed(() => {
-  if (isUp.value) {
-    if (isGold.value) {
-      return 'واریز ریالی'
-    } else {
-      return 'خرید طلا'
-    }
-  } else {
-    if (isGold.value) {
-      return 'برداشت ریالی'
-    } else {
-      return 'فروش طلا'
-    }
-  }
-})*/
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/base/priceTrigger/components/PriceTriggerForm.vue b/src/views/base/priceTrigger/components/PriceTriggerForm.vue
new file mode 100644
index 0000000..5042b3d
--- /dev/null
+++ b/src/views/base/priceTrigger/components/PriceTriggerForm.vue
@@ -0,0 +1,63 @@
+<template>
+  <a-form
+    ref="formRef"
+    :model="form"
+    class="!mt-0"
+    name="price-trigger-form"
+    @finish="ok()"
+  >
+    <div class="flex flex-col gap-4 w-full">
+      <a-form-item :rules="[required()]" label="جهت قیمت" name="price_condition">
+        <BasicSelect
+          v-model:value="form.price_condition"
+          :items="typeItems"
+          :show-search="false"
+          key-name="key"
+          placeholder="انتخاب نوع جهت قیمت"
+          size="large"
+          value-name="value"
+        />
+      </a-form-item>
+      <a-form-item :rules="[required()]" label="قیمت" name="target_price">
+        <BasicInput
+          v-model:value="form.target_price"
+          addon-before="ریال"
+          place-holder="وارد کردن قیمت"
+          size="large"
+          type="price"
+        />
+      </a-form-item>
+      <a-form-item :rules="[required()]" label="نوع هشدار را انتخاب کنید" name="action">
+        <a-radio-group v-model:value="form.action">
+          <a-radio :style="radioStyle" value="sms">ارسال پیامک</a-radio>
+          <a-radio :style="radioStyle" value="email">ارسال ایمیل</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item>
+        <a-spin :spinning="loading">
+          <BasicButton class="w-full" html-type="submit" type="primary">
+            {{ editId ? 'ویرایش هشدار' : 'ثبت هشدار' }}
+          </BasicButton>
+        </a-spin>
+      </a-form-item>
+    </div>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
+import { required } from '@/utils/inputRules'
+import { usePriceTriggerPageContext } from '../composables/usePriceTriggerPage'
+
+const {
+  form,
+  formRef,
+  editId,
+  loading,
+  radioStyle,
+  typeItems,
+  ok,
+} = usePriceTriggerPageContext()
+</script>
diff --git a/src/views/base/priceTrigger/composables/usePriceTriggerPage.ts b/src/views/base/priceTrigger/composables/usePriceTriggerPage.ts
new file mode 100644
index 0000000..3252d5e
--- /dev/null
+++ b/src/views/base/priceTrigger/composables/usePriceTriggerPage.ts
@@ -0,0 +1,135 @@
+import { inject, onMounted, provide, reactive, ref, type InjectionKey, type Ref } from 'vue'
+import { cloneDeep } from 'lodash'
+import { type FormInstance, message } from 'ant-design-vue'
+import { createPriceTrigger, getPriceTriggers, updatePriceTrigger } from '@/api/triggerPrice'
+import type { SelectItem } from '@/models/SelectItem'
+import type { PriceTrigger } from '@/models/PriceTrigger'
+import { loading } from '@/utils'
+
+export interface PriceTriggerPageContext {
+  items: Ref<PriceTrigger[]>
+  addTriggerVisible: Ref<boolean>
+  editId: Ref<number | undefined>
+  form: Ref<PriceTrigger>
+  formRef: Ref<FormInstance | undefined>
+  loading: typeof loading
+  radioStyle: ReturnType<typeof reactive<{ display: string; height: string; lineHeight: string }>>
+  typeItems: SelectItem[]
+  resetFields: () => void
+  openAdd: () => void
+  openEdit: (val: PriceTrigger) => void
+  initItems: () => Promise<void>
+  ok: () => Promise<void>
+}
+
+export const PRICE_TRIGGER_PAGE_CONTEXT_KEY: InjectionKey<PriceTriggerPageContext> =
+  Symbol('priceTriggerPageContext')
+
+export function usePriceTriggerPage() {
+  const items = ref<PriceTrigger[]>([])
+  const addTriggerVisible = ref(false)
+  const editId = ref<number | undefined>(undefined)
+  const formRef = ref<FormInstance>()
+
+  const radioStyle = reactive({
+    display: '',
+    height: '30px',
+    lineHeight: '30px',
+  })
+
+  const form = ref<PriceTrigger>({
+    price_condition: '',
+    is_active: true,
+    action: '',
+    target_price: '',
+  })
+
+  const typeItems: SelectItem[] = [
+    { value: 'بزرگتر', key: '>' },
+    { value: 'کوچکتر', key: '<' },
+    { value: 'مساوی', key: '==' },
+  ]
+
+  function resetFields() {
+    form.value = {
+      price_condition: '',
+      is_active: true,
+      action: '',
+      target_price: '',
+    }
+  }
+
+  function openAdd() {
+    resetFields()
+    editId.value = undefined
+    addTriggerVisible.value = true
+  }
+
+  function openEdit(val: PriceTrigger) {
+    form.value = cloneDeep(val)
+    editId.value = form.value.id
+    addTriggerVisible.value = true
+  }
+
+  async function initItems() {
+    try {
+      items.value = []
+      items.value = await getPriceTriggers()
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function ok() {
+    await formRef.value?.validateFields().then(async () => {
+      try {
+        loading.value = true
+        if (editId.value) {
+          await updatePriceTrigger(editId.value, form.value)
+        } else {
+          await createPriceTrigger(form.value)
+        }
+        message.success('هشدار با موفقیت ایجاد شد')
+        await initItems()
+        addTriggerVisible.value = false
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loading.value = false
+      }
+    })
+  }
+
+  onMounted(() => {
+    initItems()
+  })
+
+  const context: PriceTriggerPageContext = {
+    items,
+    addTriggerVisible,
+    editId,
+    form,
+    formRef,
+    loading,
+    radioStyle,
+    typeItems,
+    resetFields,
+    openAdd,
+    openEdit,
+    initItems,
+    ok,
+  }
+
+  provide(PRICE_TRIGGER_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function usePriceTriggerPageContext() {
+  const context = inject(PRICE_TRIGGER_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('usePriceTriggerPageContext must be used within a page that calls usePriceTriggerPage()')
+  }
+  return context
+}
diff --git a/src/views/base/priceTrigger/desktop/DesktopPriceTriggerView.vue b/src/views/base/priceTrigger/desktop/DesktopPriceTriggerView.vue
new file mode 100644
index 0000000..06eaaab
--- /dev/null
+++ b/src/views/base/priceTrigger/desktop/DesktopPriceTriggerView.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="dptr">
+    <div class="dptr__container">
+      <header class="dptr-topbar">
+        <p class="dptr-topbar__eyebrow">اعلان‌ها</p>
+        <h1 class="dptr-topbar__title">هشدار قیمت</h1>
+        <p class="dptr-topbar__subtitle">هنگام رسیدن قیمت به مقدار تعیین‌شده، از طریق پیامک یا ایمیل مطلع شوید</p>
+      </header>
+
+      <div class="dptr-grid">
+        <section class="dptr-surface dptr-form">
+          <div class="dptr-form__header">
+            <h2 class="dptr-form__title">{{ editId ? 'ویرایش هشدار' : 'ثبت هشدار جدید' }}</h2>
+            <button
+              v-if="editId"
+              type="button"
+              class="dptr-form__reset"
+              @click="openAdd()"
+            >
+              هشدار جدید
+            </button>
+          </div>
+          <PriceTriggerForm />
+        </section>
+
+        <section class="dptr-surface dptr-list">
+          <div class="dptr-list__header">
+            <h3 class="dptr-list__title">هشدارهای فعلی</h3>
+            <span class="dptr-list__count">{{ items.length }} مورد</span>
+          </div>
+
+          <div v-if="loading" class="dptr-list__skeletons">
+            <TransactionSkeleton v-for="i in 6" :key="i" class="mt-1" />
+          </div>
+
+          <div v-else-if="items.length" class="dptr-list__items">
+            <list-anim>
+              <Item
+                v-for="item in items"
+                :key="item.id"
+                :item="item"
+                variant="desktop"
+                @edit="openEdit"
+                @refresh="initItems"
+              />
+            </list-anim>
+          </div>
+
+          <div v-else class="dptr-empty">
+            <BasicIcon icon="vuesax-linear:notification-bing" size="36" />
+            <p>هنوز هشداری ثبت نشده است.</p>
+            <button type="button" class="dptr-empty__btn" @click="openAdd()">
+              افزودن اولین هشدار
+            </button>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import Item from '../components/Item.vue'
+import PriceTriggerForm from '../components/PriceTriggerForm.vue'
+import { usePriceTriggerPageContext } from '../composables/usePriceTriggerPage'
+
+const {
+  items,
+  loading,
+  editId,
+  openAdd,
+  openEdit,
+  initItems,
+} = usePriceTriggerPageContext()
+</script>
diff --git a/src/views/base/priceTrigger/desktop/styles/desktop-price-trigger.less b/src/views/base/priceTrigger/desktop/styles/desktop-price-trigger.less
new file mode 100644
index 0000000..3faf1a5
--- /dev/null
+++ b/src/views/base/priceTrigger/desktop/styles/desktop-price-trigger.less
@@ -0,0 +1,273 @@
+/* Premium desktop price trigger page */
+
+.dptr {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dptr__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dptr-topbar {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0 0 6px;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0;
+    max-width: 520px;
+    line-height: 1.6;
+  }
+}
+
+.dptr-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.dptr-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dptr-form {
+  padding: 24px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+  }
+
+  &__reset {
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background: #fff;
+    color: #6b7280;
+    font-size: 12px;
+    font-weight: 600;
+    font-family: inherit;
+    padding: 6px 10px;
+    cursor: pointer;
+    transition: border-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      border-color: @App-primary-color;
+      color: @App-primary-color;
+    }
+  }
+}
+
+.dptr-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 420px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 20px 24px 0;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+  }
+
+  &__count {
+    font-size: 12px;
+    font-weight: 600;
+    color: #6b7280;
+    background: #f3f4f6;
+    border-radius: 999px;
+    padding: 4px 10px;
+  }
+
+  &__items {
+    padding: 16px 24px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__skeletons {
+    padding: 16px 24px 24px;
+  }
+}
+
+.dptr-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px 16px;
+  padding: 16px 18px;
+  border: 1px solid #eef0f3;
+  border-radius: 12px;
+  background: #fafbfc;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    border-color: #dbe0e6;
+    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
+  }
+
+  &__price {
+    grid-column: 1 / -1;
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0;
+  }
+
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #6b7280;
+  }
+
+  &__label {
+    color: #9ca3af;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #374151;
+    font-weight: 600;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    gap: 4px;
+  }
+
+  &__icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    background: #fff;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease;
+
+    &:hover {
+      background: #f9fafb;
+    }
+
+    &--danger:hover {
+      border-color: #fecaca;
+      background: #fef2f2;
+    }
+
+    &--edit:hover {
+      border-color: #bbf7d0;
+      background: #f0fdf4;
+    }
+  }
+
+  &__footer {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding-top: 10px;
+    border-top: 1px solid #eef0f3;
+  }
+
+  &__date {
+    font-size: 12px;
+    color: #9ca3af;
+  }
+}
+
+.dptr-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 48px 24px;
+  color: #6b7280;
+  text-align: center;
+
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+
+  &__btn {
+    margin-top: 4px;
+    border: none;
+    border-radius: 10px;
+    background: @App-primary-color;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    padding: 10px 16px;
+    cursor: pointer;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 0.92;
+    }
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .dptr-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/views/base/priceTrigger/index.vue b/src/views/base/priceTrigger/index.vue
index 97f1fd6..e512426 100644
--- a/src/views/base/priceTrigger/index.vue
+++ b/src/views/base/priceTrigger/index.vue
@@ -1,198 +1,31 @@
 <template>
-  <div>
-    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow wrap-fix flex  z-10">
-      <div @click="router.back()">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">هشدارهای فعلی</div>
-    </div>
-    <!--    <a-spin :spinning="loading">-->
-    <div ref="el" :class="loading? 'h-screen': ''" class="px-3 pt-16  pb-2 overflow-y-scroll"
-         style="max-height: calc(100vh - 50px)">
+  <div class="price-trigger-page-root">
+    <DesktopPriceTriggerView v-show="isDesktop" />
+    <MobilePriceTriggerView v-show="!isDesktop" />
 
-      <list-anim v-if="!loading" class="pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
-        <Item v-for="item in items" :key="item.id" :item="item" @edit="openEdit" @refresh="initItems" />
-        <!--        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />-->
-      </list-anim>
-      <div v-if="loading">
-        <TransactionSkeleton v-for="i in 13" :key="i" class="mt-1" />
-      </div>
-
-    </div>
-    <!--    </a-spin>-->
-    <BasicActionSheet v-model:show="addTriggerVisible" teleport="body">
-      <a-form ref="formRef" :model="form" class="!mt-5 " name="basic"
-              @finish="ok()">
-        <div class="flex flex-col gap-4 pb-12 w-full">
-          <div class="font-bold text-lg">هشدار قیمت</div>
-          <a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="جهت قیمت" name="price_condition">
-            <BasicSelect :items="typeItems" v-model:value="form.price_condition" :show-search="false" value-name="value"
-                         key-name="key"
-                         placeholder="انتخاب نوع جهت قیمت"
-                         size="large"></BasicSelect>
-          </a-form-item>
-          <a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="قیمت" name="target_price">
-            <BasicInput v-model:value="form.target_price" place-holder="وارد کردن قیمت" type="price" size="large"
-                        addon-before="ریال" />
-          </a-form-item>
-          <a-form-item :rules="[required()]" class="home_appear_fade_in_down" name="action"
-                       label="نوع هشدار را انتخاب کنید">
-            <a-radio-group v-model:value="form.action">
-              <a-radio :style="radioStyle" value="sms">ارسال پیامک</a-radio>
-              <a-radio :style="radioStyle" value="email">ارسال ایمیل</a-radio>
-            </a-radio-group>
-          </a-form-item>
-          <a-form-item>
-            <a-spin :spinning="loading">
-              <BasicButton class="w-full mb-2rem" type="primary" html-type="submit">
-                {{ editId ? 'ویرایش هشدار' : 'ثبت هشدار' }}
-              </BasicButton>
-            </a-spin>
-          </a-form-item>
-        </div>
-      </a-form>
+    <BasicActionSheet v-if="!isDesktop" v-model:show="addTriggerVisible" teleport="body">
+      <div class="font-bold text-lg mb-2">هشدار قیمت</div>
+      <PriceTriggerForm />
     </BasicActionSheet>
-    <!--    <div class="bg-primary w-3rem h-3rem flex items-center justify-center rounded-lg fixed bottom-12vh left-8vw"
-             @click="openAdd()">
-          <BasicIcon icon="vuesax-linear:add" color="white" />
-        </div>-->
-    <Teleport to="body">
-      <div
-        v-if="!addTriggerVisible"
-        class="add-trigger app-dock-add-bar"
-        @click="openAdd()"
-      >
-        <div>افزودن هشدار جدید</div>
-        <BasicIcon icon="vuesax-linear:add" />
-      </div>
-    </Teleport>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { createPriceTrigger, getPriceTriggers, updatePriceTrigger } from '@/api/triggerPrice'
-
-const radioStyle = reactive({
-  display: '',
-  height: '30px',
-  lineHeight: '30px'
-})
-import type { SelectItem } from '@/models/SelectItem'
-
-// import Item from "./components/Item.vue";
-/*import {lengthValidation, required} from "@/utils/inputRules";
-import {loading} from "@/utils";
-import BasicButton from "@/components/BasicPacks/BasicButton.vue";
-import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
-import BasicInput from "@/components/BasicPacks/BasicInput.vue";*/
-import { onMounted, reactive, ref } from 'vue'
-import type { TableEngineInput, TableOutput } from '@/models/table'
-import { loading, loadingMore } from '@/utils'
-// import {getOrders} from "@/api/order";
-import { getTransactionTable } from '@/api/transaction'
-import type { Transaction } from '@/models/transaction'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
-import { useInfiniteScroll, useScroll } from '@vueuse/core'
-import ListAnim from '@/components/ListAnim.vue'
-import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
-import { mobileValidation, required } from '@/utils/inputRules'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import type { User } from '@/models/login'
-import { type FormInstance, message } from 'ant-design-vue'
-import type { PriceTrigger } from '@/models/PriceTrigger'
-import BasicSelect from '@/components/BasicPacks/BasicSelect.vue'
-import Item from './components/Item.vue'
-import { cloneDeep } from 'lodash'
-import router from '@/router'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { usePriceTriggerPage } from './composables/usePriceTriggerPage'
+import DesktopPriceTriggerView from './desktop/DesktopPriceTriggerView.vue'
+import MobilePriceTriggerView from './mobile/MobilePriceTriggerView.vue'
+import PriceTriggerForm from './components/PriceTriggerForm.vue'
 
-const items = ref<PriceTrigger[]>([])
-const addTriggerVisible = ref<boolean>(false)
-const editId = ref<number | undefined>(undefined)
-const el = ref()
+const isDesktop = useDesktopBreakpoint()
 
-const form = ref<PriceTrigger>({
-  price_condition: '',
-  is_active: true,
-  action: '',
-  target_price: ''
-})
-const formRef = ref<FormInstance>()
-
-onMounted(() => {
-  initItems()
-})
-
-function resetFields() {
-  form.value = {
-    price_condition: '',
-    is_active: true,
-    action: '',
-    target_price: ''
-  }
-}
-
-function openAdd() {
-  resetFields()
-  editId.value = undefined
-  addTriggerVisible.value = true
-}
-
-async function initItems() {
-  try {
-    items.value = []
-    items.value = await getPriceTriggers()
-    // console.log(items.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    loadingMore.value = false
-  }
-}
-
-function openEdit(val: PriceTrigger) {
-  form.value = cloneDeep(val)
-  editId.value = form.value.id
-  addTriggerVisible.value = true
-}
-
-async function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      editId.value ? await updatePriceTrigger(editId.value, form.value) : await createPriceTrigger(form.value)
-      message.success('هشدار با موفقیت ایجاد شد')
-      await initItems()
-      addTriggerVisible.value = false
-      //
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
-
-const typeItems: SelectItem[] = [
-  {
-    value: 'بزرگتر',
-    key: '>'
-  },
-  {
-    value: 'کوچکتر',
-    key: '<'
-  },
-  {
-    value: 'مساوی',
-    key: '=='
-  }
-]
+const { addTriggerVisible } = usePriceTriggerPage()
 </script>
 
 <style scoped>
-
-</style>
\ No newline at end of file
+.price-trigger-page-root {
+  min-height: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/base/priceTrigger/mobile/MobilePriceTriggerView.vue b/src/views/base/priceTrigger/mobile/MobilePriceTriggerView.vue
new file mode 100644
index 0000000..8b97615
--- /dev/null
+++ b/src/views/base/priceTrigger/mobile/MobilePriceTriggerView.vue
@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow wrap-fix flex z-10">
+      <div @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">هشدارهای فعلی</div>
+    </div>
+
+    <div
+      :class="loading ? 'h-screen' : ''"
+      class="px-3 pt-16 pb-2 overflow-y-scroll"
+      style="max-height: calc(100vh - 50px)"
+    >
+      <list-anim v-if="!loading" class="pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]">
+        <Item
+          v-for="item in items"
+          :key="item.id"
+          :item="item"
+          @edit="openEdit"
+          @refresh="initItems"
+        />
+      </list-anim>
+      <div v-if="loading">
+        <TransactionSkeleton v-for="i in 13" :key="i" class="mt-1" />
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="!addTriggerVisible"
+        class="add-trigger app-dock-add-bar"
+        @click="openAdd()"
+      >
+        <div>افزودن هشدار جدید</div>
+        <BasicIcon icon="vuesax-linear:add" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import router from '@/router'
+import Item from '../components/Item.vue'
+import { usePriceTriggerPageContext } from '../composables/usePriceTriggerPage'
+
+const {
+  items,
+  loading,
+  addTriggerVisible,
+  openAdd,
+  openEdit,
+  initItems,
+} = usePriceTriggerPageContext()
+</script>
diff --git a/src/views/base/products/composables/useProductsPage.ts b/src/views/base/products/composables/useProductsPage.ts
new file mode 100644
index 0000000..07e1c24
--- /dev/null
+++ b/src/views/base/products/composables/useProductsPage.ts
@@ -0,0 +1,147 @@
+import {
+  inject,
+  onMounted,
+  onUnmounted,
+  provide,
+  ref,
+  watch,
+  type InjectionKey,
+} from 'vue'
+import router from '@/router'
+import { loading } from '@/utils'
+import type { Product } from '@/models/products'
+import { cloneDeep } from 'lodash'
+import { isProductPriceInactive } from '@/utils/productPrice'
+import {
+  changeProductsTab,
+  initProductsPageData,
+  onProductsPageProviderMounted,
+  onProductsPageProviderUnmounted,
+  productsActiveKey,
+  productsCloseTime,
+  productsItems,
+  productsOpenTime,
+  productsTypeItems,
+} from './useProductsPageData'
+
+export interface ProductsPageContext {
+  activekey: typeof productsActiveKey
+  typeItems: typeof productsTypeItems
+  items: typeof productsItems
+  loading: typeof loading
+  showFilter: ReturnType<typeof ref<boolean>>
+  orderSheetKey: ReturnType<typeof ref<number>>
+  selectedProduct: ReturnType<typeof ref<Product | undefined>>
+  isProductInactive: ReturnType<typeof ref<boolean>>
+  isAfterCloseTime: ReturnType<typeof ref<boolean>>
+  openTime: typeof productsOpenTime
+  closeTime: typeof productsCloseTime
+  changeTab: typeof changeProductsTab
+  clickProduct: (item?: Product) => void
+  onProductOrdered: () => void
+  isProductPriceInactive: typeof isProductPriceInactive
+}
+
+export const PRODUCTS_PAGE_CONTEXT_KEY: InjectionKey<ProductsPageContext> =
+  Symbol('productsPageContext')
+
+export function useProductsPageProvider() {
+  const showFilter = ref(false)
+  const orderSheetKey = ref(0)
+  const selectedProduct = ref<Product>()
+  const isAfterCloseTime = ref(false)
+  const isProductInactive = ref(false)
+
+  watch([productsOpenTime, productsCloseTime], ([open, close]) => {
+    if (!open || !close) return
+    const now = new Date()
+    const currentSeconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds()
+    const [oh, om, os] = open.split(':').map(Number)
+    const [ch, cm, cs] = close.split(':').map(Number)
+    const openSeconds = oh * 3600 + om * 60 + os
+    const closeSeconds = ch * 3600 + cm * 60 + cs
+    isAfterCloseTime.value = currentSeconds < openSeconds || currentSeconds > closeSeconds
+  })
+
+  function clickProduct(item?: Product) {
+    if (!item?.show) return
+
+    if (isProductPriceInactive(item)) {
+      showFilter.value = false
+      isProductInactive.value = true
+      return
+    }
+
+    orderSheetKey.value += 1
+    selectedProduct.value = cloneDeep(item)
+    showFilter.value = true
+  }
+
+  function onProductOrdered() {
+    showFilter.value = false
+  }
+
+  watch(showFilter, (open) => {
+    if (!open) {
+      orderSheetKey.value += 1
+    }
+  })
+
+  onMounted(async () => {
+    onProductsPageProviderMounted()
+    await initProductsPageData()
+
+    if (router.currentRoute.value.query.cat === 'coin') {
+      productsActiveKey.value = 'سکه'
+      changeProductsTab()
+    }
+
+    if (router.currentRoute.value.query.state) {
+      if (router.currentRoute.value.query.product) {
+        clickProduct(productsItems.value?.find((x) => x.title === 'سکه'))
+      } else {
+        clickProduct(productsItems.value?.find((x) => x.title === 'آبشده نقدی'))
+      }
+    }
+  })
+
+  onUnmounted(() => {
+    onProductsPageProviderUnmounted()
+  })
+
+  const context: ProductsPageContext = {
+    activekey: productsActiveKey,
+    typeItems: productsTypeItems,
+    items: productsItems,
+    loading,
+    showFilter,
+    orderSheetKey,
+    selectedProduct,
+    isProductInactive,
+    isAfterCloseTime,
+    openTime: productsOpenTime,
+    closeTime: productsCloseTime,
+    changeTab: changeProductsTab,
+    clickProduct,
+    onProductOrdered,
+    isProductPriceInactive,
+  }
+
+  provide(PRODUCTS_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useProductsPageContext() {
+  const context = inject(PRODUCTS_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error(
+      'useProductsPageContext must be used within a page that calls useProductsPageProvider()',
+    )
+  }
+  return context
+}
+
+/** @deprecated Use useProductsPageProvider in index + useProductsPageContext in views. */
+export function useProductsPage() {
+  return useProductsPageProvider()
+}
diff --git a/src/views/base/products/composables/useProductsPageData.ts b/src/views/base/products/composables/useProductsPageData.ts
new file mode 100644
index 0000000..aaaaf36
--- /dev/null
+++ b/src/views/base/products/composables/useProductsPageData.ts
@@ -0,0 +1,152 @@
+import { ref } from 'vue'
+import { getProductsCatalog } from '@/composables/useProductsCatalog'
+import { loading } from '@/utils'
+import type { Product } from '@/models/products'
+import { loadServiceFeeFromSettings } from '@/utils/serviceFee'
+
+/** Shared products page datasets — mobile/desktop views read this module state only. */
+let initPromise: Promise<void> | null = null
+let productListInterval: ReturnType<typeof setInterval> | undefined
+let providerMountCount = 0
+
+const initialized = ref(false)
+
+export const productsActiveKey = ref('همه')
+export const productsTypeItems = ref<string[]>([])
+export const productsFirstItems = ref<Product[]>()
+export const productsItems = ref<Product[]>()
+export const productsOpenTime = ref('')
+export const productsCloseTime = ref('')
+
+export function isProductsPageDataInitialized() {
+  return initialized.value
+}
+
+export function changeProductsTab() {
+  if (productsActiveKey.value !== 'همه') {
+    productsItems.value = productsFirstItems.value?.filter(
+      (val) => val.group_type === productsActiveKey.value,
+    )
+  } else {
+    productsItems.value = productsFirstItems.value
+  }
+}
+
+function syncTypeItems(products: Product[]) {
+  products.forEach((val) => {
+    if (!productsTypeItems.value.includes(val.group_type)) {
+      productsTypeItems.value.push(val.group_type)
+    }
+  })
+}
+
+function applyProductsList(products: Product[]) {
+  if (products.length) {
+    productsCloseTime.value = products[0].auto_close_at
+    productsOpenTime.value = products[0].auto_open_at
+  }
+
+  productsFirstItems.value = products
+  syncTypeItems(products)
+  changeProductsTab()
+}
+
+export async function refreshProductsPageData() {
+  try {
+    const fresh = await getProductsCatalog(true)
+    if (!fresh?.length) return
+
+    syncTypeItems(fresh)
+
+    const freshById = new Map(fresh.map((p) => [p.id, p]))
+    const current = productsFirstItems.value
+
+    if (!current?.length) {
+      applyProductsList(fresh)
+      return
+    }
+
+    current.forEach((item) => {
+      const updated = freshById.get(item.id)
+      if (updated) {
+        Object.assign(item, updated)
+      }
+    })
+
+    const currentIds = new Set(current.map((p) => p.id))
+    const hasAdded = fresh.some((p) => !currentIds.has(p.id))
+    const hasRemoved = current.some((p) => !freshById.has(p.id))
+    if (hasAdded || hasRemoved) {
+      applyProductsList(fresh)
+    }
+  } catch (error) {
+    console.error('Products refresh error:', error)
+  }
+}
+
+function startProductListPolling() {
+  if (productListInterval) return
+  productListInterval = setInterval(() => {
+    void refreshProductsPageData()
+  }, 10000)
+}
+
+function stopProductListPolling() {
+  if (productListInterval) {
+    clearInterval(productListInterval)
+    productListInterval = undefined
+  }
+}
+
+export function onProductsPageProviderMounted() {
+  providerMountCount += 1
+}
+
+export function onProductsPageProviderUnmounted() {
+  providerMountCount = Math.max(0, providerMountCount - 1)
+  if (providerMountCount === 0) {
+    stopProductListPolling()
+  }
+}
+
+export async function initProductsPageData(force = false) {
+  if (!force && initialized.value) {
+    startProductListPolling()
+    return
+  }
+
+  if (!force && initPromise) {
+    return initPromise
+  }
+
+  initPromise = (async () => {
+    try {
+      loading.value = true
+      const products = await getProductsCatalog(force)
+      applyProductsList(products ?? [])
+      await loadServiceFeeFromSettings()
+      initialized.value = true
+      startProductListPolling()
+    } catch (error) {
+      console.error('Products page initialization error:', error)
+    } finally {
+      loading.value = false
+      initPromise = null
+    }
+  })()
+
+  return initPromise
+}
+
+export function resetProductsPageData() {
+  initialized.value = false
+  initPromise = null
+  providerMountCount = 0
+  stopProductListPolling()
+  productsActiveKey.value = 'همه'
+  productsTypeItems.value = []
+  productsFirstItems.value = undefined
+  productsItems.value = undefined
+  productsOpenTime.value = ''
+  productsCloseTime.value = ''
+}
diff --git a/src/views/base/products/desktop/DesktopProductsView.vue b/src/views/base/products/desktop/DesktopProductsView.vue
new file mode 100644
index 0000000..7548447
--- /dev/null
+++ b/src/views/base/products/desktop/DesktopProductsView.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="dproducts">
+    <div class="dproducts__container">
+      <header class="dproducts-topbar">
+        <p class="dproducts-topbar__eyebrow">معاملات</p>
+        <h1 class="dproducts-topbar__title">سفارش‌ها</h1>
+        <p class="dproducts-topbar__subtitle">محصول مورد نظر را انتخاب کنید و سفارش خود را ثبت کنید</p>
+      </header>
+
+      <div class="dproducts-tabs">
+        <button
+          type="button"
+          class="dproducts-tabs__btn"
+          :class="{ 'dproducts-tabs__btn--active': activekey === 'همه' }"
+          @click="activekey = 'همه'; changeTab()"
+        >
+          همه
+        </button>
+        <button
+          v-for="item in typeItems"
+          :key="item"
+          type="button"
+          class="dproducts-tabs__btn"
+          :class="{ 'dproducts-tabs__btn--active': activekey === item }"
+          @click="activekey = item; changeTab()"
+        >
+          {{ item }}
+        </button>
+      </div>
+
+      <a-spin :spinning="loading">
+        <div class="dproducts-grid">
+          <DesktopProductCard
+            v-for="item in items"
+            :key="item.id"
+            :product="item"
+            :inactive="isProductPriceInactive(item)"
+            @click="clickProduct(item)"
+          />
+          <div v-if="!loading && !items?.length" class="dproducts-empty">
+            محصولی برای نمایش وجود ندارد.
+          </div>
+        </div>
+      </a-spin>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import DesktopProductCard from './components/DesktopProductCard.vue'
+import { useProductsPageContext } from '../composables/useProductsPage'
+
+const {
+  activekey,
+  typeItems,
+  items,
+  loading,
+  changeTab,
+  clickProduct,
+  isProductPriceInactive,
+} = useProductsPageContext()
+</script>
+
+<style lang="less" src="./styles/desktop-products.less"></style>
diff --git a/src/views/base/products/desktop/components/DesktopProductCard.vue b/src/views/base/products/desktop/components/DesktopProductCard.vue
new file mode 100644
index 0000000..f0c13df
--- /dev/null
+++ b/src/views/base/products/desktop/components/DesktopProductCard.vue
@@ -0,0 +1,81 @@
+<template>
+  <button
+    type="button"
+    class="dproducts-card"
+    :class="{ 'dproducts-card--disabled': !isClickable }"
+    :disabled="!isClickable"
+    @click="$emit('click')"
+  >
+    <div class="dproducts-card__image-wrap">
+      <img :src="displayImage" class="dproducts-card__image" alt="">
+    </div>
+    <div class="dproducts-card__body">
+      <span class="dproducts-card__badge">{{ product.group_type }}</span>
+      <h3 class="dproducts-card__title">{{ product.title }}</h3>
+      <p class="dproducts-card__price">
+        <template v-if="isMeltedTradeGroup(product.group_type)">
+          {{ usePrice(goldPriceValue) }}
+        </template>
+        <template v-else>
+          {{ usePrice(price) }}
+        </template>
+      </p>
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import defaultImg from '@/assets/img/defaultAbshodeh.svg'
+import goyImg from '@/assets/img/goyImg.svg'
+import mokaabImg from '@/assets/img/mokaabImg.svg'
+import sekkeImg from '@/assets/img/sekkeImg.svg'
+import mesImg from '@/assets/img/mesImg.jpg'
+import noghrehImg from '@/assets/img/noghrehImg.webp'
+import parsianImg from '@/assets/img/parsianImg.svg'
+import type { Product } from '@/models/products'
+import { usePrice } from '@/utils/usePrice'
+import { getFileUrl } from '@/utils/file'
+import { getProductBuyPrice } from '@/utils/productPrice'
+import { isMeltedTradeGroup } from '@/utils/productCategories'
+
+const props = withDefaults(
+  defineProps<{
+    product: Product
+    inactive?: boolean
+  }>(),
+  { inactive: false },
+)
+
+defineEmits<{
+  click: []
+}>()
+
+const isClickable = computed(() => props.product.show && !props.inactive)
+
+const defaultImages: Record<string, string> = {
+  گوی: goyImg,
+  مکعب: mokaabImg,
+  سکه: sekkeImg,
+  مس: mesImg,
+  نقره: noghrehImg,
+  'سکه پارسیان': parsianImg,
+  'کاتد مس': defaultImg,
+  طلا: defaultImg,
+}
+
+const displayImage = computed(() => {
+  const fileUrl = getFileUrl(props.product.file)
+  if (fileUrl) return fileUrl
+  return defaultImages[props.product.group_type] ?? defaultImg
+})
+
+const price = computed(() => {
+  if (props.product.direct_price === 0) {
+    return ((props.product.price ?? 0) + (props.product.cash_fee_buy ?? 0)) * props.product.amount
+  }
+  return (props.product.price ?? 0) + (props.product.cash_fee_buy ?? 0)
+})
+
+const goldPriceValue = computed(() => getProductBuyPrice(props.product))
+</script>
diff --git a/src/views/base/products/desktop/styles/desktop-products.less b/src/views/base/products/desktop/styles/desktop-products.less
new file mode 100644
index 0000000..a01b804
--- /dev/null
+++ b/src/views/base/products/desktop/styles/desktop-products.less
@@ -0,0 +1,173 @@
+/* Premium desktop products / orders page */
+
+.dproducts {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dproducts__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dproducts-topbar {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 8px 0 0;
+  }
+}
+
+.dproducts-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 24px;
+
+  &__btn {
+    padding: 8px 14px;
+    border: 1px solid #e5e7eb;
+    border-radius: 999px;
+    background: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    color: #6b7280;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      border-color: #d1d5db;
+      color: #374151;
+    }
+
+    &--active {
+      background: @App-primary-color;
+      border-color: @App-primary-color;
+      color: #fff;
+    }
+  }
+}
+
+.dproducts-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.dproducts-card {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #f3f4f6;
+  border-radius: 14px;
+  overflow: hidden;
+  cursor: pointer;
+  text-align: right;
+  font-family: inherit;
+  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
+
+  &:hover:not(&--disabled) {
+    border-color: #e5e7eb;
+    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
+    transform: translateY(-1px);
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  &__image-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 160px;
+    background: #f9fafb;
+    padding: 20px;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+
+  &__body {
+    padding: 16px 18px 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  &__price {
+    font-size: 18px;
+    font-weight: 600;
+    color: @App-primary-color;
+    margin: 0;
+    direction: ltr;
+    text-align: right;
+  }
+
+  &__badge {
+    display: inline-flex;
+    align-self: flex-start;
+    padding: 4px 8px;
+    border-radius: 6px;
+    background: #f3f4f6;
+    font-size: 11px;
+    font-weight: 600;
+    color: #6b7280;
+  }
+}
+
+.dproducts-empty {
+  grid-column: 1 / -1;
+  padding: 48px 24px;
+  text-align: center;
+  color: #6b7280;
+  font-size: 14px;
+}
+
+.dproducts-order-panel {
+  :deep(.ant-modal-content) {
+    border-radius: 16px;
+    overflow: hidden;
+  }
+
+  :deep(.ant-modal-body) {
+    max-height: calc(100vh - 180px);
+    overflow-y: auto;
+    padding: 0 24px 24px;
+  }
+}
diff --git a/src/views/base/products/index.vue b/src/views/base/products/index.vue
index 14f9734..53b7ed0 100644
--- a/src/views/base/products/index.vue
+++ b/src/views/base/products/index.vue
@@ -1,279 +1,112 @@
 <template>
-  <div class="bottom-0  fixed top-0">
-    <img :src="img" alt="" class=" w-inherit "
-         :style="{  backgroundRepeat: 'repeat', }"
-    />
-  </div>
-  <a-spin :spinning="loading">
-    <div class=" !h-full overflow-y-scroll">
-      <div class="w-full flex justify-center top-0 py-5">
-        <ARadioGroup size="large" @change="changeTab" v-model:value="activekey" button-style="solid">
-          <ARadioButton class="cats" value="همه">همه</ARadioButton>
-          <ARadioButton class="cats" v-for="item in typeItems" :value="item">{{ item }}</ARadioButton>
-        </ARadioGroup>
-      </div>
+  <div class="products-page-root">
+    <ResponsiveViewPair>
+      <template #mobile>
+        <MobileProductsView />
+      </template>
+      <template #desktop>
+        <DesktopProductsView />
+      </template>
+    </ResponsiveViewPair>
 
-      <div class="mx-5 pb-30 pt-2" style="color: #1b2b07">
-        <div class="mt-3" v-for="item in items" :key="item.id">
-          <ProductItem
-              :ProductItem="item"
-              :inactive="isProductPriceInactive(item)"
-              @click="clickProduct(item)"
-          />
+    <BasicActionSheet v-if="!isDesktop" placement="bottom" v-model:show="showFilter">
+      <div v-if="showFilter" :key="orderSheetKey">
+        <indexGold
+          v-if="isMeltedTradeGroup(selectedProduct?.group_type)"
+          :ProductItem="selectedProduct"
+        />
+        <CopperSilver
+          v-else-if="isMetalCommodityGroup(selectedProduct?.group_type) && !isBoursecuDealProductGroup(selectedProduct?.group_type)"
+          :ProductItem="selectedProduct"
+        />
+        <DealProduct v-else :ProductItem="selectedProduct" @ordered="onProductOrdered" />
+      </div>
+    </BasicActionSheet>
+
+    <BasicModal
+      v-else
+      v-model:visible="showFilter"
+      class="dproducts-order-panel"
+      :title="selectedProduct?.title ?? 'ثبت سفارش'"
+      width="560px"
+      destroy-on-close
+    >
+      <div v-if="showFilter" :key="orderSheetKey">
+        <indexGold
+          v-if="isMeltedTradeGroup(selectedProduct?.group_type)"
+          :ProductItem="selectedProduct"
+        />
+        <CopperSilver
+          v-else-if="isMetalCommodityGroup(selectedProduct?.group_type) && !isBoursecuDealProductGroup(selectedProduct?.group_type)"
+          :ProductItem="selectedProduct"
+        />
+        <DealProduct v-else :ProductItem="selectedProduct" @ordered="onProductOrdered" />
+      </div>
+    </BasicModal>
+
+    <BasicModal v-model:visible="isProductInactive" custom-footer :closable="false">
+      <div class="text-center">
+        <div class="font-bold text-red-600">محصول فعال نیست</div>
+        <div class="mt-2 leading-relaxed text-gray-600">
+          در حال حاضر امکان معامله این محصول وجود ندارد.
         </div>
       </div>
-    </div>
-  </a-spin>
+      <template #footer>
+        <a-button type="primary" class="w-full" @click="isProductInactive = false">
+          متوجه شدم
+        </a-button>
+      </template>
+    </BasicModal>
 
-  <!--  <BasicActionSheet v-model:show="showFilter">-->
-  <!--    <indexGold ></indexGold>-->
-  <!--  </BasicActionSheet>-->
-
-  <BasicActionSheet placement="bottom" v-model:show="showFilter">
-    <div v-if="showFilter" :key="orderSheetKey">
-      <indexGold v-if="isMeltedTradeGroup(selectedProduct?.group_type)"
-                 :ProductItem="selectedProduct"
-      >
-      </indexGold>
-      <CopperSilver v-else-if="isMetalCommodityGroup(selectedProduct?.group_type) && !isBoursecuDealProductGroup(selectedProduct?.group_type)"
-                 :ProductItem="selectedProduct"
-      >
-      </CopperSilver>
-      <DealProduct v-else :ProductItem="selectedProduct" @ordered="onProductOrdered"></DealProduct>
-    </div>
-  </BasicActionSheet>
-
-  <BasicModal
-      v-model:visible="isProductInactive"
-      custom-footer
-      :closable="false"
-  >
-    <div class="text-center">
-      <div class="font-bold text-red-600">محصول فعال نیست</div>
-      <div class="mt-2 leading-relaxed text-gray-600">
-        در حال حاضر امکان معامله این محصول وجود ندارد.
+    <BasicModal v-model:visible="isAfterCloseTime" custom-footer :closable="false">
+      <div class="text-center">
+        <div class="font-bold text-red-600">مشتریان گرامی</div>
+        <div class="mt-2 leading-relaxed">
+          <p>فروشگاه در حال حاضر بسته است.</p>
+          <p>ساعت کاری فروشگاه از {{ openTime }} تا {{ closeTime }} می‌باشد.</p>
+          <p>از همراهی و اعتماد شما سپاسگزاریم.🤍</p>
+        </div>
       </div>
-    </div>
-
-    <template #footer>
-      <a-button type="primary" class="w-full" @click="isProductInactive = false">
-        متوجه شدم
-      </a-button>
-    </template>
-  </BasicModal>
-
-  <BasicModal
-      v-model:visible="isAfterCloseTime"
-      custom-footer
-      :closable="false"
-  >
-    <div class="text-center">
-      <div class="font-bold text-red-600">مشتریان گرامی</div>
-      <div class="mt-2 leading-relaxed">
-        <p>فروشگاه در حال حاضر بسته است.</p>
-        <p>ساعت کاری فروشگاه از {{ openTime }} تا {{ closeTime }} می‌باشد.</p>
-        <p>از همراهی و اعتماد شما سپاسگزاریم.🤍</p>
-      </div>
-    </div>
-
-    <template #footer>
-      <a-button type="primary" class="w-full" @click="isAfterCloseTime = false">
-        متوجه شدم
-      </a-button>
-    </template>
-  </BasicModal>
+      <template #footer>
+        <a-button type="primary" class="w-full" @click="isAfterCloseTime = false">
+          متوجه شدم
+        </a-button>
+      </template>
+    </BasicModal>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import router from '@/router'
-import ProductItem from '@/views/base/products/components/ProductItem.vue'
-import { getProducts } from '@/api/products'
-import { loading } from '@/utils'
-import type { Product } from '@/models/products'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import indexGold from '@/views/base/gold/index.vue'
 import CopperSilver from '@/views/base/copper&silver/index.vue'
 import DealProduct from '@/views/base/products/components/DealProduct.vue'
-import { cloneDeep } from 'lodash'
-import img from "@/assets/img/user_ly1.svg";
-import BasicModal from "@/components/BasicPacks/BasicModal.vue";
-import { isProductPriceInactive } from '@/utils/productPrice'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import ResponsiveViewPair from '@/layouts/components/ResponsiveViewPair.vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import { isMetalCommodityGroup, isMeltedTradeGroup } from '@/utils/productCategories'
 import { isBoursecuDealProductGroup } from '@/utils/productDealMethod'
-import { loadServiceFeeFromSettings } from '@/utils/serviceFee'
+import { useProductsPageProvider } from './composables/useProductsPage'
+import MobileProductsView from './mobile/MobileProductsView.vue'
+import DesktopProductsView from './desktop/DesktopProductsView.vue'
 
-const activekey = ref('طلا' ||'آبشده')
-const showFilter = ref(false)
-const orderSheetKey = ref(0)
-const selectedProduct = ref<Product>()
-const closeTime = ref<string>('')
-const openTime = ref<string>('')
-const isAfterCloseTime = ref<boolean>(false)
-const isProductInactive = ref<boolean>(false)
+const isDesktop = useDesktopBreakpoint()
 
-watch([openTime, closeTime], ([open, close]) => {
-  if (!open || !close) return
-  const now = new Date()
-  const currentSeconds = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds()
-  const [oh, om, os] = open.split(':').map(Number)
-  const [ch, cm, cs] = close.split(':').map(Number)
-  const openSeconds = oh * 3600 + om * 60 + os
-  const closeSeconds = ch * 3600 + cm * 60 + cs
-  isAfterCloseTime.value = currentSeconds < openSeconds || currentSeconds > closeSeconds
-})
-
-function clickProduct(item?: Product) {
-  if (!item?.show) return
-
-  if (isProductPriceInactive(item)) {
-    showFilter.value = false
-    isProductInactive.value = true
-    return
-  }
-
-  orderSheetKey.value += 1
-  selectedProduct.value = cloneDeep(item)
-  showFilter.value = true
-}
-
-function onProductOrdered() {
-  showFilter.value = false
-}
-
-watch(showFilter, (open) => {
-  if (!open) {
-    orderSheetKey.value += 1
-  }
-})
-
-function changeTab() {
-  if (activekey.value != 'همه') {
-    items.value = firstItems.value?.filter((val) =>
-      val.group_type == activekey.value
-    )
-  } else items.value = firstItems.value
-}
-
-const firstItems = ref<Product[]>()
-const items = ref<Product[]>()
-const typeItems = ref([])
-let productListInterval: ReturnType<typeof setInterval> | undefined
-
-/**
- * رفرش بی‌صدای لیست محصولات (هر ۱۰ ثانیه تا وقتی در این صفحه‌ایم).
- * آپدیت درجا انجام می‌شود تا لیست re-render کامل نشود و نپرد؛
- * فقط اگر محصولی اضافه/حذف شده باشد ساختار لیست عوض می‌شود.
- */
-async function refreshProducts() {
-  try {
-    const fresh = await getProducts()
-    if (!fresh?.length) {
-      return
-    }
-
-    fresh.forEach((val) => {
-      if (!typeItems.value.includes(val.group_type)) {
-        typeItems.value.push(val.group_type)
-      }
-    })
-
-    const freshById = new Map(fresh.map((p) => [p.id, p]))
-    const current = firstItems.value
-
-    if (!current?.length) {
-      firstItems.value = fresh
-      changeTab()
-      return
-    }
-
-    // آپدیت فیلدهای محصولات موجود روی همان آبجکت‌ها (items همین رفرنس‌ها را دارد)
-    current.forEach((item) => {
-      const updated = freshById.get(item.id)
-      if (updated) {
-        Object.assign(item, updated)
-      }
-    })
-
-    const currentIds = new Set(current.map((p) => p.id))
-    const hasAdded = fresh.some((p) => !currentIds.has(p.id))
-    const hasRemoved = current.some((p) => !freshById.has(p.id))
-    if (hasAdded || hasRemoved) {
-      firstItems.value = fresh
-      changeTab()
-    }
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-onMounted(async () => {
-  try {
-    loading.value = true
-    items.value = await getProducts()
-
-    if (items.value?.length) {
-      closeTime.value = items.value[0].auto_close_at
-      openTime.value = items.value[0].auto_open_at
-    }
-
-    items.value?.forEach((val, index) => {
-      if (!typeItems.value.includes(val.group_type)){
-        typeItems.value.push(val.group_type)
-      }
-      // typeItems.value[index] = val.group_type
-    })
-    firstItems.value = items.value
-    await loadServiceFeeFromSettings()
-    // فقط لیست محصولات هر ۱۰ ثانیه — last فقط در صفحه اصلی poll می‌شود
-    productListInterval = setInterval(refreshProducts, 10000)
-
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    if (router.currentRoute.value.query.cat=="coin"){
-      activekey.value="سکه"
-      changeTab()
-    }
-
-    if (router.currentRoute.value.query.state) {
-      if (router.currentRoute.value.query.product) {
-        clickProduct(items.value?.find(x => x.title === 'سکه'))
-      } else {
-        clickProduct(items.value?.find(x => x.title === 'آبشده نقدی'))
-      }
-    }
-  }
-})
-onUnmounted(() => {
-  if (productListInterval) {
-    clearInterval(productListInterval)
-    productListInterval = undefined
-  }
-})
-// watch(lastPrice, async () => {
-//   // console.log(items);
-//   items.value?.forEach((val) => {
-//     // console.log(lastPrice.value)
-//     if (val.group_type == 'آبشده') {
-//       val.price = lastPrice.value?.price_last
-//       val.sellPrice = lastPrice.value?.sell
-//     } else {
-//       val.price = val.amount * lastPrice.value?.price_last
-//       val.sellPrice = val.amount * lastPrice.value?.sell
-//
-//       // console.log(lastPrice.value?.price_last + "*" + val.amount + '  ' + val.price)
-//     }
-//
-//   })
-// })
+const {
+  showFilter,
+  orderSheetKey,
+  selectedProduct,
+  isProductInactive,
+  isAfterCloseTime,
+  openTime,
+  closeTime,
+  onProductOrdered,
+} = useProductsPageProvider()
 </script>
 
-<style lang="less">
-.cats:hover span {
-  --un-text-opacity: 1;
-  color: rgba(206, 163, 76, var(--un-text-opacity))!important;
+<style scoped>
+.products-page-root {
+  min-height: 100%;
+  height: 100%;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/base/products/mobile/MobileProductsView.vue b/src/views/base/products/mobile/MobileProductsView.vue
new file mode 100644
index 0000000..2c30f10
--- /dev/null
+++ b/src/views/base/products/mobile/MobileProductsView.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="products-mobile-root">
+    <div class="bottom-0 fixed top-0">
+      <img :src="img" alt="" class="w-inherit" :style="{ backgroundRepeat: 'repeat' }" />
+    </div>
+    <a-spin :spinning="loading">
+      <div class="!h-full overflow-y-scroll">
+        <div class="w-full flex justify-center top-0 py-5">
+          <ARadioGroup
+            v-model:value="activekey"
+            size="large"
+            button-style="solid"
+            @change="changeTab"
+          >
+            <ARadioButton class="cats" value="همه">همه</ARadioButton>
+            <ARadioButton
+              v-for="item in typeItems"
+              :key="item"
+              class="cats"
+              :value="item"
+            >
+              {{ item }}
+            </ARadioButton>
+          </ARadioGroup>
+        </div>
+
+        <div class="mx-5 pb-30 pt-2" style="color: #1b2b07">
+          <div v-for="item in items" :key="item.id" class="mt-3">
+            <ProductItem
+              :ProductItem="item"
+              :inactive="isProductPriceInactive(item)"
+              @click="clickProduct(item)"
+            />
+          </div>
+        </div>
+      </div>
+    </a-spin>
+  </div>
+</template>
+
+<script setup lang="ts">
+import img from '@/assets/img/user_ly1.svg'
+import ProductItem from '@/views/base/products/components/ProductItem.vue'
+import { useProductsPageContext } from '../composables/useProductsPage'
+
+const {
+  activekey,
+  typeItems,
+  items,
+  loading,
+  changeTab,
+  clickProduct,
+  isProductPriceInactive,
+} = useProductsPageContext()
+</script>
+
+<style lang="less">
+.cats:hover span {
+  --un-text-opacity: 1;
+  color: rgba(206, 163, 76, var(--un-text-opacity)) !important;
+}
+</style>
diff --git a/src/views/base/rules/components/RulesContentPanel.vue b/src/views/base/rules/components/RulesContentPanel.vue
new file mode 100644
index 0000000..a101fd0
--- /dev/null
+++ b/src/views/base/rules/components/RulesContentPanel.vue
@@ -0,0 +1,68 @@
+<template>
+  <div
+    :class="variant === 'desktop' ? 'drules-content' : 'rules-panel mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4'"
+  >
+    <div :class="variant === 'desktop' ? 'drules-content__title' : 'font-bold text-sm text-primary'">
+      {{ rulesTitle }}
+    </div>
+    <div
+      :class="variant === 'desktop' ? 'drules-content__divider' : 'w-full h-1px my-3 bg-secondary'"
+    ></div>
+    <div
+      v-for="(block, blockIndex) in rulesBlocks"
+      :key="`block-${blockIndex}`"
+      :class="variant === 'desktop' ? 'drules-content__block' : 'rules-block'"
+    >
+      <div
+        v-if="block.title"
+        :class="variant === 'desktop' ? 'drules-content__block-title' : 'font-bold text-sm text-primary mt-4 mb-2'"
+      >
+        {{ block.title }}
+      </div>
+      <p
+        v-for="(rule, index) in block.items"
+        :key="`rule-${blockIndex}-${index}`"
+        :class="variant === 'desktop' ? 'drules-content__paragraph' : 'rules-paragraph'"
+      >
+        {{ rule }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useRulesPageContext } from '../composables/useRulesPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const { rulesTitle, rulesBlocks } = useRulesPageContext()
+</script>
+
+<style scoped>
+.rules-panel {
+  font-size: 0.875rem;
+  line-height: 1.75rem;
+}
+
+.rules-block + .rules-block {
+  margin-top: 0.5rem;
+}
+
+.rules-paragraph {
+  margin: 0 0 1rem;
+  text-align: justify;
+  line-height: 1.9;
+  word-break: normal;
+  overflow-wrap: break-word;
+  white-space: normal;
+}
+
+.rules-paragraph:last-child {
+  margin-bottom: 0;
+}
+</style>
diff --git a/src/views/base/rules/components/RulesSupportActions.vue b/src/views/base/rules/components/RulesSupportActions.vue
new file mode 100644
index 0000000..df00329
--- /dev/null
+++ b/src/views/base/rules/components/RulesSupportActions.vue
@@ -0,0 +1,41 @@
+<template>
+  <div :class="variant === 'desktop' ? 'drules-support' : 'wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white'">
+    <a class="w-full" :href="supportHref">
+      <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
+    </a>
+    <a :href="baleHref" target="_blank" rel="noopener noreferrer">
+      <img src="@/assets/img/bale.png" alt="بله" :class="variant === 'desktop' ? 'drules-support__bale' : 'h-10 w-10'" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { useRulesPageContext } from '../composables/useRulesPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+const {
+  config,
+  getProjectSupportPhoneLink,
+  getProjectBaleLink,
+} = useRulesPageContext()
+
+const supportHref = computed(() =>
+  config.config.name === 'garoosi'
+    ? 'tel:09031265925'
+    : getProjectSupportPhoneLink(),
+)
+
+const baleHref = computed(() =>
+  config.config.name === 'garoosi'
+    ? 'https://ble.ir/garoosigallery'
+    : getProjectBaleLink(),
+)
+</script>
diff --git a/src/views/base/rules/composables/useRulesPage.ts b/src/views/base/rules/composables/useRulesPage.ts
new file mode 100644
index 0000000..7bb7c93
--- /dev/null
+++ b/src/views/base/rules/composables/useRulesPage.ts
@@ -0,0 +1,55 @@
+import { computed, inject, provide, type ComputedRef, type InjectionKey } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+import {
+  getProjectBaleLink,
+  getProjectSupportPhoneLink,
+  isBoursecuProject,
+} from '@/utils/config'
+import { getRulesBlocks, getRulesTitle, type RulesBlock } from '../rulesContent'
+
+export interface RulesPageContext {
+  config: ReturnType<typeof useConfigStore>
+  nameProject: ComputedRef<string>
+  isBoursecu: ComputedRef<boolean>
+  rulesTitle: ComputedRef<string>
+  rulesBlocks: ComputedRef<RulesBlock[]>
+  getProjectSupportPhoneLink: typeof getProjectSupportPhoneLink
+  getProjectBaleLink: typeof getProjectBaleLink
+}
+
+export const RULES_PAGE_CONTEXT_KEY: InjectionKey<RulesPageContext> = Symbol('rulesPageContext')
+
+export function useRulesPage() {
+  const config = useConfigStore()
+
+  const nameProject = computed(
+    () => config.config?.name_fa || config.config?.name || 'بورس مس',
+  )
+
+  const isBoursecu = computed(() => isBoursecuProject())
+
+  const rulesTitle = computed(() => getRulesTitle(nameProject.value, isBoursecu.value))
+
+  const rulesBlocks = computed(() => getRulesBlocks(nameProject.value, isBoursecu.value))
+
+  const context: RulesPageContext = {
+    config,
+    nameProject,
+    isBoursecu,
+    rulesTitle,
+    rulesBlocks,
+    getProjectSupportPhoneLink,
+    getProjectBaleLink,
+  }
+
+  provide(RULES_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useRulesPageContext() {
+  const context = inject(RULES_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useRulesPageContext must be used within a page that calls useRulesPage()')
+  }
+  return context
+}
diff --git a/src/views/base/rules/desktop/DesktopRulesView.vue b/src/views/base/rules/desktop/DesktopRulesView.vue
new file mode 100644
index 0000000..5bc4013
--- /dev/null
+++ b/src/views/base/rules/desktop/DesktopRulesView.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="drules">
+    <div class="drules__container">
+      <header class="drules-topbar">
+        <button type="button" class="drules-topbar__back" @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          <span>بازگشت</span>
+        </button>
+        <div class="drules-topbar__meta">
+          <p class="drules-topbar__eyebrow">حقوقی</p>
+          <h1 class="drules-topbar__title">قوانین و مقررات</h1>
+        </div>
+      </header>
+
+      <div class="drules-layout">
+        <section class="drules-surface drules-main">
+          <div class="drules-main__intro">
+            <div class="drules-main__logo">
+              <BasicIcon icon="vuesax-linear:task" size="28" />
+            </div>
+            <div>
+              <h2 class="drules-main__project">{{ nameProject }}</h2>
+              <p class="drules-main__tagline">شرایط استفاده از خدمات و تعهدات کاربران</p>
+            </div>
+          </div>
+
+          <RulesContentPanel variant="desktop" />
+        </section>
+
+        <aside class="drules-surface drules-side">
+          <h3 class="drules-side__title">پشتیبانی و ارتباط</h3>
+          <p class="drules-side__text">
+            در صورت نیاز به توضیح بیشتر درباره قوانین، با پشتیبانی تماس بگیرید.
+          </p>
+          <RulesSupportActions variant="desktop" />
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import RulesContentPanel from '../components/RulesContentPanel.vue'
+import RulesSupportActions from '../components/RulesSupportActions.vue'
+import { useRulesPageContext } from '../composables/useRulesPage'
+
+const { nameProject } = useRulesPageContext()
+</script>
diff --git a/src/views/base/rules/desktop/styles/desktop-rules.less b/src/views/base/rules/desktop/styles/desktop-rules.less
new file mode 100644
index 0000000..9487519
--- /dev/null
+++ b/src/views/base/rules/desktop/styles/desktop-rules.less
@@ -0,0 +1,212 @@
+/* Premium desktop rules page */
+
+.drules {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.drules__container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.drules-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.drules-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
+  gap: 20px;
+  align-items: start;
+}
+
+.drules-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.drules-main {
+  padding: 28px;
+
+  &__intro {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef0f3;
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: rgba(9, 61, 81, 0.08);
+    color: @App-primary-color;
+    flex-shrink: 0;
+  }
+
+  &__project {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 4px;
+  }
+
+  &__tagline {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+  }
+}
+
+.drules-content {
+  padding: 20px;
+  border: 1px solid rgba(9, 61, 81, 0.12);
+  border-radius: 12px;
+  background: rgba(9, 61, 81, 0.02);
+  color: @App-primary-color;
+
+  &__title {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 1.6;
+    margin: 0;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 1px;
+    background: rgba(9, 61, 81, 0.12);
+    margin: 16px 0;
+  }
+
+  &__block + &__block {
+    margin-top: 20px;
+    padding-top: 20px;
+    border-top: 1px solid rgba(9, 61, 81, 0.08);
+  }
+
+  &__block-title {
+    font-size: 15px;
+    font-weight: 700;
+    margin: 0 0 12px;
+    color: inherit;
+  }
+
+  &__paragraph {
+    margin: 0 0 14px;
+    font-size: 14px;
+    line-height: 1.9;
+    text-align: justify;
+    color: inherit;
+    word-break: normal;
+    overflow-wrap: break-word;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.drules-side {
+  padding: 24px;
+  position: sticky;
+  top: 24px;
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 8px;
+  }
+
+  &__text {
+    font-size: 13px;
+    line-height: 1.7;
+    color: #6b7280;
+    margin: 0 0 20px;
+  }
+}
+
+.drules-support {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  > a:first-child {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__bale {
+    width: 40px;
+    height: 40px;
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .drules-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .drules-side {
+    position: static;
+  }
+}
diff --git a/src/views/base/rules/index.vue b/src/views/base/rules/index.vue
index ac33a20..deab7c7 100644
--- a/src/views/base/rules/index.vue
+++ b/src/views/base/rules/index.vue
@@ -1,193 +1,24 @@
 <template>
-  <div>
-    <div class="wrap-fix z-1 bg-white py-3 px-3 text-primary font-bold drop-shadow flex">
-      <div @click="router.back()" class="cursor-pointer">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2">قوانین و مقررات</div>
-    </div>
-    <div class="pt-20">
-      <div>
-        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
-      </div>
-      <div class="text-justify text-base z-200000 relative">
-        <div class="px-10">
-<!--          <div class="h-20vh flex justify-center">
-            <img :src="logoFull" class="mb-20 h-15vh mt-5" />
-          </div>-->
-          <div class="overflow-y-auto h-60vh pb-20 border-primary">
-            <div class="rules-panel mt-5 border-solid border-2 border-primary text-primary rounded-[12px] p-4">
-              <div class="font-bold text-sm text-primary">
-                {{ rulesTitle }}
-              </div>
-              <div class="w-full h-1px my-3 bg-secondary"></div>
-              <div
-                v-for="(block, blockIndex) in rulesBlocks"
-                :key="`block-${blockIndex}`"
-                class="rules-block"
-              >
-                <div
-                  v-if="block.title"
-                  class="font-bold text-sm text-primary mt-4 mb-2"
-                >
-                  {{ block.title }}
-                </div>
-                <p
-                  v-for="(rule, index) in block.items"
-                  :key="`rule-${blockIndex}-${index}`"
-                  class="rules-paragraph"
-                >
-                  {{ rule }}
-                </p>
-              </div>
-            </div>
-
-          </div>
-        </div>
-        <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
-          <a class="w-full" href="tel:09031265925">
-            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-          </a>
-          <a href="https://ble.ir/garoosigallery">
-            <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
-          </a>
-        </div>
-        <div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
-          <a class="w-full" :href="getProjectSupportPhoneLink()">
-            <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-          </a>
-          <a :href="getProjectBaleLink()" target="_blank" rel="noopener noreferrer">
-            <img src="@/assets/img/bale.png" alt="بله" class="h-10 w-10"/>
-          </a>
-        </div>
-      </div>
-    </div>
-    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
+  <div class="rules-page-root">
+    <DesktopRulesView v-show="isDesktop" />
+    <MobileRulesView v-show="!isDesktop" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, computed } from 'vue'
-import img from '@/assets/img/user_ly1.svg'
-// import gr_bottom from './assets/img/gr_bottom_white.svg'
-import { loading } from '@/utils'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import { lengthValidation, required } from '@/utils/inputRules'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import type { User } from '@/models/login'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
-import type { FormInstance } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
-import { updateMe } from '@/api/me'
-import { useUserStore } from '@/store/userStore'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
-import {useConfigStore} from "../../../store/configStore";
-import {getProjectBaleLink, getProjectSupportPhoneLink, getReferralShareText, getReferralShareTitle, isBoursecuProject} from "@/utils/config";
-import {
-  getRulesBlocks,
-  getRulesTitle,
-} from './rulesContent'
-const config = useConfigStore()
-const userFormState = ref<User>({
-  fname: '',
-  lname: '',
-  mobile: undefined,
-  birth_date: '',
-  phone_number: '',
-  province: '',
-  city: '',
-  n_code: undefined
-})
-const formRef = ref<FormInstance>()
-const userStore = useUserStore()
-const nameProject = computed(() => config.config?.name_fa || config.config?.name || 'بورس مس')
-const isBoursecu = computed(() => isBoursecuProject())
-const rulesTitle = computed(() => getRulesTitle(nameProject.value, isBoursecu.value))
-const rulesBlocks = computed(() => getRulesBlocks(nameProject.value, isBoursecu.value))
-// const editPassVisible = ref<boolean>(false)
-const editPassVisible = ref<boolean>(false)
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useRulesPage } from './composables/useRulesPage'
+import DesktopRulesView from './desktop/DesktopRulesView.vue'
+import MobileRulesView from './mobile/MobileRulesView.vue'
 
-function setForm() {
-  userFormState.value = userStore.userInfo
-}
+const isDesktop = useDesktopBreakpoint()
 
-function copyCode() {
-  // nextTick(() => {
-  const val = userStore.userInfo?.referral_id
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-function shareCode() {
-  const val = getReferralShareText({
-    userName: userStore.userInfo?.name,
-    projectName: nameProject.value,
-    referralId: userStore.userInfo?.referral_id,
-  })
-  navigator.share({
-    title: getReferralShareTitle(nameProject.value),
-    text: val
-  })
-}
-
-const resetData = () => {
-  formRef.value?.resetFields()
-  userFormState.value = {
-    fname: '',
-    lname: '',
-    mobile: undefined,
-    birth_date: '',
-    phone_number: '',
-    province: '',
-    city: '',
-    n_code: undefined
-  }
-}
-
-onMounted(() => {
-  setForm()
-})
-
-function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      await updateMe(userFormState.value)
-      await userStore.getMyInfo()
-      editPassVisible.value = false
-      message.success('اطلاعات شما با موفقیت به روز رسانی شد')
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
+useRulesPage()
 </script>
 
 <style scoped>
-.rules-panel {
-  font-size: 0.875rem;
-  line-height: 1.75rem;
-}
-
-.rules-block + .rules-block {
-  margin-top: 0.5rem;
-}
-
-.rules-paragraph {
-  margin: 0 0 1rem;
-  text-align: justify;
-  line-height: 1.9;
-  word-break: normal;
-  overflow-wrap: break-word;
-  white-space: normal;
-}
-
-.rules-paragraph:last-child {
-  margin-bottom: 0;
+.rules-page-root {
+  min-height: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/views/base/rules/mobile/MobileRulesView.vue b/src/views/base/rules/mobile/MobileRulesView.vue
new file mode 100644
index 0000000..82a9ee6
--- /dev/null
+++ b/src/views/base/rules/mobile/MobileRulesView.vue
@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <div class="wrap-fix z-1 bg-white py-3 px-3 text-primary font-bold drop-shadow flex">
+      <div class="cursor-pointer" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">قوانین و مقررات</div>
+    </div>
+    <div class="pt-20">
+      <div>
+        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
+      </div>
+      <div class="text-justify text-base z-200000 relative">
+        <div class="px-10">
+          <div class="overflow-y-auto h-60vh pb-20 border-primary">
+            <RulesContentPanel variant="mobile" />
+          </div>
+        </div>
+        <RulesSupportActions variant="mobile" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import img from '@/assets/img/user_ly1.svg'
+import router from '@/router'
+import RulesContentPanel from '../components/RulesContentPanel.vue'
+import RulesSupportActions from '../components/RulesSupportActions.vue'
+</script>
diff --git a/src/views/base/rules/permissions/composables/usePermissionsPage.ts b/src/views/base/rules/permissions/composables/usePermissionsPage.ts
new file mode 100644
index 0000000..33192e8
--- /dev/null
+++ b/src/views/base/rules/permissions/composables/usePermissionsPage.ts
@@ -0,0 +1,26 @@
+import { inject, provide, type InjectionKey } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+
+export interface PermissionsPageContext {
+  config: ReturnType<typeof useConfigStore>
+}
+
+export const PERMISSIONS_PAGE_CONTEXT_KEY: InjectionKey<PermissionsPageContext> =
+  Symbol('permissionsPageContext')
+
+export function usePermissionsPage() {
+  const config = useConfigStore()
+
+  const context: PermissionsPageContext = { config }
+
+  provide(PERMISSIONS_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function usePermissionsPageContext() {
+  const context = inject(PERMISSIONS_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('usePermissionsPageContext must be used within a page that calls usePermissionsPage()')
+  }
+  return context
+}
diff --git a/src/views/base/rules/permissions/desktop/DesktopPermissionsView.vue b/src/views/base/rules/permissions/desktop/DesktopPermissionsView.vue
new file mode 100644
index 0000000..c715a9a
--- /dev/null
+++ b/src/views/base/rules/permissions/desktop/DesktopPermissionsView.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="dperm">
+    <div class="dperm__container">
+      <header class="dperm-topbar">
+        <button type="button" class="dperm-topbar__back" @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          <span>بازگشت</span>
+        </button>
+        <div class="dperm-topbar__meta">
+          <p class="dperm-topbar__eyebrow">مجوزها</p>
+          <h1 class="dperm-topbar__title">مجوز ها</h1>
+        </div>
+      </header>
+
+      <div class="dperm-layout">
+        <section class="dperm-surface dperm-main">
+          <div class="dperm-main__intro">
+            <div class="dperm-main__logo">
+              <BasicIcon icon="vuesax-linear:document-text" size="28" />
+            </div>
+            <div>
+              <h2 class="dperm-main__project">{{ config.config.name_fa }}</h2>
+              <p class="dperm-main__tagline">مشاهده جواز کسب و کار</p>
+            </div>
+          </div>
+
+          <div class="dperm-document">
+            <h3 class="dperm-document__title">جواز کسب و کار</h3>
+            <div class="dperm-document__frame">
+              <img
+                :src="permissionImage"
+                alt="جواز کسب و کار"
+                class="dperm-document__image"
+              />
+            </div>
+          </div>
+        </section>
+
+        <aside class="dperm-surface dperm-side">
+          <h3 class="dperm-side__title">پشتیبانی و ارتباط</h3>
+          <p class="dperm-side__text">
+            در صورت نیاز به راهنمایی یا پاسخ به سوالات، از راه‌های زیر با ما در ارتباط باشید.
+          </p>
+          <SupportContactBar variant="desktop" />
+        </aside>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import SupportContactBar from '@/components/SupportContactBar.vue'
+import permissionImage from '@/assets/img/permision.png'
+import router from '@/router'
+import { usePermissionsPageContext } from '../composables/usePermissionsPage'
+
+const { config } = usePermissionsPageContext()
+</script>
diff --git a/src/views/base/rules/permissions/desktop/styles/desktop-permissions.less b/src/views/base/rules/permissions/desktop/styles/desktop-permissions.less
new file mode 100644
index 0000000..8eb1ad6
--- /dev/null
+++ b/src/views/base/rules/permissions/desktop/styles/desktop-permissions.less
@@ -0,0 +1,168 @@
+/* Premium desktop permissions page */
+
+.dperm {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dperm__container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dperm-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dperm-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
+  gap: 20px;
+  align-items: start;
+}
+
+.dperm-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dperm-main {
+  padding: 28px;
+
+  &__intro {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #eef0f3;
+  }
+
+  &__logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: rgba(9, 61, 81, 0.08);
+    color: @App-primary-color;
+    flex-shrink: 0;
+  }
+
+  &__project {
+    font-size: 18px;
+    font-weight: 700;
+    color: #111827;
+    margin: 0 0 4px;
+  }
+
+  &__tagline {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+  }
+}
+
+.dperm-document {
+  &__title {
+    font-size: 16px;
+    font-weight: 700;
+    color: @App-primary-color;
+    text-align: center;
+    margin: 0 0 20px;
+  }
+
+  &__frame {
+    padding: 16px;
+    border: 1px solid rgba(9, 61, 81, 0.12);
+    border-radius: 12px;
+    background: rgba(9, 61, 81, 0.02);
+  }
+
+  &__image {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+  }
+}
+
+.dperm-side {
+  padding: 24px;
+  position: sticky;
+  top: 24px;
+
+  &__title {
+    font-size: 15px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 8px;
+  }
+
+  &__text {
+    font-size: 13px;
+    line-height: 1.7;
+    color: #6b7280;
+    margin: 0 0 20px;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .dperm-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .dperm-side {
+    position: static;
+  }
+}
diff --git a/src/views/base/rules/permissions/mobile/MobilePermissionsView.vue b/src/views/base/rules/permissions/mobile/MobilePermissionsView.vue
new file mode 100644
index 0000000..6bca383
--- /dev/null
+++ b/src/views/base/rules/permissions/mobile/MobilePermissionsView.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div class="bg-white wra-fix z-1 py-3 px-3 text-primary font-bold drop-shadow flex">
+      <div class="cursor-pointer" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2">مجوز ها</div>
+    </div>
+    <div class="pt-20">
+      <div>
+        <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
+      </div>
+      <div class="px-1 text-justify text-base z-200000 relative">
+        <div>
+          <div class="overflow-y-auto h-65vh pb-20 border-primary">
+            <div class="font-bold text-sm text-primary text-center">جواز کسب و کار</div>
+            <img :src="permissionImage" alt="جواز کسب و کار" class="w-full" />
+            <div class="mt-5 text-xs"></div>
+            <SupportContactBar />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import SupportContactBar from '@/components/SupportContactBar.vue'
+import img from '@/assets/img/user_ly1.svg'
+import permissionImage from '@/assets/img/permision.png'
+import router from '@/router'
+</script>
diff --git a/src/views/base/rules/permissions/permissions.vue b/src/views/base/rules/permissions/permissions.vue
index e65ce5f..d11557f 100644
--- a/src/views/base/rules/permissions/permissions.vue
+++ b/src/views/base/rules/permissions/permissions.vue
@@ -1,152 +1,24 @@
 <template>
-  <div class="bg-white wra-fix z-1 py-3 px-3 text-primary font-bold drop-shadow flex">
-    <div @click="router.back()" class="cursor-pointer">
-      <BasicIcon icon="vuesax-linear:arrow-right-1" />
-    </div>
-    <div class="mr-2">مجوز ها</div>
-  </div>
-  <div class="pt-20">
-    <div class="">
-      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0">
-    </div>
-    <div class="px-1 text-justify text-base z-200000 relative">
-      <div>
-<!--        <img :src="logoFull" class="mb-20 mt-5 px-10" />-->
-        <div class="overflow-y-auto h-65vh pb-20 border-primary">
-          <div class=" font-bold text-sm text-primary text-center">جواز کسب و کار</div>
-         <img :src="permissionImage" alt="جواز کسب و کار" class="w-full">
-          <div class="mt-5 text-xs"></div>
-          <div v-if="config.config.name === 'garoosi'" class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
-            <a class="w-full" href="tel:09031265925">
-              <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-            </a>
-            <a href="https://ble.ir/garoosigallery">
-              <img src="@/assets/img/bale.png" alt="" class="h-10 w-10"/>
-            </a>
-          </div>
-          <div v-else class="wrap-fix bottom-0 px-10 pb-3rem flex gap-2 bg-white">
-            <a class="w-full" :href="getProjectSupportPhoneLink()">
-              <BasicButton class="w-full" type="primary">تماس با پشتیبانی</BasicButton>
-            </a>
-            <a :href="getProjectBaleLink()" target="_blank" rel="noopener noreferrer">
-              <img src="@/assets/img/bale.png" alt="بله" class="h-10 w-10"/>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--    <ActionSheet v-model:show="editPassVisible">salam</ActionSheet>-->
+  <div class="permissions-page-root">
+    <DesktopPermissionsView v-show="isDesktop" />
+    <MobilePermissionsView v-show="!isDesktop" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { usePermissionsPage } from './composables/usePermissionsPage'
+import DesktopPermissionsView from './desktop/DesktopPermissionsView.vue'
+import MobilePermissionsView from './mobile/MobilePermissionsView.vue'
 
-import { onMounted, reactive, ref } from 'vue'
-import img from '@/assets/img/user_ly1.svg'
-import permissionImage from '@/assets/img/permision.png'
-// import gr_bottom from './assets/img/gr_bottom_white.svg'
-import { loading } from '@/utils'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import type { User } from '@/models/login'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
-import type { FormInstance } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
-import { updateMe } from '@/api/me'
-import { useUserStore } from '@/store/userStore'
-import {useConfigStore} from "@/store/configStore";
-import {getProjectBaleLink, getProjectSupportPhoneLink, getReferralShareText, getReferralShareTitle} from "@/utils/config";
+const isDesktop = useDesktopBreakpoint()
 
-const config=useConfigStore()
-
-const userFormState = ref<User>({
-  fname: '',
-  lname: '',
-  mobile: undefined,
-  birth_date: '',
-  phone_number: '',
-  province: '',
-  city: '',
-  n_code: undefined
-})
-const formRef = ref<FormInstance>()
-const userStore = useUserStore()
-const nameProject= useConfigStore().config.name_fa
-
-// const editPassVisible = ref<boolean>(false)
-const editPassVisible = ref<boolean>(false)
-
-function setForm() {
-  userFormState.value = userStore.userInfo
-}
-
-function copyCode() {
-  // nextTick(() => {
-  const val = userStore.userInfo?.referral_id
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-function shareCode() {
-  const val = getReferralShareText({
-    userName: userStore.userInfo?.name,
-    projectName: nameProject,
-    referralId: userStore.userInfo?.referral_id,
-  })
-  navigator.share({
-    title: getReferralShareTitle(nameProject),
-    text: val
-  })
-}
-
-const resetData = () => {
-  formRef.value?.resetFields()
-  userFormState.value = {
-    fname: '',
-    lname: '',
-    mobile: undefined,
-    birth_date: '',
-    phone_number: '',
-    province: '',
-    city: '',
-    n_code: undefined
-  }
-}
-
-
-onMounted(() => {
-  setForm()
-})
-
-function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      await updateMe(userFormState.value)
-      await userStore.getMyInfo()
-      editPassVisible.value = false
-      message.success('اطلاعات شما با موفقیت به روز رسانی شد')
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
+usePermissionsPage()
 </script>
 
 <style scoped>
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
+.permissions-page-root {
+  min-height: 100%;
+  height: 100%;
 }
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/base/transactions/BoursecuTransactionsPage.vue b/src/views/base/transactions/BoursecuTransactionsPage.vue
new file mode 100644
index 0000000..fa1e702
--- /dev/null
+++ b/src/views/base/transactions/BoursecuTransactionsPage.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="boursecu-transactions pb-[calc(var(--app-bottom-chrome-height)+1rem)]">
+    <div class="px-4 pt-4 pb-2">
+      <h1 class="text-xl font-bold text-gray-900">گزارش‌ها</h1>
+    </div>
+
+    <div class="boursecu-transactions__tabs px-4">
+      <div class="flex gap-5 overflow-x-auto whitespace-nowrap pb-1">
+        <button
+          v-for="tab in BOURSECU_TRANSACTION_TABS"
+          :key="tab.id"
+          type="button"
+          class="boursecu-transactions__tab shrink-0"
+          :class="{ 'boursecu-transactions__tab--active': activeTabId === tab.id }"
+          @click="setActiveTab(tab.id)"
+        >
+          {{ tab.label }}
+        </button>
+      </div>
+    </div>
+
+    <div v-if="activeTab.showTradeToggle" class="px-4 mt-4 flex justify-end">
+      <div class="boursecu-transactions__trade-toggle">
+        <button
+          type="button"
+          class="boursecu-transactions__trade-toggle-item"
+          :class="{ 'boursecu-transactions__trade-toggle-item--active': tradeSide === 'buy' }"
+          @click="setTradeSide('buy')"
+        >
+          خرید
+        </button>
+        <button
+          type="button"
+          class="boursecu-transactions__trade-toggle-item"
+          :class="{ 'boursecu-transactions__trade-toggle-item--active': tradeSide === 'sell' }"
+          @click="setTradeSide('sell')"
+        >
+          فروش
+        </button>
+      </div>
+    </div>
+
+    <div class="px-4 mt-4 flex items-center gap-2 flex-wrap">
+      <div class="flex items-center gap-1 text-sm text-gray-600 shrink-0">
+        <BasicIcon icon="vuesax-linear:filter" size="16" />
+        <span>فیلترها:</span>
+      </div>
+      <a-select
+        v-model:value="statusFilter"
+        allow-clear
+        class="boursecu-transactions__filter-select min-w-[7rem]"
+        placeholder="وضعیت"
+        size="large"
+        @change="applyInlineFilters"
+      >
+        <a-select-option value="active">فعال</a-select-option>
+        <a-select-option value="inactive">غیرفعال</a-select-option>
+      </a-select>
+      <BaseDatePicker
+        v-model:value="dateFilter"
+        class="boursecu-transactions__filter-date min-w-[7rem]"
+        placeholder="تاریخ"
+        size="large"
+        @onchange="applyInlineFilters"
+      />
+    </div>
+
+    <div ref="listRef" :class="loading ? 'min-h-[50vh]' : ''" class="px-4 mt-5">
+      <list-anim v-if="!loading">
+        <Item v-for="item in items" :key="item.id" :item="item" />
+        <div :ref="bindMobileObserver" class="w-full opacity-0 relative">
+          در حال بارگذاری
+        </div>
+        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+      </list-anim>
+
+      <template v-else>
+        <TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
+      </template>
+
+      <div
+        v-if="!loading && items.length === 0"
+        class="boursecu-transactions__empty"
+      >
+        <img :src="emptyImage" alt="" class="boursecu-transactions__empty-image" />
+        <p class="boursecu-transactions__empty-text">{{ emptyText }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import emptyImage from '@/assets/img/cash_empty.svg'
+import Item from './components/Item.vue'
+import { BOURSECU_TRANSACTION_TABS } from './config/boursecuTabs'
+import { useTransactionsPageContext } from './composables/useTransactionsPage'
+
+const listRef = ref<HTMLElement | null>(null)
+
+const {
+  items,
+  dateFilter,
+  statusFilter,
+  activeTabId,
+  tradeSide,
+  activeTab,
+  emptyText,
+  setActiveTab,
+  setTradeSide,
+  applyInlineFilters,
+  bindMobileObserver,
+} = useTransactionsPageContext()
+</script>
+
+<style scoped lang="less">
+.boursecu-transactions {
+  background: #fff;
+  min-height: 100%;
+}
+
+.boursecu-transactions__tab {
+  appearance: none;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0 0 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #8b9490;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+
+.boursecu-transactions__tab--active {
+  color: #1f2937;
+  border-bottom-color: #e8b923;
+}
+
+.boursecu-transactions__trade-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 10px;
+  background: #eceff1;
+}
+
+.boursecu-transactions__trade-toggle-item {
+  appearance: none;
+  cursor: pointer;
+  min-width: 5.5rem;
+  padding: 0.45rem 1rem;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #6b7280;
+  font-size: 0.875rem;
+  font-weight: 600;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.boursecu-transactions__trade-toggle-item--active {
+  background: #fff;
+  border-color: #d4e3de;
+  color: #1f2937;
+}
+
+.boursecu-transactions__filter-select,
+.boursecu-transactions__filter-date {
+  flex: 1;
+  max-width: 9rem;
+}
+
+.boursecu-transactions__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem 4rem;
+  text-align: center;
+}
+
+.boursecu-transactions__empty-image {
+  width: 11rem;
+  max-width: 60vw;
+  height: auto;
+  object-fit: contain;
+}
+
+.boursecu-transactions__empty-text {
+  margin-top: 1rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+</style>
diff --git a/src/views/base/transactions/DefaultTransactionsPage.vue b/src/views/base/transactions/DefaultTransactionsPage.vue
new file mode 100644
index 0000000..8e6e494
--- /dev/null
+++ b/src/views/base/transactions/DefaultTransactionsPage.vue
@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <div class="absolute inset-0 bg-cover bg-center opacity-60"></div>
+    <div
+      class="bg-white w-full transaction-list py-3 px-3 font-bold drop-shadow flex justify-between z-10"
+    >
+      <div>لیست تراکنش ها</div>
+      <BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
+    </div>
+
+    <div ref="el" :class="loading ? 'h-screen' : ''" class="px-3 pt-16 pb-10">
+      <list-anim v-if="!loading">
+        <Item v-for="item in items" :key="item.id" :item="item" />
+        <div :ref="bindMobileObserver" v-show="!loading" class="w-full opacity-0 relative">
+          در حال بارگذاری
+        </div>
+        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+      </list-anim>
+      <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
+      <div v-if="items.length <= 0 && !loading" class="flex flex-col items-center justify-center h-80vh">
+        <DotLottieVue
+          class="w-11rem h-11rem"
+          autoplay
+          src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
+        />
+        <div class="font-bold">{{ emptyText }}</div>
+      </div>
+    </div>
+
+    <BasicActionSheet v-model:show="showFilter">
+      <div class="font-bold text-lg">فیلتر</div>
+      <div class="pb-20 mt-5">
+        <a-form-item class="w-full gap-2 !flex-col" label="تاریخ" name="password">
+          <BaseDatePicker v-model:value="dateFilter" class="w-full" size="large" />
+        </a-form-item>
+        <BasicButton class="w-full mt-5" type="primary" @click="applyFilter">اعمال فیلتر</BasicButton>
+        <BasicButton class="w-full mt-2" @click="showFilter = false">بازگشت</BasicButton>
+      </div>
+    </BasicActionSheet>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import Item from './components/Item.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import { useTransactionsPageContext } from './composables/useTransactionsPage'
+
+const el = ref<HTMLElement | null>(null)
+
+const {
+  items,
+  showFilter,
+  dateFilter,
+  emptyText,
+  applyFilter,
+  bindMobileObserver,
+} = useTransactionsPageContext()
+</script>
+
+<style scoped lang="less">
+.transaction-list {
+  position: fixed;
+  right: 0;
+  left: 0;
+  @media screen and (min-width: 426px) {
+    width: 426px;
+    left: auto;
+    right: auto;
+  }
+}
+</style>
diff --git a/src/views/base/transactions/components/Item.vue b/src/views/base/transactions/components/Item.vue
index ba318bb..7c8af65 100644
--- a/src/views/base/transactions/components/Item.vue
+++ b/src/views/base/transactions/components/Item.vue
@@ -1,24 +1,70 @@
 <template>
-  <div @click="infoVisible = true">
-    <!--    {{  item}}-->
+  <button
+    v-if="variant === 'desktop'"
+    type="button"
+    class="dtxn-row"
+    @click="infoVisible = true"
+  >
+    <span
+      class="dtxn-row__icon"
+      :class="isUp ? 'dtxn-row__icon--up' : 'dtxn-row__icon--down'"
+    >
+      <Icon :icon="`vuesax-linear:${isUp ? 'arrow-up-2' : 'arrow-down-2'}`" size="18" />
+    </span>
+    <div class="dtxn-row__main">
+      <p class="dtxn-row__title">{{ props.item.title }}</p>
+      <div class="dtxn-row__meta">
+        <span>{{ toJalaliOutOfUTC(props.item.expire_at) }}</span>
+        <span :class="props.item.gold >= 0 ? 'text-green-600' : 'text-red-600'">
+          {{ props.item.gold }} {{ props.item.unit }}
+        </span>
+        <span v-if="isGold">
+          قیمت معامله:
+          {{ usePriceWithoutType(parseInt((Math.abs(props.item.cash) / Math.abs(props.item.gold)).toFixed(0))) }}
+          ریال
+        </span>
+      </div>
+    </div>
+    <div
+      class="dtxn-row__amount"
+      :class="props.item.cash > 0 ? 'dtxn-row__amount--up' : 'dtxn-row__amount--down'"
+    >
+      {{ usePriceWithoutType(props.item.cash ?? 0) }} ریال
+    </div>
+    <div class="dtxn-row__status">
+      <ATag color="blue" class="!py-1 !px-4 !ml-0 !text-xs">
+        {{ props.item.order?.sts_str ?? props.item.withdraw?.sts_str }}
+      </ATag>
+    </div>
+  </button>
+
+  <div v-else @click="infoVisible = true">
     <div class="flex">
-      <div :class="isUp? 'bg-green-50':'bg-red-50'" class="rounded-lg p-3 h-fit w-fit flex justify-center items-center">
-        <Icon :class="isUp? 'text-green-600':'text-red-600'"
-              :icon="`vuesax-linear:${isUp? 'arrow-up-2':'arrow-down-2'}`" />
+      <div
+        :class="isUp ? 'bg-green-50' : 'bg-red-50'"
+        class="rounded-lg p-3 h-fit w-fit flex justify-center items-center"
+      >
+        <Icon
+          :class="isUp ? 'text-green-600' : 'text-red-600'"
+          :icon="`vuesax-linear:${isUp ? 'arrow-up-2' : 'arrow-down-2'}`"
+        />
       </div>
       <div class="w-full mr-3">
         <div class="flex justify-between w-full">
-          <div>{{ item.title }}</div>
-          <div>{{ toJalaliOutOfUTC(item.expire_at) }}</div>
+          <div>{{ props.item.title }}</div>
+          <div>{{ toJalaliOutOfUTC(props.item.expire_at) }}</div>
         </div>
         <div class="flex justify-between mt-2">
-          <div :class="item.gold >= 0? 'text-green-600':'text-red-600'"
-               class="text-gray-500 text-xs  number-ltr">{{ item.gold }}
-            <div>{{item.unit}}</div>
+          <div
+            :class="props.item.gold >= 0 ? 'text-green-600' : 'text-red-600'"
+            class="text-gray-500 text-xs number-ltr"
+          >
+            {{ props.item.gold }}
+            <div>{{ props.item.unit }}</div>
           </div>
           <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
-            <div :class="item.cash > 0 ? 'text-green-600':'text-red-600'" class="text-base">
-              {{ usePriceWithoutType(item.cash?? 0) }}
+            <div :class="props.item.cash > 0 ? 'text-green-600' : 'text-red-600'" class="text-base">
+              {{ usePriceWithoutType(props.item.cash ?? 0) }}
             </div>
             ریال
           </div>
@@ -28,8 +74,9 @@
     <div v-if="isGold" class="flex w-full justify-between mt-2">
       <div class="text-gray-500">قیمت معامله:</div>
       <div class="text-gray-500 flex gap-1 text-xs items-center">
-<!--        <div class="text-base">{{ typeof parseInt((Math.abs(item.cash) / Math.abs(item.gold)).toFixed(0)) }}</div>-->
-        <div class="text-base">{{ usePriceWithoutType(parseInt((Math.abs(item.cash) / Math.abs(item.gold)).toFixed(0))) }}</div>
+        <div class="text-base">
+          {{ usePriceWithoutType(parseInt((Math.abs(props.item.cash) / Math.abs(props.item.gold)).toFixed(0))) }}
+        </div>
         ریال
       </div>
     </div>
@@ -37,149 +84,63 @@
       <div class="text-gray-500">وضعیت :</div>
       <div class="text-gray-500 flex gap-1 text-xs items-center">
         <ATag class="!py-1 !px-6 !ml-0" color="blue">
-          {{ item.order?.sts_str ?? item.withdraw?.sts_str }}
+          {{ props.item.order?.sts_str ?? props.item.withdraw?.sts_str }}
         </ATag>
       </div>
     </div>
-    <!--    <div v-else class="h-8"></div>-->
     <a-divider class="!my-3" />
-    <BasicActionSheet v-model:show="infoVisible">
-      <div class="font-bold text-lg">{{ props.item.title }}</div>
-      <div class="mb-8rem mt-5">
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">مبلغ:</div>
-          <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
-            <div class="text-base ml-1">{{ usePriceWithoutType(item.cash?? 0) }}</div>
-            ریال
-          </div>
-        </div>
-        <div v-if="item.order" class="flex justify-between mb-3">
-          <div class="text-primary">قیمت هر گرم {{ getTradePriceUnitLabel() }} حین معامله:</div>
-          <div class="flex text-xs items-center number-ltr">
-            <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.price?? 0) }}</div>
-            ریال
-          </div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">مقدار {{ item.wallet?.product ? item.wallet.product.title : getMeltedGoldTradeLabel() }} مبادله شده:</div>
-          <div :class="item.gold >= 0? 'text-green-600' : 'text-red-600'" class="flex flex-col items-end text-xs number-ltr">
-            <div class="flex items-center">
-              <div class="text-base ml-1">{{ item.gold }}</div>
-              {{ item.unit }}
-            </div>
-            <div
-              v-if="item.wallet?.product && getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product)"
-              class="text-gray-500"
-            >
-              {{ getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product) }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">{{ getCashWalletLabel(item.wallet?.product?.group_type) }}:</div>
-          <div :class="item.cash > 0? 'text-green-600' : 'text-red-600'" class="flex text-xs items-center number-ltr">
-            <div class="text-base">{{ usePriceWithoutType(item.balance_cash ?? 0) }}</div>
-            ریال
-          </div>
-        </div>
-        <div class="flex justify-between mb-3" v-if="item.wallet?.product">
-          <div class="text-primary">موجودی {{item.wallet.product.title}}:</div>
-          <div class="flex flex-col items-end text-xs text-yellow-700">
-            <div class="flex items-center">
-              <div class="text-base ml-1">{{ item.balance_gold }}</div>
-              {{ getProductQuantityUnit(item.wallet.product) }}
-            </div>
-            <div v-if="getProductUnitWeightLabel(item.wallet.product)" class="text-gray-500">
-              هر عدد {{ getProductUnitWeightLabel(item.wallet.product) }}
-            </div>
-          </div>
-        </div>
-        <div class="flex justify-between mb-3" v-else>
-          <div class="text-primary">{{ getGoldWalletLabel(item.wallet?.product?.group_type) }}:</div>
-          <div class="flex text-xs text-yellow-700 items-center">
-            <div class="text-base ml-1">{{ item.balance_gold }}</div>
-            {{ getWeightUnit() }}
-          </div>
-        </div>
-        <!--        <div class="flex justify-between mb-3">
-                  <div class="text-primary">موجودی کیف پول:</div>
-                  <div class="flex text-xs items-center" :class="isUp? 'text-green-600' : 'text-red-600'"><div class="text-base">{{usePriceWithoutType(12000000)}}</div>ریال</div>
-                </div>
-                <div class="flex justify-between mb-3">
-                  <div class="text-primary">موجودی کیف طلا:</div>
-                  <div class="flex items-center" :class="isUp? 'text-red-600' : 'text-green-600'">60 گرم</div>
-                </div>-->
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">وضعیت:</div>
-          <div class="flex text-xs items-center">
-            <ATag :color="item.active? 'blue': 'blue'" class="!py-1 !px-6 !ml-0">
-              {{ item.order?.sts_str ?? item.withdraw?.sts_str }}
-            </ATag>
-          </div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">تاریخ:</div>
-          <div>{{ toJalaliNotime(item.expire_at) }}</div>
-        </div>
-        <div class="flex justify-between mb-3">
-          <div class="text-primary">زمان:</div>
-          <div>{{ toTime(item.expire_at) }}</div>
-        </div>
-        <!--        <div class="flex justify-between mb-3">
-                  <div class="text-primary">وضعیت معامله:</div>
-                  <div class="flex text-xs items-center">
-                    <ATag class="!py-1 !px-6 !ml-0" color="orange">
-                      معاملات باز
-                    </ATag>
-                  </div>
-                </div>-->
-        <div v-if="item.eaj" class="flex justify-between mb-3">
-          <div class="text-primary">مهلت ارسال فیش:</div>
-          <div>{{ item.eaj }}</div>
-        </div>
-        <BasicButton class="w-full mt-5" @click="infoVisible = false">بازگشت</BasicButton>
-      </div>
-    </BasicActionSheet>
   </div>
 
+  <BasicActionSheet v-if="variant !== 'desktop'" v-model:show="infoVisible">
+    <div class="font-bold text-lg">{{ props.item.title }}</div>
+    <TransactionDetailPanel :item="props.item" variant="mobile" />
+    <BasicButton class="w-full mt-5" @click="infoVisible = false">بازگشت</BasicButton>
+  </BasicActionSheet>
+
+  <BasicModal
+    v-else
+    v-model:visible="infoVisible"
+    :title="props.item.title"
+    width="520px"
+    custom-footer
+    destroy-on-close
+  >
+    <TransactionDetailPanel :item="props.item" variant="desktop" />
+    <template #footer>
+      <BasicButton class="w-full" @click="infoVisible = false">بستن</BasicButton>
+    </template>
+  </BasicModal>
 </template>
 
 <script lang="ts" setup>
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { usePriceWithoutType } from '../../../../utils/usePrice'
+import { usePriceWithoutType } from '@/utils/usePrice'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import { computed, ref } from 'vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import type { Transaction } from '@/models/transaction'
-import { getCashWalletLabel, getGoldWalletLabel, getMeltedGoldTradeLabel, getProductQuantityUnit, getProductTotalWeightLabel, getProductUnitWeightLabel, getTradePriceUnitLabel, getWeightUnit } from '@/utils/productDealMethod'
-import { toJalaliNotime, toJalaliOutOfUTC, toTime } from '../../../../utils/useDateTime'
+import { toJalaliOutOfUTC } from '@/utils/useDateTime'
+import TransactionDetailPanel from './TransactionDetailPanel.vue'
 
-const infoVisible = ref<boolean>(false)
+const infoVisible = ref(false)
 
-interface Prop {
-  item: Transaction
-}
+const props = withDefaults(
+  defineProps<{
+    item: Transaction
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
 
-const props = withDefaults(defineProps<Prop>(), {})
-const isUp = computed(() => props.item.type === 3 || props.item.type === 1 || props.item.type === 8 || props.item.type === 9)
-const isGold = computed(() => props.item.type === 1 || props.item.type === 2 || props.item.type === 10)
-/*const title = computed(() => {
-  if (isUp.value) {
-    if (isGold.value) {
-      return 'واریز ریالی'
-    } else {
-      return 'خرید طلا'
-    }
-  } else {
-    if (isGold.value) {
-      return 'برداشت ریالی'
-    } else {
-      return 'فروش طلا'
-    }
-  }
-})*/
+const isUp = computed(
+  () =>
+    props.item.type === 3
+    || props.item.type === 1
+    || props.item.type === 8
+    || props.item.type === 9,
+)
+const isGold = computed(
+  () => props.item.type === 1 || props.item.type === 2 || props.item.type === 10,
+)
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/base/transactions/components/TransactionDetailPanel.vue b/src/views/base/transactions/components/TransactionDetailPanel.vue
new file mode 100644
index 0000000..d0b40c6
--- /dev/null
+++ b/src/views/base/transactions/components/TransactionDetailPanel.vue
@@ -0,0 +1,131 @@
+<template>
+  <div :class="variant === 'desktop' ? 'dtxn-detail' : 'mb-8rem mt-5'">
+    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">مبلغ:</div>
+      <div
+        :class="[
+          variant === 'desktop' ? 'dtxn-detail__value' : '',
+          item.cash > 0 ? 'text-green-600' : 'text-red-600',
+          'flex text-xs items-center number-ltr',
+        ]"
+      >
+        <div class="text-base ml-1">{{ usePriceWithoutType(item.cash ?? 0) }}</div>
+        ریال
+      </div>
+    </div>
+    <div v-if="item.order" :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+        قیمت هر گرم {{ getTradePriceUnitLabel() }} حین معامله:
+      </div>
+      <div :class="['flex text-xs items-center number-ltr', variant === 'desktop' ? 'dtxn-detail__value' : '']">
+        <div class="text-base ml-1">{{ usePriceWithoutType(item.order?.price ?? 0) }}</div>
+        ریال
+      </div>
+    </div>
+    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+        مقدار {{ item.wallet?.product ? item.wallet.product.title : getMeltedGoldTradeLabel() }} مبادله شده:
+      </div>
+      <div
+        :class="[
+          item.gold >= 0 ? 'text-green-600' : 'text-red-600',
+          'flex flex-col items-end text-xs number-ltr',
+          variant === 'desktop' ? 'dtxn-detail__value' : '',
+        ]"
+      >
+        <div class="flex items-center">
+          <div class="text-base ml-1">{{ item.gold }}</div>
+          {{ item.unit }}
+        </div>
+        <div
+          v-if="item.wallet?.product && getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product)"
+          class="text-gray-500"
+        >
+          {{ getProductTotalWeightLabel(Math.abs(item.gold ?? 0), item.wallet.product) }}
+        </div>
+      </div>
+    </div>
+    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+        {{ getCashWalletLabel(item.wallet?.product?.group_type) }}:
+      </div>
+      <div
+        :class="[
+          item.cash > 0 ? 'text-green-600' : 'text-red-600',
+          'flex text-xs items-center number-ltr',
+          variant === 'desktop' ? 'dtxn-detail__value' : '',
+        ]"
+      >
+        <div class="text-base">{{ usePriceWithoutType(item.balance_cash ?? 0) }}</div>
+        ریال
+      </div>
+    </div>
+    <div v-if="item.wallet?.product" :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+        موجودی {{ item.wallet.product.title }}:
+      </div>
+      <div class="flex flex-col items-end text-xs text-yellow-700">
+        <div class="flex items-center">
+          <div class="text-base ml-1">{{ item.balance_gold }}</div>
+          {{ getProductQuantityUnit(item.wallet.product) }}
+        </div>
+        <div v-if="getProductUnitWeightLabel(item.wallet.product)" class="text-gray-500">
+          هر عدد {{ getProductUnitWeightLabel(item.wallet.product) }}
+        </div>
+      </div>
+    </div>
+    <div v-else :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">
+        {{ getGoldWalletLabel(item.wallet?.product?.group_type) }}:
+      </div>
+      <div class="flex text-xs text-yellow-700 items-center">
+        <div class="text-base ml-1">{{ item.balance_gold }}</div>
+        {{ getWeightUnit() }}
+      </div>
+    </div>
+    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">وضعیت:</div>
+      <div class="flex text-xs items-center">
+        <ATag color="blue" class="!py-1 !px-6 !ml-0">
+          {{ item.order?.sts_str ?? item.withdraw?.sts_str }}
+        </ATag>
+      </div>
+    </div>
+    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">تاریخ:</div>
+      <div :class="variant === 'desktop' ? 'dtxn-detail__value' : ''">{{ toJalaliNotime(item.expire_at) }}</div>
+    </div>
+    <div :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">زمان:</div>
+      <div :class="variant === 'desktop' ? 'dtxn-detail__value' : ''">{{ toTime(item.expire_at) }}</div>
+    </div>
+    <div v-if="item.eaj" :class="variant === 'desktop' ? 'dtxn-detail__row' : 'flex justify-between mb-3'">
+      <div :class="variant === 'desktop' ? 'dtxn-detail__label' : 'text-primary'">مهلت ارسال فیش:</div>
+      <div :class="variant === 'desktop' ? 'dtxn-detail__value' : ''">{{ item.eaj }}</div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { usePriceWithoutType } from '@/utils/usePrice'
+import type { Transaction } from '@/models/transaction'
+import {
+  getCashWalletLabel,
+  getGoldWalletLabel,
+  getMeltedGoldTradeLabel,
+  getProductQuantityUnit,
+  getProductTotalWeightLabel,
+  getProductUnitWeightLabel,
+  getTradePriceUnitLabel,
+  getWeightUnit,
+} from '@/utils/productDealMethod'
+import { toJalaliNotime, toTime } from '@/utils/useDateTime'
+
+withDefaults(
+  defineProps<{
+    item: Transaction
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+</script>
diff --git a/src/views/base/transactions/composables/useTransactionsPage.ts b/src/views/base/transactions/composables/useTransactionsPage.ts
new file mode 100644
index 0000000..fc1b0bd
--- /dev/null
+++ b/src/views/base/transactions/composables/useTransactionsPage.ts
@@ -0,0 +1,188 @@
+import { computed, inject, onMounted, provide, ref, type ComponentPublicInstance, type InjectionKey } from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { loading, loadingMore } from '@/utils'
+import {
+  BOURSECU_TRANSACTION_TABS,
+  type BoursecuTradeSide,
+  type BoursecuTransactionTab,
+  type BoursecuTransactionTabId,
+} from '../config/boursecuTabs'
+import {
+  getActiveBoursecuTab,
+  initTransactionsPageData,
+  loadMoreTransactions,
+  reloadTransactionsTable,
+  resetTransactionsPagination,
+  transactionActiveTabId,
+  transactionDateFilter,
+  transactionItems,
+  transactionPagination,
+  transactionStatusFilter,
+  transactionTableOutput,
+  transactionTradeSide,
+  transactionsBoursecuMode,
+} from './useTransactionsPageData'
+
+export interface TransactionsPageContext {
+  pagination: typeof transactionPagination
+  items: typeof transactionItems
+  tableOutput: typeof transactionTableOutput
+  showFilter: ReturnType<typeof ref<boolean>>
+  dateFilter: typeof transactionDateFilter
+  statusFilter: typeof transactionStatusFilter
+  mobileObserverEl: ReturnType<typeof ref<HTMLElement | null>>
+  desktopObserverEl: ReturnType<typeof ref<HTMLElement | null>>
+  activeTabId: typeof transactionActiveTabId
+  tradeSide: typeof transactionTradeSide
+  activeTab: ReturnType<typeof computed<BoursecuTransactionTab>>
+  emptyText: ReturnType<typeof computed<string>>
+  resetPagination: typeof resetTransactionsPagination
+  initTable: () => Promise<void>
+  reloadTable: typeof reloadTransactionsTable
+  applyFilter: () => Promise<void>
+  setActiveTab: (tabId: BoursecuTransactionTabId) => Promise<void>
+  setTradeSide: (side: BoursecuTradeSide) => Promise<void>
+  applyInlineFilters: () => Promise<void>
+  bindMobileObserver: (el: Element | ComponentPublicInstance | null) => void
+  bindDesktopObserver: (el: Element | ComponentPublicInstance | null) => void
+}
+
+export const TRANSACTIONS_PAGE_KEY: InjectionKey<TransactionsPageContext> =
+  Symbol('transactionsPage')
+
+export function useTransactionsPageProvider(options?: { boursecu?: boolean }) {
+  const isBoursecu = options?.boursecu ?? false
+  const isDesktop = useDesktopBreakpoint()
+  const showFilter = ref(false)
+  const mobileObserverEl = ref<HTMLElement | null>(null)
+  const desktopObserverEl = ref<HTMLElement | null>(null)
+
+  const activeObserverEl = computed(() =>
+    isDesktop.value ? desktopObserverEl.value : mobileObserverEl.value,
+  )
+
+  const activeTab = computed<BoursecuTransactionTab>(
+    () =>
+      BOURSECU_TRANSACTION_TABS.find((tab) => tab.id === transactionActiveTabId.value) ??
+      BOURSECU_TRANSACTION_TABS[0],
+  )
+
+  const emptyText = computed(() => {
+    if (!transactionsBoursecuMode.value) {
+      return 'تراکنشی موجود نیست'
+    }
+
+    if (activeTab.value.id === 'trades' && transactionTradeSide.value === 'sell') {
+      return 'معامله فروشی برای شما به ثبت نرسیده است'
+    }
+
+    return activeTab.value.emptyText
+  })
+
+  async function initTable() {
+    await reloadTransactionsTable()
+  }
+
+  async function applyFilter() {
+    await reloadTransactionsTable()
+    showFilter.value = false
+  }
+
+  async function setActiveTab(tabId: BoursecuTransactionTabId) {
+    if (transactionActiveTabId.value === tabId) {
+      return
+    }
+
+    transactionActiveTabId.value = tabId
+    await reloadTransactionsTable()
+  }
+
+  async function setTradeSide(side: BoursecuTradeSide) {
+    if (transactionTradeSide.value === side) {
+      return
+    }
+
+    transactionTradeSide.value = side
+    if (getActiveBoursecuTab().showTradeToggle) {
+      await reloadTransactionsTable()
+    }
+  }
+
+  async function applyInlineFilters() {
+    await reloadTransactionsTable()
+  }
+
+  function resolveObserverElement(el: Element | ComponentPublicInstance | null) {
+    if (!el) return null
+    if (el instanceof HTMLElement) return el
+    const root = (el as ComponentPublicInstance).$el
+    return root instanceof HTMLElement ? root : null
+  }
+
+  function bindMobileObserver(el: Element | ComponentPublicInstance | null) {
+    mobileObserverEl.value = resolveObserverElement(el)
+  }
+
+  function bindDesktopObserver(el: Element | ComponentPublicInstance | null) {
+    desktopObserverEl.value = resolveObserverElement(el)
+  }
+
+  useIntersectionObserver(
+    activeObserverEl,
+    async ([entry]) => {
+      if (entry?.isIntersecting) {
+        await loadMoreTransactions()
+      }
+    },
+    {
+      root: null,
+      rootMargin: '300px',
+      threshold: 0.01,
+    },
+  )
+
+  onMounted(async () => {
+    await initTransactionsPageData(isBoursecu)
+  })
+
+  const context: TransactionsPageContext = {
+    pagination: transactionPagination,
+    items: transactionItems,
+    tableOutput: transactionTableOutput,
+    showFilter,
+    dateFilter: transactionDateFilter,
+    statusFilter: transactionStatusFilter,
+    mobileObserverEl,
+    desktopObserverEl,
+    activeTabId: transactionActiveTabId,
+    tradeSide: transactionTradeSide,
+    activeTab,
+    emptyText,
+    resetPagination: resetTransactionsPagination,
+    initTable,
+    reloadTable: reloadTransactionsTable,
+    applyFilter,
+    setActiveTab,
+    setTradeSide,
+    applyInlineFilters,
+    bindMobileObserver,
+    bindDesktopObserver,
+  }
+
+  provide(TRANSACTIONS_PAGE_KEY, context)
+  return context
+}
+
+export function useTransactionsPageContext() {
+  const context = inject(TRANSACTIONS_PAGE_KEY)
+  if (!context) {
+    throw new Error('useTransactionsPageContext must be used within useTransactionsPageProvider')
+  }
+  return context
+}
+
+/** @deprecated Use useTransactionsPageProvider in index + useTransactionsPageContext in views. */
+export function useTransactionsPage(options?: { boursecu?: boolean }) {
+  return useTransactionsPageProvider(options)
+}
diff --git a/src/views/base/transactions/composables/useTransactionsPageData.ts b/src/views/base/transactions/composables/useTransactionsPageData.ts
new file mode 100644
index 0000000..242b956
--- /dev/null
+++ b/src/views/base/transactions/composables/useTransactionsPageData.ts
@@ -0,0 +1,157 @@
+import { ref } from 'vue'
+import { getTransactionTable, getTransactionTable2 } from '@/api/transaction'
+import type { TableEngineInput, TableEngineOutput } from '@/models/table'
+import type { Transaction } from '@/models/transaction'
+import { loading, loadingMore } from '@/utils'
+import {
+  BOURSECU_TRANSACTION_TABS,
+  buildBoursecuTransactionPagination,
+  type BoursecuTradeSide,
+  type BoursecuTransactionTab,
+  type BoursecuTransactionTabId,
+} from '../config/boursecuTabs'
+
+/** Shared transactions datasets — mobile/desktop views read this module state only. */
+let initPromise: Promise<void> | null = null
+const initialized = ref(false)
+
+export const transactionsBoursecuMode = ref(false)
+export const transactionPagination = ref<TableEngineInput>({ filters: [], limit: 7, page: 0 })
+export const transactionItems = ref<Transaction[]>([])
+export const transactionTableOutput = ref<TableEngineOutput<Transaction> | null>(null)
+export const transactionDateFilter = ref<string>()
+export const transactionStatusFilter = ref<string>()
+export const transactionActiveTabId = ref<BoursecuTransactionTabId>('trades')
+export const transactionTradeSide = ref<BoursecuTradeSide>('buy')
+
+export function isTransactionsPageDataInitialized() {
+  return initialized.value
+}
+
+export function getActiveBoursecuTab(): BoursecuTransactionTab {
+  return (
+    BOURSECU_TRANSACTION_TABS.find((tab) => tab.id === transactionActiveTabId.value) ??
+    BOURSECU_TRANSACTION_TABS[0]
+  )
+}
+
+export function resetTransactionsPagination() {
+  if (transactionsBoursecuMode.value) {
+    transactionPagination.value = buildBoursecuTransactionPagination(
+      getActiveBoursecuTab(),
+      transactionTradeSide.value,
+      transactionDateFilter.value,
+      transactionStatusFilter.value,
+    )
+    return
+  }
+
+  transactionPagination.value = { filters: [], limit: 7, page: 0 }
+  if (transactionDateFilter.value) {
+    transactionPagination.value.filters = [
+      {
+        field: 'created_at',
+        cr: 'and',
+        type: 'date',
+        op: 'eq',
+        value: transactionDateFilter.value,
+      },
+    ]
+  }
+}
+
+async function fetchTransactionsPage(append: boolean) {
+  const isFirstPage = transactionPagination.value.page === 0 && !append
+
+  if (isFirstPage) {
+    loading.value = true
+  } else {
+    loadingMore.value = true
+  }
+
+  try {
+    const activeTab = getActiveBoursecuTab()
+    const fetcher =
+      transactionsBoursecuMode.value && activeTab.fetchMode === 'deposit'
+        ? getTransactionTable2
+        : getTransactionTable
+
+    transactionTableOutput.value = await fetcher(transactionPagination.value)
+    const rows = transactionTableOutput.value.rows ?? []
+
+    if (isFirstPage) {
+      transactionItems.value = [...rows]
+    } else {
+      transactionItems.value.push(...rows)
+    }
+  } catch (error) {
+    console.error('Error fetching transactions:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+export async function reloadTransactionsTable() {
+  transactionPagination.value.page = 0
+  transactionItems.value = []
+  resetTransactionsPagination()
+  await fetchTransactionsPage(false)
+}
+
+export async function loadMoreTransactions() {
+  if (
+    !transactionTableOutput.value
+    || (transactionPagination.value.page + 1) * transactionPagination.value.limit
+      >= transactionTableOutput.value.query.total
+  ) {
+    return
+  }
+
+  transactionPagination.value.page++
+  await fetchTransactionsPage(true)
+}
+
+export async function initTransactionsPageData(boursecu: boolean, force = false) {
+  if (!force && initialized.value && transactionsBoursecuMode.value === boursecu) {
+    return
+  }
+
+  if (!force && initPromise) {
+    return initPromise
+  }
+
+  initPromise = (async () => {
+    try {
+      if (force) {
+        resetTransactionsPageData()
+      }
+
+      transactionsBoursecuMode.value = boursecu
+      transactionPagination.value.page = 0
+      transactionItems.value = []
+      resetTransactionsPagination()
+      await fetchTransactionsPage(false)
+      initialized.value = true
+    } catch (error) {
+      console.error('Transactions page initialization error:', error)
+    } finally {
+      initPromise = null
+    }
+  })()
+
+  return initPromise
+}
+
+export function resetTransactionsPageData() {
+  initialized.value = false
+  initPromise = null
+  transactionsBoursecuMode.value = false
+  transactionPagination.value = { filters: [], limit: 7, page: 0 }
+  transactionItems.value = []
+  transactionTableOutput.value = null
+  transactionDateFilter.value = undefined
+  transactionStatusFilter.value = undefined
+  transactionActiveTabId.value = 'trades'
+  transactionTradeSide.value = 'buy'
+}
diff --git a/src/views/base/transactions/config/boursecuTabs.ts b/src/views/base/transactions/config/boursecuTabs.ts
new file mode 100644
index 0000000..2592e9a
--- /dev/null
+++ b/src/views/base/transactions/config/boursecuTabs.ts
@@ -0,0 +1,103 @@
+import type { TableEngineInput } from '@/models/table'
+
+export type BoursecuTransactionTabId =
+  | 'trades'
+  | 'deposit'
+  | 'withdrawal'
+  | 'physical'
+
+export type BoursecuTradeSide = 'buy' | 'sell'
+
+export type BoursecuTransactionFetchMode = 'transaction' | 'deposit'
+
+export interface BoursecuTransactionTab {
+  id: BoursecuTransactionTabId
+  label: string
+  emptyText: string
+  showTradeToggle?: boolean
+  fetchMode?: BoursecuTransactionFetchMode
+  typeFilters?: number[]
+}
+
+export const BOURSECU_TRANSACTION_TABS: BoursecuTransactionTab[] = [
+  {
+    id: 'trades',
+    label: 'همه',
+    emptyText: 'معامله‌ای برای شما به ثبت نرسیده است',
+    showTradeToggle: true,
+    typeFilters: [1, 2],
+  },
+  {
+    id: 'deposit',
+    label: 'واریز',
+    emptyText: 'واریزی برای شما به ثبت نرسیده است',
+    fetchMode: 'deposit',
+  },
+  {
+    id: 'withdrawal',
+    label: 'برداشت',
+    emptyText: 'برداشتی برای شما به ثبت نرسیده است',
+    typeFilters: [4],
+  },
+  {
+    id: 'physical',
+    label: 'تحویل فیزیکی',
+    emptyText: 'درخواست تحویل فیزیکی برای شما ثبت نشده است',
+    typeFilters: [9],
+  },
+]
+
+const TRADE_TYPE_BY_SIDE: Record<BoursecuTradeSide, number> = {
+  buy: 1,
+  sell: 2,
+}
+
+export function buildBoursecuTransactionPagination(
+  tab: BoursecuTransactionTab,
+  tradeSide: BoursecuTradeSide,
+  dateFilter?: string,
+  statusFilter?: string
+): TableEngineInput {
+  const filters: TableEngineInput['filters'] = []
+
+  if (tab.fetchMode !== 'deposit' && tab.typeFilters?.length) {
+    const typeValue =
+      tab.showTradeToggle && tab.typeFilters.includes(TRADE_TYPE_BY_SIDE[tradeSide])
+        ? TRADE_TYPE_BY_SIDE[tradeSide]
+        : tab.typeFilters[0]
+
+    filters.push({
+      field: 'type',
+      cr: 'and',
+      type: 'number',
+      op: 'eq',
+      value: typeValue,
+    })
+  }
+
+  if (dateFilter) {
+    filters.push({
+      field: 'created_at',
+      cr: 'and',
+      type: 'date',
+      op: 'eq',
+      value: dateFilter,
+    })
+  }
+
+  if (statusFilter === 'active' || statusFilter === 'inactive') {
+    filters.push({
+      field: 'active',
+      cr: 'and',
+      type: 'boolean',
+      op: 'eq',
+      value: statusFilter === 'active',
+    })
+  }
+
+  return {
+    page: 0,
+    limit: 7,
+    filters,
+  }
+}
diff --git a/src/views/base/transactions/desktop/DesktopBoursecuTransactionsView.vue b/src/views/base/transactions/desktop/DesktopBoursecuTransactionsView.vue
new file mode 100644
index 0000000..c725bce
--- /dev/null
+++ b/src/views/base/transactions/desktop/DesktopBoursecuTransactionsView.vue
@@ -0,0 +1,126 @@
+<template>
+  <div class="dtxn">
+    <div class="dtxn__container">
+      <header class="dtxn-topbar">
+        <p class="dtxn-topbar__eyebrow">گزارش‌ها</p>
+        <h1 class="dtxn-topbar__title">تراکنش‌ها</h1>
+      </header>
+
+      <div class="dtxn-toolbar">
+        <div class="dtxn-tabs">
+          <button
+            v-for="tab in BOURSECU_TRANSACTION_TABS"
+            :key="tab.id"
+            type="button"
+            class="dtxn-tabs__btn"
+            :class="{ 'dtxn-tabs__btn--active': activeTabId === tab.id }"
+            @click="setActiveTab(tab.id)"
+          >
+            {{ tab.label }}
+          </button>
+        </div>
+
+        <div v-if="activeTab.showTradeToggle" class="dtxn-toggle">
+          <button
+            type="button"
+            class="dtxn-toggle__btn"
+            :class="{ 'dtxn-toggle__btn--active': tradeSide === 'buy' }"
+            @click="setTradeSide('buy')"
+          >
+            خرید
+          </button>
+          <button
+            type="button"
+            class="dtxn-toggle__btn"
+            :class="{ 'dtxn-toggle__btn--active': tradeSide === 'sell' }"
+            @click="setTradeSide('sell')"
+          >
+            فروش
+          </button>
+        </div>
+      </div>
+
+      <div class="dtxn-filters">
+        <div class="dtxn-filters__label">
+          <BasicIcon icon="vuesax-linear:filter" size="16" />
+          <span>فیلترها:</span>
+        </div>
+        <a-select
+          v-model:value="statusFilter"
+          allow-clear
+          class="dtxn-filters__select"
+          placeholder="وضعیت"
+          size="large"
+          @change="applyInlineFilters"
+        >
+          <a-select-option value="active">فعال</a-select-option>
+          <a-select-option value="inactive">غیرفعال</a-select-option>
+        </a-select>
+        <BaseDatePicker
+          v-model:value="dateFilter"
+          class="dtxn-filters__date"
+          placeholder="تاریخ"
+          size="large"
+          @onchange="applyInlineFilters"
+        />
+      </div>
+
+      <div ref="listRef" :class="loading ? 'min-h-[40vh]' : ''" class="mt-5">
+        <div v-if="!loading" class="dtxn-list">
+          <list-anim>
+            <Item
+              v-for="item in items"
+              :key="item.id"
+              :item="item"
+              variant="desktop"
+            />
+          </list-anim>
+          <div :ref="bindDesktopObserver" class="w-full opacity-0 relative">
+            در حال بارگذاری
+          </div>
+          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+        </div>
+
+        <template v-else>
+          <TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
+        </template>
+
+        <div v-if="!loading && items.length === 0" class="dtxn-empty">
+          <img :src="emptyImage" alt="" class="dtxn-empty__image" />
+          <p class="dtxn-empty__text">{{ emptyText }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import emptyImage from '@/assets/img/cash_empty.svg'
+import Item from '../components/Item.vue'
+import { BOURSECU_TRANSACTION_TABS } from '../config/boursecuTabs'
+import { useTransactionsPageContext } from '../composables/useTransactionsPage'
+
+const listRef = ref<HTMLElement | null>(null)
+
+const {
+  items,
+  dateFilter,
+  statusFilter,
+  activeTabId,
+  tradeSide,
+  activeTab,
+  emptyText,
+  setActiveTab,
+  setTradeSide,
+  applyInlineFilters,
+  bindDesktopObserver,
+} = useTransactionsPageContext()
+</script>
+
+<style lang="less" src="./styles/desktop-transactions.less"></style>
diff --git a/src/views/base/transactions/desktop/DesktopDefaultTransactionsView.vue b/src/views/base/transactions/desktop/DesktopDefaultTransactionsView.vue
new file mode 100644
index 0000000..73194e1
--- /dev/null
+++ b/src/views/base/transactions/desktop/DesktopDefaultTransactionsView.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="dtxn">
+    <div class="dtxn__container">
+      <header class="dtxn-topbar">
+        <p class="dtxn-topbar__eyebrow">گزارش‌ها</p>
+        <h1 class="dtxn-topbar__title">لیست تراکنش‌ها</h1>
+      </header>
+
+      <div class="dtxn-filters">
+        <div class="dtxn-filters__label">
+          <BasicIcon icon="vuesax-linear:filter" size="16" />
+          <span>فیلتر تاریخ:</span>
+        </div>
+        <BaseDatePicker
+          v-model:value="dateFilter"
+          class="dtxn-filters__date"
+          placeholder="تاریخ"
+          size="large"
+        />
+        <BasicButton type="primary" @click="applyFilter">اعمال فیلتر</BasicButton>
+        <BasicButton v-if="dateFilter" @click="clearFilter">حذف فیلتر</BasicButton>
+      </div>
+
+      <div ref="el" :class="loading ? 'min-h-[40vh]' : ''" class="mt-5">
+        <div v-if="!loading" class="dtxn-list">
+          <list-anim>
+            <Item
+              v-for="item in items"
+              :key="item.id"
+              :item="item"
+              variant="desktop"
+            />
+          </list-anim>
+          <div :ref="bindDesktopObserver" class="w-full opacity-0 relative">
+            در حال بارگذاری
+          </div>
+          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+        </div>
+
+        <template v-else>
+          <TransactionSkeleton v-for="i in 8" :key="i" class="mt-1" />
+        </template>
+
+        <div v-if="items.length <= 0 && !loading" class="dtxn-empty">
+          <DotLottieVue
+            class="w-44 h-44"
+            autoplay
+            src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
+          />
+          <p class="dtxn-empty__text">{{ emptyText }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import Item from '../components/Item.vue'
+import { useTransactionsPageContext } from '../composables/useTransactionsPage'
+
+const el = ref<HTMLElement | null>(null)
+
+const {
+  items,
+  dateFilter,
+  emptyText,
+  applyFilter,
+  reloadTable,
+  bindDesktopObserver,
+} = useTransactionsPageContext()
+
+async function clearFilter() {
+  dateFilter.value = undefined
+  await reloadTable()
+}
+</script>
+
+<style lang="less" src="./styles/desktop-transactions.less"></style>
diff --git a/src/views/base/transactions/desktop/styles/desktop-transactions.less b/src/views/base/transactions/desktop/styles/desktop-transactions.less
new file mode 100644
index 0000000..1ec3b01
--- /dev/null
+++ b/src/views/base/transactions/desktop/styles/desktop-transactions.less
@@ -0,0 +1,286 @@
+/* Premium desktop transactions page */
+
+.dtxn {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dtxn__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dtxn-topbar {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.dtxn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 20px;
+}
+
+.dtxn-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  &__btn {
+    padding: 8px 14px;
+    border: 1px solid #e5e7eb;
+    border-radius: 999px;
+    background: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    color: #6b7280;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      border-color: #d1d5db;
+      color: #374151;
+    }
+
+    &--active {
+      background: @App-primary-color;
+      border-color: @App-primary-color;
+      color: #fff;
+    }
+  }
+}
+
+.dtxn-toggle {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  background: #f3f4f6;
+  border-radius: 10px;
+
+  &__btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    color: #6b7280;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+    &--active {
+      background: #fff;
+      color: #111827;
+      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+    }
+  }
+}
+
+.dtxn-filters {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+
+  &__label {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  &__select,
+  &__date {
+    min-width: 140px;
+  }
+}
+
+.dtxn-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dtxn-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 16px;
+  align-items: center;
+  width: 100%;
+  padding: 16px 18px;
+  border: 1px solid #f3f4f6;
+  border-radius: 12px;
+  background: #fff;
+  text-align: right;
+  cursor: pointer;
+  font-family: inherit;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    border-color: #e5e7eb;
+    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    flex-shrink: 0;
+
+    &--up {
+      background: #ecfdf3;
+      color: #027a48;
+    }
+
+    &--down {
+      background: #fef3f2;
+      color: #b42318;
+    }
+  }
+
+  &__main {
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 4px;
+  }
+
+  &__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  &__amount {
+    font-size: 15px;
+    font-weight: 600;
+    direction: ltr;
+    text-align: left;
+    white-space: nowrap;
+
+    &--up {
+      color: #027a48;
+    }
+
+    &--down {
+      color: #b42318;
+    }
+  }
+
+  &__status {
+    flex-shrink: 0;
+  }
+}
+
+.dtxn-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 56px 24px;
+  text-align: center;
+  background: #fff;
+  border-radius: 14px;
+  border: 1px dashed #e5e7eb;
+
+  &__image {
+    width: 140px;
+    max-width: 40vw;
+    height: auto;
+    object-fit: contain;
+  }
+
+  &__text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #6b7280;
+  }
+}
+
+.dtxn-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &__row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 10px 0;
+    border-bottom: 1px solid #f3f4f6;
+    font-size: 13px;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__label {
+    color: #6b7280;
+    font-weight: 500;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #111827;
+    font-weight: 600;
+    text-align: left;
+  }
+}
+
+@media (max-width: 900px) {
+  .dtxn-row {
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto;
+
+    &__amount,
+    &__status {
+      grid-column: 2;
+    }
+
+    &__amount {
+      justify-self: start;
+    }
+
+    &__status {
+      justify-self: end;
+    }
+  }
+}
diff --git a/src/views/base/transactions/index.vue b/src/views/base/transactions/index.vue
index f35bba1..dc2b1c0 100644
--- a/src/views/base/transactions/index.vue
+++ b/src/views/base/transactions/index.vue
@@ -1,213 +1,41 @@
 <template>
-  <div >
-<!--    <teleport to="body">-->
-<!--      <div  class="fixed top-0 right-0 left-0 bottom-0"></div>-->
-<!--    </teleport>-->
-    <div class="absolute inset-0 bg-cover bg-center opacity-60"></div>
-    <div
-      class="bg-white w-full transaction-list py-3 px-3 font-bold drop-shadow flex justify-between z-10"
-    >
-      <div>لیست تراکنش ها</div>
-      <BasicIcon icon="vuesax-linear:filter" @click="showFilter = true" />
-    </div>
-    <!--    <a-spin :spinning="loading">-->
-    <div
-      ref="el"
-      :class="loading ? 'h-screen' : ''"
-      class="px-3 pt-16 pb-10 "
-
-    >
-      <!--      <div v-for="item in items">ss</div>-->
-      <list-anim v-if="!loading">
-        <Item v-for="item in items" :key="item.id" :item="item" />
-        <div ref="observer" v-show="!loading" class="w-full opacity-0 relative">
-          در حال بارگذاری
-        </div>
-        <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
-      </list-anim>
-      <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
-      <div v-if="items.length <= 0" class="flex flex-col items-center justify-center h-80vh">
-        <DotLottieVue
-          class="w-11rem h-11rem"
-          autoplay
-          src="https://lottie.host/51d3315a-cf88-4c18-bb4d-a31511fd4325/KjSBzcMbi6.json"
-        />
-        <div class="font-bold">تراکنشی موجود نیست</div>
-      </div>
-    </div>
-    <!--    </a-spin>-->
-    <BasicActionSheet v-model:show="showFilter">
-      <div class="font-bold text-lg">فیلتر</div>
-      <div class="pb-20 mt-5">
-        <a-form-item class="w-full gap-2 !flex-col" label="تاریخ" name="password">
-          <BaseDatePicker v-model:value="dateFilter" class="w-full" size="large" />
-        </a-form-item>
-        <BasicButton class="w-full mt-5" type="primary" @click="applyFilter"
-          >اعمال فیلتر</BasicButton
-        >
-        <BasicButton class="w-full mt-2" @click="showFilter = false">بازگشت</BasicButton>
-      </div>
-    </BasicActionSheet>
+  <div class="transactions-page-root">
+    <ResponsiveViewPair v-if="isBoursecu">
+      <template #mobile>
+        <BoursecuTransactionsPage />
+      </template>
+      <template #desktop>
+        <DesktopBoursecuTransactionsView />
+      </template>
+    </ResponsiveViewPair>
+    <ResponsiveViewPair v-else>
+      <template #mobile>
+        <DefaultTransactionsPage />
+      </template>
+      <template #desktop>
+        <DesktopDefaultTransactionsView />
+      </template>
+    </ResponsiveViewPair>
   </div>
 </template>
 
 <script lang="ts" setup>
-import Item from './components/Item.vue'
-/*import {lengthValidation, required} from "@/utils/inputRules";
-import {loading} from "@/utils";
-import BasicButton from "@/components/BasicPacks/BasicButton.vue";
-import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
-import BasicInput from "@/components/BasicPacks/BasicInput.vue";*/
-import { onMounted, ref } from 'vue'
-import type { TableEngineInput, TableOutput } from '@/models/table'
-import { loading, loadingMore } from '@/utils'
-// import {getOrders} from "@/api/order";
-import { getTransactionTable } from '@/api/transaction'
-import type { Transaction } from '@/models/transaction'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue'
-import {useInfiniteScroll, useIntersectionObserver, useScroll} from '@vueuse/core'
-import ListAnim from '@/components/ListAnim.vue'
-import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
-import img from "@/assets/img/user_ly1.svg";
+import ResponsiveViewPair from '@/layouts/components/ResponsiveViewPair.vue'
+import { isBoursecuProject } from '@/utils/config'
+import { useTransactionsPageProvider } from './composables/useTransactionsPage'
+import BoursecuTransactionsPage from './BoursecuTransactionsPage.vue'
+import DefaultTransactionsPage from './DefaultTransactionsPage.vue'
+import DesktopBoursecuTransactionsView from './desktop/DesktopBoursecuTransactionsView.vue'
+import DesktopDefaultTransactionsView from './desktop/DesktopDefaultTransactionsView.vue'
 
-const pagination = ref<TableEngineInput>({ filters: [], limit: 7, page: 0 })
-const items = ref<Transaction[]>([])
-const tableOutput = ref<TableOutput<Transaction> | null>(null)
-const showFilter = ref<boolean>(false)
-const dateFilter = ref<string>()
-const observer = ref()
-// const { y } = useScroll(el)
+const isBoursecu = isBoursecuProject()
 
-async function initTable() {
-  try {
-    if (dateFilter.value) {
-      pagination.value.filters = []
-      pagination.value.filters.push({
-        field: 'created_at',
-        cr: 'and',
-        type: 'date',
-        op: 'eq',
-        value: dateFilter.value
-      })
-    } else {
-      pagination.value.filters = []
-    }
-    pagination.value.page === 0 ? (loading.value = true) : (loadingMore.value = true)
-    tableOutput.value = await getTransactionTable(pagination.value)
-    items.value.push(...tableOutput.value.rows)
-    // console.log(tableOutput.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    loadingMore.value = false
-  }
-}
-
-async function applyFilter() {
-  pagination.value.page = 0
-  items.value = []
-  await initTable()
-  showFilter.value = false
-}
-
-onMounted(() => {
-  initTable()
-})
-
-/*useInfiniteScroll(
-  el,
-  async () => {
-    // load more
-    // console.log('salamss')
-    if (
-      tableOutput.value &&
-      (pagination.value.page + 1) * pagination.value.limit < tableOutput.value.query.total
-    ) {
-      // console.log('gfgf')
-      pagination.value.page++
-      await initTable()
-    }
-  },
-  { distance: 12 }
-)*/
-
-useIntersectionObserver(
-    observer,
-    async ([{isIntersecting}]) => {
-      if ( isIntersecting &&
-          tableOutput.value &&
-          (pagination.value.page + 1) * pagination.value.limit < tableOutput.value.query.total
-      ) {
-        // console.log('gfgf')
-        pagination.value.page++
-        await initTable()
-      }
-    },
-    {
-      root: null,
-      rootMargin: '300px',
-      threshold: 0.01
-    }
-)
-
-/*const items = [
-  {
-    isUp: true,
-    hasTransition: true
-  },
-  {
-    isUp: false,
-    hasTransition: false
-  },
-  {
-    isUp: true,
-    hasTransition: false
-  },
-  {
-    isUp: true,
-    hasTransition: true
-  },
-  {
-    isUp: false,
-    hasTransition: false
-  },
-  {
-    isUp: true,
-    hasTransition: false
-  },
-  {
-    isUp: true,
-    hasTransition: true
-  },
-  {
-    isUp: true,
-    hasTransition: true
-  },
-  {
-    isUp: false,
-    hasTransition: false
-  },
-  {
-    isUp: true,
-    hasTransition: true
-  },
-]*/
+useTransactionsPageProvider({ boursecu: isBoursecu })
 </script>
 
-<style scoped lang="less">
-.transaction-list {
-  position: fixed;
-  right: 0;
-  left: 0;
-  @media screen and (min-width: 426px) {
-    width: 426px;
-    left: auto;
-    right: auto;
-  }
+<style scoped>
+.transactions-page-root {
+  min-height: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/views/base/user/components/UserPasswordForm.vue b/src/views/base/user/components/UserPasswordForm.vue
new file mode 100644
index 0000000..6383702
--- /dev/null
+++ b/src/views/base/user/components/UserPasswordForm.vue
@@ -0,0 +1,56 @@
+<template>
+  <a-form
+    ref="formPassRef"
+    :model="userPassForm"
+    class="!mt-5"
+    name="user-password"
+    layout="vertical"
+    @finish="submitPassForm"
+  >
+    <a-form-item label="کلمه عبور جدید" :rules="passwordRules()" name="password">
+      <BasicInput v-model:value="userPassForm.password" isPassword place-holder="کلمه عبور " />
+      <div
+        :class="[
+          guideTypePassword.color,
+          userPassForm.password.length >= 6 ? 'block' : 'hidden',
+        ]"
+        class="text-[12px] mt-1"
+      >
+        {{ guideTypePassword.text }}
+      </div>
+    </a-form-item>
+    <div v-if="showSubmit" class="md:w-[395px] pt-3rem px-3">
+      <BasicButton
+        :disabled="loading"
+        class="w-full py-2 mb-20"
+        html-type="submit"
+        type="primary"
+      >
+        <a-spin v-if="loading" size="small" />
+        <span v-else>ثبت</span>
+      </BasicButton>
+    </div>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import { useUserPageContext } from '../composables/useUserPage'
+
+withDefaults(
+  defineProps<{
+    showSubmit?: boolean
+  }>(),
+  { showSubmit: false },
+)
+
+const {
+  userPassForm,
+  formPassRef,
+  loading,
+  guideTypePassword,
+  passwordRules,
+  submitPassForm,
+} = useUserPageContext()
+</script>
diff --git a/src/views/base/user/components/UserProfileForm.vue b/src/views/base/user/components/UserProfileForm.vue
new file mode 100644
index 0000000..d0f3b75
--- /dev/null
+++ b/src/views/base/user/components/UserProfileForm.vue
@@ -0,0 +1,59 @@
+<template>
+  <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="ok">
+    <a-form-item :rules="[isValidPersian()]" label="نام" name="fname">
+      <BasicInput v-model:value="userFormState.fname" />
+    </a-form-item>
+    <a-form-item :rules="[isValidPersian()]" label="نام خانوادگی" name="lname">
+      <BasicInput v-model:value="userFormState.lname" />
+    </a-form-item>
+    <a-form-item label="تاریخ تولد" name="birth_date">
+      <BaseDatePicker v-model:value="userFormState.birth_date" class="w-full" inputReadOnly />
+    </a-form-item>
+    <a-form-item :rules="[requireNationalCode()]" label="شماره ملی" name="n_code">
+      <BasicInput
+        v-model:value="userFormState.n_code"
+        type="number"
+        :disabled="userFormState.is_legal == 1 || userFormState.is_legal == 2"
+      />
+    </a-form-item>
+    <a-form-item label="نام شهر" name="city">
+      <BasicInput v-model:value="userFormState.city" />
+    </a-form-item>
+    <a-form-item v-if="showSubmit">
+      <div class="wrap-fix md:w-[395px] bottom-5 px-3">
+        <BasicButton
+          :disabled="loading"
+          class="w-full py-2 mb-20"
+          html-type="submit"
+          type="primary"
+        >
+          <a-spin v-if="loading" size="small" />
+          <span v-else>ثبت</span>
+        </BasicButton>
+      </div>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
+import { useUserPageContext } from '../composables/useUserPage'
+
+withDefaults(
+  defineProps<{
+    showSubmit?: boolean
+  }>(),
+  { showSubmit: false },
+)
+
+const {
+  userFormState,
+  formRef,
+  loading,
+  isValidPersian,
+  requireNationalCode,
+  ok,
+} = useUserPageContext()
+</script>
diff --git a/src/views/base/user/composables/useUserPage.ts b/src/views/base/user/composables/useUserPage.ts
new file mode 100644
index 0000000..72bbb6f
--- /dev/null
+++ b/src/views/base/user/composables/useUserPage.ts
@@ -0,0 +1,280 @@
+import { computed, inject, onMounted, provide, ref, watch, type InjectionKey } from 'vue'
+import { loading } from '@/utils'
+import {
+  guideTypePassword,
+  isValidPersian,
+  passwordRules,
+  requireNationalCode,
+} from '@/utils/inputRules'
+import type { Password, User } from '@/models/login'
+import router from '@/router'
+import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import { updateMe, updatePass } from '@/api/me'
+import { useUserStore } from '@/store/userStore'
+import { getUserAvatarUrl } from '@/utils/file'
+import { useConfigStore } from '@/store/configStore'
+import { getConfigApp, getReferralShareText, getReferralShareTitle } from '@/utils/config'
+
+export interface UserMenuAction {
+  id: string
+  label: string
+  icon: string
+  onClick: () => void
+  visible: boolean
+}
+
+export interface UserPageContext {
+  userStore: ReturnType<typeof useUserStore>
+  userFormState: ReturnType<typeof ref<User>>
+  userPassForm: ReturnType<typeof ref<Password>>
+  formRef: ReturnType<typeof ref<FormInstance | undefined>>
+  formPassRef: ReturnType<typeof ref<FormInstance | undefined>>
+  editPassVisible: ReturnType<typeof ref<boolean>>
+  editPasswordVisible: ReturnType<typeof ref<boolean>>
+  isLegal: ReturnType<typeof computed<{ title: string; color: string; icon: string }>>
+  shareButtonLabel: ReturnType<typeof computed<string>>
+  menuActions: ReturnType<typeof computed<UserMenuAction[]>>
+  loading: typeof loading
+  guideTypePassword: typeof guideTypePassword
+  isValidPersian: typeof isValidPersian
+  requireNationalCode: typeof requireNationalCode
+  passwordRules: typeof passwordRules
+  copyCode: () => void
+  shareCode: () => void
+  ok: () => void
+  submitPassForm: () => void
+}
+
+export const USER_PAGE_CONTEXT_KEY: InjectionKey<UserPageContext> = Symbol('userPageContext')
+
+export function useUserPage() {
+  const userFormState = ref<User>({
+    fname: '',
+    lname: '',
+    mobile: undefined,
+    birth_date: '',
+    city: '',
+    n_code: undefined,
+  })
+  const userPassForm = ref<Password>({ password: '' })
+  const formRef = ref<FormInstance>()
+  const formPassRef = ref<FormInstance>()
+  const userStore = useUserStore()
+  const nameProject = useConfigStore().config.name_fa
+  const editPassVisible = ref(false)
+  const editPasswordVisible = ref(false)
+  const localAvatarUrl = ref<string | null>(null)
+
+  const profileAvatarUrl = computed(
+    () => localAvatarUrl.value || getUserAvatarUrl(userStore.userInfo),
+  )
+
+  const editAvatarUrl = computed(
+    () => localAvatarUrl.value || getUserAvatarUrl(userFormState.value),
+  )
+
+  const isLegal = computed(() => {
+    const result = { title: '', color: '', icon: '' }
+    switch (userFormState.value.is_legal) {
+      case 0:
+        result.title = 'احراز هویت نشده'
+        result.color = 'reject'
+        result.icon = 'vuesax-linear:close-circle'
+        break
+      case 1:
+      case 2:
+        result.title = 'احراز هویت شده'
+        result.color = 'success'
+        result.icon = 'vuesax-linear:verify'
+        break
+    }
+    return result
+  })
+
+  const shareButtonLabel = computed(() =>
+    getConfigApp('name') === 'garoosi' ? 'دعوت از دوستان' : 'اشتراک گذاری',
+  )
+
+  const menuActions = computed<UserMenuAction[]>(() => {
+    const projectName = getConfigApp('name')
+    return [
+      {
+        id: 'password',
+        label: 'تغییر رمز عبور',
+        icon: 'vuesax-linear:lock',
+        onClick: () => { editPasswordVisible.value = true },
+        visible: true,
+      },
+      {
+        id: 'address',
+        label: 'آدرس ها',
+        icon: 'vuesax-linear:map',
+        onClick: () => router.push({ name: 'address' }),
+        visible: true,
+      },
+      {
+        id: 'notify',
+        label: 'هشدار قیمت',
+        icon: 'vuesax-linear:bill',
+        onClick: () => router.push({ name: 'notifyTrigger' }),
+        visible: true,
+      },
+      {
+        id: 'about',
+        label: 'درباره ما',
+        icon: 'vuesax-linear:info-circle',
+        onClick: () => router.push({ name: 'about' }),
+        visible: true,
+      },
+      {
+        id: 'giftCard',
+        label: 'ثبت کارت هدیه',
+        icon: 'vuesax-linear:gift',
+        onClick: () => router.push({ name: 'giftCard' }),
+        visible: projectName === 'garoosi',
+      },
+      {
+        id: 'physicalReceive',
+        label: 'تحویل فیزیکی',
+        icon: 'vuesax-linear:direct-inbox',
+        onClick: () => router.push({ name: 'physicalReceive' }),
+        visible: projectName !== 'bazretala',
+      },
+      {
+        id: 'rules',
+        label: 'قوانین و مقررات',
+        icon: 'vuesax-linear:task',
+        onClick: () => router.push({ name: 'rules' }),
+        visible: true,
+      },
+      {
+        id: 'permissions',
+        label: 'مجوز ها',
+        icon: 'vuesax-linear:archive-book',
+        onClick: () => router.push({ name: 'permissions' }),
+        visible: projectName === 'bazretala',
+      },
+    ].filter((action) => action.visible)
+  })
+
+  function setForm() {
+    userFormState.value = { ...userStore.userInfo } as User
+    localAvatarUrl.value = getUserAvatarUrl(userStore.userInfo)
+  }
+
+  function onAvatarUploaded({ id, url }: { id: number; url: string }) {
+    userFormState.value.avatar_id = id
+    localAvatarUrl.value = url
+    if (userStore.userInfo) {
+      userStore.userInfo.avatar_id = id
+      userStore.userInfo.avatar_url = url
+    }
+  }
+
+  function onAvatarRemoved() {
+    userFormState.value.avatar_id = null
+    localAvatarUrl.value = null
+    if (userStore.userInfo) {
+      userStore.userInfo.avatar_id = null
+      userStore.userInfo.avatar_url = null
+    }
+  }
+
+  watch(editPassVisible, (open) => {
+    if (open) setForm()
+  })
+
+  function copyCode() {
+    const val = userStore.userInfo?.referral_id
+    navigator.clipboard.writeText(val)
+    message.info('کد رونوشت شد')
+  }
+
+  function shareCode() {
+    const val = getReferralShareText({
+      userName: userStore.userInfo?.name,
+      projectName: nameProject,
+      referralId: userStore.userInfo?.referral_id,
+    })
+    navigator.share({
+      title: getReferralShareTitle(nameProject),
+      text: val,
+    })
+  }
+
+  function ok() {
+    formRef.value?.validateFields().then(async () => {
+      try {
+        loading.value = true
+        await updateMe(userFormState.value)
+        await userStore.getMyInfo()
+        localAvatarUrl.value = getUserAvatarUrl(userStore.userInfo)
+        editPassVisible.value = false
+        message.success('اطلاعات شما با موفقیت به روز رسانی شد')
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loading.value = false
+      }
+    })
+  }
+
+  function submitPassForm() {
+    formPassRef.value?.validateFields().then(async () => {
+      try {
+        loading.value = true
+        await updatePass(userPassForm.value)
+        await userStore.getMyInfo()
+        editPassVisible.value = false
+        message.success('پسورد شما با موفقیت به روز رسانی شد')
+        editPasswordVisible.value = false
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loading.value = false
+      }
+    })
+  }
+
+  onMounted(() => {
+    setForm()
+    if (userStore.userInfo?.is_legal === 0) {
+      editPassVisible.value = true
+    }
+  })
+
+  const context: UserPageContext = {
+    userStore,
+    userFormState,
+    userPassForm,
+    formRef,
+    formPassRef,
+    editPassVisible,
+    editPasswordVisible,
+    isLegal,
+    shareButtonLabel,
+    menuActions,
+    loading,
+    guideTypePassword,
+    isValidPersian,
+    requireNationalCode,
+    passwordRules,
+    copyCode,
+    shareCode,
+    ok,
+    submitPassForm,
+  }
+
+  provide(USER_PAGE_CONTEXT_KEY, context)
+
+  return context
+}
+
+export function useUserPageContext() {
+  const context = inject(USER_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useUserPageContext must be used within a page that calls useUserPage()')
+  }
+  return context
+}
diff --git a/src/views/base/user/desktop/DesktopUserView.vue b/src/views/base/user/desktop/DesktopUserView.vue
new file mode 100644
index 0000000..272081c
--- /dev/null
+++ b/src/views/base/user/desktop/DesktopUserView.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="duser">
+    <div class="duser__container">
+      <header class="duser-topbar">
+        <button type="button" class="duser-topbar__back" @click="router.back()">
+          <BasicIcon icon="vuesax-linear:arrow-right-1" size="18" />
+          <span>بازگشت</span>
+        </button>
+        <div class="duser-topbar__meta">
+          <p class="duser-topbar__eyebrow">حساب کاربری</p>
+          <h1 class="duser-topbar__title">اطلاعات حساب کاربری</h1>
+        </div>
+      </header>
+
+      <div class="duser-grid">
+        <section class="duser-surface duser-profile">
+          <div class="duser-profile__header">
+            <div class="duser-profile__avatar">
+              <BasicIcon icon="vuesax-linear:user" size="28" />
+            </div>
+            <div>
+              <h2 class="duser-profile__name">{{ userStore.userInfo?.name ?? 'کاربر' }}</h2>
+              <p class="duser-profile__phone">{{ userStore.userInfo?.mobile }}</p>
+            </div>
+          </div>
+
+          <div class="duser-profile__fields">
+            <div class="duser-profile__field">
+              <span class="duser-profile__label">نام و نام خانوادگی</span>
+              <span class="duser-profile__value">{{ userStore.userInfo?.name }}</span>
+            </div>
+            <div class="duser-profile__field">
+              <span class="duser-profile__label">شماره تلفن همراه</span>
+              <span class="duser-profile__value">{{ userStore.userInfo?.mobile }}</span>
+            </div>
+            <div v-if="userStore.userInfo?.referral_id" class="duser-profile__field">
+              <span class="duser-profile__label">کد معرف</span>
+              <span class="duser-profile__value">{{ userStore.userInfo?.referral_id }}</span>
+            </div>
+          </div>
+
+          <div v-if="userStore.userInfo?.referral_id" class="duser-profile__referral-actions">
+            <button type="button" class="duser-profile__btn" @click="shareCode">
+              <BasicIcon icon="vuesax-linear:share" size="16" />
+              <span>{{ shareButtonLabel }}</span>
+            </button>
+            <button type="button" class="duser-profile__btn" @click="copyCode">
+              <BasicIcon icon="vuesax-linear:copy" size="16" />
+              <span>رونوشت</span>
+            </button>
+          </div>
+
+          <button
+            type="button"
+            class="duser-profile__btn duser-profile__btn--primary"
+            @click="editPassVisible = true"
+          >
+            <BasicIcon icon="vuesax-linear:edit-2" size="16" />
+            <span>ویرایش اطلاعات کاربری</span>
+          </button>
+        </section>
+
+        <section class="duser-surface duser-actions">
+          <h3 class="duser-actions__title">تنظیمات و خدمات</h3>
+          <div class="duser-actions__list">
+            <button
+              v-for="action in menuActions"
+              :key="action.id"
+              type="button"
+              class="duser-actions__item"
+              @click="action.onClick"
+            >
+              <span class="duser-actions__icon">
+                <BasicIcon :icon="action.icon" size="18" />
+              </span>
+              <span class="duser-actions__label">{{ action.label }}</span>
+              <BasicIcon
+                class="duser-actions__chevron"
+                icon="vuesax-linear:arrow-left"
+                size="16"
+              />
+            </button>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import { useUserPageContext } from '../composables/useUserPage'
+
+const {
+  userStore,
+  editPassVisible,
+  shareButtonLabel,
+  menuActions,
+  copyCode,
+  shareCode,
+} = useUserPageContext()
+</script>
+
+<style lang="less" src="./styles/desktop-user.less"></style>
diff --git a/src/views/base/user/desktop/styles/desktop-user.less b/src/views/base/user/desktop/styles/desktop-user.less
new file mode 100644
index 0000000..52bbd4e
--- /dev/null
+++ b/src/views/base/user/desktop/styles/desktop-user.less
@@ -0,0 +1,252 @@
+/* Premium desktop user account page */
+
+.duser {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.duser__container {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.duser-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    font-size: 13px;
+    font-weight: 500;
+    font-family: inherit;
+    cursor: pointer;
+    padding: 8px 0;
+
+    &:hover {
+      color: #111827;
+    }
+  }
+
+  &__meta {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.2;
+  }
+}
+
+.duser-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
+  gap: 20px;
+  align-items: start;
+}
+
+.duser-surface {
+  background: #ffffff;
+  border-radius: 14px;
+  padding: 24px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.duser-profile {
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #f3f4f6;
+  }
+
+  &__avatar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    border-radius: 16px;
+    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
+    color: @App-primary-color;
+    flex-shrink: 0;
+  }
+
+  &__name {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: #111827;
+    margin: 0 0 4px;
+  }
+
+  &__phone {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0;
+    direction: ltr;
+    text-align: right;
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    margin-bottom: 20px;
+  }
+
+  &__field {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 14px;
+    border-radius: 10px;
+    background: #f9fafb;
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #6b7280;
+  }
+
+  &__value {
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+    direction: ltr;
+    text-align: left;
+  }
+
+  &__referral-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin-bottom: 16px;
+  }
+
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 10px 14px;
+    border-radius: 10px;
+    border: 1px solid #e5e7eb;
+    background: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s ease, border-color 0.15s ease;
+
+    &:hover {
+      background: #f9fafb;
+      border-color: #d1d5db;
+    }
+
+    &--primary {
+      width: 100%;
+      background: @App-primary-color;
+      border-color: @App-primary-color;
+      color: #fff;
+
+      &:hover {
+        opacity: 0.92;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.duser-actions {
+  &__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+    margin: 0 0 16px;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 14px;
+    border: 1px solid #f3f4f6;
+    border-radius: 10px;
+    background: #fff;
+    text-align: right;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background 0.15s ease, border-color 0.15s ease;
+
+    &:hover {
+      background: #f9fafb;
+      border-color: #e5e7eb;
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: #f3f4f6;
+    color: #374151;
+    flex-shrink: 0;
+  }
+
+  &__label {
+    flex: 1;
+    font-size: 13px;
+    font-weight: 600;
+    color: #111827;
+  }
+
+  &__chevron {
+    color: #9ca3af;
+    flex-shrink: 0;
+  }
+}
+
+@media (max-width: 860px) {
+  .duser-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/views/base/user/index.vue b/src/views/base/user/index.vue
index 957ac7f..2aa8256 100644
--- a/src/views/base/user/index.vue
+++ b/src/views/base/user/index.vue
@@ -1,199 +1,10 @@
 <template>
-  <div class="relative">
-    <div>
-      <!--        <img :src="gr_bottom" alt="" class="absolute bottom-20">-->
-      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
-    </div>
-    <div class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow flex">
-      <div @click="router.back()" class="cursor-pointer">
-        <BasicIcon icon="vuesax-linear:arrow-right-1" />
-      </div>
-      <div class="mr-2 mt-2">اطلاعات حساب کاربری</div>
-    </div>
-    <div class="pt-16 pb-8 z-30 relative">
-      <div
-        class="border-gray-200 border-1 rounded-xl p-5 trans flex flex-col items-center mx-5 z-1000 relative bg-white shadow-lg"
-      >
-<!--        <div
-          class="w-20 h-20 rounded-full overflow-hidden border-2 border-gray-200 bg-gray-100 flex items-center justify-center mb-3"
-        >
-          <img
-            v-if="profileAvatarUrl"
-            :src="profileAvatarUrl"
-            alt="عکس پروفایل"
-            class="w-full h-full object-cover"
-          />
-          <BasicIcon v-else icon="vuesax-linear:user" size="36" color="#9CA3AF" />
-        </div>-->
-        <div class="text-primary font-bold w-full text-center flex justify-between">
-          نام و نام خانوادگی:
-          <div class="mr-2">{{ userStore.userInfo?.name }}</div>
-        </div>
-        <div class="text-primary font-bold w-full text-center flex justify-between">
-          شماره تلفن همراه:
-          <div class="mr-2">{{ userStore.userInfo?.mobile }}</div>
-        </div>
-        <div
-          v-if="userStore.userInfo?.referral_id"
-          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
-        >
-          کد معرف:
-          <div class="flex gap-2">
-            <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
-            <!--            <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
-                                   @click.stop="copyCode()" />
-                        &lt;!&ndash;          vuesax-linear:hierarchy-3&ndash;&gt;
-                        <BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
-                                   @click.stop="shareCode()" />-->
-          </div>
-        </div>
-        <div class="w-full flex gap-2 mt-1">
-          <BasicButton
-            icon="vuesax-linear:share"
-            size="small"
-            class="flex-1"
-            icon-size="18"
-            @click.stop="shareCode()"
-          >
-            {{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
-          </BasicButton>
-          <BasicButton
-            icon="vuesax-linear:copy"
-            size="small"
-            class="flex-1"
-            icon-size="18"
-            @click.stop="copyCode()"
-          >
-            رونوشت
-          </BasicButton>
-        </div>
-        <BasicButton
-          class="mt-5 w-full"
-          icon=""
-          iconSize="18"
-          size="large"
-          type="primary"
-          @click="editPassVisible = true"
-        >
-          <div class="flex">
-            <BasicIcon icon="vuesax-linear:eye" class="absolute right-8" />
-            <div>ویرایش اطلاعات کاربری</div>
-          </div>
-        </BasicButton>
-        <div class="h-45vh overflow-y-auto mt-4">
-          <BasicButton
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            size="large"
-            @click="editPasswordVisible = true"
-            :key="10"
-          >
-            <div class="flex">
-              <BasicIcon icon="vuesax-linear:lock" class="absolute right-8" />
-              <div>تغییر رمز عبور</div>
-            </div>
-          </BasicButton>
-          <BasicButton
-            class="w-full mt-2"
-            size="large"
-            @click="$router.push({ name: 'address' })"
-          >
-            <div class="flex">
-              <BasicIcon icon="vuesax-linear:map" class="absolute right-8" />
-              <div>آدرس ها</div>
-            </div>
-          </BasicButton>
-          <BasicButton
-            class="w-full mt-2"
-            size="large"
-            @click="$router.push({ name: 'notifyTrigger' })"
-          >
-            <div class="flex">
-              <BasicIcon icon="vuesax-linear:bill" class="absolute right-8" />
-              <div>هشدار قیمت</div>
-            </div>
-          </BasicButton>
-          <BasicButton
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            size="large"
-            @click="$router.push({ name: 'about' })"
-          >
-            <div class="flex">
-              <BasicIcon icon="vuesax-linear:info-circle" class="absolute right-8" />
-              <div>درباره ما</div>
-            </div>
-          </BasicButton>
-          <BasicButton
-            v-if="getConfigApp('name')=='garoosi'"
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            size="large"
-            @click="$router.push({ name: 'giftCard' })"
-          >
-            <div class="flex">
-              <BasicIcon icon="vuesax-linear:gift" class="absolute right-8" />
-              <div>ثبت کارت هدیه</div>
-            </div>
-          </BasicButton>
-          <BasicButton
-          v-if="getConfigApp('name')!=='bazretala'"
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            size="large"
-            @click="$router.push({ name: 'physicalReceive' })"
-          >
-            <div class="flex">
-              <BasicIcon icon="vuesax-linear:direct-inbox" class="absolute right-8" />
-              <div>تحویل فیزیکی</div>
-            </div>
-          </BasicButton>
-          <BasicButton
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            size="large"
-            @click="$router.push({ name: 'rules' })"
-          >
-            <div class="flex">
-              <BasicIcon icon="vuesax-linear:task" class="absolute right-8" />
-              <div>قوانین و مقررات</div>
-            </div>
-          </BasicButton>
-                   <BasicButton
-                   v-if="getConfigApp('name')=='bazretala'"
-                      class="mt-2 w-full"
-                      icon=""
-                      iconSize="18"
-                      size="large"
-                      @click="$router.push({ name: 'permissions' })"
-                    >
-                      <div class="flex">
-                        <BasicIcon icon="vuesax-linear:archive-book" class="absolute right-8" />
-                        <div>مجوز ها</div>
-                      </div>
-                    </BasicButton>
-          <!--          <BasicButton
-                      class="mt-2 w-full"
-                      icon=""
-                      iconSize="18"
-                      size="large"
-                      @click="$router.push({ name: 'earnMoney' })"
-                    >
-                      <div class="flex">
-                        <BasicIcon icon="vuesax-linear:dollar-circle" class="absolute right-8" />
-                        <div>کسب درآمد</div>
-                      </div>
-                    </BasicButton>-->
-        </div>
-      </div>
-    </div>
+  <div class="user-page-root">
+    <DesktopUserView v-show="isDesktop" />
+    <MobileUserView v-show="!isDesktop" />
 
-    <BasicActionSheet v-model:show="editPassVisible">
+    <!-- ویرایش اطلاعات — موبایل -->
+    <BasicActionSheet v-if="!isDesktop" v-model:show="editPassVisible">
       <div class="flex justify-center justify-between">
         <div class="font-bold text-lg">ویرایش اطلاعات</div>
         <div class="flex flex-col justify-center items-center">
@@ -202,293 +13,83 @@
         </div>
       </div>
       <div class="h60vh overflow-y-auto pb20">
-<!--        <ProfileAvatarUpload
-          :image-url="editAvatarUrl"
-          class="mb-4"
-          @uploaded="onAvatarUploaded"
-          @removed="onAvatarRemoved"
-        />-->
-        <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="ok">
-          <a-form-item :rules="[isValidPersian()]" label="نام" name="fname">
-            <BasicInput v-model:value="userFormState.fname" />
-          </a-form-item>
-          <a-form-item :rules="[isValidPersian()]" label="نام خانوادگی" name="lname">
-            <BasicInput v-model:value="userFormState.lname" />
-          </a-form-item>
-          <a-form-item label="تاریخ تولد" name="birth_date">
-            <BaseDatePicker v-model:value="userFormState.birth_date" class="w-full" inputReadOnly />
-          </a-form-item>
-          <a-form-item :rules="[requireNationalCode()]" label="شماره ملی" name="n_code">
-            <BasicInput v-model:value="userFormState.n_code" type="number"
-                        :disabled="userFormState.is_legal == 1 || userFormState.is_legal == 2" />
-          </a-form-item>
-          <a-form-item label="نام شهر" name="city">
-            <BasicInput v-model:value="userFormState.city" />
-          </a-form-item>
-          <a-form-item>
-            <div class="wrap-fix md:w-[395px] bottom-5 px-3">
-              <BasicButton
-                :disabled="loading"
-                class="w-full py-2 mb-20"
-                html-type="submit"
-                type="primary"
-              >
-                <div>
-                  <a-spin v-if="loading" size="small" />
-                  <div v-else>ثبت</div>
-                </div>
-              </BasicButton>
-            </div>
-          </a-form-item>
-        </a-form>
+        <UserProfileForm show-submit />
       </div>
     </BasicActionSheet>
-    <BasicActionSheet v-model:show="editPasswordVisible">
+
+    <!-- ویرایش اطلاعات — دسکتاپ -->
+    <BasicModal
+      v-else
+      v-model:visible="editPassVisible"
+      title="ویرایش اطلاعات"
+      width="520px"
+      destroy-on-close
+      :loading="loading"
+      @ok="ok"
+    >
+      <div class="flex justify-end mb-4">
+        <div class="flex flex-col items-center">
+          <BasicIcon :icon="isLegal.icon" size="30" :class="isLegal.color" />
+          <p class="text-[10px] mt-1" :class="isLegal.color">{{ isLegal.title }}</p>
+        </div>
+      </div>
+      <UserProfileForm />
+    </BasicModal>
+
+    <!-- ویرایش رمزعبور — موبایل -->
+    <BasicActionSheet v-if="!isDesktop" v-model:show="editPasswordVisible">
       <div class="font-bold text-lg">ویرایش رمزعبور</div>
       <div class="h35vh overflow-y-auto">
-        <a-form
-          ref="formPassRef"
-          :model="userPassForm"
-          class="!mt-5"
-          name="basic"
-          @finish="submitPassForm"
-        >
-          <a-form-item label="کلمه عبور جدید" :rules="passwordRules()" name="password">
-            <BasicInput v-model:value="userPassForm.password" isPassword place-holder="کلمه عبور " />
-            <div
-              :class="[
-                guideTypePassword.color,
-                userPassForm.password.length >= 6 ? 'block' : 'hidden'
-              ]"
-              class="text-[12px] mt-1"
-            >
-              {{ guideTypePassword.text }}
-            </div>
-          </a-form-item>
-          <div class=" md:w-[395px] pt-3rem px-3">
-            <BasicButton
-              :disabled="loading"
-              class="w-full py-2 mb-20"
-              html-type="submit"
-              type="primary"
-            >
-              <div>
-                <a-spin v-if="loading" size="small" />
-                <div v-else>ثبت</div>
-              </div>
-            </BasicButton>
-          </div>
-        </a-form>
+        <UserPasswordForm show-submit />
       </div>
     </BasicActionSheet>
+
+    <!-- ویرایش رمزعبور — دسکتاپ -->
+    <BasicModal
+      v-else
+      v-model:visible="editPasswordVisible"
+      title="ویرایش رمزعبور"
+      width="480px"
+      destroy-on-close
+      :loading="loading"
+      @ok="submitPassForm"
+    >
+      <UserPasswordForm />
+    </BasicModal>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, computed, watch } from 'vue'
-import img from '@/assets/img/user_ly1.svg'
-import gr_bottom from './assets/img/gr_bottom_white.svg'
-import { loading } from '@/utils'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import {
-  lengthValidation,
-  required,
-  requireNationalCode,
-  passwordRules,
-  guideTypePassword,
-  isValidPersian
-} from '@/utils/inputRules'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import type { User, Password } from '@/models/login'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
-import type { FormInstance } from 'ant-design-vue'
-import { message } from 'ant-design-vue'
-import { updateMe, updatePass } from '@/api/me'
-import { useUserStore } from '@/store/userStore'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
-import ProfileAvatarUpload from '@/components/ProfileAvatarUpload.vue'
-import { getUserAvatarUrl } from '@/utils/file'
-import { useConfigStore } from '@/store/configStore'
-import { getConfigApp, getReferralShareText, getReferralShareTitle } from '../../../utils/config'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { useUserPage } from './composables/useUserPage'
+import MobileUserView from './mobile/MobileUserView.vue'
+import DesktopUserView from './desktop/DesktopUserView.vue'
+import UserProfileForm from './components/UserProfileForm.vue'
+import UserPasswordForm from './components/UserPasswordForm.vue'
 
-const userFormState = ref<User>({
-  fname: '',
-  lname: '',
-  mobile: undefined,
-  birth_date: '',
-  city: '',
-  n_code: undefined
-})
-const userPassForm = ref<Password>({
-  password: ''
-})
-const formRef = ref<FormInstance>()
-const formPassRef = ref<FormInstance>()
-const userStore = useUserStore()
-const nameProject = useConfigStore().config.name_fa
+const isDesktop = useDesktopBreakpoint()
 
-// const editPassVisible = ref<boolean>(false)
-const editPassVisible = ref<boolean>(false)
-const editPasswordVisible = ref<boolean>(false)
-const localAvatarUrl = ref<string | null>(null)
-
-const profileAvatarUrl = computed(() => localAvatarUrl.value || getUserAvatarUrl(userStore.userInfo))
-
-const editAvatarUrl = computed(() => localAvatarUrl.value || getUserAvatarUrl(userFormState.value))
-
-function setForm() {
-  userFormState.value = { ...userStore.userInfo } as User
-  localAvatarUrl.value = getUserAvatarUrl(userStore.userInfo)
-}
-
-function onAvatarUploaded({ id, url }: { id: number; url: string }) {
-  userFormState.value.avatar_id = id
-  localAvatarUrl.value = url
-  if (userStore.userInfo) {
-    userStore.userInfo.avatar_id = id
-    userStore.userInfo.avatar_url = url
-  }
-}
-
-function onAvatarRemoved() {
-  userFormState.value.avatar_id = null
-  localAvatarUrl.value = null
-  if (userStore.userInfo) {
-    userStore.userInfo.avatar_id = null
-    userStore.userInfo.avatar_url = null
-  }
-}
-
-watch(editPassVisible, (open) => {
-  if (open) setForm()
-})
-
-function copyCode() {
-  // nextTick(() => {
-  const val = userStore.userInfo?.referral_id
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-const isLegal = computed(() => {
-  const result = {
-    title: '',
-    color: '',
-    icon: ''
-  }
-  switch (userFormState.value.is_legal) {
-    case 0:
-      result.title = 'احراز هویت نشده'
-      result.color = 'reject'
-      result.icon = 'vuesax-linear:close-circle'
-      break
-    case 1:
-      result.title = 'احراز هویت شده'
-      result.color = 'success'
-      result.icon = 'vuesax-linear:verify'
-
-      break
-    case 2:
-      result.title = 'احراز هویت شده'
-      result.color = 'success'
-      result.icon = 'vuesax-linear:verify'
-
-      break
-  }
-  return result
-})
-
-function shareCode() {
-  const val = getReferralShareText({
-    userName: userStore.userInfo?.name,
-    projectName: nameProject,
-    referralId: userStore.userInfo?.referral_id,
-  })
-  navigator.share({
-    title: getReferralShareTitle(nameProject),
-    text: val
-  })
-}
-
-const resetData = () => {
-  formRef.value?.resetFields()
-  userFormState.value = {
-    fname: '',
-    lname: '',
-    mobile: undefined,
-    birth_date: '',
-    city: '',
-    n_code: undefined
-  }
-}
-
-onMounted(() => {
-  setForm()
-})
-
-function ok() {
-  formRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      await updateMe(userFormState.value)
-      await userStore.getMyInfo()
-      localAvatarUrl.value = getUserAvatarUrl(userStore.userInfo)
-      editPassVisible.value = false
-      message.success('اطلاعات شما با موفقیت به روز رسانی شد')
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
-
-function submitPassForm() {
-  formPassRef.value?.validateFields().then(async () => {
-    try {
-      loading.value = true
-      await updatePass(userPassForm.value)
-      await userStore.getMyInfo()
-      editPassVisible.value = false
-      message.success('پسورد شما با موفقیت به روز رسانی شد')
-      editPasswordVisible.value = false
-    } catch (e) {
-      console.log(e)
-    } finally {
-      loading.value = false
-    }
-  })
-}
-
-onMounted(() => {
-  console.log(userStore.userInfo?.is_legal === 2)
-  if (userStore.userInfo?.is_legal === 0) {
-    editPassVisible.value = true
-  }
-})
+const {
+  editPassVisible,
+  editPasswordVisible,
+  isLegal,
+  loading,
+  ok,
+  submitPassForm,
+} = useUserPage()
 </script>
 
 <style scoped>
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
+.user-page-root {
+  min-height: 100%;
+  height: 100%;
 }
+</style>
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
-.midLevel {
-  color: orange;
-}
-
-.week,
+<style lang="less">
 .reject {
   color: red;
 }
@@ -496,36 +97,4 @@ onMounted(() => {
 .success {
   color: green;
 }
-
-.background-image-container {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: 0;
-}
-
-.background-image-container img {
-  width: 100%;
-  height: auto;
-}
-
-.relative {
-  position: relative;
-  z-index: 40;
-}
-
-.relative {
-  overflow-y: auto;
-  max-height: 100vh;
-  //scroll-behavior: smooth;
-}
-
-.fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 50; /* بالاتر از همه */
-}
 </style>
diff --git a/src/views/base/user/mobile/MobileUserView.vue b/src/views/base/user/mobile/MobileUserView.vue
new file mode 100644
index 0000000..6663804
--- /dev/null
+++ b/src/views/base/user/mobile/MobileUserView.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="relative">
+    <div>
+      <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
+    </div>
+    <div class="bg-white w-full py-3 px-3 text-primary font-bold drop-shadow flex">
+      <div class="cursor-pointer" @click="router.back()">
+        <BasicIcon icon="vuesax-linear:arrow-right-1" />
+      </div>
+      <div class="mr-2 mt-2">اطلاعات حساب کاربری</div>
+    </div>
+    <div class="pt-16 pb-8 z-30 relative">
+      <div
+        class="border-gray-200 border-1 rounded-xl p-5 trans flex flex-col items-center mx-5 z-1000 relative bg-white shadow-lg"
+      >
+        <div class="text-primary font-bold w-full text-center flex justify-between">
+          نام و نام خانوادگی:
+          <div class="mr-2">{{ userStore.userInfo?.name }}</div>
+        </div>
+        <div class="text-primary font-bold w-full text-center flex justify-between">
+          شماره تلفن همراه:
+          <div class="mr-2">{{ userStore.userInfo?.mobile }}</div>
+        </div>
+        <div
+          v-if="userStore.userInfo?.referral_id"
+          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
+        >
+          کد معرف:
+          <div class="flex gap-2">
+            <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
+          </div>
+        </div>
+        <div class="w-full flex gap-2 mt-1">
+          <BasicButton
+            icon="vuesax-linear:share"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="shareCode"
+          >
+            {{ shareButtonLabel }}
+          </BasicButton>
+          <BasicButton
+            icon="vuesax-linear:copy"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="copyCode"
+          >
+            رونوشت
+          </BasicButton>
+        </div>
+        <BasicButton
+          class="mt-5 w-full"
+          icon=""
+          iconSize="18"
+          size="large"
+          type="primary"
+          @click="editPassVisible = true"
+        >
+          <div class="flex">
+            <BasicIcon icon="vuesax-linear:eye" class="absolute right-8" />
+            <div>ویرایش اطلاعات کاربری</div>
+          </div>
+        </BasicButton>
+        <div class="h-45vh overflow-y-auto mt-4">
+          <BasicButton
+            v-for="action in menuActions"
+            :key="action.id"
+            class="mt-2 w-full first:mt-2"
+            icon=""
+            iconSize="18"
+            size="large"
+            @click="action.onClick"
+          >
+            <div class="flex">
+              <BasicIcon :icon="action.icon" class="absolute right-8" />
+              <div>{{ action.label }}</div>
+            </div>
+          </BasicButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import img from '@/assets/img/user_ly1.svg'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+import { useUserPageContext } from '../composables/useUserPage'
+
+const {
+  userStore,
+  editPassVisible,
+  shareButtonLabel,
+  menuActions,
+  copyCode,
+  shareCode,
+} = useUserPageContext()
+</script>
+
+<style scoped>
+.relative {
+  position: relative;
+  z-index: 40;
+  overflow-y: auto;
+  max-height: 100vh;
+}
+</style>
diff --git a/src/views/base/wallet/components/WalletAddCardForm.vue b/src/views/base/wallet/components/WalletAddCardForm.vue
new file mode 100644
index 0000000..beda476
--- /dev/null
+++ b/src/views/base/wallet/components/WalletAddCardForm.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="wallet-add-card-form pb-4 mt-2">
+    <a-form :model="cardForm" layout="vertical">
+      <a-form-item
+        :rules="cardNumberValidation()"
+        class="w-full"
+        label="شماره کارت"
+        name="cart_number"
+      >
+        <BasicInput v-model:value="cardForm.cart_number" type="number" />
+      </a-form-item>
+      <a-form-item
+        v-if="walletStore.walletInfo"
+        class="w-full"
+        label="تاریخ تولد"
+        name="birth_date"
+      >
+        <BaseDatePicker v-model:value="cardForm.birth_date" class="w-full" inputReadOnly />
+      </a-form-item>
+      <BasicButton
+        v-if="showActions"
+        :disabled="loading"
+        class="w-full mt-5"
+        type="primary"
+        @click="addCard"
+      >
+        <a-spin v-if="loading" size="small" />
+        <div v-else>ثبت</div>
+      </BasicButton>
+      <BasicButton v-if="showActions" class="w-full mt-2" @click="showAddCard = false">بازگشت</BasicButton>
+    </a-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
+import { cardNumberValidation } from '@/utils/inputRules'
+import { useWalletPageContext } from '../composables/useWalletPage'
+
+withDefaults(
+  defineProps<{
+    /** Inline ثبت/بازگشت — mobile action sheet only; desktop uses modal footer */
+    showActions?: boolean
+  }>(),
+  { showActions: true }
+)
+
+const {
+  cardForm,
+  walletStore,
+  loading,
+  showAddCard,
+  addCard,
+} = useWalletPageContext()
+</script>
+
+<style scoped lang="less">
+.wallet-add-card-form {
+  @media screen and (max-width: 767.98px) {
+    padding-bottom: 5rem;
+  }
+}
+</style>
diff --git a/src/views/base/wallet/composables/useWalletPage.ts b/src/views/base/wallet/composables/useWalletPage.ts
new file mode 100644
index 0000000..bceae52
--- /dev/null
+++ b/src/views/base/wallet/composables/useWalletPage.ts
@@ -0,0 +1,291 @@
+import { computed, inject, onMounted, provide, ref, type InjectionKey, type Ref } from 'vue'
+import OtpInput from 'vue3-otp-input'
+import { formatCashWalletBalanceText } from '@/utils/productDealMethod'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import { loading, loadingMore } from '@/utils'
+import router from '@/router'
+import { useWalletStore } from '@/store/walletStore'
+import type { Transaction } from '@/models/transaction'
+import { createCard, withdraw, confirmCode } from '@/api/wallet'
+import { useInfiniteScroll } from '@vueuse/core'
+import { message } from 'ant-design-vue'
+import type { Card } from '@/models/wallet'
+import { useUserStore } from '@/store/userStore'
+import { useConfigStore } from '@/store/configStore'
+import { isBazretalaProject } from '@/utils/config'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import {
+  buildSupportMessengerUrl,
+  DEFAULT_SUPPORT_MESSENGER_TEXT,
+  supportMessengerSettings,
+} from '@/utils/supportMessenger'
+import {
+  initWalletPageData,
+  loadMoreWalletDeposits,
+  loadMoreWalletWithdrawals,
+  refreshWalletCards,
+  walletCardItems,
+  walletDepositItems,
+  walletWithdrawItems,
+} from './useWalletPageData'
+
+export interface WalletPageContext {
+  isDeposit: Ref<boolean>
+  walletStore: ReturnType<typeof useWalletStore>
+  config: ReturnType<typeof useConfigStore>
+  showAddCard: Ref<boolean>
+  chargeAccountModal: Ref<boolean>
+  showConfirmCode: Ref<boolean>
+  withdrawInfModal: Ref<boolean>
+  infoVisible: Ref<boolean>
+  refOtpInput: Ref<InstanceType<typeof OtpInput> | null>
+  form: Ref<Transaction>
+  cardForm: Ref<Card>
+  disableButton: ReturnType<typeof computed<boolean>>
+  cardItems: typeof walletCardItems
+  depositItems: typeof walletDepositItems
+  withdrawItems: typeof walletWithdrawItems
+  loading: typeof loading
+  loadingMore: typeof loadingMore
+  mobileDepositScrollEl: Ref<HTMLElement | null>
+  desktopDepositScrollEl: Ref<HTMLElement | null>
+  supportMessengerText: ReturnType<typeof computed<string>>
+  supportMessengerLink: ReturnType<typeof computed<string | undefined>>
+  isBazretalaProject: typeof isBazretalaProject
+  usePriceWithoutType: typeof usePriceWithoutType
+  formatCashWalletBalanceText: typeof formatCashWalletBalanceText
+  setIsDeposit: (val: boolean) => void
+  useStyle: () => string
+  formatter: (value: number) => string
+  percentChange: (val: number) => void
+  ok: () => Promise<void>
+  addCard: () => Promise<void>
+  getCards: () => Promise<void>
+  handleOnComplete: (value: string) => Promise<void>
+}
+
+export const WALLET_PAGE_CONTEXT_KEY: InjectionKey<WalletPageContext> = Symbol('walletPageContext')
+
+export function useWalletPage() {
+  const isDeposit = ref(true)
+  const walletStore = useWalletStore()
+  const userStore = useUserStore()
+  const config = useConfigStore()
+  const isDesktop = useDesktopBreakpoint()
+  const showAddCard = ref(false)
+  const chargeAccountModal = ref(false)
+  const showConfirmCode = ref(false)
+  const withdrawInfModal = ref(false)
+  const infoVisible = ref(false)
+  const refOtpInput = ref<InstanceType<typeof OtpInput> | null>(null)
+  const mobileDepositScrollEl = ref<HTMLElement | null>(null)
+  const desktopDepositScrollEl = ref<HTMLElement | null>(null)
+
+  const activeDepositScrollEl = computed(() =>
+    isDesktop.value ? desktopDepositScrollEl.value : mobileDepositScrollEl.value,
+  )
+
+  const supportMessengerText = computed(
+    () => supportMessengerSettings.value.messengerText || DEFAULT_SUPPORT_MESSENGER_TEXT,
+  )
+
+  const supportMessengerLink = computed(() =>
+    buildSupportMessengerUrl(
+      supportMessengerSettings.value.messenger,
+      supportMessengerSettings.value.messengerId,
+    ),
+  )
+
+  const form = ref<Transaction>({
+    value: undefined,
+    percentWallet: 0,
+    card_id: undefined,
+  })
+
+  const cardForm = ref<Card>({
+    birth_date: 0,
+    account_number: '',
+    bank_name: '',
+    cart_number: '',
+    shaba_number: '',
+  })
+
+  const disableButton = computed(() => {
+    if (!loading.value) {
+      if (walletStore?.walletInfo?.cash && !isDeposit.value) {
+        if (walletCardItems.value.length > 0) {
+          return (
+            walletStore?.walletInfo?.cash <= 0
+            || walletStore?.walletInfo?.cash < parseInt(form.value?.value)
+            || isNaN(parseInt(form.value?.value))
+            || parseInt(form.value?.value) < 1000000
+          )
+        }
+        return true
+      }
+      if (isDeposit.value) {
+        return isNaN(parseInt(form.value?.value)) || parseInt(form.value?.value) < 1000000
+      }
+      return false
+    }
+    return true
+  })
+
+  const unitCalculator = computed(() => (walletStore?.walletInfo?.cash ?? 0) / 100)
+
+  function resetData() {
+    form.value.value = undefined
+    form.value.percentWallet = 0
+  }
+
+  async function addCard() {
+    try {
+      loading.value = true
+      await createCard(cardForm.value)
+      await getCards()
+      showAddCard.value = false
+      cardForm.value = {
+        birth_date: 0,
+        account_number: '',
+        bank_name: '',
+        cart_number: '',
+        shaba_number: '',
+      }
+      message.success('کارت وارد شده با موفقیت افزوده شد و پس از تایید نمایش داده خواهد شد.')
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function getCards() {
+    await refreshWalletCards()
+    form.value.card_id = walletCardItems.value.length ? walletCardItems.value[0].id : undefined
+  }
+
+  function setIsDeposit(val: boolean) {
+    isDeposit.value = val
+    form.value.value = undefined
+    form.value.percentWallet = 0
+  }
+
+  function useStyle() {
+    if (isDeposit.value) return 'right: 2%;'
+    return ' right: 98%; transform: translate(100%, 0);'
+  }
+
+  const formatter = (value: number) => `${value}%`
+
+  function percentChange(val: number) {
+    if (val !== 0) form.value.value = parseInt((unitCalculator.value * val).toFixed())
+    else form.value.value = undefined
+  }
+
+  async function ok() {
+    try {
+      if (form.value.value !== undefined) {
+        loading.value = true
+        if (!isDeposit.value) {
+          await confirmCode({ value: form.value.value })
+          showConfirmCode.value = true
+        }
+        if (isDeposit.value) {
+          chargeAccountModal.value = true
+        }
+      } else {
+        message.error('ابتدا مبلغ را وارد کنید')
+      }
+    } catch (e) {
+      console.log(e)
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function handleOnComplete(value: string) {
+    try {
+      infoVisible.value = true
+      showConfirmCode.value = false
+      await withdraw({ ...form.value, otp: value })
+      await walletStore.getMyWallet()
+      await message.success('عملیات با موفقیت انجام شد')
+      withdrawInfModal.value = true
+      resetData()
+    } catch (e) {
+      console.log(e)
+    } finally {
+      infoVisible.value = false
+      refOtpInput.value?.clearInput()
+    }
+  }
+
+  onMounted(async () => {
+    if (router.currentRoute.value.query.state === 'deposit') {
+      isDeposit.value = true
+    }
+    cardForm.value.birth_date = userStore.userInfo?.birth_date
+    await initWalletPageData()
+    form.value.card_id = walletCardItems.value.length ? walletCardItems.value[0].id : undefined
+  })
+
+  if (!userStore.isSingle) {
+    useInfiniteScroll(
+      activeDepositScrollEl,
+      async () => {
+        if (isDeposit.value) {
+          await loadMoreWalletDeposits()
+        } else {
+          await loadMoreWalletWithdrawals()
+        }
+      },
+      { distance: 12 },
+    )
+  }
+
+  const context: WalletPageContext = {
+    isDeposit,
+    walletStore,
+    config,
+    showAddCard,
+    chargeAccountModal,
+    showConfirmCode,
+    withdrawInfModal,
+    infoVisible,
+    refOtpInput,
+    form,
+    cardForm,
+    disableButton,
+    cardItems: walletCardItems,
+    depositItems: walletDepositItems,
+    withdrawItems: walletWithdrawItems,
+    loading,
+    loadingMore,
+    mobileDepositScrollEl,
+    desktopDepositScrollEl,
+    supportMessengerText,
+    supportMessengerLink,
+    isBazretalaProject,
+    usePriceWithoutType,
+    formatCashWalletBalanceText,
+    setIsDeposit,
+    useStyle,
+    formatter,
+    percentChange,
+    ok,
+    addCard,
+    getCards,
+    handleOnComplete,
+  }
+
+  provide(WALLET_PAGE_CONTEXT_KEY, context)
+  return context
+}
+
+export function useWalletPageContext() {
+  const context = inject(WALLET_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useWalletPageContext must be used within a page that calls useWalletPage()')
+  }
+  return context
+}
diff --git a/src/views/base/wallet/composables/useWalletPageData.ts b/src/views/base/wallet/composables/useWalletPageData.ts
new file mode 100644
index 0000000..a664c20
--- /dev/null
+++ b/src/views/base/wallet/composables/useWalletPageData.ts
@@ -0,0 +1,187 @@
+import { ref } from 'vue'
+import { loading, loadingMore } from '@/utils'
+import type { Transaction } from '@/models/transaction'
+import { getActivatedCards } from '@/api/wallet'
+import { getTransactionTable, getTransactionTable2 } from '@/api/transaction'
+import type { TableEngineInput, TableOutput } from '@/models/table'
+import type { Card } from '@/models/wallet'
+import { useWalletStore } from '@/store/walletStore'
+import { runOnceAsync, resetOnceAsyncByPrefix } from '@/composables/useOnceAsync'
+import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
+
+/**
+ * Shared wallet page datasets — mobile and desktop views read this module state only.
+ * Resize / breakpoint changes must not trigger new requests.
+ */
+let initPromise: Promise<void> | null = null
+const initialized = ref(false)
+
+export const walletCardItems = ref<Card[]>([])
+export const walletDepositItems = ref<Transaction[]>([])
+export const walletWithdrawItems = ref<Transaction[]>([])
+export const walletDepositTableOutput = ref<TableOutput<Transaction> | null>(null)
+export const walletWithdrawTableOutput = ref<TableOutput<Transaction> | null>(null)
+
+export const walletDepositPagination = ref<TableEngineInput>({
+  filters: [],
+  limit: 6,
+  page: 0,
+})
+
+export const walletWithdrawPagination = ref<TableEngineInput>({
+  filters: [
+    {
+      field: 'type',
+      cr: 'and',
+      type: 'number',
+      op: 'eq',
+      value: 4,
+    },
+  ],
+  limit: 6,
+  page: 0,
+})
+
+export function isWalletPageDataInitialized() {
+  return initialized.value
+}
+
+async function fetchDepositPage(append: boolean) {
+  const isFirstPage = walletDepositPagination.value.page === 0 && !append
+
+  if (isFirstPage) {
+    loading.value = true
+  } else {
+    loadingMore.value = true
+  }
+
+  try {
+    walletDepositTableOutput.value = await getTransactionTable2(walletDepositPagination.value)
+    const rows = walletDepositTableOutput.value.rows
+
+    if (isFirstPage) {
+      walletDepositItems.value = [...rows]
+    } else {
+      walletDepositItems.value.push(...rows)
+    }
+  } catch (error) {
+    console.error('Wallet deposit table error:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+async function fetchWithdrawPage(append: boolean) {
+  const isFirstPage = walletWithdrawPagination.value.page === 0 && !append
+
+  if (isFirstPage) {
+    loading.value = true
+  } else {
+    loadingMore.value = true
+  }
+
+  try {
+    walletWithdrawTableOutput.value = await getTransactionTable(walletWithdrawPagination.value)
+    const rows = walletWithdrawTableOutput.value.rows
+
+    if (isFirstPage) {
+      walletWithdrawItems.value = [...rows]
+    } else {
+      walletWithdrawItems.value.push(...rows)
+    }
+  } catch (error) {
+    console.error('Wallet withdraw table error:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+export async function refreshWalletCards() {
+  try {
+    walletCardItems.value = (await getActivatedCards()) ?? []
+  } catch (error) {
+    console.error('Wallet cards refresh error:', error)
+  }
+}
+
+export async function loadMoreWalletDeposits() {
+  if (
+    !walletDepositTableOutput.value
+    || (walletDepositPagination.value.page + 1) * walletDepositPagination.value.limit
+      >= walletDepositTableOutput.value.query.total
+  ) {
+    return
+  }
+
+  walletDepositPagination.value.page++
+  await fetchDepositPage(true)
+}
+
+export async function loadMoreWalletWithdrawals() {
+  if (
+    !walletWithdrawTableOutput.value
+    || (walletWithdrawPagination.value.page + 1) * walletWithdrawPagination.value.limit
+      >= walletWithdrawTableOutput.value.query.total
+  ) {
+    return
+  }
+
+  walletWithdrawPagination.value.page++
+  await fetchWithdrawPage(true)
+}
+
+export async function initWalletPageData(force = false) {
+  if (!force && initialized.value) {
+    return
+  }
+
+  if (!force && initPromise) {
+    return initPromise
+  }
+
+  initPromise = (async () => {
+    try {
+      if (force) {
+        resetWalletPageData()
+      }
+
+      loading.value = true
+      const walletStore = useWalletStore()
+
+      walletDepositPagination.value.page = 0
+      walletWithdrawPagination.value.page = 0
+
+      await Promise.all([
+        runOnceAsync('wallet:getMyWallet', () => walletStore.getMyWallet(), force),
+        runOnceAsync('wallet:cards', () => refreshWalletCards(), force),
+        runOnceAsync('wallet:deposit:init', () => fetchDepositPage(false), force),
+        runOnceAsync('wallet:withdraw:init', () => fetchWithdrawPage(false), force),
+      ])
+
+      loadSupportMessengerFromSettings()
+      initialized.value = true
+    } catch (error) {
+      console.error('Wallet page initialization error:', error)
+    } finally {
+      loading.value = false
+      initPromise = null
+    }
+  })()
+
+  return initPromise
+}
+
+export function resetWalletPageData() {
+  initialized.value = false
+  initPromise = null
+  resetOnceAsyncByPrefix('wallet:')
+  walletCardItems.value = []
+  walletDepositItems.value = []
+  walletWithdrawItems.value = []
+  walletDepositTableOutput.value = null
+  walletWithdrawTableOutput.value = null
+  walletDepositPagination.value.page = 0
+  walletWithdrawPagination.value.page = 0
+}
diff --git a/src/views/base/wallet/desktop/DesktopWalletView.vue b/src/views/base/wallet/desktop/DesktopWalletView.vue
new file mode 100644
index 0000000..66fdf87
--- /dev/null
+++ b/src/views/base/wallet/desktop/DesktopWalletView.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="dwallet">
+    <div class="dwallet__container">
+      <header class="dwallet-topbar">
+        <p class="dwallet-topbar__eyebrow">مالی</p>
+        <h1 class="dwallet-topbar__title">کیف پول</h1>
+        <p class="dwallet-topbar__subtitle">واریز و برداشت وجه از کیف پول خود</p>
+      </header>
+
+      <div class="dwallet-toolbar">
+        <div class="dwallet-toggle">
+          <button
+            type="button"
+            class="dwallet-toggle__btn"
+            :class="{ 'dwallet-toggle__btn--active': isDeposit }"
+            @click="setIsDeposit(true)"
+          >
+            واریز
+          </button>
+          <button
+            type="button"
+            class="dwallet-toggle__btn"
+            :class="{ 'dwallet-toggle__btn--active': !isDeposit }"
+            @click="setIsDeposit(false)"
+          >
+            برداشت
+          </button>
+        </div>
+
+        <div class="dwallet-balance-pill">
+          <span class="dwallet-balance-pill__label">موجودی کیف پول</span>
+          <span class="dwallet-balance-pill__value number-ltr">
+            {{ usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0) }}
+            <span>ریال</span>
+          </span>
+        </div>
+      </div>
+
+      <div class="dwallet-grid">
+        <section class="dwallet-surface dwallet-form">
+          <h2 class="dwallet-form__title">{{ isDeposit ? 'واریز به کیف پول' : 'برداشت از کیف پول' }}</h2>
+
+          <a-form :model="form" name="wallet-desktop" @finish="ok()">
+            <a-form-item :rules="[required()]">
+              <BasicInput
+                v-model:value="form.value"
+                addon-before="ریال"
+                :addon-bg-color="useConfigStore().config.color"
+                addon-text-color="white"
+                place-holder="مبلغ"
+                size="large"
+                type="price"
+              />
+            </a-form-item>
+
+            <Transition mode="out-in" name="fade">
+              <div v-if="!isDeposit" key="withdraw" class="dwallet-form__extras">
+                <p class="dwallet-form__hint dwallet-form__hint--warn">
+                  حداقل مبلغ برداشتی 100 هزار تومان می باشد.
+                </p>
+                <p class="dwallet-form__balance-text">
+                  {{ formatCashWalletBalanceText(usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0)) }}
+                </p>
+                <a-form-item v-if="walletStore?.walletInfo" class="!mt-3">
+                  <a-slider
+                    v-model:value="form.percentWallet"
+                    :disabled="walletStore?.walletInfo?.cash <= 0"
+                    :max="100"
+                    :min="0"
+                    :step="10"
+                    :tip-formatter="formatter"
+                    @change="percentChange"
+                  />
+                </a-form-item>
+              </div>
+              <div v-else key="deposit" class="dwallet-form__extras">
+                <p v-if="!isBazretalaProject()" class="dwallet-form__hint dwallet-form__hint--warn">
+                  حداقل مبلغ واریزی 100 هزار تومان می باشد.
+                </p>
+                <div class="dwallet-quick-amounts">
+                  <button type="button" class="dwallet-quick-amounts__btn" @click="form.value = 10000000">
+                    {{ usePriceWithoutType(10000000) }}
+                  </button>
+                  <button type="button" class="dwallet-quick-amounts__btn" @click="form.value = 50000000">
+                    {{ usePriceWithoutType(50000000) }}
+                  </button>
+                  <button type="button" class="dwallet-quick-amounts__btn" @click="form.value = 100000000">
+                    {{ usePriceWithoutType(100000000) }}
+                  </button>
+                </div>
+              </div>
+            </Transition>
+
+            <BasicButton
+              :disabled="disableButton"
+              class="dwallet-form__submit"
+              html-type="submit"
+              type="primary"
+            >
+              <a-spin v-if="loading" size="small" />
+              <span v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</span>
+            </BasicButton>
+          </a-form>
+        </section>
+
+        <section class="dwallet-surface dwallet-side">
+          <template v-if="isDeposit">
+            <div class="dwallet-side__header">
+              <h3 class="dwallet-side__title">تاریخچه واریز</h3>
+            </div>
+            <div
+              :ref="(node) => { desktopDepositScrollEl = (node as HTMLElement | null) }"
+              class="dwallet-side__scroll"
+            >
+              <list-anim v-if="!loading" :numberItemsAnim="4">
+                <Item v-for="item in depositItems" :key="item.id" :item="item" />
+                <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-4" />
+              </list-anim>
+              <div v-else class="dwallet-side__skeletons">
+                <TransactionSkeleton v-for="i in 6" :key="i" class="mt-1" />
+              </div>
+              <p v-if="!loading && !depositItems.length" class="dwallet-side__empty">
+                تراکنش واریزی ثبت نشده است.
+              </p>
+            </div>
+          </template>
+
+          <template v-else>
+            <div class="dwallet-side__header">
+              <h3 class="dwallet-side__title">کارت‌های بانکی</h3>
+              <button type="button" class="dwallet-side__add-btn" @click="showAddCard = true">
+                <BasicIcon icon="vuesax-linear:add" size="16" />
+                <span>افزودن کارت</span>
+              </button>
+            </div>
+
+            <div v-if="!loading && cardItems.length === 0" class="dwallet-side__empty dwallet-side__empty--cards">
+              <BasicIcon icon="vuesax-linear:card" size="32" />
+              <p>هیچ کارتی یافت نشد</p>
+              <button type="button" class="dwallet-side__add-btn dwallet-side__add-btn--primary" @click="showAddCard = true">
+                افزودن کارت جدید
+              </button>
+            </div>
+
+            <div v-else-if="cardItems.length > 0" class="dwallet-cards">
+              <CardSlider
+                v-model:id="form.card_id"
+                :items="cardItems"
+                class="dwallet-cards__slider"
+                @cardDeleted="getCards"
+              />
+            </div>
+          </template>
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import { useConfigStore } from '@/store/configStore'
+import { required } from '@/utils/inputRules'
+import CardSlider from '../components/UISlider/index.vue'
+import Item from '../components/Item.vue'
+import { useWalletPageContext } from '../composables/useWalletPage'
+
+const {
+  isDeposit,
+  walletStore,
+  showAddCard,
+  form,
+  disableButton,
+  cardItems,
+  depositItems,
+  loading,
+  loadingMore,
+  desktopDepositScrollEl,
+  isBazretalaProject,
+  usePriceWithoutType,
+  formatCashWalletBalanceText,
+  setIsDeposit,
+  formatter,
+  percentChange,
+  ok,
+  getCards,
+} = useWalletPageContext()
+</script>
diff --git a/src/views/base/wallet/desktop/styles/desktop-wallet.less b/src/views/base/wallet/desktop/styles/desktop-wallet.less
new file mode 100644
index 0000000..a19ae73
--- /dev/null
+++ b/src/views/base/wallet/desktop/styles/desktop-wallet.less
@@ -0,0 +1,296 @@
+/* Premium desktop wallet page */
+
+.dwallet {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dwallet__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dwallet-topbar {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    margin: 0 0 6px;
+    line-height: 1.2;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: #6b7280;
+    margin: 0;
+  }
+}
+
+.dwallet-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.dwallet-toggle {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  background: #f3f4f6;
+  border-radius: 12px;
+
+  &__btn {
+    min-width: 96px;
+    padding: 10px 18px;
+    border: none;
+    border-radius: 10px;
+    background: transparent;
+    font-size: 14px;
+    font-weight: 600;
+    color: #6b7280;
+    font-family: inherit;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      color: #374151;
+    }
+
+    &--active {
+      background: #fff;
+      color: @App-primary-color;
+      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+    }
+  }
+}
+
+.dwallet-balance-pill {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  padding: 10px 16px;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+
+  &__label {
+    font-size: 12px;
+    color: #9ca3af;
+    font-weight: 500;
+  }
+
+  &__value {
+    font-size: 16px;
+    font-weight: 700;
+    color: #111827;
+    gap: 4px;
+
+    span {
+      font-size: 12px;
+      font-weight: 500;
+      color: #6b7280;
+    }
+  }
+}
+
+.dwallet-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.dwallet-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+.dwallet-form {
+  padding: 24px;
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0 0 20px;
+  }
+
+  &__extras {
+    margin-bottom: 8px;
+  }
+
+  &__hint {
+    font-size: 12px;
+    margin: 0 0 10px;
+    line-height: 1.5;
+
+    &--warn {
+      color: #dc2626;
+      font-weight: 600;
+    }
+  }
+
+  &__balance-text {
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+    margin: 0 0 8px;
+  }
+
+  &__submit {
+    width: 100%;
+    margin-top: 16px;
+    min-height: 44px;
+  }
+}
+
+.dwallet-quick-amounts {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+
+  &__btn {
+    padding: 10px 8px;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    background: #f9fafb;
+    font-size: 12px;
+    font-weight: 700;
+    color: #374151;
+    font-family: inherit;
+    cursor: pointer;
+    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      border-color: @App-primary-color;
+      color: @App-primary-color;
+      background: #fff;
+    }
+  }
+}
+
+.dwallet-side {
+  display: flex;
+  flex-direction: column;
+  min-height: 420px;
+  overflow: hidden;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 20px 24px 0;
+  }
+
+  &__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #111827;
+    margin: 0;
+  }
+
+  &__scroll {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 24px 24px;
+    max-height: 520px;
+  }
+
+  &__skeletons {
+    padding: 16px 24px 24px;
+  }
+
+  &__empty {
+    text-align: center;
+    color: #9ca3af;
+    font-size: 14px;
+    padding: 32px 24px;
+
+    &--cards {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      flex: 1;
+      min-height: 280px;
+      color: #6b7280;
+    }
+  }
+
+  &__add-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    border: 1px solid #e5e7eb;
+    border-radius: 10px;
+    background: #fff;
+    color: #374151;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    padding: 8px 12px;
+    cursor: pointer;
+    transition: border-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      border-color: @App-primary-color;
+      color: @App-primary-color;
+    }
+
+    &--primary {
+      background: @App-primary-color;
+      border-color: @App-primary-color;
+      color: #fff;
+      padding: 10px 16px;
+
+      &:hover {
+        opacity: 0.92;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.dwallet-cards {
+  padding: 8px 24px 24px;
+
+  &__slider {
+    height: 240px !important;
+
+    :deep(.h-\[28vh\]) {
+      height: 240px !important;
+    }
+  }
+}
+
+@media (max-width: 1023.98px) {
+  .dwallet-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dwallet-side {
+    min-height: 320px;
+  }
+}
diff --git a/src/views/base/wallet/index.vue b/src/views/base/wallet/index.vue
index ba91a48..a65e1e0 100644
--- a/src/views/base/wallet/index.vue
+++ b/src/views/base/wallet/index.vue
@@ -1,217 +1,42 @@
 <template>
-  <div>
-    <div class="absolute inset-0 bg-cover bg-center opacity-60" :style="{ backgroundImage: `url(${img})` }"></div>
-    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow z-[1999] wrap-fix">کیف پول</div>
-    <div
-      class="bg-white wrap-fix py-3 top-11 px-3 text-primary font-bold flex justify-evenly z-[1999]"
-    >
-      <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded">
-        <div
-          :class="isDeposit ? 'text-primary' : 'text-gray-400'"
-          class="w-full text-center z-2"
-          @click="setIsDeposit(true)"
-        >
-          واریز
-        </div>
-        <div
-          :class="!isDeposit ? 'text-primary' : 'text-gray-400'"
-          class="w-full text-center z-2"
-          @click="setIsDeposit(false)"
-        >
-          برداشت
-        </div>
-        <!--        <div ref="bganim" class="absolute bg-white h-8 w-1/2 rounded-lg " :style="`transform: translateX(${isDeposit? '0':'-100%'}); left: ${isDeposit? '0':'100%'}`"></div>-->
-        <div
-          ref="bganim"
-          :style="useStyle()"
-          class="absolute bg-white h-8 w-1/2 rounded-lg animate right"
-        ></div>
-      </div>
-    </div>
-    <div class="px-5 pt-26" :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'">
-      <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
-        <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
-          <bg_main />
-          <div class="z-100 relative">
-            <a-form-item :rules="[required()]">
-              <BasicInput
-                v-model:value="form.value"
-                addon-before="ریال"
-                :addon-bg-color="useConfigStore().config.color"
-                addon-text-color="white"
-                place-holder="مبلغ"
-                size="large"
-                type="price"
-              />
-            </a-form-item>
-            <Transition mode="out-in" name="fade">
-              <div v-if="!isDeposit">
-                <div class="text-red text-xs font-bold mb-2">حداقل مبلغ برداشتی 100 هزار تومان می باشد.</div>
-                <div class="font-bold text-xs">
-                  {{ formatCashWalletBalanceText(usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0)) }}
-                </div>
-                <a-form-item v-if="walletStore?.walletInfo" class="!mt-3">
-                  <a-slider
-                    v-model:value="form.percentWallet"
-                    :disabled="walletStore?.walletInfo?.cash <= 0"
-                    :max="100"
-                    :min="0"
-                    :step="10"
-                    :tip-formatter="formatter"
-                    @change="percentChange"
-                  />
-                </a-form-item>
-              </div>
-              <div v-else class=" mt-3">
-                <div v-if="!isBazretalaProject()" class="text-red text-xs font-bold mb-2">حداقل مبلغ واریزی 100 هزار تومان می باشد.</div>
-                <div class="flex gap-2">
-                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 10000000">
-                    {{ usePriceWithoutType(10000000) }}
-                  </BasicButton>
-                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 50000000">
-                    {{ usePriceWithoutType(50000000) }}
-                  </BasicButton>
-                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 100000000">
-                    {{ usePriceWithoutType(100000000) }}
-                  </BasicButton>
-                </div>
+  <div class="wallet-page-root">
+    <ResponsiveViewPair>
+      <template #mobile>
+        <MobileWalletView />
+      </template>
+      <template #desktop>
+        <DesktopWalletView />
+      </template>
+    </ResponsiveViewPair>
 
-              </div>
-            </Transition>
-          </div>
-        </div>
-        <a-form-item>
-          <BasicButton
-            :disabled="disableButton"
-            class="w-full py-2 mt-5"
-            html-type="submit"
-            type="primary"
-          >
-            <div>
-              <a-spin v-if="loading" size="small" />
-              <div v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
-            </div>
-          </BasicButton>
-        </a-form-item>
-      </a-form>
-      <div
-        v-if="isDeposit"
-        ref="el"
-        :class="loading ? 'h-screen' : ''"
-        class="px-3 overflow-y-scroll w-full h-[49vh] pb-16"
-        style="max-height: calc(100vh - 50px)"
-      >
-        <list-anim v-if="!loading" :numberItemsAnim="4">
-          <Item
-            v-for="item in isDeposit ? depositItems : withdrawItems"
-            :key="item.id"
-            :item="item"
-          />
-          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
-        </list-anim>
-        <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
-      </div>
-      <!--      <Slider/>-->
-      <Transition mode="out-in" name="fade">
-        <template v-if="!isDeposit">
-          <div
-            v-if="!loading && cardItems.length === 0"
-            class="h-30 flex items-center justify-center"
-          >
-            هیچ کارتی یافت نشد
-          </div>
-        </template>
-      </Transition>
-    </div>
-
-    <Teleport to="body">
-      <CardSlider
-        v-if="!isDeposit && cardItems.length > 0 && !showAddCard"
-        v-model:id="form.card_id"
-        :items="cardItems"
-        class="card-slider-wrap wallet-card-slider"
-        @cardDeleted="getCards"
-      />
-    </Teleport>
-
-    <Teleport to="body">
-      <div
-        v-if="!isDeposit && !showAddCard"
-        class="add-card app-dock-add-bar"
-        @click="showAddCard = true"
-      >
-        <div>افزودن کارت جدید</div>
-        <BasicIcon icon="vuesax-linear:add" />
-      </div>
-    </Teleport>
-
-    <BasicActionSheet v-model:show="showAddCard" class="!max-h-[95vh]">
-          <div class="font-bold text-lg">افزودن کارت</div>
-          <div class="mt-4 text-red-600 font-bold">توجه : حتما شماره کارت صاحب حساب نرم افزار وارد شود.</div>
-          <div class="pb-20 mt-5">
-            <a-form :model="cardForm">
-<!--              <a-form-item
-                :rules="required()"
-                class="w-full gap-2 !flex-col"
-                label="نام بانک"
-                name="bank_name"
-              >
-                <BasicInput v-model:value="cardForm.bank_name" />
-              </a-form-item>-->
-              <a-form-item
-                :rules="cardNumberValidation()"
-                class="w-full gap-2 !flex-col"
-                label="شماره کارت"
-                name="cart_number"
-              >
-                <BasicInput v-model:value="cardForm.cart_number" type="number" />
-              </a-form-item>
-                            <a-form-item
-                                v-if="walletStore.walletInfo"
-                                class="w-full gap-2 !flex-col"
-                                label="تاریخ تولد"
-                                name="cart_number"
-                            >
-                              <BaseDatePicker v-model:value="cardForm.birth_date" class="w-full" inputReadOnly/>
-                            </a-form-item>
-              <!--                            <a-form-item
-                                            :rules="required()"
-                                            class="w-full gap-2 !flex-col"
-                                            label="شماره حساب"
-                                            name="account_number"
-                                          >
-                                            <BasicInput v-model:value="cardForm.account_number" type="number" />
-                                          </a-form-item>-->
-              <!--              <a-form-item
-                                :rules="required()"
-                                class="w-full gap-2 !flex-col"
-                                label="شماره شبا"
-                                name="shaba_number"
-                            >
-                              <BasicInput v-model:value="cardForm.shaba_number"/>
-                            </a-form-item>-->
-              <BasicButton
-                :disabled="loading"
-                class="w-full mt-5 md:mt-10"
-                type="primary"
-                @click="addCard"
-              >
-                <a-spin v-if="loading" size="small" />
-                <div v-else>ثبت</div>
-              </BasicButton>
-              <BasicButton class="w-full mt-2 mb-8" @click="showAddCard = false">بازگشت</BasicButton>
-            </a-form>
-          </div>
+    <BasicActionSheet v-if="!isDesktop" v-model:show="showAddCard" class="!max-h-[95vh]">
+      <div class="font-bold text-lg">افزودن کارت</div>
+      <div class="mt-4 text-red-600 font-bold">توجه : حتما شماره کارت صاحب حساب نرم افزار وارد شود.</div>
+      <WalletAddCardForm />
     </BasicActionSheet>
+
+    <BasicModal
+      v-else
+      v-model:visible="showAddCard"
+      title="افزودن کارت"
+      width="480px"
+      destroy-on-close
+      :loading="loading"
+      @ok="addCard"
+    >
+      <div class="text-red-600 font-bold mb-4">توجه : حتما شماره کارت صاحب حساب نرم افزار وارد شود.</div>
+      <WalletAddCardForm :show-actions="false" />
+    </BasicModal>
+
     <DialogVant v-model:show="showConfirmCode" :closeOnClickOverlay="true" :timeOut="-1">
-      <template v-slot:title>
+      <template #title>
         <div>
           <div class="flex justify-end">
             <BasicIcon
-              @click="showConfirmCode = false"
               icon="vuesax-linear:close-circle"
               size="30"
               class="text-red"
+              @click="showConfirmCode = false"
             />
           </div>
           <div class="p-5 text-sm">لطفا کد ارسالی را وارد کنید.</div>
@@ -232,85 +57,30 @@
           </div>
         </div>
       </template>
-      <template v-slot:button>
+      <template #button>
         <div></div>
         <div class="flex justify-end">
-          <BasicButton @click="showConfirmCode = false" class="py-2" type="primary">
+          <BasicButton class="py-2" type="primary" @click="showConfirmCode = false">
             بستن
           </BasicButton>
         </div>
       </template>
     </DialogVant>
+
     <SkeletonLoading v-model:show="infoVisible" />
 
-    <!--
-    <transaction mode="out-in" name="fade">
-      <div v-if="isDeposit"
-           class="bg-white fixed right-0 left-0 bottom-0 top-20 z-100 op-90 flex justify-center items-center">
-        <div class="flex flex-col justify-center mt-[-20vh] items-center px-5">
-          <DotLottieVue class="w-80vw " autoplay loop
-                        src="https://lottie.host/203d9dc9-a102-43a6-864a-2d3eef2daf4d/xNBrLOheY7.json" />
-          <div class="flex justify-center items-center text-justify  text-primary font-bold">
-            با توجه به اختلال پیش آمده در سامانه پیپینگ
-            برای شارژ کیف پول خود از طریق لینک زیر اقدام نمایید:
-          </div>
-          <a class="mt-2 w-full " href="https://www.payping.ir/d/Hzy0">
-            <BasicButton class="w-full">https://www.payping.ir/d/Hzy0</BasicButton>
-          </a>
-          <div class="w-full">
-            <div class="text-justify mt-2 text-primary font-bold">
-              و یا مبلغ مورد نظر خود را به شماره حساب:
-            </div>
-          </div>
-          <BasicButton icon="vuesax-linear:copy" class="flex-1 w-full mt-1" icon-size="18" @click.stop="copyCode('838-40-89997745-1')">
-            838-40-89997745-1
-          </BasicButton>
-          <div class="w-full">
-            <div class="text-justify mt-2 text-primary font-bold">
-              با شماره شبا:
-            </div>
-            <BasicButton icon="vuesax-linear:copy" class="flex-1 w-full mt-1" icon-size="18" @click.stop="copyCode('IR550560083804089997745001')">
-              IR550560083804089997745001
-            </BasicButton>
-          </div>
-          <div class="w-full">
-            <div class="text-justify mt-2 text-primary font-bold flex">
-              به نام
-              <div class="mx-1 font-extrabold text-blue-600">پديده طلاي شقايق</div>
-              بانک سامان واریز نمایید.
-            </div>
-            <div class="text-justify mt-2 text-primary font-bold">
-              توجه داشته باشید بعد از پرداخت موفق، رسید خود را به شماره 09190909884 در واتس اپ ارسال نمایید.
-            </div>
-          </div>
-          <a class="mt-1 w-full " href="https://wa.me/09190909884">
-            <BasicButton class="w-full !text-green-600" icon="vuesax-linear:whatsapp">شماره واتساپ</BasicButton>
-          </a>
-        </div>
-      </div>
-
-    </transaction>
--->
-    <BasicModal
-      v-model:visible="chargeAccountModal"
-      custom-footer
-      :closable="false"
-    >
+    <BasicModal v-model:visible="chargeAccountModal" custom-footer :closable="false">
       <div v-if="config.config.name === 'garoosi'" class="text-center">
-        <div class=" font-bold text-red-600">مشتریان گرامی</div>
+        <div class="font-bold text-red-600">مشتریان گرامی</div>
         <div class="mt-2">
           <span>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</span>
         </div>
-
         <div class="mt-1 text-red-600">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
         <div class="mt-4">(سیده زهرا موسوی)</div>
         <div class="mt-1">شماره کارت:6037701900311389</div>
-        <!--        <div>شماره حساب: 0233273609006</div>-->
         <div>شماره شبا: IR 080160000000001143804581</div>
         <BasicButton class="mt-4">
-          <a class="w-full" href="https://ble.ir/garoosigallery">
-            پیام به پشتیبانی
-          </a>
+          <a class="w-full" href="https://ble.ir/garoosigallery">پیام به پشتیبانی</a>
         </BasicButton>
       </div>
       <div v-else-if="isBazretalaProject()" class="text-center">
@@ -325,11 +95,10 @@
         <div>شماره شبا: IR 110170000000372468150002</div>
       </div>
       <div v-else class="text-center">
-        <div class=" font-bold text-red-600">مشتریان گرامی</div>
+        <div class="font-bold text-red-600">مشتریان گرامی</div>
         <div class="mt-2">
           <span>{{ supportMessengerText }}</span>
         </div>
-
         <BasicButton v-if="supportMessengerLink">
           <a
             class="w-full"
@@ -341,25 +110,20 @@
           </a>
         </BasicButton>
       </div>
-
       <template #footer>
         <a-button type="primary" class="w-full" @click="chargeAccountModal = false">
           متوجه شدم
         </a-button>
       </template>
     </BasicModal>
-    <BasicModal
-      v-model:visible="withdrawInfModal"
-      custom-footer
-      :closable="false"
-    >
+
+    <BasicModal v-model:visible="withdrawInfModal" custom-footer :closable="false">
       <div class="text-center">
-        <div class=" font-bold text-red-600">مشتری گرامی</div>
+        <div class="font-bold text-red-600">مشتری گرامی</div>
         <div class="mt-2">
           <div>واریز مبلغ مورد نظر، نهایتاً ظرف مدت ۲۴ ساعت آینده انجام می‌پذیرد.</div>
         </div>
       </div>
-
       <template #footer>
         <a-button type="primary" class="w-full" @click="withdrawInfModal = false">
           متوجه شدم
@@ -370,396 +134,42 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
-import { formatCashWalletBalanceText } from '@/utils/productDealMethod'
-import { usePriceWithoutType } from '@/utils/usePrice'
-import { loading, loadingMore } from '@/utils'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import router from '@/router'
-import { useWalletStore } from '@/store/walletStore'
-import Bg_main from '@/components/bg_main.vue'
-import type { Transaction } from '@/models/transaction'
-import { createCard, deposit, getActivatedCards, withdraw, confirmCode } from '@/api/wallet'
-import { useInfiniteScroll } from '@vueuse/core'
-import { message } from 'ant-design-vue'
-import ListAnim from '@/components/ListAnim.vue'
-import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
-import Item from './components/Item.vue'
-import type { TableEngineInput, TableOutput } from '@/models/table'
-import { getTransactionTable, getTransactionTable2 } from '@/api/transaction'
-import BasicInput from '@/components/BasicPacks/BasicInput.vue'
-import CardSlider from './components/UISlider/index.vue'
-import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import type { Card } from '@/models/wallet'
-import { cardNumberValidation, required } from '@/utils/inputRules'
-import { useUserStore } from '@/store/userStore'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
-import OtpInput from 'vue3-otp-input'
-import DialogVant from '@/components/DialogVant.vue'
-import SkeletonLoading from './components/SkeletonLoading.vue'
-import BaseDatePicker from '@/components/BasicPacks/BaseDatePicker'
-import img from '@/assets/img/user_ly1.svg'
 import BasicModal from '@/components/BasicPacks/BasicModal.vue'
-import { useConfigStore } from '@/store/configStore'
-import { isBazretalaProject } from '@/utils/config'
-import {
-  buildSupportMessengerUrl,
-  DEFAULT_SUPPORT_MESSENGER_TEXT,
-  loadSupportMessengerFromSettings,
-  supportMessengerSettings,
-} from '@/utils/supportMessenger'
+import DialogVant from '@/components/DialogVant.vue'
+import OtpInput from 'vue3-otp-input'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import ResponsiveViewPair from '@/layouts/components/ResponsiveViewPair.vue'
+import { useWalletPage } from './composables/useWalletPage'
+import DesktopWalletView from './desktop/DesktopWalletView.vue'
+import MobileWalletView from './mobile/MobileWalletView.vue'
+import SkeletonLoading from './components/SkeletonLoading.vue'
+import WalletAddCardForm from './components/WalletAddCardForm.vue'
 
-const isDeposit = ref<boolean>(true)
-const walletStore = useWalletStore()
-const userStore = useUserStore()
-const showAddCard = ref<boolean>(false)
-const chargeAccountModal = ref<boolean>(false)
-const showConfirmCode = ref<boolean>(false)
-const refOtpInput = ref<InstanceType<typeof VOtpInput> | null>(null)
-const withdrawInfModal = ref<boolean>(false)
+const isDesktop = useDesktopBreakpoint()
 
-const config = useConfigStore()
-
-const supportMessengerText = computed(() =>
-  supportMessengerSettings.value.messengerText || DEFAULT_SUPPORT_MESSENGER_TEXT
-)
-
-const supportMessengerLink = computed(() =>
-  buildSupportMessengerUrl(
-    supportMessengerSettings.value.messenger,
-    supportMessengerSettings.value.messengerId
-  )
-)
-
-onMounted(() => {
-  if (router.currentRoute.value.query.state === 'deposit') {
-    isDeposit.value = true
-  }
-  walletStore.getMyWallet()
-  isDeposit.value = true
-  loadSupportMessengerFromSettings()
-})
-
-const form = ref<Transaction>({
-  value: undefined,
-  percentWallet: 0,
-  card_id: undefined
-})
-
-const infoVisible = ref<boolean>(false)
-const cardForm = ref<Card>({
-  birth_date: 0,
-  account_number: '',
-  bank_name: '',
-  cart_number: '',
-  shaba_number: ''
-})
-
-const disableButton = computed(() => {
-  if (!loading.value) {
-    if (walletStore?.walletInfo?.cash && !isDeposit.value) {
-      if (cardItems.value.length > 0) {
-        return (
-          walletStore?.walletInfo?.cash <= 0 ||
-          walletStore?.walletInfo?.cash < parseInt(form.value?.value) ||
-          isNaN(parseInt(form.value?.value)) ||
-          parseInt(form.value?.value) < 1000000
-        )
-      } else return true
-    } else if (isDeposit.value) {
-      return isNaN(parseInt(form.value?.value)) || parseInt(form.value?.value) < 1000000
-    } else return false
-  } else {
-    return true
-  }
-})
-const bganim = ref(null)
-
-const unitCalculator = computed(() => {
-  return (walletStore?.walletInfo?.cash ?? 0) / 100
-})
-
-function copyCode(val: string) {
-  // nextTick(() => {
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-const cardItems = ref<Card[]>([])
-
-const cardTableOutput = ref<TableOutput<Card> | null>(null)
-
-const resetData = () => {
-  form.value.value = undefined
-  form.value.percentWallet = 0
-}
-
-async function addCard() {
-  try {
-    loading.value = true
-    await createCard(cardForm.value)
-    await getCards()
-    showAddCard.value = false
-    cardForm.value = {
-      birth_date: 0,
-      account_number: '',
-      bank_name: '',
-      cart_number: '',
-      shaba_number: ''
-    }
-    message.success('کارت وارد شده با موفقیت افزوده شد و پس از تایید نمایش داده خواهد شد.')
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-async function getCards() {
-  try {
-    /*    cardTableOutput.value = await getCardsTable()
-        cardItems.value.push(...cardTableOutput.value.rows)*/
-    cardItems.value = (await getActivatedCards()) ?? []
-    form.value.card_id = (await cardItems.value.length) ? cardItems.value[0].id : undefined
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-function setIsDeposit(val: boolean) {
-  isDeposit.value = val
-  form.value.value = undefined
-  form.value.percentWallet = 0
-  // console.log(bganim.value.classList)
-  // bganim?.value?.classList.add(val?'right':'left')
-  // bganim?.value?.style.transform = `translateX(${val ? '0' : '-100'});`
-  // bganim?.value?.style.animationDirection = val? 'normal':'reverse'
-  // val? bganim?.value?.classList?.add("move") : bganim?.value?.classList?.remove("move")
-  // const el = bganim.value?.
-  // el.
-}
-
-function useStyle() {
-  if (isDeposit.value) return 'right: 2%;'
-    // if (isDeposit.value) return 'animation-direction: normal'
-  // else return 'animation-direction: reverse'
-  else return ' right: 98%; transform: translate(100%, 0);'
-}
-
-const formatter = (value: number) => {
-  return `${value}%`
-}
-
-function percentChange(val: number) {
-  if (val !== 0) form.value.value = parseInt((unitCalculator.value * val).toFixed())
-  else form.value.value = undefined
-}
-
-async function ok() {
-  try {
-    if (form.value.value !== undefined) {
-      loading.value = true
-      if (!isDeposit.value) {
-        await confirmCode({ value: form.value.value })
-        showConfirmCode.value = await true
-      }
-      if (isDeposit.value) {
-        chargeAccountModal.value = true
-        /*const data = await deposit(form.value)
-        window.location.href = data
-        await walletStore.getMyWallet()
-        resetData()
-        message.success('عملیات با موفقیت انجام شد')*/
-      }
-    } else {
-      message.error('ابتدا مبلغ را وارد کنید')
-    }
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-  }
-}
-
-//table
-const items = ref<Transaction[]>([])
-const depositItems = ref<Transaction[]>([])
-const withdrawItems = ref<Transaction[]>([])
-const depositTableOutput = ref<TableOutput<Transaction> | null>(null)
-const withdrawTableOutput = ref<TableOutput<Transaction> | null>(null)
-const depositPagination = ref<TableEngineInput>({
-  filters: [
-    /*{
-      field: 'type',
-      cr: 'and',
-      type: 'number',
-      op: 'eq',
-      value: 3
-    }*/
-  ],
-  limit: 6,
-  page: 0
-})
-const withdrawPagination = ref<TableEngineInput>({
-  filters: [
-    {
-      field: 'type',
-      cr: 'and',
-      type: 'number',
-      op: 'eq',
-      value: 4
-    }
-  ],
-  limit: 6,
-  page: 0
-})
-const el = ref()
-// const {y} = useScroll(el)
-
-onMounted(async () => {
-  cardForm.value.birth_date = userStore.userInfo?.birth_date
-  await initWithdrawTable()
-  await initDepositTable()
-  await getCards()
-})
-
-if (!userStore.isSingle) {
-  useInfiniteScroll(
-    el,
-    async () => {
-      // load more
-      // if (!userStore.isSingle) {
-      if (isDeposit.value) {
-        if (
-          depositTableOutput.value &&
-          (depositPagination.value.page + 1) * depositPagination.value.limit <
-          depositTableOutput.value.query.total
-        ) {
-          depositPagination.value.page++
-          console.log('Updated Page:', depositPagination.value.page)
-          await initDepositTable()
-        }
-      } else {
-        if (
-          withdrawTableOutput.value &&
-          (withdrawPagination.value.page + 1) * withdrawPagination.value.limit <
-          withdrawTableOutput.value.query.total
-        ) {
-          // console.log('gfgf')
-          withdrawPagination.value.page++
-          await initWithdrawTable()
-        }
-      }
-      // }
-    },
-    { distance: 12 }
-  )
-}
-
-async function initDepositTable() {
-  try {
-    depositPagination.value.page === 0 ? (loading.value = true) : (loadingMore.value = true)
-    depositTableOutput.value = await getTransactionTable2(depositPagination.value)
-    depositItems.value.push(...depositTableOutput.value.rows)
-    // console.log(tableOutput.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    loadingMore.value = false
-  }
-}
-
-async function initWithdrawTable() {
-  try {
-    withdrawPagination.value.page === 0 ? (loading.value = true) : (loadingMore.value = true)
-    withdrawTableOutput.value = await getTransactionTable(withdrawPagination.value)
-    withdrawItems.value.push(...withdrawTableOutput.value.rows)
-    // console.log(tableOutput.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
-    loadingMore.value = false
-  }
-}
-
-async function handleOnComplete(value: string) {
-  try {
-    infoVisible.value = true
-    showConfirmCode.value = false
-    await withdraw({ ...form.value, otp: value })
-    await walletStore.getMyWallet()
-    await message.success('عملیات با موفقیت انجام شد')
-    withdrawInfModal.value = true
-    resetData()
-  } catch (e) {
-    console.log(e)
-  }
-  infoVisible.value = false
-  refOtpInput.value?.clearInput()
-}
+const {
+  config,
+  showAddCard,
+  chargeAccountModal,
+  showConfirmCode,
+  withdrawInfModal,
+  infoVisible,
+  refOtpInput,
+  supportMessengerText,
+  supportMessengerLink,
+  isBazretalaProject,
+  handleOnComplete,
+  loading,
+  addCard,
+} = useWalletPage()
 </script>
 
 <style scoped>
-/*.right {
-  left: 100%;
-  transform: translateX(-100%);
-}*/
-
-.left {
-  transform: translateX(0);
-  left: 0;
-}
-
-/*.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}*/
-/*.trans{
-  transition:  height 1s;
-}*/
-.toggle-transe-parent {
-  animation: ease-in-out infinite alternate swingParent;
-}
-
-@keyframes swingParent {
-  from {
-    transform: translateX(0);
-    left: 0;
-  }
-  to {
-    left: 100%;
-    transform: translateX(-100%);
-  }
-}
-
-.animate.right {
-  right: 0;
-}
-
-.animate.right.move {
-  right: 100%;
-  transform: translate(100%, 0);
-}
-
-@media screen and (min-width: 426px) {
-  :deep(.ant-form-item .ant-form-item-label) {
-    margin-top: 30px !important;
-  }
-}
-
-@media screen and (min-width: 426px) {
-  .card-slider-wrap {
-    width: 426px;
-    margin: 0 auto;
-  }
+.wallet-page-root {
+  min-height: 100%;
+  height: 100%;
 }
 </style>
diff --git a/src/views/base/wallet/mobile/MobileWalletView.vue b/src/views/base/wallet/mobile/MobileWalletView.vue
new file mode 100644
index 0000000..dcdd29c
--- /dev/null
+++ b/src/views/base/wallet/mobile/MobileWalletView.vue
@@ -0,0 +1,193 @@
+<template>
+  <div>
+    <div class="absolute inset-0 bg-cover bg-center opacity-60" :style="{ backgroundImage: `url(${img})` }"></div>
+    <div class="bg-white py-3 px-3 text-primary font-bold drop-shadow z-[1999] wrap-fix">کیف پول</div>
+    <div class="bg-white wrap-fix py-3 top-11 px-3 text-primary font-bold flex justify-evenly z-[1999]">
+      <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded">
+        <div
+          :class="isDeposit ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click="setIsDeposit(true)"
+        >
+          واریز
+        </div>
+        <div
+          :class="!isDeposit ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click="setIsDeposit(false)"
+        >
+          برداشت
+        </div>
+        <div
+          :style="useStyle()"
+          class="absolute bg-white h-8 w-1/2 rounded-lg animate right"
+        ></div>
+      </div>
+    </div>
+    <div
+      class="px-5 pt-26"
+      :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'"
+    >
+      <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
+        <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
+          <bg_main />
+          <div class="z-100 relative">
+            <a-form-item :rules="[required()]">
+              <BasicInput
+                v-model:value="form.value"
+                addon-before="ریال"
+                :addon-bg-color="useConfigStore().config.color"
+                addon-text-color="white"
+                place-holder="مبلغ"
+                size="large"
+                type="price"
+              />
+            </a-form-item>
+            <Transition mode="out-in" name="fade">
+              <div v-if="!isDeposit">
+                <div class="text-red text-xs font-bold mb-2">حداقل مبلغ برداشتی 100 هزار تومان می باشد.</div>
+                <div class="font-bold text-xs">
+                  {{ formatCashWalletBalanceText(usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0)) }}
+                </div>
+                <a-form-item v-if="walletStore?.walletInfo" class="!mt-3">
+                  <a-slider
+                    v-model:value="form.percentWallet"
+                    :disabled="walletStore?.walletInfo?.cash <= 0"
+                    :max="100"
+                    :min="0"
+                    :step="10"
+                    :tip-formatter="formatter"
+                    @change="percentChange"
+                  />
+                </a-form-item>
+              </div>
+              <div v-else class="mt-3">
+                <div v-if="!isBazretalaProject()" class="text-red text-xs font-bold mb-2">
+                  حداقل مبلغ واریزی 100 هزار تومان می باشد.
+                </div>
+                <div class="flex gap-2">
+                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 10000000">
+                    {{ usePriceWithoutType(10000000) }}
+                  </BasicButton>
+                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 50000000">
+                    {{ usePriceWithoutType(50000000) }}
+                  </BasicButton>
+                  <BasicButton class="w-full font-bold !px-1" @click="form.value = 100000000">
+                    {{ usePriceWithoutType(100000000) }}
+                  </BasicButton>
+                </div>
+              </div>
+            </Transition>
+          </div>
+        </div>
+        <a-form-item>
+          <BasicButton
+            :disabled="disableButton"
+            class="w-full py-2 mt-5"
+            html-type="submit"
+            type="primary"
+          >
+            <div>
+              <a-spin v-if="loading" size="small" />
+              <div v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</div>
+            </div>
+          </BasicButton>
+        </a-form-item>
+      </a-form>
+      <div
+        v-if="isDeposit"
+        :ref="(node) => { mobileDepositScrollEl = (node as HTMLElement | null) }"
+        :class="loading ? 'h-screen' : ''"
+        class="px-3 overflow-y-scroll w-full h-[49vh] pb-16"
+        style="max-height: calc(100vh - 50px)"
+      >
+        <list-anim v-if="!loading" :numberItemsAnim="4">
+          <Item v-for="item in depositItems" :key="item.id" :item="item" />
+          <TransactionSkeleton v-if="loadingMore" class="mt-1 mb-8" />
+        </list-anim>
+        <TransactionSkeleton v-for="i in 13" v-else :key="i" class="mt-1" />
+      </div>
+      <Transition mode="out-in" name="fade">
+        <template v-if="!isDeposit">
+          <div
+            v-if="!loading && cardItems.length === 0"
+            class="h-30 flex items-center justify-center"
+          >
+            هیچ کارتی یافت نشد
+          </div>
+        </template>
+      </Transition>
+    </div>
+
+    <Teleport to="body">
+      <CardSlider
+        v-if="!isDeposit && cardItems.length > 0 && !showAddCard"
+        v-model:id="form.card_id"
+        :items="cardItems"
+        class="card-slider-wrap wallet-card-slider"
+        @cardDeleted="getCards"
+      />
+    </Teleport>
+
+    <Teleport to="body">
+      <div
+        v-if="!isDeposit && !showAddCard"
+        class="add-card app-dock-add-bar"
+        @click="showAddCard = true"
+      >
+        <div>افزودن کارت جدید</div>
+        <BasicIcon icon="vuesax-linear:add" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import Bg_main from '@/components/bg_main.vue'
+import ListAnim from '@/components/ListAnim.vue'
+import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
+import { useConfigStore } from '@/store/configStore'
+import { required } from '@/utils/inputRules'
+import img from '@/assets/img/user_ly1.svg'
+import CardSlider from '../components/UISlider/index.vue'
+import Item from '../components/Item.vue'
+import { useWalletPageContext } from '../composables/useWalletPage'
+
+const {
+  isDeposit,
+  walletStore,
+  showAddCard,
+  form,
+  disableButton,
+  cardItems,
+  depositItems,
+  loading,
+  loadingMore,
+  mobileDepositScrollEl,
+  isBazretalaProject,
+  usePriceWithoutType,
+  formatCashWalletBalanceText,
+  setIsDeposit,
+  useStyle,
+  formatter,
+  percentChange,
+  ok,
+  getCards,
+} = useWalletPageContext()
+</script>
+
+<style scoped>
+.animate.right {
+  right: 0;
+}
+
+@media screen and (min-width: 426px) {
+  .card-slider-wrap {
+    width: 426px;
+    margin: 0 auto;
+  }
+}
+</style>
diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index 4ab5b9b..62393d8 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="w-full  flex flex-col">
+  <div class="w-full flex flex-col" :class="{ 'login-form--desktop': variant === 'desktop' }">
     <div
-      v-if="hasCustomLoginLogoLayout()"
+      v-if="variant !== 'desktop' && hasCustomLoginLogoLayout()"
       class="flex flex-col items-center mb-[60px]"
     >
       <img
-        :src="getProjectLoginLogo(config.config.avatar)"
+        :src="getProjectLoginLogo(config.config?.avatar)"
         alt=""
         class="z-100 self-center w-56 h-auto object-contain"
       >
@@ -19,8 +19,8 @@
       </div>
     </div>
     <img
-      v-else
-      :src="getProjectLoginLogo(config.config.avatar)"
+      v-else-if="variant !== 'desktop'"
+      :src="getProjectLoginLogo(config.config?.avatar)"
       alt=""
       class="z-100 rounded-full aspect-square self-center w-36"
       style="margin-bottom: 60px"
@@ -29,20 +29,51 @@
     <!--    <div class="font-bold text-center text-xl">{{  URLUserType() === 'single' ? 'ورود' : 'ورود همکار'  }}</div>-->
 <!--    <div v-if="URLUserType() === 'single'" class="font-bold text-center text-xl">ورود</div>-->
 <!--    <div v-else class="font-bold text-center text-xl">ورود همکار</div>-->
-    <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic" @finish="phoneVerification">
-      <!--      <a-segmented v-model:value="value" :options="data" />-->
-      <div class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded mb-5">
-        <div :class="isSMS?'text-primary':'text-gray-400'" class="w-full text-center z-2"
-             @click.stop="setIsSMS(true) ">
+    <a-form
+      ref="formRef"
+      :model="userFormState"
+      :layout="variant === 'desktop' ? 'vertical' : 'horizontal'"
+      :class="variant === 'desktop' ? 'dauth-form' : '!mt-5'"
+      name="basic"
+      @finish="phoneVerification"
+    >
+      <div v-if="variant === 'desktop'" class="dauth-toggle">
+        <button
+          type="button"
+          class="dauth-toggle__btn"
+          :class="{ 'dauth-toggle__btn--active': isSMS }"
+          @click="setIsSMS(true)"
+        >
+          ورود با پیامک
+        </button>
+        <button
+          type="button"
+          class="dauth-toggle__btn"
+          :class="{ 'dauth-toggle__btn--active': !isSMS }"
+          @click="setIsSMS(false)"
+        >
+          ورود با کلمه عبور
+        </button>
+      </div>
+      <div
+        v-else
+        class="flex justify-evenly w-full px-2 h-11 items-center bg-gray-50 relative rounded mb-5"
+      >
+        <div
+          :class="isSMS ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click.stop="setIsSMS(true)"
+        >
           ورود با پیامک
         </div>
-        <div :class="!isSMS?'text-primary':'text-gray-400'" class="w-full text-center z-2"
-             @click.stop="setIsSMS(false) ">
+        <div
+          :class="!isSMS ? 'text-primary' : 'text-gray-400'"
+          class="w-full text-center z-2"
+          @click.stop="setIsSMS(false)"
+        >
           ورود با کلمه عبور
         </div>
-        <!--        <div ref="bganim" class="absolute bg-white h-8 w-1/2 rounded-lg " :style="`transform: translateX(${isDeposit? '0':'-100%'}); left: ${isDeposit? '0':'100%'}`"></div>-->
-        <div ref="bganim" :style="useStyle()"
-             class="absolute bg-white h-8 w-1/2 rounded-lg animate right"></div>
+        <div ref="bganim" :style="useStyle()" class="absolute bg-white h-8 w-1/2 rounded-lg animate right" />
       </div>
 
       <!--      <transition name="fade" mode="out-in">-->
@@ -69,20 +100,13 @@
         <!--        <BasicInput v-model:value="userFormState.password" size="large" place-holder="کلمه عبور"/>-->
         <AInputPassword v-model:value="userFormState.password" place-holder="کلمه عبور" size="large"/>
       </a-form-item>
-      <div v-else-if="!stepTwoVerify" class="h-[90px]"></div>
+      <div v-else-if="!stepTwoVerify" :class="variant === 'desktop' ? 'h-0' : 'h-[90px]'" />
       <div v-else>
         <AFormItem
           :rules="[
-                    {
-                      required: true,
-                      message: 'کد ارسال شده را وارد نمایید',
-                    },
-                    {
-                      min: 4,
-                      max: 4,
-                      message: 'کد ارسال شده را وارد نمایید',
-                    },
-                  ]"
+            { required: true, message: 'کد ارسال شده را وارد نمایید' },
+            { min: 4, max: 4, message: 'کد ارسال شده را وارد نمایید' },
+          ]"
           class="error-token"
           name="token"
         >
@@ -92,7 +116,7 @@
             :num-inputs="4"
             :should-auto-focus="true"
             autocomplete="one-time-code"
-            class="mt-5 justify-center"
+            :class="variant === 'desktop' ? 'dauth-otp justify-center' : 'mt-5 justify-center'"
             input-classes="otp-input"
             separator=""
             style="direction: ltr"
@@ -101,7 +125,18 @@
             @on-complete="handleOnComplete"
           />
         </AFormItem>
-        <div class="flex items-center my-[23px] justify-center">
+
+        <div
+          v-if="variant === 'desktop'"
+          class="dauth-phone-edit"
+        >
+          <span class="dauth-phone-edit__number">{{ userFormState.mobile }}</span>
+          <button type="button" class="dauth-phone-edit__btn" @click="stepTwoVerify = false">
+            <span>ویرایش شماره</span>
+            <BasicIcon icon="vuesax-linear:edit" size="16" />
+          </button>
+        </div>
+        <div v-else class="flex items-center my-[23px] justify-center">
           <span class="text-gray-400 mt-1">{{ userFormState.mobile }}</span>
           <div class="flex items-center text-gray-700 mr-2" @click="stepTwoVerify = false">
             <span class="ml-1">ویرایش شماره</span>
@@ -109,7 +144,7 @@
           </div>
         </div>
 
-        <div class="mb-2 w-full">
+        <div :class="variant === 'desktop' ? 'dauth-resend' : 'mb-2 w-full'">
           <AButton :disabled="!enableSendAgainCode" class="w-full" type="dashed" @click="reSendCode">
             <div v-if="!enableSendAgainCode" class="flex w-full justify-center">
               <span>ارسال مجدد کد در </span>
@@ -125,15 +160,62 @@
 
       <!--      </transition>-->
 
-
-      <a-form-item>
-        <!--        <div class="flex text-gray-600 text-xs my-2">با ورود یا ثبت نام
-                  <div class="mx-1 font-bold">شرایط و قوانین</div>
-                  را میپذیرم
-                </div>-->
+      <div v-if="variant === 'desktop'" class="dauth-actions">
         <BasicButton
           :disabled="loading"
-          class=" w-full py-2"
+          class="w-full dauth-actions__submit"
+          html-type="submit"
+          type="primary"
+        >
+          <a-spin v-if="loading" size="small" />
+          <span v-else>{{ !isSMS ? 'ورود' : stepTwoVerify ? 'ورود' : 'ارسال کد' }}</span>
+        </BasicButton>
+
+        <BasicButton
+          v-if="getToken() && userStore.userInfo?.finger_print"
+          :disabled="loading"
+          class="w-full"
+          @click="enterFingerPrint"
+        >
+          ورود با اثر انگشت
+        </BasicButton>
+
+        <template v-if="config.config?.name === 'garoosi'">
+          <div class="dauth-actions-row">
+            <a
+              class="dauth-link-btn dauth-link-btn--primary"
+              download="Garoosi.apk"
+              href="https://garoosigholaktala.ir/apk/Garoosi.apk"
+            >
+              دانلود اپ اندروید
+            </a>
+            <button type="button" class="dauth-link-btn" @click="installWebApp">
+              نصب نسخه وب اپ
+            </button>
+          </div>
+          <button type="button" class="dauth-link-btn" @click="goToEducate">
+            آموزش کار با نرم افزار
+          </button>
+          <button type="button" class="dauth-link-btn" @click="goToAboutUs">
+            درباره ما
+          </button>
+        </template>
+      </div>
+
+      <div
+        v-if="isRegister && variant === 'desktop'"
+        class="dauth-switch"
+      >
+        <span>حساب کاربری ندارید؟</span>
+        <button type="button" class="dauth-switch__link" @click="$emit('register', true)">
+          ثبت نام کنید
+        </button>
+      </div>
+
+      <a-form-item v-if="variant !== 'desktop'">
+        <BasicButton
+          :disabled="loading"
+          class="w-full py-2"
           html-type="submit"
           type="primary"
         >
@@ -152,34 +234,35 @@
             ورود با اثر انگشت
           </div>
         </BasicButton>
-        <div v-if="config.config.name === 'garoosi'" class="flex w-full gap-2 mb-2 mt-2">
-          <a
+        <template v-if="config.config?.name === 'garoosi'">
+          <div class="flex w-full gap-2 mb-2 mt-2">
+            <a
               class="flex w-full items-center justify-center rounded py-2 text-white bg-primary border-none cursor-pointer no-underline"
               download="Garoosi.apk"
               href="https://garoosigholaktala.ir/apk/Garoosi.apk"
-          >
-            <div>دانلود اپ اندروید</div>
-          </a>
-          <BasicButton type="primary" class="w-full" @click="installWebApp">
-            <div>نصب نسخه وب اپ</div>
-          </BasicButton>
-        </div>
-        <BasicButton v-if="config.config.name === 'garoosi'" class="w-full !font-bold" @click="goToEducate">
-          <div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
-        </BasicButton>
-        <BasicButton
-            v-if="config.config.name === 'garoosi'"
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            @click="goToAboutUs()"
-        >
-          <div class="flex">
-            <div>درباره ما</div>
+            >
+              <div>دانلود اپ اندروید</div>
+            </a>
+            <BasicButton type="primary" class="w-full" @click="installWebApp">
+              <div>نصب نسخه وب اپ</div>
+            </BasicButton>
           </div>
-        </BasicButton>
+          <BasicButton class="w-full !font-bold" @click="goToEducate">
+            <div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
+          </BasicButton>
+          <BasicButton class="mt-2 w-full" icon="" iconSize="18" @click="goToAboutUs">
+            <div class="flex">
+              <div>درباره ما</div>
+            </div>
+          </BasicButton>
+        </template>
 
-        <div v-if="isRegister" class="cursor-pointer flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',true)">اگر حساب کاربری ندارید
+        <div
+          v-if="isRegister"
+          class="cursor-pointer flex gap-1 justify-center mt-5 text-xs"
+          @click="$emit('register', true)"
+        >
+          اگر حساب کاربری ندارید
           <div class="font-bold text-primary">از این قسمت</div>
           ثبت نام کنید.
         </div>
@@ -258,7 +341,7 @@ import { mobileValidation, required } from '@/utils/inputRules'
 import BasicInput from '@/components/BasicPacks/BasicInput.vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import { authenticateWithFingerprint, getToken, loading, removeToken, setToken, URLUserType } from '@/utils'
-import {computed, onMounted, reactive, ref} from 'vue'
+import {computed, reactive, ref, inject, unref} from 'vue'
 import OtpInput from 'vue3-otp-input'
 import type { Login } from '@/models/login'
 import type { FormInstance } from 'ant-design-vue'
@@ -270,7 +353,7 @@ import router from '@/router'
 import { useUserStore } from '@/store/userStore'
 import { useWalletStore } from '@/store/walletStore'
 import { useSettingsStore } from '@/store/settingsStore'
-import { fingerPosition, setTruth } from '@/main'
+import { setTruth } from '@/main'
 import {useConfigStore} from "@/store/configStore";
 import {getConfigApp, getProjectLoginLogo, getProjectLoginTaglineLines, hasCustomLoginLogoLayout} from "@/utils/config";
 import BasicActionSheet from "@/components/BasicPacks/BasicActionSheet.vue";
@@ -279,6 +362,22 @@ import shareAppleIcon from '@/assets/img/share-apple.png'
 import addToHomeScreenIcon from '@/assets/img/Add-to-homeScreen.png'
 import {getProducts} from "@/api/products";
 import {getSettings} from "@/api/configuration";
+import { LOGIN_PAGE_CONTEXT_KEY } from '../composables/useLoginPage'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
+defineEmits<{
+  register: [val: boolean]
+}>()
+
+const loginPageContext = inject(LOGIN_PAGE_CONTEXT_KEY, null)
+const isRegister = computed(() => unref(loginPageContext?.loginForm?.isRegister) ?? false)
+
 const config=useConfigStore()
 const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
 const enableSendAgainCode = ref<boolean>(false)
@@ -433,21 +532,11 @@ const showPWAInstallGuide = ref(false)
 async function installWebApp() {
   showPWAInstallGuide.value = true
 }
-const isRegister = ref()
-async function isOpenRegister() {
-  const settingsStore = useSettingsStore()
-  await settingsStore.fetchSettings()
-  isRegister.value = settingsStore.settings.find(s => s?.key === 'open_register' && s?.is_active === true)
-}
 
 async function proceedWithInstall() {
   showPWAInstallGuide.value = false
 }
 
-onMounted(async () => {
-  await isOpenRegister()
-})
-
 </script>
 <style lang="less">
 .animate.right {
diff --git a/src/views/login/components/Register.vue b/src/views/login/components/Register.vue
index 63f6858..dce925c 100644
--- a/src/views/login/components/Register.vue
+++ b/src/views/login/components/Register.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="w-full flex flex-col">
+  <div class="w-full flex flex-col" :class="{ 'login-form--desktop': variant === 'desktop' }">
     <div
-      v-if="hasCustomLoginLogoLayout()"
+      v-if="variant !== 'desktop' && hasCustomLoginLogoLayout()"
       class="flex flex-col items-center mb-4"
     >
       <img
-        :src="getProjectLoginLogo(config.config.avatar)"
+        :src="getProjectLoginLogo(config.config?.avatar)"
         alt=""
         class="z-100 self-center w-56 h-auto object-contain"
       >
@@ -19,45 +19,105 @@
       </div>
     </div>
     <img
-      v-else
-      :src="getProjectLoginLogo(config.config.avatar)"
+      v-else-if="variant !== 'desktop'"
+      :src="getProjectLoginLogo(config.config?.avatar)"
       alt=""
       class="z-100 rounded-full aspect-square self-center w-36"
     >
-    <div class="font-bold text-center text-xl">ثبت نام</div>
-    <a-form ref="formRef" :model="userFormState" class="!mt-5" name="basic"
-            @finish="registerAccount">
-      <a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="نام" name="fname">
-        <BasicInput v-model:value="userFormState.fname" place-holder="نام" />
+    <div v-if="variant !== 'desktop'" class="font-bold text-center text-xl">ثبت نام</div>
+    <a-form
+      ref="formRef"
+      :model="userFormState"
+      :layout="variant === 'desktop' ? 'vertical' : 'horizontal'"
+      :class="variant === 'desktop' ? 'dauth-form' : '!mt-5'"
+      name="basic"
+      @finish="registerAccount"
+    >
+      <template v-if="variant === 'desktop'">
+        <a-form-item :rules="[required()]" label="نام" name="fname">
+          <BasicInput v-model:value="userFormState.fname" place-holder="نام" size="large" />
+        </a-form-item>
+        <a-form-item :rules="[required()]" label="نام خانوادگی" name="lname">
+          <BasicInput v-model:value="userFormState.lname" place-holder="نام خانوادگی" size="large" />
+        </a-form-item>
+      </template>
+      <template v-else>
+        <a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="نام" name="fname">
+          <BasicInput v-model:value="userFormState.fname" place-holder="نام" />
+        </a-form-item>
+        <a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="نام خانوادگی" name="lname">
+          <BasicInput v-model:value="userFormState.lname" place-holder="نام خانوادگی" />
+        </a-form-item>
+      </template>
+      <a-form-item
+        :rules="[required(), mobileValidation('شماره تلفن')]"
+        :class="variant === 'desktop' ? '' : 'home_appear_fade_in_down'"
+        label="شماره تلفن"
+        name="mobile"
+      >
+        <BasicInput
+          v-model:value="userFormState.mobile"
+          :place-holder="variant === 'desktop' ? '۰۹۱۲۳۴۵۶۷۸۹' : 'شماره تلفن'"
+          :size="variant === 'desktop' ? 'large' : undefined"
+          inputmode="numeric"
+        />
       </a-form-item>
-      <a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="نام خانوادگی" name="lname">
-        <BasicInput v-model:value="userFormState.lname" place-holder="نام خانوادگی" />
-      </a-form-item>
-      <a-form-item :rules="[required(),mobileValidation('شماره تلفن')]" class="home_appear_fade_in_down" label="شماره تلفن"
-                   name="mobile">
-        <BasicInput v-model:value="userFormState.mobile" place-holder="شماره تلفن" inputmode="numeric"/>
-      </a-form-item>
-      <a-form-item :rules="[required()]" class="home_appear_fade_in_down" label="کلمه عبور" name="password">
-        <!--        <BasicInput v-model:value="userFormState.password" size="large" place-holder="کلمه عبور"/>-->
-        <AInputPassword v-model:value="userFormState.password" place-holder="کلمه عبور" />
+      <a-form-item
+        :rules="[required()]"
+        :class="variant === 'desktop' ? '' : 'home_appear_fade_in_down'"
+        label="کلمه عبور"
+        name="password"
+      >
+        <AInputPassword
+          v-model:value="userFormState.password"
+          place-holder="کلمه عبور"
+          :size="variant === 'desktop' ? 'large' : undefined"
+        />
       </a-form-item>
       <a-form-item
         :rules="isBoursecuProject() ? [] : [required()]"
-        class="home_appear_fade_in_down"
+        :class="variant === 'desktop' ? '' : 'home_appear_fade_in_down'"
         label="کد معرف"
         name="referral_id"
       >
-        <BasicInput :disabled="disableForm" v-model:value="userFormState.referral_id" place-holder="کد معرف"/>
+        <BasicInput
+          v-model:value="userFormState.referral_id"
+          :disabled="disableForm"
+          :place-holder="variant === 'desktop' ? 'کد معرف (اختیاری)' : 'کد معرف'"
+          :size="variant === 'desktop' ? 'large' : undefined"
+        />
       </a-form-item>
-      <!--      <a-form-item v-if="URLUserType() === 'customer'" :rules="[required()]" class="home_appear_fade_in_down"
-                         label="نام فروشگاه" name="shop_name">
-              <BasicInput v-model:value="userFormState.shop_name" place-holder="نام فروشگاه"/>
-            </a-form-item>-->
-      <a-form-item>
-
+      <div v-if="variant === 'desktop'" class="dauth-actions">
         <BasicButton
           :disabled="loading"
-          class=" w-full py-2 mt-4"
+          class="w-full dauth-actions__submit"
+          html-type="submit"
+          type="primary"
+        >
+          <a-spin v-if="loading" size="small" />
+          <span v-else>ثبت نام</span>
+        </BasicButton>
+        <template v-if="config.config?.name === 'garoosi'">
+          <button type="button" class="dauth-link-btn" @click="goToEducate">
+            آموزش کار با نرم افزار
+          </button>
+          <button type="button" class="dauth-link-btn" @click="goToAboutUs">
+            درباره ما
+          </button>
+        </template>
+      </div>
+
+      <div v-if="variant === 'desktop'" class="dauth-switch">
+        <span>حساب کاربری دارید؟</span>
+        <button type="button" class="dauth-switch__link" @click="$emit('register', false)">
+          وارد شوید
+        </button>
+      </div>
+
+      <a-form-item v-if="variant !== 'desktop'">
+        <BasicButton
+          :disabled="loading"
+          class="w-full py-2 mt-4"
           html-type="submit"
           type="primary"
         >
@@ -66,26 +126,25 @@
             <div v-else>ثبت نام</div>
           </div>
         </BasicButton>
-        <BasicButton v-if="config.config.name === 'garoosi'" class="w-full mt-2 !font-bold" @click="goToEducate">
-          <div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
-        </BasicButton>
-        <BasicButton
-            v-if="config.config.name === 'garoosi'"
-            class="mt-2 w-full"
-            icon=""
-            iconSize="18"
-            @click="goToAboutUs()"
+        <template v-if="config.config?.name === 'garoosi'">
+          <BasicButton class="w-full mt-2 !font-bold" @click="goToEducate">
+            <div class="flex gap-2 items-center">آموزش کار با نرم افزار</div>
+          </BasicButton>
+          <BasicButton class="mt-2 w-full" icon="" iconSize="18" @click="goToAboutUs">
+            <div class="flex">
+              <div>درباره ما</div>
+            </div>
+          </BasicButton>
+        </template>
+        <div
+          class="cursor-pointer flex gap-1 justify-center mt-5 text-xs"
+          @click="$emit('register', false)"
         >
-          <div class="flex">
-            <div>درباره ما</div>
-          </div>
-        </BasicButton>
-        <div class="cursor-pointer flex gap-1 justify-center mt-5 text-xs" @click="$emit('register',false)">اگر حساب کاربری دارید
+          اگر حساب کاربری دارید
           <div class="font-bold text-primary">از این قسمت</div>
           وارد شوید.
         </div>
       </a-form-item>
-
     </a-form>
     <DialogVantOneButton v-model:show="registeredInfo" :closeOnClickOverlay="false" :timeOut="-1">
       <template v-slot:img>
@@ -170,7 +229,15 @@ import DialogVantOneButton from '@/components/DialogVantOneButton.vue'
 import { registerCustomer } from '@/api/login'
 import router from '@/router'
 import {useConfigStore} from "@/store/configStore";
-import {getProjectLoginLogo, getProjectLoginTaglineLines, hasCustomLoginLogoLayout} from "@/utils/config";
+import {getProjectLoginLogo, getProjectLoginTaglineLines, hasCustomLoginLogoLayout, isBoursecuProject} from "@/utils/config";
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' },
+)
+
 const config = useConfigStore()
 
 // const stepTwoVerify = ref<boolean>(false)
diff --git a/src/views/login/composables/useLoginForm.ts b/src/views/login/composables/useLoginForm.ts
new file mode 100644
index 0000000..3ade14c
--- /dev/null
+++ b/src/views/login/composables/useLoginForm.ts
@@ -0,0 +1,188 @@
+import { computed, onMounted, reactive, ref } from 'vue'
+import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import OtpInput from 'vue3-otp-input'
+import type { Login } from '@/models/login'
+import {
+  authenticateWithFingerprint,
+  getToken,
+  loading,
+  setToken,
+} from '@/utils'
+import useCountdownTimer from '@/utils/useCountdownTimer'
+import { loginCustomer, verifyToken } from '@/api/login'
+import router from '@/router'
+import { useUserStore } from '@/store/userStore'
+import { useWalletStore } from '@/store/walletStore'
+import { useSettingsStore } from '@/store/settingsStore'
+import { setTruth } from '@/main'
+
+export function useLoginForm() {
+  const { time, onFinish, reset } = useCountdownTimer('00:02:00', 'mm:ss')
+  const enableSendAgainCode = ref(false)
+  const stepTwoVerify = ref(false)
+  const formRef = ref<FormInstance>()
+  const userStore = useUserStore()
+  const walletStore = useWalletStore()
+  const refOtpInput = ref<InstanceType<typeof OtpInput> | null>(null)
+  const isSMS = ref(true)
+  const isRegister = ref<boolean | undefined>()
+  const showPWAInstallGuide = ref(false)
+
+  const userFormState = reactive<Login>({
+    provider: 'customer',
+  })
+
+  onFinish(() => {
+    enableSendAgainCode.value = true
+  })
+
+  async function reSendCode() {
+    userFormState.token = undefined
+    enableSendAgainCode.value = false
+    await loginCustomer(userFormState)
+    reset()
+  }
+
+  function setIsSMS(val: boolean) {
+    isSMS.value = val
+    if (!val) stepTwoVerify.value = false
+    userFormState.token = ''
+    userFormState.password = ''
+  }
+
+  async function enterFingerPrint() {
+    const fingerPrint = await authenticateWithFingerprint()
+    if (fingerPrint) {
+      setTruth()
+      await router.push({ name: 'home' })
+    } else {
+      message.error('خطا در اعتبارسنجی')
+    }
+  }
+
+  function handleOnChange(value: string) {
+    userFormState.token = value
+  }
+
+  async function handleOnComplete(value: string) {
+    userFormState.token = value
+    phoneVerification()
+  }
+
+  async function login(accessToken: string | undefined) {
+    setToken(accessToken)
+    await userStore.getMyInfo()
+    await walletStore.getMyWallet()
+    setTruth()
+    await router.push({ name: 'home' })
+  }
+
+  function getcode() {
+    if ('OTPCredential' in window) {
+      const ac = new AbortController()
+      navigator.credentials
+        .get({
+          otp: { transport: ['sms'] },
+          signal: ac.signal,
+        })
+        .then((otp) => {
+          userFormState.token = otp?.code
+          refOtpInput.value?.fillInput(otp?.code)
+          phoneVerification()
+          ac.abort()
+        })
+        .catch(() => {
+          ac.abort()
+        })
+    }
+  }
+
+  function phoneVerification() {
+    formRef.value?.validateFields().then(async () => {
+      try {
+        loading.value = true
+        if (isSMS.value) {
+          if (!stepTwoVerify.value) {
+            userFormState.token = undefined
+            userFormState.password = undefined
+            userFormState.provider = 'customer'
+            const { id } = await loginCustomer(userFormState)
+            userFormState.id = id
+            stepTwoVerify.value = true
+            getcode()
+            reset()
+          } else {
+            const { access_token } = await verifyToken(userFormState)
+            await login(access_token)
+          }
+        } else {
+          userFormState.token = undefined
+          const { access_token } = await loginCustomer(userFormState)
+          await login(access_token)
+        }
+      } catch (e) {
+        console.log(e)
+      } finally {
+        loading.value = false
+      }
+    })
+  }
+
+  function editPhoneNumber() {
+    stepTwoVerify.value = false
+  }
+
+  async function isOpenRegister() {
+    const settingsStore = useSettingsStore()
+    await settingsStore.fetchSettings()
+    isRegister.value = settingsStore.settings.find(
+      (s) => s?.key === 'open_register' && s?.is_active === true,
+    )
+  }
+
+  function installWebApp() {
+    showPWAInstallGuide.value = true
+  }
+
+  function proceedWithInstall() {
+    showPWAInstallGuide.value = false
+  }
+
+  const submitLabel = computed(() => {
+    if (!isSMS.value) return 'ورود'
+    return stepTwoVerify.value ? 'ورود' : 'ارسال کد'
+  })
+
+  const showFingerprint = computed(
+    () => Boolean(getToken() && userStore.userInfo?.finger_print),
+  )
+
+  onMounted(async () => {
+    await isOpenRegister()
+  })
+
+  return {
+    time,
+    enableSendAgainCode,
+    stepTwoVerify,
+    formRef,
+    refOtpInput,
+    isSMS,
+    isRegister,
+    showPWAInstallGuide,
+    userFormState,
+    loading,
+    submitLabel,
+    showFingerprint,
+    setIsSMS,
+    reSendCode,
+    enterFingerPrint,
+    handleOnChange,
+    handleOnComplete,
+    phoneVerification,
+    editPhoneNumber,
+    installWebApp,
+    proceedWithInstall,
+  }
+}
diff --git a/src/views/login/composables/useLoginPage.ts b/src/views/login/composables/useLoginPage.ts
new file mode 100644
index 0000000..dd3b454
--- /dev/null
+++ b/src/views/login/composables/useLoginPage.ts
@@ -0,0 +1,45 @@
+import { inject, onMounted, provide, reactive, type InjectionKey } from 'vue'
+import router from '@/router'
+import { useLoginForm } from './useLoginForm'
+import { useRegisterForm } from './useRegisterForm'
+
+export interface LoginPageContext {
+  enterType: boolean
+  setEnterType: (val: boolean) => void
+  loginForm: ReturnType<typeof useLoginForm>
+  registerForm: ReturnType<typeof useRegisterForm>
+}
+
+export const LOGIN_PAGE_CONTEXT_KEY: InjectionKey<LoginPageContext> = Symbol('loginPageContext')
+
+export function useLoginPage() {
+  const loginForm = useLoginForm()
+  const registerForm = useRegisterForm()
+
+  const context = reactive<LoginPageContext>({
+    enterType: false,
+    setEnterType(val: boolean) {
+      context.enterType = val
+    },
+    loginForm,
+    registerForm,
+  })
+
+  provide(LOGIN_PAGE_CONTEXT_KEY, context)
+
+  onMounted(() => {
+    if (router.currentRoute.value.query.id) {
+      context.enterType = true
+    }
+  })
+
+  return context
+}
+
+export function useLoginPageContext() {
+  const context = inject(LOGIN_PAGE_CONTEXT_KEY)
+  if (!context) {
+    throw new Error('useLoginPageContext must be used within useLoginPage')
+  }
+  return context
+}
diff --git a/src/views/login/composables/useRegisterForm.ts b/src/views/login/composables/useRegisterForm.ts
new file mode 100644
index 0000000..464ed8e
--- /dev/null
+++ b/src/views/login/composables/useRegisterForm.ts
@@ -0,0 +1,60 @@
+import { onMounted, reactive, ref } from 'vue'
+import type { FormInstance } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
+import type { User } from '@/models/login'
+import { loading, URLUserType } from '@/utils'
+import { registerCustomer } from '@/api/login'
+import router from '@/router'
+
+export function useRegisterForm() {
+  const registeredInfo = ref(false)
+  const disableForm = ref(false)
+
+  const userFormState = reactive<User>({
+    access_token: '',
+  })
+
+  const formRef = ref<FormInstance>()
+
+  onMounted(() => {
+    if (router.currentRoute.value.query.id) {
+      userFormState.referral_id = router.currentRoute.value.query.id as string
+      disableForm.value = true
+    }
+  })
+
+  function registerAccount() {
+    formRef.value?.validateFields().then(async () => {
+      try {
+        loading.value = true
+        URLUserType() === 'single' ? (userFormState.type = 2) : (userFormState.type = 1)
+        if (!userFormState.referral_id || userFormState.referral_id === '') {
+          delete userFormState.referral_id
+        }
+        await registerCustomer(userFormState)
+        registeredInfo.value = true
+      } catch (e: any) {
+        console.log(e)
+        if (e.response?.status === 422) {
+          message.error('این شماره همراه قبلا ثبت نام کرده است')
+        }
+      } finally {
+        loading.value = false
+      }
+    })
+  }
+
+  function dismissSuccess() {
+    registeredInfo.value = false
+  }
+
+  return {
+    registeredInfo,
+    disableForm,
+    userFormState,
+    formRef,
+    loading,
+    registerAccount,
+    dismissSuccess,
+  }
+}
diff --git a/src/views/login/desktop/DesktopLoginView.vue b/src/views/login/desktop/DesktopLoginView.vue
new file mode 100644
index 0000000..2ee6632
--- /dev/null
+++ b/src/views/login/desktop/DesktopLoginView.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import DesktopAuthShell from './components/DesktopAuthShell.vue'
+import Login from '../components/Login.vue'
+import Register from '../components/Register.vue'
+import { useLoginPageContext } from '../composables/useLoginPage'
+
+const page = useLoginPageContext()
+</script>
+
+<template>
+  <DesktopAuthShell>
+    <div class="dauth-card">
+      <header v-if="!page.enterType" class="dauth-card__header">
+        <p class="dauth-card__eyebrow">حساب کاربری</p>
+        <h2 class="dauth-card__title">ورود</h2>
+        <p class="dauth-card__subtitle">برای ادامه، روش ورود خود را انتخاب کنید</p>
+      </header>
+      <header v-else class="dauth-card__header">
+        <p class="dauth-card__eyebrow">حساب جدید</p>
+        <h2 class="dauth-card__title">ثبت نام</h2>
+        <p class="dauth-card__subtitle">اطلاعات خود را برای ایجاد حساب وارد کنید</p>
+      </header>
+
+      <Login
+        v-if="!page.enterType"
+        variant="desktop"
+        @register="page.setEnterType"
+      />
+      <Register
+        v-else
+        variant="desktop"
+        @register="page.setEnterType"
+      />
+    </div>
+  </DesktopAuthShell>
+</template>
diff --git a/src/views/login/desktop/components/DesktopAuthShell.vue b/src/views/login/desktop/components/DesktopAuthShell.vue
new file mode 100644
index 0000000..123185d
--- /dev/null
+++ b/src/views/login/desktop/components/DesktopAuthShell.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="dauth" :class="{ 'dauth--boursecu': isBoursecu }">
+    <div class="dauth__layout">
+      <aside class="dauth-brand" :class="{ 'dauth-brand--boursecu': isBoursecu }">
+        <div class="dauth-brand__pattern" />
+        <div class="dauth-brand__content">
+          <img
+            :src="logo"
+            alt=""
+            class="dauth-brand__logo"
+            :class="{ 'dauth-brand__logo--round': !hasCustomLayout }"
+          >
+          <h1 class="dauth-brand__title">{{ brandTitle }}</h1>
+          <p v-if="tagline" class="dauth-brand__tagline">{{ tagline }}</p>
+          <ul class="dauth-brand__features">
+            <li v-for="feature in features" :key="feature" class="dauth-brand__feature">
+              <span class="dauth-brand__feature-icon">
+                <BasicIcon icon="vuesax-linear:tick-circle" size="16" />
+              </span>
+              {{ feature }}
+            </li>
+          </ul>
+        </div>
+        <div class="dauth-brand__footer">نسخه {{ version }}</div>
+      </aside>
+
+      <main class="dauth-form-panel">
+        <slot />
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import pkg from '../../../../../package.json'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useConfigStore } from '@/store/configStore'
+import {
+  getProjectLoginLogo,
+  getProjectLoginTaglineLines,
+  hasCustomLoginLogoLayout,
+  isBoursecuProject,
+} from '@/utils/config'
+
+const config = useConfigStore()
+const isBoursecu = isBoursecuProject()
+const hasCustomLayout = hasCustomLoginLogoLayout()
+const version = pkg.version
+
+const logo = computed(() => getProjectLoginLogo(config.config?.avatar))
+
+const taglineLines = computed(() => getProjectLoginTaglineLines())
+const tagline = computed(() => {
+  if (taglineLines.value?.length) {
+    return taglineLines.value.join(' ')
+  }
+  return 'پلتفرم امن و سریع برای مدیریت دارایی و معاملات شما'
+})
+
+const brandTitle = computed(() => config.config?.name_fa ?? 'خوش آمدید')
+
+const features = computed(() => {
+  if (isBoursecu) {
+    return [
+      'قیمت لحظه‌ای و نمودار بازار',
+      'مدیریت دارایی و کیف پول',
+      'معاملات سریع و امن',
+    ]
+  }
+  return [
+    'ورود امن با پیامک یا رمز عبور',
+    'مدیریت یکپارچه دارایی‌ها',
+    'دسترسی سریع به خدمات',
+  ]
+})
+</script>
+
+<style lang="less" src="../styles/desktop-auth.less"></style>
diff --git a/src/views/login/desktop/components/DesktopLoginForm.vue b/src/views/login/desktop/components/DesktopLoginForm.vue
new file mode 100644
index 0000000..8d71d46
--- /dev/null
+++ b/src/views/login/desktop/components/DesktopLoginForm.vue
@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import { mobileValidation, required } from '@/utils/inputRules'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import OtpInput from 'vue3-otp-input'
+import { useConfigStore } from '@/store/configStore'
+import { useLoginPageContext } from '../../composables/useLoginPage'
+import DesktopPwaGuideModal from './DesktopPwaGuideModal.vue'
+import router from '@/router'
+
+const emit = defineEmits<{
+  register: [val: boolean]
+}>()
+
+const config = useConfigStore()
+const {
+  time,
+  enableSendAgainCode,
+  stepTwoVerify,
+  formRef,
+  refOtpInput,
+  isSMS,
+  isRegister,
+  showPWAInstallGuide,
+  userFormState,
+  loading,
+  submitLabel,
+  showFingerprint,
+  setIsSMS,
+  reSendCode,
+  enterFingerPrint,
+  handleOnChange,
+  handleOnComplete,
+  phoneVerification,
+  editPhoneNumber,
+  installWebApp,
+  proceedWithInstall,
+} = useLoginPageContext().loginForm
+
+function goToEducate() {
+  router.push({ name: 'educate' })
+}
+
+function goToAboutUs() {
+  router.push('/aboutUs')
+}
+</script>
+
+<template>
+  <div class="dauth-card">
+    <header class="dauth-card__header">
+      <p class="dauth-card__eyebrow">حساب کاربری</p>
+      <h2 class="dauth-card__title">ورود</h2>
+      <p class="dauth-card__subtitle">برای ادامه، روش ورود خود را انتخاب کنید</p>
+    </header>
+
+    <div class="dauth-toggle">
+      <button
+        type="button"
+        class="dauth-toggle__btn"
+        :class="{ 'dauth-toggle__btn--active': isSMS }"
+        @click="setIsSMS(true)"
+      >
+        ورود با پیامک
+      </button>
+      <button
+        type="button"
+        class="dauth-toggle__btn"
+        :class="{ 'dauth-toggle__btn--active': !isSMS }"
+        @click="setIsSMS(false)"
+      >
+        ورود با کلمه عبور
+      </button>
+    </div>
+
+    <a-form
+      ref="formRef"
+      :model="userFormState"
+      layout="vertical"
+      class="dauth-form"
+      name="desktop-login"
+      @finish="phoneVerification"
+    >
+      <a-form-item
+        v-if="!stepTwoVerify"
+        :rules="[required('شماره تلفن'), mobileValidation('شماره تلفن')]"
+        :validate-trigger="['change', 'blur']"
+        label="شماره تلفن"
+        name="mobile"
+      >
+        <BasicInput
+          v-model:value="userFormState.mobile"
+          place-holder="۰۹۱۲۳۴۵۶۷۸۹"
+          size="large"
+          inputmode="numeric"
+          type="tel"
+        />
+      </a-form-item>
+
+      <a-form-item
+        v-if="!isSMS"
+        :rules="[required('کلمه عبور')]"
+        label="کلمه عبور"
+        name="password"
+      >
+        <AInputPassword
+          v-model:value="userFormState.password"
+          place-holder="کلمه عبور"
+          size="large"
+        />
+      </a-form-item>
+
+      <template v-if="isSMS && stepTwoVerify">
+        <AFormItem
+          :rules="[
+            { required: true, message: 'کد ارسال شده را وارد نمایید' },
+            { min: 4, max: 4, message: 'کد ارسال شده را وارد نمایید' },
+          ]"
+          class="error-token"
+          name="token"
+        >
+          <OtpInput
+            ref="refOtpInput"
+            :is-input-num="true"
+            :num-inputs="4"
+            :should-auto-focus="true"
+            autocomplete="one-time-code"
+            class="dauth-otp justify-center"
+            input-classes="otp-input"
+            separator=""
+            style="direction: ltr"
+            value=""
+            @on-change="handleOnChange"
+            @on-complete="handleOnComplete"
+          />
+        </AFormItem>
+
+        <div class="dauth-phone-edit">
+          <span class="dauth-phone-edit__number">{{ userFormState.mobile }}</span>
+          <button type="button" class="dauth-phone-edit__btn" @click="editPhoneNumber">
+            <span>ویرایش شماره</span>
+            <BasicIcon icon="vuesax-linear:edit" size="16" />
+          </button>
+        </div>
+
+        <div class="dauth-resend">
+          <AButton :disabled="!enableSendAgainCode" class="w-full" type="dashed" @click="reSendCode">
+            <span v-if="!enableSendAgainCode">
+              ارسال مجدد کد در <span class="text-primary mx-1">{{ time }}</span> دیگر
+            </span>
+            <span v-else>ارسال مجدد کد تایید</span>
+          </AButton>
+        </div>
+      </template>
+
+      <div class="dauth-actions">
+        <BasicButton :disabled="loading" class="w-full" html-type="submit" type="primary">
+          <a-spin v-if="loading" size="small" />
+          <span v-else>{{ submitLabel }}</span>
+        </BasicButton>
+
+        <BasicButton
+          v-if="showFingerprint"
+          :disabled="loading"
+          class="w-full"
+          @click="enterFingerPrint"
+        >
+          ورود با اثر انگشت
+        </BasicButton>
+
+        <template v-if="config.config?.name === 'garoosi'">
+          <div class="dauth-actions-row">
+            <a
+              class="dauth-link-btn dauth-link-btn--primary"
+              download="Garoosi.apk"
+              href="https://garoosigholaktala.ir/apk/Garoosi.apk"
+            >
+              دانلود اپ اندروید
+            </a>
+            <button type="button" class="dauth-link-btn" @click="installWebApp">
+              نصب نسخه وب اپ
+            </button>
+          </div>
+          <button type="button" class="dauth-link-btn" @click="goToEducate">
+            آموزش کار با نرم افزار
+          </button>
+          <button type="button" class="dauth-link-btn" @click="goToAboutUs">
+            درباره ما
+          </button>
+        </template>
+      </div>
+
+      <div v-if="isRegister" class="dauth-switch">
+        <span>حساب کاربری ندارید؟</span>
+        <button type="button" class="dauth-switch__link" @click="emit('register', true)">
+          ثبت نام کنید
+        </button>
+      </div>
+    </a-form>
+
+    <DesktopPwaGuideModal v-model:show="showPWAInstallGuide" @confirm="proceedWithInstall" />
+  </div>
+</template>
diff --git a/src/views/login/desktop/components/DesktopPwaGuideModal.vue b/src/views/login/desktop/components/DesktopPwaGuideModal.vue
new file mode 100644
index 0000000..8b050e5
--- /dev/null
+++ b/src/views/login/desktop/components/DesktopPwaGuideModal.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import shareAppleIcon from '@/assets/img/share-apple.png'
+import addToHomeScreenIcon from '@/assets/img/Add-to-homeScreen.png'
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  confirm: []
+}>()
+
+function close() {
+  emit('update:show', false)
+}
+
+function confirm() {
+  emit('confirm')
+  close()
+}
+</script>
+
+<template>
+  <BasicModal
+    :visible="show"
+    :custom-footer="true"
+    destroy-on-close
+    @update:visible="emit('update:show', $event)"
+  >
+    <h2 class="text-base font-semibold text-center mb-2 text-gray-800">
+      وب اپلیکیشن گروسی را به صفحه اصلی خود اضافه کنید
+    </h2>
+
+    <div class="dauth-pwa-steps">
+      <div class="dauth-pwa-step">
+        <div class="dauth-pwa-step__icon">
+          <img :src="shareAppleIcon" alt="Share" />
+        </div>
+        <p class="dauth-pwa-step__text">روی دکمه Share در نوار پایین کلیک کنید.</p>
+      </div>
+
+      <div class="dauth-pwa-step">
+        <div class="dauth-pwa-step__icon">
+          <img :src="addToHomeScreenIcon" alt="Add to Home Screen" />
+        </div>
+        <p class="dauth-pwa-step__text">
+          در منوی باز شده در قسمت پایین گزینه Add to Home Screen را انتخاب کنید.
+        </p>
+      </div>
+
+      <div class="dauth-pwa-step">
+        <div class="dauth-pwa-step__icon">
+          <span class="text-blue-600 font-bold text-lg">Add</span>
+        </div>
+        <p class="dauth-pwa-step__text">در مرحله آخر در قسمت بالا روی Add کلیک کنید.</p>
+      </div>
+    </div>
+
+    <BasicButton class="w-full mt-4" type="primary" @click="confirm">
+      متوجه شدم
+    </BasicButton>
+  </BasicModal>
+</template>
diff --git a/src/views/login/desktop/components/DesktopRegisterForm.vue b/src/views/login/desktop/components/DesktopRegisterForm.vue
new file mode 100644
index 0000000..50443df
--- /dev/null
+++ b/src/views/login/desktop/components/DesktopRegisterForm.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { mobileValidation, required } from '@/utils/inputRules'
+import BasicInput from '@/components/BasicPacks/BasicInput.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import DialogVantOneButton from '@/components/DialogVantOneButton.vue'
+import registerDelayImage from '@/assets/img/registerDelay.svg'
+import { useConfigStore } from '@/store/configStore'
+import { isBoursecuProject } from '@/utils/config'
+import { useLoginPageContext } from '../../composables/useLoginPage'
+import router from '@/router'
+
+const emit = defineEmits<{
+  register: [val: boolean]
+}>()
+
+const config = useConfigStore()
+const {
+  registeredInfo,
+  disableForm,
+  userFormState,
+  formRef,
+  loading,
+  registerAccount,
+  dismissSuccess,
+} = useLoginPageContext().registerForm
+
+function goToEducate() {
+  router.push({ name: 'educate' })
+}
+
+function goToAboutUs() {
+  router.push('/aboutUs')
+}
+
+function handleSuccessDismiss() {
+  dismissSuccess()
+  emit('register', false)
+}
+</script>
+
+<template>
+  <div class="dauth-card">
+    <header class="dauth-card__header">
+      <p class="dauth-card__eyebrow">حساب جدید</p>
+      <h2 class="dauth-card__title">ثبت نام</h2>
+      <p class="dauth-card__subtitle">اطلاعات خود را برای ایجاد حساب وارد کنید</p>
+    </header>
+
+    <a-form
+      ref="formRef"
+      :model="userFormState"
+      layout="vertical"
+      class="dauth-form"
+      name="desktop-register"
+      @finish="registerAccount"
+    >
+      <a-form-item :rules="[required()]" label="نام" name="fname">
+        <BasicInput v-model:value="userFormState.fname" place-holder="نام" size="large" />
+      </a-form-item>
+      <a-form-item :rules="[required()]" label="نام خانوادگی" name="lname">
+        <BasicInput
+          v-model:value="userFormState.lname"
+          place-holder="نام خانوادگی"
+          size="large"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :rules="[required(), mobileValidation('شماره تلفن')]"
+        label="شماره تلفن"
+        name="mobile"
+      >
+        <BasicInput
+          v-model:value="userFormState.mobile"
+          place-holder="۰۹۱۲۳۴۵۶۷۸۹"
+          size="large"
+          inputmode="numeric"
+        />
+      </a-form-item>
+
+      <a-form-item :rules="[required()]" label="کلمه عبور" name="password">
+        <AInputPassword
+          v-model:value="userFormState.password"
+          place-holder="کلمه عبور"
+          size="large"
+        />
+      </a-form-item>
+
+      <a-form-item
+        :rules="isBoursecuProject() ? [] : [required()]"
+        label="کد معرف"
+        name="referral_id"
+      >
+        <BasicInput
+          v-model:value="userFormState.referral_id"
+          :disabled="disableForm"
+          place-holder="کد معرف (اختیاری)"
+          size="large"
+        />
+      </a-form-item>
+
+      <div class="dauth-actions">
+        <BasicButton :disabled="loading" class="w-full" html-type="submit" type="primary">
+          <a-spin v-if="loading" size="small" />
+          <span v-else>ثبت نام</span>
+        </BasicButton>
+
+        <template v-if="config.config?.name === 'garoosi'">
+          <button type="button" class="dauth-link-btn" @click="goToEducate">
+            آموزش کار با نرم افزار
+          </button>
+          <button type="button" class="dauth-link-btn" @click="goToAboutUs">
+            درباره ما
+          </button>
+        </template>
+      </div>
+
+      <div class="dauth-switch">
+        <span>حساب کاربری دارید؟</span>
+        <button type="button" class="dauth-switch__link" @click="emit('register', false)">
+          وارد شوید
+        </button>
+      </div>
+    </a-form>
+
+    <DialogVantOneButton
+      v-model:show="registeredInfo"
+      :closeOnClickOverlay="false"
+      :timeOut="-1"
+    >
+      <template #img>
+        <img :src="registerDelayImage" alt="" class="opacity-80" />
+      </template>
+      <template #title>
+        <div class="p-5 text-center text-sm">
+          ثبت نام شما با موفقیت انجام شد. شما میتوانید با اطلاعات خود، وارد اپلیکیشن شوید.
+        </div>
+      </template>
+      <template #button>
+        <div class="text-center" @click="handleSuccessDismiss">متوجه شدم</div>
+      </template>
+    </DialogVantOneButton>
+  </div>
+</template>
diff --git a/src/views/login/desktop/styles/desktop-auth.less b/src/views/login/desktop/styles/desktop-auth.less
new file mode 100644
index 0000000..5bfbcb6
--- /dev/null
+++ b/src/views/login/desktop/styles/desktop-auth.less
@@ -0,0 +1,490 @@
+/* Premium desktop auth — split-panel SaaS login */
+
+.dauth {
+  min-height: 100vh;
+  background: #f6f7f9;
+  display: flex;
+  align-items: stretch;
+  color: #111827;
+}
+
+.dauth__layout {
+  display: grid;
+  grid-template-columns: minmax(380px, 1fr) minmax(420px, 520px);
+  width: 100%;
+  min-height: 100vh;
+}
+
+/* Brand panel — uses config primary color (same as buttons) */
+.dauth-brand {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 56px 64px;
+  background: @App-primary-color;
+  overflow: hidden;
+
+  &--boursecu {
+    .dauth-brand__logo {
+      max-width: 300px;
+      max-height: 110px;
+      width: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &__pattern {
+    position: absolute;
+    inset: 0;
+    opacity: 0.04;
+    background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
+    background-size: 28px 28px;
+    pointer-events: none;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    max-width: 420px;
+  }
+
+  &__logo {
+    width: auto;
+    max-width: 220px;
+    height: auto;
+    max-height: 72px;
+    object-fit: contain;
+    margin-bottom: 32px;
+
+    &--round {
+      width: 72px;
+      height: 72px;
+      border-radius: 16px;
+      object-fit: cover;
+    }
+  }
+
+  &__title {
+    font-size: 32px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #ffffff;
+    line-height: 1.25;
+    margin: 0 0 12px;
+  }
+
+  &__tagline {
+    font-size: 15px;
+    font-weight: 400;
+    color: rgba(255, 255, 255, 0.72);
+    line-height: 1.7;
+    margin: 0 0 40px;
+  }
+
+  &__features {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__feature {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  &__feature-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    flex-shrink: 0;
+  }
+
+  &__footer {
+    position: absolute;
+    bottom: 32px;
+    right: 64px;
+    left: 64px;
+    font-size: 11px;
+    color: rgba(255, 255, 255, 0.4);
+  }
+}
+
+/* Form panel */
+.dauth-form-panel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 56px;
+}
+
+.dauth-card {
+  width: 100%;
+  max-width: 420px;
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 36px 40px;
+  box-shadow:
+    0 1px 2px rgba(15, 23, 42, 0.04),
+    0 8px 24px rgba(15, 23, 42, 0.06);
+
+  &__header {
+    margin-bottom: 28px;
+  }
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin: 0 0 6px;
+  }
+
+  &__title {
+    font-size: 24px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: #111827;
+    margin: 0;
+    line-height: 1.3;
+  }
+
+  &__subtitle {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 8px 0 0;
+    line-height: 1.5;
+  }
+}
+
+/* Method toggle */
+.dauth-toggle {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  padding: 4px;
+  background: #f3f4f6;
+  border-radius: 10px;
+  margin-bottom: 24px;
+
+  &__btn {
+    padding: 9px 12px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: inherit;
+    color: #6b7280;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+
+    &--active {
+      background: #ffffff;
+      color: #111827;
+      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+    }
+
+    &:hover:not(&--active) {
+      color: #374151;
+    }
+  }
+}
+
+/* Form fields */
+.dauth-form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &.ant-form-vertical :deep(.ant-form-item) {
+    margin-bottom: 18px;
+  }
+
+  &.ant-form-vertical :deep(.ant-form-item-label) {
+    padding-bottom: 6px;
+  }
+
+  &.ant-form-vertical :deep(.ant-form-item-label > label) {
+    font-size: 12px;
+    font-weight: 600;
+    color: #374151;
+    height: auto;
+  }
+
+  :deep(.ant-form-item) {
+    margin-bottom: 18px;
+  }
+
+  :deep(.ant-form-item-label > label) {
+    font-size: 12px;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  :deep(.ant-input),
+  :deep(.ant-input-affix-wrapper) {
+    border-radius: 10px;
+    border-color: #e5e7eb;
+    padding: 10px 14px;
+
+    &:hover,
+    &:focus,
+    &-focused {
+      border-color: @App-primary-color;
+    }
+  }
+
+  :deep(.ant-input-lg) {
+    padding: 11px 14px;
+  }
+
+  .dauth-toggle {
+    flex-shrink: 0;
+  }
+
+  .dauth-actions,
+  .dauth-switch {
+    width: 100%;
+  }
+}
+
+/* OTP */
+.dauth-otp {
+  margin-top: 8px;
+
+  :deep(.otp-input) {
+    width: 52px !important;
+    height: 52px !important;
+    border-radius: 10px !important;
+    border: 1px solid #e5e7eb !important;
+    font-size: 20px !important;
+    font-weight: 600 !important;
+  }
+}
+
+.dauth-phone-edit {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin: 16px 0 20px;
+  font-size: 13px;
+
+  &__number {
+    color: #9ca3af;
+    direction: ltr;
+  }
+
+  &__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border: none;
+    background: transparent;
+    color: #374151;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    font-family: inherit;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: #f3f4f6;
+    }
+  }
+}
+
+.dauth-resend {
+  margin-bottom: 20px;
+
+  :deep(.ant-btn) {
+    border-radius: 10px;
+    height: 42px;
+    font-size: 13px;
+  }
+}
+
+/* Actions */
+.dauth-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 8px;
+  width: 100%;
+
+  &__submit {
+    min-height: 44px;
+    font-size: 14px;
+    font-weight: 600;
+  }
+
+  :deep(.ant-btn),
+  :deep(button),
+  :deep(.noname-base-button) {
+    border-radius: 10px;
+    min-height: 44px;
+    height: auto;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.dauth-actions-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.dauth-switch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 20px;
+  padding-top: 4px;
+  font-size: 13px;
+  color: #6b7280;
+  flex-shrink: 0;
+
+  &__link {
+    border: none;
+    background: transparent;
+    color: @App-primary-color;
+    font-weight: 600;
+    font-size: 13px;
+    cursor: pointer;
+    font-family: inherit;
+    padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+/* Garoosi extras */
+.dauth-garoosi-links {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.dauth-link-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  color: #374151;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    background: #f9fafb;
+    border-color: #d1d5db;
+    color: #111827;
+  }
+
+  &--primary {
+    background: @App-primary-color;
+    border-color: @App-primary-color;
+    color: #ffffff;
+
+    &:hover {
+      opacity: 0.92;
+      color: #ffffff;
+    }
+  }
+}
+
+/* PWA guide modal */
+.dauth-pwa-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin: 20px 0 8px;
+}
+
+.dauth-pwa-step {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  &__icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    background: #f0f4ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  &__text {
+    font-size: 13px;
+    color: #374151;
+    line-height: 1.6;
+    margin: 0;
+  }
+}
+
+@media (max-width: 900px) {
+  .dauth__layout {
+    grid-template-columns: minmax(300px, 1fr) minmax(340px, 1fr);
+  }
+
+  .dauth-brand {
+    padding: 40px 36px;
+
+    &__footer {
+      right: 36px;
+      left: 36px;
+    }
+  }
+
+  .dauth-form-panel {
+    padding: 32px 28px;
+  }
+}
+
+.login-form--desktop {
+  :deep(.ant-form-item) {
+    margin-bottom: 18px;
+  }
+
+  :deep(.ant-form-item-label > label) {
+    font-size: 12px;
+    font-weight: 600;
+    color: #374151;
+  }
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f6635d6..63d5a8a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,49 +1,66 @@
 <template>
-  <div class="login-page flex items-center justify-center">
-    <!--    <PhoneVerify/>-->
-    <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
-      <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover">
-      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none">
-    </div>
-    <div class="fixed bottom-0 right-0 left-0 h-1/3 w-screen">
-      <img :src="img_bottomGradiant" alt="" class="absolute z-10 w-screen h-full object-cover">
-      <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none">
-    </div>
-    <div class="z-1000 w-full p-5">
-      <transition mode="out-in" name="fade">
-        <Login v-if="!enterType" @register="setEnterType"/>
-        <Register v-else @register="setEnterType"/>
-      </transition>
+  <div class="login-page-root">
+    <!-- Desktop: premium split-panel -->
+    <DesktopAuthShell v-show="isDesktop">
+      <div class="dauth-card">
+        <header v-if="!loginPage.enterType" class="dauth-card__header">
+          <p class="dauth-card__eyebrow">حساب کاربری</p>
+          <h2 class="dauth-card__title">ورود</h2>
+          <p class="dauth-card__subtitle">برای ادامه، روش ورود خود را انتخاب کنید</p>
+        </header>
+        <header v-else class="dauth-card__header">
+          <p class="dauth-card__eyebrow">حساب جدید</p>
+          <h2 class="dauth-card__title">ثبت نام</h2>
+          <p class="dauth-card__subtitle">اطلاعات خود را برای ایجاد حساب وارد کنید</p>
+        </header>
+
+        <Login v-if="!loginPage.enterType" variant="desktop" @register="loginPage.setEnterType" />
+        <Register v-else variant="desktop" @register="loginPage.setEnterType" />
+      </div>
+    </DesktopAuthShell>
+
+    <!-- Mobile: original layout -->
+    <div v-show="!isDesktop" class="login-page flex items-center justify-center">
+      <template v-if="!isBoursecu">
+        <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
+          <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
+          <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+        </div>
+        <div class="fixed bottom-0 right-0 left-0 h-1/3 w-screen">
+          <img :src="img_bottomGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
+          <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+        </div>
+      </template>
+      <div class="z-1000 w-full p-5">
+        <Login v-if="!loginPage.enterType" @register="loginPage.setEnterType" />
+        <Register v-else @register="loginPage.setEnterType" />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-
-import Login from "@/views/login/components/Login.vue";
-import Register from "@/views/login/components/Register.vue";
-import { onMounted, ref } from 'vue'
+import { useLoginPage } from './composables/useLoginPage'
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import { isBoursecuProject } from '@/utils/config'
+import Login from './components/Login.vue'
+import Register from './components/Register.vue'
+import DesktopAuthShell from './desktop/components/DesktopAuthShell.vue'
 import img_topGradiant from './assets/img/gr_top_white.svg'
 import img_bottomGradiant from './assets/img/gr_bottom_white.svg'
 import img_pattern from './assets/img/pattern.svg'
-import router from '@/router'
-
-const enterType = ref<boolean>(false)
-
-function setEnterType(val: boolean) {
-  enterType.value = val
-}
-
-onMounted(() => {
-  if (router.currentRoute.value.query.id)
-    enterType.value = true
-})
-
 
+const isDesktop = useDesktopBreakpoint()
+const isBoursecu = isBoursecuProject()
+const loginPage = useLoginPage()
 </script>
 
-
 <style scoped>
+.login-page-root {
+  width: 100%;
+  min-height: 100vh;
+}
+
 .login-page {
   min-height: calc(100vh - var(--app-credit-footer-offset, 28px));
 }
diff --git a/src/views/login/mobile/MobileLoginView.vue b/src/views/login/mobile/MobileLoginView.vue
new file mode 100644
index 0000000..5cf7d1a
--- /dev/null
+++ b/src/views/login/mobile/MobileLoginView.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="login-page flex items-center justify-center">
+    <template v-if="!isBoursecu">
+      <div class="fixed top-0 right-0 left-0 h-1/3 w-screen flex">
+        <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
+        <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+      </div>
+      <div class="fixed bottom-0 right-0 left-0 h-1/3 w-screen">
+        <img :src="img_bottomGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
+        <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+      </div>
+    </template>
+    <div class="z-1000 w-full p-5">
+      <Login v-if="!page.enterType" key="login" @register="page.setEnterType" />
+      <Register v-else key="register" @register="page.setEnterType" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Login from '../components/Login.vue'
+import Register from '../components/Register.vue'
+import { useLoginPageContext } from '../composables/useLoginPage'
+import { isBoursecuProject } from '@/utils/config'
+import img_topGradiant from '../assets/img/gr_top_white.svg'
+import img_bottomGradiant from '../assets/img/gr_bottom_white.svg'
+import img_pattern from '../assets/img/pattern.svg'
+
+const page = useLoginPageContext()
+const isBoursecu = isBoursecuProject()
+</script>
+
+<style scoped>
+.login-page {
+  min-height: calc(100vh - var(--app-credit-footer-offset, 28px));
+}
+</style>
diff --git a/src/views/login/shell/LoginPageShell.vue b/src/views/login/shell/LoginPageShell.vue
new file mode 100644
index 0000000..722f9c4
--- /dev/null
+++ b/src/views/login/shell/LoginPageShell.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="login-page-root">
+    <MobileLoginView v-show="!isDesktop" />
+    <DesktopLoginView v-show="isDesktop" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
+import MobileLoginView from '../mobile/MobileLoginView.vue'
+import DesktopLoginView from '../desktop/DesktopLoginView.vue'
+import { useLoginPage } from '../composables/useLoginPage'
+
+const isDesktop = useDesktopBreakpoint()
+useLoginPage()
+</script>
+
+<style scoped>
+.login-page-root {
+  width: 100%;
+  min-height: 100vh;
+  position: relative;
+}
+</style>
diff --git a/uno.config.ts b/uno.config.ts
index 47fb5a9..734a5e8 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -6,9 +6,8 @@ import {
 
 export default defineConfig({
     shortcuts: [
-        ['wallet-dock-width', 'fixed inset-x-0 w-full max-w-[426px] mx-auto left-0 right-0'],
-        /* z-index زیر منو (5000)؛ fixed تا با اسکرول جابه‌جا نشود */
-        ['app-dock-add-bar', 'wallet-dock-width !fixed bottom-[var(--app-bottom-chrome-height)] z-[var(--app-z-wallet-add-bar)] h-[var(--app-add-card-height)] flex items-center justify-center gap-1 rounded-t-3xl bg-[#FBFBFC] shadow-[0_1px_26px_11px_rgba(0,0,0,0.1)] cursor-pointer'],
+        ['wallet-dock-width', 'fixed inset-x-0 w-full max-w-[426px] left-0 right-0'],
+        ['app-dock-add-bar', 'wallet-dock-width !fixed bottom-[var(--app-bottom-chrome-height)] z-[var(--app-z-wallet-add-bar)] h-[var(--app-add-card-height)] flex items-center justify-center gap-1 rounded-t-3xl bg-[#FBFBFC] shadow-[0_1px_26px_11px_rgba(0,0,0,0.1)] cursor-pointer box-border'],
         ['wallet-add-card-bar', 'app-dock-add-bar'],
         ['wallet-card-slider', 'wallet-dock-width !fixed bottom-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)-var(--wallet-card-dock-overlap))] z-[var(--app-z-wallet-dock)] px-3 touch-none flex flex-col justify-end overflow-visible'],
     ],

From b364a82892ff80f2b9a2592e630369f8c2f4df7f Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Sun, 14 Jun 2026 10:34:08 +0330
Subject: [PATCH 2/3] Update auto-generated component type declarations after
 layout refactor.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components.d.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components.d.ts b/components.d.ts
index 1273ec5..ef35dfd 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -14,13 +14,16 @@ declare module 'vue' {
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASlider: typeof import('ant-design-vue/es')['Slider']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     BaseDatePicker: typeof import('./src/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue')['default']
     Basic: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/basic.vue')['default']
@@ -66,5 +69,6 @@ declare module 'vue' {
     TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanField: typeof import('vant/es')['Field']
   }
 }

From f0c1bb6c51c49547755eb252e88914c0fe7cbde1 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Mon, 15 Jun 2026 11:01:57 +0330
Subject: [PATCH 3/3] Show boursecu assets per product from wallet API and
 scale day range for maftol.

Fix rules paragraph alignment so Persian text does not stretch with justify.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/utils/productAssets.ts                    | 132 ++++++++++++++++++
 .../base/home/components/AssetsSection.vue    |  78 ++++++++---
 src/views/base/home/components/PriceStats.vue |  20 ++-
 .../base/home/composables/usePriceChart.ts    |  22 ++-
 .../components/DesktopAssetsMetrics.vue       |  19 ++-
 .../desktop/components/DesktopPriceRange.vue  |  20 ++-
 .../layouts/sections/AssetsSectionBlock.vue   |   1 +
 .../layouts/sections/PriceStatsSection.vue    |  10 +-
 .../rules/components/RulesContentPanel.vue    |   2 +-
 .../rules/desktop/styles/desktop-rules.less   |   2 +-
 .../base/rules/mobile/MobileRulesView.vue     |   2 +-
 11 files changed, 277 insertions(+), 31 deletions(-)

diff --git a/src/utils/productAssets.ts b/src/utils/productAssets.ts
index dbf9a88..346fdf6 100644
--- a/src/utils/productAssets.ts
+++ b/src/utils/productAssets.ts
@@ -47,6 +47,138 @@ export function getTotalMetalLabel(metalId: number): string {
   return `کل دارایی ${getMetalLabel(metalId)}`
 }
 
+/** boursecu home — ترتیب نمایش: مس، طلا، سایر فلزها */
+export function resolveBoursecuAssetMetalTotals(
+  metalTotals: WalletMetalTotal[]
+): WalletMetalTotal[] {
+  if (!metalTotals.length) {
+    return []
+  }
+
+  const ordered: WalletMetalTotal[] = []
+  const copper = metalTotals.find((metal) => metal.metal_id === METAL_COPPER)
+  const gold = metalTotals.find((metal) => metal.metal_id === METAL_GOLD)
+
+  if (copper) {
+    ordered.push(copper)
+  }
+  if (gold) {
+    ordered.push(gold)
+  }
+
+  for (const metal of metalTotals) {
+    if (!ordered.some((item) => item.metal_id === metal.metal_id)) {
+      ordered.push(metal)
+    }
+  }
+
+  return ordered
+}
+
+export function resolveMetalAssetsDisplayLabel(
+  metal: WalletMetalTotal,
+  isBoursecuLayout: boolean
+): string {
+  if (!isBoursecuLayout) {
+    return metal.label
+  }
+
+  switch (metal.metal_id) {
+    case METAL_COPPER:
+      return 'دارایی مس'
+    case METAL_GOLD:
+      return 'دارایی طلایی'
+    case METAL_SILVER:
+      return 'دارایی نقره'
+    default:
+      return metal.label
+  }
+}
+
+export type HomeAssetRowInfo = 'metal' | 'rial' | 'none'
+
+export interface HomeAssetRow {
+  id: string
+  label: string
+  value: string
+  metal?: WalletMetalTotal
+  info: HomeAssetRowInfo
+}
+
+function formatInventoryCardProductLabel(card: WalletInventoryCard): string {
+  return `دارایی ${card.title}`
+}
+
+function findMetalTotalById(metalTotals: WalletMetalTotal[], metalId: number) {
+  return metalTotals.find((metal) => metal.metal_id === metalId)
+}
+
+/** boursecu home — هر محصول / فلز / ریال از customer/wallet/assets جدا نمایش داده می‌شود */
+export function buildBoursecuHomeAssetRows(
+  summary: {
+    inventory_cards?: WalletInventoryCard[]
+    count_products?: WalletInventoryCard[]
+    metal_totals?: WalletMetalTotal[]
+    total_rial_value?: number
+  } | null | undefined
+): HomeAssetRow[] {
+  if (!summary) {
+    return []
+  }
+
+  const rows: HomeAssetRow[] = []
+  const metalTotals = summary.metal_totals ?? []
+  const inventoryCards = summary.inventory_cards ?? []
+  const countProducts = summary.count_products ?? []
+
+  for (const card of inventoryCards) {
+    if (card.display_type === 'count') {
+      continue
+    }
+
+    rows.push({
+      id: `inventory-${card.product_id}`,
+      label: formatInventoryCardProductLabel(card),
+      value: formatInventoryCardValue(card),
+      metal: findMetalTotalById(metalTotals, card.metal_id),
+      info: 'metal',
+    })
+  }
+
+  for (const metal of metalTotals) {
+    if (metal.metal_id === METAL_COPPER) {
+      continue
+    }
+
+    rows.push({
+      id: `metal-${metal.metal_id}`,
+      label: resolveMetalAssetsDisplayLabel(metal, true),
+      value: `${Number(metal.total_weight ?? 0)}${metal.unit ?? ''}`,
+      metal,
+      info: 'metal',
+    })
+  }
+
+  for (const card of countProducts) {
+    rows.push({
+      id: `count-${card.product_id}`,
+      label: formatInventoryCardProductLabel(card),
+      value: formatInventoryCardValue(card),
+      metal: findMetalTotalById(metalTotals, card.metal_id),
+      info: 'metal',
+    })
+  }
+
+  rows.push({
+    id: 'rial-total',
+    label: 'دارایی ریالی',
+    value: `${formatRialNumber(summary.total_rial_value ?? 0)} ریال`,
+    info: 'rial',
+  })
+
+  return rows
+}
+
 export function sumInventoryCardsWeight(
   cards: Array<{ metal_id?: number; quantity?: number }>,
   metalId: number
diff --git a/src/views/base/home/components/AssetsSection.vue b/src/views/base/home/components/AssetsSection.vue
index 4da29b9..166181e 100644
--- a/src/views/base/home/components/AssetsSection.vue
+++ b/src/views/base/home/components/AssetsSection.vue
@@ -1,14 +1,34 @@
 <template>
   <div :class="plain ? 'py-2' : 'bg-primary rounded-lg p-2 py-3 mt-2'">
     <div
-      v-if="meta?.has_count_based_products"
+      v-if="!boursecuLayout && meta?.has_count_based_products"
       :class="rowClass"
       class="flex justify-center w-full z-20"
     >
       محصولات:
       <div class="text-l mr-2 font-bold">{{ countBasedInventory }} عدد</div>
     </div>
-    <template v-if="meta?.single_metal && primaryMetalTotal">
+
+    <template v-if="boursecuAssetRows.length">
+      <div
+        v-for="(row, index) in boursecuAssetRows"
+        :key="row.id"
+        :class="[rowClass, index > 0 ? 'mt-2' : '']"
+        class="flex justify-center w-full z-20"
+      >
+        {{ row.label }}:
+        <div class="text-l mr-2 font-bold">{{ row.value }}</div>
+        <BasicIcon
+          v-if="row.info !== 'none'"
+          icon="vuesax-linear:info-circle"
+          size="18"
+          :color="iconColor"
+          @click="handleRowInfo(row)"
+        />
+      </div>
+    </template>
+
+    <template v-else-if="meta?.single_metal && primaryMetalTotal">
       <div :class="[rowClass, meta?.has_count_based_products ? 'mt-2' : '']" class="flex justify-center w-full z-20">
         {{ primaryMetalTotal.label }}:
         <div class="text-l mr-2 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
@@ -20,7 +40,8 @@
         />
       </div>
     </template>
-    <template v-else>
+
+    <template v-else-if="!boursecuLayout">
       <div
         v-for="(metal, index) in metalTotals"
         :key="metal.metal_id"
@@ -37,17 +58,18 @@
           @click="$emit('openGoldModal', metal)"
         />
       </div>
+
+      <div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
+        دارایی ریالی:
+        <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(totalRialValue) }} ریال</div>
+        <BasicIcon
+          icon="vuesax-linear:info-circle"
+          size="18"
+          :color="iconColor"
+          @click="$emit('openRialModal')"
+        />
+      </div>
     </template>
-    <div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
-      دارایی ریالی:
-      <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(totalRialValue) }} ریال</div>
-      <BasicIcon
-        icon="vuesax-linear:info-circle"
-        size="18"
-        :color="iconColor"
-        @click="$emit('openRialModal')"
-      />
-    </div>
   </div>
 </template>
 
@@ -57,29 +79,36 @@ import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
-import { resolveSummaryMetalWeight } from '@/utils/productAssets'
+import {
+  buildBoursecuHomeAssetRows,
+  resolveSummaryMetalWeight,
+  type HomeAssetRow,
+} from '@/utils/productAssets'
 
 const props = withDefaults(
   defineProps<{
     plain?: boolean
+    boursecuLayout?: boolean
   }>(),
-  { plain: false }
+  { plain: false, boursecuLayout: false }
 )
 
-/** Display-only — wallet assets are loaded once in useHomePageData.initHomePageData() */
-const { assetsSummary } = useWalletAssets()
-
-defineEmits<{
+const emit = defineEmits<{
   openGoldModal: [metal: WalletMetalTotal]
   openRialModal: []
 }>()
 
+const { assetsSummary } = useWalletAssets()
+
 const rowClass = computed(() => (props.plain ? 'text-primary' : 'text-tertiary'))
 const iconColor = computed(() => (props.plain ? 'primary' : 'tertiary'))
 
 const meta = computed(() => assetsSummary.value?.meta)
 const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
 const primaryMetalTotal = computed(() => metalTotals.value[0])
+const boursecuAssetRows = computed(() =>
+  props.boursecuLayout ? buildBoursecuHomeAssetRows(assetsSummary.value) : []
+)
 const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
 const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
 const countBasedInventory = computed(() =>
@@ -89,4 +118,15 @@ const countBasedInventory = computed(() =>
 function formatMetalTotal(metal: WalletMetalTotal) {
   return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
 }
+
+function handleRowInfo(row: HomeAssetRow) {
+  if (row.info === 'rial') {
+    emit('openRialModal')
+    return
+  }
+
+  if (row.metal) {
+    emit('openGoldModal', row.metal)
+  }
+}
 </script>
diff --git a/src/views/base/home/components/PriceStats.vue b/src/views/base/home/components/PriceStats.vue
index 5fedcd8..2862caa 100644
--- a/src/views/base/home/components/PriceStats.vue
+++ b/src/views/base/home/components/PriceStats.vue
@@ -32,21 +32,35 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getTradeBuyPrice, getTradeSellPrice } from '@/utils/price'
 import { usePriceWithoutType } from '../../../../utils/usePrice'
+import type { ChartMetalType } from '../composables/usePriceChart'
+import { resolveMetalDayRangePrices } from '../composables/usePriceChart'
 
 const props = withDefaults(
   defineProps<{
     price: any
     layout?: 'default' | 'boursecu'
     variant?: 'mobile' | 'desktop'
+    selectedMetal?: ChartMetalType
+    maftolRatio?: number
   }>(),
   {
     layout: 'default',
     variant: 'mobile',
+    selectedMetal: 'katod',
+    maftolRatio: 0,
   }
 )
 
-const highPrice = computed(() => props.price?.up?.buy ?? getTradeBuyPrice(props.price))
-const lowPrice = computed(() => props.price?.up?.sell ?? getTradeSellPrice(props.price))
+const rangePrices = computed(() =>
+  resolveMetalDayRangePrices({
+    price: props.price,
+    metal: props.selectedMetal,
+    isBoursecuLayout: props.layout === 'boursecu',
+    maftolRatio: props.maftolRatio,
+  })
+)
+
+const highPrice = computed(() => rangePrices.value.high)
+const lowPrice = computed(() => rangePrices.value.low)
 </script>
diff --git a/src/views/base/home/composables/usePriceChart.ts b/src/views/base/home/composables/usePriceChart.ts
index 1982ffe..2208e08 100644
--- a/src/views/base/home/composables/usePriceChart.ts
+++ b/src/views/base/home/composables/usePriceChart.ts
@@ -5,7 +5,7 @@ import { getProductsCatalog } from '@/composables/useProductsCatalog'
 import { getHomeLayoutId } from '../layouts/registry'
 import { getProductBuyPrice, resolvePriceOffsetRatio } from '@/utils/productPrice'
 import { isKatodMesGroup, isMaftolMesGroup } from '@/utils/productDealMethod'
-import { getTradeBuyPrice, lastPrice } from '@/utils/price'
+import { getTradeBuyPrice, getTradeSellPrice, lastPrice } from '@/utils/price'
 
 export type ChartMetalType = 'katod' | 'maftol'
 
@@ -48,6 +48,26 @@ function applyChartRatio(basePrice: number, ratio: number) {
   return Math.round(basePrice + basePrice * ratio)
 }
 
+/** بالاترین/پایین‌ترین امروز — برای boursecu با نسبت مفتول نسبت به کاتد */
+export function resolveMetalDayRangePrices(options: {
+  price: { up?: { buy?: number; sell?: number }; buy?: number; sell?: number; price_last?: number } | null | undefined
+  metal: ChartMetalType
+  isBoursecuLayout: boolean
+  maftolRatio: number
+}) {
+  const baseHigh = options.price?.up?.buy ?? getTradeBuyPrice(options.price as Parameters<typeof getTradeBuyPrice>[0])
+  const baseLow = options.price?.up?.sell ?? getTradeSellPrice(options.price as Parameters<typeof getTradeSellPrice>[0])
+
+  if (!options.isBoursecuLayout || options.metal === 'katod') {
+    return { high: baseHigh, low: baseLow }
+  }
+
+  return {
+    high: applyChartRatio(baseHigh, options.maftolRatio),
+    low: applyChartRatio(baseLow, options.maftolRatio),
+  }
+}
+
 function deriveMaftolChartRatio(maftolProduct?: Product, katodProduct?: Product) {
   const offsetRatio = resolvePriceOffsetRatio(maftolProduct?.price_offset_percent)
   if (offsetRatio) {
diff --git a/src/views/base/home/desktop/components/DesktopAssetsMetrics.vue b/src/views/base/home/desktop/components/DesktopAssetsMetrics.vue
index 2096e42..aa885cd 100644
--- a/src/views/base/home/desktop/components/DesktopAssetsMetrics.vue
+++ b/src/views/base/home/desktop/components/DesktopAssetsMetrics.vue
@@ -4,7 +4,8 @@ import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import { usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
-import { resolveSummaryMetalWeight } from '@/utils/productAssets'
+import { buildBoursecuHomeAssetRows, resolveSummaryMetalWeight } from '@/utils/productAssets'
+import { useHomePageContext } from '../../composables/useHomePage'
 
 const emit = defineEmits<{
   openGoldModal: [metal: WalletMetalTotal]
@@ -12,6 +13,8 @@ const emit = defineEmits<{
 }>()
 
 const { assetsSummary } = useWalletAssets()
+const ctx = useHomePageContext()
+const isBoursecuLayout = computed(() => ctx.isBoursecuHomeLayout.value)
 
 const meta = computed(() => assetsSummary.value?.meta)
 const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
@@ -41,6 +44,20 @@ const metrics = computed<MetricItem[]>(() => {
     })
   }
 
+  if (isBoursecuLayout.value) {
+    buildBoursecuHomeAssetRows(assetsSummary.value).forEach((row) => {
+      items.push({
+        id: row.id,
+        label: row.label,
+        value: row.value,
+        metal: row.metal,
+        showInfo: row.info !== 'none',
+        onInfo: row.info === 'rial' ? 'rial' : 'gold',
+      })
+    })
+    return items
+  }
+
   if (meta.value?.single_metal && metalTotals.value[0]) {
     const metal = metalTotals.value[0]
     items.push({
diff --git a/src/views/base/home/desktop/components/DesktopPriceRange.vue b/src/views/base/home/desktop/components/DesktopPriceRange.vue
index a9bcb3b..1f80fb1 100644
--- a/src/views/base/home/desktop/components/DesktopPriceRange.vue
+++ b/src/views/base/home/desktop/components/DesktopPriceRange.vue
@@ -1,10 +1,24 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { getTradeBuyPrice, getTradeSellPrice, price } from '@/utils/price'
+import { price } from '@/utils/price'
 import { usePriceWithoutType } from '@/utils/usePrice'
+import { getHomeLayoutId } from '../../layouts/registry'
+import { resolveMetalDayRangePrices, usePriceChart } from '../../composables/usePriceChart'
 
-const highPrice = computed(() => price.value?.up?.buy ?? getTradeBuyPrice(price.value))
-const lowPrice = computed(() => price.value?.up?.sell ?? getTradeSellPrice(price.value))
+const { selectedChartMetal, maftolChartRatio } = usePriceChart()
+const isBoursecuLayout = computed(() => getHomeLayoutId() === 'boursecu')
+
+const rangePrices = computed(() =>
+  resolveMetalDayRangePrices({
+    price: price.value,
+    metal: selectedChartMetal.value,
+    isBoursecuLayout: isBoursecuLayout.value,
+    maftolRatio: maftolChartRatio.value,
+  })
+)
+
+const highPrice = computed(() => rangePrices.value.high)
+const lowPrice = computed(() => rangePrices.value.low)
 </script>
 
 <template>
diff --git a/src/views/base/home/layouts/sections/AssetsSectionBlock.vue b/src/views/base/home/layouts/sections/AssetsSectionBlock.vue
index afc9610..62f6b91 100644
--- a/src/views/base/home/layouts/sections/AssetsSectionBlock.vue
+++ b/src/views/base/home/layouts/sections/AssetsSectionBlock.vue
@@ -10,6 +10,7 @@ const isPlainAssets = computed(() => ctx.isBoursecuHomeLayout.value)
   <AssetsSection
     v-if="!ctx.isGaroosi.value"
     :plain="isPlainAssets"
+    :boursecu-layout="isPlainAssets"
     @open-gold-modal="ctx.openGoldModal"
     @open-rial-modal="ctx.openRialModal"
   />
diff --git a/src/views/base/home/layouts/sections/PriceStatsSection.vue b/src/views/base/home/layouts/sections/PriceStatsSection.vue
index 2b194c6..5d17187 100644
--- a/src/views/base/home/layouts/sections/PriceStatsSection.vue
+++ b/src/views/base/home/layouts/sections/PriceStatsSection.vue
@@ -3,11 +3,19 @@ import { computed, inject } from 'vue'
 import PriceStats from '../../components/PriceStats.vue'
 import { price } from '@/utils/price'
 import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+import { usePriceChart } from '../../composables/usePriceChart'
 
 const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const { maftolChartRatio } = usePriceChart()
 const layout = computed(() => (ctx.isBoursecuHomeLayout.value ? 'boursecu' : 'default'))
+const selectedMetal = computed(() => ctx.selectedChartMetal.value)
 </script>
 
 <template>
-  <PriceStats :price="price" :layout="layout" />
+  <PriceStats
+    :price="price"
+    :layout="layout"
+    :selected-metal="selectedMetal"
+    :maftol-ratio="maftolChartRatio"
+  />
 </template>
diff --git a/src/views/base/rules/components/RulesContentPanel.vue b/src/views/base/rules/components/RulesContentPanel.vue
index a101fd0..c12d6ce 100644
--- a/src/views/base/rules/components/RulesContentPanel.vue
+++ b/src/views/base/rules/components/RulesContentPanel.vue
@@ -55,7 +55,7 @@ const { rulesTitle, rulesBlocks } = useRulesPageContext()
 
 .rules-paragraph {
   margin: 0 0 1rem;
-  text-align: justify;
+  text-align: right;
   line-height: 1.9;
   word-break: normal;
   overflow-wrap: break-word;
diff --git a/src/views/base/rules/desktop/styles/desktop-rules.less b/src/views/base/rules/desktop/styles/desktop-rules.less
index 9487519..157dde9 100644
--- a/src/views/base/rules/desktop/styles/desktop-rules.less
+++ b/src/views/base/rules/desktop/styles/desktop-rules.less
@@ -151,7 +151,7 @@
     margin: 0 0 14px;
     font-size: 14px;
     line-height: 1.9;
-    text-align: justify;
+    text-align: right;
     color: inherit;
     word-break: normal;
     overflow-wrap: break-word;
diff --git a/src/views/base/rules/mobile/MobileRulesView.vue b/src/views/base/rules/mobile/MobileRulesView.vue
index 82a9ee6..698cd14 100644
--- a/src/views/base/rules/mobile/MobileRulesView.vue
+++ b/src/views/base/rules/mobile/MobileRulesView.vue
@@ -10,7 +10,7 @@
       <div>
         <img :src="img" alt="" class="mt-2 w-full absolute bottom-0" />
       </div>
-      <div class="text-justify text-base z-200000 relative">
+      <div class="text-base z-200000 relative">
         <div class="px-10">
           <div class="overflow-y-auto h-60vh pb-20 border-primary">
             <RulesContentPanel variant="mobile" />