diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 053d35139dc98b727a9a7a7354c0732cd08813c3..2bef6d082259dcafb5c742ec5543b073d7485710 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']
@@ -40,6 +42,7 @@ declare module 'vue' {
     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/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/stores/websocket.ts b/src/app/stores/websocket.ts
index 6638f7ca530cc35d496d7ce830330bbcd2ed789e..6135d337eb3965574beef216398e03d828dc6d04 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();
             }
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 60176cdcaf8502f6414418daa2d8b610c54376be..6c5db931fb5d72d46fafd27c9c6d6d2aee02bc5e 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -50,6 +50,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',
@@ -108,7 +120,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..fccd97c314b442d9bae331ae0f7b65ebde719973 100644
--- a/src/components/entities/share/EntityTitle.vue
+++ b/src/components/entities/share/EntityTitle.vue
@@ -20,7 +20,7 @@ const title = useVModel(props, 'title', emit);
     placeholder="Enter title..."
     :style="`font-size: ${+entityData.font_size + 10}px`"
     :class="[
-      'w-full mb-4 font-bold pl-2',
+      'w-full my-4 font-bold pl-2',
       {
         'text-center': entityData.entity_title_position === 'center',
         'text-end': entityData.entity_title_position === 'right'
diff --git a/src/components/entities/share/TextFontMenu.vue b/src/components/entities/share/TextFontMenu.vue
index b3f4f06b2019499424df7a511ddf156777e323f1..24cfbbe8be4a1bd1ea1e1e90352e59b5604f3070 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',
+            'w-20 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',
             {
               '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/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/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..00767a4bf4c417f0a6d9bcd6a0ebee39d25956e0
--- /dev/null
+++ b/src/modules/entities/DividerItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { IDivider } from '@/app/interfaces/entities';
+
+interface Props {
+  entityData: IDivider;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <section class="entityContainer relative px-16 py-6">
+    <BaseDivider :type="entityData.divider_type" :height="entityData.divider_height" />
+    <DividerMenu :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 100%
rename from src/modules/EntitiesList.vue
rename to src/modules/entities/EntitiesList.vue
diff --git a/src/modules/EntityItem.vue b/src/modules/entities/EntityItem.vue
similarity index 76%
rename from src/modules/EntityItem.vue
rename to src/modules/entities/EntityItem.vue
index 335914c4ffbae6f2176aa7c1abe27f8ec3992ba8..9c4a61126f35a63bb7135a76f551bc973ae91680 100644
--- a/src/modules/EntityItem.vue
+++ b/src/modules/entities/EntityItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IEntity } from '@/app/interfaces/environment';
 import { useVModel } from '@vueuse/core';
-import type { IImage, IText } from '@/app/interfaces/entities';
+import type { IDivider, IImage, IText } from '@/app/interfaces/entities';
 interface Props {
   entity: IEntity;
 }
@@ -12,11 +12,9 @@ const entity = useVModel(props, 'entity', emit);
 
 <template>
   <div>
+    <DividerItem v-if="entity.entity_type === 'divider'" v-model:entityData="entity as IDivider" />
     <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>
 
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 5cce255b8cd3916fdd9714cdf818cdeccee2d038..09632f8155c4bb1c6e3e61ff14e59a1bb192ab9a 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useVModel, useWindowSize } from '@vueuse/core';
+import { useElementSize, useVModel, useWindowSize } from '@vueuse/core';
 import type { IImage } from '@/app/interfaces/entities';
 import { editEntity } from '@/app/helpers';
 import { cropImage } from '@/app/helpers/images';
@@ -12,6 +12,7 @@ const emit = defineEmits(['update:entityData']);
 const entityData = useVModel(props, 'entityData', emit);
 
 const isModalCropImage = ref<boolean>(false);
+const isEditMode = ref<boolean>(false);
 const { width: windowWidth } = useWindowSize();
 
 const textContainerWidth = computed(() => {
@@ -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 py-2 px-16 transition-all',
       {
         'justify-start': entityData.entity_position === 'left',
         'justify-center': entityData.entity_position === 'center',
@@ -105,12 +107,27 @@ const openCropImageModal = () => (isModalCropImage.value = true);
           />
         </div>
       </div>
-      <ImageMenu v-model:entityData="entityData" @openCropImageModal="openCropImageModal" />
+      <div class="speedDial absolute left-2 top-0">
+        <span>Edit mode</span>
+        <ToggleSwitch v-model="isEditMode" />
+      </div>
+      <ImageMenu
+        v-show="isEditMode"
+        v-model:entityData="entityData"
+        @openCropImageModal="openCropImageModal"
+      />
     </div>
-  </div>
+  </section>
 </template>
 
-<style>
+<style scoped>
+.entityContainer {
+  min-height: min-content;
+  transition: all 0.2s ease;
+}
+.entityContainer:hover {
+  min-height: 180px;
+}
 .entityContainer .speedDial {
   opacity: 0;
 }
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index b8f4c9247a0a7a660448ae977912cd82ecea30e0..f6e82f80ca2fd4768be9c3a4876455ec9d6e8188 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -1,5 +1,5 @@
 <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';
 
@@ -8,6 +8,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
+const container = ref();
 
 const editTitle = () => {
   editEntity({ ...entityData.value, title: entityData.value.title });
@@ -17,12 +18,14 @@ const editText = () => {
 };
 
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
+const { height: containerHeight } = useElementSize(container);
 </script>
 
 <template>
-  <div
+  <section
+    ref="container"
     :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',
@@ -50,15 +53,16 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
           class="w-full indent-5 leading-normal resize-none outline-0"
           :style="`font-size: ${entityData.font_size}px;`"
           placeholder="Enter text..."
-          rows="3"
+          rows="1"
           spellcheck="false"
           @change="editText"
           @input="triggerResize"
         />
       </div>
+      <div v-if="containerHeight < 145" class="aggregate transition-all h-0"></div>
       <TextMenu v-model:entityData="entityData" />
     </div>
-  </div>
+  </section>
 </template>
 
 <style>
@@ -68,6 +72,10 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
 .entityContainer:hover .speedDial {
   opacity: 100;
 }
+.entityContainer:hover .aggregate {
+  height: 100px;
+  transition: all 0.2s ease-in-out;
+}
 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..68acef48861567d153a761fd6e950aa386ab3f31
--- /dev/null
+++ b/src/modules/entities/menu/DividerMenu.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { deleteEntity, editEntity } from '@/app/helpers';
+import type { IDivider } from '@/app/interfaces/entities';
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  entityData: IDivider;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entityData = useVModel(props, 'entityData', emit);
+
+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);
+  }
+  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..6aaab3c9677d8ab4c080deff31bcdaa7ec3dd090 100644
--- a/src/modules/entities/menu/ImageMenu.vue
+++ b/src/modules/entities/menu/ImageMenu.vue
@@ -83,13 +83,13 @@ const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
   </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"
+    class="speedDial h-12 absolute left-2 top-0 translate-y-full 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"
+    class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none"
   >
     <ImagePositionMenu
       :entityData="entityData"
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..ca8b5b961ed79ab30a70293ac46b1dcb9837d1dd 100644
--- a/src/output.css
+++ b/src/output.css
@@ -652,6 +652,10 @@ video {
   top: 0.5rem;
 }
 
+.left-12 {
+  left: 3rem;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -682,6 +686,11 @@ video {
   margin-right: auto;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -746,6 +755,10 @@ video {
   display: table;
 }
 
+.hidden {
+  display: none;
+}
+
 .size-10 {
   width: 2.5rem;
   height: 2.5rem;
@@ -766,6 +779,11 @@ video {
   height: 2rem;
 }
 
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -790,6 +808,18 @@ video {
   height: 5rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
+.h-28 {
+  height: 7rem;
+}
+
+.h-0 {
+  height: 0px;
+}
+
 .max-h-\[700px\] {
   max-height: 700px;
 }
@@ -854,6 +884,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));
 }
@@ -1094,6 +1134,16 @@ video {
   padding-bottom: 2rem;
 }
 
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pl-0 {
   padding-left: 0px;
 }
@@ -1233,6 +1283,14 @@ video {
   transition-duration: 150ms;
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
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>