diff --git a/components/graphql/queryeditor.vue b/components/graphql/queryeditor.vue
index 6378f5f09..8503c1804 100644
--- a/components/graphql/queryeditor.vue
+++ b/components/graphql/queryeditor.vue
@@ -147,6 +147,15 @@ export default {
       },
     })
 
+    editor.commands.addCommand({
+      name: "prettifyGQLQuery",
+      exec: () => this.prettifyQuery(),
+      bindKey: {
+        mac: "cmd-p",
+        win: "ctrl-p",
+      },
+    })
+
     editor.on("change", () => {
       const content = editor.getValue()
       this.$emit("input", content)
@@ -158,6 +167,16 @@ export default {
   },
 
   methods: {
+    prettifyQuery() {
+      try {
+        this.value = gql.print(gql.parse(this.editor.getValue()))
+      } catch (e) {
+        this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
+          icon: "error",
+        })
+      }
+    },
+
     defineTheme() {
       if (this.theme) {
         return this.theme
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index 1bdf5bb5a..913429034 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script>
-import { wsValid } from "~/functions/utils/valid"
+import { socketioValid } from "~/functions/utils/valid"
 import io from "socket.io-client"
 import realtimeLog from "./log"
 
@@ -97,7 +97,7 @@ export default {
   },
   computed: {
     urlValid() {
-      return wsValid(this.url)
+      return socketioValid(this.url)
     },
   },
   methods: {
diff --git a/components/ui/modal.vue b/components/ui/modal.vue
index 7c6d328c5..78b12c1b7 100644
--- a/components/ui/modal.vue
+++ b/components/ui/modal.vue
@@ -8,8 +8,8 @@
           </div>
           <div class="modal-body">
             <slot name="body"></slot>
-            <div class="fade top"></div>
-            <div class="fade bottom"></div>
+            <!-- <div class="fade top"></div>
+            <div class="fade bottom"></div> -->
           </div>
           <div class="modal-footer">
             <slot name="footer"></slot>
diff --git a/functions/utils/valid.js b/functions/utils/valid.js
index 8295ea968..3ca6c461d 100644
--- a/functions/utils/valid.js
+++ b/functions/utils/valid.js
@@ -1,14 +1,21 @@
+function generateIPRE(protocol) {
+  return new RegExp(
+    `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
+  )
+}
+function generateHostnameRE(protocol) {
+  return new RegExp(
+    `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
+  )
+}
+
 /**
  * valid url for ws/wss
  */
 export function wsValid(url) {
   const protocol = "^(wss?:\\/\\/)?"
-  const validIP = new RegExp(
-    `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
-  )
-  const validHostname = new RegExp(
-    `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
-  )
+  const validIP = generateIPRE(protocol)
+  const validHostname = generateHostnameRE(protocol)
   return validIP.test(url) || validHostname.test(url)
 }
 
@@ -17,11 +24,17 @@ export function wsValid(url) {
  */
 export function sseValid(url) {
   const protocol = "^(https?:\\/\\/)?"
-  const validIP = new RegExp(
-    `${protocol}(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$`
-  )
-  const validHostname = new RegExp(
-    `${protocol}(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]).)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9-]*[A-Za-z0-9/])$`
-  )
+  const validIP = generateIPRE(protocol)
+  const validHostname = generateHostnameRE(protocol)
+  return validIP.test(url) || validHostname.test(url)
+}
+
+/**
+ * valid url for ws/wss/http/https
+ */
+export function socketioValid(url) {
+  const protocol = "^((wss?:\\/\\/)|(https?:\\/\\/))?"
+  const validIP = generateIPRE(protocol)
+  const validHostname = generateHostnameRE(protocol)
   return validIP.test(url) || validHostname.test(url)
 }
diff --git a/lang/en-US.js b/lang/en-US.js
index 811b98210..261eb18c0 100644
--- a/lang/en-US.js
+++ b/lang/en-US.js
@@ -182,6 +182,9 @@ export default {
   waiting_send_req: "(waiting to send request)",
   waiting_receive_response: "(waiting to receive response)",
   waiting_receive_schema: "(waiting to receive schema)",
+  gql_prettify_invalid_query:
+    "Couldn't prettify an invalid query, solve query syntax errors and try again",
+  prettify_query: "Prettify Query",
   cancel: "Cancel",
   save: "Save",
   dismiss: "Dismiss",
diff --git a/package-lock.json b/package-lock.json
index 6ee33d177..a3faab797 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -906,9 +906,9 @@
             }
         },
         "@firebase/analytics": {
-            "version": "0.2.15",
-            "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.2.15.tgz",
-            "integrity": "sha512-pNRyLU6PndZa0iO+HN+GwY1HobsyU584a1KN5ZWBuwaqbUOB/99uChn2n6XaPrlD/G07uzv6dpw558IQXahhow==",
+            "version": "0.2.16",
+            "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.2.16.tgz",
+            "integrity": "sha512-t4lwd8SxigKULvt8a+VA1cVj7Aml/tUNECV9vzz3G9wusxDE76d7rTw+HexKTNPRbD2E9+JtRKUVPKlJpox9bw==",
             "requires": {
                 "@firebase/analytics-types": "0.2.7",
                 "@firebase/component": "0.1.6",
@@ -991,12 +991,12 @@
             }
         },
         "@firebase/firestore": {
-            "version": "1.11.2",
-            "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.11.2.tgz",
-            "integrity": "sha512-WWTKQGUYvZ7BELzEeIhINVm+iKL2ki/f0y16Qc3kABCW4kdXtiUHak6uWMFQ3IXHtnpDGzcNTyDAKOWeZx+TzA==",
+            "version": "1.12.0",
+            "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-1.12.0.tgz",
+            "integrity": "sha512-GWFU3pPs0xyp2ynFQIyvlmTtg4goGvOkT/lhVCu/Bq6/78xbl395nCPBMjF7IpUl+aVqQVUCwtF/cxrtNXgjMA==",
             "requires": {
                 "@firebase/component": "0.1.6",
-                "@firebase/firestore-types": "1.9.2",
+                "@firebase/firestore-types": "1.10.0",
                 "@firebase/logger": "0.1.36",
                 "@firebase/util": "0.2.41",
                 "@firebase/webchannel-wrapper": "0.2.36",
@@ -1006,9 +1006,9 @@
             }
         },
         "@firebase/firestore-types": {
-            "version": "1.9.2",
-            "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-1.9.2.tgz",
-            "integrity": "sha512-D264aOrssdbD3PE0JuJdbwBI9zXDTd5HASjJYtYc3AIGC526R+w+TDWes4GsE/zi0dSWqMfgiceVKL0PekjqZw=="
+            "version": "1.10.0",
+            "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-1.10.0.tgz",
+            "integrity": "sha512-/Pvmu5hpc0pceB96X2mEOAdEB0Xyn6+IQliBl7dUhu23AztnjBq+9uKcsgMB+k34RCApFQfNm1m24E4e+fUSVg=="
         },
         "@firebase/functions": {
             "version": "0.4.36",
@@ -5270,16 +5270,16 @@
             }
         },
         "firebase": {
-            "version": "7.9.3",
-            "resolved": "https://registry.npmjs.org/firebase/-/firebase-7.9.3.tgz",
-            "integrity": "sha512-9tIxZvA8/Tf5p7nPMEE9zFklbmwqny4qHxGzwG3Hus4TInkxyYeiGY2L1mNTV+WuTJzQYuo9NtCRZLBnsChpqQ==",
+            "version": "7.10.0",
+            "resolved": "https://registry.npmjs.org/firebase/-/firebase-7.10.0.tgz",
+            "integrity": "sha512-j80k8wsgg0N/t8uOkpGK6OT1MHHZ3Y/98nyZJJ+6lNodA6O79mXgyvI4AwXlPYd8qfmYeXwHz1f19sC+EqnZZg==",
             "requires": {
-                "@firebase/analytics": "0.2.15",
+                "@firebase/analytics": "0.2.16",
                 "@firebase/app": "0.5.5",
                 "@firebase/app-types": "0.5.2",
                 "@firebase/auth": "0.13.6",
                 "@firebase/database": "0.5.22",
-                "@firebase/firestore": "1.11.2",
+                "@firebase/firestore": "1.12.0",
                 "@firebase/functions": "0.4.36",
                 "@firebase/installations": "0.4.4",
                 "@firebase/messaging": "0.6.8",
@@ -14158,9 +14158,9 @@
             }
         },
         "yargs-parser": {
-            "version": "17.0.0",
-            "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-17.0.0.tgz",
-            "integrity": "sha512-Fl4RBJThsWeJl3cRZeGuolcuH78/foVUAYIUpKn8rkCnjn23ilZvJyEZJjnlzoG/+EJKPb1RggD4xS/Jie2nxg==",
+            "version": "18.0.0",
+            "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.0.0.tgz",
+            "integrity": "sha512-dEcTjO1rkFcERdsoh++v+o7PQ6+POeIS4lOHr5Xy3WuYWhU4+inNSpJSvnsAEd3TOgzytS4DrueTuswP3VAmWQ==",
             "requires": {
                 "camelcase": "^5.0.0",
                 "decamelize": "^1.2.0"
diff --git a/package.json b/package.json
index d93d10dab..a03d84cb1 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@nuxtjs/sitemap": "^2.0.1",
     "@nuxtjs/toast": "^3.3.0",
     "ace-builds": "^1.4.8",
-    "firebase": "^7.9.3",
+    "firebase": "^7.10.0",
     "graphql": "^14.6.0",
     "graphql-language-service-interface": "^2.3.3",
     "nuxt": "^2.11.0",
@@ -49,7 +49,7 @@
     "vuefire": "^2.2.1",
     "vuejs-auto-complete": "^0.9.0",
     "vuex-persist": "^2.2.0",
-    "yargs-parser": "^17.0.0"
+    "yargs-parser": "^18.0.0"
   },
   "devDependencies": {
     "cypress": "^4.1.0",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index cce5689ae..1a2f52508 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -178,6 +178,13 @@
               >
                 <i class="material-icons">file_copy</i>
               </button>
+              <button
+                class="icon"
+                @click="doPrettifyQuery"
+                v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
+              >
+                <i class="material-icons">photo_filter</i>
+              </button>
             </div>
           </div>
           <QueryEditor
@@ -452,6 +459,9 @@ export default {
   },
   methods: {
     getSpecialKey: getPlatformSpecialKey,
+    doPrettifyQuery() {
+      this.$refs.queryEditor.prettifyQuery()
+    },
     handleJumpToType(type) {
       const typesTab = document.getElementById("gqltypes-tab")
       typesTab.checked = true