diff --git a/.env b/.env
new file mode 100644
index 0000000000000000000000000000000000000000..344bfda14acfa04a04c251729369a2df541bcacd
--- /dev/null
+++ b/.env
@@ -0,0 +1,3 @@
+VITE_SUPABASE_URL=https://wrwwvdgppriodcdoyohp.supabase.co
+VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Indyd3d2ZGdwcHJpb2RjZG95b2hwIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjM3OTc1NzQsImV4cCI6MjAzOTM3MzU3NH0.ttfp3RHEgJIwF8fC-iUx2BmfxB_T-NqNeQCxycMqCDs
+VITE_SUPABASE_ACCESS_TOKEN=sbp_cc9798115cb71d087e9b6774a35ba5c6ab866c9f
\ No newline at end of file
diff --git a/components.d.ts b/components.d.ts
index 9e5ed52bddc46b1b18e125061c9b92634c771b60..c0b700716c6ce387b98b7d5d83db79150ecdc8e9 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -15,6 +15,7 @@ declare module 'vue' {
     Drawer: typeof import('primevue/drawer')['default']
     ImageItem: typeof import('@/modules/entities/ImageItem.vue')['default']
     ImageMoveMenu: typeof import('./src/components/editEntityMenu/ImageMoveMenu.vue')['default']
+    ImageSizeMenu: typeof import('./src/components/editEntityMenu/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./src/components/editEntityMenu/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./src/components/LogoAndLabel.vue')['default']
     MoveImageMenu: typeof import('./src/components/editEntityMenu/image/MoveImageMenu.vue')['default']
@@ -31,6 +32,7 @@ declare module 'vue' {
     TextItem: typeof import('@/modules/entities/TextItem.vue')['default']
     TextMoveMenu: typeof import('./src/components/editEntityMenu/TextMoveMenu.vue')['default']
     TextStateMenu: typeof import('./src/components/editEntityMenu/TextStateMenu.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/package.json b/package.json
index 2001c5d999707e6e25d9424e27aeca97b1d65271..131c67df188266078267b40d77bde9d730589760 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.0.4",
+    "@supabase/supabase-js": "^2.45.1",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "cropperjs": "^1.6.2",
diff --git a/src/app/App.vue b/src/app/App.vue
index c863b2c212458cc0de23afef931de2ba3cd308a7..26bfa004a56c37378f5b75fd58ea71514ae507dc 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -7,7 +7,7 @@ const visible = ref<boolean>(false);
 
 <template>
   <router-view />
-  <div class="fixed top-0 left-0">
+  <div class="fixed top-0 left-0 z-50">
     <Button
       @click.prevent="visible = !visible"
       label="Menu"
@@ -18,7 +18,7 @@ const visible = ref<boolean>(false);
   </div>
   <Drawer v-model:visible="visible">
     <template #container="{ closeCallback }">
-      <BaseSidebarMenu @closeCallback="closeCallback" />
+      <BaseSidebarMenu @closeCallback="closeCallback" class="relative z-50" />
     </template>
   </Drawer>
 </template>
diff --git a/src/app/auto-imports.d.ts b/src/app/auto-imports.d.ts
index b14a1099bc9d648fb7159fe55bce138199bb5388..07ab7b9a30efbaa1b1306ef5dbcca4153ce2d09b 100644
--- a/src/app/auto-imports.d.ts
+++ b/src/app/auto-imports.d.ts
@@ -5,74 +5,85 @@
 // 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']
+  const EffectScope: (typeof import('vue'))['EffectScope'];
+  const [alias]: (typeof import('[package-name]'))['[from]'];
+  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')
+  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')
+  export type { RouteLocationRaw } from 'vue-router';
+  import('vue-router');
 }
diff --git a/src/app/interfaces/entities.ts b/src/app/interfaces/entities.ts
index d82328a355af046582734b3740ad43d255e79216..984ca161914392b00fd7c28916f91cdc459afa5e 100644
--- a/src/app/interfaces/entities.ts
+++ b/src/app/interfaces/entities.ts
@@ -36,8 +36,12 @@ export interface IImage {
   entity_uuid: string;
   title?: string;
   text?: string;
-  image_data: string;
+  text_size?: 'small' | 'medium' | 'large';
+  paragraph_size?: 'small' | 'medium' | 'large' | 'extraLarge';
+  text_position?: 'left' | 'right';
+  image_url: string;
   image_width: number;
   image_height: number;
   image_position: 'left' | 'center' | 'right';
+  image_scale: string;
 }
diff --git a/src/app/interfaces/index.ts b/src/app/interfaces/index.ts
index 424456135f391e911ae5f730ca6edcd14aad0bea..fcaa1f8132010ef7b5c0ffad8643ea3ff0565535 100644
--- a/src/app/interfaces/index.ts
+++ b/src/app/interfaces/index.ts
@@ -1,5 +1,5 @@
 export interface IImageMainInfo {
-  url: string;
-  width: number;
-  height: number;
+  image_url: string;
+  image_width: number;
+  image_height: number;
 }
diff --git a/src/app/stores/interface.ts b/src/app/stores/interface.ts
index d834a66ad88590150042def97b59a265740394e8..2485d0c63952d64880d04009b8e0da95d29cff47 100644
--- a/src/app/stores/interface.ts
+++ b/src/app/stores/interface.ts
@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia';
+import { useWebsocketStore } from '@/app/stores/websocket';
 
 export const useInterfaceStore = defineStore('interfaceStore', () => {
   const homeBackgroundUrl = ref<string>(
@@ -13,7 +14,27 @@ export const useInterfaceStore = defineStore('interfaceStore', () => {
   });
   function changeHomeBackgroundUrl(newUrl: string) {
     homeBackgroundUrl.value = newUrl;
+    const websocketStore = useWebsocketStore();
+    const data = {
+      event: 'changeHomeBackgroundUrl',
+      body: {
+        setting_name: 'homeBackgroundUrl',
+        setting_value: newUrl
+      }
+    };
+    websocketStore.sendData(data);
+  }
+  function setHomeBackgroundUrlFromDB(url: string | null) {
+    if (!url) {
+      return;
+    }
+    homeBackgroundUrl.value = url;
   }
 
-  return { homeBackgroundUrl, defaultHomeBackgroundUrl, changeHomeBackgroundUrl };
+  return {
+    homeBackgroundUrl,
+    defaultHomeBackgroundUrl,
+    changeHomeBackgroundUrl,
+    setHomeBackgroundUrlFromDB
+  };
 });
diff --git a/src/app/stores/websocket.ts b/src/app/stores/websocket.ts
index 3cff49c6e4eafe67164ca5a04ad0f434e84be6b6..20ea30571b2ebf132a2ebfdf0f74bbec81511c17 100644
--- a/src/app/stores/websocket.ts
+++ b/src/app/stores/websocket.ts
@@ -1,20 +1,26 @@
 import { defineStore } from 'pinia';
 import { useDataStore } from '@/app/stores/data';
 import type { IEntity } from '@/app/interfaces/environment';
+import { useInterfaceStore } from '@/app/stores/interface';
 
 export const useWebsocketStore = defineStore('websocketStore', () => {
   const socket = ref();
   const dataStore = useDataStore();
+  const interfaceStore = useInterfaceStore();
   const homeEntities = computed(() => dataStore.homeEntities);
 
   onMounted(() => {
     socket.value = new WebSocket('ws://localhost:5000');
     socket.value.onopen = () => {
       console.log('Websocket opened');
-      const data = {
+      const getHomeEntitiesData = {
         event: 'getHomeEntities'
       };
-      socket.value.send(JSON.stringify(data));
+      socket.value.send(JSON.stringify(getHomeEntitiesData));
+      const getHomeBackgroundUrlData = {
+        event: 'getHomeBackgroundUrl'
+      };
+      socket.value.send(JSON.stringify(getHomeBackgroundUrlData));
     };
     socket.value.onmessage = (event: any) => {
       const response = JSON.parse(event.data);
@@ -23,6 +29,9 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
         case 'getHomeEntities':
           dataStore.editHomeEntities(response.data);
           break;
+        case 'getHomeBackgroundUrl':
+          interfaceStore.setHomeBackgroundUrlFromDB(response.data?.setting_value);
+          break;
         case 'createHomeEntity': {
           const entities = [...homeEntities.value];
           entities.push(response.data);
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 6dbdd34e98816aa0fb8630bbfc802f578cd4c8ae..cb07a8741501c385f47728605a26b72720acc5d4 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -4,31 +4,31 @@ import { useFileDialog } from '@vueuse/core';
 
 const emit = defineEmits(['addEntity']);
 
-const {
-  files,
-  open: uploadFile,
-  reset,
-  onChange
-} = useFileDialog({
+const { open: uploadFile, onChange } = useFileDialog({
   accept: 'image/*',
   reset: true
 });
 
-const addImage = (files: FileList) => {
+const addImage = async (files: FileList) => {
   let image = new Image();
+  const imageUuid = uuidv4();
   const file = files[0];
-  console.log('file', file, 'type: ', typeof file);
-  const url = URL.createObjectURL(file);
-  image.src = url;
-  console.log('image width and height: ', image.width, image.height);
-  console.log('url length: ', url.length);
-  emit('addEntity', {
-    entity_type: 'image',
-    entity_uuid: uuidv4(),
-    image_data: url,
-    image_position: 'left',
-    image_height: 300
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.addEventListener('load', () => {
+    image.src = String(reader.result);
   });
+  image.onload = () => {
+    emit('addEntity', {
+      entity_type: 'image',
+      entity_uuid: imageUuid,
+      image_url: image.src,
+      image_position: 'left',
+      image_width: image.width,
+      image_height: image.height,
+      image_scale: '1'
+    });
+  };
 };
 onChange((files) => {
   if (files && files?.length > 0) {
diff --git a/src/components/editEntityMenu/ImageMoveMenu.vue b/src/components/editEntityMenu/ImageMoveMenu.vue
index a38b828547a1ba91545a2da8be8a94b3dcb2084f..6ba5846fea0c71420f2f72d281babba2106f9c41 100644
--- a/src/components/editEntityMenu/ImageMoveMenu.vue
+++ b/src/components/editEntityMenu/ImageMoveMenu.vue
@@ -1,20 +1,16 @@
 <script setup lang="ts">
 import { changeOrderHomeEntity } from '@/app/helpers';
-import type { IImage, IText } from '@/app/interfaces/entities';
+import type { IImage } from '@/app/interfaces/entities';
 import { useDataStore } from '@/app/stores/data';
 import type { IEntity } from '@/app/interfaces/environment';
 
 interface Props {
   entityData: IImage;
-  isResizable: boolean;
 }
-
 const props = defineProps<Props>();
-
-const emit = defineEmits(['editPosition']);
+const emit = defineEmits(['editPosition', 'editTextPosition']);
 
 const position = computed(() => props.entityData.image_position);
-const isResizable = computed(() => props.isResizable);
 
 const speedDialMove = computed(() => {
   const state = [];
@@ -74,18 +70,28 @@ const speedDialMove = computed(() => {
       command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
     });
   }
+  if (props.entityData?.text || props.entityData?.text === '') {
+    if (props.entityData?.text_position === 'right') {
+      state.push({
+        label: 'Text left',
+        icon: 'pi pi-align-left',
+        command: () => emit('editTextPosition', 'left')
+      });
+    } else {
+      state.push({
+        label: 'Text right',
+        icon: 'pi pi-align-right',
+        command: () => emit('editTextPosition', 'right')
+      });
+    }
+  }
   return state;
 });
 </script>
 
 <template>
   <div>
-    <SpeedDial
-      v-if="!isResizable"
-      :model="speedDialMove"
-      direction="right"
-      pt:root:class="speedDialRoot w-4"
-    >
+    <SpeedDial :model="speedDialMove" 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/editEntityMenu/ImageSizeMenu.vue b/src/components/editEntityMenu/ImageSizeMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..127da3a68da7040bd938a2be446e3a5755c09211
--- /dev/null
+++ b/src/components/editEntityMenu/ImageSizeMenu.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import type { IImage } from '@/app/interfaces/entities';
+
+interface Props {
+  entityData: IImage;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['scaleImage', 'editTextPosition']);
+
+const speedDialSize = computed(() => {
+  let state = [
+    {
+      label: 'x0.25',
+      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
+      command: () => emit('scaleImage', '0.25')
+    },
+    {
+      label: 'x0.5',
+      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
+      command: () => emit('scaleImage', '0.5')
+    },
+    {
+      label: 'x0.75',
+      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
+      command: () => emit('scaleImage', '0.75')
+    },
+    {
+      label: 'x1',
+      icon: 'pi pi-arrow-down-left-and-arrow-up-right-to-center',
+      command: () => emit('scaleImage', '1')
+    }
+  ];
+  const initialImageWidth = Math.ceil(props.entityData.image_width / +props.entityData.image_scale);
+  const initialImageHeight = Math.ceil(
+    props.entityData.image_height / +props.entityData.image_scale
+  );
+  if (initialImageWidth <= 400 || initialImageHeight <= 400) {
+    state = state.filter((item) => item.label !== 'x0.25');
+    if (initialImageWidth <= 200 || initialImageHeight <= 200) {
+      state = state.filter((item) => item.label !== 'x0.5');
+      if (initialImageWidth <= 95 || initialImageHeight <= 95) {
+        state = state.filter((item) => item.label !== 'x0.75');
+      }
+    }
+  }
+  return state.filter((item) => item.label !== `x${props.entityData.image_scale}`);
+});
+const speedDialSizeBigger = computed(() => {
+  let state = [
+    {
+      label: 'x1',
+      icon: 'pi pi-pencil',
+      command: () => emit('scaleImage', '1')
+    },
+    {
+      label: 'x1.25',
+      icon: 'pi pi-pencil',
+      command: () => emit('scaleImage', '1.25')
+    },
+    {
+      label: 'x1.5',
+      icon: 'pi pi-pencil',
+      command: () => emit('scaleImage', '1.5')
+    },
+    {
+      label: 'x1.75',
+      icon: 'pi pi-pencil',
+      command: () => emit('scaleImage', '1.75')
+    },
+    {
+      label: 'x2',
+      icon: 'pi pi-pencil',
+      command: () => emit('scaleImage', '2')
+    }
+  ];
+  const initialImageWidth = Math.ceil(props.entityData.image_width / +props.entityData.image_scale);
+  const initialImageHeight = Math.ceil(
+    props.entityData.image_height / +props.entityData.image_scale
+  );
+  if (initialImageWidth >= 960 || initialImageHeight >= 960) {
+    state = state.filter((item) => item.label !== 'x1.25');
+    if (initialImageWidth >= 800 || initialImageHeight >= 800) {
+      state = state.filter((item) => item.label !== 'x1.5');
+      if (initialImageWidth >= 685 || initialImageHeight >= 685) {
+        state = state.filter((item) => item.label !== 'x1.75');
+        if (initialImageWidth >= 600 || initialImageHeight >= 600) {
+          state = state.filter((item) => item.label !== 'x2');
+        }
+      }
+    }
+  }
+  return state.filter((item) => item.label !== `x${props.entityData.image_scale}`);
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-center relative z-50"
+    :style="`width: ${props.entityData.image_width}px; height: ${props.entityData.image_height}px`"
+  >
+    <SpeedDial
+      v-if="speedDialSize.length"
+      :model="speedDialSize"
+      :radius="70"
+      type="semi-circle"
+      direction="left"
+      :style="{ position: 'absolute', transform: 'translateX(-24px)' }"
+      showIcon="pi pi-arrow-down-left-and-arrow-up-right-to-center"
+      :buttonProps="{
+        rounded: true,
+        severity: 'info'
+      }"
+    >
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'w-12 text-md font-semibold bg-opacity-70 items-center justify-between -translate-y-2 py-4 border rounded-full border-surface-200 dark:border-surface-700 cursor-pointer',
+            {
+              'bg-red-500': item.label.includes('0.25'),
+              'bg-orange-500': item.label.includes('0.5'),
+              'bg-yellow-500': item.label.includes('0.75'),
+              'bg-green-500': item.label.includes('1')
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <div class="text-center">
+            {{ item.label }}
+          </div>
+        </div>
+      </template>
+    </SpeedDial>
+    <SpeedDial
+      v-if="speedDialSizeBigger.length"
+      :model="speedDialSizeBigger"
+      :radius="70"
+      type="semi-circle"
+      direction="right"
+      :style="{ position: 'absolute', transform: 'translateX(24px)' }"
+      showIcon="pi pi-arrow-up-right-and-arrow-down-left-from-center"
+      :buttonProps="{
+        rounded: true,
+        severity: 'info'
+      }"
+    >
+      <template #item="{ item, toggleCallback }">
+        <div
+          :class="[
+            'w-12 text-md font-semibold bg-opacity-70 items-center justify-between -translate-y-2 py-4 border rounded-full border-surface-200 dark:border-surface-700 cursor-pointer',
+            {
+              'bg-violet-500': item.label.includes('x2'),
+              'bg-red-500': item.label.includes('1.75'),
+              'bg-orange-500': item.label.includes('1.5'),
+              'bg-yellow-500': item.label.includes('1.25'),
+              'bg-green-500': item.label.includes('x1')
+            }
+          ]"
+          @click="toggleCallback"
+        >
+          <div class="text-center">
+            {{ item.label }}
+          </div>
+        </div>
+      </template>
+    </SpeedDial>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/editEntityMenu/ImageStateMenu.vue b/src/components/editEntityMenu/ImageStateMenu.vue
index a39d07e3cddc6ac15a637dd03c185b7b538d3f44..879815fdbef103efb54f69cd2f233abd6342f037 100644
--- a/src/components/editEntityMenu/ImageStateMenu.vue
+++ b/src/components/editEntityMenu/ImageStateMenu.vue
@@ -4,15 +4,16 @@ import type { IImage } from '@/app/interfaces/entities';
 
 interface Props {
   entityData: IImage;
-  isResizable: boolean;
 }
-
 const props = defineProps<Props>();
-
-const emit = defineEmits(['deleteEntity', 'addTitle', 'removeTitle', 'toggleIsResizable']);
-
-const position = computed(() => props.entityData.image_position);
-const isResizable = computed(() => props.isResizable);
+const emit = defineEmits([
+  'deleteEntity',
+  'addTitle',
+  'removeTitle',
+  'addText',
+  'removeText',
+  'openUploadFileModal'
+]);
 
 const speedDialState = computed(() => {
   const state = [];
@@ -30,13 +31,25 @@ const speedDialState = computed(() => {
       command: () => emit('removeTitle')
     });
   }
-  if (position.value !== 'right') {
+  if (!props.entityData?.text && props.entityData?.text !== '') {
+    state.push({
+      label: 'Text',
+      icon: 'pi pi-pencil',
+      command: () => emit('addText')
+    });
+  }
+  if (props.entityData?.text || props.entityData?.text === '') {
+    state.push({
+      label: 'Text',
+      icon: 'pi pi-trash',
+      command: () => emit('removeText')
+    });
+  }
+  if (props.entityData.image_width > 200 && props.entityData.image_height > 200) {
     state.push({
-      label: 'Resize',
-      icon: !isResizable.value
-        ? 'pi pi-arrow-up-right-and-arrow-down-left-from-center'
-        : 'pi pi-ban',
-      command: () => emit('toggleIsResizable')
+      label: 'Crop',
+      icon: 'pi pi-expand',
+      command: () => emit('openUploadFileModal')
     });
   }
   state.push({
diff --git a/src/components/editEntityMenu/TextMoveMenu.vue b/src/components/editEntityMenu/TextMoveMenu.vue
index 7abdbcee67f4d0ce5c7880a8f5ab9cfb6d3b229c..93f8bc8425c2b675484d04964991037267e26860 100644
--- a/src/components/editEntityMenu/TextMoveMenu.vue
+++ b/src/components/editEntityMenu/TextMoveMenu.vue
@@ -10,9 +10,6 @@ interface Props {
 
 const props = defineProps<Props>();
 
-// const isResizable = computed(() => props.isResizable);
-// const position = computed(() => props.entityData.position);
-
 const speedDialMove = computed(() => {
   const state = [];
   const dataStore = useDataStore();
diff --git a/src/components/editEntityMenu/TextStateMenu.vue b/src/components/editEntityMenu/TextStateMenu.vue
index 6c407c5f44f3c7a9da84f33872e5e8d4d8bb562d..b4c97007ac0212afdf37448f7cca71ecf9769e51 100644
--- a/src/components/editEntityMenu/TextStateMenu.vue
+++ b/src/components/editEntityMenu/TextStateMenu.vue
@@ -8,15 +8,7 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const emit = defineEmits([
-  'deleteEntity',
-  'addTitle',
-  'removeTitle'
-  // 'toLeftPosition',
-  // 'toCenterPosition',
-  // 'toRightPosition',
-  // 'toggleIsResizable'
-]);
+const emit = defineEmits(['deleteEntity', 'addTitle', 'removeTitle']);
 
 const speedDialState = computed(() => {
   const state = [];
@@ -34,48 +26,6 @@ const speedDialState = computed(() => {
       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',
diff --git a/src/modules/BaseModal.vue b/src/modules/BaseModal.vue
deleted file mode 100644
index af212bf39557879b85836a38822e01b0e6e044a0..0000000000000000000000000000000000000000
--- a/src/modules/BaseModal.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<script setup lang="ts">
-import { Cropper } from 'vue-advanced-cropper';
-import 'vue-advanced-cropper/dist/style.css';
-import 'vue-advanced-cropper/dist/theme.compact.css';
-import { useInterfaceStore } from '@/app/stores/interface';
-import { useWindowSize, useVModels } from '@vueuse/core';
-import type { IImageMainInfo } from '@/app/interfaces';
-
-interface Props {
-  isVisible: boolean;
-  imageInfo: IImageMainInfo;
-}
-const props = defineProps<Props>();
-const emit = defineEmits(['update:isVisible']);
-const { isVisible, imageInfo } = useVModels(props, emit);
-
-const imageInstance = new Image();
-const finalImageUrl = ref<string>('');
-const { width: windowWidth, height: windowHeight } = useWindowSize();
-
-const stageSize = ref({
-  width: 200,
-  height: 200
-});
-
-watch(
-  () => imageInfo.value.url,
-  () => {
-    if (imageInfo.value.url) {
-      imageInstance.src = imageInfo.value.url;
-      imageInstance.onload = () => {
-        const imageHeight = imageInfo.value.height;
-        const imageWidth = imageInfo.value.width;
-        imageInstance.src = imageInfo.value.url;
-        if (imageWidth < (imageHeight * windowWidth.value) / windowHeight.value) {
-          imageInstance.onload = () => {
-            stageSize.value.height = windowHeight.value * 0.75 - 20;
-            imageInstance.height = stageSize.value.height;
-            imageInstance.width = +(stageSize.value.height / imageHeight).toFixed(2) * imageWidth;
-            stageSize.value.width = imageInstance.width;
-          };
-        } else {
-          imageInstance.onload = () => {
-            stageSize.value.width = windowWidth.value * 0.63 - 60;
-            imageInstance.width = stageSize.value.width;
-            imageInstance.height = +(stageSize.value.width / imageWidth).toFixed(2) * imageHeight;
-            stageSize.value.height = imageInstance.height;
-          };
-        }
-      };
-    }
-  }
-);
-
-function saveImage() {
-  const interfaceStore = useInterfaceStore();
-  interfaceStore.changeHomeBackgroundUrl(finalImageUrl.value);
-  finalImageUrl.value = '';
-  isVisible.value = false;
-}
-const modalWidth = computed(() => {
-  if (stageSize.value.width > stageSize.value.height) {
-    return 63;
-  } else {
-    return (100 * (stageSize.value.width + 60)) / windowWidth.value;
-  }
-});
-function onCropperChange({ canvas }) {
-  finalImageUrl.value = canvas.toDataURL();
-}
-</script>
-
-<template>
-  <div>
-    <Dialog
-      v-model:visible="isVisible"
-      modal
-      :draggable="false"
-      :style="`width: ${modalWidth}%; position: relative`"
-    >
-      <template #header>
-        <div class="mx-auto select-none">
-          <i class="pi pi-upload mr-4" style="font-size: 1.5rem"></i>
-          <span class="font-bold text-2xl">Upload background</span>
-        </div>
-      </template>
-      <button
-        @click.prevent="saveImage"
-        class="absolute top-0 left-2 -translate-y-full bg-blue-600 p-2 px-4 text-lg font-bold transition-all border-0 border-t-2 border-t-solid border-t-black rounded-t-lg select-none"
-      >
-        Save image
-      </button>
-      <div
-        :style="`position: relative; width: ${stageSize.width}px; height: ${stageSize.height}px;`"
-      >
-        <Cropper
-          :src="imageInstance.src"
-          @change="onCropperChange"
-          :minWidth="200"
-          :minHeight="200"
-        ></Cropper>
-      </div>
-    </Dialog>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/src/modules/CropImageModal.vue b/src/modules/CropImageModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..44fd014cfd533b0ef35454cc598a8c60a73c7e2c
--- /dev/null
+++ b/src/modules/CropImageModal.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { Cropper } from 'vue-advanced-cropper';
+import 'vue-advanced-cropper/dist/style.css';
+import 'vue-advanced-cropper/dist/theme.compact.css';
+import { useWindowSize, useVModels } from '@vueuse/core';
+import type { IImageMainInfo } from '@/app/interfaces';
+import type { IImage } from '@/app/interfaces/entities';
+
+interface Props {
+  isVisible: boolean;
+  imageInfo: IImageMainInfo | IImage;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isVisible', 'saveImage']);
+const { isVisible, imageInfo } = useVModels(props, emit);
+
+const imageInstance = new Image();
+const finalImageUrl = ref<string>('');
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+
+const stageSize = ref({
+  width: 200,
+  height: 200
+});
+
+watch(
+  () => isVisible.value,
+  async () => {
+    if (imageInfo.value.image_url && isVisible.value) {
+      imageInstance.src = imageInfo.value.image_url;
+      imageInstance.onload = () => {
+        const imageHeight = imageInfo.value.image_height;
+        const imageWidth = imageInfo.value.image_width;
+        imageInstance.src = imageInfo.value.image_url;
+        if (imageWidth < (imageHeight * windowWidth.value) / windowHeight.value) {
+          imageInstance.onload = () => {
+            if (imageHeight < windowHeight.value * 0.75 - 20) {
+              stageSize.value.width = imageWidth;
+              stageSize.value.height = imageHeight;
+              imageInstance.width = stageSize.value.width;
+              imageInstance.height = stageSize.value.height;
+            } else {
+              stageSize.value.height = windowHeight.value * 0.75 - 20;
+              imageInstance.height = stageSize.value.height;
+              imageInstance.width = +(stageSize.value.height / imageHeight).toFixed(2) * imageWidth;
+              stageSize.value.width = imageInstance.width;
+            }
+          };
+        } else {
+          imageInstance.onload = () => {
+            if (imageWidth < windowWidth.value * 0.63 - 60) {
+              stageSize.value.width = imageWidth;
+              stageSize.value.height = imageHeight;
+              imageInstance.width = stageSize.value.width;
+              imageInstance.height = stageSize.value.height;
+            } else {
+              stageSize.value.width = windowWidth.value * 0.63 - 60;
+              imageInstance.width = stageSize.value.width;
+              imageInstance.height = +(stageSize.value.width / imageWidth).toFixed(2) * imageHeight;
+              stageSize.value.height = imageInstance.height;
+            }
+          };
+        }
+      };
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+const modalWidth = computed(() => {
+  if (
+    stageSize.value.width < windowWidth.value * 0.63 - 60 ||
+    stageSize.value.width <= stageSize.value.height
+  ) {
+    return (100 * (stageSize.value.width + 60)) / windowWidth.value;
+  } else return 63;
+});
+function onCropperChange({ canvas }) {
+  finalImageUrl.value = canvas.toDataURL();
+}
+function submitForm() {
+  emit('saveImage', finalImageUrl.value, imageInstance.width, imageInstance.height);
+  finalImageUrl.value = '';
+}
+</script>
+
+<template>
+  <div>
+    <Dialog
+      v-model:visible="isVisible"
+      modal
+      :draggable="false"
+      :style="`width: ${modalWidth}%; position: relative`"
+    >
+      <template #header>
+        <div class="mx-auto select-none">
+          <i
+            class="pi pi-upload mr-4"
+            :style="stageSize.width < 400 ? 'font-size: 1rem' : 'font-size: 1.5rem'"
+          ></i>
+          <span
+            :class="[
+              'font-bold text-2xl',
+              {
+                'text-lg': stageSize.width < 400
+              }
+            ]"
+            >Crop image</span
+          >
+        </div>
+      </template>
+      <button
+        @click.prevent="submitForm"
+        class="absolute top-0 left-2 -translate-y-full bg-blue-600 p-2 px-4 text-lg font-bold transition-all border-0 border-t-2 border-t-solid border-t-black rounded-t-lg select-none"
+      >
+        Save image
+      </button>
+      <div
+        :style="`position: relative; width: ${stageSize.width}px; height: ${stageSize.height}px;`"
+      >
+        <Cropper
+          :src="imageInstance.src"
+          @change="onCropperChange"
+          :minWidth="200"
+          :minHeight="200"
+        ></Cropper>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/EntityItem.vue b/src/modules/EntityItem.vue
index e9c55c8154574129be869233048bb8cfb0c4eab3..fec3597fd38dbf3e367c81c7a0ec6929c75b0356 100644
--- a/src/modules/EntityItem.vue
+++ b/src/modules/EntityItem.vue
@@ -2,17 +2,20 @@
 import type { IEntity } from '@/app/interfaces/environment';
 import TextItem from '@/modules/entities/TextItem.vue';
 import ImageItem from '@/modules/entities/ImageItem.vue';
-
+import Divider from '@/shared/BaseDivider.vue';
+import { useVModel } from '@vueuse/core';
 interface Props {
   entity: IEntity;
 }
-defineProps<Props>();
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entity = useVModel(props, 'entity', emit);
 </script>
 
 <template>
   <div>
     <TextItem v-if="entity.entity_type === 'text'" :entityData="entity" />
-    <ImageItem v-if="entity.entity_type === 'image'" :entityData="entity" />
+    <ImageItem v-if="entity.entity_type === 'image'" v-model:entityData="entity" />
     <div class="px-16">
       <Divider />
     </div>
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 695ed1056fcf191907696a93cc32e8488661da70..938f4eec8318db1fa1c6828951afc719c84ba907 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -2,69 +2,91 @@
 import type { IImage } from '@/app/interfaces/entities';
 import { deleteEntity, editEntity } from '@/app/helpers';
 import { useDataStore } from '@/app/stores/data';
-import { useElementSize } from '@vueuse/core';
+import { useElementSize, useTextareaAutosize, useVModel } from '@vueuse/core';
 import MoveMenu from '@/components/editEntityMenu/ImageMoveMenu.vue';
 import StateMenu from '@/components/editEntityMenu/ImageStateMenu.vue';
+import CropImageModal from '@/modules/CropImageModal.vue';
+import SizeMenu from '@/components/editEntityMenu/ImageSizeMenu.vue';
 
 interface Props {
   entityData: IImage;
 }
 const props = defineProps<Props>();
-const entityData = ref(props.entityData);
-// const imageUrl = ref<string>();
-onMounted(() => {
-  console.log('entityData.value', entityData.value);
+const emit = defineEmits(['update:entityData']);
+const entityData = useVModel(props, 'entityData', emit);
 
-  // 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 { height: imageHeight } = useElementSize(imageContainer);
 
-const editTitle = () => {
+function editTitle() {
   editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_uuid);
+}
+const editText = () => {
+  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.entity_uuid);
 };
-
-const addTitle = () => {
-  imageHeight.value = imageHeight.value + 48;
+function addTitle() {
+  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.entity_uuid);
+  entityData.value = { ...entityData.value, title: 'Title' };
+}
+function removeTitle() {
+  const newState = { ...entityData.value };
+  newState.title = null;
+  editEntity({ ...newState }, entityData.value.entity_uuid);
+  entityData.value = newState;
+}
+function addText() {
   editEntity(
-    { ...entityData.value, title: 'Title', image_height: imageHeight.value },
+    {
+      ...entityData.value,
+      text: 'Text',
+      text_position: 'right',
+      text_size: 'medium',
+      paragraph_size: 'medium'
+    },
     entityData.value.entity_uuid
   );
-  entityData.value = { ...entityData.value, title: 'Title' };
-};
-const removeTitle = () => {
+  entityData.value = { ...entityData.value, text: 'Text' };
+}
+function removeText() {
   const newState = { ...entityData.value };
-  delete newState.title;
-  imageHeight.value = imageHeight.value - 48;
-  editEntity({ ...newState, image_height: imageHeight.value }, entityData.value.entity_uuid);
+  newState.text = null;
+  newState.text_position = null;
+  newState.text_size = null;
+  newState.paragraph_size = null;
+  editEntity({ ...newState }, entityData.value.entity_uuid);
   entityData.value = newState;
-};
-
-const isResizable = defineModel({ default: false });
-const toggleIsResizable = () => {
-  isResizable.value = !isResizable.value;
-  if (!isResizable.value) {
-    editEntity(
-      { ...entityData.value, image_height: imageHeight.value, image_width: imageWidth.value },
-      entityData.value.entity_uuid
-    );
-  }
-};
-const editPosition = (position: 'left' | 'center' | 'right') => {
+}
+function editPosition(position: 'left' | 'center' | 'right') {
   entityData.value.image_position = position;
   editEntity({ ...entityData.value, image_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);
+}
 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;
+  entityData.value.image_width = newWidth;
+  entityData.value.image_height = newHeight;
+  editEntity({ ...entityData.value }, entityData.value.entity_uuid);
+  isModalCropImage.value = false;
+}
+function 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);
+}
+const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
 </script>
 
 <template>
@@ -78,6 +100,11 @@ const homeEntities = computed(() => dataStore.homeEntities);
       }
     ]"
   >
+    <CropImageModal
+      v-model:isVisible="isModalCropImage"
+      v-model:imageInfo="entityData"
+      @saveImage="saveImage"
+    />
     <div class="flex flex-col">
       <input
         ref="input"
@@ -87,33 +114,50 @@ const homeEntities = computed(() => dataStore.homeEntities);
         @change="editTitle"
         placeholder="Enter title..."
         class="w-full mb-4 font-bold text-2xl pl-2"
-        :style="`width: ${entityData.image_width}px`"
       />
-      <div
-        ref="imageContainer"
-        :class="[
-          'inline-block overflow-hidden leading-none max-h-[700px] min-h-[100px] min-w-[100px]',
-          {
-            resize: isResizable,
-            'min-h-[148px]': entityData.title || entityData.title === ''
-          }
-        ]"
-        :style="`height: ${entityData.image_height}px; width: ${entityData.image_width}px`"
-      >
-        <img
-          :src="entityData?.image_data"
-          :alt="`Image ${entityData?.title}` || 'Image'"
-          class="max-h-[700px] min-h-[100px] object-contain"
+      <div class="flex gap-4">
+        <div
+          ref="imageContainer"
+          :class="[
+            'imageContainer relative leading-none min-h-[100px] min-w-[100px]',
+            {
+              'order-3': entityData.text_position === 'left'
+            }
+          ]"
+          :style="`width: ${entityData.image_width}px; height: ${entityData.image_height}px`"
+        >
+          <img
+            :src="entityData?.image_url"
+            :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" />
+          </div>
+        </div>
+        <textarea
+          v-if="entityData.text_position"
+          ref="textarea"
+          v-model="entityData.text"
+          class="w-max block indent-5 resize-none outline-0 order-2"
+          @change="editText"
+          @input="triggerResize"
+          placeholder="Enter text..."
+          rows="2"
+          cols="50"
         />
       </div>
       <div class="speedDial absolute left-2 top-2 transition-all select-none">
         <StateMenu
           :entityData="entityData"
-          :isResizable="isResizable"
           @deleteEntity="deleteEntity"
           @addTitle="addTitle"
           @removeTitle="removeTitle"
-          @toggleIsResizable="toggleIsResizable"
+          @addText="addText"
+          @removeText="removeText"
+          @openUploadFileModal="openUploadFileModal"
         />
       </div>
       <div
@@ -122,8 +166,8 @@ const homeEntities = computed(() => dataStore.homeEntities);
       >
         <MoveMenu
           :entityData="entityData"
-          :isResizable="isResizable"
           @editPosition="editPosition"
+          @editTextPosition="editTextPosition"
         />
       </div>
     </div>
@@ -137,6 +181,12 @@ const homeEntities = computed(() => dataStore.homeEntities);
 .entityContainer:hover .speedDial {
   opacity: 100;
 }
+.imageContainer .speedDialSize {
+  opacity: 0;
+}
+.imageContainer:hover .speedDialSize {
+  opacity: 100;
+}
 input::placeholder {
   font-weight: 400;
 }
diff --git a/src/output.css b/src/output.css
index 59e1c498cb784192eb1eb239628894914a1e0457..e15cbc3e206ec5e2685bf0c59b29443658e03a9c 100644
--- a/src/output.css
+++ b/src/output.css
@@ -644,6 +644,26 @@ video {
   top: 0.5rem;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
+.z-\[100\] {
+  z-index: 100;
+}
+
+.order-1 {
+  order: 1;
+}
+
+.order-2 {
+  order: 2;
+}
+
+.order-3 {
+  order: 3;
+}
+
 .-m-2 {
   margin: -0.5rem;
 }
@@ -710,10 +730,6 @@ video {
   display: block;
 }
 
-.inline-block {
-  display: inline-block;
-}
-
 .flex {
   display: flex;
 }
@@ -736,6 +752,11 @@ video {
   height: 3rem;
 }
 
+.size-64 {
+  width: 16rem;
+  height: 16rem;
+}
+
 .h-\[1px\] {
   height: 1px;
 }
@@ -752,8 +773,8 @@ video {
   min-height: 100px;
 }
 
-.min-h-\[148px\] {
-  min-height: 148px;
+.w-12 {
+  width: 3rem;
 }
 
 .w-2 {
@@ -772,15 +793,39 @@ video {
   width: 100%;
 }
 
+.w-max {
+  width: -moz-max-content;
+  width: max-content;
+}
+
 .min-w-\[100px\] {
   min-width: 100px;
 }
 
+.-translate-y-2 {
+  --tw-translate-y: -0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-6 {
+  --tw-translate-y: -1.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .-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-4 {
+  --tw-translate-y: -1rem;
+  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));
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -827,10 +872,18 @@ video {
   justify-content: space-between;
 }
 
+.gap-12 {
+  gap: 3rem;
+}
+
 .gap-2 {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -897,9 +950,24 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
-.bg-gray-500 {
+.bg-gray-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
+.bg-orange-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 }
 
 .bg-sky-900 {
@@ -907,11 +975,25 @@ video {
   background-color: rgb(12 74 110 / var(--tw-bg-opacity));
 }
 
+.bg-violet-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
+}
+
 .bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
@@ -974,6 +1056,10 @@ video {
   padding-right: 135px;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1037,6 +1123,10 @@ video {
   outline-width: 0px;
 }
 
+.filter {
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .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 f25871e787c7d59373445c2145b6be5b46dd8498..845579e51b18e60a7c08ad416c2eceeabc8bbbdb 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useElementSize } from '@vueuse/core';
+import { useElementSize, useWindowSize } from '@vueuse/core';
 import { setDefaultHomeBackground } from '@/app/helpers';
 import { useInterfaceStore } from '@/app/stores/interface';
 import { useDataStore } from '@/app/stores/data';
@@ -9,12 +9,14 @@ import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces';
 import EntityItem from '@/modules/EntityItem.vue';
 import CreateEntityMenu from '@/components/CreateEntityMenu.vue';
-import BaseModal from '@/modules/BaseModal.vue';
+import CropImageModal from '@/modules/CropImageModal.vue';
 
 const backgroundImage = ref();
 const { height: backgroundImageHeight } = useElementSize(backgroundImage);
 const entitiesContainer = ref();
 const { height: entitiesHeight } = useElementSize(entitiesContainer);
+const splitterPanelBackground = ref();
+const { height: splitterPanelBackgroundHeight } = useElementSize(splitterPanelBackground);
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
@@ -36,9 +38,9 @@ const addEntity = (newEntity: IEntity) => {
 };
 
 const imageInfo = ref<IImageMainInfo>({
-  url: backgroundUrl.value,
-  width: 0,
-  height: 0
+  image_url: backgroundUrl.value,
+  image_width: 0,
+  image_height: 0
 });
 const isModalUploadFile = ref<boolean>(false);
 function openUploadFileModal() {
@@ -51,35 +53,46 @@ function uploadFile($event: Event) {
     const file = target.files[0];
     const url = URL.createObjectURL(file);
     image.src = url;
-    console.log('url: ', url);
     image.onload = function () {
-      imageInfo.value.url = url;
-      imageInfo.value.width = image.width;
-      imageInfo.value.height = image.height;
-      console.log('imageInfo.value', imageInfo.value);
+      imageInfo.value.image_url = url;
+      imageInfo.value.image_width = image.width;
+      imageInfo.value.image_height = image.height;
       openUploadFileModal();
     };
   }
 }
+function saveImage(finalImageUrl: string) {
+  const interfaceStore = useInterfaceStore();
+  interfaceStore.changeHomeBackgroundUrl(finalImageUrl);
+  isModalUploadFile.value = false;
+}
+
+const splitterHeight = computed(() => {
+  return splitterPanelBackgroundHeight.value + entitiesHeight.value + 100;
+});
 </script>
 
 <template>
   <header>
     <h1 class="text-center text-4xl py-4">Home page</h1>
   </header>
-  <BaseModal v-model:isVisible="isModalUploadFile" v-model:imageInfo="imageInfo" />
+  <CropImageModal
+    v-model:isVisible="isModalUploadFile"
+    v-model:imageInfo="imageInfo"
+    @saveImage="saveImage"
+  />
   <main class="flex flex-col">
     <Splitter
-      :style="`height: calc(${backgroundImageHeight - 3}px + ${entitiesHeight}px + 100px);`"
+      :style="`height: ${splitterHeight}px;`"
       layout="vertical"
       stateKey="homeSplitter"
       stateStorage="local"
     >
       <SplitterPanel
-        ref="splitterBackground"
         :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"
         >
@@ -95,14 +108,14 @@ function uploadFile($event: Event) {
         </div>
         <button
           @click.prevent="setDefaultHomeBackground"
-          v-if="imageInfo.url !== defaultBackgroundUrl"
+          v-if="imageInfo.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>
       </SplitterPanel>
       <SplitterPanel class="flex items-start justify-center"
-        ><div ref="entitiesContainer" class="w-full">
+        ><div ref="entitiesContainer" class="w-full pt-4">
           <EntityItem
             v-for="entitiesItem of entities"
             :entity="entitiesItem"
diff --git a/src/shared/Divider.vue b/src/shared/BaseDivider.vue
similarity index 62%
rename from src/shared/Divider.vue
rename to src/shared/BaseDivider.vue
index 254dc29d1b841dc1d92cd6612adb6a32adbf6c71..a52ee6acf205cd315a639e5e683f822b810ea31a 100644
--- a/src/shared/Divider.vue
+++ b/src/shared/BaseDivider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <div class="w-full h-[1px] bg-gray-500"></div>
+  <div class="w-full h-[1px] bg-gray-600"></div>
 </template>
 
 <style scoped></style>
diff --git a/vite.config.ts b/vite.config.ts
index d8cfa76b232136a5987ff4d8fdd930ff12243cd7..d4abdaa99c5662c838fa61f9735e1c308ae0f04f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,6 +8,9 @@ import { PrimeVueResolver } from '@primevue/auto-import-resolver';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    'process.env': {}
+  },
   plugins: [
     vue({
       template: {}
diff --git a/yarn.lock b/yarn.lock
index 01f697996e796b92602d7a72c98cf1d3f7143ca5..2bf064bc18391d5c36088b6861450a07fcd201a0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -420,6 +420,63 @@
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
   integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
 
+"@supabase/auth-js@2.64.4":
+  version "2.64.4"
+  resolved "https://registry.yarnpkg.com/@supabase/auth-js/-/auth-js-2.64.4.tgz#f27fdabf1ebd1b532ceb57e8bbe66969ee09cfba"
+  integrity sha512-9ITagy4WP4FLl+mke1rchapOH0RQpf++DI+WSG2sO1OFOZ0rW3cwAM0nCrMOxu+Zw4vJ4zObc08uvQrXx590Tg==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/functions-js@2.4.1":
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.4.1.tgz#373e75f8d3453bacd71fb64f88d7a341d7b53ad7"
+  integrity sha512-8sZ2ibwHlf+WkHDUZJUXqqmPvWQ3UHN0W30behOJngVh/qHHekhJLCFbh0AjkE9/FqqXtf9eoVvmYgfCLk5tNA==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/node-fetch@2.6.15", "@supabase/node-fetch@^2.6.14":
+  version "2.6.15"
+  resolved "https://registry.yarnpkg.com/@supabase/node-fetch/-/node-fetch-2.6.15.tgz#731271430e276983191930816303c44159e7226c"
+  integrity sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==
+  dependencies:
+    whatwg-url "^5.0.0"
+
+"@supabase/postgrest-js@1.15.8":
+  version "1.15.8"
+  resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.15.8.tgz#827aaa408cdbc89e67d0a758e7a545ac86e34312"
+  integrity sha512-YunjXpoQjQ0a0/7vGAvGZA2dlMABXFdVI/8TuVKtlePxyT71sl6ERl6ay1fmIeZcqxiuFQuZw/LXUuStUG9bbg==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/realtime-js@2.10.2":
+  version "2.10.2"
+  resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.10.2.tgz#c2b42d17d723d2d2a9146cfad61dc3df1ce3127e"
+  integrity sha512-qyCQaNg90HmJstsvr2aJNxK2zgoKh9ZZA8oqb7UT2LCh3mj9zpa3Iwu167AuyNxsxrUE8eEJ2yH6wLCij4EApA==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+    "@types/phoenix" "^1.5.4"
+    "@types/ws" "^8.5.10"
+    ws "^8.14.2"
+
+"@supabase/storage-js@2.6.0":
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.6.0.tgz#0fa5e04db760ed7f78e4394844a6d409e537adc5"
+  integrity sha512-REAxr7myf+3utMkI2oOmZ6sdplMZZ71/2NEIEMBZHL9Fkmm3/JnaOZVSRqvG4LStYj2v5WhCruCzuMn6oD/Drw==
+  dependencies:
+    "@supabase/node-fetch" "^2.6.14"
+
+"@supabase/supabase-js@^2.45.1":
+  version "2.45.1"
+  resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.45.1.tgz#38992923e4150dc5d8f99fda02c9f81bf0d5a4d6"
+  integrity sha512-/PVe3lXmalazD8BGMIoI7+ttvT1mLXy13lNcoAPtjP1TDDY83g8csZbVR6l+0/RZtvJxl3LGXfTJT4bjWgC5Nw==
+  dependencies:
+    "@supabase/auth-js" "2.64.4"
+    "@supabase/functions-js" "2.4.1"
+    "@supabase/node-fetch" "2.6.15"
+    "@supabase/postgrest-js" "1.15.8"
+    "@supabase/realtime-js" "2.10.2"
+    "@supabase/storage-js" "2.6.0"
+
 "@tsconfig/node20@^20.1.4":
   version "20.1.4"
   resolved "https://registry.yarnpkg.com/@tsconfig/node20/-/node20-20.1.4.tgz#3457d42eddf12d3bde3976186ab0cd22b85df928"
@@ -435,6 +492,13 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
+"@types/node@*":
+  version "22.4.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.4.0.tgz#c295fe1d6f5f58916cc61dbef8cf65b5b9b71de9"
+  integrity sha512-49AbMDwYUz7EXxKU/r7mXOsxwFr4BYbvB7tWYxVuLdb2ibd30ijjXINSMAHiEEZk5PCRBmW1gUeisn2VMKt3cQ==
+  dependencies:
+    undici-types "~6.19.2"
+
 "@types/node@^20.14.5":
   version "20.14.14"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.14.tgz#6b655d4a88623b0edb98300bb9dd2107225f885e"
@@ -442,6 +506,11 @@
   dependencies:
     undici-types "~5.26.4"
 
+"@types/phoenix@^1.5.4":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.6.5.tgz#5654e14ec7ad25334a157a20015996b6d7d2075e"
+  integrity sha512-xegpDuR+z0UqG9fwHqNoy3rI7JDlvaPh2TY47Fl80oq6g+hXT+c/LEuE43X48clZ6lOfANl5WrPur9fYO1RJ/w==
+
 "@types/uuid@^10.0.0":
   version "10.0.0"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-10.0.0.tgz#e9c07fe50da0f53dc24970cca94d619ff03f6f6d"
@@ -452,6 +521,13 @@
   resolved "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz"
   integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
 
+"@types/ws@^8.5.10":
+  version "8.5.12"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.12.tgz#619475fe98f35ccca2a2f6c137702d85ec247b7e"
+  integrity sha512-3tPRkv1EtkDpzlgyKyI8pGsGZAGPEaXeu0DOj5DI25Ja91bdAYddYHbADRYVrZMRbfW+1l5YwXVDKohDJNQxkQ==
+  dependencies:
+    "@types/node" "*"
+
 "@typescript-eslint/eslint-plugin@^7.1.1":
   version "7.18.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz#b16d3cf3ee76bf572fdf511e79c248bdec619ea3"
@@ -2269,6 +2345,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
+
 ts-api-utils@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.3.0.tgz#4b490e27129f1e8e686b45cc4ab63714dc60eea1"
@@ -2311,6 +2392,11 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+undici-types@~6.19.2:
+  version "6.19.6"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.6.tgz#e218c3df0987f4c0e0008ca00d6b6472d9b89b36"
+  integrity sha512-e/vggGopEfTKSvj4ihnOLTsqhrKRN3LeO6qSN/GxohhuRv8qH9bNQ4B8W7e/vFL+0XTnmHPB4/kegunZGA4Org==
+
 unimport@^3.9.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/unimport/-/unimport-3.10.0.tgz#a2a442679db2332d1f703fe7bb6d902dc1a93683"
@@ -2465,6 +2551,11 @@ vue@^3.4.29:
     "@vue/server-renderer" "3.4.35"
     "@vue/shared" "3.4.35"
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
+
 webpack-sources@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
@@ -2475,6 +2566,14 @@ webpack-virtual-modules@^0.6.2:
   resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
   integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
@@ -2510,6 +2609,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
+ws@^8.14.2:
+  version "8.18.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
+
 xml-name-validator@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"