diff --git a/web/app/components/datasets/create/file-uploader/index.module.css b/web/app/components/datasets/create/file-uploader/index.module.css
index bf5b7dcaf5..93a7c0e535 100644
--- a/web/app/components/datasets/create/file-uploader/index.module.css
+++ b/web/app/components/datasets/create/file-uploader/index.module.css
@@ -7,14 +7,12 @@
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
-  color: #344054;
 }
 
 .fileUploader .tip {
   font-weight: 400;
   font-size: 12px;
   line-height: 18px;
-  color: #667085;
 }
 
 .uploader {
@@ -22,18 +20,10 @@
   flex-direction: column;
   max-width: 640px;
   min-height: 80px;
-  background: #F9FAFB;
-  border: 1px dashed #EAECF0;
   border-radius: 12px;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
-  color: #667085;
-}
-
-.uploader.dragging {
-  background: #F5F8FF;
-  border: 1px dashed #B2CCFF;
 }
 
 .uploader .draggingCover {
@@ -193,4 +183,4 @@
 
 .file:hover .actionWrapper .remove {
   display: block;
-}
\ No newline at end of file
+}
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index adb4bed0d1..0afa5b38f0 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import useSWR from 'swr'
+import classNames from 'classnames'
 import s from './index.module.css'
 import cn from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
@@ -249,18 +250,18 @@ const FileUploader = ({
         />
       )}
 
-      <div className={cn(s.title, titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
+      <div className={cn(s.title, titleClassName, 'text-text-secondary')}>{t('datasetCreation.stepOne.uploader.title')}</div>
       {!hideUpload && (
 
-        <div ref={dropRef} className={cn(s.uploader, dragging && s.dragging)}>
+        <div ref={dropRef} className={cn(s.uploader, dragging && '', 'bg-components-dropzone-bg border border-components-dropzone-border')}>
           <div className='flex justify-center items-center min-h-6 mb-2'>
-            <span className={s.uploadIcon} />
-            <span>
+            <span className={classNames(s.uploadIcon, 'text-text-tertiary')} />
+            <span className='text-text-secondary'>
               {t('datasetCreation.stepOne.uploader.button')}
               <label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
             </span>
           </div>
-          <div className={s.tip}>{t('datasetCreation.stepOne.uploader.tip', {
+          <div className={classNames(s.tip, 'text-text-tertiary')}>{t('datasetCreation.stepOne.uploader.tip', {
             size: fileUploadConfig.file_size_limit,
             supportTypes: supportTypesShowNames,
           })}</div>
diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx
index f2f869b704..8d9c4d9da3 100644
--- a/web/app/components/datasets/create/index.tsx
+++ b/web/app/components/datasets/create/index.tsx
@@ -123,7 +123,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => {
 
   return (
     <div className='flex flex-col' style={{ height: 'calc(100vh - 56px)' }}>
-      <div className="grow bg-white flex flex-col max-h-full h-full">
+      <div className="grow bg-components-panel-bg flex flex-col max-h-full h-full">
         <Topbar activeIndex={step - 1} />
         <div className={step === 1 ? 'block h-full max-h-full overflow-auto' : 'hidden'}>
           <StepOne
diff --git a/web/app/components/datasets/create/step-one/index.module.css b/web/app/components/datasets/create/step-one/index.module.css
index 4e3cf67cd6..546df9ce71 100644
--- a/web/app/components/datasets/create/step-one/index.module.css
+++ b/web/app/components/datasets/create/step-one/index.module.css
@@ -6,13 +6,11 @@
   font-weight: 600;
   font-size: 18px;
   line-height: 28px;
-  color: #101828;
 }
 
 .form {
   position: relative;
   padding: 12px 64px;
-  background-color: #fff;
 }
 
 .dataSourceItem {
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 643932e9ae..6003b3727f 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -17,6 +17,7 @@ import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import { useProviderContext } from '@/context/provider-context'
 import VectorSpaceFull from '@/app/components/billing/vector-space-full'
+import classNames from '@/utils/classnames'
 
 type IStepOneProps = {
   datasetId?: string
@@ -128,10 +129,10 @@ const StepOne = ({
       <div className='grow overflow-y-auto relative'>
         {
           shouldShowDataSourceTypeList && (
-            <div className={s.stepHeader}>{t('datasetCreation.steps.one')}</div>
+            <div className={classNames(s.stepHeader, 'text-text-secondary')}>{t('datasetCreation.steps.one')}</div>
           )
         }
-        <div className={s.form}>
+        <div className={classNames(s.form)}>
           {
             shouldShowDataSourceTypeList && (
               <div className='flex items-center mb-8 flex-wrap gap-y-4'>
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index 5a3d8536dc..60513f9b9b 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -992,19 +992,21 @@ const StepTwo = ({
             title='Preview'
           >
             <div className='flex items-center gap-2'>
-              <PreviewDocumentPicker
-                files={files as Array<Required<CustomFile>>}
-                onChange={(selected) => {
-                  currentEstimateMutation.reset()
-                  setPreviewFile(selected)
-                  currentEstimateMutation.mutate()
-                }}
-                value={previewFile!}
-              />
-              <Badge text={t(
-                'datasetCreation.stepTwo.previewChunkCount', {
-                  count: estimate?.preview.length || estimate?.qa_preview?.length || 0,
-                }) as string} />
+              {files.length && <>
+                <PreviewDocumentPicker
+                  files={files as Array<Required<CustomFile>>}
+                  onChange={(selected) => {
+                    currentEstimateMutation.reset()
+                    setPreviewFile(selected)
+                    currentEstimateMutation.mutate()
+                  }}
+                  value={previewFile!}
+                />
+                <Badge text={t(
+                  'datasetCreation.stepTwo.previewChunkCount', {
+                    count: estimate?.preview.length || estimate?.qa_preview?.length || 0,
+                  }) as string} />
+              </>}
             </div>
           </PreviewHeader>}
           className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll')}
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index 526ae870ad..74be673efd 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -18,9 +18,9 @@ const STEP_T_MAP: Record<number, string> = {
 export const Topbar: FC<TopbarProps> = (props) => {
   const { className, ...rest } = props
   const { t } = useTranslation()
-  return <div className={classNames('flex items-center justify-between relative', className)}>
+  return <div className={classNames('flex items-center justify-between relative border-b border-b-divider-subtle', className)}>
     <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
-      <RiArrowLeftLine className='size-4 mr-2' />
+      <RiArrowLeftLine className='size-4 mr-2 text-text-primary' />
       <p className="text-text-primary text-[13px] font-semibold uppercase leading-none">
         {t('datasetCreation.steps.header.creation')}
       </p>