diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 7dad4f541d..f7eaa20917 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -19,20 +19,21 @@ export type AppIconProps = {
   imageUrl?: string | null
   className?: string
   innerIcon?: React.ReactNode
+  showEditIcon?: boolean
   onClick?: () => void
 }
 const appIconVariants = cva(
-  'flex items-center justify-center relative text-lg rounded-2xl grow-0 shrink-0 overflow-hidden leading-none border-[0.5px] border-divider-regular',
+  'flex items-center justify-center relative grow-0 shrink-0 overflow-hidden leading-none border-[0.5px] border-divider-regular',
   {
     variants: {
       size: {
-        xs: 'w-4 h-4 text-xs',
-        tiny: 'w-6 h-6 text-base',
-        small: 'w-8 h-8 text-xl',
-        medium: 'w-9 h-9 text-[22px]',
-        large: 'w-10 h-10 text-[24px]',
-        xl: 'w-12 h-12 text-[28px]',
-        xxl: 'w-14 h-14 text-[32px]',
+        xs: 'w-4 h-4 text-xs rounded-[4px]',
+        tiny: 'w-6 h-6 text-base rounded-md',
+        small: 'w-8 h-8 text-xl rounded-lg',
+        medium: 'w-9 h-9 text-[22px] rounded-[10px]',
+        large: 'w-10 h-10 text-[24px] rounded-[10px]',
+        xl: 'w-12 h-12 text-[28px] rounded-xl',
+        xxl: 'w-14 h-14 text-[32px] rounded-2xl',
       },
       rounded: {
         true: 'rounded-full',
@@ -43,6 +44,46 @@ const appIconVariants = cva(
       rounded: false,
     },
   })
+const EditIconWrapperVariants = cva(
+  'absolute left-0 top-0 z-10 flex items-center justify-center bg-background-overlay-alt',
+  {
+    variants: {
+      size: {
+        xs: 'w-4 h-4 rounded-[4px]',
+        tiny: 'w-6 h-6 rounded-md',
+        small: 'w-8 h-8 rounded-lg',
+        medium: 'w-9 h-9 rounded-[10px]',
+        large: 'w-10 h-10 rounded-[10px]',
+        xl: 'w-12 h-12 rounded-xl',
+        xxl: 'w-14 h-14 rounded-2xl',
+      },
+      rounded: {
+        true: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+      rounded: false,
+    },
+  })
+const EditIconVariants = cva(
+  'text-text-primary-on-surface',
+  {
+    variants: {
+      size: {
+        xs: 'size-3',
+        tiny: 'size-3.5',
+        small: 'size-5',
+        medium: 'size-[22px]',
+        large: 'size-6',
+        xl: 'size-7',
+        xxl: 'size-8',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+    },
+  })
 const AppIcon: FC<AppIconProps> = ({
   size = 'medium',
   rounded = false,
@@ -53,6 +94,7 @@ const AppIcon: FC<AppIconProps> = ({
   className,
   innerIcon,
   onClick,
+  showEditIcon = false,
 }) => {
   const isValidImageIcon = iconType === 'image' && imageUrl
   const Icon = (icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />
@@ -72,9 +114,9 @@ const AppIcon: FC<AppIconProps> = ({
           : (innerIcon || Icon)
       }
       {
-        isHovering && (
-          <div className='absolute left-0 top-0 z-10 flex size-14 items-center justify-center rounded-2xl bg-background-overlay-alt'>
-            <RiEditLine className='size-6 text-text-primary-on-surface' />
+        showEditIcon && isHovering && (
+          <div className={EditIconWrapperVariants({ size, rounded })}>
+            <RiEditLine className={EditIconVariants({ size })} />
           </div>
         )
       }
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx
index 19e173f433..15f1c3d2fd 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx
@@ -113,6 +113,7 @@ const CreateFromScratch = ({
             icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
             background={appIcon.type === 'image' ? undefined : appIcon.background}
             imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
+            showEditIcon
           />
         </div>
         <div className='flex flex-col gap-y-1'>
diff --git a/web/app/components/datasets/create-from-pipeline/index.tsx b/web/app/components/datasets/create-from-pipeline/index.tsx
index 77f4104a2d..b0f5fdf345 100644
--- a/web/app/components/datasets/create-from-pipeline/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/index.tsx
@@ -2,6 +2,7 @@
 import HeaderEffect from './header-effect'
 import Header from './header'
 import CreateOptions from './create-options'
+import List from './list'
 
 const CreateFromPipeline = () => {
   return (
@@ -12,6 +13,7 @@ const CreateFromPipeline = () => {
       <HeaderEffect />
       <Header />
       <CreateOptions />
+      <List />
     </div>
   )
 }
diff --git a/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx b/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
new file mode 100644
index 0000000000..c1c23075d8
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
@@ -0,0 +1,64 @@
+import { ChunkingMode } from '@/models/datasets'
+import TemplateCard from './template-card'
+
+export type Pipeline = {
+  id: string
+  name: string
+  icon_type: 'emoji' | 'image'
+  icon?: string
+  icon_background?: string
+  file_id?: string
+  url?: string
+  description: string
+  doc_form: ChunkingMode
+}
+
+const BuiltInPipelineList = () => {
+  const mockData: Pipeline[] = [{
+    id: '1',
+    name: 'Pipeline 1',
+    description: 'This is a description of Pipeline 1. When use the general chunking mode, the chunks retrieved and recalled are the same. When use the general chunking mode, the chunks retrieved and recalled are the same.',
+    icon_type: 'emoji',
+    icon: '🤖',
+    icon_background: '#F0FDF9',
+    doc_form: ChunkingMode.text,
+  }, {
+    id: '2',
+    name: 'Pipeline 2',
+    description: 'This is a description of Pipeline 2. When use the general chunking mode, the chunks retrieved and recalled are the same.',
+    icon_type: 'emoji',
+    icon: '🏖️',
+    icon_background: '#FFF4ED',
+    doc_form: ChunkingMode.parentChild,
+  }, {
+    id: '3',
+    name: 'Pipeline 3',
+    description: 'This is a description of Pipeline 3',
+    icon_type: 'emoji',
+    icon: '🚀',
+    icon_background: '#FEFBE8',
+    doc_form: ChunkingMode.qa,
+  }, {
+    id: '4',
+    name: 'Pipeline 4',
+    description: 'This is a description of Pipeline 4',
+    icon_type: 'emoji',
+    icon: '🍯',
+    icon_background: '#F5F3FF',
+    doc_form: ChunkingMode.graph,
+  }]
+
+  return (
+    <div className='grid grow grid-cols-1 gap-3 overflow-y-auto px-16 pt-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
+      {mockData.map((pipeline, index) => (
+        <TemplateCard
+          key={index}
+          pipeline={pipeline}
+          showMoreOperations={false}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default BuiltInPipelineList
diff --git a/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx b/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
new file mode 100644
index 0000000000..2d8fe1bd60
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
@@ -0,0 +1,52 @@
+import { ChunkingMode } from '@/models/datasets'
+import type { Pipeline } from './built-in-pipeline-list'
+import TemplateCard from './template-card'
+
+const CustomizedList = () => {
+  const mockData: Pipeline[] = [{
+    id: '1',
+    name: 'Pipeline 1',
+    description: 'This is a description of Pipeline 1. When use the general chunking mode, the chunks retrieved and recalled are the same. When use the general chunking mode, the chunks retrieved and recalled are the same.',
+    icon_type: 'emoji',
+    icon: '🤖',
+    icon_background: '#F0FDF9',
+    doc_form: ChunkingMode.text,
+  }, {
+    id: '2',
+    name: 'Pipeline 2',
+    description: 'This is a description of Pipeline 2. When use the general chunking mode, the chunks retrieved and recalled are the same.',
+    icon_type: 'emoji',
+    icon: '🏖️',
+    icon_background: '#FFF4ED',
+    doc_form: ChunkingMode.parentChild,
+  }, {
+    id: '3',
+    name: 'Pipeline 3',
+    description: 'This is a description of Pipeline 3',
+    icon_type: 'emoji',
+    icon: '🚀',
+    icon_background: '#FEFBE8',
+    doc_form: ChunkingMode.qa,
+  }, {
+    id: '4',
+    name: 'Pipeline 4',
+    description: 'This is a description of Pipeline 4',
+    icon_type: 'emoji',
+    icon: '🍯',
+    icon_background: '#F5F3FF',
+    doc_form: ChunkingMode.graph,
+  }]
+
+  return (
+    <div className='grid grow grid-cols-1 gap-3 overflow-y-auto px-16 pt-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
+      {mockData.map((pipeline, index) => (
+        <TemplateCard
+          key={index}
+          pipeline={pipeline}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default CustomizedList
diff --git a/web/app/components/datasets/create-from-pipeline/list/index.tsx b/web/app/components/datasets/create-from-pipeline/list/index.tsx
new file mode 100644
index 0000000000..a0f2ef0286
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/index.tsx
@@ -0,0 +1,35 @@
+import { useCallback, useState } from 'react'
+import Tab from './tab'
+import BuiltInPipelineList from './built-in-pipeline-list'
+import CustomizedList from './customized-list'
+
+const OPTIONS = [
+  { value: 'built-in', label: 'Built-in Pipeline' },
+  { value: 'customized', label: 'Customized' },
+]
+
+const List = () => {
+  const [activeTab, setActiveTab] = useState('built-in')
+
+  const handleTabChange = useCallback((tab: string) => {
+    setActiveTab(tab)
+  }, [])
+
+  return (
+    <div className='flex grow flex-col'>
+      <Tab
+        activeTab={activeTab}
+        handleTabChange={handleTabChange}
+        options={OPTIONS}
+      />
+      {
+        activeTab === 'built-in' && <BuiltInPipelineList />
+      }
+      {
+        activeTab === 'customized' && <CustomizedList />
+      }
+    </div>
+  )
+}
+
+export default List
diff --git a/web/app/components/datasets/create-from-pipeline/list/tab/index.tsx b/web/app/components/datasets/create-from-pipeline/list/tab/index.tsx
new file mode 100644
index 0000000000..5b638eb4db
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/tab/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import Item from './item'
+
+type TabProps = {
+  activeTab: string
+  handleTabChange: (tab: string) => void
+  options: { value: string; label: string; }[]
+}
+
+const Tab = ({
+  activeTab,
+  handleTabChange,
+  options,
+}: TabProps) => {
+  return (
+    <div className='px-16 pt-2'>
+      <div className='relative flex h-10 items-center gap-x-6'>
+        {options.map((option, index) => (
+          <Item
+            key={index}
+            option={option}
+            isSelected={activeTab === option.value}
+            onClick={handleTabChange}
+          />
+        ))}
+        <div className='absolute bottom-0 left-0 h-px w-full bg-divider-subtle' />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Tab)
diff --git a/web/app/components/datasets/create-from-pipeline/list/tab/item.tsx b/web/app/components/datasets/create-from-pipeline/list/tab/item.tsx
new file mode 100644
index 0000000000..6922d5df85
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/tab/item.tsx
@@ -0,0 +1,29 @@
+import cn from '@/utils/classnames'
+import React from 'react'
+
+type ItemProps = {
+  isSelected: boolean
+  option: { value: string; label: string }
+  onClick: (value: string) => void
+}
+
+const Item = ({
+  isSelected,
+  option,
+  onClick,
+}: ItemProps) => {
+  return (
+    <div
+      className={cn(
+        'system-sm-semibold-uppercase relative flex h-full cursor-pointer items-center',
+        isSelected ? 'text-text-primary' : 'text-text-tertiary',
+      )}
+      onClick={onClick.bind(null, option.value)}
+    >
+      <span>{option.label}</span>
+      {isSelected && <div className='absolute bottom-0 left-0 h-0.5 w-full bg-util-colors-blue-brand-blue-brand-600' />}
+    </div>
+  )
+}
+
+export default React.memo(Item)
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
new file mode 100644
index 0000000000..269f62a25b
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
@@ -0,0 +1,147 @@
+import AppIcon from '@/app/components/base/app-icon'
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import AppIconPicker from '@/app/components/base/app-icon-picker'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import type { AppIconType } from '@/types/app'
+import { RiCloseLine } from '@remixicon/react'
+import React, { useCallback, useRef, useState } from 'react'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import Toast from '@/app/components/base/toast'
+import type { Pipeline } from '../built-in-pipeline-list'
+
+type EditPipelineInfoProps = {
+  onClose: () => void
+  onSave: () => void
+  pipeline: Pipeline
+}
+
+const EditPipelineInfo = ({
+  onClose,
+  onSave,
+  pipeline,
+}: EditPipelineInfoProps) => {
+  const { t } = useTranslation()
+  const [name, setName] = useState(pipeline.name)
+  const [appIcon, setAppIcon] = useState<AppIconSelection>(
+    pipeline.icon_type === 'image'
+      ? { type: 'image' as const, url: pipeline.url || '', fileId: pipeline.file_id || '' }
+      : { type: 'emoji' as const, icon: pipeline.icon || '', background: pipeline.icon_background || '' },
+  )
+  const [description, setDescription] = useState(pipeline.description)
+  const [showAppIconPicker, setShowAppIconPicker] = useState(false)
+  const previousAppIcon = useRef<AppIconSelection>(
+    pipeline.icon_type === 'image'
+      ? { type: 'image' as const, url: pipeline.url || '', fileId: pipeline.file_id || '' }
+      : { type: 'emoji' as const, icon: pipeline.icon || '', background: pipeline.icon_background || '' },
+  )
+
+  const handleAppNameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    setName(value)
+  }, [])
+
+  const handleOpenAppIconPicker = useCallback(() => {
+    setShowAppIconPicker(true)
+    previousAppIcon.current = appIcon
+  }, [appIcon])
+
+  const handleSelectAppIcon = useCallback((icon: AppIconSelection) => {
+    setAppIcon(icon)
+    setShowAppIconPicker(false)
+  }, [])
+
+  const handleCloseAppIconPicker = useCallback(() => {
+    setAppIcon(previousAppIcon.current)
+    setShowAppIconPicker(false)
+  }, [])
+
+  const handleDescriptionChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = event.target.value
+    setDescription(value)
+  }, [])
+
+  const handleSave = useCallback(() => {
+    if (!name) {
+      Toast.notify({
+        type: 'error',
+        message: 'Please enter a name for the Knowledge Base.',
+      })
+      return
+    }
+    onSave()
+    onClose()
+  }, [name, onSave, onClose])
+
+  return (
+    <div className='relative flex flex-col'>
+      {/* Header */}
+      <div className='pb-3 pl-6 pr-14 pt-6'>
+        <span className='title-2xl-semi-bold text-text-primary'>
+          Edit Pipeline Info
+        </span>
+      </div>
+      <button
+        className='absolute right-5 top-5 flex size-8 items-center justify-center'
+        onClick={onClose}
+      >
+        <RiCloseLine className='size-5 text-text-tertiary' />
+      </button>
+      {/* Form */}
+      <div className='flex flex-col gap-y-5 px-6 py-3'>
+        <div className='flex items-end gap-x-3 self-stretch'>
+          <div className='flex grow flex-col gap-y-1 pb-1'>
+            <label className='system-sm-medium flex h-6 items-center text-text-secondary'>Pipeline name & icon</label>
+            <Input
+              onChange={handleAppNameChange}
+              value={name}
+              placeholder='Please enter the name of the Knowledge Base'
+            />
+          </div>
+          <AppIcon
+            size='xxl'
+            onClick={handleOpenAppIconPicker}
+            className='cursor-pointer'
+            iconType={appIcon.type as AppIconType}
+            icon={appIcon.type === 'image' ? appIcon.fileId : appIcon.icon}
+            background={appIcon.type === 'image' ? undefined : appIcon.background}
+            imageUrl={appIcon.type === 'image' ? appIcon.url : undefined}
+            showEditIcon
+          />
+        </div>
+        <div className='flex flex-col gap-y-1'>
+          <label className='system-sm-medium flex h-6 items-center text-text-secondary'>Knowledge description</label>
+          <Textarea
+            onChange={handleDescriptionChange}
+            value={description}
+            placeholder='Describe what is in this Knowledge Base. A detailed description allows AI to access the content of the dataset more accurately. If empty, Dify will use the default hit strategy. (Optional)'
+          />
+        </div>
+      </div>
+      {/* Actions */}
+      <div className='flex items-center justify-end gap-x-2 p-6 pt-5'>
+        <Button
+          variant='secondary'
+          onClick={onClose}
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          onClick={handleSave}
+        >
+          {t('common.operation.save')}
+        </Button>
+      </div>
+      {showAppIconPicker && (
+        <AppIconPicker
+          onSelect={handleSelectAppIcon}
+          onClose={handleCloseAppIconPicker}
+        />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(EditPipelineInfo)
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
new file mode 100644
index 0000000000..bf69c99819
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -0,0 +1,122 @@
+import React, { useCallback, useState } from 'react'
+import type { Pipeline } from '../built-in-pipeline-list'
+import AppIcon from '@/app/components/base/app-icon'
+import { DOC_FORM_ICON, DOC_FORM_TEXT } from '../../../list/dataset-card'
+import { General } from '@/app/components/base/icons/src/public/knowledge'
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+import { RiAddLine, RiArrowRightUpLine, RiMoreFill } from '@remixicon/react'
+import CustomPopover from '@/app/components/base/popover'
+import Operations from './operations'
+import Modal from '@/app/components/base/modal'
+import EditPipelineInfo from './edit-pipeline-info'
+
+type TemplateCardProps = {
+  pipeline: Pipeline
+  showMoreOperations?: boolean
+}
+
+const TemplateCard = ({
+  pipeline,
+  showMoreOperations = true,
+}: TemplateCardProps) => {
+  const { t } = useTranslation()
+  const [showEditModal, setShowEditModal] = useState(false)
+
+  const openEditModal = useCallback(() => {
+    setShowEditModal(true)
+  }, [])
+
+  const closeEditModal = useCallback(() => {
+    setShowEditModal(false)
+  }, [])
+
+  const Icon = DOC_FORM_ICON[pipeline.doc_form] || General
+
+  return (
+    <div className='group relative flex h-[132px] cursor-pointer flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3'>
+      <div className='flex items-center gap-x-3 p-4 pb-2'>
+        <div className='relative shrink-0'>
+          <AppIcon
+            size='large'
+            iconType={pipeline.icon_type}
+            icon={pipeline.icon_type === 'image' ? pipeline.file_id : pipeline.icon}
+            background={pipeline.icon_type === 'image' ? undefined : pipeline.icon_background}
+            imageUrl={pipeline.icon_type === 'image' ? pipeline.url : undefined}
+          />
+          <div className='absolute -bottom-1 -right-1 z-10'>
+            <Icon className='size-4' />
+          </div>
+        </div>
+        <div className='flex grow flex-col gap-y-1 py-px'>
+          <div className='system-md-semibold truncate text-text-secondary' title={pipeline.name}>{pipeline.name}</div>
+          <div className='system-2xs-medium-uppercase text-text-tertiary'>
+            {t(`dataset.chunkingMode.${DOC_FORM_TEXT[pipeline.doc_form]}`)}
+          </div>
+        </div>
+      </div>
+      <p className='system-xs-regular line-clamp-3 grow px-4 py-1 text-text-tertiary' title={pipeline.description}>
+        {pipeline.description}
+      </p>
+      <div className='absolute bottom-0 left-0 z-10 hidden w-full items-center gap-x-1 bg-pipeline-template-card-hover-bg p-4 pt-8 group-hover:flex'>
+        <Button
+          variant='primary'
+          onClick={() => {
+            console.log('Choose', pipeline)
+          }}
+          className='grow gap-x-0.5'
+        >
+          <RiAddLine className='size-4' />
+          <span className='px-0.5'>Choose</span>
+        </Button>
+        <Button
+          variant='secondary'
+          onClick={() => {
+            console.log('details', pipeline)
+          }}
+          className='grow gap-x-0.5'
+        >
+          <RiArrowRightUpLine className='size-4' />
+          <span className='px-0.5'>Details</span>
+        </Button>
+        {
+          showMoreOperations && (
+            <CustomPopover
+              htmlContent={
+                <Operations
+                  openEditModal={openEditModal}
+                  onDelete={() => {
+                    console.log('Delete', pipeline)
+                  }}
+                />
+              }
+              className={'z-20 min-w-[160px]'}
+              popupClassName={'rounded-xl bg-none shadow-none ring-0 min-w-[160px]'}
+              position='br'
+              trigger='click'
+              btnElement={
+                <RiMoreFill className='size-4 text-text-tertiary' />
+              }
+              btnClassName='size-8 cursor-pointer justify-center rounded-lg p-0 shadow-xs shadow-shadow-shadow-3'
+            />
+          )
+        }
+      </div>
+      <Modal
+        isShow={showEditModal}
+        onClose={closeEditModal}
+        className='max-w-[520px] p-0'
+      >
+        <EditPipelineInfo
+          pipeline={pipeline}
+          onClose={closeEditModal}
+          onSave={() => {
+            console.log('Save', pipeline)
+          }}
+        />
+      </Modal>
+    </div>
+  )
+}
+
+export default React.memo(TemplateCard)
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/operations.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/operations.tsx
new file mode 100644
index 0000000000..5e3b5a4bc7
--- /dev/null
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/operations.tsx
@@ -0,0 +1,63 @@
+import Divider from '@/app/components/base/divider'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type OperationsProps = {
+  openEditModal: () => void
+  onDelete: () => void
+}
+
+const Operations = ({
+  openEditModal,
+  onDelete,
+}: OperationsProps) => {
+  const { t } = useTranslation()
+
+  const onClickEdit = async (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    e.preventDefault()
+    openEditModal()
+  }
+
+  const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    e.preventDefault()
+    onDelete()
+  }
+
+  return (
+    <div className='relative flex w-full flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5'>
+      <div className='flex flex-col p-1'>
+        <div
+          className='flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
+          onClick={onClickEdit}
+        >
+          <span className='system-md-regular px-1 text-text-secondary'>
+            Edit Info
+          </span>
+        </div>
+        <div
+          className='flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
+          onClick={() => { console.log('Export DSL') }}
+        >
+          <span className='system-md-regular px-1 text-text-secondary'>
+            Export DSL
+          </span>
+        </div>
+      </div>
+      <Divider type='horizontal' className='my-0 bg-divider-subtle' />
+      <div className='flex flex-col p-1'>
+        <div
+          className='group flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1.5 hover:bg-state-destructive-hover'
+          onClick={onClickDelete}
+        >
+          <span className='system-md-regular px-1 text-text-secondary group-hover:text-text-destructive'>
+            {t('common.operation.delete')}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Operations)
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index 91177c470d..7975ae22ee 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -24,14 +24,14 @@ import Operations from './operations'
 
 const EXTERNAL_PROVIDER = 'external'
 
-const DOC_FORM_ICON: Record<ChunkingMode, React.ComponentType<{ className: string }>> = {
+export const DOC_FORM_ICON: Record<ChunkingMode, React.ComponentType<{ className: string }>> = {
   [ChunkingMode.text]: General,
   [ChunkingMode.qa]: Qa,
   [ChunkingMode.parentChild]: ParentChild,
   [ChunkingMode.graph]: Graph,
 }
 
-const DOC_FORM_TEXT: Record<ChunkingMode, string> = {
+export const DOC_FORM_TEXT: Record<ChunkingMode, string> = {
   [ChunkingMode.text]: 'general',
   [ChunkingMode.qa]: 'qa',
   [ChunkingMode.parentChild]: 'parentChild',
@@ -216,7 +216,7 @@ const DatasetCard = ({
               }
               btnClassName={open =>
                 cn(
-                  'size-9 cursor-pointer justify-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0 p-0.5 shadow-lg shadow-shadow-shadow-5 ring-[2px] ring-inset ring-components-actionbar-bg hover:border-components-actionbar-border hover:bg-state-base-hover',
+                  'size-9 cursor-pointer justify-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0 shadow-lg shadow-shadow-shadow-5 ring-[2px] ring-inset ring-components-actionbar-bg hover:border-components-actionbar-border hover:bg-state-base-hover',
                   open ? 'border-components-actionbar-border bg-state-base-hover' : '',
                 )
               }
diff --git a/web/tailwind-common-config.ts b/web/tailwind-common-config.ts
index 310bda7722..16279aa1b6 100644
--- a/web/tailwind-common-config.ts
+++ b/web/tailwind-common-config.ts
@@ -123,6 +123,7 @@ const config = {
         'node-data-source-bg': 'var(--color-node-data-source-bg)',
         'tag-selector-mask-bg': 'var(--color-tag-selector-mask-bg)',
         'tag-selector-mask-hover-bg': 'var(--color-tag-selector-mask-hover-bg)',
+        'pipeline-template-card-hover-bg': 'var(--color-pipeline-template-card-hover-bg)',
       },
       animation: {
         'spin-slow': 'spin 2s linear infinite',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 7621902b50..4b877cc841 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -66,4 +66,5 @@ html[data-theme="dark"] {
     --color-node-data-source-bg: linear-gradient(100deg, var(--workflow-block-wrapper-bg-1, #E9EBF0) 0%, var(--workflow-block-wrapper-bg-2, rgba(233, 235, 240, 0.20)) 100%);
     --color-tag-selector-mask-bg: linear-gradient(90deg, rgba(34, 34, 37, 0) 0%, rgba(34, 34, 37, 1) 100%);
     --color-tag-selector-mask-hover-bg: linear-gradient(90deg, rgba(39, 39, 43, 0) 0%, rgba(39, 39, 43, 1) 100%);
+    --color-pipeline-template-card-hover-bg: linear-gradient(0deg, rgba(58, 58, 64, 1) 60.27%, rgba(58, 58, 64, 0) 100%);
 }
\ No newline at end of file
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 60c03fb9c5..1b9fd9df11 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -66,4 +66,5 @@ html[data-theme="light"] {
         --color-node-data-source-bg: linear-gradient(100deg, var(--workflow-block-wrapper-bg-1, #E9EBF0) 0%, var(--workflow-block-wrapper-bg-2, rgba(233, 235, 240, 0.20)) 100%);
         --color-tag-selector-mask-bg: linear-gradient(90deg, rgba(252, 252, 253, 0) 0%, rgba(252, 252, 253, 1) 100%);
         --color-tag-selector-mask-hover-bg: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+        --color-pipeline-template-card-hover-bg: linear-gradient(0deg, rgba(249, 250, 251, 1) 60.27%, rgba(249, 250, 251, 0) 100%);
 }
\ No newline at end of file