diff --git a/docs/getting-started/homepage.md b/docs/getting-started/homepage.md
index 63a97ec54f..9c6f6380a1 100644
--- a/docs/getting-started/homepage.md
+++ b/docs/getting-started/homepage.md
@@ -40,10 +40,10 @@ Inside your `packages/app` directory, create a new file where our new homepage c
 ```tsx
 import React from 'react';
 
-export const HomePage = () => {
+export const homePage = (
   /* We will shortly compose a pretty homepage here. */
-  return <h1>Welcome to Backstage!</h1>;
-};
+  <h1>Welcome to Backstage!</h1>
+);
 ```
 
 #### 3. Update router for the root `/` route
@@ -161,13 +161,11 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import { HomePageCompanyLogo } from '@backstage/plugin-home';
 
-export const HomePage = () => {
-  return (
-    <Grid container spacing={3}>
-      <Grid item xs={12} md={4}>
-        <HomePageCompanyLogo />
-      </Grid>
+export const homePage = (
+  <Grid container spacing={3}>
+    <Grid item xs={12} md={4}>
+      <HomePageCompanyLogo />
     </Grid>
-  );
-};
+  </Grid>
+);
 ```
diff --git a/plugins/home/README.md b/plugins/home/README.md
index 42fbf73d18..8bb474aa4b 100644
--- a/plugins/home/README.md
+++ b/plugins/home/README.md
@@ -22,11 +22,9 @@ yarn add --cwd packages/app @backstage/plugin-home
 ```tsx
 import React from 'react';
 
-export const HomePage = () => {
-  return {
-    /* TODO: Compose a Home Page here */
-  };
-};
+export const homePage = (
+  /* TODO: Compose a Home Page here */
+);
 ```
 
 2. Add a route where the homepage will live, presumably `/`.
@@ -35,11 +33,11 @@ export const HomePage = () => {
 
 ```tsx
 import { HomepageCompositionRoot } from '@backstage/plugin-home';
-import { HomePage } from './components/home/HomePage';
+import { homePage } from './components/home/HomePage';
 
 // ...
 <Route path="/" element={<HomepageCompositionRoot />}>
-  <HomePage />
+  {homePage}
 </Route>;
 // ...
 ```
@@ -72,15 +70,13 @@ import React from 'react';
 import Grid from '@material-ui/core/Grid';
 import { RandomJokeHomePageComponent } from '@backstage/plugin-home';
 
-export const HomePage = () => {
-  return (
-    <Grid container spacing={3}>
-      <Grid item xs={12} md={4}>
-        <RandomJokeHomePageComponent />
-      </Grid>
+export const homePage = (
+  <Grid container spacing={3}>
+    <Grid item xs={12} md={4}>
+      <RandomJokeHomePageComponent />
     </Grid>
-  );
-};
+  </Grid>
+);
 ```
 
 Additionally, the App Integrator is provided an escape hatch in case the way the card is rendered does not fit their requirements. They may optionally pass the `Renderer`-prop, which will receive the `title`, `content` and optionally `actions`, `settings` and `contextProvider`, if they exist for the component. This allows the App Integrator to render the content in any way they want.
@@ -102,18 +98,16 @@ import { HomePageSearchBar } from '@backstage/plugin-search';
 import { HomePageCalendar } from '@backstage/plugin-gcalendar';
 import { MicrosoftCalendarCard } from '@backstage/plugin-microsoft-calendar';
 
-export const HomePage = () => {
-  return (
-    <CustomHomepageGrid>
-      // Insert the allowed widgets inside the grid
-      <HomePageSearchBar />
-      <HomePageRandomJoke />
-      <HomePageCalendar />
-      <MicrosoftCalendarCard />
-      <HomePageStarredEntities />
-    </CustomHomepageGrid>
-  );
-};
+export const homePage = (
+  <CustomHomepageGrid>
+    // Insert the allowed widgets inside the grid
+    <HomePageSearchBar />
+    <HomePageRandomJoke />
+    <HomePageCalendar />
+    <MicrosoftCalendarCard />
+    <HomePageStarredEntities />
+  </CustomHomepageGrid>
+);
 ```
 
 ### Creating Customizable Components