diff --git a/frontend/common/services/useHealthEvents.ts b/frontend/common/services/useHealthEvents.ts
new file mode 100644
index 000000000000..6cf198a75388
--- /dev/null
+++ b/frontend/common/services/useHealthEvents.ts
@@ -0,0 +1,44 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const healthService = service
+  .enhanceEndpoints({ addTagTypes: ['HealthEvents'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      getHealthEvents: builder.query<
+        Res['healthEvents'],
+        Req['getHealthEvents']
+      >({
+        providesTags: [{ id: 'LIST', type: 'HealthEvents' }],
+        query: (query: Req['getHealthEvents']) => ({
+          url: `projects/${query.projectId}/feature-health/events/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getHealthEvents(
+  store: any,
+  data: Req['getHealthEvents'],
+  options?: Parameters<
+    typeof healthService.endpoints.getHealthEvents.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthService.endpoints.getHealthEvents.initiate(data, options),
+  )
+}
+
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useGetHealthEventsQuery,
+  // END OF EXPORTS
+} = healthService
+
+/* Usage examples:
+const { data, isLoading } = useGetHealthEventsQuery({ id: 2 }, {}) //get hook
+healthService.endpoints.getHealthEvents.select({id: 2})(store.getState()) //access data from any function
+*/
diff --git a/frontend/common/services/useHealthProvider.ts b/frontend/common/services/useHealthProvider.ts
new file mode 100644
index 000000000000..e0df2f34f240
--- /dev/null
+++ b/frontend/common/services/useHealthProvider.ts
@@ -0,0 +1,95 @@
+import { Res } from 'common/types/responses'
+import { Req } from 'common/types/requests'
+import { service } from 'common/service'
+
+export const healthProviderService = service
+  .enhanceEndpoints({ addTagTypes: ['HealthProviders'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      createHealthProvider: builder.mutation<
+        Res['healthProvider'],
+        Req['createHealthProvider']
+      >({
+        invalidatesTags: [{ id: 'LIST', type: 'HealthProviders' }],
+        query: (query: Req['createHealthProvider']) => ({
+          body: { name: query.name },
+          method: 'POST',
+          url: `projects/${query.projectId}/feature-health/providers/`,
+        }),
+      }),
+      deleteHealthProvider: builder.mutation<void, Req['deleteHealthProvider']>(
+        {
+          invalidatesTags: [{ id: 'LIST', type: 'HealthProviders' }],
+          query: (query: Req['deleteHealthProvider']) => ({
+            method: 'DELETE',
+            url: `projects/${query.projectId}/feature-health/providers/${query.providerId}/`,
+          }),
+        },
+      ),
+      getHealthProviders: builder.query<
+        Res['healthProviders'],
+        Req['getHealthProviders']
+      >({
+        providesTags: [{ id: 'LIST', type: 'HealthProviders' }],
+        query: (query: Req['getHealthProviders']) => ({
+          url: `projects/${query.projectId}/feature-health/providers/`,
+        }),
+      }),
+      // END OF ENDPOINTS
+    }),
+  })
+
+export async function getHealthProviders(
+  store: any,
+  data: Req['getHealthProviders'],
+  options?: Parameters<
+    typeof healthProviderService.endpoints.getHealthProviders.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthProviderService.endpoints.getHealthProviders.initiate(data, options),
+  )
+}
+
+export async function createHealthProvider(
+  store: any,
+  data: Req['createHealthProvider'],
+  options?: Parameters<
+    typeof healthProviderService.endpoints.createHealthProvider.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthProviderService.endpoints.createHealthProvider.initiate(
+      data,
+      options,
+    ),
+  )
+}
+
+export async function deleteHealthProvider(
+  store: any,
+  data: Req['deleteHealthProvider'],
+  options?: Parameters<
+    typeof healthProviderService.endpoints.deleteHealthProvider.initiate
+  >[1],
+) {
+  return store.dispatch(
+    healthProviderService.endpoints.deleteHealthProvider.initiate(
+      data,
+      options,
+    ),
+  )
+}
+// END OF FUNCTION_EXPORTS
+
+export const {
+  useCreateHealthProviderMutation,
+  useDeleteHealthProviderMutation,
+  useGetHealthProvidersQuery,
+  // END OF EXPORTS
+} = healthProviderService
+
+/* Usage examples:
+const { data, isLoading } = useGetHealthProvidersQuery({ id: 2 }, {}) //get hook
+healthProviderService.endpoints.getHealthProviders.select({id: 2})(store.getState()) //access data from any function
+*/
diff --git a/frontend/common/services/useTag.ts b/frontend/common/services/useTag.ts
index c31504295294..c62d11b13869 100644
--- a/frontend/common/services/useTag.ts
+++ b/frontend/common/services/useTag.ts
@@ -68,8 +68,7 @@ export async function getTags(
   data: Req['getTags'],
   options?: Parameters<typeof tagService.endpoints.getTags.initiate>[1],
 ) {
-  store.dispatch(tagService.endpoints.getTags.initiate(data, options))
-  return Promise.all(store.dispatch(tagService.util.getRunningQueriesThunk()))
+  return store.dispatch(tagService.endpoints.getTags.initiate(data, options))
 }
 export async function createTag(
   store: any,
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index bad69b7d2a2a..6e9d7d85cfc2 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -114,6 +114,10 @@ export type Req = {
   getPermission: { id: string; level: PermissionLevel }
   getAvailablePermissions: { level: PermissionLevel }
   getTag: { id: string }
+  getHealthEvents: { projectId: number | string }
+  getHealthProviders: { projectId: number }
+  createHealthProvider: { projectId: number; name: string }
+  deleteHealthProvider: { projectId: number; providerId: number }
   updateTag: { projectId: string; tag: Tag }
   deleteTag: {
     id: number
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index ba774902fcc1..dfedc50e2a32 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -352,7 +352,7 @@ export type Tag = {
   label: string
   is_system_tag: boolean
   is_permanent: boolean
-  type: 'STALE' | 'NONE'
+  type: 'STALE' | 'UNHEALTHY' | 'NONE'
 }
 
 export type MultivariateFeatureStateValue = {
@@ -637,6 +637,23 @@ export type SAMLAttributeMapping = {
   idp_attribute_name: string
 }
 
+export type HealthEvent = {
+  created_at: string
+  environment: number
+  feature: number
+  provider_name: string
+  reason: string
+  type: 'HEALTHY' | 'UNHEALTHY'
+}
+
+export type HealthProvider = {
+  id: number
+  created_by: string
+  name: string
+  project: number
+  webhook_url: number
+}
+
 export type Res = {
   segments: PagedResponse<Segment>
   segment: Segment
@@ -671,6 +688,9 @@ export type Res = {
   availablePermissions: AvailablePermission[]
   tag: Tag
   tags: Tag[]
+  healthEvents: HealthEvent[]
+  healthProvider: HealthProvider
+  healthProviders: HealthProvider[]
   account: Account
   userEmail: {}
   groupAdmin: { id: string }
diff --git a/frontend/web/components/EditHealthProvider.tsx b/frontend/web/components/EditHealthProvider.tsx
new file mode 100644
index 000000000000..4cd3d3a21a76
--- /dev/null
+++ b/frontend/web/components/EditHealthProvider.tsx
@@ -0,0 +1,249 @@
+import React, { FC, useEffect } from 'react'
+import { HealthProvider } from 'common/types/responses'
+import PanelSearch from './PanelSearch'
+import Button from './base/forms/Button'
+
+import Icon from './Icon'
+
+import Utils from 'common/utils/utils'
+import {
+  useCreateHealthProviderMutation,
+  useDeleteHealthProviderMutation,
+  useGetHealthProvidersQuery,
+} from 'common/services/useHealthProvider'
+import { components } from 'react-select'
+
+type EditHealthProviderType = {
+  projectId: number
+  tabClassName?: string
+}
+
+const handleError = (error: Error, fallbackMessage?: string) => {
+  console.error(error)
+  toast(error?.message ?? fallbackMessage ?? 'Something went wrong!', 'danger')
+}
+
+const Option = (props: any) => {
+  return <components.Option {...props}>{props.children}</components.Option>
+}
+
+const CreateHealthProviderForm = ({ projectId }: { projectId: number }) => {
+  const [selected, setSelected] = React.useState<string | undefined>()
+  const [createProvider, { error, isError, isLoading, isSuccess }] =
+    useCreateHealthProviderMutation()
+
+  // TODO: Replace from list of provider options from API
+  const providers = [{ name: 'Sample' }, { name: 'Grafana' }]
+
+  const providerOptions = providers.map((provider) => ({
+    label: provider.name,
+    value: provider.name,
+  }))
+
+  useEffect(() => {
+    if (isSuccess) {
+      setSelected(undefined)
+    }
+  }, [isSuccess])
+
+  useEffect(() => {
+    if (!isError || !error) return
+    handleError(error?.message, 'Failed to create provider')
+  }, [error, isError])
+
+  return (
+    <form
+      className='col-md-8'
+      onSubmit={(e) => {
+        e.preventDefault()
+        if (!selected) {
+          return
+        }
+        createProvider({ name: selected, projectId })
+      }}
+    >
+      <Row className='align-items-start'>
+        <Flex className='ml-0'>
+          <Select
+            disabled={!providerOptions?.length}
+            placeholder='Select a provider'
+            data-test='add-health-provider-select'
+            components={{ Option }}
+            value={providerOptions.find((v) => v.value === selected)}
+            onChange={(option: { value: string }) => {
+              setSelected(option.value)
+            }}
+            options={providerOptions}
+          />
+        </Flex>
+      </Row>
+      <div className='text-right mt-4'>
+        <Button
+          type='submit'
+          id='save-proj-btn'
+          disabled={isLoading || !selected}
+          className='ml-3'
+        >
+          {isLoading ? 'Creating' : 'Create'}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+const EditHealthProvider: FC<EditHealthProviderType> = ({
+  projectId,
+  tabClassName,
+}) => {
+  const {
+    data: healthProviders,
+    error: errorFetching,
+    isError: isErrorFetching,
+    isLoading,
+  } = useGetHealthProvidersQuery({
+    projectId,
+  })
+
+  // TODO: API Needs to expose provider id
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [
+    deleteProvider,
+    { error: deleteError, isError: isDeleteError, isSuccess: isDeleteSuccess },
+  ] = useDeleteHealthProviderMutation()
+
+  useEffect(() => {
+    if (isDeleteSuccess) {
+      toast('Provider deleted successfully', 'success')
+    }
+  }, [isDeleteSuccess])
+
+  useEffect(() => {
+    if (isDeleteError) {
+      handleError(deleteError?.message, 'Failed to delete provider')
+    }
+
+    if (isErrorFetching) {
+      handleError(errorFetching?.message, 'Failed to fetch providers')
+    }
+  }, [deleteError, isDeleteError, isErrorFetching, errorFetching])
+
+  return (
+    <div className='mt-4'>
+      <Row>
+        <h5>Manage Health Providers</h5>
+      </Row>
+      <p className='fs-small lh-sm col-md-8 mb-4'>
+        Flagsmith lets you connect health providers for tagging feature flags
+        unhealthy state in different environments.{' '}
+        <Button
+          theme='text'
+          href='' // TODO: Add docs
+          target='_blank'
+          className='fw-normal'
+        >
+          Learn about Feature Health.
+        </Button>
+      </p>
+
+      <label>Provider Name</label>
+      <CreateHealthProviderForm projectId={projectId} />
+      <hr className='py-0 my-4' />
+
+      <div className='mt-4'>
+        {isLoading && (
+          <div className='centered-container'>
+            <Loader />
+          </div>
+        )}
+        {!isLoading && !!healthProviders?.length && (
+          <div className={tabClassName}>
+            <PanelSearch
+              id='project-health-providers-list'
+              title='Health Providers'
+              className='panel--transparent'
+              items={healthProviders}
+              itemHeight={64}
+              header={
+                <Row className='table-header'>
+                  <Flex className='table-column px-3'>Provider</Flex>
+                  <Flex className='table-column'>Webhook URL</Flex>
+                </Row>
+              }
+              renderRow={(provider: HealthProvider) => {
+                const { name, webhook_url: webhook } = provider
+                const matchingPermissions = {
+                  admin: true,
+                }
+
+                return (
+                  <Row
+                    space
+                    className={`list-item${
+                      matchingPermissions?.admin ? '' : ' clickable'
+                    }`}
+                    key={provider.name}
+                  >
+                    <Flex className='table-column px-3'>
+                      <div className='mb-1 font-weight-medium'>{name}</div>
+                    </Flex>
+                    {matchingPermissions?.admin && (
+                      <Flex className='table-column fs-small lh-sm'>
+                        <div className='d-flex align-items-center'>
+                          <div
+                            style={{
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              width: '280px',
+                            }}
+                          >
+                            {webhook}
+                          </div>
+                          <Button
+                            onClick={() => {
+                              Utils.copyToClipboard(webhook)
+                            }}
+                            theme='icon'
+                            className='ms-2'
+                          >
+                            <Icon name='copy' />
+                          </Button>
+                        </div>
+                      </Flex>
+                    )}
+                    <div className='table-column'>
+                      <Button
+                        id='delete-provider'
+                        data-test='delete-provider'
+                        type='button'
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          e.preventDefault()
+                          // TODO: API Needs to expose provider id
+                          // deleteProvider({ projectId, providerId: provider.id })
+                        }}
+                        className='btn btn-with-icon'
+                      >
+                        <Icon name='trash-2' width={20} fill='#656D7B' />
+                      </Button>
+                    </div>
+                  </Row>
+                )
+              }}
+              renderNoResults={
+                <div>You have no health provider in this project.</div>
+              }
+              filterRow={(item: HealthProvider, search: string) => {
+                const strToSearch = `${item.name} ${item.webhook_url}`
+                return (
+                  strToSearch.toLowerCase().indexOf(search.toLowerCase()) !== -1
+                )
+              }}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+// export default ConfigProvider(EditHealthProvider)
+export default EditHealthProvider
diff --git a/frontend/web/components/FeatureRow.js b/frontend/web/components/FeatureRow.js
index de27284e5847..34df7c92c2f3 100644
--- a/frontend/web/components/FeatureRow.js
+++ b/frontend/web/components/FeatureRow.js
@@ -16,6 +16,9 @@ import Button from './base/forms/Button'
 import SegmentOverridesIcon from './SegmentOverridesIcon'
 import IdentityOverridesIcon from './IdentityOverridesIcon'
 import StaleFlagWarning from './StaleFlagWarning'
+import UnhealthyFlagWarning from './UnhealthyFlagWarning'
+import { getTags } from 'common/services/useTag'
+import { getStore } from 'common/store'
 
 export const width = [200, 70, 55, 70, 450]
 class TheComponent extends Component {
@@ -23,7 +26,21 @@ class TheComponent extends Component {
     router: propTypes.object.isRequired,
   }
 
-  state = {}
+  constructor(props, context) {
+    super(props, context)
+
+    this.state = {
+      unhealthyTagId: undefined,
+    }
+
+    getTags(getStore(), {
+      projectId: `${this.props.projectId}`,
+    }).then((res) => {
+      this.setState({
+        unhealthyTagId: res.data?.find((tag) => tag?.type === 'UNHEALTHY')?.id,
+      })
+    })
+  }
 
   confirmToggle = () => {
     const {
@@ -85,7 +102,9 @@ class TheComponent extends Component {
       return
     }
     API.trackEvent(Constants.events.VIEW_FEATURE)
-
+    const hideTags = this.state.unhealthyTagId
+      ? [this.state.unhealthyTagId]
+      : []
     history.replaceState(
       {},
       null,
@@ -107,6 +126,7 @@ class TheComponent extends Component {
         </Button>
       </Row>,
       <CreateFlagModal
+        hideTags={hideTags}
         history={this.context.router.history}
         environmentId={this.props.environmentId}
         projectId={this.props.projectId}
@@ -240,6 +260,10 @@ class TheComponent extends Component {
         </Flex>
       )
     }
+
+    const isFeatureHealthEnabled =
+      Utils.getFlagsmithHasFeature('feature_health')
+
     return (
       <Row
         className={classNames(
@@ -321,8 +345,14 @@ class TheComponent extends Component {
                   )}
                 </TagValues>
                 {!!isCompact && <StaleFlagWarning projectFlag={projectFlag} />}
+                {isFeatureHealthEnabled && !!isCompact && (
+                  <UnhealthyFlagWarning projectFlag={projectFlag} />
+                )}
               </Row>
               {!isCompact && <StaleFlagWarning projectFlag={projectFlag} />}
+              {isFeatureHealthEnabled && !isCompact && (
+                <UnhealthyFlagWarning projectFlag={projectFlag} />
+              )}
               {description && !isCompact && (
                 <div
                   className='list-item-subtitle'
diff --git a/frontend/web/components/UnhealthyFlagWarning.tsx b/frontend/web/components/UnhealthyFlagWarning.tsx
new file mode 100644
index 000000000000..88a9cd012294
--- /dev/null
+++ b/frontend/web/components/UnhealthyFlagWarning.tsx
@@ -0,0 +1,47 @@
+import { FC } from 'react'
+import Constants from 'common/constants'
+import { ProjectFlag } from 'common/types/responses'
+import { IonIcon } from '@ionic/react'
+import { warning } from 'ionicons/icons'
+import { useGetTagsQuery } from 'common/services/useTag'
+import { useGetHealthEventsQuery } from 'common/services/useHealthEvents'
+
+type UnhealthyFlagWarningType = {
+  projectFlag: ProjectFlag
+}
+
+const UnhealthyFlagWarning: FC<UnhealthyFlagWarningType> = ({
+  projectFlag,
+}) => {
+  const { data: tags } = useGetTagsQuery(
+    { projectId: String(projectFlag.project) },
+    { refetchOnFocus: false, skip: !projectFlag?.project },
+  )
+  const { data: healthEvents } = useGetHealthEventsQuery(
+    { projectId: String(projectFlag.project) },
+    { refetchOnFocus: false, skip: !projectFlag?.project },
+  )
+  const unhealthyTagId = tags?.find((tag) => tag.type === 'UNHEALTHY')?.id
+  const latestHealthEvent = healthEvents?.find(
+    (event) => event.feature === projectFlag.id,
+  )
+
+  if (
+    !unhealthyTagId ||
+    !projectFlag?.tags?.includes(unhealthyTagId) ||
+    latestHealthEvent?.type !== 'UNHEALTHY'
+  )
+    return null
+
+  return (
+    <div className='fs-caption' style={{ color: Constants.tagColors[16] }}>
+      {/* TODO: Provider info and link to issue will be provided by reason via the API */}
+      {latestHealthEvent.reason}
+      {latestHealthEvent.reason && (
+        <IonIcon style={{ marginBottom: -2 }} className='ms-1' icon={warning} />
+      )}
+    </div>
+  )
+}
+
+export default UnhealthyFlagWarning
diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js
index 7b5abb74b185..d7aff7d15b32 100644
--- a/frontend/web/components/modals/CreateFlag.js
+++ b/frontend/web/components/modals/CreateFlag.js
@@ -72,6 +72,7 @@ const CreateFlag = class extends Component {
           multivariate_options: [],
         }
     const { allowEditDescription } = this.props
+    const hideTags = this.props.hideTags || []
     if (this.props.projectFlag) {
       this.userOverridesPage(1)
     }
@@ -106,7 +107,7 @@ const CreateFlag = class extends Component {
       name,
       period: 30,
       selectedIdentity: null,
-      tags: tags || [],
+      tags: tags?.filter((tag) => !hideTags.includes(tag)) || [],
     }
   }
 
diff --git a/frontend/web/components/pages/FeaturesPage.js b/frontend/web/components/pages/FeaturesPage.js
index d0675c7fc0c7..8bf72731c63b 100644
--- a/frontend/web/components/pages/FeaturesPage.js
+++ b/frontend/web/components/pages/FeaturesPage.js
@@ -5,8 +5,6 @@ import FeatureRow from 'components/FeatureRow'
 import FeatureListStore from 'common/stores/feature-list-store'
 import ProjectStore from 'common/stores/project-store'
 import Permission from 'common/providers/Permission'
-import { getTags } from 'common/services/useTag'
-import { getStore } from 'common/store'
 import JSONReference from 'components/JSONReference'
 import ConfigProvider from 'common/providers/ConfigProvider'
 import Constants from 'common/constants'
@@ -24,6 +22,7 @@ import TableOwnerFilter from 'components/tables/TableOwnerFilter'
 import TableGroupsFilter from 'components/tables/TableGroupsFilter'
 import TableValueFilter from 'components/tables/TableValueFilter'
 import classNames from 'classnames'
+import Button from 'components/base/forms/Button'
 
 const FeaturesPage = class extends Component {
   static displayName = 'FeaturesPage'
@@ -68,9 +67,7 @@ const FeaturesPage = class extends Component {
         typeof params.value_search === 'string' ? params.value_search : '',
     }
     ES6Component(this)
-    getTags(getStore(), {
-      projectId: `${this.props.match.params.projectId}`,
-    })
+
     AppActions.getFeatures(
       this.props.match.params.projectId,
       this.props.match.params.environmentId,
@@ -221,6 +218,7 @@ const FeaturesPage = class extends Component {
     const { environmentId, projectId } = this.props.match.params
     const readOnly = Utils.getFlagsmithHasFeature('read_only_mode')
     const environment = ProjectStore.getEnvironment(environmentId)
+
     return (
       <div
         data-test='features-page'
@@ -394,7 +392,7 @@ const FeaturesPage = class extends Component {
                                           this.filter,
                                         )
                                       }}
-                                      onChange={(tags, isAutomated) => {
+                                      onChange={(tags) => {
                                         FeatureListStore.isLoading = true
                                         if (
                                           tags.includes('') &&
diff --git a/frontend/web/components/pages/HomeAside.tsx b/frontend/web/components/pages/HomeAside.tsx
index 84992f348323..fb5c8b4755db 100644
--- a/frontend/web/components/pages/HomeAside.tsx
+++ b/frontend/web/components/pages/HomeAside.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { ComponentProps, FC, useEffect, useMemo, useState } from 'react'
 import ProjectStore from 'common/stores/project-store'
 import ChangeRequestStore from 'common/stores/change-requests-store'
 import Utils from 'common/utils/utils'
@@ -7,7 +7,7 @@ import ConfigProvider from 'common/providers/ConfigProvider'
 import Permission from 'common/providers/Permission'
 import { Link, NavLink } from 'react-router-dom'
 import { IonIcon } from '@ionic/react'
-import { code, createOutline } from 'ionicons/icons'
+import { checkmarkCircle, code, createOutline, warning } from 'ionicons/icons'
 import EnvironmentDropdown from 'components/EnvironmentDropdown'
 import ProjectProvider from 'common/providers/ProjectProvider'
 import OrganisationProvider from 'common/providers/OrganisationProvider'
@@ -22,6 +22,7 @@ import EnvironmentSelect from 'components/EnvironmentSelect'
 import { components } from 'react-select'
 import SettingsIcon from 'components/svg/SettingsIcon'
 import BuildVersion from 'components/BuildVersion'
+import { useGetHealthEventsQuery } from 'common/services/useHealthEvents'
 
 type HomeAsideType = {
   environmentId: string
@@ -29,11 +30,49 @@ type HomeAsideType = {
   history: RouterChildContext['router']['history']
 }
 
+type OptionProps = ComponentProps<typeof components.Option>
+type EnvSelectOptionProps = OptionProps & {
+  hasWarning?: boolean
+}
+
+const EnvSelectOption = ({ hasWarning, ...rest }: EnvSelectOptionProps) => {
+  return (
+    <components.Option {...rest}>
+      <div className='d-flex align-items-center'>
+        {rest.children}
+        <div className='d-flex flex-1 align-items-center justify-content-between '>
+          {Utils.getFlagsmithHasFeature('feature_health') && hasWarning && (
+            <Tooltip
+              title={
+                <div className='flex ml-1'>
+                  <IonIcon className='text-warning' icon={warning} />
+                </div>
+              }
+            >
+              This environment has unhealthy features
+            </Tooltip>
+          )}
+          <div className='flex ml-auto'>
+            {rest.isSelected && (
+              <IonIcon icon={checkmarkCircle} className='text-primary' />
+            )}
+          </div>
+        </div>
+      </div>
+    </components.Option>
+  )
+}
+
 const HomeAside: FC<HomeAsideType> = ({
   environmentId,
   history,
   projectId,
 }) => {
+  const { data: healthEvents } = useGetHealthEventsQuery(
+    { projectId: projectId },
+    { refetchOnFocus: false, skip: !projectId },
+  )
+
   useEffect(() => {
     if (environmentId) {
       AppActions.getChangeRequests(environmentId, {})
@@ -50,6 +89,19 @@ const HomeAside: FC<HomeAsideType> = ({
     //eslint-disable-next-line
   }, [])
 
+  const unhealthyEnvironments = useMemo(() => {
+    return healthEvents
+      ?.filter((event) => event.type === 'UNHEALTHY')
+      .map(
+        (event) =>
+          (
+            ProjectStore.getEnvironmentById(
+              event.environment,
+            ) as Environment | null
+          )?.api_key,
+      )
+  }, [healthEvents])
+
   const environment: Environment | null =
     environmentId === 'create'
       ? null
@@ -122,6 +174,14 @@ const HomeAside: FC<HomeAsideType> = ({
                                   </components.Menu>
                                 )
                               },
+                              Option: (props: OptionProps) => (
+                                <EnvSelectOption
+                                  {...props}
+                                  hasWarning={unhealthyEnvironments?.includes(
+                                    props.data.value,
+                                  )}
+                                />
+                              ),
                             }}
                             onChange={(newEnvironmentId) => {
                               if (newEnvironmentId !== environmentId) {
diff --git a/frontend/web/components/pages/ProjectSettingsPage.js b/frontend/web/components/pages/ProjectSettingsPage.js
index b21dafa03730..6de0258eeef6 100644
--- a/frontend/web/components/pages/ProjectSettingsPage.js
+++ b/frontend/web/components/pages/ProjectSettingsPage.js
@@ -21,11 +21,10 @@ import FeatureExport from 'components/import-export/FeatureExport'
 import ProjectUsage from 'components/ProjectUsage'
 import ProjectStore from 'common/stores/project-store'
 import Tooltip from 'components/Tooltip'
-import { Link } from 'react-router-dom'
 import Setting from 'components/Setting'
 import PlanBasedBanner from 'components/PlanBasedAccess'
 import classNames from 'classnames'
-import { getRoleProjectPermissions } from 'common/services/useRolePermission'
+import EditHealthProvider from 'components/EditHealthProvider'
 
 const ProjectSettingsPage = class extends Component {
   static displayName = 'ProjectSettingsPage'
@@ -581,6 +580,17 @@ const ProjectSettingsPage = class extends Component {
                         projectId={this.props.match.params.projectId}
                       />
                     </TabItem>
+                    {Utils.getFlagsmithHasFeature('feature_health') && (
+                      <TabItem
+                        data-test='feature-health-settings'
+                        tabLabel='Feature Health'
+                      >
+                        <EditHealthProvider
+                          projectId={this.props.match.params.projectId}
+                          tabClassName='flat-panel'
+                        />
+                      </TabItem>
+                    )}
                     <TabItem tabLabel='Permissions'>
                       <EditPermissions
                         onSaveUser={() => {
diff --git a/frontend/web/components/tags/Tag.tsx b/frontend/web/components/tags/Tag.tsx
index f18c54714144..595d4b63441a 100644
--- a/frontend/web/components/tags/Tag.tsx
+++ b/frontend/web/components/tags/Tag.tsx
@@ -19,6 +19,9 @@ export const getTagColor = (tag: Partial<TTag>, selected?: boolean) => {
   if (Utils.getFlagsmithHasFeature('dark_mode') && tag.color === '#344562') {
     return '#9DA4AE'
   }
+  if (tag.type === 'UNHEALTHY') {
+    return '#D35400'
+  }
   if (selected) {
     return tag.color
   }
diff --git a/frontend/web/components/tags/TagContent.tsx b/frontend/web/components/tags/TagContent.tsx
index de2d3d775d0e..c8668e8e0c77 100644
--- a/frontend/web/components/tags/TagContent.tsx
+++ b/frontend/web/components/tags/TagContent.tsx
@@ -48,7 +48,9 @@ const renderIcon = (
           return
       }
     default:
-      return isPermanent ? <IonIcon className='ms-1' icon={lockClosed} color={darkened} /> : null
+      return isPermanent ? (
+        <IonIcon className='ms-1' icon={lockClosed} color={darkened} />
+      ) : null
   }
 }
 
@@ -62,6 +64,7 @@ const getTooltip = (tag: TTag | undefined) => {
   const disabled = Utils.tagDisabled(tag)
   const truncated = Format.truncateText(tag.label, 12)
   const isTruncated = truncated !== tag.label ? tag.label : null
+  const isFeatureHealthEnabled = Utils.getFlagsmithHasFeature('feature_health')
   let tooltip = null
   switch (tag.type) {
     case 'STALE': {
@@ -72,6 +75,12 @@ const getTooltip = (tag: TTag | undefined) => {
       }A feature is marked as stale if no changes have been made to it in any environment within ${stale_flags_limit_days} days. This is automatically applied and will be re-evaluated if you remove this tag unless you apply a permanent tag to the feature.`
       break
     }
+    case 'UNHEALTHY': {
+      tooltip = isFeatureHealthEnabled
+        ? 'This feature is tagged as unhealthy in one or more environments.'
+        : ''
+      break
+    }
     default:
       break
   }
diff --git a/frontend/web/components/tags/TagValues.tsx b/frontend/web/components/tags/TagValues.tsx
index f99ddda2f03c..957b2b3b30c6 100644
--- a/frontend/web/components/tags/TagValues.tsx
+++ b/frontend/web/components/tags/TagValues.tsx
@@ -42,6 +42,7 @@ const TagValues: FC<TagValuesType> = ({
         (tag) =>
           value?.includes(tag.id) && (
             <Tag
+              key={tag.id}
               className='chip--xs'
               hideNames={hideNames}
               onClick={onAdd}