Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 51415124e263ad234211d4f2e2aeba9d700c6906)
@@ -7,7 +7,6 @@
 import PlusAddImage from '@/components/Project/Utility/PlusAddImage.vue'
 import { useLocalManager } from '@/repository/LocalManager.ts'
-import {useUtility} from '@/repository/utility.ts'
-import PhotosGrid from '@/components/Project/Utility/PhotosGrid.vue'
-
+import { useUtility } from '@/repository/utility.ts'
+import PhotosGridSystem from '@/components/Project/Utility/PhotosGridSystem.vue'
 
 export default {
@@ -16,5 +15,5 @@
     events_carousel,
     WorkingHoursTable,
-    PhotosGrid,
+    PhotosGridSystem,
   },
   data() {
@@ -35,5 +34,5 @@
           phone: '',
           email: '',
-          socialLinks: {}
+          socialLinks: {},
         },
         logo: '',
@@ -51,19 +50,22 @@
   computed: {
     roundedRating() {
-      const rating = parseFloat(this.locale.averageRating);
-      if (isNaN(rating)) return 0;
+      const rating = parseFloat(this.locale.averageRating)
+      if (isNaN(rating)) return 0
       return Math.round(rating * 2) / 2
     },
     servicesAsString: {
       get() {
-        return Array.isArray(this.locale.services) ? this.locale.services.join(', ') : '';
+        return Array.isArray(this.locale.services) ? this.locale.services.join(', ') : ''
       },
       set(newValue) {
-        this.locale.services = newValue.split(',').map(s => s.trim()).filter(Boolean);
-      }
-    }
+        this.locale.services = newValue
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+      },
+    },
   },
   mounted() {
-    this.fetchLocaleData();
+    this.fetchLocaleData()
   },
   methods: {
@@ -72,16 +74,18 @@
         .then((res) => res.json())
         .then((data) => {
-          this.locale = data;
+          this.locale = data
+          console.log("LOCALE", this.locale)
           // Safety checks for nested objects
           if (!this.locale.contact) {
-            this.locale.contact = { phone: '', email: '' };
+            this.locale.contact = { phone: '', email: '' }
           }
           if (!this.locale.services) {
-            this.locale.services = [];
+            this.locale.services = []
           }
           // Use a separate property for display-transformed events
-          this.eventsForCarousel = transformArray(this.locale.events, 2);
-          useUtility.fetchImageBase64(this.locale.logo)
-            .then((base64) => {this.locale_logo_base64encoded = base64});
+          this.eventsForCarousel = transformArray(this.locale.events, 2)
+          useUtility.fetchImageBase64(this.locale.logo).then((base64) => {
+            this.locale_logo_base64encoded = base64
+          })
         })
         .catch((err) => console.log('Error fetching locale data:', err))
@@ -96,55 +100,64 @@
     },
     uploadLogo() {
-      const profilePictureFile = document.getElementById('logoPhotoInput').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)});
+      const profilePictureFile = document.getElementById('logoPhotoInput').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)
+        })
     },
     startEditing() {
       // Create a deep copy of the current state to allow for cancellation
-      this.cachedLocale = JSON.parse(JSON.stringify(this.locale));
-      this.isEditing = true;
+      this.cachedLocale = JSON.parse(JSON.stringify(this.locale))
+      this.isEditing = true
     },
     cancelEditing() {
       // Restore the original data from the cached copy
-      this.locale = this.cachedLocale;
-      this.isEditing = false;
-      this.cachedLocale = null;
-    },
-    saveLocalChanges(){
+      this.locale = this.cachedLocale
+      this.isEditing = false
+      this.cachedLocale = null
+    },
+    saveLocalChanges() {
       // Prepare the payload for saving. The `workingHours` property is sent as-is.
-      const payload = { ...this.locale };
+      const payload = { ...this.locale }
       // Remove the display-only property before sending
-      delete payload.eventsForCarousel;
-
-      fetch(`http://localhost:8080/api/local-manager/my-local/edit`,{
+      delete payload.eventsForCarousel
+
+      fetch(`http://localhost:8080/api/local-manager/my-local/edit`, {
         method: 'PUT',
         headers: {
-          'Authorization': this.userStore.getToken,
+          Authorization: this.userStore.getToken,
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(payload),
       })
-        .then(res => {
+        .then((res) => {
           if (!res.ok) {
-            this.locale = this.cachedLocale; // Revert on failure
-            alert("Failed to save changes. Please try again.");
-            throw new Error(`Server responded with status: ${res.status}`);
+            this.locale = this.cachedLocale // Revert on failure
+            alert('Failed to save changes. Please try again.')
+            throw new Error(`Server responded with status: ${res.status}`)
           }
-          this.isEditing = false;
-          this.cachedLocale = null;
-          return res.json();
+          this.isEditing = false
+          this.cachedLocale = null
+          return res.json()
         })
         .then(() => {
-          console.log("Successfully updated.");
-          this.fetchLocaleData(); // Refresh data to see the changes
+          console.log('Successfully updated.')
+          this.fetchLocaleData() // Refresh data to see the changes
         })
         .catch((error) => {
-          console.error('Error updating local:', error);
-        });
+          console.error('Error updating local:', error)
+        })
     },
   },
@@ -161,7 +174,10 @@
             <img
               id="logoLocalePicture"
-              :src="locale_logo_base64encoded || 'https://cdn.vuetifyjs.com/images/profiles/default-avatar.png'"
+              :src="
+                locale_logo_base64encoded ||
+                'https://cdn.vuetifyjs.com/images/profiles/default-avatar.png'
+              "
               class="card-img-top object-fit-cover rounded"
-              style="aspect-ratio: 1 / 1"
+              style="aspect-ratio: 1 / 1; object-fit: cover;"
               alt="Restaurant Logo"
             />
@@ -170,5 +186,5 @@
           <button @click="uploadLogo" class="btn btn-dark m-3">Save Logo</button>
 
-<!--          <PhotosGrid></PhotosGrid>-->
+          <PhotosGridSystem></PhotosGridSystem>
 
         </div>
@@ -181,17 +197,31 @@
             <div v-else class="mb-3">
               <label for="nameInput" class="form-label fw-bold">Name</label>
-              <input type="text" id="nameInput" class="form-control" v-model="locale.name">
+              <input type="text" id="nameInput" class="form-control" v-model="locale.name" />
             </div>
 
             <!-- Address -->
-            <div v-if="!isEditing" class="mb-3 text-muted"><i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}</div>
+            <div v-if="!isEditing" class="mb-3 text-muted">
+              <i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}
+            </div>
             <div v-else class="mb-3">
               <label for="addressInput" class="form-label fw-bold">Address</label>
-              <input type="text" id="addressInput" class="form-control" v-model="locale.address">
+              <input type="text" id="addressInput" class="form-control" v-model="locale.address" />
             </div>
 
             <!-- Star Rating (Not Editable) -->
             <div class="mb-3 d-flex align-items-center">
-              <div class="text-warning me-2"><i v-for="n in 5" :key="n" :class="[ roundedRating >= n ? 'fas fa-star' : roundedRating >= n - 0.5 ? 'fas fa-star-half-alt' : 'far fa-star', ]"></i></div>
+              <div class="text-warning me-2">
+                <i
+                  v-for="n in 5"
+                  :key="n"
+                  :class="[
+                    roundedRating >= n
+                      ? 'fas fa-star'
+                      : roundedRating >= n - 0.5
+                        ? 'fas fa-star-half-alt'
+                        : 'far fa-star',
+                  ]"
+                ></i>
+              </div>
               <small class="text-muted">({{ locale.averageRating }})</small>
             </div>
@@ -201,5 +231,11 @@
               <h6 class="fw-bold">Description</h6>
               <p v-if="!isEditing">{{ locale.description }}</p>
-              <textarea v-else id="descriptionInput" class="form-control" rows="4" v-model="locale.description"></textarea>
+              <textarea
+                v-else
+                id="descriptionInput"
+                class="form-control"
+                rows="4"
+                v-model="locale.description"
+              ></textarea>
             </div>
 
@@ -215,15 +251,29 @@
               <h6 class="fw-bold">Contact</h6>
               <ul v-if="!isEditing" class="list-unstyled">
-                <li v-if="locale.contact.phone"><strong>Phone:</strong> {{ locale.contact.phone }}</li>
-                <li v-if="locale.contact.email"><strong>Email:</strong> {{ locale.contact.email }}</li>
+                <li v-if="locale.contact.phone">
+                  <strong>Phone:</strong> {{ locale.contact.phone }}
+                </li>
+                <li v-if="locale.contact.email">
+                  <strong>Email:</strong> {{ locale.contact.email }}
+                </li>
               </ul>
               <div v-else class="mt-2">
                 <div class="mb-2">
                   <label for="phoneInput" class="form-label">Phone</label>
-                  <input type="text" id="phoneInput" class="form-control" v-model="locale.contact.phone">
+                  <input
+                    type="text"
+                    id="phoneInput"
+                    class="form-control"
+                    v-model="locale.contact.phone"
+                  />
                 </div>
                 <div class="mb-2">
                   <label for="emailInput" class="form-label">Email</label>
-                  <input type="email" id="emailInput" class="form-control" v-model="locale.contact.email">
+                  <input
+                    type="email"
+                    id="emailInput"
+                    class="form-control"
+                    v-model="locale.contact.email"
+                  />
                 </div>
               </div>
@@ -234,9 +284,17 @@
               <h6 class="fw-bold">Menu</h6>
               <template v-if="!isEditing">
-                <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{ locale.menuLink }}</a>
+                <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{
+                  locale.menuLink
+                }}</a>
                 <span v-else class="text-muted">Not available.</span>
               </template>
               <div v-else>
-                <input type="url" id="menuLinkInput" class="form-control" v-model="locale.menuLink" placeholder="https://example.com/menu">
+                <input
+                  type="url"
+                  id="menuLinkInput"
+                  class="form-control"
+                  v-model="locale.menuLink"
+                  placeholder="https://example.com/menu"
+                />
               </div>
             </div>
@@ -246,9 +304,19 @@
               <h6 class="fw-bold">Services</h6>
               <div v-if="!isEditing" class="d-flex flex-wrap gap-2">
-                <span v-for="service in locale.services" :key="service" class="badge bg-primary text-light">{{ service }}</span>
+                <span
+                  v-for="service in locale.services"
+                  :key="service"
+                  class="badge bg-primary text-light"
+                  >{{ service }}</span
+                >
               </div>
               <div v-else>
                 <label for="servicesInput" class="form-label">Services (comma-separated)</label>
-                <input type="text" id="servicesInput" class="form-control" v-model="servicesAsString">
+                <input
+                  type="text"
+                  id="servicesInput"
+                  class="form-control"
+                  v-model="servicesAsString"
+                />
               </div>
             </div>
@@ -263,17 +331,29 @@
             <div class="d-flex flex-wrap gap-2 mb-4">
               <template v-if="userStore.data.role === 'ROLE_CUSTOMER'">
-                <button class="btn btn-dark"><i class="fas fa-calendar-check me-1"></i> Reserve</button>
-                <button class="btn btn-outline-danger" @click="addToFavourites"><i class="fas fa-heart me-1"></i> Add to Favourites</button>
+                <button class="btn btn-dark">
+                  <i class="fas fa-calendar-check me-1"></i> Reserve
+                </button>
+                <button class="btn btn-outline-danger" @click="addToFavourites">
+                  <i class="fas fa-heart me-1"></i> Add to Favourites
+                </button>
               </template>
 
               <template v-if="userStore.data.role === 'ROLE_LOCAL_MANAGER'">
-                <button v-if="!isEditing" class="btn btn-dark" @click="startEditing"><i class="fas fa-edit me-1"></i> Edit Details</button>
+                <button v-if="!isEditing" class="btn btn-dark" @click="startEditing">
+                  <i class="fas fa-edit me-1"></i> Edit Details
+                </button>
                 <template v-else>
-                  <button class="btn btn-success" @click="saveLocalChanges"><i class="fas fa-save me-1"></i> Save</button>
-                  <button class="btn btn-secondary" @click="cancelEditing"><i class="fas fa-times me-1"></i> Cancel</button>
+                  <button class="btn btn-success" @click="saveLocalChanges">
+                    <i class="fas fa-save me-1"></i> Save
+                  </button>
+                  <button class="btn btn-secondary" @click="cancelEditing">
+                    <i class="fas fa-times me-1"></i> Cancel
+                  </button>
                 </template>
               </template>
 
-              <router-link to="/" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i> Back</router-link>
+              <router-link to="/" class="btn btn-outline-secondary"
+                ><i class="fas fa-arrow-left me-1"></i> Back</router-link
+              >
             </div>
           </div>
@@ -296,3 +376,4 @@
   height: auto;
 }
-</style>```
+</style>
+```
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 51415124e263ad234211d4f2e2aeba9d700c6906)
@@ -0,0 +1,52 @@
+<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: serveNGo-frontend/src/components/Project/Utility/PhotosGrid.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PhotosGrid.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
+++ 	(revision )
@@ -1,97 +1,0 @@
-<script lang="ts">
-
-
-export default {
-  data() {
-    return {
-    }
-  },
-}
-
-</script>
-
-<template>
-  <!-- Place this code below your "Save Logo" button -->
-  <div class="logo-options-grid">
-    <!-- Top row with 2 images -->
-    <div class="grid-row-top">
-      <!-- Replace '...' with your actual image paths -->
-      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 1" class="grid-image">
-      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 2" class="grid-image">
-    </div>
-    <!-- Bottom row with 3 images -->
-    <div class="grid-row-bottom">
-      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 3" class="grid-image">
-      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 4" class="grid-image">
-      <img src="../../ectd/easy-american-pancake-recipe.jpg" alt="Logo Option 5" class="grid-image">
-    </div>
-  </div>
-</template>
-
-<style scoped>
-/*
-  Main container for the image grid.
-  It's set to match the width of your logo container above it.
-  I've used a max-width as an example.
-*/
-.logo-options-grid {
-  width: 100%;
-  max-width: 380px; /* Adjust this to match your logo container's width */
-  margin: 1.5rem auto 0; /* Adds space above and centers it */
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem; /* This creates the space between the top and bottom rows */
-}
-
-/*
-  Common styles for both rows.
-  We use flexbox to automatically align the images inside.
-*/
-.grid-row-top,
-.grid-row-bottom {
-  display: flex;
-  justify-content: center; /* Centers the images if they don't fill all space */
-  gap: 0.5rem; /* This creates the space between the images in a row */
-}
-
-/*
-  Styling for each individual image in the grid.
-*/
-.grid-image {
-  width: 100%; /* Allows the flex container to determine the size */
-  height: auto;
-  border-radius: 8px; /* Gives the images slightly rounded corners */
-  cursor: pointer; /* Changes the mouse to a pointer on hover */
-
-  /* This is key for the smooth hover effect. We create a transparent
-     outline that will get a color on hover, preventing the layout
-     from shifting. */
-  outline: 3px solid transparent;
-  transition: outline-color 0.3s ease;
-}
-
-/*
-  The hover effect!
-  When you hover over an image, the outline color changes to a nice blue.
-*/
-.grid-image:hover {
-  outline-color: #3498db; /* A pleasant, modern blue */
-}
-
-
-/* --- RESPONSIVENESS --- */
-
-/*
-  This media query applies styles ONLY when the screen width
-  is 768px or less (typical for tablets and phones).
-*/
-@media (max-width: 768px) {
-  /*
-    On smaller screens, we simply hide the top row of two images
-    to achieve the requested "one row of 3 images" layout.
-  */
-  .grid-row-top {
-    display: none;
-  }
-}
-</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 51415124e263ad234211d4f2e2aeba9d700c6906)
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+
+import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
+
+</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">
+    </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">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Main wrapper to hold our grid rows */
+.logo-options-wrapper {
+  max-width: 100%;
+  margin: 1.5rem auto 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem; /* Space between the top and bottom rows */
+}
+
+/* --- GRID SPECIFIC STYLES --- */
+
+.grid-row-top {
+  display: grid;
+  /* This is the magic: Create 2 columns of equal fractional width (2 x 1/2) */
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem; /* This handles the space between the images perfectly */
+ /* grid-auto-rows: 50px;*/
+}
+
+.grid-row-bottom {
+  display: grid;
+  /* And here: Create 3 columns of equal fractional width (3 x 1/3) */
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem; /* This handles the space between the images perfectly */
+}
+
+
+/* --- SHARED STYLES FOR IMAGES & RESPONSIVENESS --- */
+
+.grid-image {
+  /* This tells the image to fill the grid cell it's placed in */
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 8px;
+  cursor: pointer;
+  outline: 3px solid transparent;
+  transition: outline-color 0.3s ease;
+}
+
+.grid-image:hover {
+  outline-color: #3498db;
+}
+
+/* On small screens, hide the top row */
+@media (max-width: 768px) {
+  .grid-row-top {
+    display: none;
+  }
+}</style>
Index: ReserveNGo-frontend/src/components/Project/Utility/PlusAddImage.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/PlusAddImage.vue	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
+++ ReserveNGo-frontend/src/components/Project/Utility/PlusAddImage.vue	(revision 51415124e263ad234211d4f2e2aeba9d700c6906)
@@ -39,5 +39,5 @@
     type="file"
     id="logoPhotoInput"
-    class="visually-hidden"
+    class=""
     accept="image/*"
   />
Index: ReserveNGo-frontend/src/repository/LocalManager.ts
===================================================================
--- ReserveNGo-frontend/src/repository/LocalManager.ts	(revision bf997c9c6bf6c5cc57332bbb3ead76308f55f970)
+++ ReserveNGo-frontend/src/repository/LocalManager.ts	(revision 51415124e263ad234211d4f2e2aeba9d700c6906)
@@ -19,4 +19,7 @@
     return this.httpClient.upload('upload-logo', formData)
   }
+  uploadImage(formData: FormData): Promise<any> {
+    return this.httpClient.upload('upload-photo', formData)
+  }
 
 }