Index: ReserveNGo-frontend/src/App.vue
===================================================================
--- ReserveNGo-frontend/src/App.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ ReserveNGo-frontend/src/App.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
@@ -1,13 +1,19 @@
+<template>
+  <div class="wrapper">
+    <v-app>
+    <NavBar />
+    <main class="content">
+      <router-view />
+    </main>
+    </v-app>
+  </div>
+</template>
+
 <script>
-//import { RouterLink, RouterView } from 'vue-router'
 import NavBar from './components/Project/Nav_bar_new.vue'
-import Footer_ from '@/components/Project/Footer_.vue'
 import { userStore } from '@/PiniaStores/UserStore.js'
 
 export default {
-  components: {
-    NavBar,
-    Footer_,
-  },
+  components: { NavBar },
   beforeMount() {
     userStore().getLocalStorage()
@@ -16,116 +22,28 @@
 </script>
 
-<template>
-  <!--  <header>
-    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
-      <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-
-  <RouterView />-->
-
-  <div class="wrapper">
-    <NavBar></NavBar>
-    <main>
-      <router-view />
-    </main>
-    <footer>
-      <div class="container-fluid">
-        <div class="row">
-          <Footer_></Footer_>
-        </div>
-      </div>
-    </footer>
-  </div>
-
-  <!--  <Locale_listing_container></Locale_listing_container>
-  <Locale_listing_container></Locale_listing_container>
-  <Locale_listing_container></Locale_listing_container>-->
-</template>
-
-<style scoped>
+<style>
 .wrapper {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
 }
 
-main {
-  flex: 1; /*istrazi*/
-}
-footer {
+nav.navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  z-index: 1000;
   background: #8377d1;
 }
 
-template {
+main.content {
+  flex: 1;
+  overflow: hidden;
+  margin-top: 80px;
   background: #fbfff1;
+  padding-bottom: 80px;
 }
-/*header {
-  line-height: 1.5;
-  max-height: 100vh;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-nav {
-  width: 100%;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 2rem;
-}
-
-nav a.router-link-exact-active {
-  color: var(--color-text);
-}
-
-nav a.router-link-exact-active:hover {
-  background-color: transparent;
-}
-
-nav a {
-  display: inline-block;
-  padding: 0 1rem;
-  border-left: 1px solid var(--color-border);
-}
-
-nav a:first-of-type {
-  border: 0;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}*/
 </style>
Index: serveNGo-frontend/src/components/Project/Footer_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Footer_.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ 	(revision )
@@ -1,82 +1,0 @@
-<script setup>
-
-</script>
-
-<template>
-      <footer>
-        <div class="slogan">
-          <h3>ReserveNGo</h3>
-          <p>Why not make your life easier?</p>
-
-        </div>
-
-        <div class="contact">
-            <p>Contact:</p>
-          <a href="#" class="fa fa-facebook"></a>
-          <a href="#" class="fa fa-instagram"></a>
-          <a href="#" class="fa fa-google"></a>
-        </div>
-      </footer>
-
-
-
-</template>
-
-<style scoped>
-
-/*hr{
-  height: 50px;
-  width: auto;
-}*/
-
-footer{
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 10px 0;
-}
-
-.slogan{
-  font-size: 30px;
-  margin: 20px 0;
-}
-.slogan h3{
-  text-align: center;
-}
-
-.contact{
-  margin: 20px 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.contact p{
-  margin: auto;
-  font-size: 20px;
-}
-
-.fa {
-  padding: 20px;
-  margin-left: 15px;
-  font-size: 20px;
-  width: 20px;
-  text-align: center;
-  text-decoration: none;
-  border-radius: 50%;
-  box-sizing: content-box;
-}
-.fa-facebook {
-  background: #3B5998;
-  color: white;
-}
-.fa-instagram {
-  background: #125688;
-  color: white;
-}
-.fa-google {
-  background: #dd4b39;
-  color: white;
-}
-
-</style>
Index: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
@@ -4,11 +4,11 @@
 
 export default {
+  components: {
+    logout_,
+  },
   data() {
     return {
-      userStore_: userStore(),
+      user: userStore(),
     }
-  },
-  components: {
-    logout_,
   },
 }
@@ -16,47 +16,47 @@
 
 <template>
-  <nav class="navbar navbar-expand-md navbar-light pt-1 pb-1">
-    <div class="container-xxl">
-      <router-link to="/" class="navbar-brand">
-        <img src="/src/assets/rng_logo.png" alt="Logo could not be found." />
-        <span class="fw-bold ms-2"> Reserve And Go </span>
+  <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">
+        <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 class="collapse navbar-collapse justify-content-end align-center" id="main-nav">
-        <ul class="navbar-nav">
-          <li class="nav-item">
-            <router-link
-              v-if="this.userStore_.data.role === 'ROLE_CUSTOMER'"
-              to="/favourite_locals"
-              class="nav-link">
-              Favourite locals
-            </router-link>
+
+      <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>
           </li>
-          <li class="nav-item">
-            <router-link
-              v-if="this.userStore_.data.role === 'ROLE_CUSTOMER'"
-              to="/my_reservations"
-              class="nav-link"
-              >My reservations
-            </router-link>
+
+          <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>
           </li>
-          <li class="nav-item">
+
+          <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">
-              <a v-if="userStore_.data.role !== 'ROLE_ADMIN'">{{userStore_.data.firstName}} {{userStore_.data.lastName}}</a>
+              <i class="fa-solid fa-user"></i>
+              {{ user.data.firstName }} {{ user.data.lastName }}
             </router-link>
           </li>
 
-          <li class="nav-item ms-2 d-none d-md-inline">
-            <router-link to="/login">
-              <a v-if="userStore_.data.role === 'UN_AUTHENTICATED'" class="btn btn-dark">Login</a>
-            </router-link>
-            <router-link to="/register">
-              <a v-if="userStore_.data.role === 'UN_AUTHENTICATED'" class="btn btn-dark ms-2">Register</a>
-            </router-link>
-            <router-link to="/addRestaurant">
-              <a v-if="userStore_.data.role === 'ROLE_ADMIN'" class="btn btn-dark me-2">Add Restaurant</a>
-            </router-link>
-            <logout_></logout_>
+          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
+            <router-link to="/login" class="btn btn-dark me-2">Login</router-link>
           </li>
+
+          <li class="nav-item" v-if="user.data.role === 'UN_AUTHENTICATED'">
+            <router-link to="/register" class="btn btn-dark me-2">Register</router-link>
+          </li>
+
+          <li class="nav-item" v-if="user.data.role === 'ROLE_ADMIN'">
+            <router-link to="/addRestaurant" class="btn btn-dark me-2">Add Restaurant</router-link>
+          </li>
+
+          <li class="nav-item">
+            <logout_ />
+          </li>
+
         </ul>
       </div>
@@ -66,21 +66,15 @@
 
 <style scoped>
-#login {
-  float: right;
-  padding: 2%;
+.navbar-brand span {
+  font-size: 1.25rem;
 }
 
-nav {
-  background: #8377d1;
-  height: 80px;
+.custom-background-nav{
+  background-color: #8377D1;
 }
 
-.btn {
-  height: 40px;
-  margin-top: 5px;
-}
 
-img {
-  height: 70px;
+.navbar-nav .nav-link:hover {
+  color: rgba(255, 255, 255, 0.6) !important;
 }
 </style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
@@ -1,6 +1,3 @@
 <script>
-
-//import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
-
 import { userStore } from '@/PiniaStores/UserStore.js'
 import { useRouter } from 'vue-router'
@@ -9,5 +6,5 @@
   data() {
     return {
-      locale:{
+      locale: {
         id: '',
         name: '',
@@ -29,12 +26,19 @@
     }
   },
+  computed: {
+    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;})
-      .catch(err => console.log("Error in Locale_",err));
+      .then(data => {
+        this.locale = data
+      })
+      .catch(err => console.log("Error in Locale_", err))
   },
-  methods:{
-    addToFavourites(){
+  methods: {
+    addToFavourites() {
       fetch(`http://localhost:8080/api/customer/favourite-locals/add/${this.locale.id}`, {
         method: 'POST',
@@ -44,5 +48,5 @@
       }).catch((error) => console.log(error))
     },
-    removeRestaurant(){
+    removeRestaurant() {
       fetch(`http://localhost:8080/api/admin/delete/${this.locale.id}`, {
         method: 'DELETE',
@@ -54,107 +58,129 @@
     },
   }
-
 }
-/*console.log(restaurantStore().id)*/
-
 </script>
 
 <template>
-  <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 class="locale-details-wrapper py-4 px-3">
+    <div class="container">
+      <div class="row g-4">
+        <!-- Left: Logo -->
+        <div class="col-12 col-md-4">
+          <div class="card shadow-sm">
+            <img
+              :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;"
+              alt="Restaurant Logo"
+            />
+          </div>
+        </div>
 
-      <!-- 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>
+        <!-- Right: Details -->
+        <div class="col-12 col-md-8">
+          <div class="card p-4 shadow-sm">
+            <h3 class="mb-3">{{ locale.name }}</h3>
 
-          <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-3 text-muted">
+              <i class="fas fa-map-marker-alt me-2"></i> {{ locale.address }}
+            </div>
 
-          <div class="mb-2">Address: {{ locale.address }}</div>
+            <!-- Star Rating -->
+            <div class="mb-3 d-flex align-items-center">
+              <div class="text-warning me-2">
+                <i
+                  v-for="n in 5"
+                  :key="n"
+                  :class="[
+                    roundedRating >= n
+                      ? 'fas fa-star'
+                      : roundedRating >= n - 0.5
+                      ? 'fas fa-star-half-alt'
+                      : 'far fa-star'
+                  ]"
+                ></i>
+              </div>
+              <small class="text-muted">({{ locale.averageRating }})</small>
+            </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>
+            <div class="mb-3">
+              <p>{{ locale.description }}</p>
+              <p><strong>Working Hours:</strong> {{ locale.workingHours }}</p>
+              <p><strong>Contact:</strong> {{ locale.contact }}</p>
+              <p>
+                <strong>Menu:</strong>
+                <a v-if="locale.menuLink" :href="locale.menuLink" target="_blank">{{ locale.menuLink }}</a>
+              </p>
+            </div>
 
-<!--          <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>-->
+            <!-- Services -->
+            <div class="mb-4">
+              <h6 class="fw-bold">Services</h6>
+              <div 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>
+            </div>
 
-          <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>
+            <!-- Events -->
+            <div class="mb-4">
+              <h6 class="fw-bold">Events</h6>
+              <div class="d-flex flex-wrap gap-2">
+                <span
+                  v-for="event in locale.events"
+                  :key="event"
+                  class="badge bg-success"
+                >
+                  {{ event }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Main Action Buttons -->
+            <div class="d-flex flex-wrap gap-2 mb-4">
+              <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>
+
+              <router-link to="/" class="btn btn-outline-secondary">
+                <i class="fas fa-arrow-left me-1"></i> Back to Restaurants
+              </router-link>
+            </div>
+
+            <!-- Admin-only Delete Button -->
+            <button
+              v-if="userStore.data.role === 'ROLE_ADMIN'"
+              class="btn btn-outline-danger mt-2"
+              @click="removeRestaurant"
+            >
+              <i class="fas fa-trash me-1"></i> Delete Restaurant
+            </button>
           </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" @click="addToFavourites">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-btn v-if="userStore.data.role === 'ROLE_ADMIN'"
-                 variant="outlined"
-                 class="mx-2 mt-4"
-                 color="danger"
-                 @click="removeRestaurant"
-          >
-            Delete Restaurant
-          </v-btn>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
+.locale-details-wrapper {
+  height: calc(100vh - 80px);
+  overflow-y: auto;
+  background-color: #fbfff1;
+}
 
+.object-fit-cover {
+  object-fit: cover;
+  width: 100%;
+  height: auto;
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
@@ -19,17 +19,39 @@
 
 <template>
-    <div id="container" class="px-5 py-2">
-      <div>{{restaurantStore.logo}}</div>
-      <p>{{restaurantStore.name}}</p>
-      <p>Working hours: {{restaurantStore.workingHours}}</p>
-      <p>Address: {{restaurantStore.address}}</p>
+  <div id="container" class="p-4 py-5 rounded shadow-sm mt-5">
+    <div class="d-flex align-items-center mb-3">
+      <img :src="restaurantStore.logo" alt="Logo" class="me-3" style="width: 60px; height: 60px; object-fit: cover; border-radius: 8px;" />
+      <h4 class="mb-0">{{ restaurantStore.name }}</h4>
+    </div>
 
-      <p>Average rating...{{restaurantStore.averageRating}}</p>
+    <p class="mb-2">
+      <i class="fas fa-clock me-2 text-secondary"></i>
+      <strong>Working hours:</strong> {{ restaurantStore.workingHours }}
+    </p>
+
+    <p class="mb-2">
+      <i class="fas fa-map-marker-alt me-2 text-secondary"></i>
+      <strong>Address:</strong> {{ restaurantStore.address }}
+    </p>
+
+    <p class="mb-3">
+      <i class="fas fa-star me-2 text-warning"></i>
+      <strong>Rating:</strong> {{ restaurantStore.averageRating }}
+    </p>
+
+    <div>
       <router-link :to="`/more_details/${restaurantStore.id}`">
-      <button class="btn btn-dark">More details</button>
+        <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 ms-2">Make reservation</button>
+
+      <button class="btn btn-dark">
+        <i class="fas fa-calendar-check me-1"></i> Make reservation
+      </button>
     </div>
+  </div>
 </template>
+
 
 <style scoped>
@@ -37,10 +59,12 @@
 #container {
 
-  font-size: 20px;
-  margin: 30px auto;
-  border: transparent;
-  /*border-radius: 10px;*/
-  border-left: 3px solid #8377D1;
-  background-color: #FBFFF1;
+  #container {
+    font-size: 1rem;
+    margin: 30px auto;
+    border-left: 3px solid #8377D1;
+    background-color: #FBFFF1;
+    height: 100%;
+  }
+
 
 
Index: ReserveNGo-frontend/src/components/Project/Restaurant/favourite_locals.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/favourite_locals.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/favourite_locals.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
@@ -39,11 +39,17 @@
 <template>
   <div class="container" v-for="local in locals" :key="local">
-    <div class="row border mt-4">
+    <div class="row border mt-4 p-2">
       <div class="col-8">
       <h3>{{ local.name }}</h3>
-      <h3>{{ local.address }}</h3>
+      <h5>{{ local.address }}</h5>
       </div>
-      <div class="col-4">
-        <button class="btn btn-primary" @click="removeRestaurant(local.id)">X</button>
+
+      <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>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
@@ -6,15 +6,13 @@
 <template>
   <div class="container">
-    <div class="row">
-      <div class="col-md-8">
-        <div class="row">
-          <Locale_listing_container></Locale_listing_container>
-        </div>
-        <div class="row"></div>
+    <div class="row" style="height: calc(100vh - 80px); ">
+      <!-- Scrollable left column -->
+      <div class="col-12 col-md-8 overflow-auto listing-column pe-md-5" style="height: 100%;">
+        <Locale_listing_container />
       </div>
-      <div class="col-md-4">
-        <div class="fixed-center">
-          <Locale_details> </Locale_details>
-        </div>
+
+      <!-- Static right column -->
+      <div class="col-12 col-md-4 border-start ps-md-5">
+        <Locale_details />
       </div>
     </div>
@@ -23,10 +21,18 @@
 
 <style scoped>
-.fixed-center {
-  position: fixed;
-  top: 50%;
-  left: 80%;
-  transform: translate(-50%, -50%);
-  z-index: 999;
+
+.listing-column {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  background-color: #fbfff1;
+  overflow-y: scroll;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
+
+.listing-column::-webkit-scrollbar {
+  display: none;
+}
+
 </style>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision 40dedfbd3ee24c4efa2293c334a72d359cbf2b4d)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
@@ -40,15 +40,46 @@
 
 <template>
-  <div id="container" class="row my-3 p-2" :class="{selected : isSelected}" @click="handleClick()">
-    <div class="col info">
-      <h3>{{ local.name }}</h3>
-      <h5>{{ local.address }}</h5>
-      <p>Rating: {{ local.averageRating }}</p>
+  <div
+    id="container"
+    class="row align-items-center my-3 p-3 rounded shadow-sm"
+    :class="{ selected: isSelected }"
+    @click="handleClick"
+  >
+    <!-- Left image/logo -->
+    <div class="col-auto pe-0">
+      <img
+        :src="local.logo"
+        alt="Logo"
+        class="rounded"
+        style="width: 60px; height: 60px; object-fit: cover"
+      />
     </div>
-    <div class="col d-flex justify-content-end align-self-center">
-      <button :class="['fa-heart',isFavorited ? 'fa-solid':'fa-regular',{liked:isFavorited}]" id="like-button" @click="addToFavorites()" v-if="userStore_.data.role !== 'ROLE_ADMIN' && userStore_.data.role !== 'UN_AUTHENTICATED'" ></button>
+
+    <!-- Info section -->
+    <div class="col info ps-3">
+      <h5 class="mb-1 fw-bold">{{ local.name }}</h5>
+      <p class="mb-1 text-muted">
+        <i class="fas fa-map-marker-alt me-1"></i>{{ local.address }}
+      </p>
+      <p class="mb-0 text-muted">
+        <i class="fas fa-star text-warning me-1"></i>{{ local.averageRating }}
+      </p>
+    </div>
+
+    <!-- Favorite button -->
+    <div class="col-auto d-flex align-items-center">
+      <button
+        :class="[
+          'fa-heart',
+          isFavorited ? 'fa-solid liked' : 'fa-regular',
+        ]"
+        id="like-button"
+        @click.stop="addToFavorites"
+        v-if="userStore_.data.role !== 'ROLE_ADMIN' && userStore_.data.role !== 'UN_AUTHENTICATED'"
+      ></button>
     </div>
   </div>
 </template>
+
 
 <style scoped>