diff --git a/css/dashboard.css b/css/dashboard.css
index a29958ebb99deb5f2085d00f4f29862757ded178..f0da0776060a9b3f04fb9f404a1a73f7e2a081cb 100644
--- a/css/dashboard.css
+++ b/css/dashboard.css
@@ -30,18 +30,35 @@
     font-weight: bold;
 }
 
+.submenu-two {
+    background-color: #FFF;
+    padding: 15px;
+    text-align: center;
+    display: inline-block;
+    box-sizing: border-box;
+    width: 50%;
+    border: 1px solid #000;
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
 .selected {
     background-color: #215118;
     color: #FFF;
 }
 
+.selected-order {
+    background-color: #8BBd3c;
+    color: #FFF;
+}
+
 .order-wrapper, .history-wrapper {
     display: none;
 }
 
 .sub-header {
     font-size: 0;
-    margin: 10px 0;
+    margin: 20px 0;
 }
 
 .sub-header-heading, .edit-icon {
diff --git a/css/history.css b/css/history.css
new file mode 100644
index 0000000000000000000000000000000000000000..6d5cc40385c09dcac8aeff1d05c55f355f607b98
--- /dev/null
+++ b/css/history.css
@@ -0,0 +1,3 @@
+.driver-info {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/css/primary.css b/css/primary.css
index 31eaef7599892d87dc5510446aa78f40ec95db75..1497d3740c1b205b6579d84c9166cdc2f26302f2 100644
--- a/css/primary.css
+++ b/css/primary.css
@@ -3,9 +3,15 @@ body {
     font-family: sans-serif;
     padding: 10px;
     text-align: center;
+    /*background: url("../img/background.jpeg") no-repeat;
+    background-size: cover;*/
 }
 .container {
     width: 700px;
     text-align: initial;
     display: inline-block;
+    /*border-radius: 20px;
+    padding: 15px;
+    border: 3px solid #B0B0B0;
+    background-color: hsla(360, 0%, 99%, 0.73);*/
 }
\ No newline at end of file
diff --git a/view/dashboard.php b/view/dashboard.php
index f151a5b5a21253fae1a2d1deedd0beeed9d01a3b..a124286124a120a9f567686e90238c3d047557b1 100644
--- a/view/dashboard.php
+++ b/view/dashboard.php
@@ -3,6 +3,7 @@
     <title>User Dashboard</title>
     <link href="../css/primary.css" type="text/css" rel="stylesheet" />
     <link href="../css/dashboard.css" type="text/css" rel="stylesheet" />
+    <link href="../css/history.css" type="text/css" rel="stylesheet" />
     <script src="../js/dashboard.js"></script>
     <script src="../js/profile.js"></script>
     <script src="../js/history.js"></script>
@@ -18,7 +19,7 @@
         </div>
         <div class="menu">
             <button class="submenu" id="order" onclick="order_clicked()">ORDER</button>
-            <button class="submenu" id="history" onclick="history_clicked()">HISTORY</button>
+            <button class="submenu" id="history" onclick="getAllTransaction(); history_clicked();">HISTORY</button>
             <button class="submenu selected" id="profile" onclick="getUserProfile(); profile_clicked();">PROFILE</button>
         </div>
 
@@ -27,7 +28,14 @@
 
         <section class="history-wrapper">
             <div id="content"></div>
-            <button onclick="getAllTransaction()">get transaction</button>
+            <div class="sub-header">
+                <div class="sub-header-heading"><h1>TRANSACTION HISTORY</h1></div>
+            </div>
+            <div class="menu">
+                <button class="submenu-two" id="previous-order">MY PREVIOUS ORDER</button>
+                <button class="submenu-two selected-order" id="driver-history" onclick="getAllTransaction()">DRIVER HISTORY</button>
+            </div>
+            <div class="driver-info" id="driver-info"></div>
         </section>
 
         <section class="profile-wrapper">