diff --git a/index.html b/paavo.html
similarity index 55%
rename from index.html
rename to paavo.html
index 6f39df31d61adffb7d801f0fe74332167b7e9e57..1ae502c0956b912d19dc548a983165ebf21f8709 100644
--- a/index.html
+++ b/paavo.html
@@ -20,17 +20,28 @@
   <link rel="stylesheet" href="css/bootstrap.min.css">
 
   <meta name="theme-color" content="#fafafa">
+  <style type="text/css">
+    .row + .row {
+      margin-top: 5em;
+    }
+  </style>
 </head>
 
 <body>
   <script type="text/javascript">
     TMS_NUMBER = 2050001;
+    DIRECTION1_TEXT = "Suunta: tulee vasemmalta";
+    DIRECTION2_TEXT = "Suunta: tulee oikealta";
+
+    VEHICLE_CAR = 1;
+    VEHICLE_TRUCK = 2;
+    VEHICLE_BUS = 3;
+
     SEP = ',';
-    // SERVER = 'wss://smarter-data.tt.utu.fi/';
-    SERVER = 'ws://localhost:8080/'
+    SERVER = 'wss://smarter-data.tt.utu.fi/ws/';
+    // SERVER = 'ws://localhost:8080/'
 
-    function send_data(direction, vehicle_class) {
-      console.log("here");
+    function send_data(ws, direction, vehicle_class) {
       ws.send(TMS_NUMBER + SEP + direction + SEP + vehicle_class + SEP + new Date().getTime());
     }
   </script>
@@ -44,13 +55,39 @@
   <div class="container">
     <div class="row">
       <div class="col-sm">
-        <button type="button" class="btn btn-lg btn-primary">Kuorma-auto</button>
+        <button id="direction1" type="button" class="btn btn-lg btn-light" disabled>Suunta 1</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 1, VEHICLE_CAR)">Henkilöauto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 1, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 1, VEHICLE_BUS)">Bussi</button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm">
+        <button id="direction2" type="button" class="btn btn-lg btn-light" disabled>Suunta 2</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-primary" onclick="send_data(ws, 2, VEHICLE_CAR)">Henkilöauto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-dark" onclick="send_data(ws, 2, VEHICLE_TRUCK)">Kuorma-auto</button>
+      </div>
+      <div class="col-sm">
+        <button type="button" class="btn btn-lg btn-warning" onclick="send_data(ws, 2, VEHICLE_BUS)">Bussi</button>
       </div>
     </div>
   </div>
   <script type="text/javascript">
     // Varoita, jos piste ei ole valittuna.
 
+    document.getElementById('direction1').textContent = DIRECTION1_TEXT;
+    document.getElementById('direction2').textContent = DIRECTION2_TEXT;
+
     // https://stackoverflow.com/a/23176223
     function connect() {
       ws = new WebSocket(SERVER);