diff --git a/package-lock.json b/package-lock.json
index dadd3a1b4a6ccf8c5d69d83f2199a34f5f7977f2..9396ea86dc5e0dae0ddfb394070af6b909d8fff8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,18 +8,14 @@
       "name": "ShelfNote",
       "version": "0.0.0",
       "dependencies": {
-        "@primevue/themes": "^4.0.4",
         "@vueuse/core": "^10.11.0",
         "pinia": "^2.1.7",
-        "primeicons": "^7.0.0",
-        "primevue": "^4.0.4",
         "tailwindcss": "^3.4.7",
         "vue": "^3.4.29",
         "vue-cookies": "^1.8.4",
         "vue-router": "^4.3.3"
       },
       "devDependencies": {
-        "@primevue/auto-import-resolver": "^4.0.4",
         "@rushstack/eslint-patch": "^1.8.0",
         "@tsconfig/node20": "^20.1.4",
         "@types/node": "^20.14.5",
@@ -418,91 +414,6 @@
         "url": "https://opencollective.com/unts"
       }
     },
-    "node_modules/@primeuix/styled": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz",
-      "integrity": "sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/utils": "^0.0.5"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primeuix/utils": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz",
-      "integrity": "sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/auto-import-resolver": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.4.tgz",
-      "integrity": "sha512-rI91rugr0/A58lmDcC4m3nxKdMh2K2O6ntQd+6UT8oFYiptJVNXQLY+U4zweAoG1toMnIoqGR20FXOTA7lS7ww==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@primevue/metadata": "4.0.4"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/core": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.0.4.tgz",
-      "integrity": "sha512-xGD2hNYL4WLnkWuoxIjMIqEXiydYpFovDuCMHMWRl3yb/AFJcHpyZpUlgZ2HnJydA5ZsLS00sGsPHEoV5u2M8A==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/styled": "^0.0.5",
-        "@primeuix/utils": "^0.0.5"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0"
-      }
-    },
-    "node_modules/@primevue/icons": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.4.tgz",
-      "integrity": "sha512-eHOuO5jIv/qb3mpo3m1qpDKJxw/B8ZFpAcsKxV4uWhAXkxWo/afmykGO38PVabKc3SSai8bq1zFVXPA1w0cg9g==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/utils": "^0.0.5",
-        "@primevue/core": "4.0.4"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/metadata": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/metadata/-/metadata-4.0.4.tgz",
-      "integrity": "sha512-j1Cb6qxuKDHyT0vjlFiLjiHILN7D6xC2zIaHRcYn0XcQS27r5ianzGFIiW98OVRFTUqWAf4k0TSCrgZPawPjRA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
-    "node_modules/@primevue/themes": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.4.tgz",
-      "integrity": "sha512-eknRgSo1KQY+r7LEtb/jERhVHq4/Vlu5BKBQ8/Sc/G3DBDHaeJTDqYHWWoTxdaTJkXbC2pJMKFaJ/Vs7LuoIOw==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/styled": "^0.0.5"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
     "node_modules/@rollup/pluginutils": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -2965,26 +2876,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/primeicons": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
-      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
-    },
-    "node_modules/primevue": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.0.4.tgz",
-      "integrity": "sha512-1moEddbczJ1+yEyfeYQk3xOQB64iCjjM//f+HSXs6YrKVVC0QjPFx9XPNXrr2JjHlp+6D7EpPZtsmcrfA9jWkA==",
-      "license": "MIT",
-      "dependencies": {
-        "@primeuix/styled": "^0.0.5",
-        "@primeuix/utils": "^0.0.5",
-        "@primevue/core": "4.0.4",
-        "@primevue/icons": "4.0.4"
-      },
-      "engines": {
-        "node": ">=12.11.0"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index f799f2ee7287decb4b543d9d53b0841a28c7b1b4..2ff40ecddc163a4d2ddb3a6aa753b1b30386b848 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,9 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@primevue/themes": "^4.0.4",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "pinia": "^2.1.7",
-    "primeicons": "^7.0.0",
-    "primevue": "^4.0.4",
     "universal-cookie": "^7",
     "uuid": "^10.0.0",
     "vue": "^3.4.29",
@@ -26,7 +23,6 @@
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
-    "@primevue/auto-import-resolver": "^4.0.4",
     "@rushstack/eslint-patch": "^1.8.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.14.5",
diff --git a/src/app/App.vue b/src/app/App.vue
index 32edf7fef04d12555900c8e58e0a298bfd3deda0..8b88d7d37ac82b2fe0338742f2be5490218dba92 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import 'primeicons/primeicons.css';
 import cookies from '@/app/plugins/Cookie';
 onMounted(() => {
   const home_uuidFromLS = cookies.get('home_uuid');
diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index b7736c78700718a292db44a8f0684192d644af85..700c0c50d2a455e96f37e462491da7a6554d1e29 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -137,6 +137,7 @@
 }
 body {
   min-height: 100vh;
+  overflow-x: hidden;
 }
 #app {
   min-height: 100vh;
@@ -154,12 +155,15 @@ body {
   padding: 0;
   margin: 0;
   border: none;
+  box-sizing: border-box;
 }
 
 *,
 *::before,
 *::after {
   box-sizing: border-box;
+  user-select: none;
+  color: white;
 }
 
 /* Links */
@@ -238,6 +242,10 @@ label {
 legend {
   display: block;
 }
+input[type=file], /* FF, IE7+, chrome (except button) */
+input[type=file]::-webkit-file-upload-button {
+  cursor: pointer;
+}
 ::-webkit-scrollbar {
   width: 10px;
 }
@@ -258,3 +266,20 @@ legend {
 ::-webkit-scrollbar-thumb:hover {
   background: #0033ff;
 }
+.bounce-enter-active {
+  animation: bounce-in 0.5s;
+}
+.bounce-leave-active {
+  animation: bounce-in 0.5s reverse;
+}
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 7120db426a9908774994570677fe37bd8ba7f97c..4b32cae1cea132f61b42d754f17dcce82c192498 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -9,48 +9,63 @@ declare module 'vue' {
   export interface GlobalComponents {
     App: typeof import('./App.vue')['default']
     AuthorizationForm: typeof import('./../modules/authorization/AuthorizationForm.vue')['default']
-    Avatar: typeof import('primevue/avatar')['default']
-    BaseDivider: typeof import('./../shared/BaseDivider.vue')['default']
     BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
     BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
-    Button: typeof import('primevue/button')['default']
+    Button: typeof import('./../shared/ui/Button.vue')['default']
+    CloseCircle: typeof import('./../shared/icons/CloseCircle.vue')['default']
     CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
     CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
     DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']
-    Dialog: typeof import('primevue/dialog')['default']
-    Divider: typeof import('primevue/divider')['default']
+    Divider: typeof import('./../shared/ui/Divider.vue')['default']
     DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
-    DividerMenu: typeof import('./../modules/entities/menu/DividerMenu.vue')['default']
+    DividerMenu: typeof import('./../modules/entities/settings/DividerMenu.vue')['default']
+    DividerSettings: typeof import('./../components/entities/settings/DividerSettings.vue')['default']
     DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']
-    Drawer: typeof import('primevue/drawer')['default']
+    Drawer: typeof import('./../shared/ui/Drawer.vue')['default']
     EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
     EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
+    EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
     EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
+    ExitIcon: typeof import('./../shared/icons/ExitIcon.vue')['default']
+    HamburgerIcon: typeof import('./../shared/icons/HamburgerIcon.vue')['default']
+    HomeIcon: typeof import('./../shared/icons/HomeIcon.vue')['default']
+    HorizontalLineIcon: typeof import('./../shared/icons/HorizontalLineIcon.vue')['default']
+    ImageIcon: typeof import('./../shared/icons/ImageIcon.vue')['default']
     ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
-    ImageMenu: typeof import('./../modules/entities/menu/ImageMenu.vue')['default']
+    ImageMenu: typeof import('./../components/entities/settings/ImageMenu.vue')['default']
     ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
+    ImageSettings: typeof import('./../components/entities/settings/ImageSettings.vue')['default']
     ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
-    MenuHeader: typeof import('./../modules/MenuHeader.vue')['default']
-    page: typeof import('./../modules/Home page.vue')['default']
+    MenuDial: typeof import('./../shared/ui/MenuDial.vue')['default']
+    MenuHeader: typeof import('./../components/MenuHeader.vue')['default']
+    Modal: typeof import('./../shared/ui/Modal.vue')['default']
+    NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
     PageHeader: typeof import('./../modules/PageHeader.vue')['default']
+    PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default']
+    ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default']
+    PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
     SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
+    SidebarMenuContent: typeof import('./../modules/SidebarMenuContent.vue')['default']
+    SidebarMenuHeader: typeof import('./../modules/SidebarMenuHeader.vue')['default']
     SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
     SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
     SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
-    SpeedDial: typeof import('primevue/speeddial')['default']
+    TableIcon: typeof import('./../shared/icons/TableIcon.vue')['default']
     TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
     TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
     TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
-    TextMenu: typeof import('./../modules/entities/menu/TextMenu.vue')['default']
     TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
+    TextSettings: typeof import('./../components/entities/settings/TextSettings.vue')['default']
     TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
-    ToggleSwitch: typeof import('primevue/toggleswitch')['default']
-    Tree: typeof import('primevue/tree')['default']
-    UserInfoHeaderWithSettings: typeof import('./../components/UserInfoHeaderWithSettings.vue')['default']
+    ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']
+    TrashIcon: typeof import('./../shared/icons/TrashIcon.vue')['default']
+    Tree: typeof import('./../shared/ui/Tree.vue')['default']
+    VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
   }
 }
diff --git a/src/app/helpers/images.ts b/src/app/helpers/images.ts
index a32ed3dabf23f16d76570cf923b6b0d41604f32f..df8889732a52ee6392ea610cbc4b8c83df855c19 100644
--- a/src/app/helpers/images.ts
+++ b/src/app/helpers/images.ts
@@ -2,6 +2,12 @@ import type { IEntity } from '@/app/interfaces/environment';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import type { IImage } from '@/app/interfaces/entities';
 import { useWebsocketStore } from '@/app/stores/websocket';
+import { useInterfaceStore } from '@/app/stores/interface';
+
+export const setDefaultPageBackground = () => {
+  const interfaceStore = useInterfaceStore();
+  interfaceStore.resetPageBackground();
+};
 
 export const addUrlsToImageEntities = (entities: IEntity[]) => {
   const filesWebsocketStore = useFilesWebsocketStore();
@@ -50,3 +56,74 @@ export const cropImage = async (newUrl: string, entity: IImage) => {
   };
   websocketStore.sendData(data);
 };
+
+export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
+  const elementsLabelsToRemove = [];
+  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+  if (initialImageWidth <= 400 || initialImageHeight <= 400) {
+    elementsLabelsToRemove.push('x0.25');
+    if (
+      initialImageWidth <= 200 ||
+      initialImageHeight <= 200 ||
+      (initialImageWidth >= 1600 && entity.text_position)
+    ) {
+      elementsLabelsToRemove.push('x0.5');
+      if (
+        initialImageWidth <= 95 ||
+        initialImageHeight <= 95 ||
+        (initialImageWidth >= 1066 && entity.text_position)
+      ) {
+        elementsLabelsToRemove.push('x0.75');
+      }
+    }
+  }
+  if (
+    (initialImageWidth >= 800 && entity.text_position) ||
+    entity.image_width < initialImageWidth
+  ) {
+    elementsLabelsToRemove.push('x1');
+  }
+  return elementsLabelsToRemove;
+};
+
+export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
+  const elementsLabelsToRemove = [];
+  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+  if (
+    (initialImageWidth >= 800 && entity.text_position) ||
+    entity.image_width > initialImageWidth
+  ) {
+    elementsLabelsToRemove.push('x1');
+  }
+  if (
+    initialImageWidth >= 960 ||
+    initialImageHeight >= 560 ||
+    (initialImageWidth >= 640 && entity.text_position)
+  ) {
+    elementsLabelsToRemove.push('x1.25');
+    if (
+      initialImageWidth >= 800 ||
+      initialImageHeight >= 467 ||
+      (initialImageWidth >= 533 && entity.text_position)
+    ) {
+      elementsLabelsToRemove.push('x1.5');
+      if (
+        initialImageWidth >= 685 ||
+        initialImageHeight >= 400 ||
+        (initialImageWidth >= 457 && entity.text_position)
+      ) {
+        elementsLabelsToRemove.push('x1.75');
+        if (
+          initialImageWidth >= 600 ||
+          initialImageHeight >= 350 ||
+          (initialImageWidth >= 400 && entity.text_position)
+        ) {
+          elementsLabelsToRemove.push('x2');
+        }
+      }
+    }
+  }
+  return elementsLabelsToRemove;
+};
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index d007a1ec7f57f99c62e4c77562cf2d652ef5675d..e626cbb69dab9032afa4e1e695e7958776cfc1b8 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -1,16 +1,11 @@
 import { useInterfaceStore } from '@/app/stores/interface';
 import { useDataStore } from '@/app/stores/data';
 import { useWebsocketStore } from '@/app/stores/websocket';
-import type { IEntity } from '@/app/interfaces/environment';
+import type { IEntity, TTheme } from '@/app/interfaces/environment';
 import { checkIsImage } from '@/app/helpers/images';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
-import type { IImage } from '@/app/interfaces/entities';
 import cookies from '@/app/plugins/Cookie';
 
-export const setDefaultPageBackground = () => {
-  const interfaceStore = useInterfaceStore();
-  interfaceStore.resetPageBackground();
-};
 export const fetchForEntities = (page_uuid: string) => {
   const dataStore = useDataStore();
   const interfaceStore = useInterfaceStore();
@@ -86,73 +81,41 @@ export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down'
   websocketStore.sendData(data);
 };
 
-export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
-  const elementsLabelsToRemove = [];
-  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
-  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
-  if (initialImageWidth <= 400 || initialImageHeight <= 400) {
-    elementsLabelsToRemove.push('x0.25');
-    if (
-      initialImageWidth <= 200 ||
-      initialImageHeight <= 200 ||
-      (initialImageWidth >= 1600 && entity.text_position)
-    ) {
-      elementsLabelsToRemove.push('x0.5');
-      if (
-        initialImageWidth <= 95 ||
-        initialImageHeight <= 95 ||
-        (initialImageWidth >= 1066 && entity.text_position)
-      ) {
-        elementsLabelsToRemove.push('x0.75');
-      }
-    }
-  }
-  if (
-    (initialImageWidth >= 800 && entity.text_position) ||
-    entity.image_width < initialImageWidth
-  ) {
-    elementsLabelsToRemove.push('x1');
-  }
-  return elementsLabelsToRemove;
-};
-
-export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
-  const elementsLabelsToRemove = [];
-  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
-  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
-  if (
-    (initialImageWidth >= 800 && entity.text_position) ||
-    entity.image_width > initialImageWidth
-  ) {
-    elementsLabelsToRemove.push('x1');
-  }
-  if (
-    initialImageWidth >= 960 ||
-    initialImageHeight >= 560 ||
-    (initialImageWidth >= 640 && entity.text_position)
-  ) {
-    elementsLabelsToRemove.push('x1.25');
-    if (
-      initialImageWidth >= 800 ||
-      initialImageHeight >= 467 ||
-      (initialImageWidth >= 533 && entity.text_position)
-    ) {
-      elementsLabelsToRemove.push('x1.5');
-      if (
-        initialImageWidth >= 685 ||
-        initialImageHeight >= 400 ||
-        (initialImageWidth >= 457 && entity.text_position)
-      ) {
-        elementsLabelsToRemove.push('x1.75');
-        if (
-          initialImageWidth >= 600 ||
-          initialImageHeight >= 350 ||
-          (initialImageWidth >= 400 && entity.text_position)
-        ) {
-          elementsLabelsToRemove.push('x2');
-        }
-      }
-    }
+export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {
+  if (!theme) return '#ffffff';
+  switch (theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
   }
-  return elementsLabelsToRemove;
+  return '#ffffff';
 };
diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts
index 0abd79679ffbcf2ef738afa120fb189ffdfbb6bb..f468b7fa11391eaaac9496658e7857ee2d21cc43 100644
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@@ -37,11 +37,20 @@ export interface IEntity {
   }[];
 }
 
-export type TColors =
-  | 'green-blue'
-  | 'red-yellow'
-  | 'darkBlue-pink-orange'
-  | 'pink-lightBlue-green'
-  | 'pink-red-orange'
-  | 'pink-purple'
-  | 'purple-pink';
+export type TTheme =
+  | 'white'
+  | 'slate'
+  | 'blue'
+  | 'sky'
+  | 'teal'
+  | 'lime'
+  | 'green'
+  | 'yellow'
+  | 'orange'
+  | 'pink'
+  | 'fuchsia'
+  | 'purple'
+  | 'indigo'
+  | 'rose'
+  | 'red'
+  | 'black';
diff --git a/src/app/main.ts b/src/app/main.ts
index dd3a5c7f283145f238d02269ec0f64910415cc5f..73720b0d7ace45b6253f4c78a4cf1db80e2a75fe 100644
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -2,40 +2,8 @@ import '@/app/assets/main.css';
 
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
-import PrimeVue from 'primevue/config';
 import App from './App.vue';
 import router from './router';
-import Aura from '@primevue/themes/aura';
-import { definePreset } from '@primevue/themes';
 
 const app = createApp(App);
-const theme = 'sky';
-const MyPreset = definePreset(Aura, {
-  semantic: {
-    primary: {
-      50: `{${theme}.50}`,
-      100: `{${theme}.100}`,
-      200: `{${theme}.200}`,
-      300: `{${theme}.300}`,
-      400: `{${theme}.400}`,
-      500: `{${theme}.500}`,
-      600: `{${theme}.600}`,
-      700: `{${theme}.700}`,
-      800: `{${theme}.800}`,
-      900: `{${theme}.900}`,
-      950: `{${theme}.950}`
-    }
-  }
-});
-app
-  .use(PrimeVue, {
-    theme: {
-      preset: MyPreset,
-      options: {
-        // darkModeSelector: '.darkModeToggle'
-      }
-    }
-  })
-  .use(createPinia())
-  .use(router)
-  .mount('#app');
+app.use(createPinia()).use(router).mount('#app');
diff --git a/src/app/stores/data.ts b/src/app/stores/data.ts
index 6d30c22730be2cc3eac5aadd8ac6335d983d48d2..ea60bfd0633ba7bb8abce53a970a0f6c191030e8 100644
--- a/src/app/stores/data.ts
+++ b/src/app/stores/data.ts
@@ -5,48 +5,30 @@ import cookies from '@/app/plugins/Cookie';
 export const useDataStore = defineStore('dataStore', () => {
   const sheets = ref([
     {
-      key: '0',
-      label: 'Личная жизнь',
-      data: '/0a49c3f4-57d2-4c82-be20-c7bab0abd623',
-      icon: 'pi pi-fw pi-inbox',
-      type: 'url',
+      text: 'Личная жизнь',
+      link: '/0a49c3f4-57d2-4c82-be20-c7bab0abd623',
       children: [
         {
-          key: '0-0',
-          label: 'Девушка',
-          data: '/f22dabd2-029b-46ae-8580-a8291449a051',
-          icon: 'pi pi-fw pi-cog',
-          type: 'url',
+          text: 'Девушка',
+          link: '/f22dabd2-029b-46ae-8580-a8291449a051',
           children: [
             {
-              key: '0-0-0',
-              label: 'Заморочки и проблемы и всё-всё-всё моей любимой девушки',
-              icon: 'pi pi-fw pi-file',
-              data: '/83ad3c89-64a2-428d-995c-8008d40cec8a',
-              type: 'url'
+              text: 'Заморочки и проблемы и всё-всё-всё моей любимой девушки',
+              link: '/83ad3c89-64a2-428d-995c-8008d40cec8a'
             },
             {
-              key: '0-0-1',
-              label: 'Любимые цветы девушки',
-              icon: 'pi pi-fw pi-file',
-              data: '/(uuid of sheet)',
-              type: 'url'
+              text: 'Любимые цветы девушки',
+              link: '/(uuid of sheet)'
             }
           ]
         },
         {
-          key: '0-1',
-          label: 'Работа',
-          data: '/81d8bc92-57cb-4ab2-89c2-63304bd0e5fb',
-          icon: 'pi pi-fw pi-home',
-          type: 'url',
+          text: 'Работа',
+          link: '/81d8bc92-57cb-4ab2-89c2-63304bd0e5fb',
           children: [
             {
-              key: '0-1-0',
-              label: 'Pet-projects',
-              icon: 'pi pi-fw pi-file',
-              data: '/(uuid of sheet)',
-              type: 'url'
+              text: 'Pet-projects',
+              link: '/(uuid of sheet)'
             }
           ]
         }
diff --git a/src/app/stores/interface.ts b/src/app/stores/interface.ts
index c12fa1566aaf8e83ff7443de7e2352f7c5c7f451..34f2f4aa9298b4416fccd1790a98f3d11cdddc27 100644
--- a/src/app/stores/interface.ts
+++ b/src/app/stores/interface.ts
@@ -4,6 +4,7 @@ import { useWebsocketStore } from '@/app/stores/websocket';
 export const useInterfaceStore = defineStore('interfaceStore', () => {
   const websocketStore = useWebsocketStore();
 
+  const isDarkMode = ref<boolean>(true);
   const defaultPageBackground = ref<string>(
     'https://t3.ftcdn.net/jpg/05/01/28/98/360_F_501289843_4ITbthNCydFQGgJmoZe4IQKchItBubqZ.jpg'
   );
@@ -44,6 +45,7 @@ export const useInterfaceStore = defineStore('interfaceStore', () => {
     pageBackground.value = url;
   }
   return {
+    isDarkMode,
     pageBackground,
     defaultPageBackground,
     isFetchedForBackground,
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index c52ea6e5281b778fa8722f91efb0c7eeea1ee533..a96c3f6180fb6bd8c63ad19d1a4ffe498513d800 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -3,6 +3,7 @@ import { useFileDialog, useWindowSize } from '@vueuse/core';
 import { useAuthorizationStore } from '@/app/stores/authorization';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import { useDataStore } from '@/app/stores/data';
+import cookies from '@/app/plugins/Cookie';
 
 const emit = defineEmits(['createEntity']);
 
@@ -12,6 +13,9 @@ const { open: uploadFile, onChange } = useFileDialog({
 });
 const authorizationStore = useAuthorizationStore();
 const dataStore = useDataStore();
+
+const themeColor: string = cookies.get('favorite_color');
+const isMenu = ref(false);
 const userNickName = computed(() => authorizationStore.userNickName);
 const entitiesCount = computed(() => dataStore.entities.length);
 
@@ -58,8 +62,9 @@ onChange((files) => {
 const speedDialItems = ref([
   {
     label: 'Divider',
-    icon: 'pi pi-pause',
-    command: () => {
+    textStyle: 'bold',
+    theme: 'blue',
+    onClick: () => {
       emit('createEntity', {
         entity_type: 'divider',
         entity_order: entitiesCount.value + 1,
@@ -70,8 +75,9 @@ const speedDialItems = ref([
   },
   {
     label: 'Paragraph',
-    icon: 'pi pi-pencil',
-    command: () => {
+    textStyle: 'bold',
+    theme: 'green',
+    onClick: () => {
       emit('createEntity', {
         entity_type: 'paragraph',
         entity_order: entitiesCount.value + 1,
@@ -84,13 +90,15 @@ const speedDialItems = ref([
   },
   {
     label: 'Image',
-    icon: 'pi pi-image',
-    command: () => uploadFile()
+    textStyle: 'bold',
+    theme: 'orange',
+    onClick: () => uploadFile()
   },
   {
     label: 'Table',
-    icon: 'pi pi-table',
-    command: () => {
+    textStyle: 'bold',
+    theme: 'red',
+    onClick: () => {
       emit('createEntity', {
         entity_type: 'table',
         entity_order: entitiesCount.value + 1,
@@ -115,36 +123,20 @@ const speedDialItems = ref([
 </script>
 
 <template>
-  <SpeedDial
-    :model="speedDialItems"
-    direction="right"
-    :button-props="{ severity: 'primary', rounded: true }"
-    style="position: absolute; left: 5%; top: 0"
-  >
-    <template #item="{ item, toggleCallback }">
-      <div
-        class="flex flex-col items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer"
-        @click="toggleCallback"
-      >
-        <span v-show="item.label !== 'Divider'" :class="item.icon" />
-        <svg
-          v-show="item.label === 'Divider'"
-          fill="#fff"
-          width="20px"
-          height="20px"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
-          />
-        </svg>
-        <span>
-          {{ item.label }}
-        </span>
-      </div>
+  <MenuDial v-model:isActive="isMenu" :items="speedDialItems" size="extraLarge" :theme="themeColor">
+    <template #1IconAfter>
+      <HorizontalLineIcon color="white" size="25" />
+    </template>
+    <template #2IconAfter>
+      <ParagraphIcon color="white" size="25" />
+    </template>
+    <template #3IconAfter>
+      <ImageIcon color="white" size="25" />
+    </template>
+    <template #4IconAfter>
+      <TableIcon color="white" size="30" />
     </template>
-  </SpeedDial>
+  </MenuDial>
 </template>
 
 <style scoped></style>
diff --git a/src/components/PageMenuButton.vue b/src/components/PageMenuButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..bd289f831e169b8a1616b991cffea34591937b45
--- /dev/null
+++ b/src/components/PageMenuButton.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const emit = defineEmits(['openMenu']);
+</script>
+
+<template>
+  <div class="fixed top-0 left-0 z-50">
+    <button
+      class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md flex flex-col items-center justify-center gap-1.5"
+      @click.prevent="emit('openMenu')"
+    >
+      <span>Menu</span>
+      <HamburgerIcon color="white" size="30" />
+    </button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/entities/image/ImageSizeMenu.vue b/src/components/entities/image/ImageSizeMenu.vue
index 7a42aef6c64da638afa95ee51d1c0403898d2f15..e6a085833247560b99835549cee88f4fde4c87bf 100644
--- a/src/components/entities/image/ImageSizeMenu.vue
+++ b/src/components/entities/image/ImageSizeMenu.vue
@@ -3,7 +3,7 @@ import type { IImage } from '@/app/interfaces/entities';
 import {
   getImageSpeedDialSizeBiggerLabelsToRemove,
   getImageSpeedDialSizeSmallerLabelsToRemove
-} from '@/app/helpers';
+} from '@/app/helpers/images';
 
 interface Props {
   entityData: IImage;
diff --git a/src/modules/entities/menu/DividerMenu.vue b/src/components/entities/settings/DividerSettings.vue
similarity index 100%
rename from src/modules/entities/menu/DividerMenu.vue
rename to src/components/entities/settings/DividerSettings.vue
diff --git a/src/components/entities/settings/EntityPositionSettings.vue b/src/components/entities/settings/EntityPositionSettings.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4bf2eb3def33f27cab975f6e7f3740030a0d14e3
--- /dev/null
+++ b/src/components/entities/settings/EntityPositionSettings.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { changeEntitiesOrder } from '@/app/helpers';
+import cookies from '@/app/plugins/Cookie';
+
+interface Props {
+  entityUuid: string;
+  entityIndex: number;
+  entitiesLength: number;
+}
+const props = defineProps<Props>();
+
+const isMenu = ref(false);
+const themeColor: string = cookies.get('favorite_color');
+const menuItems = computed(() => {
+  const state = [];
+  if (props.entityIndex !== 0) {
+    state.push({
+      label: 'Up',
+      theme: 'black',
+      onClick: () => changeEntitiesOrder(props.entityUuid, 'up')
+    });
+  }
+  if (props.entityIndex !== props.entitiesLength - 1) {
+    state.push({
+      label: 'Down',
+      theme: 'black',
+      onClick: () => changeEntitiesOrder(props.entityUuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div class="settings absolute right-2 top-0 transition-all select-none">
+    <MenuDial
+      v-model:isActive="isMenu"
+      :items="menuItems"
+      :theme="themeColor"
+      size="extraLarge"
+      direction="left"
+      ><template #buttonIcon>
+        <VerticalArrowsIcon
+          :color="themeColor === 'white' ? 'black' : 'white'"
+          :size="30"
+        /> </template
+    ></MenuDial>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/menu/ImageMenu.vue b/src/components/entities/settings/ImageSettings.vue
similarity index 100%
rename from src/modules/entities/menu/ImageMenu.vue
rename to src/components/entities/settings/ImageSettings.vue
diff --git a/src/components/entities/settings/TextSettings.vue b/src/components/entities/settings/TextSettings.vue
new file mode 100644
index 0000000000000000000000000000000000000000..99845110f8719a1a0880b900ee82013c41938773
--- /dev/null
+++ b/src/components/entities/settings/TextSettings.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { convertThemeToColorWhiteDefault, editEntity } from '@/app/helpers';
+import { useVModel } from '@vueuse/core';
+import { useDataStore } from '@/app/stores/data';
+import type { IParagraph } from '@/app/interfaces/entities';
+import type { IEntity } from '@/app/interfaces/environment';
+import cookies from '@/app/plugins/Cookie';
+
+interface Props {
+  entityData: IParagraph;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entityData = useVModel(props, 'entityData', emit);
+const isModal = ref<boolean>(false);
+
+const addTitle = () => {
+  editEntity({ ...entityData.value, title: 'Title', entity_title_position: 'center' });
+  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
+};
+const removeTitle = () => {
+  const newState = { ...entityData.value };
+  newState.title = null;
+  editEntity({ ...newState });
+  entityData.value = newState;
+};
+const editPosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_position = position;
+  editEntity({ ...entityData.value, entity_position: position });
+};
+const editTitlePosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_title_position = position;
+  editEntity({ ...entityData.value, entity_title_position: position });
+};
+const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
+  entityData.value.font_size = newSize;
+  editEntity({ ...entityData.value, font_size: newSize });
+};
+const editParagraphWidth = (widthMode: 'full' | 'half') => {
+  entityData.value.paragraph_size = widthMode;
+  editEntity({ ...entityData.value, paragraph_size: widthMode });
+};
+const themeColor = convertThemeToColorWhiteDefault(cookies.get('favorite_color'));
+</script>
+
+<template>
+  <button
+    :style="`background-color: ${themeColor}`"
+    class="settings absolute left-2 top-0 transition-all select-none size-12 flex justify-center items-center rounded-full hover:brightness-75 cursor-pointer"
+    @click.prevent="isModal = true"
+  >
+    <SettingsIcon color="white" size="25" />
+  </button>
+  <Modal v-model:isVisible="isModal" theme="black"
+    ><template #header>Edit paragraph</template>
+    <div>
+      <select id="" name="textSize">
+        <option></option>
+      </select></div
+  ></Modal>
+  <!--  <div class="speedDial absolute left-2 top-0 transition-all select-none">-->
+  <!--    <TextStateMenu-->
+  <!--      :entityData="entityData"-->
+  <!--      @deleteEntity="deleteEntity"-->
+  <!--      @addTitle="addTitle"-->
+  <!--      @removeTitle="removeTitle"-->
+  <!--    />-->
+  <!--  </div>-->
+  <!--  <div class="speedDial h-12 absolute left-2 top-0 translate-y-full transition-all select-none">-->
+  <!--    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />-->
+  <!--  </div>-->
+  <!--  <div class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none">-->
+  <!--    <TextPositionMenu-->
+  <!--      :entityData="entityData"-->
+  <!--      @editPosition="editPosition"-->
+  <!--      @editTitlePosition="editTitlePosition"-->
+  <!--      @editParagraphWidth="editParagraphWidth"-->
+  <!--    />-->
+  <!--  </div>-->
+</template>
+
+<style scoped></style>
diff --git a/src/components/entities/text/TextStateMenu.vue b/src/components/entities/text/TextStateMenu.vue
index 343501a387faca0f4359daedd70d538ae96788ba..961fad600aad952d3eddf8be5110ebc392f49e83 100644
--- a/src/components/entities/text/TextStateMenu.vue
+++ b/src/components/entities/text/TextStateMenu.vue
@@ -33,36 +33,12 @@ const speedDialState = computed(() => {
   });
   return state;
 });
+const isMenu = ref(false);
 </script>
 
 <template>
   <div class="relative z-40">
-    <SpeedDial :model="speedDialState" direction="right" pt:root:class="speedDialRoot size-12">
-      <template #button="{ toggleCallback }">
-        <button
-          class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
-          @click="toggleCallback"
-        >
-          <i class="pi pi-pen-to-square"></i>
-        </button>
-      </template>
-      <template #item="{ item, toggleCallback }">
-        <div
-          :class="[
-            'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
-            {
-              'text-red-400 font-semibold': item.icon.includes('trash')
-            }
-          ]"
-          @click="toggleCallback"
-        >
-          <span :class="item.icon" />
-          <span class="text-center">
-            {{ item.label }}
-          </span>
-        </div>
-      </template>
-    </SpeedDial>
+    <MenuDial v-model:isActive="isMenu" :items="speedDialState" size="large"></MenuDial>
   </div>
 </template>
 
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/BaseSidebarMenu.vue
deleted file mode 100644
index b9fd5f83bc1801e420d672730cc82bbac118700e..0000000000000000000000000000000000000000
--- a/src/modules/BaseSidebarMenu.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-import { useDataStore } from '@/app/stores/data';
-
-const route = useRoute();
-const dataStore = useDataStore();
-const emit = defineEmits(['closeMenu']);
-
-const sheets = ref();
-const expandedKeys = ref({});
-
-const expandSheet = (sheet) => {
-  if (sheet.children && sheet.children.length) {
-    expandedKeys.value[sheet.key] = true;
-
-    for (let child of sheet.children) {
-      expandSheet(child);
-    }
-  }
-};
-const expandAll = () => {
-  for (let sheet of sheets.value) {
-    expandSheet(sheet);
-  }
-  expandedKeys.value = { ...expandedKeys.value };
-};
-
-onMounted(() => {
-  sheets.value = dataStore.sheets;
-  expandAll();
-});
-</script>
-
-<template>
-  <div class="flex flex-col h-full p-4">
-    <MenuHeader @closeMenu="emit('closeMenu')" />
-    <Divider />
-    <nav>
-      <h3 class="text-xl">Menu</h3>
-      <div style="margin-left: 58px" class="mt-4 -mb-2 select-none font-bold">
-        <a v-if="route.path !== '/'" href="/"
-          ><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</a
-        >
-        <span v-else><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</span>
-      </div>
-      <Tree
-        v-model:expandedKeys="expandedKeys"
-        :value="sheets"
-        pt:root:class="pl-0"
-        pt:sheetLabel:class="text-white"
-      >
-        <template #url="slotProps">
-          <a
-            :href="slotProps.node.data"
-            :class="[
-              'block',
-              {
-                'bg-sky-900 p-2 ml-0 -m-2 rounded-md': route.path === slotProps.node.data
-              }
-            ]"
-            >{{ slotProps.node.label }}</a
-          >
-        </template>
-      </Tree>
-    </nav>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/CropImageModal.vue b/src/modules/CropImageModal.vue
index cfbf78c681e2e2bcc0bb58cd8ef0482d3501e2e0..1e4c5eb1d3536b35b4925adf25a7f3a81b3b0ad8 100644
--- a/src/modules/CropImageModal.vue
+++ b/src/modules/CropImageModal.vue
@@ -90,10 +90,15 @@ const submitForm = () => {
 
 <template>
   <div>
-    <Dialog
-      v-model:visible="isVisible"
-      :draggable="false"
+    <!--    <Dialog-->
+    <!--      v-model:visible="isVisible"-->
+    <!--      :draggable="false"-->
+    <!--      :style="`width: ${modalWidth}%; position: relative`"-->
+    <!--    >-->
+    <Modal
+      v-model:isVisible="isVisible"
       :style="`width: ${modalWidth}%; position: relative`"
+      theme="black"
     >
       <template #header>
         <div class="mx-auto select-none">
@@ -128,7 +133,8 @@ const submitForm = () => {
           @change="onCropperChange"
         ></Cropper>
       </div>
-    </Dialog>
+    </Modal>
+    <!--    </Dialog>-->
   </div>
 </template>
 
diff --git a/src/modules/MenuHeader.vue b/src/modules/MenuHeader.vue
deleted file mode 100644
index 9b94a4dee4f7689819a4ec069e963350b76ba6c3..0000000000000000000000000000000000000000
--- a/src/modules/MenuHeader.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useAuthorizationStore } from '@/app/stores/authorization';
-
-const emit = defineEmits(['closeMenu']);
-const authorizationStore = useAuthorizationStore();
-const userNickName = computed(() => authorizationStore.userNickName);
-
-const logout = () => {
-  authorizationStore.logout();
-};
-</script>
-
-<template>
-  <section class="flex justify-between items-center mb-4">
-    <LogoAndLabel />
-    <Button
-      severity="danger"
-      icon="pi pi-times"
-      rounded
-      outlined
-      @click="emit('closeMenu')"
-    ></Button>
-  </section>
-  <section class="flex items-center justify-between">
-    <div>
-      <p class="text-xl w-48 overflow-ellipsis overflow-hidden text-nowrap">@{{ userNickName }}</p>
-    </div>
-    <a
-      href="/settings"
-      class="pi pi-cog ml-auto mr-1 p-2 hover:cursor-pointer"
-      style="font-size: 2rem"
-    ></a>
-    <button @click.prevent="logout">
-      <i class="pi pi-sign-out text-red-500 p-2" style="font-size: 1.5rem"></i>
-    </button>
-  </section>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/PageBackgroundMenu.vue b/src/modules/PageBackgroundMenu.vue
index c7c0be0c813dc3f1dcbd481de8ce27d2e616560f..d120564e8c4a0aa3b14889ffae1344f73ff4f10a 100644
--- a/src/modules/PageBackgroundMenu.vue
+++ b/src/modules/PageBackgroundMenu.vue
@@ -7,7 +7,7 @@ const emit = defineEmits(['uploadFile', 'setDefaultBackground']);
 </script>
 
 <template>
-  <section class="changeImageBlock absolute top-2 right-2 transition-all">
+  <section class="changeImageBlock absolute top-2 right-6 transition-all">
     <div
       class="bg-black p-2 mb-1 rounded-md hover:text-gray-300 transition-all select-none cursor-pointer"
     >
diff --git a/src/modules/PageHeader.vue b/src/modules/PageHeader.vue
index 967c7adf36dfa05e734aa7c448a60bd4f90389d4..b0e49566f70b0d993e4ece76e2b179d4e7809d52 100644
--- a/src/modules/PageHeader.vue
+++ b/src/modules/PageHeader.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
+import cookies from '@/app/plugins/Cookie';
+import type { TTheme } from '@/app/interfaces/environment';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
 
 interface Props {
   title: string;
@@ -8,6 +11,7 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['update:isEditMode']);
 const isEditMode = useVModel(props, 'isEditMode', emit);
+const themeColor = cookies.get('favorite_color');
 </script>
 
 <template>
@@ -18,7 +22,7 @@ const isEditMode = useVModel(props, 'isEditMode', emit);
       @click.prevent="isEditMode = !isEditMode"
     >
       <span class="font-medium select-none">Edit mode</span>
-      <ToggleSwitch v-model="isEditMode" />
+      <ToggleSwitch :isActive="isEditMode" :theme="themeColor" />
     </button>
   </header>
 </template>
diff --git a/src/modules/SidebarMenuContent.vue b/src/modules/SidebarMenuContent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50088ad58d3f3207acafbfc4e180963465410ec2
--- /dev/null
+++ b/src/modules/SidebarMenuContent.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { useDataStore } from '@/app/stores/data';
+import { useAuthorizationStore } from '@/app/stores/authorization';
+import HomeIcon from '@/shared/icons/HomeIcon.vue';
+
+const authorizationStore = useAuthorizationStore();
+
+const route = useRoute();
+const dataStore = useDataStore();
+const userNickName = computed(() => authorizationStore.userNickName);
+
+const logout = () => {
+  authorizationStore.logout();
+};
+const sheets = ref();
+
+onMounted(() => {
+  sheets.value = dataStore.sheets;
+});
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <section class="flex items-center justify-between">
+      <div>
+        <p class="text-xl w-48 overflow-ellipsis overflow-hidden text-nowrap">
+          @{{ userNickName }}
+        </p>
+      </div>
+      <a
+        href="/settings"
+        class="pi pi-cog ml-auto mr-1 p-2 hover:cursor-pointer"
+        style="font-size: 2rem"
+      ></a>
+      <SettingsIcon
+        class="p-2 cursor-pointer hover:brightness-75 transition-all"
+        color="white"
+        size="50"
+      />
+      <button @click.prevent="logout">
+        <ExitIcon color="#f00" class="hover:brightness-75 transition-all" />
+      </button>
+    </section>
+    <Divider class="mt-4" />
+    <nav class="mt-4">
+      <h3 class="text-xl">Menu</h3>
+      <div class="mt-4 -mb-2 ml-4 select-none font-bold">
+        <a v-if="route.path !== '/'" href="/" class="text-lg flex gap-4"
+          ><HomeIcon color="white" size="20" />Главное меню</a
+        >
+        <span v-else><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</span>
+      </div>
+      <Tree :expand="true" theme="black" :items="sheets">
+        <template #1IconBefore>
+          <HamburgerIcon color="white" size="20" />
+        </template>
+        <template #1-2IconAfter>
+          <DottedIcon color="white" size="20" />
+        </template>
+        <template #1-1IconBefore>
+          <ParagraphIcon color="white" size="20" />
+        </template>
+        <template #1-1-2IconBefore>
+          <DottedIcon color="white" size="20" />
+        </template>
+        <template #1-2-1IconBefore>
+          <ImageIcon color="white" size="20" />
+        </template>
+      </Tree>
+    </nav>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/SidebarMenuHeader.vue b/src/modules/SidebarMenuHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b2e8700bb93f794ed5b1a7a7fdb9a60a87d37a2b
--- /dev/null
+++ b/src/modules/SidebarMenuHeader.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <section class="flex justify-between items-center mb-4">
+    <LogoAndLabel />
+  </section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
index cd1ee2a6fda3dcdb07f430cc754680236d89b6cc..9ca6c0fcae51bbac8187c12ec040f792db965217 100644
--- a/src/modules/entities/DividerItem.vue
+++ b/src/modules/entities/DividerItem.vue
@@ -10,8 +10,9 @@ defineProps<Props>();
 
 <template>
   <section class="entityContainer relative px-16 py-6">
-    <BaseDivider :type="entityData.divider_type" :height="entityData.divider_height" />
-    <DividerMenu v-if="isEditMode" :entityData="entityData" />
+    <Divider :type="entityData.divider_type" :height="entityData.divider_height" />
+    <DividerSettings v-if="isEditMode" :entityData="entityData" />
+    <EntityPositionSettings :entityUuid="entityData.entity_uuid" />
   </section>
 </template>
 
diff --git a/src/modules/entities/EntitiesList.vue b/src/modules/entities/EntitiesList.vue
index a537c47e60458a9ba89e3b3a8343cf405ad3e43a..fca0fc14e545e8978a5d55dfafdea9a8f282e4b3 100644
--- a/src/modules/entities/EntitiesList.vue
+++ b/src/modules/entities/EntitiesList.vue
@@ -20,9 +20,11 @@ const createEntity = (entity: IEntity) => {
     :entity="entitiesItem"
     :isEditMode="isEditMode"
   />
-  <div class="relative mt-2">
-    <CreateEntityMenu v-if="isEditMode" @createEntity="createEntity" />
-    <div v-else style="height: 68px"></div>
+  <div class="my-4" style="margin-left: 64px">
+    <Transition name="bounce">
+      <CreateEntityMenu v-if="isEditMode" @createEntity="createEntity" />
+    </Transition>
+    <div v-if="!isEditMode" style="height: 50px"></div>
   </div>
 </template>
 
diff --git a/src/modules/entities/EntityItem.vue b/src/modules/entities/EntityItem.vue
index d43a07392dc193c865c9e83b20f772fd930bde1b..efbe165202721b88b6a3e5516856b304ae7cd9c1 100644
--- a/src/modules/entities/EntityItem.vue
+++ b/src/modules/entities/EntityItem.vue
@@ -15,7 +15,7 @@ const entity = useVModel(props, 'entity', emit);
   <div>
     <DividerItem
       v-if="entity.entity_type === 'divider'"
-      v-model:entityData="entity as IDivider"
+      :entityData="entity as IDivider"
       :isEditMode="isEditMode"
     />
     <TextItem
@@ -25,7 +25,7 @@ const entity = useVModel(props, 'entity', emit);
     />
     <ImageItem
       v-if="entity.entity_type === 'image'"
-      v-model:entityData="entity as IImage"
+      :entityData="entity as IImage"
       :isEditMode="isEditMode"
     />
   </div>
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 1d5fb07c2a3621795e9287a8cfd061727b9a1257..34303dfcba73abd9747f98dd8f41b8d6e5f6fe2f 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -118,14 +118,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
         v-model:entityData="entityData"
         @openCropImageModal="openCropImageModal"
       />
-      <div
-        v-if="!entityData?.title && entityData.image_height < 137"
-        class="aggregateHigh h-0 transition-all"
-      ></div>
-      <div
-        v-if="!entityData?.title && entityData.image_height >= 137 && entityData.image_height < 167"
-        class="aggregateShort h-0 transition-all"
-      ></div>
+      <EntityPositionSettings :entityUuid="entityData.entity_uuid" />
     </div>
   </section>
 </template>
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index d14a5a9a432921a3304f9c4585e60b87d392246f..a01172c36e8c38f675936221e6087f9bda82351c 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -2,6 +2,8 @@
 import { useElementSize, useTextareaAutosize } from '@vueuse/core';
 import type { IParagraph } from '@/app/interfaces/entities';
 import { editEntity } from '@/app/helpers';
+import { useDataStore } from '@/app/stores/data';
+import type { IEntity } from '@/app/interfaces/environment';
 
 interface Props {
   entityData: IParagraph;
@@ -10,6 +12,13 @@ interface Props {
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
+const dataStore = useDataStore();
+const entities = computed(() => dataStore.entities);
+const entityIndex = computed(() =>
+  entities.value.findIndex((entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid)
+);
+const entitiesLength = computed(() => entities.value.length);
+
 const editTitle = () => {
   editEntity({ ...entityData.value, title: entityData.value.title });
 };
@@ -18,7 +27,6 @@ const editText = () => {
 };
 
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
-const { height: textareaHeight } = useElementSize(textarea);
 </script>
 
 <template>
@@ -64,34 +72,22 @@ const { height: textareaHeight } = useElementSize(textarea);
           @input="triggerResize"
         />
       </div>
-      <div
-        v-if="!entityData?.title && textareaHeight < 87 && isEditMode"
-        class="aggregateHigh transition-all h-0"
-      ></div>
-      <div
-        v-if="
-          (!entityData?.title && textareaHeight >= 87 && textareaHeight < 132 && isEditMode) ||
-          (entityData?.title && textareaHeight < 65 && isEditMode)
-        "
-        class="aggregateMedium transition-all h-0"
-      ></div>
-      <div
-        v-if="
-          (!entityData?.title && textareaHeight >= 132 && textareaHeight < 167 && isEditMode) ||
-          (entityData?.title && textareaHeight >= 65 && textareaHeight < 100 && isEditMode)
-        "
-        class="aggregateShort transition-all h-0"
-      ></div>
-      <TextMenu v-if="isEditMode" v-model:entityData="entityData" />
+      <TextSettings v-if="isEditMode" v-model:entityData="entityData" />
+      <EntityPositionSettings
+        v-if="isEditMode && entitiesLength > 1"
+        :entityUuid="entityData.entity_uuid"
+        :entityIndex="entityIndex"
+        :entitiesLength="entitiesLength"
+      />
     </div>
   </section>
 </template>
 
 <style>
-.entityContainer .speedDial {
+.entityContainer .settings {
   opacity: 0;
 }
-.entityContainer:hover .speedDial {
+.entityContainer:hover .settings {
   opacity: 100;
 }
 .entityContainer:hover .aggregateHigh {
diff --git a/src/modules/entities/menu/TextMenu.vue b/src/modules/entities/menu/TextMenu.vue
deleted file mode 100644
index 91eaf4c1b9d7b42ea1002d027fdfb03a623e266e..0000000000000000000000000000000000000000
--- a/src/modules/entities/menu/TextMenu.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { deleteEntity, editEntity } from '@/app/helpers';
-import type { IParagraph } from '@/app/interfaces/entities';
-import { useVModel } from '@vueuse/core';
-
-interface Props {
-  entityData: IParagraph;
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:entityData']);
-const entityData = useVModel(props, 'entityData', emit);
-
-const addTitle = () => {
-  editEntity({ ...entityData.value, title: 'Title', entity_title_position: 'center' });
-  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
-};
-const removeTitle = () => {
-  const newState = { ...entityData.value };
-  newState.title = null;
-  editEntity({ ...newState });
-  entityData.value = newState;
-};
-const editPosition = (position: 'left' | 'center' | 'right') => {
-  entityData.value.entity_position = position;
-  editEntity({ ...entityData.value, entity_position: position });
-};
-const editTitlePosition = (position: 'left' | 'center' | 'right') => {
-  entityData.value.entity_title_position = position;
-  editEntity({ ...entityData.value, entity_title_position: position });
-};
-const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
-  entityData.value.font_size = newSize;
-  editEntity({ ...entityData.value, font_size: newSize });
-};
-const editParagraphWidth = (widthMode: 'full' | 'half') => {
-  entityData.value.paragraph_size = widthMode;
-  editEntity({ ...entityData.value, paragraph_size: widthMode });
-};
-</script>
-
-<template>
-  <div class="speedDial absolute left-2 top-0 transition-all select-none">
-    <TextStateMenu
-      :entityData="entityData"
-      @deleteEntity="deleteEntity"
-      @addTitle="addTitle"
-      @removeTitle="removeTitle"
-    />
-  </div>
-  <div class="speedDial h-12 absolute left-2 top-0 translate-y-full transition-all select-none">
-    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
-  </div>
-  <div class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none">
-    <TextPositionMenu
-      :entityData="entityData"
-      @editPosition="editPosition"
-      @editTitlePosition="editTitlePosition"
-      @editParagraphWidth="editParagraphWidth"
-    />
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/output.css b/src/output.css
index a5cbb16faa500abb9dfb4432b129ba1b47ee7c32..1060844815523306785f02dc71d8fbad7a2140c4 100644
--- a/src/output.css
+++ b/src/output.css
@@ -656,6 +656,10 @@ video {
   top: 1.5rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -676,10 +680,6 @@ video {
   order: 3;
 }
 
-.-m-2 {
-  margin: -0.5rem;
-}
-
 .-my-2 {
   margin-top: -0.5rem;
   margin-bottom: -0.5rem;
@@ -690,6 +690,11 @@ video {
   margin-right: auto;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -714,8 +719,8 @@ video {
   margin-bottom: 2rem;
 }
 
-.ml-0 {
-  margin-left: 0px;
+.ml-4 {
+  margin-left: 1rem;
 }
 
 .ml-auto {
@@ -734,10 +739,6 @@ video {
   margin-right: 1rem;
 }
 
-.mt-2 {
-  margin-top: 0.5rem;
-}
-
 .mt-4 {
   margin-top: 1rem;
 }
@@ -762,6 +763,10 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .size-10 {
   width: 2.5rem;
   height: 2.5rem;
@@ -782,10 +787,6 @@ video {
   height: 2rem;
 }
 
-.h-0 {
-  height: 0px;
-}
-
 .h-12 {
   height: 3rem;
 }
@@ -923,6 +924,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-1\.5 {
+  gap: 0.375rem;
+}
+
 .gap-10 {
   gap: 2.5rem;
 }
@@ -1079,11 +1084,6 @@ video {
   background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
-.bg-sky-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(12 74 110 / var(--tw-bg-opacity));
-}
-
 .bg-violet-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(139 92 246 / var(--tw-bg-opacity));
@@ -1178,10 +1178,6 @@ video {
   padding-bottom: 1.5rem;
 }
 
-.pl-0 {
-  padding-left: 0px;
-}
-
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1247,6 +1243,10 @@ video {
   font-weight: 600;
 }
 
+.italic {
+  font-style: italic;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -1265,11 +1265,6 @@ video {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1291,6 +1286,14 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1301,11 +1304,29 @@ video {
   transition-duration: 300ms;
 }
 
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+}
+
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
 
+.hover\:bg-slate-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
+.hover\:brightness-75:hover {
+  --tw-brightness: brightness(.75);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
\ No newline at end of file
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index e96dd054b749ef4b0ab6a0b3bc7735db2e4ab278..c1b6d0b169a834ffa6fc5ea3081f4dc1151826b9 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -5,9 +5,9 @@ import { useAuthorizationStore } from '@/app/stores/authorization';
 import { useWebsocketStore } from '@/app/stores/websocket';
 import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces';
-import { createEntity, fetchForEntities, setDefaultPageBackground } from '@/app/helpers';
-import TelegramSection from '@/modules/TelegramSection.vue';
+import { createEntity, fetchForEntities } from '@/app/helpers';
 import cookies from '@/app/plugins/Cookie';
+import { setDefaultPageBackground } from '@/app/helpers/images';
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
@@ -19,6 +19,7 @@ const entities = computed(() => dataStore.entities);
 const backgroundUrl = computed<string>(() => interfaceStore.pageBackground);
 const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultPageBackground);
 const isFetchedForBackground = computed(() => interfaceStore.isFetchedForBackground);
+const isDarkMode = computed(() => interfaceStore.isDarkMode);
 // const pageTitle = computed(() => dataStore.currentPage.page_title);
 
 const isMenuVisible = ref<boolean>(false);
@@ -74,24 +75,15 @@ const saveImage = (finalImageUrl: string) => {
   interfaceStore.editPageBackground(finalImageUrl);
   isModalUploadFile.value = false;
 };
+const openMenu = () => (isMenuVisible.value = true);
 </script>
 
 <template>
   <PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
-  <div class="fixed top-0 left-0 z-50">
-    <Button
-      label="Menu"
-      iconPos="top"
-      icon="pi pi-bars"
-      severity="contrast"
-      size="small"
-      @click.prevent="isMenuVisible = !isMenuVisible"
-    />
-  </div>
-  <Drawer v-model:visible="isMenuVisible">
-    <template #container="{ closeCallback }">
-      <BaseSidebarMenu class="relative z-50" @closeMenu="closeCallback" />
-    </template>
+  <PageMenuButton @openMenu="openMenu" />
+  <Drawer v-model:isVisible="isMenuVisible" theme="black">
+    <template #header><SidebarMenuHeader /></template>
+    <SidebarMenuContent class="relative z-50" />
   </Drawer>
   <TelegramSection />
   <CropImageModal
@@ -99,7 +91,11 @@ const saveImage = (finalImageUrl: string) => {
     v-model:imageInfo="backgroundImageInfo"
     @saveImage="saveImage"
   />
-  <main id="pageContainer" class="flex flex-col">
+  <main
+    id="pageContainer"
+    class="flex flex-col"
+    :style="`background-color: ${isDarkMode ? 'black' : 'light'}`"
+  >
     <article style="min-height: 200px" class="backgroundContainer relative">
       <img
         :src="backgroundUrl"
@@ -149,8 +145,4 @@ const saveImage = (finalImageUrl: string) => {
 .telegramContainer:hover > a {
   filter: brightness(0.75);
 }
-input[type=file], /* FF, IE7+, chrome (except button) */
-input[type=file]::-webkit-file-upload-button {
-  cursor: pointer;
-}
 </style>
diff --git a/src/pages/authorization/signIn.vue b/src/pages/authorization/signIn.vue
index d879ed071dd17b7080d88cc538545a7b4dfdcdf6..684b02d333dffad5a25d9c00a3cf3c058cae6957 100644
--- a/src/pages/authorization/signIn.vue
+++ b/src/pages/authorization/signIn.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
-<template></template>
+<template><div></div></template>
 
 <style scoped></style>
diff --git a/src/shared/icons/CloseCircle.vue b/src/shared/icons/CloseCircle.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e28872399a232d3bf0f10a542b95045e47abeec3
--- /dev/null
+++ b/src/shared/icons/CloseCircle.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    :fill="color ?? 'none'"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
+      :fill="color ?? '#1C274C'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/ExitIcon.vue b/src/shared/icons/ExitIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ffff72984528cf7be0f3f748cae8bc91acdef15b
--- /dev/null
+++ b/src/shared/icons/ExitIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M9.70725 2.4087C9 3.03569 9 4.18259 9 6.4764V17.5236C9 19.8174 9 20.9643 9.70725 21.5913C10.4145 22.2183 11.4955 22.0297 13.6576 21.6526L15.9864 21.2465C18.3809 20.8288 19.5781 20.62 20.2891 19.7417C21 18.8635 21 17.5933 21 15.0529V8.94711C21 6.40671 21 5.13652 20.2891 4.25826C19.5781 3.37999 18.3809 3.17118 15.9864 2.75354L13.6576 2.34736C11.4955 1.97026 10.4145 1.78171 9.70725 2.4087ZM12 10.1686C12.4142 10.1686 12.75 10.52 12.75 10.9535V13.0465C12.75 13.48 12.4142 13.8314 12 13.8314C11.5858 13.8314 11.25 13.48 11.25 13.0465V10.9535C11.25 10.52 11.5858 10.1686 12 10.1686Z"
+      :fill="color ?? '#1C274C'"
+    />
+    <path
+      d="M7.54717 4.5C5.48889 4.503 4.41599 4.54826 3.73223 5.23202C3 5.96425 3 7.14276 3 9.49979V14.4998C3 16.8568 3 18.0353 3.73223 18.7676C4.41599 19.4513 5.48889 19.4966 7.54717 19.4996C7.49985 18.8763 7.49992 18.1557 7.50001 17.3768V6.6227C7.49992 5.84388 7.49985 5.1233 7.54717 4.5Z"
+      :fill="color ?? '#1C274C'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/HamburgerIcon.vue b/src/shared/icons/HamburgerIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8563c80035ad0ab13ba405a311364d05fbc77987
--- /dev/null
+++ b/src/shared/icons/HamburgerIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+  >
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+      sketch:type="MSPage"
+    >
+      <g
+        id="Icon-Set-Filled"
+        sketch:type="MSLayerGroup"
+        transform="translate(-212.000000, -888.000000)"
+        :fill="color ?? '#000000'"
+      >
+        <path
+          id="hamburger"
+          d="M230,904 L214,904 C212.896,904 212,904.896 212,906 C212,907.104 212.896,908 214,908 L230,908 C231.104,908 232,907.104 232,906 C232,904.896 231.104,904 230,904 L230,904 Z M230,896 L214,896 C212.896,896 212,896.896 212,898 C212,899.104 212.896,900 214,900 L230,900 C231.104,900 232,899.104 232,898 C232,896.896 231.104,896 230,896 L230,896 Z M214,892 L230,892 C231.104,892 232,891.104 232,890 C232,888.896 231.104,888 230,888 L214,888 C212.896,888 212,888.896 212,890 C212,891.104 212.896,892 214,892 L214,892 Z"
+          sketch:type="MSShapeGroup"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/HomeIcon.vue b/src/shared/icons/HomeIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..50dabe08072897065fbb22dcbfe786fb10862f56
--- /dev/null
+++ b/src/shared/icons/HomeIcon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 0L0 6V8H1V15H4V10H7V15H15V8H16V6L14 4.5V1H11V2.25L8 0ZM9 10H12V13H9V10Z"
+      :fill="color ?? '#000000'"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/HorizontalLineIcon.vue b/src/shared/icons/HorizontalLineIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..59773e5c5a30487824ceae43312bb3897ee5e68a
--- /dev/null
+++ b/src/shared/icons/HorizontalLineIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :fill="color ?? '#000000'"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/ImageIcon.vue b/src/shared/icons/ImageIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..681e3b170ed04bae6a27f9755f2502ae370f2d8b
--- /dev/null
+++ b/src/shared/icons/ImageIcon.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 32 32"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+  >
+    <defs></defs>
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+      sketch:type="MSPage"
+    >
+      <g
+        id="Icon-Set"
+        sketch:type="MSLayerGroup"
+        transform="translate(-360.000000, -99.000000)"
+        :fill="color ?? '#000000'"
+      >
+        <path
+          id="image-picture"
+          d="M368,109 C366.896,109 366,108.104 366,107 C366,105.896 366.896,105 368,105 C369.104,105 370,105.896 370,107 C370,108.104 369.104,109 368,109 L368,109 Z M368,103 C365.791,103 364,104.791 364,107 C364,109.209 365.791,111 368,111 C370.209,111 372,109.209 372,107 C372,104.791 370.209,103 368,103 L368,103 Z M390,116.128 L384,110 L374.059,120.111 L370,116 L362,123.337 L362,103 C362,101.896 362.896,101 364,101 L388,101 C389.104,101 390,101.896 390,103 L390,116.128 L390,116.128 Z M390,127 C390,128.104 389.104,129 388,129 L382.832,129 L375.464,121.535 L384,112.999 L390,118.999 L390,127 L390,127 Z M364,129 C362.896,129 362,128.104 362,127 L362,126.061 L369.945,118.945 L380.001,129 L364,129 L364,129 Z M388,99 L364,99 C361.791,99 360,100.791 360,103 L360,127 C360,129.209 361.791,131 364,131 L388,131 C390.209,131 392,129.209 392,127 L392,103 C392,100.791 390.209,99 388,99 L388,99 Z"
+          sketch:type="MSShapeGroup"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/NavigationIcon.vue b/src/shared/icons/NavigationIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fcd6ccf0166ddab8d9244c90bfc387c25c2bcb71
--- /dev/null
+++ b/src/shared/icons/NavigationIcon.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 512 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <title>navigation-filled</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g id="icon" :fill="color ?? '#000000'" transform="translate(42.666667, 42.666667)">
+        <path
+          id="Combined-Shape"
+          d="M213.333333,3.55271368e-14 C331.15408,3.55271368e-14 426.666667,95.5125867 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 3.55271368e-14,331.15408 3.55271368e-14,213.333333 C3.55271368e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z M234.666667,341.333333 L192,341.333333 L192,384 L234.666667,384 L234.666667,341.333333 Z M320,106.666667 L181.333333,181.333333 L106.666667,320 L245.333333,245.333333 L320,106.666667 Z M213.333333,192 C225.115408,192 234.666667,201.551259 234.666667,213.333333 C234.666667,225.115408 225.115408,234.666667 213.333333,234.666667 C201.551259,234.666667 192,225.115408 192,213.333333 C192,201.551259 201.551259,192 213.333333,192 Z M384,192 L341.333333,192 L341.333333,234.666667 L384,234.666667 L384,192 Z M85.3333333,192 L42.6666667,192 L42.6666667,234.666667 L85.3333333,234.666667 L85.3333333,192 Z M234.666667,42.6666667 L192,42.6666667 L192,85.3333333 L234.666667,85.3333333 L234.666667,42.6666667 Z"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/ParagraphIcon.vue b/src/shared/icons/ParagraphIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8061cbe1ae4f0c99c2bc34bba650dd94aa4b37b4
--- /dev/null
+++ b/src/shared/icons/ParagraphIcon.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :fill="color ?? '#000000'"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2,12H5a1,1,0,0,0,0-2H4.635l.586-1.692H8.779L9.365,10H9a1,1,0,0,0,0,2h3a1,1,0,0,0,0-2h-.518L8.945,2.673A1,1,0,0,0,8,2H6a1,1,0,0,0-.945.673L2.518,10H2a1,1,0,0,0,0,2ZM6.712,4h.576l.8,2.308H5.913ZM23,4a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,4Zm0,6a1,1,0,0,1-1,1H15a1,1,0,0,1,0-2h7A1,1,0,0,1,23,10Zm0,5a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,15Zm0,6a1,1,0,0,1-1,1H2a1,1,0,0,1,0-2H22A1,1,0,0,1,23,21Z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/PlusIcon.vue b/src/shared/icons/PlusIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9afde0ac92569afeb69fc904d12e2addda34e45b
--- /dev/null
+++ b/src/shared/icons/PlusIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6 12H18M12 6V18"
+      :stroke="color ?? '#000000'"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/SettingsIcon.vue b/src/shared/icons/SettingsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..41b9327a7b62ede67f308e29576928c7bc5d636b
--- /dev/null
+++ b/src/shared/icons/SettingsIcon.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 30 30"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+  >
+    <g
+      id="Page-1"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+      sketch:type="MSPage"
+    >
+      <g
+        id="Icon-Set-Filled"
+        sketch:type="MSLayerGroup"
+        transform="translate(-103.000000, -362.000000)"
+        :fill="color ?? '#000000'"
+      >
+        <path
+          id="settings"
+          d="M118,382 C115.261,382 113.042,379.762 113.042,377 C113.042,374.238 115.261,372 118,372 C120.739,372 122.959,374.238 122.959,377 C122.959,379.762 120.739,382 118,382 L118,382 Z M132.008,380.536 L129.685,379.184 C129.815,378.474 129.901,377.749 129.901,377 C129.901,376.252 129.815,375.526 129.685,374.816 L132.008,373.464 C132.957,372.912 133.281,371.688 132.733,370.732 L130.75,367.268 C130.203,366.312 128.989,365.983 128.041,366.536 L125.694,367.901 C124.598,366.961 123.352,366.192 121.967,365.697 L121.967,364 C121.967,362.896 121.079,362 119.983,362 L116.017,362 C114.921,362 114.033,362.896 114.033,364 L114.033,365.697 C112.648,366.192 111.402,366.961 110.306,367.901 L107.959,366.536 C107.011,365.983 105.797,366.312 105.25,367.268 L103.267,370.732 C102.719,371.688 103.044,372.912 103.992,373.464 L106.315,374.816 C106.185,375.526 106.099,376.252 106.099,377 C106.099,377.749 106.185,378.474 106.315,379.184 L103.992,380.536 C103.044,381.088 102.719,382.312 103.267,383.268 L105.25,386.732 C105.797,387.688 107.011,388.017 107.959,387.464 L110.306,386.099 C111.402,387.039 112.648,387.809 114.033,388.303 L114.033,390 C114.033,391.104 114.921,392 116.017,392 L119.983,392 C121.079,392 121.967,391.104 121.967,390 L121.967,388.303 C123.352,387.809 124.598,387.039 125.694,386.099 L128.041,387.464 C128.989,388.017 130.203,387.688 130.75,386.732 L132.733,383.268 C133.281,382.312 132.957,381.088 132.008,380.536 L132.008,380.536 Z M118,374 C116.357,374 115.025,375.344 115.025,377 C115.025,378.657 116.357,380 118,380 C119.643,380 120.975,378.657 120.975,377 C120.975,375.344 119.643,374 118,374 L118,374 Z"
+          sketch:type="MSShapeGroup"
+        ></path>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/TableIcon.vue b/src/shared/icons/TableIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d010f47bd2fd9f1a8e6dd51365a56cbc546659d8
--- /dev/null
+++ b/src/shared/icons/TableIcon.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M3 9.5H21M3 14.5H21M8 4.5V19.5M6.2 19.5H17.8C18.9201 19.5 19.4802 19.5 19.908 19.282C20.2843 19.0903 20.5903 18.7843 20.782 18.408C21 17.9802 21 17.4201 21 16.3V7.7C21 6.5799 21 6.01984 20.782 5.59202C20.5903 5.21569 20.2843 4.90973 19.908 4.71799C19.4802 4.5 18.9201 4.5 17.8 4.5H6.2C5.0799 4.5 4.51984 4.5 4.09202 4.71799C3.71569 4.90973 3.40973 5.21569 3.21799 5.59202C3 6.01984 3 6.57989 3 7.7V16.3C3 17.4201 3 17.9802 3.21799 18.408C3.40973 18.7843 3.71569 19.0903 4.09202 19.282C4.51984 19.5 5.07989 19.5 6.2 19.5Z"
+      :stroke="color ?? '#000000'"
+      stroke-width="2"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/TrashIcon.vue b/src/shared/icons/TrashIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2a18eee55aa46c96e746a85de0979cf841238c92
--- /dev/null
+++ b/src/shared/icons/TrashIcon.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 6L17.1991 18.0129C17.129 19.065 17.0939 19.5911 16.8667 19.99C16.6666 20.3412 16.3648 20.6235 16.0011 20.7998C15.588 21 15.0607 21 14.0062 21H9.99377C8.93927 21 8.41202 21 7.99889 20.7998C7.63517 20.6235 7.33339 20.3412 7.13332 19.99C6.90607 19.5911 6.871 19.065 6.80086 18.0129L6 6M4 6H20M16 6L15.7294 5.18807C15.4671 4.40125 15.3359 4.00784 15.0927 3.71698C14.8779 3.46013 14.6021 3.26132 14.2905 3.13878C13.9376 3 13.523 3 12.6936 3H11.3064C10.477 3 10.0624 3 9.70951 3.13878C9.39792 3.26132 9.12208 3.46013 8.90729 3.71698C8.66405 4.00784 8.53292 4.40125 8.27064 5.18807L8 6M14 10V17M10 10V17"
+      :stroke="color ?? '#000000'"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/icons/VerticalArrowsIcon.vue b/src/shared/icons/VerticalArrowsIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..07ca726ed579caa03366f7e28e5b3732804c21a1
--- /dev/null
+++ b/src/shared/icons/VerticalArrowsIcon.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+interface Props {
+  color?: string;
+  size?: string | number;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <svg
+    id="Capa_1"
+    :width="`${size ?? 40}px`"
+    :height="`${size ?? 40}px`"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    viewBox="0 0 349.455 349.455"
+    xml:space="preserve"
+  >
+    <path
+      :style="`fill: ${color ?? '#231f20'}`"
+      d="M248.263,240.135c-1.407-1.407-3.314-2.197-5.304-2.197c-1.989,0-3.896,0.79-5.304,2.197
+	l-45.429,45.429l0.001-221.673l45.428,45.429c1.407,1.407,3.314,2.197,5.304,2.197c1.989,0,3.896-0.79,5.304-2.197l14.143-14.143
+	c1.406-1.406,2.196-3.314,2.196-5.303c0-1.989-0.79-3.897-2.196-5.303L180.032,2.197C178.625,0.79,176.717,0,174.728,0
+	c-1.989,0-3.896,0.79-5.304,2.197L87.049,84.573c-1.406,1.407-2.196,3.314-2.196,5.303c0,1.989,0.79,3.897,2.197,5.304
+	l14.143,14.142c1.464,1.464,3.384,2.196,5.303,2.196c1.919,0,3.839-0.732,5.304-2.197l45.429-45.43l-0.001,221.673l-45.428-45.429
+	c-1.407-1.407-3.314-2.197-5.304-2.197c-1.989,0-3.896,0.79-5.304,2.197l-14.143,14.143c-1.406,1.406-2.196,3.314-2.196,5.303
+	c0,1.989,0.79,3.897,2.196,5.303l82.374,82.374c1.465,1.464,3.385,2.197,5.304,2.197c1.919,0,3.839-0.733,5.304-2.197l82.375-82.375
+	c1.406-1.406,2.196-3.314,2.196-5.303c0-1.989-0.79-3.897-2.196-5.303L248.263,240.135z"
+    />
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/ui/Button.vue b/src/shared/ui/Button.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a0f76aa739f72475cd8c527be5a2bdcd6430113b
--- /dev/null
+++ b/src/shared/ui/Button.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  label?: string;
+  iconPos?: 'left' | 'top' | 'right' | 'bottom';
+  textStyle?: 'bold' | 'italic';
+  border?: 'white' | 'black';
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+}
+const props = defineProps<Props>();
+const themeColor = computed(() => {
+  if (!props?.theme) return '#0ea5e9';
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
+  }
+  return '#ffffff';
+});
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+</script>
+
+<template>
+  <button
+    :class="[
+      'button',
+      {
+        'flex-column': iconPos === 'top' || iconPos === 'bottom',
+        'border-black': theme === 'white' || border === 'black',
+        'border-white': border === 'white'
+      }
+    ]"
+  >
+    <span :style="`background-color: ${themeColor}`" class="background"></span>
+    <span
+      :class="[
+        'icon',
+        {
+          'order-2': iconPos === 'right' || iconPos === 'bottom'
+        }
+      ]"
+    >
+      <slot name="icon" />
+    </span>
+    <span
+      :style="`color: ${textColor}`"
+      :class="[
+        'text',
+        {
+          bold: textStyle === 'bold',
+          italic: textStyle === 'italic'
+        }
+      ]"
+      >{{ label ?? 'Button' }}</span
+    >
+  </button>
+</template>
+
+<style scoped>
+.button {
+  position: relative;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+.button:hover .background {
+  filter: brightness(90%);
+}
+.background {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  border-radius: 5px;
+  transition: filter 0.2s ease-in-out;
+}
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.text {
+  padding: 0.75rem 0.5rem;
+}
+.flex-column {
+  flex-direction: column;
+}
+.border-black {
+  border: 1px solid black;
+}
+.border-white {
+  border: 1px solid white;
+}
+.order-2 {
+  order: 2;
+}
+.bold {
+  font-weight: bold;
+}
+.italic {
+  font-style: italic;
+}
+</style>
diff --git a/src/shared/BaseDivider.vue b/src/shared/ui/Divider.vue
similarity index 77%
rename from src/shared/BaseDivider.vue
rename to src/shared/ui/Divider.vue
index 832cc941d1e4b68b72ad16ad1d135bc3cf9e920a..ed057348da341a02e7e8253d22ea8e0eac0b1761 100644
--- a/src/shared/BaseDivider.vue
+++ b/src/shared/ui/Divider.vue
@@ -7,7 +7,7 @@ defineProps<Props>();
 </script>
 
 <template>
-  <div :style="`border-bottom: ${height ?? 1}px ${type || 'solid'} #6b7280`" class="w-full"></div>
+  <div :style="`border-bottom: ${height ?? 1}px ${type ?? 'solid'} #6b7280`" class="w-full"></div>
 </template>
 
 <style scoped></style>
diff --git a/src/shared/ui/Drawer.vue b/src/shared/ui/Drawer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a3bb523be9711b76350e339644d4df66829568d
--- /dev/null
+++ b/src/shared/ui/Drawer.vue
@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
+
+interface Props {
+  isVisible: boolean;
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+}
+const props = defineProps<Props>();
+const themeColor = computed(() => {
+  if (!props?.theme) return '#0ea5e9';
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
+  }
+  return '#ffffff';
+});
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+const emit = defineEmits(['update:isVisible']);
+const isVisible = useVModel(props, 'isVisible', emit);
+</script>
+
+<template>
+  <article>
+    <section
+      :class="[
+        'drawerBackground',
+        {
+          openedDrawerBackground: isVisible
+        }
+      ]"
+      @click.prevent="isVisible = false"
+    ></section>
+    <section
+      :style="`color: ${textColor}; background-color: ${themeColor}`"
+      :class="[
+        'drawer',
+        {
+          openedDrawer: isVisible
+        }
+      ]"
+    >
+      <header class="drawerHeader">
+        <slot name="header" />
+        <button class="buttonClose" @click.prevent="isVisible = false">
+          <svg
+            width="40px"
+            height="40px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
+              :fill="textColor ?? '#1C274C'"
+            />
+          </svg>
+        </button>
+      </header>
+      <slot />
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.drawerBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -50;
+  opacity: 0;
+}
+.openedDrawerBackground {
+  z-index: 60;
+  opacity: 1;
+}
+.drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 350px;
+  height: 100vh;
+  padding: 20px;
+  transform: translateX(-100%);
+  transition: transform ease-out 0.2s;
+  border-right: 2px solid gray;
+}
+.openedDrawer {
+  transform: translateX(0);
+}
+.drawerHeader {
+  font-weight: bold;
+  font-size: 1.5rem;
+  padding-right: 50px;
+  margin-bottom: 20px;
+  min-height: 1rem;
+}
+.buttonClose {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 30px;
+}
+</style>
diff --git a/src/shared/ui/MenuDial.vue b/src/shared/ui/MenuDial.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e7b45ba983eb538e529be4e14d544c14cf59416f
--- /dev/null
+++ b/src/shared/ui/MenuDial.vue
@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import PlusIcon from '@/shared/icons/PlusIcon.vue';
+import { computed } from 'vue';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+
+interface Props {
+  isActive: boolean;
+  items: {
+    label: string;
+    theme?: string;
+    textStyle?: 'bold' | 'italic';
+    onClick?: () => void;
+  }[];
+  size?: 'large' | 'extraLarge';
+  theme?: string;
+  direction?: 'left' | 'right' | 'up' | 'down';
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isActive']);
+const isActive = useVModel(props, 'isActive', emit);
+
+const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+const elementsSize = computed(() => {
+  if (!props?.size) return 30;
+  switch (props.size) {
+    case 'large':
+      return 40;
+    case 'extraLarge':
+      return 50;
+  }
+});
+const menuListStyles = computed(() => {
+  if (!props.direction)
+    return `transform: translateY(-${elementsSize.value / 2}px) translateX(${isActive.value ? elementsSize.value + 10 : 0}px)`;
+  switch (props.direction) {
+    case 'right':
+      return `transform: translateY(-${elementsSize.value / 2}px) translateX(${isActive.value ? elementsSize.value + 10 : 0}px)`;
+    case 'left':
+      return `flex-direction: row-reverse; transform: translateY(-${elementsSize.value / 2}px) ${isActive.value ? `translateX(calc(-100% - 10px))` : ''}`;
+    case 'up':
+      return `transform: translateY(-${isActive.value ? (0.5 + props.items.length) * elementsSize.value + 10 : elementsSize.value / 2}px)`;
+    case 'down':
+      return `transform: translateY(${isActive.value ? 20 : 0}px)`;
+  }
+});
+</script>
+
+<template>
+  <section class="menuContainer">
+    <button
+      :style="`background-color: ${themeColor ?? 'white'}; width: ${elementsSize}px; height: ${elementsSize}px; transform: ${isActive ? 'rotate(135deg)' : ''};`"
+      class="menuButton"
+      @click.prevent="isActive = !isActive"
+    >
+      <slot name="buttonIcon" />
+      <PlusIcon v-if="!$slots.buttonIcon" :size="elementsSize - 10" :color="textColor" />
+    </button>
+    <ul
+      :class="[
+        'menuList',
+        {
+          menuListColumn: direction === 'up' || direction === 'down',
+          menuListOpened: isActive
+        }
+      ]"
+      :style="menuListStyles"
+    >
+      <li
+        v-for="(item, index) of items"
+        :key="item.label"
+        :style="`height: ${elementsSize}px; background-color: ${convertThemeToColorWhiteDefault(item.theme)};
+        color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}; border-color: ${!item.theme || item.theme === 'white' ? 'black' : 'white'}`"
+        class="menuElement"
+        @click.prevent="item?.onClick"
+      >
+        <slot :name="`${index + 1}IconBefore`" />
+        <p
+          style="padding: 5px"
+          :class="[
+            '',
+            {
+              bold: item.textStyle === 'bold',
+              italic: item.textStyle === 'italic'
+            }
+          ]"
+        >
+          {{ item.label }}
+        </p>
+        <slot :name="`${index + 1}IconAfter`" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<style scoped>
+.menuContainer {
+  position: relative;
+}
+.menuButton {
+  position: relative;
+  border: 2px solid black;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  transition: 0.2s ease-in-out;
+}
+.menuButton:hover {
+  filter: brightness(75%);
+}
+.menuList {
+  display: flex;
+  pointer-events: none;
+  gap: 10px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  opacity: 0;
+  transition: 0.2s ease-in-out;
+}
+.menuListColumn {
+  flex-direction: column;
+}
+.menuListOpened {
+  pointer-events: auto;
+  opacity: 1;
+}
+.menuElement {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  border: 1px solid white;
+  border-radius: 5px;
+  user-select: none;
+  cursor: pointer;
+  transition: 0.2s ease-in-out;
+}
+.menuElement:hover {
+  filter: brightness(75%);
+}
+.bold {
+  font-weight: bold;
+}
+.italic {
+  font-style: italic;
+}
+</style>
diff --git a/src/shared/ui/Modal.vue b/src/shared/ui/Modal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0ede5dd267cf05565f1a636ad86d5ac01fbaa619
--- /dev/null
+++ b/src/shared/ui/Modal.vue
@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
+
+interface Props {
+  isVisible: boolean;
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+}
+const props = defineProps<Props>();
+const themeColor = computed(() => {
+  if (!props?.theme) return '#ffffff';
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
+  }
+  return '#ffffff';
+});
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+const emit = defineEmits(['update:isVisible']);
+const isVisible = useVModel(props, 'isVisible', emit);
+</script>
+
+<template>
+  <article>
+    <section
+      :class="[
+        'modalBackground',
+        {
+          openedModalBackground: isVisible
+        }
+      ]"
+    ></section>
+    <section
+      :style="`color: ${textColor}; background-color: ${themeColor}`"
+      :class="[
+        'modal',
+        {
+          openedModal: isVisible
+        }
+      ]"
+    >
+      <header class="modalHeader">
+        <slot name="header" />
+        <div class="buttonClose" @click.prevent="isVisible = false">
+          <svg
+            width="40px"
+            height="40px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM8.96963 8.96965C9.26252 8.67676 9.73739 8.67676 10.0303 8.96965L12 10.9393L13.9696 8.96967C14.2625 8.67678 14.7374 8.67678 15.0303 8.96967C15.3232 9.26256 15.3232 9.73744 15.0303 10.0303L13.0606 12L15.0303 13.9696C15.3232 14.2625 15.3232 14.7374 15.0303 15.0303C14.7374 15.3232 14.2625 15.3232 13.9696 15.0303L12 13.0607L10.0303 15.0303C9.73742 15.3232 9.26254 15.3232 8.96965 15.0303C8.67676 14.7374 8.67676 14.2625 8.96965 13.9697L10.9393 12L8.96963 10.0303C8.67673 9.73742 8.67673 9.26254 8.96963 8.96965Z"
+              :fill="textColor ?? '#ffffff'"
+            />
+          </svg>
+        </div>
+      </header>
+      <slot />
+    </section>
+  </article>
+</template>
+
+<style scoped>
+.modalBackground {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: -50;
+  opacity: 0;
+}
+.openedModalBackground {
+  z-index: 60;
+  opacity: 1;
+}
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: -50;
+  min-width: 250px;
+  min-height: 100px;
+  padding: 20px;
+  border: 2px solid gray;
+  border-radius: 10px;
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.5);
+  transition: all ease-in-out 0.2s;
+  user-select: none;
+}
+.openedModal {
+  user-select: auto;
+  z-index: 9999;
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+.modalHeader {
+  font-weight: bold;
+  font-size: 1.5rem;
+  padding-right: 50px;
+  margin-bottom: 20px;
+  min-height: 1rem;
+}
+.buttonClose {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 30px;
+  cursor: pointer;
+}
+</style>
diff --git a/src/shared/ui/ToggleSwitch.vue b/src/shared/ui/ToggleSwitch.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2a81016abdc0b6d8619255d338b5084964cb8b3
--- /dev/null
+++ b/src/shared/ui/ToggleSwitch.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
+
+interface Props {
+  isActive: boolean;
+  size?: 'small' | 'large';
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red';
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isActive']);
+const isActive = useVModel(props, 'isActive', emit);
+
+const themeColor = computed(() => {
+  switch (props.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+  }
+  return '#0ea5e9';
+});
+const sizes = computed(() => {
+  if (!props?.size)
+    return {
+      containerWidth: 35,
+      containerHeight: 21,
+      padding: 3,
+      borderRadius: 11,
+      circleSize: 15,
+      transformXCircle: 14
+    };
+  switch (props.size) {
+    case 'small':
+      return {
+        containerWidth: 30,
+        containerHeight: 18,
+        padding: 2,
+        borderRadius: 9,
+        circleSize: 14,
+        transformXCircle: 12
+      };
+    case 'large':
+      return {
+        containerWidth: 40,
+        containerHeight: 24,
+        padding: 3,
+        borderRadius: 12,
+        circleSize: 18,
+        transformXCircle: 14
+      };
+  }
+  return '';
+});
+</script>
+
+<template>
+  <button
+    :style="`min-width: ${sizes.containerWidth}px; min-height: ${sizes.containerHeight}px; border-radius: ${sizes.borderRadius}px; padding: ${sizes.padding}px;`"
+    class="switcher"
+    @click.prevent="isActive = !isActive"
+  >
+    <span
+      :style="`background-color: ${themeColor ?? '#0ea5e9'}; border-radius: ${sizes.borderRadius}px;`"
+      :class="[
+        'activeBackground',
+        {
+          inactiveBackground: !isActive
+        }
+      ]"
+    ></span>
+    <span
+      :style="`width: ${sizes.circleSize}px; height: ${sizes.circleSize}px; transform: translateX(${isActive ? sizes.transformXCircle : 0}px);`"
+      class="switcherCircle"
+    ></span>
+  </button>
+</template>
+
+<style scoped>
+.switcher {
+  position: relative;
+  cursor: pointer;
+}
+.activeBackground {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  transition: background-color 0.2s ease-in-out;
+}
+.inactiveBackground {
+  background-color: rgba(187, 197, 204, 0.66) !important;
+  transition: background-color 0.2s ease-in-out;
+}
+.switcher:hover .inactiveBackground {
+  filter: brightness(90%);
+}
+.switcherCircle {
+  display: block;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease-in-out;
+}
+</style>
diff --git a/src/shared/ui/Tree.vue b/src/shared/ui/Tree.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2705c18508614c23a3ec1f4bdd05f1186a6d7ccb
--- /dev/null
+++ b/src/shared/ui/Tree.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+interface Props {
+  items?: {
+    text: string;
+    link?: string;
+    color?: string;
+    children?: {
+      text: string;
+      link?: string;
+      color?: string;
+      children?: {
+        text: string;
+        link?: string;
+        color?: string;
+      }[];
+    }[];
+  }[];
+  maxWidth?: number;
+  expand?: boolean;
+  theme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+}
+const props = defineProps<Props>();
+const items = computed(() => props.items);
+const themeColor = computed(() => {
+  if (!props?.theme) return '#ffffff';
+  switch (props?.theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#64748b';
+    case 'blue':
+      return '#3b82f6';
+    case 'sky':
+      return '#0ea5e9';
+    case 'teal':
+      return '#14b8a6';
+    case 'lime':
+      return '#84cc16';
+    case 'green':
+      return '#22c55e';
+    case 'yellow':
+      return '#eab308';
+    case 'orange':
+      return '#f97316';
+    case 'pink':
+      return '#ec4899';
+    case 'fuchsia':
+      return '#d946ef';
+    case 'purple':
+      return '#a855f7';
+    case 'indigo':
+      return '#6366f1';
+    case 'rose':
+      return '#f43f5e';
+    case 'red':
+      return '#ef4444';
+    case 'black':
+      return '#000000';
+  }
+  return '#ffffff';
+});
+const textColor = computed(() => {
+  if (!props.theme) return '#000000';
+  if (props.theme === 'white') return '#000000';
+  return '#ffffff';
+});
+
+const state = ref([]);
+const setInitialState = () => {
+  if (!props?.items) return;
+  for (let item of props.items) {
+    state.value.push({
+      isOpen: props?.expand ?? false,
+      text: item.text
+    });
+    if (item.children) {
+      for (let child of item.children) {
+        state.value.push({
+          isOpen: props?.expand ?? false,
+          text: child.text
+        });
+        console.log('child', child);
+        if (child.children) {
+          for (let grandChild of child.children) {
+            state.value.push({
+              isOpen: props?.expand ?? false,
+              text: grandChild.text
+            });
+          }
+        }
+      }
+    }
+  }
+};
+watch([items], () => {
+  if (items.value) setInitialState();
+});
+const toggleIsOpen = (item) =>
+  state.value.map((itemState) => {
+    if (itemState.text === item.text) itemState.isOpen = !itemState.isOpen;
+  });
+</script>
+
+<template>
+  <ul
+    :style="`background-color: ${themeColor ?? 'white'}; max-width: ${maxWidth ?? 300}px`"
+    class="tree"
+  >
+    <li
+      v-for="(item, index) of items"
+      :key="item.text"
+      :class="[
+        'item flex',
+        {
+          openItem: state.find((itemState) => itemState.text === item.text && itemState.isOpen)
+        }
+      ]"
+    >
+      <svg
+        v-if="item.children"
+        :class="[
+          'openButton',
+          {
+            openButtonOpened: state.find(
+              (itemState) => itemState.text === item.text && itemState.isOpen
+            )
+          }
+        ]"
+        width="25px"
+        height="25px"
+        viewBox="0 -0.5 28 28"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+        @click.prevent="toggleIsOpen(item)"
+      >
+        <g
+          id="Page-1"
+          stroke="none"
+          stroke-width="1"
+          fill="none"
+          fill-rule="evenodd"
+          sketch:type="MSPage"
+        >
+          <g
+            id="Icon-Set-Filled"
+            sketch:type="MSLayerGroup"
+            transform="translate(-156.000000, -623.000000)"
+            :fill="textColor ?? '#000000'"
+          >
+            <path
+              id="open"
+              d="M183,647.998 L157,647.998 C156.448,647.998 156,648.446 156,648.999 C156,649.552 156.448,650 157,650 L183,650 C183.552,650 184,649.552 184,648.999 C184,648.446 183.552,647.998 183,647.998 L183,647.998 Z M158.014,645.995 L182.018,645.995 C184.375,645.995 184.296,644.608 183.628,643.574 L171.44,624.555 C170.882,623.771 169.22,623.703 168.56,624.555 L156.372,643.574 C155.768,644.703 155.687,645.995 158.014,645.995 L158.014,645.995 Z"
+              sketch:type="MSShapeGroup"
+            ></path>
+          </g>
+        </g>
+      </svg>
+      <div
+        :class="[
+          'content',
+          {
+            openContent: state.find((itemState) => itemState.text === item.text && itemState.isOpen)
+          }
+        ]"
+      >
+        <div class="textContainer">
+          <slot :name="`${index + 1}IconBefore`" />
+          <a :href="item.link" class="text">{{ item.text }}</a>
+          <slot :name="`${index + 1}IconAfter`" />
+        </div>
+        <div class="children">
+          <div v-for="(child, indexChild) of item.children" :key="child.text" class="flex item">
+            <svg
+              v-if="child.children"
+              :class="[
+                'openButton',
+                {
+                  openButtonOpened: state.find(
+                    (itemState) => itemState.text === child.text && itemState.isOpen
+                  )
+                }
+              ]"
+              width="25px"
+              height="25px"
+              viewBox="0 -0.5 28 28"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
+              @click.prevent="toggleIsOpen(child)"
+            >
+              <g
+                id="Page-1"
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+                sketch:type="MSPage"
+              >
+                <g
+                  id="Icon-Set-Filled"
+                  sketch:type="MSLayerGroup"
+                  transform="translate(-156.000000, -623.000000)"
+                  :fill="textColor ?? '#000000'"
+                >
+                  <path
+                    id="open"
+                    d="M183,647.998 L157,647.998 C156.448,647.998 156,648.446 156,648.999 C156,649.552 156.448,650 157,650 L183,650 C183.552,650 184,649.552 184,648.999 C184,648.446 183.552,647.998 183,647.998 L183,647.998 Z M158.014,645.995 L182.018,645.995 C184.375,645.995 184.296,644.608 183.628,643.574 L171.44,624.555 C170.882,623.771 169.22,623.703 168.56,624.555 L156.372,643.574 C155.768,644.703 155.687,645.995 158.014,645.995 L158.014,645.995 Z"
+                    sketch:type="MSShapeGroup"
+                  ></path>
+                </g>
+              </g>
+            </svg>
+            <div
+              :class="[
+                'content',
+                {
+                  openContent: state.find(
+                    (itemState) => itemState.text === child.text && itemState.isOpen
+                  )
+                }
+              ]"
+            >
+              <div class="textContainer">
+                <slot :name="`${index + 1}-${indexChild + 1}IconBefore`" />
+                <a :href="child.link" class="text">{{ child.text }}</a>
+                <slot :name="`${index + 1}-${indexChild + 1}IconAfter`" />
+              </div>
+              <div class="children">
+                <div
+                  v-for="(grandChild, indexGrandChild) of child.children"
+                  :key="grandChild.text"
+                  class="flex item"
+                >
+                  <div
+                    :class="[
+                      'content',
+                      {
+                        openContent: state.find(
+                          (itemState) => itemState.text === grandChild.text && itemState.isOpen
+                        )
+                      }
+                    ]"
+                  >
+                    <div class="textContainer">
+                      <slot
+                        :name="`${index + 1}-${indexChild + 1}-${indexGrandChild + 1}IconBefore`"
+                      />
+                      <p :href="grandChild.link" class="text">{{ grandChild.text }}</p>
+                      <slot
+                        :name="`${index + 1}-${indexChild + 1}-${indexGrandChild + 1}IconAfter`"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+.tree {
+  padding: 15px 25px 15px 15px;
+}
+.item {
+  position: relative;
+}
+.content {
+  width: 100%;
+  padding-left: 25px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background-color: v-bind(themeColor);
+}
+.text {
+  display: inline-block;
+  position: relative;
+  padding: 4px 0;
+  z-index: 3;
+  color: v-bind(textColor);
+  background-color: v-bind(themeColor);
+  word-break: break-word;
+}
+.openButton {
+  position: absolute;
+  z-index: 3;
+  top: 5px;
+  left: 0;
+  cursor: pointer;
+  padding: 5px;
+  margin: -5px -5px -5px 0;
+  transition: transform 0.3s ease;
+}
+.openButtonOpened {
+  transform: rotate(180deg);
+}
+.children {
+  width: 100%;
+  padding-left: 10px;
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-100%);
+  transition: all 0.3s ease;
+}
+.openContent > .children {
+  transform: translateY(0);
+  opacity: 1;
+  max-height: 1000px;
+}
+.textContainer {
+  display: flex;
+  gap: 10px;
+  margin-left: 10px;
+}
+.flex {
+  display: flex;
+  align-items: start;
+  justify-content: end;
+}
+</style>
diff --git a/vite.config.ts b/vite.config.ts
index 85a05cb19e5fd1c6ed770a32b7a5c7829d5a3349..70a42241669f74523094c20b5f5fa159ef65e70c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,6 @@ import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import AutoImport from 'unplugin-auto-import/vite';
 import Components from 'unplugin-vue-components/vite';
-import { PrimeVueResolver } from '@primevue/auto-import-resolver';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,7 +19,6 @@ export default defineConfig({
       }
     }),
     Components({
-      resolvers: [PrimeVueResolver()],
       dts: 'src/app/components.d.ts',
       dirs: ['src/app', 'src/pages', 'src/modules', 'src/components', 'src/shared']
     }),
diff --git a/yarn.lock b/yarn.lock
index 3b5d4b2f8cb67e9d37bb93b51ae67ddb7de61502..fd7e72f8cd597c7de6d249b92c79d7c8e3b7c893 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -480,53 +480,6 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
-"@primeuix/styled@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.npmjs.org/@primeuix/styled/-/styled-0.0.5.tgz"
-  integrity sha512-pVoGn/uPkVm/DyF3TR3EmH/pL/dP4nR42FcYbVduFq9VfO3KVeOEqvcCULHXos66RZO9MCbCFUoLy6ctf9GUGQ==
-  dependencies:
-    "@primeuix/utils" "^0.0.5"
-
-"@primeuix/utils@^0.0.5":
-  version "0.0.5"
-  resolved "https://registry.npmjs.org/@primeuix/utils/-/utils-0.0.5.tgz"
-  integrity sha512-ntUiUgtRtkF8KuaxHffzhYxQxoXk6LAPHm7CVlFjdqS8Rx8xRkLkZVyo84E+pO2hcNFkOGVP/GxHhQ2s94O8zA==
-
-"@primevue/auto-import-resolver@^4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@primevue/auto-import-resolver/-/auto-import-resolver-4.0.4.tgz#33968037de9721065ff031cab67e0c58e56a41f5"
-  integrity sha512-rI91rugr0/A58lmDcC4m3nxKdMh2K2O6ntQd+6UT8oFYiptJVNXQLY+U4zweAoG1toMnIoqGR20FXOTA7lS7ww==
-  dependencies:
-    "@primevue/metadata" "4.0.4"
-
-"@primevue/core@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/@primevue/core/-/core-4.0.4.tgz"
-  integrity sha512-xGD2hNYL4WLnkWuoxIjMIqEXiydYpFovDuCMHMWRl3yb/AFJcHpyZpUlgZ2HnJydA5ZsLS00sGsPHEoV5u2M8A==
-  dependencies:
-    "@primeuix/styled" "^0.0.5"
-    "@primeuix/utils" "^0.0.5"
-
-"@primevue/icons@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/@primevue/icons/-/icons-4.0.4.tgz"
-  integrity sha512-eHOuO5jIv/qb3mpo3m1qpDKJxw/B8ZFpAcsKxV4uWhAXkxWo/afmykGO38PVabKc3SSai8bq1zFVXPA1w0cg9g==
-  dependencies:
-    "@primeuix/utils" "^0.0.5"
-    "@primevue/core" "4.0.4"
-
-"@primevue/metadata@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@primevue/metadata/-/metadata-4.0.4.tgz#a107d56c121168cc90493eb8fd0e015e7bbc1b67"
-  integrity sha512-j1Cb6qxuKDHyT0vjlFiLjiHILN7D6xC2zIaHRcYn0XcQS27r5ianzGFIiW98OVRFTUqWAf4k0TSCrgZPawPjRA==
-
-"@primevue/themes@^4.0.4":
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/@primevue/themes/-/themes-4.0.4.tgz"
-  integrity sha512-eknRgSo1KQY+r7LEtb/jERhVHq4/Vlu5BKBQ8/Sc/G3DBDHaeJTDqYHWWoTxdaTJkXbC2pJMKFaJ/Vs7LuoIOw==
-  dependencies:
-    "@primeuix/styled" "^0.0.5"
-
 "@rollup/pluginutils@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
@@ -4913,21 +4866,6 @@ pretty-error@^4.0.0:
     lodash "^4.17.20"
     renderkid "^3.0.0"
 
-primeicons@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz"
-  integrity sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==
-
-primevue@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.npmjs.org/primevue/-/primevue-4.0.4.tgz"
-  integrity sha512-1moEddbczJ1+yEyfeYQk3xOQB64iCjjM//f+HSXs6YrKVVC0QjPFx9XPNXrr2JjHlp+6D7EpPZtsmcrfA9jWkA==
-  dependencies:
-    "@primeuix/styled" "^0.0.5"
-    "@primeuix/utils" "^0.0.5"
-    "@primevue/core" "4.0.4"
-    "@primevue/icons" "4.0.4"
-
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"