diff --git a/frontend/app/components/Dashboard/NewDashboard.tsx b/frontend/app/components/Dashboard/NewDashboard.tsx
index 00a91c0dd..60295de5c 100644
--- a/frontend/app/components/Dashboard/NewDashboard.tsx
+++ b/frontend/app/components/Dashboard/NewDashboard.tsx
@@ -1,11 +1,9 @@
 import React, { useEffect } from 'react';
-import { useObserver } from 'mobx-react-lite';
+import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
-import DashboardSideMenu from './components/DashboardSideMenu';
 import { Loader } from 'UI';
 import DashboardRouter from './components/DashboardRouter';
-import cn from 'classnames';
 import withPermissions from 'HOCs/withPermissions';
 
 interface RouterProps {
@@ -17,7 +15,7 @@ interface RouterProps {
 function NewDashboard(props: RouteComponentProps<RouterProps>) {
   const { history, match: { params: { siteId, dashboardId } } } = props;
   const { dashboardStore } = useStore();
-  const loading = useObserver(() => dashboardStore.isLoading);
+  const loading = dashboardStore.isLoading;
   const isMetricDetails = history.location.pathname.includes('/metrics/') || history.location.pathname.includes('/metric/');
   const isDashboardDetails = history.location.pathname.includes('/dashboard/');
   const isAlertsDetails = history.location.pathname.includes('/alert/');
@@ -31,11 +29,11 @@ function NewDashboard(props: RouteComponentProps<RouterProps>) {
     });
   }, [siteId]);
 
-  return useObserver(() => (
+  return (
     <Loader loading={loading} className='mt-12'>
       <DashboardRouter />
     </Loader>
-  ));
+  );
 }
 
-export default withRouter(withPermissions(['METRICS'])(NewDashboard));
+export default withRouter(withPermissions(['METRICS'])(observer(NewDashboard)));
diff --git a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
index c5a18b18d..4071f1f55 100644
--- a/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
+++ b/frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx
@@ -25,7 +25,6 @@ function MetricTypeIcon({ type }: any) {
     setCard(t);
   }, [type]);
 
-  console.log(type, TYPES)
   return (
     <Tooltip title={<div className="capitalize">{card.title}</div>}>
       <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
@@ -82,7 +81,6 @@ function MetricListItem(props: Props) {
       toast.error('Failed to rename card');
     }}
 
-  console.log(metric)
   return (
     <>
       <Modal open={isEdit} onClose={() => setIsEdit(false)}>
diff --git a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
index 81d8be66d..d2a4bb6a7 100644
--- a/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
+++ b/frontend/app/components/Dashboard/components/MetricsList/ListView.tsx
@@ -38,6 +38,7 @@ function ListView(props: Props) {
       </div>
       {list.map((metric: any) => (
         <MetricListItem
+          key={metric.metricId}
           disableSelection={disableSelection}
           metric={metric}
           siteId={siteId}