diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 5bbc0fdc89..0c2d4e4aa6 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -20,6 +20,7 @@ html {
       font-size: var(--main-size);
       margin: 0;
       padding: 0;
+      height: 100%;
 }
 
 ul {
@@ -68,7 +69,7 @@ b {
       left: 0;
       right: 0;
       background-color: #272E36;
-      box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
       padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size);
 }
 
@@ -145,6 +146,10 @@ b {
       left: -15em;
       top: 0;
       transition: 0.3s ease;
+      display: block;
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
 }
 
 .navbar a {
@@ -183,7 +188,7 @@ label {
 .profile {
       display: flex;
       flex-wrap: wrap;
-      background-color: rgba(0, 0, 0, 0.40);
+      background-color: rgba(0, 0, 0, 0.20);
       padding: var(--unit-size);
       font-size: var(--small-size);
       margin-bottom: var(--unit-size);
@@ -201,23 +206,29 @@ label {
 .info {
       order: 2;
 }
+
 .info #nick {
       order: 1;
       margin-bottom: var(--small-size);
 }
+
 .info .tags {
       order: 2;
       margin-bottom: var(--small-size);
 }
+
 .info .stats {
       order: 3;
 }
+
 .info .tags i {
       color: #91B9D0;
 }
+
 .info .tags i:last-child {
       margin-left: var(--small-size);
 }
+
 .stats span:last-child {
       margin-left: var(--small-size);
 }
diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css
index c28a1e0ca4..b53c6edc10 100644
--- a/public/assets/css/base_mid.css
+++ b/public/assets/css/base_mid.css
@@ -1,225 +1,229 @@
-/* GENERAL ----------------------------*/
 :root {
-    --head-font: 'Montserrat', sans-serif;
-    --main-font: 'Open Sans', sans-serif;
-    --main-size: 1.15em;
-    --medium-size: 0.9em;
-    --small-size: 0.8em;
-    --unit-size: 1em;
-    --side-margin: 5%;
+      --head-font: 'Montserrat', sans-serif;
+      --main-font: 'Open Sans', sans-serif;
+      --main-size: 1.2em;
+      --medium-size: 0.8em;
+      --small-size: 0.65em;
+      --unit-size: 1em;
+      --side-margin: 5em;
+      --nav-size: 15em;
 }
 
 body,
 html {
-    background-color: #29323c;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-    background-attachment: fixed;
-    background-size: cover;
-    color: #F6F6F6;
-    font-family: var(--main-font);
-    font-size: var(--main-size);
-    margin: 0;
-    padding: 0;
+      background: rgb(51,61,71);
+      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
+      background-attachment: fixed;
+      background-size: cover;
+      color: #F6F6F6;
+      font-family: var(--main-font);
+      font-size: var(--main-size);
+      margin: 0;
+      padding: 0;
 }
 
 ul {
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    list-style: none;
+      text-decoration: none;
+      margin: 0;
+      padding: 0;
+      list-style: none;
 }
 
-.drop-down ul li {
-    position: relative;
-    z-index: 2;
-}
-
-.drop-down ul li ul a {
-    line-height: 0.8em;
-}
-
-.drop-down ul li ul {
-    display: none;
-    position: absolute;
-    background-color: #F6F6F6;
-    padding: 0.4em 0.8em 0.8em 0.8em;
-    border-radius: 0.5em;
-    color: #29323c;
-}
-
-.drop-down ul li:hover ul {
-    display: block;
-}
-
-.drop-down ul li ul a:hover {
-    color: rgb(0, 0, 0);
-    transition: all 0.8s ease;
-}
-
-#hover-effect:hover {
-    color: #F6F6F6;
-    transition: all 0.8s ease;
+li {
+      margin: 0;
+      padding: 0;
 }
 
 a:link {
-    text-decoration: none;
-    outline: 0;
-    color: #F6F6F6;
+      text-decoration: none;
+      outline: 0;
+      color: #F6F6F6;
+      margin: 0;
+      padding: 0;
 }
 
 a:visited {
-    outline: 0;
-    color: #F6F6F6;
-}
-
-ul li ul a {
-    font-size: var(--small-size);
+      outline: 0;
+      color: #F6F6F6;
+      margin: 0;
+      padding: 0;
 }
 
 b {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-}
-
-/*-------------------------------------*/
-/* CONTAINER --------------------------*/
-#container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+      font-family: var(--head-font);
+      font-weight: 800;
 }
 
 /*-------------------------------------*/
 /* HEADER -----------------------------*/
 #header {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    order: 1;
-    width: 100%;
-    margin-left: var(--side-margin);
-    margin-right: var(--side-margin);
-    background-color: rgba(0, 0, 0, 0.40);
-    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: #272E36;
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+      padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size);
 }
 
 #top {
-    display: flex;
-    justify-content: space-between;
-    vertical-align: top;
-    flex-wrap: wrap;
-    order: 1;
-    width: 100%;
-    padding: var(--unit-size) var(--unit-size) var(--small-size) var(--unit-size);
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      width: 100%;
 }
 
-/* MENU -------------------------------*/
 .icon-menu {
-    display: inline-block;
-    vertical-align: top;
-    width: var(--unit-size);
-    height: var(--unit-size);
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
 }
 
-/*-------------------------------------*/
-/* INSTANCE ---------------------------*/
 #instance {
-    order: 2;
+      order: 2;
 }
 
 #instance b {
-    margin: 0;
-    padding: 0;
-    vertical-align: top;
+      margin: 0;
+      padding: 0;
+      vertical-align: top;
 }
 
 .icon-logo {
-    display: inline-block;
-    vertical-align: top;
-    width: var(--unit-size);
-    height: var(--unit-size);
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
+}
+
+#left-panel {
+      order: 2;
 }
 
-/*-------------------------------------*/
-/* SEARCH -----------------------------*/
 #search {
-    order: 3;
+      order: 3;
 }
 
 .icon-search {
-    display: inline-block;
-    vertical-align: top;
-    width: var(--unit-size);
-    height: var(--unit-size);
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
 }
 
 /*-------------------------------------*/
-/* PROFILE ----------------------------*/
-#cover {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    order: 3;
-    width: 100%;
+/* LEFT PANEL -------------------------*/
+.navbar {
+      width: var(--nav-size);
+      height: calc(100vh - (3 * var(--unit-size)));
+      position: fixed;
+      background: rgb(51,61,71);
+      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
+      margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
 }
 
-#cover-img {
-    width: 100%;
-    height: auto;
+.navbar {
+      left: -100%;
+      top:0;
+      transition: 0.3s ease;
 }
 
-#avatar {
-    z-index: 1;
-    position: absolute;
-    width: 4em;
-    height: 4em;
-    margin-left: var(--unit-size);
+.navbar a {
+      display: block;
+      color: #91B9D0;
+      margin-left: var(--unit-size);
+      margin-bottom: var(--small-size);
+      font-size: var(--medium-size);
 }
 
-#profile {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    width: 100%;
-    padding: var(--medium-size) var(--medium-size);
-    order: 4;
-    font-size: var(--medium-size);
-    align-items: center;
+.navbar a:nth-child(1) {
+      margin-top: var(--unit-size);
 }
 
-
-#info {
-    order: 1;
-    display: flex;
-    justify-content: flex-start;
+.navbar a:hover {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
 }
 
-#tags {
-    color: #91B9D0;
+label {
+      display: block;
+      cursor: pointer
 }
 
-#tags i {
-    margin-left: var(--small-size);
+#toggle {
+      display: none;
 }
 
-#stats {
-    margin-left: auto;
-    order: 2;
-    display: flex;
-    justify-content: flex-end;
+#toggle:checked+.navbar {
+      display: block;
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
 }
 
-#stats b:last-child {
-    margin-left: var(--unit-size);
+.profile {
+      display: flex;
+      flex-wrap: wrap;
+      background-color: rgba(0, 0, 0, 0.20);
+      padding: var(--unit-size);
+      font-size: var(--small-size);
+      margin-bottom: var(--unit-size);
+      vertical-align: middle;
 }
 
-/*-------------------------------------*/
\ No newline at end of file
+.icon-avatar {
+      order: 1;
+      height: calc(5 * var(--unit-size));
+      weight: auto;
+      width: 25%;
+      margin-right: var(--small-size);
+}
+
+.info {
+      order: 2;
+}
+
+.info #nick {
+      order: 1;
+      margin-bottom: var(--small-size);
+}
+
+.info .tags {
+      order: 2;
+      margin-bottom: var(--small-size);
+}
+
+.info .stats {
+      order: 3;
+}
+
+.info .tags i {
+      color: #91B9D0;
+}
+
+.info .tags i:last-child {
+      margin-left: var(--small-size);
+}
+
+.stats span:last-child {
+      margin-left: var(--small-size);
+}
diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css
index 6da53eaa47..b3c6a906ee 100644
--- a/public/assets/css/base_small.css
+++ b/public/assets/css/base_small.css
@@ -1,245 +1,229 @@
-/* GENERAL ----------------------------*/
 :root {
-    --head-font: 'Montserrat', sans-serif;
-    --main-font: 'Open Sans', sans-serif;
-    --main-size: 1.1em;
-    --medium-size: 0.75em;
-    --small-size: 0.7em;
-    --unit-size: 1em;
-    --side-margin: 0%;
+      --head-font: 'Montserrat', sans-serif;
+      --main-font: 'Open Sans', sans-serif;
+      --main-size: 1.2em;
+      --medium-size: 0.8em;
+      --small-size: 0.65em;
+      --unit-size: 1em;
+      --side-margin: 5em;
+      --nav-size: 100%;
 }
 
 body,
 html {
-    background-color: #29323c;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%232d3742' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23323c47' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2337414d' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233b4753' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23404c59' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23424e5b' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2343505d' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%2345515f' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23465361' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23485563' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
-    background-attachment: fixed;
-    background-size: cover;
-    color: #F6F6F6;
-    font-family: var(--main-font);
-    font-size: var(--main-size);
-    margin: 0;
-    padding: 0;
+      background: rgb(51,61,71);
+      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
+      background-attachment: fixed;
+      background-size: cover;
+      color: #F6F6F6;
+      font-family: var(--main-font);
+      font-size: var(--main-size);
+      margin: 0;
+      padding: 0;
 }
 
 ul {
-    text-decoration: none;
-    margin: 0;
-    padding: 0;
-    list-style: none;
+      text-decoration: none;
+      margin: 0;
+      padding: 0;
+      list-style: none;
 }
 
-.drop-down ul li {
-    position: relative;
-    z-index: 2;
-}
-
-.drop-down ul li ul a {
-    line-height: 0.8em;
-}
-
-.drop-down ul li ul {
-    display: none;
-    position: absolute;
-    background-color: #F6F6F6;
-    padding: 0.4em 0.8em 0.8em 0.8em;
-    border-radius: 0.5em;
-    color: #29323c;
-}
-
-.drop-down ul li:hover ul {
-    display: block;
-}
-
-.drop-down ul li ul a:hover {
-    color: rgb(0, 0, 0);
-    transition: all 0.8s ease;
-}
-
-#hover-effect:hover {
-    color: #F6F6F6;
-    transition: all 0.8s ease;
+li {
+      margin: 0;
+      padding: 0;
 }
 
 a:link {
-    text-decoration: none;
-    outline: 0;
-    color: #F6F6F6;
+      text-decoration: none;
+      outline: 0;
+      color: #F6F6F6;
+      margin: 0;
+      padding: 0;
 }
 
 a:visited {
-    outline: 0;
-    color: #F6F6F6;
-}
-
-ul li ul a {
-    font-size: var(--small-size);
+      outline: 0;
+      color: #F6F6F6;
+      margin: 0;
+      padding: 0;
 }
 
 b {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-}
-
-/*-------------------------------------*/
-/* CONTAINER --------------------------*/
-#container {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
+      font-family: var(--head-font);
+      font-weight: 800;
 }
 
 /*-------------------------------------*/
 /* HEADER -----------------------------*/
 #header {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    order: 1;
-    width: 100%;
-    margin-left: var(--side-margin);
-    margin-right: var(--side-margin);
-    background-color: rgba(0, 0, 0, 0.40);
-    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      background-color: #272E36;
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+      padding: var(--medium-size) var(--unit-size) var(--medium-size) var(--unit-size);
 }
 
 #top {
-    display: flex;
-    justify-content: space-between;
-    vertical-align: top;
-    flex-wrap: wrap;
-    order: 1;
-    width: 100%;
-    padding: var(--unit-size) var(--unit-size) var(--small-size) var(--unit-size);
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      width: 100%;
 }
 
-/* MENU -------------------------------*/
 .icon-menu {
-    display: inline-block;
-    vertical-align: top;
-    width: var(--unit-size);
-    height: var(--unit-size);
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
 }
 
-/*-------------------------------------*/
-/* INSTANCE ---------------------------*/
 #instance {
-    order: 2;
+      order: 2;
 }
 
 #instance b {
-    margin: 0;
-    padding: 0;
-    vertical-align: top;
+      margin: 0;
+      padding: 0;
+      vertical-align: top;
 }
 
 .icon-logo {
-    display: inline-block;
-    vertical-align: top;
-    width: var(--unit-size);
-    height: var(--unit-size);
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
+}
+
+#left-panel {
+      order: 2;
 }
 
-/*-------------------------------------*/
-/* SEARCH -----------------------------*/
 #search {
-    order: 3;
+      order: 3;
 }
 
 .icon-search {
-    display: inline-block;
-    vertical-align: top;
-    width: var(--unit-size);
-    height: var(--unit-size);
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
+      margin: 0;
+      padding: 0;
+      display: inline-block;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
 }
 
 /*-------------------------------------*/
-/* PROFILE ----------------------------*/
-#cover {
-    display: flex;
-    justify-content: start;
-    align-items: center;
-    order: 3;
-    width: 100%;
+/* LEFT PANEL -------------------------*/
+.navbar {
+      width: 100%;
+      height: calc(100vh - (3 * var(--unit-size)));
+      position: fixed;
+      background: rgb(51,61,71);
+      background: -moz-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: -webkit-linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      background: linear-gradient(80deg, rgba(51,61,71,1) 0%, rgba(39,46,54,1) 90%);
+      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333d47",endColorstr="#272e36",GradientType=1);
+      margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
 }
 
-#cover-img {
-    width: 100%;
-    height: auto;
+.navbar {
+      left: -100%;
+      top:0;
+      transition: 0.3s ease;
 }
 
-#avatar {
-    z-index: 1;
-    position: absolute;
-    width: 2.5em;
-    height: 2.5em;
-    margin-left: 1em;
+.navbar a {
+      display: block;
+      color: #91B9D0;
+      margin-left: var(--unit-size);
+      margin-bottom: var(--small-size);
+      font-size: var(--medium-size);
 }
 
-#profile {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    width: 100%;
-    padding: 0.7em 1em 0.7em 1em;
-    order: 4;
-    font-size: 0.8em;
-    align-items: center;
+.navbar a:nth-child(1) {
+      margin-top: var(--unit-size);
 }
 
-#info {
-    order: 1;
-    margin-right: auto;
-    display: flex;
-    flex-flow: column;
+.navbar a:hover {
+      color: #F6F6F6;
+      transition: all 0.8s ease;
 }
 
-#nick {
-    order: 1;
-    width: 100%;
+label {
+      display: block;
+      cursor: pointer
 }
 
-#tags {
-    order: 2;
-    width: 100%;
-    color: #91B9D0;
-
+#toggle {
+      display: none;
 }
 
-#tags i {
-    margin-left: 0;
+#toggle:checked+.navbar {
+      display: block;
+      left: 0;
+      top: 0;
+      transition: 0.3s ease;
 }
 
-#tags i:last-child {
-    margin-left: 0.5em;
+.profile {
+      display: flex;
+      flex-wrap: wrap;
+      background-color: rgba(0, 0, 0, 0.20);
+      padding: var(--unit-size);
+      font-size: var(--small-size);
+      margin-bottom: var(--unit-size);
+      vertical-align: middle;
 }
 
-#stats {
-    order: 2;
-    display: flex;
-    margin-left: auto;
-    flex-flow: column;
+.icon-avatar {
+      order: 1;
+      height: calc(5 * var(--unit-size));
+      weight: auto;
+      width: 25%;
+      margin-right: var(--small-size);
 }
 
-#followers {
-    order: 1;
-    width: 100%;
-    text-align: right;
+.info {
+      order: 2;
 }
 
-#following {
-    order: 2;
-    width: 100%;
-    text-align: right;
+.info #nick {
+      order: 1;
+      margin-bottom: var(--small-size);
 }
 
-/*-------------------------------------*/
\ No newline at end of file
+.info .tags {
+      order: 2;
+      margin-bottom: var(--small-size);
+}
+
+.info .stats {
+      order: 3;
+}
+
+.info .tags i {
+      color: #91B9D0;
+}
+
+.info .tags i:last-child {
+      margin-left: var(--small-size);
+}
+
+.stats span:last-child {
+      margin-left: var(--small-size);
+}
diff --git a/public/assets/css/faq/faq.css b/public/assets/css/faq/faq.css
index 6038d02341..2ee30cd8ef 100644
--- a/public/assets/css/faq/faq.css
+++ b/public/assets/css/faq/faq.css
@@ -1,60 +1,64 @@
 .content {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);;
-    justify-content: center;
-    align-items: center;
-    margin-left: calc(var(--nav-size));
-    margin-right: 0;
-    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
+      ;
+      justify-content: center;
+      align-items: center;
+      margin-left: calc(var(--nav-size));
+      margin-right: 0;
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+      height: 100%;
 }
 
 .faq-nav {
-    order: 1;
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    width: 100%;
-    background-color: #00000080;
-    padding: var(--medium-size) var(--medium-size);
-    font-size: var(--medium-size);
-    font-family: var(--head-font);
+      order: 1;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      width: 100%;
+      background-color: #2A323B;
+      padding: var(--medium-size);
+      font-size: var(--medium-size);
+      font-family: var(--head-font);
 }
 
 .faq-nav ul {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-evenly;
-    width: 100%;
-    margin-left: var(--side-margin);
-    margin-right: var(--side-margin);
-    padding: 0;
+      display: flex;
+      align-items: stretch;
+      justify-content: space-evenly;
+      width: 100%;
+      margin-left: calc(2 * var(--side-margin));
+      margin-right: calc(2 * var(--side-margin));
+      padding: 0;
 }
 
 .faq-nav li {
-    display: block;
-    flex: 0 1 auto;
-    list-style-type: none;
+      display: block;
+      flex: 0 1 auto;
+      list-style-type: none;
+      font-weight: 700;
 }
 
 .active {
-    color: #F6F6F6 !important;
-    font-weight: 700;
+      color: #F6F6F6 !important;
+      font-weight: 700;
 }
 
 .faq-nav a {
-    color: #91B9D0;
+      color: #91B9D0;
 }
 
 .faq-nav a:hover {
-    color: #F6F6F6;
-    transition: all 0.8s ease;
+      color: #F6F6F6;
+      transition: all 0.8s ease;
 }
 
 .markd {
-    order: 2;
-    background-color: #00000040;
-    font-size: var(--small-size);
-    padding: var(--unit-size);
-    height: 100%;
-}
+      order: 2;
+      background-color: #00000040;
+      font-size: var(--small-size);
+      padding: calc(3*var(--unit-size));
+      padding-top: var(--unit-size);
+      height: 100%;
+}
\ No newline at end of file
diff --git a/public/assets/css/faq/faq_mid.css b/public/assets/css/faq/faq_mid.css
index 6a5f848939..241c243254 100644
--- a/public/assets/css/faq/faq_mid.css
+++ b/public/assets/css/faq/faq_mid.css
@@ -1,70 +1,70 @@
-/*-------------------------------------*/
-/* PAGES ------------------------------*/
+.content {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
+      ;
+      justify-content: center;
+      align-items: center;
+      margin-left: 0;
+      margin-right: 0;
+      height: 100%;
+}
+
 .faq-nav {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    order: 2;
-    width: 100%;
-    margin-left: var(--side-margin);
-    margin-right: var(--side-margin);
-    background-color: #00000080;
-    padding: var(--medium-size) var(--medium-size);
-    font-size: var(--medium-size);
-    font-family: var(--head-font);
-    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+      order: 1;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      width: 100%;
+      background-color: #2A323B;
+      padding: var(--medium-size);
+      font-size: var(--medium-size);
+      font-family: var(--head-font);
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
 }
 
 .faq-nav ul {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-evenly;
-    width: 100%;
-    margin-left: calc(var(--side-margin) * 0.25);
-    margin-right: calc(var(--side-margin) * 0.25);
-    padding: 0;
+      display: flex;
+      align-items: stretch;
+      justify-content: space-evenly;
+      width: 100%;
+      margin-left: var(--side-margin);
+      margin-right: var(--side-margin);
+      padding: 0;
 }
 
 .faq-nav li {
-    display: block;
-    flex: 0 1 auto;
-    list-style-type: none;
+      display: block;
+      flex: 0 1 auto;
+      list-style-type: none;
+      font-weight: 700;
+      font-size: var(--medium-size);
 }
 
 .active {
-    color: #F6F6F6 !important;
-    font-weight: 700;
+      color: #F6F6F6 !important;
+      font-weight: 700;
 }
 
 .faq-nav a {
-    color: #91B9D0;
+      color: #91B9D0;
 }
 
 .faq-nav a:hover {
-    color: #F6F6F6;
-    transition: all 0.8s ease;
-
+      color: #F6F6F6;
+      transition: all 0.8s ease;
 }
 
-/*-------------------------------------*/
-/*-------------------------------------*/
-/* CONTENT ----------------------------*/
-.content {
-    order: 3;
-    width: 100%;
-    margin-top: var(--unit-size);
-    margin-bottom: var(--unit-size);
-    margin-left: var(--side-margin);
-    margin-right: var(--side-margin);
-    background-color: rgba(0, 0, 0, 0.40);
-    padding: 0 var(--unit-size) var(--unit-size) var(--unit-size);
-    border-radius: var(--unit-size);
-    font-size: var(--medium-size);
-    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+.markd {
+      order: 2;
+      background-color: #00000040;
+      font-size: var(--small-size);
+      padding: calc(3*var(--unit-size));
+      padding-top: var(--unit-size);
+      height: 100%;
+      margin-left: var(--side-margin);
+      margin-right: var(--side-margin);
+      margin-top: calc(2 * var(--unit-size));
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+      border-radius: var(--unit-size);
 }
-
-.content ul {
-    margin: 0;
-    padding-left: 2em;
-    list-style: disc;
-}
\ No newline at end of file
diff --git a/public/assets/css/faq/faq_small.css b/public/assets/css/faq/faq_small.css
index a8c1ffd069..6bafe64d7d 100644
--- a/public/assets/css/faq/faq_small.css
+++ b/public/assets/css/faq/faq_small.css
@@ -1,70 +1,70 @@
-/*-------------------------------------*/
-/* PAGES ------------------------------*/
+.content {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
+      ;
+      justify-content: center;
+      align-items: center;
+      margin-left: 0;
+      margin-right: 0;
+      box-shadow: 0px 0px 60px -20px rgba(0, 0, 0, 0.75);
+      height: 100%;
+}
+
 .faq-nav {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    order: 2;
-    width: 100%;
-    margin-left: var(--side-margin);
-    margin-right: var(--side-margin);
-    background-color: #00000080;
-    padding: var(--medium-size) var(--medium-size);
-    font-size: var(--medium-size);
-    font-family: var(--head-font);
-    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+      order: 1;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      width: 100%;
+      background-color: #2A323B;
+      padding: var(--medium-size);
+      font-size: var(--medium-size);
+      font-family: var(--head-font);
 }
 
 .faq-nav ul {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-evenly;
-    width: 100%;
-    margin-left: calc(var(--side-margin) * 0.25);
-    margin-right: calc(var(--side-margin) * 0.25);
-    padding: 0;
+      display: flex;
+      align-items: stretch;
+      justify-content: space-evenly;
+      width: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0;
 }
 
 .faq-nav li {
-    display: block;
-    flex: 0 1 auto;
-    list-style-type: none;
+      display: block;
+      flex: 0 1 auto;
+      list-style-type: none;
+      font-weight: 700;
+      font-size: var(--medium-size);
 }
 
 .active {
-    color: #F6F6F6 !important;
-    font-weight: 700;
+      color: #F6F6F6 !important;
+      font-weight: 700;
 }
 
 .faq-nav a {
-    color: #91B9D0;
+      color: #91B9D0;
 }
 
 .faq-nav a:hover {
-    color: #F6F6F6;
-    transition: all 0.8s ease;
-
+      color: #F6F6F6;
+      transition: all 0.8s ease;
 }
 
-/*-------------------------------------*/
-/*-------------------------------------*/
-/* CONTENT ----------------------------*/
-.content {
-    order: 3;
-    width: 100%;
-    margin-top: var(--unit-size);
-    margin-bottom: var(--unit-size);
-    margin-left: 1%;
-    margin-right: 1%;
-    background-color: rgba(0, 0, 0, 0.40);
-    padding: 0 var(--unit-size) var(--unit-size) var(--unit-size);
-    border-radius: var(--unit-size);
-    font-size: var(--medium-size);
-    box-shadow: 0px 0px 60px -20px rgba(41, 50, 60, 1);
+.markd {
+      order: 2;
+      background-color: #00000040;
+      font-size: var(--small-size);
+      padding: calc(3*var(--unit-size));
+      padding-top: var(--unit-size);
+      height: 100%;
+      margin-left: 0;
+      margin-right: 0;
+      margin-top: 0;
+      box-shadow: 0;
+      border-radius: 0;
 }
-
-.content ul {
-    margin: 0;
-    padding-left: calc(var(--unit-size) * 2);
-    list-style: disc;
-}
\ No newline at end of file
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 79b3026275..3a871f0717 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -49,67 +49,65 @@
                         </defs>
                   </svg>
             {% endblock %}
-            <div class='wrapper'>
 
-                  {% block header %}
-                        <div id='header'>
-                              <div id='top'>
-                                    <div id='left-panel'>
-                                          <label for="toggle" id='menu'>
-                                                <svg class="icon icon-menu">
-                                                      <use xlink:href="#icon-menu"></use>
+            {% block header %}
+                  <div id='header'>
+                        <div id='top'>
+                              <div id='left-panel'>
+                                    <label for="toggle" id='menu'>
+                                          <svg class="icon icon-menu">
+                                                <use xlink:href="#icon-menu"></use>
+                                          </svg>
+                                    </label>
+                                    <input type="checkbox" id="toggle">
+                                    <div class='navbar'>
+                                          <div class='profile'>
+                                                <svg class="icon icon-avatar">
+                                                      <use xlink:href="#icon-avatar"></use>
                                                 </svg>
-                                          </label>
-                                          <input type="checkbox" id="toggle">
-                                          <div class='navbar'>
-                                                <div class='profile'>
-                                                      <svg class="icon icon-avatar">
-                                                            <use xlink:href="#icon-avatar"></use>
-                                                      </svg>
-                                                      <div class="info">
-                                                            <b id="nick">someone</b>
-                                                            <div class="tags">
-                                                                  <i>coffee addict</i>
-                                                                  <i>lazy</i>
-                                                            </div>
-                                                            <div class="stats">
-                                                                  <span>
-                                                                        <b>1337</b>
-                                                                        Followers</span>
-                                                                  <span>
-                                                                        <b>42</b>
-                                                                        Following</span>
-                                                            </div>
+                                                <div class="info">
+                                                      <b id="nick">someone</b>
+                                                      <div class="tags">
+                                                            <i>coffee addict</i>
+                                                            <i>lazy</i>
+                                                      </div>
+                                                      <div class="stats">
+                                                            <span>
+                                                                  <b>1337</b>
+                                                                  Followers</span>
+                                                            <span>
+                                                                  <b>42</b>
+                                                                  Following</span>
                                                       </div>
                                                 </div>
-                                                <a href='#'>Bookmarks</a>
-                                                <a href='#'>Happenings</a>
-                                                <a href='#'>Messages</a>
-                                                <a href='#'>Replies</a>
-                                                <a href='#'>Favourites</a>
-                                                <a href='#'>Reverse Favs</a>
-                                                <a href='#'>Settings</a>
-                                                <a href='#'>Logout</a>
                                           </div>
+                                          <a href='#'>Bookmarks</a>
+                                          <a href='#'>Happenings</a>
+                                          <a href='#'>Messages</a>
+                                          <a href='#'>Replies</a>
+                                          <a href='#'>Favourites</a>
+                                          <a href='#'>Reverse Favs</a>
+                                          <a href='#'>Settings</a>
+                                          <a href='#'>Logout</a>
                                     </div>
-                                    <nav id='instance'>
-                                          <a href="#">
-                                                <svg class="icon icon-logo">
-                                                      <use xlink:href="#icon-logo"></use>
-                                                </svg>
-                                                <b>GNU social</b>
-                                          </a>
-                                    </nav>
-                                    <svg id='search' class="icon icon-search">
-                                          <use xlink:href="#icon-search"></use>
-                                    </svg>
                               </div>
+                              <nav id='instance'>
+                                    <a href="#">
+                                          <svg class="icon icon-logo">
+                                                <use xlink:href="#icon-logo"></use>
+                                          </svg>
+                                          <b>GNU social</b>
+                                    </a>
+                              </nav>
+                              <svg id='search' class="icon icon-search">
+                                    <use xlink:href="#icon-search"></use>
+                              </svg>
                         </div>
-                  {% endblock %}
+                  </div>
+            {% endblock %}
 
-                  {% block nav %}{% endblock %}
-                  {% block body %}{% endblock %}
-            </div>
+            {% block nav %}{% endblock %}
+            {% block body %}{% endblock %}
             {% block javascripts %}{% endblock %}
       </body>
 </html>
diff --git a/templates/faq/about.html.twig b/templates/faq/about.html.twig
index 4f919764d0..123eb71f2c 100644
--- a/templates/faq/about.html.twig
+++ b/templates/faq/about.html.twig
@@ -3,16 +3,10 @@
 {% block title %}Help{% endblock %}
 
 {% block body %}
-      <div class="content">
-            {% block markdown %}
+      {% block markdown %}
             {% apply markdown_to_html %}
-            ## What is this site?
-            This is a social network, running the GNU social software.
-
-            You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those notices will be sent to all your contacts.
-
-            In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
+            ## What is this site? This is a social network, running the GNU social software. You can use it to make connections between friends, family and colleagues -- writing short notices about yourself, where you are, and what you're doing, and those
+            notices will be sent to all your contacts. In the future, we'll be adding support for photo, video and file sharing, as well as events, better contact management and mobile devices.
             {% endapply %}
-            {% endblock %}
-      </div>
+      {% endblock %}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/faq/base.html.twig b/templates/faq/base.html.twig
index a2f4e0280b..0fac2f393f 100644
--- a/templates/faq/base.html.twig
+++ b/templates/faq/base.html.twig
@@ -1,6 +1,7 @@
 {% extends 'base.html.twig' %}
 
-{% block meta %}{{ parent() }}{% endblock %}
+{% block meta %}{{ parent() }}
+{% endblock %}
 
 {% block title %}{% endblock %}
 
@@ -11,6 +12,7 @@
       <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/faq/faq_small.css') }}" media="screen and (max-width: 750px)">
 {% endblock %}
 
-{% block header %}{{ parent() }}{% endblock %}
+{% block header %}{{ parent() }}
+{% endblock %}
 
-{% block javascripts %}{% endblock %}
+{% block javascripts %}{% endblock %}
\ No newline at end of file
diff --git a/templates/faq/contact.html.twig b/templates/faq/contact.html.twig
index 9bcd914625..a9f998a90b 100644
--- a/templates/faq/contact.html.twig
+++ b/templates/faq/contact.html.twig
@@ -3,15 +3,12 @@
 {% block title %}Help{% endblock %}
 
 {% block body %}
-      <div class="content">
+      <div class="markd">
             {% block markdown %}
-            {% apply markdown_to_html %}
-            ## Bugs
-            If you think you've found a bug in the underlying [GNU social](https://gnu.io/social/) software, or if there's a new feature you'd like to see, add it into the [GNU social task list](https://git.gnu.io/gnu/gnu-social/issues). Don't forget to check the list of existing bugs to make sure it hasn't already been reported!
-
-            ## Post a notice
-            If you have a question about how to do something, just post a notice with your question, preferrably tagged with #NewHere. Watch your inbox for replies.
-            {% endapply %}
+                  {% apply markdown_to_html %}
+                  ## Bugs If you think you've found a bug in the underlying [GNU social](https://gnu.io/social/) software, or if there's a new feature you'd like to see, add it into the [GNU social task list](https://git.gnu.io/gnu/gnu-social/issues). Don't forget to
+                  check the list of existing bugs to make sure it hasn't already been reported! ## Post a notice If you have a question about how to do something, just post a notice with your question, preferrably tagged with #NewHere. Watch your inbox for replies.
+                  {% endapply %}
             {% endblock %}
       </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/faq/faq.html.twig b/templates/faq/faq.html.twig
index 305d5d3a9e..0f3c20b708 100644
--- a/templates/faq/faq.html.twig
+++ b/templates/faq/faq.html.twig
@@ -4,8 +4,8 @@
 
 {% block header %}{{ parent() }}{% endblock %}
 
-{% block body %}      
-      <div class='content' data-status="finished">
+{% block body %}
+      <div class='content'>
             <nav class='faq-nav'>
                   <ul>
                         <li>
@@ -47,4 +47,4 @@
                   {% endblock %}
             </div>
       </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/faq/groups.html.twig b/templates/faq/groups.html.twig
index 119c6fa214..037f64b9f2 100644
--- a/templates/faq/groups.html.twig
+++ b/templates/faq/groups.html.twig
@@ -3,36 +3,18 @@
 {% block title %}Help{% endblock %}
 
 {% block body %}
-      <div class="content">
+      <div class="markd">
             {% block markdown %}
-            {% apply markdown_to_html %}
-            ## Groups
-            Users on GNU social can create _groups_ that other users can join. Groups can be a great way to share information and entertainment with a group of people who have a common interest or background; who work together on a team; or who have a particular knowledge or skill.
-
-            You can find out about groups on the server on the Groups page. You can join a group by clicking on the "Join" button either in the group list or on the group's home page.
-
-            ## Starting a new group
-            You can start a new group for friends and colleagues. Note that all groups are free for anyone to join.
-
-            To start a new group, use the **new group** tool and fill out the form. Describe your group as best you can if you want people to be able to find it.
-
-            When choosing the nickname for your group, try to keep it short. The nickname is sometimes included in messages to and from the group, so the less chars the better. Try using acronyms for organizations, or airport codes for places (like 'pdx' instead of 'portland').
-
-            ## Sending messages to a group
-            You can send a message to a group using the syntax "!groupname" anywhere in the message. If you have more than one group named, the notice will go to each group. Only members can send notices to a group, and groups do not respond to direct messages (DMs).
-
-            You can also select the group from the "To:" drop down when posting.
-
-            You can make a group message private by clicking the "private" button before posting.
-
-            ## Receiving messages
-            New group messages will appear in your inbox, and will also come to your phone or IM client if you've set them up to receive notices.
-
-            ## Private groups
-            The administrator can make a group private. For a private group, all notices will marked as private for group members only. Also, administrators will have to approve all new members to the group.
-
-            Private groups are visible in the group directory.
-            {% endapply %}
+                  {% apply markdown_to_html %}
+                  ## Groups Users on GNU social can create _groups_ that other users can join. Groups can be a great way to share information and entertainment with a group of people who have a common interest or background; who work together on a team; or who have a
+                  particular knowledge or skill. You can find out about groups on the server on the Groups page. You can join a group by clicking on the "Join" button either in the group list or on the group's home page. ## Starting a new group You can start a new
+                  group for friends and colleagues. Note that all groups are free for anyone to join. To start a new group, use the **new group** tool and fill out the form. Describe your group as best you can if you want people to be able to find it. When choosing
+                  the nickname for your group, try to keep it short. The nickname is sometimes included in messages to and from the group, so the less chars the better. Try using acronyms for organizations, or airport codes for places (like 'pdx' instead of
+                  'portland'). ## Sending messages to a group You can send a message to a group using the syntax "!groupname" anywhere in the message. If you have more than one group named, the notice will go to each group. Only members can send notices to a group,
+                  and groups do not respond to direct messages (DMs). You can also select the group from the "To:" drop down when posting. You can make a group message private by clicking the "private" button before posting. ## Receiving messages New group messages
+                  will appear in your inbox, and will also come to your phone or IM client if you've set them up to receive notices. ## Private groups The administrator can make a group private. For a private group, all notices will marked as private for group members
+                  only. Also, administrators will have to approve all new members to the group. Private groups are visible in the group directory.
+                  {% endapply %}
             {% endblock %}
       </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/faq/openid.html.twig b/templates/faq/openid.html.twig
index 2bf50b148c..273e962fc9 100644
--- a/templates/faq/openid.html.twig
+++ b/templates/faq/openid.html.twig
@@ -3,23 +3,41 @@
 {% block title %}Help{% endblock %}
 
 {% block body %}
-      <div class="content">
-            {% block markdown %}
-            {% apply markdown_to_html %}
-            ## Openid
-            LoadAverage supports the [OpenID](http://openid.net/) standard for single signon between Web sites. OpenID lets you log into many different Web sites without using a different password for each. (See [Wikipedia's OpenID article](http://en.wikipedia.org/wiki/OpenID) for more information.)
-
-            If you already have an account on GNU social, you can **login** with your username and password as usual. To use OpenID in the future, you can **add an OpenID to your account** after you have logged in normally.
-
-            There are many [Public OpenID providers](http://wiki.openid.net/OpenID-Providers), and you may already have an OpenID-enabled account on another service.
-
-            -   On wikis: If you have an account on an OpenID-enabled wiki, like [Wikitravel](http://wikitravel.org/), [wikiHow](http://www.wikihow.com/), [Vinismo](http://vinismo.com/), [AboutUs](http://aboutus.org/) or [Keiki](http://kei.ki/), you can log in to LoadAverage by entering the **full URL** of your user page on that other wiki in the box above. For example, _http://kei.ki/en/User:Evan_.
-            -   [Yahoo!](http://openid.yahoo.com/) : If you have an account with Yahoo!, you can log in to this site by entering your Yahoo!-provided OpenID in the box above. Yahoo! OpenID URLs have the form _https://me.yahoo.com/yourusername_.
-            -   [AOL](http://dev.aol.com/aol-and-63-million-openids) : If you have an account with [AOL](http://www.aol.com/), like an [AIM](http://www.aim.com/) account, you can log in to LoadAverage by entering your AOL-provided OpenID in the box above. AOL OpenID URLs have the form _http://openid.aol.com/yourusername_. Your username should be all lowercase, no spaces.
-            -   [Blogger](http://bloggerindraft.blogspot.com/2008/01/new-feature-blogger-as-openid-provider.html), [Wordpress.com](http://faq.wordpress.com/2007/03/06/what-is-openid/), [LiveJournal](http://www.livejournal.com/openid/about.bml), [Vox](http://bradfitz.vox.com/library/post/openid-for-vox.html) : If you have a blog on any of these services, enter your blog URL in the box above. For example, _http://yourusername.blogspot.com/_, _http://yourusername.wordpress.com/_, _http://yourusername.livejournal.com/_, or _http://yourusername.vox.com/_.
-
-            Additionally, once you have an account on GNU social, you can use your profile's URL as an OpenID elsewhere as well.
-            {% endapply %}
-            {% endblock %}
+      <div class='content'>
+            <nav class='faq-nav'>
+                  <ul>
+                        <li>
+                              <a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_faq' %}active{% endif %}'="doc_faq' %}active{% endif %}'">FAQ</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_contact' %}active{% endif %}'="doc_contact' %}active{% endif %}'">Contact</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_tags' %}active{% endif %}'="doc_tags' %}active{% endif %}'">Tags</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_groups' %}active{% endif %}'="doc_groups' %}active{% endif %}'">Groups</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_openid' %}active{% endif %}'="doc_openid' %}active{% endif %}'">OpenID</a>
+                        </li>
+                  </ul>
+            </nav>
+            <div class="markd">
+                  {% block markdown %}
+                        {% apply markdown_to_html %}
+                        ## Openid LoadAverage supports the [OpenID](http://openid.net/) standard for single signon between Web sites. OpenID lets you log into many different Web sites without using a different password for each. (See [Wikipedia's OpenID
+                        article](http://en.wikipedia.org/wiki/OpenID) for more information.) If you already have an account on GNU social, you can **login** with your username and password as usual. To use OpenID in the future, you can **add an OpenID to your account**
+                        after you have logged in normally. There are many [Public OpenID providers](http://wiki.openid.net/OpenID-Providers), and you may already have an OpenID-enabled account on another service. - On wikis: If you have an account on an OpenID-enabled wiki,
+                        like [Wikitravel](http://wikitravel.org/), [wikiHow](http://www.wikihow.com/), [Vinismo](http://vinismo.com/), [AboutUs](http://aboutus.org/) or [Keiki](http://kei.ki/), you can log in to LoadAverage by entering the **full URL** of your user page on
+                        that other wiki in the box above. For example, _http://kei.ki/en/User:Evan_. - [Yahoo!](http://openid.yahoo.com/) : If you have an account with Yahoo!, you can log in to this site by entering your Yahoo!-provided OpenID in the box above. Yahoo!
+                        OpenID URLs have the form _https://me.yahoo.com/yourusername_. - [AOL](http://dev.aol.com/aol-and-63-million-openids) : If you have an account with [AOL](http://www.aol.com/), like an [AIM](http://www.aim.com/) account, you can log in to LoadAverage
+                        by entering your AOL-provided OpenID in the box above. AOL OpenID URLs have the form _http://openid.aol.com/yourusername_. Your username should be all lowercase, no spaces. -
+                        [Blogger](http://bloggerindraft.blogspot.com/2008/01/new-feature-blogger-as-openid-provider.html), [Wordpress.com](http://faq.wordpress.com/2007/03/06/what-is-openid/), [LiveJournal](http://www.livejournal.com/openid/about.bml),
+                        [Vox](http://bradfitz.vox.com/library/post/openid-for-vox.html) : If you have a blog on any of these services, enter your blog URL in the box above. For example, _http://yourusername.blogspot.com/_, _http://yourusername.wordpress.com/_,
+                        _http://yourusername.livejournal.com/_, or _http://yourusername.vox.com/_. Additionally, once you have an account on GNU social, you can use your profile's URL as an OpenID elsewhere as well.
+                        {% endapply %}
+                  {% endblock %}
+            </div>
       </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/faq/tags.html.twig b/templates/faq/tags.html.twig
index e64116e8d0..1254d5eb9f 100644
--- a/templates/faq/tags.html.twig
+++ b/templates/faq/tags.html.twig
@@ -3,28 +3,39 @@
 {% block title %}Help{% endblock %}
 
 {% block body %}
-      <div class="content">
-            {% block markdown %}
-            {% apply markdown_to_html %}
-            ## What are Tags?
-            GNU social supports [tags](https://en.wikipedia.org/wiki/Tag_(metadata)) to help you organize your activities here. You can use tags for people and for notices.
-
-            ## Tagging a notice
-            You can tag a notice using a _hashtag_; a # character followed by letters and numbers as well as '.', '-', and '_'. Note that accented latin characters are not supported, and non-roman scripts are right out.
-
-            The HTML for the notice will link to a stream of all the other notices with that tag. This can be a great way to keep track of a conversation.
-
-            ## Tagging yourself
-            You can also add tags for yourself on your profile page or by using the edit tags button on your profile page. Use single words to describe yourself, your experiences and your interest. The tags will become links on your profile page to a list of all the users on the site who use that same tag. It can be a nice way to find people who are related to you geographically or who have a common interest.
-
-            ## Tagging others
-            You can also tag other users by using the edit tags button next to their profile. Such tags are called _people tags_. Once you have created a people tag, you can add or remove users from it using the tag's edit form. This makes it easy to organize your subscriptions into groups and sort through them separately. Also, it will let you create custom lists of people that others can subscribe to.
-
-            You can also send a notice "to the attention of" your subscribers whom you've marked with a particular tag (note: _not_ people who've marked themselves with that tag). "@#family hello" will send a notice to all your subscribers you've marked with the tag 'family'.
-
-            ## Private and public people tags
-            A private people tag is only visible to the creator, it cannot be subscribed to, but the timeline can be viewed. To create a new private prepend a '.' to the tag in the tags editing box. To set an existing public tag as private or vice-versa, go to the tag's edit page.
-            {% endapply %}
-            {% endblock %}
+      <div class='content'>
+            <nav class='faq-nav'>
+                  <ul>
+                        <li>
+                              <a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_faq' %}active{% endif %}'="doc_faq' %}active{% endif %}'">FAQ</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_contact' %}active{% endif %}'="doc_contact' %}active{% endif %}'">Contact</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_tags' %}active{% endif %}'="doc_tags' %}active{% endif %}'">Tags</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_groups' %}active{% endif %}'="doc_groups' %}active{% endif %}'">Groups</a>
+                        </li>
+                        <li>
+                              <a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get(' _route') starts with '="_route') starts with '" doc_openid' %}active{% endif %}'="doc_openid' %}active{% endif %}'">OpenID</a>
+                        </li>
+                  </ul>
+            </nav>
+            <div class="markd">
+                  {% block markdown %}
+                        {% apply markdown_to_html %}
+                        ## What are Tags? GNU social supports [tags](https://en.wikipedia.org/wiki/Tag_(metadata)) to help you organize your activities here. You can use tags for people and for notices. ## Tagging a notice You can tag a notice using a _hashtag_; a #
+                        character followed by letters and numbers as well as '.', '-', and '_'. Note that accented latin characters are not supported, and non-roman scripts are right out. The HTML for the notice will link to a stream of all the other notices with that tag.
+                        This can be a great way to keep track of a conversation. ## Tagging yourself You can also add tags for yourself on your profile page or by using the edit tags button on your profile page. Use single words to describe yourself, your experiences and
+                        your interest. The tags will become links on your profile page to a list of all the users on the site who use that same tag. It can be a nice way to find people who are related to you geographically or who have a common interest. ## Tagging others
+                        You can also tag other users by using the edit tags button next to their profile. Such tags are called _people tags_. Once you have created a people tag, you can add or remove users from it using the tag's edit form. This makes it easy to organize
+                        your subscriptions into groups and sort through them separately. Also, it will let you create custom lists of people that others can subscribe to. You can also send a notice "to the attention of" your subscribers whom you've marked with a particular
+                        tag (note: _not_ people who've marked themselves with that tag). "@#family hello" will send a notice to all your subscribers you've marked with the tag 'family'. ## Private and public people tags A private people tag is only visible to the creator,
+                        it cannot be subscribed to, but the timeline can be viewed. To create a new private prepend a '.' to the tag in the tags editing box. To set an existing public tag as private or vice-versa, go to the tag's edit page.
+                        {% endapply %}
+                  {% endblock %}
+            </div>
       </div>
 {% endblock %}
\ No newline at end of file