diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions-editer/permissions-editer.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions-editer/permissions-editer.component.html
index 655311051..b470bc226 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions-editer/permissions-editer.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/permissions/permissions-editer/permissions-editer.component.html
@@ -6,60 +6,44 @@
         <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>
 
       <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 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>
         <button nz-button nzType="primary" (click)="onSubmit($event)">{{ 'mxk.text.confirm' | i18n }}</button>
       </div>
     </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%"
-  >
+  <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 [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.category' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.text.sortIndex' | i18n }}</th>
+        <th nzAlign="center">{{ 'mxk.text.status' | 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 [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
         <td nzAlign="left"> {{ data.appName }}</td>
         <td nzAlign="left">
@@ -92,6 +76,9 @@
           <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"> {{ data.sortIndex }}</td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
       </tr>
     </tbody>
   </nz-table>
@@ -99,4 +86,4 @@
 <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>
\ No newline at end of file
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 af723101e..954797dd2 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
@@ -8,7 +8,7 @@
           <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" />
+              placeholder="" id="appName" />
           </nz-form-control>
         </nz-form-item>
       </div>
@@ -69,85 +69,87 @@
       }}</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%">
+    [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"
+      <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>
+        <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.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"
+      <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" 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="center" nzBreakWord="false">
-        <div nz-col>
-          <button nz-button type="button" (click)="onEdit($event, data.id, data.protocol)">{{ 'mxk.text.edit' | i18n }}</button>
+        <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="left"> {{ 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, 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>
+            <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>
+            <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>
+</nz-card>
\ No newline at end of file
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 2ad4ce227..8c7665350 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
@@ -6,79 +6,84 @@
         <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" />
+            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 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%">
+<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>
+    <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>
+      <th nzAlign="center">{{ 'mxk.text.sortIndex' | i18n }}</th>
+      <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
+    </tr>
   </thead>
   <tbody>
-  <tr *ngFor="let data of query.results.rows">
-    <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+    <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" 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>
+      <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>
+      <td nzAlign="left"> {{ data.sortIndex }}</td>
+      <td nzAlign="center"> <i *ngIf="data.status == 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>
-</div>
+</div>
\ No newline at end of file