diff --git a/ui/scripts/metrics.js b/ui/scripts/metrics.js
index 9f469c16b27..fb8e39eb3ec 100644
--- a/ui/scripts/metrics.js
+++ b/ui/scripts/metrics.js
@@ -32,7 +32,7 @@
     cloudStack.sections.metrics.zones = {
         title: 'label.metrics',
         listView: {
-            id: 'zones',
+            id: 'physicalResources',
             fields: {
                 name: {
                     label: 'label.metrics.name'
@@ -250,7 +250,8 @@
             browseBy: {
                 filterBy: 'zoneid',
                 resource: 'clusters'
-            }
+            },
+            detailView: cloudStack.sections.system.physicalResourceSection.sections.physicalResources.listView.zones.detailView
         }
     };
 
diff --git a/ui/scripts/system.js b/ui/scripts/system.js
index 3866fc60c9f..3aafd8d8125 100644
--- a/ui/scripts/system.js
+++ b/ui/scripts/system.js
@@ -7622,7 +7622,7 @@
                 }
             }
         },
-        show: cloudStack.uiCustom.physicalResources({
+        physicalResourceSection: {
             sections: {
                 physicalResources: {
                     type: 'select',
@@ -9403,7 +9403,7 @@
                     }
                 }
             }
-        }),
+        },
         subsections: {
             virtualRouters: {
                 sectionSelect: {
@@ -19702,7 +19702,10 @@
             });
         }
     }
-    
+
+    // Inject cloudStack infra page
+    cloudStack.sections.system.show = cloudStack.uiCustom.physicalResources(cloudStack.sections.system.physicalResourceSection);
+
     function addExternalLoadBalancer(args, physicalNetworkObj, apiCmd, apiCmdRes, apiCmdObj) {
         var array1 =[];
         array1.push("&physicalnetworkid=" + physicalNetworkObj.id);