diff --git a/web/screens/Hub/ModelList/ModelHeader/index.tsx b/web/screens/Hub/ModelList/ModelHeader/index.tsx
index 6315ea1fc..43bbe9033 100644
--- a/web/screens/Hub/ModelList/ModelHeader/index.tsx
+++ b/web/screens/Hub/ModelList/ModelHeader/index.tsx
@@ -83,7 +83,7 @@ const ModelItemHeader = ({ model, onSelectedModel }: Props) => {
         <span className="mx-4 font-medium text-white">Download</span>
       </div>
       <Dropdown
-        className="z-50 min-w-[240px]"
+        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"
         options={model.models?.map((e) => ({
           name: (
             <div className="flex space-x-2">
diff --git a/web/screens/Hub/ModelPage/index.tsx b/web/screens/Hub/ModelPage/index.tsx
index d46d18ca4..d4c8d6d6a 100644
--- a/web/screens/Hub/ModelPage/index.tsx
+++ b/web/screens/Hub/ModelPage/index.tsx
@@ -9,7 +9,6 @@ import {
   FileJson,
   SettingsIcon,
 } from 'lucide-react'
-import '@/styles/components/marked.scss'
 
 import ModelDownloadButton from '@/containers/ModelDownloadButton'
 
@@ -50,7 +49,9 @@ const ModelPage = ({ model, onGoBack }: Props) => {
             {/* Header */}
             <div className="flex items-center justify-between py-2">
               <span className="line-clamp-1 text-base font-medium capitalize group-hover:text-blue-500 group-hover:underline">
-                {extractModelName(model.metadata.id)}
+                {model.type !== 'cloud'
+                  ? extractModelName(model.metadata.id)
+                  : model.metadata.id}
               </span>
               <div className="inline-flex items-center space-x-2">
                 {model.type !== 'cloud' ? (
@@ -151,7 +152,9 @@ const ModelPage = ({ model, onGoBack }: Props) => {
                         >
                           <td className="flex items-center space-x-4 px-6 py-4">
                             <span className="line-clamp-1">
-                              {item.id?.split(':')?.pop()}
+                              {model.type === 'cloud'
+                                ? item.id
+                                : item.id?.split(':')?.pop()}
                             </span>
                             {i === 0 && model.type !== 'cloud' && (
                               <Badge
@@ -193,7 +196,7 @@ const ModelPage = ({ model, onGoBack }: Props) => {
             <div className="mt-8 flex w-full flex-col items-start justify-between sm:flex-row">
               <MarkdownTextMessage
                 text={model.metadata?.description ?? ''}
-                className="markdown-content h-full w-full text-[hsla(var(--text-secondary))]"
+                className="h-full w-full text-[hsla(var(--text-secondary))]"
               />
             </div>
           </div>
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
index aeebf0c60..581159eff 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/MarkdownTextMessage.tsx
@@ -16,6 +16,10 @@ import remarkMath from 'remark-math'
 
 import 'katex/dist/katex.min.css'
 import 'highlight.js/styles/atom-one-dark.css'
+import '@/styles/components/marked.scss'
+
+import { twMerge } from 'tailwind-merge'
+
 import { useClipboard } from '@/hooks/useClipboard'
 
 import { getLanguageFromExtension } from '@/utils/codeLanguageExtension'
@@ -214,7 +218,7 @@ export const MarkdownTextMessage = memo(
     return (
       <>
         <Markdown
-          className={className}
+          className={twMerge('markdown-content', className)}
           remarkPlugins={[remarkMath, remarkGfm]}
           rehypePlugins={
             [