diff --git a/packages/frontend/src/components/projects/create/TemplateCard.tsx b/packages/frontend/src/components/projects/create/TemplateCard.tsx
index a107328..3625b64 100644
--- a/packages/frontend/src/components/projects/create/TemplateCard.tsx
+++ b/packages/frontend/src/components/projects/create/TemplateCard.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import toast from 'react-hot-toast';
-import { Link } from 'react-router-dom';
 
-import { ReactNativeIcon, ChevronRight } from 'components/shared/CustomIcon';
+import { IconButton, Typography } from '@material-tailwind/react';
+
+import { Link } from 'react-router-dom';
 
 interface TemplateDetails {
   id: string;
@@ -16,15 +17,18 @@ interface TemplateCardProps {
 
 const CardDetails = ({ template }: { template: TemplateDetails }) => {
   return (
-    <div className="bg-gray-200 border-gray-200 border-b border-opacity-10 rounded-lg shadow flex items-center justify-between">
-      <ReactNativeIcon />
-      <div className="grow shrink basis-0 text-slate-900 text-sm font-normal leading-tight">
-        {template.name}
-      </div>
+    <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
+      <Typography className="grow" placeholder={''}>
+        {template.icon} {template.name}
+      </Typography>
       <div>
-        <div className="py-2 px-3 bg-white rounded-full shadow-inner border border-sky-950 border-opacity-10 justify-center items-center gap-1 flex">
-          <ChevronRight />
-        </div>
+        <IconButton
+          size="sm"
+          className="rounded-full hidden group-hover:block"
+          placeholder={''}
+        >
+          {'>'}
+        </IconButton>
       </div>
     </div>
   );