diff --git a/web/app/components/base/toast/index.tsx b/web/app/components/base/toast/index.tsx
index 7c53acdc05..5c8386ac27 100644
--- a/web/app/components/base/toast/index.tsx
+++ b/web/app/components/base/toast/index.tsx
@@ -50,10 +50,10 @@ const Toast = ({
     'right-0',
   )}>
     <div className={`absolute inset-0 opacity-40 ${
-      (type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
-      || (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
-      || (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
-      || (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+      (type === 'success' && 'bg-toast-success-bg')
+      || (type === 'warning' && 'bg-toast-warning-bg')
+      || (type === 'error' && 'bg-toast-error-bg')
+      || (type === 'info' && 'bg-toast-info-bg')
     }`}
     />
     <div className={`flex ${size === 'md' ? 'gap-1' : 'gap-0.5'}`}>
@@ -70,9 +70,11 @@ const Toast = ({
         </div>
         }
       </div>
-      <ActionButton className='z-[1000]' onClick={close}>
-        <RiCloseLine className='w-4 h-4 shrink-0 text-text-tertiary' />
-      </ActionButton>
+      {close
+        && (<ActionButton className='z-[1000]' onClick={close}>
+          <RiCloseLine className='w-4 h-4 shrink-0 text-text-tertiary' />
+        </ActionButton>)
+      }
     </div>
   </div>
 }
diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx
index 3236e1aefc..79618c6c9e 100644
--- a/web/app/components/plugins/marketplace/context.tsx
+++ b/web/app/components/plugins/marketplace/context.tsx
@@ -28,6 +28,7 @@ import type {
 import { DEFAULT_SORT } from './constants'
 import {
   useMarketplaceCollectionsAndPlugins,
+  useMarketplaceContainerScroll,
   useMarketplacePlugins,
 } from './hooks'
 import {
@@ -51,7 +52,7 @@ export type MarketplaceContextValue = {
   resetPlugins: () => void
   sort: PluginsSort
   handleSortChange: (sort: PluginsSort) => void
-  handleQueryPluginsWhenNoCollection: () => void
+  handleQueryPlugins: () => void
   marketplaceCollectionsFromClient?: MarketplaceCollection[]
   setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void
   marketplaceCollectionPluginsMapFromClient?: Record<string, Plugin[]>
@@ -75,7 +76,7 @@ export const MarketplaceContext = createContext<MarketplaceContextValue>({
   resetPlugins: () => {},
   sort: DEFAULT_SORT,
   handleSortChange: () => {},
-  handleQueryPluginsWhenNoCollection: () => {},
+  handleQueryPlugins: () => {},
   marketplaceCollectionsFromClient: [],
   setMarketplaceCollectionsFromClient: () => {},
   marketplaceCollectionPluginsMapFromClient: {},
@@ -88,6 +89,7 @@ type MarketplaceContextProviderProps = {
   children: ReactNode
   searchParams?: SearchParams
   shouldExclude?: boolean
+  scrollContainerId?: string
 }
 
 export function useMarketplaceContext(selector: (value: MarketplaceContextValue) => any) {
@@ -98,6 +100,7 @@ export const MarketplaceContextProvider = ({
   children,
   searchParams,
   shouldExclude,
+  scrollContainerId,
 }: MarketplaceContextProviderProps) => {
   const { data, isSuccess } = useInstalledPluginList(!shouldExclude)
   const exclude = useMemo(() => {
@@ -131,6 +134,7 @@ export const MarketplaceContextProvider = ({
   } = useMarketplaceCollectionsAndPlugins()
   const {
     plugins,
+    total: pluginsTotal,
     resetPlugins,
     queryPlugins,
     queryPluginsWithDebounced,
@@ -161,34 +165,60 @@ export const MarketplaceContextProvider = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [queryPlugins, queryMarketplaceCollectionsAndPlugins, isSuccess, exclude])
 
+  const handleQueryMarketplaceCollectionsAndPlugins = useCallback(() => {
+    queryMarketplaceCollectionsAndPlugins({
+      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+      condition: getMarketplaceListCondition(activePluginTypeRef.current),
+      exclude,
+      type: getMarketplaceListFilterType(activePluginTypeRef.current),
+    })
+    resetPlugins()
+  }, [exclude, queryMarketplaceCollectionsAndPlugins, resetPlugins])
+
+  const handleQueryPlugins = useCallback((debounced?: boolean) => {
+    if (debounced) {
+      queryPluginsWithDebounced({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+        page: pageRef.current,
+      })
+    }
+    else {
+      queryPlugins({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+        page: pageRef.current,
+      })
+    }
+  }, [exclude, queryPluginsWithDebounced, queryPlugins])
+
+  const handleQuery = useCallback((debounced?: boolean) => {
+    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      handleQueryMarketplaceCollectionsAndPlugins()
+      return
+    }
+
+    handleQueryPlugins(debounced)
+  }, [handleQueryMarketplaceCollectionsAndPlugins, handleQueryPlugins])
+
   const handleSearchPluginTextChange = useCallback((text: string) => {
     setSearchPluginText(text)
     searchPluginTextRef.current = text
     setPage(1)
     pageRef.current = 1
 
-    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
-      queryMarketplaceCollectionsAndPlugins({
-        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-        condition: getMarketplaceListCondition(activePluginTypeRef.current),
-        exclude,
-        type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      })
-      resetPlugins()
-
-      return
-    }
-
-    queryPluginsWithDebounced({
-      query: text,
-      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-      tags: filterPluginTagsRef.current,
-      sortBy: sortRef.current.sortBy,
-      sortOrder: sortRef.current.sortOrder,
-      exclude,
-      page: pageRef.current,
-    })
-  }, [queryPluginsWithDebounced, queryMarketplaceCollectionsAndPlugins, resetPlugins, exclude])
+    handleQuery(true)
+  }, [handleQuery])
 
   const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
     setFilterPluginTags(tags)
@@ -196,29 +226,8 @@ export const MarketplaceContextProvider = ({
     setPage(1)
     pageRef.current = 1
 
-    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
-      queryMarketplaceCollectionsAndPlugins({
-        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-        condition: getMarketplaceListCondition(activePluginTypeRef.current),
-        exclude,
-        type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      })
-      resetPlugins()
-
-      return
-    }
-
-    queryPlugins({
-      query: searchPluginTextRef.current,
-      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-      tags,
-      sortBy: sortRef.current.sortBy,
-      sortOrder: sortRef.current.sortOrder,
-      exclude,
-      type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      page: pageRef.current,
-    })
-  }, [queryPlugins, resetPlugins, queryMarketplaceCollectionsAndPlugins, exclude])
+    handleQuery()
+  }, [handleQuery])
 
   const handleActivePluginTypeChange = useCallback((type: string) => {
     setActivePluginType(type)
@@ -226,57 +235,8 @@ export const MarketplaceContextProvider = ({
     setPage(1)
     pageRef.current = 1
 
-    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
-      queryMarketplaceCollectionsAndPlugins({
-        category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
-        condition: getMarketplaceListCondition(type),
-        exclude,
-        type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      })
-      resetPlugins()
-
-      return
-    }
-
-    queryPlugins({
-      query: searchPluginTextRef.current,
-      category: type === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : type,
-      tags: filterPluginTagsRef.current,
-      sortBy: sortRef.current.sortBy,
-      sortOrder: sortRef.current.sortOrder,
-      exclude,
-      type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      page: pageRef.current,
-    })
-  }, [queryPlugins, resetPlugins, queryMarketplaceCollectionsAndPlugins, exclude])
-
-  const handlePageChange = useCallback(() => {
-    setPage(pageRef.current + 1)
-    pageRef.current++
-
-    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
-      queryMarketplaceCollectionsAndPlugins({
-        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-        condition: getMarketplaceListCondition(activePluginTypeRef.current),
-        exclude,
-        type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      })
-      resetPlugins()
-
-      return
-    }
-
-    queryPlugins({
-      query: searchPluginTextRef.current,
-      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-      tags: filterPluginTagsRef.current,
-      sortBy: sortRef.current.sortBy,
-      sortOrder: sortRef.current.sortOrder,
-      exclude,
-      type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      page: pageRef.current,
-    })
-  }, [exclude, queryPlugins, queryMarketplaceCollectionsAndPlugins, resetPlugins])
+    handleQuery()
+  }, [handleQuery])
 
   const handleSortChange = useCallback((sort: PluginsSort) => {
     setSort(sort)
@@ -284,32 +244,19 @@ export const MarketplaceContextProvider = ({
     setPage(1)
     pageRef.current = 1
 
-    queryPlugins({
-      query: searchPluginTextRef.current,
-      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-      tags: filterPluginTagsRef.current,
-      sortBy: sortRef.current.sortBy,
-      sortOrder: sortRef.current.sortOrder,
-      exclude,
-      type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      page: pageRef.current,
-    })
-  }, [queryPlugins, exclude])
+    handleQueryPlugins()
+  }, [handleQueryPlugins])
 
-  const handleQueryPluginsWhenNoCollection = useCallback(() => {
-    queryPlugins({
-      query: searchPluginTextRef.current,
-      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-      tags: filterPluginTagsRef.current,
-      sortBy: sortRef.current.sortBy,
-      sortOrder: sortRef.current.sortOrder,
-      exclude,
-      type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      page: pageRef.current,
-    })
-  }, [exclude, queryPlugins])
+  const handlePageChange = useCallback(() => {
+    if (pluginsTotal && plugins && pluginsTotal > plugins.length && (!!searchPluginTextRef.current || !!filterPluginTagsRef.current.length)) {
+      setPage(pageRef.current + 1)
+      pageRef.current++
 
-  // useMarketplaceContainerScroll(handlePageChange)
+      handleQueryPlugins()
+    }
+  }, [handleQueryPlugins, plugins, pluginsTotal])
+
+  useMarketplaceContainerScroll(handlePageChange, scrollContainerId)
 
   return (
     <MarketplaceContext.Provider
@@ -328,7 +275,7 @@ export const MarketplaceContextProvider = ({
         resetPlugins,
         sort,
         handleSortChange,
-        handleQueryPluginsWhenNoCollection,
+        handleQueryPlugins,
         marketplaceCollectionsFromClient,
         setMarketplaceCollectionsFromClient,
         marketplaceCollectionPluginsMapFromClient,
diff --git a/web/app/components/plugins/marketplace/hooks.ts b/web/app/components/plugins/marketplace/hooks.ts
index 1d68d9ec70..6ec98963f0 100644
--- a/web/app/components/plugins/marketplace/hooks.ts
+++ b/web/app/components/plugins/marketplace/hooks.ts
@@ -59,27 +59,46 @@ export const useMarketplaceCollectionsAndPlugins = () => {
 export const useMarketplacePlugins = () => {
   const {
     data,
-    mutate,
+    mutateAsync,
     reset,
     isPending,
   } = useMutationPluginsFromMarketplace()
 
+  const [prevPlugins, setPrevPlugins] = useState<Plugin[] | undefined>()
+  const resetPlugins = useCallback(() => {
+    reset()
+    setPrevPlugins(undefined)
+  }, [reset])
+  const handleUpdatePlugins = useCallback((pluginsSearchParams: PluginsSearchParams) => {
+    mutateAsync(pluginsSearchParams).then((res) => {
+      const currentPage = pluginsSearchParams.page || 1
+      const resPlugins = res.data.plugins
+      if (currentPage > 1) {
+        setPrevPlugins(prevPlugins => [...(prevPlugins || []), ...resPlugins.map((plugin) => {
+          return getFormattedPlugin(plugin)
+        })])
+      }
+      else {
+        setPrevPlugins(resPlugins.map((plugin) => {
+          return getFormattedPlugin(plugin)
+        }))
+      }
+    })
+  }, [mutateAsync])
   const queryPlugins = useCallback((pluginsSearchParams: PluginsSearchParams) => {
-    mutate(pluginsSearchParams)
-  }, [mutate])
+    handleUpdatePlugins(pluginsSearchParams)
+  }, [handleUpdatePlugins])
 
   const { run: queryPluginsWithDebounced } = useDebounceFn((pluginsSearchParams: PluginsSearchParams) => {
-    mutate(pluginsSearchParams)
+    handleUpdatePlugins(pluginsSearchParams)
   }, {
     wait: 500,
   })
 
   return {
-    plugins: data?.data?.plugins.map((plugin) => {
-      return getFormattedPlugin(plugin)
-    }),
+    plugins: prevPlugins,
     total: data?.data?.total,
-    resetPlugins: reset,
+    resetPlugins,
     queryPlugins,
     queryPluginsWithDebounced,
     isLoading: isPending,
@@ -97,8 +116,11 @@ export const useMixedTranslation = (localeFromOuter?: string) => {
   }
 }
 
-export const useMarketplaceContainerScroll = (callback: () => void) => {
-  const container = document.getElementById('marketplace-container')
+export const useMarketplaceContainerScroll = (
+  callback: () => void,
+  scrollContainerId = 'marketplace-container',
+) => {
+  const container = document.getElementById(scrollContainerId)
 
   const handleScroll = useCallback((e: Event) => {
     const target = e.target as HTMLDivElement
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 8549206e06..4402866c96 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -14,6 +14,8 @@ type MarketplaceProps = {
   shouldExclude?: boolean
   searchParams?: SearchParams
   pluginTypeSwitchClassName?: string
+  intersectionContainerId?: string
+  scrollContainerId?: string
 }
 const Marketplace = async ({
   locale,
@@ -21,6 +23,8 @@ const Marketplace = async ({
   shouldExclude,
   searchParams,
   pluginTypeSwitchClassName,
+  intersectionContainerId,
+  scrollContainerId,
 }: MarketplaceProps) => {
   let marketplaceCollections: any = []
   let marketplaceCollectionPluginsMap = {}
@@ -32,9 +36,13 @@ const Marketplace = async ({
 
   return (
     <TanstackQueryIniter>
-      <MarketplaceContextProvider searchParams={searchParams} shouldExclude={shouldExclude}>
+      <MarketplaceContextProvider
+        searchParams={searchParams}
+        shouldExclude={shouldExclude}
+        scrollContainerId={scrollContainerId}
+      >
         <Description locale={locale} />
-        <IntersectionLine />
+        <IntersectionLine intersectionContainerId={intersectionContainerId} />
         <SearchBoxWrapper locale={locale} />
         <PluginTypeSwitch
           locale={locale}
diff --git a/web/app/components/plugins/marketplace/intersection-line/hooks.ts b/web/app/components/plugins/marketplace/intersection-line/hooks.ts
index 79ee764edf..fe30b707cb 100644
--- a/web/app/components/plugins/marketplace/intersection-line/hooks.ts
+++ b/web/app/components/plugins/marketplace/intersection-line/hooks.ts
@@ -3,12 +3,13 @@ import { useMarketplaceContext } from '@/app/components/plugins/marketplace/cont
 
 export const useScrollIntersection = (
   anchorRef: React.RefObject<HTMLDivElement>,
+  intersectionContainerId = 'marketplace-container',
 ) => {
   const intersected = useMarketplaceContext(v => v.intersected)
   const setIntersected = useMarketplaceContext(v => v.setIntersected)
 
   useEffect(() => {
-    const container = document.getElementById('marketplace-container')
+    const container = document.getElementById(intersectionContainerId)
     let observer: IntersectionObserver | undefined
     if (container && anchorRef.current) {
       observer = new IntersectionObserver((entries) => {
@@ -25,5 +26,5 @@ export const useScrollIntersection = (
       observer.observe(anchorRef.current)
     }
     return () => observer?.disconnect()
-  }, [anchorRef, intersected, setIntersected])
+  }, [anchorRef, intersected, setIntersected, intersectionContainerId])
 }
diff --git a/web/app/components/plugins/marketplace/intersection-line/index.tsx b/web/app/components/plugins/marketplace/intersection-line/index.tsx
index e521d43f8c..6f8e4b02ab 100644
--- a/web/app/components/plugins/marketplace/intersection-line/index.tsx
+++ b/web/app/components/plugins/marketplace/intersection-line/index.tsx
@@ -3,10 +3,15 @@
 import { useRef } from 'react'
 import { useScrollIntersection } from './hooks'
 
-const IntersectionLine = () => {
+type IntersectionLineProps = {
+  intersectionContainerId?: string
+}
+const IntersectionLine = ({
+  intersectionContainerId,
+}: IntersectionLineProps) => {
   const ref = useRef<HTMLDivElement>(null)
 
-  useScrollIntersection(ref)
+  useScrollIntersection(ref, intersectionContainerId)
 
   return (
     <div ref={ref} className='mb-4 h-[1px] bg-transparent'></div>
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index 173b9c615d..8ae23c5258 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -26,18 +26,19 @@ const ListWrapper = ({
   const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient)
   const isLoading = useMarketplaceContext(v => v.isLoading)
   const isSuccessCollections = useMarketplaceContext(v => v.isSuccessCollections)
-  const handleQueryPluginsWhenNoCollection = useMarketplaceContext(v => v.handleQueryPluginsWhenNoCollection)
+  const handleQueryPlugins = useMarketplaceContext(v => v.handleQueryPlugins)
+  const page = useMarketplaceContext(v => v.page)
 
   useEffect(() => {
     if (!marketplaceCollectionsFromClient?.length && isSuccessCollections)
-      handleQueryPluginsWhenNoCollection()
-  }, [handleQueryPluginsWhenNoCollection, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections])
+      handleQueryPlugins()
+  }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections])
 
   return (
     <div className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'>
       {
         plugins && (
-          <div className='flex items-center mb-4 pt-3'>
+          <div className='top-5 flex items-center mb-4 pt-3'>
             <div className='title-xl-semi-bold text-text-primary'>{t('plugin.marketplace.pluginsResult', { num: plugins.length })}</div>
             <div className='mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
             <SortDropdown />
@@ -45,14 +46,14 @@ const ListWrapper = ({
         )
       }
       {
-        isLoading && (
+        isLoading && page === 1 && (
           <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
             <Loading />
           </div>
         )
       }
       {
-        !isLoading && (
+        (!isLoading || page > 1) && (
           <List
             marketplaceCollections={marketplaceCollectionsFromClient || marketplaceCollections}
             marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMapFromClient || marketplaceCollectionPluginsMap}
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index a750ebe21e..e815223d59 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -38,8 +38,8 @@ import { ToastContext } from '@/app/components/base/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
 import PluginDependency from '@/app/components/workflow/plugin-dependency'
+import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -229,7 +229,7 @@ const UpdateDSLModal = ({
           </div>
         </div>
         <div className='flex relative p-2 mb-2 gap-0.5 grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs overflow-hidden'>
-          <div className='absolute top-0 left-0 w-full h-full opacity-40 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]' />
+          <div className='absolute top-0 left-0 w-full h-full opacity-40 bg-toast-warning-bg' />
           <div className='flex p-1 justify-center items-start'>
             <RiAlertFill className='w-4 h-4 shrink-0 text-text-warning-secondary' />
           </div>
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index dbc93acaf4..2cbe36fcf1 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -298,11 +298,12 @@ export const useMutationPluginsFromMarketplace = () => {
         exclude,
         type,
         page = 1,
+        pageSize = 20,
       } = pluginsSearchParams
       return postMarketplace<{ data: PluginsFromMarketplaceResponse }>('/plugins/search/basic', {
         body: {
           page,
-          page_size: 100,
+          page_size: pageSize,
           query,
           sort_by: sortBy,
           sort_order: sortOrder,
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index 41f36bc17a..2c6ae1fc33 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -89,6 +89,10 @@ const config = {
         'workflow-process-bg': 'var(--color-workflow-process-bg)',
         'marketplace-divider-bg': 'var(--color-marketplace-divider-bg)',
         'marketplace-plugin-empty': 'var(--color-marketplace-plugin-empty)',
+        'toast-success-bg': 'var(--color-toast-success-bg)',
+        'toast-warning-bg': 'var(--color-toast-warning-bg)',
+        'toast-error-bg': 'var(--color-toast-error-bg)',
+        'toast-info-bg': 'var(--color-toast-info-bg)',
       },
       animation: {
         'spin-slow': 'spin 2s linear infinite',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 4e48cdbb16..96b18914bb 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -1,7 +1,47 @@
 html[data-theme="dark"] {
-  --color-chatbot-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.90) 0%, rgba(29, 29, 32, 0.90) 90.48%);
-  --color-chat-bubble-bg: linear-gradient(180deg, rgba(200, 206, 218, 0.08) 0%, rgba(200, 206, 218, 0.02) 100%);
-  --color-workflow-process-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
-  --color-marketplace-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%);
-  --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #222225 100%);
-}
\ No newline at end of file
+  --color-chatbot-bg: linear-gradient(
+    180deg,
+    rgba(34, 34, 37, 0.9) 0%,
+    rgba(29, 29, 32, 0.9) 90.48%
+  );
+  --color-chat-bubble-bg: linear-gradient(
+    180deg,
+    rgba(200, 206, 218, 0.08) 0%,
+    rgba(200, 206, 218, 0.02) 100%
+  );
+  --color-workflow-process-bg: linear-gradient(
+    90deg,
+    rgba(24, 24, 27, 0.25) 0%,
+    rgba(24, 24, 27, 0.04) 100%
+  );
+  --color-marketplace-divider-bg: linear-gradient(
+    90deg,
+    rgba(200, 206, 218, 0.14) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-marketplace-plugin-empty: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0) 0%,
+    #222225 100%
+  );
+  --color-toast-success-bg: linear-gradient(
+    92deg,
+    rgba(23, 178, 106, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-toast-warning-bg: linear-gradient(
+    92deg,
+    rgba(247, 144, 9, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-toast-error-bg: linear-gradient(
+    92deg,
+    rgba(240, 68, 56, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+  --color-toast-info-bg: linear-gradient(
+    92deg,
+    rgba(11, 165, 236, 0.3) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
+}
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index e99ba4dd0a..3a0a09303c 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -1,7 +1,47 @@
 html[data-theme="light"] {
-  --color-chatbot-bg: linear-gradient(180deg, rgba(249, 250, 251, 0.90) 0%, rgba(242, 244, 247, 0.90) 90.48%);
-  --color-chat-bubble-bg: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.60) 100%);
-  --color-workflow-process-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
-  --color-marketplace-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
-  --color-marketplace-plugin-empty: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
-}
\ No newline at end of file
+  --color-chatbot-bg: linear-gradient(
+    180deg,
+    rgba(249, 250, 251, 0.9) 0%,
+    rgba(242, 244, 247, 0.9) 90.48%
+  );
+  --color-chat-bubble-bg: linear-gradient(
+    180deg,
+    #fff 0%,
+    rgba(255, 255, 255, 0.6) 100%
+  );
+  --color-workflow-process-bg: linear-gradient(
+    90deg,
+    rgba(200, 206, 218, 0.2) 0%,
+    rgba(200, 206, 218, 0.04) 100%
+  );
+  --color-marketplace-divider-bg: linear-gradient(
+    90deg,
+    rgba(16, 24, 40, 0.08) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-marketplace-plugin-empty: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0) 0%,
+    #fcfcfd 100%
+  );
+  --color-toast-success-bg: linear-gradient(
+    92deg,
+    rgba(23, 178, 106, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-toast-warning-bg: linear-gradient(
+    92deg,
+    rgba(247, 144, 9, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-toast-error-bg: linear-gradient(
+    92deg,
+    rgba(240, 68, 56, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+  --color-toast-info-bg: linear-gradient(
+    92deg,
+    rgba(11, 165, 236, 0.25) 0%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}