diff --git a/static/css/style.css b/static/css/style.css
index e69de29..3fafb1a 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -0,0 +1,233 @@
+.stream-canvas {
+    width: 100%;
+    height: 100%;
+}
+
+.debug-img {
+    max-width: 100%;
+}
+
+
+/*
+Pure 2 column layout
+*/
+body {
+    color: #777;
+}
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+#layout {
+    position: relative;
+    left: 0;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 150px;
+        width: 150px;
+    }
+
+    #layout.active .menu-link {
+        left: 150px;
+    }
+
+.content {
+    margin: 0 auto;
+    padding: 0 2em;
+    max-width: 800px;
+    margin-bottom: 50px;
+    line-height: 1.6em;
+}
+
+.header {
+    margin: 0;
+    color: #333;
+    text-align: center;
+    padding: 2.5em 2em 0;
+    border-bottom: 1px solid #eee;
+}
+   .header h1 {
+       margin: 0.2em 0;
+       font-size: 3em;
+       font-weight: 300;
+   }
+    .header h2 {
+       font-weight: 300;
+       color: #ccc;
+       padding: 0;
+       margin-top: 0;
+   }
+
+.content-subhead {
+   margin: 50px 0 20px 0;
+   font-weight: 300;
+   color: #888;
+}
+
+#menu {
+    margin-left: -150px; /* "#menu" width */
+    width: 150px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #191818;
+    overflow-y: auto;
+}
+    /*
+    All anchors inside the menu should be styled like this.
+    */
+    #menu a {
+        color: #999;
+        border: none;
+        padding: 0.6em 0 0.6em 0.6em;
+    }
+
+    /*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+     #menu .pure-menu,
+     #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+    }
+
+    /*
+    Add that light border to separate items into groups.
+    */
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #333;
+    }
+        /*
+        Change color of the anchor links on hover/focus.
+        */
+        #menu .pure-menu li a:hover,
+        #menu .pure-menu li a:focus {
+            background: #333;
+        }
+
+    /*
+    This styles the selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected,
+    #menu .pure-menu-heading {
+        background: #1f8dd6;
+    }
+        /*
+        This styles a link within a selected menu item `<li>`.
+        */
+        #menu .pure-menu-selected a {
+            color: #fff;
+        }
+
+    /*
+    This styles the menu heading.
+    */
+    #menu .pure-menu-heading {
+        font-size: 110%;
+        color: #fff;
+        margin: 0;
+    }
+
+    .menu-link {
+        position: fixed;
+        display: block; /* show this only on small screens */
+        top: 0;
+        left: 0; /* "#menu width" */
+        background: #000;
+        background: rgba(0,0,0,0.7);
+        font-size: 10px; /* change this value to increase/decrease button size */
+        z-index: 10;
+        width: 2em;
+        height: auto;
+        padding: 2.1em 1.6em;
+    }
+    
+        .menu-link:hover,
+        .menu-link:focus {
+            background: #000;
+        }
+    
+        .menu-link span {
+            position: relative;
+            display: block;
+        }
+    
+        .menu-link span,
+        .menu-link span:before,
+        .menu-link span:after {
+            background-color: #fff;
+            width: 100%;
+            height: 0.2em;
+        }
+    
+            .menu-link span:before,
+            .menu-link span:after {
+                position: absolute;
+                margin-top: -0.6em;
+                content: " ";
+            }
+    
+            .menu-link span:after {
+                margin-top: 0.6em;
+            }
+    
+    
+    /* -- Responsive Styles (Media Queries) ------------------------------------- */
+    
+    /*
+    Hides the menu at `48em`, but modify this based on your app's needs.
+    */
+    @media (min-width: 48em) {
+    
+        .header,
+        .content {
+            padding-left: 2em;
+            padding-right: 2em;
+        }
+    
+        #layout {
+            padding-left: 150px; /* left col width "#menu" */
+            left: 0;
+        }
+        #menu {
+            left: 150px;
+        }
+    
+        .menu-link {
+            position: fixed;
+            left: 150px;
+            display: none;
+        }
+    
+        #layout.active .menu-link {
+            left: 150px;
+        }
+    }
+    
+    @media (max-width: 48em) {
+        /* Only apply this when the window is small. Otherwise, the following
+        case results in extra padding on the left:
+            * Make the window small.
+            * Tap the menu to trigger the active state.
+            * Make the window large again.
+        */
+        #layout.active {
+            position: relative;
+            left: 150px;
+        }
+    }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 12c3e19..a87c299 100755
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,7 +7,30 @@
         {{ template "head" .}}
     </head>
     <body>
-        {{template "content" .}}
+        <div id="menu">
+            <div class="pure-menu">
+                <a class="pure-menu-heading" href="#">Streams</a>
+                <ul class="pure-menu-list">
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
+                    <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
+                </ul>
+            </div>
+        </div>
+        <div id="main">
+            <div class="content-header">
+                <h1>Stream</h1>
+                <h2>subtitle</h2>
+            </div>
+            <div class="content">
+                <div class="pure-g">
+                    <div class="pure-u-1-3"></div>
+                    <div class="pure-u-1-3">
+                        {{template "content" .}}
+                    </div>
+                    <div class="pure-u-1-3"></div>
+                </div>
+            </div>
+        </div>
     </body>
 </html>
 {{end}}
\ No newline at end of file
diff --git a/templates/stream.html b/templates/stream.html
index f95a762..a98c1e8 100755
--- a/templates/stream.html
+++ b/templates/stream.html
@@ -4,11 +4,19 @@
 {{end}}
 {{define "content"}}
 <div>
-    <canvas id="canvas" width="1280" height="720">Not supported</canvas>
+    <canvas class="stream-canvas" id="canvas">Not supported</canvas>
     <img src="{{ .GetCurrentColorURL }}" id="current_color_stream" hidden>
-    <img src="{{ .GetPreviousURL }}" width="425" height="240">
-    <img src="{{ .GetDebugURL }}" width="425" height="240">
-    <img src="{{ .GetCurrentURL }}" width="425" height="240">
+    <div class="pure-g">
+        <div class="pure-u-1-3">
+            <img src="{{ .GetPreviousURL }}" class="debug-img">
+        </div>
+        <div class="pure-u-1-3">
+            <img src="{{ .GetDebugURL }}" class="debug-img">
+        </div>
+        <div class="pure-u-1-3">
+            <img src="{{ .GetCurrentURL }}" class="debug-img">
+        </div>
+    </div>
 </div>
 <form action="/addWatchArea" method="GET" id="newWatchAreaForm">
     <input type="hidden" name="streamName" value="{{ .Name }}">