Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 51415124e263ad234211d4f2e2aeba9d700c6906)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
@@ -9,4 +9,6 @@
 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'
 
 export default {
@@ -16,4 +18,5 @@
     WorkingHoursTable,
     PhotosGridSystem,
+    ImageModalLocale,
   },
   data() {
@@ -46,4 +49,17 @@
       isEditing: false,
       cachedLocale: null,
+
+      galleryImages: [
+        'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500',
+        'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=500',
+        'https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=500',
+        'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=500',
+        'https://images.unsplash.com/photo-1484723051597-626a5d19c0ae?w=500',
+        'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=500',
+      ],
+
+      isModalVisible: false,
+      selectedImageIndex: 0,
+
     }
   },
@@ -65,9 +81,23 @@
       },
     },
+    fullPicturesUrls() {
+      return this.locale.localPhotos.map(path => `${config.API_BASE_URL}${path}`);
+    },
   },
+
+
   mounted() {
     this.fetchLocaleData()
   },
   methods: {
+    openImageModal(index, secondRow = false) {
+      if (secondRow) {index+=1}
+      this.selectedImageIndex = index;
+      this.isModalVisible = true;
+    },
+    closeImageModal() {
+      this.isModalVisible = false;
+    },
+
     fetchLocaleData() {
       fetch(`http://localhost:8080/api/locals/${this.local_id}`)
@@ -77,4 +107,5 @@
           console.log("LOCALE", this.locale)
           // Safety checks for nested objects
+          console.log("LOCALE DATA FOR PICTURES", this.locale)
           if (!this.locale.contact) {
             this.locale.contact = { phone: '', email: '' }
@@ -117,4 +148,16 @@
           console.log(error)
         })
+    },
+    uploadPhoto() {
+      const profilePictureFile = document.getElementById('localePhotoInput').files[0]
+      if (!profilePictureFile) {
+        console.warn('No logo 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))
     },
     startEditing() {
@@ -186,5 +229,20 @@
           <button @click="uploadLogo" class="btn btn-dark m-3">Save Logo</button>
 
-          <PhotosGridSystem></PhotosGridSystem>
+          <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>
+
+          <ImageModalLocale
+            :show="isModalVisible"
+            :images="locale.localPhotos.length === 0 ? galleryImages : fullPicturesUrls"
+            :start-index="selectedImageIndex"
+            @close="closeImageModal"
+          />
 
         </div>
Index: ReserveNGo-frontend/src/components/Project/Utility/AddPhotoLocale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/AddPhotoLocale.vue	(revision 51415124e263ad234211d4f2e2aeba9d700c6906)
+++ ReserveNGo-frontend/src/components/Project/Utility/AddPhotoLocale.vue	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
@@ -1,2 +1,3 @@
+<!--
 <script lang="ts">
 
@@ -51,2 +52,3 @@
 
 </style>
+-->
Index: ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
+++ ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
@@ -0,0 +1,234 @@
+<!-- components/ImageModal.vue -->
+<script lang="ts">
+export default {
+  props: {
+    images: { type: Array, required: true },
+    startIndex: { type: Number, default: 0 },
+    show: { type: Boolean, default: false },
+  },
+  emits: ['close'],
+
+  data() {
+    return {
+      activeIndex: this.startIndex,
+    };
+  },
+
+  computed: {
+    activeImage() {
+      // Gracefully handle case where images might be empty
+      if (!this.images || this.images.length === 0) {
+        return '';
+      }
+      return this.images[this.activeIndex];
+    },
+  },
+
+  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;
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <Transition name="modal-fade">
+    <div v-if="show" class="modal-backdrop" @click="closeModal">
+      <div class="modal-container" @click.stop>
+        <button @click="closeModal" class="close-btn">×</button>
+
+        <!-- Main Image Display (Now the container for arrows) -->
+        <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>
+          </template>
+        </div>
+
+        <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)"
+          />
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+/* No changes to .modal-backdrop */
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+/* 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;
+  top: 10px;
+  right: 15px;
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: #333;
+  background: none;
+  border: none;
+  cursor: pointer;
+  z-index: 1010;
+  line-height: 1;
+}
+
+/* --- 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%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+/* === NEW: Styles for the Navigation Arrows === */
+.nav-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(0, 0, 0, 0.4);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  transition: background-color 0.2s ease;
+}
+
+.nav-arrow:hover {
+  background-color: rgba(0, 0, 0, 0.7);
+}
+
+.nav-arrow.prev {
+  left: 15px;
+}
+
+.nav-arrow.next {
+  right: 15px;
+}
+
+/* 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;
+}
+
+.thumbnail-image:hover {
+  filter: grayscale(0) brightness(1);
+  transform: scale(1.05);
+}
+
+.thumbnail-image.active {
+  filter: grayscale(0) brightness(1);
+  outline: 3px solid #3498db;
+  outline-offset: 2px;
+}
+
+@media (max-width: 1000px) {
+  .modal-container { width: 100%; height: 100%; border-radius: 0; }
+}
+
+.modal-fade-enter-active,
+.modal-fade-leave-active {
+  transition: opacity 0.4s ease;
+}
+.modal-fade-enter-from,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue	(revision 51415124e263ad234211d4f2e2aeba9d700c6906)
+++ ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue	(revision 8b7c4818ed8282fdc1536461f424ce2c3f33aeef)
@@ -1,22 +1,40 @@
-<script setup lang="ts">
+<script lang="ts">
+
+import { PropType } from 'vue'
 
 import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
+
+export default {
+
+  data() {
+    return {
+      pankake: pankake,
+    }
+  },
+  props: {
+    images: {
+      type: Array,
+      required: false,
+
+    },
+    openImageModal: {
+      type: Function as PropType<(imageIndex: number, secondRow?: boolean) => void>,
+      required: true
+    }
+  },
+
+}
 
 </script>
 
 <template>
-  <!-- Place this code below your "Save Logo" button -->
   <div class="logo-options-wrapper">
     <!-- Top row with 2 images -->
     <div class="grid-row-top">
-      <!-- Replace '...' with your actual image paths -->
-      <img :src="pankake" alt="Logo Option 1" class="grid-image">
-      <img :src="pankake" alt="Logo Option 2" class="grid-image">
+      <img @click="openImageModal(index)" class="grid-image" v-for="(image, index) in images.slice(0, 2)" :key="index" :src="image" alt="">
     </div>
     <!-- Bottom row with 3 images -->
     <div class="grid-row-bottom">
-      <img :src="pankake" alt="Logo Option 3" class="grid-image">
-      <img :src="pankake" alt="Logo Option 4" class="grid-image">
-      <img :src="pankake" alt="Logo Option 5" class="grid-image">
+      <img @click="openImageModal(index, true)" class="grid-image" v-for="(image, index) in images.slice(1, 4)" :key="index" :src="image" alt="">
     </div>
   </div>