diff --git a/.changeset/silver-needles-unite.md b/.changeset/silver-needles-unite.md
index bd65f4d253..b5fed7e615 100644
--- a/.changeset/silver-needles-unite.md
+++ b/.changeset/silver-needles-unite.md
@@ -2,7 +2,7 @@
 '@backstage/plugin-home': patch
 ---
 
-Added support for customizing the time format used in the `HeaderWorlClock` component
+Added support for customizing the time format used in the `HeaderWorldClock` component
 
 Here's an example of how this can be used in the `HomePage.tsx` found in `\packages\app\src\components\home` to change the clock to be in the 24hr time format:
 
diff --git a/plugins/home/src/components/HeaderWorldClock/HeaderWorldClock.test.tsx b/plugins/home/src/components/HeaderWorldClock/HeaderWorldClock.test.tsx
index 9dbfceac81..3611f47787 100644
--- a/plugins/home/src/components/HeaderWorldClock/HeaderWorldClock.test.tsx
+++ b/plugins/home/src/components/HeaderWorldClock/HeaderWorldClock.test.tsx
@@ -86,3 +86,32 @@ describe('HeaderWorldClock with invalid Time Zone', () => {
     expect(rendered.getByText('GMT')).toBeInTheDocument();
   });
 });
+
+describe('HeaderWorldClock with custom Time Format', () => {
+  it('uses 24hr clock from custom Time Format', async () => {
+    const clockConfigs: ClockConfig[] = [
+      {
+        label: 'UTC',
+        timeZone: 'UTC',
+      },
+    ];
+
+    const timeFormat: Intl.DateTimeFormatOptions = {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    };
+
+    const rendered = await renderInTestApp(
+      <ThemeProvider theme={lightTheme}>
+        <HeaderWorldClock
+          clockConfigs={clockConfigs}
+          customTimeFormat={timeFormat}
+        />
+      </ThemeProvider>,
+    );
+
+    const currentTime = `${new Date().getHours()}:${new Date().getMinutes()}`;
+    expect(rendered.getByText(currentTime)).toBeInTheDocument();
+  });
+});