diff --git a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
index d6eda5e8bf..3378afb944 100644
--- a/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
+++ b/web/app/components/app/configuration/config/agent/agent-tools/index.tsx
@@ -190,7 +190,7 @@ const AgentTools: FC = () => {
           </div>
         )}
       >
-        <div className={cn('grid grid-cols-1 flex-wrap items-center justify-between gap-1 2xl:grid-cols-2', readonly && 'grid-cols-2')}>
+        <div className={cn('grid grid-cols-1 items-center gap-1 2xl:grid-cols-2', readonly && 'cursor-not-allowed grid-cols-2')}>
           {tools.map((item: AgentTool & { icon: any, collection?: Collection }, index) => (
             <div
               key={index}
diff --git a/web/app/components/app/configuration/dataset-config/index.tsx b/web/app/components/app/configuration/dataset-config/index.tsx
index 54003cac80..6de77cad9e 100644
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -276,7 +276,7 @@ const DatasetConfig: FC<Props> = ({ readonly, hideMetadataFilter }) => {
     >
       {hasData
         ? (
-            <div className={cn('mt-1 flex flex-wrap justify-between px-3 pb-3', readonly && 'grid-cols-2 gap-1')}>
+            <div className={cn('mt-1 grid grid-cols-1 px-3 pb-3', readonly && 'grid-cols-2 gap-1')}>
               {formattedDataset.map(item => (
                 <CardItem
                   key={item.id}
@@ -284,6 +284,7 @@ const DatasetConfig: FC<Props> = ({ readonly, hideMetadataFilter }) => {
                   onRemove={onRemove}
                   onSave={handleSave}
                   editable={item.editable}
+                  readonly={readonly}
                 />
               ))}
             </div>