diff --git a/ui/litellm-dashboard/package-lock.json b/ui/litellm-dashboard/package-lock.json
index e76ae17175..312db1071c 100644
--- a/ui/litellm-dashboard/package-lock.json
+++ b/ui/litellm-dashboard/package-lock.json
@@ -32,6 +32,7 @@
         "react": "^18",
         "react-copy-to-clipboard": "^5.1.0",
         "react-dom": "^18",
+        "react-json-view-lite": "^2.5.0",
         "react-markdown": "^9.0.1",
         "react-syntax-highlighter": "^15.6.6",
         "tailwind-merge": "^3.2.0",
@@ -19303,6 +19304,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-json-view-lite": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-2.5.0.tgz",
+      "integrity": "sha512-tk7o7QG9oYyELWHL8xiMQ8x4WzjCzbWNyig3uexmkLb54r8jO0yH3WCWx8UZS0c49eSA4QUmG5caiRJ8fAn58g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
diff --git a/ui/litellm-dashboard/package.json b/ui/litellm-dashboard/package.json
index cc3c0ef4e7..d737698111 100644
--- a/ui/litellm-dashboard/package.json
+++ b/ui/litellm-dashboard/package.json
@@ -37,6 +37,7 @@
     "react": "^18",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18",
+    "react-json-view-lite": "^2.5.0",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.6.6",
     "tailwind-merge": "^3.2.0",
diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx
index d592712ba6..75690959dd 100644
--- a/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/RequestResponsePanel.tsx
@@ -1,5 +1,6 @@
 import { LogEntry } from "./columns";
 import NotificationsManager from "../molecules/notifications_manager";
+import { JsonView, allExpanded, darkStyles, defaultStyles } from 'react-json-view-lite';
 
 interface RequestResponsePanelProps {
   row: {
@@ -95,7 +96,8 @@ export function RequestResponsePanel({
         </div>
         <div className="p-4 overflow-auto max-h-96 w-full max-w-full box-border">
           <pre className="text-xs font-mono whitespace-pre-wrap break-all w-full max-w-full overflow-hidden break-words">
-            {JSON.stringify(getRawRequest(), null, 2)}
+            {/* {JSON.stringify(getRawRequest(), null, 2)} */}
+            <JsonView data={getRawRequest()} shouldExpandNode={allExpanded} style={defaultStyles} clickToExpandNode={true} />
           </pre>
         </div>
       </div>
@@ -132,7 +134,8 @@ export function RequestResponsePanel({
         <div className="p-4 overflow-auto max-h-96 bg-gray-50 w-full max-w-full box-border">
           {hasResponse ? (
             <pre className="text-xs font-mono whitespace-pre-wrap break-all w-full max-w-full overflow-hidden break-words">
-              {JSON.stringify(formattedResponse(), null, 2)}
+              {/* {JSON.stringify(formattedResponse(), null, 2)} */}
+              <JsonView data={formattedResponse()} shouldExpandNode={allExpanded} style={defaultStyles} clickToExpandNode={true} />
             </pre>
           ) : (
             <div className="text-gray-500 text-sm italic text-center py-4">Response data not available</div>