diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
index 6c8cdae6deb..0e10d32f8d1 100644
--- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
@@ -19,6 +19,15 @@ describe("CreatedKeyDisplay", () => {
     expect(screen.getByText("sk-test-123")).toBeInTheDocument();
   });
 
+  it("should theme the key box with tokens instead of a hardcoded light background", () => {
+    render(<CreatedKeyDisplay apiKey="sk-test-123" />);
+
+    const keyBox = screen.getByText("sk-test-123").parentElement as HTMLElement;
+
+    expect(keyBox).not.toHaveAttribute("style");
+    expect(keyBox).toHaveClass("bg-muted");
+  });
+
   it("should display the security warning", () => {
     render(<CreatedKeyDisplay apiKey="sk-test-123" />);
     expect(screen.getByText(/you will not be able to view it again/i)).toBeInTheDocument();
diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
index c14379378d3..5dbc17b13bf 100644
--- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
+++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
@@ -29,15 +29,8 @@ const CreatedKeyDisplay: React.FC<CreatedKeyDisplayProps> = ({ apiKey }) => {
       </p>
 
       <p className="text-sm text-muted-foreground mt-3 mb-1">Virtual Key:</p>
-      <div
-        style={{
-          background: "#f8f8f8",
-          padding: "10px",
-          borderRadius: "5px",
-          marginBottom: "10px",
-        }}
-      >
-        <pre style={{ wordWrap: "break-word", whiteSpace: "normal", margin: 0 }}>{apiKey}</pre>
+      <div className="bg-muted rounded-md p-2.5 mb-2.5">
+        <pre className="m-0 whitespace-normal break-words text-foreground">{apiKey}</pre>
       </div>
 
       <CopyToClipboard text={apiKey} onCopy={handleCopy}>