diff --git a/web/screens/Hub/index.tsx b/web/screens/Hub/index.tsx
index 16fa00432..56d4b7836 100644
--- a/web/screens/Hub/index.tsx
+++ b/web/screens/Hub/index.tsx
@@ -121,22 +121,8 @@ const HubScreen = () => {
     [sources, searchValue]
   )
 
-  const sortedModels = useMemo(() => {
-    if (!sources) return []
-    return sources.sort((a, b) => {
-      if (sortSelected === 'most-downloaded') {
-        return b.metadata.downloads - a.metadata.downloads
-      } else {
-        return (
-          new Date(b.metadata.createdAt).getTime() -
-          new Date(a.metadata.createdAt).getTime()
-        )
-      }
-    })
-  }, [sortSelected, sources])
-
   const filteredModels = useMemo(() => {
-    return sortedModels.filter((model) => {
+    return (sources ?? []).filter((model) => {
       const isCompatible =
         !compatible ||
         model.models?.some((e) => e.size * 1.5 < totalRam * (1 << 20))
@@ -153,7 +139,7 @@ const HubScreen = () => {
       return isCompatible && matchesCtxLen && matchesMinSize && matchesMaxSize
     })
   }, [
-    sortedModels,
+    sources,
     compatible,
     ctxLenFilter,
     minModelSizeFilter,
@@ -161,6 +147,19 @@ const HubScreen = () => {
     totalRam,
   ])
 
+  const sortedModels = useMemo(() => {
+    return filteredModels.sort((a, b) => {
+      if (sortSelected === 'most-downloaded') {
+        return b.metadata.downloads - a.metadata.downloads
+      } else {
+        return (
+          new Date(b.metadata.createdAt).getTime() -
+          new Date(a.metadata.createdAt).getTime()
+        )
+      }
+    })
+  }, [sortSelected, filteredModels])
+
   useEffect(() => {
     if (modelDetail) {
       setSelectedModel(sources?.find((e) => e.id === modelDetail))
@@ -516,7 +515,7 @@ const HubScreen = () => {
                     {(filterOption === 'on-device' ||
                       filterOption === 'all') && (
                       <ModelList
-                        models={filteredModels}
+                        models={sortedModels}
                         onSelectedModel={(model) => setSelectedModel(model)}
                       />
                     )}