diff --git a/static/scripts/cubes.js b/static/scripts/cubes.js
index 46d7494..27c8179 100644
--- a/static/scripts/cubes.js
+++ b/static/scripts/cubes.js
@@ -1,5 +1,5 @@
-var width = 600;
-var height = 500;
+var width = document.getElementById("viewport").offsetWidth
+var height = 300;
 
 var renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(width, height);
@@ -29,14 +29,14 @@ var cube2 = new THREE.Mesh(cubeGeometry2, cubeMaterial2);
 scene.add(cube);
 scene.add(cube2);
 
-var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
-camera.position.y = 160;
-camera.position.z = 400;
+var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 6000);
+camera.position.y = 100;
+camera.position.z = 240;
 camera.lookAt(cube.position);
 
 scene.add(camera);
 
-var skyboxGeometry = new THREE.CubeGeometry(10000, 10000, 10000);
+var skyboxGeometry = new THREE.CubeGeometry(5000, 5000, 5000);
 var skyboxMaterial = new THREE.MeshBasicMaterial({ color: 0x232323, side: THREE.BackSide });
 var skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
 
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index 33d5200..5868447 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -40,7 +40,7 @@ window.addEventListener("load", function(evt) {
         try{
             if(!(dat.SOURCE_TCP.Orientation[0] === 0) && !(dat.SOURCE_TCP.Orientation[1] === 0) && !(dat.SOURCE_TCP.Orientation[2] === 0)){
                 // document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateZ(0deg)`
-                document.getElementById("gyroscopeTCP").style.transform = `rotateY(0deg) rotateX(${(-dat.SOURCE_TCP.Orientation[0])}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])}deg) `
+                // document.getElementById("gyroscopeTCP").style.transform = `rotateY(0deg) rotateX(${(-dat.SOURCE_TCP.Orientation[0])}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])}deg) `
                 // document.getElementById("gyroscopeTCP").style.transform = `rotateX(${(dat.SOURCE_TCP.Orientation[0])%360}deg) rotateZ(${(dat.SOURCE_TCP.Orientation[1])%360}deg) rotateY(${(dat.SOURCE_TCP.Orientation[2])%360}deg)`
                 // console.log(dat.SOURCE_TCP.Orientation)
                 renderTCP(dat.SOURCE_TCP.Orientation[0]*Math.PI/180,-dat.SOURCE_TCP.Orientation[1]*Math.PI/180,dat.SOURCE_TCP.Orientation[2]*Math.PI/180)
@@ -66,7 +66,7 @@ window.addEventListener("load", function(evt) {
 
         try{
             if(!(dat.SOURCE_SERIAL.Orientation[0] === 0) && /*!(dat.SOURCE_SERIAL.Orientation[1] === 0) &&*/ !(dat.SOURCE_SERIAL.Orientation[2] === 0)){
-                document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(0deg)`
+                // document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(0deg)`
                 // document.getElementById("gyroscopeSERIAL").style.transform = `rotateX(${dat.SOURCE_SERIAL.Orientation[0]}deg) rotateY(${dat.SOURCE_SERIAL.Orientation[1]}deg) rotateZ(${dat.SOURCE_SERIAL.Orientation[2]}deg)`
                 renderSerial(dat.SOURCE_SERIAL.Orientation[0]*Math.PI/180,dat.SOURCE_SERIAL.Orientation[1]*Math.PI/180,-dat.SOURCE_SERIAL.Orientation[2]*Math.PI/180)
             }
diff --git a/static/style.css b/static/style.css
index 36dbe89..763548d 100644
--- a/static/style.css
+++ b/static/style.css
@@ -28,9 +28,39 @@ body { margin: 0; padding: 0; }
 body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}
 
 .float-child {
-    width: 45%;
+    width: 50%;
     float: left;
-    padding: 10px;
+}
+
+.sceneMap {
+    width: 200px;
+    height: 50vh;
+    border: 0px solid #CCC;
+    /*margin: 20px;*/
+    perspective: 400px;
+}
+
+
+.sceneMap, #map {
+    width: 100%;
+}
+
+.right-col {
+    display: flex;
+    flex-flow: wrap;
+    width: 34%;
+}
+.left-col {
+    display: flex;
+    flex-flow: wrap;
+    width: calc(66% - 20px);
+    padding-right: 20px;
+
+}
+
+.compass-container {
+    display: flex;
+    flex-flow: wrap;
 }
 
 .outer {
@@ -38,6 +68,7 @@ body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman"
     width: 300px;
     height: 200px;
     margin: 20px;
+    margin-bottom: 50px;
 }
 
 canvas {
@@ -88,13 +119,29 @@ canvas {
     position: relative;
     width: 200px;
     height: 200px;
-    margin: 20px;
+    /*margin: 20px;*/
 }
 #compass1 {
     position: relative;
     width: 200px;
     height: 200px;
-    margin: 20px;
+    /*margin: 20px;*/
+}
+
+.accuracy-container {
+    display: flex;
+    flex-flow: wrap;
+    margin: 20px 0;
+}
+
+.accuracy-values {
+    margin: 28px 20px 0 20px;
+}
+
+.led-container {
+    display: flex;
+    flex-flow: column;
+    margin: 20px 0;
 }
 
 #bezel {
@@ -289,14 +336,6 @@ canvas {
     }
 }
 
-.sceneMap {
-    width: 200px;
-    height: 200px;
-    border: 0px solid #CCC;
-    margin: 20px;
-    perspective: 400px;
-}
-
 .scene {
     width: 200px;
     height: 200px;
@@ -312,6 +351,11 @@ canvas {
     border-radius: 50%;
 }
 
+.lamps {
+    display: flex;
+    flex-flow: row;
+}
+
 .lampinner{
     width: 40px;
     height: 40px;
@@ -420,3 +464,8 @@ label { margin-right: 10px; }
     -webkit-transition: opacity .15s ease-in-out;
     transition: opacity .15s ease-in-out;
 }
+
+#viewport {
+    width: 100%;
+    height: 360px;
+}
diff --git a/templates/index.html b/templates/index.html
index 86e296f..9d8c1cb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,14 +3,14 @@
 <head>
   <meta charset="utf-8">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.js"></script>
-  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
   <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
-  <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
+  <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet"/>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124/three.js"></script>
   <script src="static/scripts/websocket.js"></script>
   <link rel="stylesheet" href="static/style.css">
-<!--  <script src="http://www.x3dom.org/release/x3dom.js"></script>-->
-<!--  <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">-->
+  <!--  <script src="http://www.x3dom.org/release/x3dom.js"></script>-->
+  <!--  <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">-->
 </head>
 <body>
 <table style="font-size: small">
@@ -36,22 +36,24 @@
         <button id="fullReplay">Gesamte Wiedergabe</button>
       </div>
       <br>
-      <label id="tracking state" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking state: </label><br>
-      <label id="TCPlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone long: </label>
-      <label id="TCPlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
-      <label id="SERIALlong" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
-      <label id="SERIALlat" style= "font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
+      <label id="tracking state" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Tracking
+        state: </label><br>
+      <label id="TCPlong" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone
+        long: </label>
+      <label id="TCPlat" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone lat: </label>
+      <label id="SERIALlong" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox long: </label>
+      <label id="SERIALlat" style="font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox lat: </label>
     </td>
-    <td valign="top" width="100%">
+    <td valign="top">
       <div id="output"><p>.</p></div>
     </td>
   </tr>
 </table>
 
 <div class="float-container">
-  <div class="float-child">
-    <div class="sceneMap" style='width: 500px; height: 500px;'>
-      <div id="map" style='width: 500px; height: 500px;'></div>
+  <div class="float-child left-col">
+    <div class="sceneMap">
+      <div id="map"></div>
       <div id="state-legend" class="legend">
         <h4>Legende</h4>
         <div><span style="background-color: rgba(214, 69, 65, 1)"></span>Ublox</div>
@@ -59,86 +61,16 @@
       </div>
     </div>
 
-    <div class="container">
-      <div style="width: 500px; height: 150px;">
-        <canvas id="accuracy" width="500" height="150"></canvas>
-      </div>
-      <div class="float container">
-        <div class="float-child">
-          <div class="container" style="width: 150px; height: 50px">
-            <label id="serialHAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox HAcc: </label><br>
-            <label id="serialVAcc" style= "color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox VAcc: </label>
-          </div>
-          <div class="container" style="width: 150px; height: 50px">
-            <label id="tcpHAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone HAcc: </label><br>
-            <label id="tcpVAcc" style= "color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone VAcc: </label>
-          </div>
-        </div>
-        <div class="float-child">
-          <div class="float container">
-            <div class="float-child">
-              <div class="container" style="width: 350px; height: 50px">
-                <div class="lamp">
-                  <div class="lampinner" id="greenlamp" style="background-color: darkgreen"></div>
-                </div>
-                <label style="position: relative; bottom: 40px; left: 70px; color: white; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Dist. Ublox-Smartphone (m) <= Genauigkeit Ublox (m). </label>
-              </div>
-            </div>
-            <div class="float-child">
-              <div class="container" style="width: 350px; height: 50px">
-                <div class="lamp">
-                  <div class="lampinner" id="redlamp" style="background-color: #8b0000"></div>
-                </div>
-                <label style="position: relative; bottom: 40px; left: 70px; color: white; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Dist. Ublox-Smartphone (m) > Genauigkeit Ublox (m). </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div id="viewport" style="height: 500px; width: 500px">
-    </div>
-    <div class="slidecontainer">
-      <button id="calibrate">Smartphone Ausrichtung kalibrieren</button>
-      <button id="deleteCalibration">Kalibrierung zurücksetzen</button>
-      <button id="manualCalibration">Manuelle Kalibrierung</button>
-      <div id="manCalContainer">
-        <p><br>Manuelle Kalibrierung</p>
-        <label>Pitch<input type="range" min="-90" max="90" value="0" class="slider" id="pitchRange" style="margin: 10px 0px"></label>
-        <label>Yaw<input type="range" min="-90" max="90" value="0" class="slider" id="yawRange" style="margin: 10px 0px"></label>
-        <label>Roll<input type="range" min="-90" max="90" value="0" class="slider" id="rollRange" style="margin: 10px 0px"></label>
-      </div>
-    </div>
-    <script src="static/scripts/cubes.js"></script>
-    <div class="scene">
-      <p style="font-size: large">Smartphone</p>
-      <div id="gyroscopeTCP" class="cube">
-        <div class="cube__face cube__face--front">back</div>
-        <div class="cube__face cube__face--back">front</div>
-        <div class="cube__face cube__face--right">right</div>
-        <div class="cube__face cube__face--left">left</div>
-        <div class="cube__face cube__face--top">top</div>
-        <div class="cube__face cube__face--bottom">bottom</div>
-      </div>
-    </div>
-    <div class="scene">
-      <p style="font-size: large">Ublox</p>
-      <div id="gyroscopeSERIAL" class="cube">
-        <div class="cube__face cube__face--front">back</div>
-        <div class="cube__face cube__face--back">front</div>
-        <div class="cube__face cube__face--right">right</div>
-        <div class="cube__face cube__face--left">left</div>
-        <div class="cube__face cube__face--top">top</div>
-        <div class="cube__face cube__face--bottom">bottom</div>
-      </div>
-    </div>
-  </div>
-
-  <div class="float-child">
     <div class="outer">
-      <label id="speedTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Smartphone (km/h): </label><br>
-      <label id="speedSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed Ublox (km/h): </label><br>
+      <div>
+        <label id="speedTCP"
+                  style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed
+        Smartphone (km/h): </label><br>
+        <label id="speedSERIAL"
+               style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Speed
+          Ublox
+          (km/h): </label><br>
+      </div>
       <div>
         <canvas id="speedometer" width="320" height="230"></canvas>
         <canvas id="speedometerSpeeds" width="320" height="230"></canvas>
@@ -148,44 +80,98 @@
         <p class="speed34">188</p>
         <p class="speedMax">250</p>
       </div>
-    </div><br>
-    <div class="float-container">
-      <div class="float-child">
-        <div id="compass">
-          <label id="compassSERIAL" style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label>
-          <div id="bezel"></div>
-          <div id="NWSE" class="quad"></div>
-          <div id="NESW" class="quad"></div>
-          <div id="NS" class="quad"></div>
-          <div id="WE" class="quad"></div>
-          <span id="N" class="dir">N</span>
-          <span id="E" class="dir">O</span>
-          <span id="S" class="dir">S</span>
-          <span id="W" class="dir">W</span>
-          <div id="needle"></div>
-          <div id="axis"></div>
+    </div>
+
+    <div class="led-container">
+      <div class="lamps">
+        <div class="lamp">
+          <div class="lampinner" id="greenlamp" style="background-color: darkgreen"></div>
         </div>
+        <div class="lamp">
+          <div class="lampinner" id="redlamp" style="background-color: #8b0000"></div>
+        </div>
+        <label style="margin:auto; margin-left: 10px">Smartphone innerhalb Toleranzbereich</label>
       </div>
-      <div class="float-child">
-        <div id="compass1">
-          <label id="compassTCP" style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
-          <div id="bezelTCP"></div>
-          <div id="NWSETCP" class="quad"></div>
-          <div id="NESWTCP" class="quad"></div>
-          <div id="NSTCP" class="quad"></div>
-          <div id="WETCP" class="quad"></div>
-          <span id="NTCP" class="dir">N</span>
-          <span id="ETCP" class="dir">O</span>
-          <span id="STCP" class="dir">S</span>
-          <span id="WTCP" class="dir">W</span>
-          <div id="needleTCP"></div>
-          <div id="axisTCP"></div>
+    </div>
+
+    <div class="accuracy-container">
+      <div style="width: 500px; height: 150px;">
+        <canvas id="accuracy" width="500" height="150"></canvas>
+      </div>
+      <div class="accuracy-values">
+        <div class="container" style="width: 150px; height: 50px">
+          <label id="serialHAcc"
+                 style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
+            HAcc: </label><br>
+          <label id="tcpHAcc"
+                 style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
+            HAcc: </label>
+        </div>
+        <div class="container" style="width: 150px; height: 50px">
+          <label id="serialVAcc"
+                 style="color: rgba(214, 69, 65, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox
+            VAcc: </label><br>
+          <label id="tcpVAcc"
+                 style="color: rgba(30, 139, 195, 1); font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif">Phone
+            VAcc: </label>
         </div>
       </div>
     </div>
   </div>
-  <div class="float-child">
 
+  <div class="float-child right-col">
+    <div class="compass-container">
+      <div id="compass">
+        <label id="compassSERIAL"
+               style="color: rgba(214, 69, 65, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Ublox </label>
+        <div id="bezel"></div>
+        <div id="NWSE" class="quad"></div>
+        <div id="NESW" class="quad"></div>
+        <div id="NS" class="quad"></div>
+        <div id="WE" class="quad"></div>
+        <span id="N" class="dir">N</span>
+        <span id="E" class="dir">O</span>
+        <span id="S" class="dir">S</span>
+        <span id="W" class="dir">W</span>
+        <div id="needle"></div>
+        <div id="axis"></div>
+      </div>
+      <div id="compass1">
+        <label id="compassTCP"
+               style="color: rgba(30, 139, 195, 1); font: 15px 'Helvetica Neue', Arial, Helvetica, sans-serif">Smartphone </label><br>
+        <div id="bezelTCP"></div>
+        <div id="NWSETCP" class="quad"></div>
+        <div id="NESWTCP" class="quad"></div>
+        <div id="NSTCP" class="quad"></div>
+        <div id="WETCP" class="quad"></div>
+        <span id="NTCP" class="dir">N</span>
+        <span id="ETCP" class="dir">O</span>
+        <span id="STCP" class="dir">S</span>
+        <span id="WTCP" class="dir">W</span>
+        <div id="needleTCP"></div>
+        <div id="axisTCP"></div>
+      </div>
+    </div>
+    <div>
+      <div id="viewport">
+      </div>
+      <div class="slidecontainer">
+        <button id="calibrate">Smartphone Ausrichtung kalibrieren</button>
+        <button id="deleteCalibration">Kalibrierung zurücksetzen</button>
+        <button id="manualCalibration">Manuelle Kalibrierung</button>
+        <div id="manCalContainer">
+          <p><br>Manuelle Kalibrierung</p>
+          <label>Pitch<input type="range" min="-90" max="90" value="0" class="slider" id="pitchRange"
+                             style="margin: 10px 0px"></label>
+          <label>Yaw<input type="range" min="-90" max="90" value="0" class="slider" id="yawRange"
+                           style="margin: 10px 0px"></label>
+          <label>Roll<input type="range" min="-90" max="90" value="0" class="slider" id="rollRange"
+                            style="margin: 10px 0px"></label>
+        </div>
+      </div>
+      <script src="static/scripts/cubes.js"></script>
+
+    </div>
   </div>
 </div>