diff --git a/ui/package-lock.json b/ui/package-lock.json
index 2cecb0a..b37450c 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -13,6 +13,7 @@
         "codemirror": "^5.65.17",
         "codemirror-json-schema": "^0.8.1",
         "element-plus": "^2.10.4",
+        "sql-formatter": "^15.6.10",
         "vue": "^3.5.17",
         "vue-codemirror": "^5.1.0",
         "vue-i18n": "^11.1.9"
@@ -2390,6 +2391,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/sql-formatter": {
+      "version": "15.6.10",
+      "resolved": "https://registry.npmmirror.com/sql-formatter/-/sql-formatter-15.6.10.tgz",
+      "integrity": "sha512-0bJOPQrRO/JkjQhiThVayq0hOKnI1tHI+2OTkmT7TGtc6kqS+V7kveeMzRW+RNQGxofmTmet9ILvztyuxv0cJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "nearley": "^2.20.1"
+      },
+      "bin": {
+        "sql-formatter": "bin/sql-formatter-cli.cjs"
+      }
+    },
     "node_modules/stringify-entities": {
       "version": "4.0.4",
       "resolved": "https://registry.npmmirror.com/stringify-entities/-/stringify-entities-4.0.4.tgz",
diff --git a/ui/package.json b/ui/package.json
index e5b7f85..82ba94b 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -10,14 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.5.17",
-    "element-plus": "^2.10.4",
-    "vue-i18n": "^11.1.9",
-    "vue-codemirror": "^5.1.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-sql": "github:codemirror/lang-sql",
     "codemirror": "^5.65.17",
     "codemirror-json-schema": "^0.8.1",
-    "@codemirror/lang-json": "^6.0.2",
-    "@codemirror/lang-sql": "github:codemirror/lang-sql"
+    "element-plus": "^2.10.4",
+    "sql-formatter": "^15.6.10",
+    "vue": "^3.5.17",
+    "vue-codemirror": "^5.1.0",
+    "vue-i18n": "^11.1.9"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
diff --git a/ui/src/components/DataManager.vue b/ui/src/components/DataManager.vue
index 3e9d677..f22460b 100644
--- a/ui/src/components/DataManager.vue
+++ b/ui/src/components/DataManager.vue
@@ -9,8 +9,11 @@ import type { Pair } from './types'
 import { GetDataManagerPreference, SetDataManagerPreference } from './cache'
 import {ElMessage, type ElTree} from 'element-plus'
 import { Codemirror } from 'vue-codemirror'
+import { standardKeymap } from "@codemirror/commands"
+import { keymap } from "@codemirror/view"
 import { sql, StandardSQL, MySQL, PostgreSQL, Cassandra } from "@codemirror/lang-sql"
 import type { SQLConfig } from "@codemirror/lang-sql"
+import { format } from 'sql-formatter';
 import HistoryInput from './HistoryInput.vue'
 import { Refresh, Document } from '@element-plus/icons-vue'
 import { Magic } from './magicKeys'
@@ -229,6 +232,13 @@ const ormDataHandler = (data: QueryData) => {
   })
 }
 
+const formatSQL = () => {
+  sqlQuery.value = format(sqlQuery.value, {
+    keywordCase: 'upper',
+    language: 'mysql'
+  })
+}
+
 const keyValueDataHandler = (data: QueryData) => {
   queryResult.value = []
   columns.value = ['key', 'value']
@@ -410,6 +420,7 @@ Magic.LoadMagicKeys('DataManager', new Map([
                           </el-col>
                           <el-col :span="2">
                               <el-form-item>
+                                  <el-button type="primary" @click="formatSQL" :disabled="kind === ''">Format</el-button>
                                   <el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
                               </el-form-item>
                           </el-col>
@@ -441,7 +452,7 @@ Magic.LoadMagicKeys('DataManager', new Map([
                       v-model="sqlQuery"
                       v-if="complexEditor"
                       style="height: var(--sql-editor-height);"
-                      :extensions="[sql(sqlConfig)]"
+                      :extensions="[sql(sqlConfig), keymap.of(standardKeymap)]"
                   />
               </el-splitter-panel>
               <el-splitter-panel v-if="store !== ''">