diff --git a/src/output.css b/src/output.css
index 5bec6d41d885679db0bf78d9f008b407a3976a17..57408ba83a76a4521af1a033039e56dfef8128cc 100644
--- a/src/output.css
+++ b/src/output.css
@@ -660,6 +660,26 @@ video {
   left: 1rem;
 }
 
+.right-4 {
+  right: 1rem;
+}
+
+.top-10 {
+  top: 2.5rem;
+}
+
+.top-14 {
+  top: 3.5rem;
+}
+
+.right-5 {
+  right: 1.25rem;
+}
+
+.top-16 {
+  top: 4rem;
+}
+
 .z-40 {
   z-index: 40;
 }
@@ -668,6 +688,10 @@ video {
   z-index: 50;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .order-1 {
   order: 1;
 }
@@ -680,6 +704,10 @@ video {
   order: 3;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .-my-2 {
   margin-top: -0.5rem;
   margin-bottom: -0.5rem;
@@ -695,6 +723,11 @@ video {
   margin-bottom: 1rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -743,6 +776,10 @@ video {
   margin-top: 1rem;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .block {
   display: block;
 }
@@ -787,6 +824,11 @@ video {
   height: 2rem;
 }
 
+.size-0 {
+  width: 0px;
+  height: 0px;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -799,6 +841,10 @@ video {
   height: 100%;
 }
 
+.h-0 {
+  height: 0px;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -835,6 +881,15 @@ video {
   width: 100%;
 }
 
+.w-0 {
+  width: 0px;
+}
+
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -896,6 +951,14 @@ video {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-rows-3 {
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1128,6 +1191,18 @@ video {
   padding: 1.5rem;
 }
 
+.p-16 {
+  padding: 4rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.p-10 {
+  padding: 2.5rem;
+}
+
 .px-16 {
   padding-left: 4rem;
   padding-right: 4rem;
diff --git a/src/shared/ui/Button.vue b/src/shared/ui/Button.vue
index a0f76aa739f72475cd8c527be5a2bdcd6430113b..03f1c154a579b44601f89a86b45ab30dfccdfb50 100644
--- a/src/shared/ui/Button.vue
+++ b/src/shared/ui/Button.vue
@@ -1,11 +1,46 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { convertThemeToColorBlackDefault, convertThemeToColorWhiteDefault } from '@/app/helpers';
 
 interface Props {
   label?: string;
   iconPos?: 'left' | 'top' | 'right' | 'bottom';
   textStyle?: 'bold' | 'italic';
-  border?: 'white' | 'black';
+  border?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+  size?: 'small' | 'medium' | 'large' | 'extraLarge';
+  textColor?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
+    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
   theme?:
     | 'white'
     | 'slate'
@@ -25,48 +60,34 @@ interface Props {
     | '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';
+const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
+const textColor = computed(() => convertThemeToColorBlackDefault(props.textColor));
+const borderColor = computed(() => convertThemeToColorBlackDefault(props.border));
+const textSize = computed(() => {
+  if (!props?.size) return '16px';
+  switch (props.size) {
+    case 'small':
+      return '12px';
+    case 'medium':
+      return '16px';
+    case 'large':
+      return '20px';
+    case 'extraLarge':
+      return '24px';
   }
-  return '#ffffff';
 });
-const textColor = computed(() => {
-  if (!props.theme) return '#000000';
-  if (props.theme === 'white') return '#000000';
-  return '#ffffff';
+const buttonPadding = computed(() => {
+  if (!props?.size) return '0.75rem 0.5rem';
+  switch (props.size) {
+    case 'small':
+      return '0.5rem 0.375rem';
+    case 'medium':
+      return '0.75rem 0.5rem';
+    case 'large':
+      return '1.2rem 0.8rem';
+    case 'extraLarge':
+      return '1.8rem 1.2rem';
+  }
 });
 </script>
 
@@ -75,11 +96,10 @@ const textColor = computed(() => {
     :class="[
       'button',
       {
-        'flex-column': iconPos === 'top' || iconPos === 'bottom',
-        'border-black': theme === 'white' || border === 'black',
-        'border-white': border === 'white'
+        'flex-column': iconPos === 'top' || iconPos === 'bottom'
       }
     ]"
+    :style="`padding: ${buttonPadding}; border: 1px solid ${borderColor}`"
   >
     <span :style="`background-color: ${themeColor}`" class="background"></span>
     <span
@@ -93,7 +113,7 @@ const textColor = computed(() => {
       <slot name="icon" />
     </span>
     <span
-      :style="`color: ${textColor}`"
+      :style="`color: ${textColor}; font-size: ${textSize}`"
       :class="[
         'text',
         {
@@ -111,6 +131,7 @@ const textColor = computed(() => {
   position: relative;
   border-radius: 5px;
   display: flex;
+  gap: 5px;
   align-items: center;
   user-select: none;
 }
@@ -132,18 +153,9 @@ const textColor = computed(() => {
   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;
 }
diff --git a/src/shared/ui/Drawer.vue b/src/shared/ui/Drawer.vue
index 9a3bb523be9711b76350e339644d4df66829568d..0bdb3c6855a2d9275dd02e987a27d5beef747656 100644
--- a/src/shared/ui/Drawer.vue
+++ b/src/shared/ui/Drawer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
 import { computed } from 'vue';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
 
 interface Props {
   isVisible: boolean;
@@ -23,44 +24,7 @@ interface Props {
     | '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 themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
 const textColor = computed(() => {
   if (!props.theme) return '#000000';
   if (props.theme === 'white') return '#000000';
diff --git a/src/shared/ui/Modal.vue b/src/shared/ui/Modal.vue
index 0ede5dd267cf05565f1a636ad86d5ac01fbaa619..46d74a31fda6e0e258a86121ef00b789c6347459 100644
--- a/src/shared/ui/Modal.vue
+++ b/src/shared/ui/Modal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
 import { computed } from 'vue';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
 
 interface Props {
   isVisible: boolean;
@@ -23,44 +24,7 @@ interface Props {
     | '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 themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
 const textColor = computed(() => {
   if (!props.theme) return '#000000';
   if (props.theme === 'white') return '#000000';
diff --git a/src/shared/ui/Slider.vue b/src/shared/ui/Slider.vue
index 18af693ee26165c700905e656f7e7c299bba73c5..e96da8a7ddd1a95e5973d102ae17be7234610f00 100644
--- a/src/shared/ui/Slider.vue
+++ b/src/shared/ui/Slider.vue
@@ -6,14 +6,21 @@ import { convertThemeToColorBlackDefault, convertThemeToColorWhiteDefault } from
 interface Props {
   value: string | number;
   width?: number;
+  min?: number;
+  max?: number;
+  step?: number;
   size?: 'small' | 'medium' | 'large' | 'extraLarge';
   theme?: string;
   backgroundColor?: string;
   orientation?: 'horizontal' | 'vertical';
   isSmooth?: any;
+  options?: {
+    label: string;
+    value: number;
+  }[];
 }
 const props = defineProps<Props>();
-const emit = defineEmits(['update:isActive']);
+const emit = defineEmits(['update:value']);
 const value = useVModel(props, 'value', emit);
 const sliderButtonSize = computed(() => {
   if (!props.size) return '40px';
@@ -36,8 +43,46 @@ const themeBackground = computed(() => convertThemeToColorBlackDefault(props.bac
 </script>
 
 <template>
-  <div class="slideContainer" :style="`width: ${width}px`">
-    <input v-model="value" type="range" class="slider" />
+  <div
+    :class="[
+      'slideContainer',
+      {
+        verticalSlider: orientation === 'vertical'
+      }
+    ]"
+    :style="`width: ${width ?? 200}px`"
+  >
+    <input
+      v-model="value"
+      type="range"
+      class="slider"
+      :min="min ?? 0"
+      :max="max ?? 100"
+      :step="step ?? 1"
+    />
+    <input type="range" list="values" class="opacity-0 size-0" />
+
+    <div v-if="options?.length">
+      <ul
+        class="marksList"
+        :style="`width: ${width ?? 200}px; margin-bottom: 5px; font-size: 10px`"
+      >
+        <li v-for="option of options">|</li>
+      </ul>
+      <datalist
+        id="values"
+        :class="[
+          '',
+          {
+            datalistVertical: orientation === 'vertical'
+          }
+        ]"
+      >
+        <template v-for="option of options" :key="option.value">
+          <option :value="option.value" :label="option.label"></option>
+        </template>
+      </datalist>
+    </div>
   </div>
 </template>
 
@@ -80,4 +125,23 @@ const themeBackground = computed(() => convertThemeToColorBlackDefault(props.bac
   background: v-bind(themeColor);
   cursor: pointer;
 }
+.verticalSlider {
+  transform: rotate(270deg);
+}
+datalist {
+  display: flex;
+  justify-content: space-between;
+  width: v-bind(width);
+}
+.datalistVertical {
+  flex-direction: column;
+  writing-mode: vertical-lr;
+}
+option {
+  padding: 0;
+}
+.marksList {
+  display: flex;
+  justify-content: space-between;
+}
 </style>
diff --git a/src/shared/ui/Tree.vue b/src/shared/ui/Tree.vue
index 2705c18508614c23a3ec1f4bdd05f1186a6d7ccb..628adb10bbcdd8f45767fd66cec81d6f04116060 100644
--- a/src/shared/ui/Tree.vue
+++ b/src/shared/ui/Tree.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
 
 interface Props {
   items?: {
@@ -39,44 +40,7 @@ interface Props {
 }
 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 themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
 const textColor = computed(() => {
   if (!props.theme) return '#000000';
   if (props.theme === 'white') return '#000000';