diff --git a/web/screens/ExploreModels/ExploreModelList/index.tsx b/web/screens/ExploreModels/ExploreModelList/index.tsx
index 471896cb3..54c8120dd 100644
--- a/web/screens/ExploreModels/ExploreModelList/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelList/index.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import { Model } from '@janhq/core'
 
 import ExploreModelItem from '@/screens/ExploreModels/ExploreModelItem'
@@ -8,33 +7,45 @@ type Props = {
 }
 
 const ExploreModelList: React.FC<Props> = ({ models }) => {
-  const sortOrder: Record<string, number> = {
-    '7b': 1,
-    '13b': 2,
-    '34b': 3,
-    '70b': 4,
-    '120b': 5,
-    'tiny': 6,
-  }
-  const sortedModels = models?.sort((a, b) => {
-    const aIsFeatured = a.metadata.tags.includes('Featured')
-    const bIsFeatured = b.metadata.tags.includes('Featured')
-    const aIsRecommended = a.metadata.tags.includes('Recommended')
-    const bIsRecommended = b.metadata.tags.includes('Recommended')
-    const aNumericTag =
-      a.metadata.tags.find((tag) => !!sortOrder[tag.toLowerCase()]) ?? 'Tiny'
-    const bNumericTag =
-      b.metadata.tags.find((tag) => !!sortOrder[tag.toLowerCase()]) ?? 'Tiny'
+  const takenModelIds: string[] = []
+  const featuredModels = models
+    .filter((m) => {
+      if (m.metadata.tags.includes('Featured')) {
+        takenModelIds.push(m.id)
+        return m
+      }
+    })
+    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
+
+  const recommendedModels = models
+    .filter((m) => {
+      if (m.metadata.tags.includes('Recommended')) {
+        takenModelIds.push(m.id)
+        return m
+      }
+    })
+    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
+
+  const openAiModels = models
+    .filter((m) => {
+      if (m.engine === 'openai') {
+        takenModelIds.push(m.id)
+        return m
+      }
+    })
+    .sort((m1: Model, m2: Model) => m1.name.localeCompare(m2.name))
+
+  const remainingModels = models
+    .filter((m) => !takenModelIds.includes(m.id))
+    .sort((m1, m2) => m1.metadata.size - m2.metadata.size)
+
+  const sortedModels: Model[] = [
+    ...featuredModels,
+    ...recommendedModels,
+    ...openAiModels,
+    ...remainingModels,
+  ]
 
-    if (aIsFeatured !== bIsFeatured) return aIsFeatured ? -1 : 1
-    if (aNumericTag !== bNumericTag)
-      return (
-        sortOrder[aNumericTag.toLowerCase()] -
-        sortOrder[bNumericTag.toLowerCase()]
-      )
-    if (aIsRecommended !== bIsRecommended) return aIsRecommended ? -1 : 1
-    return a.metadata.size - b.metadata.size
-  })
   return (
     <div className="relative h-full w-full flex-shrink-0">
       {sortedModels?.map((model) => (
diff --git a/web/screens/ExploreModels/index.tsx b/web/screens/ExploreModels/index.tsx
index cc053239f..d988fcafc 100644
--- a/web/screens/ExploreModels/index.tsx
+++ b/web/screens/ExploreModels/index.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 
+import { openExternalUrl } from '@janhq/core'
 import {
   Input,
   ScrollArea,
@@ -44,6 +45,10 @@ const ExploreModelsScreen = () => {
     }
   })
 
+  const onHowToImportModelClick = () => {
+    openExternalUrl('https://jan.ai/guides/using-models/import-manually/')
+  }
+
   if (loading) return <Loader description="loading ..." />
 
   return (
@@ -72,13 +77,12 @@ const ExploreModelsScreen = () => {
                   />
                 </div>
                 <div className="mt-2 text-center">
-                  <a
-                    href="https://jan.ai/guides/using-models/import-manually/"
-                    target="_blank"
-                    className="font-semibold text-white underline"
+                  <p
+                    onClick={onHowToImportModelClick}
+                    className="cursor-pointer font-semibold text-white underline"
                   >
                     How to manually import models
-                  </a>
+                  </p>
                 </div>
               </div>
             </div>