diff --git a/web/package-lock.json b/web/package-lock.json
index 880d3784..35c16e51 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -47,7 +47,6 @@
         "murmurhash-js": "1.0.x",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
-        "react-helmet": "^6.1.0",
         "react-i18next": "^11.8.11",
         "react-linkify": "^0.2.2",
         "react-modal": "^3.12.1",
@@ -64,7 +63,6 @@
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.17.2",
         "@types/react": "17.0.83",
-        "@types/react-helmet": "^6.1.11",
         "@types/react-router-dom": "^5.3.2",
         "@types/webpack-dev-server": "^4.7.2",
         "@typescript-eslint/eslint-plugin": "^8.39.1",
@@ -4895,16 +4893,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-helmet": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
-      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
     "node_modules/@types/react-redux": {
       "version": "7.1.34",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
@@ -15297,21 +15285,6 @@
         "react-dom": ">= 16.3.0"
       }
     },
-    "node_modules/react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
-      "license": "MIT",
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.3.0"
-      }
-    },
     "node_modules/react-hook-form": {
       "version": "7.62.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
@@ -15572,15 +15545,6 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
-    "node_modules/react-side-effect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
-      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
diff --git a/web/package.json b/web/package.json
index 949dc91f..861b8567 100644
--- a/web/package.json
+++ b/web/package.json
@@ -70,7 +70,6 @@
     "murmurhash-js": "1.0.x",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-helmet": "^6.1.0",
     "react-i18next": "^11.8.11",
     "react-linkify": "^0.2.2",
     "react-modal": "^3.12.1",
@@ -87,7 +86,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.17.2",
     "@types/react": "17.0.83",
-    "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.2",
     "@types/webpack-dev-server": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^8.39.1",
diff --git a/web/src/components/Incidents/IncidentsPage.tsx b/web/src/components/Incidents/IncidentsPage.tsx
index 04efc90a..10b60546 100644
--- a/web/src/components/Incidents/IncidentsPage.tsx
+++ b/web/src/components/Incidents/IncidentsPage.tsx
@@ -20,7 +20,6 @@ import {
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { IncidentsTable } from './IncidentsTable';
 import {
   getIncidentsTimeRanges,
@@ -59,7 +58,7 @@ import { usePatternFlyTheme } from '../hooks/usePatternflyTheme';
 import { MonitoringState } from 'src/reducers/observe';
 import { Incident } from './model';
 import { useAlertsPoller } from '../hooks/useAlertsPoller';
-import { Rule } from '@openshift-console/dynamic-plugin-sdk';
+import { DocumentTitle, Rule } from '@openshift-console/dynamic-plugin-sdk';
 
 const IncidentsPage = () => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
@@ -296,9 +295,7 @@ const IncidentsPage = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         {alertsAreLoading && incidentsAreLoading ? (
           <Bullseye>
diff --git a/web/src/components/MetricsPage.tsx b/web/src/components/MetricsPage.tsx
index e6c22b17..60154351 100644
--- a/web/src/components/MetricsPage.tsx
+++ b/web/src/components/MetricsPage.tsx
@@ -1,4 +1,6 @@
 import {
+  DocumentTitle,
+  ListPageHeader,
   PrometheusData,
   PrometheusEndpoint,
   PrometheusLabels,
@@ -60,7 +62,6 @@ import {
 import * as _ from 'lodash-es';
 import type { FC, Ref } from 'react';
 import { useMemo, useCallback, useEffect, useState } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -1391,17 +1392,9 @@ const MetricsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('Metrics')}</title>
-      </Helmet>
-      <PageSection hasBodyWrapper={false}>
+      <DocumentTitle>{t('Metrics')}</DocumentTitle>
+      <ListPageHeader title={perspective === 'dev' ? undefined : t('Metrics')}>
         <Split hasGutter>
-          {perspective !== 'dev' && (
-            <SplitItem>
-              <Title headingLevel="h1">{t('Metrics')}</Title>
-            </SplitItem>
-          )}
-          <SplitItem isFilled />
           <SplitItem data-test={DataTestIDs.MetricGraphUnitsDropDown}>
             <Tooltip content={<>{t('This dropdown only formats results.')}</>}>
               <GraphUnitsDropDown />
@@ -1414,7 +1407,7 @@ const MetricsPage_: FC = () => {
             <MetricsActionsMenu />
           </SplitItem>
         </Split>
-      </PageSection>
+      </ListPageHeader>
       <PageSection hasBodyWrapper={false}>
         <Stack hasGutter>
           <StackItem>
diff --git a/web/src/components/alerting/AlertRulesDetailsPage.tsx b/web/src/components/alerting/AlertRulesDetailsPage.tsx
index 2a32950b..166824fa 100644
--- a/web/src/components/alerting/AlertRulesDetailsPage.tsx
+++ b/web/src/components/alerting/AlertRulesDetailsPage.tsx
@@ -1,6 +1,7 @@
 import {
   AlertingRuleChartExtension,
   AlertStates,
+  DocumentTitle,
   isAlertingRuleChart,
   PrometheusAlert,
   ResourceIcon,
@@ -38,7 +39,6 @@ import {
 import { Table, TableVariant, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link, useNavigate, useParams } from 'react-router-dom-v5-compat';
@@ -184,9 +184,9 @@ const AlertRulesDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: rule?.name || RuleResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: rule?.name || RuleResource.label })}
+      </DocumentTitle>
       <StatusBox data={rule} label={RuleResource.label} loaded={loaded} loadError={loadError}>
         <PageGroup>
           <PageBreadcrumb hasBodyWrapper={false}>
diff --git a/web/src/components/alerting/AlertRulesPage.tsx b/web/src/components/alerting/AlertRulesPage.tsx
index 625a9280..88d2ecff 100644
--- a/web/src/components/alerting/AlertRulesPage.tsx
+++ b/web/src/components/alerting/AlertRulesPage.tsx
@@ -1,5 +1,6 @@
 import {
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   PrometheusAlert,
   ResourceIcon,
@@ -15,7 +16,6 @@ import { sortable, Td } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useMemo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom-v5-compat';
@@ -219,9 +219,7 @@ const AlertRulesPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <ListPageFilter
           data={staticData}
diff --git a/web/src/components/alerting/AlertingPage.tsx b/web/src/components/alerting/AlertingPage.tsx
index 8f043fb4..86ad306e 100644
--- a/web/src/components/alerting/AlertingPage.tsx
+++ b/web/src/components/alerting/AlertingPage.tsx
@@ -1,8 +1,11 @@
-import { PageSection, Title } from '@patternfly/react-core';
 import type { FC } from 'react';
 import { lazy } from 'react';
 import { useTranslation } from 'react-i18next';
-import { HorizontalNav, useActivePerspective } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  HorizontalNav,
+  ListPageHeader,
+  useActivePerspective,
+} from '@openshift-console/dynamic-plugin-sdk';
 
 const AlertsPage = lazy(
   () => import(/* webpackChunkName: "AlertsPage" */ '../alerting/AlertsPage'),
@@ -50,10 +53,8 @@ const AlertingPage: FC = () => {
 
   return (
     <>
-      <PageSection hasBodyWrapper={false}>
-        <Title headingLevel="h1">{t('Alerting')}</Title>
-        <HorizontalNav contextId={contextId} pages={pages} />
-      </PageSection>
+      <ListPageHeader title={t('Alerting')} />
+      <HorizontalNav contextId={contextId} pages={pages} />
     </>
   );
 };
diff --git a/web/src/components/alerting/AlertsDetailsPage.tsx b/web/src/components/alerting/AlertsDetailsPage.tsx
index 7b026495..a473eebd 100644
--- a/web/src/components/alerting/AlertsDetailsPage.tsx
+++ b/web/src/components/alerting/AlertsDetailsPage.tsx
@@ -3,6 +3,7 @@ import {
   Alert,
   AlertingRuleChartExtension,
   AlertStates,
+  DocumentTitle,
   isAlertingRuleChart,
   PrometheusLabels,
   ResourceIcon,
@@ -57,7 +58,6 @@ import {
   ToolbarGroup,
   ToolbarItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { MonitoringState } from '../../reducers/observe';
 import withFallback from '../console/console-shared/error/fallbacks/withFallback';
 import { StatusBox } from '../console/console-shared/src/components/status/StatusBox';
@@ -153,9 +153,9 @@ const AlertsDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: labels?.alertname || AlertResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: labels?.alertname || AlertResource.label })}
+      </DocumentTitle>
       <StatusBox
         data={alert}
         label={AlertResource.label}
diff --git a/web/src/components/alerting/AlertsPage.tsx b/web/src/components/alerting/AlertsPage.tsx
index 606597d4..735a5cc3 100644
--- a/web/src/components/alerting/AlertsPage.tsx
+++ b/web/src/components/alerting/AlertsPage.tsx
@@ -1,6 +1,7 @@
 import {
   Alert,
   AlertStates,
+  DocumentTitle,
   ListPageFilter,
   RowFilter,
   useListPageFilter,
@@ -10,7 +11,6 @@ import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-tab
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useMemo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { MonitoringState } from '../../reducers/observe';
@@ -144,9 +144,7 @@ const AlertsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>Alerting</title>
-      </Helmet>
+      <DocumentTitle>{t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false} type="subnav">
         <Flex>
           <ListPageFilter
diff --git a/web/src/components/alerting/SilenceForm.tsx b/web/src/components/alerting/SilenceForm.tsx
index 0d60b888..f362bd32 100644
--- a/web/src/components/alerting/SilenceForm.tsx
+++ b/web/src/components/alerting/SilenceForm.tsx
@@ -1,4 +1,8 @@
-import { consoleFetchJSON, useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  consoleFetchJSON,
+  DocumentTitle,
+  useActiveNamespace,
+} from '@openshift-console/dynamic-plugin-sdk';
 import {
   ActionGroup,
   Alert,
@@ -34,7 +38,6 @@ import { t_global_spacer_sm } from '@patternfly/react-tokens';
 import * as _ from 'lodash-es';
 import type { ComponentType, FC, FormEventHandler, MouseEvent, ChangeEvent, Ref } from 'react';
 import { useState, useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import { Trans, useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom-v5-compat';
@@ -277,9 +280,7 @@ const SilenceForm_: FC<SilenceFormProps> = ({ defaults, Info, title }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <Title headingLevel="h1">{title}</Title>
         <HelperText>
diff --git a/web/src/components/alerting/SilencesDetailsPage.tsx b/web/src/components/alerting/SilencesDetailsPage.tsx
index 04961a64..c5058222 100644
--- a/web/src/components/alerting/SilencesDetailsPage.tsx
+++ b/web/src/components/alerting/SilencesDetailsPage.tsx
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 
 import {
   Alert,
+  DocumentTitle,
   ResourceIcon,
   Timestamp,
   useActiveNamespace,
@@ -28,7 +29,6 @@ import {
   SplitItem,
   Title,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { MonitoringState } from 'src/reducers/observe';
 import {
@@ -73,9 +73,9 @@ const SilencesDetailsPage_: FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('{{name}} details', { name: silence?.name || SilenceResource.label })}</title>
-      </Helmet>
+      <DocumentTitle>
+        {t('{{name}} details', { name: silence?.name || SilenceResource.label })}
+      </DocumentTitle>
       <StatusBox
         data={silence}
         label={SilenceResource.label}
diff --git a/web/src/components/alerting/SilencesPage.tsx b/web/src/components/alerting/SilencesPage.tsx
index e5616daa..47107a65 100644
--- a/web/src/components/alerting/SilencesPage.tsx
+++ b/web/src/components/alerting/SilencesPage.tsx
@@ -1,6 +1,7 @@
 import {
   AlertSeverity,
   consoleFetchJSON,
+  DocumentTitle,
   ListPageFilter,
   RowProps,
   Silence,
@@ -23,7 +24,6 @@ import { sortable } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import type { FC } from 'react';
 import { useState, useMemo, useContext, useCallback, memo } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom-v5-compat';
@@ -185,7 +185,7 @@ const SilencesPage_: FC = () => {
 
   return (
     <>
-      <Helmet>{perspective === 'dev' ? <title>Silences</title> : <title>Alerting</title>}</Helmet>
+      <DocumentTitle>{perspective === 'dev' ? t('Silences') : t('Alerting')}</DocumentTitle>
       <PageSection hasBodyWrapper={false}>
         <SelectedSilencesContext.Provider value={{ selectedSilences, setSelectedSilences }}>
           <Flex>
diff --git a/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx b/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx
index 89400364..6d975e36 100644
--- a/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx
+++ b/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx
@@ -1,43 +1,30 @@
 import * as _ from 'lodash-es';
 import type { FC, PropsWithChildren } from 'react';
 import { memo, useCallback } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
-import {
-  Divider,
-  PageSection,
-  Split,
-  SplitItem,
-  Stack,
-  StackItem,
-  Title,
-} from '@patternfly/react-core';
+import { Divider, PageSection, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
 import { usePerspective } from '../../hooks/usePerspective';
 import { CombinedDashboardMetadata } from '../perses/hooks/useDashboardsData';
 import { DashboardDropdown } from '../shared/dashboard-dropdown';
 import { PollIntervalDropdown, TimespanDropdown } from './time-dropdowns';
 import { LegacyDashboardsAllVariableDropdowns } from './legacy-variable-dropdowns';
+import { DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
 
 const HeaderTop: FC = memo(() => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
-    <Split hasGutter isWrappable>
-      <SplitItem isFilled>
-        <Title headingLevel="h1">{t('Dashboards')}</Title>
-      </SplitItem>
-      <SplitItem>
-        <Split hasGutter isWrappable>
-          <SplitItem>
-            <TimespanDropdown />
-          </SplitItem>
-          <SplitItem>
-            <PollIntervalDropdown />
-          </SplitItem>
-        </Split>
-      </SplitItem>
-    </Split>
+    <ListPageHeader title={t('Dashboards')}>
+      <Split hasGutter isWrappable>
+        <SplitItem>
+          <TimespanDropdown />
+        </SplitItem>
+        <SplitItem>
+          <PollIntervalDropdown />
+        </SplitItem>
+      </Split>
+    </ListPageHeader>
   );
 });
 
@@ -63,12 +50,12 @@ export const DashboardSkeletonLegacy: FC<MonitoringDashboardsLegacyPageProps> =
     return (
       <>
         {perspective !== 'dev' && (
-          <Helmet>
-            <title>{t('Metrics dashboards')}</title>
-          </Helmet>
+          <>
+            <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>
+            <HeaderTop />
+          </>
         )}
         <PageSection hasBodyWrapper={false}>
-          {perspective !== 'dev' && <HeaderTop />}
           <Stack hasGutter>
             {!_.isEmpty(boardItems) && (
               <StackItem>
diff --git a/web/src/components/dashboards/perses/dashboard-skeleton.tsx b/web/src/components/dashboards/perses/dashboard-skeleton.tsx
index 26fd5f77..c3f039b7 100644
--- a/web/src/components/dashboards/perses/dashboard-skeleton.tsx
+++ b/web/src/components/dashboards/perses/dashboard-skeleton.tsx
@@ -1,18 +1,8 @@
 import * as _ from 'lodash-es';
 import type { FC, PropsWithChildren } from 'react';
 import { memo, useCallback, useEffect } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
-
-import {
-  Divider,
-  PageSection,
-  Split,
-  SplitItem,
-  Stack,
-  StackItem,
-  Title,
-} from '@patternfly/react-core';
+import { Divider, PageSection, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
 import {
   DashboardStickyToolbar,
   useDashboardActions,
@@ -22,23 +12,19 @@ import { TimeRangeControls } from '@perses-dev/plugin-system';
 import { usePerspective } from '../../hooks/usePerspective';
 import { DashboardDropdown } from '../shared/dashboard-dropdown';
 import { CombinedDashboardMetadata } from './hooks/useDashboardsData';
+import { DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
 
 const HeaderTop: FC = memo(() => {
   const { t } = useTranslation(process.env.I18N_NAMESPACE);
 
   return (
-    <Split hasGutter isWrappable>
-      <SplitItem isFilled>
-        <Title headingLevel="h1">{t('Dashboards')}</Title>
-      </SplitItem>
-      <SplitItem>
-        <Split hasGutter isWrappable>
-          <SplitItem>
-            <TimeRangeControls />
-          </SplitItem>
-        </Split>
-      </SplitItem>
-    </Split>
+    <ListPageHeader title={t('Dashboards')}>
+      <Split hasGutter isWrappable>
+        <SplitItem>
+          <TimeRangeControls />
+        </SplitItem>
+      </Split>
+    </ListPageHeader>
   );
 });
 
@@ -80,12 +66,12 @@ export const DashboardSkeleton: FC<MonitoringDashboardsPageProps> = memo(
     return (
       <>
         {perspective !== 'dev' && (
-          <Helmet>
-            <title>{t('Metrics dashboards')}</title>
-          </Helmet>
+          <>
+            <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>
+            <HeaderTop />
+          </>
         )}
         <PageSection hasBodyWrapper={false}>
-          {perspective !== 'dev' && <HeaderTop />}
           <Stack hasGutter>
             {!_.isEmpty(boardItems) && (
               <StackItem>
diff --git a/web/src/components/targets-page.tsx b/web/src/components/targets-page.tsx
index 3c3d68ea..b92e79c0 100644
--- a/web/src/components/targets-page.tsx
+++ b/web/src/components/targets-page.tsx
@@ -1,4 +1,5 @@
 import {
+  DocumentTitle,
   GreenCheckCircleIcon,
   K8sModel,
   K8sResourceKind,
@@ -38,7 +39,6 @@ import { sortable, Td } from '@patternfly/react-table';
 import { find, includes, isEmpty } from 'lodash-es';
 import type { FC } from 'react';
 import { createContext, useContext, memo, useMemo, useState, useCallback } from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { Link, useParams } from 'react-router-dom-v5-compat';
 import { EmptyBox } from './console/console-shared/src/components/empty-state/EmptyBox';
@@ -253,9 +253,7 @@ const Details: FC<DetailsProps> = ({ loaded, loadError, targets }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('Target details')}</title>
-      </Helmet>
+      <DocumentTitle>{t('Target details')}</DocumentTitle>
       <StatusBox data={target} label="target" loaded={loaded} loadError={loadError}>
         <PageGroup>
           <PageBreadcrumb hasBodyWrapper={false}>
@@ -517,9 +515,7 @@ const ListPage: FC<ListPageProps> = ({ loaded, loadError, targets }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <ListPageHeader title={title} />
       <ListPageBody>
         {loadError && (