diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 5bda23e..fe5f02b 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -30,9 +30,8 @@
           <router-view />
         </ul>
 
-        <button class="btn btn-outline-secondary me-2" type="submit">
-          Profil
-        </button>
+      <router-link class="btn btn-outline-secondary me-2" to="/profile">Profil</router-link>
+
         <button class="btn btn-primary" type="submit" @click="doLogout">
           Logout
         </button>
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
new file mode 100644
index 0000000..a0e006d
--- /dev/null
+++ b/src/components/Profile.vue
@@ -0,0 +1,32 @@
+<template>
+  <Navbar />
+
+  <div class="container" style="height: 100vh">
+    <div class="card">
+      <div class="card-header">Profil</div>
+      <div class="card-body">
+        <p>nama</p>
+        <p>email</p>
+        <p>ic</p>
+      </div>
+      <div class="card-footer">
+        <p>*Sila hubungi *** jika terdapat masalah</p>
+      </div>
+    </div>
+    <div>
+      <Footer />
+    </div>
+  </div>
+</template>
+
+<script>
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+
+export default {
+  components: {
+    Navbar,
+    Footer,
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index c2d2aa2..197b78e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import Dashboard from './../components/Dashboard.vue';
 import Cart from './../components/Cart.vue';
 import List from './../components/List.vue'
 import Pay from './../components/Pay.vue'
+import Profile from './../components/Profile.vue'
 
 const routes = [
     {
@@ -47,6 +48,13 @@ const routes = [
         component: Pay,
         meta: { requiresAuth: true }
 
+    },
+    {
+        path: '/profile',
+        name: 'Profile',
+        component: Profile,
+        meta: { requiresAuth: true }
+
     }
 
 ]