diff --git a/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.test.tsx b/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.test.tsx
index 535694f14da..f4c9cc7c44c 100644
--- a/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.test.tsx
+++ b/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.test.tsx
@@ -1,4 +1,4 @@
-import { renderWithProviders, screen } from "../../tests/test-utils";
+import { fireEvent, renderWithProviders, screen } from "../../tests/test-utils";
 import { vi } from "vitest";
 import { EnvCredentialLoginWarningBanner } from "./EnvCredentialLoginWarningBanner";
 import type { HealthReadinessDetailsResponse } from "@/app/(dashboard)/hooks/healthReadiness/useHealthReadinessDetails";
@@ -23,6 +23,22 @@ const mockRole = (userRole: string) => {
 };
 
 describe("EnvCredentialLoginWarningBanner", () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it("should hide the banner when dismissed and stay hidden on remount", () => {
+    mockRole("Admin");
+    mockDetails({ status: "healthy", show_env_credential_login_warning: true });
+    const first = renderWithProviders(<EnvCredentialLoginWarningBanner accessToken="token" />);
+    fireEvent.click(screen.getByRole("button", { name: "Dismiss banner" }));
+    expect(first.container).toBeEmptyDOMElement();
+
+    first.unmount();
+    const second = renderWithProviders(<EnvCredentialLoginWarningBanner accessToken="token" />);
+    expect(second.container).toBeEmptyDOMElement();
+  });
+
   it("should warn an admin when env-credential login is enabled", () => {
     mockRole("Admin");
     mockDetails({ status: "healthy", show_env_credential_login_warning: true });
diff --git a/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.tsx b/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.tsx
index 3a9d50011f1..a2cd531759e 100644
--- a/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.tsx
+++ b/ui/litellm-dashboard/src/components/EnvCredentialLoginWarningBanner.tsx
@@ -1,26 +1,37 @@
 "use client";
 
-import React from "react";
-import { TriangleAlert } from "lucide-react";
+import React, { useState } from "react";
+import { TriangleAlert, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { useHealthReadinessDetails } from "@/app/(dashboard)/hooks/healthReadiness/useHealthReadinessDetails";
 import { useAuth } from "@/contexts/AuthContext";
 import { isAdminRole } from "@/utils/roles";
 
+const DISMISS_STORAGE_KEY = "litellm:envCredentialLoginWarningDismissed";
+
 export const EnvCredentialLoginWarningBanner: React.FC<{ accessToken: string | null }> = ({ accessToken }) => {
   const { userRole } = useAuth();
   const { data: healthData } = useHealthReadinessDetails(accessToken);
+  const [dismissed, setDismissed] = useState(
+    () => typeof window !== "undefined" && localStorage.getItem(DISMISS_STORAGE_KEY) === "true",
+  );
 
-  if (!isAdminRole(userRole) || !healthData?.show_env_credential_login_warning) {
+  if (dismissed || !isAdminRole(userRole) || !healthData?.show_env_credential_login_warning) {
     return null;
   }
 
+  const handleDismiss = () => {
+    localStorage.setItem(DISMISS_STORAGE_KEY, "true");
+    setDismissed(true);
+  };
+
   return (
     <div
       role="alert"
       className="flex items-start gap-3 border-b border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive"
     >
       <TriangleAlert className="mt-0.5 size-5 shrink-0" aria-hidden="true" />
-      <div>
+      <div className="min-w-0 flex-1">
         <p className="font-semibold">Environment-credential login is enabled</p>
         <p>
           Anyone with <code className="font-mono">UI_USERNAME</code>/<code className="font-mono">UI_PASSWORD</code> (or
@@ -30,6 +41,9 @@ export const EnvCredentialLoginWarningBanner: React.FC<{ accessToken: string | n
           off.
         </p>
       </div>
+      <Button variant="ghost" size="icon-sm" className="shrink-0" aria-label="Dismiss banner" onClick={handleDismiss}>
+        <X />
+      </Button>
     </div>
   );
 };