diff --git a/web/app/components/base/dropdown/index.tsx b/web/app/components/base/dropdown/index.tsx
index 9af2421669..eb2519bbde 100644
--- a/web/app/components/base/dropdown/index.tsx
+++ b/web/app/components/base/dropdown/index.tsx
@@ -48,16 +48,16 @@ const Dropdown: FC<DropdownProps> = ({
               <div
                 className={`
                   flex items-center justify-center w-6 h-6 cursor-pointer rounded-md
-                  ${open && 'bg-black/5'}
+                  ${open && 'bg-divider-regular'}
                 `}
               >
-                <RiMoreFill className='w-4 h-4 text-gray-500' />
+                <RiMoreFill className='w-4 h-4 text-text-tertiary' />
               </div>
             )
         }
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={popupClassName}>
-        <div className='rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg text-sm text-gray-700'>
+        <div className='rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg text-sm text-text-secondary'>
           {
             !!items.length && (
               <div className='p-1'>
@@ -65,7 +65,7 @@ const Dropdown: FC<DropdownProps> = ({
                   items.map(item => (
                     <div
                       key={item.value}
-                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-gray-100'
+                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}
@@ -77,7 +77,7 @@ const Dropdown: FC<DropdownProps> = ({
           }
           {
             (!!items.length && !!secondItems?.length) && (
-              <div className='h-[1px] bg-gray-100' />
+              <div className='h-[1px] bg-divider-regular' />
             )
           }
           {
@@ -87,7 +87,7 @@ const Dropdown: FC<DropdownProps> = ({
                   secondItems.map(item => (
                     <div
                       key={item.value}
-                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-gray-100'
+                      className='flex items-center px-3 h-8 rounded-lg cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover'
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}
diff --git a/web/app/components/base/icons/assets/vender/other/anthropic-text.svg b/web/app/components/base/icons/assets/vender/other/anthropic-text.svg
new file mode 100644
index 0000000000..cace17da73
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/other/anthropic-text.svg
@@ -0,0 +1,78 @@
+<svg width="90" height="20" viewBox="0 0 90 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_8587_60274)">
+<mask id="mask0_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M89.375 4.99805H0V14.998H89.375V4.99805Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_8587_60274)">
+<mask id="mask1_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99609H89.375V14.9961H0V4.99609Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_8587_60274)">
+<mask id="mask2_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99414H89.375V14.9941H0V4.99414Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_8587_60274)">
+<mask id="mask3_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_8587_60274)">
+<path d="M18.1273 11.9244L13.7773 5.15625H11.4297V14.825H13.4321V8.05688L17.7821 14.825H20.1297V5.15625H18.1273V11.9244Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask4_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask4_8587_60274)">
+<path d="M21.7969 7.02094H25.0423V14.825H27.1139V7.02094H30.3594V5.15625H21.7969V7.02094Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask5_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask5_8587_60274)">
+<path d="M38.6442 9.00994H34.0871V5.15625H32.0156V14.825H34.0871V10.8746H38.6442V14.825H40.7156V5.15625H38.6442V9.00994Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask6_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask6_8587_60274)">
+<path d="M45.3376 7.02094H47.893C48.9152 7.02094 49.4539 7.39387 49.4539 8.09831C49.4539 8.80275 48.9152 9.17569 47.893 9.17569H45.3376V7.02094ZM51.5259 8.09831C51.5259 6.27506 50.186 5.15625 47.9897 5.15625H43.2656V14.825H45.3376V11.0404H47.6443L49.7164 14.825H52.0094L49.715 10.7521C50.8666 10.3094 51.5259 9.37721 51.5259 8.09831Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask7_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask7_8587_60274)">
+<path d="M57.8732 13.0565C56.2438 13.0565 55.2496 11.8963 55.2496 10.004C55.2496 8.08416 56.2438 6.92394 57.8732 6.92394C59.4887 6.92394 60.4691 8.08416 60.4691 10.004C60.4691 11.8963 59.4887 13.0565 57.8732 13.0565ZM57.8732 4.99023C55.0839 4.99023 53.1094 7.06206 53.1094 10.004C53.1094 12.9184 55.0839 14.9902 57.8732 14.9902C60.6486 14.9902 62.6094 12.9184 62.6094 10.004C62.6094 7.06206 60.6486 4.99023 57.8732 4.99023Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask8_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask8_8587_60274)">
+<path d="M69.1794 9.45194H66.6233V7.02094H69.1794C70.2019 7.02094 70.7407 7.43532 70.7407 8.23644C70.7407 9.03756 70.2019 9.45194 69.1794 9.45194ZM69.2762 5.15625H64.5508V14.825H66.6233V11.3166H69.2762C71.473 11.3166 72.8133 10.1564 72.8133 8.23644C72.8133 6.3165 71.473 5.15625 69.2762 5.15625Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask9_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask9_8587_60274)">
+<path d="M86.8413 11.5786C86.4823 12.5179 85.7642 13.0565 84.7837 13.0565C83.1542 13.0565 82.16 11.8963 82.16 10.004C82.16 8.08416 83.1542 6.92394 84.7837 6.92394C85.7642 6.92394 86.4823 7.46261 86.8413 8.40183H89.0369C88.4984 6.33002 86.8827 4.99023 84.7837 4.99023C81.9942 4.99023 80.0195 7.06206 80.0195 10.004C80.0195 12.9184 81.9942 14.9902 84.7837 14.9902C86.8965 14.9902 88.5122 13.6366 89.0508 11.5786H86.8413Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask10_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask10_8587_60274)">
+<path d="M73.6484 5.15625L77.5033 14.825H79.6172L75.7624 5.15625H73.6484Z" fill="black" fill-opacity="0.92"/>
+</g>
+<mask id="mask11_8587_60274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="4" width="90" height="11">
+<path d="M0 4.99219H89.375V14.9922H0V4.99219Z" fill="white"/>
+</mask>
+<g mask="url(#mask11_8587_60274)">
+<path d="M3.64038 10.9989L4.95938 7.60106L6.27838 10.9989H3.64038ZM3.85422 5.15625L0 14.825H2.15505L2.9433 12.7946H6.97558L7.76371 14.825H9.91875L6.06453 5.15625H3.85422Z" fill="black" fill-opacity="0.92"/>
+</g>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_8587_60274">
+<rect width="89.375" height="10" fill="white" transform="translate(0 5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/app/components/base/icons/assets/vender/other/openai.svg b/web/app/components/base/icons/assets/vender/other/openai.svg
new file mode 100644
index 0000000000..5a9a93bc2e
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/other/openai.svg
@@ -0,0 +1,9 @@
+<svg width="80" height="22" viewBox="0 0 80 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.1152 10.5767C25.1152 14.1738 27.4253 16.6818 30.6264 16.6818C33.8274 16.6818 36.1375 14.1738 36.1375 10.5767C36.1375 6.97961 33.8274 4.47156 30.6264 4.47156C27.4253 4.47156 25.1152 6.97961 25.1152 10.5767ZM34.0254 10.5767C34.0254 13.1507 32.6229 14.8173 30.6264 14.8173C28.6298 14.8173 27.2273 13.1507 27.2273 10.5767C27.2273 8.00263 28.6298 6.3361 30.6264 6.3361C32.6229 6.3361 34.0254 8.00263 34.0254 10.5767Z" fill="black"/>
+<path d="M42.0868 16.6819C44.5124 16.6819 45.8984 14.6358 45.8984 12.1773C45.8984 9.71871 44.5124 7.67267 42.0868 7.67267C40.9648 7.67267 40.1398 8.11818 39.5953 8.76169V7.83767H37.6152V19.4704H39.5953V15.5928C40.1398 16.2364 40.9648 16.6819 42.0868 16.6819ZM39.5458 11.9298C39.5458 10.2962 40.4698 9.40521 41.6908 9.40521C43.1264 9.40521 43.9019 10.5272 43.9019 12.1773C43.9019 13.8273 43.1264 14.9493 41.6908 14.9493C40.4698 14.9493 39.5458 14.0418 39.5458 12.4413V11.9298Z" fill="black"/>
+<path d="M51.2545 16.6819C52.987 16.6819 54.3565 15.7743 54.967 14.2563L53.2675 13.6128C53.0035 14.5038 52.228 14.9988 51.2545 14.9988C49.9839 14.9988 49.0929 14.0913 48.9444 12.6063H55.0165V11.9463C55.0165 9.57021 53.68 7.67267 51.172 7.67267C48.6639 7.67267 47.0469 9.63621 47.0469 12.1773C47.0469 14.8503 48.7794 16.6819 51.2545 16.6819ZM51.1555 9.3392C52.4095 9.3392 53.0035 10.1642 53.02 11.1212H49.0434C49.3404 9.94972 50.1324 9.3392 51.1555 9.3392Z" fill="black"/>
+<path d="M56.5039 16.5004H58.484V11.4182C58.484 10.1807 59.3915 9.52071 60.2825 9.52071C61.3715 9.52071 61.8005 10.2962 61.8005 11.3687V16.5004H63.7806V10.7912C63.7806 8.9267 62.6915 7.67267 60.8765 7.67267C59.7545 7.67267 58.979 8.18418 58.484 8.76169V7.83767H56.5039V16.5004Z" fill="black"/>
+<path d="M69.5799 4.65308L65.0918 16.5003H67.1873L68.1939 13.7943H73.309L74.332 16.5003H76.4605L71.9724 4.65308H69.5799ZM70.7349 6.99613L72.616 11.9462H68.8869L70.7349 6.99613Z" fill="black"/>
+<path d="M79.8581 4.6875H77.7461V16.5348H79.8581V4.6875Z" fill="black"/>
+<path d="M20.2769 9.00436C20.776 7.50627 20.6041 5.86517 19.8059 4.50251C18.6055 2.41247 16.1924 1.3372 13.8356 1.84321C12.7871 0.662057 11.2808 -0.00964523 9.70154 -2.00271e-05C7.29248 -0.00552014 5.155 1.54551 4.41386 3.83769C2.86626 4.15463 1.53042 5.12334 0.748717 6.49631C-0.460621 8.58085 -0.184928 11.2085 1.43073 12.9961C0.931596 14.4942 1.10348 16.1353 1.90168 17.4979C3.10208 19.588 5.51526 20.6632 7.87206 20.1572C8.91983 21.3384 10.4269 22.0101 12.0061 21.9998C14.4165 22.006 16.5547 20.4535 17.2958 18.1593C18.8434 17.8424 20.1793 16.8737 20.961 15.5007C22.1689 13.4161 21.8925 10.7905 20.2776 9.00298L20.2769 9.00436ZM12.0075 20.5622C11.0429 20.5635 10.1085 20.226 9.36809 19.6079C9.40178 19.59 9.46022 19.5577 9.49803 19.5343L13.8789 17.0043C14.103 16.8771 14.2405 16.6385 14.2391 16.3807V10.2048L16.0906 11.2738C16.1105 11.2835 16.1236 11.3027 16.1264 11.3247V16.4391C16.1236 18.7134 14.2818 20.5574 12.0075 20.5622ZM3.14952 16.7788C2.6662 15.9441 2.49225 14.9658 2.65795 14.0163C2.69026 14.0356 2.74732 14.0707 2.78789 14.094L7.16873 16.6241C7.3908 16.754 7.6658 16.754 7.88856 16.6241L13.2367 13.5358V15.6739C13.2381 15.6959 13.2278 15.7173 13.2106 15.731L8.78233 18.2879C6.80985 19.4236 4.29079 18.7485 3.15021 16.7788H3.14952ZM1.99656 7.21613C2.47782 6.38012 3.23752 5.74073 4.14229 5.40866C4.14229 5.44647 4.14023 5.51316 4.14023 5.55991V10.6207C4.13885 10.8778 4.27636 11.1164 4.4998 11.2436L9.84798 14.3312L7.9965 15.4003C7.97794 15.4127 7.95456 15.4147 7.93393 15.4058L3.50496 12.8469C1.53661 11.707 0.86147 9.18861 1.99587 7.21682L1.99656 7.21613ZM17.2085 10.7561L11.8603 7.66783L13.7118 6.59943C13.7304 6.58706 13.7537 6.585 13.7744 6.59393L18.2033 9.1508C20.1751 10.29 20.851 12.8125 19.7118 14.7843C19.2298 15.6189 18.4708 16.2583 17.5667 16.5911V11.379C17.5688 11.1219 17.432 10.884 17.2092 10.7561H17.2085ZM19.0511 7.98271C19.0187 7.96278 18.9617 7.9284 18.9211 7.90502L14.5403 5.37497C14.3182 5.24503 14.0432 5.24503 13.8204 5.37497L8.47226 8.46329V6.32512C8.47088 6.30311 8.4812 6.2818 8.49838 6.26805L12.9267 3.71325C14.8991 2.57541 17.4209 3.25261 18.5581 5.22578C19.0387 6.05905 19.2126 7.03463 19.0497 7.98271H19.0511ZM7.46574 11.7936L5.61357 10.7245C5.59363 10.7149 5.58057 10.6956 5.57782 10.6736V5.55922C5.5792 3.28218 7.42655 1.43689 9.7036 1.43826C10.6668 1.43826 11.5991 1.77652 12.3395 2.39253C12.3058 2.41041 12.2481 2.44272 12.2096 2.46609L7.82874 4.99615C7.60461 5.12334 7.46711 5.36122 7.46849 5.61904L7.46574 11.7922V11.7936ZM8.47157 9.62519L10.8538 8.24947L13.236 9.6245V12.3752L10.8538 13.7503L8.47157 12.3752V9.62519Z" fill="black"/>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/other/AnthropicText.json b/web/app/components/base/icons/src/vender/other/AnthropicText.json
new file mode 100644
index 0000000000..a65ef47747
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/other/AnthropicText.json
@@ -0,0 +1,539 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "90",
+			"height": "20",
+			"viewBox": "0 0 90 20",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"clip-path": "url(#clip0_8587_60274)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "mask",
+						"attributes": {
+							"id": "mask0_8587_60274",
+							"style": "mask-type:luminance",
+							"maskUnits": "userSpaceOnUse",
+							"x": "0",
+							"y": "4",
+							"width": "90",
+							"height": "11"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M89.375 4.99805H0V14.998H89.375V4.99805Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							}
+						]
+					},
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"mask": "url(#mask0_8587_60274)"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "mask",
+								"attributes": {
+									"id": "mask1_8587_60274",
+									"style": "mask-type:luminance",
+									"maskUnits": "userSpaceOnUse",
+									"x": "0",
+									"y": "4",
+									"width": "90",
+									"height": "11"
+								},
+								"children": [
+									{
+										"type": "element",
+										"name": "path",
+										"attributes": {
+											"d": "M0 4.99609H89.375V14.9961H0V4.99609Z",
+											"fill": "currentColor"
+										},
+										"children": []
+									}
+								]
+							},
+							{
+								"type": "element",
+								"name": "g",
+								"attributes": {
+									"mask": "url(#mask1_8587_60274)"
+								},
+								"children": [
+									{
+										"type": "element",
+										"name": "mask",
+										"attributes": {
+											"id": "mask2_8587_60274",
+											"style": "mask-type:luminance",
+											"maskUnits": "userSpaceOnUse",
+											"x": "0",
+											"y": "4",
+											"width": "90",
+											"height": "11"
+										},
+										"children": [
+											{
+												"type": "element",
+												"name": "path",
+												"attributes": {
+													"d": "M0 4.99414H89.375V14.9941H0V4.99414Z",
+													"fill": "currentColor"
+												},
+												"children": []
+											}
+										]
+									},
+									{
+										"type": "element",
+										"name": "g",
+										"attributes": {
+											"mask": "url(#mask2_8587_60274)"
+										},
+										"children": [
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask3_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask3_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M18.1273 11.9244L13.7773 5.15625H11.4297V14.825H13.4321V8.05688L17.7821 14.825H20.1297V5.15625H18.1273V11.9244Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask4_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask4_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M21.7969 7.02094H25.0423V14.825H27.1139V7.02094H30.3594V5.15625H21.7969V7.02094Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask5_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask5_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M38.6442 9.00994H34.0871V5.15625H32.0156V14.825H34.0871V10.8746H38.6442V14.825H40.7156V5.15625H38.6442V9.00994Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask6_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask6_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M45.3376 7.02094H47.893C48.9152 7.02094 49.4539 7.39387 49.4539 8.09831C49.4539 8.80275 48.9152 9.17569 47.893 9.17569H45.3376V7.02094ZM51.5259 8.09831C51.5259 6.27506 50.186 5.15625 47.9897 5.15625H43.2656V14.825H45.3376V11.0404H47.6443L49.7164 14.825H52.0094L49.715 10.7521C50.8666 10.3094 51.5259 9.37721 51.5259 8.09831Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask7_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask7_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M57.8732 13.0565C56.2438 13.0565 55.2496 11.8963 55.2496 10.004C55.2496 8.08416 56.2438 6.92394 57.8732 6.92394C59.4887 6.92394 60.4691 8.08416 60.4691 10.004C60.4691 11.8963 59.4887 13.0565 57.8732 13.0565ZM57.8732 4.99023C55.0839 4.99023 53.1094 7.06206 53.1094 10.004C53.1094 12.9184 55.0839 14.9902 57.8732 14.9902C60.6486 14.9902 62.6094 12.9184 62.6094 10.004C62.6094 7.06206 60.6486 4.99023 57.8732 4.99023Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask8_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask8_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M69.1794 9.45194H66.6233V7.02094H69.1794C70.2019 7.02094 70.7407 7.43532 70.7407 8.23644C70.7407 9.03756 70.2019 9.45194 69.1794 9.45194ZM69.2762 5.15625H64.5508V14.825H66.6233V11.3166H69.2762C71.473 11.3166 72.8133 10.1564 72.8133 8.23644C72.8133 6.3165 71.473 5.15625 69.2762 5.15625Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask9_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask9_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M86.8413 11.5786C86.4823 12.5179 85.7642 13.0565 84.7837 13.0565C83.1542 13.0565 82.16 11.8963 82.16 10.004C82.16 8.08416 83.1542 6.92394 84.7837 6.92394C85.7642 6.92394 86.4823 7.46261 86.8413 8.40183H89.0369C88.4984 6.33002 86.8827 4.99023 84.7837 4.99023C81.9942 4.99023 80.0195 7.06206 80.0195 10.004C80.0195 12.9184 81.9942 14.9902 84.7837 14.9902C86.8965 14.9902 88.5122 13.6366 89.0508 11.5786H86.8413Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask10_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask10_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M73.6484 5.15625L77.5033 14.825H79.6172L75.7624 5.15625H73.6484Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "mask",
+												"attributes": {
+													"id": "mask11_8587_60274",
+													"style": "mask-type:luminance",
+													"maskUnits": "userSpaceOnUse",
+													"x": "0",
+													"y": "4",
+													"width": "90",
+													"height": "11"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M0 4.99219H89.375V14.9922H0V4.99219Z",
+															"fill": "currentColor"
+														},
+														"children": []
+													}
+												]
+											},
+											{
+												"type": "element",
+												"name": "g",
+												"attributes": {
+													"mask": "url(#mask11_8587_60274)"
+												},
+												"children": [
+													{
+														"type": "element",
+														"name": "path",
+														"attributes": {
+															"d": "M3.64038 10.9989L4.95938 7.60106L6.27838 10.9989H3.64038ZM3.85422 5.15625L0 14.825H2.15505L2.9433 12.7946H6.97558L7.76371 14.825H9.91875L6.06453 5.15625H3.85422Z",
+															"fill": "currentColor",
+															"fill-opacity": "0.92"
+														},
+														"children": []
+													}
+												]
+											}
+										]
+									}
+								]
+							}
+						]
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "clipPath",
+						"attributes": {
+							"id": "clip0_8587_60274"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "rect",
+								"attributes": {
+									"width": "89.375",
+									"height": "10",
+									"fill": "white",
+									"transform": "translate(0 5)"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "AnthropicText"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/other/AnthropicText.tsx b/web/app/components/base/icons/src/vender/other/AnthropicText.tsx
new file mode 100644
index 0000000000..868cfe5f27
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/other/AnthropicText.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './AnthropicText.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'AnthropicText'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/other/Openai.json b/web/app/components/base/icons/src/vender/other/Openai.json
new file mode 100644
index 0000000000..236f66fcf2
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/other/Openai.json
@@ -0,0 +1,80 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "80",
+			"height": "22",
+			"viewBox": "0 0 80 22",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M25.1152 10.5767C25.1152 14.1738 27.4253 16.6818 30.6264 16.6818C33.8274 16.6818 36.1375 14.1738 36.1375 10.5767C36.1375 6.97961 33.8274 4.47156 30.6264 4.47156C27.4253 4.47156 25.1152 6.97961 25.1152 10.5767ZM34.0254 10.5767C34.0254 13.1507 32.6229 14.8173 30.6264 14.8173C28.6298 14.8173 27.2273 13.1507 27.2273 10.5767C27.2273 8.00263 28.6298 6.3361 30.6264 6.3361C32.6229 6.3361 34.0254 8.00263 34.0254 10.5767Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M42.0868 16.6819C44.5124 16.6819 45.8984 14.6358 45.8984 12.1773C45.8984 9.71871 44.5124 7.67267 42.0868 7.67267C40.9648 7.67267 40.1398 8.11818 39.5953 8.76169V7.83767H37.6152V19.4704H39.5953V15.5928C40.1398 16.2364 40.9648 16.6819 42.0868 16.6819ZM39.5458 11.9298C39.5458 10.2962 40.4698 9.40521 41.6908 9.40521C43.1264 9.40521 43.9019 10.5272 43.9019 12.1773C43.9019 13.8273 43.1264 14.9493 41.6908 14.9493C40.4698 14.9493 39.5458 14.0418 39.5458 12.4413V11.9298Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M51.2545 16.6819C52.987 16.6819 54.3565 15.7743 54.967 14.2563L53.2675 13.6128C53.0035 14.5038 52.228 14.9988 51.2545 14.9988C49.9839 14.9988 49.0929 14.0913 48.9444 12.6063H55.0165V11.9463C55.0165 9.57021 53.68 7.67267 51.172 7.67267C48.6639 7.67267 47.0469 9.63621 47.0469 12.1773C47.0469 14.8503 48.7794 16.6819 51.2545 16.6819ZM51.1555 9.3392C52.4095 9.3392 53.0035 10.1642 53.02 11.1212H49.0434C49.3404 9.94972 50.1324 9.3392 51.1555 9.3392Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M56.5039 16.5004H58.484V11.4182C58.484 10.1807 59.3915 9.52071 60.2825 9.52071C61.3715 9.52071 61.8005 10.2962 61.8005 11.3687V16.5004H63.7806V10.7912C63.7806 8.9267 62.6915 7.67267 60.8765 7.67267C59.7545 7.67267 58.979 8.18418 58.484 8.76169V7.83767H56.5039V16.5004Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M69.5799 4.65308L65.0918 16.5003H67.1873L68.1939 13.7943H73.309L74.332 16.5003H76.4605L71.9724 4.65308H69.5799ZM70.7349 6.99613L72.616 11.9462H68.8869L70.7349 6.99613Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M79.8581 4.6875H77.7461V16.5348H79.8581V4.6875Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M20.2769 9.00436C20.776 7.50627 20.6041 5.86517 19.8059 4.50251C18.6055 2.41247 16.1924 1.3372 13.8356 1.84321C12.7871 0.662057 11.2808 -0.00964523 9.70154 -2.00271e-05C7.29248 -0.00552014 5.155 1.54551 4.41386 3.83769C2.86626 4.15463 1.53042 5.12334 0.748717 6.49631C-0.460621 8.58085 -0.184928 11.2085 1.43073 12.9961C0.931596 14.4942 1.10348 16.1353 1.90168 17.4979C3.10208 19.588 5.51526 20.6632 7.87206 20.1572C8.91983 21.3384 10.4269 22.0101 12.0061 21.9998C14.4165 22.006 16.5547 20.4535 17.2958 18.1593C18.8434 17.8424 20.1793 16.8737 20.961 15.5007C22.1689 13.4161 21.8925 10.7905 20.2776 9.00298L20.2769 9.00436ZM12.0075 20.5622C11.0429 20.5635 10.1085 20.226 9.36809 19.6079C9.40178 19.59 9.46022 19.5577 9.49803 19.5343L13.8789 17.0043C14.103 16.8771 14.2405 16.6385 14.2391 16.3807V10.2048L16.0906 11.2738C16.1105 11.2835 16.1236 11.3027 16.1264 11.3247V16.4391C16.1236 18.7134 14.2818 20.5574 12.0075 20.5622ZM3.14952 16.7788C2.6662 15.9441 2.49225 14.9658 2.65795 14.0163C2.69026 14.0356 2.74732 14.0707 2.78789 14.094L7.16873 16.6241C7.3908 16.754 7.6658 16.754 7.88856 16.6241L13.2367 13.5358V15.6739C13.2381 15.6959 13.2278 15.7173 13.2106 15.731L8.78233 18.2879C6.80985 19.4236 4.29079 18.7485 3.15021 16.7788H3.14952ZM1.99656 7.21613C2.47782 6.38012 3.23752 5.74073 4.14229 5.40866C4.14229 5.44647 4.14023 5.51316 4.14023 5.55991V10.6207C4.13885 10.8778 4.27636 11.1164 4.4998 11.2436L9.84798 14.3312L7.9965 15.4003C7.97794 15.4127 7.95456 15.4147 7.93393 15.4058L3.50496 12.8469C1.53661 11.707 0.86147 9.18861 1.99587 7.21682L1.99656 7.21613ZM17.2085 10.7561L11.8603 7.66783L13.7118 6.59943C13.7304 6.58706 13.7537 6.585 13.7744 6.59393L18.2033 9.1508C20.1751 10.29 20.851 12.8125 19.7118 14.7843C19.2298 15.6189 18.4708 16.2583 17.5667 16.5911V11.379C17.5688 11.1219 17.432 10.884 17.2092 10.7561H17.2085ZM19.0511 7.98271C19.0187 7.96278 18.9617 7.9284 18.9211 7.90502L14.5403 5.37497C14.3182 5.24503 14.0432 5.24503 13.8204 5.37497L8.47226 8.46329V6.32512C8.47088 6.30311 8.4812 6.2818 8.49838 6.26805L12.9267 3.71325C14.8991 2.57541 17.4209 3.25261 18.5581 5.22578C19.0387 6.05905 19.2126 7.03463 19.0497 7.98271H19.0511ZM7.46574 11.7936L5.61357 10.7245C5.59363 10.7149 5.58057 10.6956 5.57782 10.6736V5.55922C5.5792 3.28218 7.42655 1.43689 9.7036 1.43826C10.6668 1.43826 11.5991 1.77652 12.3395 2.39253C12.3058 2.41041 12.2481 2.44272 12.2096 2.46609L7.82874 4.99615C7.60461 5.12334 7.46711 5.36122 7.46849 5.61904L7.46574 11.7922V11.7936ZM8.47157 9.62519L10.8538 8.24947L13.236 9.6245V12.3752L10.8538 13.7503L8.47157 12.3752V9.62519Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Openai"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/other/Openai.tsx b/web/app/components/base/icons/src/vender/other/Openai.tsx
new file mode 100644
index 0000000000..cf8d21a449
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/other/Openai.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Openai.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Openai'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/other/index.ts b/web/app/components/base/icons/src/vender/other/index.ts
index cb2ca507b4..8ddf5e7a86 100644
--- a/web/app/components/base/icons/src/vender/other/index.ts
+++ b/web/app/components/base/icons/src/vender/other/index.ts
@@ -1,3 +1,5 @@
+export { default as AnthropicText } from './AnthropicText'
 export { default as Generator } from './Generator'
 export { default as Group } from './Group'
+export { default as Openai } from './Openai'
 export { default as ReplayLine } from './ReplayLine'
diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
index 14b737e0de..c9f8e44c59 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/index.tsx
@@ -35,7 +35,6 @@ import {
   useLanguage,
   useProviderCredentialsAndLoadBalancing,
 } from '../hooks'
-import ProviderIcon from '../provider-icon'
 import { useValidate } from '../../key-validator/hooks'
 import { ValidatedStatus } from '../../key-validator/declarations'
 import ModelLoadBalancingConfigs from '../provider-added-card/model-load-balancing-configs'
@@ -282,9 +281,8 @@ const ModelModal: FC<ModelModalProps> = ({
         <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
           <div className='mx-2 w-[640px] max-h-[calc(100vh-120px)] bg-components-panel-bg shadow-xl rounded-2xl overflow-y-auto'>
             <div className='px-8 pt-8'>
-              <div className='flex justify-between items-center mb-2'>
+              <div className='flex items-center mb-2'>
                 <div className='text-xl font-semibold text-text-primary'>{renderTitlePrefix()}</div>
-                <ProviderIcon provider={provider} />
               </div>
 
               <Form
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index 379a9f41ca..a955d9804a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -63,7 +63,7 @@ const ModelName: FC<ModelNameProps> = ({
           <FeatureIcon
             key={feature}
             feature={feature}
-            className={featuresClassName}
+            className={cn('ml-1', featuresClassName)}
           />
         ))
       }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/stop-sequence.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/stop-sequence.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
index ba632179d1..2fbc517ec1 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger.tsx
@@ -46,8 +46,8 @@ const Trigger: FC<TriggerProps> = ({
       className={cn(
         'relative flex items-center px-2 h-8 rounded-lg  cursor-pointer',
         !isInWorkflow && 'border hover:border-[1.5px]',
-        !isInWorkflow && (disabled ? 'border-[#F79009] bg-[#FFFAEB]' : 'border-[#444CE7] bg-primary-50'),
-        isInWorkflow && 'pr-[30px] bg-gray-100 border border-gray-100  hover:border-gray-200',
+        !isInWorkflow && (disabled ? 'border-[#F79009] bg-components-input-bg-disabled' : 'border-[#444CE7] bg-components-input-bg-normal'),
+        isInWorkflow && 'pr-[30px] bg-components-input-bg-normal border border-components-input-border-hover  hover:border-components-input-border-hover',
       )}
     >
       {
@@ -71,18 +71,16 @@ const Trigger: FC<TriggerProps> = ({
       {
         currentModel && (
           <ModelName
-            className='mr-1.5 text-gray-900'
+            className='mr-1.5 text-text-primary'
             modelItem={currentModel}
             showMode
-            modeClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
             showFeatures
-            featuresClassName={cn(!isInWorkflow ? '!text-[#444CE7] !border-[#A4BCFD]' : '!text-gray-500 !border-black/8')}
           />
         )
       }
       {
         !currentModel && (
-          <div className='mr-1 text-[13px] font-medium text-gray-900 truncate'>
+          <div className='mr-1 text-[13px] font-medium text-text-primary truncate'>
             {modelId}
           </div>
         )
@@ -103,10 +101,10 @@ const Trigger: FC<TriggerProps> = ({
             </Tooltip>
           )
           : (
-            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-gray-500', 'shrink-0 w-4 h-4')} />
+            <SlidersH className={cn(!isInWorkflow ? 'text-indigo-600' : 'text-text-tertiary', 'shrink-0 w-4 h-4')} />
           )
       }
-      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-gray-500' />)}
+      {isInWorkflow && (<RiArrowDownSLine className='absolute top-[9px] right-2 w-3.5 h-3.5 text-text-tertiary' />)}
     </div>
   )
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
index f40423d869..e47afa1c4d 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/deprecated-model-trigger.tsx
@@ -4,6 +4,7 @@ import ModelIcon from '../model-icon'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { useProviderContext } from '@/context/provider-context'
 import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
 
 type ModelTriggerProps = {
   modelName: string
@@ -21,17 +22,14 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={`
-        group flex items-center px-2 h-8 rounded-lg bg-[#FFFAEB] cursor-pointer
-        ${className}
-      `}
+      className={cn('group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-disabled cursor-pointer', className)}
     >
       <ModelIcon
         className='shrink-0 mr-1.5'
         provider={currentProvider}
         modelName={modelName}
       />
-      <div className='mr-1 text-[13px] font-medium text-gray-800 truncate'>
+      <div className='mr-1 text-[13px] font-medium text-text-secondary truncate'>
         {modelName}
       </div>
       <div className='shrink-0 flex items-center justify-center w-4 h-4'>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
index 0c6d3efa39..ccbf2d8c22 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/empty-trigger.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
+import cn from '@/utils/classnames'
 
 type ModelTriggerProps = {
   open: boolean
@@ -12,25 +13,24 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 }) => {
   return (
     <div
-      className={`
-        flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer
-        ${className}
-        ${open && '!bg-gray-200'}
-      `}
+      className={cn(
+        'flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal hover:bg-components-input-bg-hover cursor-pointer', open && 'bg-components-input-bg-hover',
+        className,
+      )}
     >
       <div className='grow flex items-center'>
-        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-black/5'>
-          <CubeOutline className='w-3 h-3 text-gray-400' />
+        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border border-dashed border-divider-regular'>
+          <CubeOutline className='w-3 h-3 text-text-quaternary' />
         </div>
         <div
-          className='text-[13px] text-gray-500 truncate'
+          className='text-[13px] text-text-tertiary truncate'
           title='Select model'
         >
           Select model
         </div>
       </div>
       <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500' />
+        <RiArrowDownSLine className='w-3.5 h-3.5 text-text-tertiary' />
       </div>
     </div>
   )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
index 32bd58d318..e9f59cd38e 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx
@@ -65,7 +65,7 @@ const FeatureIcon: FC<FeatureIconProps> = ({
         popupContent={t('common.modelProvider.featureSupported', { feature: ModelFeatureTextEnum.vision })}
       >
         <div className='inline-block cursor-help'>
-          <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-gray-500 ${className}`}>
+          <ModelBadge className={`mr-0.5 !px-0 w-[18px] justify-center text-text-tertiary ${className}`}>
             <MagicEyes className='w-3 h-3' />
           </ModelBadge>
         </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
index 023c6a5cd2..88c8627187 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -13,6 +13,7 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
 
 type ModelTriggerProps = {
   open: boolean
@@ -32,13 +33,13 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={`
-        group flex items-center px-2 h-8 rounded-lg bg-gray-100 
-        ${!readonly && 'hover:bg-gray-200 cursor-pointer'}
-        ${className}
-        ${open && '!bg-gray-200'}
-        ${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
-      `}
+      className={cn(
+        'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
+        !readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
+        open && 'bg-components-input-bg-hover',
+        model.status !== ModelStatusEnum.active && 'bg-components-input-bg-disabled hover:bg-components-input-bg-disabled',
+        className,
+      )}
     >
       <ModelIcon
         className='shrink-0 mr-1.5'
@@ -62,7 +63,7 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
               )
               : (
                 <RiArrowDownSLine
-                  className='w-3.5 h-3.5 text-gray-500'
+                  className='w-3.5 h-3.5 text-text-tertiary'
                 />
               )
           }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
index d62131ac4c..425fc2e34a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@@ -64,7 +64,7 @@ const PopupItem: FC<PopupItemProps> = ({
 
   return (
     <div className='mb-1'>
-      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
+      <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
         {model.label[language] || model.label.en_US}
       </div>
       {
@@ -78,7 +78,7 @@ const PopupItem: FC<PopupItemProps> = ({
               key={modelItem.model}
               className={`
                 group relative flex items-center px-3 py-1.5 h-8 rounded-lg
-                ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-gray-50' : 'cursor-not-allowed hover:bg-gray-50/60'}
+                ${modelItem.status === ModelStatusEnum.active ? 'cursor-pointer hover:bg-state-base-hover' : 'cursor-not-allowed hover:bg-state-base-hover-alt'}
               `}
               onClick={() => handleSelect(model.provider, modelItem)}
             >
@@ -92,7 +92,7 @@ const PopupItem: FC<PopupItemProps> = ({
               />
               <ModelName
                 className={`
-                  grow text-sm font-normal text-gray-900
+                  grow text-sm font-normal text-text-primary
                   ${modelItem.status !== ModelStatusEnum.active && 'opacity-60'}
                 `}
                 modelItem={modelItem}
@@ -101,13 +101,13 @@ const PopupItem: FC<PopupItemProps> = ({
               />
               {
                 defaultModel?.model === modelItem.model && defaultModel.provider === currentProvider.provider && (
-                  <Check className='shrink-0 w-4 h-4 text-primary-600' />
+                  <Check className='shrink-0 w-4 h-4 text-text-accent' />
                 )
               }
               {
                 modelItem.status === ModelStatusEnum.noConfigure && (
                   <div
-                    className='hidden group-hover:block text-xs font-medium text-primary-600 cursor-pointer'
+                    className='hidden group-hover:block text-xs font-medium text-text-accent cursor-pointer'
                     onClick={handleOpenModelModal}
                   >
                     {t('common.operation.add').toLocaleUpperCase()}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
index 1e43439d15..cb9492c4d2 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@@ -39,20 +39,20 @@ const Popup: FC<PopupProps> = ({
   }).filter(model => model.models.length > 0)
 
   return (
-    <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg overflow-y-auto'>
-      <div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-white z-10'>
+    <div className='w-[320px] max-h-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg overflow-y-auto'>
+      <div className='sticky top-0 pl-3 pt-3 pr-2 pb-1 bg-components-panel-bg z-10'>
         <div className={`
           flex items-center pl-[9px] pr-[10px] h-8 rounded-lg border
-          ${searchText ? 'bg-white border-gray-300 shadow-xs' : 'bg-gray-100 border-transparent'}
+          ${searchText ? 'bg-components-input-bg-active border-components-input-border-active shadow-xs' : 'bg-components-input-bg-normal border-transparent'}
         `}>
           <RiSearchLine
             className={`
               shrink-0 mr-[7px] w-[14px] h-[14px]
-              ${searchText ? 'text-gray-500' : 'text-gray-400'}
+              ${searchText ? 'text-text-tertiary' : 'text-text-quaternary'}
             `}
           />
           <input
-            className='block grow h-[18px] text-[13px] appearance-none outline-none bg-transparent'
+            className='block grow h-[18px] text-[13px] text-text-primary appearance-none outline-none bg-transparent'
             placeholder='Search model'
             value={searchText}
             onChange={e => setSearchText(e.target.value)}
@@ -60,7 +60,7 @@ const Popup: FC<PopupProps> = ({
           {
             searchText && (
               <XCircle
-                className='shrink-0 ml-1.5 w-[14px] h-[14px] text-gray-400 cursor-pointer'
+                className='shrink-0 ml-1.5 w-[14px] h-[14px] text-text-quaternary cursor-pointer'
                 onClick={() => setSearchText('')}
               />
             )
@@ -80,7 +80,7 @@ const Popup: FC<PopupProps> = ({
         }
         {
           !filteredModelList.length && (
-            <div className='px-3 py-1.5 leading-[18px] text-center text-xs text-gray-500 break-all'>
+            <div className='px-3 py-1.5 leading-[18px] text-center text-xs text-text-tertiary break-all'>
               {`No model found for “${searchText}”`}
             </div>
           )
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx
deleted file mode 100644
index 29afca1196..0000000000
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/rerank-trigger.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
-  RiExternalLinkLine,
-} from '@remixicon/react'
-import { CubeOutline } from '@/app/components/base/icons/src/vender/line/shapes'
-
-const ModelTrigger = () => {
-  return (
-    <div className='flex items-center px-2 h-8 rounded-lg bg-gray-100 hover:bg-gray-200 cursor-pointer'>
-      <div className='grow flex items-center'>
-        <div className='mr-1.5 flex items-center justify-center w-4 h-4 rounded-[5px] border-dashed border-black/5'>
-          <CubeOutline className='w-[11px] h-[11px] text-gray-400' />
-        </div>
-        <div
-          className='text-[13px] text-gray-500 truncate'
-          title='Select model'
-        >
-          Please setup the Rerank model
-        </div>
-      </div>
-      <div className='shrink-0 flex items-center justify-center w-4 h-4'>
-        <RiExternalLinkLine className='w-3.5 h-3.5 text-gray-500' />
-      </div>
-    </div>
-  )
-}
-
-export default ModelTrigger
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
index 768f2c2766..25105b1193 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
@@ -1,6 +1,8 @@
 import type { FC } from 'react'
 import type { ModelProvider } from '../declarations'
 import { useLanguage } from '../hooks'
+import { AnthropicText, Openai } from '@/app/components/base/icons/src/vender/other'
+import cn from '@/utils/classnames'
 
 type ProviderIconProps = {
   provider: ModelProvider
@@ -12,19 +14,30 @@ const ProviderIcon: FC<ProviderIconProps> = ({
 }) => {
   const language = useLanguage()
 
-  if (provider.icon_large) {
+  if (provider.provider === 'langgenius/anthropic/anthropic') {
     return (
-      <img
-        alt='provider-icon'
-        src={`${provider.icon_large[language] || provider.icon_large.en_US}`}
-        className={`w-auto h-6 ${className}`}
-      />
+      <div className='mb-2'>
+        <AnthropicText className='w-auto h-6 text-text-inverted-dimmed' />
+      </div>
+    )
+  }
+
+  if (provider.provider === 'langgenius/openai/openai') {
+    return (
+      <div className='mb-2'>
+        <Openai className='w-auto h-6 text-text-inverted-dimmed' />
+      </div>
     )
   }
 
   return (
-    <div className={`inline-flex items-center ${className}`}>
-      <div className='text-xs font-semibold text-black'>
+    <div className={cn('inline-flex items-center gap-2', className)}>
+      <img
+        alt='provider-icon'
+        src={`${provider.icon_small[language] || provider.icon_small.en_US}`}
+        className='w-6 h-6'
+      />
+      <div className='system-md-semibold text-text-primary'>
         {provider.label[language] || provider.label.en_US}
       </div>
     </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 2e1e6400d1..46d1fafcc7 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -140,13 +140,13 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-50'>
-        <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-black/5 bg-white shadow-xl'>
+        <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.systemReasoningModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.systemReasoningModel.tip')}
                   </div>
                 }
@@ -162,11 +162,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.embeddingModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.embeddingModel.tip')}
                   </div>
                 }
@@ -182,11 +182,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.rerankModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.rerankModel.tip')}
                   </div>
                 }
@@ -202,11 +202,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.speechToTextModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.speechToTextModel.tip')}
                   </div>
                 }
@@ -222,11 +222,11 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
             </div>
           </div>
           <div className='px-6 py-1'>
-            <div className='flex items-center h-8 text-[13px] font-medium text-gray-900'>
+            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
               {t('common.modelProvider.ttsModel.key')}
               <Tooltip
                 popupContent={
-                  <div className='w-[261px] text-gray-500'>
+                  <div className='w-[261px] text-text-tertiary'>
                     {t('common.modelProvider.ttsModel.tip')}
                   </div>
                 }
diff --git a/web/context/app-context.tsx b/web/context/app-context.tsx
index 369fe5af19..94bcc81e89 100644
--- a/web/context/app-context.tsx
+++ b/web/context/app-context.tsx
@@ -125,7 +125,7 @@ export const AppContextProvider: FC<AppContextProviderProps> = ({ children }) =>
       setCurrentWorkspace(currentWorkspaceResponse)
   }, [currentWorkspaceResponse])
 
-  const [theme, setTheme] = useState<Theme>(Theme.light)
+  const [theme, setTheme] = useState<Theme>(Theme.dark)
   const handleSetTheme = useCallback((theme: Theme) => {
     setTheme(theme)
     globalThis.document.documentElement.setAttribute('data-theme', theme)