diff --git a/frontend/app/Router.js b/frontend/app/Router.js
index 314f36a6e..b760950b7 100644
--- a/frontend/app/Router.js
+++ b/frontend/app/Router.js
@@ -55,6 +55,7 @@ const withObTab = routes.withObTab;
 
 const METRICS_PATH = routes.metrics();
 const METRICS_DETAILS = routes.metricDetails();
+const METRICS_DETAILS_SUB = routes.metricDetailsSub();
 
 const DASHBOARD_PATH = routes.dashboard();
 const DASHBOARD_SELECT_PATH = routes.dashboardSelected();
@@ -204,6 +205,7 @@ class Router extends React.Component {
             {/* DASHBOARD and Metrics */}
             <Route exact strict path={ withSiteId(METRICS_PATH, siteIdList) } component={ Dashboard } />
             <Route exact strict path={ withSiteId(METRICS_DETAILS, siteIdList) } component={ Dashboard } />
+            <Route exact strict path={ withSiteId(METRICS_DETAILS_SUB, siteIdList) } component={ Dashboard } />
             <Route exact strict path={ withSiteId(DASHBOARD_PATH, siteIdList) } component={ Dashboard } />
             <Route exact strict path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
             <Route exact strict path={ withSiteId(DASHBOARD_METRIC_CREATE_PATH, siteIdList) } component={ Dashboard } />
diff --git a/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx b/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
index 6004202a2..cff066a09 100644
--- a/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardRouter/DashboardRouter.tsx
@@ -5,6 +5,7 @@ import { withRouter } from 'react-router-dom';
 import {
     metrics,
     metricDetails,
+    metricDetailsSub,
     dashboardSelected,
     dashboardMetricCreate,
     dashboardMetricDetails,
@@ -14,6 +15,7 @@ import {
 import DashboardView from '../DashboardView';
 import MetricsView from '../MetricsView';
 import WidgetView from '../WidgetView';
+import WidgetSubDetailsView from '../WidgetSubDetailsView';
 
 function DashboardViewSelected({ siteId, dashboardId}) {
     return (
@@ -37,6 +39,10 @@ function DashboardRouter(props: Props) {
                 <Route exact strict path={withSiteId(metricDetails(), siteId)}>
                     <WidgetView siteId={siteId} {...props} />
                 </Route>
+                
+                <Route exact strict path={withSiteId(metricDetailsSub(), siteId)}>
+                    <WidgetSubDetailsView siteId={siteId} {...props} />
+                </Route>
 
                 <Route exact strict path={withSiteId(dashboard(''), siteId)}>
                     <DashboardView siteId={siteId} dashboardId={dashboardId} />
diff --git a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx
new file mode 100644
index 000000000..12e7d821b
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/WidgetSubDetailsView.tsx
@@ -0,0 +1,37 @@
+import Breadcrumb from 'App/components/shared/Breadcrumb';
+import { useStore } from 'App/mstore';
+import { useObserver } from 'mobx-react-lite';
+import React, { useEffect } from 'react';
+import { withSiteId } from 'App/routes';
+
+interface Props {
+    history: any;
+    match: any
+    siteId: any
+}
+function WidgetSubDetailsView(props: Props) {
+    const { match: { params: { siteId, dashboardId, metricId } } } = props;
+    const { metricStore } = useStore();
+    const widget = useObserver(() => metricStore.instance);
+    const loadingWidget = useObserver(() => metricStore.isLoading);
+
+    useEffect(() => {
+        if (!widget || !widget.exists()) {
+            metricStore.fetch(metricId);
+        }
+    }, []);
+
+    return (
+        <div>
+            <Breadcrumb
+                items={[
+                    { label: dashboardId ? 'Dashboard' : 'Metrics', to: dashboardId ? withSiteId('/dashboard/' + dashboardId, siteId) : withSiteId('/metrics', siteId) },
+                    { label: widget.name, to: withSiteId(`/metrics/${widget.metricId}`, siteId) },
+                    { label: 'Sub Details' }
+                ]}
+            />
+        </div>
+    );
+}
+
+export default WidgetSubDetailsView;
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/WidgetSubDetailsView/index.ts b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/index.ts
new file mode 100644
index 000000000..669474025
--- /dev/null
+++ b/frontend/app/components/Dashboard/components/WidgetSubDetailsView/index.ts
@@ -0,0 +1 @@
+export { default } from './WidgetSubDetailsView';
\ No newline at end of file
diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
index de0bdd6f7..789c7d895 100644
--- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
+++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx
@@ -23,9 +23,11 @@ function WidgetView(props: Props) {
     const [expanded, setExpanded] = useState(!metricId || metricId === 'create');
 
     React.useEffect(() => {
-        if (metricId && metricId !== 'create') {
+        if (metricId && metricId !== 'create' && (!widget || !widget.exists())) {
             metricStore.fetch(metricId);
-        } else {
+        }
+
+        if (metricId === 'create') {
             metricStore.init();
         }
     }, [])
diff --git a/frontend/app/routes.js b/frontend/app/routes.js
index 9dac4d885..4b7b35ebe 100644
--- a/frontend/app/routes.js
+++ b/frontend/app/routes.js
@@ -127,6 +127,7 @@ const REQUIRED_SITE_ID_ROUTES = [
     
     metrics(),
     metricDetails(''),
+    metricDetailsSub(''),
 
     dashboard(''),
     dashboardSelected(''),