Index: ReserveNGo-frontend/src/Api_Classes/HttpClient.js
===================================================================
--- ReserveNGo-frontend/src/Api_Classes/HttpClient.js	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
+++ ReserveNGo-frontend/src/Api_Classes/HttpClient.js	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
@@ -101,6 +101,6 @@
   }
 
-  delete(endpoint, options = {}) {
-    return this.json(endpoint, 'DELETE', null, options)
+  delete(endpoint, body= null, options = {}) {
+    return this.json(endpoint, 'DELETE', body, options)
   }
 
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
@@ -5,15 +5,15 @@
 import events_carousel from '@/components/Project/Restaurant/events_carousel_in_locale.vue'
 import WorkingHoursTable from '@/components/Project/Restaurant/working-hours-table.vue'
-import PlusAddImage from '@/components/Project/Utility/PlusAddImage.vue'
 import { useLocalManager } from '@/repository/LocalManager.ts'
 import { useUtility } from '@/repository/utility.ts'
 import PhotosGridSystem from '@/components/Project/Utility/PhotosGridSystem.vue'
 import ImageModalLocale from '@/components/Project/Utility/ImageModalLocale.vue'
-import {config} from '@/constants/Api_config.js'
 import RatingsForLocal from '@/components/Project/Customer/RatingsForLocal.vue'
+import { config } from '@/constants/Api_config.js'
+import ManagerFileInput from '@/components/Project/Utility/ManagerFileInput.vue'
+
 
 export default {
   components: {
-    PlusAddImage,
     events_carousel,
     WorkingHoursTable,
@@ -21,4 +21,5 @@
     ImageModalLocale,
     RatingsForLocal,
+    ManagerFileInput,
   },
   data() {
@@ -61,6 +62,14 @@
       ],
 
+      //MODAL
       isModalVisible: false,
       selectedImageIndex: 0,
+      //MODAL END
+
+      //UPLOADing files state
+      isLogoUploading: false,
+      isPhotoUploading: false,
+      //END UPLOADINg files state
+
 
     }
@@ -84,8 +93,7 @@
     },
     fullPicturesUrls() {
-      return this.locale.localPhotos.map(path => `${config.API_BASE_URL}${path}`);
+      return this.locale.localPhotos.map((path) => `${config.API_BASE_URL}${path}`)
     },
   },
-
 
   mounted() {
@@ -93,11 +101,27 @@
   },
   methods: {
+    handleRemoveImage(image, index) {
+      this.locale.localPhotos.splice(index, 1)
+      let url = new URL(image)
+      console.log('PHTORURL', url.pathname)
+      const localPhotosUrls = [url.pathname]
+      useLocalManager
+        .deletePhoto({ localPhotosUrls })
+        .then((response) => console.log('SUCCESUFL DELATION', response))
+        .catch((error) => {
+          console.log('UNSUCCESFUL DELATION', error.rawResponse)
+          this.locale.localPhotos.push(image)
+        })
+    },
+
     openImageModal(index, secondRow = false) {
-      if (secondRow) {index+=1}
-      this.selectedImageIndex = index;
-      this.isModalVisible = true;
+      if (secondRow) {
+        index += 1
+      }
+      this.selectedImageIndex = index
+      this.isModalVisible = true
     },
     closeImageModal() {
-      this.isModalVisible = false;
+      this.isModalVisible = false
     },
 
@@ -107,7 +131,7 @@
         .then((data) => {
           this.locale = data
-          console.log("LOCALE", this.locale)
+          console.log('LOCALE', this.locale)
           // Safety checks for nested objects
-          console.log("LOCALE DATA FOR PICTURES", this.locale)
+          console.log('LOCALE DATA FOR PICTURES', this.locale)
           if (!this.locale.contact) {
             this.locale.contact = { phone: '', email: '' }
@@ -132,34 +156,43 @@
       }).catch((error) => console.log(error))
     },
-    uploadLogo() {
-      const profilePictureFile = document.getElementById('logoPhotoInput').files[0]
-      if (!profilePictureFile) {
+    uploadLogo(fileInput) {
+      this.isLogoUploading = true;
+      const picture = fileInput
+      if (!picture) {
         console.warn('No logo file selected')
         return
       }
       const formData = new FormData()
-      formData.append('logo', profilePictureFile)
+      formData.append('logo', picture)
       useLocalManager
         .uploadLogo(formData)
         .then((imagePath) =>
-          useUtility.fetchImageBase64(imagePath).then((base64) => {
-            this.locale_logo_base64encoded = base64
-          }),
-        )
+          {useUtility.fetchImageBase64(imagePath).then((base64) => {this.locale_logo_base64encoded = base64});
+            this.$refs.uploadLogoInputRef.reset();})
         .catch((error) => {
           console.log(error)
         })
-    },
-    uploadPhoto() {
-      const profilePictureFile = document.getElementById('localePhotoInput').files[0]
-      if (!profilePictureFile) {
-        console.warn('No logo file selected')
+        .finally(() => {
+          this.isLogoUploading = false;
+        })
+    },
+    uploadPhoto(fileInput) {
+      this.isPhotoUploading = true;
+      const picture = fileInput
+      if (!picture) {
+        console.warn('No photo file selected')
         return
       }
       const formData = new FormData()
-      formData.append('photo', profilePictureFile)
-      useLocalManager.uploadImage(formData)
-        .then((response) => {console.log("SUCCESFUL UPLOAD", response); this.fetchLocaleData();})
-        .catch(error => console.log("Unable To upload image",error))
+      formData.append('photo', picture)
+      useLocalManager
+        .uploadImage(formData)
+        .then((response) => {
+          console.log('SUCCESFUL UPLOAD', response)
+          this.fetchLocaleData();
+          this.$refs.uploadPhotoInputRef.reset();
+        })
+        .catch((error) => console.log('Unable To upload image', error))
+        .finally(() => {this.isPhotoUploading = false;})
     },
     startEditing() {
@@ -224,20 +257,34 @@
               "
               class="card-img-top object-fit-cover rounded"
-              style="aspect-ratio: 1 / 1; object-fit: cover;"
+              style="aspect-ratio: 1 / 1; object-fit: cover"
               alt="Restaurant Logo"
             />
-            <PlusAddImage></PlusAddImage>
+            <ManagerFileInput
+              ref="uploadLogoInputRef"
+              @file-sent="uploadLogo"
+              input-id="localeLogoInput"
+              left-button-text="Choose Logo"
+              right-button-text="Save"
+              :is-loading="isLogoUploading"
+            ></ManagerFileInput>
           </div>
-          <button @click="uploadLogo" class="btn btn-dark m-3">Save Logo</button>
-
-          <input
-            type="file"
-            id="localePhotoInput"
-            class=""
-            accept="image/*"
-          />
-          <button @click="uploadPhoto" class="btn btn-dark m-3">Upload Photo</button>
-
-          <PhotosGridSystem :openImageModal="openImageModal" :images="locale.localPhotos.length === 0 ? galleryImages.slice(0, 5) : fullPicturesUrls.slice(0, 5)"></PhotosGridSystem>
+
+          <PhotosGridSystem
+            :openImageModal="openImageModal"
+            :images="
+              locale.localPhotos.length === 0
+                ? galleryImages.slice(0, 5)
+                : fullPicturesUrls.slice(0, 5)
+            "
+          ></PhotosGridSystem>
+          <ManagerFileInput
+            ref="uploadPhotoInputRef"
+            style="margin-top: 1rem"
+            @file-sent="uploadPhoto"
+            input-id="localePhotoInput"
+            left-button-text="Choose Photo"
+            right-button-text="Save"
+            :is-loading="isPhotoUploading"
+          ></ManagerFileInput>
 
           <ImageModalLocale
@@ -246,6 +293,6 @@
             :start-index="selectedImageIndex"
             @close="closeImageModal"
+            @delete-photo="handleRemoveImage"
           />
-
         </div>
 
Index: serveNGo-frontend/src/components/Project/Utility/AddPhotoLocale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/AddPhotoLocale.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
+++ 	(revision )
@@ -1,54 +1,0 @@
-<!--
-<script lang="ts">
-
-import { useLocalManager } from '@/repository/LocalManager'
-import { useUtility } from '@/repository/utility'
-
-export default {
-  methods: {
-    uploadLogo() {
-      const profilePictureFile = document.getElementById('photoLocale').files[0]
-      if (!profilePictureFile) {
-        console.warn('No logo file selected')
-        return
-      }
-      const formData = new FormData()
-      formData.append('logo', profilePictureFile)
-      useLocalManager
-        .uploadLogo(formData)
-        .then((imagePath) =>
-          useUtility.fetchImageBase64(imagePath).then((base64) => {
-            this.locale_logo_base64encoded = base64
-          }),
-        )
-        .catch((error) => {
-          console.log(error)
-        })
-    },
-  }
-}
-
-
-</script>
-
-<template>
-  <input
-    type="file"
-    id="photoLocale"
-    class=""
-    accept="image/*"
-  />
-
-  <label
-    for="photoLocale"
-    style="bottom: 0; right: 0.4rem; cursor: pointer"
-    class="position-absolute rounded-full"
-  >
-    <i style="font-size: 1.7rem" class="fa-solid fa-square-plus"></i>
-  </label>
-</template>
-
-<style scoped>
-
-</style>
--->
Index: ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
+++ ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
@@ -1,4 +1,8 @@
 <!-- components/ImageModal.vue -->
 <script lang="ts">
+
+import {useLocalManager} from '@/repository/LocalManager'
+import {userStore} from '@/PiniaStores/UserStore'
+
 export default {
   props: {
@@ -6,48 +10,42 @@
     startIndex: { type: Number, default: 0 },
     show: { type: Boolean, default: false },
-  },
-  emits: ['close'],
+    // --- NEW: Prop to check the user's role ---
+    userRole: { type: String, default: 'USER' },
+  },
+  emits: ['close', 'remove-image'], // Added 'remove-image' emit
 
   data() {
     return {
       activeIndex: this.startIndex,
+      userStore_: userStore()
     };
   },
-
   computed: {
     activeImage() {
-      // Gracefully handle case where images might be empty
-      if (!this.images || this.images.length === 0) {
-        return '';
-      }
+      if (!this.images || this.images.length === 0) return '';
       return this.images[this.activeIndex];
     },
-  },
-
+    // --- NEW: A computed property to easily check the role ---
+    isManager() {
+      return true;
+    },
+  },
   methods: {
-    closeModal() {
-      this.$emit('close');
-    },
-    selectImage(index) {
-      this.activeIndex = index;
-    },
-    // --- NEW METHOD for navigating to the next image ---
-    nextImage() {
-      // The modulo operator (%) provides a clean way to wrap around to the start
-      this.activeIndex = (this.activeIndex + 1) % this.images.length;
-    },
-    // --- NEW METHOD for navigating to the previous image ---
-    prevImage() {
-      // The "+ this.images.length" prevents a negative result from the modulo
-      this.activeIndex = (this.activeIndex - 1 + this.images.length) % this.images.length;
-    },
-  },
-
-  watch: {
-    show(newValue) {
-      if (newValue) {
-        this.activeIndex = this.startIndex;
+    closeModal() { this.$emit('close'); },
+    selectImage(index) { this.activeIndex = index; },
+    nextImage() { this.activeIndex = (this.activeIndex + 1) % this.images.length; },
+    prevImage() { this.activeIndex = (this.activeIndex - 1 + this.images.length) % this.images.length; },
+
+    // --- NEW: Method to handle image removal ---
+    // We get the full image object to have access to its ID
+    handleRemove(image, index) {
+      // Add a confirmation step to prevent accidental deletion
+      if (confirm('Are you sure you want to remove this image?')) {
+        this.$emit('delete-photo', image, index)
       }
     },
+  },
+  watch: {
+    show(newValue) { if (newValue) { this.activeIndex = this.startIndex; } },
   },
 };
@@ -60,28 +58,43 @@
         <button @click="closeModal" class="close-btn">×</button>
 
-        <!-- Main Image Display (Now the container for arrows) -->
+        <!-- Main image wrapper is now a flex item that can shrink -->
         <div class="main-image-wrapper">
-          <!-- Main Image -->
           <img :src="activeImage" alt="Enlarged view" class="main-image" />
-
-          <!-- === NEW: Navigation Arrows === -->
-          <!-- We use v-if to hide arrows if there's only one image -->
           <template v-if="images.length > 1">
-            <!-- The .stop modifier prevents the click from closing the modal -->
-            <button @click.stop="prevImage" class="nav-arrow prev">‹</button>
-            <button @click.stop="nextImage" class="nav-arrow next">›</button>
+            <button @click.stop="prevImage" class="nav-arrow prev">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
+              </svg>
+
+            </button>
+            <button @click.stop="nextImage" class="nav-arrow next">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+              </svg>
+
+            </button>
           </template>
         </div>
 
+        <!-- Thumbnails wrapper will take the space it needs and scroll if necessary -->
         <div class="thumbnails-wrapper">
-          <img
-            v-for="(image, index) in images"
-            :key="index"
-            :src="image"
-            alt="Thumbnail"
-            class="thumbnail-image"
-            :class="{ active: index === activeIndex }"
-            @click="selectImage(index)"
-          />
+          <!-- Each thumbnail is now a container for the image and the button -->
+          <div v-for="(image, index) in images" :key="index" class="thumbnail-item">
+            <img
+              :src="image"
+              alt="Thumbnail"
+              class="thumbnail-image"
+              :class="{ active: index === activeIndex }"
+              @click="selectImage(index)"
+            />
+            <!-- === NEW: Conditional Remove Button === -->
+            <button
+              v-if="isManager"
+              @click.stop="handleRemove(image, index)"
+              class="btn btn-danger btn-sm remove-btn"
+            >
+              Remove
+            </button>
+          </div>
         </div>
       </div>
@@ -91,5 +104,70 @@
 
 <style scoped>
-/* No changes to .modal-backdrop */
+/* Modal container is now a flex container for its children */
+.modal-container {
+  width: 80%;
+  max-width: 900px;
+  height: 80%;
+  background-color: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+}
+
+/* --- LAYOUT CHANGE: Fixed height removed --- */
+/* This wrapper will now take up the remaining space and can shrink. */
+.main-image-wrapper {
+  flex: 1 1 auto; /* Allow grow, allow shrink, auto basis */
+  min-height: 0; /* A flexbox trick to allow shrinking below content size */
+  background-color: #f0f0f0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+/* --- LAYOUT CHANGE: Fixed height removed, other properties added --- */
+.thumbnails-wrapper {
+  flex-shrink: 0; /* Prevent this container from shrinking */
+  background-color: #fff;
+  padding: 1rem;
+  display: flex;
+  align-items: flex-start; /* Align items to the top */
+  gap: 1rem;
+  overflow-x: auto;
+  border-top: 1px solid #eee;
+}
+
+/* === NEW: Container for each thumbnail and its button === */
+.thumbnail-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem; /* Space between image and button */
+}
+
+/* The thumbnail image itself doesn't need to define height anymore */
+.thumbnail-image {
+  /* Set a fixed height here to keep thumbnails uniform */
+  height: max(80px, 15vh);
+  width: auto;
+  border-radius: 6px;
+  cursor: pointer;
+  filter: grayscale(100%) brightness(0.9);
+  transition: all 0.3s ease;
+}
+
+/* === NEW: Style for the remove button === */
+.remove-btn {
+  /* You can add more specific styles if Bootstrap isn't enough */
+  padding: 0.2rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+/* --- The rest of the styles, now properly formatted --- */
+
 .modal-backdrop {
   position: fixed;
@@ -105,19 +183,4 @@
 }
 
-/* No changes to .modal-container */
-.modal-container {
-  width: 80%;
-  max-width: 900px;
-  height: 80%;
-  background-color: white;
-  border-radius: 12px;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
-}
-
-/* No changes to .close-btn */
 .close-btn {
   position: absolute;
@@ -134,15 +197,4 @@
 }
 
-/* --- MODIFIED: Added position: relative --- */
-.main-image-wrapper {
-  height: 70%;
-  background-color: #f0f0f0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  /* This is crucial for positioning the absolute arrows inside it */
-  position: relative;
-}
-
 .main-image {
   max-width: 100%;
@@ -151,9 +203,9 @@
 }
 
-/* === NEW: Styles for the Navigation Arrows === */
 .nav-arrow {
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
+/*  top: 50%;*/
+/*  transform: translateY(-50%);*/ /*Here this css is not needed because align items from parent flex does the job for you,
+                                     If you agg 50% top this takes priority and now you have to add a translateY -50% to make it perfectly vertical*/
   background-color: rgba(0, 0, 0, 0.4);
   color: white;
@@ -162,5 +214,5 @@
   width: 40px;
   height: 40px;
-  font-size: 24px;
+  font-size: 2rem;
   font-weight: bold;
   cursor: pointer;
@@ -184,27 +236,16 @@
 }
 
-/* All styles from here down are unchanged */
-.thumbnails-wrapper {
-  height: 30%;
-  background-color: #fff;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  overflow-x: auto;
-  border-top: 1px solid #eee;
-}
-
-.thumbnails-wrapper::-webkit-scrollbar { height: 8px; }
-.thumbnails-wrapper::-webkit-scrollbar-track { background: #f1f1f1; }
-.thumbnails-wrapper::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
-.thumbnails-wrapper::-webkit-scrollbar-thumb:hover { background: #aaa; }
-
-.thumbnail-image {
-  height: 100%;
-  border-radius: 6px;
-  cursor: pointer;
-  filter: grayscale(100%) brightness(0.9);
-  transition: all 0.3s ease;
+.thumbnails-wrapper::-webkit-scrollbar {
+  height: 8px;
+}
+.thumbnails-wrapper::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+.thumbnails-wrapper::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+.thumbnails-wrapper::-webkit-scrollbar-thumb:hover {
+  background: #aaa;
 }
 
@@ -221,5 +262,9 @@
 
 @media (max-width: 1000px) {
-  .modal-container { width: 100%; height: 100%; border-radius: 0; }
+  .modal-container {
+    width: 100%;
+    height: 100%;
+    border-radius: 0;
+  }
 }
 
Index: ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
+++ ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
@@ -0,0 +1,14 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+    <g>
+      <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.14" />
+      <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.29" transform="rotate(30 12 12)" />
+      <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.43" transform="rotate(60 12 12)" />
+      <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.57" transform="rotate(90 12 12)" />
+      <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.71" transform="rotate(120 12 12)" />
+      <rect width="2" height="5" x="11" y="1" fill="currentColor" opacity="0.86" transform="rotate(150 12 12)" />
+      <rect width="2" height="5" x="11" y="1" fill="currentColor" transform="rotate(180 12 12)" />
+      <animateTransform attributeName="transform" calcMode="discrete" dur="0.75s" repeatCount="indefinite" type="rotate" values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12" />
+    </g>
+  </svg>
+</template>
Index: ReserveNGo-frontend/src/components/Project/Utility/ManagerFileInput.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/ManagerFileInput.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
+++ ReserveNGo-frontend/src/components/Project/Utility/ManagerFileInput.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
@@ -0,0 +1,181 @@
+<!-- components/CustomFileInput.vue -->
+<template>
+  <div class="custom-file-input-container">
+    <!-- 1. This is the actual file input, but it's hidden from view. -->
+    <input
+      type="file"
+      :id="inputId"
+      ref="fileInput"
+      @change="handleFileChange"
+      style="display: none"
+      accept="image/*"
+    />
+
+    <!-- 2. This black button acts as a label. Clicking it triggers the hidden input. -->
+    <label :for="inputId" class="btn btn-dark">
+      {{leftButtonText}}
+    </label>
+
+    <!-- 3. This span displays the name of the selected file or the default text. -->
+    <span class="file-name-display">
+      {{ fileNameDisplay }}
+    </span>
+
+    <!-- 4. The right-side action button. -->
+    <button
+      class="btn btn-dark"
+      :disabled="isRightButtonDisabled || isLoading"
+      @click="handleRightButtonClick"
+    >
+      <span v-if="!isLoading">{{ rightButtonText }}</span>
+      <LoadingIcon v-else></LoadingIcon>
+    </button>
+  </div>
+</template>
+
+<script>
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+export default {
+  name: 'CustomFileInput',
+  components: {
+    LoadingIcon,
+  },
+  props: {
+    // The text for the button on the far right.
+    rightButtonText: {
+      type: String,
+      required: true,
+    },
+    leftButtonText: {
+      type: String,
+      required: true,
+    },
+    // The unique ID for the hidden file input. Crucial for the <label> to work.
+    inputId: {
+      type: String,
+      required: true,
+    },
+    // The text to display in the middle when no file is selected.
+    defaultText: {
+      type: String,
+      default: 'No file chosen',
+    },
+    // The ID of the <img> tag for the live preview. Optional.
+    previewElementId: {
+      type: String,
+      default: null, // Not required
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  emits: ['file-sent'],
+  data() {
+    return {
+      selectedFile: null,
+      isRightButtonDisabled: true,
+    };
+  },
+  computed: {
+    // A computed property to dynamically show the correct text in the middle.
+    fileNameDisplay() {
+      return this.selectedFile ? this.selectedFile.name : this.defaultText;
+    },
+  },
+  methods: {
+    // This method runs when a user selects a file from the dialog.
+    handleFileChange(event) {
+      const file = event.target.files[0];
+
+      // If user cancels the file dialog, do nothing.
+      if (!file) return;
+
+      this.selectedFile = file;
+      this.isRightButtonDisabled = false; // Enable the right button
+      // --- This section handles the live image preview ---
+      // It only runs if a previewElementId was passed in props.
+      if (this.previewElementId && file.type.startsWith('image/')) {
+        const previewElement = document.getElementById(this.previewElementId);
+
+        if (previewElement) {
+          const reader = new FileReader();
+          reader.onload = (e) => {
+            // Sets the 'src' attribute of the image tag to the new file data
+            previewElement.src = e.target.result;
+          };
+          reader.readAsDataURL(file);
+        } else {
+          console.warn(
+            `[CustomFileInput] Preview element with ID '${this.previewElementId}' was not found in the DOM.`
+          );
+        }
+      }
+    },
+
+    // This method runs when the user clicks the right-side button.
+    handleRightButtonClick() {
+      if (this.isRightButtonDisabled) return;
+      if (this.previewElementId) {
+
+        const previewElement = document.getElementById(this.previewElementId);
+        if (previewElement) {
+          previewElement.src = '';
+        }
+      }
+      this.$emit('file-sent', this.selectedFile); // Notify the parent that the file was removed
+    },
+    reset() {
+      this.selectedFile = null;
+      this.isRightButtonDisabled = true;
+      this.$refs.fileInput.value = '';
+      if (this.previewElementId) {
+        const previewElement = document.getElementById(this.previewElementId);
+        if (previewElement) {
+          previewElement.src = '';
+        }
+      }
+    },
+  },
+
+};
+</script>
+
+<style scoped>
+/*
+ The main container styling.
+ We use Flexbox for easy horizontal alignment.
+*/
+.custom-file-input-container {
+  display: flex;
+  align-items: center;
+  gap: 1rem; /* Creates space between the elements */
+  background-color: #212529; /* Bootstrap's standard dark color */
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem; /* Bootstrap's standard border-radius */
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* The border shadow */
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+/*
+  Styling for the middle section that displays the file name.
+*/
+.file-name-display {
+  flex-grow: 1; /* This makes the element take up all available space */
+  font-style: italic;
+  color: #adb5bd; /* A muted gray color */
+  white-space: nowrap; /* Prevents the text from wrapping to a new line */
+  overflow: hidden; /* Hides any text that overflows the element's width */
+  text-overflow: ellipsis; /* Adds "..." to the end of overflowing text */
+}
+
+/*
+  Ensures the label (acting as a button) aligns properly.
+  Bootstrap buttons can sometimes have a default margin-bottom.
+*/
+.btn {
+  margin-bottom: 0;
+  flex-shrink: 0; /* Prevents buttons from shrinking if space is tight */
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
+++ ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
@@ -36,5 +36,5 @@
     <!-- Bottom row with 3 images -->
     <div class="grid-row-bottom">
-      <img @click="openImageModal(index, true)" class="grid-image" v-for="(image, index) in images.slice(1, 4)" :key="index" :src="image" alt="">
+      <img @click="openImageModal(index, true)" class="grid-image" v-for="(image, index) in images.slice(2, 4)" :key="index" :src="image" alt="">
     </div>
   </div>
Index: ReserveNGo-frontend/src/repository/LocalManager.ts
===================================================================
--- ReserveNGo-frontend/src/repository/LocalManager.ts	(revision 1adda73221729aeb1ed5c4b12275440cb32128f9)
+++ ReserveNGo-frontend/src/repository/LocalManager.ts	(revision 6272615883649b1a035e2f35a5543451740e2dc0)
@@ -22,4 +22,8 @@
     return this.httpClient.upload('upload-photo', formData)
   }
+  deletePhoto(photoUrls : Object): Promise<any> {
+    /*if (typeof photoUrls === 'string') {photoUrls = [photoUrls] }*/
+    return this.httpClient.delete('delete-photos', photoUrls)
+  }
 
 }