diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index e85411c1ed..d8843ce97c 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,18 +1,35 @@
+import type { Plugin } from '../types'
 import { MarketplaceContextProvider } from './context'
 import Description from './description'
 import IntersectionLine from './intersection-line'
 import SearchBox from './search-box'
 import PluginTypeSwitch from './plugin-type-switch'
-import List from './list'
+import ListWrapper from './list/list-wrapper'
+import type { MarketplaceCollection } from './types'
+
+const Marketplace = async () => {
+  const marketplaceCollectionsData = await globalThis.fetch('https://marketplace.dify.dev/api/v1/collections')
+  const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json()
+  const marketplaceCollections = marketplaceCollectionsDataJson.data.collections
+  const marketplaceCollectionPluginsMap = {} as Record<string, Plugin[]>
+  await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
+    const marketplaceCollectionPluginsData = await globalThis.fetch(`https://marketplace.dify.dev/api/v1/collections/${collection.name}/plugins`)
+    const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
+    const plugins = marketplaceCollectionPluginsDataJson.data.plugins
+
+    marketplaceCollectionPluginsMap[collection.name] = plugins
+  }))
 
-const Marketplace = () => {
   return (
     <MarketplaceContextProvider>
       <Description />
       <IntersectionLine />
       <SearchBox />
       <PluginTypeSwitch />
-      <List />
+      <ListWrapper
+        marketplaceCollections={marketplaceCollections}
+        marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+      />
     </MarketplaceContextProvider>
   )
 }
diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx
index a805522b43..604211fb5b 100644
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@@ -1,197 +1,50 @@
 'use client'
+import type { Plugin } from '../../types'
+import type { MarketplaceCollection } from '../types'
+import ListWithCollection from './list-with-collection'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
-import { toolNotion } from '@/app/components/plugins/card/card-mock'
 
-const List = () => {
+interface ListProps {
+  marketplaceCollections: MarketplaceCollection[]
+  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+  plugins?: Plugin[]
+}
+const List = ({
+  marketplaceCollections,
+  marketplaceCollectionPluginsMap,
+  plugins,
+}: ListProps) => {
   return (
     <div className='px-12 py-2 bg-background-default-subtle'>
-      <div className='py-3'>
-        <div className='title-xl-semi-bold text-text-primary'>Featured</div>
-        <div className='system-xs-regular text-text-tertiary'>Our top picks to get you started</div>
-        <div className='grid grid-cols-4 gap-3 mt-2'>
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
+      {
+        !plugins && (
+          <ListWithCollection
+            marketplaceCollections={marketplaceCollections}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
           />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
+        )
+      }
+      {
+        plugins && (
+          <div className='grid grid-cols-4 gap-3 mt-2'>
+            {
+              plugins.map(plugin => (
+                <Card
+                  key={plugin.name}
+                  payload={plugin}
+                  footer={
+                    <CardMoreInfo
+                      downloadCount={plugin.install_count}
+                      tags={['Search', 'Productivity']}
+                    />
+                  }
+                />
+              ))
             }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-        </div>
-      </div>
-      <div className='py-3'>
-        <div className='title-xl-semi-bold text-text-primary'>Popular</div>
-        <div className='system-xs-regular text-text-tertiary'>Explore the library and discover the incredible work of our community</div>
-        <div className='grid grid-cols-4 gap-3 mt-2'>
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-          <Card
-            payload={toolNotion as any}
-            footer={
-              <CardMoreInfo downloadCount={1234} tags={['Search', 'Productivity']} />
-            }
-          />
-        </div>
-      </div>
+          </div>
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
new file mode 100644
index 0000000000..9009b7a799
--- /dev/null
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -0,0 +1,48 @@
+'use client'
+import type { MarketplaceCollection } from '../types'
+import type { Plugin } from '@/app/components/plugins/types'
+import Card from '@/app/components/plugins/card'
+import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+
+interface ListWithCollectionProps {
+  marketplaceCollections: MarketplaceCollection[]
+  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+}
+const ListWithCollection = ({
+  marketplaceCollections,
+  marketplaceCollectionPluginsMap,
+}: ListWithCollectionProps) => {
+  return (
+    <>
+      {
+        marketplaceCollections.map(collection => (
+          <div
+            key={collection.name}
+            className='py-3'
+          >
+            <div className='title-xl-semi-bold text-text-primary'>{collection.name}</div>
+            <div className='system-xs-regular text-text-tertiary'>{collection.description}</div>
+            <div className='grid grid-cols-4 gap-3 mt-2'>
+              {
+                marketplaceCollectionPluginsMap[collection.name].map(plugin => (
+                  <Card
+                    key={plugin.name}
+                    payload={plugin}
+                    footer={
+                      <CardMoreInfo
+                        downloadCount={plugin.install_count}
+                        tags={['Search', 'Productivity']}
+                      />
+                    }
+                  />
+                ))
+              }
+            </div>
+          </div>
+        ))
+      }
+    </>
+  )
+}
+
+export default ListWithCollection
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
new file mode 100644
index 0000000000..0de2fa2c06
--- /dev/null
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -0,0 +1,22 @@
+'use client'
+import type { Plugin } from '../../types'
+import type { MarketplaceCollection } from '../types'
+import List from './index'
+
+interface ListWrapperProps {
+  marketplaceCollections: MarketplaceCollection[]
+  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+}
+const ListWrapper = ({
+  marketplaceCollections,
+  marketplaceCollectionPluginsMap,
+}: ListWrapperProps) => {
+  return (
+    <List
+      marketplaceCollections={marketplaceCollections}
+      marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+    />
+  )
+}
+
+export default ListWrapper