From 2501eedfb34bd08c89c347a9fc5a487cb9a6b6b0 Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Thu, 13 Aug 2026 20:41:35 +0330
Subject: [PATCH 01/10] feat(ui): add cn() helper with tailwind-merge config
 for custom utilities

---
 src/common/utils/cn.ts | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/common/utils/cn.ts

diff --git a/src/common/utils/cn.ts b/src/common/utils/cn.ts
new file mode 100644
index 00000000..d555533d
--- /dev/null
+++ b/src/common/utils/cn.ts
@@ -0,0 +1,37 @@
+import { type ClassValue, clsx } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+const twMerge = extendTailwindMerge<'wg-backdrop'>({
+	extend: {
+		classGroups: {
+			'wg-backdrop': ['bg-glass'],
+
+			'bg-color': ['bg-widget', 'bg-content', 'bg-raised'],
+			'text-color': ['text-strong', 'text-content', 'text-muted', 'text-subtle'],
+			'border-color': ['border-content', 'border-strong'],
+
+			rounded: ['rounded-widget', 'rounded-card'],
+			shadow: ['elevation-sm', 'elevation', 'elevation-lg'],
+			transition: ['transition-ui'],
+			'outline-style': ['focus-ring'],
+			z: [
+				'z-base',
+				'z-raised',
+				'z-sticky',
+				'z-drag',
+				'z-nav',
+				'z-backdrop',
+				'z-sheet',
+				'z-modal',
+				'z-popover',
+				'z-tooltip',
+				'z-toast',
+				'z-pet',
+			],
+		},
+	},
+})
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs))
+}

From 28ad959f514b2d55d990ee7e727c09a18b0cbfd1 Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Thu, 13 Aug 2026 20:41:40 +0330
Subject: [PATCH 02/10] chore: ignore local .claude directory

Local Claude Code session config shouldn't be tracked.
---
 .gitignore | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index f9b65d12..201c15df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,4 +31,5 @@ dev
 local_output
 diff.txt
 
-docs/*
\ No newline at end of file
+docs/*
+.claude
\ No newline at end of file

From aeeead33d795ea7c74152e278a129195278448a8 Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Sat, 15 Aug 2026 17:38:00 +0330
Subject: [PATCH 03/10] fix(deps): declare clsx as an explicit dependency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

cn.ts imports clsx directly, but it was never added to package.json —
it only worked locally because it happened to already be present in
node_modules from an unrelated install. A clean install (e.g. CI)
can't resolve it. Adding it explicitly and regenerating the lockfile.
---
 bun.lock     | 5 ++++-
 package.json | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/bun.lock b/bun.lock
index 6a08ae6c..3afa5194 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,6 +13,7 @@
         "axios": "1.18.0",
         "canvas-confetti": "1.9.4",
         "chart.js": "4.5.1",
+        "clsx": "2.1.1",
         "framer-motion": "12.40.0",
         "jalali-moment": "3.3.11",
         "moment": "2.30.1",
@@ -24,7 +25,7 @@
         "react-chartjs-2": "5.3.1",
         "react-colorful": "5.7.0",
         "react-dom": "19.2.7",
-        "react-easy-crop": "^6.2.2",
+        "react-easy-crop": "6.2.2",
         "react-hot-toast": "2.6.0",
         "react-icons": "5.6.0",
         "react-joyride": "3.1.0",
@@ -539,6 +540,8 @@
 
     "clone": ["clone@1.0.4", "", {}, "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg=="],
 
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
     "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
 
     "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
diff --git a/package.json b/package.json
index 525a8b01..4bcf9e79 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "axios": "1.18.0",
     "canvas-confetti": "1.9.4",
     "chart.js": "4.5.1",
+    "clsx": "2.1.1",
     "framer-motion": "12.40.0",
     "jalali-moment": "3.3.11",
     "moment": "2.30.1",

From 0fe06d3f302de35ac80c1f16be09eb39f0f7d03d Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Fri, 31 Jul 2026 03:29:51 +0330
Subject: [PATCH 04/10] refactor(ui): move primitives into components/ui with
 cva variants and tw-merge

---
 src/components/auth/auth-required-modal.tsx   |  11 +-
 src/components/auth/require-auth.tsx          |  10 +-
 src/components/auth/require-verification.tsx  |   2 +-
 src/components/badges/new.badge.tsx           |  10 --
 src/components/blur-mode/blur-mode.button.tsx |   4 +-
 src/components/button/button.tsx              |  11 +-
 src/components/chip.component.tsx             |  25 ----
 src/components/date-picker/index.ts           |   1 -
 src/components/dropdown/index.ts              |   2 -
 src/components/extension-installed-modal.tsx  |  14 ++-
 src/components/filter-tooltip/index.ts        |   5 -
 src/components/loading/icon-loading.tsx       |  25 ----
 src/components/pagination/index.ts            |   2 -
 src/components/section-panel.tsx              |  60 ----------
 src/components/text-input.tsx                 |   7 ++
 src/components/toggle-switch.component.tsx    |  38 ------
 .../avatar/avatar.tsx}                        |  25 ++--
 src/components/ui/avatar/avatar.variants.ts   |  21 ++++
 src/components/ui/badge/badge.tsx             |  14 +++
 .../{ => ui}/bottom-sheet/bottom-sheet.tsx    |   0
 src/components/ui/button/button.tsx           |  56 +++++++++
 src/components/ui/button/button.variants.ts   |  74 ++++++++++++
 .../checkbox/checkbox-description.tsx}        |   4 +-
 src/components/{ => ui/checkbox}/checkbox.tsx |   8 +-
 src/components/ui/chip/chip.tsx               |  28 +++++
 src/components/ui/chip/chip.variants.ts       |  33 +++++
 .../color-picker/color-picker.tsx}            |   7 +-
 .../context-menu/context-menu.tsx}            |   7 +-
 .../{ => ui}/date-picker/date-picker.tsx      |   8 +-
 src/components/{ => ui}/dropdown/dropdown.tsx |   7 +-
 .../{ => ui}/dropdown/use-dropdown.tsx        |   0
 .../filter-tooltip/filter-tooltip.tsx         |   4 +-
 src/components/ui/index.ts                    |  73 +++++++++++
 src/components/ui/input/input.tsx             | 113 ++++++++++++++++++
 src/components/ui/input/input.variants.ts     |  54 +++++++++
 .../{ => ui/item-selector}/item-selector.tsx  |   7 +-
 src/components/ui/loading/loading.tsx         |  25 ++++
 .../{ => ui}/modal/confirmation-modal.tsx     |  63 ++++------
 .../ui/modal/confirmation-modal.variants.ts   |  49 ++++++++
 src/components/{ => ui/modal}/modal.tsx       |  56 ++-------
 src/components/ui/modal/modal.variants.ts     |  65 ++++++++++
 .../offline-indicator}/offline-indicator.tsx  |   2 +-
 .../{ => ui}/pagination/pagination.tsx        |   8 +-
 src/components/{ => ui}/portal/portal.tsx     |   0
 .../ui/section-panel/section-panel.tsx        |  38 ++++++
 .../section-panel/section-panel.variants.ts   |  57 +++++++++
 .../selectbox.tsx => ui/select/select.tsx}    |   0
 .../{tab-navigation.tsx => ui/tabs/tabs.tsx}  |  35 +++---
 src/components/ui/tabs/tabs.variants.ts       |  63 ++++++++++
 src/components/ui/toggle/toggle.tsx           |  29 +++++
 src/components/ui/toggle/toggle.variants.ts   |  57 +++++++++
 .../{ => ui/tooltip}/clickable-tooltip.tsx    |   0
 .../{tool-tip.tsx => ui/tooltip/tooltip.tsx}  |   9 +-
 src/components/update-release-notes-modal.tsx |   2 +-
 src/components/updater/updater.tsx            |   4 +-
 src/components/user/user-card-portal.tsx      |   3 +-
 src/components/user/user-card.tsx             |  12 +-
 src/components/welcome-wizard.tsx             |   6 +-
 src/layouts/bookmark/bookmark-grid.tsx        |   2 +-
 .../components/bookmark-empty-slot.tsx        |   2 +-
 .../bookmark/components/bookmark-folder.tsx   |   4 +-
 .../components/bookmark-icon.picker.tsx       |   2 +-
 .../components/bookmark-suggestions.tsx       |   2 +-
 .../bookmark/components/folder-header.tsx     |   4 +-
 .../bookmark/components/folder-path.tsx       |   2 +-
 .../components/modal/add-bookmark.modal.tsx   |   4 +-
 .../components/modal/advanced.modal.tsx       |  16 +--
 .../modal/bookmark-context-menu.tsx           |   2 +-
 .../components/modal/edit-bookmark.modal.tsx  |   4 +-
 .../modal/import-browser-bookmarks.modal.tsx  |   2 +-
 src/layouts/bookmark/components/shared.tsx    |   2 +-
 .../explorer/components/content-site.tsx      |   2 +-
 src/layouts/friends/components/activities.tsx |   2 +-
 .../activity-card/activity-card.tsx           |   4 +-
 .../activity-card/empty-activity-card.tsx     |   2 +-
 .../manage-activity.bottom-sheet.tsx          |  10 +-
 .../components/add-friend.bottom-sheet.tsx    |   8 +-
 .../buttons/friend-requests.button.tsx        |   4 +-
 .../components/friend-item/friend.item.tsx    |   2 +-
 .../friend-requests.bottom-sheet.tsx          |   2 +-
 .../friends/components/friends-list.tsx       |   2 +-
 .../components/select-friend.layout.tsx       |   2 +-
 src/layouts/friends/friends.tsx               |   2 +-
 .../coin-package-purchase-modal.tsx           |   2 +-
 src/layouts/market/market-coins/index.tsx     |   2 +-
 src/layouts/market/market-container.tsx       |   2 +-
 src/layouts/market/market-wallpaper/index.tsx |   2 +-
 .../components/market-item-purchase-modal.tsx |   2 +-
 src/layouts/market/other-items/index.tsx      |   4 +-
 .../components/card/mini-app-card.tsx         |   2 +-
 src/layouts/mini-apps/mini-app-runner.tsx     |   2 +-
 src/layouts/mini-apps/mini-apps.layout.tsx    |   2 +-
 .../navbar/components/settings-dropdown.tsx   |   2 +-
 .../navbar/friends-list/friends.navbar.tsx    |   4 +-
 src/layouts/navbar/market/market-button.tsx   |   2 +-
 src/layouts/navbar/navbar.layout.tsx          |   5 +-
 src/layouts/navbar/profile/profile.tsx        |   4 +-
 .../browser-bookmark/bookmark-popover.tsx     |   2 +-
 .../browser-bookmark/browser-bookmark.tsx     |   4 +-
 src/layouts/search/history.portal.tsx         |   2 +-
 .../search/image/image-search.button.tsx      |   2 +-
 .../search/image/image-search.portal.tsx      |   2 +-
 .../search/select-engine/engine-selector.tsx  |   2 +-
 .../suggestion/autocomplete-consent.modal.tsx |   2 +-
 .../search/voice/voice-search.button.tsx      |   2 +-
 .../search/voice/voice-search.portal.tsx      |   2 +-
 src/layouts/setting/setting-modal.tsx         |   2 +-
 .../setting/tabs/about-us/about-us.tsx        |   4 +-
 .../auth-form/components/input-text-error.tsx |   4 +-
 .../components/login-google.button.tsx        |   2 +-
 .../account-verification-status.tsx           |   2 +-
 .../account/components/interests-selector.tsx |   4 +-
 .../components/modals/add-email.modal.tsx     |   4 +-
 .../components/modals/add-phone.modal.tsx     |   4 +-
 .../modals/avatar/avatar-crop.modal.tsx       |   2 +-
 .../components/modals/avatar/edit.avatar.tsx  |   6 +-
 .../components/modals/edit-birthday.tsx       |   4 +-
 .../account/components/modals/edit-city.tsx   |   2 +-
 .../account/components/modals/edit-email.tsx  |   2 +-
 .../account/components/modals/edit-gender.tsx |   4 +-
 .../components/modals/edit-interests.tsx      |   4 +-
 .../account/components/modals/edit-name.tsx   |   4 +-
 .../components/modals/edit-occupation.tsx     |   4 +-
 .../components/modals/edit-username.tsx       |   4 +-
 .../components/occupation-selector.tsx        |   4 +-
 .../components/profile-date-picker.tsx        |   2 +-
 .../account/components/profile-display.tsx    |   6 +-
 .../tabs/account/components/user-coin.tsx     |   2 +-
 .../tabs/connection/connections-tab.tsx       |   2 +-
 .../components/referral-code-section.tsx      |   2 +-
 .../account/tabs/rewards/components/tasks.tsx |   2 +-
 .../tabs/account/tabs/rewards/rewards-tab.tsx |   4 +-
 .../components/connection-modal.tsx           |   2 +-
 .../tabs/user-profile/user-profile.tsx        |   6 +-
 .../tabs/account/user-account.modal.tsx       |   2 +-
 .../components/browser-title-selector.tsx     |   4 +-
 .../components/content-alignment-settings.tsx |   4 +-
 .../appearance/components/font-selector.tsx   |   4 +-
 .../appearance/components/theme-selector.tsx  |   4 +-
 .../appearance/components/ui-selector.tsx     |   4 +-
 .../tabs/general/components/select-city.tsx   |   6 +-
 .../general/components/timezone-settings.tsx  |   8 +-
 src/layouts/setting/tabs/general/general.tsx  |   4 +-
 .../components/search-autocomplete.switch.tsx |   2 +-
 .../setting/tabs/privacy/privacy-settings.tsx |   4 +-
 .../setting/tabs/shortcuts/shortcuts.tsx      |   2 +-
 .../components/coin-purchase-modal.tsx        |   2 +-
 .../components/upload-area.component.tsx      |   2 +-
 .../components/wallpaper-sidebar.tsx          |   3 +-
 .../wallpaper-item/wallpaper-item.tsx         |  14 +--
 src/layouts/simplify/tools-simplify.tsx       |   4 +-
 .../pets/setting/pet-setting.tsx              |   4 +-
 .../widgetify-card/profile-progress.tsx       |   2 +-
 .../manage-widgets/manage-widgets.tsx         |   6 +-
 .../widget-settings-modal.tsx                 |   2 +-
 .../calendar/components/calendar-grid.tsx     |   2 +-
 .../widgets/calendar/components/day/day.tsx   |   4 +-
 .../components/day/tool-tip-content.tsx       |   2 +-
 .../google-calendar/google-event.item.tsx     |   2 +-
 .../combo-widget/combo-widget.layout.tsx      |   2 +-
 .../components/habit-calendar-heatmap.tsx     |   2 +-
 .../habit/components/habit-detail.modal.tsx   |   6 +-
 .../habit/components/habit-form.modal.tsx     |   6 +-
 .../habit/components/item/habit.item.tsx      |   4 +-
 src/layouts/widgets/habit/habits.layout.tsx   |   4 +-
 .../network/components/network-ip-card.tsx    |   2 +-
 .../network/components/network-ping-card.tsx  |  10 +-
 .../widgets/network/network.layout.tsx        |  10 +-
 src/layouts/widgets/news/rss-feed-setting.tsx |   6 +-
 .../widgets/notes/components/note-editor.tsx  |   4 +-
 .../notes/components/note-navigation.tsx      |   4 +-
 .../todos/components/friend-item.todo.tsx     |   4 +-
 .../todos/components/priority.dropdown.tsx    |   2 +-
 .../todos/components/select-friends.todo.tsx  |   2 +-
 .../widgets/todos/expandable-todo-input.tsx   |   8 +-
 src/layouts/widgets/todos/todo.item.tsx       |  14 +--
 src/layouts/widgets/todos/todos.tsx           |   6 +-
 .../tools/currency/currency-converter.tsx     |   2 +-
 .../components/request-notification-modal.tsx |   2 +-
 .../pomodoro/components/settings-panel.tsx    |   6 +-
 .../pomodoro/components/timer-display.tsx     |   4 +-
 .../widgets/tools/pomodoro/pomodoro-timer.tsx |   6 +-
 .../pomodoro/top-users/top-user-item.tsx      |   2 +-
 .../tools/pomodoro/top-users/top-users.tsx    |   2 +-
 src/layouts/widgets/tools/tools.layout.tsx    |   2 +-
 .../weather/current/current-box.weather.tsx   |   2 +-
 src/layouts/widgets/widget-container.tsx      |   2 +-
 .../wigi-arz/components/currency-box.tsx      |   6 +-
 .../wigi-arz/components/currency-modal.tsx    |   6 +-
 .../widgets/wigi-arz/wigi-arz-setting.tsx     |   6 +-
 .../wigi-pad/clock-display/clock-setting.tsx  |   4 +-
 .../clock-display/clocks/analog.clock.tsx     |   2 +-
 .../wigi-pad/date-display/date-setting.tsx    |   2 +-
 .../widgets/wigi-pad/wigi-pad-setting.tsx     |   2 +-
 src/layouts/widgets/yadkar/yadkar.tsx         |   2 +-
 src/pages/home/dialog/dialog.tsx              |   2 +-
 src/pages/home/home.page.tsx                  |   2 +-
 src/pages/root.tsx                            |  10 +-
 198 files changed, 1258 insertions(+), 603 deletions(-)
 delete mode 100644 src/components/badges/new.badge.tsx
 delete mode 100644 src/components/chip.component.tsx
 delete mode 100644 src/components/date-picker/index.ts
 delete mode 100644 src/components/dropdown/index.ts
 delete mode 100644 src/components/filter-tooltip/index.ts
 delete mode 100644 src/components/loading/icon-loading.tsx
 delete mode 100644 src/components/pagination/index.ts
 delete mode 100644 src/components/section-panel.tsx
 delete mode 100644 src/components/toggle-switch.component.tsx
 rename src/components/{avatar.component.tsx => ui/avatar/avatar.tsx} (70%)
 create mode 100644 src/components/ui/avatar/avatar.variants.ts
 create mode 100644 src/components/ui/badge/badge.tsx
 rename src/components/{ => ui}/bottom-sheet/bottom-sheet.tsx (100%)
 create mode 100644 src/components/ui/button/button.tsx
 create mode 100644 src/components/ui/button/button.variants.ts
 rename src/components/{checkbox-description.component.tsx => ui/checkbox/checkbox-description.tsx} (90%)
 rename src/components/{ => ui/checkbox}/checkbox.tsx (94%)
 create mode 100644 src/components/ui/chip/chip.tsx
 create mode 100644 src/components/ui/chip/chip.variants.ts
 rename src/components/{popover-color-picker.tsx => ui/color-picker/color-picker.tsx} (91%)
 rename src/components/{context-menu.component.tsx => ui/context-menu/context-menu.tsx} (79%)
 rename src/components/{ => ui}/date-picker/date-picker.tsx (97%)
 rename src/components/{ => ui}/dropdown/dropdown.tsx (93%)
 rename src/components/{ => ui}/dropdown/use-dropdown.tsx (100%)
 rename src/components/{ => ui}/filter-tooltip/filter-tooltip.tsx (95%)
 create mode 100644 src/components/ui/index.ts
 create mode 100644 src/components/ui/input/input.tsx
 create mode 100644 src/components/ui/input/input.variants.ts
 rename src/components/{ => ui/item-selector}/item-selector.tsx (89%)
 create mode 100644 src/components/ui/loading/loading.tsx
 rename src/components/{ => ui}/modal/confirmation-modal.tsx (63%)
 create mode 100644 src/components/ui/modal/confirmation-modal.variants.ts
 rename src/components/{ => ui/modal}/modal.tsx (68%)
 create mode 100644 src/components/ui/modal/modal.variants.ts
 rename src/components/{ => ui/offline-indicator}/offline-indicator.tsx (97%)
 rename src/components/{ => ui}/pagination/pagination.tsx (88%)
 rename src/components/{ => ui}/portal/portal.tsx (100%)
 create mode 100644 src/components/ui/section-panel/section-panel.tsx
 create mode 100644 src/components/ui/section-panel/section-panel.variants.ts
 rename src/components/{selectbox/selectbox.tsx => ui/select/select.tsx} (100%)
 rename src/components/{tab-navigation.tsx => ui/tabs/tabs.tsx} (54%)
 create mode 100644 src/components/ui/tabs/tabs.variants.ts
 create mode 100644 src/components/ui/toggle/toggle.tsx
 create mode 100644 src/components/ui/toggle/toggle.variants.ts
 rename src/components/{ => ui/tooltip}/clickable-tooltip.tsx (100%)
 rename src/components/{tool-tip.tsx => ui/tooltip/tooltip.tsx} (97%)

diff --git a/src/components/auth/auth-required-modal.tsx b/src/components/auth/auth-required-modal.tsx
index fbeced95..93c28766 100644
--- a/src/components/auth/auth-required-modal.tsx
+++ b/src/components/auth/auth-required-modal.tsx
@@ -1,6 +1,6 @@
 import { callEvent } from '@/common/utils/call-event'
-import Modal from '@/components/modal'
-import { Button } from '../button/button'
+import { Modal } from '@/components/ui'
+import { Button } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface AuthRequiredModalProps {
@@ -35,7 +35,7 @@ export function AuthRequiredModal({
 			closeOnBackdropClick={true}
 		>
 			<div className="flex flex-col items-center justify-between w-full text-center h-62">
-				<div className="relative flex items-center justify-center w-16 h-16 mt-8 rounded-full bg-blue-500/10">
+				<div className="relative flex items-center justify-center w-16 h-16 mt-8 rounded-full bg-primary/10">
 					<div
 						className="absolute inset-0 rounded-full bg-primary/5 animate-ping"
 						style={{ animationDuration: '2s' }}
@@ -52,7 +52,7 @@ export function AuthRequiredModal({
 					<Button
 						onClick={triggerAccountTabDisplay}
 						size="md"
-						isPrimary={true}
+						variant="primary"
 						className={`flex-1 border-none rounded-2xl text-xs w-full`}
 					>
 						{loginButtonText}
@@ -60,7 +60,8 @@ export function AuthRequiredModal({
 					<Button
 						onClick={onClose}
 						size="md"
-						className="w-32 border border-content text-content hover:bg-base-300/50 rounded-2xl"
+						variant="outline"
+						className="w-32 rounded-2xl"
 					>
 						{cancelButtonText}
 					</Button>
diff --git a/src/components/auth/require-auth.tsx b/src/components/auth/require-auth.tsx
index 20b0b95f..e43ce02d 100644
--- a/src/components/auth/require-auth.tsx
+++ b/src/components/auth/require-auth.tsx
@@ -2,7 +2,7 @@ import { Motion as motion } from '@/common/motion'
 import type { ReactNode } from 'react'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
-import { Button } from '../button/button'
+import { Button } from '@/components/ui'
 
 interface RequireAuthProps {
 	children: ReactNode
@@ -49,8 +49,8 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP
 						<Button
 							onClick={handleAuthClick}
 							size="sm"
-							isPrimary={true}
-							className="btn mt-2 !w-fit px-6 border-none shadow-none text-white rounded-3xl transition-colors duration-300 ease-in-out"
+							variant="primary"
+							className="mt-2 w-fit px-6 border-none shadow-none rounded-3xl"
 						>
 							ورود به حساب
 						</Button>
@@ -76,8 +76,8 @@ export const RequireAuth = ({ children, fallback, mode = 'block' }: RequireAuthP
 				<Button
 					onClick={handleAuthClick}
 					size="sm"
-					isPrimary={true}
-					className="btn mt-2 !w-fit px-6 border-none shadow-none text-white rounded-3xl transition-colors duration-300 ease-in-out"
+					variant="primary"
+					className="mt-2 w-fit px-6 border-none shadow-none rounded-3xl"
 				>
 					ورود به حساب
 				</Button>
diff --git a/src/components/auth/require-verification.tsx b/src/components/auth/require-verification.tsx
index 2aae3ca1..8908fc0d 100644
--- a/src/components/auth/require-verification.tsx
+++ b/src/components/auth/require-verification.tsx
@@ -2,7 +2,7 @@ import { Motion as motion } from '@/common/motion'
 import type { ReactNode } from 'react'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'
-import { Button } from '../button/button'
+import { Button } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface RequireVerificationProps {
diff --git a/src/components/badges/new.badge.tsx b/src/components/badges/new.badge.tsx
deleted file mode 100644
index 7ff24ffa..00000000
--- a/src/components/badges/new.badge.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-interface Prop {
-	className: string
-}
-export function NewBadge({ className }: Prop) {
-	return (
-		<span
-			className={`absolute w-2 h-2 rounded-full ${className} bg-error animate-pulse ring-2 ring-error/20`}
-		></span>
-	)
-}
diff --git a/src/components/blur-mode/blur-mode.button.tsx b/src/components/blur-mode/blur-mode.button.tsx
index d31a4522..e8bd33da 100644
--- a/src/components/blur-mode/blur-mode.button.tsx
+++ b/src/components/blur-mode/blur-mode.button.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import { useGeneralSetting } from '@/context/general-setting.context'
-import Tooltip from '../tool-tip'
+import { Tooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
-import { ConfirmationModal } from '../modal/confirmation-modal'
+import { ConfirmationModal } from '@/components/ui'
 import Analytics from '@/analytics'
 
 export function BlurModeButton() {
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 5ac12d5d..b9e04e38 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -17,6 +17,15 @@ interface ButtonProps {
 	size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 	ref?: any
 }
+/**
+ * @deprecated Use `import { Button } from '@/components/ui'`.
+ *
+ * Not a re-export shim on purpose: the new Button drops daisyUI's `btn` base,
+ * which would make the `btn-*` modifiers that 16+ call sites pass in
+ * `className` inert (in daisyUI 5 they only set `--btn-color`, which nothing
+ * reads without `.btn`). Those buttons would silently render grey instead of
+ * red/transparent/full-width. Migrate call sites in reviewed batches instead.
+ */
 export function Button(prop: ButtonProps) {
 	const sizes: Record<string, string> = {
 		xs: 'btn-xs',
@@ -31,7 +40,7 @@ export function Button(prop: ButtonProps) {
 			type={prop.type || 'button'}
 			onClick={prop.onClick}
 			disabled={prop.disabled}
-			className={`btn cursor-pointer ${prop.fullWidth ? 'full-width' : ''} ${prop.className} ${prop.rounded ? `rounded-${prop.rounded}` : ''} ${prop.isPrimary ? 'btn-primary text-white' : ''} ${sizes[prop.size] || 'btn-md'} active:!translate-y-0`}
+			className={`btn cursor-pointer ${prop.fullWidth ? 'full-width' : ''} ${prop.className} ${prop.rounded ? `rounded-${prop.rounded}` : ''} ${prop.isPrimary ? 'btn-primary' : ''} ${sizes[prop.size] || 'btn-md'} active:!translate-y-0`}
 			style={prop.style}
 			ref={prop.ref}
 		>
diff --git a/src/components/chip.component.tsx b/src/components/chip.component.tsx
deleted file mode 100644
index 461076ce..00000000
--- a/src/components/chip.component.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-interface ChipProps {
-	selected: boolean
-	onClick: () => void
-	children: React.ReactNode
-	className?: string
-	dir?: string
-}
-
-export const Chip: React.FC<ChipProps> = ({
-	selected,
-	onClick,
-	children,
-	className = '',
-	dir,
-}) => {
-	return (
-		<button
-			onClick={onClick}
-			className={`px-4 py-2 cursor-pointer rounded-full text-xs font-bold active:scale-95 transition-all border-2 ${selected ? 'bg-primary border-primary text-white' : 'bg-base-100 border-base-300/30 text-muted hover:border-primary/30'} ${className}`}
-			dir={dir}
-		>
-			{children}
-		</button>
-	)
-}
diff --git a/src/components/date-picker/index.ts b/src/components/date-picker/index.ts
deleted file mode 100644
index 6bc7ab0d..00000000
--- a/src/components/date-picker/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { DatePicker } from './date-picker'
diff --git a/src/components/dropdown/index.ts b/src/components/dropdown/index.ts
deleted file mode 100644
index 90f5fb6a..00000000
--- a/src/components/dropdown/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { DropdownOption, DropdownProps } from './dropdown'
-export { Dropdown } from './dropdown'
diff --git a/src/components/extension-installed-modal.tsx b/src/components/extension-installed-modal.tsx
index cd89e9e6..106521f0 100644
--- a/src/components/extension-installed-modal.tsx
+++ b/src/components/extension-installed-modal.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import keepItImage from '@/assets/images/keep-it.png'
-import { Button } from './button/button'
-import Checkbox from './checkbox'
-import Modal from './modal'
+import { Button } from './ui'
+import { Checkbox } from '@/components/ui'
+import { Modal } from '@/components/ui'
 import { Icon } from '../icons'
 
 interface ExtensionInstalledModalProps {
@@ -72,7 +72,7 @@ const StepOne = ({ onGetStarted }: StepOneProps) => {
 				size="md"
 				onClick={onGetStarted}
 				className="w-full text-base font-light shadow-sm rounded-2xl shadow-primary outline-none!"
-				isPrimary={true}
+				variant="primary"
 			>
 				شروع کنید
 			</Button>
@@ -158,14 +158,16 @@ const StepFirefoxConsent = ({ onGetStarted }: StepFirefoxConsentProps) => {
 				<Button
 					onClick={handleDecline}
 					size="md"
-					className="flex items-center justify-center w-40 btn btn-error rounded-xl"
+					variant="danger"
+					className="flex items-center justify-center w-40 rounded-xl"
 				>
 					🚫 حذف افزونه
 				</Button>
 				<Button
 					onClick={handleConfirm}
 					size="md"
-					className="w-40 btn btn-success rounded-xl"
+					variant="success"
+					className="w-40 rounded-xl"
 				>
 					✅ تأیید و ادامه
 				</Button>
diff --git a/src/components/filter-tooltip/index.ts b/src/components/filter-tooltip/index.ts
deleted file mode 100644
index 27d286d1..00000000
--- a/src/components/filter-tooltip/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export {
-	FilterTooltip,
-	type FilterOption,
-	type FilterTooltipProps,
-} from './filter-tooltip'
diff --git a/src/components/loading/icon-loading.tsx b/src/components/loading/icon-loading.tsx
deleted file mode 100644
index 3f885630..00000000
--- a/src/components/loading/icon-loading.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Icon } from '@/src/icons'
-import Tooltip from '../tool-tip'
-
-interface IconLoadingProps {
-	title?: string
-	className?: string
-}
-export function IconLoading({ title, className }: IconLoadingProps) {
-	if (!title) {
-		return (
-			<Icon
-				name="loader"
-				className={`mx-2 block w-4 h-4 animate-spin text-content ${className}`}
-			/>
-		)
-	}
-	return (
-		<Tooltip content={title} position="bottom">
-			<Icon
-				name="loader"
-				className={`mx-2 block w-4 h-4 animate-spin text-content ${className}`}
-			/>
-		</Tooltip>
-	)
-}
diff --git a/src/components/pagination/index.ts b/src/components/pagination/index.ts
deleted file mode 100644
index 93a761b4..00000000
--- a/src/components/pagination/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type { PaginationProps } from './pagination'
-export { Pagination } from './pagination'
diff --git a/src/components/section-panel.tsx b/src/components/section-panel.tsx
deleted file mode 100644
index eb6e6e57..00000000
--- a/src/components/section-panel.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { ReactNode } from 'react'
-import React from 'react'
-
-interface SectionPanelProps {
-	title: ReactNode
-	children: ReactNode
-	delay?: number
-	size?: 'xs' | 'sm' | 'md' | 'lg'
-	icon?: React.ReactElement
-}
-
-export function SectionPanel({ title, children, size = 'md', icon }: SectionPanelProps) {
-	const getSizeStyles = () => {
-		switch (size) {
-			case 'xs':
-				return {
-					container: 'rounded-sm',
-					header: 'p-1',
-					title: 'text-sm',
-					content: 'p-1',
-				}
-			case 'sm':
-				return {
-					container: 'rounded-lg',
-					header: 'p-3',
-					title: 'text-base',
-					content: 'p-3',
-				}
-			case 'lg':
-				return {
-					container: 'rounded-xl',
-					header: 'p-5',
-					title: 'text-xl',
-					content: 'p-5',
-				}
-			default: // md
-				return {
-					container: 'rounded-xl',
-					header: 'p-4',
-					title: 'text-lg',
-					content: 'p-4',
-				}
-		}
-	}
-	const sizeStyles = getSizeStyles()
-
-	return (
-		<div className={`overflow-hidden ${sizeStyles.container} duration-300`}>
-			<div className={`${sizeStyles.header} border-b border-content`}>
-				<div className="flex items-center gap-2">
-					{icon && React.cloneElement(icon, {})}
-					<h3 className={`font-medium ${sizeStyles.title} text-content`}>
-						{title}
-					</h3>
-				</div>
-			</div>
-			<div className={sizeStyles.content}>{children}</div>
-		</div>
-	)
-}
diff --git a/src/components/text-input.tsx b/src/components/text-input.tsx
index 93f230ee..b71e3848 100644
--- a/src/components/text-input.tsx
+++ b/src/components/text-input.tsx
@@ -39,6 +39,13 @@ const sizes: Record<TextInputSize, string> = {
 	[TextInputSize.XL]: 'input-xl',
 }
 
+/**
+ * @deprecated Use `import { TextInput } from '@/components/ui'`.
+ *
+ * The replacement is source-compatible (no call site passes `size`, and the
+ * unexported `TextInputSize` enum is now a string union), so migration is a
+ * pure import swap — done in batches so each screen gets looked at.
+ */
 export const TextInput = memo(function TextInput({
 	onChange,
 	value,
diff --git a/src/components/toggle-switch.component.tsx b/src/components/toggle-switch.component.tsx
deleted file mode 100644
index 93a9ec7c..00000000
--- a/src/components/toggle-switch.component.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-interface ToggleSwitchProps {
-	enabled: boolean
-	disabled?: boolean
-	loading?: boolean
-	onToggle: () => void
-}
-
-export const ToggleSwitch = ({
-	enabled,
-	disabled = false,
-	loading = false,
-	onToggle,
-}: ToggleSwitchProps) => {
-	const getTrackStyle = () => {
-		if (enabled) {
-			return 'bg-primary'
-		}
-
-		return 'bg-base-300'
-	}
-
-	return (
-		<div
-			className={`
-				w-10 h-6 relative rounded-full transition-colors duration-200
-				${getTrackStyle()} cursor-pointer
-				${disabled || loading ? 'cursor-not-allowed opacity-70' : ''}
-				${!disabled && !loading ? 'active:scale-95' : ''}`}
-			onClick={disabled || loading ? undefined : onToggle}
-		>
-			<span
-				className={`absolute w-4 h-4 bg-white rounded-full shadow-sm top-1 left-1 transition-transform duration-300 ease-out ${
-					enabled ? 'translate-x-0' : 'translate-x-4'
-				} ${loading ? 'animate-bounce' : ''}`}
-			/>
-		</div>
-	)
-}
diff --git a/src/components/avatar.component.tsx b/src/components/ui/avatar/avatar.tsx
similarity index 70%
rename from src/components/avatar.component.tsx
rename to src/components/ui/avatar/avatar.tsx
index e5c33098..056366f3 100644
--- a/src/components/avatar.component.tsx
+++ b/src/components/ui/avatar/avatar.tsx
@@ -1,26 +1,22 @@
+import type { VariantProps } from 'class-variance-authority'
 import { useEffect, useState } from 'react'
+import { cn } from '@/common/utils/cn'
+import { avatarVariants } from './avatar.variants'
 
-interface AvatarProps {
+export interface AvatarProps extends VariantProps<typeof avatarVariants> {
 	url?: string | null
 	file?: File | null
 	placeholder?: string
-	size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 	className?: string
 	onClick?: () => void
 }
-const sizeClasses = {
-	xs: 'w-6 h-6 text-xs',
-	sm: 'w-8 h-8 text-sm',
-	md: 'w-10 h-10 text-base',
-	lg: 'w-12 h-12 text-lg',
-	xl: 'w-16 h-16 text-xl',
-}
+
 export function AvatarComponent({
 	url,
 	file,
 	placeholder = '',
-	size = 'md',
-	className = '',
+	size,
+	className,
 	onClick,
 }: AvatarProps) {
 	const [imageError, setImageError] = useState(false)
@@ -52,10 +48,7 @@ export function AvatarComponent({
 	const shouldShowImage = displayUrl && !imageError
 
 	return (
-		<div
-			className={`rounded-full overflow-hidden flex items-center justify-center  ${sizeClasses[size]} ${className}`}
-			onClick={onClick}
-		>
+		<div className={cn(avatarVariants({ size }), className)} onClick={onClick}>
 			{shouldShowImage ? (
 				<img
 					src={displayUrl}
@@ -64,7 +57,7 @@ export function AvatarComponent({
 					onError={handleImageError}
 				/>
 			) : (
-				<div className="font-medium text-gray-700">
+				<div className="font-medium text-muted">
 					{placeholder.charAt(0)?.toUpperCase() || '?'}
 				</div>
 			)}
diff --git a/src/components/ui/avatar/avatar.variants.ts b/src/components/ui/avatar/avatar.variants.ts
new file mode 100644
index 00000000..62a31ffa
--- /dev/null
+++ b/src/components/ui/avatar/avatar.variants.ts
@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority'
+
+export const avatarVariants = cva(
+	['rounded-full', 'overflow-hidden', 'flex', 'items-center', 'justify-center'],
+	{
+		variants: {
+			size: {
+				xs: ['w-6', 'h-6', 'text-xs'],
+				sm: ['w-8', 'h-8', 'text-sm'],
+				md: ['w-10', 'h-10', 'text-base'],
+				lg: ['w-12', 'h-12', 'text-lg'],
+				xl: ['w-16', 'h-16', 'text-xl'],
+			},
+		},
+		defaultVariants: {
+			size: 'md',
+		},
+	}
+)
+
+export type AvatarVariant = typeof avatarVariants
diff --git a/src/components/ui/badge/badge.tsx b/src/components/ui/badge/badge.tsx
new file mode 100644
index 00000000..bc1bfa41
--- /dev/null
+++ b/src/components/ui/badge/badge.tsx
@@ -0,0 +1,14 @@
+import { twMerge } from 'tailwind-merge'
+interface Prop {
+	className: string
+}
+export function NewBadge({ className }: Prop) {
+	return (
+		<span
+			className={twMerge(
+				'absolute w-2 h-2 rounded-full bg-error animate-pulse ring-2 ring-error/20',
+				className
+			)}
+		></span>
+	)
+}
diff --git a/src/components/bottom-sheet/bottom-sheet.tsx b/src/components/ui/bottom-sheet/bottom-sheet.tsx
similarity index 100%
rename from src/components/bottom-sheet/bottom-sheet.tsx
rename to src/components/ui/bottom-sheet/bottom-sheet.tsx
diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx
new file mode 100644
index 00000000..8143cd73
--- /dev/null
+++ b/src/components/ui/button/button.tsx
@@ -0,0 +1,56 @@
+import type React from 'react'
+import { cn } from '@/common/utils/cn'
+import { Icon } from '@/src/icons'
+import { type ButtonVariantProps, buttonVariants } from './button.variants'
+
+export interface ButtonProps
+	extends Omit<React.ComponentPropsWithRef<'button'>, 'color'>,
+		ButtonVariantProps {
+	loading?: boolean
+	loadingText?: React.ReactNode
+	icon?: React.ReactNode
+	/** @deprecated Use `variant="primary"` instead. */
+	isPrimary?: boolean
+}
+
+export function Button({
+	className,
+	variant,
+	size,
+	rounded,
+	fullWidth,
+	isPrimary,
+	loading,
+	loadingText,
+	icon,
+	type = 'button',
+	children,
+	...rest
+}: ButtonProps) {
+	const resolvedVariant = variant ?? (isPrimary ? 'primary' : 'default')
+
+	return (
+		<button
+			type={type}
+			className={cn(
+				buttonVariants({ variant: resolvedVariant, size, rounded, fullWidth }),
+				className
+			)}
+			{...rest}
+		>
+			{loading ? (
+				loadingText || (
+					<>
+						<Icon name="spinner" className="animate-spin" />
+						<span className="text-xs">صبر کنید...</span>
+					</>
+				)
+			) : (
+				<>
+					{icon}
+					{children}
+				</>
+			)}
+		</button>
+	)
+}
diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts
new file mode 100644
index 00000000..14c426bd
--- /dev/null
+++ b/src/components/ui/button/button.variants.ts
@@ -0,0 +1,74 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+/**
+ * Button variants.
+ *
+ * cva declares WHICH classes a variant contributes. It never merges — merging
+ * is `cn()`'s job (see common/utils/cn.ts).
+ *
+ * Sizes mirror daisyUI's `--size-field * n` ladder (24/32/40/48/56px) and its
+ * padding/font ramp on purpose: a call site migrating off `btn` keeps its exact
+ * geometry, so the only thing that changes is colour — which is the part worth
+ * reviewing.
+ *
+ * Colour comes from the project's semantic tokens, never from `btn-*`.
+ */
+export const buttonVariants = cva(
+	[
+		'inline-flex shrink-0 items-center justify-center gap-1.5',
+		'whitespace-nowrap align-middle select-none cursor-pointer',
+		'border font-semibold',
+		'transition-ui',
+		'focus-visible:focus-ring',
+		'disabled:pointer-events-none disabled:opacity-50',
+	],
+	{
+		variants: {
+			variant: {
+				default: 'bg-content text-content border-content hover:bg-raised',
+				primary:
+					'bg-primary text-primary-content border-transparent hover:bg-primary/90',
+				secondary:
+					'bg-secondary text-secondary-content border-transparent hover:bg-secondary/90',
+				outline: 'bg-transparent text-content border-content hover:bg-raised',
+				ghost: 'bg-transparent text-muted border-transparent hover:bg-raised hover:text-content',
+				danger: 'bg-error text-error-content border-transparent hover:bg-error/90',
+				success:
+					'bg-success text-success-content border-transparent hover:bg-success/90',
+			},
+			size: {
+				xs: 'h-6 px-2 text-[0.6875rem]',
+				sm: 'h-8 px-3 text-xs',
+				md: 'h-10 px-4 text-sm',
+				lg: 'h-12 px-5 text-lg',
+				xl: 'h-14 px-6 text-[1.375rem]',
+			},
+			/**
+			 * Literal class names only. The previous implementation built
+			 * `rounded-${prop.rounded}` at runtime, which Tailwind v4's source
+			 * scanner cannot see — those classes only shipped by coincidence,
+			 * when the same literal happened to appear elsewhere in the codebase.
+			 */
+			rounded: {
+				sm: 'rounded-sm',
+				md: 'rounded-md',
+				lg: 'rounded-lg',
+				xl: 'rounded-xl',
+				full: 'rounded-full',
+				card: 'rounded-card',
+			},
+			fullWidth: {
+				true: 'w-full',
+				false: '',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'md',
+			rounded: 'card',
+			fullWidth: false,
+		},
+	}
+)
+
+export type ButtonVariantProps = VariantProps<typeof buttonVariants>
diff --git a/src/components/checkbox-description.component.tsx b/src/components/ui/checkbox/checkbox-description.tsx
similarity index 90%
rename from src/components/checkbox-description.component.tsx
rename to src/components/ui/checkbox/checkbox-description.tsx
index d293b1b9..b4202268 100644
--- a/src/components/checkbox-description.component.tsx
+++ b/src/components/ui/checkbox/checkbox-description.tsx
@@ -1,4 +1,4 @@
-import CustomCheckbox from '@/components/checkbox'
+import { Checkbox } from '@/components/ui'
 
 interface Props {
 	isEnabled: boolean
@@ -20,7 +20,7 @@ export function CheckBoxWithDescription({
 			}
 			onClick={onToggle}
 		>
-			<CustomCheckbox
+			<Checkbox
 				checked={isEnabled}
 				onChange={onToggle}
 				className="active:scale-95"
diff --git a/src/components/checkbox.tsx b/src/components/ui/checkbox/checkbox.tsx
similarity index 94%
rename from src/components/checkbox.tsx
rename to src/components/ui/checkbox/checkbox.tsx
index f22e874d..f4e7e78e 100644
--- a/src/components/checkbox.tsx
+++ b/src/components/ui/checkbox/checkbox.tsx
@@ -12,7 +12,7 @@ interface CustomCheckboxProps {
 	fontSize?: 'font-light' | 'font-normal' | 'font-bold'
 }
 
-const CustomCheckbox = ({
+const CheckboxBase = ({
 	checked,
 	onChange,
 	label,
@@ -26,7 +26,7 @@ const CustomCheckbox = ({
 	const getCheckboxStyle = () => {
 		if (checked) {
 			if (checkedCheckBoxClassName) return checkedCheckBoxClassName
-			return 'bg-blue-500 border-blue-500'
+			return 'bg-primary border-primary'
 		}
 
 		if (unCheckedCheckBoxClassName) return unCheckedCheckBoxClassName
@@ -90,4 +90,6 @@ const CustomCheckbox = ({
 	)
 }
 
-export default memo(CustomCheckbox)
+export const Checkbox = memo(CheckboxBase)
+
+Checkbox.displayName = 'Checkbox'
diff --git a/src/components/ui/chip/chip.tsx b/src/components/ui/chip/chip.tsx
new file mode 100644
index 00000000..0dca9ba2
--- /dev/null
+++ b/src/components/ui/chip/chip.tsx
@@ -0,0 +1,28 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cn } from '@/common/utils/cn'
+import { chipVariants } from './chip.variants'
+
+export interface ChipProps extends VariantProps<typeof chipVariants> {
+	onClick: () => void
+	children: React.ReactNode
+	className?: string
+	dir?: string
+}
+
+export const Chip: React.FC<ChipProps> = ({
+	selected,
+	onClick,
+	children,
+	className,
+	dir,
+}) => {
+	return (
+		<button
+			onClick={onClick}
+			className={cn(chipVariants({ selected }), className)}
+			dir={dir}
+		>
+			{children}
+		</button>
+	)
+}
diff --git a/src/components/ui/chip/chip.variants.ts b/src/components/ui/chip/chip.variants.ts
new file mode 100644
index 00000000..4c65f3ef
--- /dev/null
+++ b/src/components/ui/chip/chip.variants.ts
@@ -0,0 +1,33 @@
+import { cva } from 'class-variance-authority'
+
+export const chipVariants = cva(
+	[
+		'px-4',
+		'py-2',
+		'cursor-pointer',
+		'rounded-full',
+		'text-xs',
+		'font-bold',
+		'border-2',
+		'transition-all',
+		'active:scale-95',
+	],
+	{
+		variants: {
+			selected: {
+				true: ['bg-primary', 'border-primary', 'text-primary-content'],
+				false: [
+					'bg-base-100',
+					'border-base-300/30',
+					'text-muted',
+					'hover:border-primary/30',
+				],
+			},
+		},
+		defaultVariants: {
+			selected: false,
+		},
+	}
+)
+
+export type ChipVariant = typeof chipVariants
diff --git a/src/components/popover-color-picker.tsx b/src/components/ui/color-picker/color-picker.tsx
similarity index 91%
rename from src/components/popover-color-picker.tsx
rename to src/components/ui/color-picker/color-picker.tsx
index 164d6a80..6b152fb3 100644
--- a/src/components/popover-color-picker.tsx
+++ b/src/components/ui/color-picker/color-picker.tsx
@@ -7,7 +7,7 @@ interface PopoverColorPickerProps {
 	onChange: (color: string) => void
 }
 
-const PopoverColorPicker: React.FC<PopoverColorPickerProps> = ({ color, onChange }) => {
+export const ColorPicker: React.FC<PopoverColorPickerProps> = ({ color, onChange }) => {
 	const triggerRef = useRef<HTMLDivElement>(null)
 	const popoverRef = useRef<HTMLDivElement>(null)
 	const [isOpen, setIsOpen] = useState<boolean>(false)
@@ -71,12 +71,11 @@ const PopoverColorPicker: React.FC<PopoverColorPickerProps> = ({ color, onChange
 				createPortal(
 					<div
 						ref={popoverRef}
-						className="fixed flex p-2 border rounded-md shadow-lg bg-content border-content"
+						className="fixed z-popover flex p-2 border rounded-md shadow-lg bg-content border-content"
 						style={{
 							top: `${position.top}px`,
 							left: `${position.left}px`,
 							width: '200px',
-							zIndex: 1000,
 						}}
 					>
 						<RgbaStringColorPicker color={displayColor} onChange={onChange} />
@@ -86,5 +85,3 @@ const PopoverColorPicker: React.FC<PopoverColorPickerProps> = ({ color, onChange
 		</>
 	)
 }
-
-export default PopoverColorPicker
diff --git a/src/components/context-menu.component.tsx b/src/components/ui/context-menu/context-menu.tsx
similarity index 79%
rename from src/components/context-menu.component.tsx
rename to src/components/ui/context-menu/context-menu.tsx
index 45f4fc42..d8f90694 100644
--- a/src/components/context-menu.component.tsx
+++ b/src/components/ui/context-menu/context-menu.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useRef } from 'react'
+import { cn } from '@/common/utils/cn'
 
 interface ContextMenuProps {
 	className?: string
@@ -32,11 +33,13 @@ export function ContextMenu({
 	return (
 		<div
 			ref={ref}
-			className={`absolute flex flex-col p-2 min-w-5 rounded-2xl shadow-lg bg-content backdrop-blur-lg border-2 border-content ${className}`}
+			className={cn(
+				'absolute z-popover flex flex-col p-2 min-w-5 rounded-2xl shadow-lg bg-content backdrop-blur-lg border-2 border-content',
+				className
+			)}
 			style={{
 				top: position.y,
 				left: position.x,
-				zIndex: 1000,
 			}}
 		>
 			{children}
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/ui/date-picker/date-picker.tsx
similarity index 97%
rename from src/components/date-picker/date-picker.tsx
rename to src/components/ui/date-picker/date-picker.tsx
index ce556a90..f3cb33e5 100644
--- a/src/components/date-picker/date-picker.tsx
+++ b/src/components/ui/date-picker/date-picker.tsx
@@ -1,3 +1,4 @@
+import { twMerge } from 'tailwind-merge'
 import { Icon } from '@/src/icons'
 import jalaliMoment from 'jalali-moment'
 import { useState } from 'react'
@@ -134,7 +135,7 @@ export function DatePicker({
 			if (isDaySelected) return ''
 
 			if (isFriday) {
-				return 'hover:bg-red-400/10'
+				return 'hover:bg-error/10'
 			}
 
 			return 'hover:bg-primary/10'
@@ -189,7 +190,10 @@ export function DatePicker({
 	return (
 		<div
 			data-date-picker
-			className={`bg-base-100 border border-base-300 rounded-xl p-3 w-64 ${className}`}
+			className={twMerge(
+				'bg-base-100 border border-base-300 rounded-xl p-3 w-64',
+				className
+			)}
 		>
 			<div className="flex items-center justify-between mb-3">
 				<h3 className="text-xs font-medium text-content">
diff --git a/src/components/dropdown/dropdown.tsx b/src/components/ui/dropdown/dropdown.tsx
similarity index 93%
rename from src/components/dropdown/dropdown.tsx
rename to src/components/ui/dropdown/dropdown.tsx
index 735c1e5e..99f7f733 100644
--- a/src/components/dropdown/dropdown.tsx
+++ b/src/components/ui/dropdown/dropdown.tsx
@@ -1,3 +1,4 @@
+import { twMerge } from 'tailwind-merge'
 import type { ReactNode } from 'react'
 import { Portal } from '../portal/portal'
 import { useDropdown } from './use-dropdown'
@@ -198,7 +199,7 @@ export function Dropdown({
 	)
 
 	return (
-		<div ref={dropdownRef} className={`relative inline-block ${className}`}>
+		<div ref={dropdownRef} className={twMerge('relative inline-block', className)}>
 			<div
 				onClick={disabled ? undefined : toggle}
 				className={disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
@@ -208,10 +209,10 @@ export function Dropdown({
 
 			{isOpen && !disabled && (
 				<Portal>
-					<div id={id} className="fixed inset-0 z-[9998] pointer-events-none">
+					<div id={id} className="fixed inset-0 z-popover pointer-events-none">
 						<div
 							ref={dropdownContentRef}
-							className={`fixed z-9999 shadow-xl overflow-hidden rounded-2xl bg-transparent! transition-opacity duration-100 ${isReady ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'} bg-glass ${dropdownClassName}`}
+							className={`fixed z-popover shadow-xl overflow-hidden rounded-2xl bg-transparent! transition-opacity duration-100 ${isReady ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'} bg-glass ${dropdownClassName}`}
 							style={{
 								maxHeight,
 								width:
diff --git a/src/components/dropdown/use-dropdown.tsx b/src/components/ui/dropdown/use-dropdown.tsx
similarity index 100%
rename from src/components/dropdown/use-dropdown.tsx
rename to src/components/ui/dropdown/use-dropdown.tsx
diff --git a/src/components/filter-tooltip/filter-tooltip.tsx b/src/components/ui/filter-tooltip/filter-tooltip.tsx
similarity index 95%
rename from src/components/filter-tooltip/filter-tooltip.tsx
rename to src/components/ui/filter-tooltip/filter-tooltip.tsx
index c666cd14..cb6df99c 100644
--- a/src/components/filter-tooltip/filter-tooltip.tsx
+++ b/src/components/ui/filter-tooltip/filter-tooltip.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, type ReactNode } from 'react'
-import { ClickableTooltip } from '@/components/clickable-tooltip'
-import Tooltip from '../tool-tip'
+import { ClickableTooltip } from '@/components/ui'
+import { Tooltip } from '../tooltip/tooltip'
 import { Button } from '../button/button'
 
 export interface FilterOption {
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
new file mode 100644
index 00000000..e1b71af1
--- /dev/null
+++ b/src/components/ui/index.ts
@@ -0,0 +1,73 @@
+/**
+ * UI primitives.
+ *
+ * Generic, app-agnostic building blocks. Feature components that know about
+ * Widgetify's domain (auth guards, market, updater, user card, welcome wizard,
+ * widget tab manager) stay in `src/components/`.
+ *
+ * Conventions:
+ *   - A component with real variants (discrete options: variant / size /
+ *     orientation) gets a `<name>.variants.ts` exporting a `cva` config, and
+ *     composes it with `cn(xVariants({ … }), className)`.
+ *   - A component whose styling is only conditional (booleans, states) gets NO
+ *     variants file — it merges with `twMerge` directly.
+ *   - `cva` declares variants. It never merges.
+ */
+
+export * from './avatar/avatar'
+export * from './avatar/avatar.variants'
+
+export * from './badge/badge'
+
+export * from './bottom-sheet/bottom-sheet'
+
+export * from './button/button'
+export * from './button/button.variants'
+
+export * from './checkbox/checkbox'
+export * from './checkbox/checkbox-description'
+
+export * from './chip/chip'
+export * from './chip/chip.variants'
+
+export * from './color-picker/color-picker'
+
+export * from './context-menu/context-menu'
+
+export * from './date-picker/date-picker'
+
+export * from './dropdown/dropdown'
+
+export * from './filter-tooltip/filter-tooltip'
+
+export * from './input/input'
+export * from './input/input.variants'
+
+export * from './item-selector/item-selector'
+
+export * from './loading/loading'
+
+export * from './modal/confirmation-modal'
+export * from './modal/confirmation-modal.variants'
+export * from './modal/modal'
+export * from './modal/modal.variants'
+
+export * from './offline-indicator/offline-indicator'
+
+export * from './pagination/pagination'
+
+export * from './portal/portal'
+
+export * from './section-panel/section-panel'
+export * from './section-panel/section-panel.variants'
+
+export * from './select/select'
+
+export * from './tabs/tabs'
+export * from './tabs/tabs.variants'
+
+export * from './toggle/toggle'
+export * from './toggle/toggle.variants'
+
+export * from './tooltip/clickable-tooltip'
+export * from './tooltip/tooltip'
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
new file mode 100644
index 00000000..a5688e62
--- /dev/null
+++ b/src/components/ui/input/input.tsx
@@ -0,0 +1,113 @@
+import { memo, useCallback, useEffect, useRef } from 'react'
+import { cn } from '@/common/utils/cn'
+import { type TextInputSize, textInputVariants } from './input.variants'
+
+export interface TextInputProps {
+	id?: string
+	value?: string
+	defaultValue?: string
+	onChange: (value: string) => void
+	placeholder?: string
+	onFocus?: () => void
+	onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+	disabled?: boolean
+	name?: string
+	type?: string
+	direction?: 'rtl' | 'ltr' | 'auto'
+	className?: string
+	ref?: React.RefObject<HTMLInputElement | null>
+	debounce?: boolean
+	debounceTime?: number
+	maxLength?: number
+	size?: TextInputSize
+	invalid?: boolean
+	min?: number
+	max?: number
+	autoComplete?: 'on' | 'off'
+}
+
+export const TextInput = memo(function TextInput({
+	onChange,
+	value,
+	defaultValue,
+	placeholder,
+	onFocus,
+	onKeyDown,
+	disabled = false,
+	name,
+	id,
+	type = 'text',
+	direction,
+	className,
+	ref,
+	debounce = false,
+	debounceTime = 150,
+	maxLength = 1000,
+	size = 'md',
+	invalid = false,
+	min,
+	max,
+	autoComplete = 'off',
+}: TextInputProps) {
+	const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
+	const isControlled = value !== undefined
+
+	const handleChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const newValue = e.target.value
+
+			if (!debounce) {
+				onChange(newValue)
+				return
+			}
+
+			if (debounceTimerRef.current) {
+				clearTimeout(debounceTimerRef.current)
+			}
+
+			debounceTimerRef.current = setTimeout(
+				() => {
+					onChange(newValue)
+				},
+				// Colour pickers fire continuously while dragging, so they need a
+				// much shorter debounce to still feel live.
+				type === 'color' ? 50 : debounceTime
+			)
+		},
+		[onChange, debounce, type, debounceTime]
+	)
+
+	useEffect(() => {
+		return () => {
+			if (debounceTimerRef.current) {
+				clearTimeout(debounceTimerRef.current)
+			}
+		}
+	}, [])
+
+	const inputProps = {
+		ref,
+		id,
+		type,
+		name,
+		disabled,
+		onFocus,
+		onKeyDown,
+		dir: direction,
+		placeholder: placeholder || '',
+		className: cn(textInputVariants({ size, invalid }), className),
+		onChange: handleChange,
+		maxLength,
+		autoComplete,
+		min,
+		max,
+	}
+
+	if (isControlled) {
+		return <input {...inputProps} value={value} />
+	}
+
+	return <input {...inputProps} defaultValue={defaultValue} />
+})
+
+TextInput.displayName = 'TextInput'
diff --git a/src/components/ui/input/input.variants.ts b/src/components/ui/input/input.variants.ts
new file mode 100644
index 00000000..ed9a5a24
--- /dev/null
+++ b/src/components/ui/input/input.variants.ts
@@ -0,0 +1,54 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+/**
+ * Text input variants.
+ *
+ * Same `--size-field * n` ladder as Button (24/32/40/48/56px), matching
+ * daisyUI's `input-*` geometry so migrated call sites keep their dimensions.
+ *
+ * `rounded-xl` is kept rather than `rounded-card` so this pilot is a zero-delta
+ * visual swap; tokenising the radius is a deliberate follow-up, not something
+ * to slip into the migration commit.
+ */
+export const textInputVariants = cva(
+	[
+		'w-full inline-flex items-center',
+		'bg-content text-content',
+		'border border-content rounded-xl',
+		'font-light',
+		'transition-ui',
+		'placeholder:text-subtle',
+		'outline-none focus:outline-none',
+		'focus:border-primary focus:ring-1 focus:ring-primary/20',
+		'disabled:cursor-not-allowed disabled:opacity-50',
+	],
+	{
+		variants: {
+			size: {
+				xs: 'h-6 px-2 text-[0.6875rem]',
+				sm: 'h-8 px-3 text-xs',
+				md: 'h-10 px-3 text-sm',
+				lg: 'h-12 px-4 text-lg',
+				xl: 'h-14 px-4 text-[1.375rem]',
+			},
+			invalid: {
+				true: 'border-error focus:border-error focus:ring-error/20',
+				false: '',
+			},
+		},
+		defaultVariants: {
+			size: 'md',
+			invalid: false,
+		},
+	}
+)
+
+export type TextInputVariantProps = VariantProps<typeof textInputVariants>
+
+/**
+ * Replaces the old `TextInputSize` enum, which was never exported (so it could
+ * not be part of the public API) and which no call site passed. A string union
+ * is a pure widening — `size="sm"` becomes newly legal, nothing breaks — and it
+ * avoids shipping an enum's runtime object.
+ */
+export type TextInputSize = NonNullable<TextInputVariantProps['size']>
diff --git a/src/components/item-selector.tsx b/src/components/ui/item-selector/item-selector.tsx
similarity index 89%
rename from src/components/item-selector.tsx
rename to src/components/ui/item-selector/item-selector.tsx
index 0639a91f..6621e046 100644
--- a/src/components/item-selector.tsx
+++ b/src/components/ui/item-selector/item-selector.tsx
@@ -1,4 +1,5 @@
 import type React from 'react'
+import { cn } from '@/common/utils/cn'
 
 interface Props {
 	isActive: boolean
@@ -27,11 +28,13 @@ export function ItemSelector({
 	return (
 		<div
 			onClick={onClick}
-			className={`flex cursor-pointer flex-col items-start p-3 transition-all border rounded-xl ${className} ${
+			className={cn(
+				'flex cursor-pointer flex-col items-start p-3 transition-all border rounded-xl',
+				className,
 				isActive
 					? 'border-primary/25 bg-primary/20'
 					: 'bg-base-300/25 border-content hover:!border-primary/15 hover:!bg-primary/5'
-			}`}
+			)}
 			style={style}
 		>
 			<div className="flex items-center justify-center gap-0.5 mb-1">
diff --git a/src/components/ui/loading/loading.tsx b/src/components/ui/loading/loading.tsx
new file mode 100644
index 00000000..8d018d66
--- /dev/null
+++ b/src/components/ui/loading/loading.tsx
@@ -0,0 +1,25 @@
+import { cn } from '@/common/utils/cn'
+import { Icon } from '@/src/icons'
+import { Tooltip } from '../tooltip/tooltip'
+
+interface IconLoadingProps {
+	title?: string
+	className?: string
+}
+
+export function IconLoading({ title, className }: IconLoadingProps) {
+	const icon = (
+		<Icon
+			name="loader"
+			className={cn('mx-2 block w-4 h-4 animate-spin text-content', className)}
+		/>
+	)
+
+	if (!title) return icon
+
+	return (
+		<Tooltip content={title} position="bottom">
+			{icon}
+		</Tooltip>
+	)
+}
diff --git a/src/components/modal/confirmation-modal.tsx b/src/components/ui/modal/confirmation-modal.tsx
similarity index 63%
rename from src/components/modal/confirmation-modal.tsx
rename to src/components/ui/modal/confirmation-modal.tsx
index 2dcb2b7f..e02bbbe8 100644
--- a/src/components/modal/confirmation-modal.tsx
+++ b/src/components/ui/modal/confirmation-modal.tsx
@@ -1,8 +1,13 @@
 import type { ReactNode } from 'react'
 import { Button } from '../button/button'
-import Modal from '../modal'
-import { IconLoading } from '../loading/icon-loading'
+import { Modal } from './modal'
+import { IconLoading } from '../loading/loading'
 import { Icon } from '@/src/icons'
+import { cn } from '@/common/utils/cn'
+import {
+	confirmationConfirmButtonVariants,
+	confirmationIconVariants,
+} from './confirmation-modal.variants'
 
 interface ConfirmationModalProps {
 	isOpen: boolean
@@ -18,39 +23,12 @@ interface ConfirmationModalProps {
 	direction?: 'rtl' | 'ltr'
 }
 
-const variantConfig = {
-	danger: {
-		icon: <Icon name="trash" size={18} />,
-		accentBar: 'bg-error',
-		iconBg: 'bg-error/10',
-		iconColor: 'text-error',
-		confirmBg: 'bg-error hover:bg-error/90',
-		confirmText: 'text-white',
-	},
-	warning: {
-		icon: <Icon name="alert" size={18} />,
-		accentBar: 'bg-warning',
-		iconBg: 'bg-warning/10',
-		iconColor: 'text-warning',
-		confirmBg: 'bg-warning hover:bg-warning/90',
-		confirmText: 'text-white',
-	},
-	info: {
-		icon: <Icon name="info" size={18} />,
-		accentBar: 'bg-info',
-		iconBg: 'bg-info/10',
-		iconColor: 'text-info',
-		confirmBg: 'bg-info/80 hover:bg-info/90',
-		confirmText: 'text-white',
-	},
-	primary: {
-		icon: <Icon name="info" size={18} />,
-		accentBar: 'bg-primary',
-		iconBg: 'bg-primary/10',
-		iconColor: 'text-primary',
-		confirmBg: 'bg-primary/80 hover:bg-primary/90',
-		confirmText: 'text-white',
-	},
+/** Only the icon element lives here now — all classes come from cva. */
+const variantIcon = {
+	danger: <Icon name="trash" size={18} />,
+	warning: <Icon name="alert" size={18} />,
+	info: <Icon name="info" size={18} />,
+	primary: <Icon name="info" size={18} />,
 }
 
 export function ConfirmationModal({
@@ -66,8 +44,7 @@ export function ConfirmationModal({
 	icon,
 	direction = 'rtl',
 }: ConfirmationModalProps) {
-	const config = variantConfig[variant]
-	const displayIcon = icon || config.icon
+	const displayIcon = icon || variantIcon[variant]
 
 	const handleConfirm = () => {
 		if (!isLoading) {
@@ -92,9 +69,12 @@ export function ConfirmationModal({
 			title={
 				<div className="flex items-center gap-3">
 					<div
-						className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl ${config.iconBg}`}
+						className={cn(
+							confirmationIconVariants({ variant }),
+							'h-10 w-10 shrink-0 rounded-xl'
+						)}
 					>
-						<div className={config.iconColor}>{displayIcon}</div>
+						<div>{displayIcon}</div>
 					</div>
 					{title && (
 						<h3 className="text-base font-semibold text-content">{title}</h3>
@@ -129,7 +109,10 @@ export function ConfirmationModal({
 								<span className="text-xs">در حال انجام...</span>
 							</div>
 						}
-						className={`${config.confirmBg} ${config.confirmText} w-fit px-8 border-none rounded-2xl`}
+						className={cn(
+							confirmationConfirmButtonVariants({ variant }),
+							'w-fit px-8 border-none rounded-2xl'
+						)}
 					>
 						{confirmText}
 					</Button>
diff --git a/src/components/ui/modal/confirmation-modal.variants.ts b/src/components/ui/modal/confirmation-modal.variants.ts
new file mode 100644
index 00000000..f6a91a05
--- /dev/null
+++ b/src/components/ui/modal/confirmation-modal.variants.ts
@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority'
+
+/**
+ * Confirmation modal accent colours.
+ *
+ * Four slots share one `variant` key. The icon element itself stays in the
+ * component — cva describes classes, not JSX.
+ */
+
+export const confirmationAccentBarVariants = cva(['h-1', 'w-full'], {
+	variants: {
+		variant: {
+			danger: ['bg-error'],
+			warning: ['bg-warning'],
+			info: ['bg-info'],
+			primary: ['bg-primary'],
+		},
+	},
+	defaultVariants: { variant: 'danger' },
+})
+
+export const confirmationIconVariants = cva(
+	['flex', 'items-center', 'justify-center', 'rounded-full'],
+	{
+		variants: {
+			variant: {
+				danger: ['bg-error/10', 'text-error'],
+				warning: ['bg-warning/10', 'text-warning'],
+				info: ['bg-info/10', 'text-info'],
+				primary: ['bg-primary/10', 'text-primary'],
+			},
+		},
+		defaultVariants: { variant: 'danger' },
+	}
+)
+
+export const confirmationConfirmButtonVariants = cva([], {
+	variants: {
+		variant: {
+			danger: ['bg-error', 'hover:bg-error/90', 'text-error-content'],
+			warning: ['bg-warning', 'hover:bg-warning/90', 'text-warning-content'],
+			info: ['bg-info/80', 'hover:bg-info/90', 'text-info-content'],
+			primary: ['bg-primary/80', 'hover:bg-primary/90', 'text-primary-content'],
+		},
+	},
+	defaultVariants: { variant: 'danger' },
+})
+
+export type ConfirmationVariant = typeof confirmationAccentBarVariants
diff --git a/src/components/modal.tsx b/src/components/ui/modal/modal.tsx
similarity index 68%
rename from src/components/modal.tsx
rename to src/components/ui/modal/modal.tsx
index f328805b..8c9563ed 100644
--- a/src/components/modal.tsx
+++ b/src/components/ui/modal/modal.tsx
@@ -1,12 +1,14 @@
+import type { VariantProps } from 'class-variance-authority'
 import React, { type ReactNode, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import { Icon } from '../icons'
+import { cn } from '@/common/utils/cn'
+import { Icon } from '@/src/icons'
+import { modalBoxVariants, modalScrollVariants } from './modal.variants'
 
-type ModalProps = {
+export type ModalProps = VariantProps<typeof modalBoxVariants> & {
 	isOpen: boolean
 	onClose: () => void
 	title?: React.ReactNode
-	size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
 	children: ReactNode
 	direction?: 'rtl' | 'ltr'
 	closeOnBackdropClick?: boolean
@@ -14,47 +16,18 @@ type ModalProps = {
 	className?: string
 }
 
-const sizeClasses = {
-	sm: {
-		w: 'w-[calc(100vw-2rem)] max-w-sm',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[560px]',
-		minH: 'min-h-[180px]',
-	},
-	md: {
-		w: 'w-[calc(100vw-2rem)] max-w-md',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[640px]',
-		minH: 'min-h-[200px]',
-	},
-	lg: {
-		w: 'w-[calc(100vw-2rem)] max-w-lg',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[720px]',
-		minH: 'min-h-[240px]',
-	},
-	xl: {
-		w: 'w-[calc(100vw-2rem)] max-w-4xl',
-		h: 'max-h-[calc(100vh-4rem)] md:max-h-[800px]',
-		minH: 'min-h-[280px]',
-	},
-	full: {
-		w: 'w-[calc(100vw-1rem)] max-w-5xl',
-		h: 'h-[calc(100vh-4rem)] md:h-[calc(100vh-6rem)]',
-		minH: 'min-h-[calc(100vh-4rem)]',
-	},
-} as const
-
-export default function Modal({
+export function Modal({
 	isOpen,
 	onClose,
 	title,
-	size = 'md',
+	size,
 	children,
 	closeOnBackdropClick = true,
 	direction = 'ltr',
 	showCloseButton = true,
-	className = '',
+	className,
 }: ModalProps) {
 	const modalRef = useRef<HTMLDivElement>(null)
-	const sizeValue = sizeClasses[size] || sizeClasses.md
 
 	// Lock body scroll when modal is open
 	useEffect(() => {
@@ -97,10 +70,7 @@ export default function Modal({
 		}
 	}, [isOpen])
 
-	const modalBoxClasses = `
-		modal-box overflow-hidden rounded-xl md:rounded-2xl p-3 md:p-4 shadow-xl transition-all duration-200
-		${sizeValue.w} ${sizeValue.minH} ${size === 'full' ? sizeValue.h : ''} ${className}
-	`
+	const modalBoxClasses = cn(modalBoxVariants({ size }), className)
 
 	if (!isOpen) return null
 
@@ -116,7 +86,7 @@ export default function Modal({
 			<div
 				ref={modalRef}
 				onClick={(e) => e.stopPropagation()}
-				className={`${modalBoxClasses} animate-modal-in`}
+				className={cn(modalBoxClasses, 'animate-modal-in')}
 			>
 				{(title || showCloseButton) && (
 					<div className="flex items-center justify-between gap-2 mb-2 md:mb-3 md:gap-4">
@@ -145,11 +115,7 @@ export default function Modal({
 						)}
 					</div>
 				)}
-				<div
-					className={`overflow-y-auto overflow-x-hidden ${size !== 'full' ? sizeValue.h : 'h-full'} pr-0.5 md:pr-1`}
-				>
-					{children}
-				</div>
+				<div className={modalScrollVariants({ size })}>{children}</div>
 			</div>
 		</dialog>,
 		document.body
diff --git a/src/components/ui/modal/modal.variants.ts b/src/components/ui/modal/modal.variants.ts
new file mode 100644
index 00000000..483023b3
--- /dev/null
+++ b/src/components/ui/modal/modal.variants.ts
@@ -0,0 +1,65 @@
+import { cva } from 'class-variance-authority'
+
+/**
+ * The modal box: width and min-height. The per-size max-height lives on the
+ * inner scroll container instead (see modalScrollVariants), which is what
+ * actually bounds the content.
+ */
+export const modalBoxVariants = cva(
+	[
+		'modal-box',
+		'overflow-hidden',
+		'rounded-widget',
+		'p-3',
+		'md:p-4',
+		'elevation-lg',
+		'transition-all',
+		'duration-200',
+	],
+	{
+		variants: {
+			size: {
+				sm: ['w-[calc(100vw-2rem)]', 'max-w-sm', 'min-h-[180px]'],
+				md: ['w-[calc(100vw-2rem)]', 'max-w-md', 'min-h-[200px]'],
+				lg: ['w-[calc(100vw-2rem)]', 'max-w-lg', 'min-h-[240px]'],
+				xl: ['w-[calc(100vw-2rem)]', 'max-w-4xl', 'min-h-[280px]'],
+				full: [
+					'w-[calc(100vw-1rem)]',
+					'max-w-5xl',
+					'min-h-[calc(100vh-4rem)]',
+					'h-[calc(100vh-4rem)]',
+					'md:h-[calc(100vh-6rem)]',
+				],
+			},
+		},
+		defaultVariants: {
+			size: 'md',
+		},
+	}
+)
+
+export type ModalBoxVariant = typeof modalBoxVariants
+
+/**
+ * The scrollable content area. This is what carries the per-size max-height —
+ * `full` stretches to the box instead of capping.
+ */
+export const modalScrollVariants = cva(
+	['overflow-y-auto', 'overflow-x-hidden', 'pr-0.5', 'md:pr-1'],
+	{
+		variants: {
+			size: {
+				sm: ['max-h-[calc(100vh-4rem)]', 'md:max-h-[560px]'],
+				md: ['max-h-[calc(100vh-4rem)]', 'md:max-h-[640px]'],
+				lg: ['max-h-[calc(100vh-4rem)]', 'md:max-h-[720px]'],
+				xl: ['max-h-[calc(100vh-4rem)]', 'md:max-h-[800px]'],
+				full: ['h-full'],
+			},
+		},
+		defaultVariants: {
+			size: 'md',
+		},
+	}
+)
+
+export type ModalScrollVariant = typeof modalScrollVariants
diff --git a/src/components/offline-indicator.tsx b/src/components/ui/offline-indicator/offline-indicator.tsx
similarity index 97%
rename from src/components/offline-indicator.tsx
rename to src/components/ui/offline-indicator/offline-indicator.tsx
index 663b2a54..97d94e3e 100644
--- a/src/components/offline-indicator.tsx
+++ b/src/components/ui/offline-indicator/offline-indicator.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '../icons'
+import { Icon } from '@/src/icons'
 
 type OfflineIndicatorMode = 'badge' | 'status' | 'notification'
 
diff --git a/src/components/pagination/pagination.tsx b/src/components/ui/pagination/pagination.tsx
similarity index 88%
rename from src/components/pagination/pagination.tsx
rename to src/components/ui/pagination/pagination.tsx
index c8a20e36..6fdc88d1 100644
--- a/src/components/pagination/pagination.tsx
+++ b/src/components/ui/pagination/pagination.tsx
@@ -1,3 +1,4 @@
+import { twMerge } from 'tailwind-merge'
 import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
 
@@ -23,7 +24,12 @@ export function Pagination({
 	}
 
 	return (
-		<div className={`flex items-center justify-center mt-2 space-x-2 ${className}`}>
+		<div
+			className={twMerge(
+				'flex items-center justify-center mt-2 space-x-2',
+				className
+			)}
+		>
 			<Button
 				onClick={onPrevPage}
 				disabled={currentPage === 1 || isLoading}
diff --git a/src/components/portal/portal.tsx b/src/components/ui/portal/portal.tsx
similarity index 100%
rename from src/components/portal/portal.tsx
rename to src/components/ui/portal/portal.tsx
diff --git a/src/components/ui/section-panel/section-panel.tsx b/src/components/ui/section-panel/section-panel.tsx
new file mode 100644
index 00000000..240d6e80
--- /dev/null
+++ b/src/components/ui/section-panel/section-panel.tsx
@@ -0,0 +1,38 @@
+import type { VariantProps } from 'class-variance-authority'
+import type { ReactNode } from 'react'
+import React from 'react'
+import { cn } from '@/common/utils/cn'
+import {
+	sectionPanelContentVariants,
+	sectionPanelHeaderVariants,
+	sectionPanelTitleVariants,
+	sectionPanelVariants,
+} from './section-panel.variants'
+
+export interface SectionPanelProps extends VariantProps<typeof sectionPanelVariants> {
+	title: ReactNode
+	children: ReactNode
+	delay?: number
+	icon?: React.ReactElement
+	className?: string
+}
+
+export function SectionPanel({
+	title,
+	children,
+	size,
+	icon,
+	className,
+}: SectionPanelProps) {
+	return (
+		<div className={cn(sectionPanelVariants({ size }), className)}>
+			<div className={sectionPanelHeaderVariants({ size })}>
+				<div className="flex items-center gap-2">
+					{icon && React.cloneElement(icon, {})}
+					<h3 className={sectionPanelTitleVariants({ size })}>{title}</h3>
+				</div>
+			</div>
+			<div className={sectionPanelContentVariants({ size })}>{children}</div>
+		</div>
+	)
+}
diff --git a/src/components/ui/section-panel/section-panel.variants.ts b/src/components/ui/section-panel/section-panel.variants.ts
new file mode 100644
index 00000000..ca5060b8
--- /dev/null
+++ b/src/components/ui/section-panel/section-panel.variants.ts
@@ -0,0 +1,57 @@
+import { cva } from 'class-variance-authority'
+
+/**
+ * Four slots scale together, so each gets its own cva keyed on the same `size`.
+ * (cva has no multi-slot support — that is tailwind-variants — and four small
+ * configs stay more readable than encoding slot names into one class string.)
+ */
+
+export const sectionPanelVariants = cva(['overflow-hidden', 'duration-300'], {
+	variants: {
+		size: {
+			xs: ['rounded-sm'],
+			sm: ['rounded-lg'],
+			md: ['rounded-xl'],
+			lg: ['rounded-xl'],
+		},
+	},
+	defaultVariants: { size: 'md' },
+})
+
+export const sectionPanelHeaderVariants = cva(['border-b', 'border-content'], {
+	variants: {
+		size: {
+			xs: ['p-1'],
+			sm: ['p-3'],
+			md: ['p-4'],
+			lg: ['p-5'],
+		},
+	},
+	defaultVariants: { size: 'md' },
+})
+
+export const sectionPanelTitleVariants = cva(['font-medium', 'text-content'], {
+	variants: {
+		size: {
+			xs: ['text-sm'],
+			sm: ['text-base'],
+			md: ['text-lg'],
+			lg: ['text-xl'],
+		},
+	},
+	defaultVariants: { size: 'md' },
+})
+
+export const sectionPanelContentVariants = cva([], {
+	variants: {
+		size: {
+			xs: ['p-1'],
+			sm: ['p-3'],
+			md: ['p-4'],
+			lg: ['p-5'],
+		},
+	},
+	defaultVariants: { size: 'md' },
+})
+
+export type SectionPanelVariant = typeof sectionPanelVariants
diff --git a/src/components/selectbox/selectbox.tsx b/src/components/ui/select/select.tsx
similarity index 100%
rename from src/components/selectbox/selectbox.tsx
rename to src/components/ui/select/select.tsx
diff --git a/src/components/tab-navigation.tsx b/src/components/ui/tabs/tabs.tsx
similarity index 54%
rename from src/components/tab-navigation.tsx
rename to src/components/ui/tabs/tabs.tsx
index 9c08d596..0d082d1e 100644
--- a/src/components/tab-navigation.tsx
+++ b/src/components/ui/tabs/tabs.tsx
@@ -1,5 +1,8 @@
-import React, { useId } from 'react'
-import { Motion as motion } from "@/common/motion";
+import type React from 'react'
+import { useId } from 'react'
+import { Motion as motion } from '@/common/motion'
+import { cn } from '@/common/utils/cn'
+import { tabTriggerVariants } from './tabs.variants'
 
 interface TabItem<T> {
 	id: T
@@ -30,15 +33,12 @@ export const TabNavigation = <T,>({
 }: TabNavigationProps<T>) => {
 	const uniqueId = useId()
 
-	const sizeClasses = {
-		small: 'py-1 px-2 text-[10px]',
-		medium: 'py-2 px-2 text-[10px]',
-		large: 'py-3 px-2 text-sm',
-	}
-
 	return (
 		<div
-			className={`flex items-center p-1 bg-base-300/40 rounded-2xl border border-base-content/5 relative ${className}`}
+			className={cn(
+				'flex items-center p-1 bg-base-300/40 rounded-2xl border border-base-content/5 relative',
+				className
+			)}
 		>
 			{tabs.map((tab) => {
 				const isActive = activeTab === tab.id
@@ -47,14 +47,10 @@ export const TabNavigation = <T,>({
 					<button
 						key={tab.id as any}
 						onClick={() => onTabClick(tab.id)}
-						className={`
-                            relative flex items-center justify-center gap-1 
-                            cursor-pointer rounded-xl z-10 
-                            transition-colors duration-200
-                            ${sizeClasses[size]}
-                            ${tabMode === 'simple' || isActive ? 'flex-2' : 'flex-1'}
-                            ${isActive ? `text-base-content/60 text-shadow-2xs font-bold text-icy ${activeTextClass}` : 'text-base-content/50 hover:bg-base-300 hover:text-base-content/30'}
-                        `}
+						className={cn(
+							tabTriggerVariants({ size, tabMode, active: isActive }),
+							isActive && activeTextClass
+						)}
 						type="button"
 					>
 						{tab.icon && <span>{tab.icon}</span>}
@@ -65,7 +61,10 @@ export const TabNavigation = <T,>({
 						{isActive && (
 							<motion.div
 								layoutId={`active-pill-${uniqueId}`}
-								className={`absolute inset-0 shadow-md bg-base-200 rounded-xl -z-10 ${activeBgClass}`}
+								className={cn(
+									'absolute inset-0 shadow-md bg-base-200 rounded-xl -z-10',
+									activeBgClass
+								)}
 								transition={{
 									type: 'spring',
 									stiffness: 500,
diff --git a/src/components/ui/tabs/tabs.variants.ts b/src/components/ui/tabs/tabs.variants.ts
new file mode 100644
index 00000000..0b0774c6
--- /dev/null
+++ b/src/components/ui/tabs/tabs.variants.ts
@@ -0,0 +1,63 @@
+import { cva } from 'class-variance-authority'
+
+/**
+ * Tab trigger.
+ *
+ * `tabMode` controls how a tab shares horizontal space: in `simple` every tab
+ * is wide, in `advanced` only the active one expands. That interaction between
+ * `tabMode` and `active` is what compoundVariants exist for.
+ */
+export const tabTriggerVariants = cva(
+	[
+		'relative',
+		'z-10',
+		'flex',
+		'items-center',
+		'justify-center',
+		'gap-1',
+		'cursor-pointer',
+		'rounded-xl',
+		'transition-colors',
+		'duration-200',
+	],
+	{
+		variants: {
+			size: {
+				small: ['py-1', 'px-2', 'text-[10px]'],
+				medium: ['py-2', 'px-2', 'text-[10px]'],
+				large: ['py-3', 'px-2', 'text-sm'],
+			},
+			tabMode: {
+				simple: [],
+				advanced: [],
+			},
+			active: {
+				true: [
+					'text-base-content/60',
+					'text-shadow-2xs',
+					'font-bold',
+					'text-icy',
+				],
+				false: [
+					'text-base-content/50',
+					'hover:bg-base-300',
+					'hover:text-base-content/30',
+				],
+			},
+		},
+		compoundVariants: [
+			// Simple mode gives every tab the wide basis; advanced mode only the
+			// active one, so inactive tabs shrink to make room for it.
+			{ tabMode: 'simple', class: 'flex-2' },
+			{ tabMode: 'advanced', active: true, class: 'flex-2' },
+			{ tabMode: 'advanced', active: false, class: 'flex-1' },
+		],
+		defaultVariants: {
+			size: 'medium',
+			tabMode: 'advanced',
+			active: false,
+		},
+	}
+)
+
+export type TabTriggerVariant = typeof tabTriggerVariants
diff --git a/src/components/ui/toggle/toggle.tsx b/src/components/ui/toggle/toggle.tsx
new file mode 100644
index 00000000..1c78d6df
--- /dev/null
+++ b/src/components/ui/toggle/toggle.tsx
@@ -0,0 +1,29 @@
+import { cn } from '@/common/utils/cn'
+import { toggleThumbVariants, toggleTrackVariants } from './toggle.variants'
+
+export interface ToggleSwitchProps {
+	enabled: boolean
+	disabled?: boolean
+	loading?: boolean
+	onToggle: () => void
+	className?: string
+}
+
+export const ToggleSwitch = ({
+	enabled,
+	disabled = false,
+	loading = false,
+	onToggle,
+	className,
+}: ToggleSwitchProps) => {
+	const interactive = !disabled && !loading
+
+	return (
+		<div
+			className={cn(toggleTrackVariants({ enabled, interactive }), className)}
+			onClick={interactive ? onToggle : undefined}
+		>
+			<span className={toggleThumbVariants({ enabled, loading })} />
+		</div>
+	)
+}
diff --git a/src/components/ui/toggle/toggle.variants.ts b/src/components/ui/toggle/toggle.variants.ts
new file mode 100644
index 00000000..a7038f15
--- /dev/null
+++ b/src/components/ui/toggle/toggle.variants.ts
@@ -0,0 +1,57 @@
+import { cva } from 'class-variance-authority'
+
+export const toggleTrackVariants = cva(
+	['w-10', 'h-6', 'relative', 'rounded-full', 'transition-colors', 'duration-200'],
+	{
+		variants: {
+			enabled: {
+				true: ['bg-primary'],
+				false: ['bg-base-300'],
+			},
+			interactive: {
+				true: ['cursor-pointer', 'active:scale-95'],
+				false: ['cursor-not-allowed', 'opacity-70'],
+			},
+		},
+		defaultVariants: {
+			enabled: false,
+			interactive: true,
+		},
+	}
+)
+
+export const toggleThumbVariants = cva(
+	[
+		'absolute',
+		'w-4',
+		'h-4',
+		'top-1',
+		'left-1',
+		'rounded-full',
+		'bg-white',
+		'shadow-sm',
+		'transition-transform',
+		'duration-300',
+		'ease-out',
+	],
+	{
+		variants: {
+			// The track is LTR-fixed (a switch is not a directional control), so
+			// these translate values are intentionally not logical properties.
+			enabled: {
+				true: ['translate-x-0'],
+				false: ['translate-x-4'],
+			},
+			loading: {
+				true: ['animate-bounce'],
+				false: [],
+			},
+		},
+		defaultVariants: {
+			enabled: false,
+			loading: false,
+		},
+	}
+)
+
+export type ToggleTrackVariant = typeof toggleTrackVariants
diff --git a/src/components/clickable-tooltip.tsx b/src/components/ui/tooltip/clickable-tooltip.tsx
similarity index 100%
rename from src/components/clickable-tooltip.tsx
rename to src/components/ui/tooltip/clickable-tooltip.tsx
diff --git a/src/components/tool-tip.tsx b/src/components/ui/tooltip/tooltip.tsx
similarity index 97%
rename from src/components/tool-tip.tsx
rename to src/components/ui/tooltip/tooltip.tsx
index 4212ab9f..a93ae845 100644
--- a/src/components/tool-tip.tsx
+++ b/src/components/ui/tooltip/tooltip.tsx
@@ -1,3 +1,4 @@
+import { twMerge } from 'tailwind-merge'
 import { Motion as motion, Presence } from '@/common/motion'
 import { type ReactNode, useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
@@ -24,7 +25,7 @@ interface TooltipProps {
 	alwaysShow?: boolean
 }
 
-const Tooltip = ({
+export const Tooltip = ({
 	children,
 	content,
 	position = 'top',
@@ -207,7 +208,7 @@ const Tooltip = ({
 		<>
 			<div
 				ref={triggerRef}
-				className={`inline-block ${className}`}
+				className={twMerge('inline-block', className)}
 				onMouseEnter={showTooltip}
 				onMouseLeave={hideTooltip}
 				onFocus={showTooltip}
@@ -221,7 +222,7 @@ const Tooltip = ({
 					<Presence>
 						<motion.div
 							ref={tooltipRef}
-							className={`tooltip fixed rounded-lg py-1.5 px-3 text-xs max-w-xs bg-content shadow-lg z-[9999] ${contentClassName}`}
+							className={`tooltip fixed rounded-lg py-1.5 px-3 text-xs max-w-xs bg-content shadow-lg z-tooltip ${contentClassName}`}
 							style={{
 								left: tooltipCoords.x,
 								top: tooltipCoords.y,
@@ -243,5 +244,3 @@ const Tooltip = ({
 		</>
 	)
 }
-
-export default Tooltip
diff --git a/src/components/update-release-notes-modal.tsx b/src/components/update-release-notes-modal.tsx
index 0a34832c..14f470cb 100644
--- a/src/components/update-release-notes-modal.tsx
+++ b/src/components/update-release-notes-modal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Button } from './button/button'
-import Modal from './modal'
+import { Modal } from '@/components/ui'
 
 type UpdateReleaseNotesModalProps = {
 	isOpen: boolean
diff --git a/src/components/updater/updater.tsx b/src/components/updater/updater.tsx
index 9d728ab2..f36ebc1d 100644
--- a/src/components/updater/updater.tsx
+++ b/src/components/updater/updater.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { Button } from '@/components/button/button'
 import { getMainClient } from '@/services/api'
 import { Icon } from '@/src/icons'
@@ -90,7 +90,7 @@ export function UpdateChecker() {
 	return (
 		<>
 			{showNotification && (
-				<div className="fixed right-0 top-1/3 -translate-y-1/2 z-[9999] group">
+				<div className="fixed right-0 top-1/3 -translate-y-1/2 z-popover group">
 					<div
 						onClick={handleOpenModal}
 						className="absolute right-0 flex items-center justify-center gap-2 px-1 py-6 transition-all duration-300 shadow-2xl cursor-pointer bg-gradient-to-br from-primary to-primary/90 rounded-l-2xl group-hover:opacity-0"
diff --git a/src/components/user/user-card-portal.tsx b/src/components/user/user-card-portal.tsx
index 7f6a03e5..95c1f4ef 100644
--- a/src/components/user/user-card-portal.tsx
+++ b/src/components/user/user-card-portal.tsx
@@ -67,12 +67,11 @@ export function UserCardPortal({
 	return createPortal(
 		<div
 			ref={cardRef}
-			className="fixed z-50 shadow-lg min-w-64 max-w-64"
+			className="fixed z-popover shadow-lg min-w-64 max-w-64"
 			style={{
 				top: `${position.top}px`,
 				left: `${position.left}px`,
 				transform: 'translateX(-50%)',
-				zIndex: 99999,
 			}}
 			dir="ltr"
 		>
diff --git a/src/components/user/user-card.tsx b/src/components/user/user-card.tsx
index 8686c091..00ed89f6 100644
--- a/src/components/user/user-card.tsx
+++ b/src/components/user/user-card.tsx
@@ -1,7 +1,7 @@
 import { useAuth } from '@/context/auth.context'
 import { useSendFriendRequest } from '@/services/hooks/friends/friend-service.hook'
 import { translateError } from '@/common/utils/translate-error'
-import { AvatarComponent } from '../avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { Button } from '../button/button'
 import type { UserCardUser } from './user-card-portal'
 import { showToast } from '@/common/toast'
@@ -43,10 +43,10 @@ export function UserCard({ user, className = '' }: UserCardProps) {
 		<div className={`${className}`}>
 			<div
 				className={
-					'flex flex-col overflow-hidden border border-gray-700 rounded-lg shadow-xl bg-widget widget-wrapper'
+					'flex flex-col overflow-hidden border border-content rounded-widget elevation-lg bg-content bg-glass'
 				}
 			>
-				<div className="w-full h-16 bg-gray-900"></div>
+				<div className="w-full h-16 bg-raised"></div>
 
 				<div className="px-4 pb-4">
 					<div className="relative mb-3 -mt-8">
@@ -55,7 +55,7 @@ export function UserCard({ user, className = '' }: UserCardProps) {
 								url={user.avatar}
 								placeholder={user.username || ''}
 								size="xl"
-								className="w-16 h-16 overflow-hidden border-2 border-gray-800 rounded-full"
+								className="w-16 h-16 overflow-hidden border-2 border-content rounded-full"
 							/>
 							{showManageFriend ? (
 								<div className={'w-24 top-9 absolute -right-3'} dir="rtl">
@@ -64,7 +64,7 @@ export function UserCard({ user, className = '' }: UserCardProps) {
 											<Button
 												size="xs"
 												rounded="md"
-												className="flex items-center  !text-[10px]  text-gray-100"
+												className="flex items-center !text-[10px]"
 												isPrimary={true}
 												loading={isSending}
 												loadingText="در حال ارسال..."
@@ -97,7 +97,7 @@ export function UserCard({ user, className = '' }: UserCardProps) {
 						</div>
 
 						{user.extras?.activity && (
-							<div className="flex items-center mt-2 text-sm text-gray-300">
+							<div className="flex items-center mt-2 text-sm text-muted">
 								<span className={'text-content opacity-85'}>
 									{user.extras.activity}
 								</span>
diff --git a/src/components/welcome-wizard.tsx b/src/components/welcome-wizard.tsx
index e2fd175e..8a1e1d5f 100644
--- a/src/components/welcome-wizard.tsx
+++ b/src/components/welcome-wizard.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { Button } from '@/components/button/button'
 import {
 	useGetOccupations,
@@ -7,8 +7,8 @@ import {
 } from '@/services/hooks/profile/get-profile-meta.hook'
 import { TextInput } from '@/components/text-input'
 import { sleep } from '@/common/utils/timeout'
-import { Chip } from '@/components/chip.component'
-import { ItemSelector } from './item-selector'
+import { Chip } from '@/components/ui'
+import { ItemSelector } from '@/components/ui'
 import { useSetupWizard } from '@/services/hooks/auth/auth-service.hook'
 import { showToast } from '@/common/toast'
 import { safeAwait } from '@/services/api'
diff --git a/src/layouts/bookmark/bookmark-grid.tsx b/src/layouts/bookmark/bookmark-grid.tsx
index 62b784b1..0dd6029b 100644
--- a/src/layouts/bookmark/bookmark-grid.tsx
+++ b/src/layouts/bookmark/bookmark-grid.tsx
@@ -1,7 +1,7 @@
 import { rectSortingStrategy, SortableContext } from '@dnd-kit/sortable'
 import { useIsMutating } from '@tanstack/react-query'
 import Analytics from '@/analytics'
-import { ConfirmationModal } from '@/components/modal/confirmation-modal'
+import { ConfirmationModal } from '@/components/ui'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import type { Bookmark, FolderPathItem } from './types/bookmark.types'
 import { openBookmarksOptimized } from './utils/tab-manager'
diff --git a/src/layouts/bookmark/components/bookmark-empty-slot.tsx b/src/layouts/bookmark/components/bookmark-empty-slot.tsx
index 5c2cfc0d..50327231 100644
--- a/src/layouts/bookmark/components/bookmark-empty-slot.tsx
+++ b/src/layouts/bookmark/components/bookmark-empty-slot.tsx
@@ -31,7 +31,7 @@ export function EmptyBookmarkSlot({
 						<Icon name="bookmarkPlus" size={38} className="opacity-50" />
 					</div>
 				) : (
-					<div className="flex items-center justify-center w-6 h-6 rounded-full bg-gray-500/20"></div>
+					<div className="flex items-center justify-center w-6 h-6 rounded-full bg-base-content/20"></div>
 				)}
 			</div>
 
diff --git a/src/layouts/bookmark/components/bookmark-folder.tsx b/src/layouts/bookmark/components/bookmark-folder.tsx
index 9b4ef2e5..d55dd3d0 100644
--- a/src/layouts/bookmark/components/bookmark-folder.tsx
+++ b/src/layouts/bookmark/components/bookmark-folder.tsx
@@ -47,9 +47,9 @@ export function FolderBookmarkItem({
 		}
 
 		return isHovered ? (
-			<Icon name="folderOpen" className="w-8 h-8 text-blue-400" />
+			<Icon name="folderOpen" className="w-8 h-8 text-primary" />
 		) : (
-			<Icon name="folder" className="w-8 h-8 text-blue-400" />
+			<Icon name="folder" className="w-8 h-8 text-primary" />
 		)
 	}
 
diff --git a/src/layouts/bookmark/components/bookmark-icon.picker.tsx b/src/layouts/bookmark/components/bookmark-icon.picker.tsx
index 6e880a77..0a3468a6 100644
--- a/src/layouts/bookmark/components/bookmark-icon.picker.tsx
+++ b/src/layouts/bookmark/components/bookmark-icon.picker.tsx
@@ -72,7 +72,7 @@ export function BookmarkIconPicker({ value, url, onChange }: Props) {
 				onDragLeave={() => setIsDragging(false)}
 				onDrop={handleDrop}
 				className={`relative w-12 h-10 flex items-center justify-center cursor-pointer border-2 rounded-xl transition
-					${isDragging ? 'border-blue-400' : 'border-base-300'}
+					${isDragging ? 'border-primary' : 'border-base-300'}
 				`}
 			>
 				{iconSrc && !error ? (
diff --git a/src/layouts/bookmark/components/bookmark-suggestions.tsx b/src/layouts/bookmark/components/bookmark-suggestions.tsx
index 334bbb8b..4206b1b8 100644
--- a/src/layouts/bookmark/components/bookmark-suggestions.tsx
+++ b/src/layouts/bookmark/components/bookmark-suggestions.tsx
@@ -1,4 +1,4 @@
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import {
 	type BookmarkSuggestion,
 	useGetSuggestedBookmarks,
diff --git a/src/layouts/bookmark/components/folder-header.tsx b/src/layouts/bookmark/components/folder-header.tsx
index e162f602..23d64b47 100644
--- a/src/layouts/bookmark/components/folder-header.tsx
+++ b/src/layouts/bookmark/components/folder-header.tsx
@@ -1,8 +1,8 @@
 import { useState } from 'react'
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
-import Tooltip from '@/components/tool-tip'
+import { Modal } from '@/components/ui'
+import { Tooltip } from '@/components/ui'
 import type { FolderPathItem } from '../types/bookmark.types'
 import { FolderPath } from './folder-path'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/bookmark/components/folder-path.tsx b/src/layouts/bookmark/components/folder-path.tsx
index 25fc08c3..635916c3 100644
--- a/src/layouts/bookmark/components/folder-path.tsx
+++ b/src/layouts/bookmark/components/folder-path.tsx
@@ -34,7 +34,7 @@ export function FolderPath({ folderPath, onNavigate, className }: FolderPathProp
 						<button
 							onClick={() => onNavigate(item.id, index)}
 							className={
-								'cursor-pointer transition-colors text-blue-400 hover:text-blue-300'
+								'cursor-pointer transition-colors text-primary hover:text-primary/70'
 							}
 							aria-label={`Go to ${item.title} folder`}
 						>
diff --git a/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx b/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
index 846303be..738bfd25 100644
--- a/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
+++ b/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
-import { TextInput } from '@/components/text-input'
+import { Modal } from '@/components/ui'
+import { TextInput } from '@/components/ui'
 import { Icon } from '@/src/icons'
 import type { BookmarkType } from '../../types/bookmark.types'
 import { BookmarkSuggestions } from '../bookmark-suggestions'
diff --git a/src/layouts/bookmark/components/modal/advanced.modal.tsx b/src/layouts/bookmark/components/modal/advanced.modal.tsx
index 85e42d42..33404c88 100644
--- a/src/layouts/bookmark/components/modal/advanced.modal.tsx
+++ b/src/layouts/bookmark/components/modal/advanced.modal.tsx
@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
-import PopoverColorPicker from '@/components/popover-color-picker'
+import { Modal } from '@/components/ui'
+import { ColorPicker } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { getEmojiList } from '@/services/emoji/emoji-api'
 import { BookmarkItem } from '../bookmark-item'
@@ -100,7 +100,7 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 		if (isLoadingEmojis) {
 			return (
 				<div className="flex items-center justify-center w-full p-4">
-					<div className="w-6 h-6 border-2 rounded-full border-t-blue-500 border-blue-500/30 animate-spin"></div>
+					<div className="w-6 h-6 border-2 rounded-full border-t-primary border-primary/30 animate-spin"></div>
 				</div>
 			)
 		}
@@ -114,8 +114,8 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 						className={`flex items-center justify-center w-7 h-7 cursor-pointer rounded-lg transition-all duration-150 ease-in-out
 							${
 								sticker === url
-									? 'bg-blue-500/25 border-2 border-blue-500 transform scale-110'
-									: 'border border-transparent hover:bg-gray-500/10 active:bg-gray-500/20'
+									? 'bg-primary/25 border-2 border-primary transform scale-110'
+									: 'border border-transparent hover:bg-base-content/10 active:bg-base-content/20'
 							}`}
 					>
 						<img
@@ -173,7 +173,7 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 							debounce={true}
 						/>
 						<div className="absolute flex items-center gap-2 -translate-y-1/2 right-1 top-1/2">
-							<PopoverColorPicker
+							<ColorPicker
 								color={background || ''}
 								onChange={setBackground}
 							/>
@@ -203,7 +203,7 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 							debounce={true}
 						/>
 						<div className="absolute flex items-center gap-2 -translate-y-1/2 right-1 top-1/2">
-							<PopoverColorPicker
+							<ColorPicker
 								color={textColor || ''}
 								onChange={setTextColor}
 							/>
@@ -266,7 +266,7 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 								type="button"
 								onClick={() => handleEmojiSelect(sticker)}
 								className={
-									'px-3 py-1.5 cursor-pointer text-xs rounded-md text-red-600 hover:bg-red-50'
+									'px-3 py-1.5 cursor-pointer text-xs rounded-md text-error hover:bg-error/10'
 								}
 							>
 								حذف
diff --git a/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx b/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx
index 52901a10..d53e172c 100644
--- a/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx
+++ b/src/layouts/bookmark/components/modal/bookmark-context-menu.tsx
@@ -1,4 +1,4 @@
-import { ContextMenu } from '@/components/context-menu.component'
+import { ContextMenu } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface BookmarkContextMenuProps {
diff --git a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
index 603620ff..76f60b48 100644
--- a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
+++ b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
@@ -1,7 +1,7 @@
 import { getFaviconFromUrl } from '@/common/utils/icon'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
-import { TextInput } from '@/components/text-input'
+import { Modal } from '@/components/ui'
+import { TextInput } from '@/components/ui'
 import { useEffect, useState } from 'react'
 import type { Bookmark } from '../../types/bookmark.types'
 import { type IconSourceType, ShowAdvancedButton } from '../shared'
diff --git a/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx b/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx
index 61ff111f..8c370254 100644
--- a/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx
+++ b/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx
@@ -5,7 +5,7 @@ import { getFaviconFromUrl } from '@/common/utils/icon'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { Icon } from '@/src/icons'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useBookmarkStore } from '../../context/bookmark.context'
 import { MAX_BROWSER_IMPORT_ITEMS } from '../../constants/browser-import.constant'
 import type { BrowserImportNode } from '../../types/bookmark.types'
diff --git a/src/layouts/bookmark/components/shared.tsx b/src/layouts/bookmark/components/shared.tsx
index d1bb2925..8a2a8570 100644
--- a/src/layouts/bookmark/components/shared.tsx
+++ b/src/layouts/bookmark/components/shared.tsx
@@ -1,4 +1,4 @@
-import { ItemSelector } from '@/components/item-selector'
+import { ItemSelector } from '@/components/ui'
 import type { BookmarkType } from '../types/bookmark.types'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/explorer/components/content-site.tsx b/src/layouts/explorer/components/content-site.tsx
index 11a4e842..50f89d7f 100644
--- a/src/layouts/explorer/components/content-site.tsx
+++ b/src/layouts/explorer/components/content-site.tsx
@@ -1,4 +1,4 @@
-import { NewBadge } from '@/components/badges/new.badge'
+import { NewBadge } from '@/components/ui'
 import type { CatalogItem } from '../interfaces/catalog-item.interface'
 
 interface SiteProp {
diff --git a/src/layouts/friends/components/activities.tsx b/src/layouts/friends/components/activities.tsx
index 6587f34e..112d5873 100644
--- a/src/layouts/friends/components/activities.tsx
+++ b/src/layouts/friends/components/activities.tsx
@@ -4,7 +4,7 @@ import { useAuth } from '@/context/auth.context'
 import { ActivityCard } from './activity-card/activity-card'
 import { ManageActivityBottomSheet } from './activity-card/manage-activity.bottom-sheet'
 import { EmptyActivityCard } from './activity-card/empty-activity-card'
-import { Dropdown } from '@/components/dropdown'
+import { Dropdown } from '@/components/ui'
 
 export const ActiveFriendsHorizontal = () => {
 	const { user } = useAuth()
diff --git a/src/layouts/friends/components/activity-card/activity-card.tsx b/src/layouts/friends/components/activity-card/activity-card.tsx
index ef21a11f..d871fd47 100644
--- a/src/layouts/friends/components/activity-card/activity-card.tsx
+++ b/src/layouts/friends/components/activity-card/activity-card.tsx
@@ -1,5 +1,5 @@
-import { AvatarComponent } from '@/components/avatar.component'
-import { Dropdown } from '@/components/dropdown'
+import { AvatarComponent } from '@/components/ui'
+import { Dropdown } from '@/components/ui'
 import {
 	type AttachmentReaction,
 	type ReactionKey,
diff --git a/src/layouts/friends/components/activity-card/empty-activity-card.tsx b/src/layouts/friends/components/activity-card/empty-activity-card.tsx
index 1c8d9e2c..00c77ccc 100644
--- a/src/layouts/friends/components/activity-card/empty-activity-card.tsx
+++ b/src/layouts/friends/components/activity-card/empty-activity-card.tsx
@@ -1,4 +1,4 @@
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface EmptyActivityCardProps {
diff --git a/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx b/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx
index 645060c2..436dfe82 100644
--- a/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx
+++ b/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useRemoveActivity, useSetActivity } from '@/services/hooks/user/user-service.hook'
 import { translateError } from '@/common/utils/translate-error'
 import { playAlarm } from '@/common/play-alarm'
@@ -11,11 +11,11 @@ import {
 } from '@/services/hooks/friends/friend-service.hook'
 import { MakeSkeletonFriendItem } from '../friend-item/friend-item.skeleton'
 import { GetContentFromReactions, RenderReactionContent } from './activity-reaction'
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { callEvent } from '@/common/utils/call-event'
-import { Chip } from '@/components/chip.component'
-import { SelectBox } from '@/components/selectbox/selectbox'
-import Tooltip from '@/components/tool-tip'
+import { Chip } from '@/components/ui'
+import { SelectBox } from '@/components/ui'
+import { Tooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface ManageActivityBottomSheetProps {
diff --git a/src/layouts/friends/components/add-friend.bottom-sheet.tsx b/src/layouts/friends/components/add-friend.bottom-sheet.tsx
index d12a40eb..74f019f4 100644
--- a/src/layouts/friends/components/add-friend.bottom-sheet.tsx
+++ b/src/layouts/friends/components/add-friend.bottom-sheet.tsx
@@ -5,7 +5,7 @@ import { useAuth } from '@/context/auth.context'
 import { useSendFriendRequest } from '@/services/hooks/friends/friend-service.hook'
 import { translateError } from '@/common/utils/translate-error'
 import { showToast } from '@/common/toast'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface AddFriendBottomSheetProps {
@@ -93,10 +93,10 @@ export function AddFriendBottomSheet({ isOpen, onClose }: AddFriendBottomSheetPr
 				</div>
 
 				{!canSendRequest && (
-					<div className="flex items-start gap-3 p-4 border rounded-xl bg-yellow-500/10 border-yellow-500/20">
+					<div className="flex items-start gap-3 p-4 border rounded-xl bg-warning/10 border-warning/20">
 						<Icon
 							name="alert"
-							className="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5"
+							className="w-5 h-5 text-warning flex-shrink-0 mt-0.5"
 						/>
 						<p className="text-sm leading-relaxed text-warning">
 							برای ارسال درخواست دوستی، ابتدا باید نام کاربری خود را در بخش
@@ -127,7 +127,7 @@ export function AddFriendBottomSheet({ isOpen, onClose }: AddFriendBottomSheetPr
 						/>
 
 						{translatedError && (
-							<p className="flex items-center gap-1 text-sm text-red-500">
+							<p className="flex items-center gap-1 text-sm text-error">
 								<Icon name="alert" className="w-4 h-4" />
 								{translatedError}
 							</p>
diff --git a/src/layouts/friends/components/buttons/friend-requests.button.tsx b/src/layouts/friends/components/buttons/friend-requests.button.tsx
index de9f5cba..ea795d33 100644
--- a/src/layouts/friends/components/buttons/friend-requests.button.tsx
+++ b/src/layouts/friends/components/buttons/friend-requests.button.tsx
@@ -19,7 +19,7 @@ export function FriendRequestsButton({ size, pendingCount }: Prop) {
 					<Icon name="inbox" className="w-4 h-4" />
 					<span className="text-sm font-medium">درخواست‌ها</span>
 					{pendingCount ? (
-						<div className="absolute flex items-center justify-center w-3 h-3 text-[.5rem] z-20 font-bold text-white bg-red-500 rounded-full -top-1 -right-1 p-0.5 text-center ">
+						<div className="absolute flex items-center justify-center w-3 h-3 text-[.5rem] z-20 font-bold text-white bg-error rounded-full -top-1 -right-1 p-0.5 text-center ">
 							{pendingCount}
 						</div>
 					) : (
@@ -36,7 +36,7 @@ export function FriendRequestsButton({ size, pendingCount }: Prop) {
 						className="w-4 h-4 text-base-content/90 group-hover:text-base-content/70"
 					/>
 					{pendingCount ? (
-						<div className="absolute flex items-center justify-center w-3 h-3 text-[.5rem] z-20 font-bold text-white bg-red-500 rounded-full -top-1 -right-1 p-0.5 text-center ">
+						<div className="absolute flex items-center justify-center w-3 h-3 text-[.5rem] z-20 font-bold text-white bg-error rounded-full -top-1 -right-1 p-0.5 text-center ">
 							{pendingCount}
 						</div>
 					) : (
diff --git a/src/layouts/friends/components/friend-item/friend.item.tsx b/src/layouts/friends/components/friend-item/friend.item.tsx
index ef8cc9da..08eb7387 100644
--- a/src/layouts/friends/components/friend-item/friend.item.tsx
+++ b/src/layouts/friends/components/friend-item/friend.item.tsx
@@ -1,4 +1,4 @@
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 
 interface Prop {
 	avatar: string
diff --git a/src/layouts/friends/components/friend-requests.bottom-sheet.tsx b/src/layouts/friends/components/friend-requests.bottom-sheet.tsx
index eb4785d8..f0f7b1a0 100644
--- a/src/layouts/friends/components/friend-requests.bottom-sheet.tsx
+++ b/src/layouts/friends/components/friend-requests.bottom-sheet.tsx
@@ -7,7 +7,7 @@ import { RemoveFriendButton } from './remove-button'
 import { FriendsList } from './friends-list'
 import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface Prop {
diff --git a/src/layouts/friends/components/friends-list.tsx b/src/layouts/friends/components/friends-list.tsx
index 1f2ebc88..1d907081 100644
--- a/src/layouts/friends/components/friends-list.tsx
+++ b/src/layouts/friends/components/friends-list.tsx
@@ -1,4 +1,4 @@
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { type Friend, useGetFriends } from '@/services/hooks/friends/friend-service.hook'
 import { useInfiniteScroll } from '@/hooks/use-infinite-scroll'
 import { FriendEmptyList } from './empty-list.friend'
diff --git a/src/layouts/friends/components/select-friend.layout.tsx b/src/layouts/friends/components/select-friend.layout.tsx
index 16f9ca7c..9e228926 100644
--- a/src/layouts/friends/components/select-friend.layout.tsx
+++ b/src/layouts/friends/components/select-friend.layout.tsx
@@ -1,4 +1,4 @@
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { useGetFriends, type Friend } from '@/services/hooks/friends/friend-service.hook'
 import { FriendEmptyList } from './empty-list.friend'
 
diff --git a/src/layouts/friends/friends.tsx b/src/layouts/friends/friends.tsx
index f4cbe8ce..bcc94a65 100644
--- a/src/layouts/friends/friends.tsx
+++ b/src/layouts/friends/friends.tsx
@@ -5,7 +5,7 @@ import { showToast } from '@/common/toast'
 import { RemoveFriendButton } from './components/remove-button'
 import { FriendsList } from './components/friends-list'
 import { AddFriendBottomSheet } from './components/add-friend.bottom-sheet'
-import { ConfirmationModal } from '@/components/modal/confirmation-modal'
+import { ConfirmationModal } from '@/components/ui'
 import { FriendRequestsButton } from './components/buttons/friend-requests.button'
 import { useAuth } from '@/context/auth.context'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx b/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
index 37b93e66..de725ff3 100644
--- a/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
+++ b/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
@@ -1,6 +1,6 @@
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { translateError } from '@/common/utils/translate-error'
 import { showToast } from '@/common/toast'
 import { ConfigKey } from '@/common/constant/config.key'
diff --git a/src/layouts/market/market-coins/index.tsx b/src/layouts/market/market-coins/index.tsx
index 0d0ee409..706e53e6 100644
--- a/src/layouts/market/market-coins/index.tsx
+++ b/src/layouts/market/market-coins/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Analytics from '@/analytics'
-import { Pagination } from '@/components/pagination'
+import { Pagination } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { CoinPackageCard } from './components/coin-package-card'
 import { CoinPackagePurchaseModal } from './components/coin-package-purchase-modal'
diff --git a/src/layouts/market/market-container.tsx b/src/layouts/market/market-container.tsx
index 23a111c2..1174abd1 100644
--- a/src/layouts/market/market-container.tsx
+++ b/src/layouts/market/market-container.tsx
@@ -4,7 +4,7 @@ import { MarketWallpaper } from './market-wallpaper'
 import { MarketOtherItems } from './other-items'
 import { UserCoin } from '../setting/tabs/account/components/user-coin'
 import Analytics from '@/analytics'
-import { TabNavigation } from '@/components/tab-navigation'
+import { TabNavigation } from '@/components/ui'
 import { MarketCoins } from './market-coins'
 import { listenEvent } from '@/common/utils/call-event'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/market/market-wallpaper/index.tsx b/src/layouts/market/market-wallpaper/index.tsx
index b4a57eb5..af686de6 100644
--- a/src/layouts/market/market-wallpaper/index.tsx
+++ b/src/layouts/market/market-wallpaper/index.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Analytics from '@/analytics'
-import { Pagination } from '@/components/pagination'
+import { Pagination } from '@/components/ui'
 import { WallpaperItem } from '@/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item'
 import { useGetWallpapers } from '@/services/hooks/wallpapers/get-wallpaper-categories.hook'
 import { useWallpaperContext } from '@/context/wallpaper.context'
diff --git a/src/layouts/market/other-items/components/market-item-purchase-modal.tsx b/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
index 427e485f..e93cf333 100644
--- a/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
+++ b/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
@@ -1,7 +1,7 @@
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
 import { ItemPrice } from '@/components/item-price/item-price'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import type { MarketItem } from '@/services/hooks/market/market.interface'
 import { usePurchaseMarketItem } from '@/services/hooks/market/purchase-market-item.hook'
 import { translateError } from '@/common/utils/translate-error'
diff --git a/src/layouts/market/other-items/index.tsx b/src/layouts/market/other-items/index.tsx
index 7e6861c6..e0366d92 100644
--- a/src/layouts/market/other-items/index.tsx
+++ b/src/layouts/market/other-items/index.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
-import { Pagination } from '@/components/pagination'
+import { Pagination } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useTheme } from '@/context/theme.context'
 import { useGetMarketItems } from '@/services/hooks/market/get-market-items.hook'
@@ -9,7 +9,7 @@ import { MarketItemType, type MarketItem } from '@/services/hooks/market/market.
 import { MarketItemCard } from './components/market-item-card'
 import { MarketItemPurchaseModal } from './components/market-item-purchase-modal'
 import { showToast } from '@/common/toast'
-import { Chip } from '@/components/chip.component'
+import { Chip } from '@/components/ui'
 import { useAppearanceSetting } from '@/context/appearance.context'
 import { usePreviewHandler } from '@/hooks/use-preview-handler'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/mini-apps/components/card/mini-app-card.tsx b/src/layouts/mini-apps/components/card/mini-app-card.tsx
index a39ba62e..a9cbd4df 100644
--- a/src/layouts/mini-apps/components/card/mini-app-card.tsx
+++ b/src/layouts/mini-apps/components/card/mini-app-card.tsx
@@ -1,5 +1,5 @@
 import { getContrastingTextColor } from '@/common/color'
-import { NewBadge } from '@/components/badges/new.badge'
+import { NewBadge } from '@/components/ui'
 import type { MiniApp } from '@/services/hooks/mini-apps/mini-apps-interface'
 
 interface MiniAppCardProps {
diff --git a/src/layouts/mini-apps/mini-app-runner.tsx b/src/layouts/mini-apps/mini-app-runner.tsx
index b19ce20b..9553448f 100644
--- a/src/layouts/mini-apps/mini-app-runner.tsx
+++ b/src/layouts/mini-apps/mini-app-runner.tsx
@@ -6,7 +6,7 @@ import { MiniAppLoadingState } from './states/mini-app-loading'
 import { MiniAppRunnerHeader } from './components/header/runner.header'
 import { MiniAppIframe } from './components/runner/mini-app-iframe.runner'
 import { WebAppAuthGate } from './states/mini-app.auth'
-import { IconLoading } from '@/components/loading/icon-loading'
+import { IconLoading } from '@/components/ui'
 const LOAD_TIMEOUT = 8000
 
 interface Prop {
diff --git a/src/layouts/mini-apps/mini-apps.layout.tsx b/src/layouts/mini-apps/mini-apps.layout.tsx
index 10001485..91e74208 100644
--- a/src/layouts/mini-apps/mini-apps.layout.tsx
+++ b/src/layouts/mini-apps/mini-apps.layout.tsx
@@ -5,7 +5,7 @@ import { useEffect, useRef } from 'react'
 import { MiniAppRunner } from './mini-app-runner'
 import { listenEvent } from '@/common/utils/call-event'
 import Analytics from '@/analytics'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
 const EmptyMiniAppImage = 'https://cdn.widgetify.ir/extension/empty-mini-app.png'
diff --git a/src/layouts/navbar/components/settings-dropdown.tsx b/src/layouts/navbar/components/settings-dropdown.tsx
index 5bee1cf9..f487d306 100644
--- a/src/layouts/navbar/components/settings-dropdown.tsx
+++ b/src/layouts/navbar/components/settings-dropdown.tsx
@@ -4,7 +4,7 @@ import { UI, useAppearanceSetting } from '@/context/appearance.context'
 import { showToast } from '@/common/toast'
 import { Icon } from '@/src/icons'
 import { useAuth } from '@/context/auth.context'
-import { Dropdown } from '@/components/dropdown'
+import { Dropdown } from '@/components/ui'
 
 export const SettingsDropdown = () => {
 	const { isAuthenticated } = useAuth()
diff --git a/src/layouts/navbar/friends-list/friends.navbar.tsx b/src/layouts/navbar/friends-list/friends.navbar.tsx
index 1112e927..e773bc01 100644
--- a/src/layouts/navbar/friends-list/friends.navbar.tsx
+++ b/src/layouts/navbar/friends-list/friends.navbar.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { AuthRequiredModal } from '@/components/auth/auth-required-modal'
 import { useAuth } from '@/context/auth.context'
-import { BottomSheet } from '@/components/bottom-sheet/bottom-sheet'
+import { BottomSheet } from '@/components/ui'
 import { ActiveFriendsHorizontal } from '@/layouts/friends/components/activities'
 import { callEvent, listenEvent } from '@/common/utils/call-event'
 import { FriendRequestsButton } from '@/layouts/friends/components/buttons/friend-requests.button'
@@ -9,7 +9,7 @@ import Analytics from '@/analytics'
 import { Icon } from '@/src/icons'
 
 const renderPendingNotification = (pendingCount: number) => (
-	<div className="absolute flex items-center justify-center w-2 h-2 text-[.4rem] z-20 font-bold text-white bg-red-500 rounded-full top-1 right-1 p-0.5 text-center">
+	<div className="absolute flex items-center justify-center w-2 h-2 text-[.4rem] z-20 font-bold text-white bg-error rounded-full top-1 right-1 p-0.5 text-center">
 		{pendingCount}
 	</div>
 )
diff --git a/src/layouts/navbar/market/market-button.tsx b/src/layouts/navbar/market/market-button.tsx
index 8a8e8d07..cd1e6280 100644
--- a/src/layouts/navbar/market/market-button.tsx
+++ b/src/layouts/navbar/market/market-button.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { listenEvent } from '@/common/utils/call-event'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { MarketContainer } from '@/layouts/market/market-container'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/navbar/navbar.layout.tsx b/src/layouts/navbar/navbar.layout.tsx
index 33955683..61d16eb2 100644
--- a/src/layouts/navbar/navbar.layout.tsx
+++ b/src/layouts/navbar/navbar.layout.tsx
@@ -12,7 +12,7 @@ import { Page, usePage } from '@/context/page.context'
 import { useAuth } from '@/context/auth.context'
 import { BlurModeButton } from '@/components/blur-mode/blur-mode.button'
 import type { UserProfile } from '@/services/hooks/user/user-service.hook'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { SyncAccount } from './sync'
 import { getCurrentDate } from '../widgets/calendar/utils'
 import { useBirthdayConfetti } from '@/hooks/use-birthday-confetti'
@@ -44,6 +44,7 @@ const tabs = [
 		label: 'برنامک‌ها',
 	},
 ]
+
 export function NavbarTabs() {
 	const { page, setPage } = usePage()
 	SyncAccount()
@@ -138,7 +139,7 @@ export function NavbarLayout(): JSX.Element {
 							<span>حالت جابجایی فعال، ویجت هارو جابجا کنید</span>
 							<button
 								onClick={() => toggleCanReOrderWidget()}
-								className="transition-colors hover:text-red-400"
+								className="transition-colors hover:text-error"
 							>
 								<Icon name="close" size={16} />
 							</button>
diff --git a/src/layouts/navbar/profile/profile.tsx b/src/layouts/navbar/profile/profile.tsx
index 6677e944..215cb9d1 100644
--- a/src/layouts/navbar/profile/profile.tsx
+++ b/src/layouts/navbar/profile/profile.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { listenEvent } from '@/common/utils/call-event'
-import { AvatarComponent } from '@/components/avatar.component'
-import Tooltip from '@/components/tool-tip'
+import { AvatarComponent } from '@/components/ui'
+import { Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { UserAccountModal } from '../../setting/tabs/account/user-account.modal'
 import { WelcomeWizard } from '@/components/welcome-wizard'
diff --git a/src/layouts/search/browser-bookmark/bookmark-popover.tsx b/src/layouts/search/browser-bookmark/bookmark-popover.tsx
index f6cfc935..b1393e32 100644
--- a/src/layouts/search/browser-bookmark/bookmark-popover.tsx
+++ b/src/layouts/search/browser-bookmark/bookmark-popover.tsx
@@ -76,7 +76,7 @@ export function BookmarkPopover({ isOpen, onClose, coords }: BookmarkPopoverProp
 
 	return createPortal(
 		<div
-			className="bookmark-popover fixed z-[9999] w-72  border border-base-content/10 shadow-2xl rounded-2xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top-left bg-content bg-glass"
+			className="bookmark-popover fixed z-popover w-72  border border-base-content/10 shadow-2xl rounded-2xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top-left bg-content bg-glass"
 			style={{
 				top: coords.top,
 				left: coords.left,
diff --git a/src/layouts/search/browser-bookmark/browser-bookmark.tsx b/src/layouts/search/browser-bookmark/browser-bookmark.tsx
index 66551c94..09469195 100644
--- a/src/layouts/search/browser-bookmark/browser-bookmark.tsx
+++ b/src/layouts/search/browser-bookmark/browser-bookmark.tsx
@@ -1,11 +1,11 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { useGetSearchboxData } from '@/services/hooks/trends/get-trends'
 import { getFaviconFromUrl } from '@/common/utils/icon'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { BookmarkPopover } from './bookmark-popover'
 import { Page, usePage } from '@/context/page.context'
 import Analytics from '@/analytics'
-import { NewBadge } from '@/components/badges/new.badge'
+import { NewBadge } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 export function BrowserBookmark() {
diff --git a/src/layouts/search/history.portal.tsx b/src/layouts/search/history.portal.tsx
index ec8c7463..00ff6910 100644
--- a/src/layouts/search/history.portal.tsx
+++ b/src/layouts/search/history.portal.tsx
@@ -3,7 +3,7 @@ import { useSearchSuggestions } from '@/services/hooks/search/get-suggest-search
 import { SuggestionSkeleton } from './suggestion/suggestion.skeleton'
 import { useAuth } from '@/context/auth.context'
 import { AutocompleteConsentModal } from './suggestion/autocomplete-consent.modal'
-import { Portal } from '@/components/portal/portal'
+import { Portal } from '@/components/ui'
 import { useSearchHistory } from './hooks/use-search-history'
 import { Suggestions } from './suggestion/suggestions'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/search/image/image-search.button.tsx b/src/layouts/search/image/image-search.button.tsx
index 1c7397d1..842ce983 100644
--- a/src/layouts/search/image/image-search.button.tsx
+++ b/src/layouts/search/image/image-search.button.tsx
@@ -1,5 +1,5 @@
 import Analytics from '@/analytics'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 
 export function ImageSearchButton({ onClick }: { onClick: () => void }) {
 	const onClickHandle = () => {
diff --git a/src/layouts/search/image/image-search.portal.tsx b/src/layouts/search/image/image-search.portal.tsx
index b5ac74a4..6fe10b26 100644
--- a/src/layouts/search/image/image-search.portal.tsx
+++ b/src/layouts/search/image/image-search.portal.tsx
@@ -6,7 +6,7 @@ import Analytics from '@/analytics'
 import { RequireAuth } from '@/components/auth/require-auth'
 import { getMainClient } from '@/services/api'
 import { translateError } from '@/common/utils/translate-error'
-import { Portal } from '@/components/portal/portal'
+import { Portal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface ImageSearchPortalProps {
diff --git a/src/layouts/search/select-engine/engine-selector.tsx b/src/layouts/search/select-engine/engine-selector.tsx
index 6019dc6b..093c1f3a 100644
--- a/src/layouts/search/select-engine/engine-selector.tsx
+++ b/src/layouts/search/select-engine/engine-selector.tsx
@@ -1,6 +1,6 @@
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { Dropdown } from '@/components/dropdown'
+import { Dropdown } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useChangeSearchEngine } from '@/services/hooks/extension/update-setting.hook'
 import { type EngineMeta, useGetSearchboxData } from '@/services/hooks/trends/get-trends'
diff --git a/src/layouts/search/suggestion/autocomplete-consent.modal.tsx b/src/layouts/search/suggestion/autocomplete-consent.modal.tsx
index 70b2d205..ae269806 100644
--- a/src/layouts/search/suggestion/autocomplete-consent.modal.tsx
+++ b/src/layouts/search/suggestion/autocomplete-consent.modal.tsx
@@ -1,6 +1,6 @@
 import { autoFormatErrorToast } from '@/common/toast'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { safeAwait } from '@/services/api'
 import { useUpdateSearchAutocomplete } from '@/services/hooks/extension/update-setting.hook'
 
diff --git a/src/layouts/search/voice/voice-search.button.tsx b/src/layouts/search/voice/voice-search.button.tsx
index f801dcfd..86d0531f 100644
--- a/src/layouts/search/voice/voice-search.button.tsx
+++ b/src/layouts/search/voice/voice-search.button.tsx
@@ -1,5 +1,5 @@
 import Analytics from '@/analytics'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 
 export function VoiceSearchButton({ onClick }: { onClick: () => void }) {
 	const onClickHandle = () => {
diff --git a/src/layouts/search/voice/voice-search.portal.tsx b/src/layouts/search/voice/voice-search.portal.tsx
index 7bf6f8b2..a46a3edf 100644
--- a/src/layouts/search/voice/voice-search.portal.tsx
+++ b/src/layouts/search/voice/voice-search.portal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useVoiceSearch } from './use-voice-search'
-import { Portal } from '@/components/portal/portal'
+import { Portal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface VoiceSearchPortalProps {
diff --git a/src/layouts/setting/setting-modal.tsx b/src/layouts/setting/setting-modal.tsx
index 9b57d268..22c6ade3 100644
--- a/src/layouts/setting/setting-modal.tsx
+++ b/src/layouts/setting/setting-modal.tsx
@@ -1,6 +1,6 @@
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { type TabItem, TabManager } from '@/components/tab-manager'
 import { UpdateReleaseNotesModal } from '@/components/update-release-notes-modal'
 import { AboutUsTab } from './tabs/about-us/about-us'
diff --git a/src/layouts/setting/tabs/about-us/about-us.tsx b/src/layouts/setting/tabs/about-us/about-us.tsx
index 64f2c905..eaedc275 100644
--- a/src/layouts/setting/tabs/about-us/about-us.tsx
+++ b/src/layouts/setting/tabs/about-us/about-us.tsx
@@ -1,4 +1,4 @@
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { ConfigKey } from '../../../../common/constant/config.key'
 import { Icon } from '@/src/icons'
 
@@ -8,7 +8,7 @@ export function AboutUsTab() {
 			<div className="flex flex-col items-center p-3 text-center">
 				<h1
 					className={
-						'mb-1 text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-700 to-indigo-600'
+						'mb-1 text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary'
 					}
 				>
 					ویجتیفای
diff --git a/src/layouts/setting/tabs/account/auth-form/components/input-text-error.tsx b/src/layouts/setting/tabs/account/auth-form/components/input-text-error.tsx
index ddb36cda..83048623 100644
--- a/src/layouts/setting/tabs/account/auth-form/components/input-text-error.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/components/input-text-error.tsx
@@ -9,7 +9,7 @@ const InputTextError: React.FC<InputTextErrorProps> = ({ message, className }) =
 	const hasError = Boolean(message)
 
 	const classes = twMerge(
-		'text-xs text-red-500 flex items-center gap-1.5  transition-all duration-300  ease-in-out overflow-hidden',
+		'text-xs text-error flex items-center gap-1.5  transition-all duration-300  ease-in-out overflow-hidden',
 		hasError
 			? 'opacity-100 translate-y-0 mt-1 min-h-[20px]'
 			: 'opacity-0 -translate-y-1 pointer-events-none',
@@ -27,7 +27,7 @@ const InputTextError: React.FC<InputTextErrorProps> = ({ message, className }) =
 				<>
 					<span
 						aria-hidden="true"
-						className="block w-1.5 h-1.5 bg-red-500 rounded-full shadow-[0_0_4px_1px_rgba(239,68,68,0.6)] flex-shrink-0 animate-pulse"
+						className="block w-1.5 h-1.5 bg-error rounded-full shadow-[0_0_4px_1px_rgba(239,68,68,0.6)] flex-shrink-0 animate-pulse"
 					/>
 					<span className="leading-relaxed">{message}</span>
 				</>
diff --git a/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx b/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx
index f8c6c3a9..098e8b89 100644
--- a/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/components/login-google.button.tsx
@@ -1,4 +1,4 @@
-import { IconLoading } from '@/components/loading/icon-loading'
+import { IconLoading } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import {
 	type AuthResponse,
diff --git a/src/layouts/setting/tabs/account/components/account-verification-status.tsx b/src/layouts/setting/tabs/account/components/account-verification-status.tsx
index 3298f303..f3ee3131 100644
--- a/src/layouts/setting/tabs/account/components/account-verification-status.tsx
+++ b/src/layouts/setting/tabs/account/components/account-verification-status.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/button/button'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface AccountVerificationStatusProps {
diff --git a/src/layouts/setting/tabs/account/components/interests-selector.tsx b/src/layouts/setting/tabs/account/components/interests-selector.tsx
index 5a2b7910..9d0f3117 100644
--- a/src/layouts/setting/tabs/account/components/interests-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/interests-selector.tsx
@@ -1,9 +1,9 @@
 import { useState, useRef } from 'react'
-import { ClickableTooltip } from '@/components/clickable-tooltip'
+import { ClickableTooltip } from '@/components/ui'
 import type { ProfileMetaItem } from '@/services/hooks/profile/get-profile-meta.hook'
 import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
-import { Chip } from '@/components/chip.component'
+import { Chip } from '@/components/ui'
 
 interface InterestsSelectorProps {
 	interests: ProfileMetaItem[]
diff --git a/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx b/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx
index 4aba128a..a304ea69 100644
--- a/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx
@@ -1,5 +1,5 @@
-import Modal from '@/components/modal'
-import { TextInput } from '@/components/text-input'
+import { Modal } from '@/components/ui'
+import { TextInput } from '@/components/ui'
 import { isEmpty, isLessThan } from '@/common/utils/validators'
 import { Button } from '@/components/button/button'
 import {
diff --git a/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx b/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx
index 06122deb..1b8441c9 100644
--- a/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx
@@ -1,5 +1,5 @@
-import Modal from '@/components/modal'
-import { TextInput } from '@/components/text-input'
+import { Modal } from '@/components/ui'
+import { TextInput } from '@/components/ui'
 import { isEmpty, isLessThan } from '@/common/utils/validators'
 import InputTextError from '../../auth-form/components/input-text-error'
 import { Button } from '@/components/button/button'
diff --git a/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx b/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx
index 43a72075..8daf305b 100644
--- a/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/avatar/avatar-crop.modal.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react'
 import Cropper, { Area, Point } from 'react-easy-crop'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { FooterButtons } from '../footer-buttons'
 
 interface Prop {
diff --git a/src/layouts/setting/tabs/account/components/modals/avatar/edit.avatar.tsx b/src/layouts/setting/tabs/account/components/modals/avatar/edit.avatar.tsx
index 2e408c8e..aeed2e1a 100644
--- a/src/layouts/setting/tabs/account/components/modals/avatar/edit.avatar.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/avatar/edit.avatar.tsx
@@ -1,8 +1,8 @@
 import Analytics from '@/analytics'
 import { showToast } from '@/common/toast'
-import { AvatarComponent } from '@/components/avatar.component'
-import Modal from '@/components/modal'
-import { SectionPanel } from '@/components/section-panel'
+import { AvatarComponent } from '@/components/ui'
+import { Modal } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useUpdateUserProfile } from '@/services/hooks/auth/auth-service.hook'
 import { useRef, useState } from 'react'
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
index e7a2d3f6..c09cd371 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
@@ -1,9 +1,9 @@
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useUpdateUserProfile } from '@/services/hooks/auth/auth-service.hook'
 import { useEffect, useState } from 'react'
 import JalaliDatePicker from '../profile-date-picker'
 import moment from 'jalali-moment'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { FooterButtons } from './footer-buttons'
 
 interface Prop {
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-city.tsx b/src/layouts/setting/tabs/account/components/modals/edit-city.tsx
index 2205b587..77f86919 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-city.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-city.tsx
@@ -1,4 +1,4 @@
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { SelectCity } from '../../../general/components/select-city'
 import { FooterButtons } from './footer-buttons'
 
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-email.tsx b/src/layouts/setting/tabs/account/components/modals/edit-email.tsx
index 6f4ed50b..e4308380 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-email.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-email.tsx
@@ -1,4 +1,4 @@
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 
 interface Prop {
 	show: boolean
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx b/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx
index 3d1c8143..aacfa35d 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-gender.tsx
@@ -1,5 +1,5 @@
-import Modal from '@/components/modal'
-import { SectionPanel } from '@/components/section-panel'
+import { Modal } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { useUpdateUserProfile } from '@/services/hooks/auth/auth-service.hook'
 import { useState } from 'react'
 import { FooterButtons } from './footer-buttons'
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
index ba93747c..657aa671 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
@@ -1,9 +1,9 @@
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useUpdateUserProfile } from '@/services/hooks/auth/auth-service.hook'
 import { useEffect, useState } from 'react'
 import { InterestsSelector } from '../interests-selector'
 import { useGetInterests } from '@/services/hooks/profile/get-profile-meta.hook'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { FooterButtons } from './footer-buttons'
 
 interface Prop {
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-name.tsx b/src/layouts/setting/tabs/account/components/modals/edit-name.tsx
index 358e9a75..62f24735 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-name.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-name.tsx
@@ -1,5 +1,5 @@
-import Modal from '@/components/modal'
-import { SectionPanel } from '@/components/section-panel'
+import { Modal } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { useUpdateUserProfile } from '@/services/hooks/auth/auth-service.hook'
 import { useState } from 'react'
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx b/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx
index 7f2c98a4..8bfc8a6b 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-occupation.tsx
@@ -1,9 +1,9 @@
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useUpdateUserProfile } from '@/services/hooks/auth/auth-service.hook'
 import { useState } from 'react'
 import { OccupationSelector } from '../occupation-selector'
 import { useGetOccupations } from '@/services/hooks/profile/get-profile-meta.hook'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { Icon } from '@/src/icons'
 import { FooterButtons } from './footer-buttons'
 
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-username.tsx b/src/layouts/setting/tabs/account/components/modals/edit-username.tsx
index fc4e164c..845562f8 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-username.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-username.tsx
@@ -1,6 +1,6 @@
 import { showToast } from '@/common/toast'
-import Modal from '@/components/modal'
-import { SectionPanel } from '@/components/section-panel'
+import { Modal } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { safeAwait } from '@/services/api'
 import { useUpdateUsername } from '@/services/hooks/auth/auth-service.hook'
diff --git a/src/layouts/setting/tabs/account/components/occupation-selector.tsx b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
index 2350d984..63140dfe 100644
--- a/src/layouts/setting/tabs/account/components/occupation-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
@@ -1,9 +1,9 @@
 import { useState, useRef } from 'react'
-import { ClickableTooltip } from '@/components/clickable-tooltip'
+import { ClickableTooltip } from '@/components/ui'
 import type { ProfileMetaItem } from '@/services/hooks/profile/get-profile-meta.hook'
 import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
-import { Chip } from '@/components/chip.component'
+import { Chip } from '@/components/ui'
 
 interface OccupationSelectorProps {
 	occupations: ProfileMetaItem[]
diff --git a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
index f621724b..7e8501bc 100644
--- a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/button/button'
-import { ClickableTooltip } from '@/components/clickable-tooltip'
+import { ClickableTooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
 import { useRef, useState, useEffect } from 'react'
 
diff --git a/src/layouts/setting/tabs/account/components/profile-display.tsx b/src/layouts/setting/tabs/account/components/profile-display.tsx
index bdc34e8c..1846eaf3 100644
--- a/src/layouts/setting/tabs/account/components/profile-display.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-display.tsx
@@ -1,10 +1,10 @@
 import moment from 'jalali-moment'
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { Button } from '@/components/button/button'
-import { OfflineIndicator } from '@/components/offline-indicator'
+import { OfflineIndicator } from '@/components/ui'
 import { UserCoin } from './user-coin'
 import type React from 'react'
-import { Chip } from '@/components/chip.component'
+import { Chip } from '@/components/ui'
 import { AddPhoneModal } from './modals/add-phone.modal'
 import { useAuth } from '@/context/auth.context'
 import Analytics from '@/analytics'
diff --git a/src/layouts/setting/tabs/account/components/user-coin.tsx b/src/layouts/setting/tabs/account/components/user-coin.tsx
index 9dd38ac8..409bb7e5 100644
--- a/src/layouts/setting/tabs/account/components/user-coin.tsx
+++ b/src/layouts/setting/tabs/account/components/user-coin.tsx
@@ -1,5 +1,5 @@
 import { ConfigKey } from '@/common/constant/config.key'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 
 interface Prop {
 	coins: number
diff --git a/src/layouts/setting/tabs/account/tabs/connection/connections-tab.tsx b/src/layouts/setting/tabs/account/tabs/connection/connections-tab.tsx
index d87cddeb..ab83b7d9 100644
--- a/src/layouts/setting/tabs/account/tabs/connection/connections-tab.tsx
+++ b/src/layouts/setting/tabs/account/tabs/connection/connections-tab.tsx
@@ -1,4 +1,4 @@
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { Connections } from '../user-profile/connections/connections'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx b/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx
index a303236b..850486cd 100644
--- a/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx
+++ b/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/button/button'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { showToast } from '@/common/toast'
 
 interface ReferralCodeSectionProps {
diff --git a/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx b/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx
index 4fddaeba..14e64597 100644
--- a/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx
+++ b/src/layouts/setting/tabs/account/tabs/rewards/components/tasks.tsx
@@ -1,5 +1,5 @@
 import { ConfigKey } from '@/common/constant/config.key'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import type { Task } from '@/services/hooks/user/referrals-service.hook'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/setting/tabs/account/tabs/rewards/rewards-tab.tsx b/src/layouts/setting/tabs/account/tabs/rewards/rewards-tab.tsx
index 363c9aad..ebf3fa3c 100644
--- a/src/layouts/setting/tabs/account/tabs/rewards/rewards-tab.tsx
+++ b/src/layouts/setting/tabs/account/tabs/rewards/rewards-tab.tsx
@@ -1,5 +1,5 @@
 import { ConfigKey } from '@/common/constant/config.key'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { useGetReferrals } from '@/services/hooks/user/referrals-service.hook'
 import { ReferralCodeSection } from './components/referral-code-section'
 import { RewardTasks } from './components/tasks'
@@ -34,7 +34,7 @@ export const RewardsTab = () => {
 					}
 					size="xs"
 				>
-					<div className="p-2 border rounded-2xl bg-gradient-to-br from-primary/5 to-purple-500/5 border-primary/20">
+					<div className="p-2 border rounded-2xl bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20">
 						<div className="flex items-start gap-3">
 							<Icon
 								name="info"
diff --git a/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx b/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx
index 710c9903..02169a1c 100644
--- a/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx
+++ b/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import type { Platform } from './platform-config.js'
 
 interface ConnectionModalProps {
diff --git a/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx b/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
index 4bb46033..740f4ab4 100644
--- a/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
+++ b/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { Button } from '@/components/button/button'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useGetOrCreateReferralCode } from '@/services/hooks/user/referrals-service.hook'
 import {
@@ -12,7 +12,7 @@ import { ProfileDisplay } from '../../components/profile-display'
 import { ReferralCodeSection } from '../rewards/components/referral-code-section'
 import { showToast } from '@/common/toast'
 import { translateError } from '@/common/utils/translate-error'
-import { ConfirmationModal } from '@/components/modal/confirmation-modal'
+import { ConfirmationModal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 export const UserProfile = () => {
@@ -60,7 +60,7 @@ export const UserProfile = () => {
 	if (isLoading) {
 		return (
 			<div className="flex items-center justify-center h-full">
-				<div className="w-10 h-10 border-4 rounded-full border-blue-500/20 border-t-blue-500 animate-spin"></div>
+				<div className="w-10 h-10 border-4 rounded-full border-primary/20 border-t-primary animate-spin"></div>
 			</div>
 		)
 	}
diff --git a/src/layouts/setting/tabs/account/user-account.modal.tsx b/src/layouts/setting/tabs/account/user-account.modal.tsx
index 742a0765..05c1ea84 100644
--- a/src/layouts/setting/tabs/account/user-account.modal.tsx
+++ b/src/layouts/setting/tabs/account/user-account.modal.tsx
@@ -1,4 +1,4 @@
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import AuthForm from './auth-form/auth-form'
 import { SettingModal } from '../../setting-modal'
diff --git a/src/layouts/setting/tabs/appearance/components/browser-title-selector.tsx b/src/layouts/setting/tabs/appearance/components/browser-title-selector.tsx
index 86bb4266..e0192c11 100644
--- a/src/layouts/setting/tabs/appearance/components/browser-title-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/browser-title-selector.tsx
@@ -3,9 +3,9 @@ import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { ItemSelector } from '@/components/item-selector'
+import { ItemSelector } from '@/components/ui'
 import { renderBrowserTitlePreview } from '@/components/market/title/title-render-preview'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { safeAwait } from '@/services/api'
 import { useChangeBrowserTitle } from '@/services/hooks/extension/update-setting.hook'
 import type { UserInventoryItem } from '@/services/hooks/market/market.interface'
diff --git a/src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx b/src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx
index cc6e80a9..b03df9af 100644
--- a/src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx
+++ b/src/layouts/setting/tabs/appearance/components/content-alignment-settings.tsx
@@ -1,5 +1,5 @@
-import { ItemSelector } from '@/components/item-selector'
-import { SectionPanel } from '@/components/section-panel'
+import { ItemSelector } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { UI, useAppearanceSetting } from '@/context/appearance.context'
 
 export function ContentAlignmentSettings() {
diff --git a/src/layouts/setting/tabs/appearance/components/font-selector.tsx b/src/layouts/setting/tabs/appearance/components/font-selector.tsx
index f5e0bc1b..222419d2 100644
--- a/src/layouts/setting/tabs/appearance/components/font-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/font-selector.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
-import { ItemSelector } from '@/components/item-selector'
-import { SectionPanel } from '@/components/section-panel'
+import { ItemSelector } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { useAppearanceSetting } from '@/context/appearance.context'
 import type { UserInventoryItem } from '@/services/hooks/market/market.interface'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
index dde4cedb..b772bf27 100644
--- a/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/theme-selector.tsx
@@ -2,8 +2,8 @@ import type React from 'react'
 import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
-import { ItemSelector } from '@/components/item-selector'
-import { SectionPanel } from '@/components/section-panel'
+import { ItemSelector } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { useTheme } from '@/context/theme.context'
 import type { UserInventoryItem } from '@/services/hooks/market/market.interface'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/setting/tabs/appearance/components/ui-selector.tsx b/src/layouts/setting/tabs/appearance/components/ui-selector.tsx
index ea52d0da..d366c056 100644
--- a/src/layouts/setting/tabs/appearance/components/ui-selector.tsx
+++ b/src/layouts/setting/tabs/appearance/components/ui-selector.tsx
@@ -1,5 +1,5 @@
-import { ItemSelector } from '@/components/item-selector'
-import { SectionPanel } from '@/components/section-panel'
+import { ItemSelector } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { UI, useAppearanceSetting } from '@/context/appearance.context'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/setting/tabs/general/components/select-city.tsx b/src/layouts/setting/tabs/general/components/select-city.tsx
index eedb8fe8..1fda723e 100644
--- a/src/layouts/setting/tabs/general/components/select-city.tsx
+++ b/src/layouts/setting/tabs/general/components/select-city.tsx
@@ -1,8 +1,8 @@
 import { useState, useMemo } from 'react'
 import Analytics from '@/analytics'
-import { IconLoading } from '@/components/loading/icon-loading'
-import Modal from '@/components/modal'
-import { SectionPanel } from '@/components/section-panel'
+import { IconLoading } from '@/components/ui'
+import { Modal } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { useGetCitiesList } from '@/services/hooks/cities/get-cities-list'
 import { useAuth } from '@/context/auth.context'
 import { AuthRequiredModal } from '@/components/auth/auth-required-modal'
diff --git a/src/layouts/setting/tabs/general/components/timezone-settings.tsx b/src/layouts/setting/tabs/general/components/timezone-settings.tsx
index 4587524b..6e9c1592 100644
--- a/src/layouts/setting/tabs/general/components/timezone-settings.tsx
+++ b/src/layouts/setting/tabs/general/components/timezone-settings.tsx
@@ -1,4 +1,4 @@
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { useTimezones } from '@/services/hooks/timezone/get-timezones.hook'
 
@@ -22,10 +22,10 @@ export function TimezoneSettings() {
 					<div className="flex items-center gap-2">
 						{isLoading ? (
 							<div className="flex justify-center w-full p-3">
-								<div className="w-6 h-6 border-2 border-blue-200 rounded-full border-t-blue-500 animate-spin"></div>
+								<div className="w-6 h-6 border-2 border-primary rounded-full border-t-primary animate-spin"></div>
 							</div>
 						) : error ? (
-							<div className="w-full p-3 text-center text-red-500">
+							<div className="w-full p-3 text-center text-error">
 								خطا در دریافت اطلاعات مناطق زمانی
 							</div>
 						) : (
@@ -33,7 +33,7 @@ export function TimezoneSettings() {
 								value={timezone.value}
 								onChange={handleSelectTimezone}
 								className={
-									'w-full rounded-lg appearance-none border-content border select focus:outline-none focus:ring-2 focus:ring-blue-500'
+									'w-full rounded-lg appearance-none border-content border select focus:outline-none focus:ring-2 focus:ring-primary'
 								}
 							>
 								{!timezone && (
diff --git a/src/layouts/setting/tabs/general/general.tsx b/src/layouts/setting/tabs/general/general.tsx
index 05b62eb1..de6b45fd 100644
--- a/src/layouts/setting/tabs/general/general.tsx
+++ b/src/layouts/setting/tabs/general/general.tsx
@@ -1,8 +1,8 @@
-import { ToggleSwitch } from '@/components/toggle-switch.component'
+import { ToggleSwitch } from '@/components/ui'
 import { SelectCity } from './components/select-city'
 import { TimezoneSettings } from './components/timezone-settings'
 import { useGeneralSetting } from '@/context/general-setting.context'
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import Analytics from '@/analytics'
 
 export function GeneralSettingTab() {
diff --git a/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx b/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx
index 6e5010a0..5cedac4b 100644
--- a/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx
+++ b/src/layouts/setting/tabs/privacy/components/search-autocomplete.switch.tsx
@@ -1,5 +1,5 @@
 import { autoFormatErrorToast } from '@/common/toast'
-import { ToggleSwitch } from '@/components/toggle-switch.component'
+import { ToggleSwitch } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { safeAwait } from '@/services/api'
 import { useUpdateSearchAutocomplete } from '@/services/hooks/extension/update-setting.hook'
diff --git a/src/layouts/setting/tabs/privacy/privacy-settings.tsx b/src/layouts/setting/tabs/privacy/privacy-settings.tsx
index 5f556ed3..35b4d922 100644
--- a/src/layouts/setting/tabs/privacy/privacy-settings.tsx
+++ b/src/layouts/setting/tabs/privacy/privacy-settings.tsx
@@ -1,5 +1,5 @@
-import { SectionPanel } from '@/components/section-panel'
-import { ToggleSwitch } from '@/components/toggle-switch.component'
+import { SectionPanel } from '@/components/ui'
+import { ToggleSwitch } from '@/components/ui'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { SearchAutocompleteSwitch } from './components/search-autocomplete.switch'
 
diff --git a/src/layouts/setting/tabs/shortcuts/shortcuts.tsx b/src/layouts/setting/tabs/shortcuts/shortcuts.tsx
index 43c08f06..2a311d45 100644
--- a/src/layouts/setting/tabs/shortcuts/shortcuts.tsx
+++ b/src/layouts/setting/tabs/shortcuts/shortcuts.tsx
@@ -1,4 +1,4 @@
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import React from 'react'
 import { useEffect, useState } from 'react'
 
diff --git a/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx b/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx
index 9f0cf411..99b0c02a 100644
--- a/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx
+++ b/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx
@@ -1,7 +1,7 @@
 import { callEvent } from '@/common/utils/call-event'
 import type { Wallpaper } from '@/common/wallpaper.interface'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { UserCoin } from '@/layouts/setting/tabs/account/components/user-coin'
 import { HoverPlayVideo } from '../tab/gallery/components/hover-play-video'
diff --git a/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx b/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
index d9810d1e..0d55fda7 100644
--- a/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
+++ b/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
@@ -76,7 +76,7 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 					<MediaPreview customWallpaper={customWallpaper} />
 					<div className="absolute inset-0 bg-linear-to-r from-transparent to-black/30"></div>
 
-					<div className="absolute top-1 right-1 px-1.5 py-0.5 text-[10px] font-medium text-white rounded-sm backdrop-blur-md bg-blue-500/80">
+					<div className="absolute top-1 right-1 px-1.5 py-0.5 text-[10px] font-medium text-white rounded-sm backdrop-blur-md bg-primary/80">
 						{customWallpaper.type === 'IMAGE' ? 'تصویر' : 'ویدیو'}
 					</div>
 				</div>
diff --git a/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx b/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx
index c0885b0a..d2858f72 100644
--- a/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx
+++ b/src/layouts/setting/tabs/wallpapers/components/wallpaper-sidebar.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react'
 import type { Category } from '@/common/wallpaper.interface'
 import { Icon } from '@/src/icons'
-import { NewBadge } from '@/components/badges/new.badge'
-import { TabNavigation } from '@/components/tab-navigation'
+import { NewBadge, TabNavigation } from '@/components/ui'
 
 type FilterType = 'all' | 'image' | 'video'
 type FilterAccess = 'all' | 'free' | 'coin'
diff --git a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx
index b7e08287..13c8c831 100644
--- a/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx
+++ b/src/layouts/setting/tabs/wallpapers/tab/gallery/components/wallpaper-item/wallpaper-item.tsx
@@ -3,7 +3,7 @@ import type { Wallpaper } from '@/common/wallpaper.interface'
 import { UserCoin } from '@/layouts/setting/tabs/account/components/user-coin'
 import { CoinPurchaseModal } from '@/layouts/setting/tabs/wallpapers/components/coin-purchase-modal'
 import { useLazyLoad } from '../../../../hooks/use-lazy-load'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { HoverPlayVideo } from '../hover-play-video'
 import { Icon } from '@/src/icons'
 import { UI } from '@/context/appearance.context'
@@ -41,7 +41,7 @@ function WallpaperItemFu({
 
 	const itemOutlineStyle = isSelected
 		? 'ring-2 ring-primary/80 ring-offset-blue-100'
-		: 'ring-1 ring-base-content/10 group-hover:ring-blue-300/70'
+		: 'ring-1 ring-base-content/10 group-hover:ring-primary/70'
 
 	useEffect(() => {
 		if (loaded && videoRef.current && isSelected) {
@@ -90,14 +90,14 @@ function WallpaperItemFu({
 				onClick={handleSelect}
 			>
 				{!loaded && (
-					<div className="flex items-center justify-center w-full h-full bg-gray-900/60 rounded-2xl">
-						<div className="w-5 h-5 border-2 rounded-full border-blue-500/30 border-t-blue-500 animate-spin"></div>
+					<div className="flex items-center justify-center w-full h-full bg-neutral/60 rounded-2xl">
+						<div className="w-5 h-5 border-2 rounded-full border-primary/30 border-t-primary animate-spin"></div>
 					</div>
 				)}
 				{error && (
-					<div className="flex flex-col items-center justify-center w-full h-full bg-red-500/10">
-						<Icon name="outlineHeart" className="text-red-400" />
-						<p className="mt-2 text-xs text-gray-400">خطا در بارگذاری</p>
+					<div className="flex flex-col items-center justify-center w-full h-full bg-error/10">
+						<Icon name="outlineHeart" className="text-error" />
+						<p className="mt-2 text-xs text-muted">خطا در بارگذاری</p>
 					</div>
 				)}
 
diff --git a/src/layouts/simplify/tools-simplify.tsx b/src/layouts/simplify/tools-simplify.tsx
index 8eec2716..023ce3a5 100644
--- a/src/layouts/simplify/tools-simplify.tsx
+++ b/src/layouts/simplify/tools-simplify.tsx
@@ -1,6 +1,6 @@
 import Analytics from '@/analytics'
 import { WidgetContainer } from '../widgets/widget-container'
-import { TabNavigation } from '@/components/tab-navigation'
+import { TabNavigation } from '@/components/ui'
 import React, { useState, Suspense } from 'react'
 import { DateProvider } from '@/context/date.context'
 import { getFromStorage, setToStorage } from '@/common/storage'
@@ -98,7 +98,7 @@ export function SimpleTools() {
 					{ElementData && (
 						<Suspense
 							fallback={
-								<div className="flex items-center justify-center h-full text-sm text-gray-400">
+								<div className="flex items-center justify-center h-full text-sm text-muted">
 									در حال بارگذاری...
 								</div>
 							}
diff --git a/src/layouts/widgetify-card/pets/setting/pet-setting.tsx b/src/layouts/widgetify-card/pets/setting/pet-setting.tsx
index f83c881b..79b3e1ff 100644
--- a/src/layouts/widgetify-card/pets/setting/pet-setting.tsx
+++ b/src/layouts/widgetify-card/pets/setting/pet-setting.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react'
 import { getFromStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { ItemSelector } from '@/components/item-selector'
+import { ItemSelector } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
-import { ToggleSwitch } from '@/components/toggle-switch.component'
+import { ToggleSwitch } from '@/components/ui'
 import { BASE_PET_OPTIONS, PetTypes } from '@/layouts/widgetify-card/pets/pet.context'
 
 export function PetSettings() {
diff --git a/src/layouts/widgetify-card/profile-progress.tsx b/src/layouts/widgetify-card/profile-progress.tsx
index 9af5599b..bdf24dc1 100644
--- a/src/layouts/widgetify-card/profile-progress.tsx
+++ b/src/layouts/widgetify-card/profile-progress.tsx
@@ -73,7 +73,7 @@ const RadialProgressSmall = ({ percentage }: any) => {
 					cy={size / 2}
 					r={radius}
 					fill="none"
-					// className="stroke-blue-100"
+					// className="stroke-primary"
 					className="stroke-base-content/10"
 					strokeWidth={strokeWidth}
 				/>
diff --git a/src/layouts/widgets-settings/manage-widgets/manage-widgets.tsx b/src/layouts/widgets-settings/manage-widgets/manage-widgets.tsx
index b33759d6..cee22246 100644
--- a/src/layouts/widgets-settings/manage-widgets/manage-widgets.tsx
+++ b/src/layouts/widgets-settings/manage-widgets/manage-widgets.tsx
@@ -1,4 +1,4 @@
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import {
 	MAX_VISIBLE_WIDGETS,
@@ -7,7 +7,7 @@ import {
 	type WidgetKeys,
 	widgetItems,
 } from '@/context/widget-visibility.context'
-import { ItemSelector } from '../../../components/item-selector'
+import { ItemSelector } from '@/components/ui'
 import { WidgetSettingWrapper } from '../widget-settings-wrapper'
 import { UI, useAppearanceSetting } from '@/context/appearance.context'
 
@@ -66,7 +66,7 @@ function WidgetItemComponent({
 
 	let extraClasses = ''
 	if (isDisabled) {
-		extraClasses += ' border-red-500/50 bg-red-500/10'
+		extraClasses += ' border-error/50 bg-error/10'
 	}
 	if (isSoon) {
 		extraClasses += 'border border-warning/50'
diff --git a/src/layouts/widgets-settings/widget-settings-modal.tsx b/src/layouts/widgets-settings/widget-settings-modal.tsx
index 1ab3d0e9..f4a4fcb3 100644
--- a/src/layouts/widgets-settings/widget-settings-modal.tsx
+++ b/src/layouts/widgets-settings/widget-settings-modal.tsx
@@ -1,6 +1,6 @@
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { type TabItem, TabManager } from '@/components/tab-manager'
 import { PetSettings } from '../widgetify-card/pets/setting/pet-setting'
 import { RssFeedSetting } from '../widgets/news/rss-feed-setting'
diff --git a/src/layouts/widgets/calendar/components/calendar-grid.tsx b/src/layouts/widgets/calendar/components/calendar-grid.tsx
index 3b60e216..0adc8120 100644
--- a/src/layouts/widgets/calendar/components/calendar-grid.tsx
+++ b/src/layouts/widgets/calendar/components/calendar-grid.tsx
@@ -5,7 +5,7 @@ import type React from 'react'
 import { useState } from 'react'
 import { type WidgetifyDate, formatDateStr } from '../utils'
 import { DayItem } from './day/day'
-import { ClickableTooltip } from '@/components/clickable-tooltip'
+import { ClickableTooltip } from '@/components/ui'
 import { CalendarDayDetails } from './day/tool-tip-content'
 import { useGetCalendarData } from '@/services/hooks/calendar/get-calendar-data.hook'
 
diff --git a/src/layouts/widgets/calendar/components/day/day.tsx b/src/layouts/widgets/calendar/components/day/day.tsx
index 0483d410..f41b61c2 100644
--- a/src/layouts/widgets/calendar/components/day/day.tsx
+++ b/src/layouts/widgets/calendar/components/day/day.tsx
@@ -90,7 +90,7 @@ export function DayItem({
 
 	const getHoverStyle = () => {
 		if (isHoliday) {
-			return 'hover:bg-red-400/10'
+			return 'hover:bg-error/10'
 		}
 
 		return 'hover:bg-primary/10'
@@ -132,7 +132,7 @@ export function DayItem({
 			<div className="flex items-center">
 				{hasEvent && (
 					<span
-						className={`w-0.5 h-0.5 rounded-full ${isHolidayEvent ? 'bg-red-500' : 'bg-blue-500/80'} shadow-sm`}
+						className={`w-0.5 h-0.5 rounded-full ${isHolidayEvent ? 'bg-error' : 'bg-primary/80'} shadow-sm`}
 					/>
 				)}
 			</div>
diff --git a/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx b/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx
index 1f176fd2..cbf5202c 100644
--- a/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx
+++ b/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx
@@ -200,7 +200,7 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 								}`}
 							>
 								<div
-									className={`w-1.5 h-1.5 ml-0.5 -mr-0.5 rounded-full shrink-0 ${event.isHoliday ? 'bg-red-400 animate-pulse ring-2 ring-error/20' : 'bg-primary/80 ring-2 ring-primary/20'} `}
+									className={`w-1.5 h-1.5 ml-0.5 -mr-0.5 rounded-full shrink-0 ${event.isHoliday ? 'bg-error animate-pulse ring-2 ring-error/20' : 'bg-primary/80 ring-2 ring-primary/20'} `}
 								/>
 								<div className="flex-1 min-w-0 text-[11px]">
 									{event.title}
diff --git a/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx b/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx
index fa543002..9af938d9 100644
--- a/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx
+++ b/src/layouts/widgets/calendar/components/google-calendar/google-event.item.tsx
@@ -1,4 +1,4 @@
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface CalendarEventProps {
diff --git a/src/layouts/widgets/combo-widget/combo-widget.layout.tsx b/src/layouts/widgets/combo-widget/combo-widget.layout.tsx
index a27f3be0..2a6a5b32 100644
--- a/src/layouts/widgets/combo-widget/combo-widget.layout.tsx
+++ b/src/layouts/widgets/combo-widget/combo-widget.layout.tsx
@@ -7,7 +7,7 @@ import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { NewsLayout } from '../news/news.layout'
 import { WidgetContainer } from '../widget-container'
 import { WigiArzLayout } from '../wigi-arz/wigi_arz.layout'
-import { TabNavigation } from '@/components/tab-navigation'
+import { TabNavigation } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 export type ComboTabType = 'news' | 'currency'
diff --git a/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx b/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx
index 98790db6..bdbfc5e1 100644
--- a/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx
+++ b/src/layouts/widgets/habit/components/habit-calendar-heatmap.tsx
@@ -7,7 +7,7 @@ import { useLogHabitProgress } from '@/services/hooks/habit/log-habit-progress.h
 import { autoFormatErrorToast, showToast } from '@/common/toast'
 import { HABIT_UNIT_STEP } from '@/common/constant/habit-options'
 import { useQueryClient } from '@tanstack/react-query'
-import { IconLoading } from '@/components/loading/icon-loading'
+import { IconLoading } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface HabitCalendarProps {
diff --git a/src/layouts/widgets/habit/components/habit-detail.modal.tsx b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
index 38761b3b..44b02ef6 100644
--- a/src/layouts/widgets/habit/components/habit-detail.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
@@ -1,10 +1,10 @@
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useGetHabitDetail } from '@/services/hooks/habit/get-habit-detail.hook'
 import { HabitCalendar } from './habit-calendar-heatmap'
 import { useAuth } from '@/context/auth.context'
 import { formatHabitGoal } from '../utils'
 import { Button } from '@/components/button/button'
-import { Dropdown } from '@/components/dropdown'
+import { Dropdown } from '@/components/ui'
 import type { Habit } from '@/services/hooks/habit/habit.interface'
 import { callEvent } from '@/common/utils/call-event'
 import { Icon } from '@/src/icons'
@@ -45,7 +45,7 @@ export function HabitDetailModal({
 		error,
 	} = useGetHabitDetail(habitId || '', isOpen && isAuthenticated)
 
-	const color = habit?.color || '#3b82f6'
+	const color = habit?.color || '#536dfe'
 
 	const title =
 		isLoading || !habit ? (
diff --git a/src/layouts/widgets/habit/components/habit-form.modal.tsx b/src/layouts/widgets/habit/components/habit-form.modal.tsx
index 16d70bbc..aa4264fc 100644
--- a/src/layouts/widgets/habit/components/habit-form.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-form.modal.tsx
@@ -9,8 +9,8 @@ import {
 } from '@/common/constant/habit-options'
 import { showToast } from '@/common/toast'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
-import { SelectBox } from '@/components/selectbox/selectbox'
+import { Modal } from '@/components/ui'
+import { SelectBox } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { safeAwait } from '@/services/api'
 import { useAddHabit } from '@/services/hooks/habit/add-habit.hook'
@@ -23,7 +23,7 @@ import {
 } from '@/services/hooks/habit/habit.interface'
 import { useUpdateHabit } from '@/services/hooks/habit/update-habit.hook'
 import { translateError } from '@/common/utils/translate-error'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import type { HabitIcon } from '@/services/hooks/habit/get-habits.hook'
 import { Motion as motion, Presence } from '@/common/motion'
 
diff --git a/src/layouts/widgets/habit/components/item/habit.item.tsx b/src/layouts/widgets/habit/components/item/habit.item.tsx
index 9dc94ec9..84e22feb 100644
--- a/src/layouts/widgets/habit/components/item/habit.item.tsx
+++ b/src/layouts/widgets/habit/components/item/habit.item.tsx
@@ -12,7 +12,7 @@ import { formatHabitGoal } from '../../utils'
 import { SegmentedProgressRing } from './button.progress-ring'
 import { SimpleProgressRing } from './button.simple-progress-ring'
 import { Icon } from '@/src/icons'
-import { IconLoading } from '@/components/loading/icon-loading'
+import { IconLoading } from '@/components/ui'
 
 interface HabitItemProps {
 	habit: Habit
@@ -24,7 +24,7 @@ interface HabitItemProps {
 export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemProps) {
 	const { mutateAsync: logProgress, isPending } = useLogHabitProgress()
 
-	const color = habit.color || '#3b82f6'
+	const color = habit.color || '#536dfe'
 	const target = habit.target || 1
 	const value = habit.today.value
 	const isSimpleHabit = target === 1
diff --git a/src/layouts/widgets/habit/habits.layout.tsx b/src/layouts/widgets/habit/habits.layout.tsx
index 75890774..5acdbcc5 100644
--- a/src/layouts/widgets/habit/habits.layout.tsx
+++ b/src/layouts/widgets/habit/habits.layout.tsx
@@ -2,8 +2,8 @@ import { useState } from 'react'
 import Analytics from '@/analytics'
 import { autoFormatErrorToast, showToast } from '@/common/toast'
 import { Button } from '@/components/button/button'
-import { ConfirmationModal } from '@/components/modal/confirmation-modal'
-import Tooltip from '@/components/tool-tip'
+import { ConfirmationModal } from '@/components/ui'
+import { Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useDate } from '@/context/date.context'
 import { useGeneralSetting } from '@/context/general-setting.context'
diff --git a/src/layouts/widgets/network/components/network-ip-card.tsx b/src/layouts/widgets/network/components/network-ip-card.tsx
index 0d926db8..50d994ef 100644
--- a/src/layouts/widgets/network/components/network-ip-card.tsx
+++ b/src/layouts/widgets/network/components/network-ip-card.tsx
@@ -1,4 +1,4 @@
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { showToast } from '@/common/toast'
 
 interface NetworkIPCardProps {
diff --git a/src/layouts/widgets/network/components/network-ping-card.tsx b/src/layouts/widgets/network/components/network-ping-card.tsx
index cc76c4e6..53db909e 100644
--- a/src/layouts/widgets/network/components/network-ping-card.tsx
+++ b/src/layouts/widgets/network/components/network-ping-card.tsx
@@ -5,7 +5,7 @@ import {
 	MdOutlineSignalCellularAlt2Bar,
 	MdRouter,
 } from 'react-icons/md'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 
 interface NetworkPingCardProps {
 	ping: number | null
@@ -44,12 +44,12 @@ export function NetworkPingCard({ ping }: NetworkPingCardProps) {
 function getPingIcon(ping: number): JSX.Element {
 	switch (true) {
 		case ping === -1:
-			return <MdOutlineSignalCellularAlt1Bar className={' text-[#A63F3F]'} />
+			return <MdOutlineSignalCellularAlt1Bar className={' text-error'} />
 		case ping <= 100:
-			return <MdOutlineSignalCellularAlt className={' text-[#40CF4E]'} />
+			return <MdOutlineSignalCellularAlt className={' text-success'} />
 		case ping <= 180:
-			return <MdOutlineSignalCellularAlt2Bar className={' text-[#A6893F]'} />
+			return <MdOutlineSignalCellularAlt2Bar className={' text-warning'} />
 		default:
-			return <MdOutlineSignalCellularAlt1Bar className={' text-[#A63F3F]'} />
+			return <MdOutlineSignalCellularAlt1Bar className={' text-error'} />
 	}
 }
diff --git a/src/layouts/widgets/network/network.layout.tsx b/src/layouts/widgets/network/network.layout.tsx
index 5ba48237..8a4e303f 100644
--- a/src/layouts/widgets/network/network.layout.tsx
+++ b/src/layouts/widgets/network/network.layout.tsx
@@ -2,9 +2,9 @@ import type { AxiosError } from 'axios'
 import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { RequireAuth } from '@/components/auth/require-auth'
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { Button } from '@/components/button/button'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { getMainClient, safeAwait } from '@/services/api'
@@ -145,7 +145,7 @@ export function NetworkLayout({ enableBackground, inComboWidget }: Prop) {
 								<div className="flex items-center justify-between">
 									<div className="flex items-center gap-2">
 										<div
-											className={`w-2 h-2 rounded-full animate-pulse ${networkInfo.status === 'online' ? 'bg-success' : 'bg-red-500'}`}
+											className={`w-2 h-2 rounded-full animate-pulse ${networkInfo.status === 'online' ? 'bg-success' : 'bg-error'}`}
 										></div>
 										<span className="text-xs font-medium text-muted">
 											{networkInfo.status === 'online'
@@ -176,12 +176,12 @@ export function NetworkLayout({ enableBackground, inComboWidget }: Prop) {
 								{(networkInfo.city || networkInfo.country) && (
 									<div className="flex items-center justify-center gap-2 text-xs flex-warp">
 										{networkInfo.city && (
-											<span className="px-2 py-1 font-medium text-blue-600 rounded-full bg-blue-500/10">
+											<span className="px-2 py-1 font-medium text-primary rounded-full bg-primary/10">
 												{networkInfo.city}
 											</span>
 										)}
 										{networkInfo.country && (
-											<span className="px-2 py-1 font-medium text-purple-600 rounded-full bg-purple-500/10">
+											<span className="px-2 py-1 font-medium text-secondary rounded-full bg-secondary/10">
 												{networkInfo.country}
 											</span>
 										)}
diff --git a/src/layouts/widgets/news/rss-feed-setting.tsx b/src/layouts/widgets/news/rss-feed-setting.tsx
index f96ea74f..2d4c9e26 100644
--- a/src/layouts/widgets/news/rss-feed-setting.tsx
+++ b/src/layouts/widgets/news/rss-feed-setting.tsx
@@ -3,10 +3,10 @@ import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
-import { CheckBoxWithDescription } from '@/components/checkbox-description.component'
-import { SectionPanel } from '@/components/section-panel'
+import { CheckBoxWithDescription } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
-import { ToggleSwitch } from '@/components/toggle-switch.component'
+import { ToggleSwitch } from '@/components/ui'
 import { WidgetSettingWrapper } from '@/layouts/widgets-settings/widget-settings-wrapper'
 import type { WigiNewsSetting } from './rss.interface'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/widgets/notes/components/note-editor.tsx b/src/layouts/widgets/notes/components/note-editor.tsx
index 250fd55b..04a29b50 100644
--- a/src/layouts/widgets/notes/components/note-editor.tsx
+++ b/src/layouts/widgets/notes/components/note-editor.tsx
@@ -1,8 +1,8 @@
 import { PRIORITY_BG_COLORS, PRIORITY_OPTIONS } from '@/common/constant/priority_options'
 import { Button } from '@/components/button/button'
-import { IconLoading } from '@/components/loading/icon-loading'
+import { IconLoading } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { useNotes } from '@/context/notes.context'
 import type { FetchedNote } from '@/services/hooks/note/note.interface'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/widgets/notes/components/note-navigation.tsx b/src/layouts/widgets/notes/components/note-navigation.tsx
index d5cd1500..3c5ea228 100644
--- a/src/layouts/widgets/notes/components/note-navigation.tsx
+++ b/src/layouts/widgets/notes/components/note-navigation.tsx
@@ -1,10 +1,10 @@
 import { useMemo } from 'react'
 import { Button } from '@/components/button/button'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { useNotes } from '@/context/notes.context'
 import { useAuth } from '@/context/auth.context'
 import Analytics from '@/analytics'
-import { IconLoading } from '@/components/loading/icon-loading'
+import { IconLoading } from '@/components/ui'
 import { callEvent } from '@/common/utils/call-event'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/widgets/todos/components/friend-item.todo.tsx b/src/layouts/widgets/todos/components/friend-item.todo.tsx
index 355a7684..3350e490 100644
--- a/src/layouts/widgets/todos/components/friend-item.todo.tsx
+++ b/src/layouts/widgets/todos/components/friend-item.todo.tsx
@@ -1,5 +1,5 @@
-import { AvatarComponent } from '@/components/avatar.component'
-import Tooltip from '@/components/tool-tip'
+import { AvatarComponent } from '@/components/ui'
+import { Tooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface UserItemProp {
diff --git a/src/layouts/widgets/todos/components/priority.dropdown.tsx b/src/layouts/widgets/todos/components/priority.dropdown.tsx
index 511224b3..87b5a389 100644
--- a/src/layouts/widgets/todos/components/priority.dropdown.tsx
+++ b/src/layouts/widgets/todos/components/priority.dropdown.tsx
@@ -1,4 +1,4 @@
-import { Dropdown } from '@/components/dropdown'
+import { Dropdown } from '@/components/ui'
 import { Button } from '@/components/button/button'
 import { TodoPriority } from '@/services/hooks/todo/todo.interface'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/widgets/todos/components/select-friends.todo.tsx b/src/layouts/widgets/todos/components/select-friends.todo.tsx
index 0f54f508..f34b87cb 100644
--- a/src/layouts/widgets/todos/components/select-friends.todo.tsx
+++ b/src/layouts/widgets/todos/components/select-friends.todo.tsx
@@ -1,6 +1,6 @@
 import { callEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
-import { Dropdown } from '@/components/dropdown'
+import { Dropdown } from '@/components/ui'
 import { SelectFriendLayout } from '@/layouts/friends/components/select-friend.layout'
 import type { Friend } from '@/services/hooks/friends/friend-service.hook'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/widgets/todos/expandable-todo-input.tsx b/src/layouts/widgets/todos/expandable-todo-input.tsx
index 73da3557..8f7d7cd9 100644
--- a/src/layouts/widgets/todos/expandable-todo-input.tsx
+++ b/src/layouts/widgets/todos/expandable-todo-input.tsx
@@ -3,15 +3,15 @@ import { Motion as motion, Presence } from '@/common/motion'
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { Button } from '@/components/button/button'
 import { TextInput } from '@/components/text-input'
-import { IconLoading } from '@/components/loading/icon-loading'
-import { ClickableTooltip } from '@/components/clickable-tooltip'
+import { IconLoading } from '@/components/ui'
+import { ClickableTooltip } from '@/components/ui'
 import jalaliMoment from 'jalali-moment'
 import Analytics from '@/analytics'
-import { Chip } from '@/components/chip.component'
+import { Chip } from '@/components/ui'
 import { useGetTags } from '@/services/hooks/todo/get-tags.hook'
 import { useAuth } from '@/context/auth.context'
 import { useDate } from '@/context/date.context'
-import { DatePicker } from '@/components/date-picker/date-picker'
+import { DatePicker } from '@/components/ui'
 import { PriorityDropdown } from './components/priority.dropdown'
 import type { FetchedTodo, TodoPriority } from '@/services/hooks/todo/todo.interface'
 import { type TodoCreationPayload, useAddTodo } from '@/services/hooks/todo/add-todo.hook'
diff --git a/src/layouts/widgets/todos/todo.item.tsx b/src/layouts/widgets/todos/todo.item.tsx
index 0891358b..a9e1b92a 100644
--- a/src/layouts/widgets/todos/todo.item.tsx
+++ b/src/layouts/widgets/todos/todo.item.tsx
@@ -1,8 +1,8 @@
 import type React from 'react'
 import { useState } from 'react'
-import CustomCheckbox from '@/components/checkbox'
+import { Checkbox } from '@/components/ui'
 import type { FetchedTodo, Todo } from '@/services/hooks/todo/todo.interface'
-import { ConfirmationModal } from '@/components/modal/confirmation-modal'
+import { ConfirmationModal } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { showToast } from '@/common/toast'
 import { useRemoveTodo } from '@/services/hooks/todo/remove-todo.hook'
@@ -10,11 +10,11 @@ import { safeAwait } from '@/services/api'
 import { translateError } from '@/common/utils/translate-error'
 import { validate } from 'uuid'
 import Analytics from '@/analytics'
-import { IconLoading } from '@/components/loading/icon-loading'
+import { IconLoading } from '@/components/ui'
 import { parseTodoDate } from './tools/parse-date'
 import { useUpdateTodo } from '@/services/hooks/todo/update-todo.hook'
 import { playAlarm } from '@/common/play-alarm'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { TodoFriends } from './components/friends.todo'
 import { Icon } from '@/src/icons'
 
@@ -118,7 +118,7 @@ export function TodoItem({ todo, blurMode = false, onEdit, onUpdated }: Prop) {
 		>
 			<div className="flex items-center gap-1.5 px-2 py-1">
 				<div className="flex items-center gap-1 shrink-0">
-					<CustomCheckbox
+					<Checkbox
 						checked={isDone}
 						disabled={isUpdating}
 						className={`h-4! w-4! border! transition-transform active:scale-90 ${getBorderStyle(currentTodo.priority)}`}
@@ -159,7 +159,7 @@ export function TodoItem({ todo, blurMode = false, onEdit, onUpdated }: Prop) {
 							{isOwner && (
 								<button
 									onClick={handleEdit}
-									className="p-1 rounded-lg cursor-pointer text-blue-500/60 hover:bg-blue-500/10 hover:text-blue-500"
+									className="p-1 rounded-lg cursor-pointer text-primary/60 hover:bg-primary/10 hover:text-primary"
 								>
 									<Icon name="edit" size={13} />
 								</button>
@@ -254,7 +254,7 @@ function NoteLinkRenderer({ note }: { note: string }) {
 				href={urls[0]}
 				target="_blank"
 				rel="noopener noreferrer"
-				className="block text-blue-500 underline break-all"
+				className="block text-primary underline break-all"
 			>
 				{urls[0]}
 			</a>
diff --git a/src/layouts/widgets/todos/todos.tsx b/src/layouts/widgets/todos/todos.tsx
index e1992510..e2b1264b 100644
--- a/src/layouts/widgets/todos/todos.tsx
+++ b/src/layouts/widgets/todos/todos.tsx
@@ -2,14 +2,14 @@ import { useState } from 'react'
 import { ExpandableTodoInput } from './expandable-todo-input'
 import { useAuth } from '@/context/auth.context'
 import Analytics from '@/analytics'
-import { IconLoading } from '@/components/loading/icon-loading'
-import { FilterTooltip } from '@/components/filter-tooltip'
+import { IconLoading } from '@/components/ui'
+import { FilterTooltip } from '@/components/ui'
 import { useGetTags } from '@/services/hooks/todo/get-tags.hook'
 import type { Todo } from '@/services/hooks/todo/todo.interface'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { Button } from '@/components/button/button'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { useGetTodos } from '@/services/hooks/todo/get-todos.hook'
 import { TodoItem } from './todo.item'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/widgets/tools/currency/currency-converter.tsx b/src/layouts/widgets/tools/currency/currency-converter.tsx
index deef28c8..d658d204 100644
--- a/src/layouts/widgets/tools/currency/currency-converter.tsx
+++ b/src/layouts/widgets/tools/currency/currency-converter.tsx
@@ -1,7 +1,7 @@
 import { Motion as motion } from "@/common/motion";
 import type React from 'react'
 import { useEffect, useState } from 'react'
-import { SelectBox } from '@/components/selectbox/selectbox'
+import { SelectBox } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { useGetCurrencyByCode } from '@/services/hooks/currency/get-currency-by-code.hook'
 import { useGetSupportCurrencies } from '@/services/hooks/currency/get-support-currencies.hook'
diff --git a/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx b/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx
index e6e52ad9..8ec4eb4f 100644
--- a/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx
+++ b/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx
@@ -1,6 +1,6 @@
 import Analytics from '@/analytics'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { showToast } from '@/common/toast'
 
 interface Prop {
diff --git a/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx b/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx
index 85ddfff9..734defe0 100644
--- a/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx
+++ b/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx
@@ -1,7 +1,7 @@
 import type React from 'react'
 import { Button } from '@/components/button/button'
-import CustomCheckbox from '@/components/checkbox'
-import Modal from '@/components/modal'
+import { Checkbox } from '@/components/ui'
+import { Modal } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import type { PomodoroSettings } from '../types'
 
@@ -101,7 +101,7 @@ export const PomodoroSettingsPanel: React.FC<PomodoroSettingsPanelProps> = ({
 						max={30}
 					/>
 					<div className="flex items-start gap-3">
-						<CustomCheckbox
+						<Checkbox
 							checked={settings.alarmEnabled}
 							onChange={() =>
 								handleSettingChange(
diff --git a/src/layouts/widgets/tools/pomodoro/components/timer-display.tsx b/src/layouts/widgets/tools/pomodoro/components/timer-display.tsx
index 86182961..2eb4858c 100644
--- a/src/layouts/widgets/tools/pomodoro/components/timer-display.tsx
+++ b/src/layouts/widgets/tools/pomodoro/components/timer-display.tsx
@@ -32,7 +32,7 @@ export const TimerDisplay: React.FC<TimerDisplayProps> = ({
 					cy="50"
 					r="45"
 					fill="none"
-					stroke="#f3f4f6"
+					className="stroke-base-content/10"
 					strokeWidth="5"
 					filter="url(#shadow)"
 				/>
@@ -55,7 +55,7 @@ export const TimerDisplay: React.FC<TimerDisplayProps> = ({
 					cy="50"
 					r="40"
 					fill="none"
-					stroke="#ffffff10"
+					className="stroke-base-content/[0.06]"
 					strokeWidth="1"
 				/>
 				<text
diff --git a/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx b/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
index 683accc4..3e1edd53 100644
--- a/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
+++ b/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
@@ -2,8 +2,8 @@ import type React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, removeFromStorage, setToStorage } from '@/common/storage'
-import { SelectBox } from '@/components/selectbox/selectbox'
-import Tooltip from '@/components/tool-tip'
+import { SelectBox } from '@/components/ui'
+import { Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useCreatePomodoroSession } from '@/services/hooks/pomodoro/create-session.hook'
 import { TopUsersType } from '@/services/hooks/pomodoro/get-top-users.hook'
@@ -13,7 +13,7 @@ import { PomodoroSettingsPanel } from './components/settings-panel'
 import { TimerDisplay } from './components/timer-display'
 import { TopUsersTab } from './top-users/top-users'
 import type { PomodoroSettings, TimerMode } from './types'
-import { TabNavigation } from '@/components/tab-navigation'
+import { TabNavigation } from '@/components/ui'
 import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/widgets/tools/pomodoro/top-users/top-user-item.tsx b/src/layouts/widgets/tools/pomodoro/top-users/top-user-item.tsx
index 085a54f3..06db6407 100644
--- a/src/layouts/widgets/tools/pomodoro/top-users/top-user-item.tsx
+++ b/src/layouts/widgets/tools/pomodoro/top-users/top-user-item.tsx
@@ -1,4 +1,4 @@
-import { AvatarComponent } from '@/components/avatar.component'
+import { AvatarComponent } from '@/components/ui'
 import { UserCardPortal } from '@/components/user/user-card-portal'
 import type { TopUser } from '@/services/hooks/pomodoro/get-top-users.hook'
 import { Icon } from '@/src/icons'
diff --git a/src/layouts/widgets/tools/pomodoro/top-users/top-users.tsx b/src/layouts/widgets/tools/pomodoro/top-users/top-users.tsx
index 6e4ae547..118cdbc5 100644
--- a/src/layouts/widgets/tools/pomodoro/top-users/top-users.tsx
+++ b/src/layouts/widgets/tools/pomodoro/top-users/top-users.tsx
@@ -15,7 +15,7 @@ export const TopUsersTab: React.FC<TopUsersTabProps> = ({ type }) => {
 	if (isLoading) {
 		return (
 			<div className="flex items-center justify-center p-4">
-				<div className="w-8 h-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+				<div className="w-8 h-8 border-b-2 border-primary rounded-full animate-spin"></div>
 			</div>
 		)
 	}
diff --git a/src/layouts/widgets/tools/tools.layout.tsx b/src/layouts/widgets/tools/tools.layout.tsx
index 5181dbef..d1a0180a 100644
--- a/src/layouts/widgets/tools/tools.layout.tsx
+++ b/src/layouts/widgets/tools/tools.layout.tsx
@@ -4,7 +4,7 @@ import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { useDate } from '@/context/date.context'
 import { WidgetContainer } from '../widget-container'
-import { TabNavigation } from '@/components/tab-navigation'
+import { TabNavigation } from '@/components/ui'
 import {
 	MdOutlineCurrencyExchange,
 	MdOutlineMosque,
diff --git a/src/layouts/widgets/weather/current/current-box.weather.tsx b/src/layouts/widgets/weather/current/current-box.weather.tsx
index f998281e..32371662 100644
--- a/src/layouts/widgets/weather/current/current-box.weather.tsx
+++ b/src/layouts/widgets/weather/current/current-box.weather.tsx
@@ -1,6 +1,6 @@
 import type { FetchedWeather } from '@/layouts/widgets/weather/weather.interface'
 import { unitsFlag } from '../unit-symbols'
-import Tooltip from '@/components/tool-tip'
+import { Tooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface CurrentWeatherBoxProps {
diff --git a/src/layouts/widgets/widget-container.tsx b/src/layouts/widgets/widget-container.tsx
index 473850f8..ebfc5ce4 100644
--- a/src/layouts/widgets/widget-container.tsx
+++ b/src/layouts/widgets/widget-container.tsx
@@ -12,7 +12,7 @@ export function WidgetContainer({
 }: WidgetContainerProps) {
 	return (
 		<div
-			className={`flex flex-col h-80 min-h-80 max-h-80 p-2 ${background && 'bg-content bg-glass'} rounded-2xl ${className}`}
+			className={`flex flex-col h-80 min-h-80 max-h-80 p-2 ${background ? 'bg-content bg-glass' : ''} rounded-widget ${className}`}
 			style={style}
 		>
 			{children}
diff --git a/src/layouts/widgets/wigi-arz/components/currency-box.tsx b/src/layouts/widgets/wigi-arz/components/currency-box.tsx
index b6a2043d..9bb6ee6e 100644
--- a/src/layouts/widgets/wigi-arz/components/currency-box.tsx
+++ b/src/layouts/widgets/wigi-arz/components/currency-box.tsx
@@ -87,14 +87,14 @@ export const CurrencyBox = ({
 
 	const priceChangeColor =
 		currencyColorMode === CurrencyColorMode.NORMAL
-			? `${priceChange > 0 ? 'text-red-500' : 'text-green-500'}`
-			: `${priceChange > 0 ? 'text-green-500' : 'text-red-500'}`
+			? `${priceChange > 0 ? 'text-error' : 'text-success'}`
+			: `${priceChange > 0 ? 'text-success' : 'text-error'}`
 
 	return (
 		<>
 			<div
 				className={`flex items-center justify-between gap-2 py-2 rounded-xl cursor-pointer 
-				bg-base-300 opacity-100 hover:!bg-gray-500/10
+				bg-base-300 opacity-100 hover:!bg-base-content/10
 				transition-all duration-200 ease-in-out
 				transform`}
 				onClick={() => toggleCurrencyModal()}
diff --git a/src/layouts/widgets/wigi-arz/components/currency-modal.tsx b/src/layouts/widgets/wigi-arz/components/currency-modal.tsx
index a7bc068a..80570e50 100644
--- a/src/layouts/widgets/wigi-arz/components/currency-modal.tsx
+++ b/src/layouts/widgets/wigi-arz/components/currency-modal.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { CurrencyColorMode } from '@/context/currency.context'
 import { GetPrice } from '../utils/get-price'
@@ -79,8 +79,8 @@ export const CurrencyModalComponent = ({
 
 	const priceChangeColor =
 		currencyColorMode === CurrencyColorMode.NORMAL
-			? `${priceChange > 0 ? 'text-red-500' : 'text-green-500'}`
-			: `${priceChange > 0 ? 'text-green-500' : 'text-red-500'}`
+			? `${priceChange > 0 ? 'text-error' : 'text-success'}`
+			: `${priceChange > 0 ? 'text-success' : 'text-error'}`
 
 	return (
 		<Modal isOpen={isModalOpen} onClose={toggleCurrencyModal} size="sm">
diff --git a/src/layouts/widgets/wigi-arz/wigi-arz-setting.tsx b/src/layouts/widgets/wigi-arz/wigi-arz-setting.tsx
index cbbd0d33..49507761 100644
--- a/src/layouts/widgets/wigi-arz/wigi-arz-setting.tsx
+++ b/src/layouts/widgets/wigi-arz/wigi-arz-setting.tsx
@@ -2,9 +2,9 @@ import { useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { ItemSelector } from '@/components/item-selector'
-import { SectionPanel } from '@/components/section-panel'
-import { SelectBox } from '@/components/selectbox/selectbox'
+import { ItemSelector } from '@/components/ui'
+import { SectionPanel } from '@/components/ui'
+import { SelectBox } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { useAuth } from '@/context/auth.context'
 import { CurrencyColorMode } from '@/context/currency.context'
diff --git a/src/layouts/widgets/wigi-pad/clock-display/clock-setting.tsx b/src/layouts/widgets/wigi-pad/clock-display/clock-setting.tsx
index dda93e0e..003d58e1 100644
--- a/src/layouts/widgets/wigi-pad/clock-display/clock-setting.tsx
+++ b/src/layouts/widgets/wigi-pad/clock-display/clock-setting.tsx
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { CheckBoxWithDescription } from '@/components/checkbox-description.component'
-import { ItemSelector } from '@/components/item-selector'
+import { CheckBoxWithDescription } from '@/components/ui'
+import { ItemSelector } from '@/components/ui'
 import { type ClockSettings, ClockType } from './clock-setting.interface'
 
 const CLOCK_OPTIONS = [
diff --git a/src/layouts/widgets/wigi-pad/clock-display/clocks/analog.clock.tsx b/src/layouts/widgets/wigi-pad/clock-display/clocks/analog.clock.tsx
index b0a56670..80395f0d 100644
--- a/src/layouts/widgets/wigi-pad/clock-display/clocks/analog.clock.tsx
+++ b/src/layouts/widgets/wigi-pad/clock-display/clocks/analog.clock.tsx
@@ -98,7 +98,7 @@ export function AnalogClock({ timezone, setting }: AnalogClockProps) {
 						x2={60 + 50 * Math.cos(((minuteAngle - 90) * Math.PI) / 180)}
 						y2={60 + 50 * Math.sin(((minuteAngle - 90) * Math.PI) / 180)}
 						strokeWidth="4"
-						className="transition-transform duration-300 ease-out stroke-gray-400"
+						className="transition-transform duration-300 ease-out stroke-base-content/40"
 						strokeLinecap="round"
 					/>
 
diff --git a/src/layouts/widgets/wigi-pad/date-display/date-setting.tsx b/src/layouts/widgets/wigi-pad/date-display/date-setting.tsx
index 823192fa..4dc85d71 100644
--- a/src/layouts/widgets/wigi-pad/date-display/date-setting.tsx
+++ b/src/layouts/widgets/wigi-pad/date-display/date-setting.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { ItemSelector } from '@/components/item-selector'
+import { ItemSelector } from '@/components/ui'
 import { WigiPadDateType } from './date-setting.interface'
 
 const DateOptions = [
diff --git a/src/layouts/widgets/wigi-pad/wigi-pad-setting.tsx b/src/layouts/widgets/wigi-pad/wigi-pad-setting.tsx
index 9da578e8..7651c23e 100644
--- a/src/layouts/widgets/wigi-pad/wigi-pad-setting.tsx
+++ b/src/layouts/widgets/wigi-pad/wigi-pad-setting.tsx
@@ -1,4 +1,4 @@
-import { SectionPanel } from '@/components/section-panel'
+import { SectionPanel } from '@/components/ui'
 import { WidgetSettingWrapper } from '@/layouts/widgets-settings/widget-settings-wrapper'
 import { ClockSetting } from './clock-display/clock-setting'
 import { WigiPadDateSettingsModal } from './date-display/date-setting'
diff --git a/src/layouts/widgets/yadkar/yadkar.tsx b/src/layouts/widgets/yadkar/yadkar.tsx
index d9124f13..40db406f 100644
--- a/src/layouts/widgets/yadkar/yadkar.tsx
+++ b/src/layouts/widgets/yadkar/yadkar.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import Analytics from '@/analytics'
 import { NotesLayout } from '../notes/notes.layout'
 import { TodosLayout } from '../todos/todos'
-import { TabNavigation } from '@/components/tab-navigation'
+import { TabNavigation } from '@/components/ui'
 import { WidgetContainer } from '../widget-container'
 import { HabitsContent } from '../habit/habits.layout'
 import { getFromStorage, setToStorage } from '@/common/storage'
diff --git a/src/pages/home/dialog/dialog.tsx b/src/pages/home/dialog/dialog.tsx
index ba4f938e..73b3303f 100644
--- a/src/pages/home/dialog/dialog.tsx
+++ b/src/pages/home/dialog/dialog.tsx
@@ -2,7 +2,7 @@ import Analytics from '@/analytics'
 import { getContrastingTextColor } from '@/common/color'
 import { callEvent } from '@/common/utils/call-event'
 import { Button } from '@/components/button/button'
-import Modal from '@/components/modal'
+import { Modal } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { safeAwait } from '@/services/api'
 import {
diff --git a/src/pages/home/home.page.tsx b/src/pages/home/home.page.tsx
index 9cd04c42..790f780d 100644
--- a/src/pages/home/home.page.tsx
+++ b/src/pages/home/home.page.tsx
@@ -151,7 +151,7 @@ export function HomePage() {
 				options={{
 					showProgress: true,
 					skipBeacon: true,
-					primaryColor: '#3b82f6',
+					primaryColor: '#536dfe',
 					dismissKeyAction: 'close',
 					buttons: ['skip', 'primary', 'back'],
 				}}
diff --git a/src/pages/root.tsx b/src/pages/root.tsx
index 6efcabfb..09fd787d 100644
--- a/src/pages/root.tsx
+++ b/src/pages/root.tsx
@@ -25,7 +25,7 @@ export function RootLayout() {
 	useWallpaperApply()
 
 	return (
-		<div className="w-full min-h-screen mx-auto md:px-4 lg:px-0 max-w-[1080px] flex flex-col h-[100vh] overflow-y-auto scrollbar-none">
+		<div className="w-full min-h-screen mx-auto md:px-4 lg:px-0 max-w-[1080px] flex flex-col h-screen overflow-y-auto scrollbar-none">
 			<IconProvider defaultTheme="default">
 				<GeneralSettingProvider>
 					<WallpaperProvider>
@@ -36,14 +36,14 @@ export function RootLayout() {
 					toastOptions={{
 						error: {
 							style: {
-								backgroundColor: '#f8d7da',
-								color: '#721c24',
+								backgroundColor: 'var(--color-error)',
+								color: 'var(--color-error-content)',
 							},
 						},
 						success: {
 							style: {
-								backgroundColor: '#d4edda',
-								color: '#155724',
+								backgroundColor: 'var(--color-success)',
+								color: 'var(--color-success-content)',
 							},
 						},
 						duration: 5000,

From 386c798e2300aa99c4904fe6e3769c5d873e0e74 Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Sat, 15 Aug 2026 19:23:55 +0330
Subject: [PATCH 05/10] ci: explicitly run wxt prepare before type-checking
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

bun compile (tsc --noEmit) failed on CI with exit code 2 —
reproduced locally: tsconfig.json extends the gitignored,
auto-generated .wxt/tsconfig.json, which only existed via bun
install's postinstall hook. That's implicit and apparently not
reliable in the CI environment. `bun run build` masked this locally
since `wxt build` regenerates .wxt internally, but a bare `tsc` does
not.

Adding an explicit `wxt prepare` step guarantees the file exists
before type-checking runs, regardless of postinstall timing.
---
 .github/workflows/pull.yml | 3 +++
 .github/workflows/push.yml | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/.github/workflows/pull.yml b/.github/workflows/pull.yml
index 66b84c43..73d3d888 100644
--- a/.github/workflows/pull.yml
+++ b/.github/workflows/pull.yml
@@ -24,6 +24,9 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Generate WXT types
+        run: bunx wxt prepare
+
       - name: Build files
         run: bun compile
         
diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
index 5f7bfcb5..ea5557b1 100644
--- a/.github/workflows/push.yml
+++ b/.github/workflows/push.yml
@@ -21,6 +21,9 @@ jobs:
       - name: Install dependencies
         run: bun install
 
+      - name: Generate WXT types
+        run: bunx wxt prepare
+
       - name: Build files
         run: bun compile
         

From 8049449e38af1a0fd01f80ae4656948356eb86cc Mon Sep 17 00:00:00 2001
From: Shak <sanshakurt@gmail.com>
Date: Sat, 15 Aug 2026 19:37:06 +0330
Subject: [PATCH 06/10] fix(deps): declare class-variance-authority as an
 explicit dependency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Every new component under components/ui/ imports cva from
class-variance-authority, but it was never added to package.json —
same class of bug as the earlier clsx fix. It only resolved locally
from a stray leftover in node_modules that nothing in the actual
dependency tree references; a clean install (CI, or anyone cloning
fresh) doesn't have it at all, which is what produced the CI type
errors (Property 'size'/'selected' does not exist on ...Props) once
the wxt-prepare fix got tsc past the earlier config-loading failure.

Verified by wiping node_modules and .wxt entirely and reinstalling
from scratch: bun run compile and bun run build both pass clean.
---
 bun.lock     | 3 +++
 package.json | 1 +
 2 files changed, 4 insertions(+)

diff --git a/bun.lock b/bun.lock
index 3afa5194..0c931d18 100644
--- a/bun.lock
+++ b/bun.lock
@@ -13,6 +13,7 @@
         "axios": "1.18.0",
         "canvas-confetti": "1.9.4",
         "chart.js": "4.5.1",
+        "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "framer-motion": "12.40.0",
         "jalali-moment": "3.3.11",
@@ -524,6 +525,8 @@
 
     "citty": ["citty@0.1.6", "", { "dependencies": { "consola": "^3.2.3" } }, "sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ=="],
 
+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
+
     "cli-boxes": ["cli-boxes@3.0.0", "", {}, "sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g=="],
 
     "cli-cursor": ["cli-cursor@3.1.0", "", { "dependencies": { "restore-cursor": "^3.1.0" } }, "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw=="],
diff --git a/package.json b/package.json
index 4bcf9e79..26289578 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "axios": "1.18.0",
     "canvas-confetti": "1.9.4",
     "chart.js": "4.5.1",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "framer-motion": "12.40.0",
     "jalali-moment": "3.3.11",

From 18ad014af0d94a8ad73a5766577aeda6e786eac2 Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Tue, 18 Aug 2026 17:35:34 +0330
Subject: [PATCH 07/10] refactor(ui): clean up component variants and unify
 z-index handling

---
 src/common/utils/cn.ts                        |  1 -
 src/components/button/button.tsx              | 17 +++++++-------
 src/components/ui/button/button.variants.ts   | 22 +------------------
 .../ui/color-picker/color-picker.tsx          |  3 ++-
 src/components/ui/index.ts                    | 16 --------------
 src/components/ui/input/input.tsx             |  2 --
 src/components/ui/input/input.variants.ts     | 10 ---------
 .../ui/modal/confirmation-modal.variants.ts   |  7 ------
 src/components/ui/modal/modal.variants.ts     |  5 -----
 .../section-panel/section-panel.variants.ts   |  6 -----
 src/components/ui/tabs/tabs.variants.ts       |  7 ------
 src/components/ui/toggle/toggle.variants.ts   |  2 --
 src/components/ui/tooltip/tooltip.tsx         |  2 +-
 src/index.css                                 |  8 +++++++
 .../components/day/tool-tip-content.tsx       |  5 +----
 src/layouts/widgets/habit/habits.layout.tsx   |  2 +-
 16 files changed, 22 insertions(+), 93 deletions(-)

diff --git a/src/common/utils/cn.ts b/src/common/utils/cn.ts
index d555533d..224a5a82 100644
--- a/src/common/utils/cn.ts
+++ b/src/common/utils/cn.ts
@@ -24,7 +24,6 @@ const twMerge = extendTailwindMerge<'wg-backdrop'>({
 				'z-sheet',
 				'z-modal',
 				'z-popover',
-				'z-tooltip',
 				'z-toast',
 				'z-pet',
 			],
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index b9e04e38..00c7c82c 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -17,6 +17,13 @@ interface ButtonProps {
 	size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 	ref?: any
 }
+const sizes: Record<string, string> = {
+	xs: 'btn-xs',
+	sm: 'btn-sm',
+	md: 'btn-md',
+	lg: 'btn-lg',
+	xl: 'btn-xl',
+}
 /**
  * @deprecated Use `import { Button } from '@/components/ui'`.
  *
@@ -27,20 +34,12 @@ interface ButtonProps {
  * red/transparent/full-width. Migrate call sites in reviewed batches instead.
  */
 export function Button(prop: ButtonProps) {
-	const sizes: Record<string, string> = {
-		xs: 'btn-xs',
-		sm: 'btn-sm',
-		md: 'btn-md',
-		lg: 'btn-lg',
-		xl: 'btn-xl',
-	}
-
 	return (
 		<button
 			type={prop.type || 'button'}
 			onClick={prop.onClick}
 			disabled={prop.disabled}
-			className={`btn cursor-pointer ${prop.fullWidth ? 'full-width' : ''} ${prop.className} ${prop.rounded ? `rounded-${prop.rounded}` : ''} ${prop.isPrimary ? 'btn-primary' : ''} ${sizes[prop.size] || 'btn-md'} active:!translate-y-0`}
+			className={`btn cursor-pointer ${prop.fullWidth ? 'full-width' : ''} ${prop.className} ${prop.rounded ? `rounded-${prop.rounded}` : ''} ${prop.isPrimary ? 'btn-primary text-white' : ''} ${sizes[prop.size] || 'btn-md'} active:!translate-y-0`}
 			style={prop.style}
 			ref={prop.ref}
 		>
diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts
index 14c426bd..ef0ee6ff 100644
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -1,18 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 
-/**
- * Button variants.
- *
- * cva declares WHICH classes a variant contributes. It never merges — merging
- * is `cn()`'s job (see common/utils/cn.ts).
- *
- * Sizes mirror daisyUI's `--size-field * n` ladder (24/32/40/48/56px) and its
- * padding/font ramp on purpose: a call site migrating off `btn` keeps its exact
- * geometry, so the only thing that changes is colour — which is the part worth
- * reviewing.
- *
- * Colour comes from the project's semantic tokens, never from `btn-*`.
- */
 export const buttonVariants = cva(
 	[
 		'inline-flex shrink-0 items-center justify-center gap-1.5',
@@ -26,8 +13,7 @@ export const buttonVariants = cva(
 		variants: {
 			variant: {
 				default: 'bg-content text-content border-content hover:bg-raised',
-				primary:
-					'bg-primary text-primary-content border-transparent hover:bg-primary/90',
+				primary: 'bg-primary text-white border-transparent hover:bg-primary/90',
 				secondary:
 					'bg-secondary text-secondary-content border-transparent hover:bg-secondary/90',
 				outline: 'bg-transparent text-content border-content hover:bg-raised',
@@ -43,12 +29,6 @@ export const buttonVariants = cva(
 				lg: 'h-12 px-5 text-lg',
 				xl: 'h-14 px-6 text-[1.375rem]',
 			},
-			/**
-			 * Literal class names only. The previous implementation built
-			 * `rounded-${prop.rounded}` at runtime, which Tailwind v4's source
-			 * scanner cannot see — those classes only shipped by coincidence,
-			 * when the same literal happened to appear elsewhere in the codebase.
-			 */
 			rounded: {
 				sm: 'rounded-sm',
 				md: 'rounded-md',
diff --git a/src/components/ui/color-picker/color-picker.tsx b/src/components/ui/color-picker/color-picker.tsx
index 6b152fb3..efa62463 100644
--- a/src/components/ui/color-picker/color-picker.tsx
+++ b/src/components/ui/color-picker/color-picker.tsx
@@ -71,11 +71,12 @@ export const ColorPicker: React.FC<PopoverColorPickerProps> = ({ color, onChange
 				createPortal(
 					<div
 						ref={popoverRef}
-						className="fixed z-popover flex p-2 border rounded-md shadow-lg bg-content border-content"
+						className="fixed  flex p-2 border rounded-md shadow-lg bg-content border-content"
 						style={{
 							top: `${position.top}px`,
 							left: `${position.left}px`,
 							width: '200px',
+							zIndex: 1000,
 						}}
 					>
 						<RgbaStringColorPicker color={displayColor} onChange={onChange} />
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index e1b71af1..66863a12 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,19 +1,3 @@
-/**
- * UI primitives.
- *
- * Generic, app-agnostic building blocks. Feature components that know about
- * Widgetify's domain (auth guards, market, updater, user card, welcome wizard,
- * widget tab manager) stay in `src/components/`.
- *
- * Conventions:
- *   - A component with real variants (discrete options: variant / size /
- *     orientation) gets a `<name>.variants.ts` exporting a `cva` config, and
- *     composes it with `cn(xVariants({ … }), className)`.
- *   - A component whose styling is only conditional (booleans, states) gets NO
- *     variants file — it merges with `twMerge` directly.
- *   - `cva` declares variants. It never merges.
- */
-
 export * from './avatar/avatar'
 export * from './avatar/avatar.variants'
 
diff --git a/src/components/ui/input/input.tsx b/src/components/ui/input/input.tsx
index a5688e62..3c8bc0f5 100644
--- a/src/components/ui/input/input.tsx
+++ b/src/components/ui/input/input.tsx
@@ -69,8 +69,6 @@ export const TextInput = memo(function TextInput({
 				() => {
 					onChange(newValue)
 				},
-				// Colour pickers fire continuously while dragging, so they need a
-				// much shorter debounce to still feel live.
 				type === 'color' ? 50 : debounceTime
 			)
 		},
diff --git a/src/components/ui/input/input.variants.ts b/src/components/ui/input/input.variants.ts
index ed9a5a24..4989d91a 100644
--- a/src/components/ui/input/input.variants.ts
+++ b/src/components/ui/input/input.variants.ts
@@ -1,15 +1,5 @@
 import { cva, type VariantProps } from 'class-variance-authority'
 
-/**
- * Text input variants.
- *
- * Same `--size-field * n` ladder as Button (24/32/40/48/56px), matching
- * daisyUI's `input-*` geometry so migrated call sites keep their dimensions.
- *
- * `rounded-xl` is kept rather than `rounded-card` so this pilot is a zero-delta
- * visual swap; tokenising the radius is a deliberate follow-up, not something
- * to slip into the migration commit.
- */
 export const textInputVariants = cva(
 	[
 		'w-full inline-flex items-center',
diff --git a/src/components/ui/modal/confirmation-modal.variants.ts b/src/components/ui/modal/confirmation-modal.variants.ts
index f6a91a05..c2eff6b3 100644
--- a/src/components/ui/modal/confirmation-modal.variants.ts
+++ b/src/components/ui/modal/confirmation-modal.variants.ts
@@ -1,12 +1,5 @@
 import { cva } from 'class-variance-authority'
 
-/**
- * Confirmation modal accent colours.
- *
- * Four slots share one `variant` key. The icon element itself stays in the
- * component — cva describes classes, not JSX.
- */
-
 export const confirmationAccentBarVariants = cva(['h-1', 'w-full'], {
 	variants: {
 		variant: {
diff --git a/src/components/ui/modal/modal.variants.ts b/src/components/ui/modal/modal.variants.ts
index 483023b3..f45d5d6e 100644
--- a/src/components/ui/modal/modal.variants.ts
+++ b/src/components/ui/modal/modal.variants.ts
@@ -1,10 +1,5 @@
 import { cva } from 'class-variance-authority'
 
-/**
- * The modal box: width and min-height. The per-size max-height lives on the
- * inner scroll container instead (see modalScrollVariants), which is what
- * actually bounds the content.
- */
 export const modalBoxVariants = cva(
 	[
 		'modal-box',
diff --git a/src/components/ui/section-panel/section-panel.variants.ts b/src/components/ui/section-panel/section-panel.variants.ts
index ca5060b8..99a2bebe 100644
--- a/src/components/ui/section-panel/section-panel.variants.ts
+++ b/src/components/ui/section-panel/section-panel.variants.ts
@@ -1,11 +1,5 @@
 import { cva } from 'class-variance-authority'
 
-/**
- * Four slots scale together, so each gets its own cva keyed on the same `size`.
- * (cva has no multi-slot support — that is tailwind-variants — and four small
- * configs stay more readable than encoding slot names into one class string.)
- */
-
 export const sectionPanelVariants = cva(['overflow-hidden', 'duration-300'], {
 	variants: {
 		size: {
diff --git a/src/components/ui/tabs/tabs.variants.ts b/src/components/ui/tabs/tabs.variants.ts
index 0b0774c6..b3fc549b 100644
--- a/src/components/ui/tabs/tabs.variants.ts
+++ b/src/components/ui/tabs/tabs.variants.ts
@@ -1,12 +1,5 @@
 import { cva } from 'class-variance-authority'
 
-/**
- * Tab trigger.
- *
- * `tabMode` controls how a tab shares horizontal space: in `simple` every tab
- * is wide, in `advanced` only the active one expands. That interaction between
- * `tabMode` and `active` is what compoundVariants exist for.
- */
 export const tabTriggerVariants = cva(
 	[
 		'relative',
diff --git a/src/components/ui/toggle/toggle.variants.ts b/src/components/ui/toggle/toggle.variants.ts
index a7038f15..9a00de10 100644
--- a/src/components/ui/toggle/toggle.variants.ts
+++ b/src/components/ui/toggle/toggle.variants.ts
@@ -36,8 +36,6 @@ export const toggleThumbVariants = cva(
 	],
 	{
 		variants: {
-			// The track is LTR-fixed (a switch is not a directional control), so
-			// these translate values are intentionally not logical properties.
 			enabled: {
 				true: ['translate-x-0'],
 				false: ['translate-x-4'],
diff --git a/src/components/ui/tooltip/tooltip.tsx b/src/components/ui/tooltip/tooltip.tsx
index a93ae845..5df9cddb 100644
--- a/src/components/ui/tooltip/tooltip.tsx
+++ b/src/components/ui/tooltip/tooltip.tsx
@@ -222,7 +222,7 @@ export const Tooltip = ({
 					<Presence>
 						<motion.div
 							ref={tooltipRef}
-							className={`tooltip fixed rounded-lg py-1.5 px-3 text-xs max-w-xs bg-content shadow-lg z-tooltip ${contentClassName}`}
+							className={`tooltip fixed rounded-lg py-1.5 px-3 text-xs max-w-xs bg-content shadow-lg z-popover  ${contentClassName}`}
 							style={{
 								left: tooltipCoords.x,
 								top: tooltipCoords.y,
diff --git a/src/index.css b/src/index.css
index 79e71d59..ebd64704 100644
--- a/src/index.css
+++ b/src/index.css
@@ -246,4 +246,12 @@ img {
 
 .animate-slide-in-right {
   animation: slide-in-right 0.3s ease-out;
+}
+
+.rounded-widget {
+  @apply rounded-2xl
+}
+
+.z-popover {
+  z-index: 9999 !important;
 }
\ No newline at end of file
diff --git a/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx b/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx
index cbf5202c..27c8d011 100644
--- a/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx
+++ b/src/layouts/widgets/calendar/components/day/tool-tip-content.tsx
@@ -193,15 +193,12 @@ export const CalendarDayDetails: React.FC<CalendarDayDetailsProps> = ({
 						{dayEvent.map((event, idx) => (
 							<div
 								key={`e-${idx}`}
-								className={`flex relative overflow-hidden outline items-center py-0.5 gap-1 min-h-6 h-fit  w-full px-2  rounded-xl ${
+								className={`flex relative overflow-hidden outline items-center gap-1 min-h-8 h-fit  w-full px-2  rounded-xl ${
 									event.isHoliday
 										? 'bg-error/20 text-error outline-error/30'
 										: 'badge badge-ghost text-content  outline-base-300'
 								}`}
 							>
-								<div
-									className={`w-1.5 h-1.5 ml-0.5 -mr-0.5 rounded-full shrink-0 ${event.isHoliday ? 'bg-error animate-pulse ring-2 ring-error/20' : 'bg-primary/80 ring-2 ring-primary/20'} `}
-								/>
 								<div className="flex-1 min-w-0 text-[11px]">
 									{event.title}
 								</div>
diff --git a/src/layouts/widgets/habit/habits.layout.tsx b/src/layouts/widgets/habit/habits.layout.tsx
index 5acdbcc5..98760671 100644
--- a/src/layouts/widgets/habit/habits.layout.tsx
+++ b/src/layouts/widgets/habit/habits.layout.tsx
@@ -126,7 +126,7 @@ export function HabitsContent() {
 				<div className="space-y-1.5 overflow-y-auto scrollbar-none h-full">
 					{isLoading ? (
 						<div className="flex flex-col gap-1.5">
-							{[...Array(4)].map((_, i) => (
+							{[...Array(3)].map((_, i) => (
 								<HabitItemSkeleton key={`skeleton-${i}`} />
 							))}
 						</div>

From 30bc23126835b34222b6a3c83d59e2c2d4726e40 Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Tue, 18 Aug 2026 19:53:20 +0330
Subject: [PATCH 08/10] removed deprecated button

---
 src/components/button/button.tsx              | 56 --------------
 src/components/ui/button/button.variants.ts   |  4 +-
 src/components/ui/chip/chip.variants.ts       |  4 +-
 .../ui/modal/confirmation-modal.variants.ts   |  2 +-
 src/components/ui/pagination/pagination.tsx   |  2 +-
 src/components/update-release-notes-modal.tsx |  5 +-
 src/components/updater/updater.tsx            |  3 +-
 src/components/user/user-card.tsx             |  3 +-
 src/components/welcome-wizard.tsx             | 28 ++++---
 .../bookmark/components/folder-header.tsx     | 21 -----
 .../components/modal/add-bookmark.modal.tsx   |  9 +--
 .../components/modal/advanced.modal.tsx       | 29 +++----
 .../components/modal/edit-bookmark.modal.tsx  | 11 +--
 .../modal/import-browser-bookmarks.modal.tsx  | 14 ++--
 src/layouts/bookmark/components/shared.tsx    | 13 ++--
 .../manage-activity.bottom-sheet.tsx          | 13 ++--
 .../components/add-friend.bottom-sheet.tsx    |  3 +-
 .../friend-requests.bottom-sheet.tsx          |  9 +--
 .../friends/components/remove-button.tsx      |  2 +-
 .../components/coin-package-card.tsx          |  8 +-
 .../coin-package-purchase-modal.tsx           | 10 ++-
 .../components/market-item-card.tsx           |  6 +-
 .../components/market-item-purchase-modal.tsx | 12 +--
 src/layouts/mini-apps/mini-apps.layout.tsx    |  8 +-
 .../mini-apps/states/mini-app-error.tsx       | 11 ++-
 .../mini-apps/states/mini-app.auth.tsx        |  6 +-
 .../browser-bookmark/bookmark-popover.tsx     | 13 ++--
 .../search/image/image-search.portal.tsx      |  8 +-
 .../suggestion/autocomplete-consent.modal.tsx | 15 ++--
 .../tabs/account/auth-form/auth-otp.tsx       | 12 +--
 .../tabs/account/auth-form/auth-password.tsx  |  2 +-
 .../account-verification-status.tsx           |  3 +-
 .../account/components/interests-selector.tsx | 57 ++++----------
 .../components/modals/add-email.modal.tsx     |  8 +-
 .../components/modals/add-phone.modal.tsx     |  8 +-
 .../components/modals/edit-birthday.tsx       |  1 -
 .../components/modals/edit-interests.tsx      | 62 +++++++--------
 .../components/modals/footer-buttons.tsx      | 11 ++-
 .../components/occupation-selector.tsx        | 56 ++++----------
 .../components/profile-date-picker.tsx        | 11 ++-
 .../account/components/profile-display.tsx    |  5 +-
 .../components/referral-code-section.tsx      |  7 +-
 .../components/connection-modal.tsx           | 26 ++++---
 .../tabs/user-profile/user-profile.tsx        | 11 +--
 .../components/coin-purchase-modal.tsx        | 27 ++++---
 .../components/upload-area.component.tsx      |  8 +-
 .../simplify/widgets/news-simplify.tsx        |  5 +-
 .../google-calendar/google-calendar-view.tsx  |  2 +-
 .../combo-widget/combo-widget.layout.tsx      |  6 +-
 .../habit/components/habit-detail.modal.tsx   |  6 +-
 .../habit/components/habit-form.modal.tsx     |  8 +-
 src/layouts/widgets/habit/habits.layout.tsx   | 11 ++-
 .../widgets/network/network.layout.tsx        |  8 +-
 .../widgets/news/components/news-header.tsx   |  2 +-
 src/layouts/widgets/news/rss-feed-setting.tsx | 11 ++-
 .../widgets/notes/components/note-editor.tsx  |  8 +-
 .../notes/components/note-navigation.tsx      | 77 +++++--------------
 .../todos/components/priority.dropdown.tsx    |  6 +-
 .../todos/components/select-friends.todo.tsx  | 11 +--
 .../widgets/todos/expandable-todo-input.tsx   | 22 +++---
 src/layouts/widgets/todos/todos.tsx           |  7 +-
 .../pomodoro/components/control-button.tsx    |  2 +-
 .../tools/pomodoro/components/mode-button.tsx |  2 +-
 .../components/request-notification-modal.tsx | 26 +++----
 .../pomodoro/components/settings-panel.tsx    |  8 +-
 .../widgets/tools/pomodoro/pomodoro-timer.tsx |  3 +-
 .../wigi-arz/components/arz-header.tsx        |  5 +-
 .../widgets/wigi-arz/wigi_arz.layout.tsx      | 14 ++--
 .../wigi-pad/clock-display/clock-display.tsx  | 19 +----
 .../wigi-pad/date-display/date.display.tsx    | 19 +----
 src/pages/home/dialog/dialog.tsx              |  3 +-
 71 files changed, 380 insertions(+), 554 deletions(-)
 delete mode 100644 src/components/button/button.tsx

diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
deleted file mode 100644
index 00c7c82c..00000000
--- a/src/components/button/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Icon } from '@/src/icons'
-import type React from 'react'
-
-interface ButtonProps {
-	onClick?: () => void
-	disabled?: boolean
-	className?: string
-	style?: React.CSSProperties
-	icon?: React.ReactNode
-	loading?: boolean
-	loadingText?: React.ReactNode
-	type?: 'button' | 'submit' | 'reset'
-	fullWidth?: boolean
-	rounded?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
-	children?: React.ReactNode
-	isPrimary?: boolean
-	size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-	ref?: any
-}
-const sizes: Record<string, string> = {
-	xs: 'btn-xs',
-	sm: 'btn-sm',
-	md: 'btn-md',
-	lg: 'btn-lg',
-	xl: 'btn-xl',
-}
-/**
- * @deprecated Use `import { Button } from '@/components/ui'`.
- *
- * Not a re-export shim on purpose: the new Button drops daisyUI's `btn` base,
- * which would make the `btn-*` modifiers that 16+ call sites pass in
- * `className` inert (in daisyUI 5 they only set `--btn-color`, which nothing
- * reads without `.btn`). Those buttons would silently render grey instead of
- * red/transparent/full-width. Migrate call sites in reviewed batches instead.
- */
-export function Button(prop: ButtonProps) {
-	return (
-		<button
-			type={prop.type || 'button'}
-			onClick={prop.onClick}
-			disabled={prop.disabled}
-			className={`btn cursor-pointer ${prop.fullWidth ? 'full-width' : ''} ${prop.className} ${prop.rounded ? `rounded-${prop.rounded}` : ''} ${prop.isPrimary ? 'btn-primary text-white' : ''} ${sizes[prop.size] || 'btn-md'} active:!translate-y-0`}
-			style={prop.style}
-			ref={prop.ref}
-		>
-			{prop.loading
-				? prop.loadingText || (
-						<div className="flex items-center gap-1">
-							<Icon name="spinner" className="animate-spin" />
-							<span className="text-xs">صبر کنید...</span>
-						</div>
-					)
-				: prop.children}
-		</button>
-	)
-}
diff --git a/src/components/ui/button/button.variants.ts b/src/components/ui/button/button.variants.ts
index ef0ee6ff..95f0e4c0 100644
--- a/src/components/ui/button/button.variants.ts
+++ b/src/components/ui/button/button.variants.ts
@@ -12,7 +12,8 @@ export const buttonVariants = cva(
 	{
 		variants: {
 			variant: {
-				default: 'bg-content text-content border-content hover:bg-raised',
+				default:
+					'bg-content text-content border-content hover:bg-base-content/5!',
 				primary: 'bg-primary text-white border-transparent hover:bg-primary/90',
 				secondary:
 					'bg-secondary text-secondary-content border-transparent hover:bg-secondary/90',
@@ -34,6 +35,7 @@ export const buttonVariants = cva(
 				md: 'rounded-md',
 				lg: 'rounded-lg',
 				xl: 'rounded-xl',
+				'2xl': 'rounded-2xl',
 				full: 'rounded-full',
 				card: 'rounded-card',
 			},
diff --git a/src/components/ui/chip/chip.variants.ts b/src/components/ui/chip/chip.variants.ts
index 4c65f3ef..ba02b2d3 100644
--- a/src/components/ui/chip/chip.variants.ts
+++ b/src/components/ui/chip/chip.variants.ts
@@ -15,11 +15,11 @@ export const chipVariants = cva(
 	{
 		variants: {
 			selected: {
-				true: ['bg-primary', 'border-primary', 'text-primary-content'],
+				true: ['bg-primary', 'border-primary', 'text-white'],
 				false: [
 					'bg-base-100',
 					'border-base-300/30',
-					'text-muted',
+					'text-base-content/80',
 					'hover:border-primary/30',
 				],
 			},
diff --git a/src/components/ui/modal/confirmation-modal.variants.ts b/src/components/ui/modal/confirmation-modal.variants.ts
index c2eff6b3..bd96588b 100644
--- a/src/components/ui/modal/confirmation-modal.variants.ts
+++ b/src/components/ui/modal/confirmation-modal.variants.ts
@@ -30,7 +30,7 @@ export const confirmationIconVariants = cva(
 export const confirmationConfirmButtonVariants = cva([], {
 	variants: {
 		variant: {
-			danger: ['bg-error', 'hover:bg-error/90', 'text-error-content'],
+			danger: ['bg-error', 'hover:bg-error/90!', 'text-error-content'],
 			warning: ['bg-warning', 'hover:bg-warning/90', 'text-warning-content'],
 			info: ['bg-info/80', 'hover:bg-info/90', 'text-info-content'],
 			primary: ['bg-primary/80', 'hover:bg-primary/90', 'text-primary-content'],
diff --git a/src/components/ui/pagination/pagination.tsx b/src/components/ui/pagination/pagination.tsx
index 6fdc88d1..f4c5638b 100644
--- a/src/components/ui/pagination/pagination.tsx
+++ b/src/components/ui/pagination/pagination.tsx
@@ -1,6 +1,6 @@
 import { twMerge } from 'tailwind-merge'
-import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
+import { Button } from '../button/button'
 
 export interface PaginationProps {
 	currentPage: number
diff --git a/src/components/update-release-notes-modal.tsx b/src/components/update-release-notes-modal.tsx
index 14f470cb..240026ee 100644
--- a/src/components/update-release-notes-modal.tsx
+++ b/src/components/update-release-notes-modal.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Button } from './button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 
 type UpdateReleaseNotesModalProps = {
 	isOpen: boolean
@@ -110,7 +109,7 @@ export const UpdateReleaseNotesModal = ({
 						onClick={onClose}
 						disabled={counter > 0}
 						className="min-w-32.5 h-11 rounded-2xl! self-end font-black text-xs shadow-lg shadow-primary/10 disabled:shadow-none active:scale-90 transition-all disabled:text-base-content/30"
-						isPrimary={true}
+						variant={'primary'}
 					>
 						{counter > 0 ? `یه چند لحظه صبر کن (${counter})` : 'فهمیدم'}
 					</Button>
diff --git a/src/components/updater/updater.tsx b/src/components/updater/updater.tsx
index f36ebc1d..5ebd046f 100644
--- a/src/components/updater/updater.tsx
+++ b/src/components/updater/updater.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Modal } from '@/components/ui'
-import { Button } from '@/components/button/button'
+import { Button, Modal } from '@/components/ui'
 import { getMainClient } from '@/services/api'
 import { Icon } from '@/src/icons'
 
diff --git a/src/components/user/user-card.tsx b/src/components/user/user-card.tsx
index 00ed89f6..62954c95 100644
--- a/src/components/user/user-card.tsx
+++ b/src/components/user/user-card.tsx
@@ -1,8 +1,7 @@
 import { useAuth } from '@/context/auth.context'
 import { useSendFriendRequest } from '@/services/hooks/friends/friend-service.hook'
 import { translateError } from '@/common/utils/translate-error'
-import { AvatarComponent } from '@/components/ui'
-import { Button } from '../button/button'
+import { AvatarComponent, Button } from '@/components/ui'
 import type { UserCardUser } from './user-card-portal'
 import { showToast } from '@/common/toast'
 import { Icon } from '@/src/icons'
diff --git a/src/components/welcome-wizard.tsx b/src/components/welcome-wizard.tsx
index 8a1e1d5f..9ee92128 100644
--- a/src/components/welcome-wizard.tsx
+++ b/src/components/welcome-wizard.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react'
-import { Modal } from '@/components/ui'
-import { Button } from '@/components/button/button'
+import { Button, Modal } from '@/components/ui'
 import {
 	useGetOccupations,
 	useGetInterests,
@@ -131,8 +130,9 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 							<Button
 								size="sm"
 								onClick={nextStep}
-								className="w-full h-12 text-base font-bold text-white shadow-lg rounded-2xl"
-								isPrimary
+								className="w-full h-12 text-base font-bold shadow-lg"
+								variant={'primary'}
+								rounded={'2xl'}
 							>
 								بزن بریم
 							</Button>
@@ -186,8 +186,9 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 									size="sm"
 									onClick={nextStep}
 									disabled={!selectedOccupation}
-									className="flex-1 h-12 font-bold text-white rounded-2xl"
-									isPrimary
+									className="flex-1 h-12 font-bold"
+									variant={'primary'}
+									rounded={'2xl'}
 								>
 									تایید و ادامه
 								</Button>
@@ -253,8 +254,9 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 									size="sm"
 									onClick={nextStep}
 									disabled={selectedInterests.length === 0}
-									className="flex-1 h-12 font-bold text-white rounded-2xl"
-									isPrimary
+									className="flex-1 h-12 font-bold"
+									variant={'primary'}
+									rounded={'2xl'}
 								>
 									ادامه
 								</Button>
@@ -329,8 +331,9 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 								onClick={() => save()}
 								disabled={!selectedReferralSource || isPending}
 								loading={isPending}
-								className="w-full h-12 mt-4 text-base font-bold text-white shadow-lg rounded-2xl"
-								isPrimary
+								className="flex-1 h-12 font-bold mt-4"
+								variant={'primary'}
+								rounded={'2xl'}
 							>
 								ادامه
 							</Button>
@@ -358,8 +361,9 @@ export const WelcomeWizard = ({ isOpen, onClose }: WelcomeWizardProps) => {
 							<Button
 								size="sm"
 								onClick={onClose}
-								className="w-full h-12 text-base font-bold text-white shadow-lg rounded-2xl"
-								isPrimary
+								className="flex-1 h-12 font-bold"
+								variant={'primary'}
+								rounded={'2xl'}
 							>
 								شروع استفاده
 							</Button>
diff --git a/src/layouts/bookmark/components/folder-header.tsx b/src/layouts/bookmark/components/folder-header.tsx
index 23d64b47..c489fe04 100644
--- a/src/layouts/bookmark/components/folder-header.tsx
+++ b/src/layouts/bookmark/components/folder-header.tsx
@@ -1,11 +1,8 @@
 import { useState } from 'react'
 import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
 import { Modal } from '@/components/ui'
-import { Tooltip } from '@/components/ui'
 import type { FolderPathItem } from '../types/bookmark.types'
 import { FolderPath } from './folder-path'
-import { Icon } from '@/src/icons'
 
 interface FolderHeaderProps {
 	folderPath: FolderPathItem[]
@@ -27,24 +24,6 @@ export function FolderHeader({ folderPath, onNavigate }: FolderHeaderProps) {
 					onNavigate={onNavigate}
 					className="w-full "
 				/>
-				<Tooltip content={'آموزش'}>
-					<Button
-						onClick={() => setIsOpen(true)}
-						size="xs"
-						className={`h-7 w-7 text-xs font-medium rounded-[0.55rem] transition-colors border-none shadow-none text-muted hover:bg-base-300`}
-					>
-						<Icon name="help" size={12} />
-					</Button>
-				</Tooltip>
-				<Tooltip content={'بستن'}>
-					<Button
-						onClick={() => onNavigate(null, -1)}
-						size="xs"
-						className={`h-7 w-7 mr-1 text-xs font-medium rounded-[0.55rem] transition-colors border-none shadow-none text-muted hover:bg-base-300`}
-					>
-						<Icon name="close" size={12} />
-					</Button>
-				</Tooltip>
 			</div>
 
 			<Modal
diff --git a/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx b/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
index 738bfd25..4030f68a 100644
--- a/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
+++ b/src/layouts/bookmark/components/modal/add-bookmark.modal.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { TextInput } from '@/components/ui'
 import { Icon } from '@/src/icons'
 import type { BookmarkType } from '../../types/bookmark.types'
@@ -243,7 +242,7 @@ export function AddBookmarkModal({
 						setShowAdvanced={setShowAdvanced}
 					/>
 
-					<div className="flex items-center gap-x-2">
+					<div className="flex items-center gap-x-1">
 						<Button
 							onClick={onCloseHandler}
 							size="md"
@@ -259,11 +258,11 @@ export function AddBookmarkModal({
 								isAdding
 							}
 							size="md"
-							isPrimary={true}
 							loading={isAdding}
 							className={
-								'btn w-28 border-none shadow-none text-secondary rounded-2xl transition-colors duration-300 ease-in-out'
+								'btn w-28 border-none shadow-none  rounded-2xl transition-colors duration-300 ease-in-out'
 							}
+							variant={'primary'}
 						>
 							ذخیره
 						</Button>
diff --git a/src/layouts/bookmark/components/modal/advanced.modal.tsx b/src/layouts/bookmark/components/modal/advanced.modal.tsx
index 33404c88..078e387f 100644
--- a/src/layouts/bookmark/components/modal/advanced.modal.tsx
+++ b/src/layouts/bookmark/components/modal/advanced.modal.tsx
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { ColorPicker } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { getEmojiList } from '@/services/emoji/emoji-api'
@@ -182,7 +181,9 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 							type="button"
 							onClick={resetBackground}
 							size="md"
-							className="rounded-2xl p-3!"
+							className="p-3!"
+							rounded={'2xl'}
+							variant={'default'}
 						>
 							<Icon name="reload" className="w-4 h-4" />
 						</Button>
@@ -212,7 +213,9 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 							type="button"
 							onClick={resetTextColor}
 							size="md"
-							className="rounded-2xl p-3!"
+							className="p-3!"
+							rounded={'2xl'}
+							variant={'default'}
 						>
 							<Icon name="reload" className="w-4 h-4" />
 						</Button>
@@ -229,9 +232,9 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 							size="md"
 							type="button"
 							onClick={toggleEmojiPopover}
-							className={
-								'btn !w-fit px-8 border-none shadow-none bg-base-300 text-muted rounded-xl transition-colors duration-300 ease-in-out'
-							}
+							className={'btn !w-fit px-8'}
+							rounded={'2xl'}
+							variant={'default'}
 						>
 							{sticker ? (
 								<>
@@ -326,9 +329,8 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 					<Button
 						size="md"
 						onClick={() => onClose(null)}
-						className={
-							'btn btn-circle !bg-base-300 hover:!bg-error/10 text-muted hover:!text-error px-10 border-none shadow-none !rounded-2xl transition-colors duration-300 ease-in-out'
-						}
+						rounded={'2xl'}
+						className="w-20 transition-colors duration-300 ease-in-out border-none shadow-none btn bg-base-300 hover:bg-error/10 text-base-content/80 hover:text-error rounded-2xl"
 					>
 						لغو
 					</Button>
@@ -336,10 +338,9 @@ export function AdvancedModal({ title, onClose, isOpen, bookmark }: AdvancedModa
 						type="submit"
 						onClick={() => handleClose()}
 						size="md"
-						isPrimary={true}
-						className={
-							'btn btn-circle !w-fit px-8 border-none shadow-none text-secondary !rounded-2xl transition-colors duration-300 ease-in-out'
-						}
+						variant={'primary'}
+						rounded={'2xl'}
+						className={'w-fit px-8  border-none'}
 					>
 						ذخیره
 					</Button>
diff --git a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
index 76f60b48..15ceab11 100644
--- a/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
+++ b/src/layouts/bookmark/components/modal/edit-bookmark.modal.tsx
@@ -1,6 +1,5 @@
 import { getFaviconFromUrl } from '@/common/utils/icon'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { TextInput } from '@/components/ui'
 import { useEffect, useState } from 'react'
 import type { Bookmark } from '../../types/bookmark.types'
@@ -216,7 +215,8 @@ export function EditBookmarkModal({
 							onClick={onClose}
 							size="md"
 							disabled={isUpdating}
-							className="w-20 transition-colors duration-300 ease-in-out border-none shadow-none btn bg-base-300 hover:bg-error/10 text-base-content/80 hover:text-error rounded-2xl"
+							className="w-20 transition-colors duration-300 ease-in-out border-none shadow-none btn bg-base-300 hover:bg-error/10 text-base-content/80 hover:text-error"
+							rounded={'2xl'}
 						>
 							لغو
 						</Button>
@@ -228,9 +228,10 @@ export function EditBookmarkModal({
 								isUpdating
 							}
 							size="md"
-							isPrimary={true}
 							loading={isUpdating}
-							className="transition-colors duration-300 ease-in-out border-none shadow-none btn w-28 text-secondary rounded-2xl"
+							variant={'primary'}
+							rounded={'2xl'}
+							className="transition-colors duration-300 ease-in-out border-none shadow-none btn w-28"
 						>
 							ذخیره
 						</Button>
diff --git a/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx b/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx
index 8c370254..01ac65a9 100644
--- a/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx
+++ b/src/layouts/bookmark/components/modal/import-browser-bookmarks.modal.tsx
@@ -4,8 +4,7 @@ import { showToast } from '@/common/toast'
 import { getFaviconFromUrl } from '@/common/utils/icon'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { Icon } from '@/src/icons'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { useBookmarkStore } from '../../context/bookmark.context'
 import { MAX_BROWSER_IMPORT_ITEMS } from '../../constants/browser-import.constant'
 import type { BrowserImportNode } from '../../types/bookmark.types'
@@ -299,8 +298,8 @@ export function ImportBrowserBookmarksModal({
 					<Button
 						size="sm"
 						onClick={handlePermission}
-						className="rounded-2xl"
-						isPrimary
+						rounded={'2xl'}
+						variant={'primary'}
 					>
 						فعال‌سازی دسترسی
 					</Button>
@@ -348,20 +347,21 @@ export function ImportBrowserBookmarksModal({
 							onClick={onClose}
 							size="md"
 							disabled={isImporting}
-							className="w-20 transition-colors duration-300 ease-in-out border-none shadow-none btn bg-base-300 hover:bg-error/10 text-base-content/80 hover:text-error rounded-2xl"
+							className="w-20 transition-colors duration-300 ease-in-out bg-base-300 hover:bg-error/10 text-base-content/80 hover:text-error rounded-2xl"
 						>
 							انصراف
 						</Button>
 						<Button
 							onClick={handleImport}
 							size="md"
-							isPrimary
+							variant={'primary'}
 							disabled={selectedIds.size === 0 || isImporting}
 							loading={isImporting}
 							loadingText={
 								<span className="text-xs">در حال درون‌ریزی...</span>
 							}
-							className="w-32 transition-colors duration-300 ease-in-out border-none shadow-none btn btn-circle text-secondary rounded-2xl"
+							rounded={'2xl'}
+							className="w-32"
 						>
 							درون‌ریزی
 						</Button>
diff --git a/src/layouts/bookmark/components/shared.tsx b/src/layouts/bookmark/components/shared.tsx
index 8a2a8570..8e2474fb 100644
--- a/src/layouts/bookmark/components/shared.tsx
+++ b/src/layouts/bookmark/components/shared.tsx
@@ -1,4 +1,4 @@
-import { ItemSelector } from '@/components/ui'
+import { Button, ItemSelector } from '@/components/ui'
 import type { BookmarkType } from '../types/bookmark.types'
 import { Icon } from '@/src/icons'
 
@@ -54,12 +54,13 @@ export function ShowAdvancedButton({
 	showAdvanced,
 }: ShowAdvancedButtonProps) {
 	return (
-		<button
+		<Button
 			type="button"
 			onClick={() => setShowAdvanced(!showAdvanced)}
-			className={
-				'bg-base-300 hover:bg-base-300/70 border border-base-300/70 flex items-center gap-1 px-3 py-1 text-sm font-medium transition-all duration-200 cursor-pointer text-content rounded-xl active:scale-95'
-			}
+			size={'md'}
+			rounded={'2xl'}
+			variant={'default'}
+			className="text-muted"
 		>
 			<span>{showAdvanced ? 'گزینه‌های کمتر' : 'گزینه‌های بیشتر'}</span>
 			<Icon
@@ -67,6 +68,6 @@ export function ShowAdvancedButton({
 				size={16}
 				className={`transition-all duration-300 ${showAdvanced ? 'rotate-0' : 'rotate-180'}`}
 			/>
-		</button>
+		</Button>
 	)
 }
diff --git a/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx b/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx
index 436dfe82..6cfbcbf9 100644
--- a/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx
+++ b/src/layouts/friends/components/activity-card/manage-activity.bottom-sheet.tsx
@@ -1,8 +1,10 @@
 import { useState } from 'react'
-import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
-import { Modal } from '@/components/ui'
-import { useRemoveActivity, useSetActivity } from '@/services/hooks/user/user-service.hook'
+import { Button, Modal } from '@/components/ui'
+import {
+	useRemoveActivity,
+	useSetActivity,
+} from '@/services/hooks/user/user-service.hook'
 import { translateError } from '@/common/utils/translate-error'
 import { playAlarm } from '@/common/play-alarm'
 import {
@@ -248,8 +250,9 @@ export function ManageActivityBottomSheet({
 						onClick={handleSave}
 						disabled={isSubmitting || !activity.trim()}
 						size="sm"
-						className="w-full mt-1 rounded-xl"
-						isPrimary
+						className="w-full mt-1"
+						variant={'primary'}
+						rounded={'2xl'}
 						loading={isSubmitting}
 					>
 						انتشار نوشته
diff --git a/src/layouts/friends/components/add-friend.bottom-sheet.tsx b/src/layouts/friends/components/add-friend.bottom-sheet.tsx
index 74f019f4..f5baea82 100644
--- a/src/layouts/friends/components/add-friend.bottom-sheet.tsx
+++ b/src/layouts/friends/components/add-friend.bottom-sheet.tsx
@@ -1,11 +1,10 @@
 import { useState } from 'react'
-import { Button } from '@/components/button/button'
 import { TextInput } from '@/components/text-input'
 import { useAuth } from '@/context/auth.context'
 import { useSendFriendRequest } from '@/services/hooks/friends/friend-service.hook'
 import { translateError } from '@/common/utils/translate-error'
 import { showToast } from '@/common/toast'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface AddFriendBottomSheetProps {
diff --git a/src/layouts/friends/components/friend-requests.bottom-sheet.tsx b/src/layouts/friends/components/friend-requests.bottom-sheet.tsx
index f0f7b1a0..3ed9bd87 100644
--- a/src/layouts/friends/components/friend-requests.bottom-sheet.tsx
+++ b/src/layouts/friends/components/friend-requests.bottom-sheet.tsx
@@ -5,9 +5,8 @@ import {
 
 import { RemoveFriendButton } from './remove-button'
 import { FriendsList } from './friends-list'
-import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface Prop {
@@ -46,11 +45,7 @@ export const FriendRequestsBottomSheet = ({ isOpen, onClose }: Prop) => {
 						size="sm"
 						onClick={() => acceptFriend(friend.id)}
 						disabled={isProcessing}
-						className="flex items-center justify-center gap-1
-				h-9 px-3
-				text-success bg-success/10 border border-success/20
-				rounded-lg transition-all
-				active:scale-[0.97]"
+						className="flex items-center justify-center gap-1 h-9 px-3 text-success bg-success/10 border border-success/20 rounded-lg transition-all active:scale-[0.97]"
 					>
 						<Icon name="userCheck" size={18} />
 						<span className="text-xs font-medium">دوست شیم</span>
diff --git a/src/layouts/friends/components/remove-button.tsx b/src/layouts/friends/components/remove-button.tsx
index 52bb8bd7..0670f41d 100644
--- a/src/layouts/friends/components/remove-button.tsx
+++ b/src/layouts/friends/components/remove-button.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 import type { Friend } from '@/services/hooks/friends/friend-service.hook'
 import { Icon } from '@/src/icons'
 
diff --git a/src/layouts/market/market-coins/components/coin-package-card.tsx b/src/layouts/market/market-coins/components/coin-package-card.tsx
index 971553c3..b7322a0c 100644
--- a/src/layouts/market/market-coins/components/coin-package-card.tsx
+++ b/src/layouts/market/market-coins/components/coin-package-card.tsx
@@ -1,6 +1,6 @@
-import { Button } from '@/components/button/button'
 import { ConfigKey } from '@/common/constant/config.key'
-import { CoinPackage } from '@/services/hooks/market/market-coins.interface'
+import { Button } from '@/components/ui'
+import type { CoinPackage } from '@/services/hooks/market/market-coins.interface'
 import { Icon } from '@/src/icons'
 
 interface CoinPackageCardProps {
@@ -60,7 +60,9 @@ export function CoinPackageCard({ package: pkg, onPurchase }: CoinPackageCardPro
 					<Button
 						size="xs"
 						onClick={onPurchase}
-						className="h-6 px-2.5 text-[11px] font-medium text-white rounded-lg bg-primary/90 hover:bg-primary active:scale-95 transition-all"
+						variant={'primary'}
+						rounded={'lg'}
+						className="px-2.5"
 					>
 						<div className="flex items-center gap-1">
 							<Icon name="shoppingCart" size={10} />
diff --git a/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx b/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
index de725ff3..1c93653f 100644
--- a/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
+++ b/src/layouts/market/market-coins/components/coin-package-purchase-modal.tsx
@@ -1,6 +1,5 @@
 import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { translateError } from '@/common/utils/translate-error'
 import { showToast } from '@/common/toast'
 import { ConfigKey } from '@/common/constant/config.key'
@@ -115,7 +114,8 @@ export function CoinPackagePurchaseModal({
 						onClick={onClose}
 						size="md"
 						disabled={isPending}
-						className="flex-1 rounded-2xl border-muted hover:bg-muted/50 text-content"
+						className="flex-1"
+						rounded={'2xl'}
 					>
 						لغو
 					</Button>
@@ -125,7 +125,9 @@ export function CoinPackagePurchaseModal({
 						disabled={isPending}
 						loading={isPending}
 						loadingText="در حال انتقال..."
-						className="flex-1 text-white rounded-2xl bg-primary hover:bg-primary/90"
+						className="flex-1"
+						variant={'primary'}
+						rounded={'2xl'}
 					>
 						<Icon name="check" size={15} className="ml-1" />
 						تایید و پرداخت
diff --git a/src/layouts/market/other-items/components/market-item-card.tsx b/src/layouts/market/other-items/components/market-item-card.tsx
index 61efc80b..3f29a1f8 100644
--- a/src/layouts/market/other-items/components/market-item-card.tsx
+++ b/src/layouts/market/other-items/components/market-item-card.tsx
@@ -1,10 +1,10 @@
-import { Button } from '@/components/button/button'
 import { ItemPrice } from '@/components/item-price/item-price'
 import { getItemTypeEmoji } from '@/components/market/get-item-type-emoji'
 import { type MarketItem, MarketItemType } from '@/services/hooks/market/market.interface'
 import { showToast } from '@/common/toast'
 import { RenderPreview } from './render-preview'
 import { Icon } from '@/src/icons'
+import { Button } from '@/components/ui'
 
 interface MarketItemCardProps {
 	item: MarketItem
@@ -90,7 +90,9 @@ export function MarketItemCard({
 						<Button
 							size="xs"
 							onClick={handleBuy}
-							className="h-6 px-2.5 rounded-lg text-[11px] font-medium bg-primary/90 text-white hover:bg-primary active:scale-95 transition-all"
+							rounded={'lg'}
+							variant={'primary'}
+							className="h-6 px-2.5 rounded-lg text-[11px] active:scale-95 transition-all"
 						>
 							<div className="flex items-center gap-1">
 								<Icon name="shoppingCart" size={10} />
diff --git a/src/layouts/market/other-items/components/market-item-purchase-modal.tsx b/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
index e93cf333..2e6696ec 100644
--- a/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
+++ b/src/layouts/market/other-items/components/market-item-purchase-modal.tsx
@@ -1,7 +1,6 @@
 import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
 import { ItemPrice } from '@/components/item-price/item-price'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import type { MarketItem } from '@/services/hooks/market/market.interface'
 import { usePurchaseMarketItem } from '@/services/hooks/market/purchase-market-item.hook'
 import { translateError } from '@/common/utils/translate-error'
@@ -103,7 +102,7 @@ export function MarketItemPurchaseModal({
 					<div className="flex items-start gap-2.5 px-3 py-2.5 rounded-2xl border border-error/20 bg-error/5">
 						<Icon
 							name="alert"
-							className="w-4 h-4 mt-0.5 text-error flex-shrink-0"
+							className="w-4 h-4 mt-0.5 text-error shrink-0"
 						/>
 						<div>
 							<p className="text-xs font-medium text-error">
@@ -132,11 +131,8 @@ export function MarketItemPurchaseModal({
 						disabled={!canAfford || isPending}
 						loading={isPending}
 						loadingText="در حال خرید..."
-						className={`rounded-2xl ${
-							canAfford
-								? 'bg-primary hover:bg-primary/90 text-white'
-								: 'bg-base-300 text-muted cursor-not-allowed'
-						}`}
+						rounded={'2xl'}
+						variant={canAfford ? 'primary' : 'default'}
 					>
 						<Icon name="check" size={15} className="ml-1" />
 						تایید خرید
diff --git a/src/layouts/mini-apps/mini-apps.layout.tsx b/src/layouts/mini-apps/mini-apps.layout.tsx
index 91e74208..874f31a3 100644
--- a/src/layouts/mini-apps/mini-apps.layout.tsx
+++ b/src/layouts/mini-apps/mini-apps.layout.tsx
@@ -5,8 +5,7 @@ import { useEffect, useRef } from 'react'
 import { MiniAppRunner } from './mini-app-runner'
 import { listenEvent } from '@/common/utils/call-event'
 import Analytics from '@/analytics'
-import { Modal } from '@/components/ui'
-import { Button } from '@/components/button/button'
+import { Button, Modal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 const EmptyMiniAppImage = 'https://cdn.widgetify.ir/extension/empty-mini-app.png'
 export function MiniAppsLayout() {
@@ -176,9 +175,10 @@ export function MiniAppsLayout() {
 					<Button
 						size="sm"
 						type="button"
-						isPrimary
+						variant={'primary'}
+						rounded={'2xl'}
 						onClick={() => setShowInfo(false)}
-						className="h-12 mt-2 text-base font-bold shadow-sm btn-block rounded-2xl"
+						className="h-12 mt-2 text-base font-bold shadow-sm btn-block"
 					>
 						باشه
 					</Button>
diff --git a/src/layouts/mini-apps/states/mini-app-error.tsx b/src/layouts/mini-apps/states/mini-app-error.tsx
index d2d5c93b..8ff1bf2f 100644
--- a/src/layouts/mini-apps/states/mini-app-error.tsx
+++ b/src/layouts/mini-apps/states/mini-app-error.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 
 interface Prop {
 	handleReload: () => void
@@ -33,8 +33,9 @@ export function MiniAppError({ handleReload, onClickToBack }: Prop) {
 				<Button
 					size="sm"
 					type="button"
-					className="w-full rounded-2xl"
-					isPrimary
+					className="w-full"
+					rounded={'2xl'}
+					variant={'primary'}
 					onClick={handleReload}
 				>
 					تلاش مجدد
@@ -42,7 +43,9 @@ export function MiniAppError({ handleReload, onClickToBack }: Prop) {
 				<Button
 					type="button"
 					size="sm"
-					className="text-muted rounded-2xl"
+					// className=""
+					variant={'default'}
+					rounded={'2xl'}
 					onClick={() => onClickToBack()}
 				>
 					بازگشت
diff --git a/src/layouts/mini-apps/states/mini-app.auth.tsx b/src/layouts/mini-apps/states/mini-app.auth.tsx
index 667ff864..978a263c 100644
--- a/src/layouts/mini-apps/states/mini-app.auth.tsx
+++ b/src/layouts/mini-apps/states/mini-app.auth.tsx
@@ -1,6 +1,6 @@
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import type { MiniAppScopeEnum } from '@/services/hooks/mini-apps/mini-apps-interface'
 import { Icon } from '@/src/icons'
@@ -57,7 +57,7 @@ export function WebAppAuthGate({ scopes, onConfirm }: Prop) {
 							onClick={onClick}
 							size="sm"
 							rounded="xl"
-							isPrimary
+							variant={'primary'}
 							className="w-full text-sm font-medium border-none"
 						>
 							تایید و ادامه
@@ -79,7 +79,7 @@ export function WebAppAuthGate({ scopes, onConfirm }: Prop) {
 							onClick={() => callEvent('openProfile')}
 							size="sm"
 							rounded="xl"
-							isPrimary
+							variant={'primary'}
 							className="w-full text-sm font-medium border-none"
 						>
 							باشه، ورود به حساب
diff --git a/src/layouts/search/browser-bookmark/bookmark-popover.tsx b/src/layouts/search/browser-bookmark/bookmark-popover.tsx
index b1393e32..a604fd7d 100644
--- a/src/layouts/search/browser-bookmark/bookmark-popover.tsx
+++ b/src/layouts/search/browser-bookmark/bookmark-popover.tsx
@@ -7,8 +7,8 @@ import {
 	getBrowserBookmarks,
 } from '@/layouts/bookmark/utils/browser-bookmarks.util'
 import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
+import { Button } from '@/components/ui'
 
 interface BookmarkPopoverProps {
 	isOpen: boolean
@@ -96,21 +96,24 @@ export function BookmarkPopover({ isOpen, onClose, coords }: BookmarkPopoverProp
 					<Button
 						size="sm"
 						onClick={() => handlePermission()}
-						className="w-full rounded-2xl"
-						isPrimary
+						className="w-full"
+						variant={'primary'}
+						rounded={'2xl'}
 					>
 						فعال‌سازی دسترسی
 					</Button>
 				</div>
 			) : (
-				<div className="flex flex-col max-h-[420px]">
+				<div className="flex flex-col max-h-105">
 					<div className="flex items-center justify-between p-3 border-b border-base-content/5 bg-base-200/30">
 						<span className="text-xs font-bold text-content">{c}</span>
 						{currentFolderId && (
 							<Button
 								size="sm"
 								onClick={handleGoBack}
-								className="text-[10px] btn-ghost text-muted rounded-xl flex items-center gap-1!"
+								variant={'default'}
+								rounded={'xl'}
+								className="text-[10px] flex items-center gap-1!"
 							>
 								<Icon name="chevronRight" />
 								بازگشت
diff --git a/src/layouts/search/image/image-search.portal.tsx b/src/layouts/search/image/image-search.portal.tsx
index 6fe10b26..5376eb45 100644
--- a/src/layouts/search/image/image-search.portal.tsx
+++ b/src/layouts/search/image/image-search.portal.tsx
@@ -1,12 +1,11 @@
 import { useRef, useState } from 'react'
-import { Button } from '@/components/button/button'
 import { showToast } from '@/common/toast'
 import { TextInput } from '@/components/text-input'
 import Analytics from '@/analytics'
 import { RequireAuth } from '@/components/auth/require-auth'
 import { getMainClient } from '@/services/api'
 import { translateError } from '@/common/utils/translate-error'
-import { Portal } from '@/components/ui'
+import { Button, Portal } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface ImageSearchPortalProps {
@@ -216,8 +215,9 @@ export function ImageSearchPortal({
 						<Button
 							onClick={handleUrlSearch}
 							size="sm"
-							isPrimary={true}
-							className="w-20 rounded-2xl"
+							variant={'primary'}
+							rounded={'2xl'}
+							className="w-20"
 						>
 							جستجو
 						</Button>
diff --git a/src/layouts/search/suggestion/autocomplete-consent.modal.tsx b/src/layouts/search/suggestion/autocomplete-consent.modal.tsx
index ae269806..713215cc 100644
--- a/src/layouts/search/suggestion/autocomplete-consent.modal.tsx
+++ b/src/layouts/search/suggestion/autocomplete-consent.modal.tsx
@@ -1,6 +1,5 @@
 import { autoFormatErrorToast } from '@/common/toast'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { safeAwait } from '@/services/api'
 import { useUpdateSearchAutocomplete } from '@/services/hooks/extension/update-setting.hook'
 
@@ -39,9 +38,8 @@ export function AutocompleteConsentModal({
 					<Button
 						onClick={() => onClose()}
 						size="md"
-						className={
-							'btn btn-circle bg-base-300!  hover:bg-error/10! text-muted hover:text-error! px-10 border-none shadow-none rounded-xl transition-colors duration-300 ease-in-out'
-						}
+						rounded={'2xl'}
+						className="w-20"
 						disabled={isPending}
 					>
 						لغو
@@ -51,11 +49,10 @@ export function AutocompleteConsentModal({
 						onClick={() => onUpdateStatus()}
 						disabled={isPending}
 						size="md"
-						isPrimary={true}
+						variant={'primary'}
+						rounded={'2xl'}
 						loading={isPending}
-						className={
-							'btn btn-circle w-fit!  px-8 border-none shadow-none text-secondary rounded-xl transition-colors duration-300 ease-in-out'
-						}
+						className="px-8"
 					>
 						قبوله، فعالسازی
 					</Button>
diff --git a/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx b/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx
index a5e7a933..88bd5d3d 100644
--- a/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/auth-otp.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import { TextInput } from '@/components/text-input'
-import { Button } from '@/components/button/button'
 import {
 	useGetAuthStatus,
 	useRequestOtp,
@@ -14,6 +13,7 @@ import OtpInput from './components/otp-input'
 import { callEvent } from '@/common/utils/call-event'
 import { sleep } from '@/common/utils/timeout'
 import { Icon } from '@/src/icons'
+import { Button } from '@/components/ui'
 
 type AuthOtpProps = {
 	step: 'enter-email' | 'enter-otp'
@@ -181,11 +181,12 @@ const AuthOtp: React.FC<AuthOtpProps> = ({ step, setStep }) => {
 					</div>
 					<Button
 						type="submit"
-						isPrimary={true}
+						variant={'primary'}
 						size="md"
+						rounded={'2xl'}
 						loading={isPending}
 						disabled={isPending || !email}
-						className="relative w-full py-2.5 md:py-3 text-sm md:text-base transition-all duration-200 shadow text-white group rounded-xl disabled:cursor-not-allowed disabled:text-base-content disabled:opacity-50"
+						className="group"
 					>
 						<span className="transition-transform duration-200 group-hover:scale-105">
 							{isPending ? 'درحال ارسال...' : 'بزن بریم'}
@@ -251,9 +252,10 @@ const AuthOtp: React.FC<AuthOtpProps> = ({ step, setStep }) => {
 				</button>
 				<Button
 					type="submit"
-					isPrimary={true}
+					variant={'primary'}
 					size="md"
-					className="relative flex items-center justify-center w-full py-2.5 md:py-3 text-sm md:text-base font-semibold transition-all duration-200 shadow text-white group rounded-xl disabled:opacity-50 disabled:cursor-not-allowed"
+					className="w-full flex text-sm md:text-base"
+					rounded={'2xl'}
 					disabled={otp.length !== 6}
 				>
 					<span className="transition-transform duration-200 group-hover:scale-105">
diff --git a/src/layouts/setting/tabs/account/auth-form/auth-password.tsx b/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
index fc085348..31881efc 100644
--- a/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
@@ -1,6 +1,5 @@
 import { useState } from 'react'
 import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
 import { TextInput } from '@/components/text-input'
 import { useAuth } from '@/context/auth.context'
 import { useSignIn } from '@/services/hooks/auth/auth-service.hook'
@@ -8,6 +7,7 @@ import { translateError } from '@/common/utils/translate-error'
 import InputTextError from './components/input-text-error'
 import { isEmail, isEmpty, isLessThan } from '@/common/utils/validators'
 import { Icon } from '@/src/icons'
+import { Button } from '@/components/ui'
 
 export default function AuthPassword() {
 	const [email, setEmail] = useState('')
diff --git a/src/layouts/setting/tabs/account/components/account-verification-status.tsx b/src/layouts/setting/tabs/account/components/account-verification-status.tsx
index f3ee3131..7ffb2109 100644
--- a/src/layouts/setting/tabs/account/components/account-verification-status.tsx
+++ b/src/layouts/setting/tabs/account/components/account-verification-status.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@/components/button/button'
-import { SectionPanel } from '@/components/ui'
+import { Button, SectionPanel } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface AccountVerificationStatusProps {
diff --git a/src/layouts/setting/tabs/account/components/interests-selector.tsx b/src/layouts/setting/tabs/account/components/interests-selector.tsx
index 9d0f3117..aff797cb 100644
--- a/src/layouts/setting/tabs/account/components/interests-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/interests-selector.tsx
@@ -1,8 +1,6 @@
 import { useState, useRef } from 'react'
-import { ClickableTooltip } from '@/components/ui'
+import { Dropdown } from '@/components/ui'
 import type { ProfileMetaItem } from '@/services/hooks/profile/get-profile-meta.hook'
-import { Button } from '@/components/button/button'
-import { Icon } from '@/src/icons'
 import { Chip } from '@/components/ui'
 
 interface InterestsSelectorProps {
@@ -33,7 +31,7 @@ export const InterestsSelector = ({
 	}
 
 	const content = (
-		<div className="p-2 border w-72 bg-base-200 rounded-2xl border-base-300">
+		<div className="p-2 border w-82 bg-base-200  rounded-2xl border-base-300">
 			{isLoading ? (
 				<div className="py-3 text-[10px] italic font-medium text-center animate-pulse text-muted">
 					صبر کنید...
@@ -56,45 +54,24 @@ export const InterestsSelector = ({
 					})}
 				</div>
 			)}
-
-			<div className="flex gap-2 pt-2">
-				<Button
-					onClick={() => setIsOpen(!isOpen)}
-					size="sm"
-					className={`flex-1 rounded-2xl bg-primary hover:bg-primary/90 text-white`}
-				>
-					<Icon name="check" size={16} className="ml-1" />
-					تایید{' '}
-				</Button>
-				<Button
-					onClick={() => setIsOpen(!isOpen)}
-					size="sm"
-					className="w-20 rounded-2xl border-muted hover:bg-muted/50 text-content"
-				>
-					لغو
-				</Button>
-			</div>
 		</div>
 	)
 
 	return (
-		<>
-			<button
-				ref={triggerRef}
-				type="button"
-				onClick={() => setIsOpen(!isOpen)}
-				className="flex items-center justify-between w-full p-3 text-right transition-colors hover:bg-content"
-			>
-				{triggerElement}
-			</button>
-
-			<ClickableTooltip
-				content={content}
-				triggerRef={triggerRef}
-				isOpen={isOpen}
-				setIsOpen={setIsOpen}
-				position="bottom"
-			/>
-		</>
+		<Dropdown
+			trigger={
+				<button
+					ref={triggerRef}
+					type="button"
+					onClick={() => setIsOpen(!isOpen)}
+					className="flex items-center justify-between w-full py-2 text-right transition-colors hover:bg-content"
+				>
+					{triggerElement}
+				</button>
+			}
+			className="w-full"
+		>
+			{content}
+		</Dropdown>
 	)
 }
diff --git a/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx b/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx
index a304ea69..220889ac 100644
--- a/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/add-email.modal.tsx
@@ -1,7 +1,6 @@
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { TextInput } from '@/components/ui'
 import { isEmpty, isLessThan } from '@/common/utils/validators'
-import { Button } from '@/components/button/button'
 import {
 	useChangeEmailRequest,
 	useChangeEmailVerify,
@@ -141,11 +140,12 @@ export function AddEmailModal(prop: AddPhoneProp) {
 					<InputTextError message={error.otp} className="justify-center" />
 					<Button
 						type="submit"
-						isPrimary={true}
+						variant={'primary'}
 						size="md"
+						rounded={'2xl'}
 						loading={isPending}
 						disabled={isPending}
-						className="relative w-full py-2.5 md:py-3 text-sm md:text-base transition-all duration-200 shadow text-white group rounded-xl disabled:cursor-not-allowed disabled:text-base-content disabled:opacity-50"
+						className="text-base"
 					>
 						<span className="transition-transform duration-200 group-hover:scale-105">
 							{step === 'enter-code' ? 'تایید' : 'ادامه'}
diff --git a/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx b/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx
index 1b8441c9..77fc1dd3 100644
--- a/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/add-phone.modal.tsx
@@ -1,8 +1,7 @@
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { TextInput } from '@/components/ui'
 import { isEmpty, isLessThan } from '@/common/utils/validators'
 import InputTextError from '../../auth-form/components/input-text-error'
-import { Button } from '@/components/button/button'
 import OtpInput from '../../auth-form/components/otp-input'
 import {
 	useChangePhoneRequest,
@@ -139,11 +138,12 @@ export function AddPhoneModal(prop: AddPhoneProp) {
 					<InputTextError message={error.otp} className="justify-center" />
 					<Button
 						type="submit"
-						isPrimary={true}
+						variant={'primary'}
+						rounded={'2xl'}
 						size="md"
 						loading={isPending}
 						disabled={isPending}
-						className="relative w-full py-2.5 md:py-3 text-sm md:text-base transition-all duration-200 shadow text-white group rounded-xl disabled:cursor-not-allowed disabled:text-base-content disabled:opacity-50"
+						className="text-sm md:text-base"
 					>
 						<span className="transition-transform duration-200 group-hover:scale-105">
 							{step === 'enter-otp' ? 'تایید' : 'ادامه'}
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
index c09cd371..7542d938 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
@@ -55,7 +55,6 @@ export function ChangeBirthdayModal({ show, onClose, currentValue }: Prop) {
 						onChange={(val) => setValue(val)}
 					/>
 				</SectionPanel>
-
 				<FooterButtons
 					handleCancel={onCancel}
 					handleConfirm={onClickSave}
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
index 657aa671..5b52e5b0 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-interests.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@/components/ui'
+import { Chip, Modal } from '@/components/ui'
 import { useUpdateUserProfile } from '@/services/hooks/auth/auth-service.hook'
 import { useEffect, useState } from 'react'
 import { InterestsSelector } from '../interests-selector'
@@ -45,43 +45,39 @@ export function ChangeInterestsModal({ show, onClose, currentValue }: Prop) {
 			direction="rtl"
 			showCloseButton={false}
 		>
-			<div className="flex flex-col justify-between h-40 gap-4">
-				<SectionPanel title="به چی علاقه داری؟" size="xs">
-					<InterestsSelector
-						interests={fetchedInterests}
-						selectedInterests={interests}
-						onSelect={(ids) => setInterests(() => [...ids])}
-						isLoading={interestsLoading}
-						triggerElement={
-							<div className="flex flex-wrap w-full max-h-32 overflow-y-auto gap-1 p-3 transition-all border   border-content rounded-2xl hover:border-primary/40! cursor-pointer">
-								{interests.length > 0 ? (
-									interests.map((id) => (
-										<div
-											key={id}
-											className="flex items-center w-fit px-2 py-1 text-[11px] bg-primary/10 text-primary rounded-full border border-primary/20 h-6"
-										>
-											{
-												fetchedInterests.find((i) => i.id === id)
-													?.title
-											}
-										</div>
-									))
-								) : (
-									<span className="text-xs text-muted">
-										انتخاب زمینه‌های مورد علاقه...
-									</span>
-								)}
-							</div>
-						}
-					/>
-				</SectionPanel>
-
+			<SectionPanel title="به چی علاقه داری؟" size="xs">
+				<InterestsSelector
+					interests={fetchedInterests}
+					selectedInterests={interests}
+					onSelect={(ids) => setInterests(() => [...ids])}
+					isLoading={interestsLoading}
+					triggerElement={
+						<div className="flex flex-wrap w-full min-h-24 max-h-24 h-24 overflow-y-auto gap-1 p-2 transition-all border   border-content rounded-2xl hover:border-primary/40! cursor-pointer">
+							{interests.length > 0 ? (
+								interests.map((id) => (
+									<Chip
+										key={id}
+										className="py-0.5 px-1 h-fit"
+										selected
+										onClick={() => {}}
+									>
+										{fetchedInterests.find((i) => i.id === id)?.title}
+									</Chip>
+								))
+							) : (
+								<span className="text-xs text-muted">
+									انتخاب زمینه‌های مورد علاقه...
+								</span>
+							)}
+						</div>
+					}
+				/>
 				<FooterButtons
 					handleCancel={onCancel}
 					handleConfirm={onClickSave}
 					isPending={updateProfileMutation.isPending}
 				/>
-			</div>
+			</SectionPanel>
 		</Modal>
 	)
 }
diff --git a/src/layouts/setting/tabs/account/components/modals/footer-buttons.tsx b/src/layouts/setting/tabs/account/components/modals/footer-buttons.tsx
index 3b3ca329..780bc838 100644
--- a/src/layouts/setting/tabs/account/components/modals/footer-buttons.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/footer-buttons.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 
 interface Prop {
 	handleConfirm: any
@@ -12,9 +12,10 @@ export function FooterButtons({ handleCancel, handleConfirm, isPending }: Prop)
 				size="sm"
 				type="submit"
 				disabled={isPending}
-				isPrimary={true}
+				variant={'primary'}
+				rounded={'2xl'}
 				onClick={() => handleConfirm()}
-				className="text-sm shadow-xs flex-2 rounded-xl shadow-primary/20"
+				className="text-sm flex-2 h-10"
 			>
 				{isPending ? 'در حال ذخیره...' : 'ذخیره'}
 			</Button>
@@ -22,7 +23,9 @@ export function FooterButtons({ handleCancel, handleConfirm, isPending }: Prop)
 				size="sm"
 				type="button"
 				onClick={() => handleCancel()}
-				className="flex-1 text-sm font-medium border-none rounded-2xl bg-content"
+				variant={'default'}
+				rounded={'2xl'}
+				className="flex-1 h-10"
 			>
 				انصراف
 			</Button>
diff --git a/src/layouts/setting/tabs/account/components/occupation-selector.tsx b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
index 63140dfe..38cf77e6 100644
--- a/src/layouts/setting/tabs/account/components/occupation-selector.tsx
+++ b/src/layouts/setting/tabs/account/components/occupation-selector.tsx
@@ -1,8 +1,6 @@
 import { useState, useRef } from 'react'
-import { ClickableTooltip } from '@/components/ui'
+import { Dropdown } from '@/components/ui'
 import type { ProfileMetaItem } from '@/services/hooks/profile/get-profile-meta.hook'
-import { Button } from '@/components/button/button'
-import { Icon } from '@/src/icons'
 import { Chip } from '@/components/ui'
 
 interface OccupationSelectorProps {
@@ -55,46 +53,24 @@ export const OccupationSelector = ({
 					})}
 				</div>
 			)}
-
-			<div className="flex gap-2 pt-2">
-				<Button
-					onClick={() => setIsOpen(!isOpen)}
-					size="sm"
-					className={`flex-1 rounded-2xl bg-primary hover:bg-primary/90 text-white`}
-				>
-					<Icon name="check" size={16} className="ml-1" />
-					تایید{' '}
-				</Button>
-				<Button
-					onClick={() => setIsOpen(!isOpen)}
-					size="sm"
-					className="w-20 rounded-2xl border-muted hover:bg-muted/50 text-content"
-				>
-					لغو
-				</Button>
-			</div>
 		</div>
 	)
 
 	return (
-		<>
-			<button
-				ref={triggerRef}
-				type="button"
-				onClick={() => setIsOpen(!isOpen)}
-				className="flex items-center justify-between w-full p-3 text-right transition-colors hover:bg-content"
-			>
-				{triggerElement}
-			</button>
-
-			<ClickableTooltip
-				content={content}
-				triggerRef={triggerRef}
-				isOpen={isOpen}
-				setIsOpen={setIsOpen}
-				position="bottom"
-				className=""
-			/>
-		</>
+		<Dropdown
+			trigger={
+				<button
+					ref={triggerRef}
+					type="button"
+					onClick={() => setIsOpen(!isOpen)}
+					className="flex items-center justify-between w-full py-2 text-right transition-colors hover:bg-content"
+				>
+					{triggerElement}
+				</button>
+			}
+			className="w-full"
+		>
+			{content}
+		</Dropdown>
 	)
 }
diff --git a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
index 7e8501bc..633f7ceb 100644
--- a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@/components/button/button'
-import { ClickableTooltip } from '@/components/ui'
+import { Button, ClickableTooltip } from '@/components/ui'
 import { Icon } from '@/src/icons'
 import { useRef, useState, useEffect } from 'react'
 
@@ -155,7 +154,9 @@ export default function JalaliDatePicker({
 							<Button
 								onClick={handleConfirm}
 								size="sm"
-								className={`flex-1 rounded-2xl bg-primary hover:bg-primary/90 text-white`}
+								rounded={'2xl'}
+								variant={'primary'}
+								className="flex-1"
 							>
 								<Icon name="check" size={16} className="ml-1" />
 								تایید{' '}
@@ -163,7 +164,9 @@ export default function JalaliDatePicker({
 							<Button
 								onClick={handleCancel}
 								size="sm"
-								className="w-20 rounded-2xl border-muted hover:bg-muted/50 text-content"
+								rounded={'2xl'}
+								variant={'default'}
+								className="w-20"
 							>
 								لغو
 							</Button>
diff --git a/src/layouts/setting/tabs/account/components/profile-display.tsx b/src/layouts/setting/tabs/account/components/profile-display.tsx
index 1846eaf3..683beae5 100644
--- a/src/layouts/setting/tabs/account/components/profile-display.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-display.tsx
@@ -1,6 +1,5 @@
 import moment from 'jalali-moment'
-import { AvatarComponent } from '@/components/ui'
-import { Button } from '@/components/button/button'
+import { AvatarComponent, Button } from '@/components/ui'
 import { OfflineIndicator } from '@/components/ui'
 import { UserCoin } from './user-coin'
 import type React from 'react'
@@ -155,7 +154,7 @@ export const ProfileDisplay = () => {
 						) : (
 							<Button
 								size="xs"
-								className="rounded-2xl"
+								rounded={'2xl'}
 								onClick={() => clickToShow()}
 							>
 								<div className="flex items-center gap-1">
diff --git a/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx b/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx
index 850486cd..2fbdd082 100644
--- a/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx
+++ b/src/layouts/setting/tabs/account/tabs/rewards/components/referral-code-section.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@/components/button/button'
-import { SectionPanel } from '@/components/ui'
+import { Button, SectionPanel } from '@/components/ui'
 import { showToast } from '@/common/toast'
 
 interface ReferralCodeSectionProps {
@@ -43,8 +42,8 @@ export const ReferralCodeSection = ({ code, className }: ReferralCodeSectionProp
 					<Button
 						onClick={handleCopyCode}
 						size="sm"
-						className="rounded-2xl"
-						isPrimary={true}
+						rounded={'xl'}
+						variant={'primary'}
 					>
 						کپی کد
 					</Button>
diff --git a/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx b/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx
index 02169a1c..a66bfdde 100644
--- a/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx
+++ b/src/layouts/setting/tabs/account/tabs/user-profile/connections/components/connection-modal.tsx
@@ -1,5 +1,4 @@
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import type { Platform } from './platform-config.js'
 
 interface ConnectionModalProps {
@@ -98,14 +97,6 @@ export function ConnectionModal({
 				</div>
 
 				<div className="flex justify-end gap-3">
-					<Button
-						size="sm"
-						onClick={onClose}
-						disabled={isLoading}
-						className="flex-1 text-xs font-bold border-none cursor-pointer h-9 rounded-xl bg-base-200 text-content hover:bg-base-300/90"
-					>
-						لغو
-					</Button>
 					<Button
 						size="sm"
 						onClick={() => (isLoading ? undefined : onConfirm())}
@@ -116,11 +107,22 @@ export function ConnectionModal({
 								در حال پردازش
 							</span>
 						}
-						className={`flex-[2] h-9 rounded-xl font-black text-sm transition-all shadow-sm active:scale-95
-                    ${platform.connected ? 'bg-error text-white' : 'bg-primary text-white'}`}
+						className="flex-2 h-9 text-sm"
+						rounded={'2xl'}
+						variant={platform.connected ? 'danger' : 'primary'}
 					>
 						{platform.connected ? 'قطع اتصال' : 'تایید و شروع اتصال'}
 					</Button>
+					<Button
+						size="sm"
+						onClick={onClose}
+						disabled={isLoading}
+						variant={'default'}
+						rounded={'2xl'}
+						className="flex-1 h-9"
+					>
+						لغو
+					</Button>
 				</div>
 			</div>
 		</Modal>
diff --git a/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx b/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
index 740f4ab4..ec9b8ad7 100644
--- a/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
+++ b/src/layouts/setting/tabs/account/tabs/user-profile/user-profile.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
-import { Button } from '@/components/button/button'
-import { SectionPanel } from '@/components/ui'
+import { Button, SectionPanel } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useGetOrCreateReferralCode } from '@/services/hooks/user/referrals-service.hook'
 import {
@@ -71,7 +70,8 @@ export const UserProfile = () => {
 				<p className={'mb-4 text-center text-content'}>{getMessageError()}</p>
 				<Button
 					onClick={() => onClickLogout()}
-					className="text-white/90 btn-error"
+					variant={'danger'}
+					rounded={'2xl'}
 					size="md"
 				>
 					<Icon name="logOut" size={16} />
@@ -105,12 +105,13 @@ export const UserProfile = () => {
 					</p>
 					<Button
 						onClick={() => setShowConfirm(true)}
-						className="text-white/90 btn-error rounded-2xl"
 						size="md"
+						variant={'danger'}
+						rounded={'2xl'}
 					>
 						<Icon name="logOut" size={16} />
 						خروج از حساب کاربری
-					</Button>{' '}
+					</Button>
 				</div>
 			</SectionPanel>
 
diff --git a/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx b/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx
index 99b0c02a..3fe106b5 100644
--- a/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx
+++ b/src/layouts/setting/tabs/wallpapers/components/coin-purchase-modal.tsx
@@ -1,7 +1,6 @@
 import { callEvent } from '@/common/utils/call-event'
 import type { Wallpaper } from '@/common/wallpaper.interface'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { UserCoin } from '@/layouts/setting/tabs/account/components/user-coin'
 import { HoverPlayVideo } from '../tab/gallery/components/hover-play-video'
@@ -82,29 +81,35 @@ export function CoinPurchaseModal({
 				<div className="flex gap-3 pt-4">
 					{isAuthenticated ? (
 						<>
-							<Button
-								onClick={onClose}
-								size="md"
-								className="flex-1 text-content border-muted hover:bg-muted/50 rounded-2xl"
-							>
-								لغو
-							</Button>
 							<Button
 								onClick={onPurchase}
 								size="md"
 								disabled={isPurchasing}
 								loading={isPurchasing}
 								loadingText="در حال باز کردن..."
-								className="flex-1 text-white transition-all duration-200 border-none shadow-lg bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 rounded-2xl"
+								className="flex-2"
+								rounded={'2xl'}
+								variant={'primary'}
 							>
 								🔓 باز کردن
 							</Button>
+							<Button
+								onClick={onClose}
+								size="md"
+								className="flex-1"
+								variant={'default'}
+								rounded={'2xl'}
+							>
+								لغو
+							</Button>
 						</>
 					) : (
 						<Button
 							size="md"
 							onClick={onLogin}
-							className="flex-1 text-white transition-all duration-200 border-none shadow-lg bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 rounded-2xl"
+							className="w-full"
+							variant={'primary'}
+							rounded={'2xl'}
 						>
 							ورود به حساب کاربری
 						</Button>
diff --git a/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx b/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
index 0d55fda7..82d271b5 100644
--- a/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
+++ b/src/layouts/setting/tabs/wallpapers/components/upload-area.component.tsx
@@ -1,9 +1,9 @@
 import { useRef } from 'react'
 import type { Wallpaper } from '@/common/wallpaper.interface'
-import { Button } from '@/components/button/button'
 import { useWallpaperUpload } from '../hooks/use-wallpaper-upload'
 import { MediaPreview } from './media-preview.component'
 import { Icon } from '@/src/icons'
+import { Button } from '@/components/ui'
 
 const MAX_SIZE = 2
 const MAX_FILE_SIZE = MAX_SIZE * 1024 * 1024
@@ -89,11 +89,7 @@ export function UploadArea({ customWallpaper, onWallpaperChange }: UploadAreaPro
 				</div>
 
 				<div className="flex gap-2">
-					<Button
-						onClick={() => handleFileSelect()}
-						size="sm"
-						className="rounded-2xl"
-					>
+					<Button onClick={() => handleFileSelect()} size="sm" rounded={'2xl'}>
 						<Icon name="edit" size={14} />
 						<span>تغییر</span>
 					</Button>
diff --git a/src/layouts/simplify/widgets/news-simplify.tsx b/src/layouts/simplify/widgets/news-simplify.tsx
index 57b219c0..6eb8393e 100644
--- a/src/layouts/simplify/widgets/news-simplify.tsx
+++ b/src/layouts/simplify/widgets/news-simplify.tsx
@@ -1,5 +1,5 @@
 import { callEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { NewsLayout } from '@/layouts/widgets/news/news.layout'
 import { Icon } from '@/src/icons'
@@ -16,7 +16,8 @@ export function NewsSimplify() {
 				<Button
 					onClick={onClick}
 					size="xs"
-					className="absolute left-0 flex items-center justify-center w-6 h-6 p-0 rounded-full"
+					rounded={'full'}
+					className="absolute left-0 flex items-center justify-center w-6 h-6 p-0"
 				>
 					<Icon name="settings" size={12} className="text-muted" />
 				</Button>
diff --git a/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx b/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx
index 506c002e..bf6f58c3 100644
--- a/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx
+++ b/src/layouts/widgets/calendar/components/google-calendar/google-calendar-view.tsx
@@ -5,11 +5,11 @@ import { useGetGoogleCalendarEvents } from '@/services/hooks/date/get-google-cal
 import { useDate } from '@/context/date.context'
 import { CalendarEvent } from './google-event.item'
 import { useAuth } from '@/context/auth.context'
-import { Button } from '@/components/button/button'
 import { callEvent } from '@/common/utils/call-event'
 import type { WidgetifyDate } from '../../utils'
 import { GoogleEventItemSkeleton } from './google-event.item-skeleton'
 import { Icon } from '@/src/icons'
+import { Button } from '@/components/ui'
 
 export const GoogleCalendarView: React.FC = () => {
 	const { user, isAuthenticated } = useAuth()
diff --git a/src/layouts/widgets/combo-widget/combo-widget.layout.tsx b/src/layouts/widgets/combo-widget/combo-widget.layout.tsx
index 2a6a5b32..dc81354c 100644
--- a/src/layouts/widgets/combo-widget/combo-widget.layout.tsx
+++ b/src/layouts/widgets/combo-widget/combo-widget.layout.tsx
@@ -2,12 +2,11 @@ import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
 import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { NewsLayout } from '../news/news.layout'
 import { WidgetContainer } from '../widget-container'
 import { WigiArzLayout } from '../wigi-arz/wigi_arz.layout'
-import { TabNavigation } from '@/components/ui'
+import { Button, TabNavigation } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 export type ComboTabType = 'news' | 'currency'
@@ -83,7 +82,8 @@ export function ComboWidget() {
 			<Button
 				size="sm"
 				onClick={handleSettingsClick}
-				className={`px-2 py-0! border-none! rounded-lg text-base-content/40 shrink-0 active:scale-95 h-7!`}
+				rounded={'xl'}
+				className={`px-2 py-0! border-none! text-base-content/40 shrink-0 active:scale-95 h-7!`}
 			>
 				<Icon name="menuOption" className="w-4 h-4" />
 			</Button>
diff --git a/src/layouts/widgets/habit/components/habit-detail.modal.tsx b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
index 44b02ef6..373b0cac 100644
--- a/src/layouts/widgets/habit/components/habit-detail.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-detail.modal.tsx
@@ -1,9 +1,8 @@
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { useGetHabitDetail } from '@/services/hooks/habit/get-habit-detail.hook'
 import { HabitCalendar } from './habit-calendar-heatmap'
 import { useAuth } from '@/context/auth.context'
 import { formatHabitGoal } from '../utils'
-import { Button } from '@/components/button/button'
 import { Dropdown } from '@/components/ui'
 import type { Habit } from '@/services/hooks/habit/habit.interface'
 import { callEvent } from '@/common/utils/call-event'
@@ -74,7 +73,8 @@ export function HabitDetailModal({
 							trigger={
 								<Button
 									size="xs"
-									className="text-xs border-none py-1! rounded-xl"
+									className="text-xs border-none py-1!"
+									rounded={'xl'}
 								>
 									<Icon
 										name="menuOption"
diff --git a/src/layouts/widgets/habit/components/habit-form.modal.tsx b/src/layouts/widgets/habit/components/habit-form.modal.tsx
index aa4264fc..00b1c58b 100644
--- a/src/layouts/widgets/habit/components/habit-form.modal.tsx
+++ b/src/layouts/widgets/habit/components/habit-form.modal.tsx
@@ -8,8 +8,7 @@ import {
 	HABIT_UNIT_OPTIONS,
 } from '@/common/constant/habit-options'
 import { showToast } from '@/common/toast'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { SelectBox } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { safeAwait } from '@/services/api'
@@ -369,9 +368,10 @@ export function HabitFormModal({
 				<Button
 					onClick={handleSubmit}
 					size="md"
-					isPrimary
+					variant={'primary'}
+					rounded={'2xl'}
 					loading={isPending}
-					className="w-full text-white border-none rounded-2xl"
+					className="w-full"
 				>
 					{isEdit ? 'ذخیره تغییرات' : 'افزودن عادت'}
 				</Button>
diff --git a/src/layouts/widgets/habit/habits.layout.tsx b/src/layouts/widgets/habit/habits.layout.tsx
index 98760671..ade21319 100644
--- a/src/layouts/widgets/habit/habits.layout.tsx
+++ b/src/layouts/widgets/habit/habits.layout.tsx
@@ -1,8 +1,7 @@
 import { useState } from 'react'
 import Analytics from '@/analytics'
 import { autoFormatErrorToast, showToast } from '@/common/toast'
-import { Button } from '@/components/button/button'
-import { ConfirmationModal } from '@/components/ui'
+import { Button, ConfirmationModal } from '@/components/ui'
 import { Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useDate } from '@/context/date.context'
@@ -106,7 +105,9 @@ export function HabitsContent() {
 						<Tooltip content="بارگذاری مجدد">
 							<Button
 								size="sm"
-								className="px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!"
+								className="px-2 py-0! active:scale-95"
+								variant={'ghost'}
+								rounded={'full'}
 								onClick={onRefresh}
 								disabled={isWaiting}
 							>
@@ -153,7 +154,9 @@ export function HabitsContent() {
 			<Button
 				size="sm"
 				onClick={handleAddHabit}
-				className="px-2 py-0!  w-full border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!"
+				rounded={'2xl'}
+				variant={'primary'}
+				className="px-2 py-0! w-full  shrink-0 active:scale-95 h-7!"
 			>
 				<Icon name="plus" className="w-4 h-4" />
 				افزودن
diff --git a/src/layouts/widgets/network/network.layout.tsx b/src/layouts/widgets/network/network.layout.tsx
index 8a4e303f..a4ec135b 100644
--- a/src/layouts/widgets/network/network.layout.tsx
+++ b/src/layouts/widgets/network/network.layout.tsx
@@ -2,8 +2,7 @@ import type { AxiosError } from 'axios'
 import { useEffect, useState } from 'react'
 import Analytics from '@/analytics'
 import { RequireAuth } from '@/components/auth/require-auth'
-import { AvatarComponent } from '@/components/ui'
-import { Button } from '@/components/button/button'
+import { AvatarComponent, Button } from '@/components/ui'
 import { Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useGeneralSetting } from '@/context/general-setting.context'
@@ -195,8 +194,11 @@ export function NetworkLayout({ enableBackground, inComboWidget }: Prop) {
 						<Button
 							size="md"
 							type="button"
-							className="w-full h-8 border border-content rounded-2xl"
+							className="w-full h-fit py-3.5"
+							rounded={'2xl'}
+							variant={'default'}
 							onClick={handleRefresh}
+							disabled={isLoading}
 						>
 							<Icon
 								name="refresh"
diff --git a/src/layouts/widgets/news/components/news-header.tsx b/src/layouts/widgets/news/components/news-header.tsx
index feacb330..7b01037c 100644
--- a/src/layouts/widgets/news/components/news-header.tsx
+++ b/src/layouts/widgets/news/components/news-header.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface NewsHeaderProps {
diff --git a/src/layouts/widgets/news/rss-feed-setting.tsx b/src/layouts/widgets/news/rss-feed-setting.tsx
index 2d4c9e26..577bf219 100644
--- a/src/layouts/widgets/news/rss-feed-setting.tsx
+++ b/src/layouts/widgets/news/rss-feed-setting.tsx
@@ -2,8 +2,7 @@ import { useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { callEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
-import { CheckBoxWithDescription } from '@/components/ui'
+import { Button, CheckBoxWithDescription } from '@/components/ui'
 import { SectionPanel } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { ToggleSwitch } from '@/components/ui'
@@ -220,8 +219,9 @@ export const RssFeedSetting = () => {
 
 					<Button
 						size="md"
-						className="text-white rounded-xl btn-primary"
+						rounded={'2xl'}
 						onClick={addNewFeed}
+						variant={'primary'}
 					>
 						<Icon name="plus" size={16} />
 						<span>افزودن فید جدید</span>
@@ -348,9 +348,8 @@ const FeedItem = ({ feed, disabled = false, onToggle, onRemove }: FeedItemProps)
 			</div>
 			<Button
 				size="sm"
-				className={
-					'btn btn-circle h-9 w-9 bg-error/10 hover:!bg-error/20 text-error border-none shadow-none rounded-full transition-colors duration-300 ease-in-out'
-				}
+				variant={'danger'}
+				rounded={'full'}
 				onClick={onRemove}
 				disabled={disabled}
 			>
diff --git a/src/layouts/widgets/notes/components/note-editor.tsx b/src/layouts/widgets/notes/components/note-editor.tsx
index 04a29b50..37ebb2ca 100644
--- a/src/layouts/widgets/notes/components/note-editor.tsx
+++ b/src/layouts/widgets/notes/components/note-editor.tsx
@@ -1,6 +1,5 @@
 import { PRIORITY_BG_COLORS, PRIORITY_OPTIONS } from '@/common/constant/priority_options'
-import { Button } from '@/components/button/button'
-import { IconLoading } from '@/components/ui'
+import { Button, IconLoading } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import { Tooltip } from '@/components/ui'
 import { useNotes } from '@/context/notes.context'
@@ -92,8 +91,9 @@ export function NoteEditor({ note }: NoteEditorProps) {
 						loading={isSaving}
 						disabled={isSaving}
 						loadingText={<IconLoading />}
-						isPrimary={true}
-						className="w-24 h-6 rounded-2xl"
+						variant={'primary'}
+						rounded={'xl'}
+						className="w-24 h-6"
 					>
 						<span className="text-xs">ذخیـره</span>
 					</Button>
diff --git a/src/layouts/widgets/notes/components/note-navigation.tsx b/src/layouts/widgets/notes/components/note-navigation.tsx
index 3c5ea228..2f3d7333 100644
--- a/src/layouts/widgets/notes/components/note-navigation.tsx
+++ b/src/layouts/widgets/notes/components/note-navigation.tsx
@@ -1,6 +1,5 @@
 import { useMemo } from 'react'
-import { Button } from '@/components/button/button'
-import { Tooltip } from '@/components/ui'
+import { Button, ConfirmationModal, Tooltip } from '@/components/ui'
 import { useNotes } from '@/context/notes.context'
 import { useAuth } from '@/context/auth.context'
 import Analytics from '@/analytics'
@@ -58,38 +57,20 @@ export function NoteNavigation() {
 			{isSaving && <IconLoading title="درحال ذخیره..." />}
 			{activeNoteId ? (
 				<>
-					<Tooltip
-						alwaysShow={showDeleteConfirm}
-						content={
-							showDeleteConfirm ? (
-								<ToolTipConfirmContent
-									onConfirm={onDelete}
-									onCancel={() => setShowDeleteConfirm(false)}
-								/>
-							) : (
-								'حذف یادداشت'
-							)
-						}
-						position="bottom"
+					<Button
+						size="xs"
+						onClick={() => setShowDeleteConfirm(true)}
+						className="h-7 w-7 p-0 text-muted bg-transparent! hover:bg-error/20! hover:text-error! border-none disabled:opacity-75 transition-all duration-300 shadow-none"
+						rounded={'full'}
 					>
-						<Button
-							size="xs"
-							onClick={() => setShowDeleteConfirm(true)}
-							className="h-7 w-7 p-0 text-muted !bg-transparent hover:!bg-error/20 hover:!text-error border-none rounded-full disabled:opacity-75 transition-all duration-300 shadow-none"
-						>
-							<Icon name="trash" size={14} />
-						</Button>
-					</Tooltip>
+						<Icon name="trash" size={14} />
+					</Button>
 					<Tooltip content="لیست یادداشت ها" position="top">
 						<button
 							className={`h-7 w-7 flex items-center justify-center rounded-full cursor-pointer transition-colors text-muted opacity-70 hover:bg-base-300 hover:opacity-100 ${activeNoteIndex > 0 ? 'opacity-100' : 'opacity-30 cursor-not-allowed'} duration-300`}
 							onClick={() => onBackToList()}
 						>
-							<Icon
-								name="chevronLeft"
-								size={18}
-								className="text-content"
-							/>
+							<Icon name="chevronLeft" size={18} className="text-content" />
 						</button>
 					</Tooltip>
 				</>
@@ -101,8 +82,9 @@ export function NoteNavigation() {
 						disabled={isCreatingNote}
 						loading={isCreatingNote}
 						loadingText={<IconLoading title="درحال ساخت..." />}
-						className={`h-6 w-fit px-2! text-xs font-medium  hover:scale-95 rounded-xl`}
-						isPrimary={true}
+						className={`h-6 w-fit px-2! text-xs font-medium  hover:scale-95`}
+						variant={'primary'}
+						rounded={'xl'}
 					>
 						<Icon name="pen" size={12} />
 						چیزی بنویس
@@ -111,8 +93,9 @@ export function NoteNavigation() {
 						<Tooltip content="بارگزاری مجدد">
 							<Button
 								size="sm"
-								className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
+								className={`px-2 py-0! border-none! text-base-content/40 shrink-0 active:scale-95 h-7!`}
 								onClick={onRefresh}
+								rounded={'xl'}
 							>
 								<Icon
 									name="refresh"
@@ -123,31 +106,13 @@ export function NoteNavigation() {
 					</div>
 				</>
 			)}
-		</div>
-	)
-}
-interface Props {
-	onConfirm: () => void
-	onCancel: () => void
-}
-function ToolTipConfirmContent({ onConfirm, onCancel }: Props) {
-	return (
-		<div className="flex flex-col gap-1 p-3 w-52">
-			<p className="mb-2 text-sm font-medium text-muted">
-				آیا از حذف این یادداشت مطمئن هستید؟
-			</p>
-			<div className="flex justify-between gap-2">
-				<Button onClick={onCancel} size="xs" className="btn rounded-2xl">
-					انصراف
-				</Button>
-				<Button
-					onClick={onConfirm}
-					size="xs"
-					className="text-white btn btn-error rounded-2xl"
-				>
-					حذف یادداشت
-				</Button>
-			</div>
+
+			<ConfirmationModal
+				isOpen={showDeleteConfirm}
+				onClose={() => setShowDeleteConfirm(false)}
+				onConfirm={() => onDelete()}
+				message="از حذف این یادداشت مطمعنی؟"
+			/>
 		</div>
 	)
 }
diff --git a/src/layouts/widgets/todos/components/priority.dropdown.tsx b/src/layouts/widgets/todos/components/priority.dropdown.tsx
index 87b5a389..c5f7332f 100644
--- a/src/layouts/widgets/todos/components/priority.dropdown.tsx
+++ b/src/layouts/widgets/todos/components/priority.dropdown.tsx
@@ -1,5 +1,4 @@
-import { Dropdown } from '@/components/ui'
-import { Button } from '@/components/button/button'
+import { Button, Dropdown } from '@/components/ui'
 import { TodoPriority } from '@/services/hooks/todo/todo.interface'
 import { Icon } from '@/src/icons'
 
@@ -40,7 +39,8 @@ export function PriorityDropdown({ priority, setPriority }: PriorityDropdownProp
 			trigger={
 				<Button
 					size="sm"
-					className={`p-2 border rounded-xl shrink-0 active:scale-95 transition-colors ${
+					rounded={'xl'}
+					className={`p-2 border shrink-0 active:scale-95 transition-colors ${
 						selected
 							? `${selected.bg} ${selected.color} ${selected.border}`
 							: 'text-base-content/40 hover:text-primary/60'
diff --git a/src/layouts/widgets/todos/components/select-friends.todo.tsx b/src/layouts/widgets/todos/components/select-friends.todo.tsx
index f34b87cb..e882460d 100644
--- a/src/layouts/widgets/todos/components/select-friends.todo.tsx
+++ b/src/layouts/widgets/todos/components/select-friends.todo.tsx
@@ -1,6 +1,5 @@
 import { callEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
-import { Dropdown } from '@/components/ui'
+import { Button, Dropdown } from '@/components/ui'
 import { SelectFriendLayout } from '@/layouts/friends/components/select-friend.layout'
 import type { Friend } from '@/services/hooks/friends/friend-service.hook'
 import { Icon } from '@/src/icons'
@@ -16,7 +15,8 @@ export function TodoSelectFriends({ selectedFriends, setSelectedFriends }: Prop)
 				<Button
 					type="button"
 					size="sm"
-					className="p-2 border rounded-xl  text-[10px]  text-muted shrink-0 active:scale-95"
+					rounded={'xl'}
+					className="p-2 border text-[10px]  text-muted shrink-0 active:scale-95"
 				>
 					{selectedFriends.length > 0 ? (
 						<div className="flex gap-0.5 text-base-content/40">
@@ -49,9 +49,10 @@ export function TodoSelectFriends({ selectedFriends, setSelectedFriends }: Prop)
 				</div>
 				<Button
 					size="sm"
-					isPrimary
+					variant={'primary'}
+					rounded={'2xl'}
 					onClick={() => callEvent('closeAllDropdowns')}
-					className="w-full rounded-2xl"
+					className="w-full"
 				>
 					ذخیره و بستن
 				</Button>
diff --git a/src/layouts/widgets/todos/expandable-todo-input.tsx b/src/layouts/widgets/todos/expandable-todo-input.tsx
index 8f7d7cd9..27906c9b 100644
--- a/src/layouts/widgets/todos/expandable-todo-input.tsx
+++ b/src/layouts/widgets/todos/expandable-todo-input.tsx
@@ -1,9 +1,8 @@
 import { Motion as motion, Presence } from '@/common/motion'
 
 import { useEffect, useRef, useState, useCallback } from 'react'
-import { Button } from '@/components/button/button'
 import { TextInput } from '@/components/text-input'
-import { IconLoading } from '@/components/ui'
+import { Button, IconLoading } from '@/components/ui'
 import { ClickableTooltip } from '@/components/ui'
 import jalaliMoment from 'jalali-moment'
 import Analytics from '@/analytics'
@@ -59,7 +58,7 @@ export function ExpandableTodoInput({
 	const notesRef = useRef<HTMLTextAreaElement>(null)
 	const containerRef = useRef<HTMLDivElement>(null)
 	const dateButtonRef = useRef<HTMLButtonElement>(null)
-	const categoryInputRef = useRef<HTMLInputElement | null>(null)
+	const categoryInputRef = useRef<HTMLButtonElement | null>(null)
 	const notesInputRef = useRef<HTMLInputElement | null>(null)
 	const [selectedFriends, setSelectedFriends] = useState<Friend[]>([])
 
@@ -257,7 +256,9 @@ export function ExpandableTodoInput({
 								disabled={isPending}
 								loading={isPending}
 								size="sm"
-								className="rounded-full px-0! w-8 btn-ghost"
+								rounded={'full'}
+								variant={'ghost'}
+								className="px-0! w-8"
 							>
 								<Icon name="close" size={12} className="" />
 							</Button>
@@ -268,8 +269,9 @@ export function ExpandableTodoInput({
 							loading={isPending}
 							loadingText={<IconLoading />}
 							size="sm"
-							isPrimary={true}
-							className="rounded-full px-0! w-8"
+							variant={'primary'}
+							rounded={'full'}
+							className="px-0! w-8"
 						>
 							{isEdit ? (
 								<Icon name="save" size={16} />
@@ -310,7 +312,8 @@ export function ExpandableTodoInput({
 										/>
 										<Button
 											size="sm"
-											className={`p-2 border rounded-xl text-base-content/40 shrink-0 active:scale-95`}
+											rounded={'xl'}
+											className={`p-2 border text-base-content/40 shrink-0 active:scale-95`}
 											onClick={() => setShowDatePicker(true)}
 											ref={dateButtonRef}
 										>
@@ -361,8 +364,9 @@ export function ExpandableTodoInput({
 												/>
 												<Button
 													size="xs"
-													isPrimary={true}
-													className="rounded-full p-0! w-6 h-6"
+													variant={'primary'}
+													rounded={'full'}
+													className="p-0! w-6 h-6"
 													onClick={() =>
 														setIsTagTooltipOpen(false)
 													}
diff --git a/src/layouts/widgets/todos/todos.tsx b/src/layouts/widgets/todos/todos.tsx
index e2b1264b..41da87e4 100644
--- a/src/layouts/widgets/todos/todos.tsx
+++ b/src/layouts/widgets/todos/todos.tsx
@@ -2,13 +2,12 @@ import { useState } from 'react'
 import { ExpandableTodoInput } from './expandable-todo-input'
 import { useAuth } from '@/context/auth.context'
 import Analytics from '@/analytics'
-import { IconLoading } from '@/components/ui'
+import { Button, IconLoading } from '@/components/ui'
 import { FilterTooltip } from '@/components/ui'
 import { useGetTags } from '@/services/hooks/todo/get-tags.hook'
 import type { Todo } from '@/services/hooks/todo/todo.interface'
 import { getFromStorage, setToStorage } from '@/common/storage'
 import { useGeneralSetting } from '@/context/general-setting.context'
-import { Button } from '@/components/button/button'
 import { Tooltip } from '@/components/ui'
 import { useGetTodos } from '@/services/hooks/todo/get-todos.hook'
 import { TodoItem } from './todo.item'
@@ -245,12 +244,12 @@ export function TodosLayout() {
 						<Tooltip content="بارگزاری مجدد">
 							<Button
 								size="sm"
-								className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
+								className={`px-2 py-0! border-none! group rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
 								onClick={onRefresh}
 							>
 								<Icon
 									name="refresh"
-									className={`text-content opacity-50 hover:opacity-100 ${isLoading ? 'animate-spin' : ''}`}
+									className={`text-content opacity-50 group-hover:opacity-100 ${isLoading ? 'animate-spin' : ''}`}
 								/>
 							</Button>
 						</Tooltip>
diff --git a/src/layouts/widgets/tools/pomodoro/components/control-button.tsx b/src/layouts/widgets/tools/pomodoro/components/control-button.tsx
index 279c196a..c58e4a17 100644
--- a/src/layouts/widgets/tools/pomodoro/components/control-button.tsx
+++ b/src/layouts/widgets/tools/pomodoro/components/control-button.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 import type React from 'react'
 
 interface ControlButtonProps {
diff --git a/src/layouts/widgets/tools/pomodoro/components/mode-button.tsx b/src/layouts/widgets/tools/pomodoro/components/mode-button.tsx
index 3a7e1598..9508995a 100644
--- a/src/layouts/widgets/tools/pomodoro/components/mode-button.tsx
+++ b/src/layouts/widgets/tools/pomodoro/components/mode-button.tsx
@@ -1,5 +1,5 @@
+import { Button } from '@/components/ui'
 import type React from 'react'
-import { Button } from '@/components/button/button'
 
 interface ModeButtonProps {
 	label: string
diff --git a/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx b/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx
index 8ec4eb4f..26acd330 100644
--- a/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx
+++ b/src/layouts/widgets/tools/pomodoro/components/request-notification-modal.tsx
@@ -1,6 +1,5 @@
 import Analytics from '@/analytics'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { showToast } from '@/common/toast'
 
 interface Prop {
@@ -67,7 +66,6 @@ export function RequestNotificationModal({
 						</div>
 					</div>
 
-					{/* Content */}
 					<div className="mt-2">
 						<p className="leading-relaxed text-justify text-muted">
 							برای اینکه به شما یادآوری کنیم، نیاز داریم اعلان‌ها را فعال
@@ -77,24 +75,26 @@ export function RequestNotificationModal({
 					</div>
 				</article>
 
-				{/* Actions */}
 				<div className="flex gap-3 mt-2">
 					<Button
-						onClick={() => {
-							setShowRequireNotificationModal(false)
-						}}
-						className="flex-1 px-4 py-2 text-sm font-medium transition-colors border rounded-2xl border-content text-content"
+						variant={'primary'}
+						rounded={'2xl'}
 						size="md"
+						onClick={onRequestPermission}
+						className="flex-2 px-4 py-2 text-sm font-medium"
 					>
-						فعلا نه
+						فعال کردن اعلان‌ها
 					</Button>
 					<Button
-						isPrimary={true}
+						onClick={() => {
+							setShowRequireNotificationModal(false)
+						}}
+						className="flex-1 px-4 py-2 text-sm"
 						size="md"
-						onClick={onRequestPermission}
-						className="flex-1 px-4 py-2 text-sm font-medium text-white transition-colors rounded-2xl"
+						rounded={'2xl'}
+						variant={'default'}
 					>
-						فعال کردن اعلان‌ها
+						فعلا نه
 					</Button>
 				</div>
 			</div>
diff --git a/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx b/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx
index 734defe0..460eacd2 100644
--- a/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx
+++ b/src/layouts/widgets/tools/pomodoro/components/settings-panel.tsx
@@ -1,6 +1,5 @@
 import type React from 'react'
-import { Button } from '@/components/button/button'
-import { Checkbox } from '@/components/ui'
+import { Button, Checkbox } from '@/components/ui'
 import { Modal } from '@/components/ui'
 import { TextInput } from '@/components/text-input'
 import type { PomodoroSettings } from '../types'
@@ -133,8 +132,9 @@ export const PomodoroSettingsPanel: React.FC<PomodoroSettingsPanelProps> = ({
 					<Button
 						size="md"
 						onClick={handleSaveAndClose}
-						isPrimary={true}
-						className="w-full rounded-xl"
+						variant={'primary'}
+						rounded={'2xl'}
+						className="w-full"
 					>
 						ذخیره و بستن
 					</Button>
diff --git a/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx b/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
index 3e1edd53..c237dea6 100644
--- a/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
+++ b/src/layouts/widgets/tools/pomodoro/pomodoro-timer.tsx
@@ -2,7 +2,7 @@ import type React from 'react'
 import { useEffect, useMemo, useState } from 'react'
 import Analytics from '@/analytics'
 import { getFromStorage, removeFromStorage, setToStorage } from '@/common/storage'
-import { SelectBox } from '@/components/ui'
+import { Button, SelectBox } from '@/components/ui'
 import { Tooltip } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { useCreatePomodoroSession } from '@/services/hooks/pomodoro/create-session.hook'
@@ -14,7 +14,6 @@ import { TimerDisplay } from './components/timer-display'
 import { TopUsersTab } from './top-users/top-users'
 import type { PomodoroSettings, TimerMode } from './types'
 import { TabNavigation } from '@/components/ui'
-import { Button } from '@/components/button/button'
 import { Icon } from '@/src/icons'
 
 interface PomodoroTimerProps {
diff --git a/src/layouts/widgets/wigi-arz/components/arz-header.tsx b/src/layouts/widgets/wigi-arz/components/arz-header.tsx
index 7c07002f..8824e2ed 100644
--- a/src/layouts/widgets/wigi-arz/components/arz-header.tsx
+++ b/src/layouts/widgets/wigi-arz/components/arz-header.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@/components/button/button'
+import { Button } from '@/components/ui'
 import { Icon } from '@/src/icons'
 
 interface ArzHeaderProps {
@@ -17,7 +17,8 @@ export const ArzHeader = ({ title, onSettingsClick }: ArzHeaderProps) => {
 				<Button
 					onClick={onSettingsClick}
 					size="xs"
-					className="h-6 w-6 p-0 flex items-center justify-center rounded-full !border-none !shadow-none"
+					variant={'ghost'}
+					className="h-6 w-6 p-0 flex items-center justify-center"
 				>
 					<Icon
 						name="menuOption"
diff --git a/src/layouts/widgets/wigi-arz/wigi_arz.layout.tsx b/src/layouts/widgets/wigi-arz/wigi_arz.layout.tsx
index d190ffe3..1923bc83 100644
--- a/src/layouts/widgets/wigi-arz/wigi_arz.layout.tsx
+++ b/src/layouts/widgets/wigi-arz/wigi_arz.layout.tsx
@@ -13,12 +13,12 @@ import {
 } from '@dnd-kit/sortable'
 import Analytics from '@/analytics'
 import { callEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
 import { useCurrencyStore } from '@/context/currency.context'
 import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { WidgetContainer } from '../widget-container'
 import { ArzHeader } from './components/arz-header'
 import { SortableCurrencyBox } from './components/sortable-currency-box'
+import { Button } from '@/components/ui'
 
 interface WigiArzLayoutProps {
 	enableBackground?: boolean
@@ -88,9 +88,9 @@ export function WigiArzLayout({
 								ارزهای مورد نظر خود را اضافه کنید
 							</p>
 							<Button
-								rounded="full"
+								rounded="xl"
 								size="sm"
-								className="mt-1 border border-base-300/70 px-5 bg-base-300/70 hover:!bg-primary hover:text-white hover:border-primary"
+								variant={'primary'}
 								onClick={onSettingClick}
 							>
 								افزودن ارز
@@ -149,13 +149,13 @@ export function WigiArzLayout({
 								💲
 							</div>
 							<p className="text-center text-content">
-								ارزهای مورد نظر خود را اضافه کنید.
+								ارزهای مورد نظر خود را اضافه کنید
 							</p>
 							<Button
-								rounded="full"
-								onClick={() => onSettingClick()}
+								rounded="xl"
 								size="sm"
-								className="border border-base-300/70 px-5 bg-base-300/70 hover:!bg-primary hover:text-white hover:border-primary"
+								variant={'primary'}
+								onClick={onSettingClick}
 							>
 								افزودن ارز
 							</Button>
diff --git a/src/layouts/widgets/wigi-pad/clock-display/clock-display.tsx b/src/layouts/widgets/wigi-pad/clock-display/clock-display.tsx
index 73f33047..1e3fe0ea 100644
--- a/src/layouts/widgets/wigi-pad/clock-display/clock-display.tsx
+++ b/src/layouts/widgets/wigi-pad/clock-display/clock-display.tsx
@@ -1,13 +1,10 @@
 import { useEffect, useState } from 'react'
 import { getFromStorage } from '@/common/storage'
-import { callEvent, listenEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
+import { listenEvent } from '@/common/utils/call-event'
 import { useGeneralSetting } from '@/context/general-setting.context'
-import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
 import { type ClockSettings, ClockType } from './clock-setting.interface'
 import { AnalogClock } from './clocks/analog.clock'
 import { DigitalClock } from './clocks/digital.clock'
-import { Icon } from '@/src/icons'
 
 export function ClockDisplay() {
 	const [clockSettings, setClockSettings] = useState<ClockSettings | null>(null)
@@ -48,22 +45,8 @@ export function ClockDisplay() {
 		return null
 	}
 
-	function onClickSettings() {
-		callEvent('openWidgetsSettings', { tab: WidgetTabKeys.wigiPad })
-	}
-
 	return (
 		<div className="relative flex flex-col items-center justify-center p-1 overflow-hidden">
-			<div className="absolute inset-0 z-20 group ">
-				<Button
-					size="xs"
-					className="m-1.5 h-5 w-5 p-0 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 !border-none !shadow-none transition-all duration-300 delay-200"
-					onClick={onClickSettings}
-				>
-					<Icon name="settings" size={12} className="text-content" />
-				</Button>
-			</div>
-
 			<div className="flex flex-col items-center justify-center flex-grow">
 				{clockSettings.clockType === 'analog' ? (
 					<AnalogClock timezone={timezone} setting={clockSettings} />
diff --git a/src/layouts/widgets/wigi-pad/date-display/date.display.tsx b/src/layouts/widgets/wigi-pad/date-display/date.display.tsx
index e644c0f9..92cfe6e0 100644
--- a/src/layouts/widgets/wigi-pad/date-display/date.display.tsx
+++ b/src/layouts/widgets/wigi-pad/date-display/date.display.tsx
@@ -1,11 +1,8 @@
 import { getFromStorage } from '@/common/storage'
-import { callEvent, listenEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
-import { WidgetTabKeys } from '@/layouts/widgets-settings/constant/tab-keys'
+import { listenEvent } from '@/common/utils/call-event'
 import { type WigiPadDateSetting, WigiPadDateType } from './date-setting.interface'
 import { GregorianDate } from './dates/gregorian.date'
 import { JalaliDate } from './dates/jalali.date'
-import { Icon } from '@/src/icons'
 
 export function DateDisplay() {
 	const [wigiPadDateSettings, setWigiPadDateSettings] =
@@ -37,26 +34,12 @@ export function DateDisplay() {
 		return null
 	}
 
-	const onClickSettings = () => {
-		callEvent('openWidgetsSettings', { tab: WidgetTabKeys.wigiPad })
-	}
-
 	return (
 		<div
 			className={
 				'relative flex flex-col items-center justify-center gap-0.5 p-1 overflow-hidden text-center transition-all duration-500 rounded-xl group '
 			}
 		>
-			<div className="absolute inset-0 z-20 group">
-				<Button
-					onClick={onClickSettings}
-					size="xs"
-					className="m-1.5 h-5 w-5 p-0 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 !border-none !shadow-none transition-all duration-300 delay-200"
-				>
-					<Icon name="settings" size={12} className="text-content" />
-				</Button>
-			</div>
-
 			{wigiPadDateSettings.dateType === WigiPadDateType.Jalali ? (
 				<JalaliDate />
 			) : (
diff --git a/src/pages/home/dialog/dialog.tsx b/src/pages/home/dialog/dialog.tsx
index 73b3303f..734f138f 100644
--- a/src/pages/home/dialog/dialog.tsx
+++ b/src/pages/home/dialog/dialog.tsx
@@ -1,8 +1,7 @@
 import Analytics from '@/analytics'
 import { getContrastingTextColor } from '@/common/color'
 import { callEvent } from '@/common/utils/call-event'
-import { Button } from '@/components/button/button'
-import { Modal } from '@/components/ui'
+import { Button, Modal } from '@/components/ui'
 import { useAuth } from '@/context/auth.context'
 import { safeAwait } from '@/services/api'
 import {

From 8a7f8642959086ea630b1a30a2d6affc8554400f Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Tue, 18 Aug 2026 20:16:42 +0330
Subject: [PATCH 09/10] fix

---
 src/common/utils/translate-error.ts           |   1 +
 src/components/update-release-notes-modal.tsx |   3 +-
 .../tabs/account/auth-form/auth-password.tsx  |   5 +-
 .../components/modals/edit-birthday.tsx       |   9 +-
 .../components/profile-date-picker.tsx        | 166 ++++++++--------
 .../widgets/todos/expandable-todo-input.tsx   | 186 ++++++++----------
 6 files changed, 177 insertions(+), 193 deletions(-)

diff --git a/src/common/utils/translate-error.ts b/src/common/utils/translate-error.ts
index bf3e176c..f1ed6776 100644
--- a/src/common/utils/translate-error.ts
+++ b/src/common/utils/translate-error.ts
@@ -114,6 +114,7 @@ const errorTranslations: Record<string, string> = {
 	FOLDER_STRUCTURE_TOO_DEEP: 'FOLDER_STRUCTURE_TOO_DEEP',
 	BULK_IMPORT_LIMIT_EXCEEDED: `تعداد آیتم درون‌ریزی بیش‌از حد هست`,
 	NO_VALID_ITEMS_TO_IMPORT: 'هیچ آیتم معتبری برای درون‌ریزی وجود نداره',
+	BIRTHDATE_CANNOT_BE_CHANGED: 'به تازگی تاریخ تولدت رو عوض کردی!',
 }
 
 const validationTranslations: Record<string, string> = {
diff --git a/src/components/update-release-notes-modal.tsx b/src/components/update-release-notes-modal.tsx
index 240026ee..7ed9eab3 100644
--- a/src/components/update-release-notes-modal.tsx
+++ b/src/components/update-release-notes-modal.tsx
@@ -108,8 +108,9 @@ export const UpdateReleaseNotesModal = ({
 						size="sm"
 						onClick={onClose}
 						disabled={counter > 0}
-						className="min-w-32.5 h-11 rounded-2xl! self-end font-black text-xs shadow-lg shadow-primary/10 disabled:shadow-none active:scale-90 transition-all disabled:text-base-content/30"
+						className="h-11 min-w-32.5 font-black"
 						variant={'primary'}
+						rounded={'2xl'}
 					>
 						{counter > 0 ? `یه چند لحظه صبر کن (${counter})` : 'فهمیدم'}
 					</Button>
diff --git a/src/layouts/setting/tabs/account/auth-form/auth-password.tsx b/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
index 31881efc..82620586 100644
--- a/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
+++ b/src/layouts/setting/tabs/account/auth-form/auth-password.tsx
@@ -168,9 +168,10 @@ export default function AuthPassword() {
 					type="submit"
 					disabled={isPending || !email || !password}
 					loading={isPending}
-					isPrimary={true}
+					variant={'primary'}
 					size="md"
-					className="relative w-full py-2.5 md:py-3 text-sm md:text-base transition-all duration-200 shadow text-white group rounded-xl disabled:cursor-not-allowed disabled:text-base-content disabled:opacity-50"
+					rounded={'2xl'}
+					className="text-sm md:text-base"
 				>
 					{isPending ? 'درحال پردازش...' : 'ورود به حساب'}
 				</Button>
diff --git a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
index 7542d938..51fc6185 100644
--- a/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
+++ b/src/layouts/setting/tabs/account/components/modals/edit-birthday.tsx
@@ -5,6 +5,7 @@ import JalaliDatePicker from '../profile-date-picker'
 import moment from 'jalali-moment'
 import { SectionPanel } from '@/components/ui'
 import { FooterButtons } from './footer-buttons'
+import { autoFormatErrorToast } from '@/common/toast'
 
 interface Prop {
 	show: boolean
@@ -28,8 +29,12 @@ export function ChangeBirthdayModal({ show, onClose, currentValue }: Prop) {
 			.format('YYYY-MM-DD')
 		data.append('birthdate', gregorianDate)
 
-		await updateProfileMutation.mutateAsync(data)
-		onClose('success')
+		try {
+			await updateProfileMutation.mutateAsync(data)
+			onClose('success')
+		} catch (er) {
+			autoFormatErrorToast(er)
+		}
 	}
 
 	const onCancel = () => {
diff --git a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
index 633f7ceb..ced5d3db 100644
--- a/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
+++ b/src/layouts/setting/tabs/account/components/profile-date-picker.tsx
@@ -1,4 +1,5 @@
-import { Button, ClickableTooltip } from '@/components/ui'
+import { callEvent } from '@/common/utils/call-event'
+import { Button, ClickableTooltip, Dropdown } from '@/components/ui'
 import { Icon } from '@/src/icons'
 import { useRef, useState, useEffect } from 'react'
 
@@ -33,7 +34,6 @@ export default function JalaliDatePicker({
 	enable,
 }: JalaliDatePickerProps) {
 	const currentYear = 1403
-	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<any>(null)
 
 	const [tempDate, setTempDate] = useState({ year: 1380, month: 1, day: 1 })
@@ -50,11 +50,11 @@ export default function JalaliDatePicker({
 	}
 
 	useEffect(() => {
-		if (isOpen) {
+		if (value) {
 			const parsed = parseValue(value)
 			setTempDate(parsed)
 		}
-	}, [isOpen, value])
+	}, [value])
 
 	const getDaysInMonth = (m: number, y: number) => {
 		if (m === 12) {
@@ -83,101 +83,89 @@ export default function JalaliDatePicker({
 	const handleConfirm = () => {
 		const formattedDate = `${tempDate.year}-${tempDate.month.toString().padStart(2, '0')}-${tempDate.day.toString().padStart(2, '0')}`
 		onChange(formattedDate)
-		setIsOpen(false)
+		callEvent('closeAllDropdowns')
 	}
 
 	const handleCancel = () => {
-		setIsOpen(false)
-	}
-
-	const onClickToOpen = () => {
-		if (!enable) {
-			return
-		}
-
-		setIsOpen(true)
+		callEvent('closeAllDropdowns')
 	}
 
 	return (
-		<>
-			<button
-				ref={enable ? triggerRef : null}
-				type="button"
-				onClick={() => onClickToOpen()}
-				className="flex items-center justify-between w-full p-3 text-right transition-colors hover:bg-content"
-			>
-				<div
-					className={`flex items-center justify-between w-full h-12 p-3 transition-colors border  border-content rounded-xl  ${!enable ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary/50! cursor-pointer'}`}
+		<Dropdown
+			trigger={
+				<button
+					ref={enable ? triggerRef : null}
+					type="button"
+					className="flex items-center justify-between w-full p-3 text-right transition-colors hover:bg-content"
 				>
-					<div className="flex items-center gap-3">
-						<Icon name="calendarDays" size={14} className="text-primary" />
-						<span className={value ? 'text-content' : 'text-muted'}>
-							{value || 'انتخاب تاریخ'}
-						</span>
-					</div>
-					<Icon name="chevronRight" size={18} className="text-muted" />
-				</div>
-			</button>
-
-			<ClickableTooltip
-				triggerRef={triggerRef}
-				isOpen={isOpen}
-				setIsOpen={setIsOpen}
-				content={
-					<div className="p-2 border min-w-52 bg-base-200 rounded-2xl border-base-300">
-						<div className="flex gap-3 mb-5">
-							<ScrollWheel
-								label="روز"
-								value={tempDate.day}
-								max={getDaysInMonth(tempDate.month, tempDate.year)}
-								onChange={handleDayChange}
-								type="number"
-							/>
-							<ScrollWheel
-								label="ماه"
-								value={tempDate.month}
-								max={12}
-								onChange={handleMonthChange}
-								type="month"
+					<div
+						className={`flex items-center justify-between w-full h-12 p-3 transition-colors border  border-content rounded-xl  ${!enable ? 'opacity-50 cursor-not-allowed' : 'hover:border-primary/50! cursor-pointer'}`}
+					>
+						<div className="flex items-center gap-3">
+							<Icon
+								name="calendarDays"
+								size={14}
+								className="text-primary"
 							/>
-							<ScrollWheel
-								label="سال"
-								value={tempDate.year}
-								max={80}
-								onChange={handleYearChange}
-								type="year"
-								startYear={currentYear - 10}
-							/>
-						</div>
-
-						<div className="flex gap-2">
-							<Button
-								onClick={handleConfirm}
-								size="sm"
-								rounded={'2xl'}
-								variant={'primary'}
-								className="flex-1"
-							>
-								<Icon name="check" size={16} className="ml-1" />
-								تایید{' '}
-							</Button>
-							<Button
-								onClick={handleCancel}
-								size="sm"
-								rounded={'2xl'}
-								variant={'default'}
-								className="w-20"
-							>
-								لغو
-							</Button>
+							<span className={value ? 'text-content' : 'text-muted'}>
+								{value || 'انتخاب تاریخ'}
+							</span>
 						</div>
+						<Icon name="chevronRight" size={18} className="text-muted" />
 					</div>
-				}
-				position="bottom"
-				offset={8}
-				closeOnClickOutside={true}
-			/>
-		</>
+				</button>
+			}
+			className="w-full"
+		>
+			<div className="p-2 border min-w-52 bg-base-200 rounded-2xl border-base-300">
+				<div className="flex gap-3 mb-5">
+					<ScrollWheel
+						label="روز"
+						value={tempDate.day}
+						max={getDaysInMonth(tempDate.month, tempDate.year)}
+						onChange={handleDayChange}
+						type="number"
+					/>
+					<ScrollWheel
+						label="ماه"
+						value={tempDate.month}
+						max={12}
+						onChange={handleMonthChange}
+						type="month"
+					/>
+					<ScrollWheel
+						label="سال"
+						value={tempDate.year}
+						max={80}
+						onChange={handleYearChange}
+						type="year"
+						startYear={currentYear - 10}
+					/>
+				</div>
+
+				<div className="flex gap-2">
+					<Button
+						onClick={handleConfirm}
+						size="sm"
+						rounded={'2xl'}
+						variant={'primary'}
+						className="flex-1"
+					>
+						<Icon name="check" size={16} className="ml-1" />
+						تایید{' '}
+					</Button>
+					<Button
+						onClick={handleCancel}
+						size="sm"
+						rounded={'2xl'}
+						variant={'default'}
+						className="w-20"
+					>
+						لغو
+					</Button>
+				</div>
+			</div>
+		</Dropdown>
 	)
 }
 
diff --git a/src/layouts/widgets/todos/expandable-todo-input.tsx b/src/layouts/widgets/todos/expandable-todo-input.tsx
index 27906c9b..70953a5f 100644
--- a/src/layouts/widgets/todos/expandable-todo-input.tsx
+++ b/src/layouts/widgets/todos/expandable-todo-input.tsx
@@ -2,8 +2,7 @@ import { Motion as motion, Presence } from '@/common/motion'
 
 import { useEffect, useRef, useState, useCallback } from 'react'
 import { TextInput } from '@/components/text-input'
-import { Button, IconLoading } from '@/components/ui'
-import { ClickableTooltip } from '@/components/ui'
+import { Button, Dropdown, IconLoading } from '@/components/ui'
 import jalaliMoment from 'jalali-moment'
 import Analytics from '@/analytics'
 import { Chip } from '@/components/ui'
@@ -50,15 +49,11 @@ export function ExpandableTodoInput({
 	const [priority, setPriority] = useState<TodoPriority | undefined>(undefined)
 	const [category, setCategory] = useState('')
 	const { data: fetchedTags } = useGetTags(isAuthenticated && isExpanded)
-	const [isTagTooltipOpen, setIsTagTooltipOpen] = useState(false)
 	const [selectedDate, setSelectedDate] = useState<jalaliMoment.Moment>(today)
-	const [showDatePicker, setShowDatePicker] = useState(false)
 
 	const inputRef = useRef<HTMLInputElement | null>(null)
 	const notesRef = useRef<HTMLTextAreaElement>(null)
 	const containerRef = useRef<HTMLDivElement>(null)
-	const dateButtonRef = useRef<HTMLButtonElement>(null)
-	const categoryInputRef = useRef<HTMLButtonElement | null>(null)
 	const notesInputRef = useRef<HTMLInputElement | null>(null)
 	const [selectedFriends, setSelectedFriends] = useState<Friend[]>([])
 
@@ -116,7 +111,7 @@ export function ExpandableTodoInput({
 
 	const onSelectCategory = (v: string) => {
 		setCategory(v)
-		setIsTagTooltipOpen(false)
+		callEvent('closeAllDropdowns')
 		Analytics.event('todo_category_select')
 	}
 
@@ -163,7 +158,6 @@ export function ExpandableTodoInput({
 		if (notesInputRef.current) {
 			notesInputRef.current.value = ''
 		}
-		setIsTagTooltipOpen(false)
 		setCategory('')
 		setPriority(undefined)
 		setSelectedDate(today.clone())
@@ -310,33 +304,93 @@ export function ExpandableTodoInput({
 											priority={priority}
 											setPriority={setPriority}
 										/>
-										<Button
-											size="sm"
-											rounded={'xl'}
-											className={`p-2 border text-base-content/40 shrink-0 active:scale-95`}
-											onClick={() => setShowDatePicker(true)}
-											ref={dateButtonRef}
+
+										<Dropdown
+											trigger={
+												<Button
+													size="sm"
+													rounded={'xl'}
+													className={`p-2 border text-base-content/40 shrink-0 active:scale-95`}
+												>
+													<Icon name="calendarDays" size={16} />
+													<p className="truncate max-w-14 min-w-5">
+														{selectedDate
+															? formatJalaliDateForDisplay(
+																	selectedDate
+																)
+															: 'تاریخ انجامش'}
+													</p>
+												</Button>
+											}
 										>
-											<Icon name="calendarDays" size={16} />
-											<p className="truncate max-w-14 min-w-5">
-												{selectedDate
-													? formatJalaliDateForDisplay(
-															selectedDate
-														)
-													: 'تاریخ انجامش'}
-											</p>
-										</Button>
-										<Button
-											size="sm"
-											className={`p-2 border rounded-xl  text-[10px]  text-base-content/40 shrink-0 active:scale-95`}
-											ref={categoryInputRef}
-											onClick={() => setIsTagTooltipOpen(true)}
+											<DatePicker
+												selectedDate={selectedDate}
+												onDateSelect={(date) => {
+													setSelectedDate(date)
+													callEvent('closeAllDropdowns')
+												}}
+											/>
+										</Dropdown>
+
+										<Dropdown
+											trigger={
+												<Button
+													size="sm"
+													className={`p-2 border rounded-xl  text-[10px]  text-base-content/40 shrink-0 active:scale-95`}
+												>
+													<Icon name="tags" size={16} />
+													<p className="truncate max-w-14 min-w-5">
+														{category || 'دسته‌بندی'}
+													</p>
+												</Button>
+											}
 										>
-											<Icon name="tags" size={16} />
-											<p className="truncate max-w-14 min-w-5">
-												{category || 'دسته‌بندی'}
-											</p>
-										</Button>
+											<div className="flex flex-col gap-2 p-2 border w-62 bg-base-200 rounded-2xl border-base-300">
+												<div className="relative flex flex-row items-center gap-1 px-2 border rounded-2xl border-content bg-base-200">
+													<TextInput
+														value={category}
+														onChange={(val) =>
+															setCategory(val)
+														}
+														placeholder="مثلا: کارهای خونه"
+														className="duration-75 border-0 bg-transparent!"
+													/>
+													<Button
+														size="xs"
+														variant={'primary'}
+														rounded={'full'}
+														className="p-0! w-6 h-6"
+														onClick={() =>
+															callEvent('closeAllDropdowns')
+														}
+													>
+														<Icon name="plus" size={18} />
+													</Button>
+												</div>
+												<div className="w-full h-0.5  rounded-full bg-base-300" />
+												<div className="flex flex-wrap w-full gap-1 overflow-x-hidden overflow-y-auto max-h-32 scrollbar-none">
+													{fetchedTags
+														?.filter((tag) => tag.trim())
+														?.map((tag) => (
+															<Chip
+																key={tag}
+																selected={false}
+																onClick={() =>
+																	onSelectCategory(tag)
+																}
+																className="flex gap-1 text-xs px-2! py-1!"
+															>
+																<Icon
+																	name="tags"
+																	size={16}
+																	className="text-base-content/40"
+																/>
+																{tag}
+															</Chip>
+														))}
+												</div>
+											</div>
+										</Dropdown>
 
 										{!isEdit && isAuthenticated && (
 											<TodoSelectFriends
@@ -348,72 +402,6 @@ export function ExpandableTodoInput({
 										)}
 									</div>
 								</div>
-								<ClickableTooltip
-									isOpen={isTagTooltipOpen}
-									triggerRef={categoryInputRef}
-									position="top"
-									setIsOpen={setIsTagTooltipOpen}
-									content={
-										<div className="flex flex-col gap-2 p-2 border w-62 bg-base-200 rounded-2xl border-base-300">
-											<div className="relative flex flex-row items-center gap-1 px-2 border rounded-2xl border-content bg-base-200">
-												<TextInput
-													value={category}
-													onChange={(val) => setCategory(val)}
-													placeholder="مثلا: کارهای خونه"
-													className="duration-75 border-0 bg-transparent!"
-												/>
-												<Button
-													size="xs"
-													variant={'primary'}
-													rounded={'full'}
-													className="p-0! w-6 h-6"
-													onClick={() =>
-														setIsTagTooltipOpen(false)
-													}
-												>
-													<Icon name="plus" size={18} />
-												</Button>
-											</div>
-											<div className="w-full h-0.5  rounded-full bg-base-300" />
-											<div className="flex flex-wrap w-full gap-1 overflow-x-hidden overflow-y-auto max-h-32 scrollbar-none">
-												{fetchedTags
-													?.filter((tag) => tag.trim())
-													?.map((tag) => (
-														<Chip
-															key={tag}
-															selected={false}
-															onClick={() =>
-																onSelectCategory(tag)
-															}
-															className="flex gap-1 text-xs px-2! py-1!"
-														>
-															<Icon
-																name="tags"
-																size={16}
-																className="text-base-content/40"
-															/>
-															{tag}
-														</Chip>
-													))}
-											</div>
-										</div>
-									}
-								/>
-								<ClickableTooltip
-									triggerRef={dateButtonRef}
-									isOpen={showDatePicker}
-									setIsOpen={setShowDatePicker}
-									position="top"
-									content={
-										<DatePicker
-											selectedDate={selectedDate}
-											onDateSelect={(date) => {
-												setSelectedDate(date)
-												setShowDatePicker(false)
-											}}
-										/>
-									}
-								/>
 							</div>
 						</motion.div>
 					)}

From 43f128e57f9cef4da846991f8e45663033cfe51a Mon Sep 17 00:00:00 2001
From: sajjad isvand <sajjadzibaee102@gmail.com>
Date: Tue, 18 Aug 2026 21:47:24 +0330
Subject: [PATCH 10/10] fix

---
 src/components/ui/modal/confirmation-modal.tsx         | 1 -
 src/components/ui/modal/confirmation-modal.variants.ts | 6 +++---
 src/layouts/widgets/habit/habits.layout.tsx            | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/modal/confirmation-modal.tsx b/src/components/ui/modal/confirmation-modal.tsx
index e02bbbe8..e604343c 100644
--- a/src/components/ui/modal/confirmation-modal.tsx
+++ b/src/components/ui/modal/confirmation-modal.tsx
@@ -23,7 +23,6 @@ interface ConfirmationModalProps {
 	direction?: 'rtl' | 'ltr'
 }
 
-/** Only the icon element lives here now — all classes come from cva. */
 const variantIcon = {
 	danger: <Icon name="trash" size={18} />,
 	warning: <Icon name="alert" size={18} />,
diff --git a/src/components/ui/modal/confirmation-modal.variants.ts b/src/components/ui/modal/confirmation-modal.variants.ts
index bd96588b..d473dc7f 100644
--- a/src/components/ui/modal/confirmation-modal.variants.ts
+++ b/src/components/ui/modal/confirmation-modal.variants.ts
@@ -31,9 +31,9 @@ export const confirmationConfirmButtonVariants = cva([], {
 	variants: {
 		variant: {
 			danger: ['bg-error', 'hover:bg-error/90!', 'text-error-content'],
-			warning: ['bg-warning', 'hover:bg-warning/90', 'text-warning-content'],
-			info: ['bg-info/80', 'hover:bg-info/90', 'text-info-content'],
-			primary: ['bg-primary/80', 'hover:bg-primary/90', 'text-primary-content'],
+			warning: ['bg-warning', 'hover:bg-warning/90!', 'text-warning-content'],
+			info: ['bg-info/80', 'hover:bg-info/90!', 'text-info-content'],
+			primary: ['bg-primary/80', 'hover:bg-primary/90!', 'text-white'],
 		},
 	},
 	defaultVariants: { variant: 'danger' },
diff --git a/src/layouts/widgets/habit/habits.layout.tsx b/src/layouts/widgets/habit/habits.layout.tsx
index ade21319..9df848f2 100644
--- a/src/layouts/widgets/habit/habits.layout.tsx
+++ b/src/layouts/widgets/habit/habits.layout.tsx
@@ -155,7 +155,7 @@ export function HabitsContent() {
 				size="sm"
 				onClick={handleAddHabit}
 				rounded={'2xl'}
-				variant={'primary'}
+				variant={'default'}
 				className="px-2 py-0! w-full  shrink-0 active:scale-95 h-7!"
 			>
 				<Icon name="plus" className="w-4 h-4" />