diff --git a/web/screens/Hub/ModelList/ModelHeader/index.tsx b/web/screens/Hub/ModelList/ModelHeader/index.tsx
index 3a88a93d8..fea3dd3a6 100644
--- a/web/screens/Hub/ModelList/ModelHeader/index.tsx
+++ b/web/screens/Hub/ModelList/ModelHeader/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 
 import { ModelSource } from '@janhq/core'
 
@@ -20,6 +20,8 @@ import { toGigabytes } from '@/utils/converter'
 
 import { extractModelName } from '@/utils/modelSource'
 
+import { fuzzySearch } from '@/utils/search'
+
 import { mainViewStateAtom } from '@/helpers/atoms/App.atom'
 import { assistantsAtom } from '@/helpers/atoms/Assistant.atom'
 import { serverEnabledAtom } from '@/helpers/atoms/LocalServer.atom'
@@ -66,6 +68,11 @@ const ModelItemHeader = ({ model, onSelectedModel }: Props) => {
   const isDownloaded = downloadedModels.some((md) =>
     model.models.some((m) => m.id === md.id)
   )
+  const defaultModel = useMemo(() => {
+    return model.models?.find(
+      (e) => e.id.includes('q4-km') || fuzzySearch('q4km', e.id)
+    )
+  }, [model])
 
   let downloadButton = (
     <div className="group flex h-8 cursor-pointer items-center justify-center rounded-md bg-[hsla(var(--primary-bg))]">
@@ -76,19 +83,21 @@ const ModelItemHeader = ({ model, onSelectedModel }: Props) => {
         <span className="mx-4 font-medium text-white">Download</span>
       </div>
       <Dropdown
-        className="z-50 max-h-[240px] min-w-[240px] max-w-[320px] overflow-y-auto border border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))] shadow"
+        className="z-50 min-w-[240px]"
         options={model.models?.map((e) => ({
           name: (
             <div className="flex space-x-2">
               <span className="line-clamp-1 max-w-[340px] font-normal">
                 {e.id}
               </span>
-              <Badge
-                theme="secondary"
-                className="inline-flex w-[60px] items-center font-medium"
-              >
-                <span>Default</span>
-              </Badge>
+              {e.id === defaultModel?.id && (
+                <Badge
+                  theme="secondary"
+                  className="inline-flex w-[60px] items-center font-medium"
+                >
+                  <span>Default</span>
+                </Badge>
+              )}
             </div>
           ),
           value: e.id,
diff --git a/web/screens/Hub/ModelList/ModelItem/index.tsx b/web/screens/Hub/ModelList/ModelItem/index.tsx
index b2f0b7e8a..42e1b74f2 100644
--- a/web/screens/Hub/ModelList/ModelItem/index.tsx
+++ b/web/screens/Hub/ModelList/ModelItem/index.tsx
@@ -10,6 +10,8 @@ import ModelLabel from '@/containers/ModelLabel'
 
 import ModelItemHeader from '@/screens/Hub/ModelList/ModelHeader'
 
+import { markdownComponents } from '@/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownUtils'
+
 import { toGigabytes } from '@/utils/converter'
 import { extractDescription } from '@/utils/modelSource'
 import '@/styles/components/model.scss'
@@ -31,7 +33,10 @@ const ModelItem: React.FC<Props> = ({ model, onSelectedModel }) => {
             <ModelLabel size={model.models?.[0]?.size} />
           </div>
           <div className="flex flex-col">
-            <Markdown className="md-short-desc line-clamp-3 max-w-full overflow-hidden font-light text-[hsla(var(--text-secondary))]">
+            <Markdown
+              className="md-short-desc line-clamp-3 max-w-full overflow-hidden font-light text-[hsla(var(--text-secondary))]"
+              components={markdownComponents}
+            >
               {extractDescription(model.metadata?.description) || '-'}
             </Markdown>
           </div>
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
index c54777519..aeebf0c60 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
@@ -20,6 +20,8 @@ import { useClipboard } from '@/hooks/useClipboard'
 
 import { getLanguageFromExtension } from '@/utils/codeLanguageExtension'
 
+import { markdownComponents } from './MarkdownUtils'
+
 interface Props {
   text: string
   isUser?: boolean
@@ -222,6 +224,7 @@ export const MarkdownTextMessage = memo(
               wrapCodeBlocksWithoutVisit,
             ].filter((e) => !!e) as PluggableList
           }
+          components={markdownComponents}
         >
           {preprocessMarkdown(text)}
         </Markdown>
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownUtils.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownUtils.tsx
new file mode 100644
index 000000000..c720dded5
--- /dev/null
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownUtils.tsx
@@ -0,0 +1,14 @@
+import { Components } from 'react-markdown'
+
+export const markdownComponents: Partial<Components> = {
+  a: ({ href, children, ...props }) => (
+    <a
+      target="_blank"
+      href={href}
+      className="text-[hsla(var(--app-link))]"
+      {...props}
+    >
+      {children}
+    </a>
+  ),
+}