diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index bb02c1d0a..c2dde5e64 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -551,7 +551,6 @@ fieldset.yellow legend {
 
 input[type="file"],
 input[type="radio"],
-.tab,
 .hide-on-large-screen,
 #installPWA,
 .hidden {
@@ -827,33 +826,6 @@ section {
   border-radius: 16px;
 }
 
-.tab {
-  width: 100%;
-  order: 1;
-}
-
-input[type="radio"] + label {
-  padding: 8px 16px;
-  border-bottom: 2px solid transparent;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-
-  &:hover,
-  &:active,
-  &:focus {
-    border-color: var(--brd-color);
-  }
-}
-
-input[type="radio"]:checked + label {
-  border-color: var(--fg-color);
-  color: var(--fg-color);
-}
-
-input[type="radio"]:checked + label + .tab {
-  display: block;
-}
-
 .toasted-container .toasted {
   justify-content: flex-start !important;
 }
diff --git a/components/ui/tab.vue b/components/ui/tab.vue
new file mode 100644
index 000000000..55637a888
--- /dev/null
+++ b/components/ui/tab.vue
@@ -0,0 +1,36 @@
+<template>
+  <div v-if="isActive">
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
+
+<script>
+export default {
+  props: {
+    name: {
+      required: true,
+    },
+    selected: {
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      isActive: false,
+    }
+  },
+
+  // computed: {
+  //   href() {
+  //     return `#${this.name.toLowerCase().replace(/ /g, "-")}`
+  //   },
+  // },
+
+  mounted() {
+    this.isActive = this.selected
+  },
+}
+</script>
diff --git a/components/ui/tabs.vue b/components/ui/tabs.vue
new file mode 100644
index 000000000..d21adb2cc
--- /dev/null
+++ b/components/ui/tabs.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="tabs-wrapper">
+    <div class="tabs">
+      <ul>
+        <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }">
+          <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
+        </li>
+      </ul>
+    </div>
+    <div class="tabs-details">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.tabs-wrapper {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 1;
+
+  .tabs {
+    -webkit-overflow-scrolling: touch;
+    display: flex;
+    white-space: nowrap;
+    overflow: auto;
+
+    ul {
+      display: flex;
+      width: 0px;
+    }
+
+    li {
+      display: inline-flex;
+
+      a {
+        display: flex;
+        padding: 8px 16px;
+        color: var(--fg-light-color);
+        border-radius: 4px;
+        cursor: pointer;
+
+        &:hover {
+          color: var(--fg-color);
+        }
+      }
+
+      &.is-active a {
+        background-color: var(--brd-color);
+        color: var(--fg-color);
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  ul,
+  ol {
+    flex-flow: row nowrap;
+  }
+}
+</style>
+
+<script>
+export default {
+  data() {
+    return {
+      tabs: [],
+    }
+  },
+
+  created() {
+    this.tabs = this.$children
+  },
+
+  methods: {
+    selectTab({ name }) {
+      this.tabs.forEach(tab => {
+        tab.isActive = tab.name == name
+      })
+    },
+  },
+}
+</script>
diff --git a/pages/doc.vue b/pages/doc.vue
index 241ae7b58..601fef02a 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -262,9 +262,9 @@
 
 <style scoped lang="scss">
 .collection,
+.doc-desc,
 .folder,
-.request,
-.doc-desc {
+.request {
   display: flex;
   flex-flow: column;
   justify-content: center;
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 1a2f52508..587ce6742 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -261,69 +261,31 @@
       <aside class="sticky-inner inner-right">
         <pw-section class="purple" :label="$t('docs')" ref="docs">
           <section>
-            <input
-              v-if="queryFields.length > 0"
-              id="queries-tab"
-              type="radio"
-              name="side"
-              checked="checked"
-            />
-            <label v-if="queryFields.length > 0" for="queries-tab">
-              {{ $t("queries") }}
-            </label>
-            <div v-if="queryFields.length > 0" class="tab">
-              <div v-for="field in queryFields" :key="field.name">
-                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
-              </div>
-            </div>
+            <tabs>
+              <tab v-if="queryFields.length > 0" :name="$t('queries')" :selected="true">
+                <div v-for="field in queryFields" :key="field.name">
+                  <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                </div>
+              </tab>
 
-            <input
-              v-if="mutationFields.length > 0"
-              id="mutations-tab"
-              type="radio"
-              name="side"
-              checked="checked"
-            />
-            <label v-if="mutationFields.length > 0" for="mutations-tab">
-              {{ $t("mutations") }}
-            </label>
-            <div v-if="mutationFields.length > 0" class="tab">
-              <div v-for="field in mutationFields" :key="field.name">
-                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
-              </div>
-            </div>
+              <tab v-if="mutationFields.length > 0" :name="$t('mutations')">
+                <div v-for="field in mutationFields" :key="field.name">
+                  <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                </div>
+              </tab>
 
-            <input
-              v-if="subscriptionFields.length > 0"
-              id="subscriptions-tab"
-              type="radio"
-              name="side"
-              checked="checked"
-            />
-            <label v-if="subscriptionFields.length > 0" for="subscriptions-tab">
-              {{ $t("subscriptions") }}
-            </label>
-            <div v-if="subscriptionFields.length > 0" class="tab">
-              <div v-for="field in subscriptionFields" :key="field.name">
-                <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
-              </div>
-            </div>
+              <tab v-if="subscriptionFields.length > 0" :name="$t('subscriptions')">
+                <div v-for="field in subscriptionFields" :key="field.name">
+                  <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                </div>
+              </tab>
 
-            <input
-              v-if="gqlTypes.length > 0"
-              id="gqltypes-tab"
-              type="radio"
-              name="side"
-              checked="checked"
-            />
-            <label v-if="gqlTypes.length > 0" for="gqltypes-tab">
-              {{ $t("types") }}
-            </label>
-            <div v-if="gqlTypes.length > 0" class="tab">
-              <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
-                <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
-              </div>
-            </div>
+              <tab v-if="gqlTypes.length > 0" :name="$t('types')">
+                <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
+                  <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
+                </div>
+              </tab>
+            </tabs>
           </section>
 
           <p
@@ -374,6 +336,8 @@ export default {
     autocomplete: () => import("../components/ui/autocomplete"),
     Editor: AceEditor,
     QueryEditor: QueryEditor,
+    tabs: () => import("../components/ui/tabs"),
+    tab: () => import("../components/ui/tab"),
   },
   data() {
     return {
diff --git a/pages/index.vue b/pages/index.vue
index 6caa18614..f1c28a462 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -511,374 +511,370 @@
         </pw-section>
 
         <section id="options">
-          <input id="tab-one" type="radio" name="options" checked="checked" />
-          <label for="tab-one">{{ $t("authentication") }}</label>
-          <div class="tab">
-            <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
-              <ul>
-                <li>
-                  <div class="flex-wrap">
-                    <label for="auth">{{ $t("authentication") }}</label>
-                    <div>
+          <tabs>
+            <tab :name="$t('authentication')" :selected="true">
+              <pw-section class="cyan" :label="$t('authentication')" ref="authentication">
+                <ul>
+                  <li>
+                    <div class="flex-wrap">
+                      <label for="auth">{{ $t("authentication") }}</label>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="clearContent('auth', $event)"
+                          v-tooltip.bottom="$t('clear')"
+                        >
+                          <i class="material-icons">clear_all</i>
+                        </button>
+                      </div>
+                    </div>
+                    <span class="select-wrapper">
+                      <select id="auth" v-model="auth">
+                        <option>None</option>
+                        <option>Basic Auth</option>
+                        <option>Bearer Token</option>
+                        <option>OAuth 2.0</option>
+                      </select>
+                    </span>
+                  </li>
+                </ul>
+                <ul v-if="auth === 'Basic Auth'">
+                  <li>
+                    <input placeholder="User" name="http_basic_user" v-model="httpUser" />
+                  </li>
+                  <li>
+                    <input
+                      placeholder="Password"
+                      name="http_basic_passwd"
+                      :type="passwordFieldType"
+                      v-model="httpPassword"
+                    />
+                  </li>
+                  <div>
+                    <li>
                       <button
                         class="icon"
-                        @click="clearContent('auth', $event)"
-                        v-tooltip.bottom="$t('clear')"
+                        id="switchVisibility"
+                        ref="switchVisibility"
+                        @click="switchVisibility"
                       >
-                        <i class="material-icons">clear_all</i>
+                        <i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
+                        <i class="material-icons" v-if="passwordFieldType !== 'text'"
+                          >visibility_off</i
+                        >
+                      </button>
+                    </li>
+                  </div>
+                </ul>
+                <ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
+                  <li>
+                    <div class="flex-wrap">
+                      <input placeholder="Token" name="bearer_token" v-model="bearerToken" />
+                      <button
+                        v-if="auth === 'OAuth 2.0'"
+                        class="icon"
+                        @click="showTokenList = !showTokenList"
+                        v-tooltip.bottom="$t('use_token')"
+                      >
+                        <i class="material-icons">open_in_new</i>
+                      </button>
+                      <button
+                        v-if="auth === 'OAuth 2.0'"
+                        class="icon"
+                        @click="showTokenRequest = !showTokenRequest"
+                        v-tooltip.bottom="$t('get_token')"
+                      >
+                        <i class="material-icons">vpn_key</i>
                       </button>
                     </div>
-                  </div>
-                  <span class="select-wrapper">
-                    <select id="auth" v-model="auth">
-                      <option>None</option>
-                      <option>Basic Auth</option>
-                      <option>Bearer Token</option>
-                      <option>OAuth 2.0</option>
-                    </select>
-                  </span>
-                </li>
-              </ul>
-              <ul v-if="auth === 'Basic Auth'">
-                <li>
-                  <input placeholder="User" name="http_basic_user" v-model="httpUser" />
-                </li>
-                <li>
-                  <input
-                    placeholder="Password"
-                    name="http_basic_passwd"
-                    :type="passwordFieldType"
-                    v-model="httpPassword"
-                  />
-                </li>
-                <div>
-                  <li>
-                    <button
-                      class="icon"
-                      id="switchVisibility"
-                      ref="switchVisibility"
-                      @click="switchVisibility"
-                    >
-                      <i class="material-icons" v-if="passwordFieldType === 'text'">visibility</i>
-                      <i class="material-icons" v-if="passwordFieldType !== 'text'"
-                        >visibility_off</i
-                      >
-                    </button>
                   </li>
+                </ul>
+                <div class="flex-wrap">
+                  <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
+                    {{ $t("include_in_url") }}
+                  </pw-toggle>
                 </div>
-              </ul>
-              <ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
-                <li>
-                  <div class="flex-wrap">
-                    <input placeholder="Token" name="bearer_token" v-model="bearerToken" />
-                    <button
-                      v-if="auth === 'OAuth 2.0'"
-                      class="icon"
-                      @click="showTokenList = !showTokenList"
-                      v-tooltip.bottom="$t('use_token')"
-                    >
-                      <i class="material-icons">open_in_new</i>
-                    </button>
-                    <button
-                      v-if="auth === 'OAuth 2.0'"
-                      class="icon"
-                      @click="showTokenRequest = !showTokenRequest"
-                      v-tooltip.bottom="$t('get_token')"
-                    >
+              </pw-section>
+              <pw-section
+                v-if="showTokenRequest"
+                class="red"
+                label="Access Token Request"
+                ref="accessTokenRequest"
+              >
+                <ul>
+                  <li>
+                    <div class="flex-wrap">
+                      <label for="token-name">{{ $t("token_name") }}</label>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="showTokenRequestList = true"
+                          v-tooltip.bottom="$t('manage_token_req')"
+                        >
+                          <i class="material-icons">library_add</i>
+                        </button>
+                        <button
+                          class="icon"
+                          @click="clearContent('access_token', $event)"
+                          v-tooltip.bottom="$t('clear')"
+                        >
+                          <i class="material-icons">clear_all</i>
+                        </button>
+                        <button
+                          class="icon"
+                          @click="showTokenRequest = false"
+                          v-tooltip.bottom="$t('close')"
+                        >
+                          <i class="material-icons">close</i>
+                        </button>
+                      </div>
+                    </div>
+                    <input
+                      id="token-name"
+                      :placeholder="$t('optional')"
+                      name="token_name"
+                      v-model="accessTokenName"
+                      type="text"
+                    />
+                  </li>
+                </ul>
+                <ul>
+                  <li>
+                    <label for="oidc-discovery-url">
+                      {{ $t("oidc_discovery_url") }}
+                    </label>
+                    <input
+                      :disabled="this.authUrl !== '' || this.accessTokenUrl !== ''"
+                      id="oidc-discovery-url"
+                      name="oidc_discovery_url"
+                      type="url"
+                      v-model="oidcDiscoveryUrl"
+                      placeholder="https://example.com/.well-known/openid-configuration"
+                    />
+                  </li>
+                </ul>
+                <ul>
+                  <li>
+                    <label for="auth-url">{{ $t("auth_url") }}</label>
+                    <input
+                      :disabled="this.oidcDiscoveryUrl !== ''"
+                      id="auth-url"
+                      name="auth_url"
+                      type="url"
+                      v-model="authUrl"
+                      placeholder="https://example.com/login/oauth/authorize"
+                    />
+                  </li>
+                </ul>
+                <ul>
+                  <li>
+                    <label for="access-token-url">
+                      {{ $t("access_token_url") }}
+                    </label>
+                    <input
+                      :disabled="this.oidcDiscoveryUrl !== ''"
+                      id="access-token-url"
+                      name="access_token_url"
+                      type="url"
+                      v-model="accessTokenUrl"
+                      placeholder="https://example.com/login/oauth/access_token"
+                    />
+                  </li>
+                </ul>
+                <ul>
+                  <li>
+                    <label for="client-id">{{ $t("client_id") }}</label>
+                    <input
+                      id="client-id"
+                      name="client_id"
+                      type="text"
+                      v-model="clientId"
+                      placeholder="Client ID"
+                    />
+                  </li>
+                </ul>
+                <ul>
+                  <li>
+                    <label for="scope">{{ $t("scope") }}</label>
+                    <input
+                      id="scope"
+                      name="scope"
+                      type="text"
+                      v-model="scope"
+                      placeholder="e.g. read:org"
+                    />
+                  </li>
+                </ul>
+                <ul>
+                  <li>
+                    <button class="icon" @click="handleAccessTokenRequest">
                       <i class="material-icons">vpn_key</i>
-                    </button>
-                  </div>
-                </li>
-              </ul>
-              <div class="flex-wrap">
-                <pw-toggle :on="!urlExcludes.auth" @change="setExclude('auth', !$event)">
-                  {{ $t("include_in_url") }}
-                </pw-toggle>
-              </div>
-            </pw-section>
-            <pw-section
-              v-if="showTokenRequest"
-              class="red"
-              label="Access Token Request"
-              ref="accessTokenRequest"
-            >
-              <ul>
-                <li>
-                  <div class="flex-wrap">
-                    <label for="token-name">{{ $t("token_name") }}</label>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="showTokenRequestList = true"
-                        v-tooltip.bottom="$t('manage_token_req')"
-                      >
-                        <i class="material-icons">library_add</i>
-                      </button>
-                      <button
-                        class="icon"
-                        @click="clearContent('access_token', $event)"
-                        v-tooltip.bottom="$t('clear')"
-                      >
-                        <i class="material-icons">clear_all</i>
-                      </button>
-                      <button
-                        class="icon"
-                        @click="showTokenRequest = false"
-                        v-tooltip.bottom="$t('close')"
-                      >
-                        <i class="material-icons">close</i>
-                      </button>
-                    </div>
-                  </div>
-                  <input
-                    id="token-name"
-                    :placeholder="$t('optional')"
-                    name="token_name"
-                    v-model="accessTokenName"
-                    type="text"
-                  />
-                </li>
-              </ul>
-              <ul>
-                <li>
-                  <label for="oidc-discovery-url">
-                    {{ $t("oidc_discovery_url") }}
-                  </label>
-                  <input
-                    :disabled="this.authUrl !== '' || this.accessTokenUrl !== ''"
-                    id="oidc-discovery-url"
-                    name="oidc_discovery_url"
-                    type="url"
-                    v-model="oidcDiscoveryUrl"
-                    placeholder="https://example.com/.well-known/openid-configuration"
-                  />
-                </li>
-              </ul>
-              <ul>
-                <li>
-                  <label for="auth-url">{{ $t("auth_url") }}</label>
-                  <input
-                    :disabled="this.oidcDiscoveryUrl !== ''"
-                    id="auth-url"
-                    name="auth_url"
-                    type="url"
-                    v-model="authUrl"
-                    placeholder="https://example.com/login/oauth/authorize"
-                  />
-                </li>
-              </ul>
-              <ul>
-                <li>
-                  <label for="access-token-url">
-                    {{ $t("access_token_url") }}
-                  </label>
-                  <input
-                    :disabled="this.oidcDiscoveryUrl !== ''"
-                    id="access-token-url"
-                    name="access_token_url"
-                    type="url"
-                    v-model="accessTokenUrl"
-                    placeholder="https://example.com/login/oauth/access_token"
-                  />
-                </li>
-              </ul>
-              <ul>
-                <li>
-                  <label for="client-id">{{ $t("client_id") }}</label>
-                  <input
-                    id="client-id"
-                    name="client_id"
-                    type="text"
-                    v-model="clientId"
-                    placeholder="Client ID"
-                  />
-                </li>
-              </ul>
-              <ul>
-                <li>
-                  <label for="scope">{{ $t("scope") }}</label>
-                  <input
-                    id="scope"
-                    name="scope"
-                    type="text"
-                    v-model="scope"
-                    placeholder="e.g. read:org"
-                  />
-                </li>
-              </ul>
-              <ul>
-                <li>
-                  <button class="icon" @click="handleAccessTokenRequest">
-                    <i class="material-icons">vpn_key</i>
-                    <span>{{ $t("request_token") }}</span>
-                  </button>
-                </li>
-              </ul>
-            </pw-section>
-          </div>
-
-          <input id="tab-two" type="radio" name="options" />
-          <label for="tab-two">{{ $t("headers") }}</label>
-          <div class="tab">
-            <pw-section class="orange" label="Headers" ref="headers">
-              <ul>
-                <li>
-                  <div class="flex-wrap">
-                    <label for="headerList">{{ $t("header_list") }}</label>
-                    <div>
-                      <button
-                        class="icon"
-                        @click="clearContent('headers', $event)"
-                        v-tooltip.bottom="$t('clear')"
-                      >
-                        <i class="material-icons">clear_all</i>
-                      </button>
-                    </div>
-                  </div>
-                  <textarea
-                    id="headerList"
-                    readonly
-                    v-textarea-auto-height="headerString"
-                    v-model="headerString"
-                    :placeholder="$t('add_one_header')"
-                    rows="1"
-                  ></textarea>
-                </li>
-              </ul>
-              <ul v-for="(header, index) in headers" :key="index">
-                <li>
-                  <autocomplete
-                    :placeholder="$t('header_count', { count: index + 1 })"
-                    :source="commonHeaders"
-                    :spellcheck="false"
-                    :value="header.key"
-                    @input="
-                      $store.commit('setKeyHeader', {
-                        index,
-                        value: $event,
-                      })
-                    "
-                    @keyup.prevent="setRouteQueryState"
-                    autofocus
-                  />
-                </li>
-                <li>
-                  <input
-                    :placeholder="$t('value_count', { count: index + 1 })"
-                    :name="'value' + index"
-                    :value="header.value"
-                    @change="
-                      $store.commit('setValueHeader', {
-                        index,
-                        value: $event.target.value,
-                      })
-                    "
-                    @keyup.prevent="setRouteQueryState"
-                  />
-                </li>
-                <div>
-                  <li>
-                    <button
-                      class="icon"
-                      @click="removeRequestHeader(index)"
-                      v-tooltip.bottom="$t('delete')"
-                      id="header"
-                    >
-                      <i class="material-icons">delete</i>
+                      <span>{{ $t("request_token") }}</span>
                     </button>
                   </li>
-                </div>
-              </ul>
-              <ul>
-                <li>
-                  <button class="icon" @click="addRequestHeader">
-                    <i class="material-icons">add</i>
-                    <span>{{ $t("add_new") }}</span>
-                  </button>
-                </li>
-              </ul>
-            </pw-section>
-          </div>
+                </ul>
+              </pw-section>
+            </tab>
 
-          <input id="tab-three" type="radio" name="options" />
-          <label for="tab-three">{{ $t("parameters") }}</label>
-          <div class="tab">
-            <pw-section class="pink" label="Parameters" ref="parameters">
-              <ul>
-                <li>
-                  <div class="flex-wrap">
-                    <label for="paramList">{{ $t("parameter_list") }}</label>
-                    <div>
+            <tab :name="$t('headers')">
+              <pw-section class="orange" label="Headers" ref="headers">
+                <ul>
+                  <li>
+                    <div class="flex-wrap">
+                      <label for="headerList">{{ $t("header_list") }}</label>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="clearContent('headers', $event)"
+                          v-tooltip.bottom="$t('clear')"
+                        >
+                          <i class="material-icons">clear_all</i>
+                        </button>
+                      </div>
+                    </div>
+                    <textarea
+                      id="headerList"
+                      readonly
+                      v-textarea-auto-height="headerString"
+                      v-model="headerString"
+                      :placeholder="$t('add_one_header')"
+                      rows="1"
+                    ></textarea>
+                  </li>
+                </ul>
+                <ul v-for="(header, index) in headers" :key="index">
+                  <li>
+                    <autocomplete
+                      :placeholder="$t('header_count', { count: index + 1 })"
+                      :source="commonHeaders"
+                      :spellcheck="false"
+                      :value="header.key"
+                      @input="
+                        $store.commit('setKeyHeader', {
+                          index,
+                          value: $event,
+                        })
+                      "
+                      @keyup.prevent="setRouteQueryState"
+                      autofocus
+                    />
+                  </li>
+                  <li>
+                    <input
+                      :placeholder="$t('value_count', { count: index + 1 })"
+                      :name="'value' + index"
+                      :value="header.value"
+                      @change="
+                        $store.commit('setValueHeader', {
+                          index,
+                          value: $event.target.value,
+                        })
+                      "
+                      @keyup.prevent="setRouteQueryState"
+                    />
+                  </li>
+                  <div>
+                    <li>
                       <button
                         class="icon"
-                        @click="clearContent('parameters', $event)"
-                        v-tooltip.bottom="$t('clear')"
+                        @click="removeRequestHeader(index)"
+                        v-tooltip.bottom="$t('delete')"
+                        id="header"
                       >
-                        <i class="material-icons">clear_all</i>
+                        <i class="material-icons">delete</i>
                       </button>
-                    </div>
+                    </li>
                   </div>
-                  <textarea
-                    id="paramList"
-                    readonly
-                    v-textarea-auto-height="queryString"
-                    v-model="queryString"
-                    :placeholder="$t('add_one_parameter')"
-                    rows="1"
-                  ></textarea>
-                </li>
-              </ul>
-              <ul v-for="(param, index) in params" :key="index">
-                <li>
-                  <input
-                    :placeholder="$t('parameter_count', { count: index + 1 })"
-                    :name="'param' + index"
-                    :value="param.key"
-                    @change="
-                      $store.commit('setKeyParams', {
-                        index,
-                        value: $event.target.value,
-                      })
-                    "
-                    autofocus
-                  />
-                </li>
-                <li>
-                  <input
-                    :placeholder="$t('value_count', { count: index + 1 })"
-                    :name="'value' + index"
-                    :value="param.value"
-                    @change="
-                      $store.commit('setValueParams', {
-                        index,
-                        value: $event.target.value,
-                      })
-                    "
-                  />
-                </li>
-                <div>
+                </ul>
+                <ul>
                   <li>
-                    <button
-                      class="icon"
-                      @click="removeRequestParam(index)"
-                      v-tooltip.bottom="$t('delete')"
-                      id="param"
-                    >
-                      <i class="material-icons">delete</i>
+                    <button class="icon" @click="addRequestHeader">
+                      <i class="material-icons">add</i>
+                      <span>{{ $t("add_new") }}</span>
                     </button>
                   </li>
-                </div>
-              </ul>
-              <ul>
-                <li>
-                  <button class="icon" @click="addRequestParam">
-                    <i class="material-icons">add</i>
-                    <span>{{ $t("add_new") }}</span>
-                  </button>
-                </li>
-              </ul>
-            </pw-section>
-          </div>
+                </ul>
+              </pw-section>
+            </tab>
+
+            <tab :name="$t('parameters')">
+              <pw-section class="pink" label="Parameters" ref="parameters">
+                <ul>
+                  <li>
+                    <div class="flex-wrap">
+                      <label for="paramList">{{ $t("parameter_list") }}</label>
+                      <div>
+                        <button
+                          class="icon"
+                          @click="clearContent('parameters', $event)"
+                          v-tooltip.bottom="$t('clear')"
+                        >
+                          <i class="material-icons">clear_all</i>
+                        </button>
+                      </div>
+                    </div>
+                    <textarea
+                      id="paramList"
+                      readonly
+                      v-textarea-auto-height="queryString"
+                      v-model="queryString"
+                      :placeholder="$t('add_one_parameter')"
+                      rows="1"
+                    ></textarea>
+                  </li>
+                </ul>
+                <ul v-for="(param, index) in params" :key="index">
+                  <li>
+                    <input
+                      :placeholder="$t('parameter_count', { count: index + 1 })"
+                      :name="'param' + index"
+                      :value="param.key"
+                      @change="
+                        $store.commit('setKeyParams', {
+                          index,
+                          value: $event.target.value,
+                        })
+                      "
+                      autofocus
+                    />
+                  </li>
+                  <li>
+                    <input
+                      :placeholder="$t('value_count', { count: index + 1 })"
+                      :name="'value' + index"
+                      :value="param.value"
+                      @change="
+                        $store.commit('setValueParams', {
+                          index,
+                          value: $event.target.value,
+                        })
+                      "
+                    />
+                  </li>
+                  <div>
+                    <li>
+                      <button
+                        class="icon"
+                        @click="removeRequestParam(index)"
+                        v-tooltip.bottom="$t('delete')"
+                        id="param"
+                      >
+                        <i class="material-icons">delete</i>
+                      </button>
+                    </li>
+                  </div>
+                </ul>
+                <ul>
+                  <li>
+                    <button class="icon" @click="addRequestParam">
+                      <i class="material-icons">add</i>
+                      <span>{{ $t("add_new") }}</span>
+                    </button>
+                  </li>
+                </ul>
+              </pw-section>
+            </tab>
+          </tabs>
 
           <!-- <div class="flex-wrap">
             <span></span>
@@ -993,44 +989,38 @@
 
       <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>
-          <div class="tab">
-            <history @useHistory="handleUseHistory" ref="historyComponent" />
-          </div>
+          <tabs>
+            <tab :name="$t('history')" :selected="true">
+              <history @useHistory="handleUseHistory" ref="historyComponent" />
+            </tab>
 
-          <input id="collection-tab" type="radio" name="side" />
-          <label for="collection-tab">{{ $t("collections") }}</label>
-          <div class="tab">
-            <collections />
-          </div>
+            <tab :name="$t('collections')">
+              <collections />
+            </tab>
 
-          <input id="environment-tab" type="radio" name="side" />
-          <label for="environment-tab">{{ $t("environment") }}</label>
-          <div class="tab">
-            <environments @use-environment="useSelectedEnvironment($event)" />
-          </div>
+            <tab :name="$t('environment')">
+              <environments @use-environment="useSelectedEnvironment($event)" />
+            </tab>
 
-          <input id="sync-tab" type="radio" name="side" />
-          <label for="sync-tab">{{ $t("notes") }}</label>
-          <div class="tab">
-            <pw-section class="pink" :label="$t('notes')" ref="sync">
-              <div v-if="fb.currentUser">
-                <inputform />
-                <notes />
-              </div>
-              <div v-else>
-                <ul>
-                  <li>
-                    <label>{{ $t("login_first") }}</label>
-                    <p>
-                      <login />
-                    </p>
-                  </li>
-                </ul>
-              </div>
-            </pw-section>
-          </div>
+            <tab :name="$t('notes')">
+              <pw-section class="pink" :label="$t('notes')" ref="sync">
+                <div v-if="fb.currentUser">
+                  <inputform />
+                  <notes />
+                </div>
+                <div v-else>
+                  <ul>
+                    <li>
+                      <label>{{ $t("login_first") }}</label>
+                      <p>
+                        <login />
+                      </p>
+                    </li>
+                  </ul>
+                </div>
+              </pw-section>
+            </tab>
+          </tabs>
         </section>
       </aside>
 
@@ -1384,6 +1374,8 @@ export default {
     inputform: () => import("../components/firebase/inputform"),
     notes: () => import("../components/firebase/feeds"),
     login: () => import("../components/firebase/login"),
+    tabs: () => import("../components/ui/tabs"),
+    tab: () => import("../components/ui/tab"),
   },
   data() {
     return {
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 82fdd77a9..7724c16f4 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -1,121 +1,123 @@
 <template>
   <div class="page">
     <section id="options">
-      <input id="tab-one" type="radio" name="options" checked="checked" />
-      <label for="tab-one">{{ $t("websocket") }}</label>
-      <div class="tab">
-        <pw-section class="blue" :label="$t('request')" ref="request">
-          <ul>
-            <li>
-              <label for="url">{{ $t("url") }}</label>
-              <input
-                id="url"
-                type="url"
-                spellcheck="false"
-                :class="{ error: !urlValid }"
-                v-model="url"
-                @keyup.enter="urlValid ? toggleConnection() : null"
-              />
-            </li>
-            <div>
+      <tabs>
+        <tab :name="$t('websocket')" :selected="true">
+          <pw-section class="blue" :label="$t('request')" ref="request">
+            <ul>
               <li>
-                <label for="connect" class="hide-on-small-screen">&nbsp;</label>
-                <button :disabled="!urlValid" id="connect" name="connect" @click="toggleConnection">
-                  {{ !connectionState ? $t("connect") : $t("disconnect") }}
-                  <span>
-                    <i class="material-icons">
-                      {{ !connectionState ? "sync" : "sync_disabled" }}
-                    </i>
-                  </span>
-                </button>
+                <label for="url">{{ $t("url") }}</label>
+                <input
+                  id="url"
+                  type="url"
+                  spellcheck="false"
+                  :class="{ error: !urlValid }"
+                  v-model="url"
+                  @keyup.enter="urlValid ? toggleConnection() : null"
+                />
               </li>
-            </div>
-          </ul>
-        </pw-section>
+              <div>
+                <li>
+                  <label for="connect" class="hide-on-small-screen">&nbsp;</label>
+                  <button
+                    :disabled="!urlValid"
+                    id="connect"
+                    name="connect"
+                    @click="toggleConnection"
+                  >
+                    {{ !connectionState ? $t("connect") : $t("disconnect") }}
+                    <span>
+                      <i class="material-icons">
+                        {{ !connectionState ? "sync" : "sync_disabled" }}
+                      </i>
+                    </span>
+                  </button>
+                </li>
+              </div>
+            </ul>
+          </pw-section>
 
-        <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
-          <ul>
-            <li>
-              <realtime-log :title="$t('log')" :log="communication.log" />
-            </li>
-          </ul>
-          <ul>
-            <li>
-              <label for="message">{{ $t("message") }}</label>
-              <input
-                id="message"
-                name="message"
-                type="text"
-                v-model="communication.input"
-                :readonly="!connectionState"
-                @keyup.enter="connectionState ? sendMessage() : null"
-              />
-            </li>
-            <div>
+          <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+            <ul>
               <li>
-                <label for="send" class="hide-on-small-screen">&nbsp;</label>
-                <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
-                  {{ $t("send") }}
-                  <span>
-                    <i class="material-icons">send</i>
-                  </span>
-                </button>
+                <realtime-log :title="$t('log')" :log="communication.log" />
               </li>
-            </div>
-          </ul>
-        </pw-section>
-      </div>
-      <input id="tab-two" type="radio" name="options" />
-      <label for="tab-two">{{ $t("sse") }}</label>
-      <div class="tab">
-        <pw-section class="blue" :label="$t('request')" ref="request">
-          <ul>
-            <li>
-              <label for="server">{{ $t("server") }}</label>
-              <input
-                id="server"
-                type="url"
-                :class="{ error: !serverValid }"
-                v-model="server"
-                @keyup.enter="serverValid ? toggleSSEConnection() : null"
-              />
-            </li>
-            <div>
+            </ul>
+            <ul>
               <li>
-                <label for="start" class="hide-on-small-screen">&nbsp;</label>
-                <button
-                  :disabled="!serverValid"
-                  id="start"
-                  name="start"
-                  @click="toggleSSEConnection"
-                >
-                  {{ !connectionSSEState ? $t("start") : $t("stop") }}
-                  <span>
-                    <i class="material-icons">
-                      {{ !connectionSSEState ? "sync" : "sync_disabled" }}
-                    </i>
-                  </span>
-                </button>
+                <label for="message">{{ $t("message") }}</label>
+                <input
+                  id="message"
+                  name="message"
+                  type="text"
+                  v-model="communication.input"
+                  :readonly="!connectionState"
+                  @keyup.enter="connectionState ? sendMessage() : null"
+                />
               </li>
-            </div>
-          </ul>
-        </pw-section>
+              <div>
+                <li>
+                  <label for="send" class="hide-on-small-screen">&nbsp;</label>
+                  <button id="send" name="send" :disabled="!connectionState" @click="sendMessage">
+                    {{ $t("send") }}
+                    <span>
+                      <i class="material-icons">send</i>
+                    </span>
+                  </button>
+                </li>
+              </div>
+            </ul>
+          </pw-section>
+        </tab>
 
-        <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
-          <ul>
-            <li>
-              <realtime-log :title="$t('events')" :log="events.log" />
-              <div id="result"></div>
-            </li>
-          </ul>
-        </pw-section>
-      </div>
+        <tab :name="$t('sse')">
+          <pw-section class="blue" :label="$t('request')" ref="request">
+            <ul>
+              <li>
+                <label for="server">{{ $t("server") }}</label>
+                <input
+                  id="server"
+                  type="url"
+                  :class="{ error: !serverValid }"
+                  v-model="server"
+                  @keyup.enter="serverValid ? toggleSSEConnection() : null"
+                />
+              </li>
+              <div>
+                <li>
+                  <label for="start" class="hide-on-small-screen">&nbsp;</label>
+                  <button
+                    :disabled="!serverValid"
+                    id="start"
+                    name="start"
+                    @click="toggleSSEConnection"
+                  >
+                    {{ !connectionSSEState ? $t("start") : $t("stop") }}
+                    <span>
+                      <i class="material-icons">
+                        {{ !connectionSSEState ? "sync" : "sync_disabled" }}
+                      </i>
+                    </span>
+                  </button>
+                </li>
+              </div>
+            </ul>
+          </pw-section>
 
-      <input id="tab-three" type="radio" name="options" />
-      <label for="tab-three">{{ $t("socketio") }}</label>
-      <div class="tab">
-        <socketio />
-      </div>
+          <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
+            <ul>
+              <li>
+                <realtime-log :title="$t('events')" :log="events.log" />
+                <div id="result"></div>
+              </li>
+            </ul>
+          </pw-section>
+        </tab>
+
+        <tab :name="$t('socketio')">
+          <socketio />
+        </tab>
+      </tabs>
     </section>
   </div>
 </template>
@@ -128,6 +130,8 @@ export default {
   components: {
     "pw-section": () => import("../components/layout/section"),
     socketio: () => import("../components/realtime/socketio"),
+    tabs: () => import("../components/ui/tabs"),
+    tab: () => import("../components/ui/tab"),
     realtimeLog,
   },
   data() {