diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index 0177177665..2a35b75471 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -54,7 +54,7 @@ const PreviewDocumentPicker: FC<Props> = ({
           <FileIcon name={name} extension={extension} size='md' />
           <div className='flex flex-col items-start ml-1'>
             <div className='flex items-center space-x-0.5'>
-              <span className={cn('system-md-semibold max-w-[200px] overflow-clip text-text-primary')}> {name || '--'}</span>
+              <span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}> {name || '--'}</span>
               <ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
             </div>
           </div>
diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index 49f090786e..9236858ae4 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
       <OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
         title={t('dataset.retrieval.invertedIndex.title')}
         description={t('dataset.retrieval.invertedIndex.description')} isActive
-        activeHeaderClassName='dataset-option-card-purple-gradient'
+        activeHeaderClassName='bg-dataset-option-card-purple-gradient'
       >
         <RetrievalParamConfig
           type={RETRIEVE_METHOD.invertedIndex}
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index fab0cad597..aeeb7235e4 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -69,7 +69,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.semantic,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='dataset-option-card-purple-gradient'
+          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.semantic}
@@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.fullText,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='dataset-option-card-purple-gradient'
+          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.fullText}
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index 64f2570b4a..b3ee0dc739 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -303,7 +303,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
                 </>
               )}
               {indexingStatusDetail.indexing_status === 'completed' && (
-                <RiCheckboxCircleFill className='shrink-0 size-4' />
+                <RiCheckboxCircleFill className='shrink-0 size-4 text-text-success' />
               )}
             </div>
           </div>
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index a5f5a48f85..5c492c7902 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -122,9 +122,9 @@ const StepOne = ({
       return true
     if (isShowVectorSpaceFull)
       return true
-
     return false
-  }, [files])
+  }, [files, isShowVectorSpaceFull])
+
   return (
     <div className='flex w-full h-full'>
       <div className='grow overflow-y-auto relative'>
@@ -203,7 +203,7 @@ const StepOne = ({
               )}
               <div className="flex justify-end gap-2 max-w-[640px]">
                 {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
-                <Button disabled={!nextDisabled} variant='primary' onClick={onStepChange}>
+                <Button disabled={nextDisabled} variant='primary' onClick={onStepChange}>
                   <span className="flex gap-0.5 px-[10px]">
                     <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
                     <RiArrowRightLine className="size-4" />
@@ -229,7 +229,15 @@ const StepOne = ({
                       <VectorSpaceFull />
                     </div>
                   )}
-                  <Button disabled={isShowVectorSpaceFull || !notionPages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+                  <div className="flex justify-end gap-2 max-w-[640px]">
+                    {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                    <Button disabled={isShowVectorSpaceFull || !notionPages.length} variant='primary' onClick={onStepChange}>
+                      <span className="flex gap-0.5 px-[10px]">
+                        <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                        <RiArrowRightLine className="size-4" />
+                      </span>
+                    </Button>
+                  </div>
                 </>
               )}
             </>
@@ -252,7 +260,15 @@ const StepOne = ({
                   <VectorSpaceFull />
                 </div>
               )}
-              <Button disabled={isShowVectorSpaceFull || !websitePages.length} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+              <div className="flex justify-end gap-2 max-w-[640px]">
+                {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                <Button disabled={isShowVectorSpaceFull || !websitePages.length} variant='primary' onClick={onStepChange}>
+                  <span className="flex gap-0.5 px-[10px]">
+                    <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                    <RiArrowRightLine className="size-4" />
+                  </span>
+                </Button>
+              </div>
             </>
           )}
           {!datasetId && (
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 bb339b4a41..80bdce9c07 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -1,6 +1,5 @@
 import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
 import Image from 'next/image'
-import Effect from '../assets/option-card-effect-blue.svg'
 import classNames from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
@@ -25,7 +24,7 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
     isActive && activeClassName,
   )}>
     <div className='size-14 flex items-center justify-center relative overflow-hidden'>
-      {isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
+      {isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
       <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
         {icon}
       </div>
@@ -58,10 +57,10 @@ export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
   const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
   return <div
     className={classNames(
-      'rounded-xl border',
+      'rounded-xl border bg-components-option-card-option-bg',
       (isActive && !noHighlight)
-        ? 'border-components-option-card-option-selected-border bg-components-panel-bg'
-        : 'border-components-option-card-option-border bg-components-option-card-option-bg',
+        ? 'border-components-option-card-option-selected-border'
+        : 'border-components-option-card-option-border',
       disabled && 'opacity-50',
       className,
     )}
diff --git a/web/app/components/datasets/create/stepper/index.tsx b/web/app/components/datasets/create/stepper/index.tsx
index 4c120e4d48..30cf9bd0e4 100644
--- a/web/app/components/datasets/create/stepper/index.tsx
+++ b/web/app/components/datasets/create/stepper/index.tsx
@@ -1,4 +1,4 @@
-import type { FC } from 'react'
+import { type FC, Fragment } from 'react'
 import type { Step } from './step'
 import { StepperStep } from './step'
 
@@ -7,28 +7,21 @@ export type StepperProps = {
   activeIndex: number
 }
 
-function join<T, R = T>(array: T[], sep: R): Array<T | R> {
-  return array.reduce((acc, item, index) => {
-    if (index === 0)
-      return [item]
-
-    return acc.concat([sep, item])
-  }, [] as Array<T | R>)
-}
-
 export const Stepper: FC<StepperProps> = (props) => {
   const { steps, activeIndex } = props
   return <div className='flex items-center gap-3'>
-    {join(
-      steps.map((step, index) => (
-        <StepperStep
-          key={index}
-          {...step}
-          activeIndex={activeIndex}
-          index={index}
-        />
-      )),
-      <div className="w-4 h-px bg-text-quaternary" />,
-    )}
+    {steps.map((step, index) => {
+      const isLast = index === steps.length - 1
+      return (
+        <Fragment key={index}>
+          <StepperStep
+            {...step}
+            activeIndex={activeIndex}
+            index={index}
+          />
+          {!isLast && <div className="w-4 h-px bg-text-quaternary" />}
+        </Fragment>
+      )
+    })}
   </div>
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 84ae0a94c1..95b6e144ba 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -102,6 +102,9 @@ const config = {
         'dataset-chunk-process-error-bg': 'var(--color-dataset-chunk-process-error-bg)',
         'dataset-chunk-detail-card-hover-bg': 'var(--color-dataset-chunk-detail-card-hover-bg)',
         'dataset-child-chunk-expand-btn-bg': 'var(--color-dataset-child-chunk-expand-btn-bg)',
+        'dataset-option-card-blue-gradient': 'var(--color-dataset-option-card-blue-gradient)',
+        'dataset-option-card-purple-gradient': 'var(--color-dataset-option-card-purple-gradient)',
+        'dataset-option-card-orange-gradient': 'var(--color-dataset-option-card-orange-gradient)',
         'dataset-chunk-list-empty-bg': 'var(--color-dataset-chunk-list-empty-bg)',
       },
       lineClamp: {
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 631d13cd78..abe5513077 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -6,8 +6,8 @@ html[data-theme="dark"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #24252E 0%, #1E1E21 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #25242E 0%, #1E1E21 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #2B2322 0%, #1E1E21 100%);
+  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #24252E 0%, #1E1E21 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #25242E 0%, #1E1E21 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
   --color-dataset-chunk-list-empty-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
 }
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 5477c1f23d..26ba41bc31 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -6,8 +6,8 @@ html[data-theme="light"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
-  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
-  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #F0EEFA 0%, #F9FAFB 100%);
-  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #F8F2EE 0%, #F9FAFB 100%);
+  --color-dataset-option-card-blue-gradient: linear-gradient(90deg, #F2F4F7 0%, #F9FAFB 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(90deg, #F0EEFA 0%, #F9FAFB 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
   --color-dataset-chunk-list-empty-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
 }