diff --git a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
index 65715e04c7..39b3c66013 100644
--- a/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
+++ b/plugins/catalog/src/components/CatalogPage/CatalogLayout.tsx
@@ -14,26 +14,29 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
 import {
   Header,
   HomepageTimer,
+  identityApiRef,
   Page,
   pageTheme,
-  identityApiRef,
   useApi,
 } from '@backstage/core';
+import React from 'react';
 import { getTimeBasedGreeting } from './utils/timeUtil';
 
-const CatalogLayout: FC<{}> = props => {
-  const { children } = props;
+type Props = {
+  children?: React.ReactNode;
+};
+
+const CatalogLayout = ({ children }: Props) => {
   const greeting = getTimeBasedGreeting();
-  const identityApi = useApi(identityApiRef);
+  const userId = useApi(identityApiRef).getUserId();
 
   return (
     <Page theme={pageTheme.home}>
       <Header
-        title={`${greeting.greeting}, ${identityApi.getUserId()}!`}
+        title={`${greeting.greeting}, ${userId}!`}
         subtitle="Backstage Service Catalog"
         tooltip={greeting.language}
         pageTitleOverride="Home"