Index: ReserveNGo-frontend/src/PiniaStores/UserStore.js
===================================================================
--- ReserveNGo-frontend/src/PiniaStores/UserStore.js	(revision 4a91b0c99668ac6b6c475e9a26829c0dce7b57f4)
+++ ReserveNGo-frontend/src/PiniaStores/UserStore.js	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
@@ -32,4 +32,19 @@
       localStorage.setItem('userData', JSON.stringify(jsonObject));
 
+    },
+    setNewEditedDataToLocalStorage(jsonObject) {
+      const {firstName, lastName, phoneNumber} = jsonObject;
+      this.data.firstName = firstName;
+      this.data.lastName = lastName;
+      this.data.phoneNumber = phoneNumber;
+
+      localStorage.setItem('userData', JSON.stringify(this.data));
+    },
+    setNewEmailToLocalStorage(jsonObject) {
+      const {email, jwt} = jsonObject;
+      this.data.email = email;
+      this.data.token = jwt;
+
+      localStorage.setItem('userData', JSON.stringify(this.data));
     },
     getLocalStorage() {
Index: ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision 4a91b0c99668ac6b6c475e9a26829c0dce7b57f4)
+++ ReserveNGo-frontend/src/components/Project/Customer/Profile_Page.vue	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
@@ -1,8 +1,144 @@
-<script setup lang="ts">
+<script>
+
+import { userStore } from '@/PiniaStores/UserStore.js'
+
+export default {
+
+  data() {
+    return {
+      userStore_: userStore(),
+      newFirstName: "",
+      newLastName: "",
+      newPhoneNumber: "",
+      newEmail: "",
+      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))
+
+    },
+    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))
+
+    },
+    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))
+
+    }
+  }
+
+}
+
 
 </script>
 
 <template>
-  $END$
+
+  <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>
+        </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>
 
Index: ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue
===================================================================
--- ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision 4a91b0c99668ac6b6c475e9a26829c0dce7b57f4)
+++ ReserveNGo-frontend/src/components/Project/Nav_bar_new.vue	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
@@ -42,5 +42,5 @@
           </li>
           <li class="nav-item">
-            <router-link to="/" class="nav-link text-white">
+            <router-link to="/profilePage" class="nav-link text-white">
               <a v-if="userStore_.data.role !== 'ROLE_ADMIN'">{{userStore_.data.firstName}} {{userStore_.data.lastName}}</a>
             </router-link>
Index: ReserveNGo-frontend/src/mixins/userControl.js
===================================================================
--- ReserveNGo-frontend/src/mixins/userControl.js	(revision 4a91b0c99668ac6b6c475e9a26829c0dce7b57f4)
+++ ReserveNGo-frontend/src/mixins/userControl.js	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
@@ -0,0 +1,25 @@
+/*
+
+import { userStore } from '../PiniaStores/UserStore.js'
+
+const userStore_ = userStore()
+
+export default {
+
+  async editSettings() {
+
+    fetch(`http://localhost:8080/api/customer/favourite-locals`, {
+      method: 'GET',
+      headers: {
+        Authorization: this.userStore_.getToken,
+      },
+    })
+      .then((res) => res.json())
+      .then((data) => (this.locals = data))
+      .catch((err) => console.log(err))
+
+  }
+
+
+}
+*/
Index: ReserveNGo-frontend/src/router/index.js
===================================================================
--- ReserveNGo-frontend/src/router/index.js	(revision 4a91b0c99668ac6b6c475e9a26829c0dce7b57f4)
+++ ReserveNGo-frontend/src/router/index.js	(revision 32d195991dcb629ba7c9a86f7ddbc6b7c5add4bc)
@@ -9,4 +9,5 @@
 import Locale_ from '@/components/Project/Restaurant/Locale_.vue'
 import AddRestaurant from "@/components/Project/Admin/AddRestaurant.vue";
+import Profile_Page from '@/components/Project/Customer/Profile_Page.vue'
 
 const router = createRouter({
@@ -51,4 +52,10 @@
       name: 'addRestaurant',
       component: AddRestaurant,
+    },
+    //Profile Page
+    {
+      path: '/profilePage',
+      name: 'profilePage',
+      component: Profile_Page,
     }
   ],