diff --git a/web/src/pages/user-setting/setting-model/components/un-add-model.tsx b/web/src/pages/user-setting/setting-model/components/un-add-model.tsx
index 41691b3a4..07c5da943 100644
--- a/web/src/pages/user-setting/setting-model/components/un-add-model.tsx
+++ b/web/src/pages/user-setting/setting-model/components/un-add-model.tsx
@@ -57,18 +57,32 @@ export const AvailableModels: FC<{
   const [searchTerm, setSearchTerm] = useState('');
   const [selectedTag, setSelectedTag] = useState<string | null>(null);
 
+  const searchedModels = useMemo(() => {
+    return factoryList.filter((model) =>
+      model.name.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+  }, [factoryList, searchTerm]);
+
   const filteredModels = useMemo(() => {
-    const models = factoryList.filter((model) => {
-      const matchesSearch = model.name
-        .toLowerCase()
-        .includes(searchTerm.toLowerCase());
-      const matchesTag =
-        selectedTag === null ||
-        model.model_types.some((type) => type === selectedTag);
-      return matchesSearch && matchesTag;
-    });
-    return models;
-  }, [factoryList, searchTerm, selectedTag]);
+    if (selectedTag === null) {
+      return searchedModels;
+    }
+    return searchedModels.filter((model) =>
+      model.model_types.some((type) => type === selectedTag),
+    );
+  }, [searchedModels, selectedTag]);
+
+  // Number of providers matching each tag, respecting the current search term so
+  // the badge always reflects how many cards are shown when the tag is selected.
+  const tagCounts = useMemo(() => {
+    return searchedModels.reduce<Record<string, number>>((acc, model) => {
+      // Count each provider once per model type, even if listed more than once.
+      new Set(model.model_types).forEach((type) => {
+        acc[type] = (acc[type] || 0) + 1;
+      });
+      return acc;
+    }, {});
+  }, [searchedModels]);
 
   const allTags = useMemo(() => {
     const tagsSet = new Set<string>();
@@ -118,6 +132,9 @@ export const AvailableModels: FC<{
             onClick={() => setSelectedTag(null)}
           >
             All
+            <span className="ml-1 tabular-nums opacity-60">
+              {searchedModels.length}
+            </span>
           </Button>
 
           {allTags.map((tag) => (
@@ -130,6 +147,9 @@ export const AvailableModels: FC<{
             >
               {mapModelKey[tag.trim() as keyof typeof mapModelKey] ||
                 tag.trim()}
+              <span className="ml-1 tabular-nums opacity-60">
+                {tagCounts[tag] ?? 0}
+              </span>
             </Button>
           ))}
         </div>