Index: ReserveNGo-frontend/src/Api_Classes/HttpClient.js
===================================================================
--- ReserveNGo-frontend/src/Api_Classes/HttpClient.js	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/Api_Classes/HttpClient.js	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -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/PiniaStores/restaurantStore.js
===================================================================
--- ReserveNGo-frontend/src/PiniaStores/restaurantStore.js	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/PiniaStores/restaurantStore.js	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -14,5 +14,5 @@
       workingHours: '',
       availableServices: [],
-      averageRating: 0,
+      ratingAvg: 0,
       events: [],
       restaurantPhotos: [],
@@ -31,5 +31,5 @@
       this.workingHours = workingHours
       this.logo = logo
-      this.averageRating = averageRating
+      this.ratingAvg = averageRating
     },
     setRestaurantDetails (id, name, description, address, workingHours, availableServices, averageRating, events, restaurantPhotos, menuPhoto, menuLink, contact, logo) {
@@ -40,5 +40,5 @@
       this.workingHours = workingHours
       this.availableServices = availableServices
-      this.averageRating = averageRating
+      this.ratingAvg = averageRating
       this.events = events
       this.restaurantPhotos = restaurantPhotos
Index: ReserveNGo-frontend/src/components/Project/Auth/login_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -1,71 +1,72 @@
-<script>
-import { userStore } from '@/PiniaStores/UserStore.js';
-import { useRouter } from 'vue-router';
-import router from '@/router/index.js';
+<script lang="ts">
+import { userStore } from '@/PiniaStores/UserStore.js'
+import { useRouter } from 'vue-router'
+import router from '@/router/index.js'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+import { useLocalManager } from '@/repository/LocalManager.ts'
+import { useAuth } from '@/repository/Authentication.ts'
 
 export default {
+  components: { LoadingIcon },
   data() {
     return {
       form_info: {
         email: '',
-        password: ''
+        password: '',
       },
       url: 'http://localhost:8080/api/auth/login',
       userStore_: userStore(),
       router: useRouter(),
-      managerLocalId: "",
-    };
+      managerLocalId: '',
+
+
+      isLoading: false,
+      errorMessage: '',
+    }
   },
   methods: {
     async makeLogin() {
+      this.isLoading = true
+
       try {
-        const response = await fetch(this.url, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            email: this.form_info.email,
-            password: this.form_info.password,
-          }),
-        });
+        const json = await useAuth.makeLogin(this.form_info.email, this.form_info.password)
 
-        const json = await response.json();
+        console.log('Priting the json object to help me with profile picture.', json)
 
-        console.log("Priting the json object to help me with profile picture.", json);
-
-        this.userStore_.setLocalStorage(json);
+        this.userStore_.setLocalStorage(json)
 
         if (this.userStore_ && this.userStore_.data.role === 'ROLE_ADMIN') {
-          router.push('/admin-dashboard');
-        } else if(this.userStore_ && this.userStore_.data.role === "ROLE_LOCAL_MANAGER"){
-          this.fetchLocalForManager();
+          router.push('/admin-dashboard')
+        } else if (this.userStore_ && this.userStore_.data.role === 'ROLE_LOCAL_MANAGER') {
+          this.fetchLocalForManager()
         } else {
-          router.push('/');
+          router.push('/')
         }
       } catch (error) {
-        console.error('Login error:', error);
+        if (error.status === 401) {
+          this.errorMessage = "Oops! That password seems to be incorrect."
+        }
+
+      }
+      finally {
+        this.isLoading = false
       }
     },
-    fetchLocalForManager(){
-      fetch("http://localhost:8080/api/local-manager/my-local",{
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: this.userStore_.getToken
-        },
-      }).then((res) => res.json())
+    fetchLocalForManager() {
+      useLocalManager.getLocal()
         .then((data) => (this.managerLocalId = data.id))
-        .then(()=>router.push(`/more_details/${this.managerLocalId}`))
-        .catch((err) => {console.log("LOCALE NOT ASSIGNED", err);
-                        router.push('/more_details/')});
-
-    }
-
-  }
-};
+        .then(() => router.push(`/more_details/${this.managerLocalId}`))
+        .catch((err) => {
+          console.log('LOCALE NOT ASSIGNED', err)
+          router.push('/more_details/')
+        })
+    },
+  },
+}
 </script>
 
 <template>
-  <div class="container-xxl d-flex  justify-content-center mt-3 ">
-    <div class="card shadow p-4" style="max-width: 400px; width: 100%;">
+  <div class="container-xxl d-flex justify-content-center mt-3">
+    <div class="card shadow p-4" style="max-width: 400px; width: 100%">
       <h3 class="text-center mb-4">Login</h3>
       <form @submit.prevent="makeLogin">
@@ -79,5 +80,5 @@
             placeholder="Enter your email"
             required
-          >
+          />
         </div>
 
@@ -91,8 +92,12 @@
             placeholder="Enter your password"
             required
-          >
+          />
         </div>
+        <div style="color: red; margin-bottom: 1rem">{{errorMessage}}</div>
 
-        <button type="submit" class="btn btn-dark w-100">Login</button>
+        <button :disabled="isLoading" type="submit" class="btn btn-dark w-100">
+          <span v-if="!isLoading">Login</span>
+          <LoadingIcon v-else></LoadingIcon>
+        </button>
       </form>
     </div>
@@ -100,5 +105,3 @@
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
Index: ReserveNGo-frontend/src/components/Project/Auth/register_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/register_.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Auth/register_.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -1,12 +1,14 @@
 <script>
-import { userStore } from '@/PiniaStores/UserStore.js';
-import { useRouter } from 'vue-router';
-import router from '@/router/index.js';
+import { userStore } from '@/PiniaStores/UserStore.js'
+import { useRouter } from 'vue-router'
+import router from '@/router/index.js'
+import LoadingIcon from '@/components/Project/Utility/LoadingIcon.vue'
+import { useAuth } from '@/repository/Authentication.ts'
 
 export default {
+  components: { LoadingIcon },
   data() {
     return {
       path: '',
-      url: 'http://localhost:8080/api/auth/register/',
       form_info: {
         firstName: '',
@@ -18,41 +20,35 @@
       userStore_: userStore(),
       router: useRouter(),
-    };
-  },
-  computed: {
-    wholeUrl() {
-      return this.url + this.path;
-    },
-    testJson() {
-      return JSON.stringify({
-        firstName: this.form_info.firstName,
-        lastName: this.form_info.lastName,
-        email: this.form_info.email,
-        password: this.form_info.password,
-        phoneNumber: this.form_info.phoneNumber,
-      });
-    },
+
+      isLoading: false,
+      errorMessage: '',
+    }
   },
   methods: {
     async register() {
-      await fetch(this.wholeUrl, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          firstName: this.form_info.firstName,
-          lastName: this.form_info.lastName,
-          email: this.form_info.email,
-          password: this.form_info.password,
-          phoneNumber: this.form_info.phoneNumber,
-        }),
-      })
-        .then((response) => response.json())
+      this.isLoading = true
+      await useAuth.makeRegister(
+          this.form_info.firstName,
+          this.form_info.lastName,
+          this.form_info.email,
+          this.form_info.phoneNumber,
+          this.form_info.password,
+          this.path,
+        )
         .then((json) => {
-          this.userStore_.setLocalStorage(json);
-          router.push('/');
-        });
+          this.userStore_.setLocalStorage(json)
+          router.push('/')
+        })
+        .catch((err) => {
+          if (err.status === 409) {
+            this.errorMessage = "It looks like an account already exists with that email address. Do you want to log in instead?"
+          }
+        })
+        .finally(() => {
+          this.isLoading = false
+        })
     },
   },
-};
+}
 </script>
 
@@ -67,5 +63,4 @@
                 <h3 class="mb-4 text-center">Register</h3>
                 <form @submit.prevent="register" method="POST">
-
                   <div class="mb-3">
                     <label for="name" class="form-label">First Name</label>
@@ -135,10 +130,5 @@
                   <div class="mb-4">
                     <label for="role" class="form-label">Role</label>
-                    <select
-                      class="form-select"
-                      id="role"
-                      v-model="path"
-                      required
-                    >
+                    <select class="form-select" id="role" v-model="path" required>
                       <option value="" disabled>Select a role</option>
                       <option value="customer">Customer</option>
@@ -147,7 +137,10 @@
                     </select>
                   </div>
-
+                  <div style="color: red;">{{errorMessage}}</div>
                   <div class="d-grid">
-                    <button type="submit" class="btn btn-dark">Register</button>
+                    <button :disabled="isLoading" type="submit" class="btn btn-dark">
+                      <span v-if="!isLoading">Register</span>
+                      <LoadingIcon v-else></LoadingIcon>
+                    </button>
                   </div>
 
@@ -163,5 +156,7 @@
 
 <style scoped>
-html, body, .register-page-wrapper {
+html,
+body,
+.register-page-wrapper {
   height: 100%;
   overflow: hidden;
Index: ReserveNGo-frontend/src/components/Project/Customer/RatingsForLocal.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/RatingsForLocal.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/components/Project/Customer/RatingsForLocal.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -0,0 +1,99 @@
+<script>
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+export default {
+  props:{
+    localId:String,
+  },
+  emits: ['rating-updated'],
+  data() {
+    return {
+      user: userStore(),
+      givenRating: 0,
+      rating: 0,
+      hoverRating: 0,
+    }
+  },
+  methods:{
+    rateLocal(rating){
+      this.givenRating = rating;
+      fetch(`http://localhost:8080/api/customer/local/${this.localId}/rate`, {
+        method: 'PUT',
+        headers: {
+          Authorization: this.user.getToken,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          rating: this.givenRating,
+        })
+      })
+        .then(() => {
+          this.customerRating();
+          this.$emit('rating-updated');
+        })
+        .catch((error) => console.log(error))
+    },
+    customerRating(){
+
+      fetch(`http://localhost:8080/api/customer/local/${this.localId}/rating`, {
+        method: 'GET',
+        headers:{
+          Authorization: this.user.getToken,
+        }
+      })
+        .then((res) => res.json())
+        .then((data) => {this.rating = data.rating})
+        .catch((error) => {console.log(error)})
+    },
+    removeRating(){
+      fetch(`http://localhost:8080/api/customer/local/${this.localId}/remove-rating`, {
+        method: 'DELETE',
+        headers: {
+          Authorization: this.user.getToken,
+        }
+      })
+        .then(() => {
+          this.rating = 0;
+          this.givenRating = 0;
+          this.$emit('rating-updated');
+        })
+        .catch((err)=>console.log(err))
+    }
+  },
+  mounted() {
+    console.log("getting rating after mount")
+    this.customerRating();
+    console.log("rating is:" + this.rating);
+  }
+}
+</script>
+
+<template>
+  <div class="container">
+    <div v-if="rating === 0" class="d-flex align-items-center">
+      <h5 class="me-3">Rate your experience:</h5>
+      <div @mouseleave="hoverRating = 0">
+        <span v-for="index in 5" :key="index" @mouseover="hoverRating = index" @click="rateLocal(index)" class="fs-4" style="cursor: pointer;">
+          <i :class="['far', 'fa-star', { 'fas text-warning': hoverRating >= index }]"></i>
+        </span>
+      </div>
+    </div>
+    <div v-else class="d-flex align-items-center">
+      <h5 class="me-3">Your Rating:</h5>
+      <div class="fs-4 text-warning">
+        <span v-for="index in 5" :key="index">
+          <i :class="['fa-star', { 'fas': index <= rating, 'far': index > rating }]"></i>
+        </span>
+      </div>
+      <button @click="removeRating" class="btn btn-danger btn-sm ms-3">
+        <i class="fas fa-times"></i> Remove Rating
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fs-4 {
+  font-size: 1.5rem;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -10,48 +10,61 @@
     return {
       user: userStore(),
-      managerLocalId:"",
+      managerLocalId: '',
     }
   },
   methods: {
-    fetchLocalForManager(){
-      fetch("http://localhost:8080/api/local-manager/my-local",{
+    fetchLocalForManager() {
+      fetch('http://localhost:8080/api/local-manager/my-local', {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: this.user.getToken
+          Authorization: this.user.getToken,
         },
-      }).then((res) => res.json())
+      })
+        .then((res) => res.json())
         .then((data) => (this.managerLocalId = data.id))
-        .catch((err) => console.log(err));
-
+        .catch((err) => console.log(err))
+    },
+  },
+  mounted() {
+    if (this.user && this.user.data.role === 'ROLE_LOCAL_MANAGER') {
+      this.fetchLocalForManager()
     }
   },
-  mounted() {
-    if(this.user && this.user.data.role==="ROLE_LOCAL_MANAGER"){
-      this.fetchLocalForManager();
-
-    }
-  }
 }
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5 ">
+  <nav class="navbar navbar-expand-lg navbar-dark custom-background-nav py-2 px-5">
     <div class="container-fluid">
-      <router-link to="/" class="navbar-brand d-flex align-items-center">
+      <router-link
+        v-if="user.data.role !== 'ROLE_LOCAL_MANAGER'"
+        to="/"
+        class="navbar-brand d-flex align-items-center"
+      >
         <img src="/src/assets/rng_logo.png" alt="Logo" height="50" class="me-2" />
         <span class="fw-bold text-black">Reserve And Go</span>
       </router-link>
 
+      <div
+        v-if="user.data.role === 'ROLE_LOCAL_MANAGER'"
+        class="navbar-brand d-flex align-items-center"
+      >
+        <img src="/src/assets/rng_logo.png" alt="Logo" height="50" class="me-2" />
+        <span class="fw-bold text-black">Reserve And Go</span>
+      </div>
 
       <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
         <ul class="navbar-nav align-items-center">
-
           <li class="nav-item" v-if="user.data.role === 'ROLE_CUSTOMER'">
-            <router-link to="/favourite_locals" class="nav-link text-black">Favourite locals</router-link>
+            <router-link :to="{name: 'favourite_locals', params:{ mode: 'favourites'} }" class="nav-link text-black"
+              >Favourite locals</router-link
+            >
           </li>
 
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_CUSTOMER'">
-            <router-link to="/my_reservations" class="nav-link text-black">My reservations</router-link>
+            <router-link to="/my_reservations" class="nav-link text-black"
+              >My reservations</router-link
+            >
           </li>
 
@@ -60,5 +73,7 @@
           </li>
           <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_LOCAL_MANAGER'">
-            <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black">My Restaurant</router-link>
+            <router-link :to="`/more_details/${this.managerLocalId}`" class="nav-link text-black"
+              >My Restaurant</router-link
+            >
           </li>
 
@@ -67,6 +82,8 @@
           </li>
 
-          <li class="nav-item" v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'">
-
+          <li
+            class="nav-item"
+            v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'"
+          >
             <router-link to="/profilePage" class="nav-link text-white">
               <i class="fa-solid fa-user"></i>
@@ -86,5 +103,4 @@
             <logout_ />
           </li>
-
         </ul>
       </div>
@@ -98,8 +114,7 @@
 }
 
-.custom-background-nav{
-  background-color: #5EA5BC;
+.custom-background-nav {
+  background-color: #5ea5bc;
 }
-
 
 .navbar-nav .nav-link:hover {
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -5,13 +5,21 @@
 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 { useUtility } from '@/repository/utility.ts'
+import PhotosGridSystem from '@/components/Project/Utility/PhotosGridSystem.vue'
+import ImageModalLocale from '@/components/Project/Utility/ImageModalLocale.vue'
+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,
+    PhotosGridSystem,
+    ImageModalLocale,
+    RatingsForLocal,
+    ManagerFileInput,
   },
   data() {
@@ -24,37 +32,120 @@
         workingHours: '',
         services: [],
-        averageRating: '',
+        ratingAvg: '',
         events: [],
         localPhotos: [],
         menuPhoto: '',
         menuLink: '',
-        contact: '',
+        contact: {
+          phone: '',
+          email: '',
+          socialLinks: {},
+        },
         logo: '',
       },
+
+      eventsForCarousel: [],
       local_id: this.$route.params['id'],
       locale_logo_base64encoded: '',
       userStore: userStore(),
       router: useRouter(),
+      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',
+      ],
+
+      //MODAL
+      isModalVisible: false,
+      selectedImageIndex: 0,
+      //MODAL END
+
+      //UPLOADing files state
+      isLogoUploading: false,
+      isPhotoUploading: false,
+      //END UPLOADINg files state
+
+
     }
   },
   computed: {
     roundedRating() {
-      return Math.round(this.locale.averageRating * 2) / 2
+      const rating = parseFloat(this.locale.ratingAvg)
+      if (isNaN(rating)) return 0
+      return Math.round(rating * 2) / 2
+    },
+    servicesAsString: {
+      get() {
+        return Array.isArray(this.locale.services) ? this.locale.services.join(', ') : ''
+      },
+      set(newValue) {
+        this.locale.services = newValue
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean)
+      },
+    },
+    fullPicturesUrls() {
+      return this.locale.localPhotos.map((path) => `${config.API_BASE_URL}${path}`)
     },
   },
+
   mounted() {
-    fetch(`http://localhost:8080/api/locals/${this.local_id}`)
-      .then((res) => res.json())
-      .then((data) => {
-        this.locale = data
-        console.log("PRINTING WORKING HOURS BEFORE THEY DONT WORK", this.locale.workingHours)
-        this.locale.events = transformArray(this.locale.events, 2);
-        useUtility.fetchImageBase64(this.locale.logo)
-          .then((base64) => {this.locale_logo_base64encoded = base64});
-      })
-      .catch((err) => console.log('Error in Locale_', err))
-
+    this.fetchLocaleData()
   },
   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
+    },
+    closeImageModal() {
+      this.isModalVisible = false
+    },
+
+    fetchLocaleData() {
+      fetch(`http://localhost:8080/api/locals/${this.local_id}`)
+        .then((res) => res.json())
+        .then((data) => {
+          this.locale = data
+          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: '' }
+          }
+          if (!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
+          })
+        })
+        .catch((err) => console.log('Error fetching locale data:', err))
+    },
     addToFavourites() {
       fetch(`http://localhost:8080/api/customer/favourite-locals/add/${this.locale.id}`, {
@@ -65,19 +156,87 @@
       }).catch((error) => console.log(error))
     },
-    uploadLogo() {
-      const profilePictureFile = document.getElementById('logoPhotoInput').files[0];
-      if (!profilePictureFile) {console.warn("Unable to find the logoPhotoInput"); 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)))
-        .catch((error) => {console.log(error)});
-
-
-    }
+    uploadLogo(fileInput) {
+      this.isLogoUploading = true;
+      const picture = fileInput
+      if (!picture) {
+        console.warn('No logo file selected')
+        return
+      }
+      const formData = new FormData()
+      formData.append('logo', picture)
+      useLocalManager
+        .uploadLogo(formData)
+        .then((imagePath) =>
+          {useUtility.fetchImageBase64(imagePath).then((base64) => {this.locale_logo_base64encoded = base64});
+            this.$refs.uploadLogoInputRef.reset();})
+        .catch((error) => {
+          console.log(error)
+        })
+        .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', 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() {
+      // Create a deep copy of the current state to allow for cancellation
+      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() {
+      // Prepare the payload for saving. The `workingHours` property is sent as-is.
+      const payload = { ...this.locale }
+      // Remove the display-only property before sending
+      delete payload.eventsForCarousel
+
+      fetch(`http://localhost:8080/api/local-manager/my-local/edit`, {
+        method: 'PUT',
+        headers: {
+          Authorization: this.userStore.getToken,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(payload),
+      })
+        .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.isEditing = false
+          this.cachedLocale = null
+          return res.json()
+        })
+        .then(() => {
+          console.log('Successfully updated.')
+          this.fetchLocaleData() // Refresh data to see the changes
+        })
+        .catch((error) => {
+          console.error('Error updating local:', error)
+        })
+    },
   },
 }
@@ -93,13 +252,47 @@
             <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"
             />
-            <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>
+          <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
+            :show="isModalVisible"
+            :images="locale.localPhotos.length === 0 ? galleryImages : fullPicturesUrls"
+            :start-index="selectedImageIndex"
+            @close="closeImageModal"
+            @delete-photo="handleRemoveImage"
+          />
         </div>
 
@@ -107,11 +300,21 @@
         <div class="col-12 col-md-8">
           <div class="card p-4 shadow-sm">
-            <h3 class="mb-3">{{ locale.name }}</h3>
-
-            <div class="mb-3 text-muted">
+            <!-- Name -->
+            <h3 v-if="!isEditing" class="mb-3">{{ locale.name }}</h3>
+            <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" />
+            </div>
+
+            <!-- Address -->
+            <div v-if="!isEditing" class="mb-3 text-muted">
               <i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}
             </div>
-
-            <!-- Star Rating -->
+            <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" />
+            </div>
+
+            <!-- Star Rating (Not Editable) -->
             <div class="mb-3 d-flex align-items-center">
               <div class="text-warning me-2">
@@ -128,44 +331,78 @@
                 ></i>
               </div>
-              <small class="text-muted">({{ locale.averageRating }})</small>
-            </div>
-
+              <small class="text-muted">({{ locale.ratingAvg }})</small>
+            </div>
+
+            <!-- Description -->
             <div class="mb-3">
-              <p>{{ locale.description }}</p>
-
-<!--                          <stong>Working HOurs</stong>
-              <p>{{locale.workingHours}}</p>-->
-
-              <!--              <p><strong>Working Hours:</strong> {{ locale.workingHours }}</p>-->
-              <!--              <p><strong>Working Hours: </strong></p>-->
+              <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>
+            </div>
+
+            <!-- Working Hours (Read-only) -->
+            <div class="mb-3">
+              <h6 class="fw-bold">Working Hours</h6>
+              <!-- This component simply displays whatever data it is given -->
               <WorkingHoursTable :workingHours="locale.workingHours"></WorkingHoursTable>
-
-              <!-- Contact Info -->
-              <div class="mb-3">
-                <strong>Contact:</strong>
-                <ul>
-                  <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="Object.keys(locale.contact.socialLinks || {}).length">
-                    <strong>Social:</strong>
-                    <ul>
-                      <li v-for="(link, name) in locale.contact.socialLinks" :key="name">
-                        {{ name }}: <a :href="link" target="_blank">{{ link }}</a>
-                      </li>
-                    </ul>
-                  </li>
-                </ul>
+            </div>
+
+            <!-- Contact Info -->
+            <div class="mb-3">
+              <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>
+              </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"
+                  />
+                </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"
+                  />
+                </div>
               </div>
-
-              <p>
-                <strong>Menu:</strong>
+            </div>
+
+            <!-- Menu Link -->
+            <div class="mb-3">
+              <h6 class="fw-bold">Menu</h6>
+              <template v-if="!isEditing">
                 <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{
                   locale.menuLink
                 }}</a>
-              </p>
+                <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"
+                />
+              </div>
             </div>
 
@@ -173,36 +410,62 @@
             <div class="mb-4">
               <h6 class="fw-bold">Services</h6>
-              <div class="d-flex flex-wrap gap-2">
+              <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
                 >
-                  {{ service }}
-                </span>
               </div>
-            </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"
+                />
+              </div>
+            </div>
+
+            <!--Rating component-->
+            <div class="mb-3 row" v-if="userStore.data.role === 'ROLE_CUSTOMER'">
+              <RatingsForLocal :local-id="this.local_id" @rating-updated="fetchLocaleData"/>
+            </div>
+
+            <!-- Events Carousel (Read-only) -->
             <h6 class="fw-bold">Events</h6>
             <div class="mb-3 row">
-              <events_carousel :all-events="this.locale.events" />
-            </div>
+              <events_carousel :all-events="eventsForCarousel" />
+            </div>
+
             <!-- Main Action Buttons -->
             <div class="d-flex flex-wrap gap-2 mb-4">
-              <button class="btn btn-dark" v-if="this.userStore.data.role === 'ROLE_CUSTOMER'">
-                <i class="fas fa-calendar-check me-1"></i> Reserve
-              </button>
-
-              <button
-                class="btn btn-outline-danger"
-                v-if="this.userStore.data.role === 'ROLE_CUSTOMER'"
-                @click="addToFavourites"
+              <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>
+              </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>
+                <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>
+                </template>
+              </template>
+
+              <router-link to="/" class="btn btn-outline-secondary" v-if="userStore.data.role !== 'ROLE_LOCAL_MANAGER'"
+                ><i class="fas fa-arrow-left me-1"></i> Back</router-link
               >
-                <i class="fas fa-heart me-1"></i> Add to Favourites
-              </button>
-
-              <router-link to="/" class="btn btn-outline-secondary">
-                <i class="fas fa-arrow-left me-1"></i> Back to Restaurants
-              </router-link>
             </div>
           </div>
@@ -226,2 +489,3 @@
 }
 </style>
+
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -37,5 +37,5 @@
     <p class="mb-3">
       <i class="fas fa-star me-2 text-warning"></i>
-      <strong>Rating:</strong> {{ restaurantStore.averageRating }}
+      <strong>Rating:</strong> {{ restaurantStore.ratingAvg }}
     </p>
 
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -6,5 +6,7 @@
 export default defineComponent({
   components: { LocalInLocalListing },
-
+  props:{
+    mode: String,
+  },
   data() {
     return {
@@ -17,5 +19,11 @@
   },
 
-
+  computed: {
+    displayedLocals() {
+      return this.mode === 'favourites'
+        ? this.locals.filter(local => this.favourite_locals.includes(local.id))
+        : this.locals
+    }
+  },
 
   methods: {
@@ -60,6 +68,6 @@
 
 <template>
-  <div id="container">
-    <div v-for="local in locals" :key="local.id">
+  <div id="container" class="container">
+    <div v-for="local in displayedLocals" :key="local.id">
       <LocalInLocalListing
         :local="local"
@@ -67,4 +75,5 @@
         :isSelected="selectedLocalId === local.id"
         :isHovered="hoveredLocalId === local.id"
+        :mode="mode"
         @select="selectedLocalId = local.id"
         @hover-enter="hoveredLocalId = local.id"
Index: ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/events_carousel.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -1,4 +1,9 @@
 <script lang="ts">
 import { userStore } from '@/PiniaStores/UserStore.js'
+import { useLocales } from '@/repository/Locale'
+import { config } from '@/constants/Api_config'
+import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
+import { transformArray } from '@/mixins/utilFunctions'
+
 
 export default {
@@ -6,11 +11,98 @@
     return {
       userStore_: userStore(),
+      pankake: pankake,
+      itemsPerSlide: 3,
     }
   },
   props: ['allEvents'],
 
+  watch: {
+    allEvents: {
+      handler(events) {
+        if (events && events.length > 0) {
+          events.forEach((eventGroup) => {
+            eventGroup.forEach((event) => {
+              useLocales.getSpecificLocale(event.localId).then((locale) => {
+                event.logo = locale.logo
+              })
+            })
+          })
+        } else {
+          console.log('allEvents is still empty or undefined.')
+        }
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+
+  // 2. COMPUTED: Create a property that automatically recalculates when its dependencies change.
+  computed: {
+    /**
+     * This computed property flattens the original nested allEvents array
+     * and then re-chunks it based on the current `itemsPerSlide`.
+     */
+    chunkedEvents() {
+    /*  console.log("CHUNKED EVENTS",this.allEvents)*/
+      // Return empty array if the prop is not yet ready.
+      if (!this.allEvents || this.allEvents.length === 0) {
+        return []
+      }
+
+      // First, flatten the nested array into a single list of all events.
+      // e.g., [[1,2,3], [4,5,6]] becomes [1,2,3,4,5,6]
+      const flatEvents = this.allEvents.flat()
+      /*console.log('flatEvents', flatEvents)*/
+
+      // This is the abstract "resize the array" method you mentioned.
+      // It chunks the flat list into new sub-arrays.
+
+      return transformArray(flatEvents, this.itemsPerSlide, false)
+    },
+  },
+
+  methods: {
+    /**
+     * Checks the window width and updates the `itemsPerSlide` data property.
+     * This will trigger the `chunkedEvents` computed property to recalculate.
+     */
+    updateItemsPerSlide() {
+      const width = window.innerWidth
+      // Using standard Bootstrap breakpoints
+      if (width < 768) {
+        // Small devices (phones)
+        this.itemsPerSlide = 1
+      } else if (width < 992) {
+        // Medium devices (tablets/laptops)
+        this.itemsPerSlide = 2
+      } else {
+        // Large devices (desktops)
+        this.itemsPerSlide = 3
+      }
+    },
+
+    getImageLogo(imageLogo: string): any {
+      if (!imageLogo || !imageLogo.startsWith('/')) {
+        return pankake
+      }
+      return config.API_BASE_URL + imageLogo
+    },
+  },
+
+  mounted() {
+ /*   setInterval(() => {
+      console.log(this.chunkedEvents)
+    }, 1000)*/
+    // Call the method once on component mount to set the initial state.
+    this.updateItemsPerSlide()
+    // Add event listener for window resizing.
+    window.addEventListener('resize', this.updateItemsPerSlide)
+  },
+
   beforeUnmount() {
-    console.log("Events", this.allEvents)
-  }
+    // IMPORTANT: Remove the event listener when the component is destroyed
+    // to prevent memory leaks.
+    window.removeEventListener('resize', this.updateItemsPerSlide)
+  },
 }
 </script>
@@ -19,36 +111,23 @@
   <div id="carouselMulti3" class="carousel slide col-12 col-md-8" data-bs-ride="carousel">
     <div class="carousel-inner">
-      <div class="carousel-item active">
+      <!--
+        HERE IS THE FIX:
+        - We use a single v-for to loop through our reactive `chunkedEvents`.
+        - `chunkedEvents` will contain arrays of 1, 2, or 3 items, depending on screen size.
+        - `:class="{ active: index === 0 }"` dynamically makes the first carousel slide active.
+      -->
+      <div
+        class="carousel-item"
+        v-for="(eventGroup, index) in chunkedEvents"
+        :key="index"
+        :class="{ active: index === 0 }"
+      >
         <div style="gap: 0.2rem" class="d-flex justify-content-center">
-          <div class="" v-for="event in allEvents[0]" :key="event.id">
+          <!-- The inner loop now iterates over the `eventGroup` (the chunk) -->
+          <div class="" v-for="event in eventGroup" :key="event.id">
             <div class="card" style="width: 18rem">
               <img
                 height="100"
-                src="../../ectd/easy-american-pancake-recipe.jpg"
-                class="card-img-top"
-                alt="..."
-              />
-              <div class="card-body">
-                <h5 class="card-title fw-bold">{{ event.name }}</h5>
-                <div class="card-text d-flex justify-content-between">
-                  <div class="text-muted">{{ event.eventType }}</div>
-                  <div class="text-muted">
-                    {{ event.eventStart.date }} <br />
-                    <i class="fas fa-clock me-2 text-secondary"></i>{{ event.eventStart.time }}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!--      Sto Ako listata e pomala od 3 !!!!!!! -->
-      <div class="carousel-item" v-for="eventGroup in allEvents.slice(1)" :key="eventGroup">
-        <div class="d-flex justify-content-center">
-          <div style="gap: 0.2rem" class="" v-for="event in eventGroup" :key="event.id">
-            <div class="card" style="width: 18rem">
-              <img
-                height="100"
-                :src="'../../ectd/easy-american-pancake-recipe.jpg'"
+                :src="getImageLogo(event.logo) || pankake"
                 class="card-img-top"
                 alt="..."
Index: serveNGo-frontend/src/components/Project/Restaurant/favourite_locals.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/favourite_locals.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ 	(revision )
@@ -1,59 +1,0 @@
-<script>
-import { userStore } from '@/PiniaStores/UserStore.js'
-
-export default {
-  data() {
-    return {
-      locals: [],
-      userStore_: userStore(),
-    }
-  },
-  beforeMount() {
-    fetch(`http://localhost:8080/api/customer/favourite-locals`, {
-      method: 'GET',
-      headers: {
-        Authorization: this.userStore_.getToken,
-      },
-    })
-      .then((res) => res.json())
-      .then((data) => (this.locals = data))
-      .catch((err) => console.log(err))
-  },
-  methods: {
-    removeRestaurant(id) {
-      fetch(`http://localhost:8080/api/customer/favourite-locals/remove/${id}`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: this.userStore_.getToken,
-        },
-      }).then(()=>{
-        this.locals = this.locals.filter(local => local.id !== id)
-      })
-        .catch((err) => console.log(err))
-    }
-  },
-}
-</script>
-
-<template>
-  <div class="container" v-for="local in locals" :key="local">
-    <div class="row border mt-4 p-2">
-      <div class="col-8">
-      <h3>{{ local.name }}</h3>
-      <h5>{{ local.address }}</h5>
-      </div>
-
-      <div class="col-4 d-flex justify-content-end align-self-center">
-        <router-link :to="`/more_details/${local.id}`">
-          <button class="btn btn-outline-dark me-2">
-            <i class="fas fa-info-circle me-1"></i> More details
-          </button>
-        </router-link>
-        <button class="btn btn-dark" @click="removeRestaurant(local.id)">Remove favourite</button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -42,6 +42,6 @@
 
       <!-- Scrollable Local Listings -->
-      <div class="col-12 col-md-8 listing-column">
-        <Locale_listing_container />
+      <div class=" col-md-8 listing-column">
+        <Locale_listing_container :mode="'all'" />
       </div>
     </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -4,4 +4,5 @@
 import { useUtility } from '@/repository/utility.ts'
 import {config} from '@/constants/Api_config.js'
+import pankake from '@/components/ectd/easy-american-pancake-recipe.jpg'
 
 export default {
@@ -11,4 +12,5 @@
     isSelected: Boolean,
     isHovered: Boolean,
+    mode: String,
   },
 
@@ -17,4 +19,5 @@
       userStore_: userStore(),
       localeLogo: null,
+      pankake: pankake
     }
   },
@@ -52,4 +55,5 @@
   computed: {
     locale_logo() {
+      if (!this.local.logo.startsWith('/')) {return this.pankake}
       const url = new URL(this.local.logo, config.API_BASE_URL)
       return url.toString();
@@ -93,5 +97,5 @@
         <div class="button-group d-flex align-items-center" v-if="isHovered || isSelected">
           <button
-            v-if="userStore_.data.role === 'ROLE_CUSTOMER'"
+            v-if="userStore_.data.role === 'ROLE_CUSTOMER' && mode==='all'"
             :class="['fa-heart', isFavorited ? 'fa-solid liked' : 'fa-regular']"
             id="like-button"
@@ -106,7 +110,9 @@
             </router-link>
 
-            <button v-if="userStore_.data.role === 'ROLE_CUSTOMER'" class="btn btn-dark">
+            <button v-if="userStore_.data.role === 'ROLE_CUSTOMER' && mode==='all'" class="btn btn-dark">
               <i class="fas fa-calendar-check me-1"></i> Make reservation
             </button>
+
+            <button class="btn btn-dark" v-if="mode==='favourites'" @click="addToFavorites">Remove favourite</button>
           </div>
         </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -27,15 +27,12 @@
       </thead>
       <tbody>
-        <!--      {{ wh.dayOfWeek }}: {{ wh.openTime }} - {{ wh.closeTime }}-->
-        <tr>
+       <tr>
           <td v-for="(wh, index) in workingHours" :key="index" class="time">
             {{ wh.openTime }} - {{ wh.closeTime }}
           </td>
-<!--                  <td class="time">09:00 - 17:00</td>
-        <td class="time">09:00 - 17:00</td>
-        <td class="time">09:00 - 17:00</td>-->
+
         <td class="status-closed">Closed</td>
         <td class="status-closed">Closed</td>
-<!--        <td class="time">09:00 - 21:00</td>-->
+
         </tr>
       </tbody>
Index: ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/components/Project/Utility/ImageModalLocale.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -0,0 +1,279 @@
+<!-- components/ImageModal.vue -->
+<script lang="ts">
+
+import {useLocalManager} from '@/repository/LocalManager'
+import {userStore} from '@/PiniaStores/UserStore'
+
+export default {
+  props: {
+    images: { type: Array, required: true },
+    startIndex: { type: Number, default: 0 },
+    show: { type: Boolean, default: false },
+    // --- 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() {
+      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; },
+    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; } },
+  },
+};
+</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 wrapper is now a flex item that can shrink -->
+        <div class="main-image-wrapper">
+          <img :src="activeImage" alt="Enlarged view" class="main-image" />
+          <template v-if="images.length > 1">
+            <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">
+          <!-- 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>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+/* 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;
+  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;
+}
+
+.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;
+}
+
+.main-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.nav-arrow {
+  position: absolute;
+/*  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;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 2rem;
+  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;
+}
+
+.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: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/LoadingIcon.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/components/Project/Utility/LoadingIcon.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -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 c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/components/Project/Utility/ManagerFileInput.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -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 c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/components/Project/Utility/PhotosGridSystem.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -0,0 +1,92 @@
+<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>
+  <div class="logo-options-wrapper">
+    <!-- Top row with 2 images -->
+    <div class="grid-row-top">
+      <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 @click="openImageModal(index, true)" class="grid-image" v-for="(image, index) in images.slice(2, 4)" :key="index" :src="image" alt="">
+    </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 a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/components/Project/Utility/PlusAddImage.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -39,5 +39,5 @@
     type="file"
     id="logoPhotoInput"
-    class="visually-hidden"
+    class=""
     accept="image/*"
   />
Index: ReserveNGo-frontend/src/components/interface/interfejsi.js
===================================================================
--- ReserveNGo-frontend/src/components/interface/interfejsi.js	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/components/interface/interfejsi.js	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -0,0 +1,14 @@
+/*
+
+class CustomError extends Error {
+
+
+
+  constructor(message) {
+    super(message)
+  }
+
+
+
+}
+a*/
Index: ReserveNGo-frontend/src/mixins/utilFunctions.js
===================================================================
--- ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/mixins/utilFunctions.js	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -7,10 +7,14 @@
 
 
-export function transformArray(arr, howMany) {
+export function transformArray(arr, howMany, doDateEdit = true) {
 
+
+
+  if (doDateEdit) {
   arr.forEach(item => {
     item.eventEnd = transformDate(item.eventEnd)
     item.eventStart = transformDate(item.eventStart)
   })
+  }
 
   let newArray = []
Index: ReserveNGo-frontend/src/repository/Authentication.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Authentication.ts	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/repository/Authentication.ts	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -0,0 +1,29 @@
+import { ApiClient } from '@/Api_Classes/ApiClient'
+import { config } from '@/constants/Api_config'
+import { HttpClient } from '@/Api_Classes/HttpClient'
+
+const BASE_API_URL = config.API_BASE_URL
+
+class Authentication {
+  private readonly httpClient: HttpClient
+
+  constructor(baseUrl: string) {
+    this.httpClient = new HttpClient(baseUrl)
+  }
+
+  makeLogin(email: String, password: String) : Promise<any> {
+    return this.httpClient.post('login', { email, password })
+  }
+  makeRegister(
+    firstName: String,
+    lastName: String,
+    email: String,
+    phoneNumber: String,
+    password: String,
+    role: String,
+  ) {
+    return this.httpClient.post("register/" + role, { firstName, lastName, email, phoneNumber, password })
+  }
+}
+
+export const useAuth = new Authentication(BASE_API_URL + '/api/auth/')
Index: ReserveNGo-frontend/src/repository/LocalManager.ts
===================================================================
--- ReserveNGo-frontend/src/repository/LocalManager.ts	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/repository/LocalManager.ts	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -19,4 +19,14 @@
     return this.httpClient.upload('upload-logo', formData)
   }
+  uploadImage(formData: FormData): Promise<any> {
+    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)
+  }
+  getLocal(): Promise<any> {
+    return this.httpClient.get('my-local');
+  }
 
 }
Index: ReserveNGo-frontend/src/repository/Locale.ts
===================================================================
--- ReserveNGo-frontend/src/repository/Locale.ts	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/repository/Locale.ts	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -0,0 +1,26 @@
+import { config } from '@/constants/Api_config'
+import { HttpClient } from '@/Api_Classes/HttpClient'
+
+const BASE_API_URL = config.API_BASE_URL
+
+/*
+console.warn("THIS IS THE BASE URL",BASE_API_URL)
+*/
+
+class Locale {
+  private readonly httpClient: HttpClient
+
+  constructor(baseUrl: string) {
+    this.httpClient = new HttpClient(baseUrl)
+  }
+
+  getLocals() {
+    return this.httpClient.get()
+  }
+  getSpecificLocale(localeId: number) {
+    return this.httpClient.get(`${localeId}`)
+  }
+
+}
+
+export const useLocales = new Locale(BASE_API_URL + '/api/locals/', )
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision a2cdbc90930ebea481f7137f4a3c686d630d216c)
+++ ReserveNGo-frontend/src/router/index.js	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
@@ -5,5 +5,4 @@
 import login_ from '@/components/Project/Auth/login_.vue'
 import register_ from '@/components/Project/Auth/register_.vue'
-import favourite_locals from '@/components/Project/Restaurant/favourite_locals.vue'
 import my_reservations from '@/components/Project/Reservation/My_reservations.vue'
 import Locale_ from '@/components/Project/Restaurant/Locale_.vue'
@@ -12,4 +11,5 @@
 import LocaleNotAssigned from '@/components/Project/Manager/locale-not-assigned.vue'
 import ManagerDashboard from '@/components/Project/Manager/ManagerDashboard.vue'
+import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
 
 const router = createRouter({
@@ -17,7 +17,8 @@
   routes: [
     {
-      path: '/favourite_locals',
+      path: '/favourite_locals/:mode',
       name: 'favourite_locals',
-      component: favourite_locals,
+      component: Locale_listing_container,
+      props: true,
     },
     {