diff --git a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/FormattedToolView.tsx b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/FormattedToolView.tsx
index 1a6afd7fcfe..8a56312572c 100644
--- a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/FormattedToolView.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/FormattedToolView.tsx
@@ -25,31 +25,15 @@ export function FormattedToolView({ tool }: FormattedToolViewProps) {
     <div>
       {/* Description */}
       {tool.description && (
-        <div style={{ marginBottom: 16 }}>
-          <span
-            style={{
-              lineHeight: 1.6,
-              whiteSpace: "pre-wrap",
-            }}
-          >
-            {tool.description}
-          </span>
+        <div className="mb-4">
+          <span className="whitespace-pre-wrap leading-relaxed">{tool.description}</span>
         </div>
       )}
 
       {/* Parameters Table */}
       {parameterRows.length > 0 && (
         <div>
-          <span
-            className="text-muted-foreground"
-            style={{
-              fontSize: 12,
-              display: "block",
-              marginBottom: 8,
-            }}
-          >
-            Parameters
-          </span>
+          <span className="mb-2 block text-xs text-muted-foreground">Parameters</span>
           <Table>
             <TableHeader>
               <TableRow>
@@ -82,33 +66,10 @@ export function FormattedToolView({ tool }: FormattedToolViewProps) {
 
       {/* If tool was called, show the arguments used */}
       {tool.called && tool.callData && (
-        <div style={{ marginTop: 16 }}>
-          <span
-            className="text-muted-foreground"
-            style={{
-              fontSize: 12,
-              display: "block",
-              marginBottom: 8,
-            }}
-          >
-            Called With
-          </span>
-          <div
-            style={{
-              background: "#f6ffed",
-              border: "1px solid #b7eb8f",
-              borderRadius: 4,
-              padding: 12,
-            }}
-          >
-            <pre
-              style={{
-                margin: 0,
-                fontSize: 12,
-                whiteSpace: "pre-wrap",
-                wordBreak: "break-word",
-              }}
-            >
+        <div className="mt-4">
+          <span className="mb-2 block text-xs text-muted-foreground">Called With</span>
+          <div className="rounded border border-success/30 bg-success/10 p-3">
+            <pre className="m-0 whitespace-pre-wrap break-words text-xs text-foreground">
               {JSON.stringify(tool.callData.arguments, null, 2)}
             </pre>
           </div>
diff --git a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/JsonToolView.tsx b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/JsonToolView.tsx
index 2a2ceb644dc..d8431e52a51 100644
--- a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/JsonToolView.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/JsonToolView.tsx
@@ -20,19 +20,7 @@ export function JsonToolView({ tool }: JsonToolViewProps) {
   };
 
   return (
-    <pre
-      style={{
-        margin: 0,
-        whiteSpace: "pre-wrap",
-        wordBreak: "break-word",
-        fontSize: 12,
-        background: "#fafafa",
-        padding: 12,
-        borderRadius: 4,
-        maxHeight: 300,
-        overflow: "auto",
-      }}
-    >
+    <pre className="m-0 max-h-[300px] overflow-auto whitespace-pre-wrap break-words rounded bg-muted p-3 text-xs text-foreground">
       {JSON.stringify(toolJson, null, 2)}
     </pre>
   );
diff --git a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolItem.tsx b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolItem.tsx
index 112364f5ff3..26b39579859 100644
--- a/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolItem.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/ToolsSection/ToolItem.tsx
@@ -5,6 +5,7 @@
 import { useState } from "react";
 import { ChevronDown, ChevronRight, Wrench } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/cva.config";
 import { ParsedTool } from "./types";
 import { ToolExpandedContent } from "./ToolExpandedContent";
 
@@ -16,34 +17,23 @@ export function ToolItem({ tool }: ToolItemProps) {
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <div
-      style={{
-        border: "1px solid #f0f0f0",
-        borderRadius: 8,
-        overflow: "hidden",
-      }}
-    >
+    <div className="overflow-hidden rounded-lg border border-border">
       {/* Header Row - Always Visible */}
       <div
         onClick={() => setExpanded(!expanded)}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          padding: "12px 16px",
-          cursor: "pointer",
-          background: expanded ? "#fafafa" : "#fff",
-          transition: "background 0.2s",
-        }}
+        className={cn(
+          "flex cursor-pointer items-center justify-between gap-3 px-4 py-3 text-card-foreground transition-colors",
+          expanded ? "bg-muted" : "bg-card",
+        )}
       >
-        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <div className="flex items-center gap-2.5">
           <Wrench className="size-3.5 text-muted-foreground" />
-          <span style={{ fontSize: 14 }}>
+          <span className="text-sm">
             {tool.index}. {tool.name}
           </span>
         </div>
 
-        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <div className="flex items-center gap-2">
           <Badge variant={tool.called ? "default" : "secondary"}>{tool.called ? "called" : "not called"}</Badge>
           {expanded ? (
             <ChevronDown className="size-3 text-muted-foreground" />
@@ -55,13 +45,7 @@ export function ToolItem({ tool }: ToolItemProps) {
 
       {/* Expanded Content */}
       {expanded && (
-        <div
-          style={{
-            padding: "16px",
-            borderTop: "1px solid #f0f0f0",
-            background: "#fff",
-          }}
-        >
+        <div className="border-t border-border bg-card p-4 text-card-foreground">
           <ToolExpandedContent tool={tool} />
         </div>
       )}