diff --git a/src/workbench/browser/src/app/pages/api/api.component.html b/src/workbench/browser/src/app/pages/api/api.component.html
index 9c7f63ae0..cc5cfd777 100644
--- a/src/workbench/browser/src/app/pages/api/api.component.html
+++ b/src/workbench/browser/src/app/pages/api/api.component.html
@@ -60,10 +60,13 @@
               class="flex items-center justify-center mx-1 icon"
               i18n-title
               title="Quick look"
-              (click)="handleShowEnv()"
+              nz-dropdown
+              nzTrigger="click"
+              [nzDropdownMenu]="envParams"
             >
               <eo-iconpark-icon name="eyes"></eo-iconpark-icon>
             </span>
+            <nz-dropdown-menu #envParams="nzDropdownMenu"> <env-list></env-list> </nz-dropdown-menu>
           </div>
         </div>
         <div class="content_container {{ this.id ? 'has_tab_page' : '' }}">
diff --git a/src/workbench/browser/src/app/pages/api/api.component.ts b/src/workbench/browser/src/app/pages/api/api.component.ts
index 26e04ee92..ebbd75334 100644
--- a/src/workbench/browser/src/app/pages/api/api.component.ts
+++ b/src/workbench/browser/src/app/pages/api/api.component.ts
@@ -7,10 +7,7 @@ import { Message, MessageService } from '../../shared/services/message';
 import { ApiService } from './api.service';
 import { StorageService } from '../../shared/services/storage';
 import { Change } from '../../shared/store/env.state';
-import { NzModalRef } from 'ng-zorro-antd/modal';
-import { ModalService } from '../../shared/services/modal.service';
 import { RemoteService } from 'eo/workbench/browser/src/app/shared/services/remote/remote.service';
-import { EnvListComponent } from 'eo/workbench/browser/src/app/shared/components/env-list/env-list.component';
 
 @Component({
   selector: 'eo-api',
@@ -50,7 +47,6 @@ export class ApiComponent implements OnInit, OnDestroy {
     private messageService: MessageService,
     private storage: StorageService,
     private remoteService: RemoteService,
-    private modalService: ModalService,
     private store: Store
   ) {}
 
@@ -168,14 +164,5 @@ export class ApiComponent implements OnInit, OnDestroy {
       }
     });
   }
-
-  handleShowEnv() {
-    const modal: NzModalRef = this.modalService.create({
-      nzTitle: 'Environment',
-      nzContent: EnvListComponent,
-      nzClosable: true,
-      nzFooter: null,
-    });
-  }
   handleEnvSelectStatus(event: boolean) {}
 }
diff --git a/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts b/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts
index f93672cec..02c64b202 100644
--- a/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts
+++ b/src/workbench/browser/src/app/shared/components/env-list/env-list.component.ts
@@ -4,13 +4,15 @@ import { StorageRes, StorageResStatus } from '../../../shared/services/storage/i
 import { StorageService } from '../../services/storage';
 
 @Component({
-  selector: '',
-  template: ` <span class="text-gray-400">Environment variable</span>
+  selector: 'env-list',
+  template: ` <nz-card style="width:300px">
+    <span class="text-gray-400">Environment variable</span>
     <!-- <span class="my-2">{{ item.name }}</span> -->
     <div *ngFor="let it of envParams" class="flex items-center justify-between h-8">
       <span class="w-1/3 text-gray-500">{{ it.name }}</span>
       <span class="w-2/3 text-gray-500">{{ it.description }}</span>
-    </div>`,
+    </div>
+  </nz-card>`,
   styleUrls: [],
 })
 export class EnvListComponent implements OnInit {
diff --git a/src/workbench/browser/src/app/shared/shared.module.ts b/src/workbench/browser/src/app/shared/shared.module.ts
index 7ca3f25fc..b4f4f9185 100644
--- a/src/workbench/browser/src/app/shared/shared.module.ts
+++ b/src/workbench/browser/src/app/shared/shared.module.ts
@@ -13,6 +13,7 @@ import { NzResultModule } from 'ng-zorro-antd/result';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzCardModule } from 'ng-zorro-antd/card';
 
 import { NzNotificationModule } from 'ng-zorro-antd/notification';
 import { NzMessageModule } from 'ng-zorro-antd/message';
@@ -48,6 +49,7 @@ const COMPONENTS = [
     NzResultModule,
     NzDropDownModule,
     NzSpinModule,
+    NzCardModule,
     NzNotificationModule,
     NzMessageModule,
     NzDescriptionsModule,
@@ -57,6 +59,6 @@ const COMPONENTS = [
   ],
   declarations: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, PageBlankComponent, EnvListComponent],
   providers: [ModalService],
-  exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, EoIconparkIconModule],
+  exports: [WebviewDirective, ...COMPONENTS, ApiParamsNumPipe, EoIconparkIconModule, EnvListComponent],
 })
 export class SharedModule {}