diff --git a/package-lock.json b/package-lock.json
index 2e14416..e7ad18c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
       "name": "dockit",
       "version": "0.0.0",
       "dependencies": {
+        "@highlightjs/vue-plugin": "^2.1.0",
         "debug": "^4.3.4",
         "electron-store": "^8.1.0",
+        "highlight.js": "^11.8.0",
         "pinia": "^2.1.6",
         "vue": "^3.3.4",
         "vue-i18n": "^9.2.2",
@@ -21,6 +23,7 @@
         "@types/node": "^20.4.7",
         "@typescript-eslint/eslint-plugin": "^6.2.1",
         "@typescript-eslint/parser": "^6.2.1",
+        "@vicons/antd": "^0.12.0",
         "@vicons/carbon": "^0.12.0",
         "@vitejs/plugin-vue": "^4.2.3",
         "concurrently": "^8.2.0",
@@ -1422,6 +1425,15 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@highlightjs/vue-plugin": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
+      "integrity": "sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==",
+      "peerDependencies": {
+        "highlight.js": "^11.0.1",
+        "vue": "^3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -2620,6 +2632,12 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@vicons/antd": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@vicons/antd/-/antd-0.12.0.tgz",
+      "integrity": "sha512-C0p6aO1EmGG1QHrqgUWQS1No20934OdWSRQshM5NIDK5H1On6tC26U0hT6Rmp40KfUsvhvX5YW8BoWJdNFifPg==",
+      "dev": true
+    },
     "node_modules/@vicons/carbon": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@vicons/carbon/-/carbon-0.12.0.tgz",
@@ -5588,7 +5606,6 @@
       "version": "11.8.0",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz",
       "integrity": "sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==",
-      "dev": true,
       "engines": {
         "node": ">=12.0.0"
       }
diff --git a/src/lang/index.ts b/src/lang/index.ts
index d0b05c8..53de9f0 100644
--- a/src/lang/index.ts
+++ b/src/lang/index.ts
@@ -15,6 +15,13 @@ const enUS = {
     username: 'Username',
     password: 'Password',
     queryParameters: 'query parameters',
+    add: 'Add connection',
+    testSuccess: 'connect success',
+    formValidation: {
+      nameRequired: 'Name is required',
+      hostRequired: 'Host is required',
+      portRequired: 'Port is required',
+    },
   },
   form: {
     confirm: 'Confirm',
@@ -38,6 +45,13 @@ const zhCN = {
     username: '用户名',
     password: '密码',
     queryParameters: '查询参数',
+    add: '添加连接',
+    testSuccess: '连接成功',
+    formValidation: {
+      nameRequired: '请输入连接名称',
+      hostRequired: '请输入主机地址',
+      portRequired: '请输入端口号',
+    },
   },
   form: {
     confirm: '确认',
@@ -51,12 +65,16 @@ if (langType === 'auto') {
   langName = navigator.language === 'zh-CN' ? 'zhCN' : 'enUS';
 }
 
-const i18n = createI18n({
+const lang = createI18n({
   globalInjection: true,
   locale: langName,
+  legacy: false,
   messages: {
     zhCN,
     enUS,
   },
 });
-export default i18n;
+import { useI18n } from 'vue-i18n';
+const useLang = useI18n;
+
+export { lang, useLang };
diff --git a/src/main.ts b/src/main.ts
index 470341f..6ba392b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-import i18n from './lang';
+import { lang } from './lang';
 
 import './assets/styles/normalize.css';
 import './assets/styles/theme.scss';
@@ -11,6 +11,6 @@ const app = createApp(App);
 
 app.use(router);
 app.use(store);
-app.use(i18n);
+app.use(lang);
 
 app.mount('#app');
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index 51edc7e..fcfd00f 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -6,10 +6,10 @@ export type Connection = {
   id?: number;
   name: string;
   host: string;
-  port: number;
+  port: number | string;
   username?: string;
   password?: string;
-  linkUrl?: '';
+  queryParameters?: string;
 };
 const { storeAPI } = window;
 export const useConnectionStore = defineStore('connectionStore', {
diff --git a/src/views/connect/components/add-dialog.vue b/src/views/connect/components/add-dialog.vue
index bc47160..51241e6 100644
--- a/src/views/connect/components/add-dialog.vue
+++ b/src/views/connect/components/add-dialog.vue
@@ -83,13 +83,23 @@
       <template #footer>
         <div class="card-footer">
           <div class="left">
-            <n-button type="info" :loading="testLoading" @click="testConnect">
+            <n-button
+              type="info"
+              :loading="testLoading"
+              :disabled="!validationPassed"
+              @click="testConnect"
+            >
               {{ $t('connection.test') }}
             </n-button>
           </div>
           <div class="right">
             <n-button @click="closeModal">{{ $t('form.cancel') }}</n-button>
-            <n-button type="primary" :loading="saveLoading" @click="saveConnect">
+            <n-button
+              type="primary"
+              :loading="saveLoading"
+              :disabled="!validationPassed"
+              @click="saveConnect"
+            >
               {{ $t('form.confirm') }}
             </n-button>
           </div>
@@ -102,20 +112,21 @@
 <script setup lang="ts">
 import { Close } from '@vicons/carbon';
 import { CustomError } from '../../../common/customError';
-import { useConnectionStore } from '../../../store/connectionStore';
-import { useAppStore } from '../../../store';
-const { testConnection, saveConnection } = useConnectionStore();
+import { Connection, useConnectionStore } from '../../../store/connectionStore';
+import { useLang } from '../../../lang';
+import { FormValidationError } from 'naive-ui';
 
-const appStore = useAppStore();
+const { testConnection, saveConnection } = useConnectionStore();
+const lang = useLang();
 // DOM
 const connectFormRef = ref();
 
 const showModal = ref(false);
-const modalTitle = ref('添加连接');
+const modalTitle = ref(lang.t('connection.add'));
 const testLoading = ref(false);
 const saveLoading = ref(false);
 
-const formOriginData = ref({
+const formData = ref<Connection>({
   name: '',
   host: '',
   port: '9200',
@@ -123,83 +134,55 @@ const formOriginData = ref({
   password: '',
   queryParameters: '',
 });
-const formData = ref(formOriginData.value);
 const formRules = reactive({
   name: [
     {
       required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写连接名称' : 'Name is required',
+      renderMessage: () => lang.t('connection.formValidation.nameRequired'),
       trigger: ['input', 'blur'],
     },
   ],
   host: [
     {
       required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写主机地址' : 'Hose is required',
+      renderMessage: () => lang.t('connection.formValidation.hostRequired'),
       trigger: ['input', 'blur'],
     },
   ],
   port: [
     {
       required: true,
-      renderMessage: () => (appStore.languageType === 'zhCN' ? '请填写端口号' : 'Port is required'),
-      trigger: ['input', 'blur'],
-    },
-  ],
-  username: [
-    {
-      required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写用户名' : 'Username is required',
-      trigger: ['input', 'blur'],
-    },
-  ],
-  password: [
-    {
-      required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写密码' : 'Password is required',
-      trigger: ['input', 'blur'],
-    },
-  ],
-  queryParameters: [
-    {
-      required: true,
-      renderMessage: () =>
-        appStore.languageType === 'zhCN' ? '请填写查询参数' : 'queryParameters is required',
+      renderMessage: () => lang.t('connection.formValidation.portRequired'),
       trigger: ['input', 'blur'],
     },
   ],
 });
 const message = useMessage();
 
-const showMedal = (obj: object) => {
+const showMedal = (con: Connection | null) => {
   showModal.value = true;
-  if (obj) {
-    // TODO:
-    formData.value = { ...obj };
+  if (con) {
+    formData.value = con;
   }
 };
 const closeModal = () => {
   showModal.value = false;
 };
 
-const formValidation = async (event: MouseEvent): Promise<boolean> => {
-  event.preventDefault();
-  return connectFormRef.value?.validate(errors => {
-    return errors ? false : true;
-  });
-};
+const validationPassed = watch(formData.value, async () => {
+  try {
+    return await connectFormRef.value?.validate((errors: Array<FormValidationError>) => !errors);
+  } catch (e) {
+    return false;
+  }
+});
 
 const testConnect = async (event: MouseEvent) => {
-  const validation = await formValidation(event);
-  if (validation) return;
+  event.preventDefault();
   testLoading.value = !testLoading.value;
   try {
-    await testConnection({ ...formData.value, port: parseInt(formData.value.port) });
-    message.success('connect success');
+    await testConnection({ ...formData.value, port: parseInt(formData.value.port as string) });
+    message.success(lang.t('connection.testSuccess'));
   } catch (e) {
     const error = e as CustomError;
     message.error(`status: ${error.status}, details: ${error.details}`, {
@@ -213,9 +196,9 @@ const testConnect = async (event: MouseEvent) => {
 };
 
 const saveConnect = async (event: MouseEvent) => {
-  await formValidation(event);
+  event.preventDefault();
   saveLoading.value = !saveLoading.value;
-  saveConnection({ ...formData.value, port: parseInt(formData.value.port) });
+  saveConnection({ ...formData.value, port: parseInt(formData.value.port as string) });
   saveLoading.value = !saveLoading.value;
   showModal.value = false;
 };