diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
index 083e55d1a..69f7b7297 100644
--- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useObserver } from 'mobx-react-lite';
+import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import { Button, PageTitle, Loader, NoContent } from 'UI';
 import { withSiteId } from 'App/routes';
@@ -26,12 +26,12 @@ interface Props {
 function DashboardView(props: Props) {
     const { siteId, dashboardId } = props;
     const { dashboardStore } = useStore();
-    const { hideModal, showModal } = useModal();
-    const showAlertModal = useObserver(() => dashboardStore.showAlertModal);
-    const loading = useObserver(() => dashboardStore.fetchingDashboard);
-    const dashboards = useObserver(() => dashboardStore.dashboards);
-    const dashboard: any = useObserver(() => dashboardStore.selectedDashboard);
-    const period = useObserver(() => dashboardStore.period);
+    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 [showEditModal, setShowEditModal] = React.useState(false);
 
     useEffect(() => {
@@ -43,10 +43,10 @@ function DashboardView(props: Props) {
         if (dashboardId) return;
         dashboardStore.selectDefaultDashboard();
     }, []);
-    
+
     const onAddWidgets = () => {
         dashboardStore.initDashboard(dashboard)
-        showModal(<DashboardModal siteId={siteId} dashboardId={dashboardId} />, {})
+        showModal(<DashboardModal siteId={siteId} dashboardId={dashboardId} />, { right: true })
     }
 
     const onEdit = () => {
@@ -67,17 +67,17 @@ function DashboardView(props: Props) {
             });
         }
     }
-    
-    return useObserver(() => (
+
+    return (
         <Loader loading={loading}>
             <NoContent
                 show={dashboards.length === 0 || !dashboard || !dashboard.dashboardId}
-                icon="no-metrics-chart"
-                title="No dashboards available."
+                icon="dashboard-icn"
+                title={<span>Gather and analyze <br /> important metrics in one place.</span>}
                 size="small"
                 iconSize={180}
                 subtext={
-                    <Button primary size="small" onClick={onAddWidgets}>Create Dashboard</Button>
+                    <Button primary size="small" onClick={onAddWidgets}>+ Create Dashboard</Button>
                 }
             >
                 <div style={{ maxWidth: '1300px', margin: 'auto'}}>
@@ -95,7 +95,7 @@ function DashboardView(props: Props) {
                                     <Button primary size="small" onClick={onAddWidgets}>Add Metric</Button>
                                 }
                             />
-                            
+
                         </div>
                         <div className="flex items-center">
                             <div className="flex items-center">
@@ -132,9 +132,9 @@ function DashboardView(props: Props) {
                 </div>
             </NoContent>
         </Loader>
-    ));
+    );
 }
 
 export default withPageTitle('Dashboards - OpenReplay')(
-    withReport(withRouter(withModal(DashboardView)))
-);
\ No newline at end of file
+    withReport(withRouter(withModal(observer(DashboardView))))
+);
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index f9f5e6d96..cbeb4ee4e 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -9,12 +9,14 @@ interface Props {
 function DashboardLink({ dashboards}) {
     return (
         dashboards.map(dashboard => (
+            <React.Fragment key={dashboard.dashboardId}>
             <Link to={`/dashboard/${dashboard.dashboardId}`} className="">
                 <div className="flex items-center mb-1">
                     <div className="mr-2 text-4xl no-underline" style={{ textDecoration: 'none'}}>·</div>
                     <span className="link leading-4">{dashboard.name}</span>
                 </div>
             </Link>
+            </React.Fragment>
         ))
     );
 }
@@ -44,4 +46,4 @@ function MetricListItem(props: Props) {
     );
 }
 
-export default MetricListItem;
\ No newline at end of file
+export default MetricListItem;
diff --git a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
index 9d895de13..10b061c8b 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/MetricsList.tsx
@@ -39,7 +39,9 @@ function MetricsList(props: Props) {
                 </div>
 
                 {sliceListPerPage(list, metricStore.page - 1, metricStore.pageSize).map((metric: any) => (
-                    <MetricListItem metric={metric} />
+                    <React.Fragment key={metric.metricId}>
+                        <MetricListItem metric={metric} />
+                    </React.Fragment>
                 ))}
             </div>
 
@@ -56,4 +58,4 @@ function MetricsList(props: Props) {
     ));
 }
 
-export default MetricsList;
\ No newline at end of file
+export default MetricsList;
diff --git a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
index 9d82d6288..9fffa8624 100644
--- a/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsView/MetricsView.tsx
@@ -24,7 +24,7 @@ function MetricsView(props: Props) {
                     <PageTitle title="Metrics" className="" />
                     <span className="text-2xl color-gray-medium ml-2">{metricsCount}</span>
                 </div>
-                <Link to={'/metrics/create'}><Button primary size="small">Add Metric</Button></Link>
+                <Link to={'/metrics/create'}><Button primary size="small">Create Metric</Button></Link>
                 <div className="ml-auto w-1/3">
                     <MetricsSearch />
                 </div>
@@ -34,4 +34,4 @@ function MetricsView(props: Props) {
     ));
 }
 
-export default withPageTitle('Metrics - OpenReplay')(MetricsView);
\ No newline at end of file
+export default withPageTitle('Metrics - OpenReplay')(MetricsView);
diff --git a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
index 79b44bc5a..a66126577 100644
--- a/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetForm/WidgetForm.tsx
@@ -34,17 +34,17 @@ function WidgetForm(props: Props) {
     const write = ({ target: { value, name } }) => metricStore.merge({ [ name ]: value });
     const writeOption = (e, { value, name }) => {
         const obj = { [ name ]: value };
-  
+
         if (name === 'metricValue') {
             obj['metricValue'] = [value];
         }
-    
+
         if (name === 'metricOf') {
             if (value === FilterKey.ISSUE) {
                 obj['metricValue'] = ['all'];
             }
         }
-    
+
         if (name === 'metricType') {
             if (value === 'timeseries') {
                 obj['metricOf'] = timeseriesOptions[0].value;
@@ -67,7 +67,7 @@ function WidgetForm(props: Props) {
                 } else {
                     history.push(withSiteId(metricDetails(metric.metricId), siteId));
                 }
-                
+
             }
         });
     }
@@ -85,7 +85,7 @@ function WidgetForm(props: Props) {
     const onObserveChanges = () => {
         // metricStore.fetchMetricChartData(metric);
     }
-    
+
     return useObserver(() => (
         <div className="p-4">
             <div className="form-group">
@@ -222,4 +222,4 @@ function WidgetForm(props: Props) {
     ));
 }
 
-export default WidgetForm;
\ No newline at end of file
+export default WidgetForm;
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
index 8f2d5b051..cfccd664c 100644
--- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
@@ -30,7 +30,7 @@ interface Props {
 function WidgetWrapper(props: Props) {
     const { dashboardStore } = useStore();
     const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props;
-    const widget: any = useObserver(() => props.widget);    
+    const widget: any = useObserver(() => props.widget);
     const isPredefined = widget.metricType === 'predefined';
     const dashboard = useObserver(() => dashboardStore.selectedDashboard);
     const isOverviewWidget = widget.widgetType === 'predefined' && widget.viewType === 'overview';
@@ -69,13 +69,13 @@ function WidgetWrapper(props: Props) {
 
     const onChartClick = () => {
         if (!isWidget || isPredefined) return;
-        
+
         props.history.push(withSiteId(dashboardMetricDetails(dashboard?.dashboardId, widget.metricId),siteId));
     }
 
     const ref: any = useRef(null)
     const dragDropRef: any = dragRef(dropRef(ref))
-    
+
     return useObserver(() => (
         <div
             className={cn("relative rounded bg-white border", 'col-span-' + widget.config.col, { "cursor-pointer" : isTemplate })}
@@ -101,20 +101,22 @@ function WidgetWrapper(props: Props) {
                                 <div className='mx-2'/>
                             </>
                         )}
-                        
-                        <ItemMenu
-                            items={[
-                                {
-                                    text: 'Edit', onClick: onChartClick,
-                                    disabled: widget.metricType === 'predefined',
-                                    disabledMessage: 'Cannot edit system generated metrics'
-                                },
-                                {
-                                    text: 'Remove from view',
-                                    onClick: onDelete
-                                },
-                            ]}
-                        />
+
+                        {!isTemplate && (
+                            <ItemMenu
+                                items={[
+                                    {
+                                        text: widget.metricType === 'predefined' ? 'Cannot edit system generated metrics' : 'Edit',
+                                        onClick: onChartClick,
+                                        disabled: widget.metricType === 'predefined',
+                                    },
+                                    {
+                                        text: 'Remove from view',
+                                        onClick: onDelete
+                                    },
+                                ]}
+                            />
+                        )}
                     </div>
                 )}
             </div>
@@ -128,4 +130,4 @@ function WidgetWrapper(props: Props) {
     ));
 }
 
-export default withRouter(WidgetWrapper);
\ No newline at end of file
+export default withRouter(WidgetWrapper);