diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 0c4c0d8a9..d60cf7396 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -1,67 +1,5 @@
 $responsiveWidth: 720px;
 
-// Make theme transition smoother.
-body.afterLoad {
-
-  &,
-  & * {
-    transition: background-color 0.2s ease-in-out,
-      border 0.2s ease-in-out;
-  }
-}
-
-::selection {
-  background-color: var(--ac-sel-color);
-  color: var(--act-color);
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: var(--fg-light-color);
-  border-radius: 8px;
-  border: 2px solid var(--bg-color);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--fg-color);
-}
-
-::placeholder {
-  color: var(--fg-light-color);
-  opacity: 0.3;
-}
-
-* {
-  box-sizing: border-box;
-  outline: 0;
-  border: 0;
-}
-
-a {
-  display: inline-flex;
-  color: inherit;
-  text-decoration: none;
-  font-weight: 700;
-}
-
-body {
-  background-color: var(--bg-color);
-  color: var(--fg-color);
-  font-weight: 500;
-  font-size: 16px;
-  font-family: "Poppins", "Roboto", "Noto", sans-serif;
-  line-height: 1.5;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  user-select: none;
-  padding: 0;
-  margin: 0;
-}
-
 h1,
 h2,
 h3 {
@@ -159,7 +97,7 @@ h3 {
       color: black;
       padding: 24px;
       border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(black, .1);
+      box-shadow: 0 5px 30px rgba(black, 0.1);
     }
 
     .popover-arrow {
@@ -167,16 +105,16 @@ h3 {
     }
   }
 
-  &[aria-hidden='true'] {
+  &[aria-hidden="true"] {
     visibility: hidden;
     opacity: 0;
-    transition: opacity .15s, visibility .15s;
+    transition: opacity 0.15s, visibility 0.15s;
   }
 
-  &[aria-hidden='false'] {
+  &[aria-hidden="false"] {
     visibility: visible;
     opacity: 1;
-    transition: opacity .15s;
+    transition: opacity 0.15s;
   }
 }
 
@@ -515,8 +453,8 @@ fieldset#history {
   &.show {
     display: flex;
     position: fixed;
-    top: 16px;
-    right: 16px;
+    top: 12px;
+    right: 12px;
     z-index: 1;
 
     #hidden-message {
diff --git a/assets/js/curlparser.js b/assets/js/curlparser.js
index dd7d6af03..d9c1de445 100644
--- a/assets/js/curlparser.js
+++ b/assets/js/curlparser.js
@@ -9,7 +9,7 @@ import * as querystring from "querystring";
  */
 function joinDataArguments(dataArguments) {
   let data = "";
-  dataArguments.forEach(function(argument, i) {
+  dataArguments.forEach(function (argument, i) {
     if (i === 0) {
       data += argument;
     } else {
@@ -47,7 +47,7 @@ function parseCurlCommand(curlCommand) {
   }
   let headers;
 
-  let parseHeaders = function(headerFieldName) {
+  let parseHeaders = function (headerFieldName) {
     if (parsedArguments[headerFieldName]) {
       if (!headers) {
         headers = {};
@@ -55,7 +55,7 @@ function parseCurlCommand(curlCommand) {
       if (!Array.isArray(parsedArguments[headerFieldName])) {
         parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]];
       }
-      parsedArguments[headerFieldName].forEach(function(header) {
+      parsedArguments[headerFieldName].forEach(function (header) {
         if (header.includes("Cookie")) {
           // stupid javascript tricks: closure
           cookieString = header;
@@ -95,7 +95,7 @@ function parseCurlCommand(curlCommand) {
     if (!Array.isArray(parsedArguments.F)) {
       parsedArguments.F = [parsedArguments.F];
     }
-    parsedArguments.F.forEach(function(multipartArgument) {
+    parsedArguments.F.forEach(function (multipartArgument) {
       // input looks like key=value. value could be json or a file path prepended with an @
       const [key, value] = multipartArgument.split("=", 2);
       multipartUploads[key] = value;
@@ -103,7 +103,7 @@ function parseCurlCommand(curlCommand) {
   }
   if (cookieString) {
     let cookieParseOptions = {
-      decode: function(s) {
+      decode: function (s) {
         return s;
       }
     };
diff --git a/components/autocomplete.vue b/components/autocomplete.vue
index 750bf4897..ba3b06c2f 100644
--- a/components/autocomplete.vue
+++ b/components/autocomplete.vue
@@ -29,182 +29,182 @@
 </template>
 
 <style lang="scss" scoped>
-  .autocomplete-wrapper {
-    position: relative;
+.autocomplete-wrapper {
+  position: relative;
 
-    input:focus + ul.suggestions,
-    ul.suggestions:hover {
+  input:focus + ul.suggestions,
+  ul.suggestions:hover {
+    display: block;
+  }
+
+  ul.suggestions {
+    display: none;
+    background-color: var(--atc-color);
+    position: absolute;
+    top: calc(100% - 4px);
+    margin: 0 4px;
+    left: 0;
+    padding: 0;
+    border-radius: 0 0 4px 4px;
+    z-index: 9999;
+    transition: transform 200ms ease-out;
+
+    li {
+      width: 100%;
       display: block;
-    }
+      padding: 8px 16px;
+      font-size: 18px;
+      font-family: "Roboto Mono", monospace;
+      white-space: pre-wrap;
 
-    ul.suggestions {
-      display: none;
-      background-color: var(--atc-color);
-      position: absolute;
-      top: calc(100% - 4px);
-      margin: 0 4px;
-      left: 0;
-      padding: 0;
-      border-radius: 0 0 4px 4px;
-      z-index: 9999;
-      transition: transform 200ms ease-out;
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+      }
 
-      li {
-        width: 100%;
-        display: block;
-        padding: 8px 16px;
-        font-size: 18px;
-        font-family: "Roboto Mono", monospace;
-        white-space: pre-wrap;
-
-        &:last-child {
-          border-radius: 0 0 4px 4px;
-        }
-
-        &:hover,
-        &.active {
-          background-color: var(--ac-color);
-          color: var(--act-color);
-          cursor: pointer;
-        }
+      &:hover,
+      &.active {
+        background-color: var(--ac-color);
+        color: var(--act-color);
+        cursor: pointer;
       }
     }
   }
+}
 </style>
 
 <script>
-  const KEY_TAB = 9;
-  const KEY_ESC = 27;
+const KEY_TAB = 9;
+const KEY_ESC = 27;
 
-  const KEY_ARROW_UP = 38;
-  const KEY_ARROW_DOWN = 40;
+const KEY_ARROW_UP = 38;
+const KEY_ARROW_DOWN = 40;
 
-  export default {
-    props: {
-      spellcheck: {
-        type: Boolean,
-        default: true,
-        required: false
-      },
-
-      placeholder: {
-        type: String,
-        default: "Start typing...",
-        required: false
-      },
-
-      source: {
-        type: Array,
-        required: true
-      }
+export default {
+  props: {
+    spellcheck: {
+      type: Boolean,
+      default: true,
+      required: false
     },
 
-    watch: {
-      value() {
-        this.$emit("input", this.value);
-      }
+    placeholder: {
+      type: String,
+      default: "Start typing...",
+      required: false
     },
 
-    data() {
-      return {
-        value: "application/json",
-        selectionStart: 0,
-        suggestionsOffsetLeft: 0,
-        currentSuggestionIndex: -1,
-        suggestionsVisible: false
-      };
-    },
-
-    methods: {
-      updateSuggestions(event) {
-        // Hide suggestions if ESC pressed.
-        if (event.which && event.which === KEY_ESC) {
-          event.preventDefault();
-          this.suggestionsVisible = false;
-          this.currentSuggestionIndex = -1;
-          return;
-        }
-
-        // As suggestions is a reactive property, this implicitly
-        // causes suggestions to update.
-        this.selectionStart = this.$refs.acInput.selectionStart;
-        this.suggestionsOffsetLeft = 12 * this.selectionStart;
-        this.suggestionsVisible = true;
-      },
-
-      forceSuggestion(text) {
-        let input = this.value.substring(0, this.selectionStart);
-        this.value = input + text;
-
-        this.selectionStart = this.value.length;
-        this.suggestionsVisible = true;
-        this.currentSuggestionIndex = -1;
-      },
-
-      handleKeystroke(event) {
-        switch (event.which) {
-          case KEY_ARROW_UP:
-            event.preventDefault();
-            this.currentSuggestionIndex =
-              this.currentSuggestionIndex - 1 >= 0
-                ? this.currentSuggestionIndex - 1
-                : 0;
-            break;
-
-          case KEY_ARROW_DOWN:
-            event.preventDefault();
-            this.currentSuggestionIndex =
-              this.currentSuggestionIndex < this.suggestions.length - 1
-                ? this.currentSuggestionIndex + 1
-                : this.suggestions.length - 1;
-            break;
-
-          case KEY_TAB:
-            event.preventDefault();
-            let activeSuggestion = this.suggestions[
-              this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
-            ];
-            if (activeSuggestion) {
-              let input = this.value.substring(0, this.selectionStart);
-              this.value = input + activeSuggestion;
-            }
-            break;
-
-          default:
-            break;
-        }
-      }
-    },
-
-    computed: {
-      /**
-       * Gets the suggestions list to be displayed under the input box.
-       *
-       * @returns {default.props.source|{type, required}}
-       */
-      suggestions() {
-        let input = this.value.substring(0, this.selectionStart);
-
-        return (
-          this.source
-            .filter(entry => {
-              return (
-                entry.toLowerCase().startsWith(input.toLowerCase()) &&
-                input.toLowerCase() !== entry.toLowerCase()
-              );
-            })
-            // Cut off the part that's already been typed.
-            .map(entry => entry.substring(this.selectionStart))
-            // We only want the top 3 suggestions.
-            .slice(0, 3)
-        );
-      }
-    },
-
-    mounted() {
-      this.updateSuggestions({
-        target: this.$refs.acInput
-      });
+    source: {
+      type: Array,
+      required: true
     }
-  };
+  },
+
+  watch: {
+    value() {
+      this.$emit("input", this.value);
+    }
+  },
+
+  data() {
+    return {
+      value: "application/json",
+      selectionStart: 0,
+      suggestionsOffsetLeft: 0,
+      currentSuggestionIndex: -1,
+      suggestionsVisible: false
+    };
+  },
+
+  methods: {
+    updateSuggestions(event) {
+      // Hide suggestions if ESC pressed.
+      if (event.which && event.which === KEY_ESC) {
+        event.preventDefault();
+        this.suggestionsVisible = false;
+        this.currentSuggestionIndex = -1;
+        return;
+      }
+
+      // As suggestions is a reactive property, this implicitly
+      // causes suggestions to update.
+      this.selectionStart = this.$refs.acInput.selectionStart;
+      this.suggestionsOffsetLeft = 12 * this.selectionStart;
+      this.suggestionsVisible = true;
+    },
+
+    forceSuggestion(text) {
+      let input = this.value.substring(0, this.selectionStart);
+      this.value = input + text;
+
+      this.selectionStart = this.value.length;
+      this.suggestionsVisible = true;
+      this.currentSuggestionIndex = -1;
+    },
+
+    handleKeystroke(event) {
+      switch (event.which) {
+        case KEY_ARROW_UP:
+          event.preventDefault();
+          this.currentSuggestionIndex =
+            this.currentSuggestionIndex - 1 >= 0
+              ? this.currentSuggestionIndex - 1
+              : 0;
+          break;
+
+        case KEY_ARROW_DOWN:
+          event.preventDefault();
+          this.currentSuggestionIndex =
+            this.currentSuggestionIndex < this.suggestions.length - 1
+              ? this.currentSuggestionIndex + 1
+              : this.suggestions.length - 1;
+          break;
+
+        case KEY_TAB:
+          event.preventDefault();
+          let activeSuggestion = this.suggestions[
+            this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
+          ];
+          if (activeSuggestion) {
+            let input = this.value.substring(0, this.selectionStart);
+            this.value = input + activeSuggestion;
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+  },
+
+  computed: {
+    /**
+     * Gets the suggestions list to be displayed under the input box.
+     *
+     * @returns {default.props.source|{type, required}}
+     */
+    suggestions() {
+      let input = this.value.substring(0, this.selectionStart);
+
+      return (
+        this.source
+          .filter(entry => {
+            return (
+              entry.toLowerCase().startsWith(input.toLowerCase()) &&
+              input.toLowerCase() !== entry.toLowerCase()
+            );
+          })
+          // Cut off the part that's already been typed.
+          .map(entry => entry.substring(this.selectionStart))
+          // We only want the top 3 suggestions.
+          .slice(0, 3)
+      );
+    }
+  },
+
+  mounted() {
+    this.updateSuggestions({
+      target: this.$refs.acInput
+    });
+  }
+};
 </script>
diff --git a/components/collections/addCollection.vue b/components/collections/addCollection.vue
index 8466f7de7..c5ec80843 100644
--- a/components/collections/addCollection.vue
+++ b/components/collections/addCollection.vue
@@ -35,30 +35,30 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
-    props: {
-      show: Boolean
+export default {
+  props: {
+    show: Boolean
+  },
+  components: {
+    modal
+  },
+  data() {
+    return {
+      name: undefined
+    };
+  },
+  methods: {
+    addNewCollection() {
+      this.$store.commit("postwoman/addNewCollection", {
+        name: this.$data.name
+      });
+      this.$emit("hide-modal");
     },
-    components: {
-      modal
-    },
-    data() {
-      return {
-        name: undefined
-      };
-    },
-    methods: {
-      addNewCollection() {
-        this.$store.commit("postwoman/addNewCollection", {
-          name: this.$data.name
-        });
-        this.$emit("hide-modal");
-      },
-      hideModal() {
-        this.$emit("hide-modal");
-      }
+    hideModal() {
+      this.$emit("hide-modal");
     }
-  };
+  }
+};
 </script>
diff --git a/components/collections/addFolder.vue b/components/collections/addFolder.vue
index 1141bc47a..38b4796f8 100644
--- a/components/collections/addFolder.vue
+++ b/components/collections/addFolder.vue
@@ -35,33 +35,33 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
-    props: {
-      show: Boolean,
-      collection: Object,
-      collectionIndex: Number
+export default {
+  props: {
+    show: Boolean,
+    collection: Object,
+    collectionIndex: Number
+  },
+  components: {
+    modal
+  },
+  data() {
+    return {
+      name: undefined
+    };
+  },
+  methods: {
+    addNewFolder() {
+      this.$store.commit("postwoman/addNewFolder", {
+        folder: { name: this.$data.name },
+        collectionIndex: this.$props.collectionIndex
+      });
+      this.hideModal();
     },
-    components: {
-      modal
-    },
-    data() {
-      return {
-        name: undefined
-      };
-    },
-    methods: {
-      addNewFolder() {
-        this.$store.commit("postwoman/addNewFolder", {
-          folder: { name: this.$data.name },
-          collectionIndex: this.$props.collectionIndex
-        });
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit("hide-modal");
-      }
+    hideModal() {
+      this.$emit("hide-modal");
     }
-  };
+  }
+};
 </script>
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 4bed177f3..192333ae3 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -54,50 +54,50 @@
 </template>
 
 <style scoped>
-  ul {
-    display: flex;
-    flex-direction: column;
-  }
+ul {
+  display: flex;
+  flex-direction: column;
+}
 
-  ul li {
-    display: flex;
-    margin-left: 32px;
-    border-left: 1px solid var(--brd-color);
-  }
+ul li {
+  display: flex;
+  margin-left: 32px;
+  border-left: 1px solid var(--brd-color);
+}
 </style>
 
 <script>
-  import folder from "./folder";
-  import request from "./request";
+import folder from "./folder";
+import request from "./request";
 
-  export default {
-    components: {
-      folder,
-      request
+export default {
+  components: {
+    folder,
+    request
+  },
+  props: {
+    collectionIndex: Number,
+    collection: Object
+  },
+  data() {
+    return {
+      showChildren: false,
+      selectedFolder: {}
+    };
+  },
+  methods: {
+    toggleShowChildren() {
+      this.showChildren = !this.showChildren;
     },
-    props: {
-      collectionIndex: Number,
-      collection: Object
+    removeCollection() {
+      if (!confirm("Are you sure you want to remove this collection?")) return;
+      this.$store.commit("postwoman/removeCollection", {
+        collectionIndex: this.collectionIndex
+      });
     },
-    data() {
-      return {
-        showChildren: false,
-        selectedFolder: {}
-      };
-    },
-    methods: {
-      toggleShowChildren() {
-        this.showChildren = !this.showChildren;
-      },
-      removeCollection() {
-        if (!confirm("Are you sure you want to remove this collection?")) return;
-        this.$store.commit("postwoman/removeCollection", {
-          collectionIndex: this.collectionIndex
-        });
-      },
-      editFolder(collectionIndex, folder, folderIndex) {
-        this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
-      }
+    editFolder(collectionIndex, folder, folderIndex) {
+      this.$emit("edit-folder", { collectionIndex, folder, folderIndex });
     }
-  };
+  }
+};
 </script>
diff --git a/components/collections/editCollection.vue b/components/collections/editCollection.vue
index 6b67049d2..5f61c9845 100644
--- a/components/collections/editCollection.vue
+++ b/components/collections/editCollection.vue
@@ -35,37 +35,37 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
-    props: {
-      show: Boolean,
-      editingCollection: Object,
-      editingCollectionIndex: Number
-    },
-    components: {
-      modal
-    },
-    data() {
-      return {
-        name: undefined
+export default {
+  props: {
+    show: Boolean,
+    editingCollection: Object,
+    editingCollectionIndex: Number
+  },
+  components: {
+    modal
+  },
+  data() {
+    return {
+      name: undefined
+    };
+  },
+  methods: {
+    saveCollection() {
+      const collectionUpdated = {
+        ...this.$props.editingCollection,
+        name: this.$data.name
       };
+      this.$store.commit("postwoman/editCollection", {
+        collection: collectionUpdated,
+        collectionIndex: this.$props.editingCollectionIndex
+      });
+      this.$emit("hide-modal");
     },
-    methods: {
-      saveCollection() {
-        const collectionUpdated = {
-          ...this.$props.editingCollection,
-          name: this.$data.name
-        };
-        this.$store.commit("postwoman/editCollection", {
-          collection: collectionUpdated,
-          collectionIndex: this.$props.editingCollectionIndex
-        });
-        this.$emit("hide-modal");
-      },
-      hideModel() {
-        this.$emit("hide-modal");
-      }
+    hideModel() {
+      this.$emit("hide-modal");
     }
-  };
+  }
+};
 </script>
diff --git a/components/collections/editFolder.vue b/components/collections/editFolder.vue
index 39c1f8244..6aadf8ec4 100644
--- a/components/collections/editFolder.vue
+++ b/components/collections/editFolder.vue
@@ -35,36 +35,36 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
-    props: {
-      show: Boolean,
-      collection: Object,
-      collectionIndex: Number,
-      folder: Object,
-      folderIndex: Number
+export default {
+  props: {
+    show: Boolean,
+    collection: Object,
+    collectionIndex: Number,
+    folder: Object,
+    folderIndex: Number
+  },
+  components: {
+    modal
+  },
+  data() {
+    return {
+      name: undefined
+    };
+  },
+  methods: {
+    editFolder() {
+      this.$store.commit("postwoman/editFolder", {
+        collectionIndex: this.$props.collectionIndex,
+        folder: { ...this.$props.folder, name: this.$data.name },
+        folderIndex: this.$props.folderIndex
+      });
+      this.hideModal();
     },
-    components: {
-      modal
-    },
-    data() {
-      return {
-        name: undefined
-      };
-    },
-    methods: {
-      editFolder() {
-        this.$store.commit("postwoman/editFolder", {
-          collectionIndex: this.$props.collectionIndex,
-          folder: { ...this.$props.folder, name: this.$data.name },
-          folderIndex: this.$props.folderIndex
-        });
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit("hide-modal");
-      }
+    hideModal() {
+      this.$emit("hide-modal");
     }
-  };
+  }
+};
 </script>
diff --git a/components/collections/editRequest.vue b/components/collections/editRequest.vue
index 3269b2c4b..2c0a5a102 100644
--- a/components/collections/editRequest.vue
+++ b/components/collections/editRequest.vue
@@ -46,77 +46,77 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
-    props: {
-      show: Boolean,
-      collectionIndex: Number,
-      folderIndex: Number,
-      request: Object,
-      requestIndex: Number
-    },
-    components: {
-      modal
-    },
-    data() {
-      return {
-        requestUpdateData: {
-          name: undefined,
-          collectionIndex: undefined,
-          folderIndex: undefined
-        }
-      };
-    },
-    watch: {
-      "requestUpdateData.collectionIndex": function resetFolderIndex() {
-        // if user choosen some folder, than selected other collection, which doesn't have any folders
-        // than `requestUpdateData.folderIndex` won't be reseted
-        this.$data.requestUpdateData.folderIndex = undefined;
-      }
-    },
-    computed: {
-      folders() {
-        const userSelectedAnyCollection =
-          this.$data.requestUpdateData.collectionIndex !== undefined;
-        if (!userSelectedAnyCollection) return [];
-
-        return this.$store.state.postwoman.collections[
-          this.$data.requestUpdateData.collectionIndex
-        ].folders;
-      }
-    },
-    methods: {
-      saveRequest() {
-        const userSelectedAnyCollection =
-          this.$data.requestUpdateData.collectionIndex !== undefined;
-
-        const requestUpdated = {
-          ...this.$props.request,
-          name: this.$data.requestUpdateData.name || this.$props.request.name,
-          collection: userSelectedAnyCollection
-            ? this.$data.requestUpdateData.collectionIndex
-            : this.$props.collectionIndex,
-          folder: this.$data.requestUpdateData.folderIndex
-        };
-
-        // pass data separately to don't depend on request's collection, folder fields
-        // probably, they should be deprecated because they don't describe request itself
-        this.$store.commit("postwoman/editRequest", {
-          requestOld: this.$props.request,
-          requestOldCollectionIndex: this.$props.collectionIndex,
-          requestOldFolderIndex: this.$props.folderIndex,
-          requestOldIndex: this.$props.requestIndex,
-          requestNew: requestUpdated,
-          requestNewCollectionIndex: requestUpdated.collection,
-          requestNewFolderIndex: requestUpdated.folder
-        });
-
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit("hide-modal");
+export default {
+  props: {
+    show: Boolean,
+    collectionIndex: Number,
+    folderIndex: Number,
+    request: Object,
+    requestIndex: Number
+  },
+  components: {
+    modal
+  },
+  data() {
+    return {
+      requestUpdateData: {
+        name: undefined,
+        collectionIndex: undefined,
+        folderIndex: undefined
       }
+    };
+  },
+  watch: {
+    "requestUpdateData.collectionIndex": function resetFolderIndex() {
+      // if user choosen some folder, than selected other collection, which doesn't have any folders
+      // than `requestUpdateData.folderIndex` won't be reseted
+      this.$data.requestUpdateData.folderIndex = undefined;
     }
-  };
+  },
+  computed: {
+    folders() {
+      const userSelectedAnyCollection =
+        this.$data.requestUpdateData.collectionIndex !== undefined;
+      if (!userSelectedAnyCollection) return [];
+
+      return this.$store.state.postwoman.collections[
+        this.$data.requestUpdateData.collectionIndex
+      ].folders;
+    }
+  },
+  methods: {
+    saveRequest() {
+      const userSelectedAnyCollection =
+        this.$data.requestUpdateData.collectionIndex !== undefined;
+
+      const requestUpdated = {
+        ...this.$props.request,
+        name: this.$data.requestUpdateData.name || this.$props.request.name,
+        collection: userSelectedAnyCollection
+          ? this.$data.requestUpdateData.collectionIndex
+          : this.$props.collectionIndex,
+        folder: this.$data.requestUpdateData.folderIndex
+      };
+
+      // pass data separately to don't depend on request's collection, folder fields
+      // probably, they should be deprecated because they don't describe request itself
+      this.$store.commit("postwoman/editRequest", {
+        requestOld: this.$props.request,
+        requestOldCollectionIndex: this.$props.collectionIndex,
+        requestOldFolderIndex: this.$props.folderIndex,
+        requestOldIndex: this.$props.requestIndex,
+        requestNew: requestUpdated,
+        requestNewCollectionIndex: requestUpdated.collection,
+        requestNewFolderIndex: requestUpdated.folder
+      });
+
+      this.hideModal();
+    },
+    hideModal() {
+      this.$emit("hide-modal");
+    }
+  }
+};
 </script>
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index d11505d5e..6ed86b9a6 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -39,52 +39,52 @@
 </template>
 
 <style scoped>
-  ul {
-    display: flex;
-    flex-direction: column;
-  }
+ul {
+  display: flex;
+  flex-direction: column;
+}
 
-  ul li {
-    display: flex;
-    margin-left: 32px;
-    border-left: 1px solid var(--brd-color);
-  }
+ul li {
+  display: flex;
+  margin-left: 32px;
+  border-left: 1px solid var(--brd-color);
+}
 </style>
 
 <script>
-  import request from "./request";
+import request from "./request";
 
-  export default {
-    props: {
-      folder: Object,
-      collectionIndex: Number,
-      folderIndex: Number
+export default {
+  props: {
+    folder: Object,
+    collectionIndex: Number,
+    folderIndex: Number
+  },
+  components: {
+    request
+  },
+  data() {
+    return {
+      showChildren: false
+    };
+  },
+  methods: {
+    toggleShowChildren() {
+      this.showChildren = !this.showChildren;
     },
-    components: {
-      request
+    selectRequest(request) {
+      this.$store.commit("postwoman/selectRequest", { request });
     },
-    data() {
-      return {
-        showChildren: false
-      };
+    removeFolder() {
+      if (!confirm("Are you sure you want to remove this folder?")) return;
+      this.$store.commit("postwoman/removeFolder", {
+        collectionIndex: this.collectionIndex,
+        folderIndex: this.folderIndex
+      });
     },
-    methods: {
-      toggleShowChildren() {
-        this.showChildren = !this.showChildren;
-      },
-      selectRequest(request) {
-        this.$store.commit("postwoman/selectRequest", { request });
-      },
-      removeFolder() {
-        if (!confirm("Are you sure you want to remove this folder?")) return;
-        this.$store.commit("postwoman/removeFolder", {
-          collectionIndex: this.collectionIndex,
-          folderIndex: this.folderIndex
-        });
-      },
-      editFolder() {
-        this.$emit("edit-folder");
-      }
+    editFolder() {
+      this.$emit("edit-folder");
     }
-  };
+  }
+};
 </script>
diff --git a/components/collections/importExportCollections.vue b/components/collections/importExportCollections.vue
index a5122e6c2..7d7b822ae 100644
--- a/components/collections/importExportCollections.vue
+++ b/components/collections/importExportCollections.vue
@@ -20,7 +20,11 @@
     <div slot="footer">
       <ul>
         <li>
-          <button class="icon" @click="openDialogChooseFileToReplaceWith" v-tooltip="'Replace current'">
+          <button
+            class="icon"
+            @click="openDialogChooseFileToReplaceWith"
+            v-tooltip="'Replace current'"
+          >
             <i class="material-icons">create_new_folder</i>
             <span>Replace with JSON</span>
             <input
@@ -32,7 +36,11 @@
           </button>
         </li>
         <li>
-          <button class="icon" @click="openDialogChooseFileToImportFrom" v-tooltip="'Preserve current'">
+          <button
+            class="icon"
+            @click="openDialogChooseFileToImportFrom"
+            v-tooltip="'Preserve current'"
+          >
             <i class="material-icons">folder_shared</i>
             <span>Import from JSON</span>
             <input
@@ -55,63 +63,63 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
-    props: {
-      show: Boolean
-    },
-    components: {
-      modal
-    },
-    computed: {
-      collectionJson() {
-        return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
-      }
-    },
-    methods: {
-      hideModel() {
-        this.$emit("hide-modal");
-      },
-      openDialogChooseFileToReplaceWith() {
-        this.$refs.inputChooseFileToReplaceWith.click();
-      },
-      openDialogChooseFileToImportFrom() {
-        this.$refs.inputChooseFileToImportFrom.click();
-      },
-      replaceWithJSON() {
-        let reader = new FileReader();
-        reader.onload = event => {
-          let content = event.target.result;
-          let collections = JSON.parse(content);
-          this.$store.commit("postwoman/replaceCollections", collections);
-        };
-        reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
-      },
-      importFromJSON() {
-        let reader = new FileReader();
-        reader.onload = event => {
-          let content = event.target.result;
-          let collections = JSON.parse(content);
-          this.$store.commit("postwoman/importCollections", collections);
-        };
-        reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
-      },
-      exportJSON() {
-        let text = this.collectionJson;
-        text = text.replace(/\n/g, "\r\n");
-        let blob = new Blob([text], {
-          type: "text/json"
-        });
-        let anchor = document.createElement("a");
-        anchor.download = "postwoman-collection.json";
-        anchor.href = window.URL.createObjectURL(blob);
-        anchor.target = "_blank";
-        anchor.style.display = "none";
-        document.body.appendChild(anchor);
-        anchor.click();
-        document.body.removeChild(anchor);
-      }
+export default {
+  props: {
+    show: Boolean
+  },
+  components: {
+    modal
+  },
+  computed: {
+    collectionJson() {
+      return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
     }
-  };
+  },
+  methods: {
+    hideModel() {
+      this.$emit("hide-modal");
+    },
+    openDialogChooseFileToReplaceWith() {
+      this.$refs.inputChooseFileToReplaceWith.click();
+    },
+    openDialogChooseFileToImportFrom() {
+      this.$refs.inputChooseFileToImportFrom.click();
+    },
+    replaceWithJSON() {
+      let reader = new FileReader();
+      reader.onload = event => {
+        let content = event.target.result;
+        let collections = JSON.parse(content);
+        this.$store.commit("postwoman/replaceCollections", collections);
+      };
+      reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
+    },
+    importFromJSON() {
+      let reader = new FileReader();
+      reader.onload = event => {
+        let content = event.target.result;
+        let collections = JSON.parse(content);
+        this.$store.commit("postwoman/importCollections", collections);
+      };
+      reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
+    },
+    exportJSON() {
+      let text = this.collectionJson;
+      text = text.replace(/\n/g, "\r\n");
+      let blob = new Blob([text], {
+        type: "text/json"
+      });
+      let anchor = document.createElement("a");
+      anchor.download = "postwoman-collection.json";
+      anchor.href = window.URL.createObjectURL(blob);
+      anchor.target = "_blank";
+      anchor.style.display = "none";
+      document.body.appendChild(anchor);
+      anchor.click();
+      document.body.removeChild(anchor);
+    }
+  }
+};
 </script>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 4cd7383d8..43cc940df 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -73,113 +73,113 @@ TODO:
 </template>
 
 <style lang="scss" scoped>
-  ul {
-    display: flex;
-    flex-direction: column;
-  }
+ul {
+  display: flex;
+  flex-direction: column;
+}
 </style>
 
 <script>
-  import addCollection from "./addCollection";
-  import addFolder from "./addFolder";
-  import collection from "./collection";
-  import editCollection from "./editCollection";
-  import editFolder from "./editFolder";
-  import editRequest from "./editRequest";
-  import importExportCollections from "./importExportCollections";
+import addCollection from "./addCollection";
+import addFolder from "./addFolder";
+import collection from "./collection";
+import editCollection from "./editCollection";
+import editFolder from "./editFolder";
+import editRequest from "./editRequest";
+import importExportCollections from "./importExportCollections";
 
-  export default {
-    components: {
-      addCollection,
-      addFolder,
-      collection,
-      editCollection,
-      editFolder,
-      editRequest,
-      importExportCollections
-    },
-    data() {
-      return {
-        showModalAdd: false,
-        showModalEdit: false,
-        showModalImportExport: false,
-        showModalAddFolder: false,
-        showModalEditFolder: false,
-        showModalEditRequest: false,
-        editingCollection: undefined,
-        editingCollectionIndex: undefined,
-        editingFolder: undefined,
-        editingFolderIndex: undefined,
-        editingRequest: undefined,
-        editingRequestIndex: undefined
-      };
-    },
-    computed: {
-      collections() {
-        return this.$store.state.postwoman.collections;
-      }
-    },
-    methods: {
-      displayModalAdd(shouldDisplay) {
-        this.showModalAdd = shouldDisplay;
-      },
-      displayModalEdit(shouldDisplay) {
-        this.showModalEdit = shouldDisplay;
-
-        if (!shouldDisplay) this.resetSelectedData();
-      },
-      displayModalImportExport(shouldDisplay) {
-        this.showModalImportExport = shouldDisplay;
-      },
-      displayModalAddFolder(shouldDisplay) {
-        this.showModalAddFolder = shouldDisplay;
-
-        if (!shouldDisplay) this.resetSelectedData();
-      },
-      displayModalEditFolder(shouldDisplay) {
-        this.showModalEditFolder = shouldDisplay;
-
-        if (!shouldDisplay) this.resetSelectedData();
-      },
-      displayModalEditRequest(shouldDisplay) {
-        this.showModalEditRequest = shouldDisplay;
-
-        if (!shouldDisplay) this.resetSelectedData();
-      },
-      editCollection(collection, collectionIndex) {
-        this.$data.editingCollection = collection;
-        this.$data.editingCollectionIndex = collectionIndex;
-        this.displayModalEdit(true);
-      },
-      addFolder(collection, collectionIndex) {
-        this.$data.editingCollection = collection;
-        this.$data.editingCollectionIndex = collectionIndex;
-        this.displayModalAddFolder(true);
-      },
-      editFolder(payload) {
-        const { collectionIndex, folder, folderIndex } = payload;
-        this.$data.editingCollection = collection;
-        this.$data.editingCollectionIndex = collectionIndex;
-        this.$data.editingFolder = folder;
-        this.$data.editingFolderIndex = folderIndex;
-        this.displayModalEditFolder(true);
-      },
-      editRequest(payload) {
-        const { request, collectionIndex, folderIndex, requestIndex } = payload;
-        this.$data.editingCollectionIndex = collectionIndex;
-        this.$data.editingFolderIndex = folderIndex;
-        this.$data.editingRequest = request;
-        this.$data.editingRequestIndex = requestIndex;
-        this.displayModalEditRequest(true);
-      },
-      resetSelectedData() {
-        this.$data.editingCollection = undefined;
-        this.$data.editingCollectionIndex = undefined;
-        this.$data.editingFolder = undefined;
-        this.$data.editingFolderIndex = undefined;
-        this.$data.editingRequest = undefined;
-        this.$data.editingRequestIndex = undefined;
-      }
+export default {
+  components: {
+    addCollection,
+    addFolder,
+    collection,
+    editCollection,
+    editFolder,
+    editRequest,
+    importExportCollections
+  },
+  data() {
+    return {
+      showModalAdd: false,
+      showModalEdit: false,
+      showModalImportExport: false,
+      showModalAddFolder: false,
+      showModalEditFolder: false,
+      showModalEditRequest: false,
+      editingCollection: undefined,
+      editingCollectionIndex: undefined,
+      editingFolder: undefined,
+      editingFolderIndex: undefined,
+      editingRequest: undefined,
+      editingRequestIndex: undefined
+    };
+  },
+  computed: {
+    collections() {
+      return this.$store.state.postwoman.collections;
     }
-  };
+  },
+  methods: {
+    displayModalAdd(shouldDisplay) {
+      this.showModalAdd = shouldDisplay;
+    },
+    displayModalEdit(shouldDisplay) {
+      this.showModalEdit = shouldDisplay;
+
+      if (!shouldDisplay) this.resetSelectedData();
+    },
+    displayModalImportExport(shouldDisplay) {
+      this.showModalImportExport = shouldDisplay;
+    },
+    displayModalAddFolder(shouldDisplay) {
+      this.showModalAddFolder = shouldDisplay;
+
+      if (!shouldDisplay) this.resetSelectedData();
+    },
+    displayModalEditFolder(shouldDisplay) {
+      this.showModalEditFolder = shouldDisplay;
+
+      if (!shouldDisplay) this.resetSelectedData();
+    },
+    displayModalEditRequest(shouldDisplay) {
+      this.showModalEditRequest = shouldDisplay;
+
+      if (!shouldDisplay) this.resetSelectedData();
+    },
+    editCollection(collection, collectionIndex) {
+      this.$data.editingCollection = collection;
+      this.$data.editingCollectionIndex = collectionIndex;
+      this.displayModalEdit(true);
+    },
+    addFolder(collection, collectionIndex) {
+      this.$data.editingCollection = collection;
+      this.$data.editingCollectionIndex = collectionIndex;
+      this.displayModalAddFolder(true);
+    },
+    editFolder(payload) {
+      const { collectionIndex, folder, folderIndex } = payload;
+      this.$data.editingCollection = collection;
+      this.$data.editingCollectionIndex = collectionIndex;
+      this.$data.editingFolder = folder;
+      this.$data.editingFolderIndex = folderIndex;
+      this.displayModalEditFolder(true);
+    },
+    editRequest(payload) {
+      const { request, collectionIndex, folderIndex, requestIndex } = payload;
+      this.$data.editingCollectionIndex = collectionIndex;
+      this.$data.editingFolderIndex = folderIndex;
+      this.$data.editingRequest = request;
+      this.$data.editingRequestIndex = requestIndex;
+      this.displayModalEditRequest(true);
+    },
+    resetSelectedData() {
+      this.$data.editingCollection = undefined;
+      this.$data.editingCollectionIndex = undefined;
+      this.$data.editingFolder = undefined;
+      this.$data.editingFolderIndex = undefined;
+      this.$data.editingRequest = undefined;
+      this.$data.editingRequestIndex = undefined;
+    }
+  }
+};
 </script>
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 4448de5e2..2b1446acd 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -18,38 +18,38 @@
 </template>
 
 <style scoped>
-  ul {
-    display: flex;
-    flex-direction: column;
-  }
+ul {
+  display: flex;
+  flex-direction: column;
+}
 
-  ul li {
-    display: flex;
-    padding-left: 16px;
-    border-left: 1px solid var(--brd-color);
-  }
+ul li {
+  display: flex;
+  padding-left: 16px;
+  border-left: 1px solid var(--brd-color);
+}
 </style>
 
 <script>
-  export default {
-    props: {
-      request: Object,
-      collectionIndex: Number,
-      folderIndex: Number,
-      requestIndex: Number
+export default {
+  props: {
+    request: Object,
+    collectionIndex: Number,
+    folderIndex: Number,
+    requestIndex: Number
+  },
+  methods: {
+    selectRequest() {
+      this.$store.commit("postwoman/selectRequest", { request: this.request });
     },
-    methods: {
-      selectRequest() {
-        this.$store.commit("postwoman/selectRequest", { request: this.request });
-      },
-      removeRequest() {
-        if (!confirm("Are you sure you want to remove this request?")) return;
-        this.$store.commit("postwoman/removeRequest", {
-          collectionIndex: this.collectionIndex,
-          folderIndex: this.folderIndex,
-          requestIndex: this.requestIndex
-        });
-      }
+    removeRequest() {
+      if (!confirm("Are you sure you want to remove this request?")) return;
+      this.$store.commit("postwoman/removeRequest", {
+        collectionIndex: this.collectionIndex,
+        folderIndex: this.folderIndex,
+        requestIndex: this.requestIndex
+      });
     }
-  };
+  }
+};
 </script>
diff --git a/components/collections/saveRequestAs.vue b/components/collections/saveRequestAs.vue
index bbb5ee18f..b0be1e09a 100644
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -18,7 +18,12 @@
       <ul>
         <li>
           <label for="selectLabel">Label</label>
-          <input type="text" id="selectLabel" v-model="requestData.name" v-bind:placeholder="defaultRequestName" />
+          <input
+            type="text"
+            id="selectLabel"
+            v-model="requestData.name"
+            v-bind:placeholder="defaultRequestName"
+          />
           <label for="selectCollection">Collection</label>
           <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
             <option
@@ -58,101 +63,101 @@
 </template>
 
 <script>
-  import modal from "../../components/modal";
+import modal from "../../components/modal";
 
-  export default {
-    props: {
-      show: Boolean,
-      editingRequest: Object
-    },
-    components: {
-      modal
-    },
-    data() {
-      return {
-        defaultRequestName: "My New Request",
-        requestData: {
-          name: undefined,
-          collectionIndex: undefined,
-          folderIndex: undefined,
-          requestIndex: undefined
-        }
-      };
-    },
-    watch: {
-      "requestData.collectionIndex": function resetFolderAndRequestIndex() {
-        // if user choosen some folder, than selected other collection, which doesn't have any folders
-        // than `requestUpdateData.folderIndex` won't be reseted
-        this.$data.requestData.folderIndex = undefined;
-        this.$data.requestData.requestIndex = undefined;
-      },
-      "requestData.folderIndex": function resetRequestIndex() {
-        this.$data.requestData.requestIndex = undefined;
+export default {
+  props: {
+    show: Boolean,
+    editingRequest: Object
+  },
+  components: {
+    modal
+  },
+  data() {
+    return {
+      defaultRequestName: "My New Request",
+      requestData: {
+        name: undefined,
+        collectionIndex: undefined,
+        folderIndex: undefined,
+        requestIndex: undefined
       }
+    };
+  },
+  watch: {
+    "requestData.collectionIndex": function resetFolderAndRequestIndex() {
+      // if user choosen some folder, than selected other collection, which doesn't have any folders
+      // than `requestUpdateData.folderIndex` won't be reseted
+      this.$data.requestData.folderIndex = undefined;
+      this.$data.requestData.requestIndex = undefined;
     },
-    computed: {
-      folders() {
-        const userSelectedAnyCollection =
-          this.$data.requestData.collectionIndex !== undefined;
-        if (!userSelectedAnyCollection) return [];
+    "requestData.folderIndex": function resetRequestIndex() {
+      this.$data.requestData.requestIndex = undefined;
+    }
+  },
+  computed: {
+    folders() {
+      const userSelectedAnyCollection =
+        this.$data.requestData.collectionIndex !== undefined;
+      if (!userSelectedAnyCollection) return [];
 
-        return this.$store.state.postwoman.collections[
+      return this.$store.state.postwoman.collections[
+        this.$data.requestData.collectionIndex
+      ].folders;
+    },
+    requests() {
+      const userSelectedAnyCollection =
+        this.$data.requestData.collectionIndex !== undefined;
+      if (!userSelectedAnyCollection) return [];
+
+      const userSelectedAnyFolder =
+        this.$data.requestData.folderIndex !== undefined;
+      if (userSelectedAnyFolder) {
+        const collection = this.$store.state.postwoman.collections[
           this.$data.requestData.collectionIndex
-        ].folders;
-      },
-      requests() {
-        const userSelectedAnyCollection =
-          this.$data.requestData.collectionIndex !== undefined;
-        if (!userSelectedAnyCollection) return [];
-
-        const userSelectedAnyFolder =
-          this.$data.requestData.folderIndex !== undefined;
-        if (userSelectedAnyFolder) {
-          const collection = this.$store.state.postwoman.collections[
-            this.$data.requestData.collectionIndex
-          ];
-          const folder = collection.folders[this.$data.requestData.folderIndex];
-          const requests = folder.requests;
-          return requests;
-        } else {
-          const collection = this.$store.state.postwoman.collections[
-            this.$data.requestData.collectionIndex
-          ];
-          const requests = collection.requests;
-          return requests;
-        }
-      }
-    },
-    methods: {
-      saveRequestAs() {
-        const userDidntSpecifyCollection =
-          this.$data.requestData.collectionIndex === undefined;
-        if (userDidntSpecifyCollection) {
-          this.$toast.error("Select a Collection", {
-            icon: "error"
-          });
-          return;
-        }
-
-        const requestUpdated = {
-          ...this.$props.editingRequest,
-          name: this.$data.requestData.name || this.$data.defaultRequestName,
-          collection: this.$data.requestData.collectionIndex
-        };
-
-        this.$store.commit("postwoman/saveRequestAs", {
-          request: requestUpdated,
-          collectionIndex: this.$data.requestData.collectionIndex,
-          folderIndex: this.$data.requestData.folderIndex,
-          requestIndex: this.$data.requestData.requestIndex
-        });
-
-        this.hideModal();
-      },
-      hideModal() {
-        this.$emit("hide-modal");
-        this.$emit("hide-model"); // for backward compatibility  // TODO: use fixed event
+        ];
+        const folder = collection.folders[this.$data.requestData.folderIndex];
+        const requests = folder.requests;
+        return requests;
+      } else {
+        const collection = this.$store.state.postwoman.collections[
+          this.$data.requestData.collectionIndex
+        ];
+        const requests = collection.requests;
+        return requests;
       }
     }
-  };
+  },
+  methods: {
+    saveRequestAs() {
+      const userDidntSpecifyCollection =
+        this.$data.requestData.collectionIndex === undefined;
+      if (userDidntSpecifyCollection) {
+        this.$toast.error("Select a Collection", {
+          icon: "error"
+        });
+        return;
+      }
+
+      const requestUpdated = {
+        ...this.$props.editingRequest,
+        name: this.$data.requestData.name || this.$data.defaultRequestName,
+        collection: this.$data.requestData.collectionIndex
+      };
+
+      this.$store.commit("postwoman/saveRequestAs", {
+        request: requestUpdated,
+        collectionIndex: this.$data.requestData.collectionIndex,
+        folderIndex: this.$data.requestData.folderIndex,
+        requestIndex: this.$data.requestData.requestIndex
+      });
+
+      this.hideModal();
+    },
+    hideModal() {
+      this.$emit("hide-modal");
+      this.$emit("hide-model"); // for backward compatibility  // TODO: use fixed event
+    }
+  }
+};
 </script>
diff --git a/components/history.vue b/components/history.vue
index 1fad8d168..dd9ea526d 100644
--- a/components/history.vue
+++ b/components/history.vue
@@ -143,7 +143,7 @@
         </button>
       </li>
       <li v-else>
-        <div>
+        <div class="flex-wrap">
           <label for="clear-history-button">Are you sure?</label>
           <div>
             <button class="icon" id="confirm-clear-history-button" @click="clearHistory">Yes</button>
diff --git a/components/logo.vue b/components/logo.vue
index 2531295dc..221342bfc 100644
--- a/components/logo.vue
+++ b/components/logo.vue
@@ -36,21 +36,21 @@
 </template>
 
 <style>
-  #circle3814 {
-    /* fill: var(--fg-color); */
-    fill: transparent;
-  }
-  /* #path3816 {
+#circle3814 {
+  /* fill: var(--fg-color); */
+  fill: transparent;
+}
+/* #path3816 {
     fill: var(--bg-color);
   } */
 </style>
 
 <script>
-  export default {
-    props: {
-      color: {
-        type: String
-      }
+export default {
+  props: {
+    color: {
+      type: String
     }
-  };
+  }
+};
 </script>
diff --git a/components/modal.vue b/components/modal.vue
index b9e74beef..dd4a043cf 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -18,41 +18,41 @@
   </transition>
 </template>
 <style scoped>
-  .modal-backdrop {
-    position: fixed;
-    z-index: 998;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: all 0.2s ease;
-  }
+.modal-backdrop {
+  position: fixed;
+  z-index: 998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+}
 
-  .modal-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-    max-width: 800px;
-  }
+.modal-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  max-width: 800px;
+}
 
-  .modal-container {
-    display: flex;
-    flex-grow: 1;
-    flex-direction: column;
-    margin: 8px;
-    padding: 12px;
-    transition: all 0.2s ease;
-    background-color: var(--bg-color);
-    border-radius: 8px;
-    box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
-  }
+.modal-container {
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  margin: 8px;
+  padding: 12px;
+  transition: all 0.2s ease;
+  background-color: var(--bg-color);
+  border-radius: 8px;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+}
 
-  /*
+/*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
@@ -61,14 +61,14 @@
   * these styles.
   */
 
-  .modal-fade-enter,
-  .modal-fade-leave-active {
-    opacity: 0;
-  }
+.modal-fade-enter,
+.modal-fade-leave-active {
+  opacity: 0;
+}
 
-  .modal-fade-enter .modal-container,
-  .modal-fade-leave-active .modal-container {
-    transform: scale(0.9);
-    transition: all 0.1s ease-in-out;
-  }
+.modal-fade-enter .modal-container,
+.modal-fade-leave-active .modal-container {
+  transform: scale(0.8);
+  transition: all 0.2s ease-in-out;
+}
 </style>
diff --git a/components/section.vue b/components/section.vue
index 509bd1818..29d78cb18 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -12,41 +12,41 @@
 </template>
 
 <style>
-  fieldset.no-colored-frames legend {
-    color: var(--fg-color);
-  }
+fieldset.no-colored-frames legend {
+  color: var(--fg-color);
+}
 </style>
 
 <script>
-  export default {
-    computed: {
-      frameColorsEnabled() {
-        return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
-      }
-    },
-
-    data() {
-      return {
-        isCollapsed: false
-      };
-    },
-
-    props: {
-      label: {
-        type: String,
-        default: "Section"
-      },
-      collapsed: {
-        type: Boolean
-      }
-    },
-
-    methods: {
-      collapse({ target }) {
-        const parent = target.parentNode.parentNode;
-        parent.querySelector(".collapsible").classList.toggle("hidden");
-        this.isCollapsed = !this.isCollapsed;
-      }
+export default {
+  computed: {
+    frameColorsEnabled() {
+      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
     }
-  };
+  },
+
+  data() {
+    return {
+      isCollapsed: false
+    };
+  },
+
+  props: {
+    label: {
+      type: String,
+      default: "Section"
+    },
+    collapsed: {
+      type: Boolean
+    }
+  },
+
+  methods: {
+    collapse({ target }) {
+      const parent = target.parentNode.parentNode;
+      parent.querySelector(".collapsible").classList.toggle("hidden");
+      this.isCollapsed = !this.isCollapsed;
+    }
+  }
+};
 </script>
diff --git a/components/settings/swatch.vue b/components/settings/swatch.vue
index 143f37d4e..4391f98dc 100644
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -8,61 +8,61 @@
 </template>
 
 <style lang="scss">
-  .color {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 16px 0 4px;
-    margin: 4px;
+.color {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px 0 4px;
+  margin: 4px;
+  background-color: var(--bg-dark-color);
+  color: var(--fg-color);
+  border-radius: 20px;
+  cursor: pointer;
+  height: 40px;
+
+  &.active {
     background-color: var(--bg-dark-color);
-    color: var(--fg-color);
-    border-radius: 20px;
-    cursor: pointer;
-    height: 40px;
-
-    &.active {
-      background-color: var(--bg-dark-color);
-    }
-
-    .preview {
-      vertical-align: middle;
-      display: inline-block;
-      border-radius: 100%;
-      margin-right: 8px;
-      padding: 16px;
-      position: relative;
-
-      .activeTick {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          color: #ffffff;
-      }
-    }
   }
 
-  .color.vibrant {
-    .preview .activeTick {
-      color: var(--act-color);
+  .preview {
+    vertical-align: middle;
+    display: inline-block;
+    border-radius: 100%;
+    margin-right: 8px;
+    padding: 16px;
+    position: relative;
+
+    .activeTick {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #ffffff;
     }
   }
+}
+
+.color.vibrant {
+  .preview .activeTick {
+    color: var(--act-color);
+  }
+}
 </style>
 
 <script>
-  export default {
-    props: {
-      'color': {
-        type: String,
-        required: true
-      },
-      'name': {
-        type: String
-      },
-      'active': {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    color: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String
+    },
+    active: {
+      type: Boolean,
+      default: false
     }
   }
+};
 </script>
diff --git a/components/toggle.vue b/components/toggle.vue
index 83cc733bb..e7f190b7f 100644
--- a/components/toggle.vue
+++ b/components/toggle.vue
@@ -10,89 +10,89 @@
 </template>
 
 <style lang="scss" scoped>
-  $useBorder: false;
-  $borderColor: var(--fg-light-color);
-  $activeColor: var(--ac-color);
-  $inactiveColor: var(--fg-light-color);
+$useBorder: false;
+$borderColor: var(--fg-light-color);
+$activeColor: var(--ac-color);
+$inactiveColor: var(--fg-light-color);
 
-  $inactiveHandleColor: var(--bg-color);
-  $activeHandleColor: var(--act-color);
+$inactiveHandleColor: var(--bg-color);
+$activeHandleColor: var(--act-color);
 
-  $width: 32px;
-  $height: 16px;
-  $handleSpacing: 4px;
+$width: 32px;
+$height: 16px;
+$handleSpacing: 4px;
 
-  $transition: all 0.2s ease-in-out;
+$transition: all 0.2s ease-in-out;
 
-  div {
+div {
+  display: inline-block;
+  cursor: pointer;
+}
+
+label.caption {
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+label.toggle {
+  position: relative;
+  display: inline-block;
+  width: $width;
+  height: $height;
+  border: if($useBorder, 2px solid $borderColor, none);
+  background-color: if($useBorder, transparent, $inactiveColor);
+  vertical-align: middle;
+
+  border-radius: 32px;
+  transition: $transition;
+  box-sizing: initial;
+  padding: 0;
+  margin: 8px 4px;
+  cursor: pointer;
+
+  .handle {
+    position: absolute;
     display: inline-block;
-    cursor: pointer;
-  }
+    top: 0;
+    bottom: 0;
+    left: 0;
+    margin: $handleSpacing;
+    background-color: $inactiveHandleColor;
 
-  label.caption {
-    vertical-align: middle;
-    cursor: pointer;
-  }
+    width: #{$height - ($handleSpacing * 2)};
+    height: #{$height - ($handleSpacing * 2)};
+    border-radius: 100px;
 
-  label.toggle {
-    position: relative;
-    display: inline-block;
-    width: $width;
-    height: $height;
-    border: if($useBorder, 2px solid $borderColor, none);
-    background-color: if($useBorder, transparent, $inactiveColor);
-    vertical-align: middle;
-
-    border-radius: 32px;
+    pointer-events: none;
     transition: $transition;
-    box-sizing: initial;
-    padding: 0;
-    margin: 8px 4px;
-    cursor: pointer;
+  }
+
+  &.on {
+    background-color: $activeColor;
+    border-color: $activeColor;
 
     .handle {
-      position: absolute;
-      display: inline-block;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      margin: $handleSpacing;
-      background-color: $inactiveHandleColor;
-
-      width: #{$height - ($handleSpacing * 2)};
-      height: #{$height - ($handleSpacing * 2)};
-      border-radius: 100px;
-
-      pointer-events: none;
-      transition: $transition;
-    }
-
-    &.on {
-      background-color: $activeColor;
-      border-color: $activeColor;
-
-      .handle {
-        background-color: $activeHandleColor;
-        left: #{$width - $height};
-      }
+      background-color: $activeHandleColor;
+      left: #{$width - $height};
     }
   }
+}
 </style>
 
 <script>
-  export default {
-    props: {
-      on: {
-        type: Boolean,
-        default: false
-      }
-    },
-
-    methods: {
-      toggle() {
-        const containsOnClass = this.$refs.toggle.classList.toggle("on");
-        this.$emit("change", containsOnClass);
-      }
+export default {
+  props: {
+    on: {
+      type: Boolean,
+      default: false
     }
-  };
+  },
+
+  methods: {
+    toggle() {
+      const containsOnClass = this.$refs.toggle.classList.toggle("on");
+      this.$emit("change", containsOnClass);
+    }
+  }
+};
 </script>
diff --git a/layouts/default.vue b/layouts/default.vue
index 5b0e102a5..57767b7e8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -27,7 +27,11 @@
             <nuxt-link to="/" :class="linkActive('/')" v-tooltip.right="'Home'">
               <logo alt style="height: 24px;"></logo>
             </nuxt-link>
-            <nuxt-link to="/websocket" :class="linkActive('/websocket')" v-tooltip.right="'WebSocket'">
+            <nuxt-link
+              to="/websocket"
+              :class="linkActive('/websocket')"
+              v-tooltip.right="'WebSocket'"
+            >
               <i class="material-icons">cloud</i>
             </nuxt-link>
             <nuxt-link
@@ -157,6 +161,70 @@
     scroll-behavior: smooth;
   }
 
+  ::selection {
+    background-color: var(--ac-sel-color);
+    color: var(--act-color);
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: var(--fg-light-color);
+    border-radius: 8px;
+    border: 2px solid var(--bg-color);
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: var(--fg-color);
+  }
+
+  ::placeholder {
+    color: var(--fg-light-color);
+    opacity: 0.3;
+  }
+
+  * {
+    box-sizing: border-box;
+    outline: 0;
+    border: 0;
+  }
+
+  body {
+    background-color: var(--bg-color);
+    color: var(--fg-color);
+    font-weight: 500;
+    font-size: 16px;
+    font-family: "Poppins", "Roboto", "Noto", sans-serif;
+    line-height: 1.5;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    user-select: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  // Make theme transition smoother.
+  body.afterLoad {
+    &,
+    & * {
+      transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
+    }
+  }
+
+  body.sticky-footer footer {
+    opacity: 0.25;
+  }
+
+  a {
+    display: inline-flex;
+    color: inherit;
+    text-decoration: none;
+    font-weight: 700;
+  }
+
   header,
   footer {
     & > div {
@@ -168,10 +236,6 @@
     }
   }
 
-  body.sticky-footer footer {
-    opacity: 0.25;
-  }
-
   .wrapper {
     min-height: 100vh;
     display: flex;
@@ -186,6 +250,23 @@
     flex: 1;
   }
 
+  .slide-in {
+    position: relative;
+    animation: slideIn 0.2s forwards ease-in-out;
+  }
+
+  @keyframes slideIn {
+    0% {
+      opacity: 0;
+      left: -16px;
+    }
+
+    100% {
+      opacity: 1;
+      left: 0px;
+    }
+  }
+
   .logo {
     font-size: 22px;
     color: var(--ac-color);
@@ -220,14 +301,53 @@
     display: none;
   }
 
+  nav.primary-nav {
+    display: flex;
+    flex-flow: column nowrap;
+    border-bottom: 1px solid var(--brd-color);
+
+    svg {
+      fill: var(--fg-light-color);
+    }
+
+    a {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      padding: 16px;
+      border-radius: 50%;
+      background-color: var(--brd-color);
+      color: var(--fg-light-color);
+      margin: 8px;
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        color: var(--fg-color);
+
+        svg {
+          fill: var(--fg-color);
+        }
+      }
+
+      &.nuxt-link-exact-active {
+        background-color: var(--ac-color);
+        color: var(--act-color);
+        border-radius: 16px;
+
+        svg {
+          fill: var(--act-color);
+        }
+      }
+    }
+  }
+
   nav.secondary-nav {
     display: flex;
-    align-items: center;
-    justify-content: center;
 
     ul {
       display: flex;
-      flex-flow: column;
+      flex-flow: column nowrap;
 
       li {
         display: flex;
@@ -236,6 +356,7 @@
           display: flex;
           align-items: center;
           justify-content: center;
+          flex-shrink: 0;
           padding: 16px;
           border-radius: 50%;
           background-color: var(--bg-dark-color);
@@ -255,67 +376,10 @@
     }
   }
 
-  .slide-in {
-    position: relative;
-    animation: slideIn 0.2s forwards ease-in-out;
-  }
-
-  @keyframes slideIn {
-    0% {
-      opacity: 0;
-      left: -16px;
-    }
-
-    100% {
-      opacity: 1;
-      left: 0px;
-    }
-  }
-
   .footer {
     flex-direction: column;
   }
 
-  nav.primary-nav {
-    display: flex;
-    flex-flow: column;
-    border-bottom: 1px solid var(--brd-color);
-
-    svg {
-      fill: var(--fg-light-color);
-    }
-
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 16px;
-      border-radius: 50%;
-      background-color: var(--brd-color);
-      color: var(--fg-light-color);
-      margin: 8px;
-      transition: all .2s ease-in-out;
-
-      &:hover {
-        color: var(--fg-color);
-
-        svg {
-          fill: var(--fg-color);
-        }
-      }
-
-      &.nuxt-link-exact-active {
-        background-color: var(--ac-color);
-        color: var(--act-color);
-        border-radius: 8px;
-
-        svg {
-          fill: var(--act-color);
-        }
-      }
-    }
-  }
-
   $responsiveWidth: 720px;
 
   @media (max-width: $responsiveWidth) {
diff --git a/layouts/error.vue b/layouts/error.vue
index fc1e912e1..3b599a0a8 100644
--- a/layouts/error.vue
+++ b/layouts/error.vue
@@ -15,36 +15,36 @@
 </template>
 
 <style lang="scss">
-  // Center the error page in the viewport.
-  .page-error {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    text-align: center;
-  }
+// Center the error page in the viewport.
+.page-error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+}
 
-  .error_banner {
-    width: 256px;
-  }
+.error_banner {
+  width: 256px;
+}
 </style>
 
 <script>
-  export default {
-    props: ["error"],
+export default {
+  props: ["error"],
 
-    methods: {
-      reloadApplication() {
-        this.$router.push("/", () => window.location.reload());
-      }
-    },
-
-    head() {
-      return {
-        bodyAttrs: {
-          class: "sticky-footer"
-        }
-      };
+  methods: {
+    reloadApplication() {
+      this.$router.push("/", () => window.location.reload());
     }
-  };
+  },
+
+  head() {
+    return {
+      bodyAttrs: {
+        class: "sticky-footer"
+      }
+    };
+  }
+};
 </script>
diff --git a/nuxt.config.js b/nuxt.config.js
index 2e197c22a..58e19b067 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -29,8 +29,7 @@ export default {
   },
   head: {
     title: `${meta.name} \u2022 ${meta.shortDescription}`,
-    meta: [
-      {
+    meta: [{
         charset: 'utf-8'
       },
       {
@@ -148,8 +147,7 @@ export default {
         content: `${routerBase.router.base}icons/icon-144x144.png`
       },
     ],
-    link: [
-      {
+    link: [{
         rel: 'icon',
         type: 'image/x-icon',
         href: `${routerBase.router.base}favicon.ico`
@@ -206,8 +204,7 @@ export default {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [
-    {
+  plugins: [{
       src: '~/plugins/vuex-persist'
     },
     {
@@ -217,8 +214,7 @@ export default {
   /*
    ** Nuxt.js dev-modules
    */
-  buildModules: [
-  ],
+  buildModules: [],
   /*
    ** Nuxt.js modules
    */
@@ -229,7 +225,9 @@ export default {
     ['@nuxtjs/toast'],
     ['@nuxtjs/google-analytics'],
     ['@nuxtjs/sitemap'],
-    ['@nuxtjs/google-tag-manager', { id: process.env.GTM_ID || 'GTM-MXWD8NQ' }]
+    ['@nuxtjs/google-tag-manager', {
+      id: process.env.GTM_ID || 'GTM-MXWD8NQ'
+    }]
   ],
   pwa: {
     manifest: {
diff --git a/pages/index.vue b/pages/index.vue
index 880d67189..010a8f6fd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -40,8 +40,21 @@
       </div>
     </pw-modal>
 
-    <pw-section v-if="showPreRequestScript" class="orange" label="Pre-Request • β (experimental)" ref="preRequest">
-      <textarea id="preRequestScript" @keydown="formatRawParams" rows="8" v-model="preRequestScript" v-textarea-auto-height="preRequestScript" spellcheck="false" placeholder='pw.environment.set("variable", "value");'></textarea>
+    <pw-section
+      v-if="showPreRequestScript"
+      class="orange"
+      label="Pre-Request • β (experimental)"
+      ref="preRequest"
+    >
+      <textarea
+        id="preRequestScript"
+        @keydown="formatRawParams"
+        rows="8"
+        v-model="preRequestScript"
+        v-textarea-auto-height="preRequestScript"
+        spellcheck="false"
+        placeholder="pw.environment.set('variable', 'value');"
+      ></textarea>
     </pw-section>
 
     <pw-section class="blue" label="Request" ref="request">
@@ -212,8 +225,16 @@
             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-if="showPreRequestScript">close</i>
+            <i
+              class="material-icons"
+              :class="showPreRequestScript"
+              v-if="!showPreRequestScript"
+            >code</i>
+            <i
+              class="material-icons"
+              :class="showPreRequestScript"
+              v-if="showPreRequestScript"
+            >close</i>
           </button>
         </div>
         <div style="text-align: center;">
@@ -282,14 +303,13 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
     <section id="options">
       <input id="tab-one" type="radio" name="grp" checked="checked" />
       <label for="tab-one">Authentication</label>
       <div class="tab">
-
-        <br>
+        <br />
 
         <pw-section class="cyan" label="Authentication" ref="authentication">
           <ul>
@@ -342,19 +362,14 @@
             </li>
           </ul>
           <div class="flex-wrap">
-            <pw-toggle
-            :on="!urlExcludes.auth"
-            @change="setExclude('auth', !$event)">
-              Include in URL
-            </pw-toggle>
+            <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>
+        <br />
 
         <pw-section class="orange" label="Headers" ref="headers">
           <ul>
@@ -419,8 +434,7 @@
       <input id="tab-three" type="radio" name="grp" />
       <label for="tab-three">Parameters</label>
       <div class="tab">
-
-        <br>
+        <br />
 
         <pw-section class="pink" label="Parameters" ref="parameters">
           <ul>
@@ -482,7 +496,7 @@
       </div>
     </section>
 
-    <br>
+    <br />
 
     <pw-section class="purple" id="response" label="Response" ref="response">
       <ul>
@@ -518,11 +532,11 @@
           </div>
           <div id="response-details-wrapper">
             <pre><code
-              ref="responseBody"
-              id="body"
-              rows="16"
-              placeholder="(waiting to send request)"
-            >{{response.body}}</code></pre>
+  ref="responseBody"
+  id="body"
+  rows="16"
+  placeholder="(waiting to send request)"
+>{{response.body}}</code></pre>
             <iframe
               :class="{hidden: !previewEnabled}"
               class="covers-response"
@@ -541,13 +555,13 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
     <pw-section class="yellow" label="Collections" ref="collections">
       <collections />
     </pw-section>
 
-    <br>
+    <br />
 
     <history @useHistory="handleUseHistory" ref="historyComponent"></history>
   </div>
@@ -567,7 +581,7 @@ import parseCurlCommand from "../assets/js/curlparser.js";
 import hljs from "highlight.js";
 import "highlight.js/styles/dracula.css";
 import getEnvironmentVariablesFromScript from "../functions/preRequest";
-import parseTemplateString from '../functions/templating'
+import parseTemplateString from "../functions/templating";
 
 const statusCategories = [
   {
@@ -633,11 +647,11 @@ export default {
     collections,
     saveRequestAs
   },
-  data () {
+  data() {
     return {
       showModal: false,
       showPreRequestScript: false,
-      preRequestScript: '',
+      preRequestScript: "",
       copyButton: '<i class="material-icons">file_copy</i>',
       copiedButton: '<i class="material-icons">done</i>',
       isHidden: true,
@@ -677,10 +691,13 @@ export default {
   },
   watch: {
     urlExcludes: {
-        deep: true,
-        handler () {
-          this.$store.commit("postwoman/applySetting", ['URL_EXCLUDES', Object.assign({}, this.urlExcludes)]);
-        }
+      deep: true,
+      handler() {
+        this.$store.commit("postwoman/applySetting", [
+          "URL_EXCLUDES",
+          Object.assign({}, this.urlExcludes)
+        ]);
+      }
     },
     contentType(val) {
       this.rawInput = !this.knownContentTypes.includes(val);
@@ -769,68 +786,135 @@ export default {
   },
   computed: {
     url: {
-        get() { return this.$store.state.request.url; },
-        set(value) { this.$store.commit('setState', { value, 'attribute': 'url' }) },
+      get() {
+        return this.$store.state.request.url;
       },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "url" });
+      }
+    },
     method: {
-      get() { return this.$store.state.request.method; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'method' }) },
+      get() {
+        return this.$store.state.request.method;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "method" });
+      }
     },
     path: {
-      get() { return this.$store.state.request.path; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'path' }) },
+      get() {
+        return this.$store.state.request.path;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "path" });
+      }
     },
     label: {
-      get() { return this.$store.state.request.label; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'label' }) },
+      get() {
+        return this.$store.state.request.label;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "label" });
+      }
     },
     auth: {
-      get() { return this.$store.state.request.auth; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'auth' }) },
+      get() {
+        return this.$store.state.request.auth;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "auth" });
+      }
     },
     httpUser: {
-      get() { return this.$store.state.request.httpUser; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'httpUser' }) },
+      get() {
+        return this.$store.state.request.httpUser;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "httpUser" });
+      }
     },
     httpPassword: {
-      get() { return this.$store.state.request.httpPassword; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'httpPassword' }) },
+      get() {
+        return this.$store.state.request.httpPassword;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "httpPassword" });
+      }
     },
     bearerToken: {
-      get() { return this.$store.state.request.bearerToken; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'bearerToken' }) },
+      get() {
+        return this.$store.state.request.bearerToken;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "bearerToken" });
+      }
     },
     headers: {
-      get() { return this.$store.state.request.headers; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'headers' }) },
+      get() {
+        return this.$store.state.request.headers;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "headers" });
+      }
     },
     params: {
-      get() { return this.$store.state.request.params; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'params' }) },
+      get() {
+        return this.$store.state.request.params;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "params" });
+      }
     },
     bodyParams: {
-      get() { return this.$store.state.request.bodyParams; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'bodyParams' }) },
+      get() {
+        return this.$store.state.request.bodyParams;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "bodyParams" });
+      }
     },
     rawParams: {
-      get() { return this.$store.state.request.rawParams; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'rawParams' }) },
+      get() {
+        return this.$store.state.request.rawParams;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "rawParams" });
+      }
     },
     rawInput: {
-      get() { return this.$store.state.request.rawInput; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'rawInput' }) },
+      get() {
+        return this.$store.state.request.rawInput;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "rawInput" });
+      }
     },
     requestType: {
-      get() { return this.$store.state.request.requestType; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'requestType' }) },
+      get() {
+        return this.$store.state.request.requestType;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "requestType" });
+      }
     },
     contentType: {
-      get() { return this.$store.state.request.contentType; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'contentType' }) },
+      get() {
+        return this.$store.state.request.contentType;
+      },
+      set(value) {
+        this.$store.commit("setState", { value, attribute: "contentType" });
+      }
     },
     passwordFieldType: {
-      get() { return this.$store.state.request.passwordFieldType; },
-      set(value) { this.$store.commit('setState', { value, 'attribute': 'passwordFieldType' }) }
+      get() {
+        return this.$store.state.request.passwordFieldType;
+      },
+      set(value) {
+        this.$store.commit("setState", {
+          value,
+          attribute: "passwordFieldType"
+        });
+      }
     },
 
     selectedRequest() {
@@ -970,21 +1054,38 @@ export default {
         requestString.push('  method: "' + this.method + '",\n');
         if (this.auth === "Basic") {
           var basic = this.httpUser + ":" + this.httpPassword;
-          this.$store.commit('addHeaders', '    "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ",\n")
+          this.$store.commit(
+            "addHeaders",
+            '    "Authorization": "Basic ' +
+              window.btoa(unescape(encodeURIComponent(basic))) +
+              ",\n"
+          );
         } else if (this.auth === "Bearer Token") {
-          this.$store.commit('addHeaders', '    "Authorization": "Bearer Token ' + this.bearerToken + ",\n")
+          this.$store.commit(
+            "addHeaders",
+            '    "Authorization": "Bearer Token ' + this.bearerToken + ",\n"
+          );
         }
         if (["POST", "PUT", "PATCH"].includes(this.method)) {
           const requestBody = this.rawInput
             ? this.rawParams
             : this.rawRequestBody;
           requestString.push("  body: " + requestBody + ",\n");
-          this.$store.commit('addHeaders', '    "Content-Length": ' + requestBody.length + ",\n")
-          this.$store.commit('addHeaders', '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
+          this.$store.commit(
+            "addHeaders",
+            '    "Content-Length": ' + requestBody.length + ",\n"
+          );
+          this.$store.commit(
+            "addHeaders",
+            '    "Content-Type": "' + this.contentType + '; charset=utf-8",\n'
+          );
         }
         if (this.headers) {
           this.headers.forEach(function(element) {
-            this.$store.commit('addHeaders', '    "' + element.key + '": "' + element.value + '",\n')
+            this.$store.commit(
+              "addHeaders",
+              '    "' + element.key + '": "' + element.value + '",\n'
+            );
           });
         }
         headers = headers.join("").slice(0, -3);
@@ -1052,7 +1153,7 @@ export default {
       });
     },
     getVariablesFromPreRequestScript() {
-      if(!this.preRequestScript) {
+      if (!this.preRequestScript) {
         return {};
       }
       return getEnvironmentVariablesFromScript(this.preRequestScript);
@@ -1066,18 +1167,28 @@ export default {
         data: requestBody ? requestBody.toString() : null
       };
       if (preRequestScript) {
-        const environmentVariables = getEnvironmentVariablesFromScript(preRequestScript);
-        requestOptions.url = parseTemplateString(requestOptions.url, environmentVariables);
-        requestOptions.data = parseTemplateString(requestOptions.data, environmentVariables);
+        const environmentVariables = getEnvironmentVariablesFromScript(
+          preRequestScript
+        );
+        requestOptions.url = parseTemplateString(
+          requestOptions.url,
+          environmentVariables
+        );
+        requestOptions.data = parseTemplateString(
+          requestOptions.data,
+          environmentVariables
+        );
         for (let k in requestOptions.headers) {
           const kParsed = parseTemplateString(k, environmentVariables);
-          const valParsed = parseTemplateString(requestOptions.headers[k], environmentVariables);
+          const valParsed = parseTemplateString(
+            requestOptions.headers[k],
+            environmentVariables
+          );
           delete requestOptions.headers[k];
           requestOptions.headers[kParsed] = valParsed;
         }
-
       }
-      if (typeof requestOptions.data === 'string') {
+      if (typeof requestOptions.data === "string") {
         requestOptions.data = parseTemplateString(requestOptions.data);
       }
       const config = this.$store.state.postwoman.settings.PROXY_ENABLED
@@ -1168,7 +1279,12 @@ export default {
       try {
         const startTime = Date.now();
 
-        const payload = await this.makeRequest(auth, headers, requestBody, this.showPreRequestScript && this.preRequestScript);
+        const payload = await this.makeRequest(
+          auth,
+          headers,
+          requestBody,
+          this.showPreRequestScript && this.preRequestScript
+        );
 
         const duration = Date.now() - startTime;
         this.$toast.info(`Finished in ${duration}ms`, {
@@ -1259,34 +1375,34 @@ export default {
       this.params = params;
     },
     addRequestHeader() {
-      this.$store.commit('addHeaders', {
+      this.$store.commit("addHeaders", {
         key: "",
         value: ""
       });
       return false;
     },
     removeRequestHeader(index) {
-      this.$store.commit('removeHeaders', index)
+      this.$store.commit("removeHeaders", index);
       this.$toast.error("Deleted", {
         icon: "delete"
       });
     },
     addRequestParam() {
-      this.$store.commit('addParams', { key: "", value: "" })
+      this.$store.commit("addParams", { key: "", value: "" });
       return false;
     },
     removeRequestParam(index) {
-      this.$store.commit('removeParams', index)
+      this.$store.commit("removeParams", index);
       this.$toast.error("Deleted", {
         icon: "delete"
       });
     },
     addRequestBodyParam() {
-      this.$store.commit('addBodyParams', { key: "", value: "" })
+      this.$store.commit("addBodyParams", { key: "", value: "" });
       return false;
     },
     removeRequestBodyParam(index) {
-      this.$store.commit('removeBodyParams', index)
+      this.$store.commit("removeBodyParams", index);
       this.$toast.error("Deleted", {
         icon: "delete"
       });
@@ -1441,7 +1557,9 @@ export default {
         !this.urlExcludes.httpPassword ? "httpPassword" : null,
         !this.urlExcludes.bearerToken ? "bearerToken" : null,
         "contentType"
-      ].filter((item) => item !== null).map(item => flat(item));
+      ]
+        .filter(item => item !== null)
+        .map(item => flat(item));
       let deeps = ["headers", "params"].map(item => deep(item));
       let bodyParams = this.rawInput
         ? [flat("rawParams")]
@@ -1498,7 +1616,10 @@ export default {
         this.path = "";
         this.headers = [];
         for (const key of Object.keys(parsedCurl.headers)) {
-          this.$store.commit('addHeaders', { key: key, value: parsedCurl.headers[key] })
+          this.$store.commit("addHeaders", {
+            key: key,
+            value: parsedCurl.headers[key]
+          });
         }
         this.method = parsedCurl.method.toUpperCase();
         if (parsedCurl["data"]) {
@@ -1586,7 +1707,7 @@ export default {
       this.showRequestModal = false;
       this.editRequest = {};
     },
-    setExclude (excludedField, excluded) {
+    setExclude(excludedField, excluded) {
       if (excludedField === "auth") {
         this.urlExcludes.auth = excluded;
         this.urlExcludes.httpUser = excluded;
@@ -1599,7 +1720,9 @@ export default {
     },
     methodChange() {
       // this.$store.commit('setState', { 'value': ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '', 'attribute': 'contentType' })
-      this.contentType = ["POST", "PUT", "PATCH"].includes(this.method) ? 'application/json' : '';
+      this.contentType = ["POST", "PUT", "PATCH"].includes(this.method)
+        ? "application/json"
+        : "";
     }
   },
   mounted() {
@@ -1607,11 +1730,11 @@ export default {
   },
   created() {
     this.urlExcludes = this.$store.state.postwoman.settings.URL_EXCLUDES || {
-        // Exclude authentication by default for security reasons.
-        auth: true,
-        httpUser: true,
-        httpPassword: true,
-        bearerToken: true
+      // Exclude authentication by default for security reasons.
+      auth: true,
+      httpUser: true,
+      httpPassword: true,
+      bearerToken: true
     };
 
     if (Object.keys(this.$route.query).length)
diff --git a/pages/settings.vue b/pages/settings.vue
index 5be9c355e..1c2c5ad53 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -5,7 +5,11 @@
         <li>
           <h3 class="title">Background</h3>
           <div class="backgrounds">
-            <span :key="theme.class" @click="applyTheme(theme.class, theme.color)" v-for="theme in themes">
+            <span
+              :key="theme.class"
+              @click="applyTheme(theme.class, theme.color)"
+              v-for="theme in themes"
+            >
               <swatch
                 :active="settings.THEME_CLASS === theme.class"
                 :class="{ vibrant: theme.vibrant }"
@@ -48,7 +52,7 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
     <pw-section class="blue" label="Proxy" ref="proxy">
       <ul>
@@ -62,7 +66,16 @@
         </li>
       </ul>
       <ul class="info">
-        <li><p>Postwoman's Proxy is hosted by ApolloTV.<br>Read the ApolloTV privacy policy <a href="https://apollotv.xyz/legal" target="_blank">here</a>.</p></li>
+        <li>
+          <p>
+            Postwoman's Proxy is hosted by ApolloTV.
+            <br />Read the ApolloTV privacy policy
+            <a
+              href="https://apollotv.xyz/legal"
+              target="_blank"
+            >here</a>.
+          </p>
+        </li>
       </ul>
       <!--
       PROXY SETTINGS URL AND KEY
@@ -84,181 +97,183 @@
 </template>
 
 <style scoped>
-  .info {
-    margin-left: 4px;
-    color: var(--fg-light-color);
-  }
+.info {
+  margin-left: 4px;
+  color: var(--fg-light-color);
+}
 </style>
 
 <script>
-  import section from "../components/section";
-  import swatch from "../components/settings/swatch";
-  import toggle from "../components/toggle";
+import section from "../components/section";
+import swatch from "../components/settings/swatch";
+import toggle from "../components/toggle";
 
-  export default {
-    components: {
-      "pw-section": section,
-      "pw-toggle": toggle,
-      swatch: swatch
-    },
+export default {
+  components: {
+    "pw-section": section,
+    "pw-toggle": toggle,
+    swatch: swatch
+  },
 
-    data() {
-      return {
-        // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
-        //        You should copy the existing light theme as a template and then just
-        //        set the relevant values.
-        themes: [
-          {
-            color: "rgb(37, 38, 40)",
-            name: "Kinda Dark",
-            class: ""
-          },
-          {
-            color: "#ffffff",
-            name: "Clearly White",
-            vibrant: true,
-            class: "light"
-          },
-          {
-            color: "#000000",
-            name: "Just Black",
-            class: "black"
-          },
-          {
-            color: "var(--bg-color)",
-            name: "Auto (system)",
-            vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
-            class: "auto"
-          }
-        ],
-        // You can define a new color here! It will simply store the color value.
-        colors: [
-          // If the color is vibrant, black is used as the active foreground color.
-          {
-            color: "#50fa7b",
-            name: "Green",
-            vibrant: true
-          },
-          {
-            color: "#f1fa8c",
-            name: "Yellow",
-            vibrant: true
-          },
-          {
-            color: "#ff79c6",
-            name: "Pink",
-            vibrant: true
-          },
-          {
-            color: "#ff5555",
-            name: "Red",
-            vibrant: false
-          },
-          {
-            color: "#bd93f9",
-            name: "Purple",
-            vibrant: true
-          },
-          {
-            color: "#ffb86c",
-            name: "Orange",
-            vibrant: true
-          },
-          {
-            color: "#8be9fd",
-            name: "Cyan",
-            vibrant: true
-          },
-          {
-            color: "#57b5f9",
-            name: "Blue",
-            vibrant: false
-          }
-        ],
-
-        settings: {
-          THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
-          THEME_COLOR: "",
-          THEME_TAB_COLOR: "",
-          THEME_COLOR_VIBRANT: true,
-
-          FRAME_COLORS_ENABLED:
-            this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
-          PROXY_ENABLED:
-            this.$store.state.postwoman.settings.PROXY_ENABLED || false,
-          PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "",
-          PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
+  data() {
+    return {
+      // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
+      //        You should copy the existing light theme as a template and then just
+      //        set the relevant values.
+      themes: [
+        {
+          color: "#252628",
+          name: "Kinda Dark",
+          class: ""
+        },
+        {
+          color: "#ffffff",
+          name: "Clearly White",
+          vibrant: true,
+          class: "light"
+        },
+        {
+          color: "#000000",
+          name: "Just Black",
+          class: "black"
+        },
+        {
+          color: "var(--bg-color)",
+          name: "Auto (system)",
+          vibrant: window.matchMedia("(prefers-color-scheme: light)").matches,
+          class: "auto"
         }
-      };
-    },
-
-    watch: {
-      proxySettings: {
-        deep: true,
-        handler(value) {
-          this.applySetting("PROXY_URL", value.url);
-          this.applySetting("PROXY_KEY", value.key);
+      ],
+      // You can define a new color here! It will simply store the color value.
+      colors: [
+        // If the color is vibrant, black is used as the active foreground color.
+        {
+          color: "#50fa7b",
+          name: "Green",
+          vibrant: true
+        },
+        {
+          color: "#f1fa8c",
+          name: "Yellow",
+          vibrant: true
+        },
+        {
+          color: "#ff79c6",
+          name: "Pink",
+          vibrant: true
+        },
+        {
+          color: "#ff5555",
+          name: "Red",
+          vibrant: false
+        },
+        {
+          color: "#bd93f9",
+          name: "Purple",
+          vibrant: true
+        },
+        {
+          color: "#ffb86c",
+          name: "Orange",
+          vibrant: true
+        },
+        {
+          color: "#8be9fd",
+          name: "Cyan",
+          vibrant: true
+        },
+        {
+          color: "#57b5f9",
+          name: "Blue",
+          vibrant: false
         }
+      ],
+
+      settings: {
+        THEME_CLASS: this.$store.state.postwoman.settings.THEME_CLASS || "",
+        THEME_COLOR: "",
+        THEME_TAB_COLOR: "",
+        THEME_COLOR_VIBRANT: true,
+
+        FRAME_COLORS_ENABLED:
+          this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false,
+        PROXY_ENABLED:
+          this.$store.state.postwoman.settings.PROXY_ENABLED || false,
+        PROXY_URL: this.$store.state.postwoman.settings.PROXY_URL || "",
+        PROXY_KEY: this.$store.state.postwoman.settings.PROXY_KEY || ""
       }
-    },
+    };
+  },
 
-    methods: {
-      applyTheme(name, color) {
-        this.applySetting("THEME_CLASS", name);
-        document.querySelector('meta[name=theme-color]').setAttribute('content', color)
-        this.applySetting("THEME_TAB_COLOR", color);
-        document.documentElement.className = name;
-        let imgGitHub = document.getElementById("imgGitHub");
-        imgGitHub.style["filter"] = "";
-        imgGitHub.style["webkit-filter"] = "invert(100%)";
-        if (name.includes("light")) {
-          imgGitHub.style["filter"] = "invert(100%)";
-          imgGitHub.style["webkit-filter"] = "invert(100%)";
-        }
-      },
-      setActiveColor(color, vibrant) {
-        // By default, the color is vibrant.
-        if (vibrant == null) vibrant = true;
-        document.documentElement.style.setProperty("--ac-color", color);
-        document.documentElement.style.setProperty(
-          "--act-color",
-          vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
-        );
-        this.applySetting("THEME_COLOR", color.toUpperCase());
-        this.applySetting("THEME_COLOR_VIBRANT", vibrant);
-      },
-      getActiveColor() {
-        // This strips extra spaces and # signs from the strings.
-        const strip = str => str.replace(/#/g, "").replace(/ /g, "");
-        return `#${strip(
-          window
-            .getComputedStyle(document.documentElement)
-            .getPropertyValue("--ac-color")
-        ).toUpperCase()}`;
-      },
-      applySetting(key, value) {
-        this.settings[key] = value;
-        this.$store.commit("postwoman/applySetting", [key, value]);
-      },
-      toggleSetting(key) {
-        this.settings[key] = !this.settings[key];
-        this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
-        this.$router.replace('/settings', {
-            force: true
-        });
-      }
-    },
-    beforeMount() {
-      this.settings.THEME_COLOR = this.getActiveColor();
-    },
-
-    computed: {
-      proxySettings() {
-        return {
-          url: this.settings.PROXY_URL,
-          key: this.settings.PROXY_KEY
-        };
+  watch: {
+    proxySettings: {
+      deep: true,
+      handler(value) {
+        this.applySetting("PROXY_URL", value.url);
+        this.applySetting("PROXY_KEY", value.key);
       }
     }
-  };
+  },
+
+  methods: {
+    applyTheme(name, color) {
+      this.applySetting("THEME_CLASS", name);
+      document
+        .querySelector("meta[name=theme-color]")
+        .setAttribute("content", color);
+      this.applySetting("THEME_TAB_COLOR", color);
+      document.documentElement.className = name;
+      let imgGitHub = document.getElementById("imgGitHub");
+      imgGitHub.style["filter"] = "";
+      imgGitHub.style["webkit-filter"] = "invert(100%)";
+      if (name.includes("light")) {
+        imgGitHub.style["filter"] = "invert(100%)";
+        imgGitHub.style["webkit-filter"] = "invert(100%)";
+      }
+    },
+    setActiveColor(color, vibrant) {
+      // By default, the color is vibrant.
+      if (vibrant == null) vibrant = true;
+      document.documentElement.style.setProperty("--ac-color", color);
+      document.documentElement.style.setProperty(
+        "--act-color",
+        vibrant ? "rgb(37, 38, 40)" : "#f8f8f2"
+      );
+      this.applySetting("THEME_COLOR", color.toUpperCase());
+      this.applySetting("THEME_COLOR_VIBRANT", vibrant);
+    },
+    getActiveColor() {
+      // This strips extra spaces and # signs from the strings.
+      const strip = str => str.replace(/#/g, "").replace(/ /g, "");
+      return `#${strip(
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("--ac-color")
+      ).toUpperCase()}`;
+    },
+    applySetting(key, value) {
+      this.settings[key] = value;
+      this.$store.commit("postwoman/applySetting", [key, value]);
+    },
+    toggleSetting(key) {
+      this.settings[key] = !this.settings[key];
+      this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
+      this.$router.replace("/settings", {
+        force: true
+      });
+    }
+  },
+  beforeMount() {
+    this.settings.THEME_COLOR = this.getActiveColor();
+  },
+
+  computed: {
+    proxySettings() {
+      return {
+        url: this.settings.PROXY_URL,
+        key: this.settings.PROXY_KEY
+      };
+    }
+  }
+};
 </script>
diff --git a/pages/websocket.vue b/pages/websocket.vue
index 81408273f..9a56a015e 100644
--- a/pages/websocket.vue
+++ b/pages/websocket.vue
@@ -25,14 +25,9 @@
       </ul>
     </pw-section>
 
-    <br>
+    <br />
 
-    <pw-section
-      class="purple"
-      label="Communication"
-      id="response"
-      ref="response"
-    >
+    <pw-section class="purple" label="Communication" id="response" ref="response">
       <ul>
         <li>
           <label for="log">Log</label>
@@ -74,176 +69,176 @@
   </div>
 </template>
 <style lang="scss">
-  div.log {
-    margin: 4px;
-    padding: 8px 16px;
-    width: calc(100% - 8px);
-    border-radius: 8px;
-    background-color: var(--bg-dark-color);
-    color: var(--fg-color);
-    height: 256px;
-    overflow: auto;
+div.log {
+  margin: 4px;
+  padding: 8px 16px;
+  width: calc(100% - 8px);
+  border-radius: 8px;
+  background-color: var(--bg-dark-color);
+  color: var(--fg-color);
+  height: 256px;
+  overflow: auto;
 
-    &,
-    span {
-      font-size: 18px;
-      font-family: "Roboto Mono", monospace;
-    }
-
-    span {
-      display: block;
-      white-space: pre-wrap;
-    }
+  &,
+  span {
+    font-size: 18px;
+    font-family: "Roboto Mono", monospace;
   }
+
+  span {
+    display: block;
+    white-space: pre-wrap;
+  }
+}
 </style>
 
 <script>
-  import section from "../components/section";
-  export default {
-    components: {
-      "pw-section": section
-    },
-    data() {
-      return {
-        connectionState: false,
-        url: "wss://echo.websocket.org",
-        socket: null,
-        communication: {
-          log: null,
-          input: ""
-        }
-      };
-    },
-    computed: {
-      toggleConnectionVerb() {
-        return !this.connectionState ? "Connect" : "Disconnect";
-      },
-      urlValid() {
-        const pattern = new RegExp(
-          "^(wss?:\\/\\/)?" +
-            "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
-            "((\\d{1,3}\\.){3}\\d{1,3}))" +
-            "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
-            "(\\?[;&a-z\\d%_.~+=-]*)?" +
-            "(\\#[-a-z\\d_]*)?$",
-          "i"
-        );
-        return pattern.test(this.url);
+import section from "../components/section";
+export default {
+  components: {
+    "pw-section": section
+  },
+  data() {
+    return {
+      connectionState: false,
+      url: "wss://echo.websocket.org",
+      socket: null,
+      communication: {
+        log: null,
+        input: ""
       }
+    };
+  },
+  computed: {
+    toggleConnectionVerb() {
+      return !this.connectionState ? "Connect" : "Disconnect";
     },
-    methods: {
-      toggleConnection() {
-        // If it is connecting:
-        if (!this.connectionState) return this.connect();
-        // Otherwise, it's disconnecting.
-        else return this.disconnect();
-      },
-      connect() {
-        this.communication.log = [
-          {
-            payload: `Connecting to ${this.url}...`,
-            source: "info",
-            color: "var(--ac-color)"
-          }
-        ];
-        try {
-          this.socket = new WebSocket(this.url);
-          this.socket.onopen = event => {
-            this.connectionState = true;
-            this.communication.log = [
-              {
-                payload: `Connected to ${this.url}.`,
-                source: "info",
-                color: "var(--ac-color)",
-                ts: new Date().toLocaleTimeString()
-              }
-            ];
-            this.$toast.success("Connected", {
-              icon: "sync"
-            });
-          };
-          this.socket.onerror = event => {
-            this.handleError();
-          };
-          this.socket.onclose = event => {
-            this.connectionState = false;
-            this.communication.log.push({
-              payload: `Disconnected from ${this.url}.`,
-              source: "info",
-              color: "#ff5555",
-              ts: new Date().toLocaleTimeString()
-            });
-            this.$toast.error("Disconnected", {
-              icon: "sync_disabled"
-            });
-          };
-          this.socket.onmessage = event => {
-            this.communication.log.push({
-              payload: event.data,
-              source: "server",
-              ts: new Date().toLocaleTimeString()
-            });
-          };
-        } catch (ex) {
-          this.handleError(ex);
-          this.$toast.error("Something went wrong!", {
-            icon: "error"
-          });
-        }
-      },
-      disconnect() {
-        if (this.socket != null) this.socket.close();
-      },
-      handleError(error) {
-        this.disconnect();
-        this.connectionState = false;
-        this.communication.log.push({
-          payload: `An error has occurred.`,
+    urlValid() {
+      const pattern = new RegExp(
+        "^(wss?:\\/\\/)?" +
+          "((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" +
+          "((\\d{1,3}\\.){3}\\d{1,3}))" +
+          "(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" +
+          "(\\?[;&a-z\\d%_.~+=-]*)?" +
+          "(\\#[-a-z\\d_]*)?$",
+        "i"
+      );
+      return pattern.test(this.url);
+    }
+  },
+  methods: {
+    toggleConnection() {
+      // If it is connecting:
+      if (!this.connectionState) return this.connect();
+      // Otherwise, it's disconnecting.
+      else return this.disconnect();
+    },
+    connect() {
+      this.communication.log = [
+        {
+          payload: `Connecting to ${this.url}...`,
           source: "info",
-          color: "#ff5555",
-          ts: new Date().toLocaleTimeString()
-        });
-        if (error != null)
+          color: "var(--ac-color)"
+        }
+      ];
+      try {
+        this.socket = new WebSocket(this.url);
+        this.socket.onopen = event => {
+          this.connectionState = true;
+          this.communication.log = [
+            {
+              payload: `Connected to ${this.url}.`,
+              source: "info",
+              color: "var(--ac-color)",
+              ts: new Date().toLocaleTimeString()
+            }
+          ];
+          this.$toast.success("Connected", {
+            icon: "sync"
+          });
+        };
+        this.socket.onerror = event => {
+          this.handleError();
+        };
+        this.socket.onclose = event => {
+          this.connectionState = false;
           this.communication.log.push({
-            payload: error,
+            payload: `Disconnected from ${this.url}.`,
             source: "info",
             color: "#ff5555",
             ts: new Date().toLocaleTimeString()
           });
-      },
-      sendMessage() {
-        const message = this.communication.input;
-        this.socket.send(message);
-        this.communication.log.push({
-          payload: message,
-          source: "client",
-          ts: new Date().toLocaleTimeString()
-        });
-        this.communication.input = "";
-      },
-      collapse({ target }) {
-        const el = target.parentNode.className;
-        document.getElementsByClassName(el)[0].classList.toggle("hidden");
-      },
-      getSourcePrefix(source) {
-        const sourceEmojis = {
-          // Source used for info messages.
-          info: "\tℹ️ [INFO]:\t",
-          // Source used for client to server messages.
-          client: "\t👽 [SENT]:\t",
-          // Source used for server to client messages.
-          server: "\t📥 [RECEIVED]:\t"
+          this.$toast.error("Disconnected", {
+            icon: "sync_disabled"
+          });
         };
-        if (Object.keys(sourceEmojis).includes(source))
-          return sourceEmojis[source];
-        return "";
+        this.socket.onmessage = event => {
+          this.communication.log.push({
+            payload: event.data,
+            source: "server",
+            ts: new Date().toLocaleTimeString()
+          });
+        };
+      } catch (ex) {
+        this.handleError(ex);
+        this.$toast.error("Something went wrong!", {
+          icon: "error"
+        });
       }
     },
-    updated: function() {
-      this.$nextTick(function() {
-        var divLog = document.getElementById("log");
-        divLog.scrollBy(0, divLog.scrollHeight + 100);
+    disconnect() {
+      if (this.socket != null) this.socket.close();
+    },
+    handleError(error) {
+      this.disconnect();
+      this.connectionState = false;
+      this.communication.log.push({
+        payload: `An error has occurred.`,
+        source: "info",
+        color: "#ff5555",
+        ts: new Date().toLocaleTimeString()
       });
+      if (error != null)
+        this.communication.log.push({
+          payload: error,
+          source: "info",
+          color: "#ff5555",
+          ts: new Date().toLocaleTimeString()
+        });
+    },
+    sendMessage() {
+      const message = this.communication.input;
+      this.socket.send(message);
+      this.communication.log.push({
+        payload: message,
+        source: "client",
+        ts: new Date().toLocaleTimeString()
+      });
+      this.communication.input = "";
+    },
+    collapse({ target }) {
+      const el = target.parentNode.className;
+      document.getElementsByClassName(el)[0].classList.toggle("hidden");
+    },
+    getSourcePrefix(source) {
+      const sourceEmojis = {
+        // Source used for info messages.
+        info: "\tℹ️ [INFO]:\t",
+        // Source used for client to server messages.
+        client: "\t👽 [SENT]:\t",
+        // Source used for server to client messages.
+        server: "\t📥 [RECEIVED]:\t"
+      };
+      if (Object.keys(sourceEmojis).includes(source))
+        return sourceEmojis[source];
+      return "";
     }
-  };
+  },
+  updated: function() {
+    this.$nextTick(function() {
+      var divLog = document.getElementById("log");
+      divLog.scrollBy(0, divLog.scrollHeight + 100);
+    });
+  }
+};
 </script>
diff --git a/store/index.js b/store/index.js
index 16b7bef20..9bde5edf3 100644
--- a/store/index.js
+++ b/store/index.js
@@ -9,7 +9,9 @@ export default {
     const vuexLocalStorage = new VuexPersist({
       key: 'vuex',
       storage: window.localStorage,
-      reducer: ({ ...request }) => ({
+      reducer: ({
+        ...request
+      }) => ({
         ...request
       })
     })
diff --git a/store/mutations.js b/store/mutations.js
index 7cf2b7dc7..37473e4b9 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -1,5 +1,5 @@
 export default {
-  setState(state, object){
+  setState(state, object) {
     state.request[object.attribute] = object.value
   },