diff --git a/.github/workflows/todos-to-issue.yml b/.github/workflows/todos-to-issue.yml
index 77409f1c..eaee2cc1 100644
--- a/.github/workflows/todos-to-issue.yml
+++ b/.github/workflows/todos-to-issue.yml
@@ -3,9 +3,7 @@ name: Create issues from TODOs
 on:
   push:
     branches:
-      - 'dev'
-      - 'client'
-      - 'server'
+      - dev
 
 jobs:
   todo:
diff --git a/core/client/.storybook/main.ts b/core/client/.storybook/main.ts
index 651a6b2b..b833aaf7 100644
--- a/core/client/.storybook/main.ts
+++ b/core/client/.storybook/main.ts
@@ -14,6 +14,10 @@ const config: StorybookConfig = {
       docgen: 'vue-component-meta',
     },
   },
+  viteFinal: async config => ({
+    ...config,
+    ...(await import('unocss/vite')).default,
+  }),
   staticDirs: ['./-static'],
 }
 export default config
diff --git a/core/client/.storybook/preview.ts b/core/client/.storybook/preview.ts
index 5a64de45..a3e5ccc7 100644
--- a/core/client/.storybook/preview.ts
+++ b/core/client/.storybook/preview.ts
@@ -4,7 +4,8 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { themes } from '@storybook/theming'
 import { useColorMode } from '@vueuse/core'
 
-import '@/app/styles/primary/index.scss'
+import 'virtual:uno.css'
+import '@/app/styles/primary/index.css'
 
 const preview: Preview = {
   decorators: [
diff --git a/core/client/components.json b/core/client/components.json
new file mode 100644
index 00000000..dd561e9e
--- /dev/null
+++ b/core/client/components.json
@@ -0,0 +1,16 @@
+{
+  "style": "new-york",
+  "typescript": true,
+  "tsConfigPath": "./tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "@/app/styles/primary/index.scss",
+    "baseColor": "neutral",
+    "cssVariables": false
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@/shared/ui",
+    "utils": "@/shared/lib/shadcn/utils"
+  }
+}
diff --git a/core/client/package.json b/core/client/package.json
index 97e41050..2fb1283e 100644
--- a/core/client/package.json
+++ b/core/client/package.json
@@ -20,18 +20,23 @@
     "@formkit/auto-animate": "^0.8.2",
     "@noction/hippie-nav": "^0.7.7",
     "@unhead/vue": "^1.9.14",
+    "@unocss/core": "0.65.1",
+    "@unocss/reset": "0.65.1",
     "@vee-validate/zod": "^4.13.1",
     "@vitest/eslint-plugin": "^1.1.7",
-    "@vueuse/core": "^10.11.0",
+    "@vueuse/core": "^10.11.1",
     "@vueuse/integrations": "^10.10.0",
     "axios": "^1.7.2",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
     "floating-vue": "^5.2.2",
-    "lucide-vue-next": "^0.396.0",
     "pinia": "^2.1.7",
+    "radix-vue": "1.9.11",
     "splitpanes": "^3.1.5",
+    "tailwind-merge": "2.5.5",
     "universal-cookie": "^6.1.3",
+    "unocss": "0.65.1",
     "vee-validate": "^4.13.1",
-    "vite-svg-loader": "^5.1.0",
     "vue": "^3.5.8",
     "vue-data-ui": "^2.3.44",
     "vue-i18n": "9",
@@ -43,6 +48,9 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@iconify-json/hugeicons": "1.2.1",
+    "@iconify-json/lucide": "1.2.17",
+    "@iconify/vue": "4.1.2",
     "@mnenie/prettier": "^1.0.4",
     "@rushstack/eslint-patch": "^1.8.0",
     "@storybook/addon-essentials": "^8.1.10",
@@ -74,11 +82,12 @@
     "lint-staged": "^15.2.7",
     "npm-run-all2": "^6.2.0",
     "prettier": "^3.2.5",
-    "sass": "^1.77.6",
     "storybook": "^8.1.10",
     "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "typescript": "~5.4.0",
+    "unocss-preset-animations": "1.1.0",
+    "unocss-preset-shadcn": "0.3.1",
     "vite": "^5.3.1",
     "vite-plugin-vue-devtools": "^7.3.1",
     "vitest": "^1.6.0",
diff --git a/core/client/src/app/App.vue b/core/client/src/app/App.vue
index d07f9783..3fff7af6 100644
--- a/core/client/src/app/App.vue
+++ b/core/client/src/app/App.vue
@@ -21,5 +21,5 @@ const toasterTheme = computed<ToasterTheme>(() => {
       </KeepAlive>
     </RouterView>
   </AppLayout>
-  <Toaster :theme="toasterTheme" position="bottom-right" />
+  <Toaster :theme="toasterTheme" :expand="true" position="bottom-right" />
 </template>
diff --git a/core/client/src/app/index.ts b/core/client/src/app/index.ts
index 6d7e0c63..680f6423 100644
--- a/core/client/src/app/index.ts
+++ b/core/client/src/app/index.ts
@@ -3,15 +3,18 @@ import { createHead } from '@unhead/vue'
 import { vTooltip } from 'floating-vue'
 import { createApp } from 'vue'
 import Vue3Marquee from 'vue3-marquee'
-
 import { VueUiRadar } from 'vue-data-ui'
+
 // @ts-expect-error: unresolved type definitions for vue-writer
 import VueWriter from 'vue-writer'
 import App from './App.vue'
-
 import autoAnimatePlugin from './plugins/formkit'
+
 import { pinia, router } from './providers'
-import './styles/primary/index.scss'
+
+import './styles/primary/index.css'
+import 'virtual:uno.css'
+import '@unocss/reset/tailwind.css'
 import 'floating-vue/dist/style.css'
 import 'vue-data-ui/style.css'
 
diff --git a/core/client/src/app/providers/router/index.ts b/core/client/src/app/providers/router/index.ts
index 09d7688d..2a63ffda 100644
--- a/core/client/src/app/providers/router/index.ts
+++ b/core/client/src/app/providers/router/index.ts
@@ -50,19 +50,6 @@ const routes = [
     name: RouteNames.members,
     path: '/members',
     component: () => import('@/pages/MembersPage.vue'),
-    redirect: { name: `${RouteNames.members}.all` },
-    children: [
-      {
-        name: `${RouteNames.members}.all`,
-        path: '',
-        component: () => import('@/pages/MainTeamPage.vue'),
-      },
-      {
-        name: `${RouteNames.members}.guests`,
-        path: 'guests',
-        component: () => import('@/pages/GuestsPage.vue'),
-      },
-    ],
     meta: {
       requiresAuth: true,
     },
diff --git a/core/client/src/app/styles/mixins/index.scss b/core/client/src/app/styles/mixins/index.scss
deleted file mode 100644
index 0e858266..00000000
--- a/core/client/src/app/styles/mixins/index.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@forward './on-hover';
-@forward './on-focus';
-@forward './on-spin';
-@forward './transition';
diff --git a/core/client/src/app/styles/mixins/on-focus.scss b/core/client/src/app/styles/mixins/on-focus.scss
deleted file mode 100644
index 61edafdd..00000000
--- a/core/client/src/app/styles/mixins/on-focus.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@mixin on-focus {
-  & {
-    &:focus-visible {
-      @content;
-    }
-  }
-}
\ No newline at end of file
diff --git a/core/client/src/app/styles/mixins/on-hover.scss b/core/client/src/app/styles/mixins/on-hover.scss
deleted file mode 100644
index dc3914e4..00000000
--- a/core/client/src/app/styles/mixins/on-hover.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-@mixin on-hover {
-  @media (hover: hover) {
-    &:hover {
-      @content;
-    }
-  }
-}
diff --git a/core/client/src/app/styles/mixins/on-spin.scss b/core/client/src/app/styles/mixins/on-spin.scss
deleted file mode 100644
index 9a895570..00000000
--- a/core/client/src/app/styles/mixins/on-spin.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@mixin on-spin {
-  animation: spin 1s linear infinite;
-}
diff --git a/core/client/src/app/styles/mixins/transition.scss b/core/client/src/app/styles/mixins/transition.scss
deleted file mode 100644
index bc3fbde2..00000000
--- a/core/client/src/app/styles/mixins/transition.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@mixin transition {
-  & {
-    transition-property: color, background-color, text-decoration-color, fill, stroke, opacity;
-  }
-
-  & {
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  & {
-    transition-duration: 150ms;
-  }
-}
\ No newline at end of file
diff --git a/core/client/src/app/styles/primary/_base.scss b/core/client/src/app/styles/primary/_base.css
similarity index 92%
rename from core/client/src/app/styles/primary/_base.scss
rename to core/client/src/app/styles/primary/_base.css
index e1bcccd2..e12d1945 100644
--- a/core/client/src/app/styles/primary/_base.scss
+++ b/core/client/src/app/styles/primary/_base.css
@@ -12,8 +12,8 @@ html {
   text-size-adjust: 100%;
 }
 
-html.dark {
-  background-color: var(--zinc-700);
+.dark {
+  background-color: var(--custom-jenda-dark);
   color-scheme: dark;
 }
 
@@ -26,7 +26,7 @@ body {
   overscroll-behavior: none;
 }
 
-.container {
+.ui-container {
   width: 100%;
   max-width: 1600px;
   margin-right: auto;
@@ -51,4 +51,4 @@ body {
 .dropdown-leave-to {
   opacity: 0;
   transform: translateY(-10px);
-}
\ No newline at end of file
+}
diff --git a/core/client/src/app/styles/primary/_exceptions.scss b/core/client/src/app/styles/primary/_exceptions.css
similarity index 66%
rename from core/client/src/app/styles/primary/_exceptions.scss
rename to core/client/src/app/styles/primary/_exceptions.css
index 427a0231..08e675d8 100644
--- a/core/client/src/app/styles/primary/_exceptions.scss
+++ b/core/client/src/app/styles/primary/_exceptions.css
@@ -1,21 +1,3 @@
-button {
-  cursor: pointer;
-  border: none;
-}
-
-button:disabled, input:disabled {
-  cursor: not-allowed;
-}
-
-ul {
-  list-style: none;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
 .v-popper__inner {
   font-size: 12px;
   padding: 4px 10px !important;
@@ -39,11 +21,11 @@ canvas {
 }
 
 [data-sonner-toaster][data-theme='dark'] {
-  --normal-bg: var(--zinc-700) !important;
+  --normal-bg: var(--custom-jenda-dark) !important;
   --normal-border: hsl(0deg 0% 20%);
   --normal-text: var(--gray1);
   --success-border: hsl(147deg 100% 12%);
-  --info-bg: var(--zinc-700);
+  --info-bg: var(--custom-jenda-dark);
 }
 
 .vue-ui-kpi {
@@ -51,7 +33,7 @@ canvas {
 }
 
 .vue-ui-kpi-value {
-  color: var(--blue-secondary) !important;
+  @apply text-blue-500
 }
 
 .vue-data-ui-fulscreen--off {
@@ -62,8 +44,7 @@ canvas {
 
 html.dark {
   .v-popper__inner {
-    background-color: var(--zinc-600) !important;
-    color: var(--zinc-200) !important;
+    @apply bg-neutral-100 text-neutral-800
   }
 
   .vue-data-ui-fulscreen--off {
diff --git a/core/client/src/app/styles/primary/_families.scss b/core/client/src/app/styles/primary/_families.css
similarity index 100%
rename from core/client/src/app/styles/primary/_families.scss
rename to core/client/src/app/styles/primary/_families.css
diff --git a/core/client/src/app/styles/primary/_fonts.scss b/core/client/src/app/styles/primary/_fonts.css
similarity index 100%
rename from core/client/src/app/styles/primary/_fonts.scss
rename to core/client/src/app/styles/primary/_fonts.css
diff --git a/core/client/src/app/styles/primary/_hippie-nav.css b/core/client/src/app/styles/primary/_hippie-nav.css
new file mode 100644
index 00000000..0419b340
--- /dev/null
+++ b/core/client/src/app/styles/primary/_hippie-nav.css
@@ -0,0 +1,185 @@
+.hippie-nav {
+  @apply box-border;
+}
+
+.search-results ul {
+  @apply p-0;
+}
+
+.search-results .recent-title {
+  @apply px-4 py-2 text-[12px] font-bold opacity-50;
+}
+
+.no-result {
+  @apply flex items-center justify-center px-8 py-10 text-neutral-200 dark:text-neutral-600;
+}
+
+.key-caps {
+  @apply sticky bottom-0 z-60 flex gap-4 items-center justify-start px-4 py-2;
+}
+
+.key-cap-content {
+  @apply flex gap-2 items-center text-[13px];
+}
+
+.key-cap-btn {
+  @apply flex px-2 text-neutral-300 rounded-md;
+}
+
+.key-cap-content span {
+  @apply text-neutral-300;
+}
+
+.modal {
+  @apply fixed inset-0 z-[9999] flex items-start px-36 py-30 bg-black/30;
+}
+
+.modal-content {
+  @apply relative min-w-[560px] max-h-full mx-auto overflow-hidden-auto bg-white rounded-xl shadow-md dark:bg-neutral-800;
+}
+
+.search-panel {
+  @apply sticky top-0 z-60 grid grid-cols-[auto_1fr_auto] gap-4 items-center w-full px-4 py-2;
+}
+
+.search-panel-icon {
+  @apply flex-none h-[15px] text-neutral-500 opacity-50 dark:text-neutral-300;
+}
+
+.search-panel-input {
+  @apply text-[15px] text-neutral-700 placeholder:text-neutral-500 dark:placeholder:text-neutral-300 bg-transparent border-0 outline-none dark:text-neutral-200 mt-px;
+}
+
+.clear-btn {
+  @apply h-[9px] h-[9px] text-neutral-400 bg-transparent border-0 opacity-100 transition-opacity duration-200 flex items-center justify-center dark:text-neutral-300;
+}
+
+.clear-btn:hover {
+  @apply opacity-100;
+}
+
+.hippie-result-item {
+  @apply flex items-center justify-between px-4 py-2 leading-[1.5] cursor-pointer transition duration-75 ease-in text-neutral-700 dark:text-neutral-300;
+}
+
+.hippie-result-item .highlighted {
+  @apply underline decoration-2 underline-offset-2;
+}
+
+.hippie-result-item .title {
+  @apply text-[14px] text-neutral-700 lowercase dark:text-neutral-300;
+}
+
+.hippie-result-item .type-icon {
+  @apply text-[16px] text-neutral-500;
+}
+
+.hippie-result-item .sub-title {
+  @apply text-[12px] opacity-50;
+}
+
+.hippie-result-item.selected {
+  @apply bg-neutral-100 dark:bg-neutral-700/40;
+}
+
+.hippie-result-item.selected > span {
+  @apply text-neutral-600;
+}
+
+.hippie-result-item.selected .type-icon {
+  @apply text-blue-500;
+}
+
+.hippie-result-item.selected .highlighted {
+  @apply text-inherit underline;
+}
+
+.hippie-result-item-content {
+  @apply grid grid-cols-[12px_1fr] gap-4 items-center w-[95%];
+}
+
+.hippie-result-item-content .item-info {
+  @apply flex flex-col;
+}
+
+.hippie-result-item .clear-btn {
+  @apply h-[8px] border-0 opacity-100 transition-opacity duration-200 flex items-center justify-center;
+}
+
+.hippie-result-item .clear-btn:hover {
+  @apply opacity-100;
+}
+
+.hippie-enter-active {
+  animation: fade calc(var(--hippie-animate-duration) / 2);
+}
+
+.hippie-enter-active .modal-content {
+  animation: pulse var(--hippie-animate-duration);
+}
+
+.hippie-leave-active {
+  animation: fade calc(var(--hippie-animate-duration) / 2) reverse;
+}
+
+.hippie-leave-active .modal-content {
+  animation: pulse calc(var(--hippie-animate-duration)) reverse;
+}
+
+.hippie-enter-from,
+.hippie-leave-to {
+  @apply opacity-0;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale3d(0.9, 0.9, 0.9);
+  }
+
+  55% {
+    transform: scale3d(0.98, 0.98, 0.98);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0.75;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.list-enter-active,
+.list-leave-active {
+  @apply transition-all duration-200 ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  @apply opacity-0 translate-x-8;
+}
+
+.hippie-expand-enter-active,
+.hippie-expand-leave-active {
+  @apply overflow-hidden transition-all duration-200 ease-in-out delay-100;
+}
+
+.hippie-expand-enter,
+.hippie-expand-leave-to {
+  @apply h-0;
+}
+
+.hippie-expand-enter-from,
+.hippie-expand-leave-to {
+  @apply opacity-0;
+}
diff --git a/core/client/src/app/styles/primary/_hippie-nav.scss b/core/client/src/app/styles/primary/_hippie-nav.scss
deleted file mode 100644
index 98afaf86..00000000
--- a/core/client/src/app/styles/primary/_hippie-nav.scss
+++ /dev/null
@@ -1,336 +0,0 @@
-.hippie-nav {
-  --hippie-animate-duration: 0.225s;
-
-  box-sizing: border-box;
-
-  .search-results {
-    ul {
-      padding: 0;
-    }
-
-    .recent-title {
-      padding: var(--hippie-spacing-s) var(--hippie-spacing-l);
-      font-size: 12px;
-      font-weight: 700;
-      opacity: 0.5;
-    }
-  }
-
-  .no-result {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: var(--hippie-spacing-2xl);
-    color: var(--zinc-200);
-  }
-
-  .key-caps {
-    position: sticky;
-    bottom: 0;
-    z-index: 60;
-    display: flex;
-    column-gap: 1rem;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 10px var(--hippie-spacing-l);
-
-    .key-cap-content {
-      display: flex;
-      column-gap: var(--hippie-spacing-xs);
-      align-items: center;
-      font-size: 13px;
-
-      .key-cap-btn {
-        display: flex;
-        padding: var(--hippie-spacing-xs);
-        color: var(--zinc-300);
-        border-radius: 5px;
-      }
-
-      span {
-        color: var(--zinc-300);
-      }
-    }
-  }
-
-  .modal {
-    position: fixed;
-    inset: 0;
-    z-index: 9999;
-    display: flex;
-    align-items: flex-start;
-    padding: 120px 150px;
-    background-color: #0000004d;
-
-    .modal-content {
-      position: relative;
-      min-width: 560px;
-      min-height: 50px;
-      max-height: 100%;
-      margin: 0 auto;
-      overflow: hidden auto;
-      background-color: var(--hippie-bg-color);
-      border-radius: 1rem;
-      box-shadow:
-        0 1px 3px 0 rgb(0 0 0 / 10%),
-        0 1px 2px -1px rgb(0 0 0 / 10%);
-    }
-  }
-
-  .search-panel {
-    position: sticky;
-    top: 0;
-    z-index: 60;
-    display: grid;
-    grid-template: 1fr / auto 1fr auto;
-    column-gap: var(--hippie-spacing-l);
-    place-content: center center;
-    align-items: center;
-    width: 100%;
-    padding: var(--hippie-spacing-l);
-
-    .search-panel-icon {
-      flex: none;
-      height: 15px;
-      color: var(--zinc-500);
-      opacity: 0.5;
-    }
-
-    .search-panel-input {
-      font-size: 15px;
-      color: var(--zinc-600);
-      background-color: inherit;
-      border: 0;
-      outline: none;
-    }
-
-    .clear-btn {
-      height: 9px;
-      color: var(--zinc-400);
-      background-color: transparent;
-      border: 0;
-      opacity: 0.5;
-      transition: opacity 0.2s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      > * {
-        height: 9px;
-      }
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .hippie-result-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--hippie-spacing-m) var(--hippie-spacing-l);
-    line-height: 1.5;
-    cursor: pointer;
-    transition: 0.07s ease-in;
-    transition-property: background-color;
-    color: var(--zinc-700);
-
-    .highlighted {
-      text-decoration-thickness: 2px;
-      text-underline-offset: 2px;
-    }
-
-    .title {
-      color: var(--zinc-700);
-      text-transform: lowercase;
-    }
-
-    .title {
-      font-size: 14px;
-    }
-
-    .type-icon {
-      font-size: 16px;
-      color: var(--zinc-500);
-    }
-
-    .sub-title {
-      font-size: 12px;
-      opacity: 0.5;
-    }
-
-    &.selected {
-      background-color: var(--zinc-100);
-
-      & > span {
-        color: var(--zinc-600);
-      }
-
-      .type-icon {
-        color: var(--blue-secondary) !important;
-      }
-
-      .highlighted {
-        color: inherit;
-        text-decoration-line: underline;
-      }
-    }
-
-    .hippie-result-item-content {
-      display: grid;
-      grid: 1fr / 12px 1fr;
-      column-gap: var(--hippie-spacing-m);
-      align-items: center;
-      width: 95%;
-
-      .item-info {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-    .clear-btn {
-      height: 8px;
-      color: inherit;
-      background-color: transparent;
-      border: 0;
-      opacity: 0.5;
-      transition: opacity 0.2s;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      > * {
-        height: 8px;
-      }
-
-      &:hover {
-        opacity: 0.75;
-      }
-    }
-  }
-}
-
-.hippie-enter-active {
-  animation: fade calc(var(--hippie-animate-duration) / 2);
-
-  .modal-content {
-    animation: pulse var(--hippie-animate-duration);
-  }
-}
-
-.hippie-leave-active {
-  animation: fade calc(var(--hippie-animate-duration) / 2) reverse;
-
-  .modal-content {
-    animation: pulse calc(var(--hippie-animate-duration)) reverse;
-  }
-}
-
-.hippie-enter-from,
-.hippie-leave-to {
-  opacity: 0;
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  55% {
-    transform: scale3d(0.98, 0.98, 0.98);
-  }
-
-  100% {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes fade {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 0.75;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-
-.list-enter-active,
-.list-leave-active {
-  transition: all 0.2s ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: translateX(30px);
-}
-
-.hippie-expand-enter-active,
-.hippie-expand-leave-active {
-  overflow: hidden;
-  transition:
-    0.2s ease-in-out 0.1s,
-    0.2s ease-in-out;
-  transition-property: height, opacity;
-}
-
-.hippie-expand-enter,
-.hippie-expand-leave-to {
-  height: 0;
-}
-
-.hippie-expand-enter-from,
-.hippie-expand-leave-to {
-  opacity: 0;
-}
-
-html.dark {
-  .hippie-nav {
-    .modal {
-      .modal-content {
-        background-color: var(--zinc-700);
-      }
-    }
-
-    .hippie-result-item.selected {
-      background-color: #323232;
-    }
-
-    .hippie-result-item {
-      color: var(--zinc-300);
-
-      .title {
-        color: var(--zinc-200);
-      }
-
-      .type-icon{
-        color: var(--zinc-300);
-      }
-    }
-
-    .search-panel {
-      .search-panel-icon {
-        color: var(--zinc-200);
-      }
-
-      .search-panel-input {
-        color: var(--zinc-200);
-      }
-
-      .clear-btn {
-        color: var(--zinc-300);
-      }
-    }
-
-    .no-result {
-      color: var(--zinc-500);
-    }
-  }
-}
diff --git a/core/client/src/app/styles/primary/_properties.css b/core/client/src/app/styles/primary/_properties.css
new file mode 100644
index 00000000..5a87ab2c
--- /dev/null
+++ b/core/client/src/app/styles/primary/_properties.css
@@ -0,0 +1,24 @@
+:root {
+  /* priorities */
+  --low-color: 34, 197, 94;
+  --medium-color: 245, 158, 11;
+  --high-color: 239, 68, 68;
+
+  --custom-jenda-dark: rgb(38 38 38);
+
+  /* hippie */
+  --hippie-primary-color: #42b983;
+  --hippie-bg-color: hsl(0deg 0% 100%);
+  --hippie-text-color: hsl(215deg 16% 50%);
+  --hippie-backdrop-color: hsla(215deg 16% 50% / 50%);
+  --hippie-hit-color: hsl(215deg 16% 50%);
+  --hippie-hit-active-color: #fff;
+  --hippie-hit-highlighted-text-color: #42b983;
+  --hippie-footer-color: hsla(215deg 16% 50% / 70%);
+  --hippie-spacing-xs: .25rem;
+  --hippie-spacing-s: .5rem;
+  --hippie-spacing-m: .75rem;
+  --hippie-spacing-l: 1rem;
+  --hippie-spacing-xl: 1.25rem;
+  --hippie-spacing-2xl: 2rem;
+}
diff --git a/core/client/src/app/styles/primary/_properties.scss b/core/client/src/app/styles/primary/_properties.scss
deleted file mode 100644
index 56264baf..00000000
--- a/core/client/src/app/styles/primary/_properties.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-// tw https://tailwindcss.com/docs/customizing-colors
-$zinc-colors: (
-  950: rgb(10 10 10),
-  900: rgb(23 23 23),
-  800: rgb(28 28 28),
-  700: rgb(38 38 38),
-  600: rgb(64 64 64),
-  500: rgb(82 82 82),
-  400: rgb(115 115 115),
-  300: rgb(163 163 163),
-  200: rgb(229 229 229),
-  100: rgb(245 245 245),
-  50: rgb(250 250 250)
-);
-
-:root {
-  @each $key, $value in $zinc-colors {
-    --zinc-#{$key}: #{$value};
-  }
-
-  --destructive: rgb(239 68 68);
-  --purple-main: rgb(136 133 226);
-  --dark-border: rgb(28 28 28);
-  --dark-destructive: rgb(135 34 34);
-
-  // rgb for hover
-  --zinc-rgb-900: 24, 24, 27;
-  --zinc-rgb-800: 28, 28, 28;
-  --zinc-rgb-700: 38, 38, 38;
-  --zinc-rgb-600: 64, 64, 64;
-  --zinc-rgb-300: 163, 163, 163;
-  --zinc-rgb-200: 229, 229, 229;
-  --zinc-rgb-50: 250, 250, 250;
-  --purple-rgb: 136, 133, 226;
-  --dark-rgb-destructive: 135, 34, 34;
-
-  // priorities
-  --low-color: 34, 197, 94;
-  --medium-color: 245, 158, 11;
-  --high-color: 239, 68, 68;
-
-  // hippie
-  --hippie-primary-color: #42b983;
-  --hippie-bg-color: hsl(0deg 0% 100%);
-  --hippie-text-color: hsl(215deg 16% 50%);
-  --hippie-backdrop-color: hsla(215deg 16% 50% / 50%);
-  --hippie-hit-color: hsl(215deg 16% 50%);
-  --hippie-hit-active-color: #fff;
-  --hippie-hit-highlighted-text-color: #42b983;
-  --hippie-footer-color: hsla(215deg 16% 50% / 70%);
-  --hippie-spacing-xs: .25rem;
-  --hippie-spacing-s: .5rem;
-  --hippie-spacing-m: .75rem;
-  --hippie-spacing-l: 1rem;
-  --hippie-spacing-xl: 1.25rem; 
-  --hippie-spacing-2xl: 2rem;
-}
-
-@property --sidebar-bg-color {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #fafafa;
-}
-
-@property --sidebar-text-color {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #26262a;
-}
-
-@property --main-slotted {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #fff;
-}
-
-@property --blue-basic {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #266DF0;
-}
-
-@property --blue-secondary {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: #538bf3;
-}
diff --git a/core/client/src/app/styles/primary/_scrollbar.css b/core/client/src/app/styles/primary/_scrollbar.css
new file mode 100644
index 00000000..178f91d9
--- /dev/null
+++ b/core/client/src/app/styles/primary/_scrollbar.css
@@ -0,0 +1,13 @@
+::-webkit-scrollbar {
+  background-color: transparent;
+  height: 0.6em;
+  width: 0.6em;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-neutral-100 dark:bg-neutral-700/20
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-neutral-300 rounded-xl dark:bg-neutral-700
+}
diff --git a/core/client/src/app/styles/primary/_scrollbar.scss b/core/client/src/app/styles/primary/_scrollbar.scss
deleted file mode 100644
index 38761abc..00000000
--- a/core/client/src/app/styles/primary/_scrollbar.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-::-webkit-scrollbar {
-  background-color: transparent;
-  height: 0.6em;
-  width: 0.6em;
-}
-
-::-webkit-scrollbar-track {
-  background-color: var(--zinc-100);
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 0.6em;
-  background-color: rgba(var(--zinc-rgb-300), 0.5);
-}
-
-html.dark {
-  ::-webkit-scrollbar-track {
-    background-color:  rgba(var(--zinc-rgb-600), 0.2);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--zinc-600)
-  }
-}
diff --git a/core/client/src/app/styles/primary/_themes.scss b/core/client/src/app/styles/primary/_themes.scss
deleted file mode 100644
index 548d2a65..00000000
--- a/core/client/src/app/styles/primary/_themes.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-html.light {
-  --sidebar-bg-color: #fafafa;
-  --sidebar-text-color: #26262a;
-  --sidebar-section-color: #e5e5e5;
-  --main-slotted: #fff;
-  --blue-basic: #266DF0;
-  --blue-secondary: #538BF3;
-}
-
-html.dark {
-  --sidebar-bg-color: #1c1c1c66;
-  --sidebar-text-color: #f5f5f5;
-  --sidebar-section-color: #e5e5e5;
-  --main-slotted: #262626;
-}
diff --git a/core/client/src/app/styles/primary/_typography.scss b/core/client/src/app/styles/primary/_typography.scss
deleted file mode 100644
index c7241cb5..00000000
--- a/core/client/src/app/styles/primary/_typography.scss
+++ /dev/null
@@ -1,333 +0,0 @@
-.heading-1 {
-  font-size: 36px;
-  line-height: 44px;
-  font-weight: 600;
-}
-
-.heading-2 {
-  font-size: 32px;
-  line-height: 40px;
-  font-weight: 600;
-}
-
-.heading-3 {
-  font-size: 28px;
-  line-height: 32px;
-  font-weight: 600;
-}
-
-.heading-4 {
-  font-size: 24px;
-  line-height: 32px;
-  font-weight: 500;
-}
-
-.text-xl {
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 500;
-}
-
-.text-lg {
-  font-size: 18px;
-  line-height: 28px;
-  font-weight: 400;
-}
-
-.text-base {
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 400;
-}
-
-.text-sm {
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 400;
-}
-
-.text-xs {
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 400;
-}
-
-@media screen and (width <= 1440px) {
-  .heading-1 {
-    font-size: 32px;
-    line-height: 40px;
-    font-weight: 600;
-  }
-  
-  .heading-2 {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 600;
-  }
-  
-  .heading-3 {
-    font-size: 26px;
-    line-height: 30px;
-    font-weight: 600;
-  }
-  
-  .heading-4 {
-    font-size: 22px;
-    line-height: 28px;
-    font-weight: 500;
-  }
-  
-  .text-xl {
-    font-size: 20px;
-    line-height: 24px;
-    font-weight: 500;
-  }
-  
-  .text-lg {
-    font-size: 18px;
-    line-height: 26px;
-    font-weight: 400;
-  }
-  
-  .text-base {
-    font-size: 14px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-sm {
-    font-size: 13px;
-    line-height: 18px;
-    font-weight: 400;
-  }
-  
-  .text-xs {
-    font-size: 11px;
-    line-height: 14px;
-    font-weight: 400;
-  }
-}
-
-@media screen and (width <= 1280px) {
-  .heading-1 {
-    font-size: 30px;
-    line-height: 38px;
-    font-weight: 600;
-  }
-  
-  .heading-2 {
-    font-size: 28px;
-    line-height: 34px;
-    font-weight: 600;
-  }
-  
-  .heading-3 {
-    font-size: 24px;
-    line-height: 28px;
-    font-weight: 600;
-  }
-  
-  .heading-4 {
-    font-size: 20px;
-    line-height: 26px;
-    font-weight: 500;
-  }
-  
-  .text-xl {
-    font-size: 18px;
-    line-height: 24px;
-    font-weight: 500;
-  }
-  
-  .text-lg {
-    font-size: 16px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-base {
-    font-size: 14px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-sm {
-    font-size: 13px;
-    line-height: 18px;
-    font-weight: 400;
-  }
-  
-  .text-xs {
-    font-size: 11px;
-    line-height: 14px;
-    font-weight: 400;
-  }
-}
-
-@media screen and (width <= 1160px) {
-  .heading-1 {
-    font-size: 28px;
-    line-height: 38px;
-    font-weight: 600;
-  }
-  
-  .heading-2 {
-    font-size: 26px;
-    line-height: 34px;
-    font-weight: 600;
-  }
-  
-  .heading-3 {
-    font-size: 22px;
-    line-height: 28px;
-    font-weight: 600;
-  }
-  
-  .heading-4 {
-    font-size: 18px;
-    line-height: 26px;
-    font-weight: 500;
-  }
-  
-  .text-xl {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-  }
-  
-  .text-lg {
-    font-size: 16px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-base {
-    font-size: 14px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-sm {
-    font-size: 13px;
-    line-height: 18px;
-    font-weight: 400;
-  }
-  
-  .text-xs {
-    font-size: 10px;
-    line-height: 14px;
-    font-weight: 400;
-  }
-}
-
-@media screen and (width <= 1024px) {
-  .heading-1 {
-    font-size: 26px;
-    line-height: 38px;
-    font-weight: 600;
-  }
-  
-  .heading-2 {
-    font-size: 22px;
-    line-height: 34px;
-    font-weight: 600;
-  }
-  
-  .heading-3 {
-    font-size: 22px;
-    line-height: 28px;
-    font-weight: 600;
-  }
-  
-  .heading-4 {
-    font-size: 18px;
-    line-height: 26px;
-    font-weight: 500;
-  }
-  
-  .text-xl {
-    font-size: 16px;
-    line-height: 24px;
-    font-weight: 500;
-  }
-  
-  .text-lg {
-    font-size: 15px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-base {
-    font-size: 14px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-sm {
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: 400;
-  }
-  
-  .text-xs {
-    font-size: 10px;
-    line-height: 14px;
-    font-weight: 400;
-  }
-}
-
-@media screen and (width <= 420px) {
-  .heading-1 {
-    font-size: 24px;
-    line-height: 38px;
-    font-weight: 600;
-  }
-  
-  .heading-2 {
-    font-size: 20px;
-    line-height: 34px;
-    font-weight: 600;
-  }
-  
-  .heading-3 {
-    font-size: 18px;
-    line-height: 28px;
-    font-weight: 600;
-  }
-  
-  .heading-4 {
-    font-size: 16px;
-    line-height: 26px;
-    font-weight: 500;
-  }
-  
-  .text-xl {
-    font-size: 15px;
-    line-height: 24px;
-    font-weight: 500;
-  }
-  
-  .text-lg {
-    font-size: 14px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-base {
-    font-size: 13px;
-    line-height: 22px;
-    font-weight: 400;
-  }
-  
-  .text-sm {
-    font-size: 12px;
-    line-height: 18px;
-    font-weight: 400;
-  }
-  
-  .text-xs {
-    font-size: 9px;
-    line-height: 14px;
-    font-weight: 400;
-  }
-}
\ No newline at end of file
diff --git a/core/client/src/app/styles/primary/index.css b/core/client/src/app/styles/primary/index.css
new file mode 100644
index 00000000..7f260414
--- /dev/null
+++ b/core/client/src/app/styles/primary/index.css
@@ -0,0 +1,7 @@
+@import './_properties';
+@import './_fonts';
+@import './_base';
+@import './_exceptions';
+@import './_families';
+@import './_scrollbar';
+@import './_hippie-nav';
diff --git a/core/client/src/app/styles/primary/index.scss b/core/client/src/app/styles/primary/index.scss
deleted file mode 100644
index 39076db5..00000000
--- a/core/client/src/app/styles/primary/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use './_properties';
-@use './_fonts';
-@use './_base';
-@use './_themes';
-@use './_typography';
-@use './_exceptions';
-@use './_families';
-@use './_scrollbar';
-@use './hippie-nav';
diff --git a/core/client/src/entities/board/index.ts b/core/client/src/entities/board/index.ts
index 551001f1..116e6686 100644
--- a/core/client/src/entities/board/index.ts
+++ b/core/client/src/entities/board/index.ts
@@ -1,2 +1 @@
 export * from './model'
-export * from './ui'
diff --git a/core/client/src/entities/board/ui/BoardPreviewCard.vue b/core/client/src/entities/board/ui/BoardPreviewCard.vue
deleted file mode 100644
index 24749d85..00000000
--- a/core/client/src/entities/board/ui/BoardPreviewCard.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<script setup lang="ts">
-import type { User } from '@/entities/user/model'
-import type { BoardPreview } from '../model'
-import { UserAvatar } from '@/entities/user'
-import { computed } from 'vue'
-
-defineProps<{
-  board: BoardPreview
-}>()
-
-const userPosition = computed(() => {
-  return (board: BoardPreview, user: User) => {
-    return (board.users.length - 1 - +user._id!) * 12
-  }
-})
-</script>
-
-<template>
-  <div :class="$style.active_board" @click="$router.push('/board/1')">
-    <div :class="$style.text">
-      <p class="text-base" style="font-weight: 500">
-        {{ board.name }}
-      </p>
-      <span class="text-xs">{{ board.description }}</span>
-    </div>
-    <div :class="$style.bottom_part">
-      <span class="text-xs"> {{ $t('boards.card.date_updated') }}: May 2024</span>
-      <div :class="$style.users">
-        <template v-for="user in board.users" :key="user._id">
-          <UserAvatar
-            :class="$style.user"
-            :style="{
-              right: `${userPosition(board, user)}px`,
-              zIndex: userPosition(board, user),
-              border: `1px solid ${user._id === '0' ? 'var(--purple-main)' : 'var(--zinc-300)'}`,
-            }"
-          >
-            <img :src="user.photoUrl" style="width: 100%" />
-          </UserAvatar>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.active_board {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: white;
-  border: 1px solid var(--zinc-200);
-  min-width: 240px;
-  height: 120px;
-  border-radius: 15px;
-  padding: 15px;
-  cursor: pointer;
-
-  .text {
-    & span {
-      color: var(--zinc-500);
-    }
-  }
-
-  .bottom_part {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    width: 100%;
-
-    & > span {
-      color: var(--zinc-500);
-    }
-
-    .users {
-      position: relative;
-      display: flex;
-      align-items: center;
-      height: 20px;
-      width: 20px;
-
-      .user {
-        height: 22px;
-        width: 22px;
-        position: absolute;
-        top: 0;
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .active_board {
-    background-color: rgba(var(--zinc-rgb-600), 0.4);
-    border-color: var(--zinc-600);
-    color: var(--zinc-100);
-
-    .text {
-      & p {
-        color: var(--zinc-100);
-      }
-      & span {
-        color: var(--zinc-200);
-      }
-    }
-
-    .bottom_part {
-      & > span {
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/entities/board/ui/CardItem.vue b/core/client/src/entities/board/ui/CardItem.vue
deleted file mode 100644
index 91c9b892..00000000
--- a/core/client/src/entities/board/ui/CardItem.vue
+++ /dev/null
@@ -1,161 +0,0 @@
-<script setup lang="ts">
-import type { Card } from '../model'
-import { UserAvatar } from '@/entities/user'
-import { UiBadge, UiCard } from '@/shared/ui'
-import { MessagesSquare } from 'lucide-vue-next'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  card: Card
-}>()
-
-const colors = ['low', 'medium', 'high', 'none'] as const
-
-const priority = computed(() => {
-  const index = colors.indexOf(props.card.priority)
-  return index !== -1 && index !== 3 ? `var(--${colors[index]}-color)` : 'white'
-})
-</script>
-
-<template>
-  <UiCard :style="{ backgroundColor: `rgba(${priority}, 0.2)` }" :class="$style.card">
-    <div :class="$style.top">
-      <div :class="$style.name">
-        <span>{{ card.title }}</span>
-      </div>
-      <div v-if="card.tags?.length !== 0" :class="$style.tags">
-        <UiBadge v-for="tag in card.tags" :key="tag._id" variant="secondary" style="width: fit-content">
-          {{ tag.name }}
-        </UiBadge>
-      </div>
-    </div>
-    <div :class="$style.bottom">
-      <div :class="$style.left_container">
-        <span> #{{ card._id }}</span>
-        <div v-if="card.chat" :class="$style.messages">
-          <MessagesSquare :size="14" />
-          <span>{{ card.chatCount }}</span>
-        </div>
-      </div>
-      <div :class="$style.right_container">
-        <div :class="$style.user_container">
-          <UserAvatar v-for="user in card.users" :key="user._id" :class="$style.user">
-            <img :src="user.photoUrl" :alt="user.email" style="width: 100%" />
-          </UserAvatar>
-        </div>
-      </div>
-    </div>
-    <div
-      v-if="card.priority !== 'none'"
-      :style="{ backgroundColor: `rgb(${priority})` }"
-      :class="$style.indicator"
-    />
-  </UiCard>
-</template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.card {
-  cursor: pointer;
-  @include transition;
-  @include on-hover {
-    background-color: var(--zinc-50);
-  }
-
-  .top {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    .tags {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-
-  .name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    & > span {
-      max-width: 200px;
-    }
-  }
-
-  .user_container {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    height: 21px;
-
-    .user {
-      width: 21px;
-      height: 21px;
-    }
-  }
-
-  .indicator {
-    width: 20px;
-    height: 4px;
-    position: absolute;
-    top: 0;
-    right: 10px;
-    border-radius: 0px 0px 4px 4px;
-  }
-
-  .bottom {
-    margin-top: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .left_container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      & > span {
-        color: var(--zinc-400);
-      }
-
-      .messages {
-        display: flex;
-        align-items: center;
-        gap: 1px;
-        color: var(--zinc-400);
-
-        & > span {
-          font-size: 11px;
-        }
-      }
-    }
-
-    .right_container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-  }
-}
-
-:global(html.dark) {
-  .card {
-    background-color: rgba(var(--zinc-rgb-600), 0.4);
-    border-color: var(--zinc-600);
-    color: var(--zinc-100);
-    .bottom {
-      .left_container {
-        & > span {
-          color: var(--zinc-300);
-        }
-        .messages {
-          color: var(--zinc-300);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/entities/board/ui/ColumnItem.vue b/core/client/src/entities/board/ui/ColumnItem.vue
deleted file mode 100644
index 58fc733b..00000000
--- a/core/client/src/entities/board/ui/ColumnItem.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-<script setup lang="ts">
-import type { Column } from '../model'
-import { useDark } from '@vueuse/core'
-import { Ellipsis, Plus } from 'lucide-vue-next'
-import { useI18n } from 'vue-i18n'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-defineProps<{
-  column: Column
-}>()
-
-defineSlots<{
-  content: () => any
-  default: () => any
-}>()
-const isDark = useDark()
-const { t } = useI18n()
-</script>
-
-<template>
-  <div :class="$style.column">
-    <div class="text-sm" :class="$style.top_part" v-bind="$attrs">
-      <div :class="$style.name">
-        <slot />
-        <span>{{ column.cards?.length }}</span>
-      </div>
-      <Ellipsis :size="16" :color="isDark ? 'var(--zinc-300)' : 'var(--zinc-400)'" />
-    </div>
-    <div v-if="column.cards" :class="$style.content">
-      <slot name="content" />
-    </div>
-    <div :class="$style.bottom">
-      <div class="text-sm" :class="$style.add">
-        <Plus :size="16" :color="isDark ? 'var(--zinc-300)' : 'var(--zinc-500)'" />
-        {{ t('kanban.cards.add') }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.column {
-  position: relative;
-  justify-content: space-between;
-  min-width: 260px;
-  width: 260px;
-  max-height: 100%;
-  height: fit-content;
-  overflow-y: auto;
-  border-radius: 12px;
-  background-color: white;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  vertical-align: top;
-  white-space: normal;
-  scroll-margin: 8px;
-
-  .top_part {
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    padding: 0.8rem;
-    border-radius: 12px 12px 0 0;
-    background-color: #f9f9f9;
-    cursor: grab;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: var(--zinc-500);
-    font-weight: 500;
-  }
-
-  .content {
-    padding: 6px;
-
-    & > div {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-    }
-  }
-
-  .name {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    width: 100%;
-
-    .indicator {
-      width: 5px;
-      height: 5px;
-      border-radius: 50%;
-    }
-  }
-
-  .bottom {
-    position: sticky;
-    bottom: 0;
-    left: 0;
-    padding: 0.8rem;
-    border-radius: 0px 0px 12px 12px;
-    background-color: #f9f9f9;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: var(--zinc-400);
-    font-weight: 500;
-
-    .add {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      cursor: pointer;
-    }
-  }
-}
-
-:global(html.dark) {
-  .column {
-    background-color: var(--zinc-700);
-    .top_part,
-    .bottom {
-      background-color: rgba(33, 33, 33, 0.6);
-      color: var(--zinc-200);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts b/core/client/src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts
deleted file mode 100644
index 14bed38b..00000000
--- a/core/client/src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import i18n from '@/shared/lib/i18n'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import BoardPreviewCard from '../BoardPreviewCard.vue'
-import '@/shared/lib/vitest-utils/cookiesI18n-mock'
-
-const mockRouter = {
-  push: vi.fn(),
-  beforeEach: vi.fn(),
-}
-
-describe('tests for BoardPreviewCard.vue', () => {
-  const wrapper = mount(BoardPreviewCard, {
-    global: {
-      plugins: [i18n],
-
-      mocks: {
-        $router: mockRouter,
-      },
-    },
-    props: {
-      board: {
-        _id: '0',
-        name: 'test title',
-        description: 'test description',
-        users: [],
-      },
-    },
-  })
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should correctly works with i18n', () => {
-    const date = wrapper.find('.bottom_part')
-    expect(date.text()).toContain('Updated: May 2024')
-  })
-
-  it('should redirect to "/board/1"', async () => {
-    await wrapper.find('.active_board').trigger('click')
-    expect(mockRouter.push).toHaveBeenCalledTimes(1)
-    expect(mockRouter.push).toHaveBeenCalledWith('/board/1')
-  })
-})
diff --git a/core/client/src/entities/board/ui/__tests__/CardItem.spec.ts b/core/client/src/entities/board/ui/__tests__/CardItem.spec.ts
deleted file mode 100644
index b12292a1..00000000
--- a/core/client/src/entities/board/ui/__tests__/CardItem.spec.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import CardItem from '../CardItem.vue'
-
-describe('tests for CardItem.vue', () => {
-  const wrapper = mount(CardItem, {
-    props: {
-      card: {
-        _id: '0',
-        title: 'Test Card',
-        priority: 'low',
-        users: [],
-        chat: true,
-        chatCount: 2,
-        tags: [{ _id: '0', name: 'test' }],
-      },
-    },
-  })
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should has correct number of tags', () => {
-    const tags = wrapper.findAll('.tags > .badge')
-    expect(tags.length).toBe(1)
-    expect(tags[0].text()).toBe('test')
-  })
-
-  it('should has correct chat counts', () => {
-    const chat = wrapper.find('.messages > span')
-    expect(chat.text()).toBe('2')
-  })
-})
diff --git a/core/client/src/entities/board/ui/__tests__/ColumnItem.spec.ts b/core/client/src/entities/board/ui/__tests__/ColumnItem.spec.ts
deleted file mode 100644
index 204925a2..00000000
--- a/core/client/src/entities/board/ui/__tests__/ColumnItem.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import i18n from '@/shared/lib/i18n'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import ColumnItem from '../ColumnItem.vue'
-import '@/shared/lib/vitest-utils/cookiesI18n-mock'
-
-describe('tests for ColumnItem.vue', () => {
-  const wrapper = mount(ColumnItem, {
-    global: {
-      plugins: [i18n],
-      mocks: {
-        t: (key: string) => {
-          const translations: Record<string, string> = {
-            'kanban.cards.add': 'Add card (test)',
-          }
-          return translations[key]
-        },
-      },
-    },
-    props: {
-      column: {
-        _id: '0',
-        title: 'test',
-        cards: [],
-      },
-    },
-    slots: {
-      default: 'test name of column',
-      content: 'test content',
-    },
-  })
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should correctly works with i18n', () => {
-    const date = wrapper.find('.add')
-    expect(date.text()).toContain('Add card (test)')
-  })
-})
diff --git a/core/client/src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap b/core/client/src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap
deleted file mode 100644
index eed9b73a..00000000
--- a/core/client/src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for BoardPreviewCard.vue > should render correctly 1`] = `
-"<div class="active_board">
-  <div class="text">
-    <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
-  </div>
-  <div class="bottom_part"><span class="text-xs">Updated: May 2024</span>
-    <div class="users"></div>
-  </div>
-</div>"
-`;
diff --git a/core/client/src/entities/board/ui/__tests__/__snapshots__/CardItem.spec.ts.snap b/core/client/src/entities/board/ui/__tests__/__snapshots__/CardItem.spec.ts.snap
deleted file mode 100644
index 607fd4a1..00000000
--- a/core/client/src/entities/board/ui/__tests__/__snapshots__/CardItem.spec.ts.snap
+++ /dev/null
@@ -1,49 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for CardItem > should render correctly 1`] = `
-"<div class="text-sm card card">
-  <div class="top">
-    <div class="name"><span>Test Card</span></div>
-    <div class="tags">
-      <div class="text-xs badge secondary">test</div>
-    </div>
-  </div>
-  <div class="bottom">
-    <div class="left_container"><span> #0</span>
-      <div class="messages"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square-icon">
-          <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path>
-          <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path>
-        </svg><span>2</span></div>
-    </div>
-    <div class="right_container">
-      <div class="user_container"></div>
-    </div>
-  </div>
-  <div class="indicator"></div>
-  <div class="user_container"></div>
-</div>"
-`;
-
-exports[`tests for CardItem.vue > should render correctly 1`] = `
-"<div class="text-sm card card">
-  <div class="top">
-    <div class="name"><span>Test Card</span></div>
-    <div class="tags">
-      <div class="text-xs badge secondary">test</div>
-    </div>
-  </div>
-  <div class="bottom">
-    <div class="left_container"><span> #0</span>
-      <div class="messages"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-messages-square-icon">
-          <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2z"></path>
-          <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path>
-        </svg><span>2</span></div>
-    </div>
-    <div class="right_container">
-      <div class="user_container"></div>
-    </div>
-  </div>
-  <div class="indicator"></div>
-  <div class="user_container"></div>
-</div>"
-`;
diff --git a/core/client/src/entities/board/ui/__tests__/__snapshots__/ColumnItem.spec.ts.snap b/core/client/src/entities/board/ui/__tests__/__snapshots__/ColumnItem.spec.ts.snap
deleted file mode 100644
index bf20550b..00000000
--- a/core/client/src/entities/board/ui/__tests__/__snapshots__/ColumnItem.spec.ts.snap
+++ /dev/null
@@ -1,58 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`test ColumnItem > should render correctly 1`] = `
-"<div class="column">
-  <div class="text-sm top_part">
-    <div class="name">test name of column<span>0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-icon">
-      <circle cx="12" cy="12" r="1"></circle>
-      <circle cx="19" cy="12" r="1"></circle>
-      <circle cx="5" cy="12" r="1"></circle>
-    </svg>
-  </div>
-  <div class="content">test content</div>
-  <div class="bottom">
-    <div class="text-sm add"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
-        <path d="M5 12h14"></path>
-        <path d="M12 5v14"></path>
-      </svg> Add card (test)</div>
-  </div>
-</div>"
-`;
-
-exports[`tests for ColumnItem > should render correctly 1`] = `
-"<div class="column">
-  <div class="text-sm top_part">
-    <div class="name">test name of column<span>0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-icon">
-      <circle cx="12" cy="12" r="1"></circle>
-      <circle cx="19" cy="12" r="1"></circle>
-      <circle cx="5" cy="12" r="1"></circle>
-    </svg>
-  </div>
-  <div class="content">test content</div>
-  <div class="bottom">
-    <div class="text-sm add"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
-        <path d="M5 12h14"></path>
-        <path d="M12 5v14"></path>
-      </svg> Add card (test)</div>
-  </div>
-</div>"
-`;
-
-exports[`tests for ColumnItem.vue > should render correctly 1`] = `
-"<div class="column">
-  <div class="text-sm top_part">
-    <div class="name">test name of column<span>0</span></div><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-icon">
-      <circle cx="12" cy="12" r="1"></circle>
-      <circle cx="19" cy="12" r="1"></circle>
-      <circle cx="5" cy="12" r="1"></circle>
-    </svg>
-  </div>
-  <div class="content">test content</div>
-  <div class="bottom">
-    <div class="text-sm add"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
-        <path d="M5 12h14"></path>
-        <path d="M12 5v14"></path>
-      </svg> Add card (test)</div>
-  </div>
-</div>"
-`;
diff --git a/core/client/src/entities/board/ui/index.ts b/core/client/src/entities/board/ui/index.ts
deleted file mode 100644
index 414f36c2..00000000
--- a/core/client/src/entities/board/ui/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import BoardPreviewCard from './BoardPreviewCard.vue'
-import CardItem from './CardItem.vue'
-import ColumnItem from './ColumnItem.vue'
-
-export { BoardPreviewCard, CardItem, ColumnItem }
diff --git a/core/client/src/entities/chart/ui/ChartItemWrapper.vue b/core/client/src/entities/chart/ui/ChartItemWrapper.vue
index fe34206f..3525a092 100644
--- a/core/client/src/entities/chart/ui/ChartItemWrapper.vue
+++ b/core/client/src/entities/chart/ui/ChartItemWrapper.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Chart } from '../model'
-import { Menu } from '@/shared/assets/icons'
 import { UiBadge } from '@/shared/ui'
 
 defineOptions({
@@ -15,97 +14,27 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="$style.container" :style="{ maxWidth: width, height }">
-    <div :class="$style.top_part">
-      <div :class="$style.title">
+  <div
+    class="flex flex-col items-center border border-solid border-neutral-200 p-3 rounded-md bg-white gap-2.5 h-fit w-full shadow-sm grow
+    dark:border-neutral-700 dark:bg-neutral-700/40"
+    :style="{ maxWidth: width, height }"
+  >
+    <div class="flex items-center justify-evenly w-full mb-2">
+      <div class="flex items-center gap-2.5 w-full">
         <p class="text-sm">
           {{ $t(`analytics.charts.${chart.key}.name`) }}
         </p>
-        <UiBadge variant="secondary" :class="$style.badge">
+        <UiBadge variant="secondary" class="text-neutral-600 bg-neutral-100">
           {{ chart.section }}
         </UiBadge>
       </div>
-      <Menu :class="$style.icon" />
+      <div i-lucide-ellipsis-vertical class="cursor-pointer text-neutral-500 dark:text-neutral-300" />
     </div>
-    <div :class="$style.slot_content">
+    <div class="flex items-center justify-center w-full h-full">
       <slot />
     </div>
-    <span v-if="chart.key === 'users'" class="text-xs">
+    <span v-if="chart.key === 'users'" class="text-xs dark:text-neutral-200">
       {{ $t(`analytics.charts.${chart.key}.description`) }}
     </span>
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  display: flex;
-  border: 1px solid var(--zinc-200);
-  padding: 12px;
-  border-radius: 8px;
-  background-color: white;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  flex-direction: column;
-  align-items: center;
-  height: fit-content;
-  gap: 10px;
-  width: 100%;
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -moz-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  .top_part {
-    display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    width: 100%;
-    margin-bottom: 8px;
-
-    .title {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      width: 100%;
-
-      .badge {
-        color: var(--zinc-500);
-        background-color: var(--zinc-100);
-      }
-    }
-  }
-
-  .icon {
-    color: var(--zinc-400);
-    cursor: pointer;
-  }
-
-  & > span {
-    color: var(--zinc-500);
-  }
-}
-
-.slot_content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-:global(html.dark) {
-  .container {
-    border-color: var(--zinc-600);
-    background-color: rgba(var(--zinc-rgb-600), 0.4);
-    & > span {
-      color: var(--zinc-200);
-    }
-    .icon {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/entities/template/ui/ImportTemplate.vue b/core/client/src/entities/template/ui/ImportTemplate.vue
index f8a560f7..4dc5e8b5 100644
--- a/core/client/src/entities/template/ui/ImportTemplate.vue
+++ b/core/client/src/entities/template/ui/ImportTemplate.vue
@@ -1,13 +1,12 @@
-<script setup lang="ts">
-import { FileImport } from '@/shared/assets/icons'
-</script>
-
 <template>
-  <div :class="$style.container">
-    <FileImport :class="$style.icon" />
-    <p class="text-sm">
+  <div
+    class="flex items-center justify-center flex-col gap-14px mb-25px w-full h-240px bg-neutral-50 border border-dashed border-neutral-200 rounded-md cursor-pointer
+    dark:bg-neutral-700/40 dark:border-neutral-600"
+  >
+    <span i-jenda-custom-file-import class="text-30px text-neutral-600 dark:text-neutral-400" />
+    <p class="text-sm text-neutral-700 dark:text-neutral-200">
       {{ $t('templates.import') }}
-      <span>.json</span>
+      <span class="text-blue-400">.json</span>
     </p>
   </div>
 </template>
diff --git a/core/client/src/entities/template/ui/TemplateItem.vue b/core/client/src/entities/template/ui/TemplateItem.vue
index 5a67b9e7..562da91c 100644
--- a/core/client/src/entities/template/ui/TemplateItem.vue
+++ b/core/client/src/entities/template/ui/TemplateItem.vue
@@ -8,96 +8,36 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="$style.item">
-    <div :class="$style.main_content">
-      <UiBadge variant="outline" style="margin-bottom: 12px">
+  <div
+    class="relative flex flex-col justify-between items-start h-fit w-100% border border-solid border-neutral-200
+    rounded-lg cursor-pointer dark:(bg-neutral-700/40 border-neutral-600)"
+  >
+    <div class="py-2 px-3">
+      <UiBadge
+        variant="outline"
+        class="mb-3 !bg-blue-100 text-blue-500 dark:(!bg-blue-800 !text-blue-100 !border-blue-800)"
+      >
         {{ template.tag }}
       </UiBadge>
-      <div :class="$style.text">
+      <div class="flex flex-col gap-1.5 mb-3">
         <p class="text-sm">
           {{ template.title }}
         </p>
-        <span class="text-xs">{{ template.description }}</span>
+        <span
+          class="text-xs text-neutral-500 overflow-hidden text-ellipsis line-clamp-2 break-words
+          dark:text-neutral-400"
+        >
+          {{ template.description }}
+        </span>
       </div>
-      <div :class="$style.bottom">
-        <span class="text-xs">{{ template.date }}</span>
-        <img v-tooltip.bottom-end="$t('templates.user')" :src="template.user" />
+      <div class="flex items-center w-full justify-between">
+        <span class="text-xs text-neutral-600 dark:text-neutral-300">{{ template.date }}</span>
+        <img
+          v-tooltip.bottom-end="$t('templates.user')"
+          :src="template.user"
+          class="w-5 h-5 rounded-full"
+        />
       </div>
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.item {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: white;
-  border: 1px solid var(--zinc-200);
-  width: 100%;
-  height: fit-content;
-  border-radius: 10px;
-  cursor: pointer;
-  align-items: flex-start;
-  @include transition;
-
-  .main_content {
-    padding: 8px 12px;
-    width: 100%;
-
-    .text {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin-bottom: 12px;
-
-      & > span {
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        word-wrap: break-word;
-      }
-    }
-
-    & span {
-      color: var(--zinc-500);
-    }
-  }
-
-  .bottom {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-
-    & img {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-    }
-  }
-}
-
-:global(html.dark) {
-  .item {
-    background-color: rgba(var(--zinc-rgb-600), 0.4);
-    border-color: var(--zinc-600);
-    &:hover {
-      border-color: var(--zinc-400);
-    }
-    .img_wrapper {
-      border-color: var(--zinc-600);
-    }
-    .main_content {
-      & span {
-        color: var(--zinc-200);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/entities/template/ui/__tests__/__snapshots__/TemplateItem.spec.ts.snap b/core/client/src/entities/template/ui/__tests__/__snapshots__/TemplateItem.spec.ts.snap
index 2687ac1e..6533970c 100644
--- a/core/client/src/entities/template/ui/__tests__/__snapshots__/TemplateItem.spec.ts.snap
+++ b/core/client/src/entities/template/ui/__tests__/__snapshots__/TemplateItem.spec.ts.snap
@@ -1,25 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for TemplateItem.vue  > should render correctly 1`] = `
-"<div class="item">
-  <div class="main_content">
-    <ui-badge-stub variant="outline" style="margin-bottom: 12px;"></ui-badge-stub>
-    <div class="text">
-      <p class="text-sm">Base Kanban</p><span class="text-xs">Create a basic project with "Base Kanban" template</span>
-    </div>
-    <div class="bottom"><span class="text-xs">June 12, 2024</span><img src="https://avatars.githubusercontent.com/u/121057011?v=4"></div>
-  </div>
-</div>"
-`;
-
 exports[`tests for TemplateItem.vue > should render correctly 1`] = `
-"<div class="item">
-  <div class="main_content">
-    <ui-badge-stub variant="outline" style="margin-bottom: 12px;"></ui-badge-stub>
-    <div class="text">
-      <p class="text-sm">Base Kanban</p><span class="text-xs">Create a basic project with "Base Kanban" template</span>
+"<div class="relative flex flex-col justify-between items-start h-fit w-100% border border-solid border-neutral-200 rounded-lg cursor-pointer dark:bg-neutral-700/40 dark:border-neutral-600">
+  <div class="py-2 px-3">
+    <ui-badge-stub class="mb-3 !bg-blue-100 text-blue-500 !dark:bg-blue-800 !dark:text-blue-100 !dark:border-blue-800" variant="outline"></ui-badge-stub>
+    <div class="flex flex-col gap-1.5 mb-3">
+      <p class="text-sm">Base Kanban</p><span class="text-xs text-neutral-500 overflow-hidden text-ellipsis line-clamp-2 break-words dark:text-neutral-400">Create a basic project with "Base Kanban" template</span>
     </div>
-    <div class="bottom"><span class="text-xs">June 12, 2024</span><img src="https://avatars.githubusercontent.com/u/121057011?v=4"></div>
+    <div class="flex items-center w-full justify-between"><span class="text-xs text-neutral-600 dark:text-neutral-300">June 12, 2024</span><img src="https://avatars.githubusercontent.com/u/121057011?v=4" class="w-5 h-5 rounded-full"></div>
   </div>
 </div>"
 `;
diff --git a/core/client/src/entities/user/ui/UserAvatar.vue b/core/client/src/entities/user/ui/UserAvatar.vue
index cc1a8adf..e655f191 100644
--- a/core/client/src/entities/user/ui/UserAvatar.vue
+++ b/core/client/src/entities/user/ui/UserAvatar.vue
@@ -1,21 +1,8 @@
 <template>
-  <div class="text-sm" :class="[$style.avatar]">
+  <div
+    class="flex items-center justify-center h-30px w-30px select-none overflow-hidden text-sm
+  bg-neutral-100 text-neutral-950 rounded-full"
+  >
     <slot />
   </div>
 </template>
-
-<style module lang="scss">
-.avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 30px;
-  width: 30px;
-  user-select: none;
-  overflow: hidden;
-  background-color: var(--zinc-100);
-  color: var(--zinc-950);
-  border-radius: 50%;
-  cursor: pointer;
-}
-</style>
diff --git a/core/client/src/entities/user/ui/__tests__/__snapshots__/UserAvatar.spec.ts.snap b/core/client/src/entities/user/ui/__tests__/__snapshots__/UserAvatar.spec.ts.snap
deleted file mode 100644
index c38e27b4..00000000
--- a/core/client/src/entities/user/ui/__tests__/__snapshots__/UserAvatar.spec.ts.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for UserAvatar.vue > should render correctly 1`] = `"<div class="avatar text-sm">user</div>"`;
diff --git a/core/client/src/features/auth/ui/BgPanel.vue b/core/client/src/features/auth/ui/BgPanel.vue
index 6fda4533..45722985 100644
--- a/core/client/src/features/auth/ui/BgPanel.vue
+++ b/core/client/src/features/auth/ui/BgPanel.vue
@@ -15,20 +15,31 @@ const { width } = useWindowSize()
 </script>
 
 <template>
-  <div v-if="width > 1100" :class="$style.container">
-    <div :class="$style.blocks">
-      <blockquote>
-        <img :src="imgBlockquote" :class="$style.blockquote_img" />
+  <div
+    v-if="width > 1100"
+    class="relative h-full w-full flex items-center justify-center gap-12px overflow-hidden bg-neutral-100 dark:bg-neutral-900
+    max-[1440px]:(py-0 pl-100px pr-80px)"
+  >
+    <div class="relative z-99 flex flex-col gap-24px">
+      <blockquote class="relative z-99 text-28px max-w-42rem dark:text-neutral-100 max-[1280px]:text-24px">
+        <img
+          :src="imgBlockquote"
+          class="absolute top--24px left--40px w-60px z--1"
+        />
         {{ reviews[currentIndex].text }}
       </blockquote>
-      <div :class="$style.avatar_section">
+      <div class="flex items-center gap-12px">
         <img
           src="https://avatars.githubusercontent.com/u/121057011?v=4"
           :alt="reviews[currentIndex].author"
-          :class="$style.avatar_img"
+          class="w-38px h-38px rounded-50%"
         />
-        <div :class="$style.who">
-          <cite class="text-base" :class="[$style.author_name]">{{ reviews[currentIndex].author }}</cite>
+        <div class="flex">
+          <cite
+            class="text-base whitespace-nowrap font-medium not-italic dark:text-neutral-200"
+          >
+            {{ reviews[currentIndex].author }}
+          </cite>
         </div>
       </div>
     </div>
diff --git a/core/client/src/features/auth/ui/GoogleOauth.vue b/core/client/src/features/auth/ui/GoogleOauth.vue
index 13255325..80ec858a 100644
--- a/core/client/src/features/auth/ui/GoogleOauth.vue
+++ b/core/client/src/features/auth/ui/GoogleOauth.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { UiButton } from '@/shared/ui'
-import { Loader2 } from 'lucide-vue-next'
 import { ref } from 'vue'
 import { toast } from 'vue-sonner'
 
@@ -12,24 +11,8 @@ function onGoogleAuth() {
 </script>
 
 <template>
-  <UiButton variant="outline" :disabled="isLoading" @click="onGoogleAuth">
-    <Loader2 v-if="isLoading" :class="$style.loader" />
-    <img src="/icons/google.png" :class="$style.google_img" />
+  <UiButton variant="outline" @click="onGoogleAuth">
+    <img src="/icons/google.png" class="w-4 h-4" />
     Google
   </UiButton>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.google_img {
-  width: 16px;
-  height: 16px;
-}
-
-.loader {
-  height: 16px;
-  width: 16px;
-  @include on-spin;
-}
-</style>
diff --git a/core/client/src/features/auth/ui/PrivacyPolicy.vue b/core/client/src/features/auth/ui/PrivacyPolicy.vue
index aa8a35be..2b7cb984 100644
--- a/core/client/src/features/auth/ui/PrivacyPolicy.vue
+++ b/core/client/src/features/auth/ui/PrivacyPolicy.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { redirect } from '@/shared/lib/helpers'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -14,48 +13,29 @@ const maxWidth = computed(() => {
 </script>
 
 <template>
-  <p class="text-sm" :class="[$style.main_text]">
+  <p
+    class="pt-2.5 text-sm text-center text-neutral-500 my-0 mx-auto select-none dark:text-neutral-400"
+    :style="{ maxWidth }"
+  >
     {{ privacyItems[0] }}
-    <span :class="$style.inside" @click="redirect('https://github.com/mnenie/jenda')">
+    <a
+      href="https://github.com/mnenie/jenda"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="cursor-pointer underline underline-offset-4 duration-100 ease-in
+      hover:text-neutral-900 dark:hover:text-neutral-500"
+    >
       {{ privacyItems[1] }}
-    </span>
+    </a>
     {{ privacyItems[2] }}
-    <span :class="$style.inside" @click="redirect('https://github.com/mnenie/jenda')">
+    <a
+      href="https://github.com/mnenie/jenda"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="cursor-pointer underline underline-offset-4 duration-100 ease-in
+      hover:text-neutral-900 dark:hover:text-neutral-500"
+    >
       {{ privacyItems[3] }}
-    </span>
+    </a>
   </p>
 </template>
-
-<style module lang="scss">
-.main_text {
-  padding: 10px 0px 0px 0px;
-  text-align: center;
-  color: #72717a;
-  max-width: v-bind('maxWidth');
-  margin: 0 auto;
-  user-select: none;
-
-  .inside {
-    cursor: pointer;
-    text-decoration: underline;
-    text-underline-offset: 4px;
-    transition: 0.1s ease-in;
-
-    &:hover {
-      color: var(--zinc-900);
-    }
-  }
-}
-
-:global(html.dark) {
-  .main_text {
-    color: var(--zinc-300);
-
-    .inside {
-      &:hover {
-        color: var(--zinc-400);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/auth/ui/SignInForm.vue b/core/client/src/features/auth/ui/SignInForm.vue
index 95a28b42..52b2765f 100644
--- a/core/client/src/features/auth/ui/SignInForm.vue
+++ b/core/client/src/features/auth/ui/SignInForm.vue
@@ -22,32 +22,49 @@ const onLogin = handleSubmit((values) => {
 
 <template>
   <form @submit.prevent="onLogin">
-    <div :class="$style.form_container">
-      <div :class="$style.form_fields">
-        <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
+    <div class="grid gap-6">
+      <div class="grid gap-4">
+        <div v-auto-animate class="form-field">
+          <label
+            class="form-label"
+            for="email"
+          >
+            {{ $t('authentication.form.email') }}
+          </label>
           <UiInput id="email" v-model="email" placeholder="user@example.com" type="email" />
-          <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
+          <span
+            v-if="errors.email"
+            class="text-xs text-red-500 !fw500"
+          >
+            {{ errors.email }}
+          </span>
         </div>
-        <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
-          <UiInput
-            id="password"
-            v-model="password"
-            placeholder="user_password_example"
-            type="password"
-          />
-          <span v-if="errors.password" class="text-xs">{{ errors.password }}</span>
+        <div v-auto-animate class="form-field">
+          <label
+            class="form-label"
+            for="password"
+          >
+            {{ $t('authentication.form.password') }}
+          </label>
+          <UiInput id="password" v-model="password" placeholder="user_password_example" type="password" />
+          <span
+            v-if="errors.password"
+            class="text-xs text-red-500 !fw500"
+          >
+            {{ errors.password }}
+          </span>
         </div>
       </div>
-      <div :class="$style.choose_block">
-        <UiButton type="submit">
-          <!-- <Loader2 :class="$style.loader" /> -->
+      <div class="grid gap-2">
+        <UiButton>
           {{ $t('authentication.login.btn') }}
         </UiButton>
-        <p class="text-sm" :class="[$style.login]">
+        <p class="text-sm text-center select-none text-neutral-500 dark:text-neutral-300">
           {{ $t('authentication.login.proposal') }}
-          <span :class="$style.login_route" @click="$router.push({ name: RouteNames.registration })">
+          <span
+            class="cursor-pointer underline underline-offset-4 duration-100 ease-in hover:text-neutral-900 dark:hover:text-neutral-400"
+            @click="$router.push({ name: RouteNames.registration })"
+          >
             {{ $t('authentication.login.route') }}
           </span>
         </p>
@@ -55,85 +72,3 @@ const onLogin = handleSubmit((values) => {
     </div>
   </form>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.form_container {
-  display: grid;
-  gap: 24px;
-
-  .form_fields {
-    display: grid;
-    gap: 16px;
-
-    .field {
-      display: grid;
-      justify-items: flex-start;
-      gap: 8px;
-
-      & label {
-        color: var(--zinc-950);
-        font-weight: 500 !important;
-      }
-
-      & span {
-        color: var(--destructive);
-        font-weight: 500 !important;
-      }
-    }
-  }
-
-  .choose_block {
-    display: grid;
-    gap: 8px;
-
-    .loader {
-      margin-right: 8px;
-      height: 16px;
-      width: 16px;
-      @include on-spin;
-    }
-
-    .login {
-      text-align: center;
-      color: var(--zinc-500);
-      user-select: none;
-
-      .login_route {
-        cursor: pointer;
-        text-decoration: underline;
-        text-underline-offset: 4px;
-        transition: 0.1s ease-in;
-
-        &:hover {
-          color: var(--zinc-900);
-        }
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .form_container {
-    .form_fields {
-      .field {
-        & label {
-          color: var(--zinc-200);
-        }
-      }
-    }
-
-    .choose_block {
-      .login {
-        color: var(--zinc-200);
-      }
-      .login_route {
-        &:hover {
-          color: var(--zinc-300);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/auth/ui/SignUpForm.vue b/core/client/src/features/auth/ui/SignUpForm.vue
index 5e886ad9..c90256be 100644
--- a/core/client/src/features/auth/ui/SignUpForm.vue
+++ b/core/client/src/features/auth/ui/SignUpForm.vue
@@ -22,32 +22,49 @@ const onRegistration = handleSubmit((values) => {
 
 <template>
   <form @submit.prevent="onRegistration">
-    <div :class="$style.form_container">
-      <div :class="$style.form_fields">
-        <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
+    <div class="grid gap-6">
+      <div class="grid gap-4">
+        <div v-auto-animate class="form-field">
+          <label
+            class="form-label"
+            for="email"
+          >
+            {{ $t('authentication.form.email') }}
+          </label>
           <UiInput id="email" v-model="email" placeholder="user@example.com" type="email" />
-          <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
+          <span
+            v-if="errors.email"
+            class="text-xs text-red-500 !fw500"
+          >
+            {{ errors.email }}
+          </span>
         </div>
-        <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
-          <UiInput
-            id="password"
-            v-model="password"
-            placeholder="user_password_example"
-            type="password"
-          />
-          <span v-if="errors.password" class="text-xs">{{ errors.password }}</span>
+        <div v-auto-animate class="form-field">
+          <label
+            class="form-label"
+            for="password"
+          >
+            {{ $t('authentication.form.password') }}
+          </label>
+          <UiInput id="password" v-model="password" placeholder="user_password_example" type="password" />
+          <span
+            v-if="errors.password"
+            class="text-xs text-red-500 !fw500"
+          >
+            {{ errors.password }}
+          </span>
         </div>
       </div>
-      <div :class="$style.choose_block">
-        <UiButton type="submit">
-          <!-- <Loader2 :class="$style.loader" /> -->
+      <div class="grid gap-2">
+        <UiButton>
           {{ $t('authentication.registration.btn') }}
         </UiButton>
-        <p class="text-sm" :class="[$style.reg]">
+        <p class="text-sm text-center select-none text-neutral-500 dark:text-neutral-300">
           {{ $t('authentication.registration.proposal') }}
-          <span :class="$style.reg_route" @click="$router.push({ name: RouteNames.login })">
+          <span
+            class="cursor-pointer underline underline-offset-4 duration-100 ease-in hover:text-neutral-900 dark:hover:text-neutral-400"
+            @click="$router.push({ name: RouteNames.login })"
+          >
             {{ $t('authentication.registration.route') }}
           </span>
         </p>
@@ -55,85 +72,3 @@ const onRegistration = handleSubmit((values) => {
     </div>
   </form>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.form_container {
-  display: grid;
-  gap: 24px;
-
-  .form_fields {
-    display: grid;
-    gap: 16px;
-
-    .field {
-      display: grid;
-      justify-items: flex-start;
-      gap: 8px;
-
-      & label {
-        color: var(--zinc-950);
-        font-weight: 500 !important;
-      }
-
-      & span {
-        color: var(--destructive);
-        font-weight: 500 !important;
-      }
-    }
-  }
-
-  .choose_block {
-    display: grid;
-    gap: 8px;
-
-    .loader {
-      margin-right: 8px;
-      height: 16px;
-      width: 16px;
-      @include on-spin;
-    }
-
-    .reg {
-      text-align: center;
-      color: var(--zinc-500);
-      user-select: none;
-
-      .reg_route {
-        cursor: pointer;
-        text-decoration: underline;
-        text-underline-offset: 4px;
-        transition: 0.1s ease-in;
-
-        &:hover {
-          color: var(--zinc-900);
-        }
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .form_container {
-    .form_fields {
-      .field {
-        & label {
-          color: var(--zinc-200);
-        }
-      }
-    }
-
-    .choose_block {
-      .reg {
-        color: var(--zinc-200);
-      }
-      .reg_route {
-        &:hover {
-          color: var(--zinc-300);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/boards/add-board/model/index.ts b/core/client/src/features/boards/add-board/model/index.ts
deleted file mode 100644
index 698c8e52..00000000
--- a/core/client/src/features/boards/add-board/model/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './validation'
diff --git a/core/client/src/features/boards/add-board/model/validation.ts b/core/client/src/features/boards/add-board/model/validation.ts
deleted file mode 100644
index d62f8feb..00000000
--- a/core/client/src/features/boards/add-board/model/validation.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as z from 'zod'
-
-export const validationRules = z.object({
-  name: z
-    .string({ required_error: 'Name is a required field' })
-    .nonempty('Name is a required field'),
-})
diff --git a/core/client/src/features/boards/add-board/ui/CreationBoard.vue b/core/client/src/features/boards/add-board/ui/CreationBoard.vue
deleted file mode 100644
index 72f4deab..00000000
--- a/core/client/src/features/boards/add-board/ui/CreationBoard.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { UiSheet } from '@/shared/ui'
-import { useTemplateRef } from 'vue'
-import FormCreation from './FormCreation.vue'
-
-const sheet = useTemplateRef<InstanceType<typeof UiSheet> | null>('sheet')
-
-function open() {
-  if (sheet.value) {
-    sheet.value.open()
-  }
-}
-</script>
-
-<template>
-  <div :class="$style.creation" @click="open">
-    <span style="font-weight: 500">+ {{ $t('boards.create') }}</span>
-  </div>
-  <UiSheet ref="sheet">
-    <template #header>
-      <p class="text-lg" style="font-weight: 500">
-        {{ $t('sheet.title') }}
-      </p>
-      <span class="text-sm" :class="[$style.desc]">
-        {{ $t('sheet.description') }}
-      </span>
-    </template>
-    <template #default>
-      <FormCreation />
-    </template>
-  </UiSheet>
-</template>
-
-<style module lang="scss">
-.creation {
-  background-color: var(--zinc-100);
-  border: 1px solid var(--zinc-200);
-  min-width: 220px;
-  height: 120px;
-  border-radius: 15px;
-  color: var(--zinc-600);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.desc {
-  color: var(--zinc-500);
-}
-
-:global(html.dark) {
-  .creation {
-    background-color: rgba(var(--zinc-rgb-600), 0.4);
-    border-color: var(--zinc-600);
-    color: var(--zinc-100);
-  }
-  .desc {
-    color: var(--zinc-300);
-  }
-}
-</style>
diff --git a/core/client/src/features/boards/add-board/ui/FormCreation.vue b/core/client/src/features/boards/add-board/ui/FormCreation.vue
deleted file mode 100644
index 5399ef87..00000000
--- a/core/client/src/features/boards/add-board/ui/FormCreation.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import { UiButton, UiInput } from '@/shared/ui'
-import { toTypedSchema } from '@vee-validate/zod'
-import { useField, useForm } from 'vee-validate'
-import { ref } from 'vue'
-import { validationRules } from '../model'
-
-const validationSchema = toTypedSchema(validationRules)
-
-const { handleSubmit, errors } = useForm({
-  validationSchema,
-})
-const { value: name } = useField<string>('name')
-const description = ref('')
-
-const create = handleSubmit((values) => {
-  // create new board
-})
-</script>
-
-<template>
-  <form @submit.prevent="create">
-    <div :class="$style.form_container">
-      <div :class="$style.form_fields">
-        <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="name">{{ $t('sheet.form.name.label') }}</label>
-          <UiInput id="name" v-model="name" :placeholder="$t('sheet.form.name.placeholder')" />
-          <span v-if="errors.name" class="text-xs">{{ errors.name }}</span>
-        </div>
-        <div :class="$style.field">
-          <label class="text-sm" for="description">{{ $t('sheet.form.description.label') }}</label>
-          <UiInput
-            id="description"
-            v-model="description"
-            :placeholder="$t('sheet.form.description.placeholder')"
-          />
-        </div>
-      </div>
-      <UiButton style="width: 100%" type="submit">
-        <!-- <Loader2 :class="$style.loader" /> -->
-        Create Board
-      </UiButton>
-    </div>
-  </form>
-</template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.form_container {
-  display: grid;
-  gap: 24px;
-
-  .form_fields {
-    display: grid;
-    gap: 16px;
-
-    .field {
-      display: grid;
-      justify-items: flex-start;
-      gap: 8px;
-
-      & label {
-        color: var(--zinc-950);
-        font-weight: 500 !important;
-      }
-
-      & span {
-        color: var(--destructive);
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .form_container {
-    .form_fields {
-      .field {
-        & label {
-          color: var(--zinc-200);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/boards/add-board/ui/index.ts b/core/client/src/features/boards/add-board/ui/index.ts
deleted file mode 100644
index ced03fd3..00000000
--- a/core/client/src/features/boards/add-board/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import CreationBoard from './CreationBoard.vue'
-
-export { CreationBoard }
diff --git a/core/client/src/features/boards/filter/ui/FilterBoards.vue b/core/client/src/features/boards/filter/ui/FilterBoards.vue
deleted file mode 100644
index f55eb14d..00000000
--- a/core/client/src/features/boards/filter/ui/FilterBoards.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { UiButton, UiInput } from '@/shared/ui'
-import { useDark } from '@vueuse/core'
-import { ArrowUpDown, History, Search } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
-
-const filter = ref('')
-const isDark = useDark()
-
-const iconColor = computed(() => {
-  return isDark.value ? 'var(--zinc-300)' : 'rgb(82 82 91 / 0.9)'
-})
-</script>
-
-<template>
-  <div :class="$style.items">
-    <div :class="$style.filter_container">
-      <Search :class="$style.icon" :color="iconColor" />
-      <UiInput
-        id="filter"
-        v-model.trim="filter"
-        :placeholder="$t('boards.filter.input')"
-        :class="$style.filter"
-      />
-    </div>
-    <UiButton variant="dashed" style="padding: 0 12px">
-      <ArrowUpDown :size="17" :color="iconColor" />
-      <span>{{ $t('boards.filter.popularity') }}</span>
-    </UiButton>
-    <UiButton variant="dashed" style="padding: 0 12px">
-      <History :size="17" :color="iconColor" />
-    </UiButton>
-  </div>
-</template>
-
-<style module lang="scss">
-.items {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-
-  .filter_container {
-    position: relative;
-    height: 32px;
-
-    .icon {
-      position: absolute;
-      left: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      height: 16px;
-      width: 16px;
-    }
-
-    .filter {
-      padding-left: 32px;
-      padding-right: 40px;
-      width: 100%;
-      height: 32px;
-      font-weight: 500;
-      background-color: white;
-    }
-  }
-}
-
-:global(html.dark) {
-  .items {
-    .filter_container {
-      .filter {
-        background-color: rgba(var(--zinc-rgb-600), 0.4);
-        &::placeholder {
-          color: var(--zinc-200);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/boards/filter/ui/index.ts b/core/client/src/features/boards/filter/ui/index.ts
deleted file mode 100644
index 508e42f4..00000000
--- a/core/client/src/features/boards/filter/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import FilterBoards from './FilterBoards.vue'
-
-export { FilterBoards }
diff --git a/core/client/src/features/boards/index.ts b/core/client/src/features/boards/index.ts
deleted file mode 100644
index 7b1442b0..00000000
--- a/core/client/src/features/boards/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './add-board/ui'
-export * from './filter/ui'
diff --git a/core/client/src/features/filter/ui/HippieNavModal.vue b/core/client/src/features/filter/ui/HippieNavModal.vue
deleted file mode 100644
index e69de29b..00000000
diff --git a/core/client/src/features/filter/ui/SearchFilter.vue b/core/client/src/features/filter/ui/SearchFilter.vue
index 426b3722..058a2af9 100644
--- a/core/client/src/features/filter/ui/SearchFilter.vue
+++ b/core/client/src/features/filter/ui/SearchFilter.vue
@@ -1,130 +1,61 @@
 <script setup lang="ts">
 import { useExpanded } from '@/shared/lib/composables'
 import { UiBadge, UiButton } from '@/shared/ui'
-import { useDark } from '@vueuse/core'
-import { Search } from 'lucide-vue-next'
-import { computed } from 'vue'
+import { createReusableTemplate } from '@vueuse/core'
 
 const emit = defineEmits<{
   (e: 'openModal'): void
 }>()
 
-const isDark = useDark()
-
 const expanded = useExpanded()
 
 const { isExpanded } = expanded.getExpanded()
 
-const iconColor = computed(() => {
-  if (isDark.value) {
-    return !isExpanded.value ? 'var(--zinc-200)' : 'var(--zinc-300)'
-  }
-  else {
-    return !isExpanded.value ? 'var(--zinc-800)' : 'rgb(82 82 91 / 0.9)'
-  }
-})
-
-const expandedFilterStyles = computed<Record<string, string>>(() => ({
-  backgroundColor: isDark.value ? '#262626' : 'rgba(var(--zinc-rgb-200), 0.1)',
-  boxShadow: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
-  border: isDark.value ? '1px solid rgba(var(--zinc-rgb-600), 0.3)' : '',
-}))
-
-const alpha = computed(() => (isExpanded.value ? 0.3 : 0.35))
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
 </script>
 
 <template>
-  <div :class="$style.search_container" :style="{ marginBottom: isExpanded ? '20px' : '19px' }">
+  <div class="relative h-8" :style="{ marginBottom: isExpanded ? '20px' : '19px' }">
     <UiButton
       :variant="isExpanded ? 'outline' : 'ghost'"
-      :class="$style.search_filter"
-      :style="isExpanded ? expandedFilterStyles : null"
+      class="w-full justify-start h-8 rounded-8px px-2 !bg-white dark:(!bg-#262626 border-neutral-600/20)
+      transition-[background-color,padding,width] duration-200 ease"
+      :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)',
+      ]"
       @click="emit('openModal')"
     >
-      <Search :class="[isExpanded ? $style.icon : $style.icon_no_expanded]" :color="iconColor" />
-      <span v-show="isExpanded" class="text-sm">
+      <div
+        i-lucide-search
+        class="text-neutral-800 dark:text-neutral-200"
+        :class="[
+          isExpanded
+            ? 'h-4 w-4 mr-1'
+            : 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 h-4 w-4',
+        ]"
+      />
+      <span v-show="isExpanded" class="text-sm fw500 text-neutral-700 dark:text-neutral-200">
         {{ $t('sidebar.input') }}
       </span>
     </UiButton>
-    <UiBadge
-      variant="secondary"
-      :class="$style.badge"
-      :style="{ top: isExpanded ? '50%' : '20%', right: isExpanded ? '8px' : '-2px' }"
-    >
-      <span>⌘</span>
-      <span>K</span>
-    </UiBadge>
+
+    <DefineTemplate v-slot="{ content }">
+      <UiBadge
+        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]">
+          {{ content }}
+        </span>
+      </UiBadge>
+    </DefineTemplate>
+
+    <div v-if="isExpanded" class="absolute right-2 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
+      <ReuseTemplate content="Ctrl / ⌘" />
+      <ReuseTemplate content="K" />
+    </div>
+    <ReuseTemplate v-else content="⌘K" class="absolute -right-1 top-1 transform -translate-y-1/2 bg-white dark:bg-neutral-800" />
   </div>
 </template>
-
-<style module lang="scss">
-.search_container {
-  position: relative;
-  height: 32px;
-
-  .icon {
-    height: 16px;
-    width: 16px;
-    margin-right: 2px;
-  }
-
-  .icon_no_expanded {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    height: 16px;
-    width: 16px;
-  }
-
-  .search_filter {
-    width: 100%;
-    justify-content: flex-start;
-    height: 32px;
-    padding: 0 8px;
-    border-radius: 8px;
-    transition: justify-content, width, padding 0.2s ease;
-    &:hover {
-      background-color: rgba(var(--zinc-rgb-200), v-bind('alpha')) !important;
-    }
-
-    & > span {
-      font-weight: 500;
-      color: var(--zinc-700);
-    }
-  }
-
-  .badge {
-    position: absolute;
-    height: 16px;
-    transform: translateY(-50%);
-    padding-left: 4px;
-    padding-right: 4px;
-    & span {
-      color: var(--zinc-500);
-      font-size: 10px;
-      &:first-child {
-        margin-right: 2px;
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .search_container {
-    .search_filter {
-      &:hover {
-        background-color: rgba(var(--zinc-rgb-600), 0.3) !important;
-      }
-      & > span {
-        color: var(--zinc-200);
-      }
-    }
-    .badge {
-      & span {
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/kanban/model/index.ts b/core/client/src/features/kanban/model/index.ts
deleted file mode 100644
index 698c8e52..00000000
--- a/core/client/src/features/kanban/model/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './validation'
diff --git a/core/client/src/features/kanban/model/validation.ts b/core/client/src/features/kanban/model/validation.ts
deleted file mode 100644
index 65f39201..00000000
--- a/core/client/src/features/kanban/model/validation.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as z from 'zod'
-
-export const validationColumnRules = z.object({
-  name: z
-    .string({ required_error: 'Name is a required field' })
-    .nonempty('Name is a required field'),
-})
diff --git a/core/client/src/features/kanban/ui/ChangeName.vue b/core/client/src/features/kanban/ui/ChangeName.vue
deleted file mode 100644
index 0a30794d..00000000
--- a/core/client/src/features/kanban/ui/ChangeName.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { UiBadge, UiInput } from '@/shared/ui'
-import { useDark } from '@vueuse/core'
-import { Check } from 'lucide-vue-next'
-import { computed } from 'vue'
-
-const props = defineProps<{
-  name: string
-  projColor: string
-  colors: readonly string[]
-}>()
-
-const emits = defineEmits<{
-  (e: 'updateColor', color: string): void
-}>()
-
-const isDark = useDark()
-const modelName = defineModel<string>()
-
-const isCurrentColor = computed(() => {
-  return (color: string) => props.projColor === color
-})
-</script>
-
-<template>
-  <div :class="$style.about">
-    <div :class="$style.name">
-      <div :class="$style.indicator_bg" :style="{ backgroundColor: projColor }">
-        S
-      </div>
-      <UiInput v-model="modelName" placeholder="name ?" :class="$style.input" />
-      <UiBadge :variant="isDark ? 'default' : 'default'">
-        free
-      </UiBadge>
-    </div>
-    <div :class="$style.colors">
-      <div
-        v-for="(color, index) in colors"
-        :key="index"
-        :class="$style.color"
-        :style="{ backgroundColor: color }"
-        @click="emits('updateColor', color)"
-      >
-        <Check v-if="isCurrentColor(color)" :size="14" color="white" />
-      </div>
-    </div>
-  </div>
-  <p class="text-sm" :class="[$style.desc]">
-    {{ $t('kanban.configuration.name') }}
-  </p>
-</template>
-
-<style module lang="scss">
-.about {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 15px;
-
-  .name {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-
-    .indicator_bg {
-      min-width: 30px;
-      min-height: 30px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--zinc-50);
-    }
-
-    .input {
-      padding: 0;
-      background-color: transparent;
-      box-shadow: none;
-      border: none;
-      max-width: 80px;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      font-size: 22px;
-
-      &::placeholder {
-        font-size: 14px;
-      }
-    }
-  }
-
-  .colors {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    .color {
-      width: 20px;
-      height: 20px;
-      border-radius: 20%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-    }
-  }
-}
-
-.desc {
-  color: var(--zinc-500);
-  margin: 10px 0;
-}
-
-:global(html.dark) {
-  .desc {
-    color: var(--zinc-300);
-  }
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/ChooseStatus.vue b/core/client/src/features/kanban/ui/ChooseStatus.vue
deleted file mode 100644
index b36b8388..00000000
--- a/core/client/src/features/kanban/ui/ChooseStatus.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script setup lang="ts">
-import type { StatusBadge } from '@/entities/board'
-import { computed } from 'vue'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-const props = defineProps<{
-  statuses: StatusBadge[]
-  projStatus: StatusBadge['status']
-}>()
-
-const emits = defineEmits<{
-  (e: 'updateStatus', status: StatusBadge['status']): void
-}>()
-
-const activeStatus = computed(() => {
-  return (s: string) => {
-    return props.projStatus === s && [s, true]
-  }
-})
-</script>
-
-<template>
-  <div :class="$style.badges">
-    <div
-      v-for="b in statuses"
-      v-bind="$attrs"
-      :key="b._id"
-      :class="[$style.badge, { [$style.active]: activeStatus(b.status) }]"
-      @click="emits('updateStatus', b.status)"
-    >
-      <div :class="$style.indicator" :style="{ backgroundColor: b.indicator }" />
-      <span class="text-sm">{{ b.status }}</span>
-    </div>
-  </div>
-  <p class="text-sm" :class="[$style.status_p]">
-    {{ $t('kanban.configuration.status') }}
-  </p>
-</template>
-
-<style module lang="scss">
-.badges {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-
-  .badge {
-    position: relative;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    height: 20px;
-    padding: 5px 10px;
-    background: var(--zinc-100);
-    border: 1px solid var(--zinc-200);
-    border-radius: 4px;
-    cursor: pointer;
-
-    .indicator {
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-    }
-  }
-
-  .active {
-    border: 1px solid var(--zinc-300);
-  }
-}
-
-.status_p {
-  color: var(--zinc-500);
-  margin: 10px 0;
-}
-
-:global(html.dark) {
-  .status_p {
-    color: var(--zinc-300);
-  }
-  .badges {
-    .badge {
-      background-color: var(--zinc-600);
-      border: 1px solid var(--zinc-600);
-    }
-    .active {
-      border: 1px solid var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/DragCards.vue b/core/client/src/features/kanban/ui/DragCards.vue
deleted file mode 100644
index 5688aa15..00000000
--- a/core/client/src/features/kanban/ui/DragCards.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script setup lang="ts">
-import type { Card } from '@/entities/board'
-import { CardItem } from '@/entities/board'
-import { ref, useCssModule } from 'vue'
-import Draggable from 'vuedraggable'
-
-defineProps<{
-  cards: Card[]
-}>()
-
-const style = useCssModule()
-
-const drag = ref(false)
-const dragOptions = ref({
-  animation: 200,
-  disabled: false,
-  ghostClass: style.ghost,
-})
-</script>
-
-<template>
-  <Draggable
-    :list="cards"
-    group="list"
-    :component-data="{
-      tag: 'ul',
-      name: 'flip-cards',
-      type: 'transition',
-    }"
-    v-bind="dragOptions"
-    :force-fallback="true"
-    item-key="_id"
-    @start="drag = true"
-    @end="drag = false"
-  >
-    <template #item="{ element: card }">
-      <div :key="card._id">
-        <CardItem :card :class="{ [$style.dragging]: drag }" />
-      </div>
-    </template>
-  </Draggable>
-</template>
-
-<style module lang="scss">
-.dragging {
-  cursor: grabbing;
-}
-
-.flip-cards-move {
-  transition: transform 0.5s;
-}
-
-.no-move {
-  transition: transform 0s;
-}
-
-.ghost {
-  opacity: 0.3;
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/DragColumns.vue b/core/client/src/features/kanban/ui/DragColumns.vue
deleted file mode 100644
index 4782af21..00000000
--- a/core/client/src/features/kanban/ui/DragColumns.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import type { Column } from '@/entities/board'
-import { ColumnItem } from '@/entities/board'
-import { ref, useCssModule } from 'vue'
-import Draggable from 'vuedraggable'
-
-defineProps<{
-  columns: Column[]
-}>()
-
-const style = useCssModule()
-
-const dragOptions = ref({
-  animation: 200,
-  disabled: false,
-  handle: '.draggable',
-  ghostClass: style.ghost,
-})
-</script>
-
-<template>
-  <Draggable
-    :list="columns"
-    :component-data="{
-      tag: 'ul',
-      name: 'flip-list',
-      type: 'transition',
-    }"
-    v-bind="dragOptions"
-    :force-fallback="true"
-    :class="$style.columns"
-    item-key="_id"
-  >
-    <template #item="{ element: column }">
-      <div :key="column._id">
-        <ColumnItem :column class="draggable">
-          {{ column.title }}
-          <template #content>
-            <slot :cards="column.cards" />
-          </template>
-        </ColumnItem>
-      </div>
-    </template>
-  </Draggable>
-</template>
-
-<style module lang="scss">
-.columns {
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  gap: 15px;
-  max-height: 100%;
-}
-
-.flip-list-move {
-  transition: transform 0.3s;
-}
-
-.no-move {
-  transition: transform 0s;
-}
-
-.ghost {
-  opacity: 0.2;
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/FilterTasks.vue b/core/client/src/features/kanban/ui/FilterTasks.vue
deleted file mode 100644
index 25c9dfcb..00000000
--- a/core/client/src/features/kanban/ui/FilterTasks.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { UiSelect } from '@/shared/ui'
-import { useLocalStorage } from '@vueuse/core'
-import { computed, reactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t, locale } = useI18n()
-
-const filterStore = useLocalStorage('kanban-sort-condition', 'all')
-const options = reactive([
-  { name: `📄 ${t('kanban.sorting.all')}`, value: 'all' },
-  { name: `💬 ${t('kanban.sorting.activity')}`, value: 'activity' },
-  { name: `👥 ${t('kanban.sorting.workload')}`, value: 'workload' },
-])
-
-const filter = computed({
-  get() {
-    const selected = options.find(option => option.value === filterStore.value)
-    return selected && selected.name
-  },
-  set(newValue) {
-    const selected = options.find(option => option.name === newValue)
-    if (selected) {
-      filterStore.value = selected.value
-    }
-  },
-})
-const width = computed(() => (locale.value === 'ru-RU' ? '172px' : '166px'))
-</script>
-
-<template>
-  <UiSelect v-model="filter" :options="options" :class="$style.filter_tasks" />
-</template>
-
-<style module lang="scss">
-.filter_tasks {
-  position: relative;
-  height: 30px;
-  width: v-bind('width');
-  border: 1px dashed var(--zinc-200);
-}
-
-:global(html.dark) {
-  .filter_tasks {
-    border: 1px dashed var(--zinc-600);
-    background-color: transparent;
-  }
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/RemoveBoard.vue b/core/client/src/features/kanban/ui/RemoveBoard.vue
deleted file mode 100644
index 797bdd2d..00000000
--- a/core/client/src/features/kanban/ui/RemoveBoard.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { UiButton } from '@/shared/ui'
-import { Trash2 } from 'lucide-vue-next'
-</script>
-
-<template>
-  <UiButton variant="dashed" size="sm" :class="$style.trash">
-    <Trash2 :size="16" />
-  </UiButton>
-</template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.trash {
-  height: 30px;
-  gap: 8px;
-
-  & > svg {
-    color: var(--zinc-500);
-  }
-  @include transition;
-
-  @include on-hover {
-    & > svg {
-      color: var(--destructive) !important;
-    }
-  }
-}
-
-:global(html.dark) {
-  .trash {
-    background-color: transparent;
-    & > svg {
-      color: var(--zinc-300);
-    }
-    @include on-hover {
-      background-color: transparent;
-      border-color: var(--zinc-500);
-      & > svg {
-        color: var(--dark-destructive) !important;
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/UpdateBoard.vue b/core/client/src/features/kanban/ui/UpdateBoard.vue
deleted file mode 100644
index 14752fe7..00000000
--- a/core/client/src/features/kanban/ui/UpdateBoard.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { UiButton } from '@/shared/ui'
-import { useI18n } from 'vue-i18n'
-
-const emits = defineEmits<{
-  (e: 'apply'): void
-  (e: 'clear'): void
-}>()
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <div :class="$style.btns">
-    <UiButton variant="default" :class="$style.apply_btn" @click="emits('apply')">
-      {{ t('kanban.configuration.update') }}
-    </UiButton>
-    <UiButton variant="destructive" @click="emits('clear')">
-      {{ t('kanban.configuration.clear') }}
-    </UiButton>
-  </div>
-</template>
-
-<style module lang="scss">
-.btns {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 18px;
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/add-column/AddColumn.vue b/core/client/src/features/kanban/ui/add-column/AddColumn.vue
deleted file mode 100644
index 42d20453..00000000
--- a/core/client/src/features/kanban/ui/add-column/AddColumn.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { UiSheet } from '@/shared/ui'
-import { useDark } from '@vueuse/core'
-import { Plus } from 'lucide-vue-next'
-import { useTemplateRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-import FormCreation from './FormCreation.vue'
-
-const isDark = useDark()
-const { t } = useI18n()
-
-const sheetColumn = useTemplateRef<InstanceType<typeof UiSheet> | null>('sheet')
-
-function open() {
-  if (sheetColumn.value) {
-    sheetColumn.value.open()
-  }
-}
-</script>
-
-<template>
-  <div class="text-sm" :class="$style.block" @click="open">
-    <Plus :size="16" :color="isDark ? 'var(--zinc-300)' : 'var(--zinc-500)'" />
-    {{ t('kanban.new') }}
-  </div>
-  <UiSheet ref="sheet">
-    <template #header>
-      <p class="text-lg" style="font-weight: 500">
-        {{ t('kanban.sheet.column.title') }}
-      </p>
-      <span class="text-sm" :class="[$style.desc]">
-        {{ t('kanban.sheet.column.description') }}
-      </span>
-    </template>
-    <template #default>
-      <FormCreation />
-    </template>
-  </UiSheet>
-</template>
-
-<style module lang="scss">
-.block {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--zinc-600);
-  background-color: #f9f9f9;
-  cursor: pointer;
-  min-width: 260px;
-  width: 260px;
-  height: fit-content;
-  border-radius: 12px;
-  padding: 0.7rem 0.8rem;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  font-weight: 500;
-}
-
-.desc {
-  color: var(--zinc-500);
-}
-
-:global(html.dark) {
-  .block {
-    background-color: rgba(33, 33, 33, 0.6);
-    color: var(--zinc-200);
-  }
-  .desc {
-    color: var(--zinc-300);
-  }
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/add-column/FormCreation.vue b/core/client/src/features/kanban/ui/add-column/FormCreation.vue
deleted file mode 100644
index 0ee1fcc0..00000000
--- a/core/client/src/features/kanban/ui/add-column/FormCreation.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { UiButton, UiInput } from '@/shared/ui'
-import { toTypedSchema } from '@vee-validate/zod'
-import { useField, useForm } from 'vee-validate'
-import { useI18n } from 'vue-i18n'
-import { validationColumnRules } from '../../model'
-
-const validationSchema = toTypedSchema(validationColumnRules)
-const { t } = useI18n()
-
-const { handleSubmit, errors } = useForm({
-  validationSchema,
-})
-const { value: name } = useField<string>('name')
-
-const createColumn = handleSubmit((values) => {
-  // create new column
-})
-</script>
-
-<template>
-  <form @submit.prevent="createColumn">
-    <div :class="$style.form_container">
-      <div v-auto-animate :class="$style.field">
-        <label class="text-sm" for="name">{{ t('kanban.sheet.column.form.label') }}</label>
-        <UiInput id="name" v-model="name" :placeholder="t('kanban.sheet.column.form.placeholder')" />
-        <span v-if="errors.name" class="text-xs">{{ errors.name }}</span>
-      </div>
-      <UiButton style="width: 100%" type="submit">
-        {{ t('kanban.sheet.column.form.submit') }}
-      </UiButton>
-    </div>
-  </form>
-</template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.form_container {
-  display: grid;
-  gap: 24px;
-
-  .field {
-    display: grid;
-    justify-items: flex-start;
-    gap: 8px;
-
-    & label {
-      color: var(--zinc-950);
-      font-weight: 500 !important;
-    }
-
-    & span {
-      color: var(--destructive);
-    }
-  }
-}
-
-:global(html.dark) {
-  .form_container {
-    .field {
-      & label {
-        color: var(--zinc-200);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/kanban/ui/add-column/index.ts b/core/client/src/features/kanban/ui/add-column/index.ts
deleted file mode 100644
index ad1df480..00000000
--- a/core/client/src/features/kanban/ui/add-column/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import AddColumn from './AddColumn.vue'
-
-export { AddColumn }
diff --git a/core/client/src/features/kanban/ui/index.ts b/core/client/src/features/kanban/ui/index.ts
deleted file mode 100644
index e8df734a..00000000
--- a/core/client/src/features/kanban/ui/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AddColumn } from './add-column'
-import ChangeName from './ChangeName.vue'
-import ChooseStatus from './ChooseStatus.vue'
-import DragCards from './DragCards.vue'
-import DragColumns from './DragColumns.vue'
-import FilterTasks from './FilterTasks.vue'
-import RemoveBoard from './RemoveBoard.vue'
-import UpdateBoard from './UpdateBoard.vue'
-
-export {
-  AddColumn,
-  ChangeName,
-  ChooseStatus,
-  DragCards,
-  DragColumns,
-  FilterTasks,
-  RemoveBoard,
-  UpdateBoard,
-}
diff --git a/core/client/src/features/kanban/index.ts b/core/client/src/features/layout/index.ts
similarity index 100%
rename from core/client/src/features/kanban/index.ts
rename to core/client/src/features/layout/index.ts
diff --git a/core/client/src/features/layout/ui/LanguageSelect.vue b/core/client/src/features/layout/ui/LanguageSelect.vue
new file mode 100644
index 00000000..9f165e2d
--- /dev/null
+++ b/core/client/src/features/layout/ui/LanguageSelect.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useLanguage } from '@/shared/lib/composables'
+import { cn } from '@/shared/lib/shadcn/utils'
+import { buttonVariants, UiButton } from '@/shared/ui/button'
+import { UiSelect, UiSelectContent, UiSelectItem, UiSelectTrigger } from '@/shared/ui/select'
+import { computed, reactive, ref } from 'vue'
+
+const locales = reactive([
+  { value: 'en-US', name: 'EN' },
+  { value: 'ru-RU', name: 'RU' },
+  { value: 'zh-CN', name: 'ZH' },
+])
+
+const language = ref('')
+const i18nLanguage = computed(() => locales.find(item => item.value === language.value)?.name || language.value)
+
+const { setLanguage } = useLanguage(locales, language)
+</script>
+
+<template>
+  <UiSelect
+    v-model:model-value="language"
+    :class="cn(buttonVariants({ variant: 'outline' }), 'appearance-none bg-transparent font-normal')"
+    @update:model-value="setLanguage($event)"
+  >
+    <UiSelectTrigger class="w-fit border-none shadow-none bg-none focus:ring-0 focus:outline-none ring-0 ring-offset-0" as-child>
+      <UiButton
+        variant="ghost"
+        size="sm"
+        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>
+      </UiButton>
+    </UiSelectTrigger>
+    <UiSelectContent class="w-fit min-w-2" align="center">
+      <UiSelectItem
+        v-for="item in locales"
+        :key="item.value"
+        :value="item.value"
+        class="text-sm justify-center w-full px-0"
+      >
+        {{ item.name }}
+      </UiSelectItem>
+    </UiSelectContent>
+  </UiSelect>
+</template>
diff --git a/core/client/src/features/layout/ui/ThemeSwitcher.vue b/core/client/src/features/layout/ui/ThemeSwitcher.vue
new file mode 100644
index 00000000..2c562c4c
--- /dev/null
+++ b/core/client/src/features/layout/ui/ThemeSwitcher.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { UiButton } from '@/shared/ui'
+import { useDark, useToggle } from '@vueuse/core'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+</script>
+
+<template>
+  <UiButton
+    variant="ghost"
+    size="sm"
+    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 />
+  </UiButton>
+</template>
diff --git a/core/client/src/features/layout/ui/index.ts b/core/client/src/features/layout/ui/index.ts
new file mode 100644
index 00000000..d2582440
--- /dev/null
+++ b/core/client/src/features/layout/ui/index.ts
@@ -0,0 +1,4 @@
+import LanguageSelect from './LanguageSelect.vue'
+import ThemeSwitcher from './ThemeSwitcher.vue'
+
+export { LanguageSelect, ThemeSwitcher }
diff --git a/core/client/src/features/members/leave-team/index.ts b/core/client/src/features/members/leave-team/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/features/members/leave-team/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/features/members/leave-team/ui/LeaveButton.vue b/core/client/src/features/members/leave-team/ui/LeaveButton.vue
deleted file mode 100644
index 67fa84a9..00000000
--- a/core/client/src/features/members/leave-team/ui/LeaveButton.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import { RouteNames } from '@/shared/config/consts'
-import { UiButton } from '@/shared/ui'
-import { X } from 'lucide-vue-next'
-import { useRouter } from 'vue-router'
-import { toast } from 'vue-sonner'
-
-const router = useRouter()
-
-function leaveTeam() {
-  toast.info('You left the team', {
-    description: 'Find suitable or become an admin of new team',
-  })
-  router.push({ name: RouteNames.boards })
-}
-</script>
-
-<template>
-  <UiButton variant="destructive" @click="leaveTeam">
-    <X :size="17" />
-    {{ $t('members.btns.leave') }}...
-  </UiButton>
-</template>
diff --git a/core/client/src/features/members/leave-team/ui/index.ts b/core/client/src/features/members/leave-team/ui/index.ts
deleted file mode 100644
index 5d3b784b..00000000
--- a/core/client/src/features/members/leave-team/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import LeaveButton from './LeaveButton.vue'
-
-export { LeaveButton }
diff --git a/core/client/src/features/menu/model/fixtures/index.ts b/core/client/src/features/menu/model/fixtures/index.ts
deleted file mode 100644
index 45467d07..00000000
--- a/core/client/src/features/menu/model/fixtures/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './menu'
diff --git a/core/client/src/features/menu/model/fixtures/menu.ts b/core/client/src/features/menu/model/fixtures/menu.ts
deleted file mode 100644
index 4cf703a7..00000000
--- a/core/client/src/features/menu/model/fixtures/menu.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Link, SectionItem } from '../types'
-
-export const links: Link[] = [
-  { url: 'https://github.com/mnenie/jenda' },
-  { url: 'https://t.me/youngjuicycashrussia' },
-]
-
-export const items: SectionItem[] = [
-  {
-    icon: '✨',
-    urlPrefix: 'about',
-  },
-  {
-    icon: '🧑‍💻',
-    urlPrefix: 'kanban',
-  },
-  {
-    icon: '👥',
-    urlPrefix: 'collaborative',
-  },
-  {
-    icon: '🌐',
-    urlPrefix: 'members',
-  },
-  {
-    icon: '👔',
-    urlPrefix: 'activity',
-  },
-  {
-    icon: '💬',
-    urlPrefix: 'activity',
-  },
-]
diff --git a/core/client/src/features/menu/model/types.ts b/core/client/src/features/menu/model/types.ts
deleted file mode 100644
index 7b74b126..00000000
--- a/core/client/src/features/menu/model/types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export interface SectionItem {
-  title?: string
-  description?: string
-  icon: string
-  urlPrefix:
-    | 'kanban'
-    | 'about'
-    | 'collaborative'
-    | 'activity'
-    | 'members'
-    | 'chats'
-}
-
-export interface Link {
-  title?: string
-  url: string
-}
diff --git a/core/client/src/features/menu/ui/BurgerMenu.vue b/core/client/src/features/menu/ui/BurgerMenu.vue
deleted file mode 100644
index e0291f8f..00000000
--- a/core/client/src/features/menu/ui/BurgerMenu.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<script setup lang="ts">
-import type { Link, SectionItem } from '../model/types'
-import { useScroll } from '@/shared/lib/composables'
-import { redirect } from '@/shared/lib/helpers'
-import { ArrowUpRight, Bookmark, Menu, X } from 'lucide-vue-next'
-import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { items as _items, links as _links } from '../model/fixtures'
-
-const isOpen = ref(false)
-
-watch(isOpen, (newVal) => {
-  document.body.style.overflow = newVal ? 'hidden' : ''
-})
-
-const { tm } = useI18n()
-
-const items = computed(() => {
-  const _arr = tm('welcome.mobile.section_blocks') as Omit<SectionItem[], 'icon' | 'urlPrefix'>
-  return _items.map((item, i) => ({
-    ...item,
-    title: _arr[i].title,
-    description: _arr[i].description,
-  }))
-})
-
-const links = computed(() => {
-  const _arr = tm('welcome.mobile.links') as Omit<Link[], 'url'>
-  return _links.map((link, i) => ({
-    ...link,
-    title: _arr[i].title,
-  }))
-})
-
-const { scrollToEl } = useScroll(items.value.map(i => i.urlPrefix))
-</script>
-
-<template>
-  <Teleport to="body">
-    <div v-if="isOpen" :class="[$style.overlay]" @click="isOpen = false" />
-    <div :class="[$style.menu, isOpen ? $style.menu_opened : '']">
-      <div :class="$style.container">
-        <div v-for="(link, index) in links" :key="index" :class="$style.link" @click="redirect(link.url)">
-          <p class="text-lg">
-            {{ link.title }}
-          </p>
-          <ArrowUpRight :class="$style.icon_inside" :size="18" />
-        </div>
-        <div :class="$style.sections">
-          <div
-            v-for="(i, index) in items"
-            :key="index"
-            :class="$style.section_block"
-            @click="(isOpen = false), scrollToEl(i.urlPrefix)"
-          >
-            <div :class="$style.top_part">
-              <span class="heading-3">{{ i.icon }}</span>
-              <Bookmark :class="$style.icon_inside" :size="18" />
-            </div>
-            <div :class="$style.about">
-              <h4 class="heading-3">
-                {{ i.title }}
-              </h4>
-              <p class="text-base">
-                {{ i.description }}
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </Teleport>
-  <Menu v-show="!isOpen" :class="$style.icon" @click="isOpen = true" />
-  <X v-show="isOpen" :class="$style.icon" @click="isOpen = false" />
-</template>
-
-<style module lang="scss">
-.icon {
-  color: var(--zinc-600);
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100dvh;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 998;
-  transition: opacity 250ms ease-in-out;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100dvh;
-  padding: 76px 16px 32px;
-  background: #fff;
-  z-index: 10;
-  transform: translateY(-100%);
-  transition:
-    transform 300ms,
-    opacity 300ms;
-  opacity: 0;
-  animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
-  pointer-events: none;
-  overflow-y: auto;
-
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-
-    .link {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 20px 16px;
-      border-radius: 8px;
-      background: var(--zinc-50);
-      border: 0.5px solid transparent;
-      -webkit-transition: 0.1s ease all;
-      transition: 0.1s ease all;
-      cursor: pointer;
-    }
-
-    .sections {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(calc(33% - 8px), 1fr));
-      grid-gap: 10px;
-      margin-top: 2px;
-
-      .section_block {
-        display: flex;
-        flex-direction: column;
-        min-height: 160px;
-        padding: 16px;
-        border-radius: 8px;
-        background: var(--zinc-50);
-
-        .top_part {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-        }
-
-        .about {
-          margin-top: auto;
-
-          & > h3 {
-            margin-bottom: 3px;
-          }
-
-          & > p {
-            color: var(--zinc-700);
-          }
-        }
-      }
-    }
-
-    .icon_inside {
-      color: var(--zinc-300);
-    }
-  }
-}
-
-.menu_opened {
-  transform: translateY(0);
-  opacity: 1;
-  pointer-events: all;
-}
-
-.menu_opened + .overlay {
-  opacity: 1;
-  pointer-events: all;
-}
-
-:global(html.dark) {
-  .icon {
-    color: var(--zinc-200);
-  }
-  .menu {
-    background: var(--zinc-700);
-    .link {
-      background: var(--zinc-600);
-    }
-    .sections {
-      .section_block {
-        background: var(--zinc-600);
-        .about {
-          & > h3 {
-            color: var(--zinc-200);
-          }
-          & > p {
-            color: var(--zinc-300);
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .menu {
-    .container {
-      .sections {
-        grid-template-columns: 100%;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 420px) {
-  .menu {
-    .container {
-      .sections {
-        .section_block {
-          min-height: 100px;
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/menu/ui/index.ts b/core/client/src/features/menu/ui/index.ts
index a740ef5b..c4e090f7 100644
--- a/core/client/src/features/menu/ui/index.ts
+++ b/core/client/src/features/menu/ui/index.ts
@@ -1,3 +1,3 @@
-import BurgerMenu from './BurgerMenu.vue'
+import BurgerMenu from '../../../widgets/layout/ui/header/BurgerMenu.vue'
 
 export { BurgerMenu }
diff --git a/core/client/src/features/plan/ui/PlanCard.vue b/core/client/src/features/plan/ui/PlanCard.vue
index ba616a68..9459e2c3 100644
--- a/core/client/src/features/plan/ui/PlanCard.vue
+++ b/core/client/src/features/plan/ui/PlanCard.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Plan } from '@/shared/assets/icons'
 import { UiBadge, UiButton } from '@/shared/ui'
 import { createReusableTemplate, refDebounced } from '@vueuse/core'
 import { computed, toRef } from 'vue'
@@ -20,111 +19,42 @@ const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
 </script>
 
 <template>
-  <DefineTemplate v-slot="{ style, position }">
+  <DefineTemplate v-slot="{ twClass, position }">
     <span
       v-tooltip="{
         content: $t('sidebar.plan.tooltip'),
         triggers: ['hover'],
         placement: position,
       }"
-      :class="style"
+      :class="twClass"
     >
       *
     </span>
   </DefineTemplate>
-  <div v-if="isShowPlan" :class="$style.card">
-    <div :class="$style.content">
-      <p class="text-sm">
+  <div
+    v-if="isShowPlan"
+    class="relative p-3 bg-neutral-100 border border-solid border-neutral-200 rounded-md
+    dark:bg-neutral-700/10 dark:border-neutral-700"
+  >
+    <div class="flex flex-col gap-1.5">
+      <p class="text-sm !fw500">
         {{ $t('sidebar.plan.title') }}
-        <ReuseTemplate position="top" :style="$style.reusable_helping_sign" />
+        <ReuseTemplate position="top" tw-class="text-blue-500 cursor-help" />
       </p>
-      <span class="text-xs"> {{ $t('sidebar.plan.description') }}</span>
-      <UiButton size="sm" :class="$style.btn">
+      <span class="text-xs text-neutral-700 dark:text-neutral-300"> {{ $t('sidebar.plan.description') }}</span>
+      <UiButton size="sm" variant="outline" class="text-xs mt-1">
         {{ $t('sidebar.plan.btn') }}
       </UiButton>
     </div>
   </div>
-  <div v-else :class="$style.none_expanded_card">
-    <ReuseTemplate position="right" />
+  <div v-else class="relative w-full flex flex-col items-center">
+    <ReuseTemplate position="right" tw-class="absolute top--6px right--4px text-blue-500 cursor-help" />
 
-    <UiBadge variant="outline" :class="$style.badge">
-      <div>
-        <Plan />
-        1/3
+    <UiBadge variant="outline" class="w-10 px-1">
+      <div class="flex items-center gap-0.5">
+        <div i-lucide-stars />
+        <span class="!text-10px text-neutral-800 !fw500 dark:text-neutral-300">1/3</span>
       </div>
     </UiBadge>
   </div>
 </template>
-
-<style module lang="scss">
-.card {
-  position: relative;
-  padding: 12px;
-  background-color: var(--zinc-100);
-  border: 1px solid var(--zinc-200);
-  border-radius: 4px;
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-
-    & > p {
-      font-weight: 500 !important;
-    }
-
-    .btn {
-      font-size: 12px;
-      margin-top: 8px;
-    }
-  }
-}
-
-.reusable_helping_sign {
-  color: var(--blue-basic);
-  cursor: help;
-}
-
-.none_expanded_card {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .badge {
-    font-size: 10px;
-    width: 40px;
-
-    & > div {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-    }
-  }
-
-  & > span {
-    position: absolute;
-    color: var(--blue-basic);
-    cursor: help;
-    top: -6px;
-    right: -4px;
-  }
-}
-
-:global(html.dark) {
-  .card {
-    background-color: var(--zinc-700);
-    border-color: var(--zinc-700);
-
-    .content {
-      & > p {
-        color: var(--zinc-100);
-      }
-      & > span {
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/settings/index.ts b/core/client/src/features/settings/index.ts
deleted file mode 100644
index 77a91836..00000000
--- a/core/client/src/features/settings/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './lang-switcher'
-export * from './theme-switcher'
diff --git a/core/client/src/features/settings/lang-switcher/index.ts b/core/client/src/features/settings/lang-switcher/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/features/settings/lang-switcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/features/settings/lang-switcher/ui/LanguageSwitcher.vue b/core/client/src/features/settings/lang-switcher/ui/LanguageSwitcher.vue
deleted file mode 100644
index 2be10699..00000000
--- a/core/client/src/features/settings/lang-switcher/ui/LanguageSwitcher.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-import type { Options } from '@/shared/ui/select/types'
-import { useLanguage } from '@/shared/lib/composables'
-import { UiSelect } from '@/shared/ui'
-import { ref, shallowReactive } from 'vue'
-
-const options = shallowReactive<Options[]>([
-  { name: 'English', value: 'en-US' },
-  { name: 'Русский', value: 'ru-RU' },
-  { name: '简体中文', value: 'zh-CN' },
-])
-const language = ref('')
-
-useLanguage(options, language)
-</script>
-
-<template>
-  <UiSelect v-model="language" :options />
-</template>
diff --git a/core/client/src/features/settings/lang-switcher/ui/__tests__/LanguageSwitcher.spec.ts b/core/client/src/features/settings/lang-switcher/ui/__tests__/LanguageSwitcher.spec.ts
deleted file mode 100644
index 4bae74fe..00000000
--- a/core/client/src/features/settings/lang-switcher/ui/__tests__/LanguageSwitcher.spec.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useLanguage } from '@/shared/lib/composables'
-import i18n from '@/shared/lib/i18n'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { nextTick, ref, shallowReactive } from 'vue'
-import { useI18n } from 'vue-i18n'
-import LanguageSwitcher from '../LanguageSwitcher.vue'
-import '@/shared/lib/vitest-utils/cookiesI18n-mock'
-
-vi.mock('vue-i18n', async (importOriginal) => {
-  const actual = await importOriginal()
-  return {
-    ...(actual as unknown as object),
-    useI18n: () => ({
-      locale: ref('en-US'),
-    }),
-  }
-})
-
-describe('tests for LanguageSwitcher.vue', () => {
-  const wrapper = mount(LanguageSwitcher, {
-    global: {
-      plugins: [i18n],
-    },
-  })
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-  it('should render subcomponents', () => {
-    expect(wrapper.findComponent({ name: 'UiSelect' }).exists()).toBe(true)
-  })
-})
-
-describe('useLanguage composable tests', () => {
-  // mocks
-  const options = shallowReactive([
-    { name: 'English', value: 'en-US' },
-    { name: 'Русский', value: 'ru-RU' },
-    { name: '简体中文', value: 'zh-CN' },
-  ])
-
-  it('should correctly sync language with `locale`', async () => {
-    const { locale } = useI18n()
-    const language = ref('')
-
-    useLanguage(options, language)
-
-    expect(language.value).toBe('English')
-
-    locale.value = 'ru-RU'
-    await nextTick()
-    expect(locale.value).toBe('ru-RU')
-  })
-})
diff --git a/core/client/src/features/settings/lang-switcher/ui/__tests__/__snapshots__/LanguageSwitcher.spec.ts.snap b/core/client/src/features/settings/lang-switcher/ui/__tests__/__snapshots__/LanguageSwitcher.spec.ts.snap
deleted file mode 100644
index 6fd33d17..00000000
--- a/core/client/src/features/settings/lang-switcher/ui/__tests__/__snapshots__/LanguageSwitcher.spec.ts.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for LanguageSwitcher.vue > should render correctly 1`] = `
-"<div class="custom_select">
-  <div class="selected"><span class="text-sm">English</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
-      <path d="m7 15 5 5 5-5"></path>
-      <path d="m7 9 5-5 5 5"></path>
-    </svg></div>
-  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <!--v-if-->
-  </transition-stub>
-</div>"
-`;
-
-exports[`tests for LanguageSwitcher.vue > should render subcomponents 1`] = `
-"<div class="custom_select">
-  <div class="selected"><span class="text-sm">English</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
-      <path d="m7 15 5 5 5-5"></path>
-      <path d="m7 9 5-5 5 5"></path>
-    </svg></div>
-  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <!--v-if-->
-  </transition-stub>
-</div>"
-`;
diff --git a/core/client/src/features/settings/lang-switcher/ui/index.ts b/core/client/src/features/settings/lang-switcher/ui/index.ts
deleted file mode 100644
index 1f0029b2..00000000
--- a/core/client/src/features/settings/lang-switcher/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import LanguageSwitcher from './LanguageSwitcher.vue'
-
-export { LanguageSwitcher }
diff --git a/core/client/src/features/settings/theme-switcher/index.ts b/core/client/src/features/settings/theme-switcher/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/features/settings/theme-switcher/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/features/settings/theme-switcher/model/composables/index.ts b/core/client/src/features/settings/theme-switcher/model/composables/index.ts
deleted file mode 100644
index 0969c98b..00000000
--- a/core/client/src/features/settings/theme-switcher/model/composables/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './useTheme'
diff --git a/core/client/src/features/settings/theme-switcher/model/composables/useTheme.ts b/core/client/src/features/settings/theme-switcher/model/composables/useTheme.ts
deleted file mode 100644
index 329db903..00000000
--- a/core/client/src/features/settings/theme-switcher/model/composables/useTheme.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { ShallowRef } from 'vue'
-import type { ThemeBlock } from '..'
-import { useColorMode } from '@vueuse/core'
-import { ref } from 'vue'
-
-export default function useTheme(themeBlocks: ShallowRef<ThemeBlock[]>) {
-  const { store } = useColorMode()
-
-  const selectedThemeId = ref(
-    themeBlocks.value.find(item => item.active)?.id || 0,
-  )
-
-  const changeActiveTheme = (id: number) => {
-    themeBlocks.value = themeBlocks.value.map((theme, index) => ({
-      ...theme,
-      active: index === id,
-    }))
-    selectedThemeId.value = id
-  }
-
-  const onNewPreferences = () => {
-    const selectedTheme = themeBlocks.value.find(
-      item => item.id === selectedThemeId.value,
-    )
-    if (selectedTheme) {
-      store.value = selectedTheme.value
-    }
-  }
-
-  return {
-    changeActiveTheme,
-    onNewPreferences,
-  }
-}
diff --git a/core/client/src/features/settings/theme-switcher/model/index.ts b/core/client/src/features/settings/theme-switcher/model/index.ts
deleted file mode 100644
index c9f6f047..00000000
--- a/core/client/src/features/settings/theme-switcher/model/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './types'
diff --git a/core/client/src/features/settings/theme-switcher/model/types.ts b/core/client/src/features/settings/theme-switcher/model/types.ts
deleted file mode 100644
index d7ae7b0a..00000000
--- a/core/client/src/features/settings/theme-switcher/model/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { Component } from 'vue'
-
-type Theme = 'light' | 'dark' | 'auto'
-
-export const THEME: Record<string, Theme> = {
-  light: 'light',
-  dark: 'dark',
-  auto: 'auto',
-}
-
-export interface ThemeBlock {
-  id: number
-  item: Component
-  active?: boolean
-  value: Theme
-}
diff --git a/core/client/src/features/settings/theme-switcher/ui/DarkBlock.vue b/core/client/src/features/settings/theme-switcher/ui/DarkBlock.vue
deleted file mode 100644
index 6f2b1209..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/DarkBlock.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div :class="$style.main_container">
-    <div :class="$style.main_content">
-      <div :class="$style.item">
-        <div :class="[$style.item_line, $style.short]" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-      <div :class="[$style.item, $style.flex]">
-        <div :class="$style.item_circle" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-      <div :class="[$style.item, $style.flex]">
-        <div :class="$style.item_circle" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.main_container {
-  display: flex;
-  align-items: center;
-  border-radius: 6px;
-  border: 2px solid var(--zinc-300);
-  padding: 4px;
-  transition: border-color 0.2s;
-  cursor: pointer;
-
-  &:hover {
-    border-color: var(--zinc-400);
-  }
-
-  .main_content {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    border-radius: 4px;
-    background-color: var(--zinc-700);
-    padding: 8px;
-
-    .item {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      border-radius: 6px;
-      background-color: var(--zinc-600);
-      padding: 6px;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-      &.flex {
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .item_line {
-        border-radius: 6px;
-        background-color: var(--zinc-100);
-
-        &.short {
-          height: 0.5rem;
-          width: 6rem;
-        }
-
-        &.long {
-          height: 0.5rem;
-          width: 8.25rem;
-        }
-      }
-
-      .item_circle {
-        height: 16px;
-        width: 16px;
-        border-radius: 50%;
-        background-color: var(--zinc-100);
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .main_container {
-    border-color: var(--zinc-500);
-    &:hover {
-      border-color: var(--zinc-400);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/settings/theme-switcher/ui/LightBlock.vue b/core/client/src/features/settings/theme-switcher/ui/LightBlock.vue
deleted file mode 100644
index c50a70f2..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/LightBlock.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <div :class="$style.main_container">
-    <div :class="$style.main_content">
-      <div :class="$style.item">
-        <div :class="[$style.item_line, $style.short]" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-      <div :class="[$style.item, $style.flex]">
-        <div :class="$style.item_circle" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-      <div :class="[$style.item, $style.flex]">
-        <div :class="$style.item_circle" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.main_container {
-  display: flex;
-  align-items: center;
-  border-radius: 6px;
-  border: 2px solid var(--zinc-300);
-  padding: 4px;
-  transition: border-color 0.2s;
-  cursor: pointer;
-
-  &:hover {
-    border-color: var(--zinc-400);
-  }
-
-  .main_content {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    border-radius: 4px;
-    background-color: #ecedef;
-    padding: 8px;
-
-    .item {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      border-radius: 6px;
-      background-color: white;
-      padding: 6px;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-
-      &.flex {
-        flex-direction: row;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .item_line {
-        border-radius: 6px;
-        background-color: #ecedef;
-
-        &.short {
-          height: 0.5rem;
-          width: 6rem;
-        }
-
-        &.long {
-          height: 0.5rem;
-          width: 8.25rem;
-        }
-      }
-
-      .item_circle {
-        height: 16px;
-        width: 16px;
-        border-radius: 50%;
-        background-color: #ecedef;
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .main_container {
-    border-color: var(--zinc-500);
-    &:hover {
-      border-color: var(--zinc-400);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/settings/theme-switcher/ui/SystemBlock.vue b/core/client/src/features/settings/theme-switcher/ui/SystemBlock.vue
deleted file mode 100644
index b8ce5f5b..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/SystemBlock.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<template>
-  <div :class="$style.main_container">
-    <div :class="$style.main_content">
-      <div :class="$style.item">
-        <div :class="[$style.item_line, $style.short]" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-      <div :class="[$style.item, $style.flex]">
-        <div :class="$style.item_circle" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-      <div :class="[$style.item, $style.flex]">
-        <div :class="$style.item_circle" />
-        <div :class="[$style.item_line, $style.long]" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.main_container {
-  display: flex;
-  align-items: center;
-  border-radius: 0.375rem;
-  border: 2px solid var(--zinc-300);
-  padding: 0.15rem;
-  transition: border-color 0.2s;
-  cursor: pointer;
-
-  &:hover {
-    border-color: var(--zinc-400);
-  }
-
-  .main_content {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    border-radius: 4px;
-    background-color: #64748b;
-    padding: 8px;
-  }
-}
-
-.item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  border-radius: 0.375rem;
-  background-color: #94a3b8;
-  padding: 0.5rem;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.flex {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  gap: 8px;
-}
-
-.item_line {
-  border-radius: 0.375rem;
-  background-color: #e2e8f0;
-
-  &.short {
-    height: 0.5rem;
-    width: 6rem;
-  }
-
-  &.long {
-    height: 0.5rem;
-    width: 8.25rem;
-  }
-}
-
-.item_circle {
-  height: 16px;
-  width: 16px;
-  border-radius: 50%;
-  background-color: #e2e8f0;
-}
-
-:global(html.dark) {
-  .main_container {
-    border-color: var(--zinc-500);
-    &:hover {
-      border-color: var(--zinc-400);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue b/core/client/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
deleted file mode 100644
index 014f4d53..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/ThemeSwitcher.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import type { ThemeBlock } from '../model'
-import { UiButton, UiRadioGroupContainer } from '@/shared/ui'
-import { useColorMode } from '@vueuse/core'
-import { computed, shallowRef } from 'vue'
-import useTheme from '../model/composables/useTheme'
-import DarkBlock from './DarkBlock.vue'
-import LightBlock from './LightBlock.vue'
-import SystemBlock from './SystemBlock.vue'
-
-const { store } = useColorMode()
-
-const themeBlocks = shallowRef<ThemeBlock[]>([
-  { id: 0, item: LightBlock, active: store.value === 'light', value: 'light' },
-  { id: 1, item: DarkBlock, active: store.value === 'dark', value: 'dark' },
-  { id: 2, item: SystemBlock, active: store.value === 'auto', value: 'auto' },
-])
-const { onNewPreferences, changeActiveTheme } = useTheme(themeBlocks)
-
-const themeAbout = computed(() => {
-  return (value: string) => {
-    if (value === 'auto') {
-      return 'System'
-    }
-    return value
-      .split('')
-      .map((char, index) => (index === 0 ? char.toUpperCase() : char))
-      .join('')
-  }
-})
-</script>
-
-<template>
-  <form :class="$style.theme_form" @submit.prevent="onNewPreferences">
-    <UiRadioGroupContainer>
-      <div v-for="theme in themeBlocks" :key="theme.id" :class="$style.block">
-        <component
-          :is="theme.item"
-          :class="{ [$style.active]: theme.active }"
-          @click="changeActiveTheme(theme.id)"
-        />
-        <span class="text-xs">{{ themeAbout($t(`settings.theme.variants.${theme.value}`)) }}</span>
-      </div>
-    </UiRadioGroupContainer>
-    <UiButton variant="outline" type="submit">
-      {{ $t('settings.theme.btn') }}
-    </UiButton>
-  </form>
-</template>
-
-<style module lang="scss">
-.theme_form {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 30px;
-
-  .block {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 5px;
-
-    & > span {
-      font-weight: 500 !important;
-    }
-  }
-}
-.active {
-  border-color: var(--zinc-900);
-  &:hover {
-    border-color: var(--zinc-900);
-  }
-}
-
-:global(html.dark) {
-  .active {
-    border-color: var(--zinc-300);
-    &:hover {
-      border-color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/features/settings/theme-switcher/ui/__tests__/ThemeBlocks.spec.ts b/core/client/src/features/settings/theme-switcher/ui/__tests__/ThemeBlocks.spec.ts
deleted file mode 100644
index 1f1a71f2..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/__tests__/ThemeBlocks.spec.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import DarkBlock from '../DarkBlock.vue'
-import LightBlock from '../LightBlock.vue'
-import SystemBlock from '../SystemBlock.vue'
-
-describe('tests for theme blocks -> radio buttons', () => {
-  it('should render correctly LightBlock.vue', () => {
-    const wrapper = shallowMount(LightBlock)
-    expect(wrapper.html())
-  })
-  it('should render correctly DarkBlock.vue', () => {
-    const wrapper = shallowMount(DarkBlock)
-    expect(wrapper.html())
-  })
-  it('should render correctly SystemBlock.vue', () => {
-    const wrapper = shallowMount(SystemBlock)
-    expect(wrapper.html())
-  })
-})
diff --git a/core/client/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts b/core/client/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts
deleted file mode 100644
index 963559e5..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/__tests__/ThemeSwitcher.spec.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-import i18n from '@/shared/lib/i18n'
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, it, vi } from 'vitest'
-import { ref, shallowRef } from 'vue'
-import useTheme from '../../model/composables/useTheme'
-import ThemeSwitcher from '../ThemeSwitcher.vue'
-import '@/shared/lib/vitest-utils/cookiesI18n-mock'
-
-vi.mock('@vueuse/core', () => ({
-  useColorMode: vi.fn(() => ({
-    store: ref('auto'),
-  })),
-}))
-
-describe('tests for ThemeSwitcher.vue', () => {
-  const wrapper = shallowMount(ThemeSwitcher, {
-    global: {
-      plugins: [i18n],
-      mocks: {
-        t: (key: string) => {
-          const translations: Record<string, string> = {
-            'settings.theme.variants.light': 'light',
-            'settings.theme.variants.dark': 'dark',
-            'settings.theme.variants.auto': 'system',
-          }
-          return translations[key]
-        },
-      },
-    },
-  })
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-  it('should render subcomponents', () => {
-    expect(
-      wrapper.findComponent({ name: 'UiRadioGroupContainer' }).exists(),
-    ).toBe(true)
-    expect(wrapper.findComponent({ name: 'UiButton' }).exists()).toBe(true)
-  })
-
-  it('computed `themeAbout` is working correctly', () => {
-    // @ts-expect-error PublicInstance
-    const themeAbout = wrapper.vm.themeAbout
-    expect(themeAbout('light')).toBe('Light')
-    expect(themeAbout('dark')).toBe('Dark')
-    expect(themeAbout('auto')).toBe('System')
-  })
-})
-
-describe('useTheme composable tests', () => {
-  it('should change active theme correctly', () => {
-    const themeBlocks = shallowRef([
-      { id: 0, active: true, value: 'light' },
-      { id: 1, active: false, value: 'dark' },
-      { id: 2, active: false, value: 'auto' },
-    ])
-
-    const { changeActiveTheme } = useTheme(themeBlocks as unknown as any)
-
-    changeActiveTheme(1)
-    expect(themeBlocks.value[0].active).toBe(false)
-    expect(themeBlocks.value[1].active).toBe(true)
-    expect(themeBlocks.value[2].active).toBe(false)
-  })
-})
diff --git a/core/client/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap b/core/client/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap
deleted file mode 100644
index e184a158..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/__tests__/__snapshots__/ThemeSwitcher.spec.ts.snap
+++ /dev/null
@@ -1,8 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for ThemeSwitcher.vue > should render correctly 1`] = `
-"<form class="theme_form">
-  <ui-radio-group-container-stub></ui-radio-group-container-stub>
-  <ui-button-stub variant="outline" size="md" loading="false" disabled="false" loadingplacement="leading" type="submit"></ui-button-stub>
-</form>"
-`;
diff --git a/core/client/src/features/settings/theme-switcher/ui/index.ts b/core/client/src/features/settings/theme-switcher/ui/index.ts
deleted file mode 100644
index 01bb1daf..00000000
--- a/core/client/src/features/settings/theme-switcher/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import ThemeSwitcher from './ThemeSwitcher.vue'
-
-export { ThemeSwitcher }
diff --git a/core/client/src/layouts/ui/AppLayout.vue b/core/client/src/layouts/ui/AppLayout.vue
index 5837d617..4cbbcbfa 100644
--- a/core/client/src/layouts/ui/AppLayout.vue
+++ b/core/client/src/layouts/ui/AppLayout.vue
@@ -1,15 +1,3 @@
-<script setup lang="ts">
-import { useWindowSize } from '@vueuse/core'
-import { defineAsyncComponent } from 'vue'
-
-const { width } = useWindowSize()
-
-// TODO: jenda with mobile devices
-const NotAvailable = defineAsyncComponent(() => {
-  return import('@/widgets/device/ui/NotAvailable.vue')
-})
-</script>
-
 <template>
   <div>
     <component :is="$route.meta.layoutComponent">
diff --git a/core/client/src/layouts/ui/AuthLayout.vue b/core/client/src/layouts/ui/AuthLayout.vue
index 4b2dfb0b..14351cce 100644
--- a/core/client/src/layouts/ui/AuthLayout.vue
+++ b/core/client/src/layouts/ui/AuthLayout.vue
@@ -1,12 +1,5 @@
 <template>
-  <div :class="$style.auth_layout">
+  <div class="h-dvh w-full">
     <slot />
   </div>
 </template>
-
-<style module lang="scss">
-.auth_layout {
-  height: 100dvh;
-  width: 100%;
-}
-</style>
diff --git a/core/client/src/layouts/ui/DefaultLayout.vue b/core/client/src/layouts/ui/DefaultLayout.vue
index a582a97f..0faa7010 100644
--- a/core/client/src/layouts/ui/DefaultLayout.vue
+++ b/core/client/src/layouts/ui/DefaultLayout.vue
@@ -3,36 +3,17 @@ import type { Board } from '@/entities/board'
 import { RouteNames } from '@/shared/config/consts'
 import { useExpanded } from '@/shared/lib/composables'
 import { AppSidebar, HeaderMain } from '@/widgets/layout'
-import { useLocalStorage, useWindowSize } from '@vueuse/core'
+import { useLocalStorage } from '@vueuse/core'
 
 // @ts-expect-error missing type
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, ref } from 'vue'
 import 'splitpanes/dist/splitpanes.css'
 
-const { width } = useWindowSize()
-
 const isExpanded = useLocalStorage('isExpanded', true)
 const transitionFl = ref<boolean>(false)
 
-const widthSidebar = computed(() => {
-  return isExpanded.value
-    ? width.value >= 1820
-      ? '16%'
-      : width.value >= 1400
-        ? '22%'
-        : '26%'
-    : width.value >= 1820
-      ? '3%'
-      : width.value >= 1500
-        ? '3.5%'
-        : width.value >= 1380
-          ? '4%'
-          : '5%'
-})
-const widthMainContainer = computed(() => {
-  return `calc(100% - ${widthSidebar.value})`
-})
+const sidebarSize = computed(() => isExpanded.value ? '286' : '58')
 
 function onToggleArea() {
   isExpanded.value = !isExpanded.value
@@ -55,21 +36,19 @@ const boards = ref<Board[]>([
 </script>
 
 <template>
-  <Splitpanes :class="$style.default_layout">
+  <Splitpanes class="flex flex-row flex-1 overflow-hidden w-full h-dvh">
     <Pane
-      min-size="4"
-      max-size="18"
-      :size="widthSidebar"
-      :style="{ transition: transitionFl && 'width .2s ease-out' }"
+      style="flex: none"
+      :style="{ transition: transitionFl && 'all .2s ease-out', width: `${sidebarSize}px` }"
     >
       <AppSidebar :boards />
     </Pane>
-    <Pane :size="widthMainContainer">
-      <div :class="$style.main_part">
+    <Pane style="width: 100%;">
+      <div class="flex flex-col h-full overflow-hidden w-full">
         <HeaderMain :projects="boards" />
         <div
-          :class="$style.slot_wrapper"
-          :style="{ padding: $route.name !== RouteNames.board ? '20px 20px 20px 30px' : '0' }"
+          class="relative h-full w-full !bg-main"
+          :style="{ padding: $route.name !== RouteNames.board ? '12px 20px 20px 20px' : '0' }"
         >
           <slot />
         </div>
@@ -77,36 +56,3 @@ const boards = ref<Board[]>([
     </Pane>
   </Splitpanes>
 </template>
-
-<style module lang="scss">
-.default_layout {
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 0%;
-  width: 100%;
-  height: 100dvh;
-
-  .main_part {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    height: 100%;
-
-    .slot_wrapper {
-      background-color: var(--main-slotted);
-      position: relative;
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
-
-.new_header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 15px;
-  width: 100%;
-  background-color: var(--zinc-50);
-}
-</style>
diff --git a/core/client/src/layouts/ui/WelcomeLayout.vue b/core/client/src/layouts/ui/WelcomeLayout.vue
index 156635f1..f5025ae7 100644
--- a/core/client/src/layouts/ui/WelcomeLayout.vue
+++ b/core/client/src/layouts/ui/WelcomeLayout.vue
@@ -8,32 +8,13 @@ useColorMode({
 </script>
 
 <template>
-  <div :class="$style.welcome_layout">
+  <div class="relative min-h-dvh w-full flex flex-col">
     <HeaderWelcome />
-    <div :class="$style.slot">
+    <div class="flex-1">
       <slot />
     </div>
-    <div :class="$style.footer_wrapper">
+    <div class="flex justify-center">
       <AppFooter />
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.welcome_layout {
-  position: relative;
-  min-height: 100dvh;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-
-  .slot {
-    flex: 1 1 0%;
-  }
-
-  .footer_wrapper{
-    display: flex;
-    justify-content: center;
-  }
-}
-</style>
diff --git a/core/client/src/pages/AnalyticsPage.vue b/core/client/src/pages/AnalyticsPage.vue
index d45b3de7..5cdfa576 100644
--- a/core/client/src/pages/AnalyticsPage.vue
+++ b/core/client/src/pages/AnalyticsPage.vue
@@ -23,23 +23,30 @@ const containerWith = computed(() => {
 </script>
 
 <template>
-  <div :class="$style.container">
-    <div :class="$style.section_about">
-      <p class="text-sm">
+  <div class="flex flex-col pb-5">
+    <div class="flex flex-col items-start mb-3">
+      <p class="text-sm text-neutral-600 dark:text-neutral-200">
         {{ $t('analytics.description') }}
       </p>
     </div>
-    <div :class="$style.section_badges">
-      <UiBadge v-for="(badge, _) in $tm('analytics.badges')" :key="_" variant="outline">
+    <div class="inline-flex items-center gap-2 mb-30px">
+      <UiBadge
+        v-for="(badge, _) in $tm('analytics.badges')"
+        :key="_"
+        variant="outline"
+      >
         {{ badge }}
       </UiBadge>
     </div>
-    <div :class="$style.charts">
-      <div :class="$style.charts_container" :style="{ maxWidth: containerWith }">
+    <div class="flex gap-5 pr-2.5">
+      <div
+        class="flex flex-col grow gap-5"
+        :style="{ maxWidth: containerWith }"
+      >
         <TasksChart />
         <UsersChart />
       </div>
-      <div :class="$style.charts_container">
+      <div class="flex flex-col grow gap-5">
         <OnlineChart />
         <BoardsChart />
       </div>
@@ -47,50 +54,3 @@ const containerWith = computed(() => {
     <SharedSection />
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  display: flex;
-  flex-direction: column;
-  padding-bottom: 20px;
-
-  .section_badges {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    margin-bottom: 30px;
-  }
-}
-
-.section_about {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 12px;
-
-  & > p {
-    color: var(--zinc-500);
-  }
-}
-
-.charts {
-  display: flex;
-  padding: 0 10px 0 0;
-  gap: 20px;
-
-  .charts_container {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: 20px;
-  }
-}
-
-:global(html.dark) {
-  .section_about {
-    & > p {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/BoardsPage.vue b/core/client/src/pages/BoardsPage.vue
index 2e1fe6ac..1af70e07 100644
--- a/core/client/src/pages/BoardsPage.vue
+++ b/core/client/src/pages/BoardsPage.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { TeamBoards } from '@/widgets/boards'
 import { useHead } from '@unhead/vue'
 
 useHead({
@@ -8,14 +7,7 @@ useHead({
 </script>
 
 <template>
-  <div :class="$style.boards">
-    <TeamBoards />
+  <div class="w-full h-full">
+    boards
   </div>
 </template>
-
-<style module lang="scss">
-.boards {
-  height: 100%;
-  width: 100%;
-}
-</style>
diff --git a/core/client/src/pages/GuestsPage.vue b/core/client/src/pages/GuestsPage.vue
deleted file mode 100644
index 13feaedc..00000000
--- a/core/client/src/pages/GuestsPage.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import type { User } from '@/entities/user/model'
-import { MembersList } from '@/widgets/members'
-import { shallowReactive } from 'vue'
-
-// mocks -> after data from backend
-const members = shallowReactive<User[]>([
-  { _id: '1', photoUrl: 'https://www.shadcn-vue.com/avatars/03.png', email: 'John Doe', role: 'member' },
-  { _id: '2', photoUrl: 'https://www.shadcn-vue.com/avatars/04.png', email: 'Emily Johnson', role: 'member' },
-])
-</script>
-
-<template>
-  <div style="width: 100%">
-    <div :class="$style.about">
-      <h4 class="heading-4">
-        {{ $t('members.content.guests.title') }}
-      </h4>
-      <p class="text-sm">
-        {{ $t('members.content.guests.description') }}
-      </p>
-    </div>
-    <MembersList :members />
-  </div>
-</template>
-
-<style module lang="scss">
-.about {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  margin-bottom: 30px;
-  padding-bottom: 20px;
-
-  & p {
-    color: var(--zinc-500);
-    max-width: 540px;
-  }
-}
-
-:global(html.dark) {
-  .about {
-    & p {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/HomePage.vue b/core/client/src/pages/HomePage.vue
index f693ded8..1423cdde 100644
--- a/core/client/src/pages/HomePage.vue
+++ b/core/client/src/pages/HomePage.vue
@@ -18,10 +18,10 @@ useHead({
 </script>
 
 <template>
-  <div class="container" :class="[$style.wrapper]">
+  <div class="ui-container pt-[106px] max-[1152px]:pt-[80px] max-[890px]:pt-[70px] max-[520px]:!pt-[50px]">
     <AboutSection />
     <ProjectDemo />
-    <div :class="$style.inside_container">
+    <div class="flex flex-col items-center py-0 px-8 max-[890px]:px-0">
       <MarqueeList />
       <MarketingCards />
       <KanbanSection />
@@ -32,37 +32,3 @@ useHead({
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.wrapper {
-  padding: 170px 60px 0 60px;
-
-  .inside_container {
-    padding: 0 30px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .wrapper{
-    padding-top: 130px;
-  }
-}
-
-@media screen and (max-width: 890px) {
-  .wrapper{
-    padding: 130px 0px 0 0px;
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .wrapper{
-    padding-top: 120px;
-    .inside_container{
-      padding: 0 20px;
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/KanbanPage.vue b/core/client/src/pages/KanbanPage.vue
index 6c2f1c38..e28d1488 100644
--- a/core/client/src/pages/KanbanPage.vue
+++ b/core/client/src/pages/KanbanPage.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Board } from '@/entities/board'
-import { InfoPart, KanbanWrapper } from '@/widgets/kanban'
 import { ref } from 'vue'
 
 // mocks -> after data from backend
@@ -8,7 +7,19 @@ const board = ref<Board>({
   _id: '0',
   name: 'Startup',
   status: 'work',
-  columns: [],
+  columns: [
+    { _id: '0', title: 'Backlog', cards: [
+      {
+        _id: '0',
+        title: 'Create a new project',
+        priority: 'low',
+        users: [],
+        chat: true,
+        chatCount: 2,
+        tags: [{ _id: '0', name: 'test' }],
+      },
+    ] },
+  ],
   users: [
     {
       _id: '0',
@@ -20,10 +31,9 @@ const board = ref<Board>({
 </script>
 
 <template>
-  <div :class="$style.page_container">
-    <InfoPart :board />
-    <div :class="$style.kanban">
-      <KanbanWrapper :columns="board.columns" />
+  <div class="h-full w-full">
+    <div class="relative h-full w-full">
+      kanban
     </div>
   </div>
 </template>
diff --git a/core/client/src/pages/LoginPage.vue b/core/client/src/pages/LoginPage.vue
index bccd9665..8ea5d174 100644
--- a/core/client/src/pages/LoginPage.vue
+++ b/core/client/src/pages/LoginPage.vue
@@ -9,18 +9,10 @@ useHead({
 </script>
 
 <template>
-  <div :class="$style.login">
+  <div class="w-full h-full flex">
     <AuthContainer>
       <SignInForm />
     </AuthContainer>
     <BgPanel />
   </div>
 </template>
-
-<style module lang="scss">
-.login {
-  height: 100%;
-  width: 100%;
-  display: flex;
-}
-</style>
diff --git a/core/client/src/pages/MainTeamPage.vue b/core/client/src/pages/MainTeamPage.vue
deleted file mode 100644
index 0129c9b0..00000000
--- a/core/client/src/pages/MainTeamPage.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import type { User } from '@/entities/user/model'
-import { MembersList } from '@/widgets/members'
-import { shallowReactive } from 'vue'
-
-// mocks -> after data from backend
-const members = shallowReactive<User[]>([
-  { _id: '0', photoUrl: 'https://www.shadcn-vue.com/avatars/02.png', email: 'Alex Peshkov', role: 'admin' },
-  { _id: '1', photoUrl: 'https://www.shadcn-vue.com/avatars/03.png', email: 'John Doe', role: 'member' },
-  { _id: '2', photoUrl: 'https://www.shadcn-vue.com/avatars/04.png', email: 'Emily Johnson', role: 'member' },
-])
-</script>
-
-<template>
-  <div style="width: 100%">
-    <div v-once :class="$style.about">
-      <h4 class="heading-4">
-        {{ $t('members.content.all.title') }}
-      </h4>
-      <p class="text-sm">
-        {{ $t('members.content.all.description') }}
-      </p>
-    </div>
-    <MembersList :members />
-  </div>
-</template>
-
-<style module lang="scss">
-.about {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2px;
-  margin-bottom: 30px;
-  padding-bottom: 20px;
-
-  & p {
-    color: var(--zinc-500);
-    max-width: 560px;
-  }
-}
-
-:global(html.dark) {
-  .about {
-    & p {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/MembersPage.vue b/core/client/src/pages/MembersPage.vue
index 0d0fe493..76c3e6c0 100644
--- a/core/client/src/pages/MembersPage.vue
+++ b/core/client/src/pages/MembersPage.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { MainWrapper } from '@/widgets/members'
 import { useHead } from '@unhead/vue'
 
 useHead({
@@ -8,49 +7,11 @@ useHead({
 </script>
 
 <template>
-  <div :class="$style.members">
-    <div :class="$style.top">
-      <h4 class="heading-4">
-        {{ $t('members.title') }} (1)
-      </h4>
-      <p class="text-sm">
+  <div class="h-full w-full">
+    <div class="">
+      <p class="text-sm text-neutral-600 dark:text-neutral-300">
         {{ $t('members.description') }}
       </p>
     </div>
-    <MainWrapper>
-      <RouterView />
-    </MainWrapper>
   </div>
 </template>
-
-<style module lang="scss">
-.members {
-  height: 100%;
-  width: 100%;
-
-  .top {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 2px;
-    margin-bottom: 30px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid var(--zinc-200);
-
-    & > p {
-      color: var(--zinc-500);
-    }
-  }
-}
-
-:global(html.dark) {
-  .members {
-    .top {
-      border-color: var(--zinc-600);
-      & > p {
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/NotFoundPage.vue b/core/client/src/pages/NotFoundPage.vue
index 84fe660f..6d1ae1dd 100644
--- a/core/client/src/pages/NotFoundPage.vue
+++ b/core/client/src/pages/NotFoundPage.vue
@@ -2,79 +2,42 @@
 import { RouteNames } from '@/shared/config/consts'
 import { UiButton } from '@/shared/ui'
 import { useHead } from '@unhead/vue'
+import { useWindowSize } from '@vueuse/core'
 
 useHead({
   title: '404 | Not Found :/',
 })
+
+const { width } = useWindowSize()
 </script>
 
 <template>
-  <div :class="$style.container">
-    <div :class="$style.items">
-      <h1>404</h1>
-      <h3>{{ $t('not_found.title') }}</h3>
-      <p>{{ $t('not_found.description') }}</p>
+  <div class="flex justify-center items-center h-dvh">
+    <div
+      class="flex flex-col justify-center mt--20 items-center h-full
+      max-[520px]:mt--10"
+    >
+      <h1
+        class="text-9rem text-neutral-800 dark:text-neutral-200
+        max-[768px]:text-8rem max-[520px]:!text-5rem"
+      >
+        404
+      </h1>
+      <h3
+        class="text-4xl text-neutral-800 mt--28px dark:text-neutral-200
+        max-[768px]:mt--20px max-[520px]:!text-3xl mb-20px"
+      >
+        {{ $t('not_found.title') }}
+      </h3>
+      <p
+        v-if="width > 520"
+        class="mb-20px mt-2px dark:text-neutral-300 max-[520px]:(mt-10px text-neutral-700)"
+      >
+        {{ $t('not_found.description') }}
+      </p>
       <UiButton @click="$router.push({ name: RouteNames.welcome })">
         {{ $t('not_found.btn') }}
       </UiButton>
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-
-  .items {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    & > h1 {
-      font-size: 180px;
-      color: var(--zinc-800);
-    }
-
-    & > h3 {
-      font-size: 40px;
-      color: var(--zinc-800);
-      margin-top: -30px;
-    }
-
-    & > p {
-      margin-top: -2px;
-    }
-
-    & button {
-      margin-top: 20px;
-    }
-  }
-}
-
-@media screen and (max-width: 1560px) {
-  .container {
-    .items {
-      & > h1 {
-        font-size: 160px;
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .container {
-    .items {
-      & h1,
-      & h3 {
-        color: var(--zinc-200);
-      }
-      & p {
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/RegistrationPage.vue b/core/client/src/pages/RegistrationPage.vue
index 21c28973..4d54066f 100644
--- a/core/client/src/pages/RegistrationPage.vue
+++ b/core/client/src/pages/RegistrationPage.vue
@@ -9,18 +9,10 @@ useHead({
 </script>
 
 <template>
-  <div :class="$style.registration">
+  <div class="w-full h-full flex">
     <AuthContainer>
       <SignUpForm />
     </AuthContainer>
     <BgPanel />
   </div>
 </template>
-
-<style module lang="scss">
-.registration {
-  height: 100%;
-  width: 100%;
-  display: flex;
-}
-</style>
diff --git a/core/client/src/pages/SettingsPage.vue b/core/client/src/pages/SettingsPage.vue
index 9672e4a3..1595ae11 100644
--- a/core/client/src/pages/SettingsPage.vue
+++ b/core/client/src/pages/SettingsPage.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { SettingsElements } from '@/widgets/settings'
 import { useHead } from '@unhead/vue'
 
 useHead({
@@ -8,41 +7,7 @@ useHead({
 </script>
 
 <template>
-  <div :class="$style.settings">
-    <div>
-      <h4 class="heading-4">
-        {{ $t('settings.title') }}
-      </h4>
-      <p class="text-sm">
-        {{ $t('settings.description') }}
-      </p>
-    </div>
+  <div>
+    settings
   </div>
-  <SettingsElements />
 </template>
-
-<style module lang="scss">
-.settings {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 30px;
-  padding-bottom: 20px;
-  // border-bottom: 1px solid var(--zinc-200);
-
-  & > div {
-    & > p {
-      color: var(--zinc-500);
-    }
-  }
-}
-
-:global(html.dark) {
-  .settings {
-    border-color: var(--zinc-600);
-    & > p {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/TemplatesPage.vue b/core/client/src/pages/TemplatesPage.vue
index e81c3a31..4d3f5dd7 100644
--- a/core/client/src/pages/TemplatesPage.vue
+++ b/core/client/src/pages/TemplatesPage.vue
@@ -9,32 +9,11 @@ useHead({
 </script>
 
 <template>
-  <div :class="$style.top">
-    <p class="text-sm">
+  <div class="flex flex-col items-start mb-5">
+    <p class="text-sm text-neutral-600 dark:text-neutral-300">
       {{ $t('templates.description') }}
     </p>
   </div>
   <ImportTemplate />
   <AllTemplates />
 </template>
-
-<style module lang="scss">
-.top {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  margin-bottom: 20px;
-
-  & > p {
-    color: var(--zinc-500);
-  }
-}
-
-:global(html.dark) {
-  .top {
-    & > p {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/pages/__tests__/__snapshots__/Login.spec.ts.snap b/core/client/src/pages/__tests__/__snapshots__/Login.spec.ts.snap
index 9ff66bbf..5e4bcd87 100644
--- a/core/client/src/pages/__tests__/__snapshots__/Login.spec.ts.snap
+++ b/core/client/src/pages/__tests__/__snapshots__/Login.spec.ts.snap
@@ -1,28 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for Home.vue > should be render correctly 1`] = `
-"<div class="login">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
-exports[`tests for Login.vue > should be render correctly 1`] = `
-"<div class="login">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
 exports[`tests for LoginPage.vue > should be render correctly 1`] = `
-"<div class="login">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
-exports[`tests for Registration.vue > should be render correctly 1`] = `
-"<div class="login">
+"<div class="w-full h-full flex">
   <auth-container-stub></auth-container-stub>
   <bg-panel-stub></bg-panel-stub>
 </div>"
diff --git a/core/client/src/pages/__tests__/__snapshots__/Registration.spec.ts.snap b/core/client/src/pages/__tests__/__snapshots__/Registration.spec.ts.snap
index 2756b9c2..9c9dad2d 100644
--- a/core/client/src/pages/__tests__/__snapshots__/Registration.spec.ts.snap
+++ b/core/client/src/pages/__tests__/__snapshots__/Registration.spec.ts.snap
@@ -1,21 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for Home.vue > should be render correctly 1`] = `
-"<div class="registration">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
-exports[`tests for Registration.vue > should be render correctly 1`] = `
-"<div class="registration">
-  <auth-container-stub></auth-container-stub>
-  <bg-panel-stub></bg-panel-stub>
-</div>"
-`;
-
 exports[`tests for RegistrationPage.vue > should be render correctly 1`] = `
-"<div class="registration">
+"<div class="w-full h-full flex">
   <auth-container-stub></auth-container-stub>
   <bg-panel-stub></bg-panel-stub>
 </div>"
diff --git a/core/client/src/shared/assets/icons/ArrowsDouble.vue b/core/client/src/shared/assets/icons/ArrowsDouble.vue
deleted file mode 100644
index 5e91f8e5..00000000
--- a/core/client/src/shared/assets/icons/ArrowsDouble.vue
+++ /dev/null
@@ -1,41 +0,0 @@
-<template>
-  <svg
-    data-v-e329aaf9=""
-    data-v-90ec8441=""
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    class="simple"
-    style="height: 24px; width: 24px; --7ea24000: inherit"
-  >
-    <path
-      opacity="0.39"
-      d="M17.8 17.4C18.2 17.8 18.1 18.5001 17.7 18.8001C17.3 19.2001 16.6 19.1 16.3 18.7L11.3 12.7C11 12.3 11 11.8 11.3 11.4L16.3 5.39996C16.7 4.99996 17.3 4.90011 17.7 5.30011C18.1 5.70011 18.2 6.30001 17.8 6.70001L13.5 11.8001C13.4 11.9001 13.4 12.2001 13.5 12.3001L17.8 17.4Z"
-      :class="$style.fill_first"
-    />
-    <path
-      d="M12.8 17.4C13.2 17.8 13.1 18.5001 12.7 18.8001C12.3 19.2001 11.6 19.1 11.3 18.7L6.29998 12.7C5.99998 12.3 5.99998 11.8 6.29998 11.4L11.3 5.39996C11.7 4.99996 12.3 4.90011 12.7 5.30011C13.1 5.70011 13.2 6.30001 12.8 6.70001L8.49999 11.8001C8.39999 11.9001 8.39999 12.2001 8.49999 12.3001L12.8 17.4Z"
-      :class="$style.fill_second"
-    />
-  </svg>
-</template>
-
-<style module lang="scss">
-.fill_first {
-  fill: #3f3f46;
-}
-
-.fill_second {
-  fill: #71717a;
-}
-
-:global(html.dark) {
-  .fill_first {
-    fill: var(--zinc-100);
-  }
-
-  .fill_second {
-    fill: var(--zinc-200);
-  }
-}
-</style>
diff --git a/core/client/src/shared/assets/icons/_basic/arrow.svg b/core/client/src/shared/assets/icons/_basic/arrow.svg
deleted file mode 100644
index 0eb1dd16..00000000
--- a/core/client/src/shared/assets/icons/_basic/arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/_basic/file.svg b/core/client/src/shared/assets/icons/_basic/file.svg
deleted file mode 100644
index a4d8ff33..00000000
--- a/core/client/src/shared/assets/icons/_basic/file.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M16 17H9m7-4h-3m7.5 1c0 3.771 0 5.657-1.245 6.828S16.007 22 12 22h-.773c-3.26 0-4.892 0-6.024-.798a4.1 4.1 0 0 1-.855-.805c-.848-1.066-.848-2.6-.848-5.67v-2.545c0-2.963 0-4.445.469-5.628c.754-1.903 2.348-3.403 4.37-4.113C9.595 2 11.168 2 14.318 2c1.798 0 2.698 0 3.416.252c1.155.406 2.066 1.263 2.497 2.35c.268.676.268 1.523.268 3.216z"/><path d="M3.5 12a3.333 3.333 0 0 1 3.333-3.333c.666 0 1.451.116 2.098-.057a1.67 1.67 0 0 0 1.179-1.18c.173-.647.057-1.432.057-2.098A3.333 3.333 0 0 1 13.5 2"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/_basic/index.ts b/core/client/src/shared/assets/icons/_basic/index.ts
deleted file mode 100644
index 0e1175bc..00000000
--- a/core/client/src/shared/assets/icons/_basic/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Arrow from './arrow.svg?component'
-import File from './file.svg?component'
-import FileImport from './import.svg?component'
-import Menu from './menu.svg?component'
-import Plus from './plus.svg?component'
-import Spin from './spin.svg?component'
-
-export { Arrow, File, FileImport, Menu, Plus, Spin }
diff --git a/core/client/src/shared/assets/icons/_basic/menu.svg b/core/client/src/shared/assets/icons/_basic/menu.svg
deleted file mode 100644
index f0f93c4d..00000000
--- a/core/client/src/shared/assets/icons/_basic/menu.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="3.75" d="M12 12h.01v.01H12zm0-7h.01v.01H12zm0 14h.01v.01H12z"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/_basic/plus.svg b/core/client/src/shared/assets/icons/_basic/plus.svg
deleted file mode 100644
index c7ef0b73..00000000
--- a/core/client/src/shared/assets/icons/_basic/plus.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7v14"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/_basic/spin.svg b/core/client/src/shared/assets/icons/_basic/spin.svg
deleted file mode 100644
index 225ea2b6..00000000
--- a/core/client/src/shared/assets/icons/_basic/spin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M4 24c0 11.046 8.954 20 20 20s20-8.954 20-20S35.046 4 24 4"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/_basic/import.svg b/core/client/src/shared/assets/icons/custom-jenda/import.svg
similarity index 100%
rename from core/client/src/shared/assets/icons/_basic/import.svg
rename to core/client/src/shared/assets/icons/custom-jenda/import.svg
diff --git a/core/client/src/shared/assets/icons/sidebar/project.svg b/core/client/src/shared/assets/icons/custom-jenda/project.svg
similarity index 100%
rename from core/client/src/shared/assets/icons/sidebar/project.svg
rename to core/client/src/shared/assets/icons/custom-jenda/project.svg
diff --git a/core/client/src/shared/assets/icons/header/eyes.svg b/core/client/src/shared/assets/icons/header/eyes.svg
deleted file mode 100644
index 64f9b9c9..00000000
--- a/core/client/src/shared/assets/icons/header/eyes.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M8.25 1.5a.75.75 0 0 1 0 1.5H4.5A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5V7.75a.75.75 0 0 1 1.5 0v3.75a3 3 0 0 1-3 3h-7a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3zm4.25 4a2 2 0 1 0 0-4a2 2 0 0 0 0 4" clip-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/header/index.ts b/core/client/src/shared/assets/icons/header/index.ts
deleted file mode 100644
index a04ae0bb..00000000
--- a/core/client/src/shared/assets/icons/header/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import Eyes from './eyes.svg?component'
-import Massages from './messages.svg?component'
-import Question from './question.svg?component'
-
-export { Eyes, Massages, Question }
diff --git a/core/client/src/shared/assets/icons/header/messages.svg b/core/client/src/shared/assets/icons/header/messages.svg
deleted file mode 100644
index d688eb41..00000000
--- a/core/client/src/shared/assets/icons/header/messages.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M7.5 12h6m-6-4h3m-2 12c1.05.87 2.315 1.424 3.764 1.519c1.141.075 2.333.075 3.473 0a4 4 0 0 0 1.188-.268c.41-.167.614-.25.719-.237c.104.012.255.122.557.342c.533.388 1.204.666 2.2.643c.503-.012.755-.019.867-.208c.113-.19-.027-.452-.308-.977c-.39-.728-.636-1.561-.262-2.229c.643-.954 1.19-2.083 1.27-3.303c.043-.655.043-1.334 0-1.99A6.7 6.7 0 0 0 21.4 11"/><path d="M12.345 17.487c3.556-.234 6.388-3.08 6.62-6.653c.046-.699.046-1.423 0-2.122c-.232-3.572-3.064-6.418-6.62-6.652c-1.213-.08-2.48-.08-3.69 0c-3.556.234-6.388 3.08-6.62 6.652c-.046.7-.046 1.423 0 2.122c.084 1.302.665 2.506 1.349 3.524c.397.712.135 1.6-.279 2.377c-.298.56-.447.84-.327 1.042s.387.209.922.221c1.057.026 1.77-.271 2.336-.685c.321-.234.482-.351.593-.365c.11-.013.328.075.763.253c.392.16.846.258 1.263.286c1.21.08 2.477.08 3.69 0"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/header/question.svg b/core/client/src/shared/assets/icons/header/question.svg
deleted file mode 100644
index 75b23cf8..00000000
--- a/core/client/src/shared/assets/icons/header/question.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path stroke="currentColor" stroke-width="1.5" d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"/><path stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M10.125 8.875a1.875 1.875 0 1 1 2.828 1.615c-.475.281-.953.708-.953 1.26V13"/><circle cx="12" cy="16" r="1" fill="currentColor"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/index.ts b/core/client/src/shared/assets/icons/index.ts
index 930998ac..e79b92a0 100644
--- a/core/client/src/shared/assets/icons/index.ts
+++ b/core/client/src/shared/assets/icons/index.ts
@@ -1,8 +1,3 @@
-import ArrowsDouble from './ArrowsDouble.vue'
 import ProjectGrid from './ProjectGrid.vue'
 
-export * from './_basic'
-export * from './header'
-export * from './sidebar'
-
-export { ArrowsDouble, ProjectGrid }
+export { ProjectGrid }
diff --git a/core/client/src/shared/assets/icons/sidebar/analytics.svg b/core/client/src/shared/assets/icons/sidebar/analytics.svg
deleted file mode 100644
index d45bb7ee..00000000
--- a/core/client/src/shared/assets/icons/sidebar/analytics.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M21 21H10c-3.3 0-4.95 0-5.975-1.025S3 17.3 3 14V3"/><path d="M7.997 16.999c3.532 0 10.915-1.464 10.7-10.566m-2.208 1.61l1.883-1.897a.497.497 0 0 1 .703-.003l1.922 1.9"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/arrow-expanded.svg b/core/client/src/shared/assets/icons/sidebar/arrow-expanded.svg
deleted file mode 100644
index c7b28c55..00000000
--- a/core/client/src/shared/assets/icons/sidebar/arrow-expanded.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M10 7s4 3.682 4 5s-4 5-4 5"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/index.ts b/core/client/src/shared/assets/icons/sidebar/index.ts
deleted file mode 100644
index c017c520..00000000
--- a/core/client/src/shared/assets/icons/sidebar/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import Analytics from './analytics.svg?component'
-import ArrowExpanded from './arrow-expanded.svg?component'
-import Kanban from './kanban.svg?component'
-import Members from './members.svg?component'
-
-import PaneArrow from './pane-arrow.svg?component'
-import Plan from './plan.svg?component'
-import Project from './project.svg?component'
-import Settings from './settings.svg?component'
-import Templates from './templates.svg?component'
-
-export {
-  Analytics,
-  ArrowExpanded,
-  Kanban,
-  Members,
-  PaneArrow,
-  Plan,
-  Project,
-  Settings,
-  Templates,
-}
diff --git a/core/client/src/shared/assets/icons/sidebar/kanban.svg b/core/client/src/shared/assets/icons/sidebar/kanban.svg
deleted file mode 100644
index 23ec93a8..00000000
--- a/core/client/src/shared/assets/icons/sidebar/kanban.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M6 8c0-.943 0-1.414.293-1.707S7.057 6 8 6h.5c.943 0 1.414 0 1.707.293S10.5 7.057 10.5 8v7c0 .943 0 1.414-.293 1.707S9.443 17 8.5 17H8c-.943 0-1.414 0-1.707-.293S6 15.943 6 15zm7.5 0c0-.943 0-1.414.293-1.707S14.557 6 15.5 6h.5c.943 0 1.414 0 1.707.293S18 7.057 18 8v2c0 .943 0 1.414-.293 1.707S16.943 12 16 12h-.5c-.943 0-1.414 0-1.707-.293S13.5 10.943 13.5 10z"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/members.svg b/core/client/src/shared/assets/icons/sidebar/members.svg
deleted file mode 100644
index 189222c1..00000000
--- a/core/client/src/shared/assets/icons/sidebar/members.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 7a4 4 0 1 1-8 0a4 4 0 0 1 8 0m2 4a4 4 0 0 0 0-8m-4 11H7a5 5 0 0 0-5 5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2a5 5 0 0 0-5-5m6 0a5 5 0 0 1 5 5a2 2 0 0 1-2 2h-1.5" color="currentColor"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/pane-arrow.svg b/core/client/src/shared/assets/icons/sidebar/pane-arrow.svg
deleted file mode 100644
index 0b2a4cca..00000000
--- a/core/client/src/shared/assets/icons/sidebar/pane-arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M2 12c0-3.75 0-5.625.955-6.939A5 5 0 0 1 4.06 3.955C5.375 3 7.251 3 11 3h2c3.75 0 5.625 0 6.939.955a5 5 0 0 1 1.106 1.106C22 6.375 22 8.251 22 12s0 5.625-.955 6.939a5 5 0 0 1-1.106 1.106C18.625 21 16.749 21 13 21h-2c-3.75 0-5.625 0-6.939-.955a5 5 0 0 1-1.106-1.106C2 17.625 2 15.749 2 12m7.5-8.5v17M5 7h1.5M5 11h1.5"/><path d="m17 10l-1.226 1.057c-.516.445-.774.667-.774.943s.258.498.774.943L17 14"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/plan.svg b/core/client/src/shared/assets/icons/sidebar/plan.svg
deleted file mode 100644
index d5f9e04b..00000000
--- a/core/client/src/shared/assets/icons/sidebar/plan.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M10.52 7.052a1.17 1.17 0 0 1-.639-.636L8.93 4.257c-.178-.343-.69-.343-.858 0l-.952 2.16a1.28 1.28 0 0 1-.638.635l-1.214.524a.462.462 0 0 0 0 .838l1.214.524c.293.121.523.353.638.636l.952 2.169c.178.343.69.343.858 0l.952-2.17c.126-.282.356-.504.638-.635l1.214-.524a.462.462 0 0 0 0-.838zm15.054 6.503a3.73 3.73 0 0 1-1.922-1.977L20.79 4.81a1.432 1.432 0 0 0-2.58 0l-2.863 6.768a3.8 3.8 0 0 1-1.921 1.977l-3.622 1.64c-1.072.53-1.072 2.08 0 2.61l3.622 1.64a3.74 3.74 0 0 1 1.922 1.977l2.862 6.768a1.432 1.432 0 0 0 2.58 0l2.863-6.768a3.8 3.8 0 0 1 1.921-1.977l3.622-1.64c1.072-.53 1.072-2.08 0-2.61zM8.281 20.33c.16.392.454.696.822.872l1.55.725a.646.646 0 0 1 0 1.146l-1.55.725c-.368.176-.661.49-.822.872l-1.228 2.977a.61.61 0 0 1-1.106 0L4.72 24.67a1.66 1.66 0 0 0-.822-.872l-1.55-.725a.646.646 0 0 1 0-1.146l1.55-.725c.368-.176.661-.49.822-.872l1.228-2.977a.61.61 0 0 1 1.106 0z"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/settings.svg b/core/client/src/shared/assets/icons/sidebar/settings.svg
deleted file mode 100644
index f9e36ba2..00000000
--- a/core/client/src/shared/assets/icons/sidebar/settings.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="m21.318 7.141l-.494-.856c-.373-.648-.56-.972-.878-1.101c-.317-.13-.676-.027-1.395.176l-1.22.344c-.459.106-.94.046-1.358-.17l-.337-.194a2 2 0 0 1-.788-.967l-.334-.998c-.22-.66-.33-.99-.591-1.178c-.261-.19-.609-.19-1.303-.19h-1.115c-.694 0-1.041 0-1.303.19c-.261.188-.37.518-.59 1.178l-.334.998a2 2 0 0 1-.789.967l-.337.195c-.418.215-.9.275-1.358.17l-1.22-.345c-.719-.203-1.078-.305-1.395-.176c-.318.129-.505.453-.878 1.1l-.493.857c-.35.608-.525.911-.491 1.234c.034.324.268.584.736 1.105l1.031 1.153c.252.319.431.875.431 1.375s-.179 1.056-.43 1.375l-1.032 1.152c-.468.521-.702.782-.736 1.105s.14.627.49 1.234l.494.857c.373.647.56.971.878 1.1s.676.028 1.395-.176l1.22-.344a2 2 0 0 1 1.359.17l.336.194c.36.23.636.57.788.968l.334.997c.22.66.33.99.591 1.18c.262.188.609.188 1.303.188h1.115c.694 0 1.042 0 1.303-.189s.371-.519.59-1.179l.335-.997c.152-.399.428-.738.788-.968l.336-.194c.42-.215.9-.276 1.36-.17l1.22.344c.718.204 1.077.306 1.394.177c.318-.13.505-.454.878-1.101l.493-.857c.35-.607.525-.91.491-1.234s-.268-.584-.736-1.105l-1.031-1.152c-.252-.32-.431-.875-.431-1.375s.179-1.056.43-1.375l1.032-1.153c.468-.52.702-.781.736-1.105s-.14-.626-.49-1.234"/><path d="M15.52 12a3.5 3.5 0 1 1-7 0a3.5 3.5 0 0 1 7 0"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/tasks.svg b/core/client/src/shared/assets/icons/sidebar/tasks.svg
deleted file mode 100644
index d27140e9..00000000
--- a/core/client/src/shared/assets/icons/sidebar/tasks.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" color="currentColor"><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M8 13.75s1.6.912 2.4 2.25c0 0 2.4-5.25 5.6-7"/></g></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/assets/icons/sidebar/templates.svg b/core/client/src/shared/assets/icons/sidebar/templates.svg
deleted file mode 100644
index 7127f375..00000000
--- a/core/client/src/shared/assets/icons/sidebar/templates.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.5 6c0-1.54 0-2.31.347-2.876c.194-.317.46-.583.777-.777C4.189 2 4.96 2 6.5 2s2.31 0 2.876.347c.317.194.583.46.777.777c.347.565.347 1.336.347 2.876s0 2.31-.347 2.876c-.194.317-.46.583-.777.777C8.811 10 8.04 10 6.5 10s-2.31 0-2.876-.347a2.35 2.35 0 0 1-.777-.777C2.5 8.311 2.5 7.54 2.5 6m1.282 8.782c1.047-1.047 1.57-1.57 2.19-1.72a2.26 2.26 0 0 1 1.056 0c.62.15 1.143.673 2.19 1.72s1.57 1.57 1.72 2.19a2.3 2.3 0 0 1 0 1.056c-.15.62-.673 1.144-1.72 2.19s-1.57 1.57-2.19 1.72a2.26 2.26 0 0 1-1.056 0c-.62-.15-1.143-.673-2.19-1.72s-1.57-1.57-1.72-2.19a2.26 2.26 0 0 1 0-1.056c.15-.62.673-1.144 1.72-2.19M14 18c0-1.54 0-2.31.347-2.876c.194-.317.46-.583.777-.777C15.689 14 16.46 14 18 14s2.31 0 2.877.347c.316.194.582.46.776.777C22 15.689 22 16.46 22 18s0 2.31-.347 2.877a2.36 2.36 0 0 1-.776.776C20.31 22 19.54 22 18 22s-2.31 0-2.876-.347a2.35 2.35 0 0 1-.777-.776C14 20.31 14 19.54 14 18m4-16v8m4-4h-8" color="currentColor"/></svg>
\ No newline at end of file
diff --git a/core/client/src/shared/config/types-shared.ts b/core/client/src/shared/config/types-shared.ts
index 4c12169f..986a0288 100644
--- a/core/client/src/shared/config/types-shared.ts
+++ b/core/client/src/shared/config/types-shared.ts
@@ -1,4 +1,4 @@
-import type { Component } from 'vue'
+import type { IconifyIcon } from '@iconify/vue'
 
 interface Path {
   pathName: string
@@ -6,7 +6,7 @@ interface Path {
 
 export interface WorkspaceLink extends Path {
   name: string
-  icon?: Component | string
+  icon?: IconifyIcon | string
 }
 export interface ProjectLink extends Path {
   _id: string
diff --git a/core/client/src/shared/lib/composables/useLanguage.ts b/core/client/src/shared/lib/composables/useLanguage.ts
index b2e8bb47..c16dab15 100644
--- a/core/client/src/shared/lib/composables/useLanguage.ts
+++ b/core/client/src/shared/lib/composables/useLanguage.ts
@@ -1,44 +1,33 @@
-import type { Options } from '@/shared/ui/select/types'
-import type { Ref } from 'vue'
 import { useCookies } from '@vueuse/integrations/useCookies'
-import { effectScope, onScopeDispose, watch } from 'vue'
+import { type Ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-export function useLanguage(options: Options[], language: Ref<string>) {
-  const scope = effectScope()
+interface Value {
+  name: string
+  value: string
+}
 
-  const cookies = useCookies()
+export function useLanguage(values: Value[], language: Ref<string>) {
   const { locale } = useI18n()
+  const cookies = useCookies()
+
+  const setLanguage = (value: string) => {
+    locale.value = value
+    cookies.set('i18n', value)
+  }
 
-  scope.run(() => {
-    // resolves #31
-    watch(
-      () => locale.value,
-      (newLocale) => {
-        const selectedOption = options.find(
-          option => option.value === newLocale,
-        )
-        if (selectedOption) {
-          language.value = selectedOption.name
-        }
-      },
-      { immediate: true },
-    )
-    watch(
-      () => language.value,
-      (newLanguage) => {
-        const selectedOption = options.find(
-          option => option.name === newLanguage,
-        )
-        if (selectedOption) {
-          locale.value = selectedOption.value
-          cookies.set('i18n', selectedOption.value)
-        }
-      },
-    )
-  })
+  watch(
+    () => locale.value,
+    (newLocale) => {
+      const selectedOption = values.find(option => option.value === newLocale)
+      if (selectedOption) {
+        language.value = selectedOption.value
+      }
+    },
+    { immediate: true },
+  )
 
-  onScopeDispose(() => {
-    scope.stop()
-  })
+  return {
+    setLanguage,
+  }
 }
diff --git a/core/client/src/shared/lib/i18n/locales/en-US.ts b/core/client/src/shared/lib/i18n/locales/en-US.ts
index 22d29279..a36928f7 100644
--- a/core/client/src/shared/lib/i18n/locales/en-US.ts
+++ b/core/client/src/shared/lib/i18n/locales/en-US.ts
@@ -193,7 +193,7 @@ export default {
     ],
     back: 'To Home',
     auth_alert:
-      'authorization via google will be replaced with gitlab after 10.11.2024',
+      'authorization via google will be replaced with gitlab after 28.12.2024',
   },
   kanban: {
     sorting: {
@@ -246,7 +246,7 @@ export default {
       description:
         'Jenda is a cloud-based program for efficient collaborative and individual project and task management.',
       badge: 'Core: Task Boards, Real-Time Tracking',
-      badge_mobile: 'Core: Task Boards, Real-Time Tracking and etc.',
+      badge_mobile: 'Core: Boards, Real-Time and etc.',
       btn: 'Get started',
     },
     marketing: {
diff --git a/core/client/src/shared/lib/i18n/locales/ru-RU.ts b/core/client/src/shared/lib/i18n/locales/ru-RU.ts
index cb4d22b0..eabe95a9 100644
--- a/core/client/src/shared/lib/i18n/locales/ru-RU.ts
+++ b/core/client/src/shared/lib/i18n/locales/ru-RU.ts
@@ -196,7 +196,7 @@ export default {
     ],
     back: 'На главную',
     auth_alert:
-      'aвторизация через google будет заменена на gitlab после 10.11.2024',
+      'aвторизация через google будет заменена на gitlab после 28.12.2024',
   },
   kanban: {
     sorting: {
@@ -249,7 +249,7 @@ export default {
       description:
         'Jenda — это облачная программа для эффективного управления проектами и задачами как в команде, так и индивидуально.',
       badge: 'Основные функции: Доски задач, Отслеживание в реальном времени',
-      badge_mobile: 'Ядро: Проект с открытым исходным кодом',
+      badge_mobile: 'Ядро: Проекты, Коллаборации, ...',
       btn: 'Зарегистрироваться',
     },
     marketing: {
diff --git a/core/client/src/shared/lib/i18n/locales/zh-CN.ts b/core/client/src/shared/lib/i18n/locales/zh-CN.ts
index f05702ae..1719e285 100644
--- a/core/client/src/shared/lib/i18n/locales/zh-CN.ts
+++ b/core/client/src/shared/lib/i18n/locales/zh-CN.ts
@@ -181,7 +181,7 @@ export default {
     line: '或继续使用',
     privacy: ['点击继续即表示您同意我们的', '服务条款', '和', '隐私政策。'],
     back: '回到首页',
-    auth_alert: '通过 google 的授权将在 2024 年 11 月 10 日后被 gitlab 替代',
+    auth_alert: '通过 google 的授权将在 2024 年 12 月 28 日后被 gitlab 替代',
   },
   kanban: {
     sorting: {
diff --git a/core/client/src/shared/lib/shadcn/utils.ts b/core/client/src/shared/lib/shadcn/utils.ts
new file mode 100644
index 00000000..abba253f
--- /dev/null
+++ b/core/client/src/shared/lib/shadcn/utils.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/core/client/src/shared/lib/unocss/presets/presetUiKit.ts b/core/client/src/shared/lib/unocss/presets/presetUiKit.ts
new file mode 100644
index 00000000..df68f404
--- /dev/null
+++ b/core/client/src/shared/lib/unocss/presets/presetUiKit.ts
@@ -0,0 +1,9 @@
+import type { Preset } from 'unocss'
+import { shortcuts } from '../../../ui/shortcuts'
+
+export default function presetJendaUI(): Preset {
+  return {
+    name: '@jenda-ui/preset',
+    shortcuts,
+  }
+}
diff --git a/core/client/src/shared/ui/__docs__/Alert.mdx b/core/client/src/shared/ui/__docs__/Alert.mdx
index b1703990..c6a97874 100644
--- a/core/client/src/shared/ui/__docs__/Alert.mdx
+++ b/core/client/src/shared/ui/__docs__/Alert.mdx
@@ -17,9 +17,10 @@ The **UiAlert** component is a flexible alert element that can adapt to various
   {`
 | Prop             | Description                                                                                                                   |
 |------------------|-------------------------------------------------------------------------------------------------------------------------------|
-| variant          | Defines the alert's style. Options are: __default__, __secondary__, __ghost__, __destructive__, __outline__, and __dashed__. |
-| closable         | Determines if the alert displays a close button.                                                                             |
-| content          | Sets the main text or content for the alert.                                                                                 |
+| variant          | Defines the alert's style. Options are: __default__, __secondary__, __ghost__, __destructive__, __outline__, and __dashed__.  |
+| closable         | Determines if the alert displays a close button.                                                                              |
+| content          | Sets the main text or content for the alert.                                                                                  |
+| class            | Use for customize alert with unocss by type of HTMLAttributes['class']                                                        |
 `}
 </Markdown>
 
@@ -35,4 +36,4 @@ The **UiAlert** component is a flexible alert element that can adapt to various
 `}
 </Markdown>
 
-<Canvas of={AlertStories.SlottedAlert} />
\ No newline at end of file
+<Canvas of={AlertStories.SlottedAlert} />
diff --git a/core/client/src/shared/ui/__docs__/Badge.mdx b/core/client/src/shared/ui/__docs__/Badge.mdx
index 569289fb..eb81b170 100644
--- a/core/client/src/shared/ui/__docs__/Badge.mdx
+++ b/core/client/src/shared/ui/__docs__/Badge.mdx
@@ -15,10 +15,11 @@ The **UiBadge** component is a flexible badge that supports various styles, maki
 
 <Markdown>
   {`
-| Prop     | Description                                                                                              |
-|----------|----------------------------------------------------------------------------------------------------------|
-| variant  | Defines the badge style. Options are: __default__, __secondary__, __outline__.                          |
+| Prop     | Description                                                                                                                      |
+|----------|----------------------------------------------------------------------------------------------------------                        |
+| variant  | Defines the badge style. Options are: __default__, __secondary__, __outline__, __solid__, __colorized(success and destructive)__.|
+| class    | Use for customize badge with unocss by type of HTMLAttributes['class']                                                           |
 `}
 </Markdown>
 
-<Canvas of={BadgeStories.BadgeExampleProps} />
\ No newline at end of file
+<Canvas of={BadgeStories.BadgeExampleProps} />
diff --git a/core/client/src/shared/ui/__docs__/Button.mdx b/core/client/src/shared/ui/__docs__/Button.mdx
index aa244955..cbcd3dd0 100644
--- a/core/client/src/shared/ui/__docs__/Button.mdx
+++ b/core/client/src/shared/ui/__docs__/Button.mdx
@@ -15,13 +15,14 @@ The **UiButton** component is a versatile button that supports various sizes, th
 
 <Markdown>
   {`
-| Prop             | Description                                                                                                                   |
-|------------------|-------------------------------------------------------------------------------------------------------------------------------|
-| variant          | Defines the button's style. Options are: __default__, __secondary__, __ghost__, __destructive__, __outline__, and __dashed__. |
-| size             | Controls the button's size. Options are: __sm__ (small), __md__ (medium, default), and __lg__ (large).                        |
-| loading          | Shows a loading spinner when true, indicating a loading state.                                                                |
-| disabled         | Disables the button when true, setting it to an inactive state and reducing opacity to 0.6.                                   |
-| loadingPlacement | Defines where the loading spinner appears when __loading__ is true. Options are __leading__ (before content) and __trailing__.  |
+| Prop             | Description                                                                                                                                      |
+|------------------|-------------------------------------------------------------------------------------------------------------------------------                   |
+| variant          | Defines the button's style. Options are: __default__, __secondary__, __ghost__, __destructive__, __outline__, __dashed__, __solid__, __success__ |
+| size             | Controls the button's size. Options are: __sm__ (small), __default__ (medium, default), __xs__(xs) and __lg__ (large).                           |
+| loading          | Shows a loading spinner when true, indicating a loading state.                                                                                   |
+| disabled         | Disables the button when true, setting it to an inactive state and reducing opacity to 0.6.                                                      |
+| loadingPlacement | Defines where the loading spinner appears when __loading__ is true. Options are __leading__ (before content) and __trailing__.                   |
+| class            | Use for customize button with unocss by type of HTMLAttributes['class']                                                                          |
 `}
 </Markdown>
 
diff --git a/core/client/src/shared/ui/__docs__/Card.mdx b/core/client/src/shared/ui/__docs__/Card.mdx
deleted file mode 100644
index 837fea76..00000000
--- a/core/client/src/shared/ui/__docs__/Card.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-{/* Card.mdx */}
-
-import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
-import * as CardStories from '../card/UiCard.stories';
-
-<Meta of={CardStories} name="Docs" />
-
-# UiCard
-
-The **UiCard** component is a flexible and customizable container for displaying content, making it ideal for presenting information in a structured and visually appealing way.
-
-### Slots
-
-<Markdown>
-  {`
-| Slot       | Description                   |
-|------------|-------------------------------|
-| default    | Main content slot of the card |
-| user       | Slot for users in task card   |
-`}
-</Markdown>
-
-<Canvas of={CardStories.DefaultCard} />
-
-
diff --git a/core/client/src/shared/ui/__docs__/Dropdown.mdx b/core/client/src/shared/ui/__docs__/Dropdown.mdx
deleted file mode 100644
index 9549134c..00000000
--- a/core/client/src/shared/ui/__docs__/Dropdown.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-{/* Dropdown.mdx */}
-
-import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
-import * as DropdownStories from '../dropdown/UiDropdown.stories';
-
-<Meta of={DropdownStories} name="Docs" />
-
-# UiDropdown
-
-The **UiDropdown** component provides a versatile dropdown menu that supports various directional placements, along with customizable slots for header, trigger, and content.
-
-<Canvas of={DropdownStories.DefaultDropdown} />
-
-### Props
-
-<Markdown>
-  {`
-| Prop      | Description                                                                                             |
-|-----------|---------------------------------------------------------------------------------------------------------|
-| direction | Defines the dropdown's alignment. Options are: __left__, __center__ (default), and __right__.           |
-`}
-</Markdown>
-
-<Canvas of={DropdownStories.DropdownExampleProps} />
-
-### Slots
-
-<Markdown>
-  {`
-| Slot     | Description                                                                                             |
-|----------|---------------------------------------------------------------------------------------------------------|
-| trigger  | Slot for the trigger element that opens or closes the dropdown.                                         |
-| header   | Optional slot for the header section within the dropdown content, ideal for titles or icons.            |
-| content  | Slot for the main dropdown content. This area closes the dropdown when clicked.                         |
-`}
-</Markdown>
-
-<Canvas of={DropdownStories.SlottedDropdown} />
diff --git a/core/client/src/shared/ui/__docs__/DropdownMenu.mdx b/core/client/src/shared/ui/__docs__/DropdownMenu.mdx
new file mode 100644
index 00000000..9f524bae
--- /dev/null
+++ b/core/client/src/shared/ui/__docs__/DropdownMenu.mdx
@@ -0,0 +1,20 @@
+{/* Dropdown.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as DropdownStories from '../dropdown-menu/UiDropdownMenu.stories';
+
+<Meta of={DropdownStories} name="Docs" />
+
+# UiDropdown
+
+The **UiDropdown** component displays a menu to the user — such as a set of actions or functions — triggered by a button.
+
+### Main Components:
+
+`UiDropdown`, `UiDropdownTrigger`, `UiDropdownContent`, `UiDropdownItem`,
+
+<Canvas of={DropdownStories.DefaultDropdown} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/dropdown-menu
diff --git a/core/client/src/shared/ui/__docs__/GettingStarted.mdx b/core/client/src/shared/ui/__docs__/GettingStarted.mdx
index d854a502..e100d6a3 100644
--- a/core/client/src/shared/ui/__docs__/GettingStarted.mdx
+++ b/core/client/src/shared/ui/__docs__/GettingStarted.mdx
@@ -28,7 +28,10 @@ import { UiButton } from '@/shared/ui';
 
 Clone the [Jenda repository](https://github.com/mnenie/jenda) then start Storybook.
 
-`yarn && yarn run storybook`
+`pnpm i && pnpm run storybook`
+
+__if you have an errors in console with `iframe` just reload page__
+
 
 ### **Theme Support**
 
diff --git a/core/client/src/shared/ui/__docs__/Input.mdx b/core/client/src/shared/ui/__docs__/Input.mdx
index 36d062be..e1c72742 100644
--- a/core/client/src/shared/ui/__docs__/Input.mdx
+++ b/core/client/src/shared/ui/__docs__/Input.mdx
@@ -17,12 +17,8 @@ The **UiInput** component is a versatile input field that supports various types
   {`
 | Prop        | Description                                                                                                     |
 |-------------|-----------------------------------------------------------------------------------------------------------------|
-| type        | Specifies the input type. Options are: __text__, __password__, __number__, __email__.                           |
-| placeholder | Sets a placeholder text that appears in the input field before the user enters a value.                         |
 | modelValue  | The input field value. **Use __v-model__ to bind this prop to a data property.**                                |
-| disabled    | Disables the input, making it inactive and adjusting its style for a lower-opacity appearance.                  |
+| defaultValue| The default value                                                                                               |
+| class       | Use for customize input with unocss by type of HTMLAttributes['class']                                          |
   `}
 </Markdown>
-
-<Canvas of={InputStories.PaswordInput} />
-
diff --git a/core/client/src/shared/ui/__docs__/ProgressBar.mdx b/core/client/src/shared/ui/__docs__/ProgressBar.mdx
deleted file mode 100644
index b1d154d4..00000000
--- a/core/client/src/shared/ui/__docs__/ProgressBar.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-{/* ProgressBar.mdx */}
-
-import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
-import * as ProgressBarStories from '../progress-bar/UiProgressBar.stories';
-
-<Meta of={ProgressBarStories} name="Docs" />
-
-# UiProgressBar
-
-The **UiProgressBar** component is a flexible badge that supports various styles, making it suitable for different UI contexts.
-
-### Props
-
-<Markdown>
-  {`
-| Prop     | Description                   |
-|----------|-------------------------------|
-| progress  | Exposes the progress value   |
-`}
-</Markdown>
-
-<Canvas of={ProgressBarStories.DefaultProgressBar} />
diff --git a/core/client/src/shared/ui/__docs__/RadioGroup.mdx b/core/client/src/shared/ui/__docs__/RadioGroup.mdx
deleted file mode 100644
index 82b043eb..00000000
--- a/core/client/src/shared/ui/__docs__/RadioGroup.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-{/* ProgressBar.mdx */}
-
-import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
-import * as RadioGroupStories from '../radio-group/UiRadioGroup.stories';
-
-<Meta of={RadioGroupStories} name="Docs" />
-
-# UiRadioGroup
-
-The **UiRadioGroup** component provides a set of radio button options with customizable attributes, allowing users to select a single option from a group.
-
-### Props
-
-<Markdown>
-  {`
-| Prop        |Description                                                |
-|-------------|---------------------------------------------------------- |
-| inputId     |Specifies the unique ID for the input element.             |
-| modelValue  |Sets or retrieves the value of the selected radio item.    |
-| value       |Defines the value associated with a radio item.            |
-| name        |Specifies the name attribute to group related radio items. |
-`}
-</Markdown>
-
-<Canvas of={RadioGroupStories.DefaultUiRadioGroup} />
-
diff --git a/core/client/src/shared/ui/__docs__/Select.mdx b/core/client/src/shared/ui/__docs__/Select.mdx
index 23a1aa8e..c68b548e 100644
--- a/core/client/src/shared/ui/__docs__/Select.mdx
+++ b/core/client/src/shared/ui/__docs__/Select.mdx
@@ -7,18 +7,14 @@ import * as SelectStories from '../select/UiSelect.stories';
 
 # UiSelect
 
-The **UiSelect** component is a flexible selection input that can be displayed as a dropdown or a button, making it adaptable to various UI contexts.
+The **UiSelect** component displays a list of options for the user to pick from—triggered by a button.
 
-### Props
+### Main Components:
 
-<Markdown>
-  {`
-| Prop       | Description                                                  |
-|------------|--------------------------------------------------------------|
-| modelValue | The selected option's value.                                 |
-| options    | An array of options to display. Each option has a name and value. |
-| as         | Determines if the component renders as a button or select.   |
-  `}
-</Markdown>
+`UiSelect`, `UiSelectTrigger`, `UiSelectContent`, `UiSelectItem`,
 
 <Canvas of={SelectStories.DefaultSelect} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/select
diff --git a/core/client/src/shared/ui/__docs__/Sheet.mdx b/core/client/src/shared/ui/__docs__/Sheet.mdx
deleted file mode 100644
index 32a860a3..00000000
--- a/core/client/src/shared/ui/__docs__/Sheet.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-{/* Sheet.mdx */}
-
-import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
-import * as SheetStories from '../sheet/UiSheet.stories';
-
-<Meta of={SheetStories} name="Docs" />
-
-# UiSheet
-
-The **UiSheet** component is a versatile sheet panel that can be used for side-drawer-like interactions. It provides various customization options such as size, overlay, and transitions.
-
-<Canvas of={SheetStories.DefaultSheet} />
-
-### Props
-
-<Markdown>
-  {`
-| Prop              |Description                                                                                 |
-|-------------------|--------------------------------------------------------------------------------------------|
-| overlay           | Enables or disables the overlay background.                                                |
-| maxWidth          | Sets the maximum width of the sheet.                                                       |
-| transitionDuration| Controls the duration of the transition effect in seconds.                                 |
-| minWidth          | Sets the minimum width of the sheet.                                                       |
-| overlayClickClose | Determines if clicking on the overlay closes the sheet.                                    |
-  `}
-</Markdown>
-
-<Canvas of={SheetStories.SheetExampleProps} />
-
-### Slots
-
-<Markdown>
-  {`
-| Slot      | Description                                                                 |
-|-----------|-----------------------------------------------------------------------------|
-| default   | Main content slot for the sheet's body.                                     |
-| header    | Slot for custom header content.                                             |
-| footer    | Slot for footer content                                                     |
-  `}
-</Markdown>
-
-<Canvas of={SheetStories.SlottedSheet} />
diff --git a/core/client/src/shared/ui/_shortcuts/alert.ts b/core/client/src/shared/ui/_shortcuts/alert.ts
new file mode 100644
index 00000000..21e60b32
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/alert.ts
@@ -0,0 +1,20 @@
+type AlertPrefix = 'alert'
+
+export const staticAlert: Record<`${AlertPrefix}-${string}` | AlertPrefix, string> = {
+  'alert': 'relative flex items-center justify-center border border-solid gap-2.5 py-0.5 pl-2.5 rounded-8px mb-5 min-h-22px',
+  'alert-close': 'absolute top-1/2 transform -translate-y-1/2 right-2.5 text-sm text-neutral-700 cursor-pointer dark:text-neutral-200',
+
+  'alert-default': 'bg-neutral-50 border-neutral-200 text-neutral-800 dark:(bg-neutral-800 text-neutral-200 border-neutral-700)',
+  'alert-success': 'bg-green-50 border-green-200 text-neutral-950 dark:(bg-#1b4731 text-neutral-200 border-green-800)',
+  'alert-warning': 'bg-yellow-50 border-#f8d040 text-neutral-950 dark:(bg-#3d351a text-neutral-200 border-#9f8745)',
+  'alert-important': 'bg-red-50 border-red-600 text-neutral-950 dark:(bg-#692525 text-neutral-200 border-#c73939)',
+}
+
+export const dynamicAlert: [RegExp, (params: RegExpExecArray) => string][] = [
+  [/^alert-(solid|outline)-(.*)$/, ([, c, v]) => `alert-${c}-${v}`],
+]
+
+export const alert = [
+  ...dynamicAlert,
+  staticAlert,
+]
diff --git a/core/client/src/shared/ui/_shortcuts/badge.ts b/core/client/src/shared/ui/_shortcuts/badge.ts
new file mode 100644
index 00000000..d70086c8
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/badge.ts
@@ -0,0 +1,19 @@
+type BadgePrefix = 'badge'
+
+export const staticBadge: Record<`${BadgePrefix}-${string}` | BadgePrefix, string> = {
+  'badge': 'inline-flex items-center rounded-md border border-solid border-neutral-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:(outline-none ring-2 ring-neutral-950 ring-offset-2) dark:(border-neutral-700 focus:ring-neutral-300)',
+
+  'badge-default': 'border-transparent bg-neutral-900 text-neutral-50 shadow dark:(bg-neutral-50 text-neutral-900)',
+  'badge-secondary': 'border-transparent bg-neutral-100 text-neutral-900 dark:(bg-neutral-800 text-neutral-50)',
+  'badge-outline': 'text-neutral-950 dark:text-neutral-50',
+  'badge-solid': 'border-transparent bg-#266df0 text-neutral-50 shadow',
+}
+
+export const dynamicBadge: [RegExp, (params: RegExpExecArray) => string][] = [
+  [/^badge-colorized-(.*)$/, ([, c]) => `border-transparent bg-${c}-500 text-neutral-50 shadow dark:(bg-${c}-900 text-neutral-50 border-transparent)`],
+]
+
+export const badge = [
+  ...dynamicBadge,
+  staticBadge,
+]
diff --git a/core/client/src/shared/ui/_shortcuts/button.ts b/core/client/src/shared/ui/_shortcuts/button.ts
new file mode 100644
index 00000000..7a97373c
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/button.ts
@@ -0,0 +1,21 @@
+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-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-neutral-800 text-neutral-50 hover:bg-neutral-800/80)',
+  'btn-outline': 'border border-solid border-neutral-200 bg-white shadow-sm hover:(bg-neutral-100 text-neutral-900) dark:(border-neutral-700 bg-neutral-800 hover:bg-neutral-700/20 hover:text-neutral-50)',
+  'btn-ghost': 'bg-transparent hover:(bg-neutral-100 text-neutral-900) dark:(hover:bg-neutral-700/40 hover:text-neutral-50)',
+  'btn-dashed': 'border border-dashed border-neutral-200 bg-white shadow-sm hover:(bg-neutral-100 text-neutral-900) dark:(border-neutral-700 bg-neutral-800 hover:bg-neutral-700/20 hover:text-neutral-50)',
+}
+
+export const dynamicBtn: [RegExp, (params: RegExpExecArray) => string][] = [
+  [/^btn-solid(?:-(.+))?$/, ([, c = '#266df0']) => `bg-${c} text-neutral-50 shadow hover:bg-${c}/90`],
+  [/^btn-colorized-(.*)$/, ([, c]) => `bg-${c}-500 text-neutral-50 shadow-sm hover:bg-${c}-500/90 dark:(bg-${c}-900 text-neutral-50 hover:bg-${c}-900/90)`],
+]
+
+export const btn = [
+  ...dynamicBtn,
+  staticBtn,
+]
diff --git a/core/client/src/shared/ui/_shortcuts/dropdown-menu.ts b/core/client/src/shared/ui/_shortcuts/dropdown-menu.ts
new file mode 100644
index 00000000..0c07c2e6
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/dropdown-menu.ts
@@ -0,0 +1,19 @@
+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-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-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-trigger': 'outline-none',
+}
+
+export const dropdownMenu = [
+  staticDropdownMenu,
+]
diff --git a/core/client/src/shared/ui/_shortcuts/index.ts b/core/client/src/shared/ui/_shortcuts/index.ts
new file mode 100644
index 00000000..f9acd703
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/index.ts
@@ -0,0 +1,16 @@
+import type { Preset, StaticShortcutMap } from '@unocss/core'
+import { alert } from './alert'
+import { badge } from './badge'
+import { btn } from './button'
+import { dropdownMenu } from './dropdown-menu'
+import { input } from './input'
+import { select } from './select'
+
+export const shortcuts = [
+  ...btn,
+  ...input,
+  ...badge,
+  ...alert,
+  ...dropdownMenu,
+  ...select,
+] as Exclude<Preset['shortcuts'], undefined | StaticShortcutMap>
diff --git a/core/client/src/shared/ui/_shortcuts/input.ts b/core/client/src/shared/ui/_shortcuts/input.ts
new file mode 100644
index 00000000..5d25bd9d
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/input.ts
@@ -0,0 +1,9 @@
+type InputPrefix = 'input'
+
+export const staticInput: Record<`${InputPrefix}-${string}` | InputPrefix, string> = {
+  input: 'flex h-9 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)',
+}
+
+export const input = [
+  staticInput,
+]
diff --git a/core/client/src/shared/ui/_shortcuts/select.ts b/core/client/src/shared/ui/_shortcuts/select.ts
new file mode 100644
index 00000000..1510082c
--- /dev/null
+++ b/core/client/src/shared/ui/_shortcuts/select.ts
@@ -0,0 +1,17 @@
+type SelectPrefix = 'select'
+
+export const staticSelect: Record<`${SelectPrefix}-${string}` | SelectPrefix, string> = {
+  '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-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',
+  'select-separator': '-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800',
+  'select-trigger': 'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-solid border-neutral-200 bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-white data-[placeholder]:text-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-950 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start dark:(border-neutral-700 ring-offset-neutral-800 data-[placeholder]:text-neutral-400 focus:ring-neutral-300)',
+}
+
+export const select = [
+  staticSelect,
+]
diff --git a/core/client/src/shared/ui/alert/UiAlert.vue b/core/client/src/shared/ui/alert/UiAlert.vue
index 8690e895..fce124ac 100644
--- a/core/client/src/shared/ui/alert/UiAlert.vue
+++ b/core/client/src/shared/ui/alert/UiAlert.vue
@@ -1,73 +1,39 @@
 <script setup lang="ts">
-import type { AlertVariant } from './types'
-import { useDark } from '@vueuse/core'
-import { X } from 'lucide-vue-next'
-import { computed } from 'vue'
-import { variants } from '.'
+import { cn } from '@/shared/lib/shadcn/utils'
+import { computed, type HTMLAttributes } from 'vue'
+import { alertVariants, type AlertVariants } from '.'
 
 interface AlertProps {
-  variant?: AlertVariant
+  variant?: AlertVariants['variant']
   closable?: boolean
   content?: string
+  class?: HTMLAttributes['class']
 }
 
-const { variant = 'default', closable, content } = defineProps<AlertProps>()
+const { variant = 'default', closable, content, class: alertClass } = defineProps<AlertProps>()
 
 const emits = defineEmits(['close'])
 
-const isDark = useDark()
-
-const _styles = computed(() => {
-  return variants[variant]
-})
-
-const alertBgColor = computed(() =>
-  isDark.value ? _styles.value.dark.background : _styles.value.light.background,
-)
-const alertBorder = computed(() => (isDark.value ? _styles.value.dark.border : _styles.value.light.border))
-
 const valueOfRightPadding = computed(() => (closable ? '32px' : '10px'))
 </script>
 
 <template>
-  <div :class="$style.alert" :style="{ background: alertBgColor, border: alertBorder }">
+  <div
+    :class="cn(
+      'alert',
+      alertVariants({ variant }),
+      alertClass,
+    )"
+    :style="{ 'padding-right': valueOfRightPadding }"
+  >
     <slot v-if="$slots.default || content">
       <span class="text-sm">{{ content }}</span>
     </slot>
-    <X v-if="closable" :class="$style.x_mark" @click="emits('close')" />
+    <div
+      v-if="closable"
+      i-lucide-x
+      class="alert-close"
+      @click="emits('close')"
+    />
   </div>
 </template>
-
-<style module lang="scss">
-.alert {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 2px v-bind('valueOfRightPadding') 2px 10px;
-  border-radius: 8px;
-  margin-bottom: 20px;
-  min-height: 22px;
-
-  .x_mark {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    right: 10px;
-    width: 13px;
-    min-width: 13px;
-    color: var(--zinc-600);
-    cursor: pointer;
-  }
-}
-
-:global(html.dark) {
-  .alert {
-    .x_mark,
-    & span {
-      color: var(--zinc-200);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/alert/__tests__/UiAlert.spec.ts b/core/client/src/shared/ui/alert/__tests__/UiAlert.spec.ts
index b7c0d068..9d51da24 100644
--- a/core/client/src/shared/ui/alert/__tests__/UiAlert.spec.ts
+++ b/core/client/src/shared/ui/alert/__tests__/UiAlert.spec.ts
@@ -3,7 +3,7 @@ import { describe, expect, it } from 'vitest'
 import { nextTick } from 'vue'
 import UiAlert from '../UiAlert.vue'
 
-describe('uiAlert', () => {
+describe('tests for UiAlert', () => {
   const wrapper = shallowMount(UiAlert, {
     props: {
       variant: 'default',
diff --git a/core/client/src/shared/ui/alert/__tests__/__snapshots__/UiAlert.spec.ts.snap b/core/client/src/shared/ui/alert/__tests__/__snapshots__/UiAlert.spec.ts.snap
index 3bddd916..deb6e7e1 100644
--- a/core/client/src/shared/ui/alert/__tests__/__snapshots__/UiAlert.spec.ts.snap
+++ b/core/client/src/shared/ui/alert/__tests__/__snapshots__/UiAlert.spec.ts.snap
@@ -1,21 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiAlert > should have content at slot 1`] = `
-"<div class="alert" style="background: rgb(250, 250, 250); border: 1.5px solid #e4e4e7;">hello from alert<anonymous-stub class="x_mark"></anonymous-stub>
-</div>"
-`;
-
-exports[`UiAlert > should have content at slot and render x icon 1`] = `
-"<div class="alert" style="background: rgb(250, 250, 250); border: 1.5px solid #e4e4e7;">hello from alert<anonymous-stub class="x_mark"></anonymous-stub>
-</div>"
-`;
-
-exports[`UiAlert > should have content at slot and x icon 1`] = `
-"<div class="alert" style="background: rgb(250, 250, 250); border: 1.5px solid #e4e4e7;">hello from alert<anonymous-stub class="x_mark"></anonymous-stub>
-</div>"
-`;
-
-exports[`uiAlert > should have content at slot and render x icon 1`] = `
-"<div class="alert" style="background: rgb(250, 250, 250); border: 1.5px solid #e4e4e7;">hello from alert<anonymous-stub class="x_mark"></anonymous-stub>
+exports[`tests for UiAlert > should have content at slot and render x icon 1`] = `
+"<div class="alert alert alert-default" style="padding-right: 32px;">hello from alert<div i-lucide-x="" class="alert-close"></div>
 </div>"
 `;
diff --git a/core/client/src/shared/ui/alert/index.ts b/core/client/src/shared/ui/alert/index.ts
index 41901be6..40c4f8bc 100644
--- a/core/client/src/shared/ui/alert/index.ts
+++ b/core/client/src/shared/ui/alert/index.ts
@@ -1,49 +1,16 @@
-import type { AlertVariant, VariantChilds } from './types'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as UiAlert } from './UiAlert.vue'
 
-export const variants: Record<AlertVariant, VariantChilds> = {
-  default: {
-    light: {
-      background: '#fafafa',
-      border: '1.5px solid #e4e4e7',
-    },
-    dark: {
-      background: '#27272a',
-      border: '1.5px solid #3f3f46',
-    },
-  },
-  success: {
-    light: {
-      background:
-        'linear-gradient(0deg, rgba(0, 255, 0, 0.05), rgba(0, 255, 0, 0.05)), #f0fff4',
-      border: '1.5px solid #38a169',
-    },
-    dark: {
-      background: '#1b4731',
-      border: '1.5px solid #0b8141',
+export const alertVariants = cva('alert', {
+  variants: {
+    variant: {
+      default: 'alert-default',
+      success: 'alert-success',
+      warning: 'alert-warning',
+      important: 'alert-important',
     },
   },
-  warning: {
-    light: {
-      background:
-        'linear-gradient(0deg, rgba(255, 202, 13, 0.05), rgba(255, 202, 13, 0.05)), #fff',
-      border: '1.5px solid #f8d040',
-    },
-    dark: {
-      background: '#3d351a',
-      border: '1.5px solid #9f8745',
-    },
-  },
-  important: {
-    light: {
-      background:
-        'linear-gradient(0deg, rgba(255, 0, 0, 0.05), rgba(255, 0, 0, 0.05)), #fff5f5',
-      border: '1.5px solid #e53e3e',
-    },
-    dark: {
-      background: '#692525',
-      border: '1.5px solid #c73939',
-    },
-  },
-}
+})
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/core/client/src/shared/ui/alert/types.ts b/core/client/src/shared/ui/alert/types.ts
deleted file mode 100644
index c99e1b60..00000000
--- a/core/client/src/shared/ui/alert/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type AlertVariant = 'default' | 'success' | 'warning' | 'important'
-
-export interface VariantChilds {
-  light: {
-    background: string
-    border: string
-  }
-  dark: {
-    background: string
-    border: string
-  }
-}
diff --git a/core/client/src/shared/ui/badge/UiBadge.vue b/core/client/src/shared/ui/badge/UiBadge.vue
index e4741219..45da2af4 100644
--- a/core/client/src/shared/ui/badge/UiBadge.vue
+++ b/core/client/src/shared/ui/badge/UiBadge.vue
@@ -1,59 +1,16 @@
 <script setup lang="ts">
-import type { BadgeType } from './types'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/lib/shadcn/utils'
+import { type BadgeVariants, badgeVariants } from '.'
 
-const { variant = 'default' } = defineProps<{
-  variant?: BadgeType
+const { variant = 'default', class: badgeClass } = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
 }>()
 </script>
 
 <template>
-  <div class="text-xs" :class="[$style.badge, $style[variant]]">
+  <div :class="cn(badgeVariants({ variant }), badgeClass)">
     <slot />
   </div>
 </template>
-
-<style module lang="scss">
-.badge {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  white-space: nowrap;
-  border-radius: 6px;
-  font-weight: 500 !important;
-  padding: 1px 10px;
-}
-
-.default {
-  background-color: var(--zinc-900);
-  color: var(--zinc-50);
-}
-
-.secondary {
-  background-color: rgba(228, 228, 231, 0.8);
-  color: var(--zinc-950);
-}
-
-.outline {
-  border: 1px solid var(--zinc-200);
-  color: var(--zinc-900);
-  background-color: white;
-}
-
-:global(html.dark) {
-  .default {
-    background-color: var(--zinc-100);
-    color: var(--zinc-900);
-  }
-
-  .secondary {
-    background-color: rgba(var(--zinc-rgb-600), 0.5);
-    color: var(--zinc-200);
-  }
-
-  .outline {
-    background-color: var(--zinc-700);
-    border-color: var(--zinc-600);
-    color: var(--zinc-200);
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/badge/__tests__/UiBadge.spec.ts b/core/client/src/shared/ui/badge/__tests__/UiBadge.spec.ts
index 7e5d8546..9f47b53b 100644
--- a/core/client/src/shared/ui/badge/__tests__/UiBadge.spec.ts
+++ b/core/client/src/shared/ui/badge/__tests__/UiBadge.spec.ts
@@ -1,9 +1,9 @@
-import type { BadgeType } from '../types'
+import type { BadgeVariants } from '..'
 import { shallowMount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import UiBadge from '../UiBadge.vue'
 
-describe('uiBadge', () => {
+describe('tests for UiBadge', () => {
   const wrapper = shallowMount(UiBadge, {
     props: {
       variant: 'default',
@@ -24,15 +24,21 @@ describe('uiBadge', () => {
   })
 
   it('should apply correct styles for variants', () => {
-    const variants = ['default', 'secondary', 'outline'] as BadgeType[]
-    variants.forEach((variant) => {
+    const variants = [
+      'default',
+      'secondary',
+      'outline',
+      'solid',
+      'destructive',
+    ] as BadgeVariants['variant'][]
+    variants.forEach(() => {
       const wrapper = shallowMount(UiBadge, {
         props: {
-          variant,
+          variant: 'default',
         },
       })
       const badge = wrapper.find('div')
-      expect(badge.attributes('class')).toContain(`${variant}`)
+      expect(badge.attributes('class')).toContain(`badge-default`)
     })
   })
 })
diff --git a/core/client/src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap b/core/client/src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap
index df769ed7..3db2b9f6 100644
--- a/core/client/src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap
+++ b/core/client/src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap
@@ -1,5 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiBadge > should have content at slot 1`] = `"<div class="text-xs badge default">badge</div>"`;
-
-exports[`uiBadge > should have content at slot 1`] = `"<div class="text-xs badge default">badge</div>"`;
+exports[`tests for UiBadge > should have content at slot 1`] = `"<div class="badge badge-default">badge</div>"`;
diff --git a/core/client/src/shared/ui/badge/index.ts b/core/client/src/shared/ui/badge/index.ts
index 5a7c3bf4..b6ffe72f 100644
--- a/core/client/src/shared/ui/badge/index.ts
+++ b/core/client/src/shared/ui/badge/index.ts
@@ -1 +1,18 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
 export { default as UiBadge } from './UiBadge.vue'
+
+export const badgeVariants = cva('badge', {
+  variants: {
+    variant: {
+      default: 'badge-default',
+      secondary: 'badge-secondary',
+      destructive: 'badge-colorized-red',
+      success: 'badge-colorized-green',
+      solid: 'badge-solid',
+      outline: 'badge-outline',
+    },
+  },
+})
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/core/client/src/shared/ui/badge/types.ts b/core/client/src/shared/ui/badge/types.ts
deleted file mode 100644
index 8b9e61fc..00000000
--- a/core/client/src/shared/ui/badge/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type BadgeType = 'default' | 'secondary' | 'outline'
diff --git a/core/client/src/shared/ui/button/UiButton.stories.ts b/core/client/src/shared/ui/button/UiButton.stories.ts
index fda99203..413167bb 100644
--- a/core/client/src/shared/ui/button/UiButton.stories.ts
+++ b/core/client/src/shared/ui/button/UiButton.stories.ts
@@ -1,5 +1,4 @@
 import type { Meta, StoryFn } from '@storybook/vue3'
-import { File } from '@/shared/assets/icons'
 import UiButton from './UiButton.vue'
 
 export default {
@@ -8,7 +7,7 @@ export default {
   argTypes: {
     size: {
       control: { type: 'radio' },
-      options: ['sm', 'md', 'lg'],
+      options: ['sm', 'default', 'lg'],
       defaultValue: 'md',
     },
     variant: {
@@ -34,7 +33,7 @@ const Template: StoryFn<typeof UiButton> = (args) => {
     },
     template: `
     <UiButton v-bind="args">
-        <template v-if="${'leading' in args}" v-slot:leading>${args.leading}</template> 
+        <template v-if="${'leading' in args}" v-slot:leading>${args.leading}</template>
         <template v-if="${'default' in args}" v-slot>${args.default}</template>
         <template v-if="${'trailing' in args}" v-slot:trailing>${args.trailing}</template>
     </UiButton>
@@ -45,7 +44,7 @@ const Template: StoryFn<typeof UiButton> = (args) => {
 export const DefaultButton: StoryFn<typeof UiButton> = Template.bind({})
 
 DefaultButton.args = {
-  size: 'md',
+  size: 'default',
   variant: 'default',
   default: `Get Started`,
 }
@@ -54,16 +53,16 @@ export const ButtonExampleProps: StoryFn<typeof UiButton> = Template.bind({})
 
 ButtonExampleProps.args = {
   size: 'sm',
-  variant: 'destructive',
-  default: `Delete`,
+  variant: 'solid',
+  default: `Create task`,
 }
 
 export const SlottedButton: StoryFn<typeof UiButton> = Template.bind({})
 
 SlottedButton.args = {
-  size: 'md',
+  size: 'default',
   variant: 'default',
-  leading: `<File style="width: 16px; height: 16px;" />`,
+  leading: `<div i-hugeicons-cloud-download />`,
   default: `
       Download
     `,
diff --git a/core/client/src/shared/ui/button/UiButton.vue b/core/client/src/shared/ui/button/UiButton.vue
index 64fa57fd..247db149 100644
--- a/core/client/src/shared/ui/button/UiButton.vue
+++ b/core/client/src/shared/ui/button/UiButton.vue
@@ -1,233 +1,49 @@
 <script setup lang="ts">
-import type { ButtonSize, ButtonType } from './types'
-import { Spin } from '@/shared/assets/icons'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/lib/shadcn/utils'
 import { createReusableTemplate } from '@vueuse/core'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
 
-interface ButtonProps {
-  variant?: ButtonType
-  size?: ButtonSize
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
   loading?: boolean
   disabled?: boolean
   loadingPlacement?: 'leading' | 'trailing'
 }
 
-const { variant = 'default', size = 'md', loadingPlacement = 'leading' } = defineProps<ButtonProps>()
+const {
+  variant = 'default',
+  size = 'default',
+  loadingPlacement = 'leading',
+  class: btnClass,
+  as = 'button',
+} = defineProps<Props>()
 
 const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
 </script>
 
 <template>
-  <button
-    class="text-sm"
-    :class="[$style.button, $style[variant], $style[size]]"
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), btnClass)"
     :disabled="loading || disabled"
   >
     <DefineTemplate v-if="loading">
       <slot name="loading">
-        <Spin :class="$style.loader" />
+        <div i-lucide-loader-circle class="h-4 w-4 animate-spin" />
       </slot>
     </DefineTemplate>
 
     <ReuseTemplate v-if="loading && loadingPlacement === 'leading'" />
-
     <slot v-else name="leading" />
 
     <slot />
 
     <ReuseTemplate v-if="loading && loadingPlacement === 'trailing'" />
-
     <slot v-else name="trailing" />
-  </button>
+  </Primitive>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.button {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  white-space: nowrap;
-  border-radius: 6px;
-  font-weight: 500 !important;
-  opacity: 1;
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-    pointer-events: none;
-  }
-
-  @include on-focus {
-    outline: none;
-  }
-  @include transition;
-}
-
-.default {
-  background-color: var(--zinc-900);
-  color: var(--zinc-50);
-  box-shadow:
-    0 1px 3px 0 rgb(0 0 0 / 0.1),
-    0 1px 2px -1px rgb(0 0 0 / 0.1);
-
-  @include on-hover {
-    background-color: rgba(var(--zinc-rgb-900), 0.9);
-  }
-  &:disabled {
-    opacity: 0.5;
-  }
-}
-
-.secondary {
-  background-color: rgba(231, 231, 231, 0.6);
-  color: var(--zinc-900);
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  @include on-hover {
-    background-color: rgba(228, 228, 231, 0.5);
-  }
-  &:disabled {
-    opacity: 0.5;
-  }
-}
-
-.destructive {
-  background-color: white;
-  color: var(--destructive);
-  border: 1px solid var(--destructive);
-
-  @include on-hover {
-    opacity: 0.9;
-    background-color: rgb(254 242 242);
-  }
-  &:disabled {
-    opacity: 0.5;
-  }
-}
-
-.ghost {
-  background-color: transparent;
-  color: var(--zinc-900);
-
-  @include on-hover {
-    background-color: var(--zinc-100);
-  }
-  &:disabled {
-    opacity: 0.5;
-  }
-}
-
-.outline {
-  border: 1px solid var(--zinc-200);
-  color: var(--zinc-900);
-  background-color: white;
-
-  @include on-hover {
-    background-color: var(--zinc-100);
-  }
-  &:disabled {
-    opacity: 0.5;
-  }
-}
-
-.dashed {
-  border: 1px dashed var(--zinc-200);
-  color: var(--zinc-900);
-  background-color: white;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  @include on-hover {
-    background-color: var(--zinc-50);
-  }
-}
-
-.md {
-  height: 34px;
-  padding: 8px 16px;
-  gap: 8px;
-}
-
-.lg {
-  height: 36px;
-  padding: 8px 18px;
-  gap: 10px;
-}
-
-.sm {
-  height: 28px;
-  padding: 8px 12px;
-  gap: 6px;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.loader{
-  animation: spin 1s linear infinite;
-  font-size: 16px;
-}
-
-:global(html.dark) {
-  .default {
-    background-color: var(--zinc-100);
-    color: var(--zinc-950);
-
-    @include on-hover {
-      background-color: rgba(var(--zinc-rgb-50), 0.9);
-    }
-  }
-
-  .secondary {
-    background-color: rgba(var(--zinc-rgb-600), 0.55);
-    color: var(--zinc-200);
-
-    @include on-hover {
-      background-color: rgba(var(--zinc-rgb-600), 0.5);
-    }
-  }
-  .ghost {
-    color: var(--zinc-100);
-
-    @include on-hover {
-      background-color: rgba(var(--zinc-rgb-600), 0.4);
-    }
-  }
-
-  .outline {
-    border: 1px solid var(--zinc-600);
-    color: var(--zinc-200);
-    background-color: rgba(var(--zinc-rgb-700), 0.8);
-
-    @include on-hover {
-      border-color: var(--zinc-500);
-    }
-  }
-
-  .destructive {
-    background-color: var(--dark-destructive);
-    color: var(--zinc-100);
-    border-color: var(--dark-destructive);
-
-    @include on-hover {
-      background-color: rgba(var(--dark-rgb-destructive), 0.95);
-    }
-  }
-
-  .dashed {
-    border: 1px dashed var(--zinc-600);
-    color: var(--zinc-200);
-    background-color: rgba(var(--zinc-rgb-600), 0.5);
-
-    @include on-hover {
-      background-color: rgba(var(--zinc-rgb-600), 0.4);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/button/__tests__/UiButton.spec.ts b/core/client/src/shared/ui/button/__tests__/UiButton.spec.ts
index 496c8912..8da7f33e 100644
--- a/core/client/src/shared/ui/button/__tests__/UiButton.spec.ts
+++ b/core/client/src/shared/ui/button/__tests__/UiButton.spec.ts
@@ -1,13 +1,15 @@
-import type { ButtonSize, ButtonType } from '../types'
-import { shallowMount } from '@vue/test-utils'
+import type { ButtonVariants } from '..'
+import { mount, shallowMount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import UiButton from '../UiButton.vue'
 
-describe('uiButton', () => {
+describe('tests for UiButton', () => {
+  // with <primitive-stub />
   const wrapper = shallowMount(UiButton, {
     props: {
       variant: 'default',
-      size: 'md',
+      size: 'default',
+      as: 'button',
     },
   })
 
@@ -28,35 +30,37 @@ describe('uiButton', () => {
     const variants = [
       'default',
       'secondary',
+      'solid',
       'destructive',
       'ghost',
       'outline',
       'dashed',
-    ] as ButtonType[]
+    ] as ButtonVariants['variant'][]
 
-    variants.forEach((variant) => {
-      const wrapper = shallowMount(UiButton, {
+    variants.forEach(() => {
+      const wrapper = mount(UiButton, {
         props: {
-          variant,
-          size: 'md',
+          variant: 'solid',
+          size: 'default',
         },
       })
       const button = wrapper.find('button')
-      expect(button.attributes('class')).toContain(`${variant}`)
+      expect(button.exists()).toBe(true)
+      expect(button.attributes('class')).toContain('btn-solid')
     })
   })
 
   it('should apply correct styles for size', () => {
-    const sizes = ['lg', 'md', 'sm'] as ButtonSize[]
-    sizes.forEach((size) => {
-      const wrapper = shallowMount(UiButton, {
+    const sizes = ['lg', 'default', 'sm'] as ButtonVariants['size'][]
+    sizes.forEach(() => {
+      const wrapper = mount(UiButton, {
         props: {
           variant: 'dashed',
-          size,
+          size: 'sm',
         },
       })
       const button = wrapper.find('button')
-      expect(button.attributes('class')).toContain(`${size}`)
+      expect(button.attributes('class')).toContain(`h-8`)
     })
   })
 })
diff --git a/core/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap b/core/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
index 4f9665c2..380fca10 100644
--- a/core/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
+++ b/core/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
@@ -1,13 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiButton > should have content at slot 1`] = `
-"<button class="text-sm button default md">
-  <!--v-if-->ui button
-</button>"
-`;
+exports[`tests for UiButton > should have content at slot 1`] = `"<primitive-stub aschild="false" as="button" class="btn btn-default h-34px px-4 py-2" disabled="false"></primitive-stub>"`;
 
-exports[`uiButton > should have content at slot 1`] = `
-"<button class="text-sm button default md">
-  <!--v-if-->ui button
-</button>"
-`;
+exports[`uiButton > should have content at slot 1`] = `"<primitive-stub aschild="false" as="button" class="btn btn-default h-34px px-4 py-2" disabled="false"></primitive-stub>"`;
diff --git a/core/client/src/shared/ui/button/index.ts b/core/client/src/shared/ui/button/index.ts
index 4f0380dd..93e992b4 100644
--- a/core/client/src/shared/ui/button/index.ts
+++ b/core/client/src/shared/ui/button/index.ts
@@ -1 +1,26 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
 export { default as UiButton } from './UiButton.vue'
+
+export const buttonVariants = cva('btn', {
+  variants: {
+    variant: {
+      default: 'btn-default',
+      solid: 'btn-solid',
+      destructive: 'btn-colorized-red',
+      success: 'btn-colorized-green',
+      outline: 'btn-outline',
+      secondary: 'btn-secondary',
+      ghost: 'btn-ghost',
+      dashed: 'btn-dashed',
+    },
+    size: {
+      default: 'h-34px px-4 py-2',
+      xs: 'h-7 rounded px-2 text-xs',
+      sm: 'h-8 rounded-md px-3',
+      lg: 'h-38px rounded-md px-8',
+    },
+  },
+})
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/core/client/src/shared/ui/button/types.ts b/core/client/src/shared/ui/button/types.ts
deleted file mode 100644
index 37d05864..00000000
--- a/core/client/src/shared/ui/button/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type ButtonType =
-  | 'default'
-  | 'secondary'
-  | 'ghost'
-  | 'destructive'
-  | 'outline'
-  | 'dashed'
-export type ButtonSize = 'sm' | 'md' | 'lg'
diff --git a/core/client/src/shared/ui/card/UiCard.stories.ts b/core/client/src/shared/ui/card/UiCard.stories.ts
deleted file mode 100644
index 247a7b85..00000000
--- a/core/client/src/shared/ui/card/UiCard.stories.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import UiCard from './UiCard.vue'
-
-export default {
-  title: 'UiCard',
-  component: UiCard,
-} as Meta<typeof UiCard>
-
-const Template: StoryFn<typeof UiCard> = args => ({
-  components: { UiCard },
-  setup() {
-    return { args }
-  },
-  template: `<UiCard v-bind="args">
-    <template v-if="${'user' in args}" v-slot:user>${args.user}</template> 
-    <template v-if="${'default' in args}" v-slot>${args.default}</template>
-  </UiCard>`,
-})
-
-export const DefaultCard: StoryFn<typeof UiCard> = Template.bind({})
-
-DefaultCard.args = {
-  default: `
-  <p class="text-xl">Card Example</p>
-  <p class="text-sm">use to display content in a flexible container component.</p>`,
-}
diff --git a/core/client/src/shared/ui/card/UiCard.vue b/core/client/src/shared/ui/card/UiCard.vue
index ad8d5378..aa790725 100644
--- a/core/client/src/shared/ui/card/UiCard.vue
+++ b/core/client/src/shared/ui/card/UiCard.vue
@@ -6,37 +6,10 @@ defineSlots<{
 </script>
 
 <template>
-  <div class="text-sm" :class="$style.card">
+  <div class="relative flex flex-col p-1.5 rounded-8px shadow-sm border border-solid border-neutral-200 text-sm dark:border-neutral-700">
     <slot />
-    <div :class="$style.user_container">
+    <div class="absolute bottom-1.5 top-1.5 w-fit">
       <slot name="user" />
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  border: 1px solid var(--zinc-200);
-  border-radius: 8px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  padding: 6px;
-  width: 100%;
-}
-
-.user_container {
-  position: absolute;
-  width: fit-content;
-  bottom: 6px;
-  right: 6px;
-}
-
-:global(html.dark){
-  .card{
-    border: 1px solid var(--zinc-600);
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/card/__tests__/UiCard.spec.ts b/core/client/src/shared/ui/card/__tests__/UiCard.spec.ts
deleted file mode 100644
index 2fc43846..00000000
--- a/core/client/src/shared/ui/card/__tests__/UiCard.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import UiCard from '../UiCard.vue'
-
-describe('uiCard', () => {
-  const wrapper = mount(UiCard, {
-    slots: {
-      default: 'card',
-      user: `<div>users 👥</div>`,
-    },
-  })
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-})
diff --git a/core/client/src/shared/ui/card/__tests__/__snapshots__/UiCard.spec.ts.snap b/core/client/src/shared/ui/card/__tests__/__snapshots__/UiCard.spec.ts.snap
deleted file mode 100644
index 334f05a1..00000000
--- a/core/client/src/shared/ui/card/__tests__/__snapshots__/UiCard.spec.ts.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UiCard > should render correctly 1`] = `
-"<div class="text-sm card">card<div class="user_container">
-    <div>users 👥</div>
-  </div>
-</div>"
-`;
-
-exports[`uiCard > should render correctly 1`] = `
-"<div class="text-sm card">card<div class="user_container">
-    <div>users 👥</div>
-  </div>
-</div>"
-`;
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenu.stories.ts b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenu.stories.ts
new file mode 100644
index 00000000..9c9fa9d8
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenu.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta, StoryFn } from '@storybook/vue3'
+import { UiButton } from '../button'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiDropdownMenuTrigger,
+} from './index'
+
+export default {
+  title: 'UiDropdownMenu',
+  component: UiDropdownMenu,
+} as Meta<typeof UiDropdownMenu>
+
+const Template: StoryFn<typeof UiDropdownMenu> = args => ({
+  components: {
+    UiDropdownMenu,
+    UiDropdownMenuItem,
+    UiDropdownMenuTrigger,
+    UiDropdownMenuContent,
+    UiButton,
+  },
+  setup() {
+    return { args }
+  },
+  template: `<div style="padding: 60px">
+  <UiDropdownMenu>
+    <UiDropdownMenuTrigger as-child>
+      <UiButton variant="dashed">Open</UiButton>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent>
+      <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
+      <UiDropdownMenuItem>Billing</UiDropdownMenuItem>
+      <UiDropdownMenuItem>Team</UiDropdownMenuItem>
+      <UiDropdownMenuItem>Subscription</UiDropdownMenuItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+  </div>`,
+})
+
+export const DefaultDropdown: StoryFn<typeof UiDropdownMenu> = Template.bind({})
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenu.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenu.vue
new file mode 100644
index 00000000..b83d90b8
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenu.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuCheckboxItem.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuCheckboxItem.vue
new file mode 100644
index 00000000..ed46f4d3
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuCheckboxItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'dropdown-menu-checkbox-item',
+      props.class,
+    )"
+  >
+    <span class="dropdown-menu-checkbox-item-indicator">
+      <DropdownMenuItemIndicator>
+        <div i-lucide-check class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuContent.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuContent.vue
new file mode 100644
index 00000000..2a3946ae
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuContent.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        'dropdown-menu-content data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuGroup.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuGroup.vue
new file mode 100644
index 00000000..3f201352
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuGroup.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuItem.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuItem.vue
new file mode 100644
index 00000000..2eaee13e
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuItem.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'dropdown-menu-item',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuLabel.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuLabel.vue
new file mode 100644
index 00000000..5045f27e
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuLabel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn(
+      'dropdown-menu-label',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSeparator.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSeparator.vue
new file mode 100644
index 00000000..c8a1a27a
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSeparator.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DropdownMenuSeparator
+    v-bind="delegatedProps"
+    :class="cn(
+      'dropdown-menu-separator',
+      props.class,
+    )"
+  />
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuShortcut.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuShortcut.vue
new file mode 100644
index 00000000..004a77af
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuShortcut.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/lib/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'dropdown-menu-shortcut',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSub.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSub.vue
new file mode 100644
index 00000000..e0f4bd77
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  DropdownMenuSub,
+  type DropdownMenuSubEmits,
+  type DropdownMenuSubProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DropdownMenuSub v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubContent.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubContent.vue
new file mode 100644
index 00000000..aa1dc4b2
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DropdownMenuSubContent
+    v-bind="forwarded"
+    :class="cn(
+      'dropdown-menu-sub-content data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuSubContent>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubTrigger.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubTrigger.vue
new file mode 100644
index 00000000..74941370
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DropdownMenuSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'dropdown-menu-sub-trigger',
+      props.class,
+    )"
+  >
+    <slot />
+    <div i-lucide-chevron-right class="ml-auto h-4 w-4" />
+  </DropdownMenuSubTrigger>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuTrigger.vue b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuTrigger.vue
new file mode 100644
index 00000000..c7d632a4
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/UiDropdownMenuTrigger.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    v-bind="forwardedProps"
+    class="dropdown-menu-trigger"
+  >
+    <slot />
+  </DropdownMenuTrigger>
+</template>
diff --git a/core/client/src/shared/ui/dropdown-menu/__tests__/UiDropdownMenu.spec.ts b/core/client/src/shared/ui/dropdown-menu/__tests__/UiDropdownMenu.spec.ts
new file mode 100644
index 00000000..8ad33425
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/__tests__/UiDropdownMenu.spec.ts
@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiDropdownMenu from '../UiDropdownMenu.vue'
+
+describe('tests for UiDropdownMenu', () => {
+  const wrapper = mount(UiDropdownMenu, {
+    slots: { default: '<div>test</div>' },
+    props: { defaultOpen: true },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toContain('<div>test</div>')
+  })
+
+  it('should pass defaultOpen prop to DropdownMenuRoot', () => {
+    const root = wrapper.findComponent({ name: 'DropdownMenuRoot' })
+    expect(root.props('defaultOpen')).toBe(true)
+  })
+
+  it('should emit events correctly', () => {
+    wrapper.vm.$emit('openChange', true)
+    expect(wrapper.emitted('openChange')).toBeTruthy()
+    expect(wrapper.emitted('openChange')?.[0]).toEqual([true])
+  })
+})
+
+// more tests: https://github.com/unovue/radix-vue/blob/main/packages/radix-vue/src/DropdownMenu/DropdownMenu.test.ts
diff --git a/core/client/src/shared/ui/dropdown-menu/index.ts b/core/client/src/shared/ui/dropdown-menu/index.ts
new file mode 100644
index 00000000..b0cde6e4
--- /dev/null
+++ b/core/client/src/shared/ui/dropdown-menu/index.ts
@@ -0,0 +1,13 @@
+export { default as UiDropdownMenu } from './UiDropdownMenu.vue'
+export { default as UiDropdownMenuCheckboxItem } from './UiDropdownMenuCheckboxItem.vue'
+export { default as UiDropdownMenuContent } from './UiDropdownMenuContent.vue'
+export { default as UiDropdownMenuGroup } from './UiDropdownMenuGroup.vue'
+export { default as UiDropdownMenuItem } from './UiDropdownMenuItem.vue'
+export { default as UiDropdownMenuLabel } from './UiDropdownMenuLabel.vue'
+export { default as UiDropdownMenuSeparator } from './UiDropdownMenuSeparator.vue'
+export { default as UiDropdownMenuShortcut } from './UiDropdownMenuShortcut.vue'
+export { default as UiDropdownMenuSub } from './UiDropdownMenuSub.vue'
+export { default as UiDropdownMenuSubContent } from './UiDropdownMenuSubContent.vue'
+export { default as UiDropdownMenuSubTrigger } from './UiDropdownMenuSubTrigger.vue'
+export { default as UiDropdownMenuTrigger } from './UiDropdownMenuTrigger.vue'
+export { DropdownMenuPortal } from 'radix-vue'
diff --git a/core/client/src/shared/ui/dropdown/UiDropdown.stories.ts b/core/client/src/shared/ui/dropdown/UiDropdown.stories.ts
deleted file mode 100644
index af499b45..00000000
--- a/core/client/src/shared/ui/dropdown/UiDropdown.stories.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import { UiDropdown, UiDropdownItem, UiDropdownShortcut } from '.'
-import { UiButton } from '../button'
-
-export default {
-  title: 'UiDropdown',
-  component: UiDropdown,
-  argTypes: {
-    direction: {
-      control: { type: 'select' },
-      options: ['left', 'center', 'right'],
-    },
-  },
-} as Meta<typeof UiDropdown>
-
-const Template: StoryFn<typeof UiDropdown> = args => ({
-  components: { UiDropdown, UiDropdownItem, UiDropdownShortcut, UiButton },
-  setup() {
-    return { args }
-  },
-  template: `<div style="padding: 60px">
-  <UiDropdown v-bind="args">
-    <template v-slot:trigger>
-      ${args.trigger}
-    </template>
-    <template #header>
-      dropdown header
-    </template>
-    <template #content>
-      <UiDropdownItem>
-        item 1
-        <UiDropdownShortcut>⇧1</UiDropdownShortcut>
-      </UiDropdownItem>
-    </template>
-  </UiDropdown>
-  </div>`,
-})
-
-export const DefaultDropdown: StoryFn<typeof UiDropdown> = Template.bind({})
-
-DefaultDropdown.args = {
-  direction: 'center',
-  trigger: `<UiButton>Open</UiButton>`,
-}
-
-export const DropdownExampleProps: StoryFn<typeof UiDropdown> = Template.bind(
-  {},
-)
-
-DropdownExampleProps.args = {
-  direction: 'right',
-  trigger: `<UiButton>Open</UiButton>`,
-}
-
-export const SlottedDropdown: StoryFn<typeof UiDropdown> = Template.bind({})
-
-SlottedDropdown.args = {
-  direction: 'center',
-  trigger: `<p>👋</p>`,
-}
diff --git a/core/client/src/shared/ui/dropdown/UiDropdown.vue b/core/client/src/shared/ui/dropdown/UiDropdown.vue
deleted file mode 100644
index c6a082a7..00000000
--- a/core/client/src/shared/ui/dropdown/UiDropdown.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
-import { computed, ref, useTemplateRef } from 'vue'
-
-const { direction = 'center' } = defineProps<{
-  direction?: 'left' | 'center' | 'right'
-}>()
-
-defineSlots<{
-  header: () => any
-  trigger: () => any
-  content: () => any
-}>()
-
-const isOpen = ref(false)
-const dropdown = useTemplateRef<HTMLElement | null>('dropdown')
-
-function handleDropdown() {
-  isOpen.value = !isOpen.value
-}
-function onDropdownContent() {
-  isOpen.value = false
-}
-
-onClickOutside(dropdown, () => {
-  isOpen.value = false
-})
-
-const dropdownStyles = computed(() => {
-  if (direction === 'left') {
-    return { top: '36px', left: '0px', transform: 'translateX(0%)' }
-  }
-  else if (direction === 'center') {
-    return { top: '36px', left: '50%', transform: 'translateX(-50%)' }
-  }
-  else {
-    return { top: '36px', right: '0px', transform: 'translateX(0%)' }
-  }
-})
-</script>
-
-<template>
-  <div ref="dropdown" :class="$style.dropdown">
-    <div :class="$style.wrapper" @click="handleDropdown">
-      <slot name="trigger" />
-    </div>
-    <Transition name="dropdown">
-      <div v-if="isOpen" :class="$style.inside" :style="dropdownStyles">
-        <div v-if="$slots.header" class="text-sm" :class="[$style.header]">
-          <slot name="header" />
-        </div>
-        <div :class="$style.content" @click="onDropdownContent">
-          <slot name="content" />
-        </div>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style module lang="scss">
-.dropdown {
-  position: relative;
-  z-index: 9999;
-
-  .wrapper {
-    max-height: 29px;
-  }
-
-  .inside {
-    position: absolute;
-    max-height: 24rem;
-    height: fit-content;
-    min-width: 8rem;
-    width: fit-content;
-    border-radius: 6px;
-    border: 1px solid var(--zinc-200);
-    background-color: white;
-    color: var(--zinc-900);
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    text-wrap: nowrap;
-
-    .header {
-      width: 100%;
-      padding: 0.5rem 10px;
-      border-bottom: 1px solid var(--zinc-200);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 20px;
-    }
-
-    .content {
-      width: 100%;
-      padding: 4px;
-    }
-  }
-}
-
-:global(html.dark) {
-  .dropdown {
-    .inside {
-      background-color: rgba(52, 52, 52, 1);
-      color: var(--zinc-200);
-      border-color: var(--zinc-600);
-      .header {
-        border-color: var(--zinc-600);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/dropdown/UiDropdownItem.vue b/core/client/src/shared/ui/dropdown/UiDropdownItem.vue
deleted file mode 100644
index 96a165c6..00000000
--- a/core/client/src/shared/ui/dropdown/UiDropdownItem.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div :class="$style.item">
-    <slot />
-  </div>
-</template>
-
-<style module lang="scss">
-.item {
-  cursor: pointer;
-  user-select: none;
-  padding: 6px 8px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-  font-weight: 500;
-  font-size: 12px;
-
-  &:hover {
-    background-color: var(--zinc-100);
-  }
-}
-
-:global(html.dark) {
-  .item {
-    &:hover {
-      background-color: rgba(var(--zinc-rgb-600), 0.4);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/dropdown/UiDropdownShortcut.vue b/core/client/src/shared/ui/dropdown/UiDropdownShortcut.vue
deleted file mode 100644
index e65d50ed..00000000
--- a/core/client/src/shared/ui/dropdown/UiDropdownShortcut.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<template>
-  <div :class="$style.shortcut">
-    <slot />
-  </div>
-</template>
-
-<style module lang="scss">
-.shortcut {
-  font-size: 11px;
-}
-</style>
diff --git a/core/client/src/shared/ui/dropdown/__tests__/UiDropdown.spec.ts b/core/client/src/shared/ui/dropdown/__tests__/UiDropdown.spec.ts
deleted file mode 100644
index de2c21c5..00000000
--- a/core/client/src/shared/ui/dropdown/__tests__/UiDropdown.spec.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-import UiDropdown from '../UiDropdown.vue'
-
-describe('uiDropdown', () => {
-  const wrapper = mount(UiDropdown, {
-    slots: {
-      trigger: '<div>trigger</div>',
-      header: '<div>header</div>',
-      content: '<div>content</div>',
-    },
-  })
-
-  it('should render correctly', async () => {
-    // @ts-expect-error instance
-    wrapper.vm.isOpen = true
-    await nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('toggles dropdown on trigger', async () => {
-    const trigger = wrapper.find('.wrapper')
-    expect(trigger.exists()).toBe(true)
-    // @ts-expect-error instance
-    wrapper.vm.isOpen = false
-
-    trigger.trigger('click')
-    await nextTick()
-    expect(wrapper.find('.inside').exists()).toBe(true)
-
-    trigger.trigger('click')
-    await nextTick()
-    expect(wrapper.find('.inside').exists()).toBe(false)
-  })
-
-  it('should close dropdown when clicking outside', () => {
-    const _w = mount(UiDropdown, {
-      attachTo: document.body,
-      slots: {
-        trigger: '<div>trigger</div>',
-        header: '<div>header</div>',
-        content: '<div>content</div>',
-      },
-    })
-    // @ts-expect-error instance
-    _w.vm.isOpen = false
-
-    document.body.click()
-    expect(_w.find('.inside').exists()).toBe(false)
-  })
-})
diff --git a/core/client/src/shared/ui/dropdown/__tests__/__snapshots__/UiDropdown.spec.ts.snap b/core/client/src/shared/ui/dropdown/__tests__/__snapshots__/UiDropdown.spec.ts.snap
deleted file mode 100644
index d861d35d..00000000
--- a/core/client/src/shared/ui/dropdown/__tests__/__snapshots__/UiDropdown.spec.ts.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UiDropdown > should render correctly 1`] = `
-"<div class="dropdown">
-  <div class="wrapper">
-    <div>trigger</div>
-  </div>
-  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <div class="inside" style="top: 36px; left: 50%; transform: translateX(-50%);">
-      <div class="header text-sm">
-        <div>header</div>
-      </div>
-      <div class="content">
-        <div>content</div>
-      </div>
-    </div>
-  </transition-stub>
-</div>"
-`;
-
-exports[`uiDropdown > should render correctly 1`] = `
-"<div class="dropdown">
-  <div class="wrapper">
-    <div>trigger</div>
-  </div>
-  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <div class="inside" style="top: 36px; left: 50%; transform: translateX(-50%);">
-      <div class="text-sm header">
-        <div>header</div>
-      </div>
-      <div class="content">
-        <div>content</div>
-      </div>
-    </div>
-  </transition-stub>
-</div>"
-`;
diff --git a/core/client/src/shared/ui/dropdown/index.ts b/core/client/src/shared/ui/dropdown/index.ts
deleted file mode 100644
index 82b31298..00000000
--- a/core/client/src/shared/ui/dropdown/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import UiDropdown from './UiDropdown.vue'
-import UiDropdownItem from './UiDropdownItem.vue'
-import UiDropdownShortcut from './UiDropdownShortcut.vue'
-
-export { UiDropdown, UiDropdownItem, UiDropdownShortcut }
diff --git a/core/client/src/shared/ui/index.ts b/core/client/src/shared/ui/index.ts
index 16a8cfe0..513c7248 100644
--- a/core/client/src/shared/ui/index.ts
+++ b/core/client/src/shared/ui/index.ts
@@ -2,9 +2,7 @@ export * from './alert'
 export * from './badge'
 export * from './button'
 export * from './card'
-export * from './dropdown'
+export * from './dropdown-menu'
+export * from './dropdown-menu'
 export * from './input'
-export * from './progress-bar'
-export * from './radio-group'
 export * from './select'
-export * from './sheet'
diff --git a/core/client/src/shared/ui/input/UiInput.stories.ts b/core/client/src/shared/ui/input/UiInput.stories.ts
index 5ec8fe74..970d3dbe 100644
--- a/core/client/src/shared/ui/input/UiInput.stories.ts
+++ b/core/client/src/shared/ui/input/UiInput.stories.ts
@@ -5,6 +5,9 @@ export default {
   title: 'UiInput',
   component: UiInput,
   argTypes: {
+    modelValue: {
+      control: { type: 'text' },
+    },
     type: {
       control: { type: 'select' },
       options: ['text', 'password', 'number', 'email'],
@@ -13,9 +16,6 @@ export default {
     placeholder: {
       control: { type: 'text' },
     },
-    modelValue: {
-      control: { type: 'text' },
-    },
   },
 } as Meta<typeof UiInput>
 
@@ -30,15 +30,3 @@ const Template: StoryFn<typeof UiInput> = (args) => {
 }
 
 export const DefaultInput: StoryFn<typeof UiInput> = Template.bind({})
-
-DefaultInput.args = {
-  placeholder: 'Type here',
-  type: 'text',
-}
-
-export const PaswordInput: StoryFn<typeof UiInput> = Template.bind({})
-
-PaswordInput.args = {
-  placeholder: 'Enter your password',
-  type: 'password',
-}
diff --git a/core/client/src/shared/ui/input/UiInput.vue b/core/client/src/shared/ui/input/UiInput.vue
index 7a350ea5..8389502a 100644
--- a/core/client/src/shared/ui/input/UiInput.vue
+++ b/core/client/src/shared/ui/input/UiInput.vue
@@ -1,98 +1,30 @@
 <script setup lang="ts">
-import type { InputTypeHTMLAttribute } from 'vue'
-
-interface InputProps {
-  modelValue?: string | number | null
-  placeholder?: string
-  type?: InputTypeHTMLAttribute
-  disabled?: boolean
-}
-
-const { type = 'text', modelValue, placeholder, disabled } = defineProps<InputProps>()
-
-const emit = defineEmits(['update:modelValue'])
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/lib/shadcn/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
 </script>
 
 <template>
   <input
-    :value="modelValue"
-    :placeholder="placeholder"
-    :type="type"
-    :disabled="disabled"
-    class="text-sm"
-    :class="[$style.input_default]"
-    autocomplete="on"
-    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    v-model="modelValue"
+    :class="cn(
+      'input',
+      props.class,
+    )"
   />
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.input_default {
-  display: flex;
-  width: 100%;
-  height: 36px;
-  border: 1px solid var(--zinc-200);
-  border-radius: 6px;
-  background-color: transparent;
-  padding: 4px 12px;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  @include on-focus {
-    outline: none;
-    border: 1px solid var(--zinc-800);
-  }
-
-  @include transition;
-
-  &::placeholder {
-    color: var(--zinc-500);
-    user-select: none;
-  }
-
-  &:disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  input[type='password'] {
-    font-size: 17px !important;
-    letter-spacing: 0.05em;
-
-    &::placeholder {
-      font-size: 14px !important;
-      letter-spacing: 0;
-    }
-  }
-}
-
-:global(html.dark) {
-  .input_default {
-    border-color: var(--zinc-600);
-    background-color: rgba(var(--zinc-rgb-700), 0.8);
-
-    &::placeholder {
-      color: var(--zinc-300);
-    }
-  }
-}
-
-@media screen and (max-width: 1440px) {
-  input[type='password'] {
-    &::placeholder {
-      font-size: 13px !important;
-    }
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  input[type='password'] {
-    &::placeholder {
-      font-size: 12px !important;
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/input/__tests__/UiInput.spec.ts b/core/client/src/shared/ui/input/__tests__/UiInput.spec.ts
index 478f7c4d..5f69466c 100644
--- a/core/client/src/shared/ui/input/__tests__/UiInput.spec.ts
+++ b/core/client/src/shared/ui/input/__tests__/UiInput.spec.ts
@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
 import UiInput from '../UiInput.vue'
 
-describe('uiInput', () => {
+describe('tests for UiInput', () => {
   const wrapper = shallowMount(UiInput, {
     props: {
       modelValue: 'value',
diff --git a/core/client/src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap b/core/client/src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap
index 18ed2446..11d9a0c9 100644
--- a/core/client/src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap
+++ b/core/client/src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap
@@ -1,5 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`UiInput > should render correctly 1`] = `"<input placeholder="jenda" type="text" class="input_default text-sm" autocomplete="on" value="value">"`;
-
-exports[`uiInput > should render correctly 1`] = `"<input placeholder="jenda" type="text" class="text-sm input_default" autocomplete="on" value="value">"`;
+exports[`tests for UiInput > should render correctly 1`] = `"<input class="input" placeholder="jenda" type="text">"`;
diff --git a/core/client/src/shared/ui/progress-bar/UiProgressBar.stories.ts b/core/client/src/shared/ui/progress-bar/UiProgressBar.stories.ts
deleted file mode 100644
index 806a88ca..00000000
--- a/core/client/src/shared/ui/progress-bar/UiProgressBar.stories.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import UiProgressBar from './UiProgressBar.vue'
-
-export default {
-  title: 'UiProgressBar',
-  component: UiProgressBar,
-  argTypes: {
-    progress: {
-      control: 'number',
-    },
-  },
-} as Meta<typeof UiProgressBar>
-
-export const DefaultProgressBar: StoryFn<typeof UiProgressBar> = args => ({
-  components: { UiProgressBar },
-  setup() {
-    return { args }
-  },
-  template: '<div style="width: 300px"><UiProgressBar v-bind="args" /></div>',
-})
diff --git a/core/client/src/shared/ui/progress-bar/UiProgressBar.vue b/core/client/src/shared/ui/progress-bar/UiProgressBar.vue
deleted file mode 100644
index 490d0688..00000000
--- a/core/client/src/shared/ui/progress-bar/UiProgressBar.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const { progress = 5 } = defineProps<{
-  progress: number
-}>()
-
-const activeWidth = computed(() => {
-  return `${progress * 10}%`
-})
-</script>
-
-<template>
-  <div :class="$style.progress_bar_container">
-    <div :class="$style.progress_bar_active" :style="{ width: activeWidth }" />
-  </div>
-</template>
-
-<style module lang="scss">
-.progress_bar_container {
-  background-color: var(--zinc-100);
-  height: 5px;
-  width: 100%;
-  border-radius: 10px;
-
-  .progress_bar_active {
-    background-color: var(--blue-secondary);
-    height: 100%;
-    border-radius: 10px;
-  }
-}
-
-:global(html.dark) {
-  .progress_bar_container {
-    background-color: var(--zinc-600);
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/progress-bar/__tests__/UiProgressBar.spec.ts b/core/client/src/shared/ui/progress-bar/__tests__/UiProgressBar.spec.ts
deleted file mode 100644
index edbe21e5..00000000
--- a/core/client/src/shared/ui/progress-bar/__tests__/UiProgressBar.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import UiProgressBar from '../UiProgressBar.vue'
-
-describe('uiProgressBar', () => {
-  const wrapper = shallowMount(UiProgressBar)
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-})
diff --git a/core/client/src/shared/ui/progress-bar/__tests__/__snapshots__/UiProgressBar.spec.ts.snap b/core/client/src/shared/ui/progress-bar/__tests__/__snapshots__/UiProgressBar.spec.ts.snap
deleted file mode 100644
index 8fb7f72f..00000000
--- a/core/client/src/shared/ui/progress-bar/__tests__/__snapshots__/UiProgressBar.spec.ts.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UiProgressBar > should render correctly 1`] = `
-"<div class="progress_bar_container">
-  <div class="progress_bar_active" style="width: 50%;"></div>
-</div>"
-`;
-
-exports[`uiProgressBar > should render correctly 1`] = `
-"<div class="progress_bar_container">
-  <div class="progress_bar_active" style="width: 50%;"></div>
-</div>"
-`;
diff --git a/core/client/src/shared/ui/progress-bar/index.ts b/core/client/src/shared/ui/progress-bar/index.ts
deleted file mode 100644
index 25990ae4..00000000
--- a/core/client/src/shared/ui/progress-bar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as UiProgressBar } from './UiProgressBar.vue'
diff --git a/core/client/src/shared/ui/radio-group/UiRadioGroup.stories.ts b/core/client/src/shared/ui/radio-group/UiRadioGroup.stories.ts
deleted file mode 100644
index 753a05f5..00000000
--- a/core/client/src/shared/ui/radio-group/UiRadioGroup.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import UiRadioGroupContainer from './UiRadioGroupContainer.vue'
-import UiRadioGroupItem from './UiRadioGroupItem.vue'
-
-export default {
-  title: 'UiRadioGroup',
-  component: UiRadioGroupItem,
-  args: {
-    modelValue: 'light',
-  },
-} as Meta<typeof UiRadioGroupItem>
-
-export const DefaultUiRadioGroup: StoryFn<typeof UiRadioGroupItem> = args => ({
-  components: { UiRadioGroupItem, UiRadioGroupContainer },
-  setup() {
-    return { args }
-  },
-  template: `
-    <UiRadioGroupContainer>
-      <UiRadioGroupItem v-model="args.modelValue" value="light" />
-      <UiRadioGroupItem v-model="args.modelValue"  value="dark" />
-    </UiRadioGroupContainer>
-  `,
-})
diff --git a/core/client/src/shared/ui/radio-group/UiRadioGroupContainer.vue b/core/client/src/shared/ui/radio-group/UiRadioGroupContainer.vue
deleted file mode 100644
index 07ebe35e..00000000
--- a/core/client/src/shared/ui/radio-group/UiRadioGroupContainer.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup lang="ts">
-defineSlots<{
-  default: () => any
-}>()
-</script>
-
-<template>
-  <div :class="$style.group">
-    <slot />
-  </div>
-</template>
-
-<style module lang="scss">
-.group {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-</style>
diff --git a/core/client/src/shared/ui/radio-group/UiRadioGroupItem.vue b/core/client/src/shared/ui/radio-group/UiRadioGroupItem.vue
deleted file mode 100644
index f0ec1f2f..00000000
--- a/core/client/src/shared/ui/radio-group/UiRadioGroupItem.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface RadioItem {
-  inputId?: string
-  modelValue?: string
-  value?: string
-  name?: string
-}
-
-const { inputId = 'radio-input-id', modelValue, value, name = 'radio-input-name' } = defineProps<RadioItem>()
-
-const emits = defineEmits(['update:modelValue'])
-
-const checked = computed(() => {
-  return modelValue === value
-})
-</script>
-
-<template>
-  <input
-    :id="inputId"
-    type="radio"
-    :class="$style.radio_item"
-    :value="value"
-    :name="name"
-    :checked="checked"
-    @change="emits('update:modelValue', ($event.target as HTMLInputElement).value)"
-  />
-</template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.radio_item {
-  appearance: none;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--zinc-800);
-  @include transition;
-
-  &:checked {
-    &::after {
-      position: absolute;
-      content: '';
-      width: 8px;
-      height: 8px;
-      background-color: var(--zinc-800);
-      border-radius: 50%;
-    }
-  }
-}
-
-:global(html.dark) {
-  .radio_item {
-    border-color: var(--zinc-200);
-    &:checked {
-      &::after {
-        background-color: var(--zinc-200);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/radio-group/__tests__/UiRadioGroup.spec.ts b/core/client/src/shared/ui/radio-group/__tests__/UiRadioGroup.spec.ts
deleted file mode 100644
index 04ac9682..00000000
--- a/core/client/src/shared/ui/radio-group/__tests__/UiRadioGroup.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import UiRadioGroupItem from '../UiRadioGroupItem.vue'
-
-describe('uiRadioGroup', () => {
-  const wrapper = shallowMount(UiRadioGroupItem, {
-    props: {
-      inputId: 'radio-input-id',
-      modelValue: '',
-      value: undefined,
-      name: 'radio-input-name',
-    },
-  })
-
-  it('should render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should update value with @change', async () => {
-    const input = wrapper.find('input')
-    await input.setValue('on')
-    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['on'])
-  })
-})
diff --git a/core/client/src/shared/ui/radio-group/__tests__/__snapshots__/UiRadioGroup.spec.ts.snap b/core/client/src/shared/ui/radio-group/__tests__/__snapshots__/UiRadioGroup.spec.ts.snap
deleted file mode 100644
index 7a3a6b7e..00000000
--- a/core/client/src/shared/ui/radio-group/__tests__/__snapshots__/UiRadioGroup.spec.ts.snap
+++ /dev/null
@@ -1,5 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UiRadioGroup > should render correctly 1`] = `"<input id="radio-input-id" type="radio" class="radio_item" name="radio-input-name">"`;
-
-exports[`uiRadioGroup > should render correctly 1`] = `"<input id="radio-input-id" type="radio" class="radio_item" name="radio-input-name">"`;
diff --git a/core/client/src/shared/ui/radio-group/index.ts b/core/client/src/shared/ui/radio-group/index.ts
deleted file mode 100644
index cd5908d9..00000000
--- a/core/client/src/shared/ui/radio-group/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import UiRadioGroupContainer from './UiRadioGroupContainer.vue'
-import UiRadioGroupItem from './UiRadioGroupItem.vue'
-
-export { UiRadioGroupContainer, UiRadioGroupItem }
diff --git a/core/client/src/shared/ui/select/UiSelect.stories.ts b/core/client/src/shared/ui/select/UiSelect.stories.ts
index 985d5cde..ece836a9 100644
--- a/core/client/src/shared/ui/select/UiSelect.stories.ts
+++ b/core/client/src/shared/ui/select/UiSelect.stories.ts
@@ -1,35 +1,49 @@
 import type { Meta, StoryFn } from '@storybook/vue3'
-import type { Options } from './types'
-import UiSelect from './UiSelect.vue'
+import { UiButton } from '../button'
+import {
+  UiSelect,
+  UiSelectContent,
+  UiSelectGroup,
+  UiSelectItem,
+  UiSelectLabel,
+  UiSelectTrigger,
+  UiSelectValue,
+} from './index'
 
 export default {
   title: 'UiSelect',
   component: UiSelect,
-  args: {
-    modelValue: 'Evan You',
-    options: [
-      { name: 'Evan You', value: 'evan you' },
-      { name: 'Anthony Fu', value: 'anthony fu' },
-      { name: 'Daniel Roe', value: 'daniel roe' },
-    ] as Options[],
-  },
-  argTypes: {
-    modelValue: {
-      control: {
-        type: 'select',
-        options: ['Evan You', 'Anthony Fu', 'Daniel Roe'],
-      },
-    },
-    as: {
-      control: { type: 'select', options: ['btn', 'select'] },
-    },
-  },
 } as Meta<typeof UiSelect>
 
-export const DefaultSelect: StoryFn<typeof UiSelect> = args => ({
-  components: { UiSelect },
+const Template: StoryFn<typeof UiSelect> = args => ({
+  components: {
+    UiSelect,
+    UiSelectContent,
+    UiSelectGroup,
+    UiSelectItem,
+    UiSelectLabel,
+    UiSelectTrigger,
+    UiSelectValue,
+    UiButton,
+  },
   setup() {
     return { args }
   },
-  template: `<div style="padding: 100px"><UiSelect v-model="args.modelValue" v-bind="args" /></div>`,
+  template: `<div style="padding: 60px">
+  <UiSelect>
+    <UiSelectTrigger>
+      <UiSelectValue placeholder="Select a fruit" />
+    </UiSelectTrigger>
+    <UiSelectContent>
+      <UiSelectGroup>
+        <UiSelectLabel>Fruits</UiSelectLabel>
+        <UiSelectItem value="apple" withIndicator>
+          Apple
+        </UiSelectItem>
+      </UiSelectGroup>
+    </UiSelectContent>
+  </UiSelect>
+  </div>`,
 })
+
+export const DefaultSelect: StoryFn<typeof UiSelect> = Template.bind({})
diff --git a/core/client/src/shared/ui/select/UiSelect.vue b/core/client/src/shared/ui/select/UiSelect.vue
index a385d180..adc42fdf 100644
--- a/core/client/src/shared/ui/select/UiSelect.vue
+++ b/core/client/src/shared/ui/select/UiSelect.vue
@@ -1,187 +1,15 @@
 <script setup lang="ts">
-import type { Options } from './types'
-import { onClickOutside } from '@vueuse/core'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { ref } from 'vue'
-import { UiButton } from '../button'
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
 
-interface SelectProps {
-  modelValue?: null | string
-  options: Options[]
-  as?: 'btn' | 'select'
-}
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
 
-const { as = 'select', modelValue } = defineProps<SelectProps>()
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', option: string): void
-}>()
-
-const select = ref(null)
-const open = ref(false)
-
-onClickOutside(select, () => {
-  open.value = false
-})
-
-const selected = ref(modelValue)
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
-  <div :class="[as === 'select' ? $style.custom_select : $style.btn_variant]">
-    <div v-if="as === 'select'" ref="select" :class="$style.selected" @click="open = !open">
-      <span class="text-sm">{{ selected }}</span>
-      <ChevronsUpDown :size="15" color="var(--zinc-400)" />
-    </div>
-    <UiButton v-else ref="select" variant="ghost" size="sm" :class="$style.btn" @click="open = !open">
-      <slot />
-      {{ selected }}
-    </UiButton>
-    <Transition name="dropdown">
-      <div v-if="open" :class="$style.items">
-        <div
-          v-for="(option, i) of options"
-          :key="i"
-          :class="[$style.item, { [$style.active]: option.name === selected }]"
-          :style="{ justifyContent: as === 'btn' ? 'center' : 'space-between' }"
-          @click="
-            selected = option.name;
-            open = false;
-            emit('update:modelValue', option.name);
-          "
-        >
-          <span class="text-sm">{{ option.name }}</span>
-          <div v-if="as === 'select'" :class="$style.icon">
-            <Check v-if="option.name === selected" :size="14" />
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </div>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.custom_select {
-  position: relative;
-  z-index: 50;
-  max-height: 24rem;
-  height: fit-content;
-  min-width: 10rem;
-  width: fit-content;
-  border-radius: 6px;
-  border: 1px solid var(--zinc-200);
-  background-color: white;
-  color: var(--zinc-900);
-  padding: 0.5rem 0;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-}
-
-.btn_variant {
-  position: relative;
-  z-index: 50;
-}
-
-.selected {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: 100%;
-  gap: 20px;
-  padding: 0 16px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.btn {
-  display: flex;
-  min-width: 100px;
-  padding: 8px;
-  gap: 4px;
-  color: var(--zinc-300);
-
-  @include on-hover {
-    color: var(--zinc-600);
-  }
-}
-
-.items {
-  position: absolute;
-  overflow: hidden;
-  color: var(--zinc-900);
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 6px;
-  background-color: white;
-  border: 1px solid var(--zinc-200);
-  bottom: -122px;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  .item {
-    cursor: pointer;
-    user-select: none;
-    padding: 6px 10px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    text-wrap: nowrap;
-    width: 100%;
-
-    &:hover {
-      background-color: var(--zinc-100);
-    }
-
-    .icon {
-      width: 16px;
-      height: 16px;
-      color: var(--zinc-800);
-    }
-  }
-}
-
-.active {
-  background-color: var(--zinc-100);
-}
-
-.selectHide {
-  display: none;
-}
-
-:global(html.dark) {
-  .custom_select {
-    background-color: rgba(var(--zinc-rgb-600), 0.4);
-    color: var(--zinc-200);
-    border-color: var(--zinc-600);
-  }
-  .items {
-    background-color: #313131;
-    border-color: var(--zinc-600);
-    color: var(--zinc-200);
-
-    .item {
-      &:hover {
-        background-color: rgba(var(--zinc-rgb-600), 0.4);
-      }
-      .icon {
-        color: var(--zinc-300);
-      }
-    }
-  }
-  .active {
-    background-color: rgba(var(--zinc-rgb-600), 0.6);
-  }
-  .btn {
-    color: var(--zinc-300);
-    @include on-hover {
-      color: var(--zinc-200);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/select/UiSelectContent.vue b/core/client/src/shared/ui/select/UiSelectContent.vue
new file mode 100644
index 00000000..9da491bb
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectContent.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { UiSelectScrollDownButton, UiSelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn(
+        'select-content data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <UiSelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <UiSelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectGroup.vue b/core/client/src/shared/ui/select/UiSelectGroup.vue
new file mode 100644
index 00000000..955b2d06
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup
+    :class="cn(
+      'select-group',
+      props.class,
+    )"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectItem.vue b/core/client/src/shared/ui/select/UiSelectItem.vue
new file mode 100644
index 00000000..7a50c9f8
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectItem.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+interface Props extends SelectItemProps {
+  withIndicator?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'select-item',
+        props.class,
+      )
+    "
+  >
+    <div v-if="withIndicator" class="select-item-indicator">
+      <SelectItemIndicator>
+        <div i-lucide-check class="h-4 w-4" />
+      </SelectItemIndicator>
+    </div>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectItemText.vue b/core/client/src/shared/ui/select/UiSelectItemText.vue
new file mode 100644
index 00000000..a0bb5c24
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectLabel.vue b/core/client/src/shared/ui/select/UiSelectLabel.vue
new file mode 100644
index 00000000..d03398b5
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectLabel.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/lib/shadcn/utils'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel
+    :class="cn(
+      'select-label',
+      props.class,
+    )"
+  >
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectScrollDownButton.vue b/core/client/src/shared/ui/select/UiSelectScrollDownButton.vue
new file mode 100644
index 00000000..354a81dc
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectScrollDownButton.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    v-bind="forwardedProps"
+    :class="cn(
+      'select-scroll-button',
+      props.class,
+    )"
+  >
+    <slot>
+      <div i-lucide-chevron-down />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectScrollUpButton.vue b/core/client/src/shared/ui/select/UiSelectScrollUpButton.vue
new file mode 100644
index 00000000..ab65f765
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectScrollUpButton.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    v-bind="forwardedProps"
+    :class="cn(
+      'select-scroll-button',
+      props.class,
+    )"
+  >
+    <slot>
+      <div i-lucide-chevron-up />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectSeparator.vue b/core/client/src/shared/ui/select/UiSelectSeparator.vue
new file mode 100644
index 00000000..d07e64db
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator
+    v-bind="delegatedProps"
+    :class="cn(
+      'select-separator',
+      props.class,
+    )"
+  />
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectTrigger.vue b/core/client/src/shared/ui/select/UiSelectTrigger.vue
new file mode 100644
index 00000000..2a375a3d
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectTrigger.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from '@/shared/lib/shadcn/utils'
+import { SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'select-trigger',
+      props.class,
+    )"
+  >
+    <slot />
+  </SelectTrigger>
+</template>
diff --git a/core/client/src/shared/ui/select/UiSelectValue.vue b/core/client/src/shared/ui/select/UiSelectValue.vue
new file mode 100644
index 00000000..4bc37dd8
--- /dev/null
+++ b/core/client/src/shared/ui/select/UiSelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/core/client/src/shared/ui/select/__tests__/UiSelect.spec.ts b/core/client/src/shared/ui/select/__tests__/UiSelect.spec.ts
index 10a366ed..fb05aa51 100644
--- a/core/client/src/shared/ui/select/__tests__/UiSelect.spec.ts
+++ b/core/client/src/shared/ui/select/__tests__/UiSelect.spec.ts
@@ -1,42 +1,27 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
 import UiSelect from '../UiSelect.vue'
 
-describe('uiSelect', () => {
+describe('tests for UiSelect', () => {
   const wrapper = mount(UiSelect, {
-    props: {
-      modelValue: 'test',
-      options: [],
-    },
+    slots: { default: '<div>test select</div>' },
+    props: { defaultOpen: true },
   })
 
-  it('should render correctly', async () => {
-    // @ts-expect-error instance
-    wrapper.vm.open = true
-    await nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
+  it('should render correctly', () => {
+    expect(wrapper.html()).toContain('<div>test select</div>')
   })
 
-  it('toggles select on button(trigger)', async () => {
-    const trigger = wrapper.find('.selected')
-    expect(trigger.exists()).toBe(true)
-    // @ts-expect-error instance
-    wrapper.vm.open = false
-
-    trigger.trigger('click')
-    await nextTick()
-    expect(wrapper.find('.items').exists()).toBe(true)
+  it('should pass defaultOpen prop to DropdownMenuRoot', () => {
+    const root = wrapper.findComponent({ name: 'SelectRoot' })
+    expect(root.props('defaultOpen')).toBe(true)
   })
 
-  it('should close select when we clicking outside', () => {
-    const _w = mount(UiSelect, {
-      attachTo: document.body,
-    })
-    // @ts-expect-error instance
-    _w.vm.open = false
-
-    document.body.click()
-    expect(_w.find('.items').exists()).toBe(false)
+  it('should emit events correctly', () => {
+    wrapper.vm.$emit('openChange', true)
+    expect(wrapper.emitted('openChange')).toBeTruthy()
+    expect(wrapper.emitted('openChange')?.[0]).toEqual([true])
   })
 })
+
+// more tests: https://github.com/unovue/radix-vue/blob/main/packages/radix-vue/src/Select/Select.test.ts
diff --git a/core/client/src/shared/ui/select/__tests__/__snapshots__/UiSelect.spec.ts.snap b/core/client/src/shared/ui/select/__tests__/__snapshots__/UiSelect.spec.ts.snap
deleted file mode 100644
index 1ba071ad..00000000
--- a/core/client/src/shared/ui/select/__tests__/__snapshots__/UiSelect.spec.ts.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UiSelect > should render correctly 1`] = `
-"<div class="custom_select">
-  <div class="selected"><span class="text-sm">test</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
-      <path d="m7 15 5 5 5-5"></path>
-      <path d="m7 9 5-5 5 5"></path>
-    </svg></div>
-  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <div class="items"></div>
-  </transition-stub>
-</div>"
-`;
-
-exports[`uiSelect > should render correctly 1`] = `
-"<div class="custom_select">
-  <div class="selected"><span class="text-sm">test</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-400)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down-icon">
-      <path d="m7 15 5 5 5-5"></path>
-      <path d="m7 9 5-5 5 5"></path>
-    </svg></div>
-  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <div class="items"></div>
-  </transition-stub>
-</div>"
-`;
diff --git a/core/client/src/shared/ui/select/index.ts b/core/client/src/shared/ui/select/index.ts
index a4bba4a7..a75c0864 100644
--- a/core/client/src/shared/ui/select/index.ts
+++ b/core/client/src/shared/ui/select/index.ts
@@ -1 +1,11 @@
 export { default as UiSelect } from './UiSelect.vue'
+export { default as UiSelectContent } from './UiSelectContent.vue'
+export { default as UiSelectGroup } from './UiSelectGroup.vue'
+export { default as UiSelectItem } from './UiSelectItem.vue'
+export { default as UiSelectItemText } from './UiSelectItemText.vue'
+export { default as UiSelectLabel } from './UiSelectLabel.vue'
+export { default as UiSelectScrollDownButton } from './UiSelectScrollDownButton.vue'
+export { default as UiSelectScrollUpButton } from './UiSelectScrollUpButton.vue'
+export { default as UiSelectSeparator } from './UiSelectSeparator.vue'
+export { default as UiSelectTrigger } from './UiSelectTrigger.vue'
+export { default as UiSelectValue } from './UiSelectValue.vue'
diff --git a/core/client/src/shared/ui/select/types.ts b/core/client/src/shared/ui/select/types.ts
deleted file mode 100644
index 3b493007..00000000
--- a/core/client/src/shared/ui/select/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Options {
-  name: string
-  value: string
-}
diff --git a/core/client/src/shared/ui/sheet/UiSheet.stories.ts b/core/client/src/shared/ui/sheet/UiSheet.stories.ts
deleted file mode 100644
index ac721ab6..00000000
--- a/core/client/src/shared/ui/sheet/UiSheet.stories.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/vue3'
-import { ref } from 'vue'
-import { UiButton } from '../button'
-import UiSheet from './UiSheet.vue'
-
-export default {
-  title: 'UiSheet',
-  component: UiSheet,
-  argTypes: {
-    overlay: {
-      control: { type: 'boolean' },
-      defaultValue: true,
-    },
-    maxWidth: {
-      control: { type: 'number' },
-      defaultValue: 640,
-    },
-    overlayClickClose: {
-      control: { type: 'boolean' },
-      defaultValue: true,
-    },
-  },
-} as Meta<typeof UiSheet>
-
-const Template: StoryFn<typeof UiSheet> = args => ({
-  components: { UiSheet, UiButton },
-  setup() {
-    const sheet = ref<InstanceType<typeof UiSheet>>()
-
-    async function openSheet() {
-      if (sheet.value) {
-        sheet.value.open()
-      }
-    }
-
-    return { args, openSheet, sheet }
-  },
-  template: `
-    <UiButton @click="openSheet">Open</UiButton>
-    <UiSheet ref="sheet" v-bind="args">
-        <template v-if="${'header' in args}" v-slot:header>${args.header}</template> 
-        <template v-if="${'default' in args}" v-slot>${args.default}</template>
-        <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
-    </UiSheet>`,
-})
-
-export const DefaultSheet: StoryFn<typeof UiSheet> = Template.bind({})
-
-DefaultSheet.args = {
-  header: `
-    <p class="text-lg" style="font-weight: 500">Sheet Example</p>
-    <span class="text-sm" style="color: var(--zinc-400)">use to display content in a flexible container component.</span>
-  `,
-}
-
-export const SheetExampleProps: StoryFn<typeof UiSheet> = Template.bind({})
-
-SheetExampleProps.args = {
-  header: `
-    <p class="text-lg" style="font-weight: 500">Ohh</p>
-  `,
-  minWidth: 150,
-  maxWidth: 150,
-}
-
-export const SlottedSheet: StoryFn<typeof UiSheet> = Template.bind({})
-
-SlottedSheet.args = {
-  header: `
-    <p class="text-lg" style="font-weight: 500">Sheet Example</p>
-    <span class="text-sm" style="color: var(--zinc-400)">use to display content in a flexible container component.</span>
-  `,
-  footer: 'footer',
-}
diff --git a/core/client/src/shared/ui/sheet/UiSheet.vue b/core/client/src/shared/ui/sheet/UiSheet.vue
deleted file mode 100644
index fdec9485..00000000
--- a/core/client/src/shared/ui/sheet/UiSheet.vue
+++ /dev/null
@@ -1,227 +0,0 @@
-<script setup lang="ts">
-import { X } from 'lucide-vue-next'
-import { computed, ref, useCssModule, useTemplateRef } from 'vue'
-
-interface SheetProps {
-  overlay?: boolean
-  maxWidth?: number
-  transitionDuration?: number
-  minWidth?: number
-  overlayClickClose?: boolean
-}
-
-const {
-  overlay = true,
-  maxWidth = 450,
-  transitionDuration = 0.35,
-  minWidth = 450,
-  overlayClickClose = true,
-} = defineProps<SheetProps>()
-
-const emit = defineEmits(['opened', 'closed'])
-
-const showSheet = ref(false)
-const sheetWidth = ref(0)
-const translateValue = ref(100)
-const overlayColor = ref('#0000004D')
-
-const style = useCssModule()
-
-const sideSheet = useTemplateRef<HTMLElement | null>('sideSheet')
-const sideSheetHeader = useTemplateRef<HTMLElement | null>('sideSheetHeader')
-const sideSheetMain = useTemplateRef<HTMLElement | null>('sideSheetMain')
-const sideSheetFooter = useTemplateRef<HTMLElement | null>('sideSheetFooter')
-const sideSheetContent = useTemplateRef<HTMLElement | null>('sideSheetContent')
-
-document.addEventListener('keyup', (event: KeyboardEvent) => {
-  if (event.key === 'Escape') {
-    close()
-  }
-})
-
-const sheetContentClasses = computed(() => {
-  return {
-    [style.sheet_content]: true,
-    [style.sheet_content__fullscreen]: sheetWidth.value >= window.innerWidth,
-  }
-})
-
-const transitionDurationTime = computed(() => {
-  return `${transitionDuration}s`
-})
-const sheetWidthString = computed(() => {
-  return sheetWidth.value && sheetWidth.value > 0 ? `${sheetWidth.value + 1}px` : 'auto'
-})
-const translateValueString = computed(() => {
-  return `${translateValue.value}%`
-})
-const maxWidthStyle = computed(() => {
-  return `${maxWidth}px`
-})
-const minWidthStyle = computed(() => {
-  return `${minWidth}px`
-})
-
-function open() {
-  translateValue.value = 0
-  document.documentElement.style.overflowY = 'hidden'
-  document.documentElement.style.overscrollBehavior = 'none'
-  showSheet.value = true
-  emit('opened')
-}
-async function close() {
-  showSheet.value = false
-  translateValue.value = 100
-  setTimeout(() => {
-    document.documentElement.style.overflowY = 'auto'
-    document.documentElement.style.overscrollBehavior = ''
-    emit('closed')
-  }, transitionDuration * 1000)
-}
-
-function clickOnOverlayHandler() {
-  if (overlayClickClose) {
-    close()
-  }
-}
-
-defineExpose({ open, close })
-</script>
-
-<template>
-  <Teleport to="body">
-    <div ref="sideSheet" :class="$style.sheet" :aria-hidden="!showSheet" role="dialog">
-      <Transition>
-        <div v-show="overlay && showSheet" :class="$style.sheet_overlay" @click="clickOnOverlayHandler" />
-      </Transition>
-      <div ref="sideSheetContent" :class="sheetContentClasses">
-        <header ref="sideSheetHeader" :class="$style.sheet_header">
-          <slot name="header" />
-          <X :size="17" :class="$style.header_icon" @click="close" />
-        </header>
-        <main ref="sideSheetMain" :class="$style.sheet_main">
-          <slot />
-        </main>
-        <footer ref="sideSheetFooter" class="text-sm" :class="[$style.sheet_footer]">
-          <slot name="footer" />
-        </footer>
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<style module lang="scss">
-.sheet {
-  z-index: 99999;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: flex-end;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transition: visibility v-bind('transitionDurationTime');
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  .sheet_overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -1;
-    background: v-bind('overlayColor');
-  }
-
-  .sheet_content {
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    min-width: v-bind('minWidthStyle');
-    width: 100%;
-    background: #ffffff;
-    overflow-y: hidden;
-    transform: translate3d(v-bind('translateValueString'), 0, 0);
-    width: v-bind('sheetWidthString');
-    max-width: v-bind('maxWidthStyle');
-    height: 100%;
-    box-sizing: border-box;
-    pointer-events: all;
-
-    .sheet_content__fullscreen {
-      border-radius: 0;
-    }
-
-    &:not(.side-sheet__content--dragging) {
-      transition: v-bind('transitionDurationTime') ease;
-    }
-  }
-
-  .sheet_main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow-y: auto;
-    box-sizing: border-box;
-    -webkit-overflow-scrolling: touch;
-    touch-action: auto !important;
-  }
-
-  .sheet_footer {
-    display: flex;
-    margin-top: auto;
-  }
-
-  .sheet_footer:empty {
-    display: none;
-  }
-
-  .sheet_header {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 5px 0px;
-    margin-bottom: 20px;
-
-    .header_icon {
-      cursor: pointer;
-      color: var(--zinc-600);
-      position: absolute;
-      right: 15px;
-      top: 15px;
-      transition: color 0.1s ease-in;
-
-      &:hover {
-        color: var(--zinc-900);
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .sheet {
-    .sheet_content {
-      background-color: rgba(var(--zinc-rgb-800), 1);
-    }
-    .sheet_header {
-      .header_icon {
-        color: var(--zinc-400);
-        &:hover {
-          color: var(--zinc-300);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/shared/ui/sheet/__tests__/UiSheet.spec.ts b/core/client/src/shared/ui/sheet/__tests__/UiSheet.spec.ts
deleted file mode 100644
index 82febc6b..00000000
--- a/core/client/src/shared/ui/sheet/__tests__/UiSheet.spec.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import { nextTick } from 'vue'
-import UiSheet from '../UiSheet.vue'
-
-describe('uiSheet', () => {
-  const wrapper = mount(UiSheet, {
-    global: {
-      stubs: {
-        teleport: true,
-      },
-    },
-    props: {
-      overlay: true,
-      maxWidth: 450,
-      transitionDuration: 0.35,
-      overlayClickClose: true,
-    },
-    slots: {
-      header: 'sheet header',
-      footer: 'sheet footer',
-      default: 'test',
-    },
-  })
-
-  it('should render correctly', async () => {
-    // @ts-expect-error instance (needs to be fixed)
-    wrapper.vm.showSheet = true
-    await nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render slots correctly', () => {
-    expect(wrapper.find('.sheet_header').text()).toContain('sheet header')
-    expect(wrapper.find('.sheet_main').text()).toContain('test')
-    expect(wrapper.find('.sheet_footer').text()).toContain('sheet footer')
-  })
-
-  it('should open/close the sheet', async () => {
-    wrapper.vm.open()
-    await nextTick()
-    expect(wrapper.find('.sheet').attributes('aria-hidden')).toBe('false')
-
-    wrapper.vm.close()
-    await nextTick()
-    expect(wrapper.find('.sheet').attributes('aria-hidden')).toBe('true')
-  })
-})
diff --git a/core/client/src/shared/ui/sheet/__tests__/__snapshots__/UiSheet.spec.ts.snap b/core/client/src/shared/ui/sheet/__tests__/__snapshots__/UiSheet.spec.ts.snap
deleted file mode 100644
index 01124f2b..00000000
--- a/core/client/src/shared/ui/sheet/__tests__/__snapshots__/UiSheet.spec.ts.snap
+++ /dev/null
@@ -1,37 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`UiSheet > should render correctly 1`] = `
-"<teleport-stub to="body">
-  <div class="sheet" aria-hidden="false" role="dialog">
-    <transition-stub appear="false" persisted="true" css="true">
-      <div class="sheet_overlay"></div>
-    </transition-stub>
-    <div class="sheet_content">
-      <header class="sheet_header">sheet header<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-xicon header_icon">
-          <path d="M18 6 6 18"></path>
-          <path d="m6 6 12 12"></path>
-        </svg></header>
-      <main class="sheet_main">test</main>
-      <footer class="sheet_footer text-sm">sheet footer</footer>
-    </div>
-  </div>
-</teleport-stub>"
-`;
-
-exports[`uiSheet > should render correctly 1`] = `
-"<teleport-stub to="body">
-  <div class="sheet" aria-hidden="false" role="dialog">
-    <transition-stub appear="false" persisted="true" css="true">
-      <div class="sheet_overlay"></div>
-    </transition-stub>
-    <div class="sheet_content">
-      <header class="sheet_header">sheet header<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-xicon header_icon">
-          <path d="M18 6 6 18"></path>
-          <path d="m6 6 12 12"></path>
-        </svg></header>
-      <main class="sheet_main">test</main>
-      <footer class="text-sm sheet_footer">sheet footer</footer>
-    </div>
-  </div>
-</teleport-stub>"
-`;
diff --git a/core/client/src/shared/ui/sheet/index.ts b/core/client/src/shared/ui/sheet/index.ts
deleted file mode 100644
index e613f746..00000000
--- a/core/client/src/shared/ui/sheet/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as UiSheet } from './UiSheet.vue'
diff --git a/core/client/src/shared/ui/shortcuts.ts b/core/client/src/shared/ui/shortcuts.ts
new file mode 100644
index 00000000..b7c5a7c4
--- /dev/null
+++ b/core/client/src/shared/ui/shortcuts.ts
@@ -0,0 +1 @@
+export * from './_shortcuts'
diff --git a/core/client/src/widgets/analytics/ui/SharedSection.vue b/core/client/src/widgets/analytics/ui/SharedSection.vue
index 10c5544f..f5fa9d6a 100644
--- a/core/client/src/widgets/analytics/ui/SharedSection.vue
+++ b/core/client/src/widgets/analytics/ui/SharedSection.vue
@@ -3,43 +3,15 @@ import { UiBadge, UiButton } from '@/shared/ui'
 </script>
 
 <template>
-  <div :class="$style.share">
-    <div>
+  <div class="inline-flex items-center gap-2 mt-8">
+    <div class="relative">
       <UiButton variant="dashed" disabled>
         {{ $t('analytics.share.btn') }}
       </UiButton>
-      <UiBadge variant="default" :class="$style.shared_badge">
+      <UiBadge variant="default" class="absolute px-1 top--0.5 right--2">
         dev
       </UiBadge>
     </div>
-    <span class="text-sm">- {{ $t('analytics.share.description') }} 😉</span>
+    <span class="text-sm text-neutral-700 dark:text-neutral-200">- {{ $t('analytics.share.description') }} 😉</span>
   </div>
 </template>
-
-<style module lang="scss">
-.share {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-top: 32px;
-
-  & > div {
-    position: relative;
-  }
-
-  .shared_badge {
-    padding: 0 4px;
-    position: absolute;
-    top: -2px;
-    right: -8px;
-  }
-}
-
-:global(html.dark) {
-  .share {
-    & > span {
-      color: var(--zinc-200);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/auth/ui/AuthContainer.vue b/core/client/src/widgets/auth/ui/AuthContainer.vue
index 2618a86a..28ee3a93 100644
--- a/core/client/src/widgets/auth/ui/AuthContainer.vue
+++ b/core/client/src/widgets/auth/ui/AuthContainer.vue
@@ -3,7 +3,6 @@ import { GoogleOauth, PrivacyPolicy } from '@/features/auth'
 import { RouteNames } from '@/shared/config/consts'
 import { UiAlert } from '@/shared/ui'
 import { useDark, useWindowSize } from '@vueuse/core'
-import { ChevronLeft } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
@@ -38,43 +37,68 @@ const alertString = computed(() => {
 </script>
 
 <template>
-  <div :class="$style.container">
-    <div :class="$style.container_inside">
-      <div v-if="width > 1100" :class="$style.top_part" @click="$router.push({ name: RouteNames.welcome })">
-        <img :src="isDark ? '/icons/kanban-dark.png' : '/icons/kanban.png'" />
-        <h3 class="text-xl">
+  <div
+    class="relative h-full w-68% mx-auto px-2rem dark:bg-#1c1c1c
+    max-[1440px]:w-80% max-[1100px]:!w-full"
+  >
+    <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
+      <div
+        v-if="width > 1100"
+        class="absolute top-24px left-32px flex items-center gap-1.5 cursor-pointer"
+        @click="$router.push({ name: RouteNames.welcome })"
+      >
+        <img
+          :src="isDark ? '/icons/kanban-dark.png' : '/icons/kanban.png'"
+          class="w-7 h-7"
+        />
+        <h3 class="text-xl !fw-500">
           Jenda
         </h3>
       </div>
-      <div v-else :class="$style.mobile_navigation">
-        <div :class="$style.arrow_container" @click="$router.push({ name: RouteNames.welcome })">
-          <ChevronLeft :class="$style.icon" :size="20" />
-          <span class="text-sm">{{ t('authentication.back') }}</span>
+      <div
+        v-else
+        class="absolute left-150px top-30px flex items-center gap-1.5 cursor-pointer max-w-700px
+        max-[890px]:left-80px max-[580px]:!left-20px max-[520px]:(!left-15px !top-15px)"
+      >
+        <div
+          class="flex items-center gap-1"
+          @click="$router.push({ name: RouteNames.welcome })"
+        >
+          <div
+            i-lucide-chevron-left
+            class="text-lg text-neutral-500"
+          />
+          <span class="text-sm !fw-500">
+            {{ t('authentication.back') }}
+          </span>
         </div>
       </div>
-      <div :class="$style.form_wrapper">
+      <div
+        class="relative flex w-460px flex-col gap-2
+          max-[520px]:!w-full max-[1100px]:!w-460px max-[1200px]:w-360px"
+      >
         <UiAlert
           v-if="isWarningOpen"
           variant="warning"
           closable
-          :class="$style.warning"
+          class="max-w-98% max-[520px]:mb-1.5"
           @close="isWarningOpen = false"
         >
           <span class="text-sm" v-html="alertString" />
         </UiAlert>
-        <h2 class="heading-2">
+        <h2 class="text-3xl fw-600 max-[580px]:text-2xl">
           {{ title }}
         </h2>
-        <p class="text-sm" :class="[$style.info_text]">
+        <p class="text-sm pb-5 text-neutral-400 mt--1.5">
           {{ info }}
         </p>
 
         <slot />
 
-        <div class="text-xs" :class="[$style.line_container]">
-          <div :class="$style.line" />
-          <span>{{ t('authentication.line') }}</span>
-          <div :class="$style.line" />
+        <div class="relative flex items-center justify-center uppercase py-18px text-xs">
+          <div class="w-full h-0.5 bg-neutral-100 dark:bg-neutral-700" />
+          <span class="px-2 text-neutral-600 whitespace-nowrap dark:text-neutral-400">{{ t('authentication.line') }}</span>
+          <div class="w-full h-0.5 bg-neutral-100 dark:bg-neutral-700" />
         </div>
         <GoogleOauth />
         <PrivacyPolicy />
@@ -82,218 +106,3 @@ const alertString = computed(() => {
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  position: relative;
-  height: 100%;
-  width: 68%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: 2rem;
-  padding-left: 2rem;
-
-  .container_inside {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: auto;
-    margin-right: auto;
-    flex-direction: column;
-
-    .top_part {
-      position: absolute;
-      left: 32px;
-      top: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-      cursor: pointer;
-
-      & img {
-        width: 28px;
-        height: 28px;
-      }
-
-      & h1 {
-        font-weight: 500 !important;
-      }
-    }
-
-    .mobile_navigation {
-      position: absolute;
-      left: 150px;
-      top: 30px;
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      cursor: pointer;
-      max-width: 700px;
-
-      .arrow_container {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        & span {
-          margin-top: 1px;
-          font-weight: 500 !important;
-        }
-        .icon {
-          color: var(--zinc-600);
-        }
-      }
-    }
-
-    .form_wrapper {
-      position: relative;
-      display: flex;
-      width: 460px;
-      flex-direction: column;
-      gap: 8px;
-
-      .info_text {
-        padding-bottom: 20px;
-        color: #72717a;
-        margin-top: -6px;
-      }
-
-      .line_container {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-transform: uppercase;
-        padding: 18px 0;
-
-        .line {
-          width: 100%;
-          height: 1px;
-          background-color: var(--zinc-200);
-        }
-
-        & span {
-          padding: 0 8px;
-          color: #72717a;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
-
-.warning{
-  max-width: 98%;
-}
-
-:global(html.dark) {
-  .container {
-    background-color: var(--zinc-800);
-    .container_inside {
-      .mobile_navigation {
-        & span,
-        .icon {
-          color: var(--zinc-200);
-        }
-      }
-      .form_wrapper {
-        .info_text {
-          color: var(--zinc-300);
-        }
-        .line_container {
-          .line {
-            background-color: var(--zinc-600);
-          }
-          & span {
-            color: var(--zinc-300);
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1440px) {
-  .container {
-    width: 80%;
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .container {
-    .container_inside {
-      .form_wrapper {
-        width: 360px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1100px) {
-  .container {
-    width: 100%;
-    .container_inside {
-      .form_wrapper {
-        width: 460px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 890px) {
-  .container {
-    .container_inside {
-      .mobile_navigation {
-        left: 80px;
-      }
-      .form_wrapper {
-        width: 380px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 580px) {
-  .container {
-    .container_inside {
-      .mobile_navigation {
-        left: 20px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .container {
-    .container_inside {
-      .mobile_navigation {
-        left: 15px;
-        top: 15px;
-      }
-      .form_wrapper {
-        width: 100%;
-      }
-    }
-  }
-  .warning {
-    margin-bottom: 6px;
-  }
-}
-
-@media screen and (max-width: 420px) {
-  .container {
-    .container_inside {
-      .mobile_navigation {
-        left: 15px;
-        top: 15px;
-      }
-      .form_wrapper {
-        width: 100%;
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/boards/index.ts b/core/client/src/widgets/boards/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/widgets/boards/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/widgets/boards/ui/TeamBoards.vue b/core/client/src/widgets/boards/ui/TeamBoards.vue
deleted file mode 100644
index 3245ffd0..00000000
--- a/core/client/src/widgets/boards/ui/TeamBoards.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import type { BoardPreview } from '@/entities/board/model'
-import { BoardPreviewCard } from '@/entities/board'
-import { CreationBoard, FilterBoards } from '@/features/boards'
-import { ref } from 'vue'
-
-const boards = ref<BoardPreview[]>([
-  {
-    _id: '0',
-    name: 'GTM Campaign',
-    description: 'crm system development',
-    users: [
-      { _id: '0', email: 'al', photoUrl: 'https://www.shadcn-vue.com/avatars/02.png' },
-      { _id: '1', email: 'al', photoUrl: 'https://www.shadcn-vue.com/avatars/03.png' },
-      { _id: '2', email: 'al', photoUrl: 'https://www.shadcn-vue.com/avatars/05.png' },
-    ],
-  },
-])
-</script>
-
-<template>
-  <div :class="$style.boards_inside">
-    <div :class="$style.top_part">
-      <div :class="$style.text">
-        <h4 class="heading-4">
-          {{ $t('boards.title') }}
-        </h4>
-        <p class="text-sm">
-          {{ $t('boards.description') }}
-        </p>
-      </div>
-      <FilterBoards />
-    </div>
-    <div :class="$style.container">
-      <CreationBoard />
-      <BoardPreviewCard v-for="board in boards" :key="board._id" :board="board" />
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.boards_inside {
-  margin-bottom: 70px;
-
-  .top_part {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    .text {
-      & p {
-        color: var(--zinc-500);
-      }
-    }
-  }
-
-  .container {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-    margin-top: 20px;
-    width: 100%;
-    overflow-x: auto;
-    scroll-behavior: smooth;
-    padding-bottom: 10px;
-  }
-
-  .active_board {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    background-color: white;
-    border: 1px solid var(--zinc-200);
-    min-width: 240px;
-    height: 120px;
-    border-radius: 15px;
-    padding: 15px;
-    cursor: pointer;
-
-    .bottom_part {
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-      width: 100%;
-
-      .users {
-        position: relative;
-        display: flex;
-        align-items: center;
-        height: 20px;
-        width: 20px;
-
-        .user {
-          height: 22px;
-          width: 22px;
-          position: absolute;
-          top: 0;
-        }
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .boards_inside {
-    .top_part {
-      .text {
-        & p {
-          color: var(--zinc-300);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/boards/ui/index.ts b/core/client/src/widgets/boards/ui/index.ts
deleted file mode 100644
index 18ba5c02..00000000
--- a/core/client/src/widgets/boards/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import TeamBoards from './TeamBoards.vue'
-
-export { TeamBoards }
diff --git a/core/client/src/widgets/device/index.ts b/core/client/src/widgets/device/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/widgets/device/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/widgets/device/ui/NotAvailable.vue b/core/client/src/widgets/device/ui/NotAvailable.vue
deleted file mode 100644
index a9a76325..00000000
--- a/core/client/src/widgets/device/ui/NotAvailable.vue
+++ /dev/null
@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { redirect } from '@/shared/lib/helpers'
-import { UiBadge, UiButton } from '@/shared/ui'
-import { useDark } from '@vueuse/core'
-import { TriangleAlert } from 'lucide-vue-next'
-
-const isDark = useDark()
-</script>
-
-<template>
-  <div class="container">
-    <div :class="$style.items">
-      <div :class="$style.name">
-        <TriangleAlert
-          :class="$style.icon"
-          :color="!isDark ? 'rgb(39 39 42)' : 'rgb(212 212 216)'"
-          :stroke-width="1"
-        />
-        <UiBadge variant="secondary" :class="$style.badge">
-          dev 🔧
-        </UiBadge>
-      </div>
-      <h2 class="heading-2">
-        Jenda is not available for your device type :/
-      </h2>
-
-      <p class="text-sm">
-        Please use our application on devices such as laptops or computers. For more information contact with
-        us.
-      </p>
-      <div :class="$style.btns">
-        <UiButton variant="outline" :class="$style.btn" @click="redirect('https://github.com/mnenie/jenda')">
-          <img :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'" />
-          GitHub
-        </UiButton>
-        <UiButton variant="outline" :class="$style.btn" @click="redirect('https://t.me/youngjuicycashrussia')">
-          <img src="/icons/telegram.webp" />
-          Telegram
-        </UiButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.items {
-  position: relative;
-  height: 100dvh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  text-align: center;
-
-  .icon {
-    position: relative;
-    margin-bottom: -4px;
-    height: 180px;
-    width: 180px;
-    margin-top: -32px;
-  }
-
-  & > img {
-    width: 200px;
-  }
-
-  .name {
-    position: relative;
-  }
-
-  & >  h2{
-    margin-bottom: 4px;
-  }
-
-  & > p {
-    margin-bottom: 16px;
-    color: var(--zinc-500);
-  }
-
-  .btns {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    .btn {
-      & > img {
-        width: 16px;
-        height: 16px;
-        margin-right: 6px;
-      }
-    }
-  }
-
-  .badge {
-    position: absolute;
-    bottom: 40px;
-    right: 0;
-  }
-}
-
-:global(html.dark){
-  .items {
-    & > p {
-      color: var(--zinc-300);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/device/ui/index.ts b/core/client/src/widgets/device/ui/index.ts
deleted file mode 100644
index 967f4e3a..00000000
--- a/core/client/src/widgets/device/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import NotAvailable from './NotAvailable.vue'
-
-export { NotAvailable }
diff --git a/core/client/src/widgets/kanban/index.ts b/core/client/src/widgets/kanban/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/widgets/kanban/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/widgets/kanban/ui/InfoPart.vue b/core/client/src/widgets/kanban/ui/InfoPart.vue
deleted file mode 100644
index 462e5d7e..00000000
--- a/core/client/src/widgets/kanban/ui/InfoPart.vue
+++ /dev/null
@@ -1,194 +0,0 @@
-<script setup lang="ts">
-import type { Board } from '@/entities/board'
-import { UserAvatar } from '@/entities/user'
-import { FilterTasks, RemoveBoard } from '@/features/kanban'
-import { UiBadge, UiButton } from '@/shared/ui'
-import { Users } from 'lucide-vue-next'
-import { computed } from 'vue'
-import { toast } from 'vue-sonner'
-import ProjectSettings from './ProjectSettings.vue'
-
-const props = defineProps<{
-  board: Board
-}>()
-
-const extraUsers = computed(() => {
-  const limit = 4
-  return props.board.users.length - limit
-})
-
-const previewUsers = computed(() => {
-  return props.board.users.slice(0, 4)
-})
-
-function toggleVisible() {
-  toast.info('Now this feature in dev mode')
-}
-</script>
-
-<template>
-  <div :class="$style.top_part">
-    <div :class="$style.left_container">
-      <div :class="$style.name">
-        <span class="text-xl">{{ board.name }}</span>
-      </div>
-      <div :class="$style.badge">
-        <div :class="$style.indicator" />
-        <span class="text-sm">{{ board.status }}</span>
-      </div>
-      <div :class="$style.line" />
-      <div :class="$style.visible" @click="toggleVisible">
-        <UiButton variant="secondary" size="sm" :class="$style.btn">
-          <Users :size="16" />
-          Team Visible
-        </UiButton>
-        <UiBadge variant="outline" :class="$style.visible_badge">
-          dev
-        </UiBadge>
-      </div>
-      <div :class="$style.line" />
-      <div :class="$style.users">
-        <UserAvatar
-          v-for="user in previewUsers"
-          :key="user._id"
-          v-tooltip.bottom="user.email"
-          :class="$style.avatar"
-        >
-          <img :src="user.photoUrl" style="width: 100%" />
-        </UserAvatar>
-        <div v-if="board.users.length > 4" class="text-sm" :class="$style.extra">
-          + {{ extraUsers }}
-        </div>
-      </div>
-    </div>
-    <div :class="$style.right_container">
-      <FilterTasks />
-      <div :class="$style.line" />
-      <ProjectSettings />
-      <RemoveBoard />
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.top_part {
-  position: relative;
-  z-index: 10;
-  gap: 12px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 12px 15px 6px 18px;
-  background-color: transparent;
-  width: 100%;
-  justify-content: space-between;
-
-  .left_container {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .visible {
-      position: relative;
-
-      .visible_badge {
-        position: absolute;
-        top: -7px;
-        right: -7px;
-        padding: 0px 1.5px;
-        color: var(--zinc-500);
-      }
-
-      .btn {
-        height: 30px;
-        gap: 8px;
-        & > svg {
-          color: var(--zinc-600);
-        }
-      }
-    }
-
-    .name {
-      color: var(--zinc-900);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .badge {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      height: 16px;
-      padding: 5px;
-      background: var(--zinc-200);
-      border-radius: 4px;
-
-      .indicator {
-        width: 7px;
-        height: 7px;
-        border-radius: 50%;
-        background-color: #359f39;
-      }
-    }
-
-    .users {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-
-      .extra {
-        margin-left: 6px;
-        color: var(--zinc-600);
-      }
-
-      .avatar {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-
-  .right_container {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-}
-
-.line {
-  width: 1.5px;
-  height: 18px;
-  background-color: var(--zinc-200);
-  margin-left: 6px;
-  margin-right: 6px;
-}
-
-:global(html.dark) {
-  .top_part {
-    .left_container {
-      .name {
-        color: var(--zinc-100);
-      }
-      .visible {
-        .visible_badge {
-          background-color: rgba(33, 33, 33, 0.6);
-          color: var(--zinc-300);
-          border-color: rgba(33, 33, 33, 0.6);
-        }
-        .btn {
-          & svg {
-            color: var(--zinc-300);
-          }
-        }
-      }
-      .badge {
-        background-color: var(--zinc-600);
-      }
-    }
-  }
-  .line {
-    background-color: var(--zinc-600);
-  }
-}
-</style>
diff --git a/core/client/src/widgets/kanban/ui/KanbanWrapper.vue b/core/client/src/widgets/kanban/ui/KanbanWrapper.vue
deleted file mode 100644
index 57c23b7d..00000000
--- a/core/client/src/widgets/kanban/ui/KanbanWrapper.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import type { Column } from '@/entities/board'
-import { AddColumn, DragCards, DragColumns } from '@/features/kanban'
-
-defineProps<{
-  columns?: Column[]
-}>()
-</script>
-
-<template>
-  <div :class="$style.kanban_wrapper">
-    <div v-if="columns">
-      <DragColumns :columns="columns">
-        <template #default="{ cards }">
-          <DragCards :cards="cards" />
-        </template>
-      </DragColumns>
-    </div>
-    <AddColumn />
-  </div>
-</template>
-
-<style module lang="scss">
-.kanban_wrapper {
-  padding: 15px;
-  bottom: 50px;
-  left: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  position: absolute;
-  right: 0;
-  scrollbar-color: rgba(var(--zinc-rgb-300), 0.3);
-  scrollbar-width: auto;
-  top: 0;
-  -webkit-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  display: flex;
-  flex-direction: row;
-  list-style: none;
-  gap: 15px;
-}
-
-.flip-list-move {
-  transition: transform 0.3s;
-}
-
-.no-move {
-  transition: transform 0s;
-}
-
-.ghost {
-  opacity: 0.2;
-}
-</style>
diff --git a/core/client/src/widgets/kanban/ui/ProjectSettings.vue b/core/client/src/widgets/kanban/ui/ProjectSettings.vue
deleted file mode 100644
index 38e7232e..00000000
--- a/core/client/src/widgets/kanban/ui/ProjectSettings.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<script setup lang="ts">
-import type { StatusBadge } from '@/entities/board'
-import { UserAvatar } from '@/entities/user'
-import { ChangeName, ChooseStatus, UpdateBoard } from '@/features/kanban'
-import { UiButton, UiSheet } from '@/shared/ui'
-import { Settings2 } from 'lucide-vue-next'
-import { ref, shallowReactive, useTemplateRef } from 'vue'
-
-const sheet = useTemplateRef<InstanceType<typeof UiSheet> | null>('sheet')
-
-function open() {
-  if (sheet.value) {
-    sheet.value.open()
-  }
-}
-
-// mock data -> after data from backend
-const name = ref('Startup')
-const projColor = ref('#b156db')
-const projStatus = ref<StatusBadge['status']>('archive')
-
-const colors = ['#ffd45e', '#45ad2d', '#3b54c4', '#b156db', '#a6a2a3', '#ff7a97', '#a1612a'] as const
-const statuses = shallowReactive<StatusBadge[]>([
-  { _id: '0', indicator: '#acb1c2', status: 'not active' },
-  { _id: '1', indicator: '#359f39', status: 'work' },
-  { _id: '2', indicator: '#fde50c', status: 'archive' },
-  { _id: '3', indicator: '#d01f1f', status: 'closed' },
-])
-
-function updateStatus(status: StatusBadge['status']) {
-  projStatus.value = status
-}
-</script>
-
-<template>
-  <UiButton variant="dashed" size="sm" :class="$style.settings" @click="open">
-    <Settings2 :size="16" />
-  </UiButton>
-  <UiSheet ref="sheet">
-    <template #header>
-      <p class="text-lg" style="font-weight: 500">
-        {{ $t('kanban.configuration.title') }}
-      </p>
-      <span class="text-sm" :class="[$style.desc]">
-        {{ $t('kanban.configuration.description') }}
-      </span>
-    </template>
-    <template #default>
-      <ChangeName v-model="name" :name :colors :proj-color @update-color="projColor = $event" />
-      <div :class="$style.users">
-        <p class="text-base">
-          {{ $t('kanban.configuration.users') }}:
-        </p>
-        <UserAvatar style="width: 24px; height: 24px">
-          <img style="width: 100%" src="https://avatars.githubusercontent.com/u/121057011?v=4" />
-        </UserAvatar>
-      </div>
-      <ChooseStatus :statuses :proj-status @update-status="updateStatus($event)" />
-      <UpdateBoard />
-    </template>
-  </UiSheet>
-</template>
-
-<style module lang="scss">
-.settings {
-  height: 30px;
-  gap: 8px;
-
-  & > svg {
-    color: var(--zinc-500);
-  }
-}
-
-.users {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 25px;
-  & > p {
-    color: var(--zinc-600);
-  }
-}
-
-:global(html.dark) {
-  .settings {
-    background-color: transparent;
-    &:hover {
-      background-color: transparent;
-      border-color: var(--zinc-500);
-    }
-    & > svg {
-      color: var(--zinc-300);
-    }
-  }
-  .users {
-    & > p {
-      color: var(--zinc-200);
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/kanban/ui/__tests__/KanbanWarpper.spec.ts b/core/client/src/widgets/kanban/ui/__tests__/KanbanWarpper.spec.ts
deleted file mode 100644
index e7f40417..00000000
--- a/core/client/src/widgets/kanban/ui/__tests__/KanbanWarpper.spec.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { AddColumn, DragColumns } from '@/features/kanban'
-import i18n from '@/shared/lib/i18n'
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import KanbanWrapper from '../KanbanWrapper.vue'
-import '@/shared/lib/vitest-utils/cookiesI18n-mock'
-
-describe('tests for KanbanWrapper.vue', () => {
-  const wrapper = mount(KanbanWrapper, {
-    global: { plugins: [i18n] },
-    props: {
-      columns: [],
-    },
-  })
-
-  it('should be render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render subcomponents', () => {
-    expect(wrapper.findComponent(DragColumns).exists()).toBe(true)
-    expect(wrapper.findComponent(AddColumn).exists()).toBe(true)
-  })
-})
diff --git a/core/client/src/widgets/kanban/ui/__tests__/__snapshots__/KanbanWarpper.spec.ts.snap b/core/client/src/widgets/kanban/ui/__tests__/__snapshots__/KanbanWarpper.spec.ts.snap
deleted file mode 100644
index d336c855..00000000
--- a/core/client/src/widgets/kanban/ui/__tests__/__snapshots__/KanbanWarpper.spec.ts.snap
+++ /dev/null
@@ -1,15 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for KanbanWrapper.vue > should be render correctly 1`] = `
-"<div class="kanban_wrapper">
-  <div>
-    <div class="columns" tag="ul" name="flip-list" type="transition"></div>
-  </div>
-  <div class="text-sm block"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon">
-      <path d="M5 12h14"></path>
-      <path d="M12 5v14"></path>
-    </svg> Add new column</div>
-  <!--teleport start-->
-  <!--teleport end-->
-</div>"
-`;
diff --git a/core/client/src/widgets/kanban/ui/index.ts b/core/client/src/widgets/kanban/ui/index.ts
deleted file mode 100644
index 56f1b07e..00000000
--- a/core/client/src/widgets/kanban/ui/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import InfoPart from './InfoPart.vue'
-import KanbanWrapper from './KanbanWrapper.vue'
-
-export { InfoPart, KanbanWrapper }
diff --git a/core/client/src/widgets/layout/model/fixtures/header.ts b/core/client/src/widgets/layout/model/fixtures/header.ts
index 5cd8dae0..0499f62f 100644
--- a/core/client/src/widgets/layout/model/fixtures/header.ts
+++ b/core/client/src/widgets/layout/model/fixtures/header.ts
@@ -1,4 +1,4 @@
-import type { HeaderNavLink } from '../types'
+import type { HeaderNavLink, MenuLink, SectionItem } from '../types'
 
 export const headerLinks: HeaderNavLink[] = [
   { id: 0, name: 'About', pagePrefix: 'about' },
@@ -8,3 +8,35 @@ export const headerLinks: HeaderNavLink[] = [
   { id: 4, name: 'Members', pagePrefix: 'members' },
   { id: 5, name: 'Chats', pagePrefix: 'chats' },
 ]
+
+export const menuLinks: MenuLink[] = [
+  { url: 'https://github.com/mnenie/jenda' },
+  { url: 'https://t.me/youngjuicycashrussia' },
+]
+
+export const items: SectionItem[] = [
+  {
+    icon: '✨',
+    urlPrefix: 'about',
+  },
+  {
+    icon: '🧑‍💻',
+    urlPrefix: 'kanban',
+  },
+  {
+    icon: '👥',
+    urlPrefix: 'collaborative',
+  },
+  {
+    icon: '🌐',
+    urlPrefix: 'members',
+  },
+  {
+    icon: '👔',
+    urlPrefix: 'activity',
+  },
+  {
+    icon: '💬',
+    urlPrefix: 'activity',
+  },
+]
diff --git a/core/client/src/widgets/layout/model/links.ts b/core/client/src/widgets/layout/model/links.ts
index 87175de0..872a1292 100644
--- a/core/client/src/widgets/layout/model/links.ts
+++ b/core/client/src/widgets/layout/model/links.ts
@@ -1,29 +1,22 @@
 import type { Link } from './types'
-import {
-  Analytics,
-  Kanban,
-  Members,
-  Settings,
-  Templates,
-} from '@/shared/assets/icons'
 import { RouteNames } from '@/shared/config/consts'
 
-import { h, markRaw } from 'vue'
+import { markRaw } from 'vue'
 
 export const links = markRaw<Link[]>([
-  { id: 0, name: 'boards', pathName: RouteNames.boards, icon: h(Kanban) },
+  { id: 0, name: 'boards', pathName: RouteNames.boards, icon: 'hugeicons:trello' },
   {
     id: 1,
     name: 'templates',
     pathName: RouteNames.templates,
-    icon: h(Templates),
+    icon: 'hugeicons:dashboard-square-add',
   },
   {
     id: 2,
     name: 'analytics',
     pathName: RouteNames.analytics,
-    icon: h(Analytics),
+    icon: 'hugeicons:analytics-01',
   },
-  { id: 3, name: 'members', pathName: RouteNames.members, icon: h(Members) },
-  { id: 4, name: 'settings', pathName: RouteNames.settings, icon: h(Settings) },
+  { id: 3, name: 'members', pathName: RouteNames.members, icon: 'hugeicons:user-multiple-02' },
+  { id: 4, name: 'settings', pathName: RouteNames.settings, icon: 'hugeicons:setting-07' },
 ])
diff --git a/core/client/src/widgets/layout/model/types.ts b/core/client/src/widgets/layout/model/types.ts
index 9ca24f1f..f88f1b8a 100644
--- a/core/client/src/widgets/layout/model/types.ts
+++ b/core/client/src/widgets/layout/model/types.ts
@@ -1,10 +1,29 @@
-import type { Component } from 'vue'
+import type { IconifyIcon } from '@iconify/vue'
+
+export interface SectionItem {
+  title?: string
+  description?: string
+  icon: string
+  urlPrefix:
+    | 'kanban'
+    | 'about'
+    | 'collaborative'
+    | 'activity'
+    | 'members'
+    | 'chats'
+}
+
+export interface MenuLink {
+  title?: string
+  url: string
+}
 
 export interface Link {
   id: number
   name: string
   pathName: string
-  icon: Component
+  // string with unocss update
+  icon: IconifyIcon | string
 }
 
 export interface HeaderNavLink {
diff --git a/core/client/src/widgets/layout/ui/footer/AppFooter.vue b/core/client/src/widgets/layout/ui/footer/AppFooter.vue
index 9b79c9c6..8ad00b89 100644
--- a/core/client/src/widgets/layout/ui/footer/AppFooter.vue
+++ b/core/client/src/widgets/layout/ui/footer/AppFooter.vue
@@ -1,70 +1,19 @@
-<script setup lang="ts">
-import { redirect } from '@/shared/lib/helpers'
-</script>
-
 <template>
-  <footer :class="$style.footer">
-    <div :class="$style.container">
-      <p class="text-sm">
-        <span :class="$style.brand">Jenda</span> - {{ $t('welcome.footer') }}
-        <a :class="$style.link" @click.prevent="redirect('https://github.com/mnenie/jenda')"> Github </a>
+  <footer
+    class="border-t border-t-solid border-[rgba(228,228,231,0.4)] bg-transparent w-full px-10 py-4 dark:border-neutral-700/50 max-[992px]:px-5"
+  >
+    <div
+      class="max-w-1700px mx-auto flex items-start justify-between gap-4 max-[1152px]:max-w-1064px"
+    >
+      <p class="text-sm text-neutral-500 dark:text-neutral-300">
+        <span class="font-medium">Jenda</span> - {{ $t('welcome.footer') }}
+        <a
+          class="cursor-pointer font-medium underline underline-offset-4"
+          href="https://github.com/mnenie/jenda"
+        >
+          Github
+        </a>
       </p>
     </div>
   </footer>
 </template>
-
-<style module lang="scss">
-.footer {
-  border-top: 1px solid rgba(228, 228, 231, 0.4);
-  padding: 16px 40px;
-  background-color: transparent;
-  width: 100%;
-}
-
-.container {
-  max-width: 1700px;
-  margin: 0 auto;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-
-  & > p {
-    color: var(--zinc-600);
-  }
-
-  .brand {
-    font-weight: 500;
-  }
-
-  .link {
-    cursor: pointer;
-    font-weight: 500;
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-:global(html.dark) {
-  .footer {
-    border-color: rgba(var(--zinc-rgb-600), 0.5);
-  }
-  .container {
-    & > p {
-      color: var(--zinc-200);
-    }
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .container {
-    max-width: 1064px;
-  }
-}
-
-@media screen and (max-width: 992px) {
-  .footer {
-    padding: 16px 20px;
-  }
-}
-</style>
diff --git a/core/client/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap b/core/client/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
index e1be9853..e27e7c1a 100644
--- a/core/client/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
+++ b/core/client/src/widgets/layout/ui/footer/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
@@ -1,9 +1,9 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for FooterWelcome.vue > should be render correctly 1`] = `
-"<footer class="footer">
-  <div class="container">
-    <p class="text-sm"><span class="brand">Jenda</span> - cloud-based program for task management. The source code is available on <a class="link"> Github </a></p>
+"<footer class="border-t border-t-solid border-[rgba(228,228,231,0.4)] bg-transparent w-full px-10 py-4 dark:border-neutral-700/50 max-[992px]:px-5">
+  <div class="max-w-1700px mx-auto flex items-start justify-between gap-4 max-[1152px]:max-w-1064px">
+    <p class="text-sm text-neutral-500 dark:text-neutral-300"><span class="font-medium">Jenda</span> - cloud-based program for task management. The source code is available on <a class="cursor-pointer font-medium underline underline-offset-4" href="https://github.com/mnenie/jenda"> Github </a></p>
   </div>
 </footer>"
 `;
diff --git a/core/client/src/widgets/layout/ui/header/BurgerMenu.vue b/core/client/src/widgets/layout/ui/header/BurgerMenu.vue
new file mode 100644
index 00000000..bf59f16a
--- /dev/null
+++ b/core/client/src/widgets/layout/ui/header/BurgerMenu.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { MenuLink, SectionItem } from '../../model'
+import { useScroll } from '@/shared/lib/composables'
+import { redirect } from '@/shared/lib/helpers'
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { items as _items, menuLinks as _links } from '../../model'
+
+const isOpen = ref(false)
+
+watch(isOpen, (newVal) => {
+  document.body.style.overflow = newVal ? 'hidden' : ''
+})
+
+const { tm } = useI18n()
+
+const items = computed(() => {
+  const _arr = tm('welcome.mobile.section_blocks') as Omit<SectionItem[], 'icon' | 'urlPrefix'>
+  return _items.map((item, i) => ({
+    ...item,
+    title: _arr[i].title,
+    description: _arr[i].description,
+  }))
+})
+
+const links = computed(() => {
+  const _arr = tm('welcome.mobile.links') as Omit<MenuLink[], 'url'>
+  return _links.map((link, i) => ({
+    ...link,
+    title: _arr[i].title,
+  }))
+})
+
+const { scrollToEl } = useScroll(items.value.map(i => i.urlPrefix))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="isOpen"
+      class="fixed top-0 left-0 w-full h-dvh bg-black/50 opacity-0 z-998 pointer-events-none transition-opacity duration-250 ease-in-out"
+      @click="isOpen = false"
+    />
+    <div class="menu bg-main" :class="[isOpen ? 'menu-opened' : '']">
+      <div class="flex flex-col gap-2.5">
+        <div
+          v-for="(link, index) in links"
+          :key="index"
+          class="flex items-center justify-between p-3 px-4 rounded-8px border-0.5px border-solid border-transparent cursor-pointer duration-100 ease dark:bg-neutral-700"
+          @click="redirect(link.url)"
+        >
+          <p class="text-lg">
+            {{ link.title }}
+          </p>
+          <div
+            i-lucide-arrow-up-right
+            class="text-neutral-400 text-lg"
+          />
+        </div>
+        <div class="sections">
+          <div
+            v-for="(i, index) in items"
+            :key="index"
+            class="flex flex-col min-h-160px p-4 rounded-8px bg-neutral-50 max-[420px]:min-h-100px dark:bg-neutral-700"
+            @click="(isOpen = false), scrollToEl(i.urlPrefix)"
+          >
+            <div class="flex items-center justify-between">
+              <span class="text-xl">{{ i.icon }}</span>
+              <div
+                i-lucide-bookmark
+                class="text-neutral-400 text-lg"
+              />
+            </div>
+            <div class="mt-auto">
+              <h4 class="text-xl mb-3px dark:text-neutral-100">
+                {{ i.title }}
+              </h4>
+              <p class="text-base text-neutral-700 dark:text-neutral-200">
+                {{ i.description }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+  <div
+    v-show="!isOpen"
+    i-lucide-menu
+    class="text-2xl text-neutral-700 dark:text-neutral-200"
+    @click="isOpen = true"
+  />
+  <div
+    v-show="isOpen"
+    i-lucide-x
+    class="text-2xl text-neutral-700 dark:text-neutral-200"
+    @click="isOpen = false"
+  />
+</template>
+
+<style scoped>
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100dvh;
+  padding: 76px 16px 32px;
+  z-index: 10;
+  transform: translateY(-100%);
+  transition:
+    transform 300ms,
+    opacity 300ms;
+  opacity: 0;
+  animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
+  pointer-events: none;
+  overflow-y: auto;
+}
+
+.sections {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(calc(33% - 8px), 1fr));
+  grid-gap: 10px;
+  margin-top: 2px;
+}
+
+.menu-opened {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: all;
+}
+
+.menu-opened + .overlay {
+  opacity: 1;
+  pointer-events: all;
+}
+
+@media screen and (max-width: 768px) {
+  .sections {
+    grid-template-columns: 100%;
+  }
+}
+</style>
diff --git a/core/client/src/widgets/layout/ui/header/HeaderMain.vue b/core/client/src/widgets/layout/ui/header/HeaderMain.vue
index 34034f24..196a0b79 100644
--- a/core/client/src/widgets/layout/ui/header/HeaderMain.vue
+++ b/core/client/src/widgets/layout/ui/header/HeaderMain.vue
@@ -2,8 +2,8 @@
 import type { Board } from '@/entities/board'
 import type { ProjectLink } from '@/shared/config/types-shared'
 import { type User, UserAvatar } from '@/entities/user'
-import { Massages, Plus, Project, Question } from '@/shared/assets/icons'
 import { useLayoutPaths } from '@/shared/lib/composables'
+import { Icon } from '@iconify/vue'
 import { computed, shallowReactive, toRef } from 'vue'
 import { links } from '../../model'
 import UserMenu from './UserMenu.vue'
@@ -37,20 +37,28 @@ const { active } = useLayoutPaths(links, _projects)
 </script>
 
 <template>
-  <header :class="$style.header">
-    <div :class="$style.about">
-      <component :is="active?.extendedAttrs.icon" :class="$style.icon_main" />
-      <Project
+  <header
+    class="sticky top-0 left-0 right-0 z-999 w-full flex items-center justify-between px-15px py-10px
+    h-48px border-b border-b-solid border-layout"
+  >
+    <div class="inline-flex items-center gap-3">
+      <Icon
+        v-if="active.extendedAttrs.icon"
+        :icon="active?.extendedAttrs.icon"
+        class="text-20px text-neutral-800 dark:text-neutral-200"
+      />
+      <div
         v-if="active.extendedAttrs.color"
+        i-jenda-custom-project
         :style="{ color: active.extendedAttrs.color, fontSize: '20px' }"
       />
-      <p v-if="active" class="text-lg">
+      <p v-if="active" class="text-lg mt-1.5px !fw-600 dark:text-neutral-100">
         {{ active.name }}
       </p>
     </div>
     <div />
-    <div :class="$style.right_section">
-      <div :class="$style.users_container">
+    <div class="flex items-center h-full gap-2.5">
+      <div class="relative flex items-center h-20px w-20px">
         <template v-for="user in users" :key="user._id">
           <UserAvatar
             :style="{
@@ -58,131 +66,28 @@ const { active } = useLayoutPaths(links, _projects)
               zIndex: userPosition(users, user),
               border: `1px solid ${user._id === '0' ? 'var(--blue-secondary)' : 'var(--zinc-300)'}`,
             }"
-            :class="$style.user"
+            class="!h-28px !w-28px absolute"
           >
             <img :src="user.photoUrl" width="100%" />
           </UserAvatar>
         </template>
       </div>
-      <div :class="$style.add_user">
-        <Plus :class="$style.icon" />
+      <div class="flex items-center justify-center p-5.8px rounded-full shadow-sm mr-1 cursor-pointer">
+        <div i-lucide-plus class="text-base text-neutral-800 dark:text-neutral-200" />
       </div>
-      <Massages
+      <div
         v-tooltip="{ content: $t('header.navigator.messages'), trigger: ['hover'], distance: 7 }"
-        :class="$style.ext_icon"
+        i-hugeicons-message-multiple-01
+        class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
         style="margin-right: 2px"
       />
-      <Question
+      <div
         v-tooltip="{ content: $t('header.navigator.question'), trigger: ['hover'], distance: 7 }"
-        :class="$style.ext_icon"
+        i-hugeicons-book-open-01
+        class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
         style="margin-right: -1px;"
       />
       <UserMenu />
     </div>
   </header>
 </template>
-
-<style module lang="scss">
-.header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--main-slotted);
-  padding: 10px 15px;
-  height: 48px;
-  border-bottom: 1px solid var(--zinc-200);
-  width: 100%;
-  // box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  .icon_main {
-    color: var(--zinc-800);
-    font-size: 20px;
-  }
-
-  .about {
-    display: inline-flex;
-    align-items: center;
-    gap: 12px;
-
-    & > p {
-      margin-top: 1.5px;
-      font-weight: 600;
-    }
-  }
-
-  .right_section {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    gap: 10px;
-
-    .users_container {
-      position: relative;
-      display: flex;
-      align-items: center;
-      height: 20px;
-      width: 20px;
-
-      .user {
-        height: 28px;
-        width: 28px;
-        position: absolute;
-      }
-    }
-
-    .add_user {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 50%;
-      padding: 5.8px;
-      box-shadow: 0 0 3.5px rgba(0, 0, 0, 0.12);
-      margin-right: 4px;
-
-      .icon {
-        font-size: 16px;
-        color: var(--zinc-600);
-        cursor: pointer;
-      }
-    }
-
-    .ext_icon {
-      color: var(--zinc-600);
-      cursor: pointer;
-      font-size: 17.5px;
-      outline: none;
-    }
-  }
-}
-
-:global(html.dark) {
-  .header {
-    border-color: var(--dark-border);
-    .icon_main {
-      color: var(--zinc-200);
-    }
-    .about {
-      & > p {
-        color: var(--zinc-100);
-      }
-    }
-
-    .right_section {
-      .add_user {
-        box-shadow: 0 0 3.5px rgba(255, 255, 255, 0.12);
-        .icon {
-          color: var(--zinc-300);
-        }
-      }
-      .ext_icon{
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/layout/ui/header/HeaderWelcome.vue b/core/client/src/widgets/layout/ui/header/HeaderWelcome.vue
index 241130d5..d81844ed 100644
--- a/core/client/src/widgets/layout/ui/header/HeaderWelcome.vue
+++ b/core/client/src/widgets/layout/ui/header/HeaderWelcome.vue
@@ -1,19 +1,17 @@
 <script setup lang="ts">
-import type { Options } from '@/shared/ui/select/types'
 import type { HeaderNavLink } from '../../model'
-import { BurgerMenu } from '@/features/menu'
+import { LanguageSelect, ThemeSwitcher } from '@/features/layout'
 import { RouteNames } from '@/shared/config/consts'
-import { useLanguage, useScroll } from '@/shared/lib/composables'
+import { useScroll } from '@/shared/lib/composables'
 import { redirect } from '@/shared/lib/helpers'
-import { UiButton, UiSelect } from '@/shared/ui'
-import { useDark, useToggle, useWindowSize } from '@vueuse/core'
-import { Globe, Moon, Sun } from 'lucide-vue-next'
-import { computed, ref, shallowReactive } from 'vue'
+import { UiButton } from '@/shared/ui'
+import { useDark, useWindowSize } from '@vueuse/core'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { headerLinks } from '../../model'
+import BurgerMenu from './BurgerMenu.vue'
 
 const isDark = useDark()
-const toggleDark = useToggle(isDark)
 
 const { tm, t } = useI18n()
 
@@ -21,15 +19,6 @@ const iconUrl = computed(() => {
   return isDark.value ? '/icons/kanban-dark.png' : '/icons/kanban.png'
 })
 
-const languages = shallowReactive<Options[]>([
-  { name: 'EN', value: 'en-US' },
-  { name: 'RU', value: 'ru-RU' },
-  { name: 'ZH', value: 'zh-CN' },
-])
-const language = ref('')
-
-useLanguage(languages, language)
-
 const links = computed(() => {
   const localeArr = tm('welcome.header.links') as HeaderNavLink[]
   return headerLinks.map((link, index) => ({
@@ -42,15 +31,27 @@ const { width } = useWindowSize()
 </script>
 
 <template>
-  <header :class="$style.header_welcome">
+  <header
+    class="sticky top-0 z-50 flex flex-col self-center gap-10 max-w-1800px w-full px-4 py-3"
+  >
     <slot name="offer" />
-    <section :class="$style.containers">
-      <div :class="$style.left_container">
-        <div v-if="width >= 1152" :class="$style.box">
-          <div :class="$style.inside">
-            <div :class="$style.name_container" @click="redirect('https://github.com/mnenie/jenda')">
-              <img :src="iconUrl" />
-              <h3 class="text-xl">
+    <section class="flex items-center justify-between">
+      <div class="flex items-center gap-2 select-none">
+        <div
+          v-if="width >= 1152"
+          class="relative z-10 box bg-white border border-solid border-#e3e4e8 flex items-center py-0 pl-2.5 pr-3.5 h-40px rounded-lg
+          dark:shadow-sm dark:bg-#313131 dark:border-neutral-700"
+        >
+          <div class="flex items-center gap-0.5">
+            <div
+              class="flex items-center gap-1 cursor-pointer mr-2"
+              @click="redirect('https://github.com/mnenie/jenda')"
+            >
+              <img
+                :src="iconUrl"
+                class="w-22px h-22px"
+              />
+              <h3 class="text-xl fw-500">
                 Jenda
               </h3>
             </div>
@@ -59,37 +60,39 @@ const { width } = useWindowSize()
               :key="link.id"
               variant="ghost"
               size="sm"
-              :class="$style.item"
+              class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400"
               @click="scrollToEl(link.pagePrefix)"
             >
               {{ link.name }}
             </UiButton>
           </div>
         </div>
-        <div v-else :class="$style.name_container" @click="redirect('https://github.com/mnenie/jenda')">
-          <img :src="iconUrl" />
-          <h3 class="heading-3">
+        <div
+          v-else
+          class="flex items-center gap-1 cursor-pointer mr-2"
+          @click="redirect('https://github.com/mnenie/jenda')"
+        >
+          <img
+            :src="iconUrl"
+            class="w-22px h-22px"
+          />
+          <h3 class="text-xl fw500">
             Jenda
           </h3>
         </div>
-        <div :class="$style.additional">
-          <UiSelect v-model="language" :options="languages" as="btn">
-            <Globe :size="16" />
-          </UiSelect>
-          <div :class="$style.separator" />
-          <UiButton
-            variant="ghost"
-            size="sm"
-            :class="$style.btn"
-            @click="toggleDark()"
-          >
-            <Moon v-if="!isDark" :size="17" />
-            <Sun v-else :size="17" />
-          </UiButton>
+        <div class="flex items-center gap-1">
+          <LanguageSelect />
+          <div class="w-1px h-3.5 bg-neutral-200 dark:bg-neutral-700" />
+          <ThemeSwitcher />
         </div>
       </div>
-      <div v-if="width >= 1152" :class="$style.btns">
-        <UiButton variant="ghost" style="font-weight: 500" @click="$router.push({ name: RouteNames.login })">
+      <div v-if="width >= 1152" class="flex items-center gap-1.5 btns">
+        <UiButton
+          variant="ghost"
+          class="bg-main bg-transparent"
+          style="font-weight: 500"
+          @click="$router.push({ name: RouteNames.login })"
+        >
           {{ t('welcome.header.login') }}
         </UiButton>
         <UiButton @click="$router.push({ name: RouteNames.registration })">
@@ -101,153 +104,10 @@ const { width } = useWindowSize()
   </header>
 </template>
 
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.header_welcome {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-  display: flex;
-  justify-self: center;
-  flex-direction: column;
-  gap: 10px;
-  max-width: 1800px;
-  width: 100%;
-  padding: 12px 16px;
-
-  .containers {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .name_container {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    cursor: pointer;
-    margin-right: 8px;
-
-    & > img {
-      width: 22px;
-      height: 22px;
-    }
-  }
-
-  .btns {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-
-    .ghost_exception {
-      font-weight: 500;
-    }
-  }
-
-  .inside {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-
-    .item {
-      color: var(--zinc-400);
-      font-weight: 500;
-      cursor: pointer;
-
-      @include on-hover {
-        color: var(--zinc-700);
-      }
-    }
-  }
-
-  .left_container {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    user-select: none;
-
-    .additional {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-
-      .btn {
-        padding: 8px;
-        gap: 4px;
-        color: var(--zinc-300);
-
-        @include on-hover {
-          color: var(--zinc-600);
-        }
-      }
-    }
-  }
-}
-
-.separator {
-  width: 1px;
-  height: 16px;
-  background-color: var(--zinc-200);
-}
-
+<style scoped>
 .box {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  padding: 0px 10px 0px 15px;
-  height: 40px;
-  border-radius: 8px;
-  border: 0.5px solid #e3e4e8;
-  background: #fff;
   box-shadow:
     0 12px 40px 0 rgba(0, 0, 0, 0.06),
     0 1px 0 0 rgba(0, 0, 0, 0.04);
 }
-
-:global(html.dark) {
-  .box {
-    background-color: #313131;
-    border-color: var(--zinc-600);
-    box-shadow: 0 3px 2px 0 rgb(0 0 0 / 0.05);
-  }
-  .separator {
-    background-color: var(--zinc-600);
-  }
-  .header_welcome {
-    .inside {
-      .item {
-        color: var(--zinc-300);
-        @include on-hover {
-          color: var(--zinc-200);
-          background-color: var(--zinc-600);
-        }
-      }
-    }
-    .left_container {
-      .additional {
-        .btn {
-          @include on-hover {
-            color: var(--zinc-200);
-          }
-        }
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .header_welcome{
-    max-width: 1064px;
-  }
-}
-
-@media screen and (max-width: 992px) {
-  .header_welcome{
-    max-width: 900px;
-  }
-}
 </style>
diff --git a/core/client/src/widgets/layout/ui/header/UserMenu.vue b/core/client/src/widgets/layout/ui/header/UserMenu.vue
index 02f422c7..c74045c3 100644
--- a/core/client/src/widgets/layout/ui/header/UserMenu.vue
+++ b/core/client/src/widgets/layout/ui/header/UserMenu.vue
@@ -1,47 +1,42 @@
 <script setup lang="ts">
-import { Menu } from '@/shared/assets/icons'
 import { RouteNames } from '@/shared/config/consts'
-import { UiDropdown, UiDropdownItem, UiDropdownShortcut } from '@/shared/ui'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuContent,
+  UiDropdownMenuGroup,
+  UiDropdownMenuItem,
+  UiDropdownMenuLabel,
+  UiDropdownMenuSeparator,
+  UiDropdownMenuShortcut,
+  UiDropdownMenuTrigger,
+} from '@/shared/ui'
 </script>
 
 <template>
-  <UiDropdown direction="right">
-    <template #trigger>
-      <div :class="$style.wrapper">
-        <Menu :class="$style.icon" />
+  <UiDropdownMenu direction="right">
+    <UiDropdownMenuTrigger as-child>
+      <div class="flex items-center justify-center h-17px">
+        <div
+          i-lucide-ellipsis-vertical
+          class="text-base text-neutral-500 dark:text-neutral-400"
+        />
       </div>
-    </template>
-    <template #header>
-      <span class="text-sm" style="font-weight: 500">test@gmail.com</span>
-    </template>
-    <template #content>
-      <UiDropdownItem @click="$router.push({ name: RouteNames.welcome })">
-        {{ $t('header.user.welcome') }}
-        <UiDropdownShortcut>⌘B</UiDropdownShortcut>
-      </UiDropdownItem>
-      <UiDropdownItem>
-        {{ $t('header.user.logout') }}
-        <UiDropdownShortcut>⇧⌘Q</UiDropdownShortcut>
-      </UiDropdownItem>
-    </template>
-  </UiDropdown>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent align="end" class="w-[200px] mt-4px">
+      <UiDropdownMenuLabel class="2xl:text-[13px] sm:text-sm">
+        test@gmail.com
+      </UiDropdownMenuLabel>
+      <UiDropdownMenuSeparator />
+      <UiDropdownMenuGroup>
+        <UiDropdownMenuItem @click="$router.push({ name: RouteNames.welcome })">
+          <span class="2xl:text-xs text-sm font-medium">{{ $t('header.user.welcome') }}</span>
+          <UiDropdownMenuShortcut>⇧P</UiDropdownMenuShortcut>
+        </UiDropdownMenuItem>
+        <UiDropdownMenuItem>
+          <span class="2xl:text-xs text-sm font-medium">{{ $t('header.user.logout') }}</span>
+          <UiDropdownMenuShortcut>⌘X</UiDropdownMenuShortcut>
+        </UiDropdownMenuItem>
+      </UiDropdownMenuGroup>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
 </template>
-
-<style module lang="scss">
-.wrapper {
-  height: 17px;
-}
-
-.icon {
-  width: 17px;
-  height: 17px;
-  color: var(--zinc-500);
-  cursor: pointer;
-}
-
-:global(html.dark) {
-  .icon {
-    color: var(--zinc-300);
-  }
-}
-</style>
diff --git a/core/client/src/widgets/layout/ui/header/__tests__/HeaderWelcome.spec.ts b/core/client/src/widgets/layout/ui/header/__tests__/HeaderWelcome.spec.ts
index 18cbb645..e909042c 100644
--- a/core/client/src/widgets/layout/ui/header/__tests__/HeaderWelcome.spec.ts
+++ b/core/client/src/widgets/layout/ui/header/__tests__/HeaderWelcome.spec.ts
@@ -1,9 +1,8 @@
-import type { Options } from '@/shared/ui/select/types'
 import type { VueWrapper } from '@vue/test-utils'
+import type { headerLinks } from './../../../model/fixtures/header'
 import i18n from '@/shared/lib/i18n'
-import { UiButton, UiSelect } from '@/shared/ui'
-import { mount } from '@vue/test-utils'
-import { Moon, Sun } from 'lucide-vue-next'
+import { UiButton } from '@/shared/ui'
+import { shallowMount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { type ComponentPublicInstance, nextTick } from 'vue'
 import HeaderWelcome from '../HeaderWelcome.vue'
@@ -15,8 +14,7 @@ type HeaderWelcomeInstance = ComponentPublicInstance<
   {
     isDark: boolean
     width: number
-    languages: Options[]
-    links: () => any[]
+    headerLinks: typeof headerLinks
   }
 >
 
@@ -26,7 +24,7 @@ const mockRouter = {
 }
 
 describe('tests for HeaderWelcome.vue', () => {
-  const wrapper = mount(HeaderWelcome, {
+  const wrapper = shallowMount(HeaderWelcome, {
     global: {
       plugins: [i18n],
 
@@ -55,29 +53,6 @@ describe('tests for HeaderWelcome.vue', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
 
-  it('should render subcomponents', async () => {
-    wrapper.vm.width = 1600
-    await nextTick()
-    expect(wrapper.findComponent(UiButton).exists()).toBe(true)
-    expect(wrapper.findComponent(UiSelect).exists()).toBe(true)
-  })
-
-  it('should handle mode + icon changing', async () => {
-    const darkModeButton = wrapper.find('.btn')
-    wrapper.vm.isDark = false
-    wrapper.vm.width = 1600
-    await nextTick()
-
-    expect(wrapper.findComponent(Moon).exists()).toBe(true)
-    expect(wrapper.findComponent(Sun).exists()).toBe(false)
-
-    darkModeButton.trigger('click')
-    wrapper.vm.isDark = true
-    await nextTick()
-    expect(wrapper.findComponent(Moon).exists()).toBe(false)
-    expect(wrapper.findComponent(Sun).exists()).toBe(true)
-  })
-
   it('should redirect correctly to login', async () => {
     const loginButton = wrapper.find('.btns').findAllComponents(UiButton).at(0)
 
diff --git a/core/client/src/widgets/layout/ui/header/__tests__/UserMenu.spec.ts b/core/client/src/widgets/layout/ui/header/__tests__/UserMenu.spec.ts
index 6beca733..2fa4b52b 100644
--- a/core/client/src/widgets/layout/ui/header/__tests__/UserMenu.spec.ts
+++ b/core/client/src/widgets/layout/ui/header/__tests__/UserMenu.spec.ts
@@ -1,19 +1,12 @@
+import { RouteNames } from '@/shared/config/consts'
 import i18n from '@/shared/lib/i18n'
-import { UiDropdown, UiDropdownItem } from '@/shared/ui'
+import { UiDropdownMenuItem, UiDropdownMenuTrigger } from '@/shared/ui'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
-import { type ComponentPublicInstance, nextTick } from 'vue'
+import { nextTick } from 'vue'
 import UserMenu from '../UserMenu.vue'
 import '@/shared/lib/vitest-utils/cookiesI18n-mock'
 
-type UserMenuDropdownInstance = ComponentPublicInstance<
-  {},
-  {},
-  {
-    handleDropdown: () => void
-  }
->
-
 const mockRouter = {
   push: vi.fn(),
   beforeEach: vi.fn(),
@@ -23,7 +16,6 @@ describe('tests for UserMenu.vue', () => {
   const wrapper = mount(UserMenu, {
     global: {
       plugins: [i18n],
-
       mocks: {
         t: (key: string) => {
           const translations: Record<string, string> = {
@@ -37,22 +29,17 @@ describe('tests for UserMenu.vue', () => {
     },
   })
 
-  it('should be render correctly', async () => {
-    wrapper
-      .findComponent(UiDropdown as unknown as UserMenuDropdownInstance)
-      .vm
-      .handleDropdown()
+  it('should redirect correctly to welcome', async () => {
+    await wrapper.findComponent(UiDropdownMenuTrigger).trigger('click')
     await nextTick()
-    expect(wrapper.html()).toMatchSnapshot()
+    const items = wrapper.findAllComponents(UiDropdownMenuItem)
+    expect(items.length).toBeGreaterThan(0)
+    const welcomeTrigger = items.at(0)
+    await welcomeTrigger?.trigger('click')
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: RouteNames.welcome })
   })
 
-  it('should redirect coorectly', async () => {
-    const welcomeTrigger = wrapper
-      .find('.content')
-      .findAllComponents(UiDropdownItem)
-      .at(0)
-
-    await welcomeTrigger.trigger('click')
-    expect(mockRouter.push).toHaveBeenCalledWith({ name: 'welcome' })
+  it('should redirect correctly to logout', async () => {
+    // needs to be fixed
   })
 })
diff --git a/core/client/src/widgets/layout/ui/header/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap b/core/client/src/widgets/layout/ui/header/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
index d27b267c..fc89ac30 100644
--- a/core/client/src/widgets/layout/ui/header/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
+++ b/core/client/src/widgets/layout/ui/header/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
@@ -1,52 +1,32 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for HeaderWelcome.vue > should be render correctly 1`] = `
-"<header class="header_welcome">
-  <section class="containers">
-    <div class="left_container">
-      <div class="box">
-        <div class="inside">
-          <div class="name_container"><img src="/icons/kanban.png">
-            <h3 class="text-xl"> Jenda </h3>
-          </div><button class="text-sm button ghost sm item">
-            <!--v-if-->About
-          </button><button class="text-sm button ghost sm item">
-            <!--v-if-->Kanban
-          </button><button class="text-sm button ghost sm item">
-            <!--v-if-->Collaborative
-          </button><button class="text-sm button ghost sm item">
-            <!--v-if-->Activity
-          </button><button class="text-sm button ghost sm item">
-            <!--v-if-->Members
-          </button><button class="text-sm button ghost sm item">
-            <!--v-if-->Chats
-          </button>
+"<header data-v-88b13e8b="" class="sticky top-0 z-50 flex flex-col self-center gap-10 max-w-1800px w-full px-4 py-3">
+  <section data-v-88b13e8b="" class="flex items-center justify-between">
+    <div data-v-88b13e8b="" class="flex items-center gap-2 select-none">
+      <div data-v-88b13e8b="" class="relative z-10 box bg-white border border-solid border-#e3e4e8 flex items-center py-0 pl-2.5 pr-3.5 h-40px rounded-lg dark:shadow-sm dark:bg-#313131 dark:border-neutral-700">
+        <div data-v-88b13e8b="" class="flex items-center gap-0.5">
+          <div data-v-88b13e8b="" class="flex items-center gap-1 cursor-pointer mr-2"><img data-v-88b13e8b="" src="/icons/kanban.png" class="w-22px h-22px">
+            <h3 data-v-88b13e8b="" class="text-xl fw-500"> Jenda </h3>
+          </div>
+          <ui-button-stub data-v-88b13e8b="" class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400" variant="ghost" size="sm" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+          <ui-button-stub data-v-88b13e8b="" class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400" variant="ghost" size="sm" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+          <ui-button-stub data-v-88b13e8b="" class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400" variant="ghost" size="sm" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+          <ui-button-stub data-v-88b13e8b="" class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400" variant="ghost" size="sm" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+          <ui-button-stub data-v-88b13e8b="" class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400" variant="ghost" size="sm" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+          <ui-button-stub data-v-88b13e8b="" class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400" variant="ghost" size="sm" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
         </div>
       </div>
-      <div class="additional">
-        <div class="btn_variant"><button class="text-sm button ghost sm btn">
-            <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-icon">
-              <circle cx="12" cy="12" r="10"></circle>
-              <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path>
-              <path d="M2 12h20"></path>
-            </svg> EN
-          </button>
-          <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-            <!--v-if-->
-          </transition-stub>
-        </div>
-        <div class="separator"></div><button class="text-sm button ghost sm btn">
-          <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon-icon">
-            <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
-          </svg>
-        </button>
+      <div data-v-88b13e8b="" class="flex items-center gap-1">
+        <language-select-stub data-v-88b13e8b=""></language-select-stub>
+        <div data-v-88b13e8b="" class="w-1px h-3.5 bg-neutral-200 dark:bg-neutral-700"></div>
+        <theme-switcher-stub data-v-88b13e8b=""></theme-switcher-stub>
       </div>
     </div>
-    <div class="btns"><button class="text-sm button ghost md" style="font-weight: 500;">
-        <!--v-if-->Log In
-      </button><button class="text-sm button default md">
-        <!--v-if-->Registration
-      </button></div>
+    <div data-v-88b13e8b="" class="flex items-center gap-1.5 btns">
+      <ui-button-stub data-v-88b13e8b="" 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-88b13e8b="" variant="default" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+    </div>
   </section>
 </header>"
 `;
diff --git a/core/client/src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap b/core/client/src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap
deleted file mode 100644
index ef5436e8..00000000
--- a/core/client/src/widgets/layout/ui/header/__tests__/__snapshots__/UserMenu.spec.ts.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for UserMenu.vue > should be render correctly 1`] = `
-"<div class="dropdown">
-  <div class="wrapper">
-    <div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" class="icon">
-        <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="3.75" d="M12 12h.01v.01H12zm0-7h.01v.01H12zm0 14h.01v.01H12z"></path>
-      </svg></div>
-  </div>
-  <transition-stub name="dropdown" appear="false" persisted="false" css="true">
-    <div class="inside" style="top: 36px; right: 0px; transform: translateX(0%);">
-      <div class="text-sm header"><span class="text-sm" style="font-weight: 500;">test@gmail.com</span></div>
-      <div class="content">
-        <div class="item">Go to Welcome <div class="shortcut">⌘B</div>
-        </div>
-        <div class="item">Log out <div class="shortcut">⇧⌘Q</div>
-        </div>
-      </div>
-    </div>
-  </transition-stub>
-</div>"
-`;
diff --git a/core/client/src/widgets/layout/ui/sidebar/AppSidebar.vue b/core/client/src/widgets/layout/ui/sidebar/AppSidebar.vue
index 02854374..7c7f6acb 100644
--- a/core/client/src/widgets/layout/ui/sidebar/AppSidebar.vue
+++ b/core/client/src/widgets/layout/ui/sidebar/AppSidebar.vue
@@ -23,9 +23,9 @@ const paddingExpanded = computed(() => {
 </script>
 
 <template>
-  <nav :class="$style.sidebar">
+  <div class="relative w-full flex flex-col h-full bg-sidebar select-none border-r border-r-solid border-layout">
     <WorkspaceChooser />
-    <div :class="$style.content" :style="{ padding: paddingExpanded }">
+    <div class="flex flex-col justify-between h-full mt-1.5" :style="{ padding: paddingExpanded }">
       <div>
         <SearchBox :boards />
         <WorkSpace :links :is-expanded />
@@ -33,45 +33,5 @@ const paddingExpanded = computed(() => {
       </div>
       <PlanCard :is-expanded />
     </div>
-  </nav>
+  </div>
 </template>
-
-<style module lang="scss">
-.sidebar {
-  position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  background-color: var(--sidebar-bg-color);
-  user-select: none;
-  border-right: 1px solid var(--zinc-200);
-
-  .content {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    margin-top: 6px;
-
-    .menu {
-      width: 100%;
-      color: var(--zinc-500);
-      cursor: pointer;
-      padding: 0 auto;
-    }
-  }
-}
-
-:global(.dark) {
-  .sidebar {
-    border-color: var(--dark-border);
-    .name {
-      .icon_menu {
-        color: var(--zinc-200);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/layout/ui/sidebar/ProjectsList.vue b/core/client/src/widgets/layout/ui/sidebar/ProjectsList.vue
index 76340b34..74bc1288 100644
--- a/core/client/src/widgets/layout/ui/sidebar/ProjectsList.vue
+++ b/core/client/src/widgets/layout/ui/sidebar/ProjectsList.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Board } from '@/entities/board'
-import { Arrow, Plus, Project } from '@/shared/assets/icons'
 import { UiButton } from '@/shared/ui'
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
@@ -32,21 +31,36 @@ function changeShowList() {
 </script>
 
 <template>
-  <div :class="$style.about" @mouseover="showPlusIcon = true" @mouseleave="showPlusIcon = false">
-    <div :class="$style.name">
-      <Arrow
+  <div
+    class="flex items-center justify-between w-full px-2 pt-0 pb-3"
+    @mouseover="showPlusIcon = true"
+    @mouseleave="showPlusIcon = false"
+  >
+    <div class="flex items-center gap-1.5 w-full">
+      <div
         v-show="isExpanded"
-        :class="$style.icon"
+        i-lucide-chevron-down
+        class="cursor-pointer text-base text-neutral-500 dark:text-neutral-400"
         :style="{ transform: !showList ? 'rotate(-90deg)' : '' }"
         @click="changeShowList"
       />
-      <p class="text-sm" :class="$style.section">
+      <p
+        class="text-neutral-500 dark:text-neutral-400 text-sm capitalize text-ellipsis
+        whitespace-nowrap overflow-hidden"
+      >
         {{ $t('sidebar.projects') }}
       </p>
     </div>
-    <Plus v-show="isExpanded && showPlusIcon" :class="$style.icon" style="font-size: 16px" />
+    <div
+      v-show="isExpanded && showPlusIcon"
+      i-lucide-plus
+      class="cursor-pointer text-base text-neutral-500 dark:text-neutral-400"
+    />
   </div>
-  <div v-if="showList" :class="$style.sidebar_projects">
+  <div
+    v-if="showList"
+    class="flex flex-col gap-5px justify-start mb-30px"
+  >
     <RouterLink
       v-for="project in _projects"
       :key="project._id"
@@ -56,134 +70,27 @@ function changeShowList() {
         disabled: isExpanded,
       }"
       :to="`/board/${project._id}`"
-      :class="$style.project"
+      class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"
     >
       <UiButton
         :variant="project.isActive ? 'secondary' : 'ghost'"
-        :class="$style.proj_btn"
+        class="w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease"
+        :class="project.isActive ? '!bg-neutral-200/40 dark:!bg-neutral-700/50' : ''"
         :style="{ padding: !isExpanded ? '0px' : '', justifyContent: contentPosition }"
       >
-        <Project :class="$style.project_indicator" :style="{ color: project.color }" />
-        <span v-show="isExpanded" class="text-sm">{{ project.name }}</span>
+        <div
+          i-jenda-custom-project
+          class="w-18px h-18px rounded flex justify-center items-center"
+          :style="{ color: project.color }"
+        />
+        <span
+          v-show="isExpanded"
+          class="text-sm text-ellipsis overflow-hidden max-w-80%
+          whitespace-nowrap !fw500 text-neutral-900 dark:text-neutral-100"
+        >
+          {{ project.name }}
+        </span>
       </UiButton>
     </RouterLink>
   </div>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.about {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0 10px 12px 10px;
-
-  .name {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    width: 100%;
-
-    .section {
-      color: var(--zinc-400);
-      text-transform: capitalize;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-  }
-
-  .icon {
-    color: var(--zinc-400);
-    font-size: 18px;
-    cursor: pointer;
-  }
-}
-
-.sidebar_projects {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  justify-content: flex-start;
-  margin-bottom: 30px;
-
-  .project {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    color: var(--zinc-900);
-    justify-content: flex-start;
-    width: 100%;
-
-    .proj_btn {
-      width: 100%;
-      gap: 6px;
-      box-shadow: none;
-      padding: 0 10px;
-      transition: all 0.1s ease;
-      &:hover {
-        background-color: rgba(var(--zinc-rgb-200), 0.3);
-      }
-      &:focus {
-        background-color: rgba(231, 231, 231, 0.6);
-      }
-
-      .project_indicator {
-        width: 18px;
-        height: 18px;
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        text-transform: lowercase;
-
-        & > span {
-          color: var(--zinc-50);
-          text-overflow: ellipsis;
-        }
-      }
-    }
-
-    & span {
-      font-weight: 500 !important;
-      color: var(--zinc-900);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      max-width: 86%;
-    }
-  }
-}
-
-:global(html.dark) {
-  .about {
-    .name {
-      .section {
-        color: var(--zinc-300);
-      }
-    }
-    .icon {
-      color: var(--zinc-300);
-    }
-  }
-  .sidebar_projects {
-    .project {
-      .proj_btn {
-        & span {
-          color: var(--zinc-100);
-        }
-        &:hover {
-          background-color: rgba(var(--zinc-rgb-600), 0.3);
-        }
-        &:focus {
-          background-color: rgba(var(--zinc-rgb-600), 0.5);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/layout/ui/sidebar/SearchBox.vue b/core/client/src/widgets/layout/ui/sidebar/SearchBox.vue
index 84cb6844..7611c1f2 100644
--- a/core/client/src/widgets/layout/ui/sidebar/SearchBox.vue
+++ b/core/client/src/widgets/layout/ui/sidebar/SearchBox.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { Board } from '@/entities/board'
 import { SearchFilter } from '@/features/filter'
-import { File } from '@/shared/assets/icons'
 import { HippieNav } from '@noction/hippie-nav'
 import { computed, nextTick, ref, useTemplateRef } from 'vue'
 import { useRouter } from 'vue-router'
@@ -63,11 +62,11 @@ useSearch(hippieNav, openFl, placeholder)
   <Teleport to="body">
     <HippieNav ref="hippieNav" :options="options" :actions="actions">
       <template #resultItem="{ data }">
-        <File class="type-icon" />
+        <div i-hugeicons-file-02 class="type-icon" />
         <div class="item-info">
           <span class="text-sm title">{{ data.name }}</span>
           <span v-if="data.path" class="sub-title">{{ data.path }}</span>
-          <span v-else class="sub-title">/{{ data.aliases[0] }}</span>
+          <span v-else-if="data.aliases" class="sub-title">/{{ data.aliases[0] }}</span>
         </div>
       </template>
     </HippieNav>
diff --git a/core/client/src/widgets/layout/ui/sidebar/WorkSpace.vue b/core/client/src/widgets/layout/ui/sidebar/WorkSpace.vue
index 40cc3e7f..672a4f52 100644
--- a/core/client/src/widgets/layout/ui/sidebar/WorkSpace.vue
+++ b/core/client/src/widgets/layout/ui/sidebar/WorkSpace.vue
@@ -2,7 +2,7 @@
 import type { Link } from '../../model'
 import { RouteNames } from '@/shared/config/consts'
 import { UiButton } from '@/shared/ui'
-import { useDark } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -12,7 +12,6 @@ const props = defineProps<{
 }>()
 
 const route = useRoute()
-const isDark = useDark()
 
 function isCurrentPath(link: Link) {
   if (route.name?.toString().startsWith(RouteNames.members)) {
@@ -34,18 +33,10 @@ const pathName = computed(() => {
 const contentPosition = computed(() => {
   return props.isExpanded ? 'flex-start' : 'center'
 })
-const iconColor = computed(() => {
-  if (isDark.value) {
-    return !props.isExpanded ? 'var(--zinc-200)' : 'var(--zinc-300)'
-  }
-  else {
-    return !props.isExpanded ? 'var(--zinc-800)' : 'var(--zinc-600)'
-  }
-})
 </script>
 
 <template>
-  <div :class="$style.sidebar_main_links">
+  <div class="flex flex-col gap-5px justify-start mb-30px">
     <RouterLink
       v-for="link in pathName"
       :key="link.id"
@@ -55,88 +46,17 @@ const iconColor = computed(() => {
         disabled: isExpanded,
       }"
       :to="{ name: link.pathName }"
-      :class="$style.link"
+      class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"
     >
       <UiButton
         :variant="link.isActive ? 'secondary' : 'ghost'"
-        :class="$style.link_btn"
+        class="w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease"
+        :class="link.isActive ? '!bg-neutral-200/40 dark:!bg-neutral-700/50' : ''"
         :style="{ padding: !isExpanded ? '0px' : '', justifyContent: contentPosition }"
       >
-        <component :is="link.icon" :class="$style.icon" :color="iconColor" />
-        <span v-show="isExpanded" class="text-sm">{{ $t(`sidebar.${link.name}`) }}</span>
+        <Icon :icon="link.icon" class="text-17px text-neutral-900 dark:text-neutral-200" />
+        <span v-show="isExpanded" class="text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ $t(`sidebar.${link.name}`) }}</span>
       </UiButton>
     </RouterLink>
   </div>
 </template>
-
-<style module lang="scss">
-@use '@/app/styles/mixins' as *;
-
-.name_block {
-  color: var(--zinc-300);
-  margin-bottom: 12px;
-  text-transform: uppercase;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.sidebar_main_links {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  justify-content: flex-start;
-  margin-bottom: 30px;
-
-  .link {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    color: var(--zinc-900);
-    justify-content: flex-start;
-    width: 100%;
-
-    .link_btn {
-      width: 100%;
-      gap: 8px;
-      box-shadow: none;
-      padding: 0 8px;
-      transition: all 0.2s ease;
-      &:hover {
-        background-color: rgba(var(--zinc-rgb-200), 0.3);
-      }
-      &:focus {
-        background-color: rgba(231, 231, 231, 0.6);
-      }
-
-      .icon {
-        font-size: 17px;
-      }
-    }
-
-    & span {
-      font-weight: 500 !important;
-      color: var(--zinc-900);
-    }
-  }
-}
-
-:global(html.dark) {
-  .sidebar_main_links {
-    .link {
-      .link_btn {
-        & span {
-          color: var(--zinc-100);
-        }
-        &:hover {
-          background-color: rgba(var(--zinc-rgb-600), 0.3);
-        }
-        &:focus {
-          background-color: rgba(var(--zinc-rgb-600), 0.5);
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/layout/ui/sidebar/WorkSpaceChooser.vue b/core/client/src/widgets/layout/ui/sidebar/WorkSpaceChooser.vue
index 9f774349..6e6192be 100644
--- a/core/client/src/widgets/layout/ui/sidebar/WorkSpaceChooser.vue
+++ b/core/client/src/widgets/layout/ui/sidebar/WorkSpaceChooser.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { ArrowExpanded, PaneArrow } from '@/shared/assets/icons'
 import { useExpanded } from '@/shared/lib/composables'
-import { ChevronDown } from 'lucide-vue-next'
 
 const expandedComposable = useExpanded()
 
@@ -9,83 +7,44 @@ const { isExpanded, onToggleArea } = expandedComposable.getExpanded()
 </script>
 
 <template>
-  <div :class="$style.container" :style="{ padding: isExpanded ? '12px 14px 10px 14px' : '14px 0 21px 0' }">
-    <div :class="$style.chooser" :style="{ justifyContent: isExpanded ? 'space-between' : 'center' }">
-      <div v-show="isExpanded" :class="$style.name_wrapper">
-        <img :class="$style.logo" src="/icons/kanban.png" />
-        <img :class="$style.logo_dark" src="/icons/kanban-dark.png" />
-        <p :class="$style.name">
+  <div
+    class="w-full flex items-center"
+    :class="[isExpanded ? ' h-48px px-14px py-10px border-b border-b-solid border-layout' : 'pt-14px pb-21px']"
+  >
+    <div
+      class="w-full flex items-center"
+      :style="{ justifyContent: isExpanded ? 'space-between' : 'center' }"
+    >
+      <div
+        v-show="isExpanded"
+        class="flex items-center gap-px"
+      >
+        <div
+          class="w-30px h-30px bg-neutral-100 border border-solid border-neutral-200 rounded-lg flex items-center
+          justify-center mr-1.5 cursor-pointer"
+        >
+          <img src="https://avatars.githubusercontent.com/u/185750893?s=100&v=4" class="object-cover w-full rounded-lg" />
+        </div>
+        <p class="text-lg !fw600 dark:text-neutral-100">
           Example.io
         </p>
-        <ChevronDown :size="16" :class="$style.icon" />
+        <div
+          i-lucide-chevron-down
+          class="cursor-pointer text-sm text-neutral-600 ml-1px dark:text-neutral-400"
+        />
       </div>
-      <PaneArrow v-if="isExpanded" :class="$style.icon" @click="onToggleArea" />
-      <ArrowExpanded v-else :class="$style.icon_arrow" @click="onToggleArea" />
+      <div
+        v-if="isExpanded"
+        i-hugeicons-sidebar-left-01
+        class="cursor-pointer text-xl text-neutral-700 dark:text-neutral-300"
+        @click="onToggleArea"
+      />
+      <div
+        v-else
+        i-hugeicons-sidebar-right-01
+        class="cursor-pointer text-xl text-neutral-800 dark:text-neutral-200"
+        @click="onToggleArea"
+      />
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  .chooser {
-    display: flex;
-    align-items: center;
-    color: var(--sidebar-section-color);
-
-    .name_wrapper {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-
-      .logo,
-      .logo_dark {
-        width: 24px;
-        height: 24px;
-        border-radius: 5px;
-        margin-right: 6px;
-      }
-      .logo_dark {
-        display: none;
-      }
-
-      .name {
-        color: var(--sidebar-text-color);
-        font-size: 18px;
-        font-weight: 600;
-      }
-    }
-
-    .icon {
-      cursor: pointer;
-      font-size: 20px;
-      color: var(--zinc-400);
-    }
-    .icon_arrow {
-      cursor: pointer;
-      font-size: 20px;
-      color: var(--sidebar-text-color);
-    }
-  }
-}
-
-:global(html.dark) {
-  .container {
-    .chooser {
-      .name_wrapper {
-        .logo_dark {
-          display: flex;
-        }
-        .logo {
-          display: none;
-        }
-      }
-      .icon {
-        color: var(--zinc-300);
-      }
-      .icon_arrow {
-        color: var(--zinc-200);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts b/core/client/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts
index fd381d31..52ed6a00 100644
--- a/core/client/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts
+++ b/core/client/src/widgets/layout/ui/sidebar/__tests__/WorkSpace.spec.ts
@@ -1,9 +1,7 @@
 import { RouteNames } from '@/shared/config/consts'
 import i18n from '@/shared/lib/i18n'
 import { mount, RouterLinkStub } from '@vue/test-utils'
-import { SquareDashedKanban } from 'lucide-vue-next'
 import { describe, expect, it, vi } from 'vitest'
-import { h } from 'vue'
 import { useRoute } from 'vue-router'
 import WorkSpace from '../WorkSpace.vue'
 import '@/shared/lib/vitest-utils/cookiesI18n-mock'
@@ -41,7 +39,7 @@ describe('tests for WorkSpace.vue', () => {
           id: 0,
           name: 'boards',
           pathName: RouteNames.boards,
-          icon: h(SquareDashedKanban),
+          icon: 'i-hugeicons-trello',
         },
       ],
     },
diff --git a/core/client/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap b/core/client/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap
index 85563fb7..d781c3dd 100644
--- a/core/client/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap
+++ b/core/client/src/widgets/layout/ui/sidebar/__tests__/__snapshots__/WorkSpace.spec.ts.snap
@@ -1,23 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for WorkSpace.vue > should be render correctly 1`] = `
-"<div class="sidebar_main_links"><a class="link"><button class="text-sm button secondary md link_btn" style="justify-content: flex-start;">
-      <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--zinc-600)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-dashed-kanban-icon icon">
-        <path d="M8 7v7"></path>
-        <path d="M12 7v4"></path>
-        <path d="M16 7v9"></path>
-        <path d="M5 3a2 2 0 0 0-2 2"></path>
-        <path d="M9 3h1"></path>
-        <path d="M14 3h1"></path>
-        <path d="M19 3a2 2 0 0 1 2 2"></path>
-        <path d="M21 9v1"></path>
-        <path d="M21 14v1"></path>
-        <path d="M21 19a2 2 0 0 1-2 2"></path>
-        <path d="M14 21h1"></path>
-        <path d="M9 21h1"></path>
-        <path d="M5 21a2 2 0 0 1-2-2"></path>
-        <path d="M3 14v1"></path>
-        <path d="M3 9v1"></path>
-      </svg><span class="text-sm">Boards</span>
+"<div class="flex flex-col gap-5px justify-start mb-30px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-34px w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: flex-start;">
+      <!--v-if--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="text-17px text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-sm !fw500 text-neutral-900 dark:text-neutral-100">Boards</span>
     </button></a></div>"
 `;
diff --git a/core/client/src/widgets/members/index.ts b/core/client/src/widgets/members/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/widgets/members/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/widgets/members/ui/MainWrapper.vue b/core/client/src/widgets/members/ui/MainWrapper.vue
deleted file mode 100644
index 8a6bf9ae..00000000
--- a/core/client/src/widgets/members/ui/MainWrapper.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { LeaveButton } from '@/features/members/leave-team'
-import { RouteNames } from '@/shared/config/consts'
-import { UiButton } from '@/shared/ui'
-import { markRaw } from 'vue'
-
-const links = markRaw([
-  { id: '0', title: 'All participants', pathName: `${RouteNames.members}.all`, i18nKey: 'all.btn' },
-  { id: '1', title: 'Guests', pathName: `${RouteNames.members}.guests`, i18nKey: 'guests.btn' },
-])
-</script>
-
-<template>
-  <div :class="$style.container">
-    <div :class="$style.links">
-      <RouterLink v-for="link in links" :key="link.id" :to="{ name: link.pathName }" style="width: 100%">
-        <UiButton
-          :variant="$route.name === link.pathName ? 'outline' : 'ghost'"
-          :class="{ [$style.ghost_exception]: $route.name !== link.pathName }"
-        >
-          <span class="text-sm">{{ $t(`members.content.${link.i18nKey}`) }}</span>
-        </UiButton>
-      </RouterLink>
-    </div>
-    <div>
-      <slot />
-      <div :class="$style.btns_section">
-        <LeaveButton />
-        <UiButton variant="outline" @click="$router.push({ name: RouteNames.boards })">
-          {{ $t('members.btns.view') }} (3)
-        </UiButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style module lang="scss">
-.container {
-  display: flex;
-  align-items: flex-start;
-  gap: 30px;
-
-  .links {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    flex-direction: column;
-    width: 180px;
-
-    & button {
-      width: 100%;
-      justify-content: flex-start;
-    }
-    .ghost_exception {
-      border: 1px solid transparent !important;
-    }
-  }
-
-  .btns_section {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-    margin-top: 50px;
-  }
-}
-</style>
diff --git a/core/client/src/widgets/members/ui/MembersList.vue b/core/client/src/widgets/members/ui/MembersList.vue
deleted file mode 100644
index c295ab5d..00000000
--- a/core/client/src/widgets/members/ui/MembersList.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import type { User } from '@/entities/user/model'
-import { UserAvatar } from '@/entities/user'
-import { UiBadge } from '@/shared/ui'
-
-defineProps<{
-  members: User[]
-}>()
-</script>
-
-<template>
-  <ul :class="$style.list">
-    <li v-for="member in members" :key="member._id">
-      <div :class="$style.info">
-        <UserAvatar>
-          <img :src="member.photoUrl" alt="member" loading="lazy" />
-        </UserAvatar>
-        <p class="text-sm">
-          {{ member.email }}
-        </p>
-      </div>
-      <UiBadge variant="secondary">
-        {{ $t(`members.role.${member.role}`) }}
-      </UiBadge>
-    </li>
-  </ul>
-</template>
-
-<style module lang="scss">
-.list {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  width: 400px;
-
-  .info {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  & li {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 4px;
-  }
-
-  & img {
-    width: 100%;
-  }
-}
-</style>
diff --git a/core/client/src/widgets/members/ui/__tests__/MembersList.spec.ts b/core/client/src/widgets/members/ui/__tests__/MembersList.spec.ts
deleted file mode 100644
index fa01dce3..00000000
--- a/core/client/src/widgets/members/ui/__tests__/MembersList.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { UserAvatar } from '@/entities/user'
-import { UiBadge } from '@/shared/ui'
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import MembersList from '../MembersList.vue'
-
-describe('tests for MembersList.vue', () => {
-  const wrapper = shallowMount(MembersList, {
-    props: {
-      members: [
-        {
-          _id: '1',
-          email: 'test@gmail.com',
-        },
-      ],
-    },
-  })
-
-  it('should be render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render subcomponents', () => {
-    expect(wrapper.findComponent(UiBadge).exists()).toBe(true)
-    expect(wrapper.findComponent(UserAvatar).exists()).toBe(true)
-  })
-})
diff --git a/core/client/src/widgets/members/ui/__tests__/__snapshots__/MembersList.spec.ts.snap b/core/client/src/widgets/members/ui/__tests__/__snapshots__/MembersList.spec.ts.snap
deleted file mode 100644
index 9135304c..00000000
--- a/core/client/src/widgets/members/ui/__tests__/__snapshots__/MembersList.spec.ts.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for MembersList.vue > it should be render correctly 1`] = `
-"<ul class="list">
-  <li>
-    <div class="info">
-      <anonymous-stub></anonymous-stub>
-      <p class="text-sm">test@gmail.com</p>
-    </div>
-    <ui-badge-stub variant="secondary"></ui-badge-stub>
-  </li>
-</ul>"
-`;
-
-exports[`tests for MembersList.vue > should be render correctly 1`] = `
-"<ul class="list">
-  <li>
-    <div class="info">
-      <anonymous-stub></anonymous-stub>
-      <p class="text-sm">test@gmail.com</p>
-    </div>
-    <ui-badge-stub variant="secondary"></ui-badge-stub>
-  </li>
-</ul>"
-`;
diff --git a/core/client/src/widgets/members/ui/index.ts b/core/client/src/widgets/members/ui/index.ts
deleted file mode 100644
index b69e2beb..00000000
--- a/core/client/src/widgets/members/ui/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import MainWrapper from './MainWrapper.vue'
-import MembersList from './MembersList.vue'
-
-export { MainWrapper, MembersList }
diff --git a/core/client/src/widgets/settings/index.ts b/core/client/src/widgets/settings/index.ts
deleted file mode 100644
index ed584959..00000000
--- a/core/client/src/widgets/settings/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ui'
diff --git a/core/client/src/widgets/settings/ui/SettingsElements.vue b/core/client/src/widgets/settings/ui/SettingsElements.vue
deleted file mode 100644
index e72954fa..00000000
--- a/core/client/src/widgets/settings/ui/SettingsElements.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import { LanguageSwitcher, ThemeSwitcher } from '@/features/settings'
-</script>
-
-<template>
-  <div :class="$style.lang">
-    <p class="text-sm" style="font-weight: 500">
-      {{ $t('settings.lang.label') }}
-    </p>
-    <LanguageSwitcher />
-    <span class="text-xs"> {{ $t('settings.lang.about') }} </span>
-  </div>
-  <div :class="$style.theme">
-    <div :class="$style.text">
-      <p class="text-sm" style="font-weight: 500">
-        {{ $t('settings.theme.label') }}
-      </p>
-      <span class="text-xs">{{ $t('settings.theme.about') }}</span>
-    </div>
-    <ThemeSwitcher />
-  </div>
-</template>
-
-<style module lang="scss">
-.lang {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 40px;
-  align-items: flex-start;
-
-  & > p {
-    color: var(--zinc-950);
-  }
-
-  & > span {
-    color: var(--zinc-500);
-  }
-}
-
-.theme {
-  .text {
-    margin-bottom: 12px;
-
-    & p {
-      color: var(--zinc-950);
-    }
-
-    & span {
-      color: var(--zinc-500);
-    }
-  }
-}
-
-:global(html.dark) {
-  .lang {
-    & > p {
-      color: var(--zinc-200);
-    }
-    & > span {
-      color: var(--zinc-300);
-    }
-  }
-  .theme {
-    .text {
-      & p {
-        color: var(--zinc-200);
-      }
-      & span {
-        color: var(--zinc-300);
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/settings/ui/__tests__/SettingsElements.spec.ts b/core/client/src/widgets/settings/ui/__tests__/SettingsElements.spec.ts
deleted file mode 100644
index 97bf8559..00000000
--- a/core/client/src/widgets/settings/ui/__tests__/SettingsElements.spec.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { LanguageSwitcher, ThemeSwitcher } from '@/features/settings'
-import i18n from '@/shared/lib/i18n'
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
-import SettingsElements from '../SettingsElements.vue'
-import '@/shared/lib/vitest-utils/cookiesI18n-mock'
-
-describe('tests for SettingsElements.vue', () => {
-  const wrapper = shallowMount(SettingsElements, {
-    global: {
-      plugins: [i18n],
-    },
-  })
-
-  it('should be render correctly', () => {
-    expect(wrapper.html()).toMatchSnapshot()
-  })
-
-  it('should render subcomponents', () => {
-    expect(wrapper.findComponent(LanguageSwitcher).exists()).toBe(true)
-    expect(wrapper.findComponent(ThemeSwitcher).exists()).toBe(true)
-  })
-
-  it('should has correctly localization', () => {
-    const textLang = wrapper.find('.lang p')
-    expect(textLang.text()).toContain('Language')
-
-    const textTheme = wrapper.find('.theme p')
-    expect(textTheme.text()).toContain('Theme')
-  })
-})
diff --git a/core/client/src/widgets/settings/ui/__tests__/__snapshots__/SettingsElements.spec.ts.snap b/core/client/src/widgets/settings/ui/__tests__/__snapshots__/SettingsElements.spec.ts.snap
deleted file mode 100644
index 400e04a0..00000000
--- a/core/client/src/widgets/settings/ui/__tests__/__snapshots__/SettingsElements.spec.ts.snap
+++ /dev/null
@@ -1,14 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`tests for SettingsElements.vue > should be render correctly 1`] = `
-"<div class="lang">
-  <p class="text-sm" style="font-weight: 500;">Language</p>
-  <language-switcher-stub></language-switcher-stub><span class="text-xs">This is the language that will be used in the dashboard.</span>
-</div>
-<div class="theme">
-  <div class="text">
-    <p class="text-sm" style="font-weight: 500;">Theme</p><span class="text-xs">Select the theme for the dashboard.</span>
-  </div>
-  <theme-switcher-stub></theme-switcher-stub>
-</div>"
-`;
diff --git a/core/client/src/widgets/settings/ui/index.ts b/core/client/src/widgets/settings/ui/index.ts
deleted file mode 100644
index 4ca6a97b..00000000
--- a/core/client/src/widgets/settings/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import SettingsElements from './SettingsElements.vue'
-
-export { SettingsElements }
diff --git a/core/client/src/widgets/templates/ui/AllTemplates.vue b/core/client/src/widgets/templates/ui/AllTemplates.vue
index 219c7c12..62ac6fe4 100644
--- a/core/client/src/widgets/templates/ui/AllTemplates.vue
+++ b/core/client/src/widgets/templates/ui/AllTemplates.vue
@@ -32,16 +32,7 @@ const gridVariant = computed(() =>
 </script>
 
 <template>
-  <div :class="$style.container">
+  <div class="grid gap-15px w-full" :style="{ gridTemplateColumns: gridVariant }">
     <TemplateItem v-for="template in templates" :key="template.id" :template="template" />
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  display: grid;
-  grid-template-columns: v-bind('gridVariant');
-  gap: 15px;
-  width: 100%;
-}
-</style>
diff --git a/core/client/src/widgets/welcome/ui/MarketingCards.vue b/core/client/src/widgets/welcome/ui/MarketingCards.vue
index 652018e9..468ef756 100644
--- a/core/client/src/widgets/welcome/ui/MarketingCards.vue
+++ b/core/client/src/widgets/welcome/ui/MarketingCards.vue
@@ -2,7 +2,6 @@
 import type { MarketingCard } from '../model'
 import { UiCard } from '@/shared/ui'
 import { useDark, useWindowSize } from '@vueuse/core'
-import { Package } from 'lucide-vue-next'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useCards } from '../model/composables'
@@ -70,24 +69,31 @@ const getMaxWidth = computed(() => {
     return width.value < 1220 ? card.maxWidth : ''
   }
 })
-
 const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
 </script>
 
 <template>
-  <div :class="$style.wrapper">
-    <div :class="$style.heading">
-      <Package v-show="width > 520" :size="iconSize" :class="$style.icon" />
-      <h2 class="heading-2">
+  <div class="w-full flex flex-col gap-10 mb-110px max-[520px]:mb-80px max-[680px]:gap-6">
+    <div class="flex items-center gap-5 max-[768px]:justify-center">
+      <span
+        v-show="width > 520"
+        i-hugeicons-atom-01
+        :style="{ fontSize: `${iconSize}px` }"
+        class="text-neutral-700 dark:text-neutral-400"
+      />
+      <h2
+        class="text-38px font-semibold dark:text-neutral-100
+        max-[1152px]:text-34px max-[1100px]:!text-32px max-[520px]:(text-center !text-28px)"
+      >
         {{ t('welcome.marketing.heading') }}
       </h2>
     </div>
-    <section>
-      <div :class="$style.combinedCard">
+    <section class="flex px-7 gap-5 max-[680px]:(flex-col) max-[520px]:p-0">
+      <div class="combined-card">
         <UiCard
           v-for="card in cards.slice(0, 2)"
           :key="card.id"
-          :class="$style.card"
+          class="card"
           :style="{
             paddingRight: card.id === 1 && '40px',
             backgroundColor: getCurrentColor(card.id),
@@ -96,21 +102,26 @@ const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
           }"
         >
           <div>
-            <h3 class="heading-3">
+            <h3 class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">
               {{ card.title }}
             </h3>
-            <p class="text-base">
+            <p class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">
               {{ card.description }}
             </p>
           </div>
-          <img :src="card.url" :style="{ ...getImageAttributes(card), maxWidth: getMaxWidth(card) }" />
+          <img
+            :src="card.url"
+            :style="{ ...getImageAttributes(card), maxWidth: getMaxWidth(card) }"
+            class="absolute rounded-lg max-w-unset
+            max-[1220px]:(static h-unset !w-full mb--5px self-end justify-self-end) max-[680px]:!max-w-300px"
+          />
         </UiCard>
       </div>
-      <div :class="$style.combinedCard">
+      <div class="combined-card">
         <UiCard
           v-for="card in cards.slice(2, 4)"
           :key="card.id"
-          :class="$style.card"
+          class="card"
           :style="{
             backgroundColor: getCurrentColor(card.id),
             maxWidth: currentWidth(card.width),
@@ -118,214 +129,57 @@ const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
           }"
         >
           <div>
-            <h3 class="heading-3">
+            <h3 class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">
               {{ card.title }}
             </h3>
-            <p class="text-base">
+            <p class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">
               {{ card.description }}
             </p>
           </div>
-          <img :src="card.url" :style="{ ...getImageAttributes(card), maxWidth: getMaxWidth(card) }" />
+          <img
+            :src="card.url"
+            :style="{ ...getImageAttributes(card), maxWidth: getMaxWidth(card) }"
+            class="absolute rounded-lg max-w-unset
+            max-[1220px]:(static h-unset !w-full mb--5px self-end justify-self-end) max-[680px]:!max-w-300px"
+          />
         </UiCard>
       </div>
-      <div v-if="width >= 1220 && cards.length >= 5" :class="$style.combinedCard">
+      <div v-if="width >= 1220 && cards.length >= 5" class="combined-card">
         <UiCard
           :key="cards[4].id"
-          :class="[$style.card, $style.flexGrowCard]"
+          class="card"
           :style="{
             backgroundColor: getCurrentColor(cards[4].id),
             maxWidth: currentWidth(cards[4].width),
           }"
         >
           <div>
-            <h3 class="heading-3">
+            <h3 class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">
               {{ cards[4].title }}
             </h3>
-            <p class="text-base">
+            <p class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">
               {{ cards[4].description }}
             </p>
           </div>
-          <img :src="cards[4].url" :style="getImageAttributes(cards[4])" />
+          <img
+            :src="cards[4].url"
+            :style="getImageAttributes(cards[4])"
+            class="absolute rounded-lg max-w-unset
+            max-[1220px]:(static h-unset !w-full mb--5px self-end justify-self-end) max-[680px]:!max-w-300px"
+          />
         </UiCard>
       </div>
     </section>
   </div>
 </template>
 
-<style module lang="scss">
-.wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  margin-bottom: 110px;
-
-  .heading {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-
-    & > h2 {
-      font-size: 40px;
-    }
-
-    .icon {
-      color: var(--zinc-600);
-    }
-  }
-
-  & > section {
-    display: flex;
-    padding: 0 30px;
-  }
-}
-
-.combinedCard {
-  gap: 20px;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-
-  &:not(:last-child) {
-    margin-right: 20px;
-  }
+<style scoped>
+.combined-card {
+  @apply flex flex-col gap-5 grow max-[680px]:!mr-0
 }
 
 .card {
-  padding: 20px;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  flex-grow: 1;
-
-  & h3 {
-    margin-bottom: 8px;
-  }
-
-  & p {
-    color: var(--zinc-500);
-  }
-
-  & > img {
-    position: absolute;
-    border-radius: 8px;
-  }
-}
-
-:global(html.dark) {
-  .wrapper {
-    .heading {
-      & > h2 {
-        color: var(--zinc-100);
-      }
-      .icon {
-        color: var(--zinc-400);
-      }
-    }
-  }
-  .card {
-    & h3 {
-      color: var(--zinc-100);
-    }
-    & p {
-      color: var(--zinc-200);
-    }
-  }
-}
-
-@media screen and (max-width: 1220px) {
-  .wrapper {
-    .heading {
-      & > h2 {
-        font-size: 38px;
-      }
-    }
-  }
-  .card {
-    padding: 20px 0 0 20px;
-    justify-content: space-between;
-    & p {
-      margin-right: 20px;
-    }
-    & > img {
-      position: static;
-      height: unset;
-      width: 100% !important;
-      margin-bottom: -5px;
-      align-self: flex-end;
-      justify-self: end;
-    }
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .wrapper {
-    .heading {
-      & > h2 {
-        font-size: 34px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1100px) {
-  .wrapper {
-    .heading {
-      & > h2 {
-        font-size: 32px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .wrapper {
-    .heading {
-      justify-content: center;
-    }
-  }
-}
-
-@media screen and (max-width: 680px) {
-  .wrapper {
-    & > section {
-      flex-direction: column;
-      gap: 20px;
-    }
-  }
-  .combinedCard {
-    margin-right: 0 !important;
-  }
-  .card {
-    & p {
-      margin-bottom: 20px;
-    }
-    max-width: 100% !important;
-    height: 100% !important;
-
-    & > img {
-      max-width: 300px !important;
-    }
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .wrapper {
-    margin-bottom: 80px;
-
-    .heading {
-      & h2 {
-        font-size: 28px;
-        text-align: center;
-      }
-    }
-
-    & > section {
-      padding: 0;
-    }
-  }
+  @apply p-5 shadow-sm relative overflow-hidden flex flex-col w-full grow
+  max-[1220px]:(pt-5 pl-5 pr-0 pb-0 justify-between) max-[680px]:(!max-w-full !h-full gap-6)
 }
 </style>
diff --git a/core/client/src/widgets/welcome/ui/MarqueeList.vue b/core/client/src/widgets/welcome/ui/MarqueeList.vue
index 30b46439..1db99f74 100644
--- a/core/client/src/widgets/welcome/ui/MarqueeList.vue
+++ b/core/client/src/widgets/welcome/ui/MarqueeList.vue
@@ -1,45 +1,15 @@
 <template>
-  <div :class="$style.container">
+  <div class="w-full h-60px mt-80px mx-0 mb-150px max-[890px]:my-80px max-[520px]:!my-60px">
     <Vue3Marquee>
-      <div v-for="(s, index) in $tm('welcome.marquee')" :key="index" :class="$style.items">
-        <p class="text-lg" :class="$style.tag">
+      <div
+        v-for="(s, index) in $tm('welcome.marquee')"
+        :key="index"
+        class="flex items-center mr-68px"
+      >
+        <p class="text-lg dark:text-neutral-100">
           {{ s }}
         </p>
       </div>
     </Vue3Marquee>
   </div>
 </template>
-
-<style module lang="scss">
-.container {
-  margin: 80px 0 150px 0;
-  width: 100%;
-  height: 60px;
-
-  .items {
-    display: flex;
-    align-items: center;
-    margin-right: 60px;
-  }
-}
-
-:global(html.dark) {
-  .container {
-    .tag {
-      color: var(--zinc-100) !important;
-    }
-  }
-}
-
-@media screen and (max-width: 890px) {
-  .container {
-    margin: 80px 0;
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .container {
-    margin: 60px 0;
-  }
-}
-</style>
diff --git a/core/client/src/widgets/welcome/ui/ProjectDemo.vue b/core/client/src/widgets/welcome/ui/ProjectDemo.vue
index 4d4512a6..5247af27 100644
--- a/core/client/src/widgets/welcome/ui/ProjectDemo.vue
+++ b/core/client/src/widgets/welcome/ui/ProjectDemo.vue
@@ -3,88 +3,31 @@ import { ProjectGrid } from '@/shared/assets/icons'
 </script>
 
 <template>
-  <div :class="$style.wrapper">
+  <div class="overflow-hidden relative w-full mt-30px grid grid-cols-1 grid-rows-1 items-center">
     <ProjectGrid />
-    <div :class="$style.img_container">
-      <img decoding="async" src="/dev/dev-dark.png" :class="$style.dark_img" />
-      <img decoding="async" src="/dev/dev.png" :class="$style.light_img" />
+    <div
+      class="relative flex justify-self-center w-full items-center max-w-70% -translate-y-1% img_container rounded-md h-300px
+      max-[890px]:max-w-80% max-[680px]:h-fit max-[520px]:!max-w-96% max-[420px]:!mt-20px"
+    >
+      <img
+        decoding="async"
+        src="/dev/dev-dark.png"
+        class="max-w-full h-auto rounded-md light:hidden"
+      />
+      <img
+        decoding="async"
+        src="/dev/dev.png"
+        class="max-w-full h-auto rounded-md dark:hidden"
+      />
     </div>
   </div>
 </template>
 
-<style lang="scss" module>
-.wrapper {
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  margin-top: 30px;
-  align-items: center;
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-
-  .img_container {
-    position: relative;
-    justify-self: center;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    grid-area: 1 / 1 / 1 / 1;
-    max-width: 70%;
-    transform: translateY(-1%);
-    box-shadow:
-      0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
-    border-radius: 12px;
-    height: 300px;
-
-    & > img {
-      max-width: 100%;
-      height: auto;
-      border-radius: 12px;
-    }
-  }
-}
-
-:global(html.dark) {
-  .light_img{
-    display: none;
-  }
-}
-
-:global(html.light) {
-  .dark_img{
-    display: none;
-  }
-}
-
-@media screen and (max-width: 890px) {
-  .wrapper{
-    .img_container{
-      max-width: 80%;
-    }
-  }
-}
-
-@media screen and (max-width: 680px) {
-  .wrapper{
-    .img_container{
-      height: fit-content;
-    }
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .wrapper{
-    .img_container{
-      max-width: 90%;
-    }
-  }
-}
-
-@media screen and (max-width: 420px) {
-  .wrapper{
-    margin-top: 50px;
-  }
+<style scoped>
+.img_container {
+  grid-area: 1 / 1 / 1 / 1;
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
 }
 </style>
diff --git a/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/AboutSection.spec.ts.snap b/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/AboutSection.spec.ts.snap
index 1cc99e1e..1ed21b14 100644
--- a/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/AboutSection.spec.ts.snap
+++ b/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/AboutSection.spec.ts.snap
@@ -1,15 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for AboutSection.vue > should be render correctly 1`] = `
-"<section id="about" class="container">
-  <div class="badge"><span style="margin-right: 3px;">✨</span><span class="text-sm">Core: Task Boards, Real-Time Tracking</span>
-    <anonymous-stub size="14" class="arrow" style="margin-left: 0px;"></anonymous-stub>
-  </div>
-  <h1>Your path to perfection</h1>
-  <p class="text-lg">Jenda is a cloud-based program for efficient collaborative and individual project and task management.</p>
-  <div class="btns">
-    <ui-button-stub variant="default" size="md" loading="false" disabled="false" loadingplacement="leading"></ui-button-stub>
-    <ui-button-stub variant="outline" size="md" loading="false" disabled="false" loadingplacement="leading" class="btn_git"></ui-button-stub>
+"<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>
+  <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>
   </div>
 </section>"
 `;
diff --git a/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/MarketingCards.spec.ts.snap b/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/MarketingCards.spec.ts.snap
index 9dd625af..6bdc2fb1 100644
--- a/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/MarketingCards.spec.ts.snap
+++ b/core/client/src/widgets/welcome/ui/__tests__/__snapshots__/MarketingCards.spec.ts.snap
@@ -1,46 +1,41 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`tests for MarketingCards.vue > should be render correctly 1`] = `
-"<div class="wrapper">
-  <div class="heading"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package-icon icon">
-      <path d="m7.5 4.27 9 5.15"></path>
-      <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"></path>
-      <path d="m3.3 7 8.7 5 8.7-5"></path>
-      <path d="M12 22V12"></path>
-    </svg>
-    <h2 class="heading-2">All convenience in one place</h2>
+"<div data-v-d8bb58c3="" class="w-full flex flex-col gap-10 mb-110px max-[520px]:mb-80px max-[680px]:gap-6">
+  <div data-v-d8bb58c3="" class="flex items-center gap-5 max-[768px]:justify-center"><span data-v-d8bb58c3="" i-hugeicons-atom-01="" style="font-size: 30px;" class="text-neutral-700 dark:text-neutral-400"></span>
+    <h2 data-v-d8bb58c3="" class="text-38px font-semibold dark:text-neutral-100 max-[1152px]:text-34px max-[1100px]:!text-32px max-[520px]:text-center !max-[520px]:text-28px">All convenience in one place</h2>
   </div>
-  <section>
-    <div class="combinedCard">
-      <div class="text-sm card card" style="background-color: rgb(255, 255, 255); max-width: 640px; height: 280px;">
-        <div>
-          <h3 class="heading-3">Kanban 🧑‍💻</h3>
-          <p class="text-base">Organize and visualize your projects with our intuitive Kanban board. Enhance productivity with ease.</p>
-        </div><img src="/dev/dev-card.png" style="width: 720px; bottom: -260px; right: -360px; max-width: 400px;">
-        <div class="user_container"></div>
+  <section data-v-d8bb58c3="" class="flex px-7 gap-5 max-[680px]:flex-col max-[520px]:p-0">
+    <div data-v-d8bb58c3="" class="combined-card">
+      <div data-v-d8bb58c3="" class="relative flex flex-col p-1.5 rounded-8px shadow-sm border border-solid border-neutral-200 text-sm dark:border-neutral-700 card" style="background-color: rgb(255, 255, 255); max-width: 640px; height: 280px;">
+        <div data-v-d8bb58c3="">
+          <h3 data-v-d8bb58c3="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Kanban 🧑‍💻</h3>
+          <p data-v-d8bb58c3="" class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">Organize and visualize your projects with our intuitive Kanban board. Enhance productivity with ease.</p>
+        </div><img data-v-d8bb58c3="" src="/dev/dev-card.png" style="width: 720px; bottom: -260px; right: -360px; max-width: 400px;" class="absolute rounded-lg max-w-unset max-[1220px]:static max-[1220px]:h-unset !max-[1220px]:w-full max-[1220px]:mb--5px max-[1220px]:self-end max-[1220px]:justify-self-end max-[680px]:!max-w-300px">
+        <div class="absolute bottom-1.5 top-1.5 w-fit"></div>
       </div>
-      <div class="text-sm card card" style="padding-right: 40px; background-color: rgb(255, 255, 255); max-width: 640px; height: 280px;">
-        <div>
-          <h3 class="heading-3">Collaborative 👥</h3>
-          <p class="text-base">Improve your teamwork!</p>
-        </div><img src="/dev/dev-card.png" style="width: 600px; bottom: -160px; right: 20px; max-width: 360px;">
-        <div class="user_container"></div>
+      <div data-v-d8bb58c3="" class="relative flex flex-col p-1.5 rounded-8px shadow-sm border border-solid border-neutral-200 text-sm dark:border-neutral-700 card" style="padding-right: 40px; background-color: rgb(255, 255, 255); max-width: 640px; height: 280px;">
+        <div data-v-d8bb58c3="">
+          <h3 data-v-d8bb58c3="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Collaborative 👥</h3>
+          <p data-v-d8bb58c3="" class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">Improve your teamwork!</p>
+        </div><img data-v-d8bb58c3="" src="/dev/dev-card.png" style="width: 600px; bottom: -160px; right: 20px; max-width: 360px;" class="absolute rounded-lg max-w-unset max-[1220px]:static max-[1220px]:h-unset !max-[1220px]:w-full max-[1220px]:mb--5px max-[1220px]:self-end max-[1220px]:justify-self-end max-[680px]:!max-w-300px">
+        <div class="absolute bottom-1.5 top-1.5 w-fit"></div>
       </div>
     </div>
-    <div class="combinedCard">
-      <div class="text-sm card card" style="background-color: rgb(255, 255, 255); max-width: 500px; height: 460px;">
-        <div>
-          <h3 class="heading-3">Activity 👔</h3>
-          <p class="text-base">Analyze your activity and move forward.</p>
-        </div><img src="/dev/dev-card.png" style="width: 600px; bottom: -230px; right: -290px; max-width: 240px;">
-        <div class="user_container"></div>
+    <div data-v-d8bb58c3="" class="combined-card">
+      <div data-v-d8bb58c3="" class="relative flex flex-col p-1.5 rounded-8px shadow-sm border border-solid border-neutral-200 text-sm dark:border-neutral-700 card" style="background-color: rgb(255, 255, 255); max-width: 500px; height: 460px;">
+        <div data-v-d8bb58c3="">
+          <h3 data-v-d8bb58c3="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Activity 👔</h3>
+          <p data-v-d8bb58c3="" class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">Analyze your activity and move forward.</p>
+        </div><img data-v-d8bb58c3="" src="/dev/dev-card.png" style="width: 600px; bottom: -230px; right: -290px; max-width: 240px;" class="absolute rounded-lg max-w-unset max-[1220px]:static max-[1220px]:h-unset !max-[1220px]:w-full max-[1220px]:mb--5px max-[1220px]:self-end max-[1220px]:justify-self-end max-[680px]:!max-w-300px">
+        <div class="absolute bottom-1.5 top-1.5 w-fit"></div>
       </div>
-      <div class="text-sm card card" style="background-color: rgb(255, 255, 255); max-width: 500px; height: 100%;">
-        <div>
-          <h3 class="heading-3">Chats 💬</h3>
-          <p class="text-base">Communicate, share, discuss. Our convenience for you 😉</p>
-        </div><img src="/dev/dev-card.png" style="width: 700px; bottom: -200px; right: -500px; max-width: 300px;">
-        <div class="user_container"></div>
+      <div data-v-d8bb58c3="" class="relative flex flex-col p-1.5 rounded-8px shadow-sm border border-solid border-neutral-200 text-sm dark:border-neutral-700 card" style="background-color: rgb(255, 255, 255); max-width: 500px; height: 100%;">
+        <div data-v-d8bb58c3="">
+          <h3 data-v-d8bb58c3="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Chats 💬</h3>
+          <p data-v-d8bb58c3="" class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">Communicate, share, discuss. Our convenience for you 😉</p>
+        </div><img data-v-d8bb58c3="" src="/dev/dev-card.png" style="width: 700px; bottom: -200px; right: -500px; max-width: 300px;" class="absolute rounded-lg max-w-unset max-[1220px]:static max-[1220px]:h-unset !max-[1220px]:w-full max-[1220px]:mb--5px max-[1220px]:self-end max-[1220px]:justify-self-end max-[680px]:!max-w-300px">
+        <div class="absolute bottom-1.5 top-1.5 w-fit"></div>
       </div>
     </div>
     <!--v-if-->
diff --git a/core/client/src/widgets/welcome/ui/reviews/ReviewWrapper.vue b/core/client/src/widgets/welcome/ui/reviews/ReviewWrapper.vue
index ca5073ad..ad17ca96 100644
--- a/core/client/src/widgets/welcome/ui/reviews/ReviewWrapper.vue
+++ b/core/client/src/widgets/welcome/ui/reviews/ReviewWrapper.vue
@@ -8,101 +8,22 @@ defineProps<{
 </script>
 
 <template>
-  <div :class="$style.wrapper">
-    <div :class="$style.card">
-      <div :class="$style.about">
+  <div class="flex gap-5 justify-center items-stretch mb-100px max-[520px]:mb-80px">
+    <div class="relative flex flex-col gap-5 p-1.5 max-[768px]:items-center">
+      <div class="relative flex items-center gap-2">
         <UserAvatar style="width: 34px; height: 34px">
           <img style="width: 100%" :src="review?.img" />
         </UserAvatar>
-        <div :class="$style.name">
-          <p class="text-base">
+        <div>
+          <p class="text-base mb-0.5 text-neutral-800 dark:text-neutral-200">
             {{ review?.name }}
           </p>
-          <span class="text-sm">{{ review?.status }}</span>
+          <span class="text-sm mb-0.5 text-neutral-600 dark:text-neutral-400">{{ review?.status }}</span>
         </div>
       </div>
-      <blockquote class="text-base">
+      <blockquote class="text-base text-neutral-600 font-medium dark:text-neutral-200 max-[768px]:text-center">
         {{ `“${review?.comment}”` }}
       </blockquote>
     </div>
   </div>
 </template>
-
-<style module lang="scss">
-.wrapper {
-  display: flex;
-  gap: 20px;
-  justify-content: center;
-  align-items: stretch;
-  margin-bottom: 100px;
-
-  .card {
-    padding: 6px;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-
-    .about {
-      position: relative;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-
-      .name {
-        & > p {
-          margin-bottom: 2px;
-          color: var(--zinc-800);
-        }
-        & > span {
-          margin-bottom: 2px;
-          color: var(--zinc-500);
-        }
-      }
-    }
-
-    blockquote {
-      color: var(--zinc-600);
-      font-weight: 500;
-    }
-  }
-}
-
-:global(html.dark) {
-  .wrapper {
-    .card {
-      .about {
-        .name {
-          & > p {
-            color: var(--zinc-200);
-          }
-          & > span {
-            color: var(--zinc-400);
-          }
-        }
-      }
-      blockquote {
-        color: var(--zinc-200);
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .wrapper{
-    .card{
-      align-items: center;
-
-      blockquote{
-        text-align: center;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .wrapper {
-    margin-bottom: 80px;
-  }
-}
-</style>
diff --git a/core/client/src/widgets/welcome/ui/sections/AboutSection.vue b/core/client/src/widgets/welcome/ui/sections/AboutSection.vue
index 31b33786..03e5ac03 100644
--- a/core/client/src/widgets/welcome/ui/sections/AboutSection.vue
+++ b/core/client/src/widgets/welcome/ui/sections/AboutSection.vue
@@ -3,7 +3,6 @@ import { RouteNames } from '@/shared/config/consts'
 import { redirect } from '@/shared/lib/helpers'
 import { UiButton } from '@/shared/ui'
 import { useDark, useWindowSize } from '@vueuse/core'
-import { ChevronRight } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -11,7 +10,7 @@ const { t } = useI18n()
 const { width } = useWindowSize()
 
 const badge = computed(() =>
-  width.value > 420 ? t('welcome.about.badge') : t('welcome.about.badge_mobile'),
+  width.value > 668 ? t('welcome.about.badge') : t('welcome.about.badge_mobile'),
 )
 
 const isDark = useDark()
@@ -30,160 +29,52 @@ const arrowMargin = computed(() => {
 </script>
 
 <template>
-  <section id="about" :class="$style.container">
+  <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="$style.badge"
+      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"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
       @click="redirect('https://github.com/mnenie/jenda')"
     >
       <span style="margin-right: 3px">✨</span>
       <span class="text-sm">{{ badge }}</span>
-      <ChevronRight :size="14" :class="$style.arrow" :style="{ marginLeft: arrowMargin }" />
+      <span
+        i-hugeicons-arrow-right-01
+        class="ease-in duration-100"
+        :style="{ marginLeft: arrowMargin }"
+      />
     </div>
-    <h1>{{ $t('welcome.about.tagline') }}</h1>
-    <p class="text-lg">
+    <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"
+    >
+      {{ $t('welcome.about.tagline') }}
+    </h1>
+    <p
+      class="text-lg max-w-600px text-center text-neutral-500 dark:text-neutral-400
+      max-[680px]:(max-w-480px text-base)"
+    >
       {{ $t('welcome.about.description') }}
     </p>
-    <div :class="$style.btns">
+    <div class="flex justify-center items-center gap-4 px-0 py-4 btns">
       <UiButton @click="$router.push({ name: RouteNames.registration })">
         {{ $t('welcome.about.btn') }}
       </UiButton>
       <UiButton
         variant="outline"
-        :class="$style.btn_git"
         @click="redirect('https://github.com/mnenie/jenda')"
       >
-        <img :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'" />
+        <img
+          :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'"
+          class="w-4 h-4"
+        />
         GitHub
       </UiButton>
     </div>
   </section>
 </template>
-
-<style module lang="scss">
-.container {
-  display: flex;
-  margin: 0 auto;
-  max-width: 980px;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  padding: 0 16px;
-
-  & > h1 {
-    margin-bottom: 2px;
-    text-align: center;
-    font-size: 76px;
-    font-weight: 600;
-    line-height: 1.25;
-    letter-spacing: -0.05em;
-  }
-
-  & > p {
-    max-width: 600px;
-    text-align: center;
-    color: var(--zinc-500);
-  }
-
-  .badge {
-    background-color: var(--zinc-100);
-    padding: 2px 10px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    cursor: pointer;
-    border-radius: 8px;
-    color: var(--zinc-500);
-
-    .arrow {
-      transition: 0.2s ease-in;
-    }
-  }
-
-  .btns {
-    display: flex;
-    width: 100%;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    padding: 12px 0;
-
-    .btn_git {
-      & > img {
-        width: 16px;
-        height: 16px;
-      }
-    }
-  }
-}
-
-:global(html.dark) {
-  .container {
-    .badge {
-      background-color: var(--zinc-600);
-      color: var(--zinc-300);
-    }
-    & > p {
-      color: var(--zinc-300);
-    }
-  }
-}
-
-@media screen and (max-width: 1220px) {
-  .container {
-    & > h1 {
-      font-size: 68px;
-    }
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .container {
-    & > h1 {
-      font-size: 64px;
-    }
-  }
-}
-
-@media screen and (max-width: 1100px) {
-  .container {
-    & > h1 {
-      font-size: 62px;
-    }
-  }
-}
-
-@media screen and (max-width: 890px) {
-  .container {
-    & > h1 {
-      font-size: 54px;
-    }
-  }
-}
-
-@media screen and (max-width: 680px) {
-  .container {
-    & > h1 {
-      font-size: 44px;
-    }
-    & > p {
-      max-width: 480px;
-    }
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .container {
-    gap: 8px;
-    .badge {
-      margin-bottom: 10px;
-      justify-content: center;
-
-      // & span {
-      //   text-align: center
-      // }
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/welcome/ui/sections/ActivitySection.vue b/core/client/src/widgets/welcome/ui/sections/ActivitySection.vue
index 49d4ff7f..efc5d2bd 100644
--- a/core/client/src/widgets/welcome/ui/sections/ActivitySection.vue
+++ b/core/client/src/widgets/welcome/ui/sections/ActivitySection.vue
@@ -1,157 +1,56 @@
 <script setup lang="ts">
 import { useDark, useWindowSize } from '@vueuse/core'
-import { Activity } from 'lucide-vue-next'
 import { computed } from 'vue'
 
 const isDark = useDark()
 
 const { width } = useWindowSize()
 
-const iconColor = computed(() => (isDark.value ? 'var(--zinc-400)' : 'var(--zinc-600)'))
 const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
 </script>
 
 <template>
-  <div id="activity" :class="$style.activity">
-    <div :class="$style.name">
-      <Activity v-show="width > 768" :size="iconSize" :color="iconColor" />
-      <div>
-        <h2 class="heading-2">
+  <div
+    id="activity"
+    class="flex flex-col gap-8 w-full mb-100px max-[1100px]:items-center max-[520px]:mb-80px"
+  >
+    <div class="flex items-start gap-5 w-full">
+      <span
+        v-show="width > 768"
+        i-hugeicons-chart-evaluation
+        class="mt-2 text-neutral-700 dark:text-neutral-400"
+        :style="{ fontSize: `${iconSize}px` }"
+      />
+      <div class="flex flex-col w-full text-left max-[768px]:text-center">
+        <h2
+          class="text-38px mb-30px font-semibold
+          max-[1152px]:text-34px max-[1100px]:!text-32px max-[520px]:!text-28px dark:text-neutral-100"
+        >
           {{ $t('welcome.activity.heading') }}
         </h2>
-        <p class="text-base">
+        <p
+          class="text-base max-w-90% max-[768px]:max-w-full max-[768px]:text-center dark:text-neutral-200"
+        >
           {{ $t('welcome.activity.about') }}
         </p>
       </div>
     </div>
-    <section>
+    <section
+      class="grid grid-cols-2 gap-5 px-7 items-center justify-between
+      max-[1100px]:grid-cols-1 max-[1100px]:max-w-640px max-[768px]:max-w-500px max-[520px]:max-w-none max-[520px]:px-0"
+    >
       <img
         :src="isDark ? '/dev/dev-card-section-dark.png' : '/dev/dev-card-section.png'"
+        class="w-full h-full"
         loading="lazy"
         decoding="async"
       />
       <img
         :src="isDark ? '/dev/dev-card-section-dark.png' : '/dev/dev-card-section.png'"
+        class="w-full h-full"
         loading="lazy"
         decoding="async"
       />
     </section>
   </div>
 </template>
-
-<style module lang="scss">
-.activity {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-  margin-bottom: 100px;
-
-  .name {
-    display: flex;
-    align-items: start;
-    width: 100%;
-    gap: 20px;
-
-    & > div {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-
-    & .icon {
-      color: var(--zinc-700);
-    }
-
-    & h2 {
-      font-size: 40px;
-      margin-bottom: 30px;
-    }
-
-    & p {
-      max-width: 90%;
-    }
-  }
-
-  & > section {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    padding: 0 30px;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px;
-
-    & img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
-
-@media screen and (max-width: 1220px) {
-  .activity {
-    .name {
-      & h2 {
-        font-size: 38px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .activity {
-    .name {
-      & h2 {
-        font-size: 34px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1100px) {
-  .activity {
-    align-items: center;
-    .name {
-      & h2 {
-        font-size: 32px;
-      }
-    }
-    & > section {
-      grid-template-columns: repeat(1, minmax(0, 1fr));
-      max-width: 640px;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .activity {
-    .name {
-      & h2 {
-        margin-bottom: 25px;
-        text-align: center;
-      }
-      & p {
-        text-align: center;
-        max-width: 100%;
-      }
-    }
-    & > section {
-      max-width: 500px;
-    }
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .activity {
-    .name {
-      & h2 {
-        font-size: 28px;
-      }
-    }
-    & > section {
-      max-width: unset;
-      padding: 0;
-    }
-  }
-}
-</style>
diff --git a/core/client/src/widgets/welcome/ui/sections/ChatsSection.vue b/core/client/src/widgets/welcome/ui/sections/ChatsSection.vue
index 748d7f66..c79c00d3 100644
--- a/core/client/src/widgets/welcome/ui/sections/ChatsSection.vue
+++ b/core/client/src/widgets/welcome/ui/sections/ChatsSection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { MessageCircle } from 'lucide-vue-next'
 import { useSection } from '../../model/composables'
 import { ReviewWrapper } from '../reviews'
 import SectionWrapper from './SectionWrapper.vue'
@@ -13,8 +12,11 @@ const { section } = useSection(
 
 <template>
   <SectionWrapper id="chats" :section direction="reverse">
-    <template #icon="{ size, color }">
-      <MessageCircle :size :color />
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-message-multiple-02
+        :style="{ fontSize: `${size}px` }"
+      />
     </template>
   </SectionWrapper>
   <ReviewWrapper :review="section.review" />
diff --git a/core/client/src/widgets/welcome/ui/sections/CollaborativeSection.vue b/core/client/src/widgets/welcome/ui/sections/CollaborativeSection.vue
index f73f80ef..01751e60 100644
--- a/core/client/src/widgets/welcome/ui/sections/CollaborativeSection.vue
+++ b/core/client/src/widgets/welcome/ui/sections/CollaborativeSection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Earth } from 'lucide-vue-next'
 import { useSection } from '../../model/composables'
 import { ReviewWrapper } from '../reviews'
 import SectionWrapper from './SectionWrapper.vue'
@@ -13,8 +12,11 @@ const { section } = useSection(
 
 <template>
   <SectionWrapper id="collaborative" :section direction="reverse">
-    <template #icon="{ size, color }">
-      <Earth :size :color />
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-earth
+        :style="{ fontSize: `${size}px` }"
+      />
     </template>
   </SectionWrapper>
   <ReviewWrapper :review="section.review" />
diff --git a/core/client/src/widgets/welcome/ui/sections/KanbanSection.vue b/core/client/src/widgets/welcome/ui/sections/KanbanSection.vue
index f6d86304..3f150989 100644
--- a/core/client/src/widgets/welcome/ui/sections/KanbanSection.vue
+++ b/core/client/src/widgets/welcome/ui/sections/KanbanSection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Check } from 'lucide-vue-next'
 import { useSection } from '../../model/composables'
 import { ReviewWrapper } from '../reviews'
 import SectionWrapper from './SectionWrapper.vue'
@@ -13,8 +12,11 @@ const { section } = useSection(
 
 <template>
   <SectionWrapper id="kanban" :section>
-    <template #icon="{ size, color }">
-      <Check :size :color />
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-trello
+        :style="{ fontSize: `${size}px` }"
+      />
     </template>
   </SectionWrapper>
   <ReviewWrapper :review="section.review" />
diff --git a/core/client/src/widgets/welcome/ui/sections/MembersSection.vue b/core/client/src/widgets/welcome/ui/sections/MembersSection.vue
index 07fffce1..f788170f 100644
--- a/core/client/src/widgets/welcome/ui/sections/MembersSection.vue
+++ b/core/client/src/widgets/welcome/ui/sections/MembersSection.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { SmilePlus } from 'lucide-vue-next'
 import { useSection } from '../../model/composables'
 import { ReviewWrapper } from '../reviews'
 import SectionWrapper from './SectionWrapper.vue'
@@ -13,8 +12,11 @@ const { section } = useSection(
 
 <template>
   <SectionWrapper id="members" :section>
-    <template #icon="{ size, color }">
-      <SmilePlus :size :color />
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-agreement-01
+        :style="{ fontSize: `${size}px` }"
+      />
     </template>
   </SectionWrapper>
   <ReviewWrapper :review="section.review" />
diff --git a/core/client/src/widgets/welcome/ui/sections/SectionWrapper.vue b/core/client/src/widgets/welcome/ui/sections/SectionWrapper.vue
index 42c46904..e167ea32 100644
--- a/core/client/src/widgets/welcome/ui/sections/SectionWrapper.vue
+++ b/core/client/src/widgets/welcome/ui/sections/SectionWrapper.vue
@@ -1,207 +1,78 @@
 <script setup lang="ts">
 import type { SectionWrapperType } from '../../model'
-import { useDark, useWindowSize } from '@vueuse/core'
+import { useWindowSize } from '@vueuse/core'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const props = withDefaults(
-  defineProps<{
-    section: SectionWrapperType
-    direction?: 'default' | 'reverse'
-    id: string
-  }>(),
-  {
-    direction: 'default',
-  },
-)
+const { section, direction = 'default', id } = defineProps<{
+  section: SectionWrapperType
+  direction?: 'default' | 'reverse'
+  id: string
+}>()
 
 const { locale } = useI18n()
-const isDark = useDark()
 
 const { width } = useWindowSize()
 
 const writerKey = ref(0)
 
 const sectionDirection = computed(() =>
-  width.value >= 1100 ? (props.direction === 'default' ? 'row' : 'row-reverse') : 'column',
+  width.value >= 1100 ? (direction === 'default' ? 'row' : 'row-reverse') : 'column',
 )
-const iconColor = computed(() => (isDark.value ? 'var(--zinc-400)' : 'var(--zinc-600)'))
 const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
 
-watch([() => props.section.writer, locale], () => {
+watch([() => section.writer, locale], () => {
   writerKey.value++
 })
 </script>
 
 <template>
-  <div :id :class="$style.wrapper">
-    <div :class="$style.name">
-      <div v-show="width > 520">
-        <slot name="icon" :size="iconSize" :color="iconColor" />
+  <div :id class="w-full flex flex-col gap-10 mb-60px max-[768px]:gap-25px">
+    <div class="flex items-center gap-5 max-[768px]:justify-center">
+      <div v-show="width > 520" class="text-neutral-700 dark:text-neutral-400">
+        <slot
+          name="icon"
+          :size="iconSize"
+        />
       </div>
-      <h2 class="heading-2">
+      <h2
+        class="text-38px font-semibold dark:text-neutral-100
+        max-[1152px]:text-34px max-[1100px]:!text-32px max-[520px]:text-center max-[520px]:!text-28px"
+      >
         {{ section.name }}
       </h2>
     </div>
-    <section :style="{ flexDirection: sectionDirection }">
+    <section
+      :style="{ flexDirection: sectionDirection }"
+      class="flex justify-between items-center gap-11 py-0 px-30px max-[768px]:gap-30px max-[520px]:p-0"
+    >
       <slot name="content">
-        <div>
-          <h4 class="heading-4">
+        <div class="max-[1220px]:min-w-390px max-[520px]:min-w-unset">
+          <h4
+            class="text-2xl font-semibold mb-30px dark:text-neutral-100
+            max-[768px]:text-center max-[768px]:mb-20px max-[768px]:text-xl"
+          >
             {{ section.heading }}
           </h4>
-          <p class="text-base">
+          <p
+            class="text-base max-w-696px mb-50px dark:text-neutral-300
+            max-[768px]:text-center max-[768px]:mb-20px max-[768px]:max-w-full"
+          >
             {{ section.about }}
           </p>
-          <VueWriter :key="writerKey" :array="[section.writer]" class="text-sm" :class="[$style.writer]" />
+          <VueWriter
+            :key="writerKey"
+            :array="[section.writer]"
+            class="text-sm text-neutral-400 dark:text-neutral-300 max-[768px]:text-center"
+          />
         </div>
-        <img :src="section.img" loading="lazy" decoding="async" />
+        <img
+          :src="section.img"
+          loading="lazy"
+          decoding="async"
+          class="max-w-600px w-full rounded-lg max-[1220px]:max-w-500px"
+        />
       </slot>
     </section>
   </div>
 </template>
-
-<style module lang="scss">
-.wrapper {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 40px;
-  margin-bottom: 60px;
-
-  .name {
-    display: flex;
-    align-items: center;
-    gap: 20px;
-
-    & > h2 {
-      font-size: 40px;
-    }
-  }
-
-  & > section {
-    display: flex;
-    padding: 0 30px;
-    justify-content: space-between;
-    align-items: center;
-    gap: 46px;
-
-    & h4 {
-      margin-bottom: 30px;
-    }
-    & p {
-      max-width: 696px;
-      margin-bottom: 50px;
-    }
-
-    & img {
-      max-width: 600px;
-      width: 100%;
-      border-radius: 10px;
-    }
-
-    .writer {
-      color: var(--zinc-500);
-    }
-  }
-}
-
-:global(html.dark) {
-  .wrapper {
-    .name {
-      & > h2 {
-        color: var(--zinc-100);
-      }
-    }
-    & > section {
-      & h4 {
-        color: var(--zinc-200);
-      }
-      & p {
-        color: var(--zinc-300);
-      }
-      .writer {
-        color: var(--zinc-200);
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1220px) {
-  .wrapper {
-    .name {
-      & > h2 {
-        font-size: 38px;
-      }
-    }
-    & > section {
-      & div {
-        min-width: 390px;
-      }
-      & img {
-        max-width: 500px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1152px) {
-  .wrapper {
-    .name {
-      & > h2 {
-        font-size: 34px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1100px) {
-  .wrapper {
-    .name {
-      & > h2 {
-        font-size: 32px;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .wrapper {
-    gap: 25px;
-    .name {
-      justify-content: center;
-    }
-    & > section {
-      gap: 30px;
-      & h4 {
-        text-align: center;
-        margin-bottom: 20px;
-      }
-      & p {
-        text-align: center;
-        margin-bottom: 20px;
-      }
-      .writer {
-        text-align: center;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 520px) {
-  .wrapper {
-    .name {
-      & h2 {
-        text-align: center;
-        font-size: 28px;
-      }
-    }
-    & > section {
-      padding: 0;
-
-      & div {
-        min-width: unset;
-      }
-    }
-  }
-}
-</style>
diff --git a/core/client/uno.config.ts b/core/client/uno.config.ts
new file mode 100644
index 00000000..a2a0c690
--- /dev/null
+++ b/core/client/uno.config.ts
@@ -0,0 +1,79 @@
+import fs from 'node:fs/promises'
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import presetAnimations from 'unocss-preset-animations'
+import { presetShadcn } from 'unocss-preset-shadcn'
+import presetJendaUI from './src/shared/lib/unocss/presets/presetUiKit'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAttributify({
+      ignoreAttributes: [
+        'size',
+        'variant',
+      ],
+    }),
+    presetAnimations(),
+    presetShadcn({ color: 'neutral' }, false),
+    presetIcons({
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+      },
+      collections: {
+        'lucid': () => import('@iconify-json/lucide/icons.json').then(i => i.default),
+        'hero': () => import('@iconify-json/hugeicons/icons.json').then(i => i.default),
+        'jenda-custom': {
+          'file-import': () => fs.readFile('./src/shared/assets/icons/custom-jenda/import.svg', 'utf-8'),
+          'project': () => fs.readFile('./src/shared/assets/icons/custom-jenda/project.svg', 'utf-8'),
+        },
+      },
+    }),
+    presetJendaUI(),
+    presetTypography(),
+  ],
+  shortcuts: [
+    {
+      'form-field': 'grid gap-2 justify-items-start',
+      'form-label': 'text-sm text-neutral-900 !fw500 dark:text-neutral-200',
+    },
+    {
+      'bg-main': 'bg-white dark:bg-#262626',
+      'border-layout': 'border-neutral-200 dark:border-#1c1c1c',
+      'bg-sidebar': 'bg-neutral-50 dark:bg-#1c1c1c66',
+    },
+  ],
+  configDeps: [
+    './src/shared/lib/unocss/presets/presetUiKit.ts',
+
+    './src/shared/ui/_shortcuts/button.ts',
+    './src/shared/ui/_shortcuts/badge.ts',
+    './src/shared/ui/_shortcuts/input.ts',
+    './src/shared/ui/_shortcuts/alert.ts',
+    './src/shared/ui/_shortcuts/dropdown-menu.ts',
+    './src/shared/ui/_shortcuts/select.ts',
+    './src/shared/ui/_shortcuts/index.ts',
+  ],
+  content: {
+    pipeline: {
+      include: [
+        /\.(vue|mdx?|html)($|\?)/,
+        '(components|src)/**/*.{js,ts}',
+        'src/**/*.stories.{js,ts}',
+        'stories/**/*',
+      ],
+    },
+  },
+  transformers: [
+    transformerDirectives(),
+    transformerVariantGroup(),
+  ],
+})
diff --git a/core/client/vite.config.ts b/core/client/vite.config.ts
index 5d3d8599..65964b60 100644
--- a/core/client/vite.config.ts
+++ b/core/client/vite.config.ts
@@ -1,13 +1,17 @@
 import { fileURLToPath, URL } from 'node:url'
 
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 import { defineConfig } from 'vite'
 import vueDevTools from 'vite-plugin-vue-devtools'
-import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), vueDevTools(), svgLoader()],
+  plugins: [
+    vue(),
+    vueDevTools(),
+    UnoCSS(),
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url)),
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 93f455a3..7e00d140 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13,7 +13,7 @@ importers:
         version: link:packages/eslint-config
       eslint:
         specifier: 9.14.0
-        version: 9.14.0
+        version: 9.14.0(jiti@1.21.6)
       husky:
         specifier: ^9.1.6
         version: 9.1.7
@@ -32,14 +32,20 @@ importers:
       '@unhead/vue':
         specifier: ^1.9.14
         version: 1.11.13(vue@3.5.13(typescript@5.4.5))
+      '@unocss/core':
+        specifier: 0.65.1
+        version: 0.65.1
+      '@unocss/reset':
+        specifier: 0.65.1
+        version: 0.65.1
       '@vee-validate/zod':
         specifier: ^4.13.1
         version: 4.14.7(vue@3.5.13(typescript@5.4.5))
       '@vitest/eslint-plugin':
         specifier: ^1.1.7
-        version: 1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.4.5))(eslint@9.14.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.17.9)(jsdom@24.1.3)(sass@1.81.0))
+        version: 1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)(vitest@1.6.0(@types/node@20.17.9)(jsdom@24.1.3)(sass@1.81.0))
       '@vueuse/core':
-        specifier: ^10.11.0
+        specifier: ^10.11.1
         version: 10.11.1(vue@3.5.13(typescript@5.4.5))
       '@vueuse/integrations':
         specifier: ^10.10.0
@@ -47,27 +53,36 @@ importers:
       axios:
         specifier: ^1.7.2
         version: 1.7.8
+      class-variance-authority:
+        specifier: 0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: 2.1.1
+        version: 2.1.1
       floating-vue:
         specifier: ^5.2.2
         version: 5.2.2(vue@3.5.13(typescript@5.4.5))
-      lucide-vue-next:
-        specifier: ^0.396.0
-        version: 0.396.0(vue@3.5.13(typescript@5.4.5))
       pinia:
         specifier: ^2.1.7
         version: 2.2.8(typescript@5.4.5)(vue@3.5.13(typescript@5.4.5))
+      radix-vue:
+        specifier: 1.9.11
+        version: 1.9.11(vue@3.5.13(typescript@5.4.5))
       splitpanes:
         specifier: ^3.1.5
         version: 3.1.5
+      tailwind-merge:
+        specifier: 2.5.5
+        version: 2.5.5
       universal-cookie:
         specifier: ^6.1.3
         version: 6.1.3
+      unocss:
+        specifier: 0.65.1
+        version: 0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))
       vee-validate:
         specifier: ^4.13.1
         version: 4.14.7(vue@3.5.13(typescript@5.4.5))
-      vite-svg-loader:
-        specifier: ^5.1.0
-        version: 5.1.0(vue@3.5.13(typescript@5.4.5))
       vue:
         specifier: ^3.5.8
         version: 3.5.13(typescript@5.4.5)
@@ -96,6 +111,15 @@ importers:
         specifier: ^3.23.8
         version: 3.23.8
     devDependencies:
+      '@iconify-json/hugeicons':
+        specifier: 1.2.1
+        version: 1.2.1
+      '@iconify-json/lucide':
+        specifier: 1.2.17
+        version: 1.2.17
+      '@iconify/vue':
+        specifier: 4.1.2
+        version: 4.1.2(vue@3.5.13(typescript@5.4.5))
       '@mnenie/prettier':
         specifier: ^1.0.4
         version: 1.0.4(prettier@3.4.1)
@@ -149,10 +173,10 @@ importers:
         version: 5.2.1(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))
       '@vue/eslint-config-prettier':
         specifier: ^10.0.0
-        version: 10.1.0(eslint@9.14.0)(prettier@3.4.1)
+        version: 10.1.0(eslint@9.14.0(jiti@1.21.6))(prettier@3.4.1)
       '@vue/eslint-config-typescript':
         specifier: ^14.1.1
-        version: 14.1.4(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.4.5))(eslint-plugin-vue@9.32.0(eslint@9.14.0))(eslint@9.14.0)(typescript@5.4.5)
+        version: 14.1.4(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint-plugin-vue@9.32.0(eslint@9.14.0(jiti@1.21.6)))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
@@ -161,19 +185,19 @@ importers:
         version: 0.5.1
       eslint:
         specifier: ^9.13.0
-        version: 9.14.0
+        version: 9.14.0(jiti@1.21.6)
       eslint-define-config:
         specifier: ^2.1.0
         version: 2.1.0
       eslint-plugin-antfu:
         specifier: ^2.7.0
-        version: 2.7.0(eslint@9.14.0)
+        version: 2.7.0(eslint@9.14.0(jiti@1.21.6))
       eslint-plugin-storybook:
         specifier: ^0.10.2
-        version: 0.10.2(eslint@9.14.0)(typescript@5.4.5)
+        version: 0.10.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
       eslint-plugin-vue:
         specifier: ^9.29.0
-        version: 9.32.0(eslint@9.14.0)
+        version: 9.32.0(eslint@9.14.0(jiti@1.21.6))
       husky:
         specifier: ^9.0.11
         version: 9.1.7
@@ -189,9 +213,6 @@ importers:
       prettier:
         specifier: ^3.2.5
         version: 3.4.1
-      sass:
-        specifier: ^1.77.6
-        version: 1.81.0
       storybook:
         specifier: ^8.1.10
         version: 8.4.6(prettier@3.4.1)
@@ -204,6 +225,12 @@ importers:
       typescript:
         specifier: ~5.4.0
         version: 5.4.5
+      unocss-preset-animations:
+        specifier: 1.1.0
+        version: 1.1.0(@unocss/preset-wind@0.65.1)(unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5)))
+      unocss-preset-shadcn:
+        specifier: 0.3.1
+        version: 0.3.1(unocss-preset-animations@1.1.0(@unocss/preset-wind@0.65.1)(unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))))(unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5)))
       vite:
         specifier: ^5.3.1
         version: 5.4.11(@types/node@20.17.9)(sass@1.81.0)
@@ -221,10 +248,10 @@ importers:
     dependencies:
       '@antfu/eslint-config':
         specifier: ^3.11.2
-        version: 3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.14.0)(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))
+        version: 3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))
       eslint:
         specifier: ^9.14.0
-        version: 9.14.0
+        version: 9.14.0(jiti@1.21.6)
 
   scripts:
     devDependencies:
@@ -299,6 +326,9 @@ packages:
       svelte-eslint-parser:
         optional: true
 
+  '@antfu/install-pkg@0.4.1':
+    resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==}
+
   '@antfu/install-pkg@0.5.0':
     resolution: {integrity: sha512-dKnk2xlAyC7rvTkpkHmu+Qy/2Zc3Vm/l8PtNyIOGDBtXPY3kThfU4ORNEp3V7SXw5XSOb+tOJaUYpfquPzL/Tg==}
 
@@ -495,6 +525,12 @@ packages:
     cpu: [ppc64]
     os: [aix]
 
+  '@esbuild/aix-ppc64@0.23.1':
+    resolution: {integrity: sha512-6VhYk1diRqrhBAqpJEdjASR/+WVRtfjpqKuNw11cLiaWpAT/Uu+nokB+UJnevzy/P9C/ty6AOe0dwueMrGh/iQ==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
   '@esbuild/aix-ppc64@0.24.0':
     resolution: {integrity: sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==}
     engines: {node: '>=18'}
@@ -507,6 +543,12 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  '@esbuild/android-arm64@0.23.1':
+    resolution: {integrity: sha512-xw50ipykXcLstLeWH7WRdQuysJqejuAGPd30vd1i5zSyKK3WE+ijzHmLKxdiCMtH1pHz78rOg0BKSYOSB/2Khw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
   '@esbuild/android-arm64@0.24.0':
     resolution: {integrity: sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==}
     engines: {node: '>=18'}
@@ -519,6 +561,12 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@esbuild/android-arm@0.23.1':
+    resolution: {integrity: sha512-uz6/tEy2IFm9RYOyvKl88zdzZfwEfKZmnX9Cj1BHjeSGNuGLuMD1kR8y5bteYmwqKm1tj8m4cb/aKEorr6fHWQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
   '@esbuild/android-arm@0.24.0':
     resolution: {integrity: sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==}
     engines: {node: '>=18'}
@@ -531,6 +579,12 @@ packages:
     cpu: [x64]
     os: [android]
 
+  '@esbuild/android-x64@0.23.1':
+    resolution: {integrity: sha512-nlN9B69St9BwUoB+jkyU090bru8L0NA3yFvAd7k8dNsVH8bi9a8cUAUSEcEEgTp2z3dbEDGJGfP6VUnkQnlReg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
   '@esbuild/android-x64@0.24.0':
     resolution: {integrity: sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==}
     engines: {node: '>=18'}
@@ -543,6 +597,12 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
+  '@esbuild/darwin-arm64@0.23.1':
+    resolution: {integrity: sha512-YsS2e3Wtgnw7Wq53XXBLcV6JhRsEq8hkfg91ESVadIrzr9wO6jJDMZnCQbHm1Guc5t/CdDiFSSfWP58FNuvT3Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
   '@esbuild/darwin-arm64@0.24.0':
     resolution: {integrity: sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==}
     engines: {node: '>=18'}
@@ -555,6 +615,12 @@ packages:
     cpu: [x64]
     os: [darwin]
 
+  '@esbuild/darwin-x64@0.23.1':
+    resolution: {integrity: sha512-aClqdgTDVPSEGgoCS8QDG37Gu8yc9lTHNAQlsztQ6ENetKEO//b8y31MMu2ZaPbn4kVsIABzVLXYLhCGekGDqw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
   '@esbuild/darwin-x64@0.24.0':
     resolution: {integrity: sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==}
     engines: {node: '>=18'}
@@ -567,6 +633,12 @@ packages:
     cpu: [arm64]
     os: [freebsd]
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    resolution: {integrity: sha512-h1k6yS8/pN/NHlMl5+v4XPfikhJulk4G+tKGFIOwURBSFzE8bixw1ebjluLOjfwtLqY0kewfjLSrO6tN2MgIhA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@esbuild/freebsd-arm64@0.24.0':
     resolution: {integrity: sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==}
     engines: {node: '>=18'}
@@ -579,6 +651,12 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
+  '@esbuild/freebsd-x64@0.23.1':
+    resolution: {integrity: sha512-lK1eJeyk1ZX8UklqFd/3A60UuZ/6UVfGT2LuGo3Wp4/z7eRTRYY+0xOu2kpClP+vMTi9wKOfXi2vjUpO1Ro76g==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
   '@esbuild/freebsd-x64@0.24.0':
     resolution: {integrity: sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==}
     engines: {node: '>=18'}
@@ -591,6 +669,12 @@ packages:
     cpu: [arm64]
     os: [linux]
 
+  '@esbuild/linux-arm64@0.23.1':
+    resolution: {integrity: sha512-/93bf2yxencYDnItMYV/v116zff6UyTjo4EtEQjUBeGiVpMmffDNUyD9UN2zV+V3LRV3/on4xdZ26NKzn6754g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
   '@esbuild/linux-arm64@0.24.0':
     resolution: {integrity: sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==}
     engines: {node: '>=18'}
@@ -603,6 +687,12 @@ packages:
     cpu: [arm]
     os: [linux]
 
+  '@esbuild/linux-arm@0.23.1':
+    resolution: {integrity: sha512-CXXkzgn+dXAPs3WBwE+Kvnrf4WECwBdfjfeYHpMeVxWE0EceB6vhWGShs6wi0IYEqMSIzdOF1XjQ/Mkm5d7ZdQ==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
   '@esbuild/linux-arm@0.24.0':
     resolution: {integrity: sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==}
     engines: {node: '>=18'}
@@ -615,6 +705,12 @@ packages:
     cpu: [ia32]
     os: [linux]
 
+  '@esbuild/linux-ia32@0.23.1':
+    resolution: {integrity: sha512-VTN4EuOHwXEkXzX5nTvVY4s7E/Krz7COC8xkftbbKRYAl96vPiUssGkeMELQMOnLOJ8k3BY1+ZY52tttZnHcXQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
   '@esbuild/linux-ia32@0.24.0':
     resolution: {integrity: sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==}
     engines: {node: '>=18'}
@@ -627,6 +723,12 @@ packages:
     cpu: [loong64]
     os: [linux]
 
+  '@esbuild/linux-loong64@0.23.1':
+    resolution: {integrity: sha512-Vx09LzEoBa5zDnieH8LSMRToj7ir/Jeq0Gu6qJ/1GcBq9GkfoEAoXvLiW1U9J1qE/Y/Oyaq33w5p2ZWrNNHNEw==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
   '@esbuild/linux-loong64@0.24.0':
     resolution: {integrity: sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==}
     engines: {node: '>=18'}
@@ -639,6 +741,12 @@ packages:
     cpu: [mips64el]
     os: [linux]
 
+  '@esbuild/linux-mips64el@0.23.1':
+    resolution: {integrity: sha512-nrFzzMQ7W4WRLNUOU5dlWAqa6yVeI0P78WKGUo7lg2HShq/yx+UYkeNSE0SSfSure0SqgnsxPvmAUu/vu0E+3Q==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
   '@esbuild/linux-mips64el@0.24.0':
     resolution: {integrity: sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==}
     engines: {node: '>=18'}
@@ -651,6 +759,12 @@ packages:
     cpu: [ppc64]
     os: [linux]
 
+  '@esbuild/linux-ppc64@0.23.1':
+    resolution: {integrity: sha512-dKN8fgVqd0vUIjxuJI6P/9SSSe/mB9rvA98CSH2sJnlZ/OCZWO1DJvxj8jvKTfYUdGfcq2dDxoKaC6bHuTlgcw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
   '@esbuild/linux-ppc64@0.24.0':
     resolution: {integrity: sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==}
     engines: {node: '>=18'}
@@ -663,6 +777,12 @@ packages:
     cpu: [riscv64]
     os: [linux]
 
+  '@esbuild/linux-riscv64@0.23.1':
+    resolution: {integrity: sha512-5AV4Pzp80fhHL83JM6LoA6pTQVWgB1HovMBsLQ9OZWLDqVY8MVobBXNSmAJi//Csh6tcY7e7Lny2Hg1tElMjIA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
   '@esbuild/linux-riscv64@0.24.0':
     resolution: {integrity: sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==}
     engines: {node: '>=18'}
@@ -675,6 +795,12 @@ packages:
     cpu: [s390x]
     os: [linux]
 
+  '@esbuild/linux-s390x@0.23.1':
+    resolution: {integrity: sha512-9ygs73tuFCe6f6m/Tb+9LtYxWR4c9yg7zjt2cYkjDbDpV/xVn+68cQxMXCjUpYwEkze2RcU/rMnfIXNRFmSoDw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
   '@esbuild/linux-s390x@0.24.0':
     resolution: {integrity: sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==}
     engines: {node: '>=18'}
@@ -687,6 +813,12 @@ packages:
     cpu: [x64]
     os: [linux]
 
+  '@esbuild/linux-x64@0.23.1':
+    resolution: {integrity: sha512-EV6+ovTsEXCPAp58g2dD68LxoP/wK5pRvgy0J/HxPGB009omFPv3Yet0HiaqvrIrgPTBuC6wCH1LTOY91EO5hQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
   '@esbuild/linux-x64@0.24.0':
     resolution: {integrity: sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==}
     engines: {node: '>=18'}
@@ -699,12 +831,24 @@ packages:
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/netbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aevEkCNu7KlPRpYLjwmdcuNz6bDFiE7Z8XC4CPqExjTvrHugh28QzUXVOZtiYghciKUacNktqxdpymplil1beA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
   '@esbuild/netbsd-x64@0.24.0':
     resolution: {integrity: sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==}
     engines: {node: '>=18'}
     cpu: [x64]
     os: [netbsd]
 
+  '@esbuild/openbsd-arm64@0.23.1':
+    resolution: {integrity: sha512-3x37szhLexNA4bXhLrCC/LImN/YtWis6WXr1VESlfVtVeoFJBRINPJ3f0a/6LV8zpikqoUg4hyXw0sFBt5Cr+Q==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
   '@esbuild/openbsd-arm64@0.24.0':
     resolution: {integrity: sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==}
     engines: {node: '>=18'}
@@ -717,6 +861,12 @@ packages:
     cpu: [x64]
     os: [openbsd]
 
+  '@esbuild/openbsd-x64@0.23.1':
+    resolution: {integrity: sha512-aY2gMmKmPhxfU+0EdnN+XNtGbjfQgwZj43k8G3fyrDM/UdZww6xrWxmDkuz2eCZchqVeABjV5BpildOrUbBTqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
   '@esbuild/openbsd-x64@0.24.0':
     resolution: {integrity: sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==}
     engines: {node: '>=18'}
@@ -729,6 +879,12 @@ packages:
     cpu: [x64]
     os: [sunos]
 
+  '@esbuild/sunos-x64@0.23.1':
+    resolution: {integrity: sha512-RBRT2gqEl0IKQABT4XTj78tpk9v7ehp+mazn2HbUeZl1YMdaGAQqhapjGTCe7uw7y0frDi4gS0uHzhvpFuI1sA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
   '@esbuild/sunos-x64@0.24.0':
     resolution: {integrity: sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==}
     engines: {node: '>=18'}
@@ -741,6 +897,12 @@ packages:
     cpu: [arm64]
     os: [win32]
 
+  '@esbuild/win32-arm64@0.23.1':
+    resolution: {integrity: sha512-4O+gPR5rEBe2FpKOVyiJ7wNDPA8nGzDuJ6gN4okSA1gEOYZ67N8JPk58tkWtdtPeLz7lBnY6I5L3jdsr3S+A6A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
   '@esbuild/win32-arm64@0.24.0':
     resolution: {integrity: sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==}
     engines: {node: '>=18'}
@@ -753,6 +915,12 @@ packages:
     cpu: [ia32]
     os: [win32]
 
+  '@esbuild/win32-ia32@0.23.1':
+    resolution: {integrity: sha512-BcaL0Vn6QwCwre3Y717nVHZbAa4UBEigzFm6VdsVdT/MbZ38xoj1X9HPkZhbmaBGUD1W8vxAfffbDe8bA6AKnQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
   '@esbuild/win32-ia32@0.24.0':
     resolution: {integrity: sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==}
     engines: {node: '>=18'}
@@ -765,6 +933,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@esbuild/win32-x64@0.23.1':
+    resolution: {integrity: sha512-BHpFFeslkWrXWyUPnbKm+xYYVYruCinGcftSBaa8zoF9hZO4BcSCFUvHVTtzpIY6YzUnYtuEhZ+C9iEXjxnasg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@esbuild/win32-x64@0.24.0':
     resolution: {integrity: sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==}
     engines: {node: '>=18'}
@@ -830,9 +1004,15 @@ packages:
   '@floating-ui/dom@1.1.1':
     resolution: {integrity: sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==}
 
+  '@floating-ui/dom@1.6.12':
+    resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==}
+
   '@floating-ui/utils@0.2.8':
     resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==}
 
+  '@floating-ui/vue@1.1.5':
+    resolution: {integrity: sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==}
+
   '@formkit/auto-animate@0.8.2':
     resolution: {integrity: sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ==}
 
@@ -856,6 +1036,29 @@ packages:
     resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
     engines: {node: '>=18.18'}
 
+  '@iconify-json/hugeicons@1.2.1':
+    resolution: {integrity: sha512-IedWO3xgMuRdRaolyl8kLOMA01xQ2QhldCKWrqtIxEpalndU7hoh1dUR00ackhWLFDwpKdGQGzuF5/Szaw40CQ==}
+
+  '@iconify-json/lucide@1.2.17':
+    resolution: {integrity: sha512-y+4P1DxD2h4d4fGYxikUdMf0o21DD0GIE/YIgixEBIXKbE90LTOFqmoxkGyPpaGk3vT2qE2w/28+sdmBMFsd5w==}
+
+  '@iconify/types@2.0.0':
+    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
+
+  '@iconify/utils@2.1.33':
+    resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==}
+
+  '@iconify/vue@4.1.2':
+    resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
+    peerDependencies:
+      vue: '>=3'
+
+  '@internationalized/date@3.6.0':
+    resolution: {integrity: sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==}
+
+  '@internationalized/number@3.6.0':
+    resolution: {integrity: sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==}
+
   '@intlify/core-base@9.14.2':
     resolution: {integrity: sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==}
     engines: {node: '>= 16'}
@@ -1319,6 +1522,17 @@ packages:
     peerDependencies:
       eslint: '>=8.40.0'
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
+  '@tanstack/virtual-core@3.10.9':
+    resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
+
+  '@tanstack/vue-virtual@3.11.0':
+    resolution: {integrity: sha512-AxL1wVbAhBk63MFJUaTcOnotF88uHY1bRq88cDTY2kEuXy856zj/d5oqv7C0kzTjUnF/omGjzHcZ5BuYgvjHhQ==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -1333,10 +1547,6 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
-  '@trysound/sax@0.2.0':
-    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
-    engines: {node: '>=10.13.0'}
-
   '@tsconfig/node10@1.0.11':
     resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
 
@@ -1482,6 +1692,86 @@ packages:
     peerDependencies:
       vue: '>=2.7 || >=3'
 
+  '@unocss/astro@0.65.1':
+    resolution: {integrity: sha512-SnSoghbPWNC7Kxia/M0DuaYMcSmmeY7N54TYoNceQl23Ru2HioZvgjAJ+XtrK9B+Rvk+q9irGDTqhcadLVQ3Vg==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  '@unocss/cli@0.65.1':
+    resolution: {integrity: sha512-yV0n7+7hfxHtO+lXSElp8Zy2R5KM1ZVj9UWCemxQTJtKO+2KWk9HvGFR84Hs9+dno06GaOyQgpK1pBfmID0W0w==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  '@unocss/config@0.65.1':
+    resolution: {integrity: sha512-Akf5Vm2bGrUK/a10QBF3GLETFJnwW1G8ThPevrOCj0lBVWKlN5eMQnodyNdoCw+JMPfCPZdg+4lU8cJJIRAAbQ==}
+    engines: {node: '>=14'}
+
+  '@unocss/core@0.65.1':
+    resolution: {integrity: sha512-Ke0WNZjfSCE6pniJb8PjiwhO6/McxVb1EQYrkkz8aJuR83xu+AEcTog9D4N9EUkRfHS5tZYXQtTj4Uh90T6CEg==}
+
+  '@unocss/extractor-arbitrary-variants@0.65.1':
+    resolution: {integrity: sha512-VpF7j29TlmVjNolkIjhQ/cwYkuPUoXLv+ko62YRMibE5632QepbNob69pNYGOZustrZt3LvgHD/GcriKwJO4BA==}
+
+  '@unocss/inspector@0.65.1':
+    resolution: {integrity: sha512-RtONVp7rPpfSarr48qVEEsm201JyQSv6M21lqu1IzQZ62LQB5Gmi59Y+XR6cYDtwSn5ZUGxowR7nIRTPBMcxkw==}
+
+  '@unocss/postcss@0.65.1':
+    resolution: {integrity: sha512-k7mKObxE4o1gApICri20TpI0lT/dtEQv+uYEOrFz267jgPVo3VD6umHsTOLA+OoQ5Bf7VEYQXSeV0oA96j0o1w==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      postcss: ^8.4.21
+
+  '@unocss/preset-attributify@0.65.1':
+    resolution: {integrity: sha512-bmu9JELcpwgrXA5RonvFeWb38RcUz82wpWfyDwKdQRJHD3MnYQ5lN03W4B7nMsAflc4ls7XQZLzhn9iYhbYYqg==}
+
+  '@unocss/preset-icons@0.65.1':
+    resolution: {integrity: sha512-lFGy4PpfClhiRV6Wwn4w79qd53B7QCkEmsP4YF2Px274X0t2av0QjMH+bvo6TrFIsHGKzq0Lxg836SoaPg5YJA==}
+
+  '@unocss/preset-mini@0.65.1':
+    resolution: {integrity: sha512-dKIxi+ChWSZvXG8I7yVBjw4FLHdAvKrrCN9bjKpR4/4epKD6jRtEcR6S1wL6XSBWabh7V7D/VbVk+XZ6WsGuXA==}
+
+  '@unocss/preset-tagify@0.65.1':
+    resolution: {integrity: sha512-u0yWFXyyBumglFvn87MT7kasa3KPAWTiIHkTCVu8tNEFNfJzR9BZLEXGAtwrhqMm0pSCnDdqupwBLBQoVX8zEA==}
+
+  '@unocss/preset-typography@0.65.1':
+    resolution: {integrity: sha512-/fcgKU+uQ/RISRdJHTuSQh41Td/tAngSUzr+7Ry8f1UqI5NTjtGOixgfByPC+ZZ/V8f1DdjigaVy7Q3c+meUMg==}
+
+  '@unocss/preset-uno@0.65.1':
+    resolution: {integrity: sha512-OSEkphrlR9/RM5un9t9AqVQXOGBLJgjcEweZSm2ng9AK7BsxBXuVP1FelmRqeXVYT5uFtBoD4dfgCgBjGFIW9Q==}
+
+  '@unocss/preset-web-fonts@0.65.1':
+    resolution: {integrity: sha512-29TO8kCfvOaHj5O3a3SZIXuOwvg7raPcdmuFKB9KFM3J2pYv4PB1cLBrw6h9DWwAAnJUSQpGx9QmKIBEPnDhlw==}
+
+  '@unocss/preset-wind@0.65.1':
+    resolution: {integrity: sha512-7rw3hAWOkWMSjoprWKcQidqJRFQm8qM0IdLjFLQa2ROSzPSnIlNisXGEwAphf4/VYdP7+URUnu5eySQsIRWRzg==}
+
+  '@unocss/reset@0.65.1':
+    resolution: {integrity: sha512-qyxF7rKGX+Cu3FpV8KCRQbtCvFcBpmzvx5A2wal77tIhrFR5VSH7NzCVmgs2+V9FXvU3aWVNZ79i1KMnLZ5Mjg==}
+
+  '@unocss/rule-utils@0.65.1':
+    resolution: {integrity: sha512-XGXdXsRmIuMDQk/3Fd3g5JMhsyDGWsTfs6aN4vFQ1rfdSgY4UwbslqUNbIH9xxoTfmzUOJ2lhNrFw78RygCNSA==}
+    engines: {node: '>=14'}
+
+  '@unocss/transformer-attributify-jsx@0.65.1':
+    resolution: {integrity: sha512-FR6pAnsHgflIumSl6Y5J+cWUtt2wNPANFWdGd1jNLpcBXDummEd0U+U9VGOfB8AOT263DW0U0JE7vH5xiwVaog==}
+
+  '@unocss/transformer-compile-class@0.65.1':
+    resolution: {integrity: sha512-yTs2u8bxGlTXEQ+XYFuS+kapLuLJr7yvNRRTg1hS+2OFdpT8E/PfxAgdGEzMfmrjommjF4BnJ8AAtK+Wsg5s4w==}
+
+  '@unocss/transformer-directives@0.65.1':
+    resolution: {integrity: sha512-6D3QSeSWXCA+Jc+BQGwat0RfcNtYZdyFFpP+zr1cFpK7nwNZqwqZU+mcY8nywu/u+hYuEQMWPMzEYDAssMfUQQ==}
+
+  '@unocss/transformer-variant-group@0.65.1':
+    resolution: {integrity: sha512-LdSPDVpVCrMfgTKtGyWz0KkBXiJqFO8FRhiL4/9Hyaf+ECoWQ7RODgO6dKWyFIZEBjkLFK2toeZZvM+KYQlBlw==}
+
+  '@unocss/vite@0.65.1':
+    resolution: {integrity: sha512-5242hAlgTVUA+tJ9mwo/cpLqD9f4dn5V/prTmtIci0Y7zMsVeBlnQwfsV4MhyTVaF3eFxDy5AUEFiOuXo12rbQ==}
+    peerDependencies:
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
+
   '@vee-validate/zod@4.14.7':
     resolution: {integrity: sha512-UD0Tfyz1cKKd7BinnUztqKL+oeMjg/T4ZEguN/uZV4DsR9z7gdrD0lOuOU7aVl9UpVK6NM7MhDka35Lj7b/DTw==}
 
@@ -1753,6 +2043,10 @@ packages:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
   are-docs-informative@0.0.2:
     resolution: {integrity: sha512-ixiS0nLNNG5jNQzgZJNoUpBKdo9yTYZMGJ+QgT2jmjR7G7+QHRCc4v6LQ3NgE7EBJq+o0ams3waJwkrlBom8Ig==}
     engines: {node: '>=14'}
@@ -1763,6 +2057,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -1826,6 +2124,10 @@ packages:
     resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
     engines: {node: '>=12.0.0'}
 
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
   birpc@0.2.19:
     resolution: {integrity: sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==}
 
@@ -1858,6 +2160,12 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
+  bundle-require@5.0.0:
+    resolution: {integrity: sha512-GuziW3fSSmopcx4KRymQEJVbZUfqlCqcq7dvs6TYwKRZiegK/2buMxQTPs6MGlNv50wms1699qYO54R8XfRX4w==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    peerDependencies:
+      esbuild: '>=0.18'
+
   cac@6.7.14:
     resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
     engines: {node: '>=8'}
@@ -1909,6 +2217,10 @@ packages:
     resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
     engines: {node: '>= 16'}
 
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
   chokidar@4.0.1:
     resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==}
     engines: {node: '>= 14.16.0'}
@@ -1917,6 +2229,9 @@ packages:
     resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
     engines: {node: '>=8'}
 
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
   clean-regexp@1.0.0:
     resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==}
     engines: {node: '>=4'}
@@ -1933,6 +2248,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1958,10 +2277,6 @@ packages:
     resolution: {integrity: sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==}
     engines: {node: '>=18'}
 
-  commander@7.2.0:
-    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
-    engines: {node: '>= 10'}
-
   comment-parser@1.4.1:
     resolution: {integrity: sha512-buhp5kePrmda3vhc5B9t7pUQXAb2Tnd0qgpkIhPhkHXxJpiPJ11H0ZEU0oBpJ2QztSbzG/ZxMj/CHsYJqRHmyg==}
     engines: {node: '>= 12.0.0'}
@@ -1975,6 +2290,10 @@ packages:
   config-chain@1.1.13:
     resolution: {integrity: sha512-qj+f8APARXHrM0hraqXYb2/bOVSV4PvJQlNZ/DVj0QrmNM2q2euizkeuVckQ57J+W0mRH6Hvi+k50M4Jul2VRQ==}
 
+  consola@3.2.3:
+    resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   constantinople@4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
 
@@ -2012,25 +2331,10 @@ packages:
     resolution: {integrity: sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA==}
     engines: {node: '>=12 || >=16'}
 
-  css-select@5.1.0:
-    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
-
-  css-tree@2.2.1:
-    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
-  css-tree@2.3.1:
-    resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
-
   css-tree@3.0.1:
     resolution: {integrity: sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
 
-  css-what@6.1.0:
-    resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
-    engines: {node: '>= 6'}
-
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -2039,10 +2343,6 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
-  csso@5.0.5:
-    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
-    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
-
   cssstyle@4.1.0:
     resolution: {integrity: sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==}
     engines: {node: '>=18'}
@@ -2122,6 +2422,9 @@ packages:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
 
+  destr@2.0.3:
+    resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
+
   detect-libc@1.0.3:
     resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
     engines: {node: '>=0.10'}
@@ -2155,18 +2458,8 @@ packages:
   dom-accessibility-api@0.6.3:
     resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
 
-  dom-serializer@2.0.0:
-    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
-
-  domelementtype@2.3.0:
-    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
-
-  domhandler@5.0.3:
-    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
-    engines: {node: '>= 4'}
-
-  domutils@3.1.0:
-    resolution: {integrity: sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==}
+  duplexer@0.1.2:
+    resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
@@ -2231,6 +2524,11 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
+  esbuild@0.23.1:
+    resolution: {integrity: sha512-VVNz/9Sa0bs5SELtn3f7qhJCDPCF5oMEl5cO9/SSinpE9hbPVvxbd572HH5AKiP7WD8INO53GgfDDhRjkylHEg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   esbuild@0.24.0:
     resolution: {integrity: sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==}
     engines: {node: '>=18'}
@@ -2517,6 +2815,14 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
+  fdir@6.4.2:
+    resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   figures@6.1.0:
     resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
     engines: {node: '>=18'}
@@ -2689,6 +2995,10 @@ packages:
   graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
 
+  gzip-size@6.0.0:
+    resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
+    engines: {node: '>=10'}
+
   has-flag@4.0.0:
     resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
     engines: {node: '>=8'}
@@ -2773,6 +3083,9 @@ packages:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
 
+  importx@0.4.4:
+    resolution: {integrity: sha512-Lo1pukzAREqrBnnHC+tj+lreMTAvyxtkKsMxLY8H15M/bvLl54p3YuoTI70Tz7Il0AsgSlD7Lrk/FaApRcBL7w==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
@@ -2794,6 +3107,10 @@ packages:
   is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
 
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
   is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
@@ -2904,6 +3221,14 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  jiti@1.21.6:
+    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
+    hasBin: true
+
+  jiti@2.0.0-beta.3:
+    resolution: {integrity: sha512-pmfRbVRs/7khFrSAYnSiJ8C0D5GvzkE4Ey2pAvUcJsw1ly/p+7ut27jbJrjY79BpAJQJ4gXYFtK6d1Aub+9baQ==}
+    hasBin: true
+
   js-beautify@1.15.1:
     resolution: {integrity: sha512-ESjNzSlt/sWE8sciZH8kBF8BPlwXPwhR6pWKAw8bw4Bwj+iZcnKW6ONWUutJ7eObuBZQpiIb8S7OYspWrKt7rA==}
     engines: {node: '>=14'}
@@ -3019,6 +3344,10 @@ packages:
     resolution: {integrity: sha512-iyAZCeyD+c1gPyE9qpFu8af0Y+MRtmKOncdGoA2S5EY8iFq99dmmvkNnHiWo+pj0s7yH7l3KPIgee77tKpXPWQ==}
     engines: {node: '>=18.0.0'}
 
+  load-tsconfig@0.2.5:
+    resolution: {integrity: sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   local-pkg@0.5.1:
     resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
@@ -3067,11 +3396,6 @@ packages:
     resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
     engines: {node: '>=16.14'}
 
-  lucide-vue-next@0.396.0:
-    resolution: {integrity: sha512-fY2FbKWVlAH6KyGHLWQvjPmDAbAh5UH6eqakDYB815UG5wPLtDQmhSYQlZvDLvhkahLdUZt5f+IWKwSANaS0Zw==}
-    peerDependencies:
-      vue: '>=3.0.1'
-
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -3124,12 +3448,6 @@ packages:
   mdast-util-to-string@4.0.0:
     resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
 
-  mdn-data@2.0.28:
-    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
-
-  mdn-data@2.0.30:
-    resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-
   mdn-data@2.12.1:
     resolution: {integrity: sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==}
 
@@ -3313,6 +3631,9 @@ packages:
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
+  node-fetch-native@1.6.4:
+    resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==}
+
   node-releases@2.0.18:
     resolution: {integrity: sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==}
 
@@ -3359,6 +3680,9 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
+  ofetch@1.4.1:
+    resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
+
   onetime@6.0.0:
     resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
     engines: {node: '>=12'}
@@ -3638,6 +3962,11 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  radix-vue@1.9.11:
+    resolution: {integrity: sha512-C+MtJ66jf8J28DO5bKgNwhGCi6WQYuEosD/tY/Orry9BTDcuF/Mps4HlFd2Tq4YlXF44BEPLQ2Paz89Mz70ZgA==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -3665,6 +3994,10 @@ packages:
     resolution: {integrity: sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==}
     engines: {node: '>=8'}
 
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
   readdirp@4.0.2:
     resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==}
     engines: {node: '>= 14.16.0'}
@@ -3803,6 +4136,10 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  sirv@2.0.4:
+    resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
+    engines: {node: '>= 10'}
+
   sirv@3.0.0:
     resolution: {integrity: sha512-BPwJGUeDaDCHihkORDchNyyTvWFhcusy1XMmhEVTQTwGeybFbp8YEmB+njbPnth1FibULBSBVwCQni25XlCUDg==}
     engines: {node: '>=18'}
@@ -3985,11 +4322,6 @@ packages:
   svg-tags@1.0.0:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
 
-  svgo@3.3.2:
-    resolution: {integrity: sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -4005,6 +4337,9 @@ packages:
     resolution: {integrity: sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA==}
     engines: {node: '>=10.0.0'}
 
+  tailwind-merge@2.5.5:
+    resolution: {integrity: sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==}
+
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
@@ -4021,6 +4356,10 @@ packages:
   tinyexec@0.3.1:
     resolution: {integrity: sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==}
 
+  tinyglobby@0.2.10:
+    resolution: {integrity: sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==}
+    engines: {node: '>=12.0.0'}
+
   tinypool@0.8.4:
     resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==}
     engines: {node: '>=14.0.0'}
@@ -4090,6 +4429,11 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsx@4.19.2:
+    resolution: {integrity: sha512-pOUl6Vo2LUq/bSa8S5q7b91cgNSjctn9ugq/+Mvow99qW6x/UZYwzxy/3NmqoT66eHYfCVvFvACC58UBPFf28g==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -4141,6 +4485,9 @@ packages:
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
+  unconfig@0.5.5:
+    resolution: {integrity: sha512-VQZ5PT9HDX+qag0XdgQi8tJepPhXiR/yVOkn707gJDKo31lGjRilPREiQJ9Z6zd/Ugpv6ZvO5VxVIcatldYcNQ==}
+
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
@@ -4177,6 +4524,30 @@ packages:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  unocss-preset-animations@1.1.0:
+    resolution: {integrity: sha512-wCcVnu1IvQmzKK9dZpeZbPPuXO5sKmYGe5VaASjH8st6G3wgw4tw7HsVRP0bXHRhO0PXGtC5Kw9IRKh6dPGPtA==}
+    peerDependencies:
+      '@unocss/preset-wind': '>= 0.56.0 < 1'
+      unocss: '>= 0.56.0 < 1'
+
+  unocss-preset-shadcn@0.3.1:
+    resolution: {integrity: sha512-b17P8vUKYuxEYthgCVlrMLvy4FVSWxAwAf6d0kYsWYFymbb8VBacBfXrpu+anLTv7IiIgHgkRVNTnruVKIjC8Q==}
+    peerDependencies:
+      unocss: '>= 0.56.0 < 1'
+      unocss-preset-animations: ^1.0.1
+
+  unocss@0.65.1:
+    resolution: {integrity: sha512-WK8EZlduulTcy2i1O4/hVPIYlgcztMbOqsIrxY18Hx1LXSkI5LgTl0FVEyf+xLcwqoUzt4VH2BWEEkzQ13+GAg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@unocss/webpack': 0.65.1
+      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0
+    peerDependenciesMeta:
+      '@unocss/webpack':
+        optional: true
+      vite:
+        optional: true
+
   unplugin@1.16.0:
     resolution: {integrity: sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==}
     engines: {node: '>=14.0.0'}
@@ -4245,11 +4616,6 @@ packages:
     peerDependencies:
       vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0 || ^6.0.0-0
 
-  vite-svg-loader@5.1.0:
-    resolution: {integrity: sha512-M/wqwtOEjgb956/+m5ZrYT/Iq6Hax0OakWbokj8+9PXOnB7b/4AxESHieEtnNEy7ZpjsjYW1/5nK8fATQMmRxw==}
-    peerDependencies:
-      vue: '>=3.2.13'
-
   vite@5.4.11:
     resolution: {integrity: sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4349,6 +4715,11 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
+  vue-flow-layout@0.1.1:
+    resolution: {integrity: sha512-JdgRRUVrN0Y2GosA0M68DEbKlXMqJ7FQgsK8CjQD2vxvNSqAU6PZEpi4cfcTVtfM2GVOMjHo7GKKLbXxOBqDqA==}
+    peerDependencies:
+      vue: ^3.4.37
+
   vue-i18n@9.14.2:
     resolution: {integrity: sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==}
     engines: {node: '>= 16'}
@@ -4555,42 +4926,42 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
-  '@antfu/eslint-config@3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.14.0)(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))':
+  '@antfu/eslint-config@3.11.2(@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))':
     dependencies:
       '@antfu/install-pkg': 0.5.0
       '@clack/prompts': 0.8.2
-      '@eslint-community/eslint-plugin-eslint-comments': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-plugin-eslint-comments': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       '@eslint/markdown': 6.2.1
-      '@stylistic/eslint-plugin': 2.11.0(eslint@9.14.0)(typescript@5.7.2)
-      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)(typescript@5.7.2)
-      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
-      '@vitest/eslint-plugin': 1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))
-      eslint: 9.14.0
-      eslint-config-flat-gitignore: 0.3.0(eslint@9.14.0)
+      '@stylistic/eslint-plugin': 2.11.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      '@vitest/eslint-plugin': 1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.14.0(jiti@1.21.6))
       eslint-flat-config-utils: 0.4.0
-      eslint-merge-processors: 0.1.0(eslint@9.14.0)
-      eslint-plugin-antfu: 2.7.0(eslint@9.14.0)
-      eslint-plugin-command: 0.2.6(eslint@9.14.0)
-      eslint-plugin-import-x: 4.5.0(eslint@9.14.0)(typescript@5.7.2)
-      eslint-plugin-jsdoc: 50.6.0(eslint@9.14.0)
-      eslint-plugin-jsonc: 2.18.2(eslint@9.14.0)
-      eslint-plugin-n: 17.14.0(eslint@9.14.0)
+      eslint-merge-processors: 0.1.0(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-antfu: 2.7.0(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-command: 0.2.6(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-import-x: 4.5.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      eslint-plugin-jsdoc: 50.6.0(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-jsonc: 2.18.2(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-n: 17.14.0(eslint@9.14.0(jiti@1.21.6))
       eslint-plugin-no-only-tests: 3.3.0
-      eslint-plugin-perfectionist: 4.2.0(eslint@9.14.0)(typescript@5.7.2)
-      eslint-plugin-regexp: 2.7.0(eslint@9.14.0)
-      eslint-plugin-toml: 0.11.1(eslint@9.14.0)
-      eslint-plugin-unicorn: 56.0.1(eslint@9.14.0)
-      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)
-      eslint-plugin-vue: 9.32.0(eslint@9.14.0)
-      eslint-plugin-yml: 1.16.0(eslint@9.14.0)
-      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0)
+      eslint-plugin-perfectionist: 4.2.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      eslint-plugin-regexp: 2.7.0(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-toml: 0.11.1(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-unicorn: 56.0.1(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-unused-imports: 4.1.4(@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-vue: 9.32.0(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-yml: 1.16.0(eslint@9.14.0(jiti@1.21.6))
+      eslint-processor-vue-blocks: 0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(jiti@1.21.6))
       globals: 15.13.0
       jsonc-eslint-parser: 2.4.0
       local-pkg: 0.5.1
       parse-gitignore: 2.0.0
       picocolors: 1.1.1
       toml-eslint-parser: 0.10.0
-      vue-eslint-parser: 9.4.3(eslint@9.14.0)
+      vue-eslint-parser: 9.4.3(eslint@9.14.0(jiti@1.21.6))
       yaml-eslint-parser: 1.2.3
       yargs: 17.7.2
     transitivePeerDependencies:
@@ -4601,6 +4972,11 @@ snapshots:
       - typescript
       - vitest
 
+  '@antfu/install-pkg@0.4.1':
+    dependencies:
+      package-manager-detector: 0.2.6
+      tinyexec: 0.3.1
+
   '@antfu/install-pkg@0.5.0':
     dependencies:
       package-manager-detector: 0.2.6
@@ -4848,160 +5224,232 @@ snapshots:
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/aix-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/aix-ppc64@0.24.0':
     optional: true
 
   '@esbuild/android-arm64@0.21.5':
     optional: true
 
+  '@esbuild/android-arm64@0.23.1':
+    optional: true
+
   '@esbuild/android-arm64@0.24.0':
     optional: true
 
   '@esbuild/android-arm@0.21.5':
     optional: true
 
+  '@esbuild/android-arm@0.23.1':
+    optional: true
+
   '@esbuild/android-arm@0.24.0':
     optional: true
 
   '@esbuild/android-x64@0.21.5':
     optional: true
 
+  '@esbuild/android-x64@0.23.1':
+    optional: true
+
   '@esbuild/android-x64@0.24.0':
     optional: true
 
   '@esbuild/darwin-arm64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-arm64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-arm64@0.24.0':
     optional: true
 
   '@esbuild/darwin-x64@0.21.5':
     optional: true
 
+  '@esbuild/darwin-x64@0.23.1':
+    optional: true
+
   '@esbuild/darwin-x64@0.24.0':
     optional: true
 
   '@esbuild/freebsd-arm64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-arm64@0.24.0':
     optional: true
 
   '@esbuild/freebsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/freebsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/freebsd-x64@0.24.0':
     optional: true
 
   '@esbuild/linux-arm64@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm64@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm64@0.24.0':
     optional: true
 
   '@esbuild/linux-arm@0.21.5':
     optional: true
 
+  '@esbuild/linux-arm@0.23.1':
+    optional: true
+
   '@esbuild/linux-arm@0.24.0':
     optional: true
 
   '@esbuild/linux-ia32@0.21.5':
     optional: true
 
+  '@esbuild/linux-ia32@0.23.1':
+    optional: true
+
   '@esbuild/linux-ia32@0.24.0':
     optional: true
 
   '@esbuild/linux-loong64@0.21.5':
     optional: true
 
-  '@esbuild/linux-loong64@0.24.0':
+  '@esbuild/linux-loong64@0.23.1':
+    optional: true
+
+  '@esbuild/linux-loong64@0.24.0':
     optional: true
 
   '@esbuild/linux-mips64el@0.21.5':
     optional: true
 
+  '@esbuild/linux-mips64el@0.23.1':
+    optional: true
+
   '@esbuild/linux-mips64el@0.24.0':
     optional: true
 
   '@esbuild/linux-ppc64@0.21.5':
     optional: true
 
+  '@esbuild/linux-ppc64@0.23.1':
+    optional: true
+
   '@esbuild/linux-ppc64@0.24.0':
     optional: true
 
   '@esbuild/linux-riscv64@0.21.5':
     optional: true
 
+  '@esbuild/linux-riscv64@0.23.1':
+    optional: true
+
   '@esbuild/linux-riscv64@0.24.0':
     optional: true
 
   '@esbuild/linux-s390x@0.21.5':
     optional: true
 
+  '@esbuild/linux-s390x@0.23.1':
+    optional: true
+
   '@esbuild/linux-s390x@0.24.0':
     optional: true
 
   '@esbuild/linux-x64@0.21.5':
     optional: true
 
+  '@esbuild/linux-x64@0.23.1':
+    optional: true
+
   '@esbuild/linux-x64@0.24.0':
     optional: true
 
   '@esbuild/netbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/netbsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/netbsd-x64@0.24.0':
     optional: true
 
+  '@esbuild/openbsd-arm64@0.23.1':
+    optional: true
+
   '@esbuild/openbsd-arm64@0.24.0':
     optional: true
 
   '@esbuild/openbsd-x64@0.21.5':
     optional: true
 
+  '@esbuild/openbsd-x64@0.23.1':
+    optional: true
+
   '@esbuild/openbsd-x64@0.24.0':
     optional: true
 
   '@esbuild/sunos-x64@0.21.5':
     optional: true
 
+  '@esbuild/sunos-x64@0.23.1':
+    optional: true
+
   '@esbuild/sunos-x64@0.24.0':
     optional: true
 
   '@esbuild/win32-arm64@0.21.5':
     optional: true
 
+  '@esbuild/win32-arm64@0.23.1':
+    optional: true
+
   '@esbuild/win32-arm64@0.24.0':
     optional: true
 
   '@esbuild/win32-ia32@0.21.5':
     optional: true
 
+  '@esbuild/win32-ia32@0.23.1':
+    optional: true
+
   '@esbuild/win32-ia32@0.24.0':
     optional: true
 
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
+  '@esbuild/win32-x64@0.23.1':
+    optional: true
+
   '@esbuild/win32-x64@0.24.0':
     optional: true
 
-  '@eslint-community/eslint-plugin-eslint-comments@4.4.1(eslint@9.14.0)':
+  '@eslint-community/eslint-plugin-eslint-comments@4.4.1(eslint@9.14.0(jiti@1.21.6))':
     dependencies:
       escape-string-regexp: 4.0.0
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       ignore: 5.3.2
 
-  '@eslint-community/eslint-utils@4.4.1(eslint@9.14.0)':
+  '@eslint-community/eslint-utils@4.4.1(eslint@9.14.0(jiti@1.21.6))':
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/compat@1.2.3(eslint@9.14.0)':
+  '@eslint/compat@1.2.3(eslint@9.14.0(jiti@1.21.6))':
     optionalDependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
 
   '@eslint/config-array@0.18.0':
     dependencies:
@@ -5052,8 +5500,22 @@ snapshots:
     dependencies:
       '@floating-ui/core': 1.6.8
 
+  '@floating-ui/dom@1.6.12':
+    dependencies:
+      '@floating-ui/core': 1.6.8
+      '@floating-ui/utils': 0.2.8
+
   '@floating-ui/utils@0.2.8': {}
 
+  '@floating-ui/vue@1.1.5(vue@3.5.13(typescript@5.4.5))':
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/utils': 0.2.8
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.4.5))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@formkit/auto-animate@0.8.2': {}
 
   '@humanfs/core@0.19.1': {}
@@ -5069,6 +5531,41 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.1': {}
 
+  '@iconify-json/hugeicons@1.2.1':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify-json/lucide@1.2.17':
+    dependencies:
+      '@iconify/types': 2.0.0
+
+  '@iconify/types@2.0.0': {}
+
+  '@iconify/utils@2.1.33':
+    dependencies:
+      '@antfu/install-pkg': 0.4.1
+      '@antfu/utils': 0.7.10
+      '@iconify/types': 2.0.0
+      debug: 4.3.7
+      kolorist: 1.8.0
+      local-pkg: 0.5.1
+      mlly: 1.7.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@iconify/vue@4.1.2(vue@3.5.13(typescript@5.4.5))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.13(typescript@5.4.5)
+
+  '@internationalized/date@3.6.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@internationalized/number@3.6.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@intlify/core-base@9.14.2':
     dependencies:
       '@intlify/message-compiler': 9.14.2
@@ -5519,10 +6016,10 @@ snapshots:
       vue: 3.5.13(typescript@5.4.5)
       vue-component-type-helpers: 2.1.10
 
-  '@stylistic/eslint-plugin@2.11.0(eslint@9.14.0)(typescript@5.7.2)':
+  '@stylistic/eslint-plugin@2.11.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)':
     dependencies:
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
-      eslint: 9.14.0
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      eslint: 9.14.0(jiti@1.21.6)
       eslint-visitor-keys: 4.2.0
       espree: 10.3.0
       estraverse: 5.3.0
@@ -5531,6 +6028,17 @@ snapshots:
       - supports-color
       - typescript
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
+  '@tanstack/virtual-core@3.10.9': {}
+
+  '@tanstack/vue-virtual@3.11.0(vue@3.5.13(typescript@5.4.5))':
+    dependencies:
+      '@tanstack/virtual-core': 3.10.9
+      vue: 3.5.13(typescript@5.4.5)
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -5556,8 +6064,6 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.0
 
-  '@trysound/sax@0.2.0': {}
-
   '@tsconfig/node10@1.0.11': {}
 
   '@tsconfig/node12@1.0.11': {}
@@ -5619,15 +6125,15 @@ snapshots:
 
   '@types/web-bluetooth@0.0.20': {}
 
-  '@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.4.5))(eslint@9.14.0)(typescript@5.4.5)':
+  '@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
+      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
       '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/type-utils': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
+      '@typescript-eslint/type-utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
       '@typescript-eslint/visitor-keys': 8.17.0
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
@@ -5637,15 +6143,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)(typescript@5.7.2)':
+  '@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
+      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
       '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/type-utils': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
+      '@typescript-eslint/type-utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
       '@typescript-eslint/visitor-keys': 8.17.0
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       graphemer: 1.4.0
       ignore: 5.3.2
       natural-compare: 1.4.0
@@ -5655,27 +6161,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.4.5)':
+  '@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.17.0
       '@typescript-eslint/types': 8.17.0
       '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.4.5)
       '@typescript-eslint/visitor-keys': 8.17.0
       debug: 4.3.7
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.7.2)':
+  '@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.17.0
       '@typescript-eslint/types': 8.17.0
       '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.7.2)
       '@typescript-eslint/visitor-keys': 8.17.0
       debug: 4.3.7
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.7.2
     transitivePeerDependencies:
@@ -5686,24 +6192,24 @@ snapshots:
       '@typescript-eslint/types': 8.17.0
       '@typescript-eslint/visitor-keys': 8.17.0
 
-  '@typescript-eslint/type-utils@8.17.0(eslint@9.14.0)(typescript@5.4.5)':
+  '@typescript-eslint/type-utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.4.5)
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
       debug: 4.3.7
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       ts-api-utils: 1.4.3(typescript@5.4.5)
     optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.17.0(eslint@9.14.0)(typescript@5.7.2)':
+  '@typescript-eslint/type-utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)':
     dependencies:
       '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.7.2)
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
       debug: 4.3.7
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       ts-api-utils: 1.4.3(typescript@5.7.2)
     optionalDependencies:
       typescript: 5.7.2
@@ -5742,25 +6248,25 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.4.5)':
+  '@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       '@typescript-eslint/scope-manager': 8.17.0
       '@typescript-eslint/types': 8.17.0
       '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.4.5)
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.7.2)':
+  '@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       '@typescript-eslint/scope-manager': 8.17.0
       '@typescript-eslint/types': 8.17.0
       '@typescript-eslint/typescript-estree': 8.17.0(typescript@5.7.2)
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.7.2
     transitivePeerDependencies:
@@ -5794,6 +6300,157 @@ snapshots:
       unhead: 1.11.13
       vue: 3.5.13(typescript@5.4.5)
 
+  '@unocss/astro@0.65.1(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))':
+    dependencies:
+      '@unocss/core': 0.65.1
+      '@unocss/reset': 0.65.1
+      '@unocss/vite': 0.65.1(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))
+    optionalDependencies:
+      vite: 5.4.11(@types/node@20.17.9)(sass@1.81.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vue
+
+  '@unocss/cli@0.65.1(rollup@4.28.0)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.28.0)
+      '@unocss/config': 0.65.1
+      '@unocss/core': 0.65.1
+      '@unocss/preset-uno': 0.65.1
+      cac: 6.7.14
+      chokidar: 3.6.0
+      colorette: 2.0.20
+      consola: 3.2.3
+      magic-string: 0.30.14
+      pathe: 1.1.2
+      perfect-debounce: 1.0.0
+      tinyglobby: 0.2.10
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
+  '@unocss/config@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      unconfig: 0.5.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/core@0.65.1': {}
+
+  '@unocss/extractor-arbitrary-variants@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+
+  '@unocss/inspector@0.65.1(vue@3.5.13(typescript@5.4.5))':
+    dependencies:
+      '@unocss/core': 0.65.1
+      '@unocss/rule-utils': 0.65.1
+      gzip-size: 6.0.0
+      sirv: 2.0.4
+      vue-flow-layout: 0.1.1(vue@3.5.13(typescript@5.4.5))
+    transitivePeerDependencies:
+      - vue
+
+  '@unocss/postcss@0.65.1(postcss@8.4.49)':
+    dependencies:
+      '@unocss/config': 0.65.1
+      '@unocss/core': 0.65.1
+      '@unocss/rule-utils': 0.65.1
+      css-tree: 3.0.1
+      postcss: 8.4.49
+      tinyglobby: 0.2.10
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/preset-attributify@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+
+  '@unocss/preset-icons@0.65.1':
+    dependencies:
+      '@iconify/utils': 2.1.33
+      '@unocss/core': 0.65.1
+      ofetch: 1.4.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@unocss/preset-mini@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      '@unocss/extractor-arbitrary-variants': 0.65.1
+      '@unocss/rule-utils': 0.65.1
+
+  '@unocss/preset-tagify@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+
+  '@unocss/preset-typography@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      '@unocss/preset-mini': 0.65.1
+
+  '@unocss/preset-uno@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      '@unocss/preset-mini': 0.65.1
+      '@unocss/preset-wind': 0.65.1
+      '@unocss/rule-utils': 0.65.1
+
+  '@unocss/preset-web-fonts@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      ofetch: 1.4.1
+
+  '@unocss/preset-wind@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      '@unocss/preset-mini': 0.65.1
+      '@unocss/rule-utils': 0.65.1
+
+  '@unocss/reset@0.65.1': {}
+
+  '@unocss/rule-utils@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      magic-string: 0.30.14
+
+  '@unocss/transformer-attributify-jsx@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+
+  '@unocss/transformer-compile-class@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+
+  '@unocss/transformer-directives@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+      '@unocss/rule-utils': 0.65.1
+      css-tree: 3.0.1
+
+  '@unocss/transformer-variant-group@0.65.1':
+    dependencies:
+      '@unocss/core': 0.65.1
+
+  '@unocss/vite@0.65.1(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@rollup/pluginutils': 5.1.3(rollup@4.28.0)
+      '@unocss/config': 0.65.1
+      '@unocss/core': 0.65.1
+      '@unocss/inspector': 0.65.1(vue@3.5.13(typescript@5.4.5))
+      chokidar: 3.6.0
+      magic-string: 0.30.14
+      tinyglobby: 0.2.10
+      vite: 5.4.11(@types/node@20.17.9)(sass@1.81.0)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - vue
+
   '@vee-validate/zod@4.14.7(vue@3.5.13(typescript@5.4.5))':
     dependencies:
       type-fest: 4.30.0
@@ -5807,18 +6464,18 @@ snapshots:
       vite: 5.4.11(@types/node@20.17.9)(sass@1.81.0)
       vue: 3.5.13(typescript@5.4.5)
 
-  '@vitest/eslint-plugin@1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.4.5))(eslint@9.14.0)(typescript@5.4.5)(vitest@1.6.0(@types/node@20.17.9)(jsdom@24.1.3)(sass@1.81.0))':
+  '@vitest/eslint-plugin@1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)(vitest@1.6.0(@types/node@20.17.9)(jsdom@24.1.3)(sass@1.81.0))':
     dependencies:
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
-      eslint: 9.14.0
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.4.5
       vitest: 1.6.0(@types/node@20.17.9)(jsdom@24.1.3)(sass@1.81.0)
 
-  '@vitest/eslint-plugin@1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))':
+  '@vitest/eslint-plugin@1.1.14(@typescript-eslint/utils@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)(vitest@1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0))':
     dependencies:
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
-      eslint: 9.14.0
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.7.2
       vitest: 1.6.0(@types/node@22.10.1)(jsdom@24.1.3)(sass@1.81.0)
@@ -5993,23 +6650,23 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
-  '@vue/eslint-config-prettier@10.1.0(eslint@9.14.0)(prettier@3.4.1)':
+  '@vue/eslint-config-prettier@10.1.0(eslint@9.14.0(jiti@1.21.6))(prettier@3.4.1)':
     dependencies:
-      eslint: 9.14.0
-      eslint-config-prettier: 9.1.0(eslint@9.14.0)
-      eslint-plugin-prettier: 5.2.1(eslint-config-prettier@9.1.0(eslint@9.14.0))(eslint@9.14.0)(prettier@3.4.1)
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-config-prettier: 9.1.0(eslint@9.14.0(jiti@1.21.6))
+      eslint-plugin-prettier: 5.2.1(eslint-config-prettier@9.1.0(eslint@9.14.0(jiti@1.21.6)))(eslint@9.14.0(jiti@1.21.6))(prettier@3.4.1)
       prettier: 3.4.1
     transitivePeerDependencies:
       - '@types/eslint'
 
-  '@vue/eslint-config-typescript@14.1.4(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.4.5))(eslint-plugin-vue@9.32.0(eslint@9.14.0))(eslint@9.14.0)(typescript@5.4.5)':
+  '@vue/eslint-config-typescript@14.1.4(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint-plugin-vue@9.32.0(eslint@9.14.0(jiti@1.21.6)))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)':
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.4.5))(eslint@9.14.0)(typescript@5.4.5)
-      eslint: 9.14.0
-      eslint-plugin-vue: 9.32.0(eslint@9.14.0)
+      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-plugin-vue: 9.32.0(eslint@9.14.0(jiti@1.21.6))
       fast-glob: 3.3.2
-      typescript-eslint: 8.17.0(eslint@9.14.0)(typescript@5.4.5)
-      vue-eslint-parser: 9.4.3(eslint@9.14.0)
+      typescript-eslint: 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      vue-eslint-parser: 9.4.3(eslint@9.14.0(jiti@1.21.6))
     optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
@@ -6144,12 +6801,21 @@ snapshots:
 
   ansi-styles@6.2.1: {}
 
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
   are-docs-informative@0.0.2: {}
 
   arg@4.1.3: {}
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -6208,6 +6874,8 @@ snapshots:
     dependencies:
       open: 8.4.2
 
+  binary-extensions@2.3.0: {}
+
   birpc@0.2.19: {}
 
   boolbase@1.0.0: {}
@@ -6240,6 +6908,11 @@ snapshots:
     dependencies:
       run-applescript: 7.0.0
 
+  bundle-require@5.0.0(esbuild@0.21.5):
+    dependencies:
+      esbuild: 0.21.5
+      load-tsconfig: 0.2.5
+
   cac@6.7.14: {}
 
   call-bind@1.0.7:
@@ -6298,12 +6971,28 @@ snapshots:
 
   check-error@2.1.1: {}
 
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   chokidar@4.0.1:
     dependencies:
       readdirp: 4.0.2
 
   ci-info@4.1.0: {}
 
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
   clean-regexp@1.0.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -6323,6 +7012,8 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -6341,8 +7032,6 @@ snapshots:
 
   commander@12.1.0: {}
 
-  commander@7.2.0: {}
-
   comment-parser@1.4.1: {}
 
   concat-map@0.0.1: {}
@@ -6354,6 +7043,8 @@ snapshots:
       ini: 1.3.8
       proto-list: 1.2.4
 
+  consola@3.2.3: {}
+
   constantinople@4.0.1:
     dependencies:
       '@babel/parser': 7.26.2
@@ -6390,39 +7081,15 @@ snapshots:
 
   css-functions-list@3.2.3: {}
 
-  css-select@5.1.0:
-    dependencies:
-      boolbase: 1.0.0
-      css-what: 6.1.0
-      domhandler: 5.0.3
-      domutils: 3.1.0
-      nth-check: 2.1.1
-
-  css-tree@2.2.1:
-    dependencies:
-      mdn-data: 2.0.28
-      source-map-js: 1.2.1
-
-  css-tree@2.3.1:
-    dependencies:
-      mdn-data: 2.0.30
-      source-map-js: 1.2.1
-
   css-tree@3.0.1:
     dependencies:
       mdn-data: 2.12.1
       source-map-js: 1.2.1
 
-  css-what@6.1.0: {}
-
   css.escape@1.5.1: {}
 
   cssesc@3.0.0: {}
 
-  csso@5.0.5:
-    dependencies:
-      css-tree: 2.2.1
-
   cssstyle@4.1.0:
     dependencies:
       rrweb-cssom: 0.7.1
@@ -6481,6 +7148,8 @@ snapshots:
 
   dequal@2.0.3: {}
 
+  destr@2.0.3: {}
+
   detect-libc@1.0.3:
     optional: true
 
@@ -6506,23 +7175,7 @@ snapshots:
 
   dom-accessibility-api@0.6.3: {}
 
-  dom-serializer@2.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      entities: 4.5.0
-
-  domelementtype@2.3.0: {}
-
-  domhandler@5.0.3:
-    dependencies:
-      domelementtype: 2.3.0
-
-  domutils@3.1.0:
-    dependencies:
-      dom-serializer: 2.0.0
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
+  duplexer@0.1.2: {}
 
   eastasianwidth@0.2.0: {}
 
@@ -6599,6 +7252,33 @@ snapshots:
       '@esbuild/win32-ia32': 0.21.5
       '@esbuild/win32-x64': 0.21.5
 
+  esbuild@0.23.1:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.23.1
+      '@esbuild/android-arm': 0.23.1
+      '@esbuild/android-arm64': 0.23.1
+      '@esbuild/android-x64': 0.23.1
+      '@esbuild/darwin-arm64': 0.23.1
+      '@esbuild/darwin-x64': 0.23.1
+      '@esbuild/freebsd-arm64': 0.23.1
+      '@esbuild/freebsd-x64': 0.23.1
+      '@esbuild/linux-arm': 0.23.1
+      '@esbuild/linux-arm64': 0.23.1
+      '@esbuild/linux-ia32': 0.23.1
+      '@esbuild/linux-loong64': 0.23.1
+      '@esbuild/linux-mips64el': 0.23.1
+      '@esbuild/linux-ppc64': 0.23.1
+      '@esbuild/linux-riscv64': 0.23.1
+      '@esbuild/linux-s390x': 0.23.1
+      '@esbuild/linux-x64': 0.23.1
+      '@esbuild/netbsd-x64': 0.23.1
+      '@esbuild/openbsd-arm64': 0.23.1
+      '@esbuild/openbsd-x64': 0.23.1
+      '@esbuild/sunos-x64': 0.23.1
+      '@esbuild/win32-arm64': 0.23.1
+      '@esbuild/win32-ia32': 0.23.1
+      '@esbuild/win32-x64': 0.23.1
+
   esbuild@0.24.0:
     optionalDependencies:
       '@esbuild/aix-ppc64': 0.24.0
@@ -6634,25 +7314,25 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-compat-utils@0.5.1(eslint@9.14.0):
+  eslint-compat-utils@0.5.1(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       semver: 7.6.3
 
-  eslint-compat-utils@0.6.4(eslint@9.14.0):
+  eslint-compat-utils@0.6.4(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       semver: 7.6.3
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.14.0):
+  eslint-config-flat-gitignore@0.3.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      '@eslint/compat': 1.2.3(eslint@9.14.0)
-      eslint: 9.14.0
+      '@eslint/compat': 1.2.3(eslint@9.14.0(jiti@1.21.6))
+      eslint: 9.14.0(jiti@1.21.6)
       find-up-simple: 1.0.0
 
-  eslint-config-prettier@9.1.0(eslint@9.14.0):
+  eslint-config-prettier@9.1.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
 
   eslint-define-config@2.1.0: {}
 
@@ -6668,40 +7348,40 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-json-compat-utils@0.2.1(eslint@9.14.0)(jsonc-eslint-parser@2.4.0):
+  eslint-json-compat-utils@0.2.1(eslint@9.14.0(jiti@1.21.6))(jsonc-eslint-parser@2.4.0):
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       esquery: 1.6.0
       jsonc-eslint-parser: 2.4.0
 
-  eslint-merge-processors@0.1.0(eslint@9.14.0):
+  eslint-merge-processors@0.1.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
 
-  eslint-plugin-antfu@2.7.0(eslint@9.14.0):
+  eslint-plugin-antfu@2.7.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       '@antfu/utils': 0.7.10
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
 
-  eslint-plugin-command@0.2.6(eslint@9.14.0):
+  eslint-plugin-command@0.2.6(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       '@es-joy/jsdoccomment': 0.48.0
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
 
-  eslint-plugin-es-x@7.8.0(eslint@9.14.0):
+  eslint-plugin-es-x@7.8.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       '@eslint-community/regexpp': 4.12.1
-      eslint: 9.14.0
-      eslint-compat-utils: 0.5.1(eslint@9.14.0)
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-compat-utils: 0.5.1(eslint@9.14.0(jiti@1.21.6))
 
-  eslint-plugin-import-x@4.5.0(eslint@9.14.0)(typescript@5.7.2):
+  eslint-plugin-import-x@4.5.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2):
     dependencies:
       '@typescript-eslint/scope-manager': 8.17.0
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
       debug: 4.3.7
       doctrine: 3.0.0
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       eslint-import-resolver-node: 0.3.9
       get-tsconfig: 4.8.1
       is-glob: 4.0.3
@@ -6713,14 +7393,14 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-jsdoc@50.6.0(eslint@9.14.0):
+  eslint-plugin-jsdoc@50.6.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       '@es-joy/jsdoccomment': 0.49.0
       are-docs-informative: 0.0.2
       comment-parser: 1.4.1
       debug: 4.3.7
       escape-string-regexp: 4.0.0
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       espree: 10.3.0
       esquery: 1.6.0
       parse-imports: 2.2.1
@@ -6730,12 +7410,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsonc@2.18.2(eslint@9.14.0):
+  eslint-plugin-jsonc@2.18.2(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
-      eslint: 9.14.0
-      eslint-compat-utils: 0.6.4(eslint@9.14.0)
-      eslint-json-compat-utils: 0.2.1(eslint@9.14.0)(jsonc-eslint-parser@2.4.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-compat-utils: 0.6.4(eslint@9.14.0(jiti@1.21.6))
+      eslint-json-compat-utils: 0.2.1(eslint@9.14.0(jiti@1.21.6))(jsonc-eslint-parser@2.4.0)
       espree: 9.6.1
       graphemer: 1.4.0
       jsonc-eslint-parser: 2.4.0
@@ -6744,12 +7424,12 @@ snapshots:
     transitivePeerDependencies:
       - '@eslint/json'
 
-  eslint-plugin-n@17.14.0(eslint@9.14.0):
+  eslint-plugin-n@17.14.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       enhanced-resolve: 5.17.1
-      eslint: 9.14.0
-      eslint-plugin-es-x: 7.8.0(eslint@9.14.0)
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-plugin-es-x: 7.8.0(eslint@9.14.0(jiti@1.21.6))
       get-tsconfig: 4.8.1
       globals: 15.13.0
       ignore: 5.3.2
@@ -6758,64 +7438,64 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.3.0: {}
 
-  eslint-plugin-perfectionist@4.2.0(eslint@9.14.0)(typescript@5.7.2):
+  eslint-plugin-perfectionist@4.2.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2):
     dependencies:
       '@typescript-eslint/types': 8.17.0
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.7.2)
-      eslint: 9.14.0
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
+      eslint: 9.14.0(jiti@1.21.6)
       natural-orderby: 5.0.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@9.14.0))(eslint@9.14.0)(prettier@3.4.1):
+  eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@9.14.0(jiti@1.21.6)))(eslint@9.14.0(jiti@1.21.6))(prettier@3.4.1):
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       prettier: 3.4.1
       prettier-linter-helpers: 1.0.0
       synckit: 0.9.2
     optionalDependencies:
-      eslint-config-prettier: 9.1.0(eslint@9.14.0)
+      eslint-config-prettier: 9.1.0(eslint@9.14.0(jiti@1.21.6))
 
-  eslint-plugin-regexp@2.7.0(eslint@9.14.0):
+  eslint-plugin-regexp@2.7.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       '@eslint-community/regexpp': 4.12.1
       comment-parser: 1.4.1
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       jsdoc-type-pratt-parser: 4.1.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
       scslre: 0.3.0
 
-  eslint-plugin-storybook@0.10.2(eslint@9.14.0)(typescript@5.4.5):
+  eslint-plugin-storybook@0.10.2(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5):
     dependencies:
       '@storybook/csf': 0.1.12
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
-      eslint: 9.14.0
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      eslint: 9.14.0(jiti@1.21.6)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-toml@0.11.1(eslint@9.14.0):
+  eslint-plugin-toml@0.11.1(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       debug: 4.3.7
-      eslint: 9.14.0
-      eslint-compat-utils: 0.5.1(eslint@9.14.0)
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-compat-utils: 0.5.1(eslint@9.14.0(jiti@1.21.6))
       lodash: 4.17.21
       toml-eslint-parser: 0.10.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-unicorn@56.0.1(eslint@9.14.0):
+  eslint-plugin-unicorn@56.0.1(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       '@babel/helper-validator-identifier': 7.25.9
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       ci-info: 4.1.0
       clean-regexp: 1.0.0
       core-js-compat: 3.39.0
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       esquery: 1.6.0
       globals: 15.13.0
       indent-string: 4.0.0
@@ -6828,41 +7508,41 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
-  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0):
+  eslint-plugin-unused-imports@4.1.4(@typescript-eslint/eslint-plugin@8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
-      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.7.2))(eslint@9.14.0)(typescript@5.7.2)
+      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2))(eslint@9.14.0(jiti@1.21.6))(typescript@5.7.2)
 
-  eslint-plugin-vue@9.32.0(eslint@9.14.0):
+  eslint-plugin-vue@9.32.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
-      eslint: 9.14.0
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
+      eslint: 9.14.0(jiti@1.21.6)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      vue-eslint-parser: 9.4.3(eslint@9.14.0)
+      vue-eslint-parser: 9.4.3(eslint@9.14.0(jiti@1.21.6))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-yml@1.16.0(eslint@9.14.0):
+  eslint-plugin-yml@1.16.0(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       debug: 4.3.7
-      eslint: 9.14.0
-      eslint-compat-utils: 0.6.4(eslint@9.14.0)
+      eslint: 9.14.0(jiti@1.21.6)
+      eslint-compat-utils: 0.6.4(eslint@9.14.0(jiti@1.21.6))
       lodash: 4.17.21
       natural-compare: 1.4.0
       yaml-eslint-parser: 1.2.3
     transitivePeerDependencies:
       - supports-color
 
-  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0):
+  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       '@vue/compiler-sfc': 3.5.13
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
 
   eslint-scope@7.2.2:
     dependencies:
@@ -6878,9 +7558,9 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint@9.14.0:
+  eslint@9.14.0(jiti@1.21.6):
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0)
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(jiti@1.21.6))
       '@eslint-community/regexpp': 4.12.1
       '@eslint/config-array': 0.18.0
       '@eslint/core': 0.7.0
@@ -6915,6 +7595,8 @@ snapshots:
       natural-compare: 1.4.0
       optionator: 0.9.4
       text-table: 0.2.0
+    optionalDependencies:
+      jiti: 1.21.6
     transitivePeerDependencies:
       - supports-color
 
@@ -7005,6 +7687,10 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
+  fdir@6.4.2(picomatch@4.0.2):
+    optionalDependencies:
+      picomatch: 4.0.2
+
   figures@6.1.0:
     dependencies:
       is-unicode-supported: 2.1.0
@@ -7168,6 +7854,10 @@ snapshots:
 
   graphemer@1.4.0: {}
 
+  gzip-size@6.0.0:
+    dependencies:
+      duplexer: 0.1.2
+
   has-flag@4.0.0: {}
 
   has-property-descriptors@1.0.2:
@@ -7237,6 +7927,18 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
+  importx@0.4.4:
+    dependencies:
+      bundle-require: 5.0.0(esbuild@0.21.5)
+      debug: 4.3.7
+      esbuild: 0.21.5
+      jiti: 2.0.0-beta.3
+      jiti-v1: jiti@1.21.6
+      pathe: 1.1.2
+      tsx: 4.19.2
+    transitivePeerDependencies:
+      - supports-color
+
   imurmurhash@0.1.4: {}
 
   indent-string@4.0.0: {}
@@ -7252,6 +7954,10 @@ snapshots:
 
   is-arrayish@0.2.1: {}
 
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
   is-builtin-module@3.2.1:
     dependencies:
       builtin-modules: 3.3.0
@@ -7338,6 +8044,10 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  jiti@1.21.6: {}
+
+  jiti@2.0.0-beta.3: {}
+
   js-beautify@1.15.1:
     dependencies:
       config-chain: 1.1.13
@@ -7469,6 +8179,8 @@ snapshots:
       rfdc: 1.4.1
       wrap-ansi: 9.0.0
 
+  load-tsconfig@0.2.5: {}
+
   local-pkg@0.5.1:
     dependencies:
       mlly: 1.7.3
@@ -7516,10 +8228,6 @@ snapshots:
 
   lru-cache@8.0.5: {}
 
-  lucide-vue-next@0.396.0(vue@3.5.13(typescript@5.4.5)):
-    dependencies:
-      vue: 3.5.13(typescript@5.4.5)
-
   lz-string@1.5.0: {}
 
   magic-string@0.30.14:
@@ -7636,10 +8344,6 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
 
-  mdn-data@2.0.28: {}
-
-  mdn-data@2.0.30: {}
-
   mdn-data@2.12.1: {}
 
   mdn-data@2.12.2: {}
@@ -7904,6 +8608,8 @@ snapshots:
   node-addon-api@7.1.1:
     optional: true
 
+  node-fetch-native@1.6.4: {}
+
   node-releases@2.0.18: {}
 
   nopt@7.2.1:
@@ -7951,6 +8657,12 @@ snapshots:
 
   object-assign@4.1.1: {}
 
+  ofetch@1.4.1:
+    dependencies:
+      destr: 2.0.3
+      node-fetch-native: 1.6.4
+      ufo: 1.5.4
+
   onetime@6.0.0:
     dependencies:
       mimic-fn: 4.0.0
@@ -8232,6 +8944,23 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  radix-vue@1.9.11(vue@3.5.13(typescript@5.4.5)):
+    dependencies:
+      '@floating-ui/dom': 1.6.12
+      '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.4.5))
+      '@internationalized/date': 3.6.0
+      '@internationalized/number': 3.6.0
+      '@tanstack/vue-virtual': 3.11.0(vue@3.5.13(typescript@5.4.5))
+      '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.4.5))
+      '@vueuse/shared': 10.11.1(vue@3.5.13(typescript@5.4.5))
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      fast-deep-equal: 3.1.3
+      nanoid: 5.0.9
+      vue: 3.5.13(typescript@5.4.5)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
@@ -8264,6 +8993,10 @@ snapshots:
       parse-json: 5.2.0
       type-fest: 0.6.0
 
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
   readdirp@4.0.2: {}
 
   recast@0.23.9:
@@ -8406,6 +9139,12 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  sirv@2.0.4:
+    dependencies:
+      '@polka/url': 1.0.0-next.28
+      mrmime: 2.0.0
+      totalist: 3.0.1
+
   sirv@3.0.0:
     dependencies:
       '@polka/url': 1.0.0-next.28
@@ -8620,16 +9359,6 @@ snapshots:
 
   svg-tags@1.0.0: {}
 
-  svgo@3.3.2:
-    dependencies:
-      '@trysound/sax': 0.2.0
-      commander: 7.2.0
-      css-select: 5.1.0
-      css-tree: 2.3.1
-      css-what: 6.1.0
-      csso: 5.0.5
-      picocolors: 1.1.1
-
   symbol-tree@3.2.4: {}
 
   synckit@0.6.2:
@@ -8649,6 +9378,8 @@ snapshots:
       string-width: 4.2.3
       strip-ansi: 6.0.1
 
+  tailwind-merge@2.5.5: {}
+
   tapable@2.2.1: {}
 
   text-table@0.2.0: {}
@@ -8659,6 +9390,11 @@ snapshots:
 
   tinyexec@0.3.1: {}
 
+  tinyglobby@0.2.10:
+    dependencies:
+      fdir: 6.4.2(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   tinypool@0.8.4: {}
 
   tinyrainbow@1.2.0: {}
@@ -8722,6 +9458,13 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsx@4.19.2:
+    dependencies:
+      esbuild: 0.23.1
+      get-tsconfig: 4.8.1
+    optionalDependencies:
+      fsevents: 2.3.3
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
@@ -8738,12 +9481,12 @@ snapshots:
 
   type-fest@4.30.0: {}
 
-  typescript-eslint@8.17.0(eslint@9.14.0)(typescript@5.4.5):
+  typescript-eslint@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0)(typescript@5.4.5))(eslint@9.14.0)(typescript@5.4.5)
-      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
-      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0)(typescript@5.4.5)
-      eslint: 9.14.0
+      '@typescript-eslint/eslint-plugin': 8.17.0(@typescript-eslint/parser@8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5))(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      '@typescript-eslint/parser': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      '@typescript-eslint/utils': 8.17.0(eslint@9.14.0(jiti@1.21.6))(typescript@5.4.5)
+      eslint: 9.14.0(jiti@1.21.6)
     optionalDependencies:
       typescript: 5.4.5
     transitivePeerDependencies:
@@ -8755,6 +9498,14 @@ snapshots:
 
   ufo@1.5.4: {}
 
+  unconfig@0.5.5:
+    dependencies:
+      '@antfu/utils': 0.7.10
+      defu: 6.1.4
+      importx: 0.4.4
+    transitivePeerDependencies:
+      - supports-color
+
   undici-types@6.19.8: {}
 
   undici-types@6.20.0: {}
@@ -8796,6 +9547,43 @@ snapshots:
 
   universalify@2.0.1: {}
 
+  unocss-preset-animations@1.1.0(@unocss/preset-wind@0.65.1)(unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))):
+    dependencies:
+      '@unocss/preset-wind': 0.65.1
+      unocss: 0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))
+
+  unocss-preset-shadcn@0.3.1(unocss-preset-animations@1.1.0(@unocss/preset-wind@0.65.1)(unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))))(unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))):
+    dependencies:
+      unocss: 0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))
+      unocss-preset-animations: 1.1.0(@unocss/preset-wind@0.65.1)(unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5)))
+
+  unocss@0.65.1(postcss@8.4.49)(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5)):
+    dependencies:
+      '@unocss/astro': 0.65.1(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))
+      '@unocss/cli': 0.65.1(rollup@4.28.0)
+      '@unocss/core': 0.65.1
+      '@unocss/postcss': 0.65.1(postcss@8.4.49)
+      '@unocss/preset-attributify': 0.65.1
+      '@unocss/preset-icons': 0.65.1
+      '@unocss/preset-mini': 0.65.1
+      '@unocss/preset-tagify': 0.65.1
+      '@unocss/preset-typography': 0.65.1
+      '@unocss/preset-uno': 0.65.1
+      '@unocss/preset-web-fonts': 0.65.1
+      '@unocss/preset-wind': 0.65.1
+      '@unocss/transformer-attributify-jsx': 0.65.1
+      '@unocss/transformer-compile-class': 0.65.1
+      '@unocss/transformer-directives': 0.65.1
+      '@unocss/transformer-variant-group': 0.65.1
+      '@unocss/vite': 0.65.1(rollup@4.28.0)(vite@5.4.11(@types/node@20.17.9)(sass@1.81.0))(vue@3.5.13(typescript@5.4.5))
+    optionalDependencies:
+      vite: 5.4.11(@types/node@20.17.9)(sass@1.81.0)
+    transitivePeerDependencies:
+      - postcss
+      - rollup
+      - supports-color
+      - vue
+
   unplugin@1.16.0:
     dependencies:
       acorn: 8.14.0
@@ -8929,11 +9717,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-svg-loader@5.1.0(vue@3.5.13(typescript@5.4.5)):
-    dependencies:
-      svgo: 3.3.2
-      vue: 3.5.13(typescript@5.4.5)
-
   vite@5.4.11(@types/node@20.17.9)(sass@1.81.0):
     dependencies:
       esbuild: 0.21.5
@@ -9063,10 +9846,10 @@ snapshots:
       vue: 3.5.13(typescript@5.4.5)
       vue-inbrowser-compiler-independent-utils: 4.71.1(vue@3.5.13(typescript@5.4.5))
 
-  vue-eslint-parser@9.4.3(eslint@9.14.0):
+  vue-eslint-parser@9.4.3(eslint@9.14.0(jiti@1.21.6)):
     dependencies:
       debug: 4.3.7
-      eslint: 9.14.0
+      eslint: 9.14.0(jiti@1.21.6)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
@@ -9076,6 +9859,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vue-flow-layout@0.1.1(vue@3.5.13(typescript@5.4.5)):
+    dependencies:
+      vue: 3.5.13(typescript@5.4.5)
+
   vue-i18n@9.14.2(vue@3.5.13(typescript@5.4.5)):
     dependencies:
       '@intlify/core-base': 9.14.2