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
index f7449b184c55d876abd3a0da0221818ab1eacd64..515f8bc7646df8b7f4e8c0421bb5ac80ef0570eb 100644
--- a/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/chat_driver.jsp
+++ b/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/chat_driver.jsp
@@ -61,24 +61,46 @@
 
 <%@ include file="/component/footer.html" %>
 
+<script src="js/converse.js"></script>
+<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
 <script>
     window.onload = toggleActive("nav-order");
 </script>
 <script>
     angular.module('chatApp', [])
-        .controller('ChatController', function ($scope) {
-            $scope.chatList = [];
+        .service('ConverseService', converse)
+        .controller('ChatController', function ($scope, ConverseService) {
+            let account = new ConverseService.User(1)
+
+            $scope.chatList = []
+
+            // Initialize Firebase.
+            account.initAsync()
+                .then(function () {
+                    console.log('Chat service is initialized.')
+                })
+                .catch(function (e) {
+                    console.log(e)
+                })
+
+            account.onchat = function (msg) {
+                $scope.chatList.push({
+                    from: 'them',
+                    text: msg
+                })
+                $scope.$apply()
+            }
 
             $scope.addChat = function () {
                 if ($scope.chatText.length !== 0) {
                     $scope.chatList.push({
                         from: 'me',
                         text: this.chatText
-                    });
+                    })
                 }
 
-                $scope.chatText = '';
-            };
-        });
+                $scope.chatText = ''
+            }
+        })
 </script>
diff --git a/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order_driver.jsp b/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order_driver.jsp
index 88b192f95855e49002f5913fcee0a01af7ed496b..d7e3fa1d88c8620a40330737cd757037711ed2d7 100644
--- a/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order_driver.jsp
+++ b/TugasBesar2_2017/WebApp/src/main/webapp/WEB-INF/order_driver.jsp
@@ -3,7 +3,7 @@
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
 <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
 
-<div ng-app= "" class="container">
+<div ng-app= "chatApp" class="container">
     <div class="wrapper row">
         <div>
             <div class="page-title row txt-center height-fit float-container">
@@ -24,9 +24,28 @@
     </div>
 </div>
 
+<script>
+    angular.module('chatApp', [])
+        .controller('ChatController', function ($scope, $http) {
+            $scope.chatList = []
+
+            $scope.addChat = function () {
+                if ($scope.chatText.length !== 0) {
+                    $scope.chatList.push({
+                        from: 'me',
+                        text: this.chatText
+                    })
+                }
+
+                $scope.chatText = ''
+            }
+        })
+</script>
+
+
 <%@include file="/component/footer.html" %>
 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
 <script>
-    window.onload = toggleActive("nav-order");
+    window.onload = toggleActive("nav-order")
 </script>