diff --git a/apps/README.md b/apps/README.md
new file mode 100644
index 00000000..d3b3166f
--- /dev/null
+++ b/apps/README.md
@@ -0,0 +1,44 @@
+# Core
+
+> [!NOTE]
+> Нere are the main parts of our app
+
+## ✍️ Usage
+
+### Frontend
+
+```sh
+cd client
+```
+
+#### Dev
+
+```sh
+# Install dependencies
+pnpm i
+
+# Development
+pnpm run dev
+```
+
+#### UI Kit
+
+```sh
+pnpm run storybook
+```
+
+### Backend
+
+#### Dev
+
+```sh
+cd server
+```
+
+```sh
+# Install dependencies
+pnpm i
+
+# Development
+pnpm run start
+```
diff --git a/apps/client/.gitignore b/apps/client/.gitignore
new file mode 100644
index 00000000..70342655
--- /dev/null
+++ b/apps/client/.gitignore
@@ -0,0 +1,32 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+*storybook.log
\ No newline at end of file
diff --git a/apps/client/.storybook/-static/logo.png b/apps/client/.storybook/-static/logo.png
new file mode 100644
index 00000000..c3823631
Binary files /dev/null and b/apps/client/.storybook/-static/logo.png differ
diff --git a/apps/client/.storybook/main.ts b/apps/client/.storybook/main.ts
new file mode 100644
index 00000000..b833aaf7
--- /dev/null
+++ b/apps/client/.storybook/main.ts
@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/vue3-vite'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-themes',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+  viteFinal: async config => ({
+    ...config,
+    ...(await import('unocss/vite')).default,
+  }),
+  staticDirs: ['./-static'],
+}
+export default config
diff --git a/apps/client/.storybook/manager-head.html b/apps/client/.storybook/manager-head.html
new file mode 100644
index 00000000..fb396b0c
--- /dev/null
+++ b/apps/client/.storybook/manager-head.html
@@ -0,0 +1,5 @@
+<style>
+  .sidebar-header img {
+    max-width: 110px !important;
+  }
+</style>
diff --git a/apps/client/.storybook/manager.ts b/apps/client/.storybook/manager.ts
new file mode 100644
index 00000000..e3d2c70a
--- /dev/null
+++ b/apps/client/.storybook/manager.ts
@@ -0,0 +1,12 @@
+import { addons } from '@storybook/manager-api'
+import { themes } from '@storybook/theming'
+// @ts-ignore
+import logo from './-static/logo.png'
+
+addons.setConfig({
+  theme: {
+    ...themes.light,
+    brandImage: logo,
+    brandUrl: 'https://jenda.vercel.app/',
+  },
+})
diff --git a/apps/client/.storybook/preview.ts b/apps/client/.storybook/preview.ts
new file mode 100644
index 00000000..85d9eecd
--- /dev/null
+++ b/apps/client/.storybook/preview.ts
@@ -0,0 +1,52 @@
+import { withThemeByClassName } from '@storybook/addon-themes'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { themes } from '@storybook/theming'
+import { useColorMode } from '@vueuse/core'
+import type { Preview } from '@storybook/vue3'
+
+import 'virtual:uno.css'
+import '@unocss/reset/tailwind-compat.css'
+import '@/app/styles/primary/index.css'
+
+const preview: Preview = {
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
+  parameters: {
+    options: {
+      storySort: (a, b) =>
+        a.id === b.id
+          ? 0
+          : a.id.localeCompare(b.id, undefined, { numeric: true }),
+    },
+    layout: 'centered',
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'desktop',
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      theme: themes.light,
+    },
+    backgrounds: {
+      disable: true,
+    },
+  },
+}
+
+useColorMode({
+  initialValue: 'light',
+})
+
+export default preview
diff --git a/apps/client/LICENSE b/apps/client/LICENSE
new file mode 100644
index 00000000..d4a0c079
--- /dev/null
+++ b/apps/client/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Alex Peshkov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/apps/client/README.md b/apps/client/README.md
new file mode 100644
index 00000000..cd61ba0a
--- /dev/null
+++ b/apps/client/README.md
@@ -0,0 +1,4 @@
+# @jenda/client
+
+> [!WARNING]
+> 🚧 Client currently on dev mode rn
diff --git a/apps/client/components.json b/apps/client/components.json
new file mode 100644
index 00000000..2453e3fe
--- /dev/null
+++ b/apps/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",
+    "utils": "@/shared/lib/shadcn/utils"
+  }
+}
diff --git a/apps/client/env.d.ts b/apps/client/env.d.ts
new file mode 100644
index 00000000..dabd0deb
--- /dev/null
+++ b/apps/client/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
diff --git a/apps/client/eslint.config.js b/apps/client/eslint.config.js
new file mode 100644
index 00000000..8a44eac7
--- /dev/null
+++ b/apps/client/eslint.config.js
@@ -0,0 +1,116 @@
+import jendaEslintConfig from '@jenda/eslint-config'
+import vitest from '@vitest/eslint-plugin'
+import storybook from 'eslint-plugin-storybook'
+
+export default jendaEslintConfig(
+  {
+    vue: true,
+    typescript: true,
+    formatters: {
+      css: true,
+    },
+  },
+  {
+    files: ['**/*.vue'],
+    rules: {
+      'vue/multi-word-component-names': 'warn',
+      'vue/block-order': [
+        'error',
+        {
+          order: ['script', 'template', 'style'],
+        },
+      ],
+      'vue/component-name-in-template-casing': [
+        'error',
+        'PascalCase',
+        {
+          registeredComponentsOnly: false,
+        },
+      ],
+      'vue/html-self-closing': [
+        'error',
+        {
+          html: {
+            void: 'always',
+          },
+        },
+      ],
+      'vue/max-attributes-per-line': [
+        'error',
+        {
+          singleline: { max: 10 },
+          multiline: { max: 1 },
+        },
+      ],
+    },
+  },
+  {
+    files: ['src/pages/**/*.vue'],
+    rules: {
+      'vue/multi-word-component-names': 'off',
+    },
+  },
+  {
+    rules: {
+      'import/order': [
+        'error',
+        {
+          groups: [
+            'builtin',
+            ['external', 'internal'],
+            'parent',
+            'sibling',
+            'index',
+            'object',
+            'type',
+          ],
+          pathGroups: [
+            {
+              pattern: 'vue',
+              group: 'external',
+              position: 'before',
+            },
+          ],
+          pathGroupsExcludedImportTypes: ['type'],
+        },
+      ],
+      'perfectionist/sort-imports': 'off',
+    },
+  },
+  {
+    files: ['__tests__/*'],
+    plugins: {
+      vitest,
+    },
+    rules: {
+      ...vitest.configs.recommended.rules,
+      'vitest/expect-expect': 'off',
+      'vitest/valid-expect': 'error',
+    },
+    settings: {
+      vitest: {
+        typecheck: true,
+      },
+    },
+    languageOptions: {
+      globals: {
+        ...vitest.environments.env.globals,
+        definePage: 'readonly',
+      },
+    },
+  },
+  {
+    files: ['**/*.stories.*'],
+    plugins: {
+      storybook,
+    },
+    rules: {
+      ...storybook.configs['flat/recommended'].rules,
+    },
+  },
+  {
+    settings: {
+      'import/core-modules': ['vue-router/auto-routes'],
+    },
+  },
+)
diff --git a/apps/client/index.html b/apps/client/index.html
new file mode 100644
index 00000000..1cd4cb94
--- /dev/null
+++ b/apps/client/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no" />
+    <title>Jenda - cloud program for project and task management</title>
+    <meta name="description" content="Jenda is a cloud-based program for project and task management that helps you work individually to solve your own tasks or collaborate with a team to manage company projects." />
+    <meta name="keywords" content="Jenda, Cloud app, Task management, Board, Tasks, Collaboration, Project management, Productivity, Online boards, Workflow management, Teamwork, Task tracking, To-do lists, Agile, Kanban, Virtual boards, Remote work, Task planner, Task prioritization, Work organization, Project tracking"
+    />
+    <!-- open graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://jenda.vercel.app/" />
+    <meta property="og:title" content="Jenda - Cloud Program for Project and Task Management" />
+    <meta property="og:description" content="Jenda is a cloud-based program for project and task management that helps you work individually to solve your own tasks or collaborate with a team to manage company projects." />
+    <meta property="og:image" content="https://jenda.vercel.app/icons/kanban.png" />
+    <meta property="og:site_name" content="Jenda" />
+    <meta property="twitter:image" content="https://jenda.vercel.app/icons/kanban.png" />
+    <meta property="twitter:card" content="summary_large_image" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/client/package.json b/apps/client/package.json
new file mode 100644
index 00000000..e1806af9
--- /dev/null
+++ b/apps/client/package.json
@@ -0,0 +1,102 @@
+{
+  "name": "@jenda/core-client",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "build-only": "vite build",
+    "debug:build": "NODE_OPTIONS='--inspect-brk' pnpm run build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --fix",
+    "stylelint": "npx stylelint **/*.scss --fix",
+    "format": "prettier --write src/",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@formkit/auto-animate": "^0.8.2",
+    "@tanstack/vue-table": "8.20.5",
+    "@unhead/vue": "^1.11.15",
+    "@unocss/core": "^65.4.0",
+    "@unocss/reset": "^65.4.0",
+    "@vee-validate/zod": "^4.15.0",
+    "@vitest/eslint-plugin": "^1.1.7",
+    "@vueuse/core": "^12.4.0",
+    "@vueuse/integrations": "^12.4.0",
+    "axios": "^1.7.2",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "floating-vue": "^5.2.2",
+    "pinia": "^2.1.7",
+    "radix-vue": "^1.9.12",
+    "splitpanes": "^3.1.5",
+    "tailwind-merge": "^2.5.5",
+    "universal-cookie": "^6.1.3",
+    "unocss": "^65.4.0",
+    "unplugin-vue-router-extend": "0.1.15",
+    "vee-validate": "^4.15.0",
+    "vue": "^3.5.8",
+    "vue-data-ui": "^2.3.44",
+    "vue-i18n": "^11.0.1",
+    "vue-router": "^4.3.3",
+    "vue-sonner": "^1.2.1",
+    "vue-writer": "^2.0.2",
+    "vue3-marquee": "^4.2.2",
+    "vuedraggable": "^4.1.0",
+    "zod": "^3.24.0"
+  },
+  "devDependencies": {
+    "@iconify-json/hugeicons": "1.2.1",
+    "@iconify-json/lucide": "1.2.17",
+    "@iconify/utils": "2.2.1",
+    "@iconify/vue": "4.1.2",
+    "@mnenie/prettier": "^1.0.4",
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-themes": "^8.4.1",
+    "@storybook/addon-viewport": "8.4.6",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/manager-api": "8.4.6",
+    "@storybook/test": "^8.1.10",
+    "@storybook/theming": "8.4.6",
+    "@storybook/vue3": "^8.1.10",
+    "@storybook/vue3-vite": "^8.1.10",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^22.5.2",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vue/eslint-config-prettier": "^10.0.0",
+    "@vue/eslint-config-typescript": "^14.1.1",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.5.1",
+    "eslint": "^9.13.0",
+    "eslint-define-config": "^2.1.0",
+    "eslint-plugin-antfu": "^2.7.0",
+    "eslint-plugin-format": "0.1.3",
+    "eslint-plugin-storybook": "^0.10.2",
+    "eslint-plugin-vue": "^9.29.0",
+    "husky": "^9.0.11",
+    "jsdom": "^24.1.0",
+    "lint-staged": "^15.2.7",
+    "npm-run-all2": "^6.2.0",
+    "prettier": "^3.2.5",
+    "sonda": "0.7.0",
+    "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",
+    "unplugin-vue-router": "0.10.9",
+    "vite": "^5.3.1",
+    "vite-plugin-vue-devtools": "^7.7.0",
+    "vitest": "^1.6.0",
+    "vue-tsc": "^2.0.21"
+  }
+}
diff --git a/apps/client/public/dev/dev-card-dark.png b/apps/client/public/dev/dev-card-dark.png
new file mode 100644
index 00000000..f5292dc6
Binary files /dev/null and b/apps/client/public/dev/dev-card-dark.png differ
diff --git a/apps/client/public/dev/dev-card-section-dark.png b/apps/client/public/dev/dev-card-section-dark.png
new file mode 100644
index 00000000..2bf77344
Binary files /dev/null and b/apps/client/public/dev/dev-card-section-dark.png differ
diff --git a/apps/client/public/dev/dev-card-section.png b/apps/client/public/dev/dev-card-section.png
new file mode 100644
index 00000000..9469542d
Binary files /dev/null and b/apps/client/public/dev/dev-card-section.png differ
diff --git a/apps/client/public/dev/dev-card.png b/apps/client/public/dev/dev-card.png
new file mode 100644
index 00000000..4871754d
Binary files /dev/null and b/apps/client/public/dev/dev-card.png differ
diff --git a/apps/client/public/dev/dev-dark.png b/apps/client/public/dev/dev-dark.png
new file mode 100644
index 00000000..59b71128
Binary files /dev/null and b/apps/client/public/dev/dev-dark.png differ
diff --git a/apps/client/public/dev/dev.png b/apps/client/public/dev/dev.png
new file mode 100644
index 00000000..cf5d443b
Binary files /dev/null and b/apps/client/public/dev/dev.png differ
diff --git a/apps/client/public/favicon.ico b/apps/client/public/favicon.ico
new file mode 100644
index 00000000..b79451b5
Binary files /dev/null and b/apps/client/public/favicon.ico differ
diff --git a/apps/client/public/icons/arrow-back.svg b/apps/client/public/icons/arrow-back.svg
new file mode 100644
index 00000000..93ed7629
--- /dev/null
+++ b/apps/client/public/icons/arrow-back.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.294 9.69805C10.2008 9.60614 10.1268 9.49661 10.0763 9.37584C10.0258 9.25507 9.99976 9.12546 9.99976 8.99455C9.99976 8.86364 10.0258 8.73403 10.0763 8.61327C10.1268 8.4925 10.2008 8.38297 10.294 8.29105C10.4831 8.10449 10.738 7.99988 11.0035 7.99988C11.2691 7.99988 11.524 8.10449 11.713 8.29105L14.678 11.2311C14.7802 11.3324 14.8614 11.453 14.9167 11.5858C14.9721 11.7186 15.0006 11.8611 15.0006 12.0051C15.0006 12.149 14.9721 12.2915 14.9167 12.4243C14.8614 12.5572 14.7802 12.6777 14.678 12.7791L11.723 15.7091C11.534 15.8959 11.2789 16.0007 11.013 16.0007C10.7472 16.0007 10.4921 15.8959 10.303 15.7091C10.2098 15.6171 10.1358 15.5076 10.0853 15.3868C10.0348 15.2661 10.0088 15.1365 10.0088 15.0056C10.0088 14.8746 10.0348 14.745 10.0853 14.6243C10.1358 14.5035 10.2098 14.394 10.303 14.3021L12.621 12.0051L10.294 9.69805V9.69805Z" class="ghly4t0Xcm0PLQ"></path></svg>
\ No newline at end of file
diff --git a/apps/client/public/icons/arrows.svg b/apps/client/public/icons/arrows.svg
new file mode 100644
index 00000000..62b1a62a
--- /dev/null
+++ b/apps/client/public/icons/arrows.svg
@@ -0,0 +1,4 @@
+<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" fill="#3f3f46">
+  </path><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" fill="#71717a"></path>
+</svg>
\ No newline at end of file
diff --git a/apps/client/public/icons/blockquote-dark.png b/apps/client/public/icons/blockquote-dark.png
new file mode 100644
index 00000000..579ffcc2
Binary files /dev/null and b/apps/client/public/icons/blockquote-dark.png differ
diff --git a/apps/client/public/icons/blockquote-light.png b/apps/client/public/icons/blockquote-light.png
new file mode 100644
index 00000000..fdf567a8
Binary files /dev/null and b/apps/client/public/icons/blockquote-light.png differ
diff --git a/apps/client/public/icons/collaborative.svg b/apps/client/public/icons/collaborative.svg
new file mode 100644
index 00000000..cacc60ea
--- /dev/null
+++ b/apps/client/public/icons/collaborative.svg
@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 9C32 13.4183 28.4183 17 24 17C19.5817 17 16 13.4183 16 9C16 4.58172 19.5817 1 24 1C28.4183 1 32 4.58172 32 9Z" fill="black"/>
+<path d="M18 16C18 20.4183 14.4183 24 10 24C5.58172 24 2 20.4183 2 16C2 11.5817 5.58172 8 10 8C14.4183 8 18 11.5817 18 16Z" fill="black"/>
+<path d="M18 32C18 36.4183 14.4183 40 10 40C5.58172 40 2 36.4183 2 32C2 27.5817 5.58172 24 10 24C14.4183 24 18 27.5817 18 32Z" fill="black"/>
+<path d="M32 39C32 43.4183 28.4183 47 24 47C19.5817 47 16 43.4183 16 39C16 34.5817 19.5817 31 24 31C28.4183 31 32 34.5817 32 39Z" fill="black"/>
+<path d="M46 32C46 36.4183 42.4183 40 38 40C33.5817 40 30 36.4183 30 32C30 27.5817 33.5817 24 38 24C42.4183 24 46 27.5817 46 32Z" fill="black"/>
+<path d="M46 16C46 20.4183 42.4183 24 38 24C33.5817 24 30 20.4183 30 16C30 11.5817 33.5817 8 38 8C42.4183 8 46 11.5817 46 16Z" fill="black"/>
+</svg>
diff --git a/apps/client/public/icons/github-d.png b/apps/client/public/icons/github-d.png
new file mode 100644
index 00000000..4bb2db90
Binary files /dev/null and b/apps/client/public/icons/github-d.png differ
diff --git a/apps/client/public/icons/github.png b/apps/client/public/icons/github.png
new file mode 100644
index 00000000..9490ffc6
Binary files /dev/null and b/apps/client/public/icons/github.png differ
diff --git a/apps/client/public/icons/google.png b/apps/client/public/icons/google.png
new file mode 100644
index 00000000..6b7ea547
Binary files /dev/null and b/apps/client/public/icons/google.png differ
diff --git a/apps/client/public/icons/kanban-dark.png b/apps/client/public/icons/kanban-dark.png
new file mode 100644
index 00000000..9613e15c
Binary files /dev/null and b/apps/client/public/icons/kanban-dark.png differ
diff --git a/apps/client/public/icons/kanban.png b/apps/client/public/icons/kanban.png
new file mode 100644
index 00000000..a0b97755
Binary files /dev/null and b/apps/client/public/icons/kanban.png differ
diff --git a/apps/client/public/icons/telegram.webp b/apps/client/public/icons/telegram.webp
new file mode 100644
index 00000000..f6b2b7c0
Binary files /dev/null and b/apps/client/public/icons/telegram.webp differ
diff --git a/apps/client/src/App.vue b/apps/client/src/App.vue
new file mode 100644
index 00000000..c0d95e34
--- /dev/null
+++ b/apps/client/src/App.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDark } from '@vueuse/core'
+import { Toaster } from 'vue-sonner'
+import AppLayout from '@/core/layouts/AppLayout.vue'
+
+type ToasterTheme = 'dark' | 'light'
+
+const isDark = useDark()
+
+const toasterTheme = computed<ToasterTheme>(() => {
+  return isDark.value ? 'dark' : 'light'
+})
+</script>
+
+<template>
+  <AppLayout>
+    <RouterView v-slot="{ Component }">
+      <KeepAlive :include="['sign-in', 'sign-up']">
+        <component :is="Component" />
+      </KeepAlive>
+    </RouterView>
+  </AppLayout>
+  <Toaster :theme="toasterTheme" :expand="true" position="bottom-right" />
+</template>
diff --git a/apps/client/src/core/__tests__/FooterWelcome.spec.ts b/apps/client/src/core/__tests__/FooterWelcome.spec.ts
new file mode 100644
index 00000000..661908ef
--- /dev/null
+++ b/apps/client/src/core/__tests__/FooterWelcome.spec.ts
@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import FooterWelcome from '../components/footer/AppFooter.vue'
+import i18n from '@/shared/libs/i18n'
+
+describe('tests for FooterWelcome.vue', () => {
+  const wrapper = shallowMount(FooterWelcome, {
+    global: {
+      plugins: [i18n],
+
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'welcome.footer': 'footer',
+          }
+          return translations[key]
+        },
+      },
+    },
+  })
+
+  // snapshot is covered needs for i18n I think ;)
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
diff --git a/apps/client/src/core/__tests__/HeaderWelcome.spec.ts b/apps/client/src/core/__tests__/HeaderWelcome.spec.ts
new file mode 100644
index 00000000..73a43297
--- /dev/null
+++ b/apps/client/src/core/__tests__/HeaderWelcome.spec.ts
@@ -0,0 +1,71 @@
+import { type ComponentPublicInstance, nextTick } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import HeaderWelcome from '../components/headers/HeaderWelcome.vue'
+import type { headerLinks } from '../constants/header'
+import type { VueWrapper } from '@vue/test-utils'
+import i18n from '@/shared/libs/i18n'
+import { UiButton } from '@/shared/ui'
+
+type HeaderWelcomeInstance = ComponentPublicInstance<
+  {},
+  {},
+  {
+    isDark: boolean
+    width: number
+    headerLinks: typeof headerLinks
+  }
+>
+
+const mockRouter = {
+  push: vi.fn(),
+  beforeEach: vi.fn(),
+}
+
+describe('tests for HeaderWelcome.vue', () => {
+  const wrapper = shallowMount(HeaderWelcome, {
+    global: {
+      plugins: [i18n],
+
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'welcome.header.login': 'Log In',
+            'welcome.header.reg': 'Registration',
+          }
+          return translations[key]
+        },
+        tm: (key: string) => {
+          const translationsArr: Record<string, string[]> = {
+            'welcome.header.links': [],
+          }
+          return translationsArr[key]
+        },
+        $router: mockRouter,
+      },
+    },
+  }) as VueWrapper<HeaderWelcomeInstance>
+
+  it('should be render correctly', async () => {
+    wrapper.vm.width = 1600
+    await nextTick()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should redirect correctly to login', async () => {
+    const loginButton = wrapper.find('.btns').findAllComponents(UiButton).at(0)
+
+    await loginButton.trigger('click')
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: 'sign-in' })
+  })
+
+  it('should redirect correctly to registration', async () => {
+    const registrationButton = wrapper
+      .find('.btns')
+      .findAllComponents(UiButton)
+      .at(1)
+
+    await registrationButton.trigger('click')
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: 'sign-up' })
+  })
+})
diff --git a/apps/client/src/core/__tests__/UserMenu.spec.ts b/apps/client/src/core/__tests__/UserMenu.spec.ts
new file mode 100644
index 00000000..22e29df1
--- /dev/null
+++ b/apps/client/src/core/__tests__/UserMenu.spec.ts
@@ -0,0 +1,43 @@
+import { nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import UserMenu from '../components/headers/UserMenu.vue'
+import i18n from '@/shared/libs/i18n'
+import { UiDropdownMenuItem, UiDropdownMenuTrigger } from '@/shared/ui'
+
+const mockRouter = {
+  push: vi.fn(),
+  beforeEach: vi.fn(),
+}
+
+describe('tests for UserMenu.vue', () => {
+  const wrapper = mount(UserMenu, {
+    global: {
+      plugins: [i18n],
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'header.user.welcome': 'welcome',
+            'header.user.logout': 'logout',
+          }
+          return translations[key]
+        },
+        router: mockRouter,
+      },
+    },
+  })
+
+  it('should redirect correctly to welcome', async () => {
+    await wrapper.findComponent(UiDropdownMenuTrigger).trigger('click')
+    await nextTick()
+    const items = wrapper.findAllComponents(UiDropdownMenuItem)
+    expect(items.length).toBeGreaterThan(0)
+    const welcomeTrigger = items.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/apps/client/src/core/__tests__/WorkSpace.spec.ts b/apps/client/src/core/__tests__/WorkSpace.spec.ts
new file mode 100644
index 00000000..ea735536
--- /dev/null
+++ b/apps/client/src/core/__tests__/WorkSpace.spec.ts
@@ -0,0 +1,58 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { useRoute } from 'vue-router/auto'
+import WorkSpace from '../components/sidebar/WorkSpace.vue'
+import i18n from '@/shared/libs/i18n'
+
+vi.mock('vue-router/auto')
+
+vi.mock('@/shared/composables/expanded', () => ({
+  useExpandedContext: vi.fn(() => ({
+    isExpanded: {
+      value: true,
+    },
+  })),
+}))
+
+describe('tests for WorkSpace.vue', () => {
+  // @ts-expect-error mock types
+  useRoute.mockReturnValue({ name: 'boards' })
+  const wrapper = mount(WorkSpace, {
+    global: {
+      plugins: [i18n],
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'sidebar.boards': 'Boards',
+            'sidebar.section': 'Workspace',
+          }
+          return translations[key]
+        },
+      },
+      stubs: {
+        RouterLink: RouterLinkStub,
+      },
+      directives: {
+        tooltip() {},
+      },
+    },
+    props: {
+      links: [
+        {
+          id: 0,
+          name: 'boards',
+          pathName: 'boards',
+          icon: 'i-hugeicons-trello',
+        },
+      ],
+    },
+  })
+
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should be redirect with RouterLink correctly', () => {
+    expect(wrapper.findComponent(RouterLinkStub).props('to')).toEqual('/boards')
+  })
+})
diff --git a/apps/client/src/core/__tests__/__snapshots__/FooterWelcome.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
new file mode 100644
index 00000000..e27e7c1a
--- /dev/null
+++ b/apps/client/src/core/__tests__/__snapshots__/FooterWelcome.spec.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for FooterWelcome.vue > should be render correctly 1`] = `
+"<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/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
new file mode 100644
index 00000000..3692f472
--- /dev/null
+++ b/apps/client/src/core/__tests__/__snapshots__/HeaderWelcome.spec.ts.snap
@@ -0,0 +1,31 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for HeaderWelcome.vue > should be render correctly 1`] = `
+"<header data-v-8da6c939="" 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-8da6c939="" class="flex items-center justify-between">
+    <div data-v-8da6c939="" class="flex items-center gap-2 select-none">
+      <div data-v-8da6c939="" 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-8da6c939="" class="flex items-center gap-0.5"><a data-v-8da6c939="" href="https://github.com/mnenie/jenda" target="_blank" class="flex items-center gap-1 cursor-pointer mr-2"><img data-v-8da6c939="" src="/icons/kanban.png" class="w-22px h-22px">
+            <h3 data-v-8da6c939="" class="text-xl fw-500"> Jenda </h3>
+          </a>
+          <ui-button-stub data-v-8da6c939="" 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-8da6c939="" 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-8da6c939="" 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-8da6c939="" 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-8da6c939="" 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-8da6c939="" 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 data-v-8da6c939="" class="flex items-center gap-1">
+        <language-select-stub data-v-8da6c939=""></language-select-stub>
+        <div data-v-8da6c939="" class="w-1px h-3.5 bg-neutral-200 dark:bg-neutral-700"></div>
+        <theme-switcher-stub data-v-8da6c939=""></theme-switcher-stub>
+      </div>
+    </div>
+    <div data-v-8da6c939="" class="flex items-center gap-1.5 btns">
+      <ui-button-stub data-v-8da6c939="" class="bg-main bg-transparent" variant="ghost" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button" style="font-weight: 500;"></ui-button-stub>
+      <ui-button-stub data-v-8da6c939="" variant="default" size="default" loading="false" disabled="false" loadingplacement="leading" aschild="false" as="button"></ui-button-stub>
+    </div>
+  </section>
+</header>"
+`;
diff --git a/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap b/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap
new file mode 100644
index 00000000..35d141b0
--- /dev/null
+++ b/apps/client/src/core/__tests__/__snapshots__/WorkSpace.spec.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for WorkSpace.vue > should be render correctly 1`] = `
+"<div class="flex flex-col space-y-1.5 justify-start mb-20px"><a class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"><button class="btn btn-secondary h-34px 2xl:h-8 rounded-md w-full gap-2 shadow-none px-2 transition-all duration-200 ease !bg-neutral-200/40 dark:!bg-neutral-700/50" style="justify-content: space-between;">
+      <!--v-if-->
+      <div class="flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="!w-15px !h-15px !2xl:w-4 !2xl:h-4 text-neutral-900 dark:text-neutral-200" width="1em" height="1em" viewBox="0 0 16 16"></svg><span class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">Boards</span></div>
+      <!--v-if-->
+    </button></a></div>"
+`;
diff --git a/apps/client/src/core/components/footer/AppFooter.vue b/apps/client/src/core/components/footer/AppFooter.vue
new file mode 100644
index 00000000..8ad00b89
--- /dev/null
+++ b/apps/client/src/core/components/footer/AppFooter.vue
@@ -0,0 +1,19 @@
+<template>
+  <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>
diff --git a/apps/client/src/core/components/headers/BurgerMenu.vue b/apps/client/src/core/components/headers/BurgerMenu.vue
new file mode 100644
index 00000000..46779ebd
--- /dev/null
+++ b/apps/client/src/core/components/headers/BurgerMenu.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { items as _items, menuLinks as _links } from '../../constants/header'
+import type { MenuLink, SectionItem } from '../../types'
+import { useScroll } from '@/shared/composables/scroll'
+
+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">
+        <a
+          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"
+          :href="link.url"
+          target="_blank"
+        >
+          <p class="text-lg">
+            {{ link.title }}
+          </p>
+          <div
+            i-lucide-arrow-up-right
+            class="text-neutral-400 text-lg"
+          />
+        </a>
+        <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/apps/client/src/core/components/headers/HeaderMain.vue b/apps/client/src/core/components/headers/HeaderMain.vue
new file mode 100644
index 00000000..2785873f
--- /dev/null
+++ b/apps/client/src/core/components/headers/HeaderMain.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts" generic="T extends Board">
+import { computed, shallowReactive, toRef } from 'vue'
+import { Icon } from '@iconify/vue'
+import UserMenu from './UserMenu.vue'
+import type { Board } from '@/modules/boards/types'
+import type { User } from '@/modules/auth/types'
+import type { ProjectLink } from '@/shared/config/shared-types'
+import { links } from '@/shared/constants/links'
+import UserAvatar from '@/modules/auth/components/UserAvatar.vue'
+import { useLayoutPaths } from '@/shared/composables/layout-paths'
+import ShareDialog from '@/modules/common/components/dialogs/ShareDialog.vue'
+import HotkeysDialog from '@/modules/common/components/dialogs/HotkeysDialog.vue'
+import { ShimmerButton } from '@/shared/ui'
+
+const props = defineProps<{
+  projects: Board[]
+}>()
+
+const users = shallowReactive<User[]>([
+  {
+    _id: '0',
+    email: 'alex@gmail.com',
+    photoUrl: 'https://avatars.githubusercontent.com/u/121057011?v=4',
+  },
+  {
+    _id: '1',
+    email: 'airat@gmail.com',
+    photoUrl: 'https://avatars.githubusercontent.com/u/95149637?s=100&v=4',
+  },
+  {
+    _id: '2',
+    email: 'slava@gmail.com',
+    photoUrl: 'https://avatars.githubusercontent.com/u/83920644?v=4',
+  },
+  {
+    _id: '3',
+    email: 'egor@gmail.com',
+    photoUrl: 'https://avatars.githubusercontent.com/u/84976745?v=4',
+  },
+])
+
+const visibleUsers = computed(() => users.slice(0, 3))
+
+const remaining = computed(() => Math.max(users.length - 3, 0))
+
+const userPosition = computed(() => (index: number) => (visibleUsers.value.length - index) * 20)
+
+const _projects = toRef(props, 'projects') as unknown as ProjectLink[]
+const { active } = useLayoutPaths(links, _projects)
+</script>
+
+<template>
+  <header
+    class="sticky top-0 left-0 right-0 z-999 w-full flex items-center justify-between px-15px py-8px min-h-52px max-h-52px
+    border-b border-b-solid border-layout"
+  >
+    <div class="inline-flex items-center gap-3">
+      <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-project
+        :style="{ color: active.extendedAttrs.color, fontSize: '20px' }"
+      />
+      <p v-if="active" class="text-lg mt-1.5px !fw-600 dark:text-neutral-100">
+        {{ active.name }}
+      </p>
+    </div>
+    <div />
+    <div class="flex items-center h-full gap-2.5">
+      <div class="relative flex items-center">
+        <UserAvatar
+          v-if="remaining > 0"
+          :style="{
+            right: `0px`,
+            zIndex: `${visibleUsers.length + 1}`,
+          }"
+          class="!h-28px !w-28px absolute flex items-center justify-center text-sm"
+        >
+          +{{ remaining }}
+        </UserAvatar>
+        <template v-for="user, idx in visibleUsers" :key="user._id">
+          <UserAvatar
+            :style="{
+              right: `${userPosition(idx)}px`,
+              zIndex: `${idx + 1}`,
+            }"
+            class="!h-28px !w-28px absolute"
+          >
+            <img :src="user.photoUrl" width="100%" />
+          </UserAvatar>
+        </template>
+      </div>
+      <ShareDialog>
+        <ShimmerButton shimmer-size="2px">
+          <div i-hugeicons-link-04 class="text-neutral-900 dark:text-neutral-100 w-16px h-16px 2xl:(w-4 h-4)" />
+          <span
+            class="whitespace-pre-wrap text-center text-neutral-800 dark:text-neutral-100 text-sm fw500"
+          >
+            {{ $t('header.share') }}
+          </span>
+        </ShimmerButton>
+      </ShareDialog>
+      <div
+        v-tooltip="{ content: $t('header.navigator.messages'), trigger: ['hover'], distance: 7 }"
+        i-hugeicons-message-multiple-01
+        class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
+        style="margin-right: 2px"
+      />
+      <HotkeysDialog>
+        <div
+          v-tooltip="{ content: $t('header.navigator.question'), trigger: ['hover'], distance: 7 }"
+          i-hugeicons-book-open-01
+          class="text-base text-neutral-700 cursor-pointer outline-none dark:text-neutral-300"
+          style="margin-right: -1px;"
+        />
+      </HotkeysDialog>
+      <UserMenu />
+    </div>
+  </header>
+</template>
diff --git a/apps/client/src/core/components/headers/HeaderWelcome.vue b/apps/client/src/core/components/headers/HeaderWelcome.vue
new file mode 100644
index 00000000..9f17ea63
--- /dev/null
+++ b/apps/client/src/core/components/headers/HeaderWelcome.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDark, useWindowSize } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { headerLinks } from '../../constants/header'
+import BurgerMenu from './BurgerMenu.vue'
+import ThemeSwitcher from './system/ThemeSwitcher.vue'
+import LanguageSelect from './system/LanguageSelect.vue'
+import type { HeaderNavLink } from '../../types'
+import { useScroll } from '@/shared/composables/scroll'
+import { UiButton } from '@/shared/ui'
+
+const isDark = useDark()
+
+const { tm, t } = useI18n()
+
+const iconUrl = computed(() => {
+  return isDark.value ? '/icons/kanban-dark.png' : '/icons/kanban.png'
+})
+
+const links = computed(() => {
+  const localeArr = tm('welcome.header.links') as HeaderNavLink[]
+  return headerLinks.map((link, index) => ({
+    ...link,
+    name: localeArr[index],
+  }))
+})
+const { scrollToEl } = useScroll(links.value.map(link => link.pagePrefix))
+const { width } = useWindowSize()
+</script>
+
+<template>
+  <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="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">
+            <a
+              href="https://github.com/mnenie/jenda"
+              target="_blank"
+              class="flex items-center gap-1 cursor-pointer mr-2"
+            >
+              <img
+                :src="iconUrl"
+                class="w-22px h-22px"
+              />
+              <h3 class="text-xl fw-500">
+                Jenda
+              </h3>
+            </a>
+            <UiButton
+              v-for="link in links"
+              :key="link.id"
+              variant="ghost"
+              size="sm"
+              class="text-neutral-500 fw500 hover:text-neutral-700 dark:text-neutral-400"
+              @click="scrollToEl(link.pagePrefix)"
+            >
+              {{ link.name }}
+            </UiButton>
+          </div>
+        </div>
+        <a
+          v-else
+          href="https://github.com/mnenie/jenda"
+          target="_blank"
+          class="flex items-center gap-1 cursor-pointer mr-2"
+        >
+          <img
+            :src="iconUrl"
+            class="w-22px h-22px"
+          />
+          <h3 class="text-xl fw500">
+            Jenda
+          </h3>
+        </a>
+        <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="flex items-center gap-1.5 btns">
+        <UiButton
+          variant="ghost"
+          class="bg-main bg-transparent"
+          style="font-weight: 500"
+          @click="$router.push({ name: 'sign-in' })"
+        >
+          {{ t('welcome.header.login') }}
+        </UiButton>
+        <UiButton @click="$router.push({ name: 'sign-up' })">
+          {{ t('welcome.header.reg') }}
+        </UiButton>
+      </div>
+      <BurgerMenu v-else />
+    </section>
+  </header>
+</template>
+
+<style scoped>
+.box {
+  box-shadow:
+    0 12px 40px 0 rgba(0, 0, 0, 0.06),
+    0 1px 0 0 rgba(0, 0, 0, 0.04);
+}
+</style>
diff --git a/apps/client/src/core/components/headers/UserMenu.vue b/apps/client/src/core/components/headers/UserMenu.vue
new file mode 100644
index 00000000..be3a5d4c
--- /dev/null
+++ b/apps/client/src/core/components/headers/UserMenu.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useMagicKeys } from '@vueuse/core'
+import { useRouter } from 'vue-router/auto'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuContent,
+  UiDropdownMenuGroup,
+  UiDropdownMenuItem,
+  UiDropdownMenuLabel,
+  UiDropdownMenuSeparator,
+  UiDropdownMenuShortcut,
+  UiDropdownMenuTrigger,
+} from '@/shared/ui'
+
+const router = useRouter()
+
+const { shift_p, ctrl_x, meta_x } = useMagicKeys()
+
+watch(shift_p, () => {
+  router.push({ name: 'welcome' })
+})
+
+watch([meta_x, ctrl_x], () => {
+  router.push({ name: 'sign-in' })
+})
+</script>
+
+<template>
+  <UiDropdownMenu direction="right">
+    <UiDropdownMenuTrigger as-child class="flex items-center justify-center h-16px">
+      <div class="flex items-center justify-center h-16px">
+        <div
+          i-lucide-ellipsis-vertical
+          class="cursor-pointer text-base text-neutral-500 dark:text-neutral-400"
+        />
+      </div>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent align="end" class="w-[200px] mt-6px">
+      <UiDropdownMenuLabel class="text-sm">
+        test@gmail.com
+      </UiDropdownMenuLabel>
+      <UiDropdownMenuSeparator />
+      <UiDropdownMenuGroup>
+        <UiDropdownMenuItem @click="router.push({ name: 'welcome' })">
+          <span class="2xl:text-13px text-sm font-medium">{{ $t('header.user.welcome') }}</span>
+          <UiDropdownMenuShortcut>⇧P</UiDropdownMenuShortcut>
+        </UiDropdownMenuItem>
+        <UiDropdownMenuItem>
+          <span class="2xl:text-13px text-sm font-medium text-red-500">{{ $t('header.user.logout') }}</span>
+          <UiDropdownMenuShortcut>⌘X</UiDropdownMenuShortcut>
+        </UiDropdownMenuItem>
+      </UiDropdownMenuGroup>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>
diff --git a/apps/client/src/core/components/headers/system/LanguageSelect.vue b/apps/client/src/core/components/headers/system/LanguageSelect.vue
new file mode 100644
index 00000000..2eb4da0d
--- /dev/null
+++ b/apps/client/src/core/components/headers/system/LanguageSelect.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { useLanguage } from '@/shared/composables/language'
+import { cn } from '@/shared/libs/shadcn/utils'
+import {
+  buttonVariants,
+  UiButton,
+  UiSelect,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectTrigger,
+} from '@/shared/ui'
+
+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/apps/client/src/core/components/headers/system/ThemeSwitcher.vue b/apps/client/src/core/components/headers/system/ThemeSwitcher.vue
new file mode 100644
index 00000000..bc37020e
--- /dev/null
+++ b/apps/client/src/core/components/headers/system/ThemeSwitcher.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import { UiButton } from '@/shared/ui'
+
+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/apps/client/src/core/components/sidebar/AppSidebar.vue b/apps/client/src/core/components/sidebar/AppSidebar.vue
new file mode 100644
index 00000000..e96080a0
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/AppSidebar.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import InfoMenu from './InfoMenu.vue'
+import IntegrationItems from './IntegrationItems.vue'
+import ProjectsList from './ProjectsList.vue'
+import WorkSpace from './WorkSpace.vue'
+import WorkspaceChooser from './WorkSpaceChooser.vue'
+import PlanCard from './plan/PlanCard.vue'
+import type { Board } from '@/modules/boards/types'
+import { links } from '@/shared/constants/links'
+import SearchBox from '@/modules/search/components/SearchBox.vue'
+import { useExpandedContext } from '@/shared/composables/expanded'
+
+defineProps<{
+  boards: Board[]
+}>()
+
+const { isExpanded } = useExpandedContext()
+
+const debounced = refDebounced(isExpanded, 20)
+
+const isShowPlan = computed((): boolean => {
+  return isExpanded.value ? debounced.value : false
+})
+
+const paddingExpanded = computed(() => {
+  return isExpanded.value ? '10px' : '0px 10px 10px 10px'
+})
+</script>
+
+<template>
+  <div class="relative w-full flex flex-col h-full bg-sidebar select-none border-r border-r-solid border-layout">
+    <WorkspaceChooser />
+    <div
+      class="flex flex-col justify-between h-full mt-0.5"
+      :style="{ padding: paddingExpanded }"
+    >
+      <div>
+        <SearchBox :boards />
+        <WorkSpace :links />
+        <IntegrationItems />
+        <ProjectsList :boards />
+      </div>
+      <div>
+        <InfoMenu :is-show-plan />
+        <PlanCard :is-show-plan />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/core/components/sidebar/InfoMenu.vue b/apps/client/src/core/components/sidebar/InfoMenu.vue
new file mode 100644
index 00000000..0a5e322c
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/InfoMenu.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { createReusableTemplate } from '@vueuse/core'
+import {
+  UiBadge,
+  UiButton,
+  UiDropdownMenu,
+  UiDropdownMenuContent,
+  UiDropdownMenuGroup,
+  UiDropdownMenuItem,
+  UiDropdownMenuTrigger,
+} from '@/shared/ui'
+import HotkeysDialog from '@/modules/common/components/dialogs/HotkeysDialog.vue'
+import { useExpandedContext } from '@/shared/composables/expanded'
+
+defineProps<{
+  isShowPlan?: boolean
+}>()
+
+const { isExpanded } = useExpandedContext()
+
+const modalOpen = ref(false)
+
+const [DifineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DifineTemplate v-slot="{ title, icon }">
+    <UiDropdownMenuItem>
+      <span class="text-sm" :class="icon" />
+      <span class="2xl:text-13px text-sm font-medium">{{ title }}</span>
+    </UiDropdownMenuItem>
+  </DifineTemplate>
+  <UiDropdownMenu direction="right">
+    <UiDropdownMenuTrigger as-child>
+      <UiButton
+        v-tooltip.right="{
+          content: $t(`sidebar.help.title`),
+          triggers: ['hover'],
+          disabled: isExpanded,
+        }"
+        variant="ghost"
+        size="sm"
+        class="w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease justify-between mb-1"
+        :class="[isExpanded ? 'justify-between' : 'justify-center p-0']"
+      >
+        <div class="flex items-center gap-2">
+          <div i-hugeicons-mortarboard-02 class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-300" />
+          <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">
+            {{ $t('sidebar.help.title') }}
+          </span>
+        </div>
+        <UiBadge v-if="isShowPlan" variant="soft" class="w-10 px-1">
+          <div class="flex items-center gap-0.5">
+            <div i-lucide-stars />
+            <span class="!text-10px !fw500">1/3</span>
+          </div>
+        </UiBadge>
+      </UiButton>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent align="center" side="right" class="w-102%">
+      <UiDropdownMenuGroup>
+        <ReuseTemplate
+          :title="$t('sidebar.help.items', 0)"
+          icon="i-hugeicons-agreement-01"
+        />
+        <ReuseTemplate
+          :title="$t('sidebar.help.items', 1)"
+          icon="i-hugeicons-book-open-01"
+          @click="modalOpen = true"
+        />
+        <ReuseTemplate
+          :title="$t('sidebar.help.items', 2)"
+          icon="i-hugeicons-link-forward"
+        />
+      </UiDropdownMenuGroup>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+  <HotkeysDialog v-model:open="modalOpen" />
+</template>
diff --git a/apps/client/src/core/components/sidebar/IntegrationItems.vue b/apps/client/src/core/components/sidebar/IntegrationItems.vue
new file mode 100644
index 00000000..2a2b67a9
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/IntegrationItems.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js'
+import type { IntegrationItem } from '../../types'
+import { redirect } from '@/shared/helpers/redirectBlank'
+import { UiBadge, UiButton } from '@/shared/ui'
+import { useExpandedContext } from '@/shared/composables/expanded'
+
+const items = [
+  { name: 'GitLab', icon: 'devicon:gitlab', link: 'https://gitlab.com/' },
+  { name: 'Notion', icon: 'devicon:notion', link: 'https://notion.so/' },
+  { name: 'Yandex Kassa', icon: 'brandico:yandex', link: 'https://yookassa.ru/' },
+] satisfies IntegrationItem[]
+
+const { isExpanded } = useExpandedContext()
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full pt-0 pb-3"
+    :class="[isExpanded ? 'px-2' : 'px-1']"
+  >
+    <p
+      class="text-neutral-500 dark:text-neutral-400 text-sm 2xl:text-xs capitalize text-ellipsis
+        whitespace-nowrap overflow-hidden"
+    >
+      {{ $t('sidebar.integrations') }}
+    </p>
+  </div>
+  <div class="flex flex-col gap-5px justify-start mb-20px">
+    <UiButton
+      v-for="{ name, icon, link }, idx in items"
+      :key="idx"
+      variant="ghost"
+      size="sm"
+      :disabled="name === 'Notion'"
+      class="w-full gap-2 shadow-none py-0 px-2 transition-all duration-200 ease"
+      :class="[isExpanded ? 'justify-between' : 'justify-center']"
+      :style="{ padding: !isExpanded ? '0px' : '' }"
+      @click="redirect(link)"
+    >
+      <div class="flex items-center gap-2">
+        <Icon
+          :inline="true"
+          :icon="icon"
+          class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-800 dark:text-neutral-200"
+          :class="[idx === 2 && '!w-3.6 !h-3.6 !text-#fc4714']"
+        />
+        <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ name }}</span>
+      </div>
+      <UiBadge v-if="name === 'Notion' && isExpanded" variant="outline" class="px-1 py-0 text-11px shadow-none">
+        {{ $t('sidebar.soon') }}
+      </UiBadge>
+    </UiButton>
+  </div>
+</template>
diff --git a/apps/client/src/core/components/sidebar/ProjectsList.vue b/apps/client/src/core/components/sidebar/ProjectsList.vue
new file mode 100644
index 00000000..9ab89442
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/ProjectsList.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router/auto'
+import type { Board } from '@/modules/boards/types'
+import { useExpandedContext } from '@/shared/composables/expanded'
+import { UiButton } from '@/shared/ui'
+
+const props = defineProps<{
+  boards: Board[]
+}>()
+
+const showList = ref(true)
+const showPlusIcon = ref(false)
+
+const route = useRoute('board-id')
+
+const _projects = computed(() => {
+  return props.boards.map(proj => ({
+    ...proj,
+    isActive: proj._id === route.params.id && route.params.id !== undefined,
+  }))
+})
+
+const { isExpanded } = useExpandedContext()
+
+const contentPosition = computed(() => {
+  return isExpanded.value ? 'flex-start' : 'center'
+})
+
+function changeShowList() {
+  showList.value = !showList.value
+}
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full pt-0 pb-3"
+    :class="[isExpanded ? 'px-2' : 'px-1']"
+    @mouseover="showPlusIcon = true"
+    @mouseleave="showPlusIcon = false"
+  >
+    <div class="flex items-center gap-1.5 w-full">
+      <div
+        v-show="isExpanded"
+        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-neutral-500 dark:text-neutral-400 text-sm 2xl:text-xs capitalize text-ellipsis whitespace-nowrap overflow-hidden"
+      >
+        {{ $t('sidebar.projects') }}
+      </p>
+    </div>
+    <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="flex flex-col gap-5px justify-start mb-30px"
+  >
+    <RouterLink
+      v-for="project in _projects"
+      :key="project._id"
+      v-tooltip.right="{
+        content: project.name,
+        triggers: ['hover'],
+        disabled: isExpanded,
+      }"
+      :to="`/boards/${project._id}`"
+      class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"
+    >
+      <UiButton
+        :variant="project.isActive ? 'secondary' : 'ghost'"
+        size="sm"
+        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 }"
+      >
+        <div
+          i-jenda-project
+          class="w-16px h-16px rounded flex justify-center items-center"
+          :style="{ color: project.color }"
+        />
+        <span
+          v-show="isExpanded"
+          class="text-13px 2xl: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>
diff --git a/apps/client/src/core/components/sidebar/WorkSpace.vue b/apps/client/src/core/components/sidebar/WorkSpace.vue
new file mode 100644
index 00000000..4f73f839
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/WorkSpace.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import { useRoute } from 'vue-router/auto'
+import type { WorkspaceLink } from '@/shared/config/shared-types'
+import { UiBadge, UiButton } from '@/shared/ui'
+import { useExpandedContext } from '@/shared/composables/expanded'
+
+const props = defineProps<{
+  links: WorkspaceLink[]
+}>()
+
+const route = useRoute()
+
+function isCurrentPath(link: WorkspaceLink): boolean {
+  if (route.name === 'boards') {
+    return link.pathName === 'boards'
+  }
+  if (route.name === 'community') {
+    return link.pathName === 'templates'
+  }
+  return route.path === `/${link.pathName}`
+}
+
+const pathName = computed(() => {
+  return props.links.map(link => ({
+    ...link,
+    isActive: isCurrentPath(link),
+  }))
+})
+
+const { isExpanded } = useExpandedContext()
+
+const contentPosition = computed(() => {
+  return isExpanded.value ? 'space-between' : 'center'
+})
+</script>
+
+<template>
+  <div class="flex flex-col space-y-1.5 justify-start mb-20px">
+    <RouterLink
+      v-for="link in pathName"
+      :key="link.id"
+      v-tooltip.right="{
+        content: $t(`sidebar.${link.name}`),
+        triggers: ['hover'],
+        disabled: isExpanded,
+      }"
+      :to="`/${link.pathName}`"
+      class="flex items-center gap-1.5 cursor-pointer text-neutral-900 justify-start w-full"
+    >
+      <UiButton
+        :variant="link.isActive ? 'secondary' : 'ghost'"
+        size="sm"
+        class="w-full gap-2 shadow-none 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 }"
+      >
+        <div class="flex items-center gap-2">
+          <Icon :icon="link.icon" class="!w-15px !h-15px 2xl:(!w-4 !h-4) text-neutral-900 dark:text-neutral-200" />
+          <span v-show="isExpanded" class="text-13px 2xl:text-sm !fw500 text-neutral-900 dark:text-neutral-100">{{ $t(`sidebar.${link.name}`) }}</span>
+        </div>
+        <UiBadge v-if="link.id === 1 && isExpanded" variant="solid" class="px-5px py-0 text-xs rounded-md">
+          <span class="text-[10px] text-white">3</span>
+        </UiBadge>
+      </UiButton>
+    </RouterLink>
+  </div>
+</template>
diff --git a/apps/client/src/core/components/sidebar/WorkSpaceChooser.vue b/apps/client/src/core/components/sidebar/WorkSpaceChooser.vue
new file mode 100644
index 00000000..878c5b0a
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/WorkSpaceChooser.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useWorkspaceStore } from '@/modules/workspace/stores/workspace'
+import WorkspaceMenu from '@/modules/workspace/components/WorkspaceMenu.vue'
+import { useExpandedContext } from '@/shared/composables/expanded'
+import { UiBadge } from '@/shared/ui'
+
+const { isExpanded, onToggleArea } = useExpandedContext()
+
+const workspaceStore = useWorkspaceStore()
+const { workspace } = storeToRefs(workspaceStore)
+</script>
+
+<template>
+  <div
+    class="w-full flex items-center"
+    :class="[isExpanded ? ' pl-10px px-14px py-8px min-h-52px max-h-52px border-b border-b-solid border-layout' : 'pt-16px pb-26px']"
+  >
+    <div
+      class="w-full flex items-center"
+      :style="{ justifyContent: isExpanded ? 'space-between' : 'center' }"
+    >
+      <div
+        v-show="isExpanded"
+        class="flex items-center gap-px"
+      >
+        <WorkspaceMenu>
+          <div
+            class="w-36px h-36px h-full 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>
+        </WorkspaceMenu>
+        <div class="flex flex-col mt-1">
+          <div class="flex items-center gap-1 whitespace-nowrap">
+            <UiBadge variant="outline" class="px-1 py-1 h-12px text-8px rounded">
+              {{ workspace.plan }}
+            </UiBadge>
+            <p class="text-xs -mt-px text-neutral-700 dark:text-neutral-300">
+              {{ $t('sidebar.section') }}
+            </p>
+          </div>
+          <p class="text-lg 2xl:text-base !fw600 dark:text-neutral-100">
+            {{ workspace.name }}
+          </p>
+        </div>
+      </div>
+      <div
+        v-if="isExpanded"
+        i-hugeicons-sidebar-left-01
+        class="cursor-pointer text-19px 2xl:text-xl text-neutral-700 dark:text-neutral-300"
+        @click="onToggleArea"
+      />
+      <div
+        v-else
+        i-hugeicons-sidebar-right-01
+        class="cursor-pointer text-19px 2xl:text-xl text-neutral-800 dark:text-neutral-200"
+        @click="onToggleArea"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/core/components/sidebar/plan/PlanCard.vue b/apps/client/src/core/components/sidebar/plan/PlanCard.vue
new file mode 100644
index 00000000..c7be99fc
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/plan/PlanCard.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import SubscribePlan from './SubscribePlan.vue'
+import { useExpandedContext } from '@/shared/composables/expanded'
+import { UiBadge } from '@/shared/ui'
+
+defineProps<{
+  isShowPlan: boolean
+}>()
+
+const { isExpanded } = useExpandedContext()
+</script>
+
+<template>
+  <div
+    v-if="isShowPlan"
+    class="relative p-1 px-1.5 bg-white border border-solid border-neutral-200 rounded-lg shadow-sm
+    dark:bg-neutral-700/10 dark:border-neutral-800"
+  >
+    <div class="flex gap-1.5 w-full justify-between items-center">
+      <div class="flex items-center gap-1">
+        <UiBadge variant="soft" class="rounded px-1.5 py-px text-xs">
+          5
+        </UiBadge>
+        <span class="text-13px 2xl:text-sm text-neutral-800 dark:text-neutral-300 whitespace-nowrap"> {{ $t('sidebar.plan.description') }}</span>
+      </div>
+      <SubscribePlan />
+    </div>
+  </div>
+  <div
+    v-else
+    class="relative p-4.5px 2xl:pt-10px 2xl:pb-4px px-1 rounded-lg"
+    :class="!isExpanded && 'cursor-pointer'"
+  >
+    <span
+      v-tooltip="{
+        content: $t('sidebar.plan.tooltip'),
+        triggers: ['hover'],
+        placement: 'right',
+      }"
+      class="absolute top--2px 2xl:top-1px right--1px text-blue-500 cursor-help"
+    >
+      *
+    </span>
+    <div class="flex gap-1.5 w-full justify-center items-center">
+      <div class="flex flex-col items-center h-7">
+        <UiBadge variant="outline" class="rounded px-1 py-1 text-10px bg-white dark:bg-neutral-700/10">
+          5/10
+        </UiBadge>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue b/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue
new file mode 100644
index 00000000..46468d66
--- /dev/null
+++ b/apps/client/src/core/components/sidebar/plan/SubscribePlan.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { UiButton } from '@/shared/ui'
+</script>
+
+<template>
+  <UiButton
+    size="sm"
+    variant="secondary"
+    class="shadow-none text-sm 2xl:text-xs px-2 py-px h-7 dark:(bg-neutral-700/30 hover:bg-neutral-700/20)"
+  >
+    {{ $t('sidebar.plan.btn') }}
+  </UiButton>
+</template>
diff --git a/apps/client/src/core/constants/header.ts b/apps/client/src/core/constants/header.ts
new file mode 100644
index 00000000..0499f62f
--- /dev/null
+++ b/apps/client/src/core/constants/header.ts
@@ -0,0 +1,42 @@
+import type { HeaderNavLink, MenuLink, SectionItem } from '../types'
+
+export const headerLinks: HeaderNavLink[] = [
+  { id: 0, name: 'About', pagePrefix: 'about' },
+  { id: 1, name: 'Kanban', pagePrefix: 'kanban' },
+  { id: 2, name: 'Collaborative', pagePrefix: 'collaborative' },
+  { id: 3, name: 'Activity', pagePrefix: 'activity' },
+  { 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/apps/client/src/core/constants/layouts.ts b/apps/client/src/core/constants/layouts.ts
new file mode 100644
index 00000000..a34c9c8a
--- /dev/null
+++ b/apps/client/src/core/constants/layouts.ts
@@ -0,0 +1,8 @@
+import type { LayoutsEnum } from '@/shared/constants/layouts'
+
+export const LayoutToFileMap: Record<LayoutsEnum, string> = {
+  default: 'DefaultLayout.vue',
+  auth: 'AuthLayout.vue',
+  welcome: 'WelcomeLayout.vue',
+  empty: 'EmptyLayout.vue',
+}
diff --git a/apps/client/src/core/injections/index.ts b/apps/client/src/core/injections/index.ts
new file mode 100644
index 00000000..cda42e23
--- /dev/null
+++ b/apps/client/src/core/injections/index.ts
@@ -0,0 +1 @@
+// with seo
diff --git a/apps/client/src/core/layouts/AppLayout.vue b/apps/client/src/core/layouts/AppLayout.vue
new file mode 100644
index 00000000..4cbbcbfa
--- /dev/null
+++ b/apps/client/src/core/layouts/AppLayout.vue
@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <component :is="$route.meta.layoutComponent">
+      <slot />
+    </component>
+  </div>
+  <!-- <NotAvailable v-else /> -->
+</template>
diff --git a/apps/client/src/core/layouts/AuthLayout.vue b/apps/client/src/core/layouts/AuthLayout.vue
new file mode 100644
index 00000000..ec8e7e3b
--- /dev/null
+++ b/apps/client/src/core/layouts/AuthLayout.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import BgPanel from '@/modules/auth/components/common/BgPanel.vue'
+import LogoFile from '@/modules/auth/components/common/LogoFile.vue'
+</script>
+
+<template>
+  <div class="h-dvh w-full flex relative">
+    <LogoFile />
+    <slot />
+    <BgPanel />
+  </div>
+</template>
diff --git a/apps/client/src/core/layouts/DefaultLayout.vue b/apps/client/src/core/layouts/DefaultLayout.vue
new file mode 100644
index 00000000..4b6d6c91
--- /dev/null
+++ b/apps/client/src/core/layouts/DefaultLayout.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+// @ts-expect-error missing type
+import { Pane, Splitpanes } from 'splitpanes'
+import AppSidebar from '../components/sidebar/AppSidebar.vue'
+import HeaderMain from '../components/headers/HeaderMain.vue'
+import type { Board } from '@/modules/boards/types'
+import { provideExpandedContext } from '@/shared/composables/expanded'
+
+import 'splitpanes/dist/splitpanes.css'
+
+const isExpanded = useLocalStorage('isExpanded', true)
+const transitionFl = ref<boolean>(false)
+
+const sidebarSize = computed(() => isExpanded.value ? '286' : '58')
+
+function onToggleArea() {
+  isExpanded.value = !isExpanded.value
+  transitionFl.value = true
+}
+
+provideExpandedContext({
+  isExpanded,
+  onToggleArea,
+})
+
+// mock -> after data from backend
+// @ts-ignore
+const boards = ref<Board[]>([
+  { _id: '0', name: 'Startup Program', users: [], status: 'active', color: '#a1612a', labels: [] },
+  { _id: '1', name: 'Integrations', users: [], status: 'active', color: '#45ad2d', labels: [] },
+])
+</script>
+
+<template>
+  <Splitpanes class="flex flex-row flex-1 overflow-hidden !w-full !h-dvh">
+    <Pane
+      style="flex: none"
+      :style="{ transition: transitionFl && 'all .2s ease-out', width: `${sidebarSize}px` }"
+    >
+      <AppSidebar :boards />
+    </Pane>
+    <Pane style="width: 100%;">
+      <div class="flex flex-col h-full overflow-hidden w-full">
+        <HeaderMain :projects="boards" />
+        <div
+          class="relative h-full w-full !bg-main"
+          :style="{ padding: $route.name !== 'board-id' ? '12px 20px 12px 20px' : '0' }"
+        >
+          <slot />
+        </div>
+      </div>
+    </Pane>
+  </Splitpanes>
+</template>
diff --git a/apps/client/src/core/layouts/EmptyLayout.vue b/apps/client/src/core/layouts/EmptyLayout.vue
new file mode 100644
index 00000000..14351cce
--- /dev/null
+++ b/apps/client/src/core/layouts/EmptyLayout.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="h-dvh w-full">
+    <slot />
+  </div>
+</template>
diff --git a/apps/client/src/core/layouts/WelcomeLayout.vue b/apps/client/src/core/layouts/WelcomeLayout.vue
new file mode 100644
index 00000000..3724b8b9
--- /dev/null
+++ b/apps/client/src/core/layouts/WelcomeLayout.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useColorMode } from '@vueuse/core'
+import HeaderWelcome from '../components/headers/HeaderWelcome.vue'
+import AppFooter from '../components/footer/AppFooter.vue'
+
+useColorMode({
+  initialValue: 'light',
+})
+</script>
+
+<template>
+  <div class="relative min-h-dvh w-full flex flex-col">
+    <HeaderWelcome />
+    <div class="flex-1">
+      <slot />
+    </div>
+    <div class="flex justify-center">
+      <AppFooter />
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/core/pages/[...path].vue b/apps/client/src/core/pages/[...path].vue
new file mode 100644
index 00000000..cca43902
--- /dev/null
+++ b/apps/client/src/core/pages/[...path].vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import { useWindowSize } from '@vueuse/core'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+import { UiButton } from '@/shared/ui'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.empty,
+    requiresAuth: false,
+  },
+  name: 'not-found',
+})
+
+useHead({
+  title: '404 | Not Found :/',
+})
+
+const { width } = useWindowSize()
+</script>
+
+<template>
+  <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('/')">
+        {{ $t('not_found.btn') }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/core/pages/index.vue b/apps/client/src/core/pages/index.vue
new file mode 100644
index 00000000..353d0a1c
--- /dev/null
+++ b/apps/client/src/core/pages/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+import AboutSection from '@/modules/welcome/components/sections/AboutSection.vue'
+import ActivitySection from '@/modules/welcome/components/sections/ActivitySection.vue'
+import ChatsSection from '@/modules/welcome/components/sections/ChatsSection.vue'
+import CollaborativeSection from '@/modules/welcome/components/sections/CollaborativeSection.vue'
+import KanbanSection from '@/modules/welcome/components/sections/KanbanSection.vue'
+import MarketingCards from '@/modules/welcome/components/MarketingCards.vue'
+import MarqueeList from '@/modules/welcome/components/MarqueeList.vue'
+import MembersSection from '@/modules/welcome/components/sections/MembersSection.vue'
+import ProjectDemo from '@/modules/welcome/components/ProjectDemo.vue'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.welcome,
+    requiresAuth: false,
+  },
+  name: 'welcome',
+})
+
+useHead({
+  title: 'Jenda - cloud program for project and task management',
+})
+</script>
+
+<template>
+  <div class="ui-container pt-[106px] max-[1152px]:pt-[80px] max-[890px]:pt-[70px] max-[520px]:!pt-[50px]">
+    <AboutSection />
+    <ProjectDemo />
+    <div class="flex flex-col items-center py-0 px-8 max-[890px]:px-0">
+      <MarqueeList />
+      <MarketingCards />
+      <KanbanSection />
+      <CollaborativeSection />
+      <ActivitySection />
+      <MembersSection />
+      <ChatsSection />
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/core/types/header.ts b/apps/client/src/core/types/header.ts
new file mode 100644
index 00000000..42c2b74f
--- /dev/null
+++ b/apps/client/src/core/types/header.ts
@@ -0,0 +1,23 @@
+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 HeaderNavLink {
+  id: number
+  name: string
+  pagePrefix: string
+}
diff --git a/apps/client/src/core/types/index.ts b/apps/client/src/core/types/index.ts
new file mode 100644
index 00000000..d153d3b4
--- /dev/null
+++ b/apps/client/src/core/types/index.ts
@@ -0,0 +1,2 @@
+export * from './header'
+export * from './sidebar'
diff --git a/apps/client/src/core/types/sidebar.ts b/apps/client/src/core/types/sidebar.ts
new file mode 100644
index 00000000..5ba0a4c1
--- /dev/null
+++ b/apps/client/src/core/types/sidebar.ts
@@ -0,0 +1,16 @@
+import type { IconifyIcon } from '@iconify/vue'
+import type { RouterLinkProps } from 'vue-router/auto'
+
+export interface Link {
+  id: number
+  name: string
+  pathName: RouterLinkProps['to']
+  // string with unocss update
+  icon: IconifyIcon | string
+}
+
+export interface IntegrationItem {
+  name: string
+  link: string
+  icon: string
+}
diff --git a/apps/client/src/main.ts b/apps/client/src/main.ts
new file mode 100644
index 00000000..e8503ab0
--- /dev/null
+++ b/apps/client/src/main.ts
@@ -0,0 +1,35 @@
+import { createApp } from 'vue'
+import { createHead } from '@unhead/vue'
+import { vTooltip } from 'floating-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 } from './store'
+import { router } from './router'
+import i18n from '@/shared/libs/i18n'
+
+import './styles/index.css'
+import '@unocss/reset/tailwind-compat.css'
+import 'virtual:uno.css'
+import 'floating-vue/dist/style.css'
+import 'vue-data-ui/style.css'
+
+const app = createApp(App)
+// head plugin
+const head = createHead()
+
+app.use(pinia)
+app.use(router)
+app.use(i18n)
+app.use(head)
+app.use(autoAnimatePlugin)
+app.use(Vue3Marquee)
+app.use(VueWriter)
+app.directive('tooltip', vTooltip)
+app.component('VueUiRadar', VueUiRadar)
+app.mount('#app')
diff --git a/apps/client/src/modules/auth/components/AuthContainer.vue b/apps/client/src/modules/auth/components/AuthContainer.vue
new file mode 100644
index 00000000..3ce9f7e7
--- /dev/null
+++ b/apps/client/src/modules/auth/components/AuthContainer.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router/auto'
+import GoogleOauth from './features/GoogleOauth.vue'
+import PrivacyPolicy from './common/PrivacyPolicy.vue'
+import { UiAlert } from '@/shared/ui'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const title = computed(() => {
+  return route.name === 'sign-in'
+    ? t('authentication.login.title')
+    : t('authentication.registration.title')
+})
+const info = computed(() => {
+  return route.name === 'sign-in'
+    ? t('authentication.login.description')
+    : t('authentication.registration.description')
+})
+
+const alertString = computed(() => {
+  const authAlert = t('authentication.auth_alert')
+  const words = authAlert.split(' ')
+  words[2] = `<span style="font-weight: 600">${words[2]}</span>`
+  words[7] = `<span style="font-weight: 600">${words[7]}</span>`
+
+  return words.join(' ')
+})
+</script>
+
+<template>
+  <div
+    class="auth-slot-container"
+  >
+    <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
+      <div
+        class="form-container"
+      >
+        <UiAlert
+          v-if="route.name === 'sign-in' || route.name === 'sign-up'"
+          variant="warning"
+          closable
+          class="max-w-98% max-[520px]:mb-1.5"
+        >
+          <span class="text-sm" v-html="alertString" />
+        </UiAlert>
+        <h2 class="text-3xl fw-600 max-[580px]:text-2xl">
+          {{ title }}
+        </h2>
+        <p class="text-sm pb-5 text-neutral-500 dark:text-neutral-400 mt--1.5">
+          {{ info }}
+        </p>
+
+        <slot />
+
+        <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 />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/ConfirmSection.vue b/apps/client/src/modules/auth/components/ConfirmSection.vue
new file mode 100644
index 00000000..5dcd2b22
--- /dev/null
+++ b/apps/client/src/modules/auth/components/ConfirmSection.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { UiAlert } from '@/shared/ui'
+</script>
+
+<template>
+  <div
+    class="auth-slot-container"
+  >
+    <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
+      <div
+        class="form-container"
+      >
+        <h2 class="text-3xl fw-600 max-[580px]:text-2xl">
+          {{ $t('authentication.confirm.title') }}
+        </h2>
+        <p class="text-sm pb-5 text-neutral-500 dark:text-neutral-400 mt--1.5">
+          {{ $t('authentication.confirm.description') }}
+        </p>
+        <UiAlert
+          variant="success"
+          closable
+          class="max-w-98% max-[520px]:mb-1.5"
+        >
+          <span class="text-sm">
+            {{ $t('authentication.confirm.alert') }}
+          </span>
+        </UiAlert>
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/UserAvatar.vue b/apps/client/src/modules/auth/components/UserAvatar.vue
new file mode 100644
index 00000000..a2d12403
--- /dev/null
+++ b/apps/client/src/modules/auth/components/UserAvatar.vue
@@ -0,0 +1,8 @@
+<template>
+  <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 dark:bg-neutral-700 dark:text-neutral-50"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/WorkspaceChoosing.vue b/apps/client/src/modules/auth/components/WorkspaceChoosing.vue
new file mode 100644
index 00000000..d91ed445
--- /dev/null
+++ b/apps/client/src/modules/auth/components/WorkspaceChoosing.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import PrivacyPolicy from './common/PrivacyPolicy.vue'
+</script>
+
+<template>
+  <div
+    class="auth-slot-container"
+  >
+    <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
+      <div
+        class="form-container"
+      >
+        <h2 class="text-3xl fw-600 max-[580px]:text-2xl mb-2">
+          {{ $t('authentication.workspace.choosing.title') }}
+        </h2>
+        <p class="text-neutral-500 dark:text-neutral-300">
+          {{ $t('authentication.workspace.choosing.description', 1) }}
+        </p>
+        <p class="mb-6 max-w-100% text-neutral-500 dark:text-neutral-300">
+          {{ $t('authentication.workspace.choosing.description', 2) }}
+        </p>
+        <slot />
+        <PrivacyPolicy />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/WorkspaceCreating.vue b/apps/client/src/modules/auth/components/WorkspaceCreating.vue
new file mode 100644
index 00000000..84f46f14
--- /dev/null
+++ b/apps/client/src/modules/auth/components/WorkspaceCreating.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import PrivacyPolicy from './common/PrivacyPolicy.vue'
+import { UiAlert } from '@/shared/ui'
+</script>
+
+<template>
+  <div
+    class="auth-slot-container"
+  >
+    <div class="h-full w-full flex flex-col justify-center items-center mx-auto">
+      <div
+        class="form-container"
+      >
+        <h2 class="text-3xl fw-600 max-[580px]:text-2xl mb-6">
+          {{ $t('authentication.workspace.creating.title') }}
+        </h2>
+        <div class="mb-4">
+          <slot name="logo" />
+        </div>
+        <UiAlert
+          variant="warning"
+          closable
+          :content="$t('authentication.workspace.creating.alert')"
+          class="max-w-98% mb-6 mt-2 max-[520px]:mb-1.5"
+        />
+        <slot name="form" />
+        <PrivacyPolicy />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/common/BgPanel.vue b/apps/client/src/modules/auth/components/common/BgPanel.vue
new file mode 100644
index 00000000..81810587
--- /dev/null
+++ b/apps/client/src/modules/auth/components/common/BgPanel.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDark, useWindowSize } from '@vueuse/core'
+import { useTextChanging } from '../../composables/panel'
+import { reviews } from '../../fixtures/reviews'
+
+const { currentIndex } = useTextChanging(reviews)
+
+const isDark = useDark()
+const imgBlockquote = computed(() => {
+  return isDark.value ? '/icons/blockquote-dark.png' : '/icons/blockquote-light.png'
+})
+
+const { width } = useWindowSize()
+</script>
+
+<template>
+  <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="flex items-center gap-12px">
+        <img
+          src="https://avatars.githubusercontent.com/u/121057011?v=4"
+          :alt="reviews[currentIndex].author"
+          class="w-38px h-38px rounded-50%"
+        />
+        <div class="flex">
+          <cite
+            class="text-base whitespace-nowrap font-medium not-italic dark:text-neutral-200"
+          >
+            {{ reviews[currentIndex].author }}
+          </cite>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/common/LogoFile.vue b/apps/client/src/modules/auth/components/common/LogoFile.vue
new file mode 100644
index 00000000..7e1afed4
--- /dev/null
+++ b/apps/client/src/modules/auth/components/common/LogoFile.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useDark, useWindowSize } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const { width } = useWindowSize()
+
+const isDark = useDark()
+</script>
+
+<template>
+  <div
+    v-if="width > 1100"
+    class="absolute z-99 top-24px left-32px flex items-center gap-1.5 cursor-pointer"
+    @click="$router.push('/')"
+  >
+    <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="absolute z-99 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('/')"
+    >
+      <div
+        i-lucide-chevron-left
+        class="text-lg text-neutral-500"
+      />
+      <span class="text-sm !fw-500">
+        {{ t('authentication.back') }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/common/PrivacyPolicy.vue b/apps/client/src/modules/auth/components/common/PrivacyPolicy.vue
new file mode 100644
index 00000000..75e458fe
--- /dev/null
+++ b/apps/client/src/modules/auth/components/common/PrivacyPolicy.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { tm, locale } = useI18n()
+
+const privacyItems = tm('authentication.privacy') as string[]
+
+const maxWidth = computed(() => {
+  return locale.value === 'ru-RU' ? '400px' : '320px'
+})
+</script>
+
+<template>
+  <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] }}
+    <a
+      href="https://github.com/mnenie/jenda"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="form-text-underline dark:hover:text-neutral-500"
+    >
+      {{ privacyItems[2] }}
+    </a>
+    {{ privacyItems[3] }}
+    <a
+      href="https://github.com/mnenie/jenda"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="form-text-underline dark:hover:text-neutral-500"
+    >
+      {{ privacyItems[4] }}
+    </a>
+  </p>
+</template>
diff --git a/apps/client/src/modules/auth/components/features/GoogleOauth.vue b/apps/client/src/modules/auth/components/features/GoogleOauth.vue
new file mode 100644
index 00000000..a29e33a1
--- /dev/null
+++ b/apps/client/src/modules/auth/components/features/GoogleOauth.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { toast } from 'vue-sonner'
+import { UiButton } from '@/shared/ui'
+
+function onGoogleAuth() {
+  toast.warning('Jenda in dev mode and temporarily unavailable')
+}
+</script>
+
+<template>
+  <UiButton size="md" variant="outline" @click="onGoogleAuth">
+    <img src="/icons/google.png" class="w-4 h-4" />
+    Google
+  </UiButton>
+</template>
diff --git a/apps/client/src/modules/auth/components/features/HandleLogo.vue b/apps/client/src/modules/auth/components/features/HandleLogo.vue
new file mode 100644
index 00000000..05bec823
--- /dev/null
+++ b/apps/client/src/modules/auth/components/features/HandleLogo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useWorkspaceChooserContext } from '../../composables/auth-workspace'
+import { UiButton } from '@/shared/ui'
+
+const { openFileChooser, reset } = useWorkspaceChooserContext()
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <UiButton size="sm" variant="outline" @click="openFileChooser($event)">
+      {{ $t('authentication.workspace.creating.logo.btn', 1) }}
+    </UiButton>
+    <UiButton size="sm" variant="outline" class="!text-red-500" @click="reset">
+      {{ $t('authentication.workspace.creating.logo.btn', 2) }}
+    </UiButton>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/features/WorkspaceLogoChooser.vue b/apps/client/src/modules/auth/components/features/WorkspaceLogoChooser.vue
new file mode 100644
index 00000000..e7fb7695
--- /dev/null
+++ b/apps/client/src/modules/auth/components/features/WorkspaceLogoChooser.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { shallowRef, toValue } from 'vue'
+import { useFileSystemAccess, useObjectUrl } from '@vueuse/core'
+import { provideWorkspaceChooserContext } from '../../composables/auth-workspace'
+import HandleLogo from './HandleLogo.vue'
+
+const url = shallowRef()
+
+// TODO: add fileSize validation
+const { file, open } = useFileSystemAccess({
+  dataType: 'Blob',
+  types: [
+    {
+      description: 'Image',
+      accept: {
+        'image/*': ['.png', '.jpeg'],
+      },
+    },
+  ],
+  excludeAcceptAllOption: true,
+},
+)
+function reset() {
+  file.value = undefined
+  url.value = null
+}
+
+async function openFileChooser() {
+  await open()
+  url.value = toValue(useObjectUrl(file))
+}
+
+provideWorkspaceChooserContext({
+  openFileChooser,
+  reset,
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-start gap-6">
+    <img
+      :src="url ?? 'https://avatars.githubusercontent.com/u/148716815?v=4'"
+      class="h-16 w-16 rounded-md"
+    />
+    <div class="flex flex-col gap-2">
+      <span class="text-sm text-neutral-500 dark:text-neutral-400">
+        {{ $t('authentication.workspace.creating.logo.label') }}
+      </span>
+      <HandleLogo />
+      <span class="mt-1 text-xs text-neutral-500 dark:text-neutral-400">
+        {{ $t('authentication.workspace.creating.logo.description') }}
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/components/forms/ConfirmForm.vue b/apps/client/src/modules/auth/components/forms/ConfirmForm.vue
new file mode 100644
index 00000000..1990c625
--- /dev/null
+++ b/apps/client/src/modules/auth/components/forms/ConfirmForm.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import { useField, useForm } from 'vee-validate'
+import { useRouter } from 'vue-router/auto'
+import { toast } from 'vue-sonner'
+import { z } from '@/shared/libs/vee-validate'
+import { UiButton, UiFormField, UiFormMessage, UiPinInput, UiPinInputGroup, UiPinInputInput } from '@/shared/ui'
+
+const formSchema = toTypedSchema(z.object({
+  pin: z.array(z.coerce.string()).length(5),
+}))
+
+const { handleSubmit, setFieldValue, errors } = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    pin: [],
+  },
+})
+
+const { value: pin } = useField<string[]>('pin')
+
+const router = useRouter()
+
+const onConfirm = handleSubmit((values) => {
+  router.push({ name: 'sign-up-workspace' })
+})
+
+function onResend() {
+  toast.success('OTP has been sent to your email')
+}
+</script>
+
+<template>
+  <form @submit.prevent="onConfirm">
+    <UiFormField v-auto-animate>
+      <UiPinInput
+        id="pin-input"
+        v-model:model-value="pin"
+        placeholder="○"
+        class="flex gap-2 items-center mt-1 w-full"
+        otp
+        type="number"
+        @update:model-value="(arrStr) => {
+          setFieldValue('pin', arrStr.filter(Boolean))
+        }"
+      >
+        <UiPinInputGroup>
+          <UiPinInputInput
+            v-for="(id, index) in 5"
+            :key="id"
+            :index="index"
+          />
+        </UiPinInputGroup>
+      </UiPinInput>
+      <UiFormMessage v-if="errors.pin" :content="errors.pin" />
+    </UiFormField>
+    <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2">
+      {{ $t('authentication.form.otp') }}
+    </p>
+    <UiButton size="md" type="submit" class="w-full mt-4 mb-2">
+      {{ $t('authentication.confirm.btn') }}
+    </UiButton>
+    <p
+      class="text-sm text-center select-none text-neutral-500 dark:text-neutral-300"
+      @click="onResend"
+    >
+      {{ $t('authentication.confirm.proposal') }}
+      <span
+        class="form-text-underline"
+      >
+        {{ $t('authentication.confirm.route') }}
+      </span>
+    </p>
+  </form>
+</template>
diff --git a/apps/client/src/modules/auth/components/forms/SignInForm.vue b/apps/client/src/modules/auth/components/forms/SignInForm.vue
new file mode 100644
index 00000000..e51598cc
--- /dev/null
+++ b/apps/client/src/modules/auth/components/forms/SignInForm.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import { createReusableTemplate } from '@vueuse/core'
+import { useField, useForm } from 'vee-validate'
+import { toast } from 'vue-sonner'
+import { useRouter } from 'vue-router/auto'
+import {
+  UiButton,
+  UiFormField,
+  UiFormLabel,
+  UiFormMessage,
+  UiInput,
+} from '@/shared/ui'
+import { z } from '@/shared/libs/vee-validate'
+
+const validationSchema = toTypedSchema(
+  z.object({
+    email: z.string().min(1).email(),
+    password: z.string().min(8),
+  }),
+)
+
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+const { value: email } = useField<string>('email')
+const { value: password } = useField<string | number>('password')
+
+const router = useRouter()
+
+const onLogin = handleSubmit((values) => {
+  // on login event
+  toast.warning('Jenda in dev mode and temporarily unavailable')
+  router.push({ name: 'sign-in-workspace' })
+})
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ $slots, field, error }">
+    <UiFormField v-auto-animate>
+      <UiFormLabel
+        :for="field"
+      >
+        {{ $t(`authentication.form.${field}`) }}
+      </UiFormLabel>
+      <component :is="$slots.default" />
+      <UiFormMessage v-if="error" :content="error" />
+    </UiFormField>
+  </DefineTemplate>
+  <form @submit.prevent="onLogin">
+    <div class="grid gap-6">
+      <div class="grid gap-4">
+        <ReuseTemplate field="email" :error="errors.email">
+          <UiInput
+            id="email"
+            v-model="email"
+            placeholder="user@example.com"
+            type="email"
+          />
+        </ReuseTemplate>
+        <ReuseTemplate field="password" :error="errors.password">
+          <UiInput
+            id="password"
+            v-model="password"
+            placeholder="user_password_example"
+            type="password"
+          />
+        </ReuseTemplate>
+      </div>
+      <div class="grid gap-2">
+        <UiButton size="md" type="submit">
+          {{ $t('authentication.login.btn') }}
+        </UiButton>
+        <p class="text-sm text-center select-none text-neutral-500 dark:text-neutral-300">
+          {{ $t('authentication.login.proposal') }}
+          <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: 'sign-up' })"
+          >
+            {{ $t('authentication.login.route') }}
+          </span>
+        </p>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/apps/client/src/modules/auth/components/forms/SignUpForm.vue b/apps/client/src/modules/auth/components/forms/SignUpForm.vue
new file mode 100644
index 00000000..c6bba9a5
--- /dev/null
+++ b/apps/client/src/modules/auth/components/forms/SignUpForm.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import { createReusableTemplate } from '@vueuse/core'
+import { useField, useForm } from 'vee-validate'
+import { useRouter } from 'vue-router/auto'
+import { toast } from 'vue-sonner'
+import {
+  UiButton,
+  UiFormField,
+  UiFormLabel,
+  UiFormMessage,
+  UiInput,
+} from '@/shared/ui'
+import { z } from '@/shared/libs/vee-validate'
+
+const validationSchema = toTypedSchema(
+  z.object({
+    email: z.string().min(1).email(),
+    password: z.string().min(8),
+  }),
+)
+
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+const { value: email } = useField<string>('email')
+const { value: password } = useField<string>('password')
+
+const router = useRouter()
+
+const onRegistration = handleSubmit((values) => {
+  toast.warning('Jenda in dev mode and temporarily unavailable')
+  // on registration event
+  router.push({ name: 'confirm' })
+})
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ $slots, field, error }">
+    <UiFormField v-auto-animate>
+      <UiFormLabel
+        :for="field"
+      >
+        {{ $t(`authentication.form.${field}`) }}
+      </UiFormLabel>
+      <component :is="$slots.default" />
+      <UiFormMessage v-if="error" :content="error" />
+    </UiFormField>
+  </DefineTemplate>
+  <form @submit.prevent="onRegistration">
+    <div class="grid gap-6">
+      <div class="grid gap-4">
+        <ReuseTemplate field="email" :error="errors.email">
+          <UiInput
+            id="email"
+            v-model="email"
+            placeholder="user@example.com"
+            type="email"
+          />
+        </ReuseTemplate>
+        <ReuseTemplate field="password" :error="errors.password">
+          <UiInput
+            id="password"
+            v-model="password"
+            placeholder="user_password_example"
+            type="password"
+          />
+        </ReuseTemplate>
+      </div>
+      <div class="grid gap-2">
+        <UiButton size="md" type="submit">
+          {{ $t('authentication.registration.btn') }}
+        </UiButton>
+        <p class="text-sm text-center select-none text-neutral-500 dark:text-neutral-300">
+          {{ $t('authentication.registration.proposal') }}
+          <span
+            class="form-text-underline"
+            @click="router.push({ name: 'sign-in' })"
+          >
+            {{ $t('authentication.registration.route') }}
+          </span>
+        </p>
+      </div>
+    </div>
+  </form>
+</template>
diff --git a/apps/client/src/modules/auth/components/forms/WorkspaceChanger.vue b/apps/client/src/modules/auth/components/forms/WorkspaceChanger.vue
new file mode 100644
index 00000000..b1d84244
--- /dev/null
+++ b/apps/client/src/modules/auth/components/forms/WorkspaceChanger.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router/auto'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useField, useForm } from 'vee-validate'
+import type { ChoosingWorkspaceItem } from '@/modules/workspace/types'
+import ChoosingButton from '@/modules/workspace/components/ChoosingButton.vue'
+import { UiButton, UiFormField, UiFormLabel, UiFormMessage } from '@/shared/ui'
+import { z } from '@/shared/libs/vee-validate'
+
+defineProps<{
+  workspaces: ChoosingWorkspaceItem[]
+}>()
+
+const validationSchema = toTypedSchema(
+  z.object({
+    workspace: z.string().min(1),
+  }),
+)
+
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+const { value: workspace } = useField<string>('workspace')
+
+const router = useRouter()
+function handleWorkspaceChoose(id: string) {
+  // console.log(id)
+  workspace.value = id
+}
+
+const onChanger = handleSubmit((values) => {
+  router.push({ name: 'boards' })
+})
+</script>
+
+<template>
+  <form @submit.prevent="onChanger">
+    <div class="grid gap-6">
+      <UiFormField v-auto-animate class="flex flex-col gap-3">
+        <UiFormLabel
+          for="workspaces"
+        >
+          {{ $t('authentication.workspace.choosing.label') }}
+        </UiFormLabel>
+        <div class="flex flex-col gap-3 max-h-200px overflow-auto">
+          <ChoosingButton
+            v-for="w in workspaces"
+            :key="w._id"
+            :item="w"
+            @choose="handleWorkspaceChoose(w._id)"
+          />
+        </div>
+        <UiFormMessage v-if="errors.workspace" :content="errors.workspace" />
+      </UiFormField>
+      <UiButton size="md" type="submit">
+        {{ $t('authentication.workspace.route') }}
+      </UiButton>
+    </div>
+  </form>
+</template>
diff --git a/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue b/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue
new file mode 100644
index 00000000..3cd18488
--- /dev/null
+++ b/apps/client/src/modules/auth/components/forms/WorkspaceForm.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import { createReusableTemplate } from '@vueuse/core'
+import { useField, useForm } from 'vee-validate'
+import { useRouter } from 'vue-router/auto'
+import { z } from '@/shared/libs/vee-validate'
+import { UiButton, UiFormField, UiFormLabel, UiFormMessage, UiInput } from '@/shared/ui'
+
+const validationSchema = toTypedSchema(
+  z.object({
+    name: z.string().min(1).max(15),
+    url: z.string().min(3),
+  }),
+)
+
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+const { value: name } = useField<string>('name')
+const { value: url } = useField<string>('url')
+
+const router = useRouter()
+
+const onWorkspaceCreation = handleSubmit((values) => {
+  // on registration event
+  router.push({ name: 'boards' })
+})
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ $slots, field, error }">
+    <UiFormField v-auto-animate>
+      <UiFormLabel
+        :for="field"
+      >
+        {{ $t(`authentication.workspace.creating.form.${field}.label`) }}
+      </UiFormLabel>
+      <component :is="$slots.default" />
+      <UiFormMessage v-if="error" :content="error" />
+    </UiFormField>
+  </DefineTemplate>
+  <form @submit.prevent="onWorkspaceCreation">
+    <div class="grid gap-6">
+      <div class="grid gap-4">
+        <ReuseTemplate field="name" :error="errors.name">
+          <UiInput
+            id="name"
+            v-model="name"
+            :placeholder="$t('authentication.workspace.creating.form.name.placeholder')"
+          />
+        </ReuseTemplate>
+        <ReuseTemplate field="url" :error="errors.url">
+          <div class="relative w-full h-9 flex items-center">
+            <span class="text-sm pb-0.5px text-neutral-500 absolute left-3">workpaces/</span>
+            <UiInput id="url" v-model="url" class="pl-22" type="text" />
+          </div>
+        </ReuseTemplate>
+      </div>
+      <UiButton size="md" type="submit">
+        {{ $t('authentication.workspace.route') }}
+      </UiButton>
+    </div>
+  </form>
+</template>
diff --git a/apps/client/src/modules/auth/composables/auth-workspace.ts b/apps/client/src/modules/auth/composables/auth-workspace.ts
new file mode 100644
index 00000000..4f9c85e9
--- /dev/null
+++ b/apps/client/src/modules/auth/composables/auth-workspace.ts
@@ -0,0 +1,30 @@
+import { inject, type InjectionKey, provide } from 'vue'
+
+interface AuthWorkspace {
+  reset: () => void
+  openFileChooser: (event: any) => void
+}
+
+type T = AuthWorkspace
+
+const key: InjectionKey<AuthWorkspace> = Symbol('auth-workspace-chooser')
+
+export function provideWorkspaceChooserContext(value: T) {
+  provide(key, value)
+  return value
+}
+
+export function useWorkspaceChooserContext<
+  U extends T | undefined = T,
+>(
+  fallback?: U,
+): U extends null ? T | null : T {
+  const expanded = inject(key, fallback)
+  if (expanded)
+    return expanded as T
+
+  if (expanded === null)
+    return expanded as any
+
+  throw new Error('not provided')
+}
diff --git a/apps/client/src/modules/auth/composables/panel.ts b/apps/client/src/modules/auth/composables/panel.ts
new file mode 100644
index 00000000..3a267d8d
--- /dev/null
+++ b/apps/client/src/modules/auth/composables/panel.ts
@@ -0,0 +1,21 @@
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { Review } from '../types'
+
+export function useTextChanging(reviews: Review[]) {
+  // so, maybe Ill do with live data
+  const currentIndex = ref(0)
+  const route = useRoute()
+
+  const changeReviewText = () => {
+    currentIndex.value = Math.floor(Math.random() * reviews.length)
+  }
+  watch(() => route.path, () => {
+    changeReviewText()
+  }, { immediate: true })
+
+  return {
+    currentIndex,
+    changeReviewText,
+  }
+}
diff --git a/apps/client/src/modules/auth/fixtures/reviews.ts b/apps/client/src/modules/auth/fixtures/reviews.ts
new file mode 100644
index 00000000..b048cd0f
--- /dev/null
+++ b/apps/client/src/modules/auth/fixtures/reviews.ts
@@ -0,0 +1,20 @@
+import type { Review } from '../types'
+
+// mocks -> after data from backend
+export const reviews: Review[] = [
+  {
+    id: '0',
+    author: '@alexpeshkov',
+    text: `Y'all Jenda is amazing! 🙌 Barely an hour since I've been here and I don't want to leave my workspace. 🤯🤯🤯`,
+  },
+  {
+    id: '1',
+    author: '@airvt1x',
+    text: `I just learned about Jenda and im in love 💫 Jenda is a Trello/Jira alternative!💡so, simple for understanding !!!`,
+  },
+  {
+    id: '2',
+    author: '@alexpeshkov',
+    text: `So, Jenda is just 🔥 Now I understand why many people like to use it.`,
+  },
+]
diff --git a/apps/client/src/modules/auth/pages/auth/sign-in/index.vue b/apps/client/src/modules/auth/pages/auth/sign-in/index.vue
new file mode 100644
index 00000000..496acd71
--- /dev/null
+++ b/apps/client/src/modules/auth/pages/auth/sign-in/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import AuthContainer from '../../../components/AuthContainer.vue'
+import SignInForm from '../../../components/forms/SignInForm.vue'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.auth,
+    requiresAuth: false,
+  },
+  name: 'sign-in',
+})
+
+useHead({
+  title: 'Jenda | Sign In',
+})
+</script>
+
+<template>
+  <div class="auth-page">
+    <AuthContainer>
+      <SignInForm />
+    </AuthContainer>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/pages/auth/sign-in/workspace.vue b/apps/client/src/modules/auth/pages/auth/sign-in/workspace.vue
new file mode 100644
index 00000000..88984ad9
--- /dev/null
+++ b/apps/client/src/modules/auth/pages/auth/sign-in/workspace.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { shallowReactive } from 'vue'
+import { useHead } from '@unhead/vue'
+import WorkspaceChoosing from '../../../components/WorkspaceChoosing.vue'
+import WorkspaceChanger from '../../../components/forms/WorkspaceChanger.vue'
+import type { ChoosingWorkspaceItem } from '@/modules/workspace/types'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.auth,
+    requiresAuth: true,
+  },
+  name: 'sign-in-workspace',
+})
+
+useHead({
+  title: 'Sign In | Choose your workspace',
+})
+
+const workspaces = shallowReactive<ChoosingWorkspaceItem[]>([
+  {
+    _id: '1',
+    name: 'Workspace 1',
+    plan: 'FREE',
+    status: 'active',
+  },
+  {
+    _id: '2',
+    name: 'Workspace 2',
+    plan: 'PREMIUM',
+    status: 'active',
+  },
+])
+</script>
+
+<template>
+  <div class="auth-page">
+    <WorkspaceChoosing>
+      <WorkspaceChanger :workspaces />
+    </WorkspaceChoosing>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/pages/auth/sign-up/confirm.vue b/apps/client/src/modules/auth/pages/auth/sign-up/confirm.vue
new file mode 100644
index 00000000..2d9bb2ab
--- /dev/null
+++ b/apps/client/src/modules/auth/pages/auth/sign-up/confirm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import ConfirmForm from '../../../components/forms/ConfirmForm.vue'
+import ConfirmSection from '../../../components/ConfirmSection.vue'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.auth,
+    requiresAuth: true,
+  },
+  name: 'confirm',
+})
+
+useHead({
+  title: 'Sign Up | Confirm your email',
+})
+</script>
+
+<template>
+  <div class="auth-page">
+    <ConfirmSection>
+      <div i-hugeicons-alpha class="w-12 h-12 absolute right-0 top--14" />
+      <ConfirmForm />
+    </ConfirmSection>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/pages/auth/sign-up/index.vue b/apps/client/src/modules/auth/pages/auth/sign-up/index.vue
new file mode 100644
index 00000000..3049d759
--- /dev/null
+++ b/apps/client/src/modules/auth/pages/auth/sign-up/index.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import SignUpForm from '../../../components/forms/SignUpForm.vue'
+import AuthContainer from '../../../components/AuthContainer.vue'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.auth,
+    requiresAuth: false,
+  },
+  name: 'sign-up',
+})
+
+useHead({
+  title: 'Jenda | Sign Up',
+})
+</script>
+
+<template>
+  <div class="auth-page">
+    <AuthContainer>
+      <SignUpForm />
+    </AuthContainer>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/pages/auth/sign-up/workspace.vue b/apps/client/src/modules/auth/pages/auth/sign-up/workspace.vue
new file mode 100644
index 00000000..dccbb414
--- /dev/null
+++ b/apps/client/src/modules/auth/pages/auth/sign-up/workspace.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import WorkspaceForm from '../../../components/forms/WorkspaceForm.vue'
+import WorkspaceCreating from '../../../components/WorkspaceCreating.vue'
+import WorkspaceLogoChooser from '../../../components/features/WorkspaceLogoChooser.vue'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+
+definePage({
+  meta: {
+    layout: LayoutsEnum.auth,
+    requiresAuth: true,
+  },
+  name: 'sign-up-workspace',
+})
+
+useHead({
+  title: 'Sign Up | Create Workspace',
+})
+</script>
+
+<template>
+  <div class="auth-page">
+    <WorkspaceCreating>
+      <template #logo>
+        <WorkspaceLogoChooser />
+      </template>
+      <template #form>
+        <WorkspaceForm />
+      </template>
+    </WorkspaceCreating>
+  </div>
+</template>
diff --git a/apps/client/src/modules/auth/stores/auth.ts b/apps/client/src/modules/auth/stores/auth.ts
new file mode 100644
index 00000000..bd4c5c9b
--- /dev/null
+++ b/apps/client/src/modules/auth/stores/auth.ts
@@ -0,0 +1,11 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { User } from '../types'
+
+export const useUserStore = defineStore('user', () => {
+  const user = ref({} as User)
+
+  return {
+    user,
+  }
+})
diff --git a/apps/client/src/modules/auth/types/index.ts b/apps/client/src/modules/auth/types/index.ts
new file mode 100644
index 00000000..ae71d87c
--- /dev/null
+++ b/apps/client/src/modules/auth/types/index.ts
@@ -0,0 +1,2 @@
+export * from './review'
+export * from './user'
diff --git a/apps/client/src/modules/auth/types/review.ts b/apps/client/src/modules/auth/types/review.ts
new file mode 100644
index 00000000..6d40c411
--- /dev/null
+++ b/apps/client/src/modules/auth/types/review.ts
@@ -0,0 +1,5 @@
+export interface Review {
+  id: string
+  author: string
+  text: string
+}
diff --git a/apps/client/src/modules/auth/types/user.ts b/apps/client/src/modules/auth/types/user.ts
new file mode 100644
index 00000000..7514dafe
--- /dev/null
+++ b/apps/client/src/modules/auth/types/user.ts
@@ -0,0 +1,16 @@
+interface DateParams {
+  createdAt?: Date
+  updatedAt?: Date
+  deletedAt?: Date
+}
+
+export interface User extends DateParams {
+  _id?: string
+  email: string
+  photoUrl?: string
+  role?: string
+}
+
+export interface UserAuth extends User {
+  token: string
+}
diff --git a/apps/client/src/modules/boards/components/BoardsActionsPanel.vue b/apps/client/src/modules/boards/components/BoardsActionsPanel.vue
new file mode 100644
index 00000000..83776500
--- /dev/null
+++ b/apps/client/src/modules/boards/components/BoardsActionsPanel.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useBoardsStore } from '../stores/board'
+import CreateNewBoard from './features/CreateNewBoard.vue'
+import RemoveBoard from './features/handlers/RemoveBoard.vue'
+import BoardsAdvancedFilter from './filters/BoardsAdvancedFilter.vue'
+import BoardsSort from './filters/BoardsSort.vue'
+import SearchBoards from './filters/SearchBoards.vue'
+import { UiTabsList, UiTabsTrigger } from '@/shared/ui'
+
+defineProps<{
+  isSelected: boolean
+  idxs: string[]
+}>()
+
+const boardsStore = useBoardsStore()
+const { boards } = storeToRefs(boardsStore)
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      <UiTabsList>
+        <UiTabsTrigger value="table">
+          <span i-hugeicons-layout-table-02 />
+        </UiTabsTrigger>
+        <UiTabsTrigger disabled value="cards">
+          <span i-hugeicons-dashboard-square-01 />
+        </UiTabsTrigger>
+      </UiTabsList>
+      <BoardsSort class="mr-2" />
+      <BoardsAdvancedFilter />
+      <RemoveBoard
+        v-if="isSelected && boards.length > 0"
+        @remove="boardsStore.removeBoards(idxs)"
+      />
+    </div>
+    <div class="flex items-center gap-2">
+      <SearchBoards />
+      <CreateNewBoard
+        :plural="1"
+        variant="solid"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/boards/components/BoardsDataTable.vue b/apps/client/src/modules/boards/components/BoardsDataTable.vue
new file mode 100644
index 00000000..306cd8f7
--- /dev/null
+++ b/apps/client/src/modules/boards/components/BoardsDataTable.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useDark } from '@vueuse/core'
+import type { Table } from '@tanstack/vue-table'
+import type { BoardRow } from '../types'
+import { DataTable, UiBadge } from '@/shared/ui'
+import { formatLabelColor } from '@/shared/helpers/helperColor'
+import UserAvatar from '@/modules/auth/components/UserAvatar.vue'
+
+defineProps<{
+  data: Set<BoardRow> | BoardRow[]
+}>()
+
+const _columns = [
+  {
+    accessorKey: 'name',
+    meta: {
+      icon: 'hugeicons:alpha',
+      _tableCell: 'max-w-220px',
+    },
+  },
+  {
+    accessorKey: 'status',
+    meta: {
+      icon: 'hugeicons:energy',
+      _tableCell: 'text-left',
+    },
+  },
+  {
+    accessorKey: 'labels',
+    meta: {
+      icon: 'hugeicons:creative-market',
+      badge: 'Optional',
+      _tableCell: 'max-w-220px',
+    },
+  },
+  {
+    accessorKey: 'users',
+    meta: {
+      icon: 'hugeicons:user-group',
+      _tableCell: 'min-w-120px',
+    },
+  },
+  {
+    accessorKey: 'tasks',
+    meta: {
+      icon: 'hugeicons:workflow-circle-06',
+      _tableCell: 'text-left',
+    },
+  },
+  {
+    accessorKey: 'estimate',
+    meta: {
+      icon: 'hugeicons:bulb-charging',
+      badge: 'AI',
+      _tableCell: 'text-left bg-purple-50/50 dark:bg-purple-900/20',
+    },
+  },
+  {
+    accessorKey: 'date',
+    meta: {
+      icon: 'hugeicons:calendar-02',
+      _tableCell: 'text-left',
+    },
+  },
+]
+
+const { tm, t } = useI18n()
+
+const localizedArr = tm('boards.columns') as any
+
+const columns = computed(() => {
+  return _columns.map((column, idx) => ({
+    ...column,
+    header: localizedArr[idx],
+  }))
+})
+
+const select = defineModel <Record<string, boolean>>('select')
+
+const table = useTemplateRef<Table<any>>('table')
+
+const visibleUsers = computed(() => (cell: any) => cell.row.original.users.slice(0, 4))
+
+const remainingUsers = computed(() => (cell: any) => Math.max(cell.row.original.users.length - 4, 0))
+
+function userPosition(idx: number) {
+  return idx * 20
+}
+
+const isDark = useDark()
+
+defineExpose({
+  getTable: () => table.value,
+})
+</script>
+
+<template>
+  <DataTable
+    ref="table"
+    v-model="select"
+    :columns
+    :data
+    enable-row-selection
+    enable-column-filters
+    enable-sorting
+  >
+    <template #labels-cell="{ cell }">
+      <div class="w-full whitespace-nowrap text-neutral-500">
+        <template v-if="cell.row.original.labels.length > 0">
+          <UiBadge
+            v-for="{ name, color } in cell.row.original.labels"
+            :key="name"
+            variant="soft"
+            class="shadow-none rounded-lg px-1.5 mr-1.5 bg-neutral-100 text-neutral-800 dark:(bg-neutral-700/80 text-neutral-100)"
+            :style="{
+              background: color ? color.startsWith('#') ? `${color}33` : color : '',
+              color: formatLabelColor(color, isDark ? 10 : 100) || '',
+            }"
+          >
+            {{ name }}
+          </UiBadge>
+        </template>
+        <template v-else>
+          <span class="text-neutral-500">-</span>
+        </template>
+      </div>
+    </template>
+    <template #status-cell="{ cell }">
+      <span
+        :class="cell.row.original.status === 'archived' ? 'text-neutral-600 dark:text-neutral-400' : 'text-green-600'"
+      >
+        {{ t(`kanban.${cell.row.original.status}`) }}
+      </span>
+    </template>
+    <template #users-cell="{ cell }">
+      <div v-if="visibleUsers(cell).length > 0" class="flex items-center relative h-full w-full justify-between">
+        <div class="relative flex items-center relative h-full">
+          <template v-for="(user, idx) in visibleUsers(cell)" :key="user">
+            <UserAvatar
+              :style="{
+                left: `${userPosition(idx)}px`,
+                zIndex: `${idx + 1}`,
+              }"
+              class="!h-24px !w-24px absolute"
+            >
+              <img :src="user.photoUrl" class="object-cover" />
+            </UserAvatar>
+          </template>
+        </div>
+        <div
+          v-if="remainingUsers(cell) > 0"
+          :style="{
+            zIndex: `${visibleUsers(cell).length + 1}`,
+          }"
+          class="flex items-center justify-center text-neutral-600 dark:text-neutral-400"
+        >
+          +{{ remainingUsers(cell) }}
+        </div>
+      </div>
+      <span v-else class="text-neutral-500">-</span>
+    </template>
+  </DataTable>
+</template>
diff --git a/apps/client/src/modules/boards/components/EmptyBoards.vue b/apps/client/src/modules/boards/components/EmptyBoards.vue
new file mode 100644
index 00000000..f98ba0e1
--- /dev/null
+++ b/apps/client/src/modules/boards/components/EmptyBoards.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import CreateNewBoard from './features/CreateNewBoard.vue'
+</script>
+
+<template>
+  <div class="absolute top-1/2 left-1/2 translate-x--1/2 translate-y--1/3 flex flex-col items-center justify-center gap-2">
+    <div class="w-12 h-12 rounded-full flex items-center justify-center bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700">
+      <div i-hugeicons-dashboard-circle-add class="w-6 h-6 text-blue-500" />
+    </div>
+    <p class="text-base fw500 text-neutral-800 dark:text-neutral-200">
+      {{ $t('boards.empty.title') }}
+    </p>
+    <span class="text-sm text-neutral-600 dark:text-neutral-200">
+      {{ $t('boards.empty.description') }}
+    </span>
+    <CreateNewBoard
+      :plural="2"
+      variant="secondary"
+      class="mt-1"
+    />
+  </div>
+</template>
diff --git a/apps/client/src/modules/boards/components/NewBoardDialog.vue b/apps/client/src/modules/boards/components/NewBoardDialog.vue
new file mode 100644
index 00000000..622b781e
--- /dev/null
+++ b/apps/client/src/modules/boards/components/NewBoardDialog.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  UiDialog,
+  UiDialogContent,
+  UiDialogDescription,
+  UiDialogHeader,
+  UiDialogTitle,
+} from '@/shared/ui'
+</script>
+
+<template>
+  <UiDialog>
+    <UiDialogContent>
+      <div class="flex flex-col gap-8">
+        <UiDialogHeader>
+          <UiDialogTitle>
+            {{ $t('boards.forms.creating.title') }}
+          </UiDialogTitle>
+          <UiDialogDescription>
+            {{ $t('boards.forms.creating.description') }}
+          </UiDialogDescription>
+        </UiDialogHeader>
+      </div>
+      <RouterView />
+    </UiDialogContent>
+  </UiDialog>
+</template>
diff --git a/apps/client/src/modules/boards/components/PaginationItems.vue b/apps/client/src/modules/boards/components/PaginationItems.vue
new file mode 100644
index 00000000..facaeee8
--- /dev/null
+++ b/apps/client/src/modules/boards/components/PaginationItems.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts" generic="TData">
+import type { Table } from '@tanstack/vue-table'
+import {
+  UiPagination,
+  UiPaginationFirst,
+  UiPaginationLast,
+  UiPaginationList,
+  UiPaginationNext,
+  UiPaginationPrev,
+} from '@/shared/ui'
+
+defineProps<{
+  table?: Table<TData>
+}>()
+</script>
+
+<template>
+  <UiPagination :total="table?.getFilteredRowModel().rows.length">
+    <UiPaginationList class="flex items-center gap-1">
+      <UiPaginationFirst
+        :disabled="!table?.getCanPreviousPage()"
+        @click="table?.setPageIndex(0)"
+      />
+      <UiPaginationPrev
+        :disabled="!table?.getCanPreviousPage()"
+        @click="table?.previousPage()"
+      />
+      <UiPaginationNext
+        :disabled="!table?.getCanNextPage()"
+        @click="table?.nextPage()"
+      />
+      <UiPaginationLast
+        :disabled="!table?.getCanNextPage()"
+        @click="table?.setPageIndex(table.getPageCount() - 1)"
+      />
+    </UiPaginationList>
+  </UiPagination>
+</template>
diff --git a/apps/client/src/modules/boards/components/TableControls.vue b/apps/client/src/modules/boards/components/TableControls.vue
new file mode 100644
index 00000000..ece095ae
--- /dev/null
+++ b/apps/client/src/modules/boards/components/TableControls.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts" generic="TData">
+import PaginationItems from './PaginationItems.vue'
+import ChooseRowsCount from './features/ChooseRowsCount.vue'
+import type { Table } from '@tanstack/vue-table'
+
+defineProps<{
+  table?: Table<TData>
+}>()
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between px-2"
+  >
+    <div
+      class="flex-1 text-sm text-neutral-600 dark:text-neutral-400"
+    >
+      {{ table?.getFilteredSelectedRowModel().rows.length }}
+      {{ $t('table.row_from_all') }}
+      {{ table?.getFilteredRowModel().rows.length }}
+      {{ $t('table.row_selected') }}
+    </div>
+    <div class="flex items-center gap-4">
+      <span
+        class="flex items-center justify-center text-sm font-medium"
+      >
+        {{ $t('table.rows_on_page') }}
+      </span>
+      <ChooseRowsCount
+        :table="table"
+        :model-value="`${table?.getState().pagination.pageSize}`"
+        @update:model-value="table?.setPageSize($event as unknown as number)"
+      />
+      <div
+        class="flex items-center justify-center text-sm font-medium"
+      >
+        {{ $t('table.page') }}
+        {{ (table?.getState().pagination.pageIndex ?? 0) + 1 }}
+        {{ $t('table.row_from_all') }}
+        {{ table?.getPageCount().toLocaleString() }}
+      </div>
+      <PaginationItems :table="table" />
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/boards/components/features/ChooseRowsCount.vue b/apps/client/src/modules/boards/components/features/ChooseRowsCount.vue
new file mode 100644
index 00000000..51374022
--- /dev/null
+++ b/apps/client/src/modules/boards/components/features/ChooseRowsCount.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts" generic="TData, U extends string | undefined">
+import type { Table } from '@tanstack/vue-table'
+import { UiButton, UiSelect, UiSelectContent, UiSelectItem, UiSelectTrigger } from '@/shared/ui'
+
+const props = defineProps<{
+  table?: Table<TData>
+  modelValue: U
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: U): void
+}>()
+</script>
+
+<template>
+  <UiSelect
+    :model-value="props.modelValue"
+    @update:model-value="emit('update:modelValue', $event as U)"
+  >
+    <UiSelectTrigger class="h-8 w-60px dark:border-neutral-700/60" as-child>
+      <UiButton variant="ghost" class="h-8 px-2 justify-between focus:ring-0 mr-10">
+        {{ table?.getState().pagination.pageSize }}
+        <span i-lucide-chevrons-up-down class="w-4 h-4 opacity-50" />
+      </UiButton>
+    </UiSelectTrigger>
+    <UiSelectContent side="top">
+      <UiSelectItem v-for="pageSize in [15, 20, 30, 40, 50]" :key="pageSize" :value="`${pageSize}`">
+        {{ pageSize }}
+      </UiSelectItem>
+    </UiSelectContent>
+  </UiSelect>
+</template>
diff --git a/apps/client/src/modules/boards/components/features/CreateNewBoard.vue b/apps/client/src/modules/boards/components/features/CreateNewBoard.vue
new file mode 100644
index 00000000..b82a0b71
--- /dev/null
+++ b/apps/client/src/modules/boards/components/features/CreateNewBoard.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import { useRoute, useRouter } from 'vue-router/auto'
+import NewBoardDialog from '../NewBoardDialog.vue'
+import AddBoard from './handlers/AddBoard.vue'
+import type { ButtonVariants, UiDialog } from '@/shared/ui'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  variant: ButtonVariants['variant']
+  plural: number
+}>()
+
+const router = useRouter()
+const route = useRoute()
+
+const dialog = useTemplateRef<InstanceType<typeof UiDialog> | null>('dialog')
+
+const isDialogOpen = ref(false)
+
+function toggleModalRoute() {
+  if (dialog.value && !dialog.value.open && route.name === 'boards-new') {
+    router.back()
+  }
+}
+</script>
+
+<template>
+  <AddBoard
+    :variant
+    :plural
+    @add="isDialogOpen = true, router.push({ name: 'boards-new' })"
+  />
+  <NewBoardDialog
+    v-if="route.name === 'boards-new'"
+    ref="dialog"
+    :open="isDialogOpen"
+    @update:open="toggleModalRoute"
+  />
+</template>
diff --git a/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue b/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue
new file mode 100644
index 00000000..2b3756d9
--- /dev/null
+++ b/apps/client/src/modules/boards/components/features/handlers/AddBoard.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type ButtonVariants, UiButton } from '@/shared/ui'
+
+defineProps<{
+  variant: ButtonVariants['variant']
+  plural: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'add'): void
+}>()
+</script>
+
+<template>
+  <UiButton
+    :variant="variant"
+    size="sm"
+    class="px-2"
+    @click="emit('add')"
+  >
+    <span i-hugeicons-add-01 class="w-4 h-4" />
+    <span class="text-sm">{{ $t('boards.create', plural) }}</span>
+  </UiButton>
+</template>
diff --git a/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue b/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue
new file mode 100644
index 00000000..3a151297
--- /dev/null
+++ b/apps/client/src/modules/boards/components/features/handlers/RemoveBoard.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { UiButton } from '@/shared/ui'
+
+const emit = defineEmits<{
+  (e: 'remove'): void
+}>()
+</script>
+
+<template>
+  <UiButton
+    variant="ghost"
+    size="sm"
+    class="px-2 !text-red-500"
+    @click="emit('remove')"
+  >
+    <span i-hugeicons-delete-03 class="w-4 h-4" />
+    <!-- <span class="text-sm">{{ $t('boards.remove') }}</span> -->
+    <span class="text-sm">Удалить</span>
+  </UiButton>
+</template>
diff --git a/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue b/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue
new file mode 100644
index 00000000..1e5cdacf
--- /dev/null
+++ b/apps/client/src/modules/boards/components/filters/BoardsAdvancedFilter.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { createReusableTemplate } from '@vueuse/core'
+import { useFilteredContext } from '../../composables/filtered'
+import {
+  UiBadge,
+  UiButton,
+  UiCommand,
+  UiCommandEmpty,
+  UiCommandGroup,
+  UiCommandInput,
+  UiCommandItem,
+  UiCommandList,
+  UiPopover,
+  UiPopoverContent,
+  UiPopoverTrigger,
+} from '@/shared/ui'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+interface Option {
+  value: string
+  label: string
+  color?: string
+}
+
+const { t, tm } = useI18n()
+
+const statuses = tm('boards.filters.advanced.statuses.arr') as Readonly<Option[]>
+
+// Data from backend
+const labels = [
+  {
+    color: 'bg-purple-500 dark:bg-purple-400',
+    value: 'company',
+    label: 'company',
+  },
+  {
+    color: 'bg-green-500 dark:bg-green-400',
+    value: 'renovate',
+    label: 'renovate',
+  },
+] satisfies Option[]
+
+const { advancedModel } = useFilteredContext()
+
+function onSelected(option: Option) {
+  const index = advancedModel.value.indexOf(option.value)
+  if (index > -1) {
+    advancedModel.value.splice(index, 1)
+  }
+  else {
+    advancedModel.value.push(option.value)
+  }
+}
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ data, tPrefix }">
+    <UiCommandGroup :heading="t(`boards.filters.advanced.${tPrefix}.title`)">
+      <UiCommandItem
+        v-for="i in data"
+        :key="i.value"
+        class="flex items-center justify-between"
+        :value="i.value"
+        @select="onSelected(i)"
+      >
+        <span v-if="tPrefix === 'statuses'">{{ i.label }}</span>
+        <div v-else class="flex items-center gap-2">
+          <UiBadge :class="cn(i.color, 'shadow-none px-1 py-0.5')" />
+          <span>{{ i.label }}</span>
+        </div>
+        <div class="flex h-4 w-4 items-center justify-center">
+          <div
+            v-if="advancedModel.includes(i.value)"
+            i-lucide-check
+            class="h-4 w-4"
+          />
+        </div>
+      </UiCommandItem>
+    </UiCommandGroup>
+  </DefineTemplate>
+  <UiPopover>
+    <UiPopoverTrigger as-child>
+      <UiButton size="sm" variant="dashed" class="px-2 shadow-sm border w-max">
+        <span>{{ t('boards.filters.advanced.title') }}</span>
+        <div class="w-4 h-4 flex items-center justify-center text-neutral-600 dark:text-neutral-300 text-xs bg-neutral-100 dark:bg-neutral-700 rounded-full">
+          {{ advancedModel.length }}
+        </div>
+        <div class="w-px h-4 bg-neutral-200 dark:bg-neutral-700" />
+        <span i-lucide-chevron-down class="w-4 h-4 text-neutral-500" />
+      </UiButton>
+    </UiPopoverTrigger>
+    <UiPopoverContent align="start" class="w-57 p-0">
+      <UiCommand>
+        <UiCommandInput :placeholder="t('sidebar.input')" />
+        <UiCommandList>
+          <UiCommandEmpty class="p-2">
+            {{ t('boards.filters.advanced.empty') }}
+          </UiCommandEmpty>
+          <ReuseTemplate :data="statuses" t-prefix="statuses" />
+          <ReuseTemplate :data="labels" t-prefix="labels" />
+        </UiCommandList>
+      </UiCommand>
+    </UiPopoverContent>
+  </UiPopover>
+</template>
diff --git a/apps/client/src/modules/boards/components/filters/BoardsSort.vue b/apps/client/src/modules/boards/components/filters/BoardsSort.vue
new file mode 100644
index 00000000..f4d2075d
--- /dev/null
+++ b/apps/client/src/modules/boards/components/filters/BoardsSort.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useFilteredContext } from '../../composables/filtered'
+import {
+  UiButton,
+  UiSelect,
+  UiSelectContent,
+  UiSelectItem,
+  UiSelectTrigger,
+} from '@/shared/ui'
+
+const values = ['name', 'tasks', 'date', 'default'] as const
+
+const { sortModel } = useFilteredContext()
+</script>
+
+<template>
+  <UiSelect v-model:model-value="sortModel">
+    <UiSelectTrigger as-child>
+      <UiButton size="sm" variant="dashed" class="gap-0 px-2 focus:ring-0 shadow-sm border">
+        <span i-hugeicons-sort-by-down-01 class="w-4 h-4 mr-2 text-neutral-500 dark:text-neutral-400" />
+        <span class="text-neutral-600 dark:text-neutral-400 mr-1">
+          {{ $t('boards.filters.sort.title') }}
+        </span>
+        <span>{{ $t(`boards.filters.sort.${sortModel}`) }}</span>
+      </UiButton>
+    </UiSelectTrigger>
+    <UiSelectContent align="start" class="w-fit">
+      <UiSelectItem v-for="value, idx in values" :key="idx" :value="value" with-indicator>
+        {{ $t(`boards.filters.sort.${value}`) }}
+      </UiSelectItem>
+    </UiSelectContent>
+  </UiSelect>
+</template>
diff --git a/apps/client/src/modules/boards/components/filters/SearchBoards.vue b/apps/client/src/modules/boards/components/filters/SearchBoards.vue
new file mode 100644
index 00000000..6cf3b11b
--- /dev/null
+++ b/apps/client/src/modules/boards/components/filters/SearchBoards.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { UiInput } from '@/shared/ui'
+</script>
+
+<template>
+  <UiInput :placeholder="$t('boards.filters.search')" class="w-200px 2xl:h-8 focus:ring-0" />
+</template>
diff --git a/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue b/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue
new file mode 100644
index 00000000..bb4f6f4e
--- /dev/null
+++ b/apps/client/src/modules/boards/components/forms/CreateBoardForm.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import { createReusableTemplate } from '@vueuse/core'
+import { useField, useForm } from 'vee-validate'
+import { useRouter } from 'vue-router/auto'
+import { useBoardsStore } from '../../stores/board'
+import TagsChooser from './TagsChooser.vue'
+import type { Label } from '../../types'
+import { UiAlert, UiButton, UiFormField, UiFormLabel, UiFormMessage, UiInput } from '@/shared/ui'
+import { z } from '@/shared/libs/vee-validate'
+
+const validationSchema = toTypedSchema(
+  z.object({
+    name: z.string().min(1).max(15),
+  }),
+)
+const { handleSubmit, errors } = useForm({
+  validationSchema,
+})
+
+const labels = ref<Label[]>([])
+const { value: name } = useField<string>('name')
+
+const router = useRouter()
+const boardsStore = useBoardsStore()
+
+const onBoardCreation = handleSubmit((values) => {
+  boardsStore.addBoard({
+    _id: Math.random().toString(),
+    name: values.name,
+    labels: labels.value,
+    status: 'active',
+    estimate: 0,
+    users: [],
+    date: '12.12.2024',
+  })
+  router.push({ name: 'boards' })
+})
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ $slots, field, error }">
+    <UiFormField v-auto-animate>
+      <UiFormLabel
+        :for="field"
+      >
+        {{ $t(`boards.forms.creating.${field}.label`) }}
+      </UiFormLabel>
+      <component :is="$slots.default" />
+      <UiFormMessage v-if="error" :content="error" />
+    </UiFormField>
+  </DefineTemplate>
+  <div class="flex flex-col gap-8">
+    <form @submit.prevent="onBoardCreation">
+      <div class="grid gap-6">
+        <div class="grid gap-4">
+          <ReuseTemplate field="name" :error="errors.name">
+            <UiInput
+              id="name"
+              v-model="name"
+              :placeholder="$t('authentication.workspace.creating.form.name.placeholder')"
+              class="shadow-none focus:ring-0"
+            />
+          </ReuseTemplate>
+          <UiAlert
+            variant="warning"
+            :content="$t('boards.forms.creating.labels.alert')"
+            class="mt-3 mb-1"
+          />
+          <ReuseTemplate field="labels">
+            <TagsChooser id="labels" v-model="labels" />
+            <span class="text-xs text-neutral-500">
+              {{ $t('boards.forms.creating.labels.description') }}
+            </span>
+          </ReuseTemplate>
+        </div>
+        <div class="flex items-center justify-end gap-3">
+          <UiButton
+            variant="secondary"
+            size="sm"
+            type="button"
+            @click="router.back()"
+          >
+            {{ $t('boards.forms.creating.btns', 1) }}
+          </UiButton>
+          <UiButton
+            variant="solid"
+            size="sm"
+            type="submit"
+          >
+            {{ $t('boards.forms.creating.btns', 2) }}
+          </UiButton>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
diff --git a/apps/client/src/modules/boards/components/forms/TagsChooser.vue b/apps/client/src/modules/boards/components/forms/TagsChooser.vue
new file mode 100644
index 00000000..cdb92555
--- /dev/null
+++ b/apps/client/src/modules/boards/components/forms/TagsChooser.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+import type { Label } from '../../types'
+import { formatLabelColor } from '@/shared/helpers/helperColor'
+import {
+  UiColorPicker,
+  UiTagsInput,
+  UiTagsInputInput,
+  UiTagsInputItem,
+  UiTagsInputItemDelete,
+  UiTagsInputItemText,
+} from '@/shared/ui'
+
+const model = defineModel<Label[]>({ required: true })
+
+const isDark = useDark()
+
+function convertValue(value: string): Label {
+  const colorMatch = value.match(/\[\s*(#([0-9a-f]{6}))\s*\]$/i)
+  const name = colorMatch ? value.replace(colorMatch[0], '').trim() : value
+  const color = colorMatch ? colorMatch[1] : ''
+  return { name, color }
+}
+</script>
+
+<template>
+  <UiTagsInput
+    v-model="model"
+    :convert-value="convertValue"
+    :display-value="(tag: any) => tag.name"
+    class="w-full"
+  >
+    <UiTagsInputItem
+      v-for="label in model"
+      :key="label.name"
+      :value="label"
+      :style="{ background: label.color
+                  ? label.color.startsWith('#')
+                    ? `${label.color}33`
+                    : label.color
+                  : '',
+                color: formatLabelColor(label.color, isDark ? 10 : 100) || '' }"
+    >
+      <UiTagsInputItemText />
+      <UiColorPicker v-model:color="label.color" />
+      <UiTagsInputItemDelete />
+    </UiTagsInputItem>
+    <UiTagsInputInput :placeholder="$t('boards.forms.creating.labels.placeholder')" />
+  </UiTagsInput>
+</template>
diff --git a/apps/client/src/modules/boards/composables/filtered.ts b/apps/client/src/modules/boards/composables/filtered.ts
new file mode 100644
index 00000000..a897b375
--- /dev/null
+++ b/apps/client/src/modules/boards/composables/filtered.ts
@@ -0,0 +1,78 @@
+import { computed, inject, provide, toValue } from 'vue'
+import type { InjectionKey, Ref } from 'vue'
+import type { BoardRow } from '../types'
+
+export function useFilteredBoards<U extends BoardRow>(
+  boards: Ref<U[]>,
+  sortRefValue: Ref<string>,
+  advancedFilterRefValues: Ref<string[]>,
+) {
+  const filterBoards = (boards: U[], filterValues: string[]): U[] => {
+    return boards.filter((board) => {
+      if (filterValues.length === 0)
+        return true
+      const status = filterValues.includes(board.status)
+      const labels = Array.isArray(board.labels)
+        ? board.labels.some(label => filterValues.includes(label.name))
+        : filterValues.includes(board.labels)
+      return status || labels
+    })
+  }
+  const sortBoards = (boards: U[], sortValue: string): U[] => {
+    return [...boards].sort((a, b): number => {
+      if (sortValue === 'name') {
+        return a.name.localeCompare(b.name)
+      }
+      if (sortValue === 'tasks') {
+        return (b.tasks || 0) - (a.tasks || 0)
+      }
+      if (sortValue === 'date') {
+        return (b.date ? +new Date(b.date) : 0) - (a.date ? +new Date(a.date) : 0)
+      }
+      return 0
+    })
+  }
+  const filteredBoards = computed(() => {
+    const sortValue = toValue(sortRefValue)
+    const filterValues = toValue(advancedFilterRefValues)
+
+    let result = filterBoards(boards.value, filterValues)
+    if (sortValue !== 'default') {
+      result = sortBoards(result, sortValue)
+    }
+    return result
+  })
+
+  return {
+    filteredBoards,
+  }
+}
+
+interface FilteredContext {
+  sortModel: Ref<string>
+  advancedModel: Ref<string[]>
+}
+
+type T = FilteredContext
+
+const key: InjectionKey<FilteredContext> = Symbol('filtered-boards')
+
+export function provideFilteredContext(value: T) {
+  provide(key, value)
+  return value
+}
+
+export function useFilteredContext<
+  U extends T | undefined = T,
+>(
+  fallback?: U,
+): U extends null ? T | null : T {
+  const expanded = inject(key, fallback)
+  if (expanded)
+    return expanded as T
+
+  if (expanded === null)
+    return expanded as any
+
+  throw new Error('not provided')
+}
diff --git a/apps/client/src/modules/boards/pages/boards.vue b/apps/client/src/modules/boards/pages/boards.vue
new file mode 100644
index 00000000..db7ec7e3
--- /dev/null
+++ b/apps/client/src/modules/boards/pages/boards.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts" generic="TData">
+import { computed, onBeforeMount, ref, useTemplateRef } from 'vue'
+import { useHead } from '@unhead/vue'
+import { storeToRefs } from 'pinia'
+import { useRoute, useRouter } from 'vue-router/auto'
+import { useBoardsStore } from '../stores/board'
+import { provideFilteredContext, useFilteredBoards } from '../composables/filtered'
+import BoardsActionsPanel from '../components/BoardsActionsPanel.vue'
+import EmptyBoards from '../components/EmptyBoards.vue'
+import BoardsDataTable from '../components/BoardsDataTable.vue'
+import TableControls from '../components/TableControls.vue'
+import type { Table } from '@tanstack/vue-table'
+import ViewControl from '@/modules/common/components/controls/ViewControl.vue'
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'boards',
+})
+
+useHead({
+  title: 'Jenda - cloud program for project and task management',
+})
+
+const boardsStore = useBoardsStore()
+const { boards } = storeToRefs(boardsStore)
+
+const sortModel = ref('default')
+const advancedModel = ref([])
+
+const router = useRouter()
+const route = useRoute()
+
+const selectedBoards = ref<Record<string, boolean>>({})
+
+const { filteredBoards } = useFilteredBoards(boards, sortModel, advancedModel)
+
+const isSelected = computed(() => {
+  return Object.values(selectedBoards.value).some(value => value)
+})
+
+const idxs = computed(() => Object.keys(selectedBoards.value))
+
+const dataTable = useTemplateRef<InstanceType<typeof BoardsDataTable>>('table')
+
+provideFilteredContext({
+  sortModel,
+  advancedModel,
+})
+
+onBeforeMount(() => {
+  if (route.name === 'boards-new') {
+    router.back()
+  }
+})
+</script>
+
+<template>
+  <ViewControl v-if="$route.name !== 'board-id'">
+    <template #table>
+      <div class="relative w-full h-full flex flex-col" :class="boards.length > 0 && 'justify-between'">
+        <div class="flex flex-col gap-12px">
+          <BoardsActionsPanel :is-selected :idxs />
+          <div class="flex flex-col overflow-auto">
+            <BoardsDataTable ref="table" v-model:select="selectedBoards" :data="filteredBoards" />
+          </div>
+        </div>
+        <TableControls v-if="boards.length > 0" :table="(dataTable?.getTable()! as Table<TData>)" />
+        <EmptyBoards v-else />
+      </div>
+    </template>
+  </ViewControl>
+  <RouterView v-else />
+</template>
diff --git a/apps/client/src/modules/boards/pages/boards/[id].vue b/apps/client/src/modules/boards/pages/boards/[id].vue
new file mode 100644
index 00000000..049cab60
--- /dev/null
+++ b/apps/client/src/modules/boards/pages/boards/[id].vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Board } from '../../types'
+
+// mocks -> after data from backend
+const board = ref<Board>({
+  _id: '0',
+  name: 'Startup',
+  status: 'active',
+  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',
+      photoUrl: 'https://avatars.githubusercontent.com/u/121057011?v=4',
+      email: 'alexpeshkov@gmail.com',
+    },
+  ],
+  labels: [],
+})
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'board-id',
+})
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <div class="relative h-full w-full">
+      kanban
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/boards/pages/boards/new.vue b/apps/client/src/modules/boards/pages/boards/new.vue
new file mode 100644
index 00000000..80f01e90
--- /dev/null
+++ b/apps/client/src/modules/boards/pages/boards/new.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import CreateBoardForm from '../../components/forms/CreateBoardForm.vue'
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'boards-new',
+})
+
+useHead({
+  title: 'Jenda | Create board',
+})
+</script>
+
+<template>
+  <CreateBoardForm />
+</template>
diff --git a/apps/client/src/modules/boards/stores/board.ts b/apps/client/src/modules/boards/stores/board.ts
new file mode 100644
index 00000000..78fd2211
--- /dev/null
+++ b/apps/client/src/modules/boards/stores/board.ts
@@ -0,0 +1,32 @@
+import { ref } from 'vue'
+import { acceptHMRUpdate, defineStore } from 'pinia'
+import type { Board, BoardRow } from '../types'
+
+export const useBoardsStore = defineStore('boards', () => {
+  const boards = ref<BoardRow[]>([])
+  const board = ref<Board>()
+
+  function removeBoards(idxs: string[]) {
+    idxs.forEach((id) => {
+      const index = boards.value.findIndex(board => board._id === id)
+      if (index !== -1) {
+        boards.value.splice(index, 1)
+      }
+    })
+  }
+
+  function addBoard(board: Board) {
+    boards.value.push(board)
+  }
+
+  return {
+    boards,
+    board,
+    addBoard,
+    removeBoards,
+  }
+})
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useBoardsStore, import.meta.hot))
+}
diff --git a/apps/client/src/modules/boards/types/index.ts b/apps/client/src/modules/boards/types/index.ts
new file mode 100644
index 00000000..2a57bc23
--- /dev/null
+++ b/apps/client/src/modules/boards/types/index.ts
@@ -0,0 +1,60 @@
+import type { User } from '@/modules/auth/types'
+
+interface DateParams {
+  createdAt?: Date
+  updatedAt?: Date
+  deletedAt?: Date
+}
+
+export interface Label {
+  name: string
+  color: string
+}
+
+export type Status = 'active' | 'archived'
+
+type Priority = 'none' | 'low' | 'medium' | 'high'
+
+export interface BoardRow extends Omit<Board, 'columns'> {
+  tasks?: number
+}
+
+export interface Board extends DateParams {
+  _id: string
+  name: string
+  columns?: Column[]
+  status: Status
+  labels: Label[]
+  users: User[]
+  color?: string
+  estimate?: number
+  // fix
+  date?: string
+}
+
+interface Tag {
+  _id: string
+  name: string
+}
+
+export interface Card extends DateParams {
+  _id: string
+  title: string
+  priority: Priority
+  tags?: Tag[]
+  chat?: boolean
+  chatCount?: number
+  users: User[]
+}
+
+export interface Column extends DateParams {
+  _id: string
+  title: string
+  cards?: Card[]
+}
+
+export interface StatusBadge {
+  _id: string
+  indicator: string
+  status: Status
+}
diff --git a/apps/client/src/modules/charts/components/ChartItemWrapper.vue b/apps/client/src/modules/charts/components/ChartItemWrapper.vue
new file mode 100644
index 00000000..334489b5
--- /dev/null
+++ b/apps/client/src/modules/charts/components/ChartItemWrapper.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { Chart } from '../types'
+import { UiBadge } from '@/shared/ui'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  chart: Chart
+  width: string
+  height?: string
+}>()
+</script>
+
+<template>
+  <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="text-neutral-600 bg-neutral-100">
+          {{ chart.section }}
+        </UiBadge>
+      </div>
+      <div i-lucide-ellipsis-vertical class="cursor-pointer text-neutral-500 dark:text-neutral-300" />
+    </div>
+    <div class="flex items-center justify-center w-full h-full">
+      <slot />
+    </div>
+    <span v-if="chart.key === 'users'" class="text-xs dark:text-neutral-200">
+      {{ $t(`analytics.charts.${chart.key}.description`) }}
+    </span>
+  </div>
+</template>
diff --git a/apps/client/src/modules/charts/components/SharedSection.vue b/apps/client/src/modules/charts/components/SharedSection.vue
new file mode 100644
index 00000000..f5fa9d6a
--- /dev/null
+++ b/apps/client/src/modules/charts/components/SharedSection.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { UiBadge, UiButton } from '@/shared/ui'
+</script>
+
+<template>
+  <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="absolute px-1 top--0.5 right--2">
+        dev
+      </UiBadge>
+    </div>
+    <span class="text-sm text-neutral-700 dark:text-neutral-200">- {{ $t('analytics.share.description') }} 😉</span>
+  </div>
+</template>
diff --git a/apps/client/src/modules/charts/components/charts/BoardsChart.vue b/apps/client/src/modules/charts/components/charts/BoardsChart.vue
new file mode 100644
index 00000000..16e9e776
--- /dev/null
+++ b/apps/client/src/modules/charts/components/charts/BoardsChart.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed, markRaw, ref, watch } from 'vue'
+import { useDark } from '@vueuse/core'
+import { VueUiStackbar } from 'vue-data-ui'
+import { useCharts } from '../../composables/charts'
+import ChartItemWrapper from '../ChartItemWrapper.vue'
+import type { Chart } from '../../types'
+import { useExpandedContext } from '@/shared/composables/expanded'
+
+const { isExpanded } = useExpandedContext()
+
+const isDark = useDark()
+
+const valuesColor = computed(() => (isDark.value ? '#a1a1aa' : '#52525b'))
+const gridColor = computed(() => (isDark.value ? '#3f3f46' : '#f4f4f5'))
+
+const chartKey = ref(0)
+
+const graphSize = computed(() => ({
+  width: isExpanded.value ? 800 : 880,
+  height: isExpanded.value ? 380 : 300,
+}))
+
+const { chartBoardsValue } = useCharts()
+
+const config = computed<any>(() => ({
+  responsive: false,
+  customPalette: [],
+  useCssAnimation: true,
+  orientation: 'vertical',
+  table: { show: false },
+  userOptions: { show: false },
+  style: {
+    chart: {
+      backgroundColor: 'transparent',
+      color: '#538BF3',
+      height: graphSize.value.height,
+      width: graphSize.value.width,
+      padding: { top: 20, right: 36, bottom: 20, left: 36 },
+      title: {
+        text: '',
+        color: '#1A1A1A',
+        fontSize: 20,
+        bold: true,
+        textAlign: 'center',
+        subtitle: { color: '#A1A1A1', text: '', fontSize: 16, bold: false },
+      },
+      legend: { show: false },
+      zoom: { show: false },
+      tooltip: { show: false },
+      highlighter: { color: '#1A1A1A', opacity: '5' },
+      bars: {
+        gapRatio: '0.5',
+        distributed: false,
+        borderRadius: 0,
+        strokeWidth: 1,
+        gradient: { show: false, intensity: '0' },
+        totalValues: { show: false },
+        dataLabels: { show: false },
+      },
+      grid: {
+        scale: { ticks: '10' },
+        x: {
+          showHorizontalLines: true,
+          axisColor: gridColor.value,
+          timeLabels: {
+            show: true,
+            values: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+            fontSize: chartBoardsValue.value,
+            color: valuesColor.value,
+          },
+        },
+        y: {
+          showVerticalLines: false,
+          axisColor: gridColor.value,
+          axisLabels: { show: true, color: valuesColor.value, fontSize: chartBoardsValue.value },
+        },
+      },
+    },
+  },
+}))
+
+// BAD (needs to be fixed with update reactivity of vue-data-ui)
+watch(graphSize, () => {
+  chartKey.value += 1
+})
+
+const dataset = ref([{ name: 'boards', series: [5, 2, 10, 2, 1, 5, 5, 9, 7, 3, 1, 4], color: '#538BF3' }])
+
+const chart = markRaw<Chart>({
+  key: 'boards',
+  section: 'workspace',
+})
+</script>
+
+<template>
+  <ChartItemWrapper :chart="chart" width="100%">
+    <VueUiStackbar :key="chartKey" :config="config" :dataset="dataset" />
+  </ChartItemWrapper>
+</template>
diff --git a/apps/client/src/modules/charts/components/charts/OnlineChart.vue b/apps/client/src/modules/charts/components/charts/OnlineChart.vue
new file mode 100644
index 00000000..ea207ca8
--- /dev/null
+++ b/apps/client/src/modules/charts/components/charts/OnlineChart.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, markRaw, ref } from 'vue'
+import { useDark } from '@vueuse/core'
+import { VueUiSparkHistogram } from 'vue-data-ui'
+import { useCharts } from '../../composables/charts'
+import ChartItemWrapper from '../ChartItemWrapper.vue'
+import type { Chart } from '../../types'
+
+const isDark = useDark()
+
+const valuesColor = computed(() => (isDark.value ? '#a1a1aa' : '#52525b'))
+
+const { chartOnlineInWorkspaceValue } = useCharts()
+
+const timeLabels = computed(() => chartOnlineInWorkspaceValue.value - 1)
+
+const config = computed(() => ({
+  style: {
+    backgroundColor: 'transparent',
+    animation: { show: true, speedMs: 437 },
+    layout: { height: 60, width: 646, padding: { top: 15, right: 0, bottom: 18, left: 0 } },
+    bars: {
+      shape: 'square' as
+      | 'square'
+      | 'circle'
+      | 'triangle'
+      | 'diamond'
+      | 'pentagon'
+      | 'hexagon'
+      | 'star'
+      | undefined,
+      strokeWidth: 0,
+      colors: { positive: '#538BF3', gradient: { show: false } },
+      borderRadius: 24,
+      gap: 12,
+    },
+    labels: {
+      value: {
+        fontSize: chartOnlineInWorkspaceValue.value,
+        color: valuesColor.value,
+        bold: false,
+        rounding: 1,
+        prefix: '',
+        suffix: '',
+        offsetY: 0,
+        formatter: null,
+      },
+      timeLabel: { fontSize: timeLabels.value, color: valuesColor.value, bold: false },
+    },
+    selector: { stroke: '#52525b', strokeWidth: 0, strokeDasharray: 3, borderRadius: 2 },
+  },
+}))
+
+const dataset = ref([
+  { value: 12, timeLabel: 'Jan', intensity: 1 },
+  { value: 2, timeLabel: 'Feb', intensity: 1 },
+  { value: 9, timeLabel: 'Mar', intensity: 1 },
+  { value: 9, timeLabel: 'Apr', intensity: 1 },
+  { value: 5, timeLabel: 'May', intensity: 1 },
+  { value: 10, timeLabel: 'Jun', intensity: 1 },
+  { value: 4, timeLabel: 'Jul', intensity: 1 },
+  { value: 5, timeLabel: 'Aug', intensity: 1 },
+  { value: 10, timeLabel: 'Sep', intensity: 1 },
+  { value: 10, timeLabel: 'Oct', intensity: 1 },
+  { value: 8, timeLabel: 'Nov', intensity: 1 },
+  { value: 2, timeLabel: 'Dec', intensity: 1 },
+])
+
+const chart = markRaw<Chart>({
+  key: 'online',
+  section: 'workspace',
+})
+</script>
+
+<template>
+  <ChartItemWrapper :chart width="100%">
+    <VueUiSparkHistogram :config="config" :dataset="dataset" />
+  </ChartItemWrapper>
+</template>
diff --git a/apps/client/src/modules/charts/components/charts/TasksChart.vue b/apps/client/src/modules/charts/components/charts/TasksChart.vue
new file mode 100644
index 00000000..5b777102
--- /dev/null
+++ b/apps/client/src/modules/charts/components/charts/TasksChart.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { computed, markRaw, ref } from 'vue'
+import { useDark } from '@vueuse/core'
+import { VueUiDonut } from 'vue-data-ui'
+import { useI18n } from 'vue-i18n'
+import { useCharts } from '../../composables/charts'
+import ChartItemWrapper from '../ChartItemWrapper.vue'
+import type { Chart } from '../../types'
+
+const isDark = useDark()
+
+const mainColor = computed(() => (isDark.value ? '#d4d4d8' : '#18181b'))
+
+const { chartTasksValue } = useCharts()
+
+const nameSize = computed(() => chartTasksValue.value - 4)
+
+const config = computed(() => ({
+  responsive: false,
+  padding: 0,
+  customPalette: [],
+  useCssAnimation: true,
+  useBlurOnHover: true,
+  userOptions: {
+    show: false,
+  },
+  style: {
+    fontFamily: 'inherit',
+    chart: {
+      useGradient: false,
+      backgroundColor: 'transparent',
+      color: mainColor.value,
+      layout: {
+        labels: {
+          dataLabels: {
+            show: true,
+            useLabelSlots: false,
+            hideUnderValue: 3,
+          },
+          value: {
+            rounding: 0,
+            show: true,
+            formatter: null,
+          },
+          percentage: {
+            color: mainColor.value,
+            bold: true,
+            fontSize: chartTasksValue.value,
+            rounding: 0,
+            formatter: null,
+          },
+          name: {
+            color: '#71717a',
+            bold: false,
+            fontSize: nameSize.value,
+          },
+          hollow: {
+            show: false,
+            total: {
+              show: false,
+            },
+            average: {
+              show: false,
+            },
+          },
+        },
+        donut: {
+          strokeWidth: 64,
+          borderWidth: 1,
+          useShadow: false,
+        },
+      },
+      comments: {
+        show: false,
+        showInTooltip: true,
+      },
+      legend: {
+        show: false,
+      },
+      tooltip: {
+        show: false,
+      },
+    },
+  },
+}))
+
+const { tm } = useI18n()
+
+const dataNames = computed(() => tm('analytics.charts.tasks.dataset.names') as string[])
+
+const dataset = ref([
+  {
+    name: dataNames.value[0],
+    values: [22],
+    color: '#538BF3',
+  },
+  {
+    name: dataNames.value[1],
+    values: [10],
+    color: '#d4d4d8',
+  },
+])
+
+const chart = markRaw<Chart>({
+  key: 'tasks',
+  section: 'boards',
+})
+</script>
+
+<template>
+  <ChartItemWrapper :chart width="600px">
+    <VueUiDonut :config="config" :dataset="dataset" style="padding-top: 0" />
+  </ChartItemWrapper>
+</template>
diff --git a/apps/client/src/modules/charts/components/charts/UsersChart.vue b/apps/client/src/modules/charts/components/charts/UsersChart.vue
new file mode 100644
index 00000000..0b9e7478
--- /dev/null
+++ b/apps/client/src/modules/charts/components/charts/UsersChart.vue
@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { computed, markRaw, ref } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { VueUiKpi } from 'vue-data-ui'
+import ChartItemWrapper from '../ChartItemWrapper.vue'
+import type { Chart } from '../../types'
+import { useBreakpoints } from '@/shared/composables/breakpoints'
+
+const { width } = useWindowSize()
+
+const { breakpoints } = useBreakpoints()
+
+const chartHeight = computed(() => {
+  if (breakpoints.between('intermediateLaptop', 'intermediateDesktop').value) {
+    return '120px'
+  }
+  return '80px'
+})
+const fontSizeChart = computed(() => (width.value >= 1500 ? 30 : 25))
+
+const config = computed(() => ({
+  animationFrames: 40,
+  animationValueStart: 0,
+  prefix: '~',
+  useAnimation: true,
+  valueBold: true,
+  valueFontSize: fontSizeChart.value,
+  valueRounding: 0,
+  formatter: null,
+}))
+
+const dataset = ref(20)
+
+const chart = markRaw<Chart>({
+  key: 'users',
+  section: 'workspace',
+})
+</script>
+
+<template>
+  <ChartItemWrapper :chart width="600px" :height="chartHeight">
+    <VueUiKpi :config="config" :dataset="dataset" />
+  </ChartItemWrapper>
+</template>
diff --git a/apps/client/src/modules/charts/composables/charts.ts b/apps/client/src/modules/charts/composables/charts.ts
new file mode 100644
index 00000000..b6c6a536
--- /dev/null
+++ b/apps/client/src/modules/charts/composables/charts.ts
@@ -0,0 +1,38 @@
+import { computed } from 'vue'
+import { useBreakpoints } from '@/shared/composables/breakpoints'
+import { useExpandedContext } from '@/shared/composables/expanded'
+
+export function useCharts() {
+  const { breakpoints } = useBreakpoints()
+
+  const { isExpanded } = useExpandedContext()
+
+  const isBetweenIntermediateDesktopAnd4K = breakpoints.between(
+    'intermediateDesktop',
+    'desktop4K',
+  ).value
+
+  const chartOnlineInWorkspaceValue = computed(() => {
+    if (isBetweenIntermediateDesktopAnd4K) {
+      return isExpanded.value ? 7.7 : 6.5
+    }
+    return isExpanded.value ? 10 : 8
+  })
+
+  const chartBoardsValue = computed(() => {
+    if (isBetweenIntermediateDesktopAnd4K) {
+      return isExpanded.value ? 10 : 9
+    }
+    return isExpanded.value ? 13 : 11
+  })
+
+  const chartTasksValue = computed(() =>
+    isBetweenIntermediateDesktopAnd4K ? 14 : 18,
+  )
+
+  return {
+    chartOnlineInWorkspaceValue,
+    chartBoardsValue,
+    chartTasksValue,
+  }
+}
diff --git a/apps/client/src/modules/charts/pages/analytics.vue b/apps/client/src/modules/charts/pages/analytics.vue
new file mode 100644
index 00000000..f5a5addb
--- /dev/null
+++ b/apps/client/src/modules/charts/pages/analytics.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useHead } from '@unhead/vue'
+import BoardsChart from '../components/charts/BoardsChart.vue'
+import OnlineChart from '../components/charts/OnlineChart.vue'
+import SharedSection from '../components/SharedSection.vue'
+import TasksChart from '../components/charts/TasksChart.vue'
+import UsersChart from '../components/charts/UsersChart.vue'
+import { UiBadge } from '@/shared/ui'
+import { useBreakpoints } from '@/shared/composables/breakpoints'
+
+const { breakpoints } = useBreakpoints()
+
+const containerWith = computed(() => {
+  if (breakpoints.greaterOrEqual('intermediateDesktop').value)
+    return '600px'
+  if (breakpoints.between('intermediateLaptop', 'intermediateDesktop').value)
+    return '500px'
+  if (breakpoints.between('laptop', 'intermediateLaptop').value)
+    return '400px'
+  return undefined
+})
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'analytics',
+})
+
+useHead({
+  title: 'Jenda | Analytics',
+})
+</script>
+
+<template>
+  <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="inline-flex items-center gap-2 mb-30px">
+      <UiBadge
+        v-for="(badge, _) in $tm('analytics.badges')"
+        :key="_"
+        variant="outline"
+      >
+        {{ badge }}
+      </UiBadge>
+    </div>
+    <div class="flex gap-5 pr-2.5">
+      <div
+        class="flex flex-col grow gap-5"
+        :style="{ maxWidth: containerWith }"
+      >
+        <TasksChart />
+        <UsersChart />
+      </div>
+      <div class="flex flex-col grow gap-5">
+        <OnlineChart />
+        <BoardsChart />
+      </div>
+    </div>
+    <SharedSection />
+  </div>
+</template>
diff --git a/apps/client/src/modules/charts/types/index.ts b/apps/client/src/modules/charts/types/index.ts
new file mode 100644
index 00000000..6644478f
--- /dev/null
+++ b/apps/client/src/modules/charts/types/index.ts
@@ -0,0 +1,4 @@
+export interface Chart {
+  key: 'users' | 'boards' | 'tasks' | 'online'
+  section: string
+}
diff --git a/apps/client/src/modules/common/components/ShareLink.vue b/apps/client/src/modules/common/components/ShareLink.vue
new file mode 100644
index 00000000..bcef5a8d
--- /dev/null
+++ b/apps/client/src/modules/common/components/ShareLink.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { toast } from 'vue-sonner'
+import { UiButton, UiInput } from '@/shared/ui'
+
+const source = 'https://jenda/link/12103032'
+
+const { copy, copied } = useClipboard({ source })
+
+function copyLink() {
+  if (copied.value)
+    return
+  copy(source)
+  toast.success(`Successfully copied ${source} to clipboard`)
+}
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <div class="grid flex-1 gap-2">
+      <UiInput
+        :default-value="source"
+        readonly
+        class="select-none pointer-events-none focus:ring-0"
+      />
+    </div>
+    <UiButton variant="solid" type="submit" size="sm" :disabled="copied" class="px-3" @click="copyLink">
+      <div v-if="!copied" i-hugeicons-copy-02 class="w-4 h-4 text-neutral-100" />
+      <div v-else i-hugeicons-checkmark-circle-03 class="w-4 h-4 text-neutral-100" />
+    </UiButton>
+  </div>
+</template>
diff --git a/apps/client/src/modules/common/components/controls/ViewControl.vue b/apps/client/src/modules/common/components/controls/ViewControl.vue
new file mode 100644
index 00000000..2c805def
--- /dev/null
+++ b/apps/client/src/modules/common/components/controls/ViewControl.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { UiTabs, UiTabsContent } from '@/shared/ui'
+</script>
+
+<template>
+  <UiTabs class="w-full h-full" default-value="table">
+    <slot />
+    <UiTabsContent class="h-full" value="table">
+      <slot name="table" />
+    </UiTabsContent>
+    <UiTabsContent value="cards">
+      <slot name="cards" />
+    </UiTabsContent>
+  </UiTabs>
+</template>
diff --git a/apps/client/src/modules/common/components/dialogs/HotkeysDialog.vue b/apps/client/src/modules/common/components/dialogs/HotkeysDialog.vue
new file mode 100644
index 00000000..45ced5ce
--- /dev/null
+++ b/apps/client/src/modules/common/components/dialogs/HotkeysDialog.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+import {
+  UiAlert,
+  UiBadge,
+  UiDialog,
+  UiDialogContent,
+  UiDialogHeader,
+  UiDialogTitle,
+  UiDialogTrigger,
+} from '@/shared/ui'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const badges = [
+  { system: 'cmd/ctrl', key: 'K' },
+  { system: '⇧', key: 'P' },
+  { system: 'cmd/ctrl', key: 'X' },
+] as const
+
+const model = defineModel<boolean>('open')
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ data }">
+    <UiBadge variant="secondary" class="px-1.5 py-0.5 flex items-center justify-center text-sm 2xl:text-xs">
+      {{ data }}
+    </UiBadge>
+  </DefineTemplate>
+  <UiDialog v-bind="$attrs" v-model:open="model">
+    <UiDialogTrigger as-child>
+      <slot />
+    </UiDialogTrigger>
+    <UiDialogContent class="sm:max-w-md">
+      <UiDialogHeader class="mb-2">
+        <UiDialogTitle>{{ $t('dialogs.hotkeys.title') }}</UiDialogTitle>
+      </UiDialogHeader>
+      <UiAlert variant="warning" class="mb-2">
+        <I18nT keypath="dialogs.hotkeys.alert" tag="span" class="text-13px 2xl:text-sm">
+          <template #badge>
+            <UiBadge variant="outline" class="px-1.5 py-0 text-sm 2xl:text-xs">
+              cmd/ctrl
+            </UiBadge>
+          </template>
+        </I18nT>
+      </UiAlert>
+      <div class="flex flex-col items-start space-y-3">
+        <div v-for="badge, idx in badges" :key="idx" class="flex items-center space-x-1">
+          <ReuseTemplate :data="badge.system" />
+          <span class="text-13px 2xl:text-sm">+</span>
+          <ReuseTemplate :data="badge.key" />
+          <span class="text-13px 2xl:text-sm">- {{ $t('dialogs.hotkeys.badges', idx) }}</span>
+        </div>
+      </div>
+    </UiDialogContent>
+  </UiDialog>
+</template>
diff --git a/apps/client/src/modules/common/components/dialogs/ShareDialog.vue b/apps/client/src/modules/common/components/dialogs/ShareDialog.vue
new file mode 100644
index 00000000..a7e8f956
--- /dev/null
+++ b/apps/client/src/modules/common/components/dialogs/ShareDialog.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import ShareLink from '../ShareLink.vue'
+import {
+  UiButton,
+  UiDialog,
+  UiDialogClose,
+  UiDialogContent,
+  UiDialogDescription,
+  UiDialogFooter,
+  UiDialogHeader,
+  UiDialogTitle,
+  UiDialogTrigger,
+} from '@/shared/ui'
+
+const model = defineModel<boolean>('open')
+</script>
+
+<template>
+  <UiDialog v-model:open="model">
+    <UiDialogTrigger as-child>
+      <slot />
+    </UiDialogTrigger>
+    <UiDialogContent class="sm:max-w-md">
+      <UiDialogHeader>
+        <UiDialogTitle>{{ $t('dialogs.share.title') }}</UiDialogTitle>
+        <UiDialogDescription>
+          {{ $t('dialogs.share.description') }}
+        </UiDialogDescription>
+      </UiDialogHeader>
+      <ShareLink />
+      <UiDialogFooter class="sm:justify-start">
+        <UiDialogClose as-child>
+          <UiButton type="button" variant="secondary">
+            {{ $t('dialogs.share.close') }}
+          </UiButton>
+        </UiDialogClose>
+      </UiDialogFooter>
+    </UiDialogContent>
+  </UiDialog>
+</template>
diff --git a/apps/client/src/modules/common/readme.md b/apps/client/src/modules/common/readme.md
new file mode 100644
index 00000000..db88aeed
--- /dev/null
+++ b/apps/client/src/modules/common/readme.md
@@ -0,0 +1 @@
+shared module
diff --git a/apps/client/src/modules/members/pages/members.vue b/apps/client/src/modules/members/pages/members.vue
new file mode 100644
index 00000000..a85813cb
--- /dev/null
+++ b/apps/client/src/modules/members/pages/members.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'members',
+})
+
+useHead({
+  title: 'Jenda | Members',
+})
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <div class="">
+      <p class="text-sm text-neutral-600 dark:text-neutral-300">
+        {{ $t('members.description') }}
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/notes/.gitkeep b/apps/client/src/modules/notes/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/apps/client/src/modules/notes/pages/notes.vue b/apps/client/src/modules/notes/pages/notes.vue
new file mode 100644
index 00000000..9e8e7fae
--- /dev/null
+++ b/apps/client/src/modules/notes/pages/notes.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'notes',
+})
+
+useHead({
+  title: 'Jenda | Notes',
+})
+</script>
+
+<template>
+  <div>
+    notes
+  </div>
+</template>
diff --git a/apps/client/src/modules/search/components/PanelItems.vue b/apps/client/src/modules/search/components/PanelItems.vue
new file mode 100644
index 00000000..39f15f5b
--- /dev/null
+++ b/apps/client/src/modules/search/components/PanelItems.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import type { PanelItem } from '../types'
+
+const panelItems = [
+  { icon: 'hugeicons:arrow-up-down', tPrefix: 'select' },
+  { icon: 'mi-enter', tPrefix: 'open' },
+  { icon: 'mdi:keyboard-esc', tPrefix: 'close' },
+
+] satisfies readonly PanelItem[]
+</script>
+
+<template>
+  <div class="py-2 flex items-center gap-3 px-3.5">
+    <div
+      v-for="item in panelItems"
+      :key="item.tPrefix"
+      class="flex items-center gap-2 text-neutral-600 dark:text-neutral-400"
+    >
+      <Icon :icon="item.icon" class="w-3.5 h-3.5" />
+      <span class="text-xs">{{ $t(`search.${item.tPrefix}`) }}</span>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/search/components/SearchBox.vue b/apps/client/src/modules/search/components/SearchBox.vue
new file mode 100644
index 00000000..519d6b2b
--- /dev/null
+++ b/apps/client/src/modules/search/components/SearchBox.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useMagicKeys } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router/auto'
+import SearchList from './SearchList.vue'
+import SearchFilter from './SearchFilter.vue'
+import PanelItems from './PanelItems.vue'
+import type { Board } from '@/modules/boards/types'
+import type { SearchRoute } from '../types'
+import { UiCommandDialog, UiCommandInput } from '@/shared/ui'
+
+defineProps<{
+  boards: Board[]
+}>()
+
+const modelSearch = ref('')
+const open = ref(false)
+
+const { t } = useI18n()
+const router = useRouter()
+
+const { meta_k, ctrl_k } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.key === 'k' && (e.metaKey || e.ctrlKey))
+      e.preventDefault()
+  },
+})
+
+function handleCommandItem<T extends SearchRoute>(item: T) {
+  open.value = false
+  router.push(item.path)
+}
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+watch([meta_k, ctrl_k], (v) => {
+  if (v[0] || v[1])
+    handleOpenChange()
+})
+</script>
+
+<template>
+  <SearchFilter
+    @open-modal="handleOpenChange"
+  />
+  <UiCommandDialog
+    v-model:search="modelSearch"
+    v-model:open="open"
+    class="top-1/4 max-w-1/3"
+  >
+    <UiCommandInput :placeholder="t('search.placeholder')" />
+    <SearchList
+      :model-search="modelSearch"
+      :boards="boards"
+      @handle-route="handleCommandItem"
+    />
+    <PanelItems />
+  </UiCommandDialog>
+</template>
diff --git a/apps/client/src/modules/search/components/SearchFilter.vue b/apps/client/src/modules/search/components/SearchFilter.vue
new file mode 100644
index 00000000..6926e45c
--- /dev/null
+++ b/apps/client/src/modules/search/components/SearchFilter.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { createReusableTemplate, refDebounced } from '@vueuse/core'
+import { UiBadge, UiButton } from '@/shared/ui'
+import { useExpandedContext } from '@/shared/composables/expanded'
+
+const emit = defineEmits<{
+  (e: 'openModal'): void
+}>()
+
+const { isExpanded } = useExpandedContext()
+
+const debounced = refDebounced(isExpanded, 10)
+
+const isShowFilter = computed((): boolean => {
+  return isExpanded.value ? debounced.value : false
+})
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <div class="relative h-9 2xl:h-8 mb-20px">
+    <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>
+    <UiButton
+      :variant="isExpanded ? 'outline' : 'ghost'"
+      size="sm"
+      class="w-full justify-start rounded-8px px-2 !bg-white dark:(!bg-#262626 border-neutral-600/20) focus:ring-0 custom-btn-transition bg-transition"
+      :class="[
+        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')"
+    >
+      <div
+        i-lucide-search
+        class="text-neutral-800 dark:text-neutral-200 2xl:(!w-4 !h-4)"
+        :class="[
+          isExpanded
+            ? 'mr-1 !w-15px !h-15px'
+            : 'absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 !h-16px !w-16px',
+        ]"
+      />
+      <span
+        v-if="isExpanded"
+        class="text-13px 2xl:text-sm fw500 text-neutral-700 dark:text-neutral-200 whitespace-nowrap transition-transform duration-250 ease-in-out transform"
+        :class="isShowFilter ? 'translate-x-0 opacity-100' : '-translate-x-4 opacity-0'"
+      >
+        {{ $t('sidebar.input') }}
+      </span>
+    </UiButton>
+    <div v-if="isExpanded" class="absolute h-full right-2 top-1/2 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 scoped>
+.custom-btn-transition {
+  transition:
+    padding 700ms ease,
+    width 700ms ease;
+}
+
+.bg-transition {
+  transition: background 150ms ease;
+}
+</style>
diff --git a/apps/client/src/modules/search/components/SearchItem.vue b/apps/client/src/modules/search/components/SearchItem.vue
new file mode 100644
index 00000000..2aec06be
--- /dev/null
+++ b/apps/client/src/modules/search/components/SearchItem.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import type { SearchRoute } from '../types'
+import { UiCommandItem } from '@/shared/ui'
+
+defineProps<{
+  route: SearchRoute
+  mousePosition: number | undefined
+  section: string
+}>()
+
+const emits = defineEmits<{
+  (e: 'handleRoute', route: SearchRoute, section: string): void
+  (e: 'onMouseOver'): void
+  (e: 'onMouseLeave'): void
+}>()
+</script>
+
+<template>
+  <UiCommandItem
+    :value="route.name"
+    class="text-neutral-500 dark:text-neutral-100 hover:text-neutral-800 dark:hover:text-neutral-200 cursor-pointer flex items-center justify-between"
+    @click="emits('handleRoute', route, section)"
+    @mouseover="emits('onMouseOver')"
+    @mouseleave="emits('onMouseLeave')"
+  >
+    <div class="flex items-center gap-2">
+      <Icon v-if="route.icon" :icon="route.icon" class="w-4 h-4" :style="{ color: route.color }" />
+      <span class="text-sm text-neutral-800 dark:text-neutral-100">{{ route.name }}</span>
+    </div>
+    <slot name="ext-icon" />
+  </UiCommandItem>
+</template>
diff --git a/apps/client/src/modules/search/components/SearchList.vue b/apps/client/src/modules/search/components/SearchList.vue
new file mode 100644
index 00000000..62a34cea
--- /dev/null
+++ b/apps/client/src/modules/search/components/SearchList.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { createReusableTemplate, useLocalStorage } from '@vueuse/core'
+import { Icon } from '@iconify/vue'
+import SearchItem from './SearchItem.vue'
+import type { Board } from '@/modules/boards/types'
+import type { SearchRoute } from '../types'
+import { links as _links } from '@/shared/constants/links'
+import { UiCommandEmpty, UiCommandGroup, UiCommandList } from '@/shared/ui'
+
+const props = defineProps<{
+  boards: Board[]
+  modelSearch: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'handleRoute', route: any, section: string): void
+}>()
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+
+const mousePosition = ref()
+
+const { t } = useI18n()
+
+const formattedBoards = computed(() => {
+  return props.boards.map(board => ({
+    name: board.name,
+    path: `/boards/${board._id}`,
+    icon: 'fluent-emoji-high-contrast:brown-square',
+    color: board.color,
+  }))
+})
+
+const formattedLinks = computed(() => {
+  return _links.map(link => ({
+    ...link,
+    name: t(`sidebar.${link.name}`),
+    color: undefined,
+    path: `/${link.pathName}`,
+  }))
+})
+
+const links = computed(() => [...formattedLinks.value, ...formattedBoards.value])
+
+const storeLinks = useLocalStorage<typeof links.value>('links', [])
+
+function addToLocalStorage(item: any) {
+  const exists = storeLinks.value.some(link => link.name === item.name)
+  if (!exists) {
+    storeLinks.value = [item, ...storeLinks.value]
+  }
+}
+
+function handleCommandItem<T extends string>(item: SearchRoute, section: T) {
+  if (section === 'links')
+    addToLocalStorage(item)
+  emit('handleRoute', item, section)
+}
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ data, section }">
+    <UiCommandGroup :heading="t(`search.${section}`)">
+      <SearchItem
+        v-for="route, idx in data"
+        :key="idx"
+        :route="route"
+        :section="section"
+        :mouse-position="mousePosition"
+        @handle-route="handleCommandItem"
+        @on-mouse-over="mousePosition = idx"
+        @on-mouse-leave="mousePosition = undefined"
+      >
+        <template #ext-icon>
+          <Icon
+            v-if="mousePosition === idx"
+            icon="mi-enter"
+            class="min-w-4 min-h-4 text-neutral-500 transition-all duration-200 ease dark:text-neutral-400"
+          />
+        </template>
+      </SearchItem>
+    </UiCommandGroup>
+  </DefineTemplate>
+  <UiCommandList>
+    <UiCommandEmpty v-show="modelSearch">
+      {{ t('search.empty') }}
+    </UiCommandEmpty>
+    <ReuseTemplate v-if="!modelSearch && storeLinks.length > 0" :data="storeLinks" section="recently" />
+    <ReuseTemplate v-if="modelSearch" :data="links" section="links" />
+  </UiCommandList>
+</template>
diff --git a/apps/client/src/modules/search/types/index.ts b/apps/client/src/modules/search/types/index.ts
new file mode 100644
index 00000000..17d0a134
--- /dev/null
+++ b/apps/client/src/modules/search/types/index.ts
@@ -0,0 +1,11 @@
+export interface SearchRoute {
+  name: string
+  path: string
+  icon?: string
+  color?: string
+}
+
+export interface PanelItem {
+  icon: string
+  tPrefix: string
+}
diff --git a/apps/client/src/modules/settings/pages/settings.vue b/apps/client/src/modules/settings/pages/settings.vue
new file mode 100644
index 00000000..7b57f72a
--- /dev/null
+++ b/apps/client/src/modules/settings/pages/settings.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'settings',
+})
+
+useHead({
+  title: 'Jenda | Settings',
+})
+</script>
+
+<template>
+  <div>
+    settings
+  </div>
+</template>
diff --git a/apps/client/src/modules/templates/__tests__/TemplateItem.spec.ts b/apps/client/src/modules/templates/__tests__/TemplateItem.spec.ts
new file mode 100644
index 00000000..89a2d61c
--- /dev/null
+++ b/apps/client/src/modules/templates/__tests__/TemplateItem.spec.ts
@@ -0,0 +1,28 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { templatesInfo } from '../constants/templates'
+import TemplateItem from '../components/TemplateItem.vue'
+import i18n from '@/shared/libs/i18n'
+
+describe('tests for TemplateItem.vue', () => {
+  const wrapper = shallowMount(TemplateItem, {
+    global: {
+      plugins: [i18n],
+      mocks: {
+        t: (key: string) => {
+          const translations: Record<string, string> = {
+            'templates.user': 'test user',
+          }
+          return translations[key]
+        },
+      },
+    },
+    props: {
+      template: templatesInfo[0],
+    },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
diff --git a/apps/client/src/modules/templates/__tests__/__snapshots__/TemplateItem.spec.ts.snap b/apps/client/src/modules/templates/__tests__/__snapshots__/TemplateItem.spec.ts.snap
new file mode 100644
index 00000000..6533970c
--- /dev/null
+++ b/apps/client/src/modules/templates/__tests__/__snapshots__/TemplateItem.spec.ts.snap
@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for TemplateItem.vue > should render correctly 1`] = `
+"<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="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/apps/client/src/modules/templates/components/AllTemplates.vue b/apps/client/src/modules/templates/components/AllTemplates.vue
new file mode 100644
index 00000000..e7c03a2e
--- /dev/null
+++ b/apps/client/src/modules/templates/components/AllTemplates.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useLocalStorage, useWindowSize } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { templatesInfo } from '../constants/templates'
+import TemplateItem from './TemplateItem.vue'
+
+const { tm } = useI18n()
+const isExpanded = useLocalStorage('isExpanded', true)
+
+const templates = computed(() => {
+  const localeArr = tm('templates.items') as (typeof TemplateItem)[]
+  return templatesInfo.map((template, index) => ({
+    ...template,
+    title: localeArr[index].title,
+    tag: localeArr[index].tag,
+    description: localeArr[index].description,
+    date: localeArr[index].date,
+  }))
+})
+
+const { width } = useWindowSize()
+
+const gridVariant = computed(() =>
+  width.value >= 1730
+    ? isExpanded.value
+      ? 'repeat(5, 1fr)'
+      : 'repeat(6, 1fr)'
+    : isExpanded.value
+      ? 'repeat(4, 1fr)'
+      : 'repeat(4, 1fr)',
+)
+</script>
+
+<template>
+  <div class="grid gap-15px w-full" :style="{ gridTemplateColumns: gridVariant }">
+    <TemplateItem v-for="template in templates" :key="template.id" :template="template" />
+  </div>
+</template>
diff --git a/apps/client/src/modules/templates/components/ImportTemplate.vue b/apps/client/src/modules/templates/components/ImportTemplate.vue
new file mode 100644
index 00000000..099e0734
--- /dev/null
+++ b/apps/client/src/modules/templates/components/ImportTemplate.vue
@@ -0,0 +1,12 @@
+<template>
+  <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-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 class="text-blue-400">.json</span>
+    </p>
+  </div>
+</template>
diff --git a/apps/client/src/modules/templates/components/TemplateItem.vue b/apps/client/src/modules/templates/components/TemplateItem.vue
new file mode 100644
index 00000000..10092c8a
--- /dev/null
+++ b/apps/client/src/modules/templates/components/TemplateItem.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { Template } from '../types'
+import { UiBadge } from '@/shared/ui'
+
+defineProps<{
+  template: Template
+}>()
+</script>
+
+<template>
+  <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="flex flex-col gap-1.5 mb-3">
+        <p class="text-sm">
+          {{ template.title }}
+        </p>
+        <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="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>
diff --git a/apps/client/src/modules/templates/constants/templates.ts b/apps/client/src/modules/templates/constants/templates.ts
new file mode 100644
index 00000000..b0f86d4d
--- /dev/null
+++ b/apps/client/src/modules/templates/constants/templates.ts
@@ -0,0 +1,29 @@
+import type { Template } from '../types'
+
+// mocks -> after data from backend
+export const templatesInfo: Template[] = [
+  {
+    id: '0',
+    title: 'Base Kanban',
+    tag: 'Recommended',
+    description: `Create a basic project with "Base Kanban" template`,
+    date: 'June 12, 2024',
+    user: 'https://avatars.githubusercontent.com/u/121057011?v=4',
+  },
+  {
+    id: '1',
+    title: 'Roadmap',
+    tag: 'New',
+    description: `Create a project based on our "Roadmap" template`,
+    date: 'June 18, 2024',
+    user: 'https://avatars.githubusercontent.com/u/121057011?v=4',
+  },
+  {
+    id: '2',
+    title: 'Web Development',
+    tag: 'New',
+    description: `Create a basic project with "Web Development" template`,
+    date: 'July 16, 2024',
+    user: 'https://avatars.githubusercontent.com/u/121057011?v=4',
+  },
+]
diff --git a/apps/client/src/modules/templates/pages/templates.vue b/apps/client/src/modules/templates/pages/templates.vue
new file mode 100644
index 00000000..77b0b32e
--- /dev/null
+++ b/apps/client/src/modules/templates/pages/templates.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue'
+import AllTemplates from '../components/AllTemplates.vue'
+import ImportTemplate from '../components/ImportTemplate.vue'
+import { UiButton, UiDialog, UiDialogContent, UiDialogTrigger } from '@/shared/ui'
+
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'templates',
+})
+
+useHead({
+  title: 'Jenda | Templates',
+})
+</script>
+
+<template>
+  <div class="flex items-center justify-between mb-5">
+    <p class="text-sm text-neutral-600 dark:text-neutral-300">
+      {{ $t('templates.description') }}
+    </p>
+    <div>
+      <UiDialog>
+        <UiDialogTrigger as-child>
+          <UiButton variant="outline" @click="$router.push({ name: 'community' })">
+            {{ $t('templates.community') }}
+          </UiButton>
+        </UiDialogTrigger>
+        <UiDialogContent @close-auto-focus="$router.back()">
+          <RouterView />
+        </UiDialogContent>
+      </UiDialog>
+      <UiButton variant="solid" class="ml-2">
+        {{ $t('templates.create') }}
+      </UiButton>
+    </div>
+  </div>
+  <ImportTemplate />
+  <AllTemplates />
+</template>
diff --git a/apps/client/src/modules/templates/pages/templates/community.vue b/apps/client/src/modules/templates/pages/templates/community.vue
new file mode 100644
index 00000000..2a092c67
--- /dev/null
+++ b/apps/client/src/modules/templates/pages/templates/community.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    requiresAuth: true,
+  },
+  name: 'community',
+})
+</script>
+
+<template>
+  <div>
+    community
+  </div>
+</template>
diff --git a/apps/client/src/modules/templates/types/index.ts b/apps/client/src/modules/templates/types/index.ts
new file mode 100644
index 00000000..b1b7628b
--- /dev/null
+++ b/apps/client/src/modules/templates/types/index.ts
@@ -0,0 +1,8 @@
+export interface Template {
+  id: string
+  title: string
+  tag: string
+  description: string
+  date: string
+  user: string
+}
diff --git a/apps/client/src/modules/welcome/__tests__/AboutSection.spec.ts b/apps/client/src/modules/welcome/__tests__/AboutSection.spec.ts
new file mode 100644
index 00000000..eb5ea15d
--- /dev/null
+++ b/apps/client/src/modules/welcome/__tests__/AboutSection.spec.ts
@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import AboutSection from '../components/sections/AboutSection.vue'
+import { UiButton } from '@/shared/ui'
+import i18n from '@/shared/libs/i18n'
+
+const mockRouter = {
+  push: vi.fn(),
+  beforeEach: vi.fn(),
+}
+
+describe('tests for AboutSection.vue', () => {
+  const wrapper = shallowMount(AboutSection, {
+    global: {
+      plugins: [i18n],
+      mocks: {
+        $router: mockRouter,
+      },
+    },
+  })
+
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should redirect correctly', async () => {
+    const btn = wrapper.find('.btns').findAllComponents(UiButton).at(0)
+    await btn.trigger('click')
+    expect(mockRouter.push).toHaveBeenCalledWith({ name: 'sign-up' })
+  })
+})
diff --git a/apps/client/src/modules/welcome/__tests__/MarketingCards.spec.ts b/apps/client/src/modules/welcome/__tests__/MarketingCards.spec.ts
new file mode 100644
index 00000000..2ce393e3
--- /dev/null
+++ b/apps/client/src/modules/welcome/__tests__/MarketingCards.spec.ts
@@ -0,0 +1,65 @@
+import { type ComponentPublicInstance, nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import MarketingCards from '../components/MarketingCards.vue'
+import type { VueWrapper } from '@vue/test-utils'
+import i18n from '@/shared/libs/i18n'
+import { UiCard } from '@/shared/ui'
+
+// TODO: `ComponentPublicInstance` needs to be fixed with certain types
+type MarketingCardsInstance = ComponentPublicInstance<
+  {},
+  {},
+  {
+    cards: any[]
+    width: number
+    getCurrentColor: (id: number) => string
+    currentWidth: (width: string | undefined) => string
+    currentHeight: (height: string | undefined) => string
+  }
+>
+
+describe('tests for MarketingCards.vue', () => {
+  const wrapper = mount(MarketingCards, {
+    global: {
+      plugins: [i18n],
+    },
+  }) as VueWrapper<MarketingCardsInstance>
+
+  it('should be render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should render subcomponents', () => {
+    expect(wrapper.findComponent(UiCard).exists()).toBe(true)
+  })
+
+  it('should count cards correctly', async () => {
+    const cards = wrapper.vm.cards
+    wrapper.vm.width = 1900
+    await nextTick()
+    expect(cards).toHaveLength(5)
+  })
+
+  it('returns correct width and height', () => {
+    expect(wrapper.vm.currentWidth('500')).toBe('500px')
+    expect(wrapper.vm.currentWidth(undefined)).toBe('100%')
+    expect(wrapper.vm.currentHeight('100')).toBe('100px')
+    expect(wrapper.vm.currentHeight(undefined)).toBe('100%')
+  })
+
+  it('renders card titles and descriptions correctly', () => {
+    const _titles = wrapper.findAll('h3')
+    const _descriptions = wrapper.findAll('p')
+
+    expect(_titles.length).toBe(5)
+    expect(_descriptions.length).toBe(5)
+
+    _titles.forEach((title, index) => {
+      expect(title.text()).toBe(wrapper.vm.cards[index].title)
+    })
+    _descriptions.forEach((desc, index) => {
+      expect(desc.text()).toBe(wrapper.vm.cards[index].description)
+    })
+  })
+})
diff --git a/apps/client/src/modules/welcome/__tests__/__snapshots__/AboutSection.spec.ts.snap b/apps/client/src/modules/welcome/__tests__/__snapshots__/AboutSection.spec.ts.snap
new file mode 100644
index 00000000..1ed21b14
--- /dev/null
+++ b/apps/client/src/modules/welcome/__tests__/__snapshots__/AboutSection.spec.ts.snap
@@ -0,0 +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="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/apps/client/src/modules/welcome/__tests__/__snapshots__/MarketingCards.spec.ts.snap b/apps/client/src/modules/welcome/__tests__/__snapshots__/MarketingCards.spec.ts.snap
new file mode 100644
index 00000000..3ac86d5f
--- /dev/null
+++ b/apps/client/src/modules/welcome/__tests__/__snapshots__/MarketingCards.spec.ts.snap
@@ -0,0 +1,44 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for MarketingCards.vue > should be render correctly 1`] = `
+"<div data-v-29cf77b9="" class="w-full flex flex-col gap-10 mb-110px max-[520px]:mb-80px max-[680px]:gap-6">
+  <div data-v-29cf77b9="" class="flex items-center gap-5 max-[768px]:justify-center"><span data-v-29cf77b9="" i-hugeicons-atom-01="" style="font-size: 30px;" class="text-neutral-700 dark:text-neutral-400"></span>
+    <h2 data-v-29cf77b9="" 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 data-v-29cf77b9="" class="flex px-7 gap-5 max-[680px]:flex-col max-[520px]:p-0">
+    <div data-v-29cf77b9="" class="combined-card">
+      <div data-v-29cf77b9="" 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-29cf77b9="">
+          <h3 data-v-29cf77b9="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Kanban 🧑‍💻</h3>
+          <p data-v-29cf77b9="" 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-29cf77b9="" 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 data-v-29cf77b9="" 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-29cf77b9="">
+          <h3 data-v-29cf77b9="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Collaborative 👥</h3>
+          <p data-v-29cf77b9="" class="text-base text-neutral-400 dark:text-neutral-200 max-[1220px]:mr-5">Improve your teamwork!</p>
+        </div><img data-v-29cf77b9="" 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 data-v-29cf77b9="" class="combined-card">
+      <div data-v-29cf77b9="" 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-29cf77b9="">
+          <h3 data-v-29cf77b9="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Activity 👔</h3>
+          <p data-v-29cf77b9="" 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-29cf77b9="" 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 data-v-29cf77b9="" 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-29cf77b9="">
+          <h3 data-v-29cf77b9="" class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">Chats 💬</h3>
+          <p data-v-29cf77b9="" 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-29cf77b9="" 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-->
+  </section>
+</div>"
+`;
diff --git a/apps/client/src/modules/welcome/components/MarketingCards.vue b/apps/client/src/modules/welcome/components/MarketingCards.vue
new file mode 100644
index 00000000..7c07ce2c
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/MarketingCards.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDark, useWindowSize } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { useCards } from '../composables/cards'
+import type { MarketingCard } from '../types'
+import { UiCard } from '@/shared/ui'
+
+const { tm, t } = useI18n()
+
+const { width } = useWindowSize()
+
+const { cards: _cards } = useCards()
+
+const cards = computed(() => {
+  const tmArr = tm('welcome.marketing.cards') as MarketingCard[]
+  const _arr = computed<MarketingCard[]>(() => {
+    return width.value >= 1220 ? tmArr : tmArr.filter((_, i) => i !== 2)
+  })
+  return _cards.value.map((card, i) => ({
+    ...card,
+    title: _arr.value[i]?.title,
+    description: _arr.value[i]?.description,
+  }))
+})
+
+const colors = [
+  { light: '#fff', dark: 'rgba(var(--zinc-rgb-600), 0.2)' },
+  { light: '#fff', dark: 'rgba(var(--zinc-rgb-600), 0.2)' },
+  { light: '#fff', dark: 'rgba(var(--zinc-rgb-600), 0.2)' },
+  { light: '#fff', dark: 'rgba(var(--zinc-rgb-600), 0.2)' },
+  { light: '#fff', dark: 'rgba(var(--zinc-rgb-600), 0.2)' },
+] as const
+
+const isDark = useDark()
+
+const getCurrentColor = computed(() => {
+  return (id: number) => {
+    return !isDark.value ? colors[id].light : colors[id].dark
+  }
+})
+
+const currentWidth = computed(() => {
+  return (width: string | undefined) => {
+    return width ? `${width}px` : '100%'
+  }
+})
+const currentHeight = computed(() => {
+  return (height: string | undefined) => {
+    return height ? `${height}px` : '100%'
+  }
+})
+
+const getImageAttributes = computed(() => {
+  return (card: MarketingCard) => {
+    const attributesObj = {
+      width: card.imgWidth,
+      bottom: card.bottom,
+      top: card.top,
+      right: card.right,
+      left: card.left,
+    }
+    return attributesObj
+  }
+})
+
+const getMaxWidth = computed(() => {
+  return (card: MarketingCard) => {
+    return width.value < 1220 ? card.maxWidth : ''
+  }
+})
+const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
+</script>
+
+<template>
+  <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 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="card"
+          :style="{
+            paddingRight: card.id === 1 && '40px',
+            backgroundColor: getCurrentColor(card.id),
+            maxWidth: currentWidth(card.width),
+            height: width >= 1220 ? currentHeight(card.height) : '280px',
+          }"
+        >
+          <div>
+            <h3 class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">
+              {{ card.title }}
+            </h3>
+            <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) }"
+            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="combined-card">
+        <UiCard
+          v-for="card in cards.slice(2, 4)"
+          :key="card.id"
+          class="card"
+          :style="{
+            backgroundColor: getCurrentColor(card.id),
+            maxWidth: currentWidth(card.width),
+            height: currentHeight(card.height),
+          }"
+        >
+          <div>
+            <h3 class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">
+              {{ card.title }}
+            </h3>
+            <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) }"
+            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="combined-card">
+        <UiCard
+          :key="cards[4].id"
+          class="card"
+          :style="{
+            backgroundColor: getCurrentColor(cards[4].id),
+            maxWidth: currentWidth(cards[4].width),
+          }"
+        >
+          <div>
+            <h3 class="text-2xl font-semibold mb-2 dark:text-neutral-100 max-[680px]:text-xl">
+              {{ cards[4].title }}
+            </h3>
+            <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])"
+            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 scoped>
+.combined-card {
+  @apply flex flex-col gap-5 grow max-[680px]:!mr-0;
+}
+
+.card {
+  @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/apps/client/src/modules/welcome/components/MarqueeList.vue b/apps/client/src/modules/welcome/components/MarqueeList.vue
new file mode 100644
index 00000000..1db99f74
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/MarqueeList.vue
@@ -0,0 +1,15 @@
+<template>
+  <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="flex items-center mr-68px"
+      >
+        <p class="text-lg dark:text-neutral-100">
+          {{ s }}
+        </p>
+      </div>
+    </Vue3Marquee>
+  </div>
+</template>
diff --git a/apps/client/src/modules/welcome/components/ProjectDemo.vue b/apps/client/src/modules/welcome/components/ProjectDemo.vue
new file mode 100644
index 00000000..5247af27
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/ProjectDemo.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ProjectGrid } from '@/shared/assets/icons'
+</script>
+
+<template>
+  <div class="overflow-hidden relative w-full mt-30px grid grid-cols-1 grid-rows-1 items-center">
+    <ProjectGrid />
+    <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 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/apps/client/src/modules/welcome/components/reviews/ReviewWrapper.vue b/apps/client/src/modules/welcome/components/reviews/ReviewWrapper.vue
new file mode 100644
index 00000000..d5b4d9fd
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/reviews/ReviewWrapper.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ReviewWrapper } from '../../types'
+import UserAvatar from '@/modules/auth/components/UserAvatar.vue'
+
+defineProps<{
+  review?: Partial<ReviewWrapper>
+}>()
+</script>
+
+<template>
+  <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>
+          <p class="text-base mb-0.5 text-neutral-800 dark:text-neutral-200">
+            {{ review?.name }}
+          </p>
+          <span class="text-sm mb-0.5 text-neutral-600 dark:text-neutral-400">{{ review?.status }}</span>
+        </div>
+      </div>
+      <blockquote class="text-base text-neutral-600 font-medium dark:text-neutral-200 max-[768px]:text-center">
+        {{ `“${review?.comment}”` }}
+      </blockquote>
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/modules/welcome/components/sections/AboutSection.vue b/apps/client/src/modules/welcome/components/sections/AboutSection.vue
new file mode 100644
index 00000000..88b87673
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/sections/AboutSection.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useDark, useWindowSize } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import { redirect } from '@/shared/helpers/redirectBlank'
+import { UiButton } from '@/shared/ui'
+
+const { t } = useI18n()
+const { width } = useWindowSize()
+
+const badge = computed(() =>
+  width.value > 668 ? t('welcome.about.badge') : t('welcome.about.badge_mobile'),
+)
+
+const isDark = useDark()
+
+const isHovered = ref(false)
+
+function onMouseEnter() {
+  isHovered.value = true
+}
+function onMouseLeave() {
+  isHovered.value = false
+}
+const arrowMargin = computed(() => {
+  return isHovered.value ? '4px' : '0px'
+})
+</script>
+
+<template>
+  <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"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+      @click="redirect('https://github.com/mnenie/jenda')"
+    >
+      <span style="margin-right: 3px">✨</span>
+      <span class="text-sm">{{ badge }}</span>
+      <span
+        i-hugeicons-arrow-right-01
+        class="ease-in duration-100"
+        :style="{ marginLeft: arrowMargin }"
+      />
+    </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"
+    >
+      {{ $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="flex justify-center items-center gap-4 px-0 py-4 btns">
+      <UiButton @click="$router.push({ name: 'sign-up' })">
+        {{ $t('welcome.about.btn') }}
+      </UiButton>
+      <UiButton
+        variant="outline"
+        @click="redirect('https://github.com/mnenie/jenda')"
+      >
+        <img
+          :src="!isDark ? '/icons/github.png' : '/icons/github-d.png'"
+          class="w-4 h-4"
+        />
+        GitHub
+      </UiButton>
+    </div>
+  </section>
+</template>
diff --git a/apps/client/src/modules/welcome/components/sections/ActivitySection.vue b/apps/client/src/modules/welcome/components/sections/ActivitySection.vue
new file mode 100644
index 00000000..d2c16831
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/sections/ActivitySection.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useDark, useWindowSize } from '@vueuse/core'
+
+const isDark = useDark()
+
+const { width } = useWindowSize()
+
+const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
+</script>
+
+<template>
+  <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 max-w-90% max-[768px]:max-w-full max-[768px]:text-center dark:text-neutral-200"
+        >
+          {{ $t('welcome.activity.about') }}
+        </p>
+      </div>
+    </div>
+    <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>
diff --git a/apps/client/src/modules/welcome/components/sections/ChatsSection.vue b/apps/client/src/modules/welcome/components/sections/ChatsSection.vue
new file mode 100644
index 00000000..d01411c7
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/sections/ChatsSection.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useSection } from '../../composables/sections'
+import ReviewWrapper from '../reviews/ReviewWrapper.vue'
+import SectionWrapper from './SectionWrapper.vue'
+
+const { section } = useSection(
+  'chats',
+  'dev-card',
+  'https://avatars.githubusercontent.com/u/95149637?v=4',
+)
+</script>
+
+<template>
+  <SectionWrapper id="chats" :section direction="reverse">
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-message-multiple-02
+        :style="{ fontSize: `${size}px` }"
+      />
+    </template>
+  </SectionWrapper>
+  <ReviewWrapper :review="section.review" />
+</template>
diff --git a/apps/client/src/modules/welcome/components/sections/CollaborativeSection.vue b/apps/client/src/modules/welcome/components/sections/CollaborativeSection.vue
new file mode 100644
index 00000000..39bee09f
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/sections/CollaborativeSection.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useSection } from '../../composables/sections'
+import ReviewWrapper from '../reviews/ReviewWrapper.vue'
+import SectionWrapper from './SectionWrapper.vue'
+
+const { section } = useSection(
+  'collaborative',
+  'dev-card',
+  'https://avatars.githubusercontent.com/u/95149637?v=4',
+)
+</script>
+
+<template>
+  <SectionWrapper id="collaborative" :section direction="reverse">
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-earth
+        :style="{ fontSize: `${size}px` }"
+      />
+    </template>
+  </SectionWrapper>
+  <ReviewWrapper :review="section.review" />
+</template>
diff --git a/apps/client/src/modules/welcome/components/sections/KanbanSection.vue b/apps/client/src/modules/welcome/components/sections/KanbanSection.vue
new file mode 100644
index 00000000..5833abe3
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/sections/KanbanSection.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useSection } from '../../composables/sections'
+import ReviewWrapper from '../reviews/ReviewWrapper.vue'
+import SectionWrapper from './SectionWrapper.vue'
+
+const { section } = useSection(
+  'kanban',
+  'dev-card',
+  'https://avatars.githubusercontent.com/u/121057011?v=4',
+)
+</script>
+
+<template>
+  <SectionWrapper id="kanban" :section>
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-trello
+        :style="{ fontSize: `${size}px` }"
+      />
+    </template>
+  </SectionWrapper>
+  <ReviewWrapper :review="section.review" />
+</template>
diff --git a/apps/client/src/modules/welcome/components/sections/MembersSection.vue b/apps/client/src/modules/welcome/components/sections/MembersSection.vue
new file mode 100644
index 00000000..4f7f06e6
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/sections/MembersSection.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useSection } from '../../composables/sections'
+import ReviewWrapper from '../reviews/ReviewWrapper.vue'
+import SectionWrapper from './SectionWrapper.vue'
+
+const { section } = useSection(
+  'members',
+  'dev-card',
+  'https://avatars.githubusercontent.com/u/121057011?v=4',
+)
+</script>
+
+<template>
+  <SectionWrapper id="members" :section>
+    <template #icon="{ size }">
+      <span
+        i-hugeicons-agreement-01
+        :style="{ fontSize: `${size}px` }"
+      />
+    </template>
+  </SectionWrapper>
+  <ReviewWrapper :review="section.review" />
+</template>
diff --git a/apps/client/src/modules/welcome/components/sections/SectionWrapper.vue b/apps/client/src/modules/welcome/components/sections/SectionWrapper.vue
new file mode 100644
index 00000000..c7fb5845
--- /dev/null
+++ b/apps/client/src/modules/welcome/components/sections/SectionWrapper.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import type { SectionWrapperType } from '../../types'
+
+const { section, direction = 'default', id } = defineProps<{
+  section: SectionWrapperType
+  direction?: 'default' | 'reverse'
+  id: string
+}>()
+
+const { locale } = useI18n()
+
+const { width } = useWindowSize()
+
+const writerKey = ref(0)
+
+const sectionDirection = computed(() =>
+  width.value >= 1100 ? (direction === 'default' ? 'row' : 'row-reverse') : 'column',
+)
+const iconSize = computed(() => (width.value >= 1100 ? 36 : 30))
+
+watch([() => section.writer, locale], () => {
+  writerKey.value++
+})
+</script>
+
+<template>
+  <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="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 }"
+      class="flex justify-between items-center gap-11 py-0 px-30px max-[768px]:gap-30px max-[520px]:p-0"
+    >
+      <slot name="content">
+        <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 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 text-neutral-400 dark:text-neutral-300 max-[768px]:text-center"
+          />
+        </div>
+        <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>
diff --git a/apps/client/src/modules/welcome/composables/cards.ts b/apps/client/src/modules/welcome/composables/cards.ts
new file mode 100644
index 00000000..695afcfa
--- /dev/null
+++ b/apps/client/src/modules/welcome/composables/cards.ts
@@ -0,0 +1,23 @@
+import { computed, triggerRef, watch } from 'vue'
+import { useDark } from '@vueuse/core'
+import { cardsInfo as cards } from '../constants/cards'
+
+export function useCards() {
+  const isDark = useDark()
+  const urlImg = computed(() =>
+    isDark.value ? '/dev/dev-card-dark.png' : '/dev/dev-card.png',
+  )
+
+  watch(
+    isDark,
+    () => {
+      cards.value.forEach(c => (c.url = urlImg.value))
+      triggerRef(cards)
+    },
+    { immediate: true, flush: 'sync' },
+  )
+
+  return {
+    cards,
+  }
+}
diff --git a/apps/client/src/modules/welcome/composables/sections.ts b/apps/client/src/modules/welcome/composables/sections.ts
new file mode 100644
index 00000000..a5cd438a
--- /dev/null
+++ b/apps/client/src/modules/welcome/composables/sections.ts
@@ -0,0 +1,42 @@
+import { computed, type MaybeRefOrGetter } from 'vue'
+import { useDark } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+import type { SectionWrapperType } from '../types'
+
+export function useSection(
+  _section: MaybeRefOrGetter<string>,
+  imgPrefix: string,
+  userImg: string,
+) {
+  const { t } = useI18n()
+  const isDark = useDark()
+
+  const img = computed(() =>
+    isDark.value
+      ? `/dev/${imgPrefix}-section-dark.png`
+      : `/dev/${imgPrefix}-section.png`,
+  )
+
+  const parentKeys = ['name', 'heading', 'about', 'writer'] as const
+  const childReviewKeys = ['name', 'status', 'comment'] as const
+
+  const section = computed<SectionWrapperType>(() => {
+    return {
+      ...(Object.fromEntries(
+        parentKeys.map(key => [key, t(`welcome.${_section}.${key}`)]),
+      ) as Pick<SectionWrapperType, 'name' | 'heading' | 'about' | 'writer'>),
+      img: img.value,
+      review: {
+        ...Object.fromEntries(
+          childReviewKeys.map(key => [
+            key,
+            t(`welcome.${_section}.review.${key}`),
+          ]),
+        ),
+        img: userImg,
+      },
+    }
+  })
+
+  return { section }
+}
diff --git a/apps/client/src/modules/welcome/constants/cards.ts b/apps/client/src/modules/welcome/constants/cards.ts
new file mode 100644
index 00000000..ebf8dfcf
--- /dev/null
+++ b/apps/client/src/modules/welcome/constants/cards.ts
@@ -0,0 +1,57 @@
+import { shallowRef } from 'vue'
+import type { MarketingCard } from '../types'
+
+export const cardsInfo = shallowRef<MarketingCard[]>([
+  {
+    id: 0,
+    pagePrefix: 'kanban',
+    height: '270',
+    width: '640',
+    // img
+    bottom: '-260px',
+    right: '-360px',
+    imgWidth: '720px',
+    maxWidth: '400px',
+  },
+  {
+    id: 1,
+    pagePrefix: 'collaborative',
+    height: '300',
+    width: '640',
+    // img
+    bottom: '-160px',
+    right: '20px',
+    imgWidth: '600px',
+    maxWidth: '360px',
+  },
+  {
+    id: 2,
+    pagePrefix: 'members',
+    width: '500',
+    height: '460',
+    // img
+    bottom: '-230px',
+    right: '-290px',
+    imgWidth: '600px',
+    maxWidth: '240px',
+  },
+  {
+    id: 3,
+    pagePrefix: 'activity',
+    width: '500',
+    // img
+    bottom: '-200px',
+    right: '-500px',
+    imgWidth: '700px',
+    maxWidth: '300px',
+  },
+  {
+    id: 4,
+    pagePrefix: 'chats',
+    // img
+    bottom: '0px',
+    right: '-420px',
+    imgWidth: '700px',
+    maxWidth: '300px',
+  },
+])
diff --git a/apps/client/src/modules/welcome/types/index.ts b/apps/client/src/modules/welcome/types/index.ts
new file mode 100644
index 00000000..c4c5340d
--- /dev/null
+++ b/apps/client/src/modules/welcome/types/index.ts
@@ -0,0 +1,34 @@
+export interface MarketingCard extends ImgInCard {
+  id: number
+  title?: string
+  description?: string
+  width?: string
+  height?: string
+  pagePrefix: string
+  maxWidth?: string
+}
+
+interface ImgInCard {
+  url?: string
+  bottom?: string
+  right?: string
+  left?: string
+  top?: string
+  imgWidth?: string
+}
+
+export interface SectionWrapperType {
+  name: string
+  heading: string
+  about: string
+  writer: string
+  img: string
+  review?: Partial<ReviewWrapper>
+}
+
+export interface ReviewWrapper {
+  img: string
+  name: string
+  status: string
+  comment: string
+}
diff --git a/apps/client/src/modules/workspace/components/ChooseImg.vue b/apps/client/src/modules/workspace/components/ChooseImg.vue
new file mode 100644
index 00000000..4b0cef35
--- /dev/null
+++ b/apps/client/src/modules/workspace/components/ChooseImg.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { UiInput } from '@/shared/ui'
+</script>
+
+<template>
+  <div class="w-full flex items-center justify-start gap-3">
+    <div class="w-20 h-20 rounded-md flex items-center justify-center bg-#266df0">
+      <span i-hugeicons-clipboard class="text-17px text-neutral-200" />
+    </div>
+    <UiInput type="file" />
+  </div>
+</template>
diff --git a/apps/client/src/modules/workspace/components/ChoosingButton.vue b/apps/client/src/modules/workspace/components/ChoosingButton.vue
new file mode 100644
index 00000000..3d785290
--- /dev/null
+++ b/apps/client/src/modules/workspace/components/ChoosingButton.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ChoosingWorkspaceItem } from '../types'
+import { UiBadge, UiButton } from '@/shared/ui'
+
+defineProps<{
+  item: ChoosingWorkspaceItem
+}>()
+
+const emit = defineEmits<{
+  (e: 'choose', id: string): void
+}>()
+</script>
+
+<template>
+  <UiButton
+    variant="dashed"
+    class="hover:(border-neutral-500 !bg-white dark:!bg-neutral-800) focus:border-neutral-500 justify-between"
+    @click.prevent="emit('choose', item._id)"
+  >
+    {{ item.name }}
+    <div class="flex items-center gap-1.5">
+      <UiBadge variant="soft" class="px-1 py-0 text-xs">
+        {{ item.plan }}
+      </UiBadge>
+      <UiBadge variant="soft" class="px-1 py-0 text-xs">
+        {{ item.status }}
+      </UiBadge>
+    </div>
+  </UiButton>
+</template>
diff --git a/apps/client/src/modules/workspace/components/ShareLink.vue b/apps/client/src/modules/workspace/components/ShareLink.vue
new file mode 100644
index 00000000..bcef5a8d
--- /dev/null
+++ b/apps/client/src/modules/workspace/components/ShareLink.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { toast } from 'vue-sonner'
+import { UiButton, UiInput } from '@/shared/ui'
+
+const source = 'https://jenda/link/12103032'
+
+const { copy, copied } = useClipboard({ source })
+
+function copyLink() {
+  if (copied.value)
+    return
+  copy(source)
+  toast.success(`Successfully copied ${source} to clipboard`)
+}
+</script>
+
+<template>
+  <div class="flex items-center space-x-2">
+    <div class="grid flex-1 gap-2">
+      <UiInput
+        :default-value="source"
+        readonly
+        class="select-none pointer-events-none focus:ring-0"
+      />
+    </div>
+    <UiButton variant="solid" type="submit" size="sm" :disabled="copied" class="px-3" @click="copyLink">
+      <div v-if="!copied" i-hugeicons-copy-02 class="w-4 h-4 text-neutral-100" />
+      <div v-else i-hugeicons-checkmark-circle-03 class="w-4 h-4 text-neutral-100" />
+    </UiButton>
+  </div>
+</template>
diff --git a/apps/client/src/modules/workspace/components/WorkspaceMenu.vue b/apps/client/src/modules/workspace/components/WorkspaceMenu.vue
new file mode 100644
index 00000000..c10fdd9a
--- /dev/null
+++ b/apps/client/src/modules/workspace/components/WorkspaceMenu.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { createReusableTemplate } from '@vueuse/core'
+import { useWorkspaceStore } from '../stores/workspace'
+import {
+  UiBadge,
+  UiButton,
+  UiPopover,
+  UiPopoverContent,
+  UiPopoverTrigger,
+} from '@/shared/ui'
+import ShareDialog from '@/modules/common/components/dialogs/ShareDialog.vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const isDialogOpen = ref<boolean>(false)
+const isPopoverOpen = ref<boolean>(false)
+
+const workspaceStore = useWorkspaceStore()
+const { workspace } = storeToRefs(workspaceStore)
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ icon, data, isSettings }">
+    <UiButton
+      size="sm"
+      variant="ghost"
+      :class="
+        cn('w-full justify-start px-2 focus:ring-0', isSettings && 'mt-2')"
+      @click="isPopoverOpen = false"
+    >
+      <span v-if="!isSettings" :class="cn(icon, 'w-4 h-4 text-neutral-700 dark:text-neutral-300')" />
+      <div
+        v-else
+        class="w-4 h-4 bg-neutral-100 border border-solid border-neutral-200 rounded-full flex items-center justify-center cursor-pointer"
+      >
+        <img :src="workspace.img as string" class="object-cover w-full rounded-lg" />
+      </div>
+      <p class="text-neutral-700 dark:text-neutral-300">
+        {{ $t(`workspace.popover.${data}`) }}
+      </p>
+    </UiButton>
+  </DefineTemplate>
+  <UiPopover v-bind="$attrs" v-model:open="isPopoverOpen" :modal="false">
+    <UiPopoverTrigger as-child>
+      <slot />
+    </UiPopoverTrigger>
+    <UiPopoverContent side="bottom" align="start" class="px-1">
+      <div class="relative w-full h-full">
+        <div class="flex items-center justify-between gap-1 mb-6 px-2">
+          <div class="flex flex-col gap-0.5 mt-1">
+            <p class="text-base !fw600 dark:text-neutral-100">
+              {{ workspace.name }}
+            </p>
+            <div class="flex items-center gap-0.5">
+              <UiBadge variant="secondary" class="shadow-none px-1 py-0 text-8px">
+                {{ workspace.plan }}
+              </UiBadge>
+              <UiBadge variant="secondary" class="shadow-none px-1 py-0 text-8px">
+                <span class="text-blue-500">
+                  {{ $t(`workspace.popover.${workspace.status}`) }}
+                </span>
+              </UiBadge>
+              <span class="text-11px mx-1 2xl:text-xs text-neutral-500 dark:text-neutral-400">
+                •
+              </span>
+              <p class="text-11px 2xl:text-xs text-neutral-500 dark:text-neutral-400">
+                {{ $t('workspace.popover.members', workspace.members.length) }}
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <span i-lucide-check class="w-5 h-5 text-blue-500" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-1">
+          <p class="px-2 text-xs text-neutral-700 dark:text-neutral-300 mb-1">
+            {{ $t('workspace.popover.section') }}
+          </p>
+          <ReuseTemplate data="pay" icon="i-lucide-credit-card" @click="$router.push({ name: 'welcome' })" />
+          <ReuseTemplate data="invite" icon="i-hugeicons-link-04" @click="isDialogOpen = true" />
+          <ReuseTemplate data="team" icon="i-hugeicons-user-group" @click="$router.push({ name: 'members' })" />
+          <ReuseTemplate :is-settings="true" data="settings" @click="$router.push({ name: 'settings' })" />
+        </div>
+      </div>
+    </UiPopoverContent>
+  </UiPopover>
+  <ShareDialog v-model:open="isDialogOpen" />
+</template>
diff --git a/apps/client/src/modules/workspace/stores/workspace.ts b/apps/client/src/modules/workspace/stores/workspace.ts
new file mode 100644
index 00000000..304d2546
--- /dev/null
+++ b/apps/client/src/modules/workspace/stores/workspace.ts
@@ -0,0 +1,19 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { BaseTestWorkspace } from '../types'
+
+export const useWorkspaceStore = defineStore('workspace', () => {
+  const workspace = ref<BaseTestWorkspace>({
+    _id: '0',
+    name: 'Example.io',
+    img: 'https://avatars.githubusercontent.com/u/185750893?s=100&v=4',
+    link: 'https://jenda-app-mnenie.com/example.io',
+    status: 'active',
+    members: [],
+    plan: 'FREE',
+  })
+
+  return {
+    workspace,
+  }
+})
diff --git a/apps/client/src/modules/workspace/types/index.ts b/apps/client/src/modules/workspace/types/index.ts
new file mode 100644
index 00000000..ef2f9645
--- /dev/null
+++ b/apps/client/src/modules/workspace/types/index.ts
@@ -0,0 +1,13 @@
+import type { User } from "@/modules/auth/types"
+
+export interface BaseTestWorkspace {
+  _id: string
+  name: string
+  img: string | Blob
+  link: string
+  status: 'active' | 'archive'
+  members: User[]
+  plan: 'FREE' | 'PREMIUM'
+}
+
+export type ChoosingWorkspaceItem = Pick<BaseTestWorkspace, '_id' | 'name' | 'status' | 'plan'>
diff --git a/apps/client/src/plugins/formkit.ts b/apps/client/src/plugins/formkit.ts
new file mode 100644
index 00000000..498723b6
--- /dev/null
+++ b/apps/client/src/plugins/formkit.ts
@@ -0,0 +1,46 @@
+import autoAnimate from '@formkit/auto-animate'
+import type { AutoAnimateOptions } from '@formkit/auto-animate'
+import type { App } from 'vue'
+
+export default {
+  install: (app: App, options?: Partial<AutoAnimateOptions>) => {
+    app.directive('auto-animate', {
+      mounted(el, binding) {
+        const config: Partial<AutoAnimateOptions> = {
+          duration: binding.value?.duration || 200,
+          easing: binding.value?.easing || 'ease-in',
+          disrespectUserMotionPreference: false,
+          ...binding.value,
+        }
+        autoAnimate(el, (el, action, oldCoords, newCoords) => {
+          let keyframes: Keyframe[]
+          if (action === 'add') {
+            keyframes = [
+              { transform: 'translateY(100%)', opacity: 0 },
+              { transform: 'translateY(0)', opacity: 1 },
+            ]
+          }
+          if (action === 'remain') {
+            const deltaY = oldCoords!.top - newCoords!.top
+
+            const start = { transform: `translate(0, ${deltaY}px)` }
+            const mid = {
+              transform: `translate(0, ${deltaY * 0.4}px)`,
+              offset: 0.7,
+            }
+            const end = { transform: `translate(0, 0)` }
+
+            keyframes = [start, mid, end]
+          }
+          if (action === 'remove') {
+            keyframes = [
+              { transform: 'translateY(0)', opacity: 1 },
+              { transform: 'translateY(-100%)', opacity: 0 },
+            ]
+          }
+          return new KeyframeEffect(el, keyframes!, config)
+        })
+      },
+    })
+  },
+}
diff --git a/apps/client/src/router/guards/index.ts b/apps/client/src/router/guards/index.ts
new file mode 100644
index 00000000..16275878
--- /dev/null
+++ b/apps/client/src/router/guards/index.ts
@@ -0,0 +1 @@
+export * from './layoutResolver'
diff --git a/apps/client/src/router/guards/layoutResolver.ts b/apps/client/src/router/guards/layoutResolver.ts
new file mode 100644
index 00000000..63855ab1
--- /dev/null
+++ b/apps/client/src/router/guards/layoutResolver.ts
@@ -0,0 +1,11 @@
+import type { RouteLocationNormalized } from 'vue-router/auto'
+import { LayoutToFileMap } from '@/core/constants/layouts'
+import { LayoutsEnum } from '@/shared/constants/layouts'
+
+export async function layoutResolverGuard(route: RouteLocationNormalized) {
+  const { layout } = route.meta
+  const normalizedLayoutName = layout as LayoutsEnum || LayoutsEnum.default
+  const fileName = LayoutToFileMap[normalizedLayoutName].split('.vue')[0]
+  const component = await import(`@/core/layouts/${fileName}.vue`)
+  route.meta.layoutComponent = component.default
+}
diff --git a/apps/client/src/router/index.ts b/apps/client/src/router/index.ts
new file mode 100644
index 00000000..c74f77a3
--- /dev/null
+++ b/apps/client/src/router/index.ts
@@ -0,0 +1,22 @@
+import { createRouter, createWebHistory } from 'vue-router/auto'
+import { handleHotUpdate, routes } from 'vue-router/auto-routes'
+import { layoutResolverGuard } from './guards'
+
+export const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  // resolved: https://github.com/mnenie/jenda/issues/56
+  routes,
+})
+
+router.beforeEach((to, from) => {
+  // Needs to add guard auth logic in router
+  // if (to.meta.requiresAuth === true) {
+  //   return router.push({ name: 'sign-in' })
+  // }
+})
+
+router.beforeEach(layoutResolverGuard)
+
+if (import.meta.hot) {
+  handleHotUpdate(router)
+}
diff --git a/apps/client/src/router/types.ts b/apps/client/src/router/types.ts
new file mode 100644
index 00000000..e9279f2d
--- /dev/null
+++ b/apps/client/src/router/types.ts
@@ -0,0 +1,15 @@
+import type { RouteRecordRaw } from 'vue-router'
+import type { LayoutsEnum } from '@/shared/constants/layouts'
+import 'vue-router'
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    layout?: LayoutsEnum
+    requiresAuth?: boolean
+  }
+}
+
+export type RouterRecord = Omit<RouteRecordRaw, 'name' | 'children'> & {
+  name: string
+  children?: RouterRecord[]
+}
diff --git a/apps/client/src/shared/assets/fonts/geist/GeistVariableVF.woff2 b/apps/client/src/shared/assets/fonts/geist/GeistVariableVF.woff2
new file mode 100644
index 00000000..328a020b
Binary files /dev/null and b/apps/client/src/shared/assets/fonts/geist/GeistVariableVF.woff2 differ
diff --git a/apps/client/src/shared/assets/icons/ProjectGrid.vue b/apps/client/src/shared/assets/icons/ProjectGrid.vue
new file mode 100644
index 00000000..6d099df4
--- /dev/null
+++ b/apps/client/src/shared/assets/icons/ProjectGrid.vue
@@ -0,0 +1,281 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" height="843" viewBox="0 0 1600 843" fill="none" class="svg">
+    <g clip-path="url(#clip0_889_168141)">
+      <path d="M0 0H1600" stroke="#DEE2E7" class="'' animation-delay-[50ms]" />
+      <path d="M0 37H1600" stroke="#DEE2E7" class="'' animation-delay-[100ms]" />
+      <path d="M0 74.5H1600" stroke="#DEE2E7" class="'' animation-delay-[150ms]" />
+      <path d="M0 118.5H1600" stroke="#DEE2E7" class="'' animation-delay-[200ms]" />
+      <path d="M0 178.3H1600" stroke="#DEE2E7" class="'' animation-delay-[250ms]" />
+      <path d="M0 219.2H1600" stroke="#DEE2E7" class="'' animation-delay-[300ms]" />
+      <path d="M0 260.1H1600" stroke="#DEE2E7" class="'' animation-delay-[350ms]" />
+      <path d="M0 300.8H1600" stroke="#DEE2E7" class="'' animation-delay-[400ms]" />
+      <path d="M0 341.7H1600" stroke="#DEE2E7" class="'' animation-delay-[450ms]" />
+      <path d="M0 382.6H1600" stroke="#DEE2E7" class="'' animation-delay-[500ms]" />
+      <path d="M0 423.5H1600" stroke="#DEE2E7" class="'' animation-delay-[550ms]" />
+      <path d="M0 464.3H1600" stroke="#DEE2E7" class="'' animation-delay-[600ms]" />
+      <path d="M0 505.2H1600" stroke="#DEE2E7" class="'' animation-delay-[650ms]" />
+      <path d="M0 545.9H1600" stroke="#DEE2E7" class="'' animation-delay-[700ms]" />
+      <path d="M0 586.8H1600" stroke="#DEE2E7" class="'' animation-delay-[750ms]" />
+      <path d="M0 627.7H1600" stroke="#DEE2E7" class="'' animation-delay-[800ms]" />
+      <path d="M0 668.5H1600" stroke="#DEE2E7" class="'' animation-delay-[850ms]" />
+      <path d="M0 709.3H1600" stroke="#DEE2E7" class="'' animation-delay-[900ms]" />
+      <path d="M0 750.5H1600" stroke="#DEE2E7" class="'' animation-delay-[1050ms]" />
+      <path d="M0 791.7H1600" stroke="#DEE2E7" class="'' animation-delay-[950ms]" />
+      <path d="M0 832.9H1600" stroke="#DEE2E7" class="'' animation-delay-[1000ms]" />
+      <path d="M82.5 920L82.5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[50ms]" />
+      <path d="M199.5 920L199.5 -9.89437e-06" stroke="#DEE2E7" class="animation-delay-[100ms]" />
+      <path d="M317,5 920L317,5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[150ms]" />
+      <path d="M434.8 920L434.8 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[200ms]" />
+      <path d="M552.5 920L552.5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[250ms]" />
+      <path d="M670 920L670 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[300ms]" />
+      <path d="M787.5 920L787.5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[350ms]" />
+      <path d="M905 920L905 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[400ms]" />
+      <path d="M1022.5 920L1022.5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[450ms]" />
+      <path d="M1140.3 920L1140.3 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[550ms]" />
+      <path d="M1270.5 920L1270.5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[500ms]" />
+      <path d="M1400.5 920L1400.5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[600ms]" />
+      <path d="M1517.5 920L1517.5 3.83295e-05" stroke="#DEE2E7" class="animation-delay-[650ms]" />
+      <ellipse cx="800" cy="-103.5" rx="605" ry="262.5" fill="url(#paint0_radial_889_168141)" />
+    </g>
+    <defs>
+      <filter
+        id="filter0_dd_889_168141"
+        x="204"
+        y="153"
+        width="232"
+        height="39"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_889_168141" />
+        <feOffset />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_889_168141" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="2" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_889_168141" result="effect2_dropShadow_889_168141" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_889_168141" result="shape" />
+      </filter>
+      <filter
+        id="filter1_dd_889_168141"
+        x="446"
+        y="154"
+        width="122"
+        height="36"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_889_168141" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_889_168141" />
+        <feOffset />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_889_168141" result="effect2_dropShadow_889_168141" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_889_168141" result="shape" />
+      </filter>
+      <filter
+        id="filter2_dd_889_168141"
+        x="568"
+        y="154"
+        width="91"
+        height="36"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_889_168141" />
+        <feOffset />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_889_168141" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="2" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_889_168141" result="effect2_dropShadow_889_168141" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_889_168141" result="shape" />
+      </filter>
+      <filter
+        id="filter3_dd_889_168141"
+        x="659"
+        y="154"
+        width="68"
+        height="36"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_889_168141" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_889_168141" />
+        <feOffset />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_889_168141" result="effect2_dropShadow_889_168141" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_889_168141" result="shape" />
+      </filter>
+      <filter
+        id="filter4_dd_889_168141"
+        x="1118"
+        y="154"
+        width="124"
+        height="36"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_889_168141" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_889_168141" />
+        <feOffset />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_889_168141" result="effect2_dropShadow_889_168141" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_889_168141" result="shape" />
+      </filter>
+      <filter
+        id="filter5_dd_889_168141"
+        x="1242"
+        y="154"
+        width="146"
+        height="36"
+        filterUnits="userSpaceOnUse"
+        color-interpolation-filters="sRGB"
+      >
+        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feGaussianBlur stdDeviation="2" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_889_168141" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="effect2_dropShadow_889_168141" />
+        <feOffset />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_889_168141" result="effect2_dropShadow_889_168141" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_889_168141" result="shape" />
+      </filter>
+      <radialGradient
+        id="paint0_radial_889_168141"
+        cx="0"
+        cy="0"
+        r="1"
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="translate(800 -103.5) scale(735.992 319.335)"
+      >
+        <stop offset="0.470178" stop-color="#FFFFFF" />
+        <stop offset="1" stop-color="#FFFFFF" stop-opacity="0" />
+      </radialGradient>
+      <clipPath id="clip0_889_168141"><rect width="1600" height="920" fill="white" /></clipPath>
+      <clipPath id="clip1_889_168141">
+        <rect x="200" y="104" width="1200" height="736" fill="white" />
+      </clipPath>
+      <clipPath id="clip2_889_168141"><path d="M200 104H1400V840H200V104Z" fill="white" /></clipPath>
+      <clipPath id="clip3_889_168141">
+        <rect width="972.27" height="665.511" fill="white" transform="translate(441.248 150.794)" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+.svg {
+  height: auto;
+  width: 100%;
+  max-width: 1600px;
+  justify-self: center;
+  grid-area: 1 / 1 / 1 / 1;
+  position: relative;
+  z-index: -1;
+}
+
+html.dark {
+  .svg {
+    path {
+      stroke: #3f3f46;
+    }
+    stop {
+      stop-color: #262626;
+    }
+  }
+}
+</style>
diff --git a/apps/client/src/shared/assets/icons/custom-jenda/import.svg b/apps/client/src/shared/assets/icons/custom-jenda/import.svg
new file mode 100644
index 00000000..c66a3e26
--- /dev/null
+++ b/apps/client/src/shared/assets/icons/custom-jenda/import.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path fill="currentColor" d="m9 10.114l1.85-1.943a.52.52 0 0 1 .77 0c.214.228.214.6 0 .829l-1.95 2.05a1.55 1.55 0 0 1-2.31 0L5.41 9a.617.617 0 0 1 0-.829a.52.52 0 0 1 .77 0L8 10.082V1.556C8 1.249 8.224 1 8.5 1s.5.249.5.556zM4.18 6a.99.99 0 0 0-.972.804l-1.189 6Q2 12.9 2 13c0 .552.444 1 .99 1h11.02q.098 0 .194-.02a1 1 0 0 0 .778-1.176l-1.19-6a.99.99 0 0 0-.97-.804zM6 5v1h5V5h1.825c.946 0 1.76.673 1.946 1.608l1.19 6A2 2 0 0 1 14.016 15H2.984a1.992 1.992 0 0 1-1.945-2.392l1.19-6C2.414 5.673 3.229 5 4.174 5z"/></svg>
\ No newline at end of file
diff --git a/apps/client/src/shared/assets/icons/custom-jenda/project.svg b/apps/client/src/shared/assets/icons/custom-jenda/project.svg
new file mode 100644
index 00000000..893fe35b
--- /dev/null
+++ b/apps/client/src/shared/assets/icons/custom-jenda/project.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M28 1a3 3 0 0 1 3 3v24a3 3 0 0 1-3 3H4a3 3 0 0 1-3-3V4a3 3 0 0 1 3-3zm1 3a1 1 0 0 0-1-1h-1.998L29 5.998zm0 2.705L25.295 3h-4.293L29 10.998zm0 5L20.295 3h-4.293L29 15.998zm0 5L15.295 3h-4.293L29 20.998zm0 5L10.295 3H6.002L29 25.998zm0 5L5.295 3H4a1 1 0 0 0-1 1v.998L27.002 29H28a1 1 0 0 0 1-1zM26.295 29L3 5.705v4.293L22.002 29zm-5 0L3 10.705v4.293L17.002 29zm-5 0L3 15.705v4.293L12.002 29zm-5 0L3 20.705v4.293L7.002 29zm-5 0L3 25.705V28a1 1 0 0 0 1 1z"/></svg>
\ No newline at end of file
diff --git a/apps/client/src/shared/assets/icons/index.ts b/apps/client/src/shared/assets/icons/index.ts
new file mode 100644
index 00000000..e79b92a0
--- /dev/null
+++ b/apps/client/src/shared/assets/icons/index.ts
@@ -0,0 +1,3 @@
+import ProjectGrid from './ProjectGrid.vue'
+
+export { ProjectGrid }
diff --git a/apps/client/src/shared/composables/breakpoints.ts b/apps/client/src/shared/composables/breakpoints.ts
new file mode 100644
index 00000000..9e2dccca
--- /dev/null
+++ b/apps/client/src/shared/composables/breakpoints.ts
@@ -0,0 +1,24 @@
+import {
+  type Breakpoints,
+  breakpointsSematic,
+  useBreakpoints as VueUseBreakpoints,
+} from '@vueuse/core'
+
+interface CustomBreakpoints extends Breakpoints {
+  intermediateDesktop: string
+  intermediateLaptop: string
+}
+
+export function useBreakpoints() {
+  const breakpoints: CustomBreakpoints = {
+    ...breakpointsSematic,
+    intermediateDesktop: '1820px',
+    intermediateLaptop: '1600px',
+  }
+
+  const breakpointsInstance = VueUseBreakpoints(breakpoints)
+
+  return {
+    breakpoints: breakpointsInstance,
+  }
+}
diff --git a/apps/client/src/shared/composables/expanded.ts b/apps/client/src/shared/composables/expanded.ts
new file mode 100644
index 00000000..f0ee0b0c
--- /dev/null
+++ b/apps/client/src/shared/composables/expanded.ts
@@ -0,0 +1,30 @@
+import { inject, type InjectionKey, provide, type Ref } from 'vue'
+
+interface Expanded {
+  isExpanded: Ref<boolean>
+  onToggleArea: () => void
+}
+
+type T = Expanded
+
+const key: InjectionKey<Expanded> = Symbol('expanded')
+
+export function provideExpandedContext(value: T) {
+  provide(key, value)
+  return value
+}
+
+export function useExpandedContext<
+  U extends T | undefined = T,
+>(
+  fallback?: U,
+): U extends null ? T | null : T {
+  const expanded = inject(key, fallback)
+  if (expanded)
+    return expanded as T
+
+  if (expanded === null)
+    return expanded as any
+
+  throw new Error('not provided')
+}
diff --git a/apps/client/src/shared/composables/language.ts b/apps/client/src/shared/composables/language.ts
new file mode 100644
index 00000000..dd442f2d
--- /dev/null
+++ b/apps/client/src/shared/composables/language.ts
@@ -0,0 +1,33 @@
+import { type Ref, watch } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+interface Value {
+  name: string
+  value: string
+}
+
+export function useLanguage(values: Value[], language: Ref<string>) {
+  const { locale } = useI18n()
+  const storage = useLocalStorage<string | null>('i18n', null)
+
+  const setLanguage = (value: string) => {
+    locale.value = value
+    storage.value = value
+  }
+
+  watch(
+    () => locale.value,
+    (newLocale) => {
+      const selectedOption = values.find(option => option.value === newLocale)
+      if (selectedOption) {
+        language.value = selectedOption.value
+      }
+    },
+    { immediate: true },
+  )
+
+  return {
+    setLanguage,
+  }
+}
diff --git a/apps/client/src/shared/composables/layout-paths.ts b/apps/client/src/shared/composables/layout-paths.ts
new file mode 100644
index 00000000..39f67feb
--- /dev/null
+++ b/apps/client/src/shared/composables/layout-paths.ts
@@ -0,0 +1,66 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { type RouterLinkProps, useRoute } from 'vue-router/auto'
+import type {
+  CombinedLink,
+  ProjectLink,
+  WorkspaceLink,
+} from '@/shared/config/types-shared'
+
+export function useLayoutPaths(
+  links: MaybeRefOrGetter<WorkspaceLink[]>,
+  projects: MaybeRefOrGetter<ProjectLink[]>,
+) {
+  const route = useRoute()
+  const { t } = useI18n()
+
+  const combinedArr = computed(() => {
+    return [
+      ...toValue(links).map(link => ({
+        ...link,
+        name: t(`sidebar.${link.name}`),
+        icon: link.icon,
+      })),
+      ...toValue(projects).map(project => ({
+        _id: project._id,
+        name: project.name,
+        pathName: `/boards/${project._id}`,
+        color: project.color,
+      })),
+    ]
+  })
+  function isProject(
+    item: CombinedLink,
+  ): item is ProjectLink & { pathName: RouterLinkProps['to'] } {
+    return '_id' in item
+  }
+
+  function isCurrentPath(item: CombinedLink): boolean {
+    if (isProject(item)) {
+      return route.path === `/boards/${item._id}`
+    }
+    if (route.name === 'boards-new') {
+      return item.pathName === 'boards'
+    }
+    if (route.name === 'community') {
+      return item.pathName === 'templates'
+    }
+    return route.path === `/${item.pathName}`
+  }
+
+  const active = computed(() => {
+    const activeItem = toValue(combinedArr).find(item => isCurrentPath(item))
+    return {
+      ...activeItem,
+      name: activeItem!.name,
+      extendedAttrs: {
+        color: 'color' in activeItem! ? activeItem.color : undefined,
+        icon: 'icon' in activeItem! ? activeItem.icon : undefined,
+      },
+    }
+  })
+
+  return {
+    active,
+  }
+}
diff --git a/apps/client/src/shared/composables/scroll.ts b/apps/client/src/shared/composables/scroll.ts
new file mode 100644
index 00000000..9dceff03
--- /dev/null
+++ b/apps/client/src/shared/composables/scroll.ts
@@ -0,0 +1,19 @@
+import { nextTick } from 'vue'
+
+export function useScroll<T extends string[]>(arr: T) {
+  const keys = [...arr] as const
+
+  const scrollToEl = async (key: (typeof keys)[number]) => {
+    const el = document.getElementById(key)
+    if (!el) {
+      throw new Error(`${key} is undefined`)
+    }
+    await nextTick(() => {
+      el.scrollIntoView({ block: 'center', behavior: 'smooth' })
+    })
+  }
+
+  return {
+    scrollToEl,
+  }
+}
diff --git a/apps/client/src/shared/config/shared-types.ts b/apps/client/src/shared/config/shared-types.ts
new file mode 100644
index 00000000..915fe5ff
--- /dev/null
+++ b/apps/client/src/shared/config/shared-types.ts
@@ -0,0 +1,18 @@
+import type { IconifyIcon } from '@iconify/vue'
+
+interface Path {
+  pathName: string
+}
+
+export interface WorkspaceLink extends Path {
+  id: number
+  name: string
+  icon: IconifyIcon | string
+}
+export interface ProjectLink extends Path {
+  _id: string
+  name: string
+  color?: string
+}
+
+export type CombinedLink = WorkspaceLink | ProjectLink
diff --git a/apps/client/src/shared/constants/layouts.ts b/apps/client/src/shared/constants/layouts.ts
new file mode 100644
index 00000000..014c2266
--- /dev/null
+++ b/apps/client/src/shared/constants/layouts.ts
@@ -0,0 +1,6 @@
+export enum LayoutsEnum {
+  default = 'default',
+  auth = 'auth',
+  welcome = 'welcome',
+  empty = 'empty',
+}
diff --git a/apps/client/src/shared/constants/links.ts b/apps/client/src/shared/constants/links.ts
new file mode 100644
index 00000000..b4d0cbf7
--- /dev/null
+++ b/apps/client/src/shared/constants/links.ts
@@ -0,0 +1,20 @@
+import type { WorkspaceLink } from '../config/shared-types'
+
+export const links: WorkspaceLink[] = [
+  { id: 0, name: 'boards', pathName: 'boards', icon: 'hugeicons:trello' },
+  { id: 1, name: 'notes', pathName: 'notes', icon: 'hugeicons:checkmark-square-03' },
+  {
+    id: 2,
+    name: 'templates',
+    pathName: 'templates',
+    icon: 'hugeicons:dashboard-square-add',
+  },
+  {
+    id: 3,
+    name: 'analytics',
+    pathName: 'analytics',
+    icon: 'hugeicons:analytics-01',
+  },
+  { id: 4, name: 'members', pathName: 'members', icon: 'hugeicons:user-multiple-02' },
+  { id: 5, name: 'settings', pathName: 'settings', icon: 'hugeicons:setting-07' },
+]
diff --git a/apps/client/src/shared/helpers/helperColor.ts b/apps/client/src/shared/helpers/helperColor.ts
new file mode 100644
index 00000000..9908a53e
--- /dev/null
+++ b/apps/client/src/shared/helpers/helperColor.ts
@@ -0,0 +1,11 @@
+export function formatLabelColor(hex: string, amount: number): string {
+  let color = hex.replace('#', '')
+  if (color.length === 3) {
+    color = color.split('').map(c => c + c).join('')
+  }
+  const r = Math.max(0, Math.min(255, Number.parseInt(color.slice(0, 2), 16) - amount))
+  const g = Math.max(0, Math.min(255, Number.parseInt(color.slice(2, 4), 16) - amount))
+  const b = Math.max(0, Math.min(255, Number.parseInt(color.slice(4, 6), 16) - amount))
+
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`
+}
diff --git a/apps/client/src/shared/helpers/redirectBlank.ts b/apps/client/src/shared/helpers/redirectBlank.ts
new file mode 100644
index 00000000..3b043a40
--- /dev/null
+++ b/apps/client/src/shared/helpers/redirectBlank.ts
@@ -0,0 +1,3 @@
+export function redirect(url: string) {
+  window.open(url, '_blank')
+}
diff --git a/apps/client/src/shared/libs/i18n/index.ts b/apps/client/src/shared/libs/i18n/index.ts
new file mode 100644
index 00000000..50d6465b
--- /dev/null
+++ b/apps/client/src/shared/libs/i18n/index.ts
@@ -0,0 +1,54 @@
+import { computed } from 'vue'
+import { createI18n } from 'vue-i18n'
+import { enZod, ruZod, zhZod } from '../vee-validate/rules'
+import { enLocale, ruLocale, zhLocale } from './locales'
+import { customPluralRule } from './plurals'
+
+export type MessageSchema = typeof enLocale
+
+const messages = {
+  'en-US': {
+    ...enLocale,
+    errors: {
+      ...enZod,
+    },
+  },
+  'ru-RU': {
+    ...ruLocale,
+    errors: {
+      ...ruZod,
+    },
+  },
+  'zh-CN': {
+    ...zhLocale,
+    errors: {
+      ...zhZod,
+    },
+  },
+}
+
+const getCurrentLocale = computed(() => {
+  const storageLanguage = localStorage.getItem('i18n')
+  if (storageLanguage) {
+    return storageLanguage
+  }
+  if (navigator.language.split('-')[0] === 'ru') {
+    return 'ru-RU'
+  }
+  return 'en-US'
+})
+
+const i18n = createI18n<[MessageSchema], 'en-US' | 'ru-RU' | 'zh-CN'>({
+  legacy: false,
+  locale: getCurrentLocale.value,
+  globalInjection: true,
+  pluralRules: {
+    'ru-RU': {
+      // @ts-expect-error i18n shema
+      customPluralRule,
+    },
+  },
+  messages,
+})
+
+export default i18n
diff --git a/apps/client/src/shared/libs/i18n/locales/en-US.ts b/apps/client/src/shared/libs/i18n/locales/en-US.ts
new file mode 100644
index 00000000..7dd5df15
--- /dev/null
+++ b/apps/client/src/shared/libs/i18n/locales/en-US.ts
@@ -0,0 +1,528 @@
+export default {
+  sidebar: {
+    badge: 'free',
+    input: 'Search',
+    section: 'workspace',
+    projects: 'projects',
+    boards: 'Boards',
+    notes: 'Notes',
+    templates: 'Templates',
+    analytics: 'Analytics',
+    members: 'Members',
+    settings: 'Settings',
+    integrations: 'Integraions',
+    help: {
+      title: 'Help',
+      items: 'Support developers | Keyboard shortcuts | Join us',
+    },
+    plan: {
+      btn: 'Buy a subscription',
+      title: 'Premium Plan',
+      description:
+        'boards left',
+      tooltip: '1/3 free workspaces',
+    },
+    soon: 'soon',
+  },
+  header: {
+    navigator: {
+      question: 'Hotkeys',
+      messages: 'Messages',
+    },
+    user: {
+      welcome: 'Go to Welcome',
+      logout: 'Log out',
+    },
+    share: 'Share link',
+  },
+  boards: {
+    create: 'Add board | Add new board',
+    filters: {
+      sort: {
+        title: 'Sort by',
+        name: 'Name',
+        tasks: 'Tasks',
+        date: 'Creation date',
+        default: 'Default',
+      },
+      advanced: {
+        title: 'Advanced filter',
+        empty: 'No such filters available :/',
+        statuses: {
+          title: 'Statuses',
+          arr: [
+            {
+              value: 'active',
+              label: 'Active',
+            },
+            {
+              value: 'archived',
+              label: 'Archived',
+            },
+          ],
+        },
+        labels: {
+          title: 'Labels',
+        },
+      },
+      search: 'Find a board...',
+    },
+    forms: {
+      creating: {
+        title: 'Creating a board',
+        description: 'You can create a new board to manage tasks',
+        name: {
+          label: 'Name',
+          placeholder: 'Enter the name of the board',
+        },
+        labels: {
+          label: 'Labels',
+          placeholder: 'Enter a label',
+          description: 'Start typing a label and press \'Enter\' to save it to your existing labels',
+          alert: '📝 How to change the label color? Specify the label name followed by [#desired color]. For example: jenda [#000000].',
+        },
+        btns: 'Cancel | Create',
+      },
+    },
+    empty: {
+      title: 'No board',
+      description: 'Create your first board and start working',
+    },
+    card: {
+      date_updated: 'Updated',
+    },
+    chart: {
+      title_boards: 'Сreated boards',
+      description_boards:
+        'Create, share, work, and then analyze your activity on Jenda',
+      title_tasks: 'Your tasks',
+      description_tasks: 'Solve and complete the tasks you started',
+    },
+    columns: ['Kanban name', 'Status', 'Labels', 'Participants', 'Tasks', 'Estimate', 'Creation date'],
+  },
+  picker: {
+    placeholder: 'Custom color',
+    tabs: 'Solid | Gradients',
+  },
+  templates: {
+    title: 'Templates',
+    description: 'Choose one of the available templates to create your project',
+    import: 'Click or drag files to import. Supports files',
+    community: 'Comunity templates',
+    create: 'Create new template',
+    user: 'creator',
+    items: [
+      {
+        title: 'Base Kanban',
+        tag: 'Recommended',
+        description: 'Create a basic project with "Base Kanban" template',
+        date: 'June 12, 2024',
+      },
+      {
+        title: 'Roadmap',
+        tag: 'New',
+        description: 'Create a project based on our "Roadmap" special template',
+        date: 'June 18, 2024',
+      },
+      {
+        title: 'Web Development',
+        tag: 'New',
+        description: 'Create a basic project with "Web Development" template',
+        date: 'July 16, 2024',
+      },
+    ],
+  },
+  members: {
+    title: 'Workspace participants',
+    description:
+      'Members can view and join whiteboards for the workspace, as well as create new whiteboards in that space.',
+    content: {
+      all: {
+        title: 'Invite users',
+        description:
+          'Anyone who has an invitation link can join this free workspace. The link can be disabled and recreated at any time. Pending invitations count towards a limit of 10 participants.',
+        btn: 'All participants',
+      },
+      guests: {
+        title: 'Guests',
+        description:
+          'Guests can only view and edit the boards they have been added to.',
+        btn: 'Guests',
+      },
+    },
+    role: {
+      member: 'member',
+      admin: 'admin',
+    },
+    btns: {
+      leave: 'Leave',
+      view: 'View the boards',
+    },
+  },
+  analytics: {
+    title: 'Workspace Analytics',
+    description: 'View and analyze your activity on Jenda',
+    charts: {
+      users: {
+        name: 'Total users',
+        description: 'Number of users in the workspace',
+      },
+      online: {
+        name: 'Workspace activity',
+      },
+      tasks: {
+        name: 'Total tasks',
+        dataset: {
+          names: ['Uncompleted', 'Completed'],
+        },
+      },
+      boards: {
+        name: 'Total boards',
+      },
+    },
+    badges: ['Convenient', 'Informative', 'Anytime'],
+    share: {
+      btn: 'Share',
+      description: 'you can easily take a screenshot and send it to anyone',
+    },
+  },
+  settings: {
+    title: 'Settings',
+    description: 'Manage your account settings and set some preferences.',
+    lang: {
+      label: 'Language',
+      about: 'This is the language that will be used in the dashboard.',
+    },
+    theme: {
+      label: 'Theme',
+      about: 'Select the theme for the dashboard.',
+      variants: {
+        light: 'Light',
+        dark: 'Dark',
+        auto: 'System',
+      },
+      btn: 'Update preferences',
+    },
+  },
+  sheet: {
+    title: 'Create board',
+    description:
+      'The new board will allow you to create tasks for solving them.',
+    form: {
+      name: {
+        label: 'Board name',
+        placeholder: 'e.g. "Jenda"',
+      },
+      description: {
+        label: 'Board description',
+        placeholder: 'e.g. development board for our company',
+      },
+      submit: 'Create board',
+    },
+  },
+  authentication: {
+    login: {
+      title: 'Welcome back',
+      description: 'Enter your info below to sign in your account',
+      btn: 'Continue',
+      proposal: 'Don\'t have an account?',
+      route: 'Sign Up Now',
+    },
+    registration: {
+      title: 'Get started',
+      description: 'Enter your info below to create your account',
+      btn: 'Continue',
+      proposal: 'Have an account?',
+      route: 'Sign In Now',
+    },
+    confirm: {
+      title: 'Confirm your email',
+      description: 'Enter the confirmation code sent to your email',
+      btn: 'Confirm',
+      alert: 'We care about your security. You can trust us to keep your information safe and secure!',
+      proposal: 'Didn\'t receive the code?',
+      route: 'Resend',
+    },
+    workspace: {
+      creating: {
+        title: 'Create your workspace',
+        logo: {
+          label: 'Choose a logo for your workspace',
+          btn: 'Choose image | Delete',
+          description: '*.png, *.jpeg files up to 10MB at least 400px by 400px',
+        },
+        alert: 'Remember, if you don’t choose a logo, jenda will automatically generate one for you',
+        form: {
+          name: {
+            label: 'Name',
+            placeholder: 'Enter your workspace name',
+          },
+          url: {
+            label: 'Custom link',
+          },
+        },
+      },
+      choosing: {
+        title: 'Choose a workspace',
+        description: 'The more your team engages with Jenda, the more dynamic your workspaces become. | Jenda transforms collaboration in shared workspaces—from organizing projects and managing tasks to centralizing discussions and building efficient workflows.',
+        label: 'Available workspaces',
+      },
+      route: 'Continue',
+    },
+    form: {
+      email: 'Email',
+      password: 'Password',
+      otp: 'You need to enter a sequence of single-digit numerical values.',
+    },
+    line: 'Or continue with',
+    privacy: [
+      'By clicking continue, you agree to our',
+      'By clicking sign in, you agree to our',
+      'Terms of Service',
+      'and',
+      'Privacy Policy.',
+    ],
+    back: 'To Home',
+    auth_alert:
+      'authorization via google will be replaced with gitlab after 28.02.2025',
+  },
+  kanban: {
+    sorting: {
+      all: 'All Tasks',
+      activity: 'By activity',
+      workload: 'By workload',
+    },
+    active: 'active',
+    archived: 'archived',
+    new: 'Add new column',
+    cards: {
+      add: 'Add card',
+    },
+    sheet: {
+      column: {
+        title: 'Add new column',
+        description:
+          'When creating a new column, you can create cards and use the kanban board.',
+        form: {
+          label: 'Column name',
+          placeholder: 'Enter the column name',
+          submit: 'Create column',
+        },
+      },
+    },
+    configuration: {
+      title: 'Configure your board',
+      description: 'Customize the board for your convenience',
+      name: 'Here the name and the color indicator of your project',
+      users: 'Participants',
+      status: 'Select the status of your project',
+      clear: 'Clear the board',
+      update: 'Apply changes',
+    },
+  },
+  welcome: {
+    header: {
+      links: [
+        'About',
+        'Kanban',
+        'Collaborative',
+        'Activity',
+        'Members',
+        'Chats',
+      ],
+      login: 'Log In',
+      reg: 'Get started',
+    },
+    about: {
+      tagline: 'Your path to perfection',
+      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: Boards, Real-Time and etc.',
+      btn: 'Get started',
+    },
+    marketing: {
+      heading: 'All convenience in one place',
+      cards: [
+        {
+          title: 'Kanban 🧑‍💻',
+          description:
+            'Organize and visualize your projects with our intuitive Kanban board. Enhance productivity with ease.',
+        },
+        {
+          title: 'Collaborative 👥',
+          description: 'Improve your teamwork!',
+        },
+        {
+          title: 'Members 🌐',
+          description:
+            'Invite new participants to your projects. Enjoy the development together!',
+        },
+        {
+          title: 'Activity 👔',
+          description: 'Analyze your activity and move forward.',
+        },
+        {
+          title: 'Chats 💬',
+          description:
+            'Communicate, share, discuss. Our convenience for you 😉',
+        },
+      ],
+    },
+    marquee: [
+      'We know',
+      'You enjoy',
+      '👑 The best alternative in Russia',
+      'Open source',
+      '👻 It\'s easier with us',
+      'No ads',
+      'Perfection is close 🤟',
+    ],
+    kanban: {
+      name: 'Use Kanban',
+      heading: 'What do you know about our Kanban? 👀',
+      about:
+        'Kanban is a simple and effective way to manage projects, tasks, and time. By visualizing your tasks on a board, you can easily track progress and see what needs to be done next.',
+      writer: 'Try to conquer the world fully with our Kanban',
+      review: {
+        name: 'Alex Peshkov',
+        status: 'Frontend Developer, Open Source Enthusiast',
+        comment:
+          'I enjoy kanban every day and I advise everyone to try it. This is amazing!',
+      },
+    },
+    collaborative: {
+      name: 'Easier Together',
+      heading: 'Every task is a step towards 🤝 collective success!',
+      about:
+        'Our service is designed for teams striving for success through collaboration. With it, every participant can easily track tasks, share ideas, and move towards a common goal together with colleagues.',
+      writer: 'Join us and move towards success as a team!',
+      review: {
+        name: 'Bagaudtinov Airat',
+        status: 'Backend Developer',
+        comment:
+          'Working together is great! Jenda provides such a wonderful opportunity.',
+      },
+    },
+    activity: {
+      heading: 'Progress in action',
+      about:
+        'You can view statistics on completed tasks and open boards. This allows you to track team progress, see completed tasks, and manage current tasks and projects.',
+    },
+    members: {
+      name: 'Team of participants',
+      heading: 'Work with a friendly 😉 team of developers',
+      about:
+        'Our service allows you to create and manage teams, add participants, share tasks, and receive real-time feedback.',
+      writer: 'Join and be in the spotlight!',
+      review: {
+        name: 'Alex Peshkov',
+        status: 'Frontend Developer, Open Source Enthusiast',
+        comment:
+          'A great tool for collaboration. Convenient interface and useful features! 👍 Working with friends',
+      },
+    },
+    chats: {
+      name: 'Ease of communication',
+      heading: 'How often do you communicate with your team? 🤔',
+      about: `Our chats allow you to easily exchange messages, share ideas, and stay in sync with your team. Stay connected and work more efficiently!`,
+      writer: 'Share your thoughts and ideas in our convenient chats!',
+      review: {
+        name: 'Ayrat Bagaoutdinov',
+        status: 'Backend Developer',
+        comment:
+          'The chats here are really convenient! It\'s easy to exchange ideas and quickly resolve issues with the team.',
+      },
+    },
+    footer:
+      'cloud-based program for task management. The source code is available on',
+    mobile: {
+      section_blocks: [
+        {
+          title: 'About Us',
+          description: 'Get to know Jenda',
+        },
+        {
+          title: 'Kanban',
+          description: 'Organize projects with Kanban',
+        },
+        {
+          title: 'Collaboration',
+          description: 'Improve your teamwork!',
+        },
+        {
+          title: 'Members',
+          description: 'Invite members to projects',
+        },
+        {
+          title: 'Activity',
+          description: 'Analyze your activity',
+        },
+        {
+          title: 'Chats',
+          description: 'Communicate, share, discuss',
+        },
+      ],
+      links: [
+        {
+          title: 'product',
+        },
+        {
+          title: 'contact us on Telegram',
+        },
+      ],
+    },
+  },
+  not_found: {
+    title: 'Not Found',
+    description: 'The page you were looking for can\'t be found',
+    btn: 'Go to Home',
+  },
+  dialogs: {
+    share: {
+      title: 'Share Link',
+      description: 'Anyone who has this link will be able to join',
+      close: 'Cancel',
+    },
+    hotkeys: {
+      title: 'Hotkeys',
+      badges: 'Open a search in the workspace | Go to the main page | Log out',
+      alert: 'You\'ll see { badge } used a lot below. This indicates command on Mac and control on Windows and Linux.',
+    },
+  },
+  validations: {
+    email: 'Email',
+    password: 'Password',
+    pin: 'Confirmation code',
+    name: 'Name',
+    url: 'URL handle',
+  },
+  search: {
+    placeholder: 'Type smth for search...',
+    empty: 'No results found',
+    recently: 'Recently',
+    links: 'Links',
+    select: 'Select',
+    open: 'Open',
+    close: 'Close',
+  },
+  workspace: {
+    popover: {
+      members: '{n} members',
+      section: 'Management',
+      pay: 'Plans and Billing',
+      invite: 'Invite to Project',
+      team: 'Team',
+      settings: 'Change Information',
+      active: 'Active',
+      archive: 'Archived',
+    },
+  },
+  table: {
+    row_from_all: 'from',
+    row_selected: 'rows selected',
+    rows_on_page: 'Rows per page',
+    page: 'Page',
+    empty: 'The table is empty',
+  },
+}
diff --git a/apps/client/src/shared/libs/i18n/locales/index.ts b/apps/client/src/shared/libs/i18n/locales/index.ts
new file mode 100644
index 00000000..7dc8bfe2
--- /dev/null
+++ b/apps/client/src/shared/libs/i18n/locales/index.ts
@@ -0,0 +1,3 @@
+export { default as enLocale } from './en-US'
+export { default as ruLocale } from './ru-RU'
+export { default as zhLocale } from './zh-CN'
diff --git a/apps/client/src/shared/libs/i18n/locales/ru-RU.ts b/apps/client/src/shared/libs/i18n/locales/ru-RU.ts
new file mode 100644
index 00000000..b943b3cb
--- /dev/null
+++ b/apps/client/src/shared/libs/i18n/locales/ru-RU.ts
@@ -0,0 +1,529 @@
+export default {
+  sidebar: {
+    badge: 'free',
+    input: 'Поиск',
+    section: 'воркспейс',
+    projects: 'проекты',
+    boards: 'Канбаны',
+    templates: 'Шаблоны',
+    notes: 'Заметки',
+    analytics: 'Аналитика',
+    members: 'Участники',
+    settings: 'Настройки',
+    integrations: 'Интеграции',
+    help: {
+      title: 'Помощь',
+      items: 'Поддержать разработчиков | Сочетания клавиш | Присоединяйтесь к нам',
+    },
+    plan: {
+      btn: 'Приобрести',
+      title: 'Премиум план',
+      description: 'проектов осталось',
+      tooltip: '1/3 бесплатных workspaces',
+    },
+    soon: 'скоро',
+  },
+  header: {
+    navigator: {
+      question: 'Хоткеи',
+      messages: 'Сообщения',
+    },
+    user: {
+      welcome: 'Перейти на главную',
+      logout: 'Выйти',
+    },
+    share: 'Поделиться',
+  },
+  boards: {
+    create: 'Добавить канбан | Добавить новый канбан',
+    filters: {
+      sort: {
+        title: 'Отсортированно по',
+        name: 'Названию',
+        tasks: 'Задачам',
+        date: 'Дате создания',
+        default: 'Умолчанию',
+      },
+      advanced: {
+        title: 'Расширенный фильтр',
+        empty: 'Таких фильтров нет :/',
+        statuses: {
+          title: 'Статусы',
+          arr: [
+            {
+              value: 'active',
+              label: 'Активно',
+            },
+            {
+              value: 'archived',
+              label: 'В архиве',
+            },
+          ],
+        },
+        labels: {
+          title: 'Лейблы',
+        },
+      },
+      search: 'Найти канбан...',
+    },
+    forms: {
+      creating: {
+        title: 'Создание канбана',
+        description: 'Вы можете создать новый канбан чтобы управлять задачами',
+        name: {
+          label: 'Название',
+          placeholder: 'Введите название канбана',
+        },
+        labels: {
+          label: 'Лейблы',
+          placeholder: 'Введите лейбл',
+          description: 'Начните писать лейбл и нажмите \'Enter\', чтобы он записался в ваши существующие лейблы',
+          alert: '📝 Как изменить цвет лейбла? Укажите название лейбла, а затем — [#нужный цвет]. Например: jenda [#000000].',
+        },
+        btns: 'Отмена | Создать',
+      },
+    },
+    empty: {
+      title: 'Нет канбанов',
+      description: 'Создайте свой первый канбан и начните работать',
+    },
+    card: {
+      date_updated: 'Обновлено',
+    },
+    chart: {
+      title_boards: 'Созданные доски',
+      description_boards:
+        'Создавайте, делитесь, а затем анализируйте свою активность на Jenda',
+      title_tasks: 'Ваши задачи',
+      description_tasks: 'Решайте и завершайте начатые задачи',
+    },
+    columns: ['Название канбана', 'Статус', 'Лейблы', 'Участники', 'Задачи', 'Оценка', 'Дата создания'],
+  },
+  picker: {
+    placeholder: 'Кастомный цвет',
+    tabs: 'Однородные | Градиенты',
+  },
+  templates: {
+    title: 'Шаблоны',
+    description:
+      'Выберите один из доступных шаблонов, чтобы создать ваш проект',
+    import: 'Нажмите или перетащите файлы для импорта. Поддерживает файлы',
+    community: 'Шаблоны сообщества',
+    create: 'Создать шаблон',
+    user: 'создатель',
+    items: [
+      {
+        title: 'Базовый шаблон',
+        tag: 'Рекомендуемый',
+        description:
+          'Создайте базовый проект с помощью шаблона "Базовый шаблон"',
+        date: '12 июня 2024',
+      },
+      {
+        title: 'Дорожная карта',
+        tag: 'Новый',
+        description:
+          'Создайте проект на основе нашего шаблона "Дорожная карта"',
+        date: '18 июня 2024',
+      },
+      {
+        title: 'Веб-разработка',
+        tag: 'Новый',
+        description:
+          'Создайте базовый проект с помощью шаблона "Веб-разработка"',
+        date: '16 июля 2024',
+      },
+    ],
+  },
+  members: {
+    title: 'Участники рабочего пространства',
+    description:
+      'Участники могут просматривать и присоединяться к доскам рабочего пространства, а также создавать новые доски в этом пространстве.',
+    content: {
+      all: {
+        title: 'Пригласить пользователей',
+        description:
+          'Каждый, у кого есть ссылка-приглашение, может присоединиться к этому бесплатному рабочему пространству. Ссылка может быть отключена и в любой момент воссоздана. Ожидающие приглашения учитываются в лимите в 10 участников.',
+        btn: 'Все участники',
+      },
+      guests: {
+        title: 'Гости',
+        description:
+          'Гости могут только просматривать и редактировать доски, к которым они были добавлены.',
+        btn: 'Гости',
+      },
+    },
+    role: {
+      member: 'участник',
+      admin: 'админ',
+    },
+    btns: {
+      leave: 'Покинуть',
+      view: 'Просмотреть доски',
+    },
+  },
+  analytics: {
+    title: 'Аналитика рабочего пространства',
+    description: 'Просматривайте и анализируйте свою активность на Jenda',
+    charts: {
+      users: {
+        name: 'Всего пользователей',
+        description: 'Количество пользователей в рабочем пространстве',
+      },
+      online: {
+        name: 'Активность в рабочем пространстве',
+      },
+      tasks: {
+        name: 'Сводка по задачам',
+        dataset: {
+          names: ['Не выполнено', 'Выполнено'],
+        },
+      },
+      boards: {
+        name: 'Созданные доски',
+      },
+    },
+    badges: ['Удобно', 'Информативно', 'В любое время'],
+    share: {
+      btn: 'Поделиться',
+      description: 'вы можете легко сделать скриншот и отправить кому угодно',
+    },
+  },
+  settings: {
+    title: 'Настройки',
+    description:
+      'Управляйте настройками своей учетной записи и установите предпочтения.',
+    lang: {
+      label: 'Язык',
+      about: 'Это язык, который будет использоваться в панели инструментов.',
+    },
+    theme: {
+      label: 'Тема',
+      about: 'Выберите тему для панели инструментов.',
+      variants: {
+        light: 'Светлая',
+        dark: 'Темная',
+        auto: 'Системная',
+      },
+      btn: 'Обновить настройки',
+    },
+  },
+  sheet: {
+    title: 'Создать доску',
+    description: 'Новая доска позволит вам создавать задачи для их решения.',
+    form: {
+      name: {
+        label: 'Название доски',
+        placeholder: 'например, "Jenda"',
+      },
+      description: {
+        label: 'Описание доски',
+        placeholder: 'например, доска для разработки нашей компании',
+      },
+      submit: 'Создать доску',
+    },
+  },
+  authentication: {
+    login: {
+      title: 'С возвращением',
+      description: 'Введите свои данные ниже, чтобы войти в свой аккаунт',
+      btn: 'Продолжить',
+      proposal: 'Ещё нет аккаунта?',
+      route: 'Зарегистрируйтесь',
+    },
+    registration: {
+      title: 'Создайте аккаунт',
+      description: 'Введите свои данные ниже, чтобы создать аккаунт',
+      btn: 'Продолжить',
+      proposal: 'Уже есть аккаунт?',
+      route: 'Войдите',
+    },
+    confirm: {
+      title: 'Подтвердите почту',
+      description: 'Введите код подтверждения, отправленный на вашу почту',
+      btn: 'Подтвердить',
+      alert: 'Мы заботимся о вашей безопасности. Вы можете смело нам доверять!',
+      proposal: 'Не получили код?',
+      route: 'Отправить повторно',
+    },
+    workspace: {
+      creating: {
+        title: 'Создайте воркспейс',
+        logo: {
+          label: 'Выберите логотип',
+          btn: 'Выбрать картинку | Удалить',
+          description: '*.png, *.jpeg до 10 МБ, размером не менее 400 x 400 пикселей',
+        },
+        alert: 'Помните, если вы не выберете лого, то jenda автоматически создаст его для вас',
+        form: {
+          name: {
+            label: 'Название',
+            placeholder: 'Введите название',
+          },
+          url: {
+            label: 'Удобная ссылка',
+          },
+        },
+      },
+      choosing: {
+        title: 'Выберите воркспейс',
+        description: 'Чем активнее ваша команда использует Jenda, тем эффективнее становятся ваши рабочие пространства. | Jenda преображает совместную работу в общих рабочих пространствах. От организации проектов и управления задачами до объединения обсуждений и создания эффективных процессов.',
+        label: 'Доступные воркспейсы',
+      },
+      route: 'Продолжить',
+    },
+    form: {
+      email: 'Почта',
+      password: 'Пароль',
+      otp: 'Вам нужно ввести последовательность односимвольных числовых значений.',
+    },
+    line: 'Или продолжите с',
+    privacy: [
+      'Нажав на продолжить, вы соглашаетесь с нашими',
+      'Нажав на кнопку "войти", вы соглашаетесь с нашими',
+      'Условиями предоставления услуг',
+      'и',
+      'Политикой конфиденциальности.',
+    ],
+    back: 'На главную',
+    auth_alert:
+      'aвторизация через google будет заменена на gitlab после 28.02.2025',
+  },
+  kanban: {
+    sorting: {
+      all: 'Все задачи',
+      activity: 'Aктивность',
+      workload: 'Нагрузка',
+    },
+    active: 'aктивно',
+    archived: 'в архиве',
+    new: 'Добавить новую колонку',
+    cards: {
+      add: 'Добавить карточку',
+    },
+    sheet: {
+      column: {
+        title: 'Добавить новую колонку',
+        description:
+          'При создании новой колонки вы можете создавать карточки и использовать доску канбан.',
+        form: {
+          label: 'Название колонки',
+          placeholder: 'Введите название колонки',
+          submit: 'Создать колонку',
+        },
+      },
+    },
+    configuration: {
+      title: 'Настройте свою доску',
+      description: 'Настройте доску для вашего удобства',
+      name: 'Название и цветовой индикатор вашего проекта',
+      users: 'Участники',
+      status: 'Выберите статус вашего проекта',
+      clear: 'Очистить доску',
+      update: 'Применить изменения',
+    },
+  },
+  welcome: {
+    header: {
+      links: [
+        'О нас',
+        'Канбан',
+        'Совместная работа',
+        'Активность',
+        'Участники',
+        'Чаты',
+      ],
+      login: 'Войти',
+      reg: 'Зарегистрироваться',
+    },
+    about: {
+      tagline: 'Ваш путь к совершенству',
+      description:
+        'Jenda — это облачная программа для эффективного управления проектами и задачами как в команде, так и индивидуально.',
+      badge: 'Основные функции: Доски задач, Отслеживание в реальном времени',
+      badge_mobile: 'Ядро: Проекты, Коллаборации, ...',
+      btn: 'Зарегистрироваться',
+    },
+    marketing: {
+      heading: 'Всё удобство в одном месте',
+      cards: [
+        {
+          title: 'Канбан 🧑‍💻',
+          description:
+            'Организуйте и визуализируйте свои проекты с помощью нашей интуитивно понятной доски Канбан.',
+        },
+        {
+          title: 'Совместная работа 👥',
+          description: 'Улучшите свою командную работу!',
+        },
+        {
+          title: 'Участники 🌐',
+          description:
+            'Пригласите новых участников в ваши проекты. Наслаждайтесь разработкой вместе!',
+        },
+        {
+          title: 'Активность 👔',
+          description: 'Анализируйте вашу активность и двигайтесь вперед.',
+        },
+        {
+          title: 'Чаты 💬',
+          description: 'Общайтесь, делитесь, обсуждайте. Удобство для вас 😉',
+        },
+      ],
+    },
+    marquee: [
+      'Мы знаем',
+      'Вы наслаждаетесь',
+      '👑 Лучший аналог в РФ',
+      'Open source',
+      '👻 У нас проще',
+      'Без рекламы',
+      'Совершенство рядом 🤟',
+    ],
+    kanban: {
+      name: 'Пользуйтесь kanban\'ом',
+      heading: 'Что вы знаете о нашем kanban? 👀',
+      about: `Kanban – это простой и эффективный способ управлять проектами, задачами и временем. Визуализируя
+              ваши задачи на доске, вы легко сможете отслеживать прогресс и видеть, что нужно сделать дальше.`,
+      writer: 'Попробуйте освоить мир на полную с нашим kanban',
+      review: {
+        name: 'Александр Пешков',
+        status: 'Frontend-разработчик, Open source энтузиаст',
+        comment:
+          'Я использую канбан каждый день и советую всем попробовать. Это потрясающе!',
+      },
+    },
+    collaborative: {
+      name: 'Вместе легче',
+      heading: 'Каждая задача – это шаг к 🤝 общему успеху!',
+      about: `Наш сервис создан для команд, которые стремятся к успеху через сотрудничество. С его помощью каждый участник может легко отслеживать задачи, делиться идеями и вместе с коллегами двигаться к общей цели.`,
+      writer: 'Подключайтесь и двигайтесь к успеху всей командой!',
+      review: {
+        name: 'Багаутдинов Айрат',
+        status: 'Backend-разработчик',
+        comment:
+          'Работать совместно это круто! Jenda предоставляет такую шикарную возможность.',
+      },
+    },
+    activity: {
+      heading: 'Прогресс в действии',
+      about:
+        'Вы можете просматривать статистику по завершённым задачам и открытым доскам. Это позволяет отслеживать прогресс команды, видеть выполненные задачи, а также управлять текущими задачами и проектами. ',
+    },
+    members: {
+      name: 'Команда участников',
+      heading: 'Работа в команде дружных 😉 разработчиков',
+      about:
+        'Наш сервис дает возможность создавать и управлять командами, добавлять участников, делиться задачами и получать обратную связь в реальном времени.',
+      writer: 'Участвуй и будь в центре внимания!',
+      review: {
+        name: 'Александр Пешков',
+        status: 'Frontend-разработчик, Open source энтузиаст',
+        comment:
+          'Прекрасный инструмент для совместной работы. Удобный интерфейс и полезные функции! 👍 Работаю вместе с друзьями',
+      },
+    },
+    chats: {
+      name: 'Легкость общения',
+      heading: 'Как часто вы коммуницируете со своей командой ? 🤔',
+      about: `Наши чаты позволяют вам легко обмениваться сообщениями, делиться идеями и оставаться на одной волне с командой. Оставайтесь на связи и работайте более эффективно!`,
+      writer: 'Делитесь своими мыслями и идеями в наших удобных чатах!',
+      review: {
+        name: 'Багаутдинов Айрат',
+        status: 'Backend-разработчик',
+        comment:
+          'Чаты здесь действительно удобные! Легко обмениваться идеями и быстро решать вопросы с командой.',
+      },
+    },
+    footer:
+      'облачная программа для управления задачами. Исходный код доступен на',
+    mobile: {
+      section_blocks: [
+        {
+          title: 'О нас',
+          description: 'Познакомьтесь с Jenda',
+        },
+        {
+          title: 'Канбан',
+          description: 'Организуйте проекты с канбан',
+        },
+        {
+          title: 'Совместная работа',
+          description: 'Улучшите свою командную работу!',
+        },
+        {
+          title: 'Участники',
+          description: 'Пригласите участников в проекты',
+        },
+        {
+          title: 'Активность',
+          description: 'Анализируйте вашу активность',
+        },
+        {
+          title: 'Чаты',
+          description: 'Общайтесь, делитесь, обсуждайте',
+        },
+      ],
+      links: [
+        {
+          title: 'продукт',
+        },
+        {
+          title: 'свяжитесь с нами в Телеграм',
+        },
+      ],
+    },
+  },
+  not_found: {
+    title: 'Не найдено',
+    description: 'Страница, которую вы искали, не найдена',
+    btn: 'На главную',
+  },
+  dialogs: {
+    share: {
+      title: 'Поделиться ссылкой',
+      description: 'Каждый, у кого есть эта ссылка, сможет присоединиться',
+      close: 'Отмена',
+    },
+    hotkeys: {
+      title: 'Хоткеи',
+      badges: 'Открыть поиск в рабочей области | Перейти к главной странице | Выйти из сервиса',
+      alert: 'Вы часто будете видеть { badge } ниже. Это обозначает cmd на Mac и ctrl на Windows и Linux.',
+    },
+  },
+  validations: {
+    email: 'Почта',
+    password: 'Пароль',
+    pin: 'Код подтверждения',
+    name: 'Название',
+    url: 'Удобная ссылка',
+  },
+  search: {
+    placeholder: 'Введите что-нибудь для поиска...',
+    empty: 'Ничего не найдено',
+    recently: 'Недавние',
+    links: 'Ссылки',
+    select: 'Выбрать',
+    open: 'Открыть',
+    close: 'Закрыть',
+  },
+  workspace: {
+    popover: {
+      members: '{n} участников | {n} участник | {n} участника',
+      section: 'Управление',
+      pay: 'Тарифы и оплата',
+      invite: 'Пригласить в проект',
+      team: 'Команда',
+      settings: 'Поменять информацию',
+      active: 'Активно',
+      archive: 'В архиве',
+    },
+  },
+  table: {
+    row_from_all: 'из',
+    row_selected: 'строк выбрано(а)',
+    rows_on_page: 'Строк на странице',
+    page: 'Страница',
+    empty: 'Таблица пуста',
+  },
+}
diff --git a/apps/client/src/shared/libs/i18n/locales/zh-CN.ts b/apps/client/src/shared/libs/i18n/locales/zh-CN.ts
new file mode 100644
index 00000000..f84c78d4
--- /dev/null
+++ b/apps/client/src/shared/libs/i18n/locales/zh-CN.ts
@@ -0,0 +1,502 @@
+export default {
+  sidebar: {
+    badge: '免费',
+    input: '搜索',
+    section: '工作区',
+    projects: '项目',
+    boards: '看板',
+    notes: '笔记',
+    templates: '模板',
+    analytics: '分析',
+    members: '成员',
+    settings: '设置',
+    integrations: '集成',
+    help: {
+      title: '帮助',
+      items: '支持开发者 | 键盘快捷键 | 加入我们',
+    },
+    plan: {
+      btn: '购买订阅',
+      title: '高级计划',
+      description: '剩余看板',
+      tooltip: '1/3 免费工作区',
+    },
+    soon: '敬请期待',
+  },
+  header: {
+    navigator: {
+      question: '快捷键',
+      messages: '消息',
+    },
+    user: {
+      welcome: '前往欢迎页面',
+      logout: '登出',
+    },
+    share: '分享',
+  },
+  boards: {
+    create: '添加看板 | 添加新看板',
+    filters: {
+      sort: {
+        title: '排序依据',
+        name: '名称',
+        tasks: '任务',
+        date: '创建日期',
+        default: '默认',
+      },
+      advanced: {
+        title: '高级筛选',
+        empty: '没有这样的筛选器 :/',
+        statuses: {
+          title: '状态',
+          arr: [
+            {
+              value: 'active',
+              label: '活跃',
+            },
+            {
+              value: 'archived',
+              label: '已归档',
+            },
+          ],
+        },
+        labels: {
+          title: '标签',
+        },
+      },
+      search: '搜索看板...',
+    },
+    forms: {
+      creating: {
+        title: '创建看板',
+        description: '您可以创建一个新的看板来管理任务',
+        name: {
+          label: '名称',
+          placeholder: '请输入看板的名称',
+        },
+        labels: {
+          label: '标签',
+          placeholder: '输入标签',
+          description: '开始输入标签并按 \'Enter\' 键，将其保存到现有标签中',
+          alert: '📝 如何更改标签颜色？指定标签名称后跟 [#所需颜色]。例如：jenda [#000000]。',
+        },
+        btns: '取消 | 创建',
+      },
+    },
+    empty: {
+      title: '没有看板',
+      description: '创建您的第一个看板并开始工作',
+    },
+    card: {
+      date_updated: '更新时间',
+    },
+    chart: {
+      title_boards: '创建的看板',
+      description_boards: '在 Jenda 上创建、分享、工作，然后分析你的活动',
+      title_tasks: '你的任务',
+      description_tasks: '解决并完成你开始的任务',
+    },
+    columns: ['看板名称', '状态', '标签', '参与者', '任务', '估算', '创建日期'],
+  },
+  picker: {
+    placeholder: '自定义颜色',
+    tabs: '纯色 | 渐变',
+  },
+  templates: {
+    title: '模板',
+    description: '选择一个可用模板来创建您的项目',
+    import: '点击或拖拽文件导入。支持文件',
+    community: '社区模板',
+    create: '创建模板',
+    user: '创建者',
+    items: [
+      {
+        title: '基础看板',
+        tag: '推荐',
+        description: '使用 "基础看板" 模板创建一个基本项目',
+        date: '2024年6月12日',
+      },
+      {
+        title: '路线图',
+        tag: '新',
+        description: '基于我们的 "路线图" 模板创建一个项目',
+        date: '2024年6月18日',
+      },
+      {
+        title: '网页开发',
+        tag: '新',
+        description: '使用 "网页开发" 模板创建一个基本项目',
+        date: '2024年7月16日',
+      },
+    ],
+  },
+  members: {
+    title: '工作区参与者',
+    description: '成员可以查看和加入工作区的白板，并在该空间中创建新的白板。',
+    content: {
+      all: {
+        title: '邀请用户',
+        description:
+          '任何拥有邀请链接的人都可以加入这个免费的工作区。链接可以在任何时候被禁用和重新创建。待处理的邀请计入10名参与者的限制。',
+        btn: '所有参与者',
+      },
+      guests: {
+        title: '访客',
+        description: '访客只能查看和编辑他们被添加的板。',
+        btn: '访客',
+      },
+    },
+    role: {
+      member: '成员',
+      admin: '管理员',
+    },
+    btns: {
+      leave: '离开',
+      view: '查看白板',
+    },
+  },
+  analytics: {
+    title: '工作区分析',
+    description: '查看并分析您在 Jenda 上的活动',
+    charts: {
+      users: {
+        name: '用户数量',
+        description: '工作区中的用户数量',
+      },
+      online: {
+        name: '工作区活动',
+      },
+      tasks: {
+        name: '任务数量',
+        dataset: {
+          names: ['未完成', '已完成'],
+        },
+      },
+      boards: {
+        name: '看板数量',
+      },
+    },
+    badges: ['方便', '信息丰富', '随时'],
+    share: {
+      btn: '分享',
+      description: '您可以轻松地截图并将其发送给任何人。',
+    },
+  },
+  settings: {
+    title: '设置',
+    description: '管理您的帐户设置和设定一些偏好。',
+    lang: {
+      label: '语言',
+      about: '这是将在仪表板中使用的语言。',
+    },
+    theme: {
+      label: '主题',
+      about: '选择仪表板的主题。',
+      variants: {
+        light: '浅色',
+        dark: '深色',
+        auto: '系统',
+      },
+      btn: '更新偏好设置',
+    },
+  },
+  sheet: {
+    title: '创建看板',
+    description: '新看板将允许你创建任务以进行解决。',
+    form: {
+      name: {
+        label: '看板名称',
+        placeholder: '例如 “Jenda”',
+      },
+      description: {
+        label: '看板描述',
+        placeholder: '例如 我们公司的开发看板',
+      },
+      submit: '创建看板',
+    },
+  },
+  authentication: {
+    login: {
+      title: '欢迎回来',
+      description: '请输入下面的信息以登录您的帐户',
+      btn: '用电子邮件登录',
+      proposal: '还没有帐户？',
+      route: '立即登录',
+    },
+    registration: {
+      title: '开始使用',
+      description: '请输入下面的信息以创建您的帐户',
+      btn: '继续',
+      proposal: '已有帐户？',
+      route: '立即登录',
+    },
+    confirm: {
+      title: '确认您的邮箱',
+      description: '请输入发送到您邮箱的验证码',
+      btn: '确认',
+      alert: '我们重视您的安全，您可以放心信任我们！',
+      proposal: '没有收到验证码？',
+      route: '重新发送',
+    },
+    workspace: {
+      creating: {
+        title: '创建工作区',
+        logo: {
+          label: '为您的工作区选择一个标志',
+          btn: '选择图片 | 删除',
+          description: '文件 *.png, *.jpeg，最大 10MB，尺寸至少为 400x400 像素',
+        },
+        alert: '请记住，如果您未选择标志，Jenda 将自动为您生成一个',
+        form: {
+          name: {
+            label: '名称',
+            placeholder: '输入您的工作区名称',
+          },
+          url: {
+            label: '自定义链接',
+          },
+        },
+      },
+      choosing: {
+        title: '选择工作空间',
+        description: '您的团队使用 Jenda 越积极，您的工作空间就会越高效。| Jenda 改变了在共享工作空间中的协作方式——从项目组织和任务管理到集中讨论和创建高效工作流程。',
+        label: '可用的工作空间',
+      },
+      route: '立即登录',
+    },
+    form: {
+      email: '电子邮件',
+      password: '密码',
+      otp: '您应输入一串单个数字的值。',
+    },
+    line: '或继续使用',
+    privacy: ['点击继续即表示您同意我们的', '点击登录即表示您同意我们的', '服务条款', '和', '隐私政策。'],
+    back: '回到首页',
+    auth_alert: '通过 google 的授权将在 2025 年 02 月 28 日后被 gitlab 替代',
+  },
+  kanban: {
+    sorting: {
+      all: '所有任务',
+      activity: '按活动排序',
+      workload: '按工作量排序',
+    },
+    active: '活跃',
+    archived: '已归档',
+    new: '添加新列',
+    cards: {
+      add: '添加卡片',
+    },
+    sheet: {
+      column: {
+        title: '添加新列',
+        description: '创建新列时，您可以创建卡片并使用看板。',
+        form: {
+          label: '列名称',
+          placeholder: '输入列名称',
+          submit: '创建列',
+        },
+      },
+    },
+    configuration: {
+      title: '配置您的看板',
+      description: '自定义您的看板以方便使用',
+      name: '项目的名称和颜色指示器"',
+      users: '參與者',
+      status: '选择您的项目状态',
+      clear: '清空看板',
+      update: '应用更改',
+    },
+  },
+  welcome: {
+    header: {
+      links: ['关于', '看板', '协作', '活动', '成员', '聊天'],
+      login: '登录',
+      reg: '注册',
+    },
+    about: {
+      tagline: '通往完美的道路',
+      description:
+        'Jenda 是一款基于云的程序，用于高效协作和个人项目与任务管理。',
+      badge: '核心功能：任务板、实时跟踪',
+      badge_mobile: '核心功能：任务板、实时跟踪',
+      btn: '注册',
+    },
+    marketing: {
+      heading: '所有便利都在一个地方',
+      cards: [
+        {
+          title: '看板 🧑‍💻',
+          description:
+            '使用我们直观的看板来组织和可视化您的项目。轻松提升生产力。',
+        },
+        {
+          title: '协作 👥',
+          description: '提升你的团队合作！',
+        },
+        {
+          title: '成员 🌐',
+          description: '邀请新成员参与您的项目。一起享受开发的乐趣！',
+        },
+        {
+          title: '活动 👔',
+          description: '分析您的活动，迈步向前。',
+        },
+        {
+          title: '聊天 💬',
+          description: '交流、分享、讨论。我们为您提供便利 😉',
+        },
+      ],
+    },
+    marquee: [
+      '我们知道',
+      '你享受',
+      '👑 俄罗斯最好的替代品',
+      '开源',
+      '👻 我们更简单',
+      '无广告',
+      '完美就在眼前 🤟',
+    ],
+    kanban: {
+      name: '使用Kanban',
+      heading: '你知道我们的Kanban吗？👀',
+      about:
+        'Kanban 是一种简单高效的项目、任务和时间管理方式。通过在看板上可视化您的任务，您可以轻松跟踪进度，了解接下来需要做什么。',
+      writer: '尝试使用我们的Kanban，尽情征服世界',
+      review: {
+        name: '亚历克斯·佩什科夫',
+        status: '前端开发者，开源爱好者',
+        comment: '我每天都在使用看板，强烈建议大家尝试。这真是太棒了！',
+      },
+    },
+    collaborative: {
+      name: '一起更轻松',
+      heading: '每个任务都是通向 🤝 共同成功的一步！',
+      about:
+        '我们的服务是为那些通过协作追求成功的团队而创建的。借助它，每个参与者都可以轻松跟踪任务，分享想法，并与同事共同朝着共同目标迈进。',
+      writer: '加入我们，齐心协力迈向成功！',
+      review: {
+        name: '巴高丁诺夫·艾拉特',
+        status: '后端开发人员',
+        comment: '合作是很棒的！Jenda提供了如此美好的机会。',
+      },
+    },
+    activity: {
+      heading: '进行中的进展',
+      about:
+        '您可以查看已完成任务和开放看板的统计信息。这使您能够跟踪团队的进展，查看已完成的任务，以及管理当前的任务和项目。',
+    },
+    members: {
+      name: '团队成员',
+      heading: '与友好的 😉 开发者团队一起工作',
+      about:
+        '我们的服务让您可以创建和管理团队，添加成员，分享任务并实时获取反馈。',
+      writer: '加入并成为焦点！',
+      review: {
+        name: '亚历山大·佩什科夫',
+        status: '前端开发者，开源爱好者',
+        comment:
+          '这是一个很棒的协作工具。界面方便，功能实用！ 👍 和朋友们一起工作',
+      },
+    },
+    chats: {
+      name: '沟通的轻松',
+      heading: '您与团队沟通的频率有多高？🤔',
+      about: `我们的聊天功能让您可以轻松地交换消息、分享想法，与团队保持同步。保持联系，更高效地工作！`,
+      writer: '在我们便捷的聊天中分享您的想法和创意！',
+      review: {
+        name: '艾尔拉特·巴高特丁诺夫',
+        status: '后端开发者',
+        comment: '这里的聊天功能真的很方便！与团队轻松交换想法，快速解决问题。',
+      },
+    },
+    footer: '基于云的任务管理程序。源代码可在',
+    mobile: {
+      section_blocks: [
+        {
+          title: '关于我们',
+          description: '了解 Jenda',
+        },
+        {
+          title: '看板',
+          description: '使用看板管理项目',
+        },
+        {
+          title: '协作',
+          description: '提高你的团队合作！',
+        },
+        {
+          title: '成员',
+          description: '邀请成员加入项目',
+        },
+        {
+          title: '活动',
+          description: '分析您的活动',
+        },
+        {
+          title: '聊天',
+          description: '沟通、分享、讨论',
+        },
+      ],
+      links: [
+        {
+          title: '产品',
+        },
+        {
+          title: '通过 Telegram 联系我们',
+        },
+      ],
+    },
+  },
+  not_found: {
+    title: '未找到',
+    description: '找不到您要查找的页面',
+    btn: '返回首页',
+  },
+  dialogs: {
+    share: {
+      title: '分享链接',
+      description: '任何拥有此链接的人都可以加入',
+      close: '取消',
+    },
+    hotkeys: {
+      title: '快捷键',
+      badges: '打开工作区搜索 | 转到主页 | 退出服务',
+      alert: '你会在下面频繁看到 { badge }。它表示 Mac 上的 Command 键，Windows 和 Linux 上的 Control 键。',
+    },
+  },
+  validations: {
+    email: '邮箱',
+    password: '密码',
+    pin: '确认码',
+    name: '名称',
+    url: '自定义链接',
+  },
+  search: {
+    placeholder: '输入内容进行搜索...',
+    empty: '未找到结果',
+    recently: '最近',
+    links: '链接',
+    select: '选择',
+    open: '打开',
+    close: '关闭',
+  },
+  workspace: {
+    popover: {
+      members: '{n} 成员',
+      section: '管理',
+      pay: '套餐与付款',
+      invite: '邀请加入项目',
+      team: '团队',
+      settings: '更改信息',
+      active: '活跃',
+      archive: '已归档',
+    },
+  },
+  table: {
+    row_from_all: '从',
+    row_selected: '行已选择',
+    rows_on_page: '每页行数',
+    page: '页面',
+    empty: '表格为空',
+  },
+}
diff --git a/apps/client/src/shared/libs/i18n/plurals.ts b/apps/client/src/shared/libs/i18n/plurals.ts
new file mode 100644
index 00000000..552febad
--- /dev/null
+++ b/apps/client/src/shared/libs/i18n/plurals.ts
@@ -0,0 +1,14 @@
+export function customPluralRule<T extends number>(choice: T, choicesLength: T): number {
+  if (choice === 0) {
+    return 0
+  }
+  const teen = choice > 10 && choice < 20
+  const endsWithOne = choice % 10 === 1
+  if (!teen && endsWithOne) {
+    return 1
+  }
+  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
+    return 2
+  }
+  return choicesLength < 4 ? 2 : 3
+}
diff --git a/apps/client/src/shared/libs/shadcn/utils.ts b/apps/client/src/shared/libs/shadcn/utils.ts
new file mode 100644
index 00000000..a83d31e9
--- /dev/null
+++ b/apps/client/src/shared/libs/shadcn/utils.ts
@@ -0,0 +1,15 @@
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'clsx'
+import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function valueUpdater<T extends Updater<any>>(updaterOrValue: T, ref: Ref): void {
+  ref.value = typeof updaterOrValue === 'function'
+    ? updaterOrValue(ref.value)
+    : updaterOrValue
+}
diff --git a/apps/client/src/shared/libs/unocss/presets/presetUiKit.ts b/apps/client/src/shared/libs/unocss/presets/presetUiKit.ts
new file mode 100644
index 00000000..00066db0
--- /dev/null
+++ b/apps/client/src/shared/libs/unocss/presets/presetUiKit.ts
@@ -0,0 +1,9 @@
+import { shortcuts } from '../../../ui/shortcuts'
+import type { Preset } from 'unocss'
+
+export default function presetJendaUI(): Preset {
+  return {
+    name: '@jenda-ui/preset',
+    shortcuts,
+  }
+}
diff --git a/apps/client/src/shared/libs/vee-validate/index.ts b/apps/client/src/shared/libs/vee-validate/index.ts
new file mode 100644
index 00000000..78965702
--- /dev/null
+++ b/apps/client/src/shared/libs/vee-validate/index.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+import i18n, { type MessageSchema } from '../i18n'
+
+import { makeZodI18nMap } from './map'
+import type { I18n } from 'vue-i18n'
+
+z.setErrorMap(makeZodI18nMap(
+  i18n as unknown as
+  I18n<MessageSchema, Record<string, string>>,
+))
+
+export { z }
diff --git a/apps/client/src/shared/libs/vee-validate/map.ts b/apps/client/src/shared/libs/vee-validate/map.ts
new file mode 100644
index 00000000..9f7bc7c1
--- /dev/null
+++ b/apps/client/src/shared/libs/vee-validate/map.ts
@@ -0,0 +1,201 @@
+import {
+  defaultErrorMap,
+  type ErrorMapCtx,
+  z,
+  type ZodErrorMap,
+  ZodIssueCode,
+  type ZodIssueOptionalMessage,
+  ZodParsedType,
+} from 'zod'
+import { joinValues, jsonStringifyReplacer } from './utils'
+import type {
+  ComposerDateTimeFormatting,
+  ComposerTranslation,
+  I18n,
+} from 'vue-i18n'
+
+const zDate = z.string().regex(/(\d{4})-\d{2}-(\d{2})/)
+
+interface i18nOptions {
+  [key: string]: unknown
+}
+
+function makeZodI18nMap(i18n: I18n, key = 'errors'): ZodErrorMap {
+  return (issue: ZodIssueOptionalMessage, ctx: ErrorMapCtx): { message: string } => {
+    let message: string
+    message = defaultErrorMap(issue, ctx).message
+
+    let options = {} as i18nOptions
+
+    const t = i18n.global.t as ComposerTranslation
+    const te = i18n.global.te
+    const d = i18n.global.d as ComposerDateTimeFormatting
+
+    const translateLabel = (message: string, options: i18nOptions) => {
+      if (te(`${key}.${message}WithPath`)) {
+        return t(`${key}.${message}WithPath`, options)
+      }
+      if (te(`${key}.${message}`)) {
+        return t(`${key}.${message}`, options)
+      }
+      if (te(message)) {
+        return t(message, options)
+      }
+      return message
+    }
+
+    switch (issue.code) {
+      case ZodIssueCode.invalid_type:
+        if (issue.received === ZodParsedType.undefined) {
+          message = 'invalidTypeReceivedUndefined'
+          options = {
+            validation: te(`validations.${issue.path.join('.')}`)
+              ? t(`validations.${issue.path.join('.')}`)
+              : issue.path.join('.'),
+          }
+        }
+        else {
+          message = 'invalidType'
+          options = {
+            expected: te(`types.${issue.expected}`)
+              ? t(`types.${issue.expected}`)
+              : issue.expected,
+            received: te(`types.${issue.received}`)
+              ? t(`types.${issue.received}`)
+              : issue.received,
+          }
+        }
+        break
+      case ZodIssueCode.invalid_literal:
+        message = 'invalidLiteral'
+        options = {
+          expected: JSON.stringify(
+            issue.expected,
+            jsonStringifyReplacer,
+          ),
+        }
+        break
+      case ZodIssueCode.unrecognized_keys:
+        message = 'unrecognizedKeys'
+        options = {
+          keys: joinValues(issue.keys, ', '),
+        }
+        break
+      case ZodIssueCode.invalid_union:
+        message = 'invalidUnion'
+        break
+      case ZodIssueCode.invalid_union_discriminator:
+        message = 'invalidUnionDiscriminator'
+        options = {
+          options: joinValues(issue.options),
+        }
+        break
+      case ZodIssueCode.invalid_enum_value:
+        message = 'invalidEnumValue'
+        options = {
+          options: joinValues(issue.options),
+          received: issue.received,
+        }
+        break
+      case ZodIssueCode.invalid_arguments:
+        message = 'invalidArguments'
+        break
+      case ZodIssueCode.invalid_return_type:
+        message = 'invalidReturnType'
+        break
+      case ZodIssueCode.invalid_date:
+        message = 'invalidDate'
+        break
+
+      case ZodIssueCode.invalid_string:
+        if (typeof issue.validation === 'object') {
+          if ('startsWith' in issue.validation) {
+            message = `invalidString.startsWith`
+            options = {
+              startsWith: issue.validation.startsWith,
+            }
+          }
+          else if ('endsWith' in issue.validation) {
+            message = `invalidString.endsWith`
+            options = {
+              endsWith: issue.validation.endsWith,
+            }
+          }
+        }
+        else {
+          message = `invalidString.${issue.validation}`
+          options = {
+            validation: t(`validations.${issue.validation}`),
+          }
+        }
+        break
+      case ZodIssueCode.too_small:
+        message = `tooSmall.${issue.type}.${
+          issue.exact
+            ? 'exact'
+            : issue.inclusive
+              ? 'inclusive'
+              : 'notInclusive'
+        }`
+        options = {
+          minimum:
+          issue.type === 'date'
+            ? d(new Date(issue.minimum as string | number))
+            : issue.minimum,
+        }
+
+        break
+      case ZodIssueCode.too_big:
+        message = `tooBig.${issue.type}.${
+          issue.exact
+            ? 'exact'
+            : issue.inclusive
+              ? 'inclusive'
+              : 'notInclusive'
+        }`
+        options = {
+          maximum:
+          issue.type === 'date'
+            ? d(new Date(issue.maximum as string | number))
+            : issue.maximum,
+        }
+        break
+      case ZodIssueCode.custom:
+        message = 'custom'
+        if (issue.params?.i18n) {
+          if (typeof issue.params.i18n === 'string') {
+            message = issue.params.i18n
+            break
+          }
+          if (
+            typeof issue.params.i18n === 'object'
+            && issue.params.i18n?.key
+          ) {
+            message = issue.params.i18n.key
+            if (issue.params.i18n?.options) {
+              options = issue.params.i18n.options
+            }
+          }
+        }
+        break
+      case ZodIssueCode.invalid_intersection_types:
+        message = 'invalidIntersectionTypes'
+        break
+      case ZodIssueCode.not_multiple_of:
+        message = 'notMultipleOf'
+        options = {
+          multipleOf: issue.multipleOf,
+        }
+        break
+      case ZodIssueCode.not_finite:
+        message = 'notFinite'
+        break
+    }
+    options.path = issue.path.join('.') || ''
+    message = translateLabel(message, options)
+
+    return { message }
+  }
+}
+
+export { makeZodI18nMap, zDate }
diff --git a/apps/client/src/shared/libs/vee-validate/rules/en.ts b/apps/client/src/shared/libs/vee-validate/rules/en.ts
new file mode 100644
index 00000000..3244d4a9
--- /dev/null
+++ b/apps/client/src/shared/libs/vee-validate/rules/en.ts
@@ -0,0 +1,23 @@
+export default {
+  invalidTypeReceivedUndefined: '{validation} is a required field',
+  invalidString: {
+    email: '{validation} must be a valid',
+    url: '{validation} must be a valid',
+  },
+  tooSmall: {
+    string: {
+      exact: '{validation} must be at least {minimum} characters',
+      inclusive: '{path} must be at least {minimum} characters',
+    },
+    array: {
+      exact: '{path} must be at least {minimum} characters',
+      inclusive: '{validation} must be at least {minimum} characters',
+    },
+  },
+  tooBig: {
+    string: {
+      exact: '{path} must be at most {maximum} characters',
+      inclusive: '{path} must be at most {maximum} characters',
+    },
+  },
+}
diff --git a/apps/client/src/shared/libs/vee-validate/rules/index.ts b/apps/client/src/shared/libs/vee-validate/rules/index.ts
new file mode 100644
index 00000000..6bc12aef
--- /dev/null
+++ b/apps/client/src/shared/libs/vee-validate/rules/index.ts
@@ -0,0 +1,3 @@
+export { default as enZod } from './en'
+export { default as ruZod } from './ru'
+export { default as zhZod } from './zh'
diff --git a/apps/client/src/shared/libs/vee-validate/rules/ru.ts b/apps/client/src/shared/libs/vee-validate/rules/ru.ts
new file mode 100644
index 00000000..d05f3986
--- /dev/null
+++ b/apps/client/src/shared/libs/vee-validate/rules/ru.ts
@@ -0,0 +1,23 @@
+export default {
+  invalidTypeReceivedUndefined: 'Обязательное поле',
+  invalidString: {
+    email: '{validation} должна быть валидной',
+    url: '{validation} должен быть валидным',
+  },
+  tooSmall: {
+    string: {
+      exact: 'длина должна быть не менее {minimum} символов',
+      inclusive: 'длина должна быть не менее {minimum} символов',
+    },
+    array: {
+      exact: 'длина должна быть не менее {minimum} символов',
+      inclusive: 'длина должна быть не менее {minimum} символов',
+    },
+  },
+  tooBig: {
+    string: {
+      exact: 'длина должна быть не более {maximum} символов',
+      inclusive: 'длина должна быть не более {maximum} символов',
+    },
+  },
+}
diff --git a/apps/client/src/shared/libs/vee-validate/rules/zh.ts b/apps/client/src/shared/libs/vee-validate/rules/zh.ts
new file mode 100644
index 00000000..323afbb1
--- /dev/null
+++ b/apps/client/src/shared/libs/vee-validate/rules/zh.ts
@@ -0,0 +1,23 @@
+export default {
+  invalidTypeReceivedUndefined: '此字段为必填项',
+  invalidString: {
+    email: '{validation} 必须是有效的',
+    url: '{validation} 必须是有效的',
+  },
+  tooSmall: {
+    string: {
+      exact: '长度必须至少为 {minimum} 个字符',
+      inclusive: '长度必须至少为 {minimum} 个字符',
+    },
+    array: {
+      exact: '长度必须至少为 {minimum} 个字符',
+      inclusive: '长度必须至少为 {minimum} 个字符',
+    },
+  },
+  tooBig: {
+    string: {
+      exact: '长度不得超过 {maximum} 个字符',
+      inclusive: '长度不得超过 {maximum} 个字符',
+    },
+  },
+}
diff --git a/apps/client/src/shared/libs/vee-validate/utils/index.ts b/apps/client/src/shared/libs/vee-validate/utils/index.ts
new file mode 100644
index 00000000..95c0fcc8
--- /dev/null
+++ b/apps/client/src/shared/libs/vee-validate/utils/index.ts
@@ -0,0 +1,15 @@
+export function jsonStringifyReplacer(_: string, value: unknown): unknown {
+  if (typeof value === 'bigint') {
+    return value.toString()
+  }
+  return value
+}
+
+export function joinValues<T extends unknown[]>(
+  array: T,
+  separator = ' | ',
+): string {
+  return array
+    .map(val => (typeof val === 'string' ? `'${val}'` : val))
+    .join(separator)
+}
diff --git a/apps/client/src/shared/libs/vitest-utils/cookiesI18n-mock.ts b/apps/client/src/shared/libs/vitest-utils/cookiesI18n-mock.ts
new file mode 100644
index 00000000..7965a653
--- /dev/null
+++ b/apps/client/src/shared/libs/vitest-utils/cookiesI18n-mock.ts
@@ -0,0 +1,11 @@
+import { vi } from 'vitest'
+
+vi.mock('@vueuse/integrations/useCookies', () => {
+  return {
+    useCookies: () => ({
+      get(key: string) {
+        return key === 'i18n' ? 'en-US' : undefined
+      },
+    }),
+  }
+})
diff --git a/apps/client/src/shared/ui/__docs__/!misc.mdx b/apps/client/src/shared/ui/__docs__/!misc.mdx
new file mode 100644
index 00000000..c35c542d
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/!misc.mdx
@@ -0,0 +1,18 @@
+misc.mdx
+
+import { Markdown } from '@storybook/blocks';
+
+# Miscellaneous Components
+
+This document describes components that are not included in the main documentation but may still be useful in specific contexts. These components are context-dependent and have been thoroughly tested in their respective `.spec.ts` files.
+
+<Markdown>
+  {`
+| Component   | Description                                                                                       | Notes                                      |
+|-------------|---------------------------------------------------------------------------------------------------|--------------------------------------------|
+| UiPagination | A pagination component designed to manage and display paginated data dynamically.                  | Context-dependent, tested in .spec.ts.   |
+| DataTable and  UiTable     | A table component for displaying structured data with customizable columns and rows.                | Context-dependent, tested in .spec.ts. |
+  `}
+</Markdown>
+
+> **Note:** These components are excluded from the primary documentation because their usage scenarios are tightly coupled with specific contexts. Ensure to evaluate their fit for your use case before implementation.
diff --git a/apps/client/src/shared/ui/__docs__/Alert.mdx b/apps/client/src/shared/ui/__docs__/Alert.mdx
new file mode 100644
index 00000000..c6a97874
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Alert.mdx
@@ -0,0 +1,39 @@
+{/* Alert.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as AlertStories from '../alert/UiAlert.stories';
+
+<Meta of={AlertStories} name="Docs" />
+
+# UiAlert
+
+The **UiAlert** component is a flexible alert element that can adapt to various themes and styles, offering customizability for different UI requirements.
+
+<Canvas of={AlertStories.DefaultAlert} />
+
+### Props
+
+<Markdown>
+  {`
+| 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.                                                                                  |
+| class            | Use for customize alert with unocss by type of HTMLAttributes['class']                                                        |
+`}
+</Markdown>
+
+<Canvas of={AlertStories.AlertExampleProps} />
+
+### Slots
+
+<Markdown>
+  {`
+| Slot       | Description                                                                                                |
+|------------|----------------------------------------------------------------------------------------------------------- |
+| default    | Main content slot for the alert's message or other components.                                             |
+`}
+</Markdown>
+
+<Canvas of={AlertStories.SlottedAlert} />
diff --git a/apps/client/src/shared/ui/__docs__/Badge.mdx b/apps/client/src/shared/ui/__docs__/Badge.mdx
new file mode 100644
index 00000000..eb81b170
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Badge.mdx
@@ -0,0 +1,25 @@
+{/* Badge.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as BadgeStories from '../badge/UiBadge.stories';
+
+<Meta of={BadgeStories} name="Docs" />
+
+# UiBadge
+
+The **UiBadge** component is a flexible badge that supports various styles, making it suitable for different UI contexts.
+
+<Canvas of={BadgeStories.DefaultBadge} />
+
+### Props
+
+<Markdown>
+  {`
+| 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} />
diff --git a/apps/client/src/shared/ui/__docs__/Button.mdx b/apps/client/src/shared/ui/__docs__/Button.mdx
new file mode 100644
index 00000000..cbcd3dd0
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Button.mdx
@@ -0,0 +1,45 @@
+{/* Button.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as ButtonStories from '../button/UiButton.stories';
+
+<Meta of={ButtonStories} name="Docs" />
+
+# UiButton
+
+The **UiButton** component is a versatile button that supports various sizes, themes, and icon placements, making it suitable for different UI use cases.
+
+<Canvas of={ButtonStories.DefaultButton} />
+
+### Props
+
+<Markdown>
+  {`
+| 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>
+
+<Canvas of={ButtonStories.ButtonExampleProps} />
+
+### Slots
+
+<Markdown>
+  {`
+| Slot       | Description                                                                                                |
+|------------|----------------------------------------------------------------------------------------------------------- |
+| default    | Main content slot for the button's label or other components.                                              |
+| leading    | Slot for content to appear at the start of the button, such as an icon or loading spinner.                 |
+| trailing   | Slot for content to appear at the end of the button, like an icon or loading spinner.                      |
+| loading    | Slot for a custom loading spinner or icon to be displayed when the button is in a loading state.           |
+`}
+</Markdown>
+
+
+<Canvas of={ButtonStories.SlottedButton} />
diff --git a/apps/client/src/shared/ui/__docs__/Checkbox.mdx b/apps/client/src/shared/ui/__docs__/Checkbox.mdx
new file mode 100644
index 00000000..71d4e013
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Checkbox.mdx
@@ -0,0 +1,28 @@
+{/* Checkbox.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as CheckboxStories from '../checkbox/UiCheckbox.stories';
+
+<Meta of={CheckboxStories} name="Docs" />
+
+# UiCheckbox
+
+The **UiCheckbox** component is a control that allows the user to toggle between checked and not checked.
+
+<Canvas of={CheckboxStories.DefaultCheckbox} />
+
+### Props
+
+<Markdown>
+  {`
+| Prop        | Description                                                                                                     |
+|-------------|-----------------------------------------------------------------------------------------------------------------|
+| checked  | The checkbox field value. **Use __v-model__ to bind this prop to a data property.**                                |
+| defaultValue| The default value                                                                                               |
+| class       | Use for customize checkbox with unocss by type of HTMLAttributes['class']                                          |
+  `}
+</Markdown>
+
+### Another Props
+
+refs: https://www.radix-vue.com/components/checkbox
diff --git a/apps/client/src/shared/ui/__docs__/Command.mdx b/apps/client/src/shared/ui/__docs__/Command.mdx
new file mode 100644
index 00000000..970646ff
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Command.mdx
@@ -0,0 +1,20 @@
+{/* Command.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as CommandStories from '../command/UiCommand.stories';
+
+<Meta of={CommandStories} name="Docs" />
+
+# UiCommand
+
+Fast, composable, unstyled command menu.
+
+### Main Components:
+
+`UiCommand`, `UiCommandItem`, `UiCommandList`, `UiCommandInput`,
+
+<Canvas of={CommandStories.DefaultCommand} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/combobox
diff --git a/apps/client/src/shared/ui/__docs__/Dialog.mdx b/apps/client/src/shared/ui/__docs__/Dialog.mdx
new file mode 100644
index 00000000..0bd3698b
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Dialog.mdx
@@ -0,0 +1,20 @@
+{/* Dialog.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as DialogStories from '../dialog/UiDialog.stories';
+
+<Meta of={DialogStories} name="Docs" />
+
+# UiDialog
+
+A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+
+### Main Components:
+
+`UiDialog`, `UiDialogTrigger`, `UiDialogContent`
+
+<Canvas of={DialogStories.DefaultDialog} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/dialog
diff --git a/apps/client/src/shared/ui/__docs__/DropdownMenu.mdx b/apps/client/src/shared/ui/__docs__/DropdownMenu.mdx
new file mode 100644
index 00000000..9f524bae
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/__docs__/Form.mdx b/apps/client/src/shared/ui/__docs__/Form.mdx
new file mode 100644
index 00000000..df430b04
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Form.mdx
@@ -0,0 +1,16 @@
+{/* Form.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as FormStories from '../form/UiForm.stories';
+
+<Meta of={FormStories} name="Docs" />
+
+# UiForm
+
+Form component with with possible integration formkit and vee-validate.
+
+<Canvas of={FormStories.DefaultFormField} />
+
+### Warning
+
+<Canvas of={FormStories.WarningFormField} />
diff --git a/apps/client/src/shared/ui/__docs__/GettingStarted.mdx b/apps/client/src/shared/ui/__docs__/GettingStarted.mdx
new file mode 100644
index 00000000..e100d6a3
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/GettingStarted.mdx
@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Getting Started" />
+
+# Get started 🖖
+
+**Jenda UI Kit** is a custom, reusable component library designed to help developers create user interfaces faster with a cohesive design language. Created as part of the Jenda project, this UI kit provides pre-built, customizable Vue components tailored for seamless integration and intuitive use.
+
+### **Usage**
+
+Import components you want into your UI
+
+`import { UiButton, UiBadge, UiInput } from '@shared/ui';`
+
+and use them like so
+
+```
+<script setup lang="ts">
+import { UiButton } from '@/shared/ui';
+</script>
+
+<template>
+   <UiButton variant="outline" size="lg">hello from ui</UiButton>
+</template>
+```
+
+### **Run and develop UI Kit locally**
+
+Clone the [Jenda repository](https://github.com/mnenie/jenda) then start Storybook.
+
+`pnpm i && pnpm run storybook`
+
+__if you have an errors in console with `iframe` just reload page__
+
+
+### **Theme Support**
+
+Jenda UI Kit components support multiple themes: light, dark, and system (auto-switches based on user’s OS preferences). This allows for a more personalized and accessible UI experience across devices and environments.
+
diff --git a/apps/client/src/shared/ui/__docs__/Input.mdx b/apps/client/src/shared/ui/__docs__/Input.mdx
new file mode 100644
index 00000000..e1c72742
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Input.mdx
@@ -0,0 +1,24 @@
+{/* Input.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as InputStories from '../input/UiInput.stories';
+
+<Meta of={InputStories} name="Docs" />
+
+# UiInput
+
+The **UiInput** component is a versatile input field that supports various types (text, password, number, email) and can be easily integrated with `v-model` for value binding.
+
+<Canvas of={InputStories.DefaultInput} />
+
+### Props
+
+<Markdown>
+  {`
+| Prop        | Description                                                                                                     |
+|-------------|-----------------------------------------------------------------------------------------------------------------|
+| modelValue  | The input field value. **Use __v-model__ to bind this prop to a data property.**                                |
+| defaultValue| The default value                                                                                               |
+| class       | Use for customize input with unocss by type of HTMLAttributes['class']                                          |
+  `}
+</Markdown>
diff --git a/apps/client/src/shared/ui/__docs__/PinInput.mdx b/apps/client/src/shared/ui/__docs__/PinInput.mdx
new file mode 100644
index 00000000..e4d578a0
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/PinInput.mdx
@@ -0,0 +1,26 @@
+{/* PinInput.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as PinInputStories from '../pin-input/UiPinInput.stories';
+
+<Meta of={PinInputStories} name="Docs" />
+
+# UiPinInput
+
+Allows users to input a sequence of one-character alphanumeric inputs.
+
+### Main Components:
+
+`UiPinInput`, `UiPinInputInput`, `UiPinInputGroup`
+
+<Canvas of={PinInputStories.DefaultPinInput} />
+
+### With Separator
+
+`UiPinInput`, `UiPinInputInput`, `UiPinInputGroup`, `UiPinInputSeparator`
+
+<Canvas of={PinInputStories.PinInputWithSeparator} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/pin-input
diff --git a/apps/client/src/shared/ui/__docs__/Popover.mdx b/apps/client/src/shared/ui/__docs__/Popover.mdx
new file mode 100644
index 00000000..4f484d65
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Popover.mdx
@@ -0,0 +1,20 @@
+{/* Popover.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as PopoverStories from '../popover/UiPopover.stories';
+
+<Meta of={PopoverStories} name="Docs" />
+
+# UiPopover
+
+The **UiPopover** component displays a content in a portal to the user — such as a set of actions or functions — triggered by a button.
+
+### Components:
+
+`UiPopover`, `UiPopoverTrigger`, `UiPopoverContent`
+
+<Canvas of={PopoverStories.DefaultPopover} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/popover
diff --git a/apps/client/src/shared/ui/__docs__/Select.mdx b/apps/client/src/shared/ui/__docs__/Select.mdx
new file mode 100644
index 00000000..c68b548e
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Select.mdx
@@ -0,0 +1,20 @@
+{/* Select.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as SelectStories from '../select/UiSelect.stories';
+
+<Meta of={SelectStories} name="Docs" />
+
+# UiSelect
+
+The **UiSelect** component displays a list of options for the user to pick from—triggered by a button.
+
+### Main Components:
+
+`UiSelect`, `UiSelectTrigger`, `UiSelectContent`, `UiSelectItem`,
+
+<Canvas of={SelectStories.DefaultSelect} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/select
diff --git a/apps/client/src/shared/ui/__docs__/Tabs.mdx b/apps/client/src/shared/ui/__docs__/Tabs.mdx
new file mode 100644
index 00000000..42d5ace7
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/Tabs.mdx
@@ -0,0 +1,20 @@
+{/* Tabs.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as TabsStories from '../tabs/UiTabs.stories';
+
+<Meta of={TabsStories} name="Docs" />
+
+# UiTabs
+
+The **UiTabs** component set of layered sections of content—known as tab panels—that are displayed one at a time.
+
+### Main Components:
+
+`UiTabs`, `UiTabsTrigger`, `UiTabsContent`, `UiTabsList`,
+
+<Canvas of={TabsStories.DefaultTabs} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/tabs
diff --git a/apps/client/src/shared/ui/__docs__/TagsInput.mdx b/apps/client/src/shared/ui/__docs__/TagsInput.mdx
new file mode 100644
index 00000000..701b4228
--- /dev/null
+++ b/apps/client/src/shared/ui/__docs__/TagsInput.mdx
@@ -0,0 +1,24 @@
+{/* TagsInput.mdx */}
+
+import { Canvas, Story, Meta, Markdown } from '@storybook/blocks';
+import * as TagsInputStories from '../tags-input/UiTagsInput.stories';
+
+<Meta of={TagsInputStories} name="Docs" />
+
+# UiTagsInput
+
+Render tags inside an input, followed by an actual text input.
+
+### Main Components:
+
+`UiTagsInput`, `UiTagsInputInput`, `UiTagsInputItem`
+
+<Canvas of={TagsInputStories.DefaultTagsInput} />
+
+### Disabled
+
+<Canvas of={TagsInputStories.DisabledTagsInput} />
+
+### Props
+
+refs: https://www.radix-vue.com/components/tags-input
diff --git a/apps/client/src/shared/ui/_shortcuts/alert.ts b/apps/client/src/shared/ui/_shortcuts/alert.ts
new file mode 100644
index 00000000..d93e00be
--- /dev/null
+++ b/apps/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-1.25 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/apps/client/src/shared/ui/_shortcuts/badge.ts b/apps/client/src/shared/ui/_shortcuts/badge.ts
new file mode 100644
index 00000000..e3eef4f2
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/badge.ts
@@ -0,0 +1,20 @@
+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)`],
+  [/^badge-soft(?:-(.+))?$/, ([, c = 'blue']) => `!border-transparent bg-${c}-100 text-${c}-700 dark:bg-${c}-900 dark:text-${c}-100`],
+]
+
+export const badge = [
+  ...dynamicBadge,
+  staticBadge,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/button.ts b/apps/client/src/shared/ui/_shortcuts/button.ts
new file mode 100644
index 00000000..9aeaa643
--- /dev/null
+++ b/apps/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-#2e2e2e text-neutral-50 hover:bg-#2e2e2e/80)',
+  'btn-outline': 'border border-solid border-neutral-200 bg-white shadow-sm hover:(bg-neutral-50 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-50 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 focus:ring-0 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/apps/client/src/shared/ui/_shortcuts/checkbox.ts b/apps/client/src/shared/ui/_shortcuts/checkbox.ts
new file mode 100644
index 00000000..a3cc82e2
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/checkbox.ts
@@ -0,0 +1,19 @@
+type CheckboxPrefix = 'checkbox'
+
+export const staticCheckbox: Record<`${CheckboxPrefix}-${string}` | CheckboxPrefix, string> = {
+  'checkbox': 'w-4 h-4 shrink-0 rounded-md bg-transparent border disabled:cursor-not-allowed disabled:opacity-50',
+  'checkbox-indicator': 'flex h-full w-full items-center justify-center',
+  'checkbox-indecator-icon': 'w-4 h-4',
+
+  'checkbox-default': 'border-neutral-950 data-[state=checked]:bg-neutral-950 data-[state=checked]:text-neutral-50 dark:border-neutral-100 dark:(focus-visible:ring-neutral-100 data-[state=checked]:bg-neutral-100 data-[state=checked]:text-neutral-900)',
+
+}
+
+export const dynamicCheckbox: [RegExp, (params: RegExpExecArray) => string][] = [
+  [/^checkbox-solid(?:-(.+))?$/, ([, c = 'blue']) => `border-neutral-200 data-[state=checked]:!bg-${c}-500 data-[state=checked]:!text-neutral-50 dark:border-neutral-600`],
+]
+
+export const checkbox = [
+  staticCheckbox,
+  ...dynamicCheckbox,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/command.ts b/apps/client/src/shared/ui/_shortcuts/command.ts
new file mode 100644
index 00000000..8be2b5f6
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/command.ts
@@ -0,0 +1,18 @@
+type CommandPrefix = 'command'
+
+export const staticCommand: Record<`${CommandPrefix}-${string}` | CommandPrefix, string> = {
+  'command': 'flex h-full w-full flex-col rounded-md bg-white text-neutral-950 dark:(bg-neutral-800 text-neutral-50)',
+  'command-dialog': 'overflow-hidden p-0 shadow-lg',
+  'command-empty': 'py-6 text-center text-sm',
+  'command-group': 'overflow-y-auto overflow-x-hidden p-1 text-neutral-950',
+  'command-group-label': 'px-2 py-1.5 text-xs font-medium text-neutral-500 dark:text-neutral-400',
+  'command-input': 'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-neutral-500 disabled:(cursor-not-allowed opacity-50) dark:placeholder:text-neutral-400',
+  'command-item': 'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:(bg-neutral-100 text-neutral-900) data-[disabled]:(pointer-events-none opacity-50) dark:data-[highlighted]:(bg-neutral-700/40 text-neutral-50)',
+  'command-list': 'max-h-[300px] overflow-y-auto overflow-x-hidden',
+  'command-separator': '-mx-1 h-px bg-neutral-200 dark:bg-neutral-700/40',
+  'command-shortcut': 'ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400',
+}
+
+export const command = [
+  staticCommand,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/dialog.ts b/apps/client/src/shared/ui/_shortcuts/dialog.ts
new file mode 100644
index 00000000..4d65bc2f
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/dialog.ts
@@ -0,0 +1,19 @@
+type DialogPrefix = 'dialog'
+
+export const staticDialog: Record<`${DialogPrefix}-${string}` | DialogPrefix, string> = {
+  'dialog': '',
+  'dialog-overlay': 'fixed inset-0 z-999 bg-black/60',
+  'dialog-content': 'fixed left-1/2 top-1/2 z-1000 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg dark:(border-neutral-800 bg-neutral-800)',
+  'dialog-close': 'absolute right-4 top-3.25 w-4 h-4 flex items-center justify-center rounded-sm opacity-70 ring-offset-0 transition-opacity hover:opacity-100 focus:outline-none focus:ring-0 disabled:pointer-events-none dark:(ring-offset-0 focus:ring-0)',
+  'dialog-title': 'text-lg font-semibold leading-none tracking-tight',
+  'dialog-description': 'text-sm text-neutral-500 dark:text-neutral-400',
+  'dialog-footer': 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+  'dialog-header': 'flex flex-col gap-y-1.5 text-center sm:text-left',
+  'dialog-scroll-overlay': 'dialog-overlay grid place-items-center overflow-y-auto',
+  'dialog-scroll-content': 'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-neutral-200 bg-white p-6 shadow-lg duration-200 sm:rounded-lg md:w-full dark:(border-neutral-800 bg-neutral-800)',
+  'dialog-scroll-close': 'fixed inset-0 z-50 cursor-pointer opacity-0',
+}
+
+export const dialog = [
+  staticDialog,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/dropdown-menu.ts b/apps/client/src/shared/ui/_shortcuts/dropdown-menu.ts
new file mode 100644
index 00000000..0c07c2e6
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/_shortcuts/form.ts b/apps/client/src/shared/ui/_shortcuts/form.ts
new file mode 100644
index 00000000..c44b528f
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/form.ts
@@ -0,0 +1,13 @@
+type FormPrefix = 'form'
+
+export const staticForm: Record<`${FormPrefix}-${string}` | FormPrefix, string> = {
+  'form': '',
+  'form-field': 'grid gap-2 justify-items-start',
+  'form-label': 'text-sm text-neutral-900 !fw500 dark:text-neutral-200 peer-disabled:(cursor-not-allowed opacity-70)',
+  'form-message': 'flex items-center gap-2 capitalize text-xs normal-case !fw500',
+  'form-text-underline': 'cursor-pointer underline underline-offset-4 duration-100 ease-in hover:text-neutral-900 dark:hover:text-neutral-400',
+}
+
+export const form = [
+  staticForm,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/index.ts b/apps/client/src/shared/ui/_shortcuts/index.ts
new file mode 100644
index 00000000..62ea770e
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/index.ts
@@ -0,0 +1,38 @@
+import { alert } from './alert'
+import { badge } from './badge'
+import { btn } from './button'
+import { dialog } from './dialog'
+import { dropdownMenu } from './dropdown-menu'
+import { form } from './form'
+import { input } from './input'
+import { pinInput } from './pin-input'
+import { select } from './select'
+import { popover } from './popover'
+import { command } from './command'
+import { tabs } from './tabs'
+import { pagination } from './pagination'
+import { table } from './table'
+import { checkbox } from './checkbox'
+import { picker } from './picker'
+import { tagsInput } from './tags-input'
+import type { Preset, StaticShortcutMap } from '@unocss/core'
+
+export const shortcuts = [
+  ...btn,
+  ...input,
+  ...badge,
+  ...alert,
+  ...dropdownMenu,
+  ...select,
+  ...dialog,
+  ...pinInput,
+  ...form,
+  ...popover,
+  ...command,
+  ...tabs,
+  ...pagination,
+  ...checkbox,
+  ...table,
+  ...picker,
+  ...tagsInput,
+] as Exclude<Preset['shortcuts'], undefined | StaticShortcutMap>
diff --git a/apps/client/src/shared/ui/_shortcuts/input.ts b/apps/client/src/shared/ui/_shortcuts/input.ts
new file mode 100644
index 00000000..c449e7f3
--- /dev/null
+++ b/apps/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-34px w-full rounded-md border border-solid border-neutral-200 bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:(border-0 bg-transparent text-sm font-medium) placeholder:text-neutral-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-neutral-950 disabled:(cursor-not-allowed opacity-50) dark:(border-neutral-700 placeholder:text-neutral-400 focus-visible:ring-neutral-300)',
+}
+
+export const input = [
+  staticInput,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/pagination.ts b/apps/client/src/shared/ui/_shortcuts/pagination.ts
new file mode 100644
index 00000000..ec20b3ba
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/pagination.ts
@@ -0,0 +1,11 @@
+type PaginationPrefix = 'pagination'
+
+export const staticPagination: Record<`${PaginationPrefix}-${string}` | PaginationPrefix, string> = {
+  'pagination': '',
+  'pagination-ellipsis': 'w-9 h-9 flex items-center justify-center',
+  'pagination-item': 'w-9 h-9 p-0',
+}
+
+export const pagination = [
+  staticPagination,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/picker.ts b/apps/client/src/shared/ui/_shortcuts/picker.ts
new file mode 100644
index 00000000..1dcb94c5
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/picker.ts
@@ -0,0 +1,13 @@
+type PickerPrefix = 'picker'
+
+export const staticPicker: Record<`${PickerPrefix}-${string}` | PickerPrefix, string> = {
+  'picker': 'flex flex-wrap gap-1 mt-0',
+  'picker-icon': 'h-3.5 w-3.5 rounded object-cover transition-all mr-px cursor-pointer text-neutral-800 dark:text-neutral-100',
+  'picker-input': 'col-span-2 h-8 mt-4 focus:ring-0',
+  'picker-tabs': 'w-full',
+  'picker-item': 'rounded-md h-6 w-6 cursor-pointer active:scale-105',
+}
+
+export const picker = [
+  staticPicker,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/pin-input.ts b/apps/client/src/shared/ui/_shortcuts/pin-input.ts
new file mode 100644
index 00000000..0116d9bc
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/pin-input.ts
@@ -0,0 +1,11 @@
+type PinInputPrefix = 'pin-input'
+
+export const staticPinInput: Record<`${PinInputPrefix}-${string}` | PinInputPrefix, string> = {
+  'pin-input': 'flex gap-2 items-center',
+  'pin-input-group': 'flex items-center',
+  'pin-input-input': 'relative placeholder:(absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2) align-middle text-center focus:(outline-none ring-2 ring-neutral-950 relative z-10) flex h-9 w-9 items-center justify-center border-y border-r border-neutral-200 text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md dark:(focus:ring-neutral-300 border-neutral-800)',
+}
+
+export const pinInput = [
+  staticPinInput,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/popover.ts b/apps/client/src/shared/ui/_shortcuts/popover.ts
new file mode 100644
index 00000000..734a24c6
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/popover.ts
@@ -0,0 +1,10 @@
+type PopoverPrefix = 'popover'
+
+export const staticPopover: Record<`${PopoverPrefix}-${string}` | PopoverPrefix, string> = {
+  'popover': '',
+  'popover-content': 'z-1001 w-72 rounded-md border border-neutral-200 bg-white p-2 px-3 text-neutral-950 shadow outline-none dark:(border-neutral-700 bg-neutral-800 text-neutral-50)',
+}
+
+export const popover = [
+  staticPopover,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/select.ts b/apps/client/src/shared/ui/_shortcuts/select.ts
new file mode 100644
index 00000000..53723393
--- /dev/null
+++ b/apps/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-8 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/apps/client/src/shared/ui/_shortcuts/table.ts b/apps/client/src/shared/ui/_shortcuts/table.ts
new file mode 100644
index 00000000..70e70b5b
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/table.ts
@@ -0,0 +1,18 @@
+type TablePrefix = 'table'
+
+export const staticTable: Record<`${TablePrefix}-${string}` | TablePrefix, string> = {
+  'table': 'w-full caption-bottom text-13px 2xl:text-sm overflow-y-auto',
+  'table-wrapper': 'relative w-full overflow-x-hidden overflow-y-auto border border-neutral-100 dark:border-neutral-700/50 max-h-[calc(100dvh-160px)] rounded-md',
+  'table-body': '[&_tr:last-child]:border-0',
+  'table-row': 'border-b border-neutral-100 dark:border-neutral-700/50 transition-colors data-[state=selected]:bg-blue-100 dark:data-[state=selected]:bg-blue-900 cursor-pointer',
+  'table-cell': 'p-2 border-r overflow-x-auto first:border-none last:border-none border-neutral-100  dark:border-neutral-700/50 overflow-hidden text-ellipsis whitespace-nowrap px-8px h-12 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:flex [&>[role=checkbox]]:items-center dark:text-neutral-100',
+  'table-head': 'h-12 px-8px first:pl-12px border-r first:border-none last:border-none border-neutral-100 dark:border-neutral-700/50 text-ellipsis text-left align-middle font-medium text-neutral-500 dark:text-neutral-400 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:flex [&>[role=checkbox]]:items-center',
+  'table-header': 'sticky top-0 z-33 border-b bg-neutral-50 dark:bg-#2e2e2e',
+  'table-empty': 'flex items-center justify-center text-sm text-neutral-500 dark:text-neutral-400',
+  'table-empty-cell': 'whitespace-nowrap align-middle text-sm text-neutral-950 dark:text-neutral-100',
+  'table-caption': 'mt-4 text-sm text-neutral-500 dark:text-neutral-400',
+}
+
+export const table = [
+  staticTable,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/tabs.ts b/apps/client/src/shared/ui/_shortcuts/tabs.ts
new file mode 100644
index 00000000..5d0b23e5
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/tabs.ts
@@ -0,0 +1,12 @@
+type TabsPrefix = 'tabs'
+
+export const staticTabs: Record<`${TabsPrefix}-${string}` | TabsPrefix, string> = {
+  'tabs': '',
+  'tabs-content': 'focus-visible:outline-none focus-visible:ring-0',
+  'tabs-list': 'inline-flex items-center justify-center rounded-lg bg-neutral-100 h-9 2xl:h-8 border border-neutral-100 p-1 text-neutral-500 dark:(border-neutral-700 bg-neutral-800 text-neutral-400)',
+  'tabs-trigger': 'inline-flex items-center bg-transparent justify-center whitespace-nowrap rounded-md px-3 py-1 2xl:(py-0.5 px-2.5) text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:(ring-offset-0 focus-visible:ring-0 data-[state=active]:bg-neutral-700/40 data-[state=active]:text-neutral-100)',
+}
+
+export const tabs = [
+  staticTabs,
+]
diff --git a/apps/client/src/shared/ui/_shortcuts/tags-input.ts b/apps/client/src/shared/ui/_shortcuts/tags-input.ts
new file mode 100644
index 00000000..d5a7dac6
--- /dev/null
+++ b/apps/client/src/shared/ui/_shortcuts/tags-input.ts
@@ -0,0 +1,14 @@
+type TagsInputPrefix = 'tags-input'
+
+export const staticTagsInput: Record<`${TagsInputPrefix}-${string}` | TagsInputPrefix, string> = {
+  'tags-input': 'flex flex-wrap gap-2 items-center rounded-md border border-neutral-200 px-3 py-1.5 text-sm dark:(border-neutral-700 focus-visible:ring-neutral-300)',
+  'tags-input-input': 'text-sm min-h-5 focus:outline-none flex-1 bg-transparent placeholder:text-neutral-500 dark:placeholder:text-neutral-400',
+  'tags-input-item': 'flex h-5 items-center rounded-md ring-offset-0 bg-neutral-100 text-neutral-800 dark:(bg-neutral-700/60 text-neutral-100) data-[state=active]:(ring-0 ring-offset-0)',
+  'tags-input-item-delete': 'flex rounded bg-transparent mr-1',
+  'tags-input-item-delete-icon': 'h-3.5 w-3.5',
+  'tags-input-item-text': 'py-0.5 px-2 text-sm rounded bg-transparent',
+}
+
+export const tagsInput = [
+  staticTagsInput,
+]
diff --git a/apps/client/src/shared/ui/alert/UiAlert.stories.ts b/apps/client/src/shared/ui/alert/UiAlert.stories.ts
new file mode 100644
index 00000000..b77fcc4f
--- /dev/null
+++ b/apps/client/src/shared/ui/alert/UiAlert.stories.ts
@@ -0,0 +1,53 @@
+import UiAlert from './UiAlert.vue'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiAlert',
+  component: UiAlert,
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'warning', 'success', 'important'],
+      defaultValue: 'default',
+    },
+    closable: {
+      control: 'boolean',
+    },
+  },
+} as Meta<typeof UiAlert>
+
+const Template: StoryFn<typeof UiAlert> = args => ({
+  components: { UiAlert },
+  setup() {
+    return { args }
+  },
+  template: `
+    <UiAlert v-bind="args">
+      <template v-if="${'default' in args}" v-slot>${args.default}</template>
+    </UiAlert>
+  `,
+})
+
+export const DefaultAlert: StoryFn<typeof UiAlert> = Template.bind({})
+
+DefaultAlert.args = {
+  variant: 'default',
+  content: 'hello from alert',
+}
+
+export const AlertExampleProps: StoryFn<typeof UiAlert> = Template.bind({})
+
+AlertExampleProps.args = {
+  variant: 'warning',
+  content: 'hello from alert',
+  closable: true,
+}
+
+export const SlottedAlert: StoryFn<typeof UiAlert> = Template.bind({})
+
+SlottedAlert.args = {
+  variant: 'success',
+  default: `
+    <span class="text-sm" style="color: var(--zinc-400)">alert with slot with success variant</span>
+  `,
+}
diff --git a/apps/client/src/shared/ui/alert/UiAlert.vue b/apps/client/src/shared/ui/alert/UiAlert.vue
new file mode 100644
index 00000000..5ad8b407
--- /dev/null
+++ b/apps/client/src/shared/ui/alert/UiAlert.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes, ref } from 'vue'
+import { alertVariants, type AlertVariants } from '.'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+interface AlertProps {
+  variant?: AlertVariants['variant']
+  closable?: boolean
+  content?: string
+  class?: HTMLAttributes['class']
+}
+
+const { variant = 'default', closable, content, class: alertClass } = defineProps<AlertProps>()
+
+const emits = defineEmits(['close'])
+
+const isAlertVisible = ref(true)
+
+const valueOfRightPadding = computed(() => (closable ? '32px' : '10px'))
+</script>
+
+<template>
+  <div
+    v-if="isAlertVisible"
+    :class="cn(
+      'alert',
+      alertVariants({ variant }),
+      alertClass,
+    )"
+    :style="{ 'padding-right': valueOfRightPadding }"
+  >
+    <slot v-if="$slots.default || content">
+      <span class="text-sm">{{ content }}</span>
+    </slot>
+    <div
+      v-if="closable"
+      i-lucide-x
+      class="alert-close"
+      @click="isAlertVisible = false, emits('close')"
+    />
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/alert/__tests__/UiAlert.spec.ts b/apps/client/src/shared/ui/alert/__tests__/UiAlert.spec.ts
new file mode 100644
index 00000000..bbb5ad0c
--- /dev/null
+++ b/apps/client/src/shared/ui/alert/__tests__/UiAlert.spec.ts
@@ -0,0 +1,29 @@
+import { nextTick } from 'vue'
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiAlert from '../UiAlert.vue'
+
+describe('tests for UiAlert', () => {
+  const wrapper = shallowMount(UiAlert, {
+    props: {
+      variant: 'default',
+    },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html())
+  })
+
+  it('should have content at slot and render x icon', async () => {
+    const _w = shallowMount(UiAlert, {
+      slots: {
+        default: 'hello from alert',
+      },
+      props: {
+        closable: true,
+      },
+    })
+    await nextTick()
+    expect(_w.html()).toMatchSnapshot()
+  })
+})
diff --git a/apps/client/src/shared/ui/alert/__tests__/__snapshots__/UiAlert.spec.ts.snap b/apps/client/src/shared/ui/alert/__tests__/__snapshots__/UiAlert.spec.ts.snap
new file mode 100644
index 00000000..deb6e7e1
--- /dev/null
+++ b/apps/client/src/shared/ui/alert/__tests__/__snapshots__/UiAlert.spec.ts.snap
@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+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/apps/client/src/shared/ui/alert/index.ts b/apps/client/src/shared/ui/alert/index.ts
new file mode 100644
index 00000000..40c4f8bc
--- /dev/null
+++ b/apps/client/src/shared/ui/alert/index.ts
@@ -0,0 +1,16 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as UiAlert } from './UiAlert.vue'
+
+export const alertVariants = cva('alert', {
+  variants: {
+    variant: {
+      default: 'alert-default',
+      success: 'alert-success',
+      warning: 'alert-warning',
+      important: 'alert-important',
+    },
+  },
+})
+
+export type AlertVariants = VariantProps<typeof alertVariants>
diff --git a/apps/client/src/shared/ui/badge/UiBadge.stories.ts b/apps/client/src/shared/ui/badge/UiBadge.stories.ts
new file mode 100644
index 00000000..0eeff978
--- /dev/null
+++ b/apps/client/src/shared/ui/badge/UiBadge.stories.ts
@@ -0,0 +1,41 @@
+import UiBadge from './UiBadge.vue'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiBadge',
+  component: UiBadge,
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'secondary', 'outline'],
+    },
+  },
+} as Meta<typeof UiBadge>
+
+const Template: StoryFn<typeof UiBadge> = (args) => {
+  return {
+    components: { UiBadge },
+    setup() {
+      return { args }
+    },
+    template: `
+    <UiBadge v-bind="args">
+        <template v-if="${'default' in args}" v-slot>${args.default}</template>
+    </UiBadge>
+  `,
+  }
+}
+
+export const DefaultBadge: StoryFn<typeof UiBadge> = Template.bind({})
+
+DefaultBadge.args = {
+  variant: 'default',
+  default: `Badge`,
+}
+
+export const BadgeExampleProps: StoryFn<typeof UiBadge> = Template.bind({})
+
+BadgeExampleProps.args = {
+  variant: 'outline',
+  default: `new`,
+}
diff --git a/apps/client/src/shared/ui/badge/UiBadge.vue b/apps/client/src/shared/ui/badge/UiBadge.vue
new file mode 100644
index 00000000..a03166f2
--- /dev/null
+++ b/apps/client/src/shared/ui/badge/UiBadge.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type BadgeVariants, badgeVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const { variant = 'default', class: badgeClass } = defineProps<{
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), badgeClass)">
+    <slot />
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/badge/__tests__/UiBadge.spec.ts b/apps/client/src/shared/ui/badge/__tests__/UiBadge.spec.ts
new file mode 100644
index 00000000..4c412124
--- /dev/null
+++ b/apps/client/src/shared/ui/badge/__tests__/UiBadge.spec.ts
@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiBadge from '../UiBadge.vue'
+import type { BadgeVariants } from '..'
+
+describe('tests for UiBadge', () => {
+  const wrapper = shallowMount(UiBadge, {
+    props: {
+      variant: 'default',
+    },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html())
+  })
+
+  it('should have content at slot', () => {
+    const _w = shallowMount(UiBadge, {
+      slots: {
+        default: 'badge',
+      },
+    })
+    expect(_w.html()).toMatchSnapshot()
+  })
+
+  it('should apply correct styles for variants', () => {
+    const variants = [
+      'default',
+      'secondary',
+      'outline',
+      'solid',
+      'destructive',
+    ] as BadgeVariants['variant'][]
+    variants.forEach(() => {
+      const wrapper = shallowMount(UiBadge, {
+        props: {
+          variant: 'default',
+        },
+      })
+      const badge = wrapper.find('div')
+      expect(badge.attributes('class')).toContain(`badge-default`)
+    })
+  })
+})
diff --git a/apps/client/src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap b/apps/client/src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap
new file mode 100644
index 00000000..3db2b9f6
--- /dev/null
+++ b/apps/client/src/shared/ui/badge/__tests__/__snapshots__/UiBadge.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for UiBadge > should have content at slot 1`] = `"<div class="badge badge-default">badge</div>"`;
diff --git a/apps/client/src/shared/ui/badge/index.ts b/apps/client/src/shared/ui/badge/index.ts
new file mode 100644
index 00000000..360eea5c
--- /dev/null
+++ b/apps/client/src/shared/ui/badge/index.ts
@@ -0,0 +1,19 @@
+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',
+      soft: 'badge-soft',
+    },
+  },
+})
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/apps/client/src/shared/ui/button/UiButton.stories.ts b/apps/client/src/shared/ui/button/UiButton.stories.ts
new file mode 100644
index 00000000..15a55c28
--- /dev/null
+++ b/apps/client/src/shared/ui/button/UiButton.stories.ts
@@ -0,0 +1,69 @@
+import UiButton from './UiButton.vue'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiButton',
+  component: UiButton,
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'default', 'lg'],
+      defaultValue: 'md',
+    },
+    variant: {
+      control: { type: 'select' },
+      options: [
+        'default',
+        'ghost',
+        'secondary',
+        'destructive',
+        'outline',
+        'dashed',
+      ],
+      defaultValue: 'default',
+    },
+  },
+} as Meta<typeof UiButton>
+
+const Template: StoryFn<typeof UiButton> = (args) => {
+  return {
+    components: { UiButton, File },
+    setup() {
+      return { args }
+    },
+    template: `
+    <UiButton v-bind="args">
+        <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>
+  `,
+  }
+}
+
+export const DefaultButton: StoryFn<typeof UiButton> = Template.bind({})
+
+DefaultButton.args = {
+  size: 'default',
+  variant: 'default',
+  default: `Get Started`,
+}
+
+export const ButtonExampleProps: StoryFn<typeof UiButton> = Template.bind({})
+
+ButtonExampleProps.args = {
+  size: 'sm',
+  variant: 'solid',
+  default: `Create task`,
+}
+
+export const SlottedButton: StoryFn<typeof UiButton> = Template.bind({})
+
+SlottedButton.args = {
+  size: 'default',
+  variant: 'default',
+  leading: `<div i-hugeicons-cloud-download />`,
+  default: `
+      Download
+    `,
+}
diff --git a/apps/client/src/shared/ui/button/UiButton.vue b/apps/client/src/shared/ui/button/UiButton.vue
new file mode 100644
index 00000000..526f3d4a
--- /dev/null
+++ b/apps/client/src/shared/ui/button/UiButton.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { createReusableTemplate } from '@vueuse/core'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+  loading?: boolean
+  disabled?: boolean
+  loadingPlacement?: 'leading' | 'trailing'
+}
+
+const {
+  variant = 'default',
+  size = 'default',
+  loadingPlacement = 'leading',
+  class: btnClass,
+  as = 'button',
+} = defineProps<Props>()
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), btnClass)"
+    :disabled="loading || disabled"
+  >
+    <DefineTemplate v-if="loading">
+      <slot name="loading">
+        <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" />
+  </Primitive>
+</template>
diff --git a/apps/client/src/shared/ui/button/__tests__/UiButton.spec.ts b/apps/client/src/shared/ui/button/__tests__/UiButton.spec.ts
new file mode 100644
index 00000000..92164525
--- /dev/null
+++ b/apps/client/src/shared/ui/button/__tests__/UiButton.spec.ts
@@ -0,0 +1,66 @@
+import { mount, shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiButton from '../UiButton.vue'
+import type { ButtonVariants } from '..'
+
+describe('tests for UiButton', () => {
+  // with <primitive-stub />
+  const wrapper = shallowMount(UiButton, {
+    props: {
+      variant: 'default',
+      size: 'default',
+      as: 'button',
+    },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html())
+  })
+
+  it('should have content at slot', () => {
+    const _w = shallowMount(UiButton, {
+      slots: {
+        default: 'ui button',
+      },
+    })
+    expect(_w.html()).toMatchSnapshot()
+  })
+
+  it('should apply correct styles for variants', () => {
+    const variants = [
+      'default',
+      'secondary',
+      'solid',
+      'destructive',
+      'ghost',
+      'outline',
+      'dashed',
+    ] as ButtonVariants['variant'][]
+
+    variants.forEach(() => {
+      const wrapper = mount(UiButton, {
+        props: {
+          variant: 'solid',
+          size: 'default',
+        },
+      })
+      const button = wrapper.find('button')
+      expect(button.exists()).toBe(true)
+      expect(button.attributes('class')).toContain('btn-solid')
+    })
+  })
+
+  it('should apply correct styles for size', () => {
+    const sizes = ['lg', 'default', 'sm'] as ButtonVariants['size'][]
+    sizes.forEach(() => {
+      const wrapper = mount(UiButton, {
+        props: {
+          variant: 'dashed',
+          size: 'sm',
+        },
+      })
+      const button = wrapper.find('button')
+      expect(button.attributes('class')).toContain(`h-8`)
+    })
+  })
+})
diff --git a/apps/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap b/apps/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
new file mode 100644
index 00000000..0880a570
--- /dev/null
+++ b/apps/client/src/shared/ui/button/__tests__/__snapshots__/UiButton.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for UiButton > should have content at slot 1`] = `"<primitive-stub aschild="false" as="button" class="btn btn-default h-9 px-4 py-2" disabled="false"></primitive-stub>"`;
diff --git a/apps/client/src/shared/ui/button/index.ts b/apps/client/src/shared/ui/button/index.ts
new file mode 100644
index 00000000..840c2b51
--- /dev/null
+++ b/apps/client/src/shared/ui/button/index.ts
@@ -0,0 +1,27 @@
+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-9 px-4 py-2',
+      xs: 'h-8 rounded px-2 text-xs rounded-lg',
+      md: 'h-34px rounded-md px-3',
+      sm: 'h-34px 2xl:h-8 rounded-md px-3',
+      lg: 'h-38px rounded-md px-8',
+    },
+  },
+})
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>
diff --git a/apps/client/src/shared/ui/card/UiCard.vue b/apps/client/src/shared/ui/card/UiCard.vue
new file mode 100644
index 00000000..aa790725
--- /dev/null
+++ b/apps/client/src/shared/ui/card/UiCard.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineSlots<{
+  default: () => any
+  user: () => any
+}>()
+</script>
+
+<template>
+  <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="absolute bottom-1.5 top-1.5 w-fit">
+      <slot name="user" />
+    </div>
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/card/index.ts b/apps/client/src/shared/ui/card/index.ts
new file mode 100644
index 00000000..e49b307d
--- /dev/null
+++ b/apps/client/src/shared/ui/card/index.ts
@@ -0,0 +1 @@
+export { default as UiCard } from './UiCard.vue'
diff --git a/apps/client/src/shared/ui/checkbox/UiCheckbox.stories.ts b/apps/client/src/shared/ui/checkbox/UiCheckbox.stories.ts
new file mode 100644
index 00000000..7df90e6e
--- /dev/null
+++ b/apps/client/src/shared/ui/checkbox/UiCheckbox.stories.ts
@@ -0,0 +1,32 @@
+import UiCheckbox from './UiCheckbox.vue'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiCheckbox',
+  component: UiCheckbox,
+  argTypes: {
+    checked: {
+      control: { type: 'boolean' },
+    },
+  },
+} as Meta<typeof UiCheckbox>
+
+const Template: StoryFn<typeof UiCheckbox> = (args) => {
+  return {
+    components: { UiCheckbox },
+    setup() {
+      return { args }
+    },
+    template: `<div class="[&>[role=checkbox]]:flex [&>[role=checkbox]]:items-center">
+                <UiCheckbox v-model:checked="checked" v-bind="args" />
+              </div>`,
+  }
+}
+
+export const DefaultCheckbox: StoryFn<typeof UiCheckbox> = Template.bind({})
+
+export const CheckboxWithVariant: StoryFn<typeof UiCheckbox> = Template.bind({})
+
+CheckboxWithVariant.args = {
+  variant: 'solid',
+}
diff --git a/apps/client/src/shared/ui/checkbox/UiCheckbox.vue b/apps/client/src/shared/ui/checkbox/UiCheckbox.vue
new file mode 100644
index 00000000..d3a5d9ca
--- /dev/null
+++ b/apps/client/src/shared/ui/checkbox/UiCheckbox.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { checkboxVariants, type CheckboxVariants } from './index'
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+interface Props extends CheckboxRootProps {
+  class?: HTMLAttributes['class']
+  variant?: CheckboxVariants['variant']
+}
+
+const { variant = 'default', ...props } = defineProps<Props>()
+const emits = defineEmits<CheckboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="cn(checkboxVariants({ variant }), props.class)"
+  >
+    <CheckboxIndicator class="checkbox-indicator">
+      <slot>
+        <div
+          class="checkbox-indicator-icon"
+          :class="props.checked === 'indeterminate' ? 'i-lucide-minus' : 'i-lucide-check'"
+        />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>
diff --git a/apps/client/src/shared/ui/checkbox/__tests__/UiCheckbox.spec.ts b/apps/client/src/shared/ui/checkbox/__tests__/UiCheckbox.spec.ts
new file mode 100644
index 00000000..1a0adfd1
--- /dev/null
+++ b/apps/client/src/shared/ui/checkbox/__tests__/UiCheckbox.spec.ts
@@ -0,0 +1,34 @@
+import { mount, shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiCheckbox from '../UiCheckbox.vue'
+import type { CheckboxVariants } from '..'
+
+describe('test for UiCheckbox', () => {
+  // with <primitive-stub />
+  it('should render correctly', () => {
+    const wrapper = shallowMount(UiCheckbox, {
+      props: {
+        checked: true,
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('should apply correct styles for checkbox variants', () => {
+    const variants = [
+      'default',
+      'solid',
+    ] as CheckboxVariants['variant'][]
+
+    variants.forEach(() => {
+      const wrapper = mount(UiCheckbox, {
+        props: {
+          variant: 'solid',
+          checked: true,
+        },
+      })
+      const checkbox = wrapper.find('.checkbox')
+      expect(checkbox.exists()).toBe(true)
+      expect(checkbox.attributes('class')).toContain('checkbox-solid')
+    })
+  })
+})
diff --git a/apps/client/src/shared/ui/checkbox/__tests__/__snapshots__/UiCheckbox.spec.ts.snap b/apps/client/src/shared/ui/checkbox/__tests__/__snapshots__/UiCheckbox.spec.ts.snap
new file mode 100644
index 00000000..99304529
--- /dev/null
+++ b/apps/client/src/shared/ui/checkbox/__tests__/__snapshots__/UiCheckbox.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`test for UiCheckbox > should render correctly 1`] = `"<checkbox-root-stub defaultchecked="false" checked="true" disabled="false" required="false" aschild="false" as="button" class="checkbox checkbox-default" value="on"></checkbox-root-stub>"`;
diff --git a/apps/client/src/shared/ui/checkbox/index.ts b/apps/client/src/shared/ui/checkbox/index.ts
new file mode 100644
index 00000000..9f13b2f1
--- /dev/null
+++ b/apps/client/src/shared/ui/checkbox/index.ts
@@ -0,0 +1,14 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as UiCheckbox } from './UiCheckbox.vue'
+
+export const checkboxVariants = cva('checkbox', {
+  variants: {
+    variant: {
+      default: 'checkbox-default',
+      solid: 'checkbox-solid',
+    },
+  },
+})
+
+export type CheckboxVariants = VariantProps<typeof checkboxVariants>
diff --git a/apps/client/src/shared/ui/command/UiCommand.stories.ts b/apps/client/src/shared/ui/command/UiCommand.stories.ts
new file mode 100644
index 00000000..5f71290b
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommand.stories.ts
@@ -0,0 +1,35 @@
+import {
+  UiCommand,
+  UiCommandInput,
+  UiCommandItem,
+  UiCommandList,
+} from './index'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiCommand',
+  component: UiCommand,
+} as Meta<typeof UiCommand>
+
+const Template: StoryFn<typeof UiCommand> = args => ({
+  components: {
+    UiCommand,
+    UiCommandItem,
+    UiCommandList,
+    UiCommandInput,
+  },
+  setup() {
+    return { args }
+  },
+  template:
+  `<UiCommand class="rounded-lg border shadow-md max-w-[450px]">
+    <UiCommandInput placeholder="Search..."/>
+      <UiCommandList>
+        <UiCommandItem value="Calendar">
+          <span>Calendar</span>
+        </UiCommandItem>
+      </UiCommandList>
+  </UiCommand>`,
+})
+
+export const DefaultCommand: StoryFn<typeof UiCommand> = Template.bind({})
diff --git a/apps/client/src/shared/ui/command/UiCommand.vue b/apps/client/src/shared/ui/command/UiCommand.vue
new file mode 100644
index 00000000..7220e108
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommand.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn(
+      'command',
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandDialog.vue b/apps/client/src/shared/ui/command/UiCommandDialog.vue
new file mode 100644
index 00000000..51ab4165
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandDialog.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts" generic="T extends string">
+import { useForwardPropsEmits } from 'radix-vue'
+import { reactiveOmit } from '@vueuse/core'
+import UiCommand from './UiCommand.vue'
+import type { HTMLAttributes } from 'vue'
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { UiDialog, UiDialogContent } from '@/shared/ui/dialog'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<DialogRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogRootEmits>()
+
+const model = defineModel<T>('search')
+
+const rootOmitProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(rootOmitProps, emits)
+</script>
+
+<template>
+  <UiDialog v-bind="forwarded">
+    <UiDialogContent :class="cn('command-dialog', props.class)">
+      <UiCommand v-model:search-term="model" class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5 dark:[&_[cmdk-group-heading]]:text-neutral-400">
+        <slot />
+      </UiCommand>
+    </UiDialogContent>
+  </UiDialog>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandEmpty.vue b/apps/client/src/shared/ui/command/UiCommandEmpty.vue
new file mode 100644
index 00000000..968f3a34
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandEmpty.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { ComboboxEmpty } from 'radix-vue'
+import type { ComboboxEmptyProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty
+    v-bind="delegatedProps"
+    :class="cn(
+      'command-empty',
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandGroup.vue b/apps/client/src/shared/ui/command/UiCommandGroup.vue
new file mode 100644
index 00000000..0e8b4128
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandGroup.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import type { ComboboxGroupProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn(
+      'command-group',
+      '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-neutral-500 dark:text-neutral-50 dark:[&_[cmdk-group-heading]]:text-neutral-400', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="command-group-label">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandInput.vue b/apps/client/src/shared/ui/command/UiCommandInput.vue
new file mode 100644
index 00000000..3f6ab843
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandInput.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b dark:border-neutral-700/40 px-3" cmdk-input-wrapper>
+    <div i-lucide-search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn(
+        'command-input',
+        props.class,
+      )"
+    />
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandItem.vue b/apps/client/src/shared/ui/command/UiCommandItem.vue
new file mode 100644
index 00000000..9415220a
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandItem.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'command-item',
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandList.vue b/apps/client/src/shared/ui/command/UiCommandList.vue
new file mode 100644
index 00000000..df8252ee
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandList.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent
+    v-bind="forwarded"
+    :class="cn(
+      'command-list',
+      props.class,
+    )"
+  >
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandSeparator.vue b/apps/client/src/shared/ui/command/UiCommandSeparator.vue
new file mode 100644
index 00000000..80faba1c
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandSeparator.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { ComboboxSeparator } from 'radix-vue'
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn(
+      'command-separator',
+      props.class,
+    )"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/apps/client/src/shared/ui/command/UiCommandShortcut.vue b/apps/client/src/shared/ui/command/UiCommandShortcut.vue
new file mode 100644
index 00000000..567c8675
--- /dev/null
+++ b/apps/client/src/shared/ui/command/UiCommandShortcut.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'command-shortcut',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/apps/client/src/shared/ui/command/__tests__/MockComponent.vue b/apps/client/src/shared/ui/command/__tests__/MockComponent.vue
new file mode 100644
index 00000000..93d67d79
--- /dev/null
+++ b/apps/client/src/shared/ui/command/__tests__/MockComponent.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useEmitAsProps } from 'radix-vue'
+import {
+  UiCommand,
+  UiCommandInput,
+  UiCommandItem,
+  UiCommandList,
+} from '../index'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+</script>
+
+<template>
+  <UiCommand
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    class="rounded-lg border shadow-md max-w-[450px]"
+  >
+    <UiCommandInput placeholder="Search..." />
+    <UiCommandList>
+      <UiCommandItem value="test">
+        <span>test item</span>
+      </UiCommandItem>
+    </UiCommandList>
+  </UiCommand>
+</template>
diff --git a/apps/client/src/shared/ui/command/__tests__/UiCommand.spec.ts b/apps/client/src/shared/ui/command/__tests__/UiCommand.spec.ts
new file mode 100644
index 00000000..466c6372
--- /dev/null
+++ b/apps/client/src/shared/ui/command/__tests__/UiCommand.spec.ts
@@ -0,0 +1,43 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MockComponent from './MockComponent.vue'
+
+describe('tests for UiCommand', () => {
+  const wrapper = mount(MockComponent, {
+    props: {
+      open: true,
+      modelValue: ['value1', 'value2'],
+    },
+  })
+
+  beforeEach(async () => {
+    await wrapper.setProps({
+      filterFunction: (list: any[], term: string) => {
+        return list.filter(i => i.toLowerCase().includes(term.toLowerCase()))
+      },
+    })
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should filter items', async () => {
+    const input = wrapper.findComponent({ name: 'UiCommandInput' })
+    await input.setValue('te')
+
+    const selection = wrapper.findAll('[data-highlighted]').filter(i => i.attributes('style') !== 'display: none;')
+    expect(selection.length).toBe(1)
+    expect(selection[0].element.innerHTML).contains('test item')
+  })
+
+  it('should work props/emits correctly', async () => {
+    wrapper.findComponent({ name: 'UiCommandItem' }).trigger('click')
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+
+    const selectedItems = wrapper.props().modelValue
+    expect(selectedItems).toEqual(['value1', 'value2'])
+  })
+})
+
+// more tests: https://github.com/unovue/radix-vue/blob/main/packages/radix-vue/src/Combobox/Combobox.test.ts
diff --git a/apps/client/src/shared/ui/command/__tests__/__snapshots__/UiCommand.spec.ts.snap b/apps/client/src/shared/ui/command/__tests__/__snapshots__/UiCommand.spec.ts.snap
new file mode 100644
index 00000000..c015e831
--- /dev/null
+++ b/apps/client/src/shared/ui/command/__tests__/__snapshots__/UiCommand.spec.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for UiCommand > should render correctly 1`] = `
+"<div style="pointer-events: auto;" dir="ltr" class="command rounded-lg border shadow-md max-w-[450px]">
+  <div class="flex items-center border-b dark:border-neutral-700/40 px-3" cmdk-input-wrapper="">
+    <div i-lucide-search="" class="mr-2 h-4 w-4 shrink-0 opacity-50"></div><input type="text" aria-expanded="true" aria-controls="radix-vue-combobox-content-v-0" aria-disabled="false" aria-autocomplete="list" role="combobox" autocomplete="false" placeholder="Search..." class="command-input" value="" aria-activedescendant="radix-vue-combobox-option-v-2">
+  </div>
+  <div id="radix-vue-combobox-content-v-0" role="listbox" data-state="open" style="display: flex; flex-direction: column; outline: none;" class="command-list">
+    <div role="presentation">
+      <div id="radix-vue-combobox-option-v-2" role="option" tabindex="-1" aria-labelledby="radix-vue-combobox-item-v-1" aria-selected="false" data-state="unchecked" class="command-item" data-radix-vue-combobox-item="" data-highlighted=""><span>test item</span></div>
+    </div>
+  </div>
+  <!---->
+</div>"
+`;
diff --git a/apps/client/src/shared/ui/command/index.ts b/apps/client/src/shared/ui/command/index.ts
new file mode 100644
index 00000000..4702d497
--- /dev/null
+++ b/apps/client/src/shared/ui/command/index.ts
@@ -0,0 +1,9 @@
+export { default as UiCommand } from './UiCommand.vue'
+export { default as UiCommandDialog } from './UiCommandDialog.vue'
+export { default as UiCommandEmpty } from './UiCommandEmpty.vue'
+export { default as UiCommandGroup } from './UiCommandGroup.vue'
+export { default as UiCommandInput } from './UiCommandInput.vue'
+export { default as UiCommandItem } from './UiCommandItem.vue'
+export { default as UiCommandList } from './UiCommandList.vue'
+export { default as UiCommandSeparator } from './UiCommandSeparator.vue'
+export { default as UiCommandShortcut } from './UiCommandShortcut.vue'
diff --git a/apps/client/src/shared/ui/data-table/DataTable.vue b/apps/client/src/shared/ui/data-table/DataTable.vue
new file mode 100644
index 00000000..4249b685
--- /dev/null
+++ b/apps/client/src/shared/ui/data-table/DataTable.vue
@@ -0,0 +1,257 @@
+<script setup lang="ts" generic="TData, TValue">
+import { computed, h } from 'vue'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { Icon } from '@iconify/vue'
+import { UiCheckbox } from '../checkbox'
+import { UiBadge } from '../badge'
+import { UiTableBody, UiTableCell, UiTableEmpty, UiTableHead, UiTableHeader, UiTableRoot, UiTableRow } from '../table'
+import type {
+  ColumnFiltersState,
+  ColumnOrderState,
+  ColumnPinningState,
+  ExpandedState,
+  GroupingState,
+  PaginationState,
+  SortingState,
+  VisibilityState,
+} from '@tanstack/vue-table'
+import type { TableProps } from './types'
+import { valueUpdater } from '@/shared/libs/shadcn/utils'
+
+const {
+  enableMultiRowSelection = true,
+  ...props
+} = defineProps <TableProps<TData, TValue>>()
+
+const emit = defineEmits(['select', 'selectAll', 'expand'])
+
+const slots = defineSlots()
+
+const rowSelection = defineModel<Record<string, boolean>>('modelValue')
+const sorting = defineModel<SortingState>('sorting')
+const columnVisibility = defineModel<VisibilityState>('columnVisibility')
+const columnFilters = defineModel<ColumnFiltersState>('columnFilters')
+const globalFilter = defineModel<string>('globalFilter')
+const columnOrder = defineModel<ColumnOrderState>('columnOrder')
+const columnPinning = defineModel<ColumnPinningState>('columnPinning')
+const expanded = defineModel<ExpandedState>('expanded')
+const grouping = defineModel<GroupingState>('grouping')
+const pagination = defineModel<PaginationState>('pagination', {
+  default: () => ({
+    pageIndex: 0,
+    pageSize: 15,
+  }),
+})
+
+const columnsWithMisc = computed(() => {
+  let data = []
+  data = props.enableRowSelection
+    ? [
+        {
+          accessorKey: 'selection',
+          header: enableMultiRowSelection
+            ? ({ table }: any) => h(UiCheckbox, {
+                'checked': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),
+                'variant': 'solid',
+                'onUpdate:checked': (value: boolean) => {
+                  table.toggleAllPageRowsSelected(!!value)
+                  emit('selectAll', table.getRowModel().rows)
+                },
+                'areaLabel': 'Select all rows',
+              })
+            : '',
+          cell: ({ row }: any) => h(UiCheckbox, {
+            'checked': row.getIsSelected() ?? false,
+            'variant': 'solid',
+            'onUpdate:checked': (value: boolean) => {
+              row.toggleSelected(!!value)
+              emit('select', row)
+            },
+            'areaLabel': 'Select row',
+          }),
+          enableSorting: false,
+          enableHiding: false,
+        },
+        ...props.columns,
+      ]
+    : props.columns
+
+  return data
+})
+
+const table = useVueTable({
+  get data() {
+    return Array.from(props.data) ?? []
+  },
+  get columns() {
+    return columnsWithMisc.value ?? []
+  },
+  state: {
+    get sorting() { return sorting.value },
+    get columnFilters() { return columnFilters.value },
+    get globalFilter() { return globalFilter.value },
+    get rowSelection() { return rowSelection.value },
+    get columnVisibility() { return columnVisibility.value },
+    get pagination() { return pagination.value },
+    get columnOrder() { return columnOrder.value },
+    get columnPinning() { return columnPinning.value },
+    get expanded() { return expanded.value },
+    get grouping() { return grouping.value },
+  },
+
+  enableMultiRowSelection,
+  enableSubRowSelection: props.enableSubRowSelection,
+  autoResetAll: props.autoResetAll,
+  enableRowSelection: props.enableRowSelection,
+  enableColumnFilters: props.enableColumnFilters,
+  manualPagination: props.manualPagination,
+  manualSorting: props.manualSorting,
+  pageCount: props.pageCount,
+  rowCount: props.rowCount,
+  autoResetPageIndex: props.autoResetPageIndex,
+  enableSorting: props.enableSorting,
+  enableSortingRemoval: props.enableSortingRemoval,
+  enableMultiSort: props.enableMultiSort,
+  enableMultiRemove: props.enableMultiRemove,
+  maxMultiSortColCount: props.maxMultiSortColCount,
+  sortingFns: props.sortingFns,
+  isMultiSortEvent: props.isMultiSortEvent,
+
+  getCoreRowModel: getCoreRowModel(),
+  getSortedRowModel: getSortedRowModel(),
+  getFilteredRowModel: getFilteredRowModel(),
+  getPaginationRowModel: getPaginationRowModel(),
+  getRowId: (row: any) => props.rowId ? row[props.rowId] : row._id,
+  getExpandedRowModel: getExpandedRowModel(),
+
+  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),
+  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),
+  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),
+  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),
+  onGlobalFilterChange: updaterOrValue => valueUpdater(updaterOrValue, globalFilter),
+  onPaginationChange: updaterOrValue => valueUpdater(updaterOrValue, pagination),
+  onColumnOrderChange: updaterOrValue => valueUpdater(updaterOrValue, columnOrder),
+  onColumnPinningChange: updaterOrValue => valueUpdater(updaterOrValue, columnPinning),
+  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),
+  onGroupingChange: updaterOrValue => valueUpdater(updaterOrValue, grouping),
+})
+
+defineExpose({
+  ...table,
+})
+</script>
+
+<template>
+  <UiTableRoot
+    :class="props.class"
+  >
+    <UiTableHeader
+      v-bind="props._tableHeader"
+    >
+      <slot name="header" :table="table">
+        <UiTableRow
+          v-for="headerGroup in table.getHeaderGroups()"
+          :key="headerGroup.id"
+          v-bind="props._tableRow"
+        >
+          <!-- headers -->
+          <UiTableHead
+            v-for="header in headerGroup.headers"
+            :key="header.id"
+            :colspan="header.colSpan"
+            :data-pinned="header.column.getIsPinned()"
+            v-bind="{ ...props._tableHead, ...header.column.columnDef.meta }"
+            :class="(header.column.columnDef.meta as any)?._tableHead"
+          >
+            <div
+              class="flex items-center space-x-auto justify-between w-full"
+            >
+              <div
+                class="flex items-center gap-1.5 whitespace-nowrap w-full"
+              >
+                <Icon
+                  v-if="header.column.columnDef.meta"
+                  :icon="(header.column.columnDef.meta as any)?.icon"
+                  class="w-4 h-4"
+                />
+                <slot
+                  :name="`${header.id}-header`"
+                  :column="header.column"
+                >
+                  <FlexRender
+                    v-if="!header.isPlaceholder"
+                    :render="header.column.columnDef.header"
+                    :props="header.getContext()"
+                  />
+                </slot>
+              </div>
+              <UiBadge
+                v-if="header.column.columnDef.meta && (header.column.columnDef.meta as any).badge"
+                variant="soft"
+                class="px-1 py-px text-xs badge-soft-purple"
+              >
+                {{ (header.column.columnDef.meta as any).badge }}
+              </UiBadge>
+            </div>
+          </UiTableHead>
+        </UiTableRow>
+      </slot>
+    </UiTableHeader>
+    <UiTableBody class="overflow-auto">
+      <slot name="body" :table="table">
+        <template v-if="table.getRowModel().rows?.length">
+          <template
+            v-for="row in table.getRowModel().rows"
+            :key="row.id"
+          >
+            <UiTableRow
+              :data-state="row.getIsSelected() && 'selected'"
+              v-bind="props._tableRow"
+            >
+              <slot
+                name="row"
+                :row="row"
+              >
+                <UiTableCell
+                  v-for="cell in row.getVisibleCells()"
+                  :key="cell.id"
+                  :data-pinned="cell.column.getIsPinned()"
+                  v-bind="{ ...props._tableCell, ...cell.column.columnDef.meta }"
+                  class="whitespace-nowrap"
+                  :class="(cell.column.columnDef.meta as any)?._tableCell"
+                >
+                  <slot
+                    :name="`${cell.column.id}-cell`"
+                    :cell="cell"
+                  >
+                    <FlexRender
+                      :render="cell.column.columnDef.cell"
+                      :props="cell.getContext()"
+                    />
+                  </slot>
+                </UiTableCell>
+              </slot>
+            </UiTableRow>
+          </template>
+        </template>
+        <UiTableEmpty
+          v-else
+          :colspan="table.getAllLeafColumns().length"
+          v-bind="props._tableEmpty"
+        >
+          <slot name="empty">
+            {{ $t('table.empty') }}
+          </slot>
+        </UiTableEmpty>
+      </slot>
+    </UiTableBody>
+  </UiTableRoot>
+</template>
diff --git a/apps/client/src/shared/ui/data-table/index.ts b/apps/client/src/shared/ui/data-table/index.ts
new file mode 100644
index 00000000..4336ee8b
--- /dev/null
+++ b/apps/client/src/shared/ui/data-table/index.ts
@@ -0,0 +1 @@
+export { default as DataTable } from './DataTable.vue'
diff --git a/apps/client/src/shared/ui/data-table/types.ts b/apps/client/src/shared/ui/data-table/types.ts
new file mode 100644
index 00000000..13c93f4b
--- /dev/null
+++ b/apps/client/src/shared/ui/data-table/types.ts
@@ -0,0 +1,66 @@
+import type { ColumnDef, GroupColumnDef } from '@tanstack/vue-table'
+import type { HTMLAttributes } from 'vue'
+
+export interface TableProps<TData, TValue> extends TableRootProps {
+  data: TData[] | Set<TData>
+  columns: ColumnDef<TData, TValue>[] | GroupColumnDef<TData, TValue>[]
+  rowId?: string
+  autoResetAll?: boolean
+  enableRowSelection?: boolean
+  enableMultiRowSelection?: boolean
+  enableSubRowSelection?: boolean
+  enableColumnFilters?: boolean
+  enableSorting?: boolean
+  enableMultiSort?: boolean
+  enableMultiRemove?: boolean
+  enableSortingRemoval?: boolean
+  manualSorting?: boolean
+  maxMultiSortColCount?: number
+  manualPagination?: boolean
+  pageCount?: number
+  rowCount?: number
+  autoResetPageIndex?: boolean
+  sortingFns?: Record<string, (a: any, b: any) => number>
+  sortDescFirst?: boolean
+  isMultiSortEvent?: (e: unknown) => boolean
+
+  _tableHead?: TableHeadProps
+  _tableHeader?: TableHeaderProps
+  _tableBody?: TableBodyProps
+  _tableRow?: TableRowProps
+  _tableCell?: TableCellProps
+  _tableEmpty?: TableEmptyProps
+}
+
+export interface TableBodyProps {
+  class?: HTMLAttributes['class']
+}
+
+export interface TableRootProps {
+  class?: HTMLAttributes['class']
+}
+
+export interface TableHeadProps {
+  class?: HTMLAttributes['class']
+  dataPinned?: 'left' | 'right' | false
+}
+
+export interface TableHeaderProps {
+  class?: HTMLAttributes['class']
+}
+
+export interface TableRowProps {
+  class?: HTMLAttributes['class']
+}
+
+export interface TableCellProps {
+  class?: HTMLAttributes['class']
+  dataPinned?: 'left' | 'right' | false
+}
+
+export interface TableEmptyProps {
+  class?: HTMLAttributes['class']
+  colspan?: number
+  _tableCell?: TableCellProps
+  _tableRow?: TableRowProps
+}
diff --git a/apps/client/src/shared/ui/dialog/UIDialogDescription.vue b/apps/client/src/shared/ui/dialog/UIDialogDescription.vue
new file mode 100644
index 00000000..ea0f4de8
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UIDialogDescription.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn(
+      'dialog-description',
+      props.class,
+    )"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialog.stories.ts b/apps/client/src/shared/ui/dialog/UiDialog.stories.ts
new file mode 100644
index 00000000..e6ac6e79
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialog.stories.ts
@@ -0,0 +1,36 @@
+import { UiButton } from '../button'
+import {
+  UiDialog,
+  UiDialogContent,
+  UiDialogTrigger,
+} from './index'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiDialog',
+  component: UiDialog,
+} as Meta<typeof UiDialog>
+
+const Template: StoryFn<typeof UiDialog> = args => ({
+  components: {
+    UiDialog,
+    UiDialogTrigger,
+    UiDialogContent,
+    UiButton,
+  },
+  setup() {
+    return { args }
+  },
+  template:
+  `<UiDialog>
+    <UiDialogTrigger as-child>
+      <UiButton variant="default">Open</UiButton>
+    </UiDialogTrigger>
+    <UiDialogContent>
+      hello from dialog
+      <template v-if="${'default' in args}" v-slot>${args.default}</template>
+    </UiDialogContent>
+  </UiDialog>`,
+})
+
+export const DefaultDialog: StoryFn<typeof UiDialog> = Template.bind({})
diff --git a/apps/client/src/shared/ui/dialog/UiDialog.vue b/apps/client/src/shared/ui/dialog/UiDialog.vue
new file mode 100644
index 00000000..a04c0262
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialogClose.vue b/apps/client/src/shared/ui/dialog/UiDialogClose.vue
new file mode 100644
index 00000000..a64703e5
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialogClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialogContent.vue b/apps/client/src/shared/ui/dialog/UiDialogContent.vue
new file mode 100644
index 00000000..b42a9409
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialogContent.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      :class="cn(
+        'dialog-overlay',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      )"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'dialog-content duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/2 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/2',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        :class="cn(
+          'dialog-close',
+          'bg-transparent data-[state=open]:text-neutral-500 dark:data-[state=open]:text-neutral-400',
+        )"
+      >
+        <div i-lucide-x class="w-4 h-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialogFooter.vue b/apps/client/src/shared/ui/dialog/UiDialogFooter.vue
new file mode 100644
index 00000000..73fdee17
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialogFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'dialog-footer',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialogHeader.vue b/apps/client/src/shared/ui/dialog/UiDialogHeader.vue
new file mode 100644
index 00000000..7d05aa74
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialogHeader.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'dialog-header',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialogScrollContent.vue b/apps/client/src/shared/ui/dialog/UiDialogScrollContent.vue
new file mode 100644
index 00000000..3d3c6433
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialogScrollContent.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      :class="cn(
+        'dialog-scroll-overlay',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      )"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'dialog-scroll-content',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="dialog-scroll-close"
+        >
+          <div i-lucide-x class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialogTitle.vue b/apps/client/src/shared/ui/dialog/UiDialogTitle.vue
new file mode 100644
index 00000000..891a060a
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialogTitle.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'dialog-title',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/UiDialogTrigger.vue b/apps/client/src/shared/ui/dialog/UiDialogTrigger.vue
new file mode 100644
index 00000000..ee0c12ff
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/UiDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/__tests__/MockComponent.vue b/apps/client/src/shared/ui/dialog/__tests__/MockComponent.vue
new file mode 100644
index 00000000..de53d7f2
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/__tests__/MockComponent.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { type DialogRootEmits, type DialogRootProps, useEmitAsProps } from 'radix-vue'
+import {
+  UiDialog,
+  UiDialogContent,
+  UiDialogTitle,
+  UiDialogTrigger,
+} from '..'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const reactiveOmitProps = reactiveOmit(props, 'open')
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <UiDialog
+    v-bind="{ ...reactiveOmitProps, ...useEmitAsProps(emits) }"
+    v-model:open="isOpen"
+  >
+    <UiDialogTrigger>
+      open
+    </UiDialogTrigger>
+    <UiDialogContent>
+      <UiDialogTitle>
+        title
+      </UiDialogTitle>
+    </UiDialogContent>
+  </UiDialog>
+</template>
diff --git a/apps/client/src/shared/ui/dialog/__tests__/UiDialog.spec.ts b/apps/client/src/shared/ui/dialog/__tests__/UiDialog.spec.ts
new file mode 100644
index 00000000..2ede07f9
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/__tests__/UiDialog.spec.ts
@@ -0,0 +1,55 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { UiDialog } from '..'
+import DialogTest from './MockComponent.vue'
+import type { ComponentPublicInstance } from 'vue'
+import type { VueWrapper } from '@vue/test-utils'
+
+const OPEN_TEXT = 'open'
+const TITLE_TEXT = 'title'
+
+type DialogTestInstance = ComponentPublicInstance<
+  {},
+  {},
+  {
+    isOpen: boolean
+  }
+>
+
+describe('tests for UiDialog', () => {
+  it('should render correctly with default slot', () => {
+    const wrapper = mount(UiDialog, {
+      slots: { default: '<div>dialog</div>' },
+      props: { defaultOpen: true },
+    }) as VueWrapper<DialogTestInstance>
+
+    expect(wrapper.html()).toContain('<div>dialog</div>')
+  })
+
+  it('should render dialog components correctly', async () => {
+    const wrapper = mount(DialogTest, {
+      global: {
+        stubs: { teleport: true },
+      },
+    }) as VueWrapper<DialogTestInstance>
+
+    expect(wrapper.html()).toContain(OPEN_TEXT)
+    expect(wrapper.html()).not.toContain(TITLE_TEXT)
+
+    wrapper.vm.isOpen = true
+    expect(wrapper.vm.isOpen).toBe(true)
+  })
+
+  it('should pass defaultOpen prop to DialogMenuRoot', () => {
+    const wrapper = mount(UiDialog, { props: { defaultOpen: true } })
+    const root = wrapper.findComponent({ name: 'DialogRoot' })
+    expect(root.props('defaultOpen')).toBe(true)
+  })
+
+  it('should emit openChange events correctly', () => {
+    const wrapper = mount(UiDialog)
+    wrapper.vm.$emit('openChange', true)
+    expect(wrapper.emitted('openChange')).toBeTruthy()
+    expect(wrapper.emitted('openChange')?.[0]).toEqual([true])
+  })
+})
diff --git a/apps/client/src/shared/ui/dialog/index.ts b/apps/client/src/shared/ui/dialog/index.ts
new file mode 100644
index 00000000..1b6d3312
--- /dev/null
+++ b/apps/client/src/shared/ui/dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as UiDialog } from './UiDialog.vue'
+export { default as UiDialogClose } from './UiDialogClose.vue'
+export { default as UiDialogContent } from './UiDialogContent.vue'
+export { default as UiDialogDescription } from './UIDialogDescription.vue'
+export { default as UiDialogFooter } from './UiDialogFooter.vue'
+export { default as UiDialogHeader } from './UiDialogHeader.vue'
+export { default as UiDialogScrollContent } from './UiDialogScrollContent.vue'
+export { default as UiDialogTitle } from './UiDialogTitle.vue'
+export { default as UiDialogTrigger } from './UiDialogTrigger.vue'
diff --git a/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenu.stories.ts b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenu.stories.ts
new file mode 100644
index 00000000..b9869529
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenu.stories.ts
@@ -0,0 +1,41 @@
+import { UiButton } from '../button'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiDropdownMenuTrigger,
+} from './index'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenu.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenu.vue
new file mode 100644
index 00000000..b83d90b8
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuCheckboxItem.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuCheckboxItem.vue
new file mode 100644
index 00000000..6ecee08b
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuCheckboxItem.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuContent.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuContent.vue
new file mode 100644
index 00000000..867b6136
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuContent.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+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, ...$attrs }"
+      :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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuGroup.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuGroup.vue
new file mode 100644
index 00000000..3f201352
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuItem.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuItem.vue
new file mode 100644
index 00000000..269a2c37
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuItem.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuLabel.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuLabel.vue
new file mode 100644
index 00000000..717fe40c
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuLabel.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSeparator.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSeparator.vue
new file mode 100644
index 00000000..22f1dcf6
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSeparator.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  DropdownMenuSeparator,
+  type DropdownMenuSeparatorProps,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuShortcut.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuShortcut.vue
new file mode 100644
index 00000000..9db3e1fc
--- /dev/null
+++ b/apps/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/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    :class="cn(
+      'dropdown-menu-shortcut',
+      props.class,
+    )"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSub.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSub.vue
new file mode 100644
index 00000000..e0f4bd77
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubContent.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubContent.vue
new file mode 100644
index 00000000..0a8ee3bb
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  DropdownMenuSubContent,
+  type DropdownMenuSubContentEmits,
+  type DropdownMenuSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubTrigger.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubTrigger.vue
new file mode 100644
index 00000000..4dfc4f91
--- /dev/null
+++ b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuSubTrigger.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  DropdownMenuSubTrigger,
+  type DropdownMenuSubTriggerProps,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuTrigger.vue b/apps/client/src/shared/ui/dropdown-menu/UiDropdownMenuTrigger.vue
new file mode 100644
index 00000000..c7d632a4
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/dropdown-menu/__tests__/UiDropdownMenu.spec.ts b/apps/client/src/shared/ui/dropdown-menu/__tests__/UiDropdownMenu.spec.ts
new file mode 100644
index 00000000..8ad33425
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/dropdown-menu/index.ts b/apps/client/src/shared/ui/dropdown-menu/index.ts
new file mode 100644
index 00000000..b0cde6e4
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/form/UiForm.stories.ts b/apps/client/src/shared/ui/form/UiForm.stories.ts
new file mode 100644
index 00000000..2282a6d7
--- /dev/null
+++ b/apps/client/src/shared/ui/form/UiForm.stories.ts
@@ -0,0 +1,55 @@
+import {
+  UiButton,
+  UiFormField,
+  UiFormLabel,
+  UiFormMessage,
+  UiInput,
+} from '..'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiForm',
+} as Meta<typeof UiFormField>
+
+const Template: StoryFn<typeof UiFormField> = (args) => {
+  return {
+    components: { UiFormField, UiFormLabel, UiFormMessage, UiButton, UiInput },
+    setup() {
+      return { args }
+    },
+    template: `
+    <UiFormField v-bind="args">
+      <template v-if="${'default' in args}" v-slot>${args.default}</template>
+      <UiButton>Test</UiButton>
+    </UiFormField>
+    `,
+  }
+}
+
+export const DefaultFormField: StoryFn<typeof UiFormField> = Template.bind({})
+
+DefaultFormField.args = {
+  default: `
+  <div class="grid gap-3">
+    <UiFormLabel for="test">
+      Label
+    </UiFormLabel>
+    <UiInput id="test" />
+    <UiFormMessage content="test message" />
+  </div>
+  `,
+}
+
+export const WarningFormField: StoryFn<typeof UiFormField> = Template.bind({})
+
+WarningFormField.args = {
+  default: `
+    <div class="grid gap-3">
+    <UiFormLabel for="test">
+      Label
+    </UiFormLabel>
+    <UiInput id="test" />
+    <UiFormMessage content="test message" type="warning" />
+  </div>
+  `,
+}
diff --git a/apps/client/src/shared/ui/form/UiFormField.vue b/apps/client/src/shared/ui/form/UiFormField.vue
new file mode 100644
index 00000000..4e3c775d
--- /dev/null
+++ b/apps/client/src/shared/ui/form/UiFormField.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'form-field',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/form/UiFormLabel.vue b/apps/client/src/shared/ui/form/UiFormLabel.vue
new file mode 100644
index 00000000..db14f995
--- /dev/null
+++ b/apps/client/src/shared/ui/form/UiFormLabel.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { Label, type LabelProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      'form-label',
+      props.class,
+    )"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Label>
+</template>
diff --git a/apps/client/src/shared/ui/form/UiFormMessage.vue b/apps/client/src/shared/ui/form/UiFormMessage.vue
new file mode 100644
index 00000000..435c57d5
--- /dev/null
+++ b/apps/client/src/shared/ui/form/UiFormMessage.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+import { Icon, type IconifyIcon } from '@iconify/vue'
+import { twMerge } from 'tailwind-merge'
+
+interface MessageProps {
+  icon?: IconifyIcon | string
+  type?: 'error' | 'warning'
+  content: string
+}
+
+const { type = 'error', icon, content } = defineProps<MessageProps>()
+
+const colors: Record<string, string> = {
+  error: 'text-red-500',
+  warning: 'text-yellow-500',
+}
+
+const attrs = useAttrs()
+
+const classes = computed(() => {
+  return [
+    twMerge(
+      'form-message',
+      colors[type as keyof typeof colors],
+      attrs.iconClass as string,
+    ),
+  ]
+})
+
+const message = computed(() => {
+  return content.charAt(0).toUpperCase() + content.slice(1).toLowerCase()
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <Icon v-if="icon" :icon="icon" />
+    <span>{{ message }}</span>
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/form/__tests__/MockComponent.vue b/apps/client/src/shared/ui/form/__tests__/MockComponent.vue
new file mode 100644
index 00000000..fd4f0ac4
--- /dev/null
+++ b/apps/client/src/shared/ui/form/__tests__/MockComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { UiFormField, UiFormLabel, UiFormMessage } from '..'
+import { UiButton, UiInput } from '../../index'
+</script>
+
+<template>
+  <form>
+    <div class="grid gap-6">
+      <div class="grid gap-4">
+        <UiFormField>
+          <UiFormLabel for="test">
+            Label
+          </UiFormLabel>
+          <UiInput id="test" />
+          <UiFormMessage content="test message" />
+        </UiFormField>
+      </div>
+      <UiButton>Test</UiButton>
+    </div>
+  </form>
+</template>
diff --git a/apps/client/src/shared/ui/form/__tests__/UiForm.spec.ts b/apps/client/src/shared/ui/form/__tests__/UiForm.spec.ts
new file mode 100644
index 00000000..27272090
--- /dev/null
+++ b/apps/client/src/shared/ui/form/__tests__/UiForm.spec.ts
@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiForm from './MockComponent.vue'
+
+describe('tests for UiForm', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(UiForm)
+
+    const label = wrapper.findComponent({ name: 'UiFormLabel' })
+    expect(label.exists()).toBe(true)
+    expect(label.text()).toBe('Label')
+
+    const message = wrapper.findComponent({ name: 'UiFormMessage' })
+    expect(message.exists()).toBe(true)
+    expect(message.props('content')).toBe('test message')
+  })
+})
+
+// more tests in stories
diff --git a/apps/client/src/shared/ui/form/index.ts b/apps/client/src/shared/ui/form/index.ts
new file mode 100644
index 00000000..6439979a
--- /dev/null
+++ b/apps/client/src/shared/ui/form/index.ts
@@ -0,0 +1,3 @@
+export { default as UiFormField } from './UiFormField.vue'
+export { default as UiFormLabel } from './UiFormLabel.vue'
+export { default as UiFormMessage } from './UiFormMessage.vue'
diff --git a/apps/client/src/shared/ui/index.ts b/apps/client/src/shared/ui/index.ts
new file mode 100644
index 00000000..a068d4fc
--- /dev/null
+++ b/apps/client/src/shared/ui/index.ts
@@ -0,0 +1,21 @@
+export * from './alert'
+export * from './badge'
+export * from './button'
+export * from './card'
+export * from './checkbox'
+export * from './command'
+export * from './data-table'
+export * from './dialog'
+export * from './dropdown-menu'
+export * from './dropdown-menu'
+export * from './form'
+export * from './input'
+export * from './pagination'
+export * from './picker'
+export * from './pin-input'
+export * from './popover'
+export * from './select'
+export * from './shimmer-button'
+export * from './table'
+export * from './tabs'
+export * from './tags-input'
diff --git a/apps/client/src/shared/ui/input/UiInput.stories.ts b/apps/client/src/shared/ui/input/UiInput.stories.ts
new file mode 100644
index 00000000..2a360bd4
--- /dev/null
+++ b/apps/client/src/shared/ui/input/UiInput.stories.ts
@@ -0,0 +1,32 @@
+import UiInput from './UiInput.vue'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiInput',
+  component: UiInput,
+  argTypes: {
+    modelValue: {
+      control: { type: 'text' },
+    },
+    type: {
+      control: { type: 'select' },
+      options: ['text', 'password', 'number', 'email'],
+      defaultValue: 'text',
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+  },
+} as Meta<typeof UiInput>
+
+const Template: StoryFn<typeof UiInput> = (args) => {
+  return {
+    components: { UiInput },
+    setup() {
+      return { args }
+    },
+    template: '<UiInput v-bind="args" />',
+  }
+}
+
+export const DefaultInput: StoryFn<typeof UiInput> = Template.bind({})
diff --git a/apps/client/src/shared/ui/input/UiInput.vue b/apps/client/src/shared/ui/input/UiInput.vue
new file mode 100644
index 00000000..9a707443
--- /dev/null
+++ b/apps/client/src/shared/ui/input/UiInput.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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
+    v-model="modelValue"
+    :class="cn(
+      'input',
+      props.class,
+    )"
+  />
+</template>
diff --git a/apps/client/src/shared/ui/input/__tests__/UiInput.spec.ts b/apps/client/src/shared/ui/input/__tests__/UiInput.spec.ts
new file mode 100644
index 00000000..5f69466c
--- /dev/null
+++ b/apps/client/src/shared/ui/input/__tests__/UiInput.spec.ts
@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiInput from '../UiInput.vue'
+
+describe('tests for UiInput', () => {
+  const wrapper = shallowMount(UiInput, {
+    props: {
+      modelValue: 'value',
+      placeholder: 'jenda',
+      type: 'text',
+    },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should update value with @input', async () => {
+    const input = wrapper.find('input')
+    await input.setValue('new')
+    expect(wrapper.emitted('update:modelValue')![0]).toEqual(['new'])
+  })
+})
diff --git a/apps/client/src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap b/apps/client/src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap
new file mode 100644
index 00000000..11d9a0c9
--- /dev/null
+++ b/apps/client/src/shared/ui/input/__tests__/__snapshots__/UiInput.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for UiInput > should render correctly 1`] = `"<input class="input" placeholder="jenda" type="text">"`;
diff --git a/apps/client/src/shared/ui/input/index.ts b/apps/client/src/shared/ui/input/index.ts
new file mode 100644
index 00000000..ad141f55
--- /dev/null
+++ b/apps/client/src/shared/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as UiInput } from './UiInput.vue'
diff --git a/apps/client/src/shared/ui/pagination/UiPaginationEllipsis.vue b/apps/client/src/shared/ui/pagination/UiPaginationEllipsis.vue
new file mode 100644
index 00000000..cb70cb97
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/UiPaginationEllipsis.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationEllipsis
+    v-bind="delegatedProps"
+    :class="cn(
+      'pagination-ellipsis',
+      props.class,
+    )"
+  >
+    <slot>
+      <div i-lucide-ellipsis />
+    </slot>
+  </PaginationEllipsis>
+</template>
diff --git a/apps/client/src/shared/ui/pagination/UiPaginationFirst.vue b/apps/client/src/shared/ui/pagination/UiPaginationFirst.vue
new file mode 100644
index 00000000..f7bccedb
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/UiPaginationFirst.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
+import {
+  UiButton,
+} from '@/shared/ui/button'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationFirst v-bind="delegatedProps">
+    <UiButton
+      :class="cn(
+        'pagination-item',
+        props.class,
+      )"
+      size="sm"
+      variant="outline"
+    >
+      <slot>
+        <span i-lucide-chevrons-left class="min-w-3.5" />
+      </slot>
+    </UiButton>
+  </PaginationFirst>
+</template>
diff --git a/apps/client/src/shared/ui/pagination/UiPaginationLast.vue b/apps/client/src/shared/ui/pagination/UiPaginationLast.vue
new file mode 100644
index 00000000..a965a69d
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/UiPaginationLast.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { PaginationLast, type PaginationLastProps } from 'radix-vue'
+import {
+  UiButton,
+} from '@/shared/ui/button'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationLast v-bind="delegatedProps">
+    <UiButton
+      :class="cn(
+        'pagination-item',
+        props.class,
+      )"
+      size="sm"
+      variant="outline"
+    >
+      <slot>
+        <span i-lucide-chevrons-right class="min-w-3.5" />
+      </slot>
+    </UiButton>
+  </PaginationLast>
+</template>
diff --git a/apps/client/src/shared/ui/pagination/UiPaginationNext.vue b/apps/client/src/shared/ui/pagination/UiPaginationNext.vue
new file mode 100644
index 00000000..a79cc127
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/UiPaginationNext.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { PaginationNext, type PaginationNextProps } from 'radix-vue'
+import {
+  UiButton,
+} from '@/shared/ui/button'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationNext v-bind="delegatedProps">
+    <UiButton
+      :class="cn(
+        'pagination-item',
+        props.class,
+      )"
+      size="sm"
+      variant="outline"
+    >
+      <slot>
+        <span i-lucide-chevron-right class="min-w-3.5" />
+      </slot>
+    </UiButton>
+  </PaginationNext>
+</template>
diff --git a/apps/client/src/shared/ui/pagination/UiPaginationPrev.vue b/apps/client/src/shared/ui/pagination/UiPaginationPrev.vue
new file mode 100644
index 00000000..96a7b2a6
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/UiPaginationPrev.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
+import {
+  UiButton,
+} from '@/shared/ui/button'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
+  asChild: true,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <PaginationPrev v-bind="delegatedProps">
+    <UiButton
+      :class="cn(
+        'pagination-item',
+        props.class,
+      )"
+      size="sm"
+      variant="outline"
+    >
+      <slot>
+        <span i-lucide-chevron-left class="min-w-3.5" />
+      </slot>
+    </UiButton>
+  </PaginationPrev>
+</template>
diff --git a/apps/client/src/shared/ui/pagination/__tests__/MockComponent.vue b/apps/client/src/shared/ui/pagination/__tests__/MockComponent.vue
new file mode 100644
index 00000000..1c63e03b
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/__tests__/MockComponent.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useEmitAsProps } from 'radix-vue'
+import {
+  UiPagination,
+  UiPaginationFirst,
+  UiPaginationLast,
+  UiPaginationList,
+  UiPaginationNext,
+  UiPaginationPrev,
+} from '..'
+import type { PaginationRootEmits, PaginationRootProps } from 'radix-vue'
+
+const { total = 10, ...props } = defineProps<PaginationRootProps>()
+const emits = defineEmits<PaginationRootEmits>()
+</script>
+
+<template>
+  <UiPagination
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :total="total"
+  >
+    <UiPaginationList class="flex items-center gap-1">
+      <UiPaginationFirst />
+      <UiPaginationPrev />
+      <UiPaginationNext />
+      <UiPaginationLast />
+    </UiPaginationList>
+  </UiPagination>
+</template>
diff --git a/apps/client/src/shared/ui/pagination/__tests__/UiPagination.spec.ts b/apps/client/src/shared/ui/pagination/__tests__/UiPagination.spec.ts
new file mode 100644
index 00000000..6d0e3ae3
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/__tests__/UiPagination.spec.ts
@@ -0,0 +1,26 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import MockComponent from './MockComponent.vue'
+
+describe('tests for UiPagination', () => {
+  const wrapper = mount(MockComponent, {
+    props: {
+      total: 50,
+      itemsPerPage: 10,
+      page: 1,
+    },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should emit update:page when page is changed to + 1', async () => {
+    const nextBtn = wrapper.findComponent({ name: 'UiPaginationNext' })
+    await nextBtn.trigger('click')
+    expect(wrapper.emitted('update:page')).toBeTruthy()
+    expect(wrapper.emitted('update:page')?.[0]).toEqual([2])
+  })
+})
+
+// more tests: https://github.com/unovue/radix-vue/blob/main/packages/radix-vue/src/Pagination/Pagination.test.ts
diff --git a/apps/client/src/shared/ui/pagination/__tests__/__snapshots__/UiPagination.spec.ts.snap b/apps/client/src/shared/ui/pagination/__tests__/__snapshots__/UiPagination.spec.ts.snap
new file mode 100644
index 00000000..d41039e5
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/__tests__/__snapshots__/UiPagination.spec.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for UiPagination > should render correctly 1`] = `
+"<nav>
+  <div class="flex items-center gap-1"><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" disabled="" aria-label="First Page" type="button">
+      <!--v-if--><span i-lucide-chevrons-left="" class="min-w-3.5"></span>
+    </button><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" disabled="" aria-label="Previous Page" type="button">
+      <!--v-if--><span i-lucide-chevron-left="" class="min-w-3.5"></span>
+    </button><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" aria-label="Next Page" type="button">
+      <!--v-if--><span i-lucide-chevron-right="" class="min-w-3.5"></span>
+    </button><button class="btn btn-outline h-34px 2xl:h-8 rounded-md px-3 pagination-item" aria-label="Last Page" type="button">
+      <!--v-if--><span i-lucide-chevrons-right="" class="min-w-3.5"></span>
+    </button></div>
+</nav>"
+`;
diff --git a/apps/client/src/shared/ui/pagination/index.ts b/apps/client/src/shared/ui/pagination/index.ts
new file mode 100644
index 00000000..86bc4a3d
--- /dev/null
+++ b/apps/client/src/shared/ui/pagination/index.ts
@@ -0,0 +1,10 @@
+export { default as UiPaginationEllipsis } from './UiPaginationEllipsis.vue'
+export { default as UiPaginationFirst } from './UiPaginationFirst.vue'
+export { default as UiPaginationLast } from './UiPaginationLast.vue'
+export { default as UiPaginationNext } from './UiPaginationNext.vue'
+export { default as UiPaginationPrev } from './UiPaginationPrev.vue'
+export {
+  PaginationRoot as UiPagination,
+  PaginationList as UiPaginationList,
+  PaginationListItem as UiPaginationListItem,
+} from 'radix-vue'
diff --git a/apps/client/src/shared/ui/picker/UiColorPicker.vue b/apps/client/src/shared/ui/picker/UiColorPicker.vue
new file mode 100644
index 00000000..7e788c49
--- /dev/null
+++ b/apps/client/src/shared/ui/picker/UiColorPicker.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue'
+import { createReusableTemplate } from '@vueuse/core'
+import { UiInput, UiPopover, UiPopoverContent, UiPopoverTrigger, UiTabs, UiTabsContent, UiTabsList, UiTabsTrigger } from '@/shared/ui'
+import { formatLabelColor } from '@/shared/helpers/helperColor'
+
+const background = defineModel<string>('color', { required: true })
+
+const solids = ['#E2E2E2', '#ff75c3', '#ffa647', '#ffe83f', '#9fff5b', '#70e2ff', '#cd93ff', '#09203f', '#f54242', '#42f54b', '#4257f5', '#f5a142', '#b142f5', '#42f5e9', '#f542aa', '#42f57d', '#747c7c', '#fb6e00', '#c7fb00', '#0082fb', '#b600fb', '#fb007e', '#00fb75', '#fbdf00', '#e55d87', '#cac531', '#96deda', '#5f72bd', '#e6ae8c', '#00c3ff', '#fc354c', '#215f00']
+
+const gradients = [
+  'linear-gradient(to right, #ff75c3, #ffa647)',
+  'linear-gradient(to right, #ffa647, #9fff5b)',
+  'linear-gradient(to right, #9fff5b, #70e2ff)',
+  'linear-gradient(to right, #70e2ff, #cd93ff)',
+  'linear-gradient(to right, #cd93ff, #09203f)',
+  'linear-gradient(to right, #09203f, #ff75c3)',
+  'linear-gradient(to right, #f54242, #42f54b)',
+]
+
+const [DefineTemplate, ReuseTemplate] = createReusableTemplate()
+</script>
+
+<template>
+  <DefineTemplate v-slot="{ data, value }">
+    <UiTabsContent :value="value" class="picker">
+      <div
+        v-for="item, idx in data"
+        :key="idx"
+        :style="{ background: item }"
+        class="picker-item"
+        @click="background = item"
+      />
+    </UiTabsContent>
+  </DefineTemplate>
+  <UiPopover v-bind="$attrs">
+    <UiPopoverTrigger as-child>
+      <Icon
+        icon="solar:menu-dots-bold-duotone"
+        class="picker-icon"
+        :style="{ color: formatLabelColor(background || '', 80) }"
+      />
+    </UiPopoverTrigger>
+    <UiPopoverContent class="w-64">
+      <UiTabs default-value="solid" class="picker-tabs">
+        <UiTabsList class="w-full mb-4">
+          <UiTabsTrigger class="flex-1" value="solid">
+            {{ $t('picker.tabs', 1) }}
+          </UiTabsTrigger>
+          <UiTabsTrigger class="flex-1" value="gradient">
+            {{ $t('picker.tabs', 2) }}
+          </UiTabsTrigger>
+        </UiTabsList>
+        <ReuseTemplate :data="solids" value="solid" />
+        <ReuseTemplate :data="gradients" value="gradient" />
+      </UiTabs>
+      <UiInput
+        v-model="background"
+        :placeholder="$t('picker.placeholder')"
+        class="picker-input"
+      />
+    </UiPopoverContent>
+  </UiPopover>
+</template>
diff --git a/apps/client/src/shared/ui/picker/index.ts b/apps/client/src/shared/ui/picker/index.ts
new file mode 100644
index 00000000..d91bd0ec
--- /dev/null
+++ b/apps/client/src/shared/ui/picker/index.ts
@@ -0,0 +1 @@
+export { default as UiColorPicker } from './UiColorPicker.vue'
diff --git a/apps/client/src/shared/ui/pin-input/UiPinInput.stories.ts b/apps/client/src/shared/ui/pin-input/UiPinInput.stories.ts
new file mode 100644
index 00000000..953f4912
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/UiPinInput.stories.ts
@@ -0,0 +1,71 @@
+import {
+  UiPinInput,
+  UiPinInputGroup,
+  UiPinInputInput,
+  UiPinInputSeparator,
+} from '..'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiPinInput',
+  component: UiPinInput,
+  argTypes: {
+    modelValue: {
+      control: { type: 'text' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+  },
+} as Meta<typeof UiPinInput>
+
+const Template: StoryFn<typeof UiPinInput> = (args) => {
+  return {
+    components: { UiPinInput, UiPinInputGroup, UiPinInputInput, UiPinInputSeparator },
+    setup() {
+      return { args }
+    },
+    template: `
+    <UiPinInput
+      id="pin-input"
+      v-bind="args"
+    >
+       <template v-if="${'default' in args}" v-slot>${args.default}</template>
+    </UiPinInput>
+    `,
+  }
+}
+
+export const DefaultPinInput: StoryFn<typeof UiPinInput> = Template.bind({})
+
+DefaultPinInput.args = {
+  default: `
+    <UiPinInputGroup>
+      <UiPinInputInput
+        v-for="(id, index) in 5"
+        :key="id"
+        :index="index"
+      />
+    </UiPinInputGroup>
+  `,
+  placeholder: '○',
+}
+
+export const PinInputWithSeparator: StoryFn<typeof UiPinInput> = Template.bind({})
+
+PinInputWithSeparator.args = {
+  default: `
+    <UiPinInputGroup class="gap-1">
+      <template v-for="(id, index) in 5" :key="id">
+        <UiPinInputInput
+          class="rounded-md border"
+          :index="index"
+        />
+        <template v-if="index !== 4">
+          <UiPinInputSeparator />
+        </template>
+      </template>
+    </UiPinInputGroup>
+    `,
+  placeholder: '',
+}
diff --git a/apps/client/src/shared/ui/pin-input/UiPinInput.vue b/apps/client/src/shared/ui/pin-input/UiPinInput.vue
new file mode 100644
index 00000000..47e9d465
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/UiPinInput.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
+  modelValue: () => [],
+})
+const emits = defineEmits<PinInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PinInputRoot
+    v-bind="forwarded"
+    :class="cn(
+      'pin-input',
+      props.class,
+    )"
+  >
+    <slot />
+  </PinInputRoot>
+</template>
diff --git a/apps/client/src/shared/ui/pin-input/UiPinInputGroup.vue b/apps/client/src/shared/ui/pin-input/UiPinInputGroup.vue
new file mode 100644
index 00000000..08963a7f
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/UiPinInputGroup.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <Primitive
+    v-bind="forwardedProps"
+    :class="cn(
+      'pin-input-group',
+      props.class,
+    )"
+  >
+    <slot />
+  </primitive>
+</template>
diff --git a/apps/client/src/shared/ui/pin-input/UiPinInputInput.vue b/apps/client/src/shared/ui/pin-input/UiPinInputInput.vue
new file mode 100644
index 00000000..6677c08e
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/UiPinInputInput.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<PinInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <PinInputInput
+    v-bind="forwardedProps"
+    :class="cn(
+      'pin-input-input',
+      props.class,
+    )"
+  />
+</template>
diff --git a/apps/client/src/shared/ui/pin-input/UiPinInputSeparator.vue b/apps/client/src/shared/ui/pin-input/UiPinInputSeparator.vue
new file mode 100644
index 00000000..42681824
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/UiPinInputSeparator.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+
+const props = defineProps<PrimitiveProps>()
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+  <Primitive v-bind="forwardedProps">
+    <slot>
+      <div i-lucide-dot />
+    </slot>
+  </primitive>
+</template>
diff --git a/apps/client/src/shared/ui/pin-input/__tests__/MockComponent.vue b/apps/client/src/shared/ui/pin-input/__tests__/MockComponent.vue
new file mode 100644
index 00000000..9103d8dd
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/__tests__/MockComponent.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useEmitAsProps } from 'radix-vue'
+import { UiPinInput, UiPinInputInput } from '../index'
+import type { PinInputRootEmits, PinInputRootProps } from 'radix-vue'
+
+const props = defineProps<PinInputRootProps>()
+const emits = defineEmits<PinInputRootEmits>()
+
+const value = ref<string[]>([])
+</script>
+
+<template>
+  <UiPinInput
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    v-model="value"
+    class="flex gap-2 items-center"
+  >
+    <UiPinInputInput
+      v-for="(id, index) in 5"
+      :key="id"
+      class="w-10 h-10 rounded text-yellow-800"
+      :index="index"
+    />
+  </UiPinInput>
+</template>
diff --git a/apps/client/src/shared/ui/pin-input/__tests__/UiPinInput.spec.ts b/apps/client/src/shared/ui/pin-input/__tests__/UiPinInput.spec.ts
new file mode 100644
index 00000000..d1e59785
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/__tests__/UiPinInput.spec.ts
@@ -0,0 +1,30 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiPinInput from './MockComponent.vue'
+
+describe('tests for UiPinInput', () => {
+  const wrapper = mount(UiPinInput, {
+    props: {
+      placeholder: '○',
+      type: 'text',
+      modelValue: ['', '', '', '', ''],
+    },
+  })
+  it('should render correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should emit the correct event on input', async () => {
+    wrapper.vm.$emit('update:modelValue', ['1', '2', '3'])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['1', '2', '3']])
+  })
+
+  it('should emit "complete" event', async () => {
+    const inputs = wrapper.findAll('.pin-input-input')
+    for (let i = 0; i < inputs.length; i++) {
+      await inputs[i].setValue((i + 1).toString())
+    }
+    expect(wrapper.emitted('complete')).toBeTruthy()
+    expect(wrapper.emitted('complete')?.[0]).toEqual([['1', '2', '3', '4', '5']])
+  })
+})
diff --git a/apps/client/src/shared/ui/pin-input/__tests__/__snapshots__/UiPinInput.spec.ts.snap b/apps/client/src/shared/ui/pin-input/__tests__/__snapshots__/UiPinInput.spec.ts.snap
new file mode 100644
index 00000000..2f73e493
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/__tests__/__snapshots__/UiPinInput.spec.ts.snap
@@ -0,0 +1,6 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`tests for UiPinInput > should render correctly 1`] = `
+"<div class="pin-input flex gap-2 items-center" dir="ltr"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="○" aria-label="pin input 1 of 5" class="pin-input-input w-10 h-10 rounded text-yellow-800"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="○" aria-label="pin input 2 of 5" class="pin-input-input w-10 h-10 rounded text-yellow-800"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="○" aria-label="pin input 3 of 5" class="pin-input-input w-10 h-10 rounded text-yellow-800"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="○" aria-label="pin input 4 of 5" class="pin-input-input w-10 h-10 rounded text-yellow-800"><input autocapitalize="none" autocomplete="false" type="text" inputmode="text" placeholder="○" aria-label="pin input 5 of 5" class="pin-input-input w-10 h-10 rounded text-yellow-800"></div>
+<input type="text" tabindex="-1" aria-hidden="true" style="transform: translateX(-100%); position: absolute; pointer-events: none; opacity: 0; margin: 0px;" value="">"
+`;
diff --git a/apps/client/src/shared/ui/pin-input/index.ts b/apps/client/src/shared/ui/pin-input/index.ts
new file mode 100644
index 00000000..5a4144d7
--- /dev/null
+++ b/apps/client/src/shared/ui/pin-input/index.ts
@@ -0,0 +1,4 @@
+export { default as UiPinInput } from './UiPinInput.vue'
+export { default as UiPinInputGroup } from './UiPinInputGroup.vue'
+export { default as UiPinInputInput } from './UiPinInputInput.vue'
+export { default as UiPinInputSeparator } from './UiPinInputSeparator.vue'
diff --git a/apps/client/src/shared/ui/popover/UiPopover.stories.ts b/apps/client/src/shared/ui/popover/UiPopover.stories.ts
new file mode 100644
index 00000000..328cbdb3
--- /dev/null
+++ b/apps/client/src/shared/ui/popover/UiPopover.stories.ts
@@ -0,0 +1,39 @@
+import { PopoverRoot } from 'radix-vue'
+import { UiButton } from '../button'
+import {
+  UiPopover,
+  UiPopoverContent,
+  UiPopoverTrigger,
+} from './index'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiPopover',
+  component: UiPopover,
+} as Meta<typeof UiPopover>
+
+const Template: StoryFn<typeof UiPopover> = args => ({
+  components: {
+    PopoverRoot,
+    UiPopover,
+    UiPopoverContent,
+    UiPopoverTrigger,
+    UiButton,
+  },
+  setup() {
+    return { args }
+  },
+  template: `
+  <div style="padding: 60px">
+    <PopoverRoot>
+      <UiPopoverTrigger>
+        <UiButton>Open</UiButton>
+      </UiPopover>
+      <UiPopoverContent>
+        hello
+      </UiPopoverContent>
+    </PopoverRoot>
+  </div>`,
+})
+
+export const DefaultPopover: StoryFn<typeof UiPopover> = Template.bind({})
diff --git a/apps/client/src/shared/ui/popover/UiPopover.vue b/apps/client/src/shared/ui/popover/UiPopover.vue
new file mode 100644
index 00000000..1a5873a3
--- /dev/null
+++ b/apps/client/src/shared/ui/popover/UiPopover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/apps/client/src/shared/ui/popover/UiPopoverContent.vue b/apps/client/src/shared/ui/popover/UiPopoverContent.vue
new file mode 100644
index 00000000..f2e53bc8
--- /dev/null
+++ b/apps/client/src/shared/ui/popover/UiPopoverContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'center',
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'popover-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 />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/apps/client/src/shared/ui/popover/UiPopoverTrigger.vue b/apps/client/src/shared/ui/popover/UiPopoverTrigger.vue
new file mode 100644
index 00000000..22f4772a
--- /dev/null
+++ b/apps/client/src/shared/ui/popover/UiPopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'radix-vue'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/apps/client/src/shared/ui/popover/__tests__/MockComponent.vue b/apps/client/src/shared/ui/popover/__tests__/MockComponent.vue
new file mode 100644
index 00000000..2a254820
--- /dev/null
+++ b/apps/client/src/shared/ui/popover/__tests__/MockComponent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useEmitAsProps } from 'radix-vue'
+import { UiPopover, UiPopoverContent, UiPopoverTrigger } from '..'
+import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+</script>
+
+<template>
+  <UiPopover
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+  >
+    <UiPopoverTrigger>
+      Open popover
+    </UiPopoverTrigger>
+    <UiPopoverContent>
+      Some popover content
+    </UiPopoverContent>
+  </UiPopover>
+</template>
diff --git a/apps/client/src/shared/ui/popover/__tests__/UiPopover.spec.ts b/apps/client/src/shared/ui/popover/__tests__/UiPopover.spec.ts
new file mode 100644
index 00000000..115c20e0
--- /dev/null
+++ b/apps/client/src/shared/ui/popover/__tests__/UiPopover.spec.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MockComponent from './MockComponent.vue'
+
+describe('tests for UiPopover', () => {
+  const wrapper = mount(MockComponent, {
+    props: {
+      defaultOpen: true,
+      modal: false,
+    },
+  })
+  it('should render correctly', () => {
+    expect(wrapper.html())
+  })
+
+  it('should pass props to PopoverRoot', () => {
+    const root = wrapper.findComponent({ name: 'PopoverRoot' })
+    expect(root.props('defaultOpen')).toBe(true)
+    expect(root.props('modal')).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/Popover/Popover.test.ts
diff --git a/apps/client/src/shared/ui/popover/index.ts b/apps/client/src/shared/ui/popover/index.ts
new file mode 100644
index 00000000..c9459bf9
--- /dev/null
+++ b/apps/client/src/shared/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as UiPopover } from './UiPopover.vue'
+export { default as UiPopoverContent } from './UiPopoverContent.vue'
+export { default as UiPopoverTrigger } from './UiPopoverTrigger.vue'
+export { PopoverAnchor } from 'radix-vue'
diff --git a/apps/client/src/shared/ui/select/UiSelect.stories.ts b/apps/client/src/shared/ui/select/UiSelect.stories.ts
new file mode 100644
index 00000000..ce580526
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelect.stories.ts
@@ -0,0 +1,49 @@
+import { UiButton } from '../button'
+import {
+  UiSelect,
+  UiSelectContent,
+  UiSelectGroup,
+  UiSelectItem,
+  UiSelectLabel,
+  UiSelectTrigger,
+  UiSelectValue,
+} from './index'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiSelect',
+  component: UiSelect,
+} as Meta<typeof UiSelect>
+
+const Template: StoryFn<typeof UiSelect> = args => ({
+  components: {
+    UiSelect,
+    UiSelectContent,
+    UiSelectGroup,
+    UiSelectItem,
+    UiSelectLabel,
+    UiSelectTrigger,
+    UiSelectValue,
+    UiButton,
+  },
+  setup() {
+    return { args }
+  },
+  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/apps/client/src/shared/ui/select/UiSelect.vue b/apps/client/src/shared/ui/select/UiSelect.vue
new file mode 100644
index 00000000..46597625
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelect.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/apps/client/src/shared/ui/select/UiSelectContent.vue b/apps/client/src/shared/ui/select/UiSelectContent.vue
new file mode 100644
index 00000000..5b3ec53a
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectContent.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { UiSelectScrollDownButton, UiSelectScrollUpButton } from '.'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/select/UiSelectGroup.vue b/apps/client/src/shared/ui/select/UiSelectGroup.vue
new file mode 100644
index 00000000..dcc2e66e
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/select/UiSelectItem.vue b/apps/client/src/shared/ui/select/UiSelectItem.vue
new file mode 100644
index 00000000..33a68fc9
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectItem.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+interface Props extends SelectItemProps {
+  withIndicator?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+defineEmits<{
+  (e: 'click'): void
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="{ ...$attrs, ...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/apps/client/src/shared/ui/select/UiSelectItemText.vue b/apps/client/src/shared/ui/select/UiSelectItemText.vue
new file mode 100644
index 00000000..a0bb5c24
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/select/UiSelectLabel.vue b/apps/client/src/shared/ui/select/UiSelectLabel.vue
new file mode 100644
index 00000000..4f136e90
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectLabel.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel
+    :class="cn(
+      'select-label',
+      props.class,
+    )"
+  >
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/apps/client/src/shared/ui/select/UiSelectScrollDownButton.vue b/apps/client/src/shared/ui/select/UiSelectScrollDownButton.vue
new file mode 100644
index 00000000..1835d4ef
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectScrollDownButton.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/select/UiSelectScrollUpButton.vue b/apps/client/src/shared/ui/select/UiSelectScrollUpButton.vue
new file mode 100644
index 00000000..256319d3
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectScrollUpButton.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/select/UiSelectSeparator.vue b/apps/client/src/shared/ui/select/UiSelectSeparator.vue
new file mode 100644
index 00000000..a472251a
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/select/UiSelectTrigger.vue b/apps/client/src/shared/ui/select/UiSelectTrigger.vue
new file mode 100644
index 00000000..8af5e166
--- /dev/null
+++ b/apps/client/src/shared/ui/select/UiSelectTrigger.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+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/apps/client/src/shared/ui/select/UiSelectValue.vue b/apps/client/src/shared/ui/select/UiSelectValue.vue
new file mode 100644
index 00000000..4bc37dd8
--- /dev/null
+++ b/apps/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/apps/client/src/shared/ui/select/__tests__/UiSelect.spec.ts b/apps/client/src/shared/ui/select/__tests__/UiSelect.spec.ts
new file mode 100644
index 00000000..fb05aa51
--- /dev/null
+++ b/apps/client/src/shared/ui/select/__tests__/UiSelect.spec.ts
@@ -0,0 +1,27 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import UiSelect from '../UiSelect.vue'
+
+describe('tests for UiSelect', () => {
+  const wrapper = mount(UiSelect, {
+    slots: { default: '<div>test select</div>' },
+    props: { defaultOpen: true },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html()).toContain('<div>test select</div>')
+  })
+
+  it('should pass defaultOpen prop to DropdownMenuRoot', () => {
+    const root = wrapper.findComponent({ name: 'SelectRoot' })
+    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/Select/Select.test.ts
diff --git a/apps/client/src/shared/ui/select/index.ts b/apps/client/src/shared/ui/select/index.ts
new file mode 100644
index 00000000..a75c0864
--- /dev/null
+++ b/apps/client/src/shared/ui/select/index.ts
@@ -0,0 +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/apps/client/src/shared/ui/shimmer-button/ShimmerButton.vue b/apps/client/src/shared/ui/shimmer-button/ShimmerButton.vue
new file mode 100644
index 00000000..a65d03ca
--- /dev/null
+++ b/apps/client/src/shared/ui/shimmer-button/ShimmerButton.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import { cn } from '@/shared/libs/shadcn/utils'
+
+interface ShimmerButtonProps {
+  shimmerColor?: string
+  shimmerSize?: string
+  borderRadius?: string
+  shimmerDuration?: string
+  background?: string
+  class?: string
+}
+
+withDefaults(defineProps<ShimmerButtonProps>(), {
+  shimmerColor: '#2563eb',
+  shimmerSize: '0.05em',
+  shimmerDuration: '3s',
+  borderRadius: '8px',
+})
+</script>
+
+<template>
+  <button
+    :class="
+      cn(
+        'btn btn-secondary z-0 relative overflow-hidden h-9 2xl:h-8 rounded-md px-3 dark:hover:bg-#2e2e2e',
+        $props.class,
+      )
+    "
+    :style="{
+      '--spread': '90deg',
+      '--shimmer-color': shimmerColor,
+      '--radius': borderRadius,
+      '--speed': shimmerDuration,
+      '--cut': shimmerSize,
+    }"
+  >
+    <div :class="cn('-z-30 blur-[2px]', 'absolute inset-0 overflow-visible [container-type:size]')">
+      <div
+        class="animate-shimmer-btn-shimmer-slide absolute inset-0 h-[100cqh] [aspect-ratio:1] [border-radius:0] [mask:none]"
+      >
+        <div
+          class="animate-shimmer-btn-spin-around absolute -inset-full w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]"
+        />
+      </div>
+    </div>
+    <slot />
+
+    <div
+      :class="
+        cn(
+          'insert-0 absolute size-full',
+          'rounded-2xl px-4 py-1.5 text-sm font-medium',
+          'transform-gpu transition-all duration-300 ease-in-out',
+          'group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]',
+          'group-active:shadow-[inset_0_-10px_10px_#ffffff3f]',
+        )
+      "
+    />
+
+    <div
+      class="absolute -z-20 bg-neutral-100 dark:bg-#2e2e2e [border-radius:var(--radius)] [inset:var(--cut)]"
+    />
+  </button>
+</template>
+
+<style scoped>
+@keyframes shimmer-btn-shimmer-slide {
+  to {
+    transform: translate(calc(100cqw - 100%), 0);
+  }
+}
+
+@keyframes shimmer-btn-spin-around {
+  0% {
+    transform: translateZ(0) rotate(0);
+  }
+  15%,
+  35% {
+    transform: translateZ(0) rotate(90deg);
+  }
+  65%,
+  85% {
+    transform: translateZ(0) rotate(270deg);
+  }
+  100% {
+    transform: translateZ(0) rotate(360deg);
+  }
+}
+
+.animate-shimmer-btn-shimmer-slide {
+  animation: shimmer-btn-shimmer-slide var(--speed) ease-in-out infinite alternate;
+}
+
+.animate-shimmer-btn-spin-around {
+  animation: shimmer-btn-spin-around calc(var(--speed) * 2) infinite linear;
+}
+</style>
diff --git a/apps/client/src/shared/ui/shimmer-button/index.ts b/apps/client/src/shared/ui/shimmer-button/index.ts
new file mode 100644
index 00000000..b0d44c77
--- /dev/null
+++ b/apps/client/src/shared/ui/shimmer-button/index.ts
@@ -0,0 +1 @@
+export { default as ShimmerButton } from './ShimmerButton.vue'
diff --git a/apps/client/src/shared/ui/shortcuts.ts b/apps/client/src/shared/ui/shortcuts.ts
new file mode 100644
index 00000000..b7c5a7c4
--- /dev/null
+++ b/apps/client/src/shared/ui/shortcuts.ts
@@ -0,0 +1 @@
+export * from './_shortcuts'
diff --git a/apps/client/src/shared/ui/table/UiTableBody.vue b/apps/client/src/shared/ui/table/UiTableBody.vue
new file mode 100644
index 00000000..90b26390
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableBody.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody
+    :class="cn(
+      'table-body',
+      props.class)"
+  >
+    <slot />
+  </tbody>
+</template>
diff --git a/apps/client/src/shared/ui/table/UiTableCaption.vue b/apps/client/src/shared/ui/table/UiTableCaption.vue
new file mode 100644
index 00000000..7cbd8333
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableCaption.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption
+    :class="cn(
+      'table-caption',
+      props.class,
+    )"
+  >
+    <slot />
+  </caption>
+</template>
diff --git a/apps/client/src/shared/ui/table/UiTableCell.vue b/apps/client/src/shared/ui/table/UiTableCell.vue
new file mode 100644
index 00000000..25b5d129
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableCell.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'table-cell no-scroll',
+        props.class,
+      )
+    "
+    v-bind="$attrs"
+  >
+    <slot />
+  </td>
+</template>
+
+<style scoped>
+.no-scroll::-webkit-scrollbar {
+  display: none;
+}
+</style>
diff --git a/apps/client/src/shared/ui/table/UiTableEmpty.vue b/apps/client/src/shared/ui/table/UiTableEmpty.vue
new file mode 100644
index 00000000..ea357620
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableEmpty.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import TableCell from './UiTableCell.vue'
+import TableRow from './UiTableRow.vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'table-empty-cell',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="table-empty">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/apps/client/src/shared/ui/table/UiTableHead.vue b/apps/client/src/shared/ui/table/UiTableHead.vue
new file mode 100644
index 00000000..20359f6e
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableHead.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th
+    :class="cn(
+      'table-head',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </th>
+</template>
diff --git a/apps/client/src/shared/ui/table/UiTableHeader.vue b/apps/client/src/shared/ui/table/UiTableHeader.vue
new file mode 100644
index 00000000..80e16a0c
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableHeader.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead
+    :class="cn(
+      'table-header',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </thead>
+</template>
diff --git a/apps/client/src/shared/ui/table/UiTableRoot.vue b/apps/client/src/shared/ui/table/UiTableRoot.vue
new file mode 100644
index 00000000..b7c0a875
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableRoot.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="table-wrapper">
+    <table
+      v-bind="$attrs"
+      :class="cn(
+        'table',
+        props.class,
+      )"
+    >
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/apps/client/src/shared/ui/table/UiTableRow.vue b/apps/client/src/shared/ui/table/UiTableRow.vue
new file mode 100644
index 00000000..5289c538
--- /dev/null
+++ b/apps/client/src/shared/ui/table/UiTableRow.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr
+    :class="cn(
+      'table-row',
+      props.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </tr>
+</template>
diff --git a/apps/client/src/shared/ui/table/index.ts b/apps/client/src/shared/ui/table/index.ts
new file mode 100644
index 00000000..ba90d281
--- /dev/null
+++ b/apps/client/src/shared/ui/table/index.ts
@@ -0,0 +1,9 @@
+// GLOBAL: we used all in DataTable from @/shared/ui/data-table
+export { default as UiTableBody } from './UiTableBody.vue'
+export { default as UiTableCaption } from './UiTableCaption.vue'
+export { default as UiTableCell } from './UiTableCell.vue'
+export { default as UiTableEmpty } from './UiTableEmpty.vue'
+export { default as UiTableHead } from './UiTableHead.vue'
+export { default as UiTableHeader } from './UiTableHeader.vue'
+export { default as UiTableRoot } from './UiTableRoot.vue'
+export { default as UiTableRow } from './UiTableRow.vue'
diff --git a/apps/client/src/shared/ui/tabs/UiTabs.stories.ts b/apps/client/src/shared/ui/tabs/UiTabs.stories.ts
new file mode 100644
index 00000000..6c9827a7
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/UiTabs.stories.ts
@@ -0,0 +1,44 @@
+import {
+  UiTabs,
+  UiTabsContent,
+  UiTabsList,
+  UiTabsTrigger,
+} from './index'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiTabs',
+  component: UiTabs,
+} as Meta<typeof UiTabs>
+
+const Template: StoryFn<typeof UiTabs> = args => ({
+  components: {
+    UiTabs,
+    UiTabsContent,
+    UiTabsList,
+    UiTabsTrigger,
+  },
+  setup() {
+    return { args }
+  },
+  template: `
+  <UiTabs default-value="account" class="w-[400px]">
+    <UiTabsList>
+      <UiTabsTrigger value="account">
+        Account
+      </UiTabsTrigger>
+      <UiTabsTrigger value="password">
+        Password
+      </UiTabsTrigger>
+    </UiTabsList>
+    <UiTabsContent value="account">
+      Make changes to your account here.
+    </UiTabsContent>
+    <UiTabsContent value="password">
+      Change your password here.
+    </UiTabsContent>
+  </UiTabs>
+  `,
+})
+
+export const DefaultTabs: StoryFn<typeof UiTabs> = Template.bind({})
diff --git a/apps/client/src/shared/ui/tabs/UiTabs.vue b/apps/client/src/shared/ui/tabs/UiTabs.vue
new file mode 100644
index 00000000..2fa0971f
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/UiTabs.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/apps/client/src/shared/ui/tabs/UiTabsContent.vue b/apps/client/src/shared/ui/tabs/UiTabsContent.vue
new file mode 100644
index 00000000..ebe0fab3
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/UiTabsContent.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn(
+      'tabs-content',
+      props.class,
+    )"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/apps/client/src/shared/ui/tabs/UiTabsList.vue b/apps/client/src/shared/ui/tabs/UiTabsList.vue
new file mode 100644
index 00000000..f527410d
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/UiTabsList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'tabs-list',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/apps/client/src/shared/ui/tabs/UiTabsTrigger.vue b/apps/client/src/shared/ui/tabs/UiTabsTrigger.vue
new file mode 100644
index 00000000..20016690
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/UiTabsTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'tabs-trigger',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
diff --git a/apps/client/src/shared/ui/tabs/__tests__/MockComponent.vue b/apps/client/src/shared/ui/tabs/__tests__/MockComponent.vue
new file mode 100644
index 00000000..380f2c97
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/__tests__/MockComponent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useEmitAsProps } from 'radix-vue'
+import { UiTabs, UiTabsContent, UiTabsList, UiTabsTrigger } from '..'
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+
+const { defaultValue = 'test1', ...props } = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+</script>
+
+<template>
+  <UiTabs
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+    :default-value="defaultValue"
+    class="w-[600px]"
+  >
+    <UiTabsList>
+      <UiTabsTrigger value="test1">
+        Test 1
+      </UiTabsTrigger>
+      <UiTabsTrigger value="test2">
+        Test 2
+      </UiTabsTrigger>
+    </UiTabsList>
+    <UiTabsContent value="test1">
+      test 1 content
+    </UiTabsContent>
+    <UiTabsContent value="test2">
+      test 2 content
+    </UiTabsContent>
+  </UiTabs>
+</template>
diff --git a/apps/client/src/shared/ui/tabs/__tests__/UiTabs.spec.ts b/apps/client/src/shared/ui/tabs/__tests__/UiTabs.spec.ts
new file mode 100644
index 00000000..0d64d9e4
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/__tests__/UiTabs.spec.ts
@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it } from 'vitest'
+import MockComponent from './MockComponent.vue'
+
+describe('tests for UiTabs', () => {
+  const wrapper = mount(MockComponent, {
+    props: {
+      defaultValue: 'test1',
+    },
+  })
+
+  it('should render correctly', () => {
+    expect(wrapper.html())
+  })
+
+  it('should render default content', () => {
+    expect(wrapper.find('[role=tabpanel]').exists()).toBeTruthy()
+    expect(wrapper.html()).toContain('test 1 content')
+  })
+
+  describe('should move focus to next tab', () => {
+    beforeEach(() => {
+      const trigger = wrapper.find('#radix-vue-tabs-v-0-trigger-test2')
+      trigger.trigger('keydown', { key: 'ArrowRight' })
+    })
+
+    it('should focus on next tab', () => {
+      expect(wrapper.find('[role=tabpanel]').exists()).toBeTruthy()
+      expect(wrapper.html()).toContain('Test 2')
+    })
+  })
+
+  it('should apply props correctly', async () => {
+    expect(wrapper.props().defaultValue).toBe('test1')
+    expect(wrapper.props().class).toBeUndefined()
+  })
+})
diff --git a/apps/client/src/shared/ui/tabs/index.ts b/apps/client/src/shared/ui/tabs/index.ts
new file mode 100644
index 00000000..fa70d45c
--- /dev/null
+++ b/apps/client/src/shared/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as UiTabs } from './UiTabs.vue'
+export { default as UiTabsContent } from './UiTabsContent.vue'
+export { default as UiTabsList } from './UiTabsList.vue'
+export { default as UiTabsTrigger } from './UiTabsTrigger.vue'
diff --git a/apps/client/src/shared/ui/tags-input/UiTagsInput.stories.ts b/apps/client/src/shared/ui/tags-input/UiTagsInput.stories.ts
new file mode 100644
index 00000000..0d456a30
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/UiTagsInput.stories.ts
@@ -0,0 +1,61 @@
+import {
+  UiTagsInput,
+  UiTagsInputInput,
+  UiTagsInputItem,
+  UiTagsInputItemDelete,
+  UiTagsInputItemText,
+} from '..'
+import type { Meta, StoryFn } from '@storybook/vue3'
+
+export default {
+  title: 'UiTagsInput',
+  component: UiTagsInput,
+  argTypes: {
+    modelValue: {
+      control: 'object',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+} as Meta<typeof UiTagsInput>
+
+const Template: StoryFn<typeof UiTagsInput> = (args) => {
+  return {
+    components: {
+      UiTagsInput,
+      UiTagsInputInput,
+      UiTagsInputItem,
+      UiTagsInputItemDelete,
+      UiTagsInputItemText,
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+    <UiTagsInput
+      v-bind="args"
+    >
+      <UiTagsInputItem v-for="item in modelValue" :key="item" :value="item">
+        <UiTagsInputItemText />
+        <UiTagsInputItemDelete />
+      </UiTagsInputItem>
+
+      <UiTagsInputInput placeholder="Test..." />
+    </UiTagsInput>
+    `,
+  }
+}
+
+export const DefaultTagsInput: StoryFn<typeof UiTagsInput> = Template.bind({})
+
+DefaultTagsInput.args = {
+  modelValue: ['test', 'test2'],
+}
+
+export const DisabledTagsInput: StoryFn<typeof UiTagsInput> = Template.bind({})
+
+DisabledTagsInput.args = {
+  disabled: true,
+  modelValue: ['test', 'test2'],
+}
diff --git a/apps/client/src/shared/ui/tags-input/UiTagsInput.vue b/apps/client/src/shared/ui/tags-input/UiTagsInput.vue
new file mode 100644
index 00000000..bff04c79
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/UiTagsInput.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot
+    v-bind="forwarded"
+    :class="cn(
+      'tags-input',
+      props.class,
+    )"
+  >
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/apps/client/src/shared/ui/tags-input/UiTagsInputInput.vue b/apps/client/src/shared/ui/tags-input/UiTagsInputInput.vue
new file mode 100644
index 00000000..00b2ec54
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/UiTagsInputInput.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput
+    v-bind="forwardedProps"
+    :class="cn(
+      'tags-input-input',
+      props.class,
+    )"
+  />
+</template>
diff --git a/apps/client/src/shared/ui/tags-input/UiTagsInputItem.vue b/apps/client/src/shared/ui/tags-input/UiTagsInputItem.vue
new file mode 100644
index 00000000..b5349521
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/UiTagsInputItem.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'tags-input-item',
+      props.class,
+    )"
+  >
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/apps/client/src/shared/ui/tags-input/UiTagsInputItemDelete.vue b/apps/client/src/shared/ui/tags-input/UiTagsInputItemDelete.vue
new file mode 100644
index 00000000..cda10ddc
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/UiTagsInputItemDelete.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete
+    v-bind="forwardedProps"
+    :class="cn(
+      'tags-input-item-delete',
+      props.class,
+    )"
+  >
+    <slot>
+      <div
+        i-lucide-x
+        class="tags-input-item-delete-icon"
+      />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/apps/client/src/shared/ui/tags-input/UiTagsInputItemText.vue b/apps/client/src/shared/ui/tags-input/UiTagsInputItemText.vue
new file mode 100644
index 00000000..3260cbbf
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/UiTagsInputItemText.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from 'vue'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/shared/libs/shadcn/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText
+    v-bind="forwardedProps"
+    :class="cn(
+      'tags-input-item-text',
+      props.class,
+    )"
+  />
+</template>
diff --git a/apps/client/src/shared/ui/tags-input/__tests__/MockComponent.vue b/apps/client/src/shared/ui/tags-input/__tests__/MockComponent.vue
new file mode 100644
index 00000000..768b35e3
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/__tests__/MockComponent.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { type TagsInputRootEmits, type TagsInputRootProps, useEmitAsProps } from 'radix-vue'
+import { reactiveOmit } from '@vueuse/core'
+import { UiTagsInput, UiTagsInputInput, UiTagsInputItem, UiTagsInputItemDelete, UiTagsInputItemText } from '..'
+
+const props = defineProps<TagsInputRootProps>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const reactiveOmitProps = reactiveOmit(props, 'modelValue')
+
+const modelValue = ref<string[]>([])
+</script>
+
+<template>
+  <UiTagsInput
+    v-model="modelValue"
+    v-bind="{ ...reactiveOmitProps, ...useEmitAsProps(emits) }"
+  >
+    <UiTagsInputItem v-for="item in modelValue" :key="item" :value="item">
+      <UiTagsInputItemText />
+      <UiTagsInputItemDelete />
+    </UiTagsInputItem>
+
+    <UiTagsInputInput placeholder="Test..." />
+  </UiTagsInput>
+</template>
diff --git a/apps/client/src/shared/ui/tags-input/__tests__/UiTagsInput.spec.ts b/apps/client/src/shared/ui/tags-input/__tests__/UiTagsInput.spec.ts
new file mode 100644
index 00000000..09486e8e
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/__tests__/UiTagsInput.spec.ts
@@ -0,0 +1,44 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MockComponent from './MockComponent.vue'
+import type { DOMWrapper } from '@vue/test-utils'
+
+describe('tests for UiTagsInput', () => {
+  const wrapper = mount(MockComponent, {
+    props: {
+      modelValue: ['value1', 'value2'],
+    },
+  })
+
+  let input: DOMWrapper<HTMLInputElement>
+  let tags: DOMWrapper<HTMLElement>[]
+
+  const addTag = async (text: string) => {
+    await input.setValue(text)
+    await input.trigger('keydown.enter')
+    tags = wrapper.findAll('[data-radix-vue-collection-item]')
+  }
+
+  it('should render correctly', () => {
+    expect(wrapper.html())
+  })
+
+  it('should emit the correct event on input', async () => {
+    wrapper.vm.$emit('update:modelValue', ['1', '2', '3'])
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([['1', '2', '3']])
+  })
+
+  describe('add tag', () => {
+    beforeEach(async () => {
+      input = wrapper.find('input')
+      input.element.focus()
+      await addTag('test1')
+      await addTag('test2')
+    })
+
+    it('should add a new tag', () => {
+      expect(wrapper.html()).contains('test1')
+      expect(wrapper.html()).contains('test2')
+    })
+  })
+})
diff --git a/apps/client/src/shared/ui/tags-input/index.ts b/apps/client/src/shared/ui/tags-input/index.ts
new file mode 100644
index 00000000..623d5449
--- /dev/null
+++ b/apps/client/src/shared/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as UiTagsInput } from './UiTagsInput.vue'
+export { default as UiTagsInputInput } from './UiTagsInputInput.vue'
+export { default as UiTagsInputItem } from './UiTagsInputItem.vue'
+export { default as UiTagsInputItemDelete } from './UiTagsInputItemDelete.vue'
+export { default as UiTagsInputItemText } from './UiTagsInputItemText.vue'
diff --git a/apps/client/src/store/index.ts b/apps/client/src/store/index.ts
new file mode 100644
index 00000000..c569ef7f
--- /dev/null
+++ b/apps/client/src/store/index.ts
@@ -0,0 +1,3 @@
+import { createPinia } from 'pinia'
+
+export const pinia = createPinia()
diff --git a/apps/client/src/styles/_base.css b/apps/client/src/styles/_base.css
new file mode 100644
index 00000000..898bad19
--- /dev/null
+++ b/apps/client/src/styles/_base.css
@@ -0,0 +1,55 @@
+*,
+*::before,
+*::after {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  min-height: 100%;
+  text-size-adjust: 100%;
+}
+
+.dark {
+  background-color: var(--custom-jenda-dark);
+  color-scheme: dark;
+}
+
+body {
+  height: 100%;
+  width: 100%;
+  font-family: Geist, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior: none;
+}
+
+.ui-container {
+  width: 100%;
+  max-width: 1600px;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: 20px;
+  padding-left: 20px;
+}
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition:
+    opacity 0.15s ease,
+    transform 0.15s ease;
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
diff --git a/apps/client/src/styles/_exceptions.css b/apps/client/src/styles/_exceptions.css
new file mode 100644
index 00000000..e2b43f9a
--- /dev/null
+++ b/apps/client/src/styles/_exceptions.css
@@ -0,0 +1,60 @@
+.v-popper__inner {
+  font-size: 12px;
+  padding: 4px 10px !important;
+}
+
+.v-popper__arrow-container {
+  display: none !important;
+}
+
+canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* tr,
+thead {
+  clip-path: xywh(0 0 100% 100% round 0.5em);
+} */
+
+.splitpanes--vertical .splitpanes__pane {
+  transition: none;
+}
+
+.splitpanes--vertical > .splitpanes__splitter {
+  display: none;
+}
+
+[data-sonner-toaster][data-theme='dark'] {
+  --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(--custom-jenda-dark);
+}
+
+.vue-ui-kpi {
+  background: transparent !important;
+}
+
+.vue-ui-kpi-value {
+  @apply text-blue-500;
+}
+
+.vue-data-ui-fulscreen--off {
+  circle {
+    fill: #fff !important;
+  }
+}
+
+html.dark {
+  .v-popper__inner {
+    @apply bg-neutral-100 text-neutral-800;
+  }
+
+  .vue-data-ui-fulscreen--off {
+    circle {
+      fill: #313131 !important;
+    }
+  }
+}
diff --git a/apps/client/src/styles/_families.css b/apps/client/src/styles/_families.css
new file mode 100644
index 00000000..18b211ac
--- /dev/null
+++ b/apps/client/src/styles/_families.css
@@ -0,0 +1,3 @@
+* {
+  font-family: Geist, sans-serif;
+}
diff --git a/apps/client/src/styles/_fonts.css b/apps/client/src/styles/_fonts.css
new file mode 100644
index 00000000..0defed18
--- /dev/null
+++ b/apps/client/src/styles/_fonts.css
@@ -0,0 +1,6 @@
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-display: swap;
+  src: url('../shared/assets/fonts/geist/GeistVariableVF.woff2') format('woff2');
+}
diff --git a/apps/client/src/styles/_properties.css b/apps/client/src/styles/_properties.css
new file mode 100644
index 00000000..b93a57c5
--- /dev/null
+++ b/apps/client/src/styles/_properties.css
@@ -0,0 +1,8 @@
+:root {
+  /* priorities */
+  --low-color: 34, 197, 94;
+  --medium-color: 245, 158, 11;
+  --high-color: 239, 68, 68;
+
+  --custom-jenda-dark: rgb(38 38 38);
+}
diff --git a/apps/client/src/styles/_scrollbar.css b/apps/client/src/styles/_scrollbar.css
new file mode 100644
index 00000000..8ff69384
--- /dev/null
+++ b/apps/client/src/styles/_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/apps/client/src/styles/index.css b/apps/client/src/styles/index.css
new file mode 100644
index 00000000..d3c98fc9
--- /dev/null
+++ b/apps/client/src/styles/index.css
@@ -0,0 +1,6 @@
+@import './_properties';
+@import './_fonts';
+@import './_base';
+@import './_exceptions';
+@import './_families';
+@import './_scrollbar';
diff --git a/apps/client/tsconfig.app.json b/apps/client/tsconfig.app.json
new file mode 100644
index 00000000..35da1403
--- /dev/null
+++ b/apps/client/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "moduleResolution": "Bundler",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./typed-router.d.ts"],
+  "exclude": ["src/**/__tests__/*"]
+}
diff --git a/apps/client/tsconfig.json b/apps/client/tsconfig.json
new file mode 100644
index 00000000..e44f9a16
--- /dev/null
+++ b/apps/client/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
+    }
+  ],
+  "files": []
+}
diff --git a/apps/client/tsconfig.node.json b/apps/client/tsconfig.node.json
new file mode 100644
index 00000000..0fa71eed
--- /dev/null
+++ b/apps/client/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"],
+    "noEmit": true
+  },
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ]
+}
diff --git a/apps/client/tsconfig.vitest.json b/apps/client/tsconfig.vitest.json
new file mode 100644
index 00000000..79721714
--- /dev/null
+++ b/apps/client/tsconfig.vitest.json
@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  },
+  "exclude": []
+}
diff --git a/apps/client/typed-router.d.ts b/apps/client/typed-router.d.ts
new file mode 100644
index 00000000..e064a3ae
--- /dev/null
+++ b/apps/client/typed-router.d.ts
@@ -0,0 +1,38 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    'welcome': RouteRecordInfo<'welcome', '/', Record<never, never>, Record<never, never>>,
+    'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
+    'analytics': RouteRecordInfo<'analytics', '/analytics', Record<never, never>, Record<never, never>>,
+    'sign-in': RouteRecordInfo<'sign-in', '/auth/sign-in', Record<never, never>, Record<never, never>>,
+    'sign-in-workspace': RouteRecordInfo<'sign-in-workspace', '/auth/sign-in/workspace', Record<never, never>, Record<never, never>>,
+    'sign-up': RouteRecordInfo<'sign-up', '/auth/sign-up', Record<never, never>, Record<never, never>>,
+    'confirm': RouteRecordInfo<'confirm', '/auth/sign-up/confirm', Record<never, never>, Record<never, never>>,
+    'sign-up-workspace': RouteRecordInfo<'sign-up-workspace', '/auth/sign-up/workspace', Record<never, never>, Record<never, never>>,
+    'boards': RouteRecordInfo<'boards', '/boards', Record<never, never>, Record<never, never>>,
+    'board-id': RouteRecordInfo<'board-id', '/boards/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
+    'boards-new': RouteRecordInfo<'boards-new', '/boards/new', Record<never, never>, Record<never, never>>,
+    'members': RouteRecordInfo<'members', '/members', Record<never, never>, Record<never, never>>,
+    'notes': RouteRecordInfo<'notes', '/notes', Record<never, never>, Record<never, never>>,
+    'settings': RouteRecordInfo<'settings', '/settings', Record<never, never>, Record<never, never>>,
+    'templates': RouteRecordInfo<'templates', '/templates', Record<never, never>, Record<never, never>>,
+    'community': RouteRecordInfo<'community', '/templates/community', Record<never, never>, Record<never, never>>,
+  }
+}
diff --git a/apps/client/uno.config.ts b/apps/client/uno.config.ts
new file mode 100644
index 00000000..54b88819
--- /dev/null
+++ b/apps/client/uno.config.ts
@@ -0,0 +1,88 @@
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetUno,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import presetAnimations from 'unocss-preset-animations'
+import { presetShadcn } from 'unocss-preset-shadcn'
+import { FileSystemIconLoader } from '@iconify/utils/lib/loader/node-loaders'
+import presetJendaUI from './src/shared/libs/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),
+        huge: () => import('@iconify-json/hugeicons/icons.json').then(i => i.default),
+        jenda: FileSystemIconLoader('./src/shared/assets/icons/custom-jenda'),
+      },
+    }),
+    presetJendaUI(),
+    presetTypography(),
+  ],
+  shortcuts: [
+    {
+      'auth-page': 'h-full flex w-68% max-[1440px]:w-80% max-[1100px]:!w-full',
+      'auth-slot-container': 'relative h-full w-full mx-auto px-2rem dark:bg-#1c1c1c',
+      'form-container': 'relative flex w-460px flex-col gap-2 max-[520px]:!w-full max-[1100px]:!w-460px max-[1200px]:w-360px',
+    },
+    {
+      '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/dialog.ts',
+    './src/shared/ui/_shortcuts/pin-input.ts',
+    './src/shared/ui/_shortcuts/form.ts',
+    './src/shared/ui/_shortcuts/popover.ts',
+    './src/shared/ui/_shortcuts/picker.ts',
+    './src/shared/ui/_shortcuts/command.ts',
+    './src/shared/ui/_shortcuts/tabs.ts',
+    './src/shared/ui/_shortcuts/pagination.ts',
+    './src/shared/ui/_shortcuts/checkbox.ts',
+    './src/shared/ui/_shortcuts/table.ts',
+    './src/shared/ui/_shortcuts/tags-input.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/apps/client/vercel.json b/apps/client/vercel.json
new file mode 100644
index 00000000..3a48e56b
--- /dev/null
+++ b/apps/client/vercel.json
@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}
diff --git a/apps/client/vite.config.ts b/apps/client/vite.config.ts
new file mode 100644
index 00000000..e82a921b
--- /dev/null
+++ b/apps/client/vite.config.ts
@@ -0,0 +1,61 @@
+import { fileURLToPath, URL } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { getNuxtStyleRouteName } from 'unplugin-vue-router-extend'
+import UnpluginVueRouterExtend from 'unplugin-vue-router-extend/vite'
+import UnpluginVueRouter from 'unplugin-vue-router/vite'
+import { defineConfig } from 'vite'
+import vueDevTools from 'vite-plugin-vue-devtools'
+// import Sonda from 'sonda/vite'
+import type { TreeNode } from 'unplugin-vue-router'
+
+const routeMap = new Map<string, TreeNode>()
+export default defineConfig({
+  plugins: [
+    UnpluginVueRouter({
+      getRouteName: (node: TreeNode) => {
+        if (!routeMap.size) {
+          for (const [key, value] of (node.parent as any)?.map)
+            routeMap.set(key, value)
+        }
+        return getNuxtStyleRouteName(node)
+      },
+      routesFolder: [
+        './src/modules/auth/pages',
+        './src/modules/members/pages',
+        './src/modules/boards/pages',
+        './src/modules/workspace/pages',
+        './src/modules/notes/pages',
+        './src/modules/settings/pages',
+        './src/modules/templates/pages',
+        './src/modules/charts/pages',
+        './src/modules/welcome/pages',
+        './src/core/pages',
+      ],
+      dts: './typed-router.d.ts',
+    }),
+    UnpluginVueRouterExtend({
+      routeMap,
+    }),
+    vueDevTools(),
+    UnoCSS(),
+    // Sonda(),
+    vue(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+  build: {
+    // only with sonda active
+    // sourcemap: true,
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+      },
+    },
+  },
+})
diff --git a/apps/client/vitest.config.ts b/apps/client/vitest.config.ts
new file mode 100644
index 00000000..d18ade7e
--- /dev/null
+++ b/apps/client/vitest.config.ts
@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url'
+import { configDefaults, defineConfig, mergeConfig } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/**'],
+      setupFiles: ['./src/shared/libs/vitest-utils/cookiesI18n-mock.ts'],
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      css: {
+        modules: {
+          classNameStrategy: 'non-scoped',
+        },
+      },
+    },
+  }),
+)
diff --git a/apps/server/.gitkeep b/apps/server/.gitkeep
new file mode 100644
index 00000000..e69de29b