diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index afb764719..ed8bd8368 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -615,6 +615,14 @@ ol li {
   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 {
diff --git a/components/history.vue b/components/history.vue
index b85ab6895..28f3261e7 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>
@@ -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,14 +268,14 @@
   }
 }
 
-.fade-enter-active,	
-.fade-leave-active {	
-  transition: all 0.2s;	
-}	
-.fade-enter,	
-.fade-leave-to {	
-  opacity: 0;	
-}	
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s;
+}
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 
 .stared {
   color: #f8e81c !important;
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 01c3a5784..983488c33 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>
 
@@ -562,8 +562,16 @@
           </div>
           <div class="flex-wrap">
             <span></span>
-            <button class="icon" @click="activeSidebar = !activeSidebar" v-tooltip="{ content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar' }">
-              <i class="material-icons">{{activeSidebar ? 'chevron_right' : 'chevron_left'}}</i>
+            <button
+              class="icon"
+              @click="activeSidebar = !activeSidebar"
+              v-tooltip="{
+                content: activeSidebar ? 'Hide Sidebar' : 'Show Sidebar'
+              }"
+            >
+              <i class="material-icons">
+                {{ activeSidebar ? "last_page" : "first_page" }}
+              </i>
             </button>
           </div>
         </section>
@@ -610,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"
@@ -661,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>
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 0abff8cd8..95d471bdf 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -27,10 +27,9 @@
                 >
                   {{ toggleConnectionVerb }}
                   <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>
@@ -117,12 +116,9 @@
                 >
                   {{ toggleSSEConnectionVerb }}
                   <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>