diff --git a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
index 1e1775415..719677914 100644
--- a/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
+++ b/frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
@@ -25,13 +25,8 @@ function MetricViewHeader() {
-
-
-
+
+
+
+
+
+
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index 1b9f7dfc9..bcf464d76 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -1,6 +1,6 @@
import { observer, useObserver } from 'mobx-react-lite';
import React, { useEffect, useMemo, useState } from 'react';
-import { NoContent, Pagination } from 'UI';
+import { NoContent, Pagination, Icon } from 'UI';
import { useStore } from 'App/mstore';
import { sliceListPerPage } from 'App/utils';
import GridView from './GridView';
@@ -15,7 +15,7 @@ function MetricsList({
onSelectionChange?: (selected: any[]) => void;
}) {
const { metricStore, dashboardStore } = useStore();
- const metricsSearch = metricStore.metricsSearch;
+ const metricsSearch = metricStore.filter.query;
const listView = useObserver(() => metricStore.listView);
const [selectedMetrics, setSelectedMetrics] = useState
([]);
@@ -57,6 +57,9 @@ function MetricsList({
{metricsSearch !== '' ? 'No matching results' : "You haven't created any cards yet"}
+
+ Create cards to capture key interactions and track KPIs.
+
}
>
diff --git a/frontend/app/svg/ca-no-cards.svg b/frontend/app/svg/ca-no-cards.svg
index ea6fe261e..5d03d279d 100644
--- a/frontend/app/svg/ca-no-cards.svg
+++ b/frontend/app/svg/ca-no-cards.svg
@@ -1,10 +1,16 @@