diff --git a/extensions/yarn.lock b/extensions/yarn.lock
index b5b1d7660..1aaa51bb5 100644
--- a/extensions/yarn.lock
+++ b/extensions/yarn.lock
@@ -509,61 +509,61 @@ __metadata:
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fassistant-extension%40workspace%3Aassistant-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=37d088&locator=%40janhq%2Fassistant-extension%40workspace%3Aassistant-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=5eb526&locator=%40janhq%2Fassistant-extension%40workspace%3Aassistant-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/e3547b95882e44bdc37194b2d5f21f8aee1aa31cb84b46c2214de318b3d51a98adda8f6fe18f921e6859230859be35891e331eb28ac51e0f3c9a4fb349e0e444
+  checksum: 10c0/e53df943c345a1496d45d86e65bf40cf0fe0dd716ac1c1753453bad6877f36035a4fb305cb5e1690c18d426609ba125d1370304c7399fd4abac760e09fef2c52
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fconversational-extension%40workspace%3Aconversational-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=37d088&locator=%40janhq%2Fconversational-extension%40workspace%3Aconversational-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=5eb526&locator=%40janhq%2Fconversational-extension%40workspace%3Aconversational-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/e3547b95882e44bdc37194b2d5f21f8aee1aa31cb84b46c2214de318b3d51a98adda8f6fe18f921e6859230859be35891e331eb28ac51e0f3c9a4fb349e0e444
+  checksum: 10c0/e53df943c345a1496d45d86e65bf40cf0fe0dd716ac1c1753453bad6877f36035a4fb305cb5e1690c18d426609ba125d1370304c7399fd4abac760e09fef2c52
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fengine-management-extension%40workspace%3Aengine-management-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=37d088&locator=%40janhq%2Fengine-management-extension%40workspace%3Aengine-management-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=5eb526&locator=%40janhq%2Fengine-management-extension%40workspace%3Aengine-management-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/e3547b95882e44bdc37194b2d5f21f8aee1aa31cb84b46c2214de318b3d51a98adda8f6fe18f921e6859230859be35891e331eb28ac51e0f3c9a4fb349e0e444
+  checksum: 10c0/e53df943c345a1496d45d86e65bf40cf0fe0dd716ac1c1753453bad6877f36035a4fb305cb5e1690c18d426609ba125d1370304c7399fd4abac760e09fef2c52
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Finference-cortex-extension%40workspace%3Ainference-cortex-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=37d088&locator=%40janhq%2Finference-cortex-extension%40workspace%3Ainference-cortex-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=5eb526&locator=%40janhq%2Finference-cortex-extension%40workspace%3Ainference-cortex-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/e3547b95882e44bdc37194b2d5f21f8aee1aa31cb84b46c2214de318b3d51a98adda8f6fe18f921e6859230859be35891e331eb28ac51e0f3c9a4fb349e0e444
+  checksum: 10c0/e53df943c345a1496d45d86e65bf40cf0fe0dd716ac1c1753453bad6877f36035a4fb305cb5e1690c18d426609ba125d1370304c7399fd4abac760e09fef2c52
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fmodel-extension%40workspace%3Amodel-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=37d088&locator=%40janhq%2Fmodel-extension%40workspace%3Amodel-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=5eb526&locator=%40janhq%2Fmodel-extension%40workspace%3Amodel-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/e3547b95882e44bdc37194b2d5f21f8aee1aa31cb84b46c2214de318b3d51a98adda8f6fe18f921e6859230859be35891e331eb28ac51e0f3c9a4fb349e0e444
+  checksum: 10c0/e53df943c345a1496d45d86e65bf40cf0fe0dd716ac1c1753453bad6877f36035a4fb305cb5e1690c18d426609ba125d1370304c7399fd4abac760e09fef2c52
   languageName: node
   linkType: hard
 
 "@janhq/core@file:../../core/package.tgz::locator=%40janhq%2Fmonitoring-extension%40workspace%3Amonitoring-extension":
   version: 0.1.10
-  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=37d088&locator=%40janhq%2Fmonitoring-extension%40workspace%3Amonitoring-extension"
+  resolution: "@janhq/core@file:../../core/package.tgz#../../core/package.tgz::hash=5eb526&locator=%40janhq%2Fmonitoring-extension%40workspace%3Amonitoring-extension"
   dependencies:
     rxjs: "npm:^7.8.1"
     ulidx: "npm:^2.3.0"
-  checksum: 10c0/e3547b95882e44bdc37194b2d5f21f8aee1aa31cb84b46c2214de318b3d51a98adda8f6fe18f921e6859230859be35891e331eb28ac51e0f3c9a4fb349e0e444
+  checksum: 10c0/e53df943c345a1496d45d86e65bf40cf0fe0dd716ac1c1753453bad6877f36035a4fb305cb5e1690c18d426609ba125d1370304c7399fd4abac760e09fef2c52
   languageName: node
   linkType: hard
 
diff --git a/joi/src/core/Dropdown/styles.scss b/joi/src/core/Dropdown/styles.scss
index 1318f83b7..d472578df 100644
--- a/joi/src/core/Dropdown/styles.scss
+++ b/joi/src/core/Dropdown/styles.scss
@@ -38,6 +38,7 @@
   justify-content: space-between; /* Distribute space between children */
   align-items: center; /* Optional: Align items vertically */
   gap: 16px;
+  border-color: hsla(var(--app-border));
 }
 .DropdownMenuCheckboxItem,
 .DropdownMenuRadioItem,
@@ -70,7 +71,7 @@
 .DropdownMenuSeparator {
   height: 1px;
   width: '100%';
-  background-color: hsla(var(--secondary-bg));
+  background-color: hsla(var(--app-border));
 }
 
 .DropdownMenuItem::hover {
diff --git a/web/screens/Hub/ModelList/ModelHeader/index.tsx b/web/screens/Hub/ModelList/ModelHeader/index.tsx
index 919846947..3a88a93d8 100644
--- a/web/screens/Hub/ModelList/ModelHeader/index.tsx
+++ b/web/screens/Hub/ModelList/ModelHeader/index.tsx
@@ -76,7 +76,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 2311a5d4b..dd551c96d 100644
--- a/web/screens/Hub/ModelPage/index.tsx
+++ b/web/screens/Hub/ModelPage/index.tsx
@@ -149,7 +149,7 @@ const ModelPage = ({ model, onGoBack }: Props) => {
                           key={item.id}
                           className="border-t border-[hsla(var(--app-border))] font-medium text-[hsla(var(--text-secondary))]"
                         >
-                          <td className="flex items-center space-x-4 px-6 py-4 text-black">
+                          <td className="flex items-center space-x-4 px-6 py-4">
                             <span className="line-clamp-1">
                               {item.id?.split(':')?.pop()}
                             </span>
@@ -172,7 +172,7 @@ const ModelPage = ({ model, onGoBack }: Props) => {
                               </td>
                             </>
                           )}
-                          <td className="pr-4 text-right text-black">
+                          <td className="pr-4 text-right">
                             {(model.type !== 'cloud' ||
                               (model.metadata?.apiKey?.length ?? 0) > 0) && (
                               <ModelDownloadButton
diff --git a/web/screens/Hub/index.tsx b/web/screens/Hub/index.tsx
index e091c01cd..0dd08ca2c 100644
--- a/web/screens/Hub/index.tsx
+++ b/web/screens/Hub/index.tsx
@@ -398,10 +398,10 @@ const HubScreen = () => {
                           <div
                             key={e.value}
                             className={twMerge(
-                              'rounded-md border duration-200 hover:border-gray-200 hover:bg-gray-200',
+                              'rounded-md border border-[hsla(var(--app-border))] duration-200 hover:bg-[hsla(var(--secondary-bg))]',
                               e.value === filterOption
-                                ? 'border-gray-200 bg-gray-200'
-                                : 'border-[hsla(var(--app-border))] bg-[hsla(var(--app-bg))]'
+                                ? 'bg-[hsla(var(--secondary-bg))]'
+                                : 'bg-[hsla(var(--app-bg))]'
                             )}
                           >
                             <Button
diff --git a/web/styles/components/marked.scss b/web/styles/components/marked.scss
index dab912ca7..38369ff58 100644
--- a/web/styles/components/marked.scss
+++ b/web/styles/components/marked.scss
@@ -9,7 +9,7 @@
   margin-bottom: 0.5rem;
   font-weight: medium;
   line-height: 1.2;
-  color: black;
+  color: hsla(var(--text-primary));
 }
 
 .markdown-content h1 {
@@ -46,10 +46,8 @@
 }
 
 .markdown-content pre {
-  background: #272822;
   color: #f8f8f2;
-  padding: 1rem;
-  border-radius: 5px;
+  border-radius: 8px;
   overflow-x: auto;
   font-size: 0.9rem;
   margin: 1rem 0;
@@ -79,7 +77,7 @@
 
 .markdown-content th {
   color: hsla(var(--text-secondary));
-  background-color: #f4f4f4;
+  background-color: hsla(var(--app-bg));
 }
 
 .markdown-content td {
@@ -88,4 +86,5 @@
 
 .markdown-content hr {
   margin: 16px 0px;
+  border-color: hsla(var(--app-border));
 }