diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
index 379bd58cd..87a51d99c 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssueItem.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Icon } from 'UI';
 import Issue from 'App/mstore/types/issue';
+import { List } from 'antd';
 
 interface Props {
   issue: Issue;
@@ -9,19 +10,15 @@ interface Props {
 function CardIssueItem(props: Props) {
   const { issue } = props;
   return (
-    <div className='flex items-center py-2 hover:bg-active-blue cursor-pointer'>
-      <div className='mr-auto flex items-center'>
-        <div className='flex items-center justify-center flex-shrink-0 mr-3 relative'>
-          <Icon name={issue.icon} size='24' className='z-10 inset-0' style={{fill: issue.color }}/>
-        </div>
-        <div className='flex-1 overflow-hidden'>
-          {issue.name}
-          <span className='color-gray-medium mx-2'>{issue.source}</span>
-        </div>
-      </div>
+    <>
+      <List.Item.Meta
+        title={issue.name}
+        description={<div className="text-nowrap truncate">{issue.source}</div>}
+        avatar={<Icon name={issue.icon} size="24" />}
+      />
       <div>{issue.sessionCount}</div>
-    </div>
+    </>
   );
 }
 
-export default CardIssueItem;
\ No newline at end of file
+export default CardIssueItem;
diff --git a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
index 67eb3eedf..4d619bdfd 100644
--- a/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
+++ b/frontend/app/components/Dashboard/components/CardIssues/CardIssues.tsx
@@ -9,6 +9,7 @@ import CardIssueItem from './CardIssueItem';
 import SessionsModal from '../SessionsModal';
 import { useModal } from 'App/components/Modal';
 import Issue from 'App/mstore/types/issue';
+import { List } from 'antd';
 
 function CardIssues() {
   const { metricStore, dashboardStore } = useStore();
@@ -109,11 +110,19 @@ function CardIssues() {
 
       <Loader loading={loading}>
         <NoContent show={data.issues.length == 0} title="No data!">
-          {data.issues.map((item: any, index: any) => (
-            <div onClick={() => handleClick(item)} key={index}>
-              <CardIssueItem issue={item} />
-            </div>
-          ))}
+          {/*{data.issues.map((item: any, index: any) => (*/}
+          {/*  <div onClick={() => handleClick(item)} key={index}>*/}
+          {/*    <CardIssueItem issue={item} />*/}
+          {/*  </div>*/}
+          {/*))}*/}
+          <List
+            itemLayout="horizontal"
+            dataSource={data.issues}
+            renderItem={(item: any) => (
+              <List.Item onClick={() => handleClick(item)}>
+                <CardIssueItem issue={item} />
+              </List.Item>
+            )}/>
         </NoContent>
       </Loader>
 
diff --git a/frontend/app/mstore/types/funnelIssue.ts b/frontend/app/mstore/types/funnelIssue.ts
index 203a6727c..716ed9529 100644
--- a/frontend/app/mstore/types/funnelIssue.ts
+++ b/frontend/app/mstore/types/funnelIssue.ts
@@ -71,4 +71,4 @@ const getIconDetails = (type) => {
       icon: 'info',
       color: 'red'
     }
-  }
\ No newline at end of file
+  }
diff --git a/frontend/app/mstore/types/issue.ts b/frontend/app/mstore/types/issue.ts
index e85081f7a..3fbfd38b1 100644
--- a/frontend/app/mstore/types/issue.ts
+++ b/frontend/app/mstore/types/issue.ts
@@ -1,18 +1,18 @@
 const ISSUE_MAP: any = {
-  dead_click: { name: 'Dead Click', icon: 'funnel/emoji-dizzy-fill', color: '#9C001F' },
-  rage_click: { name: 'Rage Click', icon: 'funnel/emoji-angry-fill', color: '#CC0000' },
-  click_rage: { name: 'Click Rage', icon: 'funnel/emoji-angry-fill', color: '#CC0000' },
-  excessive_scrolling: { name: 'Excessive Scrolling', icon: 'funnel/mouse', color: '#D3545F' },
-  bad_request: { name: 'Bad Request', icon: 'funnel/patch-exclamation-fill', color: '#D70072' },
-  missing_resource: { name: 'Missing Resource', icon: 'funnel/image-fill', color: '#B89C50' },
-  memory: { name: 'Memory', icon: 'funnel/cpu-fill', color: '#8A5A83' },
-  cpu: { name: 'CPU', icon: 'funnel/hdd-fill', color: '#8A5A83' },
-  slow_resource: { name: 'Slow Resource', icon: 'funnel/hourglass-top', color: '#8B006D' },
-  slow_page_load: { name: 'Slow Page Load', icon: 'funnel/hourglass-top', color: '#8B006D' },
-  custom_event_error: { name: 'Custom Event Error', icon: 'funnel/exclamation-circle-fill', color: '#BF6C00' },
-  custom: { name: 'Custom', icon: 'funnel/exclamation-circle-fill', color: '#BF6C00' },
-  crash: { name: 'Crash', icon: 'funnel/file-x', color: '#BF2D00' },
-  js_exception: { name: 'JS Exception', icon: 'funnel/exclamation-circle', color: '#BF2D00' },
+  dead_click: { name: 'Dead Click', icon: 'color/issues/dead_click', color: '#9C001F' },
+  rage_click: { name: 'Rage Click', icon: 'color/issues/click_rage', color: '#CC0000' },
+  click_rage: { name: 'Click Rage', icon: 'color/issues/click_rage', color: '#CC0000' },
+  excessive_scrolling: { name: 'Excessive Scrolling', icon: 'color/issues/mouse', color: '#D3545F' },
+  bad_request: { name: 'Bad Request', icon: 'color/issues/patch-exclamation-fill', color: '#D70072' },
+  missing_resource: { name: 'Missing Resource', icon: 'color/issues/image-fill', color: '#B89C50' },
+  memory: { name: 'Memory', icon: 'color/issues/cpu-fill', color: '#8A5A83' },
+  cpu: { name: 'CPU', icon: 'color/issues/hdd-fill', color: '#8A5A83' },
+  slow_resource: { name: 'Slow Resource', icon: 'color/issues/hourglass-top', color: '#8B006D' },
+  slow_page_load: { name: 'Slow Page Load', icon: 'color/issues/hourglass-top', color: '#8B006D' },
+  custom_event_error: { name: 'Custom Event Error', icon: 'color/issues/exclamation-circle-fill', color: '#BF6C00' },
+  custom: { name: 'Custom', icon: 'color/issues/exclamation-circle-fill', color: '#BF6C00' },
+  crash: { name: 'Crash', icon: 'color/issues/file-x', color: '#BF2D00' },
+  js_exception: { name: 'JS Exception', icon: 'color/issues/exclamation-circle', color: '#BF2D00' },
   mouse_thrashing: { name: 'Mouse Thrashing', icon: 'event/mouse_thrashing', color: '#D3545F' },
 };
 
@@ -37,9 +37,9 @@ export default class Issue {
     this.type = json.name;
     this.name = ISSUE_MAP[json.name].name || '';
     this.sessionCount = json.sessionCount;
-    this.icon = ISSUE_MAP[json.name].icon || '';
+    this.icon = `color/issues/${json.name}`;
     this.source = json.value || json.source || '';
     this.color = ISSUE_MAP[json.name].color || '';
     return this;
   }
-}
\ No newline at end of file
+}