diff --git a/public/history.js b/public/history.js
new file mode 100644
index 0000000000000000000000000000000000000000..86ecf4e1df402160073231dbff6b87eadfe79254
--- /dev/null
+++ b/public/history.js
@@ -0,0 +1,111 @@
+function getHistoryAsCustomer() {
+    var userID = document.getElementById('customer-id').innerHTML;
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            resultData = JSON.parse(this.responseText);
+            bindCustomerResult(resultData);
+            console.log(resultData);
+        }
+    }
+    xhttp.open('POST', '/index.php/main/history/customer?u='+userID, true);
+    xhttp.send();
+
+}
+
+function getHistoryAsDriver() {
+    var userID = document.getElementById('customer-id').innerHTML;
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function () {
+        if (this.readyState == 4 && this.status == 200) {
+            resultData = JSON.parse(this.responseText);
+            bindDriverResult(resultData);
+            console.log(resultData);
+        }
+    }
+    xhttp.open('POST', '/index.php/main/history/driver?u='+userID, true);
+    xhttp.send();
+
+}
+
+function bindDriverResult(data) {
+
+    var html = '';
+    var customerNames = data.customerNames;
+    var results = data.history;
+    if (results != null && results.length != 0) {
+        results.forEach(function (driverItem) {
+            html += '' +
+                '<div class="row" id="'+driverItem.id_order+'">\n' +
+                '   <img src="'+customerNames[driverItem.id_driver].photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+                '   <h3><small>'+driverItem[7]+'</small><br>' +
+                '   '+customerNames[driverItem.id_driver].name+'<br>' +
+                '   </h3>' +
+                '   <h5>'+driverItem[3]+'-'+driverItem[4]+'<br>' +
+                '   You Rated: '+driverItem.rating+'<br>' +
+                '   You Commented: "'+driverItem.comment+'"</h5>' +
+                '   <a href="#" class="btn red" style="float: right; margin: 10px" onclick="hideElement(\''+driverItem.id_order+'\')">HIDE</a>\n' +
+                '</div>';
+        });
+        document.getElementById('driver-search-result').innerHTML = html;
+    }
+}
+
+function bindCustomerResult(data) {
+
+    var html = '';
+    var driverNames = data.driverNames;
+    var results = data.history;
+    if (results != null && results.length != 0) {
+        results.forEach(function (driverItem) {
+            html += '' +
+                '<div class="row" id="'+driverItem.id_order+'">\n' +
+                '   <img src="'+driverNames[driverItem.id_driver].photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+                '   <h3><small>'+driverItem[7]+'</small><br>' +
+                '   '+driverNames[driverItem.id_driver].name+'<br>' +
+                '   </h3>' +
+                '   <h5>'+driverItem[3]+'-'+driverItem[4]+'<br>' +
+                '   gave '+driverItem.rating+' rating<br>' +
+                '   and said, "'+driverItem.comment+'"</h5>' +
+                '   <a href="#" class="btn red" style="float: right; margin: 10px" onclick="hideElement(\''+driverItem.id_order+'\')">HIDE</a>\n' +
+                '</div>';
+        });
+        document.getElementById('driver-search-result').innerHTML = html;
+    }
+}
+
+function hideElement(elmtID) {
+    document.getElementById(elmtID).style.display = 'none';
+}
+
+// Subpage Navigation
+
+document.getElementById('page-tab-customer').onclick = function () {
+    showCustomerPage();
+    getHistoryAsCustomer();
+};
+
+document.getElementById('page-tab-driver').onclick = function () {
+    showDriverPage();
+    getHistoryAsDriver();
+};
+
+function showCustomerPage() {
+    var driverPage = document.getElementById('history-page-driver');
+    driverPage.style.display = 'none';
+    var customerPage = document.getElementById('history-page-customer');
+    customerPage.style.display = 'block';
+    document.getElementById('page-tab-driver').classList.remove("active");
+    document.getElementById('page-tab-customer').classList.add("active");
+}
+
+function showDriverPage() {
+    var customerPage = document.getElementById('history-page-customer');
+    customerPage.style.display = 'none';
+    var driverPage = document.getElementById('history-page-driver');
+    driverPage.style.display = 'block';
+    document.getElementById('page-tab-customer').classList.remove("active");
+    document.getElementById('page-tab-driver').classList.add("active");
+}
diff --git a/src/controller/HistoryController.php b/src/controller/HistoryController.php
new file mode 100644
index 0000000000000000000000000000000000000000..82f96e919e67636aaab4c28b0505207dcfd5a16d
--- /dev/null
+++ b/src/controller/HistoryController.php
@@ -0,0 +1,65 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: iqbal
+ * Date: 07/10/17
+ * Time: 21:42
+ */
+
+require_once __DIR__.'/../model/Order.php';
+require_once __DIR__.'/../model/User.php';
+
+class HistoryController
+{
+    public static function HistoryHandler() {
+        // Getting user id from url
+        if (!isset($_GET['u']) || $_GET['u'] == "") {
+            echo "Invalid parameter!";
+            return;
+        }
+
+        $id = $_GET['u'];
+
+        // Decrypt user id
+        $uid = simpleCrypt($id, 'd');
+
+        // Getting driver profile
+        $dbconn = DB::getInstance();
+        $user = Driver::Create($uid, $dbconn);
+
+        if (!$user) {
+            echo "User not found!";
+            return;
+        }
+
+        require __DIR__.'/../view/history.php';
+    }
+
+    public static function HistoryAsCustomerHandler() {
+        $id = simpleCrypt($_GET['u'], 'd');
+        $pdo = DB::getInstance();
+        $historyCustomer = Order::GetAllOrderBy('id_customer', $id, $pdo);
+        $driverNames = array();
+        foreach ($historyCustomer as $driver) {
+            $driverId = $driver['id_driver'];
+            $driverNames[$driverId] = User::GetUserBy('id', $driverId, $pdo);
+        }
+        //$historyDriver = Order::GetAllOrderBy('id_driver', '4', $pdo);
+
+        echo json_encode(array('history'=>$historyCustomer, 'driverNames'=>$driverNames));
+    }
+
+    public static function HistoryAsDriverHandler() {
+        $id = simpleCrypt($_GET['u'], 'd');
+        $pdo = DB::getInstance();
+        $historyDriver = Order::GetAllOrderBy('id_driver', $id, $pdo);
+        $customerNames = array();
+        foreach ($historyDriver as $driver) {
+            $driverId = $driver['id_driver'];
+            $customerNames[$driverId] = User::GetUserBy('id', $driverId, $pdo);
+        }
+        //$historyDriver = Order::GetAllOrderBy('id_driver', '4', $pdo);
+
+        echo json_encode(array('history'=>$historyDriver, 'customerNames'=>$customerNames));
+    }
+}
\ No newline at end of file
diff --git a/src/model/Order.php b/src/model/Order.php
new file mode 100644
index 0000000000000000000000000000000000000000..cecc0765571bf665a0f6bbea87c83a711e5e7f11
--- /dev/null
+++ b/src/model/Order.php
@@ -0,0 +1,42 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: iqbal
+ * Date: 07/10/17
+ * Time: 15:35
+ */
+
+class Order
+{
+    public $idOrder;
+    public $idDriver;
+    public $idCustomer;
+    public $source;
+    public $destination;
+    public $rating;
+    public $comment;
+    public $time;
+
+    public static function GetAllOrder(PDO $conn) {
+        try {
+            $result = $conn->query("SELECT * FROM user_order")->fetchAll();
+            return $result;
+        } catch (PDOException $e) {
+            echo "Error".$e->getMessage();
+            return false;
+        }
+    }
+
+    public static function GetAllOrderBy($attribute, $value, PDO $conn) {
+        try {
+            $stmt = $conn->prepare("SELECT * FROM user_order WHERE $attribute='$value'");
+            $stmt->execute();
+
+            $result = $stmt->fetchAll();
+            return $result;
+        } catch (PDOException $e) {
+            echo "Error".$e->getMessage();
+            return false;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/route.php b/src/route.php
index dd957e2d6f44a0a94552748eb82c763c1e96d2db..2517ca220928ce4eee5e57cdae97349df23ce16b 100644
--- a/src/route.php
+++ b/src/route.php
@@ -4,7 +4,6 @@
 
 $AppInstance = Dagojek::Instance();
 
-$AppInstance->addRoute("/index.php/test",       'MainController::TestHandler');
 
 $AppInstance->addRoute("/",                     'MainController::LoginHandler');
 $AppInstance->addRoute("/login",                'LoginController::LoginHandler');
@@ -26,8 +25,7 @@ $AppInstance->addRoute("/main/order",          'OrderController::OrderHandler');
 $AppInstance->addRoute("/main/order/new",          'OrderController::MakeOrderHandler');
 $AppInstance->addRoute("/main/order/finish",          'OrderController::FinishOrderHandler');
 
-$AppInstance->addRoute("/main/history",         'MainController::DefaultHandler');
-$AppInstance->addRoute("/main/order/",          'MainController::DefaultHandler');
-$AppInstance->addRoute("/main/order/select",    'MainController::DefaultHandler');
-$AppInstance->addRoute("/main/order/finish",    'MainController::DefaultHandler');
+$AppInstance->addRoute("/main/history",              'HistoryController::HistoryHandler');
+$AppInstance->addRoute("/main/history/customer",     'HistoryController::HistoryAsCustomerHandler');
+$AppInstance->addRoute("/main/history/driver",       'HistoryController::HistoryAsDriverHandler');
 
diff --git a/src/view/history.php b/src/view/history.php
new file mode 100644
index 0000000000000000000000000000000000000000..fdafa8f24ba7fc88417fb68054d265eb0af4aa04
--- /dev/null
+++ b/src/view/history.php
@@ -0,0 +1,64 @@
+<html>
+<head>
+    <title>DAGO-JEK | Order</title>
+    <link rel="stylesheet" type="text/css" href="/style.css">
+</head>
+<body>
+<div class="container">
+    <div class="row">
+        <div class="col-3"><span class="logo"></span></div>
+        <div class="col-3 text-right">
+            <p class="user-action">
+                Hi, <b><?=$user->username?></b> !<br>
+                <a href="/">Logout</a>
+            </p>
+        </div>
+    </div>
+    <div class="row">
+        <a class="col-2 tab text-center" href="/index.php/main/order?u=<?=$id?>">ORDER</a>
+        <a class="col-2 tab text-center active" href="/index.php/main/history?u=<?=$id?>">HISTORY</a>
+        <a class="col-2 tab text-center" href="/index.php/main/profil?u=<?=$id?>">MY PROFILE</a>
+    </div>
+    <div class="row">
+        <div class="col-6"><h1>TRANSACTION HISTORY</h1></div>
+        <span id="customer-id" style="display: none"><?=$id?></span>
+    </div>
+    <div class="row">
+        <div class="col-3">
+            <div id="page-tab-customer" class="tab text-center active">
+                <div class="page-tab-content">
+                    MY PREVIOUS ORDER
+                </div>
+            </div>
+        </div>
+        <div class="col-3">
+            <div id="page-tab-driver" class="tab text-center">
+                <div class="page-tab-content">
+                    DRIVER HISTORY
+                </div>
+            </div>
+        </div>
+    </div>
+    <br>
+    <br>
+
+    <div id="history-page-customer">
+        <div class="row">
+            <h1>Customer</h1>
+            <p id="driver-search-result" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
+        </div>
+    </div>
+
+    <div id="history-page-driver" style="display: none">
+        <div class="row">
+            <h1>Driver</h1>
+            <p id="driver-preferred-empty" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
+        </div>
+    </div>
+
+
+</div>
+
+<script type="text/javascript" src="/history.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/view/profil.php b/src/view/profil.php
index a060cf229f765ee89acce0c7073aa6a628c85e60..13ab657285c618d363ee108f8237b4a1278a8943 100644
--- a/src/view/profil.php
+++ b/src/view/profil.php
@@ -16,7 +16,7 @@
         </div> 
         <div class="row">
             <a class="col-2 tab text-center" href="/index.php/main/order?u=<?=$id?>">ORDER</a>
-            <a class="col-2 tab text-center" href="/index.php/main/hostory?u=<?=$id?>">HISTORY</a>
+            <a class="col-2 tab text-center" href="/index.php/main/history?u=<?=$id?>">HISTORY</a>
             <a class="col-2 tab text-center active" href="/index.php/main/profil?u=<?=$id?>">MY PROFILE</a>
         </div>
         <div class="row">