diff --git a/ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.test.tsx b/ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.test.tsx
new file mode 100644
index 00000000000..76b90bdca90
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.test.tsx
@@ -0,0 +1,39 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import React from "react";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders, screen } from "../../../tests/test-utils";
+import PremiumLoggingSettings from "./PremiumLoggingSettings";
+
+const SOURCE_PATH = resolve(process.cwd(), "src/components/common_components/PremiumLoggingSettings.tsx");
+
+const HARDCODED_PALETTE =
+  /\b(?:text|bg|border|hover:bg|hover:text|hover:border|dark:bg|dark:text|dark:border|ring|divide|fill|stroke)-(?:gray|slate|zinc|neutral|stone|red|blue|green|yellow|amber|orange|indigo|purple|pink|rose|teal|cyan|sky|violet|fuchsia|lime|emerald)-\d+(?:\/\d+)?\b/g;
+
+const SEMANTIC_TOKEN =
+  /\b(?:text|bg|border|hover:bg|hover:text|ring|divide|fill|stroke)-(?:foreground|muted-foreground|muted|background|card|popover|primary|secondary|destructive|border|input|accent|ring)(?:-foreground)?(?:\/\d+)?\b/g;
+
+describe("PremiumLoggingSettings", () => {
+  it("styles itself from semantic tokens instead of hardcoded palette classes", () => {
+    const source = readFileSync(SOURCE_PATH, "utf8");
+
+    expect(source).toContain("export function PremiumLoggingSettings");
+    expect(source.match(SEMANTIC_TOKEN) ?? []).not.toHaveLength(0);
+    expect(source.match(HARDCODED_PALETTE) ?? []).toHaveLength(0);
+  });
+
+  it("shows the enterprise notice and withholds the editor from a free user", () => {
+    renderWithProviders(<PremiumLoggingSettings value={[]} onChange={vi.fn()} />);
+
+    expect(screen.getByText(/LiteLLM Enterprise feature/)).toBeInTheDocument();
+    expect(screen.getByText("✨ langfuse-logging")).toBeInTheDocument();
+    expect(screen.queryByText("Logging Integrations")).not.toBeInTheDocument();
+  });
+
+  it("renders the editor for a premium user", () => {
+    renderWithProviders(<PremiumLoggingSettings value={[]} onChange={vi.fn()} premiumUser />);
+
+    expect(screen.getByText("Logging Integrations")).toBeInTheDocument();
+    expect(screen.queryByText(/LiteLLM Enterprise feature/)).not.toBeInTheDocument();
+  });
+});
diff --git a/ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.tsx b/ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.tsx
index 62d2f182120..d1f3cfe6712 100644
--- a/ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.tsx
+++ b/ui/litellm-dashboard/src/components/common_components/PremiumLoggingSettings.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { Badge } from "@/components/ui/badge";
 import LoggingSettings from "../team/LoggingSettings";
 
 interface PremiumLoggingSettingsProps {
@@ -20,15 +21,15 @@ export function PremiumLoggingSettings({
     return (
       <div>
         <div className="flex flex-wrap gap-2 mb-3">
-          <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium opacity-50">
+          <Badge variant="secondary" className="opacity-50">
             ✨ langfuse-logging
-          </div>
-          <div className="inline-flex items-center px-3 py-1.5 rounded-lg bg-green-50 border border-green-200 text-green-800 text-sm font-medium opacity-50">
+          </Badge>
+          <Badge variant="secondary" className="opacity-50">
             ✨ datadog-logging
-          </div>
+          </Badge>
         </div>
-        <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
-          <p className="text-sm text-yellow-800">
+        <div className="p-3 bg-muted border border-border rounded-lg">
+          <p className="text-sm text-muted-foreground">
             Setting Key/Team logging settings is a LiteLLM Enterprise feature. Global Logging Settings are available for
             all free users. Get a trial key{" "}
             <a href="https://www.litellm.ai/#pricing" target="_blank" rel="noopener noreferrer" className="underline">
diff --git a/ui/litellm-dashboard/src/components/team/LoggingSettings.test.tsx b/ui/litellm-dashboard/src/components/team/LoggingSettings.test.tsx
index 17f20ad0dcc..ae02a26ddb0 100644
--- a/ui/litellm-dashboard/src/components/team/LoggingSettings.test.tsx
+++ b/ui/litellm-dashboard/src/components/team/LoggingSettings.test.tsx
@@ -1,9 +1,19 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
 import React from "react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders, screen, fireEvent } from "../../../tests/test-utils";
 import LoggingSettings from "./LoggingSettings";
 
+const SOURCE_PATH = resolve(process.cwd(), "src/components/team/LoggingSettings.tsx");
+
+const HARDCODED_PALETTE =
+  /\b(?:text|bg|border|hover:bg|hover:text|hover:border|dark:bg|dark:text|dark:border|ring|divide|fill|stroke)-(?:gray|slate|zinc|neutral|stone|red|blue|green|yellow|amber|orange|indigo|purple|pink|rose|teal|cyan|sky|violet|fuchsia|lime|emerald)-\d+(?:\/\d+)?\b/g;
+
+const SEMANTIC_TOKEN =
+  /\b(?:text|bg|border|hover:bg|hover:text|ring|divide|fill|stroke)-(?:foreground|muted-foreground|muted|background|card|popover|primary|secondary|destructive|border|input|accent|ring)(?:-foreground)?(?:\/\d+)?\b/g;
+
 describe("LoggingSettings", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -163,6 +173,33 @@ describe("LoggingSettings", () => {
     expect(screen.getByText("C")).toBeInTheDocument();
   });
 
+  it("styles itself from semantic tokens instead of hardcoded palette classes", () => {
+    const source = readFileSync(SOURCE_PATH, "utf8");
+
+    expect(source).toContain("const LoggingSettings");
+    expect(source.match(SEMANTIC_TOKEN) ?? []).not.toHaveLength(0);
+    expect(source.match(HARDCODED_PALETTE) ?? []).toHaveLength(0);
+  });
+
+  it("reports the chosen event type when a different option is picked", async () => {
+    const user = userEvent.setup({ delay: null });
+    const mockOnChange = vi.fn();
+    const initialValue = [
+      {
+        callback_name: "langsmith",
+        callback_type: "success",
+        callback_vars: {},
+      },
+    ];
+
+    renderWithProviders(<LoggingSettings value={initialValue} onChange={mockOnChange} />);
+
+    await user.click(screen.getByTitle("Success Only"));
+    await user.click(await screen.findByTitle("Failure Only"));
+
+    expect(mockOnChange).toHaveBeenCalledWith([expect.objectContaining({ callback_type: "failure" })]);
+  });
+
   it("correctly handles numerical input with decimal values", () => {
     const mockOnChange = vi.fn();
 
diff --git a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx
index eee6e76569d..0fc936159fa 100644
--- a/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx
+++ b/ui/litellm-dashboard/src/components/team/LoggingSettings.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { Select, Tooltip, Divider } from "antd";
 import { InfoCircleOutlined } from "@ant-design/icons";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group";
@@ -142,30 +143,24 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
     if (Object.keys(dynamicParams).length === 0) return null;
 
     return (
-      <div className="mt-6 pt-4 border-t border-gray-100">
+      <div className="mt-6 pt-4 border-t border-border">
         <div className="flex items-center space-x-2 mb-4">
-          <div className="w-3 h-3 bg-blue-100 rounded-full flex items-center justify-center">
-            <div className="w-1.5 h-1.5 bg-blue-500 rounded-full"></div>
+          <div className="w-3 h-3 bg-muted rounded-full flex items-center justify-center">
+            <div className="w-1.5 h-1.5 bg-primary rounded-full"></div>
           </div>
-          <span className="text-sm font-medium text-gray-700">Integration Parameters</span>
+          <span className="text-sm font-medium text-foreground">Integration Parameters</span>
         </div>
         <div className="grid grid-cols-1 gap-4">
           {Object.entries(dynamicParams).map(([paramName, paramType]) => (
             <div key={paramName} className="space-y-2">
-              <label className="text-sm font-medium text-gray-700 capitalize flex items-center space-x-1">
+              <label className="text-sm font-medium text-foreground capitalize flex items-center space-x-1">
                 <span>{paramName.replace(/_/g, " ")}</span>
-                {paramType === "password" && (
-                  <span className="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
-                    Sensitive
-                  </span>
-                )}
-                {paramType === "number" && (
-                  <span className="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium bg-yellow-100 text-yellow-800">
-                    Number
-                  </span>
-                )}
+                {paramType === "password" && <Badge variant="secondary">Sensitive</Badge>}
+                {paramType === "number" && <Badge variant="secondary">Number</Badge>}
               </label>
-              {paramType === "number" && <span className="text-xs text-gray-500">Value must be between 0 and 1</span>}
+              {paramType === "number" && (
+                <span className="text-xs text-muted-foreground">Value must be between 0 and 1</span>
+              )}
               {paramType === "number" ? (
                 <NumericalInput
                   step={0.01}
@@ -194,15 +189,15 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
       {/* Disabled Callbacks Section */}
       <div className="space-y-4">
         <div className="flex items-center space-x-2">
-          <BanIcon className="w-5 h-5 text-red-500" />
-          <span className="text-base font-semibold text-gray-800">Disabled Callbacks</span>
+          <BanIcon className="w-5 h-5 text-destructive" />
+          <span className="text-base font-semibold text-foreground">Disabled Callbacks</span>
           <Tooltip title="Select callbacks to disable for this key. Disabled callbacks will not receive any logging data.">
-            <InfoCircleOutlined className="text-gray-400 cursor-help" />
+            <InfoCircleOutlined className="text-muted-foreground cursor-help" />
           </Tooltip>
         </div>
 
         <div className="space-y-2">
-          <label className="text-sm font-medium text-gray-700">Disabled Callbacks</label>
+          <label className="text-sm font-medium text-foreground">Disabled Callbacks</label>
           <Select
             mode="multiple"
             placeholder="Select callbacks to disable"
@@ -229,7 +224,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
               );
             })}
           </Select>
-          <div className="text-xs text-gray-500">
+          <div className="text-xs text-muted-foreground">
             Select callbacks that should be disabled for this key. These callbacks will not receive any logging data.
           </div>
         </div>
@@ -240,19 +235,13 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
       {/* Logging Integrations Section */}
       <div className="flex justify-between items-center">
         <div className="flex items-center space-x-2">
-          <CogIcon className="w-5 h-5 text-blue-500" />
-          <span className="text-base font-semibold text-gray-800">Logging Integrations</span>
+          <CogIcon className="w-5 h-5 text-foreground" />
+          <span className="text-base font-semibold text-foreground">Logging Integrations</span>
           <Tooltip title="Configure callback logging integrations for this team.">
-            <InfoCircleOutlined className="text-gray-400 cursor-help" />
+            <InfoCircleOutlined className="text-muted-foreground cursor-help" />
           </Tooltip>
         </div>
-        <Button
-          variant="secondary"
-          onClick={addLoggingConfig}
-          size="sm"
-          className="hover:border-blue-400 hover:text-blue-500"
-          type="button"
-        >
+        <Button variant="secondary" onClick={addLoggingConfig} size="sm" type="button">
           <Plus />
           Add Integration
         </Button>
@@ -267,7 +256,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
           return (
             <Card
               key={index}
-              className="block p-6 border border-gray-200 shadow-xs hover:shadow-md transition-shadow duration-200"
+              className="block p-6 border border-border shadow-xs hover:shadow-md transition-shadow duration-200"
             >
               <div className="flex justify-between items-start mb-4">
                 <div className="flex items-center space-x-2">
@@ -284,7 +273,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
                   variant="ghost"
                   onClick={() => removeLoggingConfig(index)}
                   size="sm"
-                  className="text-red-500 hover:bg-red-50 hover:text-red-500"
+                  className="text-destructive hover:bg-destructive/10 hover:text-destructive"
                   type="button"
                 >
                   <Trash2 />
@@ -294,7 +283,7 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
               <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-gray-700">Integration Type</label>
+                    <label className="text-sm font-medium text-foreground">Integration Type</label>
                     <Select
                       value={callbackDisplayName}
                       placeholder="Select integration"
@@ -323,30 +312,15 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
                   </div>
 
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-gray-700">Event Type</label>
+                    <label className="text-sm font-medium text-foreground">Event Type</label>
                     <Select
                       value={config.callback_type}
                       onChange={(value) => updateLoggingConfig(index, "callback_type", value)}
                       className="w-full"
                     >
-                      <Option value="success">
-                        <div className="flex items-center space-x-2">
-                          <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                          <span>Success Only</span>
-                        </div>
-                      </Option>
-                      <Option value="failure">
-                        <div className="flex items-center space-x-2">
-                          <div className="w-2 h-2 bg-red-500 rounded-full"></div>
-                          <span>Failure Only</span>
-                        </div>
-                      </Option>
-                      <Option value="success_and_failure">
-                        <div className="flex items-center space-x-2">
-                          <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
-                          <span>Success & Failure</span>
-                        </div>
-                      </Option>
+                      <Option value="success">Success Only</Option>
+                      <Option value="failure">Failure Only</Option>
+                      <Option value="success_and_failure">Success &amp; Failure</Option>
                     </Select>
                   </div>
                 </div>
@@ -359,10 +333,12 @@ const LoggingSettings: React.FC<LoggingSettingsProps> = ({
       </div>
 
       {value.length === 0 && (
-        <div className="text-center py-12 text-gray-500 border-2 border-dashed border-gray-200 rounded-lg bg-gray-50/50">
-          <CogIcon className="w-12 h-12 text-gray-300 mb-3 mx-auto" />
+        <div className="text-center py-12 text-muted-foreground border-2 border-dashed border-border rounded-lg bg-muted/30">
+          <CogIcon className="w-12 h-12 text-muted-foreground mb-3 mx-auto" />
           <div className="text-base font-medium mb-1">No logging integrations configured</div>
-          <div className="text-sm text-gray-400">Click "Add Integration" to configure logging for this team</div>
+          <div className="text-sm text-muted-foreground">
+            Click "Add Integration" to configure logging for this team
+          </div>
         </div>
       )}
     </div>