diff --git a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
index 5bdb31437ee..9a280f921f1 100644
--- a/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
+++ b/core/amber/src/main/scala/edu/uci/ics/texera/web/resource/dashboard/admin/execution/AdminExecutionResource.scala
@@ -6,12 +6,13 @@ import edu.uci.ics.texera.web.auth.SessionUser
 import edu.uci.ics.texera.dao.jooq.generated.Tables._
 import edu.uci.ics.texera.web.resource.dashboard.admin.execution.AdminExecutionResource._
 import io.dropwizard.auth.Auth
+import org.jooq.impl.DSL
 import org.jooq.types.UInteger
 
 import javax.annotation.security.RolesAllowed
 import javax.ws.rs._
 import javax.ws.rs.core.MediaType
-import scala.jdk.CollectionConverters.IterableHasAsScala
+import scala.jdk.CollectionConverters._
 
 /**
   * This file handles various request related to saved-executions.
@@ -48,6 +49,25 @@ object AdminExecutionResource {
     }
   }
 
+  def mapToStatus(status: String): Int = {
+    status match {
+      case "READY"     => 0
+      case "RUNNING"   => 1
+      case "PAUSED"    => 2
+      case "COMPLETED" => 3
+      case "FAILED"    => 4
+      case "KILLED"    => 5
+      case _           => -1 // or throw an exception, depends on your needs
+    }
+  }
+
+  val sortFieldMapping = Map(
+    "workflow_name" -> WORKFLOW.NAME,
+    "execution_name" -> WORKFLOW_EXECUTIONS.NAME,
+    "initiator" -> USER.NAME,
+    "end_time" -> WORKFLOW_EXECUTIONS.LAST_UPDATE_TIME
+  )
+
 }
 
 @Produces(Array(MediaType.APPLICATION_JSON))
@@ -55,42 +75,104 @@ object AdminExecutionResource {
 @RolesAllowed(Array("ADMIN"))
 class AdminExecutionResource {
 
+  @GET
+  @Path("/totalWorkflow")
+  @Produces()
+  def getTotalWorkflows: Int = {
+    context
+      .select(
+        DSL.countDistinct(WORKFLOW.WID)
+      )
+      .from(WORKFLOW_EXECUTIONS)
+      .join(WORKFLOW_VERSION)
+      .on(WORKFLOW_EXECUTIONS.VID.eq(WORKFLOW_VERSION.VID))
+      .join(USER)
+      .on(WORKFLOW_EXECUTIONS.UID.eq(USER.UID))
+      .join(WORKFLOW)
+      .on(WORKFLOW.WID.eq(WORKFLOW_VERSION.WID))
+      .fetchOne(0, classOf[Int])
+  }
+
   /**
-    * This method retrieves all existing executions
+    * This method retrieves latest execution of each workflow for specified page.
+    * The returned executions are sorted and filtered according to the parameters.
     */
   @GET
-  @Path("/executionList")
+  @Path("/executionList/{pageSize}/{pageIndex}/{sortField}/{sortDirection}")
   @Produces(Array(MediaType.APPLICATION_JSON))
-  def listWorkflows(@Auth current_user: SessionUser): List[dashboardExecution] = {
-    val workflowEntries = context
+  def listWorkflows(
+      @Auth current_user: SessionUser,
+      @PathParam("pageSize") page_size: Int = 20,
+      @PathParam("pageIndex") page_index: Int = 0,
+      @PathParam("sortField") sortField: String = "end_time",
+      @PathParam("sortDirection") sortDirection: String = "desc",
+      @QueryParam("filter") filter: java.util.List[String]
+  ): List[dashboardExecution] = {
+    val filter_status = filter.asScala.map(mapToStatus).toSeq.filter(_ != -1).asJava
+
+    // Base query that retrieves latest execution info for each workflow without sorting and filtering.
+    // Only retrieving executions in current page according to pageSize and pageIndex parameters.
+    val executions_base_query = context
       .select(
         WORKFLOW_EXECUTIONS.UID,
         USER.NAME,
         WORKFLOW_VERSION.WID,
         WORKFLOW.NAME,
         WORKFLOW_EXECUTIONS.EID,
-        WORKFLOW_EXECUTIONS.VID,
         WORKFLOW_EXECUTIONS.STARTING_TIME,
         WORKFLOW_EXECUTIONS.LAST_UPDATE_TIME,
         WORKFLOW_EXECUTIONS.STATUS,
         WORKFLOW_EXECUTIONS.NAME
       )
       .from(WORKFLOW_EXECUTIONS)
-      .leftJoin(WORKFLOW_VERSION)
+      .join(WORKFLOW_VERSION)
       .on(WORKFLOW_EXECUTIONS.VID.eq(WORKFLOW_VERSION.VID))
-      .leftJoin(USER)
+      .join(USER)
       .on(WORKFLOW_EXECUTIONS.UID.eq(USER.UID))
-      .leftJoin(WORKFLOW)
+      .join(WORKFLOW)
       .on(WORKFLOW.WID.eq(WORKFLOW_VERSION.WID))
-      .fetch()
+      .naturalJoin(
+        context
+          .select(
+            DSL.max(WORKFLOW_EXECUTIONS.EID).as("eid")
+          )
+          .from(WORKFLOW_EXECUTIONS)
+          .join(WORKFLOW_VERSION)
+          .on(WORKFLOW_VERSION.VID.eq(WORKFLOW_EXECUTIONS.VID))
+          .groupBy(WORKFLOW_VERSION.WID)
+      )
+
+    // Apply filter if the status are not empty.
+    val executions_apply_filter = if (!filter_status.isEmpty) {
+      executions_base_query.where(WORKFLOW_EXECUTIONS.STATUS.in(filter_status))
+    } else {
+      executions_base_query
+    }
+
+    // Apply sorting if user specified.
+    var executions_apply_order =
+      executions_apply_filter.limit(page_size).offset(page_index * page_size)
+    if (sortField != "NO_SORTING") {
+      executions_apply_order = executions_apply_filter
+        .orderBy(
+          if (sortDirection == "desc") sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME).desc()
+          else sortFieldMapping.getOrElse(sortField, WORKFLOW.NAME).asc()
+        )
+        .limit(page_size)
+        .offset(page_index * page_size)
+    }
+
+    val executions = executions_apply_order.fetch()
 
+    // Retrieve the id of each workflow that the user has access to.
     val availableWorkflowIds = context
       .select(WORKFLOW_USER_ACCESS.WID)
       .from(WORKFLOW_USER_ACCESS)
       .where(WORKFLOW_USER_ACCESS.UID.eq(current_user.getUid))
       .fetchInto(classOf[UInteger])
 
-    workflowEntries
+    // Calculate the statistics needed for each execution.
+    executions
       .map(workflowRecord => {
         val startingTime =
           workflowRecord.get(WORKFLOW_EXECUTIONS.STARTING_TIME).getTime
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
index 115b5b339a2..66ebf1dbfcd 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.html
@@ -10,24 +10,42 @@
 
 <nz-table
   #basicTable
-  [nzData]="listOfExecutions">
+  nzShowSizeChanger
+  [nzScroll]="{y: '500px'}"
+  [nzData]="listOfExecutions"
+  [nzLoading]="isLoading"
+  [nzLoadingIndicator]="loadingTemplate"
+  [nzTemplateMode]="true"
+  [nzFrontPagination]="false"
+  [nzTotal]="totalWorkflows"
+  [nzPageSize]="pageSize"
+  [nzPageIndex]="currentPageIndex + 1"
+  [nzPageSizeOptions]="[5, 10, 20, 50]"
+  (nzQueryParams)="onQueryParamsChange($event)"
+  class="execution-table">
   <thead>
     <tr>
       <th
-        [nzSortFn]="sortByWorkflowName"
-        [nzSortDirections]="['ascend', 'descend']"
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('workflow_name', $event)"
         nzWidth="16%">
         Workflow (ID)
       </th>
       <th
-        [nzSortFn]="sortByExecutionName"
-        [nzSortDirections]="['ascend', 'descend']"
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('execution_name', $event)"
         nzWidth="16%">
         Execution Name (ID)
       </th>
       <th
-        [nzSortFn]="sortByInitiator"
-        [nzSortDirections]="['ascend', 'descend']"
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('initiator', $event)"
         nzWidth="12%">
         Initiator
       </th>
@@ -42,25 +60,28 @@
           { text: 'KILLED', value: 'KILLED'},
           { text: 'JUST COMPLETED', value: 'JUST COMPLETED'},
           { text: 'UNKNOWN', value: 'UNKNOWN'}]"
-        [nzFilterFn]="filterByStatus"
-        nzWidth="16%">
+        [nzFilterFn]="true"
+        (nzFilterChange)="onFilterChange($event)"
+        nzWidth="13%">
         Status
       </th>
       <th nzWidth="10%">Time Used (hh:mm:ss)</th>
       <th
-        [nzSortFn]="sortByCompletedTime"
-        [nzSortDirections]="['ascend', 'descend']"
-        nzWidth="15%">
+        [nzShowSort]="true"
+        [nzSortFn]="true"
+        [nzSortDirections]="['ascend', 'descend', null]"
+        (nzSortOrderChange)="onSortChange('end_time', $event)"
+        nzWidth="20%">
         End Time
       </th>
-      <th nzWidth="15%">Action</th>
+      <th nzWidth="13%">Action</th>
     </tr>
   </thead>
   <tbody>
     <tr *ngFor="let execution of basicTable.data">
       <td>
         <div *ngIf="execution.access; else normalWorkflowName">
-          <a href="/workflow/{{execution.workflowId}}">
+          <a href="/dashboard/user/workspace/{{execution.workflowId}}">
             {{ maxStringLength(execution.workflowName, 16) }} ({{ execution.workflowId }})
           </a>
         </div>
@@ -126,7 +147,7 @@
             nzType="redo"></i>
         </button>
         <button
-          (click)="clickToViewHistory(execution.workflowId)"
+          (click)="clickToViewHistory(execution.workflowId, execution.workflowName)"
           nz-button
           nz-tooltip="previous execution of the workflow: {{
                       execution.workflowName
@@ -141,3 +162,12 @@
     </tr>
   </tbody>
 </nz-table>
+
+<ng-template #loadingTemplate>
+  <div class="loading-container">
+    <nz-spin
+      nzTip="Loading..."
+      [nzSpinning]="true"
+      nzSize="large"></nz-spin>
+  </div>
+</ng-template>
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
new file mode 100644
index 00000000000..0fd92175e9c
--- /dev/null
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.scss
@@ -0,0 +1,12 @@
+.loading-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  height: 300px;
+}
+
+.execution-table {
+  display: block;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
diff --git a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
index 84da3db9e4f..315664ccf75 100644
--- a/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
+++ b/core/gui/src/app/dashboard/component/admin/execution/admin-execution.component.ts
@@ -2,64 +2,32 @@ 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, NzTableSortFn } from "ng-zorro-antd/table";
+import { NzTableFilterFn, NzTableQueryParams } 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 { Workflow } from "../../../../common/type/workflow";
 import { WorkflowWebsocketService } from "../../../../workspace/service/workflow-websocket/workflow-websocket.service";
-import { environment } from "../../../../../environments/environment";
+
+export const NO_SORT = "NO_SORTING";
 
 @UntilDestroy()
 @Component({
   templateUrl: "./admin-execution.component.html",
+  styleUrls: ["./admin-execution.component.scss"],
 })
 export class AdminExecutionComponent implements OnInit, OnDestroy {
-  Executions: ReadonlyArray<Execution> = [];
-  workflowsCount: number = 0;
-  listOfExecutions = [...this.Executions];
-  workflows: Array<Workflow> = [];
-  executionMap: Map<number, Execution> = new Map();
+  listOfExecutions: ReadonlyArray<Execution> = [];
+  isLoading: boolean = true;
+  totalWorkflows: number = 0;
+  pageSize: number = 5;
+  // CurrentPageIndex is 0-indexed, but pageIndex in HTML is 1-indexed.
+  currentPageIndex: number = 0;
+  sortField: string = NO_SORT;
+  sortDirection: string = NO_SORT;
+  filter: string[] = [];
 
-  // Set up an interval to periodically fetch and update execution data.
-  // This interval function fetches the latest execution list and checks for updates.
-  // If some execution's data has changed, it triggers a component refresh.
+  // This interval function fetches the latest execution list.
   // The interval runs every 1 second (1000 milliseconds).
-  timer = setInterval(() => {
-    this.adminExecutionService
-      .getExecutionList()
-      .pipe(untilDestroyed(this))
-      .subscribe(executionList => {
-        this.listOfExecutions.forEach((oldExecution, index) => {
-          const updatedExecution = executionList.find(execution => execution.executionId === oldExecution.executionId);
-          if (updatedExecution && this.dataCheck(this.listOfExecutions[index], updatedExecution)) {
-            this.ngOnInit();
-          } else if (!updatedExecution) {
-            this.ngOnInit();
-
-            // this if statement checks whether the workflow has no executions or the workflow has been deleted.
-            let check_execution = this.executionMap.get(oldExecution.workflowId);
-            if (check_execution && check_execution.executionId === oldExecution.executionId) {
-              this.executionMap.delete(oldExecution.workflowId);
-              this.listOfExecutions = [...this.executionMap.values()];
-            }
-          }
-        });
-
-        executionList.forEach(execution => {
-          if (this.executionMap.has(execution.workflowId)) {
-            let tempExecution = this.executionMap.get(execution.workflowId);
-            if (tempExecution) {
-              if (tempExecution.executionId < execution.executionId) {
-                this.ngOnInit();
-              }
-            }
-          } else if (!this.executionMap.has(execution.workflowId)) {
-            this.ngOnInit();
-          }
-        });
-        this.updateTimeDifferences();
-      });
-  }, 1000); // 1 second interval
+  timer = setInterval(() => this.ngOnInit(), 1000); // 1 second interval
 
   constructor(
     private adminExecutionService: AdminExecutionService,
@@ -68,14 +36,18 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.adminExecutionService
-      .getExecutionList()
+      .getExecutionList(this.pageSize, this.currentPageIndex, this.sortField, this.sortDirection, this.filter)
       .pipe(untilDestroyed(this))
       .subscribe(executionList => {
-        this.Executions = executionList;
-        this.listOfExecutions = [];
-        this.reset();
-        this.workflowsCount = this.listOfExecutions.length;
+        this.listOfExecutions = [...executionList];
+        this.updateTimeStatus();
+        this.isLoading = false;
       });
+
+    this.adminExecutionService
+      .getTotalWorkflows()
+      .pipe(untilDestroyed(this))
+      .subscribe(total => (this.totalWorkflows = total));
   }
 
   ngOnDestroy(): void {
@@ -105,42 +77,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  initWorkflows() {
-    for (let i = 0; i < this.listOfExecutions.length; i++) {
-      const execution = this.listOfExecutions[i];
-      let tempWorkflow: Workflow = {
-        content: {
-          operators: [],
-          operatorPositions: {},
-          links: [],
-          commentBoxes: [],
-          settings: { dataTransferBatchSize: environment.defaultDataTransferBatchSize },
-        },
-        name: execution.workflowName,
-        wid: execution.workflowId,
-        description: "",
-        creationTime: 0,
-        lastModifiedTime: 0,
-        isPublished: 0,
-        readonly: false,
-      };
-
-      this.workflows.push(tempWorkflow);
-    }
-  }
-
-  filterExecutions() {
-    for (let i = 0; i < this.Executions.length; i++) {
-      const execution = this.Executions[i];
-      this.executionMap.set(execution.workflowId, execution);
-    }
-    this.listOfExecutions = [...this.executionMap.values()];
-  }
-
-  reset() {
-    this.filterExecutions();
-    this.initWorkflows();
-
+  updateTimeStatus() {
     this.specifyCompletedStatus();
     this.updateTimeDifferences();
   }
@@ -246,18 +183,7 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     });
   };
 
-  clickToViewHistory(workflowId: number) {
-    let wid!: number;
-    let name!: string;
-    for (let i = 0; i < this.workflows.length; i++) {
-      const workflow = this.workflows[i];
-      if (workflow.wid == workflowId) {
-        wid = workflow.wid;
-        name = workflow.name;
-        break;
-      }
-    }
-
+  clickToViewHistory(wid: number, name: string) {
     this.modalService.create({
       nzContent: WorkflowExecutionHistoryComponent,
       nzData: { wid: wid },
@@ -301,11 +227,50 @@ export class AdminExecutionComponent implements OnInit, OnDestroy {
     // socket.closeWebsocket();
   }
 
-  public sortByWorkflowName: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
-    (b.workflowName || "").localeCompare(a.workflowName);
-  public sortByExecutionName: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
-    (b.executionName || "").localeCompare(a.executionName);
-  public sortByCompletedTime: NzTableSortFn<Execution> = (a: Execution, b: Execution) => b.endTime - a.endTime;
-  public sortByInitiator: NzTableSortFn<Execution> = (a: Execution, b: Execution) =>
-    (b.userName || "").localeCompare(a.userName);
+  /**
+   * Reorder the executions based on the selected field and order.
+   * The sorting function is implemented in the backend.
+   * @param sortField
+   * @param sortOrder
+   */
+  onSortChange(sortField: string, sortOrder: string | null): void {
+    if (sortField == this.sortField && sortOrder == null) {
+      this.sortField = NO_SORT;
+      this.sortDirection = NO_SORT;
+      this.ngOnInit();
+    } else if (sortOrder != null) {
+      this.sortField = sortField;
+      this.sortDirection = sortOrder === "descend" ? "desc" : "asc";
+      this.ngOnInit();
+    }
+  }
+
+  /**
+   * Function that displays executions in respond to page size and page index changes.
+   * @param params
+   */
+  onQueryParamsChange(params: NzTableQueryParams): void {
+    const { pageSize, pageIndex, sort, filter } = params;
+    if (pageSize != this.pageSize) {
+      this.pageSize = pageSize;
+      // If the user is at the last page, and increment the pageSize, move user to new last page index if necessary.
+      if (Math.ceil(this.totalWorkflows / pageSize) < this.currentPageIndex + 1) {
+        this.currentPageIndex = Math.ceil(this.totalWorkflows / pageSize) - 1;
+      }
+      this.ngOnInit();
+    } else if (pageIndex - 1 != this.currentPageIndex) {
+      this.currentPageIndex = pageIndex - 1;
+      this.ngOnInit();
+    }
+  }
+
+  /**
+   * Filter the executions based on the status user checked.
+   * The filtering function in implemented in the backend.
+   * @param filter
+   */
+  onFilterChange(filter: any[]): void {
+    this.filter = filter.map(item => String(item));
+    this.ngOnInit();
+  }
 }
diff --git a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
index 6b268316547..82cda727f6a 100644
--- a/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
+++ b/core/gui/src/app/dashboard/service/admin/execution/admin-execution.service.ts
@@ -1,4 +1,4 @@
-import { HttpClient } from "@angular/common/http";
+import { HttpClient, HttpParams } from "@angular/common/http";
 import { Injectable } from "@angular/core";
 import { Observable } from "rxjs";
 import { AppSettings } from "../../../../common/app-setting";
@@ -12,7 +12,21 @@ export const WORKFLOW_BASE_URL = `${AppSettings.getApiEndpoint()}/admin/executio
 export class AdminExecutionService {
   constructor(private http: HttpClient) {}
 
-  public getExecutionList(): Observable<ReadonlyArray<Execution>> {
-    return this.http.get<ReadonlyArray<Execution>>(`${WORKFLOW_BASE_URL}/executionList`);
+  public getExecutionList(
+    pageSize: number,
+    pageIndex: number,
+    sortField: string,
+    sortDirection: string,
+    filter: string[]
+  ): Observable<ReadonlyArray<Execution>> {
+    const params = new HttpParams().set("filter", filter.join(","));
+    return this.http.get<ReadonlyArray<Execution>>(
+      `${WORKFLOW_BASE_URL}/executionList/${pageSize}/${pageIndex}/${sortField}/${sortDirection}`,
+      { params }
+    );
+  }
+
+  public getTotalWorkflows(): Observable<number> {
+    return this.http.get<number>(`${WORKFLOW_BASE_URL}/totalWorkflow`);
   }
 }