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..f006160ef0 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -174,7 +174,20 @@ const StepTwo = ({
   )
 
   const [previewFile, setPreviewFile] = useState<DocumentItem>(
-    (datasetId && documentDetail) ? documentDetail.file : files[0],
+    (datasetId && documentDetail)
+      ? documentDetail.file
+      : files[0],
+  )
+  const [previewNotionPage, setPreviewNotionPage] = useState<NotionPage>(
+    (datasetId && documentDetail)
+      ? documentDetail.notion_page
+      : notionPages[0],
+  )
+
+  const [previewWebsitePage, setPreviewWebsitePage] = useState<CrawlResultItem>(
+    (datasetId && documentDetail)
+      ? documentDetail.website_page
+      : websitePages[0],
   )
 
   // QA Related
@@ -252,7 +265,7 @@ const StepTwo = ({
     docForm,
     docLanguage,
     dataSourceType: DataSourceType.NOTION,
-    notionPages,
+    notionPages: [previewNotionPage],
     indexingTechnique: getIndexing_technique() as any,
     processRule: getProcessRule(),
     dataset_id: datasetId || '',
@@ -262,7 +275,7 @@ const StepTwo = ({
     docForm,
     docLanguage,
     dataSourceType: DataSourceType.WEB,
-    websitePages,
+    websitePages: [previewWebsitePage],
     crawlOptions,
     websiteCrawlProvider,
     websiteCrawlJobId,
@@ -992,15 +1005,63 @@ 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!}
-              />
+              {dataSourceType === DataSourceType.FILE
+                && <PreviewDocumentPicker
+                  files={files as Array<Required<CustomFile>>}
+                  onChange={(selected) => {
+                    currentEstimateMutation.reset()
+                    setPreviewFile(selected)
+                    currentEstimateMutation.mutate()
+                  }}
+                  value={previewFile}
+                />
+              }
+              {dataSourceType === DataSourceType.NOTION
+                && <PreviewDocumentPicker
+                  files={
+                    notionPages.map(page => ({
+                      id: page.page_id,
+                      name: page.page_name,
+                      extension: 'md',
+                    }))
+                  }
+                  onChange={(selected) => {
+                    currentEstimateMutation.reset()
+                    const selectedPage = notionPages.find(page => page.page_id === selected.id)
+                    setPreviewNotionPage(selectedPage!)
+                    currentEstimateMutation.mutate()
+                  }}
+                  value={{
+                    id: previewNotionPage?.page_id || '',
+                    name: previewNotionPage?.page_name || '',
+                    extension: 'md',
+                  }}
+                />
+              }
+              {dataSourceType === DataSourceType.WEB
+                && <PreviewDocumentPicker
+                  files={
+                    websitePages.map(page => ({
+                      id: page.source_url,
+                      name: page.title,
+                      extension: 'md',
+                    }))
+                  }
+                  onChange={(selected) => {
+                    currentEstimateMutation.reset()
+                    const selectedPage = websitePages.find(page => page.source_url === selected.id)
+                    setPreviewWebsitePage(selectedPage!)
+                    currentEstimateMutation.mutate()
+                  }}
+                  value={
+                    {
+                      id: previewWebsitePage?.source_url || '',
+                      name: previewWebsitePage?.title || '',
+                      extension: 'md',
+                    }
+                  }
+                />
+              }
               <Badge text={t(
                 'datasetCreation.stepTwo.previewChunkCount', {
                   count: estimate?.preview.length || estimate?.qa_preview?.length || 0,
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>