diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx
index c0b4150b4f4..ca47b71725d 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/CacheLeakageCard.tsx
@@ -40,7 +40,7 @@ const compareRows = (a: CacheLeakageRow, b: CacheLeakageRow, sort: SortState): n
 const InfoTooltip = ({ info }: { info: string }) => (
   <Tooltip>
     <TooltipTrigger render={<span className="inline-flex" aria-label={info} />}>
-      <Info className="h-3 w-3 text-muted-foreground/70" />
+      <Info className="h-3 w-3 text-muted-foreground" />
     </TooltipTrigger>
     <TooltipContent className="max-w-xs">{info}</TooltipContent>
   </Tooltip>
@@ -72,7 +72,7 @@ const SortableHead = ({
           className="inline-flex items-center gap-1 font-medium hover:text-foreground"
         >
           {label}
-          <Arrow className={`h-3 w-3 ${active ? "text-foreground" : "text-muted-foreground/70"}`} />
+          <Arrow className={`h-3 w-3 ${active ? "text-foreground" : "text-muted-foreground"}`} />
         </button>
         <InfoTooltip info={info} />
       </span>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/TierTurnsChart.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/TierTurnsChart.tsx
index 5b9b8563baa..e55ebc07656 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/TierTurnsChart.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-optimization/_components/TierTurnsChart.tsx
@@ -133,7 +133,7 @@ const TierTurnsChart: React.FC<TierTurnsChartProps> = ({ view, autoRouters }) =>
                     {slice.tier} {Math.round((100 * slice.turns) / total).toLocaleString()}%
                   </p>
                   {slice.models.length > 0 && (
-                    <p className="text-xs break-words text-muted-foreground/70">{slice.models.join(", ")}</p>
+                    <p className="text-xs break-words text-muted-foreground">{slice.models.join(", ")}</p>
                   )}
                 </div>
               </li>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx
index fa4e8daf9d0..3fce928ed67 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/cost_tracking_settings.tsx
@@ -223,7 +223,7 @@ const CostTrackingSettings: React.FC<CostTrackingSettingsProps> = ({ userID, use
                     ) : (
                       <div className="py-16 px-6 text-center">
                         <svg
-                          className="mx-auto h-12 w-12 text-muted-foreground/70 mb-4"
+                          className="mx-auto h-12 w-12 text-muted-foreground mb-4"
                           fill="none"
                           stroke="currentColor"
                           viewBox="0 0 24 24"
@@ -278,7 +278,7 @@ const CostTrackingSettings: React.FC<CostTrackingSettingsProps> = ({ userID, use
                 ) : (
                   <div className="py-16 px-6 text-center">
                     <svg
-                      className="mx-auto h-12 w-12 text-muted-foreground/70 mb-4"
+                      className="mx-auto h-12 w-12 text-muted-foreground mb-4"
                       fill="none"
                       stroke="currentColor"
                       viewBox="0 0 24 24"
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_cost_results.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_cost_results.tsx
index 3179bfae023..127438bb01b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_cost_results.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/pricing_calculator/multi_cost_results.tsx
@@ -101,7 +101,7 @@ const SingleModelBreakdown: React.FC<{
       )}
 
       {(result.input_cost_per_token || result.output_cost_per_token) && (
-        <div className="text-xs text-muted-foreground/70 pt-2 border-t border-border">
+        <div className="text-xs text-muted-foreground pt-2 border-t border-border">
           Token Pricing:{" "}
           {result.input_cost_per_token && (
             <span>Input ${formatNumberWithCommas(result.input_cost_per_token * 1_000_000, 2)}/1M</span>
@@ -294,17 +294,17 @@ const MultiCostResults: React.FC<MultiCostResultsProps> = ({ multiResult, timePe
                     </TableCell>
                     <TableCell className="text-right">
                       {record.error ? (
-                        <span className="text-muted-foreground/70">-</span>
+                        <span className="text-muted-foreground">-</span>
                       ) : (
                         <span className="font-mono text-sm">{formatCost(record.cost_per_request)}</span>
                       )}
                     </TableCell>
                     <TableCell className="text-right">
                       {record.error ? (
-                        <span className="text-muted-foreground/70">-</span>
+                        <span className="text-muted-foreground">-</span>
                       ) : (
                         <span
-                          className={`font-mono text-sm ${(record.margin_cost_per_request ?? 0) > 0 ? "text-warning" : "text-muted-foreground/70"}`}
+                          className={`font-mono text-sm ${(record.margin_cost_per_request ?? 0) > 0 ? "text-warning" : "text-muted-foreground"}`}
                         >
                           {formatCost(record.margin_cost_per_request)}
                         </span>
@@ -312,7 +312,7 @@ const MultiCostResults: React.FC<MultiCostResultsProps> = ({ multiResult, timePe
                     </TableCell>
                     <TableCell className="text-right">
                       {record.error ? (
-                        <span className="text-muted-foreground/70">-</span>
+                        <span className="text-muted-foreground">-</span>
                       ) : (
                         <span className="font-mono text-sm">{formatCost(periodCost)}</span>
                       )}
@@ -325,7 +325,7 @@ const MultiCostResults: React.FC<MultiCostResultsProps> = ({ multiResult, timePe
                           aria-expanded={isExpanded}
                           aria-label={`${isExpanded ? "Hide" : "Show"} cost breakdown for ${record.model}`}
                           onClick={() => toggleExpanded(record.id)}
-                          className="text-muted-foreground/70 hover:text-muted-foreground"
+                          className="text-muted-foreground hover:text-foreground"
                         >
                           {isExpanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
                         </Button>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.tsx b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.tsx
index fa322d1b4d1..04823ac4aa0 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/cost-tracking/_components/provider_margin_table.tsx
@@ -138,7 +138,7 @@ const ProviderMarginTable: React.FC<ProviderMarginTableProps> = ({
                         autoFocus
                       />
                       <span className="text-muted-foreground">%</span>
-                      <span className="text-muted-foreground/70">+</span>
+                      <span className="text-muted-foreground">+</span>
                       <span className="text-muted-foreground">$</span>
                       <Input
                         value={editFixedAmount}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.tsx
index 57bae0f331d..bd70aa568db 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails-monitor/_components/GuardrailsOverview.tsx
@@ -150,7 +150,7 @@ export function GuardrailsOverview({
         <span
           className={
             row.original.avgLatency == null
-              ? "text-muted-foreground/70"
+              ? "text-muted-foreground"
               : row.original.avgLatency > 150
                 ? "text-destructive"
                 : row.original.avgLatency > 50
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx
index cc2d2051a24..c9de758f50d 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/TeamGuardrailsTab.tsx
@@ -358,7 +358,7 @@ function GuardrailCard({
                 <button
                   type="button"
                   onClick={onApprove}
-                  className="text-xs bg-success hover:bg-success/80 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
+                  className="text-xs bg-success hover:bg-success/80 text-success-foreground px-3 py-1.5 rounded-md transition-colors font-medium"
                 >
                   Approve
                 </button>
@@ -727,7 +727,7 @@ function DetailPanel({
               <button
                 type="button"
                 onClick={onApprove}
-                className="flex-1 flex items-center justify-center gap-1.5 bg-success hover:bg-success/80 text-white text-sm font-medium py-2 rounded-md transition-colors"
+                className="flex-1 flex items-center justify-center gap-1.5 bg-success hover:bg-success/80 text-success-foreground text-sm font-medium py-2 rounded-md transition-colors"
               >
                 <CheckIcon className="h-4 w-4" />
                 Approve
@@ -792,8 +792,10 @@ function ConfirmDialog({ action, guardrailName, onConfirm, onCancel }: ConfirmDi
           <button
             type="button"
             onClick={onConfirm}
-            className={`flex-1 text-white text-sm font-medium py-2 rounded-md transition-colors ${
-              isApprove ? "bg-success hover:bg-success/80" : "bg-destructive hover:bg-destructive/80"
+            className={`flex-1 text-sm font-medium py-2 rounded-md transition-colors ${
+              isApprove
+                ? "bg-success text-success-foreground hover:bg-success/80"
+                : "bg-destructive text-destructive-foreground hover:bg-destructive/80"
             }`}
           >
             {isApprove ? "Approve" : "Reject"}
@@ -1015,7 +1017,7 @@ export function TeamGuardrailsTab({ accessToken }: TeamGuardrailsTabProps) {
           <button
             type="button"
             onClick={() => setIsSubmitModalOpen(true)}
-            className="ml-auto flex items-center gap-2 bg-info hover:bg-info/80 text-white text-sm font-medium px-4 py-2 rounded-md transition-colors"
+            className="ml-auto flex items-center gap-2 bg-info hover:bg-info/80 text-info-foreground text-sm font-medium px-4 py-2 rounded-md transition-colors"
           >
             <PlusIcon className="h-4 w-4" />
             Add Guardrail
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
index 81cb9d89d3c..47326786890 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/guardrails/_components/add_guardrail_form.tsx
@@ -144,7 +144,7 @@ const createEmptyToolPermissionConfig = (): ToolPermissionConfig => ({
 });
 
 const getStepIndicatorClass = (isDone: boolean, isCurrent: boolean): string => {
-  if (isDone) return "bg-info text-white";
+  if (isDone) return "bg-info text-info-foreground";
   if (isCurrent) return "bg-background text-info border-2 border-info";
   return "bg-muted text-muted-foreground border border-border";
 };
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx
index 39e182fd8aa..378410e4790 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/EnvVarsSection.tsx
@@ -149,7 +149,7 @@ const ScopedValueOrDescription: React.FC<{ index: number }> = ({ index }) => {
             <InputGroupInput
               {...textControl(control)}
               placeholder="e.g. Your DB username"
-              className="text-muted-foreground/70"
+              className="text-muted-foreground"
             />
           </InputGroup>
         )}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx
index c6e47d4fb28..fe097387dd2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/MCPSubmissionsTab.tsx
@@ -107,7 +107,7 @@ function ConfirmDialog({ action, serverName, isCurrentlyActive, onConfirm, onCan
             placeholder="Reason for rejection (optional)"
             value={reviewNotes}
             onChange={(e) => setReviewNotes(e.target.value)}
-            className="w-full border border-border rounded-md px-3 py-2 text-sm text-foreground placeholder-muted-foreground/70 focus:outline-hidden focus:ring-1 focus:ring-ring mb-4 resize-none"
+            className="w-full border border-border rounded-md px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring mb-4 resize-none"
             rows={3}
           />
         )}
@@ -122,8 +122,10 @@ function ConfirmDialog({ action, serverName, isCurrentlyActive, onConfirm, onCan
           <button
             type="button"
             onClick={() => onConfirm(isApprove ? undefined : reviewNotes || undefined)}
-            className={`flex-1 text-white text-sm font-medium py-2 rounded-md transition-colors ${
-              isApprove ? "bg-success hover:bg-success/80" : "bg-destructive hover:bg-destructive/80"
+            className={`flex-1 text-sm font-medium py-2 rounded-md transition-colors ${
+              isApprove
+                ? "bg-success text-success-foreground hover:bg-success/80"
+                : "bg-destructive text-destructive-foreground hover:bg-destructive/80"
             }`}
           >
             {isApprove ? "Approve" : "Reject"}
@@ -157,14 +159,14 @@ function SubmissionRulesPanel({ requiredFields, onChange, onSave, isSaving }: Su
         onClick={() => setExpanded((v) => !v)}
       >
         <div className="flex items-center gap-2">
-          <SettingsIcon className="h-4 w-4 text-muted-foreground/70" />
+          <SettingsIcon className="h-4 w-4 text-muted-foreground" />
           <span className="text-sm font-semibold text-foreground">Submission Rules</span>
           {activeLabels.length > 0 ? (
             <span className="text-xs text-muted-foreground">
               ({activeLabels.length} required field{activeLabels.length !== 1 ? "s" : ""})
             </span>
           ) : (
-            <span className="text-xs text-muted-foreground/70 italic">no rules set</span>
+            <span className="text-xs text-muted-foreground italic">no rules set</span>
           )}
         </div>
         <div className="flex items-center gap-3">
@@ -183,9 +185,9 @@ function SubmissionRulesPanel({ requiredFields, onChange, onSave, isSaving }: Su
             </div>
           )}
           {expanded ? (
-            <ChevronUpIcon className="h-4 w-4 text-muted-foreground/70" />
+            <ChevronUpIcon className="h-4 w-4 text-muted-foreground" />
           ) : (
-            <ChevronDownIcon className="h-4 w-4 text-muted-foreground/70" />
+            <ChevronDownIcon className="h-4 w-4 text-muted-foreground" />
           )}
         </div>
       </div>
@@ -218,7 +220,7 @@ function SubmissionRulesPanel({ requiredFields, onChange, onSave, isSaving }: Su
                           <div className="text-sm font-medium text-foreground group-hover:text-info transition-colors">
                             {field.label}
                           </div>
-                          <div className="text-xs text-muted-foreground/70">{field.description}</div>
+                          <div className="text-xs text-muted-foreground">{field.description}</div>
                         </div>
                       </label>
                     );
@@ -235,7 +237,7 @@ function SubmissionRulesPanel({ requiredFields, onChange, onSave, isSaving }: Su
                 await onSave();
                 setExpanded(false);
               }}
-              className="px-4 py-1.5 text-sm font-medium text-white bg-info hover:bg-info/80 disabled:opacity-50 rounded-md transition-colors"
+              className="px-4 py-1.5 text-sm font-medium text-info-foreground bg-info hover:bg-info/80 disabled:opacity-50 rounded-md transition-colors"
             >
               {isSaving ? "Saving…" : "Save Rules"}
             </button>
@@ -296,11 +298,11 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
             )}
             {server.url && (
               <div className="flex items-center gap-1.5 mt-1.5">
-                <ServerIcon className="h-3.5 w-3.5 text-muted-foreground/70 shrink-0" />
+                <ServerIcon className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
                 <code className="text-xs text-muted-foreground font-mono truncate">{server.url}</code>
               </div>
             )}
-            <div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground/70">
+            <div className="flex items-center gap-3 mt-1.5 text-xs text-muted-foreground">
               <span>
                 Transport: <span className="text-muted-foreground">{server.transport ?? "sse"}</span>
               </span>
@@ -322,7 +324,7 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
                 <button
                   type="button"
                   onClick={onApprove}
-                  className="text-xs bg-success hover:bg-success/80 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
+                  className="text-xs bg-success hover:bg-success/80 text-success-foreground px-3 py-1.5 rounded-md transition-colors font-medium"
                 >
                   Approve
                 </button>
@@ -341,7 +343,7 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
               <button
                 type="button"
                 onClick={onApprove}
-                className="text-xs bg-success hover:bg-success/80 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
+                className="text-xs bg-success hover:bg-success/80 text-success-foreground px-3 py-1.5 rounded-md transition-colors font-medium"
               >
                 Re-approve
               </button>
@@ -367,7 +369,11 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
                 allPassed ? "bg-success" : "bg-destructive"
               }`}
             >
-              {allPassed ? <CheckIcon className="h-4 w-4 text-white" /> : <XIcon className="h-4 w-4 text-white" />}
+              {allPassed ? (
+                <CheckIcon className="h-4 w-4 text-success-foreground" />
+              ) : (
+                <XIcon className="h-4 w-4 text-destructive-foreground" />
+              )}
             </div>
             <div className="flex-1 min-w-0">
               <div className={`text-sm font-semibold leading-tight ${allPassed ? "text-success" : "text-destructive"}`}>
@@ -383,7 +389,7 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
                 <button
                   type="button"
                   onClick={onApprove}
-                  className="text-xs bg-success hover:bg-success/80 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
+                  className="text-xs bg-success hover:bg-success/80 text-success-foreground px-3 py-1.5 rounded-md transition-colors font-medium"
                 >
                   Approve
                 </button>
@@ -392,7 +398,7 @@ function MCPServerCard({ server, onApprove, onReject, requiredFields }: MCPServe
                 <button
                   type="button"
                   onClick={onApprove}
-                  className="text-xs bg-success hover:bg-success/80 text-white px-3 py-1.5 rounded-md transition-colors font-medium"
+                  className="text-xs bg-success hover:bg-success/80 text-success-foreground px-3 py-1.5 rounded-md transition-colors font-medium"
                 >
                   Re-approve
                 </button>
@@ -567,13 +573,13 @@ export function MCPSubmissionsTab({ accessToken }: MCPSubmissionsTabProps) {
 
       <div className="flex items-center gap-3 mb-5">
         <div className="relative flex-1 max-w-xs">
-          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/70" />
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           <input
             type="text"
             placeholder="Search MCP servers..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-full pl-9 pr-4 py-2 border border-border rounded-md text-sm text-foreground placeholder-muted-foreground/70 focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-info"
+            className="w-full pl-9 pr-4 py-2 border border-border rounded-md text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-info"
           />
         </div>
         <select
@@ -592,7 +598,7 @@ export function MCPSubmissionsTab({ accessToken }: MCPSubmissionsTabProps) {
         {isLoading && <div className="text-center py-12 text-muted-foreground text-sm">Loading submissions…</div>}
         {error && <div className="text-center py-12 text-destructive text-sm">{error}</div>}
         {!isLoading && !error && filtered.length === 0 && (
-          <div className="text-center py-12 text-muted-foreground/70 text-sm">
+          <div className="text-center py-12 text-muted-foreground text-sm">
             No MCP server submissions match your filters.
           </div>
         )}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx
index 59fd2b213a7..71cfd303d2e 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/mcp-servers/_components/mcp_connect.tsx
@@ -185,7 +185,7 @@ const MCPConnect: React.FC<MCPConnectProps> = ({ currentServerAccessGroups = []
   }> = ({ step, title, children }) => (
     <div className="flex gap-4">
       <div className="shrink-0">
-        <div className="w-8 h-8 bg-info text-white rounded-full flex items-center justify-center text-sm font-semibold">
+        <div className="w-8 h-8 bg-info text-info-foreground rounded-full flex items-center justify-center text-sm font-semibold">
           {step}
         </div>
       </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/A2AMetrics.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/A2AMetrics.tsx
index a41b1ea8356..3649eca0ef1 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/A2AMetrics.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/A2AMetrics.tsx
@@ -161,7 +161,7 @@ const A2AMetrics: React.FC<A2AMetricsProps> = ({ a2aMetadata, timeToFirstToken,
             >
               <FileText className="size-3" />
               Task: {truncateId(taskId)}
-              <Copy className="size-3 text-muted-foreground/70" />
+              <Copy className="size-3 text-muted-foreground" />
             </TooltipTrigger>
             <TooltipContent>Click to copy: {taskId}</TooltipContent>
           </Tooltip>
@@ -184,7 +184,7 @@ const A2AMetrics: React.FC<A2AMetricsProps> = ({ a2aMetadata, timeToFirstToken,
             >
               <Link className="size-3" />
               Session: {truncateId(contextId)}
-              <Copy className="size-3 text-muted-foreground/70" />
+              <Copy className="size-3 text-muted-foreground" />
             </TooltipTrigger>
             <TooltipContent>Click to copy: {contextId}</TooltipContent>
           </Tooltip>
@@ -233,7 +233,7 @@ const A2AMetrics: React.FC<A2AMetricsProps> = ({ a2aMetadata, timeToFirstToken,
                   type="button"
                   variant="ghost"
                   size="icon-xs"
-                  className="ml-2 text-muted-foreground/70 hover:text-info"
+                  className="ml-2 text-muted-foreground hover:text-info"
                   onClick={() => copyToClipboard(taskId)}
                   aria-label={`Copy task ID ${taskId}`}
                 >
@@ -252,7 +252,7 @@ const A2AMetrics: React.FC<A2AMetricsProps> = ({ a2aMetadata, timeToFirstToken,
                   type="button"
                   variant="ghost"
                   size="icon-xs"
-                  className="ml-2 text-muted-foreground/70 hover:text-info"
+                  className="ml-2 text-muted-foreground hover:text-info"
                   onClick={() => copyToClipboard(contextId)}
                   aria-label={`Copy session ID ${contextId}`}
                 >
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx
index 59eb76de460..2f21f84a136 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AdditionalModelSettings.tsx
@@ -101,7 +101,7 @@ const AdditionalModelSettings: React.FC<AdditionalModelSettingsProps> = ({
     }
   };
 
-  const disabledTextColor = useAdvancedParams ? "text-foreground" : "text-muted-foreground/70";
+  const disabledTextColor = useAdvancedParams ? "text-foreground" : "text-muted-foreground";
 
   return (
     <div className="w-80 space-y-4 p-4">
@@ -118,7 +118,7 @@ const AdditionalModelSettings: React.FC<AdditionalModelSettingsProps> = ({
           </label>
           <Tooltip>
             <TooltipTrigger aria-label="Help: Stream responses">
-              <Info className="size-3 shrink-0 cursor-pointer text-muted-foreground/70 hover:text-muted-foreground" />
+              <Info className="size-3 shrink-0 cursor-pointer text-muted-foreground hover:text-foreground" />
             </TooltipTrigger>
             <TooltipContent className="max-w-xs">
               Streams the answer token by token. Uncheck to send a non-streaming request and render the full response at
@@ -155,7 +155,7 @@ const AdditionalModelSettings: React.FC<AdditionalModelSettingsProps> = ({
           </label>
           <Popover>
             <PopoverTrigger aria-label="Help: Simulate failure to test fallbacks">
-              <Info className="size-3 shrink-0 cursor-pointer text-muted-foreground/70 hover:text-muted-foreground" />
+              <Info className="size-3 shrink-0 cursor-pointer text-muted-foreground hover:text-foreground" />
             </PopoverTrigger>
             <PopoverContent side="right" className="max-w-[340px] gap-2 p-3 text-sm">
               <p>
@@ -221,7 +221,7 @@ const AdditionalModelSettings: React.FC<AdditionalModelSettingsProps> = ({
               className="w-full accent-primary disabled:cursor-not-allowed"
               onChange={(event) => handleTemperatureChange(Number(event.target.value))}
             />
-            <div className="mt-1 flex justify-between text-xs text-muted-foreground/70">
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
               <span>0</span>
               <span>1.0</span>
               <span>2.0</span>
@@ -267,7 +267,7 @@ const AdditionalModelSettings: React.FC<AdditionalModelSettingsProps> = ({
               className="w-full accent-primary disabled:cursor-not-allowed"
               onChange={(event) => handleMaxTokensChange(Number(event.target.value))}
             />
-            <div className="mt-1 flex justify-between text-xs text-muted-foreground/70">
+            <div className="mt-1 flex justify-between text-xs text-muted-foreground">
               <span>1</span>
               <span>32768</span>
             </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
index 5d58a0c5485..1a5509b2019 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
@@ -492,7 +492,7 @@ export default function AgentBuilderView({
           <div className="flex-1 overflow-y-auto p-2">
             {loadingAgents ? (
               <div className="flex justify-center py-4" aria-busy="true">
-                <UiLoadingSpinner className="size-4 text-muted-foreground/70" />
+                <UiLoadingSpinner className="size-4 text-muted-foreground" />
               </div>
             ) : (
               <>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUpload.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUpload.tsx
index 7db046ad464..36e0a1e8bbe 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUpload.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatImageUpload.tsx
@@ -56,7 +56,7 @@ const ChatImageUpload: React.FC<ChatImageUploadProps> = ({ chatUploadedImage, on
               size="icon-sm"
               disabled={disabled}
               aria-label="Attach image or PDF"
-              className="text-muted-foreground/70 hover:text-muted-foreground"
+              className="text-muted-foreground hover:text-foreground"
               onClick={() => inputRef.current?.click()}
             />
           }
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
index 03590eade34..2dd3972a714 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx
@@ -1395,7 +1395,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                                 type="button"
                                 variant="ghost"
                                 size="icon-xs"
-                                className="cursor-not-allowed text-muted-foreground/70"
+                                className="cursor-not-allowed text-muted-foreground"
                                 disabled
                                 aria-label="Model Settings unavailable"
                               />
@@ -1484,7 +1484,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                           />
                         }
                       >
-                        <Info className="size-3.5 cursor-pointer text-muted-foreground/70" />
+                        <Info className="size-3.5 cursor-pointer text-muted-foreground" />
                       </TooltipTrigger>
                       <TooltipContent className="max-w-xs">
                         {endpointType === EndpointType.MCP
@@ -1615,7 +1615,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                                   </span>
                                   <button
                                     type="button"
-                                    className="text-xs text-muted-foreground/70 underline hover:text-info"
+                                    className="text-xs text-muted-foreground underline hover:text-info"
                                     onClick={() => setByokModalServer(server)}
                                   >
                                     Reconnect
@@ -1625,7 +1625,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                                 <Button
                                   type="button"
                                   size="xs"
-                                  className="rounded-lg bg-info px-3 py-1 text-xs font-medium text-white hover:bg-info/80"
+                                  className="rounded-lg bg-info px-3 py-1 text-xs font-medium text-info-foreground hover:bg-info/80"
                                   onClick={() => setByokModalServer(server)}
                                 >
                                   Connect
@@ -1643,7 +1643,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                     <Database className="mr-1 size-4" aria-hidden="true" /> Vector Store
                     <Tooltip>
                       <TooltipTrigger aria-label="About vector stores">
-                        <Info className="size-3.5 text-muted-foreground/70" />
+                        <Info className="size-3.5 text-muted-foreground" />
                       </TooltipTrigger>
                       <TooltipContent className="max-w-xs">
                         Select vector store(s) to use for this LLM API call. You can set up your vector store{" "}
@@ -1667,7 +1667,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                     <Shield className="mr-1 size-4" aria-hidden="true" /> Guardrails
                     <Tooltip>
                       <TooltipTrigger aria-label="About guardrails">
-                        <Info className="size-3.5 text-muted-foreground/70" />
+                        <Info className="size-3.5 text-muted-foreground" />
                       </TooltipTrigger>
                       <TooltipContent className="max-w-xs">
                         Select guardrail(s) to use for this LLM API call. You can set up your guardrails{" "}
@@ -1692,7 +1692,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                       <Shield className="mr-1 size-4" aria-hidden="true" /> Policies
                       <Tooltip>
                         <TooltipTrigger aria-label="About policies">
-                          <Info className="size-3.5 text-muted-foreground/70" />
+                          <Info className="size-3.5 text-muted-foreground" />
                         </TooltipTrigger>
                         <TooltipContent className="max-w-xs">
                           Select policy/policies to apply to this LLM API call. Policies define which guardrails are
@@ -1756,7 +1756,7 @@ const ChatUI: React.FC<ChatUIProps> = ({
                 </div>
                 <div className="min-h-0 min-w-0 flex-1 overflow-auto p-3 pb-0 sm:p-4 sm:pb-0">
                   {chatHistory.length === 0 && (
-                    <div className="flex h-full flex-col items-center justify-center text-muted-foreground/70">
+                    <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
                       <Bot className="mb-4 size-12" aria-hidden="true" />
                       <p className="text-sm">Start a conversation, generate an image, or handle audio</p>
                     </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx
index 4979d6794a0..91972b5d770 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterOutput.tsx
@@ -196,7 +196,7 @@ const CodeInterpreterOutput: React.FC<CodeInterpreterOutputProps> = ({ code, ann
             </div>
           ) : (
             <div className="flex items-center justify-center bg-muted p-4">
-              <span className="text-sm text-muted-foreground/70">Image not available</span>
+              <span className="text-sm text-muted-foreground">Image not available</span>
             </div>
           )}
         </div>
@@ -215,7 +215,7 @@ const CodeInterpreterOutput: React.FC<CodeInterpreterOutputProps> = ({ code, ann
             >
               <FileText className="size-4 text-info" aria-hidden="true" />
               <span className="text-sm">{annotation.filename}</span>
-              <Download className="size-3 text-muted-foreground/70" aria-hidden="true" />
+              <Download className="size-3 text-muted-foreground" aria-hidden="true" />
             </Button>
           ))}
         </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx
index 379cc36de61..0ad3170e1bf 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/CodeInterpreterTool.tsx
@@ -53,7 +53,7 @@ const CodeInterpreterTool: React.FC<CodeInterpreterToolProps> = ({
           <span className="font-medium text-foreground">Code Interpreter</span>
           <Tooltip>
             <TooltipTrigger aria-label="About Code Interpreter">
-              <Info className="size-3 text-muted-foreground/70" />
+              <Info className="size-3 text-muted-foreground" />
             </TooltipTrigger>
             <TooltipContent>
               Run Python code to generate files, charts, and analyze data. Container is created automatically.
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.tsx
index 2f81831ab3d..974b8738050 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/FilePreviewCard.tsx
@@ -16,7 +16,7 @@ function FilePreviewCard({ file, previewUrl, onRemove }: FilePreviewCardProps) {
         <div className="relative inline-block">
           {isPdf ? (
             <div className="w-10 h-10 rounded-md bg-destructive flex items-center justify-center">
-              <FileText className="size-4 text-white" aria-hidden="true" />
+              <FileText className="size-4 text-destructive-foreground" aria-hidden="true" />
             </div>
           ) : (
             <img
@@ -35,7 +35,7 @@ function FilePreviewCard({ file, previewUrl, onRemove }: FilePreviewCardProps) {
           variant="ghost"
           size="icon-xs"
           aria-label={`Remove ${file.name}`}
-          className="text-muted-foreground/70 hover:text-muted-foreground hover:bg-accent"
+          className="text-muted-foreground hover:text-foreground hover:bg-accent"
           onClick={onRemove}
         >
           <X className="size-3" />
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx
index 031523fc61d..b14707bc16a 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/RealtimePlayground.tsx
@@ -404,10 +404,10 @@ const RealtimePlayground: React.FC<RealtimePlaygroundProps> = ({
       {/* Messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-3">
         {messages.length === 0 && !isConnected && (
-          <div className="flex flex-col items-center justify-center h-full text-muted-foreground/70 gap-3">
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground gap-3">
             <Volume2 className="size-12" />
             <span className="text-lg text-muted-foreground">Realtime Voice Playground</span>
-            <p className="text-sm text-muted-foreground/70 text-center max-w-md">
+            <p className="text-sm text-muted-foreground text-center max-w-md">
               Click <b>Connect</b> to start a realtime session. You can speak using your microphone or type messages.
               The AI will respond with voice and text.
             </p>
@@ -419,11 +419,13 @@ const RealtimePlayground: React.FC<RealtimePlaygroundProps> = ({
             className={`flex ${msg.role === "user" ? "justify-end" : msg.role === "status" ? "justify-center" : "justify-start"}`}
           >
             {msg.role === "status" ? (
-              <div className="text-xs text-muted-foreground/70 italic px-3 py-1">{msg.content}</div>
+              <div className="text-xs text-muted-foreground italic px-3 py-1">{msg.content}</div>
             ) : (
               <div
                 className={`max-w-[75%] rounded-2xl px-4 py-2.5 ${
-                  msg.role === "user" ? "bg-info text-white rounded-br-md" : "bg-muted text-foreground rounded-bl-md"
+                  msg.role === "user"
+                    ? "bg-info text-info-foreground rounded-br-md"
+                    : "bg-muted text-foreground rounded-bl-md"
                 }`}
               >
                 <div className="text-xs font-medium mb-0.5 opacity-70">{msg.role === "user" ? "You" : "AI"}</div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUpload.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUpload.tsx
index 97eed2e6ace..607d9ce1ee1 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUpload.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ResponsesImageUpload.tsx
@@ -60,7 +60,7 @@ const ResponsesImageUpload: React.FC<ResponsesImageUploadProps> = ({
               size="icon-sm"
               disabled={disabled}
               aria-label="Attach image or PDF"
-              className="text-muted-foreground/70 hover:text-muted-foreground"
+              className="text-muted-foreground hover:text-foreground"
               onClick={() => inputRef.current?.click()}
             />
           }
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx
index 244c77a12ae..2e729500c77 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SearchResultsDisplay.tsx
@@ -52,7 +52,7 @@ export function SearchResultsDisplay({ searchResults }: SearchResultsDisplayProp
                   <div className="text-xs text-muted-foreground mb-2 flex items-center gap-2">
                     <span className="font-medium">Query:</span>
                     <span className="italic">&quot;{resultPage.search_query}&quot;</span>
-                    <span className="text-muted-foreground/70">•</span>
+                    <span className="text-muted-foreground">•</span>
                     <span className="text-muted-foreground">
                       {resultPage.data.length} result{resultPage.data.length !== 1 ? "s" : ""}
                     </span>
@@ -72,9 +72,9 @@ export function SearchResultsDisplay({ searchResults }: SearchResultsDisplayProp
                           <CollapsibleTrigger className="flex w-full items-center justify-between p-2 text-left transition-colors hover:bg-accent">
                             <div className="flex items-center gap-2 flex-1 min-w-0">
                               <ChevronRight
-                                className={`size-4 shrink-0 text-muted-foreground/70 transition-transform ${isResultExpanded ? "rotate-90" : ""}`}
+                                className={`size-4 shrink-0 text-muted-foreground transition-transform ${isResultExpanded ? "rotate-90" : ""}`}
                               />
-                              <FileText className="size-3 shrink-0 text-muted-foreground/70" />
+                              <FileText className="size-3 shrink-0 text-muted-foreground" />
                               <span className="text-xs font-medium text-foreground truncate">
                                 {result.filename || result.file_id || `Result ${resultIndex + 1}`}
                               </span>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx
index cf3898c58a0..35c8e839159 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/SessionManagement.tsx
@@ -64,7 +64,7 @@ const SessionManagement: React.FC<SessionManagementProps> = ({
           <span className="text-sm font-medium text-foreground">Session Management</span>
           <Tooltip>
             <TooltipTrigger aria-label="About session management">
-              <Info className="size-3 text-muted-foreground/70" />
+              <Info className="size-3 text-muted-foreground" />
             </TooltipTrigger>
             <TooltipContent>
               Choose between LiteLLM API session management (using previous_response_id) or UI-based session management
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
index 8e13dce1d98..640509f9f96 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
@@ -819,7 +819,7 @@ export default function CompareUI({ accessToken, disabledPersonalKeyCreation }:
                   <div className="flex items-center gap-3 p-3 bg-muted rounded-lg border border-border">
                     <div className="relative inline-block">
                       {isUploadedFilePdf ? (
-                        <div className="w-10 h-10 rounded-md bg-destructive flex items-center justify-center text-white">
+                        <div className="w-10 h-10 rounded-md bg-destructive flex items-center justify-center text-destructive-foreground">
                           <FileText className="size-4" aria-label="file-pdf" />
                         </div>
                       ) : (
@@ -835,7 +835,7 @@ export default function CompareUI({ accessToken, disabledPersonalKeyCreation }:
                       <div className="text-xs text-muted-foreground">{isUploadedFilePdf ? "PDF" : "Image"}</div>
                     </div>
                     <button
-                      className="flex items-center justify-center w-6 h-6 text-muted-foreground/70 hover:text-muted-foreground hover:bg-accent rounded-full transition-colors"
+                      className="flex items-center justify-center w-6 h-6 text-muted-foreground hover:text-foreground hover:bg-accent rounded-full transition-colors"
                       onClick={handleRemoveFile}
                       aria-label="Remove attachment"
                     >
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx
index bc4b2c951ff..37a4ddcb0a0 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.tsx
@@ -85,7 +85,7 @@ export function ComparisonPanel({
   };
 
   const disabledOpacity = comparison.useAdvancedParams ? 1 : 0.4;
-  const disabledTextColor = comparison.useAdvancedParams ? "text-foreground" : "text-muted-foreground/70";
+  const disabledTextColor = comparison.useAdvancedParams ? "text-foreground" : "text-muted-foreground";
 
   const handleTogglePopover = () => {
     setPopoverVisible((prev) => !prev);
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx
index 7151e23144d..b61533e4328 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/complianceUI/ComplianceUI.tsx
@@ -735,7 +735,7 @@ export default function ComplianceUI({
 
                 <div className="flex flex-col items-center pt-6 shrink-0">
                   <div className="w-px h-4 bg-border" />
-                  <span className="text-[10px] font-medium text-muted-foreground/70 my-1">or</span>
+                  <span className="text-[10px] font-medium text-muted-foreground my-1">or</span>
                   <div className="w-px h-4 bg-border" />
                 </div>
               </>
@@ -751,10 +751,10 @@ export default function ComplianceUI({
                   onClick={() => setShowGuardrailDropdown(!showGuardrailDropdown)}
                   className="w-full flex items-center justify-between border border-border rounded-lg px-3 py-2 text-sm text-left hover:border-ring transition-colors"
                 >
-                  <span className={selectedGuardrails.length > 0 ? "text-foreground" : "text-muted-foreground/70"}>
+                  <span className={selectedGuardrails.length > 0 ? "text-foreground" : "text-muted-foreground"}>
                     {selectedGuardrails.length > 0 ? `${selectedGuardrails.length} selected` : "None selected"}
                   </span>
-                  <ChevronDown className="w-4 h-4 text-muted-foreground/70" />
+                  <ChevronDown className="w-4 h-4 text-muted-foreground" />
                 </button>
                 {showGuardrailDropdown && (
                   <div className="absolute z-30 top-full left-0 right-0 mt-1 bg-card border border-border rounded-lg shadow-lg py-1 max-h-52 overflow-y-auto">
@@ -773,11 +773,11 @@ export default function ComplianceUI({
                           <div
                             className={`w-4 h-4 rounded-sm border flex items-center justify-center shrink-0 ${selectedGuardrails.includes(g.id) ? "bg-info border-info" : "border-border"}`}
                           >
-                            {selectedGuardrails.includes(g.id) && <Check className="w-3 h-3 text-white" />}
+                            {selectedGuardrails.includes(g.id) && <Check className="w-3 h-3 text-info-foreground" />}
                           </div>
                           <div className="min-w-0">
                             <div className="text-foreground">{g.name}</div>
-                            {g.type && <div className="text-[10px] text-muted-foreground/70">{g.type}</div>}
+                            {g.type && <div className="text-[10px] text-muted-foreground">{g.type}</div>}
                           </div>
                         </button>
                       ))
@@ -815,7 +815,7 @@ export default function ComplianceUI({
                 <button
                   type="button"
                   onClick={() => batchAbortControllerRef.current?.abort()}
-                  className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap bg-destructive text-white hover:bg-destructive/80"
+                  className="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap bg-destructive text-destructive-foreground hover:bg-destructive/80"
                 >
                   <Square className="w-3.5 h-3.5" /> Stop
                 </button>
@@ -824,7 +824,7 @@ export default function ComplianceUI({
                   type="button"
                   onClick={runTests}
                   disabled={selectedPromptIds.size === 0 || disabledPersonalKeyCreation}
-                  className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${selectedPromptIds.size === 0 || disabledPersonalKeyCreation ? "bg-muted text-muted-foreground/70 cursor-not-allowed" : "bg-info text-white hover:bg-info/80"}`}
+                  className={`flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${selectedPromptIds.size === 0 || disabledPersonalKeyCreation ? "bg-muted text-muted-foreground cursor-not-allowed" : "bg-info text-info-foreground hover:bg-info/80"}`}
                 >
                   <Play className="w-3.5 h-3.5" /> Simulate ({selectedPromptIds.size})
                 </button>
@@ -858,19 +858,19 @@ export default function ComplianceUI({
               <div className="px-4 pt-4 pb-2">
                 <div className="flex items-center justify-between mb-2.5">
                   <h3 className="text-sm font-semibold text-foreground">Test Prompts</h3>
-                  <span className="text-[11px] text-muted-foreground/70 tabular-nums">
+                  <span className="text-[11px] text-muted-foreground tabular-nums">
                     {selectedPromptIds.size}/{totalPromptCount}
                   </span>
                 </div>
 
                 <div className="relative mb-2.5">
-                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground/70" />
+                  <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground" />
                   <input
                     type="text"
                     value={searchPrompt}
                     onChange={(e) => setSearchPrompt(e.target.value)}
                     placeholder="Search prompts..."
-                    className="w-full border border-border rounded-lg pl-8 pr-3 py-1.5 text-xs placeholder:text-muted-foreground/70 focus:outline-hidden focus:ring-2 focus:ring-blue-500/20 focus:border-info"
+                    className="w-full border border-border rounded-lg pl-8 pr-3 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-blue-500/20 focus:border-info"
                   />
                 </div>
 
@@ -883,7 +883,7 @@ export default function ComplianceUI({
                     >
                       Select All
                     </button>
-                    <span className="text-muted-foreground/70 text-[10px]">·</span>
+                    <span className="text-muted-foreground text-[10px]">·</span>
                     <button
                       type="button"
                       onClick={deselectAll}
@@ -924,7 +924,7 @@ export default function ComplianceUI({
                     onChange={(e) => setNewPromptText(e.target.value)}
                     placeholder="Enter your test prompt..."
                     rows={2}
-                    className="w-full border border-border rounded-sm px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground/70 focus:outline-hidden focus:ring-2 focus:ring-blue-500/20 focus:border-info resize-none bg-card"
+                    className="w-full border border-border rounded-sm px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-blue-500/20 focus:border-info resize-none bg-card"
                   />
                   <div className="flex items-center justify-between mt-2">
                     <div className="flex items-center gap-2">
@@ -958,7 +958,7 @@ export default function ComplianceUI({
                         type="button"
                         onClick={addCustomPrompt}
                         disabled={!newPromptText.trim()}
-                        className={`text-[11px] font-medium px-2.5 py-1 rounded-sm ${newPromptText.trim() ? "bg-info text-white" : "bg-muted text-muted-foreground/70"}`}
+                        className={`text-[11px] font-medium px-2.5 py-1 rounded-sm ${newPromptText.trim() ? "bg-info text-info-foreground" : "bg-muted text-muted-foreground"}`}
                       >
                         Add
                       </button>
@@ -985,7 +985,7 @@ export default function ComplianceUI({
                       <span className="font-semibold text-muted-foreground">Required columns:</span>{" "}
                       <code className="bg-muted px-1 rounded-sm text-[10px]">prompt</code>,{" "}
                       <code className="bg-muted px-1 rounded-sm text-[10px]">expected_result</code>{" "}
-                      <span className="text-muted-foreground/70">(fail or pass)</span>
+                      <span className="text-muted-foreground">(fail or pass)</span>
                     </p>
                     <p className="text-[10px] text-muted-foreground leading-relaxed mt-0.5">
                       <span className="font-semibold text-muted-foreground">Optional columns:</span>{" "}
@@ -1049,14 +1049,14 @@ export default function ComplianceUI({
                         className="w-full flex items-center gap-2 px-3 py-2.5 text-left bg-muted hover:bg-accent transition-colors rounded-lg border border-border"
                       >
                         {isExpanded ? (
-                          <ChevronDown className="w-4 h-4 text-muted-foreground/70 shrink-0" />
+                          <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0" />
                         ) : (
-                          <ChevronRight className="w-4 h-4 text-muted-foreground/70 shrink-0" />
+                          <ChevronRight className="w-4 h-4 text-muted-foreground shrink-0" />
                         )}
                         <CategoryIcon iconKey={fw.icon} className="w-4 h-4 text-muted-foreground shrink-0" />
                         <div className="flex-1 min-w-0">
                           <span className="text-xs font-semibold text-foreground">{fw.name}</span>
-                          <span className="text-[10px] text-muted-foreground/70 ml-1.5">{fwPromptCount} prompts</span>
+                          <span className="text-[10px] text-muted-foreground ml-1.5">{fwPromptCount} prompts</span>
                         </div>
                         {fwSelectedCount > 0 && (
                           <span className="text-[10px] font-medium bg-info/15 text-info px-1.5 py-0.5 rounded-full">
@@ -1092,9 +1092,9 @@ export default function ComplianceUI({
                                   className="w-full flex items-center gap-1.5 px-2.5 py-2 text-left hover:bg-accent transition-colors"
                                 >
                                   {isCatExpanded ? (
-                                    <ChevronDown className="w-3.5 h-3.5 text-muted-foreground/70 shrink-0" />
+                                    <ChevronDown className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                                   ) : (
-                                    <ChevronRight className="w-3.5 h-3.5 text-muted-foreground/70 shrink-0" />
+                                    <ChevronRight className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
                                   )}
                                   <span className="text-sm shrink-0">
                                     <CategoryIcon
@@ -1105,7 +1105,7 @@ export default function ComplianceUI({
                                   <span className="text-[11px] font-medium text-foreground flex-1 min-w-0 truncate">
                                     {category.name}
                                   </span>
-                                  <span className="text-[10px] text-muted-foreground/70 shrink-0">
+                                  <span className="text-[10px] text-muted-foreground shrink-0">
                                     {category.prompts.length}
                                   </span>
                                   {selectedInCat > 0 && (
@@ -1118,7 +1118,7 @@ export default function ComplianceUI({
                                 {isCatExpanded && (
                                   <div>
                                     <div className="px-2.5 py-1 flex items-center justify-between">
-                                      <p className="text-[10px] text-muted-foreground/70 leading-relaxed flex-1 mr-2 line-clamp-2">
+                                      <p className="text-[10px] text-muted-foreground leading-relaxed flex-1 mr-2 line-clamp-2">
                                         {category.description}
                                       </p>
                                       <button
@@ -1156,7 +1156,7 @@ export default function ComplianceUI({
                                               e.stopPropagation();
                                               deleteCustomPrompt(prompt.id);
                                             }}
-                                            className="opacity-0 group-hover:opacity-100 p-0.5 text-muted-foreground/70 hover:text-destructive transition-all shrink-0"
+                                            className="opacity-0 group-hover:opacity-100 p-0.5 text-muted-foreground hover:text-destructive transition-all shrink-0"
                                             aria-label="Delete"
                                           >
                                             <Trash2 className="w-3 h-3" />
@@ -1234,7 +1234,7 @@ export default function ComplianceUI({
                       })}
                     </div>
                   ) : (
-                    <p className="text-[11px] text-muted-foreground/70">
+                    <p className="text-[11px] text-muted-foreground">
                       No policies or guardrails selected — select above to test against specific rules.
                     </p>
                   )}
@@ -1245,7 +1245,7 @@ export default function ComplianceUI({
                     <div className="flex items-center justify-center h-full min-h-[120px]">
                       <div className="text-center">
                         <div className="w-10 h-10 bg-muted rounded-xl flex items-center justify-center mx-auto mb-3">
-                          <MessageSquare className="w-5 h-5 text-muted-foreground/70" />
+                          <MessageSquare className="w-5 h-5 text-muted-foreground" />
                         </div>
                         <p className="text-xs text-muted-foreground">Type a prompt below to quickly test it.</p>
                       </div>
@@ -1254,10 +1254,10 @@ export default function ComplianceUI({
                   {quickTestMessages.map((msg) => (
                     <div key={msg.id} className={`flex ${msg.type === "user" ? "justify-end" : "justify-start"}`}>
                       <div
-                        className={`max-w-[85%] rounded-lg px-3 py-2 ${msg.type === "user" ? "bg-info text-white" : msg.result === "blocked" ? "bg-destructive/10 border border-destructive/15" : "bg-success/10 border border-success/15"}`}
+                        className={`max-w-[85%] rounded-lg px-3 py-2 ${msg.type === "user" ? "bg-info text-info-foreground" : msg.result === "blocked" ? "bg-destructive/10 border border-destructive/15" : "bg-success/10 border border-success/15"}`}
                       >
                         <p
-                          className={`text-xs leading-relaxed ${msg.type === "user" ? "text-white" : msg.result === "blocked" ? "text-destructive" : "text-success"}`}
+                          className={`text-xs leading-relaxed ${msg.type === "user" ? "text-info-foreground" : msg.result === "blocked" ? "text-destructive" : "text-success"}`}
                         >
                           {msg.type === "system" && (
                             <span className="inline-flex items-center gap-1 font-semibold mr-1">
@@ -1284,7 +1284,7 @@ export default function ComplianceUI({
                   {isQuickTesting && (
                     <div className="flex justify-start">
                       <div className="bg-muted rounded-lg px-3 py-2">
-                        <Loader2 className="w-3.5 h-3.5 text-muted-foreground/70 animate-spin" />
+                        <Loader2 className="w-3.5 h-3.5 text-muted-foreground animate-spin" />
                       </div>
                     </div>
                   )}
@@ -1300,23 +1300,23 @@ export default function ComplianceUI({
                       onKeyDown={handleQuickTestKeyDown}
                       placeholder="Enter text to test..."
                       rows={3}
-                      className="w-full px-3 pt-3 pb-1 text-sm text-foreground placeholder:text-muted-foreground/70 focus:outline-hidden resize-none"
+                      className="w-full px-3 pt-3 pb-1 text-sm text-foreground placeholder:text-muted-foreground focus:outline-hidden resize-none"
                     />
                     <div className="flex items-center justify-between px-3 pb-2">
-                      <span className="text-[10px] text-muted-foreground/70">
+                      <span className="text-[10px] text-muted-foreground">
                         Press <kbd className="px-1 py-0.5 bg-muted rounded-sm text-[10px] font-mono">Enter</kbd> to
                         submit ·{" "}
                         <kbd className="px-1 py-0.5 bg-muted rounded-sm text-[10px] font-mono">Shift+Enter</kbd> for new
                         line
                       </span>
-                      <span className="text-[10px] text-muted-foreground/70 tabular-nums">{quickTestInput.length}</span>
+                      <span className="text-[10px] text-muted-foreground tabular-nums">{quickTestInput.length}</span>
                     </div>
                   </div>
                   <button
                     type="button"
                     onClick={runQuickTest}
                     disabled={!quickTestInput.trim() || isQuickTesting || disabledPersonalKeyCreation}
-                    className={`w-full mt-2 flex items-center justify-center gap-1.5 py-2.5 rounded-lg text-sm font-medium transition-colors ${!quickTestInput.trim() || isQuickTesting || disabledPersonalKeyCreation ? "bg-muted text-muted-foreground/70 cursor-not-allowed" : "bg-info text-white hover:bg-info/80"}`}
+                    className={`w-full mt-2 flex items-center justify-center gap-1.5 py-2.5 rounded-lg text-sm font-medium transition-colors ${!quickTestInput.trim() || isQuickTesting || disabledPersonalKeyCreation ? "bg-muted text-muted-foreground cursor-not-allowed" : "bg-info text-info-foreground hover:bg-info/80"}`}
                   >
                     {isQuickTesting ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}{" "}
                     {testButtonLabel}
@@ -1400,7 +1400,7 @@ export default function ComplianceUI({
                     <div className="flex items-center justify-center h-full min-h-[120px]">
                       <div className="text-center">
                         <div className="w-12 h-12 bg-muted rounded-xl flex items-center justify-center mx-auto mb-3">
-                          <FlaskConical className="w-6 h-6 text-muted-foreground/70" />
+                          <FlaskConical className="w-6 h-6 text-muted-foreground" />
                         </div>
                         <p className="text-xs text-muted-foreground max-w-[240px]">
                           Select prompts and click Simulate to run batch compliance tests.
@@ -1458,7 +1458,7 @@ export default function ComplianceUI({
                               <div className="flex items-start gap-2">
                                 <div className="shrink-0 mt-0.5">
                                   {result.status !== "complete" ? (
-                                    <Loader2 className="w-3.5 h-3.5 text-muted-foreground/70 animate-spin" />
+                                    <Loader2 className="w-3.5 h-3.5 text-muted-foreground animate-spin" />
                                   ) : result.isMatch ? (
                                     <CheckCircle2 className="w-3.5 h-3.5 text-success" />
                                   ) : (
@@ -1468,7 +1468,7 @@ export default function ComplianceUI({
                                 <div className="flex-1 min-w-0">
                                   <p className="text-[11px] text-foreground leading-relaxed mb-1.5">{result.prompt}</p>
                                   <div className="flex items-center gap-1.5 flex-wrap">
-                                    <span className="text-[9px] text-muted-foreground/70 inline-flex items-center gap-0.5">
+                                    <span className="text-[9px] text-muted-foreground inline-flex items-center gap-0.5">
                                       <CategoryIcon iconKey={result.categoryIcon} className="w-3 h-3" />
                                       {result.category}
                                     </span>
@@ -1497,7 +1497,7 @@ export default function ComplianceUI({
                                         return next;
                                       });
                                     }}
-                                    className="shrink-0 p-0.5 text-muted-foreground/70 hover:text-muted-foreground"
+                                    className="shrink-0 p-0.5 text-muted-foreground hover:text-foreground"
                                     aria-label={isExpanded ? "Collapse" : "Expand"}
                                   >
                                     {isExpanded ? (
@@ -1512,14 +1512,14 @@ export default function ComplianceUI({
                                 <div className="mt-2 pt-2 border-t border-border text-[11px] space-y-1">
                                   {result.triggeredBy && (
                                     <div>
-                                      <span className="text-muted-foreground/70">Triggered by:</span>{" "}
+                                      <span className="text-muted-foreground">Triggered by:</span>{" "}
                                       <span className="font-medium text-foreground bg-muted px-1.5 py-0.5 rounded-sm">
                                         {result.triggeredBy}
                                       </span>
                                     </div>
                                   )}
                                   <div>
-                                    <span className="text-muted-foreground/70">Verdict:</span>{" "}
+                                    <span className="text-muted-foreground">Verdict:</span>{" "}
                                     <span className={result.isMatch ? "text-success" : "text-destructive"}>
                                       {result.isMatch
                                         ? "Correctly handled"
@@ -1530,7 +1530,7 @@ export default function ComplianceUI({
                                   </div>
                                   {result.returnedText != null && result.returnedText !== "" && (
                                     <div className="mt-1.5">
-                                      <span className="text-muted-foreground/70 block mb-0.5">LLM response:</span>
+                                      <span className="text-muted-foreground block mb-0.5">LLM response:</span>
                                       <div className="text-foreground bg-muted rounded-sm px-2 py-1.5 border border-border max-h-32 overflow-y-auto whitespace-pre-wrap wrap-break-word">
                                         {result.returnedText}
                                       </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx
index f52bdd15df4..21cf8dc4462 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/policies/_components/ai_suggestion_modal.tsx
@@ -393,7 +393,7 @@ const AiSuggestionModal: React.FC<AiSuggestionModalProps> = ({
       return (
         <div className="text-center py-12 text-muted-foreground">
           <svg
-            className="w-12 h-12 mx-auto mb-3 text-muted-foreground/70"
+            className="w-12 h-12 mx-auto mb-3 text-muted-foreground"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -478,7 +478,7 @@ const AiSuggestionModal: React.FC<AiSuggestionModalProps> = ({
                           </span>
                         ))}
                       {template.guardrails && template.guardrails.length > 4 && (
-                        <span className="text-[10px] text-muted-foreground/70">
+                        <span className="text-[10px] text-muted-foreground">
                           +{template.guardrails.length - 4} more
                         </span>
                       )}
@@ -528,7 +528,7 @@ const AiSuggestionModal: React.FC<AiSuggestionModalProps> = ({
                 setTestResults(null);
                 setTestOverallAction(null);
               }}
-              className="text-muted-foreground/70 hover:text-muted-foreground"
+              className="text-muted-foreground hover:text-foreground"
             >
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -853,7 +853,7 @@ const AiSuggestionModal: React.FC<AiSuggestionModalProps> = ({
                 {attackExamples.map((example, index) => (
                   <div key={index} className="relative group">
                     <textarea
-                      className="w-full rounded-lg border border-border px-3.5 py-2.5 pr-9 text-sm text-foreground placeholder-muted-foreground/70 focus:border-info focus:ring-1 focus:ring-ring overflow-hidden"
+                      className="w-full rounded-lg border border-border px-3.5 py-2.5 pr-9 text-sm text-foreground placeholder:text-muted-foreground focus:border-info focus:ring-1 focus:ring-ring overflow-hidden"
                       rows={1}
                       style={{ minHeight: "40px", resize: "none" }}
                       placeholder={
@@ -879,7 +879,7 @@ const AiSuggestionModal: React.FC<AiSuggestionModalProps> = ({
                     {attackExamples.length > 1 && (
                       <button
                         onClick={() => handleRemoveExample(index)}
-                        className="absolute top-2.5 right-2.5 text-muted-foreground/70 hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
+                        className="absolute top-2.5 right-2.5 text-muted-foreground hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
                       >
                         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -902,7 +902,7 @@ const AiSuggestionModal: React.FC<AiSuggestionModalProps> = ({
                 Description of what you want to block
               </label>
               <textarea
-                className="w-full rounded-lg border border-border px-3.5 py-2.5 text-sm text-foreground placeholder-muted-foreground/70 focus:border-info focus:ring-1 focus:ring-ring overflow-hidden"
+                className="w-full rounded-lg border border-border px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground focus:border-info focus:ring-1 focus:ring-ring overflow-hidden"
                 rows={1}
                 style={{ minHeight: "60px", resize: "none" }}
                 placeholder="e.g. Block PII leakage and prompt injection in our customer support chatbot"
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx
index ea20ac6fce8..7e551363a6b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/prompts/_components/prompt_info.tsx
@@ -402,7 +402,7 @@ const PromptInfoView: React.FC<PromptInfoProps> = ({ promptId, onClose, accessTo
                   </TableBody>
                 </Table>
               ) : (
-                <p className="text-muted-foreground/70">No versions found in {selectedEnv}</p>
+                <p className="text-muted-foreground">No versions found in {selectedEnv}</p>
               )}
             </Card>
           </TabsContent>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/router-settings/_components/general_settings.tsx b/ui/litellm-dashboard/src/app/(dashboard)/router-settings/_components/general_settings.tsx
index 57ed5e8320f..6687cf8fd6f 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/router-settings/_components/general_settings.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/router-settings/_components/general_settings.tsx
@@ -156,7 +156,7 @@ export const PromptCachingPanel: React.FC<{
         {ttlSetting && (
           <div className="mt-6 flex items-start justify-between gap-8">
             <div className="min-w-0 max-w-2xl">
-              <p className={`font-medium ${enabled ? "" : "text-muted-foreground/70"}`}>Cache lifetime (TTL)</p>
+              <p className={`font-medium ${enabled ? "" : "text-muted-foreground"}`}>Cache lifetime (TTL)</p>
               <p className="mt-1 break-words text-xs text-muted-foreground">{ttlSetting.field_description}</p>
             </div>
             <Select
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx
index 97398355337..384590f754d 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EndpointUsage/components/EndpointUsageTable.tsx
@@ -64,7 +64,7 @@ const EndpointUsageTable: React.FC<EndpointUsageTableProps> = ({ endpointData })
             </div>
             <div className="flex items-center space-x-2 text-sm min-w-[100px]">
               <span className="text-success font-medium">{record.successful_requests.toLocaleString()}</span>
-              <span className="text-muted-foreground/70">/</span>
+              <span className="text-muted-foreground">/</span>
               <span className="text-destructive font-medium">{record.failed_requests.toLocaleString()}</span>
             </div>
           </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx
index 6f25095f567..69198e42279 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/EntityUsage.tsx
@@ -351,7 +351,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
     [],
   );
 
-  const chev = "size-3 text-muted-foreground/70";
+  const chev = "size-3 text-muted-foreground";
   const expandIcon = showCostBreakdown ? <ChevronDown className={chev} /> : <ChevronRight className={chev} />;
 
   const renderSummaryTile = ({ title, value, className, tooltip, expandable }: SummaryTile) => (
@@ -365,9 +365,7 @@ const EntityUsage: React.FC<EntityUsageProps> = ({
           <h3 className="text-lg font-medium text-foreground">{title}</h3>
           {tooltip ? (
             <Tooltip>
-              <TooltipTrigger
-                render={<Info className="size-4 text-muted-foreground/70 hover:text-muted-foreground" />}
-              />
+              <TooltipTrigger render={<Info className="size-4 text-muted-foreground hover:text-foreground" />} />
               <TooltipContent>{tooltip}</TooltipContent>
             </Tooltip>
           ) : null}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
index 87979fb795e..f5d6db67478 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/EntityUsage/SpendByProvider.tsx
@@ -97,9 +97,7 @@ const SpendByProvider: React.FC<SpendByProviderProps> = ({ loading, isDateChangi
             <div className="flex items-center gap-1">
               <label className="text-sm text-foreground">Show Unknown</label>
               <Tooltip>
-                <TooltipTrigger
-                  render={<Info className="size-4 text-muted-foreground/70 hover:text-muted-foreground" />}
-                />
+                <TooltipTrigger render={<Info className="size-4 text-muted-foreground hover:text-foreground" />} />
                 <TooltipContent>Requests that failed to route to a provider</TooltipContent>
               </Tooltip>
             </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx
index cb04633588a..446687d978b 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsageAIChatPanel.tsx
@@ -255,7 +255,7 @@ const UsageAIChatPanel: React.FC<UsageAIChatPanelProps> = ({ open, onClose, acce
           </div>
           <button
             onClick={handleClose}
-            className="text-muted-foreground/70 hover:text-muted-foreground transition-colors p-1 rounded-md hover:bg-accent"
+            className="text-muted-foreground hover:text-foreground transition-colors p-1 rounded-md hover:bg-accent"
           >
             <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -295,7 +295,7 @@ const UsageAIChatPanel: React.FC<UsageAIChatPanelProps> = ({ open, onClose, acce
       {/* Chat messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-muted">
         {messages.length === 0 && !streamingContent && !isLoading && (
-          <div className="flex flex-col items-center justify-center h-full text-muted-foreground/70">
+          <div className="flex flex-col items-center justify-center h-full text-muted-foreground">
             <svg className="w-8 h-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path
                 strokeLinecap="round"
@@ -313,7 +313,7 @@ const UsageAIChatPanel: React.FC<UsageAIChatPanelProps> = ({ open, onClose, acce
           <div key={idx}>
             {msg.role === "user" ? (
               <div className="flex justify-end">
-                <div className="max-w-[88%] rounded-xl px-3.5 py-2 text-sm leading-relaxed bg-info text-white">
+                <div className="max-w-[88%] rounded-xl px-3.5 py-2 text-sm leading-relaxed bg-info text-info-foreground">
                   {msg.content}
                 </div>
               </div>
@@ -383,12 +383,12 @@ const UsageAIChatPanel: React.FC<UsageAIChatPanelProps> = ({ open, onClose, acce
         <div className="flex justify-between items-center mt-2">
           <button
             onClick={handleClear}
-            className="text-xs text-muted-foreground/70 hover:text-muted-foreground transition-colors"
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
             disabled={messages.length === 0}
           >
             Clear chat
           </button>
-          <span className="text-xs text-muted-foreground/70">Enter to send</span>
+          <span className="text-xs text-muted-foreground">Enter to send</span>
         </div>
       </div>
     </div>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
index f8f50717eba..cce5f16efb2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
@@ -593,9 +593,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                                   {gatewayActivity && (
                                     <Tooltip>
                                       <TooltipTrigger
-                                        render={
-                                          <Info className="size-4 text-muted-foreground/70 hover:text-muted-foreground" />
-                                        }
+                                        render={<Info className="size-4 text-muted-foreground hover:text-foreground" />}
                                       />
                                       <TooltipContent>
                                         Counted by the gateway when it answers a request, independent of spend logging.
@@ -624,9 +622,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                                   <h3 className="text-lg font-medium text-foreground">Failed Requests</h3>
                                   <Tooltip>
                                     <TooltipTrigger
-                                      render={
-                                        <Info className="size-4 text-muted-foreground/70 hover:text-muted-foreground" />
-                                      }
+                                      render={<Info className="size-4 text-muted-foreground hover:text-foreground" />}
                                     />
                                     <TooltipContent>
                                       {gatewayActivity
@@ -665,9 +661,9 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                                 <div className="flex items-center gap-2">
                                   <h3 className="text-lg font-medium text-foreground">Total Tokens</h3>
                                   {showTokenBreakdown ? (
-                                    <ChevronDown className="size-3 text-muted-foreground/70" />
+                                    <ChevronDown className="size-3 text-muted-foreground" />
                                   ) : (
-                                    <ChevronRight className="size-3 text-muted-foreground/70" />
+                                    <ChevronRight className="size-3 text-muted-foreground" />
                                   )}
                                 </div>
                                 <p className="text-2xl font-bold mt-2">
@@ -765,7 +761,7 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations }) => {
                               <Tooltip>
                                 <TooltipTrigger
                                   render={
-                                    <Info className="ml-2 inline size-4 text-muted-foreground/70 hover:text-muted-foreground" />
+                                    <Info className="ml-2 inline size-4 text-muted-foreground hover:text-foreground" />
                                   }
                                 />
                                 <TooltipContent>
diff --git a/ui/litellm-dashboard/src/app/globals.css b/ui/litellm-dashboard/src/app/globals.css
index 04a09693287..6d851d1ce27 100644
--- a/ui/litellm-dashboard/src/app/globals.css
+++ b/ui/litellm-dashboard/src/app/globals.css
@@ -92,9 +92,13 @@
   --accent: oklch(0.967 0.003 264.542);
   --accent-foreground: oklch(0.21 0.034 264.665);
   --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(1 0 0);
   --success: oklch(0.527 0.154 150.069);
+  --success-foreground: oklch(1 0 0);
   --warning: oklch(0.555 0.163 48.998);
+  --warning-foreground: oklch(1 0 0);
   --info: oklch(0.546 0.245 262.881);
+  --info-foreground: oklch(1 0 0);
   --border: oklch(0.928 0.006 264.531);
   --input: oklch(0.928 0.006 264.531);
   --ring: oklch(0.707 0.022 261.325);
@@ -130,9 +134,13 @@
   --accent: oklch(0.309 0 0);
   --accent-foreground: oklch(0.964 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.209 0 0);
   --success: oklch(0.792 0.209 151.711);
+  --success-foreground: oklch(0.209 0 0);
   --warning: oklch(0.828 0.189 84.429);
+  --warning-foreground: oklch(0.209 0 0);
   --info: oklch(0.707 0.165 254.624);
+  --info-foreground: oklch(0.209 0 0);
   --border: oklch(0.309 0 0);
   --input: oklch(0.56 0 0);
   --ring: oklch(0.569 0 0);
@@ -172,9 +180,13 @@
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
   --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
   --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
   --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -244,7 +256,7 @@
 
   input::placeholder,
   textarea::placeholder {
-    color: color-mix(in oklab, var(--color-muted-foreground) 70%, transparent);
+    color: var(--color-muted-foreground);
   }
 
   body {
diff --git a/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx b/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx
index 7a2ff5e253f..17ae6c4bf30 100644
--- a/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx
+++ b/ui/litellm-dashboard/src/components/AIHub/UsefulLinksManagement.tsx
@@ -280,7 +280,7 @@ const UsefulLinksManagement: React.FC<UsefulLinksManagementProps> = ({ accessTok
                 <button
                   onClick={handleAddLink}
                   disabled={!newLink.url || !newLink.displayName}
-                  className={`flex items-center px-4 py-2 rounded-md text-sm ${!newLink.url || !newLink.displayName ? "bg-border text-muted-foreground cursor-not-allowed" : "bg-success text-white hover:bg-success/80"}`}
+                  className={`flex items-center px-4 py-2 rounded-md text-sm ${!newLink.url || !newLink.displayName ? "bg-border text-muted-foreground cursor-not-allowed" : "bg-success text-success-foreground hover:bg-success/80"}`}
                 >
                   <PlusCircleIcon className="w-4 h-4 mr-1" />
                   Add Link
@@ -312,7 +312,7 @@ const UsefulLinksManagement: React.FC<UsefulLinksManagementProps> = ({ accessTok
                 <div className="flex space-x-2">
                   <button
                     onClick={handleSaveRearranging}
-                    className="text-xs bg-success text-white px-3 py-1.5 rounded-sm hover:bg-success/80"
+                    className="text-xs bg-success text-success-foreground px-3 py-1.5 rounded-sm hover:bg-success/80"
                   >
                     Save Order
                   </button>
diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx
index 63c8f45574a..8d073feae82 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/LogViewer.tsx
@@ -183,15 +183,15 @@ export function LogViewer({
                     >
                       {config.label}
                     </span>
-                    <span className="text-xs text-muted-foreground/70">{log.timestamp}</span>
-                    <span className="text-xs text-muted-foreground/70">·</span>
+                    <span className="text-xs text-muted-foreground">{log.timestamp}</span>
+                    <span className="text-xs text-muted-foreground">·</span>
                     {log.model && (
                       <span className="min-w-0 text-xs break-words text-muted-foreground">{log.model}</span>
                     )}
                   </div>
                   <p className="text-sm text-foreground truncate">{log.input_snippet ?? log.input ?? "—"}</p>
                 </div>
-                <ChevronDown className="w-4 h-4 text-muted-foreground/70 shrink-0 mt-1" />
+                <ChevronDown className="w-4 h-4 text-muted-foreground shrink-0 mt-1" />
               </button>
             );
           })}
diff --git a/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx b/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx
index 314f3085c76..d5d249e4799 100644
--- a/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx
+++ b/ui/litellm-dashboard/src/components/GuardrailsMonitor/MetricCard.tsx
@@ -13,7 +13,7 @@ export function MetricCard({ label, value, valueColor = "text-foreground", icon,
     <div className="h-full bg-card border border-border rounded-lg p-5 flex flex-col">
       <div className="flex items-center justify-between mb-1">
         <span className="text-sm font-medium text-muted-foreground">{label}</span>
-        {icon && <span className="text-muted-foreground/70">{icon}</span>}
+        {icon && <span className="text-muted-foreground">{icon}</span>}
       </div>
       <div className={`text-3xl font-semibold ${valueColor} tracking-tight`}>{value}</div>
       {subtitle && <p className="text-xs text-muted-foreground mt-1">{subtitle}</p>}
diff --git a/ui/litellm-dashboard/src/components/HelpLink.tsx b/ui/litellm-dashboard/src/components/HelpLink.tsx
index be1f3e0a546..844e1f8d533 100644
--- a/ui/litellm-dashboard/src/components/HelpLink.tsx
+++ b/ui/litellm-dashboard/src/components/HelpLink.tsx
@@ -88,7 +88,7 @@ export const HelpIcon: React.FC<HelpIconProps> = ({ content, learnMoreHref, lear
     <div className="relative inline-block ml-1.5">
       <button
         type="button"
-        className="inline-flex items-center justify-center w-4 h-4 text-muted-foreground/70 hover:text-muted-foreground transition-colors cursor-help focus:outline-hidden focus:ring-2 focus:ring-ring rounded-full"
+        className="inline-flex items-center justify-center w-4 h-4 text-muted-foreground hover:text-foreground transition-colors cursor-help focus:outline-hidden focus:ring-2 focus:ring-ring rounded-full"
         onMouseEnter={() => setShowTooltip(true)}
         onMouseLeave={() => setShowTooltip(false)}
         onFocus={() => setShowTooltip(true)}
@@ -189,7 +189,7 @@ export const DocsMenu: React.FC<DocsMenuProps> = ({ items, children = "Docs", cl
               onClick={() => setIsOpen(false)}
             >
               <span>{item.label}</span>
-              <ExternalLink className="h-3.5 w-3.5 text-muted-foreground/70 shrink-0 ml-2" aria-hidden="true" />
+              <ExternalLink className="h-3.5 w-3.5 text-muted-foreground shrink-0 ml-2" aria-hidden="true" />
             </a>
           ))}
         </div>
diff --git a/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx b/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx
index 3eb54f8f301..95f76dbb2cc 100644
--- a/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx
+++ b/ui/litellm-dashboard/src/components/Navbar/UserDropdown/UserDropdown.tsx
@@ -247,7 +247,7 @@ const UserDropdown: React.FC<UserDropdownProps> = ({ onLogout, variant = "navbar
           <span className="hidden min-w-0 truncate text-left text-sm font-medium leading-none text-foreground md:inline">
             {displayName}
           </span>
-          <ChevronDown className="hidden size-2.5 shrink-0 text-muted-foreground/70 md:inline" aria-hidden />
+          <ChevronDown className="hidden size-2.5 shrink-0 text-muted-foreground md:inline" aria-hidden />
         </PopoverTrigger>
       )}
       <PopoverContent
diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/RoleMappings.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/RoleMappings.tsx
index db226f9fd80..2ea78f4b12b 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/RoleMappings.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/SSOSettings/RoleMappings.tsx
@@ -40,7 +40,7 @@ export default function RoleMappings({ roleMappings }: { roleMappings: RoleMappi
             ))}
           </div>
         ) : (
-          <span className="text-muted-foreground/70 italic">No groups mapped</span>
+          <span className="text-muted-foreground italic">No groups mapped</span>
         ),
     },
   ];
@@ -48,7 +48,7 @@ export default function RoleMappings({ roleMappings }: { roleMappings: RoleMappi
     <Card>
       <CardContent>
         <div className="flex items-center gap-3">
-          <Users className="w-6 h-6 text-muted-foreground/70 mb-2" />
+          <Users className="w-6 h-6 text-muted-foreground mb-2" />
           <h3 className="mb-2 text-2xl font-semibold text-foreground">Role Mappings</h3>
         </div>
         <div className="space-y-8">
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
index b45398eaed1..ba7b73a0ccb 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/FallbackGroupConfig.tsx
@@ -134,7 +134,7 @@ export function FallbackGroupConfig({
           {/* Fallback List */}
           <div className="space-y-2 min-h-[100px]">
             {group.fallbackModels.length === 0 ? (
-              <div className="h-32 border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground/70">
+              <div className="h-32 border-2 border-dashed border-border rounded-lg flex flex-col items-center justify-center text-muted-foreground">
                 <span className="text-sm">No fallback models selected</span>
                 <span className="text-xs mt-1">Add models from the dropdown above</span>
               </div>
@@ -146,7 +146,7 @@ export function FallbackGroupConfig({
                     className="group flex items-center justify-between p-3 bg-card rounded-lg border border-border hover:border-indigo-300 hover:shadow-xs transition-all"
                   >
                     <div className="flex items-center gap-3">
-                      <div className="flex items-center justify-center w-6 h-6 rounded-sm bg-muted text-muted-foreground/70 group-hover:text-indigo-500 group-hover:bg-indigo-50">
+                      <div className="flex items-center justify-center w-6 h-6 rounded-sm bg-muted text-muted-foreground group-hover:text-indigo-500 group-hover:bg-indigo-50">
                         <span className="text-xs font-bold">{index + 1}</span>
                       </div>
                       <div>
@@ -158,7 +158,7 @@ export function FallbackGroupConfig({
                       type="button"
                       aria-label={`Remove ${modelValue}`}
                       onClick={() => removeFallback(index)}
-                      className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground/70 hover:text-destructive p-1"
+                      className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive p-1"
                     >
                       <X className="w-4 h-4" />
                     </button>
diff --git a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
index d896574e04b..2ccd1a70dc5 100644
--- a/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/RouterSettings/Fallbacks/Fallbacks.tsx
@@ -56,7 +56,7 @@ function renderFallbacksChain(
         {list.map((model, i) => (
           <React.Fragment key={model}>
             {i > 0 && (
-              <span className={`${iconWrapperClass} text-muted-foreground/70`}>
+              <span className={`${iconWrapperClass} text-muted-foreground`}>
                 <ArrowRight className="h-3 w-3 shrink-0" />
               </span>
             )}
diff --git a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
index 46990370918..eed449d6676 100644
--- a/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
+++ b/ui/litellm-dashboard/src/components/UsagePage/components/EntityUsage/TopKeyView.tsx
@@ -122,10 +122,10 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
                 content={
                   <div>
                     <div>
-                      <span className="text-muted-foreground/70">Tag Name:</span> {tag.tag}
+                      <span className="text-muted-foreground">Tag Name:</span> {tag.tag}
                     </div>
                     <div>
-                      <span className="text-muted-foreground/70">Spend:</span>{" "}
+                      <span className="text-muted-foreground">Spend:</span>{" "}
                       {tag.usage > 0 && tag.usage < 0.01 ? "<$0.01" : `$${formatNumberWithCommas(tag.usage, 2)}`}
                     </div>
                   </div>
@@ -224,15 +224,15 @@ const TopKeyView: React.FC<TopKeyViewProps> = ({ topKeys, teams, showTags = fals
                 <div className="relative z-50 p-3 bg-black/90 shadow-lg rounded-lg text-white max-w-xs">
                   <div className="space-y-1.5">
                     <div className="text-sm">
-                      <span className="text-muted-foreground/70">Key Alias: </span>
+                      <span className="text-muted-foreground">Key Alias: </span>
                       <span className="font-mono text-gray-100 break-all">{item?.key_alias}</span>
                     </div>
                     <div className="text-sm">
-                      <span className="text-muted-foreground/70">Key ID: </span>
+                      <span className="text-muted-foreground">Key ID: </span>
                       <span className="font-mono text-gray-100 break-all">{item?.api_key}</span>
                     </div>
                     <div className="text-sm">
-                      <span className="text-muted-foreground/70">Spend: </span>
+                      <span className="text-muted-foreground">Spend: </span>
                       <span className="text-white font-medium">${formatNumberWithCommas(item?.spend, 2)}</span>
                     </div>
                   </div>
diff --git a/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx b/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx
index 89ecb3c22b8..51b8b734b4c 100644
--- a/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx
+++ b/ui/litellm-dashboard/src/components/VirtualKeysPage/keyTableColumns.tsx
@@ -76,7 +76,7 @@ const UserPopoverCell = ({
         { label: "User ID", value: userId },
       ].map(({ label, value }) => (
         <div key={label} className="flex flex-col min-w-0">
-          <span className="text-muted-foreground/70">{label}</span>
+          <span className="text-muted-foreground">{label}</span>
           {value ? (
             <IdCell value={value} variant="plain" copyable className="max-w-full" />
           ) : (
@@ -119,7 +119,7 @@ const InfoHeader = ({ label, tooltip }: { label: string; tooltip: string }) => (
   <span className="flex items-center gap-1">
     {label}
     <HoverCard>
-      <HoverCardTrigger render={<Info className="size-3 text-muted-foreground/70 cursor-help" />} />
+      <HoverCardTrigger render={<Info className="size-3 text-muted-foreground cursor-help" />} />
       <HoverCardContent className="w-auto">{tooltip}</HoverCardContent>
     </HoverCard>
   </span>
diff --git a/ui/litellm-dashboard/src/components/activity_metrics.tsx b/ui/litellm-dashboard/src/components/activity_metrics.tsx
index b8e5b70ae1f..a3fff08faae 100644
--- a/ui/litellm-dashboard/src/components/activity_metrics.tsx
+++ b/ui/litellm-dashboard/src/components/activity_metrics.tsx
@@ -234,7 +234,7 @@ const ModelCollapsible = ({
     >
       <CollapsibleTrigger className="flex w-full items-center gap-2 px-4 py-3 text-left">
         <ChevronDown
-          className={`size-4 shrink-0 text-muted-foreground/70 transition-transform ${open ? "" : "-rotate-90"}`}
+          className={`size-4 shrink-0 text-muted-foreground transition-transform ${open ? "" : "-rotate-90"}`}
         />
         {header}
       </CollapsibleTrigger>
diff --git a/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx
index 854b67df696..9f2774edfbe 100644
--- a/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/ClassificationMethodConfig.tsx
@@ -310,7 +310,7 @@ const ClassificationMethodConfig: React.FC<ClassificationMethodConfigProps> = ({
             <div className="flex items-center gap-2 mb-1">
               <strong className="font-semibold">Classification Rubric</strong>
               <SimpleTooltip content="Every rubric uses the same four tiers and the same tier definitions. They differ only in the worked examples that show the classifier where the boundary between tiers sits.">
-                <Info className="size-4 text-muted-foreground/70" />
+                <Info className="size-4 text-muted-foreground" />
               </SimpleTooltip>
             </div>
             <SimpleTooltip
@@ -433,7 +433,7 @@ const ClassificationMethodConfig: React.FC<ClassificationMethodConfigProps> = ({
               />
               <strong className="font-semibold">Include Assistant Turns</strong>
               <SimpleTooltip content="Off by default. Enabling it changes tier decisions, and therefore spend, for an existing router, and sends assistant text to the classifier model, which may be a different provider than the routed model.">
-                <Info className="size-4 text-muted-foreground/70" />
+                <Info className="size-4 text-muted-foreground" />
               </SimpleTooltip>
             </div>
             <span className="text-xs text-muted-foreground">
@@ -451,7 +451,7 @@ const ClassificationMethodConfig: React.FC<ClassificationMethodConfigProps> = ({
           <div className="flex items-center gap-2 mb-1">
             <strong className="font-semibold">Custom Technical Keywords</strong>
             <SimpleTooltip content="Domain-specific terms appended to the built-in technical keyword list. Prompts containing these terms score higher on the technical dimension and route to more capable models.">
-              <Info className="size-4 text-muted-foreground/70" />
+              <Info className="size-4 text-muted-foreground" />
             </SimpleTooltip>
           </div>
           <span className="block mb-2 text-xs text-muted-foreground">
diff --git a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
index 474b19e43a5..d199327a21e 100644
--- a/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/ComplexityRouterConfig.tsx
@@ -262,7 +262,7 @@ const ComplexityRouterConfig: React.FC<ComplexityRouterConfigProps> = ({
       <div className="inline-flex items-center gap-2 mb-4">
         <h4 className="m-0 text-xl font-semibold text-foreground">Complexity Tier Configuration</h4>
         <SimpleTooltip content="Map each complexity tier to one or more models. Simple queries use cheaper/faster models, complex queries use more capable models.">
-          <Info className="size-4 text-muted-foreground/70" />
+          <Info className="size-4 text-muted-foreground" />
         </SimpleTooltip>
       </div>
 
@@ -291,7 +291,7 @@ const ComplexityRouterConfig: React.FC<ComplexityRouterConfigProps> = ({
                   <div className="flex items-center gap-2 mb-2">
                     <strong className="text-base font-semibold">{label} Tier</strong>
                     <SimpleTooltip content={tierInfo.description}>
-                      <Info className="size-4 text-muted-foreground/70" />
+                      <Info className="size-4 text-muted-foreground" />
                     </SimpleTooltip>
                     <span className="text-xs text-muted-foreground">
                       Tier {index + 1} of {TIER_KEYS.length} &middot; {tier}
@@ -342,7 +342,7 @@ const ComplexityRouterConfig: React.FC<ComplexityRouterConfigProps> = ({
             <div className="flex items-center gap-2 mb-2">
               <strong className="text-base font-semibold">Default Model</strong>
               <SimpleTooltip content="Leave empty to follow the tiers. A model chosen here is pinned: it stays the default however the tiers change.">
-                <Info className="size-4 text-muted-foreground/70" />
+                <Info className="size-4 text-muted-foreground" />
               </SimpleTooltip>
             </div>
             <SearchSelect
diff --git a/ui/litellm-dashboard/src/components/add_model/EscalationKeywords.tsx b/ui/litellm-dashboard/src/components/add_model/EscalationKeywords.tsx
index ac96ea8b906..3409de472eb 100644
--- a/ui/litellm-dashboard/src/components/add_model/EscalationKeywords.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/EscalationKeywords.tsx
@@ -16,7 +16,7 @@ const EscalationKeywords: React.FC<EscalationKeywordsProps> = ({ keywords, onCha
       <div className="flex items-center gap-2 mb-1">
         <h4 className="m-0 text-xl font-semibold text-foreground">Escalation Keywords</h4>
         <SimpleTooltip content="Case-sensitive phrases a user can include in their message to force a bump to the next-higher complexity tier when they aren't happy with results. They can force a stronger model, but not choose which one.">
-          <Info className="size-4 text-muted-foreground/70" />
+          <Info className="size-4 text-muted-foreground" />
         </SimpleTooltip>
       </div>
       <span className="mb-2 block text-xs text-muted-foreground">
diff --git a/ui/litellm-dashboard/src/components/add_model/KeywordTierRules.tsx b/ui/litellm-dashboard/src/components/add_model/KeywordTierRules.tsx
index 949c8a31f2a..b5291a34cb6 100644
--- a/ui/litellm-dashboard/src/components/add_model/KeywordTierRules.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/KeywordTierRules.tsx
@@ -51,7 +51,7 @@ const KeywordTierRules: React.FC<KeywordTierRulesProps> = ({ rules, onChange, ti
         <div className="flex items-center gap-2">
           <h4 className="m-0 text-xl font-semibold text-foreground">Keyword Tier Overrides</h4>
           <SimpleTooltip content="Match known terms and force the request straight to a chosen complexity tier, bypassing rule-based scoring.">
-            <Info className="size-4 text-muted-foreground/70" />
+            <Info className="size-4 text-muted-foreground" />
           </SimpleTooltip>
         </div>
         <Button variant="outline" onClick={addRule}>
diff --git a/ui/litellm-dashboard/src/components/add_model/SemanticKeywordMatching.tsx b/ui/litellm-dashboard/src/components/add_model/SemanticKeywordMatching.tsx
index 666fabfcede..5684d32a319 100644
--- a/ui/litellm-dashboard/src/components/add_model/SemanticKeywordMatching.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/SemanticKeywordMatching.tsx
@@ -43,7 +43,7 @@ const SemanticKeywordMatching: React.FC<SemanticKeywordMatchingProps> = ({
           <div className="flex items-center gap-2">
             <span className="font-medium">Semantic keyword matching</span>
             <SimpleTooltip content="Recognize related phrasing beyond exact keyword matches by comparing embeddings instead of plain text. Overrides direct keyword matching">
-              <Info className="size-4 text-muted-foreground/70" />
+              <Info className="size-4 text-muted-foreground" />
             </SimpleTooltip>
           </div>
           <span className="text-muted-foreground text-sm">
diff --git a/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx b/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx
index 0943a9765fe..8669f067d6d 100644
--- a/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx
+++ b/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx
@@ -525,7 +525,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
             {parsedData.length === 0 ? (
               <div className="mb-6">
                 <div className="flex items-center mb-4">
-                  <div className="w-8 h-8 rounded-full bg-info text-white flex items-center justify-center mr-3">1</div>
+                  <div className="w-8 h-8 rounded-full bg-info text-info-foreground flex items-center justify-center mr-3">
+                    1
+                  </div>
                   <h3 className="text-lg font-medium">Download and fill the template</h3>
                 </div>
 
@@ -604,7 +606,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                 </div>
 
                 <div className="flex items-center mb-4">
-                  <div className="w-8 h-8 rounded-full bg-info text-white flex items-center justify-center mr-3">2</div>
+                  <div className="w-8 h-8 rounded-full bg-info text-info-foreground flex items-center justify-center mr-3">
+                    2
+                  </div>
                   <h3 className="text-lg font-medium">Upload your completed CSV</h3>
                 </div>
 
@@ -669,7 +673,7 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                           className="sr-only"
                           onChange={handleFileInputChange}
                         />
-                        <Upload className="size-[30px] text-muted-foreground/70 mb-2" />
+                        <Upload className="size-[30px] text-muted-foreground mb-2" />
                         <p className="mb-1">Drag and drop your CSV file here</p>
                         <p className="text-sm text-muted-foreground mb-3">or</p>
                         <span className={buttonVariants({ variant: "outline", size: "sm" })}>Browse files</span>
@@ -697,7 +701,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
             ) : (
               <div className="mb-6">
                 <div className="flex items-center mb-4">
-                  <div className="w-8 h-8 rounded-full bg-info text-white flex items-center justify-center mr-3">3</div>
+                  <div className="w-8 h-8 rounded-full bg-info text-info-foreground flex items-center justify-center mr-3">
+                    3
+                  </div>
                   <h3 className="text-lg font-medium">
                     {parsedData.some((user) => user.status === "success" || user.status === "failed")
                       ? "User Creation Results"
diff --git a/ui/litellm-dashboard/src/components/chat/ConversationList.tsx b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
index da57b70d096..0f513ad4381 100644
--- a/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
+++ b/ui/litellm-dashboard/src/components/chat/ConversationList.tsx
@@ -190,7 +190,7 @@ const ConversationRow: React.FC<ConversationRowProps> = ({ conv, isActive, onSel
                   <AlertDialogCancel>Cancel</AlertDialogCancel>
                   <AlertDialogAction
                     onClick={() => onDelete(conv.id)}
-                    className="bg-destructive text-white hover:bg-destructive/90"
+                    className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                   >
                     Delete
                   </AlertDialogAction>
diff --git a/ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx b/ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx
index 144c7d609a3..632553e6d1b 100644
--- a/ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx
+++ b/ui/litellm-dashboard/src/components/chat_ui/MCPEventsDisplay.tsx
@@ -161,10 +161,10 @@ interface MCPEventPanelProps {
 function MCPEventPanel({ title, open, onOpenChange, children }: MCPEventPanelProps) {
   return (
     <Collapsible open={open} onOpenChange={onOpenChange}>
-      <CollapsibleTrigger className="relative flex min-h-5 w-full items-center gap-1 pl-5 text-left text-sm font-normal leading-5 text-muted-foreground/70 hover:text-muted-foreground">
+      <CollapsibleTrigger className="relative flex min-h-5 w-full items-center gap-1 pl-5 text-left text-sm font-normal leading-5 text-muted-foreground hover:text-foreground">
         <ChevronRight
           className={cn(
-            "absolute left-0.5 top-0.5 size-4 text-muted-foreground/70 transition-transform",
+            "absolute left-0.5 top-0.5 size-4 text-muted-foreground transition-transform",
             open && "rotate-90",
           )}
           aria-hidden="true"
diff --git a/ui/litellm-dashboard/src/components/common_components/AutoRotationView.tsx b/ui/litellm-dashboard/src/components/common_components/AutoRotationView.tsx
index 5e84eb6820c..6140738f0c9 100644
--- a/ui/litellm-dashboard/src/components/common_components/AutoRotationView.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/AutoRotationView.tsx
@@ -45,7 +45,7 @@ const AutoRotationView: React.FC<AutoRotationViewProps> = ({
           <StatusBadge tone={autoRotate ? "success" : "neutral"} label={autoRotate ? "Enabled" : "Disabled"} />
           {autoRotate && rotationInterval && (
             <>
-              <p className="text-sm text-muted-foreground/70">•</p>
+              <p className="text-sm text-muted-foreground">•</p>
               <p className="text-sm text-muted-foreground">Every {rotationInterval}</p>
             </>
           )}
@@ -87,7 +87,7 @@ const AutoRotationView: React.FC<AutoRotationViewProps> = ({
 
       {!autoRotate && !lastRotationAt && !keyRotationAt && !nextRotationAt && (
         <div className="flex items-center gap-2 rounded-md border border-border bg-muted p-3">
-          <RefreshIcon className="h-4 w-4 text-muted-foreground/70" />
+          <RefreshIcon className="h-4 w-4 text-muted-foreground" />
           <p className="text-sm text-muted-foreground">Auto-rotation is not enabled for this key</p>
         </div>
       )}
diff --git a/ui/litellm-dashboard/src/components/common_components/RouterSettingsSummary.tsx b/ui/litellm-dashboard/src/components/common_components/RouterSettingsSummary.tsx
index 9f4e6285f12..0d0b6a19503 100644
--- a/ui/litellm-dashboard/src/components/common_components/RouterSettingsSummary.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/RouterSettingsSummary.tsx
@@ -18,7 +18,7 @@ export default function RouterSettingsSummary({
   emptyText = "No router settings configured",
 }: RouterSettingsSummaryProps) {
   if (!hasRouterSettings(routerSettings)) {
-    return <div className="text-muted-foreground/70">{emptyText}</div>;
+    return <div className="text-muted-foreground">{emptyText}</div>;
   }
 
   const settings = routerSettings as Record<string, unknown>;
@@ -44,7 +44,7 @@ export default function RouterSettingsSummary({
             {fallbacks.map(([model, targets]) => (
               <div key={model} className="text-xs text-muted-foreground">
                 <span className="font-medium">{model}</span>
-                <span className="mx-1 text-muted-foreground/70">-&gt;</span>
+                <span className="mx-1 text-muted-foreground">-&gt;</span>
                 {Array.isArray(targets) ? targets.join(", ") : String(targets)}
               </div>
             ))}
diff --git a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx
index 1bd7fbe11a2..c0c12356c6f 100644
--- a/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx
+++ b/ui/litellm-dashboard/src/components/key_team_helpers/BudgetFallbacksEditor.tsx
@@ -87,7 +87,7 @@ export function BudgetFallbacksEditor({ value, onChange, availableModels }: Budg
             <button
               type="button"
               onClick={() => removeEntry(entry.id)}
-              className="absolute top-2 right-2 text-muted-foreground/70 hover:text-destructive transition-colors p-1"
+              className="absolute top-2 right-2 text-muted-foreground hover:text-destructive transition-colors p-1"
             >
               <X className="w-4 h-4" />
             </button>
@@ -125,7 +125,7 @@ export function BudgetFallbacksEditor({ value, onChange, availableModels }: Budg
                 className="w-full"
               />
               {entry.fallbackModels.length > 1 && (
-                <div className="text-[10px] text-muted-foreground/70 mt-1 ml-1">
+                <div className="text-[10px] text-muted-foreground mt-1 ml-1">
                   Tried in order; first model still within its own budget is used
                 </div>
               )}
diff --git a/ui/litellm-dashboard/src/components/logging_settings_view.tsx b/ui/litellm-dashboard/src/components/logging_settings_view.tsx
index 8f81d8cef67..d4a0fc1327f 100644
--- a/ui/litellm-dashboard/src/components/logging_settings_view.tsx
+++ b/ui/litellm-dashboard/src/components/logging_settings_view.tsx
@@ -97,7 +97,7 @@ export function LoggingSettingsView({
           </div>
         ) : (
           <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted border border-border">
-            <CogIcon className="h-4 w-4 text-muted-foreground/70" />
+            <CogIcon className="h-4 w-4 text-muted-foreground" />
             <span className="text-muted-foreground text-sm">No logging integrations configured</span>
           </div>
         )}
@@ -140,7 +140,7 @@ export function LoggingSettingsView({
           </div>
         ) : (
           <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted border border-border">
-            <BanIcon className="h-4 w-4 text-muted-foreground/70" />
+            <BanIcon className="h-4 w-4 text-muted-foreground" />
             <span className="text-muted-foreground text-sm">No callbacks disabled</span>
           </div>
         )}
diff --git a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx
index 01accca123a..64dd066b535 100644
--- a/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx
+++ b/ui/litellm-dashboard/src/components/mcp_tools/ByokCredentialModal.tsx
@@ -87,7 +87,7 @@ export const ByokCredentialModal: React.FC<ByokCredentialModalProps> = ({ server
               <div className={`w-2 h-2 rounded-full ${step === 1 ? "bg-info" : "bg-border"}`} />
               <div className={`w-2 h-2 rounded-full ${step === 2 ? "bg-info" : "bg-border"}`} />
             </div>
-            <button onClick={handleClose} className="text-muted-foreground/70 hover:text-muted-foreground">
+            <button onClick={handleClose} className="text-muted-foreground hover:text-foreground">
               <X className="size-4" />
             </button>
           </div>
@@ -99,7 +99,7 @@ export const ByokCredentialModal: React.FC<ByokCredentialModalProps> = ({ server
                 <div className="w-14 h-14 rounded-xl bg-linear-to-br from-teal-400 to-cyan-600 flex items-center justify-center text-white font-bold text-xl shadow-sm">
                   L
                 </div>
-                <ArrowRight className="size-4.5 text-muted-foreground/70" />
+                <ArrowRight className="size-4.5 text-muted-foreground" />
                 <div className="w-14 h-14 rounded-xl bg-linear-to-br from-blue-600 to-indigo-800 flex items-center justify-center text-white font-bold text-xl shadow-sm">
                   {firstLetter}
                 </div>
@@ -158,7 +158,7 @@ export const ByokCredentialModal: React.FC<ByokCredentialModalProps> = ({ server
               </button>
               <button
                 onClick={handleClose}
-                className="mt-3 w-full text-muted-foreground/70 hover:text-muted-foreground text-sm py-2"
+                className="mt-3 w-full text-muted-foreground hover:text-foreground text-sm py-2"
               >
                 Cancel
               </button>
@@ -223,7 +223,7 @@ export const ByokCredentialModal: React.FC<ByokCredentialModalProps> = ({ server
               <button
                 onClick={handleAuthorize}
                 disabled={loading}
-                className="w-full bg-info hover:bg-info/80 disabled:opacity-60 text-white font-medium py-3 px-6 rounded-xl flex items-center justify-center gap-2 transition-colors"
+                className="w-full bg-info hover:bg-info/80 disabled:opacity-60 text-info-foreground font-medium py-3 px-6 rounded-xl flex items-center justify-center gap-2 transition-colors"
               >
                 <Lock className="size-4" /> Connect &amp; Authorize
               </button>
diff --git a/ui/litellm-dashboard/src/components/model_dashboard/HealthChecksTableColumns.tsx b/ui/litellm-dashboard/src/components/model_dashboard/HealthChecksTableColumns.tsx
index f0a63d397e2..d108058da12 100644
--- a/ui/litellm-dashboard/src/components/model_dashboard/HealthChecksTableColumns.tsx
+++ b/ui/litellm-dashboard/src/components/model_dashboard/HealthChecksTableColumns.tsx
@@ -135,7 +135,7 @@ function RunHealthCheckButton({
       className={cn(
         "rounded-md p-2 transition-colors",
         isLoading
-          ? "cursor-not-allowed bg-muted text-muted-foreground/70"
+          ? "cursor-not-allowed bg-muted text-muted-foreground"
           : "text-indigo-600 hover:bg-indigo-50 hover:text-indigo-700",
       )}
     >
diff --git a/ui/litellm-dashboard/src/components/model_group_alias_settings.tsx b/ui/litellm-dashboard/src/components/model_group_alias_settings.tsx
index 09511742786..1e943da25c5 100644
--- a/ui/litellm-dashboard/src/components/model_group_alias_settings.tsx
+++ b/ui/litellm-dashboard/src/components/model_group_alias_settings.tsx
@@ -206,7 +206,7 @@ const ModelGroupAliasSettings: React.FC<ModelGroupAliasSettingsProps> = ({
                 <button
                   onClick={handleAddAlias}
                   disabled={!newAlias.aliasName || !newAlias.targetModelGroup}
-                  className={`flex items-center px-4 py-2 rounded-md text-sm ${!newAlias.aliasName || !newAlias.targetModelGroup ? "bg-border text-muted-foreground cursor-not-allowed" : "bg-success text-white hover:bg-success/80"}`}
+                  className={`flex items-center px-4 py-2 rounded-md text-sm ${!newAlias.aliasName || !newAlias.targetModelGroup ? "bg-border text-muted-foreground cursor-not-allowed" : "bg-success text-success-foreground hover:bg-success/80"}`}
                 >
                   <PlusCircleIcon className="w-4 h-4 mr-1" />
                   Add Alias
diff --git a/ui/litellm-dashboard/src/components/permissions/AgentPermissions.tsx b/ui/litellm-dashboard/src/components/permissions/AgentPermissions.tsx
index b7a5b4ce197..d84bd1834f8 100644
--- a/ui/litellm-dashboard/src/components/permissions/AgentPermissions.tsx
+++ b/ui/litellm-dashboard/src/components/permissions/AgentPermissions.tsx
@@ -96,7 +96,7 @@ export function AgentPermissions({ agents, agentAccessGroups = [], accessToken }
         </div>
       ) : (
         <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted border border-border">
-          <UserGroupIcon className="h-4 w-4 text-muted-foreground/70" />
+          <UserGroupIcon className="h-4 w-4 text-muted-foreground" />
           <p className="text-muted-foreground text-sm">No agents or access groups configured</p>
         </div>
       )}
diff --git a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
index 8c0c96627c1..50461d52d27 100644
--- a/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
+++ b/ui/litellm-dashboard/src/components/permissions/MCPServerPermissions.tsx
@@ -173,9 +173,9 @@ export function MCPServerPermissions({
                         {toolsForServer.length === 1 ? "tool" : "tools"}
                       </span>
                       {isExpanded ? (
-                        <ChevronDownIcon className="h-3.5 w-3.5 text-muted-foreground/70 ml-0.5" />
+                        <ChevronDownIcon className="h-3.5 w-3.5 text-muted-foreground ml-0.5" />
                       ) : (
-                        <ChevronRightIcon className="h-3.5 w-3.5 text-muted-foreground/70 ml-0.5" />
+                        <ChevronRightIcon className="h-3.5 w-3.5 text-muted-foreground ml-0.5" />
                       )}
                     </div>
                   )}
@@ -229,9 +229,9 @@ export function MCPServerPermissions({
                         <span className="text-xs font-medium text-muted-foreground">{toolCount}</span>
                         <span className="text-xs text-muted-foreground">{toolCount === 1 ? "tool" : "tools"}</span>
                         {isExpanded ? (
-                          <ChevronDownIcon className="h-3.5 w-3.5 text-muted-foreground/70 ml-0.5" />
+                          <ChevronDownIcon className="h-3.5 w-3.5 text-muted-foreground ml-0.5" />
                         ) : (
-                          <ChevronRightIcon className="h-3.5 w-3.5 text-muted-foreground/70 ml-0.5" />
+                          <ChevronRightIcon className="h-3.5 w-3.5 text-muted-foreground ml-0.5" />
                         )}
                       </div>
                     )}
@@ -258,7 +258,7 @@ export function MCPServerPermissions({
         </div>
       ) : (
         <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted border border-border">
-          <ServerIcon className="h-4 w-4 text-muted-foreground/70" />
+          <ServerIcon className="h-4 w-4 text-muted-foreground" />
           <p className="text-muted-foreground text-sm">No MCP servers, access groups, or toolsets configured</p>
         </div>
       )}
diff --git a/ui/litellm-dashboard/src/components/permissions/VectorStorePermissions.tsx b/ui/litellm-dashboard/src/components/permissions/VectorStorePermissions.tsx
index b92b7bc3635..70a3430352c 100644
--- a/ui/litellm-dashboard/src/components/permissions/VectorStorePermissions.tsx
+++ b/ui/litellm-dashboard/src/components/permissions/VectorStorePermissions.tsx
@@ -69,7 +69,7 @@ export function VectorStorePermissions({ vectorStores, accessToken }: VectorStor
         </div>
       ) : (
         <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-muted border border-border">
-          <DatabaseIcon className="h-4 w-4 text-muted-foreground/70" />
+          <DatabaseIcon className="h-4 w-4 text-muted-foreground" />
           <p className="text-muted-foreground text-sm">No vector stores configured</p>
         </div>
       )}
diff --git a/ui/litellm-dashboard/src/components/public_model_hub.tsx b/ui/litellm-dashboard/src/components/public_model_hub.tsx
index 20360ee8c59..171b7992325 100644
--- a/ui/litellm-dashboard/src/components/public_model_hub.tsx
+++ b/ui/litellm-dashboard/src/components/public_model_hub.tsx
@@ -597,7 +597,7 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
                       <div className="flex items-center space-x-2 mb-3">
                         <p className="text-sm font-medium text-foreground">Search Models:</p>
                         <Tooltip>
-                          <TooltipTrigger render={<Info className="w-4 h-4 text-muted-foreground/70 cursor-help" />} />
+                          <TooltipTrigger render={<Info className="w-4 h-4 text-muted-foreground cursor-help" />} />
                           <TooltipContent side="top">
                             Smart search with relevance ranking - finds models containing your search terms, ranked by
                             relevance. Try searching &apos;xai grok-4&apos;, &apos;claude-4&apos;, &apos;gpt-4&apos;, or
@@ -606,7 +606,7 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
                         </Tooltip>
                       </div>
                       <div className="relative">
-                        <SearchIcon className="w-4 h-4 text-muted-foreground/70 absolute left-3 top-1/2 transform -translate-y-1/2" />
+                        <SearchIcon className="w-4 h-4 text-muted-foreground absolute left-3 top-1/2 transform -translate-y-1/2" />
                         <input
                           type="text"
                           placeholder="Search model names... (smart search enabled)"
@@ -731,14 +731,12 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
                         <div className="flex items-center space-x-2 mb-3">
                           <p className="text-sm font-medium text-foreground">Search Agents:</p>
                           <Tooltip>
-                            <TooltipTrigger
-                              render={<Info className="w-4 h-4 text-muted-foreground/70 cursor-help" />}
-                            />
+                            <TooltipTrigger render={<Info className="w-4 h-4 text-muted-foreground cursor-help" />} />
                             <TooltipContent side="top">Search agents by name or description</TooltipContent>
                           </Tooltip>
                         </div>
                         <div className="relative">
-                          <SearchIcon className="w-4 h-4 text-muted-foreground/70 absolute left-3 top-1/2 transform -translate-y-1/2" />
+                          <SearchIcon className="w-4 h-4 text-muted-foreground absolute left-3 top-1/2 transform -translate-y-1/2" />
                           <input
                             type="text"
                             placeholder="Search agent names or descriptions..."
@@ -799,14 +797,12 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken, isEmbedded
                         <div className="flex items-center space-x-2 mb-3">
                           <p className="text-sm font-medium text-foreground">Search MCP Servers:</p>
                           <Tooltip>
-                            <TooltipTrigger
-                              render={<Info className="w-4 h-4 text-muted-foreground/70 cursor-help" />}
-                            />
+                            <TooltipTrigger render={<Info className="w-4 h-4 text-muted-foreground cursor-help" />} />
                             <TooltipContent side="top">Search MCP servers by name or description</TooltipContent>
                           </Tooltip>
                         </div>
                         <div className="relative">
-                          <SearchIcon className="w-4 h-4 text-muted-foreground/70 absolute left-3 top-1/2 transform -translate-y-1/2" />
+                          <SearchIcon className="w-4 h-4 text-muted-foreground absolute left-3 top-1/2 transform -translate-y-1/2" />
                           <input
                             type="text"
                             placeholder="Search MCP server names or descriptions..."
diff --git a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
index f7477dc9cb4..ed26a3b1e8d 100644
--- a/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
+++ b/ui/litellm-dashboard/src/components/shared/advanced_date_picker.tsx
@@ -295,7 +295,7 @@ const AdvancedDatePicker: React.FC<AdvancedDatePickerProps> = ({
               <span className="text-foreground">{formatDisplayRange(value.from, value.to)}</span>
             </span>
             <svg
-              className={`w-4 h-4 text-muted-foreground/70 transition-transform ${isOpen ? "rotate-180" : ""}`}
+              className={`w-4 h-4 text-muted-foreground transition-transform ${isOpen ? "rotate-180" : ""}`}
               fill="none"
               stroke="currentColor"
               viewBox="0 0 24 24"
diff --git a/ui/litellm-dashboard/src/components/shared/chart_loader.tsx b/ui/litellm-dashboard/src/components/shared/chart_loader.tsx
index ccaa7bd0d61..0f7439a2e4c 100644
--- a/ui/litellm-dashboard/src/components/shared/chart_loader.tsx
+++ b/ui/litellm-dashboard/src/components/shared/chart_loader.tsx
@@ -13,7 +13,7 @@ export const ChartLoader: React.FC<ChartLoaderProps> = ({ isDateChanging = false
         <span className="text-muted-foreground text-sm font-medium">
           {isDateChanging ? "Processing date selection..." : "Loading chart data..."}
         </span>
-        <span className="text-muted-foreground/70 text-xs mt-1">
+        <span className="text-muted-foreground text-xs mt-1">
           {isDateChanging ? "This will only take a moment" : "Fetching your data"}
         </span>
       </div>
diff --git a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
index 25b40bf6c7c..727445e4fcd 100644
--- a/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
+++ b/ui/litellm-dashboard/src/components/team/TeamInfo.tsx
@@ -1048,7 +1048,7 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
                   <div key={index} className="space-y-2">
                     <div className="flex items-center gap-2">
                       <Badge variant="secondary">{policy}</Badge>
-                      {loadingPolicies && <p className="text-xs text-muted-foreground/70">Loading guardrails...</p>}
+                      {loadingPolicies && <p className="text-xs text-muted-foreground">Loading guardrails...</p>}
                     </div>
                     {!loadingPolicies && policyGuardrails[policy] && policyGuardrails[policy].length > 0 && (
                       <div className="ml-4 pl-3 border-l-2 border-border">
@@ -1743,14 +1743,14 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
                 {(() => {
                   const aliasEntries = Object.entries(info.litellm_model_table?.model_aliases ?? {});
                   if (aliasEntries.length === 0) {
-                    return <div className="text-muted-foreground/70">No model aliases configured</div>;
+                    return <div className="text-muted-foreground">No model aliases configured</div>;
                   }
                   return (
                     <div className="mt-1 space-y-1">
                       {aliasEntries.map(([alias, target]) => (
                         <div key={alias} className="text-sm">
                           <span className="font-mono">{alias}</span>
-                          <span className="text-muted-foreground/70">{" -> "}</span>
+                          <span className="text-muted-foreground">{" -> "}</span>
                           <span className="font-mono">{target}</span>
                         </div>
                       ))}
@@ -1850,7 +1850,7 @@ const TeamInfoView: React.FC<TeamInfoProps> = ({
                     {info.router_settings.enable_tag_filtering && <div>Tag Filtering: Enabled</div>}
                   </div>
                 ) : (
-                  <div className="text-muted-foreground/70">No router settings configured</div>
+                  <div className="text-muted-foreground">No router settings configured</div>
                 )}
               </div>
               <div>
diff --git a/ui/litellm-dashboard/src/components/templates/KeyInfoHeader.tsx b/ui/litellm-dashboard/src/components/templates/KeyInfoHeader.tsx
index 6f44d7d87c0..a6fbed5a041 100644
--- a/ui/litellm-dashboard/src/components/templates/KeyInfoHeader.tsx
+++ b/ui/litellm-dashboard/src/components/templates/KeyInfoHeader.tsx
@@ -100,7 +100,7 @@ function UserField({ userAlias, userEmail, userId }: { userAlias?: string | null
         { label: "User ID", value: userId || null },
       ].map(({ label, value }) => (
         <div key={label} className="flex flex-col min-w-0">
-          <span className="text-muted-foreground/70">{label}</span>
+          <span className="text-muted-foreground">{label}</span>
           {value ? (
             <div className="flex min-w-0 items-center gap-1">
               <span className="min-w-0 flex-1 truncate font-mono text-xs" title={value}>
diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
index 7126ead75bd..b14820d8afa 100644
--- a/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_info_view.tsx
@@ -695,7 +695,7 @@ export default function KeyInfoView({
                           <Badge variant="secondary" className="min-w-0 break-words">
                             {policy}
                           </Badge>
-                          {loadingPolicies && <p className="text-xs text-muted-foreground/70">Loading guardrails...</p>}
+                          {loadingPolicies && <p className="text-xs text-muted-foreground">Loading guardrails...</p>}
                         </div>
                         {!loadingPolicies && policyGuardrails[policy] && policyGuardrails[policy].length > 0 && (
                           <div className="ml-4 pl-3 border-l-2 border-border">
@@ -883,7 +883,7 @@ export default function KeyInfoView({
                         {Object.entries(currentKeyData.budget_fallbacks).map(([model, fallbacks]) => (
                           <div key={model} className="text-xs text-muted-foreground">
                             <span className="font-medium">{model}</span>
-                            <span className="mx-1 text-muted-foreground/70">-&gt;</span>
+                            <span className="mx-1 text-muted-foreground">-&gt;</span>
                             {fallbacks.join(", ")}
                           </div>
                         ))}
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/CompliancePanel.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/CompliancePanel.tsx
index 6f95e2e8068..06450f2b7d2 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/CompliancePanel.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/CompliancePanel.tsx
@@ -68,7 +68,7 @@ const ComplianceCard = ({
           ) : error ? (
             <TooltipProvider>
               <Tooltip>
-                <TooltipTrigger render={<span className="text-muted-foreground/70 text-sm" />}>--</TooltipTrigger>
+                <TooltipTrigger render={<span className="text-muted-foreground text-sm" />}>--</TooltipTrigger>
                 <TooltipContent>{error}</TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -120,7 +120,7 @@ const ComplianceCard = ({
                   <div className="min-w-0">
                     <div className="flex items-center gap-2">
                       <span className="text-sm font-medium text-foreground">{check.check_name}</span>
-                      <span className="text-[10px] font-mono text-muted-foreground/70">{check.article}</span>
+                      <span className="text-[10px] font-mono text-muted-foreground">{check.article}</span>
                     </div>
                     <p className="text-xs text-muted-foreground mt-0.5">{check.detail}</p>
                   </div>
diff --git a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
index b72f1cedf23..b5ea9d6d883 100644
--- a/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/GuardrailViewer/GuardrailViewer.tsx
@@ -430,7 +430,7 @@ const RequestLifecycle = ({ entries }: { entries: GuardrailInformation[] }) => {
                     {item.status}
                   </span>
                 )}
-                <span className="text-xs text-muted-foreground/70 font-mono ml-auto shrink-0">T+{item.offsetMs}ms</span>
+                <span className="text-xs text-muted-foreground font-mono ml-auto shrink-0">T+{item.offsetMs}ms</span>
               </div>
             </div>
           </div>
@@ -670,7 +670,7 @@ const GuardrailViewer = ({ data, accessToken, logEntry }: GuardrailViewerProps)
               <span className="text-sm text-muted-foreground">
                 {guardrailEntries.length} guardrail{guardrailEntries.length !== 1 ? "s" : ""} evaluated
               </span>
-              <span className="text-muted-foreground/70">|</span>
+              <span className="text-muted-foreground">|</span>
               <span
                 className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold ${
                   allPassed
diff --git a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
index d76d05bd813..392e0381b6a 100644
--- a/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/LogDetailsDrawer/LogDetailsDrawer.tsx
@@ -346,7 +346,7 @@ export function LogDetailsDrawer({
                       <button
                         type="button"
                         onClick={handleCopyLeftPanelId}
-                        className="text-muted-foreground/70 hover:text-muted-foreground"
+                        className="text-muted-foreground hover:text-foreground"
                         aria-label="Copy trace id"
                       >
                         {copiedLeftPanelId ? <Check className="size-3" /> : <Copy className="size-3" />}
diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestLogsTableColumns.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestLogsTableColumns.tsx
index a3590857103..fc7d1cf0a71 100644
--- a/ui/litellm-dashboard/src/components/view_logs/RequestLogsTableColumns.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/RequestLogsTableColumns.tsx
@@ -143,7 +143,7 @@ export const getRequestLogsTableColumns = ({
       return (
         <div className="flex flex-col items-end">
           {spend ? <CellTooltip content={`$${String(spend)}`} trigger={money} /> : money}
-          {isMultiCallSession && <span className="text-[10px] text-muted-foreground/70">session total</span>}
+          {isMultiCallSession && <span className="text-[10px] text-muted-foreground">session total</span>}
           {mcpCount > 0 && mcpSpend > 0 && (
             <span className="text-[10px] text-warning">
               incl. {getSpendString(mcpSpend)} from {mcpCount} MCP
@@ -253,7 +253,7 @@ export const getRequestLogsTableColumns = ({
       return (
         <span className="text-sm">
           {String(log.total_tokens || "0")}
-          <span className="text-muted-foreground/70 text-xs ml-1">
+          <span className="text-muted-foreground text-xs ml-1">
             ({String(log.prompt_tokens || "0")}+{String(log.completion_tokens || "0")})
           </span>
         </span>
diff --git a/ui/litellm-dashboard/src/components/view_logs/TypeBadges.tsx b/ui/litellm-dashboard/src/components/view_logs/TypeBadges.tsx
index 712f41dd3ad..df8e2f6ef00 100644
--- a/ui/litellm-dashboard/src/components/view_logs/TypeBadges.tsx
+++ b/ui/litellm-dashboard/src/components/view_logs/TypeBadges.tsx
@@ -13,7 +13,7 @@ export const SparkleIcon = ({ size = 12 }: { size?: number }) => (
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="shrink-0 text-muted-foreground/70"
+    className="shrink-0 text-muted-foreground"
   >
     <path d="M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3z" />
   </svg>