diff --git a/components.d.ts b/components.d.ts
index b5319bf7693e67fa4a592db7c18c4833b4d1f293..88454d34c8c74b640da5264032b93b8c19405053 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -2,7 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {
@@ -12,16 +12,17 @@ declare module 'vue' {
     CreateEntityMenu: typeof import('./src/components/CreateEntityMenu.vue')['default']
     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']
-    Popover: typeof import('primevue/popover')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
-    ScrollPanel: typeof import('primevue/scrollpanel')['default']
     SpeedDial: typeof import('primevue/speeddial')['default']
     Splitter: typeof import('primevue/splitter')['default']
     SplitterPanel: typeof import('primevue/splitterpanel')['default']
-    Textarea: typeof import('primevue/textarea')['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/package.json b/package.json
index 0b289c80a2c2b323250bc1131b67c8042b580bdd..15be68437e82dca77bc43ba3806ab559e7188210 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.0.4",
+    "@vueuse/components": "^10.11.1",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "pinia": "^2.1.7",
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 8f1f99f2ac104ef81c9168b2a4343c6262373294..2c70aad511232c5edaa8a7cc967a1a116443f9aa 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -1,8 +1,42 @@
 <script setup lang="ts">
 import { v4 as uuidv4 } from 'uuid';
+import { useFileDialog } from '@vueuse/core';
+import { useInterfaceStore } from '@/stores/interface';
 
 const emit = defineEmits(['addEntity']);
 
+const {
+  files,
+  open: uploadFile,
+  reset,
+  onChange
+} = useFileDialog({
+  accept: 'image/*'
+});
+
+const addImage = (files: FileList) => {
+  console.log('files', files);
+
+  const file = files[0];
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.addEventListener('load', () => {
+    const url = reader.result;
+    emit('addEntity', {
+      type: 'image',
+      uuid: uuidv4(),
+      url,
+      position: 'left',
+      height: 300
+    });
+  });
+};
+onChange((files) => {
+  if (files && files?.length > 0) {
+    addImage(files);
+  }
+});
+
 const speedDialItems = ref([
   {
     label: 'Text',
@@ -19,10 +53,8 @@ const speedDialItems = ref([
     label: 'Image',
     icon: 'pi pi-image',
     command: () => {
-      emit('addEntity', {
-        type: 'image',
-        uuid: uuidv4()
-      });
+      uploadFile();
+      console.log('uploadFile finished');
     }
   },
   {
diff --git a/src/components/EditImageEntityMenu.vue b/src/components/EditImageEntityMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8651fabca6415305f5c5c98b088355d5af3d8fdb
--- /dev/null
+++ b/src/components/EditImageEntityMenu.vue
@@ -0,0 +1,189 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity, deleteEntity } from '@/helpers';
+import type { IImage } from '@/interfaces/entities';
+import { useDataStore } from '@/stores/data';
+import type { IEntity } from '@/interfaces/environment';
+
+interface Props {
+  entityData: IImage;
+  isResizable: boolean;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits([
+  'deleteEntity',
+  'addTitle',
+  'removeTitle',
+  'editPosition',
+  'toggleIsResizable'
+]);
+
+const isResizable = computed(() => props.isResizable);
+const position = computed(() => props.entityData.position);
+
+const speedDialState = computed(() => {
+  const state = [];
+  if (!props.entityData?.title && props.entityData?.title !== '') {
+    state.push({
+      label: 'Add title',
+      icon: 'pi pi-pencil',
+      command: () => emit('addTitle')
+    });
+  }
+  if (props.entityData?.title || props.entityData?.title === '') {
+    state.push({
+      label: 'Remove title',
+      icon: 'pi pi-trash',
+      command: () => emit('removeTitle')
+    });
+  }
+  if (position.value !== 'right') {
+    state.push({
+      label: !isResizable.value ? 'Resize' : 'Stop resize',
+      icon: 'pi pi-arrow-up-right-and-arrow-down-left-from-center',
+      command: () => emit('toggleIsResizable')
+    });
+  }
+  state.push({
+    label: 'Delete',
+    icon: 'pi pi-trash',
+    command: () => deleteEntity(props.entityData.uuid)
+  });
+  return state;
+});
+
+const speedDialMove = computed(() => {
+  const state = [];
+  switch (position.value) {
+    case 'left':
+      state.push({
+        label: 'Move to center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editPosition', 'center')
+      });
+      state.push({
+        label: 'Move right',
+        icon: 'pi pi-arrow-right',
+        command: () => emit('editPosition', 'right')
+      });
+      break;
+    case 'center':
+      state.push({
+        label: 'Move left',
+        icon: 'pi pi-arrow-left',
+        command: () => emit('editPosition', 'left')
+      });
+      state.push({
+        label: 'Move right',
+        icon: 'pi pi-arrow-right',
+        command: () => emit('editPosition', 'right')
+      });
+      break;
+    case 'right':
+      state.push({
+        label: 'Move left',
+        icon: 'pi pi-arrow-left',
+        command: () => emit('editPosition', 'left')
+      });
+      state.push({
+        label: 'Move to center',
+        icon: 'pi pi-align-center',
+        command: () => emit('editPosition', 'center')
+      });
+  }
+  const dataStore = useDataStore();
+  const entities = dataStore.homeEntities;
+  const entityIndex = entities.findIndex(
+    (entity: IEntity) => entity.uuid === props.entityData.uuid
+  );
+  if (entityIndex !== 0) {
+    state.push({
+      label: 'Move up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'up')
+    });
+  }
+  if (entityIndex !== entities.length - 1) {
+    state.push({
+      label: 'Move down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div class="relative">
+    <SpeedDial
+      :model="speedDialState"
+      direction="right"
+      pt:root:class="speedDialRoot w-4"
+      class="absolute"
+    >
+      <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>
+    <SpeedDial
+      v-if="!isResizable"
+      :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"
+          @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/EditTextEntityMenu.vue b/src/components/EditTextEntityMenu.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a02b908acfe378d15768f6da150a300df4acba27
--- /dev/null
+++ b/src/components/EditTextEntityMenu.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { changeOrderHomeEntity, deleteEntity } 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 emit = defineEmits([
+  'deleteEntity',
+  'addTitle',
+  'removeTitle'
+  // 'toLeftPosition',
+  // 'toCenterPosition',
+  // 'toRightPosition',
+  // 'toggleIsResizable'
+]);
+
+// const isResizable = computed(() => props.isResizable);
+// const position = computed(() => props.entityData.position);
+
+const speedDialState = computed(() => {
+  const state = [];
+  if (!props.entityData?.title && props.entityData?.title !== '') {
+    state.push({
+      label: 'Add title',
+      icon: 'pi pi-pencil',
+      command: () => emit('addTitle')
+    });
+  }
+  if (props.entityData?.title || props.entityData?.title === '') {
+    state.push({
+      label: 'Remove 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.uuid)
+  });
+  return state;
+});
+
+const speedDialMove = computed(() => {
+  const state = [];
+  const dataStore = useDataStore();
+  const entities = dataStore.homeEntities;
+  const entityIndex = entities.findIndex(
+    (entity: IEntity) => entity.uuid === props.entityData.uuid
+  );
+  if (entityIndex !== 0) {
+    state.push({
+      label: 'Move up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'up')
+    });
+  }
+  if (entityIndex !== entities.length - 1) {
+    state.push({
+      label: 'Move down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.uuid, 'down')
+    });
+  }
+  return state;
+});
+</script>
+
+<template>
+  <div class="relative">
+    <SpeedDial
+      :model="speedDialState"
+      direction="right"
+      pt:root:class="speedDialRoot w-16 -translate-y-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>
+    <SpeedDial :model="speedDialMove" direction="right" pt:root:class="speedDialRoot w-16">
+      <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/entities/ImageItem.vue b/src/components/entities/ImageItem.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d9c5870c037f63d648e2ad4f18abcd654157e766
--- /dev/null
+++ b/src/components/entities/ImageItem.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { IImage } from '@/interfaces/entities';
+import { deleteEntity, editEntity } from '@/helpers';
+import EditImageEntityMenu from '@/components/EditImageEntityMenu.vue';
+import { useDataStore } from '@/stores/data';
+import { useElementSize } from '@vueuse/core';
+
+interface Props {
+  entityData: IImage;
+}
+const props = defineProps<Props>();
+const entityData = ref(props.entityData);
+
+const dataStore = useDataStore();
+const entities = computed(() => dataStore.homeEntities);
+
+const imageContainer = ref();
+const { width: imageWidth, height: imageHeight } = useElementSize(imageContainer);
+
+const editTitle = () => {
+  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.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 = { ...entityData.value, title: 'Title' };
+};
+const removeTitle = () => {
+  const newState = { ...entityData.value };
+  delete newState.title;
+  imageHeight.value = imageHeight.value - 48;
+  editEntity({ ...newState, height: imageHeight.value }, entityData.value.uuid);
+  entityData.value = newState;
+};
+
+const isResizable = defineModel({ default: false });
+const toggleIsResizable = () => {
+  isResizable.value = !isResizable.value;
+  if (!isResizable.value) {
+    editEntity(
+      { ...entityData.value, height: imageHeight.value, width: imageWidth.value },
+      entityData.value.uuid
+    );
+    console.log(entityData.value);
+  }
+};
+const editPosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.position = position;
+  editEntity({ ...entityData.value, position }, entityData.value.uuid);
+};
+</script>
+
+<template>
+  <div
+    :class="[
+      'entityContainer relative flex',
+      {
+        'justify-start': entityData.position === 'left',
+        'justify-center': entityData.position === 'center',
+        'justify-end': entityData.position === 'right'
+      }
+    ]"
+  >
+    <div class="flex flex-col">
+      <input
+        ref="input"
+        v-if="entityData.title || entityData.title === ''"
+        type="text"
+        v-model="entityData.title"
+        @change="editTitle"
+        placeholder="Enter title..."
+        class="w-full mb-4 font-bold text-2xl pl-2"
+        :style="`width: ${entityData.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.height}px; width: ${entityData.width}px`"
+      >
+        <img
+          :src="entityData.url"
+          :alt="`Image ${entityData?.title}` || 'Image'"
+          class="max-h-[700px] min-h-[100px] object-contain"
+        />
+      </div>
+      <div class="speedDial absolute top-16 left-2 transition-all select-none">
+        <EditImageEntityMenu
+          :entityData="entityData"
+          :isResizable="isResizable"
+          @deleteEntity="deleteEntity"
+          @editPosition="editPosition"
+          @addTitle="addTitle"
+          @removeTitle="removeTitle"
+          @toggleIsResizable="toggleIsResizable"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.entityContainer .speedDial {
+  opacity: 0;
+}
+.entityContainer:hover .speedDial {
+  opacity: 100;
+}
+input::placeholder {
+  font-weight: 400;
+}
+</style>
diff --git a/src/components/entities/TextItem.vue b/src/components/entities/TextItem.vue
index dd3b61ebbd0749d410ec67b46135912faf714183..45d8bd820446cc1490c3d991cd6adecb2ed70a7d 100644
--- a/src/components/entities/TextItem.vue
+++ b/src/components/entities/TextItem.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { IText } from '@/interfaces/entities';
-import type { IEntity } from '@/interfaces/environment';
 import { useDataStore } from '@/stores/data';
-import {useTextareaAutosize} from "@vueuse/core";
+import { useTextareaAutosize } from '@vueuse/core';
+import { deleteEntity, editEntity } from '@/helpers';
+import EditTextEntityMenu from '@/components/EditTextEntityMenu.vue';
 
 interface Props {
   entityData: IText;
@@ -10,55 +11,56 @@ interface Props {
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
-const dataStore = useDataStore();
-
-const editEntity = (newState: IEntity) => {
-  let prevState = dataStore.homeEntities;
-  prevState = prevState.map((entity: IEntity) => {
-    if (entity.uuid !== entityData.value.uuid) return entity;
-    return newState;
-  });
-  dataStore.editHomeEntities(prevState);
-};
-
 const addTitle = () => {
-  editEntity({ ...entityData.value, title: 'Title' });
+  editEntity({ ...entityData.value, title: 'Title' }, entityData.value.uuid);
   entityData.value = { ...entityData.value, title: 'Title' };
 };
 
 const editTitle = () => {
-  editEntity({ ...entityData.value, title: entityData.value.title });
+  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.uuid);
 };
 
 const editText = () => {
-  editEntity({ ...entityData.value, text: entityData.value.text });
+  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.uuid);
 };
 
-const deleteEntity = () => {
-  let prevState = dataStore.homeEntities;
-  prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityData.value.uuid);
-  dataStore.editHomeEntities(prevState);
-}
-const { textarea, triggerResize  } = useTextareaAutosize();
+const removeTitle = () => {
+  const newState = { ...entityData.value };
+  delete newState.title;
+  editEntity({ ...newState }, entityData.value.uuid);
+  entityData.value = newState;
+};
+
+const { textarea, triggerResize } = useTextareaAutosize();
 </script>
 
 <template>
-  <div class="textContainer relative">
-    <input ref="input" v-if="entityData?.title" type="text" v-model="entityData.title" @change="editTitle" @input="triggerResize" class="w-full mb-2 font-bold 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" @change="editText" @input="triggerResize" placeholder="Enter text..."/>
-    <button
-        v-if="!entityData.title"
-        @click.prevent="addTitle"
-        class="addTitleButton absolute top-0 left-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      Add title
-    </button>
-    <button
-        @click.prevent="deleteEntity"
-        class="deleteEntityButton absolute top-0 right-4 bg-blue-500 py-0.5 px-2 rounded-md -translate-y-full border-2 border-solid border-black transition-all select-none"
-    >
-      <i class="pi pi-trash pr-2"></i>Delete
-    </button>
+  <div class="entityContainer relative">
+    <input
+      ref="input"
+      v-if="entityData.title || entityData.title === ''"
+      type="text"
+      v-model="entityData.title"
+      @change="editTitle"
+      placeholder="Enter title..."
+      class="w-full mb-2 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"
+      @change="editText"
+      @input="triggerResize"
+      placeholder="Enter text..."
+    />
+    <div class="speedDial absolute top-0 left-2 z-50 transition-all select-none">
+      <EditTextEntityMenu
+        :entityData="entityData"
+        @deleteEntity="deleteEntity"
+        @addTitle="addTitle"
+        @removeTitle="removeTitle"
+      />
+    </div>
   </div>
 </template>
 
@@ -71,12 +73,13 @@ textarea {
 textarea::-webkit-scrollbar {
   display: none;
 }
-.textContainer > .addTitleButton,
-.textContainer > .deleteEntityButton {
+.entityContainer > .speedDial {
   opacity: 0;
 }
-.textContainer:hover > .addTitleButton,
-.textContainer:hover > .deleteEntityButton{
+.entityContainer:hover > .speedDial {
   opacity: 100;
 }
+input::placeholder {
+  font-weight: 400;
+}
 </style>
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index eb5badfc9a3fc44cbe6b582df3b6e8479680994e..a36d3f01254a8fa62183ec0e92402578e20caf89 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,5 +1,6 @@
 import { useInterfaceStore } from '@/stores/interface';
 import type { IEntity } from '@/interfaces/environment';
+import { useDataStore } from '@/stores/data';
 
 export async function uploadFile($event: Event) {
   const target = $event.target as HTMLInputElement;
@@ -23,3 +24,38 @@ export function setDefaultHomeBackground() {
   );
   localStorage.removeItem('homeBackgroundUrl');
 }
+
+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);
+};
+
+export const deleteEntity = (entityUuid: string) => {
+  const dataStore = useDataStore();
+  let prevState = dataStore.homeEntities;
+  prevState = prevState.filter((entity: IEntity) => entity.uuid !== entityUuid);
+  dataStore.editHomeEntities(prevState);
+};
+
+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);
+};
diff --git a/src/interfaces/entities.ts b/src/interfaces/entities.ts
index 5728cb7802117638a791c99049e9a8e72f76d2e1..fffff4dcf2cac2f6a843421db30a48da282a1cce 100644
--- a/src/interfaces/entities.ts
+++ b/src/interfaces/entities.ts
@@ -31,8 +31,9 @@ export interface IText {
 export interface IImage {
   type: 'image';
   uuid: string;
-  name: string;
+  title: string;
   url: string;
   width: number;
   height: number;
+  position: 'left' | 'center' | 'right';
 }
diff --git a/src/modules/EntityItem.vue b/src/modules/EntityItem.vue
index b2732984d98cb9a9c9e52fe192df1f71e3506c77..01fb2f80f28637dcba4f31243172626a9f71e6c0 100644
--- a/src/modules/EntityItem.vue
+++ b/src/modules/EntityItem.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { IEntity } from '@/interfaces/environment';
 import TextItem from '@/components/entities/TextItem.vue';
+import ImageItem from '@/components/entities/ImageItem.vue';
 
 interface Props {
   entity: IEntity;
@@ -10,7 +11,8 @@ defineProps<Props>();
 
 <template>
   <div>
-    <TextItem v-if="entity.type === 'text'" :entityData="entity"/>
+    <TextItem v-if="entity.type === 'text'" :entityData="entity" />
+    <ImageItem v-if="entity.type === 'image'" :entityData="entity" />
   </div>
 </template>
 
diff --git a/src/output.css b/src/output.css
index f150fa55fdc7ade337663d38984c036f298513f5..122ecf845c4ef1d5443e37ef08d273b2d2775984 100644
--- a/src/output.css
+++ b/src/output.css
@@ -620,18 +620,14 @@ video {
   left: 0px;
 }
 
-.left-4 {
-  left: 1rem;
+.left-2 {
+  left: 0.5rem;
 }
 
 .right-2 {
   right: 0.5rem;
 }
 
-.right-4 {
-  right: 1rem;
-}
-
 .top-0 {
   top: 0px;
 }
@@ -644,6 +640,10 @@ video {
   top: 0.5rem;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .-m-2 {
   margin: -0.5rem;
 }
@@ -669,10 +669,18 @@ video {
   margin-right: -135px;
 }
 
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -701,6 +709,10 @@ video {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .flex {
   display: flex;
 }
@@ -713,6 +725,11 @@ video {
   display: table;
 }
 
+.size-10 {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
 .size-12 {
   width: 3rem;
   height: 3rem;
@@ -722,6 +739,18 @@ video {
   height: 100%;
 }
 
+.max-h-\[700px\] {
+  max-height: 700px;
+}
+
+.min-h-\[100px\] {
+  min-height: 100px;
+}
+
+.min-h-\[148px\] {
+  min-height: 148px;
+}
+
 .w-2 {
   width: 0.5rem;
 }
@@ -730,15 +759,37 @@ video {
   width: 5rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
 .w-full {
   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;
+  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-12 {
+  --tw-translate-y: -3rem;
+  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;
 }
@@ -753,6 +804,10 @@ video {
   resize: none;
 }
 
+.resize {
+  resize: both;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -765,6 +820,14 @@ video {
   align-items: center;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
 .justify-center {
   justify-content: center;
 }
@@ -777,10 +840,18 @@ video {
   gap: 0.5rem;
 }
 
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -840,6 +911,15 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-opacity-70 {
+  --tw-bg-opacity: 0.7;
+}
+
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
 .p-2 {
   padding: 0.5rem;
 }
@@ -848,9 +928,8 @@ video {
   padding: 1rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+.p-6 {
+  padding: 1.5rem;
 }
 
 .px-4 {
@@ -858,11 +937,6 @@ video {
   padding-right: 1rem;
 }
 
-.py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
@@ -893,8 +967,8 @@ video {
   padding-right: 135px;
 }
 
-.pt-6 {
-  padding-top: 1.5rem;
+.pt-8 {
+  padding-top: 2rem;
 }
 
 .text-center {
@@ -928,11 +1002,20 @@ video {
   font-weight: 600;
 }
 
+.leading-none {
+  line-height: 1;
+}
+
 .text-gray-400 {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.text-red-400 {
+  --tw-text-opacity: 1;
+  color: rgb(248 113 113 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -942,10 +1025,6 @@ video {
   opacity: 0;
 }
 
-.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 e8c3cf2e5c29121752a44e6270e76bb274f29712..f372c6dde70ec1ebbdfddc437c9154ede3c3b814 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -59,19 +59,12 @@ const addEntity = (newEntity: IEntity) => {
         </button>
       </SplitterPanel>
       <SplitterPanel class="flex items-start justify-center"
-        ><div ref="entitiesContainer" class="pt-6 px-4">
-          <p class="mb-6">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem cum dolores doloribus
-            dolorum, earum illum nam nemo nesciunt odit pariatur quam quisquam reprehenderit
-            sapiente ullam unde ut vel, voluptatem! Lorem ipsum dolor sit amet, consectetur
-            adipisicing elit. Ad autem cum dolores doloribus dolorum, earum illum nam nemo nesciunt
-            odit pariatur quam quisquam reprehenderit sapiente ullam unde ut vel, voluptatem!
-          </p>
+        ><div ref="entitiesContainer" class="w-full pt-8 px-4">
           <EntityItem
             v-for="entitiesItem of entities"
             :entity="entitiesItem"
             :key="entitiesItem.uuid"
-            class="mb-6"
+            class="mb-12"
           />
           <div class="relative">
             <CreateEntityMenu @addEntity="addEntity" />
diff --git a/yarn.lock b/yarn.lock
index f16163461eaacb730f8eba0dda0995fd4b0c2786..78c6dd12567b2926e62ee4ddfdf524474744fa6c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -693,6 +693,15 @@
   resolved "https://registry.yarnpkg.com/@vue/tsconfig/-/tsconfig-0.5.1.tgz#3124ec16cc0c7e04165b88dc091e6b97782fffa9"
   integrity sha512-VcZK7MvpjuTPx2w6blwnwZAu5/LgBUtejFOi3pPGQFXQN5Ela03FUtd2Qtg4yWGGissVL0dr6Ro1LfOFh+PCuQ==
 
+"@vueuse/components@^10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/components/-/components-10.11.1.tgz#f6ff60769221d94da8c300417765fb0fecf0602a"
+  integrity sha512-ThcreQCX/eq61sLkLKjigD4PQvs3Wy4zglICvQH9tP6xl87y5KsQEoizn6OI+R3hrOgwQHLJe7Y0wLLh3fBKcg==
+  dependencies:
+    "@vueuse/core" "10.11.1"
+    "@vueuse/shared" "10.11.1"
+    vue-demi ">=0.14.8"
+
 "@vueuse/core@10.11.0", "@vueuse/core@^10.11.0":
   version "10.11.0"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-10.11.0.tgz"
@@ -703,6 +712,16 @@
     "@vueuse/shared" "10.11.0"
     vue-demi ">=0.14.8"
 
+"@vueuse/core@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.11.1.tgz#15d2c0b6448d2212235b23a7ba29c27173e0c2c6"
+  integrity sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.11.1"
+    "@vueuse/shared" "10.11.1"
+    vue-demi ">=0.14.8"
+
 "@vueuse/integrations@^10.11.0":
   version "10.11.0"
   resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-10.11.0.tgz#ce2746587172af9ab8faa713f42e619609ed0de1"
@@ -717,6 +736,11 @@
   resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.0.tgz"
   integrity sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==
 
+"@vueuse/metadata@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.11.1.tgz#209db7bb5915aa172a87510b6de2ca01cadbd2a7"
+  integrity sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==
+
 "@vueuse/shared@10.11.0":
   version "10.11.0"
   resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.0.tgz"
@@ -724,6 +748,13 @@
   dependencies:
     vue-demi ">=0.14.8"
 
+"@vueuse/shared@10.11.1":
+  version "10.11.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.11.1.tgz#62b84e3118ae6e1f3ff38f4fbe71b0c5d0f10938"
+  integrity sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==
+  dependencies:
+    vue-demi ">=0.14.8"
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"