diff --git a/web/package-lock.json b/web/package-lock.json
index e2b95d6f..724c075b 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",
@@ -62,7 +61,6 @@
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^17.0.21",
         "@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": "^5.15.0",
@@ -3213,16 +3211,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-measure": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/@types/react-measure/-/react-measure-2.0.12.tgz",
@@ -12401,21 +12389,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.54.2",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.54.2.tgz",
@@ -12692,15 +12665,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 3990956d..3c2e3988 100644
--- a/web/package.json
+++ b/web/package.json
@@ -64,7 +64,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",
@@ -79,7 +78,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^17.0.21",
     "@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": "^5.15.0",
diff --git a/web/src/components/Incidents/IncidentsPage.jsx b/web/src/components/Incidents/IncidentsPage.jsx
index 84256e0b..72fec2ec 100644
--- a/web/src/components/Incidents/IncidentsPage.jsx
+++ b/web/src/components/Incidents/IncidentsPage.jsx
@@ -16,12 +16,11 @@ import {
   ToolbarItem,
   MenuToggle,
   Badge,
-  Title,
   PageSection,
   Stack,
   StackItem,
 } from '@patternfly/react-core';
-import { Helmet } from 'react-helmet';
+import { DocumentTitle } from '@openshift-console/dynamic-plugin-sdk';
 import { IncidentsTable } from './IncidentsTable';
 import {
   getIncidentsTimeRanges,
@@ -277,9 +276,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 e0def425..1348268f 100644
--- a/web/src/components/MetricsPage.tsx
+++ b/web/src/components/MetricsPage.tsx
@@ -1,4 +1,6 @@
 import {
+  DocumentTitle,
+  ListPageHeader,
   PrometheusData,
   PrometheusEndpoint,
   PrometheusLabels,
@@ -57,7 +59,6 @@ import {
 } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -1230,17 +1231,9 @@ const MetricsPage_: React.FC = () => {
 
   return (
     <>
-      <Helmet>
-        <title>{t('Metrics')}</title>
-      </Helmet>
-      <PageSection hasBodyWrapper={false}>
+      <DocumentTitle>{t('Metrics')}</DocumentTitle>
+      <ListPageHeader title={perspective !== 'dev' ? t('Metrics') : ''}>
         <Split hasGutter>
-          {perspective !== 'dev' && (
-            <SplitItem>
-              <Title headingLevel="h1">{t('Metrics')}</Title>
-            </SplitItem>
-          )}
-          <SplitItem isFilled />
           <SplitItem>
             <IntervalDropdown />
           </SplitItem>
@@ -1248,7 +1241,7 @@ const MetricsPage_: React.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 ec685351..0ddbf9eb 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 * as React 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';
@@ -179,9 +179,9 @@ const AlertRulesDetailsPage_: React.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 77c93669..3d76e542 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,
@@ -14,7 +15,6 @@ import {
 import { sortable, Td } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React 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';
@@ -214,9 +214,7 @@ const AlertRulesPage_: React.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 f873bb53..9e046332 100644
--- a/web/src/components/alerting/AlertingPage.tsx
+++ b/web/src/components/alerting/AlertingPage.tsx
@@ -1,7 +1,10 @@
-import { PageSection, Title } from '@patternfly/react-core';
 import * as React 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 = React.lazy(
   () => import(/* webpackChunkName: "AlertsPage" */ '../alerting/AlertsPage'),
@@ -49,10 +52,8 @@ const AlertingPage: React.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 0b7d66ba..50c2a28d 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,
@@ -56,7 +57,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';
@@ -150,9 +150,9 @@ const AlertsDetailsPage_: React.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 864f41de..19e32792 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,
@@ -9,7 +10,6 @@ import { Flex, PageSection } from '@patternfly/react-core';
 import { Table, TableGridBreakpoint, Th, Thead, Tr } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { MonitoringState } from '../../reducers/observe';
@@ -146,9 +146,7 @@ const AlertsPage_: React.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 8abbc86d..2def37c7 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,
@@ -33,7 +37,6 @@ import { ExclamationCircleIcon, MinusCircleIcon, PlusCircleIcon } from '@pattern
 import { t_global_spacer_sm } from '@patternfly/react-tokens';
 import * as _ from 'lodash-es';
 import * as React 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';
@@ -275,9 +278,7 @@ const SilenceForm_: React.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 270f8512..fd3844b0 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 {
@@ -72,9 +72,9 @@ const SilencesDetailsPage_: React.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 3a6bccbc..d9a18e09 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,
@@ -22,7 +23,6 @@ import {
 import { sortable } from '@patternfly/react-table';
 import * as _ from 'lodash-es';
 import * as React 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';
@@ -183,7 +183,7 @@ const SilencesPage_: React.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 b2bfadb3..e49676fc 100644
--- a/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx
+++ b/web/src/components/dashboards/legacy/dashboard-skeleton-legacy.tsx
@@ -1,17 +1,8 @@
 import * as _ from 'lodash-es';
 import * as React 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 { DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
+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';
@@ -22,21 +13,16 @@ const HeaderTop: React.FC = React.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>
   );
 });
 
@@ -61,13 +47,9 @@ export const DashboardSkeletonLegacy: React.FC<MonitoringDashboardsLegacyPagePro
 
     return (
       <>
-        {perspective !== 'dev' && (
-          <Helmet>
-            <title>{t('Metrics dashboards')}</title>
-          </Helmet>
-        )}
+        {perspective !== 'dev' && <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>}
+        {perspective !== 'dev' && <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 f25af784..cd570914 100644
--- a/web/src/components/dashboards/perses/dashboard-skeleton.tsx
+++ b/web/src/components/dashboards/perses/dashboard-skeleton.tsx
@@ -1,17 +1,8 @@
 import * as _ from 'lodash-es';
 import * as React 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 { DocumentTitle, ListPageHeader } from '@openshift-console/dynamic-plugin-sdk';
+import { Divider, PageSection, Split, SplitItem, Stack, StackItem } from '@patternfly/react-core';
 import {
   DashboardStickyToolbar,
   useDashboardActions,
@@ -26,18 +17,13 @@ const HeaderTop: React.FC = React.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>
   );
 });
 
@@ -78,13 +64,9 @@ export const DashboardSkeleton: React.FC<MonitoringDashboardsPageProps> = React.
 
     return (
       <>
-        {perspective !== 'dev' && (
-          <Helmet>
-            <title>{t('Metrics dashboards')}</title>
-          </Helmet>
-        )}
+        {perspective !== 'dev' && <DocumentTitle>{t('Metrics dashboards')}</DocumentTitle>}
+        {perspective !== 'dev' && <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 0705f1a6..944cb97b 100644
--- a/web/src/components/targets-page.tsx
+++ b/web/src/components/targets-page.tsx
@@ -1,4 +1,5 @@
 import {
+  DocumentTitle,
   GreenCheckCircleIcon,
   K8sModel,
   K8sResourceKind,
@@ -37,7 +38,6 @@ import {
 import { sortable, Td } from '@patternfly/react-table';
 import { find, includes, isEmpty } from 'lodash-es';
 import * as React 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';
@@ -254,9 +254,7 @@ const Details: React.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}>
@@ -518,9 +516,7 @@ const ListPage: React.FC<ListPageProps> = ({ loaded, loadError, targets }) => {
 
   return (
     <>
-      <Helmet>
-        <title>{title}</title>
-      </Helmet>
+      <DocumentTitle>{title}</DocumentTitle>
       <ListPageHeader title={title} />
       <ListPageBody>
         {loadError && (