diff --git a/web/app/components/app/configuration/config/index.tsx b/web/app/components/app/configuration/config/index.tsx
index 3e8b5f1caa..adef93f541 100644
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@@ -79,7 +79,7 @@ const Config: FC = () => {
 
         {/* Dataset */}
         <DatasetConfig
-          // readonly={readonly}
+          readonly={readonly}
         />
 
         {/* Tools */}
diff --git a/web/app/components/app/configuration/dataset-config/card-item/item.tsx b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
index b671d9c146..8d9155b0f0 100644
--- a/web/app/components/app/configuration/dataset-config/card-item/item.tsx
+++ b/web/app/components/app/configuration/dataset-config/card-item/item.tsx
@@ -29,6 +29,7 @@ const Item: FC<ItemProps> = ({
   config,
   onSave,
   onRemove,
+  readonly = false,
   editable = true,
 }) => {
   const media = useBreakpoints()
@@ -68,7 +69,7 @@ const Item: FC<ItemProps> = ({
       </div>
       <div className='ml-2 hidden shrink-0 items-center space-x-1 group-hover:flex'>
         {
-          editable && <ActionButton
+          editable && !readonly && <ActionButton
             onClick={(e) => {
               e.stopPropagation()
               setShowSettingsModal(true)
@@ -77,14 +78,18 @@ const Item: FC<ItemProps> = ({
             <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
           </ActionButton>
         }
-        <ActionButton
-          onClick={() => onRemove(config.id)}
-          state={isDeleting ? ActionButtonState.Destructive : ActionButtonState.Default}
-          onMouseEnter={() => setIsDeleting(true)}
-          onMouseLeave={() => setIsDeleting(false)}
-        >
-          <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
-        </ActionButton>
+        {
+          !readonly && (
+            <ActionButton
+              onClick={() => onRemove(config.id)}
+              state={isDeleting ? ActionButtonState.Destructive : ActionButtonState.Default}
+              onMouseEnter={() => setIsDeleting(true)}
+              onMouseLeave={() => setIsDeleting(false)}
+            >
+              <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
+            </ActionButton>
+          )
+        }
       </div>
       {
         config.indexing_technique && <Badge
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 65ef74bc27..dc22f001c6 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -37,7 +37,10 @@ import {
   MetadataFilteringVariableType,
 } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 
-const DatasetConfig: FC = () => {
+type Props = {
+  readonly?: boolean
+}
+const DatasetConfig: FC<Props> = ({ readonly }) => {
   const { t } = useTranslation()
   const userProfile = useAppContextSelector(s => s.userProfile)
   const {
@@ -254,10 +257,10 @@ const DatasetConfig: FC = () => {
       className='mt-2'
       title={t('appDebug.feature.dataSet.title')}
       headerRight={
-        <div className='flex items-center gap-1'>
+        !readonly && (<div className='flex items-center gap-1'>
           {!isAgent && <ParamsConfig disabled={!hasData} selectedDatasets={dataSet} />}
           <OperationBtn type="add" onClick={showSelectDataSet} />
-        </div>
+        </div>)
       }
       hasHeaderBottomBorder={!hasData}
       noBodySpacing
@@ -271,7 +274,8 @@ const DatasetConfig: FC = () => {
                 config={item}
                 onRemove={onRemove}
                 onSave={handleSave}
-                editable={item.editable}
+                editable={item.editable && !readonly}
+                readonly={readonly}
               />
             ))}
           </div>
diff --git a/web/app/components/app/configuration/preview.tsx b/web/app/components/app/configuration/preview.tsx
index eceb4972aa..7679ee13b6 100644
--- a/web/app/components/app/configuration/preview.tsx
+++ b/web/app/components/app/configuration/preview.tsx
@@ -305,7 +305,7 @@ const Configuration: FC<Props> = ({
   return (
     <ConfigContext.Provider value={value as any}>
       <FeaturesProvider features={featuresData}>
-        <div className="flex h-full flex-col">
+        <div className="flex h-full flex-col bg-components-panel-on-panel-item-bg">
           <div className='relative flex h-[200px] grow'>
             <div className={'flex h-full w-full shrink-0 flex-col sm:w-1/2'}>
               <Config />