diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 4b32cae1cea132f61b42d754f17dcce82c192498..7e47a2db77889b99a29dc74cfac6934f064ba619 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -55,6 +55,7 @@ declare module 'vue' {
     SidebarMenuHeader: typeof import('./../modules/SidebarMenuHeader.vue')['default']
     SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
     SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
+    Slider: typeof import('./../shared/ui/Slider.vue')['default']
     SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
     TableIcon: typeof import('./../shared/icons/TableIcon.vue')['default']
     TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index e626cbb69dab9032afa4e1e695e7958776cfc1b8..4c49b394013c6c74a1fc528845fdeede499b1bb7 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -119,3 +119,42 @@ export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {
   }
   return '#ffffff';
 };
+
+export const convertThemeToColorBlackDefault = (theme: string | undefined) => {
+  if (!theme) return '#000000';
+  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 '#000000';
+};
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index a96c3f6180fb6bd8c63ad19d1a4ffe498513d800..b8293ece9bdd69953d50369f46b32a75a2bfeb80 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -123,7 +123,7 @@ const speedDialItems = ref([
 </script>
 
 <template>
-  <MenuDial v-model:isActive="isMenu" :items="speedDialItems" size="extraLarge" :theme="themeColor">
+  <MenuDial v-model:isActive="isMenu" :items="speedDialItems" size="large" :theme="themeColor">
     <template #1IconAfter>
       <HorizontalLineIcon color="white" size="25" />
     </template>
diff --git a/src/components/entities/settings/EntityPositionSettings.vue b/src/components/entities/settings/EntityPositionSettings.vue
index 4bf2eb3def33f27cab975f6e7f3740030a0d14e3..a545225dd53cf69e372de61c86342b892103bab6 100644
--- a/src/components/entities/settings/EntityPositionSettings.vue
+++ b/src/components/entities/settings/EntityPositionSettings.vue
@@ -37,12 +37,12 @@ const menuItems = computed(() => {
       v-model:isActive="isMenu"
       :items="menuItems"
       :theme="themeColor"
-      size="extraLarge"
+      size="medium"
       direction="left"
       ><template #buttonIcon>
         <VerticalArrowsIcon
           :color="themeColor === 'white' ? 'black' : 'white'"
-          :size="30"
+          :size="25"
         /> </template
     ></MenuDial>
   </div>
diff --git a/src/modules/PageHeader.vue b/src/modules/PageHeader.vue
index b0e49566f70b0d993e4ece76e2b179d4e7809d52..c6d747ed52d49df57f305b138d6357be3bfd07c4 100644
--- a/src/modules/PageHeader.vue
+++ b/src/modules/PageHeader.vue
@@ -11,7 +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');
+const themeColor: TTheme = cookies.get('favorite_color');
 </script>
 
 <template>
diff --git a/src/modules/entities/EntitiesList.vue b/src/modules/entities/EntitiesList.vue
index fca0fc14e545e8978a5d55dfafdea9a8f282e4b3..8bd22092cfe70f248ea339bc0d73b4fe9ae65453 100644
--- a/src/modules/entities/EntitiesList.vue
+++ b/src/modules/entities/EntitiesList.vue
@@ -24,7 +24,7 @@ const createEntity = (entity: IEntity) => {
     <Transition name="bounce">
       <CreateEntityMenu v-if="isEditMode" @createEntity="createEntity" />
     </Transition>
-    <div v-if="!isEditMode" style="height: 50px"></div>
+    <div v-if="!isEditMode" style="height: 55px"></div>
   </div>
 </template>
 
diff --git a/src/output.css b/src/output.css
index 1060844815523306785f02dc71d8fbad7a2140c4..5bec6d41d885679db0bf78d9f008b407a3976a17 100644
--- a/src/output.css
+++ b/src/output.css
@@ -1278,6 +1278,10 @@ video {
   opacity: 0.5;
 }
 
+.outline {
+  outline-style: solid;
+}
+
 .outline-0 {
   outline-width: 0px;
 }
diff --git a/src/shared/ui/MenuDial.vue b/src/shared/ui/MenuDial.vue
index e7b45ba983eb538e529be4e14d544c14cf59416f..40287cc3a28020386b65c931d4ef7584017bfd95 100644
--- a/src/shared/ui/MenuDial.vue
+++ b/src/shared/ui/MenuDial.vue
@@ -12,7 +12,7 @@ interface Props {
     textStyle?: 'bold' | 'italic';
     onClick?: () => void;
   }[];
-  size?: 'large' | 'extraLarge';
+  size?: 'small' | 'medium' | 'large' | 'extraLarge';
   theme?: string;
   direction?: 'left' | 'right' | 'up' | 'down';
 }
@@ -27,12 +27,16 @@ const textColor = computed(() => {
   return '#ffffff';
 });
 const elementsSize = computed(() => {
-  if (!props?.size) return 30;
+  if (!props?.size) return 40;
   switch (props.size) {
-    case 'large':
+    case 'small':
+      return 30;
+    case 'medium':
       return 40;
+    case 'large':
+      return 55;
     case 'extraLarge':
-      return 50;
+      return 70;
   }
 });
 const menuListStyles = computed(() => {
diff --git a/src/shared/ui/Slider.vue b/src/shared/ui/Slider.vue
new file mode 100644
index 0000000000000000000000000000000000000000..18af693ee26165c700905e656f7e7c299bba73c5
--- /dev/null
+++ b/src/shared/ui/Slider.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { computed } from 'vue';
+import { convertThemeToColorBlackDefault, convertThemeToColorWhiteDefault } from '@/app/helpers';
+
+interface Props {
+  value: string | number;
+  width?: number;
+  size?: 'small' | 'medium' | 'large' | 'extraLarge';
+  theme?: string;
+  backgroundColor?: string;
+  orientation?: 'horizontal' | 'vertical';
+  isSmooth?: any;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isActive']);
+const value = useVModel(props, 'value', emit);
+const sliderButtonSize = computed(() => {
+  if (!props.size) return '40px';
+  switch (props.size) {
+    case 'small':
+      return '25px';
+    case 'medium':
+      return '40px';
+    case 'large':
+      return '70px';
+    case 'extraLarge':
+      return '100px';
+  }
+});
+const sliderHeight = computed(() => `${Math.floor(sliderButtonSize.value.slice(0, -2) / 3)}px`);
+const sliderBorderRadius = props.isSmooth ? sliderHeight.value : '0%';
+const sliderButtonBorderRadius = props.isSmooth ? '50%' : '0%';
+const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
+const themeBackground = computed(() => convertThemeToColorBlackDefault(props.backgroundColor));
+</script>
+
+<template>
+  <div class="slideContainer" :style="`width: ${width}px`">
+    <input v-model="value" type="range" class="slider" />
+  </div>
+</template>
+
+<style scoped>
+.slideContainer {
+  width: 100%;
+}
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: v-bind(sliderHeight);
+  background: v-bind(themeBackground);
+  outline: none;
+  border-radius: v-bind(sliderBorderRadius);
+  filter: brightness(100%);
+  -webkit-transition: 0.2s;
+  transition: filter 0.2s;
+  cursor: pointer;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: v-bind(sliderButtonSize);
+  height: v-bind(sliderButtonSize);
+  border-radius: v-bind(sliderButtonBorderRadius);
+  background: v-bind(themeColor);
+  -webkit-transition: 0.2s;
+  transition: filter 0.2s;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  filter: brightness(90%);
+}
+
+.slider::-moz-range-thumb {
+  width: v-bind(sliderButtonSize);
+  height: v-bind(sliderButtonSize);
+  background: v-bind(themeColor);
+  cursor: pointer;
+}
+</style>
diff --git a/src/shared/ui/ToggleSwitch.vue b/src/shared/ui/ToggleSwitch.vue
index a2a81016abdc0b6d8619255d338b5084964cb8b3..676b7e2dbb652abf01911066ad4987ef33bc7d8b 100644
--- a/src/shared/ui/ToggleSwitch.vue
+++ b/src/shared/ui/ToggleSwitch.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
 import { computed } from 'vue';
+import { convertThemeToColorBlackDefault } from '@/app/helpers';
 
 interface Props {
   isActive: boolean;
-  size?: 'small' | 'large';
+  size?: 'small' | 'medium' | 'large' | 'extraLarge';
   theme?:
     | 'white'
     | 'slate'
@@ -20,89 +21,73 @@ interface Props {
     | 'purple'
     | 'indigo'
     | 'rose'
-    | 'red';
+    | 'red'
+    | 'black';
 }
 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 themeColor = computed(() => convertThemeToColorBlackDefault(props.theme));
 const sizes = computed(() => {
-  if (!props?.size)
+  if (!props?.size) {
     return {
-      containerWidth: 35,
-      containerHeight: 21,
-      padding: 3,
-      borderRadius: 11,
-      circleSize: 15,
-      transformXCircle: 14
+      containerWidth: 45,
+      containerHeight: 27,
+      padding: 4,
+      borderRadius: 14,
+      circleSize: 19,
+      transformXCircle: 18
     };
+  }
   switch (props.size) {
     case 'small':
       return {
-        containerWidth: 30,
-        containerHeight: 18,
-        padding: 2,
-        borderRadius: 9,
-        circleSize: 14,
-        transformXCircle: 12
+        containerWidth: 35,
+        containerHeight: 21,
+        padding: 3,
+        borderRadius: 11,
+        circleSize: 15,
+        transformXCircle: 14
       };
     case 'large':
       return {
-        containerWidth: 40,
-        containerHeight: 24,
-        padding: 3,
-        borderRadius: 12,
-        circleSize: 18,
-        transformXCircle: 14
+        containerWidth: 55,
+        containerHeight: 33,
+        padding: 4,
+        borderRadius: 17,
+        circleSize: 25,
+        transformXCircle: 22
+      };
+    case 'extraLarge':
+      return {
+        containerWidth: 70,
+        containerHeight: 42,
+        padding: 6,
+        borderRadius: 21,
+        circleSize: 30,
+        transformXCircle: 28
       };
   }
-  return '';
+  return {
+    containerWidth: 45,
+    containerHeight: 27,
+    padding: 4,
+    borderRadius: 14,
+    circleSize: 19,
+    transformXCircle: 18
+  };
 });
 </script>
 
 <template>
   <button
-    :style="`min-width: ${sizes.containerWidth}px; min-height: ${sizes.containerHeight}px; border-radius: ${sizes.borderRadius}px; padding: ${sizes.padding}px;`"
+    :style="`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;`"
+      :style="`background-color: ${themeColor}; border-radius: ${sizes.borderRadius}px;`"
       :class="[
         'activeBackground',
         {