diff --git a/web/app/components/base/drawer/index.tsx b/web/app/components/base/drawer/index.tsx
index c2285b5c53..c6d6a7aa34 100644
--- a/web/app/components/base/drawer/index.tsx
+++ b/web/app/components/base/drawer/index.tsx
@@ -19,6 +19,7 @@ export type IDrawerProps = {
   onClose: () => void
   onCancel?: () => void
   onOk?: () => void
+  unmount?: boolean
 }
 
 export default function Drawer({
@@ -35,11 +36,12 @@ export default function Drawer({
   onClose,
   onCancel,
   onOk,
+  unmount = false,
 }: IDrawerProps) {
   const { t } = useTranslation()
   return (
     <Dialog
-      unmount={false}
+      unmount={unmount}
       open={isOpen}
       onClose={() => !clickOutsideNotOpen && onClose()}
       className="fixed z-30 inset-0 overflow-y-auto"
@@ -49,7 +51,7 @@ export default function Drawer({
         <Dialog.Overlay
           className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
         />
-        <div className={cn('relative z-50 flex flex-col justify-between bg-white w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
+        <div className={cn('relative z-50 flex flex-col justify-between bg-components-panel-bg w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl shadow-shadow-shadow-5', panelClassname)}>
           <>
             {title && <Dialog.Title
               as="h3"
diff --git a/web/app/components/base/tag-input/index.tsx b/web/app/components/base/tag-input/index.tsx
index b26d0c6438..ec6c1cee34 100644
--- a/web/app/components/base/tag-input/index.tsx
+++ b/web/app/components/base/tag-input/index.tsx
@@ -3,8 +3,8 @@ import type { ChangeEvent, FC, KeyboardEvent } from 'react'
 import { } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import AutosizeInput from 'react-18-input-autosize'
+import { RiAddLine, RiCloseLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
-import { X } from '@/app/components/base/icons/src/vender/line/general'
 import { useToastContext } from '@/app/components/base/toast'
 
 type TagInputProps = {
@@ -75,14 +75,14 @@ const TagInput: FC<TagInputProps> = ({
         (items || []).map((item, index) => (
           <div
             key={item}
-            className={cn('flex items-center mr-1 mt-1 px-2 py-1 text-sm text-gray-700 border border-gray-200', isSpecialMode ? 'bg-white rounded-md' : 'rounded-lg')}>
+            className={cn('flex items-center mr-1 mt-1 pl-1.5 pr-1 py-1 system-xs-regular text-text-secondary border border-divider-deep bg-components-badge-white-to-dark rounded-md')}
+          >
             {item}
             {
               !disableRemove && (
-                <X
-                  className='ml-0.5 w-3 h-3 text-gray-500 cursor-pointer'
-                  onClick={() => handleRemove(index)}
-                />
+                <div className='flex items-center justify-center w-4 h-4 cursor-pointer' onClick={() => handleRemove(index)}>
+                  <RiCloseLine className='ml-0.5 w-3.5 h-3.5 text-text-tertiary' />
+                </div>
               )
             }
           </div>
@@ -90,24 +90,27 @@ const TagInput: FC<TagInputProps> = ({
       }
       {
         !disableAdd && (
-          <AutosizeInput
-            inputClassName={cn('outline-none appearance-none placeholder:text-gray-300 caret-primary-600 hover:placeholder:text-gray-400', isSpecialMode ? 'bg-transparent' : '')}
-            className={cn(
-              !isInWorkflow && 'max-w-[300px]',
-              isInWorkflow && 'max-w-[146px]',
-              `
-              mt-1 py-1 rounded-lg border border-transparent text-sm  overflow-hidden
-              ${focused && 'px-2 border !border-dashed !border-gray-200'}
-            `)}
-            onFocus={() => setFocused(true)}
-            onBlur={handleBlur}
-            value={value}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              setValue(e.target.value)
-            }}
-            onKeyDown={handleKeyDown}
-            placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
-          />
+          <div className={cn('flex items-center gap-x-0.5 mt-1 group/tag-add', !isSpecialMode ? 'px-1.5 rounded-md border border-dashed border-divider-deep' : '')}>
+            {!isSpecialMode && !focused && <RiAddLine className='w-3.5 h-3.5 text-text-placeholder group-hover/tag-add:text-text-secondary' />}
+            <AutosizeInput
+              inputClassName={cn('outline-none appearance-none placeholder:text-text-placeholder caret-[#295EFF] group-hover/tag-add:placeholder:text-text-secondary', isSpecialMode ? 'bg-transparent' : '')}
+              className={cn(
+                !isInWorkflow && 'max-w-[300px]',
+                isInWorkflow && 'max-w-[146px]',
+                `
+                py-1 rounded-md overflow-hidden system-xs-regular
+                ${focused && isSpecialMode && 'px-1.5 border border-dashed border-divider-deep'}
+              `)}
+              onFocus={() => setFocused(true)}
+              onBlur={handleBlur}
+              value={value}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                setValue(e.target.value)
+              }}
+              onKeyDown={handleKeyDown}
+              placeholder={t(placeholder || (isSpecialMode ? 'common.model.params.stop_sequencesPlaceholder' : 'datasetDocuments.segment.addKeyWord'))}
+            />
+          </div>
         )
       }
     </div>
diff --git a/web/app/components/datasets/documents/detail/completed/index.tsx b/web/app/components/datasets/documents/detail/completed/index.tsx
index 46f8470a4e..713b421398 100644
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -11,40 +11,44 @@ import SegmentList from './segment-list'
 import DisplayToggle from './display-toggle'
 import BatchAction from './batch-action'
 import SegmentDetail from './segment-detail'
-import { mockChildSegments, mockSegments } from './mock-data'
+import { mockChildSegments } from './mock-data'
 import SegmentCard from './segment-card'
 import ChildSegmentList from './child-segment-list'
 import cn from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
-import Modal from '@/app/components/base/modal'
+import Drawer from '@/app/components/base/drawer'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'
 import { ToastContext } from '@/app/components/base/toast'
 import type { Item } from '@/app/components/base/select'
 import { SimpleSelect } from '@/app/components/base/select'
 import { updateSegment } from '@/service/datasets'
-import type { SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
+import type { ChildChunkDetail, SegmentDetailModel, SegmentUpdater } from '@/models/datasets'
 import NewSegmentModal from '@/app/components/datasets/documents/detail/new-segment-modal'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import Checkbox from '@/app/components/base/checkbox'
-import { useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList } from '@/service/knowledge/use-segment'
+import { useChildSegmentList, useDeleteSegment, useDisableSegment, useEnableSegment, useSegmentList } from '@/service/knowledge/use-segment'
 import { Chunk } from '@/app/components/base/icons/src/public/knowledge'
 
 type SegmentListContextValue = {
   isCollapsed: boolean
   toggleCollapsed: () => void
+  fullScreen: boolean
+  toggleFullScreen: () => void
 }
 
 const SegmentListContext = createContext({
   isCollapsed: true,
   toggleCollapsed: () => {},
+  fullScreen: false,
+  toggleFullScreen: () => {},
 })
 
 export const useSegmentListContext = (selector: (value: SegmentListContextValue) => any) => {
   return useContextSelector(SegmentListContext, selector)
 }
 
-export const SegmentIndexTag: FC<{ positionId: string | number; className?: string }> = ({ positionId, className }) => {
+export const SegmentIndexTag: FC<{ positionId?: string | number; label?: string; className?: string }> = ({ positionId, label, className }) => {
   const localPositionId = useMemo(() => {
     const positionIdStr = String(positionId)
     if (positionIdStr.length >= 3)
@@ -55,7 +59,7 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
     <div className={cn('flex items-center', className)}>
       <Chunk className='w-3 h-3 p-[1px] text-text-tertiary mr-0.5' />
       <div className='text-text-tertiary system-xs-medium'>
-        {localPositionId}
+        {label || localPositionId}
       </div>
     </div>
   )
@@ -84,19 +88,21 @@ const Completed: FC<ICompletedProps> = ({
   const { notify } = useContext(ToastContext)
   const [datasetId = '', documentId = '', docForm, mode, parentMode] = useDocumentContext(s => [s.datasetId, s.documentId, s.docForm, s.mode, s.parentMode])
   // the current segment id and whether to show the modal
-  const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean; isEditing?: boolean }>({ showModal: false })
+  const [currSegment, setCurrSegment] = useState<{ segInfo?: SegmentDetailModel; showModal: boolean; isEditMode?: boolean }>({ showModal: false })
 
   const [inputValue, setInputValue] = useState<string>('') // the input value
   const [searchValue, setSearchValue] = useState<string>('') // the search value
   const [selectedStatus, setSelectedStatus] = useState<boolean | 'all'>('all') // the selected status, enabled/disabled/undefined
 
   const [segments, setSegments] = useState<SegmentDetailModel[]>([]) // all segments data
+  const [childSegments, setChildSegments] = useState<ChildChunkDetail[]>([]) // all child segments data
   const [selectedSegmentIds, setSelectedSegmentIds] = useState<string[]>([])
   const { eventEmitter } = useEventEmitterContextContext()
   const [isCollapsed, setIsCollapsed] = useState(true)
   // todo: pagination
   const [currentPage, setCurrentPage] = useState(1)
   const [limit, setLimit] = useState(10)
+  const [fullScreen, setFullScreen] = useState(false)
 
   const { run: handleSearch } = useDebounceFn(() => {
     setSearchValue(inputValue)
@@ -111,37 +117,63 @@ const Completed: FC<ICompletedProps> = ({
     setSelectedStatus(value === 'all' ? 'all' : !!value)
   }
 
-  const { isLoading: isLoadingSegmentList, data: segmentList, refetch: refreshSegmentList } = useSegmentList(
+  const isFullDocMode = useMemo(() => {
+    return mode === 'hierarchical' && parentMode === 'full-doc'
+  }, [mode, parentMode])
+
+  const { isLoading: isLoadingSegmentList, data: segmentListData, refetch: refreshSegmentList } = useSegmentList(
     {
       datasetId,
       documentId,
       params: {
         page: currentPage,
         limit,
-        keyword: searchValue,
+        keyword: isFullDocMode ? '' : searchValue,
         enabled: selectedStatus === 'all' ? 'all' : !!selectedStatus,
       },
     },
-    mode === 'hierarchical' && parentMode === 'full-doc',
   )
 
   useEffect(() => {
-    setSegments(mockSegments.data)
-    // if (segmentList)
-    //   setSegments(segmentList.data || [])
-  }, [segmentList])
+    // setSegments(mockSegments.data)
+    // todo: remove mock data
+    if (segmentListData)
+      setSegments(segmentListData.data || [])
+  }, [segmentListData])
+
+  const { data: childChunkListData, refetch: refreshChildSegmentList } = useChildSegmentList(
+    {
+      datasetId,
+      documentId,
+      segmentId: segments[0]?.id || '',
+      params: {
+        page: currentPage,
+        limit,
+        keyword: searchValue,
+      },
+    },
+    !isFullDocMode || segments.length === 0,
+  )
+
+  useEffect(() => {
+    setChildSegments(mockChildSegments.data)
+    // todo: remove mock data
+    // if (childChunkListData)
+    //   setChildSegments(childChunkListData.data || [])
+  }, [childChunkListData])
 
   const resetList = useCallback(() => {
     setSegments([])
     refreshSegmentList()
   }, [])
 
-  const onClickCard = (detail: SegmentDetailModel, isEditing = false) => {
-    setCurrSegment({ segInfo: detail, showModal: true, isEditing })
+  const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
+    setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
   }
 
-  const onCloseModal = () => {
+  const onCloseDrawer = () => {
     setCurrSegment({ ...currSegment, showModal: false })
+    setFullScreen(false)
   }
 
   const { mutateAsync: enableSegment } = useEnableSegment()
@@ -218,7 +250,7 @@ const Completed: FC<ICompletedProps> = ({
       eventEmitter?.emit('update-segment')
       const res = await updateSegment({ datasetId, documentId, segmentId, body: params })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-      onCloseModal()
+      onCloseDrawer()
       for (const seg of segments) {
         if (seg.id === segmentId) {
           seg.answer = res.data.answer
@@ -243,7 +275,7 @@ const Completed: FC<ICompletedProps> = ({
   }, [importStatus, resetList])
 
   const isAllSelected = useMemo(() => {
-    return segments.every(seg => selectedSegmentIds.includes(seg.id))
+    return segments.length > 0 && segments.every(seg => selectedSegmentIds.includes(seg.id))
   }, [segments, selectedSegmentIds])
 
   const isSomeSelected = useMemo(() => {
@@ -259,18 +291,21 @@ const Completed: FC<ICompletedProps> = ({
   }, [segments, isAllSelected, selectedSegmentIds])
 
   const totalText = useMemo(() => {
-    return segmentList?.total ? formatNumber(segmentList.total) : '--'
-  }, [segmentList?.total])
+    return segmentListData?.total ? formatNumber(segmentListData.total) : '--'
+  }, [segmentListData?.total])
 
-  const isFullDocMode = useMemo(() => {
-    return mode === 'hierarchical' && parentMode === 'full-doc'
-  }, [mode, parentMode])
+  const toggleFullScreen = useCallback(() => {
+    setFullScreen(!fullScreen)
+  }, [fullScreen])
 
   return (
     <SegmentListContext.Provider value={{
       isCollapsed,
       toggleCollapsed: () => setIsCollapsed(!isCollapsed),
+      fullScreen,
+      toggleFullScreen,
     }}>
+      {/* Menu Bar */}
       {!isFullDocMode && <div className={s.docSearchWrapper}>
         <Checkbox
           className='shrink-0'
@@ -300,6 +335,7 @@ const Completed: FC<ICompletedProps> = ({
         <Divider type='vertical' className='h-3.5 mx-3' />
         <DisplayToggle />
       </div>}
+      {/* Segment list */}
       {
         isFullDocMode
           ? <div className='h-full flex flex-col'>
@@ -309,7 +345,7 @@ const Completed: FC<ICompletedProps> = ({
               loading={false}
             />
             <ChildSegmentList
-              childChunks={mockChildSegments.data}
+              childChunks={childSegments}
               handleInputChange={() => {}}
               enabled={!archived}
             />
@@ -326,23 +362,32 @@ const Completed: FC<ICompletedProps> = ({
             archived={archived}
           />
       }
-      <Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
+      {/* Edit or view segment detail */}
+      <Drawer
+        isOpen={currSegment.showModal}
+        onClose={() => {}}
+        panelClassname={`!p-0 ${fullScreen
+          ? '!max-w-full !w-full'
+          : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl'}`}
+        mask={false}
+        unmount
+        footer={null}
+      >
         <SegmentDetail
-          embeddingAvailable={embeddingAvailable}
           segInfo={currSegment.segInfo ?? { id: '' }}
-          isEditing={currSegment.isEditing}
-          onChangeSwitch={onChangeSwitch}
+          isEditMode={currSegment.isEditMode}
           onUpdate={handleUpdateSegment}
-          onCancel={onCloseModal}
-          archived={archived}
+          onCancel={onCloseDrawer}
         />
-      </Modal>
+      </Drawer>
+      {/* Create New Segment */}
       <NewSegmentModal
         isShow={showNewSegmentModal}
         docForm={docForm}
         onCancel={() => onNewSegmentModalChange(false)}
         onSave={resetList}
       />
+      {/* Batch Action Buttons */}
       {selectedSegmentIds.length > 0
       && <BatchAction
         className='absolute left-0 bottom-16 z-20'
diff --git a/web/app/components/datasets/documents/detail/completed/segment-card.tsx b/web/app/components/datasets/documents/detail/completed/segment-card.tsx
index 48d13e0d11..4a2e9a95f1 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-card.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card.tsx
@@ -170,7 +170,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
 
   return (
     <div
-      className={cn('px-3 rounded-xl group/card', isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg', className)}
+      className={cn('w-full px-3 rounded-xl group/card', isFullDocMode ? '' : 'pt-2.5 pb-2 hover:bg-dataset-chunk-detail-card-hover-bg', className)}
       onClick={handleClickCard}
     >
       <div className='h-5 relative flex items-center justify-between'>
diff --git a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
index 64589b910e..03d0b499d5 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -2,50 +2,43 @@ import React, { type FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   RiCloseLine,
-  RiEditLine,
+  RiExpandDiagonalLine,
 } from '@remixicon/react'
-import { StatusItem } from '../../list'
-import s from './style.module.css'
-import { SegmentIndexTag } from '.'
+import { useKeyPress } from 'ahooks'
+import { SegmentIndexTag, useSegmentListContext } from './index'
 import type { SegmentDetailModel } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
-import Switch from '@/app/components/base/switch'
 import Button from '@/app/components/base/button'
 import TagInput from '@/app/components/base/tag-input'
-import cn from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import classNames from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 
 type ISegmentDetailProps = {
-  embeddingAvailable: boolean
   segInfo?: Partial<SegmentDetailModel> & { id: string }
-  onChangeSwitch?: (enabled: boolean, segId?: string) => Promise<void>
   onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void
   onCancel: () => void
-  archived?: boolean
-  isEditing?: boolean
+  isEditMode?: boolean
 }
 
 /**
  * Show all the contents of the segment
  */
 const SegmentDetail: FC<ISegmentDetailProps> = ({
-  embeddingAvailable,
   segInfo,
-  archived,
-  onChangeSwitch,
   onUpdate,
   onCancel,
-  isEditing: initialIsEditing,
+  isEditMode,
 }) => {
   const { t } = useTranslation()
-  const [isEditing, setIsEditing] = useState(initialIsEditing)
   const [question, setQuestion] = useState(segInfo?.content || '')
   const [answer, setAnswer] = useState(segInfo?.answer || '')
   const [keywords, setKeywords] = useState<string[]>(segInfo?.keywords || [])
   const { eventEmitter } = useEventEmitterContextContext()
   const [loading, setLoading] = useState(false)
+  const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
 
   eventEmitter?.useSubscription((v) => {
     if (v === 'update-segment')
@@ -55,7 +48,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
   })
 
   const handleCancel = () => {
-    setIsEditing(false)
+    onCancel()
     setQuestion(segInfo?.content || '')
     setAnswer(segInfo?.answer || '')
     setKeywords(segInfo?.keywords || [])
@@ -64,6 +57,17 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
     onUpdate(segInfo?.id || '', question, answer, keywords)
   }
 
+  useKeyPress(['esc'], (e) => {
+    e.preventDefault()
+    handleCancel()
+  })
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.s`, (e) => {
+    e.preventDefault()
+    handleSave()
+  }
+  , { exactMatch: true, useCapture: true })
+
   const renderContent = () => {
     if (segInfo?.answer) {
       return (
@@ -75,7 +79,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
             value={question}
             placeholder={t('datasetDocuments.segment.questionPlaceholder') || ''}
             onChange={e => setQuestion(e.target.value)}
-            disabled={!isEditing}
+            disabled={!isEditMode}
           />
           <div className='mb-1 text-xs font-medium text-gray-500'>ANSWER</div>
           <AutoHeightTextarea
@@ -84,7 +88,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
             value={answer}
             placeholder={t('datasetDocuments.segment.answerPlaceholder') || ''}
             onChange={e => setAnswer(e.target.value)}
-            disabled={!isEditing}
+            disabled={!isEditMode}
             autoFocus
           />
         </>
@@ -93,91 +97,104 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
 
     return (
       <AutoHeightTextarea
-        className='leading-6 text-md text-gray-800'
+        className='body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
         value={question}
         placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
         onChange={e => setQuestion(e.target.value)}
-        disabled={!isEditing}
+        disabled={!isEditMode}
         autoFocus
       />
     )
   }
 
-  return (
-    <div className={'flex flex-col relative'}>
-      <div className='absolute right-0 top-0 flex items-center h-7'>
-        {isEditing && (
-          <>
-            <Button
-              onClick={handleCancel}>
-              {t('common.operation.cancel')}
-            </Button>
-            <Button
-              variant='primary'
-              className='ml-3'
-              onClick={handleSave}
-              disabled={loading}
-            >
-              {t('common.operation.save')}
-            </Button>
-          </>
-        )}
-        {!isEditing && !archived && embeddingAvailable && (
-          <>
-            <div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
-              <div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
-              <RiEditLine className='w-4 h-4 text-gray-500' onClick={() => setIsEditing(true)} />
+  const renderActionButtons = () => {
+    return (
+      <div className='flex items-center gap-x-2'>
+        <Button
+          onClick={handleCancel}
+        >
+          <div className='flex items-center gap-x-1'>
+            <span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
+            <span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
+          </div>
+        </Button>
+        <Button
+          variant='primary'
+          onClick={handleSave}
+          disabled={loading}
+        >
+          <div className='flex items-center gap-x-1'>
+            <span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
+            <div className='flex items-center gap-x-0.5'>
+              <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
+              <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
             </div>
-            <div className='mx-3 w-[1px] h-3 bg-gray-200' />
-          </>
-        )}
-        <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={onCancel}>
-          <RiCloseLine className='w-4 h-4 text-gray-500' />
+          </div>
+        </Button>
+      </div>
+    )
+  }
+
+  const renderKeywords = () => {
+    return (
+      <div className={classNames('flex flex-col', fullScreen ? 'w-1/5' : '')}>
+        <div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
+        <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
+          {!segInfo?.keywords?.length
+            ? '-'
+            : (
+              <TagInput
+                items={keywords}
+                onChange={newKeywords => setKeywords(newKeywords)}
+                disableAdd={!isEditMode}
+                disableRemove={!isEditMode || (keywords.length === 1)}
+              />
+            )
+          }
         </div>
       </div>
-      <SegmentIndexTag positionId={segInfo?.position || ''} className='w-fit mt-[2px] mb-6' />
-      <div className={s.segModalContent}>{renderContent()}</div>
-      <div className={s.keywordTitle}>{t('datasetDocuments.segment.keywords')}</div>
-      <div className={s.keywordWrapper}>
-        {!segInfo?.keywords?.length
-          ? '-'
-          : (
-            <TagInput
-              items={keywords}
-              onChange={newKeywords => setKeywords(newKeywords)}
-              disableAdd={!isEditing}
-              disableRemove={!isEditing || (keywords.length === 1)}
-            />
-          )
-        }
-      </div>
-      <div className={cn(s.footer, s.numberInfo)}>
-        <div className='flex items-center flex-wrap gap-y-2'>
-          <div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
-          <div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as number)} {t('datasetDocuments.segment.hitCount')}</span>
-          <div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span>
+    )
+  }
+
+  return (
+    <div className={'flex flex-col h-full'}>
+      <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
+        <div className='flex flex-col'>
+          <div className='text-text-primary system-xl-semibold'>{isEditMode ? 'Edit Chunk' : 'Chunk Detail'}</div>
+          <div className='flex items-center gap-x-2'>
+            <SegmentIndexTag positionId={segInfo?.position || ''} />
+            <span className='text-text-quaternary system-xs-medium'>·</span>
+            <span className='text-text-tertiary system-xs-medium'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
+          </div>
         </div>
         <div className='flex items-center'>
-          <StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' />
-          {embeddingAvailable && (
+          {isEditMode && fullScreen && (
             <>
-              <Divider type='vertical' className='!h-2' />
-              <Switch
-                size='md'
-                defaultValue={segInfo?.enabled}
-                onChange={async (val) => {
-                  await onChangeSwitch?.(val, segInfo?.id || '')
-                }}
-                disabled={archived}
-              />
+              {renderActionButtons()}
+              <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
             </>
           )}
+          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
+            <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+          </div>
+          <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={onCancel}>
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+          </div>
         </div>
       </div>
+      <div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4')}>
+        <div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
+          {renderContent()}
+        </div>
+        {renderKeywords()}
+      </div>
+      {isEditMode && !fullScreen && (
+        <div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+          {renderActionButtons()}
+        </div>
+      )}
     </div>
   )
 }
 
-SegmentDetail.displayName = 'SegmentDetail'
-
-export default React.memo(SegmentDetail)
+export default SegmentDetail
diff --git a/web/app/components/datasets/documents/detail/completed/segment-list.tsx b/web/app/components/datasets/documents/detail/completed/segment-list.tsx
index a0e8ba37e7..485f70ea8e 100644
--- a/web/app/components/datasets/documents/detail/completed/segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-list.tsx
@@ -12,7 +12,7 @@ type ISegmentListProps = {
   items: SegmentDetailModel[]
   selectedSegmentIds: string[]
   onSelected: (segId: string) => void
-  onClick: (detail: SegmentDetailModel, isEditing?: boolean) => void
+  onClick: (detail: SegmentDetailModel, isEditMode?: boolean) => void
   onChangeSwitch: (enabled: boolean, segId?: string,) => Promise<void>
   onDelete: (segId: string) => Promise<void>
   archived?: boolean
@@ -45,11 +45,11 @@ const SegmentList: FC<ISegmentListProps> = ({
                 checked={selectedSegmentIds.includes(segItem.id)}
                 onCheck={() => onSelected(segItem.id)}
               />
-              <div>
+              <div className='grow'>
                 <SegmentCard
                   key={`${segItem.id}-card`}
                   detail={segItem}
-                  onClick={() => onClickCard(segItem)}
+                  onClick={() => onClickCard(segItem, true)}
                   onChangeSwitch={onChangeSwitch}
                   onClickEdit={() => onClickCard(segItem, true)}
                   onDelete={onDelete}
diff --git a/web/app/components/datasets/documents/detail/new-segment-modal.tsx b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
index dae9cf19fb..12b58b8658 100644
--- a/web/app/components/datasets/documents/detail/new-segment-modal.tsx
+++ b/web/app/components/datasets/documents/detail/new-segment-modal.tsx
@@ -3,15 +3,20 @@ import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { useParams } from 'next/navigation'
-import { RiCloseLine } from '@remixicon/react'
-import Modal from '@/app/components/base/modal'
+import { RiCloseLine, RiExpandDiagonalLine } from '@remixicon/react'
+import { useKeyPress } from 'ahooks'
+import { SegmentIndexTag, useSegmentListContext } from './completed'
+import Drawer from '@/app/components/base/drawer'
 import Button from '@/app/components/base/button'
 import AutoHeightTextarea from '@/app/components/base/auto-height-textarea/common'
-import { Hash02 } from '@/app/components/base/icons/src/vender/line/general'
 import { ToastContext } from '@/app/components/base/toast'
 import type { SegmentUpdater } from '@/models/datasets'
 import { addSegment } from '@/service/datasets'
 import TagInput from '@/app/components/base/tag-input'
+import classNames from '@/utils/classnames'
+import { formatNumber } from '@/utils/format'
+import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
+import Divider from '@/app/components/base/divider'
 
 type NewSegmentModalProps = {
   isShow: boolean
@@ -30,14 +35,15 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   const { notify } = useContext(ToastContext)
   const [question, setQuestion] = useState('')
   const [answer, setAnswer] = useState('')
-  const { datasetId, documentId } = useParams()
+  const { datasetId, documentId } = useParams<{ datasetId: string; documentId: string }>()
   const [keywords, setKeywords] = useState<string[]>([])
   const [loading, setLoading] = useState(false)
+  const [fullScreen, toggleFullScreen] = useSegmentListContext(s => [s.fullScreen, s.toggleFullScreen])
 
   const handleCancel = () => {
+    onCancel()
     setQuestion('')
     setAnswer('')
-    onCancel()
     setKeywords([])
   }
 
@@ -74,6 +80,17 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
     }
   }
 
+  useKeyPress(['esc'], (e) => {
+    e.preventDefault()
+    handleCancel()
+  })
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.s`, (e) => {
+    e.preventDefault()
+    handleSave()
+  }
+  , { exactMatch: true, useCapture: true })
+
   const renderContent = () => {
     if (docForm === 'qa_model') {
       return (
@@ -101,7 +118,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
 
     return (
       <AutoHeightTextarea
-        className='leading-6 text-md text-gray-800'
+        className='body-md-regular text-text-secondary tracking-[-0.07px] caret-[#295EFF]'
         value={question}
         placeholder={t('datasetDocuments.segment.contentPlaceholder') || ''}
         onChange={e => setQuestion(e.target.value)}
@@ -110,46 +127,98 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
     )
   }
 
-  return (
-    <Modal isShow={isShow} onClose={() => { }} className='pt-8 px-8 pb-6 !max-w-[640px] !rounded-xl'>
-      <div className={'flex flex-col relative'}>
-        <div className='absolute right-0 -top-0.5 flex items-center h-6'>
-          <div className='flex justify-center items-center w-6 h-6 cursor-pointer' onClick={handleCancel}>
-            <RiCloseLine className='w-4 h-4 text-gray-500' />
+  const renderActionButtons = () => {
+    return (
+      <div className='flex items-center gap-x-2'>
+        <Button
+          onClick={handleCancel}
+        >
+          <div className='flex items-center gap-x-1'>
+            <span className='text-components-button-secondary-text system-sm-medium'>{t('common.operation.cancel')}</span>
+            <span className='px-[1px] bg-components-kbd-bg-gray rounded-[4px] text-text-tertiary system-kbd'>ESC</span>
           </div>
-        </div>
-        <div className='mb-[14px]'>
-          <span className='inline-flex items-center px-1.5 h-5 border border-gray-200 rounded-md'>
-            <Hash02 className='mr-0.5 w-3 h-3 text-gray-400' />
-            <span className='text-[11px] font-medium text-gray-500 italic'>
-              {
-                docForm === 'qa_model'
-                  ? t('datasetDocuments.segment.newQaSegment')
-                  : t('datasetDocuments.segment.newTextSegment')
-              }
-            </span>
-          </span>
-        </div>
-        <div className='mb-4 py-1.5 h-[420px] overflow-auto'>{renderContent()}</div>
-        <div className='text-xs font-medium text-gray-500'>{t('datasetDocuments.segment.keywords')}</div>
-        <div className='mb-8'>
+        </Button>
+        <Button
+          variant='primary'
+          onClick={handleSave}
+          disabled={loading}
+        >
+          <div className='flex items-center gap-x-1'>
+            <span className='text-components-button-primary-text'>{t('common.operation.save')}</span>
+            <div className='flex items-center gap-x-0.5'>
+              <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd capitalize'>{getKeyboardKeyNameBySystem('ctrl')}</span>
+              <span className='w-4 h-4 bg-components-kbd-bg-white rounded-[4px] text-text-primary-on-surface system-kbd'>S</span>
+            </div>
+          </div>
+        </Button>
+      </div>
+    )
+  }
+
+  const renderKeywords = () => {
+    return (
+      <div className={classNames('flex flex-col', fullScreen ? 'w-1/5' : '')}>
+        <div className='text-text-tertiary system-xs-medium-uppercase'>{t('datasetDocuments.segment.keywords')}</div>
+        <div className='text-text-tertiary w-full max-h-[200px] overflow-auto flex flex-wrap gap-1'>
           <TagInput items={keywords} onChange={newKeywords => setKeywords(newKeywords)} />
         </div>
-        <div className='flex justify-end'>
-          <Button
-            onClick={handleCancel}>
-            {t('common.operation.cancel')}
-          </Button>
-          <Button
-            variant='primary'
-            onClick={handleSave}
-            disabled={loading}
-          >
-            {t('common.operation.save')}
-          </Button>
-        </div>
       </div>
-    </Modal>
+    )
+  }
+
+  return (
+    <Drawer
+      isOpen={isShow}
+      onClose={() => {}}
+      panelClassname={`!p-0 ${fullScreen
+        ? '!max-w-full !w-full'
+        : 'mt-16 mr-2 mb-2 !max-w-[560px] !w-[560px] border-[0.5px] border-components-panel-border rounded-xl'}`}
+      mask={false}
+      unmount
+      footer={null}
+    >
+      <div className={'flex flex-col h-full'}>
+        <div className={classNames('flex items-center justify-between', fullScreen ? 'py-3 pr-4 pl-6 border border-divider-subtle' : 'pt-3 pr-3 pl-4')}>
+          <div className='flex flex-col'>
+            <div className='text-text-primary system-xl-semibold'>{
+              docForm === 'qa_model'
+                ? t('datasetDocuments.segment.newQaSegment')
+                : t('datasetDocuments.segment.addChunk')
+            }</div>
+            <div className='flex items-center gap-x-2'>
+              <SegmentIndexTag label={'New Chunk'} />
+              <span className='text-text-quaternary system-xs-medium'>·</span>
+              <span className='text-text-tertiary system-xs-medium'>{formatNumber(question.length)} {t('datasetDocuments.segment.characters')}</span>
+            </div>
+          </div>
+          <div className='flex items-center'>
+            {fullScreen && (
+              <>
+                {renderActionButtons()}
+                <Divider type='vertical' className='h-3.5 bg-divider-regular ml-4 mr-2' />
+              </>
+            )}
+            <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer mr-1' onClick={toggleFullScreen}>
+              <RiExpandDiagonalLine className='w-4 h-4 text-text-tertiary' />
+            </div>
+            <div className='w-8 h-8 flex justify-center items-center p-1.5 cursor-pointer' onClick={handleCancel}>
+              <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            </div>
+          </div>
+        </div>
+        <div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8' : 'flex-col gap-y-1 py-3 px-4')}>
+          <div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
+            {renderContent()}
+          </div>
+          {renderKeywords()}
+        </div>
+        {!fullScreen && (
+          <div className='flex items-center justify-end p-4 pt-3 border-t-[1px] border-t-divider-subtle'>
+            {renderActionButtons()}
+          </div>
+        )}
+      </div>
+    </Drawer>
   )
 }
 
diff --git a/web/app/components/datasets/documents/list.tsx b/web/app/components/datasets/documents/list.tsx
index ce35e78a8a..c342048d22 100644
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -338,7 +338,7 @@ export const OperationAction: FC<{
               <RiMoreFill className='w-4 h-4 text-text-components-button-secondary-text' />
             </div>
           }
-          btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!bg-gray-100 !shadow-none' : '!bg-transparent')}
+          btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!hover:bg-state-base-hover !shadow-none' : '!bg-transparent')}
           popupClassName='!w-full'
           className={`flex justify-end !w-[200px] h-fit !z-20 ${className}`}
         />
@@ -371,7 +371,7 @@ export const OperationAction: FC<{
 
 export const renderTdValue = (value: string | number | null, isEmptyStyle = false) => {
   return (
-    <div className={cn(isEmptyStyle ? 'text-gray-400' : 'text-gray-700', s.tdValue)}>
+    <div className={cn(isEmptyStyle ? 'text-text-tertiary' : 'text-text-secondary', s.tdValue)}>
       {value ?? '-'}
     </div>
   )
@@ -418,7 +418,7 @@ const DocumentList: FC<IDocumentListProps> = ({
   const isGeneralMode = chunkingMode !== ChuckingMode.parentChild
   const isQAMode = chunkingMode === ChuckingMode.qa
   const [localDocs, setLocalDocs] = useState<LocalDoc[]>(documents)
-  const [enableSort, setEnableSort] = useState(false)
+  const [enableSort, setEnableSort] = useState(true)
 
   useEffect(() => {
     setLocalDocs(documents)
@@ -426,7 +426,7 @@ const DocumentList: FC<IDocumentListProps> = ({
 
   const onClickSort = () => {
     setEnableSort(!enableSort)
-    if (!enableSort) {
+    if (enableSort) {
       const sortedDocs = [...localDocs].sort((a, b) => dayjs(a.created_at).isBefore(dayjs(b.created_at)) ? -1 : 1)
       setLocalDocs(sortedDocs)
     }
@@ -497,7 +497,7 @@ const DocumentList: FC<IDocumentListProps> = ({
   return (
     <div className='relative w-full h-full overflow-x-auto'>
       <table className={`min-w-[700px] max-w-full w-full border-collapse border-0 text-sm mt-3 ${s.documentTable}`}>
-        <thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-medium text-xs uppercase">
+        <thead className="h-8 leading-8 border-b border-divider-subtle text-text-tertiary font-medium text-xs uppercase">
           <tr>
             <td className='w-12'>
               <div className='flex items-center' onClick={e => e.stopPropagation()}>
@@ -519,22 +519,22 @@ const DocumentList: FC<IDocumentListProps> = ({
             <td className='w-24'>{t('datasetDocuments.list.table.header.words')}</td>
             <td className='w-44'>{t('datasetDocuments.list.table.header.hitCount')}</td>
             <td className='w-44'>
-              <div className='flex justify-between items-center'>
+              <div className='flex items-center' onClick={onClickSort}>
                 {t('datasetDocuments.list.table.header.uploadTime')}
-                <ArrowDownIcon className={cn('h-3 w-3 stroke-current stroke-2 cursor-pointer', enableSort ? 'text-gray-500' : 'text-gray-300')} onClick={onClickSort} />
+                <ArrowDownIcon className={cn('ml-0.5 h-3 w-3 stroke-current stroke-2 cursor-pointer', enableSort ? 'text-text-tertiary' : 'text-gray-300')} />
               </div>
             </td>
             <td className='w-40'>{t('datasetDocuments.list.table.header.status')}</td>
             <td className='w-20'>{t('datasetDocuments.list.table.header.action')}</td>
           </tr>
         </thead>
-        <tbody className="text-gray-700">
+        <tbody className="text-text-secondary">
           {localDocs.map((doc, index) => {
             const isFile = doc.data_source_type === DataSourceType.FILE
             const fileType = isFile ? doc.data_source_detail_dict?.upload_file?.extension : ''
             return <tr
               key={doc.id}
-              className={'border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer'}
+              className={'border-b border-divider-subtle h-8 hover:bg-background-default-hover cursor-pointer'}
               onClick={() => {
                 router.push(`/datasets/${datasetId}/documents/${doc.id}`)
               }}>
@@ -573,13 +573,13 @@ const DocumentList: FC<IDocumentListProps> = ({
                       popupContent={t('datasetDocuments.list.table.rename')}
                     >
                       <div
-                        className='p-1 rounded-md cursor-pointer hover:bg-black/5'
+                        className='p-1 rounded-md cursor-pointer hover:bg-state-base-hover'
                         onClick={(e) => {
                           e.stopPropagation()
                           handleShowRenameModal(doc)
                         }}
                       >
-                        <Edit03 className='w-4 h-4 text-gray-500' />
+                        <Edit03 className='w-4 h-4 text-text-tertiary' />
                       </div>
                     </Tooltip>
                   </div>
diff --git a/web/i18n/en-US/dataset-documents.ts b/web/i18n/en-US/dataset-documents.ts
index 266c7fb2e7..a0bcb5bba0 100644
--- a/web/i18n/en-US/dataset-documents.ts
+++ b/web/i18n/en-US/dataset-documents.ts
@@ -334,20 +334,21 @@ const translation = {
   segment: {
     paragraphs: 'Paragraphs',
     chunks: 'CHUNKS',
-    keywords: 'Key Words',
-    addKeyWord: 'Add key word',
+    keywords: 'KEYWORDS',
+    addKeyWord: 'Add keyword',
     keywordError: 'The maximum length of keyword is 20',
     characters: 'characters',
     hitCount: 'Retrieval count',
     vectorHash: 'Vector hash: ',
-    questionPlaceholder: 'add question here',
+    questionPlaceholder: 'Add question here',
     questionEmpty: 'Question can not be empty',
-    answerPlaceholder: 'add answer here',
+    answerPlaceholder: 'Add answer here',
     answerEmpty: 'Answer can not be empty',
-    contentPlaceholder: 'add content here',
+    contentPlaceholder: 'Add content here',
     contentEmpty: 'Content can not be empty',
     newTextSegment: 'New Text Segment',
     newQaSegment: 'New Q&A Segment',
+    addChunk: 'Add Chunk',
     delete: 'Delete this chunk ?',
   },
 }
diff --git a/web/i18n/zh-Hans/dataset-documents.ts b/web/i18n/zh-Hans/dataset-documents.ts
index 35288c04d6..355c4bee7f 100644
--- a/web/i18n/zh-Hans/dataset-documents.ts
+++ b/web/i18n/zh-Hans/dataset-documents.ts
@@ -346,6 +346,7 @@ const translation = {
     contentEmpty: '内容不能为空',
     newTextSegment: '新文本分段',
     newQaSegment: '新问答分段',
+    addChunk: '新增分段',
     delete: '删除这个分段？',
   },
 }
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index a57b6ed13b..1c9999008e 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -459,6 +459,7 @@ export type SegmentsResponse = {
   limit: number
   total: number
   total_pages: number
+  page: number
 }
 
 export type HitTestingRecord = {
@@ -615,6 +616,14 @@ export type ChildChunkDetail = {
   type: ChildChunkType
 }
 
+export type ChildSegmentResponse = {
+  data: ChildChunkDetail[]
+  total: number
+  total_pages: number
+  page: number
+  limit: number
+}
+
 export type UpdateDocumentParams = {
   datasetId: string
   documentId: string
diff --git a/web/service/knowledge/use-document.ts b/web/service/knowledge/use-document.ts
index 5b200d899d..5efc936f41 100644
--- a/web/service/knowledge/use-document.ts
+++ b/web/service/knowledge/use-document.ts
@@ -35,7 +35,7 @@ const toBatchDocumentsIdParams = (documentIds: string[] | string) => {
 export const useDocumentBatchAction = (action: DocumentActionType) => {
   return useMutation({
     mutationFn: ({ datasetId, documentIds, documentId }: UpdateDocumentBatchParams) => {
-      return patch<CommonResponse>(`/datasets/${datasetId}/documents/status/${action}?${toBatchDocumentsIdParams(documentId || documentIds!)}`)
+      return patch<CommonResponse>(`/datasets/${datasetId}/documents/status/${action}/batch?${toBatchDocumentsIdParams(documentId || documentIds!)}`)
     },
   })
 }
@@ -59,7 +59,7 @@ export const useDocumentUnArchive = () => {
 export const useDocumentDelete = () => {
   return useMutation({
     mutationFn: ({ datasetId, documentIds, documentId }: UpdateDocumentBatchParams) => {
-      return del<CommonResponse>(`/datasets/${datasetId}/documents?${toBatchDocumentsIdParams(documentId || documentIds!)}`)
+      return del<CommonResponse>(`/datasets/${datasetId}/documents/batch?${toBatchDocumentsIdParams(documentId || documentIds!)}`)
     },
   })
 }
diff --git a/web/service/knowledge/use-segment.ts b/web/service/knowledge/use-segment.ts
index 25679599e8..9f17cf76cd 100644
--- a/web/service/knowledge/use-segment.ts
+++ b/web/service/knowledge/use-segment.ts
@@ -1,11 +1,11 @@
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { del, get, patch } from '../base'
 import type { CommonResponse } from '@/models/common'
-import type { SegmentsResponse } from '@/models/datasets'
+import type { ChildSegmentResponse, SegmentsResponse } from '@/models/datasets'
 
 const NAME_SPACE = 'segment'
 
-const useSegmentListKey = [NAME_SPACE, 'list']
+const useSegmentListKey = [NAME_SPACE, 'chunkList']
 
 export const useSegmentList = (
   payload: {
@@ -28,7 +28,7 @@ export const useSegmentList = (
       return get<SegmentsResponse>(`/datasets/${datasetId}/documents/${documentId}/segments`, { params })
     },
     enabled: !disable,
-    initialData: disable ? { data: [], has_more: false, total: 0, total_pages: 0, limit: 10 } : undefined,
+    initialData: disable ? { data: [], has_more: false, page: 1, total: 0, total_pages: 0, limit: 10 } : undefined,
   })
 }
 
@@ -64,3 +64,30 @@ export const useDeleteSegment = () => {
     },
   })
 }
+
+const useChildSegmentListKey = [NAME_SPACE, 'childChunkList']
+
+export const useChildSegmentList = (
+  payload: {
+    datasetId: string
+    documentId: string
+    segmentId: string
+    params: {
+      page: number
+      limit: number
+      keyword: string
+    }
+  },
+  disable?: boolean,
+) => {
+  const { datasetId, documentId, segmentId, params } = payload
+  const { page, limit, keyword } = params
+  return useQuery({
+    queryKey: [...useChildSegmentListKey, datasetId, documentId, segmentId, page, limit, keyword],
+    queryFn: () => {
+      return get<ChildSegmentResponse>(`/datasets/${datasetId}/documents/${documentId}/segment/${segmentId}/child_chunks`, { params })
+    },
+    enabled: !disable,
+    initialData: disable ? { data: [], total: 0, page: 1, total_pages: 0, limit: 10 } : undefined,
+  })
+}