diff --git a/css/app.css b/css/app.css
index 33d21f8..eaac353 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1 +1 @@
-body,html{width:100%;height:100%;padding:0;margin:0;overflow:hidden;}canvas{width:100%;height:100%;}.debug #svg{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;}
\ No newline at end of file
+body,html{width:100%;height:100%;padding:0;margin:0;overflow:hidden;background-color:black;}canvas{width:100%;height:100%;}#svg{display:none;}.debug #svg{display:block;position:absolute;top:0;bottom:0;left:0;right:0;width:100%;height:100%;}
\ No newline at end of file
diff --git a/index.html b/index.html
index 16fc957..8118605 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
     <link rel="stylesheet" href="css/app.css" type="text/css">
     
 </head>
-<body class="debug">
+<body class="">
     <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="node_modules/three/three.js"></script>
     <script src="index.js"></script>
diff --git a/index.js b/index.js
index c167e5f..5dd62ad 100644
--- a/index.js
+++ b/index.js
@@ -46,8 +46,8 @@ function onRoomData(data) {
             cube = new THREE.Mesh( geometry, material );
         }
 
-        cube.position.x = room.position.x;
-        cube.position.y = room.position.y * -1; // FIXME why flipped?
+        cube.position.x = room.position.x + room.dimensions.width / 2;
+        cube.position.y = room.position.y * -1 - room.dimensions.height / 2; // FIXME why flipped?
         cube.name = room.number;
 
         cubes.push(cube);
diff --git a/scss/app.scss b/scss/app.scss
index 4b395a7..62aab74 100644
--- a/scss/app.scss
+++ b/scss/app.scss
@@ -6,12 +6,17 @@ html
     padding: 0;
     margin: 0;
     overflow: hidden;
+    background-color: black;
 }
 canvas {
     width: 100%;
     height: 100%;
 }
+#svg {
+    display: none;
+}
 .debug #svg{
+    display: block;
     position: absolute;
     top: 0;
     bottom: 0;