diff --git a/frontend/app/Router.js b/frontend/app/Router.js
index a2e36dd8f..e270afaba 100644
--- a/frontend/app/Router.js
+++ b/frontend/app/Router.js
@@ -50,7 +50,7 @@ const withObTab = routes.withObTab;
 
 const DASHBOARD_PATH = routes.dashboard();
 const DASHBOARD_SELECT_PATH = routes.dashboardSelected();
-const DASHBOARD_METRICS_PATH = routes.dashboardMetrics();
+const DASHBOARD_METRICS_PATH = routes.dashboardMetricCreate();
 
 // const WIDGET_PATAH = routes.dashboardMetric();
 const SESSIONS_PATH = routes.sessions();
@@ -186,8 +186,9 @@ class Router extends React.Component {
             <Redirect to={ routes.client(routes.CLIENT_TABS.SITES) } />
           }
           
-          {/* <Route index path={ withSiteId(DASHBOARD_METRICS_PATH, siteIdList) } component={ Dashboard } /> */}
-          <Route index path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
+          <Route exact index path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
+          <Route exact index path={ withSiteId(DASHBOARD_METRICS_PATH, siteIdList) } component={ Dashboard } />
+          
           <Route index path={ withSiteId(DASHBOARD_PATH, siteIdList) } component={ Dashboard } />
           
           {/* <Route exact strict path={ withSiteId(WIDGET_PATAH, siteIdList) } component={ Dashboard } />
diff --git a/frontend/app/components/Dashboard/NewDashboard.tsx b/frontend/app/components/Dashboard/NewDashboard.tsx
index 5d51e5037..f4b6aec3e 100644
--- a/frontend/app/components/Dashboard/NewDashboard.tsx
+++ b/frontend/app/components/Dashboard/NewDashboard.tsx
@@ -56,6 +56,9 @@ function NewDashboard(props) {
                             </div>
                         </div>
                     </Route>
+                    <Route exact strict path={withSiteId(dashboardMetricCreate(dashboard.dashboardId), siteId)}>
+                        <WidgetView />
+                    </Route>
                     { dashboardId && (
                         <>
                             <Route exact strict path={withSiteId(dashboardSelected(dashboardId), siteId)}>
@@ -69,9 +72,8 @@ function NewDashboard(props) {
                                 </div>
                             </Route>
                             
-                            {/* <Route exact strict path={withSiteId(dashboardMetricCreate(dashboard.dashboardId), siteId)}>
-                                <WidgetView />
-                            </Route>
+                           
+                            {/* 
                             <Route exact strict path={withSiteId(dashboardMetricDetails(dashboard.dashboardId, metricId), siteId)}>
                                 <WidgetView />
                             </Route> */}
diff --git a/frontend/app/components/Dashboard/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/WidgetWrapper/WidgetWrapper.tsx
index d7f6e2fe4..86ce18b36 100644
--- a/frontend/app/components/Dashboard/WidgetWrapper/WidgetWrapper.tsx
+++ b/frontend/app/components/Dashboard/WidgetWrapper/WidgetWrapper.tsx
@@ -4,10 +4,16 @@ import cn from 'classnames';
 import { ItemMenu } from 'UI';
 import { useDrag, useDrop } from 'react-dnd';
 
-function WidgetWrapper(props) {
-    const { widget, index, moveListItem } = props;
+interface Props {
+    className?: string;
+    widget?: any;
+    index?: number;
+    moveListItem?: any;
+    isPreview?: boolean;
+}
+function WidgetWrapper(props: Props) {
+    const { widget = {}, index = 0, moveListItem = null, isPreview = false } = props;
 
-    // useDrag - the list item is draggable
     const [{ opacity, isDragging }, dragRef] = useDrag({
         type: 'item',
         item: { index },
@@ -15,41 +21,33 @@ function WidgetWrapper(props) {
             isDragging: monitor.isDragging(),
             opacity: monitor.isDragging() ? 0.5 : 1,
         }),
-    }, [index]);
 
-    // useDrop - the list item is also a drop area
-    const [spec, dropRef] = useDrop({
+    });
+
+    const [{ isOver, canDrop }, dropRef] = useDrop({
         accept: 'item',
+
         drop: (item: any) => {
             if (item.index === index) return;
             moveListItem(item.index, index);
         },
-        // hover: (item: any, monitor: any) => {
-        //     const dragIndex = item.index
-        //     const hoverIndex = index
-        //     const hoverBoundingRect = ref.current?.getBoundingClientRect()
-        //     const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
-        //     const hoverActualY = monitor.getClientOffset().y - hoverBoundingRect.top
-
-        //     // if dragging down, continue only when hover is smaller than middle Y
-        //     if (dragIndex < hoverIndex && hoverActualY < hoverMiddleY) return
-        //     // if dragging up, continue only when hover is bigger than middle Y
-        //     if (dragIndex > hoverIndex && hoverActualY > hoverMiddleY) return
-
-        //     moveListItem(dragIndex, hoverIndex)
-        //     item.index = hoverIndex
-        // },
-    }, [])
-
-    console.log('spec', spec)
+        collect: (monitor: any) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    })
 
     const ref: any = useRef(null)
     const dragDropRef: any = dragRef(dropRef(ref))
     
     return (
         <div
-            className={cn("border rounded bg-white", 'col-span-' + widget.colSpan)}
-            style={{ userSelect: 'none', opacity }}
+            className={cn("rounded bg-white", 'col-span-' + widget.colSpan, { 'border' : !isPreview })}
+            style={{
+                userSelect: 'none',
+                opacity: isDragging ? 0.5 : 1,
+                borderColor: canDrop && isOver ? '#394EFF' : '#EEE',
+            }}
             ref={dragDropRef}
         >
             {/* <Link to={withSiteId(dashboardMetricDetails(dashboard.dashboardId, widget.widgetId), siteId)}> */}
diff --git a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
index 4e6de9662..12ec3113b 100644
--- a/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetPreview/WidgetPreview.tsx
@@ -78,7 +78,7 @@ function WidgetPreview(props: Props) {
                     </div>
             </div>
             <div className="bg-white rounded border p-4">
-                <WidgetWrapper widget={metric} />
+                <WidgetWrapper widget={metric} isPreview={true} />
             </div>
         </div>
     ));
diff --git a/frontend/app/components/ui/ItemMenu/ItemMenu.js b/frontend/app/components/ui/ItemMenu/ItemMenu.js
index 94274a405..1d908c33e 100644
--- a/frontend/app/components/ui/ItemMenu/ItemMenu.js
+++ b/frontend/app/components/ui/ItemMenu/ItemMenu.js
@@ -27,7 +27,9 @@ export default class ItemMenu extends React.PureComponent {
   }
 
   toggleMenu = (e) => {
-    e.stopPropagation();
+    // e.preventDefault();
+    // e.stopPropagation();
+    console.log('toggleMenu', e);
     this.setState({ displayed: !this.state.displayed });
   }
 
@@ -51,7 +53,7 @@ export default class ItemMenu extends React.PureComponent {
           className="w-10 h-10 cursor-pointer bg-white rounded-full flex items-center justify-center hover:bg-gray-lightest"
           onClick={ this.toggleMenu }
           role="button"
-          tabIndex="-1"
+          // tabIndex="-1"
         >
           <Icon name="ellipsis-v" size="16" />
         </div>