diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/layout/basic/basic.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/layout/basic/basic.component.ts
index a8e3dbbb6..b8efbd094 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/layout/basic/basic.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/layout/basic/basic.component.ts
@@ -1,19 +1,18 @@
 /*
  * Copyright [2022] [MaxKey of copyright http://www.maxkey.top]
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *     http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
 
 import { Component } from '@angular/core';
 import { SettingsService, User } from '@delon/theme';
@@ -38,10 +37,10 @@ import { LayoutDefaultOptions } from '../../theme/layout-default';
         <a href="#">
           <img src="../assets/logo.jpg" alt="logo" style="height: 50px;height: 50px;float: left;" />
           <div
+            class="alain-default__nav-item_title"
             style="letter-spacing: 2px;
               font-size: 20px;
               font-weight: bolder;
-              color:white;
               width: 450px;
               margin-top: 12px;"
           >
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 25d034365..3d27cd7c1 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
@@ -3,7 +3,7 @@
 <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="10" nzSm="24">
+      <div nz-col nzMd="8" nzSm="24">
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.accounts.username' | i18n }}</nz-form-label>
           <nz-form-control>
@@ -11,24 +11,30 @@
           </nz-form-control>
         </nz-form-item>
       </div>
-      <div nz-col nzMd="10" nzSm="24">
+      <div nz-col nzMd="8" nzSm="24">
         <nz-form-item>
           <nz-form-label nzFor="appName">{{ 'mxk.accounts.appName' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.appName"
-              [ngModelOptions]="{ standalone: true }"
-              name="appName"
-              placeholder=""
-              id="appName"
-            />
+            <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
+              <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>
+            </ng-template>
           </nz-form-control>
         </nz-form-item>
       </div>
-      <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
+      <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="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
         >
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts
index 8d14319ab..4b9f5e184 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.ts
@@ -1,19 +1,18 @@
 /*
  * Copyright [2022] [MaxKey of copyright http://www.maxkey.top]
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *     http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
 
 import { ChangeDetectionStrategy, ViewContainerRef, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@@ -26,6 +25,7 @@ import { NzTableQueryParams } from 'ng-zorro-antd/table';
 
 import { AccountsService } from '../../service/accounts.service';
 import { set2String } from '../../shared/index';
+import { SelectAppsComponent } from '../apps/select-apps/select-apps.component';
 import { AccountEditerComponent } from './account-editer/account-editer.component';
 
 @Component({
@@ -109,6 +109,26 @@ export class AccountsComponent implements OnInit {
 
   onReset(): void { }
 
+  onSelect(e: MouseEvent): void {
+    e.preventDefault();
+
+    const modal = this.modalService.create({
+      nzContent: SelectAppsComponent,
+      nzViewContainerRef: this.viewContainerRef,
+      nzComponentParams: {},
+      nzWidth: 700,
+      nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
+    });
+    // Return a result when closed
+    modal.afterClose.subscribe(result => {
+      if (result.refresh) {
+        this.query.params.appName = result.data.name;
+        //this.query.params.appId = result.data.id;
+        console.log(result);
+        this.fetch();
+      }
+    });
+  }
   onBatchDelete(e: MouseEvent): void {
     e.preventDefault();
     this.accountsService.delete(set2String(this.query.tableCheckedId)).subscribe(res => {
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts
index bf8090f99..71148023f 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.ts
@@ -1,19 +1,18 @@
 /*
  * Copyright [2022] [MaxKey of copyright http://www.maxkey.top]
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *     http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
 
 import { ChangeDetectionStrategy, ViewContainerRef, ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts
index 8c9a416bb..8a1d1787f 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/shared/consts.ts
@@ -1,19 +1,18 @@
 /*
  * Copyright [2022] [MaxKey of copyright http://www.maxkey.top]
- * 
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
- * 
+ *
  *     http://www.apache.org/licenses/LICENSE-2.0
- * 
+ *
  * Unless required by applicable law or agreed to in writing, software
  * distributed under the License is distributed on an "AS IS" BASIS,
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
 
 export const CONSTS = {
     CONGRESS: 'congress',
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/layout-nav.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/layout-nav.component.html
index 2921b095f..153a3971f 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/layout-nav.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/theme/layout-default/layout-nav.component.html
@@ -64,11 +64,7 @@
     <ng-template [ngTemplateOutlet]="tree" [ngTemplateOutletContext]="{ $implicit: group.children }"></ng-template>
   </ng-container>
   <li>
-    <div
-      class="alain-default__nav-item alain-default__nav-item--collapse"
-      (click)="toggleCollapsed()"
-      style="background-color: aliceblue; color: #000"
-    >
+    <div class="alain-default__nav-item alain-default__nav-item--collapse alain-default__nav-item_collapsed" (click)="toggleCollapsed()">
       <i nz-icon [nzType]="collapsedIcon"></i>
     </div>
   </li>
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/styles/theme.less b/maxkey-web-frontend/maxkey-web-mgt-app/src/styles/theme.less
index 358287268..a8dce242e 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/styles/theme.less
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/styles/theme.less
@@ -7,3 +7,55 @@
 // ==========The following is the custom theme variable area==========
 // The theme paraments can be generated at https://ng-alain.github.io/ng-alain/
 // @primary-color: #f50;
+@alain-default-header-hg: 52px;
+@alain-default-header-bg: #fff;
+
+.alain-default__nav-item, .alain-default__nav nz-badge {
+    color: #212529;
+}
+
+.alain-default__nav-item_title{
+    color: #212529;
+}
+
+.alain-default__nav-item:hover {
+    color: #212529;
+    background-color: rgb(255 255 255 / 20%) !important;
+}
+
+@alain-default-aside-bg: #212529;
+
+.alain-default__aside-user-info{
+    color: #fff;
+}
+@alain-default-aside-nav-text-color:#fff;
+@alain-default-aside-nav-text-hover-color: #fff;
+@alain-default-aside-nav-selected-text-color: #fff;
+
+.sidebar-nav .sidebar-nav__selected{
+    color: #fff;
+    background: @primary-color
+  }
+
+  .sidebar-nav__sub .sidebar-nav__item{
+    color: #000000a6;
+  }
+  
+  .sidebar-nav__open > .sidebar-nav__sub {
+    background-color: #212529;
+  }
+
+  .sidebar-nav__sub .sidebar-nav__item:hover{
+    background: rgb(214 26 26 / 4%);
+  }
+  
+  .sidebar-nav__item-link:hover {
+    color: #fff;
+    background-color: @primary-color
+}
+
+.alain-default__nav-item_collapsed{ 
+    color: white;
+
+    /**  background-color: aliceblue */
+}
\ No newline at end of file