diff --git a/src/entryPoints/hyperswitch/HyperSwitchApp.res b/src/entryPoints/hyperswitch/HyperSwitchApp.res
index 47e1b4798..4ed82e6da 100644
--- a/src/entryPoints/hyperswitch/HyperSwitchApp.res
+++ b/src/entryPoints/hyperswitch/HyperSwitchApp.res
@@ -323,7 +323,9 @@ let make = () => {
                       | list{"monitoring"} => comingSoonPage
                       | list{"developer-api-keys"} => <KeyManagement.KeysManagement />
                       | list{"developer-system-metrics"} =>
-                        <UIUtils.RenderIf condition={userRole->Js.String2.includes("internal_")}>
+                        <UIUtils.RenderIf
+                          condition={userRole->Js.String2.includes("internal_") &&
+                            featureFlagDetails.systemMetrics}>
                           <AnalyticsUrlUpdaterContext key="SystemMetrics">
                             <SystemMetricsAnalytics />
                           </AnalyticsUrlUpdaterContext>
diff --git a/src/entryPoints/hyperswitch/SidebarValues.res b/src/entryPoints/hyperswitch/SidebarValues.res
index c6fa92749..8d2b20c81 100644
--- a/src/entryPoints/hyperswitch/SidebarValues.res
+++ b/src/entryPoints/hyperswitch/SidebarValues.res
@@ -229,7 +229,7 @@ let apiKeys = SubLevelLink({
   searchOptions: [("View API Keys", "")],
 })
 
-let systemMetrics = SubLevelLink({
+let systemMetric = SubLevelLink({
   name: "System Metrics",
   link: `/developer-system-metrics`,
   access: ReadWrite,
@@ -244,7 +244,7 @@ let webhooks = SubLevelLink({
   searchOptions: [("View Webhooks", "")],
 })
 
-let developers = (isDevelopersEnabled, ~userRole) => {
+let developers = (isDevelopersEnabled, userRole, systemMetrics) => {
   let isInternalUser = userRole->Js.String2.includes("internal_")
 
   isDevelopersEnabled
@@ -252,7 +252,9 @@ let developers = (isDevelopersEnabled, ~userRole) => {
         name: "Developers",
         icon: "developer",
         showSection: true,
-        links: isInternalUser ? [apiKeys, webhooks, systemMetrics] : [apiKeys, webhooks],
+        links: isInternalUser && systemMetrics
+          ? [apiKeys, webhooks, systemMetric]
+          : [apiKeys, webhooks],
       })
     : emptyComponent
 }
@@ -325,8 +327,8 @@ let getHyperSwitchAppSidebars = (
     userManagement,
     sampleData,
     businessProfile,
+    systemMetrics,
   } = featureFlagDetails
-
   let sidebar = [
     productionAccess->productionAccessComponent,
     default->home,
@@ -334,7 +336,7 @@ let getHyperSwitchAppSidebars = (
     default->analytics,
     default->connectors,
     default->workflow,
-    default->developers(~userRole),
+    default->developers(userRole, systemMetrics),
     settings(
       ~isSettingsEnabled=default,
       ~isUserManagementEnabled=userManagement,
diff --git a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
index c341829a4..03f95e8de 100644
--- a/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
+++ b/src/screens/HyperSwitch/Analytics/HomePageOverview/HomePageOverviewComponent.res
@@ -245,12 +245,20 @@ module OverviewInfo = {
 
 @react.component
 let make = () => {
+  let {systemMetrics} =
+    HyperswitchAtom.featureFlagAtom
+    ->Recoil.useRecoilValueFromAtom
+    ->LogicUtils.safeParse
+    ->FeatureFlagUtils.featureFlagType
+
   <div className="flex flex-col gap-4">
     <p className=headingStyle> {"Overview"->React.string} </p>
     <div className="grid grid-cols-1 md:grid-cols-3 w-full gap-4">
       <ConnectorOverview />
       <PaymentOverview />
-      <SystemMetricsInsights />
+      <UIUtils.RenderIf condition={systemMetrics}>
+        <SystemMetricsInsights />
+      </UIUtils.RenderIf>
     </div>
     <OverviewInfo />
   </div>
diff --git a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
index 25f62e929..c7de1280b 100644
--- a/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
+++ b/src/screens/HyperSwitch/PaymentLogs/PaymentLogs.res
@@ -18,10 +18,10 @@ module PrettyPrintJson = {
 
     let parseJsonValue = () => {
       try {
-        let parsedValue = Window.getParsedJson(jsonToDisplay)->Js.Json.stringifyWithSpace(3)
+        let parsedValue = jsonToDisplay->Js.Json.parseExn->Js.Json.stringifyWithSpace(3)
         setParsedJson(_ => parsedValue)
       } catch {
-      | _ => setParsedJson(_ => "")
+      | _ => setParsedJson(_ => jsonToDisplay)
       }
     }
     React.useEffect1(() => {
@@ -97,7 +97,7 @@ module ApiDetailsComponent = {
     let headerStyle = "text-fs-13 font-medium text-grey-700 break-all"
     let logType = paymentDetailsValue->Js.Dict.get("request_id")->Belt.Option.isSome ? Payment : Sdk
     let apiName = switch logType {
-    | Payment => paymentDetailsValue->getString("api_name", "default value")
+    | Payment => paymentDetailsValue->getString("api_flow", "default value")->camelCaseToTitle
     | Sdk => paymentDetailsValue->getString("event_name", "default value")
     }->PaymentUtils.nameToURLMapper(~payment_id=paymentId, ())
     let createdTime = paymentDetailsValue->getString("created_at", "00000")