Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 3a3a896f297b235a6ddf514046402794f33e6860)
@@ -1,18 +1,33 @@
 <script>
 
-import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
+//import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
 
 export default {
   data() {
     return {
-      locale:{},
+      locale:{
+        id: '',
+        name: '',
+        description: '',
+        address: '',
+        workingHours: '',
+        services: [],
+        averageRating: '',
+        events: [],
+        localPhotos: [],
+        menuPhoto: '',
+        menuLink: '',
+        contact: '',
+        logo: '',
+      },
+      local_id: this.$route.params['id'],
 
     }
   },
   mounted() {
-    fetch(`http://localhost:8080/api/locals/${restaurantStore().id}`)
+    fetch(`http://localhost:8080/api/locals/${this.local_id}`)
       .then(res => res.json())
-      .then(data => this.locale = data)
-      .catch(err => console.log(err));
+      .then(data => {this.locale = data;})
+      .catch(err => console.log("Error in Locale_",err));
   },
 
@@ -23,26 +38,90 @@
 
 <template>
-  <div id="container" class="border my-3 p-2">
-    <h3>{{locale.id}}</h3>
-    <h5>{{locale.name}}</h5>
-    <p>{{locale.description}}</p>
-    <p>{{locale.address}}</p>
-    <p>{{locale.workingHours}}</p>
-    <div v-for="service in locale.services" :key="service">
-      <p>{{service}}</p>
-    </div>
-    <p>{{locale.averageRating}}</p>
-    <div v-for="event in locale.events" :key="event">
-      <p>{{event}}</p>
-    </div>
-    <div v-for="photo in locale.localPhotos" :key="photo">
-      <p>{{photo}}</p>
-    </div>
-    <p>{{locale.menuPhoto}}</p>
-    <p>{{locale.menuLink}}</p>
-    <p>{{locale.contact}}</p>
-    <p>{{locale.logo}}</p>
+  <v-container>
+    <v-row>
+      <!-- Left Column: Image -->
+      <v-col cols="12" md="4">
+        <v-card class="pa-4" elevation="2">
+          <v-img
+            :src="locale.logo || 'https://cdn.vuetifyjs.com/images/profiles/default-avatar.png'"
+            aspect-ratio="1"
+            class="rounded"
+          ></v-img>
+        </v-card>
+      </v-col>
 
-  </div></template>
+      <!-- Right Column: Details -->
+      <v-col cols="12" md="8">
+        <v-card class="pa-4">
+          <v-card-title class="text-h5">{{ locale.name }}</v-card-title>
+
+          <v-row align="center" class="my-2">
+            <v-rating v-model="rating" readonly half-increments color="amber" size="small" />
+            <span class="ml-2 grey--text text--darken-1">({{ locale.reviewCount || 12 }} reviews)</span>
+          </v-row>
+
+          <div class="mb-2">Address: {{ locale.address }}</div>
+
+          <v-card-text>
+            <p class="mb-2">{{ locale.description }}</p>
+            <p><strong>Working Hours:</strong> {{ locale.workingHours }}</p>
+            <p><strong>Contact:</strong> {{ locale.contact }}</p>
+            <p><strong>Average Rating:</strong> {{ locale.averageRating }}</p>
+            <p><strong>Menu:</strong>
+              <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{ locale.menuLink }}</a>
+            </p>
+          </v-card-text>
+
+<!--          <v-row>-->
+<!--            <v-col cols="12" sm="6" v-for="photo in locale.localPhotos" :key="photo">-->
+<!--              <v-img :src="photo || 'https://via.placeholder.com/150'" aspect-ratio="1.5" class="mb-2" />-->
+<!--            </v-col>-->
+<!--          </v-row>-->
+
+          <div class="mt-4">
+            <h6 class="font-weight-medium">Services</h6>
+            <v-chip-group class="my-2">
+              <v-chip v-for="service in locale.services" :key="service" color="blue" variant="outlined">
+                {{ service }}
+              </v-chip>
+            </v-chip-group>
+          </div>
+
+          <div class="mt-4">
+            <h6 class="font-weight-medium">Events</h6>
+            <v-chip-group class="my-2">
+              <v-chip v-for="event in locale.events" :key="event" color="green" variant="outlined">
+                {{ event }}
+              </v-chip>
+            </v-chip-group>
+          </div>
+
+          <v-row class="mt-4" dense>
+            <v-col cols="4">
+              <v-btn color="primary" block >Reserve</v-btn>
+            </v-col>
+            <v-col cols="4">
+              <v-btn color="pink" block prepend-icon="mdi-heart">Add To Favourites</v-btn>
+            </v-col>
+<!--            <v-col cols="4">-->
+<!--              <v-btn color="info" block prepend-icon="mdi-share">Share</v-btn>-->
+<!--            </v-col>-->
+          </v-row>
+
+          <v-btn
+            variant="outlined"
+            class="mt-4"
+            color="secondary"
+            prepend-icon="mdi-arrow-left"
+            to="/"
+          >
+            Back to Restaurants
+          </v-btn>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+
+</template>
 
 <style scoped>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision a8334f93ed9093a0ad4f6823ef72bf87f38ff49b)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision 3a3a896f297b235a6ddf514046402794f33e6860)
@@ -26,5 +26,5 @@
 
       <p>Average rating...{{restaurantStore.averageRating}}</p>
-      <router-link to="/more_details">
+      <router-link :to="`/more_details/${restaurantStore.id}`">
       <button class="btn btn-dark">More details</button>
       </router-link>
