diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
index 3a9ff8696..fa977ed94 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -7,56 +7,64 @@ import { sliceListPerPage } from 'App/utils';
 import DashboardListItem from './DashboardListItem';
 
 function DashboardList() {
-    const { dashboardStore } = useStore();
-    const [shownDashboards, setDashboards] = React.useState([]);
-    const dashboards = dashboardStore.dashboards;
-    const dashboardsSearch = dashboardStore.dashboardsSearch;
+  const { dashboardStore } = useStore();
+  const [shownDashboards, setDashboards] = React.useState([]);
+  const dashboards = dashboardStore.dashboards;
+  const dashboardsSearch = dashboardStore.dashboardsSearch;
 
-    React.useEffect(() => {
-      setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']))
-    }, [dashboardsSearch])
-    
-    const list = dashboardsSearch !== '' ? shownDashboards : dashboards;
-    const lenth = list.length;
+  React.useEffect(() => {
+    setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']));
+  }, [dashboardsSearch]);
 
-    return (
-        <NoContent
-            show={lenth === 0}
-            title={
-              <div className="flex flex-col items-center justify-center">
-                <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" />
-                <div className="text-center text-gray-600 my-4">You haven't created any dashboards yet</div>
-              </div>
-            }   
-        >
-            <div className="mt-3 border-b">
-                <div className="grid grid-cols-12 py-2 font-medium px-3">
-                  <div className="col-span-8">Title</div>
-                  <div  className="col-span-2">Visibility</div>
-                  <div className="col-span-2 text-right">Created</div>
-                </div>
+  const list = dashboardsSearch !== '' ? shownDashboards : dashboards;
+  const lenth = list.length;
 
-                {sliceListPerPage(list, dashboardStore.page - 1, dashboardStore.pageSize).map((dashboard: any) => (
-                    <React.Fragment key={dashboard.dashboardId}>
-                      <DashboardListItem dashboard={dashboard} />
-                    </React.Fragment>
-                ))}
-            </div>
+  return (
+    <NoContent
+      show={lenth === 0}
+      title={
+        <div className="flex flex-col items-center justify-center">
+          <Icon name="no-dashboard" size={80} color="figmaColors-accent-secondary" />
+          <div className="text-center text-gray-600 my-4">
+            {dashboardsSearch !== ''
+              ? 'No matching results'
+              : "You haven't created any dashboards yet"}
+          </div>
+        </div>
+      }
+    >
+      <div className="mt-3 border-b">
+        <div className="grid grid-cols-12 py-2 font-medium px-3">
+          <div className="col-span-8">Title</div>
+          <div className="col-span-2">Visibility</div>
+          <div className="col-span-2 text-right">Created</div>
+        </div>
 
-            <div className="w-full flex items-center justify-between pt-4">
-                <div className="text-disabled-text">
-                  Showing <span className="font-semibold">{Math.min(list.length, dashboardStore.pageSize)}</span> out of <span className="font-semibold">{list.length}</span> Dashboards
-                </div>
-                <Pagination
-                  page={dashboardStore.page}
-                  totalPages={Math.ceil(lenth / dashboardStore.pageSize)}
-                  onPageChange={(page) => dashboardStore.updateKey('page', page)}
-                  limit={dashboardStore.pageSize}
-                  debounceRequest={100}
-                />
-            </div>
-        </NoContent>
-    );
+        {sliceListPerPage(list, dashboardStore.page - 1, dashboardStore.pageSize).map(
+          (dashboard: any) => (
+            <React.Fragment key={dashboard.dashboardId}>
+              <DashboardListItem dashboard={dashboard} />
+            </React.Fragment>
+          )
+        )}
+      </div>
+
+      <div className="w-full flex items-center justify-between pt-4">
+        <div className="text-disabled-text">
+          Showing{' '}
+          <span className="font-semibold">{Math.min(list.length, dashboardStore.pageSize)}</span>{' '}
+          out of <span className="font-semibold">{list.length}</span> Dashboards
+        </div>
+        <Pagination
+          page={dashboardStore.page}
+          totalPages={Math.ceil(lenth / dashboardStore.pageSize)}
+          onPageChange={(page) => dashboardStore.updateKey('page', page)}
+          limit={dashboardStore.pageSize}
+          debounceRequest={100}
+        />
+      </div>
+    </NoContent>
+  );
 }
 
 export default observer(DashboardList);
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index 0833c3557..ef6f8320f 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -8,62 +8,67 @@ import { sliceListPerPage } from 'App/utils';
 import { IWidget } from 'App/mstore/types/widget';
 
 function MetricsList({ siteId }: { siteId: string }) {
-    const { metricStore } = useStore();
-    const metrics = useObserver(() => metricStore.metrics);
-    const metricsSearch = useObserver(() => metricStore.metricsSearch);
+  const { metricStore } = useStore();
+  const metrics = useObserver(() => metricStore.metrics);
+  const metricsSearch = useObserver(() => metricStore.metricsSearch);
 
-    const filterByDashboard = (item: IWidget, searchRE: RegExp) => {
-        const dashboardsStr = item.dashboards.map((d: any) => d.name).join(' ')
-        return searchRE.test(dashboardsStr)
-    }
-    const list = metricsSearch !== '' 
-    ? filterList(metrics, metricsSearch, ['name', 'metricType', 'owner'], filterByDashboard) 
-    : metrics;
-    const lenth = list.length;
+  const filterByDashboard = (item: IWidget, searchRE: RegExp) => {
+    const dashboardsStr = item.dashboards.map((d: any) => d.name).join(' ');
+    return searchRE.test(dashboardsStr);
+  };
+  const list =
+    metricsSearch !== ''
+      ? filterList(metrics, metricsSearch, ['name', 'metricType', 'owner'], filterByDashboard)
+      : metrics;
+  const lenth = list.length;
 
-    useEffect(() => {
-        metricStore.updateKey('sessionsPage', 1);
-    }, [])
+  useEffect(() => {
+    metricStore.updateKey('sessionsPage', 1);
+  }, []);
 
-    return useObserver(() => (
-        <NoContent
-            show={lenth === 0}
-            title={
-                <div className="flex flex-col items-center justify-center">
-                    <Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
-                    <div className="text-center text-gray-600 my-4">You haven't created any metrics yet</div>
-                </div>
-            }   
-        >
-            <div className="mt-3 border-b rounded bg-white">
-                <div className="grid grid-cols-12 py-2 font-medium px-3">
-                    <div className="col-span-3">Title</div>
-                    <div className="col-span-3">Owner</div>
-                    <div  className="col-span-4">Visibility</div>
-                    <div className="col-span-2 text-right">Last Modified</div>
-                </div>
+  return useObserver(() => (
+    <NoContent
+      show={lenth === 0}
+      title={
+        <div className="flex flex-col items-center justify-center">
+          <Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
+          <div className="text-center text-gray-600 my-4">
+            {metricsSearch !== '' ? 'No matching results' : "You haven't created any metrics yet"}
+          </div>
+        </div>
+      }
+    >
+      <div className="mt-3 border-b rounded bg-white">
+        <div className="grid grid-cols-12 py-2 font-medium px-3">
+          <div className="col-span-3">Title</div>
+          <div className="col-span-3">Owner</div>
+          <div className="col-span-4">Visibility</div>
+          <div className="col-span-2 text-right">Last Modified</div>
+        </div>
 
-                {sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => (
-                    <React.Fragment key={metric.metricId}>
-                        <MetricListItem metric={metric} siteId={siteId} />
-                    </React.Fragment>
-                ))}
-            </div>
+        {sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => (
+          <React.Fragment key={metric.metricId}>
+            <MetricListItem metric={metric} siteId={siteId} />
+          </React.Fragment>
+        ))}
+      </div>
 
-            <div className="w-full flex items-center justify-between pt-4">
-                <div className="text-disabled-text">
-                    Showing <span className="font-semibold">{Math.min(list.length, metricStore.pageSize)}</span> out of <span className="font-semibold">{list.length}</span> metrics
-                </div>
-                <Pagination
-                    page={metricStore.page}
-                    totalPages={Math.ceil(lenth / metricStore.pageSize)}
-                    onPageChange={(page) => metricStore.updateKey('page', page)}
-                    limit={metricStore.pageSize}
-                    debounceRequest={100}
-                />
-            </div>
-        </NoContent>
-    ));
+      <div className="w-full flex items-center justify-between pt-4">
+        <div className="text-disabled-text">
+          Showing{' '}
+          <span className="font-semibold">{Math.min(list.length, metricStore.pageSize)}</span> out
+          of <span className="font-semibold">{list.length}</span> metrics
+        </div>
+        <Pagination
+          page={metricStore.page}
+          totalPages={Math.ceil(lenth / metricStore.pageSize)}
+          onPageChange={(page) => metricStore.updateKey('page', page)}
+          limit={metricStore.pageSize}
+          debounceRequest={100}
+        />
+      </div>
+    </NoContent>
+  ));
 }
 
 export default MetricsList;