diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 6f4cba84a..b7242d31a 100644
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -390,22 +390,22 @@ export default {
     },
     exportJSON() {
       this.getJSONCollection()
-      let text = this.collectionJson
-      text = text.replace(/\n/g, "\r\n")
-      const blob = new Blob([text], {
-        type: "text/json",
-      })
-      const anchor = document.createElement("a")
-      anchor.download = "hoppscotch-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)
+      const dataToWrite = this.collectionJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
     },
     fileImported() {
       this.$toast.info(this.$t("file_imported"), {
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 1f0457473..5577287f8 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -243,22 +243,22 @@ export default {
       this.$refs.inputChooseFileToImportFrom.value = ""
     },
     exportJSON() {
-      let text = this.collectionJson
-      text = text.replace(/\n/g, "\r\n")
-      const blob = new Blob([text], {
-        type: "text/json",
-      })
-      const anchor = document.createElement("a")
-      anchor.download = "hoppscotch-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)
+      const dataToWrite = this.collectionJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
     },
     fileImported() {
       this.$toast.info(this.$t("file_imported"), {
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 5d6448f78..070e6438c 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -50,6 +50,7 @@
         @click.native="$emit('unselect-collection')"
       />
       <ButtonSecondary
+        v-if="!doc"
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
         :title="$t('new_folder')"
diff --git a/components/environments/ImportExport.vue b/components/environments/ImportExport.vue
index ead710cd8..06a9bfeb7 100644
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -223,22 +223,22 @@ export default {
       this.importFromHoppscotch(environments)
     },
     exportJSON() {
-      let text = this.environmentJson
-      text = text.replace(/\n/g, "\r\n")
-      const blob = new Blob([text], {
-        type: "text/json",
-      })
-      const anchor = document.createElement("a")
-      anchor.download = "hoppscotch-environment.json"
-      anchor.href = window.URL.createObjectURL(blob)
-      anchor.target = "_blank"
-      anchor.style.display = "none"
-      document.body.appendChild(anchor)
-      anchor.click()
-      document.body.removeChild(anchor)
+      const dataToWrite = this.environmentJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
     },
     fileImported() {
       this.$toast.info(this.$t("file_imported"), {
diff --git a/components/http/Request.vue b/components/http/Request.vue
index cc71117a6..6d848cef2 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -75,7 +75,7 @@
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none"
+        class="rounded-none w-18"
         :label="!loading ? $t('send') : $t('cancel')"
         :shortcut="[getSpecialKey(), 'G']"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 90651a1f7..01ccdf595 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -97,7 +97,7 @@ export default {
       })
       setTimeout(() => {
         document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
+        URL.revokeObjectURL(url)
         this.downloadIcon = "save_alt"
       }, 1000)
     },
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 69a8c2b07..8042da328 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -98,7 +98,7 @@ export default {
       })
       setTimeout(() => {
         document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
+        URL.revokeObjectURL(url)
         this.downloadIcon = "save_alt"
       }, 1000)
     },
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 8f0b959dc..eaebc8d72 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -17,7 +17,7 @@
       </label>
       <div>
         <ButtonSecondary
-          v-if="response.body && canDownloadResponse"
+          v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
@@ -55,7 +55,6 @@
 
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
-import { isJSONContentType } from "~/helpers/utils/contenttypes"
 
 export default {
   mixins: [TextContentRendererMixin],
@@ -82,19 +81,11 @@ export default {
         .split(";")[0]
         .toLowerCase()
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
   },
   methods: {
     downloadResponse() {
       const dataToWrite = this.responseBodyText
-      const file = new Blob([dataToWrite], { type: this.responseType })
+      const file = new Blob([dataToWrite], { type: "application/json" })
       const a = document.createElement("a")
       const url = URL.createObjectURL(file)
       a.href = url
@@ -108,7 +99,7 @@ export default {
       })
       setTimeout(() => {
         document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
+        URL.revokeObjectURL(url)
         this.downloadIcon = "save_alt"
       }, 1000)
     },
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index df4282e09..253474277 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -17,7 +17,7 @@
       </label>
       <div>
         <ButtonSecondary
-          v-if="response.body && canDownloadResponse"
+          v-if="response.body"
           ref="downloadResponse"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
@@ -54,7 +54,6 @@
 
 <script>
 import TextContentRendererMixin from "./mixins/TextContentRendererMixin"
-import { isJSONContentType } from "~/helpers/utils/contenttypes"
 
 export default {
   mixins: [TextContentRendererMixin],
@@ -73,14 +72,6 @@ export default {
         .split(";")[0]
         .toLowerCase()
     },
-    canDownloadResponse() {
-      return (
-        this.response &&
-        this.response.headers &&
-        this.response.headers["content-type"] &&
-        isJSONContentType(this.response.headers["content-type"])
-      )
-    },
   },
   methods: {
     downloadResponse() {
@@ -99,7 +90,7 @@ export default {
       })
       setTimeout(() => {
         document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
+        URL.revokeObjectURL(url)
         this.downloadIcon = "save_alt"
       }, 1000)
     },
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index fd853c03b..e8f3174a3 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -90,7 +90,7 @@ export default {
       })
       setTimeout(() => {
         document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
+        URL.revokeObjectURL(url)
         this.downloadIcon = "save_alt"
       }, 1000)
     },
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index ab492ad25..ecd8a3499 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -29,10 +29,9 @@
                 <ButtonPrimary
                   id="connect"
                   :disabled="!validUrl"
-                  class="rounded-l-none"
-                  :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                  class="rounded-l-none w-28"
                   :label="connectionState ? $t('disconnect') : $t('connect')"
-                  reverse
+                  :loading="connectingState"
                   @click.native="toggleConnection"
                 />
               </div>
@@ -88,7 +87,6 @@
             name="get"
             class="rounded-l-none"
             :disabled="!canpublish"
-            icon="send"
             :label="$t('mqtt_publish')"
             @click.native="publish"
           />
@@ -120,7 +118,6 @@
             name="get"
             :disabled="!cansubscribe"
             class="rounded-l-none"
-            :icon="subscriptionState ? 'sync_disabled' : 'sync'"
             :label="
               subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
             "
@@ -157,6 +154,7 @@ export default defineComponent({
       sub_topic: "",
       msg: "",
       connectionState: false,
+      connectingState: false,
       log: null,
       manualDisconnect: false,
       subscriptionState: false,
@@ -195,6 +193,7 @@ export default defineComponent({
       if (data.url === this.url) this.isUrlValid = data.result
     },
     connect() {
+      this.connectingState = true
       this.log = [
         {
           payload: this.$t("connecting_to", { name: this.url }),
@@ -222,6 +221,7 @@ export default defineComponent({
       })
     },
     onConnectionFailure() {
+      this.connectingState = false
       this.connectionState = false
       this.log.push({
         payload: this.$t("error_occurred"),
@@ -231,6 +231,7 @@ export default defineComponent({
       })
     },
     onConnectionSuccess() {
+      this.connectingState = false
       this.connectionState = true
       this.log.push({
         payload: this.$t("connected_to", { name: this.url }),
@@ -268,6 +269,7 @@ export default defineComponent({
       })
     },
     onConnectionLost() {
+      this.connectingState = false
       this.connectionState = false
       if (this.manualDisconnect) {
         this.$toast.error(this.$t("disconnected"), {
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index b99e8f4fb..2f6c8bbe3 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -16,7 +16,9 @@
                     bg-primaryLight
                     border border-divider
                     rounded-l
+                    flex
                     font-semibold font-mono
+                    flex-1
                     text-secondaryDark
                     w-full
                     py-1
@@ -34,7 +36,9 @@
                   class="
                     bg-primaryLight
                     border border-divider
+                    flex
                     font-semibold font-mono
+                    flex-1
                     text-secondaryDark
                     w-full
                     py-1
@@ -49,10 +53,9 @@
                   id="connect"
                   :disabled="!urlValid"
                   name="connect"
-                  class="rounded-l-none"
-                  :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                  class="rounded-l-none w-28"
                   :label="!connectionState ? $t('connect') : $t('disconnect')"
-                  reverse
+                  :loading="connectingState"
                   @click.native="toggleConnection"
                 />
               </div>
@@ -132,7 +135,6 @@
                 name="send"
                 :disabled="!connectionState"
                 class="rounded-l-none"
-                icon="send"
                 :label="$t('send')"
                 @click.native="sendMessage"
               />
@@ -165,6 +167,7 @@ export default defineComponent({
       url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
       path: "/socket.io",
       isUrlValid: true,
+      connectingState: false,
       connectionState: false,
       io: null,
       communication: {
@@ -213,6 +216,7 @@ export default defineComponent({
       else return this.disconnect()
     },
     connect() {
+      this.connectingState = true
       this.communication.log = [
         {
           payload: this.$t("connecting_to", { name: this.url }),
@@ -231,6 +235,7 @@ export default defineComponent({
         // Add ability to listen to all events
         wildcard(Client.Manager)(this.io)
         this.io.on("connect", () => {
+          this.connectingState = false
           this.connectionState = true
           this.communication.log = [
             {
@@ -262,6 +267,7 @@ export default defineComponent({
           this.handleError()
         })
         this.io.on("disconnect", () => {
+          this.connectingState = false
           this.connectionState = false
           this.communication.log.push({
             payload: this.$t("disconnected_from", { name: this.url }),
@@ -289,6 +295,7 @@ export default defineComponent({
     },
     handleError(error) {
       this.disconnect()
+      this.connectingState = false
       this.connectionState = false
       this.communication.log.push({
         payload: this.$t("error_occurred"),
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index c90d6d157..5b3b7e7c7 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -29,10 +29,9 @@
               id="start"
               :disabled="!serverValid"
               name="start"
-              class="rounded-l-none"
-              :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
+              class="rounded-l-none w-22"
               :label="!connectionSSEState ? $t('start') : $t('stop')"
-              reverse
+              :loading="connectingState"
               @click.native="toggleSSEConnection"
             />
           </div>
@@ -62,6 +61,7 @@ export default {
   data() {
     return {
       connectionSSEState: false,
+      connectingState: false,
       server: "https://express-eventsource.herokuapp.com/events",
       isUrlValid: true,
       sse: null,
@@ -104,6 +104,7 @@ export default {
       else return this.stop()
     },
     start() {
+      this.connectingState = true
       this.events.log = [
         {
           payload: this.$t("connecting_to", { name: this.server }),
@@ -115,6 +116,7 @@ export default {
         try {
           this.sse = new EventSource(this.server)
           this.sse.onopen = () => {
+            this.connectingState = false
             this.connectionSSEState = true
             this.events.log = [
               {
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 136c58662..66bd061ea 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -31,11 +31,10 @@
                 <ButtonPrimary
                   id="connect"
                   :disabled="!urlValid"
-                  class="rounded-l-none"
+                  class="rounded-l-none w-28"
                   name="connect"
-                  :icon="!connectionState ? 'sync' : 'sync_disabled'"
                   :label="!connectionState ? $t('connect') : $t('disconnect')"
-                  reverse
+                  :loading="connectingState"
                   @click.native="toggleConnection"
                 />
               </div>
@@ -171,7 +170,6 @@
             name="send"
             :disabled="!connectionState"
             class="rounded-l-none"
-            icon="send"
             :label="$t('send')"
             @click.native="sendMessage"
           />
@@ -198,6 +196,7 @@ export default defineComponent({
   data() {
     return {
       connectionState: false,
+      connectingState: false,
       url: "wss://echo.websocket.org",
       isUrlValid: true,
       socket: null,
@@ -263,8 +262,10 @@ export default defineComponent({
         },
       ]
       try {
+        this.connectingState = true
         this.socket = new WebSocket(this.url, this.activeProtocols)
         this.socket.onopen = () => {
+          this.connectingState = false
           this.connectionState = true
           this.communication.log = [
             {
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 6099bf57a..dd462475b 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -30,9 +30,8 @@
                 <ButtonPrimary
                   id="get"
                   name="get"
-                  :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
                   :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
-                  class="rounded-l-none"
+                  class="rounded-l-none w-28"
                   @click.native="onPollSchemaClick"
                 />
               </div>
@@ -1210,7 +1209,7 @@ export default defineComponent({
       })
       setTimeout(() => {
         document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
+        URL.revokeObjectURL(url)
         this.downloadResponseIcon = "save_alt"
       }, 1000)
     },
@@ -1229,7 +1228,7 @@ export default defineComponent({
       })
       setTimeout(() => {
         document.body.removeChild(a)
-        window.URL.revokeObjectURL(url)
+        URL.revokeObjectURL(url)
         this.downloadSchemaIcon = "save_alt"
       }, 1000)
     },