diff --git a/quasar.config.cjs b/quasar.config.cjs
index 69d18c9..3b225e9 100644
--- a/quasar.config.cjs
+++ b/quasar.config.cjs
@@ -74,7 +74,7 @@ module.exports = configure(function (ctx) {
       env: {
         API: ctx.dev
           ? '/api'
-          : '/api',
+          : 'https://101.42.255.156/api',
         TITLE: ''
       },
 
diff --git a/src/boot/msw-server.ts b/src/boot/msw-server.ts
index b972664..85aa1ee 100644
--- a/src/boot/msw-server.ts
+++ b/src/boot/msw-server.ts
@@ -4,7 +4,7 @@ import { handlers } from 'src/mocks' // 您的请求处理程序
 
 export default boot(() => {
   // dev
-  if (process.env.PROD) {
+  if (process.env.DEV) {
     const worker = setupWorker(...handlers)
     worker.start()
   }
diff --git a/src/pages/exploiters/generators/IndexPage.vue b/src/pages/exploiters/generators/IndexPage.vue
index 6d984e1..9a4f828 100644
--- a/src/pages/exploiters/generators/IndexPage.vue
+++ b/src/pages/exploiters/generators/IndexPage.vue
@@ -26,14 +26,14 @@
 
     <!-- preview -->
     <q-dialog v-model="previewVisible">
-      <q-card style="max-width: 45em; width: 45em;">
+      <q-card class="full-width">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">{{ $t('preview') }}</div>
           <q-space />
           <q-btn icon="sym_r_close" flat round dense v-close-popup />
         </q-card-section>
 
-        <q-card-section style="height: 70vh;" class="scroll">
+        <q-card-section style="max-height: 70vh;" class="scroll">
           <q-tabs v-model="tab" no-caps dense>
             <q-tab v-for="item in renderedTemplates" :key="item.id" :name="item.id" :label="item.name + item.suffix" />
           </q-tabs>
@@ -85,11 +85,13 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="create" round class="q-ml-sm" color="primary" :disable="loading" icon="sym_r_add"
+        <q-btn title="create" round padding="xs" class="q-mx-sm" color="primary" :disable="loading" icon="sym_r_add"
           @click="saveRow()" />
-        <q-btn title="import" round outline color="primary" class="q-mx-sm" :disable="loading" icon="sym_r_upload"
-          @click="importRow" />
-        <q-btn title="export" round outline color="primary" icon="sym_r_file_save" @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" :disable="loading" icon="sym_r_refresh"
+          @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -202,9 +204,7 @@ const configColumns: QTableProps['columns'] = [
   { name: 'fieldType', label: 'fieldType', align: 'left', field: 'fieldType' },
   { name: 'formType', label: 'formType', align: 'left', field: 'formType' },
   { name: 'queryable', label: 'queryable', align: 'left', field: 'queryable' },
-  { name: 'editable', label: 'editable', align: 'left', field: 'editable' },
-  { name: 'lastModifiedDate', label: 'lastModifiedDate', align: 'center', field: 'lastModifiedDate' },
-  { name: 'id', label: 'actions', field: 'id' }
+  { name: 'editable', label: 'editable', align: 'left', field: 'editable' }
 ]
 
 onMounted(() => {
@@ -241,6 +241,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function refresh() {
+
+}
+
 async function loadSchemaFields(id: number) {
   retrieveSchemaFields(id).then(res => {
     fields.value = res.data
diff --git a/src/pages/exploiters/templates/IndexPage.vue b/src/pages/exploiters/templates/IndexPage.vue
index db339d8..8f6aec7 100644
--- a/src/pages/exploiters/templates/IndexPage.vue
+++ b/src/pages/exploiters/templates/IndexPage.vue
@@ -2,23 +2,29 @@
   <q-page padding>
 
     <q-dialog v-model="visible" persistent>
-      <q-card style="min-width: 25em">
-        <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
+      <q-card class="full-width">
+        <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-x-md">
           <q-card-section>
             <div class="text-h6">{{ $t('regions') }}</div>
           </q-card-section>
 
-          <q-card-section>
-            <q-input v-model="form.name" :label="$t('name')" lazy-rules
-              :rules="[val => val && val.length > 0 || 'Please type something']" />
-            <q-input v-model="form.suffix" :label="$t('comment')" lazy-rules />
-            <q-input v-model="form.version" :label="$t('domain')" lazy-rules />
-            <q-input v-model="form.content" :label="$t('reference')" lazy-rules />
+          <q-card-section style="max-height: 70vh;" class="scroll">
+            <div class="row q-col-gutter-x-md">
+              <q-input v-model="form.name" :label="$t('name')" class="col-6" lazy-rules
+                :rules="[val => val && val.length > 0 || 'Please type something']">
+                <template v-slot:append>
+                  <q-select v-model="form.suffix" :options="['.java', '.vue']" />
+                </template>
+              </q-input>
+              <q-input v-model="form.version" :label="$t('version')" class="col-3" />
+              <q-input v-model="form.type" :label="$t('type')" class="col-3" />
+            </div>
+            <q-input v-model="form.content" :label="$t('content')" type="textarea" autogrow />
           </q-card-section>
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -27,7 +33,7 @@
 
     <!-- preview -->
     <q-dialog v-model="previewVisible">
-      <q-card>
+      <q-card class="full-width">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">{{ form.name }}{{ form.suffix }}</div>
           <q-space />
@@ -49,11 +55,13 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="create" round class="q-ml-sm" color="primary" :disable="loading" icon="sym_r_add"
+        <q-btn title="create" round padding="xs" class="q-mx-sm" color="primary" :disable="loading" icon="sym_r_add"
           @click="saveRow()" />
-        <q-btn title="import" round outline color="primary" class="q-mx-sm" :disable="loading" icon="sym_r_upload"
-          @click="importRow" />
-        <q-btn title="export" round outline color="primary" icon="sym_r_file_save" @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" :disable="loading" icon="sym_r_refresh"
+          @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -94,6 +102,7 @@ import type { Template } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
+const importVisible = ref<boolean>(false)
 const previewVisible = ref<boolean>(false)
 
 const tableRef = ref()
@@ -159,8 +168,12 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function refresh() {
+
+}
+
 function importRow() {
-  visible.value = true
+  importVisible.value = true
 }
 
 function previewRow(id: number) {
diff --git a/src/pages/files/IndexPage.vue b/src/pages/files/IndexPage.vue
index 9567995..3519b39 100644
--- a/src/pages/files/IndexPage.vue
+++ b/src/pages/files/IndexPage.vue
@@ -16,7 +16,7 @@
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -32,8 +32,10 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="upload" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_upload"
-          :label="$t('upload')" @click="uploadRow" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="upload" round padding="xs" color="primary" :disable="loading" icon="sym_r_upload"
+          @click="uploadRow" />
       </template>
 
       <template v-slot:header="props">
@@ -138,6 +140,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function refresh() {
+
+}
+
 function uploadRow() {
   visible.value = true
 }
diff --git a/src/pages/logs/access/IndexPage.vue b/src/pages/logs/access/IndexPage.vue
index 1ddfdc6..bc81dd5 100644
--- a/src/pages/logs/access/IndexPage.vue
+++ b/src/pages/logs/access/IndexPage.vue
@@ -24,8 +24,10 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="clear" round padding="xs" flat color="negative" class="q-mx-sm" icon="sym_r_clear_all" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -153,6 +155,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function refresh() {
+
+}
+
 function showRow(id: number) {
   visible.value = true
   if (id) {
diff --git a/src/pages/logs/audit/IndexPage.vue b/src/pages/logs/audit/IndexPage.vue
index 0de9a3b..c2dcb2c 100644
--- a/src/pages/logs/audit/IndexPage.vue
+++ b/src/pages/logs/audit/IndexPage.vue
@@ -24,8 +24,9 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -144,6 +145,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function refresh() {
+
+}
+
 function showRow(id: number) {
   visible.value = true
   if (id) {
diff --git a/src/pages/logs/operation/IndexPage.vue b/src/pages/logs/operation/IndexPage.vue
index c7a8ed1..ffeca20 100644
--- a/src/pages/logs/operation/IndexPage.vue
+++ b/src/pages/logs/operation/IndexPage.vue
@@ -24,8 +24,10 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="clear" round padding="xs" flat color="negative" class="q-mx-sm" icon="sym_r_clear_all" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -144,6 +146,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function refresh() {
+
+}
+
 function showRow(id: number) {
   visible.value = true
   if (id) {
diff --git a/src/pages/logs/scheduler/IndexPage.vue b/src/pages/logs/scheduler/IndexPage.vue
index 44f806e..2adb947 100644
--- a/src/pages/logs/scheduler/IndexPage.vue
+++ b/src/pages/logs/scheduler/IndexPage.vue
@@ -24,8 +24,10 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="clear" round padding="xs" flat color="negative" class="q-mx-sm" icon="sym_r_clear_all" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -39,13 +41,14 @@
 
       <template v-slot:body-cell-status="props">
         <q-td :props="props">
-          <q-chip v-if="props.row.status === 0" size="sm" color="primary" text-color="white">
+          <q-chip v-if="props.row.status === 0" size="sm" icon="sym_r_progress_activity" color="primary"
+            text-color="white">
             {{ $t('processing') }}
           </q-chip>
-          <q-chip v-else-if="props.row.status === 1" size="sm" color="positive" text-color="white">
+          <q-chip v-else-if="props.row.status === 1" size="sm" icon="sym_r_check" color="positive" text-color="white">
             {{ $t('done') }}
           </q-chip>
-          <q-chip v-else size="sm" color="negative" text-color="white">{{ $t('failure') }}</q-chip>
+          <q-chip v-else size="sm" icon="sym_r_error" color="negative" text-color="white">{{ $t('failure') }}</q-chip>
         </q-td>
       </template>
       <template v-slot:body-cell-executedTimes="props">
@@ -144,6 +147,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function refresh() {
+
+}
+
 function showRow(id: number) {
   visible.value = true
   if (id) {
diff --git a/src/pages/regions/IndexPage.vue b/src/pages/regions/IndexPage.vue
index 74bf5cd..3472e8e 100644
--- a/src/pages/regions/IndexPage.vue
+++ b/src/pages/regions/IndexPage.vue
@@ -17,7 +17,7 @@
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -33,10 +33,13 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="create" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add"
-          :label="$t('create')" @click="saveRow()" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="create" round padding="xs" color="primary" class="q-ml-sm" :disable="loading" icon="sym_r_add"
+          @click="saveRow()" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -89,6 +92,7 @@ import type { Region } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
+const importVisible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -154,6 +158,14 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function importRow() {
+  importVisible.value = true
+}
+
+function refresh() {
+
+}
+
 async function saveRow(id?: number) {
   visible.value = true
   // You can populate the form with existing user data based on the id
diff --git a/src/pages/regions/SubPage.vue b/src/pages/regions/SubPage.vue
index 02ff051..f6be7a1 100644
--- a/src/pages/regions/SubPage.vue
+++ b/src/pages/regions/SubPage.vue
@@ -15,7 +15,7 @@
 
         <q-card-actions align="right">
           <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-          <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+          <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
         </q-card-actions>
 
       </q-form>
@@ -31,10 +31,11 @@
           <q-icon name="sym_r_search" />
         </template>
       </q-input>
-      <q-btn title="create" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add"
-        :label="$t('create')" @click="saveRow()" />
-      <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-        @click="exportTable" />
+      <q-btn title="create" round padding="xs" color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add"
+        @click="saveRow()" />
+      <q-btn title="refresh" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+        icon="sym_r_refresh" @click="refresh" />
+      <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
     </template>
 
     <template v-slot:header="props">
@@ -161,6 +162,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   }
 }
 
+function refresh() {
+
+}
+
 async function saveRow(id?: number) {
   visible.value = true
   // You can populate the form with existing user data based on the id
diff --git a/src/pages/system/dictionaries/IndexPage.vue b/src/pages/system/dictionaries/IndexPage.vue
index 50c9997..6958ece 100644
--- a/src/pages/system/dictionaries/IndexPage.vue
+++ b/src/pages/system/dictionaries/IndexPage.vue
@@ -17,7 +17,7 @@
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -32,10 +32,11 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh"
-          @click="refresh" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -85,6 +86,7 @@ import type { Dictionary } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
+const importVisible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -143,6 +145,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   }).finally(() => { loading.value = false })
 }
 
+function importRow() {
+  importVisible.value = true
+}
+
 function refresh() {
   tableRef.value.requestServerInteraction()
 }
diff --git a/src/pages/system/dictionaries/SubPage.vue b/src/pages/system/dictionaries/SubPage.vue
index aed88be..8aa6396 100644
--- a/src/pages/system/dictionaries/SubPage.vue
+++ b/src/pages/system/dictionaries/SubPage.vue
@@ -15,7 +15,7 @@
 
         <q-card-actions align="right">
           <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-          <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+          <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
         </q-card-actions>
 
       </q-form>
@@ -25,10 +25,9 @@
   <q-table flat ref="subtableRef" :title="title" :rows="rows" :columns="columns" row-key="id" binary-state-sort
     @request="onRequest" hide-pagination hide-selected-banner class="full-width bg-transparent">
     <template v-slot:top-right>
-      <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh"
-        @click="onRequest" />
-      <q-btn title="create" rounded color="primary" :disable="loading" icon="sym_r_add" :label="$t('create')"
-        @click="saveRow()" />
+      <q-btn title="refresh" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+        icon="sym_r_refresh" @click="refresh" />
+      <q-btn title="create" round padding="xs" color="primary" :disable="loading" icon="sym_r_add" @click="saveRow()" />
     </template>
 
     <template v-slot:header="props">
@@ -114,6 +113,10 @@ async function onRequest() {
   }
 }
 
+function refresh() {
+
+}
+
 async function saveRow(id?: number) {
   visible.value = true
   // You can populate the form with existing user data based on the id
diff --git a/src/pages/system/groups/IndexPage.vue b/src/pages/system/groups/IndexPage.vue
index 057f60c..82dd5e7 100644
--- a/src/pages/system/groups/IndexPage.vue
+++ b/src/pages/system/groups/IndexPage.vue
@@ -20,7 +20,7 @@
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -36,10 +36,13 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="create" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add"
-          :label="$t('create')" @click="saveRow()" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="create" round padding="xs" color="primary" class="q-ml-sm" :disable="loading" icon="sym_r_add"
+          @click="saveRow()" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -87,10 +90,10 @@
       </template>
       <template v-slot:body-cell-id="props">
         <q-td :props="props">
-          <q-btn title="relation" padding="xs" flat round color="positive" icon="sym_r_link"
-            @click="relationRow(props.row.id)" class="q-mt-none" />
           <q-btn title="modify" padding="xs" flat round color="primary" icon="sym_r_edit" @click="saveRow(props.row.id)"
-            class="q-mt-none q-mx-sm" />
+            class="q-mt-none" />
+          <q-btn title="relation" padding="xs" flat round color="positive" icon="sym_r_link"
+            @click="relationRow(props.row.id)" class="q-mt-none q-mx-sm" />
           <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
             @click="removeRow(props.row.id)" class="q-mt-none " />
         </q-td>
@@ -111,6 +114,7 @@ import type { Group } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
+const importVisible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -174,6 +178,14 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function importRow() {
+  importVisible.value = true
+}
+
+function refresh() {
+
+}
+
 function relationRow(id: number) {
   console.log(id)
 }
diff --git a/src/pages/system/privileges/IndexPage.vue b/src/pages/system/privileges/IndexPage.vue
index 745d831..980911a 100644
--- a/src/pages/system/privileges/IndexPage.vue
+++ b/src/pages/system/privileges/IndexPage.vue
@@ -17,7 +17,7 @@
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -33,10 +33,11 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="refresh" round flat color="primary" class="q-mx-md" :disable="loading" icon="sym_r_refresh"
-          @click="refresh" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -104,6 +105,7 @@ import type { Privilege } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
+const importVisible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -171,6 +173,10 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function importRow() {
+  importVisible.value = true
+}
+
 function refresh() {
   tableRef.value.requestServerInteraction()
 }
diff --git a/src/pages/system/privileges/SubPage.vue b/src/pages/system/privileges/SubPage.vue
index d5715ba..5df2021 100644
--- a/src/pages/system/privileges/SubPage.vue
+++ b/src/pages/system/privileges/SubPage.vue
@@ -16,7 +16,7 @@
 
         <q-card-actions align="right">
           <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-          <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+          <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
         </q-card-actions>
 
       </q-form>
diff --git a/src/pages/system/roles/IndexPage.vue b/src/pages/system/roles/IndexPage.vue
index e94dba4..4807713 100644
--- a/src/pages/system/roles/IndexPage.vue
+++ b/src/pages/system/roles/IndexPage.vue
@@ -17,7 +17,7 @@
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
 
         </q-form>
@@ -33,10 +33,13 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="create" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add"
-          :label="$t('create')" @click="saveRow()" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="create" round padding="xs" color="primary" class="q-ml-sm" :disable="loading" icon="sym_r_add"
+          @click="saveRow()" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -77,9 +80,9 @@
       <template v-slot:body-cell-id="props">
         <q-td :props="props">
           <q-btn title="modify" padding="xs" flat round color="primary" icon="sym_r_edit" @click="saveRow(props.row.id)"
-            class="q-mt-none q-mx-sm" />
+            class="q-mt-none" />
           <q-btn title="relation" padding="xs" flat round color="positive" icon="sym_r_link"
-            @click="relationRow(props.row.id)" class="q-mt-none" />
+            @click="relationRow(props.row.id)" class="q-mt-none q-mx-sm" />
           <q-btn title="delete" padding="xs" flat round color="negative" icon="sym_r_delete"
             @click="removeRow(props.row.id)" class="q-mt-none " />
         </q-td>
@@ -100,6 +103,7 @@ import type { Role } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
+const importVisible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -163,6 +167,14 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function importRow() {
+  importVisible.value = true
+}
+
+function refresh() {
+
+}
+
 function relationRow(id: number) {
   console.log(id)
 }
diff --git a/src/pages/system/users/IndexPage.vue b/src/pages/system/users/IndexPage.vue
index 7342efc..90dc889 100644
--- a/src/pages/system/users/IndexPage.vue
+++ b/src/pages/system/users/IndexPage.vue
@@ -20,7 +20,7 @@
 
           <q-card-actions align="right">
             <q-btn title="cancel" type="reset" unelevated :label="$t('cancel')" v-close-popup />
-            <q-btn title="submit" type="submit" :label="$t('submit')" color="primary" />
+            <q-btn title="submit" type="submit" flat :label="$t('submit')" color="primary" />
           </q-card-actions>
         </q-form>
       </q-card>
@@ -35,10 +35,13 @@
             <q-icon name="sym_r_search" />
           </template>
         </q-input>
-        <q-btn title="create" rounded color="primary" class="q-mx-md" :disable="loading" icon="sym_r_add"
-          :label="$t('create')" @click="saveRow()" />
-        <q-btn title="export" rounded outline color="primary" icon="sym_r_file_save" :label="$t('export')"
-          @click="exportTable" />
+        <q-btn title="create" round padding="xs" color="primary" class="q-ml-sm" :disable="loading" icon="sym_r_add"
+          @click="saveRow()" />
+        <q-btn title="refresh" round padding="xs" flat color="primary" class="q-ml-sm" :disable="loading"
+          icon="sym_r_refresh" @click="refresh" />
+        <q-btn title="import" round padding="xs" flat color="primary" class="q-mx-sm" :disable="loading"
+          icon="sym_r_database_upload" @click="importRow" />
+        <q-btn title="export" round padding="xs" flat color="primary" icon="sym_r_file_export" @click="exportTable" />
       </template>
 
       <template v-slot:header="props">
@@ -115,6 +118,7 @@ import type { User } from 'src/models'
 const $q = useQuasar()
 
 const visible = ref<boolean>(false)
+const importVisible = ref<boolean>(false)
 
 const tableRef = ref()
 const rows = ref<QTableProps['rows']>([])
@@ -180,6 +184,14 @@ async function onRequest(props: Parameters<NonNullable<QTableProps['onRequest']>
   })
 }
 
+function importRow() {
+  importVisible.value = true
+}
+
+function refresh() {
+
+}
+
 async function saveRow(id?: number) {
   visible.value = true
   // You can populate the form with existing user data based on the id