diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 8180a9be445470f5b6e46c3ab1dfd2e49cc35899..053d35139dc98b727a9a7a7354c0732cd08813c3 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -10,6 +10,7 @@ declare module 'vue' {
     App: typeof import('./App.vue')['default']
     Avatar: typeof import('primevue/avatar')['default']
     BaseDivider: typeof import('./../shared/BaseDivider.vue')['default']
+    BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
     BaseSidebarMenu: typeof import('./../modules/BaseSidebarMenu.vue')['default']
     Button: typeof import('primevue/button')['default']
     CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
@@ -17,23 +18,28 @@ declare module 'vue' {
     Dialog: typeof import('primevue/dialog')['default']
     Divider: typeof import('primevue/divider')['default']
     Drawer: typeof import('primevue/drawer')['default']
+    EntitiesList: typeof import('./../modules/EntitiesList.vue')['default']
     EntityItem: typeof import('./../modules/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']
-    ImagePositionMenu: typeof import('./../components/editEntityMenu/ImagePositionMenu.vue')['default']
-    ImageSizeMenu: typeof import('./../components/editEntityMenu/ImageSizeMenu.vue')['default']
-    ImageStateMenu: typeof import('./../components/editEntityMenu/ImageStateMenu.vue')['default']
+    ImageMenu: typeof import('./../modules/entities/menu/ImageMenu.vue')['default']
+    ImagePositionMenu: typeof import('./../components/entities/image/ImagePositionMenu.vue')['default']
+    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']
+    PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.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']
-    TextFontMenu: typeof import('./../components/editEntityMenu/TextFontMenu.vue')['default']
+    TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
     TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
-    TextPositionMenu: typeof import('./../components/editEntityMenu/TextPositionMenu.vue')['default']
-    TextStateMenu: typeof import('./../components/editEntityMenu/TextStateMenu.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']
     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
new file mode 100644
index 0000000000000000000000000000000000000000..2372f5f92e96bbf7542e4d3cd865b6b28a2666c8
--- /dev/null
+++ b/src/app/helpers/images.ts
@@ -0,0 +1,52 @@
+import type { IEntity } from '@/app/interfaces/environment';
+import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
+import type { IImage } from '@/app/interfaces/entities';
+import { useWebsocketStore } from '@/app/stores/websocket';
+
+export const addUrlsToImageEntities = (entities: IEntity[]) => {
+  const filesWebsocketStore = useFilesWebsocketStore();
+  const filesBuffer = filesWebsocketStore.filesBuffer;
+  let index = 0;
+  const entitiesToReturn = entities.map((entity: IEntity) => {
+    if (!entity.image_width) return entity;
+    if (entity.imageUrl) return entity;
+    if (filesWebsocketStore.imageUrl) {
+      // редактирование сущности изображения
+      entity.imageUrl = filesWebsocketStore.imageUrl;
+      filesWebsocketStore.cleanImageUrl();
+    } else {
+      filesBuffer[index] = new Blob([filesBuffer[index].data], { type: 'image/jpeg' });
+      entity.imageUrl = URL.createObjectURL(filesBuffer[index]);
+      index += 1;
+    }
+    return entity;
+  });
+  filesWebsocketStore.cleanFilesBuffer();
+  return entitiesToReturn;
+};
+
+export const checkIsImage = (entity: IEntity) => {
+  if (!entity.image_width) {
+    return entity;
+  }
+  const entityToReturn = { ...entity };
+  const filesWebsocketStore = useFilesWebsocketStore();
+  filesWebsocketStore.saveImageUrl(entityToReturn.imageUrl!);
+  delete entityToReturn.imageUrl;
+  return entityToReturn;
+};
+
+export const cropImage = async (newUrl: string, entity: IImage) => {
+  const filesWebsocketStore = useFilesWebsocketStore();
+  filesWebsocketStore.saveImageUrl(newUrl);
+  const websocketStore = useWebsocketStore();
+  const response = await fetch(newUrl);
+  const blob = await response.blob();
+  const buffer = await blob.arrayBuffer();
+  filesWebsocketStore.sendData(buffer);
+  const data = {
+    event: 'cropImage',
+    body: { ...entity }
+  };
+  websocketStore.sendData(data);
+};
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index f0b0eb889ed209911732af7515e4049153be64b7..252d449dadb7a715ee7151633fba19996323f007 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -1,33 +1,51 @@
 import { useInterfaceStore } from '@/app/stores/interface';
-import type { IEntity } from '@/app/interfaces/environment';
 import { useDataStore } from '@/app/stores/data';
 import { useWebsocketStore } from '@/app/stores/websocket';
+import type { IEntity } from '@/app/interfaces/environment';
+import { checkIsImage } from '@/app/helpers/images';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
+import type { IImage } from '@/app/interfaces/entities';
 
-export async function uploadFile($event: Event) {
-  const target = $event.target as HTMLInputElement;
-  if (target && target.files && target.files[0]) {
-    const file = target.files[0];
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.addEventListener('load', () => {
-      const url = reader.result;
-      const interfaceStore = useInterfaceStore();
-      interfaceStore.changeHomeBackgroundUrl(url);
-      localStorage.setItem('homeBackgroundUrl', url);
-    });
-  }
-}
+export const setDefaultHomeBackground = () => {
+  const interfaceStore = useInterfaceStore();
+  interfaceStore.resetHomeBackground();
+};
 
-export function setDefaultHomeBackground() {
+export const fetchForHomeEntities = () => {
+  const dataStore = useDataStore();
   const interfaceStore = useInterfaceStore();
-  interfaceStore.changeHomeBackgroundUrl(
-    'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg'
-  );
-  localStorage.removeItem('homeBackgroundUrl');
-}
+  const websocketStore = useWebsocketStore();
+  const filesWebsocketStore = useFilesWebsocketStore();
+  const filesBuffer = filesWebsocketStore.filesBuffer;
+  if (filesBuffer.length) {
+    filesBuffer[0] = new Blob([filesBuffer[0].data], { type: 'image/jpeg' });
+    interfaceStore.setHomeBackgroundFromDB(URL.createObjectURL(filesBuffer[0]));
+  }
+  if (!dataStore.homeEntities.length) {
+    const getHomeEntitiesData = {
+      event: 'getHomeEntities'
+    };
+    websocketStore.sendData(getHomeEntitiesData);
+  }
+  filesWebsocketStore.removeFirstFilesBuffer();
+};
+
+export const createHomeEntity = (newEntity: IEntity) => {
+  const websocketStore = useWebsocketStore();
+  if (newEntity.image_buffer) {
+    websocketStore.setFileData(newEntity);
+    const filesWebsocketStore = useFilesWebsocketStore();
+    return filesWebsocketStore.sendData(newEntity.image_buffer);
+  }
+  const data = {
+    event: 'createHomeEntity',
+    body: newEntity
+  };
+  websocketStore.sendData(data);
+};
 
-export const editEntity = (newState: IEntity, entityUuid: string) => {
+export const editEntity = (newState: IEntity) => {
+  newState = checkIsImage(newState);
   const websocketStore = useWebsocketStore();
   const data = {
     event: 'editHomeEntity',
@@ -60,20 +78,73 @@ export const changeOrderHomeEntity = (entityUuid: string, direction: 'up' | 'dow
   websocketStore.sendData(data);
 };
 
-export function addUrlsToImageEntities(entities: IEntity[]) {
-  const filesWebsocketStore = useFilesWebsocketStore();
-  const filesBlob = filesWebsocketStore.filesBlob;
-  let index = 0;
-  console.log('filesBlob[0].data', filesBlob[0]);
-  console.log('filesBlob[0].data', filesBlob[0]);
-  console.log('filesBlob.length', filesBlob.length);
-  return entities.map((entity: IEntity) => {
-    if (!entity.image_width) return entity;
-    filesBlob[index] = new Blob([filesBlob[index]], { type: 'image/jpeg' });
-    entity.imageUrl = URL.createObjectURL(filesBlob[index]);
-    console.log('entity.imageUrl', entity.imageUrl);
-    index += 1;
-    console.log('filesBlob.length', filesBlob.length);
-    return entity;
-  });
-}
+export const getImageSpeedDialSizeSmallerLabelsToRemove = (entity: IImage) => {
+  const elementsLabelsToRemove = [];
+  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+  if (initialImageWidth <= 400 || initialImageHeight <= 400) {
+    elementsLabelsToRemove.push('x0.25');
+    if (
+      initialImageWidth <= 200 ||
+      initialImageHeight <= 200 ||
+      (initialImageWidth >= 1600 && entity.text_position)
+    ) {
+      elementsLabelsToRemove.push('x0.5');
+      if (
+        initialImageWidth <= 95 ||
+        initialImageHeight <= 95 ||
+        (initialImageWidth >= 1066 && entity.text_position)
+      ) {
+        elementsLabelsToRemove.push('x0.75');
+      }
+    }
+  }
+  if (
+    (initialImageWidth >= 800 && entity.text_position) ||
+    entity.image_width < initialImageWidth
+  ) {
+    elementsLabelsToRemove.push('x1');
+  }
+  return elementsLabelsToRemove;
+};
+
+export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
+  const elementsLabelsToRemove = [];
+  const initialImageWidth = Math.ceil(entity.image_width / +entity.image_scale);
+  const initialImageHeight = Math.ceil(entity.image_height / +entity.image_scale);
+  if (
+    (initialImageWidth >= 800 && entity.text_position) ||
+    entity.image_width > initialImageWidth
+  ) {
+    elementsLabelsToRemove.push('x1');
+  }
+  if (
+    initialImageWidth >= 960 ||
+    initialImageHeight >= 960 ||
+    (initialImageWidth >= 640 && entity.text_position)
+  ) {
+    elementsLabelsToRemove.push('x1.25');
+    if (
+      initialImageWidth >= 800 ||
+      initialImageHeight >= 800 ||
+      (initialImageWidth >= 533 && entity.text_position)
+    ) {
+      elementsLabelsToRemove.push('x1.5');
+      if (
+        initialImageWidth >= 685 ||
+        initialImageHeight >= 685 ||
+        (initialImageWidth >= 457 && entity.text_position)
+      ) {
+        elementsLabelsToRemove.push('x1.75');
+        if (
+          initialImageWidth >= 600 ||
+          initialImageHeight >= 600 ||
+          (initialImageWidth >= 400 && entity.text_position)
+        ) {
+          elementsLabelsToRemove.push('x2');
+        }
+      }
+    }
+  }
+  return elementsLabelsToRemove;
+};
diff --git a/src/app/interfaces/index.ts b/src/app/interfaces/index.ts
index fcaa1f8132010ef7b5c0ffad8643ea3ff0565535..b518d74ab4e5202f9a0e27135ffa581a3716aa42 100644
--- a/src/app/interfaces/index.ts
+++ b/src/app/interfaces/index.ts
@@ -1,5 +1,5 @@
 export interface IImageMainInfo {
-  image_url: string;
+  imageUrl: string;
   image_width: number;
   image_height: number;
 }
diff --git a/src/app/stores/filesWebsocket.ts b/src/app/stores/filesWebsocket.ts
index 44e27a4e2067c5bf2a86a324598adc8dbeaa4508..02dcc58b61115e5748b29c19ba1d3b23084aa821 100644
--- a/src/app/stores/filesWebsocket.ts
+++ b/src/app/stores/filesWebsocket.ts
@@ -1,50 +1,47 @@
 import { defineStore } from 'pinia';
-import { useDataStore } from '@/app/stores/data';
-import type { IEntity } from '@/app/interfaces/environment';
 import { useInterfaceStore } from '@/app/stores/interface';
-import { useWebsocketStore } from '@/app/stores/websocket';
 
 export const useFilesWebsocketStore = defineStore('filesWebsocketStore', () => {
-  const socket = ref();
-  const dataStore = useDataStore();
   const interfaceStore = useInterfaceStore();
-  const homeEntities = computed(() => dataStore.homeEntities);
-  const filesBlob = ref([]);
+
+  const socket = ref();
+  const filesBuffer = ref([]);
+  const imageUrl = ref();
 
   onMounted(() => {
     socket.value = new WebSocket('ws://localhost:5001');
     socket.value.binaryType = 'arraybuffer';
-    socket.value.onmessage = (response: any) => {
+    socket.value.onmessage = (response) => {
       console.log('response: ', response);
-      switch (response?.event) {
-        case 'changeHomeBackgroundUrl':
-          interfaceStore.setHomeBackgroundUrlFromDB(response.data?.setting_value);
-          break;
-        case 'editImageHomeEntity': {
-          let entities = [...dataStore.homeEntities];
-          entities = entities.map((entity: IEntity) => {
-            if (entity.entity_uuid !== response.data.entity_uuid) return entity;
-            return response.data;
-          });
-          dataStore.editHomeEntities(entities);
-          break;
-        }
-        default: {
-          console.log('default');
-          filesBlob.value.push(response);
-        }
+      if (response?.data?.byteLength) {
+        filesBuffer.value.push(response);
       }
-    };
-    socket.value.onclose = () => {
-      console.log('Websocket connection closed');
-    };
-    socket.value.onerror = () => {
-      console.log('Websocket caught an error');
+      interfaceStore.setIsFetchedForBackground();
     };
   });
 
-  function sendData(data: any) {
+  function removeFirstFilesBuffer() {
+    filesBuffer.value.shift();
+  }
+  function cleanFilesBuffer() {
+    filesBuffer.value = [];
+  }
+  function saveImageUrl(url: string) {
+    imageUrl.value = url;
+  }
+  function cleanImageUrl() {
+    imageUrl.value = '';
+  }
+  function sendData(data: unknown) {
     socket.value.send(data);
   }
-  return { filesBlob, sendData };
+  return {
+    filesBuffer,
+    imageUrl,
+    cleanFilesBuffer,
+    removeFirstFilesBuffer,
+    saveImageUrl,
+    cleanImageUrl,
+    sendData
+  };
 });
diff --git a/src/app/stores/interface.ts b/src/app/stores/interface.ts
index 2485d0c63952d64880d04009b8e0da95d29cff47..a98f1e4004eaa07da354030b6d048a8188736fd5 100644
--- a/src/app/stores/interface.ts
+++ b/src/app/stores/interface.ts
@@ -2,39 +2,58 @@ import { defineStore } from 'pinia';
 import { useWebsocketStore } from '@/app/stores/websocket';
 
 export const useInterfaceStore = defineStore('interfaceStore', () => {
-  const homeBackgroundUrl = ref<string>(
-    'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg'
-  );
-  const defaultHomeBackgroundUrl = ref<string>(
-    'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg'
+  const websocketStore = useWebsocketStore();
+
+  const defaultHomeBackground = ref<string>(
+    'https://t3.ftcdn.net/jpg/05/01/28/98/360_F_501289843_4ITbthNCydFQGgJmoZe4IQKchItBubqZ.jpg'
   );
-  onMounted(() => {
-    homeBackgroundUrl.value =
-      localStorage.getItem('homeBackgroundUrl') || defaultHomeBackgroundUrl.value;
-  });
-  function changeHomeBackgroundUrl(newUrl: string) {
-    homeBackgroundUrl.value = newUrl;
-    const websocketStore = useWebsocketStore();
+  const homeBackground = ref<string>(defaultHomeBackground.value);
+  const isFetchedForBackground = ref<boolean>(false);
+
+  function setIsFetchedForBackground() {
+    isFetchedForBackground.value = true;
+    console.log('isFetchedForBackground.value', isFetchedForBackground.value);
+  }
+
+  function resetHomeBackground() {
+    homeBackground.value = defaultHomeBackground.value;
     const data = {
-      event: 'changeHomeBackgroundUrl',
-      body: {
-        setting_name: 'homeBackgroundUrl',
-        setting_value: newUrl
-      }
+      event: 'removeHomeBackground'
     };
     websocketStore.sendData(data);
   }
-  function setHomeBackgroundUrlFromDB(url: string | null) {
+  function changeHomeBackground(newUrl: string) {
+    homeBackground.value = newUrl;
+    const image = new Image();
+    image.src = newUrl;
+    image.onload = async () => {
+      const response = await fetch(newUrl);
+      const blob = await response.blob();
+      const data = {
+        event: 'changeHomeBackground',
+        body: {
+          setting_name: 'homeBackground',
+          setting_value: newUrl,
+          extension: blob.type
+        }
+      };
+      websocketStore.sendData(data);
+    };
+  }
+  function setHomeBackgroundFromDB(url: string | null) {
     if (!url) {
       return;
     }
-    homeBackgroundUrl.value = url;
+    homeBackground.value = url;
   }
 
   return {
-    homeBackgroundUrl,
-    defaultHomeBackgroundUrl,
-    changeHomeBackgroundUrl,
-    setHomeBackgroundUrlFromDB
+    homeBackground,
+    defaultHomeBackground,
+    isFetchedForBackground,
+    setIsFetchedForBackground,
+    resetHomeBackground,
+    changeHomeBackground,
+    setHomeBackgroundFromDB
   };
 });
diff --git a/src/app/stores/websocket.ts b/src/app/stores/websocket.ts
index ab36840309aaf149721f0a25b4c3e67ecb848435..6638f7ca530cc35d496d7ce830330bbcd2ed789e 100644
--- a/src/app/stores/websocket.ts
+++ b/src/app/stores/websocket.ts
@@ -2,40 +2,37 @@ import { defineStore } from 'pinia';
 import { useDataStore } from '@/app/stores/data';
 import type { IEntity } from '@/app/interfaces/environment';
 import { useInterfaceStore } from '@/app/stores/interface';
-import { addUrlsToImageEntities } from '@/app/helpers';
+import { addUrlsToImageEntities } from '@/app/helpers/images';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 
 export const useWebsocketStore = defineStore('websocketStore', () => {
-  const socket = ref();
   const dataStore = useDataStore();
   const interfaceStore = useInterfaceStore();
   const filesWebsocketStore = useFilesWebsocketStore();
+
+  const filesBufferLength = computed(() => filesWebsocketStore.filesBuffer.length);
   const homeEntities = computed(() => dataStore.homeEntities);
+  const imageEntitiesCount = computed(
+    () => homeEntities.value.filter((entity) => entity.image_width).length
+  );
+
+  const socket = ref();
+  const initialDataToSend = ref();
+  const isInitialAddUrlsToImageEntitiesFinished = ref<boolean>(false);
   const file = ref();
-  const filesBlobLength = computed(() => filesWebsocketStore.filesBlob.length);
-  function setFileData(data: any) {
-    file.value = data;
-  }
+
   onMounted(() => {
     socket.value = new WebSocket('ws://localhost:5000');
-    socket.value.onopen = () => {
-      const getHomeEntitiesData = {
-        event: 'getHomeEntities'
-      };
-      socket.value.send(JSON.stringify(getHomeEntitiesData));
-      const getHomeBackgroundUrlData = {
-        event: 'getHomeBackgroundUrl'
-      };
-      socket.value.send(JSON.stringify(getHomeBackgroundUrlData));
+    socket.value.onopen = async () => {
+      socket.value.send(JSON.stringify(initialDataToSend.value));
     };
-    socket.value.onmessage = (event: any) => {
-      console.log('event: ', event);
+    socket.value.onmessage = async (event: any) => {
       const response = JSON.parse(event.data);
       console.log('response: ', response);
       switch (response.event) {
         case 'getHomeEntities': {
           const entities = response.data;
-          if (filesBlobLength.value) {
+          if (imageEntitiesCount.value && filesBufferLength.value === imageEntitiesCount.value) {
             const entitiesAddedUrls = addUrlsToImageEntities(entities);
             dataStore.editHomeEntities(entitiesAddedUrls);
           } else {
@@ -43,38 +40,51 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
           }
           break;
         }
-        case 'getHomeBackgroundUrl':
-          interfaceStore.setHomeBackgroundUrlFromDB(response.data?.setting_value);
+        case 'getHomeBackground': {
+          const blob = new Blob([response.data.setting_value.data], {
+            type: `image/jpeg`
+          });
+          const url = URL.createObjectURL(blob);
+          interfaceStore.setHomeBackgroundFromDB(url);
           break;
+        }
         case 'createHomeEntity': {
           const entities = [...homeEntities.value];
+          if (response.data.image_width) {
+            response.data.imageUrl = filesWebsocketStore.imageUrl;
+            filesWebsocketStore.cleanImageUrl();
+          }
           entities.push(response.data);
           dataStore.editHomeEntities([...entities]);
           break;
         }
         case 'createImageHomeEntity': {
+          if (!file.value) break;
           const data = {
             event: 'createHomeEntity',
             body: {
               ...file.value
             }
           };
-          console.log('send now:');
+          file.value = null;
           sendData(data);
-          console.log('sent!');
           break;
         }
         case 'editHomeEntity': {
-          let entities = [...dataStore.homeEntities];
+          let entities = [...homeEntities.value];
           entities = entities.map((entity: IEntity) => {
             if (entity.entity_uuid !== response.data.entity_uuid) return entity;
+            if (response.data.image_width) {
+              response.data.imageUrl = filesWebsocketStore.imageUrl;
+              filesWebsocketStore.cleanImageUrl();
+            }
             return response.data;
           });
           dataStore.editHomeEntities(entities);
           break;
         }
         case 'deleteHomeEntity': {
-          let newState = [...dataStore.homeEntities];
+          let newState = [...homeEntities.value];
           newState = newState.filter(
             (entity: IEntity) => entity.entity_uuid !== response.data.entity_uuid
           );
@@ -82,7 +92,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
           break;
         }
         case 'changeOrderHomeEntity': {
-          const newState = dataStore.homeEntities;
+          const newState = [...homeEntities.value];
           const entityIndex = newState.findIndex(
             (entity: IEntity) => entity.entity_uuid === response.data.entity_uuid
           );
@@ -98,6 +108,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
             ];
           }
           dataStore.editHomeEntities(newState);
+          break;
         }
       }
     };
@@ -109,15 +120,28 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
     };
   });
 
-  watch(filesBlobLength, () => {
-    console.log('watch');
-    const entitiesAddedUrls = addUrlsToImageEntities(homeEntities.value);
-    console.log('entitiesAddedUrls', entitiesAddedUrls);
-    dataStore.setHomeEntities(entitiesAddedUrls);
+  watch([filesBufferLength, homeEntities], () => {
+    if (
+      (homeEntities.value.length && filesBufferLength.value === imageEntitiesCount.value) ||
+      (isInitialAddUrlsToImageEntitiesFinished.value && filesBufferLength.value)
+    ) {
+      const entitiesAddedUrls = addUrlsToImageEntities(homeEntities.value);
+      dataStore.setHomeEntities(entitiesAddedUrls);
+      isInitialAddUrlsToImageEntitiesFinished.value = true;
+    }
   });
-
+  function setFileData(data: any) {
+    file.value = data;
+  }
+  function setInitialDataToSend(data: any) {
+    initialDataToSend.value = data;
+  }
   function sendData(data: any) {
     socket.value.send(JSON.stringify(data));
   }
-  return { sendData, setFileData };
+  return {
+    setInitialDataToSend,
+    sendData,
+    setFileData
+  };
 });
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 8c142088ffd8a34331e9d53e15591b037b72f93b..1e1615dd6dceef7bd4636154f91f7a3bb8e5e975 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import type { IImage } from '@/app/interfaces/entities';
-import { deleteEntity, editEntity } from '@/app/helpers';
-import { useDataStore } from '@/app/stores/data';
 import { useVModel, useWindowSize } from '@vueuse/core';
-import PositionMenu from '@/components/editEntityMenu/ImagePositionMenu.vue';
-import StateMenu from '@/components/editEntityMenu/ImageStateMenu.vue';
-import CropImageModal from '@/modules/CropImageModal.vue';
-import SizeMenu from '@/components/editEntityMenu/ImageSizeMenu.vue';
-import FontMenu from '@/components/editEntityMenu/TextFontMenu.vue';
+import type { IImage } from '@/app/interfaces/entities';
+import { editEntity } from '@/app/helpers';
+import { cropImage } from '@/app/helpers/images';
 
 interface Props {
   entityData: IImage;
@@ -15,104 +10,38 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['update:entityData']);
 const entityData = useVModel(props, 'entityData', emit);
-onMounted(() => {
-  const prevUrl = entityData.value.image_url;
-  const newData = fetch('');
+
+const isModalCropImage = ref<boolean>(false);
+const { width: windowWidth } = useWindowSize();
+
+const textContainerWidth = computed(() => {
+  if (entityData.value?.paragraph_size === 'half')
+    return (windowWidth.value - 160 - entityData.value.image_width) / 2;
+  return windowWidth.value - 160 - entityData.value.image_width;
 });
-function editTitle() {
-  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_uuid);
-}
+
+const editTitle = () => {
+  editEntity({ ...entityData.value, title: entityData.value.title });
+};
 const editText = () => {
-  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.entity_uuid);
+  editEntity({ ...entityData.value, text: entityData.value.text });
 };
-function addTitle() {
-  editEntity(
-    { ...entityData.value, title: 'Title', entity_title_position: 'center' },
-    entityData.value.entity_uuid
-  );
-  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
-}
-function removeTitle() {
-  const newState = { ...entityData.value };
-  newState.title = null;
-  editEntity({ ...newState }, entityData.value.entity_uuid);
-  entityData.value = newState;
-}
-function addText() {
-  editEntity(
-    {
-      ...entityData.value,
-      text: 'Text',
-      text_position: 'right',
-      font_size: '20',
-      paragraph_size: 'full'
-    },
-    entityData.value.entity_uuid
-  );
-  entityData.value = { ...entityData.value, text: 'Text' };
-}
-function removeText() {
-  const newState = { ...entityData.value };
-  newState.text = null;
-  newState.text_position = null;
-  newState.font_size = null;
-  newState.paragraph_size = null;
-  editEntity({ ...newState }, entityData.value.entity_uuid);
-  entityData.value = newState;
-}
-function editPosition(position: 'left' | 'center' | 'right') {
-  entityData.value.entity_position = position;
-  editEntity({ ...entityData.value, entity_position: position }, entityData.value.entity_uuid);
-}
-function editTitlePosition(position: 'left' | 'center' | 'right') {
-  entityData.value.entity_title_position = position;
-  editEntity(
-    { ...entityData.value, entity_title_position: position },
-    entityData.value.entity_uuid
-  );
-}
-function editTextPosition(position: 'left' | 'right') {
-  entityData.value.text_position = position;
-  editEntity({ ...entityData.value, text_position: position }, entityData.value.entity_uuid);
-}
-function editParagraphWidth(widthMode: 'full' | 'half') {
-  entityData.value.paragraph_size = widthMode;
-  editEntity({ ...entityData.value, paragraph_size: widthMode }, entityData.value.entity_uuid);
-}
-const dataStore = useDataStore();
-const homeEntities = computed(() => dataStore.homeEntities);
-
-const isModalCropImage = ref<boolean>(false);
-function openUploadFileModal() {
-  isModalCropImage.value = true;
-}
-function saveImage(newUrl: string, newWidth: number, newHeight: number) {
-  entityData.value.image_url = newUrl;
+const saveImage = async (newUrl: string, newWidth: number, newHeight: number) => {
+  entityData.value.imageUrl = newUrl;
   entityData.value.image_width = newWidth;
   entityData.value.image_height = newHeight;
-  editEntity({ ...entityData.value }, entityData.value.entity_uuid);
+  await cropImage(newUrl, entityData.value);
   isModalCropImage.value = false;
-}
-
-function scaleImage(scale: string) {
+};
+const scaleImage = (scale: string) => {
   const initialWidth = Math.ceil(entityData.value.image_width / +entityData.value.image_scale);
   entityData.value.image_width = initialWidth * +scale;
   const initialHeight = Math.ceil(entityData.value.image_height / +entityData.value.image_scale);
   entityData.value.image_height = initialHeight * +scale;
   entityData.value.image_scale = scale;
-  editEntity({ ...entityData.value }, entityData.value.entity_uuid);
-}
-function changeFontSize(newSize: '16' | '20' | '24' | '40' | '64') {
-  entityData.value.font_size = newSize;
-  editEntity({ ...entityData.value, font_size: newSize }, entityData.value.entity_uuid);
-}
-
-const { width: windowWidth } = useWindowSize();
-const textContainerWidth = computed(() => {
-  if (entityData.value?.paragraph_size === 'half')
-    return (windowWidth.value - 150 - entityData.value.image_width) / 2;
-  return windowWidth.value - 150 - entityData.value.image_width;
-});
+  editEntity({ ...entityData.value });
+};
+const openCropImageModal = () => (isModalCropImage.value = true);
 </script>
 
 <template>
@@ -132,23 +61,12 @@ const textContainerWidth = computed(() => {
       @saveImage="saveImage"
     />
     <div class="flex flex-col">
-      <input
-        ref="input"
-        v-if="entityData.title || entityData.title === ''"
-        type="text"
-        v-model="entityData.title"
-        @change="editTitle"
-        placeholder="Enter title..."
-        :style="`font-size: ${+entityData.font_size + 10}px`"
-        :class="[
-          'w-full mb-4 font-bold pl-2',
-          {
-            'text-center': entityData.entity_title_position === 'center',
-            'text-end': entityData.entity_title_position === 'right'
-          }
-        ]"
+      <EntityTitle
+        v-model:title="entityData.title"
+        :entityData="entityData"
+        @editTitle="editTitle"
       />
-      <div class="flex gap-8" :style="`height: ${entityData.image_height}px`">
+      <div class="flex gap-[32px]" :style="`height: ${entityData.image_height}px`">
         <div
           :class="[
             'imageContainer relative leading-none min-h-[100px] min-w-[100px]',
@@ -159,66 +77,39 @@ const textContainerWidth = computed(() => {
           :style="`width: ${entityData.image_width}px; height: ${entityData.image_height}px`"
         >
           <img
-            :src="entityData?.image_url"
+            :src="entityData?.imageUrl"
             :alt="`Image ${entityData?.title}` || 'Image'"
             :width="entityData.image_width"
             :height="entityData.image_height"
             class="'max-h-[700px] min-h-[100px] object-contain order-1'"
           />
           <div class="speedDialSize absolute left-0 top-0 transition-all select-none">
-            <SizeMenu :entityData="entityData" @scaleImage="scaleImage" />
+            <ImageSizeMenu :entityData="entityData" @scaleImage="scaleImage" />
           </div>
         </div>
         <div
+          v-if="entityData.text_position"
           class="textContainer relative leading-none"
           :style="`width: ${textContainerWidth}px; height: ${entityData.image_height}px`"
         >
           <textarea
-            v-if="entityData.text_position"
             ref="textarea"
             v-model="entityData.text"
             class="w-full indent-5 leading-normal overflow-auto resize-none outline-0 order-2"
-            @change="editText"
             placeholder="Enter text..."
             rows="7"
             :style="`font-size: ${entityData.font_size}px; height: ${entityData.image_height}px;`"
             spellcheck="false"
+            @change="editText"
           />
         </div>
       </div>
-      <div class="speedDial absolute left-2 top-0 transition-all select-none">
-        <StateMenu
-          :entityData="entityData"
-          @deleteEntity="deleteEntity"
-          @addTitle="addTitle"
-          @removeTitle="removeTitle"
-          @addText="addText"
-          @removeText="removeText"
-          @openUploadFileModal="openUploadFileModal"
-        />
-      </div>
-      <div
-        class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none"
-      >
-        <FontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
-      </div>
-      <div
-        v-if="homeEntities.length > 1"
-        class="speedDial absolute left-2 bottom-0 transition-all select-none"
-      >
-        <PositionMenu
-          :entityData="entityData"
-          @editPosition="editPosition"
-          @editTitlePosition="editTitlePosition"
-          @editTextPosition="editTextPosition"
-          @editParagraphWidth="editParagraphWidth"
-        />
-      </div>
+      <ImageMenu v-model:entityData="entityData" @openCropImageModal="openCropImageModal" />
     </div>
   </div>
 </template>
 
-<style scoped>
+<style>
 .entityContainer .speedDial {
   opacity: 0;
 }
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 7f491a041fdd98f878d676c633126e8af5e0db95..79cb5de20c3cd37a52417fa158cf4615b372310b 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,95 +1,89 @@
 <script setup lang="ts">
 import { useElementSize } from '@vueuse/core';
-import { setDefaultHomeBackground } from '@/app/helpers';
 import { useInterfaceStore } from '@/app/stores/interface';
 import { useDataStore } from '@/app/stores/data';
 import { useAuthorizationStore } from '@/app/stores/authorization';
 import { useWebsocketStore } from '@/app/stores/websocket';
 import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces/index.ts';
-import { v4 as uuidv4 } from 'uuid';
-import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
+import { createHomeEntity, fetchForHomeEntities, setDefaultHomeBackground } from '@/app/helpers';
+
+const dataStore = useDataStore();
+const interfaceStore = useInterfaceStore();
+const authorizationStore = useAuthorizationStore();
+const websocketStore = useWebsocketStore();
 
 const backgroundImage = ref();
-const { height: backgroundImageHeight } = useElementSize(backgroundImage);
+const { width: backgroundImageWidth, height: backgroundImageHeight } =
+  useElementSize(backgroundImage);
+const backgroundSize = computed(() => {
+  if (backgroundImageWidth.value > backgroundImageHeight.value) {
+    return 'auto 100%';
+  } else {
+    return '100% auto';
+  }
+});
 const entitiesContainer = ref();
 const { height: entitiesHeight } = useElementSize(entitiesContainer);
 const splitterPanelBackground = ref();
 const { height: splitterPanelBackgroundHeight } = useElementSize(splitterPanelBackground);
 
-const dataStore = useDataStore();
-const interfaceStore = useInterfaceStore();
-const authorizationStore = useAuthorizationStore();
-const websocketStore = useWebsocketStore();
-const filesWebsocketStore = useFilesWebsocketStore();
 const entities = computed(() => dataStore.homeEntities);
-watchEffect(() => {
-  console.log('entities', entities.value, entities);
+const backgroundUrl = computed<string>(() => interfaceStore.homeBackground);
+const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultHomeBackground);
+const isFetchedForBackground = computed(() => interfaceStore.isFetchedForBackground);
+const splitterHeight = computed(() => {
+  return splitterPanelBackgroundHeight.value + entitiesHeight.value + 100;
 });
-const backgroundUrl = computed<string>(() => interfaceStore.homeBackgroundUrl);
-const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultHomeBackgroundUrl);
-
-function addEntity(newEntity: IEntity) {
-  if (newEntity.image_blob) {
-    websocketStore.setFileData(newEntity);
-    return filesWebsocketStore.sendData(newEntity.image_blob);
-  }
-  const data = {
-    event: 'createHomeEntity',
-    body: {
-      ...newEntity
-    }
-  };
-  websocketStore.sendData(data);
-}
 
+const isModalUploadFile = ref<boolean>(false);
 const backgroundImageInfo = ref<IImageMainInfo>({
-  image_url: backgroundUrl.value,
+  imageUrl: backgroundUrl.value,
   image_width: 0,
   image_height: 0
 });
-const isModalUploadFile = ref<boolean>(false);
-function openUploadFileModal() {
-  isModalUploadFile.value = true;
-}
-function uploadFile($event: Event) {
+
+onMounted(() => {
+  const getHomeBackgroundData = {
+    event: 'getHomeBackground'
+  };
+  websocketStore.setInitialDataToSend(getHomeBackgroundData);
+});
+
+const unwatchBackground = watch([isFetchedForBackground], () => {
+  if (isFetchedForBackground.value) {
+    fetchForHomeEntities();
+    unwatchBackground();
+  }
+});
+
+const createEntity = (newEntity: IEntity) => {
+  createHomeEntity(newEntity);
+};
+const uploadFile = ($event: Event) => {
   const target = $event.target as HTMLInputElement;
-  if (target && target.files && target.files[0]) {
-    let image = new Image();
-    const file = target.files[0];
+  if (target && target.files && target.files?.[0]) {
+    const image = new Image();
+    const file = target.files![0];
     const url = URL.createObjectURL(file);
     image.src = url;
     image.onload = function () {
-      backgroundImageInfo.value.image_url = url;
+      backgroundImageInfo.value.imageUrl = url;
       backgroundImageInfo.value.image_width = image.width;
       backgroundImageInfo.value.image_height = image.height;
-      openUploadFileModal();
+      isModalUploadFile.value = true;
     };
   }
-}
-function saveImage(finalImageUrl: string) {
-  const interfaceStore = useInterfaceStore();
-  interfaceStore.changeHomeBackgroundUrl(finalImageUrl);
+};
+const saveImage = (finalImageUrl: string) => {
+  interfaceStore.changeHomeBackground(finalImageUrl);
   isModalUploadFile.value = false;
-}
-
-const splitterHeight = computed(() => {
-  return splitterPanelBackgroundHeight.value + entitiesHeight.value + 100;
-});
-
-// function submitImage(e) {
-//   console.log('e.target.files[0]: ', e.target.files[0]);
-//   fetch('http://localhost:8000', {
-//     method: 'post',
-//     headers: { 'Content-Type': `multipart/form-data; boundary=8800-5553535` },
-//     body: e.target.files[0]
-//   });
-// }
+};
 </script>
 
 <template>
   <header>
-    <h1 class="text-center text-4xl py-4">Home page</h1>
+    <h1 class="text-center text-5xl font-bold py-4">Home page</h1>
   </header>
   <CropImageModal
     v-model:isVisible="isModalUploadFile"
@@ -102,47 +96,27 @@ const splitterHeight = computed(() => {
       layout="vertical"
       stateKey="homeSplitter"
       stateStorage="local"
+      gutterSize="10"
     >
       <SplitterPanel
-        :pt:root:style="`position: relative; background-image: url(${backgroundUrl}); background-size: 100% auto; max-height: ${backgroundImageHeight - 3}px; min-height: 200px;`"
+        :pt:root:style="`position: relative; background-image: url(${backgroundUrl});
+         background-size: 100% auto; max-height: ${backgroundImageHeight - 3}px; min-height: 200px;`"
         class="splitterPanelBackground"
       >
         <div ref="splitterPanelBackground" class="w-full h-full"></div>
-        <div
-          class="changeImageBlock absolute top-2 right-2 bg-black p-2 rounded-md hover:text-gray-300 transition-all select-none"
-        >
-          <!--          <form method="post" enctype="multipart/form-data">-->
-          <!--            <input type="file" name="image" @change="submitImage($event)" />-->
-          <!--          </form>-->
-          <input
-            type="file"
-            @change="uploadFile($event)"
-            onclick="this.value = null"
-            title="Change image"
-            accept="image/*"
-            class="w-2 pr-[135px] -mr-[135px] py-2 -my-2 pl-2 -ml-2 opacity-0"
-          />
-          <span><i class="pi pi-image mr-2"></i>Change image</span>
-        </div>
-        <button
-          @click.prevent="setDefaultHomeBackground"
-          v-if="backgroundImageInfo.image_url !== defaultBackgroundUrl"
-          class="returnDefaultImageBlock absolute top-16 right-2 bg-blue-600 p-2 transition-all rounded-md border-2 border-solid border-black select-none"
-        >
-          Return default image
-        </button>
+        <PageBackgroundMenu
+          :isBackgroundDefault="backgroundUrl !== defaultBackgroundUrl"
+          @uploadFile="uploadFile"
+          @setDefaultBackground="setDefaultHomeBackground"
+        />
       </SplitterPanel>
-      <SplitterPanel class="flex items-start justify-center"
-        ><div ref="entitiesContainer" class="w-full pt-4">
-          <EntityItem
-            v-for="entitiesItem of entities"
-            :entity="entitiesItem"
-            :key="entitiesItem.entity_uuid"
-          />
-          <div class="relative mt-2">
-            <CreateEntityMenu @addEntity="addEntity" />
+      <SplitterPanel class="flex items-start justify-center">
+        <Suspense>
+          <div ref="entitiesContainer" class="w-full pt-4">
+            <EntitiesList :entities="entities" @createEntity="createEntity" />
           </div>
-        </div>
+          <template #fallback><BaseLoader /></template
+        ></Suspense>
       </SplitterPanel>
     </Splitter>
   </main>
@@ -154,7 +128,7 @@ const splitterHeight = computed(() => {
   />
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .splitterPanelBackground > .changeImageBlock,
 .splitterPanelBackground > .returnDefaultImageBlock {
   opacity: 0;
@@ -165,7 +139,6 @@ const splitterHeight = computed(() => {
 }
 input[type=file], /* FF, IE7+, chrome (except button) */
 input[type=file]::-webkit-file-upload-button {
-  /* chromes and blink button */
   cursor: pointer;
 }
 </style>