diff --git a/backend/utils/mysql/client/local.go b/backend/utils/mysql/client/local.go
index 0b3aa5916..ce2e3f9c3 100644
--- a/backend/utils/mysql/client/local.go
+++ b/backend/utils/mysql/client/local.go
@@ -147,7 +147,7 @@ func (r *Local) ChangePassword(info PasswordChangeInfo) error {
 		for _, user := range userlist {
 			passwordChangeSql := fmt.Sprintf("set password for %s = password('%s')", user, info.Password)
 			if !strings.HasPrefix(info.Version, "5.7") && !strings.HasPrefix(info.Version, "5.6") {
-				passwordChangeSql = fmt.Sprintf("ALTER USER %s IDENTIFIED WITH mysql_native_password BY '%s';", user, info.Password)
+				passwordChangeSql = fmt.Sprintf("alter user %s identified by '%s';", user, info.Password)
 			}
 			if err := r.ExecSQL(passwordChangeSql, info.Timeout); err != nil {
 				return err
@@ -276,7 +276,7 @@ func (r *Local) SyncDB(version string) ([]SyncDBInfo, error) {
 			From:   r.From,
 			Format: parts[1],
 		}
-		userLines, err := r.ExecSQLForRows(fmt.Sprintf("SELECT USER,HOST FROM mysql.DB WHERE DB = '%s'", parts[0]), 300)
+		userLines, err := r.ExecSQLForRows(fmt.Sprintf("select user,host from mysql.db where db = '%s'", parts[0]), 300)
 		if err != nil {
 			return datas, err
 		}
diff --git a/backend/utils/mysql/client/remote.go b/backend/utils/mysql/client/remote.go
index 131dff80e..7ab7354e0 100644
--- a/backend/utils/mysql/client/remote.go
+++ b/backend/utils/mysql/client/remote.go
@@ -263,7 +263,7 @@ func (r *Remote) Recover(info RecoverInfo) error {
 
 func (r *Remote) SyncDB(version string) ([]SyncDBInfo, error) {
 	var datas []SyncDBInfo
-	rows, err := r.Client.Query("SELECT SCHEMA_NAME, DEFAULT_CHARACTER_SET_NAME FROM information_schema.SCHEMATA")
+	rows, err := r.Client.Query("select schema_name, default_character_set_name from information_schema.SCHEMATA")
 	if err != nil {
 		return datas, err
 	}
@@ -283,7 +283,7 @@ func (r *Remote) SyncDB(version string) ([]SyncDBInfo, error) {
 			MysqlName: r.From,
 			Format:    charsetName,
 		}
-		userRows, err := r.Client.Query("SELECT USER,HOST FROM mysql.DB WHERE DB = ?", dbName)
+		userRows, err := r.Client.Query("select user,host from mysql.db where db = ?", dbName)
 		if err != nil {
 			return datas, err
 		}
diff --git a/frontend/src/routers/modules/database.ts b/frontend/src/routers/modules/database.ts
index efdb36754..2fc320484 100644
--- a/frontend/src/routers/modules/database.ts
+++ b/frontend/src/routers/modules/database.ts
@@ -27,6 +27,16 @@ const databaseRouter = {
                         requiresAuth: false,
                     },
                 },
+                {
+                    path: 'mysql/setting',
+                    name: 'MySQL-Setting',
+                    component: () => import('@/views/database/mysql/setting/index.vue'),
+                    hidden: true,
+                    meta: {
+                        activeMenu: '/databases',
+                        requiresAuth: false,
+                    },
+                },
                 {
                     path: 'mysql/remote',
                     name: 'MySQL-Remote',
diff --git a/frontend/src/views/database/mysql/index.vue b/frontend/src/views/database/mysql/index.vue
index 26b4665fa..b2c3a6eea 100644
--- a/frontend/src/views/database/mysql/index.vue
+++ b/frontend/src/views/database/mysql/index.vue
@@ -11,7 +11,7 @@
                 ></AppStatus>
             </template>
 
-            <template v-if="!isOnSetting" #search>
+            <template #search>
                 <el-select v-model="paginationConfig.from" @change="search()">
                     <template #prefix>{{ $t('commons.table.type') }}</template>
                     <el-option-group>
@@ -28,7 +28,7 @@
                 </el-select>
             </template>
 
-            <template #toolbar v-if="!isOnSetting">
+            <template #toolbar>
                 <el-row>
                     <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
                         <el-button
@@ -77,7 +77,7 @@
                     </el-col>
                 </el-row>
             </template>
-            <template #main v-if="(mysqlIsExist && !isOnSetting) || !isLocal()">
+            <template #main v-if="mysqlIsExist || !isLocal()">
                 <ComplexTable
                     :pagination-config="paginationConfig"
                     @sort-change="search"
@@ -162,14 +162,10 @@
             </LayoutContent>
         </div>
 
-        <el-card
-            v-if="mysqlStatus != 'Running' && !isOnSetting && mysqlIsExist && !loading && maskShow && isLocal"
-            class="mask-prompt"
-        >
+        <el-card v-if="mysqlStatus != 'Running' && mysqlIsExist && !loading && maskShow && isLocal" class="mask-prompt">
             <span>{{ $t('commons.service.serviceNotStarted', ['MySQL']) }}</span>
         </el-card>
 
-        <Setting ref="settingRef" style="margin-top: 20px" />
         <el-dialog
             v-model="phpVisiable"
             :title="$t('app.checkTitle')"
@@ -208,7 +204,6 @@ import DeleteDialog from '@/views/database/mysql/delete/index.vue';
 import PasswordDialog from '@/views/database/mysql/password/index.vue';
 import RootPasswordDialog from '@/views/database/mysql/conn/index.vue';
 import AppResources from '@/views/database/mysql/check/index.vue';
-import Setting from '@/views/database/mysql/setting/index.vue';
 import AppStatus from '@/components/app-status/index.vue';
 import Backups from '@/components/backup/index.vue';
 import UploadDialog from '@/components/upload/index.vue';
@@ -238,7 +233,6 @@ const maskShow = ref(true);
 const dbOptions = ref<Array<Database.RemoteDBOption>>([]);
 
 const mysqlName = ref();
-const isOnSetting = ref<boolean>();
 
 const checkRef = ref();
 const deleteRef = ref();
@@ -292,15 +286,8 @@ function isLocal() {
 
 const passwordRef = ref();
 
-const settingRef = ref();
 const onSetting = async () => {
-    isOnSetting.value = true;
-    let params = {
-        status: mysqlStatus.value,
-        mysqlName: mysqlName.value,
-        mysqlVersion: mysqlVersion.value,
-    };
-    settingRef.value!.acceptParams(params);
+    router.push({ name: 'MySQL-Setting' });
 };
 
 const search = async (column?: any) => {
diff --git a/frontend/src/views/database/mysql/setting/index.vue b/frontend/src/views/database/mysql/setting/index.vue
index e844717fa..14442a16c 100644
--- a/frontend/src/views/database/mysql/setting/index.vue
+++ b/frontend/src/views/database/mysql/setting/index.vue
@@ -1,7 +1,11 @@
 <template>
-    <div v-show="onSetting" v-loading="loading">
-        <LayoutContent :title="'MySQL ' + $t('commons.button.set')" :reload="true">
-            <template #buttons>
+    <div v-loading="loading">
+        <LayoutContent>
+            <template #title>
+                <back-button name="MySQL" :header="'MySQL ' + $t('commons.button.set')" />
+            </template>
+
+            <template #toolbar>
                 <el-button type="primary" :plain="activeName !== 'conf'" @click="jumpToConf">
                     {{ $t('database.confChange') }}
                 </el-button>
@@ -115,12 +119,12 @@ import Status from '@/views/database/mysql/setting/status/index.vue';
 import Variables from '@/views/database/mysql/setting/variables/index.vue';
 import SlowLog from '@/views/database/mysql/setting/slow-log/index.vue';
 import ConfirmDialog from '@/components/confirm-dialog/index.vue';
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { Codemirror } from 'vue-codemirror';
 import { javascript } from '@codemirror/lang-javascript';
 import { oneDark } from '@codemirror/theme-one-dark';
 import { loadDatabaseFile, loadMysqlBaseInfo, loadMysqlVariables, updateMysqlConfByFile } from '@/api/modules/database';
-import { ChangePort, GetAppDefaultConfig } from '@/api/modules/app';
+import { ChangePort, CheckAppInstalled, GetAppDefaultConfig } from '@/api/modules/app';
 import { Rules } from '@/global/form-rules';
 import i18n from '@/lang';
 import { MsgSuccess } from '@/utils/message';
@@ -146,34 +150,12 @@ const statusRef = ref();
 const variablesRef = ref();
 const slowLogRef = ref();
 
-const onSetting = ref<boolean>(false);
 const mysqlName = ref();
 const mysqlStatus = ref();
 const mysqlVersion = ref();
 const variables = ref();
 
-interface DialogProps {
-    mysqlName: string;
-    mysqlVersion: string;
-    status: string;
-}
-
 const dialogContainerLogRef = ref();
-const acceptParams = (props: DialogProps): void => {
-    onSetting.value = true;
-    mysqlStatus.value = props.status;
-    mysqlVersion.value = props.mysqlVersion;
-    loadBaseInfo();
-    if (mysqlStatus.value === 'Running') {
-        loadVariables();
-        loadSlowLogs();
-        statusRef.value!.acceptParams({ mysqlName: props.mysqlName });
-    }
-};
-const onClose = (): void => {
-    onSetting.value = false;
-};
-
 const jumpToConf = async () => {
     activeName.value = 'conf';
     loadMysqlConf();
@@ -303,8 +285,21 @@ const loadMysqlConf = async () => {
     mysqlConf.value = res.data;
 };
 
-defineExpose({
-    acceptParams,
-    onClose,
+const onLoadInfo = async () => {
+    await CheckAppInstalled('mysql').then((res) => {
+        mysqlName.value = res.data.name;
+        mysqlStatus.value = res.data.status;
+        mysqlVersion.value = res.data.version;
+        loadBaseInfo();
+        if (mysqlStatus.value === 'Running') {
+            loadVariables();
+            loadSlowLogs();
+            statusRef.value!.acceptParams({ mysqlName: mysqlName.value });
+        }
+    });
+};
+
+onMounted(() => {
+    onLoadInfo();
 });
 </script>