diff --git a/public/providers/anthropic.png b/public/providers/anthropic.png
new file mode 100644
index 0000000..a3c374d
Binary files /dev/null and b/public/providers/anthropic.png differ
diff --git a/public/providers/gemini.png b/public/providers/gemini.png
new file mode 100644
index 0000000..f687493
Binary files /dev/null and b/public/providers/gemini.png differ
diff --git a/public/providers/glm.png b/public/providers/glm.png
new file mode 100644
index 0000000..2295601
Binary files /dev/null and b/public/providers/glm.png differ
diff --git a/public/providers/kimi.png b/public/providers/kimi.png
new file mode 100644
index 0000000..f060fe4
Binary files /dev/null and b/public/providers/kimi.png differ
diff --git a/public/providers/minimax.png b/public/providers/minimax.png
new file mode 100644
index 0000000..ac198ea
Binary files /dev/null and b/public/providers/minimax.png differ
diff --git a/public/providers/oai-cc.png b/public/providers/oai-cc.png
new file mode 100644
index 0000000..47a0828
Binary files /dev/null and b/public/providers/oai-cc.png differ
diff --git a/public/providers/oai-r.png b/public/providers/oai-r.png
new file mode 100644
index 0000000..9c192c1
Binary files /dev/null and b/public/providers/oai-r.png differ
diff --git a/public/providers/openai.png b/public/providers/openai.png
new file mode 100644
index 0000000..9ddf6a0
Binary files /dev/null and b/public/providers/openai.png differ
diff --git a/public/providers/openrouter.png b/public/providers/openrouter.png
new file mode 100644
index 0000000..76ad989
Binary files /dev/null and b/public/providers/openrouter.png differ
diff --git a/src/app/(dashboard)/dashboard/providers/[id]/page.js b/src/app/(dashboard)/dashboard/providers/[id]/page.js
index 9ab8042..2af51c1 100644
--- a/src/app/(dashboard)/dashboard/providers/[id]/page.js
+++ b/src/app/(dashboard)/dashboard/providers/[id]/page.js
@@ -23,6 +23,7 @@ export default function ProviderDetailPage() {
   const [showEditNodeModal, setShowEditNodeModal] = useState(false);
   const [selectedConnection, setSelectedConnection] = useState(null);
   const [modelAliases, setModelAliases] = useState({});
+  const [headerImgError, setHeaderImgError] = useState(false);
   const { copied, copy } = useCopyToClipboard();
 
   const providerInfo = providerNode
@@ -298,7 +299,7 @@ export default function ProviderDetailPage() {
         <CardSkeleton />
       </div>
     );
-  }
+}
 
   if (!providerInfo) {
     return (
@@ -311,6 +312,14 @@ export default function ProviderDetailPage() {
     );
   }
 
+  // Determine icon path: OpenAI Compatible providers use specialized icons
+  const getHeaderIconPath = () => {
+    if (isOpenAICompatible && providerInfo.apiType) {
+      return providerInfo.apiType === "responses" ? "/providers/oai-r.png" : "/providers/oai-cc.png";
+    }
+    return `/providers/${providerInfo.id}.png`;
+  };
+
   return (
     <div className="flex flex-col gap-8">
       {/* Header */}
@@ -327,19 +336,19 @@ export default function ProviderDetailPage() {
             className="rounded-lg flex items-center justify-center"
             style={{ backgroundColor: `${providerInfo.color}15` }}
           >
-            {providerInfo.textIcon ? (
+            {headerImgError ? (
               <span className="text-sm font-bold" style={{ color: providerInfo.color }}>
-                {providerInfo.textIcon}
+                {providerInfo.textIcon || providerInfo.id.slice(0, 2).toUpperCase()}
               </span>
             ) : (
               <Image
-                src={`/providers/${providerInfo.id}.png`}
+                src={getHeaderIconPath()}
                 alt={providerInfo.name}
                 width={48}
                 height={48}
                 className="object-contain rounded-lg max-w-[48px] max-h-[48px]"
                 sizes="48px"
-                onError={(e) => { e.currentTarget.style.display = "none"; }}
+                onError={() => setHeaderImgError(true)}
               />
             )}
           </div>
diff --git a/src/app/(dashboard)/dashboard/providers/page.js b/src/app/(dashboard)/dashboard/providers/page.js
index 2f7435d..648b4c5 100644
--- a/src/app/(dashboard)/dashboard/providers/page.js
+++ b/src/app/(dashboard)/dashboard/providers/page.js
@@ -233,10 +233,19 @@ ProviderCard.propTypes = {
   }).isRequired,
 };
 
-// API Key providers - only use textIcon, no image
+// API Key providers - use image with textIcon fallback (same as OAuth providers)
 function ApiKeyProviderCard({ providerId, provider, stats }) {
   const { connected, error, errorCode, errorTime } = stats;
   const isCompatible = providerId.startsWith(OPENAI_COMPATIBLE_PREFIX);
+  const [imgError, setImgError] = useState(false);
+
+  // Determine icon path: OpenAI Compatible providers use specialized icons
+  const getIconPath = () => {
+    if (isCompatible) {
+      return provider.apiType === "responses" ? "/providers/oai-r.png" : "/providers/oai-cc.png";
+    }
+    return `/providers/${provider.id}.png`;
+  };
 
   return (
     <Link href={`/dashboard/providers/${providerId}`} className="group">
@@ -247,12 +256,24 @@ function ApiKeyProviderCard({ providerId, provider, stats }) {
               className="size-8 rounded-lg flex items-center justify-center"
               style={{ backgroundColor: `${provider.color}15` }}
             >
-              <span
-                className="text-xs font-bold"
-                style={{ color: provider.color }}
-              >
-                {provider.textIcon || provider.id.slice(0, 2).toUpperCase()}
-              </span>
+              {imgError ? (
+                <span
+                  className="text-xs font-bold"
+                  style={{ color: provider.color }}
+                >
+                  {provider.textIcon || provider.id.slice(0, 2).toUpperCase()}
+                </span>
+              ) : (
+                <Image
+                  src={getIconPath()}
+                  alt={provider.name}
+                  width={32}
+                  height={32}
+                  className="object-contain rounded-lg max-w-[32px] max-h-[32px]"
+                  sizes="32px"
+                  onError={() => setImgError(true)}
+                />
+              )}
             </div>
             <div>
               <h3 className="font-semibold">{provider.name}</h3>