Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision bf36a9a71121b623adc617de6466dc230aebd82c)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 90774c33ff590c05af7ae3ca76aeb6f2905c1ea3)
@@ -2,10 +2,12 @@
 import { userStore } from '@/PiniaStores/UserStore.js'
 import { useRouter } from 'vue-router'
-import {transformArray} from '@/mixins/utilFunctions.js'
+import { transformArray } from '@/mixins/utilFunctions.js'
 import events_carousel from '@/components/Project/Restaurant/events_carousel_in_locale.vue'
+import WorkingHoursTable from '@/components/Project/Restaurant/working-hours-table.vue'
 
 export default {
   components: {
-    events_carousel
+    events_carousel,
+    WorkingHoursTable,
   },
   data() {
@@ -34,15 +36,15 @@
     roundedRating() {
       return Math.round(this.locale.averageRating * 2) / 2
-    }
+    },
   },
   mounted() {
     fetch(`http://localhost:8080/api/locals/${this.local_id}`)
-      .then(res => res.json())
-      .then(data => {
-        this.locale = data;
-        console.log("FIXING PERSONAL EVENTS", this.locale.events);
-        this.locale.events = transformArray(this.locale.events, 2);
+      .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)
       })
-      .catch(err => console.log("Error in Locale_", err))
+      .catch((err) => console.log('Error in Locale_', err))
   },
   methods: {
@@ -55,5 +57,5 @@
       }).catch((error) => console.log(error))
     },
-  }
+  },
 }
 </script>
@@ -69,5 +71,5 @@
               :src="locale.logo || '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"
               alt="Restaurant Logo"
             />
@@ -94,6 +96,6 @@
                       ? 'fas fa-star'
                       : roundedRating >= n - 0.5
-                      ? 'fas fa-star-half-alt'
-                      : 'far fa-star'
+                        ? 'fas fa-star-half-alt'
+                        : 'far fa-star',
                   ]"
                 ></i>
@@ -105,14 +107,10 @@
               <p>{{ locale.description }}</p>
 
-
-              <!-- Working Hours -->
-              <div class="mb-3">
-                <strong>Working Hours:</strong>
-                <ul class="mb-2">
-                  <li v-for="(wh, index) in locale.workingHours" :key="index">
-                    {{ wh.dayOfWeek }}: {{ wh.openTime }} - {{ wh.closeTime }}
-                  </li>
-                </ul>
-              </div>
+<!--                          <stong>Working HOurs</stong>
+              <p>{{locale.workingHours}}</p>-->
+
+              <!--              <p><strong>Working Hours:</strong> {{ locale.workingHours }}</p>-->
+              <!--              <p><strong>Working Hours: </strong></p>-->
+              <WorkingHoursTable :workingHours="locale.workingHours"></WorkingHoursTable>
 
               <!-- Contact Info -->
@@ -120,6 +118,10 @@
                 <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="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>
@@ -133,8 +135,9 @@
               </div>
 
-
               <p>
                 <strong>Menu:</strong>
-                <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{ locale.menuLink }}</a>
+                <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{
+                  locale.menuLink
+                }}</a>
               </p>
             </div>
@@ -154,16 +157,19 @@
             </div>
 
-
             <h6 class="fw-bold">Events</h6>
             <div class="mb-3 row">
-            <events_carousel :all-events="this.locale.events" />
+              <events_carousel :all-events="this.locale.events" />
             </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'">
+              <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">
+              <button
+                class="btn btn-outline-danger"
+                v-if="this.userStore.data.role === 'ROLE_CUSTOMER'"
+                @click="addToFavourites"
+              >
                 <i class="fas fa-heart me-1"></i> Add to Favourites
               </button>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue	(revision 90774c33ff590c05af7ae3ca76aeb6f2905c1ea3)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/working-hours-table.vue	(revision 90774c33ff590c05af7ae3ca76aeb6f2905c1ea3)
@@ -0,0 +1,93 @@
+<script lang="ts">
+
+export default {
+  props: ["workingHours"],
+
+
+
+  mounted() {
+    console.log("WORKING HOURS INSIDE COMPONENT", this.workingHours);
+  }
+}
+</script>
+
+<template>
+  <div class="working-hours-container">
+    <h3>Working Hours</h3>
+    <table class="hours-table">
+      <thead>
+        <tr>
+          <th>Monday</th>
+          <th>Tuesday</th>
+          <th>Wednesday</th>
+          <th>Thursday</th>
+          <th>Friday</th>
+          <th>Saturday</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!--      {{ wh.dayOfWeek }}: {{ wh.openTime }} - {{ wh.closeTime }}-->
+        <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>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+/* General container styling */
+.working-hours-container {
+  font-family: Arial, sans-serif;
+  max-width: 600px; /* Increased width for horizontal layout */
+  margin: 20px auto;
+  padding: 20px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+/* Heading style */
+.working-hours-container h3 {
+  margin-top: 0;
+  margin-bottom: 15px;
+  font-weight: bold;
+  text-align: center;
+}
+
+/* Table styling */
+.hours-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: center;
+}
+
+.hours-table th,
+.hours-table td {
+  padding: 10px 8px;
+  border: none; /* Removed internal borders for a cleaner look */
+}
+
+.hours-table th {
+  font-weight: 600; /* Bold headers for days */
+}
+
+/* Closed status */
+.status-closed {
+  color: #888;
+  font-style: italic;
+}
+
+/* Time styling */
+.time {
+  font-weight: 500;
+}
+</style>