diff --git a/packages/frontend/src/components/projects/create/TemplateCard.tsx b/packages/frontend/src/components/projects/create/TemplateCard.tsx
index 3625b64..a107328 100644
--- a/packages/frontend/src/components/projects/create/TemplateCard.tsx
+++ b/packages/frontend/src/components/projects/create/TemplateCard.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import toast from 'react-hot-toast';
-
-import { IconButton, Typography } from '@material-tailwind/react';
-
 import { Link } from 'react-router-dom';
 
+import { ReactNativeIcon, ChevronRight } from 'components/shared/CustomIcon';
+
 interface TemplateDetails {
   id: string;
   name: string;
@@ -17,18 +16,15 @@ interface TemplateCardProps {
 
 const CardDetails = ({ template }: { template: TemplateDetails }) => {
   return (
-    <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 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>
-        <IconButton
-          size="sm"
-          className="rounded-full hidden group-hover:block"
-          placeholder={''}
-        >
-          {'>'}
-        </IconButton>
+        <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>
       </div>
     </div>
   );
diff --git a/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx
index 6a51210..e697fb8 100644
--- a/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CalendarIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const CalendarIcon = (props: CustomIconProps) => {
+export const CalendarIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="18"
diff --git a/packages/frontend/src/components/shared/CustomIcon/CheckIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CheckIcon.tsx
index e1096cb..c978a6b 100644
--- a/packages/frontend/src/components/shared/CustomIcon/CheckIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CheckIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const CheckIcon = (props: CustomIconProps) => {
+export const CheckIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="12"
diff --git a/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx
index 145e68e..8b0b02e 100644
--- a/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CheckRoundFilledIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const CheckRoundFilledIcon = (props: CustomIconProps) => {
+export const CheckRoundFilledIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="24"
diff --git a/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx b/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
index b62f79d..a04bfb2 100644
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronGrabberHorizontal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const ChevronGrabberHorizontal = (props: CustomIconProps) => {
+export const ChevronGrabberHorizontal: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx b/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
index f9c4885..790f748 100644
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronLeft.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const ChevronLeft = (props: CustomIconProps) => {
+export const ChevronLeft: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="16"
diff --git a/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx b/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx
index 75da005..9b62ec9 100644
--- a/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/ChevronRight.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const ChevronRight = (props: CustomIconProps) => {
+export const ChevronRight: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="16"
diff --git a/packages/frontend/src/components/shared/CustomIcon/CrossIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CrossIcon.tsx
index 8d649f0..369d43b 100644
--- a/packages/frontend/src/components/shared/CustomIcon/CrossIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CrossIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const CrossIcon = (props: CustomIconProps) => {
+export const CrossIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="24"
diff --git a/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
index 6b32bb7..ba596c1 100644
--- a/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/CustomIcon.tsx
@@ -5,7 +5,7 @@ export interface CustomIconProps extends ComponentPropsWithoutRef<'svg'> {
   name?: string;
 }
 
-export const CustomIcon = ({
+export const CustomIcon: React.FC<CustomIconProps> = ({
   children,
   width = 24,
   height = 24,
diff --git a/packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx
index cf82caa..7a7abe8 100644
--- a/packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/FolderIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const FolderIcon = (props: CustomIconProps) => {
+export const FolderIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx
index f2a23ca..3e57403 100644
--- a/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/GlobeIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const GlobeIcon = (props: CustomIconProps) => {
+export const GlobeIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx
index d7eb24c..e44a622 100644
--- a/packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/InfoRoundFilledIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const InfoRoundFilledIcon = (props: CustomIconProps) => {
+export const InfoRoundFilledIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="24"
diff --git a/packages/frontend/src/components/shared/CustomIcon/InfoSquareIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/InfoSquareIcon.tsx
index 273131d..28376e8 100644
--- a/packages/frontend/src/components/shared/CustomIcon/InfoSquareIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/InfoSquareIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const InfoSquareIcon = (props: CustomIconProps) => {
+export const InfoSquareIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/LifeBuoyIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/LifeBuoyIcon.tsx
index 1e20afc..9866b1f 100644
--- a/packages/frontend/src/components/shared/CustomIcon/LifeBuoyIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/LifeBuoyIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const LifeBuoyIcon = (props: CustomIconProps) => {
+export const LifeBuoyIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx
index 012fa98..ced70b8 100644
--- a/packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/LoadingIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const LoadingIcon = (props: CustomIconProps) => {
+export const LoadingIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx
index da4b1ee..27b1d87 100644
--- a/packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/PlusIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const PlusIcon = (props: CustomIconProps) => {
+export const PlusIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundIcon.tsx
index 868efbc..99c7d23 100644
--- a/packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/QuestionMarkRoundIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const QuestionMarkRoundIcon = (props: CustomIconProps) => {
+export const QuestionMarkRoundIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/ReactNativeIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/ReactNativeIcon.tsx
new file mode 100644
index 0000000..d295b21
--- /dev/null
+++ b/packages/frontend/src/components/shared/CustomIcon/ReactNativeIcon.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { CustomIcon, CustomIconProps } from './CustomIcon';
+
+export const ReactNativeIcon: React.FC<CustomIconProps> = (props) => {
+  return (
+    <CustomIcon
+      width="22"
+      height="18"
+      viewBox="0 0 22 18"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M11.0002 10.7819C11.9847 10.7819 12.7828 9.98378 12.7828 8.99928C12.7828 8.01477 11.9847 7.21667 11.0002 7.21667C10.0157 7.21667 9.21761 8.01477 9.21761 8.99928C9.21761 9.98378 10.0157 10.7819 11.0002 10.7819Z"
+        fill="white"
+      />
+      <path
+        d="M10.9999 12.6515C16.2826 12.6515 20.5651 11.0164 20.5651 8.99936C20.5651 6.98232 16.2826 5.34719 10.9999 5.34719C5.71717 5.34719 1.43468 6.98232 1.43468 8.99936C1.43468 11.0164 5.71717 12.6515 10.9999 12.6515Z"
+        stroke="white"
+      />
+      <path
+        d="M7.8372 10.8246C10.4786 15.3996 14.0359 18.2908 15.7827 17.2822C17.5295 16.2737 16.8043 11.7474 14.1629 7.17244C11.5216 2.59746 7.96427 -0.293719 6.21747 0.714801C4.47066 1.72332 5.19584 6.24964 7.8372 10.8246Z"
+        stroke="white"
+      />
+      <path
+        d="M7.83704 7.17298C5.19567 11.7479 4.4705 16.2743 6.2173 17.2828C7.96411 18.2913 11.5214 15.4001 14.1628 10.8251C16.8041 6.25018 17.5293 1.72386 15.7825 0.715341C14.0357 -0.293179 10.4784 2.598 7.83704 7.17298Z"
+        stroke="white"
+      />
+    </CustomIcon>
+  );
+};
diff --git a/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx
index 7688adc..30f7dba 100644
--- a/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/SearchIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const SearchIcon = (props: CustomIconProps) => {
+export const SearchIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="24"
diff --git a/packages/frontend/src/components/shared/CustomIcon/SettingsSlidersIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/SettingsSlidersIcon.tsx
index 45a870b..feb6ef2 100644
--- a/packages/frontend/src/components/shared/CustomIcon/SettingsSlidersIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/SettingsSlidersIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const SettingsSlidersIcon = (props: CustomIconProps) => {
+export const SettingsSlidersIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="20"
diff --git a/packages/frontend/src/components/shared/CustomIcon/WarningIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/WarningIcon.tsx
index 1fd27fb..8c462f7 100644
--- a/packages/frontend/src/components/shared/CustomIcon/WarningIcon.tsx
+++ b/packages/frontend/src/components/shared/CustomIcon/WarningIcon.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CustomIcon, CustomIconProps } from './CustomIcon';
 
-export const WarningIcon = (props: CustomIconProps) => {
+export const WarningIcon: React.FC<CustomIconProps> = (props) => {
   return (
     <CustomIcon
       width="16"
diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts
index ed64696..93f2438 100644
--- a/packages/frontend/src/components/shared/CustomIcon/index.ts
+++ b/packages/frontend/src/components/shared/CustomIcon/index.ts
@@ -21,3 +21,4 @@ export * from './GitIcon';
 export * from './EllipseIcon';
 export * from './EllipsesIcon';
 export * from './SnowballIcon';
+export * from './ReactNativeIcon';