diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
index d54b34dc3..66d379e6f 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
@@ -47,10 +47,6 @@ function DashboardsView({ history, siteId }: { history: any; siteId: string }) {
           </div>
         </div>
       </div>
-      {/* <div className="text-base text-disabled-text flex items-center px-6">
-        <Icon name="info-circle-fill" className="mr-2" size={16} />A dashboard is a custom
-        visualization using your OpenReplay data.
-      </div> */}
       <DashboardList />
     </div>
   );
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index e1653c947..93377efd2 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -131,38 +131,17 @@ function DashboardView(props: Props) {
               }
               onDoubleClick={() => onEdit(true)}
               className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
-              actionButton={
-                // <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
-                  <Popover
-                    // open={showTooltip}
-                    // interactive
-                    // useContext
-                    // @ts-ignore
-                    // theme="nopadding"
-                    // hideDelay={0}
-                    // duration={0}
-                    // distance={20}
-                    placement="left"
-                    render={() => showTooltip && (
-                      <div style={{ padding: 0 }}>
-                        <AddMetricContainer
-                          onAction={() => setShowTooltip(false)}
-                          isPopup
-                          siteId={siteId}
-                        />
-                      </div>
-                    )}
-                  >
-                    <Button variant="primary" onClick={() => setShowTooltip(true)}>
-                      Add Metric
-                    </Button>
-                  </Popover>
-                // </OutsideClickDetectingDiv>
-              }
             />
           </div>
           <div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
-            <div className="flex items-center flex-shrink-0 justify-end" style={{ width: '300px' }}>
+            <Button variant="primary" onClick={() => setShowTooltip(true)} icon="plus">
+              Add Card
+            </Button>
+            <div className="mx-4"></div>
+            <div
+              className="flex items-center flex-shrink-0 justify-end"
+              style={{ width: 'fit-content' }}
+            >
               <SelectDateRange
                 style={{ width: '300px' }}
                 period={period}
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index e2009f6bf..4afb75783 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { toJS } from 'mobx';
 import { useStore } from 'App/mstore';
 import WidgetWrapper from '../WidgetWrapper';
 import { NoContent, Loader, Icon } from 'UI';
 import { useObserver } from 'mobx-react-lite';
 import AddMetricContainer from './AddMetricContainer';
 import Widget from 'App/mstore/types/widget';
+import MetricTypeList from '../MetricTypeList';
 
 interface Props {
   siteId: string;
@@ -38,12 +38,21 @@ function DashboardWidgetGrid(props: Props) {
       <NoContent
         show={list.length === 0}
         icon="no-metrics-chart"
-        title={<EmptyDashboardGrid />}
-        // subtext={
-        //   <div className="w-4/5 m-auto mt-4">
-        //     <AddMetricContainer siteId={siteId} />
-        //   </div>
-        // }
+        title={
+          <div className="bg-white rounded">
+            <div className="border-b p-5">
+              <div className="text-2xl font-normal color-gray-darkest">
+                There are no cards in this dashboard
+              </div>
+              <div className="text-base font-normal">
+                Try the most commonly used metrics or graphs to begin.
+              </div>
+            </div>
+            <div className="grid grid-cols-4 p-8 gap-2">
+              <MetricTypeList />
+            </div>
+          </div>
+        }
       >
         <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>{smallWidgets.length > 0 ? (
           <>
@@ -105,122 +114,3 @@ function DashboardWidgetGrid(props: Props) {
 }
 
 export default DashboardWidgetGrid;
-
-interface MetricType {
-  title: string;
-  icon: string;
-  description: string;
-  slug: string;
-}
-const METRIC_TYPES: MetricType[] = [
-  {
-    title: 'Add From Library',
-    icon: 'grid',
-    description: 'Select a pre existing card from card library',
-    slug: 'library',
-  },
-  {
-    title: 'Timeseries',
-    icon: 'graph-up',
-    description: 'Trend of sessions count in over the time.',
-    slug: 'timeseries',
-  },
-  {
-    title: 'Table',
-    icon: 'list-alt',
-    description: 'See list of Users, Sessions, Errors, Issues, etc.,',
-    slug: 'table'
-  },
-  {
-    title: 'Funnel',
-    icon: 'funnel',
-    description: 'Uncover the issues impacting user journeys.',
-    slug: 'funnel'
-  },
-  {
-    title: 'Errors Tracking',
-    icon: 'exclamation-circle',
-    description: 'Discover user journeys between 2 points.',
-    slug: 'errors'
-  },
-  {
-    title: 'Performance Monitoring',
-    icon: 'speedometer2',
-    description: 'Retention graph of users / features over a period of time.',
-    slug: 'performance'
-  },
-  {
-    title: 'Resource Monitoring',
-    icon: 'files',
-    description: 'Find the adoption of your all features in your app.',
-    slug: 'resource-monitoring'
-  },
-  {
-    title: 'Web Vitals',
-    icon: 'activity',
-    description: 'Find the adoption of your all features in your app.',
-    slug: 'web-vitals'
-  },
-  {
-    title: 'User Path',
-    icon: 'signpost-split',
-    description: 'Discover user journeys between 2 points.',
-    slug: 'user-path'
-  },
-  {
-    title: 'Retention',
-    icon: 'arrow-repeat',
-    description: 'Retension graph of users / features over a period of time.',
-    slug: 'retention'
-  },
-  {
-    title: 'Feature Adoption',
-    icon: 'card-checklist',
-    description: 'Find the adoption of your all features in your app.',
-    slug: 'feature-adoption'
-  },
-];
-
-function MetricTypeItem({
-  icon,
-  title,
-  description,
-}: {
-  icon: string;
-  title: string;
-  description: string;
-}) {
-  return (
-    <div className="flex items-start hover:bg-active-blue p-4 cursor-pointer">
-      <div className="pr-4 pt-1">
-        <Icon name={icon} size="20" />
-      </div>
-      <div className="flex flex-col items-start text-left">
-        <div className="text-base color-gray-darkest">{title}</div>
-        <div className="text-xs">{description}</div>
-      </div>
-    </div>
-  );
-}
-
-function EmptyDashboardGrid() {
-  return (
-    <div className="bg-white rounded">
-      <div className="border-b p-4">
-        <div className="text-lg font-medium color-gray-darkest">
-          There are no cards in this dashboard
-        </div>
-        <div className="text-sm">Try the most commonly used metrics or graphs to begin.</div>
-      </div>
-      <div className="grid grid-cols-4 p-8 gap-2">
-        {METRIC_TYPES.map((metric: MetricType) => (
-          <MetricTypeItem
-            icon={metric.icon}
-            title={metric.title}
-            description={metric.description}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx b/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx
new file mode 100644
index 000000000..7e4039721
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/MetricTypeItem/MetricTypeItem.tsx
@@ -0,0 +1,33 @@
+import { IconNames } from 'App/components/ui/SVG';
+import React from 'react';
+import { Icon } from 'UI';
+
+export interface MetricType {
+  title: string;
+  icon: IconNames;
+  description: string;
+  slug: string;
+}
+
+interface Props {
+  metric: MetricType;
+}
+
+function MetricTypeItem(props: Props) {
+  const {
+    metric: { title, icon, description, slug },
+  } = props;
+  return (
+    <div className="flex items-start p-4 hover:bg-active-blue cursor-pointer group hover-color-teal">
+      <div className="pr-4 pt-1">
+        <Icon name={icon} size="20" />
+      </div>
+      <div className="flex flex-col items-start text-left">
+        <div className="text-base group-hover:color-teal">{title}</div>
+        <div className="text-xs">{description}</div>
+      </div>
+    </div>
+  );
+}
+
+export default MetricTypeItem;
diff --git a/frontend/app/components/Dashboard/components/MetricTypeItem/index.ts b/frontend/app/components/Dashboard/components/MetricTypeItem/index.ts
new file mode 100644
index 000000000..e9b95b5a8
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/MetricTypeItem/index.ts
@@ -0,0 +1 @@
+export { default } from './MetricTypeItem';
diff --git a/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
new file mode 100644
index 000000000..d31bc5596
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/MetricTypeList/MetricTypeList.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import MetricTypeItem, { MetricType } from '../MetricTypeItem/MetricTypeItem';
+
+const METRIC_TYPES: MetricType[] = [
+  {
+    title: 'Add From Library',
+    icon: 'grid',
+    description: 'Select a pre existing card from card library',
+    slug: 'library',
+  },
+  {
+    title: 'Timeseries',
+    icon: 'graph-up',
+    description: 'Trend of sessions count in over the time.',
+    slug: 'timeseries',
+  },
+  {
+    title: 'Table',
+    icon: 'list-alt',
+    description: 'See list of Users, Sessions, Errors, Issues, etc.,',
+    slug: 'table',
+  },
+  {
+    title: 'Funnel',
+    icon: 'funnel',
+    description: 'Uncover the issues impacting user journeys.',
+    slug: 'funnel',
+  },
+  {
+    title: 'Errors Tracking',
+    icon: 'exclamation-circle',
+    description: 'Discover user journeys between 2 points.',
+    slug: 'errors',
+  },
+  {
+    title: 'Performance Monitoring',
+    icon: 'speedometer2',
+    description: 'Retention graph of users / features over a period of time.',
+    slug: 'performance',
+  },
+  {
+    title: 'Resource Monitoring',
+    icon: 'files',
+    description: 'Find the adoption of your all features in your app.',
+    slug: 'resource-monitoring',
+  },
+  {
+    title: 'Web Vitals',
+    icon: 'activity',
+    description: 'Find the adoption of your all features in your app.',
+    slug: 'web-vitals',
+  },
+  {
+    title: 'User Path',
+    icon: 'signpost-split',
+    description: 'Discover user journeys between 2 points.',
+    slug: 'user-path',
+  },
+  {
+    title: 'Retention',
+    icon: 'arrow-repeat',
+    description: 'Retension graph of users / features over a period of time.',
+    slug: 'retention',
+  },
+  {
+    title: 'Feature Adoption',
+    icon: 'card-checklist',
+    description: 'Find the adoption of your all features in your app.',
+    slug: 'feature-adoption',
+  },
+];
+
+function MetricTypeList() {
+  return (
+    <>
+      {METRIC_TYPES.map((metric: MetricType) => (
+        <MetricTypeItem metric={metric} />
+      ))}
+    </>
+  );
+}
+
+export default MetricTypeList;
diff --git a/frontend/app/components/Dashboard/components/MetricTypeList/index.ts b/frontend/app/components/Dashboard/components/MetricTypeList/index.ts
new file mode 100644
index 000000000..35cf1cc61
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/MetricTypeList/index.ts
@@ -0,0 +1 @@
+export { default } from './MetricTypeList';