diff --git a/static/scripts/map.js b/static/scripts/map.js
index 53ce05e..8385575 100644
--- a/static/scripts/map.js
+++ b/static/scripts/map.js
@@ -29,14 +29,6 @@ var emptySERIAL = {
 }
 
 map.on('load', function () {
-    // save full coordinate list for later
-    //var coordinates = data.features[0].geometry.coordinates;
-
-    // start by showing just the first coordinate
-    //data.features[0].geometry.coordinates = [coordinates[0]];
-
-    // add it to the map
-    //map.addSource('trace', { type: 'geojson', data: data });
 
     map.addSource('routeTCP', { 'type': 'geojson', 'data': emptyTCP })
     map.addSource('routeSERIAL', { 'type': 'geojson', 'data': emptySERIAL })
@@ -70,21 +62,26 @@ map.on('load', function () {
     });
 
 
-    map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 17 });
+    map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 6 });
     map.setPitch(30);
 
     var stateLegendEl = document.getElementById('state-legend');
     stateLegendEl.style.display = 'block';
 })
 
-function updateMapTCP (long, lat) {
-    emptyTCP.features[0].geometry.coordinates.push([long, lat]);
+function updateMap (TCPlong, TCPlat, SERIALlong, SERIALlat) {
+    emptyTCP.features[0].geometry.coordinates.push([TCPlong, TCPlat]);
     map.getSource('routeTCP').setData(emptyTCP);
-    map.panTo([long, lat]);
-}
-
-function updateMapSERIAL (long, lat) {
-    emptySERIAL.features[0].geometry.coordinates.push([long, lat]);
+    emptySERIAL.features[0].geometry.coordinates.push([SERIALlong, SERIALlat]);
     map.getSource('routeSERIAL').setData(emptySERIAL);
-    //map.panTo([long, lat]);
+    if (!([TCPlong, TCPlat] = [0,0])) {
+        map.panTo({ 'center': [TCPlong, TCPlat], 'zoom': 17 });
+    }
+    else if (!([SERIALlong, SERIALlat] = [0,0])) {
+        map.panTo({ 'center': [SERIALlong, SERIALlat], 'zoom': 17 });
+    }
+    else {
+        map.jumpTo({ 'center': [9.19640999, 49.12283027], 'zoom': 6 });
+    }
+
 }
\ No newline at end of file
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index d5b19fa..0577c3d 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -32,11 +32,11 @@ window.addEventListener("load", function(evt) {
         }
         ws.onmessage = function(evt) {
             //print2("RESPONSE: " + evt.data);
-            dataSmartphone.push(evt.data)
             // let dat = JSON.parse(evt.data)["bmi26x gyroscope"]
             // let dat = JSON.parse(evt.data)["lsm6dsm gyroscope"]
             //let dat = JSON.parse(evt.data)["lsm6ds3c gyroscope"]
             let dat = JSON.parse(evt.data)
+            dataSmartphone.push(dat)
             //console.log(evt.data)
             console.log("JSON geparsed onmessage", dat)
             //console.log(dat.SOURCE_TCP.Orientation)
@@ -62,9 +62,7 @@ window.addEventListener("load", function(evt) {
                                 // addData(orientation[0] / multiplier)
             */
             addData(dat.SOURCE_TCP.Orientation[0])
-            updateMapTCP(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0])
-            updateMapSERIAL(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
-            //updateMap(dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
+            updateMap(dat.SOURCE_TCP.Position[1], dat.SOURCE_TCP.Position[0], dat.SOURCE_SERIAL.Position[1], dat.SOURCE_SERIAL.Position[0])
 
             // addData(dat[0])
             //document.getElementById("gyroscope").style.transform = `rotateX(${-orientation[0]}deg) rotateY(${orientation[1]}deg) rotateZ(${-orientation[2]}deg) translateZ(50px)`
diff --git a/templates/index.html b/templates/index.html
index 7ba9b53..a889fa6 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -58,16 +58,16 @@
       height: 200px;
       position: relative;
       transform-style: preserve-3d;
-      /*transform: translateZ(-100px);*/
-      /*transition: transform 25ms;*/
+      transform: translateZ(-100px);
+      transition: transform 25ms;
     }
 
-    .cube.show-front  { transform:/*translateZ(-100px)*/ rotateY(   0deg); }
-    .cube.show-right  { transform:/*translateZ(-100px)*/ rotateY( -90deg); }
-    .cube.show-back   { transform:/*translateZ(-100px)*/ rotateY(-180deg); }
-    .cube.show-left   { transform:/*translateZ(-100px)*/ rotateY(  90deg); }
-    .cube.show-top    { transform:/*translateZ(-100px)*/ rotateX( -90deg); }
-    .cube.show-bottom { transform:/*translateZ(-100px)*/ rotateX(  90deg); }
+    .cube.show-front  { transform:translateZ(-100px) rotateY(   0deg); }
+    .cube.show-right  { transform:translateZ(-100px) rotateY( -90deg); }
+    .cube.show-back   { transform:translateZ(-100px) rotateY(-180deg); }
+    .cube.show-left   { transform:translateZ(-100px) rotateY(  90deg); }
+    .cube.show-top    { transform:translateZ(-100px) rotateX( -90deg); }
+    .cube.show-bottom { transform:translateZ(-100px) rotateX(  90deg); }
 
     .cube__face {
       position: absolute;
@@ -102,7 +102,7 @@
 <table style="font-size: small">
   <tr>
     <td valign="top" width="50%">
-      <p>Click "Open" to create a connection to the server.
+      <p>Click "Open" to create a connection to the server. {{.}}
       </p>
       <form>
         <button id="open">Verbinden</button>