diff --git a/frontend/common/providers/withSegmentOverrides.js b/frontend/common/providers/withSegmentOverrides.js
index 497624f4c17c..a958e8a51e70 100644
--- a/frontend/common/providers/withSegmentOverrides.js
+++ b/frontend/common/providers/withSegmentOverrides.js
@@ -27,6 +27,7 @@ export default (WrappedComponent) => {
 
     getOverrides = () => {
       if (this.props.projectFlag) {
+        //todo: migrate to useSegmentFeatureState
         Promise.all([
           data.get(
             `${
diff --git a/frontend/common/services/useProjectFlag.ts b/frontend/common/services/useProjectFlag.ts
index f5e6f6dc35ff..bcce029b7a97 100644
--- a/frontend/common/services/useProjectFlag.ts
+++ b/frontend/common/services/useProjectFlag.ts
@@ -53,7 +53,10 @@ export const projectFlagService = service
         Req['getProjectFlags']
       >({
         providesTags: (res, _, req) => [
-          { id: req?.project, type: 'ProjectFlag' },
+          {
+            id: `${req?.project}-${req?.environmentId}-${req?.segmentId}`,
+            type: 'ProjectFlag',
+          },
         ],
         queryFn: async (args, _, _2, baseQuery) => {
           return await recursivePageGet(
diff --git a/frontend/common/services/useSegmentOverride.ts b/frontend/common/services/useSegmentOverride.ts
index 5941581a068e..4ba22f8aad26 100644
--- a/frontend/common/services/useSegmentOverride.ts
+++ b/frontend/common/services/useSegmentOverride.ts
@@ -1,6 +1,8 @@
 import { Res } from 'common/types/responses'
 import { Req } from 'common/types/requests'
 import { service } from 'common/service'
+import { projectFlagService } from './useProjectFlag'
+import { getStore } from 'common/store'
 
 export const segmentOverrideService = service
   .enhanceEndpoints({ addTagTypes: ['SegmentOverride'] })
@@ -16,6 +18,12 @@ export const segmentOverrideService = service
           method: 'POST',
           url: `environments/${query.environmentId}/features/${query.featureId}/create-segment-override/`,
         }),
+        transformResponse: (res) => {
+          getStore().dispatch(
+            projectFlagService.util.invalidateTags(['ProjectFlag']),
+          )
+          return res
+        },
       }),
       // END OF ENDPOINTS
     }),
diff --git a/frontend/common/stores/feature-list-store.ts b/frontend/common/stores/feature-list-store.ts
index ad3c747bc0cb..1b44eaa9fdc8 100644
--- a/frontend/common/stores/feature-list-store.ts
+++ b/frontend/common/stores/feature-list-store.ts
@@ -12,6 +12,7 @@ import {
   updateProjectFlag,
 } from 'common/services/useProjectFlag'
 import OrganisationStore from './organisation-store'
+import { SortOrder } from 'common/types/requests'
 import {
   ChangeRequest,
   Environment,
@@ -170,7 +171,7 @@ const controller = {
         if (onComplete) {
           onComplete(res)
         }
-        if (store.model) {
+        if (store.model?.features) {
           const index = _.findIndex(store.model.features, { id: flag.id })
           store.model.features[index] = controller.parseFlag(flag)
           store.model.lastSaved = new Date().valueOf()
@@ -438,7 +439,7 @@ const controller = {
 
         Promise.all([prom, segmentOverridesRequest])
           .then(([res, segmentRes]) => {
-            if (store.model) {
+            if (store.model?.keyedEnvironmentFeatures) {
               store.model.keyedEnvironmentFeatures[projectFlag.id] = res
               if (segmentRes) {
                 const feature = _.find(
@@ -729,6 +730,12 @@ const controller = {
           if (version.error) {
             throw version.error
           }
+          getStore().dispatch(
+            projectFlagService.util.invalidateTags(['ProjectFlag']),
+          )
+          if(!store.model) {
+            return
+          }
           // Fetch and update the latest environment feature state
           return getVersionFeatureState(getStore(), {
             environmentId: ProjectStore.getEnvironmentIdFromKey(environmentId),
@@ -977,7 +984,12 @@ const store = Object.assign({}, BaseStore, {
   },
   id: 'features',
   paging: {},
-  sort: { default: true, label: 'Name', sortBy: 'name', sortOrder: 'asc' },
+  sort: {
+    default: true,
+    label: 'Name',
+    sortBy: 'name',
+    sortOrder: SortOrder.ASC,
+  },
 })
 
 store.dispatcherIndex = Dispatcher.register(store, (payload) => {
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index c7f59b6b9a29..c2dbbeddfa7a 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -23,6 +23,7 @@ import {
   StageTrigger,
   StageActionType,
   StageActionBody,
+  TagStrategy,
 } from './responses'
 import { UtmsType } from './utms'
 
@@ -102,7 +103,10 @@ export type RegisterRequest = {
   marketing_consent_given?: boolean
   utm_data?: UtmsType
 }
-
+export enum SortOrder {
+  ASC = 'ASC',
+  DESC = 'DESC',
+}
 export interface StageActionRequest {
   action_type: StageActionType | ''
   action_body: StageActionBody
@@ -240,7 +244,7 @@ export type Req = {
     projectId: string
   }
   createTag: { projectId: string; tag: Omit<Tag, 'id'> }
-  getSegment: { projectId: string; id: string }
+  getSegment: { projectId: number; id: string }
   updateAccount: Account
   deleteAccount: {
     current_password: string
@@ -341,9 +345,20 @@ export type Req = {
   }
   getProjectFlags: {
     project: string
-    environmentId?: string
-    tags?: string[]
+    environment?: number
+    segment?: number
+    search?: string | null
+    releasePipelines?: number[]
+    page?: number
+    tag_strategy?: TagStrategy
+    tags?: string
     is_archived?: boolean
+    value_search?: string | null
+    is_enabled?: boolean | null
+    owners?: number[]
+    group_owners?: number[]
+    sort_field?: string
+    sort_direction?: SortOrder
   }
   getProjectFlag: { project: string | number; id: string }
   getRolesPermissionUsers: { organisation_id: number; role_id: number }
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 4fde1a121f0c..22b375c3179b 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -506,6 +506,8 @@ export type ProjectFlag = {
   created_date: string
   default_enabled: boolean
   description?: string
+  environment_feature_state?: FeatureState
+  segment_feature_state?: FeatureState
   id: number
   initial_value: FlagsmithValue
   is_archived: boolean
diff --git a/frontend/web/components/Breadcrumb.tsx b/frontend/web/components/Breadcrumb.tsx
index cc4434e8b0ba..ffc230626f30 100644
--- a/frontend/web/components/Breadcrumb.tsx
+++ b/frontend/web/components/Breadcrumb.tsx
@@ -1,31 +1,39 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 
 type BreadcrumbType = {
   items: { title: string; url: string }[]
-  currentPage: string
+  currentPage: ReactNode
+  isCurrentPageMuted?: boolean
 }
 
-const Breadcrumb: FC<BreadcrumbType> = ({ currentPage, items }) => {
+const Breadcrumb: FC<BreadcrumbType> = ({
+  currentPage,
+  isCurrentPageMuted = true,
+  items,
+}) => {
   return (
-    <nav aria-label='breadcrumb'>
-      <ol className='breadcrumb my-2 py-1'>
-        {items?.map((item) => (
-          <li key={item.url} className='breadcrumb-item h6 fs-lg lh-sm'>
-            <Link className='text-primary' to={item.url}>
-              {item.title}
-            </Link>
-          </li>
-        ))}
-        <li
-          className='breadcrumb-item active h6 text-muted lh-sm '
+    <div className='d-flex align-items-center my-2 py-1'>
+      {items?.map((item) => (
+        <>
+          <Link className='text-primary h6 mb-0' to={item.url}>
+            {item.title}
+          </Link>
+          <div className='text-muted mx-2 h6 mb-0'>/</div>
+        </>
+      ))}
+      {isCurrentPageMuted ? (
+        <div
+          className='active h6 text-muted lh-sm '
           aria-current='page'
           style={{ opacity: 0.6 }}
         >
           {currentPage}
-        </li>
-      </ol>
-    </nav>
+        </div>
+      ) : (
+        currentPage
+      )}
+    </div>
   )
 }
 
diff --git a/frontend/web/components/EnvironmentSelect.tsx b/frontend/web/components/EnvironmentSelect.tsx
index 7de2f6cbf558..6b3800d47b7a 100644
--- a/frontend/web/components/EnvironmentSelect.tsx
+++ b/frontend/web/components/EnvironmentSelect.tsx
@@ -1,12 +1,13 @@
 import React, { FC, useMemo } from 'react'
 import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
 import { Props } from 'react-select/lib/Select'
+import { Environment } from 'common/types/responses'
 
 export type EnvironmentSelectType = Partial<Omit<Props, 'value'>> & {
   projectId: number
   value?: string
   label?: string
-  onChange: (value: string) => void
+  onChange: (value: string, environment: Environment | null) => void
   showAll?: boolean
   readOnly?: boolean
   idField?: 'id' | 'api_key'
@@ -30,6 +31,7 @@ const EnvironmentSelect: FC<EnvironmentSelectType> = ({
   const environments = useMemo(() => {
     return (data?.results || [])
       ?.map((v) => ({
+        environment: v,
         label: v.name,
         value: `${v[idField]}`,
       }))
@@ -66,12 +68,14 @@ const EnvironmentSelect: FC<EnvironmentSelectType> = ({
               }
         }
         options={(showAll
-          ? [{ label: 'All Environments', value: '' }]
+          ? [{ environment: null, label: 'All Environments', value: '' }]
           : []
         ).concat(environments)}
-        onChange={(value: { value: string; label: string }) =>
-          onChange(value?.value || '')
-        }
+        onChange={(value: {
+          value: string
+          label: string
+          environment: Environment
+        }) => onChange(value?.value || '', value?.environment)}
       />
     </div>
   )
diff --git a/frontend/web/components/PanelSearch.tsx b/frontend/web/components/PanelSearch.tsx
index fb75c398a0cd..fecbf6aaf8e6 100644
--- a/frontend/web/components/PanelSearch.tsx
+++ b/frontend/web/components/PanelSearch.tsx
@@ -20,10 +20,11 @@ import Paging from './Paging'
 import _ from 'lodash'
 import Panel from './base/grid/Panel'
 import Utils from 'common/utils/utils'
+import { SortOrder } from 'common/types/requests'
 
 export type SortOption = {
   value: string
-  order: 'asc' | 'desc'
+  order: SortOrder
   default?: boolean
   label: string
 }
@@ -56,7 +57,7 @@ export interface PanelSearchProps<T> {
   className?: string
   onSortChange?: (args: {
     sortBy: string | null
-    sortOrder: 'asc' | 'desc' | null
+    sortOrder: SortOrder | null
   }) => void
   itemHeight?: number
   action?: ReactNode
@@ -90,7 +91,7 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
   const [sortBy, setSortBy] = useState<string | null>(
     defaultSortingOption ? defaultSortingOption.value : null,
   )
-  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(
+  const [sortOrder, setSortOrder] = useState<SortOrder | null>(
     defaultSortingOption ? defaultSortingOption.order : null,
   )
   const [internalSearch, setInternalSearch] = useState<string>('')
@@ -102,7 +103,11 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
   const sortItems = useCallback(
     (itemsToSort: T[]): T[] => {
       if (sortBy) {
-        return _.orderBy(itemsToSort, [sortBy], [sortOrder || 'asc'])
+        return _.orderBy(
+          itemsToSort,
+          [sortBy],
+          [(sortOrder?.toLowerCase() || 'asc') as 'asc' | 'desc'],
+        )
       }
       return itemsToSort
     },
@@ -127,7 +132,8 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
     (e: React.MouseEvent<HTMLAnchorElement>, sortOption: SortOption) => {
       e.preventDefault()
       if (sortOption.value === sortBy) {
-        const newSortOrder = sortOrder === 'asc' ? 'desc' : 'asc'
+        const newSortOrder =
+          sortOrder === SortOrder.ASC ? SortOrder.DESC : SortOrder.ASC
         setSortOrder(newSortOrder)
         onSortChange && onSortChange({ sortBy, sortOrder: newSortOrder })
       } else {
@@ -247,7 +253,9 @@ const PanelSearch = <T,>(props: PanelSearchProps<T>): ReactElement => {
                             {currentSort?.value === sortOption.value && (
                               <IonIcon
                                 icon={
-                                  sortOrder === 'asc' ? chevronUp : chevronDown
+                                  sortOrder === SortOrder.ASC
+                                    ? chevronUp
+                                    : chevronDown
                                 }
                               />
                             )}
diff --git a/frontend/web/components/ProjectManageWidget.tsx b/frontend/web/components/ProjectManageWidget.tsx
index 7cd29e5e617f..69e4a0f62c09 100644
--- a/frontend/web/components/ProjectManageWidget.tsx
+++ b/frontend/web/components/ProjectManageWidget.tsx
@@ -10,6 +10,7 @@ import ConfigProvider from 'common/providers/ConfigProvider'
 import { useGetOrganisationsQuery } from 'common/services/useOrganisation'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
 import { Project } from 'common/types/responses'
+import { SortOrder } from 'common/types/requests'
 import Button from './base/forms/Button'
 import PanelSearch from './PanelSearch'
 import Icon from './Icon'
@@ -229,7 +230,7 @@ const ProjectManageWidget: FC<SegmentsPageType> = ({ organisationId }) => {
                       {
                         default: true,
                         label: 'Name',
-                        order: 'asc',
+                        order: SortOrder.ASC,
                         value: 'name',
                       },
                     ]}
diff --git a/frontend/web/components/SegmentOverrides.js b/frontend/web/components/SegmentOverrides.js
index 81f62416e61e..ff6e896bba21 100644
--- a/frontend/web/components/SegmentOverrides.js
+++ b/frontend/web/components/SegmentOverrides.js
@@ -16,9 +16,11 @@ import Icon from './Icon'
 import SegmentOverrideLimit from './SegmentOverrideLimit'
 import { getStore } from 'common/store'
 import { getEnvironment } from 'common/services/useEnvironment'
+import { getSegment } from 'common/services/useSegment'
 import Tooltip from './Tooltip'
 import SegmentsIcon from './svg/SegmentsIcon'
 import SegmentOverrideActions from './SegmentOverrideActions'
+import Button from './base/forms/Button'
 
 const arrayMoveMutate = (array, from, to) => {
   array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0])
@@ -49,6 +51,7 @@ const SegmentOverrideInner = class Override extends React.Component {
       disabled,
       environmentId,
       hideViewSegment,
+      highlightSegmentId,
       index,
       multivariateOptions,
       name,
@@ -82,6 +85,7 @@ const SegmentOverrideInner = class Override extends React.Component {
     const changed = !v.id || this.state.changed
     const showValue = !(multivariateOptions && multivariateOptions.length)
     const controlPercent = Utils.calculateControl(mvOptions)
+    const isHighlighted = highlightSegmentId && v.segment === highlightSegmentId
     if (!v || v.toRemove) {
       if (this.props.id) {
         return (
@@ -101,7 +105,7 @@ const SegmentOverrideInner = class Override extends React.Component {
           this.props.id
             ? ''
             : ' panel user-select-none panel-without-heading panel--draggable pb-0'
-        }`}
+        }${isHighlighted ? ' border-2 border-primary' : ''}`}
       >
         <Row className='p-0 table-header px-3 py-1' space>
           <div className='flex flex-1 text-left'>
@@ -349,6 +353,7 @@ const SegmentOverrideListInner = ({
   disabled,
   environmentId,
   hideViewSegment,
+  highlightSegmentId,
   id,
   items,
   multivariateOptions,
@@ -374,6 +379,7 @@ const SegmentOverrideListInner = ({
             name={name}
             segment={value.segment}
             hideViewSegment={hideViewSegment}
+            highlightSegmentId={highlightSegmentId}
             onSortEnd={onSortEnd}
             disabled={disabled}
             showEditSegment={showEditSegment}
@@ -433,6 +439,38 @@ class TheComponent extends Component {
         totalSegmentOverrides: res.data.total_segment_overrides,
       })
     })
+    this.checkPreselectedSegment()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (
+      this.props.highlightSegmentId &&
+      this.props.highlightSegmentId !== prevProps.highlightSegmentId
+    ) {
+      this.checkPreselectedSegment()
+    }
+  }
+
+  checkPreselectedSegment = () => {
+    const { highlightSegmentId, projectId, value } = this.props
+    if (!highlightSegmentId) return
+
+    const existingOverride = value?.find((v) => v.segment === highlightSegmentId)
+    if (existingOverride) {
+      return
+    }
+
+    getSegment(getStore(), {
+      id: highlightSegmentId,
+      projectId: projectId,
+    }).then((res) => {
+      this.setState({
+        selectedSegment: {
+          label: res.data.name,
+          value: res.data.id,
+        },
+      })
+    })
   }
 
   addItem = () => {
@@ -573,19 +611,37 @@ class TheComponent extends Component {
             !this.props.disableCreate &&
             !this.props.showCreateSegment &&
             !this.props.readOnly && (
-              <Flex className='text-left'>
-                <SegmentSelect
-                  disabled={!!isLimitReached}
-                  projectId={this.props.projectId}
-                  data-test='select-segment'
-                  placeholder='Create a Segment Override...'
-                  filter={filter}
-                  value={this.state.selectedSegment}
-                  onChange={(selectedSegment) =>
-                    this.setState({ selectedSegment }, this.addItem)
-                  }
-                />
-              </Flex>
+              <Row className='text-left gap-2'>
+                <div className='flex-1'>
+                  <SegmentSelect
+                    className="w-100"
+                    disabled={!!isLimitReached}
+                    projectId={this.props.projectId}
+                    data-test='select-segment'
+                    placeholder='Create a Segment Override...'
+                    filter={filter}
+                    value={this.state.selectedSegment?.value}
+                    onChange={(selectedSegment) => {
+                      if (this.props.highlightSegmentId) {
+                        this.setState({ selectedSegment })
+                      } else {
+                        this.setState({ selectedSegment }, this.addItem)
+                      }
+                    }}
+                  />
+                </div>
+                {this.props.highlightSegmentId &&
+                  this.state.selectedSegment && (
+                    <Button
+                      disabled={!!isLimitReached}
+                      onClick={this.addItem}
+                      data-test='create-segment-override-btn'
+                      className='align-self-start'
+                    >
+                      Create
+                    </Button>
+                  )}
+              </Row>
             )}
           {this.props.showCreateSegment && !this.state.segmentEditId && (
             <div className='create-segment-overrides'>
@@ -710,6 +766,7 @@ class TheComponent extends Component {
                       onSortEnd={this.onSortEnd}
                       projectFlag={this.props.projectFlag}
                       hideViewSegment={this.props.hideViewSegment}
+                      highlightSegmentId={this.props.highlightSegmentId}
                     />
                     <div className='text-left mt-4'>
                       <JSONReference
diff --git a/frontend/web/components/SegmentSelect.tsx b/frontend/web/components/SegmentSelect.tsx
index 3797bbbfd59e..020e3cfea366 100644
--- a/frontend/web/components/SegmentSelect.tsx
+++ b/frontend/web/components/SegmentSelect.tsx
@@ -13,12 +13,14 @@ type SegmentSelectType = {
   projectId: string
   'data-test'?: string
   placeholder?: string
+  className?: string
   value: SelectProps['value']
   onChange: SelectProps['onChange']
   filter?: (segments: Segment) => Segment[]
 }
 
 const SegmentSelect: FC<SegmentSelectType> = ({
+  className,
   filter,
   projectId,
   ...rest
@@ -41,12 +43,13 @@ const SegmentSelect: FC<SegmentSelectType> = ({
     <Select
       data-test={rest['data-test']}
       placeholder={rest.placeholder}
-      value={rest.value}
+      value={rest.value ? options.find((v) => v.value === rest.value) : null}
       isDisabled={rest.disabled}
       onChange={rest.onChange}
       onInputChange={(e: any) => {
         searchItems(Utils.safeParseEventValue(e))
       }}
+      className={className}
       components={{
         Menu: ({ ...props }: any) => {
           return (
diff --git a/frontend/web/components/feature-override/FeatureOverrideRow.tsx b/frontend/web/components/feature-override/FeatureOverrideRow.tsx
index 7ff0cf0a9484..900baa90be3f 100644
--- a/frontend/web/components/feature-override/FeatureOverrideRow.tsx
+++ b/frontend/web/components/feature-override/FeatureOverrideRow.tsx
@@ -1,7 +1,6 @@
 import classNames from 'classnames'
-import React, { FC, useEffect, useMemo, useRef } from 'react'
+import React, { FC, useCallback, useEffect, useMemo, useRef } from 'react'
 import {
-  Environment,
   FeatureState,
   IdentityFeatureState,
   ProjectFlag,
@@ -26,11 +25,10 @@ import Button from 'components/base/forms/Button'
 import Icon from 'components/Icon'
 import CreateFlagModal from 'components/modals/CreateFlag'
 import { useHistory } from 'react-router-dom'
-import ProjectStore from 'common/stores/project-store'
 import ConfirmToggleFeature from 'components/modals/ConfirmToggleFeature'
 import FeatureOverrideCTA from './FeatureOverrideCTA'
 
-const COLUMN_WIDTHS = [200, 48, 78]
+const COLUMN_WIDTHS = [200, 60, 78]
 
 type FeatureOverrideRowProps = {
   shouldPreselect?: boolean
@@ -45,6 +43,7 @@ type FeatureOverrideRowProps = {
   projectFlag: ProjectFlag
   environmentFeatureState: FeatureState
   overrideFeatureState?: FeatureState | IdentityFeatureState | null
+  highlightSegmentId?: number
 }
 
 const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
@@ -60,6 +59,7 @@ const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
   shouldPreselect,
   toggleDataTest,
   valueDataTest,
+  highlightSegmentId,
 }) => {
   const hasUserOverride =
     !!overrideFeatureState?.identity ||
@@ -76,35 +76,36 @@ const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
   const actualValue = overrideFeatureState?.feature_state_value ?? flagValue
 
   const onToggle = () => {
-    const confirmToggle = (projectFlag: any, environmentFlag: any, cb: any) => {
-      openModal(
-        'Toggle Feature',
-        <ConfirmToggleFeature
-          identity={identity}
-          identityName={identityName}
-          environmentId={environmentId}
-          projectFlag={projectFlag}
-          environmentFlag={environmentFlag}
-          cb={cb}
-        />,
-        'p-0',
-      )
+    if (level === 'segment') {
+      onClick()
+      return
     }
 
-    confirmToggle(projectFlag, overrideFeatureState, () =>
-      AppActions.toggleUserFlag({
-        environmentFlag: environmentFeatureState,
-        environmentId,
-        identity,
-        identityFlag: overrideFeatureState,
-        projectFlag: {
-          id: featureId,
-        },
-      }),
+    openModal(
+      'Toggle Feature',
+      <ConfirmToggleFeature
+        identity={identity}
+        identityName={identityName}
+        environmentId={environmentId}
+        projectFlag={projectFlag}
+        environmentFlag={overrideFeatureState}
+        cb={() =>
+          AppActions.toggleUserFlag({
+            environmentFlag: environmentFeatureState,
+            environmentId,
+            identity,
+            identityFlag: overrideFeatureState,
+            projectFlag: {
+              id: featureId,
+            },
+          })
+        }
+      />,
+      'p-0',
     )
   }
 
-  const onClick = () => {
+  const onClick = useCallback(() => {
     if (
       !projectFlag ||
       !environmentId ||
@@ -112,8 +113,14 @@ const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
       !overrideFeatureState
     )
       return
-
-    history.replace(`${document.location.pathname}?flag=${projectFlag.name}`)
+    const tab = level === 'segment' ? 'segment-overrides' : 'value'
+    const params = Utils.fromParam()
+    const newParams = Utils.toParam({
+      ...params,
+      flag: projectFlag.name,
+      tab,
+    })
+    history.replace(`${document.location.pathname}?${newParams}`)
     API.trackEvent(Constants.events.VIEW_USER_FEATURE)
     openModal(
       <span>
@@ -142,13 +149,30 @@ const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
           ...overrideFeatureState,
         }}
         environmentFlag={environmentFeatureState}
+        highlightSegmentId={highlightSegmentId}
       />,
       'side-modal create-feature-modal overflow-y-auto',
       () => {
-        history.replace(document.location.pathname)
+        const params = Utils.fromParam()
+        const newParams = Utils.toParam({
+          ...params,
+          flag: undefined,
+        })
+        history.replace(`${document.location.pathname}?${newParams}`)
       },
     )
-  }
+  }, [
+    projectFlag,
+    environmentId,
+    environmentFeatureState,
+    overrideFeatureState,
+    level,
+    history,
+    identity,
+    identityName,
+    projectId,
+    highlightSegmentId,
+  ])
 
   useEffect(() => {
     if (shouldPreselect && !hasPreselected.current) {
@@ -210,7 +234,11 @@ const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
       data-test={dataTest}
       onClick={onClick}
     >
-      <Flex className='table-column pt-0'>
+      <Flex
+        className={classNames('table-column pt-0', {
+          'pb-0': viewMode === 'compact',
+        })}
+      >
         <div>
           <Flex>
             <div className='d-flex align-items-center'>
@@ -226,6 +254,7 @@ const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
             )}
             {showSegmentOverride && (
               <SegmentOverrideDescription
+                level={level}
                 showEnabledOverride={hasEnabledDiff}
                 showValueOverride={!hasEnabledDiff}
                 controlEnabled={flagEnabled}
@@ -261,23 +290,24 @@ const FeatureOverrideRow: FC<FeatureOverrideRowProps> = ({
           />,
         )}
       </div>
-
-      <div
-        className='table-column p-0'
-        style={{ width: COLUMN_WIDTHS[2] }}
-        onClick={stopPropagation}
-      >
-        <FeatureOverrideCTA
-          identifier={identifier}
-          identity={identity}
-          environmentId={environmentId}
-          projectFlag={projectFlag}
-          environmentFeatureState={environmentFeatureState}
-          hasUserOverride={hasUserOverride}
-          overrideFeatureState={overrideFeatureState}
-          level={level}
-        />
-      </div>
+      {level === 'identity' && (
+        <div
+          className='table-column p-0'
+          style={{ width: COLUMN_WIDTHS[2] }}
+          onClick={stopPropagation}
+        >
+          <FeatureOverrideCTA
+            identifier={identifier}
+            identity={identity}
+            environmentId={environmentId}
+            projectFlag={projectFlag}
+            environmentFeatureState={environmentFeatureState}
+            hasUserOverride={hasUserOverride}
+            overrideFeatureState={overrideFeatureState}
+            level={level}
+          />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/frontend/web/components/feature-override/SegmentOverrideDescription.tsx b/frontend/web/components/feature-override/SegmentOverrideDescription.tsx
index 3ecc95720819..82d51c4e7869 100644
--- a/frontend/web/components/feature-override/SegmentOverrideDescription.tsx
+++ b/frontend/web/components/feature-override/SegmentOverrideDescription.tsx
@@ -8,11 +8,13 @@ type SegmentOverrideDescriptionType = {
   showValueOverride: boolean
   controlEnabled: boolean
   controlValue: FlagsmithValue
+  level: 'segment' | 'identity'
 }
 
 const SegmentOverrideDescription: FC<SegmentOverrideDescriptionType> = ({
   controlEnabled,
   controlValue,
+  level,
   showEnabledOverride,
   showValueOverride,
 }) => {
@@ -24,11 +26,13 @@ const SegmentOverrideDescription: FC<SegmentOverrideDescriptionType> = ({
             <Flex>
               <span className='list-item-subtitle d-flex text-primary align-items-center'>
                 <SegmentsIcon className='me-1' width={16} fill='#6837fc' />
-                {`This flag is being overridden by a segment and would normally be`}
+                {`This flag is being overridden by ${
+                  level === 'segment' ? 'this' : 'a'
+                } segment and would normally be`}
                 <div className='ph-1 ml-1 mr-1 fw-semibold'>
                   {controlEnabled ? 'on' : 'off'}
                 </div>{' '}
-                for this user
+                {level === 'identity' ? 'for this user' : ''}
               </span>
             </Flex>
           </Row>
@@ -37,15 +41,13 @@ const SegmentOverrideDescription: FC<SegmentOverrideDescriptionType> = ({
       {showValueOverride && (
         <span className='d-flex list-item-subtitle text-primary align-items-center'>
           <SegmentsIcon className='me-1' width={16} fill='#6837fc' />
-          {`This feature is being
-                                                        overridden by a segment
-                                                        and would normally be`}
+          {`This feature is being overridden by a segment and would normally be`}
           <FeatureValue
             className='ml-1 chip--xs'
             includeEmpty
             value={`${controlValue}`}
           />{' '}
-          for this user
+          {level === 'identity' ? 'for this user' : ''}
         </span>
       )}
     </>
diff --git a/frontend/web/components/feature-page/FeatureFilters.tsx b/frontend/web/components/feature-page/FeatureFilters.tsx
index 71ae288a871a..d52a683977b8 100644
--- a/frontend/web/components/feature-page/FeatureFilters.tsx
+++ b/frontend/web/components/feature-page/FeatureFilters.tsx
@@ -12,6 +12,7 @@ import { isEqual } from 'lodash'
 import Utils from 'common/utils/utils'
 import { TagStrategy } from 'common/types/responses'
 import Format from 'common/utils/format'
+import { Req, SortOrder } from 'common/types/requests'
 
 export type FiltersValue = {
   search: string | null
@@ -41,7 +42,7 @@ const DEFAULTS: FiltersValue = {
   owners: [],
   page: 1,
   search: '',
-  sort: { label: 'Name', sortBy: 'name', sortOrder: 'asc' },
+  sort: { label: 'Name', sortBy: 'name', sortOrder: SortOrder.ASC },
   tag_strategy: 'INTERSECTION',
   tags: [],
   value_search: '',
@@ -95,7 +96,7 @@ export const parseFiltersFromUrlParams = (
     sort: {
       label: Format.camelCase(params.sortBy || 'Name'),
       sortBy: params.sortBy || 'name',
-      sortOrder: params.sortOrder || 'asc',
+      sortOrder: params.sortOrder || SortOrder.ASC,
     },
     tag_strategy: params.tag_strategy || 'INTERSECTION',
     tags:
@@ -108,14 +109,16 @@ export const parseFiltersFromUrlParams = (
 }
 
 //Converts filter to api expected properties
-export const getServerFilter = (f: FiltersValue) => ({
-  ...f,
-  group_owners: f.group_owners?.length ? f.group_owners : undefined,
-  owners: f.owners.length ? f.owners : undefined,
-  search: (f.search || '').trim(),
-  sort: f.sort,
-  tags: f.tags.length ? f.tags.join(',') : undefined,
-})
+export const getServerFilter = (f: FiltersValue) =>
+  ({
+    ...f,
+    group_owners: f.group_owners?.length ? f.group_owners : undefined,
+    owners: f.owners.length ? f.owners : undefined,
+    search: (f.search || '').trim(),
+    sort_direction: f.sort?.sortOrder,
+    sort_field: f.sort?.sortBy,
+    tags: f.tags.length ? f.tags.join(',') : undefined,
+  } as Omit<Req['getProjectFlags'], 'project'>)
 
 //Detect if the filter is default
 const isDefault = (v: FiltersValue) => isEqual(v, DEFAULTS)
diff --git a/frontend/web/components/feature-summary/FeatureRow.tsx b/frontend/web/components/feature-summary/FeatureRow.tsx
index 26628637cf66..1ca6dbdbf3ab 100644
--- a/frontend/web/components/feature-summary/FeatureRow.tsx
+++ b/frontend/web/components/feature-summary/FeatureRow.tsx
@@ -280,7 +280,7 @@ const FeatureRow: FC<FeatureRowProps> = (props) => {
         data-test={`feature-item-${index}`}
         onClick={() => !isReadOnly && editFeature()}
       >
-        <div className='table-column ps-2 px-0 flex-1'>
+        <div className='table-column ps-2 px-0 align-items-center flex-1'>
           <div className='mx-0 flex-1 flex-column'>
             <div className='d-flex align-items-center'>
               <FeatureName name={projectFlag.name} />
diff --git a/frontend/web/components/import-export/FeatureImport.tsx b/frontend/web/components/import-export/FeatureImport.tsx
index 0d9a6e30b74f..89bffc21e26f 100644
--- a/frontend/web/components/import-export/FeatureImport.tsx
+++ b/frontend/web/components/import-export/FeatureImport.tsx
@@ -7,6 +7,7 @@ import AppActions from 'common/dispatcher/app-actions'
 import ProjectStore from 'common/stores/project-store'
 import Radio from 'components/base/forms/Radio'
 import { ImportStrategy } from 'common/types/responses'
+import { SortOrder } from 'common/types/requests'
 import JSONUpload from 'components/JSONUpload'
 import PanelSearch from 'components/PanelSearch'
 import {
@@ -73,7 +74,7 @@ const FeatureExport: FC<FeatureExportType> = ({ projectId }) => {
   const [sort, setSort] = useState<SortValue>({
     label: 'Name',
     sortBy: 'name',
-    sortOrder: 'asc',
+    sortOrder: SortOrder.ASC,
   })
 
   useEffect(() => {
diff --git a/frontend/web/components/modals/AssociatedSegmentOverrides.js b/frontend/web/components/modals/AssociatedSegmentOverrides.js
deleted file mode 100644
index 7377830fc9d6..000000000000
--- a/frontend/web/components/modals/AssociatedSegmentOverrides.js
+++ /dev/null
@@ -1,520 +0,0 @@
-import React, { Component } from 'react'
-import { groupBy } from 'lodash'
-import _data from 'common/data/base/_data'
-import ProjectStore from 'common/stores/project-store'
-import withSegmentOverrides from 'common/providers/withSegmentOverrides'
-import FeatureListStore from 'common/stores/feature-list-store'
-import ConfigProvider from 'common/providers/ConfigProvider'
-import SegmentOverrides from 'components/SegmentOverrides'
-import FlagSelect from 'components/FlagSelect'
-import InfoMessage from 'components/InfoMessage'
-import EnvironmentSelect from 'components/EnvironmentSelect'
-import SegmentOverrideLimit from 'components/SegmentOverrideLimit'
-import { getStore } from 'common/store'
-import { getEnvironment } from 'common/services/useEnvironment'
-import { saveFeatureWithValidation } from 'components/saveFeatureWithValidation'
-import Utils from 'common/utils/utils'
-import Permission from 'common/providers/Permission'
-
-class TheComponent extends Component {
-  state = {
-    isLoading: true,
-    selectedEnv: ProjectStore.getEnvs()?.[0]?.api_key,
-  }
-  componentDidMount() {
-    this.fetch()
-  }
-  fetch = () => {
-    if (!this.state.selectedEnv) {
-      return
-    }
-    _data
-      .get(
-        `${Project.api}projects/${this.props.projectId}/segments/${
-          this.props.id
-        }/associated-features/?environment=${ProjectStore.getEnvironmentIdFromKey(
-          this.state.selectedEnv,
-        )}`,
-      )
-      .then((v) =>
-        Promise.all(
-          v.results.map((result) =>
-            _data
-              .get(
-                `${Project.api}projects/${this.props.projectId}/features/${result.feature}/`,
-              )
-              .then((feature) => {
-                result.feature = feature
-              }),
-          ),
-        )
-          .then(() =>
-            groupBy(v.results, (e) => {
-              const env = ProjectStore.getEnvs().find(
-                (v) => v.id === e.environment,
-              )
-              e.env = env
-              return env && env.api_key
-            }),
-          )
-          .then((v) => {
-            if (v.undefined) {
-              delete v.undefined
-            }
-            _.each(Object.keys(v), (key) => {
-              v[key] = _.sortBy(v[key], (val) => val.feature.name)
-            })
-            const newItems = this.state.newItems || {}
-            const selectedEnv =
-              this.state.selectedEnv || ProjectStore.getEnvs()[0].api_key
-            newItems[selectedEnv] = (newItems[selectedEnv] || []).filter(
-              (newItem) => {
-                const existingSegmentOverride =
-                  !!v[selectedEnv] &&
-                  v[selectedEnv].find(
-                    (s) => newItem.feature.id === s.feature.id,
-                  )
-                return !existingSegmentOverride
-              },
-            )
-            this.setState({
-              isLoading: false,
-              newItems,
-              results: v,
-              selectedEnv,
-            })
-          }),
-      )
-  }
-
-  addItem = (item) => {
-    const newItems = this.state.newItems || {}
-    newItems[this.state.selectedEnv] = newItems[this.state.selectedEnv] || []
-    newItems[this.state.selectedEnv].unshift(item)
-    this.setState({
-      newItems,
-    })
-  }
-
-  render() {
-    const results = this.state.results
-    const newItems = this.state.newItems
-    const selectedNewResults =
-      (newItems && newItems[this.state.selectedEnv]) || []
-
-    const environment = ProjectStore.getEnvs().find(
-      (v) => v.api_key === this.state.selectedEnv,
-    )
-    const selectedResults = selectedNewResults.concat(
-      (results && results[this.state.selectedEnv]) || [],
-    )
-
-    return (
-      <Permission
-        level='environment'
-        permission={'MANAGE_SEGMENT_OVERRIDES'}
-        id={this.state.selectedEnv}
-      >
-        {({ permission: manageSegmentOverrides }) => {
-          const readOnly = !manageSegmentOverrides
-          const addOverride = (
-            <div style={{ width: 300 }} className='my-4'>
-              <WrappedSegmentOverrideAdd
-                onSave={this.fetch}
-                addItem={this.addItem}
-                feature={this.props.feature}
-                selectedResults={selectedResults}
-                ignoreFlags={
-                  selectedResults && selectedResults.map((v) => v.feature.id)
-                }
-                id={this.props.id}
-                projectId={this.props.projectId}
-                environmentId={this.state.selectedEnv}
-                readOnly={readOnly}
-              />
-            </div>
-          )
-
-          return (
-            <div className='mt-4'>
-              <InfoMessage collapseId={'associated-segment-overrides'}>
-                This shows the list of segment overrides associated with this
-                segment.
-                <br />
-                Segment overrides will only apply when you identify via the SDK.{' '}
-                <a
-                  target='_blank'
-                  href='https://docs.flagsmith.com/basic-features/segments'
-                  rel='noreferrer'
-                >
-                  Check the Docs for more details
-                </a>
-                .
-              </InfoMessage>
-              <SegmentOverrideLimit
-                id={environment?.api_key}
-                maxSegmentOverridesAllowed={ProjectStore.getMaxSegmentOverridesAllowed()}
-              />
-              <div>
-                <InputGroup
-                  className='col-4'
-                  component={
-                    <EnvironmentSelect
-                      projectId={this.props.projectId}
-                      value={environment?.api_key}
-                      onChange={(selectedEnv) =>
-                        this.setState(
-                          {
-                            selectedEnv,
-                          },
-                          this.fetch,
-                        )
-                      }
-                    />
-                  }
-                  title='Environment'
-                />
-
-                {this.state.isLoading ? (
-                  <div className='text-center'>
-                    <Loader />
-                  </div>
-                ) : (
-                  <PanelSearch
-                    searchPanel={addOverride}
-                    search={this.state.search}
-                    onChange={(search) => this.setState({ search })}
-                    filterRow={(row, search) =>
-                      row.feature.name
-                        .toLowerCase()
-                        .includes(search.toLowerCase())
-                    }
-                    className='no-pad panel-override'
-                    title='Associated Features'
-                    items={selectedResults}
-                    renderNoResults={
-                      <Panel className='no-pad' title='Associated Features'>
-                        {addOverride}
-                        <div className='p-2 text-center'>
-                          There are no segment overrides in this environment
-                        </div>
-                      </Panel>
-                    }
-                    renderRow={(v) => (
-                      <div
-                        key={v.feature.id}
-                        className='list-item-override p-3 mb-4'
-                      >
-                        <div>
-                          <WrappedSegmentOverrides
-                            onSave={this.fetch}
-                            projectFlag={v.feature}
-                            newSegmentOverrides={v.newSegmentOverrides}
-                            onRemove={() => {
-                              if (v.newSegmentOverrides) {
-                                newItems[this.state.selectedEnv] = newItems[
-                                  this.state.selectedEnv
-                                ].filter((x) => x !== v)
-                                this.setState({
-                                  newItems,
-                                })
-                              }
-                            }}
-                            id={this.props.id}
-                            projectId={this.props.projectId}
-                            environmentId={v.env.api_key}
-                            readOnly={readOnly}
-                          />
-                        </div>
-                      </div>
-                    )}
-                  />
-                )}
-              </div>
-            </div>
-          )
-        }}
-      </Permission>
-    )
-  }
-}
-
-class UncontrolledSegmentOverrides extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      value: this.props.value,
-    }
-  }
-
-  onChange = (value) => {
-    this.setState({ value })
-    this.props.onChange(value)
-  }
-
-  render() {
-    return (
-      <SegmentOverrides
-        {...this.props}
-        disableCreate
-        onChange={this.onChange}
-        value={this.state.value}
-      />
-    )
-  }
-}
-
-export default class SegmentOverridesInner extends Component {
-  state = {}
-
-  componentDidMount() {
-    ES6Component(this)
-  }
-
-  openPriorities = () => {
-    const {
-      environmentId,
-      originalSegmentOverrides,
-      projectFlag,
-      projectId,
-      segmentOverrides,
-      updateSegments,
-    } = this.props
-    const arrayMoveMutate = (array, from, to) => {
-      array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0])
-    }
-    const arrayMove = (array, from, to) => {
-      array = array.slice()
-      arrayMoveMutate(array, from, to)
-      return array
-    }
-    const overrides = originalSegmentOverrides
-      .filter((v) => v.segment !== segmentOverrides[0].segment)
-      .concat([segmentOverrides[0]])
-
-    openModal2(
-      'Edit Segment Override Priorities',
-      <div>
-        <UncontrolledSegmentOverrides
-          feature={projectFlag.id}
-          readOnly
-          hideViewSegment
-          projectId={projectId}
-          multivariateOptions={_.cloneDeep(projectFlag.multivariate_options)}
-          environmentId={environmentId}
-          value={arrayMove(
-            overrides,
-            overrides.length - 1,
-            overrides[overrides.length - 1].priority,
-          )}
-          controlValue={projectFlag.feature_state_value}
-          onChange={updateSegments}
-        />
-        <div className='text-right'>
-          <Button
-            onClick={() => {
-              closeModal2()
-            }}
-          >
-            Done
-          </Button>
-        </div>
-      </div>,
-    )
-  }
-
-  render() {
-    const {
-      environmentId,
-      id,
-      originalSegmentOverrides,
-      projectFlag,
-      projectId,
-      segmentOverrides,
-      updateSegments,
-    } = this.props
-    const environment = ProjectStore.getEnvironment(
-      this.state.selectedEnvironment,
-    )
-    const changeRequest = Utils.changeRequestsEnabled(
-      environment?.minimum_change_request_approvals,
-    )
-    const readOnly = this.props.readOnly || !!changeRequest
-    return (
-      <FeatureListProvider>
-        {({}, { editFeatureSegments, isSaving }) => {
-          const save = saveFeatureWithValidation(() => {
-            FeatureListStore.isSaving = true
-            FeatureListStore.trigger('change')
-            !isSaving &&
-              editFeatureSegments(
-                projectId,
-                environmentId,
-                projectFlag,
-                projectFlag,
-                {},
-                segmentOverrides,
-                () => {
-                  toast('Segment override saved')
-                  this.setState({ isSaving: false })
-                  this.props.onSave()
-                },
-              )
-            this.setState({ isSaving: true })
-          })
-          const segmentOverride = segmentOverrides?.filter?.(
-            (v) => v.segment === id,
-          )
-          if (!segmentOverride?.length) return null
-          return (
-            <div>
-              {originalSegmentOverrides.length > 1 && (
-                <div style={{ width: 165 }}>
-                  <Tooltip
-                    title={
-                      <div className='chip mt-2'>
-                        Priority:{' '}
-                        {segmentOverride && segmentOverride[0].priority + 1} of{' '}
-                        {originalSegmentOverrides.length}
-                        <a
-                          href='#'
-                          className='ml-2'
-                          onClick={this.openPriorities}
-                        >
-                          Edit
-                        </a>
-                      </div>
-                    }
-                  >
-                    If a user belongs to more than 1 segment, overrides are
-                    determined by this priority.
-                  </Tooltip>
-                </div>
-              )}
-
-              <SegmentOverrides
-                projectFlag={projectFlag}
-                feature={projectFlag.id}
-                id={id}
-                name=' '
-                disableCreate
-                projectId={projectId}
-                hideViewSegment
-                onRemove={this.props.onRemove}
-                multivariateOptions={_.cloneDeep(
-                  projectFlag.multivariate_options,
-                )}
-                environmentId={environmentId}
-                value={segmentOverride}
-                controlValue={projectFlag.feature_state_value}
-                onChange={updateSegments}
-                readOnly={readOnly}
-              />
-              <div className='text-right'>
-                {!readOnly && (
-                  <Button disabled={this.state.isSaving} onClick={save}>
-                    {this.state.isSaving ? 'Saving' : 'Save'}
-                  </Button>
-                )}
-              </div>
-            </div>
-          )
-        }}
-      </FeatureListProvider>
-    )
-  }
-}
-
-class SegmentOverridesInnerAdd extends Component {
-  state = { totalSegmentOverrides: 0 }
-
-  fetchTotalSegmentOverrides() {
-    const { environmentId } = this.props
-    const env = ProjectStore.getEnvs().find((v) => v.api_key === environmentId)
-
-    if (!env) {
-      return
-    }
-
-    const id = env.api_key
-
-    getEnvironment(getStore(), { id }).then((res) => {
-      this.setState({
-        totalSegmentOverrides: res.data.total_segment_overrides,
-      })
-    })
-  }
-
-  componentDidMount() {
-    ES6Component(this)
-    this.fetchTotalSegmentOverrides()
-  }
-
-  componentDidUpdate(_, prevState) {
-    if (prevState.selectedEnv !== this.state.selectedEnv) {
-      this.fetchTotalSegmentOverrides()
-    }
-  }
-  render() {
-    const { environmentId, id, ignoreFlags, projectId, readOnly } = this.props
-    const addValue = (featureId, feature) => {
-      const env = ProjectStore.getEnvs().find(
-        (v) => v.api_key === environmentId,
-      )
-      const item = {
-        env,
-        environment: environmentId,
-        feature,
-        isNew: true,
-        newSegmentOverrides: [
-          {
-            environment: env.id,
-            feature: featureId,
-            feature_segment_value: {
-              enabled: false,
-              environment: env.id,
-              feature: featureId,
-              feature_segment: null,
-              feature_state_value: Utils.valueToFeatureState(''),
-            },
-            priority: 999,
-            segment: id,
-          },
-        ],
-      }
-      this.props.addItem(item)
-      // const newValue = ;
-      // updateSegments(segmentOverrides.concat([newValue]))
-    }
-    const segmentOverrideLimitAlert =
-      this.state.totalSegmentOverrides >=
-      ProjectStore.getMaxSegmentOverridesAllowed()
-
-    return (
-      <FeatureListProvider>
-        {() => {
-          return (
-            <div className='mt-2'>
-              {!readOnly && (
-                <FlagSelect
-                  disabled={!!segmentOverrideLimitAlert}
-                  onlyInclude={this.props.feature}
-                  placeholder='Create a Segment Override...'
-                  projectId={projectId}
-                  ignore={ignoreFlags}
-                  onChange={addValue}
-                />
-              )}
-            </div>
-          )
-        }}
-      </FeatureListProvider>
-    )
-  }
-}
-
-const WrappedSegmentOverrides = withSegmentOverrides(SegmentOverridesInner)
-
-const WrappedSegmentOverrideAdd = withSegmentOverrides(SegmentOverridesInnerAdd)
-
-module.exports = ConfigProvider(TheComponent)
diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js
index 15c51f52cf22..37f1c9dfebe2 100644
--- a/frontend/web/components/modals/CreateFlag.js
+++ b/frontend/web/components/modals/CreateFlag.js
@@ -1383,6 +1383,10 @@ const CreateFlag = class extends Component {
                                                               v,
                                                             )
                                                           }}
+                                                          highlightSegmentId={
+                                                            this.props
+                                                              .highlightSegmentId
+                                                          }
                                                         />
                                                       </>
                                                     )
diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 2f8c58ef02cd..4b040071358d 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -27,7 +27,7 @@ import {
   useUpdateSegmentMutation,
 } from 'common/services/useSegment'
 import Utils from 'common/utils/utils'
-import AssociatedSegmentOverrides from './AssociatedSegmentOverrides'
+import AssociatedSegmentOverrides from 'components/segments/AssociatedSegmentOverrides'
 import Button from 'components/base/forms/Button'
 import InfoMessage from 'components/InfoMessage'
 import InputGroup from 'components/base/forms/InputGroup'
@@ -488,12 +488,17 @@ const CreateSegment: FC<CreateSegmentType> = ({
         />
       )}
       {isEdit && !condensed ? (
-        <Tabs value={tab} onChange={(tab: UserTabs) => setTab(tab)}>
+        <Tabs
+          value={tab}
+          theme='pill'
+          urlParam='segmentTab'
+          onChange={(tab: UserTabs) => setTab(tab)}
+        >
           <TabItem
-            tabLabelString='Rules'
+            tabLabelString='General'
             tabLabel={
-              <Row className='justify-content-center'>
-                Rules{' '}
+              <Row className='justify-content-center flex-nowrap'>
+                General{' '}
                 {valueChanged && <div className='unread ml-2 px-1'>{'*'}</div>}
               </Row>
             }
@@ -528,13 +533,8 @@ const CreateSegment: FC<CreateSegmentType> = ({
           <TabItem tabLabel='Features'>
             <div className='my-4'>
               <AssociatedSegmentOverrides
-                onUnsavedChange={() => {
-                  setValueChanged(true)
-                }}
-                feature={segment.feature}
-                projectId={projectId}
-                id={segment.id}
-                environmentId={environmentId}
+                projectId={projectId as number}
+                segmentId={segment.id}
               />
             </div>
           </TabItem>
@@ -560,7 +560,7 @@ const CreateSegment: FC<CreateSegmentType> = ({
             <TabItem
               tabLabelString='Custom Fields'
               tabLabel={
-                <Row className='justify-content-center'>
+                <Row className='justify-content-center flex-nowrap'>
                   Custom Fields
                   {metadataValueChanged && (
                     <div className='unread ml-2 px-1 pt-2'>{'*'}</div>
diff --git a/frontend/web/components/pages/OrganisationsPage.tsx b/frontend/web/components/pages/OrganisationsPage.tsx
index 959e751d4448..3991e7122270 100644
--- a/frontend/web/components/pages/OrganisationsPage.tsx
+++ b/frontend/web/components/pages/OrganisationsPage.tsx
@@ -3,6 +3,7 @@ import Button from 'components/base/forms/Button'
 import AccountProvider from 'common/providers/AccountProvider'
 import CreateOrganisationModal from 'components/modals/CreateOrganisation'
 import { Organisation, User } from 'common/types/responses'
+import { SortOrder } from 'common/types/requests'
 import Utils from 'common/utils/utils'
 import Icon from 'components/Icon'
 import PanelSearch from 'components/PanelSearch'
@@ -39,7 +40,7 @@ const OrganisationsPage: FC = () => {
                 {
                   default: true,
                   label: 'Name',
-                  order: 'asc',
+                  order: SortOrder.ASC,
                   value: 'name',
                 },
               ]}
diff --git a/frontend/web/components/pages/SegmentPage.tsx b/frontend/web/components/pages/SegmentPage.tsx
index 536856121b7f..7fe3f2469b3d 100644
--- a/frontend/web/components/pages/SegmentPage.tsx
+++ b/frontend/web/components/pages/SegmentPage.tsx
@@ -1,19 +1,17 @@
 import React, { FC } from 'react'
-import {
-  useDeleteSegmentMutation,
-  useGetSegmentQuery,
-} from 'common/services/useSegment'
+import { useGetSegmentQuery } from 'common/services/useSegment'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import CreateSegment from 'components/modals/CreateSegment'
 import ProjectStore from 'common/stores/project-store'
 import { Environment } from 'common/types/responses'
 import ChangeRequestStore from 'common/stores/change-requests-store'
 import Breadcrumb from 'components/Breadcrumb'
-import PageTitle from 'components/PageTitle'
 import Button from 'components/base/forms/Button'
 import { useHasPermission } from 'common/providers/Permission'
 import Icon from 'components/Icon'
 import { handleRemoveSegment } from 'components/modals/ConfirmRemoveSegment'
+import SegmentSelect from 'components/SegmentSelect'
+import Utils from 'common/utils/utils'
 
 type SegmentPageType = {}
 
@@ -51,34 +49,43 @@ const SegmentPage: FC<SegmentPageType> = ({}) => {
             url: `/project/${projectId}/segments/`,
           },
         ]}
-        currentPage={segment?.name}
-      />
-      <PageTitle
-        cta={
-          manageSegmentsPermission && (
-            <Row>
-              <Button
-                data-test='remove-segment-btn'
-                className='btn btn-with-icon'
-                type='button'
-                onClick={onRemoveSegment}
-              >
-                <Icon name='trash-2' width={20} fill='#656D7B' />
-              </Button>
-            </Row>
-          )
+        isCurrentPageMuted={false}
+        currentPage={
+          <div className='d-flex flex-1 align-items-center justify-content-between'>
+            <span style={{ width: 180 }} className='d-inline-block'>
+              <SegmentSelect
+                onChange={(v) =>
+                  history.replace(
+                    `/project/${projectId}/segments/${v.value}?${Utils.toParam(
+                      Utils.fromParam(),
+                    )}`,
+                  )
+                }
+                className='react-select select-xsm'
+                value={parseInt(id)}
+                projectId={projectId}
+              />
+            </span>
+            <Button
+              data-test='remove-segment-btn'
+              className='btn btn-with-icon'
+              type='button'
+              onClick={onRemoveSegment}
+            >
+              <Icon name='trash-2' width={20} fill='#656D7B' />
+            </Button>
+          </div>
         }
-        title={segment?.name}
-      >
-        {segment?.description}
-      </PageTitle>
-
-      <CreateSegment
-        segment={parseInt(id)}
-        readOnly={!manageSegmentsPermission}
-        projectId={projectId}
-        environmentId={environmentId!}
       />
+
+      <div className='mt-3'>
+        <CreateSegment
+          segment={parseInt(id)}
+          readOnly={!manageSegmentsPermission}
+          projectId={projectId}
+          environmentId={environmentId!}
+        />
+      </div>
     </div>
   )
 }
diff --git a/frontend/web/components/pages/WidgetPage.tsx b/frontend/web/components/pages/WidgetPage.tsx
index 2d150c10bb71..19fb7cd4e0c1 100644
--- a/frontend/web/components/pages/WidgetPage.tsx
+++ b/frontend/web/components/pages/WidgetPage.tsx
@@ -22,6 +22,7 @@ import AccountProvider from 'common/providers/AccountProvider'
 import PanelSearch from 'components/PanelSearch'
 // @ts-ignore
 import { AsyncStorage } from 'polyfill-react-native'
+import { SortOrder } from 'common/types/requests'
 import {
   Environment,
   FeatureListProviderActions,
@@ -124,7 +125,7 @@ const FeatureList = class extends Component<FeatureListType> {
     error: null as null | string,
     search: null as null | string,
     showArchived: false,
-    sort: { label: 'Name', sortBy: 'name', sortOrder: 'asc' },
+    sort: { label: 'Name', sortBy: 'name', sortOrder: SortOrder.ASC },
     tag_strategy: 'INTERSECTION' as TagStrategy,
     tags: [] as string[],
   }
@@ -319,12 +320,12 @@ const FeatureList = class extends Component<FeatureListType> {
                                 {
                                   default: true,
                                   label: 'Name',
-                                  order: 'asc',
+                                  order: SortOrder.ASC,
                                   value: 'name',
                                 },
                                 {
                                   label: 'Created Date',
-                                  order: 'asc',
+                                  order: SortOrder.ASC,
                                   value: 'created_date',
                                 },
                               ]}
diff --git a/frontend/web/components/segments/AssociatedSegmentOverrides.tsx b/frontend/web/components/segments/AssociatedSegmentOverrides.tsx
new file mode 100644
index 000000000000..479d86068487
--- /dev/null
+++ b/frontend/web/components/segments/AssociatedSegmentOverrides.tsx
@@ -0,0 +1,192 @@
+import React, { FC, useEffect, useState } from 'react'
+import EnvironmentSelect from 'components/EnvironmentSelect'
+import { useGetEnvironmentsQuery } from 'common/services/useEnvironment'
+import { useGetProjectFlagsQuery } from 'common/services/useProjectFlag'
+import FeatureFilters, {
+  parseFiltersFromUrlParams,
+  getServerFilter,
+  getURLParamsFromFilters,
+} from 'components/feature-page/FeatureFilters'
+import Utils from 'common/utils/utils'
+import PanelSearch from 'components/PanelSearch'
+import JSONReference from 'components/JSONReference'
+import AccountStore from 'common/stores/account-store'
+import FeatureListStore from 'common/stores/feature-list-store'
+import FeatureOverrideRow from 'components/feature-override/FeatureOverrideRow'
+import { useHistory } from 'react-router-dom'
+import { Environment } from 'common/types/responses'
+import { useGetSegmentQuery } from 'common/services/useSegment'
+import PageTitle from 'components/PageTitle'
+
+type AssociatedSegmentOverridesType = {
+  projectId: number
+  segmentId: number | undefined
+}
+
+const AssociatedSegmentOverrides: FC<AssociatedSegmentOverridesType> = ({
+  projectId,
+  segmentId,
+}) => {
+  const history = useHistory()
+  const [environment, setEnvironment] = useState<Environment>()
+  const [preselect] = useState(Utils.fromParam().flag)
+  const [filter, setFilter] = useState(
+    parseFiltersFromUrlParams(Utils.fromParam()),
+  )
+  const { data: segment } = useGetSegmentQuery(
+    {
+      id: segmentId!,
+      projectId: projectId!,
+    },
+    {
+      skip: !projectId || !segmentId,
+    },
+  )
+
+  const {
+    data: projectFlags,
+    isFetching: projectFlagsFetching,
+    isLoading: projectFlagsLoading,
+  } = useGetProjectFlagsQuery(
+    {
+      ...getServerFilter(filter),
+      environment: environment?.id || 0,
+      project: `${projectId}`,
+      segment: segmentId,
+    },
+    {
+      skip: !projectId || !environment || !segmentId,
+    },
+  )
+
+  const { data: environments } = useGetEnvironmentsQuery(
+    {
+      projectId: `${projectId}`,
+    },
+    {
+      skip: !projectId,
+    },
+  )
+
+  useEffect(() => {
+    if (!environment && !!environments?.results?.[0]) {
+      setEnvironment(environments.results[0])
+    }
+  }, [environment, environments])
+  return (
+    <>
+      <div>
+        <PageTitle
+          title={
+            <div className='d-flex gap-4'>
+              Associated Features
+              <div style={{ width: 200 }}>
+                <EnvironmentSelect
+                  showAll={false}
+                  value={environment?.api_key}
+                  projectId={projectId}
+                  onChange={(id) =>
+                    setEnvironment(
+                      environments?.results?.find((e) => e.api_key === id),
+                    )
+                  }
+                />
+              </div>
+            </div>
+          }
+        >
+          This will highlight any feature overridden by the segment{' '}
+          <strong className='text-primary'>{segment?.name}</strong> in the
+          chosen environment.
+        </PageTitle>
+      </div>
+      {projectFlagsLoading ? (
+        <div className='text-center'>
+          <Loader />
+        </div>
+      ) : (
+        !!projectFlags && (
+          <PanelSearch
+            id='user-features-list'
+            className='no-pad overflow-visible'
+            itemHeight={70}
+            renderFooter={() => (
+              <>
+                <JSONReference
+                  showNamesButton
+                  className='mt-4 mx-2'
+                  title={'Features'}
+                  json={projectFlags}
+                />
+              </>
+            )}
+            header={
+              <FeatureFilters
+                value={filter}
+                projectId={projectId!}
+                orgId={AccountStore.getOrganisation()?.id}
+                isLoading={projectFlagsLoading}
+                onChange={(next) => {
+                  FeatureListStore.isLoading = true
+                  history.replace(
+                    `${document.location.pathname}?${Utils.toParam(
+                      getURLParamsFromFilters(next),
+                    )}`,
+                  )
+                  setFilter(next)
+                }}
+              />
+            }
+            isLoading={projectFlagsFetching}
+            items={projectFlags.results}
+            renderRow={(projectFlag, i) => {
+              return (
+                !!projectFlag &&
+                !!environment && (
+                  <FeatureOverrideRow
+                    shouldPreselect={projectFlag.name === preselect}
+                    environmentId={environment.api_key}
+                    level='segment'
+                    valueDataTest={`user-feature-value-${i}`}
+                    projectFlag={projectFlag}
+                    dataTest={`user-feature-${i}`}
+                    overrideFeatureState={
+                      projectFlag.segment_feature_state ||
+                      projectFlag.environment_feature_state
+                    }
+                    environmentFeatureState={
+                      projectFlag.environment_feature_state!
+                    }
+                    highlightSegmentId={segmentId}
+                  />
+                )
+              )
+            }}
+            renderSearchWithNoResults
+            paging={projectFlags}
+            nextPage={() =>
+              setFilter({
+                ...filter,
+                page: filter.page + 1,
+              })
+            }
+            prevPage={() =>
+              setFilter({
+                ...filter,
+                page: filter.page - 1,
+              })
+            }
+            goToPage={(page) => {
+              setFilter({
+                ...filter,
+                page,
+              })
+            }}
+          />
+        )
+      )}
+    </>
+  )
+}
+
+export default AssociatedSegmentOverrides
diff --git a/frontend/web/components/tables/TableSortFilter.tsx b/frontend/web/components/tables/TableSortFilter.tsx
index 0655547750d8..42b8e0e91552 100644
--- a/frontend/web/components/tables/TableSortFilter.tsx
+++ b/frontend/web/components/tables/TableSortFilter.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react'
 import TableFilter from './TableFilter'
 import Icon from 'components/Icon'
 import classNames from 'classnames'
+import { SortOrder } from 'common/types/requests'
 
 export type SortType = {
   value: string
@@ -10,7 +11,7 @@ export type SortType = {
 export type SortValue = {
   sortBy: string
   label: string
-  sortOrder: 'asc' | 'desc'
+  sortOrder: SortOrder
 }
 type TableFilterType = {
   options: SortType[]
@@ -28,7 +29,7 @@ const TableSortFilter: FC<TableFilterType> = ({
   const value = _value || {
     label: options[0].label,
     sortBy: options[0].value,
-    sortOrder: 'asc',
+    sortOrder: SortOrder.ASC,
   }
   return (
     <div className={isLoading ? 'disabled' : ''}>
@@ -47,10 +48,10 @@ const TableSortFilter: FC<TableFilterType> = ({
                   label: sortOption.label,
                   sortBy: sortOption.value,
                   sortOrder: isActive
-                    ? value.sortOrder === 'asc'
-                      ? 'desc'
-                      : 'asc'
-                    : 'asc',
+                    ? value.sortOrder === SortOrder.ASC
+                      ? SortOrder.DESC
+                      : SortOrder.ASC
+                    : SortOrder.ASC,
                 })
               }}
             >
@@ -62,7 +63,9 @@ const TableSortFilter: FC<TableFilterType> = ({
                       'opacity-0': !isActive,
                     })}
                     name={
-                      value?.sortOrder === 'asc' ? 'chevron-up' : 'chevron-down'
+                      value?.sortOrder === SortOrder.ASC
+                        ? 'chevron-up'
+                        : 'chevron-down'
                     }
                   />
                 </div>
diff --git a/frontend/web/styles/project/_utils.scss b/frontend/web/styles/project/_utils.scss
index 072ae84b768d..6f5198fe2641 100644
--- a/frontend/web/styles/project/_utils.scss
+++ b/frontend/web/styles/project/_utils.scss
@@ -63,6 +63,9 @@
 .top-form-item {
     top: 30px;
 }
+.border-2 {
+  border-width: 2px !important;
+}
 .border-left-1 {
     border-left: 1px solid $hr-border-color !important;
 }