diff --git a/src/App.vue b/src/App.vue
index 5b49bb1..6e24cd3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,7 +19,7 @@ export default {
 
 <style>
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: Inter, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
diff --git a/src/components/home/TheHome.vue b/src/components/home/TheHome.vue
index b4cc939..973c51a 100644
--- a/src/components/home/TheHome.vue
+++ b/src/components/home/TheHome.vue
@@ -98,69 +98,10 @@
           <div class="col">
             <h4 class="ps-3">Emas Semasa</h4>
             <div class="grid-container">
-              <!-- <base-card>
-                <div>
-                  <h5>22.0K</h5>
-                  <p>999</p>
-                  <p>RM261</p>
-                </div>
-              </base-card>
-              <base-card>
-                <div>
-                  <h5>22.0K</h5>
-                  <p>999</p>
-                  <p>RM261</p>
-                </div>
-              </base-card> -->
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
-              </div>
-              <div class="card">
-                <p>22.0K</p>
-                <p>999</p>
-                <p>RM261</p>
+              <div v-for="data in karat" v-bind:key="data.id" class="card">
+                <p>{{data.karat}}</p>
+                <p>{{data.keterangan}}</p>
+                <p>RM{{data.harga}}</p>
               </div>
             </div>
           </div>
@@ -170,6 +111,42 @@
   </the-template>
 </template>
 
+<script>
+import axios from "axios";
+
+export default {
+  name: "Karat",
+  data() {
+    return {
+      karat: Array,
+      loading: false,
+    };
+  },
+  created() {
+    this.getKarat();
+  },
+  methods: {
+    async getKarat() {
+      this.loading = true;
+      await axios
+        .get("/karat", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.karat = response.data;
+          this.loading = false;
+          console.log(response);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
+
 <style scoped>
 .grid-container {
   display: grid;
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 59fd0e7..eb0bac8 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -1,7 +1,7 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
     <div class="container-fluid">
-      <router-link class="navbar-brand" to="/home">Sistem Lelong</router-link>
+      <router-link class="navbar-brand" v-bind:to="{ name: 'Dashboard' }">Sistem Lelong</router-link>
       <button
         class="navbar-toggler"
         type="button"
@@ -16,7 +16,7 @@
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{ name: 'home' }"
+            <router-link class="nav-link" v-bind:to="{ name: 'Dashboard' }"
               >Utama</router-link
             >
           </li>
diff --git a/src/components/list/Senarai.vue b/src/components/list/Senarai.vue
index 153f15e..92e6e67 100644
--- a/src/components/list/Senarai.vue
+++ b/src/components/list/Senarai.vue
@@ -33,7 +33,7 @@
                       {{ sag.norujukan }}
                     </h6>
                     <ul class="product_price list-unstyled">
-                      <li class="old_price">{{ sag.marhun }}</li>
+                      <!-- <li class="old_price">{{ sag.marhun }}</li> -->
                       <li class="old_price">{{ sag.berat }}g</li>
                       <li class="old_price">
                         <b>RM{{ sag.hargaasas }}</b>
diff --git a/src/components/IndexPaymentHistory.vue b/src/components/result/IndexPaymentHistory.vue
similarity index 70%
rename from src/components/IndexPaymentHistory.vue
rename to src/components/result/IndexPaymentHistory.vue
index 33e4719..fb956eb 100644
--- a/src/components/IndexPaymentHistory.vue
+++ b/src/components/result/IndexPaymentHistory.vue
@@ -8,16 +8,16 @@
     >
       Kembali <i class="bi bi-backspace-fill"></i>
     </button> -->
-    <h1>Rekod Bayaran <i class="bi bi-journal-text"></i></h1>
+    <h1>Keputusan <i class="bi bi-journal-text"></i></h1>
     <PaymentHistory />
   </div>
   <Footer />
 </template>
 
 <script>
-import PaymentHistory from "./result/PaymentHistory.vue";
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
+import PaymentHistory from "./PaymentHistory.vue";
+import Navbar from "../Navbar.vue";
+import Footer from "../Footer.vue";
 
 export default {
   name: "IndexPaymentHistory",
diff --git a/src/components/result/PaymentHistory.vue b/src/components/result/PaymentHistory.vue
index 244dba1..40c3306 100644
--- a/src/components/result/PaymentHistory.vue
+++ b/src/components/result/PaymentHistory.vue
@@ -24,7 +24,25 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-if="response == 1">
+          <tr>
+            <td>1</td>
+            <td>14/06/2020</td>
+            <td>RM70.00</td>
+            <td class="text-danger">Belum Selesai</td>
+          </tr>
+          <tr>
+            <td>2</td>
+            <td>20/05/2020</td>
+            <td>RM8900.00</td>
+            <td class="text-success">Selesai</td>
+          </tr>
+          <tr>
+            <td>3</td>
+            <td>01/01/2020</td>
+            <td>RM900.00</td>
+            <td class="text-success">Selesai</td>
+          </tr>
+          <!-- <tr v-if="response == 1">
             <td colspan="4">Tiada Rekod</td>
           </tr>
           <tr v-for="(data, index) in paymentHistory" :key="data.id">
@@ -32,7 +50,7 @@
             <td>{{ data.tarikh_lelong }}</td>
             <td>RM{{ data.total }}</td>
             <td>{{ data.status }}</td>
-          </tr>
+          </tr> -->
         </tbody>
       </table>
     </div>
@@ -66,6 +84,7 @@ export default {
         })
         .then((response) => {
           this.paymentHistory = response.data;
+          console.log('hye');
           console.log(this.paymentHistory);
           this.loading = false;
         })
diff --git a/src/router/index.js b/src/router/index.js
index 4e02c16..4bd6868 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,100 +1,223 @@
-import {
-  createRouter,
-  createWebHistory,
-  createMemoryHistory,
-} from "vue-router";
-import Login from "../components/Login.vue";
-import Register from "../components/Register.vue";
-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";
-import BidHistory from "../components/BidHistory.vue";
-import Test from "../components/Test.vue";
-import IndexPaymentHistory from "../components/IndexPaymentHistory.vue";
+// import {
+//   createRouter,
+//   createWebHistory,
+//   createMemoryHistory,
+// } from "vue-router";
+// import Login from "../components/Login.vue";
+// import Register from "../components/Register.vue";
+// 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";
+// import BidHistory from "../components/BidHistory.vue";
+// import Test from "../components/Test.vue";
+// import IndexPaymentHistory from "../components/IndexPaymentHistory.vue";
+// // import Modals from './../components/Modal.vue'
+// // import { Modal } from "bootstrap";
+
+// import TheLogin from '../components/authentication/TheLogin.vue'
+// import TheRegister from '../components/authentication/TheRegister.vue'
+import TheHome from '../components/home/TheHome.vue'
+// import TheCart from '../components/cart/TheCart.vue'
+// import TheResult from '../components/result/TheResult.vue'
+// import TheProfile from '../components/profile/TheProfile.vue'
+// import TheBidRecord from '../components/bidRecord/TheBidRecord.vue'
+// import TheList from '../components/list/TheList.vue'
+
+// const routes = [
+//   {
+//     path: "/login",
+//     name: "login",
+//     component: TheLogin,
+//   },
+//   {
+//     path: "/register",
+//     name: "register",
+//     component: TheRegister,
+//   },
+//   {
+//     path: "/home",
+//     name: "home",
+//     component: TheHome,
+//   },
+
+//   {
+//     path: "/cart",
+//     name: "cart",
+//     component: TheCart,
+//   },
+//   {
+//     path: "/list",
+//     name: "list",
+//     component: TheList,
+//   },
+//   {
+//     path: "/pay",
+//     name: "Pay",
+//     component: Pay,
+//   },
+//   {
+//     path: "/profile",
+//     name: "profile",
+//     component: TheProfile,
+//   },
+//   {
+//     path: "/bid-record",
+//     name: "bid-record",
+//     component: TheBidRecord,
+//   },
+//   {
+//     path: "/result",
+//     name: "result",
+//     component: TheResult,
+
+//   },
+//   {
+//     path: "/payment-history",
+//     name: "payment-history",
+//     component: IndexPaymentHistory,
+//   },
+//   {
+//     path: "/test",
+//     name: "test",
+//     component: Test,
+//   },
+//   // {
+//   //     name: 'Modal',
+//   //     component: Modals,
+//   // }
+// ];
+
+// const router = createRouter({
+//   // history: createWebHistory(process.env.BASE_URL),
+//   history: createWebHistory(),
+//   // history: createMemoryHistory(),
+//   routes,
+// });
+
+// // function loggedIn() {
+// //     return true;
+// // }
+
+// // router.beforeEach((to, from, next) => {
+// //     if (to.matched.some(record => record.meta.requiresAuth)) {
+// //         if (!loggedIn()) {
+// //             next({
+// //                 // path: '/login',
+// //                 // query: { redirect: to.fullPath },
+// //             })
+// //         }
+// //         else {
+// //             next()
+// //         }
+// //     } else if (to.matched.some(record => record.meta.guest)) {
+// //         next()
+// //     } else {
+// //         next()
+// //     }
+// // })
+
+// export default router;
+
+import { createRouter, createWebHistory, createMemoryHistory } from "vue-router";
+import Login from '../components/Login.vue';
+import Register from '../components/Register.vue';
+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'
+import BidHistory from '../components/BidHistory.vue'
+import Test from "../components/Test.vue"
+import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
+// import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
 // import Modals from './../components/Modal.vue'
 // import { Modal } from "bootstrap";
 
-import TheLogin from '../components/authentication/TheLogin.vue'
-import TheRegister from '../components/authentication/TheRegister.vue'
-import TheHome from '../components/home/TheHome.vue'
-import TheCart from '../components/cart/TheCart.vue'
-import TheResult from '../components/result/TheResult.vue'
-import TheProfile from '../components/profile/TheProfile.vue'
-import TheBidRecord from '../components/bidRecord/TheBidRecord.vue'
-import TheList from '../components/list/TheList.vue'
-
 const routes = [
-  {
-    path: "/login",
-    name: "login",
-    component: TheLogin,
-  },
-  {
-    path: "/register",
-    name: "register",
-    component: TheRegister,
-  },
-  {
-    path: "/home",
-    name: "home",
-    component: TheHome,
-  },
+    {
+        path: '/login',
+        name: 'login',
+        component: Login,
+        // meta: { guest: true }
+    },
+    {
+        path: '/register',
+        name: 'register',
+        component: Register,
+        // meta: { guest: true }
 
-  {
-    path: "/cart",
-    name: "cart",
-    component: TheCart,
-  },
-  {
-    path: "/list",
-    name: "list",
-    component: TheList,
-  },
-  {
-    path: "/pay",
-    name: "Pay",
-    component: Pay,
-  },
-  {
-    path: "/profile",
-    name: "profile",
-    component: TheProfile,
-  },
-  {
-    path: "/bid-record",
-    name: "bid-record",
-    component: TheBidRecord,
-  },
-  {
-    path: "/result",
-    name: "result",
-    component: TheResult,
+    },
+    {
+        path: '/',
+        name: 'Dashboard',
+        component: TheHome,
+        // meta: { requiresAuth: true }
+    },
 
-  },
-  {
-    path: "/payment-history",
-    name: "payment-history",
-    component: IndexPaymentHistory,
-  },
-  {
-    path: "/test",
-    name: "test",
-    component: Test,
-  },
-  // {
-  //     name: 'Modal',
-  //     component: Modals,
-  // }
-];
+    {
+        path: '/cart',
+        name: 'cart',
+        component: Cart,
+        // meta: { requiresAuth: true }
+
+    },
+    {
+        path: '/list',
+        name: 'list',
+        component: List,
+        // meta: { requiresAuth: true }
+
+    },
+    {
+        path: '/pay',
+        name: 'Pay',
+        component: Pay,
+        // meta: { requiresAuth: true }
+
+    },
+    {
+        path: '/profile',
+        name: 'profile',
+        component: Profile,
+        // meta: { requiresAuth: true }
+
+    }, 
+    {
+        path: '/bid-history',
+        name: 'bid-record',
+        component: BidHistory,
+        // meta: { requiresAuth: true }
+
+    }, 
+    {
+        path: '/payment-history',
+        name: 'result',
+        component: IndexPaymentHistory,
+        // meta: { requiresAuth: true }
+
+    }, 
+    {
+        path: '/test',
+        name: 'test',
+        component: Test,
+        // meta: { requiresAuth: true }
+
+    }, 
+    // {
+    //     name: 'Modal',
+    //     component: Modals,
+    // }
+
+]
 
 const router = createRouter({
-  // history: createWebHistory(process.env.BASE_URL),
-  history: createWebHistory(),
-  // history: createMemoryHistory(),
-  routes,
-});
+    // history: createWebHistory(process.env.BASE_URL),
+    history: createWebHistory(),
+    // history: createMemoryHistory(),
+    routes,
+})
 
 // function loggedIn() {
 //     return true;
@@ -118,4 +241,4 @@ const router = createRouter({
 //     }
 // })
 
-export default router;
+export default router