diff --git a/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/chat_driver.jsp b/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/chat_driver.jsp
new file mode 100644
index 0000000000000000000000000000000000000000..29e3b866c1116bb109d64db6e7526f9734cccb36
--- /dev/null
+++ b/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/chat_driver.jsp
@@ -0,0 +1,49 @@
+<%@ include file="/component/header.html"%>
+<%@ include file="/component/nav.html"%>
+<div class="container">
+    <div class="wrapper row">
+        <div>
+            <div class="page-title row txt-center height-fit float-container">
+                <div class="float-left">
+                    <h1 class="inline-block">MAKE AN ORDER</h1>
+                </div>
+            </div>
+        </div>
+        <div class="order-menu">
+            <ul class="order-ul">
+                <li class="order-item">
+                    <div class="order-number">1</div>
+                    <div class="order-number-desc">Select Destination</div>
+                </li>
+                <li class="order-item">
+                    <div class="order-number">2</div>
+                    <div class="order-number-desc">Select a Driver</div>
+                </li>
+                <li class="order-item active">
+                    <div class="order-number">3</div>
+                    <div class="order-number-desc"><span>Chat Driver</div>
+                </li>
+                <li class="order-item">
+                    <div class="order-number">4</div>
+                    <div class="order-number-desc"><span>Complete your order</div>
+                </li>
+            </ul>
+        </div>
+        <div class="chat-box">
+            <div class="chat-box-control">
+                <form action="#" class="chat-input" method="POST" onsubmit="#">
+                    <input type="text" class="text-input" name="location">
+                    <button type="submit" class="send-button"> Kirim </button>
+                </form>
+            </div>
+        </div>
+        <div class="close-box">
+            <button type="submit" class="close-button"> CLOSE </button>
+        </div>
+    </div>
+</div>
+
+<%@ include file="/component/footer.html"%>
+<script>
+    window.onload = toggleActive("nav-order");
+</script>
diff --git a/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order.jsp b/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order.jsp
index ac7817faae2b6360065fe1a360c40629e95f5238..74ac9b154b819f150492acd3933ece1a919bfb6c 100644
--- a/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order.jsp
+++ b/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order.jsp
@@ -21,6 +21,10 @@
                 </li>
                 <li class="order-item">
                     <div class="order-number">3</div>
+                    <div class="order-number-desc"><span>Chat Driver</div>
+                </li>
+                <li class="order-item">
+                    <div class="order-number">4</div>
                     <div class="order-number-desc"><span>Complete your order</div>
                 </li>
             </ul>
diff --git a/TugasBesar2_2017/WebApp/src/main/webapp/css/app.css b/TugasBesar2_2017/WebApp/src/main/webapp/css/app.css
index 73e0d9be7e177a491d02024011c00802d28dc74f..637531bf1db1265bd18422c074795fb46b627aee 100644
--- a/TugasBesar2_2017/WebApp/src/main/webapp/css/app.css
+++ b/TugasBesar2_2017/WebApp/src/main/webapp/css/app.css
@@ -399,7 +399,7 @@ h3{
 
 .order-menu .order-item {
 	display: inline-block;
-	width: 30%;
+	width: 22%;
 	margin: 5px;
 	border: 1px solid black;
 	height: 8vh;
@@ -748,4 +748,72 @@ h3{
 
 .display-inline-block{
 	display: inline-block !important;
-}
\ No newline at end of file
+}
+
+.chat-box {
+	display: flex;
+	width: 100%;
+	border: 1px solid black;
+	height: 50vh;
+	position: relative;
+	align-items: flex-end;
+}
+
+.chat-box-control {
+	display: flex;
+	width: 100%;
+	border-top: 1px solid black;
+	height: 8vh;
+	position: relative;
+	align-items: stretch;
+}
+
+.chat-input {
+	flex-grow: 1;
+	display: flex;
+	margin-bottom: 5px;
+	justify-content: right;
+	align-items: center;
+}
+
+.text-input {
+	height: 7vh;
+	border: none;
+	border-color: transparent;
+	outline: none;
+	width: 100%;
+	flex-grow: 1;
+	margin-left: 5px;
+	margin-right: 5px;
+	font-size: 12px;
+}
+
+.send-button {
+	width: 100px;
+	height: 40px;
+	border: 1px solid #00782d;
+	border-radius: 8px;
+	background: #57e500;
+	font-size: 1.25em;
+	margin-left: 5px;
+	margin-right: 5px;
+	outline: none;
+}
+
+.close-box {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+}
+
+
+.close-button {
+	width: 100px;
+	height: 40px;
+	border: 1px solid #00782d;
+	border-radius: 8px;
+	background: #BB0000;
+	font-size: 1.25em;
+	margin: 10px;
+	outline: none;
+}
diff --git a/TugasBesar2_2017/gradlew b/TugasBesar2_2017/gradlew
old mode 100644
new mode 100755