diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 09dd91d0d5ac0ce7acfd1676abdd86d110b5c43b..3aa42f8ae43778cd689b283bb8d28a05e3e01e24 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -12,7 +12,4 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 'latest'
   },
-  rules: {
-    "no-undef": "off",
-  }
 }
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
new file mode 100644
index 0000000000000000000000000000000000000000..03d9549ea8e4ada36fb3ecbc30fef08175b7d728
--- /dev/null
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
\ No newline at end of file
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 71439895dc4713e099cb2e4f4db9df110de11be3..8b9bb3411cd0da18eead8dd10de1fe8c97718bb2 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -7,7 +7,6 @@ export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
   const [alias]: typeof import('[package-name]')['[from]']
-  const [import-names]: typeof import('[package-name]')['[import-names]']
   const axios: typeof import('axios')['default']
   const computed: typeof import('vue')['computed']
   const createApp: typeof import('vue')['createApp']
diff --git a/components.d.ts b/components.d.ts
index 88454d34c8c74b640da5264032b93b8c19405053..213ab65a4e6fa8ad0a32994eb6e65050d68bc5d9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,16 +13,16 @@ declare module 'vue' {
     Divider: typeof import('primevue/divider')['default']
     Drawer: typeof import('primevue/drawer')['default']
     EditImageEntityMenu: typeof import('./src/components/EditImageEntityMenu.vue')['default']
-    EditTextEntityMenu: typeof import('./src/components/EditTextEntityMenu.vue')['default']
     ImageItem: typeof import('./src/components/entities/ImageItem.vue')['default']
     LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
+    MoveMenu: typeof import('./src/components/editEntityMenus/text/MoveMenu.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SpeedDial: typeof import('primevue/speeddial')['default']
     Splitter: typeof import('primevue/splitter')['default']
     SplitterPanel: typeof import('primevue/splitterpanel')['default']
+    StateMenu: typeof import('./src/components/editEntityMenus/text/StateMenu.vue')['default']
     TextItem: typeof import('./src/components/entities/TextItem.vue')['default']
-    Toast: typeof import('primevue/toast')['default']
     Tree: typeof import('primevue/tree')['default']
     UserInfoHeaderWithSettings: typeof import('./src/components/UserInfoHeaderWithSettings.vue')['default']
   }
diff --git a/src/App.vue b/src/App.vue
index f084b516619dabc2c6082162fbb3a2a1d0dfdd4e..df298a2f11b3e8ede53c033d188615b659efdd2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import 'primeicons/primeicons.css';
 import BaseMenu from '@/modules/BaseMenu.vue';
+
 const visible = ref<boolean>(false);
 </script>
 
diff --git a/src/auto-imports.d.ts b/src/auto-imports.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b14a1099bc9d648fb7159fe55bce138199bb5388
--- /dev/null
+++ b/src/auto-imports.d.ts
@@ -0,0 +1,78 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const [alias]: typeof import('[package-name]')['[from]']
+  const [import-names]: typeof import('[package-name]')['[import-names]']
+  const axios: typeof import('axios')['default']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useMyFetch: typeof import('@vueuse/core')['useFetch']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+  // @ts-ignore
+  export type { RouteLocationRaw } from 'vue-router'
+  import('vue-router')
+}
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 2c70aad511232c5edaa8a7cc967a1a116443f9aa..8d679e0e63f356fb1d35b34bdff88c8722e1f133 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -19,15 +19,17 @@ const addImage = (files: FileList) => {
 
   const file = files[0];
   const reader = new FileReader();
+  console.log('file', file, 'type: ', typeof file);
   reader.readAsDataURL(file);
   reader.addEventListener('load', () => {
     const url = reader.result;
+    console.log('url length: ', url.length);
     emit('addEntity', {
-      type: 'image',
-      uuid: uuidv4(),
-      url,
-      position: 'left',
-      height: 300
+      entity_type: 'image',
+      entity_uuid: uuidv4(),
+      image_data: url,
+      image_position: 'left',
+      image_height: 300
     });
   });
 };
@@ -43,8 +45,8 @@ const speedDialItems = ref([
     icon: 'pi pi-pencil',
     command: () => {
       emit('addEntity', {
-        type: 'text',
-        uuid: uuidv4(),
+        entity_type: 'text',
+        entity_uuid: uuidv4(),
         text: ''
       });
     }
@@ -52,19 +54,16 @@ const speedDialItems = ref([
   {
     label: 'Image',
     icon: 'pi pi-image',
-    command: () => {
-      uploadFile();
-      console.log('uploadFile finished');
-    }
+    command: () => uploadFile()
   },
   {
     label: 'Table',
     icon: 'pi pi-table',
     command: () => {
       emit('addEntity', {
-        type: 'table',
-        uuid: uuidv4(),
-        columns: [
+        entity_type: 'table',
+        entity_uuid: uuidv4(),
+        table_columns: [
           {
             name: 'Name',
             type: 'text'
diff --git a/src/components/editEntityMenus/text/MoveMenu.vue b/src/components/editEntityMenus/text/MoveMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c77d79660eba1d306c7b2aea22188f5b1ee9828b
--- /dev/null
+++ b/src/components/editEntityMenus/text/MoveMenu.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity } from '@/helpers';
+import type { IText } from '@/interfaces/entities';
+import { useDataStore } from '@/stores/data';
+import type { IEntity } from '@/interfaces/environment';
+
+interface Props {
+  entityData: IText;
+}
+
+const props = defineProps<Props>();
+
+// const isResizable = computed(() => props.isResizable);
+// const position = computed(() => props.entityData.position);
+
+const speedDialMove = computed(() => {
+  const state = [];
+  const dataStore = useDataStore();
+  const entities = dataStore.homeEntities;
+  const entityIndex = entities.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  );
+  if (entityIndex !== 0) {
+    state.push({
+      label: 'Up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
+    });
+  }
+  if (entityIndex !== entities.length - 1) {
+    state.push({
+      label: 'Down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div>
+    <SpeedDial :model="speedDialMove" 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-arrows-alt"></i>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'flex flex-col bg-black bg-opacity-70 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')
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <span :class="item.icon" />
+          <span class="text-center">
+            {{ item.label }}
+          </span>
+        </div>
+      </template>
+    </SpeedDial>
+  </div>
+</template>
+
+<style>
+.speedDialRoot {
+  justify-content: flex-start !important;
+}
+</style>
diff --git a/src/components/editEntityMenus/text/StateMenu.vue b/src/components/editEntityMenus/text/StateMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e4eaf9a7dd40a28681c6f63173dcdadac1246f51
--- /dev/null
+++ b/src/components/editEntityMenus/text/StateMenu.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { deleteEntity } from '@/helpers';
+import type { IText } from '@/interfaces/entities';
+
+interface Props {
+  entityData: IText;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits([
+  'deleteEntity',
+  'addTitle',
+  'removeTitle'
+  // 'toLeftPosition',
+  // 'toCenterPosition',
+  // 'toRightPosition',
+  // 'toggleIsResizable'
+]);
+
+const speedDialState = computed(() => {
+  const state = [];
+  if (!props.entityData?.title && props.entityData?.title !== '') {
+    state.push({
+      label: 'Title',
+      icon: 'pi pi-plus',
+      command: () => emit('addTitle')
+    });
+  }
+  if (props.entityData?.title || props.entityData?.title === '') {
+    state.push({
+      label: 'Title',
+      icon: 'pi pi-trash',
+      command: () => emit('removeTitle')
+    });
+  }
+  // state.push({
+  //   label: !isResizable.value ? 'Resize' : 'Stop resize',
+  //   icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
+  //   command: () => emit('toggleIsResizable')
+  // });
+  // switch (position.value) {
+  //   case 'left':
+  //     state.push({
+  //       label: 'Move to center',
+  //       icon: 'pi pi-align-center',
+  //       command: () => emit('toCenterPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to right',
+  //       icon: 'pi pi-arrow-right',
+  //       command: () => emit('toRightPosition')
+  //     });
+  //     break;
+  //   case 'center':
+  //     state.push({
+  //       label: 'Move to left',
+  //       icon: 'pi pi-arrow-left',
+  //       command: () => emit('toLeftPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to right',
+  //       icon: 'pi pi-arrow-right',
+  //       command: () => emit('toRightPosition')
+  //     });
+  //     break;
+  //   case 'right':
+  //     state.push({
+  //       label: 'Move to left',
+  //       icon: 'pi pi-arrow-left',
+  //       command: () => emit('toLeftPosition')
+  //     });
+  //     state.push({
+  //       label: 'Move to center',
+  //       icon: 'pi pi-align-center',
+  //       command: () => emit('toCenterPosition')
+  //     });
+  // }
+  state.push({
+    label: 'Delete',
+    icon: 'pi pi-trash',
+    command: () => deleteEntity(props.entityData.entity_uuid)
+  });
+  return state;
+});
+</script>
+
+<template>
+  <div>
+    <SpeedDial :model="speedDialState" 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-pen-to-square"></i>
+        </button>
+      </template>
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'flex flex-col bg-black bg-opacity-70 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')
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <span :class="item.icon" />
+          <span class="text-center">
+            {{ item.label }}
+          </span>
+        </div>
+      </template>
+    </SpeedDial>
+  </div>
+</template>
+
+<style>
+.speedDialRoot {
+  justify-content: flex-start !important;
+}
+</style>
diff --git a/src/components/entities/ImageItem.vue b/src/components/entities/ImageItem.vue
index d9c5870c037f63d648e2ad4f18abcd654157e766..744fc268f069612e2ad6b3521ae010b64ab04522 100644
--- a/src/components/entities/ImageItem.vue
+++ b/src/components/entities/ImageItem.vue
@@ -10,23 +10,33 @@ interface Props {
 }
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
+// const imageUrl = ref<string>();
+onMounted(() => {
+  console.log('entityData.value', entityData.value);
 
-const dataStore = useDataStore();
-const entities = computed(() => dataStore.homeEntities);
-
+  // const reader = new FileReader();
+  // const imageData = new Blob(entityData.value.image_data.data, {
+  //   type: 'image/x-icon;'
+  // });
+  // reader.readAsDataURL(imageData);
+  // reader.addEventListener('load', () => {
+  //   imageUrl.value = reader.result;
+  //   console.log(' imageUrl.value', imageUrl.value);
+  // });
+})
 const imageContainer = ref();
 const { width: imageWidth, height: imageHeight } = useElementSize(imageContainer);
 
 const editTitle = () => {
-  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid);
+  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_uuid);
 };
 
 const addTitle = () => {
   imageHeight.value = imageHeight.value + 48;
   console.log('imageHeight.value', imageHeight.value);
   editEntity(
-    { ...entityData.value, title: 'Title', height: imageHeight.value },
-    entityData.value.uuid
+    { ...entityData.value, title: 'Title', image_height: imageHeight.value },
+    entityData.value.entity_uuid
   );
   entityData.value = { ...entityData.value, title: 'Title' };
 };
@@ -34,7 +44,7 @@ const removeTitle = () => {
   const newState = { ...entityData.value };
   delete newState.title;
   imageHeight.value = imageHeight.value - 48;
-  editEntity({ ...newState, height: imageHeight.value }, entityData.value.uuid);
+  editEntity({ ...newState, image_height: imageHeight.value }, entityData.value.entity_uuid);
   entityData.value = newState;
 };
 
@@ -43,15 +53,15 @@ const toggleIsResizable = () => {
   isResizable.value = !isResizable.value;
   if (!isResizable.value) {
     editEntity(
-      { ...entityData.value, height: imageHeight.value, width: imageWidth.value },
-      entityData.value.uuid
+      { ...entityData.value, image_height: imageHeight.value, image_width: imageWidth.value },
+      entityData.value.entity_uuid
     );
     console.log(entityData.value);
   }
 };
 const editPosition = (position: 'left' | 'center' | 'right') => {
-  entityData.value.position = position;
-  editEntity({ ...entityData.value, position }, entityData.value.uuid);
+  entityData.value.image_position = position;
+  editEntity({ ...entityData.value, image_position: position }, entityData.value.entity_uuid);
 };
 </script>
 
@@ -60,9 +70,9 @@ const editPosition = (position: 'left' | 'center' | 'right') => {
     :class="[
       'entityContainer relative flex',
       {
-        'justify-start': entityData.position === 'left',
-        'justify-center': entityData.position === 'center',
-        'justify-end': entityData.position === 'right'
+        'justify-start': entityData.image_position === 'left',
+        'justify-center': entityData.image_position === 'center',
+        'justify-end': entityData.image_position === 'right'
       }
     ]"
   >
@@ -75,7 +85,7 @@ const editPosition = (position: 'left' | 'center' | 'right') => {
         @change="editTitle"
         placeholder="Enter title..."
         class="w-full mb-4 font-bold text-2xl pl-2"
-        :style="`width: ${entityData.width}px`"
+        :style="`width: ${entityData.image_width}px`"
       />
       <div
         ref="imageContainer"
@@ -86,10 +96,10 @@ const editPosition = (position: 'left' | 'center' | 'right') => {
             'min-h-[148px]': entityData.title || entityData.title === ''
           }
         ]"
-        :style="`height: ${entityData.height}px; width: ${entityData.width}px`"
+        :style="`height: ${entityData.image_height}px; width: ${entityData.image_width}px`"
       >
         <img
-          :src="entityData.url"
+          :src="entityData?.image_data"
           :alt="`Image ${entityData?.title}` || 'Image'"
           class="max-h-[700px] min-h-[100px] object-contain"
         />
diff --git a/src/components/entities/TextItem.vue b/src/components/entities/TextItem.vue
index 45d8bd820446cc1490c3d991cd6adecb2ed70a7d..8c4d4dca7eb0bc0bde9a23c197d997de08f044c4 100644
--- a/src/components/entities/TextItem.vue
+++ b/src/components/entities/TextItem.vue
@@ -3,7 +3,8 @@ import type { IText } from '@/interfaces/entities';
 import { useDataStore } from '@/stores/data';
 import { useTextareaAutosize } from '@vueuse/core';
 import { deleteEntity, editEntity } from '@/helpers';
-import EditTextEntityMenu from '@/components/EditTextEntityMenu.vue';
+import StateMenu from '@/components/editEntityMenus/text/StateMenu.vue';
+import MoveMenu from '@/components/editEntityMenus/text/MoveMenu.vue';
 
 interface Props {
   entityData: IText;
@@ -12,30 +13,33 @@ const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
 const addTitle = () => {
-  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.uuid);
+  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.entity_uuid);
   entityData.value = { ...entityData.value, title: 'Title' };
 };
 
 const editTitle = () => {
-  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid);
+  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_uuid);
 };
 
 const editText = () => {
-  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.uuid);
+  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.entity_uuid);
 };
 
 const removeTitle = () => {
   const newState = { ...entityData.value };
-  delete newState.title;
-  editEntity({ ...newState }, entityData.value.uuid);
+  newState.title = null;
+  editEntity({ ...newState }, entityData.value.entity_uuid);
   entityData.value = newState;
 };
 
-const { textarea, triggerResize } = useTextareaAutosize();
+const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
+
+const dataStore = useDataStore();
+const homeEntities = computed(() => dataStore.homeEntities);
 </script>
 
 <template>
-  <div class="entityContainer relative">
+  <div class="entityContainer relative py-8 px-16">
     <input
       ref="input"
       v-if="entityData.title || entityData.title === ''"
@@ -43,24 +47,31 @@ const { textarea, triggerResize } = useTextareaAutosize();
       v-model="entityData.title"
       @change="editTitle"
       placeholder="Enter title..."
-      class="w-full mb-2 font-bold text-2xl pl-2"
+      class="w-full mb-4 font-bold text-2xl pl-2"
     />
     <textarea
       ref="textarea"
       v-model="entityData.text"
-      class="w-full indent-5 resize-none pl-4 -ml-4 border-0 border-l-4 border-solid border-l-blue-400"
+      class="w-full indent-5 resize-none outline-0"
       @change="editText"
       @input="triggerResize"
       placeholder="Enter text..."
+      rows="2"
     />
-    <div class="speedDial absolute top-0 left-2 z-50 transition-all select-none">
-      <EditTextEntityMenu
+    <div class="speedDial absolute left-4 top-2 transition-all select-none">
+      <StateMenu
         :entityData="entityData"
         @deleteEntity="deleteEntity"
         @addTitle="addTitle"
         @removeTitle="removeTitle"
       />
     </div>
+    <div
+      v-if="homeEntities.length > 1"
+      class="speedDial absolute left-4 bottom-2 transition-all select-none"
+    >
+      <MoveMenu :entityData="entityData" />
+    </div>
   </div>
 </template>
 
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index a36d3f01254a8fa62183ec0e92402578e20caf89..7b5ac9c0ee54d338ac46782b2c5b271f091f3b90 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,6 +1,7 @@
 import { useInterfaceStore } from '@/stores/interface';
 import type { IEntity } from '@/interfaces/environment';
 import { useDataStore } from '@/stores/data';
+import { useWebsocketStore } from '@/stores/websocket';
 
 export async function uploadFile($event: Event) {
   const target = $event.target as HTMLInputElement;
@@ -26,36 +27,34 @@ export function setDefaultHomeBackground() {
 }
 
 export const editEntity = (newState: IEntity, entityUuid: string) => {
-  const dataStore = useDataStore();
-  let prevState = dataStore.homeEntities;
-  prevState = prevState.map((entity: IEntity) => {
-    if (entity.uuid !== entityUuid) return entity;
-    return newState;
-  });
-  dataStore.editHomeEntities(prevState);
+  const websocketStore = useWebsocketStore();
+  const data = {
+    event: 'editHomeEntity',
+    body: { ...newState }
+  };
+  websocketStore.sendData(data);
 };
 
 export const deleteEntity = (entityUuid: string) => {
   const dataStore = useDataStore();
-  let prevState = dataStore.homeEntities;
-  prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityUuid);
-  dataStore.editHomeEntities(prevState);
+  const websocketStore = useWebsocketStore();
+  const entities = dataStore.homeEntities;
+  const entityToDelete = entities.find((entity) => entity.entity_uuid === entityUuid);
+  const data = {
+    event: 'deleteHomeEntity',
+    body: { ...entityToDelete }
+  };
+  websocketStore.sendData(data);
 };
 
 export const changeOrderHomeEntity = (entityUuid: string, direction: 'up' | 'down') => {
-  const dataStore = useDataStore();
-  const prevState = dataStore.homeEntities;
-  const entityIndex = prevState.findIndex((entity: IEntity) => entity.uuid === entityUuid);
-  if (direction === 'up') {
-    [prevState[entityIndex], prevState[entityIndex - 1]] = [
-      prevState[entityIndex - 1],
-      prevState[entityIndex]
-    ];
-  } else {
-    [prevState[entityIndex], prevState[entityIndex + 1]] = [
-      prevState[entityIndex + 1],
-      prevState[entityIndex]
-    ];
-  }
-  dataStore.editHomeEntities(prevState);
+  const websocketStore = useWebsocketStore();
+  const data = {
+    event: 'changeOrderHomeEntity',
+    body: {
+      entity_uuid: entityUuid,
+      direction
+    }
+  };
+  websocketStore.sendData(data);
 };
diff --git a/src/interfaces/authorization.ts b/src/interfaces/authorization.ts
index eba19e4706254349e4b40be8a3be7dea760f93ad..f9ae4f51e6c998f3e471349c2391c5ae12616dae 100644
--- a/src/interfaces/authorization.ts
+++ b/src/interfaces/authorization.ts
@@ -1,13 +1,14 @@
-import type { IImage, TThemes } from '@/interfaces/environment';
+import type {  TThemes } from '@/interfaces/environment';
+import type {IImage } from "@/interfaces/entities";
 
 export interface IUserData {
-  uuid: string;
-  nickName: string;
-  firstName: string;
-  lastName: string;
-  middleName: string;
+  user_uuid: string;
+  nick_name: string;
+  first_name: string;
+  last_name: string;
+  middle_name: string;
   email: string;
-  phoneNumber: string;
+  phone_number: string;
   settings: IUserSettings;
 }
 interface IUserSettings {
diff --git a/src/interfaces/entities.ts b/src/interfaces/entities.ts
index fffff4dcf2cac2f6a843421db30a48da282a1cce..d82328a355af046582734b3740ad43d255e79216 100644
--- a/src/interfaces/entities.ts
+++ b/src/interfaces/entities.ts
@@ -1,15 +1,18 @@
 export interface ITable {
-  type: 'table';
-  uuid: string;
+  entity_type: 'table';
+  entity_uuid: string;
   title?: string;
-  columns: ITableColumn[];
-  data: {
+  text?: string;
+  table_columns: ITableColumn[];
+  table_data: {
     [key: string]: any;
   }[];
 }
 interface ITableColumn {
+  column_uuid: string;
   name: string;
   type: ITableColumnTypes;
+  data: any;
 }
 type ITableColumnTypes =
   | 'text'
@@ -22,18 +25,19 @@ type ITableColumnTypes =
   | 'knob';
 
 export interface IText {
-  type: 'text';
-  uuid: string;
-  text: string;
+  entity_type: 'text';
+  entity_uuid: string;
   title?: string;
+  text: string;
 }
 
 export interface IImage {
-  type: 'image';
-  uuid: string;
-  title: string;
-  url: string;
-  width: number;
-  height: number;
-  position: 'left' | 'center' | 'right';
+  entity_type: 'image';
+  entity_uuid: string;
+  title?: string;
+  text?: string;
+  image_data: string;
+  image_width: number;
+  image_height: number;
+  image_position: 'left' | 'center' | 'right';
 }
diff --git a/src/interfaces/environment.ts b/src/interfaces/environment.ts
index ceb35952c7485adc304c03801effee747c151c69..4c9536e839800da8d9bac6d3c4bb6c9389b76ba4 100644
--- a/src/interfaces/environment.ts
+++ b/src/interfaces/environment.ts
@@ -1,7 +1,7 @@
 import type { IImage, ITable, IText } from '@/interfaces/entities';
 
 export interface ISheet {
-  uuid: string;
+  sheet_uuid: string;
   title: string;
   address: string;
   entities: IEntity[];
diff --git a/src/modules/EntityItem.vue b/src/modules/EntityItem.vue
index 01fb2f80f28637dcba4f31243172626a9f71e6c0..f040b9f4fba86ee22f19a52396ab4a462e7b4852 100644
--- a/src/modules/EntityItem.vue
+++ b/src/modules/EntityItem.vue
@@ -11,8 +11,11 @@ defineProps<Props>();
 
 <template>
   <div>
-    <TextItem v-if="entity.type === 'text'" :entityData="entity" />
-    <ImageItem v-if="entity.type === 'image'" :entityData="entity" />
+    <TextItem v-if="entity.entity_type === 'text'" :entityData="entity" />
+    <ImageItem v-if="entity.entity_type === 'image'" :entityData="entity" />
+    <div class="px-16">
+      <div class="w-full h-[1px] bg-gray-500"></div>
+    </div>
   </div>
 </template>
 
diff --git a/src/output.css b/src/output.css
index 122ecf845c4ef1d5443e37ef08d273b2d2775984..94f42e4f9560584909e1f4e43bf1b6d7c9c553c7 100644
--- a/src/output.css
+++ b/src/output.css
@@ -608,6 +608,10 @@ video {
   position: relative;
 }
 
+.-left-2 {
+  left: -0.5rem;
+}
+
 .-left-full {
   left: -100%;
 }
@@ -616,6 +620,10 @@ video {
   top: -100%;
 }
 
+.bottom-0 {
+  bottom: 0px;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -632,6 +640,10 @@ video {
   top: 0px;
 }
 
+.top-12 {
+  top: 3rem;
+}
+
 .top-16 {
   top: 4rem;
 }
@@ -640,6 +652,14 @@ video {
   top: 0.5rem;
 }
 
+.left-4 {
+  left: 1rem;
+}
+
+.bottom-2 {
+  bottom: 0.5rem;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -653,6 +673,11 @@ video {
   margin-bottom: -0.5rem;
 }
 
+.mx-16 {
+  margin-left: 4rem;
+  margin-right: 4rem;
+}
+
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -661,22 +686,10 @@ video {
   margin-left: -0.5rem;
 }
 
-.-ml-4 {
-  margin-left: -1rem;
-}
-
 .-mr-\[135px\] {
   margin-right: -135px;
 }
 
-.mb-12 {
-  margin-bottom: 3rem;
-}
-
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -701,6 +714,10 @@ video {
   margin-right: 0.5rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -735,6 +752,10 @@ video {
   height: 3rem;
 }
 
+.h-\[1px\] {
+  height: 1px;
+}
+
 .h-full {
   height: 100%;
 }
@@ -751,6 +772,10 @@ video {
   min-height: 148px;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .w-2 {
   width: 0.5rem;
 }
@@ -767,21 +792,12 @@ video {
   width: 100%;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
 .min-w-\[100px\] {
   min-width: 100px;
 }
 
-.-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));
-}
-
-.-translate-y-16 {
-  --tw-translate-y: -4rem;
+.-translate-x-full {
+  --tw-translate-x: -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));
 }
 
@@ -860,18 +876,10 @@ video {
   border-width: 1px;
 }
 
-.border-0 {
-  border-width: 0px;
-}
-
 .border-2 {
   border-width: 2px;
 }
 
-.border-l-4 {
-  border-left-width: 4px;
-}
-
 .border-solid {
   border-style: solid;
 }
@@ -881,11 +889,6 @@ video {
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-l-blue-400 {
-  --tw-border-opacity: 1;
-  border-left-color: rgb(96 165 250 / var(--tw-border-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -901,6 +904,11 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+}
+
 .bg-sky-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(12 74 110 / var(--tw-bg-opacity));
@@ -932,9 +940,9 @@ video {
   padding: 1.5rem;
 }
 
-.px-4 {
-  padding-left: 1rem;
-  padding-right: 1rem;
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
 }
 
 .py-2 {
@@ -947,6 +955,11 @@ video {
   padding-bottom: 1rem;
 }
 
+.py-8 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
 .pl-0 {
   padding-left: 0px;
 }
@@ -955,10 +968,6 @@ video {
   padding-left: 0.5rem;
 }
 
-.pl-4 {
-  padding-left: 1rem;
-}
-
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -967,8 +976,12 @@ video {
   padding-right: 135px;
 }
 
-.pt-8 {
-  padding-top: 2rem;
+.pl-24 {
+  padding-left: 6rem;
+}
+
+.pr-16 {
+  padding-right: 4rem;
 }
 
 .text-center {
@@ -1025,6 +1038,10 @@ video {
   opacity: 0;
 }
 
+.outline-0 {
+  outline-width: 0px;
+}
+
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index f372c6dde70ec1ebbdfddc437c9154ede3c3b814..f5ceea240ce3089246b5ebc462d49a72f445bf7d 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -6,6 +6,8 @@ import { setDefaultHomeBackground, uploadFile } from '@/helpers';
 import { useInterfaceStore } from '@/stores/interface';
 import type { IEntity } from '@/interfaces/environment';
 import { useDataStore } from '@/stores/data';
+import { useAuthorizationStore } from '@/stores/authorization';
+import { useWebsocketStore } from '@/stores/websocket';
 
 const backgroundImage = ref();
 const { height: backgroundImageHeight } = useElementSize(backgroundImage);
@@ -14,13 +16,23 @@ const { height: entitiesHeight } = useElementSize(entitiesContainer);
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
+const authorizationStore = useAuthorizationStore();
+const websocketStore = useWebsocketStore();
 const entities = computed(() => dataStore.homeEntities);
+
 const backgroundUrl = computed<string>(() => interfaceStore.homeBackgroundUrl);
+const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultHomeBackgroundUrl);
 
 const addEntity = (newEntity: IEntity) => {
-  const prevState = [...entities.value];
-  prevState.push(newEntity);
-  dataStore.editHomeEntities(prevState);
+  const data = {
+    event: 'createHomeEntity',
+    body: {
+      ...newEntity,
+      nickName: authorizationStore.userNickName
+    }
+  };
+  console.log('data.body?.image_data: ', data.body?.image_data);
+  websocketStore.sendData(data);
 };
 </script>
 
@@ -41,32 +53,32 @@ const addEntity = (newEntity: IEntity) => {
         class="splitterPanelBackground"
       >
         <div
-          class="changeImageBlock absolute top-2 right-2 bg-black p-2 rounded-md hover:text-gray-300 transition-all cursor-pointer select-none"
+          class="changeImageBlock absolute top-2 right-2 bg-black p-2 rounded-md hover:text-gray-300 transition-all select-none"
         >
           <input
             type="file"
             @change="uploadFile($event)"
             title="Change image"
             accept="image/*"
-            class="w-2 pr-[135px] -mr-[135px] py-2 -my-2 pl-2 -ml-2 opacity-0 cursor-pointer"
-          /><span class="cursor-pointer"><i class="pi pi-image mr-2"></i>Change image</span>
+            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="backgroundUrl !== 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>
       </SplitterPanel>
       <SplitterPanel class="flex items-start justify-center"
-        ><div ref="entitiesContainer" class="w-full pt-8 px-4">
+        ><div ref="entitiesContainer" class="w-full">
           <EntityItem
             v-for="entitiesItem of entities"
             :entity="entitiesItem"
-            :key="entitiesItem.uuid"
-            class="mb-12"
+            :key="entitiesItem.entity_uuid"
           />
-          <div class="relative">
+          <div class="relative mt-2">
             <CreateEntityMenu @addEntity="addEntity" />
           </div>
         </div>
@@ -90,4 +102,9 @@ const addEntity = (newEntity: IEntity) => {
 .splitterPanelBackground:hover > .returnDefaultImageBlock {
   opacity: 100;
 }
+input[type=file], /* FF, IE7+, chrome (except button) */
+input[type=file]::-webkit-file-upload-button {
+  /* chromes and blink button */
+  cursor: pointer;
+}
 </style>
diff --git a/src/stores/data.ts b/src/stores/data.ts
index 3e8b0b815f0aad1904c238f6953405daf56153ff..27b1f4004d2ed9d1a31568c8d6c042320f61d6a7 100644
--- a/src/stores/data.ts
+++ b/src/stores/data.ts
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia';
-import type { ISheet } from '@/interfaces/environment';
+import type {IEntity, ISheet} from '@/interfaces/environment';
 
 export const useDataStore = defineStore('dataStore', () => {
   const sheets = ref([
@@ -53,11 +53,14 @@ export const useDataStore = defineStore('dataStore', () => {
     }
   ]);
 
-  const homeEntities = ref(JSON.parse(localStorage.getItem('homeEntities') || '[]'));
+  const homeEntities = ref<IEntity[]>([]);
 
-  function editHomeEntities(newState) {
+  function editHomeEntities(newState: IEntity) {
     homeEntities.value = newState;
-    localStorage.setItem('homeEntities', JSON.stringify(newState));
   }
-  return { sheets, homeEntities, editHomeEntities };
+
+  function setHomeEntities(entities: IEntity[]) {
+    homeEntities.value = entities;
+  }
+  return { sheets, homeEntities, editHomeEntities, setHomeEntities };
 });
diff --git a/src/stores/interface.ts b/src/stores/interface.ts
index b59fc34aba7a900f597d1e11723a2f6ba6189c3c..d834a66ad88590150042def97b59a265740394e8 100644
--- a/src/stores/interface.ts
+++ b/src/stores/interface.ts
@@ -4,14 +4,16 @@ 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'
+  );
   onMounted(() => {
     homeBackgroundUrl.value =
-      localStorage.getItem('homeBackgroundUrl') ||
-      'https://wallpapers.com/images/featured/minimalist-7xpryajznty61ra3.jpg';
+      localStorage.getItem('homeBackgroundUrl') || defaultHomeBackgroundUrl.value;
   });
   function changeHomeBackgroundUrl(newUrl: string) {
     homeBackgroundUrl.value = newUrl;
   }
 
-  return { homeBackgroundUrl, changeHomeBackgroundUrl };
+  return { homeBackgroundUrl, defaultHomeBackgroundUrl, changeHomeBackgroundUrl };
 });
diff --git a/src/stores/websocket.ts b/src/stores/websocket.ts
new file mode 100644
index 0000000000000000000000000000000000000000..26d0dfca4898806218d3abfef710a3f9d480dbd9
--- /dev/null
+++ b/src/stores/websocket.ts
@@ -0,0 +1,81 @@
+import { defineStore } from 'pinia';
+import { useDataStore } from '@/stores/data';
+import type { IEntity } from '@/interfaces/environment';
+
+export const useWebsocketStore = defineStore('websocketStore', () => {
+  const socket = ref();
+  const dataStore = useDataStore();
+  const homeEntities = computed(() => dataStore.homeEntities);
+
+  onMounted(() => {
+    socket.value = new WebSocket('ws://localhost:5000');
+    socket.value.onopen = () => {
+      console.log('Websocket opened');
+      const data = {
+        event: 'getHomeEntities'
+      };
+      socket.value.send(JSON.stringify(data));
+    };
+    socket.value.onmessage = (event: any) => {
+      const response = JSON.parse(event.data);
+      console.log('response: ', response);
+      switch (response.event) {
+        case 'getHomeEntities':
+          dataStore.editHomeEntities(response.data);
+          break;
+        case 'createHomeEntity': {
+          const entities = [...homeEntities.value];
+          entities.push(response.data);
+          dataStore.editHomeEntities([...entities]);
+          break;
+        }
+        case 'editHomeEntity': {
+          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;
+        }
+        case 'deleteHomeEntity': {
+          let newState = [...dataStore.homeEntities];
+          newState = newState.filter(
+            (entity: IEntity) => entity.entity_uuid !== response.data.entity_uuid
+          );
+          dataStore.editHomeEntities(newState);
+          break;
+        }
+        case 'changeOrderHomeEntity': {
+          const newState = dataStore.homeEntities;
+          const entityIndex = newState.findIndex(
+            (entity: IEntity) => entity.entity_uuid === response.data.entity_uuid
+          );
+          if (response.data.direction === 'up') {
+            [newState[entityIndex], newState[entityIndex - 1]] = [
+              newState[entityIndex - 1],
+              newState[entityIndex]
+            ];
+          } else {
+            [newState[entityIndex], newState[entityIndex + 1]] = [
+              newState[entityIndex + 1],
+              newState[entityIndex]
+            ];
+          }
+          dataStore.editHomeEntities(newState);
+        }
+      }
+    };
+    socket.value.onclose = () => {
+      console.log('Websocket connection closed');
+    };
+    socket.value.onerror = () => {
+      console.log('Websocket caught an error');
+    };
+  });
+
+  function sendData(data: any) {
+    socket.value.send(JSON.stringify(data));
+  }
+  return { sendData };
+});
diff --git a/tsconfig.json b/tsconfig.json
index 66b5e5703e83c352671ce094731e9e861ada6924..f7ea2202ebcca2b68fc8571c54d0e56dcedb883a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,18 @@
 {
-  "files": [],
+  "include": [
+    "*.d.ts",
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.vue",
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+  },
   "references": [
     {
       "path": "./tsconfig.node.json"
diff --git a/vite.config.ts b/vite.config.ts
index ed0c7caac29d0910011458aa23da52c164377547..69321b5e6cc48db509a79be55f5df53e4fe9343e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -72,7 +72,7 @@ export default defineConfig({
       // Filepath to generate corresponding .d.ts file.
       // Defaults to './auto-imports.d.ts' when `typescript` is installed locally.
       // Set `false` to disable.
-      dts: true,
+      dts: 'src/auto-imports.d.ts',
 
       // Array of strings of regexes that contains imports meant to be ignored during
       // the declaration file generation. You may find this useful when you need to provide