diff --git a/ui/src/console/detail/account/AccountDetail.js b/ui/src/console/detail/account/AccountDetail.js
index 169984ed..23b8d679 100644
--- a/ui/src/console/detail/account/AccountDetail.js
+++ b/ui/src/console/detail/account/AccountDetail.js
@@ -3,10 +3,8 @@ import Icon from "@mdi/react";
 import PropertyTable from "../../PropertyTable";
 import {Tab, Tabs} from "react-bootstrap";
 import SecretToggle from "../../SecretToggle";
-import React, {useEffect, useState} from "react";
-import * as metadata from "../../../api/metadata";
-import {buildMetrics} from "../../metrics/util";
-import MetricsView from "../../metrics/MetricsView";
+import React from "react";
+import MetricsTab from "./MetricsTab";
 
 const AccountDetail = (props) => {
     const customProperties = {
@@ -28,53 +26,6 @@ const AccountDetail = (props) => {
     );
 }
 
-const MetricsTab = () => {
-    const [metrics30, setMetrics30] = useState(buildMetrics([]));
-    const [metrics7, setMetrics7] = useState(buildMetrics([]));
-    const [metrics1, setMetrics1] = useState(buildMetrics([]));
 
-    useEffect(() => {
-        metadata.getAccountMetrics()
-            .then(resp => {
-                setMetrics30(buildMetrics(resp.data));
-            });
-        metadata.getAccountMetrics({duration: "168h"})
-            .then(resp => {
-                setMetrics7(buildMetrics(resp.data));
-            });
-        metadata.getAccountMetrics({duration: "24h"})
-            .then(resp => {
-                setMetrics1(buildMetrics(resp.data));
-            });
-    }, []);
-
-    useEffect(() => {
-        let mounted = true;
-        let interval = setInterval(() => {
-            metadata.getAccountMetrics()
-                .then(resp => {
-                    if(mounted) {
-                        setMetrics30(buildMetrics(resp.data));
-                    }
-                });
-            metadata.getAccountMetrics({duration: "168h"})
-                .then(resp => {
-                    setMetrics7(buildMetrics(resp.data));
-                });
-            metadata.getAccountMetrics({duration: "24h"})
-                .then(resp => {
-                    setMetrics1(buildMetrics(resp.data));
-                });
-        }, 5000);
-        return () => {
-            mounted = false;
-            clearInterval(interval);
-        }
-    }, []);
-
-    return (
-        <MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
-    );
-}
 
 export default AccountDetail;
\ No newline at end of file
diff --git a/ui/src/console/detail/account/MetricsTab.js b/ui/src/console/detail/account/MetricsTab.js
new file mode 100644
index 00000000..fdcbab7d
--- /dev/null
+++ b/ui/src/console/detail/account/MetricsTab.js
@@ -0,0 +1,55 @@
+import React, {useEffect, useState} from "react";
+import {buildMetrics} from "../../metrics/util";
+import * as metadata from "../../../api/metadata";
+import MetricsView from "../../metrics/MetricsView";
+
+const MetricsTab = () => {
+    const [metrics30, setMetrics30] = useState(buildMetrics([]));
+    const [metrics7, setMetrics7] = useState(buildMetrics([]));
+    const [metrics1, setMetrics1] = useState(buildMetrics([]));
+
+    useEffect(() => {
+        metadata.getAccountMetrics()
+            .then(resp => {
+                setMetrics30(buildMetrics(resp.data));
+            });
+        metadata.getAccountMetrics({duration: "168h"})
+            .then(resp => {
+                setMetrics7(buildMetrics(resp.data));
+            });
+        metadata.getAccountMetrics({duration: "24h"})
+            .then(resp => {
+                setMetrics1(buildMetrics(resp.data));
+            });
+    }, []);
+
+    useEffect(() => {
+        let mounted = true;
+        let interval = setInterval(() => {
+            metadata.getAccountMetrics()
+                .then(resp => {
+                    if(mounted) {
+                        setMetrics30(buildMetrics(resp.data));
+                    }
+                });
+            metadata.getAccountMetrics({duration: "168h"})
+                .then(resp => {
+                    setMetrics7(buildMetrics(resp.data));
+                });
+            metadata.getAccountMetrics({duration: "24h"})
+                .then(resp => {
+                    setMetrics1(buildMetrics(resp.data));
+                });
+        }, 5000);
+        return () => {
+            mounted = false;
+            clearInterval(interval);
+        }
+    }, []);
+
+    return (
+        <MetricsView metrics30={metrics30} metrics7={metrics7} metrics1={metrics1} />
+    );
+}
+
+export default MetricsTab;
\ No newline at end of file