From 718519f164061a059372d1f35c88a453ba1f0819 Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Fri, 24 Jan 2025 19:41:18 +0300
Subject: [PATCH] feat(unocss): add overrides and update components

---
 .../__snapshots__/HeaderWelcome.spec.ts.snap  |  4 +--
 .../__snapshots__/WorkSpace.spec.ts.snap      |  4 +--
 .../core/components/headers/HeaderMain.vue    |  8 +++---
 .../core/components/headers/HeaderWelcome.vue |  3 +-
 .../src/core/components/headers/UserMenu.vue  | 14 +++-------
 .../headers/system/LanguageSelect.vue         |  2 +-
 .../headers/system/ThemeSwitcher.vue          |  4 +--
 .../src/core/components/sidebar/InfoMenu.vue  | 10 +++----
 .../components/sidebar/IntegrationItems.vue   |  6 ++--
 .../src/core/components/sidebar/WorkSpace.vue |  6 ++--
 .../core/components/sidebar/plan/PlanCard.vue |  8 ++++--
 .../components/sidebar/plan/SubscribePlan.vue |  2 +-
 .../auth/components/forms/WorkspaceForm.vue   |  4 +--
 .../boards/components/BoardsDataTable.vue     |  3 +-
 .../boards/components/NewBoardDialog.vue      |  2 +-
 .../components/features/handlers/AddBoard.vue |  5 ++--
 .../features/handlers/RemoveBoard.vue         |  7 ++---
 .../filters/BoardsAdvancedFilter.vue          |  2 +-
 .../boards/components/filters/BoardsSort.vue  |  2 +-
 .../components/filters/SearchBoards.vue       |  2 +-
 .../components/forms/CreateBoardForm.vue      | 10 ++++---
 .../common/components/EmptyContainer.vue      |  6 ++--
 .../components/controls/TableControls.vue     |  6 ++--
 .../components/dialogs/HotkeysDialog.vue      |  2 +-
 .../common/components/dialogs/ShareDialog.vue |  2 +-
 .../modules/editor/components/CommandMenu.vue |  2 +-
 .../components/menu/AdditionalItems.vue       |  6 ++--
 .../editor/components/menu/AiOffer.vue        |  4 +--
 .../editor/components/menu/AlignmentItems.vue | 28 -------------------
 .../editor/components/menu/ListItems.vue      | 27 ------------------
 .../components/menu/TextHighlighter.vue       |  1 +
 .../editor/components/menu/TextLink.vue       | 12 ++++----
 .../editor/components/menu/TextStyleItems.vue |  6 ++--
 .../src/modules/editor/styles/index.css       | 12 ++++----
 .../src/modules/notes/components/NoteCard.vue |  6 ++--
 .../modules/notes/components/NoteDialog.vue   |  2 +-
 .../components/features/ManageNoteOptions.vue |  8 +++---
 .../components/features/handlers/AddNote.vue  |  5 ++--
 .../features/handlers/RemoveNote.vue          |  6 ++--
 .../notes/components/filters/NotesSort.vue    |  2 +-
 .../notes/components/filters/SearchNotes.vue  |  2 +-
 .../modules/search/components/PanelItems.vue  |  2 +-
 .../modules/search/components/SearchBox.vue   |  2 +-
 .../search/components/SearchFilter.vue        | 10 +++----
 .../modules/search/components/SearchItem.vue  |  2 +-
 .../__snapshots__/AboutSection.spec.ts.snap   |  6 ++--
 .../components/sections/AboutSection.vue      |  5 ++--
 .../workspace/components/WorkspaceMenu.vue    |  8 +++---
 .../client/src/shared/ui/_shortcuts/button.ts |  2 +-
 .../src/shared/ui/_shortcuts/command.ts       | 10 +++----
 .../client/src/shared/ui/_shortcuts/dialog.ts |  2 +-
 .../src/shared/ui/_shortcuts/dropdown-menu.ts |  8 +++---
 apps/client/src/shared/ui/_shortcuts/input.ts |  2 +-
 .../client/src/shared/ui/_shortcuts/picker.ts |  2 +-
 .../src/shared/ui/_shortcuts/pin-input.ts     |  2 +-
 .../client/src/shared/ui/_shortcuts/select.ts |  2 +-
 apps/client/src/shared/ui/_shortcuts/table.ts | 12 ++++----
 apps/client/src/shared/ui/_shortcuts/tabs.ts  |  2 +-
 .../src/shared/ui/_shortcuts/tags-input.ts    |  6 ++--
 apps/client/src/shared/ui/alert/UiAlert.vue   |  2 +-
 .../__snapshots__/UiButton.spec.ts.snap       |  2 +-
 apps/client/src/shared/ui/button/index.ts     |  8 +++---
 .../__snapshots__/UiPagination.spec.ts.snap   |  8 +++---
 apps/client/uno.config.ts                     |  7 +++++
 64 files changed, 158 insertions(+), 207 deletions(-)
 delete mode 100644 apps/client/src/modules/editor/components/menu/AlignmentItems.vue
 delete mode 100644 apps/client/src/modules/editor/components/menu/ListItems.vue

diff --git a/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
index 3692f472..434f047c 100644
--- a/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
+++ b/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
@@ -23,8 +23,8 @@ exports[`tests for HeaderWelcome.vue > should be render correctly 1`] = `
       </div>
     </div>
     <div data-v-8da6c939="" class="flex items-center gap-1.5 btns">
-      <ui-button-stub data-v-8da6c939="" class="bg-main bg-transparent" variant="ghost" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button" style="font-weight: 500;"></ui-button-stub>
-      <ui-button-stub data-v-8da6c939="" variant="default" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+      <ui-button-stub data-v-8da6c939="" class="bg-main bg-transparent" variant="ghost" size="lg" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button" style="font-weight: 500;"></ui-button-stub>
+      <ui-button-stub data-v-8da6c939="" variant="default" size="lg" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
     </div>
   </section>
 </header>"
diff --git a/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap
index 35d141b0..ae6ddb43 100644
--- a/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap
+++ b/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for WorkSpace.vue > should be render correctly 1`] = `
-"<div class="flex flex-col space-y-1.5 justify-start mb-20px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-34px 2xl:h-8 rounded-md w-full gap-2 shadow-none px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: space-between;">
+"<div class="flex flex-col space-y-1.5 justify-start mb-20px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-9 2xl:h-8 rounded-md w-full gap-2 shadow-none px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: space-between;">
       <!--v-if-->
-      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-15px !h-15px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
+      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-16px !h-16px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-default !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
       <!--v-if-->
     </button></a></div>"
 `;
diff --git a/apps/client/src/core/components/headers/HeaderMain.vue b/apps/client/src/core/components/headers/HeaderMain.vue
index 5a3c1b75..51374797 100644
--- a/apps/client/src/core/components/headers/HeaderMain.vue
+++ b/apps/client/src/core/components/headers/HeaderMain.vue
@@ -48,7 +48,7 @@ const { active } = useLayoutPaths(links, _projects)
     class="sticky top-0 left-0 right-0 z-999 w-full flex items-center justify-between px-15px py-8px min-h-52px max-h-52px
     border-b border-b-solid border-layout"
   >
-    <div class="inline-flex items-center gap-3">
+    <div class="inline-flex items-center gap-2">
       <Icon
         v-if="active.extendedAttrs.icon"
         :icon="active.extendedAttrs.icon"
@@ -70,7 +70,7 @@ const { active } = useLayoutPaths(links, _projects)
         <ShimmerButton shimmer-size="2px">
           <div i-hugeicons-link-04 class="text-neutral-900 dark:text-neutral-100 w-16px h-16px 2xl:(w-4 h-4)" />
           <span
-            class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
+            class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-base 2xl:text-sm fw500"
           >
             {{ $t('header.share') }}
           </span>
@@ -79,14 +79,14 @@ const { active } = useLayoutPaths(links, _projects)
       <div
         v-tooltip="{ content: $t('header.navigator.messages'), trigger: ['hover'], distance: 7 }"
         i-hugeicons-message-multiple-01
-        class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
+        class="text-large text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
         style="margin-right: 2px"
       />
       <HotkeysDialog>
         <div
           v-tooltip="{ content: $t('header.navigator.question'), trigger: ['hover'], distance: 7 }"
           i-hugeicons-book-open-01
-          class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
+          class="text-large text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
           style="margin-right: -1px;"
         />
       </HotkeysDialog>
diff --git a/apps/client/src/core/components/headers/HeaderWelcome.vue b/apps/client/src/core/components/headers/HeaderWelcome.vue
index 9f17ea63..8b2b483f 100644
--- a/apps/client/src/core/components/headers/HeaderWelcome.vue
+++ b/apps/client/src/core/components/headers/HeaderWelcome.vue
@@ -90,13 +90,14 @@ const { width } = useWindowSize()
       <div v-if="width >= 1152" class="flex items-center gap-1.5 btns">
         <UiButton
           variant="ghost"
+          size="lg"
           class="bg-main bg-transparent"
           style="font-weight: 500"
           @click="$router.push({ name: 'sign-in' })"
         >
           {{ t('welcome.header.login') }}
         </UiButton>
-        <UiButton @click="$router.push({ name: 'sign-up' })">
+        <UiButton size="lg" @click="$router.push({ name: 'sign-up' })">
           {{ t('welcome.header.reg') }}
         </UiButton>
       </div>
diff --git a/apps/client/src/core/components/headers/UserMenu.vue b/apps/client/src/core/components/headers/UserMenu.vue
index be3a5d4c..a163c3e2 100644
--- a/apps/client/src/core/components/headers/UserMenu.vue
+++ b/apps/client/src/core/components/headers/UserMenu.vue
@@ -7,8 +7,6 @@ import {
   UiDropdownMenuContent,
   UiDropdownMenuGroup,
   UiDropdownMenuItem,
-  UiDropdownMenuLabel,
-  UiDropdownMenuSeparator,
   UiDropdownMenuShortcut,
   UiDropdownMenuTrigger,
 } from '@/shared/ui'
@@ -32,22 +30,18 @@ watch([meta_x, ctrl_x], () => {
       <div class="flex items-center justify-center h-16px">
         <div
           i-lucide-ellipsis-vertical
-          class="cursor-pointer text-base text-neutral-500 dark:text-neutral-400"
+          class="cursor-pointer text-large text-neutral-500 dark:text-neutral-400"
         />
       </div>
     </UiDropdownMenuTrigger>
-    <UiDropdownMenuContent align="end" class="w-[200px] mt-6px">
-      <UiDropdownMenuLabel class="text-sm">
-        test@gmail.com
-      </UiDropdownMenuLabel>
-      <UiDropdownMenuSeparator />
+    <UiDropdownMenuContent align="end" class="w-[200px] mt-12px">
       <UiDropdownMenuGroup>
         <UiDropdownMenuItem @click="router.push({ name: 'welcome' })">
-          <span class="2xl:text-13px text-sm font-medium">{{ $t('header.user.welcome') }}</span>
+          <span class="text-default font-medium">{{ $t('header.user.welcome') }}</span>
           <UiDropdownMenuShortcut>⇧P</UiDropdownMenuShortcut>
         </UiDropdownMenuItem>
         <UiDropdownMenuItem>
-          <span class="2xl:text-13px text-sm font-medium text-red-500">{{ $t('header.user.logout') }}</span>
+          <span class="text-default font-medium text-red-500">{{ $t('header.user.logout') }}</span>
           <UiDropdownMenuShortcut>⌘X</UiDropdownMenuShortcut>
         </UiDropdownMenuItem>
       </UiDropdownMenuGroup>
diff --git a/apps/client/src/core/components/headers/system/LanguageSelect.vue b/apps/client/src/core/components/headers/system/LanguageSelect.vue
index 2eb4da0d..acf1fa1f 100644
--- a/apps/client/src/core/components/headers/system/LanguageSelect.vue
+++ b/apps/client/src/core/components/headers/system/LanguageSelect.vue
@@ -36,7 +36,7 @@ const { setLanguage } = useLanguage(locales, language)
         class="p-1.5 px-2.5 h-fit gap-1 text-neutral-400 hover:text-neutral-700 dark:!text-neutral-400 dark:hover:!text-neutral-200"
       >
         <div i-hugeicons-globe-02 text-base />
-        <span text-sm fw400>{{ i18nLanguage }}</span>
+        <span class="text-default">{{ i18nLanguage }}</span>
       </UiButton>
     </UiSelectTrigger>
     <UiSelectContent class="w-fit min-w-2" align="center">
diff --git a/apps/client/src/core/components/headers/system/ThemeSwitcher.vue b/apps/client/src/core/components/headers/system/ThemeSwitcher.vue
index bc37020e..309d2502 100644
--- a/apps/client/src/core/components/headers/system/ThemeSwitcher.vue
+++ b/apps/client/src/core/components/headers/system/ThemeSwitcher.vue
@@ -13,7 +13,7 @@ const toggleDark = useToggle(isDark)
     class="p-2 gap-1 text-neutral-400 hover:text-neutral-700 dark:!text-neutral-400 dark:hover:!text-neutral-200"
     @click="toggleDark()"
   >
-    <div v-if="!isDark" i-hugeicons-moon-02 text-base />
-    <div v-else i-lucide-sun text-base />
+    <div v-if="!isDark" i-hugeicons-moon-02 class="w-4.4 h-4.4 2xl:(w-4 h-4)" />
+    <div v-else i-lucide-sun class="w-4.4 h-4.4 2xl:(w-4 h-4)" />
   </UiButton>
 </template>
diff --git a/apps/client/src/core/components/sidebar/InfoMenu.vue b/apps/client/src/core/components/sidebar/InfoMenu.vue
index 0a5e322c..8c7ee152 100644
--- a/apps/client/src/core/components/sidebar/InfoMenu.vue
+++ b/apps/client/src/core/components/sidebar/InfoMenu.vue
@@ -27,8 +27,8 @@ const [DifineTemplate, ReuseTemplate] = createReusableTemplate()
 <template>
   <DifineTemplate v-slot="{ title, icon }">
     <UiDropdownMenuItem>
-      <span class="text-sm" :class="icon" />
-      <span class="2xl:text-13px text-sm font-medium">{{ title }}</span>
+      <span class="text-default" :class="icon" />
+      <span class="text-default font-medium">{{ title }}</span>
     </UiDropdownMenuItem>
   </DifineTemplate>
   <UiDropdownMenu direction="right">
@@ -45,15 +45,15 @@ const [DifineTemplate, ReuseTemplate] = createReusableTemplate()
         :class="[isExpanded ? 'justify-between' : 'justify-center p-0']"
       >
         <div class="flex items-center gap-2">
-          <div i-hugeicons-mortarboard-02 class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-300" />
-          <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">
+          <div i-hugeicons-mortarboard-02 class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-300" />
+          <span v-show="isExpanded" class="text-default !fw500 text-neutral-900 dark:text-neutral-100">
             {{ $t('sidebar.help.title') }}
           </span>
         </div>
         <UiBadge v-if="isShowPlan" variant="soft" class="w-10 px-1">
           <div class="flex items-center gap-0.5">
             <div i-lucide-stars />
-            <span class="!text-10px !fw500">1/3</span>
+            <span class="text-xs !fw500">1/3</span>
           </div>
         </UiBadge>
       </UiButton>
diff --git a/apps/client/src/core/components/sidebar/IntegrationItems.vue b/apps/client/src/core/components/sidebar/IntegrationItems.vue
index 2a2b67a9..b08fcd31 100644
--- a/apps/client/src/core/components/sidebar/IntegrationItems.vue
+++ b/apps/client/src/core/components/sidebar/IntegrationItems.vue
@@ -20,7 +20,7 @@ const { isExpanded } = useExpandedContext()
     :class="[isExpanded ? 'px-2' : 'px-1']"
   >
     <p
-      class="text-neutral-500 dark:text-neutral-400 text-sm 2xl:text-xs capitalize text-ellipsis
+      class="text-neutral-500 dark:text-neutral-400 text-small capitalize text-ellipsis
         whitespace-nowrap overflow-hidden"
     >
       {{ $t('sidebar.integrations') }}
@@ -42,10 +42,10 @@ const { isExpanded } = useExpandedContext()
         <Icon
           :inline="true"
           :icon="icon"
-          class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-200"
+          class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-200"
           :class="[idx === 2 && '!w-3.6 !h-3.6 !text-#fc4714']"
         />
-        <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ name }}</span>
+        <span v-show="isExpanded" class="text-default !fw500 text-neutral-900 dark:text-neutral-100">{{ name }}</span>
       </div>
       <UiBadge v-if="name === 'Notion' && isExpanded" variant="outline" class="px-1 py-0 text-11px shadow-none">
         {{ $t('sidebar.soon') }}
diff --git a/apps/client/src/core/components/sidebar/WorkSpace.vue b/apps/client/src/core/components/sidebar/WorkSpace.vue
index 4f73f839..58e6ba84 100644
--- a/apps/client/src/core/components/sidebar/WorkSpace.vue
+++ b/apps/client/src/core/components/sidebar/WorkSpace.vue
@@ -57,11 +57,11 @@ const contentPosition = computed(() => {
         :style="{ padding: !isExpanded ? '0px' : '', justifyContent: contentPosition }"
       >
         <div class="flex items-center gap-2">
-          <Icon :icon="link.icon" class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200" />
-          <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ $t(`sidebar.${link.name}`) }}</span>
+          <Icon :icon="link.icon" class="!w-16px !h-16px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200" />
+          <span v-show="isExpanded" class="text-default !fw500 text-neutral-900 dark:text-neutral-100">{{ $t(`sidebar.${link.name}`) }}</span>
         </div>
         <UiBadge v-if="link.id === 1 && isExpanded" variant="solid" class="px-5px py-0 text-xs rounded-md">
-          <span class="text-[10px] text-white">3</span>
+          <span class="text-xs text-white">3</span>
         </UiBadge>
       </UiButton>
     </RouterLink>
diff --git a/apps/client/src/core/components/sidebar/plan/PlanCard.vue b/apps/client/src/core/components/sidebar/plan/PlanCard.vue
index c7be99fc..605e5ed9 100644
--- a/apps/client/src/core/components/sidebar/plan/PlanCard.vue
+++ b/apps/client/src/core/components/sidebar/plan/PlanCard.vue
@@ -18,10 +18,12 @@ const { isExpanded } = useExpandedContext()
   >
     <div class="flex gap-1.5 w-full justify-between items-center">
       <div class="flex items-center gap-1">
-        <UiBadge variant="soft" class="rounded px-1.5 py-px text-xs">
+        <UiBadge variant="soft" class="rounded px-1.5 py-px text-small">
           5
         </UiBadge>
-        <span class="text-13px 2xl:text-sm text-neutral-800 dark:text-neutral-300 whitespace-nowrap"> {{ $t('sidebar.plan.description') }}</span>
+        <span class="text-default text-neutral-800 dark:text-neutral-300 whitespace-nowrap">
+          {{ $t('sidebar.plan.description') }}
+        </span>
       </div>
       <SubscribePlan />
     </div>
@@ -43,7 +45,7 @@ const { isExpanded } = useExpandedContext()
     </span>
     <div class="flex gap-1.5 w-full justify-center items-center">
       <div class="flex flex-col items-center h-7">
-        <UiBadge variant="outline" class="rounded px-1 py-1 text-10px bg-white dark:bg-neutral-700/10">
+        <UiBadge variant="outline" class="rounded px-1 py-1 text-xs 2xl:text-10px bg-white dark:bg-neutral-700/10">
           5/10
         </UiBadge>
       </div>
diff --git a/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue b/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue
index 46468d66..7c2b5e26 100644
--- a/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue
+++ b/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue
@@ -6,7 +6,7 @@ import { UiButton } from '@/shared/ui'
   <UiButton
     size="sm"
     variant="secondary"
-    class="shadow-none text-sm 2xl:text-xs px-2 py-px h-7 dark:(bg-neutral-700/30 hover:bg-neutral-700/20)"
+    class="shadow-none fw500 text-small px-2 py-px h-7 dark:(bg-neutral-700/30 hover:bg-neutral-700/20)"
   >
     {{ $t('sidebar.plan.btn') }}
   </UiButton>
diff --git a/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue b/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue
index 3cd18488..f3185dc9 100644
--- a/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue
+++ b/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue
@@ -53,8 +53,8 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         </ReuseTemplate>
         <ReuseTemplate field="url" :error="errors.url">
           <div class="relative w-full h-9 flex items-center">
-            <span class="text-sm pb-0.5px text-neutral-500 absolute left-3">workpaces/</span>
-            <UiInput id="url" v-model="url" class="pl-22" type="text" />
+            <span class="text-default pb-0.5px text-neutral-500 absolute left-3">workpaces/</span>
+            <UiInput id="url" v-model="url" class="pl-25 2xl:pl-22" type="text" />
           </div>
         </ReuseTemplate>
       </div>
diff --git a/apps/client/src/modules/boards/components/BoardsDataTable.vue b/apps/client/src/modules/boards/components/BoardsDataTable.vue
index 306cd8f7..1d3b9305 100644
--- a/apps/client/src/modules/boards/components/BoardsDataTable.vue
+++ b/apps/client/src/modules/boards/components/BoardsDataTable.vue
@@ -113,10 +113,11 @@ defineExpose({
             v-for="{ name, color } in cell.row.original.labels"
             :key="name"
             variant="soft"
-            class="shadow-none rounded-lg px-1.5 mr-1.5 bg-neutral-100 text-neutral-800 dark:(bg-neutral-700/80 text-neutral-100)"
+            class="shadow-none rounded-lg !text-12px 2xl:!text-xs font-medium px-1.5 mr-1.5 bg-neutral-100 text-neutral-800 dark:(bg-neutral-700/80 text-neutral-100)"
             :style="{
               background: color ? color.startsWith('#') ? `${color}33` : color : '',
               color: formatLabelColor(color, isDark ? 10 : 100) || '',
+              border: color ? `1px solid ${color}44 !important` : '1px solid rgba(128, 128, 128, 0.3) !important',
             }"
           >
             {{ name }}
diff --git a/apps/client/src/modules/boards/components/NewBoardDialog.vue b/apps/client/src/modules/boards/components/NewBoardDialog.vue
index 70b6f198..7d64ff33 100644
--- a/apps/client/src/modules/boards/components/NewBoardDialog.vue
+++ b/apps/client/src/modules/boards/components/NewBoardDialog.vue
@@ -27,7 +27,7 @@ function toggleModalRoute() {
     :default-open="true"
     @update:open="toggleModalRoute"
   >
-    <UiDialogContent>
+    <UiDialogContent class="sm:max-w-xl">
       <div class="flex flex-col gap-8">
         <UiDialogHeader>
           <UiDialogTitle>
diff --git a/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue b/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue
index 2b3756d9..d5a3c8dd 100644
--- a/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue
+++ b/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue
@@ -14,11 +14,10 @@ const emit = defineEmits<{
 <template>
   <UiButton
     :variant="variant"
-    size="sm"
-    class="px-2"
+    size="default"
     @click="emit('add')"
   >
     <span i-hugeicons-add-01 class="w-4 h-4" />
-    <span class="text-sm">{{ $t('boards.create', plural) }}</span>
+    <span class="text-default">{{ $t('boards.create', plural) }}</span>
   </UiButton>
 </template>
diff --git a/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue b/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue
index 3a151297..d6164c01 100644
--- a/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue
+++ b/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue
@@ -9,12 +9,11 @@ const emit = defineEmits<{
 <template>
   <UiButton
     variant="ghost"
-    size="sm"
-    class="px-2 !text-red-500"
+    size="default"
+    class="!text-red-500"
     @click="emit('remove')"
   >
     <span i-hugeicons-delete-03 class="w-4 h-4" />
-    <!-- <span class="text-sm">{{ $t('boards.remove') }}</span> -->
-    <span class="text-sm">Удалить</span>
+    <span class="text-default">{{ $t('boards.remove') }}</span>
   </UiButton>
 </template>
diff --git a/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue b/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue
index a1f26926..63dd9574 100644
--- a/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue
+++ b/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue
@@ -83,7 +83,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
   </DefineTemplate>
   <UiPopover>
     <UiPopoverTrigger as-child>
-      <UiButton size="sm" variant="dashed" class="px-2 shadow-sm border w-max fw400">
+      <UiButton size="sm" variant="dashed" class="px-2 h-default shadow-sm border w-max 2xl:fw400">
         <span>{{ t('boards.filters.advanced.title') }}</span>
         <div class="w-4 h-4 flex items-center justify-center text-neutral-600 dark:text-neutral-300 text-xs bg-neutral-100 dark:bg-neutral-700 rounded-full">
           {{ advancedModel.length }}
diff --git a/apps/client/src/modules/boards/components/filters/BoardsSort.vue b/apps/client/src/modules/boards/components/filters/BoardsSort.vue
index 4780c5ec..7b9b5963 100644
--- a/apps/client/src/modules/boards/components/filters/BoardsSort.vue
+++ b/apps/client/src/modules/boards/components/filters/BoardsSort.vue
@@ -16,7 +16,7 @@ const { sortModel } = useFilteredContext()
 <template>
   <UiSelect v-model:model-value="sortModel">
     <UiSelectTrigger as-child>
-      <UiButton size="sm" variant="dashed" class="gap-0 px-2 focus:ring-0 shadow-sm border fw400">
+      <UiButton size="sm" variant="dashed" class="gap-0 h-default px-2 focus:ring-0 shadow-sm border 2xl:fw400">
         <span i-hugeicons-sort-by-down-01 class="w-4 h-4 mr-2 text-neutral-500 dark:text-neutral-400" />
         <span class="text-neutral-600 dark:text-neutral-400 mr-1">
           {{ $t('boards.filters.sort.title') }}
diff --git a/apps/client/src/modules/boards/components/filters/SearchBoards.vue b/apps/client/src/modules/boards/components/filters/SearchBoards.vue
index 6cf3b11b..5c715e00 100644
--- a/apps/client/src/modules/boards/components/filters/SearchBoards.vue
+++ b/apps/client/src/modules/boards/components/filters/SearchBoards.vue
@@ -3,5 +3,5 @@ import { UiInput } from '@/shared/ui'
 </script>
 
 <template>
-  <UiInput :placeholder="$t('boards.filters.search')" class="w-200px 2xl:h-8 focus:ring-0" />
+  <UiInput :placeholder="$t('boards.filters.search')" class="w-200px h-default focus:ring-0" />
 </template>
diff --git a/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue b/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue
index bb4f6f4e..c3e6f6cd 100644
--- a/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue
+++ b/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue
@@ -62,7 +62,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
               id="name"
               v-model="name"
               :placeholder="$t('authentication.workspace.creating.form.name.placeholder')"
-              class="shadow-none focus:ring-0"
+              class="shadow-none h-default focus:ring-0"
             />
           </ReuseTemplate>
           <UiAlert
@@ -72,7 +72,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
           />
           <ReuseTemplate field="labels">
             <TagsChooser id="labels" v-model="labels" />
-            <span class="text-xs text-neutral-500">
+            <span class="text-small text-neutral-500">
               {{ $t('boards.forms.creating.labels.description') }}
             </span>
           </ReuseTemplate>
@@ -80,16 +80,18 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         <div class="flex items-center justify-end gap-3">
           <UiButton
             variant="secondary"
-            size="sm"
+            size="default"
             type="button"
+            class="px-4"
             @click="router.back()"
           >
             {{ $t('boards.forms.creating.btns', 1) }}
           </UiButton>
           <UiButton
             variant="solid"
-            size="sm"
+            size="default"
             type="submit"
+            class="px-4"
           >
             {{ $t('boards.forms.creating.btns', 2) }}
           </UiButton>
diff --git a/apps/client/src/modules/common/components/EmptyContainer.vue b/apps/client/src/modules/common/components/EmptyContainer.vue
index d5da0386..260ced7b 100644
--- a/apps/client/src/modules/common/components/EmptyContainer.vue
+++ b/apps/client/src/modules/common/components/EmptyContainer.vue
@@ -8,14 +8,14 @@ defineProps<{
 </script>
 
 <template>
-  <div class="absolute top-1/2 left-1/2 translate-x--1/2 translate-y--1/2 flex flex-col items-center justify-center gap-2">
+  <div class="absolute top-1/2 left-1/2 translate-x--1/2 translate-y--1/2 flex flex-col items-center justify-center gap-1">
     <div class="w-12 h-12 rounded-full flex items-center justify-center bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700">
       <Icon :icon="icon" class="w-6 h-6 text-blue-500" />
     </div>
-    <p class="text-base fw500 text-neutral-800 dark:text-neutral-200">
+    <p class="text-16px 2xl:text-base fw-590 text-neutral-800 dark:text-neutral-200">
       {{ $t(`${tPrefix}.empty.title`) }}
     </p>
-    <span class="text-sm text-neutral-600 dark:text-neutral-200">
+    <span class="text-default mb-1 text-neutral-600 dark:text-neutral-400">
       {{ $t(`${tPrefix}.empty.description`) }}
     </span>
     <slot />
diff --git a/apps/client/src/modules/common/components/controls/TableControls.vue b/apps/client/src/modules/common/components/controls/TableControls.vue
index 32960759..9e06aa5e 100644
--- a/apps/client/src/modules/common/components/controls/TableControls.vue
+++ b/apps/client/src/modules/common/components/controls/TableControls.vue
@@ -13,7 +13,7 @@ defineProps<{
     class="flex items-center justify-between px-2"
   >
     <div
-      class="flex-1 text-sm text-neutral-600 dark:text-neutral-400"
+      class="flex-1 text-default text-neutral-600 dark:text-neutral-400"
     >
       {{ table?.getFilteredSelectedRowModel().rows.length }}
       {{ $t('table.row_from_all') }}
@@ -22,7 +22,7 @@ defineProps<{
     </div>
     <div class="flex items-center gap-4">
       <span
-        class="flex items-center justify-center text-sm"
+        class="flex items-center justify-center text-default"
       >
         {{ $t('table.rows_on_page') }}
       </span>
@@ -32,7 +32,7 @@ defineProps<{
         @update:model-value="table?.setPageSize($event as unknown as number)"
       />
       <div
-        class="flex items-center justify-center text-sm"
+        class="flex items-center justify-center text-default"
       >
         {{ $t('table.page') }}
         {{ (table?.getState().pagination.pageIndex ?? 0) + 1 }}
diff --git a/apps/client/src/modules/common/components/dialogs/HotkeysDialog.vue b/apps/client/src/modules/common/components/dialogs/HotkeysDialog.vue
index 45ced5ce..a48003ab 100644
--- a/apps/client/src/modules/common/components/dialogs/HotkeysDialog.vue
+++ b/apps/client/src/modules/common/components/dialogs/HotkeysDialog.vue
@@ -35,7 +35,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     <UiDialogTrigger as-child>
       <slot />
     </UiDialogTrigger>
-    <UiDialogContent class="sm:max-w-md">
+    <UiDialogContent class="sm:max-w-lg">
       <UiDialogHeader class="mb-2">
         <UiDialogTitle>{{ $t('dialogs.hotkeys.title') }}</UiDialogTitle>
       </UiDialogHeader>
diff --git a/apps/client/src/modules/common/components/dialogs/ShareDialog.vue b/apps/client/src/modules/common/components/dialogs/ShareDialog.vue
index a7e8f956..79ca49ad 100644
--- a/apps/client/src/modules/common/components/dialogs/ShareDialog.vue
+++ b/apps/client/src/modules/common/components/dialogs/ShareDialog.vue
@@ -30,7 +30,7 @@ const model = defineModel<boolean>('open')
       <ShareLink />
       <UiDialogFooter class="sm:justify-start">
         <UiDialogClose as-child>
-          <UiButton type="button" variant="secondary">
+          <UiButton type="button" size="sm" variant="secondary">
             {{ $t('dialogs.share.close') }}
           </UiButton>
         </UiDialogClose>
diff --git a/apps/client/src/modules/editor/components/CommandMenu.vue b/apps/client/src/modules/editor/components/CommandMenu.vue
index cdf42069..109c0427 100644
--- a/apps/client/src/modules/editor/components/CommandMenu.vue
+++ b/apps/client/src/modules/editor/components/CommandMenu.vue
@@ -40,7 +40,7 @@ function selectItem(index: number) {
             <Icon :icon="item.icon" class="w-4 h-4" />
           </div>
           <div class="flex flex-col">
-            <span class="2xl:text-13px text-sm">
+            <span class="text-13px">
               {{ $t(`note.editor.nodes.${item.key}.title`) }}
             </span>
             <span class="text-xs text-neutral-600 dark:text-neutral-400">
diff --git a/apps/client/src/modules/editor/components/menu/AdditionalItems.vue b/apps/client/src/modules/editor/components/menu/AdditionalItems.vue
index 9a3559f6..212a69cc 100644
--- a/apps/client/src/modules/editor/components/menu/AdditionalItems.vue
+++ b/apps/client/src/modules/editor/components/menu/AdditionalItems.vue
@@ -20,8 +20,8 @@ function selectItem(index: number) {
   <UiDropdownMenu>
     <UiDropdownMenuTrigger as-child>
       <UiButton variant="ghost" size="sm" class="!h-7 py-0 px-1.5 fw400 gap-1">
-        <span class="text-13px mt-0.5">Text</span>
-        <span i-lucide-chevron-down class="w-3.5 h-3.5 text-neutral-600" />
+        <span class="text-default">Text</span>
+        <span i-lucide-chevron-down class="w-3.5 h-3.5 text-neutral-500" />
       </UiButton>
     </UiDropdownMenuTrigger>
     <UiDropdownMenuContent
@@ -35,7 +35,7 @@ function selectItem(index: number) {
             <Icon :icon="item.icon" class="w-3.5 h-3.5" />
           </div>
           <div :class="item.isActive(editor) ? '!text-blue-600 dark:!text-blue-500' : ''" class="flex flex-col">
-            <span class="2xl:text-13px text-sm">
+            <span class="text-13px">
               {{ $t(`note.editor.nodes.${item.key}.title`) }}
             </span>
             <span class="text-xs text-neutral-600 dark:text-neutral-400">
diff --git a/apps/client/src/modules/editor/components/menu/AiOffer.vue b/apps/client/src/modules/editor/components/menu/AiOffer.vue
index dbaaabc3..97ada0fb 100644
--- a/apps/client/src/modules/editor/components/menu/AiOffer.vue
+++ b/apps/client/src/modules/editor/components/menu/AiOffer.vue
@@ -9,8 +9,8 @@ import { UiButton } from '@/shared/ui'
     size="sm"
     class="gap-1 !h-7 py-0 px-2 mr-1 !text-purple-600 dark:!text-purple-400"
   >
-    <Icon icon="hugeicons:ai-magic" class="w-4 h-4" />
-    <span class="text-13px fw400 mt-0.5">Ask AI</span>
+    <Icon icon="hugeicons:ai-magic" class="w-4.2 h-4.2" />
+    <span class="text-default fw400 2xl:mt-0.5">Ask AI</span>
   </UiButton>
   <div class="w-1px h-4.5 mr-1 bg-neutral-200 dark:bg-neutral-700" />
 </template>
diff --git a/apps/client/src/modules/editor/components/menu/AlignmentItems.vue b/apps/client/src/modules/editor/components/menu/AlignmentItems.vue
deleted file mode 100644
index 4aba0134..00000000
--- a/apps/client/src/modules/editor/components/menu/AlignmentItems.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import MenuButton from '../handlers/MenuButton.vue'
-import type { Editor } from '@tiptap/vue-3'
-
-defineProps<{
-  editor: Editor
-}>()
-
-const alignments = [
-  { type: 'left', icon: 'hugeicons:text-align-left' },
-  { type: 'center', icon: 'hugeicons:text-align-center' },
-  { type: 'right', icon: 'hugeicons:text-align-right' },
-]
-</script>
-
-<template>
-  <div class="flex h-full items-center">
-    <MenuButton
-      v-for="alignment in alignments"
-      :key="alignment.type"
-      :is-active="editor.isActive({ textAlign: alignment.type })"
-      :icon="alignment.icon"
-      icon-class="!w-3.6 !h-3.6"
-      @click="editor.chain().focus().setTextAlign(alignment.type).run()"
-    />
-    <div class="w-1px h-4.5 mx-1 bg-neutral-200 dark:bg-neutral-700" />
-  </div>
-</template>
diff --git a/apps/client/src/modules/editor/components/menu/ListItems.vue b/apps/client/src/modules/editor/components/menu/ListItems.vue
deleted file mode 100644
index 4893d405..00000000
--- a/apps/client/src/modules/editor/components/menu/ListItems.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<script setup lang="ts">
-import MenuButton from '../handlers/MenuButton.vue'
-import type { Editor } from '@tiptap/vue-3'
-
-defineProps<{
-  editor: Editor
-}>()
-
-const lists = [
-  { type: 'bulletList', icon: 'f7:list-bullet' },
-  { type: 'orderedList', icon: 'fe:list-order' },
-]
-</script>
-
-<template>
-  <div class="flex h-full items-center">
-    <MenuButton
-      v-for="list in lists"
-      :key="list.type"
-      :is-active="editor.isActive(list.type)"
-      :icon="list.icon"
-      icon-class="!w-3.2 !h-3.2"
-      @click="editor.chain().focus().toggleList(list.type, 'listItem').run()"
-    />
-    <div class="w-1px h-4.5 mx-1 bg-neutral-200 dark:bg-neutral-700" />
-  </div>
-</template>
diff --git a/apps/client/src/modules/editor/components/menu/TextHighlighter.vue b/apps/client/src/modules/editor/components/menu/TextHighlighter.vue
index 3cabbac4..9ebe0c6f 100644
--- a/apps/client/src/modules/editor/components/menu/TextHighlighter.vue
+++ b/apps/client/src/modules/editor/components/menu/TextHighlighter.vue
@@ -11,6 +11,7 @@ defineProps<{
   <MenuButton
     icon="hugeicons:text-color"
     :is-active="editor.isActive('highlight')"
+    icon-class="!w-4.6 !h-4.6 2xl:(!w-4 !h-4)"
     @click="editor.chain().focus().toggleHighlight({ color: '#b197fc55' }).run()"
   >
     <template #badge>
diff --git a/apps/client/src/modules/editor/components/menu/TextLink.vue b/apps/client/src/modules/editor/components/menu/TextLink.vue
index e1961eba..1b3553bb 100644
--- a/apps/client/src/modules/editor/components/menu/TextLink.vue
+++ b/apps/client/src/modules/editor/components/menu/TextLink.vue
@@ -46,15 +46,15 @@ watch(() => props.editor.state.selection, () => {
   <UiPopover>
     <UiPopoverTrigger as-child>
       <UiButton variant="ghost" size="sm" class="!h-7 py-0 px-1.5 fw400 gap-1">
-        <span i-hugeicons-link-04 class="w-4 h-4" />
-        <span i-lucide-chevron-down class="w-3.5 h-3.5 text-neutral-600" />
+        <span i-hugeicons-link-04 class="w-4.8 h-4.8 2xl:(w-4 h-4)" />
+        <span i-lucide-chevron-down class="w-3.5 h-3.5 text-neutral-500" />
       </UiButton>
     </UiPopoverTrigger>
-    <UiPopoverContent class="w-[200px] mt-6px p-0 relative">
+    <UiPopoverContent class="w-200px mt-6px p-0 relative">
       <UiInput
         v-model="url"
         placeholder="Paste link"
-        class="focus:ring-0 border-none text-13px h-8"
+        class="focus:ring-0 border-none text-default h-8"
         :class="editor.isActive('link') && 'pr-8'"
         @keydown.enter.prevent="addLink"
       />
@@ -64,12 +64,12 @@ watch(() => props.editor.state.selection, () => {
       >
         <div
           i-hugeicons-clipboard
-          class="w-3.5 h-3.5 cursor-pointer"
+          class="w-4.2 h-4.2 2xl(w-3.5 h-3.5) cursor-pointer"
           @click="copyLink"
         />
         <div
           i-hugeicons-delete-02
-          class="w-3.5 h-3.5 cursor-pointer text-red-500"
+          class="w-4.2 h-4.2 2xl(w-3.5 h-3.5) cursor-pointer text-red-500"
           @click="editor.chain().focus().unsetLink().run()"
         />
       </div>
diff --git a/apps/client/src/modules/editor/components/menu/TextStyleItems.vue b/apps/client/src/modules/editor/components/menu/TextStyleItems.vue
index 6641a6e6..8cd850c2 100644
--- a/apps/client/src/modules/editor/components/menu/TextStyleItems.vue
+++ b/apps/client/src/modules/editor/components/menu/TextStyleItems.vue
@@ -28,15 +28,15 @@ const textStyles: TextStyle[] = [
       <MenuButton
         :is-active="editor.isActive(textStyle.type)"
         :icon="textStyle.icon"
-        icon-class="!w-3.4 !h-3.4"
+        icon-class="!w-4 !h-4 2xl:(!w-3.4 !h-3.4)"
         @click="editor.chain().focus().toggleMark(textStyle.type).run()"
       />
       <template #popper>
         <div class="flex flex-col gap-0.5">
-          <span class="text-xs">
+          <span class="text-small">
             {{ $t(`note.editor.menu.${textStyle.type}`) }}
           </span>
-          <span class="text-xs text-neutral-300 dark:text-neutral-400">
+          <span class="text-small text-neutral-300 dark:text-neutral-400">
             {{ textStyle.shortcut }}
           </span>
         </div>
diff --git a/apps/client/src/modules/editor/styles/index.css b/apps/client/src/modules/editor/styles/index.css
index 257a042d..20135feb 100644
--- a/apps/client/src/modules/editor/styles/index.css
+++ b/apps/client/src/modules/editor/styles/index.css
@@ -7,11 +7,11 @@
 }
 
 .jenda-editor h1 {
-  @apply text-3xl font-extrabold dark:text-neutral-100;
+  @apply text-4xl 2xl:text-3xl font-extrabold dark:text-neutral-100;
 }
 
 .jenda-editor h2 {
-  @apply text-lg font-extrabold dark:text-neutral-100;
+  @apply text-2xl 2xl:text-xl font-extrabold dark:text-neutral-100;
 }
 
 .jenda-editor h3 {
@@ -19,11 +19,11 @@
 }
 
 .jenda-editor p {
-  @apply text-sm dark:text-neutral-200;
+  @apply !text-default dark:text-neutral-200;
 }
 
 .jenda-editor span {
-  @apply text-sm dark:text-neutral-200;
+  @apply !text-default dark:text-neutral-200;
 }
 
 .jenda-editor ol,
@@ -108,7 +108,7 @@
 
 .tiptap .is-empty::before {
   content: attr(data-placeholder);
-  @apply text-sm dark:text-neutral-400 pointer-events-none h-0 float-left text-neutral-500;
+  @apply text-default dark:text-neutral-400 pointer-events-none h-0 float-left text-neutral-500;
 }
 
 .tippy-box {
@@ -169,7 +169,7 @@
 }
 
 .ProseMirror input[type='checkbox']:checked {
-  @apply bg-blue-500;
+  @apply bg-blue-500 border-blue-500;
 }
 
 .ProseMirror input[type='checkbox']::after {
diff --git a/apps/client/src/modules/notes/components/NoteCard.vue b/apps/client/src/modules/notes/components/NoteCard.vue
index c9eafe51..b5c4ce4e 100644
--- a/apps/client/src/modules/notes/components/NoteCard.vue
+++ b/apps/client/src/modules/notes/components/NoteCard.vue
@@ -12,14 +12,14 @@ defineProps<{
     <div class="p-3 flex flex-col space-y-1">
       <div class="flex items-center space-x-1.5 mb-2">
         <UserAvatar class="!h-22px !w-22px" :img="note.creator!.photoUrl" />
-        <span class="text-sm fw500 dark:text-neutral-100">
+        <span class="text-default dark:text-neutral-100">
           {{ note.creator!.email }}
         </span>
       </div>
-      <p class="text-sm fw500 hyphens-auto dark:text-neutral-100">
+      <p class="text-default fw500 hyphens-auto dark:text-neutral-100">
         {{ note.title }}
       </p>
-      <span class="text-xs text-neutral-600 dark:text-neutral-400 hyphens-auto line-clamp-2">
+      <span class="text-small text-neutral-600 dark:text-neutral-400 hyphens-auto line-clamp-2">
         {{ note.content }}
       </span>
     </div>
diff --git a/apps/client/src/modules/notes/components/NoteDialog.vue b/apps/client/src/modules/notes/components/NoteDialog.vue
index cfa6ca19..6fcb8c17 100644
--- a/apps/client/src/modules/notes/components/NoteDialog.vue
+++ b/apps/client/src/modules/notes/components/NoteDialog.vue
@@ -41,7 +41,7 @@ const daysAgo = computed(() => dayjs().to(dayjs(lastModified.value)))
         <div class="flex items-center gap-2.5">
           <ManageNoteOptions />
           <div class="w-px h-3 bg-neutral-200 dark:bg-neutral-700" />
-          <span class="text-xs text-neutral-600 dark:text-neutral-400">
+          <span class="text-small text-neutral-600 dark:text-neutral-400">
             {{ $t('note.lastModified') }} {{ daysAgo }}
           </span>
         </div>
diff --git a/apps/client/src/modules/notes/components/features/ManageNoteOptions.vue b/apps/client/src/modules/notes/components/features/ManageNoteOptions.vue
index 333ed07c..d39aed38 100644
--- a/apps/client/src/modules/notes/components/features/ManageNoteOptions.vue
+++ b/apps/client/src/modules/notes/components/features/ManageNoteOptions.vue
@@ -18,16 +18,16 @@ const { isLinterEnabled, toggleLinter } = useLinterContext()
 <template>
   <UiDropdownMenu>
     <UiDropdownMenuTrigger class="flex items-center gap-1 bg-transparent cursor-pointer">
-      <span class="text-sm">{{ route.params.slug }}</span>
+      <span class="text-default fw500">{{ route.params.slug }}</span>
       <span i-lucide-chevron-down class="text-sm text-neutral-600 dark:text-neutral-400" />
     </UiDropdownMenuTrigger>
     <UiDropdownMenuContent align="start" class="w-fit p-1">
-      <UiDropdownMenuItem class="justify-start relative 2xl:text-13px text-sm fw400 cursor-pointer gap-1.5" @select.prevent>
+      <UiDropdownMenuItem class="justify-start relative text-13px fw400 cursor-pointer gap-1.5" @select.prevent>
         <UiSwitch
           :default-checked="isLinterEnabled"
           variant="solid"
           thumb="solid"
-          class="h-4.6"
+          class="h-5 2xl:h-4.6"
           @update:checked="toggleLinter"
         />
         <span>{{ $t('note.actions', 1) }}</span>
@@ -35,7 +35,7 @@ const { isLinterEnabled, toggleLinter } = useLinterContext()
           EXPERIMENTAL
         </UiBadge>
       </UiDropdownMenuItem>
-      <UiDropdownMenuItem class="justify-start relative 2xl:text-13px text-sm !text-red-500 text-sm fw400 cursor-pointer gap-1.5">
+      <UiDropdownMenuItem class="justify-start relative text-13px !text-red-500 fw400 cursor-pointer gap-1.5">
         <span>{{ $t('note.actions', 2) }}</span>
       </UiDropdownMenuItem>
     </UiDropdownMenuContent>
diff --git a/apps/client/src/modules/notes/components/features/handlers/AddNote.vue b/apps/client/src/modules/notes/components/features/handlers/AddNote.vue
index e941fe21..b638b198 100644
--- a/apps/client/src/modules/notes/components/features/handlers/AddNote.vue
+++ b/apps/client/src/modules/notes/components/features/handlers/AddNote.vue
@@ -14,11 +14,10 @@ const emit = defineEmits<{
 <template>
   <UiButton
     :variant="variant"
-    size="sm"
-    class="px-2"
+    size="default"
     @click="emit('add')"
   >
     <span i-hugeicons-add-01 class="w-4 h-4" />
-    <span class="text-sm">{{ $t('notes.create', plural) }}</span>
+    <span class="text-default">{{ $t('notes.create', plural) }}</span>
   </UiButton>
 </template>
diff --git a/apps/client/src/modules/notes/components/features/handlers/RemoveNote.vue b/apps/client/src/modules/notes/components/features/handlers/RemoveNote.vue
index d21222ee..1855350c 100644
--- a/apps/client/src/modules/notes/components/features/handlers/RemoveNote.vue
+++ b/apps/client/src/modules/notes/components/features/handlers/RemoveNote.vue
@@ -9,11 +9,11 @@ const emit = defineEmits<{
 <template>
   <UiButton
     variant="ghost"
-    size="sm"
-    class="px-2 !text-red-500"
+    size="default"
+    class="!text-red-500"
     @click="emit('remove')"
   >
     <span i-hugeicons-delete-03 class="w-4 h-4" />
-    <span class="text-sm">{{ $t('notes.remove') }}</span>
+    <span class="text-default">{{ $t('notes.remove') }}</span>
   </UiButton>
 </template>
diff --git a/apps/client/src/modules/notes/components/filters/NotesSort.vue b/apps/client/src/modules/notes/components/filters/NotesSort.vue
index 2853e914..4b698950 100644
--- a/apps/client/src/modules/notes/components/filters/NotesSort.vue
+++ b/apps/client/src/modules/notes/components/filters/NotesSort.vue
@@ -16,7 +16,7 @@ const { sortModel } = useFilteredNotesContext()
 <template>
   <UiSelect v-model:model-value="sortModel">
     <UiSelectTrigger as-child>
-      <UiButton size="sm" variant="dashed" class="gap-0 px-2 focus:ring-0 shadow-sm border fw400">
+      <UiButton size="default" variant="dashed" class="gap-0 focus:ring-0 shadow-sm border fw400">
         <span i-hugeicons-sort-by-down-01 class="w-4 h-4 mr-2 text-neutral-500 dark:text-neutral-400" />
         <span class="text-neutral-600 dark:text-neutral-400 mr-1">
           {{ $t('notes.filters.sort.title') }}
diff --git a/apps/client/src/modules/notes/components/filters/SearchNotes.vue b/apps/client/src/modules/notes/components/filters/SearchNotes.vue
index 316bfdd9..40461239 100644
--- a/apps/client/src/modules/notes/components/filters/SearchNotes.vue
+++ b/apps/client/src/modules/notes/components/filters/SearchNotes.vue
@@ -3,5 +3,5 @@ import { UiInput } from '@/shared/ui'
 </script>
 
 <template>
-  <UiInput :placeholder="$t('notes.filters.search')" class="w-200px 2xl:h-8 focus:ring-0" />
+  <UiInput :placeholder="$t('notes.filters.search')" class="w-200px !h-default focus:ring-0" />
 </template>
diff --git a/apps/client/src/modules/search/components/PanelItems.vue b/apps/client/src/modules/search/components/PanelItems.vue
index 39f15f5b..e2cd5eb9 100644
--- a/apps/client/src/modules/search/components/PanelItems.vue
+++ b/apps/client/src/modules/search/components/PanelItems.vue
@@ -18,7 +18,7 @@ const panelItems = [
       class="flex items-center gap-2 text-neutral-600 dark:text-neutral-400"
     >
       <Icon :icon="item.icon" class="w-3.5 h-3.5" />
-      <span class="text-xs">{{ $t(`search.${item.tPrefix}`) }}</span>
+      <span class="text-small">{{ $t(`search.${item.tPrefix}`) }}</span>
     </div>
   </div>
 </template>
diff --git a/apps/client/src/modules/search/components/SearchBox.vue b/apps/client/src/modules/search/components/SearchBox.vue
index 519d6b2b..f508f918 100644
--- a/apps/client/src/modules/search/components/SearchBox.vue
+++ b/apps/client/src/modules/search/components/SearchBox.vue
@@ -50,7 +50,7 @@ watch([meta_k, ctrl_k], (v) => {
   <UiCommandDialog
     v-model:search="modelSearch"
     v-model:open="open"
-    class="top-1/4 max-w-1/3"
+    class="top-1/4 max-w-1/2"
   >
     <UiCommandInput :placeholder="t('search.placeholder')" />
     <SearchList
diff --git a/apps/client/src/modules/search/components/SearchFilter.vue b/apps/client/src/modules/search/components/SearchFilter.vue
index 6926e45c..aefbc1d5 100644
--- a/apps/client/src/modules/search/components/SearchFilter.vue
+++ b/apps/client/src/modules/search/components/SearchFilter.vue
@@ -26,7 +26,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         variant="outline"
         class="px-1 py-0 text-xs gap-[1px] text-neutral-600 bg-neutral-50 dark:(bg-neutral-800 text-neutral-200)"
       >
-        <span class="text-[10px]">
+        <span class="text-10px">
           {{ content }}
         </span>
       </UiBadge>
@@ -34,11 +34,11 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
     <UiButton
       :variant="isExpanded ? 'outline' : 'ghost'"
       size="sm"
-      class="w-full justify-start rounded-8px px-2 !bg-white dark:(!bg-#262626 border-neutral-600/20) focus:ring-0 custom-btn-transition bg-transition"
+      class="w-full justify-start rounded-lg px-2 !bg-white dark:(!bg-#262626 border-neutral-600/20) focus:ring-0 custom-btn-transition bg-transition"
       :class="[
         isExpanded
           ? 'hover:!bg-neutral-100/10 dark:hover:!bg-neutral-600/30'
-          : 'shadow-none !bg-transparent hover:!bg-neutral-200/35 dark:(hover:!bg-neutral-600/35 !bg-transparent)',
+          : '!bg-transparent hover:!bg-neutral-200/35 dark:(hover:!bg-neutral-600/35 !bg-transparent)',
       ]"
       @click="emit('openModal')"
     >
@@ -47,13 +47,13 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
         class="text-neutral-800 dark:text-neutral-200 2xl:(!w-4 !h-4)"
         :class="[
           isExpanded
-            ? 'mr-1 !w-15px !h-15px'
+            ? '!w-15px !h-15px'
             : 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 !h-16px !w-16px',
         ]"
       />
       <span
         v-if="isExpanded"
-        class="text-13px 2xl:text-sm fw500 text-neutral-700 dark:text-neutral-200 whitespace-nowrap transition-transform duration-250 ease-in-out transform"
+        class="text-default fw500 text-neutral-700 dark:text-neutral-200 whitespace-nowrap transition-transform duration-250 ease-in-out transform"
         :class="isShowFilter ? 'translate-x-0 opacity-100' : '-translate-x-4 opacity-0'"
       >
         {{ $t('sidebar.input') }}
diff --git a/apps/client/src/modules/search/components/SearchItem.vue b/apps/client/src/modules/search/components/SearchItem.vue
index 2aec06be..6b18553e 100644
--- a/apps/client/src/modules/search/components/SearchItem.vue
+++ b/apps/client/src/modules/search/components/SearchItem.vue
@@ -26,7 +26,7 @@ const emits = defineEmits<{
   >
     <div class="flex items-center gap-2">
       <Icon v-if="route.icon" :icon="route.icon" class="w-4 h-4" :style="{ color: route.color }" />
-      <span class="text-sm text-neutral-800 dark:text-neutral-100">{{ route.name }}</span>
+      <span class="text-default text-neutral-800 dark:text-neutral-100">{{ route.name }}</span>
     </div>
     <slot name="ext-icon" />
   </UiCommandItem>
diff --git a/apps/client/src/modules/welcome/__tests__/__snapshots__/AboutSection.spec.ts.snap b/apps/client/src/modules/welcome/__tests__/__snapshots__/AboutSection.spec.ts.snap
index 1ed21b14..bf9f3cb9 100644
--- a/apps/client/src/modules/welcome/__tests__/__snapshots__/AboutSection.spec.ts.snap
+++ b/apps/client/src/modules/welcome/__tests__/__snapshots__/AboutSection.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`tests for AboutSection.vue > should be render correctly 1`] = `
 "<section id="about" class="flex flex-col items-center py-0 px-1 gap-1 my-0 mx-auto max-w-980px max-[520px]:gap-2">
-  <div class="bg-neutral-100 text-neutral-500 flex items-center gap-1 px-2.5 py-0.5 rounded-lg cursor-pointer dark:bg-neutral-700 dark:text-neutral-400 max-[520px]:mb-4 max-[520px]:justify-center"><span style="margin-right: 3px;">✨</span><span class="text-sm">Core: Task Boards, Real-Time Tracking</span><span i-hugeicons-arrow-right-01="" class="ease-in duration-100" style="margin-left: 0px;"></span></div>
+  <div class="bg-neutral-100 text-neutral-500 flex items-center gap-1 px-2.5 py-0.5 rounded-lg cursor-pointer dark:bg-neutral-700 dark:text-neutral-400 max-[520px]:mb-4 max-[520px]:justify-center"><span style="margin-right: 3px;">✨</span><span class="text-default">Core: Task Boards, Real-Time Tracking</span><span i-hugeicons-arrow-right-01="" class="ease-in duration-100" style="margin-left: 0px;"></span></div>
   <h1 class="text-76px leading-tight font-semibold mb-1 text-center tracking-tighter max-[1220px]:text-68px max-[1152px]:text-64px max-[1100px]:text-62px max-[890px]:text-54px max-[680px]:!text-44px">Your path to perfection</h1>
   <p class="text-lg max-w-600px text-center text-neutral-500 dark:text-neutral-400 max-[680px]:max-w-480px max-[680px]:text-base">Jenda is a cloud-based program for efficient collaborative and individual project and task management.</p>
   <div class="flex justify-center items-center gap-4 px-0 py-4 btns">
-    <ui-button-stub variant="default" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
-    <ui-button-stub variant="outline" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+    <ui-button-stub variant="default" size="lg" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+    <ui-button-stub variant="outline" size="lg" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
   </div>
 </section>"
 `;
diff --git a/apps/client/src/modules/welcome/components/sections/AboutSection.vue b/apps/client/src/modules/welcome/components/sections/AboutSection.vue
index 88b87673..54f37194 100644
--- a/apps/client/src/modules/welcome/components/sections/AboutSection.vue
+++ b/apps/client/src/modules/welcome/components/sections/AboutSection.vue
@@ -40,7 +40,7 @@ const arrowMargin = computed(() => {
       @click="redirect('https://github.com/mnenie/jenda')"
     >
       <span style="margin-right: 3px">✨</span>
-      <span class="text-sm">{{ badge }}</span>
+      <span class="text-default">{{ badge }}</span>
       <span
         i-hugeicons-arrow-right-01
         class="ease-in duration-100"
@@ -61,10 +61,11 @@ const arrowMargin = computed(() => {
       {{ $t('welcome.about.description') }}
     </p>
     <div class="flex justify-center items-center gap-4 px-0 py-4 btns">
-      <UiButton @click="$router.push({ name: 'sign-up' })">
+      <UiButton size="lg" @click="$router.push({ name: 'sign-up' })">
         {{ $t('welcome.about.btn') }}
       </UiButton>
       <UiButton
+        size="lg"
         variant="outline"
         @click="redirect('https://github.com/mnenie/jenda')"
       >
diff --git a/apps/client/src/modules/workspace/components/WorkspaceMenu.vue b/apps/client/src/modules/workspace/components/WorkspaceMenu.vue
index c10fdd9a..a8299122 100644
--- a/apps/client/src/modules/workspace/components/WorkspaceMenu.vue
+++ b/apps/client/src/modules/workspace/components/WorkspaceMenu.vue
@@ -42,7 +42,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
       >
         <img :src="workspace.img as string" class="object-cover w-full rounded-lg" />
       </div>
-      <p class="text-neutral-700 dark:text-neutral-300">
+      <p class="text-neutral-700 dark:text-neutral-300 text-13px 2xl:text-sm">
         {{ $t(`workspace.popover.${data}`) }}
       </p>
     </UiButton>
@@ -58,7 +58,7 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
             <p class="text-base !fw600 dark:text-neutral-100">
               {{ workspace.name }}
             </p>
-            <div class="flex items-center gap-0.5">
+            <div class="flex items-center gap-1">
               <UiBadge variant="secondary" class="shadow-none px-1 py-0 text-8px">
                 {{ workspace.plan }}
               </UiBadge>
@@ -79,8 +79,8 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
             <span i-lucide-check class="w-5 h-5 text-blue-500" />
           </div>
         </div>
-        <div class="flex flex-col gap-1">
-          <p class="px-2 text-xs text-neutral-700 dark:text-neutral-300 mb-1">
+        <div class="flex flex-col gap-0">
+          <p class="px-2 text-small text-neutral-500 dark:text-neutral-400 mb-1">
             {{ $t('workspace.popover.section') }}
           </p>
           <ReuseTemplate data="pay" icon="i-lucide-credit-card" @click="$router.push({ name: 'welcome' })" />
diff --git a/apps/client/src/shared/ui/_shortcuts/button.ts b/apps/client/src/shared/ui/_shortcuts/button.ts
index 9aeaa643..f4cf8e1c 100644
--- a/apps/client/src/shared/ui/_shortcuts/button.ts
+++ b/apps/client/src/shared/ui/_shortcuts/button.ts
@@ -1,7 +1,7 @@
 type ButtonPrefix = 'btn'
 
 export const staticBtn: Record<`${ButtonPrefix}-${string}` | ButtonPrefix, string> = {
-  'btn': 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:(outline-none ring-1 ring-neutral-950) disabled:(pointer-events-none opacity-50) [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300',
+  'btn': 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-base 2xl:text-sm font-medium transition-colors focus-visible:(outline-none ring-1 ring-neutral-950) disabled:(pointer-events-none opacity-50) [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 dark:focus-visible:ring-neutral-300',
 
   'btn-default': 'bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/90 dark:(bg-neutral-50 text-neutral-900 hover:bg-neutral-50/90)',
   'btn-secondary': 'bg-neutral-100 text-neutral-900 shadow-sm hover:bg-neutral-100/80 dark:(bg-#2e2e2e text-neutral-50 hover:bg-#2e2e2e/80)',
diff --git a/apps/client/src/shared/ui/_shortcuts/command.ts b/apps/client/src/shared/ui/_shortcuts/command.ts
index 8be2b5f6..3fd86f00 100644
--- a/apps/client/src/shared/ui/_shortcuts/command.ts
+++ b/apps/client/src/shared/ui/_shortcuts/command.ts
@@ -3,14 +3,14 @@ type CommandPrefix = 'command'
 export const staticCommand: Record<`${CommandPrefix}-${string}` | CommandPrefix, string> = {
   'command': 'flex h-full w-full flex-col rounded-md bg-white text-neutral-950 dark:(bg-neutral-800 text-neutral-50)',
   'command-dialog': 'overflow-hidden p-0 shadow-lg',
-  'command-empty': 'py-6 text-center text-sm',
+  'command-empty': 'py-6 text-center text-default',
   'command-group': 'overflow-y-auto overflow-x-hidden p-1 text-neutral-950',
-  'command-group-label': 'px-2 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400',
-  'command-input': 'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:(cursor-not-allowed opacity-50) dark:placeholder:text-neutral-400',
-  'command-item': 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:(bg-neutral-100 text-neutral-900) data-[disabled]:(pointer-events-none opacity-50) dark:data-[highlighted]:(bg-neutral-700/40 text-neutral-50)',
+  'command-group-label': 'px-2 py-1.5 text-small font-medium text-neutral-500 dark:text-neutral-400',
+  'command-input': 'flex h-10 w-full rounded-md bg-transparent py-3 !text-default outline-none placeholder:text-neutral-500 disabled:(cursor-not-allowed opacity-50) dark:placeholder:text-neutral-400',
+  'command-item': 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-default outline-none data-[highlighted]:(bg-neutral-100 text-neutral-900) data-[disabled]:(pointer-events-none opacity-50) dark:data-[highlighted]:(bg-neutral-700/40 text-neutral-50)',
   'command-list': 'max-h-[300px] overflow-y-auto overflow-x-hidden',
   'command-separator': '-mx-1 h-px bg-neutral-200 dark:bg-neutral-700/40',
-  'command-shortcut': 'ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400',
+  'command-shortcut': 'ml-auto text-small tracking-widest text-neutral-500 dark:text-neutral-400',
 }
 
 export const command = [
diff --git a/apps/client/src/shared/ui/_shortcuts/dialog.ts b/apps/client/src/shared/ui/_shortcuts/dialog.ts
index 4d65bc2f..e6c3c19b 100644
--- a/apps/client/src/shared/ui/_shortcuts/dialog.ts
+++ b/apps/client/src/shared/ui/_shortcuts/dialog.ts
@@ -5,7 +5,7 @@ export const staticDialog: Record<`${DialogPrefix}-${string}` | DialogPrefix, st
   'dialog-overlay': 'fixed inset-0 z-999 bg-black/60',
   'dialog-content': 'fixed left-1/2 top-1/2 z-1000 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:(border-neutral-800 bg-neutral-800)',
   'dialog-close': 'absolute right-4 top-3.25 w-4 h-4 flex items-center justify-center rounded-sm opacity-70 ring-offset-0 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 disabled:pointer-events-none dark:(ring-offset-0 focus:ring-0)',
-  'dialog-title': 'text-lg font-semibold leading-none tracking-tight',
+  'dialog-title': 'text-xl 2xl:text-lg font-semibold leading-none tracking-tight',
   'dialog-description': 'text-sm text-neutral-500 dark:text-neutral-400',
   'dialog-footer': 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
   'dialog-header': 'flex flex-col gap-y-1.5 text-center sm:text-left',
diff --git a/apps/client/src/shared/ui/_shortcuts/dropdown-menu.ts b/apps/client/src/shared/ui/_shortcuts/dropdown-menu.ts
index 0c07c2e6..bfb74c52 100644
--- a/apps/client/src/shared/ui/_shortcuts/dropdown-menu.ts
+++ b/apps/client/src/shared/ui/_shortcuts/dropdown-menu.ts
@@ -3,14 +3,14 @@ type DropdownMenuPrefix = 'dropdown-menu'
 export const staticDropdownMenu: Record<`${DropdownMenuPrefix}-${string}` | DropdownMenuPrefix, string> = {
   'dropdown-menu': '',
   'dropdown-menu-content': 'z-1000 min-w-32 overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md dark:(border-neutral-700 bg-neutral-800 text-neutral-50)',
-  'dropdown-menu-checkbox-item': 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:(pointer-events-none opacity-50) dark:(focus:bg-neutral-700/40 focus:text-neutral-50)',
+  'dropdown-menu-checkbox-item': 'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-default outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:(pointer-events-none opacity-50) dark:(focus:bg-neutral-700/40 focus:text-neutral-50)',
   'dropdown-menu-checkbox-item-indicator': 'absolute left-2 flex h-3.5 w-3.5 items-center justify-center',
-  'dropdown-menu-item': 'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:(pointer-events-none opacity-50)  [&>svg]:size-4 [&>svg]:shrink-0 dark:(focus:bg-neutral-700/40 focus:text-neutral-50)',
-  'dropdown-menu-label': 'px-2 py-1.5 text-sm font-semibold',
+  'dropdown-menu-item': 'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-default outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:(pointer-events-none opacity-50)  [&>svg]:size-4 [&>svg]:shrink-0 dark:(focus:bg-neutral-700/40 focus:text-neutral-50)',
+  'dropdown-menu-label': 'px-2 py-1.5 text-default font-semibold',
   'dropdown-menu-separator': '-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-700/40',
   'dropdown-menu-shortcut': 'ml-auto text-xs tracking-widest opacity-60',
   'dropdown-menu-sub-content': 'z-50 min-w-32 overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-lg dark:(border-neutral-700/40 bg-neutral-800 text-neutral-50)',
-  'dropdown-menu-sub-trigger': 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:(focus:bg-neutral-800 data-[state=open]:bg-neutral-800)',
+  'dropdown-menu-sub-trigger': 'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-default outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100 dark:(focus:bg-neutral-800 data-[state=open]:bg-neutral-800)',
   'dropdown-menu-trigger': 'outline-none',
 }
 
diff --git a/apps/client/src/shared/ui/_shortcuts/input.ts b/apps/client/src/shared/ui/_shortcuts/input.ts
index c449e7f3..b1cbf99e 100644
--- a/apps/client/src/shared/ui/_shortcuts/input.ts
+++ b/apps/client/src/shared/ui/_shortcuts/input.ts
@@ -1,7 +1,7 @@
 type InputPrefix = 'input'
 
 export const staticInput: Record<`${InputPrefix}-${string}` | InputPrefix, string> = {
-  input: 'flex h-34px w-full rounded-md border border-solid border-neutral-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:(border-0 bg-transparent text-sm font-medium) placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:(cursor-not-allowed opacity-50) dark:(border-neutral-700 placeholder:text-neutral-400 focus-visible:ring-neutral-300)',
+  input: 'flex h-9 2xl:h-8 w-full rounded-md border border-solid border-neutral-200 bg-transparent px-3 py-1 text-base 2xl:text-sm shadow-sm transition-colors file:(border-0 bg-transparent text-sm font-medium) placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:(cursor-not-allowed opacity-50) dark:(border-neutral-700 placeholder:text-neutral-500 focus-visible:ring-neutral-300)',
 }
 
 export const input = [
diff --git a/apps/client/src/shared/ui/_shortcuts/picker.ts b/apps/client/src/shared/ui/_shortcuts/picker.ts
index 1dcb94c5..fff33212 100644
--- a/apps/client/src/shared/ui/_shortcuts/picker.ts
+++ b/apps/client/src/shared/ui/_shortcuts/picker.ts
@@ -3,7 +3,7 @@ type PickerPrefix = 'picker'
 export const staticPicker: Record<`${PickerPrefix}-${string}` | PickerPrefix, string> = {
   'picker': 'flex flex-wrap gap-1 mt-0',
   'picker-icon': 'h-3.5 w-3.5 rounded object-cover transition-all mr-px cursor-pointer text-neutral-800 dark:text-neutral-100',
-  'picker-input': 'col-span-2 h-8 mt-4 focus:ring-0',
+  'picker-input': 'col-span-2 !text-13px 2xl:!text-sm h-default mt-4 focus:ring-0',
   'picker-tabs': 'w-full',
   'picker-item': 'rounded-md h-6 w-6 cursor-pointer active:scale-105',
 }
diff --git a/apps/client/src/shared/ui/_shortcuts/pin-input.ts b/apps/client/src/shared/ui/_shortcuts/pin-input.ts
index 0116d9bc..5c8f4952 100644
--- a/apps/client/src/shared/ui/_shortcuts/pin-input.ts
+++ b/apps/client/src/shared/ui/_shortcuts/pin-input.ts
@@ -3,7 +3,7 @@ type PinInputPrefix = 'pin-input'
 export const staticPinInput: Record<`${PinInputPrefix}-${string}` | PinInputPrefix, string> = {
   'pin-input': 'flex gap-2 items-center',
   'pin-input-group': 'flex items-center',
-  'pin-input-input': 'relative placeholder:(absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2) align-middle text-center focus:(outline-none ring-2 ring-neutral-950 relative z-10) flex h-9 w-9 items-center justify-center border-y border-r border-neutral-200 text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:(focus:ring-neutral-300 border-neutral-800)',
+  'pin-input-input': 'relative placeholder:(absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2) align-middle text-center focus:(outline-none ring-2 ring-neutral-950 relative z-10) flex h-34px w-34px items-center justify-center border-y border-r border-neutral-200 text-default transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:(focus:ring-neutral-300 border-neutral-800)',
 }
 
 export const pinInput = [
diff --git a/apps/client/src/shared/ui/_shortcuts/select.ts b/apps/client/src/shared/ui/_shortcuts/select.ts
index 53723393..e65d71dd 100644
--- a/apps/client/src/shared/ui/_shortcuts/select.ts
+++ b/apps/client/src/shared/ui/_shortcuts/select.ts
@@ -4,7 +4,7 @@ export const staticSelect: Record<`${SelectPrefix}-${string}` | SelectPrefix, st
   'select': '',
   'select-content': 'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border border-solid border-neutral-200 bg-white text-neutral-950 shadow-md dark:(border-neutral-700/40 bg-neutral-800 text-neutral-50)',
   'select-group': 'p-1 w-full',
-  'select-item': 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:(pointer-events-none opacity-50) dark:(focus:bg-neutral-700/40 focus:text-neutral-50)',
+  'select-item': 'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-default outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:(pointer-events-none opacity-50) dark:(focus:bg-neutral-700/40 focus:text-neutral-50)',
   'select-item-indicator': 'absolute right-2 flex h-3.5 w-3.5 items-center justify-center',
   'select-label': 'px-2 py-1.5 text-sm font-semibold',
   'select-scroll-button': 'flex cursor-default items-center justify-center py-1',
diff --git a/apps/client/src/shared/ui/_shortcuts/table.ts b/apps/client/src/shared/ui/_shortcuts/table.ts
index 70e70b5b..e9ac887f 100644
--- a/apps/client/src/shared/ui/_shortcuts/table.ts
+++ b/apps/client/src/shared/ui/_shortcuts/table.ts
@@ -1,16 +1,16 @@
 type TablePrefix = 'table'
 
 export const staticTable: Record<`${TablePrefix}-${string}` | TablePrefix, string> = {
-  'table': 'w-full caption-bottom text-13px 2xl:text-sm overflow-y-auto',
+  'table': 'w-full caption-bottom text-default overflow-y-auto',
   'table-wrapper': 'relative w-full overflow-x-hidden overflow-y-auto border border-neutral-100 dark:border-neutral-700/50 max-h-[calc(100dvh-160px)] rounded-md',
   'table-body': '[&_tr:last-child]:border-0',
   'table-row': 'border-b border-neutral-100 dark:border-neutral-700/50 transition-colors data-[state=selected]:bg-blue-100 dark:data-[state=selected]:bg-blue-900 cursor-pointer',
-  'table-cell': 'p-2 border-r overflow-x-auto first:border-none last:border-none border-neutral-100  dark:border-neutral-700/50 overflow-hidden text-ellipsis whitespace-nowrap px-8px h-12 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:flex [&>[role=checkbox]]:items-center dark:text-neutral-100',
-  'table-head': 'h-12 px-8px first:pl-12px border-r first:border-none last:border-none border-neutral-100 dark:border-neutral-700/50 text-ellipsis text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:flex [&>[role=checkbox]]:items-center',
+  'table-cell': 'p-2 border-r overflow-x-auto first:pl-12px first:border-none last:border-none border-neutral-100  dark:border-neutral-700/50 overflow-hidden text-ellipsis whitespace-nowrap px-8px h-12 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:flex [&>[role=checkbox]]:items-center dark:text-neutral-100',
+  'table-head': 'h-12 px-2 first:pl-12px border-r first:border-none last:border-none border-neutral-100 dark:border-neutral-700/50 text-ellipsis text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:flex [&>[role=checkbox]]:items-center',
   'table-header': 'sticky top-0 z-33 border-b bg-neutral-50 dark:bg-#2e2e2e',
-  'table-empty': 'flex items-center justify-center text-sm text-neutral-500 dark:text-neutral-400',
-  'table-empty-cell': 'whitespace-nowrap align-middle text-sm text-neutral-950 dark:text-neutral-100',
-  'table-caption': 'mt-4 text-sm text-neutral-500 dark:text-neutral-400',
+  'table-empty': 'flex items-center justify-center text-default py-8px text-neutral-500 dark:text-neutral-400',
+  'table-empty-cell': 'whitespace-nowrap align-middle text-neutral-950 dark:text-neutral-100',
+  'table-caption': 'mt-4 text-default text-neutral-500 dark:text-neutral-400',
 }
 
 export const table = [
diff --git a/apps/client/src/shared/ui/_shortcuts/tabs.ts b/apps/client/src/shared/ui/_shortcuts/tabs.ts
index 5d0b23e5..f13b2549 100644
--- a/apps/client/src/shared/ui/_shortcuts/tabs.ts
+++ b/apps/client/src/shared/ui/_shortcuts/tabs.ts
@@ -4,7 +4,7 @@ export const staticTabs: Record<`${TabsPrefix}-${string}` | TabsPrefix, string>
   'tabs': '',
   'tabs-content': 'focus-visible:outline-none focus-visible:ring-0',
   'tabs-list': 'inline-flex items-center justify-center rounded-lg bg-neutral-100 h-9 2xl:h-8 border border-neutral-100 p-1 text-neutral-500 dark:(border-neutral-700 bg-neutral-800 text-neutral-400)',
-  'tabs-trigger': 'inline-flex items-center bg-transparent justify-center whitespace-nowrap rounded-md px-3 py-1 2xl:(py-0.5 px-2.5) text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:(ring-offset-0 focus-visible:ring-0 data-[state=active]:bg-neutral-700/40 data-[state=active]:text-neutral-100)',
+  'tabs-trigger': 'inline-flex items-center bg-transparent justify-center whitespace-nowrap rounded-md py-0.5 px-1.5 2xl:px-2.5 text-13px 2xl:text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:(ring-offset-0 focus-visible:ring-0 data-[state=active]:bg-neutral-700/40 data-[state=active]:text-neutral-100)',
 }
 
 export const tabs = [
diff --git a/apps/client/src/shared/ui/_shortcuts/tags-input.ts b/apps/client/src/shared/ui/_shortcuts/tags-input.ts
index d5a7dac6..be27ca2f 100644
--- a/apps/client/src/shared/ui/_shortcuts/tags-input.ts
+++ b/apps/client/src/shared/ui/_shortcuts/tags-input.ts
@@ -1,12 +1,12 @@
 type TagsInputPrefix = 'tags-input'
 
 export const staticTagsInput: Record<`${TagsInputPrefix}-${string}` | TagsInputPrefix, string> = {
-  'tags-input': 'flex flex-wrap gap-2 items-center rounded-md border border-neutral-200 px-3 py-1.5 text-sm dark:(border-neutral-700 focus-visible:ring-neutral-300)',
-  'tags-input-input': 'text-sm min-h-5 focus:outline-none flex-1 bg-transparent placeholder:text-neutral-500 dark:placeholder:text-neutral-400',
+  'tags-input': 'flex flex-wrap gap-2 items-center rounded-md border border-neutral-200 px-3 py-1.5 text-default dark:(border-neutral-700 focus-visible:ring-neutral-300)',
+  'tags-input-input': 'text-default h-5.5 2xl:h-6 focus:outline-none flex-1 bg-transparent placeholder:text-neutral-500 dark:placeholder:text-neutral-400',
   'tags-input-item': 'flex h-5 items-center rounded-md ring-offset-0 bg-neutral-100 text-neutral-800 dark:(bg-neutral-700/60 text-neutral-100) data-[state=active]:(ring-0 ring-offset-0)',
   'tags-input-item-delete': 'flex rounded bg-transparent mr-1',
   'tags-input-item-delete-icon': 'h-3.5 w-3.5',
-  'tags-input-item-text': 'py-0.5 px-2 text-sm rounded bg-transparent',
+  'tags-input-item-text': 'py-0.5 px-2 text-default rounded bg-transparent',
 }
 
 export const tagsInput = [
diff --git a/apps/client/src/shared/ui/alert/UiAlert.vue b/apps/client/src/shared/ui/alert/UiAlert.vue
index 5ad8b407..936cb927 100644
--- a/apps/client/src/shared/ui/alert/UiAlert.vue
+++ b/apps/client/src/shared/ui/alert/UiAlert.vue
@@ -30,7 +30,7 @@ const valueOfRightPadding = computed(() => (closable ? '32px' : '10px'))
     :style="{ 'padding-right': valueOfRightPadding }"
   >
     <slot v-if="$slots.default || content">
-      <span class="text-sm">{{ content }}</span>
+      <span class="text-13px 2xl:text-sm">{{ content }}</span>
     </slot>
     <div
       v-if="closable"
diff --git a/apps/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap b/apps/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
index 0880a570..299eb42a 100644
--- a/apps/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
+++ b/apps/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for UiButton > should have content at slot 1`] = `"<primitive-stub aschild="false" as="button" class="btn btn-default h-9 px-4 py-2" disabled="false"></primitive-stub>"`;
+exports[`tests for UiButton > should have content at slot 1`] = `"<primitive-stub aschild="false" as="button" class="btn btn-default h-9 2xl:h-8 rounded-md px-2" disabled="false"></primitive-stub>"`;
diff --git a/apps/client/src/shared/ui/button/index.ts b/apps/client/src/shared/ui/button/index.ts
index 840c2b51..5ee9d1d3 100644
--- a/apps/client/src/shared/ui/button/index.ts
+++ b/apps/client/src/shared/ui/button/index.ts
@@ -15,11 +15,11 @@ export const buttonVariants = cva('btn', {
       dashed: 'btn-dashed',
     },
     size: {
-      default: 'h-9 px-4 py-2',
+      default: 'h-9 2xl:h-8 rounded-md px-2',
       xs: 'h-8 rounded px-2 text-xs rounded-lg',
-      md: 'h-34px rounded-md px-3',
-      sm: 'h-34px 2xl:h-8 rounded-md px-3',
-      lg: 'h-38px rounded-md px-8',
+      md: 'h-9.5 2xl:h-9 rounded-md px-2.5 py-1.5',
+      sm: 'h-9 2xl:h-8 rounded-md px-3',
+      lg: 'h-9 sm:h-10 2xl:h-9 px-4 py-2',
     },
   },
 })
diff --git a/apps/client/src/shared/ui/pagination/__tests__/__snapshots__/UiPagination.spec.ts.snap b/apps/client/src/shared/ui/pagination/__tests__/__snapshots__/UiPagination.spec.ts.snap
index d41039e5..61937707 100644
--- a/apps/client/src/shared/ui/pagination/__tests__/__snapshots__/UiPagination.spec.ts.snap
+++ b/apps/client/src/shared/ui/pagination/__tests__/__snapshots__/UiPagination.spec.ts.snap
@@ -2,13 +2,13 @@
 
 exports[`tests for UiPagination > should render correctly 1`] = `
 "<nav>
-  <div class="flex items-center gap-1"><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" disabled="" aria-label="First Page" type="button">
+  <div class="flex items-center gap-1"><button class="btn btn-outline h-9 2xl:h-8 rounded-md px-3 pagination-item" disabled="" aria-label="First Page" type="button">
       <!--v-if--><span i-lucide-chevrons-left="" class="min-w-3.5"></span>
-    </button><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" disabled="" aria-label="Previous Page" type="button">
+    </button><button class="btn btn-outline h-9 2xl:h-8 rounded-md px-3 pagination-item" disabled="" aria-label="Previous Page" type="button">
       <!--v-if--><span i-lucide-chevron-left="" class="min-w-3.5"></span>
-    </button><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" aria-label="Next Page" type="button">
+    </button><button class="btn btn-outline h-9 2xl:h-8 rounded-md px-3 pagination-item" aria-label="Next Page" type="button">
       <!--v-if--><span i-lucide-chevron-right="" class="min-w-3.5"></span>
-    </button><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" aria-label="Last Page" type="button">
+    </button><button class="btn btn-outline h-9 2xl:h-8 rounded-md px-3 pagination-item" aria-label="Last Page" type="button">
       <!--v-if--><span i-lucide-chevrons-right="" class="min-w-3.5"></span>
     </button></div>
 </nav>"
diff --git a/apps/client/uno.config.ts b/apps/client/uno.config.ts
index efd81269..ea9cd114 100644
--- a/apps/client/uno.config.ts
+++ b/apps/client/uno.config.ts
@@ -48,6 +48,13 @@ export default defineConfig({
       'border-layout': 'border-neutral-200 dark:border-#1c1c1c',
       'bg-sidebar': 'bg-neutral-50 dark:bg-#1c1c1c66',
     },
+    {
+      'font-medium': 'fw430',
+      'text-default': 'text-base 2xl:text-sm',
+      'text-large': 'text-lg 2xl:text-base',
+      'text-small': 'text-sm 2xl:text-xs',
+      'h-default': 'h-9 2xl:h-8',
+    },
   ],
   configDeps: [
     './src/shared/lib/unocss/presets/presetUiKit.ts',