diff --git a/README.md b/README.md
index 65bd7da6c..b38f0ae50 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
   </p>
   <p>
 
-[![Travis Build Status](https://img.shields.io/travis/com/hoppscotch/hoppscotch/master?logo=Travis)](https://travis-ci.com/hoppscotch/hoppscotch) [![GitHub release](https://img.shields.io/github/release/hoppscotch/hoppscotch/all?logo=GitHub)](https://github.com/hoppscotch/hoppscotch/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fhoppscotch.io&logo=postwoman)](https://hoppscotch.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)](CONTRIBUTING.md) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/hoppscotch?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/hoppscotch) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/hoppscotch_app) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fhoppscotch.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fhoppscotch.io&text=%F0%9F%91%BD%20hoppscotch%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520hoppscotch%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fhoppscotch.io%26hashtags%3Dhoppscotch%26via%3Dliyasthomas&via=liyasthomas&hashtags=hoppscotch)
+[![Travis Build Status](https://img.shields.io/travis/com/hoppscotch/hoppscotch/master?logo=Travis)](https://travis-ci.com/hoppscotch/hoppscotch) [![GitHub release](https://img.shields.io/github/release/hoppscotch/hoppscotch/all?logo=GitHub)](https://github.com/hoppscotch/hoppscotch/releases/latest) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fhoppscotch.io&logo=postwoman)](https://hoppscotch.io) [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen)](CONTRIBUTING.md) [![Financial Contributors on Open Collective](https://img.shields.io/opencollective/all/hoppscotch?logo=Open-Collective&label=financial+contributors)](https://opencollective.com/hoppscotch) [![Donate on PayPal](https://img.shields.io/badge/support-PayPal-blue?logo=PayPal)](https://www.paypal.me/liyascthomas) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-blueviolet?logo=Telegram)](https://t.me/hoppscotch) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-violet?logo=discord)](https://discord.gg/GAMWxmR) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fhoppscotch.io%2F)](https://twitter.com/intent/tweet?url=https%3A%2F%2Fhoppscotch.io&text=%F0%9F%91%BD%20hoppscotch%20%E2%80%A2%20API%20request%20builder%20-%20Helps%20you%20create%20your%20requests%20faster%2C%20saving%20you%20precious%20time%20on%20your%20development&original_referer=https%3A%2F%2Ftwitter.com%2Fshare%3Ftext%3D%25F0%259F%2591%25BD%2520hoppscotch%2520%25E2%2580%25A2%2520API%2520request%2520builder%2520-%2520Helps%2520you%2520create%2520your%2520requests%2520faster%2C%2520saving%2520you%2520precious%2520time%2520on%2520your%2520development%26url%3Dhttps%3A%2F%2Fhoppscotch.io%26hashtags%3Dhoppscotch%26via%3Dliyasthomas&via=liyasthomas&hashtags=hoppscotch)
 
   </p>
   <p>
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 17533a34e..c09634527 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -383,12 +383,16 @@ section:target {
 
 input[type="file"],
 input[type="radio"],
-.hide-on-large-screen,
 #installPWA,
 .hidden {
   display: none;
 }
 
+.show-on-large-screen {
+  display: flex;
+  flex: 1;
+}
+
 .method,
 kbd,
 select,
@@ -574,15 +578,6 @@ ol li {
   }
 }
 
-.show-on-small-screen {
-  display: flex;
-}
-
-.show-on-large-screen {
-  display: flex;
-  flex: 1;
-}
-
 .info-response {
   color: #ffeb3b;
 }
@@ -726,11 +721,6 @@ section {
     display: none;
   }
 
-  .hide-on-large-screen,
-  .show-on-small-screen {
-    display: inline-flex;
-  }
-
   .sticky-inner {
     position: relative;
     width: 100%;
diff --git a/components/collections/addCollection.vue b/components/collections/add-collection.vue
similarity index 93%
rename from components/collections/addCollection.vue
rename to components/collections/add-collection.vue
index 7a8df1b77..f77490a38 100644
--- a/components/collections/addCollection.vue
+++ b/components/collections/add-collection.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,14 +44,15 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       name: undefined,
diff --git a/components/collections/addFolder.vue b/components/collections/add-folder.vue
similarity index 93%
rename from components/collections/addFolder.vue
rename to components/collections/add-folder.vue
index 08bb8822b..ec4365b7e 100644
--- a/components/collections/addFolder.vue
+++ b/components/collections/add-folder.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,16 +44,17 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     collection: Object,
     collectionIndex: Number,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       name: undefined,
diff --git a/components/collections/collection.vue b/components/collections/collection.vue
index 85165f0cc..195ee0784 100644
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -4,7 +4,7 @@
       <button class="icon" @click="toggleShowChildren">
         <i class="material-icons" v-show="!showChildren">arrow_right</i>
         <i class="material-icons" v-show="showChildren">arrow_drop_down</i>
-        <i class="material-icons">folder</i>
+        <folderIcon class="material-icons" />
         <span>{{ collection.name }}</span>
       </button>
       <div>
@@ -35,7 +35,7 @@
             </div>
             <div>
               <button class="icon" @click="removeCollection" v-close-popover>
-                <i class="material-icons">delete</i>
+                <deleteIcon class="material-icons" />
                 <span>{{ $t("delete") }}</span>
               </button>
             </div>
@@ -98,12 +98,11 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import folderIcon from "~/static/icons/folder-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: {
-    folder: () => import("./folder"),
-    request: () => import("./request"),
-  },
+  components: { folderIcon, deleteIcon },
   props: {
     collectionIndex: Number,
     collection: Object,
@@ -127,11 +126,11 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      if (!confirm( this.$t("are_you_sure_remove_collection") )) return
+      if (!confirm(this.$t("are_you_sure_remove_collection"))) return
       this.$store.commit("postwoman/removeCollection", {
         collectionIndex: this.collectionIndex,
       })
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
       this.syncCollections()
diff --git a/components/collections/editCollection.vue b/components/collections/edit-collection.vue
similarity index 94%
rename from components/collections/editCollection.vue
rename to components/collections/edit-collection.vue
index 00bfc6ac1..732fe17b9 100644
--- a/components/collections/editCollection.vue
+++ b/components/collections/edit-collection.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_collection") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,16 +44,17 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     editingCollection: Object,
     editingCollectionIndex: Number,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       name: undefined,
diff --git a/components/collections/editFolder.vue b/components/collections/edit-folder.vue
similarity index 93%
rename from components/collections/editFolder.vue
rename to components/collections/edit-folder.vue
index 7814a6fe6..a3ae25d53 100644
--- a/components/collections/editFolder.vue
+++ b/components/collections/edit-folder.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_folder") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -39,8 +39,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     collection: Object,
@@ -48,9 +52,6 @@ export default {
     folder: Object,
     folderIndex: Number,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       name: undefined,
diff --git a/components/collections/editRequest.vue b/components/collections/edit-request.vue
similarity index 97%
rename from components/collections/editRequest.vue
rename to components/collections/edit-request.vue
index 39453d123..36d67bb00 100644
--- a/components/collections/editRequest.vue
+++ b/components/collections/edit-request.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_request") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -70,8 +70,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     collectionIndex: Number,
@@ -79,9 +83,6 @@ export default {
     request: Object,
     requestIndex: Number,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       requestUpdateData: {
diff --git a/components/collections/folder.vue b/components/collections/folder.vue
index 777d403d8..5706ea941 100644
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -22,7 +22,7 @@
           </div>
           <div>
             <button class="icon" @click="removeFolder" v-close-popover>
-              <i class="material-icons">delete</i>
+              <deleteIcon class="material-icons" />
               <span>{{ $t("delete") }}</span>
             </button>
           </div>
@@ -72,17 +72,16 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   props: {
     folder: Object,
     collectionIndex: Number,
     folderIndex: Number,
     doc: Boolean,
   },
-  components: {
-    request: () => import("./request"),
-  },
   data() {
     return {
       showChildren: false,
@@ -103,13 +102,13 @@ export default {
       this.$store.commit("postwoman/selectRequest", { request })
     },
     removeFolder() {
-      if (!confirm( this.$t("are_you_sure_remove_folder"))) return
+      if (!confirm(this.$t("are_you_sure_remove_folder"))) return
       this.$store.commit("postwoman/removeFolder", {
         collectionIndex: this.collectionIndex,
         folderIndex: this.folderIndex,
       })
       this.syncCollections()
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
     },
diff --git a/components/collections/importExportCollections.vue b/components/collections/import-export-collections.vue
similarity index 98%
rename from components/collections/importExportCollections.vue
rename to components/collections/import-export-collections.vue
index e1b625151..d68d8c618 100644
--- a/components/collections/importExportCollections.vue
+++ b/components/collections/import-export-collections.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -77,8 +77,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   data() {
     return {
       fb,
@@ -87,9 +91,6 @@ export default {
   props: {
     show: Boolean,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   computed: {
     collectionJson() {
       return JSON.stringify(this.$store.state.postwoman.collections, null, 2)
diff --git a/components/collections/index.vue b/components/collections/index.vue
index aeb8e0ac0..29823457d 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -5,20 +5,20 @@ TODO:
 
 <template>
   <pw-section class="yellow" :label="$t('collections')" ref="collections">
-    <addCollection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
-    <editCollection
+    <add-collection :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <edit-collection
       :show="showModalEdit"
       :editingCollection="editingCollection"
       :editingCollectionIndex="editingCollectionIndex"
       @hide-modal="displayModalEdit(false)"
     />
-    <addFolder
+    <add-folder
       :show="showModalAddFolder"
       :collection="editingCollection"
       :collectionIndex="editingCollectionIndex"
       @hide-modal="displayModalAddFolder(false)"
     />
-    <editFolder
+    <edit-folder
       :show="showModalEditFolder"
       :collection="editingCollection"
       :collectionIndex="editingCollectionIndex"
@@ -26,7 +26,7 @@ TODO:
       :folderIndex="editingFolderIndex"
       @hide-modal="displayModalEditFolder(false)"
     />
-    <editRequest
+    <edit-request
       :show="showModalEditRequest"
       :collectionIndex="editingCollectionIndex"
       :folderIndex="editingFolderIndex"
@@ -34,7 +34,7 @@ TODO:
       :requestIndex="editingRequestIndex"
       @hide-modal="displayModalEditRequest(false)"
     />
-    <importExportCollections
+    <import-export-collections
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
@@ -95,20 +95,9 @@ ul {
 </style>
 
 <script>
-import collection from "./collection"
 import { fb } from "~/helpers/fb"
 
 export default {
-  components: {
-    collection,
-    "pw-section": () => import("../layout/section"),
-    addCollection: () => import("./addCollection"),
-    addFolder: () => import("./addFolder"),
-    editCollection: () => import("./editCollection"),
-    editFolder: () => import("./editFolder"),
-    editRequest: () => import("./editRequest"),
-    importExportCollections: () => import("./importExportCollections"),
-  },
   props: {
     doc: Boolean,
   },
diff --git a/components/collections/request.vue b/components/collections/request.vue
index 1e502a3f9..8d987048b 100644
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -23,7 +23,7 @@
         </div>
         <div>
           <button class="icon" @click="removeRequest" v-close-popover>
-            <i class="material-icons">delete</i>
+            <deleteIcon class="material-icons" />
             <span>{{ $t("delete") }}</span>
           </button>
         </div>
@@ -47,8 +47,10 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   props: {
     request: Object,
     collectionIndex: Number,
@@ -68,13 +70,13 @@ export default {
       this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
-      if (!confirm( this.$t("are_you_sure_remove_request"))) return
+      if (!confirm(this.$t("are_you_sure_remove_request"))) return
       this.$store.commit("postwoman/removeRequest", {
         collectionIndex: this.collectionIndex,
         folderIndex: this.folderIndex,
         requestIndex: this.requestIndex,
       })
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
       this.syncCollections()
diff --git a/components/collections/saveRequestAs.vue b/components/collections/save-request-as.vue
similarity index 97%
rename from components/collections/saveRequestAs.vue
rename to components/collections/save-request-as.vue
index 5eecdb2a7..a53169a27 100644
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/save-request-as.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("save_request_as") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -79,15 +79,16 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
     editingRequest: Object,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       defaultRequestName: "My Request",
diff --git a/components/environments/addEnvironment.vue b/components/environments/add-environment.vue
similarity index 93%
rename from components/environments/addEnvironment.vue
rename to components/environments/add-environment.vue
index b554fbd99..6f3da22d8 100644
--- a/components/environments/addEnvironment.vue
+++ b/components/environments/add-environment.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("new_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -44,14 +44,15 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   props: {
     show: Boolean,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       name: undefined,
diff --git a/components/environments/editEnvironment.vue b/components/environments/edit-environment.vue
similarity index 95%
rename from components/environments/editEnvironment.vue
rename to components/environments/edit-environment.vue
index 7a685111d..3c8d440b3 100644
--- a/components/environments/editEnvironment.vue
+++ b/components/environments/edit-environment.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("edit_environment") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -75,7 +75,7 @@
               v-tooltip.bottom="$t('delete')"
               id="variable"
             >
-              <i class="material-icons">delete</i>
+              <deleteIcon class="material-icons" />
             </button>
           </li>
         </div>
@@ -107,16 +107,19 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+    deleteIcon,
+  },
   props: {
     show: Boolean,
     editingEnvironment: Object,
     editingEnvironmentIndex: Number,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   data() {
     return {
       name: undefined,
diff --git a/components/environments/environment.vue b/components/environments/environment.vue
index 1ddb04252..0fb172695 100644
--- a/components/environments/environment.vue
+++ b/components/environments/environment.vue
@@ -23,7 +23,7 @@
         </div>
         <div>
           <button class="icon" @click="removeEnvironment" v-close-popover>
-            <i class="material-icons">delete</i>
+            <deleteIcon class="material-icons" />
             <span>{{ $t("delete") }}</span>
           </button>
         </div>
@@ -47,8 +47,10 @@ ul li {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   props: {
     environment: Object,
     environmentIndex: Number,
@@ -64,7 +66,7 @@ export default {
     removeEnvironment() {
       if (!confirm(this.$t("are_you_sure_remove_environment"))) return
       this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
-	  this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("deleted"), {
         icon: "delete",
       })
       this.syncEnvironments()
diff --git a/components/environments/importExportEnvironment.vue b/components/environments/import-export-environment.vue
similarity index 97%
rename from components/environments/importExportEnvironment.vue
rename to components/environments/import-export-environment.vue
index cd6ef6d5b..1a04d9eef 100644
--- a/components/environments/importExportEnvironment.vue
+++ b/components/environments/import-export-environment.vue
@@ -7,7 +7,7 @@
             <h3 class="title">{{ $t("import_export") }} {{ $t("environments") }}</h3>
             <div>
               <button class="icon" @click="hideModal">
-                <i class="material-icons">close</i>
+                <closeIcon class="material-icons" />
               </button>
             </div>
           </div>
@@ -77,8 +77,12 @@
 
 <script>
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
+  components: {
+    closeIcon,
+  },
   data() {
     return {
       fb,
@@ -87,9 +91,6 @@ export default {
   props: {
     show: Boolean,
   },
-  components: {
-    modal: () => import("~/components/ui/modal"),
-  },
   computed: {
     environmentJson() {
       return JSON.stringify(this.$store.state.postwoman.environments, null, 2)
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 1c59610f0..2b0adbfa3 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -1,13 +1,13 @@
 <template>
   <pw-section class="green" icon="history" :label="$t('environments')" ref="environments">
-    <addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
-    <editEnvironment
+    <add-environment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <edit-environment
       :show="showModalEdit"
       :editingEnvironment="editingEnvironment"
       :editingEnvironmentIndex="editingEnvironmentIndex"
       @hide-modal="displayModalEdit(false)"
     />
-    <importExportEnvironment
+    <import-export-environment
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
@@ -54,17 +54,9 @@ ul {
 </style>
 
 <script>
-import environment from "./environment"
 import { fb } from "~/helpers/fb"
 
 export default {
-  components: {
-    environment,
-    "pw-section": () => import("../layout/section"),
-    addEnvironment: () => import("./addEnvironment"),
-    editEnvironment: () => import("./editEnvironment"),
-    importExportEnvironment: () => import("./importExportEnvironment"),
-  },
   data() {
     return {
       showModalImportExport: false,
diff --git a/components/firebase/feeds.vue b/components/firebase/feeds.vue
index 1bbc3b550..e6a541028 100644
--- a/components/firebase/feeds.vue
+++ b/components/firebase/feeds.vue
@@ -8,7 +8,7 @@
           </label>
         </li>
         <button class="icon" @click="deleteFeed(feed)">
-          <i class="material-icons">delete</i>
+          <deleteIcon class="material-icons" />
         </button>
       </div>
       <div class="show-on-large-screen">
@@ -50,8 +50,10 @@ ol {
 
 <script>
 import { fb } from "~/helpers/fb"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
+  components: { deleteIcon },
   data() {
     return {
       fb,
diff --git a/components/firebase/inputform.vue b/components/firebase/inputform.vue
index 17e8430f0..19b9db363 100644
--- a/components/firebase/inputform.vue
+++ b/components/firebase/inputform.vue
@@ -30,7 +30,7 @@
           value="Save"
           @click="formPost"
         >
-          <i class="material-icons">add</i>
+          <addIcon class="material-icons" />
           <span>Add</span>
         </button>
       </div>
@@ -47,8 +47,10 @@ ol {
 
 <script>
 import { fb } from "~/helpers/fb"
+import addIcon from "~/static/icons/add-24px.svg?inline"
 
 export default {
+  components: { addIcon },
   data() {
     return {
       message: null,
diff --git a/components/firebase/logout.vue b/components/firebase/logout.vue
index 060774f05..3f3d4d54d 100644
--- a/components/firebase/logout.vue
+++ b/components/firebase/logout.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <button class="icon" @click="logout" v-close-popover>
-      <i class="material-icons">exit_to_app</i>
+      <exitToAppIcon class="material-icons" />
       <span>{{ $t("logout") }}</span>
     </button>
   </div>
@@ -10,8 +10,10 @@
 <script>
 import firebase from "firebase/app"
 import { fb } from "~/helpers/fb"
+import exitToAppIcon from "~/static/icons/exit_to_app-24px.svg?inline"
 
 export default {
+  components: { exitToAppIcon },
   data() {
     return {
       fb,
diff --git a/components/graphql/argument.vue b/components/graphql/argument.vue
index a5171b933..6f81c6e0f 100644
--- a/components/graphql/argument.vue
+++ b/components/graphql/argument.vue
@@ -11,13 +11,7 @@
 <style scoped lang="scss"></style>
 
 <script>
-import typelink from "./typelink"
-
 export default {
-  components: {
-    typelink: typelink,
-  },
-
   props: {
     gqlArg: Object,
   },
diff --git a/components/graphql/field.vue b/components/graphql/field.vue
index faee9fe98..0b4502efb 100644
--- a/components/graphql/field.vue
+++ b/components/graphql/field.vue
@@ -50,13 +50,7 @@
 </style>
 
 <script>
-import typelink from "./typelink"
-
 export default {
-  components: {
-    typelink: typelink,
-  },
-
   props: {
     gqlField: Object,
     jumpTypeCallback: Function,
diff --git a/components/graphql/type.vue b/components/graphql/type.vue
index 1d0d91d13..4e153a08b 100644
--- a/components/graphql/type.vue
+++ b/components/graphql/type.vue
@@ -8,7 +8,7 @@
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
-        <gql-field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
+        <field :gqlField="field" :jumpTypeCallback="jumpTypeCallback" />
       </div>
     </div>
   </div>
@@ -32,10 +32,6 @@
 
 <script>
 export default {
-  components: {
-    "gql-field": () => import("./field"),
-  },
-
   props: {
     gqlType: {},
     jumpTypeCallback: Function,
diff --git a/components/layout/history.vue b/components/layout/history.vue
index 778346c81..1eecb7b9b 100644
--- a/components/layout/history.vue
+++ b/components/layout/history.vue
@@ -70,7 +70,7 @@
                   :aria-label="$t('delete')"
                   v-close-popover
                 >
-                  <i class="material-icons">delete</i>
+                  <deleteIcon class="material-icons" />
                   <span>{{ $t("delete") }}</span>
                 </button>
               </div>
@@ -238,7 +238,7 @@
             @click="disableHistoryClearing"
             v-tooltip="$t('no')"
           >
-            <i class="material-icons">close</i>
+            <closeIcon class="material-icons" />
           </button>
         </div>
       </div>
@@ -308,13 +308,16 @@ ol {
 <script>
 import { findStatusGroup } from "~/pages/index"
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 const updateOnLocalStorage = (propertyName, property) =>
   window.localStorage.setItem(propertyName, JSON.stringify(property))
 
 export default {
   components: {
-    "pw-section": () => import("../layout/section"),
+    closeIcon,
+    deleteIcon,
   },
   data() {
     return {
diff --git a/components/layout/footer.vue b/components/layout/pw-footer.vue
similarity index 100%
rename from components/layout/footer.vue
rename to components/layout/pw-footer.vue
diff --git a/components/layout/header.vue b/components/layout/pw-header.vue
similarity index 96%
rename from components/layout/header.vue
rename to components/layout/pw-header.vue
index 97024a3d5..7dcfed28e 100644
--- a/components/layout/header.vue
+++ b/components/layout/pw-header.vue
@@ -3,7 +3,8 @@
     <div class="flex-wrap">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="logo">Hoppscotch</h1>
+          <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
+          <h1 class="logo show-on-small-screen">Hs</h1>
         </nuxt-link>
       </span>
       <span>
@@ -122,7 +123,7 @@
               <h3 class="title">{{ $t("extensions") }}</h3>
               <div>
                 <button class="icon" @click="showExtensions = false">
-                  <i class="material-icons">close</i>
+                  <closeIcon class="material-icons" />
                 </button>
               </div>
             </div>
@@ -182,7 +183,7 @@
               <h3 class="title">{{ $t("shortcuts") }}</h3>
               <div>
                 <button class="icon" @click="showShortcuts = false">
-                  <i class="material-icons">close</i>
+                  <closeIcon class="material-icons" />
                 </button>
               </div>
             </div>
@@ -217,7 +218,7 @@
               <h3 class="title">{{ $t("support_us") }}</h3>
               <div>
                 <button class="icon" @click="showSupport = false">
-                  <i class="material-icons">close</i>
+                  <closeIcon class="material-icons" />
                 </button>
               </div>
             </div>
@@ -233,6 +234,8 @@
 </template>
 
 <style scoped lang="scss">
+$responsiveWidth: 768px;
+
 @keyframes slideIn {
   0% {
     opacity: 0;
@@ -257,6 +260,16 @@
     color: var(--ac-color);
   }
 }
+
+.show-on-small-screen {
+  display: none;
+}
+
+@media (max-width: $responsiveWidth) {
+  .show-on-small-screen {
+    display: inline-flex;
+  }
+}
 </style>
 
 <script>
@@ -269,15 +282,12 @@ import {
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import firebase from "firebase/app"
 import { fb } from "~/helpers/fb"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
 
 export default {
   components: {
-    modal: () => import("../ui/modal"),
-    login: () => import("../firebase/login"),
-    logout: () => import("../firebase/logout"),
-    contributors: () => import("./contributors"),
+    closeIcon,
   },
-
   data() {
     return {
       // Once the PWA code is initialized, this holds a method
diff --git a/components/layout/section.vue b/components/layout/pw-section.vue
similarity index 100%
rename from components/layout/section.vue
rename to components/layout/pw-section.vue
diff --git a/components/layout/sidenav.vue b/components/layout/sidenav.vue
index f541a1c8d..0404cc22f 100644
--- a/components/layout/sidenav.vue
+++ b/components/layout/sidenav.vue
@@ -64,7 +64,7 @@
         <ul>
           <li>
             <a href="#request" v-tooltip.right="$t('request')">
-              <i class="material-icons">cloud_upload</i>
+              <cloudUploadIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -85,7 +85,7 @@
         <ul>
           <li>
             <a href="#request" v-tooltip.right="$t('request')">
-              <i class="material-icons">cloud_upload</i>
+              <cloudUploadIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -111,7 +111,7 @@
           </li>
           <li>
             <a href="#query" v-tooltip.right="$t('query')">
-              <i class="material-icons">cloud_upload</i>
+              <cloudUploadIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -127,7 +127,7 @@
         <ul>
           <li>
             <a href="#import" v-tooltip.right="$t('import')">
-              <i class="material-icons">folder</i>
+              <folderIcon class="material-icons" />
             </a>
           </li>
           <li>
@@ -306,11 +306,14 @@ nav.secondary-nav {
 </style>
 
 <script>
+import cloudUploadIcon from "~/static/icons/cloud_upload-24px.svg?inline"
+import folderIcon from "~/static/icons/folder-24px.svg?inline"
+
 export default {
   components: {
-    logo: () => import("./logo"),
+    cloudUploadIcon,
+    folderIcon,
   },
-
   methods: {
     linkActive(path) {
       return {
@@ -319,14 +322,12 @@ export default {
       }
     },
   },
-
   mounted() {
     window.addEventListener("scroll", (event) => {
       let mainNavLinks = document.querySelectorAll("nav ul li a")
       let fromTop = window.scrollY
       mainNavLinks.forEach(({ hash, classList }) => {
         let section = document.querySelector(hash)
-
         if (
           section &&
           section.offsetTop <= fromTop &&
@@ -339,11 +340,10 @@ export default {
       })
     })
   },
-
-  watch: {
-    $route() {
-      // this.$toast.clear();
-    },
-  },
+  // watch: {
+  //   $route() {
+  //     // this.$toast.clear();
+  //   },
+  // },
 }
 </script>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 5eb468af0..2c692b2b5 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -50,7 +50,7 @@
         </div>
       </div>
       <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
           :value="responseBodyText"
           :lang="'html'"
           :options="{
@@ -74,13 +74,9 @@
   </ul>
 </template>
 <script>
-import AceEditor from "../../ui/ace-editor"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
-  components: {
-    Editor: AceEditor,
-  },
   mixins: [TextContentRendererMixin],
   props: {
     response: {},
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index ebbba2cb6..477cb6290 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -41,7 +41,7 @@
         <p class="info"><i class="material-icons">error_outline</i> Invalid JSON</p>
       </div>
       <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
           :value="jsonBodyText"
           :lang="'json'"
           :options="{
@@ -60,14 +60,10 @@
 </template>
 
 <script>
-import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
-  components: {
-    Editor: AceEditor,
-  },
   mixins: [TextContentRendererMixin],
   props: {
     response: {},
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 12ab9642d..ca0b31292 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -38,7 +38,7 @@
         </div>
       </div>
       <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
           :value="responseBodyText"
           :lang="'plain_text'"
           :options="{
@@ -56,14 +56,10 @@
   </ul>
 </template>
 <script>
-import AceEditor from "../../ui/ace-editor"
 import { isJSONContentType } from "~/helpers/utils/contenttypes"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
-  components: {
-    Editor: AceEditor,
-  },
   mixins: [TextContentRendererMixin],
   props: {
     response: {},
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 8738027c1..014b7cf61 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -38,7 +38,7 @@
         </div>
       </div>
       <div id="response-details-wrapper">
-        <Editor
+        <ace-editor
           :value="responseBodyText"
           :lang="'xml'"
           :options="{
@@ -56,13 +56,9 @@
   </ul>
 </template>
 <script>
-import AceEditor from "../../ui/ace-editor"
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
 
 export default {
-  components: {
-    Editor: AceEditor,
-  },
   mixins: [TextContentRendererMixin],
   props: {
     response: {},
diff --git a/components/lenses/ResponseBodyRenderer.vue b/components/lenses/response-body-renderer.vue
similarity index 88%
rename from components/lenses/ResponseBodyRenderer.vue
rename to components/lenses/response-body-renderer.vue
index cd57394c0..5f69ff572 100644
--- a/components/lenses/ResponseBodyRenderer.vue
+++ b/components/lenses/response-body-renderer.vue
@@ -26,9 +26,6 @@ import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
 
 export default {
   components: {
-    tabs: () => import("../ui/tabs"),
-    tab: () => import("../ui/tab"),
-    headers: () => import("./headers"),
     // Lens Renderers
     ...getLensRenderers(),
   },
diff --git a/components/realtime/mqtt.vue b/components/realtime/mqtt.vue
index 92fcaa3fd..6373bdc50 100644
--- a/components/realtime/mqtt.vue
+++ b/components/realtime/mqtt.vue
@@ -23,7 +23,7 @@
     <pw-section class="blue" :label="$t('communication')">
       <ul>
         <li>
-          <realtime-log :title="$t('log')" :log="this.log" />
+          <log :title="$t('log')" :log="this.log" />
         </li>
       </ul>
       <ul>
@@ -73,10 +73,6 @@ import Paho from "paho-mqtt"
 import { wsValid } from "~/helpers/utils/valid"
 
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    realtimeLog: () => import("./log"),
-  },
   data: function () {
     return {
       url: "wss://test.mosquitto.org:8081",
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index 9a67c5fd5..322fd9094 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -32,7 +32,7 @@
     <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
       <ul>
         <li>
-          <realtime-log :title="$t('log')" :log="communication.log" />
+          <log :title="$t('log')" :log="communication.log" />
         </li>
       </ul>
       <ul>
@@ -81,10 +81,6 @@ import io from "socket.io-client"
 import wildcard from "socketio-wildcard"
 
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    realtimeLog: () => import("./log"),
-  },
   data() {
     return {
       url: "ws://",
diff --git a/components/realtime/sse.vue b/components/realtime/sse.vue
index e4db04fb9..8a7fb3748 100644
--- a/components/realtime/sse.vue
+++ b/components/realtime/sse.vue
@@ -31,7 +31,7 @@
     <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
       <ul>
         <li>
-          <realtime-log :title="$t('events')" :log="events.log" />
+          <log :title="$t('events')" :log="events.log" />
           <div id="result"></div>
         </li>
       </ul>
@@ -43,10 +43,6 @@
 import { httpValid } from "~/helpers/utils/valid"
 
 export default {
-  components: {
-    "pw-section": () => import("../layout/section"),
-    realtimeLog: () => import("./log"),
-  },
   data() {
     return {
       connectionSSEState: false,
diff --git a/components/realtime/websocket.vue b/components/realtime/websocket.vue
index 1f0a8195e..98f4a5176 100644
--- a/components/realtime/websocket.vue
+++ b/components/realtime/websocket.vue
@@ -32,7 +32,7 @@
     <pw-section class="purple" :label="$t('communication')" id="response" ref="response">
       <ul>
         <li>
-          <realtime-log :title="$t('log')" :log="communication.log" />
+          <log :title="$t('log')" :log="communication.log" />
         </li>
       </ul>
       <ul>
@@ -69,10 +69,6 @@
 import { wsValid } from "~/helpers/utils/valid"
 
 export default {
-  components: {
-    "pw-section": () => import("../layout/section"),
-    realtimeLog: () => import("./log"),
-  },
   data() {
     return {
       connectionState: false,
diff --git a/components/ui/toggle.vue b/components/ui/pw-toggle.vue
similarity index 100%
rename from components/ui/toggle.vue
rename to components/ui/pw-toggle.vue
diff --git a/layouts/default.vue b/layouts/default.vue
index 91f3e7e25..a9d07fbf0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -15,12 +15,6 @@
 
 <script>
 export default {
-  components: {
-    sidenav: () => import("~/components/layout/sidenav"),
-    "pw-header": () => import("~/components/layout/header"),
-    "pw-footer": () => import("~/components/layout/footer"),
-  },
-
   beforeMount() {
     // Load theme settings
     ;(() => {
diff --git a/nuxt.config.js b/nuxt.config.js
index 2894bdcaa..37f5686f4 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -20,6 +20,7 @@ export const options = {
 }
 export default {
   mode: "spa",
+  target: "static",
   /*
    ** Headers of the page
    */
@@ -132,6 +133,8 @@ export default {
     "@nuxtjs/google-analytics",
     // Doc: https://github.com/nuxt-community/gtm-module
     "@nuxtjs/gtm",
+    // Doc: https://github.com/nuxt-community/svg-module
+    "@nuxtjs/svg",
   ],
   /*
    ** Nuxt.js modules
diff --git a/package-lock.json b/package-lock.json
index 3c98009ed..a89563f74 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13654,6 +13654,29 @@
                 "unpipe": "1.0.0"
             }
         },
+        "raw-loader": {
+            "version": "4.0.1",
+            "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.1.tgz",
+            "integrity": "sha512-baolhQBSi3iNh1cglJjA0mYzga+wePk7vdEX//1dTFd+v4TsQlQE0jitJSNF1OIP82rdYulH7otaVmdlDaJ64A==",
+            "dev": true,
+            "requires": {
+                "loader-utils": "^2.0.0",
+                "schema-utils": "^2.6.5"
+            },
+            "dependencies": {
+                "loader-utils": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+                    "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+                    "dev": true,
+                    "requires": {
+                        "big.js": "^5.2.2",
+                        "emojis-list": "^3.0.0",
+                        "json5": "^2.1.2"
+                    }
+                }
+            }
+        },
         "rc9": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/rc9/-/rc9-1.0.0.tgz",
@@ -15342,6 +15365,15 @@
             "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
             "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q="
         },
+        "svg-to-vue": {
+            "version": "0.7.0",
+            "resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.7.0.tgz",
+            "integrity": "sha512-Tg2nMmf3BQorYCAjxbtTkYyWPVSeox5AZUFvfy4MoWK/5tuQlnA/h3LAlTjV3sEvOC5FtUNovRSj3p784l4KOA==",
+            "dev": true,
+            "requires": {
+                "svgo": "^1.3.2"
+            }
+        },
         "svgo": {
             "version": "1.3.2",
             "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -16365,6 +16397,16 @@
                 }
             }
         },
+        "vue-svg-loader": {
+            "version": "0.16.0",
+            "resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.16.0.tgz",
+            "integrity": "sha512-2RtFXlTCYWm8YAEO2qAOZ2SuIF2NvLutB5muc3KDYoZq5ZeCHf8ggzSan3ksbbca7CJ/Aw57ZnDF4B7W/AkGtw==",
+            "dev": true,
+            "requires": {
+                "loader-utils": "^1.2.3",
+                "svg-to-vue": "^0.7.0"
+            }
+        },
         "vue-template-compiler": {
             "version": "2.6.11",
             "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz",
diff --git a/package.json b/package.json
index bdc9d0a79..76ad1ccad 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "@vue/test-utils": "^1.0.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^26.3.0",
+    "@nuxtjs/svg": "^0.1.11",
     "eslint": "^7.7.0",
     "eslint-plugin-vue": "^6.2.2",
     "husky": "^4.2.5",
diff --git a/pages/doc.vue b/pages/doc.vue
index 6cd1f8b1a..2b7779aed 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -19,7 +19,7 @@
                     @click="$refs.collectionUpload.click()"
                     v-tooltip="$t('json')"
                   >
-                    <i class="material-icons">folder</i>
+                    <folderIcon class="material-icons" />
                     <span>{{ $t("import_collections") }}</span>
                   </button>
                 </label>
@@ -43,7 +43,7 @@
           </ul>
           <ul>
             <li>
-              <Editor
+              <ace-editor
                 v-model="collectionJSON"
                 :lang="'json'"
                 :lint="false"
@@ -75,7 +75,7 @@
           <div>
             <span class="collection" v-for="(collection, index) in this.items" :key="index">
               <h2>
-                <i class="material-icons">folder</i>
+                <folderIcon class="material-icons" />
                 {{ collection.name || $t("none") }}
               </h2>
               <span class="folder" v-for="(folder, index) in collection.folders" :key="index">
@@ -326,14 +326,10 @@
 </style>
 
 <script>
-import AceEditor from "~/components/ui/ace-editor"
+import folderIcon from "~/static/icons/folder-24px.svg?inline"
 
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    Editor: AceEditor,
-    collections: () => import("~/components/collections"),
-  },
+  components: { folderIcon },
   data() {
     return {
       collectionJSON: "[]",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index b7d6d8711..93645d106 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -77,7 +77,7 @@
                   v-tooltip.bottom="$t('delete')"
                   id="header"
                 >
-                  <i class="material-icons">delete</i>
+                  <deleteIcon class="material-icons" />
                 </button>
               </li>
             </div>
@@ -126,7 +126,7 @@
               </button>
             </div>
           </div>
-          <Editor
+          <ace-editor
             v-if="schema"
             :value="schema"
             :lang="'graphqlschema'"
@@ -179,7 +179,7 @@
               </button>
             </div>
           </div>
-          <QueryEditor
+          <queryeditor
             ref="queryEditor"
             v-model="gqlQueryString"
             :onRunGQLQuery="runQuery"
@@ -195,7 +195,7 @@
         </pw-section>
 
         <pw-section class="yellow" label="Variables" ref="variables">
-          <Editor
+          <ace-editor
             v-model="variableString"
             :lang="'json'"
             :options="{
@@ -233,7 +233,7 @@
               </button>
             </div>
           </div>
-          <Editor
+          <ace-editor
             v-if="response"
             :value="response"
             :lang="'json'"
@@ -272,13 +272,13 @@
                   :selected="true"
                 >
                   <div v-for="field in queryFields" :key="field.name">
-                    <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
                 <tab v-if="mutationFields.length > 0" :id="'mutations'" :label="$t('mutations')">
                   <div v-for="field in mutationFields" :key="field.name">
-                    <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
@@ -288,13 +288,13 @@
                   :label="$t('subscriptions')"
                 >
                   <div v-for="field in subscriptionFields" :key="field.name">
-                    <gql-field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                    <field :gqlField="field" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
 
                 <tab v-if="gqlTypes.length > 0" :id="'types'" :label="$t('types')" ref="typesTab">
                   <div v-for="type in gqlTypes" :key="type.name" :id="`type_${type.name}`">
-                    <gql-type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
+                    <type :gqlType="type" :jumpTypeCallback="handleJumpToType" />
                   </div>
                 </tab>
               </div>
@@ -332,22 +332,12 @@
 import axios from "axios"
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
-import AceEditor from "~/components/ui/ace-editor"
-import QueryEditor from "~/components/graphql/queryeditor"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
 import { sendNetworkRequest } from "~/helpers/network"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    "gql-field": () => import("~/components/graphql/field"),
-    "gql-type": () => import("~/components/graphql/type"),
-    autocomplete: () => import("~/components/ui/autocomplete"),
-    Editor: AceEditor,
-    QueryEditor: QueryEditor,
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
-  },
+  components: { deleteIcon },
   data() {
     return {
       commonHeaders,
diff --git a/pages/index.vue b/pages/index.vue
index 6d7b79d2e..46c46f186 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -148,7 +148,7 @@
                 @keyup.enter="isValidURL ? sendRequest() : null"
                 id="url"
                 name="url"
-                type="url"
+                type="text"
                 v-model="uri"
                 spellcheck="false"
                 @input="pathInputHandler"
@@ -317,7 +317,7 @@
                       v-tooltip.bottom="$t('delete')"
                       id="delParam"
                     >
-                      <i class="material-icons">delete</i>
+                      <deleteIcon class="material-icons" />
                     </button>
                   </li>
                 </div>
@@ -346,7 +346,7 @@
                       </button>
                     </div>
                   </div>
-                  <Editor
+                  <ace-editor
                     v-model="rawParams"
                     :lang="rawInputEditorLang"
                     :options="{
@@ -500,7 +500,7 @@
                         v-tooltip.bottom="$t('delete')"
                         id="param"
                       >
-                        <i class="material-icons">delete</i>
+                        <deleteIcon class="material-icons" />
                       </button>
                     </li>
                   </div>
@@ -629,7 +629,7 @@
                           @click="showTokenRequest = false"
                           v-tooltip.bottom="$t('close')"
                         >
-                          <i class="material-icons">close</i>
+                          <closeIcon class="material-icons" />
                         </button>
                       </div>
                     </div>
@@ -782,7 +782,7 @@
                         v-tooltip.bottom="$t('delete')"
                         id="header"
                       >
-                        <i class="material-icons">delete</i>
+                        <deleteIcon class="material-icons" />
                       </button>
                     </li>
                   </div>
@@ -821,7 +821,7 @@
                         </a>
                       </div>
                     </div>
-                    <JSEditor
+                    <js-editor
                       v-model="preRequestScript"
                       :options="{
                         maxLines: '16',
@@ -866,7 +866,7 @@
                         </a>
                       </div>
                     </div>
-                    <JSEditor
+                    <js-editor
                       v-model="testScript"
                       :options="{
                         maxLines: '16',
@@ -931,7 +931,7 @@
             </li>
           </ul>
           <div v-if="response.body && response.body !== $t('loading')">
-            <response-renderer :response="response" />
+            <response-body-renderer :response="response" />
           </div>
         </pw-section>
       </div>
@@ -955,7 +955,7 @@
               <pw-section class="pink" :label="$t('notes')" ref="sync">
                 <div v-if="fb.currentUser">
                   <inputform />
-                  <notes />
+                  <feeds />
                 </div>
                 <div v-else>
                   <ul>
@@ -979,7 +979,7 @@
         :editing-request="editRequest"
       />
 
-      <pw-modal v-if="showModal" @close="showModal = false">
+      <modal v-if="showModal" @close="showModal = false">
         <div slot="header">
           <ul>
             <li>
@@ -987,7 +987,7 @@
                 <h3 class="title">{{ $t("import_curl") }}</h3>
                 <div>
                   <button class="icon" @click="showModal = false">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1019,9 +1019,9 @@
             </span>
           </div>
         </div>
-      </pw-modal>
+      </modal>
 
-      <pw-modal v-if="!isHidden" @close="isHidden = true">
+      <modal v-if="!isHidden" @close="isHidden = true">
         <div slot="header">
           <ul>
             <li>
@@ -1029,7 +1029,7 @@
                 <h3 class="title">{{ $t("generate_code") }}</h3>
                 <div>
                   <button class="icon" @click="isHidden = true">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1076,9 +1076,9 @@
           </ul>
         </div>
         <div slot="footer"></div>
-      </pw-modal>
+      </modal>
 
-      <pw-modal v-if="showTokenList" @close="showTokenList = false">
+      <modal v-if="showTokenList" @close="showTokenList = false">
         <div slot="header">
           <ul>
             <li>
@@ -1086,7 +1086,7 @@
                 <h3 class="title">{{ $t("manage_token") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenList = false">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1142,7 +1142,7 @@
                   @click="removeOAuthToken(index)"
                   v-tooltip.bottom="$t('delete')"
                 >
-                  <i class="material-icons">delete</i>
+                  <deleteIcon class="material-icons" />
                 </button>
               </li>
             </div>
@@ -1152,9 +1152,9 @@
           </p>
         </div>
         <div slot="footer"></div>
-      </pw-modal>
+      </modal>
 
-      <pw-modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
+      <modal v-if="showTokenRequestList" @close="showTokenRequestList = false">
         <div slot="header">
           <ul>
             <li>
@@ -1162,7 +1162,7 @@
                 <h3 class="title">{{ $t("manage_token_req") }}</h3>
                 <div>
                   <button class="icon" @click="showTokenRequestList = false">
-                    <i class="material-icons">close</i>
+                    <closeIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1189,7 +1189,7 @@
                     @click="removeOAuthTokenReq"
                     v-tooltip.bottom="$t('delete')"
                   >
-                    <i class="material-icons">delete</i>
+                    <deleteIcon class="material-icons" />
                   </button>
                 </div>
               </div>
@@ -1237,13 +1237,12 @@
             </span>
           </div>
         </div>
-      </pw-modal>
+      </modal>
     </div>
   </div>
 </template>
 
 <script>
-import section from "~/components/layout/section"
 import url from "url"
 import querystring from "querystring"
 import { commonHeaders } from "~/helpers/headers"
@@ -1251,8 +1250,6 @@ import parseCurlCommand from "~/assets/js/curlparser.js"
 import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
-import AceEditor from "~/components/ui/ace-editor"
-import JSEditor from "~/components/ui/js-editor"
 import { tokenRequest, oauthRedirect } from "~/assets/js/oauth"
 import { cancelRunningRequest, sendNetworkRequest } from "~/helpers/network"
 import { fb } from "~/helpers/fb"
@@ -1261,6 +1258,8 @@ import { hasPathParams, addPathParamsToVariables, getQueryParams } from "~/helpe
 import { parseUrlAndPath } from "~/helpers/utils/uri.js"
 import { httpValid } from "~/helpers/utils/valid"
 import { knownContentTypes, isJSONContentType } from "~/helpers/utils/contenttypes"
+import closeIcon from "~/static/icons/close-24px.svg?inline"
+import deleteIcon from "~/static/icons/delete-24px.svg?inline"
 
 const statusCategories = [
   {
@@ -1311,24 +1310,11 @@ const parseHeaders = (xhr) => {
 }
 export const findStatusGroup = (responseStatus) =>
   statusCategories.find(({ statusCodeRegex }) => statusCodeRegex.test(responseStatus))
+
 export default {
   components: {
-    "pw-section": section,
-    "pw-toggle": () => import("~/components/ui/toggle"),
-    "pw-modal": () => import("~/components/ui/modal"),
-    autocomplete: () => import("~/components/ui/autocomplete"),
-    history: () => import("~/components/layout/history"),
-    collections: () => import("~/components/collections"),
-    saveRequestAs: () => import("~/components/collections/saveRequestAs"),
-    Editor: AceEditor,
-    JSEditor: JSEditor,
-    environments: () => import("~/components/environments"),
-    inputform: () => import("~/components/firebase/inputform"),
-    notes: () => import("~/components/firebase/feeds"),
-    login: () => import("~/components/firebase/login"),
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
-    "response-renderer": () => import("~/components/lenses/ResponseBodyRenderer"),
+    closeIcon,
+    deleteIcon,
   },
   data() {
     return {
diff --git a/pages/realtime.vue b/pages/realtime.vue
index f9e2594dd..845278735 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -24,15 +24,6 @@
 
 <script>
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    tabs: () => import("~/components/ui/tabs"),
-    tab: () => import("~/components/ui/tab"),
-    websocket: () => import("~/components/realtime/websocket"),
-    sse: () => import("~/components/realtime/sse"),
-    socketio: () => import("~/components/realtime/socketio"),
-    mqtt: () => import("~/components/realtime/mqtt"),
-  },
   head() {
     return {
       title: `Realtime • ${this.$store.state.name}`,
diff --git a/pages/settings.vue b/pages/settings.vue
index 35f02095b..6d768ac68 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -220,13 +220,6 @@ import { fb } from "~/helpers/fb"
 import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
 
 export default {
-  components: {
-    "pw-section": () => import("~/components/layout/section"),
-    "pw-toggle": () => import("~/components/ui/toggle"),
-    swatch: () => import("~/components/settings/swatch"),
-    login: () => import("~/components/firebase/login"),
-    logout: () => import("~/components/firebase/logout"),
-  },
   data() {
     return {
       // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
diff --git a/static/icons/add-24px.svg b/static/icons/add-24px.svg
new file mode 100644
index 000000000..ddb7eeef5
--- /dev/null
+++ b/static/icons/add-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
\ No newline at end of file
diff --git a/static/icons/close-24px.svg b/static/icons/close-24px.svg
new file mode 100644
index 000000000..e96a4e7c1
--- /dev/null
+++ b/static/icons/close-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
\ No newline at end of file
diff --git a/static/icons/cloud_upload-24px.svg b/static/icons/cloud_upload-24px.svg
new file mode 100644
index 000000000..c944fc41e
--- /dev/null
+++ b/static/icons/cloud_upload-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
\ No newline at end of file
diff --git a/static/icons/delete-24px.svg b/static/icons/delete-24px.svg
new file mode 100644
index 000000000..3acec0ade
--- /dev/null
+++ b/static/icons/delete-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
\ No newline at end of file
diff --git a/static/icons/exit_to_app-24px.svg b/static/icons/exit_to_app-24px.svg
new file mode 100644
index 000000000..2f0decb21
--- /dev/null
+++ b/static/icons/exit_to_app-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67l-2.58 2.59zM19 3H5c-1.11 0-2 .9-2 2v4h2V5h14v14H5v-4H3v4c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
\ No newline at end of file
diff --git a/static/icons/folder-24px.svg b/static/icons/folder-24px.svg
new file mode 100644
index 000000000..d0bca1a11
--- /dev/null
+++ b/static/icons/folder-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
\ No newline at end of file
diff --git a/static/icons/icon-144x144.png b/static/icons/icon-144x144.png
deleted file mode 100644
index 0b4f74b12..000000000
Binary files a/static/icons/icon-144x144.png and /dev/null differ
diff --git a/static/icons/icon-192x192.png b/static/icons/icon-192x192.png
deleted file mode 100644
index 2b5d0415d..000000000
Binary files a/static/icons/icon-192x192.png and /dev/null differ
diff --git a/static/icons/icon-48x48.png b/static/icons/icon-48x48.png
deleted file mode 100644
index 0fd0b9a56..000000000
Binary files a/static/icons/icon-48x48.png and /dev/null differ
diff --git a/static/icons/icon-512x512.png b/static/icons/icon-512x512.png
deleted file mode 100644
index 87a62717d..000000000
Binary files a/static/icons/icon-512x512.png and /dev/null differ
diff --git a/static/icons/icon-72x72.png b/static/icons/icon-72x72.png
deleted file mode 100644
index 08aba4cd3..000000000
Binary files a/static/icons/icon-72x72.png and /dev/null differ
diff --git a/static/icons/icon-96x96.png b/static/icons/icon-96x96.png
deleted file mode 100644
index e44dd0acb..000000000
Binary files a/static/icons/icon-96x96.png and /dev/null differ