diff --git a/public/order.js b/public/order.js
index 5d469368a1ea1ba65131459c3ef5172a6c25314d..5b036a4caa24f0c2c9f7281a4e66ee44fc73285c 100644
--- a/public/order.js
+++ b/public/order.js
@@ -4,6 +4,62 @@
     showLocationPage();
 })();
 
+function makeOrder() {
+
+    var orderPickup = document.getElementById('orderPickup').value;
+    var orderDestination = document.getElementById('orderDestination').value;
+    var orderPreferredDriver = document.getElementById('orderPreferredDriver').value;
+    var data = "pickup="+orderPickup+"&destination="+orderDestination+"&driver="+orderPreferredDriver;
+
+    var xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function() {
+        if (this.readyState == 4 && this.status == 200) {
+            bindSearchResult(JSON.parse(this.responseText));
+            showDriverPage();
+        }
+    };
+    xhttp.open("POST", "/main/order/new", true);
+    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhttp.send(data);
+}
+
+function bindSearchResult(data) {
+    alert(JSON.stringify(data));
+    var preferred = data.preferred;
+    if (preferred != null) {
+        document.getElementById('driver-preferred-result').innerHTML = '' +
+            '<div class="row">\n' +
+            '   <img src="'+preferred.photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+            '   <p style="font-size: 1.4em; margin:20px 10px 3px 10px">'+preferred.name+'</p>\n' +
+            '   <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> '+preferred.rating+'</b></span> ('+preferred.sum_order+' votes)</p>\n' +
+            '   <span class="btn green" style="float: right; margin: 10px" onclick="finishOrder(\''+preferred.id+'\')">I CHOOSE YOU!</span>\n' +
+            '</div>';
+    }
+
+    var html = '';
+    var results = data.result;
+    if (results != null && results.length != 0) {
+        results.forEach(function (driverItem) {
+            html += '' +
+                '<div class="row">\n' +
+                '   <img src="'+driverItem.photo+'" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">\n' +
+                '   <p style="font-size: 1.4em; margin:20px 10px 3px 10px">'+driverItem.name+'</p>\n' +
+                '   <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> '+driverItem.rating+'</b></span> ('+driverItem.sum_order+' votes)</p>\n' +
+                '   <a href="#" class="btn green" style="float: right; margin: 10px">I CHOOSE YOU!</a>\n' +
+                '</div>';
+        });
+        document.getElementById('driver-search-result').innerHTML = html;
+    }
+}
+
+function finishOrder(id) {
+    alert(id);
+    showFinishPage();
+}
+
+function bindFinishPage() {
+
+}
 
 function showLocationPage() {
     var finishPage = document.getElementById('order-page-finish');
diff --git a/src/controller/OrderController.php b/src/controller/OrderController.php
index c900077177a136bb4bc645ab5a9c530330bfe092..8d0aeaef5797724abaf43754e80208248dc9fc03 100644
--- a/src/controller/OrderController.php
+++ b/src/controller/OrderController.php
@@ -24,4 +24,53 @@ class OrderController {
 
         require __DIR__.'/../view/order.php';
     }
+
+
+    public static function MakeOrderHandler() {
+        $pickup = $_POST['pickup'];
+        $destination = $_POST['destination'];
+        $driver = $_POST['driver'];
+
+        // Get driver
+        $results = array();
+        $dbconn = DB::getInstance();
+        $stmt = $dbconn->prepare(
+            'SELECT 
+                user.id AS id, name, photo, rating, sum_order 
+            FROM user NATURAL JOIN driver 
+            WHERE user.id IN (
+                SELECT DISTINCT id_driver 
+                FROM prefered_location 
+                WHERE location = ? OR location = ?
+            )'
+        );
+        $stmt->execute(array($pickup, $destination));
+        if ($stmt === false) {
+            echo "Error";
+            return;
+        }
+        $results += $stmt->fetchAll();
+
+        // get preferred driver
+        $preferred_driver = null;
+        if ($driver != "") {
+            $dbconn = DB::getInstance();
+            $stmt = $dbconn->prepare(
+                'SELECT 
+                user.id AS id, name, photo, rating, sum_order 
+            FROM user NATURAL JOIN driver 
+            WHERE username = ?'
+            );
+            $stmt->execute(array($driver));
+            if ($stmt === false) {
+                echo "Error";
+                return;
+            }
+            $preferred_driver = $stmt->fetchObject();
+        }
+
+        echo json_encode(array('preferred'=>$preferred_driver , 'result' => $results));
+
+    }
+
 }
\ No newline at end of file
diff --git a/src/route.php b/src/route.php
index 6a137f8346a5df64026a56d698e7f84b293a91e0..4285420fdfd94f41531138330125f89ca477c47f 100644
--- a/src/route.php
+++ b/src/route.php
@@ -17,6 +17,7 @@ $AppInstance->addRoute("/main/profil/location/delete",      'ProfilController::D
 $AppInstance->addRoute("/main/profil/location/add",         'ProfilController::AddLocationHandler');
 
 $AppInstance->addRoute("/main/order",          'OrderController::OrderHandler');
+$AppInstance->addRoute("/main/order/new",          'OrderController::MakeOrderHandler');
 
 $AppInstance->addRoute("/main/history",         'MainController::DefaultHandler');
 $AppInstance->addRoute("/main/order/select",    'MainController::DefaultHandler');
diff --git a/src/view/order.php b/src/view/order.php
index ee887517a3da3f66dab43da7cbc0a6e7e9e9bd44..0c81de5dfb348152662465539e64d45adc0b834f 100644
--- a/src/view/order.php
+++ b/src/view/order.php
@@ -57,61 +57,52 @@
         <br>
         <br>
         <div id="order-page-location">
-            <div class="row">
-                <div class="col-2" style="line-height: 40px">
-                    <span style="padding-left: 30%;">Picking Point</span> <br>
-                </div>
-                <div class="col-4" style="line-height: 30px">
-                    <input style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="picking_point" placeholder="Pick up point">
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-2" style="line-height: 40px">
-                    <span style="padding-left: 30%">Destination</span> <br>
+            <form id="orderForm">
+                <div class="row">
+                    <div class="col-2" style="line-height: 40px">
+                        <span style="padding-left: 30%;">Picking Point</span> <br>
+                    </div>
+                    <div class="col-4" style="line-height: 30px">
+                        <input id="orderPickup" style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="picking_point" placeholder="Pick up point">
+                    </div>
                 </div>
-                <div class="col-4" style="line-height: 30px">
-                    <input style="width: 80%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="destination" placeholder="Destination">
+                <div class="row">
+                    <div class="col-2" style="line-height: 40px">
+                        <span style="padding-left: 30%">Destination</span> <br>
+                    </div>
+                    <div class="col-4" style="line-height: 30px">
+                        <input id="orderDestination" style="width: 80%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="destination" placeholder="Destination">
+                    </div>
                 </div>
-            </div>
-            <div class="row">
-                <div class="col-2" style="line-height: 40px">
-                    <span style="padding-left: 30%">Preferred Driver</span>
+                <div class="row">
+                    <div class="col-2" style="line-height: 40px">
+                        <span style="padding-left: 30%">Preferred Driver</span>
+                    </div>
+                    <div class="col-4">
+                        <input id="orderPreferredDriver" style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="driver" placeholder="(optional)"><br>
+                    </div>
                 </div>
-                <div class="col-4">
-                    <input style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="driver" placeholder="(optional)"><br>
+                <br>
+                <br>
+                <br>
+                <div class="row text-center">
+                    <a href="#" class="btn green" style="font-size: 2em" onclick="makeOrder()">Next</a>
                 </div>
-            </div>
-            <br>
-            <br>
-            <br>
-            <div class="row text-center">
-                <a href="#" class="btn green" style="font-size: 2em" onclick="showDriverPage()">Next</a>
-            </div>
+            </form>
         </div>
 
         <div id="order-page-driver">
             <div style="width: 100%; border: 1px solid black; border-radius: 10px;">
                 <h2 style="margin-left: 10px; margin-top: 0px">PREFERRED DRIVERS: </h2>
-                <div class="text-center" style="font-size: large; color: #989898; margin: 30px">
-                    Nothing to display :(
+                <div id="driver-preferred-result" style="margin: 0 30px 30px 30px">
+                    <p id="driver-preferred-empty" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
                 </div>
             </div>
             <br>
             <div style="width: 100%; border: 1px solid black; border-radius: 10px;">
                 <h2 style="margin-left: 10px; margin-top: 0px">OTHER DRIVERS: </h2>
-                <div style="margin: 0 30px 30px 30px">
-                    <div class="row">
-                        <img src="/img/profile/VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">
-                        <p style="font-size: 1.4em; margin:20px 10px 3px 10px">Pokemon Kuning Unyu</p>
-                        <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> 4.3</b></span> (1002 votes)</p>
-                        <a href="#" class="btn green" style="float: right; margin: 10px">I CHOOSE YOU!</a>
-                    </div>
-                    <div class="row">
-                        <img src="/img/profile/VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">
-                        <p style="font-size: 1.4em; margin:20px 10px 3px 10px">Pokemon Kuning Unyu</p>
-                        <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> 4.3</b></span> (1002 votes)</p>
-                        <a href="#" class="btn green" style="float: right; margin: 10px">I CHOOSE YOU!</a>
-                    </div>
+                <div id="driver-search-result" style="margin: 0 30px 30px 30px">
+                    <p id="driver-preferred-empty" class="text-center" style="font-size: large; color: #989898; margin: 30px">Nothing to display :(</p>
                 </div>
             </div>
         </div>