diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 4f2a93777..ed8bd8368 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -2,7 +2,7 @@
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-  transition: all 0.2s ease-in-out;
+  transition: all 0.2s;
 }
 
 .page-enter,
@@ -181,7 +181,7 @@ nav.primary-nav {
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    padding: 16px;
+    padding: 14px;
     border-radius: 50%;
     background-color: var(--brd-color);
     color: var(--fg-light-color);
@@ -226,7 +226,7 @@ nav.secondary-nav {
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
-        padding: 16px;
+        padding: 14px;
         border-radius: 50%;
         background-color: var(--bg-dark-color);
         color: var(--fg-light-color);
@@ -267,8 +267,9 @@ h3 {
     color: white;
     border-radius: 8px;
     padding: 8px 16px;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 500;
+    box-shadow: 0 4px 24px rgba(black, 0.1);
   }
 
   .tooltip-arrow {
@@ -613,6 +614,15 @@ ol li {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-grow: 1;
+  flex-direction: row;
+
+  * {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
 .show-on-small-screen {
@@ -774,13 +784,13 @@ input[type="radio"]:checked + label + .tab {
 .inner-left {
   display: flex;
   order: 1;
-  margin-right: 16px;
 }
 
 .inner-right {
   display: flex;
   width: 30%;
   order: 2;
+  margin-left: 16px;
 }
 
 .bg-color {
@@ -839,6 +849,9 @@ input[type="radio"]:checked + label + .tab {
 
   .inner-left {
     order: 0;
-    margin-right: 0;
+  }
+
+  .inner-right {
+    margin-left: 0;
   }
 }
diff --git a/components/history.vue b/components/history.vue
index 512becdc3..b9218da0e 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -24,8 +24,9 @@
             @click="toggleStar(index)"
             v-tooltip="{ content: !entry.star ? 'Add star' : 'Remove star' }"
           >
-            <i class="material-icons" v-if="entry.star">star</i>
-            <i class="material-icons" v-else>star_border</i>
+            <i class="material-icons">
+              {{ entry.star ? "star" : "star_border" }}
+            </i>
           </button>
           <li>
             <input
@@ -37,8 +38,7 @@
               class="bg-color"
             />
           </li>
-          <!--
-          <li>
+          <!-- <li>
             <button
               class="icon"
               v-tooltip="{
@@ -47,11 +47,11 @@
                   : 'Used pre-request script'
               }"
             >
-              <i class="material-icons" v-if="!entry.usesScripts">http</i>
-              <i class="material-icons" v-else>code</i>
+              <i class="material-icons">
+                {{ !entry.usesScripts ? "http" : "code" }}
+              </i>
             </button>
-          </li>
--->
+          </li> -->
           <v-popover>
             <button class="tooltip-target icon" v-tooltip="'Options'">
               <i class="material-icons">more_vert</i>
@@ -122,7 +122,7 @@
             />
           </li>
         </div>
-        <transition name="smooth">
+        <transition name="fade">
           <div v-if="showMore" class="show-on-large-screen">
             <li>
               <input
@@ -225,8 +225,9 @@
             </div>
             <div>
               <button class="icon" @click="toggleCollapse()">
-                <i class="material-icons" v-if="!showMore">first_page</i>
-                <i class="material-icons" v-else>last_page</i>
+                <i class="material-icons">
+                  {{ !showMore ? "first_page" : "last_page" }}
+                </i>
                 <span>{{ !showMore ? "Show more" : "Hide more" }}</span>
               </button>
             </div>
@@ -267,13 +268,13 @@
   }
 }
 
-.smooth-enter-active,
-.smooth-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: all 0.2s;
 }
 
-.smooth-enter,
-.smooth-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }
 
diff --git a/components/section.vue b/components/section.vue
index bbf8a99d1..cd5e41e66 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -5,8 +5,9 @@
   >
     <legend @click.prevent="collapse">
       <span>{{ label }}</span>
-      <i class="material-icons" v-if="isCollapsed">expand_more</i>
-      <i class="material-icons" v-if="!isCollapsed">expand_less</i>
+      <i class="material-icons">
+        {{ isCollapsed ? "expand_more" : "expand_less" }}
+      </i>
     </legend>
     <div class="collapsible" :class="{ hidden: collapsed }">
       <slot />
diff --git a/layouts/default.vue b/layouts/default.vue
index 53156c47f..7a2d2b607 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,12 +2,12 @@
   <div class="wrapper">
     <header class="header">
       <div class="flex-wrap">
-        <div class="slide-in">
+        <span class="slide-in">
           <nuxt-link :to="localePath('index')">
             <h1 class="logo">Postwoman</h1>
           </nuxt-link>
-        </div>
-        <div class="flex-wrap">
+        </span>
+        <span>
           <a
             href="https://github.com/liyasthomas/postwoman"
             target="_blank"
@@ -81,7 +81,7 @@
               </div>
             </template>
           </v-popover>
-        </div>
+        </span>
       </div>
     </header>
     <div class="content">
@@ -317,39 +317,37 @@
     </div>
     <footer class="footer">
       <div class="flex-wrap">
-        <!-- Bottom section of footer: version/author information -->
-        <div>
-          <span v-if="version.name" class="mono">
+        <span v-if="version.name" class="mono">
+          <a
+            v-bind:href="
+              'https://github.com/liyasthomas/postwoman/releases/tag/' +
+                version.name
+            "
+            target="_blank"
+            rel="noopener"
+          >
+            {{ version.name }}
+          </a>
+          <!-- <span v-if="version.hash">
+            -
             <a
-              v-bind:href="
-                'https://github.com/liyasthomas/postwoman/releases/tag/' +
-                  version.name
-              "
+              v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
               target="_blank"
               rel="noopener"
-            >
-              {{ version.name }}
-            </a>
-            &#x2022;
-            <a
-              href="https://liyasthomas.web.app"
-              target="_blank"
-              rel="noopener"
-            >
+            >{{version.hash}}</a>
+          </span> -->
+          <!-- <span v-if="version.variant">({{version.variant}})</span> -->
+        </span>
+        <span>
+          <a
+            href="https://liyasthomas.web.app"
+            target="_blank"
+            rel="noopener"
+          >
+            <button class="icon" v-tooltip="'Liyas Thomas'">
               🦄
-            </a>
-            <!-- <span v-if="version.hash">
-              -
-              <a
-                v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
-                target="_blank"
-                rel="noopener"
-              >{{version.hash}}</a>
-            </span> -->
-            <!-- <span v-if="version.variant">({{version.variant}})</span> -->
-          </span>
-        </div>
-        <div class="flex-wrap">
+            </button>
+          </a>
           <a
             href="https://postwoman.launchaco.com"
             target="_blank"
@@ -373,7 +371,7 @@
               </div>
             </template>
           </v-popover>
-        </div>
+        </span>
       </div>
     </footer>
     <modal v-if="showShortcuts" @close="showShortcuts = false">
diff --git a/pages/graphql.vue b/pages/graphql.vue
index be61af9a2..9d850deda 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -115,8 +115,9 @@
                     : 'Collapse response'
                 }"
               >
-                <i class="material-icons" v-if="!expandResponse">unfold_more</i>
-                <i class="material-icons" v-else>unfold_less</i>
+                <i class="material-icons">
+                  {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+                </i>
               </button>
               <button
                 class="icon"
diff --git a/pages/index.vue b/pages/index.vue
index 4e0f00ea1..a9d2f51db 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -240,7 +240,7 @@
             </div>
           </div>
           <div class="flex-wrap">
-            <div style="text-align: center;">
+            <span>
               <button
                 class="icon"
                 id="show-modal"
@@ -280,8 +280,8 @@
                   >close</i
                 >
               </button>
-            </div>
-            <div style="text-align: center;">
+            </span>
+            <span>
               <button
                 class="icon"
                 @click="copyRequest"
@@ -311,7 +311,7 @@
               >
                 <i class="material-icons">clear_all</i>
               </button>
-            </div>
+            </span>
           </div>
         </pw-section>
 
@@ -560,6 +560,20 @@
               </ul>
             </pw-section>
           </div>
+          <div class="flex-wrap">
+            <span></span>
+            <button
+              class="icon hide-on-small-screen"
+              @click="activeSidebar = !activeSidebar"
+              v-tooltip="{
+                content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar'
+              }"
+            >
+              <i class="material-icons">
+                {{ activeSidebar ? "last_page" : "first_page" }}
+              </i>
+            </button>
+          </div>
         </section>
 
         <pw-section
@@ -604,10 +618,9 @@
                         : $t('collapse_response')
                     }"
                   >
-                    <i class="material-icons" v-if="!expandResponse"
-                      >unfold_more</i
-                    >
-                    <i class="material-icons" v-else>unfold_less</i>
+                    <i class="material-icons">
+                      {{ !expandResponse ? "unfold_more" : "unfold_less" }}
+                    </i>
                   </button>
                   <button
                     class="icon"
@@ -655,10 +668,9 @@
                 v-if="response.body && responseType === 'text/html'"
               >
                 <button class="icon" @click.prevent="togglePreview">
-                  <i class="material-icons" v-if="!previewEnabled"
-                    >visibility</i
-                  >
-                  <i class="material-icons" v-else>visibility_off</i>
+                  <i class="material-icons">
+                    {{ !previewEnabled ? "visibility" : "visibility_off" }}
+                  </i>
                   <span>{{
                     previewEnabled ? $t("hide_preview") : $t("preview_html")
                   }}</span>
@@ -668,8 +680,7 @@
           </ul>
         </pw-section>
       </div>
-
-      <aside class="sticky-inner inner-right">
+      <aside v-if="activeSidebar" class="sticky-inner inner-right">
         <section>
           <input id="history-tab" type="radio" name="side" checked="checked" />
           <label for="history-tab">{{ $t("history") }}</label>
@@ -910,7 +921,8 @@ export default {
       urlExcludes: {},
       responseBodyText: "",
       responseBodyType: "text",
-      responseBodyMaxLines: 16
+      responseBodyMaxLines: 16,
+      activeSidebar: true
     };
   },
   watch: {
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 0abff8cd8..55b78ac67 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -25,12 +25,11 @@
                   name="connect"
                   @click="toggleConnection"
                 >
-                  {{ toggleConnectionVerb }}
+                  {{ !connectionState ? "Connect" : "Disconnect" }}
                   <span>
-                    <i class="material-icons" v-if="!connectionState">sync</i>
-                    <i class="material-icons" v-if="connectionState"
-                      >sync_disabled</i
-                    >
+                    <i class="material-icons">
+                      {{ !connectionState ? "sync" : "sync_disabled" }}
+                    </i>
                   </span>
                 </button>
               </li>
@@ -115,14 +114,11 @@
                   name="start"
                   @click="toggleSSEConnection"
                 >
-                  {{ toggleSSEConnectionVerb }}
+                  {{ !connectionSSEState ? "Start" : "Stop" }}
                   <span>
-                    <i class="material-icons" v-if="!connectionSSEState"
-                      >sync</i
-                    >
-                    <i class="material-icons" v-if="connectionSSEState"
-                      >sync_disabled</i
-                    >
+                    <i class="material-icons">
+                      {{ !connectionSSEState ? "sync" : "sync_disabled" }}
+                    </i>
                   </span>
                 </button>
               </li>
@@ -209,9 +205,6 @@ export default {
     };
   },
   computed: {
-    toggleConnectionVerb() {
-      return !this.connectionState ? "Connect" : "Disconnect";
-    },
     urlValid() {
       const pattern = new RegExp(
         "^(wss?:\\/\\/)?" +
@@ -224,9 +217,6 @@ export default {
       );
       return pattern.test(this.url);
     },
-    toggleSSEConnectionVerb() {
-      return !this.connectionSSEState ? "Start" : "Stop";
-    },
     serverValid() {
       const pattern = new RegExp(
         "^(http(s)?:\\/\\/)?" +