diff --git a/server/resource/template/web/form.vue.tpl b/server/resource/template/web/form.vue.tpl
index 73340b0b0..b9bd081af 100644
--- a/server/resource/template/web/form.vue.tpl
+++ b/server/resource/template/web/form.vue.tpl
@@ -1,26 +1,26 @@
 <template>
   <div>
     <div class="gva-form-box">
-      <el-form :model="formData" label-position="right" label-width="80px">
+      <el-form :model="formData" label-position="right" label-width="20%">
       {{- range .Fields}}
         <el-form-item label="{{.FieldDesc}}:">
       {{- if eq .FieldType "bool" }}
-          <el-switch v-model="formData.{{.FieldJson}}" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
+          <el-switch v-model="formData.{{.FieldJson}}" active-color="#13ce66" inactive-color="#ff4949" :active-text="t('general.yes')" :inactive-text="t('general.no')" clearable ></el-switch>
       {{- end }}
       {{- if eq .FieldType "string" }}
-          <el-input v-model="formData.{{.FieldJson}}" clearable placeholder="请输入" />
+          <el-input v-model="formData.{{.FieldJson}}" clearable :placeholder="t('general.pleaseEnter')" />
       {{- end }}
       {{- if eq .FieldType "int" }}
       {{- if .DictType }}
-          <el-select v-model="formData.{{ .FieldJson }}" placeholder="请选择" clearable>
+          <el-select v-model="formData.{{ .FieldJson }}" :placeholder="t('general.pleaseSelect')" clearable>
             <el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
           </el-select>
       {{- else }}
-          <el-input v-model.number="formData.{{ .FieldJson }}" clearable placeholder="请输入" />
+          <el-input v-model.number="formData.{{ .FieldJson }}" clearable :placeholder="t('general.pleaseEnter')" />
       {{- end }}
       {{- end }}
       {{- if eq .FieldType "time.Time" }}
-          <el-date-picker v-model="formData.{{ .FieldJson }}" type="date" placeholder="选择日期" clearable></el-date-picker>
+          <el-date-picker v-model="formData.{{ .FieldJson }}" type="date" :placeholder="t('general.selectDate')" clearable></el-date-picker>
       {{- end }}
       {{- if eq .FieldType "float64" }}
           <el-input-number v-model="formData.{{ .FieldJson }}" :precision="2" clearable></el-input-number>
@@ -28,8 +28,8 @@
         </el-form-item>
       {{- end }}
         <el-form-item>
-          <el-button size="mini" type="primary" @click="save">保存</el-button>
-          <el-button size="mini" type="primary" @click="back">返回</el-button>
+          <el-button size="mini" type="primary" @click="save">{{ "{{ t('general.save') }}"</el-button>
+          <el-button size="mini" type="primary" @click="back">{{ "{{ t('general.back') }}"</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -119,7 +119,7 @@ const save = async() => {
       if (res.code === 0) {
         ElMessage({
           type: 'success',
-          message: '创建/更改成功'
+          message: t('general.createUpdateSuccess')
         })
       }
 }
diff --git a/server/resource/template/web/table.vue.tpl b/server/resource/template/web/table.vue.tpl
index d5631faa9..cb663ff17 100644
--- a/server/resource/template/web/table.vue.tpl
+++ b/server/resource/template/web/table.vue.tpl
@@ -7,12 +7,12 @@
             <el-select v-model="searchInfo.{{.FieldJson}}" clearable :placeholder="t('general.pleaseSelect')">
                 <el-option
                     key="true"
-                    label="t('general.yes')"
+                    :label="t('general.yes')"
                     value="true">
                 </el-option>
                 <el-option
                     key="false"
-                    label="t('general.no')"
+                    :label="t('general.no')"
                     value="false">
                 </el-option>
             </el-select>
@@ -91,22 +91,22 @@
     {{- range .Fields}}
         <el-form-item label="{{.FieldDesc}}:">
       {{- if eq .FieldType "bool" }}
-          <el-switch v-model="formData.{{.FieldJson}}" active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" clearable ></el-switch>
+          <el-switch v-model="formData.{{.FieldJson}}" active-color="#13ce66" inactive-color="#ff4949" :active-text="t('general.yes')" :inactive-text="t('general.no')" clearable ></el-switch>
       {{- end }}
       {{- if eq .FieldType "string" }}
-          <el-input v-model="formData.{{.FieldJson}}" clearable placeholder="请输入" />
+          <el-input v-model="formData.{{.FieldJson}}" clearable :placeholder="t('general.pleaseEnter')" />
       {{- end }}
       {{- if eq .FieldType "int" }}
       {{- if .DictType}}
-          <el-select v-model="formData.{{ .FieldJson }}" placeholder="请选择" style="width:100%" clearable>
+          <el-select v-model="formData.{{ .FieldJson }}" :placeholder="t('general.pleaseSelect')" style="width:100%" clearable>
             <el-option v-for="(item,key) in {{ .DictType }}Options" :key="key" :label="item.label" :value="item.value" />
           </el-select>
       {{- else }}
-          <el-input v-model.number="formData.{{ .FieldJson }}" clearable placeholder="请输入" />
+          <el-input v-model.number="formData.{{ .FieldJson }}" clearable :placeholder="t('general.pleaseEnter')" />
       {{- end }}
       {{- end }}
       {{- if eq .FieldType "time.Time" }}
-          <el-date-picker v-model="formData.{{ .FieldJson }}" type="date" style="width:100%" placeholder="选择日期" clearable />
+          <el-date-picker v-model="formData.{{ .FieldJson }}" type="date" style="width:100%" :placeholder="t('general.selectDate')" clearable />
       {{- end }}
       {{- if eq .FieldType "float64" }}
           <el-input-number v-model="formData.{{ .FieldJson }}"  style="width:100%" :precision="2" clearable />
@@ -116,8 +116,8 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          <el-button size="small" @click="closeDialog">{{ "{{ t('general.close') }}" }}</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">{{ "{{ t('general.confirm') }}" }}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -242,9 +242,9 @@ const handleSelectionChange = (val) => {
 
 // 删除行
 const deleteRow = (row) => {
-    ElMessageBox.confirm('确定要删除吗?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+    ElMessageBox.confirm(t('general.deleteConfirm'), t('general.hint')), {
+        confirmButtonText: t('general.confirm'),
+        cancelButtonText: t('general.cancel'),
         type: 'warning'
     }).then(() => {
             delete{{.StructName}}Func(row)
@@ -261,7 +261,7 @@ const onDelete = async() => {
       if (multipleSelection.value.length === 0) {
         ElMessage({
           type: 'warning',
-          message: '请选择要删除的数据'
+          message: t('general.selectDataToDelete')
         })
         return
       }
@@ -273,7 +273,7 @@ const onDelete = async() => {
       if (res.code === 0) {
         ElMessage({
           type: 'success',
-          message: '删除成功'
+          message: t('general.deleteSuccess')
         })
         if (tableData.value.length === ids.length && page.value > 1) {
           page.value--
@@ -303,7 +303,7 @@ const delete{{.StructName}}Func = async (row) => {
     if (res.code === 0) {
         ElMessage({
                 type: 'success',
-                message: '删除成功'
+                message: t('general.deleteSuccess')
             })
             if (tableData.value.length === 1 && page.value > 1) {
             page.value--
@@ -361,7 +361,7 @@ const enterDialog = async () => {
       if (res.code === 0) {
         ElMessage({
           type: 'success',
-          message: '创建/更改成功'
+          message: t('general.createUpdateSuccess')
         })
         closeDialog()
         getTableData()
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index 5aed0f38b..0f435dba1 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -138,7 +138,15 @@
 		"undeleted": "Undeleted",
 		"updateSuccess": "Updated Successfully!",
 		"warning": "Warning",
-		"yes": "Yes"
+		"yes": "Yes",
+		"pleaseEnter" : "Please enter",
+		"selectDate" :"Select date",
+		"save" : "Save",
+		"back" : "Back",
+		"createUpdateSuccess" : "Create/change successful",
+		"deleteConfirm" : "You sure you want to delete it?",
+		"selectDataToDelete" : "Please select the data to delete",
+		"" : ""
 	},
 	"historyComponent": {
 		"closeAll": "Close All",
diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json
index 0d8ec0088..dd7baf567 100644
--- a/web/src/locales/zh.json
+++ b/web/src/locales/zh.json
@@ -117,7 +117,7 @@
 		"add": "新增",
 		"addSuccess": "添加成功!",
 		"cancel": "取消",
-		"close": "取 消",
+		"close": "取消",
 		"confirm": "确定",
 		"copy": "拷贝",
 		"copySuccess": "复制成功!",
@@ -138,7 +138,15 @@
 		"undeleted": "已取消删除",
 		"updateSuccess": "更新成功!",
 		"warning": "警告",
-		"yes": "是"
+		"yes": "是",
+		"pleaseEnter" : "请输入",
+		"selectDate" :"选择日期",
+		"save" : "保存",
+		"back" : "返回",
+		"createUpdateSuccess" : "创建/更改成功",
+		"deleteConfirm" : "确定要删除吗?",
+		"selectDataToDelete" : "请选择要删除的数据",
+		"" : ""
 	},
 	"historyComponent": {
 		"closeAll": "关闭所有",
diff --git a/web/src/view/dashboard/dashboardCharts/echartsLine.vue b/web/src/view/dashboard/dashboardCharts/echartsLine.vue
index 3d91b0186..361289300 100644
--- a/web/src/view/dashboard/dashboardCharts/echartsLine.vue
+++ b/web/src/view/dashboard/dashboardCharts/echartsLine.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard-line-box">
     <div class="dashboard-line-title">
-      {{ t("view.dashboard.dashboardCharts.accesssTrends") }}
+      {{ t('view.dashboard.dashboardCharts.accesssTrends') }}
     </div>
     <div
       ref="echart"
diff --git a/web/src/view/dashboard/index.vue b/web/src/view/dashboard/index.vue
index a1c201ca1..0491b3cd3 100644
--- a/web/src/view/dashboard/index.vue
+++ b/web/src/view/dashboard/index.vue
@@ -3,8 +3,8 @@
     <div class="gva-card-box">
       <div class="gva-card gva-top-card">
         <div class="gva-top-card-left">
-          <div class="gva-top-card-left-title">{{ t("view.dashboard.title") }}</div>
-          <div class="gva-top-card-left-dot">{{ t("view.dashboard.note") }}</div>
+          <div class="gva-top-card-left-title">{{ t('view.dashboard.title') }}</div>
+          <div class="gva-top-card-left-dot">{{ t('view.dashboard.note') }}</div>
           <div class="gva-top-card-left-rows">
             <el-row v-auth="888">
               <el-col :span="8" :xs="24" :sm="8">
@@ -12,7 +12,7 @@
                   <el-icon class="dasboard-icon">
                     <sort />
                   </el-icon>
-                  {{ t("view.dashboard.todaysTraffic") }} (1231231)
+                  {{ t('view.dashboard.todaysTraffic') }} (1231231)
                 </div>
               </el-col>
               <el-col :span="8" :xs="24" :sm="8">
@@ -20,7 +20,7 @@
                   <el-icon class="dasboard-icon">
                     <avatar />
                   </el-icon>
-                  {{ t("view.dashboard.totalNumberOfUsers") }} (24001)
+                  {{ t('view.dashboard.totalNumberOfUsers') }} (24001)
                 </div>
               </el-col>
               <el-col :span="8" :xs="24" :sm="8">
@@ -28,14 +28,14 @@
                   <el-icon class="dasboard-icon">
                     <comment />
                   </el-icon>
-                  {{ t("view.dashboard.positiveRatings") }} (99%)
+                  {{ t('view.dashboard.positiveRatings') }} (99%)
                 </div>
               </el-col>
             </el-row>
           </div>
           <div>
             <div class="gva-top-card-left-item">
-              {{ t("view.dashboard.instructionalUse") }}
+              {{ t('view.dashboard.instructionalUse') }}
               <a
                 style="color:#409EFF"
                 target="view_window"
@@ -43,7 +43,7 @@
               >https://www.bilibili.com/video/BV1Rg411u7xH</a>
             </div>
             <div class="gva-top-card-left-item">
-              {{ t("view.dashboard.pluginRepo") }}
+              {{ t('view.dashboard.pluginRepo') }}
               <a
                 style="color:#409EFF"
                 target="view_window"
@@ -59,7 +59,7 @@
       <el-card class="gva-card quick-entrance">
         <template #header>
           <div class="card-header">
-            <span>{{ t("view.dashboard.quickEntry") }}</span>
+            <span>{{ t('view.dashboard.quickEntry') }}</span>
           </div>
         </template>
         <el-row :gutter="20">
@@ -87,7 +87,7 @@
     <div class="gva-card-box">
       <div class="gva-card">
         <div class="card-header">
-          <span>{{ t("view.dashboard.statistics") }}</span>
+          <span>{{ t('view.dashboard.statistics') }}</span>
         </div>
         <div class="echart-box">
           <el-row :gutter="20">
diff --git a/web/src/view/example/customer/customer.vue b/web/src/view/example/customer/customer.vue
index fff19f261..9d60625dc 100644
--- a/web/src/view/example/customer/customer.vue
+++ b/web/src/view/example/customer/customer.vue
@@ -60,8 +60,8 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          <el-button size="small" @click="closeDialog">{{ t('general.close') }}</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">{{ t('general.confirm') }}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -80,6 +80,9 @@ import warningBar from '@/components/warningBar/warningBar.vue'
 import { ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { formatDate } from '@/utils/format'
+import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
+
+const { t } = useI18n() // added by mohamed hassan to support multilanguage
 
 const form = ref({
   customerName: '',
diff --git a/web/src/view/person/person.vue b/web/src/view/person/person.vue
index a61134cc8..01f31fb49 100644
--- a/web/src/view/person/person.vue
+++ b/web/src/view/person/person.vue
@@ -158,12 +158,12 @@
           <el-button
             size="small"
             @click="showPassword = false"
-          >取 消</el-button>
+          >{{ t('general.close') }}</el-button>
           <el-button
             size="small"
             type="primary"
             @click="savePassword"
-          >确 定</el-button>
+          >{{ t('general.confirm') }}</el-button>
         </div>
       </template>
     </el-dialog>
@@ -236,6 +236,9 @@ import { setSelfInfo, changePassword } from '@/api/user.js'
 import { reactive, ref } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useUserStore } from '@/pinia/modules/user'
+import { useI18n } from 'vue-i18n' // added by mohamed hassan to support multilanguage
+
+const { t } = useI18n() // added by mohamed hassan to support multilanguage
 
 const path = ref(import.meta.env.VITE_BASE_API)
 const activeName = ref('second')
diff --git a/web/src/view/superAdmin/api/api.vue b/web/src/view/superAdmin/api/api.vue
index 816f31fc2..54f752d8c 100644
--- a/web/src/view/superAdmin/api/api.vue
+++ b/web/src/view/superAdmin/api/api.vue
@@ -114,8 +114,8 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          <el-button size="small" @click="closeDialog">{{ t('general.close') }}</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">{{ t('general.confirm') }}</el-button>
         </div>
       </template>
     </el-dialog>
diff --git a/web/src/view/superAdmin/authority/components/menus.vue b/web/src/view/superAdmin/authority/components/menus.vue
index 264ec89b8..f81def5f3 100644
--- a/web/src/view/superAdmin/authority/components/menus.vue
+++ b/web/src/view/superAdmin/authority/components/menus.vue
@@ -54,8 +54,8 @@
       </el-table>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          <el-button size="small" @click="closeDialog">{{ t('general.close') }}</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">{{ t('general.confirm') }}</el-button>
         </div>
       </template>
     </el-dialog>
diff --git a/web/src/view/superAdmin/dictionary/sysDictionary.vue b/web/src/view/superAdmin/dictionary/sysDictionary.vue
index cbae1f5b3..14eef37bd 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionary.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionary.vue
@@ -184,12 +184,12 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="closeDialog">取 消</el-button>
+          <el-button size="small" @click="closeDialog">{{ t('general.close') }}</el-button>
           <el-button
             size="small"
             type="primary"
             @click="enterDialog"
-          >确 定</el-button>
+          >{{ t('general.confirm') }}</el-button>
         </div>
       </template>
     </el-dialog>
diff --git a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
index 66823ed34..d90f57cc4 100644
--- a/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
+++ b/web/src/view/superAdmin/dictionary/sysDictionaryDetail.vue
@@ -105,8 +105,8 @@
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button size="small" @click="closeDialog">取 消</el-button>
-          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+          <el-button size="small" @click="closeDialog">{{ t('general.close') }}</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">{{ t('general.confirm') }}</el-button>
         </div>
       </template>
     </el-dialog>