diff --git a/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx b/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx
index 584ce534fa..272edb0373 100644
--- a/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx
+++ b/plugins/techdocs/src/reader/components/TechDocsPage.test.tsx
@@ -22,6 +22,7 @@ import {
   scmIntegrationsApiRef,
 } from '@backstage/integration-react';
 import { wrapInTestApp } from '@backstage/test-utils';
+import { Header } from '@backstage/core-components';
 import {
   techdocsApiRef,
   TechDocsApi,
@@ -107,4 +108,69 @@ describe('<TechDocsPage />', () => {
       expect(rendered.getByTestId('techdocs-content')).toBeInTheDocument();
     });
   });
+
+  it('should render techdocs page with custom header', async () => {
+    useParams.mockReturnValue({
+      entityId: 'Component::backstage',
+    });
+
+    const scmIntegrationsApi: ScmIntegrationsApi =
+      ScmIntegrationsApi.fromConfig(
+        new ConfigReader({
+          integrations: {},
+        }),
+      );
+    const techdocsApi: Partial<TechDocsApi> = {
+      getEntityMetadata: () =>
+        Promise.resolve({
+          apiVersion: 'v1',
+          kind: 'Component',
+          metadata: {
+            name: 'backstage',
+          },
+        }),
+      getTechDocsMetadata: () =>
+        Promise.resolve({
+          site_name: 'string',
+          site_description: 'string',
+        }),
+    };
+
+    const techdocsStorageApi: Partial<TechDocsStorageApi> = {
+      getEntityDocs: (): Promise<string> => Promise.resolve('String'),
+      getBaseUrl: (): Promise<string> => Promise.resolve('String'),
+      getApiOrigin: (): Promise<string> => Promise.resolve('String'),
+    };
+    const searchApi = {
+      query: () =>
+        Promise.resolve({
+          results: [],
+        }),
+    };
+    const apiRegistry = ApiRegistry.from([
+      [scmIntegrationsApiRef, scmIntegrationsApi],
+      [techdocsApiRef, techdocsApi],
+      [techdocsStorageApiRef, techdocsStorageApi],
+      [searchApiRef, searchApi],
+    ]);
+
+    await act(async () => {
+      const rendered = render(
+        wrapInTestApp(
+          <ApiProvider apis={apiRegistry}>
+            <TechDocsPage>
+              {({ techdocsMetadataValue }) => (
+                <Header
+                  type="documentation"
+                  title="A custom header"
+                  subtitle={techdocsMetadataValue?.site_name}
+                />
+              )}
+            </TechDocsPage>
+          </ApiProvider>,
+        ),
+      );
+      expect(rendered.getByText('A custom header')).toBeInTheDocument();
+    });
+  });
 });