diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index 222686a0a8..e9792f48ef 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import type { FC, SetStateAction } from 'react'
 import { RiArrowDownSLine, RiArrowUpSLine } from '@remixicon/react'
 import Input, { type InputProps } from '../input'
@@ -6,35 +5,34 @@ import classNames from '@/utils/classnames'
 
 export type InputNumberProps = {
   unit?: string
+  value: number
   onChange: (value: number) => void
   amount?: number
   size?: 'sm' | 'md'
 } & Omit<InputProps, 'value' | 'onChange' | 'size'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, defaultValue = 0, amount = 1, size = 'sm', max, min, ...rest } = props
-  const [val, setVal] = useState<number>(defaultValue as number)
-  const update = (value: SetStateAction<number>) => {
-    const current = typeof value === 'function' ? value(val) : value as number
+  const { unit, className, onChange, amount = 1, value, size = 'sm', max, min, ...rest } = props
+  const update = (input: SetStateAction<number>) => {
+    const current = typeof input === 'function' ? input(value) : input as number
     if (max && current >= (max as number))
       return
     if (min && current <= (min as number))
       return
-    setVal(value)
+    onChange(current)
   }
   const inc = () => update(val => val + amount)
   const dec = () => update(val => val - amount)
   return <div className='flex'>
     <Input {...rest}
       className={classNames('rounded-r-none', className)}
-      value={val}
+      value={value}
       max={max}
       min={min}
       onChange={(e) => {
         const parsed = Number(e.target.value)
         if (Number.isNaN(parsed))
           return
-        setVal(parsed)
         onChange(parsed)
       }}
     />
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index bd18d35ebc..771893b6a1 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -55,10 +55,8 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             max={max}
             step={step}
             size='sm'
+            value={value}
             onChange={(value) => {
-              if (value < min || value > max)
-                return
-
               onChange(id, value)
             }}
           />
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index dc5258e509..0f929888c8 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -119,6 +119,19 @@ type ParentChildConfig = {
   rules: PreProcessingRule[]
 }
 
+const defaultParentChildConfig: ParentChildConfig = {
+  chunkForContext: 'paragraph',
+  parent: {
+    delimiter: '\\n\\n',
+    maxLength: 4000,
+  },
+  child: {
+    delimiter: '\\n\\n',
+    maxLength: 4000,
+  },
+  rules: [],
+}
+
 const StepTwo = ({
   isSetting,
   documentDetail,
@@ -186,18 +199,7 @@ const StepTwo = ({
   })()
   const [isCreating, setIsCreating] = useState(false)
 
-  const [parentChildConfig, setParentChildConfig] = useState<ParentChildConfig>({
-    chunkForContext: 'paragraph',
-    parent: {
-      delimiter: '\\n\\n',
-      maxLength: 4000,
-    },
-    child: {
-      delimiter: '\\n\\n',
-      maxLength: 4000,
-    },
-    rules: [],
-  })
+  const [parentChildConfig, setParentChildConfig] = useState<ParentChildConfig>(defaultParentChildConfig)
 
   const scrollHandle = (e: Event) => {
     if ((e.target as HTMLDivElement).scrollTop > 0)
@@ -248,6 +250,7 @@ const StepTwo = ({
       setOverlap(defaultConfig.segmentation.chunk_overlap)
       setRules(defaultConfig.pre_processing_rules)
     }
+    setParentChildConfig(defaultParentChildConfig)
   }
 
   const fetchFileIndexingEstimate = async (docForm = DocForm.TEXT, language?: string) => {
@@ -659,24 +662,24 @@ const StepTwo = ({
                       <RiSearchEyeLine className='h-4 w-4 mr-1.5' />
                       {t('datasetCreation.stepTwo.previewChunk')}
                     </Button>
-                    <Button variant={'ghost'} disabled>
+                    <Button variant={'ghost'} onClick={resetRules}>
                       {t('datasetCreation.stepTwo.reset')}
                     </Button>
                   </>
                 }
               >
                 <div className='space-y-4'>
-                  <div className='flex gap-2'>
+                  <div className='flex gap-3'>
                     <DelimiterInput
                       value={segmentIdentifier}
                       onChange={e => setSegmentIdentifier(e.target.value)}
                     />
                     <MaxLengthInput
-                      defaultValue={max}
+                      value={max}
                       onChange={setMax}
                     />
                     <OverlapInput
-                      defaultValue={overlap}
+                      value={overlap}
                       min={1}
                       onChange={setOverlap}
                     />
@@ -749,7 +752,7 @@ const StepTwo = ({
                             })}
                           />
                           <MaxLengthInput
-                            defaultValue={parentChildConfig.parent.maxLength}
+                            value={parentChildConfig.parent.maxLength}
                             onChange={value => setParentChildConfig({
                               ...parentChildConfig,
                               parent: {
@@ -775,11 +778,11 @@ const StepTwo = ({
                     />
                   </div>
 
-                  <div className='space-y-2'>
+                  <div className='space-y-4'>
                     <TextLabel>
                       {t('datasetCreation.stepTwo.childChunkForRetrieval')}
                     </TextLabel>
-                    <div className='flex gap-2 mt-2'>
+                    <div className='flex gap-3 mt-2'>
                       <DelimiterInput
                         value={parentChildConfig.child.delimiter}
                         onChange={e => setParentChildConfig({
@@ -791,8 +794,7 @@ const StepTwo = ({
                         })}
                       />
                       <MaxLengthInput
-                        defaultValue={parentChildConfig.child.maxLength}
-
+                        value={parentChildConfig.child.maxLength}
                         onChange={value => setParentChildConfig({
                           ...parentChildConfig,
                           child: {
@@ -803,20 +805,22 @@ const StepTwo = ({
                       />
                     </div>
 
-                    <TextLabel>
-                      {t('datasetCreation.stepTwo.rules')}
-                    </TextLabel>
                     <div className='space-y-2'>
-                      {rules.map(rule => (
-                        <div key={rule.id} className={s.ruleItem} onClick={() => {
-                          ruleChangeHandle(rule.id)
-                        }}>
-                          <Checkbox
-                            checked={rule.enabled}
-                          />
-                          <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
-                        </div>
-                      ))}
+                      <TextLabel>
+                        {t('datasetCreation.stepTwo.rules')}
+                      </TextLabel>
+                      <div className='space-y-2 mt-2'>
+                        {rules.map(rule => (
+                          <div key={rule.id} className={s.ruleItem} onClick={() => {
+                            ruleChangeHandle(rule.id)
+                          }}>
+                            <Checkbox
+                              checked={rule.enabled}
+                            />
+                            <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
+                          </div>
+                        ))}
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index 5aa398f0f2..da0486d204 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -75,7 +75,7 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
     />
     {/** Body */}
     {isActive && <div className='p-3'>{children}
-      {actions && <div className='flex gap-2 mt-3'>
+      {actions && <div className='flex gap-2 mt-4'>
         {actions}
       </div>}
     </div>}
diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index f40a275b04..69f524ea66 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -27,7 +27,7 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
       <div className={classNames(
         'text-center text-[10px] font-semibold uppercase leading-3',
         isActive
-          ? 'text-white'
+          ? 'text-text-primary-on-surface'
           : !isDisabled
             ? 'text-text-tertiary'
             : 'text-text-tertiary opacity-30',
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index 1f0bac376b..749e9e7410 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -122,6 +122,7 @@ const translation = {
     removeUrlEmails: 'Delete all URLs and email addresses',
     removeStopwords: 'Remove stopwords such as "a", "an", "the"',
     preview: 'Confirm & Preview',
+    previewChunk: 'Preview Chunk',
     reset: 'Reset',
     indexMode: 'Index mode',
     qualified: 'High Quality',