diff --git a/static/css/style.css b/static/css/style.css
index 91fc244..544dde3 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,12 +1,3 @@
-.stream-canvas {
-    width: 100%;
-    height: 100%;
-}
-
-.debug-img {
-    max-width: 100%;
-}
-
 .flex-column {
     display: flex;
     flex-direction: column;
@@ -18,20 +9,34 @@
 }
 
 .menu {
-    flex-basis: 10%;
+    flex-basis: 15%;
     align-items: center;
 }
 
 .menu-header {
     font-size: 30px;
     margin-top: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .menu-item {
     font-size: 20px;
     margin-top: 15px;
+    margin-left: 10px;
+    margin-right: 10px;
 }
 
 .content {
+    flex-basis: 85%;
+}
+
+.stream-canvas {
     flex-basis: 90%;
+    align-self: center;
+}
+
+.debug-img {
+    flex-basis: 30%;
+    align-self: stretch;
 }
\ No newline at end of file
diff --git a/templates/stream.html b/templates/stream.html
index a98c1e8..0a0bf9d 100755
--- a/templates/stream.html
+++ b/templates/stream.html
@@ -3,61 +3,61 @@
 <script src="/static/js/stream.js"></script>
 {{end}}
 {{define "content"}}
-<div>
-    <canvas class="stream-canvas" id="canvas">Not supported</canvas>
-    <img src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden>
-    <div class="pure-g">
-        <div class="pure-u-1-3">
-            <img src="{{ .GetPreviousURL }}" class="debug-img">
+<div class="flex-column">
+    <!--<canvas class="stream-canvas" id="canvas">Not supported</canvas>-->
+    <img class="stream-canvas" src="{{ .GetCurrentColorURL }}" id="current_color_stream" >
+    <div class="flex-row">
+        <div class="debug-img">
+            <img src="{{ .GetPreviousURL }}">
         </div>
-        <div class="pure-u-1-3">
-            <img src="{{ .GetDebugURL }}" class="debug-img">
+        <div class="debug-img">
+            <img src="{{ .GetDebugURL }}">
         </div>
-        <div class="pure-u-1-3">
-            <img src="{{ .GetCurrentURL }}" class="debug-img">
+        <div class="debug-img">
+            <img src="{{ .GetCurrentURL }}">
         </div>
     </div>
-</div>
-<form action="/addWatchArea" method="GET" id="newWatchAreaForm">
-    <input type="hidden" name="streamName" value="{{ .Name }}">
-    <table class="pure-table pure-table-horizontal">
-        <caption>Watches</caption>
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th colspan="3">Color</th>
-                <th colspan="4">Area</th>
-                <th>Add/Remove</th>
-            </tr>
-            <tr>
-                <th></th>
-                <th>R</th>
-                <th>G</th>
-                <th>B</th>
-                <th>MinX</th>
-                <th>MinY</th>
-                <th>MaxX</th>
-                <th>MaxY</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody id="watchAreas">
-            {{range $watchArea := .WatchAreas}}
-                <tr style="background-color:rgb({{ $watchArea.Color.R }}, {{$watchArea.Color.G}}, {{$watchArea.Color.B}})">
-                    <td>{{ $watchArea.Name }}</td>
-                    <td>{{ $watchArea.Color.R }}</td>
-                    <td>{{ $watchArea.Color.G }}</td>
-                    <td>{{ $watchArea.Color.B }}</td>
-                    <td>{{ $watchArea.Area.Min.X }}</td>
-                    <td>{{ $watchArea.Area.Min.Y }}</td>
-                    <td>{{ $watchArea.Area.Max.X }}</td>
-                    <td>{{ $watchArea.Area.Max.Y }}</td>
-                    <td>Remove</td>
+    <form action="/addWatchArea" method="GET" id="newWatchAreaForm">
+        <input type="hidden" name="streamName" value="{{ .Name }}">
+        <table class="pure-table pure-table-horizontal">
+            <caption>Watches</caption>
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th colspan="3">Color</th>
+                    <th colspan="4">Area</th>
+                    <th>Add/Remove</th>
                 </tr>
-            {{end}}
-        </tbody>
-    </table>
-</form>
+                <tr>
+                    <th></th>
+                    <th>R</th>
+                    <th>G</th>
+                    <th>B</th>
+                    <th>MinX</th>
+                    <th>MinY</th>
+                    <th>MaxX</th>
+                    <th>MaxY</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody id="watchAreas">
+                {{range $watchArea := .WatchAreas}}
+                    <tr style="background-color:rgb({{ $watchArea.Color.R }}, {{$watchArea.Color.G}}, {{$watchArea.Color.B}})">
+                        <td>{{ $watchArea.Name }}</td>
+                        <td>{{ $watchArea.Color.R }}</td>
+                        <td>{{ $watchArea.Color.G }}</td>
+                        <td>{{ $watchArea.Color.B }}</td>
+                        <td>{{ $watchArea.Area.Min.X }}</td>
+                        <td>{{ $watchArea.Area.Min.Y }}</td>
+                        <td>{{ $watchArea.Area.Max.X }}</td>
+                        <td>{{ $watchArea.Area.Max.Y }}</td>
+                        <td>Remove</td>
+                    </tr>
+                {{end}}
+            </tbody>
+        </table>
+    </form>
+</div>
 
 <template id="newWatchAreaTemplate" hidden>
     <tr id="addWatchAreaRow">