diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 1ab8f7298ab927ef2745fa7d644dc2a4f38cb6b1..2210e214a0fd1c2a21e2c86f177a07706a03444a 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -48,6 +48,7 @@ declare module 'vue' {
     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']
+    ParagraphSettingsList: typeof import('./../components/entities/settings/lists/ParagraphSettingsList.vue')['default']
     PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
diff --git a/src/components/entities/settings/ParagraphSettings.vue b/src/components/entities/settings/ParagraphSettings.vue
index 0849e8d59b71121a606c7e3ebe79663adf038b77..d9f1dd10d5926a687b9b30ae11e5a5d257163415 100644
--- a/src/components/entities/settings/ParagraphSettings.vue
+++ b/src/components/entities/settings/ParagraphSettings.vue
@@ -89,82 +89,29 @@ const saveChanges = () => {
   <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>
+      <ParagraphSettingsList
+        v-model:newEntityData="newEntityData"
+        v-model:isTitle="isTitle"
+        v-model:isEntityWidthFull="isEntityWidthFull"
+        :themeColor="themeColor"
+        :entityPositionOptions="entityPositionOptions"
+        :entityTitlePositionOptions="entityTitlePositionOptions"
+      />
       <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="flex">
+          <div
+            v-show="isTitle"
+            :style="`border-color: var(--${themeColor}-800); justify-content: ${newEntityData.entity_title_position}; width: ${isEntityWidthFull ? '100%' : '50%'}`"
+            class="flex text-2xl font-bold text-center px-2 py-4 border-2 border-dashed rounded-2xl"
+          >
+            <h3 class="w-2/3 overflow-ellipsis overflow-hidden whitespace-nowrap">
+              {{ newEntityData.title ?? 'Title' }}
+            </h3>
+          </div>
+        </div>
         <div :style="`justify-content: ${newEntityData.entity_position}`" class="grow flex">
           <div
             :style="`border-color: var(--${themeColor}-400); width: ${isEntityWidthFull ? '100%' : '50%'};`"
diff --git a/src/components/entities/settings/lists/ParagraphSettingsList.vue b/src/components/entities/settings/lists/ParagraphSettingsList.vue
new file mode 100644
index 0000000000000000000000000000000000000000..236e3242fd4379c963c46782341afa138fcd6d16
--- /dev/null
+++ b/src/components/entities/settings/lists/ParagraphSettingsList.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { TTheme } from '@/app/interfaces/environment';
+import { useVModels } from '@vueuse/core';
+import type { IParagraph } from '@/app/interfaces/entities';
+
+interface Props {
+  newEntityData: IParagraph;
+  isTitle: boolean;
+  isEntityWidthFull: boolean;
+  themeColor: TTheme;
+  entityPositionOptions: {
+    label: string;
+    value: number;
+  }[];
+  entityTitlePositionOptions: {
+    label: string;
+    value: number;
+  }[];
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:newEntityData', 'update:isTitle', 'update:isEntityWidthFull']);
+const { newEntityData, isTitle, isEntityWidthFull } = useVModels(props, emit);
+</script>
+
+<template>
+  <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>
+</template>
+
+<style scoped></style>
diff --git a/src/output.css b/src/output.css
index 39cceae2f3dd5730d839f80a330b6094797757c5..f527fbd40ed9425ac883879d3db2078703bd53d9 100644
--- a/src/output.css
+++ b/src/output.css
@@ -841,6 +841,10 @@ video {
   width: 0.5rem;
 }
 
+.w-2\/3 {
+  width: 66.666667%;
+}
+
 .w-20 {
   width: 5rem;
 }
@@ -899,16 +903,6 @@ video {
   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));
 }
 
-.translate-y-24 {
-  --tw-translate-y: 6rem;
-  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));
-}
-
-.translate-y-full {
-  --tw-translate-y: 100%;
-  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));
-}
-
 .transform {
   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));
 }
@@ -1003,6 +997,10 @@ video {
   text-overflow: ellipsis;
 }
 
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
 .text-nowrap {
   text-wrap: nowrap;
 }
diff --git a/src/pages/[uuid]/SheetPage.vue b/src/pages/[uuid]/SheetPage.vue
index c1b6d0b169a834ffa6fc5ea3081f4dc1151826b9..79cf5628e4c89b06795b5d4744f04656b503fd71 100644
--- a/src/pages/[uuid]/SheetPage.vue
+++ b/src/pages/[uuid]/SheetPage.vue
@@ -34,7 +34,7 @@ const backgroundImageInfo = ref<IImageMainInfo>({
 onMounted(() => {
   const onKeydown = (event) => {
     if (event.key === 'Alt') isEditMode.value = !isEditMode.value;
-    if (event.key === 'Control') isMenuVisible.value = !isMenuVisible.value;
+    if (event.key === 'Escape') isMenuVisible.value = !isMenuVisible.value;
   };
   document.addEventListener('keydown', onKeydown);
   const getPageBackgroundData = {
diff --git a/src/shared/ui/Slider.vue b/src/shared/ui/Slider.vue
index 2d1f469ba3e9872f213bc4ac9464e043a0d8c030..59fff7f82ab02a3c3f052166040d81c207ef42f8 100644
--- a/src/shared/ui/Slider.vue
+++ b/src/shared/ui/Slider.vue
@@ -30,11 +30,8 @@ const optionValue = ref(
 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) {