diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
index 7152cd6a44..a941cb9600 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.effects.ts
@@ -14,6 +14,7 @@ import {
   selectSortKey,
   selectSortAs,
   selectSearchString,
+  selectIsAllFlagsFetched,
 } from './feature-flags.selectors';
 import { DialogService } from '../../../shared/services/common-dialog.service';
 
@@ -36,9 +37,12 @@ export class FeatureFlagsEffects {
         this.store$.pipe(select(selectTotalFlags)),
         this.store$.pipe(select(selectSearchKey)),
         this.store$.pipe(select(selectSortKey)),
-        this.store$.pipe(select(selectSortAs))
+        this.store$.pipe(select(selectSortAs)),
+        this.store$.pipe(select(selectIsAllFlagsFetched))
       ),
-      filter(([fromStarting, skip, total]) => skip < total || total === null || fromStarting),
+      filter(([fromStarting, skip, total, searchKey, sortKey, sortAs, isAllFlagsFetched]) => {
+        return !isAllFlagsFetched || skip < total || total === null || fromStarting;
+      }),
       tap(() => {
         this.store$.dispatch(FeatureFlagsActions.actionSetIsLoadingFeatureFlags({ isLoadingFeatureFlags: true }));
       }),
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
index ab066d0e39..1aed40b758 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.reducer.ts
@@ -26,11 +26,6 @@ export const initialState: FeatureFlagState = adapter.getInitialState({
 
 const reducer = createReducer(
   initialState,
-  // Feature Flags Fetching Actions
-  on(FeatureFlagsActions.actionFetchFeatureFlags, (state) => ({
-    ...state,
-    isLoadingFeatureFlags: true,
-  })),
   on(FeatureFlagsActions.actionFetchFeatureFlagsSuccess, (state, { flags, totalFlags }) => {
     const newState: FeatureFlagState = {
       ...state,
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html
index b8686c982d..0c5c75b090 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.html
@@ -1,5 +1,5 @@
 <div class="flags-list-container">
-  <div scroll (scrolled)="fetchFlagsOnScroll()" class="flags-list-table-container" #tableContainer>
+  <div (wheel)="fetchFlagsOnScroll()" class="flags-list-table-container" #tableContainer>
     <mat-progress-bar class="spinner" mode="indeterminate" *ngIf="isLoading$ | async"></mat-progress-bar>
     <table
       class="flags-list"
@@ -25,11 +25,7 @@
             {{ flag.name }}
           </a>
           <ng-template #flagNameEllipsis>
-            <span
-              [matTooltip]="flag.name"
-              class="flag-name"
-              matTooltipPosition="above"
-            >
+            <span [matTooltip]="flag.name" class="flag-name" matTooltipPosition="above">
               {{ flag.name | truncate: 30 }}
             </span>
           </ng-template>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss
index 8fdac06e2b..99ce987b01 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.scss
@@ -7,6 +7,10 @@
     margin-top: 8px;
     overflow: auto;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
     .spinner {
       position: sticky;
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
index a14bc2456d..f687a0de1a 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-section-card/feature-flag-root-section-card-table/feature-flag-root-section-card-table.component.ts
@@ -1,5 +1,7 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit, ViewChild } from '@angular/core';
 import { Observable } from 'rxjs';
+
+import { ChangeDetectionStrategy, Component, Input, OnInit, ViewChild } from '@angular/core';
+
 import {
   FLAG_ROOT_COLUMN_NAMES,
   FLAG_ROOT_DISPLAYED_COLUMNS,
@@ -26,6 +28,7 @@ import { SharedModule } from '../../../../../../../../shared/shared.module';
     UpperCasePipe,
     RouterModule,
     CommonStatusIndicatorChipComponent,
+    SharedModule,
   ],
   templateUrl: './feature-flag-root-section-card-table.component.html',
   styleUrl: './feature-flag-root-section-card-table.component.scss',
@@ -60,7 +63,7 @@ export class FeatureFlagRootSectionCardTableComponent implements OnInit {
   }
 
   fetchFlagsOnScroll() {
-    console.log('fetchFlagsOnScroll');
+    this.featureFlagsService.fetchFeatureFlags();
   }
 
   changeSorting(event) {