diff --git a/web/app/components/header/account-setting/data-source-page-new/card.tsx b/web/app/components/header/account-setting/data-source-page-new/card.tsx
index 1dd2058796..6593bd1a59 100644
--- a/web/app/components/header/account-setting/data-source-page-new/card.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/card.tsx
@@ -1,20 +1,39 @@
 import { memo } from 'react'
 import Item from './item'
 import Configure from './configure'
+import type { DataSourceAuth } from './types'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+
+type CardProps = {
+  item: DataSourceAuth
+}
+const Card = ({
+  item,
+}: CardProps) => {
+  const renderI18nObject = useRenderI18nObject()
+  const {
+    icon,
+    label,
+    author,
+    provider,
+    credentials_list,
+  } = item
 
-const Card = () => {
   return (
     <div className='rounded-xl bg-background-section-burn'>
       <div className='flex items-center p-3 pb-2'>
-        <div className='mr-3 flex h-10 w-10 shrink-0 items-center justify-center'></div>
+        <img
+          src={icon}
+          className='mr-3 flex h-10 w-10 shrink-0 items-center justify-center'
+        />
         <div className='grow'>
           <div className='system-md-semibold text-text-primary'>
-            Notion Data Source
+            {renderI18nObject(label)}
           </div>
           <div className='system-xs-regular flex h-4 items-center text-text-tertiary'>
-            langgenius
+            {author}
             <div className='text-text-quaternary'>/</div>
-            notion-data-source
+            {provider}
           </div>
         </div>
         <Configure />
@@ -23,16 +42,24 @@ const Card = () => {
         Connected workspace
         <div className='ml-3 h-[1px] grow bg-divider-subtle'></div>
       </div>
-      <div className='space-y-1 p-3 pt-2'>
-        <Item />
-        <Item />
-        <Item />
-      </div>
-      <div className='p-3 pt-1'>
-        <div className='system-xs-regular flex h-10 items-center justify-center rounded-[10px] bg-background-section text-text-tertiary'>
-          Please configure authentication
-        </div>
-      </div>
+      {
+        !!credentials_list.length && (
+          <div className='space-y-1 p-3 pt-2'>
+            <Item />
+            <Item />
+            <Item />
+          </div>
+        )
+      }
+      {
+        !credentials_list.length && (
+          <div className='p-3 pt-1'>
+            <div className='system-xs-regular flex h-10 items-center justify-center rounded-[10px] bg-background-section text-text-tertiary'>
+              Please configure authentication
+            </div>
+          </div>
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/header/account-setting/data-source-page-new/index.tsx b/web/app/components/header/account-setting/data-source-page-new/index.tsx
index 6e1c140e93..b8c32176a6 100644
--- a/web/app/components/header/account-setting/data-source-page-new/index.tsx
+++ b/web/app/components/header/account-setting/data-source-page-new/index.tsx
@@ -2,14 +2,23 @@ import { memo } from 'react'
 import Card from './card'
 import InstallFromMarketplace from './install-from-marketplace'
 import { useGlobalPublicStore } from '@/context/global-public-context'
+import { useGetDataSourceListAuth } from '@/service/use-datasource'
 
 const DataSourcePage = () => {
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
+  const { data } = useGetDataSourceListAuth()
+
   return (
     <div>
       <div className='space-y-2'>
-        <Card />
-        <Card />
+        {
+          data?.result.map(item => (
+            <Card
+              key={item.plugin_unique_identifier}
+              item={item}
+            />
+          ))
+        }
       </div>
       {
         enable_marketplace && (
diff --git a/web/app/components/header/account-setting/data-source-page-new/types.ts b/web/app/components/header/account-setting/data-source-page-new/types.ts
new file mode 100644
index 0000000000..7348c763e8
--- /dev/null
+++ b/web/app/components/header/account-setting/data-source-page-new/types.ts
@@ -0,0 +1,22 @@
+export type DataSourceCredential = {
+  credential: Record<string, any>
+  type: string
+  name: string
+  id: string
+}
+export type DataSourceAuth = {
+  author: string
+  provider: string
+  plugin_id: string
+  plugin_unique_identifier: string
+  icon: any
+  name: string
+  label: any
+  description: any
+  credential_schema?: any[]
+  oauth_schema?: {
+    client_schema?: any[]
+    credentials_schema?: any[]
+  }
+  credentials_list: DataSourceCredential[]
+}
diff --git a/web/service/use-datasource.ts b/web/service/use-datasource.ts
new file mode 100644
index 0000000000..94e2988487
--- /dev/null
+++ b/web/service/use-datasource.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query'
+import { get } from './base'
+import type { DataSourceAuth } from '@/app/components/header/account-setting/data-source-page-new/types'
+
+const NAME_SPACE = 'data-source-auth'
+
+export const useGetDataSourceListAuth = () => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'list'],
+    queryFn: () => get<{ result: DataSourceAuth[] }>('/auth/plugin/datasource/list'),
+    retry: 0,
+  })
+}