From b5a5cf8b407320080b50d150525b56caad4848d3 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Mon, 30 Mar 2026 15:38:32 +0100
Subject: [PATCH] feat: update layout of DashboardTemplateCard for improved
 icon display and alignment

---
 .../src/Components/Dashboard/DashboardTemplateCard.tsx    | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardTemplateCard.tsx b/App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardTemplateCard.tsx
index 058a64f0cb..887d0772ab 100644
--- a/App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardTemplateCard.tsx
+++ b/App/FeatureSet/Dashboard/src/Components/Dashboard/DashboardTemplateCard.tsx
@@ -24,12 +24,10 @@ const DashboardTemplateCard: FunctionComponent<ComponentProps> = (
         }
       }}
     >
-      <div className="flex items-center mb-2">
-        <div className="flex-shrink-0 mr-3 text-indigo-500">
-          <Icon icon={props.icon} size={SizeProp.Large} />
-        </div>
-        <h3 className="text-sm font-semibold text-gray-900">{props.title}</h3>
+      <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-indigo-50 mb-3">
+        <Icon icon={props.icon} size={SizeProp.Large} className="text-indigo-500 h-5 w-5" />
       </div>
+      <h3 className="text-sm font-semibold text-gray-900 mb-1">{props.title}</h3>
       <p className="text-xs text-gray-500 leading-relaxed">
         {props.description}
       </p>