diff --git a/frontend/common/lifecycleEnvironmentSlice.ts b/frontend/common/lifecycleEnvironmentSlice.ts
new file mode 100644
index 000000000000..0df194402092
--- /dev/null
+++ b/frontend/common/lifecycleEnvironmentSlice.ts
@@ -0,0 +1,26 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+type LifecycleEnvironmentState = {
+  // Maps a project id to the environment id selected for lifecycle analysis.
+  byProject: Record<number, number>
+}
+
+const initialState: LifecycleEnvironmentState = {
+  byProject: {},
+}
+
+const lifecycleEnvironmentSlice = createSlice({
+  initialState,
+  name: 'lifecycleEnvironment',
+  reducers: {
+    setLifecycleEnvironment(
+      state,
+      action: PayloadAction<{ projectId: number; environmentId: number }>,
+    ) {
+      state.byProject[action.payload.projectId] = action.payload.environmentId
+    },
+  },
+})
+
+export const { setLifecycleEnvironment } = lifecycleEnvironmentSlice.actions
+export default lifecycleEnvironmentSlice.reducer
diff --git a/frontend/common/services/useProjectFlag.ts b/frontend/common/services/useProjectFlag.ts
index 40e93ad4c780..50fa74a95b6d 100644
--- a/frontend/common/services/useProjectFlag.ts
+++ b/frontend/common/services/useProjectFlag.ts
@@ -35,7 +35,13 @@ function recursivePageGet(
 }
 export const projectFlagService = service
   .enhanceEndpoints({
-    addTagTypes: ['ProjectFlag', 'FeatureList', 'FeatureState', 'Environment'],
+    addTagTypes: [
+      'ProjectFlag',
+      'FeatureList',
+      'FeatureState',
+      'Environment',
+      'LifecycleCounts',
+    ],
   })
   .injectEndpoints({
     endpoints: (builder) => ({
@@ -68,6 +74,7 @@ export const projectFlagService = service
         invalidatesTags: [
           { id: 'LIST', type: 'ProjectFlag' },
           { id: 'LIST', type: 'FeatureList' },
+          'LifecycleCounts',
         ],
         query: (query: Req['createProjectFlag']) => ({
           body: query.body,
@@ -132,6 +139,16 @@ export const projectFlagService = service
         }),
       }),
 
+      getLifecycleStatusCounts: builder.query<
+        Res['lifecycleStatusCounts'],
+        Req['getLifecycleStatusCounts']
+      >({
+        providesTags: ['LifecycleCounts'],
+        query: ({ environment }) => ({
+          url: `environments/${environment}/feature-lifecycle-counts/`,
+        }),
+      }),
+
       getProjectFlag: builder.query<Res['projectFlag'], Req['getProjectFlag']>({
         providesTags: (res) => [{ id: res?.id, type: 'ProjectFlag' }],
         query: (query: Req['getProjectFlag']) => ({
@@ -284,6 +301,7 @@ export const {
   useAddFlagOwnersMutation,
   useCreateProjectFlagMutation,
   useGetFeatureListQuery,
+  useGetLifecycleStatusCountsQuery,
   useGetProjectFlagQuery,
   useGetProjectFlagsQuery,
   useRemoveFlagGroupOwnersMutation,
diff --git a/frontend/common/store.ts b/frontend/common/store.ts
index 80045546fb5a..025632a08eb4 100644
--- a/frontend/common/store.ts
+++ b/frontend/common/store.ts
@@ -14,10 +14,12 @@ import storage from 'redux-persist/lib/storage'
 import { Persistor } from 'redux-persist/es/types'
 import { service } from './service'
 import selectedOrganisationReducer from './selectedOrganisationSlice'
+import lifecycleEnvironmentReducer from './lifecycleEnvironmentSlice'
 // END OF IMPORTS
 const createStore = () => {
   const reducer = combineReducers({
     [service.reducerPath]: service.reducer,
+    lifecycleEnvironment: lifecycleEnvironmentReducer,
     selectedOrganisation: selectedOrganisationReducer,
     // END OF REDUCERS
   })
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index b548720da228..e3126c94fd96 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -32,6 +32,7 @@ import {
   FlagsmithValue,
   TagStrategy,
   FeatureType,
+  LifecycleStage,
 } from './responses'
 import { UtmsType } from './utms'
 
@@ -395,6 +396,10 @@ export type Req = {
     group_owners?: number[]
     sort_field?: string
     sort_direction?: SortOrder
+    lifecycle_stage?: LifecycleStage
+  }
+  getLifecycleStatusCounts: {
+    environment: number
   }
   getProjectFlag: { project: number; id: number }
   getRolesPermissionUsers: { organisation_id: number; role_id: number }
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index 0844917b7d59..69370d06e75a 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -816,8 +816,19 @@ export type ProjectFlag = {
     last_successful_repository_scanned_at: string
     last_feature_found_at: string
   }[]
+  lifecycle_stage?: LifecycleStage | null
 }
 
+export type LifecycleStage =
+  | 'new'
+  | 'live'
+  | 'permanent'
+  | 'stale'
+  | 'needs_monitoring'
+  | 'to_remove'
+
+export type LifecycleStatusCounts = Record<LifecycleStage, number>
+
 export type FeatureListProviderData = {
   projectFlags: ProjectFlag[] | null
   environmentFlags: Record<number, FeatureState> | undefined
@@ -1344,6 +1355,7 @@ export type Res = {
   rolePermission: PagedResponse<RolePermission>
   projectFlags: PagedResponse<ProjectFlag>
   projectFlag: ProjectFlag
+  lifecycleStatusCounts: LifecycleStatusCounts
   identityFeatureStatesAll: IdentityFeatureState[]
   createRolesPermissionUsers: RolePermissionUser
   rolesPermissionUsers: PagedResponse<RolePermissionUser>
diff --git a/frontend/web/components/feature-summary/ProjectFeatureRow.tsx b/frontend/web/components/feature-summary/ProjectFeatureRow.tsx
index 0a207893f046..73a5f0937f94 100644
--- a/frontend/web/components/feature-summary/ProjectFeatureRow.tsx
+++ b/frontend/web/components/feature-summary/ProjectFeatureRow.tsx
@@ -11,6 +11,7 @@ interface ProjectFeatureRowProps {
   index: number
   isSelected?: boolean
   onSelect?: (projectFlag: ProjectFlag) => void
+  onClick?: (projectFlag: ProjectFlag) => void
   className?: string
   actions?: React.ReactNode
 }
@@ -20,6 +21,7 @@ const ProjectFeatureRow: FC<ProjectFeatureRowProps> = ({
   className,
   index,
   isSelected,
+  onClick,
   onSelect,
   projectFlag,
 }) => {
@@ -40,8 +42,10 @@ const ProjectFeatureRow: FC<ProjectFeatureRowProps> = ({
         className={classNames(
           'd-none d-lg-flex align-items-lg-center flex-lg-row list-item py-0 list-item-xs fs-small',
           className,
+          { clickable: !!onClick },
         )}
         data-test={`cleanup-feature-item-${index}`}
+        onClick={onClick ? () => onClick(projectFlag) : undefined}
       >
         {onSelect && (
           <div
@@ -92,7 +96,9 @@ const ProjectFeatureRow: FC<ProjectFeatureRowProps> = ({
       <div
         className={classNames(
           'd-flex flex-column justify-content-center px-2 list-item py-1 d-lg-none',
+          { clickable: !!onClick },
         )}
+        onClick={onClick ? () => onClick(projectFlag) : undefined}
       >
         <div className='d-flex gap-2 align-items-center'>
           {onSelect && (
diff --git a/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx b/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx
index 816dfd168b31..7801ee5b1ad7 100644
--- a/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/FeatureLifecyclePage.tsx
@@ -1,30 +1,31 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import React, { FC, useCallback, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useRouteContext } from 'components/providers/RouteContext'
 import { usePageTracking } from 'common/hooks/usePageTracking'
-import { useProjectEnvironments } from 'common/hooks/useProjectEnvironments'
 import { hasActiveFilters } from 'common/utils/featureFilterParams'
 import PageTitle from 'components/PageTitle'
 import Icon from 'components/icons/Icon'
 import Button from 'components/base/forms/Button'
-import EnvironmentSelect from 'components/EnvironmentTagSelect'
 import CreateFlagModal from 'components/modals/create-feature'
 import LifecycleSidebar from './components/LifecycleSidebar'
-import EvaluationChecker from './components/EvaluationChecker'
+import FeatureUsageModal from './components/FeatureUsageModal'
 import NewSection from './components/NewSection'
 import LiveSection from './components/LiveSection'
 import PermanentSection from './components/PermanentSection'
 import StaleSection from './components/StaleSection'
 import MonitorSection from './components/MonitorSection'
 import RemoveSection from './components/RemoveSection'
-import { useLifecycleData } from './hooks/useLifecycleData'
-import { useEvaluationCounts } from './hooks/useEvaluationCounts'
+import type { ProjectFlag } from 'common/types/responses'
+import { useLifecycleEnvironment } from './hooks/useLifecycleEnvironment'
+import {
+  useLifecycleCounts,
+  useLifecycleSectionFlags,
+} from './hooks/useLifecycleData'
 import {
   DEFAULT_FILTER_STATE,
   MONITOR_TOOLTIP,
   SECTIONS,
   STALE_TOOLTIP,
-  buildPeriodOptions,
 } from './constants'
 import type { Section } from './types'
 import type { FilterState } from 'common/types/featureFilters'
@@ -46,21 +47,11 @@ function useSectionParam(): Section {
 
 const FeatureLifecyclePage: FC = () => {
   const routeContext = useRouteContext()
-  const projectId = routeContext.projectId as string
-  const { environments } = useProjectEnvironments(projectId)
-  const defaultEnvironmentApiKey = environments[0]?.api_key
+  const projectId = String(routeContext.projectId)
+  const projectIdNum = Number(projectId)
 
-  const allEnvironmentIds = useMemo(
-    () => environments.map((e) => `${e.id}`),
-    [environments],
-  )
-  const [selectedEnvironments, setSelectedEnvironments] = useState<string[]>([])
-
-  useEffect(() => {
-    if (allEnvironmentIds.length > 0 && selectedEnvironments.length === 0) {
-      setSelectedEnvironments(allEnvironmentIds)
-    }
-  }, [allEnvironmentIds, selectedEnvironments.length])
+  const { environmentId, setEnvironmentId } =
+    useLifecycleEnvironment(projectIdNum)
 
   const [filters, setFilters] = useState<FilterState>(DEFAULT_FILTER_STATE)
   const handleFilterChange = useCallback(
@@ -69,6 +60,21 @@ const FeatureLifecyclePage: FC = () => {
     [],
   )
   const clearFilters = useCallback(() => setFilters(DEFAULT_FILTER_STATE), [])
+
+  const handleFeatureClick = useCallback(
+    (flag: ProjectFlag) => {
+      openModal(
+        flag.name,
+        <FeatureUsageModal
+          projectId={projectIdNum}
+          environmentId={environmentId}
+          projectFlag={flag}
+        />,
+        'side-modal create-feature-modal',
+      )
+    },
+    [projectIdNum, environmentId],
+  )
   const hasFilters = hasActiveFilters(filters)
 
   const section = useSectionParam()
@@ -76,59 +82,31 @@ const FeatureLifecyclePage: FC = () => {
     (s) => s.key === section,
   ) as (typeof SECTIONS)[number]
 
-  const [monitorPeriod, setMonitorPeriod] = useState(1)
-  const [removePeriod, setRemovePeriod] = useState(7)
+  const { counts, isLoading: isLoadingCounts } = useLifecycleCounts({
+    environmentId,
+  })
 
-  // Central data hook — 2 API calls, all filtering done here
   const {
-    counts,
     error,
-    isLoading,
-    liveFlags,
-    newFlags,
-    permanentFlags,
-    staleFlags,
-    staleNoCodeFlags,
-  } = useLifecycleData({
-    environmentApiKey: defaultEnvironmentApiKey,
+    flags,
+    isLoading: isLoadingFlags,
+  } = useLifecycleSectionFlags({
+    environmentId,
     filters,
-    projectId,
-  })
-
-  // Monitor evaluation counts (short period — "has evaluation within")
-  const {
-    handleEvaluationResult: handleMonitorResult,
-    isCheckingEvaluations: isCheckingMonitor,
-    monitorCount,
-    monitorFlags,
-  } = useEvaluationCounts({
-    period: monitorPeriod,
-    selectedEnvironments,
-    staleNoCodeFlags,
-  })
-
-  // Remove evaluation counts (longer period — "no evaluations in")
-  const {
-    handleEvaluationResult: handleRemoveResult,
-    isCheckingEvaluations: isCheckingRemove,
-    removeCount,
-    removeFlags,
-  } = useEvaluationCounts({
-    period: removePeriod,
-    selectedEnvironments,
-    staleNoCodeFlags,
+    projectId: projectIdNum,
+    section,
   })
 
   usePageTracking({
     context: {
       organisationId: routeContext.organisationId,
-      projectId,
+      projectId: projectIdNum,
     },
     pageName: 'CLEANUP',
     saveToStorage: false,
   })
 
-  if (!defaultEnvironmentApiKey) {
+  if (!environmentId) {
     return (
       <div className='text-center'>
         <Loader />
@@ -137,125 +115,46 @@ const FeatureLifecyclePage: FC = () => {
   }
 
   const filterProps = {
+    error,
     filters,
+    flags,
     hasFilters,
+    isLoading: isLoadingFlags,
     onClearFilters: clearFilters,
+    onFeatureClick: handleFeatureClick,
     onFilterChange: handleFilterChange,
-    projectId,
+    projectId: projectIdNum,
   }
 
   const renderSection = () => {
     switch (section) {
       case 'new':
-        return (
-          <NewSection
-            flags={newFlags}
-            isLoading={isLoading}
-            error={error}
-            {...filterProps}
-          />
-        )
+        return <NewSection {...filterProps} />
       case 'live':
-        return (
-          <LiveSection
-            flags={liveFlags}
-            isLoading={isLoading}
-            error={error}
-            {...filterProps}
-          />
-        )
+        return <LiveSection {...filterProps} />
       case 'permanent':
-        return (
-          <PermanentSection
-            flags={permanentFlags}
-            isLoading={isLoading}
-            error={error}
-            {...filterProps}
-          />
-        )
+        return <PermanentSection {...filterProps} />
       case 'stale':
-        return (
-          <StaleSection
-            flags={staleFlags}
-            isLoading={isLoading}
-            error={error}
-            {...filterProps}
-          />
-        )
+        return <StaleSection {...filterProps} />
       case 'monitor':
-        return (
-          <MonitorSection
-            flags={monitorFlags}
-            isLoading={isLoading}
-            isCheckingEvaluations={isCheckingMonitor}
-            error={error}
-            {...filterProps}
-          />
-        )
+        return <MonitorSection {...filterProps} />
       case 'remove':
-        return (
-          <RemoveSection
-            flags={removeFlags}
-            isLoading={isLoading}
-            isCheckingEvaluations={isCheckingRemove}
-            error={error}
-            {...filterProps}
-          />
-        )
+        return <RemoveSection {...filterProps} />
       default:
         return null
     }
   }
 
-  const activePeriod = section === 'monitor' ? monitorPeriod : removePeriod
-  const setActivePeriod =
-    section === 'monitor' ? setMonitorPeriod : setRemovePeriod
-  const periodPrefix =
-    section === 'monitor' ? 'Evaluated within' : 'No evaluations in'
-  const periodOptions = buildPeriodOptions(periodPrefix)
-
   return (
     <div data-test='cleanup-page' id='cleanup-page'>
-      {/* Hidden evaluators — monitor period */}
-      {staleNoCodeFlags.map((flag) =>
-        selectedEnvironments.map((envId) => (
-          <EvaluationChecker
-            key={`monitor-${
-              flag.id
-            }-${envId}-${monitorPeriod}-${selectedEnvironments.join()}`}
-            featureId={flag.id}
-            projectId={projectId}
-            environmentId={envId}
-            period={monitorPeriod}
-            onResult={handleMonitorResult}
-          />
-        )),
-      )}
-      {/* Hidden evaluators — remove period */}
-      {staleNoCodeFlags.map((flag) =>
-        selectedEnvironments.map((envId) => (
-          <EvaluationChecker
-            key={`remove-${
-              flag.id
-            }-${envId}-${removePeriod}-${selectedEnvironments.join()}`}
-            featureId={flag.id}
-            projectId={projectId}
-            environmentId={envId}
-            period={removePeriod}
-            onResult={handleRemoveResult}
-          />
-        )),
-      )}
       <div className='d-md-flex'>
         <LifecycleSidebar
-          projectId={projectId}
+          projectId={projectIdNum}
           activeSection={section}
           counts={counts}
-          monitorCount={monitorCount}
-          removeCount={removeCount}
-          isLoading={isLoading}
-          isCheckingMonitor={isCheckingMonitor}
-          isCheckingRemove={isCheckingRemove}
+          isLoading={isLoadingCounts}
+          environmentId={environmentId}
+          onEnvironmentChange={setEnvironmentId}
         />
         <div className='aside-container'>
           <div className='app-container container'>
@@ -269,7 +168,7 @@ const FeatureLifecyclePage: FC = () => {
                         openModal(
                           'New Feature',
                           <CreateFlagModal
-                            environmentId={defaultEnvironmentApiKey}
+                            environmentId={`${environmentId}`}
                             projectId={projectId}
                           />,
                           'side-modal create-feature-modal',
@@ -298,7 +197,7 @@ const FeatureLifecyclePage: FC = () => {
                   <Tooltip
                     title={
                       <a
-                        className='d-inline-flex align-items-center gap-1'
+                        className='ms-1 d-inline-flex align-items-center gap-1'
                         href='#'
                         onClick={(e) => e.preventDefault()}
                       >
@@ -311,35 +210,6 @@ const FeatureLifecyclePage: FC = () => {
                 )}
               </PageTitle>
             </div>
-            {(section === 'monitor' || section === 'remove') && (
-              <>
-                <div className='mb-3' style={{ maxWidth: 300 }}>
-                  <Select
-                    value={periodOptions.find((o) => o.value === activePeriod)}
-                    onChange={(v: { value: number }) =>
-                      setActivePeriod(v.value)
-                    }
-                    options={periodOptions}
-                    className='react-select'
-                  />
-                </div>
-                <div className='mb-3'>
-                  <label className='fw-semibold mb-1 d-block'>
-                    Environments
-                  </label>
-                  <EnvironmentSelect
-                    projectId={projectId}
-                    value={selectedEnvironments}
-                    onChange={(v) =>
-                      setSelectedEnvironments((v as string[]) || [])
-                    }
-                    idField='id'
-                    multiple
-                    allowEmpty
-                  />
-                </div>
-              </>
-            )}
             {renderSection()}
           </div>
         </div>
diff --git a/frontend/web/components/pages/feature-lifecycle/components/EvaluationChecker.tsx b/frontend/web/components/pages/feature-lifecycle/components/EvaluationChecker.tsx
deleted file mode 100644
index a6e688cdc3cb..000000000000
--- a/frontend/web/components/pages/feature-lifecycle/components/EvaluationChecker.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { FC, useEffect } from 'react'
-import { useGetEnvironmentAnalyticsQuery } from 'common/services/useFeatureAnalytics'
-
-type EvaluationCheckerProps = {
-  featureId: number
-  projectId: number
-  environmentId: string
-  period: number
-  onResult: (featureId: number, envId: string, hasEvaluations: boolean) => void
-}
-
-const EvaluationChecker: FC<EvaluationCheckerProps> = ({
-  environmentId,
-  featureId,
-  onResult,
-  period,
-  projectId,
-}) => {
-  const { data, isSuccess } = useGetEnvironmentAnalyticsQuery({
-    environment_id: environmentId,
-    feature_id: featureId,
-    period,
-    project_id: projectId,
-  })
-
-  useEffect(() => {
-    if (isSuccess && data) {
-      const total = data.reduce((sum, entry) => sum + entry.count, 0)
-      onResult(featureId, environmentId, total > 0)
-    }
-  }, [data, isSuccess, featureId, environmentId, onResult])
-
-  return null
-}
-
-export default EvaluationChecker
diff --git a/frontend/web/components/pages/feature-lifecycle/components/FeatureUsageModal.tsx b/frontend/web/components/pages/feature-lifecycle/components/FeatureUsageModal.tsx
new file mode 100644
index 000000000000..f4dbc67b97dc
--- /dev/null
+++ b/frontend/web/components/pages/feature-lifecycle/components/FeatureUsageModal.tsx
@@ -0,0 +1,43 @@
+import React, { FC, useState } from 'react'
+import Tabs from 'components/navigation/TabMenu/Tabs'
+import TabItem from 'components/navigation/TabMenu/TabItem'
+import UsageTab from 'components/modals/create-feature/tabs/UsageTab'
+import FeatureSettingsTab from 'components/modals/create-feature/tabs/FeatureSettingsTab'
+import type { ProjectFlag } from 'common/types/responses'
+
+type FeatureUsageModalProps = {
+  projectId: number | string
+  environmentId: number
+  projectFlag: ProjectFlag
+}
+
+const FeatureUsageModal: FC<FeatureUsageModalProps> = ({
+  environmentId,
+  projectFlag,
+  projectId,
+}) => {
+  const [localProjectFlag, setLocalProjectFlag] =
+    useState<ProjectFlag>(projectFlag)
+
+  return (
+    <Tabs>
+      <TabItem tabLabel='Usage'>
+        <UsageTab
+          projectId={projectId}
+          featureId={projectFlag.id}
+          environmentId={environmentId}
+        />
+      </TabItem>
+      <TabItem tabLabel='Settings'>
+        <FeatureSettingsTab
+          projectId={projectId}
+          projectFlag={localProjectFlag}
+          onChange={setLocalProjectFlag}
+          onHasMetadataRequiredChange={() => {}}
+        />
+      </TabItem>
+    </Tabs>
+  )
+}
+
+export default FeatureUsageModal
diff --git a/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx b/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx
index 44e029a11f5c..090258b877c3 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/LifecycleSidebar.tsx
@@ -1,84 +1,75 @@
 import React, { FC } from 'react'
 import classNames from 'classnames'
 import SidebarLink from 'components/navigation/SidebarLink'
+import EnvironmentSelect from 'components/EnvironmentSelect'
+import Tooltip from 'components/Tooltip'
+import Icon from 'components/icons/Icon'
 import { SECTIONS } from 'components/pages/feature-lifecycle/constants'
 import type {
   Section,
   LifecycleCounts,
 } from 'components/pages/feature-lifecycle/types'
-import Button from 'components/base/forms/Button'
-import Icon from 'components/icons/Icon'
 
 type LifecycleSidebarProps = {
   projectId: number
   activeSection: Section
   counts: LifecycleCounts
-  monitorCount: number | undefined
-  removeCount: number | undefined
   isLoading: boolean
-  isCheckingMonitor: boolean
-  isCheckingRemove: boolean
+  environmentId: number
+  onEnvironmentChange: (environmentId: number) => void
 }
 
 const LifecycleSidebar: FC<LifecycleSidebarProps> = ({
   activeSection,
   counts,
-  isCheckingMonitor,
-  isCheckingRemove,
+  environmentId,
   isLoading,
-  monitorCount,
+  onEnvironmentChange,
   projectId,
-  removeCount,
 }) => {
   return (
     <div className='border-md-right home-aside d-flex flex-column pe-0 me-0'>
       <div className='flex-1 flex-column ms-0 me-2'>
-        <div className='d-flex px-2 pb-1 pt-2 justify-content-between align-items-center'>
-          <div className='text-muted fs-captionXSmall'>LIFECYCLE STAGES</div>
-          <Button size='xSmall' className='ps-2 pe-1'>
-            <div className='d-flex align-items-center gap-1'>
-              Add
-              <Icon width={16} name='plus' />
-            </div>
-          </Button>
+        <div className='px-2 pt-2'>
+          <div className='text-muted fs-captionXSmall mb-1 d-flex align-items-center gap-1'>
+            Measure evaluations from
+            <Tooltip
+              title={<Icon name='info-outlined' width={12} />}
+              place='right'
+            >
+              Flag evaluations are counted per environment. This affects whether
+              stale flags appear in "To Monitor" or "To Remove".
+            </Tooltip>
+          </div>
+          <EnvironmentSelect
+            projectId={projectId}
+            value={`${environmentId}`}
+            onChange={(v) => onEnvironmentChange(Number(v))}
+            idField='id'
+          />
         </div>
         <hr className='mt-1 mb-2' />
         <div className='d-flex flex-column mx-0 py-1 py-md-0 gap-1'>
-          {SECTIONS.map((s) => {
-            let count: number | undefined
-            let loading = false
-            if (s.key === 'monitor') {
-              count = monitorCount
-              loading = isLoading || isCheckingMonitor
-            } else if (s.key === 'remove') {
-              count = removeCount
-              loading = isLoading || isCheckingRemove
-            } else {
-              count = counts[s.key]
-              loading = isLoading
-            }
-
-            return (
-              <SidebarLink
-                key={s.key}
-                icon={s.icon}
-                className='lh-1'
-                to={`/project/${projectId}/lifecycle/${s.key}`}
-                isActive={() => activeSection === s.key}
-              >
-                <div className='d-flex align-items-center'>
-                  {s.label}
-                  <span
-                    className={classNames('ms-1 px-2 unread rounded d-inline', {
-                      'bg-light300 text-muted': activeSection !== s.key,
-                    })}
-                  >
-                    {loading ? '...' : count ?? 0}
-                  </span>
-                </div>
-              </SidebarLink>
-            )
-          })}
+          {SECTIONS.map((s) => (
+            <SidebarLink
+              key={s.key}
+              icon={s.icon}
+              className='lh-1'
+              to={`/project/${projectId}/lifecycle/${s.key}`}
+              isActive={() => activeSection === s.key}
+            >
+              <div className='d-flex align-items-center'>
+                {s.label}
+                <span
+                  className={classNames('ms-1 px-2 unread rounded d-inline', {
+                    'bg-light300 text-muted': activeSection !== s.key,
+                  })}
+                >
+                  {isLoading ? '...' : counts[s.key] ?? 0}
+                </span>
+              </div>
+            </SidebarLink>
+          ))}
         </div>
       </div>
     </div>
diff --git a/frontend/web/components/pages/feature-lifecycle/components/LiveSection.tsx b/frontend/web/components/pages/feature-lifecycle/components/LiveSection.tsx
index b9ee1ae59158..b207e7791ea4 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/LiveSection.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/LiveSection.tsx
@@ -13,6 +13,7 @@ type LiveSectionProps = {
   hasFilters: boolean
   onFilterChange: (updates: Partial<FilterState>) => void
   onClearFilters: () => void
+  onFeatureClick?: (flag: ProjectFlag) => void
 }
 
 const LiveSection: FC<LiveSectionProps> = ({
@@ -22,6 +23,7 @@ const LiveSection: FC<LiveSectionProps> = ({
   hasFilters,
   isLoading,
   onClearFilters,
+  onFeatureClick,
   onFilterChange,
   projectId,
 }) => {
@@ -40,6 +42,7 @@ const LiveSection: FC<LiveSectionProps> = ({
       hasFilters={hasFilters}
       onFilterChange={onFilterChange}
       onClearFilters={onClearFilters}
+      onFeatureClick={onFeatureClick}
       emptyLabel='No live flags with code references found.'
       nextPage={nextPage}
       prevPage={prevPage}
diff --git a/frontend/web/components/pages/feature-lifecycle/components/MonitorSection.tsx b/frontend/web/components/pages/feature-lifecycle/components/MonitorSection.tsx
index c07c7d355a93..1e5b1653d682 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/MonitorSection.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/MonitorSection.tsx
@@ -7,13 +7,13 @@ import type { FilterState } from 'common/types/featureFilters'
 type MonitorSectionProps = {
   flags: ProjectFlag[]
   isLoading: boolean
-  isCheckingEvaluations: boolean
   error: unknown
   projectId: number
   filters: FilterState
   hasFilters: boolean
   onFilterChange: (updates: Partial<FilterState>) => void
   onClearFilters: () => void
+  onFeatureClick?: (flag: ProjectFlag) => void
 }
 
 const MonitorSection: FC<MonitorSectionProps> = ({
@@ -21,26 +21,15 @@ const MonitorSection: FC<MonitorSectionProps> = ({
   filters,
   flags,
   hasFilters,
-  isCheckingEvaluations,
   isLoading,
   onClearFilters,
+  onFeatureClick,
   onFilterChange,
   projectId,
 }) => {
   const { goToPage, nextPage, pageItems, paging, prevPage } =
     useClientPagination({ items: flags })
 
-  if (isCheckingEvaluations && !isLoading) {
-    return (
-      <div className='text-center py-4'>
-        <Loader />
-        <p className='text-muted mt-2'>
-          Checking evaluation data for features...
-        </p>
-      </div>
-    )
-  }
-
   return (
     <SectionShell
       id='monitor-list'
@@ -53,7 +42,8 @@ const MonitorSection: FC<MonitorSectionProps> = ({
       hasFilters={hasFilters}
       onFilterChange={onFilterChange}
       onClearFilters={onClearFilters}
-      emptyLabel='No stale features with zero code references are being evaluated in the selected environments.'
+      onFeatureClick={onFeatureClick}
+      emptyLabel='No stale features with zero code references are being evaluated in this environment.'
       nextPage={nextPage}
       prevPage={prevPage}
       goToPage={goToPage}
diff --git a/frontend/web/components/pages/feature-lifecycle/components/NewSection.tsx b/frontend/web/components/pages/feature-lifecycle/components/NewSection.tsx
index 85166e4ef686..4d7594952bc1 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/NewSection.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/NewSection.tsx
@@ -13,6 +13,7 @@ type NewSectionProps = {
   hasFilters: boolean
   onFilterChange: (updates: Partial<FilterState>) => void
   onClearFilters: () => void
+  onFeatureClick?: (flag: ProjectFlag) => void
 }
 
 const NewSection: FC<NewSectionProps> = ({
@@ -22,6 +23,7 @@ const NewSection: FC<NewSectionProps> = ({
   hasFilters,
   isLoading,
   onClearFilters,
+  onFeatureClick,
   onFilterChange,
   projectId,
 }) => {
@@ -40,6 +42,7 @@ const NewSection: FC<NewSectionProps> = ({
       hasFilters={hasFilters}
       onFilterChange={onFilterChange}
       onClearFilters={onClearFilters}
+      onFeatureClick={onFeatureClick}
       emptyLabel='No new flags without code references found.'
       nextPage={nextPage}
       prevPage={prevPage}
diff --git a/frontend/web/components/pages/feature-lifecycle/components/PermanentSection.tsx b/frontend/web/components/pages/feature-lifecycle/components/PermanentSection.tsx
index 94791fb0a1bb..902b14157b81 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/PermanentSection.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/PermanentSection.tsx
@@ -13,6 +13,7 @@ type PermanentSectionProps = {
   hasFilters: boolean
   onFilterChange: (updates: Partial<FilterState>) => void
   onClearFilters: () => void
+  onFeatureClick?: (flag: ProjectFlag) => void
 }
 
 const PermanentSection: FC<PermanentSectionProps> = ({
@@ -22,6 +23,7 @@ const PermanentSection: FC<PermanentSectionProps> = ({
   hasFilters,
   isLoading,
   onClearFilters,
+  onFeatureClick,
   onFilterChange,
   projectId,
 }) => {
@@ -40,6 +42,7 @@ const PermanentSection: FC<PermanentSectionProps> = ({
       hasFilters={hasFilters}
       onFilterChange={onFilterChange}
       onClearFilters={onClearFilters}
+      onFeatureClick={onFeatureClick}
       emptyLabel='No permanent features found.'
       nextPage={nextPage}
       prevPage={prevPage}
diff --git a/frontend/web/components/pages/feature-lifecycle/components/RemoveSection.tsx b/frontend/web/components/pages/feature-lifecycle/components/RemoveSection.tsx
index 6858fd126673..1a7d60bdc1b4 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/RemoveSection.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/RemoveSection.tsx
@@ -1,5 +1,4 @@
-import React, { FC, useCallback, useState } from 'react'
-import Button from 'components/base/forms/Button'
+import React, { FC } from 'react'
 import SectionShell from './SectionShell'
 import { useClientPagination } from 'components/pages/feature-lifecycle/hooks/useClientPagination'
 import type { ProjectFlag } from 'common/types/responses'
@@ -8,13 +7,13 @@ import type { FilterState } from 'common/types/featureFilters'
 type RemoveSectionProps = {
   flags: ProjectFlag[]
   isLoading: boolean
-  isCheckingEvaluations: boolean
   error: unknown
   projectId: number
   filters: FilterState
   hasFilters: boolean
   onFilterChange: (updates: Partial<FilterState>) => void
   onClearFilters: () => void
+  onFeatureClick?: (flag: ProjectFlag) => void
 }
 
 const RemoveSection: FC<RemoveSectionProps> = ({
@@ -22,45 +21,15 @@ const RemoveSection: FC<RemoveSectionProps> = ({
   filters,
   flags,
   hasFilters,
-  isCheckingEvaluations,
   isLoading,
   onClearFilters,
+  onFeatureClick,
   onFilterChange,
   projectId,
 }) => {
-  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
-
   const { goToPage, nextPage, pageItems, paging, prevPage } =
     useClientPagination({ items: flags })
 
-  const handleSelect = useCallback((flag: ProjectFlag) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(flag.id)) {
-        next.delete(flag.id)
-      } else {
-        next.add(flag.id)
-      }
-      return next
-    })
-  }, [])
-
-  const isSelected = useCallback(
-    (flag: ProjectFlag) => selectedIds.has(flag.id),
-    [selectedIds],
-  )
-
-  if (isCheckingEvaluations && !isLoading) {
-    return (
-      <div className='text-center py-4'>
-        <Loader />
-        <p className='text-muted mt-2'>
-          Checking evaluation data for features...
-        </p>
-      </div>
-    )
-  }
-
   return (
     <SectionShell
       id='remove-list'
@@ -73,26 +42,11 @@ const RemoveSection: FC<RemoveSectionProps> = ({
       hasFilters={hasFilters}
       onFilterChange={onFilterChange}
       onClearFilters={onClearFilters}
-      emptyLabel='No stale features found with zero code references and zero evaluations in the selected environments and period.'
+      onFeatureClick={onFeatureClick}
+      emptyLabel='No stale features found with zero code references and zero evaluations in this environment and period.'
       nextPage={nextPage}
       prevPage={prevPage}
       goToPage={goToPage}
-      isSelected={isSelected}
-      onSelect={handleSelect}
-      header={
-        selectedIds.size > 0 ? (
-          <Row className='mb-2 justify-content-end'>
-            <Button
-              data-test='remove-flags-btn'
-              onClick={() => {
-                // TODO: implement bulk flag removal
-              }}
-            >
-              {`Remove Flags (${selectedIds.size})`}
-            </Button>
-          </Row>
-        ) : undefined
-      }
     />
   )
 }
diff --git a/frontend/web/components/pages/feature-lifecycle/components/SectionShell.tsx b/frontend/web/components/pages/feature-lifecycle/components/SectionShell.tsx
index 610a44f30588..67d7eccd0da5 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/SectionShell.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/SectionShell.tsx
@@ -23,6 +23,7 @@ type SectionShellProps = {
   header?: ReactNode
   isSelected?: (flag: ProjectFlag) => boolean
   onSelect?: (flag: ProjectFlag) => void
+  onFeatureClick?: (flag: ProjectFlag) => void
   renderActions?: (flag: ProjectFlag) => ReactNode
 }
 
@@ -39,6 +40,7 @@ const SectionShell: FC<SectionShellProps> = ({
   items,
   nextPage,
   onClearFilters,
+  onFeatureClick,
   onFilterChange,
   onSelect,
   paging,
@@ -68,10 +70,11 @@ const SectionShell: FC<SectionShellProps> = ({
         index={i}
         isSelected={isSelected?.(projectFlag)}
         onSelect={onSelect}
+        onClick={onFeatureClick}
         actions={renderActions?.(projectFlag)}
       />
     ),
-    [isSelected, onSelect, renderActions],
+    [isSelected, onSelect, onFeatureClick, renderActions],
   )
 
   if (error) {
diff --git a/frontend/web/components/pages/feature-lifecycle/components/StaleSection.tsx b/frontend/web/components/pages/feature-lifecycle/components/StaleSection.tsx
index 31e863de9cbe..2f345d07efe6 100644
--- a/frontend/web/components/pages/feature-lifecycle/components/StaleSection.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/components/StaleSection.tsx
@@ -1,5 +1,4 @@
-import React, { FC, useCallback, useState } from 'react'
-import Button from 'components/base/forms/Button'
+import React, { FC, useCallback } from 'react'
 import DropdownMenu from 'components/base/DropdownMenu'
 import SectionShell from './SectionShell'
 import { useClientPagination } from 'components/pages/feature-lifecycle/hooks/useClientPagination'
@@ -20,6 +19,7 @@ type StaleSectionProps = {
   hasFilters: boolean
   onFilterChange: (updates: Partial<FilterState>) => void
   onClearFilters: () => void
+  onFeatureClick?: (flag: ProjectFlag) => void
 }
 
 const StaleSection: FC<StaleSectionProps> = ({
@@ -29,33 +29,16 @@ const StaleSection: FC<StaleSectionProps> = ({
   hasFilters,
   isLoading,
   onClearFilters,
+  onFeatureClick,
   onFilterChange,
   projectId,
 }) => {
-  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
   const [createCleanupIssue] = useCreateCleanupIssueMutation()
   const [triggerGetCodeReferences] = useLazyGetFeatureCodeReferencesQuery()
 
   const { goToPage, nextPage, pageItems, paging, prevPage } =
     useClientPagination({ items: flags })
 
-  const handleSelect = useCallback((flag: ProjectFlag) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(flag.id)) {
-        next.delete(flag.id)
-      } else {
-        next.add(flag.id)
-      }
-      return next
-    })
-  }, [])
-
-  const isSelected = useCallback(
-    (flag: ProjectFlag) => selectedIds.has(flag.id),
-    [selectedIds],
-  )
-
   const handleCopyCleanupPrompt = useCallback(
     async (flag: ProjectFlag) => {
       try {
@@ -143,12 +126,11 @@ const StaleSection: FC<StaleSectionProps> = ({
       hasFilters={hasFilters}
       onFilterChange={onFilterChange}
       onClearFilters={onClearFilters}
+      onFeatureClick={onFeatureClick}
       emptyLabel='No stale features with code references found.'
       nextPage={nextPage}
       prevPage={prevPage}
       goToPage={goToPage}
-      isSelected={isSelected}
-      onSelect={handleSelect}
       renderActions={(flag) => (
         <DropdownMenu
           items={[
@@ -165,20 +147,6 @@ const StaleSection: FC<StaleSectionProps> = ({
           ]}
         />
       )}
-      header={
-        selectedIds.size > 0 ? (
-          <Row className='mb-2 justify-content-end'>
-            <Button
-              data-test='cleanup-code-btn'
-              onClick={() => {
-                // TODO: implement code cleanup action
-              }}
-            >
-              {`Cleanup Code (${selectedIds.size})`}
-            </Button>
-          </Row>
-        ) : undefined
-      }
     />
   )
 }
diff --git a/frontend/web/components/pages/feature-lifecycle/constants.tsx b/frontend/web/components/pages/feature-lifecycle/constants.tsx
index 713ff99f590a..cc300a14a3c1 100644
--- a/frontend/web/components/pages/feature-lifecycle/constants.tsx
+++ b/frontend/web/components/pages/feature-lifecycle/constants.tsx
@@ -1,9 +1,17 @@
-import React from 'react'
 import type { IconName } from 'components/icons/Icon'
 import type { FilterState } from 'common/types/featureFilters'
 import type { Section } from './types'
 import { SortOrder } from 'common/types/requests'
-import { TagStrategy } from 'common/types/responses'
+import { LifecycleStage, TagStrategy } from 'common/types/responses'
+
+export const SECTION_TO_STAGE: Record<Section, LifecycleStage> = {
+  live: 'live',
+  monitor: 'needs_monitoring',
+  new: 'new',
+  permanent: 'permanent',
+  remove: 'to_remove',
+  stale: 'stale',
+}
 
 export const DEFAULT_FILTER_STATE: FilterState = {
   group_owners: [],
@@ -17,26 +25,13 @@ export const DEFAULT_FILTER_STATE: FilterState = {
   value_search: '',
 }
 
-export const PERIOD_VALUES = [1, 7, 14, 30, 90]
-
-function dayLabel(days: number): string {
-  return days === 1 ? '1 day' : `${days} days`
-}
-
-export function buildPeriodOptions(prefix: string) {
-  return PERIOD_VALUES.map((v) => ({
-    label: `${prefix} ${dayLabel(v)}`,
-    value: v,
-  }))
-}
-
 export const STALE_TOOLTIP =
   'If no changes have been made to a feature in any environment within the configured threshold, the feature will be tagged as stale. You will need to enable feature versioning in your environments for stale features to be detected.'
 
-export const MONITOR_TOOLTIP = (
+export const MONITOR_TOOLTIP = `
   <div>
     There could be several reasons:
-    <ul className='mt-1 mb-0 ps-3'>
+    <ul class="mt-1 mb-0 ps-3">
       <li>
         Cached deployments — your application may still be running an older
         version that references this feature.
@@ -51,7 +46,7 @@ export const MONITOR_TOOLTIP = (
       </li>
     </ul>
   </div>
-)
+`
 
 export const SECTIONS: {
   key: Section
@@ -92,7 +87,7 @@ export const SECTIONS: {
   {
     icon: 'shield',
     key: 'monitor',
-    label: 'Needs Monitoring',
+    label: 'To Monitor',
     monitorTooltip: true,
     subtitle:
       'Stale features with no code references but still receiving evaluations.',
diff --git a/frontend/web/components/pages/feature-lifecycle/hooks/predictProdEnvironment.ts b/frontend/web/components/pages/feature-lifecycle/hooks/predictProdEnvironment.ts
new file mode 100644
index 000000000000..23dce3f7ca69
--- /dev/null
+++ b/frontend/web/components/pages/feature-lifecycle/hooks/predictProdEnvironment.ts
@@ -0,0 +1,12 @@
+import type { Environment } from 'common/types/responses'
+
+// Picks the environment most likely to represent production: the first whose
+// name looks like production, falling back to the first environment. Used as
+// the default for lifecycle classification when the user has no stored choice.
+export function predictProdEnvironment(
+  environments: Environment[],
+): number | undefined {
+  if (!environments.length) return undefined
+  const prod = environments.find((e) => e.name.toLowerCase().includes('prod'))
+  return prod?.id ?? environments[0].id
+}
diff --git a/frontend/web/components/pages/feature-lifecycle/hooks/useEvaluationCounts.ts b/frontend/web/components/pages/feature-lifecycle/hooks/useEvaluationCounts.ts
deleted file mode 100644
index 490b95958a38..000000000000
--- a/frontend/web/components/pages/feature-lifecycle/hooks/useEvaluationCounts.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import type { ProjectFlag } from 'common/types/responses'
-
-type UseEvaluationCountsOptions = {
-  staleNoCodeFlags: ProjectFlag[]
-  selectedEnvironments: string[]
-  period: number
-}
-
-export function useEvaluationCounts({
-  period,
-  selectedEnvironments,
-  staleNoCodeFlags,
-}: UseEvaluationCountsOptions) {
-  const [checkedPairs, setCheckedPairs] = useState<Set<string>>(new Set())
-  const [activeFlagIds, setActiveFlagIds] = useState<Set<number>>(new Set())
-
-  // Reset when inputs change
-  useEffect(() => {
-    setCheckedPairs(new Set())
-    setActiveFlagIds(new Set())
-  }, [staleNoCodeFlags, selectedEnvironments, period])
-
-  const handleEvaluationResult = useCallback(
-    (featureId: number, envId: string, hasEvaluations: boolean) => {
-      const key = `${featureId}:${envId}`
-      setCheckedPairs((prev) => {
-        if (prev.has(key)) return prev
-        const next = new Set(prev)
-        next.add(key)
-        return next
-      })
-      if (hasEvaluations) {
-        setActiveFlagIds((prev) => {
-          if (prev.has(featureId)) return prev
-          const next = new Set(prev)
-          next.add(featureId)
-          return next
-        })
-      }
-    },
-    [],
-  )
-
-  const isCheckingEvaluations = useMemo(() => {
-    if (staleNoCodeFlags.length === 0) return false
-    return !staleNoCodeFlags.every((f) =>
-      selectedEnvironments.every((envId) =>
-        checkedPairs.has(`${f.id}:${envId}`),
-      ),
-    )
-  }, [staleNoCodeFlags, selectedEnvironments, checkedPairs])
-
-  const monitorFlags = useMemo(
-    () => staleNoCodeFlags.filter((f) => activeFlagIds.has(f.id)),
-    [staleNoCodeFlags, activeFlagIds],
-  )
-
-  const removeFlags = useMemo(
-    () => staleNoCodeFlags.filter((f) => !activeFlagIds.has(f.id)),
-    [staleNoCodeFlags, activeFlagIds],
-  )
-
-  return {
-    handleEvaluationResult,
-    isCheckingEvaluations,
-    monitorCount: isCheckingEvaluations ? undefined : monitorFlags.length,
-    monitorFlags,
-    removeCount: isCheckingEvaluations ? undefined : removeFlags.length,
-    removeFlags,
-  }
-}
diff --git a/frontend/web/components/pages/feature-lifecycle/hooks/useLifecycleData.ts b/frontend/web/components/pages/feature-lifecycle/hooks/useLifecycleData.ts
index 693c6ce60a95..45fcb092c54c 100644
--- a/frontend/web/components/pages/feature-lifecycle/hooks/useLifecycleData.ts
+++ b/frontend/web/components/pages/feature-lifecycle/hooks/useLifecycleData.ts
@@ -1,195 +1,132 @@
 import { useEffect, useMemo } from 'react'
 import { skipToken } from '@reduxjs/toolkit/query'
-import { useGetProjectFlagsQuery } from 'common/services/useProjectFlag'
-import { useGetTagsQuery } from 'common/services/useTag'
-import { useProjectEnvironments } from 'common/hooks/useProjectEnvironments'
+import {
+  useGetLifecycleStatusCountsQuery,
+  useGetProjectFlagsQuery,
+} from 'common/services/useProjectFlag'
 import FeatureListStore from 'common/stores/feature-list-store'
-import type { ProjectFlag } from 'common/types/responses'
 import type { Req } from 'common/types/requests'
 import type { FilterState } from 'common/types/featureFilters'
-import type { LifecycleCounts } from 'components/pages/feature-lifecycle/types'
+import { SECTION_TO_STAGE } from 'components/pages/feature-lifecycle/constants'
+import type {
+  LifecycleCounts,
+  Section,
+} from 'components/pages/feature-lifecycle/types'
 
-type UseLifecycleDataOptions = {
+type BaseOptions = {
   projectId: number
-  environmentApiKey: string | undefined
+  environmentId: number | undefined
   filters: FilterState
 }
 
-function totalCodeRefs(f: ProjectFlag): number {
-  return (f.code_references_counts ?? []).reduce((sum, r) => sum + r.count, 0)
-}
-
-export function useLifecycleData({
-  environmentApiKey,
-  filters,
-  projectId,
-}: UseLifecycleDataOptions) {
-  const { data: tags } = useGetTagsQuery({ projectId: `${projectId}` })
-
-  const staleTagId = useMemo(
-    () => tags?.find((t) => t.type === 'STALE')?.id,
-    [tags],
-  )
-  const permanentTagIds = useMemo(
-    () => new Set(tags?.filter((t) => t.is_permanent).map((t) => t.id)),
-    [tags],
-  )
-
-  const { getEnvironmentIdFromKey } = useProjectEnvironments(projectId)
-  const environmentId = environmentApiKey
-    ? getEnvironmentIdFromKey(environmentApiKey)
-    : undefined
-
-  // Build base query params shared by both calls.
-  // Uses getProjectFlags which recursively fetches all pages, so no
-  // page/page_size needed. Lifecycle classification still happens
-  // client-side based on code_references_counts (new vs live, stale vs
-  // monitor/remove) since the backend doesn't support filtering by
-  // code-reference presence.
-  const baseParams = useMemo((): Req['getProjectFlags'] | null => {
-    if (!environmentId) return null
-
-    const params: Req['getProjectFlags'] = {
-      environment: environmentId,
+// Filter params for the per-section list. The backend owns lifecycle
+// classification, so no client-side tag/code-reference logic remains here.
+function useFilterParams(filters: FilterState) {
+  return useMemo(() => {
+    const params: {
+      search?: string | null
+      tag_strategy: FilterState['tag_strategy']
+      tags?: string
+      is_archived: boolean
+      value_search?: string | null
+      is_enabled?: boolean | null
+      owners?: number[]
+      group_owners?: number[]
+    } = {
       is_archived: false,
-      project: String(projectId),
-      sort_direction: filters.sort.sortOrder,
-      sort_field: filters.sort.sortBy,
       tag_strategy: filters.tag_strategy,
     }
-
     if (filters.search) params.search = filters.search
     if (filters.owners?.length) params.owners = filters.owners
     if (filters.group_owners?.length) params.group_owners = filters.group_owners
     if (filters.is_enabled !== null) params.is_enabled = filters.is_enabled
     if (filters.value_search) params.value_search = filters.value_search
-
-    // Include user-selected tags (but not stale tag) for the "all" query
-    const userTags = filters.tags ?? []
-    if (userTags.length) params.tags = userTags.join(',')
-
+    if (filters.tags?.length) params.tags = filters.tags.join(',')
     return params
-  }, [environmentId, projectId, filters])
-
-  // Query 1: All features (no stale tag filter) — for new, live, permanent
-  const allQuery = useGetProjectFlagsQuery(baseParams ?? skipToken, {
-    refetchOnMountOrArgChange: true,
-  })
-
-  // Query 2: Stale-tagged features — for stale, monitor, remove
-  const staleParams = useMemo(() => {
-    if (!baseParams || !staleTagId) return null
-    const userTags = filters.tags ?? []
-    const mergedTags = userTags.includes(staleTagId)
-      ? userTags
-      : [...userTags, staleTagId]
-    return { ...baseParams, tags: mergedTags.join(',') }
-  }, [baseParams, staleTagId, filters.tags])
-
-  const staleQuery = useGetProjectFlagsQuery(staleParams ?? skipToken, {
-    refetchOnMountOrArgChange: true,
-  })
+  }, [filters])
+}
 
-  // Extract refetch fns so eslint sees stable references
-  const { refetch: refetchAll } = allQuery
-  const { refetch: refetchStale } = staleQuery
+// Sidebar counts for every lifecycle stage in a single API call. The counts
+// endpoint is environment-scoped and unfiltered — it reports the whole
+// environment regardless of the active list filters.
+export function useLifecycleCounts({
+  environmentId,
+}: {
+  environmentId: number | undefined
+}) {
+  const query = useGetLifecycleStatusCountsQuery(
+    environmentId ? { environment: environmentId } : skipToken,
+    { refetchOnMountOrArgChange: true },
+  )
 
-  // Refetch on feature save/remove
+  const { refetch } = query
   useEffect(() => {
-    const onFeatureListChange = () => {
-      refetchAll()
-      refetchStale()
-    }
-    FeatureListStore.on('saved', onFeatureListChange)
-    FeatureListStore.on('removed', onFeatureListChange)
+    FeatureListStore.on('saved', refetch)
+    FeatureListStore.on('removed', refetch)
     return () => {
-      FeatureListStore.off('saved', onFeatureListChange)
-      FeatureListStore.off('removed', onFeatureListChange)
+      FeatureListStore.off('saved', refetch)
+      FeatureListStore.off('removed', refetch)
     }
-  }, [refetchAll, refetchStale])
-
-  const isPermanent = useMemo(
-    () => (f: ProjectFlag) => f.tags.some((t) => permanentTagIds.has(t)),
-    [permanentTagIds],
-  )
-
-  // Pre-filter arrays from query 1
-  const newFlags = useMemo(() => {
-    if (!allQuery.data?.results || !staleTagId) return []
-    return allQuery.data.results.filter(
-      (f) =>
-        !f.tags.includes(staleTagId) &&
-        !isPermanent(f) &&
-        totalCodeRefs(f) === 0,
-    )
-  }, [allQuery.data?.results, staleTagId, isPermanent])
-
-  const liveFlags = useMemo(() => {
-    if (!allQuery.data?.results || !staleTagId) return []
-    return allQuery.data.results.filter(
-      (f) =>
-        !f.tags.includes(staleTagId) && !isPermanent(f) && totalCodeRefs(f) > 0,
-    )
-  }, [allQuery.data?.results, staleTagId, isPermanent])
-
-  const permanentFlags = useMemo(() => {
-    if (!allQuery.data?.results) return []
-    return allQuery.data.results.filter(isPermanent)
-  }, [allQuery.data?.results, isPermanent])
+  }, [refetch])
+
+  const counts: LifecycleCounts = useMemo(() => {
+    const data = query.data
+    if (!data) return {}
+    return {
+      live: data.live,
+      monitor: data.needs_monitoring,
+      new: data.new,
+      permanent: data.permanent,
+      remove: data.to_remove,
+      stale: data.stale,
+    }
+  }, [query.data])
 
-  // Pre-filter arrays from query 2
-  const staleFlags = useMemo(() => {
-    if (!staleQuery.data?.results) return []
-    return staleQuery.data.results.filter(
-      (f) => !isPermanent(f) && totalCodeRefs(f) > 0,
-    )
-  }, [staleQuery.data?.results, isPermanent])
+  return {
+    counts,
+    error: query.error,
+    isLoading: query.isLoading || query.isFetching,
+  }
+}
 
-  const staleNoCodeFlags = useMemo(() => {
-    if (!staleQuery.data?.results) return []
-    return staleQuery.data.results.filter(
-      (f) => !isPermanent(f) && totalCodeRefs(f) === 0,
-    )
-  }, [staleQuery.data?.results, isPermanent])
+// Flags for the currently active section, classified by the backend.
+export function useLifecycleSectionFlags({
+  environmentId,
+  filters,
+  projectId,
+  section,
+}: BaseOptions & { section: Section }) {
+  const filterParams = useFilterParams(filters)
 
-  // Counts (monitor/remove will be overridden by useEvaluationCounts)
-  const counts: LifecycleCounts = useMemo(
-    () => ({
-      live: liveFlags.length,
-      new: newFlags.length,
-      permanent: permanentFlags.length,
-      stale: staleFlags.length,
-    }),
-    [
-      newFlags.length,
-      liveFlags.length,
-      permanentFlags.length,
-      staleFlags.length,
-    ],
-  )
+  const params = useMemo((): Req['getProjectFlags'] | null => {
+    if (!environmentId) return null
+    return {
+      environment: environmentId,
+      lifecycle_stage: SECTION_TO_STAGE[section],
+      project: String(projectId),
+      sort_direction: filters.sort.sortOrder,
+      sort_field: filters.sort.sortBy,
+      ...filterParams,
+    }
+  }, [environmentId, section, projectId, filters.sort, filterParams])
 
-  const isLoading = allQuery.isLoading || staleQuery.isLoading || !staleTagId
-  const error = allQuery.error || staleQuery.error
+  const query = useGetProjectFlagsQuery(params ?? skipToken, {
+    refetchOnMountOrArgChange: true,
+  })
 
-  const refetch = useMemo(
-    () => () => {
-      refetchAll()
-      refetchStale()
-    },
-    [refetchAll, refetchStale],
-  )
+  const { refetch } = query
+  useEffect(() => {
+    FeatureListStore.on('saved', refetch)
+    FeatureListStore.on('removed', refetch)
+    return () => {
+      FeatureListStore.off('saved', refetch)
+      FeatureListStore.off('removed', refetch)
+    }
+  }, [refetch])
 
   return {
-    counts,
-    error,
-    isLoading,
-    liveFlags,
-    newFlags,
-    permanentFlags,
-    permanentTagIds,
-    refetch,
-    staleFlags,
-    staleNoCodeFlags,
-    staleTagId,
+    error: query.error,
+    flags: query.data?.results ?? [],
+    isLoading: query.isLoading || query.isFetching,
   }
 }
diff --git a/frontend/web/components/pages/feature-lifecycle/hooks/useLifecycleEnvironment.ts b/frontend/web/components/pages/feature-lifecycle/hooks/useLifecycleEnvironment.ts
new file mode 100644
index 000000000000..e7d06716293b
--- /dev/null
+++ b/frontend/web/components/pages/feature-lifecycle/hooks/useLifecycleEnvironment.ts
@@ -0,0 +1,35 @@
+import { useCallback, useMemo } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { setLifecycleEnvironment } from 'common/lifecycleEnvironmentSlice'
+import { useProjectEnvironments } from 'common/hooks/useProjectEnvironments'
+import { StoreStateType } from 'common/store'
+import { predictProdEnvironment } from './predictProdEnvironment'
+
+// Resolves the environment used for lifecycle classification for a project.
+// Preference order: the user's stored choice → an environment whose name
+// looks like production → the first environment. The choice is cached per
+// project in the Redux store so it survives navigation.
+export function useLifecycleEnvironment(projectId: number) {
+  const dispatch = useDispatch()
+  const { environments } = useProjectEnvironments(projectId)
+
+  const storedEnvironmentId = useSelector(
+    (state: StoreStateType) => state.lifecycleEnvironment.byProject[projectId],
+  )
+
+  const defaultEnvironmentId = useMemo(
+    () => predictProdEnvironment(environments),
+    [environments],
+  )
+
+  const environmentId = storedEnvironmentId ?? defaultEnvironmentId
+
+  const setEnvironmentId = useCallback(
+    (id: number) => {
+      dispatch(setLifecycleEnvironment({ environmentId: id, projectId }))
+    },
+    [dispatch, projectId],
+  )
+
+  return { environmentId, environments, setEnvironmentId }
+}
diff --git a/frontend/web/components/pages/feature-lifecycle/types.ts b/frontend/web/components/pages/feature-lifecycle/types.ts
index 45a3e6932ee0..a1adafb88ff0 100644
--- a/frontend/web/components/pages/feature-lifecycle/types.ts
+++ b/frontend/web/components/pages/feature-lifecycle/types.ts
@@ -1,5 +1,3 @@
-import type { ProjectFlag } from 'common/types/responses'
-
 export type Section =
   | 'new'
   | 'live'
@@ -17,21 +15,3 @@ export type Pagination = {
 }
 
 export type LifecycleCounts = Partial<Record<Section, number>>
-
-type EvaluationResult = {
-  featureId: number
-  environmentId: string
-  hasEvaluations: boolean
-}
-
-type LifecycleData = {
-  newFlags: ProjectFlag[]
-  liveFlags: ProjectFlag[]
-  permanentFlags: ProjectFlag[]
-  staleFlags: ProjectFlag[]
-  staleNoCodeFlags: ProjectFlag[]
-  counts: LifecycleCounts
-  isLoading: boolean
-  error: unknown
-  refetch: () => void
-}