diff --git a/dist/svg/menu.svg b/dist/svg/menu.svg
new file mode 100644
index 0000000..630a833
--- /dev/null
+++ b/dist/svg/menu.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1.6404"><line x1="5.6" x2="18.6" y1="7.7996" y2="7.7996"/><line x1="5.6" x2="18.6" y1="12" y2="12"/><line x1="5.6" x2="18.6" y1="16.2" y2="16.2"/></g></svg>
diff --git a/dist/treebird20.css b/dist/treebird20.css
index ee04818..63df980 100644
--- a/dist/treebird20.css
+++ b/dist/treebird20.css
@@ -119,6 +119,27 @@ table.ui-table td
     z-index: 999;
 }
 
+
+#navbar .navbar-btn
+{
+    width: 20px;
+    height: 20px;
+}
+
+#navbar .leftbar-btn
+{
+    float: left;
+    margin: 10px 0 10px 15px;
+    width: 30px;
+    height: 30px;
+}
+
+#navbar .rightbar-btn
+{
+    float: right;
+    margin: 15px;
+}
+
 #navbar img
 {
     vertical-align: middle;
@@ -137,16 +158,15 @@ table.ui-table td
 
 #navbar-right-container
 {
-    width: 795px;
     display: inline-block;
     position: relative;
-    top: 9px;
-    align-items: center;
+    float: right;
+    margin: 11px;
 }
 
 #navbar-right form
 {
-    float: right;
+    display: inline-block;
 }
 
 #navbar-right
@@ -168,8 +188,7 @@ table.ui-table td
 #main
 {
     width: 568px;
-    max-width: 568px !important;
-    min-width: 568px;
+    max-width: 568px;
     border-collapse: collapse !important;
     background-color: #fafafa;
     padding: 0;
@@ -688,7 +707,7 @@ svg.in-reply-to-icon
 
 .status-view
 {
-    display: inline;
+    display: inline-block;
     border: 1px solid #cacaca;
     background-color: #f3f3f3;
     border-radius: 3px;
@@ -775,6 +794,7 @@ svg.in-reply-to-icon
 .notification-info-format,
 .notification-content
 {
+    position: relative;
     min-width: 0;
     width: auto;
     padding: 0 0 0 10px;
@@ -806,8 +826,8 @@ svg.in-reply-to-icon
 
 .status .poster-stats
 {
-    display: flex;
-    align-items: center;
+    position: relative;
+    display: block;
     max-width: 480px;
 }
 
@@ -818,11 +838,11 @@ svg.in-reply-to-icon
 
 .poster-stats .alignend
 {
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    justify-content: flex-end;
+    background-color: #fafafa;
+    display: inline-block;
+    right: 0px;
+    padding: 1px 5px;
+    position: absolute;
 }
 
 .status .username,
@@ -1430,7 +1450,7 @@ p}
     max-height: 180px;
 }
 
-input[type=radio].hidden:not(:checked) + .emoji-picker-emojos 
+input[type=radio].hidden:not(:checked) + .emoji-picker-emojos
 {
     display: none;
 }
@@ -2120,3 +2140,98 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
     text-align: center;
     display: block;
 }
+
+/****************************************
+ *           Responsiveness             *
+ ****************************************/
+@media only screen and (max-width: 1000px)
+{
+    #main-page, #navbar
+    {
+        width: 750px;
+    }
+
+    input[type=checkbox].hidden#rightbar-show:not(:checked) + .ui-table #rightbar
+    {
+        display: none;
+    }
+
+    #rightbar
+    {
+        position: fixed;
+        right: 0px;
+        height: 100%;
+        z-index: 100;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    }
+}
+
+
+/* Requires flexbox */
+@media only screen and (max-width: 760px)
+{
+    input[type=checkbox].hidden#leftbar-show:not(:checked) + input + .ui-table #leftbar
+    {
+        display: none;
+    }
+    
+    #main-page-container
+    {
+        padding: 0;
+        margin: 0;
+    }
+    
+    #main-page, #navbar
+    {
+        width: 100%;
+    }
+
+    #main-page { border: 0; }
+    #main { width: 100%; max-width: 100%; }
+
+    #navbar
+    {
+        position: sticky;
+        top: 0px;
+        border-radius: 0;
+        border-top: 0;
+    }
+
+    #leftbar
+    {
+        position: fixed;
+        left: 0px;
+        height: 100%;
+        z-index: 100;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+    }
+    
+
+    #navbar-right-container
+    {
+        width: 100%;
+        padding: 12px;
+        background-color: #efefef;
+        border-top: 1px solid #cacaca;
+        border-bottom: 1px solid #cacaca;
+        text-align: center;
+        margin: 0;
+    }
+
+    .statusbox textarea
+    {
+        width: calc(100% - 11px);
+        max-width: unset;
+        min-width: unset;
+    }
+
+    .status .poster-stats
+    {
+        max-width: unset;
+    }
+
+    .status .status-content
+    {
+        width: unset;
+    }
+}
diff --git a/static/index.tmpl b/static/index.tmpl
index f638293..0957c00 100644
--- a/static/index.tmpl
+++ b/static/index.tmpl
@@ -5,14 +5,22 @@
     <title>{{ %s : title }}</title>
     <link rel="icon" type="image/png" href="/favicon.png">
     <link rel="stylesheet" type="text/css" href="/{{ %s : theme }}{{ %s : theme_clr }}.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="{{ %s : title }} is a decentralized social media platform">
   </head>
   <body {{ %s : background_url }}>
     <div></div>
     <div id="main-page-container">
       <div id="main-page">
         <header id="navbar">
+          <label for="leftbar-show">
+            <svg class="leftbar-btn navbar-btn" width="20" height="20" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1.6404"><line x1="5.6" x2="18.6" y1="7.7996" y2="7.7996"/><line x1="5.6" x2="18.6" y1="12" y2="12"/><line x1="5.6" x2="18.6" y1="16.2" y2="16.2"/></g></svg>
+          </label>
           <a href="{{ %s : prefix }}/"><img src="/treebird_logo.png" height="42"></a>
           <span class="info">{{ %s : name }}</span>
+          <label for="rightbar-show">
+            <svg class="rightbar-btn navbar-btn" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"></path></svg>
+          </label>
           <div id="navbar-right-container">
             <div id="navbar-right">
               {{ %s : sidebar_cnt }}
@@ -24,6 +32,8 @@
             </div>
           </div>
         </header>
+        <input type="checkbox" id="leftbar-show" class="hidden">
+        <input type="checkbox" id="rightbar-show" class="hidden">
         <table id="content" class="ui-table">
           <!-- Navigation -->
           <tr>