diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index 2f22e6ead..789ef680a 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -4,7 +4,7 @@ import { Tooltip, Input, Button, Dropdown, Menu, Tag, Modal as AntdModal, Form,
 import { TeamOutlined, LockOutlined, EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons';
 import { RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
-import { TYPES } from 'App/constants/card';
+import { TYPE_ICONS, TYPE_NAMES } from 'App/constants/card';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { toast } from 'react-toastify';
@@ -20,15 +20,9 @@ interface Props extends RouteComponentProps {
 }
 
 function MetricTypeIcon({ type }: any) {
-  const [card, setCard] = useState<any>('');
-  useEffect(() => {
-    const t = TYPES.find((i) => i.slug === type);
-    setCard(t || {});
-  }, [type]);
-
   return (
-    <Tooltip title={<div className="capitalize">{card.title}</div>}>
-      <Avatar src={card.icon && <Icon name={card.icon} size="16" color="tealx" />}  size="small" className="bg-tealx-lightest mr-2" />
+    <Tooltip title={<div className="capitalize">{TYPE_NAMES[type]}</div>}>
+      <Avatar src={<Icon name={TYPE_ICONS[type]} size="16" color="tealx" />}  size="small" className="bg-tealx-lightest mr-2" />
     </Tooltip>
   );
 }
diff --git a/frontend/app/constants/card.ts b/frontend/app/constants/card.ts
index 9151e2cba..e08808e07 100644
--- a/frontend/app/constants/card.ts
+++ b/frontend/app/constants/card.ts
@@ -37,23 +37,46 @@ export interface Option {
   disabled?: boolean;
 }
 
+export const TYPE_ICONS = {
+  [LIBRARY]: 'grid',
+  [TIMESERIES]: 'graph-up',
+  [TABLE]: 'list-alt',
+  [HEATMAP]: 'puzzle-piece',
+  [FUNNEL]: 'funnel',
+  [ERRORS]: 'exclamation-triangle',
+  [USER_PATH]: 'signpost-split',
+  [TABLE]: 'list-alt',
+} as const
+export const TYPE_NAMES = {
+  [LIBRARY]: 'Library',
+  [TIMESERIES]: 'Timeseries',
+  [TABLE]: 'Table',
+  [HEATMAP]: 'Heatmap',
+  [FUNNEL]: 'Funnel',
+  [ERRORS]: 'Errors',
+  [USER_PATH]: 'User Path',
+  [RETENTION]: 'Retention',
+  [INSIGHTS]: 'Insights',
+  [PERFORMANCE]: 'Performance',
+} as const
+
 export const TYPES: CardType[] = [
   {
     title: 'Add from Library',
-    icon: 'grid',
+    icon: TYPE_ICONS[LIBRARY],
     description: 'Select an existing card from your library',
     slug: LIBRARY,
   },
   {
-    title: 'Timeseries',
-    icon: 'graph-up',
+    title: TYPE_NAMES[TIMESERIES],
+    icon: TYPE_ICONS[TIMESERIES],
     description: 'Combine captured events and filters to track trends over time.',
     slug: TIMESERIES,
     subTypes: [{ title: 'Session Count', slug: 'sessionCount', description: '' }],
   },
   {
-    title: 'Heatmap',
-    icon: 'puzzle-piece',
+    title: TYPE_NAMES[HEATMAP],
+    icon: TYPE_ICONS[HEATMAP],
     description: 'See where users click and where they get frustrated.',
     slug: HEATMAP,
     subTypes: [{ title: 'Visited URL', slug: FilterKey.CLICKMAP_URL, description: '' }],
@@ -75,14 +98,14 @@ export const TYPES: CardType[] = [
   //   ],
   // },
   {
-    title: 'Funnel',
-    icon: 'funnel',
+    title: TYPE_NAMES[FUNNEL],
+    icon: TYPE_ICONS[FUNNEL],
     description: 'Find out where users are dropping and understand why.',
     slug: FUNNEL,
   },
   {
-    title: 'Path Analysis',
-    icon: 'signpost-split',
+    title: TYPE_NAMES[USER_PATH],
+    icon: TYPE_ICONS[USER_PATH],
     description: 'See where users are flowing and explore their journeys.',
     slug: USER_PATH,
   },