diff --git a/web/app/components/tools/marketplace.tsx b/web/app/components/tools/marketplace.tsx
index d38b165615..56f85d447d 100644
--- a/web/app/components/tools/marketplace.tsx
+++ b/web/app/components/tools/marketplace.tsx
@@ -13,12 +13,12 @@ const Marketplace = ({
   const locale = useGetLanguage()
 
   return (
-    <div className='shrink-0 sticky -bottom-[442px] h-[530px] overflow-y-auto px-12 py-2 bg-background-default-subtle'>
+    <div className='shrink-0 sticky -bottom-[442px] h-[530px] overflow-y-auto px-12 py-2 pt-0 bg-background-default-subtle'>
       <RiArrowUpDoubleLine
         className='absolute top-2 left-1/2 -translate-x-1/2 w-4 h-4 text-text-quaternary cursor-pointer'
         onClick={() => onMarketplaceScroll()}
       />
-      <div className='pt-4 pb-3'>
+      <div className='sticky top-0 pt-5 pb-3 bg-background-default-subtle z-10'>
         <div className='title-2xl-semi-bold bg-gradient-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text text-transparent'>More from Marketplace</div>
         <div className='flex items-center text-center body-md-regular text-text-tertiary'>
           Discover
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 8b44ecd296..fa9074f3d1 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/web/app/components/tools/provider-list.tsx
@@ -100,20 +100,28 @@ const ProviderList = () => {
         )}>
           {activeTab === 'api' && <CustomCreateCard onRefreshData={getProviderList} />}
           {filteredCollectionList.map(collection => (
-            <Card
+            <div
               key={collection.id}
-              locale={language}
-              payload={{
-                ...collection,
-                brief: collection.description,
-              } as any}
-              footer={
-                <CardMoreInfo
-                  downloadCount={0}
-                  tags={collection.labels}
-                />
-              }
-            />
+              onClick={() => setCurrentProvider(collection)}
+            >
+              <Card
+                className={cn(
+                  'border-[1.5px] border-transparent',
+                  currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
+                )}
+                locale={language}
+                payload={{
+                  ...collection,
+                  brief: collection.description,
+                } as any}
+                footer={
+                  <CardMoreInfo
+                    downloadCount={0}
+                    tags={collection.labels}
+                  />
+                }
+              />
+            </div>
           ))}
           {!filteredCollectionList.length && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><Empty /></div>}
         </div>