diff --git a/plugins/scaffolder/src/components/Router.tsx b/plugins/scaffolder/src/components/Router.tsx
index e317612d33..6a08d46ec9 100644
--- a/plugins/scaffolder/src/components/Router.tsx
+++ b/plugins/scaffolder/src/components/Router.tsx
@@ -30,10 +30,10 @@ import {
 import { useElementFilter } from '@backstage/core-plugin-api';
 
 type RouterProps = {
-  templateCard?: Function | undefined;
+  TemplateCardComponent?: (props: any) => JSX.Element | null;
 };
 
-export const Router = ({ templateCard }: RouterProps) => {
+export const Router = ({ TemplateCardComponent }: RouterProps) => {
   const outlet = useOutlet();
 
   const customFieldExtensions = useElementFilter(outlet, elements =>
@@ -60,7 +60,9 @@ export const Router = ({ templateCard }: RouterProps) => {
     <Routes>
       <Route
         path="/"
-        element={<ScaffolderPage templateCard={templateCard} />}
+        element={
+          <ScaffolderPage TemplateCardComponent={TemplateCardComponent} />
+        }
       />
       <Route
         path="/templates/:templateName"
diff --git a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
index 39338f9098..e0d6a7b565 100644
--- a/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
+++ b/plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx
@@ -47,11 +47,11 @@ const useStyles = makeStyles(theme => ({
 }));
 
 export type ScaffolderPageProps = {
-  templateCard: Function | undefined;
+  TemplateCardComponent?: (props: any) => JSX.Element | null;
 };
 
 export const ScaffolderPageContents = ({
-  templateCard,
+  TemplateCardComponent,
 }: ScaffolderPageProps) => {
   const styles = useStyles();
 
@@ -93,7 +93,7 @@ export const ScaffolderPageContents = ({
             <EntityTagPicker />
           </div>
           <div>
-            <TemplateList templateCard={templateCard} />
+            <TemplateList TemplateCardComponent={TemplateCardComponent} />
           </div>
         </div>
       </Content>
@@ -101,8 +101,10 @@ export const ScaffolderPageContents = ({
   );
 };
 
-export const ScaffolderPage = ({ templateCard }: ScaffolderPageProps) => (
+export const ScaffolderPage = ({
+  TemplateCardComponent,
+}: ScaffolderPageProps) => (
   <EntityListProvider>
-    <ScaffolderPageContents templateCard={templateCard} />
+    <ScaffolderPageContents TemplateCardComponent={TemplateCardComponent} />
   </EntityListProvider>
 );
diff --git a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx
index 3e13b82b2b..b90ed1d8a6 100644
--- a/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx
+++ b/plugins/scaffolder/src/components/TemplateList/TemplateList.tsx
@@ -23,13 +23,15 @@ import {
 } from '@backstage/core-components';
 import { useEntityListProvider } from '@backstage/plugin-catalog-react';
 import { Link, Typography } from '@material-ui/core';
-import { TemplateCard } from '../TemplateCard';
+import { TemplateCard, TemplateCardProps } from '../TemplateCard';
+
+export type Props = TemplateCardProps;
 
 export type TemplateListProps = {
-  templateCard?: Function | undefined;
+  TemplateCardComponent?: (props: Props) => JSX.Element | null;
 };
 
-export const TemplateList = ({ templateCard }: TemplateListProps) => {
+export const TemplateList = ({ TemplateCardComponent }: TemplateListProps) => {
   const { loading, error, entities } = useEntityListProvider();
   return (
     <>
@@ -55,8 +57,11 @@ export const TemplateList = ({ templateCard }: TemplateListProps) => {
         {entities &&
           entities?.length > 0 &&
           entities.map((template, i) =>
-            templateCard ? (
-              templateCard(i, template)
+            TemplateCardComponent ? (
+              <TemplateCardComponent
+                key={i}
+                template={template as TemplateEntityV1beta2}
+              />
             ) : (
               <TemplateCard
                 key={i}