diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
index bb1e4fd95b..00f1190045 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
@@ -46,7 +46,7 @@ export default function ChartView({ appId }: IChartViewProps) {
 
   return (
     <div>
-      <div className='flex flex-row items-center mt-8 mb-4 text-gray-900 text-base'>
+      <div className='flex flex-row items-center mt-8 mb-4 system-xl-semibold text-text-primary'>
         <span className='mr-3'>{t('appOverview.analysis.title')}</span>
         <SimpleSelect
           items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
index 137c2c36ee..47dd36eb81 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
@@ -12,7 +12,7 @@ const Overview = async ({
   params: { appId },
 }: IDevelopProps) => {
   return (
-    <div className="h-full px-4 sm:px-16 py-6 overflow-scroll">
+    <div className="h-full px-4 sm:px-12 py-6 overflow-scroll bg-chatbot-bg">
       <ApikeyInfoPanel />
       <TracingPanel />
       <CardView appId={appId} />
diff --git a/web/app/components/app-sidebar/basic.tsx b/web/app/components/app-sidebar/basic.tsx
index 51fc10721e..20777c7b6a 100644
--- a/web/app/components/app-sidebar/basic.tsx
+++ b/web/app/components/app-sidebar/basic.tsx
@@ -60,18 +60,18 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
   return (
     <div className="flex items-start p-1">
       {icon && icon_background && iconType === 'app' && (
-        <div className='flex-shrink-0 mr-3'>
+        <div className='shrink-0 mr-3'>
           <AppIcon icon={icon} background={icon_background} />
         </div>
       )}
       {iconType !== 'app'
-        && <div className='flex-shrink-0 mr-3'>
+        && <div className='shrink-0 mr-3'>
           {ICON_MAP[iconType]}
         </div>
 
       }
       {mode === 'expand' && <div className="group">
-        <div className={`flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all ${textStyle?.main ?? ''}`}>
+        <div className={`flex flex-row items-center text-sm font-semibold text-text-secondary group-hover:text-text-primary break-all ${textStyle?.main ?? ''}`}>
           {name}
           {hoverTip
             && <Tooltip
@@ -86,7 +86,7 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
             />
           }
         </div>
-        <div className={`text-xs font-normal text-gray-500 group-hover:text-gray-700 break-all ${textStyle?.extra ?? ''}`}>{type}</div>
+        <div className={`text-xs font-normal text-text-tertiary group-hover:text-text-secondary break-all ${textStyle?.extra ?? ''}`}>{type}</div>
         <div className='text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : ''}</div>
       </div>}
     </div>
diff --git a/web/app/components/app/overview/appChart.tsx b/web/app/components/app/overview/appChart.tsx
index d1426caa27..6ae6253812 100644
--- a/web/app/components/app/overview/appChart.tsx
+++ b/web/app/components/app/overview/appChart.tsx
@@ -231,7 +231,7 @@ const Chart: React.FC<IChartProps> = ({
   const sumData = isAvg ? (sum(yData) / yData.length) : sum(yData)
 
   return (
-    <div className={`flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-xs ${className ?? ''}`}>
+    <div className={`flex flex-col w-full px-6 py-4 rounded-xl bg-components-chart-bg shadow-xs ${className ?? ''}`}>
       <div className='mb-3'>
         <Basic name={title} type={timePeriod} hoverTip={explanation} />
       </div>
@@ -242,11 +242,11 @@ const Chart: React.FC<IChartProps> = ({
           type={!CHART_TYPE_CONFIG[chartType].showTokens
             ? ''
             : <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
-              <span className='ml-1 text-gray-500'>(</span>
+              <span className='ml-1 text-text-tertiary'>(</span>
               <span className='text-orange-400'>~{sum(statistics.map(item => Number.parseFloat(get(item, 'total_price', '0')))).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 4 })}</span>
-              <span className='text-gray-500'>)</span>
+              <span className='text-text-tertiary'>)</span>
             </span></span>}
-          textStyle={{ main: `!text-3xl !font-normal ${sumData === 0 ? '!text-gray-300' : ''}` }} />
+          textStyle={{ main: `!text-3xl !font-normal ${sumData === 0 ? '!text-text-quaternary' : ''}` }} />
       </div>
       <ReactECharts option={options} style={{ height: 160 }} />
     </div>
diff --git a/web/app/components/base/modal/index.tsx b/web/app/components/base/modal/index.tsx
index 26cde5fce3..a659ccaac7 100644
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@@ -29,7 +29,7 @@ export default function Modal({
 }: IModal) {
   return (
     <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={classNames('relative z-50', wrapperClassName)} onClose={onClose}>
+      <Dialog as="div" className={classNames('relative z-[60]', wrapperClassName)} onClose={onClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index 687d402582..3332a11abd 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -245,7 +245,7 @@ const SimpleSelect: FC<ISelectProps> = ({
             leaveTo="opacity-0"
           >
 
-            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
+            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
               {items.map((item: Item) => (
                 <Listbox.Option
                   key={item.value}
diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
index eda380d2ae..1abaf4b891 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx
@@ -28,7 +28,6 @@ const ModelIcon: FC<ModelIconProps> = ({
 
   if (provider?.icon_small) {
     return (
-
       <div className={`flex items-center justify-center ${isDeprecated ? 'opacity-50' : ''}`}>
         <img
           alt='model-icon'
@@ -44,8 +43,8 @@ const ModelIcon: FC<ModelIconProps> = ({
       'flex items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
       className,
     )}>
-      <div className='flex w-5 h5 items-center justify-center opacity-35'>
-        <Group className='text-text-tertiary' />
+      <div className='flex w-5 h-5 items-center justify-center opacity-35'>
+        <Group className='text-text-tertiary w-3 h-3' />
       </div>
     </div>
   )
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 df6e69193e..d9cdb26431 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
@@ -91,7 +91,7 @@ const PopupItem: FC<PopupItemProps> = ({
             popupClassName='p-3 !w-[206px] bg-components-panel-bg-blur backdrop-blur-sm border-[0.5px] border-components-panel-border rounded-xl'
             popupContent={
               <div className='flex flex-col gap-1'>
-                <div className='flex flex-col gap-2'>
+                <div className='flex flex-col items-start gap-2'>
                   <ModelIcon
                     className={cn('shrink-0 w-5 h-5')}
                     provider={model}
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 ad06c3238b..8de3cbd720 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
@@ -106,7 +106,7 @@ const Popup: FC<PopupProps> = ({
           )
         }
       </div>
-      <div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only' onClick={() => {
+      <div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only bg-components-panel-bg rounded-b-lg' onClick={() => {
         onHide()
         setShowAccountSettingModal({ payload: 'provider' })
       }}>
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 46d1fafcc7..ec2bdc265f 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
@@ -139,7 +139,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
           {t('common.modelProvider.systemModelSettings')}
         </Button>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className='z-[60]'>
         <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-text-primary'>
diff --git a/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx b/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx
new file mode 100644
index 0000000000..6bcb8f0321
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx
@@ -0,0 +1,43 @@
+import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useProviderContext } from '@/context/provider-context'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
+import { useInvalidateStrategyProviders } from '@/service/use-strategy'
+import type { Plugin, PluginManifestInMarket } from '../../types'
+import { PluginType } from '../../types'
+
+const useRefreshPluginList = () => {
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const updateModelProviders = useUpdateModelProviders()
+  const { refreshModelProviders } = useProviderContext()
+
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
+  const invalidateAllBuiltInTools = useInvalidateAllBuiltInTools()
+
+  const invalidateStrategyProviders = useInvalidateStrategyProviders()
+  return {
+    refreshPluginList: (manifest: PluginManifestInMarket | Plugin) => {
+      // installed list
+      invalidateInstalledPluginList()
+
+      // tool page, tool select
+      if (PluginType.tool.includes(manifest.category)) {
+        invalidateAllToolProviders()
+        invalidateAllBuiltInTools()
+        // TODO: update suggested tools. It's a function in hook useMarketplacePlugins,handleUpdatePlugins
+      }
+
+      // model select
+      if (PluginType.model.includes(manifest.category)) {
+        updateModelProviders()
+        refreshModelProviders()
+      }
+
+      // agent select
+      if (PluginType.agent.includes(manifest.category))
+        invalidateStrategyProviders()
+    },
+  }
+}
+
+export default useRefreshPluginList
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
index 046806ee08..7ac271b83f 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@@ -3,13 +3,11 @@
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
 import type { Dependency, Plugin, PluginManifestInMarket } from '../../types'
-import { InstallStep, PluginType } from '../../types'
+import { InstallStep } from '../../types'
 import Install from './steps/install'
 import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
-import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import { useInvalidateAllToolProviders } from '@/service/use-tools'
+import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'
 
 const i18nPrefix = 'plugin.installModal'
@@ -35,9 +33,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
   // readyToInstall -> check installed -> installed/failed
   const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
   const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const updateModelProviders = useUpdateModelProviders()
-  const invalidateAllToolProviders = useInvalidateAllToolProviders()
-  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const { refreshPluginList } = useRefreshPluginList()
 
   const getTitle = useCallback(() => {
     if (isBundle && step === InstallStep.installed)
@@ -51,12 +47,8 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
 
   const handleInstalled = useCallback(() => {
     setStep(InstallStep.installed)
-    invalidateInstalledPluginList()
-    if (PluginType.model.includes(manifest.category))
-      updateModelProviders()
-    if (PluginType.tool.includes(manifest.category))
-      invalidateAllToolProviders()
-  }, [invalidateAllToolProviders, invalidateInstalledPluginList, manifest, updateModelProviders])
+    refreshPluginList(manifest)
+  }, [manifest, refreshPluginList])
 
   const handleFailed = useCallback((errorMsg?: string) => {
     setStep(InstallStep.installFailed)