diff --git a/.changeset/late-mangos-allow.md b/.changeset/late-mangos-allow.md
new file mode 100644
index 0000000000..e1e4fe1d56
--- /dev/null
+++ b/.changeset/late-mangos-allow.md
@@ -0,0 +1,28 @@
+---
+'@backstage/plugin-home': minor
+---
+
+The homepage `<Header />` is now part of the composable canvas (allowing you to add the <HomepageTimer />, for example).
+
+You will need to wrap your existing composed `<HomePage />` component in `<Page />`, `<Header />`, and `<Content />` components, like this:
+
+```diff
+// app/src/components/home/HomePage.tsx
+
++ import { Content, Header, Page, HomePageTimer } from '@backstage/core-components';
+
+export const HomePage = () => (
++  <Page themeId="home">
++    <Header title="Home">
++      <HomepageTimer />
++    </Header>
++    <Content>
+  <Grid container spacing={3}>
+    <Grid item xs={12}>
+      <HomePageSearchBar />
+    </Grid>
+    // ...
++    </Content>
++  </Page>
+);
+```
diff --git a/packages/app/src/components/home/HomePage.tsx b/packages/app/src/components/home/HomePage.tsx
index 5831b49d2c..ebb486790d 100644
--- a/packages/app/src/components/home/HomePage.tsx
+++ b/packages/app/src/components/home/HomePage.tsx
@@ -22,52 +22,68 @@ import {
   ComponentTabs,
   ComponentTab,
 } from '@backstage/plugin-home';
+import {
+  Content,
+  Header,
+  Page,
+  HomepageTimer,
+} from '@backstage/core-components';
 import { HomePageSearchBar } from '@backstage/plugin-search';
 
 export const HomePage = () => (
-  <Grid container spacing={3}>
-    <Grid item xs={12}>
-      <HomePageSearchBar />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <HomePageRandomJoke />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <HomePageRandomJoke defaultCategory="any" Renderer={ComponentAccordion} />
-      <HomePageRandomJoke
-        title="Another Random Joke"
-        Renderer={ComponentAccordion}
-      />
-      <HomePageRandomJoke
-        title="One More Random Joke"
-        defaultCategory="programming"
-        Renderer={ComponentAccordion}
-      />
-    </Grid>
-    <Grid item xs={12} md={4}>
-      <ComponentTabs
-        title="Random Jokes"
-        tabs={[
-          {
-            label: 'Programming',
-            Component: () => (
-              <HomePageRandomJoke
-                defaultCategory="programming"
-                Renderer={ComponentTab}
-              />
-            ),
-          },
-          {
-            label: 'Any',
-            Component: () => (
-              <HomePageRandomJoke
-                defaultCategory="any"
-                Renderer={ComponentTab}
-              />
-            ),
-          },
-        ]}
-      />
-    </Grid>
-  </Grid>
+  <Page themeId="home">
+    <Header title="Home">
+      <HomepageTimer />
+    </Header>
+    <Content>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <HomePageSearchBar />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <HomePageRandomJoke />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <HomePageRandomJoke
+            defaultCategory="any"
+            Renderer={ComponentAccordion}
+          />
+          <HomePageRandomJoke
+            title="Another Random Joke"
+            Renderer={ComponentAccordion}
+          />
+          <HomePageRandomJoke
+            title="One More Random Joke"
+            defaultCategory="programming"
+            Renderer={ComponentAccordion}
+          />
+        </Grid>
+        <Grid item xs={12} md={4}>
+          <ComponentTabs
+            title="Random Jokes"
+            tabs={[
+              {
+                label: 'Programming',
+                Component: () => (
+                  <HomePageRandomJoke
+                    defaultCategory="programming"
+                    Renderer={ComponentTab}
+                  />
+                ),
+              },
+              {
+                label: 'Any',
+                Component: () => (
+                  <HomePageRandomJoke
+                    defaultCategory="any"
+                    Renderer={ComponentTab}
+                  />
+                ),
+              },
+            ]}
+          />
+        </Grid>
+      </Grid>
+    </Content>
+  </Page>
 );
diff --git a/plugins/home/src/components/HomepageCompositionRoot.tsx b/plugins/home/src/components/HomepageCompositionRoot.tsx
index 92232fb387..f2c5ad0e8b 100644
--- a/plugins/home/src/components/HomepageCompositionRoot.tsx
+++ b/plugins/home/src/components/HomepageCompositionRoot.tsx
@@ -16,7 +16,6 @@
 
 import React, { ReactNode } from 'react';
 import { useOutlet } from 'react-router';
-import { Content, Header, Page } from '@backstage/core-components';
 
 export const HomepageCompositionRoot = (props: {
   title?: string;
@@ -24,10 +23,5 @@ export const HomepageCompositionRoot = (props: {
 }) => {
   const outlet = useOutlet();
   const children = props.children ?? outlet;
-  return (
-    <Page themeId="home">
-      <Header title={props.title ?? 'Home'} />
-      <Content>{children}</Content>
-    </Page>
-  );
+  return <>{children}</>;
 };