Index: ReserveNGo-frontend/src/components/Project/Admin/AddRestaurant.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Admin/AddRestaurant.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ 	(revision )
@@ -1,54 +1,0 @@
-<script>
-import { useRouter } from 'vue-router'
-import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
-import { userStore } from '@/PiniaStores/UserStore.js'
-import router from '@/router/index.js'
-
-
-export default {
-  data() {
-    return {
-      router: useRouter(),
-      name: '',
-      url: 'http://localhost:8080/api/admin/add',
-      restaurantStore: restaurantStore(),
-      userStore: userStore(),
-    }
-  },
-  methods: {
-    async addRestaurant() {
-      await fetch(this.url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'Authorization': this.userStore.getToken
-        },
-        body: JSON.stringify({
-          name: this.name,
-        })
-      }).then((response) => response.json())
-        .then(json => {this.restaurantStore.newRestaurant(json)})
-        .then(()=>this.router.push('/'))
-
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="container mt-5">
-    <div class="row justify-content-center">
-      <div class="col-4">
-        <form v-on:submit.prevent="addRestaurant">
-          <div class="mb-3">
-            <label for="name" class="form-label" >Restaurant name</label>
-            <input v-model="this.name" type="text" id="name" name="name" class="form-control" placeholder="Name" required>
-          </div>
-          <button type="submit" class="btn btn-primary">Add Restaurant</button>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
Index: ReserveNGo-frontend/src/components/Project/Admin/AdminDashboard.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Admin/AdminDashboard.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
+++ ReserveNGo-frontend/src/components/Project/Admin/AdminDashboard.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -0,0 +1,348 @@
+<script>
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+export default {
+  data() {
+    return {
+      restaurants: [],
+      managers: [],
+      managersForLocal: [],
+      sortKey: '',
+      sortOrder: 'asc',
+      name: '',
+      showAddRestaurantModal: false,
+      showAddManagerModal: false,
+      showEditRestaurantManagersModal: false,
+      selectedLocalId: null,
+      useUserStore: userStore(),
+    }
+  },
+  computed: {
+    sortedRestaurants() {
+      if (!this.sortKey) return this.restaurants;
+
+      return [...this.restaurants].sort((a, b) => {
+        let valueA = a[this.sortKey];
+        let valueB = b[this.sortKey];
+
+        if (this.sortKey === 'createdAt' || this.sortKey === 'modifiedAt') {
+          valueA = new Date(valueA);
+          valueB = new Date(valueB);
+        }
+
+        if (valueA < valueB) return this.sortOrder === 'asc' ? -1 : 1;
+        if (valueA > valueB) return this.sortOrder === 'asc' ? 1 : -1;
+        return 0;
+      });
+    }
+  },
+  methods: {
+    sortBy(key) {
+      if (this.sortKey === key) {
+        this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
+      } else {
+        this.sortKey = key;
+        this.sortOrder = 'asc';
+      }
+    },
+    formatDate(dateStr) {
+      const date = new Date(dateStr);
+      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+    },
+    removeRestaurant(localId) {
+      fetch(`http://localhost:8080/api/admin/delete-local/${localId}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.useUserStore.getToken },
+      })
+        .then((response) => {
+          if (!response.ok) console.log(response);
+          this.fetchRestaurants();
+        })
+        .catch((error) => console.log(error));
+    },
+    fetchRestaurants() {
+      fetch('http://localhost:8080/api/admin/locals', {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': this.useUserStore.getToken
+        },
+      })
+        .then((res) => res.json())
+        .then((data) => (this.restaurants = data))
+        .catch((err) => console.log(err));
+    },
+    fetchManagers() {
+      fetch("http://localhost:8080/api/admin/local-managers", {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.useUserStore.getToken
+        }
+      })
+        .then((res) => res.json())
+        .then((data) => (this.managers = data))
+        .catch((err) => console.log(err));
+    },
+    fetchManagersForRestaurant(localId) {
+      fetch(`http://localhost:8080/api/admin/local-managers/${localId}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.useUserStore.getToken
+        }
+      })
+        .then((res) => res.json())
+        .then((data) => (this.managersForLocal = data))
+        .catch((err) => console.log(err));
+    },
+    assignManager(localId, managerId) {
+      fetch(`http://localhost:8080/api/admin/assign/${localId}/${managerId}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': this.useUserStore.getToken
+        }
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error('Failed to assign manager');
+          this.managers = this.managers.filter(manager => manager.id !== managerId);
+          this.fetchRestaurants();
+          this.fetchManagersForRestaurant(localId);
+        })
+        .catch((error) => console.log(error));
+    },
+    removeManager(localId, managerId) {
+      fetch(`http://localhost:8080/api/admin/remove/${managerId}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': this.useUserStore.getToken
+        }
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error('Failed to remove manager');
+          this.fetchManagersForRestaurant(localId);
+        })
+        .catch((error) => console.log(error));
+    },
+    async addRestaurant() {
+      await fetch('http://localhost:8080/api/admin/add-local', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': this.useUserStore.getToken
+        },
+        body: JSON.stringify({ name: this.name })
+      })
+        .then((response) => {
+          if (!response.ok) throw new Error('Failed to add restaurant');
+          this.fetchRestaurants();
+          this.showAddRestaurantModal = false;
+        })
+        .catch((error) => console.log(error));
+    },
+    openAddManagerModal(localId) {
+      this.selectedLocalId = localId;
+      this.fetchManagers();
+      this.showAddManagerModal = true;
+    },
+    openEditManagersModal(localId) {
+      this.selectedLocalId = localId;
+      this.fetchManagersForRestaurant(localId);
+      this.showEditRestaurantManagersModal = true;
+    }
+  },
+  mounted() {
+    this.fetchRestaurants();
+  },
+}
+</script>
+
+<template>
+  <div class="container mt-4">
+    <h3 class="mb-3">Restaurants Overview</h3>
+
+    <!-- Add Restaurant Modal -->
+    <div v-if="showAddRestaurantModal" class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Add New Restaurant</h5>
+            <button type="button" class="btn-close" @click="showAddRestaurantModal = false"></button>
+          </div>
+          <div class="modal-body">
+            <form @submit.prevent="addRestaurant">
+              <div class="mb-3">
+                <label for="name" class="form-label">Restaurant Name</label>
+                <input v-model="name" type="text" id="name" class="form-control" placeholder="Enter restaurant name" required>
+              </div>
+              <button type="submit" class="btn btn-primary">Add</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add Manager Modal -->
+    <div v-if="showAddManagerModal" class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Assign Manager</h5>
+            <button type="button" class="btn-close" @click="showAddManagerModal = false"></button>
+          </div>
+          <div class="modal-body">
+            <ul class="list-group">
+              <li v-for="manager in managers" :key="manager.id" class="list-group-item d-flex justify-content-between align-items-center">
+                <span>{{ manager.firstName }} {{ manager.lastName }} - {{ manager.email }}</span>
+                <button class="btn btn-sm btn-success" @click="assignManager(selectedLocalId, manager.id)">Add</button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit Managers Modal -->
+    <div v-if="showEditRestaurantManagersModal" class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.5);">
+      <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">Restaurant Managers</h5>
+            <button type="button" class="btn-close" @click="showEditRestaurantManagersModal = false"></button>
+          </div>
+          <div class="modal-body">
+            <ul class="list-group">
+              <li v-for="manager in managersForLocal" :key="manager.id" class="list-group-item d-flex justify-content-between align-items-center">
+                <span>{{ manager.firstName }} {{ manager.lastName }} - {{ manager.email }}</span>
+                <button class="btn btn-sm btn-danger" @click="removeManager(selectedLocalId, manager.id)">Remove</button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Restaurants Table -->
+    <div class="table-responsive shadow-sm table-container">
+      <table class="table table-striped table-hover align-middle">
+        <thead class="table-light">
+        <tr>
+          <th style="width: 80px;">Logo</th>
+          <th style="width: 200px; cursor: pointer;" @click="sortBy('localName')">
+            Name
+            <span v-if="sortKey === 'localName'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
+          </th>
+          <th style="width: 180px; cursor: pointer;" @click="sortBy('createdAt')">
+            Created At
+            <span v-if="sortKey === 'createdAt'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
+          </th>
+          <th style="width: 180px; cursor: pointer;" @click="sortBy('modifiedAt')">
+            Modified At
+            <span v-if="sortKey === 'modifiedAt'">{{ sortOrder === 'asc' ? '↑' : '↓' }}</span>
+          </th>
+          <th class="text-end" style="width: 220px;">Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="restaurant in sortedRestaurants" :key="restaurant.localId">
+          <td>
+            <img
+              v-if="restaurant.localLogo"
+              :src="restaurant.localLogo"
+              alt="Logo"
+              class="img-thumbnail"
+              style="width: 40px; height: 40px; object-fit: cover;"
+            />
+            <span v-else class="text-muted">No Logo</span>
+          </td>
+          <td class="text-truncate">{{ restaurant.localName }}</td>
+          <td>{{ formatDate(restaurant.createdAt) }}</td>
+          <td>{{ formatDate(restaurant.modifiedAt) }}</td>
+          <td class="text-end">
+            <div class="d-flex justify-content-end gap-2 flex-wrap">
+              <button class="btn btn-sm btn-primary" @click="openAddManagerModal(restaurant.localId)">Add Manager</button>
+              <button class="btn btn-sm btn-primary" @click="openEditManagersModal(restaurant.localId)">Edit Managers</button>
+              <button class="btn btn-sm btn-outline-danger" @click="removeRestaurant(restaurant.localId)">
+                <i class="fas fa-trash-alt"></i> Delete restaurant
+              </button>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Add Restaurant Button -->
+    <button class="btn btn-success mt-3" @click="showAddRestaurantModal = true">
+      + Add Restaurant
+    </button>
+  </div>
+</template>
+
+<style scoped>
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  overflow: hidden;
+}
+
+.table-container {
+  flex: 1 1 auto;
+  overflow-y: auto;
+}
+
+table {
+  font-size: 0.95rem;
+  table-layout: fixed;
+  width: 100%;
+}
+
+th,
+td {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+thead th {
+  position: sticky;
+  top: 0;
+  background-color: #f8f9fa;
+  z-index: 2;
+  user-select: none;
+}
+
+th span {
+  margin-left: 5px;
+  font-size: 0.8rem;
+}
+
+td img {
+  display: block;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modal {
+  display: block;
+}
+</style>
Index: ReserveNGo-frontend/src/components/Project/Auth/login_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Auth/login_.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -1,72 +1,97 @@
 <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';
 
 export default {
   data() {
     return {
-      form_info:{
+      form_info: {
         email: '',
         password: ''
       },
+      url: 'http://localhost:8080/api/auth/login',
+      userStore_: userStore(),
+      router: useRouter(),
+      managerLocalId: "",
+    };
+  },
+  methods: {
+    async makeLogin() {
+      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,
+          }),
+        });
 
-      url: 'http://localhost:8080/api/auth/login',
+        const json = await response.json();
 
-      userStore_: userStore(),
+        this.userStore_.setLocalStorage(json);
 
-      router: useRouter()
+        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();
+        } else {
+          router.push('/');
+        }
+      } catch (error) {
+        console.error('Login error:', error);
+      }
+    },
+    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())
+        .then((data) => (this.managerLocalId = data.id))
+        .then(()=>router.push(`/more_details/${this.managerLocalId}`))
+        .catch((err) => console.log(err));
 
     }
-  },
-  methods: {
-   async makeLogin() {
 
-      await fetch(this.url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json'},
-        body: JSON.stringify({
-          email: this.form_info.email,
-          password: this.form_info.password,
-        })
-      }).then((response) => response.json())
-        .then(json => {this.userStore_.setLocalStorage(json);
-                        router.push('/')})
-
-    }
   }
-}
-
+};
 </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%;">
+      <h3 class="text-center mb-4">Login</h3>
+      <form @submit.prevent="makeLogin">
+        <div class="mb-3">
+          <label for="email" class="form-label">Email address</label>
+          <input
+            v-model="form_info.email"
+            type="text"
+            class="form-control"
+            id="email"
+            placeholder="Enter your email"
+            required
+          >
+        </div>
 
+        <div class="mb-3">
+          <label for="password" class="form-label">Password</label>
+          <input
+            v-model="form_info.password"
+            type="password"
+            class="form-control"
+            id="password"
+            placeholder="Enter your password"
+            required
+          >
+        </div>
 
-  <div class="container-xxl">
-
-    <div class="row justify-content-center  ">
-<!--      <form  v-on:submit.prevent="makeLogin">-->
-<!--      <form action="http://localhost:8080/api/auth/login" method="POST">-->
-      <div class="col-3">
-        <form  v-on:submit.prevent="makeLogin">
-
-      <label  for="email" class="form-label">Email</label>
-      <input v-model="this.form_info.email" name="email" id="email" class="form-control" type="text">
-
-      <label for="password" class="form-label">Password</label>
-      <input v-model="this.form_info.password" name="password" id="password" type="password" class="form-control">
-
-        <button type="submit" class="btn btn-dark mt-2">Login</button>
-        </form>
-      </div>
-
-
-
+        <button type="submit" class="btn btn-dark w-100">Login</button>
+      </form>
     </div>
-
-
   </div>
 </template>
Index: ReserveNGo-frontend/src/components/Project/Auth/register_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Auth/register_.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Auth/register_.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -1,8 +1,6 @@
 <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';
 
 export default {
@@ -11,6 +9,5 @@
       path: '',
       url: 'http://localhost:8080/api/auth/register/',
-
-      form_info:{
+      form_info: {
         firstName: '',
         lastName: '',
@@ -18,21 +15,23 @@
         password: '',
         phoneNumber: '',
-
       },
-     /* data: {
-        id: 0,
-        firstName: "",
-        lastName: "",
-        email: "",
-        phoneNumber: "",
-        role: "",
-        token: ""
-      },*/
       userStore_: userStore(),
-      router: useRouter()
-
-    }
+      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,
+      });
+    },
+  },
   methods: {
     async register() {
@@ -45,6 +44,6 @@
           email: this.form_info.email,
           password: this.form_info.password,
-          phoneNumber: this.form_info.phoneNumber
-        })
+          phoneNumber: this.form_info.phoneNumber,
+        }),
       })
         .then((response) => response.json())
@@ -53,80 +52,122 @@
           router.push('/');
         });
-    //console.log("Data received:", this.data);
-          //this.userStore_.setLocalStorage(json)
-        //console.log(json)
-
-     //console.log(this.userStore_.data)
-    }
-
+    },
   },
-  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})
-    }
-  }
-
-
-}
-
-
-
+};
 </script>
 
 <template>
-  <div class="container-xxl">
-    <div class="row justify-content-center">
+  <div class="register-page-wrapper d-flex flex-column h-100">
+    <div class="flex-grow-1 overflow-auto">
+      <div class="container py-4">
+        <div class="row justify-content-center">
+          <div class="col-md-6 col-lg-5">
+            <div class="card shadow-sm border-0">
+              <div class="card-body p-4">
+                <h3 class="mb-4 text-center">Register</h3>
+                <form @submit.prevent="register" method="POST">
 
-<!--      <form @submit.prevent="register" method="POST">-->
-<!--      <form v-bind:action="wholeUrl" method="POST">-->
+                  <div class="mb-3">
+                    <label for="name" class="form-label">First Name</label>
+                    <input
+                      v-model="form_info.firstName"
+                      type="text"
+                      id="name"
+                      name="firstName"
+                      class="form-control"
+                      placeholder="Enter your first name"
+                      required
+                    />
+                  </div>
 
-  <div class="col-3">
-    <form @submit.prevent="register" method="POST">
-      <label for="name" class="form-label" >Name</label>
-      <input v-model="this.form_info.firstName" type="text" id="name" name="firstName" class="form-control" placeholder="Name" required>
+                  <div class="mb-3">
+                    <label for="surname" class="form-label">Last Name</label>
+                    <input
+                      v-model="form_info.lastName"
+                      type="text"
+                      id="surname"
+                      name="lastName"
+                      class="form-control"
+                      placeholder="Enter your last name"
+                      required
+                    />
+                  </div>
 
-      <label for="surname" class="form-label">Surname</label>
-      <input v-model="form_info.lastName" type="text" id="surname" name="lastName" class="form-control" placeholder="Surname" required>
+                  <div class="mb-3">
+                    <label for="phone_number" class="form-label">Phone Number</label>
+                    <input
+                      v-model="form_info.phoneNumber"
+                      type="text"
+                      id="phone_number"
+                      name="phoneNumber"
+                      class="form-control"
+                      placeholder="e.g., +38912345678"
+                      required
+                    />
+                  </div>
 
-      <label for="phone_number" class="form-label">Phone Number</label>
-      <input v-model="form_info.phoneNumber" type="text" id="phone_number" name="phoneNumber" class="form-control" required>
+                  <div class="mb-3">
+                    <label for="email" class="form-label">Email Address</label>
+                    <input
+                      v-model="form_info.email"
+                      type="email"
+                      id="email"
+                      name="email"
+                      class="form-control"
+                      placeholder="someone@example.com"
+                      required
+                    />
+                  </div>
 
-      <label for="email" class="form-label">Email Address</label>
-      <input v-model="form_info.email" type="email" id="email" name="email" class="form-control" placeholder="someone@example.com" required>
+                  <div class="mb-3">
+                    <label for="password" class="form-label">Password</label>
+                    <input
+                      v-model="form_info.password"
+                      type="password"
+                      id="password"
+                      name="password"
+                      class="form-control"
+                      placeholder="Enter a strong password"
+                      required
+                    />
+                  </div>
 
-      <label for="password" class="form-label">Password</label>
-      <input v-model="form_info.password" type="password" id="password" name="password" class="form-control">
+                  <div class="mb-4">
+                    <label for="role" class="form-label">Role</label>
+                    <select
+                      class="form-select"
+                      id="role"
+                      v-model="path"
+                      required
+                    >
+                      <option value="" disabled>Select a role</option>
+                      <option value="customer">Customer</option>
+                      <option value="local-worker">Local Worker</option>
+                      <option value="local-manager">Local Manager</option>
+                    </select>
+                  </div>
 
-      <label for="role" class="form-label">Role</label>
-      <select class="form-control" id="role" v-model="path">
+                  <div class="d-grid">
+                    <button type="submit" class="btn btn-dark">Register</button>
+                  </div>
 
-        <option value="customer">Customer</option>
-
-        <option value="local-worker">Local Worker</option>
-
-        <option value="local-manager">Local Manager</option>
-
-      </select>
-
-      <button type="submit" class="btn btn-dark">Register</button>
-    </form>
+                </form>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-
-    </div>
-
-
   </div>
-
 </template>
 
 <style scoped>
+html, body, .register-page-wrapper {
+  height: 100%;
+  overflow: hidden;
+}
 
+.flex-grow-1 {
+  min-height: 0; /* Necessary for flexbox scroll containers */
+}
 </style>
Index: ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -1,8 +1,6 @@
 <script>
-
-import { userStore } from '@/PiniaStores/UserStore.js'
+import { userStore } from '@/PiniaStores/UserStore.js';
 
 export default {
-
   data() {
     return {
@@ -14,134 +12,216 @@
       newPassword: "",
       currentPassword: "",
-    }
+    };
   },
   methods: {
     async updateProfileSettings() {
-
-      await fetch("http://localhost:8080/api/user/edit", {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json',
-                    'Authorization': this.userStore_.getToken},
-        body: JSON.stringify({
-          firstName: this.newFirstName,
-          lastName: this.newLastName,
-          phoneNumber: this.newPhoneNumber
-        })
-      }).then((response) => response.json())
-        .then(json => {this.userStore_.setNewEditedDataToLocalStorage(json)})
-        .catch(err => console.log(err))
-
+      try {
+        const response = await fetch("http://localhost:8080/api/user/edit", {
+          method: 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': this.userStore_.getToken
+          },
+          body: JSON.stringify({
+            firstName: this.newFirstName,
+            lastName: this.newLastName,
+            phoneNumber: this.newPhoneNumber
+          })
+        });
+        const json = await response.json();
+        this.userStore_.setNewEditedDataToLocalStorage(json);
+      } catch (err) {
+        console.log(err);
+      }
     },
     async updateEmail() {
-
-      await fetch("http://localhost:8080/api/user/change-email", {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json',
-          'Authorization': this.userStore_.getToken},
-        body: JSON.stringify({
-          newEmail: this.newEmail,
-        })
-      }).then((response) => response.json())
-        .then(json => {this.userStore_.setNewEmailToLocalStorage(json)})
-        .catch(err => console.log(err))
-
+      try {
+        const response = await fetch("http://localhost:8080/api/user/change-email", {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': this.userStore_.getToken
+          },
+          body: JSON.stringify({ newEmail: this.newEmail })
+        });
+        const json = await response.json();
+        this.userStore_.setNewEmailToLocalStorage(json);
+      } catch (err) {
+        console.log(err);
+      }
     },
     async updatePassword() {
-
-      await fetch("http://localhost:8080/api/user/change-password", {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json',
-          'Authorization': this.userStore_.getToken},
-        body: JSON.stringify({
-          currentPassword : this.currentPassword,
-          newPassword : this.newPassword,
-        })
-      }).then((response) => console.log(response))
-        .catch(err => console.log(err))
-
+      try {
+        await fetch("http://localhost:8080/api/user/change-password", {
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': this.userStore_.getToken
+          },
+          body: JSON.stringify({
+            currentPassword: this.currentPassword,
+            newPassword: this.newPassword,
+          })
+        });
+      } catch (err) {
+        console.log(err);
+      }
     }
   }
-
-}
-
-
+};
 </script>
 
 <template>
-
-  <div class="container-fluid d-flex justify-content-center">
-  <div style="max-width: 500px; background-color: #f1f1f1" class="rounded-2 p-5 d-flex justify-content-between gap-5">
-
-    <div class="d-flex flex-column gap-2">
-  <img class="border rounded-circle" width="100" height="100" src="../../ectd/easy-american-pancake-recipe.jpg" alt="Pancake Here">
-      <!-- Button trigger modal -->
-      <button style="font-size: 0.8rem" type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">
-        Edit Profile
-      </button>
-
-      <!-- Modal -->
-      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-        <div class="modal-dialog" role="document">
-          <div class="modal-content">
-
-            <div class="modal-header">
-              <h5 class="modal-title" id="exampleModalLabel">Edit Profile</h5>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-
-            <div class="modal-body">
-              <div class="d-flex mb-3">
-                <span>First Name: </span> <input v-model="this.newFirstName" class="form-control" type="text" :placeholder="userStore_.data.firstName">
-              </div>
-              <div class="d-flex mb-3">
-              <span>Last Name: </span> <input v-model="this.newLastName" class="form-control" type="text" :placeholder="userStore_.data.lastName">
-              </div>
-
-              <div class="d-flex">
-                <span>Phone Number: </span> <input v-model="this.newPhoneNumber" class="form-control" type="text" :placeholder="userStore_.data.phoneNumber">
-              </div>
-
-              <button @click="this.updateProfileSettings()" type="button" data-bs-dismiss="modal" class="btn btn-dark mt-3">Change Details</button>
-
-            </div>
-
-            <div class="modal-body">
-              <div class="d-flex p-2 g-2">
-                <span>Email: </span> <input v-model="this.newEmail" class="form-control" type="text" :placeholder="userStore_.data.email">
-                <button @click="this.updateEmail()" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Change Email</button>
-              </div>
-              <div class="d-flex p-2 g-2">
-                <span>Current Password: </span> <input v-model="this.currentPassword" class="form-control" type="text">
-                <span>New Password: </span> <input v-model="this.newPassword" class="form-control" type="text">
-                <button @click="this.updatePassword()" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Reset Password</button>
-              </div>
-
-            </div>
-
+  <div class="container my-5">
+    <div class="row justify-content-center">
+      <div class="col-md-8 col-lg-6">
+        <div class="card shadow-sm p-4">
+          <div class="d-flex align-items-center justify-content-center mb-4">
+            <div class="d-flex align-items-center justify-content-center">
+            <img
+              class="rounded-circle border me-3 "
+              src="../../ectd/easy-american-pancake-recipe.jpg"
+              alt="Profile Picture"
+              width="100"
+              height="100"
+            />
+            </div>
+
+          </div>
+
+          <h4>{{ userStore_.data.firstName }} {{ userStore_.data.lastName }}</h4>
+          <p><strong>Email:</strong> {{ userStore_.data.email }}</p>
+          <p><strong>Phone Number:</strong> {{ userStore_.data.phoneNumber }}</p>
+
+          <button
+            type="button"
+            class="btn btn-dark btn-sm"
+            data-bs-toggle="modal"
+            data-bs-target="#editProfileModal"
+          >
+            Edit Profile
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="editProfileModal"
+      tabindex="-1"
+      aria-labelledby="editProfileModalLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="editProfileModalLabel">Edit Profile</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+
+          <div class="modal-body">
+            <!-- Edit Name and Phone -->
+            <h6>Personal Details</h6>
+            <div class="mb-3">
+              <label for="firstName" class="form-label">First Name</label>
+              <input
+                v-model="newFirstName"
+                type="text"
+                id="firstName"
+                class="form-control"
+                :placeholder="userStore_.data.firstName"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="lastName" class="form-label">Last Name</label>
+              <input
+                v-model="newLastName"
+                type="text"
+                id="lastName"
+                class="form-control"
+                :placeholder="userStore_.data.lastName"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="phoneNumber" class="form-label">Phone Number</label>
+              <input
+                v-model="newPhoneNumber"
+                type="text"
+                id="phoneNumber"
+                class="form-control"
+                :placeholder="userStore_.data.phoneNumber"
+              />
+            </div>
+
+            <button
+              @click="updateProfileSettings()"
+              type="button"
+              class="btn btn-dark w-100 mb-4"
+              data-bs-dismiss="modal"
+            >
+              Save Changes
+            </button>
+
+            <!-- Change Email -->
+            <h6>Change Email</h6>
+            <div class="input-group mb-3">
+              <input
+                v-model="newEmail"
+                type="text"
+                class="form-control"
+                placeholder="New Email"
+              />
+              <button
+                @click="updateEmail()"
+                type="button"
+                class="btn btn-secondary"
+                data-bs-dismiss="modal"
+              >
+                Update Email
+              </button>
+            </div>
+
+            <!-- Change Password -->
+            <h6>Change Password</h6>
+            <div class="mb-2">
+              <label for="currentPassword" class="form-label">Current Password</label>
+              <input
+                v-model="currentPassword"
+                type="password"
+                id="currentPassword"
+                class="form-control"
+              />
+            </div>
+
+            <div class="mb-3">
+              <label for="newPassword" class="form-label">New Password</label>
+              <input
+                v-model="newPassword"
+                type="password"
+                id="newPassword"
+                class="form-control"
+              />
+            </div>
+
+            <button
+              @click="updatePassword()"
+              type="button"
+              class="btn btn-secondary w-100"
+              data-bs-dismiss="modal"
+            >
+              Change Password
+            </button>
           </div>
         </div>
       </div>
-
-      <!-- Modal END -->
-
     </div>
-
-    <div class="d-flex flex-column gap-2">
-      <span class="display-5">{{userStore_.data.firstName}}</span>
-      <span class="display-5">{{userStore_.data.lastName}}</span>
-      <span><b>Email:</b> {{userStore_.data.email}}</span>
-      <span><b>Phone Number:</b> {{userStore_.data.phoneNumber}}</span>
-    </div>
-
   </div>
-
-  </div>
-
-
-
-
 </template>
 
 <style scoped>
 
+
 </style>
Index: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -10,6 +10,26 @@
     return {
       user: userStore(),
+      managerLocalId:"",
     }
   },
+  methods: {
+    fetchLocalForManager(){
+      fetch("http://localhost:8080/api/local-manager/my-local",{
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.user.getToken
+        },
+      }).then((res) => res.json())
+        .then((data) => (this.managerLocalId = data.id))
+        .catch((err) => console.log(err));
+
+    }
+  },
+  mounted() {
+    if(this.user && this.user.data.role==="ROLE_LOCAL_MANAGER"){
+      this.fetchLocalForManager();
+    }
+  }
 }
 </script>
@@ -35,4 +55,11 @@
           </li>
 
+          <li class="nav-item pe-3" v-if="user.data.role === 'ROLE_ADMIN'">
+            <router-link to="/admin-dashboard" class="nav-link text-black">Dashboard</router-link>
+          </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>
+          </li>
+
           <li class="nav-item" v-if="user.data.role !== 'ROLE_ADMIN' && user.data.role !== 'UN_AUTHENTICATED'">
 
@@ -49,8 +76,4 @@
           <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>
 
@@ -71,5 +94,5 @@
 
 .custom-background-nav{
-  background-color: #8377D1;
+  background-color: #5EA5BC;
 }
 
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -47,13 +47,4 @@
         },
       }).catch((error) => console.log(error))
-    },
-    removeRestaurant() {
-      fetch(`http://localhost:8080/api/admin/delete/${this.locale.id}`, {
-        method: 'DELETE',
-        headers: {
-          Authorization: this.userStore.getToken,
-        },
-      }).catch((error) => console.log(error))
-        .then(() => this.router.push('/'))
     },
   }
@@ -144,9 +135,9 @@
             <!-- Main Action Buttons -->
             <div class="d-flex flex-wrap gap-2 mb-4">
-              <button class="btn btn-dark">
+              <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" @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>
@@ -156,13 +147,4 @@
               </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>
@@ -176,5 +158,5 @@
   height: calc(100vh - 80px);
   overflow-y: auto;
-  background-color: #fbfff1;
+  background-color: #f3f5f8;
 }
 
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_details.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -63,5 +63,5 @@
     margin: 30px auto;
     border-left: 3px solid #8377D1;
-    background-color: #FBFFF1;
+    background-color: #fff;
     height: 100%;
   }
Index: ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/Locale_listing_container.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -1,9 +1,9 @@
 <script>
-import Local_in_local_listing from '@/components/Project/Restaurant/local_in_local_listing.vue'
+import LocalInLocalListing from '@/components/Project/Restaurant/local_in_local_listing.vue'
 import { defineComponent } from 'vue'
 import { userStore } from '@/PiniaStores/UserStore.js'
 
 export default defineComponent({
-  components: { Local_in_local_listing },
+  components: { LocalInLocalListing },
 
   data() {
@@ -13,47 +13,46 @@
       userStore: userStore(),
       selectedLocalId: null,
+      hoveredLocalId: null,
     }
   },
+
+
+
   methods: {
     toggleFavourite(id) {
-      if (this.favourite_locals.includes(id)) {
-        fetch(`http://localhost:8080/api/customer/favourite-locals/remove/${id}`, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: this.userStore.getToken,
-          },
+      const isFav = this.favourite_locals.includes(id)
+      const url = `http://localhost:8080/api/customer/favourite-locals/${isFav ? 'remove' : 'add'}/${id}`
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: this.userStore.getToken,
+        },
+      })
+        .then(() => {
+          if (isFav) {
+            this.favourite_locals = this.favourite_locals.filter(fav => fav !== id)
+          } else {
+            this.favourite_locals.push(id)
+          }
         })
-          .then(() => {this.favourite_locals= this.favourite_locals.filter(fav => fav !== id)})
-          .catch((err) => console.log(err))
-
-      } else {
-        fetch(`http://localhost:8080/api/customer/favourite-locals/add/${id}`, {
-          method: 'POST',
-          headers: {
-            Authorization: this.userStore.getToken,
-          },
-        }).catch((error) => console.log(error))
-          .then(this.favourite_locals.push(id))
-
-      }
+        .catch(err => console.log(err))
     },
   },
+
   mounted() {
     fetch('http://localhost:8080/api/locals')
-      .then((res) => res.json())
-      .then((data) => (this.locals = data))
-      .catch((err) => console.log(err))
-    fetch(`http://localhost:8080/api/customer/favourite-locals`, {
-      method: 'GET',
+      .then(res => res.json())
+      .then(data => (this.locals = data))
+      .catch(err => console.log(err))
+
+    fetch('http://localhost:8080/api/customer/favourite-locals', {
       headers: {
         Authorization: this.userStore.getToken,
       },
     })
-      .then((res) => res.json())
-      .then((data) => (this.favourite_locals = data.map(local => local.id)))
-      .catch((err) => console.log(err))
-
-    console.log(this.favourite_locals)
+      .then(res => res.json())
+      .then(data => (this.favourite_locals = data.map(local => local.id)))
+      .catch(err => console.log(err))
   },
 })
@@ -61,14 +60,15 @@
 
 <template>
-  <div id="container" class="">
-    <div>
-      <Local_in_local_listing
-        v-for="local in locals"
-        :key="local"
+  <div id="container">
+    <div v-for="local in locals" :key="local.id">
+      <LocalInLocalListing
         :local="local"
         :isFavorited="favourite_locals.includes(local.id)"
+        :isSelected="selectedLocalId === local.id"
+        :isHovered="hoveredLocalId === local.id"
+        @select="selectedLocalId = local.id"
+        @hover-enter="hoveredLocalId = local.id"
+        @hover-leave="hoveredLocalId = null"
         @toggle-favourite="toggleFavourite"
-        :isSelected="selectedLocalId === local.id"
-        @select="selectedLocalId = local.id"
       />
     </div>
Index: ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/home_.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -1,18 +1,75 @@
 <script setup>
+import { ref } from 'vue'
 import Locale_listing_container from '@/components/Project/Restaurant/Locale_listing_container.vue'
-import Locale_details from '@/components/Project/Restaurant/Locale_details.vue'
+
+const selectedFilters = ref([])
+
+const filterOptions = [
+  'Open Now',
+  'Top Rated',
+  'Nearby'
+]
 </script>
 
 <template>
-  <div class="container">
-    <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 class="container-fluid px-0">
+    <div class="row justify-content-center">
+
+      <!-- Sticky Search and Filter Bar outside scroll area -->
+      <div class="col-12 col-md-8 search-bar sticky-top shadow-sm px-3 py-3">
+        <div class="row g-2 align-items-center">
+
+          <!-- Search Bar -->
+          <div class="col-12 col-md-6">
+            <input type="text" class="form-control" placeholder="Search locales...">
+          </div>
+
+          <!-- Sort By Dropdown -->
+          <div class="col-6 col-md-3">
+            <select class="form-select">
+              <option selected disabled>Sort by</option>
+              <option>Name (A-Z)</option>
+              <option>Name (Z-A)</option>
+              <option>Rating</option>
+              <option>Newest</option>
+            </select>
+          </div>
+
+          <!-- Filter Dropdown with Checkboxes -->
+          <div class="col-6 col-md-3">
+            <div class="dropdown">
+              <button
+                class="btn btn-outline-secondary dropdown-toggle w-100"
+                type="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                Filter
+              </button>
+              <ul class="dropdown-menu p-2" style="min-width: 200px;">
+                <li v-for="option in filterOptions" :key="option">
+                  <div class="form-check">
+                    <input
+                      class="form-check-input"
+                      type="checkbox"
+                      :id="option"
+                      :value="option"
+                      v-model="selectedFilters"
+                    >
+                    <label class="form-check-label" :for="option">
+                      {{ option }}
+                    </label>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+        </div>
       </div>
 
-      <!-- Static right column -->
-      <div class="col-12 col-md-4 border-start ps-md-5">
-        <Locale_details />
+      <!-- Scrollable List Below Sticky Filter Bar -->
+      <div class="col-12 col-md-8 listing-column">
+        <Locale_listing_container />
       </div>
     </div>
@@ -21,11 +78,14 @@
 
 <style scoped>
+.search-bar {
+  background-color: #f3f5f8;
+  z-index: 1050;
+}
 
 .listing-column {
-  padding-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  background-color: #fbfff1;
-  overflow-y: scroll;
+  height: calc(100vh - 80px - 96px); /* 80px for navbar + 96px for search bar */
+  overflow-y: auto;
+  background-color: #f3f5f8;
+  padding: 1rem;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -35,4 +95,3 @@
   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 e5d4845fda4c417f1d993f0faa39a91843c4e46e)
+++ ReserveNGo-frontend/src/components/Project/Restaurant/local_in_local_listing.vue	(revision f153db4398a08b0cf618de053ec6bb76de1332d4)
@@ -1,7 +1,14 @@
 <script>
+import { userStore } from '@/PiniaStores/UserStore.js'
 import { restaurantStore } from '@/PiniaStores/restaurantStore.js'
-import { userStore } from '@/PiniaStores/UserStore.js'
 
 export default {
+  props: {
+    local: { type: Object, required: true },
+    isFavorited: Boolean,
+    isSelected: Boolean,
+    isHovered: Boolean,
+  },
+
   data() {
     return {
@@ -9,16 +16,9 @@
     }
   },
-  props: {
-    local: {
-      required: true,
-    },
-    isFavorited: Boolean,
-    isSelected: Boolean,
-  },
 
   methods: {
     handleClick() {
-      let restaurantStore_ = restaurantStore()
-      restaurantStore_.setRestaurant(
+      const store = restaurantStore()
+      store.setRestaurant(
         this.local.id,
         this.local.name,
@@ -31,7 +31,12 @@
       this.$emit('select', this.local.id)
     },
-    async addToFavorites() {
-      console.log('button clicked')
+    addToFavorites() {
       this.$emit('toggle-favourite', this.local.id)
+    },
+    handleMouseEnter() {
+      this.$emit('hover-enter')
+    },
+    handleMouseLeave() {
+      this.$emit('hover-leave')
     },
   },
@@ -44,7 +49,9 @@
     class="row align-items-center my-3 p-3 rounded shadow-sm"
     :class="{ selected: isSelected }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
     @click="handleClick"
   >
-    <!-- Left image/logo -->
+    <!-- Logo -->
     <div class="col-auto pe-0">
       <img
@@ -56,9 +63,12 @@
     </div>
 
-    <!-- Info section -->
+    <!-- Info -->
     <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-1 text-muted">
+        <i class="fas fa-clock me-2 text-secondary"></i>{{ local.workingHours }}
       </p>
       <p class="mb-0 text-muted">
@@ -67,24 +77,42 @@
     </div>
 
-    <!-- Favorite button -->
+    <!-- Buttons -->
     <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>
+      <transition name="fade">
+        <div
+          class="button-group d-flex align-items-center"
+          v-if="isHovered || isSelected"
+        >
+          <button
+            v-if="userStore_.data.role === 'ROLE_CUSTOMER'"
+            :class="['fa-heart', isFavorited ? 'fa-solid liked' : 'fa-regular']"
+            id="like-button"
+            @click.stop="addToFavorites"
+          ></button>
+
+          <div class="action-buttons ms-2 d-flex align-items-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
+              v-if="userStore_.data.role === 'ROLE_CUSTOMER'"
+              class="btn btn-dark"
+            >
+              <i class="fas fa-calendar-check me-1"></i> Make reservation
+            </button>
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
 
-
 <style scoped>
 #container {
   border-left: 3px solid transparent;
-  background: #fbfff1;
+  background: #fff;
   transition: all 0.2s ease;
   cursor: pointer;
@@ -93,5 +121,5 @@
 
 #container:not(.selected) {
-  border-left-color: #8377d1;
+  border-left-color: #5EA5BC;
 }
 
@@ -101,6 +129,6 @@
 }
 
-#container.selected{
-  background-color: #f9f9f9;
+#container.selected {
+  background-color: #fff;
 }
 
@@ -112,38 +140,44 @@
   width: 100%;
   height: 100%;
-  border: 3px solid #8377d1;
+  border: 3px solid #5EA5BC;
   border-radius: 8px;
   animation: drawBorder 0.3s linear forwards;
   pointer-events: none;
   z-index: 1;
-
 }
 
 @keyframes drawBorder {
   0% {
-    clip-path: polygon(
-      0 0, 0 0, 0 0, 0 0
-    );
+    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
   }
   25% {
-    clip-path: polygon(
-      0 0, 100% 0, 100% 0, 0 0
-    );
+    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   50% {
-    clip-path: polygon(
-      0 0, 100% 0, 100% 100%, 0 0
-    );
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
   }
   75% {
-    clip-path: polygon(
-      0 0, 100% 0, 100% 100%, 0 100%
-    );
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   100% {
-    clip-path: polygon(
-      0 0, 100% 0, 100% 100%, 0 100%
-    );
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
+}
+
+.button-group {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  height: 60px;
+  align-items: center;
+}
+
+#like-button {
+  font-size: 24px;
+  color: gray;
+  background: none;
+  border: none;
+  cursor: pointer;
+  height: 100%;
+  display: flex;
+  align-items: center;
 }
 
@@ -152,9 +186,11 @@
 }
 
-.fa-heart {
-  cursor: pointer;
-  font-size: 24px;
-  transition: color 0.3s ease;
-  color: gray;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }
 </style>
