diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index f122849..5a0fc3e 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+html {
+  height: 100%;
+}
+
 .gallery {
   padding: 50px;
   height: auto;
@@ -25,33 +29,36 @@ body {
   background-color: #000000;
   color: #e6e6e6;
   line-height: 1.5;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar chat-area";
   min-width: 100%;
+  height: 100%;
 }
 
 main {
   display: flex;
   flex: 1;
   overflow: hidden;
+  grid-area: chat-area;
 }
 
 header {
   background-color: #000000;
-  padding-top: 10px;
-  padding-left: 20px;
-  padding-right: 20px;
-    padding-bottom: 10px;
+  grid-area: header;
+  padding: 10px 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 
 header .logo {
-    color: #fff;
+  color: #fff;
   font-weight: bold;
- font-size: 1.2em;
+  font-size: 1.2em;
   color: #fff;
 }
 
@@ -81,13 +88,13 @@ a {
 }
 
 h1 {
-    font-size: 2em;
-    color: #f05a28;
+  font-size: 2em;
+  color: #f05a28;
 }
 
 h2 {
-    font-size: 1.4em;
-    color: #f05a28;
+  font-size: 1.4em;
+  color: #f05a28;
 }
 
 
@@ -112,10 +119,10 @@ h2 {
 }
 
 footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
 }
 
 .message-list {
@@ -135,6 +142,11 @@ footer {
   background: #000000;
 }
 
+.chat-messages {
+  display: flex;
+  flex-direction: column;
+}
+
 .container {
   flex: 1;
   padding: 10px;
@@ -151,9 +163,11 @@ footer {
   }
 
 }
-.chat-messages picture img {    
-    cursor: pointer;
+
+.chat-messages picture img {
+  cursor: pointer;
 }
+
 .chat-messages::-webkit-scrollbar {
   display: none;
 }
@@ -348,6 +362,7 @@ a {
   padding-right: 20px;
   padding-top: 10px;
   overflow-y: auto;
+  grid-area: sidebar;
 }
 
 .sidebar h2 {
@@ -376,65 +391,68 @@ a {
 }
 
 @keyframes glow {
-    0% {
-	box-shadow: 0 0 5px #3498db;
-    }
-    50% {
-	box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
-    }
-    100% {
-	box-shadow: 0 0 5px #3498db;
-    }
+  0% {
+    box-shadow: 0 0 5px #3498db;
+  }
+  50% {
+    box-shadow: 0 0 20px #3498db, 0 0 30px #3498db;
+  }
+  100% {
+    box-shadow: 0 0 5px #3498db;
+  }
 }
 
 .glow {
-    animation: glow 1s;
+  animation: glow 1s;
 }
 
 
-
 @media only screen and (max-width: 768px) {
-    
-    header{
-        top: 0;
-        left: 0;
-            text-overflow: ellipsis;
-        width:100%;
-        display: flex;
-        flex-direction: column;
-        .logo {
-            display:block;
-            flex: 1;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            h2 {
-                font-size: 14px;
-            }
-            text-align: center;
-        }
-        nav {
-            text-align: right;
-            flex: 1;
-            display: block;
-            width: 100%;
-        }
-    }    
-    
-/*
-    body {
-        justify-content: flex-start;
+
+  header {
+    top: 0;
+    left: 0;
+    text-overflow: ellipsis;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .logo {
+      display: block;
+      flex: 1;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+
+      h2 {
+        font-size: 14px;
+      }
+
+      text-align: center;
     }
-    header{
-        position: sticky;
-        display: block;
-        .logo {
-            display:block;
-        }
+
+    nav {
+      text-align: right;
+      flex: 1;
+      display: block;
+      width: 100%;
     }
-    .chat-input {
-        position:sticky;
-    }*/
+  }
+
+  /*
+      body {
+          justify-content: flex-start;
+      }
+      header{
+          position: sticky;
+          display: block;
+          .logo {
+              display:block;
+          }
+      }
+      .chat-input {
+          position:sticky;
+      }*/
 }
 
 dialog {
@@ -494,13 +512,23 @@ dialog .dialog-button {
 
 
 @keyframes dialogFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes dialogScaleIn {
-  from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
-  to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
+  from {
+    transform: scale(0.95) translate(-50%, -50%);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1) translate(-50%, -50%);
+    opacity: 1;
+  }
 }
 
 dialog .dialog-button.primary {
@@ -513,12 +541,12 @@ dialog .dialog-button.primary:hover {
 }
 
 dialog .dialog-button.secondary {
-  background-color:  #f0a328;
+  background-color: #f0a328;
   color: #eee;
 }
 
 dialog .dialog-button.secondary:hover {
-  background-color:  #f0b84c;
+  background-color: #f0b84c;
 }
 
 
diff --git a/src/snek/templates/app.html b/src/snek/templates/app.html
index 5737746..c92ae76 100644
--- a/src/snek/templates/app.html
+++ b/src/snek/templates/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
     <link rel="manifest" href="/manifest.json" />
   <title>Snek</title>
   <style>{{highlight_styles}}</style>
@@ -50,10 +50,11 @@
     </nav>
 
   </header>
-  <main style="max-height: 100vh;overflow-y: none">
+
     {% block sidebar %}
     {% include "sidebar_channels.html" %}
     {% endblock %}
+  <main>
     
     {% block main %}
     <chat-window class="chat-area"></chat-window>
diff --git a/src/snek/templates/base.html b/src/snek/templates/base.html
index 2d2620e..fc9cf38 100644
--- a/src/snek/templates/base.html
+++ b/src/snek/templates/base.html
@@ -21,7 +21,7 @@
     <script src="/html-frame.js" type="module"></script>
     <script src="/generic-form.js?rid={{ rid }}" type="module"></script>
     <link rel="stylesheet" href="/html-frame.css">
-    <script defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
+    <script async defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
     {% block head %}
     {% endblock %}
 </head>