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 dd9757c9e4..c5a6fed5fe 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
@@ -6,10 +6,10 @@ import {
   FeatureFlag,
   FeatureFlagsPaginationInfo,
   FeatureFlagsPaginationParams,
+  UpdateFeatureFlagRequest,
   UpdateFeatureFlagStatusRequest,
 } from './store/feature-flags.model';
 import { Observable } from 'rxjs';
-import { FEATURE_FLAG_STATUS, FILTER_MODE } from '../../../../../../../types/src';
 
 @Injectable()
 export class FeatureFlagsDataService {
@@ -18,8 +18,6 @@ export class FeatureFlagsDataService {
   fetchFeatureFlagsPaginated(params: FeatureFlagsPaginationParams): Observable<FeatureFlagsPaginationInfo> {
     const url = this.environment.api.getPaginatedFlags;
     return this.http.post<FeatureFlagsPaginationInfo>(url, params);
-    // mock
-    // // return of({ nodes: mockFeatureFlags, total: 2 }).pipe(delay(2000));
   }
 
   fetchFeatureFlagById(id: string) {
@@ -27,23 +25,23 @@ export class FeatureFlagsDataService {
     return this.http.get(url);
   }
 
-  addFeatureFlag(params: AddFeatureFlagRequest): Observable<FeatureFlag> {
-    const url = this.environment.api.featureFlag;
-    return this.http.post<FeatureFlag>(url, params);
-  }
-
   updateFeatureFlagStatus(params: UpdateFeatureFlagStatusRequest): Observable<FeatureFlag> {
     const url = this.environment.api.updateFlagStatus;
     return this.http.post<FeatureFlag>(url, params);
   }
 
-  deleteFeatureFlag(id: string) {
-    const url = `${this.environment.api.featureFlag}/${id}`;
-    return this.http.delete(url);
+  addFeatureFlag(flag: AddFeatureFlagRequest): Observable<FeatureFlag> {
+    const url = this.environment.api.featureFlag;
+    return this.http.post<FeatureFlag>(url, flag);
   }
 
-  updateFeatureFlag(flag: FeatureFlag): Observable<FeatureFlag> {
+  updateFeatureFlag(flag: UpdateFeatureFlagRequest): Observable<FeatureFlag> {
     const url = `${this.environment.api.featureFlag}/${flag.id}`;
     return this.http.put<FeatureFlag>(url, flag);
   }
+
+  deleteFeatureFlag(id: string) {
+    const url = `${this.environment.api.featureFlag}/${id}`;
+    return this.http.delete(url);
+  }
 }
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 421f5e8eda..6542074908 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
@@ -21,19 +21,21 @@ import {
   selectIsLoadingSelectedFeatureFlag,
   selectSortKey,
   selectSortAs,
+  selectFeatureFlagListTypeOptions,
+  selectAppContexts,
 } from './store/feature-flags.selectors';
 import * as FeatureFlagsActions from './store/feature-flags.actions';
 import { actionFetchContextMetaData } from '../experiments/store/experiments.actions';
 import { FLAG_SEARCH_KEY, FLAG_SORT_KEY, SORT_AS_DIRECTION } from 'upgrade_types';
 import {
-  AddFeatureFlagRequest,
-  FeatureFlag,
-  LIST_OPTION_TYPE,
   UpdateFeatureFlagStatusRequest,
+  AddFeatureFlagRequest,
+  UpdateFeatureFlagRequest,
 } from './store/feature-flags.model';
 import { ExperimentService } from '../experiments/experiments.service';
 import { filter, map, pairwise, withLatestFrom } from 'rxjs';
 import { selectContextMetaData } from '../experiments/store/experiments.selectors';
+import isEqual from 'lodash.isequal';
 
 @Injectable()
 export class FeatureFlagsService {
@@ -44,6 +46,7 @@ export class FeatureFlagsService {
   isLoadingSelectedFeatureFlag$ = this.store$.pipe(select(selectIsLoadingSelectedFeatureFlag));
   isLoadingUpdateFeatureFlagStatus$ = this.store$.pipe(select(selectIsLoadingUpdateFeatureFlagStatus));
   allFeatureFlags$ = this.store$.pipe(select(selectAllFeatureFlagsSortedByDate));
+  appContexts$ = this.store$.pipe(select(selectAppContexts));
   isAllFlagsFetched$ = this.store$.pipe(select(selectIsAllFlagsFetched));
   searchString$ = this.store$.pipe(select(selectSearchString));
   searchKey$ = this.store$.pipe(select(selectSearchKey));
@@ -52,10 +55,11 @@ export class FeatureFlagsService {
   isLoadingUpsertFeatureFlag$ = this.store$.pipe(select(selectIsLoadingUpsertFeatureFlag));
   IsLoadingFeatureFlagDelete$ = this.store$.pipe(select(selectIsLoadingFeatureFlagDelete));
 
-  featureFlagsListLengthChange$ = this.allFeatureFlags$.pipe(
+  hasFeatureFlagsCountChanged$ = this.allFeatureFlags$.pipe(
     pairwise(),
     filter(([prevEntities, currEntities]) => prevEntities.length !== currEntities.length)
   );
+
   selectedFeatureFlagStatusChange$ = this.store$.pipe(
     select(selectSelectedFeatureFlag),
     pairwise(),
@@ -71,20 +75,18 @@ export class FeatureFlagsService {
   isSelectedFeatureFlagUpdated$ = this.store$.pipe(
     select(selectSelectedFeatureFlag),
     pairwise(),
-    filter(([prev, curr]) => prev && curr && JSON.stringify(prev) !== JSON.stringify(curr)),
-    map(([prev, curr]) => curr)
+    filter(([prev, curr]) => {
+      return prev && curr && !isEqual(prev, curr);
+    }),
+    map(([, curr]) => curr)
   );
 
+  selectFeatureFlagListTypeOptions$ = this.store$.pipe(select(selectFeatureFlagListTypeOptions));
   selectedFlagOverviewDetails = this.store$.pipe(select(selectFeatureFlagOverviewDetails));
   selectedFeatureFlag$ = this.store$.pipe(select(selectSelectedFeatureFlag));
   searchParams$ = this.store$.pipe(select(selectSearchFeatureFlagParams));
   selectRootTableState$ = this.store$.select(selectRootTableState);
   activeDetailsTabIndex$ = this.store$.pipe(select(selectActiveDetailsTabIndex));
-  appContexts$ = this.experimentService.contextMetaData$.pipe(
-    map((contextMetaData) => {
-      return Object.keys(contextMetaData?.contextMetadata ?? []);
-    })
-  );
   selectFeatureFlagInclusions$ = this.store$.pipe(select(selectFeatureFlagInclusions));
   selectFeatureFlagInclusionsLength$ = this.store$.pipe(
     select(selectFeatureFlagInclusions),
@@ -95,46 +97,6 @@ export class FeatureFlagsService {
     select(selectFeatureFlagExclusions),
     map((exclusions) => exclusions.length)
   );
-  // note: this comes from experiment service!
-  selectFeatureFlagListTypeOptions$ = this.store$.pipe(
-    select(selectContextMetaData),
-    withLatestFrom(this.store$.pipe(select(selectSelectedFeatureFlag))),
-    map(([contextMetaData, flag]) => {
-      // TODO: straighten out contextmetadata and it's selectors with a dedicated service
-      const flagAppContext = flag?.context?.[0];
-      const groupTypes = contextMetaData?.contextMetadata?.[flagAppContext]?.GROUP_TYPES ?? [];
-      const groupTypeSelectOptions = this.formatGroupTypes(groupTypes as string[]);
-      const listOptionTypes = [
-        {
-          value: LIST_OPTION_TYPE.SEGMENT,
-          viewValue: LIST_OPTION_TYPE.SEGMENT,
-        },
-        {
-          value: LIST_OPTION_TYPE.INDIVIDUAL,
-          viewValue: LIST_OPTION_TYPE.INDIVIDUAL,
-        },
-        ...groupTypeSelectOptions,
-      ];
-
-      return listOptionTypes;
-    })
-  );
-
-  formatGroupTypes(groupTypes: string[]): { value: string; viewValue: string }[] {
-    if (Array.isArray(groupTypes) && groupTypes.length > 0) {
-      return groupTypes.map((groupType) => {
-        return { value: groupType, viewValue: 'Group: "' + groupType + '"' };
-      });
-    } else {
-      return [];
-    }
-  }
-
-  convertNameStringToKey(name: string): string {
-    const upperCaseString = name.trim().toUpperCase();
-    const key = upperCaseString.replace(/ /g, '_');
-    return key;
-  }
 
   fetchFeatureFlags(fromStarting?: boolean) {
     this.store$.dispatch(FeatureFlagsActions.actionFetchFeatureFlags({ fromStarting }));
@@ -152,7 +114,7 @@ export class FeatureFlagsService {
     this.store$.dispatch(FeatureFlagsActions.actionAddFeatureFlag({ addFeatureFlagRequest }));
   }
 
-  updateFeatureFlag(flag: FeatureFlag) {
+  updateFeatureFlag(flag: UpdateFeatureFlagRequest) {
     this.store$.dispatch(FeatureFlagsActions.actionUpdateFeatureFlag({ flag }));
   }
 
diff --git a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts
index da27abcadc..4cddf07568 100644
--- a/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts
+++ b/frontend/projects/upgrade/src/app/core/feature-flags/store/feature-flags.actions.ts
@@ -1,5 +1,10 @@
 import { createAction, props } from '@ngrx/store';
-import { AddFeatureFlagRequest, FeatureFlag, UpdateFeatureFlagStatusRequest } from './feature-flags.model';
+import {
+  FeatureFlag,
+  UpdateFeatureFlagStatusRequest,
+  AddFeatureFlagRequest,
+  UpdateFeatureFlagRequest,
+} from './feature-flags.model';
 import { FLAG_SEARCH_KEY, FLAG_SORT_KEY, SORT_AS_DIRECTION } from 'upgrade_types';
 
 export const actionFetchFeatureFlags = createAction(
@@ -48,7 +53,7 @@ export const actionDeleteFeatureFlagFailure = createAction('[Feature Flags] Dele
 
 export const actionUpdateFeatureFlag = createAction(
   '[Feature Flags] Update Feature Flag',
-  props<{ flag: FeatureFlag }>()
+  props<{ flag: UpdateFeatureFlagRequest }>()
 );
 
 export const actionUpdateFeatureFlagSuccess = createAction(
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 3ad85dcbc2..897471b221 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
@@ -1,46 +1,56 @@
 import { AppState } from '../../core.state';
 import { EntityState } from '@ngrx/entity';
 import { FEATURE_FLAG_STATUS, FILTER_MODE, FLAG_SORT_KEY, SEGMENT_TYPE, SORT_AS_DIRECTION } from 'upgrade_types';
-import { GroupForSegment, IndividualForSegment, Segment } from '../../segments/store/segments.model';
+import { MemberTypes, Segment } from '../../segments/store/segments.model';
 
-export interface FeatureFlag {
+// This obviously is a more global type, but for now we're not about to refactor all of the things, so I'm just putting it here so I can create some more dev-friendly types to catch the small differences between some of these formats
+export interface GeneralCRUDResponseFields {
   createdAt: string;
   updatedAt: string;
   versionNumber: number;
-  id: string;
+}
+
+// Fields belonging to the FeatureFlag entity itself that are not part of the CRUD response
+export interface BaseFeatureFlag {
+  id?: string;
   name: string;
   key: string;
-  description: string;
-  status: FEATURE_FLAG_STATUS;
-  filterMode: FILTER_MODE;
+  description?: string;
   context: string[];
   tags: string[];
-  featureFlagSegmentInclusion: PrivateSegment | EmptyPrivateSegment;
-  featureFlagSegmentExclusion: PrivateSegment | EmptyPrivateSegment;
+  status: FEATURE_FLAG_STATUS;
+  filterMode: FILTER_MODE;
+  featureFlagSegmentInclusion: FeatureFlagSegmentListDetails[];
+  featureFlagSegmentExclusion: FeatureFlagSegmentListDetails[];
 }
 
-export interface FeatureFlagsPaginationInfo {
-  nodes: FeatureFlag[];
-  total: number;
-  skip: number;
-  take: number;
+// Feature Flag entity = base + db-generated fields (we depend on createdOn for sorting, for instance, but it's not truly part of the feature flag base)
+export type FeatureFlag = BaseFeatureFlag & GeneralCRUDResponseFields;
+
+// Currently there is no difference between these types, but they semantically different and could diverge later
+export type AddFeatureFlagRequest = BaseFeatureFlag;
+
+// so that we can throw an error if we try to update the id
+export interface UpdateFeatureFlagRequest extends AddFeatureFlagRequest {
+  readonly id: string;
 }
 
-export interface AddFeatureFlagRequest {
-  name: string;
-  key: string;
-  description: string;
-  status: FEATURE_FLAG_STATUS;
-  context: string[];
-  tags: string[];
-  featureFlagSegmentInclusion: PrivateSegment | EmptyPrivateSegment;
-  featureFlagSegmentExclusion: PrivateSegment | EmptyPrivateSegment;
-  filterMode: FILTER_MODE;
+export interface FeatureFlagSegmentListDetails {
+  segment: Segment;
+  featureFlag: FeatureFlag;
+  enabled: boolean;
+  listType: MemberTypes | string;
 }
 
-export interface UpdateFeatureFlagStatusRequest {
-  flagId: string;
-  status: FEATURE_FLAG_STATUS;
+export enum UPSERT_FEATURE_FLAG_ACTION {
+  ADD = 'add',
+  EDIT = 'edit',
+  DUPLICATE = 'duplicate',
+}
+
+export interface UpsertFeatureFlagParams {
+  sourceFlag: FeatureFlag;
+  action: UPSERT_FEATURE_FLAG_ACTION;
 }
 
 export enum UPSERT_FEATURE_FLAG_LIST_ACTION {
@@ -49,13 +59,20 @@ export enum UPSERT_FEATURE_FLAG_LIST_ACTION {
 }
 
 export interface UpsertFeatureFlagListParams {
-  sourceList: any; // TODO define me
+  sourceList: FeatureFlagSegmentListDetails;
   action: UPSERT_FEATURE_FLAG_LIST_ACTION;
 }
 
-export enum LIST_OPTION_TYPE {
-  INDIVIDUAL = 'Individual',
-  SEGMENT = 'Segment',
+export interface FeatureFlagsPaginationInfo {
+  nodes: FeatureFlag[];
+  total: number;
+  skip: number;
+  take: number;
+}
+
+export interface UpdateFeatureFlagStatusRequest {
+  flagId: string;
+  status: FEATURE_FLAG_STATUS;
 }
 
 export interface FeatureFlagFormData {
@@ -76,8 +93,7 @@ export interface EmptyPrivateSegment {
   };
 }
 
-export type AnySegmentType = Segment | PrivateSegment | EmptyPrivateSegment | GroupForSegment | IndividualForSegment;
-
+// TODO: This should be probably be a part of env config
 export const NUMBER_OF_FLAGS = 20;
 
 interface IFeatureFlagsSearchParams {
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 896b1b6668..ab066d0e39 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,6 +26,7 @@ export const initialState: FeatureFlagState = adapter.getInitialState({
 
 const reducer = createReducer(
   initialState,
+  // Feature Flags Fetching Actions
   on(FeatureFlagsActions.actionFetchFeatureFlags, (state) => ({
     ...state,
     isLoadingFeatureFlags: true,
@@ -43,6 +44,12 @@ const reducer = createReducer(
     });
   }),
   on(FeatureFlagsActions.actionFetchFeatureFlagsFailure, (state) => ({ ...state, isLoadingFeatureFlags: false })),
+
+  // Feature Flag Detail Actions
+  on(FeatureFlagsActions.actionFetchFeatureFlagById, (state) => ({
+    ...state,
+    isLoadingSelectedFeatureFlag: true,
+  })),
   on(FeatureFlagsActions.actionFetchFeatureFlagByIdSuccess, (state, { flag }) => {
     return adapter.upsertOne(flag, {
       ...state,
@@ -53,24 +60,23 @@ const reducer = createReducer(
     ...state,
     isLoadingSelectedFeatureFlag: false,
   })),
-  on(FeatureFlagsActions.actionSetIsLoadingFeatureFlags, (state, { isLoadingFeatureFlags }) => ({
+
+  // Feature Flag Upsert Actions (Add/Update both = upsert result)
+  on(FeatureFlagsActions.actionAddFeatureFlag, FeatureFlagsActions.actionUpdateFeatureFlag, (state) => ({
     ...state,
-    isLoadingFeatureFlags,
+    isLoadingUpsertFeatureFlag: true,
   })),
-  on(FeatureFlagsActions.actionAddFeatureFlag, (state) => ({ ...state, isLoadingUpsertFeatureFlag: true })),
-  on(FeatureFlagsActions.actionAddFeatureFlagSuccess, (state, { response }) => {
-    return adapter.addOne(response, {
-      ...state,
-      isLoadingUpsertFeatureFlag: false,
-    });
-  }),
-  on(FeatureFlagsActions.actionUpdateFeatureFlag, (state) => ({ ...state, isLoadingUpsertFeatureFlag: true })),
-  on(FeatureFlagsActions.actionUpdateFeatureFlagSuccess, (state, { response }) => {
-    return adapter.upsertOne(response, {
-      ...state,
-      isLoadingUpsertFeatureFlag: false,
-    });
-  }),
+  on(
+    FeatureFlagsActions.actionUpdateFeatureFlagSuccess,
+    FeatureFlagsActions.actionAddFeatureFlagSuccess,
+    (state, { response }) => adapter.upsertOne(response, { ...state, isLoadingUpsertFeatureFlag: false })
+  ),
+  on(FeatureFlagsActions.actionAddFeatureFlagFailure, FeatureFlagsActions.actionUpdateFeatureFlagFailure, (state) => ({
+    ...state,
+    isLoadingUpsertFeatureFlag: false,
+  })),
+
+  // Feature Flag Delete Actions
   on(FeatureFlagsActions.actionDeleteFeatureFlag, (state) => ({ ...state, isLoadingFeatureFlagDelete: true })),
   on(FeatureFlagsActions.actionDeleteFeatureFlagSuccess, (state, { flag }) => {
     return adapter.removeOne(flag.id, {
@@ -82,17 +88,8 @@ const reducer = createReducer(
     ...state,
     isLoadingFeatureFlagDelete: false,
   })),
-  on(FeatureFlagsActions.actionUpdateFeatureFlagFailure, (state) => ({ ...state, isLoadingUpsertFeatureFlag: false })),
-  on(FeatureFlagsActions.actionAddFeatureFlagFailure, (state) => ({ ...state, isLoadingUpsertFeatureFlag: false })),
-  on(FeatureFlagsActions.actionSetSkipFlags, (state, { skipFlags }) => ({ ...state, skipFlags })),
-  on(FeatureFlagsActions.actionSetSearchKey, (state, { searchKey }) => ({ ...state, searchKey })),
-  on(FeatureFlagsActions.actionSetSearchString, (state, { searchString }) => ({ ...state, searchValue: searchString })),
-  on(FeatureFlagsActions.actionSetSortKey, (state, { sortKey }) => ({ ...state, sortKey })),
-  on(FeatureFlagsActions.actionSetSortingType, (state, { sortingType }) => ({ ...state, sortAs: sortingType })),
-  on(FeatureFlagsActions.actionSetActiveDetailsTabIndex, (state, { activeDetailsTabIndex }) => ({
-    ...state,
-    activeDetailsTabIndex,
-  })),
+
+  // Feature Flag Status Update Actions
   on(FeatureFlagsActions.actionUpdateFeatureFlagStatus, (state) => ({
     ...state,
     isLoadingUpdateFeatureFlagStatus: true,
@@ -108,9 +105,20 @@ const reducer = createReducer(
     ...state,
     isLoadingUpdateFeatureFlagStatus: true,
   })),
-  on(FeatureFlagsActions.actionFetchFeatureFlagById, (state) => ({
+
+  // UI State Update Actions
+  on(FeatureFlagsActions.actionSetIsLoadingFeatureFlags, (state, { isLoadingFeatureFlags }) => ({
     ...state,
-    isLoadingSelectedFeatureFlag: true,
+    isLoadingFeatureFlags,
+  })),
+  on(FeatureFlagsActions.actionSetSkipFlags, (state, { skipFlags }) => ({ ...state, skipFlags })),
+  on(FeatureFlagsActions.actionSetSearchKey, (state, { searchKey }) => ({ ...state, searchKey })),
+  on(FeatureFlagsActions.actionSetSearchString, (state, { searchString }) => ({ ...state, searchValue: searchString })),
+  on(FeatureFlagsActions.actionSetSortKey, (state, { sortKey }) => ({ ...state, sortKey })),
+  on(FeatureFlagsActions.actionSetSortingType, (state, { sortingType }) => ({ ...state, sortAs: sortingType })),
+  on(FeatureFlagsActions.actionSetActiveDetailsTabIndex, (state, { activeDetailsTabIndex }) => ({
+    ...state,
+    activeDetailsTabIndex,
   }))
 );
 
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 fc5d8b9a1d..1dd299bb95 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
@@ -1,16 +1,10 @@
 import { createSelector, createFeatureSelector } from '@ngrx/store';
-import {
-  EmptyPrivateSegment,
-  FLAG_SEARCH_KEY,
-  FeatureFlag,
-  FeatureFlagState,
-  ParticipantListTableRow,
-  PrivateSegment,
-} from './feature-flags.model';
+import { FLAG_SEARCH_KEY, FeatureFlag, FeatureFlagState, ParticipantListTableRow } from './feature-flags.model';
 import { selectRouterState } from '../../core.state';
 import { selectAll } from './feature-flags.reducer';
-import { GroupForSegment, IndividualForSegment, Segment } from '../../segments/store/segments.model';
-import { FEATURE_FLAG_PARTICIPANT_LIST_KEY } from '../../../../../../../../types/src/Experiment/enums';
+import { MemberTypes } from '../../segments/store/segments.model';
+import { selectContextMetaData } from '../../experiments/store/experiments.selectors';
+import { CommonTextHelpersService } from '../../../shared/services/common-text-helpers.service';
 
 export const selectFeatureFlagsState = createFeatureSelector<FeatureFlagState>('featureFlags');
 
@@ -27,6 +21,10 @@ export const selectAllFeatureFlagsSortedByDate = createSelector(selectAllFeature
   });
 });
 
+export const selectAppContexts = createSelector(selectContextMetaData, (contextMetaData) =>
+  Object.keys(contextMetaData?.contextMetadata ?? [])
+);
+
 export const selectHasInitialFeatureFlagsDataLoaded = createSelector(
   selectFeatureFlagsState,
   (state) => state.hasInitialFeatureFlagsDataLoaded
@@ -125,68 +123,38 @@ export const selectIsLoadingFeatureFlagDelete = createSelector(
   (state) => state.isLoadingFeatureFlagDelete
 );
 
+// TODO: will need reimplementation in the list table stories
 export const selectFeatureFlagInclusions = createSelector(
   selectSelectedFeatureFlag,
-  (featureFlag: FeatureFlag): ParticipantListTableRow[] =>
-    mapToParticipantTableRowStructure(featureFlag, FEATURE_FLAG_PARTICIPANT_LIST_KEY.INCLUDE)
+  (featureFlag: FeatureFlag): ParticipantListTableRow[] => []
+  // mapToParticipantTableRowStructure(featureFlag, FEATURE_FLAG_PARTICIPANT_LIST_KEY.INCLUDE)
 );
 
 export const selectFeatureFlagExclusions = createSelector(
   selectSelectedFeatureFlag,
-  (featureFlag: FeatureFlag): ParticipantListTableRow[] =>
-    mapToParticipantTableRowStructure(featureFlag, FEATURE_FLAG_PARTICIPANT_LIST_KEY.EXCLUDE)
+  (featureFlag: FeatureFlag): ParticipantListTableRow[] => []
+  // mapToParticipantTableRowStructure(featureFlag, FEATURE_FLAG_PARTICIPANT_LIST_KEY.EXCLUDE)
 );
 
-// TODO: can we get rid of this ui discovery work and have the backend do it?
-function mapToParticipantTableRowStructure(
-  featureFlag: FeatureFlag,
-  key: FEATURE_FLAG_PARTICIPANT_LIST_KEY.INCLUDE | FEATURE_FLAG_PARTICIPANT_LIST_KEY.EXCLUDE
-): ParticipantListTableRow[] {
-  const privateSegment: PrivateSegment | EmptyPrivateSegment = featureFlag?.[key];
-
-  if (!privateSegment) return [];
-
-  // make sure this is not an empty private segment
-  if ('groupForSegment' in privateSegment.segment) {
-    const groups: GroupForSegment[] = privateSegment.segment.groupForSegment || [];
-    const subSegments: Segment[] = privateSegment.segment.subSegments || [];
-    const individuals: IndividualForSegment[] = privateSegment.segment.individualForSegment || [];
-
-    const groupsRow = groups.map(mapGroupToRow);
-    const subSegmentsRow = subSegments.map(mapSubSegmentToRow);
-    const individualsRow = individuals.map(mapIndividualToRow);
-
-    const allSegments: ParticipantListTableRow[] = [...groupsRow, ...subSegmentsRow, ...individualsRow];
-
-    return allSegments;
+export const selectFeatureFlagListTypeOptions = createSelector(
+  selectContextMetaData,
+  selectSelectedFeatureFlag,
+  (contextMetaData, flag) => {
+    const flagAppContext = flag?.context?.[0];
+    const groupTypes = contextMetaData?.contextMetadata?.[flagAppContext]?.GROUP_TYPES ?? [];
+    const groupTypeSelectOptions = CommonTextHelpersService.formatGroupTypes(groupTypes as string[]);
+    const listOptionTypes = [
+      {
+        value: MemberTypes.SEGMENT,
+        viewValue: MemberTypes.SEGMENT,
+      },
+      {
+        value: MemberTypes.INDIVIDUAL,
+        viewValue: MemberTypes.INDIVIDUAL,
+      },
+      ...groupTypeSelectOptions,
+    ];
+
+    return listOptionTypes;
   }
-
-  return [];
-}
-
-function mapGroupToRow(group: GroupForSegment): ParticipantListTableRow {
-  return {
-    name: group.groupId,
-    type: group.type + ' (group)',
-    values: '?',
-    status: '?',
-  };
-}
-
-function mapSubSegmentToRow(subSegment: Segment): ParticipantListTableRow {
-  return {
-    name: subSegment.id,
-    type: 'Segment',
-    values: '?',
-    status: '?',
-  };
-}
-
-function mapIndividualToRow(individual: IndividualForSegment): ParticipantListTableRow {
-  return {
-    name: individual.userId,
-    type: 'Individual',
-    values: '?',
-    status: '?',
-  };
-}
+);
diff --git a/frontend/projects/upgrade/src/app/core/segments/store/segments.model.ts b/frontend/projects/upgrade/src/app/core/segments/store/segments.model.ts
index ddc3fc9a6c..8f80a0aa39 100644
--- a/frontend/projects/upgrade/src/app/core/segments/store/segments.model.ts
+++ b/frontend/projects/upgrade/src/app/core/segments/store/segments.model.ts
@@ -53,9 +53,12 @@ export interface experimentSegmentInclusionExclusionData {
   };
 }
 
-export interface GroupForSegment {
+export interface Group {
   groupId: string;
   type: string;
+}
+
+export interface GroupForSegment extends Group {
   segmentId: string;
 }
 
@@ -93,7 +96,7 @@ export interface SegmentInput {
   context: string;
   description: string;
   userIds: string[];
-  groups: { groupId: string; type: string }[];
+  groups: Group[];
   subSegmentIds: string[];
   type: SEGMENT_TYPE;
 }
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.html
deleted file mode 100644
index d743ce3824..0000000000
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="add-feature-flag-modal-container">
-  <app-common-dialog
-    [title]="config.title"
-    [cancelBtnLabel]="config.cancelBtnLabel"
-    [primaryActionBtnLabel]="config.primaryActionBtnLabel"
-    [primaryActionBtnColor]="config.primaryActionBtnColor"
-    [primaryActionBtnDisabled]="isLoadingUpsertFeatureFlag$ | async"
-    (primaryActionBtnClicked)="onPrimaryActionBtnClicked()"
-  >
-    <form [formGroup]="featureFlagForm">
-      <mat-form-field appearance="outline">
-        <mat-label>Name</mat-label>
-        <input matInput formControlName="name" placeholder="e.g., My feature flag" />
-        <mat-hint class="form-hint ft-10-400">{{ 'feature-flags.add-flag-modal.name-hint.text' | translate }}</mat-hint>
-      </mat-form-field>
-
-      <mat-form-field appearance="outline">
-        <mat-label>Key</mat-label>
-        <input matInput formControlName="key" placeholder="Key for this feature flag" />
-        <mat-hint class="form-hint ft-10-400"
-          >{{ 'feature-flags.add-flag-modal.key-hint.text' | translate
-          }}<a class="learn-more-link" href="https://www.upgradeplatform.org/">Learn more</a></mat-hint
-        >
-      </mat-form-field>
-
-      <mat-form-field appearance="outline">
-        <mat-label>Description (optional)</mat-label>
-        <input matInput formControlName="description" placeholder="Describe your feature flag" />
-      </mat-form-field>
-
-      <mat-form-field appearance="outline">
-        <mat-label>App Context</mat-label>
-        <mat-select formControlName="appContext">
-          <mat-option *ngFor="let context of appContexts$ | async" [value]="context">{{ context }}</mat-option>
-        </mat-select>
-        <mat-hint class="form-hint ft-10-400"
-          >{{ 'feature-flags.add-flag-modal.app-context-hint.text' | translate
-          }}<a class="learn-more-link" href="https://www.upgradeplatform.org/">Learn more</a></mat-hint
-        >
-      </mat-form-field>
-
-      <app-common-tags-input formControlName="tags"></app-common-tags-input>
-    </form>
-  </app-common-dialog>
-</div>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.scss
deleted file mode 100644
index 12f2b8238a..0000000000
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-:host ::ng-deep .add-feature-flag-modal-container {
-  display: flex;
-  flex-direction: column;
-  align-items: space-between;
-  width: 100%;
-  max-height: 700px;
-}
-
-.title {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.mat-mdc-form-field {
-  width: 100%;
-}
-
-.mat-mdc-form-field:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-.form-hint {
-  color: var(--grey-5);
-}
-
-.learn-more-link {
-  color: var(--blue);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.ts
deleted file mode 100644
index 6ad0cd4d42..0000000000
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
-  CommonModalComponent,
-  CommonTagsInputComponent,
-} from '../../../../../shared-standalone-component-lib/components';
-import {
-  MAT_DIALOG_DATA,
-  MatDialog,
-  MatDialogActions,
-  MatDialogClose,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { CommonModalConfig } from '../../../../../shared-standalone-component-lib/components/common-modal/common-modal-config';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { FeatureFlagsService } from '../../../../../core/feature-flags/feature-flags.service';
-import { CommonFormHelpersService } from '../../../../../shared/services/common-form-helpers.service';
-import { FEATURE_FLAG_STATUS, SEGMENT_TYPE, FILTER_MODE } from '../../../../../../../../../../types/src';
-import { AddFeatureFlagRequest, FeatureFlagFormData } from '../../../../../core/feature-flags/store/feature-flags.model';
-import { Subscription } from 'rxjs';
-import { TranslateModule } from '@ngx-translate/core';
-import { ExperimentService } from '../../../../../core/experiments/experiments.service';
-
-@Component({
-  selector: 'app-add-feature-flag-modal',
-  standalone: true,
-  imports: [
-    CommonModalComponent,
-    MatCardModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatDialogClose,
-    MatSelectModule,
-    CommonModule,
-    NgTemplateOutlet,
-    MatIcon,
-    ReactiveFormsModule,
-    TranslateModule,
-    CommonTagsInputComponent,
-  ],
-  templateUrl: './add-feature-flag-modal.component.html',
-  styleUrl: './add-feature-flag-modal.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class AddFeatureFlagModalComponent {
-  isLoadingUpsertFeatureFlag$ = this.featureFlagsService.isLoadingUpsertFeatureFlag$;
-  appContexts$ = this.featureFlagsService.appContexts$;
-  featureFlagsListLengthChange$ = this.featureFlagsService.featureFlagsListLengthChange$;
-  subscriptions = new Subscription();
-
-  featureFlagForm: FormGroup;
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public config: CommonModalConfig,
-    public dialog: MatDialog,
-    private formBuilder: FormBuilder,
-    private featureFlagsService: FeatureFlagsService,
-    private experimentService: ExperimentService,
-    private formHelpersService: CommonFormHelpersService,
-    public dialogRef: MatDialogRef<AddFeatureFlagModalComponent>
-  ) {}
-
-  ngOnInit(): void {
-    this.experimentService.fetchContextMetaData();
-    this.buildForm();
-    this.listenForFeatureFlagListLengthChanges();
-    this.listenOnNameChangesToUpdateKey();
-  }
-
-  buildForm(): void {
-    this.featureFlagForm = this.formBuilder.group({
-      name: ['', Validators.required],
-      key: ['', Validators.required],
-      description: [''],
-      appContext: ['', Validators.required],
-      tags: [[]],
-    });
-  }
-
-  // Close the modal once the feature flag list length changes, as that indicates actual success
-  listenForFeatureFlagListLengthChanges(): void {
-    this.subscriptions = this.featureFlagsListLengthChange$.subscribe(() => this.closeModal());
-  }
-
-  listenOnNameChangesToUpdateKey(): void {
-    this.featureFlagForm.get('name')?.valueChanges.subscribe((name) => {
-      const keyControl = this.featureFlagForm.get('key');
-      if (keyControl && !keyControl.dirty) {
-        keyControl.setValue(this.featureFlagsService.convertNameStringToKey(name));
-      }
-    });
-  }
-
-  onPrimaryActionBtnClicked(): void {
-    if (this.featureFlagForm.valid) {
-      // Handle extra form validation logic here?
-      this.createAddFeatureFlagRequest();
-    } else {
-      // If the form is invalid, manually mark all form controls as touched
-      this.formHelpersService.triggerTouchedToDisplayErrors(this.featureFlagForm);
-    }
-  }
-
-  createAddFeatureFlagRequest(): void {
-    // temporarily use any until tags feature is added
-    const { name, key, description, appContext, tags }: FeatureFlagFormData = this.featureFlagForm.value;
-
-    const addFeatureFlagRequest: AddFeatureFlagRequest = {
-      name,
-      key,
-      description,
-      status: FEATURE_FLAG_STATUS.DISABLED,
-      context: [appContext],
-      tags: tags, // it is now an array of strings
-      featureFlagSegmentInclusion: {
-        segment: {
-          type: SEGMENT_TYPE.PRIVATE,
-        },
-      },
-      featureFlagSegmentExclusion: {
-        segment: {
-          type: SEGMENT_TYPE.PRIVATE,
-        },
-      },
-      filterMode: FILTER_MODE.INCLUDE_ALL,
-    };
-
-    this.featureFlagsService.addFeatureFlag(addFeatureFlagRequest);
-  }
-
-  closeModal() {
-    this.dialogRef.close();
-  }
-
-  ngOnDestroy() {
-    this.subscriptions.unsubscribe();
-  }
-}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.html
index 8c8e9e9f76..89ef0dfe9f 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.html
@@ -1,33 +1,31 @@
-<div class="modal-container">
-  <ng-container *ngIf="selectedFlag$ | async as flag">
-    <app-common-dialog
-      [title]="data.title"
-      [cancelBtnLabel]="data.cancelBtnLabel"
-      [primaryActionBtnLabel]="data.primaryActionBtnLabel"
-      [primaryActionBtnColor]="data.primaryActionBtnColor"
-      [primaryActionBtnDisabled]="isDeleteActionBtnDisabled$ | async"
-      (primaryActionBtnClicked)="onPrimaryActionBtnClicked(flag.id)"
-    >
-      <div mat-dialog-content class="dialog">
-        <div class="warning-msg">
-          <span>{{ 'feature-flags.delete-modal.warning-message.text' | translate }} "{{flag.name}}"?</span>
-        </div>
-        <div class="ft-18-600 confirm-delete">
-          {{ 'global.delete-confirmation.message.text' | translate }}
-        </div>
-        <mat-form-field
-          class="dense-2 confirmation-field"
-          appearance="outline"
-        >
-          <input
-            class="ft-14-400 confirmation-text-input"
-            matInput
-            [placeholder]="'global.delete.input-placeholder.text' | translate"
-            [(ngModel)]="inputValue"
-            (ngModelChange)="onInputChange($event)"
-          />
-        </mat-form-field>
+<ng-container *ngIf="selectedFlag$ | async as flag">
+  <app-common-dialog
+    [title]="data.title"
+    [cancelBtnLabel]="data.cancelBtnLabel"
+    [primaryActionBtnLabel]="data.primaryActionBtnLabel"
+    [primaryActionBtnColor]="data.primaryActionBtnColor"
+    [primaryActionBtnDisabled]="isDeleteActionBtnDisabled$ | async"
+    (primaryActionBtnClicked)="onPrimaryActionBtnClicked(flag.id)"
+  >
+    <div class="delete-container">
+      <div class="ft-16-400">
+        <span>{{ 'feature-flags.delete-modal.warning-message.text' | translate }} "{{flag.name}}"?</span>
       </div>
-    </app-common-dialog>
-  </ng-container>
-</div>
+      <div class="ft-16-600">
+        {{ 'global.delete-confirmation.message.text' | translate }}
+      </div>
+      <mat-form-field
+        class="dense-2 full-width"
+        appearance="outline"
+      >
+        <input
+          class="ft-14-400"
+          matInput
+          [placeholder]="'global.delete.input-placeholder.text' | translate"
+          [(ngModel)]="inputValue"
+          (ngModelChange)="onInputChange($event)"
+        />
+      </mat-form-field>
+    </div>
+  </app-common-dialog>
+</ng-container>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.scss
index dfa521fccb..446a6ece53 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component.scss
@@ -1,17 +1,8 @@
-:host ::ng-deep .modal-container {
-  width: 100%;
-}
-
-.mat-mdc-form-field {
-  width: 100%;
-}
-
-.warning-msg {
-  font-size: 18px;
-  font-weight: 500;
-  margin-bottom: 14px;
-}
-
-.confirm-delete {
-  margin-bottom: 12px;
+.delete-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  color: var(--dark-grey);
+  padding: 40px 32px 24px;
+  margin: 0;
 }
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.html
deleted file mode 100644
index a9096fff44..0000000000
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<div class="edit-feature-flag-modal-container">
-  <app-common-dialog
-    [title]="config.title"
-    [cancelBtnLabel]="config.cancelBtnLabel"
-    [primaryActionBtnLabel]="config.primaryActionBtnLabel"
-    [primaryActionBtnColor]="config.primaryActionBtnColor"
-    [primaryActionBtnDisabled]="isLoadingUpsertFeatureFlag$ | async"
-    (primaryActionBtnClicked)="onPrimaryActionBtnClicked()"
-  >
-    <form [formGroup]="featureFlagForm">
-      <mat-form-field appearance="outline">
-        <mat-label>Name</mat-label>
-        <input matInput formControlName="name" placeholder="e.g., My feature flag" [value]="flag.name"/>
-        <mat-hint class="form-hint ft-10-400">{{ 'feature-flags.add-flag-modal.name-hint.text' | translate }}</mat-hint>
-      </mat-form-field>
-
-      <mat-form-field appearance="outline">
-        <mat-label>Key</mat-label>
-        <input matInput formControlName="key" placeholder="Key for this feature flag" [value]="flag.key"/>
-        <mat-hint class="form-hint ft-10-400"
-          >{{ 'feature-flags.add-flag-modal.key-hint.text' | translate
-          }}<a class="learn-more-link" href="https://www.upgradeplatform.org/">Learn more</a></mat-hint
-        >
-      </mat-form-field>
-
-      <mat-form-field appearance="outline">
-        <mat-label>Description (optional)</mat-label>
-        <input matInput formControlName="description" placeholder="Describe your feature flag" [value]="flag.description"/>
-      </mat-form-field>
-
-      <mat-form-field appearance="outline">
-        <mat-label>App Context</mat-label>
-        <mat-select formControlName="appContext" [value]="flag.context[0]">
-          <mat-option *ngFor="let context of appContexts$ | async" [value]="context">{{ context }}</mat-option>
-        </mat-select>
-        <mat-hint class="form-hint ft-10-400"
-          >{{ 'feature-flags.add-flag-modal.app-context-hint.text' | translate
-          }}<a class="learn-more-link" href="https://www.upgradeplatform.org/">Learn more</a></mat-hint
-        >
-      </mat-form-field>
-
-      <app-common-tags-input formControlName="tags"></app-common-tags-input>
-    </form>
-  </app-common-dialog>
-</div>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.scss
deleted file mode 100644
index afefcdaef7..0000000000
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-:host ::ng-deep .edit-feature-flag-modal-container {
-  display: flex;
-  flex-direction: column;
-  align-items: space-between;
-  width: 100%;
-  max-height: 700px;
-}
-
-.title {
-  font-size: 18px;
-  font-weight: bold;
-}
-
-.mat-mdc-form-field {
-  width: 100%;
-}
-
-.mat-mdc-form-field:not(:last-child) {
-  margin-bottom: 16.5px;
-}
-
-.form-hint {
-  color: var(--grey-5);
-}
-
-.learn-more-link {
-  color: var(--blue);
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.ts
deleted file mode 100644
index 4487b22bb8..0000000000
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import {
-  CommonModalComponent,
-  CommonTagsInputComponent,
-} from '../../../../../shared-standalone-component-lib/components';
-import {
-  MAT_DIALOG_DATA,
-  MatDialog,
-  MatDialogActions,
-  MatDialogClose,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { CommonModalConfig } from '../../../../../shared-standalone-component-lib/components/common-modal/common-modal-config';
-import { CommonModule, NgTemplateOutlet } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { FeatureFlagsService } from '../../../../../core/feature-flags/feature-flags.service';
-import { CommonFormHelpersService } from '../../../../../shared/services/common-form-helpers.service';
-import { FeatureFlag, FeatureFlagFormData } from '../../../../../core/feature-flags/store/feature-flags.model';
-import { Subscription } from 'rxjs';
-import { TranslateModule } from '@ngx-translate/core';
-import { ExperimentService } from '../../../../../core/experiments/experiments.service';
-
-@Component({
-  selector: 'edit-add-feature-flag-modal',
-  standalone: true,
-  imports: [
-    CommonModalComponent,
-    MatCardModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatDialogClose,
-    MatSelectModule,
-    CommonModule,
-    NgTemplateOutlet,
-    MatIcon,
-    ReactiveFormsModule,
-    TranslateModule,
-    CommonTagsInputComponent,
-  ],
-  templateUrl: './edit-feature-flag-modal.component.html',
-  styleUrl: './edit-feature-flag-modal.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class EditFeatureFlagModalComponent {
-  isLoadingUpsertFeatureFlag$ = this.featureFlagsService.isLoadingUpsertFeatureFlag$;
-  isSelectedFeatureFlagUpdated$ = this.featureFlagsService.isSelectedFeatureFlagUpdated$;
-  selectedFlag$ = this.featureFlagsService.selectedFeatureFlag$;
-  appContexts$ = this.featureFlagsService.appContexts$;
-  subscriptions = new Subscription();
-  flag: FeatureFlag;
-
-  featureFlagForm: FormGroup;
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public config: CommonModalConfig,
-    public dialog: MatDialog,
-    private formBuilder: FormBuilder,
-    private featureFlagsService: FeatureFlagsService,
-    private experimentService: ExperimentService,
-    private formHelpersService: CommonFormHelpersService,
-    public dialogRef: MatDialogRef<EditFeatureFlagModalComponent>
-  ) {}
-
-  ngOnInit(): void {
-    this.experimentService.fetchContextMetaData();
-    this.buildForm();
-    this.initializeFormValues();
-    this.listenForFeatureFlagGetUpdated();
-    this.listenOnNameChangesToUpdateKey();
-  }
-
-  buildForm(): void {
-    this.featureFlagForm = this.formBuilder.group({
-      name: ['', Validators.required],
-      key: ['', Validators.required],
-      description: [''],
-      appContext: ['', Validators.required],
-      tags: [],
-    });
-  }
-
-  initializeFormValues(): void {
-    this.subscriptions.add(
-      this.selectedFlag$.subscribe((selectedFlag) => {
-        this.flag = selectedFlag;
-        if (selectedFlag) {
-          this.featureFlagForm.patchValue({
-            name: selectedFlag.name,
-            key: selectedFlag.key,
-            description: selectedFlag.description,
-            appContext: selectedFlag.context ? selectedFlag.context[0] : '',
-            tags: selectedFlag.tags,
-          });
-        }
-      })
-    );
-  }
-
-  listenOnNameChangesToUpdateKey(): void {
-    this.featureFlagForm.get('name')?.valueChanges.subscribe((name) => {
-      const keyControl = this.featureFlagForm.get('key');
-      if (keyControl && !keyControl.dirty) {
-        keyControl.setValue(this.featureFlagsService.convertNameStringToKey(name));
-      }
-    });
-  }
-
-  // Close the modal once the feature flag list length changes, as that indicates actual success
-  listenForFeatureFlagGetUpdated(): void {
-    this.subscriptions = this.isSelectedFeatureFlagUpdated$.subscribe(() => this.closeModal());
-  }
-
-  onPrimaryActionBtnClicked(): void {
-    if (this.featureFlagForm.valid) {
-      // Handle extra form validation logic here?
-      this.updateFeatureFlagRequest();
-    } else {
-      // If the form is invalid, manually mark all form controls as touched
-      this.formHelpersService.triggerTouchedToDisplayErrors(this.featureFlagForm);
-    }
-  }
-
-  updateFeatureFlagRequest(): void {
-    const { name, key, description, appContext, tags }: FeatureFlagFormData = this.featureFlagForm.value;
-
-    this.flag = {
-      ...this.flag,
-      name,
-      key,
-      description,
-      context: [appContext],
-      tags: tags, // it is now an array of strings
-    };
-
-    this.featureFlagsService.updateFeatureFlag(this.flag);
-  }
-
-  closeModal() {
-    this.dialogRef.close();
-  }
-
-  ngOnDestroy() {
-    this.subscriptions.unsubscribe();
-  }
-}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.html
index 6632f185b8..c11a9dd267 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.html
@@ -1,24 +1,21 @@
-<div class="modal-container">
-  <app-common-dialog
-    [title]="data.title"
-    [cancelBtnLabel]="data.cancelBtnLabel"
-    [primaryActionBtnLabel]="data.primaryActionBtnLabel"
-    [primaryActionBtnColor]="data.primaryActionBtnColor"
-    [primaryActionBtnDisabled]="isImportActionBtnDisabled | async"
-    (primaryActionBtnClicked)="importFiles()"
-  >
-    <div class="drag-drop-container">
-      <app-common-import-container
-        fileType=".json"
-        buttonLabel="Import Json"
-        (filesSelected)="handleFilesSelected($event)"
-        class="full-width"
-      >
-      </app-common-import-container>
-      <p class="ft-12-600 import-message">
-        {{ 'feature-flags.import-feature-flag.message.text' | translate }}
-        <a href="">Learn More</a>
-      </p>
-    </div>
-  </app-common-dialog>
-</div>
+<app-common-dialog
+  [title]="data.title"
+  [cancelBtnLabel]="data.cancelBtnLabel"
+  [primaryActionBtnLabel]="data.primaryActionBtnLabel"
+  [primaryActionBtnColor]="data.primaryActionBtnColor"
+  [primaryActionBtnDisabled]="isImportActionBtnDisabled | async"
+  (primaryActionBtnClicked)="importFiles()"
+>
+  <div class="drag-drop-container">
+    <app-common-import-container
+      fileType=".json"
+      buttonLabel="Choose JSON"
+      (filesSelected)="handleFilesSelected($event)"
+    >
+    </app-common-import-container>
+    <p class="ft-12-400 form-hint">
+      {{ 'feature-flags.import-feature-flag.message.text' | translate }}
+      <a class="learn-more-link" href="https://www.upgradeplatform.org/" target="_blank" rel="noopener noreferrer">Learn more</a>
+    </p>
+  </div>
+</app-common-dialog>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.scss
index 0a13fbb9a7..d517e78705 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component.scss
@@ -1,22 +1,12 @@
 .drag-drop-container {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  color: grey;
+  row-gap: 2px;
+  padding: 40px 32px 24px;
 
-  .full-width {
-    width: 100%;
+  .form-hint {
+    text-indent: 16px;
+    margin-bottom: 0;
   }
 }
 
-.import-message {
-  margin-top: 5px;
-  color: grey;
-}
-
-a {
-  text-decoration: none;
-}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.html
index eda35ea4f7..76d6b7b20b 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.html
@@ -1,36 +1,27 @@
-<div class="update-feature-flag-status-modal-container">
-  <ng-container *ngIf="selectedFlag$ | async as flag">
-    <app-common-dialog
-      [title]="config.title"
-      [cancelBtnLabel]="config.cancelBtnLabel"
-      [primaryActionBtnLabel]="config.primaryActionBtnLabel"
-      [primaryActionBtnColor]="config.primaryActionBtnColor"
-      [primaryActionBtnDisabled$]="isLoadingUpdateFeatureFlagStatus$"
-      (primaryActionBtnClicked)="
-        onPrimaryActionBtnClicked({
-          flagId: flag.id,
-          status:
-            flag.status === FEATURE_FLAG_STATUS.DISABLED ? FEATURE_FLAG_STATUS.ENABLED : FEATURE_FLAG_STATUS.DISABLED
-        })
-      "
-    >
-      <div class="modal-content" *ngIf="flag.status === FEATURE_FLAG_STATUS.DISABLED">
-        <p class="modal-content-text">
-          {{ 'Are you sure you want to enable "' + flag.name + '"?' }}
-        </p>
-        <p class="modal-content-text info">
-          {{ '* Only the enabled include lists will be affected' }}
-        </p>
-      </div>
-
-      <div class="modal-content" *ngIf="flag.status === FEATURE_FLAG_STATUS.ENABLED">
-        <p class="modal-content-text">
-          {{ 'Are you sure you want to disable "' + flag.name + '"?' }}
-        </p>
-        <p class="modal-content-text warn">
-          {{ '* All disabled include lists will be affected.' }}
-        </p>
-      </div>
-    </app-common-dialog>
-  </ng-container>
-</div>
+<ng-container *ngIf="selectedFlag$ | async as flag">
+  <app-common-dialog
+    [title]="config.title"
+    [cancelBtnLabel]="config.cancelBtnLabel"
+    [primaryActionBtnLabel]="config.primaryActionBtnLabel"
+    [primaryActionBtnColor]="config.primaryActionBtnColor"
+    [primaryActionBtnDisabled$]="isLoadingUpdateFeatureFlagStatus$"
+    (primaryActionBtnClicked)="
+      onPrimaryActionBtnClicked({
+        flagId: flag.id,
+        status:
+          flag.status === FEATURE_FLAG_STATUS.DISABLED ? FEATURE_FLAG_STATUS.ENABLED : FEATURE_FLAG_STATUS.DISABLED
+      })
+    "
+  >
+    <div class="confirm-modal-content">
+      <p class="confirm-modal-content-text ft-16-400">
+        {{ 'Are you sure you want to ' + (flag.status === FEATURE_FLAG_STATUS.DISABLED ? 'enable' : 'disable') + ' "' + flag.name + '"?' }}
+      </p>
+      <p class="confirm-modal-content-text ft-14-400" [ngClass]="flag.status === FEATURE_FLAG_STATUS.DISABLED ? 'info' : 'warn'">
+        {{ flag.status === FEATURE_FLAG_STATUS.DISABLED ?
+          '* Only the enabled include lists will be affected.' :
+          '* All enabled include lists will be disabled.' }}
+      </p>
+    </div>
+  </app-common-dialog>
+</ng-container>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.scss
index 4151469c7a..392b832e74 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component.scss
@@ -1,24 +1,19 @@
-:host ::ng-deep .update-feature-flag-status-modal-container {
+.confirm-modal-content {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  align-items: space-between;
-  justify-content: center;
+  row-gap: 16px;
+  padding: 40px 32px;
 
-  .title {
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  .modal-content-text {
-    color: var(--grey-3);
-  }
+  &-text {
+    color: var(--dark-grey);
+    margin-bottom: 0;
 
-  .modal-content-text.info {
-    color: blue;
-  }
+    &.info {
+      color: var(--blue);
+    }
 
-  .modal-content-text.warn {
-    color: red;
+    &.warn {
+      color: var(--red-2);
+    }
   }
 }
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.html
index 16491d7d12..180e27dc90 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.html
@@ -1,20 +1,18 @@
-<div class="upsert-feature-flag-list-container">
-  <app-common-dialog
-    [title]="config.title"
-    [cancelBtnLabel]="config.cancelBtnLabel"
-    [primaryActionBtnLabel]="config.primaryActionBtnLabel"
-    [primaryActionBtnColor]="config.primaryActionBtnColor"
-    (primaryActionBtnClicked)="onPrimaryActionBtnClicked()"
-  >
-    <form [formGroup]="featureFlagListForm" class="full-width">
-      <mat-form-field appearance="outline">
-        <mat-label>Type</mat-label>
-        <mat-select formControlName="type">
-          <mat-option *ngFor="let type of listOptionTypes$ | async" [value]="type.value">
-            {{ type.viewValue }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-    </form>
-  </app-common-dialog>
-</div>
+<app-common-dialog
+  [title]="config.title"
+  [cancelBtnLabel]="config.cancelBtnLabel"
+  [primaryActionBtnLabel]="config.primaryActionBtnLabel"
+  [primaryActionBtnColor]="config.primaryActionBtnColor"
+  (primaryActionBtnClicked)="onPrimaryActionBtnClicked()"
+>
+  <form [formGroup]="featureFlagListForm" class="form-standard dense-3">
+    <mat-form-field appearance="outline">
+      <mat-label class="ft-14-400">Type</mat-label>
+      <mat-select formControlName="type" class="ft-14-400">
+        <mat-option *ngFor="let type of listOptionTypes$ | async" [value]="type.value" class="ft-14-400">
+          {{ type.viewValue }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </form>
+</app-common-dialog>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.scss
index 318f786261..e69de29bb2 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.scss
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component.scss
@@ -1,14 +0,0 @@
-:host ::ng-deep .upsert-feature-flag-list-container {
-  display: flex;
-  flex-direction: column;
-  align-items: space-between;
-  width: 100%;
-
-  .mat-mdc-form-field {
-    width: 100%;
-  }
-
-  .mat-mdc-form-field:not(:last-child) {
-    margin-bottom: 20px;
-  }
-}
\ No newline at end of file
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.html
new file mode 100644
index 0000000000..7c6d91ec3e
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.html
@@ -0,0 +1,45 @@
+<app-common-dialog
+  [title]="config.title"
+  [cancelBtnLabel]="config.cancelBtnLabel"
+  [primaryActionBtnLabel]="config.primaryActionBtnLabel"
+  [primaryActionBtnColor]="config.primaryActionBtnColor"
+  [primaryActionBtnDisabled]="isPrimaryButtonDisabled$ | async"
+  (primaryActionBtnClicked)="onPrimaryActionBtnClicked()"
+  >
+  <form [formGroup]="featureFlagForm" class="form-standard dense-3">
+    <mat-form-field appearance="outline">
+      <mat-label class="ft-14-400">Name</mat-label>
+      <input matInput formControlName="name" placeholder="e.g., My feature flag" class="ft-14-400"/>
+      <mat-hint class="form-hint ft-12-400">
+        {{'feature-flags.upsert-flag-modal.name-hint.text' | translate}}
+      </mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label class="ft-14-400">Key</mat-label>
+      <input matInput formControlName="key" placeholder="Key for this feature flag" class="ft-14-400"/>
+      <mat-hint class="form-hint ft-12-400">
+        {{'feature-flags.upsert-flag-modal.key-hint.text' | translate}}
+        <a class="learn-more-link" href="https://www.upgradeplatform.org/" target="_blank" rel="noopener noreferrer">Learn more</a>
+      </mat-hint>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label class="ft-14-400">Description (optional)</mat-label>
+      <input matInput formControlName="description" placeholder="Describe your feature flag" class="ft-14-400"/>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline">
+      <mat-label class="ft-14-400">App Context</mat-label>
+      <mat-select formControlName="appContext" class="ft-14-400">
+        <mat-option *ngFor="let context of appContexts$ | async" [value]="context" class="ft-14-400">{{ context }}</mat-option>
+      </mat-select>
+      <mat-hint class="form-hint ft-12-400">
+        {{ 'feature-flags.upsert-flag-modal.app-context-hint.text' | translate}}
+        <a class="learn-more-link" href="https://www.upgradeplatform.org/" target="_blank" rel="noopener noreferrer">Learn more</a>
+      </mat-hint>
+    </mat-form-field>
+
+    <app-common-tags-input formControlName="tags"></app-common-tags-input>
+  </form>
+</app-common-dialog>
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.scss b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.spec.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.spec.ts
new file mode 100644
index 0000000000..05ad142e44
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpsertFeatureFlagModalComponent } from './upsert-feature-flag-modal.component';
+
+describe('UpsertFeatureFlagModalComponent', () => {
+  let component: UpsertFeatureFlagModalComponent;
+  let fixture: ComponentFixture<UpsertFeatureFlagModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UpsertFeatureFlagModalComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(UpsertFeatureFlagModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.ts
new file mode 100644
index 0000000000..23ea5877aa
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component.ts
@@ -0,0 +1,222 @@
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import {
+  CommonModalComponent,
+  CommonTagsInputComponent,
+} from '../../../../../shared-standalone-component-lib/components';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogActions,
+  MatDialogClose,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { CommonModalConfig } from '../../../../../shared-standalone-component-lib/components/common-modal/common-modal-config';
+import { CommonModule, NgTemplateOutlet } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { FeatureFlagsService } from '../../../../../core/feature-flags/feature-flags.service';
+import { CommonFormHelpersService } from '../../../../../shared/services/common-form-helpers.service';
+import { FEATURE_FLAG_STATUS, FILTER_MODE } from '../../../../../../../../../../types/src';
+import {
+  AddFeatureFlagRequest,
+  FeatureFlag,
+  FeatureFlagFormData,
+  UpdateFeatureFlagRequest,
+  UPSERT_FEATURE_FLAG_ACTION,
+  UpsertFeatureFlagParams,
+} from '../../../../../core/feature-flags/store/feature-flags.model';
+import { BehaviorSubject, combineLatestWith, map, Observable, startWith, Subscription } from 'rxjs';
+import { TranslateModule } from '@ngx-translate/core';
+import { ExperimentService } from '../../../../../core/experiments/experiments.service';
+import { CommonTextHelpersService } from '../../../../../shared/services/common-text-helpers.service';
+import isEqual from 'lodash.isequal';
+
+@Component({
+  selector: 'upsert-add-feature-flag-modal',
+  standalone: true,
+  imports: [
+    CommonModalComponent,
+    MatCardModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatSelectModule,
+    CommonModule,
+    NgTemplateOutlet,
+    MatIcon,
+    ReactiveFormsModule,
+    TranslateModule,
+    CommonTagsInputComponent,
+  ],
+  templateUrl: './upsert-feature-flag-modal.component.html',
+  styleUrl: './upsert-feature-flag-modal.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UpsertFeatureFlagModalComponent {
+  isLoadingUpsertFeatureFlag$ = this.featureFlagsService.isLoadingUpsertFeatureFlag$;
+  isSelectedFeatureFlagUpdated$ = this.featureFlagsService.isSelectedFeatureFlagUpdated$;
+  selectedFlag$ = this.featureFlagsService.selectedFeatureFlag$;
+  appContexts$ = this.featureFlagsService.appContexts$;
+
+  subscriptions = new Subscription();
+  isInitialFormValueChanged$: Observable<boolean>;
+  isPrimaryButtonDisabled$: Observable<boolean>;
+
+  initialFormValues$ = new BehaviorSubject<FeatureFlagFormData>(null);
+
+  featureFlagForm: FormGroup;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public config: CommonModalConfig<UpsertFeatureFlagParams>,
+    public dialog: MatDialog,
+    private formBuilder: FormBuilder,
+    private featureFlagsService: FeatureFlagsService,
+    private experimentService: ExperimentService,
+    private formHelpersService: CommonFormHelpersService,
+    public dialogRef: MatDialogRef<UpsertFeatureFlagModalComponent>
+  ) {}
+
+  ngOnInit(): void {
+    this.experimentService.fetchContextMetaData();
+    this.createFeatureFlagForm();
+    this.listenForFeatureFlagGetUpdated();
+    this.listenOnNameChangesToUpdateKey();
+    this.listenForIsInitialFormValueChanged();
+    this.listenForPrimaryButtonDisabled();
+  }
+
+  createFeatureFlagForm(): void {
+    const { sourceFlag, action } = this.config.params;
+    const initialValues = this.deriveInitialFormValues(sourceFlag, action);
+
+    this.featureFlagForm = this.formBuilder.group({
+      name: [initialValues.name, Validators.required],
+      key: [initialValues.key, Validators.required],
+      description: [initialValues.description],
+      appContext: [initialValues.appContext, Validators.required],
+      tags: [initialValues.tags],
+    });
+
+    this.initialFormValues$.next(this.featureFlagForm.value);
+  }
+
+  deriveInitialFormValues(sourceFlag: FeatureFlag, action: string) {
+    const name = action === UPSERT_FEATURE_FLAG_ACTION.EDIT ? sourceFlag?.name : '';
+    const key = action === UPSERT_FEATURE_FLAG_ACTION.EDIT ? sourceFlag?.key : '';
+    const description = sourceFlag?.description || '';
+    const appContext = sourceFlag?.context?.[0] || '';
+    const tags = sourceFlag?.tags || [];
+
+    return { name, key, description, appContext, tags };
+  }
+
+  listenOnNameChangesToUpdateKey(): void {
+    this.subscriptions.add(
+      this.featureFlagForm.get('name')?.valueChanges.subscribe((name) => {
+        const keyControl = this.featureFlagForm.get('key');
+        if (keyControl && !keyControl.dirty) {
+          keyControl.setValue(CommonTextHelpersService.convertStringToFeatureFlagKeyFormat(name));
+        }
+      })
+    );
+  }
+
+  listenForIsInitialFormValueChanged() {
+    this.isInitialFormValueChanged$ = this.featureFlagForm.valueChanges.pipe(
+      startWith(this.featureFlagForm.value),
+      map(() => !isEqual(this.featureFlagForm.value, this.initialFormValues$.value))
+    );
+    this.subscriptions.add(this.isInitialFormValueChanged$.subscribe());
+  }
+
+  listenForPrimaryButtonDisabled() {
+    this.isPrimaryButtonDisabled$ = this.isLoadingUpsertFeatureFlag$.pipe(
+      combineLatestWith(this.isInitialFormValueChanged$),
+      map(([isLoading, isInitialFormValueChanged]) => isLoading || !isInitialFormValueChanged)
+    );
+    this.subscriptions.add(this.isPrimaryButtonDisabled$.subscribe());
+  }
+
+  // Close the modal once the feature flag list length changes, as that indicates actual success
+  listenForFeatureFlagGetUpdated(): void {
+    this.subscriptions.add(this.isSelectedFeatureFlagUpdated$.subscribe(() => this.closeModal()));
+  }
+
+  onPrimaryActionBtnClicked(): void {
+    if (this.featureFlagForm.valid) {
+      // Handle extra frontend form validation logic here?
+      this.sendRequest(this.config.params.action, this.config.params.sourceFlag);
+    } else {
+      // If the form is invalid, manually mark all form controls as touched
+      this.formHelpersService.triggerTouchedToDisplayErrors(this.featureFlagForm);
+    }
+  }
+
+  sendRequest(action: UPSERT_FEATURE_FLAG_ACTION, sourceFlag?: FeatureFlag): void {
+    const formData: FeatureFlagFormData = this.featureFlagForm.value;
+
+    if (action === UPSERT_FEATURE_FLAG_ACTION.ADD || action === UPSERT_FEATURE_FLAG_ACTION.DUPLICATE) {
+      this.createAddRequest(formData);
+    } else if (action === UPSERT_FEATURE_FLAG_ACTION.EDIT && sourceFlag) {
+      this.createEditRequest(formData, sourceFlag);
+    } else {
+      console.error('UpsertFeatureFlagModalComponent: sendRequest: Invalid action or missing sourceFlag');
+    }
+  }
+
+  createAddRequest({ name, key, description, appContext, tags }: FeatureFlagFormData): void {
+    const flagRequest: AddFeatureFlagRequest = {
+      name,
+      key,
+      description,
+      context: [appContext],
+      tags,
+      status: FEATURE_FLAG_STATUS.DISABLED,
+      filterMode: FILTER_MODE.INCLUDE_ALL,
+      featureFlagSegmentInclusion: [],
+      featureFlagSegmentExclusion: [],
+    };
+
+    this.featureFlagsService.addFeatureFlag(flagRequest);
+  }
+
+  createEditRequest(
+    { name, key, description, appContext, tags }: FeatureFlagFormData,
+    { id, status, filterMode, featureFlagSegmentInclusion, featureFlagSegmentExclusion }: FeatureFlag
+  ): void {
+    const flagRequest: UpdateFeatureFlagRequest = {
+      id,
+      name,
+      key,
+      description,
+      context: [appContext],
+      tags,
+      status,
+      filterMode,
+      featureFlagSegmentInclusion,
+      featureFlagSegmentExclusion,
+    };
+
+    this.featureFlagsService.updateFeatureFlag(flagRequest);
+  }
+
+  closeModal() {
+    this.dialogRef.close();
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-table/feature-flag-inclusions-table.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-table/feature-flag-inclusions-table.component.ts
index e7f2714fa8..bec582f87a 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-table/feature-flag-inclusions-table.component.ts
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-inclusions-section-card/feature-flag-inclusions-table/feature-flag-inclusions-table.component.ts
@@ -14,9 +14,7 @@ import { tap } from 'rxjs';
   imports: [CommonDetailsParticipantListTableComponent, CommonModule, TranslateModule],
 })
 export class FeatureFlagInclusionsTableComponent {
-  @Input() dataSource$ = this.featureFlagService.selectFeatureFlagInclusions$.pipe(
-    tap((data) => console.log('>> inclusions table component', data))
-  );
+  @Input() dataSource$ = this.featureFlagService.selectFeatureFlagInclusions$;
   isLoading$ = this.featureFlagService.isLoadingSelectedFeatureFlag$;
 
   constructor(private featureFlagService: FeatureFlagsService) {}
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html
index 217493197a..82118def5e 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.html
@@ -19,7 +19,7 @@
     [menuButtonItems]="menuButtonItems"
     [isSectionCardExpanded]="isSectionCardExpanded"
     (slideToggleChange)="onSlideToggleChange($event)"
-    (menuButtonItemClick)="onMenuButtonItemClick($event)"
+    (menuButtonItemClick)="onMenuButtonItemClick($event, flag)"
     (sectionCardExpandChange)="onSectionCardExpandChange($event)"
   ></app-common-section-card-action-buttons>
 
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts
index 01d235c9f6..3ccc896477 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts
+++ b/frontend/projects/upgrade/src/app/features/dashboard/feature-flags/pages/feature-flag-details-page/feature-flag-details-page-content/feature-flag-overview-details-section-card/feature-flag-overview-details-section-card.component.ts
@@ -12,6 +12,7 @@ import { FEATURE_FLAG_STATUS, IMenuButtonItem } from 'upgrade_types';
 import { CommonModule } from '@angular/common';
 import { CommonSectionCardOverviewDetailsComponent } from '../../../../../../../shared-standalone-component-lib/components/common-section-card-overview-details/common-section-card-overview-details.component';
 import { DialogService } from '../../../../../../../shared/services/common-dialog.service';
+import { FeatureFlag } from '../../../../../../../core/feature-flags/store/feature-flags.model';
 @Component({
   selector: 'app-feature-flag-overview-details-section-card',
   standalone: true,
@@ -36,6 +37,7 @@ export class FeatureFlagOverviewDetailsSectionCardComponent {
   menuButtonItems: IMenuButtonItem[] = [
     { name: 'Edit', disabled: false },
     { name: 'Delete', disabled: false },
+    { name: 'Duplicate', disabled: false },
   ];
 
   constructor(private dialogService: DialogService, private featureFlagService: FeatureFlagsService) {}
@@ -70,11 +72,13 @@ export class FeatureFlagOverviewDetailsSectionCardComponent {
     this.dialogService.openDisableFeatureFlagConfirmModel();
   }
 
-  onMenuButtonItemClick(event) {
+  onMenuButtonItemClick(event: 'Edit' | 'Delete' | 'Duplicate', flag: FeatureFlag) {
     if (event === 'Delete') {
       this.dialogService.openDeleteFeatureFlagModal();
     } else if (event === 'Edit') {
-      this.dialogService.openEditFeatureFlagModal();
+      this.dialogService.openEditFeatureFlagModal(flag);
+    } else if (event === 'Duplicate') {
+      this.dialogService.openDuplicateFeatureFlagModal(flag);
     }
   }
 
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-overview/experiment-overview.component.html b/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-overview/experiment-overview.component.html
index 17998c20fa..22ee9f5b64 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-overview/experiment-overview.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-overview/experiment-overview.component.html
@@ -1,8 +1,8 @@
 <div *ngIf="!(isLoadingContextMetaData$ | async); else loadingExperimentOverview" class="shared-modal--step-container">
   <section class="shared-modal--form-container">
-    <form class="experiment-overview" [formGroup]="overviewForm">
+    <form class="experiment-overview dense-3" [formGroup]="overviewForm">
       <mat-form-field
-        class="dense-1 name"
+        class="name"
         appearance="outline"
         subscriptSizing="dynamic"
       >
@@ -19,7 +19,7 @@
       </mat-form-field>
 
       <mat-form-field
-        class="dense-1 description"
+        class="description"
         appearance="outline"
         subscriptSizing="dynamic"
       >
@@ -35,7 +35,7 @@
       </mat-form-field>
 
       <mat-form-field
-        class="dense-1 chips"
+        class="chips"
         appearance="outline"
         subscriptSizing="dynamic"
       >
@@ -51,7 +51,7 @@
 
       <div class="property-container">
         <mat-form-field
-          class="dense-1 unit-of-assignment"
+          class="unit-of-assignment"
           appearance="outline"
           subscriptSizing="dynamic"
         >
@@ -66,7 +66,7 @@
         </mat-form-field>
 
         <mat-form-field
-          class="dense-1 group-type"
+          class="group-type"
           appearance="outline"
           subscriptSizing="dynamic"
           *ngIf="unitOfAssignmentValue === ASSIGNMENT_UNIT.GROUP"
@@ -81,7 +81,7 @@
       </div>
 
       <mat-form-field
-        class="dense-1 consistency-rule"
+        class="consistency-rule"
         appearance="outline"
         subscriptSizing="dynamic"
         *ngIf="unitOfAssignmentValue !== ASSIGNMENT_UNIT.WITHIN_SUBJECTS"
@@ -97,7 +97,7 @@
       </mat-form-field>
 
       <mat-form-field
-        class="dense-1 condition-order"
+        class="condition-order"
         appearance="outline"
         subscriptSizing="dynamic"
         *ngIf="unitOfAssignmentValue === ASSIGNMENT_UNIT.WITHIN_SUBJECTS"
@@ -113,7 +113,7 @@
       </mat-form-field>
 
       <mat-form-field
-        class="dense-1 design-type"
+        class="design-type"
         appearance="outline"
         subscriptSizing="dynamic"
       >
@@ -129,7 +129,7 @@
 
       <div class="stratification-container">
         <mat-form-field
-          class="dense-1 assignment-algorithm"
+          class="assignment-algorithm"
           appearance="outline"
           subscriptSizing="dynamic"
         >
@@ -144,7 +144,7 @@
         </mat-form-field>
 
         <mat-form-field
-          class="dense-1 stratification-factor"
+          class="stratification-factor"
           appearance="outline"
           subscriptSizing="dynamic"
           *ngIf="assignmentAlgorithmValue === 'stratified random sampling'"
@@ -161,7 +161,7 @@
       </div>
 
       <mat-form-field
-        class="dense-1 tags"
+        class="tags"
         appearance="outline"
         subscriptSizing="dynamic"
       >
diff --git a/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-post-condition/experiment-post-condition.component.html b/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-post-condition/experiment-post-condition.component.html
index 3a519c3c67..eac3254212 100644
--- a/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-post-condition/experiment-post-condition.component.html
+++ b/frontend/projects/upgrade/src/app/features/dashboard/home/components/experiment-post-condition/experiment-post-condition.component.html
@@ -1,8 +1,7 @@
 <div class="shared-modal--step-container">
   <section class="shared-modal--form-container">
-    <form [formGroup]="postExperimentRuleForm" class="post-experiment-rule-form">
+    <form [formGroup]="postExperimentRuleForm" class="post-experiment-rule-form dense-3">
       <mat-form-field
-        class="dense-2"
         appearance="outline"
         subscriptSizing="dynamic"
       >
@@ -20,7 +19,6 @@
       </mat-form-field>
 
       <mat-form-field
-        class="dense-2"
         appearance="outline"
         subscriptSizing="dynamic"
       >
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
index c23e8623c5..98f910a1cb 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.html
@@ -1,14 +1,14 @@
 <div
-  class="input-container"
+  class="import-container"
   (dragover)="onDragOver($event)"
   (dragleave)="onDragLeave($event)"
   (drop)="onDrop($event)"
   [ngClass]="{ 'drag-over': (isDragOver | async) }"
 >
-    <mat-icon>file_upload</mat-icon>
-    <p class="ft-14-600 drag-text">Drag & drop or</p>
-    <button mat-flat-button color="primary" (click)="fileInput.click()">
+    <span class="material-symbols-outlined">upload</span>
+    <p class="ft-12-600 drag-text">Drag and drop or</p>
+    <button mat-flat-button color="primary" class="choose-json-btn" (click)="fileInput.click()">
       <span>{{ buttonLabel }}</span>
     </button>
     <input [accept]="fileType" type="file" multiple #fileInput style="display: none" (change)="onFileSelected($event)" />
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
index 744ffe9850..884c6285a2 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-import-container/common-import-container.component.scss
@@ -1,29 +1,29 @@
-.input-container {
-  /* Add your styles here */
-  height: 210px;
-  width: 592px;
-  border: 2px dashed #ccc;
-  padding: 20px;
-  text-align: center;
-  border-radius: 10px;
-  transition: background-color 0.3s;
+.import-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30px;
+  border: 1px dashed var(--dark-grey);
+  border-radius: 4px;
 
   &.drag-over {
-    background-color: #f0f0f0;
+    background-color: var(--zircon);
   }
 
-  .drag-text {
-    margin-bottom: 0.7rem;
+  .material-symbols-outlined {
+    font-size: 72px;
+    color: var(--dark-grey);
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
   }
 
-  mat-icon {
-    height: 70px;
-    width: 70px;
-    font-size: 70px;
-    color: grey;
+  .drag-text {
+    margin-bottom: 8px;
+    color: var(--dark-grey);
   }
 
-  button {
-    font-size: 14px;
+  .choose-json-btn {
+    padding: 0 16px;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal-config.ts b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal-config.ts
index a1a4d866c2..4f9aa4646e 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal-config.ts
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal-config.ts
@@ -4,7 +4,7 @@ export interface CommonModalConfig<ParamsType = unknown> {
   title: string;
   cancelBtnLabel?: string;
   primaryActionBtnLabel?: string;
-  primaryActionBtnColor?: string; // TODO mat-button enum? or just string?
+  primaryActionBtnColor?: string;
   hideFooter?: boolean;
   params?: ParamsType;
 }
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.html
index 5bbef715a7..dce28d3c61 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.html
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.html
@@ -1,9 +1,9 @@
 <mat-card class="common-modal">
   <!-- top part of the dialog -->
-  <header class="header-container">
-    <h4 class="header-title">{{ title }}</h4>
+  <header class="header-container dense-2">
+    <h4 class="ft-22-700 header-title">{{ title }}</h4>
     <button mat-icon-button mat-dialog-close class="close-btn">
-      <mat-icon aria-label="Close dialog">close</mat-icon>
+      <mat-icon>close</mat-icon>
     </button>
   </header>
 
@@ -13,19 +13,17 @@ <h4 class="header-title">{{ title }}</h4>
 
   <!-- bottom part of the dialog -->
   <section *ngIf="!hideFooter" class="footer-container">
-    <mat-dialog-actions style="align-self: end">
-      <button class="dialog-action-btn cancel-btn" mat-flat-button [mat-dialog-close]="false">
-        {{ cancelBtnLabel }}
-      </button>
-      <button
-        class="dialog-action-btn primary-btn"
-        mat-flat-button
-        [color]="primaryActionBtnColor"
-        [disabled]="primaryActionBtnDisabled"
-        (click)="onPrimaryActionBtnClicked()"
-      >
-        {{ primaryActionBtnLabel }}
-      </button>
-    </mat-dialog-actions>
+    <button mat-flat-button mat-dialog-close class="dialog-action-btn cancel-btn" >
+      {{ cancelBtnLabel }}
+    </button>
+    <button
+      class="dialog-action-btn"
+      mat-flat-button
+      [color]="primaryActionBtnColor"
+      [disabled]="primaryActionBtnDisabled"
+      (click)="onPrimaryActionBtnClicked()"
+    >
+      {{ primaryActionBtnLabel }}
+    </button>
   </section>
 </mat-card>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.scss
index 294b4fbe83..732b433089 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-modal/common-modal.component.scss
@@ -1,50 +1,39 @@
 .common-modal {
-  background-color: #fff;
-  width: auto;
-  min-height: auto;
   display: flex;
+  flex-direction: column;
 
   .header-container {
     height: 80px;
-    padding: 0 30px;
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    border-bottom: 1px solid #ddd;
+    padding: 0 20px 0 32px;
+    border-bottom: 1px solid var(--light-grey-2);
 
     .header-title {
-      display: flex;
-      font-size: 20px;
-      font-weight: bold;
-      font-family: 'Open Sans';
-      flex-basis: 80%;
-      padding: 0;
       margin: 0;
     }
 
-    .close-button {
-      display: flex;
-      cursor: pointer;
-      flex-basis: 20%;
+    .close-btn {
+      color: var(--dark-grey);
     }
   }
 
-  .content-container {
-    padding: 30px 30px 20px 30px;
-    min-height: 80px;
-    display: flex;
-  }
-
   .footer-container {
-    padding: 0 30px;
-    border-top: 1px solid #ddd;
     height: 80px;
     display: flex;
     justify-content: flex-end;
+    align-items: center;
+    column-gap: 8px;
+    padding: 0 32px;
+    border-top: 1px solid var(--light-grey-2);
 
     .dialog-action-btn {
-      margin: 18px 0 15px 20px;
+      padding: 0 24px;
+
+      &.cancel-btn {
+        color: var(--disabled-text);
+      }
     }
   }
 }
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.html b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.html
index 2775d6146c..3b4dcfd8fd 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.html
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.html
@@ -1,8 +1,8 @@
-<mat-form-field class="input-container" subscriptSizing="dynamic" appearance="outline">
+<mat-form-field class="input-container full-width" subscriptSizing="dynamic" appearance="outline">
   <mat-label class="ft-14-400">
     {{ 'home.new-experiment.overview.tags.placeHolder' | translate }}
   </mat-label>
-  <div class="container">
+  <div class="chips-container">
     <mat-chip-grid #tagsList aria-label="Tags" formControlName="tags">
       <mat-chip-row
         *ngFor="let componentTag of tags.value"
@@ -10,7 +10,7 @@
         [removable]="isChipRemovable"
         (removed)="removeChip(componentTag)"
       >
-        <span class="ft-12-600 chip-label">
+        <span class="ft-12-400 chip-label">
           {{ componentTag }}
         </span>
         <mat-icon matChipRemove *ngIf="isChipRemovable">cancel</mat-icon>
@@ -21,14 +21,15 @@
         [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
         [matChipInputAddOnBlur]="addChipOnBlur"
         (matChipInputTokenEnd)="addChip($event)"
+        class="ft-14-400"
       />
     </mat-chip-grid>
     <div class="sharing-icon-buttons">
       <button *ngIf="showImportIcon" mat-icon-button class="icon-button" (click)="onActionButtonClick()">
-        <span class="material-symbols-outlined"> upload </span>
+        <span class="material-symbols-outlined">upload</span>
       </button>
       <button *ngIf="showExportIcon" mat-icon-button class="icon-button" (click)="onActionButtonClick()">
-        <span class="material-symbols-outlined"> download </span>
+        <span class="material-symbols-outlined">download</span>
       </button>
     </div>
   </div>
diff --git a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.scss b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.scss
index 654ab0ba87..6f465e7998 100644
--- a/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.scss
+++ b/frontend/projects/upgrade/src/app/shared-standalone-component-lib/components/common-tag-input/common-tag-input.component.scss
@@ -1,32 +1,26 @@
-mat-form-field {
-  width: 100%;
-}
-.icon-buttons-present {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
-.container {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-}
+.input-container {
+  padding-bottom: 16px;
 
-.icon-button {
-  background: none;
-  border: none;
-  box-shadow: none;
-  outline: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-}
+  .chips-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    .icon-button {
+      background: none;
+      border: none;
+      box-shadow: none;
+      outline: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--dark-grey);
+      margin-right: -11px;
 
-.icon-button {
-  color: var(--grey-2);
+      .material-symbols-outlined {
+        font-size: 20px;
+      }
+    }
+  }
 }
diff --git a/frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts b/frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts
index e9a95880e2..10da64b56e 100644
--- a/frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts
+++ b/frontend/projects/upgrade/src/app/shared/services/common-dialog.service.ts
@@ -1,16 +1,18 @@
 import { Injectable } from '@angular/core';
 import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
 import { MatConfirmDialogComponent } from '../components/mat-confirm-dialog/mat-confirm-dialog.component';
-import { AddFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/add-feature-flag-modal/add-feature-flag-modal.component';
 import { CommonModalConfig } from '../../shared-standalone-component-lib/components/common-modal/common-modal-config';
 import { DeleteFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/delete-feature-flag-modal/delete-feature-flag-modal.component';
 
 import { ImportFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/import-feature-flag-modal/import-feature-flag-modal.component';
 import { UpdateFlagStatusConfirmationModalComponent } from '../../features/dashboard/feature-flags/modals/update-flag-status-confirmation-modal/update-flag-status-confirmation-modal.component';
-import { EditFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/edit-feature-flag-modal/edit-feature-flag-modal.component';
+import { UpsertFeatureFlagModalComponent } from '../../features/dashboard/feature-flags/modals/upsert-feature-flag-modal/upsert-feature-flag-modal.component';
 import {
+  FeatureFlag,
+  UPSERT_FEATURE_FLAG_ACTION,
   UPSERT_FEATURE_FLAG_LIST_ACTION,
   UpsertFeatureFlagListParams,
+  UpsertFeatureFlagParams,
 } from '../../core/feature-flags/store/feature-flags.model';
 import { UpsertFeatureFlagListModalComponent } from '../../features/dashboard/feature-flags/modals/upsert-feature-flag-list-modal/upsert-feature-flag-list-modal.component';
 import { CommonSimpleConfirmationModal } from '../../shared-standalone-component-lib/components/common-simple-confirmation-modal/common-simple-confirmation-modal.component';
@@ -21,6 +23,7 @@ import { CommonSimpleConfirmationModal } from '../../shared-standalone-component
 export class DialogService {
   constructor(private dialog: MatDialog) {}
 
+  // This method is used in the older ui
   openConfirmDialog() {
     return this.dialog.open(MatConfirmDialogComponent, {
       width: 'auto',
@@ -28,36 +31,47 @@ export class DialogService {
     });
   }
 
+  // Common modal flags ---------------------------------------- //
   openAddFeatureFlagModal() {
     const commonModalConfig: CommonModalConfig = {
       title: 'Add Feature Flag',
-      primaryActionBtnLabel: 'Add',
+      primaryActionBtnLabel: 'Create',
       primaryActionBtnColor: 'primary',
       cancelBtnLabel: 'Cancel',
+      params: {
+        sourceFlag: null,
+        action: UPSERT_FEATURE_FLAG_LIST_ACTION.ADD,
+      },
     };
-    const config: MatDialogConfig = {
-      data: commonModalConfig,
-      width: '656px',
-      autoFocus: 'first-heading',
-      disableClose: true,
-    };
-    return this.dialog.open(AddFeatureFlagModalComponent, config);
+    return this.openUpsertFeatureFlagModal(commonModalConfig);
   }
 
-  openEditFeatureFlagModal() {
-    const commonModalConfig: CommonModalConfig = {
+  openEditFeatureFlagModal(sourceFlag: FeatureFlag) {
+    const commonModalConfig: CommonModalConfig<UpsertFeatureFlagParams> = {
       title: 'Edit Feature Flag',
       primaryActionBtnLabel: 'Save',
       primaryActionBtnColor: 'primary',
       cancelBtnLabel: 'Cancel',
+      params: {
+        sourceFlag: { ...sourceFlag },
+        action: UPSERT_FEATURE_FLAG_ACTION.EDIT,
+      },
     };
-    const config: MatDialogConfig = {
-      data: commonModalConfig,
-      width: '656px',
-      autoFocus: 'first-heading',
-      disableClose: true,
+    return this.openUpsertFeatureFlagModal(commonModalConfig);
+  }
+
+  openDuplicateFeatureFlagModal(sourceFlag: FeatureFlag) {
+    const commonModalConfig: CommonModalConfig = {
+      title: 'Duplicate Feature Flag',
+      primaryActionBtnLabel: 'Add',
+      primaryActionBtnColor: 'primary',
+      cancelBtnLabel: 'Cancel',
+      params: {
+        sourceFlag: { ...sourceFlag },
+        action: UPSERT_FEATURE_FLAG_ACTION.DUPLICATE,
+      },
     };
-    return this.dialog.open(EditFeatureFlagModalComponent, config);
+    return this.openUpsertFeatureFlagModal(commonModalConfig);
   }
 
   openEnableFeatureFlagConfirmModel() {
@@ -82,6 +96,16 @@ export class DialogService {
     return this.openUpdateFlagStatusConfirmationModal(disableFlagStatusModalConfig);
   }
 
+  openUpsertFeatureFlagModal(commonModalConfig: CommonModalConfig) {
+    const config: MatDialogConfig = {
+      data: commonModalConfig,
+      width: '656px',
+      autoFocus: 'first-heading',
+      disableClose: true,
+    };
+    return this.dialog.open(UpsertFeatureFlagModalComponent, config);
+  }
+
   openUpdateFlagStatusConfirmationModal(commonModalConfig: CommonModalConfig) {
     const config: MatDialogConfig = {
       data: commonModalConfig,
@@ -110,7 +134,7 @@ export class DialogService {
   openAddFeatureFlagListModal(commonModalConfig: CommonModalConfig) {
     const config: MatDialogConfig = {
       data: commonModalConfig,
-      width: '670px',
+      width: '656px',
       // height: '460px',
       height: 'auto', // TODO: fixed height or not?
       autoFocus: 'input',
@@ -128,7 +152,7 @@ export class DialogService {
     };
     const config: MatDialogConfig = {
       data: commonModalConfig,
-      width: '670px',
+      width: '480px',
       autoFocus: 'input',
       disableClose: true,
     };
@@ -144,7 +168,7 @@ export class DialogService {
     };
     const config: MatDialogConfig = {
       data: commonModalConfig,
-      width: '670px',
+      width: '656px',
       autoFocus: 'input',
       disableClose: true,
     };
diff --git a/frontend/projects/upgrade/src/app/shared/services/common-text-helpers.service.ts b/frontend/projects/upgrade/src/app/shared/services/common-text-helpers.service.ts
new file mode 100644
index 0000000000..17bd836c14
--- /dev/null
+++ b/frontend/projects/upgrade/src/app/shared/services/common-text-helpers.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * A service class that provides common text formatting helpers.
+ *
+ * This class contains static methods to format group types, convert names to keys, etc.
+ * The methods are static so they can be used in pure functions like selectors without
+ * needing to create an instance of the service.
+ */
+@Injectable()
+export class CommonTextHelpersService {
+  /**
+   * Formats an array of group types into an array of objects with value and viewValue properties.
+   *
+   * @param groupTypes - An array of group type strings, as defined in context-metadata.
+   * @returns An array of objects where each object contains a value and a viewValue property, or [] if groupTypes is falsy.
+   *
+   * The method is static so it can be used in pure functions like selectors without needing
+   * to create an instance of the service.
+   */
+  public static formatGroupTypes(groupTypes: string[]): { value: string; viewValue: string }[] {
+    if (!Array.isArray(groupTypes)) {
+      return [];
+    }
+    return groupTypes.map((groupType) => {
+      return { value: groupType, viewValue: CommonTextHelpersService.formatGroupTypeViewValue(groupType) };
+    });
+  }
+
+  /**
+   * Formats a group type string into a view value string.
+   *
+   * @param groupType - A group type string.
+   * @returns A formatted view value string.
+   *
+   * The method is static so it can be used in pure functions like selectors without needing
+   * to create an instance of the service.
+   */
+  public static formatGroupTypeViewValue(groupType: string): string {
+    return 'Group: "' + groupType + '"';
+  }
+
+  /**
+   * Converts a name string into a feature-flag permitted key format by trimming, converting to uppercase, and replacing spaces with underscores.
+   *
+   * @param str - A string to be formatted.
+   * @returns A key string.
+   *
+   * The method is static so it can be used in pure functions like selectors without needing
+   * to create an instance of the service.
+   */
+  public static convertStringToFeatureFlagKeyFormat(str: string): string {
+    const upperCaseString = str.trim().toUpperCase();
+    const key = upperCaseString.replace(/ /g, '_');
+    return key;
+  }
+}
diff --git a/frontend/projects/upgrade/src/assets/i18n/en.json b/frontend/projects/upgrade/src/assets/i18n/en.json
index 7c1bde17b1..cc9e8f50c5 100644
--- a/frontend/projects/upgrade/src/assets/i18n/en.json
+++ b/frontend/projects/upgrade/src/assets/i18n/en.json
@@ -354,10 +354,9 @@
   "feature-flags.no-flags-in-table.text": "No feature flags is defined. Create a new feature 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",
-  "feature-flags.add-flag.text": "ADD FLAG",
-  "feature-flags.add-flag-modal.name-hint.text": "The name for this feature flag.",
-  "feature-flags.add-flag-modal.key-hint.text": "A unique key used to retrieve this feature flag from the client application.",
-  "feature-flags.add-flag-modal.app-context-hint.text": "The App Context indicates where the experiment will run, known to UpGrade.",
+  "feature-flags.upsert-flag-modal.name-hint.text": "The name for this feature flag.",
+  "feature-flags.upsert-flag-modal.key-hint.text": "A unique key used to retrieve this feature flag from the client application.",
+  "feature-flags.upsert-flag-modal.app-context-hint.text": "The App Context indicates where the feature flag will run, known to UpGrade.",
   "feature-flags.delete-modal.warning-message.text": "Are you sure you want to delete ",
   "feature-flags.details.inclusions.card.no-data-row.text": "No Include Lists defined. The feature flag will not be applied to any participants.",
   "feature-flags.details.inclusions.card.title.text": "Include Lists",
@@ -388,7 +387,7 @@
   "feature-flags.enable.text": "Enable",
   "feature-flags.add-feature-flag.text": "Add Feature Flag",
   "feature-flags.import-feature-flag.text": "Import Feature Flag",
-  "feature-flags.import-feature-flag.message.text": "The Feature Flag JSON file should include the required properties for it to be imported",
+  "feature-flags.import-feature-flag.message.text": "The Feature Flag JSON file should include the required properties for it to be imported.",
   "feature-flags.export-all-feature-flags.text": "Export All Feature Flags",
   "segments.title.text": "Segments",
   "segments.subtitle.text": "Define new segments to include or exclude from any experiment",
diff --git a/frontend/projects/upgrade/src/styles.scss b/frontend/projects/upgrade/src/styles.scss
index 9d7dce65ee..8e9b162f13 100755
--- a/frontend/projects/upgrade/src/styles.scss
+++ b/frontend/projects/upgrade/src/styles.scss
@@ -96,6 +96,10 @@
   @include mat.all-component-densities(-2);
 }
 
+.dense-3 {
+  @include mat.all-component-densities(-3);
+}
+
 // TODO material specific style which cannot be changed by scope
 .mat-drawer-inner-container {
   display: flex;
@@ -253,6 +257,23 @@ button[mat-icon-button] {
   width: 100%;
 }
 
+.form-standard {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  padding: 32px 32px 16px;
+}
+
+.form-hint {
+  color: var(--dark-grey);
+}
+
+.learn-more-link {
+  color: var(--blue);
+  text-decoration: underline;
+}
+
+
 .mat-mdc-checkbox {
   .mdc-checkbox {
     transform: scale(0.889); // transform 18px to 16px
diff --git a/frontend/projects/upgrade/src/styles/variables.scss b/frontend/projects/upgrade/src/styles/variables.scss
index cf330a8e4c..b066dc2353 100644
--- a/frontend/projects/upgrade/src/styles/variables.scss
+++ b/frontend/projects/upgrade/src/styles/variables.scss
@@ -4,6 +4,7 @@
   --water: #f0f2f9;
   --light-grey-2: #dce0e6;
   --grey-3: #929fae; /* same as --grey-3 */
+  --disabled-text: #8b8b8b;
   --dark-grey: #646e7b;
   --darker-grey: #444e5b;
   --light-black: #222b45; /* same as --black-2 */