diff --git a/static/css/style.css b/static/css/style.css
index 3fafb1a..91fc244 100755
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -7,227 +7,31 @@
     max-width: 100%;
 }
 
-
-/*
-Pure 2 column layout
-*/
-body {
-    color: #777;
-}
-.pure-img-responsive {
-    max-width: 100%;
-    height: auto;
+.flex-column {
+    display: flex;
+    flex-direction: column;
 }
 
-#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;
+.flex-row {
+    display: flex;
+    flex-direction: row;
 }
 
-#layout {
-    position: relative;
-    left: 0;
-    padding-left: 0;
+.menu {
+    flex-basis: 10%;
+    align-items: center;
 }
-    #layout.active #menu {
-        left: 150px;
-        width: 150px;
-    }
 
-    #layout.active .menu-link {
-        left: 150px;
-    }
+.menu-header {
+    font-size: 30px;
+    margin-top: 20px;
+}
+
+.menu-item {
+    font-size: 20px;
+    margin-top: 15px;
+}
 
 .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
+    flex-basis: 90%;
+}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index a87c299..9bd2385 100755
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,28 +7,16 @@
         {{ template "head" .}}
     </head>
     <body>
-        <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 class="flex-row">
+            <div class="menu flex-column">
+                <div class="menu-header">Streams</div>
+                <div class="menu-item">Test</div>
+                <div class="menu-item">Test</div>
+                <div class="menu-item">Test</div>
+                <div class="menu-item">Test</div>
+                <div class="menu-item">Test</div>
             </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>
+                {{template "content" .}}
             </div>
         </div>
     </body>