diff --git a/packages/hoppscotch-app/components/http/Response.vue b/packages/hoppscotch-app/components/http/Response.vue
index 5f887407c..fbf7a662d 100644
--- a/packages/hoppscotch-app/components/http/Response.vue
+++ b/packages/hoppscotch-app/components/http/Response.vue
@@ -9,8 +9,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from "@nuxtjs/composition-api"
-import { useReadonlyStream } from "~/helpers/utils/composables"
+import { computed, defineComponent, watch } from "@nuxtjs/composition-api"
+import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
 import { restResponse$ } from "~/newstore/RESTSession"
 
 export default defineComponent({
@@ -26,6 +26,13 @@ export default defineComponent({
       () => response.value === null || response.value.type === "loading"
     )
 
+    const nuxt = useNuxt()
+
+    watch(response, () => {
+      if (response.value?.type === "loading") nuxt.value.$loading.start()
+      else nuxt.value.$loading.finish()
+    })
+
     return {
       hasResponse,
       response,
diff --git a/packages/hoppscotch-app/nuxt.config.js b/packages/hoppscotch-app/nuxt.config.js
index aa496a0a7..d6afbfb29 100644
--- a/packages/hoppscotch-app/nuxt.config.js
+++ b/packages/hoppscotch-app/nuxt.config.js
@@ -12,8 +12,9 @@ export const options = {
   keywords:
     "hoppscotch, hopp scotch, hoppscotch online, hoppscotch app, postwoman, postwoman chrome, postwoman online, postwoman for mac, postwoman app, postwoman for windows, postwoman google chrome, postwoman chrome app, get postwoman, postwoman web, postwoman android, postwoman app for chrome, postwoman mobile app, postwoman web app, api, request, testing, tool, rest, websocket, sse, graphql, socketio",
   loading: {
-    color: "var(--divider-light-color)",
+    color: "var(--divider-dark-color)",
     background: "var(--primary-color)",
+    accent: "var(--accent-color)",
   },
   app: {
     background: "#202124",
@@ -81,7 +82,7 @@ export default {
 
   // Customize the progress-bar color (https://nuxtjs.org/api/configuration-loading/#customizing-the-progress-bar)
   loading: {
-    color: options.loading.color,
+    color: options.loading.accent,
     continuous: true,
   },
 
diff --git a/packages/hoppscotch-app/pages/graphql.vue b/packages/hoppscotch-app/pages/graphql.vue
index 0158639c7..779fd583d 100644
--- a/packages/hoppscotch-app/pages/graphql.vue
+++ b/packages/hoppscotch-app/pages/graphql.vue
@@ -33,7 +33,7 @@ export default defineComponent({
     const isLoading = useReadonlyStream(gqlConn.isLoading$, false)
 
     watch(isLoading, () => {
-      if (isLoading) nuxt.value.$loading.start()
+      if (isLoading.value) nuxt.value.$loading.start()
       else nuxt.value.$loading.finish()
     })