diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts
index 55ea7d308c..4b7e078933 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.data.service.ts
@@ -2,6 +2,8 @@ import { Inject, Injectable } from '@angular/core';
 import { ENV, Environment } from '../../../environments/environment-types';
 import { HttpClient } from '@angular/common/http';
 import { FeatureFlagsPaginationParams } from './store/feature-flags.model';
+import { delay, of } from 'rxjs';
+import { FEATURE_FLAG_STATUS, FILTER_MODE } from '../../../../../../../types/src';
 
 @Injectable()
 export class FeatureFlagsDataService {
@@ -9,6 +11,86 @@ export class FeatureFlagsDataService {
 
   fetchFeatureFlagsPaginated(params: FeatureFlagsPaginationParams) {
     const url = this.environment.api.getPaginatedFlags;
-    return this.http.post(url, params);
+    // return this.http.post(url, params);
+    // mock
+    return of({ nodes: mockFeatureFlags, total: 2 }).pipe(delay(2000));
   }
 }
+
+const mockFeatureFlags = [
+  {
+    createdAt: '2021-09-08T08:00:00.000Z',
+    updatedAt: '2021-09-08T08:00:00.000Z',
+    versionNumber: 1,
+    id: '1',
+    name: 'Feature Flag 1',
+    key: 'feature_flag_1',
+    description: 'Feature Flag 1 Description',
+    status: FEATURE_FLAG_STATUS.ENABLED,
+    filterMode: FILTER_MODE.INCLUDE_ALL,
+    context: ['context1', 'context2'],
+    tags: ['tag1', 'tag2'],
+    featureFlagSegmentInclusion: null,
+    featureFlagSegmentExclusion: null,
+  },
+  {
+    createdAt: '2021-09-08T08:00:00.000Z',
+    updatedAt: '2021-09-08T08:00:00.000Z',
+    versionNumber: 1,
+    id: '2',
+    name: 'Feature Flag 2',
+    key: 'feature_flag_2',
+    description: 'Feature Flag 2 Description',
+    status: FEATURE_FLAG_STATUS.ENABLED,
+    filterMode: FILTER_MODE.INCLUDE_ALL,
+    context: ['context1', 'context2'],
+    tags: ['tag1', 'tag2'],
+    featureFlagSegmentInclusion: null,
+    featureFlagSegmentExclusion: null,
+  },
+  {
+    createdAt: '2021-09-08T08:00:00.000Z',
+    updatedAt: '2021-09-08T08:00:00.000Z',
+    versionNumber: 1,
+    id: '3',
+    name: 'Feature Flag 2',
+    key: 'feature_flag_2',
+    description: 'Feature Flag 2 Description',
+    status: FEATURE_FLAG_STATUS.ENABLED,
+    filterMode: FILTER_MODE.INCLUDE_ALL,
+    context: ['context1', 'context2'],
+    tags: ['tag1', 'tag2'],
+    featureFlagSegmentInclusion: null,
+    featureFlagSegmentExclusion: null,
+  },
+  {
+    createdAt: '2021-09-08T08:00:00.000Z',
+    updatedAt: '2021-09-08T08:00:00.000Z',
+    versionNumber: 1,
+    id: '4',
+    name: 'Feature Flag 4',
+    key: 'feature_flag_4',
+    description: 'Feature Flag 4 Description',
+    status: FEATURE_FLAG_STATUS.ENABLED,
+    filterMode: FILTER_MODE.INCLUDE_ALL,
+    context: ['context1', 'context2'],
+    tags: ['tag1', 'tag2'],
+    featureFlagSegmentInclusion: null,
+    featureFlagSegmentExclusion: null,
+  },
+  {
+    createdAt: '2021-09-08T08:00:00.000Z',
+    updatedAt: '2021-09-08T08:00:00.000Z',
+    versionNumber: 1,
+    id: '5',
+    name: 'Feature Flag 5',
+    key: 'feature_flag_5',
+    description: 'Feature Flag 5 Description',
+    status: FEATURE_FLAG_STATUS.ENABLED,
+    filterMode: FILTER_MODE.INCLUDE_ALL,
+    context: ['context1', 'context2'],
+    tags: ['tag1', 'tag2'],
+    featureFlagSegmentInclusion: null,
+    featureFlagSegmentExclusion: null,
+  },
+];
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
index 2697513926..003d4525bf 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/feature-flags.service.ts
@@ -5,30 +5,21 @@ import {
   selectAllFeatureFlagsSortedByDate,
   selectIsAllFlagsFetched,
   selectIsLoadingFeatureFlags,
+  selectHasInitialFeatureFlagsDataLoaded,
 } from './store/feature-flags.selectors';
 import * as FeatureFlagsActions from './store/feature-flags.actions';
-import { FEATURE_FLAG_STATUS, FILTER_MODE, FLAG_SEARCH_KEY, FLAG_SORT_KEY, SORT_AS_DIRECTION } from 'upgrade_types';
+import { FLAG_SEARCH_KEY, FLAG_SORT_KEY, SORT_AS_DIRECTION } from 'upgrade_types';
 
 @Injectable()
 export class FeatureFlagsService {
   constructor(private store$: Store<AppState>) {}
-
+  isInitialFeatureFlagsLoading$ = this.store$.pipe(select(selectHasInitialFeatureFlagsDataLoaded));
   isLoadingFeatureFlags$ = this.store$.pipe(select(selectIsLoadingFeatureFlags));
   allFeatureFlags$ = this.store$.pipe(select(selectAllFeatureFlagsSortedByDate));
   isAllFlagsFetched$ = this.store$.pipe(select(selectIsAllFlagsFetched));
 
   fetchFeatureFlags(fromStarting?: boolean) {
     this.store$.dispatch(FeatureFlagsActions.actionFetchFeatureFlags({ fromStarting }));
-
-    // mock response
-    setTimeout(() => {
-      this.store$.dispatch(
-        FeatureFlagsActions.actionFetchFeatureFlagsSuccess({
-          flags: mockFeatureFlags,
-          totalFlags: 1,
-        })
-      );
-    }, 3000);
   }
 
   setSearchKey(searchKey: FLAG_SEARCH_KEY) {
@@ -46,39 +37,4 @@ export class FeatureFlagsService {
   setSortingType(sortingType: SORT_AS_DIRECTION) {
     this.store$.dispatch(FeatureFlagsActions.actionSetSortingType({ sortingType }));
   }
-
-  //**** mocks
 }
-
-const mockFeatureFlags = [
-  {
-    createdAt: '2021-09-08T08:00:00.000Z',
-    updatedAt: '2021-09-08T08:00:00.000Z',
-    versionNumber: 1,
-    id: '1',
-    name: 'Feature Flag 1',
-    key: 'feature_flag_1',
-    description: 'Feature Flag 1 Description',
-    status: FEATURE_FLAG_STATUS.ENABLED,
-    filterMode: FILTER_MODE.INCLUDE_ALL,
-    context: ['context1', 'context2'],
-    tags: ['tag1', 'tag2'],
-    featureFlagSegmentInclusion: null,
-    featureFlagSegmentExclusion: null,
-  },
-  {
-    createdAt: '2021-09-08T08:00:00.000Z',
-    updatedAt: '2021-09-08T08:00:00.000Z',
-    versionNumber: 1,
-    id: '1',
-    name: 'Feature Flag 2',
-    key: 'feature_flag_2',
-    description: 'Feature Flag 2 Description',
-    status: FEATURE_FLAG_STATUS.ENABLED,
-    filterMode: FILTER_MODE.INCLUDE_ALL,
-    context: ['context1', 'context2'],
-    tags: ['tag1', 'tag2'],
-    featureFlagSegmentInclusion: null,
-    featureFlagSegmentExclusion: null,
-  },
-];
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
index 7f17efa799..8a76c9f930 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.model.ts
@@ -47,8 +47,29 @@ export enum FLAG_SEARCH_KEY {
   CONTEXT = 'context',
 }
 
+export const FLAG_ROOT_COLUMN_NAMES = {
+  NAME: 'Name',
+  STATUS: 'Status',
+  UPDATED_AT: 'Updated at',
+  APP_CONTEXT: 'App Context',
+  TAGS: 'Tags',
+  EXPOSURES: 'Exposures',
+};
+
+export const FLAG_TRANSLATION_KEYS = {
+  NAME: 'feature-flags.global-name.text',
+  STATUS: 'feature-flags.global-status.text',
+  UPDATED_AT: 'feature-flags.global-updated-at.text',
+  APP_CONTEXT: 'feature-flags.global-app-context.text',
+  TAGS: 'feature-flags.global-tags.text',
+  EXPOSURES: 'feature-flags.global-exposures.text',
+};
+
+export const FLAG_ROOT_DISPLAYED_COLUMNS = Object.values(FLAG_ROOT_COLUMN_NAMES);
+
 export interface FeatureFlagState extends EntityState<FeatureFlag> {
   isLoadingFeatureFlags: boolean;
+  hasInitialFeatureFlagsDataLoaded: boolean;
   skipFlags: number;
   totalFlags: number;
   searchKey: FLAG_SEARCH_KEY;
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 cbb2230e78..a799ea9f3e 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
@@ -9,8 +9,9 @@ export const { selectIds, selectEntities, selectAll, selectTotal } = adapter.get
 
 export const initialState: FeatureFlagState = adapter.getInitialState({
   isLoadingFeatureFlags: false,
+  hasInitialFeatureFlagsDataLoaded: false,
   skipFlags: 0,
-  totalFlags: 0,
+  totalFlags: null,
   searchKey: FLAG_SEARCH_KEY.ALL,
   searchString: null,
   sortKey: null,
@@ -24,12 +25,16 @@ const reducer = createReducer(
     isLoadingFeatureFlags: true,
   })),
   on(FeatureFlagsActions.actionFetchFeatureFlagsSuccess, (state, { flags, totalFlags }) => {
-    const newState = {
+    const newState: FeatureFlagState = {
       ...state,
       totalFlags,
       skipFlags: state.skipFlags + flags.length,
     };
-    return adapter.upsertMany(flags, { ...newState, isLoadingFeatureFlags: false });
+    return adapter.upsertMany(flags, {
+      ...newState,
+      isLoadingFeatureFlags: false,
+      hasInitialFeatureFlagsDataLoaded: true,
+    });
   }),
   on(FeatureFlagsActions.actionFetchFeatureFlagsFailure, (state) => ({ ...state, isLoadingFeatureFlags: false })),
   on(FeatureFlagsActions.actionSetIsLoadingFeatureFlags, (state, { isLoadingFeatureFlags }) => ({
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
index e1c8664a32..7d109000e8 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.selectors.ts
@@ -18,6 +18,11 @@ export const selectAllFeatureFlagsSortedByDate = createSelector(selectAllFeature
   });
 });
 
+export const selectHasInitialFeatureFlagsDataLoaded = createSelector(
+  selectFeatureFlagsState,
+  (state) => state.hasInitialFeatureFlagsDataLoaded
+);
+
 export const selectIsLoadingFeatureFlags = createSelector(
   selectFeatureFlagsState,
   (state) => state.isLoadingFeatureFlags
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-page-content.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-page-content.component.ts
index d79c45f094..69cb4cb4bd 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-page-content/feature-flag-root-page-content.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-page-content.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { CommonSectionCardListComponent } from '../../../../../../shared-standalone-component-lib/components';
-import { FeatureFlagRootSectionCardComponent } from '../feature-flag-root-section-card/feature-flag-root-section-card.component';
+import { FeatureFlagRootSectionCardComponent } from './feature-flag-root-section-card/feature-flag-root-section-card.component';
 
 @Component({
   selector: 'app-feature-flag-root-page-content',
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
new file mode 100644
index 0000000000..3d31f866dd
--- /dev/null
+++ 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
@@ -0,0 +1,87 @@
+<div class="flags-list-container">
+  <div scroll (scrolled)="fetchFlagsOnScroll()" class="flags-list-table-container" #tableContainer>
+    <mat-progress-bar class="spinner" mode="indeterminate" *ngIf="isLoading$ | async"></mat-progress-bar>
+    <table class="flags-list" mat-table [dataSource]="dataSource$" matSort (matSortChange)="changeSorting($event)">
+      <ng-container [matColumnDef]="FLAG_ROOT_COLUMN_NAMES.NAME">
+        <th class="ft-12-700" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <span [matTooltip]="FLAG_TRANSLATION_KEYS.NAME | translate" matTooltipPosition="above">
+            {{ FLAG_TRANSLATION_KEYS.NAME | translate | uppercase }}
+          </span>
+        </th>
+        <td class="ft-12-600" mat-cell *matCellDef="let flag">
+          <span>{{ flag.name }}</span>
+          <ng-template #flagNameEllipsis>
+            <span
+              [matTooltip]="flag.name"
+              class="flag-name",
+              matTooltipPosition="above"
+            >
+              {{ flag.name | truncate: 30 }}
+            </span>
+          </ng-template>
+          <br />
+          <span class="flag-description ft-10-400" *ngIf="flag.description?.length < 30; else flagDescription">
+            {{ flag.description }}
+          </span>
+          <ng-template #flagDescription>
+            <span class="flag-description ft-10-400" [matTooltip]="flag.description" matTooltipPosition="above">
+              {{ flag.description | truncate: 35 }}
+            </span>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <ng-container [matColumnDef]="FLAG_ROOT_COLUMN_NAMES.STATUS">
+        <th class="ft-12-700" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <span [matTooltip]="FLAG_TRANSLATION_KEYS.STATUS | translate" matTooltipPosition="above">{{ FLAG_TRANSLATION_KEYS.STATUS | translate | uppercase }}</span>
+        </th>
+        <td class="ft-12-600" mat-cell *matCellDef="let flag">{{ flag.status }}</td>
+      </ng-container>
+
+      <ng-container [matColumnDef]="FLAG_ROOT_COLUMN_NAMES.UPDATED_AT">
+        <th class="ft-12-700" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <span [matTooltip]="FLAG_TRANSLATION_KEYS.UPDATED_AT | translate" matTooltipPosition="above">
+            {{ FLAG_TRANSLATION_KEYS.UPDATED_AT | translate | uppercase }}
+          </span>
+        </th>
+        <td class="ft-12-600" mat-cell *matCellDef="let flag">
+          {{ flag.updatedAt }}
+        </td>
+      </ng-container>
+
+      <ng-container [matColumnDef]="FLAG_ROOT_COLUMN_NAMES.APP_CONTEXT">
+        <th class="ft-12-700" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <span [matTooltip]="FLAG_TRANSLATION_KEYS.APP_CONTEXT | translate" matTooltipPosition="above">
+            {{ FLAG_TRANSLATION_KEYS.APP_CONTEXT | translate | uppercase }}
+          </span>
+        </th>
+        <td class="ft-12-600" mat-cell *matCellDef="let flag">
+          {{ flag.context[0] }}
+        </td>
+      </ng-container>
+      
+      <ng-container [matColumnDef]="FLAG_ROOT_COLUMN_NAMES.TAGS">
+        <th class="ft-12-700" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <span [matTooltip]="FLAG_TRANSLATION_KEYS.TAGS | translate" matTooltipPosition="above">{{ FLAG_TRANSLATION_KEYS.TAGS | translate | uppercase }}</span>
+        </th>
+        <td class="ft-12-600" mat-cell *matCellDef="let flag">
+          <mat-chip *ngFor="let tag of flag.tags" class="tag">{{ tag }}</mat-chip>
+        </td>
+      </ng-container>
+
+      <ng-container [matColumnDef]="FLAG_ROOT_COLUMN_NAMES.EXPOSURES">
+        <th class="ft-12-700" mat-header-cell *matHeaderCellDef mat-sort-header>
+          <span [matTooltip]="FLAG_TRANSLATION_KEYS.EXPOSURES | translate" matTooltipPosition="above">
+            {{ FLAG_TRANSLATION_KEYS.EXPOSURES | translate | uppercase }}
+          </span>
+        </th>
+        <td class="ft-12-600" mat-cell *matCellDef="let flag">
+          <span *ngFor="let exposure of flag.exposures" class="exposure">{{ exposure }}</span>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>
+</div>
\ No newline at end of file
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
new file mode 100644
index 0000000000..4658831c98
--- /dev/null
+++ 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
@@ -0,0 +1,57 @@
+:host ::ng-deep .flags-list-container {
+  height: 100%;
+  width: 100%;
+
+  .flags-list-table-container {
+    position: relative;
+    margin-top: 8px;
+    padding: 0 2.25rem;
+    overflow: auto;
+    width: 100%;
+
+    .spinner {
+      position: sticky;
+      top: 0;
+      z-index: 1111;
+    }
+  }
+
+  .flags-list {
+    width: 100%;
+
+    th {
+      color: var(--grey-2);
+    }
+
+    tr.mat-mdc-footer-row,
+    tr.mat-mdc-row {
+      height: 55px;
+    }
+
+    .mat-mdc-cell,
+    .mat-mdc-header-cell {
+      padding: 10px 5px;
+      width: 10%;
+      word-break: break-word;
+    }
+
+    .mat-mdc-header-cell {
+      padding-left: 5px;
+    }
+
+    .flag {
+      &-name {
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      &-description {
+        color: var(--grey-3);
+      }
+    }
+
+    .mat-mdc-form-field {
+      width: 40%;
+    }
+  }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000000..57a5e5faaa
--- /dev/null
+++ 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
@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { Observable } from 'rxjs';
+import {
+  FLAG_ROOT_COLUMN_NAMES,
+  FLAG_ROOT_DISPLAYED_COLUMNS,
+  FLAG_TRANSLATION_KEYS,
+  FeatureFlag,
+} from '../../../../../../../../core/feature-flags/store/feature-flags.model';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { AsyncPipe, NgIf, NgFor, UpperCasePipe } from '@angular/common';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatChipsModule } from '@angular/material/chips';
+
+@Component({
+  selector: 'app-feature-flag-root-section-card-table',
+  standalone: true,
+  imports: [MatTableModule, AsyncPipe, NgIf, NgFor, MatTooltipModule, TranslateModule, UpperCasePipe, MatChipsModule],
+  templateUrl: './feature-flag-root-section-card-table.component.html',
+  styleUrl: './feature-flag-root-section-card-table.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeatureFlagRootSectionCardTableComponent {
+  @Input() dataSource$: MatTableDataSource<FeatureFlag[]>;
+  @Input() isLoading$: Observable<boolean>;
+
+  get displayedColumns(): string[] {
+    return FLAG_ROOT_DISPLAYED_COLUMNS;
+  }
+
+  get FLAG_TRANSLATION_KEYS() {
+    return FLAG_TRANSLATION_KEYS;
+  }
+
+  get FLAG_ROOT_COLUMN_NAMES() {
+    return FLAG_ROOT_COLUMN_NAMES;
+  }
+
+  fetchFlagsOnScroll() {
+    console.log('fetchFlagsOnScroll');
+  }
+
+  changeSorting($event) {
+    console.log('onSearch:', $event);
+  }
+}
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.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.component.html
new file mode 100644
index 0000000000..16cd423e89
--- /dev/null
+++ 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.component.html
@@ -0,0 +1,35 @@
+<app-common-section-card>
+  <!-- header-left -->
+  <app-common-section-card-search-header
+    header-left
+    [filterOptions]="['All', 'Name', 'Status', 'Context']"
+    [initialFilterOption]="'All'"
+    [initialSearchValue]=""
+    (search)="onSearch($event)"
+  ></app-common-section-card-search-header>
+
+  <!-- header-right -->
+  <app-common-section-card-action-buttons
+    header-right
+    [showPrimaryButton]="true"
+    [primaryButtonText]="'feature-flags.add-feature-flag.text' | translate"
+    [menuButtonItems]="menuButtonItems"
+    (primaryButtonClick)="onAddFeatureFlagButtonClick()"
+    (menuButtonItemClick)="onMenuButtonItemClick($event)"
+    (sectionCardExpandChange)="onSectionCardExpandChange($event)"
+  ></app-common-section-card-action-buttons>
+
+  <!-- content -->
+  <ng-container content>
+    <ng-container *ngIf="!(isInitialLoading$ | async); else table">
+      <mat-spinner></mat-spinner>
+    </ng-container>
+
+    <ng-template #table>
+      <app-feature-flag-root-section-card-table class="full-width"
+        [dataSource$]="allFeatureFlags$"
+        [isLoading$]="isLoadingFeatureFlags$"
+      ></app-feature-flag-root-section-card-table>
+    </ng-template>
+  </ng-container>
+</app-common-section-card>
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.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.component.scss
new file mode 100644
index 0000000000..25b65e4829
--- /dev/null
+++ 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.component.scss
@@ -0,0 +1,4 @@
+.full-width {
+  width: 100%; // TODO try not to set here, should be in the common parent...
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.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.component.ts
similarity index 80%
rename from frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.component.ts
rename to 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.component.ts
index 4015d38b0a..e9fd0e2c47 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.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.component.ts
@@ -3,12 +3,14 @@ import {
   CommonSectionCardComponent,
   CommonSectionCardSearchHeaderComponent,
   CommonSectionCardActionButtonsComponent,
-} from '../../../../../../shared-standalone-component-lib/components';
-import { FeatureFlagsService } from '../../../../../../core/feature-flags/feature-flags.service';
+} from '../../../../../../../shared-standalone-component-lib/components';
+import { FeatureFlagsService } from '../../../../../../../core/feature-flags/feature-flags.service';
 import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { FeatureFlagRootSectionCardTableComponent } from './feature-flag-root-section-card-table/feature-flag-root-section-card-table.component';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { IMenuButtonItem } from 'upgrade_types';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-feature-flag-root-section-card',
@@ -17,10 +19,12 @@ import { IMenuButtonItem } from 'upgrade_types';
     CommonSectionCardComponent,
     CommonSectionCardSearchHeaderComponent,
     CommonSectionCardActionButtonsComponent,
+    FeatureFlagRootSectionCardTableComponent,
     AsyncPipe,
     JsonPipe,
     NgIf,
     MatProgressSpinnerModule,
+    RouterModule,
     TranslateModule,
   ],
   templateUrl: './feature-flag-root-section-card.component.html',
@@ -28,7 +32,8 @@ import { IMenuButtonItem } from 'upgrade_types';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class FeatureFlagRootSectionCardComponent {
-  isLoadingFeatureFlags$ = this.featureFlagService.isLoadingFeatureFlags$; // TBD if this will still be needed for for something
+  isLoadingFeatureFlags$ = this.featureFlagService.isLoadingFeatureFlags$;
+  isInitialLoading$ = this.featureFlagService.isInitialFeatureFlagsLoading$;
   allFeatureFlags$ = this.featureFlagService.allFeatureFlags$;
   isAllFlagsFetched$ = this.featureFlagService.isAllFlagsFetched$;
 
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.component.spec.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.component.spec.ts
deleted file mode 100644
index bcf5cce03e..0000000000
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-root-page/feature-flag-root-section-card/feature-flag-root-section-card.component.spec.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FeatureFlagRootSectionCardComponent } from './feature-flag-root-section-card.component';
-
-describe('FeatureFlagRootSectionCardComponent', () => {
-  let component: FeatureFlagRootSectionCardComponent;
-  let fixture: ComponentFixture<FeatureFlagRootSectionCardComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [FeatureFlagRootSectionCardComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(FeatureFlagRootSectionCardComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-list/common-section-card-list.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-list/common-section-card-list.component.scss
index 8dc0b49d4b..917b40679a 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-list/common-section-card-list.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card-list/common-section-card-list.component.scss
@@ -1,8 +1,9 @@
-::ng-deep .section-card-list {
+:host ::ng-deep .section-card-list {
   display: flex;
   flex-direction: column;
   width: 100%;
-  overflow: scroll;
+  padding: 20px;
+  margin: 0;
 }
 
 .section-card {
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss
index 5337d06e0d..2c8e7b824b 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-section-card/common-section-card.component.scss
@@ -15,7 +15,11 @@
   }
 
   .content {
-    padding: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    min-height: 200px;
   }
 
   .footer {
diff --git a/frontend/projects/upgrade/src/assets/i18n/en.json b/frontend/projects/upgrade/src/assets/i18n/en.json
index 01376d77dd..354e889116 100644
--- a/frontend/projects/upgrade/src/assets/i18n/en.json
+++ b/frontend/projects/upgrade/src/assets/i18n/en.json
@@ -337,8 +337,12 @@
   "profile.action.authorization.text": "Authorization",
   "profile.action.filter-metric.text": "Filter Metric",
   "feature-flags.global-name.text": "Name",
-  "feature-flags.global-key.text": "Key",
   "feature-flags.global-status.text": "Status",
+  "feature-flags.global-updated-at.text": "Updated At",
+  "feature-flags.global-app-context.text": "App Context",
+  "feature-flags.global-tags.text": "Tags",
+  "feature-flags.global-exposures.text": "Exposures",
+  "feature-flags.global-key.text": "Key",
   "feature-flags.global-active-variation.text": "Active Variation",
   "feature-flags.global-variation-value.text": "Value",
   "feature-flags.title.text": "Feature Flags",