diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
new file mode 100644
index 0000000000..8232320822
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.html
@@ -0,0 +1,3 @@
+<app-common-section-card-list>
+    <div section-card>Hi I'm a section card 1</div>
+</app-common-section-card-list>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts
new file mode 100644
index 0000000000..8f0e6aa379
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-details-page-content.component.ts
@@ -0,0 +1,12 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonSectionCardListComponent } from '../../../../../../shared-standalone-component-lib/components';
+
+@Component({
+  selector: 'app-feature-flag-details-page-content',
+  standalone: true,
+  imports: [CommonSectionCardListComponent],
+  templateUrl: './feature-flag-details-page-content.component.html',
+  styleUrl: './feature-flag-details-page-content.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeatureFlagDetailsPageContentComponent {}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.html
new file mode 100644
index 0000000000..64207491e5
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.html
@@ -0,0 +1,5 @@
+<app-common-details-page-header-container
+    rootName = "feature-flags.title.text"
+    detailsName = {{ flagName }}
+    rootLink= "feature-flags.link.text"
+> </app-common-details-page-header-container>
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.ts
new file mode 100644
index 0000000000..f49b02ef6e
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-header/feature-flag-details-page-header.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonDetailsPageHeaderContainerComponent } from '../../../../../../shared-standalone-component-lib/components/';
+
+@Component({
+  selector: 'app-feature-flag-details-page-header',
+  standalone: true,
+  imports: [CommonDetailsPageHeaderContainerComponent],
+  templateUrl: './feature-flag-details-page-header.component.html',
+  styleUrl: './feature-flag-details-page-header.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FeatureFlagDetailsPageHeaderComponent {
+  flagName = 'feature flag 1';
+}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.html
new file mode 100644
index 0000000000..8035da8b00
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.html
@@ -0,0 +1,4 @@
+<app-common-details-page>
+  <app-feature-flag-details-page-header header></app-feature-flag-details-page-header>
+  <app-feature-flag-details-page-content content></app-feature-flag-details-page-content>
+</app-common-details-page>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.ts
new file mode 100644
index 0000000000..a7aa6786f4
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonDetailsPageComponent } from '../../../../../shared-standalone-component-lib/components';
+import { FeatureFlagDetailsPageHeaderComponent } from './feature-flag-details-page-header/feature-flag-details-page-header.component';
+import { FeatureFlagDetailsPageContentComponent } from './feature-flag-details-page-content/feature-flag-details-page-content.component';
+
+@Component({
+  selector: 'app-feature-flag-details-page',
+  standalone: true,
+  templateUrl: './feature-flag-details-page.component.html',
+  styleUrl: './feature-flag-details-page.component.scss',
+  imports: [CommonDetailsPageComponent, FeatureFlagDetailsPageHeaderComponent, FeatureFlagDetailsPageContentComponent],
+})
+export class FeatureFlagDetailsPageComponent {}
diff --git a/frontend/projects/upgrade/src/assets/i18n/en.json b/frontend/projects/upgrade/src/assets/i18n/en.json
index aa1d5d0d65..035044793b 100644
--- a/frontend/projects/upgrade/src/assets/i18n/en.json
+++ b/frontend/projects/upgrade/src/assets/i18n/en.json
@@ -343,6 +343,7 @@
   "feature-flags.global-variation-value.text": "Value",
   "feature-flags.title.text": "Feature Flags",
   "feature-flags.subtitle.text": "Manage feature flags",
+  "feature-flags.link.text": "featureflags",
   "feature-flags.no-flags.text": "Welcome! <br> Let's start by creating a new flag!",
   "feature-flags.delete-flag.message.text": "Type the name of feature flag to confirm deletion:",
   "feature-flags.delete-flag.input-placeholder.text": "Feature flag name",