diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/entity/Users.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/entity/Users.ts
index 8f1db9fd8bd1313016751b8600870f6e03b9e41c..d69b28cf652c28d250e6af9d9158bc30d74d2659 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/entity/Users.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/entity/Users.ts
@@ -154,6 +154,7 @@ export class Users extends BaseEntity {
     this.gender_select = '1';
     this.str_married = '0';
     this.str_idType = '0';
+    this.str_status='1';
   }
 
   override init(data: any): void {
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions.component.html
index 31362779fe2268fd4f4b826d5ef7784c3b3a40b4..78a94fa58f13b156924973faa458c18c35058a10 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions.component.html
@@ -8,18 +8,12 @@
           <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
           <nz-form-control>
             <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
-              <input
-                nz-input
-                [(ngModel)]="query.params.roleName"
-                [ngModelOptions]="{ standalone: true }"
-                name="roleName"
-                readonly
-                placeholder=""
-                id="roleName"
-              />
+              <input nz-input [(ngModel)]="query.params.roleName" [ngModelOptions]="{ standalone: true }"
+                     name="roleName" readonly placeholder="" id="roleName" />
             </nz-input-group>
             <ng-template #suffixButton>
-              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n }}</button>
+              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
+                }}</button>
             </ng-template>
           </nz-form-control>
         </nz-form-item>
@@ -28,23 +22,18 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.appName"
-              [ngModelOptions]="{ standalone: true }"
-              name="appName"
-              placeholder=""
-              id="appName"
-            />
+            <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
+                   placeholder="" id="appName" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -55,83 +44,70 @@
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
       <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
         'mxk.text.delete' | i18n
-      }}</button>
+        }}</button>
     </div>
 
     <div nz-col nzMd="24" nzSm="24">
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+                [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+                [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber"
+                [nzLoading]="this.query.tableLoading" (nzQueryParams)="onQueryParamsChange($event)">
         <thead>
-          <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-            <th nzAlign="center" style="display: none">Id</th>
-            <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
-            <th nzAlign="center"
-              ><a>{{ 'mxk.text.action' | i18n }}</a></th
-            >
-          </tr>
+        <tr>
+          <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
+          <th nzAlign="center" style="display: none">Id</th>
+          <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
+        </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
-            <td nzAlign="left"> {{ data.roleName }}</td>
-            <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
-            <td nzAlign="left"> {{ data.appName }}</td>
-            <td nzAlign="left">
-              <div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
-              <div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
-              <div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
-              <div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
-              <div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
-              <div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
-              <div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
-              <div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
-              <div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
-              <div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
-              <div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
-              <div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
-              <div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
-              <div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
-              <div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
-              <div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
-              <div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
-              <div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
-              <div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
-              <div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
-              <div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
-              <div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
-              <div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
-              <div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
-              <div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
-              <div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
-              <div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
-              <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
-            </td>
-            <td nzAlign="left" nzBreakWord="false">
-              <div nz-col>
-                <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-              </div>
-            </td>
-          </tr>
+        <tr *ngFor="let data of query.results.rows">
+          <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+          <td nzAlign="left"> {{ data.roleName }}</td>
+          <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
+          <td nzAlign="left"> {{ data.appName }}</td>
+          <td nzAlign="left">
+            <div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
+            <div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
+            <div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
+            <div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
+            <div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
+            <div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
+            <div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
+            <div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
+            <div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
+            <div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
+            <div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
+            <div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
+            <div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
+            <div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
+            <div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
+            <div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
+            <div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
+            <div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
+            <div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
+            <div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
+            <div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
+            <div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
+            <div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
+            <div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
+            <div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
+            <div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
+            <div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
+            <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
+          </td>
+          <td nzAlign="center" nzBreakWord="false">
+            <div nz-col>
+              <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
+                }}</button>
+            </div>
+          </td>
+        </tr>
         </tbody>
       </nz-table>
     </div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/member-roles-editer/member-roles-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/member-roles-editer/member-roles-editer.component.html
index 4ab808f759aab6ea31c143f08cdeac226bea253c..9659b8871a291396e9bb03c503ada186ee26cb41 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/member-roles-editer/member-roles-editer.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/member-roles-editer/member-roles-editer.component.html
@@ -1,73 +1,53 @@
 <div *nzModalTitle> {{ 'mxk.text.add' | i18n }} </div>
-<nz-card [nzBordered]="false">
-  <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
-    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
-      <div nz-col nzMd="14" nzSm="24">
-        <nz-form-item>
-          <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-          <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.roleName"
-              [ngModelOptions]="{ standalone: true }"
-              name="roleName"
-              placeholder=""
-              id="roleName"
-            />
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-
-      <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
-        <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
-        <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
-      </div>
+<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form" style="margin-bottom: 10px">
+  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
+    <div nz-col nzMd="14" nzSm="24">
+      <nz-form-item>
+        <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
+        <nz-form-control>
+          <input nz-input [(ngModel)]="query.params.roleName" [ngModelOptions]="{ standalone: true }"
+                 name="roleName" placeholder="" id="roleName" />
+        </nz-form-control>
+      </nz-form-item>
     </div>
-  </form>
 
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
-    <thead>
-      <tr>
-        <th></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.roles.dynamic' | i18n }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
-        <td nzAlign="left"> {{ data.roleName }}</td>
-        <td nzAlign="center"> <i *ngIf="data.dynamic == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-      </tr>
-    </tbody>
-  </nz-table>
-</nz-card>
+    <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
+      <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{
+        'mxk.text.query' | i18n }}</button>
+      <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{
+        'mxk.text.reset' | i18n }}</button>
+      <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
+        {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+      <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
+    </div>
+  </div>
+</form>
+<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+          [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+          [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber"
+          [nzLoading]="this.query.tableLoading" (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <thead>
+  <tr>
+    <th></th>
+    <th nzAlign="center" style="display: none">Id</th>
+    <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.roles.category' | i18n }}</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of query.results.rows">
+    <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+        (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+    <td nzAlign="left" style="display: none">
+      <span>{{ data.id }}</span>
+    </td>
+    <td nzAlign="left"> {{ data.roleName }}</td>
+    <td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.roles.category.dynamic' | i18n }}</td>
+    <td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.roles.category.static' | i18n }}</td>
+    <td nzAlign="center" *ngIf="data.category == 'app'"> {{ 'mxk.roles.category.app' | i18n }}</td>
+  </tr>
+  </tbody>
+</nz-table>
 <div *nzModalFooter style="display: none">
   <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
   <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members-editer/role-members-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members-editer/role-members-editer.component.html
index 23e33fcbad24b8f2e690023036435eae32c3632c..5603a62cde2c09ee37511bf7d83648fb5ac2b785 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members-editer/role-members-editer.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members-editer/role-members-editer.component.html
@@ -1,79 +1,61 @@
 <div *nzModalTitle> {{ 'mxk.text.add' | i18n }} </div>
-<nz-card [nzBordered]="false">
-  <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
-    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
-      <div nz-col nzMd="14" nzSm="24">
-        <nz-form-item>
-          <nz-form-label nzFor="username">{{ 'mxk.users.username' | i18n }}</nz-form-label>
-          <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.username"
-              [ngModelOptions]="{ standalone: true }"
-              name="username"
-              placeholder=""
-              id="username"
-            />
-          </nz-form-control>
-        </nz-form-item>
-      </div>
+<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form" style="margin-bottom: 10px">
+  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
+    <div nz-col nzMd="14" nzSm="24">
+      <nz-form-item>
+        <nz-form-label nzFor="username">{{ 'mxk.users.username' | i18n }}</nz-form-label>
+        <nz-form-control>
+          <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
+                 placeholder="" id="username" />
+        </nz-form-control>
+      </nz-form-item>
+    </div>
 
-      <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
-        <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
-        <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
-      </div>
+    <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
+      <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+        i18n }}</button>
+      <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+        i18n }}</button>
+      <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
+        {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+      <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
     </div>
-  </form>
+  </div>
+</form>
 
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
-    <thead>
-      <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.users.employeeNumber' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left"> {{ data.username }}</td>
-        <td nzAlign="left"> {{ data.displayName }}</td>
-        <td nzAlign="left"> {{ data.employeeNumber }}</td>
-        <td nzAlign="left"> {{ data.department }}</td>
-        <td nzAlign="left"> {{ data.jobTitle }}</td>
-        <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' | i18n) }}</td>
-        <td nzAlign="center"> <i *ngIf="data.dynamic == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-      </tr>
-    </tbody>
-  </nz-table>
-</nz-card>
+<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+          [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+          [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+          (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <thead>
+  <tr>
+    <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+        (nzCheckedChange)="onTableAllChecked($event)"></th>
+    <th nzAlign="center" style="display: none">Id</th>
+    <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.users.employeeNumber' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of query.results.rows">
+    <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+        (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+    <td nzAlign="left"> {{ data.username }}</td>
+    <td nzAlign="left"> {{ data.displayName }}</td>
+    <td nzAlign="left"> {{ data.employeeNumber }}</td>
+    <td nzAlign="left"> {{ data.department }}</td>
+    <td nzAlign="left"> {{ data.jobTitle }}</td>
+    <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' |
+      i18n) }}</td>
+    <td nzAlign="center"> <i *ngIf="data.dynamic == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                             style="color: green"></i></td>
+  </tr>
+  </tbody>
+</nz-table>
 <div *nzModalFooter style="display: none">
   <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
   <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members.component.html
index 98f1dc80a423779a9ad03d23205b8cba9d2c77fd..88de2350028ff21f41f4f23799548374315183b5 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/role-members/role-members.component.html
@@ -8,18 +8,12 @@
           <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
           <nz-form-control>
             <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
-              <input
-                nz-input
-                [(ngModel)]="query.params.roleName"
-                [ngModelOptions]="{ standalone: true }"
-                name="roleName"
-                readonly
-                placeholder=""
-                id="roleName"
-              />
+              <input nz-input [(ngModel)]="query.params.roleName" [ngModelOptions]="{ standalone: true }"
+                     name="roleName" readonly placeholder="" id="roleName" />
             </nz-input-group>
             <ng-template #suffixButton>
-              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n }}</button>
+              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
+                }}</button>
             </ng-template>
           </nz-form-control>
         </nz-form-item>
@@ -28,23 +22,17 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.username"
-              [ngModelOptions]="{ standalone: true }"
-              name="username"
-              placeholder=""
-              id="username"
-            />
+            <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
+                   placeholder="" id="username" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
         <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -55,59 +43,47 @@
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
       <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
         'mxk.text.delete' | i18n
-      }}</button>
+        }}</button>
     </div>
 
     <div nz-col nzMd="24" nzSm="24">
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+                [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+                [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber"
+                [nzLoading]="this.query.tableLoading" (nzQueryParams)="onQueryParamsChange($event)">
         <thead>
-          <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-            <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
-            <th nzAlign="center"
-              ><a>{{ 'mxk.text.action' | i18n }}</a></th
-            >
-          </tr>
+        <tr>
+          <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
+          <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
+        </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
-            <td nzAlign="left"> {{ data.roleName }}</td>
-            <td nzAlign="left"> {{ data.username }}</td>
-            <td nzAlign="left"> {{ data.displayName }}</td>
-            <td nzAlign="left"> {{ data.department }}</td>
-            <td nzAlign="left"> {{ data.jobTitle }}</td>
-            <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' | i18n) }}</td>
-            <td nzAlign="left" nzBreakWord="false">
-              <div nz-col>
-                <button *ngIf="data.category == 'static'" nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{
-                  'mxk.text.delete' | i18n
+        <tr *ngFor="let data of query.results.rows">
+          <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+          <td nzAlign="left"> {{ data.roleName }}</td>
+          <td nzAlign="left"> {{ data.username }}</td>
+          <td nzAlign="left"> {{ data.displayName }}</td>
+          <td nzAlign="left"> {{ data.department }}</td>
+          <td nzAlign="left"> {{ data.jobTitle }}</td>
+          <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' |
+            i18n) }}</td>
+          <td nzAlign="center" nzBreakWord="false">
+            <div nz-col>
+              <button *ngIf="data.category == 'static'" nz-button type="button" (click)="onDelete($event, data.id)"
+                      nzDanger>{{
+                'mxk.text.delete' | i18n
                 }}</button>
-              </div>
-            </td>
-          </tr>
+            </div>
+          </td>
+        </tr>
         </tbody>
       </nz-table>
     </div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/roles.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/roles.component.html
index a5d1344f749b93b7db19751527db4c05af27ef5a..c143bc45dfcaa2921830d04da7675d2112e0e958 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/roles.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/roles.component.html
@@ -5,7 +5,7 @@
     <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
       <div nz-col nzMd="16" nzSm="24">
         <nz-form-item>
-          <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
+          <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
           <nz-form-control>
             <input
               nz-input
@@ -34,7 +34,7 @@
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
     <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
       'mxk.text.delete' | i18n
-    }}</button>
+      }}</button>
   </div>
   <nz-table
     #dynamicTable
@@ -53,51 +53,54 @@
     nzWidth="100%"
   >
     <thead>
-      <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.roles.category' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.text.description' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
-      </tr>
+    <tr>
+      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+      <th nzAlign="center" style="display: none">Id</th>
+      <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.roles.category' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.text.description' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+    </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
-        <td nzAlign="left" nzBreakWord="false">{{ data.roleName }}</td>
-        <td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.roles.category.dynamic' | i18n }}</td>
-        <td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.roles.category.static' | i18n }}</td>
-        <td nzAlign="left">{{ data.description }}</td>
-        <td nzAlign="left" nzBreakWord="false">
-          <div nz-col>
-            <button nz-button type="button" (click)="onMembers($event, data.id, data.roleName)" style="float: left">{{
-              'mxk.roles.member' | i18n
-            }}</button>
-            <button nz-button type="button" (click)="onPermissions($event, data.id, data.roleName)" style="float: left">{{
-              'mxk.roles.permissions' | i18n
-            }}</button>
-            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button
-              *ngIf="data.roleCode != 'ROLE_ADMINISTRATORS' && data.roleCode != 'ROLE_ALL_USER' && data.roleCode != 'ROLE_MANAGERS'"
-              nz-button
-              type="button"
-              (click)="onDelete($event, data.id)"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
-          </div>
-        </td>
-      </tr>
+    <tr *ngFor="let data of query.results.rows">
+      <td
+        [nzChecked]="query.tableCheckedId.has(data.id)"
+        [nzDisabled]="data.disabled"
+        (nzCheckedChange)="onTableItemChecked(data.id, $event)"
+      ></td>
+      <td nzAlign="left" style="display: none">
+        <span>{{ data.id }}</span>
+      </td>
+      <td nzAlign="left" nzBreakWord="false">{{ data.roleName }}</td>
+      <td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.roles.category.dynamic' | i18n }}</td>
+      <td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.roles.category.static' | i18n }}</td>
+      <td nzAlign="center" *ngIf="data.category == 'app'"> {{ 'mxk.roles.category.app' | i18n }}</td>
+      <td nzAlign="left">{{ data.description }}</td>
+      <td nzAlign="center" nzBreakWord="false">
+        <div nz-col>
+          <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
+          <button nz-button nz-dropdown [nzDropdownMenu]="menuMoreAction">
+            {{ 'mxk.text.moreaction' | i18n }}
+            <i nz-icon nzType="down"></i>
+          </button>
+
+          <nz-dropdown-menu #menuMoreAction="nzDropdownMenu">
+            <ul nz-menu>
+              <li nz-menu-item (click)="onMembers($event, data.id, data.roleName)">{{ 'mxk.roles.member' | i18n }}</li>
+              <li nz-menu-item (click)="onPermissions($event, data.id, data.roleName)">{{ 'mxk.roles.permissions' | i18n }}</li>
+              <li
+                nz-menu-item
+                *ngIf="data.roleCode != 'ROLE_ADMINISTRATORS' && data.roleCode != 'ROLE_ALL_USER' && data.roleCode != 'ROLE_MANAGERS'"
+                (click)="onDelete($event, data.id)"
+                nzDanger
+              >{{ 'mxk.text.delete' | i18n }}</li
+              >
+            </ul>
+          </nz-dropdown-menu>
+        </div>
+      </td>
+    </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/select-roles/select-roles.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/select-roles/select-roles.component.html
index d5736ef1fc2fd8f79ad18faaf81c1d78ab62ba8b..bf96b46a070fc56113bd6ae829b5d55c164eadc8 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/select-roles/select-roles.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/roles/select-roles/select-roles.component.html
@@ -1,74 +1,54 @@
 <div *nzModalTitle> {{ 'mxk.text.select' | i18n }} </div>
-<nz-card [nzBordered]="false">
-  <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
-    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
-      <div nz-col nzMd="14" nzSm="24">
-        <nz-form-item>
-          <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-          <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.roleName"
-              [ngModelOptions]="{ standalone: true }"
-              name="roleName"
-              placeholder=""
-              id="roleName"
-            />
-          </nz-form-control>
-        </nz-form-item>
-      </div>
 
-      <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
-        <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
-        <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
-      </div>
+<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form" style="margin-bottom: 10px">
+  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
+    <div nz-col nzMd="14" nzSm="24">
+      <nz-form-item>
+        <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
+        <nz-form-control>
+          <input nz-input [(ngModel)]="query.params.roleName" [ngModelOptions]="{ standalone: true }" name="roleName"
+                 placeholder="" id="roleName" />
+        </nz-form-control>
+      </nz-form-item>
     </div>
-  </form>
 
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
-    <thead>
-      <tr>
-        <th></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.roles.category' | i18n }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
-        <td nzAlign="left"> {{ data.roleName }}</td>
-        <td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.roles.category.dynamic' | i18n }}</td>
-        <td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.roles.category.static' | i18n }}</td>
-      </tr>
-    </tbody>
-  </nz-table>
-</nz-card>
+    <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
+      <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+        i18n }}</button>
+      <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+        i18n }}</button>
+      <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
+        {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+      <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
+    </div>
+  </div>
+</form>
+
+<nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+          [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+          [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+          (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <thead>
+  <tr>
+    <th></th>
+    <th nzAlign="center" style="display: none">Id</th>
+    <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.roles.category' | i18n }}</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of query.results.rows">
+    <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+        (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+    <td nzAlign="left" style="display: none">
+      <span>{{ data.id }}</span>
+    </td>
+    <td nzAlign="left"> {{ data.roleName }}</td>
+    <td nzAlign="center" *ngIf="data.category == 'dynamic'"> {{ 'mxk.roles.category.dynamic' | i18n }}</td>
+    <td nzAlign="center" *ngIf="data.category == 'static'"> {{ 'mxk.roles.category.static' | i18n }}</td>
+  </tr>
+  </tbody>
+</nz-table>
 <div *nzModalFooter style="display: none">
   <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
   <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
index 628fb39fb11443d37d550f0375bb30ca10f46344..751ea416171ea0b28c03aad89221e0b2645a15a5 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
@@ -8,18 +8,12 @@
           <nz-form-label nzFor="appName">{{ 'mxk.accounts.appName' | i18n }}</nz-form-label>
           <nz-form-control>
             <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
-              <input
-                nz-input
-                [(ngModel)]="query.params.appName"
-                [ngModelOptions]="{ standalone: true }"
-                name="appName"
-                readonly
-                placeholder=""
-                id="appName"
-              />
+              <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
+                     readonly placeholder="" id="appName" />
             </nz-input-group>
             <ng-template #suffixButton>
-              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n }}</button>
+              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
+                }}</button>
             </ng-template>
           </nz-form-control>
         </nz-form-item>
@@ -28,24 +22,18 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.accounts.username' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.username"
-              [ngModelOptions]="{ standalone: true }"
-              name="username"
-              placeholder=""
-              id="username"
-            />
+            <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
+                   placeholder="" id="username" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
         <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -55,57 +43,43 @@
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
     <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
       'mxk.text.delete' | i18n
-    }}</button>
+      }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+            [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+            [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+            (nzQueryParams)="onQueryParamsChange($event)">
     <thead>
-      <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.accounts.username' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.accounts.displayName' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.accounts.appName' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.accounts.relatedUsername' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
-      </tr>
+    <tr>
+      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
+      <th nzAlign="center" style="display: none">Id</th>
+      <th nzAlign="center">{{ 'mxk.accounts.username' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.accounts.displayName' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.accounts.appName' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.accounts.relatedUsername' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.action' | i18n }}</th>
+    </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
-        <td nzAlign="left" nzBreakWord="false">{{ data.username }}</td>
-        <td nzAlign="left" nzBreakWord="false">{{ data.displayName }}</td>
-        <td nzAlign="left" nzBreakWord="false">{{ data.appName }}</td>
-        <td nzAlign="left" nzBreakWord="false">{{ data.relatedUsername }}</td>
+    <tr *ngFor="let data of query.results.rows">
+      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+      <td nzAlign="left" style="display: none">
+        <span>{{ data.id }}</span>
+      </td>
+      <td nzAlign="left" nzBreakWord="false">{{ data.username }}</td>
+      <td nzAlign="left" nzBreakWord="false">{{ data.displayName }}</td>
+      <td nzAlign="left" nzBreakWord="false">{{ data.appName }}</td>
+      <td nzAlign="left" nzBreakWord="false">{{ data.relatedUsername }}</td>
 
-        <td nzAlign="left" nzBreakWord="false">
-          <div nz-col>
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-          </div>
-        </td>
-      </tr>
+      <td nzAlign="center" nzBreakWord="false">
+        <div nz-col>
+          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
+            }}</button>
+        </div>
+      </td>
+    </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
index a95d2d081547478d6d0a0c3e20b0b487202683bc..af723101ed4815429a419db81d9ffe8155b6addc 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
@@ -7,14 +7,8 @@
         <nz-form-item>
           <nz-form-label nzFor="appName">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.appName"
-              [ngModelOptions]="{ standalone: true }"
-              name="appName"
-              placeholder=""
-              id="appName"
-            />
+            <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
+                   placeholder="" id="appName" />
           </nz-form-control>
         </nz-form-item>
       </div>
@@ -40,11 +34,12 @@
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
         <nz-form-item>
-          <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-          <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+          <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+            i18n }}</button>
+          <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+            i18n }}</button>
           <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-            {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-          >
+            {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
         </nz-form-item>
       </div>
     </div>
@@ -71,95 +66,88 @@
 
     <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
       'mxk.text.delete' | i18n
-    }}</button>
+      }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+            [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+            [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+            (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
-      <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.apps.protocol' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
-      </tr>
+    <tr>
+      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
+      <th nzAlign="center" style="display: none">Id</th>
+      <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.apps.protocol' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+    </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
+    <tr *ngFor="let data of query.results.rows">
+      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+      <td nzAlign="left" style="display: none">
+        <span>{{ data.id }}</span>
+      </td>
 
-        <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
-        <td nzAlign="left"> {{ data.appName }}</td>
-        <td nzAlign="left"> {{ data.protocol }}</td>
-        <td nzAlign="left">
-          <div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
-          <div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
-          <div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
-          <div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
-          <div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
-          <div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
-          <div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
-          <div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
-          <div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
-          <div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
-          <div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
-          <div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
-          <div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
-          <div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
-          <div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
-          <div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
-          <div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
-          <div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
-          <div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
-          <div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
-          <div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
-          <div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
-          <div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
-          <div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
-          <div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
-          <div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
-          <div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
-          <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
-        </td>
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-        <td nzAlign="left" nzBreakWord="false">
-          <div nz-col>
-            <button nz-button type="button" (click)="onResourcesMgmt($event, data.id, data.appName)" style="float: left">{{
-              'mxk.apps.resources' | i18n
-            }}</button>
-            <button nz-button type="button" (click)="onEdit($event, data.id, data.protocol)" style="float: left">{{
-              'mxk.text.edit' | i18n
-            }}</button>
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-          </div>
-        </td>
-      </tr>
+      <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
+      <td nzAlign="left"> {{ data.appName }}</td>
+      <td nzAlign="left"> {{ data.protocol }}</td>
+      <td nzAlign="left">
+        <div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
+        <div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
+        <div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
+        <div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
+        <div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
+        <div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
+        <div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
+        <div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
+        <div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
+        <div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
+        <div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
+        <div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
+        <div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
+        <div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
+        <div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
+        <div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
+        <div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
+        <div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
+        <div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
+        <div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
+        <div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
+        <div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
+        <div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
+        <div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
+        <div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
+        <div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
+        <div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
+        <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
+      </td>
+      <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                               style="color: green"></i></td>
+      <td nzAlign="center" nzBreakWord="false">
+        <div nz-col>
+          <button nz-button type="button" (click)="onEdit($event, data.id, data.protocol)">{{ 'mxk.text.edit' | i18n }}</button>
+
+          <button nz-button nz-dropdown [nzDropdownMenu]="menuMoreAction">
+            {{ 'mxk.text.moreaction' | i18n }}
+            <i nz-icon nzType="down"></i>
+          </button>
+
+          <nz-dropdown-menu #menuMoreAction="nzDropdownMenu">
+            <ul nz-menu>
+              <li nz-menu-item (click)="onResourcesMgmt($event, data.id, data.appName)">{{
+                'mxk.apps.resources' | i18n
+                }}</li>
+              <li nz-menu-item (click)="onDelete($event, data.id)">{{ 'mxk.text.delete' | i18n }}</li>
+            </ul>
+          </nz-dropdown-menu>
+        </div>
+      </td>
+    </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-apps/select-apps.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-apps/select-apps.component.html
index 73f5c1b1249c3e137e85460a3570dbcf7236511c..2ad4ce2277e2c701354eb6611f12a2fd69c21bc9 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-apps/select-apps.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/select-apps/select-apps.component.html
@@ -1,105 +1,83 @@
 <div *nzModalTitle> {{ 'mxk.text.select' | i18n }} </div>
-<nz-card [nzBordered]="false">
-  <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
-    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
-      <div nz-col nzMd="14" nzSm="24">
-        <nz-form-item>
-          <nz-form-label nzFor="appName">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
-          <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.appName"
-              [ngModelOptions]="{ standalone: true }"
-              name="appName"
-              placeholder=""
-              id="appName"
-            />
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-
-      <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
-        <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
-        <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
-      </div>
+<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form" style="margin-bottom: 10px">
+  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
+    <div nz-col nzMd="14" nzSm="24">
+      <nz-form-item>
+        <nz-form-label nzFor="appName">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
+        <nz-form-control>
+          <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
+                 placeholder="" id="appName" />
+        </nz-form-control>
+      </nz-form-item>
     </div>
-  </form>
 
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
-    <thead>
-      <tr>
-        <th></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
+    <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
+      <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+        i18n }}</button>
+      <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+        i18n }}</button>
+      <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
+        {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+      <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
+    </div>
+  </div>
+</form>
+<nz-table #dynamicTable nzTableLayout="auto"  nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+          [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+          [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+          (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+  <thead>
+  <tr>
+    <th></th>
+    <th nzAlign="center" style="display: none">Id</th>
+    <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.apps.name' | i18n }}</th>
+    <th nzAlign="center">{{ 'mxk.apps.category' | i18n }}</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let data of query.results.rows">
+    <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+        (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+    <td nzAlign="left" style="display: none">
+      <span>{{ data.id }}</span>
+    </td>
 
-        <td nzAlign="left"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
-        <td nzAlign="left"> {{ data.appName }}</td>
-        <td nzAlign="left">
-          <div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
-          <div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
-          <div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
-          <div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
-          <div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
-          <div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
-          <div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
-          <div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
-          <div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
-          <div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
-          <div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
-          <div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
-          <div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
-          <div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
-          <div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
-          <div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
-          <div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
-          <div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
-          <div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
-          <div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
-          <div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
-          <div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
-          <div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
-          <div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
-          <div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
-          <div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
-          <div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
-          <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
-        </td>
-      </tr>
-    </tbody>
-  </nz-table>
-</nz-card>
+    <td nzAlign="left"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
+    <td nzAlign="left"> {{ data.appName }}</td>
+    <td nzAlign="left">
+      <div *ngIf="data.category == 'none'">{{ 'mxk.apps.category.none' | i18n }}</div>
+      <div *ngIf="data.category == '1011'">{{ 'mxk.apps.category.1011' | i18n }}</div>
+      <div *ngIf="data.category == '1012'">{{ 'mxk.apps.category.1012' | i18n }}</div>
+      <div *ngIf="data.category == '1013'">{{ 'mxk.apps.category.1013' | i18n }}</div>
+      <div *ngIf="data.category == '1014'">{{ 'mxk.apps.category.1014' | i18n }}</div>
+      <div *ngIf="data.category == '1015'">{{ 'mxk.apps.category.1015' | i18n }}</div>
+      <div *ngIf="data.category == '1016'">{{ 'mxk.apps.category.1016' | i18n }}</div>
+      <div *ngIf="data.category == '1017'">{{ 'mxk.apps.category.1017' | i18n }}</div>
+      <div *ngIf="data.category == '1111'">{{ 'mxk.apps.category.1111' | i18n }}</div>
+      <div *ngIf="data.category == '1112'">{{ 'mxk.apps.category.1112' | i18n }}</div>
+      <div *ngIf="data.category == '1113'">{{ 'mxk.apps.category.1113' | i18n }}</div>
+      <div *ngIf="data.category == '1114'">{{ 'mxk.apps.category.1114' | i18n }}</div>
+      <div *ngIf="data.category == '1211'">{{ 'mxk.apps.category.1211' | i18n }}</div>
+      <div *ngIf="data.category == '1212'">{{ 'mxk.apps.category.1212' | i18n }}</div>
+      <div *ngIf="data.category == '1213'">{{ 'mxk.apps.category.1213' | i18n }}</div>
+      <div *ngIf="data.category == '1214'">{{ 'mxk.apps.category.1214' | i18n }}</div>
+      <div *ngIf="data.category == '1215'">{{ 'mxk.apps.category.1215' | i18n }}</div>
+      <div *ngIf="data.category == '1311'">{{ 'mxk.apps.category.1311' | i18n }}</div>
+      <div *ngIf="data.category == '1411'">{{ 'mxk.apps.category.1411' | i18n }}</div>
+      <div *ngIf="data.category == '1511'">{{ 'mxk.apps.category.1511' | i18n }}</div>
+      <div *ngIf="data.category == '1512'">{{ 'mxk.apps.category.1512' | i18n }}</div>
+      <div *ngIf="data.category == '1611'">{{ 'mxk.apps.category.1611' | i18n }}</div>
+      <div *ngIf="data.category == '1711'">{{ 'mxk.apps.category.1711' | i18n }}</div>
+      <div *ngIf="data.category == '1712'">{{ 'mxk.apps.category.1712' | i18n }}</div>
+      <div *ngIf="data.category == '1811'">{{ 'mxk.apps.category.1811' | i18n }}</div>
+      <div *ngIf="data.category == '1812'">{{ 'mxk.apps.category.1812' | i18n }}</div>
+      <div *ngIf="data.category == '1911'">{{ 'mxk.apps.category.1911' | i18n }}</div>
+      <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
+    </td>
+  </tr>
+  </tbody>
+</nz-table>
 <div *nzModalFooter style="display: none">
   <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
   <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
index d59c3503e5b4c66e5d30b70d094bcb8a225f7150..ef02721e84cdcff8e913bbcf58180b0630219273 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
@@ -7,85 +7,69 @@
         <nz-form-item>
           <nz-form-label nzFor="connName">{{ 'mxk.connectors.connName' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.connName"
-              [ngModelOptions]="{ standalone: true }"
-              name="connName"
-              placeholder=""
-              id="connName"
-            />
+            <input nz-input [(ngModel)]="query.params.connName" [ngModelOptions]="{ standalone: true }"
+                   name="connName" placeholder="" id="connName" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{
+          'mxk.text.query' | i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{
+          'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
 </nz-card>
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
-    <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
+    <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
+      }}</button>
     <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
       'mxk.text.delete' | i18n
-    }}</button>
+      }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+            [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+            [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+            [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+            (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
-      <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.connectors.connName' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.connectors.justInTime' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
-      </tr>
+    <tr>
+      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
+      <th nzAlign="center" style="display: none">Id</th>
+      <th nzAlign="center">{{ 'mxk.connectors.connName' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.connectors.justInTime' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+    </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
+    <tr *ngFor="let data of query.results.rows">
+      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+      <td nzAlign="left" style="display: none">
+        <span>{{ data.id }}</span>
+      </td>
 
-        <td nzAlign="left"> {{ data.connName }}</td>
-        <td nzAlign="center" *ngIf="data.justInTime == 1">{{ 'mxk.text.yes' | i18n }}</td>
-        <td nzAlign="center" *ngIf="data.justInTime == 0">{{ 'mxk.text.no' | i18n }}</td>
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-        <td nzAlign="left" nzBreakWord="false">
-          <div nz-col>
-            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-          </div>
-        </td>
-      </tr>
+      <td nzAlign="left"> {{ data.connName }}</td>
+      <td nzAlign="center" *ngIf="data.justInTime == 1">{{ 'mxk.text.yes' | i18n }}</td>
+      <td nzAlign="center" *ngIf="data.justInTime == 0">{{ 'mxk.text.no' | i18n }}</td>
+      <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                               style="color: green"></i></td>
+      <td nzAlign="center" nzBreakWord="false">
+        <div nz-col>
+          <button nz-button type="button" (click)="onEdit($event, data.id)">{{
+            'mxk.text.edit' | i18n }}</button>
+          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{
+            'mxk.text.delete' | i18n }}</button>
+        </div>
+      </td>
+    </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
index 4d80252b870eb544f1265f71035b77a5e55f49ff..609db8b0586982921e96673361a9aab21791dc0a 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
@@ -7,24 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.socialsproviders.providerName' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.providerName"
-              [ngModelOptions]="{ standalone: true }"
-              name="providerName"
-              placeholder=""
-              id="providerName"
-            />
+            <input nz-input [(ngModel)]="query.params.providerName" [ngModelOptions]="{ standalone: true }"
+                   name="providerName" placeholder="" id="providerName" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -34,66 +29,55 @@
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
     <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
       'mxk.text.delete' | i18n
-    }}</button>
+      }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+            [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+            [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+            (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
-      <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.socialsproviders.icon' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.socialsproviders.provider' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.socialsproviders.providerName' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.text.sortIndex' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.socialsproviders.display' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.socialsproviders.scanCode' | i18n }}</th>
+    <tr>
+      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
+      <th nzAlign="center" style="display: none">Id</th>
+      <th nzAlign="center">{{ 'mxk.socialsproviders.icon' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.socialsproviders.provider' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.socialsproviders.providerName' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.sortIndex' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.socialsproviders.display' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.socialsproviders.scanCode' | i18n }}</th>
 
-        <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
-      </tr>
+      <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.status' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+    </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
-        <td nzAlign="center" nzBreakWord="false"><img src="{{ data.icon }}" /></td>
-        <td nzAlign="left"> {{ data.provider }}</td>
-        <td nzAlign="left"> {{ data.providerName }}</td>
-        <td nzAlign="center"> {{ data.sortIndex }}</td>
-        <td nzAlign="center"> <i *ngIf="data.display == 'true'" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-        <td nzAlign="center"> <i *ngIf="data.scanCode == 'true'" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+    <tr *ngFor="let data of query.results.rows">
+      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+      <td nzAlign="left" style="display: none">
+        <span>{{ data.id }}</span>
+      </td>
+      <td nzAlign="center" nzBreakWord="false"><img src="{{ data.icon }}" /></td>
+      <td nzAlign="left"> {{ data.provider }}</td>
+      <td nzAlign="left"> {{ data.providerName }}</td>
+      <td nzAlign="center"> {{ data.sortIndex }}</td>
+      <td nzAlign="center"> <i *ngIf="data.display == 'true'" nz-icon nzType="check-circle" nzTheme="fill"
+                               style="color: green"></i></td>
+      <td nzAlign="center"> <i *ngIf="data.scanCode == 'true'" nz-icon nzType="check-circle" nzTheme="fill"
+                               style="color: green"></i></td>
 
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-        <td nzAlign="left" nzBreakWord="false">
-          <div nz-col>
-            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-          </div>
-        </td>
-      </tr>
+      <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                               style="color: green"></i></td>
+      <td nzAlign="center" nzBreakWord="false">
+        <div nz-col>
+          <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' |
+            i18n }}</button>
+          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
+            }}</button>
+        </div>
+      </td>
+    </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
index 412603ea3c1244d73ce671a5a89169ce7d565eca..fd1f6342712342ee703713af33ca9f76244bbeda 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
@@ -7,17 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.synchronizers.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name" placeholder="" id="name" />
+            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name"
+                   placeholder="" id="name" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -27,58 +29,46 @@
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
     <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
       'mxk.text.delete' | i18n
-    }}</button>
+      }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+            [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+            [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+            (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
-      <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-        <th nzAlign="center" style="display: none">Id</th>
-        <th nzAlign="center">{{ 'mxk.synchronizers.name' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.synchronizers.scheduler' | i18n }}</th>
-        <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
-      </tr>
+    <tr>
+      <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
+      <th nzAlign="center" style="display: none">Id</th>
+      <th nzAlign="center">{{ 'mxk.synchronizers.name' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.synchronizers.scheduler' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+      <th nzAlign="center" class="table_cell_action_3">{{ 'mxk.text.action' | i18n }}</th>
+    </tr>
     </thead>
     <tbody>
-      <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
-        <td nzAlign="left" style="display: none">
-          <span>{{ data.id }}</span>
-        </td>
+    <tr *ngFor="let data of query.results.rows">
+      <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+      <td nzAlign="left" style="display: none">
+        <span>{{ data.id }}</span>
+      </td>
 
-        <td nzAlign="left"> {{ data.name }}</td>
-        <td nzAlign="left"> {{ data.scheduler }}</td>
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-        <td nzAlign="left" nzBreakWord="false">
-          <div nz-col>
-            <button nz-button type="button" (click)="onSynchr($event, data.id)" style="float: left">{{ 'mxk.text.synchr' | i18n }}</button>
-            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-          </div>
-        </td>
-      </tr>
+      <td nzAlign="left"> {{ data.name }}</td>
+      <td nzAlign="left"> {{ data.scheduler }}</td>
+      <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                               style="color: green"></i></td>
+      <td nzAlign="center" nzBreakWord="false">
+        <div nz-col>
+          <button nz-button type="button" (click)="onSynchr($event, data.id)">{{ 'mxk.text.synchr'
+            | i18n }}</button>
+          <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' |
+            i18n }}</button>
+          <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
+            }}</button>
+        </div>
+      </td>
+    </tr>
     </tbody>
   </nz-table>
 </nz-card>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/organizations/organizations.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/organizations/organizations.component.html
index 2518a43dea39e48705ac55de6887dcdc97bf9f2f..d772c76452d4763fba26311bb244b9ade564ba9b 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/organizations/organizations.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/organizations/organizations.component.html
@@ -7,23 +7,18 @@
         <nz-form-item>
           <nz-form-label nzFor="orgName">{{ 'mxk.organizations.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.orgName"
-              [ngModelOptions]="{ standalone: true }"
-              name="orgName"
-              placeholder=""
-              id="orgName"
-            />
+            <input nz-input [(ngModel)]="query.params.orgName" [ngModelOptions]="{ standalone: true }" name="orgName"
+                   placeholder="" id="orgName" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -34,18 +29,11 @@
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
       <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
         'mxk.text.delete' | i18n
-      }}</button>
+        }}</button>
     </div>
     <div nz-col nzMd="6" nzSm="24" class="grid-border">
-      <nz-tree
-        nzShowLine="false"
-        [nzCheckable]="treeNodes.checkable"
-        nzBlockNode
-        [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)"
-        (nzDblClick)="openFolder($event)"
-        [nzTreeTemplate]="nzTreeTemplate"
-      ></nz-tree>
+      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
+               (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -66,67 +54,51 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table
-        #dynamicTable
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-        nzWidth="100%"
-      >
+      <nz-table #dynamicTable nzBordered nzShowSizeChanger nzSize="small" [nzData]="query.results.rows" [nzFrontPagination]="false"
+                [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+                [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber"
+                [nzLoading]="this.query.tableLoading" (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
         <thead>
-          <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-            <th nzAlign="center" style="width: 20%">{{ 'mxk.organizations.code' | i18n }}</th>
-            <th nzAlign="center" style="width: 30%">{{ 'mxk.organizations.name' | i18n }}</th>
-            <th nzAlign="center" style="width: 10%">{{ 'mxk.organizations.type' | i18n }}</th>
-            <th nzAlign="center" style="width: 10%">{{ 'mxk.text.sortIndex' | i18n }}</th>
-            <th nzAlign="center" style="width: 10%">{{ 'mxk.text.status' | i18n }}</th>
-            <th nzAlign="center" style="width: 20%"
-              ><a>{{ 'mxk.text.action' | i18n }}</a></th
-            >
-          </tr>
+        <tr>
+          <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
+          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.code' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.name' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.organizations.type' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.sortIndex' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.text.status' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+        </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
-            <td nzAlign="left">
-              <span>{{ data.orgCode }}</span>
-            </td>
-            <td nzAlign="left"> {{ data.orgName }}</td>
-            <td nzAlign="center" *ngIf="data.type == 'company'"> {{ 'mxk.organizations.type.company' | i18n }}</td>
-            <td nzAlign="center" *ngIf="data.type == 'division'"> {{ 'mxk.organizations.type.division' | i18n }}</td>
-            <td nzAlign="center" *ngIf="data.type == 'department'"> {{ 'mxk.organizations.type.department' | i18n }} </td>
-            <td nzAlign="center" *ngIf="data.type == 'entity'"> {{ 'mxk.organizations.type.entity' | i18n }}</td>
-            <td nzAlign="center" *ngIf="data.type == 'virtual'"> {{ 'mxk.organizations.type.virtual' | i18n }}</td>
-            <td nzAlign="center"> {{ data.sortIndex }}</td>
-            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-            <td nzAlign="left" nzBreakWord="false">
-              <div nz-col>
-                <button nz-button type="button" (click)="onEdit($event, data.id)">
-                  {{ 'mxk.text.edit' | i18n }}
-                </button>
-                <button
-                  *ngIf="data.parentId != null && data.parentId != '-1' && data.parentId != '0' && data.id != data.instId"
-                  nz-button
-                  type="button"
-                  (click)="onDelete($event, data.id)"
-                  nzDanger
-                  >{{ 'mxk.text.delete' | i18n }}</button
-                >
-              </div>
-            </td>
-          </tr>
+        <tr *ngFor="let data of query.results.rows">
+          <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+          <td nzAlign="left">
+            <span>{{ data.orgCode }}</span>
+          </td>
+          <td nzAlign="left"> {{ data.orgName }}</td>
+          <td nzAlign="center" *ngIf="data.type == 'company'"> {{ 'mxk.organizations.type.company' | i18n }}</td>
+          <td nzAlign="center" *ngIf="data.type == 'division'"> {{ 'mxk.organizations.type.division' | i18n }}</td>
+          <td nzAlign="center" *ngIf="data.type == 'department'"> {{ 'mxk.organizations.type.department' | i18n }}
+          </td>
+          <td nzAlign="center" *ngIf="data.type == 'entity'"> {{ 'mxk.organizations.type.entity' | i18n }}</td>
+          <td nzAlign="center" *ngIf="data.type == 'virtual'"> {{ 'mxk.organizations.type.virtual' | i18n }}</td>
+          <td nzAlign="center"> {{ data.sortIndex }}</td>
+          <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                                   style="color: green"></i></td>
+          <td nzAlign="center" nzBreakWord="false">
+            <div nz-col>
+              <button nz-button type="button" (click)="onEdit($event, data.id)">
+                {{ 'mxk.text.edit' | i18n }}
+              </button>
+              <button
+                *ngIf="data.parentId != null && data.parentId != '-1' && data.parentId != '0' && data.id != data.instId"
+                nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
+                }}</button>
+            </div>
+          </td>
+        </tr>
         </tbody>
       </nz-table>
     </div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
index b5feaa1029543a497791421bd037546681c2a611..751c87b8a90e6cf1ada52fe5c228fb448815dfeb 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
@@ -8,18 +8,12 @@
           <nz-form-label nzFor="name">{{ 'mxk.resources.appName' | i18n }}</nz-form-label>
           <nz-form-control>
             <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
-              <input
-                nz-input
-                [(ngModel)]="query.params.appName"
-                [ngModelOptions]="{ standalone: true }"
-                name="appName"
-                readonly
-                placeholder=""
-                id="appName"
-              />
+              <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
+                     readonly placeholder="" id="appName" />
             </nz-input-group>
             <ng-template #suffixButton>
-              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n }}</button>
+              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
+                }}</button>
             </ng-template>
           </nz-form-control>
         </nz-form-item>
@@ -28,23 +22,18 @@
         <nz-form-item>
           <nz-form-label nzFor="resourceName">{{ 'mxk.resources.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.resourceName"
-              [ngModelOptions]="{ standalone: true }"
-              name="resourceName"
-              placeholder=""
-              id="resourceName"
-            />
+            <input nz-input [(ngModel)]="query.params.resourceName" [ngModelOptions]="{ standalone: true }"
+                   name="resourceName" placeholder="" id="resourceName" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -55,18 +44,11 @@
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
       <button nz-button type="button" (click)="onBatchDelete($event)" [nzType]="'primary'" nzDanger class="mx-sm">{{
         'mxk.text.delete' | i18n
-      }}</button>
+        }}</button>
     </div>
     <div nz-col nzMd="6" nzSm="24" class="grid-border">
-      <nz-tree
-        nzShowLine="false"
-        [nzCheckable]="treeNodes.checkable"
-        nzBlockNode
-        [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)"
-        (nzDblClick)="openFolder($event)"
-        [nzTreeTemplate]="nzTreeTemplate"
-      ></nz-tree>
+      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
+               (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -87,55 +69,43 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-        nzWidth="100%"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+                [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+                [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber"
+                [nzLoading]="this.query.tableLoading" (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
         <thead>
-          <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-            <th nzAlign="center">{{ 'mxk.resources.appName' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.resources.name' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.resources.resourceType' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.text.sortIndex' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-            <th nzAlign="center"
-              ><a>{{ 'mxk.text.action' | i18n }}</a></th
-            >
-          </tr>
+        <tr>
+          <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
+          <th nzAlign="center">{{ 'mxk.resources.appName' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.resources.name' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.resources.resourceType' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.text.sortIndex' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+        </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
-            <td nzAlign="left">
-              <span>{{ data.appName }}</span>
-            </td>
-            <td nzAlign="left"> {{ data.resourceName }}</td>
-            <td nzAlign="left"> {{ data.resourceType }}</td>
-            <td nzAlign="center"> {{ data.sortIndex }}</td>
-            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-            <td nzAlign="left" nzBreakWord="false">
-              <div nz-col>
-                <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-                <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
-              </div>
-            </td>
-          </tr>
+        <tr *ngFor="let data of query.results.rows">
+          <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+          <td nzAlign="center">
+            {{ data.appName }}
+          </td>
+          <td nzAlign="left"> {{ data.resourceName }}</td>
+          <td nzAlign="left"> {{ data.resourceType }}</td>
+          <td nzAlign="center"> {{ data.sortIndex }}</td>
+          <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                                   style="color: green"></i></td>
+          <td nzAlign="center" nzBreakWord="false">
+            <div nz-col>
+              <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit'
+                | i18n }}</button>
+              <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
+                }}</button>
+            </div>
+          </td>
+        </tr>
         </tbody>
       </nz-table>
     </div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/select-user/select-user.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/select-user/select-user.component.html
index 0b1187b0eb52177f21c588eef27b50155308147e..17d8c86559a9e7ef26ed15dddb24145faab3ebb5 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/select-user/select-user.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/select-user/select-user.component.html
@@ -1,111 +1,83 @@
 <div *nzModalTitle> {{ 'mxk.text.select' | i18n }} </div>
 
-<nz-card [nzBordered]="false">
-  <form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form">
-    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
-      <div nz-col nzMd="14" nzSm="24">
-        <nz-form-item>
-          <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
-          <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.username"
-              [ngModelOptions]="{ standalone: true }"
-              name="username"
-              placeholder=""
-              id="username"
-            />
-          </nz-form-control>
-        </nz-form-item>
-      </div>
-      <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
-        <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
-        <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
-      </div>
+<form nz-form [nzLayout]="'inline'" (ngSubmit)="onSearch()" class="search__form" style="margin-bottom: 10px">
+  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 24, lg: 24, xl: 48, xxl: 48 }">
+    <div nz-col nzMd="14" nzSm="24">
+      <nz-form-item>
+        <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
+        <nz-form-control>
+          <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
+                 placeholder="" id="username" />
+        </nz-form-control>
+      </nz-form-item>
     </div>
-  </form>
-</nz-card>
-<nz-card [nzBordered]="false">
-  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
-    <div nz-col nzMd="6" nzSm="24">
-      <nz-tree
-        nzShowLine="false"
-        [nzCheckable]="treeNodes.checkable"
-        nzBlockNode
-        [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)"
-        (nzDblClick)="openFolder($event)"
-        [nzTreeTemplate]="nzTreeTemplate"
-      ></nz-tree>
-      <ng-template #nzTreeTemplate let-node let-origin="origin">
-        <span class="custom-node">
-          <span *ngIf="!node.isLeaf">
-            <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
-            <span class="folder-name">{{ node.title }}</span>
-          </span>
-          <span *ngIf="node.isLeaf">
-            <i nz-icon nzType="file"></i>
-            <span class="file-name">{{ node.title }}</span>
-          </span>
-        </span>
-      </ng-template>
-    </div>
-    <div nz-col nzMd="18" nzSm="24">
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzSize="small"
-        nzBordered
-        sizeChanger="true"
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-        nzWidth="100%"
-      >
-        <thead>
-          <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-            <th nzAlign="center" style="display: none">{{ 'mxk.text.id' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.employeeNumber' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
-            <th nzAlign="center"
-              ><a>{{ 'mxk.text.action' | i18n }}</a></th
-            >
-          </tr>
-        </thead>
-        <tbody>
-          <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
-            <td nzAlign="left" style="display: none">
-              <span>{{ data.id }}</span>
-            </td>
-            <td nzAlign="left"> {{ data.username }}</td>
-            <td nzAlign="left"> {{ data.displayName }}</td>
-            <td nzAlign="left"> {{ data.employeeNumber }}</td>
-            <td nzAlign="left"> {{ data.department }}</td>
-            <td nzAlign="left"> {{ data.jobTitle }}</td>
-            <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' | i18n) }}</td>
-          </tr>
-        </tbody>
-      </nz-table>
+    <div nz-col [nzSpan]="query.expandForm ? 24 : 10" [class.text-right]="query.expandForm">
+      <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+        i18n }}</button>
+      <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+        i18n }}</button>
+      <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
+        {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
+      <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
     </div>
   </div>
-</nz-card>
+</form>
+<div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
+  <div nz-col nzMd="6" nzSm="24">
+    <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
+             (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
+    <ng-template #nzTreeTemplate let-node let-origin="origin">
+      <span class="custom-node">
+        <span *ngIf="!node.isLeaf">
+          <i nz-icon [nzType]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
+          <span class="folder-name">{{ node.title }}</span>
+        </span>
+        <span *ngIf="node.isLeaf">
+          <i nz-icon nzType="file"></i>
+          <span class="file-name">{{ node.title }}</span>
+        </span>
+      </span>
+    </ng-template>
+  </div>
+  <div nz-col nzMd="18" nzSm="24">
+    <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered sizeChanger="true" nzShowSizeChanger
+              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+              (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
+      <thead>
+      <tr>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+            (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th nzAlign="center" style="display: none">{{ 'mxk.text.id' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.users.employeeNumber' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr *ngFor="let data of query.results.rows">
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+            (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+        <td nzAlign="left" style="display: none">
+          <span>{{ data.id }}</span>
+        </td>
+        <td nzAlign="left"> {{ data.username }}</td>
+        <td nzAlign="left"> {{ data.displayName }}</td>
+        <td nzAlign="left"> {{ data.employeeNumber }}</td>
+        <td nzAlign="left"> {{ data.department }}</td>
+        <td nzAlign="left"> {{ data.jobTitle }}</td>
+        <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' |
+          i18n) }}</td>
+      </tr>
+      </tbody>
+    </nz-table>
+  </div>
+  <div *nzModalFooter style="display: none">
+    <button nz-button nzType="default" (click)="onClose($event)">{{ 'mxk.text.close' | i18n }}</button>
+    <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.submit' | i18n }}</button>
+  </div>
+</div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/users.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/users.component.html
index cbfec6f664607a38b3b6a8571f0ac457f845e2b2..c03edc444f09b9d885d98c245b20eeebdec62a6d 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/users.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/users/users.component.html
@@ -7,29 +7,24 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.username"
-              [ngModelOptions]="{ standalone: true }"
-              name="username"
-              placeholder=""
-              id="username"
-            />
+            <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
+                   placeholder="" id="username" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
 </nz-card>
 <nz-card [nzBordered]="false">
-  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
+  <div nz-row>
     <div nz-col [nzSpan]="24" class="table-list-toolbar">
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">
         {{ 'mxk.text.add' | i18n }}
@@ -41,16 +36,9 @@
         {{ 'mxk.text.delete' | i18n }}
       </button>
     </div>
-    <div nz-col nzMd="6" nzSm="24" class="grid-border">
-      <nz-tree
-        nzShowLine="false"
-        [nzCheckable]="treeNodes.checkable"
-        nzBlockNode
-        [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)"
-        (nzDblClick)="openFolder($event)"
-        [nzTreeTemplate]="nzTreeTemplate"
-      ></nz-tree>
+    <div nz-col [nzSpan]="6" class="grid-border">
+      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
+               (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -71,108 +59,99 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzSize="small"
-        nzBordered
-        sizeChanger="true"
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-        nzWidth="100%"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered sizeChanger="true" nzShowSizeChanger
+                [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+                [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+                [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+                (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
         <thead>
-          <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
-            <th nzAlign="center" style="display: none">{{ 'mxk.text.id' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.employeeNumber' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
-            <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-            <th nzAlign="center"
-              ><a>{{ 'mxk.text.action' | i18n }}</a></th
-            >
-          </tr>
+        <tr>
+          <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
+          <th nzAlign="center" style="display: none">{{ 'mxk.text.id' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.employeeNumber' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.department' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.jobTitle' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.users.gender' | i18n }}</th>
+          <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+          <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.text.action' | i18n }}</th>
+        </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
-            <td nzAlign="left" style="display: none">
-              <span>{{ data.id }}</span>
-            </td>
-            <td nzAlign="left"> {{ data.username }}</td>
-            <td nzAlign="left"> {{ data.displayName }}</td>
-            <td nzAlign="left"> {{ data.employeeNumber }}</td>
-            <td nzAlign="left"> {{ data.department }}</td>
-            <td nzAlign="left"> {{ data.jobTitle }}</td>
-            <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' | i18n) }}</td>
-            <td nzAlign="center">
-              <a title="{{ 'mxk.users.status.active' | i18n }}" *ngIf="data.status == 1">
-                <i nz-icon nzType="check-circle" nzTheme="fill" style="color: green"> </i>
-              </a>
-              <a title="{{ 'mxk.users.status.inactive' | i18n }}" *ngIf="data.status == 2">
-                <i nz-icon nzType="warning" nzTheme="fill" style="color: gray"></i>
-              </a>
-              <a title="{{ 'mxk.users.status.forbidden' | i18n }}" *ngIf="data.status == 4">
-                <i nz-icon nzType="stop" nzTheme="fill" style="color: gray"></i>
-              </a>
-              <a title="{{ 'mxk.users.status.lock' | i18n }}" *ngIf="data.status == 5">
-                <i nz-icon nzType="lock" nzTheme="fill" style="color: orange"></i>
-              </a>
-              <a title="{{ 'mxk.users.status.delete' | i18n }}" *ngIf="data.status == 9">
-                <i nz-icon nzType="close-circle" nzTheme="fill" style="color: red"></i>
-              </a>
-            </td>
-            <td nzAlign="left" nzBreakWord="false">
-              <div nz-col>
-                <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">
-                  {{ 'mxk.text.edit' | i18n }}
-                </button>
-                <button *ngIf="data.status !== 9" nz-button nz-dropdown [nzDropdownMenu]="menuMoreAction">
-                  {{ 'mxk.text.moreaction' | i18n }}
-                  <i nz-icon nzType="down"></i>
-                </button>
-                <nz-dropdown-menu #menuMoreAction="nzDropdownMenu">
-                  <ul nz-menu>
-                    <li nz-menu-item *ngIf="data.status == 1" (click)="onNavToUrl($event, data.id, data.username, 'roles')">{{
-                      'mxk.text.roles' | i18n
+        <tr *ngFor="let data of query.results.rows">
+          <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
+          <td nzAlign="left" style="display: none">
+            <span>{{ data.id }}</span>
+          </td>
+          <td nzAlign="left"> {{ data.username }}</td>
+          <td nzAlign="left"> {{ data.displayName }}</td>
+          <td nzAlign="left"> {{ data.employeeNumber }}</td>
+          <td nzAlign="left"> {{ data.department }}</td>
+          <td nzAlign="left"> {{ data.jobTitle }}</td>
+          <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' |
+            i18n) }}</td>
+          <td nzAlign="center">
+            <a title="{{ 'mxk.users.status.active' | i18n }}" *ngIf="data.status == 1">
+              <i nz-icon nzType="check-circle" nzTheme="fill" style="color: green"> </i>
+            </a>
+            <a title="{{ 'mxk.users.status.inactive' | i18n }}" *ngIf="data.status == 2">
+              <i nz-icon nzType="warning" nzTheme="fill" style="color: gray"></i>
+            </a>
+            <a title="{{ 'mxk.users.status.forbidden' | i18n }}" *ngIf="data.status == 4">
+              <i nz-icon nzType="stop" nzTheme="fill" style="color: gray"></i>
+            </a>
+            <a title="{{ 'mxk.users.status.lock' | i18n }}" *ngIf="data.status == 5">
+              <i nz-icon nzType="lock" nzTheme="fill" style="color: orange"></i>
+            </a>
+            <a title="{{ 'mxk.users.status.delete' | i18n }}" *ngIf="data.status == 9">
+              <i nz-icon nzType="close-circle" nzTheme="fill" style="color: red"></i>
+            </a>
+          </td>
+          <td nzAlign="center" nzBreakWord="false">
+            <div nz-col>
+              <button nz-button type="button" (click)="onEdit($event, data.id)">
+                {{ 'mxk.text.edit' | i18n }}
+              </button>
+              <button *ngIf="data.status == 9" nz-button nz-dropdown>
+                {{ 'mxk.text.moreaction' | i18n }}
+                <i nz-icon nzType="down"></i>
+              </button>
+              <button *ngIf="data.status !== 9" nz-button nz-dropdown [nzDropdownMenu]="menuMoreAction">
+                {{ 'mxk.text.moreaction' | i18n }}
+                <i nz-icon nzType="down"></i>
+              </button>
+              <nz-dropdown-menu #menuMoreAction="nzDropdownMenu">
+                <ul nz-menu>
+                  <li nz-menu-item *ngIf="data.status == 1"
+                      (click)="onNavToUrl($event, data.id, data.username, 'roles')">{{
+                    'mxk.text.roles' | i18n
                     }}</li>
-                    <li nz-menu-item *ngIf="data.status == 1" (click)="changePasswordById($event, data.id)">{{
-                      'mxk.text.changepassword' | i18n
+                  <li nz-menu-item *ngIf="data.status == 1" (click)="changePasswordById($event, data.id)">{{
+                    'mxk.text.changepassword' | i18n
                     }}</li>
-                    <li nz-menu-item *ngIf="data.status == 1" (click)="onUpdateStatus($event, data.id, 5)">{{ 'mxk.text.lock' | i18n }}</li>
-                    <li nz-menu-item *ngIf="data.status == 1" (click)="onUpdateStatus($event, data.id, 4)">{{
-                      'mxk.text.disable' | i18n
+                  <li nz-menu-item *ngIf="data.status == 1" (click)="onUpdateStatus($event, data.id, 5)">{{
+                    'mxk.text.lock' | i18n }}</li>
+                  <li nz-menu-item *ngIf="data.status == 1" (click)="onUpdateStatus($event, data.id, 4)">{{
+                    'mxk.text.disable' | i18n
                     }}</li>
-                    <li nz-menu-item *ngIf="data.status == 2" (click)="onUpdateStatus($event, data.id, 1)">{{
-                      'mxk.text.enable' | i18n
+                  <li nz-menu-item *ngIf="data.status == 2" (click)="onUpdateStatus($event, data.id, 1)">{{
+                    'mxk.text.enable' | i18n
                     }}</li>
-                    <li nz-menu-item *ngIf="data.status == 4" (click)="onUpdateStatus($event, data.id, 1)">{{
-                      'mxk.text.enable' | i18n
+                  <li nz-menu-item *ngIf="data.status == 4" (click)="onUpdateStatus($event, data.id, 1)">{{
+                    'mxk.text.enable' | i18n
                     }}</li>
-                    <li nz-menu-item *ngIf="data.status == 5" (click)="onUpdateStatus($event, data.id, 1)">{{
-                      'mxk.text.unlock' | i18n
+                  <li nz-menu-item *ngIf="data.status == 5" (click)="onUpdateStatus($event, data.id, 1)">{{
+                    'mxk.text.unlock' | i18n
                     }}</li>
-                    <li nz-menu-item (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</li>
-                  </ul>
-                </nz-dropdown-menu>
-              </div>
-            </td>
-          </tr>
+                  <li nz-menu-item (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</li>
+                </ul>
+              </nz-dropdown-menu>
+            </div>
+          </td>
+        </tr>
         </tbody>
       </nz-table>
     </div>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/style/_layout.less b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/style/_layout.less
index 5fe688744e6a775eefaccce22336a7f70c9ac4fd..6e95973761110fbe2fa525d665f24395514bb2ff 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/style/_layout.less
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/style/_layout.less
@@ -114,3 +114,39 @@ body {
   }
 }
 .layout-default-rtl-mixin(@rtl-enabled);
+.search__form .ant-form-item {
+  margin-right: 0;
+  margin-bottom: 2px !important;
+}
+
+.table_cell_action_3 {
+  width: 240px;
+}
+
+.table_cell_action_2 {
+  width: 210px;
+}
+
+.table_cell_action_1 {
+  width: 100px;
+}
+
+.alain-default__aside-user {
+  margin: 10px 24px 10px 24px !important;
+}
+.alain-default__nav-item_collapsed {
+  position: absolute;
+  bottom: 0;
+  left: 6px;
+}
+.ant-modal-body {
+  padding-top: 5px !important;
+  padding-bottom: 5px !important;
+}
+nz-tabset {
+  width: 95% !important;
+}
+
+.ant-tabs-nav-list{
+  margin-left: 15px;
+}