diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 053d35139dc98b727a9a7a7354c0732cd08813c3..df565292d4f5081e553a4cccdba79edd930c4ba8 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -17,9 +17,11 @@ declare module 'vue' {
     CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
     Dialog: typeof import('primevue/dialog')['default']
     Divider: typeof import('primevue/divider')['default']
+    DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
+    DividerMenu: typeof import('./../modules/entities/menu/DividerMenu.vue')['default']
     Drawer: typeof import('primevue/drawer')['default']
-    EntitiesList: typeof import('./../modules/EntitiesList.vue')['default']
-    EntityItem: typeof import('./../modules/EntityItem.vue')['default']
+    EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
+    EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
     EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
     HomePage: typeof import('./../pages/HomePage.vue')['default']
     ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
@@ -28,18 +30,20 @@ declare module 'vue' {
     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']
+    page: typeof import('./../modules/Home page.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
+    PageHeader: typeof import('./../modules/PageHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
     SpeedDial: typeof import('primevue/speeddial')['default']
-    Splitter: typeof import('primevue/splitter')['default']
-    SplitterPanel: typeof import('primevue/splitterpanel')['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']
     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']
   }
diff --git a/src/app/helpers/images.ts b/src/app/helpers/images.ts
index 2372f5f92e96bbf7542e4d3cd865b6b28a2666c8..a32ed3dabf23f16d76570cf923b6b0d41604f32f 100644
--- a/src/app/helpers/images.ts
+++ b/src/app/helpers/images.ts
@@ -8,7 +8,7 @@ export const addUrlsToImageEntities = (entities: IEntity[]) => {
   const filesBuffer = filesWebsocketStore.filesBuffer;
   let index = 0;
   const entitiesToReturn = entities.map((entity: IEntity) => {
-    if (!entity.image_width) return entity;
+    if (!entity?.image_width) return entity;
     if (entity.imageUrl) return entity;
     if (filesWebsocketStore.imageUrl) {
       // редактирование сущности изображения
@@ -26,7 +26,7 @@ export const addUrlsToImageEntities = (entities: IEntity[]) => {
 };
 
 export const checkIsImage = (entity: IEntity) => {
-  if (!entity.image_width) {
+  if (!entity?.image_width) {
     return entity;
   }
   const entityToReturn = { ...entity };
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index 252d449dadb7a715ee7151633fba19996323f007..5bb4a9d0e8ec18bdf214e15982eecd1c8826be0e 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -120,25 +120,25 @@ export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
   }
   if (
     initialImageWidth >= 960 ||
-    initialImageHeight >= 960 ||
+    initialImageHeight >= 560 ||
     (initialImageWidth >= 640 && entity.text_position)
   ) {
     elementsLabelsToRemove.push('x1.25');
     if (
       initialImageWidth >= 800 ||
-      initialImageHeight >= 800 ||
+      initialImageHeight >= 467 ||
       (initialImageWidth >= 533 && entity.text_position)
     ) {
       elementsLabelsToRemove.push('x1.5');
       if (
         initialImageWidth >= 685 ||
-        initialImageHeight >= 685 ||
+        initialImageHeight >= 400 ||
         (initialImageWidth >= 457 && entity.text_position)
       ) {
         elementsLabelsToRemove.push('x1.75');
         if (
           initialImageWidth >= 600 ||
-          initialImageHeight >= 600 ||
+          initialImageHeight >= 350 ||
           (initialImageWidth >= 400 && entity.text_position)
         ) {
           elementsLabelsToRemove.push('x2');
diff --git a/src/app/interfaces/entities.ts b/src/app/interfaces/entities.ts
index 0767db1ca62f04565c4d7a52b3faa31126f43f12..b367311ad87eb2e26f7fa75050846d150157d3aa 100644
--- a/src/app/interfaces/entities.ts
+++ b/src/app/interfaces/entities.ts
@@ -26,6 +26,13 @@ type ITableColumnTypes =
   | 'rating'
   | 'knob';
 
+export interface IDivider extends IEntity {
+  entity_type: 'divider';
+  entity_uuid: string;
+  divider_height: number;
+  divider_type: 'solid' | 'dashed' | 'dotted';
+}
+
 export interface IText extends IEntity {
   entity_type: 'text';
   entity_uuid: string;
diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts
index c0a1f38281b1cc78fa79cc99d0c2b8a439f3b171..e307c3dc36d972708f365b6250ae1aaaf7dad480 100644
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@@ -13,6 +13,8 @@ export interface IEntity {
   user_nick_name?: string;
   entity_order?: number;
   entity_type: string;
+  divider_height?: number;
+  divider_type?: 'solid' | 'dashed' | 'dotted';
   title?: string | null;
   text?: string | null;
   font_size?: string | null;
diff --git a/src/app/main.ts b/src/app/main.ts
index b61cec809f84be9d41071d18c73f86a17541de5e..dd3a5c7f283145f238d02269ec0f64910415cc5f 100644
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -6,14 +6,34 @@ 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: Aura,
-      options: {}
+      preset: MyPreset,
+      options: {
+        // darkModeSelector: '.darkModeToggle'
+      }
     }
   })
   .use(createPinia())
diff --git a/src/app/stores/data.ts b/src/app/stores/data.ts
index c19d38965f5e4589fc433aab6cc0bc3285193bca..0e3b2e99ba6071d89c9de63bacaf1547b0dcb13d 100644
--- a/src/app/stores/data.ts
+++ b/src/app/stores/data.ts
@@ -57,6 +57,7 @@ export const useDataStore = defineStore('dataStore', () => {
 
   function editHomeEntities(newState: IEntity) {
     homeEntities.value = newState;
+    console.log('homeEntities.value', homeEntities.value);
   }
 
   function setHomeEntities(entities: IEntity[]) {
diff --git a/src/app/stores/websocket.ts b/src/app/stores/websocket.ts
index 6638f7ca530cc35d496d7ce830330bbcd2ed789e..1cc5d245c0f3676ac48a13dab2a84e50c70db469 100644
--- a/src/app/stores/websocket.ts
+++ b/src/app/stores/websocket.ts
@@ -13,7 +13,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
   const filesBufferLength = computed(() => filesWebsocketStore.filesBuffer.length);
   const homeEntities = computed(() => dataStore.homeEntities);
   const imageEntitiesCount = computed(
-    () => homeEntities.value.filter((entity) => entity.image_width).length
+    () => homeEntities.value.filter((entity) => entity?.image_width).length
   );
 
   const socket = ref();
@@ -50,7 +50,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
         }
         case 'createHomeEntity': {
           const entities = [...homeEntities.value];
-          if (response.data.image_width) {
+          if (response.data?.image_width) {
             response.data.imageUrl = filesWebsocketStore.imageUrl;
             filesWebsocketStore.cleanImageUrl();
           }
@@ -74,7 +74,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
           let entities = [...homeEntities.value];
           entities = entities.map((entity: IEntity) => {
             if (entity.entity_uuid !== response.data.entity_uuid) return entity;
-            if (response.data.image_width) {
+            if (response.data?.image_width) {
               response.data.imageUrl = filesWebsocketStore.imageUrl;
               filesWebsocketStore.cleanImageUrl();
             }
@@ -122,7 +122,9 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
 
   watch([filesBufferLength, homeEntities], () => {
     if (
-      (homeEntities.value.length && filesBufferLength.value === imageEntitiesCount.value) ||
+      (homeEntities.value.length &&
+        filesBufferLength.value === imageEntitiesCount.value &&
+        imageEntitiesCount.value) ||
       (isInitialAddUrlsToImageEntitiesFinished.value && filesBufferLength.value)
     ) {
       const entitiesAddedUrls = addUrlsToImageEntities(homeEntities.value);
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 60176cdcaf8502f6414418daa2d8b610c54376be..e8a699352cf7201e2991258dd49b4bf461fe199b 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -27,10 +27,16 @@ const addImage = async (files: FileList) => {
     const buffer = await blob.arrayBuffer();
     const { width: windowWidth } = useWindowSize();
     const maxWidth = windowWidth.value - 128;
+    const maxHeight = 700;
     if (image.width > maxWidth) {
-      image.height = Math.floor(maxWidth / image.width) * image.height;
+      image.height = Math.floor((maxWidth / image.width) * image.height);
       image.width = maxWidth;
     }
+    if (image.height > maxHeight) {
+      image.width = Math.floor((maxHeight / image.height) * image.width);
+      console.log('image.width', image.width);
+      image.height = maxHeight;
+    }
     emit('createEntity', {
       entity_type: 'image',
       entity_uuid: imageUuid,
@@ -50,6 +56,18 @@ onChange((files) => {
 });
 
 const speedDialItems = ref([
+  {
+    label: 'Divider',
+    icon: 'pi pi-pause',
+    command: () => {
+      emit('createEntity', {
+        entity_type: 'divider',
+        entity_uuid: uuidv4(),
+        divider_height: 1,
+        divider_type: 'solid'
+      });
+    }
+  },
   {
     label: 'Text',
     icon: 'pi pi-pencil',
@@ -100,7 +118,7 @@ const speedDialItems = ref([
   <SpeedDial
     :model="speedDialItems"
     direction="right"
-    :button-props="{ severity: 'info', rounded: true }"
+    :button-props="{ severity: 'primary', rounded: true }"
     style="position: absolute; left: 5%; top: 0"
   >
     <template #item="{ item, toggleCallback }">
@@ -108,7 +126,19 @@ const speedDialItems = ref([
         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 :class="item.icon" />
+        <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>
diff --git a/src/components/entities/image/ImagePositionMenu.vue b/src/components/entities/image/ImagePositionMenu.vue
index 2630506aaec6b8d6bec03409f70e9816514efb6e..8a7e919c9f61b4249e41319888743dcb8634a0f3 100644
--- a/src/components/entities/image/ImagePositionMenu.vue
+++ b/src/components/entities/image/ImagePositionMenu.vue
@@ -19,8 +19,10 @@ const dataStore = useDataStore();
 const homeEntities = computed(() => dataStore.homeEntities);
 const position = computed(() => props.entityData.entity_position);
 const titlePosition = computed(() => props.entityData.entity_title_position);
-const entityIndex = homeEntities.value.findIndex(
-  (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+const entityIndex = computed(() =>
+  homeEntities.value.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  )
 );
 
 const speedDialMove = computed(() => {
@@ -75,14 +77,14 @@ const speedDialMove = computed(() => {
     case 'right':
       state.push(left, center);
   }
-  if (entityIndex !== 0) {
+  if (entityIndex.value !== 0) {
     state.push({
       label: 'Up',
       icon: 'pi pi-arrow-up',
       command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
     });
   }
-  if (entityIndex !== homeEntities.value.length - 1) {
+  if (entityIndex.value !== homeEntities.value.length - 1) {
     state.push({
       label: 'Down',
       icon: 'pi pi-arrow-down',
diff --git a/src/components/entities/image/ImageStateMenu.vue b/src/components/entities/image/ImageStateMenu.vue
index a7ea583c28f2f00f9336518a92da41bbae4a8c85..d77a75a925e6915c82b4bdf69923f52ce35ae375 100644
--- a/src/components/entities/image/ImageStateMenu.vue
+++ b/src/components/entities/image/ImageStateMenu.vue
@@ -65,12 +65,7 @@ const speedDialState = computed(() => {
 
 <template>
   <div class="relative z-50">
-    <SpeedDial
-      :model="speedDialState"
-      direction="right"
-      pt:root:class="speedDialRoot w-4"
-      class="absolute"
-    >
+    <SpeedDial :model="speedDialState" direction="right" pt:root:class="speedDialRoot w-4">
       <template #button="{ toggleCallback }">
         <button
           class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
diff --git a/src/components/entities/share/EntityTitle.vue b/src/components/entities/share/EntityTitle.vue
index 039ca1fc6f4254a05aeb4de3afd9272f51e34cb5..7296c3188c15babe7cf8da36b792b1520e96ebdd 100644
--- a/src/components/entities/share/EntityTitle.vue
+++ b/src/components/entities/share/EntityTitle.vue
@@ -5,6 +5,7 @@ import { useVModel } from '@vueuse/core';
 interface Props {
   title?: string | null;
   entityData: IEntity;
+  isEditMode: boolean;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update:title', 'editTitle']);
@@ -23,7 +24,8 @@ const title = useVModel(props, 'title', emit);
       'w-full mb-4 font-bold pl-2',
       {
         'text-center': entityData.entity_title_position === 'center',
-        'text-end': entityData.entity_title_position === 'right'
+        'text-end': entityData.entity_title_position === 'right',
+        'pointer-events-none': !isEditMode
       }
     ]"
     @change="$emit('editTitle')"
diff --git a/src/components/entities/share/TextFontMenu.vue b/src/components/entities/share/TextFontMenu.vue
index b3f4f06b2019499424df7a511ddf156777e323f1..a75bb2ce55a0b272edfc7d374a7ce5bd7c8924f7 100644
--- a/src/components/entities/share/TextFontMenu.vue
+++ b/src/components/entities/share/TextFontMenu.vue
@@ -39,7 +39,7 @@ const speedDialSizeFont = computed(() => {
 </script>
 
 <template>
-  <div class="h-12">
+  <div>
     <SpeedDial
       v-if="speedDialSizeFont.length"
       :model="speedDialSizeFont"
@@ -61,7 +61,7 @@ const speedDialSizeFont = computed(() => {
       <template #item="{ item, toggleCallback }">
         <div
           :class="[
-            ' text-md font-semibold bg-opacity-70 items-center justify-between -translate-y-4 p-4 border rounded-md border-surface-200 dark:border-surface-700 cursor-pointer',
+            'text-md font-semibold bg-opacity-70 -translate-y-4 p-4 border rounded-md border-surface-200 dark:border-surface-700 cursor-pointer',
             {
               'bg-violet-500': item.label === 'Extra large',
               'bg-red-500': item.label === 'Large',
diff --git a/src/components/entities/text/TextPositionMenu.vue b/src/components/entities/text/TextPositionMenu.vue
index 5e12383e6a761e79484f29e2bf5d498a42800c01..21195d75ce4eb740be585d7d0550b28f6844471a 100644
--- a/src/components/entities/text/TextPositionMenu.vue
+++ b/src/components/entities/text/TextPositionMenu.vue
@@ -15,8 +15,10 @@ const titlePosition = computed(() => props.entityData.entity_title_position);
 
 const dataStore = useDataStore();
 const homeEntities = computed(() => dataStore.homeEntities);
-const entityIndex = homeEntities.value.findIndex(
-  (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+const entityIndex = computed(() =>
+  homeEntities.value.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  )
 );
 
 const speedDialMove = computed(() => {
@@ -72,14 +74,14 @@ const speedDialMove = computed(() => {
       state.push(left, center);
   }
   if (homeEntities.value.length > 1) {
-    if (entityIndex !== 0) {
+    if (entityIndex.value !== 0) {
       state.push({
         label: 'Up',
         icon: 'pi pi-arrow-up',
         command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
       });
     }
-    if (entityIndex !== homeEntities.value.length - 1) {
+    if (entityIndex.value !== homeEntities.value.length - 1) {
       state.push({
         label: 'Down',
         icon: 'pi pi-arrow-down',
diff --git a/src/modules/EntityItem.vue b/src/modules/EntityItem.vue
deleted file mode 100644
index 335914c4ffbae6f2176aa7c1abe27f8ec3992ba8..0000000000000000000000000000000000000000
--- a/src/modules/EntityItem.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { IEntity } from '@/app/interfaces/environment';
-import { useVModel } from '@vueuse/core';
-import type { IImage, IText } from '@/app/interfaces/entities';
-interface Props {
-  entity: IEntity;
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:entityData']);
-const entity = useVModel(props, 'entity', emit);
-</script>
-
-<template>
-  <div>
-    <TextItem v-if="entity.entity_type === 'text'" :entityData="entity as IText" />
-    <ImageItem v-if="entity.entity_type === 'image'" v-model:entityData="entity as IImage" />
-    <div class="px-16">
-      <BaseDivider />
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/PageBackgroundMenu.vue b/src/modules/PageBackgroundMenu.vue
index 4b246019435bb8e0242413817f635d63c685c13a..e018c785e66847eab39a482e01dd24a2057d504c 100644
--- a/src/modules/PageBackgroundMenu.vue
+++ b/src/modules/PageBackgroundMenu.vue
@@ -16,7 +16,7 @@ const emit = defineEmits(['uploadFile', 'setDefaultBackground']);
       title="Change image"
       accept="image/*"
       style="padding-right: 135px; margin-right: -135px"
-      class="w-2py-2 -my-2 pl-2 -ml-2 opacity-0"
+      class="w-2 py-2 -my-2 pl-2 -ml-2 opacity-0"
       @change="$emit('uploadFile', $event)"
     />
     <span><i class="pi pi-image mr-2"></i>Change image</span>
diff --git a/src/modules/PageHeader.vue b/src/modules/PageHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a6655c6d362ee0ee1e4c94b615c349d985eb04eb
--- /dev/null
+++ b/src/modules/PageHeader.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  title: string;
+  isEditMode: boolean;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isEditMode']);
+const isEditMode = useVModel(props, 'isEditMode', emit);
+</script>
+
+<template>
+  <header class="fixed z-50 w-full bg-black">
+    <h1 class="text-center text-5xl font-semibold py-4">{{ title }}</h1>
+    <button
+      class="absolute right-6 top-6 -my-2 py-2 flex items-center justify-center gap-2"
+      @click.prevent="isEditMode = !isEditMode"
+    >
+      <span class="font-medium">Edit mode</span>
+      <ToggleSwitch v-model="isEditMode" />
+    </button>
+  </header>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/TelegramSection.vue b/src/modules/TelegramSection.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ad34c69d0f089869b3dbadd67c563b3bb49004e
--- /dev/null
+++ b/src/modules/TelegramSection.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts"></script>
+
+<template>
+  <section
+    class="telegramContainer fixed z-50 bottom-8 right-8 cursor-pointer border-3 border-solid border-white rounded-full transition-all duration-300"
+  >
+    <p
+      class="telegramText absolute w-96 h-20 p-4 text-white font-medium bg-black bg-opacity-70 rounded-full transition-all duration-300 pointer-events-none"
+    >
+      Хотите написать жалобу, есть пожелания или вопросы? Напишите нам!
+    </p>
+    <a href="https://t.me/shelfNoteBot" target="_blank">
+      <div
+        class="size-14 rounded-full"
+        style="
+          background-image: url('/Telegram.png');
+          background-size: contain;
+          background-color: white;
+        "
+      ></div>
+    </a>
+  </section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..cd1ee2a6fda3dcdb07f430cc754680236d89b6cc
--- /dev/null
+++ b/src/modules/entities/DividerItem.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { IDivider } from '@/app/interfaces/entities';
+
+interface Props {
+  entityData: IDivider;
+  isEditMode: boolean;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <section class="entityContainer relative px-16 py-6">
+    <BaseDivider :type="entityData.divider_type" :height="entityData.divider_height" />
+    <DividerMenu v-if="isEditMode" :entityData="entityData" />
+  </section>
+</template>
+
+<style>
+.entityContainer .speedDial {
+  opacity: 0;
+}
+.entityContainer:hover .speedDial {
+  opacity: 100;
+}
+</style>
diff --git a/src/modules/EntitiesList.vue b/src/modules/entities/EntitiesList.vue
similarity index 91%
rename from src/modules/EntitiesList.vue
rename to src/modules/entities/EntitiesList.vue
index 0dd6065e2071a31336bbf9746005afa28027a849..07424003e04b6c0513e9555d0e487654a5b08e60 100644
--- a/src/modules/EntitiesList.vue
+++ b/src/modules/entities/EntitiesList.vue
@@ -3,6 +3,7 @@ import type { IEntity } from '@/app/interfaces/environment';
 
 interface Props {
   entities: IEntity[];
+  isEditMode: boolean;
 }
 defineProps<Props>();
 const emit = defineEmits(['createEntity']);
@@ -17,6 +18,7 @@ const createEntity = (entity: IEntity) => {
     v-for="entitiesItem of entities"
     :key="entitiesItem.entity_uuid"
     :entity="entitiesItem"
+    :isEditMode="isEditMode"
   />
   <div class="relative mt-2">
     <CreateEntityMenu @createEntity="createEntity" />
diff --git a/src/modules/entities/EntityItem.vue b/src/modules/entities/EntityItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e464930043b827f778854e9635b4394ca44affaa
--- /dev/null
+++ b/src/modules/entities/EntityItem.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { IEntity } from '@/app/interfaces/environment';
+import { useVModel } from '@vueuse/core';
+import type { IDivider, IImage, IText } from '@/app/interfaces/entities';
+interface Props {
+  entity: IEntity;
+  isEditMode: boolean;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entity = useVModel(props, 'entity', emit);
+</script>
+
+<template>
+  <div>
+    <DividerItem
+      v-if="entity.entity_type === 'divider'"
+      v-model:entityData="entity as IDivider"
+      :isEditMode="isEditMode"
+    />
+    <TextItem
+      v-if="entity.entity_type === 'text'"
+      :entityData="entity as IText"
+      :isEditMode="isEditMode"
+    />
+    <ImageItem
+      v-if="entity.entity_type === 'image'"
+      v-model:entityData="entity as IImage"
+      :isEditMode="isEditMode"
+    />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 5cce255b8cd3916fdd9714cdf818cdeccee2d038..1d5fb07c2a3621795e9287a8cfd061727b9a1257 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -6,6 +6,7 @@ import { cropImage } from '@/app/helpers/images';
 
 interface Props {
   entityData: IImage;
+  isEditMode: boolean;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update:entityData']);
@@ -45,9 +46,10 @@ const openCropImageModal = () => (isModalCropImage.value = true);
 </script>
 
 <template>
-  <div
+  <section
+    ref="container"
     :class="[
-      'entityContainer relative flex py-8 px-16',
+      'entityContainer relative flex px-16 transition-all',
       {
         'justify-start': entityData.entity_position === 'left',
         'justify-center': entityData.entity_position === 'center',
@@ -64,6 +66,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
       <EntityTitle
         v-model:title="entityData.title"
         :entityData="entityData"
+        :isEditMode="isEditMode"
         @editTitle="editTitle"
       />
       <div style="gap: 32px" class="flex" :style="`height: ${entityData.image_height}px`">
@@ -85,7 +88,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
             class="object-contain order-1"
           />
           <div class="speedDialSize absolute left-0 top-0 transition-all select-none">
-            <ImageSizeMenu :entityData="entityData" @scaleImage="scaleImage" />
+            <ImageSizeMenu v-if="isEditMode" :entityData="entityData" @scaleImage="scaleImage" />
           </div>
         </div>
         <div
@@ -96,7 +99,12 @@ const openCropImageModal = () => (isModalCropImage.value = true);
           <textarea
             ref="textarea"
             v-model="entityData.text"
-            class="w-full indent-5 leading-normal overflow-auto resize-none outline-0 order-2"
+            :class="[
+              'w-full indent-5 leading-normal overflow-auto resize-none outline-0 order-2',
+              {
+                'pointer-events-none': !isEditMode
+              }
+            ]"
             placeholder="Enter text..."
             rows="7"
             :style="`font-size: ${entityData.font_size}px; height: ${entityData.image_height}px;`"
@@ -105,12 +113,30 @@ const openCropImageModal = () => (isModalCropImage.value = true);
           />
         </div>
       </div>
-      <ImageMenu v-model:entityData="entityData" @openCropImageModal="openCropImageModal" />
+      <ImageMenu
+        v-if="isEditMode"
+        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>
     </div>
-  </div>
+  </section>
 </template>
 
-<style>
+<style scoped>
+.entityContainer:hover .aggregateHigh {
+  height: 65px;
+}
+.entityContainer:hover .aggregateShort {
+  height: 30px;
+}
 .entityContainer .speedDial {
   opacity: 0;
 }
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index b8f4c9247a0a7a660448ae977912cd82ecea30e0..7abd470d23f38353c548ae1cc65df0f2d683b8d5 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import { useTextareaAutosize } from '@vueuse/core';
+import { useElementSize, useTextareaAutosize } from '@vueuse/core';
 import type { IText } from '@/app/interfaces/entities';
 import { editEntity } from '@/app/helpers';
 
 interface Props {
   entityData: IText;
+  isEditMode: boolean;
 }
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
+const container = ref();
 
 const editTitle = () => {
   editEntity({ ...entityData.value, title: entityData.value.title });
@@ -17,12 +19,13 @@ const editText = () => {
 };
 
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
+const { height: textareaHeight } = useElementSize(textarea);
 </script>
 
 <template>
-  <div
+  <section
     :class="[
-      'entityContainer relative flex py-8 px-16',
+      'entityContainer relative flex px-16',
       {
         'justify-start': entityData.entity_position === 'left',
         'justify-center': entityData.entity_position === 'center',
@@ -41,24 +44,48 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
       <EntityTitle
         v-model:title="entityData.title"
         :entityData="entityData"
+        :isEditMode="isEditMode"
         @editTitle="editTitle"
       />
       <div class="relative leading-none">
         <textarea
           ref="textarea"
           v-model="entityData.text"
-          class="w-full indent-5 leading-normal resize-none outline-0"
+          :class="[
+            'w-full indent-5 leading-normal resize-none outline-0',
+            {
+              'pointer-events-none': !isEditMode
+            }
+          ]"
           :style="`font-size: ${entityData.font_size}px;`"
           placeholder="Enter text..."
-          rows="3"
+          rows="1"
           spellcheck="false"
           @change="editText"
           @input="triggerResize"
         />
       </div>
-      <TextMenu v-model:entityData="entityData" />
+      <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" />
     </div>
-  </div>
+  </section>
 </template>
 
 <style>
@@ -68,6 +95,15 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
 .entityContainer:hover .speedDial {
   opacity: 100;
 }
+.entityContainer:hover .aggregateHigh {
+  height: 140px;
+}
+.entityContainer:hover .aggregateMedium {
+  height: 80px;
+}
+.entityContainer:hover .aggregateShort {
+  height: 35px;
+}
 input::placeholder {
   font-weight: 400;
 }
diff --git a/src/modules/entities/menu/DividerMenu.vue b/src/modules/entities/menu/DividerMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..212355d0dc0fa0e1a2f3ca208b91f91415787be2
--- /dev/null
+++ b/src/modules/entities/menu/DividerMenu.vue
@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity, deleteEntity, editEntity } from '@/app/helpers';
+import type { IDivider } from '@/app/interfaces/entities';
+import { useVModel } from '@vueuse/core';
+import type { IEntity } from '@/app/interfaces/environment';
+import { useDataStore } from '@/app/stores/data';
+
+interface Props {
+  entityData: IDivider;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entityData = useVModel(props, 'entityData', emit);
+
+const dataStore = useDataStore();
+const homeEntities = computed(() => dataStore.homeEntities);
+const entityIndex = computed(() =>
+  homeEntities.value.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  )
+);
+
+const changeHeight = (height: number) => {
+  entityData.value.divider_height = height;
+  editEntity({ ...entityData.value, divider_height: height });
+};
+const changeType = (type: 'solid' | 'dashed' | 'dotted') => {
+  entityData.value.divider_type = type;
+  editEntity({ ...entityData.value, divider_type: type });
+};
+const speedDialSettings = computed(() => {
+  const state = [];
+  const solid = {
+    label: 'Solid',
+    command: () => changeType('solid')
+  };
+  const dashed = {
+    label: 'Dashed',
+    command: () => changeType('dashed')
+  };
+  const dotted = {
+    label: 'Dotted',
+    command: () => changeType('dotted')
+  };
+  if (props.entityData?.divider_type === 'solid') {
+    state.push(dashed, dotted);
+  } else if (props.entityData?.divider_type === 'dashed') {
+    state.push(solid, dotted);
+  } else {
+    state.push(solid, dashed);
+  }
+  const smallHeight = {
+    label: 'Small',
+    command: () => changeHeight(1)
+  };
+  const mediumHeight = {
+    label: 'Medium',
+    command: () => changeHeight(2)
+  };
+  const largeHeight = {
+    label: 'Large',
+    command: () => changeHeight(4)
+  };
+  const extraLargeHeight = {
+    label: 'Extra large',
+    command: () => changeHeight(8)
+  };
+  if (props.entityData?.divider_height === 1) {
+    state.push(mediumHeight, largeHeight, extraLargeHeight);
+  } else if (props.entityData?.divider_height === 2) {
+    state.push(smallHeight, largeHeight, extraLargeHeight);
+  } else if (props.entityData?.divider_height === 4) {
+    state.push(smallHeight, mediumHeight, extraLargeHeight);
+  } else {
+    state.push(smallHeight, mediumHeight, largeHeight);
+  }
+  if (entityIndex.value !== 0) {
+    state.push({
+      label: 'Up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
+    });
+  }
+  if (entityIndex.value !== homeEntities.value.length - 1) {
+    state.push({
+      label: 'Down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
+    });
+  }
+  state.push({
+    label: 'Delete',
+    icon: 'pi pi-trash',
+    command: () => deleteEntity(props.entityData.entity_uuid)
+  });
+  return state;
+});
+</script>
+
+<template>
+  <div class="speedDial absolute left-2 top-0 transition-all select-none">
+    <div class="relative z-50">
+      <SpeedDial :model="speedDialSettings" 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-cog"></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'),
+                'bg-violet-500': item.label === 'Extra large',
+                'bg-red-500': item.label === 'Large',
+                'bg-yellow-500': item.label === 'Medium',
+                'bg-green-500': item.label === 'Small'
+              }
+            ]"
+            @click="toggleCallback"
+          >
+            <span :class="item?.icon" />
+            <span v-show="item.label === 'Solid'"
+              ><svg
+                fill="#fff"
+                width="20px"
+                height="20px"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M23 13H1v-2h22z" />
+                <path fill="none" d="M0 0h24v24H0z" /></svg
+            ></span>
+            <span v-show="item.label === 'Dashed'">
+              <svg
+                fill="#fff"
+                width="20px"
+                height="20px"
+                viewBox="0 0 15 15"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M0 7.5C0 7.22386 0.223858 7 0.5 7H3C3.27614 7 3.5 7.22386 3.5 7.5C3.5 7.77614 3.27614 8 3 8H0.5C0.223858 8 0 7.77614 0 7.5ZM5.75 7.5C5.75 7.22386 5.97386 7 6.25 7H8.75C9.02614 7 9.25 7.22386 9.25 7.5C9.25 7.77614 9.02614 8 8.75 8H6.25C5.97386 8 5.75 7.77614 5.75 7.5ZM12 7C11.7239 7 11.5 7.22386 11.5 7.5C11.5 7.77614 11.7239 8 12 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12Z"
+                  fill="#fff"
+                />
+              </svg>
+            </span>
+            <span v-show="item.label === 'Dotted'">
+              <svg
+                fill="#fff"
+                width="20px"
+                height="20px"
+                viewBox="0 0 15 15"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M1.5 6.625C1.01675 6.625 0.625 7.01675 0.625 7.5C0.625 7.98325 1.01675 8.375 1.5 8.375C1.98325 8.375 2.375 7.98325 2.375 7.5C2.375 7.01675 1.98325 6.625 1.5 6.625ZM5.5 6.625C5.01675 6.625 4.625 7.01675 4.625 7.5C4.625 7.98325 5.01675 8.375 5.5 8.375C5.98325 8.375 6.375 7.98325 6.375 7.5C6.375 7.01675 5.98325 6.625 5.5 6.625ZM9.5 6.625C9.01675 6.625 8.625 7.01675 8.625 7.5C8.625 7.98325 9.01675 8.375 9.5 8.375C9.98325 8.375 10.375 7.98325 10.375 7.5C10.375 7.01675 9.98325 6.625 9.5 6.625ZM12.625 7.5C12.625 7.01675 13.0168 6.625 13.5 6.625C13.9832 6.625 14.375 7.01675 14.375 7.5C14.375 7.98325 13.9832 8.375 13.5 8.375C13.0168 8.375 12.625 7.98325 12.625 7.5Z"
+                  fill="#fff"
+                />
+              </svg>
+            </span>
+            <span class="text-center">
+              {{ item.label }}
+            </span>
+          </div>
+        </template>
+      </SpeedDial>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/menu/ImageMenu.vue b/src/modules/entities/menu/ImageMenu.vue
index fdfd6ab36797683a8c34d7f716001c437c968c8e..3343ecbd72e375386080527411258a1fb068fbe0 100644
--- a/src/modules/entities/menu/ImageMenu.vue
+++ b/src/modules/entities/menu/ImageMenu.vue
@@ -70,9 +70,10 @@ const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
 </script>
 
 <template>
-  <div class="speedDial absolute left-2 top-0 transition-all select-none">
+  <section style="height: 146px" class="speedDial absolute left-2 top-0 transition-all select-none">
     <ImageStateMenu
       :entityData="entityData"
+      class="h-12"
       @deleteEntity="deleteEntity"
       @addTitle="addTitle"
       @removeTitle="removeTitle"
@@ -80,25 +81,19 @@ const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
       @removeText="removeText"
       @openCropImageModal="$emit('openCropImageModal')"
     />
-  </div>
-  <div
-    v-if="entityData?.text || entityData?.title"
-    class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none"
-  >
-    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
-  </div>
-  <div
-    v-if="homeEntities.length > 1"
-    class="speedDial absolute left-2 bottom-0 transition-all select-none"
-  >
-    <ImagePositionMenu
-      :entityData="entityData"
-      @editPosition="editPosition"
-      @editTitlePosition="editTitlePosition"
-      @editTextPosition="editTextPosition"
-      @editParagraphWidth="editParagraphWidth"
-    />
-  </div>
+    <div v-if="entityData?.text || entityData?.title">
+      <TextFontMenu :entityData="entityData" class="h-12" @changeFontSize="changeFontSize" />
+    </div>
+    <div v-if="homeEntities.length > 1">
+      <ImagePositionMenu
+        :entityData="entityData"
+        @editPosition="editPosition"
+        @editTitlePosition="editTitlePosition"
+        @editTextPosition="editTextPosition"
+        @editParagraphWidth="editParagraphWidth"
+      />
+    </div>
+  </section>
 </template>
 
 <style scoped></style>
diff --git a/src/modules/entities/menu/TextMenu.vue b/src/modules/entities/menu/TextMenu.vue
index a795a9dc0c843f82fd3f4940520bcdeedf1a4729..49cad987ac14cc18015ac01bede0743c49c3d0ab 100644
--- a/src/modules/entities/menu/TextMenu.vue
+++ b/src/modules/entities/menu/TextMenu.vue
@@ -47,10 +47,10 @@ const editParagraphWidth = (widthMode: 'full' | 'half') => {
       @removeTitle="removeTitle"
     />
   </div>
-  <div class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none">
+  <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 bottom-0 transition-all select-none">
+  <div class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none">
     <TextPositionMenu
       :entityData="entityData"
       @editPosition="editPosition"
diff --git a/src/output.css b/src/output.css
index f2b300347bb48e83fa6931eabc8dfc16ad488423..23f9de37b4b7c0ed2f01edb404cf6c85b1d625bf 100644
--- a/src/output.css
+++ b/src/output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -612,10 +612,6 @@ video {
   position: relative;
 }
 
-.bottom-0 {
-  bottom: 0px;
-}
-
 .bottom-8 {
   bottom: 2rem;
 }
@@ -632,6 +628,10 @@ video {
   right: 0.5rem;
 }
 
+.right-6 {
+  right: 1.5rem;
+}
+
 .right-8 {
   right: 2rem;
 }
@@ -640,10 +640,6 @@ video {
   top: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
 .top-16 {
   top: 4rem;
 }
@@ -652,6 +648,10 @@ video {
   top: 0.5rem;
 }
 
+.top-6 {
+  top: 1.5rem;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -682,6 +682,11 @@ video {
   margin-right: auto;
 }
 
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
+
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -690,10 +695,6 @@ video {
   margin-left: -0.5rem;
 }
 
-.-mr-\[135px\] {
-  margin-right: -135px;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -706,10 +707,6 @@ video {
   margin-left: 0px;
 }
 
-.ml-\[58px\] {
-  margin-left: 58px;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -766,40 +763,20 @@ video {
   height: 2rem;
 }
 
-.h-12 {
-  height: 3rem;
-}
-
-.h-4 {
-  height: 1rem;
-}
-
-.h-\[1px\] {
-  height: 1px;
-}
-
-.h-full {
-  height: 100%;
+.h-0 {
+  height: 0px;
 }
 
-.h-16 {
-  height: 4rem;
+.h-12 {
+  height: 3rem;
 }
 
 .h-20 {
   height: 5rem;
 }
 
-.max-h-\[700px\] {
-  max-height: 700px;
-}
-
-.min-h-\[100px\] {
-  min-height: 100px;
-}
-
-.min-h-\[200px\] {
-  min-height: 200px;
+.h-full {
+  height: 100%;
 }
 
 .w-1\/2 {
@@ -830,15 +807,6 @@ video {
   width: 100%;
 }
 
-.min-w-\[100px\] {
-  min-width: 100px;
-}
-
-.-translate-y-1\/2 {
-  --tw-translate-y: -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));
-}
-
 .-translate-y-2 {
   --tw-translate-y: -0.5rem;
   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));
@@ -854,6 +822,16 @@ 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));
 }
@@ -866,10 +844,6 @@ video {
   cursor: pointer;
 }
 
-.cursor-none {
-  cursor: none;
-}
-
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -916,10 +890,6 @@ video {
   gap: 1rem;
 }
 
-.gap-\[32px\] {
-  gap: 32px;
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -996,11 +966,6 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1036,10 +1001,6 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1048,10 +1009,6 @@ video {
   --tw-bg-opacity: 0.8;
 }
 
-.bg-opacity-90 {
-  --tw-bg-opacity: 0.9;
-}
-
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1089,9 +1046,14 @@ video {
   padding-bottom: 1rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 
 .pl-0 {
@@ -1106,10 +1068,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.pr-\[135px\] {
-  padding-right: 135px;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1155,14 +1113,14 @@ video {
   font-weight: 700;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .font-medium {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -1191,21 +1149,6 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.text-blue-300 {
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
-}
-
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-.text-sky-400 {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -1218,11 +1161,6 @@ video {
   outline-width: 0px;
 }
 
-.brightness-100 {
-  --tw-brightness: brightness(1);
-  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);
-}
-
 .filter {
   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);
 }
@@ -1244,14 +1182,4 @@ video {
 .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);
-}
-
-.hover\:brightness-100:hover {
-  --tw-brightness: brightness(1);
-  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/HomePage.vue b/src/pages/HomePage.vue
index 007992a411730f439ffca7f99ebb209c86e39032..31626c4e2a9ee7b30f65652a7e222f3d1d325955 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -6,6 +6,7 @@ import { useWebsocketStore } from '@/app/stores/websocket';
 import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces/index.ts';
 import { createHomeEntity, fetchForHomeEntities, setDefaultHomeBackground } from '@/app/helpers';
+import TelegramSection from '@/modules/TelegramSection.vue';
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
@@ -17,6 +18,7 @@ const backgroundUrl = computed<string>(() => interfaceStore.homeBackground);
 const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultHomeBackground);
 const isFetchedForBackground = computed(() => interfaceStore.isFetchedForBackground);
 
+const isEditMode = ref<boolean>();
 const isModalUploadFile = ref<boolean>(false);
 const backgroundImageInfo = ref<IImageMainInfo>({
   imageUrl: backgroundUrl.value,
@@ -63,28 +65,8 @@ const saveImage = (finalImageUrl: string) => {
 </script>
 
 <template>
-  <header>
-    <h1 class="text-center text-5xl font-bold py-4">Home page</h1>
-    <section
-      class="telegramContainer fixed z-50 bottom-8 right-8 cursor-pointer border-3 border-solid border-white rounded-full transition-all duration-300"
-    >
-      <p
-        class="telegramText absolute w-96 h-20 p-4 text-white font-medium bg-black bg-opacity-70 rounded-full transition-all duration-300 pointer-events-none"
-      >
-        Хотите написать жалобу, есть пожелания или вопросы? Напишите нам!
-      </p>
-      <a href="https://t.me/shelfNoteBot" target="_blank">
-        <div
-          class="size-14 rounded-full"
-          style="
-            background-image: url('/Telegram.png');
-            background-size: contain;
-            background-color: white;
-          "
-        ></div>
-      </a>
-    </section>
-  </header>
+  <PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
+  <TelegramSection />
   <CropImageModal
     v-model:isVisible="isModalUploadFile"
     v-model:imageInfo="backgroundImageInfo"
@@ -102,7 +84,11 @@ const saveImage = (finalImageUrl: string) => {
     <article class="flex items-start justify-center">
       <Suspense>
         <div ref="entitiesContainer" class="w-full pt-4">
-          <EntitiesList :entities="entities" @createEntity="createEntity" />
+          <EntitiesList
+            :entities="entities"
+            :isEditMode="isEditMode"
+            @createEntity="createEntity"
+          />
         </div>
         <template #fallback><BaseLoader /></template
       ></Suspense>
diff --git a/src/shared/BaseDivider.vue b/src/shared/BaseDivider.vue
index 8b560d7241aaffe5c13e01b171e00c53c51aa93f..4c9e78288938f797642774205e2c89b690777519 100644
--- a/src/shared/BaseDivider.vue
+++ b/src/shared/BaseDivider.vue
@@ -1,7 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+interface Props {
+  height?: number;
+  type?: 'solid' | 'dashed' | 'dotted';
+}
+defineProps<Props>();
+</script>
 
 <template>
-  <div style="height: 1px" class="w-full bg-gray-600"></div>
+  <div :style="`border-bottom: ${height || 1}px ${type || 'solid'} #6b7280`" class="w-full"></div>
 </template>
 
 <style scoped></style>
diff --git a/vue/Knob.vue b/vue/Knob.vue
index ca3e9c045d2007b5d6b1c60e8e96cb428a982ee9..526fef461ada3b711e05afbb6317e20386c25206 100644
--- a/vue/Knob.vue
+++ b/vue/Knob.vue
@@ -22,18 +22,18 @@ const knobTheme = computed(() => {
 <template>
   <div class="card flex justify-center">
     <Knob
-        v-model="sliderValue"
-        :valueColor="knobTheme"
-        rangeColor="black"
-        :textColor="knobTheme"
-        step="1"
-        min="0"
-        max="10"
-        size="50"
-        readonly
-        :pt:text="{ style: 'font-weight: bold; font-size: 28px' }"
+      v-model="sliderValue"
+      :valueColor="knobTheme"
+      rangeColor="black"
+      :textColor="knobTheme"
+      step="1"
+      min="0"
+      max="10"
+      size="50"
+      readonly
+      :pt:text="{ style: 'font-weight: bold; font-size: 28px' }"
     />
-    <Slider min="1" max="10" v-model="sliderValue" class="w-112" />
+    <Slider v-model="sliderValue" min="1" max="10" class="w-112" />
   </div>
 </template>