diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 6006fb22ad4..21928b77039 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -194,11 +194,79 @@ import { UserComputingUnitListItemComponent } from "./dashboard/component/user/u
 registerLocaleData(en);
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    JwtModule.forRoot({
+      config: {
+        tokenGetter: AuthService.getAccessToken,
+        skipWhenExpired: false,
+        throwNoTokenError: false,
+        disallowedRoutes: ["forum/api/users"],
+      },
+    }),
+    BrowserAnimationsModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    FormlyModule.forRoot(TEXERA_FORMLY_CONFIG),
+    FormlyNgZorroAntdModule,
+    OverlayModule,
+    NzDatePickerModule,
+    NzDropDownModule,
+    NzButtonModule,
+    NzAutocompleteModule,
+    NzIconModule,
+    NzFormModule,
+    NzListModule,
+    NzInputModule,
+    NzPopoverModule,
+    NzCollapseModule,
+    NzTooltipModule,
+    NzTableModule,
+    NzSelectModule,
+    NzSpaceModule,
+    NzBadgeModule,
+    NzUploadModule,
+    NgxJsonViewerModule,
+    NzModalModule,
+    NzDescriptionsModule,
+    NzCardModule,
+    NzTagModule,
+    NzPopconfirmModule,
+    NzAvatarModule,
+    NzTabsModule,
+    NzPaginationModule,
+    NzCommentModule,
+    ColorPickerModule,
+    NzSwitchModule,
+    NzRadioModule,
+    NzLayoutModule,
+    NzSliderModule,
+    MarkdownModule.forRoot(),
+    DragDropModule,
+    NzAlertModule,
+    NzResizableModule,
+    NzSpinModule,
+    NgxFileDropModule,
+    NzTreeModule,
+    NzTreeViewModule,
+    NzNoAnimationModule,
+    TreeModule,
+    SocialLoginModule,
+    GoogleSigninButtonModule,
+    NzEmptyModule,
+    NzDividerModule,
+    NzProgressModule,
+    NzInputNumberModule,
+    NzCheckboxModule,
+    NzGridModule,
+    ScrollingModule,
     FormlyRepeatDndComponent,
     AdminGmailComponent,
     PublicProjectComponent,
-    AppComponent,
     WorkspaceComponent,
     MenuComponent,
     OperatorMenuComponent,
@@ -291,76 +359,6 @@ registerLocaleData(en);
     UserComputingUnitComponent,
     UserComputingUnitListItemComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    HttpClientModule,
-    JwtModule.forRoot({
-      config: {
-        tokenGetter: AuthService.getAccessToken,
-        skipWhenExpired: false,
-        throwNoTokenError: false,
-        disallowedRoutes: ["forum/api/users"],
-      },
-    }),
-    BrowserAnimationsModule,
-    RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
-    FormlyModule.forRoot(TEXERA_FORMLY_CONFIG),
-    FormlyNgZorroAntdModule,
-    OverlayModule,
-    NzDatePickerModule,
-    NzDropDownModule,
-    NzButtonModule,
-    NzAutocompleteModule,
-    NzIconModule,
-    NzFormModule,
-    NzListModule,
-    NzInputModule,
-    NzPopoverModule,
-    NzCollapseModule,
-    NzTooltipModule,
-    NzTableModule,
-    NzSelectModule,
-    NzSpaceModule,
-    NzBadgeModule,
-    NzUploadModule,
-    NgxJsonViewerModule,
-    NzModalModule,
-    NzDescriptionsModule,
-    NzCardModule,
-    NzTagModule,
-    NzPopconfirmModule,
-    NzAvatarModule,
-    NzTabsModule,
-    NzPaginationModule,
-    NzCommentModule,
-    ColorPickerModule,
-    NzSwitchModule,
-    NzRadioModule,
-    NzLayoutModule,
-    NzSliderModule,
-    MarkdownModule.forRoot(),
-    DragDropModule,
-    NzAlertModule,
-    NzResizableModule,
-    NzSpinModule,
-    NgxFileDropModule,
-    NzTreeModule,
-    NzTreeViewModule,
-    NzNoAnimationModule,
-    TreeModule,
-    SocialLoginModule,
-    GoogleSigninButtonModule,
-    NzEmptyModule,
-    NzDividerModule,
-    NzProgressModule,
-    NzInputNumberModule,
-    NzCheckboxModule,
-    NzGridModule,
-    ScrollingModule,
-  ],
   providers: [
     provideNzI18n(en_US),
     AuthGuardService,
diff --git a/frontend/src/app/common/formly/array.type.ts b/frontend/src/app/common/formly/array.type.ts
index 8c16e1a5211..35a7f03327b 100644
--- a/frontend/src/app/common/formly/array.type.ts
+++ b/frontend/src/app/common/formly/array.type.ts
@@ -8,7 +8,13 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldArrayType } from "@ngx-formly/core";
+import { FieldArrayType, FormlyModule } from "@ngx-formly/core";
+import { NgFor } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 @Component({
   template: `
@@ -47,6 +53,14 @@ import { FieldArrayType } from "@ngx-formly/core";
         nzType="plus"></span>
     </button>
   `,
-  standalone: false,
+  imports: [
+    NgFor,
+    FormlyModule,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+  ],
 })
 export class ArrayTypeComponent extends FieldArrayType {}
diff --git a/frontend/src/app/common/formly/collab-wrapper/collab-wrapper/collab-wrapper.component.ts b/frontend/src/app/common/formly/collab-wrapper/collab-wrapper/collab-wrapper.component.ts
index 323a27c117a..5c372892163 100644
--- a/frontend/src/app/common/formly/collab-wrapper/collab-wrapper/collab-wrapper.component.ts
+++ b/frontend/src/app/common/formly/collab-wrapper/collab-wrapper/collab-wrapper.component.ts
@@ -26,6 +26,7 @@ import * as Y from "yjs";
 import { QuillBinding } from "y-quill";
 import QuillCursors from "quill-cursors";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NgStyle } from "@angular/common";
 
 // Quill related definitions
 export const COLLAB_DEBOUNCE_TIME_MS = 10;
@@ -66,7 +67,7 @@ Quill.register("modules/cursors", QuillCursors);
 @Component({
   templateUrl: "./collab-wrapper.component.html",
   styleUrls: ["./collab-wrapper.component.css"],
-  standalone: false,
+  imports: [NgStyle],
 })
 export class CollabWrapperComponent extends FieldWrapper<FieldTypeConfig> implements AfterContentInit {
   private quill?: Quill;
diff --git a/frontend/src/app/common/formly/multischema.type.ts b/frontend/src/app/common/formly/multischema.type.ts
index 3c54a7da8a7..1a27241378a 100644
--- a/frontend/src/app/common/formly/multischema.type.ts
+++ b/frontend/src/app/common/formly/multischema.type.ts
@@ -8,7 +8,8 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldType } from "@ngx-formly/core";
+import { FieldType, FormlyModule } from "@ngx-formly/core";
+import { NgIf, NgFor } from "@angular/common";
 
 @Component({
   // selector: 'formly-multi-schema-type',
@@ -29,6 +30,6 @@ import { FieldType } from "@ngx-formly/core";
       </div>
     </div>
   `,
-  standalone: false,
+  imports: [NgIf, FormlyModule, NgFor],
 })
 export class MultiSchemaTypeComponent extends FieldType {}
diff --git a/frontend/src/app/common/formly/null.type.ts b/frontend/src/app/common/formly/null.type.ts
index a2857f5c829..ad32291e631 100644
--- a/frontend/src/app/common/formly/null.type.ts
+++ b/frontend/src/app/common/formly/null.type.ts
@@ -13,6 +13,5 @@ import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
 @Component({
   // selector: 'formly-null-type',
   template: "",
-  standalone: false,
 })
 export class NullTypeComponent extends FieldType<FieldTypeConfig> {}
diff --git a/frontend/src/app/common/formly/object.type.ts b/frontend/src/app/common/formly/object.type.ts
index c3d31bedd4c..a6f3d5bc3e3 100644
--- a/frontend/src/app/common/formly/object.type.ts
+++ b/frontend/src/app/common/formly/object.type.ts
@@ -8,7 +8,8 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
+import { FieldType, FieldTypeConfig, FormlyModule } from "@ngx-formly/core";
+import { NgIf, NgFor } from "@angular/common";
 
 @Component({
   // selector: 'formly-object-type',
@@ -27,7 +28,7 @@ import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
         [field]="f"></formly-field>
     </div>
   `,
-  standalone: false,
+  imports: [NgIf, FormlyModule, NgFor],
 })
 export class ObjectTypeComponent extends FieldType<FieldTypeConfig> {
   defaultOptions = {
diff --git a/frontend/src/app/common/formly/preset-wrapper/preset-wrapper.component.ts b/frontend/src/app/common/formly/preset-wrapper/preset-wrapper.component.ts
index 0aaa50de145..82887b22ae4 100644
--- a/frontend/src/app/common/formly/preset-wrapper/preset-wrapper.component.ts
+++ b/frontend/src/app/common/formly/preset-wrapper/preset-wrapper.component.ts
@@ -25,6 +25,14 @@ import { debounceTime, filter, first, takeUntil } from "rxjs/operators";
 import { Preset, PresetService } from "src/app/workspace/service/preset/preset.service";
 import { asType } from "../../util/assert";
 import { NzMessageService } from "ng-zorro-antd/message";
+import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NgFor } from "@angular/common";
 
 /**
  * PresetWrapperComponent is a custom formly form field wrapper: https://formly.dev/guide/custom-formly-wrapper
@@ -52,7 +60,18 @@ export interface PresetKey {
 @Component({
   templateUrl: "./preset-wrapper.component.html",
   styleUrls: ["./preset-wrapper.component.scss"],
-  standalone: false,
+  imports: [
+    NzDropdownDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NgFor,
+    NzMenuItemComponent,
+  ],
 })
 export class PresetWrapperComponent extends FieldWrapper implements OnInit, OnDestroy {
   public searchResults: Preset[] = []; // the list of presets shown in the dropdown
diff --git a/frontend/src/app/common/formly/repeat-dnd/repeat-dnd.component.ts b/frontend/src/app/common/formly/repeat-dnd/repeat-dnd.component.ts
index 4212618ac0d..bd4782d8fd8 100644
--- a/frontend/src/app/common/formly/repeat-dnd/repeat-dnd.component.ts
+++ b/frontend/src/app/common/formly/repeat-dnd/repeat-dnd.component.ts
@@ -18,14 +18,31 @@
  */
 
 import { Component } from "@angular/core";
-import { FieldArrayType } from "@ngx-formly/core";
-import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
+import { FieldArrayType, FormlyModule } from "@ngx-formly/core";
+import { CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
+import { NgFor } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 
 @Component({
   selector: "texera-formly-repeat-section-dnd",
   templateUrl: "./repeat-dnd.component.html",
   styleUrls: ["./repeat-dnd.component.css"],
-  standalone: false,
+  imports: [
+    CdkDropList,
+    NgFor,
+    CdkDrag,
+    CdkDragHandle,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    FormlyModule,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+  ],
 })
 export class FormlyRepeatDndComponent extends FieldArrayType {
   onDrop(event: CdkDragDrop<string[]>) {
diff --git a/frontend/src/app/common/service/user/registration-request-modal/registration-request-modal.component.ts b/frontend/src/app/common/service/user/registration-request-modal/registration-request-modal.component.ts
index 8e5a36f5934..f68042fd825 100644
--- a/frontend/src/app/common/service/user/registration-request-modal/registration-request-modal.component.ts
+++ b/frontend/src/app/common/service/user/registration-request-modal/registration-request-modal.component.ts
@@ -19,12 +19,15 @@
 
 import { Component, Inject, Input, TemplateRef, ViewChild } from "@angular/core";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
 
 @Component({
   selector: "texera-registration-request-modal",
   templateUrl: "./registration-request-modal.component.html",
   styleUrls: ["./registration-request-modal.component.scss"],
-  standalone: false,
+  imports: [NzSpaceCompactItemDirective, NzInputDirective, FormsModule],
 })
 
 // Component for registration form modal
diff --git a/frontend/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/frontend/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 33c5443efc3..2bf2f9773e7 100644
--- a/frontend/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/frontend/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -21,11 +21,30 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AdminExecutionService } from "../../../service/admin/execution/admin-execution.service";
 import { Execution } from "../../../../common/type/execution";
-import { NzTableFilterFn, NzTableQueryParams } from "ng-zorro-antd/table";
+import {
+  NzTableFilterFn,
+  NzTableQueryParams,
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzThAddOnComponent,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowExecutionHistoryComponent } from "../../user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
 import { GuiConfigService } from "../../../../common/service/gui-config.service";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NgFor, NgIf, NgStyle } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
 
 export const NO_SORT = "NO_SORTING";
 
@@ -33,7 +52,26 @@ export const NO_SORT = "NO_SORTING";
 @Component({
   templateUrl: "./admin-execution.component.html",
   styleUrls: ["./admin-execution.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzThAddOnComponent,
+    NzTbodyComponent,
+    NgFor,
+    NgIf,
+    NgStyle,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzSpinComponent,
+  ],
 })
 export class AdminExecutionComponent implements OnInit, OnDestroy {
   listOfExecutions: ReadonlyArray<Execution> = [];
diff --git a/frontend/src/app/dashboard/component/admin/gmail/admin-gmail.component.ts b/frontend/src/app/dashboard/component/admin/gmail/admin-gmail.component.ts
index 9816db4878c..17713489272 100644
--- a/frontend/src/app/dashboard/component/admin/gmail/admin-gmail.component.ts
+++ b/frontend/src/app/dashboard/component/admin/gmail/admin-gmail.component.ts
@@ -19,15 +19,38 @@
 
 import { Component, OnInit } from "@angular/core";
 import { GmailService } from "../../../../common/service/gmail/gmail.service";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzFormControlComponent } from "ng-zorro-antd/form";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   selector: "texera-gmail",
   templateUrl: "./admin-gmail.component.html",
   styleUrls: ["./admin-gmail.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    FormsModule,
+    NzFormDirective,
+    ReactiveFormsModule,
+    NzRowDirective,
+    NzFormItemComponent,
+    NzColDirective,
+    NzFormLabelComponent,
+    NzFormControlComponent,
+    NzSpaceCompactItemDirective,
+    NzInputDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+  ],
 })
 export class AdminGmailComponent implements OnInit {
   public validateForm!: FormGroup;
diff --git a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts
index a8a8abf5dd0..2fbba318fbe 100644
--- a/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts
+++ b/frontend/src/app/dashboard/component/admin/settings/admin-settings.component.ts
@@ -23,13 +23,37 @@ import { NzMessageService } from "ng-zorro-antd/message";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { SidebarTabs } from "../../../../common/type/gui-config";
 import { forkJoin } from "rxjs";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NgIf, DecimalPipe } from "@angular/common";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
+import { FormsModule } from "@angular/forms";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzInputNumberComponent } from "ng-zorro-antd/input-number";
 
 @UntilDestroy()
 @Component({
   selector: "texera-settings",
   templateUrl: "./admin-settings.component.html",
   styleUrls: ["./admin-settings.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NgIf,
+    NzIconDirective,
+    NzSwitchComponent,
+    FormsModule,
+    NzTooltipDirective,
+    NzInputNumberComponent,
+    DecimalPipe,
+  ],
 })
 export class AdminSettingsComponent implements OnInit {
   logoData: string | null = null;
diff --git a/frontend/src/app/dashboard/component/admin/user/admin-user.component.html b/frontend/src/app/dashboard/component/admin/user/admin-user.component.html
index a5ec56fb005..f39ad7b20a4 100644
--- a/frontend/src/app/dashboard/component/admin/user/admin-user.component.html
+++ b/frontend/src/app/dashboard/component/admin/user/admin-user.component.html
@@ -270,7 +270,7 @@
           [nzShowArrow]="false"
           class="extra-width"
           ngModel="{{user.role}}"
-          nzBorderless>
+          nzVariant="borderless">
           <nz-option
             nzCustomContent
             nzLabel="0"
diff --git a/frontend/src/app/dashboard/component/admin/user/admin-user.component.ts b/frontend/src/app/dashboard/component/admin/user/admin-user.component.ts
index 60a2a07fef2..090032da2a5 100644
--- a/frontend/src/app/dashboard/component/admin/user/admin-user.component.ts
+++ b/frontend/src/app/dashboard/component/admin/user/admin-user.component.ts
@@ -19,7 +19,18 @@
 
 import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { NzTableFilterFn, NzTableSortFn } from "ng-zorro-antd/table";
+import {
+  NzTableFilterFn,
+  NzTableSortFn,
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzThAddOnComponent,
+  NzFilterTriggerComponent,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { NzMessageService } from "ng-zorro-antd/message";
 import { AdminUserService } from "../../../service/admin/user/admin-user.service";
@@ -28,12 +39,51 @@ import { UserService } from "../../../../common/service/user/user.service";
 import { UserQuotaComponent } from "../../user/user-quota/user-quota.component";
 import { GuiConfigService } from "../../../../common/service/gui-config.service";
 import { replaceOneImmutable } from "../../../../common/util/array-utils";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NgFor, NgClass, NgIf, DatePipe } from "@angular/common";
+import { UserAvatarComponent } from "../../user/user-avatar/user-avatar.component";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
 
 @UntilDestroy()
 @Component({
   templateUrl: "./admin-user.component.html",
   styleUrls: ["./admin-user.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzThAddOnComponent,
+    NzFilterTriggerComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzSpaceCompactItemDirective,
+    NzInputDirective,
+    FormsModule,
+    NzButtonComponent,
+    NzWaveDirective,
+    NzTbodyComponent,
+    NgFor,
+    UserAvatarComponent,
+    NgClass,
+    NgIf,
+    NzSelectComponent,
+    NzOptionComponent,
+    NzTooltipDirective,
+    DatePipe,
+  ],
 })
 export class AdminUserComponent implements OnInit {
   userList: ReadonlyArray<User> = [];
diff --git a/frontend/src/app/dashboard/component/dashboard.component.ts b/frontend/src/app/dashboard/component/dashboard.component.ts
index 97b84b2e5b1..5761ce3a8a6 100644
--- a/frontend/src/app/dashboard/component/dashboard.component.ts
+++ b/frontend/src/app/dashboard/component/dashboard.component.ts
@@ -22,9 +22,9 @@ import { UserService } from "../../common/service/user/user.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { FlarumService } from "../service/user/flarum/flarum.service";
 import { HttpErrorResponse } from "@angular/common/http";
-import { ActivatedRoute, NavigationEnd, Router } from "@angular/router";
+import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterOutlet } from "@angular/router";
 import { HubComponent } from "../../hub/component/hub.component";
-import { SocialAuthService } from "@abacritt/angularx-social-login";
+import { SocialAuthService, GoogleSigninButtonModule } from "@abacritt/angularx-social-login";
 import { AdminSettingsService } from "../service/admin/settings/admin-settings.service";
 import { GuiConfigService } from "../../common/service/gui-config.service";
 
@@ -45,12 +45,37 @@ import { Version } from "../../../environments/version";
 import { SidebarTabs } from "../../common/type/gui-config";
 import { User } from "../../common/type/user";
 import { Role } from "../../common/type/user";
+import { NzLayoutComponent, NzSiderComponent, NzContentComponent } from "ng-zorro-antd/layout";
+import { NzMenuDirective, NzSubMenuComponent, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NgIf } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { SearchBarComponent } from "./user/search-bar/search-bar.component";
+import { UserIconComponent } from "./user/user-icon/user-icon.component";
 
 @Component({
   selector: "texera-dashboard",
   templateUrl: "dashboard.component.html",
   styleUrls: ["dashboard.component.scss"],
-  standalone: false,
+  imports: [
+    NzLayoutComponent,
+    NzSiderComponent,
+    NzMenuDirective,
+    NgIf,
+    NzSubMenuComponent,
+    ɵNzTransitionPatchDirective,
+    HubComponent,
+    NzMenuItemComponent,
+    NzTooltipDirective,
+    RouterLink,
+    NzIconDirective,
+    SearchBarComponent,
+    UserIconComponent,
+    GoogleSigninButtonModule,
+    NzContentComponent,
+    RouterOutlet,
+  ],
 })
 @UntilDestroy()
 export class DashboardComponent implements OnInit {
diff --git a/frontend/src/app/dashboard/component/user/files-uploader/conflicting-file-modal-content/conflicting-file-modal-content.component.ts b/frontend/src/app/dashboard/component/user/files-uploader/conflicting-file-modal-content/conflicting-file-modal-content.component.ts
index 95c754055f3..b418929120e 100644
--- a/frontend/src/app/dashboard/component/user/files-uploader/conflicting-file-modal-content/conflicting-file-modal-content.component.ts
+++ b/frontend/src/app/dashboard/component/user/files-uploader/conflicting-file-modal-content/conflicting-file-modal-content.component.ts
@@ -31,7 +31,6 @@ export interface ConflictingFileModalData {
   templateUrl: "./conflicting-file-modal-content.component.html",
   styleUrls: ["./conflicting-file-modal-content.component.scss"],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: false,
 })
 export class ConflictingFileModalContentComponent {
   readonly data: ConflictingFileModalData = inject(NZ_MODAL_DATA);
diff --git a/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.ts b/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.ts
index 69102de97a9..6967d46b61a 100644
--- a/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.ts
+++ b/frontend/src/app/dashboard/component/user/files-uploader/files-uploader.component.ts
@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import { Component, EventEmitter, Host, Input, Optional, Output } from "@angular/core";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { firstValueFrom } from "rxjs";
-import { NgxFileDropEntry } from "ngx-file-drop";
+import { NgxFileDropEntry, NgxFileDropModule } from "ngx-file-drop";
 import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
 import { FileUploadItem } from "../../../type/dashboard-file.interface";
 import { DatasetFileNode } from "../../../../common/type/datasetVersionFileTree";
@@ -27,22 +27,44 @@ import { NotificationService } from "../../../../common/service/notification/not
 import { AdminSettingsService } from "../../../service/admin/settings/admin-settings.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { DatasetService } from "../../../service/user/dataset/dataset.service";
-import { DatasetDetailComponent } from "../user-dataset/user-dataset-explorer/dataset-detail.component";
 import { formatSize } from "../../../../common/util/size-formatter.util";
 import {
   ConflictingFileModalContentComponent,
   ConflictingFileModalData,
 } from "./conflicting-file-modal-content/conflicting-file-modal-content.component";
+import { NgIf } from "@angular/common";
+import { NzAlertComponent } from "ng-zorro-antd/alert";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-files-uploader",
   templateUrl: "./files-uploader.component.html",
   styleUrls: ["./files-uploader.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzAlertComponent,
+    NgxFileDropModule,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+  ],
 })
 export class FilesUploaderComponent {
   @Input() showUploadAlert: boolean = false;
+  /**
+   * Optional context fields supplied by the embedding component. When the
+   * uploader is used inside `DatasetDetailComponent`, the parent passes
+   * `ownerEmail` and `datasetName` so the uploader can address staged files
+   * under the right owner/dataset path. When used standalone (e.g. dataset
+   * creation flow), they default to empty.
+   */
+  @Input() ownerEmail: string = "";
+  @Input() datasetName: string = "";
 
   @Output() uploadedFiles = new EventEmitter<FileUploadItem[]>();
 
@@ -57,7 +79,6 @@ export class FilesUploaderComponent {
     private notificationService: NotificationService,
     private adminSettingsService: AdminSettingsService,
     private datasetService: DatasetService,
-    @Optional() @Host() private parent: DatasetDetailComponent,
     private modal: NzModalService
   ) {
     this.adminSettingsService
@@ -192,8 +213,8 @@ export class FilesUploaderComponent {
 
   private getOwnerAndName(): { ownerEmail: string; datasetName: string } {
     return {
-      ownerEmail: this.parent?.ownerEmail ?? "",
-      datasetName: this.parent?.datasetName ?? "",
+      ownerEmail: this.ownerEmail,
+      datasetName: this.datasetName,
     };
   }
 
diff --git a/frontend/src/app/dashboard/component/user/filters-instructions/filters-instructions.component.ts b/frontend/src/app/dashboard/component/user/filters-instructions/filters-instructions.component.ts
index 56439031765..c5ce98ecb29 100644
--- a/frontend/src/app/dashboard/component/user/filters-instructions/filters-instructions.component.ts
+++ b/frontend/src/app/dashboard/component/user/filters-instructions/filters-instructions.component.ts
@@ -18,10 +18,13 @@
  */
 
 import { Component } from "@angular/core";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzPopoverDirective } from "ng-zorro-antd/popover";
 
 @Component({
   selector: "texera-filters-instructions",
   templateUrl: "./filters-instructions.component.html",
-  standalone: false,
+  imports: [ɵNzTransitionPatchDirective, NzIconDirective, NzPopoverDirective],
 })
 export class FiltersInstructionsComponent {}
diff --git a/frontend/src/app/dashboard/component/user/filters/filters.component.html b/frontend/src/app/dashboard/component/user/filters/filters.component.html
index 9132f082d90..01d89c8282f 100644
--- a/frontend/src/app/dashboard/component/user/filters/filters.component.html
+++ b/frontend/src/app/dashboard/component/user/filters/filters.component.html
@@ -17,7 +17,7 @@
  under the License.
 -->
 
-<nz-button-group
+<nz-space-compact
   class="filter-button-group"
   ngbDropdown>
   <a
@@ -211,4 +211,4 @@
       </li>
     </ul>
   </nz-dropdown-menu>
-</nz-button-group>
+</nz-space-compact>
diff --git a/frontend/src/app/dashboard/component/user/filters/filters.component.ts b/frontend/src/app/dashboard/component/user/filters/filters.component.ts
index d2233545225..85da98d0e05 100644
--- a/frontend/src/app/dashboard/component/user/filters/filters.component.ts
+++ b/frontend/src/app/dashboard/component/user/filters/filters.component.ts
@@ -28,13 +28,43 @@ import { WorkflowPersistService } from "src/app/common/service/workflow-persist/
 import { SearchFilterParameters } from "../../../type/search-filter-parameters";
 import { UserService } from "../../../../common/service/user/user.service";
 import { switchMap } from "rxjs/operators";
+import { NzDropdownADirective, NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzSpaceCompactItemDirective, NzSpaceCompactComponent } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzDatePickerComponent, NzRangePickerComponent } from "ng-zorro-antd/date-picker";
+import { FormsModule } from "@angular/forms";
+import { NgFor, NgIf } from "@angular/common";
+import { NzMenuDirective, NzMenuItemComponent, NzSubMenuComponent } from "ng-zorro-antd/menu";
+import { NzCheckboxComponent } from "ng-zorro-antd/checkbox";
 
 @UntilDestroy()
 @Component({
   selector: "texera-filters",
   templateUrl: "./filters.component.html",
   styleUrls: ["./filters.component.scss"],
-  standalone: false,
+  imports: [
+    NzDropdownADirective,
+    NzDropdownDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzDatePickerComponent,
+    NzRangePickerComponent,
+    FormsModule,
+    NgFor,
+    NzMenuDirective,
+    NzMenuItemComponent,
+    NzCheckboxComponent,
+    NgIf,
+    NzSubMenuComponent,
+    NzSpaceCompactComponent,
+  ],
 })
 export class FiltersComponent implements OnInit {
   public isLogin = this.userService.isLogin();
diff --git a/frontend/src/app/dashboard/component/user/flarum/flarum.component.ts b/frontend/src/app/dashboard/component/user/flarum/flarum.component.ts
index 6174be23ac8..355ee64087b 100644
--- a/frontend/src/app/dashboard/component/user/flarum/flarum.component.ts
+++ b/frontend/src/app/dashboard/component/user/flarum/flarum.component.ts
@@ -20,10 +20,7 @@
 import { Component } from "@angular/core";
 import { DomSanitizer, SafeResourceUrl } from "@angular/platform-browser";
 
-@Component({
-  templateUrl: "./flarum.component.html",
-  standalone: false,
-})
+@Component({ templateUrl: "./flarum.component.html" })
 export class FlarumComponent {
   flarumUrl: SafeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl("forum");
   constructor(private sanitizer: DomSanitizer) {}
diff --git a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts
index 83bf1e88116..0da2661f492 100644
--- a/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/list-item/list-item.component.ts
@@ -52,13 +52,40 @@ import {
   DASHBOARD_USER_WORKSPACE,
 } from "../../../../app-routing.constant";
 import { isDefined } from "../../../../common/util/predicate";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { RouterLink } from "@angular/router";
+import { NgIf, NgClass } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { FormsModule } from "@angular/forms";
+import { UserAvatarComponent } from "../user-avatar/user-avatar.component";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
 
 @UntilDestroy()
 @Component({
   selector: "texera-list-item",
   templateUrl: "./list-item.component.html",
   styleUrls: ["./list-item.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzRowDirective,
+    RouterLink,
+    NzColDirective,
+    NgIf,
+    NgClass,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    FormsModule,
+    UserAvatarComponent,
+    NzWaveDirective,
+    NzPopconfirmDirective,
+  ],
 })
 export class ListItemComponent implements OnChanges {
   private owners: number[] = [];
diff --git a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts
index 27fc8ae1d7a..0697de914c7 100644
--- a/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts
+++ b/frontend/src/app/dashboard/component/user/markdown-description/markdown-description.component.ts
@@ -33,6 +33,15 @@ import {
 } from "@angular/core";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
 import { MarkdownService } from "ngx-markdown";
+import { NgIf, NgFor } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 
 const COLLAPSED_HEIGHT_PX = 320;
 
@@ -62,7 +71,18 @@ const TOOLBAR = [
   selector: "texera-markdown-description",
   templateUrl: "./markdown-description.component.html",
   styleUrls: ["./markdown-description.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NgFor,
+    NzTooltipDirective,
+    NzInputDirective,
+    FormsModule,
+    NzWaveDirective,
+  ],
 })
 export class MarkdownDescriptionComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
   private modalData = inject(NZ_MODAL_DATA, { optional: true });
diff --git a/frontend/src/app/dashboard/component/user/search-bar/search-bar.component.ts b/frontend/src/app/dashboard/component/user/search-bar/search-bar.component.ts
index 765c4b51b13..ae6a6c1df59 100644
--- a/frontend/src/app/dashboard/component/user/search-bar/search-bar.component.ts
+++ b/frontend/src/app/dashboard/component/user/search-bar/search-bar.component.ts
@@ -29,13 +29,26 @@ import { Observable, of, Subject } from "rxjs";
 import { debounceTime, switchMap } from "rxjs/operators";
 import { UserService } from "../../../../common/service/user/user.service";
 import { DASHBOARD_SEARCH } from "../../../../app-routing.constant";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputGroupComponent, NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzAutocompleteTriggerDirective, NzAutocompleteComponent } from "ng-zorro-antd/auto-complete";
 
 @UntilDestroy()
 @Component({
   selector: "texera-search-bar",
   templateUrl: "./search-bar.component.html",
   styleUrls: ["./search-bar.component.scss"],
-  standalone: false,
+  imports: [
+    ɵNzTransitionPatchDirective,
+    NzSpaceCompactItemDirective,
+    NzInputGroupComponent,
+    NzInputDirective,
+    FormsModule,
+    NzAutocompleteTriggerDirective,
+    NzAutocompleteComponent,
+  ],
 })
 export class SearchBarComponent {
   private includePublic = true;
diff --git a/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts b/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts
index ed9c4c6d64f..601a6534a53 100644
--- a/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts
+++ b/frontend/src/app/dashboard/component/user/search-results/search-results.component.ts
@@ -20,6 +20,15 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { DashboardEntry } from "../../../type/dashboard-entry";
 import { UserService } from "../../../../common/service/user/user.service";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { ɵɵCdkVirtualScrollViewport, ɵɵCdkFixedSizeVirtualScroll } from "@angular/cdk/overlay";
+import { NzListComponent } from "ng-zorro-antd/list";
+import { NgFor, NgIf } from "@angular/common";
+import { ListItemComponent } from "../list-item/list-item.component";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 export type LoadMoreFunction = (start: number, count: number) => Promise<{ entries: DashboardEntry[]; more: boolean }>;
 
@@ -27,7 +36,19 @@ export type LoadMoreFunction = (start: number, count: number) => Promise<{ entri
   selector: "texera-search-results",
   templateUrl: "./search-results.component.html",
   styleUrls: ["./search-results.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    ɵɵCdkVirtualScrollViewport,
+    ɵɵCdkFixedSizeVirtualScroll,
+    NzListComponent,
+    NgFor,
+    ListItemComponent,
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+  ],
 })
 export class SearchResultsComponent {
   loadMoreFunction: LoadMoreFunction | null = null;
diff --git a/frontend/src/app/dashboard/component/user/search/search.component.ts b/frontend/src/app/dashboard/component/user/search/search.component.ts
index ee2203bc238..bcb0c38293b 100644
--- a/frontend/src/app/dashboard/component/user/search/search.component.ts
+++ b/frontend/src/app/dashboard/component/user/search/search.component.ts
@@ -23,18 +23,34 @@ import { FiltersComponent } from "../filters/filters.component";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { SearchResultsComponent } from "../search-results/search-results.component";
 import { SortMethod } from "../../../type/sort-method";
-import { Location } from "@angular/common";
+import { Location, NgClass } from "@angular/common";
 import { ActivatedRoute } from "@angular/router";
 import { UserService } from "../../../../common/service/user/user.service";
 import { firstValueFrom } from "rxjs";
 import { map } from "rxjs/operators";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { SortButtonComponent } from "../sort-button/sort-button.component";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 
 @UntilDestroy()
 @Component({
   selector: "texera-search",
   templateUrl: "./search.component.html",
   styleUrls: ["./search.component.scss"],
-  standalone: false,
+  imports: [
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    SortButtonComponent,
+    NzWaveDirective,
+    NgClass,
+    FiltersComponent,
+    SearchResultsComponent,
+  ],
 })
 export class SearchComponent implements AfterViewInit {
   public searchParam: string = "";
diff --git a/frontend/src/app/dashboard/component/user/share-access/share-access.component.ts b/frontend/src/app/dashboard/component/user/share-access/share-access.component.ts
index 01f650eb9c5..576e104aede 100644
--- a/frontend/src/app/dashboard/component/user/share-access/share-access.component.ts
+++ b/frontend/src/app/dashboard/component/user/share-access/share-access.component.ts
@@ -18,7 +18,7 @@
  */
 
 import { Component, EventEmitter, inject, OnDestroy, OnInit, Output } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { ShareAccessService } from "../../../service/user/share-access/share-access.service";
 import { Privilege, ShareAccess } from "../../../type/share-access.interface";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
@@ -31,13 +31,47 @@ import { NzMessageService } from "ng-zorro-antd/message";
 import { DatasetService } from "../../../service/user/dataset/dataset.service";
 import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
 import { WorkflowActionService } from "src/app/workspace/service/workflow-graph/model/workflow-action.service";
+import { NgIf, NgFor } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { NzFormItemComponent, NzFormLabelComponent, NzFormControlComponent } from "ng-zorro-antd/form";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { NzAutocompleteTriggerDirective, NzAutocompleteComponent } from "ng-zorro-antd/auto-complete";
+import { NzTagComponent } from "ng-zorro-antd/tag";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
 
 @UntilDestroy()
 @Component({
   selector: "texera-share-access",
   templateUrl: "share-access.component.html",
   styleUrls: ["./share-access.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    FormsModule,
+    ReactiveFormsModule,
+    NzCardComponent,
+    NzRowDirective,
+    NzFormItemComponent,
+    NzColDirective,
+    NzFormLabelComponent,
+    NzFormControlComponent,
+    NzInputDirective,
+    NzAutocompleteTriggerDirective,
+    NzAutocompleteComponent,
+    NgFor,
+    NzTagComponent,
+    NzTooltipDirective,
+  ],
 })
 export class ShareAccessComponent implements OnInit, OnDestroy {
   readonly nzModalData = inject(NZ_MODAL_DATA);
diff --git a/frontend/src/app/dashboard/component/user/sort-button/sort-button.component.ts b/frontend/src/app/dashboard/component/user/sort-button/sort-button.component.ts
index e8330f310a5..8402e55b059 100644
--- a/frontend/src/app/dashboard/component/user/sort-button/sort-button.component.ts
+++ b/frontend/src/app/dashboard/component/user/sort-button/sort-button.component.ts
@@ -19,12 +19,30 @@
 
 import { Component, EventEmitter, Output } from "@angular/core";
 import { SortMethod } from "../../../type/sort-method";
+import { NzDropdownADirective, NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
 
 @Component({
   selector: "texera-sort-button",
   templateUrl: "./sort-button.component.html",
   styleUrls: ["./sort-button.component.scss"],
-  standalone: false,
+  imports: [
+    NzDropdownADirective,
+    NzDropdownDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NzMenuItemComponent,
+  ],
 })
 export class SortButtonComponent {
   @Output()
diff --git a/frontend/src/app/dashboard/component/user/user-avatar/user-avatar.component.ts b/frontend/src/app/dashboard/component/user/user-avatar/user-avatar.component.ts
index cc55775e9f0..9ffdf900dd4 100644
--- a/frontend/src/app/dashboard/component/user/user-avatar/user-avatar.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-avatar/user-avatar.component.ts
@@ -20,12 +20,16 @@
 import { Component, Input, OnChanges } from "@angular/core";
 import { UserService } from "../../../../common/service/user/user.service";
 import { Observable, of } from "rxjs";
+import { NgIf, AsyncPipe } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzAvatarComponent } from "ng-zorro-antd/avatar";
 
 @Component({
   selector: "texera-user-avatar",
   templateUrl: "./user-avatar.component.html",
   styleUrls: ["./user-avatar.component.scss"],
-  standalone: false,
+  imports: [NgIf, ɵNzTransitionPatchDirective, NzIconDirective, NzAvatarComponent, AsyncPipe],
 })
 
 /**
diff --git a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts
index dbf5df27083..605afd2bdaa 100644
--- a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit-list-item/user-computing-unit-list-item.component.ts
@@ -54,13 +54,40 @@ import {
 } from "../../../../../common/util/computing-unit.util";
 import { GuiConfigService } from "../../../../../common/service/gui-config.service";
 import { ComputingUnitActionsService } from "../../../../../common/service/computing-unit/computing-unit-actions/computing-unit-actions.service";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NgIf, DecimalPipe } from "@angular/common";
+import { NzBadgeComponent } from "ng-zorro-antd/badge";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { NzPopoverDirective } from "ng-zorro-antd/popover";
+import { NzProgressComponent } from "ng-zorro-antd/progress";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-computing-unit-list-item",
   templateUrl: "./user-computing-unit-list-item.component.html",
   styleUrls: ["./user-computing-unit-list-item.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzRowDirective,
+    NzColDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NgIf,
+    NzBadgeComponent,
+    NzTooltipDirective,
+    NzInputDirective,
+    NzPopoverDirective,
+    NzProgressComponent,
+    DecimalPipe,
+  ],
 })
 export class UserComputingUnitListItemComponent implements OnInit {
   private _entry?: DashboardWorkflowComputingUnit;
diff --git a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.ts b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.ts
index 66121060670..93eb761ff1c 100644
--- a/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-computing-unit/user-computing-unit.component.ts
@@ -26,7 +26,7 @@ import {
 } from "../../../../common/type/workflow-computing-unit";
 import { extractErrorMessage } from "../../../../common/util/error";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
-import { NzModalService } from "ng-zorro-antd/modal";
+import { NzModalService, NzModalComponent } from "ng-zorro-antd/modal";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { UserService } from "../../../../common/service/user/user.service";
 import { WorkflowComputingUnitManagingService } from "../../../../common/service/computing-unit/workflow-computing-unit/workflow-computing-unit-managing.service";
@@ -39,13 +39,52 @@ import {
   getJvmMemorySliderConfig,
 } from "../../../../common/util/computing-unit.util";
 import { ComputingUnitActionsService } from "../../../../common/service/computing-unit/computing-unit-actions/computing-unit-actions.service";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { ɵɵCdkVirtualScrollViewport, ɵɵCdkFixedSizeVirtualScroll, ɵɵCdkVirtualForOf } from "@angular/cdk/overlay";
+import { NzListComponent } from "ng-zorro-antd/list";
+import { UserComputingUnitListItemComponent } from "./user-computing-unit-list-item/user-computing-unit-list-item.component";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
+import { FormsModule } from "@angular/forms";
+import { NgFor, NgIf, TitleCasePipe } from "@angular/common";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzSliderComponent } from "ng-zorro-antd/slider";
+import { NzAlertComponent } from "ng-zorro-antd/alert";
 
 @UntilDestroy()
 @Component({
   selector: "texera-computing-unit-section",
   templateUrl: "user-computing-unit.component.html",
   styleUrls: ["user-computing-unit.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    ɵɵCdkVirtualScrollViewport,
+    ɵɵCdkFixedSizeVirtualScroll,
+    NzListComponent,
+    ɵɵCdkVirtualForOf,
+    UserComputingUnitListItemComponent,
+    NzModalComponent,
+    NzSelectComponent,
+    FormsModule,
+    NgFor,
+    NzOptionComponent,
+    NgIf,
+    NzInputDirective,
+    NzTooltipDirective,
+    NzSliderComponent,
+    NzAlertComponent,
+    TitleCasePipe,
+  ],
 })
 export class UserComputingUnitComponent implements OnInit {
   public entries: DashboardEntry[] = [];
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
index 41a6a0572c8..7f874764d15 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.html
@@ -310,7 +310,11 @@ <h6 style="font-weight: lighter; font-size: 0.9em">Choose a Version:</h6>
         <nz-collapse-panel
           nzActive="true"
           nzHeader="Create New Version">
-          <texera-user-files-uploader (uploadedFiles)="onNewUploadFilesChanged($event)"> </texera-user-files-uploader>
+          <texera-user-files-uploader
+            [ownerEmail]="ownerEmail"
+            [datasetName]="datasetName"
+            (uploadedFiles)="onNewUploadFilesChanged($event)">
+          </texera-user-files-uploader>
 
           <nz-collapse
             nzGhost
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
index 44722461d37..518323674f3 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/dataset-detail.component.ts
@@ -21,7 +21,7 @@ import { Component, EventEmitter, OnInit, Output } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { DatasetService, MultipartUploadProgress } from "../../../../service/user/dataset/dataset.service";
-import { NzResizeEvent } from "ng-zorro-antd/resizable";
+import { NzResizeEvent, NzResizableDirective, NzResizeHandleComponent } from "ng-zorro-antd/resizable";
 import {
   DatasetFileNode,
   getFullPathFromDatasetFileNode,
@@ -43,6 +43,30 @@ import { HttpErrorResponse, HttpStatusCode } from "@angular/common/http";
 import { Subscription } from "rxjs";
 import { formatSpeed, formatTime } from "src/app/common/util/format.util";
 import { format } from "date-fns";
+import { NgIf, NgClass, NgFor } from "@angular/common";
+import { NzCardComponent, NzCardMetaComponent } from "ng-zorro-antd/card";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzTagComponent } from "ng-zorro-antd/tag";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzPopoverDirective } from "ng-zorro-antd/popover";
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
+import { FormsModule } from "@angular/forms";
+import { MarkdownDescriptionComponent } from "../../markdown-description/markdown-description.component";
+import { NzLayoutComponent, NzContentComponent, NzSiderComponent } from "ng-zorro-antd/layout";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzEmptyComponent } from "ng-zorro-antd/empty";
+import { UserDatasetFileRendererComponent } from "./user-dataset-file-renderer/user-dataset-file-renderer.component";
+import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
+import { UserDatasetVersionFiletreeComponent } from "./user-dataset-version-filetree/user-dataset-version-filetree.component";
+import { NzDividerComponent } from "ng-zorro-antd/divider";
+import { FilesUploaderComponent } from "../../files-uploader/files-uploader.component";
+import { NzProgressComponent } from "ng-zorro-antd/progress";
+import { UserDatasetStagedObjectsListComponent } from "./user-dataset-staged-objects-list/user-dataset-staged-objects-list.component";
+import { NzInputDirective } from "ng-zorro-antd/input";
 
 export const THROTTLE_TIME_MS = 1000;
 export const ABORT_RETRY_MAX_ATTEMPTS = 10;
@@ -52,7 +76,41 @@ export const ABORT_RETRY_BACKOFF_BASE_MS = 100;
 @Component({
   templateUrl: "./dataset-detail.component.html",
   styleUrls: ["./dataset-detail.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzCardComponent,
+    NzCardMetaComponent,
+    NzTooltipDirective,
+    NzTagComponent,
+    NgClass,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzPopoverDirective,
+    NzSwitchComponent,
+    FormsModule,
+    MarkdownDescriptionComponent,
+    NzLayoutComponent,
+    NzContentComponent,
+    NzWaveDirective,
+    NzEmptyComponent,
+    UserDatasetFileRendererComponent,
+    NzSiderComponent,
+    NzResizableDirective,
+    NzResizeHandleComponent,
+    NzCollapseComponent,
+    NzCollapsePanelComponent,
+    NzSelectComponent,
+    NgFor,
+    NzOptionComponent,
+    UserDatasetVersionFiletreeComponent,
+    NzDividerComponent,
+    FilesUploaderComponent,
+    NzProgressComponent,
+    UserDatasetStagedObjectsListComponent,
+    NzInputDirective,
+  ],
 })
 export class DatasetDetailComponent implements OnInit {
   public did: number | undefined;
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts
index c6f03406135..861479ca5a5 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts
@@ -25,6 +25,19 @@ import { ParseResult } from "papaparse";
 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
 import readXlsxFile from "read-excel-file";
 import { NotificationService } from "../../../../../../common/service/notification/notification.service";
+import { NgStyle, NgIf, NgFor } from "@angular/common";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
+import { NzAlertComponent } from "ng-zorro-antd/alert";
+import {
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
+import { MarkdownComponent } from "ngx-markdown";
+import { NgxJsonViewerModule } from "ngx-json-viewer";
 
 export const MIME_TYPES = {
   JPEG: "image/jpeg",
@@ -74,7 +87,21 @@ export const MIME_TYPE_SIZE_LIMITS_MB = {
   selector: "texera-user-dataset-file-renderer",
   templateUrl: "./user-dataset-file-renderer.component.html",
   styleUrls: ["./user-dataset-file-renderer.component.scss"],
-  standalone: false,
+  imports: [
+    NgStyle,
+    NgIf,
+    NzSpinComponent,
+    NzAlertComponent,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NgFor,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzTbodyComponent,
+    MarkdownComponent,
+    NgxJsonViewerModule,
+  ],
 })
 export class UserDatasetFileRendererComponent implements OnInit, OnChanges, OnDestroy {
   private DEFAULT_MAX_SIZE = 5 * 1024 * 1024; // 5 MB
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-staged-objects-list/user-dataset-staged-objects-list.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-staged-objects-list/user-dataset-staged-objects-list.component.ts
index 403242c93ee..79a632f9c49 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-staged-objects-list/user-dataset-staged-objects-list.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-staged-objects-list/user-dataset-staged-objects-list.component.ts
@@ -23,13 +23,34 @@ import { DatasetService } from "../../../../../service/user/dataset/dataset.serv
 import { NotificationService } from "../../../../../../common/service/notification/notification.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { formatTime } from "src/app/common/util/format.util";
+import { NgIf, NgFor } from "@angular/common";
+import { NzListComponent, NzListItemComponent } from "ng-zorro-antd/list";
+import { NzTagComponent } from "ng-zorro-antd/tag";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzEmptyComponent } from "ng-zorro-antd/empty";
 
 @UntilDestroy()
 @Component({
   selector: "texera-dataset-staged-objects-list",
   templateUrl: "./user-dataset-staged-objects-list.component.html",
   styleUrls: ["./user-dataset-staged-objects-list.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzListComponent,
+    NgFor,
+    NzListItemComponent,
+    NzTagComponent,
+    NzTooltipDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzEmptyComponent,
+  ],
 })
 export class UserDatasetStagedObjectsListComponent implements OnInit {
   @Input() did?: number; // Dataset ID
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-creator/user-dataset-version-creator.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-creator/user-dataset-version-creator.component.ts
index 022f6dda834..f223a2798dc 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-creator/user-dataset-version-creator.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-creator/user-dataset-version-creator.component.ts
@@ -18,21 +18,39 @@
  */
 
 import { Component, inject, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
-import { FormlyFieldConfig } from "@ngx-formly/core";
+import { FormBuilder, FormGroup, FormsModule } from "@angular/forms";
+import { FormlyFieldConfig, FormlyModule } from "@ngx-formly/core";
 import { DatasetService } from "../../../../../service/user/dataset/dataset.service";
 import { Dataset } from "../../../../../../common/type/dataset";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NotificationService } from "../../../../../../common/service/notification/notification.service";
 import { HttpErrorResponse } from "@angular/common/http";
 import { NZ_MODAL_DATA, NzModalRef } from "ng-zorro-antd/modal";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
+import { NgClass, NgIf } from "@angular/common";
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-dataset-version-creator",
   templateUrl: "./user-dataset-version-creator.component.html",
   styleUrls: ["./user-dataset-version-creator.component.scss"],
-  standalone: false,
+  imports: [
+    NzSpinComponent,
+    NgClass,
+    FormlyModule,
+    NgIf,
+    NzSwitchComponent,
+    FormsModule,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+  ],
 })
 export class UserDatasetVersionCreatorComponent implements OnInit {
   readonly isCreatingVersion: boolean = inject(NZ_MODAL_DATA).isCreatingVersion;
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-filetree/user-dataset-version-filetree.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-filetree/user-dataset-version-filetree.component.ts
index 1f3a0dc6e62..2eda4b53bf6 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-filetree/user-dataset-version-filetree.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-filetree/user-dataset-version-filetree.component.ts
@@ -23,7 +23,13 @@ import {
   DatasetFileNode,
   getRelativePathFromDatasetFileNode,
 } from "../../../../../../common/type/datasetVersionFileTree";
-import { ITreeOptions, TREE_ACTIONS } from "@ali-hm/angular-tree-component";
+import { ITreeOptions, TREE_ACTIONS, TreeModule } from "@ali-hm/angular-tree-component";
+import { NgIf } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
 
 const IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp"] as const;
 
@@ -32,7 +38,15 @@ const IMAGE_EXTENSIONS = [".jpg", ".jpeg", ".png", ".gif", ".webp"] as const;
   selector: "texera-user-dataset-version-filetree",
   templateUrl: "./user-dataset-version-filetree.component.html",
   styleUrls: ["./user-dataset-version-filetree.component.scss"],
-  standalone: false,
+  imports: [
+    TreeModule,
+    NgIf,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzTooltipDirective,
+  ],
 })
 export class UserDatasetVersionFiletreeComponent implements AfterViewInit {
   @Input()
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-list-item/user-dataset-list-item.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-list-item/user-dataset-list-item.component.ts
index ec7c5e8d81a..3e51374c9bd 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-list-item/user-dataset-list-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-list-item/user-dataset-list-item.component.ts
@@ -26,13 +26,51 @@ import { NotificationService } from "../../../../../common/service/notification/
 import { NzModalService } from "ng-zorro-antd/modal";
 import { DashboardDataset } from "../../../../type/dashboard-dataset.interface";
 import { DASHBOARD_USER_DATASET } from "../../../../../app-routing.constant";
+import {
+  NzListItemComponent,
+  NzListItemMetaComponent,
+  NzListItemMetaAvatarComponent,
+  NzListItemMetaTitleComponent,
+  NzListItemMetaDescriptionComponent,
+  NzListItemActionsComponent,
+  NzListItemActionComponent,
+} from "ng-zorro-antd/list";
+import { NgStyle, NgIf } from "@angular/common";
+import { NzAvatarComponent } from "ng-zorro-antd/avatar";
+import { RouterLink } from "@angular/router";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-dataset-list-item",
   templateUrl: "./user-dataset-list-item.component.html",
   styleUrls: ["./user-dataset-list-item.component.scss"],
-  standalone: false,
+  imports: [
+    NzListItemComponent,
+    NzListItemMetaComponent,
+    NzListItemMetaAvatarComponent,
+    NgStyle,
+    NzAvatarComponent,
+    NzListItemMetaTitleComponent,
+    NgIf,
+    RouterLink,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzListItemMetaDescriptionComponent,
+    NzListItemActionsComponent,
+    NzListItemActionComponent,
+    NzWaveDirective,
+    NzPopconfirmDirective,
+  ],
 })
 export class UserDatasetListItemComponent {
   protected readonly DASHBOARD_USER_DATASET = DASHBOARD_USER_DATASET;
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
index 7e93e506024..d4187111024 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.html
@@ -44,7 +44,8 @@ <h2 class="page-title">Datasets</h2>
       name="search-input-box"
       nzMode="tags"
       nzPlaceHolder="Search all dataset"
-      [nzBorderless]="true"
+      nzVariant="borderless"
+      ]="true"
       [nzOpen]="false"
       ngDefaultControl
       [(ngModel)]="filters.masterFilterList"
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts
index 29d52f84539..165270c0537 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset.component.ts
@@ -34,13 +34,34 @@ import { UserDatasetVersionCreatorComponent } from "./user-dataset-explorer/user
 import { DashboardDataset } from "../../../type/dashboard-dataset.interface";
 import { NzMessageService } from "ng-zorro-antd/message";
 import { map, tap } from "rxjs/operators";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { FiltersInstructionsComponent } from "../filters-instructions/filters-instructions.component";
+import { NzSelectComponent } from "ng-zorro-antd/select";
+import { FormsModule } from "@angular/forms";
 
 @UntilDestroy()
 @Component({
   selector: "texera-dataset-section",
   templateUrl: "user-dataset.component.html",
   styleUrls: ["user-dataset.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    FiltersComponent,
+    FiltersInstructionsComponent,
+    NzSelectComponent,
+    FormsModule,
+    SearchResultsComponent,
+  ],
 })
 export class UserDatasetComponent implements AfterViewInit {
   public sortMethod = SortMethod.EditTimeDesc;
diff --git a/frontend/src/app/dashboard/component/user/user-icon/user-icon.component.ts b/frontend/src/app/dashboard/component/user/user-icon/user-icon.component.ts
index 42eebffb549..4b1fd6d4de1 100644
--- a/frontend/src/app/dashboard/component/user/user-icon/user-icon.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-icon/user-icon.component.ts
@@ -23,6 +23,10 @@ import { User } from "../../../../common/type/user";
 import { UntilDestroy } from "@ngneat/until-destroy";
 import { Router } from "@angular/router";
 import { DASHBOARD_ABOUT } from "../../../../app-routing.constant";
+import { UserAvatarComponent } from "../user-avatar/user-avatar.component";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
 
 /**
  * UserIconComponent is used to control user system on the top right corner
@@ -34,7 +38,14 @@ import { DASHBOARD_ABOUT } from "../../../../app-routing.constant";
   selector: "texera-user-icon",
   templateUrl: "./user-icon.component.html",
   styleUrls: ["./user-icon.component.scss"],
-  standalone: false,
+  imports: [
+    UserAvatarComponent,
+    ɵNzTransitionPatchDirective,
+    NzDropdownDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NzMenuItemComponent,
+  ],
 })
 export class UserIconComponent {
   public user: User | undefined;
diff --git a/frontend/src/app/dashboard/component/user/user-project/public-project/public-project.component.ts b/frontend/src/app/dashboard/component/user/user-project/public-project/public-project.component.ts
index 83e86495895..71c3bb44c8a 100644
--- a/frontend/src/app/dashboard/component/user/user-project/public-project/public-project.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-project/public-project/public-project.component.ts
@@ -22,11 +22,41 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { PublicProjectService } from "../../../../service/user/public-project/public-project.service";
 import { PublicProject } from "../../../../type/dashboard-project.interface";
 import { NZ_MODAL_DATA, NzModalRef } from "ng-zorro-antd/modal";
+import {
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzThSelectionComponent,
+  NzTbodyComponent,
+  NzTdAddOnComponent,
+} from "ng-zorro-antd/table";
+import { NgFor, DatePipe } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   templateUrl: "public-project.component.html",
-  standalone: false,
+  imports: [
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzThSelectionComponent,
+    NzTbodyComponent,
+    NgFor,
+    NzTdAddOnComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    DatePipe,
+  ],
 })
 export class PublicProjectComponent implements OnInit {
   readonly modal = inject(NzModalRef);
diff --git a/frontend/src/app/dashboard/component/user/user-project/user-project-list-item/user-project-list-item.component.ts b/frontend/src/app/dashboard/component/user/user-project/user-project-list-item/user-project-list-item.component.ts
index 5e39bb09197..9bb67506301 100644
--- a/frontend/src/app/dashboard/component/user/user-project/user-project-list-item/user-project-list-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-project/user-project-list-item/user-project-list-item.component.ts
@@ -26,13 +26,68 @@ import { ShareAccessComponent } from "../../share-access/share-access.component"
 import { NzModalService } from "ng-zorro-antd/modal";
 import { UserService } from "../../../../../common/service/user/user.service";
 import { DASHBOARD_USER_PROJECT } from "../../../../../app-routing.constant";
+import {
+  NzListItemComponent,
+  NzListItemMetaComponent,
+  NzListItemMetaAvatarComponent,
+  NzListItemMetaTitleComponent,
+  NzListItemMetaDescriptionComponent,
+  NzListItemActionsComponent,
+  NzListItemActionComponent,
+} from "ng-zorro-antd/list";
+import { NgStyle, NgIf, DatePipe } from "@angular/common";
+import { NzAvatarComponent } from "ng-zorro-antd/avatar";
+import { ColorPickerModule } from "ngx-color-picker";
+import { RouterLink } from "@angular/router";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { MarkdownComponent } from "ngx-markdown";
+import {
+  NzInputGroupComponent,
+  NzInputGroupWhitSuffixOrPrefixDirective,
+  NzInputDirective,
+  NzAutosizeDirective,
+} from "ng-zorro-antd/input";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
+import { HighlightSearchTermsPipe } from "../../user-workflow/user-workflow-list-item/highlight-search-terms.pipe";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-project-list-item",
   templateUrl: "./user-project-list-item.component.html",
   styleUrls: ["./user-project-list-item.component.scss"],
-  standalone: false,
+  imports: [
+    NzListItemComponent,
+    NzListItemMetaComponent,
+    NzListItemMetaAvatarComponent,
+    NgStyle,
+    NzAvatarComponent,
+    ColorPickerModule,
+    NzListItemMetaTitleComponent,
+    NgIf,
+    RouterLink,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzListItemMetaDescriptionComponent,
+    MarkdownComponent,
+    NzInputGroupComponent,
+    NzInputGroupWhitSuffixOrPrefixDirective,
+    NzInputDirective,
+    NzAutosizeDirective,
+    NzListItemActionsComponent,
+    NzListItemActionComponent,
+    NzWaveDirective,
+    NzPopconfirmDirective,
+    DatePipe,
+    HighlightSearchTermsPipe,
+  ],
 })
 export class UserProjectListItemComponent implements OnInit {
   public readonly ROUTER_USER_PROJECT_BASE_URL = DASHBOARD_USER_PROJECT;
diff --git a/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-add-project-workflow/ngbd-modal-add-project-workflow.component.ts b/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-add-project-workflow/ngbd-modal-add-project-workflow.component.ts
index 0179e115578..82c20d1d7df 100644
--- a/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-add-project-workflow/ngbd-modal-add-project-workflow.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-add-project-workflow/ngbd-modal-add-project-workflow.component.ts
@@ -25,13 +25,31 @@ import { DashboardWorkflow } from "../../../../../type/dashboard-workflow.interf
 import { UserProjectService } from "../../../../../service/user/project/user-project.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
+import {
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
+import { NgFor, DatePipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @UntilDestroy()
 @Component({
   selector: "texera-add-project-workflow-modal",
   templateUrl: "./ngbd-modal-add-project-workflow.component.html",
   styleUrls: ["./ngbd-modal-add-project-workflow.component.scss"],
-  standalone: false,
+  imports: [
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzTbodyComponent,
+    NgFor,
+    FormsModule,
+    DatePipe,
+  ],
 })
 export class NgbdModalAddProjectWorkflowComponent implements OnInit {
   readonly projectId: number = inject(NZ_MODAL_DATA).projectId;
diff --git a/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-remove-project-workflow/ngbd-modal-remove-project-workflow.component.ts b/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-remove-project-workflow/ngbd-modal-remove-project-workflow.component.ts
index caae1762f30..62aef72cd03 100644
--- a/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-remove-project-workflow/ngbd-modal-remove-project-workflow.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-project/user-project-section/ngbd-modal-remove-project-workflow/ngbd-modal-remove-project-workflow.component.ts
@@ -23,13 +23,31 @@ import { UserProjectService } from "../../../../../service/user/project/user-pro
 import { DashboardWorkflow } from "../../../../../type/dashboard-workflow.interface";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
+import {
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
+import { NgFor, DatePipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
 
 @UntilDestroy()
 @Component({
   selector: "texera-remove-project-workflow-modal",
   templateUrl: "./ngbd-modal-remove-project-workflow.component.html",
   styleUrls: ["./ngbd-modal-remove-project-workflow.component.scss"],
-  standalone: false,
+  imports: [
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzTbodyComponent,
+    NgFor,
+    FormsModule,
+    DatePipe,
+  ],
 })
 export class NgbdModalRemoveProjectWorkflowComponent implements OnInit {
   readonly projectId: number = inject(NZ_MODAL_DATA).projectId;
diff --git a/frontend/src/app/dashboard/component/user/user-project/user-project-section/user-project-section.component.ts b/frontend/src/app/dashboard/component/user/user-project/user-project-section/user-project-section.component.ts
index e155f688cc4..00e61bc42dd 100644
--- a/frontend/src/app/dashboard/component/user/user-project/user-project-section/user-project-section.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-project/user-project-section/user-project-section.component.ts
@@ -24,13 +24,40 @@ import { DashboardFile } from "../../../../type/dashboard-file.interface";
 import { NotificationService } from "../../../../../common/service/notification/notification.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { isDefined } from "../../../../../common/util/predicate";
+import { NzCardComponent, NzCardMetaComponent } from "ng-zorro-antd/card";
+import { NgIf, NgClass, NgStyle, DatePipe } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { ColorPickerModule } from "ngx-color-picker";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { UserWorkflowComponent } from "../../user-workflow/user-workflow.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-project-section",
   templateUrl: "./user-project-section.component.html",
   styleUrls: ["./user-project-section.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NgIf,
+    MarkdownComponent,
+    NzCardMetaComponent,
+    NgClass,
+    NgStyle,
+    NzTooltipDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    ColorPickerModule,
+    NzIconDirective,
+    UserWorkflowComponent,
+    DatePipe,
+  ],
 })
 export class UserProjectSectionComponent implements OnInit {
   // information from the database about this project
diff --git a/frontend/src/app/dashboard/component/user/user-project/user-project.component.ts b/frontend/src/app/dashboard/component/user/user-project/user-project.component.ts
index 3bd7c057cd2..3ff63123145 100644
--- a/frontend/src/app/dashboard/component/user/user-project/user-project.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-project/user-project.component.ts
@@ -25,13 +25,46 @@ import { NotificationService } from "../../../../common/service/notification/not
 import { UserService } from "../../../../common/service/user/user.service";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { PublicProjectComponent } from "./public-project/public-project.component";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzDropdownADirective, NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NgIf, NgFor } from "@angular/common";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzListComponent } from "ng-zorro-antd/list";
+import { UserProjectListItemComponent } from "./user-project-list-item/user-project-list-item.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-project-list",
   templateUrl: "./user-project.component.html",
   styleUrls: ["./user-project.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzDropdownADirective,
+    NzDropdownDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NzMenuItemComponent,
+    NzTooltipDirective,
+    NgIf,
+    NzInputDirective,
+    FormsModule,
+    NzListComponent,
+    NgFor,
+    UserProjectListItemComponent,
+  ],
 })
 export class UserProjectComponent implements OnInit {
   // store list of projects / variables to create and edit projects
diff --git a/frontend/src/app/dashboard/component/user/user-quota/user-quota.component.ts b/frontend/src/app/dashboard/component/user/user-quota/user-quota.component.ts
index 0faa1709f7b..ae04467a801 100644
--- a/frontend/src/app/dashboard/component/user/user-quota/user-quota.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-quota/user-quota.component.ts
@@ -21,12 +21,32 @@ import { Component, inject, OnInit } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { ExecutionQuota, File, Workflow, WorkflowQuota } from "../../../../common/type/user";
 import { DatasetQuota } from "src/app/dashboard/type/quota-statistic.interface";
-import { NzTableSortFn } from "ng-zorro-antd/table";
+import {
+  NzTableSortFn,
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzThAddOnComponent,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
 import { UserQuotaService } from "src/app/dashboard/service/user/quota/user-quota.service";
 import { AdminUserService } from "src/app/dashboard/service/admin/user/admin-user.service";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
 import * as Plotly from "plotly.js-basic-dist-min";
 import { formatSize } from "src/app/common/util/size-formatter.util";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs";
+import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
+import { NgFor } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 type UserServiceType = AdminUserService | UserQuotaService;
 
@@ -34,7 +54,28 @@ type UserServiceType = AdminUserService | UserQuotaService;
 @Component({
   templateUrl: "./user-quota.component.html",
   styleUrls: ["./user-quota.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzTabsComponent,
+    NzTabComponent,
+    NzCollapseComponent,
+    NgFor,
+    NzCollapsePanelComponent,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzThAddOnComponent,
+    NzTbodyComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    NzPopconfirmDirective,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+  ],
 })
 export class UserQuotaComponent implements OnInit {
   readonly userId: number;
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component.ts b/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component.ts
index bc8d005f242..724d9b4de20 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component.ts
@@ -30,6 +30,33 @@ import { NZ_MODAL_DATA, NzModalRef, NzModalService } from "ng-zorro-antd/modal";
 import { WorkflowRuntimeStatisticsComponent } from "./workflow-runtime-statistics/workflow-runtime-statistics.component";
 import * as Plotly from "plotly.js-basic-dist-min";
 import { ActivatedRoute } from "@angular/router";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputGroupComponent, NzInputGroupWhitSuffixOrPrefixDirective, NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzAutocompleteTriggerDirective, NzAutocompleteComponent } from "ng-zorro-antd/auto-complete";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzPopoverDirective } from "ng-zorro-antd/popover";
+import { NgIf, NgStyle, NgFor, DatePipe } from "@angular/common";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
+import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs";
+import {
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzThSelectionComponent,
+  NzTbodyComponent,
+  NzCellEllipsisDirective,
+  NzTdAddOnComponent,
+} from "ng-zorro-antd/table";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { UserAvatarComponent } from "../../user-avatar/user-avatar.component";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
 
 const MAX_TEXT_SIZE = 20;
 const MAX_RGB = 255;
@@ -40,7 +67,41 @@ const MAX_USERNAME_SIZE = 5;
   selector: "texera-ngbd-modal-workflow-executions",
   templateUrl: "./workflow-execution-history.component.html",
   styleUrls: ["./workflow-execution-history.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    ɵNzTransitionPatchDirective,
+    NzSpaceCompactItemDirective,
+    NzInputGroupComponent,
+    NzInputGroupWhitSuffixOrPrefixDirective,
+    NzInputDirective,
+    FormsModule,
+    NzAutocompleteTriggerDirective,
+    NzIconDirective,
+    NzPopoverDirective,
+    NzAutocompleteComponent,
+    NgIf,
+    NzTooltipDirective,
+    NzPopconfirmDirective,
+    NzTabsComponent,
+    NzTabComponent,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzThSelectionComponent,
+    NgStyle,
+    NgFor,
+    NzButtonComponent,
+    NzWaveDirective,
+    NzTbodyComponent,
+    NzCellEllipsisDirective,
+    NzTdAddOnComponent,
+    UserAvatarComponent,
+    NzRowDirective,
+    NzColDirective,
+    DatePipe,
+  ],
 })
 export class WorkflowExecutionHistoryComponent implements OnInit, AfterViewInit {
   wid: number = 0;
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-runtime-statistics/workflow-runtime-statistics.component.ts b/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-runtime-statistics/workflow-runtime-statistics.component.ts
index d5596e7e47c..1525e6c7301 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-runtime-statistics/workflow-runtime-statistics.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-runtime-statistics/workflow-runtime-statistics.component.ts
@@ -22,6 +22,8 @@ import { UntilDestroy } from "@ngneat/until-destroy";
 import { WorkflowRuntimeStatistics } from "../../../../../type/workflow-runtime-statistics";
 import * as Plotly from "plotly.js-basic-dist-min";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
+import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs";
+import { NgFor } from "@angular/common";
 
 const NANOSECONDS_TO_SECONDS = 1_000_000_000;
 
@@ -37,7 +39,7 @@ interface ChartData {
   selector: "texera-workflow-runtime-statistics",
   templateUrl: "./workflow-runtime-statistics.component.html",
   styleUrls: ["./workflow-runtime-statistics.component.scss"],
-  standalone: false,
+  imports: [NzTabsComponent, NgFor, NzTabComponent],
 })
 export class WorkflowRuntimeStatisticsComponent implements OnInit {
   readonly workflowRuntimeStatistics: WorkflowRuntimeStatistics[] = inject(NZ_MODAL_DATA).workflowRuntimeStatistics;
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/highlight-search-terms.pipe.ts b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/highlight-search-terms.pipe.ts
index e4f0fe2262f..44953b1f8a4 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/highlight-search-terms.pipe.ts
+++ b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/highlight-search-terms.pipe.ts
@@ -20,10 +20,7 @@
 import { Pipe, PipeTransform } from "@angular/core";
 import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 
-@Pipe({
-  name: "highlightSearchTerms",
-  standalone: false,
-})
+@Pipe({ name: "highlightSearchTerms" })
 export class HighlightSearchTermsPipe implements PipeTransform {
   constructor(private sanitizer: DomSanitizer) {}
 
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component.ts b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component.ts
index 88213ae2547..4e849e6448c 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow-list-item/user-workflow-list-item.component.ts
@@ -34,13 +34,58 @@ import { firstValueFrom } from "rxjs";
 import { DownloadService } from "src/app/dashboard/service/user/download/download.service";
 import { DASHBOARD_USER_PROJECT, DASHBOARD_USER_WORKSPACE } from "../../../../../app-routing.constant";
 import { GuiConfigService } from "../../../../../common/service/gui-config.service";
+import {
+  NzListItemComponent,
+  NzListItemMetaComponent,
+  NzListItemMetaAvatarComponent,
+  NzListItemMetaTitleComponent,
+  NzListItemMetaDescriptionComponent,
+  NzListItemActionsComponent,
+  NzListItemActionComponent,
+} from "ng-zorro-antd/list";
+import { NgStyle, NgIf, NgFor, NgClass, DatePipe } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { NzAvatarComponent } from "ng-zorro-antd/avatar";
+import { RouterLink } from "@angular/router";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
+import { HighlightSearchTermsPipe } from "./highlight-search-terms.pipe";
 
 @UntilDestroy()
 @Component({
   selector: "texera-user-workflow-list-item",
   templateUrl: "./user-workflow-list-item.component.html",
   styleUrls: ["./user-workflow-list-item.component.scss"],
-  standalone: false,
+  imports: [
+    NzListItemComponent,
+    NzListItemMetaComponent,
+    NzListItemMetaAvatarComponent,
+    NgStyle,
+    NgIf,
+    FormsModule,
+    NzAvatarComponent,
+    NzListItemMetaTitleComponent,
+    RouterLink,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzListItemMetaDescriptionComponent,
+    NgFor,
+    NgClass,
+    NzListItemActionsComponent,
+    NzListItemActionComponent,
+    NzWaveDirective,
+    NzPopconfirmDirective,
+    DatePipe,
+    HighlightSearchTermsPipe,
+  ],
 })
 export class UserWorkflowListItemComponent {
   protected readonly DASHBOARD_USER_WORKSPACE = DASHBOARD_USER_WORKSPACE;
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html
index d9d56bbda04..7f3d431ae92 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html
+++ b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.html
@@ -33,7 +33,7 @@ <h2 class="page-title">Workflows</h2>
           nzTheme="outline"></i>
         <span>Create Workflow</span>
       </button>
-      <nz-button-group
+      <nz-space-compact
         class="utility-button-group"
         ngbDropdown>
         <texera-sort-button (sortMethodChange)="sortMethod = $event; search()"></texera-sort-button>
@@ -131,7 +131,7 @@ <h2 class="page-title">Workflows</h2>
             nzTheme="outline"
             nzType="minus-square"></i>
         </button>
-      </nz-button-group>
+      </nz-space-compact>
       <texera-filters
         [pid]="pid"
         #filters></texera-filters>
@@ -145,7 +145,8 @@ <h2 class="page-title">Workflows</h2>
       name="search-input-box"
       nzMode="tags"
       nzPlaceHolder="Search all workflows"
-      [nzBorderless]="true"
+      nzVariant="borderless"
+      ]="true"
       [nzOpen]="false"
       ngDefaultControl
       [(ngModel)]="filters.masterFilterList"
diff --git a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts
index d428614997f..f3129f1a9cf 100644
--- a/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-workflow/user-workflow.component.ts
@@ -32,7 +32,7 @@ import { UserService } from "../../../../common/service/user/user.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
 import { ExecutionMode, WorkflowContent } from "../../../../common/type/workflow";
-import { NzUploadFile } from "ng-zorro-antd/upload";
+import { NzUploadFile, NzUploadComponent } from "ng-zorro-antd/upload";
 import * as JSZip from "jszip";
 import { FiltersComponent } from "../filters/filters.component";
 import { SearchResultsComponent } from "../search-results/search-results.component";
@@ -45,6 +45,19 @@ import { DashboardWorkflow } from "../../../type/dashboard-workflow.interface";
 import { DownloadService } from "../../../service/user/download/download.service";
 import { DASHBOARD_USER_WORKSPACE } from "../../../../app-routing.constant";
 import { GuiConfigService } from "../../../../common/service/gui-config.service";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { NzSpaceCompactItemDirective, NzSpaceCompactComponent } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { SortButtonComponent } from "../sort-button/sort-button.component";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NgIf } from "@angular/common";
+import { NzPopconfirmDirective } from "ng-zorro-antd/popconfirm";
+import { FiltersInstructionsComponent } from "../filters-instructions/filters-instructions.component";
+import { NzSelectComponent } from "ng-zorro-antd/select";
+import { FormsModule } from "@angular/forms";
 
 /**
  * Saved-workflow-section component contains information and functionality
@@ -77,7 +90,25 @@ import { GuiConfigService } from "../../../../common/service/gui-config.service"
   selector: "texera-saved-workflow-section",
   templateUrl: "user-workflow.component.html",
   styleUrls: ["user-workflow.component.scss"],
-  standalone: false,
+  imports: [
+    NzCardComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    SortButtonComponent,
+    NzUploadComponent,
+    NzTooltipDirective,
+    NgIf,
+    NzPopconfirmDirective,
+    FiltersComponent,
+    FiltersInstructionsComponent,
+    NzSelectComponent,
+    FormsModule,
+    SearchResultsComponent,
+    NzSpaceCompactComponent,
+  ],
 })
 export class UserWorkflowComponent implements AfterViewInit {
   private _searchResultsComponent?: SearchResultsComponent;
diff --git a/frontend/src/app/hub/component/about/about.component.ts b/frontend/src/app/hub/component/about/about.component.ts
index ac22ee1a872..79954035404 100644
--- a/frontend/src/app/hub/component/about/about.component.ts
+++ b/frontend/src/app/hub/component/about/about.component.ts
@@ -22,13 +22,16 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { UserService } from "src/app/common/service/user/user.service";
 import { BehaviorSubject } from "rxjs";
 import { GuiConfigService } from "../../../common/service/gui-config.service";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { NgIf, AsyncPipe } from "@angular/common";
+import { LocalLoginComponent } from "./local-login/local-login.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-about",
   templateUrl: "./about.component.html",
   styleUrls: ["./about.component.scss"],
-  standalone: false,
+  imports: [NzRowDirective, NzColDirective, NgIf, LocalLoginComponent, AsyncPipe],
 })
 export class AboutComponent implements OnInit {
   isLogin$ = new BehaviorSubject<boolean>(false); // control the visibility of the local login component
diff --git a/frontend/src/app/hub/component/about/local-login/local-login.component.ts b/frontend/src/app/hub/component/about/local-login/local-login.component.ts
index 5a39589a7c5..215b17e3425 100644
--- a/frontend/src/app/hub/component/about/local-login/local-login.component.ts
+++ b/frontend/src/app/hub/component/about/local-login/local-login.component.ts
@@ -18,7 +18,7 @@
  */
 
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormControl, FormGroup, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { ActivatedRoute, Router } from "@angular/router";
 import { UserService } from "../../../../common/service/user/user.service";
@@ -27,13 +27,39 @@ import { catchError } from "rxjs/operators";
 import { throwError } from "rxjs";
 import { DASHBOARD_USER_WORKFLOW } from "../../../../app-routing.constant";
 import { GuiConfigService } from "../../../../common/service/gui-config.service";
+import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs";
+import { NgIf } from "@angular/common";
+import { NzFormDirective, NzFormItemComponent, NzFormControlComponent } from "ng-zorro-antd/form";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputGroupComponent, NzInputDirective } from "ng-zorro-antd/input";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 
 @UntilDestroy()
 @Component({
   selector: "texera-local-login",
   templateUrl: "./local-login.component.html",
   styleUrls: ["./local-login.component.scss"],
-  standalone: false,
+  imports: [
+    NzTabsComponent,
+    NgIf,
+    NzTabComponent,
+    FormsModule,
+    NzFormDirective,
+    ReactiveFormsModule,
+    NzRowDirective,
+    NzFormItemComponent,
+    NzColDirective,
+    NzFormControlComponent,
+    ɵNzTransitionPatchDirective,
+    NzSpaceCompactItemDirective,
+    NzInputGroupComponent,
+    NzInputDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+  ],
 })
 export class LocalLoginComponent implements OnInit {
   public loginErrorMessage: string | undefined;
diff --git a/frontend/src/app/hub/component/browse-section/browse-section.component.ts b/frontend/src/app/hub/component/browse-section/browse-section.component.ts
index ddfe88d857f..7629a8906d8 100644
--- a/frontend/src/app/hub/component/browse-section/browse-section.component.ts
+++ b/frontend/src/app/hub/component/browse-section/browse-section.component.ts
@@ -29,13 +29,29 @@ import {
   DASHBOARD_USER_WORKSPACE,
 } from "../../../app-routing.constant";
 import { AppSettings } from "../../../common/app-setting";
+import { NgIf, NgFor, NgStyle, DatePipe } from "@angular/common";
+import { NzCardComponent } from "ng-zorro-antd/card";
+import { RouterLink } from "@angular/router";
+import { UserAvatarComponent } from "../../../dashboard/component/user/user-avatar/user-avatar.component";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzAvatarComponent } from "ng-zorro-antd/avatar";
 
 @UntilDestroy()
 @Component({
   selector: "texera-browse-section",
   templateUrl: "./browse-section.component.html",
   styleUrls: ["./browse-section.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NgFor,
+    NzCardComponent,
+    RouterLink,
+    UserAvatarComponent,
+    ɵNzTransitionPatchDirective,
+    NzAvatarComponent,
+    NgStyle,
+    DatePipe,
+  ],
 })
 export class BrowseSectionComponent implements OnInit, OnChanges {
   @Input() entities: DashboardEntry[] = [];
diff --git a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts
index 16f84492c6e..067e9205625 100644
--- a/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts
+++ b/frontend/src/app/hub/component/hub-search-result/hub-search-result.component.ts
@@ -28,13 +28,14 @@ import { SearchService } from "../../../dashboard/service/user/search.service";
 import { isDefined } from "../../../common/util/predicate";
 import { firstValueFrom } from "rxjs";
 import { map } from "rxjs/operators";
+import { SortButtonComponent } from "../../../dashboard/component/user/sort-button/sort-button.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-hub-search",
   templateUrl: "./hub-search-result.component.html",
   styleUrls: ["./hub-search-result.component.scss"],
-  standalone: false,
+  imports: [SortButtonComponent, FiltersComponent, SearchResultsComponent],
 })
 export class HubSearchResultComponent implements OnInit, AfterViewInit {
   public searchType: "dataset" | "workflow" = "workflow";
diff --git a/frontend/src/app/hub/component/hub.component.ts b/frontend/src/app/hub/component/hub.component.ts
index becce96dfc0..ad9bc079e0f 100644
--- a/frontend/src/app/hub/component/hub.component.ts
+++ b/frontend/src/app/hub/component/hub.component.ts
@@ -25,12 +25,18 @@ import {
 } from "../../app-routing.constant";
 import { GuiConfigService } from "../../common/service/gui-config.service";
 import { SidebarTabs } from "../../common/type/gui-config";
+import { NgIf } from "@angular/common";
+import { NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { RouterLink } from "@angular/router";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 @Component({
   selector: "texera-hub",
   templateUrl: "hub.component.html",
   styleUrls: ["hub.component.scss"],
-  standalone: false,
+  imports: [NgIf, NzMenuItemComponent, ɵNzTransitionPatchDirective, NzTooltipDirective, RouterLink, NzIconDirective],
 })
 export class HubComponent {
   @Input() isLogin: boolean = false;
diff --git a/frontend/src/app/hub/component/landing-page/landing-page.component.ts b/frontend/src/app/hub/component/landing-page/landing-page.component.ts
index e403e700d80..b8a7e02de3f 100644
--- a/frontend/src/app/hub/component/landing-page/landing-page.component.ts
+++ b/frontend/src/app/hub/component/landing-page/landing-page.component.ts
@@ -30,13 +30,14 @@ import {
   DASHBOARD_HUB_WORKFLOW_RESULT,
 } from "../../../app-routing.constant";
 import { UserService } from "../../../common/service/user/user.service";
+import { BrowseSectionComponent } from "../browse-section/browse-section.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-landing-page",
   templateUrl: "./landing-page.component.html",
   styleUrls: ["./landing-page.component.scss"],
-  standalone: false,
+  imports: [BrowseSectionComponent],
 })
 export class LandingPageComponent implements OnInit {
   public isLogin = this.userService.isLogin();
diff --git a/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts b/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts
index d2f631f1ee2..5eb1561b50b 100644
--- a/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts
+++ b/frontend/src/app/hub/component/workflow/detail/hub-workflow-detail.component.ts
@@ -31,6 +31,16 @@ import { NotificationService } from "../../../../common/service/notification/not
 import { WorkflowPersistService } from "../../../../common/service/workflow-persist/workflow-persist.service";
 import { NZ_MODAL_DATA } from "ng-zorro-antd/modal";
 import { DASHBOARD_HUB_WORKFLOW_RESULT, DASHBOARD_USER_WORKSPACE } from "../../../../app-routing.constant";
+import { NgIf, NgClass } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { MarkdownDescriptionComponent } from "../../../../dashboard/component/user/markdown-description/markdown-description.component";
+import { WorkflowEditorComponent } from "../../../../workspace/component/workflow-editor/workflow-editor.component";
+import { MiniMapComponent } from "../../../../workspace/component/workflow-editor/mini-map/mini-map.component";
+import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 export const THROTTLE_TIME_MS = 1000;
 
@@ -39,7 +49,19 @@ export const THROTTLE_TIME_MS = 1000;
   selector: "texera-hub-workflow-detail",
   templateUrl: "hub-workflow-detail.component.html",
   styleUrls: ["hub-workflow-detail.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzWaveDirective,
+    NgClass,
+    MarkdownDescriptionComponent,
+    WorkflowEditorComponent,
+    MiniMapComponent,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class HubWorkflowDetailComponent implements AfterViewInit, OnDestroy, OnInit {
   isHub: boolean = false;
diff --git a/frontend/src/app/workspace/component/agent/agent-interaction/agent-interaction.component.ts b/frontend/src/app/workspace/component/agent/agent-interaction/agent-interaction.component.ts
index 667002e02e2..9b4b29ce1c4 100644
--- a/frontend/src/app/workspace/component/agent/agent-interaction/agent-interaction.component.ts
+++ b/frontend/src/app/workspace/component/agent/agent-interaction/agent-interaction.component.ts
@@ -23,6 +23,23 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AgentService } from "../../../service/agent/agent.service";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
+import { NgIf, NgFor } from "@angular/common";
+import {
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
+import { FormsModule } from "@angular/forms";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzInputDirective, NzAutosizeDirective } from "ng-zorro-antd/input";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 
 /**
  * AgentInteractionComponent provides a compact interface for users to send feedback
@@ -34,7 +51,26 @@ import { NotificationService } from "../../../../common/service/notification/not
   selector: "texera-agent-interaction",
   templateUrl: "./agent-interaction.component.html",
   styleUrls: ["./agent-interaction.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzTheadComponent,
+    NzTrDirective,
+    NgFor,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzTbodyComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzSpaceCompactItemDirective,
+    NzSelectComponent,
+    FormsModule,
+    NzOptionComponent,
+    NzTooltipDirective,
+    NzInputDirective,
+    NzAutosizeDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+  ],
 })
 export class AgentInteractionComponent implements OnInit, OnChanges {
   @Input() operatorId!: string;
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts
index 5ced1b85f2e..55b6c6a3f66 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-chat/agent-chat.component.ts
@@ -37,13 +37,59 @@ import { AgentInfo, AgentService } from "../../../../service/agent/agent.service
 import { WorkflowActionService } from "../../../../service/workflow-graph/model/workflow-action.service";
 import { NotificationService } from "../../../../../common/service/notification/notification.service";
 import { WorkflowPersistService } from "../../../../../common/service/workflow-persist/workflow-persist.service";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NgIf, NgFor } from "@angular/common";
+import { MarkdownComponent } from "ngx-markdown";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
+import {
+  NzInputDirective,
+  NzAutosizeDirective,
+  NzInputGroupComponent,
+  NzInputGroupWhitSuffixOrPrefixDirective,
+} from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ReActStepDetailModalComponent } from "../react-step-detail-modal/react-step-detail-modal.component";
+import { NzModalComponent, NzModalContentDirective } from "ng-zorro-antd/modal";
+import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs";
+import { NzInputNumberComponent } from "ng-zorro-antd/input-number";
+import { NzTagComponent } from "ng-zorro-antd/tag";
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
 
 @UntilDestroy()
 @Component({
   selector: "texera-agent-chat",
   templateUrl: "agent-chat.component.html",
   styleUrls: ["agent-chat.component.scss"],
-  standalone: false,
+  imports: [
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzTooltipDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NgIf,
+    NgFor,
+    MarkdownComponent,
+    NzSpinComponent,
+    NzInputDirective,
+    FormsModule,
+    NzAutosizeDirective,
+    NzWaveDirective,
+    ReActStepDetailModalComponent,
+    NzModalComponent,
+    NzModalContentDirective,
+    NzTabsComponent,
+    NzTabComponent,
+    NzInputNumberComponent,
+    NzTagComponent,
+    NzInputGroupComponent,
+    NzInputGroupWhitSuffixOrPrefixDirective,
+    NzSwitchComponent,
+  ],
 })
 export class AgentChatComponent implements OnInit, AfterViewChecked, OnDestroy, OnChanges {
   @Input() agentInfo!: AgentInfo;
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts
index 5fea29a3c6b..cf47b8b3ab7 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-panel.component.ts
@@ -19,18 +19,54 @@
 
 import { Component, HostListener, Input, OnDestroy, OnInit, OnChanges, SimpleChanges } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { NzResizeEvent } from "ng-zorro-antd/resizable";
+import { NzResizeEvent, NzResizableDirective, NzResizeHandlesComponent } from "ng-zorro-antd/resizable";
 import { AgentService, AgentInfo } from "../../../service/agent/agent.service";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
 import { calculateTotalTranslate3d } from "../../../../common/util/panel-dock";
+import { NgIf, NgClass, NgFor } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NzTabsComponent, NzTabBarExtraContentDirective, NzTabComponent, NzTabDirective } from "ng-zorro-antd/tabs";
+import { AgentRegistrationComponent } from "./agent-registration/agent-registration.component";
+import { AgentChatComponent } from "./agent-chat/agent-chat.component";
+import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-agent-panel",
   templateUrl: "agent-panel.component.html",
   styleUrls: ["agent-panel.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    CdkDrag,
+    NzResizableDirective,
+    NzMenuDirective,
+    NgClass,
+    NzMenuItemComponent,
+    CdkDragHandle,
+    NzTabsComponent,
+    NzTabBarExtraContentDirective,
+    NzTabComponent,
+    NzTabDirective,
+    AgentRegistrationComponent,
+    NgFor,
+    AgentChatComponent,
+    NzResizeHandlesComponent,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class AgentPanelComponent implements OnInit, OnDestroy, OnChanges {
   protected readonly window = window;
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/agent-registration/agent-registration.component.ts b/frontend/src/app/workspace/component/agent/agent-panel/agent-registration/agent-registration.component.ts
index 93bcb0bc86c..f8bcfff4628 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/agent-registration/agent-registration.component.ts
+++ b/frontend/src/app/workspace/component/agent/agent-panel/agent-registration/agent-registration.component.ts
@@ -24,12 +24,36 @@ import { WorkflowActionService } from "../../../../service/workflow-graph/model/
 import { ComputingUnitStatusService } from "../../../../../common/service/computing-unit/computing-unit-status/computing-unit-status.service";
 import { ComputingUnitState } from "../../../../../common/type/computing-unit-connection.interface";
 import { Subject, takeUntil } from "rxjs";
+import { NgIf, NgFor } from "@angular/common";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzAlertComponent } from "ng-zorro-antd/alert";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
 
 @Component({
   selector: "texera-agent-registration",
   templateUrl: "agent-registration.component.html",
   styleUrls: ["agent-registration.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpinComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NgFor,
+    NzSpaceCompactItemDirective,
+    NzInputDirective,
+    FormsModule,
+    NzAlertComponent,
+    NzButtonComponent,
+    NzWaveDirective,
+    NzTooltipDirective,
+  ],
 })
 export class AgentRegistrationComponent implements OnInit, OnDestroy {
   @Output() agentCreated = new EventEmitter<string>();
diff --git a/frontend/src/app/workspace/component/agent/agent-panel/react-step-detail-modal/react-step-detail-modal.component.ts b/frontend/src/app/workspace/component/agent/agent-panel/react-step-detail-modal/react-step-detail-modal.component.ts
index c4e13e71cb3..b9a08a19f49 100644
--- a/frontend/src/app/workspace/component/agent/agent-panel/react-step-detail-modal/react-step-detail-modal.component.ts
+++ b/frontend/src/app/workspace/component/agent/agent-panel/react-step-detail-modal/react-step-detail-modal.component.ts
@@ -19,6 +19,13 @@
 
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { ReActStep } from "../../../../service/agent/agent-types";
+import { NzModalComponent, NzModalContentDirective } from "ng-zorro-antd/modal";
+import { NgIf, NgFor, SlicePipe, DatePipe } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzDescriptionsComponent, NzDescriptionsItemComponent } from "ng-zorro-antd/descriptions";
+import { NzTagComponent } from "ng-zorro-antd/tag";
+import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
 
 /**
  * Reusable modal component for displaying ReActStep details.
@@ -28,7 +35,21 @@ import { ReActStep } from "../../../../service/agent/agent-types";
   selector: "texera-react-step-detail-modal",
   templateUrl: "./react-step-detail-modal.component.html",
   styleUrls: ["./react-step-detail-modal.component.scss"],
-  standalone: false,
+  imports: [
+    NzModalComponent,
+    NzModalContentDirective,
+    NgIf,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDescriptionsComponent,
+    NzDescriptionsItemComponent,
+    NzTagComponent,
+    NzCollapseComponent,
+    NgFor,
+    NzCollapsePanelComponent,
+    SlicePipe,
+    DatePipe,
+  ],
 })
 export class ReActStepDetailModalComponent {
   @Input() visible: boolean = false;
diff --git a/frontend/src/app/workspace/component/code-editor-dialog/annotation-suggestion.component.ts b/frontend/src/app/workspace/component/code-editor-dialog/annotation-suggestion.component.ts
index c1423a6d8be..c0b85a00c32 100644
--- a/frontend/src/app/workspace/component/code-editor-dialog/annotation-suggestion.component.ts
+++ b/frontend/src/app/workspace/component/code-editor-dialog/annotation-suggestion.component.ts
@@ -23,7 +23,6 @@ import { Component, EventEmitter, Input, Output } from "@angular/core";
   selector: "texera-annotation-suggestion",
   templateUrl: "./annotation-suggestion.component.html",
   styleUrls: ["./annotation-suggestion.component.scss"],
-  standalone: false,
 })
 export class AnnotationSuggestionComponent {
   @Input() code: string = "";
diff --git a/frontend/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.ts b/frontend/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.ts
index 39784abbb2b..45f0597e212 100644
--- a/frontend/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.ts
+++ b/frontend/src/app/workspace/component/code-editor-dialog/breakpoint-condition-input/breakpoint-condition-input.component.ts
@@ -21,6 +21,9 @@ import { Component, EventEmitter, HostListener, Input, OnChanges, Output, Simple
 import { editor } from "monaco-editor";
 import { UdfDebugService } from "../../../service/operator-debug/udf-debug.service";
 import { isDefined } from "../../../../common/util/predicate";
+import { NgIf, NgStyle } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 type MonacoEditor = editor.IStandaloneCodeEditor;
 
@@ -31,7 +34,7 @@ type MonacoEditor = editor.IStandaloneCodeEditor;
   selector: "texera-breakpoint-condition-input",
   templateUrl: "./breakpoint-condition-input.component.html",
   styleUrls: ["./breakpoint-condition-input.component.scss"],
-  standalone: false,
+  imports: [NgIf, NgStyle, FormsModule, FormlyRepeatDndComponent],
 })
 export class BreakpointConditionInputComponent implements OnChanges {
   constructor(private udfDebugService: UdfDebugService) {}
diff --git a/frontend/src/app/workspace/component/code-editor-dialog/code-debugger.component.ts b/frontend/src/app/workspace/component/code-editor-dialog/code-debugger.component.ts
index e870d606fc7..14384524cfa 100644
--- a/frontend/src/app/workspace/component/code-editor-dialog/code-debugger.component.ts
+++ b/frontend/src/app/workspace/component/code-editor-dialog/code-debugger.component.ts
@@ -46,7 +46,7 @@ const MouseTargetType = monaco.editor.MouseTargetType;
 @Component({
   selector: "texera-code-debugger",
   templateUrl: "code-debugger.component.html",
-  standalone: false,
+  imports: [BreakpointConditionInputComponent],
 })
 export class CodeDebuggerComponent implements AfterViewInit, SafeStyle {
   @Input() monacoEditor!: MonacoEditor;
diff --git a/frontend/src/app/workspace/component/code-editor-dialog/code-editor.component.ts b/frontend/src/app/workspace/component/code-editor-dialog/code-editor.component.ts
index 9ee11cc837b..a0838e6e459 100644
--- a/frontend/src/app/workspace/component/code-editor-dialog/code-editor.component.ts
+++ b/frontend/src/app/workspace/component/code-editor-dialog/code-editor.component.ts
@@ -51,6 +51,13 @@ import { filter, switchMap } from "rxjs/operators";
 import { BreakpointConditionInputComponent } from "./breakpoint-condition-input/breakpoint-condition-input.component";
 import { CodeDebuggerComponent } from "./code-debugger.component";
 import { GuiConfigService } from "src/app/common/service/gui-config.service";
+import { CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NgFor, NgComponentOutlet, NgIf } from "@angular/common";
+import { FormlyRepeatDndComponent } from "../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 type MonacoEditor = monaco.editor.IStandaloneCodeEditor;
 
@@ -69,7 +76,19 @@ export const LANGUAGE_SERVER_CONNECTION_TIMEOUT_MS = 1000;
   selector: "texera-code-editor",
   templateUrl: "code-editor.component.html",
   styleUrls: ["code-editor.component.scss"],
-  standalone: false,
+  imports: [
+    CdkDrag,
+    CdkDragHandle,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NgFor,
+    NgComponentOutlet,
+    NgIf,
+    AnnotationSuggestionComponent,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class CodeEditorComponent implements AfterViewInit, SafeStyle, OnDestroy {
   @ViewChild("editor", { static: true }) editorElement!: ElementRef;
diff --git a/frontend/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts b/frontend/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts
index 153ee98f742..fc852bdfa19 100644
--- a/frontend/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts
+++ b/frontend/src/app/workspace/component/codearea-custom-template/codearea-custom-template.component.ts
@@ -24,6 +24,11 @@ import { CodeEditorComponent } from "../code-editor-dialog/code-editor.component
 import { CoeditorPresenceService } from "../../service/workflow-graph/model/coeditor-presence.service";
 import { CodeEditorService } from "../../service/code-editor/code-editor.service";
 import { WorkflowActionService } from "../../service/workflow-graph/model/workflow-action.service";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NgClass, NgIf } from "@angular/common";
 
 /**
  * CodeareaCustomTemplateComponent is the custom template for 'codearea' type of formly field.
@@ -36,7 +41,14 @@ import { WorkflowActionService } from "../../service/workflow-graph/model/workfl
   selector: "texera-codearea-custom-template",
   templateUrl: "codearea-custom-template.component.html",
   styleUrls: ["codearea-custom-template.component.scss"],
-  standalone: false,
+  imports: [
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NgClass,
+    NgIf,
+  ],
 })
 export class CodeareaCustomTemplateComponent extends FieldType<FieldTypeConfig> implements OnInit, OnDestroy {
   componentRef: ComponentRef<CodeEditorComponent> | undefined;
diff --git a/frontend/src/app/workspace/component/dataset-file-selector/dataset-file-selector.component.ts b/frontend/src/app/workspace/component/dataset-file-selector/dataset-file-selector.component.ts
index adea9c17c29..5de61b33860 100644
--- a/frontend/src/app/workspace/component/dataset-file-selector/dataset-file-selector.component.ts
+++ b/frontend/src/app/workspace/component/dataset-file-selector/dataset-file-selector.component.ts
@@ -24,11 +24,27 @@ import { WorkflowActionService } from "../../service/workflow-graph/model/workfl
 import { NzModalService } from "ng-zorro-antd/modal";
 import { DatasetSelectionModalComponent } from "../dataset-selection-modal/dataset-selection-modal.component";
 import { GuiConfigService } from "../../../common/service/gui-config.service";
+import { NgIf } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   templateUrl: "dataset-file-selector.component.html",
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzInputDirective,
+    FormsModule,
+    ReactiveFormsModule,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+  ],
 })
 export class DatasetFileSelectorComponent extends FieldType<FieldTypeConfig> {
   constructor(
diff --git a/frontend/src/app/workspace/component/dataset-selection-modal/dataset-selection-modal.component.ts b/frontend/src/app/workspace/component/dataset-selection-modal/dataset-selection-modal.component.ts
index fa3012d5867..7f70792f937 100644
--- a/frontend/src/app/workspace/component/dataset-selection-modal/dataset-selection-modal.component.ts
+++ b/frontend/src/app/workspace/component/dataset-selection-modal/dataset-selection-modal.component.ts
@@ -24,12 +24,33 @@ import { DatasetFileNode, getFullPathFromDatasetFileNode } from "../../../common
 import { DatasetVersion } from "../../../common/type/dataset";
 import { DashboardDataset } from "../../../dashboard/type/dashboard-dataset.interface";
 import { DatasetService } from "../../../dashboard/service/user/dataset/dataset.service";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
+import { FormsModule } from "@angular/forms";
+import { NgFor } from "@angular/common";
+import { UserDatasetVersionFiletreeComponent } from "../../../dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-filetree/user-dataset-version-filetree.component";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   templateUrl: "dataset-selection-modal.component.html",
   styleUrls: ["dataset-selection-modal.component.scss"],
-  standalone: false,
+  imports: [
+    NzRowDirective,
+    NzSpaceCompactItemDirective,
+    NzSelectComponent,
+    NzColDirective,
+    FormsModule,
+    NgFor,
+    NzOptionComponent,
+    UserDatasetVersionFiletreeComponent,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+  ],
 })
 export class DatasetSelectionModalComponent implements OnInit {
   private readonly data = inject(NZ_MODAL_DATA) as {
diff --git a/frontend/src/app/workspace/component/dataset-version-selector/dataset-version-selector.component.ts b/frontend/src/app/workspace/component/dataset-version-selector/dataset-version-selector.component.ts
index a28d5ea742c..de00bc41f6b 100644
--- a/frontend/src/app/workspace/component/dataset-version-selector/dataset-version-selector.component.ts
+++ b/frontend/src/app/workspace/component/dataset-version-selector/dataset-version-selector.component.ts
@@ -22,11 +22,27 @@ import { FieldType, FieldTypeConfig } from "@ngx-formly/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { NzModalService } from "ng-zorro-antd/modal";
 import { DatasetSelectionModalComponent } from "../dataset-selection-modal/dataset-selection-modal.component";
+import { NgIf } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   templateUrl: "dataset-version-selector.component.html",
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzInputDirective,
+    FormsModule,
+    ReactiveFormsModule,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+  ],
 })
 export class DatasetVersionSelectorComponent extends FieldType<FieldTypeConfig> {
   constructor(private modalService: NzModalService) {
diff --git a/frontend/src/app/workspace/component/left-panel/left-panel.component.ts b/frontend/src/app/workspace/component/left-panel/left-panel.component.ts
index a0bd9989c1c..ab5e32684b6 100644
--- a/frontend/src/app/workspace/component/left-panel/left-panel.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/left-panel.component.ts
@@ -19,8 +19,8 @@
 
 import { AfterViewInit, Component, ElementRef, HostListener, OnDestroy, OnInit, Type, ViewChild } from "@angular/core";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { NzResizeEvent } from "ng-zorro-antd/resizable";
-import { CdkDragDrop, moveItemInArray } from "@angular/cdk/drag-drop";
+import { NzResizeEvent, NzResizableDirective, NzResizeHandlesComponent } from "ng-zorro-antd/resizable";
+import { CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
 import { OperatorMenuComponent } from "./operator-menu/operator-menu.component";
 import { VersionsListComponent } from "./versions-list/versions-list.component";
 import { WorkflowExecutionHistoryComponent } from "../../../dashboard/component/user/user-workflow/ngbd-modal-workflow-executions/workflow-execution-history.component";
@@ -29,13 +29,40 @@ import { SettingsComponent } from "./settings/settings.component";
 import { calculateTotalTranslate3d } from "../../../common/util/panel-dock";
 import { PanelService } from "../../service/panel/panel.service";
 import { GuiConfigService } from "../../../common/service/gui-config.service";
+import { NzMenuDirective, NzMenuItemComponent, NzMenuDividerDirective } from "ng-zorro-antd/menu";
+import { NgClass, NgIf, NgFor, NgComponentOutlet } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { FormlyRepeatDndComponent } from "../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-left-panel",
   templateUrl: "left-panel.component.html",
   styleUrls: ["left-panel.component.scss"],
-  standalone: false,
+  imports: [
+    NzMenuDirective,
+    CdkDropList,
+    NgClass,
+    NgIf,
+    NzMenuItemComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzMenuDividerDirective,
+    NgFor,
+    CdkDrag,
+    NzTooltipDirective,
+    NzResizableDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    CdkDragHandle,
+    NgComponentOutlet,
+    NzResizeHandlesComponent,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class LeftPanelComponent implements OnDestroy, OnInit, AfterViewInit {
   @ViewChild("content") content!: ElementRef<HTMLDivElement>;
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-label/operator-label.component.ts b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-label/operator-label.component.ts
index 911e93fce19..56eba9d7d24 100644
--- a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-label/operator-label.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-label/operator-label.component.ts
@@ -23,13 +23,15 @@ import { AfterContentInit, Component, Input } from "@angular/core";
 import { OperatorSchema } from "../../../../types/operator-schema.interface";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { Point } from "../../../../types/workflow-common.interface";
+import { CdkDropList, CdkDrag, CdkDragPreview } from "@angular/cdk/drag-drop";
+import { NgClass } from "@angular/common";
 
 @UntilDestroy()
 @Component({
   selector: "texera-operator-label",
   templateUrl: "operator-label.component.html",
   styleUrls: ["operator-label.component.scss"],
-  standalone: false,
+  imports: [CdkDropList, CdkDrag, NgClass, CdkDragPreview],
 })
 export class OperatorLabelComponent implements AfterContentInit {
   @Input() operator?: OperatorSchema;
diff --git a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts
index 4f6f4b3049b..ed172ae5d13 100644
--- a/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/operator-menu/operator-menu.component.ts
@@ -25,14 +25,36 @@ import { DragDropService } from "../../../service/drag-drop/drag-drop.service";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { WorkflowUtilService } from "../../../service/workflow-graph/util/workflow-util.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { NzAutocompleteOptionComponent } from "ng-zorro-antd/auto-complete";
+import {
+  NzAutocompleteOptionComponent,
+  NzAutocompleteTriggerDirective,
+  NzAutocompleteComponent,
+} from "ng-zorro-antd/auto-complete";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NgFor, NgTemplateOutlet } from "@angular/common";
+import { OperatorLabelComponent } from "./operator-label/operator-label.component";
+import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
 
 @UntilDestroy()
 @Component({
   selector: "texera-operator-menu",
   templateUrl: "operator-menu.component.html",
   styleUrls: ["operator-menu.component.scss"],
-  standalone: false,
+  imports: [
+    NzSpaceCompactItemDirective,
+    NzInputDirective,
+    FormsModule,
+    NzAutocompleteTriggerDirective,
+    NzAutocompleteComponent,
+    NgFor,
+    NzAutocompleteOptionComponent,
+    OperatorLabelComponent,
+    NgTemplateOutlet,
+    NzCollapseComponent,
+    NzCollapsePanelComponent,
+  ],
 })
 export class OperatorMenuComponent {
   public opList = new Map<string, Array<OperatorSchema>>();
diff --git a/frontend/src/app/workspace/component/left-panel/settings/settings.component.ts b/frontend/src/app/workspace/component/left-panel/settings/settings.component.ts
index 72a41684ac9..e70761916e9 100644
--- a/frontend/src/app/workspace/component/left-panel/settings/settings.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/settings/settings.component.ts
@@ -18,20 +18,22 @@
  */
 
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { FormBuilder, FormGroup, Validators, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { WorkflowPersistService } from "src/app/common/service/workflow-persist/workflow-persist.service";
 import { UserService } from "../../../../common/service/user/user.service";
 import { NotificationService } from "src/app/common/service/notification/notification.service";
 import { ExecutionMode } from "../../../../common/type/workflow";
+import { NzRadioGroupComponent, NzRadioComponent } from "ng-zorro-antd/radio";
+import { NgClass, NgIf } from "@angular/common";
 
 @UntilDestroy()
 @Component({
   selector: "texera-settings",
   templateUrl: "./settings.component.html",
   styleUrls: ["./settings.component.scss"],
-  standalone: false,
+  imports: [FormsModule, ReactiveFormsModule, NzRadioGroupComponent, NzRadioComponent, NgClass, NgIf],
 })
 export class SettingsComponent implements OnInit {
   settingsForm: FormGroup;
diff --git a/frontend/src/app/workspace/component/left-panel/time-travel/time-travel.component.ts b/frontend/src/app/workspace/component/left-panel/time-travel/time-travel.component.ts
index 8c4be2e8a62..16b802b7f06 100644
--- a/frontend/src/app/workspace/component/left-panel/time-travel/time-travel.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/time-travel/time-travel.component.ts
@@ -32,13 +32,34 @@ import { Observable, timer } from "rxjs";
 import { map } from "rxjs/operators";
 import { ReplayExecutionInfo } from "../../../types/workflow-websocket.interface";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
+import { NgIf, NgFor, DatePipe } from "@angular/common";
+import {
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzCellAlignDirective,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
 
 @UntilDestroy()
 @Component({
   selector: "texera-time-travel",
   templateUrl: "time-travel.component.html",
   styleUrls: ["time-travel.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzCellAlignDirective,
+    NzTbodyComponent,
+    NgFor,
+    DatePipe,
+  ],
 })
 export class TimeTravelComponent implements OnInit, OnDestroy {
   interactionHistories: { [eid: number]: string[] } = {};
diff --git a/frontend/src/app/workspace/component/left-panel/versions-list/versions-list.component.ts b/frontend/src/app/workspace/component/left-panel/versions-list/versions-list.component.ts
index b892a9eaf86..7aca366a9d6 100644
--- a/frontend/src/app/workspace/component/left-panel/versions-list/versions-list.component.ts
+++ b/frontend/src/app/workspace/component/left-panel/versions-list/versions-list.component.ts
@@ -23,13 +23,43 @@ import { WorkflowActionService } from "../../../service/workflow-graph/model/wor
 import { WorkflowVersionService } from "../../../../dashboard/service/user/workflow-version/workflow-version.service";
 import { WorkflowVersionCollapsableEntry } from "../../../../dashboard/type/workflow-version-entry";
 import { ActivatedRoute } from "@angular/router";
+import { NgIf, NgFor, NgClass, DatePipe } from "@angular/common";
+import {
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzCellAlignDirective,
+  NzTbodyComponent,
+  NzTdAddOnComponent,
+} from "ng-zorro-antd/table";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
 
 @UntilDestroy()
 @Component({
   selector: "texera-version-list",
   templateUrl: "versions-list.component.html",
   styleUrls: ["versions-list.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NgFor,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzCellAlignDirective,
+    NzTbodyComponent,
+    NgClass,
+    NzTdAddOnComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    DatePipe,
+  ],
 })
 export class VersionsListComponent implements OnInit {
   public versionsList: WorkflowVersionCollapsableEntry[] | undefined;
diff --git a/frontend/src/app/workspace/component/menu/coeditor-user-icon/coeditor-user-icon.component.ts b/frontend/src/app/workspace/component/menu/coeditor-user-icon/coeditor-user-icon.component.ts
index d60cda9a95d..c3811e3c03a 100644
--- a/frontend/src/app/workspace/component/menu/coeditor-user-icon/coeditor-user-icon.component.ts
+++ b/frontend/src/app/workspace/component/menu/coeditor-user-icon/coeditor-user-icon.component.ts
@@ -20,6 +20,11 @@
 import { Component, Input } from "@angular/core";
 import { Coeditor, Role } from "../../../../common/type/user";
 import { CoeditorPresenceService } from "../../../service/workflow-graph/model/coeditor-presence.service";
+import { UserAvatarComponent } from "../../../../dashboard/component/user/user-avatar/user-avatar.component";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NgIf } from "@angular/common";
 
 /**
  * CoeditorUserIconComponent is the user icon of a co-editor.
@@ -31,7 +36,15 @@ import { CoeditorPresenceService } from "../../../service/workflow-graph/model/c
   selector: "texera-coeditor-user-icon",
   templateUrl: "coeditor-user-icon.component.html",
   styleUrls: ["coeditor-user-icon.component.css"],
-  standalone: false,
+  imports: [
+    UserAvatarComponent,
+    ɵNzTransitionPatchDirective,
+    NzDropdownDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NgIf,
+    NzMenuItemComponent,
+  ],
 })
 export class CoeditorUserIconComponent {
   @Input() coeditor: Coeditor = {
diff --git a/frontend/src/app/workspace/component/menu/menu.component.html b/frontend/src/app/workspace/component/menu/menu.component.html
index 8b2fcd3513e..a21e4d56429 100644
--- a/frontend/src/app/workspace/component/menu/menu.component.html
+++ b/frontend/src/app/workspace/component/menu/menu.component.html
@@ -82,7 +82,7 @@
       <texera-user-icon></texera-user-icon>
     </div>
     <div id="button-groups">
-      <nz-button-group
+      <nz-space-compact
         id="user-buttons"
         *ngIf="!displayParticularWorkflowVersion">
         <a [routerLink]="DASHBOARD_USER_WORKFLOW">
@@ -149,9 +149,9 @@
             nz-icon
             nzType="info-circle"></i>
         </button>
-      </nz-button-group>
+      </nz-space-compact>
       <ng-template #utilities>
-        <nz-button-group>
+        <nz-space-compact>
           <button
             nz-dropdown
             [nzDropdownMenu]="menu"
@@ -339,7 +339,7 @@
               nz-icon
               nzType="redo"></i>
           </button>
-        </nz-button-group>
+        </nz-space-compact>
       </ng-template>
       <nz-dropdown-menu #menu="nzDropdownMenu">
         <ng-template [ngTemplateOutlet]="utilities"></ng-template>
@@ -360,7 +360,7 @@
           nzType="ellipsis"></i>
       </button>
 
-      <nz-button-group id="execution-buttons">
+      <nz-space-compact id="execution-buttons">
         <texera-computing-unit-selection id="texera-compute-unit-selection"> </texera-computing-unit-selection>
         <button
           nz-button
@@ -452,7 +452,7 @@
           </ng-template>
         </div>
         <div style="color: #007bff; line-height: 32px">{{ executionDuration | date: 'H:mm:ss': 'UTC' }}</div>
-      </nz-button-group>
+      </nz-space-compact>
     </div>
   </div>
 </div>
diff --git a/frontend/src/app/workspace/component/menu/menu.component.ts b/frontend/src/app/workspace/component/menu/menu.component.ts
index 2f687b233b0..6375fbcee4e 100644
--- a/frontend/src/app/workspace/component/menu/menu.component.ts
+++ b/frontend/src/app/workspace/component/menu/menu.component.ts
@@ -17,9 +17,9 @@
  * under the License.
  */
 
-import { DatePipe, Location } from "@angular/common";
+import { DatePipe, Location, NgIf, NgFor, NgTemplateOutlet } from "@angular/common";
 import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
-import { Router } from "@angular/router";
+import { Router, RouterLink } from "@angular/router";
 import { UserService } from "../../../common/service/user/user.service";
 import {
   DEFAULT_WORKFLOW_NAME,
@@ -38,7 +38,7 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { WorkflowUtilService } from "../../service/workflow-graph/util/workflow-util.service";
 import { WorkflowVersionService } from "../../../dashboard/service/user/workflow-version/workflow-version.service";
 import { UserProjectService } from "../../../dashboard/service/user/project/user-project.service";
-import { NzUploadFile } from "ng-zorro-antd/upload";
+import { NzUploadFile, NzUploadComponent } from "ng-zorro-antd/upload";
 import { saveAs } from "file-saver";
 import { NotificationService } from "src/app/common/service/notification/notification.service";
 import { OperatorMenuService } from "../../service/operator-menu/operator-menu.service";
@@ -58,6 +58,22 @@ import { GuiConfigService } from "../../../common/service/gui-config.service";
 import { DashboardWorkflowComputingUnit } from "../../../common/type/workflow-computing-unit";
 import { Privilege } from "../../../dashboard/type/share-access.interface";
 import { MarkdownDescriptionComponent } from "../../../dashboard/component/user/markdown-description/markdown-description.component";
+import { NzSpaceCompactItemDirective, NzSpaceCompactComponent } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzAvatarComponent } from "ng-zorro-antd/avatar";
+import { FormsModule } from "@angular/forms";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { CoeditorUserIconComponent } from "./coeditor-user-icon/coeditor-user-icon.component";
+import { UserIconComponent } from "../../../dashboard/component/user/user-icon/user-icon.component";
+import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NzCheckboxComponent } from "ng-zorro-antd/checkbox";
+import { NzPopoverDirective } from "ng-zorro-antd/popover";
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
+import { NzBadgeComponent } from "ng-zorro-antd/badge";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
 
 /**
  * MenuComponent is the top level menu bar that shows
@@ -79,7 +95,34 @@ import { MarkdownDescriptionComponent } from "../../../dashboard/component/user/
   selector: "texera-menu",
   templateUrl: "menu.component.html",
   styleUrls: ["menu.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzAvatarComponent,
+    FormsModule,
+    NzWaveDirective,
+    NgFor,
+    CoeditorUserIconComponent,
+    UserIconComponent,
+    RouterLink,
+    NzUploadComponent,
+    NzDropdownDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NzMenuItemComponent,
+    NzCheckboxComponent,
+    NgTemplateOutlet,
+    ComputingUnitSelectionComponent,
+    NzPopoverDirective,
+    NzSwitchComponent,
+    NzBadgeComponent,
+    NzTooltipDirective,
+    DatePipe,
+    NzSpaceCompactComponent,
+  ],
 })
 export class MenuComponent implements OnInit, OnDestroy {
   public executionState: ExecutionState; // set this to true when the workflow is started
diff --git a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts
index 7d4712c1652..a8723e04b0c 100644
--- a/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts
+++ b/frontend/src/app/workspace/component/power-button/computing-unit-selection.component.ts
@@ -30,7 +30,7 @@ import { isDefined } from "../../../common/util/predicate";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { extractErrorMessage } from "../../../common/util/error";
 import { ComputingUnitStatusService } from "../../../common/service/computing-unit/computing-unit-status/computing-unit-status.service";
-import { NzModalService } from "ng-zorro-antd/modal";
+import { NzModalService, NzModalComponent, NzModalContentDirective } from "ng-zorro-antd/modal";
 import { WorkflowExecutionsService } from "../../../dashboard/service/user/workflow-executions/workflow-executions.service";
 import { WorkflowExecutionsEntry } from "../../../dashboard/type/workflow-executions-entry";
 import { ExecutionState } from "../../types/execute-workflow.interface";
@@ -57,6 +57,25 @@ import {
   getJvmMemorySliderConfig,
 } from "../../../common/util/computing-unit.util";
 import { PvePackageResponse, WorkflowPveService } from "../../service/virtual-environment/virtual-environment.service";
+import { NgClass, NgIf, NgFor, DecimalPipe, TitleCasePipe } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzPopoverDirective } from "ng-zorro-antd/popover";
+import { NzProgressComponent } from "ng-zorro-antd/progress";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { UserAvatarComponent } from "../../../dashboard/component/user/user-avatar/user-avatar.component";
+import { NzBadgeComponent } from "ng-zorro-antd/badge";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzMenuDirective, NzMenuItemComponent, NzMenuDividerDirective } from "ng-zorro-antd/menu";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
+import { FormsModule } from "@angular/forms";
+import { NzSliderComponent } from "ng-zorro-antd/slider";
+import { NzAlertComponent } from "ng-zorro-antd/alert";
+import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
 
 type PveDraft = {
   name: string;
@@ -73,7 +92,38 @@ type PveDraft = {
   selector: "texera-computing-unit-selection",
   templateUrl: "./computing-unit-selection.component.html",
   styleUrls: ["./computing-unit-selection.component.scss"],
-  standalone: false,
+  imports: [
+    NgClass,
+    NgIf,
+    ɵNzTransitionPatchDirective,
+    NzPopoverDirective,
+    NzProgressComponent,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    NzDropdownDirective,
+    UserAvatarComponent,
+    NzBadgeComponent,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NgFor,
+    NzMenuItemComponent,
+    NzInputDirective,
+    NzMenuDividerDirective,
+    NzModalComponent,
+    NzSelectComponent,
+    FormsModule,
+    NzOptionComponent,
+    NzSliderComponent,
+    NzAlertComponent,
+    NzModalContentDirective,
+    NzCollapseComponent,
+    NzCollapsePanelComponent,
+    DecimalPipe,
+    TitleCasePipe,
+  ],
 })
 export class ComputingUnitSelectionComponent implements OnInit {
   // variables for creating a virtual environment
diff --git a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts
index da62034ed85..c7ab561f403 100644
--- a/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts
+++ b/frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.ts
@@ -21,8 +21,8 @@ import { ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, Simp
 import { ExecuteWorkflowService } from "../../../service/execute-workflow/execute-workflow.service";
 import { WorkflowStatusService } from "../../../service/workflow-status/workflow-status.service";
 import { Subject } from "rxjs";
-import { AbstractControl, FormGroup } from "@angular/forms";
-import { FormlyFieldConfig, FormlyFormOptions } from "@ngx-formly/core";
+import { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { FormlyFieldConfig, FormlyFormOptions, FormlyModule } from "@ngx-formly/core";
 import Ajv from "ajv";
 import { FormlyJsonschema } from "@ngx-formly/core/json-schema";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
@@ -45,7 +45,10 @@ import {
   setChildTypeDependency,
   setHideExpression,
 } from "src/app/common/formly/formly-utils";
-import { TYPE_CASTING_OPERATOR_TYPE } from "../typecasting-display/type-casting-display.component";
+import {
+  TYPE_CASTING_OPERATOR_TYPE,
+  TypeCastingDisplayComponent,
+} from "../typecasting-display/type-casting-display.component";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { filter } from "rxjs/operators";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
@@ -58,6 +61,15 @@ import * as Y from "yjs";
 import { OperatorSchema } from "src/app/workspace/types/operator-schema.interface";
 import { AttributeType, PortSchema } from "../../../types/workflow-compiling.interface";
 import { GuiConfigService } from "../../../../common/service/gui-config.service";
+import { NgIf } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzPopoverDirective } from "ng-zorro-antd/popover";
+import { NzFormDirective } from "ng-zorro-antd/form";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
 
 Quill.register("modules/cursors", QuillCursors);
 
@@ -82,7 +94,21 @@ Quill.register("modules/cursors", QuillCursors);
   selector: "texera-formly-form-frame",
   templateUrl: "./operator-property-edit-frame.component.html",
   styleUrls: ["./operator-property-edit-frame.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzPopoverDirective,
+    FormsModule,
+    NzFormDirective,
+    ReactiveFormsModule,
+    FormlyModule,
+    TypeCastingDisplayComponent,
+    NzWaveDirective,
+  ],
 })
 export class OperatorPropertyEditFrameComponent implements OnInit, OnChanges, OnDestroy {
   @Input() currentOperatorId?: string;
diff --git a/frontend/src/app/workspace/component/property-editor/port-property-edit-frame/port-property-edit-frame.component.ts b/frontend/src/app/workspace/component/property-editor/port-property-edit-frame/port-property-edit-frame.component.ts
index 1aedba669df..6825d25d044 100644
--- a/frontend/src/app/workspace/component/property-editor/port-property-edit-frame/port-property-edit-frame.component.ts
+++ b/frontend/src/app/workspace/component/property-editor/port-property-edit-frame/port-property-edit-frame.component.ts
@@ -24,8 +24,8 @@ import { createOutputFormChangeEventStream } from "../../../../common/formly/for
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { isEqual } from "lodash";
 import { CustomJSONSchema7 } from "../../../types/custom-json-schema.interface";
-import { FormlyFieldConfig, FormlyFormOptions } from "@ngx-formly/core";
-import { FormGroup } from "@angular/forms";
+import { FormlyFieldConfig, FormlyFormOptions, FormlyModule } from "@ngx-formly/core";
+import { FormGroup, FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { cloneDeep } from "lodash-es";
 import { FormlyJsonschema } from "@ngx-formly/core/json-schema";
 import { filter } from "rxjs/operators";
@@ -36,6 +36,12 @@ import Quill from "quill";
 import QuillCursors from "quill-cursors";
 import { mockPortSchema } from "../../../service/operator-metadata/mock-operator-metadata.data";
 import { DynamicSchemaService } from "../../../service/dynamic-schema/dynamic-schema.service";
+import { NgIf } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 Quill.register("modules/cursors", QuillCursors);
 
@@ -44,7 +50,17 @@ Quill.register("modules/cursors", QuillCursors);
   selector: "texera-port-property-edit-frame",
   templateUrl: "./port-property-edit-frame.component.html",
   styleUrls: ["./port-property-edit-frame.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    FormsModule,
+    ReactiveFormsModule,
+    FormlyModule,
+  ],
 })
 export class PortPropertyEditFrameComponent implements OnInit, OnChanges {
   @Input() currentPortID: LogicalPort | undefined;
diff --git a/frontend/src/app/workspace/component/property-editor/property-editor.component.ts b/frontend/src/app/workspace/component/property-editor/property-editor.component.ts
index ebf85d8b2c1..c868151f270 100644
--- a/frontend/src/app/workspace/component/property-editor/property-editor.component.ts
+++ b/frontend/src/app/workspace/component/property-editor/property-editor.component.ts
@@ -33,9 +33,18 @@ import { OperatorPropertyEditFrameComponent } from "./operator-property-edit-fra
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { filter } from "rxjs/operators";
 import { PortPropertyEditFrameComponent } from "./port-property-edit-frame/port-property-edit-frame.component";
-import { NzResizeEvent } from "ng-zorro-antd/resizable";
+import { NzResizeEvent, NzResizableDirective, NzResizeHandlesComponent } from "ng-zorro-antd/resizable";
 import { calculateTotalTranslate3d } from "../../../common/util/panel-dock";
 import { PanelService } from "../../service/panel/panel.service";
+import { NzMenuDirective, NzMenuItemComponent, NzMenuDividerDirective } from "ng-zorro-antd/menu";
+import { NgClass, NgIf, NgComponentOutlet } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { FormlyRepeatDndComponent } from "../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 /**
  * PropertyEditorComponent is the panel that allows user to edit operator properties.
@@ -48,7 +57,24 @@ import { PanelService } from "../../service/panel/panel.service";
   selector: "texera-property-editor",
   templateUrl: "property-editor.component.html",
   styleUrls: ["property-editor.component.scss"],
-  standalone: false,
+  imports: [
+    NzMenuDirective,
+    NgClass,
+    NgIf,
+    NzMenuItemComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzTooltipDirective,
+    CdkDrag,
+    NzResizableDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzMenuDividerDirective,
+    CdkDragHandle,
+    NgComponentOutlet,
+    NzResizeHandlesComponent,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class PropertyEditorComponent implements OnInit, OnDestroy {
   @ViewChild("contentWrapper") contentWrapperRef!: ElementRef;
diff --git a/frontend/src/app/workspace/component/property-editor/typecasting-display/type-casting-display.component.ts b/frontend/src/app/workspace/component/property-editor/typecasting-display/type-casting-display.component.ts
index 695cf528a88..3d99bbdea4c 100644
--- a/frontend/src/app/workspace/component/property-editor/typecasting-display/type-casting-display.component.ts
+++ b/frontend/src/app/workspace/component/property-editor/typecasting-display/type-casting-display.component.ts
@@ -23,6 +23,15 @@ import { WorkflowCompilingService } from "../../../service/compile-workflow/work
 import { filter, map } from "rxjs/operators";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { AttributeType, SchemaAttribute } from "../../../types/workflow-compiling.interface";
+import { NgIf, NgFor } from "@angular/common";
+import {
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzTbodyComponent,
+} from "ng-zorro-antd/table";
 
 // correspond to operator type specified in backend OperatorDescriptor
 export const TYPE_CASTING_OPERATOR_TYPE = "TypeCasting";
@@ -31,7 +40,16 @@ export const TYPE_CASTING_OPERATOR_TYPE = "TypeCasting";
 @Component({
   selector: "texera-type-casting-display",
   templateUrl: "./type-casting-display.component.html",
-  standalone: false,
+  imports: [
+    NgIf,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NzTbodyComponent,
+    NgFor,
+  ],
 })
 export class TypeCastingDisplayComponent implements OnInit, OnChanges {
   @Input() currentOperatorId: string | undefined;
diff --git a/frontend/src/app/workspace/component/result-exportation/result-exportation.component.ts b/frontend/src/app/workspace/component/result-exportation/result-exportation.component.ts
index ab30e4fa9e0..33abb625245 100644
--- a/frontend/src/app/workspace/component/result-exportation/result-exportation.component.ts
+++ b/frontend/src/app/workspace/component/result-exportation/result-exportation.component.ts
@@ -31,13 +31,54 @@ import { WorkflowResultService } from "../../service/workflow-result/workflow-re
 import { ComputingUnitStatusService } from "../../../common/service/computing-unit/computing-unit-status/computing-unit-status.service";
 import { DashboardWorkflowComputingUnit } from "../../../common/type/workflow-computing-unit";
 import { UserDatasetVersionCreatorComponent } from "../../../dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-version-creator/user-dataset-version-creator.component";
+import { NgIf, NgFor } from "@angular/common";
+import { NzAlertComponent } from "ng-zorro-antd/alert";
+import { FormsModule } from "@angular/forms";
+import { NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzFormControlComponent } from "ng-zorro-antd/form";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import {
+  NzAutocompleteTriggerDirective,
+  NzAutocompleteComponent,
+  NzAutocompleteOptionComponent,
+} from "ng-zorro-antd/auto-complete";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzDividerComponent } from "ng-zorro-antd/divider";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 @UntilDestroy()
 @Component({
   selector: "texera-result-exportation-modal",
   templateUrl: "./result-exportation.component.html",
   styleUrls: ["./result-exportation.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzAlertComponent,
+    FormsModule,
+    NzFormDirective,
+    NzRowDirective,
+    NzColDirective,
+    NzFormItemComponent,
+    NzFormLabelComponent,
+    NzFormControlComponent,
+    NzSpaceCompactItemDirective,
+    NzSelectComponent,
+    NzOptionComponent,
+    NzInputDirective,
+    NzAutocompleteTriggerDirective,
+    NzAutocompleteComponent,
+    NgFor,
+    NzAutocompleteOptionComponent,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzDividerComponent,
+    NzIconDirective,
+  ],
 })
 export class ResultExportationComponent implements OnInit {
   /* Two sources can trigger this dialog, one from context-menu
diff --git a/frontend/src/app/workspace/component/result-panel/console-frame/console-frame.component.ts b/frontend/src/app/workspace/component/result-panel/console-frame/console-frame.component.ts
index b3df547bcd6..a452ba7a037 100644
--- a/frontend/src/app/workspace/component/result-panel/console-frame/console-frame.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/console-frame/console-frame.component.ts
@@ -29,13 +29,60 @@ import { isDefined } from "../../../../common/util/predicate";
 import { WorkflowWebsocketService } from "../../../service/workflow-websocket/workflow-websocket.service";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
 import { UdfDebugService } from "../../../service/operator-debug/udf-debug.service";
+import { NzDropdownADirective, NzDropdownDirective, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NzSwitchComponent } from "ng-zorro-antd/switch";
+import { FormsModule } from "@angular/forms";
+import { NzListComponent, NzListItemComponent } from "ng-zorro-antd/list";
+import { NgFor, NgIf, DatePipe } from "@angular/common";
+import { NzRowDirective, NzColDirective } from "ng-zorro-antd/grid";
+import { NzBadgeComponent } from "ng-zorro-antd/badge";
+import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
+import { NzTagComponent } from "ng-zorro-antd/tag";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputGroupComponent, NzInputDirective } from "ng-zorro-antd/input";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzSelectComponent, NzOptionComponent } from "ng-zorro-antd/select";
 
 @UntilDestroy()
 @Component({
   selector: "texera-console-frame",
   templateUrl: "./console-frame.component.html",
   styleUrls: ["./console-frame.component.scss"],
-  standalone: false,
+  imports: [
+    NzDropdownADirective,
+    NzDropdownDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzDropdownMenuComponent,
+    NzMenuDirective,
+    NzMenuItemComponent,
+    NzSwitchComponent,
+    FormsModule,
+    NzListComponent,
+    NgFor,
+    NzListItemComponent,
+    NzRowDirective,
+    NzColDirective,
+    NzBadgeComponent,
+    NgIf,
+    NzCollapseComponent,
+    NzCollapsePanelComponent,
+    NzTagComponent,
+    NzSpaceCompactItemDirective,
+    NzInputGroupComponent,
+    NzButtonComponent,
+    NzWaveDirective,
+    NzTooltipDirective,
+    NzInputDirective,
+    NzSelectComponent,
+    NzOptionComponent,
+    DatePipe,
+  ],
 })
 export class ConsoleFrameComponent implements OnInit, OnChanges {
   @Input() operatorId!: string;
diff --git a/frontend/src/app/workspace/component/result-panel/error-frame/error-frame.component.ts b/frontend/src/app/workspace/component/result-panel/error-frame/error-frame.component.ts
index 4506faf9163..e90a5288db1 100644
--- a/frontend/src/app/workspace/component/result-panel/error-frame/error-frame.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/error-frame/error-frame.component.ts
@@ -23,13 +23,25 @@ import { UntilDestroy } from "@ngneat/until-destroy";
 import { WorkflowFatalError } from "../../../types/workflow-websocket.interface";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { WorkflowCompilingService } from "../../../service/compile-workflow/workflow-compiling.service";
+import { NgIf, NgFor, KeyValuePipe } from "@angular/common";
+import { NzCollapseComponent, NzCollapsePanelComponent } from "ng-zorro-antd/collapse";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 @UntilDestroy()
 @Component({
   selector: "texera-error-frame",
   templateUrl: "./error-frame.component.html",
   styleUrls: ["./error-frame.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NgFor,
+    NzCollapseComponent,
+    NzCollapsePanelComponent,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    KeyValuePipe,
+  ],
 })
 export class ErrorFrameComponent implements OnInit {
   @Input() operatorId?: string;
diff --git a/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts b/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts
index 1be755036a7..278a01dd5a7 100644
--- a/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-panel-modal.component.ts
@@ -22,6 +22,7 @@ import { NZ_MODAL_DATA, NzModalRef } from "ng-zorro-antd/modal";
 import { WorkflowResultService } from "../../service/workflow-result/workflow-result.service";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { PanelResizeService } from "../../service/workflow-result/panel-resize/panel-resize.service";
+import { NgxJsonViewerModule } from "ngx-json-viewer";
 
 /**
  *
@@ -41,7 +42,7 @@ import { PanelResizeService } from "../../service/workflow-result/panel-resize/p
   selector: "texera-row-modal-content",
   templateUrl: "./result-panel-modal.component.html",
   styleUrls: ["./result-panel-model.component.scss"],
-  standalone: false,
+  imports: [NgxJsonViewerModule],
 })
 export class RowModalComponent implements OnChanges {
   // Index of current displayed row in currentResult
diff --git a/frontend/src/app/workspace/component/result-panel/result-panel.component.ts b/frontend/src/app/workspace/component/result-panel/result-panel.component.ts
index 37ba8054e35..3260afb290d 100644
--- a/frontend/src/app/workspace/component/result-panel/result-panel.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-panel.component.ts
@@ -41,15 +41,24 @@ import { isPythonUdf, isSink } from "../../service/workflow-graph/model/workflow
 import { WorkflowVersionService } from "../../../dashboard/service/user/workflow-version/workflow-version.service";
 import { ErrorFrameComponent } from "./error-frame/error-frame.component";
 import { WorkflowConsoleService } from "../../service/workflow-console/workflow-console.service";
-import { NzResizeEvent } from "ng-zorro-antd/resizable";
+import { NzResizeEvent, NzResizableDirective, NzResizeHandlesComponent } from "ng-zorro-antd/resizable";
 import { VisualizationFrameContentComponent } from "../visualization-panel-content/visualization-frame-content.component";
 import { calculateTotalTranslate3d } from "../../../common/util/panel-dock";
 import { isDefined } from "../../../common/util/predicate";
-import { CdkDragEnd } from "@angular/cdk/drag-drop";
+import { CdkDragEnd, CdkDrag, CdkDragHandle } from "@angular/cdk/drag-drop";
 import { PanelService } from "../../service/panel/panel.service";
 import { WorkflowCompilingService } from "../../service/compile-workflow/workflow-compiling.service";
 import { CompilationState } from "../../types/workflow-compiling.interface";
 import { WorkflowFatalError } from "../../types/workflow-websocket.interface";
+import { NzMenuDirective, NzMenuItemComponent, NzMenuDividerDirective } from "ng-zorro-antd/menu";
+import { NgClass, NgIf, NgFor, NgComponentOutlet, KeyValuePipe } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzTooltipDirective } from "ng-zorro-antd/tooltip";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzTabsComponent, NzTabComponent } from "ng-zorro-antd/tabs";
+import { FormlyRepeatDndComponent } from "../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 export const DEFAULT_WIDTH = 800;
 export const DEFAULT_HEIGHT = 500;
@@ -62,7 +71,28 @@ export const DEFAULT_HEIGHT = 500;
   selector: "texera-result-panel",
   templateUrl: "./result-panel.component.html",
   styleUrls: ["./result-panel.component.scss"],
-  standalone: false,
+  imports: [
+    NzMenuDirective,
+    NgClass,
+    NgIf,
+    NzMenuItemComponent,
+    ɵNzTransitionPatchDirective,
+    NzTooltipDirective,
+    NzIconDirective,
+    NzMenuDividerDirective,
+    CdkDrag,
+    NzResizableDirective,
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    CdkDragHandle,
+    NzTabsComponent,
+    NzTabComponent,
+    NgFor,
+    NgComponentOutlet,
+    NzResizeHandlesComponent,
+    FormlyRepeatDndComponent,
+    KeyValuePipe,
+  ],
 })
 export class ResultPanelComponent implements OnInit, OnDestroy {
   @ViewChild("dynamicComponent")
diff --git a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
index e2d8e59857b..72a0dbbf72c 100644
--- a/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
+++ b/frontend/src/app/workspace/component/result-panel/result-table-frame/result-table-frame.component.ts
@@ -19,7 +19,16 @@
 
 import { ChangeDetectorRef, Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
 import { NzModalRef, NzModalService } from "ng-zorro-antd/modal";
-import { NzTableQueryParams } from "ng-zorro-antd/table";
+import {
+  NzTableQueryParams,
+  NzTableComponent,
+  NzTheadComponent,
+  NzTrDirective,
+  NzTableCellDirective,
+  NzThMeasureDirective,
+  NzTbodyComponent,
+  NzCellEllipsisDirective,
+} from "ng-zorro-antd/table";
 import { WorkflowActionService } from "../../../service/workflow-graph/model/workflow-action.service";
 import { WorkflowResultService } from "../../../service/workflow-result/workflow-result.service";
 import { PanelResizeService } from "../../../service/workflow-result/panel-resize/panel-resize.service";
@@ -31,6 +40,13 @@ import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
 import { ResultExportationComponent } from "../../result-exportation/result-exportation.component";
 import { WorkflowStatusService } from "../../../service/workflow-status/workflow-status.service";
 import { GuiConfigService } from "../../../../common/service/gui-config.service";
+import { NgIf, NgFor, NgClass } from "@angular/common";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputDirective } from "ng-zorro-antd/input";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 /**
  * The Component will display the result in an excel table format,
@@ -45,7 +61,24 @@ import { GuiConfigService } from "../../../../common/service/gui-config.service"
   selector: "texera-result-table-frame",
   templateUrl: "./result-table-frame.component.html",
   styleUrls: ["./result-table-frame.component.scss"],
-  standalone: false,
+  imports: [
+    NgIf,
+    NzSpaceCompactItemDirective,
+    NzInputDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    NzTableComponent,
+    NzTheadComponent,
+    NzTrDirective,
+    NgFor,
+    NzTableCellDirective,
+    NzThMeasureDirective,
+    NgClass,
+    NzTbodyComponent,
+    NzCellEllipsisDirective,
+  ],
 })
 export class ResultTableFrameComponent implements OnInit, OnChanges {
   @Input() operatorId?: string;
diff --git a/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.ts b/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.ts
index 477812b2d61..eb329c1c7f1 100644
--- a/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.ts
+++ b/frontend/src/app/workspace/component/visualization-panel-content/visualization-frame-content.component.ts
@@ -28,7 +28,6 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
   selector: "texera-visualization-panel-content",
   templateUrl: "./visualization-frame-content.component.html",
   styleUrls: ["./visualization-frame-content.component.scss"],
-  standalone: false,
 })
 export class VisualizationFrameContentComponent implements AfterContentInit {
   // operatorId: string = inject(NZ_MODAL_DATA).operatorId;
diff --git a/frontend/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts b/frontend/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts
index 914ae6a29d9..70fef55468b 100644
--- a/frontend/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts
+++ b/frontend/src/app/workspace/component/workflow-editor/comment-box-modal/nz-modal-comment-box.component.ts
@@ -25,15 +25,51 @@ import { UserService } from "src/app/common/service/user/user.service";
 import { NotificationService } from "../../../../common/service/notification/notification.service";
 import { User } from "src/app/common/type/user";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
-import { formatDate } from "@angular/common";
+import { formatDate, NgFor } from "@angular/common";
 import { YType } from "../../../types/shared-editing.interface";
+import {
+  NzListComponent,
+  NzListItemComponent,
+  NzListItemActionsComponent,
+  NzListItemActionComponent,
+} from "ng-zorro-antd/list";
+import { NzCommentComponent, NzCommentAvatarDirective, NzCommentContentDirective } from "ng-zorro-antd/comment";
+import { NzAvatarComponent } from "ng-zorro-antd/avatar";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzInputGroupComponent, NzInputDirective, NzAutosizeDirective } from "ng-zorro-antd/input";
+import { FormsModule } from "@angular/forms";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-nz-modal-comment-box",
   templateUrl: "./nz-modal-comment-box.component.html",
   styleUrls: ["./nz-modal-comment-box.component.scss"],
-  standalone: false,
+  imports: [
+    NzListComponent,
+    NgFor,
+    NzListItemComponent,
+    NzCommentComponent,
+    NzAvatarComponent,
+    NzCommentAvatarDirective,
+    NzCommentContentDirective,
+    ɵNzTransitionPatchDirective,
+    NzSpaceCompactItemDirective,
+    NzInputGroupComponent,
+    NzInputDirective,
+    FormsModule,
+    NzAutosizeDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    NzIconDirective,
+    NzListItemActionsComponent,
+    NzListItemActionComponent,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class NzModalCommentBoxComponent {
   readonly commentBox: YType<CommentBox> = inject(NZ_MODAL_DATA).commentBox;
diff --git a/frontend/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.ts b/frontend/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.ts
index 2dd0b67dee5..019f77f7afa 100644
--- a/frontend/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.ts
+++ b/frontend/src/app/workspace/component/workflow-editor/context-menu/context-menu/context-menu.component.ts
@@ -27,13 +27,17 @@ import { NzModalService } from "ng-zorro-antd/modal";
 import { ResultExportationComponent } from "../../../result-exportation/result-exportation.component";
 import { ValidationWorkflowService } from "src/app/workspace/service/validation/validation-workflow.service";
 import { GuiConfigService } from "../../../../../common/service/gui-config.service";
+import { NzMenuDirective, NzMenuItemComponent } from "ng-zorro-antd/menu";
+import { NgIf } from "@angular/common";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
 
 @UntilDestroy()
 @Component({
   selector: "texera-context-menu",
   templateUrl: "./context-menu.component.html",
   styleUrls: ["./context-menu.component.scss"],
-  standalone: false,
+  imports: [NzMenuDirective, NgIf, NzMenuItemComponent, ɵNzTransitionPatchDirective, NzIconDirective],
 })
 export class ContextMenuComponent {
   public isWorkflowModifiable: boolean = false;
diff --git a/frontend/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts b/frontend/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
index 57c26bf1526..447ab8d1f68 100644
--- a/frontend/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
+++ b/frontend/src/app/workspace/component/workflow-editor/mini-map/mini-map.component.ts
@@ -25,13 +25,27 @@ import * as joint from "jointjs";
 import { JointGraphWrapper } from "../../../service/workflow-graph/model/joint-graph-wrapper";
 import { PanelService } from "../../../service/panel/panel.service";
 import { CdkDrag } from "@angular/cdk/drag-drop";
+import { NzSpaceCompactItemDirective } from "ng-zorro-antd/space";
+import { NzButtonComponent } from "ng-zorro-antd/button";
+import { NzWaveDirective } from "ng-zorro-antd/core/wave";
+import { ɵNzTransitionPatchDirective } from "ng-zorro-antd/core/transition-patch";
+import { NzIconDirective } from "ng-zorro-antd/icon";
+import { FormlyRepeatDndComponent } from "../../../../common/formly/repeat-dnd/repeat-dnd.component";
 
 @UntilDestroy()
 @Component({
   selector: "texera-mini-map",
   templateUrl: "mini-map.component.html",
   styleUrls: ["mini-map.component.scss"],
-  standalone: false,
+  imports: [
+    NzSpaceCompactItemDirective,
+    NzButtonComponent,
+    NzWaveDirective,
+    ɵNzTransitionPatchDirective,
+    NzIconDirective,
+    CdkDrag,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class MiniMapComponent implements AfterViewInit, OnDestroy {
   @ViewChild("navigatorDrag", { static: false }) navigatorDrag!: CdkDrag;
diff --git a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
index fc6deeab85d..979f131ad3c 100644
--- a/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
+++ b/frontend/src/app/workspace/component/workflow-editor/workflow-editor.component.ts
@@ -35,7 +35,7 @@ import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { UndoRedoService } from "../../service/undo-redo/undo-redo.service";
 import { WorkflowVersionService } from "../../../dashboard/service/user/workflow-version/workflow-version.service";
 import { OperatorMenuService } from "../../service/operator-menu/operator-menu.service";
-import { NzContextMenuService } from "ng-zorro-antd/dropdown";
+import { NzContextMenuService, NzDropdownMenuComponent } from "ng-zorro-antd/dropdown";
 import { ActivatedRoute, Router } from "@angular/router";
 import * as _ from "lodash";
 import * as joint from "jointjs";
@@ -44,6 +44,10 @@ import { GuiConfigService } from "../../../common/service/gui-config.service";
 import { line, curveCatmullRomClosed } from "d3-shape";
 import concaveman from "concaveman";
 import { OperatorResultSummary, AgentService } from "../../service/agent/agent.service";
+import { NzNoAnimationDirective } from "ng-zorro-antd/core/animation";
+import { ContextMenuComponent } from "./context-menu/context-menu/context-menu.component";
+import { NgIf } from "@angular/common";
+import { AgentInteractionComponent } from "../agent/agent-interaction/agent-interaction.component";
 
 // jointjs interactive options for enabling and disabling interactivity
 // https://resources.jointjs.com/docs/jointjs/v3.2/joint.html#dia.Paper.prototype.options.interactive
@@ -84,7 +88,7 @@ export const MAIN_CANVAS = {
   selector: "texera-workflow-editor",
   templateUrl: "workflow-editor.component.html",
   styleUrls: ["workflow-editor.component.scss"],
-  standalone: false,
+  imports: [NzDropdownMenuComponent, NzNoAnimationDirective, ContextMenuComponent, NgIf, AgentInteractionComponent],
 })
 export class WorkflowEditorComponent implements OnInit, AfterViewInit, OnDestroy {
   editor!: HTMLElement;
diff --git a/frontend/src/app/workspace/component/workspace.component.ts b/frontend/src/app/workspace/component/workspace.component.ts
index 9b2b4a26bbe..9968c26f647 100644
--- a/frontend/src/app/workspace/component/workspace.component.ts
+++ b/frontend/src/app/workspace/component/workspace.component.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Location } from "@angular/common";
+import { Location, NgIf } from "@angular/common";
 import {
   AfterViewInit,
   ChangeDetectorRef,
@@ -52,6 +52,15 @@ import { WorkflowCompilingService } from "../service/compile-workflow/workflow-c
 import { DASHBOARD_USER_WORKSPACE } from "../../app-routing.constant";
 import { GuiConfigService } from "../../common/service/gui-config.service";
 import { checkIfWorkflowBroken } from "../../common/util/workflow-check";
+import { NzSpinComponent } from "ng-zorro-antd/spin";
+import { ResultPanelComponent } from "./result-panel/result-panel.component";
+import { WorkflowEditorComponent } from "./workflow-editor/workflow-editor.component";
+import { MenuComponent } from "./menu/menu.component";
+import { MiniMapComponent } from "./workflow-editor/mini-map/mini-map.component";
+import { LeftPanelComponent } from "./left-panel/left-panel.component";
+import { AgentPanelComponent } from "./agent/agent-panel/agent-panel.component";
+import { PropertyEditorComponent } from "./property-editor/property-editor.component";
+import { FormlyRepeatDndComponent } from "../../common/formly/repeat-dnd/repeat-dnd.component";
 
 export const SAVE_DEBOUNCE_TIME_IN_MS = 5000;
 
@@ -64,7 +73,18 @@ export const SAVE_DEBOUNCE_TIME_IN_MS = 5000;
     // uncomment this line for manual testing without opening backend server
     // { provide: OperatorMetadataService, useClass: StubOperatorMetadataService },
   ],
-  standalone: false,
+  imports: [
+    NzSpinComponent,
+    ResultPanelComponent,
+    WorkflowEditorComponent,
+    MenuComponent,
+    MiniMapComponent,
+    LeftPanelComponent,
+    NgIf,
+    AgentPanelComponent,
+    PropertyEditorComponent,
+    FormlyRepeatDndComponent,
+  ],
 })
 export class WorkspaceComponent implements AfterViewInit, OnInit, OnDestroy {
   public pid?: number = undefined;