diff --git a/package-lock.json b/package-lock.json
index c9122c7..3a0047d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "querymaster",
-  "version": "0.1.11",
+  "version": "0.2.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "querymaster",
-      "version": "0.1.11",
+      "version": "0.2.5",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -31,6 +31,7 @@
         "electron-updater": "^5.3.0",
         "mysql2": "^3.5.0",
         "node-sql-parser": "^4.7.0",
+        "query-master-lang-sql": "^1.0.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.8.1",
@@ -15282,6 +15283,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-master-lang-sql": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/query-master-lang-sql/-/query-master-lang-sql-1.0.2.tgz",
+      "integrity": "sha512-g/yuFJbvOdFKJRfL0YBUwIBBxA0tvns3k7xo4Pa38YEZkXYKbh52WQxqBrbKhOXljP2UtBw0z/3+hId/ezDR/Q==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -20544,7 +20557,8 @@
     "@emotion/use-insertion-effect-with-fallbacks": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz",
-      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A=="
+      "integrity": "sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A==",
+      "requires": {}
     },
     "@emotion/utils": {
       "version": "1.2.0",
@@ -21299,49 +21313,57 @@
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz",
       "integrity": "sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-remove-jsx-attribute": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-7.0.0.tgz",
       "integrity": "sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-remove-jsx-empty-expression": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-7.0.0.tgz",
       "integrity": "sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-replace-jsx-attribute-value": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz",
       "integrity": "sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-svg-dynamic-title": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz",
       "integrity": "sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-svg-em-dimensions": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz",
       "integrity": "sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-transform-react-native-svg": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz",
       "integrity": "sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-plugin-transform-svg-component": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz",
       "integrity": "sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@svgr/babel-preset": {
       "version": "6.5.1",
@@ -22481,19 +22503,22 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.0.1.tgz",
       "integrity": "sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@webpack-cli/info": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
       "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@webpack-cli/serve": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.2.tgz",
       "integrity": "sha512-S9h3GmOmzUseyeFW3tYNnWS7gNUuwxZ3mmMq0JyW78Vx1SGKPSkt5bT4pB0rUnVfHjP0EL9gW2bOzmtiTfQt0A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@xtuc/ieee754": {
       "version": "1.2.0",
@@ -22555,13 +22580,15 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "acorn-walk": {
       "version": "8.2.0",
@@ -22655,7 +22682,8 @@
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
       "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ansi-escapes": {
       "version": "4.3.2",
@@ -23298,7 +23326,8 @@
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/browserslist-config-erb/-/browserslist-config-erb-0.0.3.tgz",
       "integrity": "sha512-y47DryCY92lxkKyRVMlaZvXAolIY7U33q9e4CS0MdWeJkoAht7OzsrkfdZFCBOP3H5q1EVUxS0L7VVsKM6gZCQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "bs-logger": {
       "version": "0.2.6",
@@ -24102,7 +24131,8 @@
       "version": "6.4.0",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz",
       "integrity": "sha512-jDfsatwWMWN0MODAFuHszfjphEXfNw9JUAhmY4pLu3TyTU+ohUpsbVtbU+1MZn4a47D9kqh03i4eyOm+74+zew==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "css-loader": {
       "version": "6.7.3",
@@ -24282,7 +24312,8 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
       "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "csso": {
       "version": "4.2.0",
@@ -25491,7 +25522,8 @@
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
       "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-import-resolver-node": {
       "version": "0.3.7",
@@ -25770,7 +25802,8 @@
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz",
       "integrity": "sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-plugin-react": {
       "version": "7.32.2",
@@ -25827,7 +25860,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
       "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "eslint-scope": {
       "version": "5.1.1",
@@ -26986,7 +27020,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "identity-obj-proxy": {
       "version": "3.0.0",
@@ -27936,7 +27971,8 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz",
       "integrity": "sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "29.4.3",
@@ -29677,25 +29713,29 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
       "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-duplicates": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
       "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-empty": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
       "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-discard-overridden": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
       "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-merge-longhand": {
       "version": "5.1.7",
@@ -29763,7 +29803,8 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -29798,7 +29839,8 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
       "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "postcss-normalize-display-values": {
       "version": "5.1.0",
@@ -30110,6 +30152,18 @@
         "side-channel": "^1.0.4"
       }
     },
+    "query-master-lang-sql": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/query-master-lang-sql/-/query-master-lang-sql-1.0.2.tgz",
+      "integrity": "sha512-g/yuFJbvOdFKJRfL0YBUwIBBxA0tvns3k7xo4Pa38YEZkXYKbh52WQxqBrbKhOXljP2UtBw0z/3+hId/ezDR/Q==",
+      "requires": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/language": "^6.0.0",
+        "@codemirror/state": "^6.0.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -31303,7 +31357,8 @@
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.3.tgz",
       "integrity": "sha512-53BiGLXAcll9maCYtZi2RCQZKa8NQQai5C4horqKyRmHj9H7QmcUyucrH+4KW/gBQbXM2AsB0axoEcFZPlfPcw==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "style-mod": {
       "version": "4.0.3",
@@ -32175,7 +32230,8 @@
           "version": "7.5.9",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.9.tgz",
           "integrity": "sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -32570,7 +32626,8 @@
       "version": "8.13.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz",
       "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "xlsx": {
       "version": "0.18.5",
diff --git a/release/app/package-lock.json b/release/app/package-lock.json
index 7c1591f..3303cc6 100644
--- a/release/app/package-lock.json
+++ b/release/app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "query-master",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "query-master",
-      "version": "0.2.1",
+      "version": "0.2.5",
       "hasInstallScript": true,
       "license": "MIT"
     }
diff --git a/src/renderer/components/Modal/index.tsx b/src/renderer/components/Modal/index.tsx
index 98c3df1..584f972 100644
--- a/src/renderer/components/Modal/index.tsx
+++ b/src/renderer/components/Modal/index.tsx
@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
 import styles from './styles.module.scss';
 import Icon from '../Icon';
 
@@ -18,28 +19,31 @@ export default function Modal({
   wide,
   maxWidth,
 }: PropsWithChildren<ModalProps>) {
-  return open ? (
-    <>
-      <div className={styles.blur} onClick={onClose} />
-      <div
-        className={styles.modalContainer}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div
-          className={styles.modal}
-          style={{ width: wide ? '80%' : undefined, maxWidth }}
-        >
-          <div className={styles.modalHeader}>
-            <div className={styles.modalTitle}>{title}</div>
-            <div className={styles.modalClose} onClick={onClose}>
-              <Icon.Close />
+  return open
+    ? createPortal(
+        <>
+          <div className={styles.blur} onClick={onClose} />
+          <div
+            className={styles.modalContainer}
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div
+              className={styles.modal}
+              style={{ width: wide ? '80%' : undefined, maxWidth }}
+            >
+              <div className={styles.modalHeader}>
+                <div className={styles.modalTitle}>{title}</div>
+                <div className={styles.modalClose} onClick={onClose}>
+                  <Icon.Close />
+                </div>
+              </div>
+              <div>{children}</div>
             </div>
           </div>
-          <div>{children}</div>
-        </div>
-      </div>
-    </>
-  ) : null;
+        </>,
+        document.body
+      )
+    : null;
 }
 
 Modal.Body = ({