Index: ReserveNGo-frontend/src/PiniaStores/UserStore.js
===================================================================
--- ReserveNGo-frontend/src/PiniaStores/UserStore.js	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/PiniaStores/UserStore.js	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
@@ -102,4 +102,16 @@
     getToken(){
       return 'Bearer ' + this.data.token;
+    },
+    isLocaleManager(){
+      return this.data.role === "ROLE_LOCAL_MANAGER";
+    },
+    isLocaleWorker(){
+      return this.data.role === "ROLE_LOCAL_WORKER";
+    },
+    isCustomer(){
+      return this.data.role === "ROLE_CUSTOMER";
+    },
+    isAdmin(){
+      return this.data.role === "ROLE_ADMIN";
     }
   }
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision c5e52c937bb123182a68a8ca69293a3a7db93478)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
@@ -12,8 +12,9 @@
 import { config } from '@/constants/Api_config.js'
 import ManagerFileInput from '@/components/Project/Utility/ManagerFileInput.vue'
-
+import HorizontalScroller from '@/components/Project/Utility/HorizontalScroller.vue'
 
 export default {
   components: {
+    HorizontalScroller,
     events_carousel,
     WorkingHoursTable,
@@ -71,6 +72,4 @@
       isPhotoUploading: false,
       //END UPLOADINg files state
-
-
     }
   },
@@ -157,5 +156,5 @@
     },
     uploadLogo(fileInput) {
-      this.isLogoUploading = true;
+      this.isLogoUploading = true
       const picture = fileInput
       if (!picture) {
@@ -167,16 +166,19 @@
       useLocalManager
         .uploadLogo(formData)
-        .then((imagePath) =>
-          {useUtility.fetchImageBase64(imagePath).then((base64) => {this.locale_logo_base64encoded = base64});
-            this.$refs.uploadLogoInputRef.reset();})
+        .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;
+          this.isLogoUploading = false
         })
     },
     uploadPhoto(fileInput) {
-      this.isPhotoUploading = true;
+      this.isPhotoUploading = true
       const picture = fileInput
       if (!picture) {
@@ -190,9 +192,11 @@
         .then((response) => {
           console.log('SUCCESFUL UPLOAD', response)
-          this.fetchLocaleData();
-          this.$refs.uploadPhotoInputRef.reset();
+          this.fetchLocaleData()
+          this.$refs.uploadPhotoInputRef.reset()
         })
         .catch((error) => console.log('Unable To upload image', error))
-        .finally(() => {this.isPhotoUploading = false;})
+        .finally(() => {
+          this.isPhotoUploading = false
+        })
     },
     startEditing() {
@@ -261,4 +265,5 @@
             />
             <ManagerFileInput
+              v-if="userStore.isLocaleManager"
               ref="uploadLogoInputRef"
               @file-sent="uploadLogo"
@@ -279,4 +284,5 @@
           ></PhotosGridSystem>
           <ManagerFileInput
+            v-if="userStore.isLocaleManager"
             ref="uploadPhotoInputRef"
             style="margin-top: 1rem"
@@ -410,12 +416,11 @@
             <div class="mb-4">
               <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
-                >
-              </div>
+              <HorizontalScroller v-if="!isEditing">
+                  <div
+                    v-for="service in locale.services"
+                    :key="service"
+                    class="badge bg-primary text-light p-2"
+                    >{{ service }}</div>
+              </HorizontalScroller>
               <div v-else>
                 <label for="servicesInput" class="form-label">Services (comma-separated)</label>
@@ -431,5 +436,5 @@
             <!--Rating component-->
             <div class="mb-3 row" v-if="userStore.data.role === 'ROLE_CUSTOMER'">
-              <RatingsForLocal :local-id="this.local_id" @rating-updated="fetchLocaleData"/>
+              <RatingsForLocal :local-id="this.local_id" @rating-updated="fetchLocaleData" />
             </div>
 
@@ -465,5 +470,8 @@
               </template>
 
-              <router-link to="/" class="btn btn-outline-secondary" v-if="userStore.data.role !== 'ROLE_LOCAL_MANAGER'"
+              <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
               >
@@ -489,3 +497,2 @@
 }
 </style>
-
Index: ReserveNGo-frontend/src/components/Project/Utility/HorizontalScroller.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/HorizontalScroller.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Utility/HorizontalScroller.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
@@ -0,0 +1,243 @@
+<!-- components/HorizontalScroller.vue -->
+<template>
+  <div class="scroller-wrapper">
+    <!-- Left Navigation Arrow -->
+    <button
+      v-if="canScrollLeft"
+      class="nav-arrow prev"
+      @click="scrollLeft"
+      aria-label="Scroll left"
+    >
+      <LeftArrow></LeftArrow>
+    </button>
+
+    <!-- The container that hides the scrollbar and captures events -->
+    <div class="scroll-container" ref="scrollContainer" @scroll.passive="handleScroll">
+      <!-- The flex wrapper for your content -->
+      <div class="content-wrapper" ref="contentWrapper">
+        <slot></slot>
+      </div>
+    </div>
+
+    <!-- Right Navigation Arrow -->
+    <button
+      v-if="canScrollRight"
+      class="nav-arrow next"
+      @click="scrollRight"
+      aria-label="Scroll right"
+    >
+      <RightArrow></RightArrow>
+    </button>
+  </div>
+</template>
+
+<script>
+import LeftArrow from '@/components/Project/Utility/LeftArrow.vue'
+import RightArrow from '@/components/Project/Utility/RightArrow.vue'
+
+export default {
+  name: 'HorizontalScroller',
+  components: { RightArrow, LeftArrow },
+  data() {
+    return {
+      // These booleans control the visibility of the arrows
+      canScrollLeft: false,
+      canScrollRight: false,
+      // A ResizeObserver to detect when the container or content size changes
+      resizeObserver: null,
+      // Add a new property for debugging
+      thirdChildOffsetLeft: 'N/A',
+      scrollContainerScrollLeftValue: 'N/A',
+    }
+  },
+  mounted() {
+    // Wait for the DOM to be ready before doing calculations
+    this.$nextTick(() => {
+      this.checkForOverflow()
+
+      this.resizeObserver = new ResizeObserver(() => this.checkForOverflow())
+      this.resizeObserver.observe(this.$refs.contentWrapper)
+      this.resizeObserver.observe(this.$refs.scrollContainer)
+    })
+  },
+  methods: {
+    /**
+     * This is the master method that checks if scrolling is possible
+     * and updates the visibility of the navigation arrows.
+     */
+    checkForOverflow() {
+      const container = this.$refs.scrollContainer
+      if (!container) return
+      const content = this.$refs.contentWrapper
+
+      // --- START: Debugging Logic ---
+      // Check if the third child exists (arrays are 0-indexed)
+      if (content.children && content.children.length > 2) {
+        const thirdChild = content.children[6]
+      /*  console.log("chiled", thirdChild)*/
+        // Get the element's offset relative to its parent.
+        // This value only changes on window resize or layout change.
+        this.thirdChildOffsetLeft = thirdChild.offsetLeft
+        this.scrollContainerScrollLeftValue = container.scrollLeft + container.clientWidth
+        /*console.log("ThirdChieldOffSetLEft", this.thirdChildOffsetLeft)*/
+      } else {
+        this.thirdChildOffsetLeft = 'N/A'
+      }
+      // --- END: Debugging Logic ---
+
+      const hasOverflow = container.scrollWidth > container.clientWidth
+
+      this.canScrollLeft = hasOverflow && container.scrollLeft > 0
+      this.canScrollRight =
+        hasOverflow && container.scrollLeft + 1 < container.scrollWidth - container.clientWidth
+    },
+
+    /**
+     * This method is called whenever the user scrolls the container,
+     * either with the arrows or manually (e.g., trackpad).
+     */
+    handleScroll() {
+      // We just need to re-run the check to update the arrow states.
+      this.checkForOverflow()
+    },
+
+    /**
+     * The core logic for scrolling to the right.
+     * It finds the first item that is currently clipped on the right
+     * and scrolls just enough to make it fully visible.
+     */
+    scrollRight() {
+      const container = this.$refs.scrollContainer
+      const items = this.$refs.contentWrapper.children
+      if (!container || items.length === 0) return
+
+      const containerRightEdge = container.scrollLeft + container.clientWidth
+
+      // Find the first item whose left edge is past the visible area
+      let targetItem = null
+      for (const item of items) {
+        if (item.offsetLeft >= containerRightEdge) {
+          targetItem = item
+          break
+        }
+      }
+
+      // If no item is found (we might be at the end), we don't scroll
+      if (targetItem) {
+        console.log("TargetItem", targetItem)
+        container.scrollTo({
+          left: targetItem.offsetLeft + targetItem.clientWidth - container.clientWidth,
+          behavior: 'smooth',
+        })
+      }
+    },
+
+    /**
+     * The core logic for scrolling to the left.
+     * It finds the first fully visible item and scrolls to make the
+     * item *before* it the new first visible item.
+     */
+    scrollLeft() {
+      const container = this.$refs.scrollContainer
+      const items = this.$refs.contentWrapper.children
+      if (!container || items.length === 0) return
+
+      const containerLeftEdge = container.scrollLeft
+
+      // Find the last item that starts before the visible area
+      let targetItem = null
+      for (const item of items) {
+        if (item.offsetLeft < containerLeftEdge - 1) {
+          targetItem = item
+        } else {
+          // As soon as we find an item that starts inside the view, we can stop.
+          break
+        }
+      }
+
+      if (targetItem) {
+        container.scrollTo({
+          left: targetItem.offsetLeft,
+          behavior: 'smooth',
+        })
+      } else {
+        // If no item is clipped on the left, scroll to the very beginning
+        container.scrollTo({ left: 0, behavior: 'smooth' })
+      }
+    },
+  },
+
+}
+</script>
+
+<style scoped>
+.scroller-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.scroll-container {
+  /* This is the key: hide the native scrollbar */
+  overflow-x: scroll;
+  scrollbar-width: none; /* For Firefox */
+  -ms-overflow-style: none; /* For Internet Explorer and Edge */
+
+  /* Enables smooth scrolling on iOS devices */
+  -webkit-overflow-scrolling: touch;
+}
+
+.scroll-container::-webkit-scrollbar {
+  display: none; /* For Chrome, Safari, and Opera */
+}
+
+.content-wrapper {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 1rem; /* Adjust the gap between your items */
+  padding-block: 1rem; /* Adds some vertical space so arrows aren't on the edge */
+}
+
+.content-wrapper > * {
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 5rem;
+}
+
+.nav-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  /*width: 40px;*/
+  aspect-ratio: 1 / 1;
+  padding: 10px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1px solid #ddd;
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /*  vertical-align: top;
+  text-align: start;*/
+
+  color: #333;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.nav-arrow:hover {
+  transform: translateY(-50%) scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.nav-arrow.prev {
+  left: -20px; /* Position half-way out of the container */
+}
+
+.nav-arrow.next {
+  right: -20px; /* Position half-way out of the container */
+}
+</style>
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 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
@@ -1,6 +1,4 @@
 <!-- components/ImageModal.vue -->
 <script lang="ts">
-
-import {useLocalManager} from '@/repository/LocalManager'
 import {userStore} from '@/PiniaStores/UserStore'
 
@@ -10,6 +8,5 @@
     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
@@ -27,7 +24,4 @@
     },
     // --- NEW: A computed property to easily check the role ---
-    isManager() {
-      return true;
-    },
   },
   methods: {
@@ -90,5 +84,5 @@
             <!-- === NEW: Conditional Remove Button === -->
             <button
-              v-if="isManager"
+              v-if="userStore_.isLocaleManager || userStore_.isAdmin"
               @click.stop="handleRemove(image, index)"
               class="btn btn-danger btn-sm remove-btn"
Index: ReserveNGo-frontend/src/components/Project/Utility/LeftArrow.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/LeftArrow.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Utility/LeftArrow.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 6l-6 6l6 6" />
+  </svg>
+</template>
Index: ReserveNGo-frontend/src/components/Project/Utility/RightArrow.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Utility/RightArrow.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
+++ ReserveNGo-frontend/src/components/Project/Utility/RightArrow.vue	(revision 8cbd6b2fc678627dfc65cd92e393fc04b837c73b)
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.2em" height="1.2em" viewBox="0 0 24 24">
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 6l6 6l-6 6" />
+  </svg>
+</template>