diff --git a/components/section.vue b/components/section.vue
index 6556f1927..67f9fcb5e 100644
--- a/components/section.vue
+++ b/components/section.vue
@@ -3,10 +3,13 @@
     <legend @click.prevent="collapse">
       <span>{{ label }}</span>
       <i class="material-icons">
-        {{ isCollapsed ? "expand_more" : "expand_less" }}
+        {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
       </i>
     </legend>
-    <div class="collapsible" :class="{ hidden: collapsed }">
+    <div
+      class="collapsible"
+      :class="{ hidden: isCollapsed(label.toLowerCase()) }"
+    >
       <slot />
     </div>
   </fieldset>
@@ -22,13 +25,10 @@ fieldset.no-colored-frames legend {
 export default {
   computed: {
     frameColorsEnabled() {
-      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false
+      return this.$store.state.postwoman.settings.FRAME_COLORS_ENABLED || false;
     },
-  },
-
-  data() {
-    return {
-      isCollapsed: false,
+    sectionString() {
+      return `${this.$route.path}/${this.label}`;
     }
   },
 
@@ -44,10 +44,18 @@ export default {
 
   methods: {
     collapse({ target }) {
-      const parent = target.parentNode.parentNode
-      parent.querySelector(".collapsible").classList.toggle("hidden")
-      this.isCollapsed = !this.isCollapsed
+      const parent = target.parentNode.parentNode;
+      parent.querySelector(".collapsible").classList.toggle("hidden");
+      // Save collapsed section to local state
+      this.$store.commit("setCollapsedSection", this.sectionString);
     },
-  },
-}
+    isCollapsed(label) {
+      return (
+        this.$store.state.theme.collapsedSections.includes(
+          this.sectionString
+        ) || false
+      );
+    }
+  }
+};
 </script>
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 5f8307704..465e5fbdb 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -144,10 +144,10 @@
         </pw-section>
 
         <pw-section class="cyan" :label="$t('query')" ref="query">
-          <div class="flex-wrap">
+          <div class="flex-wrap gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
-              <button class="icon" @click="runQuery()" v-tooltip.bottom="$t('run_query')">
+              <button @click="runQuery()" v-tooltip.bottom="$t('run_query')">
                 <i class="material-icons">play_arrow</i>
               </button>
               <button
@@ -308,6 +308,9 @@
   max-height: calc(100vh - 186px);
   overflow: auto;
 }
+.gqlRunQuery {
+  margin-bottom: 12px;
+}
 </style>
 
 <script>
@@ -373,19 +376,19 @@ export default {
     },
     response: {
       get() {
-        return this.$store.state.gql.response;
+        return this.$store.state.gql.response
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "response" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "response" })
+      },
     },
     schema: {
       get() {
-        return this.$store.state.gql.schema;
+        return this.$store.state.gql.schema
       },
       set(value) {
-        this.$store.commit("setGQLState", { value, attribute: "schema" });
-      }
+        this.$store.commit("setGQLState", { value, attribute: "schema" })
+      },
     },
     variableString: {
       get() {
@@ -426,13 +429,13 @@ export default {
       return t
     },
     copySchema() {
-      this.$refs.copySchemaCode.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.schema;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copySchemaCode.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.schema
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
@@ -452,13 +455,13 @@ export default {
       setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
     },
     copyResponse() {
-      this.$refs.copyResponseButton.innerHTML = this.doneButton;
-      const aux = document.createElement("textarea");
-      aux.innerText = this.response;
-      document.body.appendChild(aux);
-      aux.select();
-      document.execCommand("copy");
-      document.body.removeChild(aux);
+      this.$refs.copyResponseButton.innerHTML = this.doneButton
+      const aux = document.createElement("textarea")
+      aux.innerText = this.response
+      document.body.appendChild(aux)
+      aux.select()
+      document.execCommand("copy")
+      document.body.removeChild(aux)
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
@@ -492,7 +495,7 @@ export default {
 
         const data = await sendNetworkRequest(reqOptions, this.$store)
 
-        this.response = JSON.stringify(data.data, null, 2);
+        this.response = JSON.stringify(data.data, null, 2)
 
         this.$nuxt.$loading.finish()
         const duration = Date.now() - startTime
@@ -509,10 +512,9 @@ export default {
       }
     },
     async getSchema() {
-      const startTime = Date.now();
-      this.schema = this.$t("loading");
-      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED &&
-        this.scrollInto("schema");
+      const startTime = Date.now()
+      this.schema = this.$t("loading")
+      this.$store.state.postwoman.settings.SCROLL_INTO_ENABLED && this.scrollInto("schema")
 
       // Start showing the loading bar as soon as possible.
       // The nuxt axios module will hide it when the request is made.
@@ -551,15 +553,15 @@ export default {
 
         const data = this.$store.state.postwoman.settings.PROXY_ENABLED ? res.data : res
 
-        const schema = gql.buildClientSchema(data.data.data);
+        const schema = gql.buildClientSchema(data.data.data)
         this.schema = gql.printSchema(schema, {
-          commentDescriptions: true
-        });
+          commentDescriptions: true,
+        })
         console.log(
           gql.printSchema(schema, {
-            commentDescriptions: true
+            commentDescriptions: true,
           })
-        );
+        )
 
         if (schema.getQueryType()) {
           const fields = schema.getQueryType().getFields()
@@ -614,8 +616,8 @@ export default {
           icon: "done",
         })
       } catch (error) {
-        this.$nuxt.$loading.finish();
-        this.schema = `${error}. ${this.$t("check_console_details")}`;
+        this.$nuxt.$loading.finish()
+        this.schema = `${error}. ${this.$t("check_console_details")}`
         this.$toast.error(`${error} ${this.$t("f12_details")}`, {
           icon: "error",
         })
@@ -627,15 +629,15 @@ export default {
       this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
     },
     downloadResponse() {
-      const dataToWrite = JSON.stringify(this.schema, null, 2);
-      const file = new Blob([dataToWrite], { type: "application/json" });
-      const a = document.createElement("a");
-      const url = URL.createObjectURL(file);
-      a.href = url;
-      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]");
-      document.body.appendChild(a);
-      a.click();
-      this.$refs.downloadResponse.innerHTML = this.doneButton;
+      const dataToWrite = JSON.stringify(this.schema, null, 2)
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      a.download = `${this.url} on ${Date()}.graphql`.replace(/\./g, "[dot]")
+      document.body.appendChild(a)
+      a.click()
+      this.$refs.downloadResponse.innerHTML = this.doneButton
       this.$toast.success(this.$t("download_started"), {
         icon: "done",
       })
diff --git a/store/mutations.js b/store/mutations.js
index 6dd5c2d9c..9a229291a 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -7,6 +7,12 @@ export default {
     gql[attribute] = value
   },
 
+  setCollapsedSection({ theme }, value) {
+    theme.collapsedSections.includes(value)
+      ? (theme.collapsedSections = theme.collapsedSections.filter(section => section !== value))
+      : theme.collapsedSections.push(value)
+  },
+
   addGQLHeader({ gql }, object) {
     gql.headers.push(object)
   },
diff --git a/store/state.js b/store/state.js
index 271cf48ef..be29cd6a2 100644
--- a/store/state.js
+++ b/store/state.js
@@ -1,40 +1,43 @@
 export default () => ({
   request: {
-    method: 'GET',
-    url: 'https://httpbin.org',
-    path: '/get',
-    label: '',
-    auth: 'None',
-    httpUser: '',
-    httpPassword: '',
-    passwordFieldType: 'password',
-    bearerToken: '',
+    method: "GET",
+    url: "https://httpbin.org",
+    path: "/get",
+    label: "",
+    auth: "None",
+    httpUser: "",
+    httpPassword: "",
+    passwordFieldType: "password",
+    bearerToken: "",
     headers: [],
     params: [],
     bodyParams: [],
-    rawParams: '',
+    rawParams: "",
     rawInput: false,
-    requestType: '',
-    contentType: '',
+    requestType: "",
+    contentType: "",
   },
   gql: {
-    url: 'https://rickandmortyapi.com/graphql',
+    url: "https://rickandmortyapi.com/graphql",
     headers: [],
-    schema: '',
-    variablesJSONString: '{}',
-    query: '',
-    response: ''
+    schema: "",
+    variablesJSONString: "{}",
+    query: "",
+    response: "",
+  },
+  theme: {
+    collapsedSections: [],
   },
   oauth2: {
     tokens: [],
     tokenReqs: [],
-    tokenReqSelect: '',
-    tokenReqName: '',
-    accessTokenName: '',
-    oidcDiscoveryUrl: '',
-    authUrl: '',
-    accessTokenUrl: '',
-    clientId: '',
-    scope: '',
+    tokenReqSelect: "",
+    tokenReqName: "",
+    accessTokenName: "",
+    oidcDiscoveryUrl: "",
+    authUrl: "",
+    accessTokenUrl: "",
+    clientId: "",
+    scope: "",
   },
-})
\ No newline at end of file
+})