diff --git a/enni.html b/enni.html
index 08872a394c4d69c596336f6b9c4548ade9d3672a..b0c288e7e8b90dcab82922f9ecff972d62438d02 100644
--- a/enni.html
+++ b/enni.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>
diff --git a/js/smarter-ui.js b/js/smarter-ui.js
index 8bd72a59638a107322bb9c22b98f3a43dbced26b..71a7409ced583669f6b5041bcbe31a60a0a43c80 100644
--- a/js/smarter-ui.js
+++ b/js/smarter-ui.js
@@ -1,6 +1,8 @@
 DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
 DIRECTION2_TEXT = "Suunta: tulee oikealta";
 
+var AUDIO_ELEM = new Audio();
+
 // Make it easier to read CSV files
 USER_AGENT = navigator.userAgent.replace(';', '').replace(',', '');
 
@@ -29,20 +31,29 @@ var heartBeat;
 
 // https://stackoverflow.com/a/23176223
 function connect() {
+  console.log("Opening websocket");
   ws = new WebSocket(SERVER);
   ws.onopen = function() {
+    console.log("Opened websocket");
     // Initiate hearbeat
     heartBeat = setInterval(function() {
       console.log("PING");
       ws.send('PING' + SEP + new Date().getTime() + SEP + USER_AGENT); 
     }, 5000);
+    setTimeout(function() {
+      var modalClose = document.getElementById('modal-close');
+      modalClose.textContent = "Valmis!";
+      $(modalClose).toggleClass("disabled");      
+    }, 1000);
   };
 
   ws.onmessage = function(e) {
     console.log('Message:', e.data);
     try {
       var vehicle_class = JSON.parse(e.data).vehicle_class;
-      new Audio(AUDIO[vehicle_class]).play();
+      console.log("Got vehicle class: " + vehicle_class);
+      AUDIO_ELEM.src = AUDIO[vehicle_class];
+      AUDIO_ELEM.play();
     } catch (exc) {
       if (exc instanceof SyntaxError) {
         console.log("Not json : " + e.data);
@@ -66,3 +77,8 @@ function connect() {
   };
 }
 connect();
+
+function closeModal() {
+  AUDIO_ELEM.play();
+  $('.modal').modal('hide');
+}
\ No newline at end of file
diff --git a/paavo.html b/paavo.html
index a49c8e687acb59d11c75c5d094d6d75bc1da2f1b..06dfbb3f7b8cebe3d03ca3f558725b23eac7953d 100644
--- a/paavo.html
+++ b/paavo.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>
diff --git a/petra.html b/petra.html
index c6d9a8d6e38ecae12f8d721ce3d6139b0f79001a..51c89e533942325ec92961121e9b8521f21f2dd1 100644
--- a/petra.html
+++ b/petra.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>
diff --git a/tommi.html b/tommi.html
index 9c8f3dc1b8561d0d853c14c6829b45da334aaa7b..433d0fb528daa7e09980ff4fbede164b88d5d69b 100644
--- a/tommi.html
+++ b/tommi.html
@@ -40,6 +40,22 @@
   <script src="js/plugins.js"></script>
   <script src="js/main.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
+  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
+
+
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Yhteys palvelimeen</h5>
+        </div>
+        <div class="modal-footer">
+          <button id="modal-close" type="button" class="btn btn-secondary disabled text-center" data-dismiss="modal" onclick="closeModal()">Yhdistetään...</button>
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="container">
     <div class="row">
       <div class="col">
@@ -71,7 +87,11 @@
     </div>
   </div>
   <script src="js/smarter-ui.js"></script>
-
+  <script type="text/javascript">
+    $(document).ready(function() {
+      $('.modal').modal('show');
+    })
+  </script>
 </body>
 
 </html>