diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 4a890ddbc..08289d3da 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -1,4 +1,4 @@
-$responsiveWidth: 720px;
+$responsiveWidth: 768px;
 
 html {
   scroll-behavior: smooth;
@@ -78,7 +78,7 @@ a {
 
 header,
 footer {
-  &>div {
+  & > div {
     display: flex;
     padding: 16px;
     width: 100%;
@@ -127,13 +127,17 @@ footer {
   color: var(--ac-color);
 }
 
-.nav-first {
+.nav-first,
+.sticky-inner {
   display: flex;
   order: 1;
   flex-flow: column;
   position: sticky;
   top: 0;
   align-self: flex-start;
+}
+
+.nav-first {
   z-index: 1;
 }
 
@@ -521,7 +525,7 @@ input[type="checkbox"] {
   display: none;
 
   &,
-  &+label {
+  & + label {
     vertical-align: middle;
     cursor: pointer;
 
@@ -540,7 +544,7 @@ input[type="checkbox"] {
     }
   }
 
-  &:checked+label:before {
+  &:checked + label:before {
     background-color: var(--ac-color);
     border-color: var(--ac-color);
     color: var(--act-color);
@@ -600,6 +604,10 @@ ol li {
   display: none;
 }
 
+.show-on-large-screen {
+  display: inline-flex;
+}
+
 #installPWA {
   display: none;
 }
@@ -628,22 +636,6 @@ ol li {
   background-color: var(--err-color);
 }
 
-fieldset#history {
-  .method-list-item {
-    position: relative;
-
-    span {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      font-family: 'Roboto Mono', monospace;
-      background-color: var(--bg-color);
-      padding: 4px 8px;
-      border-radius: 8px;
-    }
-  }
-}
-
 .align-left {
   text-align: left;
 }
@@ -692,7 +684,7 @@ fieldset#history {
     position: fixed;
     top: 12px;
     right: 12px;
-    z-index: 1;
+    z-index: 2;
 
     #hidden-message {
       display: block;
@@ -706,18 +698,18 @@ section {
   flex-wrap: wrap;
 }
 
-div.tab {
+.tab {
   width: 100%;
   order: 1;
 }
 
 input[type="file"],
 input[type="radio"],
-div.tab {
+.tab {
   display: none;
 }
 
-input[type="radio"]+label {
+input[type="radio"] + label {
   padding: 8px 16px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
@@ -730,11 +722,11 @@ input[type="radio"]+label {
   }
 }
 
-input[type="radio"]:checked+label {
+input[type="radio"]:checked + label {
   border-color: var(--fg-color);
 }
 
-input[type="radio"]:checked+label+div.tab {
+input[type="radio"]:checked + label + .tab {
   display: block;
 }
 
@@ -751,7 +743,29 @@ input[type="radio"]:checked+label+div.tab {
   color: inherit !important;
 }
 
+.page-columns {
+  display: flex;
+  flex: 1;
+  flex-flow: column;
+}
+
+.inner-left {
+  display: flex;
+  order: 1;
+  margin-right: 16px;
+}
+
+.inner-right {
+  display: flex;
+  width: 25%;
+  order: 2;
+}
+
 @media (max-width: $responsiveWidth) {
+  .content {
+    flex-flow: column;
+  }
+
   .columns {
     flex-flow: column;
   }
@@ -791,4 +805,14 @@ input[type="radio"]:checked+label+div.tab {
   .show-on-small-screen {
     display: inline-flex;
   }
+
+  .sticky-inner {
+    position: relative;
+    width: 100%;
+  }
+
+  .inner-left {
+    order: 0;
+    margin-right: 0;
+  }
 }
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index e58e09b18..0a7efe21c 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -9,30 +9,7 @@
           <span>{{ collection.name }}</span>
         </button>
       </div>
-      <div class="hide-on-small-screen">
-        <button
-          class="icon"
-          @click="removeCollection"
-          v-tooltip="'Delete collection'"
-        >
-          <i class="material-icons">delete</i>
-        </button>
-        <button
-          class="icon"
-          @click="$emit('edit-collection')"
-          v-tooltip="'Edit collection'"
-        >
-          <i class="material-icons">create</i>
-        </button>
-        <button
-          class="icon"
-          @click="$emit('add-folder')"
-          v-tooltip="'New Folder'"
-        >
-          <i class="material-icons">create_new_folder</i>
-        </button>
-      </div>
-      <v-popover class="hide-on-large-screen">
+      <v-popover>
         <button class="tooltip-target icon" v-tooltip="'More'">
           <i class="material-icons">more_vert</i>
         </button>
@@ -40,12 +17,12 @@
           <div>
             <button
               class="icon"
-              @click="removeCollection"
-              v-tooltip="'Delete collection'"
+              @click="$emit('add-folder')"
+              v-tooltip="'New Folder'"
               v-close-popover
             >
-              <i class="material-icons">delete</i>
-              <span>Delete</span>
+              <i class="material-icons">create_new_folder</i>
+              <span>New folder</span>
             </button>
           </div>
           <div>
@@ -62,12 +39,12 @@
           <div>
             <button
               class="icon"
-              @click="$emit('add-folder')"
-              v-tooltip="'New Folder'"
+              @click="removeCollection"
+              v-tooltip="'Delete collection'"
               v-close-popover
             >
-              <i class="material-icons">create_new_folder</i>
-              <span>New folder</span>
+              <i class="material-icons">delete</i>
+              <span>Delete</span>
             </button>
           </div>
         </template>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 3517c6277..0fd38c244 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -9,30 +9,11 @@
           <span>{{ folder.name }}</span>
         </button>
       </div>
-      <div class="hide-on-small-screen">
-        <button class="icon" @click="removeFolder" v-tooltip="'Delete folder'">
-          <i class="material-icons">delete</i>
-        </button>
-        <button class="icon" @click="editFolder" v-tooltip="'Edit folder'">
-          <i class="material-icons">edit</i>
-        </button>
-      </div>
-      <v-popover class="hide-on-large-screen">
+      <v-popover>
         <button class="tooltip-target icon" v-tooltip="'More'">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
-          <div>
-            <button
-              class="icon"
-              @click="removeFolder"
-              v-tooltip="'Delete folder'"
-              v-close-popover
-            >
-              <i class="material-icons">delete</i>
-              <span>Delete</span>
-            </button>
-          </div>
           <div>
             <button
               class="icon"
@@ -44,6 +25,17 @@
               <span>Edit</span>
             </button>
           </div>
+          <div>
+            <button
+              class="icon"
+              @click="removeFolder"
+              v-tooltip="'Delete folder'"
+              v-close-popover
+            >
+              <i class="material-icons">delete</i>
+              <span>Delete</span>
+            </button>
+          </div>
         </template>
       </v-popover>
     </div>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 22f17bd2f..b347ed4c0 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -50,9 +50,8 @@ TODO:
         </button>
       </div>
       <div>
-        <button class="icon" @click="displayModalImportExport(true)">
+        <button class="icon" @click="displayModalImportExport(true)" v-tooltip="'Import / Export'">
           <i class="material-icons">import_export</i>
-          <span>Import / Export</span>
         </button>
         <a
           href="https://github.com/liyasthomas/postwoman/wiki/Collections"
@@ -66,25 +65,36 @@ TODO:
       </div>
     </div>
 
-    <ul>
-      <li v-for="(collection, index) in collections" :key="collection.name">
-        <collection
-          v-bind:collection-index="index"
-          v-bind:collection="collection"
-          v-on:edit-collection="editCollection(collection, index)"
-          v-on:add-folder="addFolder(collection, index)"
-          v-on:edit-folder="editFolder($event)"
-          v-on:edit-request="editRequest($event)"
-        ></collection>
-      </li>
-      <li v-if="collections.length === 0">
-        <label>Collections are empty</label>
-      </li>
-    </ul>
+    <virtual-list
+      class="virtual-list"
+      :class="{ filled: collections.length }"
+      :size="152"
+      :remain="Math.min(5, collections.length)"
+    >
+      <ul>
+        <li v-for="(collection, index) in collections" :key="collection.name">
+          <collection
+            v-bind:collection-index="index"
+            v-bind:collection="collection"
+            v-on:edit-collection="editCollection(collection, index)"
+            v-on:add-folder="addFolder(collection, index)"
+            v-on:edit-folder="editFolder($event)"
+            v-on:edit-request="editRequest($event)"
+          ></collection>
+        </li>
+        <li v-if="collections.length === 0">
+          <label>Collections are empty</label>
+        </li>
+      </ul>
+    </virtual-list>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.virtual-list {
+  max-height: calc(100vh - 220px);
+}
+
 ul {
   display: flex;
   flex-direction: column;
@@ -102,7 +112,8 @@ export default {
     editCollection: () => import("./editCollection"),
     editFolder: () => import("./editFolder"),
     editRequest: () => import("./editRequest"),
-    importExportCollections: () => import("./importExportCollections")
+    importExportCollections: () => import("./importExportCollections"),
+    VirtualList: () => import("vue-virtual-scroll-list")
   },
   data() {
     return {
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 32de9bfe5..f9103a537 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -6,34 +6,11 @@
         <span>{{ request.name }}</span>
       </button>
     </div>
-    <div class="hide-on-small-screen">
-      <button class="icon" @click="removeRequest" v-tooltip="'Delete request'">
-        <i class="material-icons">delete</i>
-      </button>
-      <button
-        class="icon"
-        @click="$emit('edit-request')"
-        v-tooltip="'Edit request'"
-      >
-        <i class="material-icons">edit</i>
-      </button>
-    </div>
-    <v-popover class="hide-on-large-screen">
+    <v-popover>
       <button class="tooltip-target icon" v-tooltip="'More'">
         <i class="material-icons">more_vert</i>
       </button>
       <template slot="popover">
-        <div>
-          <button
-            class="icon"
-            @click="removeRequest"
-            v-tooltip="'Delete request'"
-            v-close-popover
-          >
-            <i class="material-icons">delete</i>
-            <span>Delete</span>
-          </button>
-        </div>
         <div>
           <button
             class="icon"
@@ -45,6 +22,17 @@
             <span>Edit</span>
           </button>
         </div>
+        <div>
+          <button
+            class="icon"
+            @click="removeRequest"
+            v-tooltip="'Delete request'"
+            v-close-popover
+          >
+            <i class="material-icons">delete</i>
+            <span>Delete</span>
+          </button>
+        </div>
       </template>
     </v-popover>
   </div>
diff --git a/components/history.vue b/components/history.vue
index 89662a95e..39b07ae9b 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -1,110 +1,97 @@
 <template>
   <pw-section class="green" icon="history" label="History" ref="history">
     <ul>
-      <li id="filter-history">
-        <input
-          aria-label="Search"
-          type="text"
-          placeholder="search history"
-          v-model="filterText"
-        />
-      </li>
-    </ul>
-    <ul v-if="history.length !== 0" class="labels">
-      <div class="show-on-small-screen">
-        <li>
-          <button class="icon">
-            <i class="material-icons">star_half</i>
-          </button>
+      <div class="show-on-large-screen">
+        <li id="filter-history">
+          <input
+            aria-label="Search"
+            type="text"
+            placeholder="search history"
+            v-model="filterText"
+          />
         </li>
-        <li>
-          <button class="icon">
-            <i class="material-icons">history</i>
-          </button>
-        </li>
-      </div>
-      <li>
-        <button class="icon" @click="sort_by_label()">
-          Label
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_time()">
-          Time
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_status_code()">
-          Status
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_url()">
-          URL
-        </button>
-      </li>
-      <li>
-        <button class="icon" @click="sort_by_path()">
-          Path
-        </button>
-      </li>
-      <transition name="smooth" v-if="show">
-        <li>
-          <ul>
-            <li>
-              <button class="icon" @click="sort_by_duration()">
-                Duration (ms)
+        <v-popover>
+            <button class="tooltip-target icon" v-tooltip="'More'">
+              <i class="material-icons">more_vert</i>
+            </button>
+          <template slot="popover">
+            <div>
+              <button class="icon" @click="sort_by_label()" v-close-popover>
+                <i class="material-icons">label</i>
+                <span>Sort by label</span>
               </button>
-            </li>
-            <li>
-              <button class="icon">
-                Pre-script
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_time()" v-close-popover>
+                <i class="material-icons">access_time</i>
+                <span>Sort by time</span>
               </button>
-            </li>
-          </ul>
-        </li>
-      </transition>
-      <div class="show-on-small-screen">
-        <li>
-          <button
-            class="icon"
-            @click="enableHistoryClearing"
-            v-tooltip="'Clear History'"
-          >
-            <i class="material-icons">clear_all</i>
-          </button>
-        </li>
-        <li>
-          <button
-            class="icon"
-            @click="toggleCollapse()"
-            v-tooltip="{ content: !show ? 'Show more' : 'Hide more' }"
-          >
-            <i class="material-icons" v-if="!show">first_page</i>
-            <i class="material-icons" v-else>last_page</i>
-          </button>
-        </li>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_status_code()" v-close-popover>
+                <i class="material-icons">assistant</i>
+                <span>Sort by status</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_url()" v-close-popover>
+                <i class="material-icons">language</i>
+                <span>Sort by url</span>
+              </button>
+            </div>
+            <div>
+              <button class="icon" @click="sort_by_path()" v-close-popover>
+                <i class="material-icons">timeline</i>
+                <span>Sort by path</span>
+              </button>
+            </div>
+            <div v-if="showMore">
+              <button class="icon" @click="sort_by_duration()" v-close-popover>
+                <i class="material-icons">timer</i>
+                <span>Sort by duration</span>
+              </button>
+            </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>
+                <span>{{ !showMore ? 'Show more' : 'Hide more' }}</span>
+              </button>
+            </div>
+          </template>
+        </v-popover>
       </div>
     </ul>
     <virtual-list
       class="virtual-list"
       :class="{ filled: filteredHistory.length }"
-      :size="56"
+      :size="185"
       :remain="Math.min(5, filteredHistory.length)"
     >
       <ul v-for="(entry, index) in filteredHistory" :key="index" class="entry">
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
+          <button
+            class="icon"
+            :class="{ stared: entry.star }"
+            @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>
+          </button>
           <li>
-            <button
-              class="icon"
-              :class="{ stared: entry.star }"
-              @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>
-            </button>
+            <input
+              aria-label="Label"
+              type="text"
+              readonly
+              :value="entry.label"
+              placeholder="No label"
+            />
           </li>
+<!--
           <li>
             <button
               class="icon"
@@ -118,44 +105,58 @@
               <i class="material-icons" v-else>code</i>
             </button>
           </li>
+-->
+          <v-popover>
+            <button class="tooltip-target icon" v-tooltip="'More'">
+              <i class="material-icons">more_vert</i>
+            </button>
+            <template slot="popover">
+              <div>
+                <button
+                  class="icon"
+                  :id="'use-button#' + index"
+                  @click="useHistory(entry)"
+                  aria-label="Edit"
+                  v-close-popover
+                >
+                  <i class="material-icons">edit</i>
+                  <span>Use</span>
+                </button>
+              </div>
+               <div>
+                <button
+                  class="icon"
+                  :id="'delete-button#' + index"
+                  @click="deleteHistory(entry)"
+                  aria-label="Delete"
+                  v-close-popover
+                >
+                  <i class="material-icons">delete</i>
+                  <span>Delete</span>
+                </button>
+              </div>
+            </template>
+          </v-popover>
         </div>
-        <div class="show-on-small-screen">
-          <li>
+        <div class="show-on-large-screen">
+          <li class="method-list-item">
             <input
-              aria-label="Label"
+              aria-label="Method"
               type="text"
               readonly
-              :value="entry.label"
-              placeholder="No label"
-            />
-          </li>
-          <li>
-            <input
-              aria-label="Time"
-              type="text"
-              readonly
-              :value="entry.time"
-              v-tooltip="entry.date"
+              :value="entry.method"
+              :class="findEntryStatus(entry).className"
+              :style="{ '--status-code': entry.status }"
             />
+            <span
+              class="entry-status-code"
+              :class="findEntryStatus(entry).className"
+              :style="{ '--status-code': entry.status }"
+              >{{ entry.status }}</span
+            >
           </li>
         </div>
-        <li class="method-list-item">
-          <input
-            aria-label="Method"
-            type="text"
-            readonly
-            :value="entry.method"
-            :class="findEntryStatus(entry).className"
-            :style="{ '--status-code': entry.status }"
-          />
-          <span
-            class="entry-status-code"
-            :class="findEntryStatus(entry).className"
-            :style="{ '--status-code': entry.status }"
-            >{{ entry.status }}</span
-          >
-        </li>
-        <div class="show-on-small-screen">
+        <div class="show-on-large-screen">
           <li>
             <input
               aria-label="URL"
@@ -176,7 +177,16 @@
           </li>
         </div>
         <transition name="smooth">
-          <div v-if="show" class="show-on-small-screen">
+          <div v-if="showMore" class="show-on-large-screen">
+            <li>
+              <input
+                aria-label="Time"
+                type="text"
+                readonly
+                :value="entry.time"
+                v-tooltip="entry.date"
+              />
+            </li>
             <li>
               <input
                 aria-label="Duration"
@@ -197,30 +207,6 @@
             </li>
           </div>
         </transition>
-        <div class="show-on-small-screen">
-          <li>
-            <button
-              v-tooltip="'Delete entry'"
-              class="icon"
-              :id="'delete-button#' + index"
-              @click="deleteHistory(entry)"
-              aria-label="Delete"
-            >
-              <i class="material-icons">delete</i>
-            </button>
-          </li>
-          <li>
-            <button
-              v-tooltip="'Edit entry'"
-              class="icon"
-              :id="'use-button#' + index"
-              @click="useHistory(entry)"
-              aria-label="Edit"
-            >
-              <i class="material-icons">edit</i>
-            </button>
-          </li>
-        </div>
       </ul>
     </virtual-list>
     <ul
@@ -274,7 +260,7 @@
 
 <style scoped lang="scss">
 .virtual-list {
-  min-height: 90px;
+  max-height: calc(100vh - 284px);
 
   [readonly] {
     cursor: default;
@@ -302,6 +288,35 @@ label {
   color: #f8e81c !important;
 }
 
+ul,
+ol {
+  flex-direction: column;
+}
+
+ul li,
+ol li {
+  display: flex;
+}
+
+.method-list-item {
+  position: relative;
+
+  span {
+    position: absolute;
+    top: 10px;
+    right: 8px;
+    font-family: 'Roboto Mono', monospace;
+    background-color: var(--bg-color);
+    padding: 2px 8px;
+    border-radius: 8px;
+  }
+}
+
+.entry {
+  border-bottom: 1px solid var(--brd-color);
+  padding: 16px 0;
+}
+
 @media (max-width: 720px) {
   .virtual-list.filled {
     min-height: 320px;
@@ -310,10 +325,6 @@ label {
   .labels {
     display: none;
   }
-
-  .entry {
-    border-bottom: 1px solid var(--brd-color);
-  }
 }
 </style>
 
@@ -322,6 +333,7 @@ import { findStatusGroup } from "../pages/index";
 
 const updateOnLocalStorage = (propertyName, property) =>
   window.localStorage.setItem(propertyName, JSON.stringify(property));
+
 export default {
   components: {
     "pw-section": () => import("./section"),
@@ -341,7 +353,7 @@ export default {
       reverse_sort_status_code: false,
       reverse_sort_url: false,
       reverse_sort_path: false,
-      show: false
+      showMore: false
     };
   },
   computed: {
@@ -482,7 +494,7 @@ export default {
       this.reverse_sort_duration = !this.reverse_sort_duration;
     },
     toggleCollapse() {
-      this.show = !this.show;
+      this.showMore = !this.showMore;
     },
     toggleStar(index) {
       this.history[index]["star"] = !this.history[index]["star"];
diff --git a/layouts/default.vue b/layouts/default.vue
index 2daac1679..8fbc70f66 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -137,16 +137,6 @@
                     <i class="material-icons">cloud_download</i>
                   </a>
                 </li>
-                <li>
-                  <a href="#collections" v-tooltip.right="'Collections'">
-                    <i class="material-icons">folder_special</i>
-                  </a>
-                </li>
-                <li>
-                  <a href="#history" v-tooltip.right="'History'">
-                    <i class="material-icons">watch_later</i>
-                  </a>
-                </li>
               </ul>
             </nav>
           </div>
@@ -239,22 +229,22 @@
         <br />
         <div>
           <label>Send Request</label>
-          <kbd>Ctrl G</kbd>
+          <kbd>⌘ G</kbd>
         </div>
         <br />
         <div>
           <label>Save to Collections</label>
-          <kbd>Ctrl S</kbd>
+          <kbd>⌘ S</kbd>
         </div>
         <br />
         <div>
           <label>Copy Request Link</label>
-          <kbd>Ctrl K</kbd>
+          <kbd>⌘ K</kbd>
         </div>
         <br />
         <div>
           <label>Reset Request</label>
-          <kbd>Ctrl L</kbd>
+          <kbd>⌘ L</kbd>
         </div>
         <br />
       </div>
diff --git a/pages/index.vue b/pages/index.vue
index ecaa41970..5e4367bf9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,696 +1,706 @@
 <template>
   <div class="page">
-    <pw-section
-      v-if="showPreRequestScript"
-      class="orange"
-      label="Pre-Request"
-      ref="preRequest"
-    >
-      <ul>
-        <li>
-          <div class="flex-wrap">
-            <label for="generatedCode">JavaScript Code</label>
-            <div>
-              <a
-                href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
-                target="_blank"
-                rel="noopener"
-              >
-                <button class="icon" v-tooltip="'Wiki'">
-                  <i class="material-icons">help</i>
-                </button>
-              </a>
-            </div>
-          </div>
-          <textarea
-            id="preRequestScript"
-            @keydown="formatRawParams"
-            rows="8"
-            v-model="preRequestScript"
-            spellcheck="false"
-            placeholder="pw.env.set('variable', 'value');"
-          ></textarea>
-        </li>
-      </ul>
-    </pw-section>
-
-    <pw-section class="blue" label="Request" ref="request">
-      <ul>
-        <li>
-          <label for="method">Method</label>
-          <select id="method" v-model="method" @change="methodChange">
-            <option>GET</option>
-            <option>HEAD</option>
-            <option>POST</option>
-            <option>PUT</option>
-            <option>DELETE</option>
-            <option>OPTIONS</option>
-            <option>PATCH</option>
-          </select>
-        </li>
-        <li>
-          <label for="url">URL</label>
-          <input
-            :class="{ error: !isValidURL }"
-            @keyup.enter="isValidURL ? sendRequest() : null"
-            id="url"
-            name="url"
-            type="url"
-            v-model="url"
-          />
-        </li>
-        <li>
-          <label for="path">Path</label>
-          <input
-            @keyup.enter="isValidURL ? sendRequest() : null"
-            id="path"
-            name="path"
-            v-model="path"
-            @input="pathInputHandler"
-          />
-        </li>
-        <li>
-          <label for="label">Label</label>
-          <input
-            id="label"
-            name="label"
-            type="text"
-            v-model="label"
-            placeholder="(optional)"
-            list="preLabels"
-          />
-          <datalist id="preLabels">
-            <option value="Login"></option>
-            <option value="Logout"></option>
-            <option value="Bug"></option>
-            <option value="Users"></option>
-          </datalist>
-        </li>
-        <li>
-          <label class="hide-on-small-screen" for="send">&nbsp;</label>
-          <button
-            :disabled="!isValidURL"
-            @click="sendRequest"
-            id="send"
-            ref="sendButton"
-          >
-            Send
-            <span id="hidden-message">Again</span>
-            <span>
-              <i class="material-icons">send</i>
-            </span>
-          </button>
-        </li>
-      </ul>
-      <div
-        class="blue"
-        label="Request Body"
-        v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'"
-      >
-        <ul>
-          <li>
-            <label for="contentType">Content Type</label>
-            <autocomplete
-              :source="validContentTypes"
-              :spellcheck="false"
-              v-model="contentType"
-              >Content Type</autocomplete
-            >
-          </li>
-        </ul>
-        <ul>
-          <li>
-            <div class="flex-wrap">
-              <span>
-                <pw-toggle :on="rawInput" @change="rawInput = $event"
-                  >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
-                >
-              </span>
-              <div>
-                <label for="payload">
-                  <button
-                    class="icon"
-                    @click="$refs.payload.click()"
-                    v-tooltip="'Upload file'"
+    <div class="content">
+      <div class="page-columns inner-left">
+        <pw-section
+          v-if="showPreRequestScript"
+          class="orange"
+          label="Pre-Request"
+          ref="preRequest"
+        >
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <label for="generatedCode">JavaScript Code</label>
+                <div>
+                  <a
+                    href="https://github.com/liyasthomas/postwoman/wiki/Pre-Request-Scripts"
+                    target="_blank"
+                    rel="noopener"
                   >
-                    <i class="material-icons">attach_file</i>
-                  </button>
-                </label>
-                <input
-                  ref="payload"
-                  name="payload"
-                  type="file"
-                  @change="uploadPayload"
-                />
+                    <button class="icon" v-tooltip="'Wiki'">
+                      <i class="material-icons">help</i>
+                    </button>
+                  </a>
+                </div>
               </div>
-            </div>
-          </li>
-        </ul>
-        <div v-if="!rawInput">
-          <ul>
-            <li>
-              <label for="reqParamList">Parameter List</label>
               <textarea
-                id="reqParamList"
-                readonly
-                v-textarea-auto-height="rawRequestBody"
-                v-model="rawRequestBody"
-                placeholder="(add at least one parameter)"
-                rows="1"
-              ></textarea>
-            </li>
-          </ul>
-          <ul v-for="(param, index) in bodyParams" :key="index">
-            <li>
-              <input
-                :placeholder="'key ' + (index + 1)"
-                :name="'bparam' + index"
-                :value="param.key"
-                @change="
-                  $store.commit('setKeyBodyParams', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                @keyup.prevent="setRouteQueryState"
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="'value ' + (index + 1)"
-                :id="'bvalue' + index"
-                :name="'bvalue' + index"
-                :value="param.value"
-                @change="
-                  $store.commit('setValueBodyParams', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                @keyup.prevent="setRouteQueryState"
-              />
-            </li>
-            <div>
-              <li>
-                <button
-                  class="icon"
-                  @click="removeRequestBodyParam(index)"
-                  id="delParam"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button
-                class="icon"
-                @click="addRequestBodyParam"
-                name="addrequest"
-              >
-                <i class="material-icons">add</i>
-                <span>Add New</span>
-              </button>
-            </li>
-          </ul>
-        </div>
-        <div v-else>
-          <ul>
-            <li>
-              <label for="rawBody">Raw Request Body</label>
-              <textarea
-                id="rawBody"
+                id="preRequestScript"
                 @keydown="formatRawParams"
                 rows="8"
-                v-model="rawParams"
+                v-model="preRequestScript"
+                spellcheck="false"
+                placeholder="pw.env.set('variable', 'value');"
               ></textarea>
             </li>
           </ul>
-        </div>
-      </div>
-      <div class="flex-wrap">
-        <div style="text-align: center;">
-          <button
-            class="icon"
-            id="show-modal"
-            @click="showModal = true"
-            v-tooltip.bottom="'Import cURL'"
-          >
-            <i class="material-icons">import_export</i>
-          </button>
-          <button
-            class="icon"
-            id="code"
-            v-on:click="isHidden = !isHidden"
-            :disabled="!isValidURL"
-            v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
-          >
-            <i class="material-icons">flash_on</i>
-          </button>
-          <button
-            :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
-            id="preRequestScriptButton"
-            v-tooltip.bottom="{
-              content: !showPreRequestScript
-                ? 'Show Pre-Request Script'
-                : 'Hide Pre-Request Script'
-            }"
-            @click="showPreRequestScript = !showPreRequestScript"
-          >
-            <i
-              class="material-icons"
-              :class="showPreRequestScript"
-              v-if="!showPreRequestScript"
-              >code</i
-            >
-            <i class="material-icons" :class="showPreRequestScript" v-else
-              >close</i
-            >
-          </button>
-        </div>
-        <div style="text-align: center;">
-          <button
-            class="icon"
-            @click="copyRequest"
-            id="copyRequest"
-            ref="copyRequest"
-            :disabled="!isValidURL"
-            v-tooltip.bottom="'Copy Request URL'"
-          >
-            <i class="material-icons">file_copy</i>
-          </button>
+        </pw-section>
 
-          <button
-            class="icon"
-            @click="saveRequest"
-            id="saveRequest"
-            ref="saveRequest"
-            :disabled="!isValidURL"
-            v-tooltip.bottom="'Save to Collections'"
-          >
-            <i class="material-icons">save</i>
-          </button>
-          <button
-            class="icon"
-            @click="clearContent('', $event)"
-            v-tooltip.bottom="'Clear All'"
-            ref="clearAll"
-          >
-            <i class="material-icons">clear_all</i>
-          </button>
-        </div>
-      </div>
-    </pw-section>
-
-    <br />
-
-    <section id="options">
-      <input id="tab-one" type="radio" name="grp" checked="checked" />
-      <label for="tab-one">Authentication</label>
-      <div class="tab">
-        <br />
-
-        <pw-section class="cyan" label="Authentication" ref="authentication">
+        <pw-section class="blue" label="Request" ref="request">
           <ul>
             <li>
-              <div class="flex-wrap">
-                <label for="auth">Authentication Type</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="clearContent('auth', $event)"
-                    v-tooltip.bottom="'Clear'"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-              <select id="auth" v-model="auth">
-                <option>None</option>
-                <option>Basic</option>
-                <option>Bearer Token</option>
+              <label for="method">Method</label>
+              <select id="method" v-model="method" @change="methodChange">
+                <option>GET</option>
+                <option>HEAD</option>
+                <option>POST</option>
+                <option>PUT</option>
+                <option>DELETE</option>
+                <option>OPTIONS</option>
+                <option>PATCH</option>
               </select>
             </li>
+            <li>
+              <label for="url">URL</label>
+              <input
+                :class="{ error: !isValidURL }"
+                @keyup.enter="isValidURL ? sendRequest() : null"
+                id="url"
+                name="url"
+                type="url"
+                v-model="url"
+              />
+            </li>
+            <li>
+              <label for="path">Path</label>
+              <input
+                @keyup.enter="isValidURL ? sendRequest() : null"
+                id="path"
+                name="path"
+                v-model="path"
+                @input="pathInputHandler"
+              />
+            </li>
+            <li>
+              <label for="label">Label</label>
+              <input
+                id="label"
+                name="label"
+                type="text"
+                v-model="label"
+                placeholder="(optional)"
+                list="preLabels"
+              />
+              <datalist id="preLabels">
+                <option value="Login"></option>
+                <option value="Logout"></option>
+                <option value="Bug"></option>
+                <option value="Users"></option>
+              </datalist>
+            </li>
+            <li>
+              <label class="hide-on-small-screen" for="send">&nbsp;</label>
+              <button
+                :disabled="!isValidURL"
+                @click="sendRequest"
+                id="send"
+                ref="sendButton"
+              >
+                Send
+                <span id="hidden-message">Again</span>
+                <span>
+                  <i class="material-icons">send</i>
+                </span>
+              </button>
+            </li>
           </ul>
-          <ul v-if="auth === 'Basic'">
-            <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>
+          <div
+            class="blue"
+            label="Request Body"
+            v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'"
+          >
+            <ul>
               <li>
-                <button
-                  class="icon"
-                  id="switchVisibility"
-                  ref="switchVisibility"
-                  @click="switchVisibility"
+                <label for="contentType">Content Type</label>
+                <autocomplete
+                  :source="validContentTypes"
+                  :spellcheck="false"
+                  v-model="contentType"
+                  >Content Type</autocomplete
                 >
-                  <i class="material-icons" v-if="passwordFieldType === 'text'"
-                    >visibility</i
-                  >
-                  <i class="material-icons" v-if="passwordFieldType !== 'text'"
-                    >visibility_off</i
-                  >
-                </button>
               </li>
+            </ul>
+            <ul>
+              <li>
+                <div class="flex-wrap">
+                  <span>
+                    <pw-toggle :on="rawInput" @change="rawInput = $event"
+                      >Raw Input {{ rawInput ? "Enabled" : "Disabled" }}</pw-toggle
+                    >
+                  </span>
+                  <div>
+                    <label for="payload">
+                      <button
+                        class="icon"
+                        @click="$refs.payload.click()"
+                        v-tooltip="'Upload file'"
+                      >
+                        <i class="material-icons">attach_file</i>
+                      </button>
+                    </label>
+                    <input
+                      ref="payload"
+                      name="payload"
+                      type="file"
+                      @change="uploadPayload"
+                    />
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <div v-if="!rawInput">
+              <ul>
+                <li>
+                  <label for="reqParamList">Parameter List</label>
+                  <textarea
+                    id="reqParamList"
+                    readonly
+                    v-textarea-auto-height="rawRequestBody"
+                    v-model="rawRequestBody"
+                    placeholder="(add at least one parameter)"
+                    rows="1"
+                  ></textarea>
+                </li>
+              </ul>
+              <ul v-for="(param, index) in bodyParams" :key="index">
+                <li>
+                  <input
+                    :placeholder="'key ' + (index + 1)"
+                    :name="'bparam' + index"
+                    :value="param.key"
+                    @change="
+                      $store.commit('setKeyBodyParams', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    @keyup.prevent="setRouteQueryState"
+                    autofocus
+                  />
+                </li>
+                <li>
+                  <input
+                    :placeholder="'value ' + (index + 1)"
+                    :id="'bvalue' + index"
+                    :name="'bvalue' + index"
+                    :value="param.value"
+                    @change="
+                      $store.commit('setValueBodyParams', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    @keyup.prevent="setRouteQueryState"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <button
+                      class="icon"
+                      @click="removeRequestBodyParam(index)"
+                      id="delParam"
+                    >
+                      <i class="material-icons">delete</i>
+                    </button>
+                  </li>
+                </div>
+              </ul>
+              <ul>
+                <li>
+                  <button
+                    class="icon"
+                    @click="addRequestBodyParam"
+                    name="addrequest"
+                  >
+                    <i class="material-icons">add</i>
+                    <span>Add New</span>
+                  </button>
+                </li>
+              </ul>
+            </div>
+            <div v-else>
+              <ul>
+                <li>
+                  <label for="rawBody">Raw Request Body</label>
+                  <textarea
+                    id="rawBody"
+                    @keydown="formatRawParams"
+                    rows="8"
+                    v-model="rawParams"
+                  ></textarea>
+                </li>
+              </ul>
             </div>
-          </ul>
-          <ul v-else-if="auth === 'Bearer Token'">
-            <li>
-              <input
-                placeholder="Token"
-                name="bearer_token"
-                v-model="bearerToken"
-              />
-            </li>
-          </ul>
-          <div class="flex-wrap">
-            <pw-toggle
-              :on="!urlExcludes.auth"
-              @change="setExclude('auth', !$event)"
-              >Include in URL</pw-toggle
-            >
           </div>
-        </pw-section>
-      </div>
-      <input id="tab-two" type="radio" name="grp" />
-      <label for="tab-two">Headers</label>
-      <div class="tab">
-        <br />
-
-        <pw-section class="orange" label="Headers" ref="headers">
-          <ul>
-            <li>
-              <div class="flex-wrap">
-                <label for="headerList">Header List</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="clearContent('headers', $event)"
-                    v-tooltip.bottom="'Clear'"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-              <textarea
-                id="headerList"
-                readonly
-                v-textarea-auto-height="headerString"
-                v-model="headerString"
-                placeholder="(add at least one header)"
-                rows="1"
-              ></textarea>
-            </li>
-          </ul>
-          <ul v-for="(header, index) in headers" :key="index">
-            <li>
-              <input
-                :placeholder="'header ' + (index + 1)"
-                :name="'header' + index"
-                :value="header.key"
-                @change="
-                  $store.commit('setKeyHeader', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                @keyup.prevent="setRouteQueryState"
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="'value ' + (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)"
-                  id="header"
-                >
-                  <i class="material-icons">delete</i>
-                </button>
-              </li>
-            </div>
-          </ul>
-          <ul>
-            <li>
-              <button class="icon" @click="addRequestHeader">
-                <i class="material-icons">add</i>
-                <span>Add New</span>
-              </button>
-            </li>
-          </ul>
-        </pw-section>
-      </div>
-      <input id="tab-three" type="radio" name="grp" />
-      <label for="tab-three">Parameters</label>
-      <div class="tab">
-        <br />
-
-        <pw-section class="pink" label="Parameters" ref="parameters">
-          <ul>
-            <li>
-              <div class="flex-wrap">
-                <label for="paramList">Parameter List</label>
-                <div>
-                  <button
-                    class="icon"
-                    @click="clearContent('parameters', $event)"
-                    v-tooltip.bottom="'Clear'"
-                  >
-                    <i class="material-icons">clear_all</i>
-                  </button>
-                </div>
-              </div>
-              <textarea
-                id="paramList"
-                readonly
-                v-textarea-auto-height="queryString"
-                v-model="queryString"
-                placeholder="(add at least one parameter)"
-                rows="1"
-              ></textarea>
-            </li>
-          </ul>
-          <ul v-for="(param, index) in params" :key="index">
-            <li>
-              <input
-                :placeholder="'parameter ' + (index + 1)"
-                :name="'param' + index"
-                :value="param.key"
-                @change="
-                  $store.commit('setKeyParams', {
-                    index,
-                    value: $event.target.value
-                  })
-                "
-                autofocus
-              />
-            </li>
-            <li>
-              <input
-                :placeholder="'value ' + (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)"
-                  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>Add New</span>
-              </button>
-            </li>
-          </ul>
-        </pw-section>
-      </div>
-    </section>
-
-    <br />
-
-    <pw-section class="purple" id="response" label="Response" ref="response">
-      <ul>
-        <li>
-          <label for="status">status</label>
-          <input
-            :class="statusCategory ? statusCategory.className : ''"
-            :value="response.status || '(waiting to send request)'"
-            ref="status"
-            id="status"
-            name="status"
-            readonly
-            type="text"
-          />
-        </li>
-      </ul>
-      <ul v-for="(value, key) in response.headers" :key="key">
-        <li>
-          <label :for="key">{{ key }}</label>
-          <input :id="key" :value="value" :name="key" readonly />
-        </li>
-      </ul>
-      <ul v-if="response.body">
-        <li>
           <div class="flex-wrap">
-            <label for="body">response</label>
-            <div>
+            <div style="text-align: center;">
               <button
                 class="icon"
-                @click="copyResponse"
-                ref="copyResponse"
-                v-if="response.body"
-                v-tooltip="'Copy response'"
+                id="show-modal"
+                @click="showModal = true"
+                v-tooltip.bottom="'Import cURL'"
+              >
+                <i class="material-icons">import_export</i>
+              </button>
+              <button
+                class="icon"
+                id="code"
+                v-on:click="isHidden = !isHidden"
+                :disabled="!isValidURL"
+                v-tooltip.bottom="{ content: isHidden ? 'Show Code' : 'Hide Code' }"
+              >
+                <i class="material-icons">flash_on</i>
+              </button>
+              <button
+                :class="'icon' + (showPreRequestScript ? ' info-response' : '')"
+                id="preRequestScriptButton"
+                v-tooltip.bottom="{
+                  content: !showPreRequestScript
+                    ? 'Show Pre-Request Script'
+                    : 'Hide Pre-Request Script'
+                }"
+                @click="showPreRequestScript = !showPreRequestScript"
+              >
+                <i
+                  class="material-icons"
+                  :class="showPreRequestScript"
+                  v-if="!showPreRequestScript"
+                  >code</i
+                >
+                <i class="material-icons" :class="showPreRequestScript" v-else
+                  >close</i
+                >
+              </button>
+            </div>
+            <div style="text-align: center;">
+              <button
+                class="icon"
+                @click="copyRequest"
+                id="copyRequest"
+                ref="copyRequest"
+                :disabled="!isValidURL"
+                v-tooltip.bottom="'Copy Request URL'"
               >
                 <i class="material-icons">file_copy</i>
               </button>
+
               <button
                 class="icon"
-                @click="downloadResponse"
-                ref="downloadResponse"
-                v-if="response.body"
-                v-tooltip="'Download file'"
+                @click="saveRequest"
+                id="saveRequest"
+                ref="saveRequest"
+                :disabled="!isValidURL"
+                v-tooltip.bottom="'Save to Collections'"
               >
-                <i class="material-icons">get_app</i>
+                <i class="material-icons">save</i>
+              </button>
+              <button
+                class="icon"
+                @click="clearContent('', $event)"
+                v-tooltip.bottom="'Clear All'"
+                ref="clearAll"
+              >
+                <i class="material-icons">clear_all</i>
               </button>
             </div>
           </div>
-          <div id="response-details-wrapper">
-            <ResponseBody
-              :value="responseBodyText"
-              :lang="responseBodyType"
-              :options="{
-                maxLines: '16',
-                minLines: '16',
-                fontSize: '16px',
-                autoScrollEditorIntoView: true,
-                readOnly: true,
-                showPrintMargin: false,
-                useWorker: false
-              }"
-            />
-            <iframe
-              :class="{ hidden: !previewEnabled }"
-              class="covers-response"
-              ref="previewFrame"
-              src="about:blank"
-            ></iframe>
+        </pw-section>
+
+        <br />
+
+        <section id="options">
+          <input id="tab-one" type="radio" name="options" checked="checked" />
+          <label for="tab-one">Authentication</label>
+          <div class="tab">
+            <br />
+
+            <pw-section class="cyan" label="Authentication" ref="authentication">
+              <ul>
+                <li>
+                  <div class="flex-wrap">
+                    <label for="auth">Authentication Type</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('auth', $event)"
+                        v-tooltip.bottom="'Clear'"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
+                  <select id="auth" v-model="auth">
+                    <option>None</option>
+                    <option>Basic</option>
+                    <option>Bearer Token</option>
+                  </select>
+                </li>
+              </ul>
+              <ul v-if="auth === 'Basic'">
+                <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>
+                </div>
+              </ul>
+              <ul v-else-if="auth === 'Bearer Token'">
+                <li>
+                  <input
+                    placeholder="Token"
+                    name="bearer_token"
+                    v-model="bearerToken"
+                  />
+                </li>
+              </ul>
+              <div class="flex-wrap">
+                <pw-toggle
+                  :on="!urlExcludes.auth"
+                  @change="setExclude('auth', !$event)"
+                  >Include in URL</pw-toggle
+                >
+              </div>
+            </pw-section>
           </div>
-          <div
-            class="align-right"
-            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>
-              <span>{{
-                previewEnabled ? "Hide Preview" : "Preview HTML"
-              }}</span>
-            </button>
+          <input id="tab-two" type="radio" name="options" />
+          <label for="tab-two">Headers</label>
+          <div class="tab">
+            <br />
+
+            <pw-section class="orange" label="Headers" ref="headers">
+              <ul>
+                <li>
+                  <div class="flex-wrap">
+                    <label for="headerList">Header List</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('headers', $event)"
+                        v-tooltip.bottom="'Clear'"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
+                  <textarea
+                    id="headerList"
+                    readonly
+                    v-textarea-auto-height="headerString"
+                    v-model="headerString"
+                    placeholder="(add at least one header)"
+                    rows="1"
+                  ></textarea>
+                </li>
+              </ul>
+              <ul v-for="(header, index) in headers" :key="index">
+                <li>
+                  <input
+                    :placeholder="'header ' + (index + 1)"
+                    :name="'header' + index"
+                    :value="header.key"
+                    @change="
+                      $store.commit('setKeyHeader', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    @keyup.prevent="setRouteQueryState"
+                    autofocus
+                  />
+                </li>
+                <li>
+                  <input
+                    :placeholder="'value ' + (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)"
+                      id="header"
+                    >
+                      <i class="material-icons">delete</i>
+                    </button>
+                  </li>
+                </div>
+              </ul>
+              <ul>
+                <li>
+                  <button class="icon" @click="addRequestHeader">
+                    <i class="material-icons">add</i>
+                    <span>Add New</span>
+                  </button>
+                </li>
+              </ul>
+            </pw-section>
           </div>
-        </li>
-      </ul>
-    </pw-section>
+          <input id="tab-three" type="radio" name="options" />
+          <label for="tab-three">Parameters</label>
+          <div class="tab">
+            <br />
 
-    <br />
+            <pw-section class="pink" label="Parameters" ref="parameters">
+              <ul>
+                <li>
+                  <div class="flex-wrap">
+                    <label for="paramList">Parameter List</label>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="clearContent('parameters', $event)"
+                        v-tooltip.bottom="'Clear'"
+                      >
+                        <i class="material-icons">clear_all</i>
+                      </button>
+                    </div>
+                  </div>
+                  <textarea
+                    id="paramList"
+                    readonly
+                    v-textarea-auto-height="queryString"
+                    v-model="queryString"
+                    placeholder="(add at least one parameter)"
+                    rows="1"
+                  ></textarea>
+                </li>
+              </ul>
+              <ul v-for="(param, index) in params" :key="index">
+                <li>
+                  <input
+                    :placeholder="'parameter ' + (index + 1)"
+                    :name="'param' + index"
+                    :value="param.key"
+                    @change="
+                      $store.commit('setKeyParams', {
+                        index,
+                        value: $event.target.value
+                      })
+                    "
+                    autofocus
+                  />
+                </li>
+                <li>
+                  <input
+                    :placeholder="'value ' + (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)"
+                      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>Add New</span>
+                  </button>
+                </li>
+              </ul>
+            </pw-section>
+          </div>
+        </section>
 
-    <pw-section class="yellow" label="Collections" ref="collections">
-      <collections />
-    </pw-section>
+        <br />
 
-    <br />
-
-    <history @useHistory="handleUseHistory" ref="historyComponent"></history>
-
-    <save-request-as
-      v-bind:show="showRequestModal"
-      v-on:hide-model="hideRequestModal"
-      v-bind:editing-request="editRequest"
-    ></save-request-as>
-
-    <pw-modal v-if="showModal" @close="showModal = false">
-      <div slot="header">
-        <ul>
-          <li>
-            <div class="flex-wrap">
-              <h3 class="title">Import cURL</h3>
-              <div>
-                <button class="icon" @click="showModal = false">
-                  <i class="material-icons">close</i>
+        <pw-section class="purple" id="response" label="Response" ref="response">
+          <ul>
+            <li>
+              <label for="status">status</label>
+              <input
+                :class="statusCategory ? statusCategory.className : ''"
+                :value="response.status || '(waiting to send request)'"
+                ref="status"
+                id="status"
+                name="status"
+                readonly
+                type="text"
+              />
+            </li>
+          </ul>
+          <ul v-for="(value, key) in response.headers" :key="key">
+            <li>
+              <label :for="key">{{ key }}</label>
+              <input :id="key" :value="value" :name="key" readonly />
+            </li>
+          </ul>
+          <ul v-if="response.body">
+            <li>
+              <div class="flex-wrap">
+                <label for="body">response</label>
+                <div>
+                  <button
+                    class="icon"
+                    @click="copyResponse"
+                    ref="copyResponse"
+                    v-if="response.body"
+                    v-tooltip="'Copy response'"
+                  >
+                    <i class="material-icons">file_copy</i>
+                  </button>
+                  <button
+                    class="icon"
+                    @click="downloadResponse"
+                    ref="downloadResponse"
+                    v-if="response.body"
+                    v-tooltip="'Download file'"
+                  >
+                    <i class="material-icons">get_app</i>
+                  </button>
+                </div>
+              </div>
+              <div id="response-details-wrapper">
+                <ResponseBody
+                  :value="responseBodyText"
+                  :lang="responseBodyType"
+                  :options="{
+                    maxLines: '16',
+                    minLines: '16',
+                    fontSize: '16px',
+                    autoScrollEditorIntoView: true,
+                    readOnly: true,
+                    showPrintMargin: false,
+                    useWorker: false
+                  }"
+                />
+                <iframe
+                  :class="{ hidden: !previewEnabled }"
+                  class="covers-response"
+                  ref="previewFrame"
+                  src="about:blank"
+                ></iframe>
+              </div>
+              <div
+                class="align-right"
+                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>
+                  <span>{{
+                    previewEnabled ? "Hide Preview" : "Preview HTML"
+                  }}</span>
                 </button>
               </div>
-            </div>
-          </li>
-        </ul>
+            </li>
+          </ul>
+        </pw-section>
       </div>
-      <div slot="body">
-        <ul>
-          <li>
-            <textarea
-              id="import-text"
-              autofocus
-              rows="8"
-              placeholder="Enter cURL"
-            ></textarea>
-          </li>
-        </ul>
-      </div>
-      <div slot="footer">
-        <ul>
-          <li>
-            <button class="icon" @click="handleImport">
-              <i class="material-icons">get_app</i>
-              <span>Import</span>
-            </button>
-          </li>
-        </ul>
-      </div>
-    </pw-modal>
 
-    <pw-modal v-if="!isHidden" @close="isHidden = true">
+      <aside class="sticky-inner inner-right">
+        <section>
+          <input id="history-tab" type="radio" name="side" checked="checked" />
+          <label for="history-tab">History</label>
+          <div class="tab">
+            <history @useHistory="handleUseHistory" ref="historyComponent"></history>
+          </div>
+          <input id="collection-tab" type="radio" name="side" />
+          <label for="collection-tab">Collections</label>
+          <div class="tab">
+            <pw-section class="yellow" label="Collections" ref="collections">
+              <collections />
+            </pw-section>
+          </div>
+        </section>
+      </aside>
+
+      <save-request-as
+        v-bind:show="showRequestModal"
+        v-on:hide-model="hideRequestModal"
+        v-bind:editing-request="editRequest"
+      ></save-request-as>
+
+      <pw-modal v-if="showModal" @close="showModal = false">
+        <div slot="header">
+          <ul>
+            <li>
+              <div class="flex-wrap">
+                <h3 class="title">Import cURL</h3>
+                <div>
+                  <button class="icon" @click="showModal = false">
+                    <i class="material-icons">close</i>
+                  </button>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div slot="body">
+          <ul>
+            <li>
+              <textarea
+                id="import-text"
+                autofocus
+                rows="8"
+                placeholder="Enter cURL"
+              ></textarea>
+            </li>
+          </ul>
+        </div>
+        <div slot="footer">
+          <ul>
+            <li>
+              <button class="icon" @click="handleImport">
+                <i class="material-icons">get_app</i>
+                <span>Import</span>
+              </button>
+            </li>
+          </ul>
+        </div>
+      </pw-modal>
+
+      <pw-modal v-if="!isHidden" @close="isHidden = true">
       <div slot="header">
         <ul>
           <li>
@@ -744,6 +754,7 @@
       </div>
       <div slot="footer"></div>
     </pw-modal>
+    </div>
   </div>
 </template>
 <script>