diff --git a/ui/litellm-dashboard/src/components/public_model_hub.tsx b/ui/litellm-dashboard/src/components/public_model_hub.tsx
index 9145fec4b5..4c15517376 100644
--- a/ui/litellm-dashboard/src/components/public_model_hub.tsx
+++ b/ui/litellm-dashboard/src/components/public_model_hub.tsx
@@ -18,6 +18,7 @@ import { EndpointType, getEndpointType } from "./chat_ui/mode_endpoint_mapping";
 import { MessageType } from "./chat_ui/types";
 import { getProviderLogoAndName } from "./provider_info_helpers";
 import Navbar from "./navbar";
+import { ThemeProvider } from "@/contexts/ThemeContext";
 // Simple approach without react-markdown dependency
 
 interface ModelGroupInfo {
@@ -476,18 +477,19 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken }) => {
   ];
 
   return (
-    <div className="min-h-screen bg-white">
-      {/* Navigation */}
-      <Navbar 
-        userID={null}
-        userEmail={null}
-        userRole={null}
-        premiumUser={false}
-        setProxySettings={setProxySettings}
-        proxySettings={proxySettings}
-        accessToken={accessToken || null}
-        isPublicPage={true}
-      />
+    <ThemeProvider accessToken={accessToken}>
+      <div className="min-h-screen bg-white">
+        {/* Navigation */}
+        <Navbar 
+          userID={null}
+          userEmail={null}
+          userRole={null}
+          premiumUser={false}
+          setProxySettings={setProxySettings}
+          proxySettings={proxySettings}
+          accessToken={accessToken || null}
+          isPublicPage={true}
+        />
 
       <div className="w-full px-8 py-12">
         {/* About Section */}
@@ -856,7 +858,8 @@ const PublicModelHub: React.FC<PublicModelHubProps> = ({ accessToken }) => {
           </div>
         )}
       </Modal>
-    </div>
+      </div>
+    </ThemeProvider>
   );
 };