diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 761a3e639..4c38cc4c4 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -1,6 +1,6 @@
 {
-  "tabWidth": 4,
+  "tabWidth": 2,
   "useTabs": false,
-  "printWidth": 150,
+  "printWidth": 100,
   "singleQuote": true
 }
diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
index 90afa772a..0e24e10f9 100644
--- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
+++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx
@@ -91,7 +91,6 @@ function AssistActions({
 
     React.useEffect(() => {
         if (!onCall && isCallActive && agentIds) {
-            logger.log('joinig the party', agentIds)
             setPrestart(true);
             call(agentIds)
         }
diff --git a/frontend/app/components/Dashboard/NewDashboard.tsx b/frontend/app/components/Dashboard/NewDashboard.tsx
index 89af30897..2f9496591 100644
--- a/frontend/app/components/Dashboard/NewDashboard.tsx
+++ b/frontend/app/components/Dashboard/NewDashboard.tsx
@@ -9,40 +9,41 @@ import cn from 'classnames';
 import { withSiteId } from 'App/routes';
 import withPermissions from 'HOCs/withPermissions'
 
-function NewDashboard(props: RouteComponentProps<{}>) {
-    const { history, match: { params: { siteId, dashboardId, metricId } } } = props;
+interface RouterProps {
+    siteId: string;
+    dashboardId: string;
+    metricId: string;
+}
+
+function NewDashboard(props: RouteComponentProps<RouterProps>) {
+    const { history, match: { params: { siteId, dashboardId } } } = props;
     const { dashboardStore } = useStore();
     const loading = useObserver(() => dashboardStore.isLoading);
     const isMetricDetails = history.location.pathname.includes('/metrics/') || history.location.pathname.includes('/metric/');
+    const isDashboardDetails = history.location.pathname.includes('/dashboard/')
 
+    const shouldHideMenu = isMetricDetails || isDashboardDetails;
     useEffect(() => {
         dashboardStore.fetchList().then((resp) => {
             if (parseInt(dashboardId) > 0) {
                 dashboardStore.selectDashboardById(dashboardId);
             }
         });
-        if (!dashboardId && location.pathname.includes('dashboard')) {
-            dashboardStore.selectDefaultDashboard().then(({ dashboardId }) => {
-                props.history.push(withSiteId(`/dashboard/${dashboardId}`, siteId));
-            }, () => {
-                props.history.push(withSiteId('/dashboard', siteId));
-            })
-        }
     }, [siteId]);
 
     return useObserver(() => (
         <Loader loading={loading}>
              <div className="page-margin container-90">
-                <div className={cn("side-menu", { 'hidden' : isMetricDetails })}>
+                <div className={cn("side-menu", { 'hidden' : shouldHideMenu })}>
                     <DashboardSideMenu siteId={siteId} />
                 </div>
                 <div
                     className={cn({
-                        "side-menu-margined" : !isMetricDetails,
-                        "container-70" : isMetricDetails
+                        "side-menu-margined" : !shouldHideMenu,
+                        "container-70" : shouldHideMenu
                     })}
                 >
-                    <DashboardRouter siteId={siteId} />
+                    <DashboardRouter />
                 </div>
             </div>
         </Loader>
diff --git a/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js b/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js
index 10ab766a7..99ffc931b 100644
--- a/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js
+++ b/frontend/app/components/Dashboard/Widgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.js
@@ -30,6 +30,7 @@ export default class BreakdownOfLoadedResources extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js b/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
index 8bf8b90c2..4b3cadef6 100644
--- a/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
+++ b/frontend/app/components/Dashboard/Widgets/CallWithErrors/CallWithErrors.js
@@ -64,6 +64,7 @@ export default class CallWithErrors extends React.PureComponent {
         </div>
         <NoContent
           size="small"
+          title="No recordings found"
           show={ images.size === 0 }
         >
           <Table
diff --git a/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js b/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js
index 7b710adf5..d387b53cc 100644
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js
+++ b/frontend/app/components/Dashboard/Widgets/CallsErrors4xx/CallsErrors4xx.js
@@ -37,6 +37,7 @@ export default class CallsErrors4xx extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js b/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js
index a0e0d05a0..3c655da5f 100644
--- a/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js
+++ b/frontend/app/components/Dashboard/Widgets/CallsErrors5xx/CallsErrors5xx.js
@@ -37,6 +37,7 @@ export default class CallsErrors5xx extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js b/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js
index 0579480fb..ee448dac2 100644
--- a/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js
+++ b/frontend/app/components/Dashboard/Widgets/CpuLoad/CpuLoad.js
@@ -27,6 +27,7 @@ export default class CpuLoad extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <div className="flex items-center justify-end mb-3">
diff --git a/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js b/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js
index 16f96a07c..576c9c13f 100644
--- a/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js
+++ b/frontend/app/components/Dashboard/Widgets/Crashes/Crashes.js
@@ -30,6 +30,7 @@ export default class Crashes extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
index 76b8697c1..0765d7940 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricPieChart/CustomMetricPieChart.tsx
@@ -34,7 +34,7 @@ function CustomMetricPieChart(props: Props) {
         }
     }
     return (
-        <NoContent size="small" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
+        <NoContent size="small" title="No recordings found" show={!data.values || data.values.length === 0} style={{ minHeight: '240px'}}>
             <ResponsiveContainer height={ 220 } width="100%">
                 <PieChart>
                     <Pie
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
index a5e8425d4..41520394d 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTable/CustomMetricTable.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Table } from '../../common';
 import { List } from 'immutable';
 import { filtersMap } from 'Types/filter/newFilter';
-import { NoContent } from 'UI';
+import { NoContent, Icon } from 'UI';
 import { tableColumnName } from 'App/constants/filterOptions';
 import { numberWithCommas } from 'App/utils';
 
@@ -49,8 +49,8 @@ function CustomMetricTable(props: Props) {
         onClick(filters);
     }
     return (
-        <div className="" style={{ maxHeight: '240px'}}>
-           <NoContent show={data.values && data.values.length === 0} size="small">
+        <div className="" style={{ height: 240 }}>
+           <NoContent show={data.values && data.values.length === 0} size="small" title={<div className="flex items-center"><Icon name="info-circle" className="mr-2" size="18" /> No data for the selected time period</div>}>
                 <Table
                     small
                     cols={ getColumns(metric) }
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
index 55fcb29eb..83cd55b35 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect } from "react";
-import { Pagination, NoContent } from "UI";
+import { Pagination, NoContent, Icon } from "UI";
 import ErrorListItem from "App/components/Dashboard/components/Errors/ErrorListItem";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 import { useModal } from "App/components/Modal";
 import ErrorDetailsModal from "App/components/Dashboard/components/Errors/ErrorDetailsModal";
 import { useStore } from "App/mstore";
-import { overPastString } from "App/dateRange";
 interface Props {
     metric: any;
     data: any;
@@ -18,7 +17,6 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
     const errorId = new URLSearchParams(props.location.search).get("errorId");
     const { showModal, hideModal } = useModal();
     const { dashboardStore } = useStore();
-    const period = dashboardStore.period;
 
     const onErrorClick = (e: any, error: any) => {
         e.stopPropagation();
@@ -46,9 +44,9 @@ function CustomMetricTableErrors(props: RouteComponentProps & Props) {
 
     return (
         <NoContent
-            title={`No errors found ${overPastString(period)}`}
-            show={!data.errors || data.errors.length === 0}
-            size="small"
+        title={<div className="flex items-center"><Icon name="info-circle" size={18} className="mr-2" />No data for the selected time period</div>}
+        show={!data.errors || data.errors.length === 0}
+        size="small"
         >
             <div className="pb-4">
                 {data.errors &&
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
index c5aa85e0f..ffb489b11 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableSessions/CustomMetricTableSessions.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import SessionItem from "Shared/SessionItem";
 import { Pagination, NoContent } from "UI";
 import { useStore } from "App/mstore";
-import { overPastString } from "App/dateRange";
+import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 interface Props {
     metric: any;
@@ -26,7 +26,13 @@ function CustomMetricTableSessions(props: Props) {
                 data.sessions.length === 0
             }
             size="small"
-            title={`No sessions found ${overPastString(period)}`}
+            title={
+                <div className="flex items-center justify-center flex-col">
+                    <AnimatedSVG name={ICONS.NO_SESSIONS} size={170} />
+                    <div className="mt-2" />
+                    <div className="text-center text-gray-600">No relevant sessions found for the selected time period.</div>
+                </div>
+            } 
         >
             <div className="pb-4">
                 {data.sessions &&
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
index fe83c04b8..30dff93db 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricWidget/CustomMetricWidget.tsx
@@ -104,6 +104,7 @@ function CustomMetricWidget(props: Props) {
         <Loader loading={ loading } size="small">
           <NoContent
             size="small"
+            title="No recordings found"
             show={ data.length === 0 }
           >
             <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js b/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js
index 27cc682ff..970bfdbad 100644
--- a/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js
+++ b/frontend/app/components/Dashboard/Widgets/DomBuildingTime/DomBuildingTime.js
@@ -44,6 +44,7 @@ export default class DomBuildingTime extends React.PureComponent {
     return (
       <NoContent
         size="small"
+        title="No recordings found"
         show={ data.chart.length === 0 }
       >
         <React.Fragment>
@@ -60,6 +61,7 @@ export default class DomBuildingTime extends React.PureComponent {
           <Loader loading={ loading } size="small">
             <NoContent
               size="small"
+              title="No recordings found"
               show={ data.chart.size === 0 }
             >
               <ResponsiveContainer height={ 200 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js b/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js
index 399908f74..d77bac5f4 100644
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js
+++ b/frontend/app/components/Dashboard/Widgets/ErrorsByOrigin/ErrorsByOrigin.js
@@ -29,6 +29,7 @@ export default class ErrorsByOrigin extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js b/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js
index 3bca2406c..4421a3fbb 100644
--- a/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js
+++ b/frontend/app/components/Dashboard/Widgets/ErrorsByType/ErrorsByType.js
@@ -31,6 +31,7 @@ export default class ErrorsByType extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js b/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js
index 68752c46b..11af3f7d7 100644
--- a/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js
+++ b/frontend/app/components/Dashboard/Widgets/ErrorsPerDomain/ErrorsPerDomain.js
@@ -15,6 +15,7 @@ export default class ErrorsPerDomain extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.size === 0 }
         >          
           <div className="w-full pt-3" style={{ height: '240px' }}>
diff --git a/frontend/app/components/Dashboard/Widgets/FPS/FPS.js b/frontend/app/components/Dashboard/Widgets/FPS/FPS.js
index d91379188..843cea3db 100644
--- a/frontend/app/components/Dashboard/Widgets/FPS/FPS.js
+++ b/frontend/app/components/Dashboard/Widgets/FPS/FPS.js
@@ -26,6 +26,7 @@ export default class FPS extends React.PureComponent {
     return (
       <Loader loading={ loading } size="small">
         <NoContent
+          title="No recordings found"
           size="small"
           show={ data.chart.length === 0 }
         >
diff --git a/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js b/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js
index 23f5731d9..fcd36d98e 100644
--- a/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js
+++ b/frontend/app/components/Dashboard/Widgets/LastFrustrations/LastFrustrations.js
@@ -12,6 +12,7 @@ export default class LastFeedbacks extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ sessions.size === 0 }
         >
           { sessions.map(({ 
diff --git a/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js b/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js
index 839db02bc..14ed08d93 100644
--- a/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js
+++ b/frontend/app/components/Dashboard/Widgets/MemoryConsumption/MemoryConsumption.js
@@ -26,6 +26,7 @@ export default class MemoryConsumption extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.chart.length === 0 }
         >
           <div className="flex items-center justify-end mb-3">
diff --git a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
index 6f2d300a1..a86e23220 100644
--- a/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
+++ b/frontend/app/components/Dashboard/Widgets/MostImpactfulErrors/MostImpactfulErrors.js
@@ -48,6 +48,7 @@ export default class MostImpactfulErrors extends React.PureComponent {
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ errors.size === 0 }
         >
           <Table
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
index 73a8fd46a..cc2e2e6ad 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/BreakdownOfLoadedResources/BreakdownOfLoadedResources.tsx
@@ -19,6 +19,7 @@ function BreakdownOfLoadedResources(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
@@ -46,4 +47,4 @@ function BreakdownOfLoadedResources(props: Props) {
     );
 }
 
-export default BreakdownOfLoadedResources;
\ No newline at end of file
+export default BreakdownOfLoadedResources;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
index 53356bf0d..311b481c6 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx
@@ -19,6 +19,7 @@ function CPULoad(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
@@ -54,4 +55,4 @@ function CPULoad(props: Props) {
     );
 }
 
-export default CPULoad;
\ No newline at end of file
+export default CPULoad;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
index 45673614f..d85512786 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallWithErrors/CallWithErrors.tsx
@@ -61,6 +61,7 @@ function CallWithErrors(props: Props) {
 
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={{ height: '240px'}}
         >
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
index afaaeb37d..ce62bedff 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors4xx/CallsErrors4xx.tsx
@@ -16,6 +16,7 @@ function CallsErrors4xx(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
@@ -46,4 +47,4 @@ function CallsErrors4xx(props: Props) {
     );
 }
 
-export default CallsErrors4xx;
\ No newline at end of file
+export default CallsErrors4xx;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
index cc87d5c26..9792e9fce 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CallsErrors5xx/CallsErrors5xx.tsx
@@ -16,6 +16,7 @@ function CallsErrors5xx(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
@@ -46,4 +47,4 @@ function CallsErrors5xx(props: Props) {
     );
 }
 
-export default CallsErrors5xx;
\ No newline at end of file
+export default CallsErrors5xx;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
index 0fa472db9..69a7c2f6b 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/Crashes/Crashes.tsx
@@ -18,6 +18,7 @@ function Crashes(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
@@ -52,4 +53,4 @@ function Crashes(props: Props) {
     );
 }
 
-export default Crashes;
\ No newline at end of file
+export default Crashes;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
index f14dc5cd7..7eea40a8a 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/DomBuildingTime/DomBuildingTime.tsx
@@ -33,6 +33,7 @@ function DomBuildingTime(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
         >
           <>
@@ -87,4 +88,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(DomBuildingTime)
\ No newline at end of file
+})(DomBuildingTime)
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
index f50859051..dded3aef0 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByOrigin/ErrorsByOrigin.tsx
@@ -17,6 +17,7 @@ function ErrorsByOrigin(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
@@ -49,4 +50,4 @@ function ErrorsByOrigin(props: Props) {
     );
 }
 
-export default ErrorsByOrigin;
\ No newline at end of file
+export default ErrorsByOrigin;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
index 8d01941c8..f3d4a6f0b 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsByType/ErrorsByType.tsx
@@ -16,6 +16,7 @@ function ErrorsByType(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
@@ -48,4 +49,4 @@ function ErrorsByType(props: Props) {
     );
 }
 
-export default ErrorsByType;
\ No newline at end of file
+export default ErrorsByType;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
index fab8ced65..d58effb2b 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ErrorsPerDomain/ErrorsPerDomain.tsx
@@ -17,6 +17,7 @@ function ErrorsPerDomain(props: Props) {
           size="small"
           show={ metric.data.chart.length === 0 }
           style={{ height: '240px'}}
+          title="No recordings found"
         >
           <div className="w-full" style={{ height: '240px' }}>
             {metric.data.chart.map((item, i) => 
@@ -34,4 +35,4 @@ function ErrorsPerDomain(props: Props) {
     );
 }
 
-export default ErrorsPerDomain;
\ No newline at end of file
+export default ErrorsPerDomain;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
index e246d3c3f..baea7156d 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/FPS/FPS.tsx
@@ -19,6 +19,7 @@ function FPS(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
         >
           <>
@@ -57,4 +58,4 @@ function FPS(props: Props) {
     );
 }
 
-export default FPS;
\ No newline at end of file
+export default FPS;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
index 80e1f4d9c..4889f05f7 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/MemoryConsumption/MemoryConsumption.tsx
@@ -22,6 +22,7 @@ function MemoryConsumption(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
+          title="No recordings found"
         >
           <>
             <div className="flex items-center justify-end mb-3">
@@ -60,4 +61,4 @@ function MemoryConsumption(props: Props) {
     );
 }
 
-export default MemoryConsumption;
\ No newline at end of file
+export default MemoryConsumption;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
index 4bd0c2b52..74ae4c997 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.tsx
@@ -17,6 +17,7 @@ function ResourceLoadedVsResponseEnd(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
+          title="No recordings found"
         >
           <ResponsiveContainer height={ 246 } width="100%">
             <ComposedChart
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
index 7c76489a6..7ff396d6f 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.tsx
@@ -18,6 +18,7 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
+          title="No recordings found"
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <ComposedChart
@@ -69,4 +70,4 @@ function ResourceLoadedVsVisuallyComplete(props: Props) {
     );
 }
 
-export default ResourceLoadedVsVisuallyComplete;
\ No newline at end of file
+export default ResourceLoadedVsVisuallyComplete;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
index 905c347f2..fdba24ed5 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResourceLoadingTime/ResourceLoadingTime.tsx
@@ -53,6 +53,7 @@ function ResourceLoadingTime(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
+          title="No recordings found"
         >
           <>
             <div className="flex items-center mb-3">
@@ -119,4 +120,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(ResourceLoadingTime)
\ No newline at end of file
+})(ResourceLoadingTime)
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
index 0d6587386..6ed001ff1 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTime/ResponseTime.tsx
@@ -34,6 +34,7 @@ function ResponseTime(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
         >
           <>
@@ -88,4 +89,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(ResponseTime)
\ No newline at end of file
+})(ResponseTime)
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
index 5190157ae..8021b9f7d 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/ResponseTimeDistribution/ResponseTimeDistribution.tsx
@@ -49,6 +49,7 @@ function ResponseTimeDistribution(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
         >
@@ -125,4 +126,4 @@ function ResponseTimeDistribution(props: Props) {
     );
 }
 
-export default ResponseTimeDistribution;
\ No newline at end of file
+export default ResponseTimeDistribution;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
index 55434e2a9..495ac5126 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.tsx
@@ -15,6 +15,7 @@ function SessionsAffectedByJSErrors(props: Props) {
     const { data, metric } = props;
     return (
         <NoContent
+          title="No recordings found"
           size="small"
           show={ metric.data.chart.length === 0 }
           style={ { height: '240px' } }
@@ -44,4 +45,4 @@ function SessionsAffectedByJSErrors(props: Props) {
     );
 }
 
-export default SessionsAffectedByJSErrors;
\ No newline at end of file
+export default SessionsAffectedByJSErrors;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
index 70202ea56..12098a162 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.tsx
@@ -18,6 +18,7 @@ function SessionsImpactedBySlowRequests(props: Props) {
 
     return (
         <NoContent
+        title="No recordings found"
           size="small"
           show={ metric.data.chart.length === 0 }
         >
@@ -52,4 +53,4 @@ function SessionsImpactedBySlowRequests(props: Props) {
     );
 }
 
-export default SessionsImpactedBySlowRequests;
\ No newline at end of file
+export default SessionsImpactedBySlowRequests;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
index 6b155364d..48db4f67c 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SessionsPerBrowser/SessionsPerBrowser.tsx
@@ -19,6 +19,7 @@ function SessionsPerBrowser(props: Props) {
     return (
         <NoContent
           size="small"
+          title="No recordings found"
           show={ metric.data.chart.length === 0 }
         >
           <div className="w-full" style={{ height: '240px' }}>
@@ -38,4 +39,4 @@ function SessionsPerBrowser(props: Props) {
     );
 }
 
-export default SessionsPerBrowser;
\ No newline at end of file
+export default SessionsPerBrowser;
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
index c6adbeff6..1291305ed 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SlowestDomains/SlowestDomains.tsx
@@ -16,6 +16,7 @@ function SlowestDomains(props: Props) {
           size="small"
           show={ metric.data.chart.length === 0 }
           style={{ maxHeight: '240px' }}
+          title="No recordings found"
         >
           <div className="w-full" style={{ height: '240px' }}>
             {metric.data.chart.map((item, i) => 
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
index e87a66b24..6661623c2 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/SpeedIndexByLocation/SpeedIndexByLocation.tsx
@@ -63,7 +63,7 @@ function SpeedIndexByLocation(props: Props) {
     };
 
     return (
-        <NoContent size="small" show={false} style={{ height: '240px' }}>
+        <NoContent size="small" show={false} style={{ height: '240px' }} title="No recordings found">
             <div className="absolute right-0 mr-4 top=0 w-full flex justify-end">
                 <AvgLabel text="Avg" count={Math.round(metric.data.value)} unit="ms" />
             </div>
diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
index 7fceb853d..94334ee5d 100644
--- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
+++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/TimeToRender/TimeToRender.tsx
@@ -35,6 +35,7 @@ function TimeToRender(props: Props) {
         <NoContent
           size="small"
           show={ metric.data.chart.length === 0 }
+          title="No recordings found"
         >
           <>
             <div className="flex items-center mb-3">
@@ -88,4 +89,4 @@ export default withRequest({
 	requestName: "fetchOptions",
 	endpoint: '/dashboard/' + toUnderscore(WIDGET_KEY) + '/search',
 	method: 'GET'
-})(TimeToRender)
\ No newline at end of file
+})(TimeToRender)
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
index c30375aa7..d04a5cef5 100644
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
+++ b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsResponseEnd/ResourceLoadedVsResponseEnd.js
@@ -28,6 +28,7 @@ export default class ResourceLoadedVsResponseEnd extends React.PureComponent {
         <NoContent
           size="small"
           show={ data.chart.length === 0 }
+          title="No recordings found"
         >
           <ResponsiveContainer height={ 247 } width="100%">
             <ComposedChart
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js
index d883964a3..b56d6fed3 100644
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js
+++ b/frontend/app/components/Dashboard/Widgets/ResourceLoadedVsVisuallyComplete/ResourceLoadedVsVisuallyComplete.js
@@ -29,6 +29,7 @@ export default class ResourceLoadedVsVisuallyComplete extends React.PureComponen
       <Loader loading={ loading } size="small">
         <NoContent
           size="small"
+          title="No recordings found"
           show={ data.size === 0 }
         >
           <ResponsiveContainer height={ 240 } width="100%">
diff --git a/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js b/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js
index 262312f1b..8f95a3479 100644
--- a/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js
+++ b/frontend/app/components/Dashboard/Widgets/ResourceLoadingTime/ResourceLoadingTime.js
@@ -66,6 +66,7 @@ export default class ResourceLoadingTime extends React.PureComponent {
       <NoContent
         size="small"
         show={ data.chart.length === 0 }
+        title="No recordings found"
       >
         <React.Fragment>
           <div className="flex items-center mb-3">
@@ -96,6 +97,7 @@ export default class ResourceLoadingTime extends React.PureComponent {
             <NoContent
               size="small"
               show={ data.chart.size === 0 }
+              title="No recordings found"
             >
               <ResponsiveContainer height={ 200 } width="100%">
                 <AreaChart
diff --git a/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js b/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js
index 549c20f14..5bd400d37 100644
--- a/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js
+++ b/frontend/app/components/Dashboard/Widgets/ResponseTime/ResponseTime.js
@@ -60,6 +60,7 @@ export default class ResponseTime extends React.PureComponent {
           <NoContent
             size="small"
             show={ data.chart.size === 0 }
+            title="No recordings found"
           >
             <ResponsiveContainer height={ 207 } width="100%">
               <AreaChart
diff --git a/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js b/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js
index 242dc0932..ea4762fb1 100644
--- a/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js
+++ b/frontend/app/components/Dashboard/Widgets/ResponseTimeDistribution/ResponseTimeDistribution.js
@@ -60,6 +60,7 @@ export default class ResponseTimeDistribution extends React.PureComponent {
         <NoContent
           size="small"
           show={ data.chart.length === 0 }
+          title="No recordings found"
         >
           <div className="flex items-center justify-end mb-3">
             <AvgLabel text="Avg" unit="ms" className="ml-3" count={data.avg} />
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js b/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js
index 747247872..057122195 100644
--- a/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js
+++ b/frontend/app/components/Dashboard/Widgets/SessionsAffectedByJSErrors/SessionsAffectedByJSErrors.js
@@ -36,6 +36,7 @@ export default class SessionsAffectedByJSErrors extends React.PureComponent {
           <NoContent
             size="small"
             show={ data.chart.length === 0 }
+            title="No recordings found"
           >
             <ResponsiveContainer height={ 207 } width="100%">
               <ComposedChart
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js b/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js
index e46ad6df1..af321c1c0 100644
--- a/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js
+++ b/frontend/app/components/Dashboard/Widgets/SessionsImpactedBySlowRequests/SessionsImpactedBySlowRequests.js
@@ -28,6 +28,7 @@ export default class SessionsImpactedBySlowRequests extends React.PureComponent
         <NoContent
           size="small"
           show={ data.chart.length === 0 }
+          title="No recordings found"
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <AreaChart
diff --git a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js b/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js
index 960715a8a..3179f64da 100644
--- a/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js
+++ b/frontend/app/components/Dashboard/Widgets/SessionsPerBrowser/SessionsPerBrowser.js
@@ -22,6 +22,7 @@ export default class SessionsPerBrowser extends React.PureComponent {
         <NoContent
           size="small"
           show={ data.chart.size === 0 }
+          title="No recordings found"
         >          
           <div className="w-full pt-3" style={{ height: '240px' }}>
             {data.chart.map((item, i) => 
@@ -40,4 +41,4 @@ export default class SessionsPerBrowser extends React.PureComponent {
       </Loader>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js b/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js
index b31b93891..9f85ae412 100644
--- a/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestDomains/SlowestDomains.js
@@ -16,6 +16,7 @@ export default class ResponseTime extends React.PureComponent {
         <NoContent
           size="small"
           show={ data.partition && data.partition.size === 0 }
+          title="No recordings found"
         >          
           <div className="w-full pt-3" style={{ height: '240px' }}>
             {data.partition && data.partition.map((item, i) => 
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js b/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
index 87cf5478f..7bfc0cfd9 100644
--- a/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestImages/SlowestImages.js
@@ -41,6 +41,7 @@ export default class SlowestImages extends React.PureComponent {
         <NoContent
           size="small"
           show={ images.size === 0 }
+          title="No recordings found"
         >
           <Table
             cols={ cols }
diff --git a/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js b/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
index 7ae632f67..4de486e49 100644
--- a/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
+++ b/frontend/app/components/Dashboard/Widgets/SlowestResources/SlowestResources.js
@@ -87,6 +87,7 @@ export default class SlowestResources extends React.PureComponent {
           <NoContent
             size="small"
             show={ data.size === 0 }
+            title="No recordings found"
           >
             <Table cols={ cols } rows={ data } isTemplate={isTemplate} rowClass="group" compare={compare} />
           </NoContent>
diff --git a/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js b/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js
index 956174cba..1ac489588 100644
--- a/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js
+++ b/frontend/app/components/Dashboard/Widgets/TimeToRender/TimeToRender.js
@@ -59,6 +59,7 @@ export default class TimeToRender extends React.PureComponent {
           <NoContent
             size="small"
             show={ data.chart.length === 0 }
+            title="No recordings found"
           >
             <ResponsiveContainer height={ 200 } width="100%">
               <AreaChart
diff --git a/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js b/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js
index e300ce0a9..23537e0f7 100644
--- a/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js
+++ b/frontend/app/components/Dashboard/Widgets/TopDomains/TopDomains.js
@@ -24,6 +24,7 @@ export default class TopDomains extends React.PureComponent {
         <NoContent
           size="small"
           show={ data.chart.length === 0 }
+          title="No recordings found"
         >
           <ResponsiveContainer height={ 240 } width="100%">
             <LineChart
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
new file mode 100644
index 000000000..4a0049df3
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
@@ -0,0 +1,62 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { NoContent, Pagination, Icon } from 'UI';
+import { useStore } from 'App/mstore';
+import { filterList } from 'App/utils';
+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;
+
+    React.useEffect(() => {
+      setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']))
+    }, [dashboardsSearch])
+    
+    const list = dashboardsSearch !== '' ? shownDashboards : dashboards;
+    const lenth = list.length;
+
+    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="mt-3 text-xl">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">
+                  <div className="col-span-8">Title</div>
+                  <div  className="col-span-2">Visibility</div>
+                  <div className="col-span-2 text-right">Created</div>
+                </div>
+
+                {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/DashboardList/DashboardListItem.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
new file mode 100644
index 000000000..61aeb15b9
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Icon } from 'UI';
+import { connect } from 'react-redux';
+import { IDashboard } from 'App/mstore/types/dashboard';
+import { checkForRecent } from 'App/date';
+import { withSiteId, dashboardSelected } from 'App/routes';
+import { useStore } from 'App/mstore';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+
+interface Props extends RouteComponentProps {
+    dashboard: IDashboard;
+    siteId: string;
+}
+
+function DashboardListItem(props: Props) {
+    const { dashboard, siteId, history } = props;
+    const { dashboardStore } = useStore();
+
+    const onItemClick = () => {
+        dashboardStore.selectDashboardById(dashboard.dashboardId);
+        const path = withSiteId(dashboardSelected(dashboard.dashboardId), siteId);
+        history.push(path);
+    };
+    return (
+        <div className="hover:bg-active-blue cursor-pointer" onClick={onItemClick}>
+            <div className="grid grid-cols-12 py-4 border-t select-none">
+                <div className="col-span-8 flex items-start">
+                    <div className="flex items-center capitalize-first">
+                        <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
+                            <Icon name="columns-gap" size="16" color="tealx" />
+                        </div>
+                        <div className="color-blue capitalize-first">{dashboard.name}</div>
+                    </div>
+                </div>
+                {/* <div><Label className="capitalize">{metric.metricType}</Label></div> */}
+                <div className="col-span-2">
+                    <div className="flex items-center">
+                        <Icon name={dashboard.isPublic ? 'user-friends' : 'person-fill'} className="mr-2" />
+                        <span>{dashboard.isPublic ? 'Team' : 'Private'}</span>
+                    </div>
+                </div>
+                <div className="col-span-2 text-right">{checkForRecent(dashboard.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>
+            </div>
+            {dashboard.description ? <div className="text-disabled-text px-4 pb-2">{dashboard.description}</div> : null}
+        </div>
+    );
+}
+// @ts-ignore
+export default connect((state) => ({ siteId: state.getIn(['site', 'siteId']) }))(withRouter(DashboardListItem));
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx
new file mode 100644
index 000000000..a3b13f1d3
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx
@@ -0,0 +1,36 @@
+import React, { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import { Icon } from 'UI';
+import { debounce } from 'App/utils';
+
+let debounceUpdate: any = () => {}
+
+function DashboardSearch() {
+    const { dashboardStore } = useStore();
+    const [query, setQuery] = useState(dashboardStore.dashboardsSearch);
+    useEffect(() => {
+        debounceUpdate = debounce((key: string, value: any) => dashboardStore.updateKey(key, value), 500);
+    }, [])
+
+    // @ts-ignore
+    const write = ({ target: { value } }) => {
+        setQuery(value);
+        debounceUpdate('dashboardsSearch', value);
+    }
+    
+    return (
+        <div className="relative">
+            <Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
+            <input
+                value={query}
+                name="dashboardsSearch"
+                className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
+                placeholder="Filter by title or description"
+                onChange={write}
+            />
+        </div>
+    );
+}
+
+export default observer(DashboardSearch);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
new file mode 100644
index 000000000..c9b98a745
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardsView.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button, PageTitle, Icon } from 'UI';
+import withPageTitle from 'HOCs/withPageTitle';
+import { useStore } from 'App/mstore';
+import { withSiteId } from 'App/routes';
+
+import DashboardList from './DashboardList';
+import DashboardSearch from './DashboardSearch';
+
+function DashboardsView({ history, siteId }: { history: any, siteId: string }) {
+    const { dashboardStore } = useStore();
+
+    const onAddDashboardClick = () => {
+        dashboardStore.initDashboard();
+        dashboardStore
+        .save(dashboardStore.dashboardInstance)
+        .then(async (syncedDashboard) => {
+          dashboardStore.selectDashboardById(syncedDashboard.dashboardId);
+          history.push(withSiteId(`/dashboard/${syncedDashboard.dashboardId}`, siteId))
+        })
+    }
+
+    return (
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 px-6 border">
+            <div className="flex items-center mb-4 justify-between">
+                <div className="flex items-baseline mr-3">
+                    <PageTitle title="Dashboards" />
+                </div>
+                <Button variant="primary" onClick={onAddDashboardClick}>Create Dashboard</Button>
+                <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
+                    <DashboardSearch />
+                </div>
+            </div>
+            <div className="text-base text-disabled-text flex items-center">
+                <Icon name="info-circle-fill" className="mr-2" size={16} />
+                A dashboard is a custom visualization using your OpenReplay data.
+            </div>
+            <DashboardList />
+        </div>
+    );
+}
+
+export default withPageTitle('Dashboards - OpenReplay')(DashboardsView);
diff --git a/frontend/app/components/Dashboard/components/DashboardList/index.ts b/frontend/app/components/Dashboard/components/DashboardList/index.ts
new file mode 100644
index 000000000..61e485dc9
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardList/index.ts
@@ -0,0 +1 @@
+export { default } from './DashboardsView';
diff --git a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
index d612efe0b..cca7c51c1 100644
--- a/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
@@ -6,9 +6,16 @@ import cn from 'classnames';
 import { useStore } from 'App/mstore';
 import { Loader } from 'UI';
 
-function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }) {
+interface IWiProps {
+    category: Record<string, any>
+    onClick: (category: Record<string, any>) => void
+    isSelected: boolean
+    selectedWidgetIds: string[]
+}
+
+export function WidgetCategoryItem({ category, isSelected, onClick, selectedWidgetIds }: IWiProps) {
     const selectedCategoryWidgetsCount = useObserver(() => {
-        return category.widgets.filter(widget => selectedWidgetIds.includes(widget.metricId)).length;
+        return category.widgets.filter((widget: any) => selectedWidgetIds.includes(widget.metricId)).length;
     });
     return (
         <div
diff --git a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
index 8976483e2..421a936bb 100644
--- a/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardModal/DashboardModal.tsx
@@ -3,23 +3,22 @@ import { useObserver } from 'mobx-react-lite';
 import DashboardMetricSelection from '../DashboardMetricSelection';
 import DashboardForm from '../DashboardForm';
 import { Button } from 'UI';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { useStore } from 'App/mstore';
 import { useModal } from 'App/components/Modal';
-import { dashboardMetricCreate, withSiteId, dashboardSelected } from 'App/routes';
+import { dashboardMetricCreate, withSiteId } from 'App/routes';
 
-interface Props {
+interface Props extends RouteComponentProps {
     history: any
     siteId?: string
     dashboardId?: string
     onMetricAdd?: () => void;
 }
-function DashboardModal(props) {
+function DashboardModal(props: Props) {
     const { history, siteId, dashboardId } = props;
     const { dashboardStore } = useStore();
     const selectedWidgetsCount = useObserver(() => dashboardStore.selectedWidgets.length);
     const { hideModal } = useModal();
-    const loadingTemplates = useObserver(() => dashboardStore.loadingTemplates);
     const dashboard = useObserver(() => dashboardStore.dashboardInstance);
     const loading = useObserver(() => dashboardStore.isSaving);
 
diff --git a/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx b/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
index 4df856619..f18415f27 100644
--- a/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Switch, Route } from 'react-router';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import {
     metrics,
@@ -16,19 +16,20 @@ import DashboardView from '../DashboardView';
 import MetricsView from '../MetricsView';
 import WidgetView from '../WidgetView';
 import WidgetSubDetailsView from '../WidgetSubDetailsView';
+import DashboardsView from '../DashboardList';
 
-function DashboardViewSelected({ siteId, dashboardId }) {
+function DashboardViewSelected({ siteId, dashboardId }: { siteId: string, dashboardId: string }) {
     return (
         <DashboardView siteId={siteId} dashboardId={dashboardId} />
     )
 }
 
-interface Props {
-    history: any
+interface Props extends RouteComponentProps {
     match: any
 }
 function DashboardRouter(props: Props) {
-    const { match: { params: { siteId, dashboardId, metricId } } } = props;
+    const { match: { params: { siteId, dashboardId } }, history } = props;
+
     return (
         <div>
             <Switch>
@@ -44,8 +45,8 @@ function DashboardRouter(props: Props) {
                     <WidgetSubDetailsView siteId={siteId} {...props} />
                 </Route>
 
-                <Route exact strict path={withSiteId(dashboard(), siteId)}>
-                    <DashboardView siteId={siteId} dashboardId={dashboardId} />
+                <Route exact path={withSiteId(dashboard(), siteId)}>
+                    <DashboardsView siteId={siteId} history={history} /> 
                 </Route>
 
                 <Route exact strict path={withSiteId(dashboardMetricDetails(dashboardId), siteId)}>
diff --git a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
index 00b462bbd..2c4a4091e 100644
--- a/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
@@ -1,113 +1,40 @@
-//@ts-nocheck
-import { useObserver } from 'mobx-react-lite';
 import React from 'react';
-import { SideMenuitem, SideMenuHeader, Icon, Popup, Button } from 'UI';
-import { useStore } from 'App/mstore';
-import { withRouter } from 'react-router-dom';
-import { withSiteId, dashboardSelected, metrics } from 'App/routes';
-import { useModal } from 'App/components/Modal';
-import DashbaordListModal from '../DashbaordListModal';
-import DashboardModal from '../DashboardModal';
-import cn from 'classnames';
+import { SideMenuitem, SideMenuHeader } from 'UI';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { withSiteId, metrics, dashboard } from 'App/routes';
 import { connect } from 'react-redux';
 import { compose } from 'redux'
 import { setShowAlerts } from 'Duck/dashboard';
-// import stl from 'Shared/MainSearchBar/mainSearchBar.module.css';
 
-const SHOW_COUNT = 8;
-
-interface Props {
+interface Props extends RouteComponentProps {
     siteId: string
     history: any
     setShowAlerts: (show: boolean) => void
 }
-function DashboardSideMenu(props: RouteComponentProps<Props>) {
+function DashboardSideMenu(props: Props) {
     const { history, siteId, setShowAlerts } = props;
-    const { hideModal, showModal } = useModal();
-    const { dashboardStore } = useStore();
-    const dashboardId = useObserver(() => dashboardStore.selectedDashboard?.dashboardId);
-    const dashboardsPicked = useObserver(() => dashboardStore.dashboards.slice(0, SHOW_COUNT));
-    const remainingDashboardsCount = dashboardStore.dashboards.length - SHOW_COUNT;
     const isMetric = history.location.pathname.includes('metrics');
+    const isDashboards = history.location.pathname.includes('dashboard');
 
-    const redirect = (path) => {
+    const redirect = (path: string) => {
         history.push(path);
     }
 
-    const onItemClick = (dashboard) => {
-        dashboardStore.selectDashboardById(dashboard.dashboardId);
-        const path = withSiteId(dashboardSelected(dashboard.dashboardId), parseInt(siteId));
-        history.push(path);
-    };
-
-    const onAddDashboardClick = (e) => {
-        dashboardStore.initDashboard();
-        showModal(<DashboardModal siteId={siteId} />, { right: true })
-    }
-
-    const togglePinned = (dashboard, e) => {
-        e.stopPropagation();
-        dashboardStore.updatePinned(dashboard.dashboardId);
-    }
-
-    return useObserver(() => (
+    return (
         <div>
             <SideMenuHeader
                 className="mb-4 flex items-center"
-                text="DASHBOARDS"
-                button={
-                    <Button onClick={onAddDashboardClick} variant="text-primary">
-                        <>
-                            <Icon name="plus" size="16" color="main" />
-                            <span className="ml-1" style={{ textTransform: 'none' }}>Create</span>
-                        </>
-                    </Button>
-                }
+                text="Preferences"
             />
-            {dashboardsPicked.map((item: any) => (
-                <SideMenuitem
-                    key={ item.dashboardId }
-                    active={item.dashboardId === dashboardId && !isMetric}
-                    title={ item.name }
-                    iconName={ item.icon }
-                    onClick={() => onItemClick(item)}
-                    className="group"
-                    leading = {(
-                        <div className="ml-2 flex items-center cursor-default">
-                            {item.isPublic && (
-                                <Popup delay={500} content="Visible to the team" hideOnClick>
-                                    <div className="p-1"><Icon name="user-friends" color="gray-light" size="16" /></div>
-                                </Popup>
-                            )}
-                            {item.isPinned && <div className="p-1 pointer-events-none"><Icon name="pin-fill" size="16" /></div>}
-                            {!item.isPinned && (
-                                <Popup
-                                    delay={500}
-                                    content="Set as default dashboard"
-                                    hideOnClick={true}
-                                >
-                                    <div
-                                        className={cn("p-1 invisible group-hover:visible cursor-pointer")}
-                                        onClick={(e) => togglePinned(item, e)}
-                                    >
-                                        <Icon name="pin-fill" size="16" color="gray-light" />
-                                    </div>
-                                </Popup>
-                            )}
-                        </div>
-                    )}
-                />
-            ))}
-            <div>
-                {remainingDashboardsCount > 0 && (
-                    <div
-                        className="my-2 py-2 color-teal cursor-pointer"
-                        onClick={() => showModal(<DashbaordListModal siteId={siteId} />, {})}
-                    >
-                        {remainingDashboardsCount} More
-                    </div>
-                )}
-            </div>
+            <div className="w-full">
+				<SideMenuitem
+                    active={isDashboards}
+					id="menu-manage-alerts"
+					title="Dashboards"
+					iconName="columns-gap"
+					onClick={() => redirect(withSiteId(dashboard(), siteId))}
+				/>
+			</div>
             <div className="border-t w-full my-2" />
             <div className="w-full">
 				<SideMenuitem
@@ -128,10 +55,10 @@ function DashboardSideMenu(props: RouteComponentProps<Props>) {
 				/>
 			</div>
         </div>
-    ));
+    );
 }
 
 export default compose(
     withRouter,
     connect(null, { setShowAlerts }),
-)(DashboardSideMenu) as React.FunctionComponent<RouteComponentProps<Props>>
+)(DashboardSideMenu)
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css
new file mode 100644
index 000000000..42045607f
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.module.css
@@ -0,0 +1,5 @@
+.tooltipContainer {
+  & > tippy-popper > tippy-tooltip {
+    padding: 0!important;
+  }
+}
diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index 108d961a5..df8e198d8 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -1,22 +1,23 @@
-import React, { useEffect } from "react";
-import { observer } from "mobx-react-lite";
-import { useStore } from "App/mstore";
-import { Button, PageTitle, Loader, NoContent } from "UI";
-import { withSiteId } from "App/routes";
-import withModal from "App/components/Modal/withModal";
-import DashboardWidgetGrid from "../DashboardWidgetGrid";
-import { confirm } from "UI";
-import { withRouter, RouteComponentProps } from "react-router-dom";
-import { useModal } from "App/components/Modal";
-import DashboardModal from "../DashboardModal";
-import DashboardEditModal from "../DashboardEditModal";
-import AlertFormModal from "App/components/Alerts/AlertFormModal";
-import withPageTitle from "HOCs/withPageTitle";
-import withReport from "App/components/hocs/withReport";
-import DashboardOptions from "../DashboardOptions";
-import SelectDateRange from "Shared/SelectDateRange";
-import DashboardIcon from "../../../../svg/dashboard-icn.svg";
-import { Tooltip } from "react-tippy";
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStore } from 'App/mstore';
+import { Button, PageTitle, Loader } from 'UI';
+import { withSiteId } from 'App/routes';
+import withModal from 'App/components/Modal/withModal';
+import DashboardWidgetGrid from '../DashboardWidgetGrid';
+import { confirm } from 'UI';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { useModal } from 'App/components/Modal';
+import DashboardModal from '../DashboardModal';
+import DashboardEditModal from '../DashboardEditModal';
+import AlertFormModal from 'App/components/Alerts/AlertFormModal';
+import withPageTitle from 'HOCs/withPageTitle';
+import withReport from 'App/components/hocs/withReport';
+import DashboardOptions from '../DashboardOptions';
+import SelectDateRange from 'Shared/SelectDateRange';
+import { Tooltip } from 'react-tippy';
+import Breadcrumb from 'Shared/Breadcrumb';
+import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
 
 interface IProps {
     siteId: string;
@@ -29,63 +30,53 @@ type Props = IProps & RouteComponentProps;
 function DashboardView(props: Props) {
     const { siteId, dashboardId } = props;
     const { dashboardStore } = useStore();
+    const { showModal } = useModal();
+
     const [focusTitle, setFocusedInput] = React.useState(true);
     const [showEditModal, setShowEditModal] = React.useState(false);
-    const { showModal } = useModal();
 
     const showAlertModal = dashboardStore.showAlertModal;
     const loading = dashboardStore.fetchingDashboard;
-    const dashboards = dashboardStore.dashboards;
     const dashboard: any = dashboardStore.selectedDashboard;
     const period = dashboardStore.period;
 
     const queryParams = new URLSearchParams(props.location.search);
 
+    const trimQuery = () => {
+        if (!queryParams.has('modal')) return;
+        queryParams.delete('modal');
+        props.history.replace({
+            search: queryParams.toString(),
+        });
+    };
+    const pushQuery = () => {
+        if (!queryParams.has('modal')) props.history.push('?modal=addMetric');
+    };
+
+    useEffect(() => {
+        if (queryParams.has('modal')) {
+            onAddWidgets();
+            trimQuery();
+        }
+    }, []);
+
+    useEffect(() => {
+        const isExists = dashboardStore.getDashboardById(dashboardId);
+        if (!isExists) {
+            props.history.push(withSiteId(`/dashboard`, siteId));
+        }
+    }, [dashboardId]);
+
     useEffect(() => {
         if (!dashboard || !dashboard.dashboardId) return;
         dashboardStore.fetch(dashboard.dashboardId);
     }, [dashboard]);
 
-    const trimQuery = () => {
-        if (!queryParams.has("modal")) return;
-        queryParams.delete("modal");
-        props.history.replace({
-            search: queryParams.toString(),
-        });
-    };
-    const pushQuery = () => {
-        if (!queryParams.has("modal")) props.history.push("?modal=addMetric");
-    };
-
-    useEffect(() => {
-        if (!dashboardId || (!dashboard && dashboardStore.dashboards.length > 0)) dashboardStore.selectDefaultDashboard();
-
-        if (queryParams.has("modal")) {
-            onAddWidgets();
-            trimQuery();
-        }
-    }, []);
-    useEffect(() => {
-        dashboardStore.selectDefaultDashboard();
-    }, [siteId])
-
     const onAddWidgets = () => {
         dashboardStore.initDashboard(dashboard);
-        showModal(
-            <DashboardModal
-                siteId={siteId}
-                onMetricAdd={pushQuery}
-                dashboardId={dashboardId}
-            />,
-            { right: true }
-        );
+        showModal(<DashboardModal siteId={siteId} onMetricAdd={pushQuery} dashboardId={dashboardId} />, { right: true });
     };
 
-    const onAddDashboardClick = () => {
-        dashboardStore.initDashboard();
-        showModal(<DashboardModal siteId={siteId} />, { right: true })
-    }
-
     const onEdit = (isTitle: boolean) => {
         dashboardStore.initDashboard(dashboard);
         setFocusedInput(isTitle);
@@ -95,141 +86,99 @@ function DashboardView(props: Props) {
     const onDelete = async () => {
         if (
             await confirm({
-                header: "Confirm",
-                confirmButton: "Yes, delete",
+                header: 'Confirm',
+                confirmButton: 'Yes, delete',
                 confirmation: `Are you sure you want to permanently delete this Dashboard?`,
             })
         ) {
             dashboardStore.deleteDashboard(dashboard).then(() => {
-                dashboardStore.selectDefaultDashboard().then(
-                    ({ dashboardId }) => {
-                        props.history.push(
-                            withSiteId(`/dashboard/${dashboardId}`, siteId)
-                        );
-                    },
-                    () => {
-                        props.history.push(withSiteId("/dashboard", siteId));
-                    }
-                );
+                props.history.push(withSiteId(`/dashboard`, siteId));
             });
         }
     };
 
+    if (!dashboard) return null;
+
     return (
         <Loader loading={loading}>
-            <NoContent
-                show={
-                    dashboards.length === 0 ||
-                    !dashboard ||
-                    !dashboard.dashboardId
-                }
-                title={
-                    <div className="flex items-center justify-center flex-col">
-                        <object
-                            style={{ width: "180px" }}
-                            type="image/svg+xml"
-                            data={DashboardIcon}
-                            className="no-result-icon"
-                        />
-                        <span>
-                            Gather and analyze <br /> important metrics in one
-                            place.
-                        </span>
-                    </div>
-                }
-                size="small"
-                subtext={
-                    <Button
-                        variant="primary"
-                        size="small"
-                        onClick={onAddDashboardClick}
-                    >
-                        + Create Dashboard
-                    </Button>
-                }
-            >
-                <div style={{ maxWidth: "1300px", margin: "auto" }}>
-                    <DashboardEditModal
-                        show={showEditModal}
-                        closeHandler={() => setShowEditModal(false)}
-                        focusTitle={focusTitle}
-                    />
-                    <div className="flex items-center mb-4 justify-between">
-                        <div className="flex items-center" style={{ flex: 3 }}>
-                            <PageTitle
+            <div style={{ maxWidth: '1300px', margin: 'auto' }}>
+                <DashboardEditModal show={showEditModal} closeHandler={() => setShowEditModal(false)} focusTitle={focusTitle} />
+                <Breadcrumb
+                    items={[
+                        {
+                            label: 'Dashboards',
+                            to: withSiteId('/dashboard', siteId),
+                        },
+                        { label: (dashboard && dashboard.name) || '' },
+                    ]}
+                />
+                <div className="flex items-center mb-2 justify-between">
+                    <div className="flex items-center" style={{ flex: 3 }}>
+                        <PageTitle
+                            title={
                                 // @ts-ignore
-                                title={
-                                    <Tooltip
-                                        delay={100}
-                                        arrow
-                                        title="Double click to rename"
+                                <Tooltip delay={100} arrow title="Double click to rename">
+                                    {dashboard?.name}
+                                </Tooltip>
+                            }
+                            onDoubleClick={() => onEdit(true)}
+                            className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
+                            actionButton={
+                                    /* @ts-ignore */
+                                    <Tooltip 
+                                        interactive
+                                        useContext
+                                        // @ts-ignore
+                                        theme="nopadding"
+                                        animation="none"
+                                        hideDelay={200}
+                                        duration={0}
+                                        distance={20}
+                                        html={<div style={{ padding: 0 }}><AddMetricContainer isPopup siteId={siteId} /></div>}
                                     >
-                                        {dashboard?.name}
+                                        <Button variant="primary">
+                                            Add Metric
+                                        </Button>
                                     </Tooltip>
-                                }
-                                onDoubleClick={() => onEdit(true)}
-                                className="mr-3 select-none hover:border-dotted hover:border-b border-gray-medium cursor-pointer"
-                                actionButton={
-                                    <Button
-                                        variant="primary"
-                                        onClick={onAddWidgets}
-                                    >
-                                        Add Metric
-                                    </Button>
-                                }
+                            }
+                        />
+                    </div>
+                    <div className="flex items-center" style={{ flex: 1, justifyContent: 'end' }}>
+                        <div className="flex items-center flex-shrink-0 justify-end" style={{ width: '300px' }}>
+                            <SelectDateRange
+                                style={{ width: '300px' }}
+                                period={period}
+                                onChange={(period: any) => dashboardStore.setPeriod(period)}
+                                right={true}
                             />
                         </div>
-                        <div
-                            className="flex items-center"
-                            style={{ flex: 1, justifyContent: "end" }}
-                        >
-                            <div
-                                className="flex items-center flex-shrink-0 justify-end"
-                                style={{ width: "300px" }}
-                            >
-                                <SelectDateRange
-                                    style={{ width: "300px" }}
-                                    period={period}
-                                    onChange={(period: any) =>
-                                        dashboardStore.setPeriod(period)
-                                    }
-                                    right={true}
-                                />
-                            </div>
-                            <div className="mx-4" />
-                            <div className="flex items-center flex-shrink-0">
-                                <DashboardOptions
-                                    editHandler={onEdit}
-                                    deleteHandler={onDelete}
-                                    renderReport={props.renderReport}
-                                    isTitlePresent={!!dashboard?.description}
-                                />
-                            </div>
+                        <div className="mx-4" />
+                        <div className="flex items-center flex-shrink-0">
+                            <DashboardOptions
+                                editHandler={onEdit}
+                                deleteHandler={onDelete}
+                                renderReport={props.renderReport}
+                                isTitlePresent={!!dashboard?.description}
+                            />
                         </div>
                     </div>
-                    <div>
-                        <h2 className="my-4 font-normal color-gray-dark">
-                            {dashboard?.description}
-                        </h2>
-                    </div>
-                    <DashboardWidgetGrid
-                        siteId={siteId}
-                        dashboardId={dashboardId}
-                        onEditHandler={onAddWidgets}
-                        id="report"
-                    />
-                    <AlertFormModal
-                        showModal={showAlertModal}
-                        onClose={() =>
-                            dashboardStore.updateKey("showAlertModal", false)
-                        }
-                    />
                 </div>
-            </NoContent>
+                <div className="pb-4">
+                    {/* @ts-ignore */}
+                    <Tooltip delay={100} arrow title="Double click to rename" className='w-fit !block'>
+                        <h2
+                            className="my-2 font-normal w-fit text-disabled-text border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
+                            onDoubleClick={() => onEdit(false)}
+                        >
+                            {dashboard?.description || 'Describe the purpose of this dashboard'}
+                        </h2>
+                    </Tooltip>
+                </div>
+                <DashboardWidgetGrid siteId={siteId} dashboardId={dashboardId} onEditHandler={onAddWidgets} id="report" />
+                <AlertFormModal showModal={showAlertModal} onClose={() => dashboardStore.updateKey('showAlertModal', false)} />
+            </div>
         </Loader>
     );
 }
 
-export default withPageTitle("Dashboards - OpenReplay")(
-    withReport(withRouter(withModal(observer(DashboardView))))
-);
+export default withPageTitle('Dashboards - OpenReplay')(withReport(withRouter(withModal(observer(DashboardView)))));
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx
new file mode 100644
index 000000000..481ce70c2
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetric.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Button } from 'UI';
+import WidgetWrapper from 'App/components/Dashboard/components/WidgetWrapper';
+import { useStore } from 'App/mstore';
+import { useModal } from 'App/components/Modal';
+import { dashboardMetricCreate, withSiteId } from 'App/routes';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+
+interface IProps extends RouteComponentProps {
+    metrics: any[];
+    siteId: string;
+    title: string;
+    description: string;
+}
+
+function AddMetric({ metrics, history, siteId, title, description }: IProps) {
+    const { dashboardStore } = useStore();
+    const { hideModal } = useModal();
+
+    const dashboard = dashboardStore.selectedDashboard;
+    const selectedWidgetIds = dashboardStore.selectedWidgets.map((widget: any) => widget.metricId);
+    const queryParams = new URLSearchParams(location.search);
+
+    const onSave = () => {
+        if (selectedWidgetIds.length === 0) return;
+        dashboardStore
+            .save(dashboard)
+            .then(async (syncedDashboard) => {
+                if (dashboard.exists()) {
+                    await dashboardStore.fetch(dashboard.dashboardId);
+                }
+                dashboardStore.selectDashboardById(syncedDashboard.dashboardId);
+            })
+            .then(hideModal);
+    };
+
+    const onCreateNew = () => {
+        const path = withSiteId(dashboardMetricCreate(dashboard.dashboardId), siteId);
+        if (!queryParams.has('modal')) history.push('?modal=addMetric');
+        history.push(path);
+        hideModal();
+    };
+
+    return (
+        <div style={{ maxWidth: '85vw', width: 1200 }}>
+            <div className="border-l shadow h-screen" style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%' }}>
+                <div className="mb-6 pt-8 px-8 flex items-start justify-between">
+                    <div className="flex flex-col">
+                        <h1 className="text-2xl">{title}</h1>
+                        <div className="text-disabled-text">{description}</div>
+                    </div>
+                   
+                    <Button variant="text-primary" className="font-medium ml-2" onClick={onCreateNew}>
+                        + Create new
+                    </Button>
+                    
+                </div>
+
+                <div className="grid h-full grid-cols-4 gap-4 px-8 items-start py-1" style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', gridAutoRows: 'max-content' }}>
+                    {metrics ? metrics.map((metric: any) => (
+                        <WidgetWrapper
+                            key={metric.metricId}
+                            widget={metric}
+                            active={selectedWidgetIds.includes(metric.metricId)}
+                            isTemplate={true}
+                            isWidget={metric.metricType === 'predefined'}
+                            onClick={() => dashboardStore.toggleWidgetSelection(metric)}
+                        />
+                    )) : (
+                        <div>No custom metrics created.</div>
+                    )}
+                </div>
+
+                <div className="py-4 border-t px-8 bg-white w-full flex items-center justify-between">
+                    <div>
+                        {'Selected '}
+                        <span className="font-semibold">{selectedWidgetIds.length}</span>
+                        {' out of '}
+                        <span className="font-semibold">{metrics.length}</span>
+                    </div>
+                    <Button variant="primary" disabled={selectedWidgetIds.length === 0} onClick={onSave}>
+                        Add Selected
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default withRouter(observer(AddMetric));
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx
new file mode 100644
index 000000000..c13c27763
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddMetricContainer.tsx
@@ -0,0 +1,109 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Icon } from 'UI';
+import { useModal } from 'App/components/Modal';
+import { useStore } from 'App/mstore';
+import AddMetric from './AddMetric';
+import AddPredefinedMetric from './AddPredefinedMetric';
+import cn from 'classnames';
+
+interface AddMetricButtonProps {
+    iconName: string;
+    title: string;
+    description: string;
+    isPremade?: boolean;
+    isPopup?: boolean;
+    onClick: () => void;
+}
+
+function AddMetricButton({ iconName, title, description, onClick, isPremade, isPopup }: AddMetricButtonProps) {
+    return (
+        <div
+            onClick={onClick}
+            className={cn(
+                'flex items-center hover:bg-gray-lightest hover:!border-gray-light group rounded border cursor-pointer',
+                isPremade ? 'bg-figmaColors-primary-outlined-hover-background' : 'bg-figmaColors-secondary-outlined-hover-background',
+                isPopup ? 'p-4 z-50' : 'px-4 py-8 flex-col'
+            )}
+            style={{ borderColor: 'rgb(238, 238, 238)' }}
+        >
+            <div
+                className={cn(
+                    'p-6 my-3 rounded-full group-hover:bg-gray-light',
+                    isPremade
+                        ? 'bg-figmaColors-primary-outlined-hover-background fill-figmaColors-accent-secondary group-hover:!bg-figmaColors-accent-secondary group-hover:!fill-white'
+                        : 'bg-figmaColors-secondary-outlined-hover-background fill-figmaColors-secondary-outlined-resting-border group-hover:!bg-teal group-hover:!fill-white'
+                )}
+            >
+                <Icon name={iconName} size={26} style={{ fill: 'inherit' }} />
+            </div>
+            <div className={isPopup ? 'flex flex-col text-left ml-4' : 'flex flex-col text-center items-center'}>
+                <div className="font-bold text-base text-figmaColors-text-primary">{title}</div>
+                <div className={cn('text-disabled-test text-figmaColors-text-primary text-base', isPopup ? 'w-full' : 'mt-2 w-2/3 text-center')}>
+                    {description}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function AddMetricContainer({ siteId, isPopup }: any) {
+    const { showModal } = useModal();
+    const [categories, setCategories] = React.useState<Record<string, any>[]>([]);
+    const { dashboardStore } = useStore();
+
+    React.useEffect(() => {
+        dashboardStore?.fetchTemplates(true).then((cats) => setCategories(cats));
+    }, []);
+
+    const onAddCustomMetrics = () => {
+        dashboardStore.initDashboard(dashboardStore.selectedDashboard);
+        showModal(
+            <AddMetric
+                siteId={siteId}
+                title="Custom Metrics"
+                description="Metrics that are manually created by you or your team."
+                metrics={categories.find((category) => category.name === 'custom')?.widgets}
+            />,
+            { right: true }
+        );
+    };
+
+    const onAddPredefinedMetrics = () => {
+        dashboardStore.initDashboard(dashboardStore.selectedDashboard);
+        showModal(
+            <AddPredefinedMetric
+                siteId={siteId}
+                title="Ready-Made Metrics"
+                description="Curated metrics predfined by OpenReplay."
+                categories={categories.filter((category) => category.name !== 'custom')}
+            />,
+            { right: true }
+        );
+    };
+
+    const classes = isPopup
+        ? 'bg-white border rounded p-4 grid grid-rows-2 gap-4'
+        : 'bg-white border border-dashed hover:!border-gray-medium rounded p-8 grid grid-cols-2 gap-8';
+    return (
+        <div style={{ borderColor: 'rgb(238, 238, 238)', height: isPopup ? undefined : 300 }} className={classes}>
+            <AddMetricButton
+                title="+ Add Custom Metric"
+                description="Metrics that are manually created by you or your team"
+                iconName="bar-pencil"
+                onClick={onAddCustomMetrics}
+                isPremade
+                isPopup={isPopup}
+            />
+            <AddMetricButton
+                title="+ Add Ready-Made Metric"
+                description="Curated metrics predfined by OpenReplay."
+                iconName="grid-check"
+                onClick={onAddPredefinedMetrics}
+                isPopup={isPopup}
+            />
+        </div>
+    );
+}
+
+export default observer(AddMetricContainer);
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddPredefinedMetric.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddPredefinedMetric.tsx
new file mode 100644
index 000000000..48bf85079
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/AddPredefinedMetric.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Button } from 'UI';
+import WidgetWrapper from 'App/components/Dashboard/components/WidgetWrapper';
+import { useStore } from 'App/mstore';
+import { useModal } from 'App/components/Modal';
+import { dashboardMetricCreate, withSiteId } from 'App/routes';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { WidgetCategoryItem } from 'App/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection';
+
+interface IProps extends RouteComponentProps {
+    categories: Record<string, any>[];
+    siteId: string;
+    title: string;
+    description: string;
+}
+
+function AddPredefinedMetric({ categories, history, siteId, title, description }: IProps) {
+    const { dashboardStore } = useStore();
+    const { hideModal } = useModal();
+    const [allCheck, setAllCheck] = React.useState(false);
+    const [activeCategory, setActiveCategory] = React.useState<Record<string, any>>();
+
+    const scrollContainer = React.useRef<HTMLDivElement>(null);
+
+    const dashboard = dashboardStore.selectedDashboard;
+    const selectedWidgetIds = dashboardStore.selectedWidgets.map((widget: any) => widget.metricId);
+    const queryParams = new URLSearchParams(location.search);
+    const totalMetricCount = categories.reduce((acc, category) => acc + category.widgets.length, 0);
+
+    React.useEffect(() => {
+        dashboardStore?.fetchTemplates(true).then((categories) => {
+            const defaultCategory = categories.filter((category: any) => category.name !== 'custom')[0];
+            setActiveCategory(defaultCategory);
+        });
+    }, []);
+
+    React.useEffect(() => {
+        if (scrollContainer.current) {
+            scrollContainer.current.scrollTop = 0;
+        }
+    }, [activeCategory, scrollContainer.current]);
+
+    const handleWidgetCategoryClick = (category: any) => {
+        setActiveCategory(category);
+        setAllCheck(false);
+    };
+
+    const onSave = () => {
+        if (selectedWidgetIds.length === 0) return;
+        dashboardStore
+            .save(dashboard)
+            .then(async (syncedDashboard) => {
+                if (dashboard.exists()) {
+                    await dashboardStore.fetch(dashboard.dashboardId);
+                }
+                dashboardStore.selectDashboardById(syncedDashboard.dashboardId);
+            })
+            .then(hideModal);
+    };
+
+    const onCreateNew = () => {
+        const path = withSiteId(dashboardMetricCreate(dashboard.dashboardId), siteId);
+        if (!queryParams.has('modal')) history.push('?modal=addMetric');
+        history.push(path);
+        hideModal();
+    };
+
+    const toggleAllMetrics = ({ target: { checked } }: any) => {
+        setAllCheck(checked);
+        if (checked) {
+            dashboardStore.selectWidgetsByCategory(activeCategory.name);
+        } else {
+            dashboardStore.removeSelectedWidgetByCategory(activeCategory);
+        }
+    };
+
+    return (
+        <div style={{ maxWidth: '85vw', width: 1200 }}>
+            <div className="border-l shadow h-screen" style={{ backgroundColor: '#FAFAFA', zIndex: 999, width: '100%' }}>
+                <div className="mb-6 pt-8 px-8 flex items-start justify-between">
+                    <div className="flex flex-col">
+                        <h1 className="text-2xl">{title}</h1>
+                        <div className="text-disabled-text">{description}</div>
+                    </div>
+
+                    <Button variant="text-primary" className="font-medium ml-2" onClick={onCreateNew}>
+                        + Create Custom Metric
+                    </Button>
+                </div>
+
+                <div className="flex px-8 h-full" style={{ maxHeight: 'calc(100vh - 160px)' }}>
+                    <div style={{ flex: 3 }}>
+                        <div
+                            className="grid grid-cols-1 gap-4 py-1 pr-2"
+                            style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', gridAutoRows: 'max-content' }}
+                        >
+                            {activeCategory &&
+                                categories.map((category) => (
+                                    <WidgetCategoryItem
+                                        key={category.name}
+                                        onClick={handleWidgetCategoryClick}
+                                        category={category}
+                                        isSelected={activeCategory.name === category.name}
+                                        selectedWidgetIds={selectedWidgetIds}
+                                    />
+                                ))}
+                        </div>
+                    </div>
+
+                    <div
+                        className="grid h-full grid-cols-4 gap-4 p-1 items-start"
+                        style={{ maxHeight: 'calc(100vh - 160px)', overflowY: 'auto', flex: 9, gridAutoRows: 'max-content' }}
+                    >
+                        {activeCategory &&
+                            activeCategory.widgets.map((metric: any) => (
+                                <WidgetWrapper
+                                    key={metric.metricId}
+                                    widget={metric}
+                                    active={selectedWidgetIds.includes(metric.metricId)}
+                                    isTemplate={true}
+                                    isWidget={metric.metricType === 'predefined'}
+                                    onClick={() => dashboardStore.toggleWidgetSelection(metric)}
+                                />
+                            ))}
+                    </div>
+                </div>
+
+                <div className="py-4 border-t px-8 bg-white w-full flex items-center justify-between">
+                    <div>
+                        {'Selected '}
+                        <span className="font-semibold">{selectedWidgetIds.length}</span>
+                        {' out of '}
+                        <span className="font-semibold">{totalMetricCount}</span>
+                    </div>
+                    <Button variant="primary" disabled={selectedWidgetIds.length === 0} onClick={onSave}>
+                        Add Selected
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default withRouter(observer(AddPredefinedMetric));
diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
index 442ee46e6..74c1d5c3d 100644
--- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { useStore } from 'App/mstore';
 import WidgetWrapper from '../WidgetWrapper';
-import { NoContent, Button, Loader } from 'UI';
+import { NoContent, Loader } from 'UI';
 import { useObserver } from 'mobx-react-lite';
+import AddMetricContainer from './AddMetricContainer'
 
 interface Props {
     siteId: string,
@@ -18,16 +19,14 @@ function DashboardWidgetGrid(props: Props) {
     const list: any = useObserver(() => dashboard?.widgets);
 
     return useObserver(() => (
+        // @ts-ignore
         <Loader loading={loading}>
             <NoContent
                 show={list.length === 0}
                 icon="no-metrics-chart"
-                title="No metrics added to this dashboard"
+                title={<span className="text-2xl capitalize-first text-figmaColors-text-primary">Build your dashboard</span>}
                 subtext={
-                    <div className="flex items-center justify-center flex-col">
-                        <p>Metrics helps you visualize trends from sessions captured by OpenReplay</p>
-                        <Button variant="primary" onClick={props.onEditHandler}>Add Metric</Button>
-                    </div>
+                    <div className="w-4/5 m-auto"><AddMetricContainer siteId={siteId} /></div>
                 }
             >
                 <div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
@@ -42,6 +41,7 @@ function DashboardWidgetGrid(props: Props) {
                             isWidget={true}
                         />
                     ))}
+                    <div className="col-span-2"><AddMetricContainer siteId={siteId} /></div>
                 </div>
             </NoContent>
         </Loader>
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index 492a41bd5..23bcedb2e 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -1,43 +1,16 @@
 import React from 'react';
-import { Icon, NoContent, Label, Link, Pagination, Popup } from 'UI';
-import { checkForRecent, formatDateTimeDefault, convertTimestampToUtcTimestamp } from 'App/date';
-import { getIcon } from 'react-toastify/dist/components';
+import { Icon, Link } from 'UI';
+import { checkForRecent } from 'App/date';
+import { Tooltip } from 'react-tippy'
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { withSiteId } from 'App/routes';
 
-interface Props {
+interface Props extends RouteComponentProps {
     metric: any;
-}
-
-function DashboardLink({ dashboards}: any) {
-    return (
-        dashboards.map((dashboard: any) => (
-            <React.Fragment key={dashboard.dashboardId}>
-            <Link to={`/dashboard/${dashboard.dashboardId}`}>
-                <div className="flex items-center mb-1 py-1">
-                    <div className="mr-2">
-                        <Icon name="circle-fill" size={4} color="gray-medium" />
-                    </div>
-                    <span className="link leading-4 capitalize-first">{dashboard.name}</span>
-                </div>
-            </Link>
-            </React.Fragment>
-        ))
-    );
+    siteId: string;
 }
 
 function MetricTypeIcon({ type }: any) {
-    const PopupWrapper = (props: any) => {
-        return (
-            <Popup
-                content={<div className="capitalize">{type}</div>}
-                position="top center"
-                on="hover"
-                hideOnScroll={true}
-            >
-                {props.children}
-            </Popup>
-        );
-    }
-
     const getIcon = () => {
         switch (type) {
             case 'funnel':
@@ -50,45 +23,47 @@ function MetricTypeIcon({ type }: any) {
     }
 
     return (
-        <PopupWrapper>
-            <div className="w-8 h-8 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
-                <Icon name={getIcon()} size="14" color="tealx" />
+        <Tooltip
+            html={<div className="capitalize">{type}</div>}
+            position="top"
+            arrow
+        >
+            <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
+                <Icon name={getIcon()} size="16" color="tealx" />
             </div>
-        </PopupWrapper>
+        </Tooltip>
     )
 }
 
-function MetricListItem(props: Props) {
-    const { metric } = props;
 
-    
+
+function MetricListItem(props: Props) {
+    const { metric, history, siteId } = props;
+
+    const onItemClick = () => {
+        const path = withSiteId(`/metrics/${metric.metricId}`, siteId);
+        history.push(path);
+    };
     return (
-        <div className="grid grid-cols-12 p-3 border-t select-none">
+        <div className="grid grid-cols-12 py-4 border-t select-none hover:bg-active-blue cursor-pointer" onClick={onItemClick}>
             <div className="col-span-3 flex items-start">
                 <div className="flex items-center">
-                    {/* <div className="w-8 h-8 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
-                        <Icon name={getIcon(metric.metricType)} size="14" color="tealx"  />
-                    </div> */}
                     <MetricTypeIcon type={metric.metricType} />
-                    <Link to={`/metrics/${metric.metricId}`} className="link capitalize-first">
+                    <div className="color-blue capitalize-first">
                         {metric.name}
-                    </Link>
+                    </div>
                 </div>
             </div>
-            {/* <div><Label className="capitalize">{metric.metricType}</Label></div> */}
-            <div className="col-span-2">
-                <DashboardLink dashboards={metric.dashboards} />
-            </div>
             <div className="col-span-3">{metric.owner}</div>
-            <div>
+            <div className="col-span-4">
                 <div className="flex items-center">
                     <Icon name={metric.isPublic ? "user-friends" : "person-fill"} className="mr-2" />
                     <span>{metric.isPublic ? 'Team' : 'Private'}</span>
                 </div>
             </div>
-            <div className="col-span-2">{metric.lastModified && checkForRecent(metric.lastModified, 'LLL dd, yyyy, hh:mm a')}</div>
+            <div className="col-span-2 text-right">{metric.lastModified && checkForRecent(metric.lastModified, 'LLL dd, yyyy, hh:mm a')}</div>
         </div>
     );
 }
 
-export default MetricListItem;
+export default withRouter(MetricListItem);
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index 3cc6dff40..e64026822 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -1,26 +1,24 @@
 import { useObserver } from 'mobx-react-lite';
 import React, { useEffect } from 'react';
-import { NoContent, Pagination } from 'UI';
+import { NoContent, Pagination, Icon } from 'UI';
 import { useStore } from 'App/mstore';
-import { getRE } from 'App/utils';
+import { filterList } from 'App/utils';
 import MetricListItem from '../MetricListItem';
 import { sliceListPerPage } from 'App/utils';
-import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
+import { IWidget } from 'App/mstore/types/widget';
 
-interface Props { }
-function MetricsList(props: Props) {
+function MetricsList({ siteId }: { siteId: string }) {
     const { metricStore } = useStore();
     const metrics = useObserver(() => metricStore.metrics);
     const metricsSearch = useObserver(() => metricStore.metricsSearch);
-    const filterList = (list) => {
-        const filterRE = getRE(metricsSearch, 'i');
-        let _list = list.filter(w => {
-            const dashbaordNames = w.dashboards.map(d => d.name).join(' ');
-            return filterRE.test(w.name) || filterRE.test(w.metricType) || filterRE.test(w.owner) || filterRE.test(dashbaordNames);
-        });
-        return _list
+
+    const filterByDashboard = (item: IWidget, searchRE: RegExp) => {
+        const dashboardsStr = item.dashboards.map((d: any) => d.name).join(' ')
+        return searchRE.test(dashboardsStr)
     }
-    const list: any = metricsSearch !== '' ? filterList(metrics) : metrics;
+    const list = metricsSearch !== '' 
+    ? filterList(metrics, metricsSearch, ['name', 'metricType', 'owner'], filterByDashboard) 
+    : metrics;
     const lenth = list.length;
 
     useEffect(() => {
@@ -32,29 +30,30 @@ function MetricsList(props: Props) {
             show={lenth === 0}
             title={
                 <div className="flex flex-col items-center justify-center">
-                    <AnimatedSVG name={ICONS.NO_RESULTS} size="170" />
-                    <div className="mt-6 text-2xl">No data available.</div>
+                    <Icon name="no-metrics" size={80} color="figmaColors-accent-secondary" />
+                    <div className="mt-3 text-xl">You haven't created any metrics yet</div>
                 </div>
             }   
         >
-            <div className="mt-3 border rounded bg-white">
-                <div className="grid grid-cols-12 p-3 font-medium">
-                    <div className="col-span-3">Metric</div>
-                    {/* <div>Type</div> */}
-                    <div className="col-span-2">Dashboards</div>
+            <div className="mt-3 border-b rounded bg-white">
+                <div className="grid grid-cols-12 py-2 font-medium">
+                    <div className="col-span-3">Title</div>
                     <div className="col-span-3">Owner</div>
-                    <div>Visibility</div>
-                    <div className="col-span-2">Last Modified</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} />
+                        <MetricListItem metric={metric} siteId={siteId} />
                     </React.Fragment>
                 ))}
             </div>
 
-            <div className="w-full flex items-center justify-center py-6">
+            <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)}
diff --git a/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx b/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx
index 066598c8e..cf27661d9 100644
--- a/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsSearch/MetricsSearch.tsx
@@ -12,7 +12,7 @@ function MetricsSearch(props) {
         debounceUpdate = debounce((key, value) => metricStore.updateKey(key, value), 500);
     }, [])
 
-    const write = ({ target: { name, value } }) => {
+    const write = ({ target: { value } }) => {
         setQuery(value);
         debounceUpdate('metricsSearch', value);
     }
@@ -23,7 +23,7 @@ function MetricsSearch(props) {
             <input
                 value={query}
                 name="metricsSearch"
-                className="bg-white p-2 border rounded w-full pl-10"
+                className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
                 placeholder="Filter by title, type, dashboard and owner"
                 onChange={write}
             />
@@ -31,4 +31,4 @@ function MetricsSearch(props) {
     ));
 }
 
-export default MetricsSearch;
\ No newline at end of file
+export default MetricsSearch;
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index a8c1d96c4..85cefe70d 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -9,27 +9,28 @@ import { useObserver } from 'mobx-react-lite';
 interface Props{
     siteId: number;
 }
-function MetricsView(props: Props) {
-    const { siteId } = props;
+function MetricsView({ siteId }: Props) {
     const { metricStore } = useStore();
-    const metricsCount = useObserver(() => metricStore.metrics.length);
 
     React.useEffect(() => {
         metricStore.fetchList();
     }, []);
     return useObserver(() => (
-        <div style={{ maxWidth: '1300px', margin: 'auto'}}>
+        <div style={{ maxWidth: '1300px', margin: 'auto'}} className="bg-white rounded py-4 px-6 border">
             <div className="flex items-center mb-4 justify-between">
                 <div className="flex items-baseline mr-3">
                     <PageTitle title="Metrics" className="" />
-                    <span className="text-2xl color-gray-medium ml-2">{metricsCount}</span>
                 </div>
                 <Link to={'/metrics/create'}><Button variant="primary">Create Metric</Button></Link>
-                <div className="ml-auto w-1/3">
+                <div className="ml-auto w-1/4" style={{ minWidth: 300 }}>
                     <MetricsSearch />
                 </div>
             </div>
-            <MetricsList />
+            <div className="text-base text-disabled-text flex items-center">
+                <Icon name="info-circle-fill" className="mr-2" size={16} />
+                Create custom Metrics to capture key interactions and track KPIs.
+            </div>
+            <MetricsList siteId={siteId} />
         </div>
     ));
 }
diff --git a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
index 31e73fda3..7a6df145f 100644
--- a/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx
@@ -179,7 +179,7 @@ function WidgetChart(props: Props) {
     }
     return (
         <Loader loading={loading} style={{ height: `${isOverviewWidget ? 100 : 240}px` }}>
-            {renderChart()}
+            <div style={{ minHeight: isOverviewWidget ? 100 : 240 }}>{renderChart()}</div>
         </Loader>
     );
 }
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index 88e0a59b4..685da85a5 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -1,14 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { metricTypes, metricOf, issueOptions } from 'App/constants/filterOptions';
 import { FilterKey } from 'Types/filter/filterType';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
-import { Button, Icon } from 'UI'
+import { Button, Icon, SegmentSelection } from 'UI'
 import FilterSeries from '../FilterSeries';
 import { confirm, Popup } from 'UI';
 import Select from 'Shared/Select'
 import { withSiteId, dashboardMetricDetails, metricDetails } from 'App/routes'
-import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelectionModal';
 
 interface Props {
     history: any;
@@ -16,9 +15,15 @@ interface Props {
     onDelete: () => void;
 }
 
+const metricIcons = {
+    timeseries: 'graph-up',
+    table: 'table', 
+    funnel: 'funnel',
+}
+
 function WidgetForm(props: Props) {
-    const [showDashboardSelectionModal, setShowDashboardSelectionModal] = useState(false);
-    const { history, match: { params: { siteId, dashboardId, metricId } } } = props;
+    
+    const { history, match: { params: { siteId, dashboardId } } } = props;
     const { metricStore, dashboardStore } = useStore();
     const dashboards = dashboardStore.dashboards;
     const isSaving = useObserver(() => metricStore.isSaving);
@@ -65,13 +70,15 @@ function WidgetForm(props: Props) {
         metricStore.merge(obj);
     };
 
+    const onSelect = (_: any, option: Record<string, any>) => writeOption({ value: { value: option.value }, name: option.name})
+
     const onSave = () => {
         const wasCreating = !metric.exists()
         metricStore.save(metric, dashboardId)
             .then((metric: any) => {
                 if (wasCreating) {
                     if (parseInt(dashboardId) > 0) {
-                        history.replace(withSiteId(dashboardMetricDetails(parseInt(dashboardId), metric.metricId), siteId));
+                        history.replace(withSiteId(dashboardMetricDetails(dashboardId, metric.metricId), siteId));
                     } else {
                         history.replace(withSiteId(metricDetails(metric.metricId), siteId));
                     }
@@ -94,11 +101,15 @@ function WidgetForm(props: Props) {
             <div className="form-group">
                 <label className="font-medium">Metric Type</label>
                 <div className="flex items-center">
-                    <Select
+                    <SegmentSelection 
+                        icons
+                        outline
                         name="metricType"
-                        options={metricTypes}
-                        value={metricTypes.find((i: any) => i.value === metric.metricType) || metricTypes[0]}
-                        onChange={ writeOption }
+                        className="my-3"
+                        onSelect={ onSelect }
+                        value={metricTypes.find((i) => i.value === metric.metricType) || metricTypes[0]}
+                        // @ts-ignore
+                        list={metricTypes.map((i) => ({ value: i.value, name: i.label, icon: metricIcons[i.value] }))}
                     />
 
                     {metric.metricType === 'timeseries' && (
@@ -201,31 +212,13 @@ function WidgetForm(props: Props) {
                 </Popup>
                 <div className="flex items-center">
                     {metric.exists() && (
-                        <>
-                            <Button variant="text-primary" onClick={onDelete}>
-                                <Icon name="trash" size="14" className="mr-2" color="teal"/>
-                                Delete
-                            </Button>
-                            <Button
-                                variant="text-primary"
-                                className="ml-2"
-                                onClick={() => setShowDashboardSelectionModal(true)}
-                                disabled={!canAddToDashboard}
-                            >
-                                <Icon name="columns-gap" size="14" className="mr-2" color="teal"/>
-                                Add to Dashboard
-                            </Button>
-                        </>
+                        <Button variant="text-primary" onClick={onDelete}>
+                            <Icon name="trash" size="14" className="mr-2" color="teal"/>
+                            Delete
+                        </Button>
                     )}
                 </div>
             </div>
-            { canAddToDashboard && (
-                <DashboardSelectionModal
-                    metricId={metric.metricId}
-                    show={showDashboardSelectionModal}
-                    closeHandler={() => setShowDashboardSelectionModal(false)}
-                />
-            )}
         </div>
     ));
 }
diff --git a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
index 67be4930d..d0d673df2 100644
--- a/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx
@@ -68,7 +68,12 @@ function WidgetName(props: Props) {
         <Tooltip delay={100} arrow title="Double click to rename" disabled={!canEdit}>
           <div 
             onDoubleClick={() => setEditing(true)} 
-            className={cn("text-2xl h-8 flex items-center border-transparent", canEdit && 'cursor-pointer select-none hover:border-dotted hover:border-b border-gray-medium')}
+            className={
+              cn(
+                "text-2xl h-8 flex items-center border-transparent", 
+                canEdit && 'cursor-pointer select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium'
+              )
+            }
           >
             { name }
           </div>
diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
index bde05f398..98bb11a1b 100644
--- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
@@ -2,19 +2,22 @@ import React from 'react';
 import cn from 'classnames';
 import WidgetWrapper from '../WidgetWrapper';
 import { useStore } from 'App/mstore';
-import { SegmentSelection } from 'UI';
+import { SegmentSelection, Button, Icon } from 'UI';
 import { useObserver } from 'mobx-react-lite';
-import SelectDateRange from 'Shared/SelectDateRange';
 import { FilterKey } from 'Types/filter/filterType';
 import WidgetDateRange from '../WidgetDateRange/WidgetDateRange';
 // import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period';
+import DashboardSelectionModal from '../DashboardSelectionModal/DashboardSelectionModal';
 
 interface Props {
     className?: string;
+    name: string;
 }
 function WidgetPreview(props: Props) {
+    const [showDashboardSelectionModal, setShowDashboardSelectionModal] = React.useState(false);
     const { className = '' } = props;
     const { metricStore, dashboardStore } = useStore();
+    const dashboards = dashboardStore.dashboards;
     const metric: any = useObserver(() => metricStore.instance);
     const isTimeSeries = metric.metricType === 'timeseries';
     const isTable = metric.metricType === 'table';
@@ -35,29 +38,14 @@ function WidgetPreview(props: Props) {
     //     })
     // }
 
-    const getWidgetTitle = () => {
-        if (isTimeSeries) {
-            return 'Time Series';
-        } else if (isTable) {
-            if (metric.metricOf === FilterKey.SESSIONS) {
-                // return 'Table of Sessions';
-                return <div>Sessions <span className="color-gray-medium">{metric.data.total}</span></div>;
-            } else if (metric.metricOf === FilterKey.ERRORS) {
-                // return 'Table of Errors';
-                return <div>Errors <span className="color-gray-medium">{metric.data.total}</span></div>;
-            } else {
-                return 'Table';
-            }
-        } else if (metric.metricType === 'funnel') {
-            return 'Funnel';
-        }
-    }
+    const canAddToDashboard = metric.exists() && dashboards.length > 0;
 
     return useObserver(() => (
-        <div className={cn(className)}>
-            <div className="flex items-center justify-between mb-2">
+        <>
+        <div className={cn(className, 'bg-white rounded')}>
+            <div className="flex items-center justify-between px-4 pt-2">
                 <h2 className="text-2xl">
-                    {getWidgetTitle()}
+                    {props.name}
                 </h2>
                 <div className="flex items-center">
                     {isTimeSeries && (
@@ -99,13 +87,33 @@ function WidgetPreview(props: Props) {
                     )}
                     <div className="mx-4" />
                     <WidgetDateRange />
+                    {/* add to dashboard */}
+                    {metric.exists() && (
+                        <Button
+                        variant="text-primary"
+                        className="ml-2 p-0"
+                        onClick={() => setShowDashboardSelectionModal(true)}
+                        disabled={!canAddToDashboard}
+                    > 
+                        <Icon name="columns-gap-filled" size="14" className="mr-2" color="teal"/>
+                        Add to Dashboard
+                    </Button>
+                    )}
                 </div>
             </div>
-            <div className="bg-white rounded p-4">
-                <WidgetWrapper widget={metric} isPreview={true} isWidget={false} />
+            <div className="p-4 pt-0">
+                <WidgetWrapper widget={metric} isPreview={true} isWidget={false} hideName />
             </div>
         </div>
+        { canAddToDashboard && (
+            <DashboardSelectionModal
+                metricId={metric.metricId}
+                show={showDashboardSelectionModal}
+                closeHandler={() => setShowDashboardSelectionModal(false)}
+            />
+        )}
+        </>
     ));
 }
 
-export default WidgetPreview;
\ No newline at end of file
+export default WidgetPreview;
diff --git a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
index e3de553d2..d1e10d10a 100644
--- a/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetSessions/WidgetSessions.tsx
@@ -62,7 +62,7 @@ function WidgetSessions(props: Props) {
     }, [filter.startTimestamp, filter.endTimestamp, filter.filters, depsString, metricStore.sessionsPage]);
 
     return useObserver(() => (
-        <div className={cn(className)}>
+        <div className={cn(className, "bg-white p-3 pb-0 rounded border")}>
             <div className="flex items-center justify-between">
                 <div className="flex items-baseline">
                     <h2 className="text-2xl">Sessions</h2>
@@ -80,7 +80,7 @@ function WidgetSessions(props: Props) {
                 )}
             </div>
 
-            <div className="mt-3 bg-white p-3 rounded border">
+            <div className="mt-3">
                 <Loader loading={loading}>
                     <NoContent
                         title={
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index 3ea5dda5d..3180519ac 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -109,7 +109,7 @@ function WidgetView(props: Props) {
                         {expanded && <WidgetForm onDelete={onBackHandler} {...props} />}
                     </div>
 
-                    <WidgetPreview className="mt-8" />
+                    <WidgetPreview className="mt-8" name={widget.name} />
                     {widget.metricOf !== FilterKey.SESSIONS && widget.metricOf !== FilterKey.ERRORS && (
                         <>
                             {(widget.metricType === 'table' || widget.metricType === 'timeseries') && <WidgetSessions className="mt-8" />}
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index a9b6e2046..6354af350 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -25,6 +25,7 @@ interface Props {
     history?: any
     onClick?: () => void;
     isWidget?: boolean;
+    hideName?: boolean;
 }
 function WidgetWrapper(props: Props & RouteComponentProps) {
     const { dashboardStore } = useStore();
@@ -112,7 +113,7 @@ function WidgetWrapper(props: Props & RouteComponentProps) {
                     <div
                         className={cn("p-3 pb-4 flex items-center justify-between", { "cursor-move" : !isTemplate && isWidget })}
                     >
-                        <div className="capitalize-first w-full font-medium">{widget.name}</div>
+                        {!props.hideName ? <div className="capitalize-first w-full font-medium">{widget.name}</div> : null}
                         {isWidget && (
                             <div className="flex items-center" id="no-print">
                                 {!isPredefined && isTimeSeries && (
diff --git a/frontend/app/components/Errors/Error/SideSection.js b/frontend/app/components/Errors/Error/SideSection.js
index 6c1702c78..da6e5803b 100644
--- a/frontend/app/components/Errors/Error/SideSection.js
+++ b/frontend/app/components/Errors/Error/SideSection.js
@@ -87,7 +87,7 @@ export default class SideSection extends React.PureComponent {
 					<h3 className="text-xl mb-2">Overview</h3>
 					<Trend
 						chart={ data.chart24 }
-						title="Last 24 hours"						
+						title="Past 24 hours"
 					/>
 					<div className="mb-6" />
 					<Trend
@@ -121,5 +121,3 @@ export default class SideSection extends React.PureComponent {
 		);
 	}
 }
-
-
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
index 3147b9c78..70e0d1b60 100644
--- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
+++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
@@ -30,7 +30,7 @@ function FunnelWidget(props: Props) {
     }, []);
 
     return useObserver(() => (
-        <NoContent show={!stages || stages.length === 0}>
+        <NoContent show={!stages || stages.length === 0} title="No recordings found">
             <div className="w-full">
                 { !isWidget && (
                     stages.map((filter: any, index: any) => (
diff --git a/frontend/app/components/Header/Header.js b/frontend/app/components/Header/Header.js
index 7212c35c3..49fa4937f 100644
--- a/frontend/app/components/Header/Header.js
+++ b/frontend/app/components/Header/Header.js
@@ -4,6 +4,7 @@ import { NavLink, withRouter } from 'react-router-dom';
 import cn from 'classnames';
 import { 
   sessions,
+  metrics,
   assist,
   client,
   dashboard,
@@ -27,6 +28,7 @@ import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
 
 const DASHBOARD_PATH = dashboard();
+const METRICS_PATH = metrics();
 const SESSIONS_PATH = sessions();
 const ASSIST_PATH = assist();
 const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
@@ -94,6 +96,9 @@ const Header = (props) => {
         to={ withSiteId(DASHBOARD_PATH, siteId) }
         className={ styles.nav }
         activeClassName={ styles.active }
+        isActive={ (_, location) => {
+          return location.pathname.includes(DASHBOARD_PATH) || location.pathname.includes(METRICS_PATH);
+        }}
       >         
         <span>{ 'Dashboards' }</span>
       </NavLink>
diff --git a/frontend/app/components/Header/SiteDropdown.js b/frontend/app/components/Header/SiteDropdown.js
index 87fe2a0c2..7f89eee82 100644
--- a/frontend/app/components/Header/SiteDropdown.js
+++ b/frontend/app/components/Header/SiteDropdown.js
@@ -54,7 +54,8 @@ export default class SiteDropdown extends React.PureComponent {
         this.props.clearSearchLive();
 
         mstore.initClient();
-    };
+        mstore.dashboardStore.selectDefaultDashboard();
+  }
 
     render() {
         const {
diff --git a/frontend/app/components/Session/IOSPlayer/Crashes.js b/frontend/app/components/Session/IOSPlayer/Crashes.js
index 9fe3d9ad0..015dece96 100644
--- a/frontend/app/components/Session/IOSPlayer/Crashes.js
+++ b/frontend/app/components/Session/IOSPlayer/Crashes.js
@@ -31,6 +31,7 @@ function Crashes({ player }) {
 			<PanelLayout.Body>
 				<NoContent
 		      size="small"
+					title="No recordings found"
 		      show={ filtered.length === 0}
 		    >
 		      <Autoscroll>
@@ -48,4 +49,4 @@ function Crashes({ player }) {
 	);
 }
 
-export default observer(Crashes);
\ No newline at end of file
+export default observer(Crashes);
diff --git a/frontend/app/components/Session/IOSPlayer/Logs.js b/frontend/app/components/Session/IOSPlayer/Logs.js
index 2469a7e1a..e9fe033d7 100644
--- a/frontend/app/components/Session/IOSPlayer/Logs.js
+++ b/frontend/app/components/Session/IOSPlayer/Logs.js
@@ -45,6 +45,7 @@ function Logs({ player }) {
 	      <NoContent
 	        size="small"
 	        show={ filtered.length === 0 }
+					title="No recordings found"
 	      >
 					<Autoscroll>
 						{	filtered.map(log => 
@@ -57,4 +58,4 @@ function Logs({ player }) {
 	);
 }
 
-export default observer(Logs);
\ No newline at end of file
+export default observer(Logs);
diff --git a/frontend/app/components/Session_/Exceptions/Exceptions.js b/frontend/app/components/Session_/Exceptions/Exceptions.js
index 2f3b83483..5c5e913e7 100644
--- a/frontend/app/components/Session_/Exceptions/Exceptions.js
+++ b/frontend/app/components/Session_/Exceptions/Exceptions.js
@@ -100,6 +100,7 @@ export default class Exceptions extends React.PureComponent {
             <NoContent
               size="small"
               show={ filtered.length === 0}
+              title="No recordings found"
             >
               <Autoscroll>
                 { filtered.map(e => (
@@ -118,4 +119,4 @@ export default class Exceptions extends React.PureComponent {
       </>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/components/Session_/GraphQL/GraphQL.js b/frontend/app/components/Session_/GraphQL/GraphQL.js
index fbe709fc1..4b29a497b 100644
--- a/frontend/app/components/Session_/GraphQL/GraphQL.js
+++ b/frontend/app/components/Session_/GraphQL/GraphQL.js
@@ -100,6 +100,7 @@ export default class GraphQL extends React.PureComponent {
           <BottomBlock.Content>
             <NoContent
               size="small"
+              title="No recordings found"
               show={ filteredList.length === 0}
             >
               <TimeTable
diff --git a/frontend/app/components/Session_/LongTasks/LongTasks.js b/frontend/app/components/Session_/LongTasks/LongTasks.js
index ef9a7965f..fd3b4cc17 100644
--- a/frontend/app/components/Session_/LongTasks/LongTasks.js
+++ b/frontend/app/components/Session_/LongTasks/LongTasks.js
@@ -75,6 +75,7 @@ export default class GraphQL extends React.PureComponent {
         <BottomBlock.Content>
           <NoContent
             size="small"
+            title="No recordings found"
             show={ filtered.length === 0}
           >
             <TimeTable
diff --git a/frontend/app/components/Session_/Player/Controls/Controls.js b/frontend/app/components/Session_/Player/Controls/Controls.js
index ec0fa4ab3..3409569e0 100644
--- a/frontend/app/components/Session_/Player/Controls/Controls.js
+++ b/frontend/app/components/Session_/Player/Controls/Controls.js
@@ -11,6 +11,7 @@ import {
     fullscreenOn,
     fullscreenOff,
     toggleBottomBlock,
+    changeSkipInterval,
     OVERVIEW,
     CONSOLE,
     NETWORK,
@@ -23,7 +24,7 @@ import {
     EXCEPTIONS,
     INSPECTOR,
 } from 'Duck/components/player';
-import { ReduxTime, AssistDuration } from './Time';
+import { AssistDuration } from './Time';
 import Timeline from './Timeline';
 import ControlButton from './ControlButton';
 import PlayerControls from './components/PlayerControls';
@@ -47,6 +48,16 @@ function getStorageIconName(type) {
     }
 }
 
+const SKIP_INTERVALS = {
+  2: 2e3,
+  5: 5e3,
+  10: 1e4,
+  15: 15e3,
+  20: 2e4,
+  30: 3e4,
+  60: 6e4,
+};
+
 function getStorageName(type) {
     switch (type) {
         case STORAGE_TYPES.REDUX:
@@ -107,13 +118,14 @@ function getStorageName(type) {
             showStorage: props.showStorage || !state.getIn(['components', 'player', 'hiddenHints', 'storage']),
             showStack: props.showStack || !state.getIn(['components', 'player', 'hiddenHints', 'stack']),
             closedLive: !!state.getIn(['sessions', 'errors']) || !state.getIn(['sessions', 'current', 'live']),
-        };
+        skipInterval: state.getIn(['components', 'player', 'skipInterval']),
+  };
     },
     {
         fullscreenOn,
         fullscreenOff,
         toggleBottomBlock,
-    }
+    changeSkipInterval,}
 )
 export default class Controls extends React.Component {
     componentDidMount() {
@@ -158,8 +170,8 @@ export default class Controls extends React.Component {
             nextProps.showExceptions !== this.props.showExceptions ||
             nextProps.exceptionsCount !== this.props.exceptionsCount ||
             nextProps.showLongtasks !== this.props.showLongtasks ||
-            nextProps.liveTimeTravel !== this.props.liveTimeTravel
-        )
+            nextProps.liveTimeTravel !== this.props.liveTimeTravel||
+        nextProps.skipInterval !== this.props.skipInterval)
             return true;
         return false;
     }
@@ -195,14 +207,14 @@ export default class Controls extends React.Component {
     };
 
     forthTenSeconds = () => {
-        const { time, endTime, jump } = this.props;
-        jump(Math.min(endTime, time + 1e4));
+        const { time, endTime, jump, skipInterval } = this.props;
+        jump(Math.min(endTime, time + SKIP_INTERVALS[skipInterval]));
     };
 
     backTenSeconds = () => {
         //shouldComponentUpdate
-        const { time, jump } = this.props;
-        jump(Math.max(0, time - 1e4));
+        const { time, jump, skipInterval } = this.props;
+        jump(Math.max(0, time - SKIP_INTERVALS[skipInterval]));
     };
 
     goLive = () => this.props.jump(this.props.endTime);
@@ -275,7 +287,9 @@ export default class Controls extends React.Component {
             toggleSpeed,
             toggleSkip,
             liveTimeTravel,
-        } = this.props;
+        changeSkipInterval,
+      skipInterval,
+    } = this.props;
 
         const toggleBottomTools = (blockName) => {
             if (blockName === INSPECTOR) {
@@ -308,7 +322,10 @@ export default class Controls extends React.Component {
                                         toggleSkip={toggleSkip}
                                         playButton={this.renderPlayBtn()}
                                         controlIcon={this.controlIcon}
-                                    />
+                                    ref={this.speedRef}
+                  skipIntervals={SKIP_INTERVALS}
+                  setSkipInterval={changeSkipInterval}
+                  currentInterval={skipInterval}/>
                                     {/* <Button variant="text" onClick={() => toggleBottomTools(OVERVIEW)}>X-RAY</Button> */}
                                     <div className={cn('h-14 border-r bg-gray-light mx-6')} />
                                     <XRayButton isActive={bottomBlock === OVERVIEW && !inspectorMode} onClick={() => toggleBottomTools(OVERVIEW)} />
diff --git a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
index 5b07012df..9f813ce93 100644
--- a/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx
@@ -7,66 +7,164 @@ import cn from 'classnames';
 import styles from '../controls.module.css';
 
 interface Props {
-    live: boolean;
-    skip: boolean;
-    speed: number;
-    disabled: boolean;
-    playButton: JSX.Element;
-    backTenSeconds: () => void;
-    forthTenSeconds: () => void;
-    toggleSpeed: () => void;
-    toggleSkip: () => void;
-    controlIcon: (icon: string, size: number, action: () => void, isBackwards: boolean, additionalClasses: string) => JSX.Element;
+  live: boolean;
+  skip: boolean;
+  speed: number;
+  disabled: boolean;
+  playButton: JSX.Element;
+  skipIntervals: Record<number, number>;
+  currentInterval: number;
+  setSkipInterval: (interval: number) => void;
+  backTenSeconds: () => void;
+  forthTenSeconds: () => void;
+  toggleSpeed: () => void;
+  toggleSkip: () => void;
+  controlIcon: (
+    icon: string,
+    size: number,
+    action: () => void,
+    isBackwards: boolean,
+    additionalClasses: string
+  ) => JSX.Element;
 }
 
 function PlayerControls(props: Props) {
-    const { live, skip, speed, disabled, playButton, backTenSeconds, forthTenSeconds, toggleSpeed, toggleSkip, controlIcon } = props;
-    return (
-        <div className="flex items-center">
-            {playButton}
-            {!live && (
-                <div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
-                    {/* @ts-ignore */}
-                    <ReduxTime isCustom name="time" format="mm:ss" />
-                    <span className="px-1">/</span>
-                    {/* @ts-ignore */}
-                    <ReduxTime isCustom name="endTime" format="mm:ss" />
-                </div>
-            )}
+  const {
+    live,
+    skip,
+    speed,
+    disabled,
+    playButton,
+    backTenSeconds,
+    forthTenSeconds,
+    toggleSpeed,
+    toggleSkip,
+    skipIntervals,
+    setSkipInterval,
+    currentInterval,
+    controlIcon,
+  } = props;
+  const speedRef = React.useRef(null);
+  const arrowBackRef = React.useRef(null);
+  const arrowForwardRef = React.useRef(null);
 
-            <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
-                {/* @ts-ignore */}
-                <Tooltip title="Rewind 10s" delay={0} position="top">
-                    {controlIcon('skip-forward-fill', 18, backTenSeconds, true, 'hover:bg-active-blue-border color-main h-full flex items-center')}
-                </Tooltip>
-                <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">10s</div>
-                {/* @ts-ignore */}
-                <Tooltip title="Forward 10s" delay={0} position="top">
-                    {controlIcon('skip-forward-fill', 18, forthTenSeconds, false, 'hover:bg-active-blue-border color-main h-full flex items-center')}
-                </Tooltip>
-            </div>
+  React.useEffect(() => {
+    const handleKeyboard = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowRight') {
+        arrowForwardRef.current.focus();
+      }
+      if (e.key === 'ArrowLeft') {
+        arrowBackRef.current.focus();
+      }
+      if (e.key === 'ArrowDown') {
+        speedRef.current.focus();
+      }
+      if (e.key === 'ArrowUp') {
+        speedRef.current.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKeyboard);
+    return () => document.removeEventListener('keydown', handleKeyboard);
+  }, [speedRef, arrowBackRef, arrowForwardRef]);
 
-            {!live && (
-                <div className="flex items-center ml-4">
-                    {/* @ts-ignore */}
-                    <Tooltip title="Playback speed" delay={0} position="top">
-                        <button className={styles.speedButton} onClick={toggleSpeed} data-disabled={disabled}>
-                            <div>{speed + 'x'}</div>
-                        </button>
-                    </Tooltip>
-
-                    <button
-                        className={cn(styles.skipIntervalButton, { [styles.withCheckIcon]: skip, [styles.active]: skip }, 'ml-4')}
-                        onClick={toggleSkip}
-                        data-disabled={disabled}
-                    >
-                        {skip && <Icon name="check" size="24" className="mr-1" />}
-                        {'Skip Inactivity'}
-                    </button>
-                </div>
-            )}
+  return (
+    <div className="flex items-center">
+      {playButton}
+      {!live && (
+        <div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
+          {/* @ts-ignore */}
+          <ReduxTime isCustom name="time" format="mm:ss" />
+          <span className="px-1">/</span>
+          {/* @ts-ignore */}
+          <ReduxTime isCustom name="endTime" format="mm:ss" />
         </div>
-    );
+      )}
+
+      <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
+        {/* @ts-ignore */}
+        <Tooltip title="Rewind 10s" delay={0} position="top">
+          <button ref={arrowBackRef} className="h-full hover:border-active-blue-border focus:border focus:border-blue border-borderColor-transparent">
+            {controlIcon(
+              'skip-forward-fill',
+              18,
+              backTenSeconds,
+              true,
+              'hover:bg-active-blue-border color-main h-full flex items-center'
+            )}
+          </button>
+        </Tooltip>
+        <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
+          <Tooltip
+            interactive
+            // @ts-ignore
+            theme="nopadding"
+            animation="none"
+            hideDelay={200}
+            duration={0}
+            distance={20}
+            html={
+              <div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
+                <div className="font-semibold py-2 px-4 w-full text-left">
+                  Jump <span className="text-disabled-text">(Secs)</span>
+                </div>
+                {Object.keys(skipIntervals).map((interval) => (
+                  <div
+                    onClick={() => setSkipInterval(parseInt(interval, 10))}
+                    className="py-2 px-4 cursor-pointer hover:bg-active-blue border-t w-full text-left border-borderColor-gray-light-shade font-semibold"
+                  >
+                    {interval} <span className="text-disabled-text">(Secs)</span>
+                  </div>
+                ))}
+              </div>
+            }
+          >
+            {currentInterval}s
+          </Tooltip>
+        </div>
+        {/* @ts-ignore */}
+        <Tooltip title="Forward 10s" delay={0} position="top">
+          <button ref={arrowForwardRef} className="h-full hover:border-active-blue-border focus:border focus:border-blue  border-borderColor-transparent">
+            {controlIcon(
+              'skip-forward-fill',
+              18,
+              forthTenSeconds,
+              false,
+              'hover:bg-active-blue-border color-main h-full flex items-center'
+            )}
+          </button>
+        </Tooltip>
+      </div>
+
+      {!live && (
+        <div className="flex items-center mx-4">
+          {/* @ts-ignore */}
+          <Tooltip title="Control play back speed (↑↓)" delay={0} position="top">
+            <button
+              ref={speedRef}
+              className={cn(styles.speedButton, 'focus:border focus:border-blue')}
+              onClick={toggleSpeed}
+              data-disabled={disabled}
+            >
+              <div>{speed + 'x'}</div>
+            </button>
+          </Tooltip>
+
+          <button
+            className={cn(
+              styles.skipIntervalButton,
+              { [styles.withCheckIcon]: skip, [styles.active]: skip },
+              'ml-4'
+            )}
+            onClick={toggleSkip}
+            data-disabled={disabled}
+          >
+            {skip && <Icon name="check" size="24" className="mr-1" />}
+            {'Skip Inactivity'}
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default PlayerControls;
diff --git a/frontend/app/components/Session_/TimeTable/TimeTable.tsx b/frontend/app/components/Session_/TimeTable/TimeTable.tsx
index 4a6f1140e..1fe7b4711 100644
--- a/frontend/app/components/Session_/TimeTable/TimeTable.tsx
+++ b/frontend/app/components/Session_/TimeTable/TimeTable.tsx
@@ -258,7 +258,7 @@ export default class TimeTable extends React.PureComponent<Props, State> {
                     </div>
                 </div>
 
-                <NoContent size="small" show={rows.length === 0}>
+                <NoContent size="small" show={rows.length === 0} title="No recordings found">
                     <div className="relative">
                         <div className={stl.timePart} style={{ left: `${columnsSumWidth}px` }}>
                             {timeColumns.map((_, index) => (
diff --git a/frontend/app/components/shared/Breadcrumb/Breadcrumb.tsx b/frontend/app/components/shared/Breadcrumb/Breadcrumb.tsx
index 35c0ea45f..7a48dedf5 100644
--- a/frontend/app/components/shared/Breadcrumb/Breadcrumb.tsx
+++ b/frontend/app/components/shared/Breadcrumb/Breadcrumb.tsx
@@ -16,7 +16,7 @@ function Breadcrumb(props: Props) {
                     );
                 }
                 return (
-                    <div key={index} className="color-gray-darkest hover:color-teal group flex items-center">
+                    <div key={index} className="color-gray-darkest hover:text-teal group flex items-center">
                         <Link to={item.to} className="flex items-center">
                             {index === 0 && <Icon name="chevron-left" size={16} className="mr-1 group-hover:fill-teal" />}
                             <span className="capitalize-first">{item.label}</span>
diff --git a/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js b/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js
index 954566480..a6ec97c40 100644
--- a/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js
+++ b/frontend/app/components/shared/OutsideClickDetectingDiv/OutsideClickDetectingDiv.js
@@ -29,8 +29,7 @@ function handleClickOutside(e) {
 
 document.addEventListener('click', handleClickOutside);
 
-
-export default React.memo(function OutsideClickDetectingDiv({ onClickOutside, children, ...props}) {
+function OutsideClickDetectingDiv({ onClickOutside, children, ...props}) {
   const ref = useRef(null);
   useLayoutEffect(() => {
     function handleClickOutside(event) {
@@ -44,7 +43,6 @@ export default React.memo(function OutsideClickDetectingDiv({ onClickOutside, ch
   }, [ ref ]);
 
   return <div ref={ref} {...props}>{children}</div>;
-});
-
-
+}
 
+export default React.memo(OutsideClickDetectingDiv);
diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx
index d3e3acd15..eb9396682 100644
--- a/frontend/app/components/ui/Button/Button.tsx
+++ b/frontend/app/components/ui/Button/Button.tsx
@@ -8,6 +8,7 @@ interface Props {
     onClick?: () => void;
     disabled?: boolean;
     type?: 'button' | 'submit' | 'reset';
+    variant?: 'default' | 'primary' | 'text' | 'text-primary' | 'text-red' | 'outline'
     loading?: boolean;
     icon?: string;
     rounded?: boolean;
diff --git a/frontend/app/components/ui/Icon/Icon.tsx b/frontend/app/components/ui/Icon/Icon.tsx
index 745d6412d..74e91e1ed 100644
--- a/frontend/app/components/ui/Icon/Icon.tsx
+++ b/frontend/app/components/ui/Icon/Icon.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import cn from 'classnames';
-import SVG from 'UI/SVG';
+import SVG, { IconNames } from 'UI/SVG';
 import styles from './icon.module.css';
 
-interface IProps {
-  name: string
+interface IProps { 
+  name: IconNames
   size?: number | string
   height?: number
   width?: number
diff --git a/frontend/app/components/ui/NoContent/NoContent.tsx b/frontend/app/components/ui/NoContent/NoContent.tsx
index 10a7e72e7..ae26731be 100644
--- a/frontend/app/components/ui/NoContent/NoContent.tsx
+++ b/frontend/app/components/ui/NoContent/NoContent.tsx
@@ -7,7 +7,7 @@ interface Props {
     subtext?: any;
     icon?: string;
     iconSize?: number;
-    size?: number;
+    size?: string;
     show?: boolean;
     children?: any;
     image?: any;
diff --git a/frontend/app/components/ui/SVG.tsx b/frontend/app/components/ui/SVG.tsx
index d5cd23f17..1ed4ed218 100644
--- a/frontend/app/components/ui/SVG.tsx
+++ b/frontend/app/components/ui/SVG.tsx
@@ -1,8 +1,10 @@
 
 import React from 'react';
 
+export type IconNames = 'alarm-clock' | 'alarm-plus' | 'all-sessions' | 'analytics' | 'anchor' | 'arrow-alt-square-right' | 'arrow-clockwise' | 'arrow-down' | 'arrow-right-short' | 'arrow-square-left' | 'arrow-square-right' | 'arrow-up' | 'arrows-angle-extend' | 'avatar/icn_bear' | 'avatar/icn_beaver' | 'avatar/icn_bird' | 'avatar/icn_bison' | 'avatar/icn_camel' | 'avatar/icn_chameleon' | 'avatar/icn_deer' | 'avatar/icn_dog' | 'avatar/icn_dolphin' | 'avatar/icn_elephant' | 'avatar/icn_fish' | 'avatar/icn_fox' | 'avatar/icn_gorilla' | 'avatar/icn_hippo' | 'avatar/icn_horse' | 'avatar/icn_hyena' | 'avatar/icn_kangaroo' | 'avatar/icn_lemur' | 'avatar/icn_mammel' | 'avatar/icn_monkey' | 'avatar/icn_moose' | 'avatar/icn_panda' | 'avatar/icn_penguin' | 'avatar/icn_porcupine' | 'avatar/icn_quail' | 'avatar/icn_rabbit' | 'avatar/icn_rhino' | 'avatar/icn_sea_horse' | 'avatar/icn_sheep' | 'avatar/icn_snake' | 'avatar/icn_squirrel' | 'avatar/icn_tapir' | 'avatar/icn_turtle' | 'avatar/icn_vulture' | 'avatar/icn_wild1' | 'avatar/icn_wild_bore' | 'ban' | 'bar-chart-line' | 'bar-pencil' | 'bell-plus' | 'bell' | 'binoculars' | 'book' | 'browser/browser' | 'browser/chrome' | 'browser/edge' | 'browser/electron' | 'browser/facebook' | 'browser/firefox' | 'browser/ie' | 'browser/opera' | 'browser/safari' | 'bullhorn' | 'business-time' | 'calendar-alt' | 'calendar-check' | 'calendar-day' | 'calendar' | 'camera-alt' | 'camera-video-off' | 'camera-video' | 'camera' | 'caret-down-fill' | 'caret-left-fill' | 'caret-right-fill' | 'caret-up-fill' | 'chat-dots' | 'chat-square-quote' | 'check-circle' | 'check' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-fill' | 'circle' | 'clipboard-list-check' | 'clock' | 'close' | 'cloud-fog2-fill' | 'code' | 'cog' | 'cogs' | 'collection' | 'columns-gap-filled' | 'columns-gap' | 'console/error' | 'console/exception' | 'console/info' | 'console/warning' | 'console' | 'controller' | 'cookies' | 'copy' | 'credit-card-front' | 'cubes' | 'dashboard-icn' | 'desktop' | 'device' | 'diagram-3' | 'dizzy' | 'doublecheck' | 'download' | 'drag' | 'edit' | 'ellipsis-v' | 'enter' | 'envelope' | 'event/click' | 'event/clickrage' | 'event/code' | 'event/i-cursor' | 'event/input' | 'event/link' | 'event/location' | 'event/resize' | 'event/view' | 'exclamation-circle' | 'expand-wide' | 'explosion' | 'external-link-alt' | 'eye-slash-fill' | 'eye-slash' | 'eye' | 'fetch' | 'file-code' | 'file-medical-alt' | 'file' | 'filter' | 'filters/arrow-return-right' | 'filters/browser' | 'filters/click' | 'filters/clickrage' | 'filters/code' | 'filters/console' | 'filters/country' | 'filters/cpu-load' | 'filters/custom' | 'filters/device' | 'filters/dom-complete' | 'filters/duration' | 'filters/error' | 'filters/fetch-failed' | 'filters/fetch' | 'filters/file-code' | 'filters/graphql' | 'filters/i-cursor' | 'filters/input' | 'filters/lcpt' | 'filters/link' | 'filters/location' | 'filters/memory-load' | 'filters/metadata' | 'filters/os' | 'filters/perfromance-network-request' | 'filters/platform' | 'filters/referrer' | 'filters/resize' | 'filters/rev-id' | 'filters/state-action' | 'filters/ttfb' | 'filters/user-alt' | 'filters/userid' | 'filters/view' | 'flag-na' | 'fullscreen' | 'funnel/cpu-fill' | 'funnel/cpu' | 'funnel/dizzy' | 'funnel/emoji-angry-fill' | 'funnel/emoji-angry' | 'funnel/emoji-dizzy-fill' | 'funnel/exclamation-circle-fill' | 'funnel/exclamation-circle' | 'funnel/file-earmark-break-fill' | 'funnel/file-earmark-break' | 'funnel/file-earmark-minus-fill' | 'funnel/file-earmark-minus' | 'funnel/file-medical-alt' | 'funnel/file-x' | 'funnel/hdd-fill' | 'funnel/hourglass-top' | 'funnel/image-fill' | 'funnel/image' | 'funnel/microchip' | 'funnel/mouse' | 'funnel/patch-exclamation-fill' | 'funnel/sd-card' | 'funnel-fill' | 'funnel-new' | 'funnel' | 'geo-alt-fill-custom' | 'github' | 'graph-up-arrow' | 'graph-up' | 'grid-3x3' | 'grid-check' | 'grip-horizontal' | 'hash' | 'hdd-stack' | 'headset' | 'heart-rate' | 'high-engagement' | 'history' | 'hourglass-start' | 'id-card' | 'image' | 'info-circle-fill' | 'info-circle' | 'info-square' | 'info' | 'inspect' | 'integrations/assist' | 'integrations/bugsnag-text' | 'integrations/bugsnag' | 'integrations/cloudwatch-text' | 'integrations/cloudwatch' | 'integrations/datadog' | 'integrations/elasticsearch-text' | 'integrations/elasticsearch' | 'integrations/github' | 'integrations/graphql' | 'integrations/jira-text' | 'integrations/jira' | 'integrations/mobx' | 'integrations/newrelic-text' | 'integrations/newrelic' | 'integrations/ngrx' | 'integrations/openreplay-text' | 'integrations/openreplay' | 'integrations/redux' | 'integrations/rollbar-text' | 'integrations/rollbar' | 'integrations/segment' | 'integrations/sentry-text' | 'integrations/sentry' | 'integrations/slack-bw' | 'integrations/slack' | 'integrations/stackdriver' | 'integrations/sumologic-text' | 'integrations/sumologic' | 'integrations/vuejs' | 'journal-code' | 'layer-group' | 'lightbulb-on' | 'lightbulb' | 'link-45deg' | 'list-alt' | 'list-ul' | 'list' | 'lock-alt' | 'map-marker-alt' | 'memory' | 'mic-mute' | 'mic' | 'minus' | 'mobile' | 'mouse-alt' | 'next1' | 'no-dashboard' | 'no-metrics-chart' | 'no-metrics' | 'os/android' | 'os/chrome_os' | 'os/fedora' | 'os/ios' | 'os/linux' | 'os/mac_os_x' | 'os/other' | 'os/ubuntu' | 'os/windows' | 'os' | 'pause-fill' | 'pause' | 'pdf-download' | 'pencil-stop' | 'pencil' | 'percent' | 'person-fill' | 'person' | 'pie-chart-fill' | 'pin-fill' | 'play-circle-light' | 'play-circle' | 'play-fill-new' | 'play-fill' | 'play-hover' | 'play' | 'plus-circle' | 'plus' | 'prev1' | 'puzzle-piece' | 'question-circle' | 'quote-left' | 'quote-right' | 'redo-back' | 'redo' | 'remote-control' | 'replay-10' | 'safe-fill' | 'safe' | 'sandglass' | 'search' | 'search_notification' | 'server' | 'share-alt' | 'shield-lock' | 'signup' | 'skip-forward-fill' | 'skip-forward' | 'slash-circle' | 'sliders' | 'social/slack' | 'social/trello' | 'spinner' | 'star-solid' | 'star' | 'step-forward' | 'stopwatch' | 'store' | 'sync-alt' | 'table-new' | 'table' | 'tablet-android' | 'tachometer-slow' | 'tachometer-slowest' | 'tags' | 'team-funnel' | 'telephone-fill' | 'telephone' | 'text-paragraph' | 'tools' | 'trash' | 'turtle' | 'user-alt' | 'user-circle' | 'user-friends' | 'users' | 'vendors/graphql' | 'vendors/mobx' | 'vendors/ngrx' | 'vendors/redux' | 'vendors/vuex' | 'wifi' | 'window-alt' | 'window-restore' | 'window-x' | 'window' | 'zoom-in';
+
 interface Props {
-    name: string;
+    name: IconNames;
     size?: number | string;
     width?: number | string;
     height?: number | string;
@@ -64,6 +66,7 @@ const SVG = (props: Props) => {
     case 'avatar/icn_wild_bore': return <svg viewBox="0 0 100 100"  width={ `${ width }px` } height={ `${ height }px` } ><path d="M92.9 46.6c-1.5-.5-3.1.3-3.6 1.8-.5 1.6-1.5 2.6-3.1 3.1l-1.4-1.9-.8-7.4c-.4-3.8-2.9-7.1-6.3-8.6l-2.4-1.1c-1.2-2.7-3.1-7.1-5.9-8.2-2.7-1.1-4.9.8-6.3 3.4-4.8-1.1-9.8-.9-14.6.7-4.2 1.4-5.9 1.1-17.9 1.1-6.2 0-11.9 3.4-15 8.7-6.7 4-10.1 9.4-10.2 9.6-1.2 1.9.2 4.3 2.4 4.3.9 0 1.8-.5 2.4-1.3 0 0 1.1-1.7 3.2-3.8 0 2.2.4 3.5 1.2 6.8l-5.9 5.9c-.5.5-.8 1.2-.8 2v11.2c0 1.6 1.3 2.8 2.8 2.8h2.8c1.6 0 2.8-1.3 2.8-2.8s-1.3-2.8-2.8-2.8v-1.5c11.4-3 12.5-3.4 14.4-4.6 0 0-.1-.2 3.4 5.1l-.7 1.4c-.7 1.4-.1 3.1 1.3 3.8 1.4.7 3.1.1 3.8-1.3l1.4-2.8c.5-.9.4-2-.2-2.8L32 60.1c.2-.2.3-.5.5-.7 4.9 4 11 6.6 17.3 5.9l-1 2.6c-.3.7-.2.7-.2 5.3 0 1.6 1.3 2.8 2.8 2.8h2.8c1.6 0 2.8-1.3 2.8-2.8s-1.3-2.8-2.8-2.8v-.9l2-5c.2.1-.8-.6 2.6 2l2.5 7.6c.4 1.1 1.5 1.9 2.7 1.9h1.4c1.6 0 2.8-1.3 2.8-2.8 0-1.3-.9-2.4-2.2-2.7l-2-6.1v-1.6c.8.6 1.6 1.1 2.5 1.6 3.3 1.6 4.5 2.4 6.7 2.9 2.7.6 3.6.3 5.4.6 8 1.3 7.5 1.3 7.8 1.3 1 0 2-.6 2.5-1.6l2.8-5.6c.2-.4.4-1.2.2-2-.2-.6-.2-.6-2.3-3.5 2-1 4-2.9 5.1-6 .5-1.8-.3-3.4-1.8-3.9z"/></svg>;
     case 'ban': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zM103.265 408.735c-80.622-80.622-84.149-208.957-10.9-293.743l304.644 304.643c-84.804 73.264-213.138 69.706-293.744-10.9zm316.37-11.727L114.992 92.365c84.804-73.263 213.137-69.705 293.743 10.9 80.622 80.621 84.149 208.957 10.9 293.743z"/></svg>;
     case 'bar-chart-line': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z"/></svg>;
+    case 'bar-pencil': return <svg viewBox="0 0 59 66" width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)"><path d="M40.27 15.736a3.59 3.59 0 0 1 3.591-3.59h7.18a3.59 3.59 0 0 1 3.591 3.59V58.82h1.795a1.796 1.796 0 0 1 0 3.59H2.573a1.795 1.795 0 1 1 0-3.59h1.795V48.05a3.59 3.59 0 0 1 3.59-3.59h7.18a3.59 3.59 0 0 1 3.591 3.59v10.77h3.59V33.687a3.59 3.59 0 0 1 3.59-3.59h7.181a3.59 3.59 0 0 1 3.59 3.59V58.82h3.59V15.736Zm3.591 43.083h7.18V15.736h-7.18V58.82Zm-10.77 0V33.687H25.91V58.82h7.18Zm-17.952 0V48.05h-7.18v10.77h7.18Z"/></g><g clipPath="url(#b)"><path d="M28.613.335a1.145 1.145 0 0 1 1.622 0L37.11 7.21a1.146 1.146 0 0 1 0 1.622L14.193 31.749c-.11.109-.24.195-.385.252L2.35 36.584a1.147 1.147 0 0 1-1.49-1.49l4.584-11.458c.057-.144.143-.275.252-.385L28.613.335ZM26.46 5.729l5.254 5.255 2.963-2.963-5.254-5.255-2.963 2.963Zm3.634 6.875L24.84 7.35 9.945 22.245v.672h1.145a1.146 1.146 0 0 1 1.146 1.145v1.146h1.146a1.146 1.146 0 0 1 1.146 1.146V27.5h.671l14.896-14.896ZM7.726 24.464l-.243.242-3.501 8.757 8.756-3.502.243-.243a1.146 1.146 0 0 1-.745-1.072V27.5H11.09a1.146 1.146 0 0 1-1.145-1.146v-1.146H8.799a1.146 1.146 0 0 1-1.073-.744Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.778 8.556)" d="M0 0h57.444v57.444H0z"/></clipPath><clipPath id="b"><path fill="#fff" transform="translate(.778)" d="M0 0h36.667v36.667H0z"/></clipPath></defs></svg>;
     case 'bell-plus': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M224 480a32 32 0 0 1-32-32h-32a64 64 0 1 0 128 0h-32a32 32 0 0 1-32 32zm209.37-145.19c-28-26.62-49.34-54.48-49.34-148.9 0-79.6-63.37-144.5-144-152.36V16a16 16 0 0 0-32 0v17.56C127.35 41.41 64 106.31 64 185.91c0 94.4-21.41 122.28-49.35 148.9a46.47 46.47 0 0 0-11.27 51.24A47.68 47.68 0 0 0 48 416h352a47.67 47.67 0 0 0 44.62-30 46.47 46.47 0 0 0-11.25-51.19zM400 384H48c-14.22 0-21.35-16.47-11.32-26C71.54 324.8 96 287.66 96 185.91 96 118.53 153.22 64 224 64s128 54.52 128 121.91c0 101.34 24.22 138.68 59.28 172.07C421.37 367.56 414.16 384 400 384zM296 224h-56v-56a8 8 0 0 0-8-8h-16a8 8 0 0 0-8 8v56h-56a8 8 0 0 0-8 8v16a8 8 0 0 0 8 8h56v56a8 8 0 0 0 8 8h16a8 8 0 0 0 8-8v-56h56a8 8 0 0 0 8-8v-16a8 8 0 0 0-8-8z"/></svg>;
     case 'bell': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"/></svg>;
     case 'binoculars': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882V2.5zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5h-1zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5V4zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V3zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V14z"/></svg>;
@@ -111,6 +114,7 @@ const SVG = (props: Props) => {
     case 'cog': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/><path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/></svg>;
     case 'cogs': return <svg viewBox="0 0 640 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="m538.6 196.4-2.5-3.9c-4.1.3-8.1.3-12.2 0l-2.5 4c-5.8 9.2-17.1 13.4-27.5 10.1-13.8-4.3-23-8.8-34.3-18.1-9-7.4-11.2-20.3-5.4-30.4l2.5-4.3c-2.3-3.4-4.3-6.9-6.1-10.6h-9.1c-11.6 0-21.4-8.2-23.6-19.6-2.6-13.7-2.7-24.2.1-38.5 2.1-11.3 12.1-19.5 23.6-19.5h9c1.8-3.7 3.8-7.2 6.1-10.6l-2.6-4.5c-5.8-10-3.6-22.7 5.2-30.3 10.6-9.1 19.7-14.3 33.5-19 10.8-3.7 22.7.7 28.5 10.6l2.6 4.4c4.1-.3 8.1-.3 12.2 0l2.6-4.4c5.8-9.9 17.7-14.3 28.6-10.5 13.3 4.5 22.3 9.6 33.5 19.1 8.8 7.5 10.9 20.2 5.1 30.2l-2.6 4.4c2.3 3.4 4.3 6.9 6.1 10.6h5.1c11.6 0 21.4 8.2 23.6 19.6 2.6 13.7 2.7 24.2-.1 38.5-2.1 11.3-12.1 19.5-23.6 19.5h-5c-1.8 3.7-3.8 7.2-6.1 10.6l2.5 4.3c5.9 10.2 3.5 23.1-5.5 30.5-10.7 8.8-19.9 13.4-34 17.9-10.5 3.3-21.9-.8-27.7-10.1zm12.2-34.5 10.6 18.3c6.7-2.8 12.9-6.4 18.7-10.8l-10.6-18.3 6.4-7.5c4.8-5.7 8.6-12.1 11-19.1l3.3-9.3h21.1c.9-7.1.9-14.4 0-21.5h-21.1l-3.3-9.3c-2.5-7-6.2-13.4-11-19.1l-6.4-7.5L580 39.4c-5.7-4.4-12-8-18.7-10.8l-10.6 18.3-9.7-1.8c-7.3-1.4-14.8-1.4-22.1 0l-9.7 1.8-10.6-18.3C492 31.3 485.7 35 480 39.4l10.6 18.3-6.4 7.5c-4.8 5.7-8.6 12.1-11 19.1l-3.3 9.3h-21.1c-.9 7.1-.9 14.4 0 21.5h21.1l3.3 9.3c2.5 7 6.2 13.4 11 19.1l6.4 7.5-10.6 18.4c5.7 4.4 12 8 18.7 10.8l10.6-18.3 9.7 1.8c7.3 1.4 14.8 1.4 22.1 0l9.7-1.8zM145.3 454.4v-31.6c-12.9-5.5-25.1-12.6-36.4-21.1l-27.5 15.9c-9.8 5.6-22.1 3.7-29.7-4.6-24.2-26.3-38.5-49.5-50.6-88.1-3.4-10.7 1.1-22.3 10.8-28L39.2 281c-1.7-14-1.7-28.1 0-42.1l-27.3-15.8c-9.7-5.6-14.2-17.3-10.8-28 12.1-38.4 26.2-61.6 50.6-88.1 7.6-8.3 20-10.2 29.7-4.6l27.4 15.9c11.3-8.5 23.5-15.5 36.4-21.1V65.6c0-11.3 7.8-21 18.8-23.4 34.7-7.8 62-8.7 101.7 0 11 2.4 18.9 12.2 18.9 23.4v31.6c12.9 5.5 25.1 12.6 36.4 21l27.4-15.8c9.8-5.6 22.2-3.7 29.8 4.6 26.9 29.6 41.5 55.9 52.1 88.5 3.4 10.5-.8 21.9-10.2 27.7l-25 15.8c1.7 14 1.7 28.1 0 42.1l28.1 17.5c8.6 5.4 13 15.6 10.8 25.5-6.9 31.3-33 64.6-55.9 89.2-7.6 8.2-19.9 10-29.6 4.4L321 401.8c-11.3 8.5-23.5 15.5-36.4 21.1v31.6c0 11.2-7.8 21-18.8 23.4-37.5 8.3-64.9 8.2-101.9 0-10.8-2.5-18.6-12.3-18.6-23.5zm32-6.2c24.8 5 50.5 5 75.3 0v-47.7l10.7-3.8c16.8-5.9 32.3-14.9 45.9-26.5l8.6-7.4 41.4 23.9c16.8-19.1 34-41.3 42.1-65.2l-41.4-23.9 2.1-11.1c3.2-17.6 3.2-35.5 0-53.1l-2.1-11.1 41.4-23.9c-8.1-23.9-25.3-46.2-42.1-65.2l-41.4 23.9-8.6-7.4c-13.6-11.7-29-20.6-45.9-26.5l-10.7-3.8V71.8c-24.8-5-50.5-5-75.3 0v47.7l-10.7 3.8c-16.8 5.9-32.3 14.9-45.9 26.5l-8.6 7.4-41.4-23.9A192.19 192.19 0 0 0 33 198.5l41.4 23.9-2.1 11.1c-3.2 17.6-3.2 35.5 0 53.1l2.1 11.1L33 321.6c8.1 23.9 20.9 46.2 37.7 65.2l41.4-23.9 8.6 7.4c13.6 11.7 29 20.6 45.9 26.5l10.7 3.8v47.6zm38.4-105.3c-45.7 0-82.9-37.2-82.9-82.9s37.2-82.9 82.9-82.9 82.9 37.2 82.9 82.9-37.2 82.9-82.9 82.9zm0-133.8c-28 0-50.9 22.8-50.9 50.9s22.8 50.9 50.9 50.9c28 0 50.9-22.8 50.9-50.9s-22.8-50.9-50.9-50.9zm322.9 291.7-2.5-3.9c-4.1.3-8.1.3-12.2 0l-2.5 4c-5.8 9.2-17.1 13.4-27.5 10.1-13.8-4.3-23-8.8-34.3-18.1-9-7.4-11.2-20.3-5.4-30.4l2.5-4.3c-2.3-3.4-4.3-6.9-6.1-10.6h-9.1c-11.6 0-21.4-8.2-23.6-19.6-2.6-13.7-2.7-24.2.1-38.5 2.1-11.3 12.1-19.5 23.6-19.5h9c1.8-3.7 3.8-7.2 6.1-10.6l-2.6-4.5c-5.8-10-3.6-22.7 5.2-30.3 10.6-9.1 19.7-14.3 33.5-19 10.8-3.7 22.7.7 28.5 10.6l2.6 4.4c4.1-.3 8.1-.3 12.2 0l2.6-4.4c5.8-9.9 17.7-14.3 28.6-10.5 13.3 4.5 22.3 9.6 33.5 19.1 8.8 7.5 10.9 20.2 5.1 30.2l-2.6 4.4c2.3 3.4 4.3 6.9 6.1 10.6h5.1c11.6 0 21.4 8.2 23.6 19.6 2.6 13.7 2.7 24.2-.1 38.5-2.1 11.3-12.1 19.5-23.6 19.5h-5c-1.8 3.7-3.8 7.2-6.1 10.6l2.5 4.3c5.9 10.2 3.5 23.1-5.5 30.5-10.7 8.8-19.9 13.4-34 17.9-10.5 3.2-21.9-.9-27.7-10.1zm12.2-34.6 10.6 18.3c6.7-2.8 12.9-6.4 18.7-10.8l-10.6-18.3 6.4-7.5c4.8-5.7 8.6-12.1 11-19.1l3.3-9.3h21.1c.9-7.1.9-14.4 0-21.5h-21.1l-3.3-9.3c-2.5-7-6.2-13.4-11-19.1l-6.4-7.5 10.6-18.3c-5.7-4.4-12-8-18.7-10.8l-10.6 18.3-9.7-1.8c-7.3-1.4-14.8-1.4-22.1 0l-9.7 1.8-10.6-18.3c-6.7 2.8-12.9 6.4-18.7 10.8l10.6 18.3-6.4 7.5c-4.8 5.7-8.6 12.1-11 19.1l-3.3 9.3h-21.1c-.9 7.1-.9 14.4 0 21.5h21.1l3.3 9.3c2.5 7 6.2 13.4 11 19.1l6.4 7.5-10.6 18.3c5.7 4.4 12 8 18.7 10.8l10.6-18.3 9.7 1.8c7.3 1.4 14.8 1.4 22.1 0l9.7-1.8zM560 408c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32zm0-304.3c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.4 32-32z"/></svg>;
     case 'collection': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M2.5 3.5a.5.5 0 0 1 0-1h11a.5.5 0 0 1 0 1h-11zm2-2a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM0 13a1.5 1.5 0 0 0 1.5 1.5h13A1.5 1.5 0 0 0 16 13V6a1.5 1.5 0 0 0-1.5-1.5h-13A1.5 1.5 0 0 0 0 6v7zm1.5.5A.5.5 0 0 1 1 13V6a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-13z"/></svg>;
+    case 'columns-gap-filled': return <svg viewBox="0 0 25 26" width={ `${ width }px` } height={ `${ height }px` } ><path d="M.282 14.472h10.805V.966H.282v13.506Zm0 10.804h10.805v-8.103H.282v8.103Zm13.506 0h10.805V11.771H13.788v13.505Zm0-24.31v8.103h10.805V.966H13.788Z"/></svg>;
     case 'columns-gap': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6 1v3H1V1h5zM1 0a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm14 12v3h-5v-3h5zm-5-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5zM6 8v7H1V8h5zM1 7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1H1zm14-6v7h-5V1h5zm-5-1a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1h-5z"/></svg>;
     case 'console/error': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>;
     case 'console/exception': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm16 400c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V80c0-8.822 7.178-16 16-16h352c8.822 0 16 7.178 16 16v352zm-192-92c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28zm-11.49-212h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.557 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM224 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"/></svg>;
@@ -215,11 +219,14 @@ const SVG = (props: Props) => {
     case 'funnel/patch-exclamation-fill': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>;
     case 'funnel/sd-card': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6.25 3.5a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2zm2 0a.75.75 0 0 0-1.5 0v2a.75.75 0 0 0 1.5 0v-2z"/><path d="M5.914 0H12.5A1.5 1.5 0 0 1 14 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5V3.914c0-.398.158-.78.44-1.06L4.853.439A1.5 1.5 0 0 1 5.914 0zM13 1.5a.5.5 0 0 0-.5-.5H5.914a.5.5 0 0 0-.353.146L3.146 3.561A.5.5 0 0 0 3 3.914V14.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-13z"/></svg>;
     case 'funnel-fill': return <svg width={ `${ width }px` } height={ `${ height }px` } ><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z"/></svg>;
+    case 'funnel-new': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/></svg>;
     case 'funnel': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/></svg>;
     case 'geo-alt-fill-custom': return <svg viewBox="0 0 12 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6 16s6-5.686 6-10A6 6 0 1 0 0 6c0 4.314 6 10 6 10Z"/></svg>;
     case 'github': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>;
     case 'graph-up-arrow': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z"/></svg>;
+    case 'graph-up': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/></svg>;
     case 'grid-3x3': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13zM1.5 1a.5.5 0 0 0-.5.5V5h4V1H1.5zM5 6H1v4h4V6zm1 4h4V6H6v4zm-1 1H1v3.5a.5.5 0 0 0 .5.5H5v-4zm1 0v4h4v-4H6zm5 0v4h3.5a.5.5 0 0 0 .5-.5V11h-4zm0-1h4V6h-4v4zm0-5h4V1.5a.5.5 0 0 0-.5-.5H11v4zm-1 0V1H6v4h4z"/></svg>;
+    case 'grid-check': return <svg viewBox="0 0 52 52" width={ `${ width }px` } height={ `${ height }px` } ><path d="M6.5 32.5h9.75a3.25 3.25 0 0 1 3.25 3.25v9.75a3.25 3.25 0 0 1-3.25 3.25H6.5a3.25 3.25 0 0 1-3.25-3.25v-9.75A3.25 3.25 0 0 1 6.5 32.5ZM35.75 3.25h9.75a3.25 3.25 0 0 1 3.25 3.25v9.75a3.25 3.25 0 0 1-3.25 3.25h-9.75a3.25 3.25 0 0 1-3.25-3.25V6.5a3.25 3.25 0 0 1 3.25-3.25Zm0 29.25a3.25 3.25 0 0 0-3.25 3.25v9.75a3.25 3.25 0 0 0 3.25 3.25h9.75a3.25 3.25 0 0 0 3.25-3.25v-9.75a3.25 3.25 0 0 0-3.25-3.25h-9.75Zm0-32.5a6.5 6.5 0 0 0-6.5 6.5v9.75a6.5 6.5 0 0 0 6.5 6.5h9.75a6.5 6.5 0 0 0 6.5-6.5V6.5A6.5 6.5 0 0 0 45.5 0h-9.75ZM6.5 29.25a6.5 6.5 0 0 0-6.5 6.5v9.75A6.5 6.5 0 0 0 6.5 52h9.75a6.5 6.5 0 0 0 6.5-6.5v-9.75a6.5 6.5 0 0 0-6.5-6.5H6.5Zm22.75 6.5a6.5 6.5 0 0 1 6.5-6.5h9.75a6.5 6.5 0 0 1 6.5 6.5v9.75a6.5 6.5 0 0 1-6.5 6.5h-9.75a6.5 6.5 0 0 1-6.5-6.5v-9.75ZM0 6.5A6.5 6.5 0 0 1 6.5 0h9.75a6.5 6.5 0 0 1 6.5 6.5v9.75a6.5 6.5 0 0 1-6.5 6.5H6.5a6.5 6.5 0 0 1-6.5-6.5V6.5Zm17.4 2.775a1.627 1.627 0 0 0-2.3-2.3l-5.35 5.352-2.1-2.102a1.627 1.627 0 1 0-2.3 2.3l3.25 3.25a1.625 1.625 0 0 0 2.3 0l6.5-6.5Z"/></svg>;
     case 'grip-horizontal': return <svg viewBox="0 0 448 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M424 96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zM264 96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zM104 96H24c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96H32v-64h64v64zm328 96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zm-152-96h-80c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96h-64v-64h64v64zm-152-96H24c-13.22 0-24 10.77-24 24v80c0 13.23 10.78 24 24 24h80c13.22 0 24-10.77 24-24v-80c0-13.23-10.78-24-24-24zm-8 96H32v-64h64v64z"/></svg>;
     case 'hash': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8.39 12.648a1.32 1.32 0 0 0-.015.18c0 .305.21.508.5.508.266 0 .492-.172.555-.477l.554-2.703h1.204c.421 0 .617-.234.617-.547 0-.312-.188-.53-.617-.53h-.985l.516-2.524h1.265c.43 0 .618-.227.618-.547 0-.313-.188-.524-.618-.524h-1.046l.476-2.304a1.06 1.06 0 0 0 .016-.164.51.51 0 0 0-.516-.516.54.54 0 0 0-.539.43l-.523 2.554H7.617l.477-2.304c.008-.04.015-.118.015-.164a.512.512 0 0 0-.523-.516.539.539 0 0 0-.531.43L6.53 5.484H5.414c-.43 0-.617.22-.617.532 0 .312.187.539.617.539h.906l-.515 2.523H4.609c-.421 0-.609.219-.609.531 0 .313.188.547.61.547h.976l-.516 2.492c-.008.04-.015.125-.015.18 0 .305.21.508.5.508.265 0 .492-.172.554-.477l.555-2.703h2.242l-.515 2.492zm-1-6.109h2.266l-.515 2.563H6.859l.532-2.563z"/></svg>;
     case 'hdd-stack': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h12zM2 9a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H2z"/><path d="M5 11.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zM14 3a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z"/><path d="M5 4.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0zm-2 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0z"/></svg>;
@@ -230,6 +237,7 @@ const SVG = (props: Props) => {
     case 'hourglass-start': return <svg viewBox="0 0 384 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M368 32h4c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12H12C5.373 0 0 5.373 0 12v8c0 6.627 5.373 12 12 12h4c0 91.821 44.108 193.657 129.646 224C59.832 286.441 16 388.477 16 480h-4c-6.627 0-12 5.373-12 12v8c0 6.627 5.373 12 12 12h360c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12h-4c0-91.821-44.108-193.657-129.646-224C324.168 225.559 368 123.523 368 32zM48 32h288c0 110.457-64.471 200-144 200S48 142.457 48 32zm288 448H48c0-110.457 64.471-200 144-200s144 89.543 144 200zM285.621 96H98.379a12.01 12.01 0 0 1-11.602-8.903 199.464 199.464 0 0 1-2.059-8.43C83.054 71.145 88.718 64 96.422 64h191.157c7.704 0 13.368 7.145 11.704 14.667a199.464 199.464 0 0 1-2.059 8.43A12.013 12.013 0 0 1 285.621 96zm-15.961 50.912a141.625 141.625 0 0 1-6.774 8.739c-2.301 2.738-5.671 4.348-9.248 4.348H130.362c-3.576 0-6.947-1.61-9.248-4.348a142.319 142.319 0 0 1-6.774-8.739c-5.657-7.91.088-18.912 9.813-18.912h135.694c9.725 0 15.469 11.003 9.813 18.912z"/></svg>;
     case 'id-card': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/><path d="M3 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0-5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1z"/></svg>;
     case 'image': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/><path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z"/></svg>;
+    case 'info-circle-fill': return <svg viewBox="0 0 36 36" width={ `${ width }px` } height={ `${ height }px` } ><path d="M17.75 35.5a17.75 17.75 0 1 0 0-35.5 17.75 17.75 0 0 0 0 35.5Zm2.064-20.883-2.22 10.44c-.155.754.065 1.182.675 1.182.43 0 1.08-.155 1.522-.546l-.195.923c-.637.768-2.041 1.327-3.25 1.327-1.56 0-2.224-.937-1.793-2.927l1.637-7.694c.142-.65.014-.886-.637-1.043l-1-.18.182-.845 5.08-.637h-.002Zm-2.064-2.414a2.219 2.219 0 1 1 0-4.437 2.219 2.219 0 0 1 0 4.437Z"/></svg>;
     case 'info-circle': return <svg viewBox="0 0 35 35" width={ `${ width }px` } height={ `${ height }px` } ><g clipPath="url(#a)" fill="#333"><path d="M17.5 32.813a15.313 15.313 0 1 1 0-30.626 15.313 15.313 0 0 1 0 30.625Zm0 2.187a17.5 17.5 0 1 0 0-35 17.5 17.5 0 0 0 0 35Z"/><path clipRule="evenodd" d="M17.5 13a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm1.5 2.877a1.5 1.5 0 1 0-3 0V24.5a1.5 1.5 0 0 0 3 0v-8.623Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h35v35H0z"/></clipPath></defs></svg>;
     case 'info-square': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>;
     case 'info': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>;
@@ -281,7 +289,9 @@ const SVG = (props: Props) => {
     case 'mobile': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/><path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>;
     case 'mouse-alt': return <svg viewBox="0 0 384 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M224 0h-64A160 160 0 0 0 0 160v192a160 160 0 0 0 160 160h64a160 160 0 0 0 160-160V160A160 160 0 0 0 224 0zm128 352a128.14 128.14 0 0 1-128 128h-64A128.14 128.14 0 0 1 32 352V160A128.14 128.14 0 0 1 160 32h64a128.14 128.14 0 0 1 128 128zM192 80a48.05 48.05 0 0 0-48 48v32a48 48 0 0 0 96 0v-32a48.05 48.05 0 0 0-48-48zm16 80a16 16 0 0 1-32 0v-32a16 16 0 0 1 32 0z"/></svg>;
     case 'next1': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>;
+    case 'no-dashboard': return <svg viewBox="0 0 100 100" width={ `${ width }px` } height={ `${ height }px` } ><rect width="100" height="100" rx="13.158" fill-opacity=".08"/><g clipPath="url(#a)" fill-opacity=".5"><path d="M27.417 33.333a2.083 2.083 0 1 0 0-4.166 2.083 2.083 0 0 0 0 4.166Zm8.333-2.083a2.083 2.083 0 1 1-4.167 0 2.083 2.083 0 0 1 4.167 0Zm4.167 2.083a2.083 2.083 0 1 0 0-4.166 2.083 2.083 0 0 0 0 4.166Z"/><path d="M25.333 20.833A8.333 8.333 0 0 0 17 29.167v41.666a8.334 8.334 0 0 0 8.333 8.334h50a8.333 8.333 0 0 0 8.334-8.334V29.167a8.333 8.333 0 0 0-8.334-8.334h-50ZM79.5 29.167V37.5H21.167v-8.333A4.167 4.167 0 0 1 25.333 25h50a4.167 4.167 0 0 1 4.167 4.167ZM25.333 75a4.167 4.167 0 0 1-4.166-4.167V41.667H79.5v29.166A4.167 4.167 0 0 1 75.333 75h-50Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(17 20)" d="M0 0h66.667v60H0z"/></clipPath></defs></svg>;
     case 'no-metrics-chart': return <svg viewBox="0 0 250 78" width={ `${ width }px` } height={ `${ height }px` } ><path clipRule="evenodd" d="m239.854 9.853-58.513 58.8L93.005 29.55 9.44 68.51l-.422-.906L92.995 28.45l88.122 39.01 58.029-58.314.708.706Z" fill="#C2C2C2"/><path d="M9.66 77.694c5.334 0 9.659-4.325 9.659-9.66 0-5.334-4.325-9.66-9.66-9.66C4.325 58.375 0 62.7 0 68.035c0 5.335 4.325 9.66 9.66 9.66Z" fill="#C7CCF9"/><path d="M92.985 38.907c5.334 0 9.659-4.325 9.659-9.66 0-5.334-4.325-9.659-9.66-9.659a9.66 9.66 0 0 0-9.659 9.66 9.66 9.66 0 0 0 9.66 9.66Z" fill="#B4E4E7"/><path d="M180.31 77.694c5.335 0 9.659-4.325 9.659-9.66 0-5.334-4.324-9.66-9.659-9.66-5.335 0-9.66 4.326-9.66 9.66 0 5.335 4.325 9.66 9.66 9.66Z" fill="#C7CCF9"/><path d="M239.659 19.319c5.335 0 9.66-4.325 9.66-9.66 0-5.334-4.325-9.659-9.66-9.659C234.325 0 230 4.325 230 9.66c0 5.334 4.325 9.659 9.659 9.659Z" fill="#B4E4E7"/></svg>;
+    case 'no-metrics': return <svg viewBox="0 0 100 100" width={ `${ width }px` } height={ `${ height }px` } ><rect width="100" height="100" rx="13.158" fill-opacity=".08"/><g clipPath="url(#a)" fill-opacity=".5"><path d="M36.875 65A1.875 1.875 0 0 1 35 63.125v-7.5a1.875 1.875 0 0 1 1.875-1.875h3.75a1.875 1.875 0 0 1 1.875 1.875v7.5A1.875 1.875 0 0 1 40.625 65h-3.75Zm11.25 0a1.875 1.875 0 0 1-1.875-1.875v-15a1.875 1.875 0 0 1 1.875-1.875h3.75a1.875 1.875 0 0 1 1.875 1.875v15A1.875 1.875 0 0 1 51.875 65h-3.75Zm11.25 0a1.875 1.875 0 0 1-1.875-1.875v-22.5a1.875 1.875 0 0 1 1.875-1.875h3.75A1.875 1.875 0 0 1 65 40.625v22.5A1.875 1.875 0 0 1 63.125 65h-3.75Z"/><path d="M35 20a7.5 7.5 0 0 0-7.5 7.5v45A7.5 7.5 0 0 0 35 80h30a7.5 7.5 0 0 0 7.5-7.5v-45A7.5 7.5 0 0 0 65 20H35Zm0 3.75h30a3.75 3.75 0 0 1 3.75 3.75v45A3.75 3.75 0 0 1 65 76.25H35a3.75 3.75 0 0 1-3.75-3.75v-45A3.75 3.75 0 0 1 35 23.75Z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(20 20)" d="M0 0h60v60H0z"/></clipPath></defs></svg>;
     case 'os/android': return <svg viewBox="0 0 419 519" width={ `${ width }px` } height={ `${ height }px` } ><path d="M271.926 51.66C315.852 74.373 345.991 120.142 346 172.9c0 5.033-4.077 9.1-9.1 9.1H82.1a9.097 9.097 0 0 1-9.1-9.1c0-52.767 30.148-98.537 74.074-121.24L124.351 13.79c-2.584-4.313-1.192-9.9 3.122-12.484 4.313-2.585 9.9-1.202 12.485 3.12l23.978 39.965c14.278-5.077 29.566-7.99 45.564-7.99 15.998 0 31.286 2.913 45.564 7.99l23.978-39.964a9.08 9.08 0 0 1 12.485-3.121c4.314 2.584 5.706 8.17 3.122 12.484L271.926 51.66ZM91.546 163.801h235.908C322.795 102.808 271.671 54.61 209.5 54.61c-62.171 0-113.295 48.2-117.954 109.192ZM273.993 104a6.006 6.006 0 0 1 6.007 6v12c0 3.314-2.685 6-5.998 6h-12.004a5.998 5.998 0 0 1-5.998-6v-12c0-3.314 2.685-6 5.998-6h11.995Zm-116.99 0a5.998 5.998 0 0 1 5.997 6v12c0 3.314-2.685 6-5.998 6h-12.004a5.998 5.998 0 0 1-5.998-6v-12c0-3.314 2.685-6 5.998-6h12.004ZM336.9 191c5.032 0 9.1 4.073 9.1 9.111v183.78c0 24.263-19.729 43.998-43.99 43.998H291.4v54.721c0 20.063-16.325 36.39-36.4 36.39s-36.4-16.327-36.4-36.39V427.89h-18.2v54.721c0 20.063-16.325 36.39-36.4 36.39s-36.4-16.327-36.4-36.39V427.89h-10.61c-24.252 0-43.99-19.735-43.99-43.998v-183.78c0-5.038 4.077-9.111 9.1-9.111h254.8Zm-9.1 192.891V209.222H91.2v174.67c0 14.204 11.575 25.775 25.799 25.775H136.7c5.023 0 9.1 4.072 9.1 9.11v63.833c0 10.013 8.163 18.168 18.2 18.168 10.037 0 18.2-8.146 18.2-18.168v-63.832c0-5.039 4.077-9.111 9.1-9.111h36.4c5.023 0 9.1 4.072 9.1 9.11v63.833c0 10.013 8.163 18.168 18.2 18.168 10.037 0 18.2-8.146 18.2-18.168v-63.832c0-5.039 4.077-9.111 9.1-9.111h19.71c14.224 0 25.79-11.562 25.79-25.776ZM387.5 191c17.37 0 31.5 14.298 31.5 31.87v127.26c0 17.572-14.13 31.87-31.5 31.87-17.37 0-31.5-14.298-31.5-31.87V222.87c0-17.572 14.13-31.87 31.5-31.87ZM401 350.13V222.87c0-7.54-6.057-13.68-13.5-13.68s-13.5 6.14-13.5 13.68v127.26c0 7.54 6.057 13.68 13.5 13.68s13.5-6.14 13.5-13.68ZM31.5 191c17.37 0 31.5 14.298 31.5 31.87v127.26C63 367.702 48.87 382 31.5 382 14.13 382 0 367.702 0 350.13V222.87C0 205.298 14.13 191 31.5 191ZM45 350.13V222.87c0-7.54-6.057-13.68-13.5-13.68S18 215.33 18 222.87v127.26c0 7.54 6.057 13.68 13.5 13.68S45 357.67 45 350.13Z"/></svg>;
     case 'os/chrome_os': return <svg viewBox="0 0 517 517" width={ `${ width }px` } height={ `${ height }px` } ><path d="M148.978 223c8.725-25.136 24.616-44.93 47.674-59.383 23.058-14.453 48.297-21.05 75.718-19.794L464 154.191c-20.565-41.474-50.79-73.835-90.674-97.086C337.181 36.368 298.232 26 256.478 26c-34.275 0-67.304 7.54-99.087 22.622C125.61 63.703 98.811 85.068 77 112.718L148.978 223Zm61.483-37.353c-18.07 11.327-30.15 26.373-36.92 45.879l-17.375 50.057-111.15-170.3 11.571-14.668C77 67 110.845 41.93 146.245 25.132 181.488 8.41 218.321 0 256.478 0c46.292 0 89.702 11.556 129.787 34.553l.155.09c44.282 25.814 78.05 61.971 100.874 107.998l19.794 39.92-236.01-12.77c-22.108-.994-42.08 4.237-60.617 15.856ZM179 258.5c0 21.806 7.583 40.34 22.75 55.604C216.917 329.368 235.333 337 257 337s40.083-7.632 55.25-22.896C327.417 298.84 335 280.306 335 258.5c0-21.806-7.583-40.34-22.75-55.604C297.083 187.632 278.667 180 257 180s-40.083 7.632-55.25 22.896C186.583 218.16 179 236.694 179 258.5Zm-26 0c0-28.647 10.282-53.777 30.307-73.93C203.363 164.384 228.422 154 257 154c28.578 0 53.637 10.384 73.693 30.57C350.718 204.723 361 229.853 361 258.5c0 28.647-10.282 53.777-30.307 73.93C310.637 352.616 285.578 363 257 363c-28.578 0-53.637-10.384-73.693-30.57C163.282 312.277 153 287.147 153 258.5ZM474.853 175l-129.839 6.535c17.437 20.54 26.466 44.348 27.089 71.424.623 27.075-6.539 52.128-21.484 75.157L246 489.636c46.082 2.49 89.05-7.78 128.905-30.81 33.005-19.296 59.47-44.504 79.398-75.625 19.928-31.121 31.76-65.043 35.496-101.766 3.736-36.724-1.245-72.201-14.946-106.435Zm24.14-11.66c15.26 38.132 20.834 79.828 16.672 120.726-4.149 40.78-17.341 78.602-39.466 113.155-22.164 34.616-51.648 62.698-88.172 84.05l-.113.067c-44.226 25.555-92.201 37.021-143.317 34.26-10.485-.58-18.184-1.113-23.097-1.598-5.048-.498-12.29-1.44-21.725-2.824l24.403-35.675 104.63-161.538c12.111-18.661 17.804-38.576 17.302-60.406-.486-21.128-7.342-39.204-20.917-55.195l-34.08-40.146 200.98-10.117 6.9 15.24ZM151.164 304.41 63.363 132C38.454 170.73 26 213.207 26 259.433c0 38.105 8.562 73.555 25.687 106.35 17.124 32.796 40.632 60.125 70.522 81.989 29.89 21.863 63.205 35.606 99.945 41.228L281 371.874c-26.154 4.997-51.218 1.093-75.192-11.713-23.975-12.805-42.189-31.39-54.643-55.752Zm66.892 32.818c18.76 10.02 37.782 12.983 58.063 9.108l51.778-9.894L239.5 516.5l-21.279-1.8c-40.865-6.253-78.097-21.61-111.362-45.943-33.108-24.217-59.249-54.608-78.22-90.94C9.56 341.28 0 301.698 0 259.434c0-51.208 13.886-98.568 41.495-141.497L70.5 79.5l103.824 213.092c10.042 19.637 24.454 34.338 43.733 44.636Z"/></svg>;
     case 'os/fedora': return <svg viewBox="0 0 204.7 200.9" width={ `${ width }px` } height={ `${ height }px` } ><path d="M102.7 1.987c-55.41 0-100.3 44.21-100.4 98.79h-.018v76.47H2.3c.027 12.38 10.22 22.4 22.8 22.4h77.58c55.42-.035 100.3-44.24 100.3-98.79 0-54.58-44.91-98.79-100.4-98.79zm20.39 40.68c16.85 0 32.76 12.7 32.76 30.23 0 1.625.01 3.252-.26 5.095-.467 4.662-4.794 8.012-9.505 7.355-4.711-.665-7.909-5.07-7.037-9.679.08-.526.108-1.352.108-2.772 0-9.938-8.257-13.77-16.06-13.77-7.805 0-14.84 6.462-14.85 13.77.135 8.455 0 16.84 0 25.29l14.49-.107c11.31-.23 11.44 16.54.13 16.46l-14.61.107c-.035 6.801.054 5.571.019 8.996 0 0 .122 8.318-.13 14.62-1.749 18.52-17.76 33.32-37 33.32-20.4 0-37.2-16.41-37.2-36.54.612-20.7 17.38-36.99 38.5-36.8l11.78-.087v16.43l-11.78.106h-.062c-11.6.338-21.55 8.1-21.74 20.34 0 11.15 9.148 20.08 20.5 20.08 11.34 0 20.42-8.124 20.42-20.06l-.018-62.23c.006-1.155.044-2.073.173-3.347 1.914-15.22 15.74-26.82 31.39-26.82z"/></svg>;
@@ -341,6 +351,7 @@ const SVG = (props: Props) => {
     case 'stopwatch': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5V5.6z"/><path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64a.715.715 0 0 1 .012-.013l.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354a.512.512 0 0 1-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5zM8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3z"/></svg>;
     case 'store': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M4 4v2H2V4h2zm1 7V9a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm5 5V9a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zm0-5V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1zM9 4v2H7V4h2zm5 0h-2v2h2V4zM4 9v2H2V9h2zm5 0v2H7V9h2zm5 0v2h-2V9h2zm-3-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V4zm1 4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-2z"/></svg>;
     case 'sync-alt': return <svg viewBox="0 0 512 512" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 454.06V320a24 24 0 0 1 24-24h134.06c21.38 0 32.09 25.85 17 41l-41.75 41.75A166.82 166.82 0 0 0 256.16 424c77.41-.07 144.31-53.14 162.78-126.85a12 12 0 0 1 11.65-9.15h57.31a12 12 0 0 1 11.81 14.18C478.07 417.08 377.19 504 256 504a247.14 247.14 0 0 1-171.31-68.69L49 471c-15.15 15.15-41 4.44-41-16.94z"/><path d="M12.3 209.82C33.93 94.92 134.81 8 256 8a247.14 247.14 0 0 1 171.31 68.69L463 41c15.12-15.12 41-4.41 41 17v134a24 24 0 0 1-24 24H345.94c-21.38 0-32.09-25.85-17-41l41.75-41.75A166.8 166.8 0 0 0 255.85 88c-77.46.07-144.33 53.18-162.79 126.85A12 12 0 0 1 81.41 224H24.1a12 12 0 0 1-11.8-14.18z"/></svg>;
+    case 'table-new': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/></svg>;
     case 'table': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/></svg>;
     case 'tablet-android': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M1 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4zm-1 8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8z"/><path d="M14 8a1 1 0 1 0-2 0 1 1 0 0 0 2 0z"/></svg>;
     case 'tachometer-slow': return <svg viewBox="0 0 16 16" width={ `${ width }px` } height={ `${ height }px` } ><path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/><path d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/></svg>;
diff --git a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
index dde4d6b7c..97db6cef1 100644
--- a/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
+++ b/frontend/app/components/ui/SegmentSelection/SegmentSelection.js
@@ -9,7 +9,7 @@ class SegmentSelection extends React.Component {
   }
 
   render() {
-    const { className, list, small = false, extraSmall = false, primary = false, size = "normal", icons = false, disabled = false, disabledMessage = 'Not Allowed' } = this.props;
+    const { className, list, small = false, extraSmall = false, primary = false, size = "normal", icons = false, disabled = false, disabledMessage = 'Not Allowed', outline } = this.props;
 
     return (
       <Popup
@@ -22,6 +22,7 @@ class SegmentSelection extends React.Component {
             [styles.extraSmall]  : size === 'extraSmall' || extraSmall,
             [styles.icons]  : icons === true,
             [styles.disabled] : disabled,
+            [styles.outline]: outline,
           }, className) }
         >
           { list.map(item => (
diff --git a/frontend/app/components/ui/SegmentSelection/segmentSelection.module.css b/frontend/app/components/ui/SegmentSelection/segmentSelection.module.css
index 082e675c9..eb3363658 100644
--- a/frontend/app/components/ui/SegmentSelection/segmentSelection.module.css
+++ b/frontend/app/components/ui/SegmentSelection/segmentSelection.module.css
@@ -86,4 +86,22 @@
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
-}
\ No newline at end of file
+}
+
+.outline {
+  border: none;
+  border-radius: 3px;
+  & .item {
+    padding: 10px!important;
+    font-size: 14px!important;
+    border: solid thin $gray-light!important;
+    
+    &:not(:last-child) {
+      border-right: none!important;
+    }
+
+    &[data-active=true] {
+      border: solid thin $teal!important;
+    }
+  }
+}
diff --git a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
index ffbd31cc4..c9dd32b46 100644
--- a/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
+++ b/frontend/app/components/ui/SideMenuitem/SideMenuitem.js
@@ -7,13 +7,13 @@ function SideMenuitem({
     iconBg = false,
     iconColor = "gray-dark",
     iconSize = 18,
-    className, 
+    className = '', 
     iconName = null,
     title,
     active = false,
     disabled = false,
     onClick,
-    deleteHandler,
+    deleteHandler = null,
     leading = null,
     ...props
   }) {
diff --git a/frontend/app/dateRange.js b/frontend/app/dateRange.js
index 70f674665..77f2c3d2e 100644
--- a/frontend/app/dateRange.js
+++ b/frontend/app/dateRange.js
@@ -9,7 +9,7 @@ export const CUSTOM_RANGE = "CUSTOM_RANGE";
 const DATE_RANGE_LABELS = {
     // LAST_30_MINUTES: '30 Minutes',
     // TODAY: 'Today',
-    LAST_24_HOURS: "Last 24 Hours",
+    LAST_24_HOURS: "Past 24 Hours",
     // YESTERDAY: 'Yesterday',
     LAST_7_DAYS: "Past 7 Days",
     LAST_30_DAYS: "Past 30 Days",
diff --git a/frontend/app/duck/components/player.js b/frontend/app/duck/components/player.js
index cf6263bf4..550f6e4df 100644
--- a/frontend/app/duck/components/player.js
+++ b/frontend/app/duck/components/player.js
@@ -17,6 +17,7 @@ export const OVERVIEW = 12;
 const TOGGLE_FULLSCREEN = 'player/TOGGLE_FS';
 const TOGGLE_BOTTOM_BLOCK = 'player/SET_BOTTOM_BLOCK';
 const HIDE_HINT = 'player/HIDE_HINT';
+const CHANGE_INTERVAL = 'player/CHANGE_SKIP_INTERVAL'
 
 const initialState = Map({
   fullscreen: false,
@@ -25,6 +26,7 @@ const initialState = Map({
     storage: localStorage.getItem('storageHideHint'),
     stack: localStorage.getItem('stackHideHint')
   }),
+  skipInterval: localStorage.getItem(CHANGE_INTERVAL) || 10,
 });
 
 const reducer = (state = initialState, action = {}) => {
@@ -37,6 +39,10 @@ const reducer = (state = initialState, action = {}) => {
       if (state.get('bottomBlock') !== bottomBlock && bottomBlock !== NONE) {
       }
       return state.update('bottomBlock', bb => bb === bottomBlock ? NONE : bottomBlock);
+    case CHANGE_INTERVAL:
+      const { skipInterval } = action;
+        localStorage.setItem(CHANGE_INTERVAL, skipInterval);
+        return state.update('skipInterval', () => skipInterval);
     case HIDE_HINT:
       const { name } = action;
       localStorage.setItem(`${name}HideHint`, true);
@@ -74,9 +80,16 @@ export function closeBottomBlock() {
   return toggleBottomBlock();
 }
 
+export function changeSkipInterval(skipInterval) {
+  return {
+    skipInterval,
+    type: CHANGE_INTERVAL,
+  };
+}
+
 export function hideHint(name) {
   return {
     name,
     type: HIDE_HINT,
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts
index 54fbe1972..617a54fa2 100644
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@@ -46,9 +46,14 @@ export interface IDashboardSotre {
 
     showAlertModal: boolean;
 
+    page: number
+    pageSize: number
+    dashboardsSearch: string
+    sort: any
+
     selectWidgetsByCategory: (category: string) => void;
     toggleAllSelectedWidgets: (isSelected: boolean) => void;
-    removeSelectedWidgetByCategory(category: string): void;
+    removeSelectedWidgetByCategory(category: Record<string, any>): void;
     toggleWidgetSelection(widget: IWidget): void;
 
     initDashboard(dashboard?: IDashboard): void;
@@ -67,6 +72,7 @@ export interface IDashboardSotre {
     getDashboardCount(): void;
     updateDashboard(dashboard: IDashboard): void;
     selectDashboardById(dashboardId: string): void;
+    getDashboardById(dashboardId: string): boolean;
     setSiteId(siteId: any): void;
     selectDefaultDashboard(): Promise<IDashboard>;
 
@@ -115,6 +121,12 @@ export default class DashboardStore implements IDashboardSotre {
     sessionsLoading: boolean = false;
     showAlertModal: boolean = false;
 
+    // Pagination
+    page: number = 1
+    pageSize: number = 15
+    dashboardsSearch: string = ''
+    sort: any = {}
+
     constructor() {
         makeAutoObservable(this);
 
@@ -360,6 +372,18 @@ export default class DashboardStore implements IDashboardSotre {
             new Dashboard();
     };
 
+    getDashboardById = (dashboardId: string) => {
+        const dashboard = this.dashboards.find((d) => d.dashboardId == dashboardId)
+
+        if (dashboard) {
+            this.selectedDashboard = dashboard
+            return true;
+        } else {
+            this.selectedDashboard = null
+            return false;
+        }
+    }
+
     setSiteId = (siteId: any) => {
         this.siteId = siteId;
     };
diff --git a/frontend/app/mstore/types/dashboard.ts b/frontend/app/mstore/types/dashboard.ts
index 4c7ea801e..5b8c40b17 100644
--- a/frontend/app/mstore/types/dashboard.ts
+++ b/frontend/app/mstore/types/dashboard.ts
@@ -2,6 +2,7 @@ import { makeAutoObservable, observable, action, runInAction } from "mobx"
 import Widget, { IWidget } from "./widget"
 import { dashboardService  } from "App/services"
 import { toast } from 'react-toastify';
+import { DateTime } from 'luxon';
 
 export interface IDashboard {
     dashboardId: any
@@ -14,6 +15,7 @@ export interface IDashboard {
     isPinned: boolean
     currentWidget: IWidget
     config: any
+    createdAt: Date
 
     update(data: any): void
     toJson(): any
@@ -35,7 +37,7 @@ export interface IDashboard {
 export default class Dashboard implements IDashboard {
     public static get ID_KEY():string { return "dashboardId" }
     dashboardId: any = undefined
-    name: string = "New Dashboard"
+    name: string = "Untitled Dashboard"
     description: string = ""
     isPublic: boolean = true
     widgets: IWidget[] = []
@@ -44,6 +46,7 @@ export default class Dashboard implements IDashboard {
     isPinned: boolean = false
     currentWidget: IWidget = new Widget()
     config: any = {}
+    createdAt: Date = new Date()
 
     constructor() {
         makeAutoObservable(this)
@@ -63,8 +66,7 @@ export default class Dashboard implements IDashboard {
             dashboardId: this.dashboardId,
             name: this.name,
             isPublic: this.isPublic,
-            // widgets: this.widgets.map(w => w.toJson())
-            // widgets: this.widgets
+            createdAt: this.createdAt,
             metrics: this.metrics,
             description: this.description,
         }
@@ -77,7 +79,8 @@ export default class Dashboard implements IDashboard {
             this.description = json.description
             this.isPublic = json.isPublic
             this.isPinned = json.isPinned
-            this.widgets = json.widgets ? json.widgets.map(w => new Widget().fromJson(w)).sort((a, b) => a.position - b.position) : []
+            this.createdAt = DateTime.fromMillis(new Date(json.createdAt).getTime())
+            this.widgets = json.widgets ? json.widgets.map((w: Widget) => new Widget().fromJson(w)).sort((a: Widget, b: Widget) => a.position - b.position) : []
         })
         return this
     }
diff --git a/frontend/app/mstore/types/widget.ts b/frontend/app/mstore/types/widget.ts
index 10e1e68f4..3d824c68f 100644
--- a/frontend/app/mstore/types/widget.ts
+++ b/frontend/app/mstore/types/widget.ts
@@ -60,7 +60,7 @@ export default class Widget implements IWidget {
     public static get ID_KEY():string { return "metricId" }
     metricId: any = undefined
     widgetId: any = undefined
-    name: string = "New Metric"
+    name: string = "Untitled Metric"
     // metricType: string = "timeseries"
     metricType: string = "timeseries"
     metricOf: string = "sessionCount"
diff --git a/frontend/app/player/MessageDistributor/MessageDistributor.ts b/frontend/app/player/MessageDistributor/MessageDistributor.ts
index cd48f54da..2d73081fb 100644
--- a/frontend/app/player/MessageDistributor/MessageDistributor.ts
+++ b/frontend/app/player/MessageDistributor/MessageDistributor.ts
@@ -92,6 +92,7 @@ export default class MessageDistributor extends StatedScreen {
   private readonly lists = initLists();
 
   private activityManager: ActivityManager | null = null;
+  private fileReader: MFileReader;
 
   private sessionStart: number;
   private navigationStartOffset: number = 0;
@@ -151,11 +152,13 @@ export default class MessageDistributor extends StatedScreen {
 
   private readAndDistributeMessages(byteArray: Uint8Array, onReadCb?: (msg: Message) => void) {
     const msgs: Array<Message> = []
-    const reader = new MFileReader(new Uint8Array(), this.sessionStart)
+    if (!this.fileReader) {
+      this.fileReader = new MFileReader(new Uint8Array(), this.sessionStart)
+    }
 
-    reader.append(byteArray)
+    this.fileReader.append(byteArray)
     let next: ReturnType<MFileReader['next']>
-    while (next = reader.next()) {
+    while (next = this.fileReader.next()) {
       const [msg, index] = next
       this.distributeMessage(msg, index)
       msgs.push(msg)
diff --git a/frontend/app/styles/general.css b/frontend/app/styles/general.css
index f0b80a54d..dd84006a2 100644
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@@ -278,6 +278,9 @@ p {
 .tippy-tooltip.openreplay-theme .tippy-backdrop {
   background-color: $tealx;
 }
+.tippy-tooltip[data-theme~='nopadding'], .nopadding-theme {
+  padding: 0!important
+}
 
 @media print {
   .no-print {
@@ -302,4 +305,4 @@ p {
 
 .recharts-legend-item-text {
   white-space: nowrap !important;
-}
\ No newline at end of file
+}
diff --git a/frontend/app/svg/icons/bar-pencil.svg b/frontend/app/svg/icons/bar-pencil.svg
new file mode 100644
index 000000000..1b9916e25
--- /dev/null
+++ b/frontend/app/svg/icons/bar-pencil.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 59 66" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1102_8386)">
+<path d="M40.2709 15.7361C40.2709 14.7839 40.6491 13.8707 41.3225 13.1974C41.9958 12.5241 42.909 12.1458 43.8612 12.1458H51.0417C51.9939 12.1458 52.9071 12.5241 53.5804 13.1974C54.2537 13.8707 54.632 14.7839 54.632 15.7361V58.8194H56.4271C56.9032 58.8194 57.3598 59.0086 57.6965 59.3452C58.0331 59.6819 58.2223 60.1385 58.2223 60.6146C58.2223 61.0907 58.0331 61.5473 57.6965 61.8839C57.3598 62.2206 56.9032 62.4097 56.4271 62.4097H2.57297C2.09687 62.4097 1.64027 62.2206 1.30362 61.8839C0.966962 61.5473 0.777832 61.0907 0.777832 60.6146C0.777832 60.1385 0.966962 59.6819 1.30362 59.3452C1.64027 59.0086 2.09687 58.8194 2.57297 58.8194H4.36811V48.0486C4.36811 47.0964 4.74637 46.1832 5.41968 45.5099C6.09299 44.8366 7.00619 44.4583 7.95839 44.4583H15.1389C16.0911 44.4583 17.0043 44.8366 17.6777 45.5099C18.351 46.1832 18.7292 47.0964 18.7292 48.0486V58.8194H22.3195V33.6875C22.3195 32.7353 22.6978 31.8221 23.3711 31.1488C24.0444 30.4755 24.9576 30.0972 25.9098 30.0972H33.0903C34.0425 30.0972 34.9557 30.4755 35.629 31.1488C36.3023 31.8221 36.6806 32.7353 36.6806 33.6875V58.8194H40.2709V15.7361ZM43.8612 58.8194H51.0417V15.7361H43.8612V58.8194ZM33.0903 58.8194V33.6875H25.9098V58.8194H33.0903ZM15.1389 58.8194V48.0486H7.95839V58.8194H15.1389Z" />
+</g>
+<g clip-path="url(#clip1_1102_8386)">
+<path d="M28.6125 0.334511C28.7189 0.227803 28.8453 0.143142 28.9845 0.0853777C29.1238 0.0276129 29.273 -0.00212097 29.4237 -0.00212097C29.5744 -0.00212097 29.7237 0.0276129 29.8629 0.0853777C30.0021 0.143142 30.1285 0.227803 30.235 0.334511L37.11 7.20951C37.2167 7.31595 37.3013 7.44239 37.3591 7.5816C37.4169 7.72081 37.4466 7.87004 37.4466 8.02076C37.4466 8.17148 37.4169 8.32071 37.3591 8.45992C37.3013 8.59913 37.2167 8.72557 37.11 8.83201L14.1933 31.7487C14.0833 31.8579 13.9524 31.9436 13.8083 32.0008L2.34996 36.5841C2.14173 36.6674 1.91362 36.6878 1.6939 36.6428C1.47418 36.5977 1.27253 36.4891 1.11393 36.3305C0.955329 36.1719 0.846765 35.9703 0.801694 35.7506C0.756623 35.5308 0.777026 35.3027 0.860376 35.0945L5.44371 23.6362C5.50084 23.4921 5.58659 23.3611 5.69579 23.2512L28.6125 0.334511ZM26.4606 5.72909L31.7154 10.9839L34.6785 8.02076L29.4237 2.76597L26.4606 5.72909ZM30.0952 12.6041L24.8404 7.3493L9.94454 22.2451V22.9166H11.0904C11.3943 22.9166 11.6857 23.0373 11.9006 23.2522C12.1155 23.4671 12.2362 23.7585 12.2362 24.0624V25.2083H13.382C13.6859 25.2083 13.9774 25.329 14.1923 25.5439C14.4072 25.7587 14.5279 26.0502 14.5279 26.3541V27.4999H15.1993L30.0952 12.6041ZM7.72621 24.4635L7.48329 24.7064L3.98163 33.4628L12.7381 29.9612L12.981 29.7183C12.7624 29.6366 12.574 29.4901 12.4409 29.2985C12.3078 29.1068 12.2364 28.8791 12.2362 28.6458V27.4999H11.0904C10.7865 27.4999 10.495 27.3792 10.2801 27.1643C10.0653 26.9494 9.94454 26.658 9.94454 26.3541V25.2083H8.79871C8.56537 25.2081 8.33765 25.1367 8.14599 25.0036C7.95433 24.8705 7.80788 24.682 7.72621 24.4635Z" />
+</g>
+<defs>
+<clipPath id="clip0_1102_8386">
+<rect width="57.4444" height="57.4444" fill="white" transform="translate(0.777832 8.55556)"/>
+</clipPath>
+<clipPath id="clip1_1102_8386">
+<rect width="36.6667" height="36.6667" fill="white" transform="translate(0.777832)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/app/svg/icons/columns-gap-filled.svg b/frontend/app/svg/icons/columns-gap-filled.svg
new file mode 100644
index 000000000..4bb29842d
--- /dev/null
+++ b/frontend/app/svg/icons/columns-gap-filled.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 25 26" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.282227 14.4717H11.0869V0.96582H0.282227V14.4717ZM0.282227 25.2764H11.0869V17.1729H0.282227V25.2764ZM13.7881 25.2764H24.5928V11.7705H13.7881V25.2764ZM13.7881 0.96582V9.06934H24.5928V0.96582H13.7881Z"/>
+</svg>
diff --git a/frontend/app/svg/icons/funnel-new.svg b/frontend/app/svg/icons/funnel-new.svg
new file mode 100644
index 000000000..36cb3c15c
--- /dev/null
+++ b/frontend/app/svg/icons/funnel-new.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16">
+  <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2h-11z"/>
+</svg>
diff --git a/frontend/app/svg/icons/graph-up.svg b/frontend/app/svg/icons/graph-up.svg
new file mode 100644
index 000000000..7b12d457e
--- /dev/null
+++ b/frontend/app/svg/icons/graph-up.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-graph-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z"/>
+</svg>
diff --git a/frontend/app/svg/icons/grid-check.svg b/frontend/app/svg/icons/grid-check.svg
new file mode 100644
index 000000000..3e899f840
--- /dev/null
+++ b/frontend/app/svg/icons/grid-check.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 32.5H16.25C17.112 32.5 17.9386 32.8424 18.5481 33.4519C19.1576 34.0614 19.5 34.888 19.5 35.75V45.5C19.5 46.362 19.1576 47.1886 18.5481 47.7981C17.9386 48.4076 17.112 48.75 16.25 48.75H6.5C5.63805 48.75 4.8114 48.4076 4.2019 47.7981C3.59241 47.1886 3.25 46.362 3.25 45.5V35.75C3.25 34.888 3.59241 34.0614 4.2019 33.4519C4.8114 32.8424 5.63805 32.5 6.5 32.5ZM35.75 3.25H45.5C46.362 3.25 47.1886 3.59241 47.7981 4.2019C48.4076 4.8114 48.75 5.63805 48.75 6.5V16.25C48.75 17.112 48.4076 17.9386 47.7981 18.5481C47.1886 19.1576 46.362 19.5 45.5 19.5H35.75C34.888 19.5 34.0614 19.1576 33.4519 18.5481C32.8424 17.9386 32.5 17.112 32.5 16.25V6.5C32.5 5.63805 32.8424 4.8114 33.4519 4.2019C34.0614 3.59241 34.888 3.25 35.75 3.25ZM35.75 32.5C34.888 32.5 34.0614 32.8424 33.4519 33.4519C32.8424 34.0614 32.5 34.888 32.5 35.75V45.5C32.5 46.362 32.8424 47.1886 33.4519 47.7981C34.0614 48.4076 34.888 48.75 35.75 48.75H45.5C46.362 48.75 47.1886 48.4076 47.7981 47.7981C48.4076 47.1886 48.75 46.362 48.75 45.5V35.75C48.75 34.888 48.4076 34.0614 47.7981 33.4519C47.1886 32.8424 46.362 32.5 45.5 32.5H35.75ZM35.75 0C34.0261 0 32.3728 0.68482 31.1538 1.90381C29.9348 3.12279 29.25 4.77609 29.25 6.5V16.25C29.25 17.9739 29.9348 19.6272 31.1538 20.8462C32.3728 22.0652 34.0261 22.75 35.75 22.75H45.5C47.2239 22.75 48.8772 22.0652 50.0962 20.8462C51.3152 19.6272 52 17.9739 52 16.25V6.5C52 4.77609 51.3152 3.12279 50.0962 1.90381C48.8772 0.68482 47.2239 0 45.5 0L35.75 0ZM6.5 29.25C4.77609 29.25 3.12279 29.9348 1.90381 31.1538C0.68482 32.3728 0 34.0261 0 35.75L0 45.5C0 47.2239 0.68482 48.8772 1.90381 50.0962C3.12279 51.3152 4.77609 52 6.5 52H16.25C17.9739 52 19.6272 51.3152 20.8462 50.0962C22.0652 48.8772 22.75 47.2239 22.75 45.5V35.75C22.75 34.0261 22.0652 32.3728 20.8462 31.1538C19.6272 29.9348 17.9739 29.25 16.25 29.25H6.5ZM29.25 35.75C29.25 34.0261 29.9348 32.3728 31.1538 31.1538C32.3728 29.9348 34.0261 29.25 35.75 29.25H45.5C47.2239 29.25 48.8772 29.9348 50.0962 31.1538C51.3152 32.3728 52 34.0261 52 35.75V45.5C52 47.2239 51.3152 48.8772 50.0962 50.0962C48.8772 51.3152 47.2239 52 45.5 52H35.75C34.0261 52 32.3728 51.3152 31.1538 50.0962C29.9348 48.8772 29.25 47.2239 29.25 45.5V35.75ZM0 6.5C0 4.77609 0.68482 3.12279 1.90381 1.90381C3.12279 0.68482 4.77609 0 6.5 0L16.25 0C17.9739 0 19.6272 0.68482 20.8462 1.90381C22.0652 3.12279 22.75 4.77609 22.75 6.5V16.25C22.75 17.9739 22.0652 19.6272 20.8462 20.8462C19.6272 22.0652 17.9739 22.75 16.25 22.75H6.5C4.77609 22.75 3.12279 22.0652 1.90381 20.8462C0.68482 19.6272 0 17.9739 0 16.25V6.5ZM17.4005 9.2755C17.5516 9.12441 17.6714 8.94505 17.7532 8.74765C17.835 8.55024 17.8771 8.33867 17.8771 8.125C17.8771 7.91133 17.835 7.69976 17.7532 7.50235C17.6714 7.30495 17.5516 7.12559 17.4005 6.9745C17.2494 6.82341 17.07 6.70357 16.8726 6.6218C16.6752 6.54003 16.4637 6.49795 16.25 6.49795C16.0363 6.49795 15.8248 6.54003 15.6274 6.6218C15.4299 6.70357 15.2506 6.82341 15.0995 6.9745L9.75 12.3272L7.6505 10.2245C7.49941 10.0734 7.32005 9.95357 7.12265 9.8718C6.92524 9.79003 6.71367 9.74795 6.5 9.74795C6.28633 9.74795 6.07476 9.79003 5.87735 9.8718C5.67995 9.95357 5.50059 10.0734 5.3495 10.2245C5.19841 10.3756 5.07857 10.555 4.9968 10.7524C4.91503 10.9498 4.87295 11.1613 4.87295 11.375C4.87295 11.5887 4.91503 11.8002 4.9968 11.9976C5.07857 12.195 5.19841 12.3744 5.3495 12.5255L8.5995 15.7755C8.75045 15.9268 8.92977 16.0469 9.12719 16.1288C9.32461 16.2107 9.53626 16.2529 9.75 16.2529C9.96374 16.2529 10.1754 16.2107 10.3728 16.1288C10.5702 16.0469 10.7496 15.9268 10.9005 15.7755L17.4005 9.2755Z" />
+</svg>
diff --git a/frontend/app/svg/icons/info-circle-fill.svg b/frontend/app/svg/icons/info-circle-fill.svg
new file mode 100644
index 000000000..9af7ae43b
--- /dev/null
+++ b/frontend/app/svg/icons/info-circle-fill.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.7501 35.4999C22.4576 35.4999 26.9724 33.6298 30.3012 30.301C33.6299 26.9723 35.5 22.4575 35.5 17.7499C35.5 13.0424 33.6299 8.5276 30.3012 5.19884C26.9724 1.87008 22.4576 0 17.7501 0C13.0425 0 8.52772 1.87008 5.19896 5.19884C1.8702 8.5276 0.00012207 13.0424 0.00012207 17.7499C0.00012207 22.4575 1.8702 26.9723 5.19896 30.301C8.52772 33.6298 13.0425 35.4999 17.7501 35.4999ZM19.8135 14.6171L17.5947 25.0563C17.4394 25.8106 17.6591 26.2388 18.2692 26.2388C18.6997 26.2388 19.3498 26.0835 19.7913 25.693L19.5961 26.616C18.9593 27.3837 17.5548 27.9428 16.3456 27.9428C14.7858 27.9428 14.1224 27.0065 14.5529 25.0163L16.1903 17.3217C16.3323 16.6716 16.2036 16.4364 15.5535 16.2789L14.5529 16.0992L14.7348 15.2539L19.8157 14.6171H19.8135ZM17.7501 12.2031C17.1616 12.2031 16.5973 11.9693 16.1812 11.5532C15.7651 11.1371 15.5313 10.5728 15.5313 9.98434C15.5313 9.39589 15.7651 8.83155 16.1812 8.41545C16.5973 7.99936 17.1616 7.7656 17.7501 7.7656C18.3385 7.7656 18.9029 7.99936 19.3189 8.41545C19.735 8.83155 19.9688 9.39589 19.9688 9.98434C19.9688 10.5728 19.735 11.1371 19.3189 11.5532C18.9029 11.9693 18.3385 12.2031 17.7501 12.2031Z" />
+</svg>
diff --git a/frontend/app/svg/icons/no-dashboard.svg b/frontend/app/svg/icons/no-dashboard.svg
new file mode 100644
index 000000000..2e849b192
--- /dev/null
+++ b/frontend/app/svg/icons/no-dashboard.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="13.1579" fill-opacity="0.08"/>
+<g clip-path="url(#clip0_14_33)">
+<path d="M27.4167 33.3334C27.9692 33.3334 28.4991 33.1139 28.8898 32.7232C29.2805 32.3325 29.5 31.8026 29.5 31.25C29.5 30.6975 29.2805 30.1676 28.8898 29.7769C28.4991 29.3862 27.9692 29.1667 27.4167 29.1667C26.8641 29.1667 26.3342 29.3862 25.9435 29.7769C25.5528 30.1676 25.3333 30.6975 25.3333 31.25C25.3333 31.8026 25.5528 32.3325 25.9435 32.7232C26.3342 33.1139 26.8641 33.3334 27.4167 33.3334ZM35.75 31.25C35.75 31.8026 35.5305 32.3325 35.1398 32.7232C34.7491 33.1139 34.2192 33.3334 33.6667 33.3334C33.1141 33.3334 32.5842 33.1139 32.1935 32.7232C31.8028 32.3325 31.5833 31.8026 31.5833 31.25C31.5833 30.6975 31.8028 30.1676 32.1935 29.7769C32.5842 29.3862 33.1141 29.1667 33.6667 29.1667C34.2192 29.1667 34.7491 29.3862 35.1398 29.7769C35.5305 30.1676 35.75 30.6975 35.75 31.25ZM39.9167 33.3334C40.4692 33.3334 40.9991 33.1139 41.3898 32.7232C41.7805 32.3325 42 31.8026 42 31.25C42 30.6975 41.7805 30.1676 41.3898 29.7769C40.9991 29.3862 40.4692 29.1667 39.9167 29.1667C39.3641 29.1667 38.8342 29.3862 38.4435 29.7769C38.0528 30.1676 37.8333 30.6975 37.8333 31.25C37.8333 31.8026 38.0528 32.3325 38.4435 32.7232C38.8342 33.1139 39.3641 33.3334 39.9167 33.3334V33.3334Z" fill-opacity="0.5"/>
+<path d="M25.3333 20.8333C23.1232 20.8333 21.0036 21.7113 19.4408 23.2741C17.878 24.8369 17 26.9565 17 29.1666V70.8333C17 73.0434 17.878 75.1631 19.4408 76.7259C21.0036 78.2887 23.1232 79.1666 25.3333 79.1666H75.3333C77.5435 79.1666 79.6631 78.2887 81.2259 76.7259C82.7887 75.1631 83.6667 73.0434 83.6667 70.8333V29.1666C83.6667 26.9565 82.7887 24.8369 81.2259 23.2741C79.6631 21.7113 77.5435 20.8333 75.3333 20.8333H25.3333ZM79.5 29.1666V37.5H21.1667V29.1666C21.1667 28.0616 21.6057 27.0018 22.3871 26.2204C23.1685 25.439 24.2283 25 25.3333 25H75.3333C76.4384 25 77.4982 25.439 78.2796 26.2204C79.061 27.0018 79.5 28.0616 79.5 29.1666ZM25.3333 75C24.2283 75 23.1685 74.561 22.3871 73.7796C21.6057 72.9982 21.1667 71.9384 21.1667 70.8333V41.6666H79.5V70.8333C79.5 71.9384 79.061 72.9982 78.2796 73.7796C77.4982 74.561 76.4384 75 75.3333 75H25.3333Z" fill-opacity="0.5"/>
+</g>
+<defs>
+<clipPath id="clip0_14_33">
+<rect width="66.6667" height="60" fill="white" transform="translate(17 20)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/app/svg/icons/no-metrics.svg b/frontend/app/svg/icons/no-metrics.svg
new file mode 100644
index 000000000..6809e0f79
--- /dev/null
+++ b/frontend/app/svg/icons/no-metrics.svg
@@ -0,0 +1,12 @@
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+<rect width="100" height="100" rx="13.1579"  fill-opacity="0.08"/>
+<g clip-path="url(#clip0_14_12)">
+<path d="M36.875 65C36.3777 65 35.9008 64.8025 35.5492 64.4508C35.1975 64.0992 35 63.6223 35 63.125V55.625C35 55.1277 35.1975 54.6508 35.5492 54.2992C35.9008 53.9475 36.3777 53.75 36.875 53.75H40.625C41.1223 53.75 41.5992 53.9475 41.9508 54.2992C42.3025 54.6508 42.5 55.1277 42.5 55.625V63.125C42.5 63.6223 42.3025 64.0992 41.9508 64.4508C41.5992 64.8025 41.1223 65 40.625 65H36.875ZM48.125 65C47.6277 65 47.1508 64.8025 46.7992 64.4508C46.4475 64.0992 46.25 63.6223 46.25 63.125V48.125C46.25 47.6277 46.4475 47.1508 46.7992 46.7992C47.1508 46.4475 47.6277 46.25 48.125 46.25H51.875C52.3723 46.25 52.8492 46.4475 53.2008 46.7992C53.5525 47.1508 53.75 47.6277 53.75 48.125V63.125C53.75 63.6223 53.5525 64.0992 53.2008 64.4508C52.8492 64.8025 52.3723 65 51.875 65H48.125ZM59.375 65C58.8777 65 58.4008 64.8025 58.0492 64.4508C57.6975 64.0992 57.5 63.6223 57.5 63.125V40.625C57.5 40.1277 57.6975 39.6508 58.0492 39.2992C58.4008 38.9475 58.8777 38.75 59.375 38.75H63.125C63.6223 38.75 64.0992 38.9475 64.4508 39.2992C64.8025 39.6508 65 40.1277 65 40.625V63.125C65 63.6223 64.8025 64.0992 64.4508 64.4508C64.0992 64.8025 63.6223 65 63.125 65H59.375Z"  fill-opacity="0.5"/>
+<path d="M35 20C33.0109 20 31.1032 20.7902 29.6967 22.1967C28.2902 23.6032 27.5 25.5109 27.5 27.5V72.5C27.5 74.4891 28.2902 76.3968 29.6967 77.8033C31.1032 79.2098 33.0109 80 35 80H65C66.9891 80 68.8968 79.2098 70.3033 77.8033C71.7098 76.3968 72.5 74.4891 72.5 72.5V27.5C72.5 25.5109 71.7098 23.6032 70.3033 22.1967C68.8968 20.7902 66.9891 20 65 20H35ZM35 23.75H65C65.9946 23.75 66.9484 24.1451 67.6516 24.8483C68.3549 25.5516 68.75 26.5054 68.75 27.5V72.5C68.75 73.4946 68.3549 74.4484 67.6516 75.1516C66.9484 75.8549 65.9946 76.25 65 76.25H35C34.0054 76.25 33.0516 75.8549 32.3483 75.1516C31.6451 74.4484 31.25 73.4946 31.25 72.5V27.5C31.25 26.5054 31.6451 25.5516 32.3483 24.8483C33.0516 24.1451 34.0054 23.75 35 23.75V23.75Z"  fill-opacity="0.5"/>
+</g>
+<defs>
+<clipPath id="clip0_14_12">
+<rect width="60" height="60" fill="white" transform="translate(20 20)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/app/svg/icons/table-new.svg b/frontend/app/svg/icons/table-new.svg
new file mode 100644
index 000000000..702e7a05b
--- /dev/null
+++ b/frontend/app/svg/icons/table-new.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
+  <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm15 2h-4v3h4V4zm0 4h-4v3h4V8zm0 4h-4v3h3a1 1 0 0 0 1-1v-2zm-5 3v-3H6v3h4zm-5 0v-3H1v2a1 1 0 0 0 1 1h3zm-4-4h4V8H1v3zm0-4h4V4H1v3zm5-3v3h4V4H6zm4 4H6v3h4V8z"/>
+</svg>
diff --git a/frontend/app/theme/colors.js b/frontend/app/theme/colors.js
index 51be4289d..297e044bd 100644
--- a/frontend/app/theme/colors.js
+++ b/frontend/app/theme/colors.js
@@ -43,5 +43,18 @@ module.exports = {
     'gray-light-shade': '#EEEEEE',
     'primary': '#3490dc',
     'transparent': 'transparent',
+  },
+
+  // actual theme colors - use this for new components
+  figmaColors: {
+    'accent-secondary': 'rgba(62, 170, 175, 1)',
+    'main': 'rgba(57, 78, 255, 1)',
+    'primary-outlined-hover-background':  'rgba(62, 170, 175, 0.08)',
+    'primary-outlined-resting-border': 'rgba(62, 170, 175, 0.5)',
+    'secondary-outlined-hover-background': 'rgba(63, 81, 181, 0.08)',
+    'secondary-outlined-resting-border': 'rgba(63, 81, 181, 0.5)',
+    'text-disabled': 'rgba(0,0,0, 0.38)',
+    'text-primary': 'rgba(0,0,0, 0.87)',
+    'outlined-border': 'rgba(0,0,0, 0.23)',
   }
 }
diff --git a/frontend/app/types/app/period.js b/frontend/app/types/app/period.js
index da69519b0..8ab9869e0 100644
--- a/frontend/app/types/app/period.js
+++ b/frontend/app/types/app/period.js
@@ -18,7 +18,7 @@ const RANGE_LABELS = {
     [LAST_30_MINUTES]: "Last 30 Minutes",
     [TODAY]: "Today",
     [YESTERDAY]: "Yesterday",
-    [LAST_24_HOURS]: "Last 24 Hours",
+    [LAST_24_HOURS]: "Past 24 Hours",
     [LAST_7_DAYS]: "Last 7 Days",
     [LAST_30_DAYS]: "Last 30 Days",
     [THIS_MONTH]: "This Month",
diff --git a/frontend/app/utils.ts b/frontend/app/utils.ts
index 1e738024c..2bc9a1451 100644
--- a/frontend/app/utils.ts
+++ b/frontend/app/utils.ts
@@ -53,7 +53,7 @@ export const cutURL = (url, prefix = '.../') => `${prefix + url.split('/').slice
 
 export const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
-export function getRE(string, options) {
+export function getRE(string: string, options: string) {
     let re;
     try {
         re = new RegExp(string, options);
@@ -63,6 +63,19 @@ export function getRE(string, options) {
     return re;
 }
 
+export const filterList = <T extends Record<string, any>>(
+    list: T[],
+    searchQuery: string,
+    testKeys: string[],
+    searchCb?: (listItem: T, query: string | RegExp
+) => boolean): T[] => {
+    const filterRE = getRE(searchQuery, 'i');
+    let _list = list.filter((listItem: T) => {
+        return testKeys.some((key) => filterRE.test(listItem[key]) || searchCb?.(listItem, filterRE));
+    });
+    return _list
+  }
+
 export const getStateColor = (state) => {
     switch (state) {
         case 'passed':
@@ -239,10 +252,10 @@ export const isGreaterOrEqualVersion = (version, compareTo) => {
     return major > majorC || (major === majorC && minor > minorC) || (major === majorC && minor === minorC && patch >= patchC);
 };
 
-export const sliceListPerPage = (list, page, perPage = 10) => {
+export const sliceListPerPage = <T extends Array<any>>(list: T, page: number, perPage = 10): T => {
     const start = page * perPage;
     const end = start + perPage;
-    return list.slice(start, end);
+    return list.slice(start, end) as T;
 };
 
 export const positionOfTheNumber = (min, max, value, length) => {
diff --git a/frontend/scripts/icons.ts b/frontend/scripts/icons.ts
index a89a8c3a3..4ad35692d 100644
--- a/frontend/scripts/icons.ts
+++ b/frontend/scripts/icons.ts
@@ -68,8 +68,10 @@ const plugins = (removeFill = true) => {
         fs.writeFileSync(`${UI_DIRNAME}/SVG.tsx`, `
 import React from 'react';
 
+export type IconNames = ${icons.map(icon => "'"+ icon.slice(0, -4) + "'").join(' | ')};
+
 interface Props {
-    name: string;
+    name: IconNames;
     size?: number | string;
     width?: number | string;
     height?: number | string;