diff --git a/src/components/Cart.vue b/src/components/Cart.vue
index 8015dfc..bcfd6cd 100644
--- a/src/components/Cart.vue
+++ b/src/components/Cart.vue
@@ -18,7 +18,7 @@
         Kembali <i class="bi bi-backspace-fill"></i>
       </button>
       <div class="wrapper wrapper-content animated fadeInRight">
-        <h1>Cart <i class="bi bi-cart-fill"></i></h1>
+        <h1>Cart <i class="bi bi-cart3"></i></h1>
         <div class="row">
           <div class="col-lg-9 col-sm-12" style="overflow-x: auto">
             <div class="ibox">
diff --git a/src/components/History.vue b/src/components/History.vue
new file mode 100644
index 0000000..f1f89d6
--- /dev/null
+++ b/src/components/History.vue
@@ -0,0 +1,59 @@
+<template>
+  <Navbar />
+  <div class="container" style="height: 70vh">
+    <button
+      class="btn btn-secondary float-start"
+      style="margin: 5px"
+      onclick="history.back()"
+    >
+      Kembali <i class="bi bi-backspace-fill"></i>
+    </button>
+    <h1>Rekod Bidaan <i class="bi bi-receipt"></i></h1>
+    <div class="card">
+      <div class="card-body">
+        <table class="table">
+          <thead>
+            <tr>
+              <th scope="col">#</th>
+              <th scope="col">First</th>
+              <th scope="col">Last</th>
+              <th scope="col">Handle</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">1</th>
+              <td>Mark</td>
+              <td>Otto</td>
+              <td>@mdo</td>
+            </tr>
+            <tr>
+              <th scope="row">2</th>
+              <td>Jacob</td>
+              <td>Thornton</td>
+              <td>@fat</td>
+            </tr>
+            <tr>
+              <th scope="row">3</th>
+              <td colspan="2">Larry the Bird</td>
+              <td>@twitter</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <Footer />
+</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/components/Navbar.vue b/src/components/Navbar.vue
index e879285..d80c01e 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -24,6 +24,9 @@
           <!-- <li class="nav-item">
             <router-link class="nav-link" to="/cart">Cart</router-link>
           </li> -->
+          <li class="nav-item">
+            <router-link class="nav-link" to="/history">Rekod Bidaan</router-link>
+          </li>
           <li class="nav-item">
             <router-link class="nav-link" to="/pay">Bayar</router-link>
           </li>
@@ -34,7 +37,7 @@
         </ul>
 
         <router-link class="btn btn-primary me-5" to="/cart"
-          >Cart <i class="bi bi-cart-fill"></i
+          >Cart <i class="bi bi-cart3"></i
           ><span class="span_cart">{{
             this.allCarts.length
           }}</span></router-link
diff --git a/src/components/Pay.vue b/src/components/Pay.vue
index de8b5e3..837f47d 100644
--- a/src/components/Pay.vue
+++ b/src/components/Pay.vue
@@ -23,7 +23,7 @@
       Kembali <i class="bi bi-backspace-fill"></i>
     </button>
     <div class="wrapper wrapper-content animated fadeInRight">
-      <h1>Bayar <i class="bi bi-credit-card-2-back-fill"></i></h1>
+      <h1>Bayar <i class="bi bi-credit-card-2-front"></i></h1>
       <div class="row">
         <div class="col-lg-9 col-sm-12" style="overflow-x: auto">
           <div class="ibox">