diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 0c2d4e4aa6..8a4b070ecf 100644
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -39,8 +39,6 @@ a:link {
       text-decoration: none;
       outline: 0;
       color: #F6F6F6;
-      margin: 0;
-      padding: 0;
 }
 
 a:visited {
@@ -50,6 +48,12 @@ a:visited {
       padding: 0;
 }
 
+a {
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+}
+
 b {
       font-family: var(--head-font);
       font-weight: 800;
@@ -70,7 +74,7 @@ b {
       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);
+      padding: var(--unit-size);
 }
 
 #top {
@@ -94,6 +98,7 @@ b {
 
 #instance {
       order: 1;
+
 }
 
 #instance b {
@@ -119,14 +124,11 @@ b {
 
 #search {
       order: 3;
+      width: var(--unit-size);
+      height: var(--unit-size);
 }
 
 .icon-search {
-      margin: 0;
-      padding: 0;
-      display: inline-block;
-      width: var(--unit-size);
-      height: var(--unit-size);
       stroke-width: 0;
       stroke: currentColor;
       fill: currentColor;
@@ -139,7 +141,7 @@ b {
       height: calc(100vh - (3 * var(--unit-size)));
       position: fixed;
       background-color: rgba(0, 0, 0, 0.40);
-      margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
+      margin-top: calc(2 * var(--unit-size) + var(--main-size) + 0.15em);
 }
 
 .navbar {
diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css
index b53c6edc10..1ea7f60252 100644
--- a/public/assets/css/base_mid.css
+++ b/public/assets/css/base_mid.css
@@ -66,7 +66,7 @@ b {
       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);
+      padding: var(--medium-size);
 }
 
 #top {
@@ -77,14 +77,45 @@ b {
 }
 
 .icon-menu {
-      margin: 0;
-      padding: 0;
-      display: inline-block;
+      position: relative;
+      display: flex;
+      align-items: center;
       width: var(--unit-size);
       height: var(--unit-size);
-      stroke-width: 0;
-      stroke: currentColor;
-      fill: currentColor;
+      cursor: pointer;
+      transition: all .5s ease-in-out;
+      background-color: #272E36;
+}
+.icon-menu label {
+      width: var(--unit-size);
+      height: 2px;
+      background: #F6F6F6;
+      transition: all .5s ease-in-out;
+      z-index: 1;
+}
+.icon-menu label::before,
+.icon-menu label::after {
+      content: '';
+      position: absolute;
+      width: var(--unit-size);
+      height: 2px;
+      background: #F6F6F6;
+      transition: all .5s ease-in-out;
+}
+.icon-menu label::before {
+      transform: translateY(-6px);
+}
+.icon-menu label::after {
+      transform: translateY(6px);
+}
+#toggle:checked+div label{
+      width: 0px;
+}
+#toggle:checked+div label::before {
+      transform: rotate(45deg);
+}
+#toggle:checked+div label::after {
+      transform: rotate(-45deg);
 }
 
 #instance {
@@ -170,10 +201,15 @@ label {
 }
 
 #toggle {
-      display: none;
+      position: absolute;
+      z-index: 2;
+      cursor: pointer;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      opacity: 0;
 }
 
-#toggle:checked+.navbar {
+#toggle:checked~.navbar {
       display: block;
       left: 0;
       top: 0;
diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css
index b3c6a906ee..b3d961eeee 100644
--- a/public/assets/css/base_small.css
+++ b/public/assets/css/base_small.css
@@ -77,14 +77,45 @@ b {
 }
 
 .icon-menu {
-      margin: 0;
-      padding: 0;
-      display: inline-block;
+      position: relative;
+      display: flex;
+      align-items: center;
       width: var(--unit-size);
       height: var(--unit-size);
-      stroke-width: 0;
-      stroke: currentColor;
-      fill: currentColor;
+      cursor: pointer;
+      transition: all .5s ease-in-out;
+      background-color: #272E36;
+}
+.icon-menu label {
+      width: var(--unit-size);
+      height: 2px;
+      background: #F6F6F6;
+      transition: all .5s ease-in-out;
+      z-index: 1;
+}
+.icon-menu label::before,
+.icon-menu label::after {
+      content: '';
+      position: absolute;
+      width: var(--unit-size);
+      height: 2px;
+      background: #F6F6F6;
+      transition: all .5s ease-in-out;
+}
+.icon-menu label::before {
+      transform: translateY(-6px);
+}
+.icon-menu label::after {
+      transform: translateY(6px);
+}
+#toggle:checked+div label{
+      width: 0px;
+}
+#toggle:checked+div label::before {
+      transform: rotate(45deg);
+}
+#toggle:checked+div label::after {
+      transform: rotate(-45deg);
 }
 
 #instance {
@@ -170,10 +201,15 @@ label {
 }
 
 #toggle {
-      display: none;
+      position: absolute;
+      z-index: 2;
+      cursor: pointer;
+      width: var(--unit-size);
+      height: var(--unit-size);
+      opacity: 0;
 }
 
-#toggle:checked+.navbar {
+#toggle:checked~.navbar {
       display: block;
       left: 0;
       top: 0;
diff --git a/public/assets/css/faq/faq.css b/public/assets/css/faq/faq.css
index 2ee30cd8ef..1b0b88b9f6 100644
--- a/public/assets/css/faq/faq.css
+++ b/public/assets/css/faq/faq.css
@@ -1,7 +1,7 @@
 .content {
       display: flex;
       flex-wrap: wrap;
-      margin-top: calc(2 * var(--medium-size) + var(--main-size) + 0.15em);
+      margin-top: calc(2 * var(--unit-size) + var(--main-size) + 0.15em);
       ;
       justify-content: center;
       align-items: center;
@@ -61,4 +61,4 @@
       padding: calc(3*var(--unit-size));
       padding-top: var(--unit-size);
       height: 100%;
-}
\ No newline at end of file
+}
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 3a871f0717..48c98282d2 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -54,12 +54,10 @@
                   <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="icon-menu">
+                                          <label for="toggle" id='menu'></label>
+                                    </div>
                                     <div class='navbar'>
                                           <div class='profile'>
                                                 <svg class="icon icon-avatar">
diff --git a/templates/faq/about.html.twig b/templates/faq/about.html.twig
deleted file mode 100644
index 123eb71f2c..0000000000
--- a/templates/faq/about.html.twig
+++ /dev/null
@@ -1,12 +0,0 @@
-{% extends 'faq/faq.html.twig' %}
-
-{% block title %}Help{% endblock %}
-
-{% block body %}
-      {% 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.
-            {% endapply %}
-      {% endblock %}
-{% endblock %}
\ No newline at end of file
diff --git a/templates/faq/contact.html.twig b/templates/faq/contact.html.twig
index a9f998a90b..5728b74bd5 100644
--- a/templates/faq/contact.html.twig
+++ b/templates/faq/contact.html.twig
@@ -3,12 +3,34 @@
 {% block title %}Help{% endblock %}
 
 {% block body %}
+<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 'doc_faq' %}active{% endif %}'>FAQ</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Contact</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Tags</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_groups' %}active{% endif %}'>Groups</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_openid' %}active{% endif %}'>OpenID</a>
+                  </li>
+            </ul>
+      </nav>
       <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 %}
-            {% endblock %}
+      {% 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 %}
+      {% endblock %}
       </div>
-{% endblock %}
\ No newline at end of file
+</div>
+{% endblock %}
diff --git a/templates/faq/groups.html.twig b/templates/faq/groups.html.twig
index 037f64b9f2..b6f1b8dff5 100644
--- a/templates/faq/groups.html.twig
+++ b/templates/faq/groups.html.twig
@@ -3,10 +3,31 @@
 {% block title %}Help{% endblock %}
 
 {% block body %}
+<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 'doc_faq' %}active{% endif %}'>FAQ</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_contact' %}active{% endif %}'>Contact</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Tags</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_groups' %}active{% endif %}'>Groups</a>
+                  </li>
+                  <li>
+                        <a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_openid' %}active{% endif %}'>OpenID</a>
+                  </li>
+            </ul>
+      </nav>
       <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
+                  ## 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
@@ -17,4 +38,5 @@
                   {% endapply %}
             {% endblock %}
       </div>
-{% endblock %}
\ No newline at end of file
+</div>
+{% endblock %}
diff --git a/templates/faq/openid.html.twig b/templates/faq/openid.html.twig
index 273e962fc9..e8f9a76c77 100644
--- a/templates/faq/openid.html.twig
+++ b/templates/faq/openid.html.twig
@@ -7,26 +7,27 @@
             <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>
+                              <a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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
+                        ## Openid
+                        GNU social 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
@@ -40,4 +41,4 @@
                   {% endblock %}
             </div>
       </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/templates/faq/tags.html.twig b/templates/faq/tags.html.twig
index 1254d5eb9f..8db5b19402 100644
--- a/templates/faq/tags.html.twig
+++ b/templates/faq/tags.html.twig
@@ -7,26 +7,27 @@
             <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>
+                              <a href="{{ path('doc_faq') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_contact') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_tags') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_groups') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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>
+                              <a href="{{ path('doc_openid') }}" class='hover-effect {% if app.request.attributes.get('_route') starts with '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 #
+                        ## 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
@@ -38,4 +39,4 @@
                   {% endblock %}
             </div>
       </div>
-{% endblock %}
\ No newline at end of file
+{% endblock %}