diff --git a/web-app/src/routes/hub/index.tsx b/web-app/src/routes/hub/index.tsx
index 5935d4538..6adcc300f 100644
--- a/web-app/src/routes/hub/index.tsx
+++ b/web-app/src/routes/hub/index.tsx
@@ -139,7 +139,7 @@ function Hub() {
       filtered = filtered?.filter((model) =>
         model.quants.some((variant) =>
           llamaProvider?.models.some(
-            (m: { id: string }) => m.id === variant.model_id
+            (m: { id: string }) => m.id === sanitizeModelId(variant.model_id)
           )
         )
       )
@@ -677,8 +677,8 @@ function Hub() {
                                 {filteredModels[virtualItem.index].quants.map(
                                   (variant) => (
                                     <CardItem
-                                      key={variant.model_id}
-                                      title={variant.model_id}
+                                      key={sanitizeModelId(variant.model_id)}
+                                      title={sanitizeModelId(variant.model_id)}
                                       actions={
                                         <div className="flex items-center gap-2">
                                           <p className="text-main-view-fg/70 font-medium text-xs">
@@ -687,19 +687,32 @@ function Hub() {
                                           {(() => {
                                             const isDownloading =
                                               localDownloadingModels.has(
-                                                variant.model_id
+                                                sanitizeModelId(
+                                                  variant.model_id
+                                                )
                                               ) ||
                                               downloadProcesses.some(
-                                                (e) => e.id === variant.model_id
+                                                (e) =>
+                                                  e.id ===
+                                                  sanitizeModelId(
+                                                    variant.model_id
+                                                  )
                                               )
                                             const downloadProgress =
                                               downloadProcesses.find(
-                                                (e) => e.id === variant.model_id
+                                                (e) =>
+                                                  e.id ===
+                                                  sanitizeModelId(
+                                                    variant.model_id
+                                                  )
                                               )?.progress || 0
                                             const isDownloaded =
                                               llamaProvider?.models.some(
                                                 (m: { id: string }) =>
-                                                  m.id === variant.model_id
+                                                  m.id ===
+                                                  sanitizeModelId(
+                                                    variant.model_id
+                                                  )
                                               )
 
                                             if (isDownloading) {
@@ -733,7 +746,9 @@ function Hub() {
                                                     size="sm"
                                                     onClick={() =>
                                                       handleUseModel(
-                                                        variant.model_id
+                                                        sanitizeModelId(
+                                                          variant.model_id
+                                                        )
                                                       )
                                                     }
                                                   >
@@ -749,10 +764,18 @@ function Hub() {
                                                 title={t('hub:downloadModel')}
                                                 onClick={() => {
                                                   addLocalDownloadingModel(
-                                                    sanitizeModelId(variant.model_id)
+                                                    sanitizeModelId(
+                                                      sanitizeModelId(
+                                                        variant.model_id
+                                                      )
+                                                    )
                                                   )
                                                   pullModel(
-                                                    sanitizeModelId(variant.model_id),
+                                                    sanitizeModelId(
+                                                      sanitizeModelId(
+                                                        variant.model_id
+                                                      )
+                                                    ),
                                                     variant.path
                                                   )
                                                 }}