diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index 700c0c50d2a455e96f37e462491da7a6554d1e29..b47853571053b9a5d0bfbe1237d5e80d18155216 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -35,6 +35,15 @@
   --orange-700: #c2410c;
   --orange-800: #9a3412;
   --orange-900: #7c2d12;
+  --amber-100: #fef3c7;
+  --amber-200: #fde68a;
+  --amber-300: #fcd34d;
+  --amber-400: #fbbf24;
+  --amber-500: #f59e0b;
+  --amber-600: #d97706;
+  --amber-700: #b45309;
+  --amber-800: #92400e;
+  --amber-900: #78350f;
   --yellow-100: #fef9c3;
   --yellow-200: #fef08a;
   --yellow-300: #fde047;
@@ -283,3 +292,25 @@ input[type=file]::-webkit-file-upload-button {
     transform: scale(1);
   }
 }
+.v-enter-active,
+.v-leave-active {
+  transition: all 0.5s ease;
+}
+.fading-enter-active,
+.fading-leave-active {
+  transition: opacity 0.3s ease-in-out;
+}
+.fading-enter-active {
+  animation: fading-in 0.5s;
+}
+.fading-leave-active {
+  animation: fading-in 0.5s reverse;
+}
+@keyframes fading-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 7e47a2db77889b99a29dc74cfac6934f064ba619..1ab8f7298ab927ef2745fa7d644dc2a4f38cb6b1 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -46,9 +46,12 @@ declare module 'vue' {
     PageHeader: typeof import('./../modules/PageHeader.vue')['default']
     PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default']
     ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default']
+    ParagraphItem: typeof import('./../modules/entities/ParagraphItem.vue')['default']
+    ParagraphSettings: typeof import('./../components/entities/settings/ParagraphSettings.vue')['default']
     PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SaveIcon: typeof import('./../shared/icons/SaveIcon.vue')['default']
     SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
     SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
     SidebarMenuContent: typeof import('./../modules/SidebarMenuContent.vue')['default']
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index 4c49b394013c6c74a1fc528845fdeede499b1bb7..ecfbbd7bd6a6d24153ece9e7aee436e9a9b00ff5 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -100,6 +100,8 @@ export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {
       return '#22c55e';
     case 'yellow':
       return '#eab308';
+    case 'amber':
+      return '#f59e0b';
     case 'orange':
       return '#f97316';
     case 'pink':
@@ -120,6 +122,47 @@ export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {
   return '#ffffff';
 };
 
+export const convert800ThemeToColorGrayDefault = (theme: string | undefined) => {
+  if (!theme) return '#9294a1';
+  switch (theme) {
+    case 'white':
+      return '#ffffff';
+    case 'slate':
+      return '#1e293b';
+    case 'blue':
+      return '#1e40af';
+    case 'sky':
+      return '#075985';
+    case 'teal':
+      return '#115e59';
+    case 'lime':
+      return '#3f6212';
+    case 'green':
+      return '#166534';
+    case 'yellow':
+      return '#854d0e';
+    case 'amber':
+      return '#92400e';
+    case 'orange':
+      return '#9a3412';
+    case 'pink':
+      return '#9d174d';
+    case 'fuchsia':
+      return '#86198f';
+    case 'purple':
+      return '#6b21a8';
+    case 'indigo':
+      return '#3730a3';
+    case 'rose':
+      return '#9f1239';
+    case 'red':
+      return '#991b1b';
+    case 'black':
+      return '#000000';
+  }
+  return '#9294a1';
+};
+
 export const convertThemeToColorBlackDefault = (theme: string | undefined) => {
   if (!theme) return '#000000';
   switch (theme) {
@@ -139,6 +182,8 @@ export const convertThemeToColorBlackDefault = (theme: string | undefined) => {
       return '#22c55e';
     case 'yellow':
       return '#eab308';
+    case 'amber':
+      return '#f59e0b';
     case 'orange':
       return '#f97316';
     case 'pink':
diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts
index f468b7fa11391eaaac9496658e7857ee2d21cc43..ca52344f5a818ea6d65ae5df621b8ae844afd34e 100644
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@@ -38,12 +38,10 @@ export interface IEntity {
 }
 
 export type TTheme =
-  | 'white'
   | 'slate'
   | 'blue'
   | 'sky'
   | 'teal'
-  | 'lime'
   | 'green'
   | 'yellow'
   | 'orange'
@@ -52,5 +50,4 @@ export type TTheme =
   | 'purple'
   | 'indigo'
   | 'rose'
-  | 'red'
-  | 'black';
+  | 'red';
diff --git a/src/components/entities/settings/ParagraphSettings.vue b/src/components/entities/settings/ParagraphSettings.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0849e8d59b71121a606c7e3ebe79663adf038b77
--- /dev/null
+++ b/src/components/entities/settings/ParagraphSettings.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { convertThemeToColorWhiteDefault, editEntity } from '@/app/helpers';
+import type { IParagraph } from '@/app/interfaces/entities';
+import type { TTheme } from '@/app/interfaces/environment';
+import cookies from '@/app/plugins/Cookie';
+
+interface Props {
+  entityData: IParagraph;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['saveChanges']);
+const entityData = props.entityData;
+let newEntityData = ref({ ...entityData });
+const isModal = ref<boolean>(false);
+
+const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
+  entityData.font_size = newSize;
+  editEntity({ ...entityData, font_size: newSize });
+};
+const themeColor: TTheme = cookies.get('favorite_color');
+const themeColorConverted = convertThemeToColorWhiteDefault(themeColor);
+const isTitle = ref(!!entityData.title);
+const isEntityWidthFull = ref(entityData.paragraph_size === 'full');
+
+const maxLines = computed(() => {
+  if (isTitle.value) {
+    return Math.floor(168 / 24);
+  } else {
+    return Math.floor(240 / 24);
+  }
+});
+const entityPositionOptions = [
+  {
+    label: 'left',
+    value: 0
+  },
+  {
+    label: 'center',
+    value: 1
+  },
+  {
+    label: 'right',
+    value: 2
+  }
+];
+const entityTitlePositionOptions = [
+  {
+    label: 'left',
+    value: 0
+  },
+  {
+    label: 'center',
+    value: 1
+  },
+  {
+    label: 'right',
+    value: 2
+  }
+];
+const saveChanges = () => {
+  const entityPosition = isEntityWidthFull.value ? 'full' : 'half';
+  if (entityPosition !== entityData.entity_position) {
+    newEntityData.value.paragraph_size = entityPosition;
+  }
+  if (isTitle.value !== !!entityData.title) {
+    if (isTitle.value) {
+      newEntityData.value.title = 'Title';
+    } else {
+      newEntityData.value.title = null;
+    }
+  }
+  if (JSON.stringify(entityData) !== JSON.stringify(newEntityData.value)) {
+    console.log('they are different, I will save it. New data:', newEntityData.value);
+    emit('saveChanges', newEntityData.value);
+  }
+  console.log('newEntityData.value :', newEntityData.value);
+  isModal.value = false;
+};
+</script>
+
+<template>
+  <button
+    :style="`background-color: ${themeColorConverted}`"
+    class="settings absolute left-2 top-0 transition-all select-none size-10 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" width="70%"
+    ><template #header><h3 class="w-max mx-auto">Edit paragraph</h3></template>
+    <div class="p-10 flex gap-16 items-center">
+      <ul class="flex gap-8 h-full" style="min-width: 35%">
+        <li class="flex flex-col items-center gap-4" style="min-width: 150px">
+          <div>
+            <p class="py-2 text-center">Title</p>
+            <div class="flex items-center">
+              Off
+              <ToggleSwitch v-model:isActive="isTitle" class="mx-2" :theme="themeColor" />
+              On
+            </div>
+          </div>
+          <div style="height: 108px" class="flex gap-8 items-center justify-between col-span-2">
+            <Transition name="fading">
+              <div v-show="isTitle" class="flex flex-col items-center">
+                <p class="py-2 text-center">Title position</p>
+                <Slider
+                  v-model:value="newEntityData.entity_title_position"
+                  :theme="themeColor"
+                  width="150"
+                  size="small"
+                  isSmooth="true"
+                  backgroundColor="white"
+                  min="0"
+                  max="2"
+                  step="1"
+                  :options="entityTitlePositionOptions"
+                />
+              </div>
+            </Transition>
+          </div>
+        </li>
+        <li class="flex flex-col items-center gap-4" style="min-width: 150px">
+          <div>
+            <p class="py-2 text-center">Paragraph width</p>
+            <div class="flex items-center">
+              Half
+              <ToggleSwitch
+                v-model:isActive="isEntityWidthFull"
+                class="mx-2"
+                :theme="themeColor"
+                :negativeTheme="themeColor"
+              />
+              Full
+            </div>
+          </div>
+          <div style="height: 108px" class="flex gap-8 items-center justify-between col-span-2">
+            <Transition name="fading">
+              <div v-show="!isEntityWidthFull" class="flex flex-col items-center">
+                <p class="py-2">Paragraph position</p>
+                <Slider
+                  v-model:value="newEntityData.entity_position"
+                  :theme="themeColor"
+                  width="150"
+                  size="small"
+                  isSmooth="true"
+                  backgroundColor="white"
+                  min="0"
+                  max="2"
+                  step="1"
+                  :options="entityPositionOptions"
+                />
+              </div>
+            </Transition>
+          </div>
+        </li>
+      </ul>
+      <section
+        :style="`border-color: var(--${themeColor}-200); height: 320px`"
+        class="grow flex flex-col gap-4 p-4 min-h-full border-2 border-slate-100 border-dashed rounded-2xl"
+      >
+        <h3
+          v-show="isTitle"
+          :style="`border-color: var(--${themeColor}-800); text-align: ${newEntityData.entity_title_position}`"
+          class="text-2xl font-bold text-center px-2 py-4 border-2 border-dashed rounded-2xl"
+        >
+          {{ newEntityData.title ?? 'Title' }}
+        </h3>
+        <div :style="`justify-content: ${newEntityData.entity_position}`" class="grow flex">
+          <div
+            :style="`border-color: var(--${themeColor}-400); width: ${isEntityWidthFull ? '100%' : '50%'};`"
+            class="h-full p-4 pb-2 border-2 border-dashed rounded-2xl overflow-hidden"
+          >
+            <p class="pb-0 overflow-hidden contain-inline-size text">{{ newEntityData.text }}</p>
+          </div>
+        </div>
+      </section>
+      <div class="absolute top-4 right-16 z-10 hover:brightness-80 transition-all">
+        <Button label="Delete" textColor="white" theme="red" textStyle="bold" size="medium">
+          <template #icon>
+            <TrashIcon color="white" size="25" />
+          </template>
+        </Button>
+      </div>
+      <div
+        class="absolute top-4 left-4 z-10 hover:brightness-80 transition-all"
+        @click.prevent="saveChanges"
+      >
+        <Button label="Save" textColor="white" :theme="themeColor" textStyle="bold" size="medium">
+          <template #icon>
+            <SaveIcon color="white" size="25" />
+          </template>
+        </Button>
+      </div>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+.text {
+  --max-lines: v-bind(maxLines);
+  overflow: hidden;
+
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--max-lines);
+}
+</style>
diff --git a/src/components/entities/settings/TextSettings.vue b/src/components/entities/settings/TextSettings.vue
deleted file mode 100644
index 99845110f8719a1a0880b900ee82013c41938773..0000000000000000000000000000000000000000
--- a/src/components/entities/settings/TextSettings.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<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/modules/entities/EntityItem.vue b/src/modules/entities/EntityItem.vue
index efbe165202721b88b6a3e5516856b304ae7cd9c1..bf826024af4df2e196220067423cab7e6f491e2f 100644
--- a/src/modules/entities/EntityItem.vue
+++ b/src/modules/entities/EntityItem.vue
@@ -18,7 +18,7 @@ const entity = useVModel(props, 'entity', emit);
       :entityData="entity as IDivider"
       :isEditMode="isEditMode"
     />
-    <TextItem
+    <ParagraphItem
       v-if="entity.entity_type === 'paragraph'"
       :entityData="entity as IParagraph"
       :isEditMode="isEditMode"
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/ParagraphItem.vue
similarity index 93%
rename from src/modules/entities/TextItem.vue
rename to src/modules/entities/ParagraphItem.vue
index a01172c36e8c38f675936221e6087f9bda82351c..a925c204266f6a4e4ace85f4cbc74d8422acd611 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/ParagraphItem.vue
@@ -25,7 +25,10 @@ const editTitle = () => {
 const editText = () => {
   editEntity({ ...entityData.value, text: entityData.value.text });
 };
-
+const saveChanges = (newState: IParagraph) => {
+  editEntity(newState);
+  entityData.value = newState;
+};
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
 </script>
 
@@ -72,7 +75,7 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
           @input="triggerResize"
         />
       </div>
-      <TextSettings v-if="isEditMode" v-model:entityData="entityData" />
+      <ParagraphSettings v-if="isEditMode" :entityData="entityData" @saveChanges="saveChanges" />
       <EntityPositionSettings
         v-if="isEditMode && entitiesLength > 1"
         :entityUuid="entityData.entity_uuid"
diff --git a/src/output.css b/src/output.css
index 57408ba83a76a4521af1a033039e56dfef8128cc..39cceae2f3dd5730d839f80a330b6094797757c5 100644
--- a/src/output.css
+++ b/src/output.css
@@ -628,6 +628,14 @@ video {
   left: 0.5rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
+.right-16 {
+  right: 4rem;
+}
+
 .right-2 {
   right: 0.5rem;
 }
@@ -652,32 +660,16 @@ video {
   top: 0.5rem;
 }
 
-.top-6 {
-  top: 1.5rem;
-}
-
-.left-4 {
-  left: 1rem;
-}
-
-.right-4 {
-  right: 1rem;
+.top-4 {
+  top: 1rem;
 }
 
-.top-10 {
-  top: 2.5rem;
-}
-
-.top-14 {
-  top: 3.5rem;
-}
-
-.right-5 {
-  right: 1.25rem;
+.top-6 {
+  top: 1.5rem;
 }
 
-.top-16 {
-  top: 4rem;
+.z-10 {
+  z-index: 10;
 }
 
 .z-40 {
@@ -688,10 +680,6 @@ video {
   z-index: 50;
 }
 
-.z-10 {
-  z-index: 10;
-}
-
 .order-1 {
   order: 1;
 }
@@ -713,6 +701,11 @@ video {
   margin-bottom: -0.5rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -723,11 +716,6 @@ video {
   margin-bottom: 1rem;
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -776,10 +764,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-10 {
-  margin-top: 2.5rem;
-}
-
 .block {
   display: block;
 }
@@ -804,6 +788,11 @@ video {
   display: none;
 }
 
+.size-0 {
+  width: 0px;
+  height: 0px;
+}
+
 .size-10 {
   width: 2.5rem;
   height: 2.5rem;
@@ -824,11 +813,6 @@ video {
   height: 2rem;
 }
 
-.size-0 {
-  width: 0px;
-  height: 0px;
-}
-
 .h-12 {
   height: 3rem;
 }
@@ -841,8 +825,8 @@ video {
   height: 100%;
 }
 
-.h-0 {
-  height: 0px;
+.min-h-full {
+  min-height: 100%;
 }
 
 .w-1\/2 {
@@ -881,15 +865,15 @@ video {
   width: 100%;
 }
 
-.w-0 {
-  width: 0px;
-}
-
 .w-max {
   width: -moz-max-content;
   width: max-content;
 }
 
+.grow {
+  flex-grow: 1;
+}
+
 .-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));
@@ -951,14 +935,6 @@ 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;
 }
@@ -995,6 +971,10 @@ video {
   gap: 2.5rem;
 }
 
+.gap-16 {
+  gap: 4rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
@@ -1007,6 +987,10 @@ video {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1027,6 +1011,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-2xl {
+  border-radius: 1rem;
+}
+
 .rounded-3xl {
   border-radius: 1.5rem;
 }
@@ -1072,6 +1060,10 @@ video {
   border-style: solid;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-black {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -1092,6 +1084,11 @@ video {
   border-color: rgb(30 64 175 / var(--tw-border-opacity));
 }
 
+.border-slate-100 {
+  --tw-border-opacity: 1;
+  border-color: rgb(241 245 249 / var(--tw-border-opacity));
+}
+
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -1179,6 +1176,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-10 {
+  padding: 2.5rem;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -1191,18 +1192,6 @@ 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;
@@ -1253,6 +1242,14 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.pb-0 {
+  padding-bottom: 0px;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .pl-1 {
   padding-left: 0.25rem;
 }
@@ -1391,6 +1388,11 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.contain-inline-size {
+  --tw-contain-size: inline-size;
+  contain: var(--tw-contain-size) var(--tw-contain-layout) var(--tw-contain-paint) var(--tw-contain-style);
+}
+
 .hover\:cursor-pointer:hover {
   cursor: pointer;
 }
diff --git a/src/pages/authorization/signUp.vue b/src/pages/authorization/signUp.vue
index 893b07af289e371f7d7da3b9a186549b331287ae..f212e0b375ca2a3725f6791111248d1722138624 100644
--- a/src/pages/authorization/signUp.vue
+++ b/src/pages/authorization/signUp.vue
@@ -31,7 +31,6 @@ const signUp = () => {
 };
 
 const colors = [
-  'white',
   'slate',
   'blue',
   'sky',
@@ -39,6 +38,7 @@ const colors = [
   'lime',
   'green',
   'yellow',
+  'amber',
   'orange',
   'pink',
   'fuchsia',
@@ -132,9 +132,9 @@ const colors = [
           <li
             v-for="item of colors"
             :key="item"
-            :style="`background-color: ${item !== 'white' ? `var(--${item}-500)` : 'white'}`"
+            :style="`background-color: var(--${item}-500)`"
             :class="[
-              `size-10 rounded-md border-2 border-${item === 'white' ? 'gray' : item}-100 border-solid cursor-pointer`,
+              `size-10 rounded-md border-2 border-${item}-100 border-solid cursor-pointer`,
               {
                 'border-blue-800 border-4': formData.favorite_color === item
               }
diff --git a/src/shared/icons/SaveIcon.vue b/src/shared/icons/SaveIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9919ce2d6a42047b5dad63acfb14560b7958d2f9
--- /dev/null
+++ b/src/shared/icons/SaveIcon.vue
@@ -0,0 +1,35 @@
+<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.5 21 21"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g
+        id="Dribbble-Light-Preview"
+        transform="translate(-419.000000, -640.000000)"
+        :fill="color ?? '#000000'"
+      >
+        <g id="icons" transform="translate(56.000000, 160.000000)">
+          <path
+            id="save_item-[#1411]"
+            d="M370.21875,484 C370.21875,483.448 370.68915,483 371.26875,483 C371.84835,483 372.31875,483.448 372.31875,484 C372.31875,484.552 371.84835,485 371.26875,485 C370.68915,485 370.21875,484.552 370.21875,484 L370.21875,484 Z M381.9,497 C381.9,497.552 381.4296,498 380.85,498 L379.8,498 L379.8,494 C379.8,492.895 378.86025,492 377.7,492 L369.3,492 C368.13975,492 367.2,492.895 367.2,494 L367.2,498 L366.15,498 C365.5704,498 365.1,497.552 365.1,497 L365.1,487.044 C365.1,486.911 365.15565,486.784 365.2533,486.691 L367.2,484.837 L367.2,486 C367.2,487.105 368.13975,488 369.3,488 L377.7,488 C378.86025,488 379.8,487.105 379.8,486 L379.8,482 L380.85,482 C381.4296,482 381.9,482.448 381.9,483 L381.9,497 Z M377.7,498 L369.3,498 L369.3,495 C369.3,494.448 369.7704,494 370.35,494 L376.65,494 C377.2296,494 377.7,494.448 377.7,495 L377.7,498 Z M369.3,482.837 L370.17885,482 L377.7,482 L377.7,485 C377.7,485.552 377.2296,486 376.65,486 L370.35,486 C369.7704,486 369.3,485.552 369.3,485 L369.3,482.837 Z M381.9,480 L369.7347,480 C369.45645,480 369.18975,480.105 368.99235,480.293 L363.30765,485.707 C363.11025,485.895 363,486.149 363,486.414 L363,498 C363,499.105 363.93975,500 365.1,500 L381.9,500 C383.06025,500 384,499.105 384,498 L384,482 C384,480.895 383.06025,480 381.9,480 L381.9,480 Z"
+          ></path>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<style scoped></style>
diff --git a/src/shared/ui/Button.vue b/src/shared/ui/Button.vue
index 03f1c154a579b44601f89a86b45ab30dfccdfb50..e5be3f0c151a07c8bf5e029749a7219e6a2e513d 100644
--- a/src/shared/ui/Button.vue
+++ b/src/shared/ui/Button.vue
@@ -12,7 +12,6 @@ interface Props {
     | 'blue'
     | 'sky'
     | 'teal'
-    | 'lime'
     | 'green'
     | 'yellow'
     | 'orange'
@@ -30,7 +29,6 @@ interface Props {
     | 'blue'
     | 'sky'
     | 'teal'
-    | 'lime'
     | 'green'
     | 'yellow'
     | 'orange'
@@ -47,7 +45,6 @@ interface Props {
     | 'blue'
     | 'sky'
     | 'teal'
-    | 'lime'
     | 'green'
     | 'yellow'
     | 'orange'
@@ -103,26 +100,26 @@ const buttonPadding = computed(() => {
   >
     <span :style="`background-color: ${themeColor}`" class="background"></span>
     <span
+      :style="`color: ${textColor}; font-size: ${textSize}`"
       :class="[
-        'icon',
+        'text',
         {
-          'order-2': iconPos === 'right' || iconPos === 'bottom'
+          bold: textStyle === 'bold',
+          italic: textStyle === 'italic'
         }
       ]"
+      >{{ label ?? 'Button' }}</span
     >
-      <slot name="icon" />
-    </span>
     <span
-      :style="`color: ${textColor}; font-size: ${textSize}`"
       :class="[
-        'text',
+        'icon',
         {
-          bold: textStyle === 'bold',
-          italic: textStyle === 'italic'
+          'order-1': iconPos === 'left' || iconPos === 'top'
         }
       ]"
-      >{{ label ?? 'Button' }}</span
     >
+      <slot name="icon" />
+    </span>
   </button>
 </template>
 
@@ -131,7 +128,7 @@ const buttonPadding = computed(() => {
   position: relative;
   border-radius: 5px;
   display: flex;
-  gap: 5px;
+  gap: 8px;
   align-items: center;
   user-select: none;
 }
@@ -156,8 +153,8 @@ const buttonPadding = computed(() => {
 .flex-column {
   flex-direction: column;
 }
-.order-2 {
-  order: 2;
+.order-1 {
+  order: 1;
 }
 .bold {
   font-weight: bold;
diff --git a/src/shared/ui/Drawer.vue b/src/shared/ui/Drawer.vue
index 0bdb3c6855a2d9275dd02e987a27d5beef747656..14effc424a2dba575f8f689532a62996fe58d379 100644
--- a/src/shared/ui/Drawer.vue
+++ b/src/shared/ui/Drawer.vue
@@ -11,7 +11,6 @@ interface Props {
     | 'blue'
     | 'sky'
     | 'teal'
-    | 'lime'
     | 'green'
     | 'yellow'
     | 'orange'
diff --git a/src/shared/ui/Modal.vue b/src/shared/ui/Modal.vue
index 46d74a31fda6e0e258a86121ef00b789c6347459..71618bc64584f06893f926275fb0dcf66f25ddd0 100644
--- a/src/shared/ui/Modal.vue
+++ b/src/shared/ui/Modal.vue
@@ -11,7 +11,6 @@ interface Props {
     | 'blue'
     | 'sky'
     | 'teal'
-    | 'lime'
     | 'green'
     | 'yellow'
     | 'orange'
@@ -22,6 +21,7 @@ interface Props {
     | 'rose'
     | 'red'
     | 'black';
+  width?: number | string;
 }
 const props = defineProps<Props>();
 const themeColor = computed(() => convertThemeToColorWhiteDefault(props.theme));
@@ -45,7 +45,7 @@ const isVisible = useVModel(props, 'isVisible', emit);
       ]"
     ></section>
     <section
-      :style="`color: ${textColor}; background-color: ${themeColor}`"
+      :style="`color: ${textColor}; background-color: ${themeColor}; width: ${width}`"
       :class="[
         'modal',
         {
diff --git a/src/shared/ui/Slider.vue b/src/shared/ui/Slider.vue
index e96da8a7ddd1a95e5973d102ae17be7234610f00..2d1f469ba3e9872f213bc4ac9464e043a0d8c030 100644
--- a/src/shared/ui/Slider.vue
+++ b/src/shared/ui/Slider.vue
@@ -5,10 +5,10 @@ import { convertThemeToColorBlackDefault, convertThemeToColorWhiteDefault } from
 
 interface Props {
   value: string | number;
-  width?: number;
-  min?: number;
-  max?: number;
-  step?: number;
+  width?: string | number;
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
   size?: 'small' | 'medium' | 'large' | 'extraLarge';
   theme?: string;
   backgroundColor?: string;
@@ -22,6 +22,19 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['update:value']);
 const value = useVModel(props, 'value', emit);
+const optionValue = ref(
+  typeof value.value === 'string'
+    ? props.options!.findIndex((option) => option.label === value.value)
+    : value.value
+);
+watch([optionValue], () => {
+  if (props.options) {
+    value.value = props.options!.find((option) => option.value == optionValue.value)!.label;
+    console.log('optionValue.value', optionValue.value);
+  } else value.value = optionValue.value;
+});
+console.log('optionValue.value', optionValue.value);
+console.log('value.value', value.value);
 const sliderButtonSize = computed(() => {
   if (!props.size) return '40px';
   switch (props.size) {
@@ -53,7 +66,7 @@ const themeBackground = computed(() => convertThemeToColorBlackDefault(props.bac
     :style="`width: ${width ?? 200}px`"
   >
     <input
-      v-model="value"
+      v-model="optionValue"
       type="range"
       class="slider"
       :min="min ?? 0"
@@ -67,7 +80,7 @@ const themeBackground = computed(() => convertThemeToColorBlackDefault(props.bac
         class="marksList"
         :style="`width: ${width ?? 200}px; margin-bottom: 5px; font-size: 10px`"
       >
-        <li v-for="option of options">|</li>
+        <li v-for="option of options" :key="option">|</li>
       </ul>
       <datalist
         id="values"
diff --git a/src/shared/ui/ToggleSwitch.vue b/src/shared/ui/ToggleSwitch.vue
index 676b7e2dbb652abf01911066ad4987ef33bc7d8b..80a51a71e53f227d8a00eea7e76162e219fd5374 100644
--- a/src/shared/ui/ToggleSwitch.vue
+++ b/src/shared/ui/ToggleSwitch.vue
@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core';
 import { computed } from 'vue';
-import { convertThemeToColorBlackDefault } from '@/app/helpers';
+import {
+  convert800ThemeToColorGrayDefault,
+  convertThemeToColorBlackDefault,
+  convertThemeToColorGrayDefault
+} from '@/app/helpers';
 
 interface Props {
   isActive: boolean;
@@ -12,7 +16,22 @@ interface Props {
     | 'blue'
     | 'sky'
     | 'teal'
-    | 'lime'
+    | 'green'
+    | 'yellow'
+    | 'orange'
+    | 'pink'
+    | 'fuchsia'
+    | 'purple'
+    | 'indigo'
+    | 'rose'
+    | 'red'
+    | 'black';
+  negativeTheme?:
+    | 'white'
+    | 'slate'
+    | 'blue'
+    | 'sky'
+    | 'teal'
     | 'green'
     | 'yellow'
     | 'orange'
@@ -29,6 +48,7 @@ const emit = defineEmits(['update:isActive']);
 const isActive = useVModel(props, 'isActive', emit);
 
 const themeColor = computed(() => convertThemeToColorBlackDefault(props.theme));
+const inactiveColor = computed(() => convert800ThemeToColorGrayDefault(props.negativeTheme));
 const sizes = computed(() => {
   if (!props?.size) {
     return {
@@ -117,7 +137,7 @@ const sizes = computed(() => {
   transition: background-color 0.2s ease-in-out;
 }
 .inactiveBackground {
-  background-color: rgba(187, 197, 204, 0.66) !important;
+  background-color: v-bind(inactiveColor) !important;
   transition: background-color 0.2s ease-in-out;
 }
 .switcher:hover .inactiveBackground {
diff --git a/src/shared/ui/Tree.vue b/src/shared/ui/Tree.vue
index 628adb10bbcdd8f45767fd66cec81d6f04116060..2b6c90c0d013b0999f64d432f56cbc9ec0e880c5 100644
--- a/src/shared/ui/Tree.vue
+++ b/src/shared/ui/Tree.vue
@@ -26,7 +26,6 @@ interface Props {
     | 'blue'
     | 'sky'
     | 'teal'
-    | 'lime'
     | 'green'
     | 'yellow'
     | 'orange'
@@ -61,7 +60,6 @@ const setInitialState = () => {
           isOpen: props?.expand ?? false,
           text: child.text
         });
-        console.log('child', child);
         if (child.children) {
           for (let grandChild of child.children) {
             state.value.push({