diff --git a/web/app/components/base/button/index.tsx b/web/app/components/base/button/index.tsx
index 3bd4b21a5e..b467c494b0 100644
--- a/web/app/components/base/button/index.tsx
+++ b/web/app/components/base/button/index.tsx
@@ -34,10 +34,11 @@ export type ButtonProps = {
   destructive?: boolean
   loading?: boolean
   styleCss?: CSSProperties
+  spinnerClassName?: string
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, destructive, loading, styleCss, children, ...props }, ref) => {
+  ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ...props }, ref) => {
     return (
       <button
         type='button'
@@ -50,7 +51,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       >
         {children}
-        {loading && <Spinner loading={loading} className='!text-white !h-3 !w-3 !border-2 !ml-1' />}
+        {loading && <Spinner loading={loading} className={classNames('!text-white !h-3 !w-3 !border-2 !ml-1', spinnerClassName)} />}
       </button>
     )
   },
diff --git a/web/app/components/base/icons/src/public/other/RowStruct.json b/web/app/components/base/icons/src/public/other/RowStruct.json
index 0d1ef43f4f..93c8068601 100644
--- a/web/app/components/base/icons/src/public/other/RowStruct.json
+++ b/web/app/components/base/icons/src/public/other/RowStruct.json
@@ -20,7 +20,7 @@
 					"width": "16",
 					"height": "16",
 					"rx": "5",
-					"fill": "#F2F4F7"
+					"fill": "currentColor"
 				},
 				"children": []
 			},
@@ -33,7 +33,7 @@
 					"width": "233",
 					"height": "10",
 					"rx": "3",
-					"fill": "#EAECF0"
+					"fill": "currentColor"
 				},
 				"children": []
 			},
@@ -46,7 +46,7 @@
 					"width": "345",
 					"height": "6",
 					"rx": "3",
-					"fill": "#F2F4F7"
+					"fill": "currentColor"
 				},
 				"children": []
 			}
diff --git a/web/app/components/base/notion-page-selector/workspace-selector/index.module.css b/web/app/components/base/notion-page-selector/workspace-selector/index.module.css
deleted file mode 100644
index 7939c14628..0000000000
--- a/web/app/components/base/notion-page-selector/workspace-selector/index.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.popup {
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  z-index: 10;
-}
\ No newline at end of file
diff --git a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
index 0d0619c693..f83389f96c 100644
--- a/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/workspace-selector/index.tsx
@@ -4,8 +4,6 @@ import { Fragment } from 'react'
 import { Menu, Transition } from '@headlessui/react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import NotionIcon from '../../notion-icon'
-import s from './index.module.css'
-import cn from '@/utils/classnames'
 import type { DataSourceNotionWorkspace } from '@/models/common'
 
 type WorkspaceSelectorProps = {
@@ -26,14 +24,14 @@ export default function WorkspaceSelector({
       {
         ({ open }) => (
           <>
-            <Menu.Button className={`flex items-center justify-center h-7 rounded-md hover:bg-gray-50 ${open && 'bg-gray-50'} cursor-pointer`}>
+            <Menu.Button className={`flex items-center justify-center h-7 p-1 pr-2 rounded-md hover:bg-state-base-hover ${open && 'bg-state-base-hover'} cursor-pointer`}>
               <NotionIcon
-                className='ml-1 mr-2'
+                className='mr-2'
                 src={currentWorkspace?.workspace_icon}
                 name={currentWorkspace?.workspace_name}
               />
               <div className='mr-1 w-[90px] text-left text-sm font-medium text-text-secondary truncate' title={currentWorkspace?.workspace_name}>{currentWorkspace?.workspace_name}</div>
-              <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-text-accent'>{currentWorkspace?.pages.length}</div>
+              {/* <div className='mr-1 px-1 h-[18px] bg-primary-50 rounded-lg text-xs font-medium text-text-accent'>{currentWorkspace?.pages.length}</div> */}
               <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
             </Menu.Button>
             <Transition
@@ -46,19 +44,16 @@ export default function WorkspaceSelector({
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items
-                className={cn(
-                  s.popup,
-                  `absolute left-0 top-8 w-80
-                  origin-top-right rounded-lg bg-white
-                  border-[0.5px] border-gray-200`,
-                )}
+                className='absolute left-0 top-8 z-10 w-80
+                  origin-top-right rounded-lg bg-components-panel-bg-blur
+                  border-[0.5px] border-components-panel-border shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'
               >
                 <div className="p-1 max-h-50 overflow-auto">
                   {
                     items.map(item => (
                       <Menu.Item key={item.workspace_id}>
                         <div
-                          className='flex items-center px-3 h-9 hover:bg-gray-50 cursor-pointer'
+                          className='flex items-center px-3 h-9 rounded-lg hover:bg-state-base-hover cursor-pointer'
                           onClick={() => onSelect(item.workspace_id)}
                         >
                           <NotionIcon
@@ -66,8 +61,8 @@ export default function WorkspaceSelector({
                             src={item.workspace_icon}
                             name={item.workspace_name}
                           />
-                          <div className='grow mr-2 text-sm text-gray-700 truncate' title={item.workspace_name}>{item.workspace_name}</div>
-                          <div className='shrink-0 text-xs font-medium text-primary-600'>
+                          <div className='grow mr-2 system-sm-medium text-text-secondary truncate' title={item.workspace_name}>{item.workspace_name}</div>
+                          <div className='shrink-0 system-xs-medium text-text-accent'>
                             {item.pages.length} {t('common.dataSource.notion.selector.pageSelected')}
                           </div>
                         </div>
diff --git a/web/app/components/datasets/create/file-preview/index.module.css b/web/app/components/datasets/create/file-preview/index.module.css
index 929002e1e2..ee6ba96240 100644
--- a/web/app/components/datasets/create/file-preview/index.module.css
+++ b/web/app/components/datasets/create/file-preview/index.module.css
@@ -1,43 +1,29 @@
 .filePreview {
-    @apply flex flex-col border-l border-gray-200 shrink-0;
+    @apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
     width: 100%;
-    background-color: #fcfcfd;
   }
   
   .previewHeader {
-    @apply border-b border-gray-200 shrink-0;
+    @apply border-b border-divider-subtle shrink-0;
     margin: 42px 32px 0;
     padding-bottom: 16px;
   }
   
   .previewHeader .title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #101828;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 28px;
+    @apply flex justify-between items-center text-text-primary;
   }
   
   .previewHeader .fileName {
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    color: #1D2939;
+    @apply text-text-tertiary;
   }
   
   .previewHeader .filetype {
-    color: #667085;
+    @apply text-text-tertiary;
   }
   
   .previewContent {
-    @apply overflow-y-auto grow;
+    @apply overflow-y-auto grow text-text-secondary;
     padding: 20px 32px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #344054;
   }
   
   .previewContent .loading {
@@ -46,6 +32,7 @@
     background: #f9fafb center no-repeat url(../assets/Loading.svg);
     background-size: contain;
   }
+  
   .fileContent {
     white-space: pre-line;
     word-break: break-all;
diff --git a/web/app/components/datasets/create/file-preview/index.tsx b/web/app/components/datasets/create/file-preview/index.tsx
index cb1f1d6908..054f77f1ff 100644
--- a/web/app/components/datasets/create/file-preview/index.tsx
+++ b/web/app/components/datasets/create/file-preview/index.tsx
@@ -46,13 +46,13 @@ const FilePreview = ({
   return (
     <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
-        <div className={cn(s.title)}>
+        <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('datasetCreation.stepOne.filePreview')}</span>
           <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
-        <div className={cn(s.fileName)}>
+        <div className={cn(s.fileName, 'system-xs-medium')}>
           <span>{getFileName(file)}</span><span className={cn(s.filetype)}>.{file?.extension}</span>
         </div>
       </div>
diff --git a/web/app/components/datasets/create/notion-page-preview/index.module.css b/web/app/components/datasets/create/notion-page-preview/index.module.css
index 12d3747356..6f2e5d9fa5 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.module.css
+++ b/web/app/components/datasets/create/notion-page-preview/index.module.css
@@ -1,54 +1,34 @@
 .filePreview {
-    @apply flex flex-col border-l border-gray-200 shrink-0;
-    width: 528px;
-    background-color: #fcfcfd;
-  }
-  
-  .previewHeader {
-    @apply border-b border-gray-200 shrink-0;
-    margin: 42px 32px 0;
-    padding-bottom: 16px;
-  }
-  
-  .previewHeader .title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #101828;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 28px;
-  }
-  
-  .previewHeader .fileName {
-    display: flex;
-    align-items: center;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    color: #1D2939;
-  }
-  
-  .previewHeader .filetype {
-    color: #667085;
-  }
-  
-  .previewContent {
-    @apply overflow-y-auto grow;
-    padding: 20px 32px;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 24px;
-    color: #344054;
-  }
-  
-  .previewContent .loading {
-    width: 100%;
-    height: 180px;
-    background: #f9fafb center no-repeat url(../assets/Loading.svg);
-    background-size: contain;
-  }
-  .fileContent {
-    white-space: pre-line;
-  }
+  @apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
+  width: 528px;
+}
+
+.previewHeader {
+  @apply border-b border-divider-subtle shrink-0;
+  margin: 42px 32px 0;
+  padding-bottom: 16px;
+}
+
+.previewHeader .title {
+  @apply flex justify-between items-center text-text-primary;
+}
+
+.previewHeader .fileName {
+  @apply flex items-center text-text-tertiary;
+}
+
+.previewContent {
+  @apply overflow-y-auto grow text-text-secondary;
+  padding: 20px 32px;
+}
+
+.previewContent .loading {
+  width: 100%;
+  height: 180px;
+  background: #f9fafb center no-repeat url(../assets/Loading.svg);
+  background-size: contain;
+}
+.fileContent {
+  white-space: pre-line;
+}
   
\ No newline at end of file
diff --git a/web/app/components/datasets/create/notion-page-preview/index.tsx b/web/app/components/datasets/create/notion-page-preview/index.tsx
index f658f213e8..32073719ca 100644
--- a/web/app/components/datasets/create/notion-page-preview/index.tsx
+++ b/web/app/components/datasets/create/notion-page-preview/index.tsx
@@ -46,13 +46,13 @@ const NotionPagePreview = ({
   return (
     <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
-        <div className={cn(s.title)}>
+        <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
           <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
-        <div className={cn(s.fileName)}>
+        <div className={cn(s.fileName, 'system-xs-medium')}>
           <NotionIcon
             className='shrink-0 mr-1'
             type='page'
@@ -61,7 +61,7 @@ const NotionPagePreview = ({
           {currentPage?.page_name}
         </div>
       </div>
-      <div className={cn(s.previewContent)}>
+      <div className={cn(s.previewContent, 'body-md-regular')}>
         {loading && <div className={cn(s.loading)} />}
         {!loading && (
           <div className={cn(s.fileContent, 'body-md-regular')}>{previewContent}</div>
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 9658724a89..1ade631793 100644
--- a/web/app/components/datasets/create/step-one/index.module.css
+++ b/web/app/components/datasets/create/step-one/index.module.css
@@ -1,7 +1,4 @@
 .stepHeader {
-  position: sticky;
-  top: 0;
-  left: 0;
   padding: 42px 64px 12px 0;
 }
 
@@ -21,7 +18,7 @@
 
 .dataSourceItem.active {
   @apply bg-components-option-card-option-selected-bg border border-components-option-card-option-selected-border
-  shadow-emulate-border shadow-components-option-card-option-selected-border;
+  ring-[0.5px] ring-components-option-card-option-selected-border;
 }
 
 .dataSourceItem.disabled,
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index c5c79d4b62..017bcc3f22 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -138,7 +138,7 @@ const StepOne = ({
           <div className={classNames(s.form)}>
             {
               shouldShowDataSourceTypeList && (
-                <div className={classNames(s.stepHeader, 'z-10 text-text-secondary system-md-semibold')}>
+                <div className={classNames(s.stepHeader, 'text-text-secondary system-md-semibold')}>
                   {t('datasetCreation.steps.one')}
                 </div>
               )
diff --git a/web/app/components/datasets/create/website/base/crawled-result-item.tsx b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
index 5531d3e140..40235403e2 100644
--- a/web/app/components/datasets/create/website/base/crawled-result-item.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result-item.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import cn from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
+import Button from '@/app/components/base/button'
 
 type Props = {
   payload: CrawlResultItemType
@@ -27,13 +28,32 @@ const CrawledResultItem: FC<Props> = ({
     onCheckChange(!isChecked)
   }, [isChecked, onCheckChange])
   return (
-    <div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
-      <div className='flex items-center h-5'>
-        <Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
-        <div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
-        <div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
+    <div className={cn(isPreview ? 'bg-state-base-active' : 'group hover:bg-state-base-hover', 'rounded-lg p-2 cursor-pointer')}>
+      <div className='relative flex'>
+        <div className='h-5 flex items-center'>
+          <Checkbox className='mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
+        </div>
+        <div className='flex flex-col grow min-w-0'>
+          <div
+            className='truncate text-sm font-medium text-text-secondary'
+            title={payload.title}
+          >
+            {payload.title}
+          </div>
+          <div
+            className='mt-0.5 truncate text-xs text-text-tertiary'
+            title={payload.source_url}
+          >
+            {payload.source_url}
+          </div>
+        </div>
+        <Button
+          onClick={onPreview}
+          className='hidden group-hover:block group-hover:absolute top-0 right-0 h-6 px-1.5 text-xs font-medium uppercase'
+        >
+          {t('datasetCreation.stepOne.website.preview')}
+        </Button>
       </div>
-      <div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
     </div>
   )
 }
diff --git a/web/app/components/datasets/create/website/base/crawled-result.tsx b/web/app/components/datasets/create/website/base/crawled-result.tsx
index d5c8d1b80a..e1394b9e43 100644
--- a/web/app/components/datasets/create/website/base/crawled-result.tsx
+++ b/web/app/components/datasets/create/website/base/crawled-result.tsx
@@ -57,17 +57,19 @@ const CrawledResult: FC<Props> = ({
   }, [list, onPreview])
 
   return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+    <div className={cn(className, 'border-t-[0.5px] border-divider-regular shadow-xs shadow-shadow-shadow-3')}>
+      <div className='flex items-center justify-between h-[34px] px-4'>
         <CheckboxWithLabel
           isChecked={isCheckAll}
           onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
-          labelClassName='!font-medium'
+          labelClassName='system-[13px] leading-[16px] font-medium text-text-secondary'
         />
-        <div>{t(`${I18N_PREFIX}.scrapTimeInfo`, {
-          total: list.length,
-          time: usedTime.toFixed(1),
-        })}</div>
+        <div className='text-xs text-text-tertiary'>
+          {t(`${I18N_PREFIX}.scrapTimeInfo`, {
+            total: list.length,
+            time: usedTime.toFixed(1),
+          })}
+        </div>
       </div>
       <div className='p-2'>
         {list.map((item, index) => (
diff --git a/web/app/components/datasets/create/website/base/crawling.tsx b/web/app/components/datasets/create/website/base/crawling.tsx
index ee26e7671a..683a4b5a0a 100644
--- a/web/app/components/datasets/create/website/base/crawling.tsx
+++ b/web/app/components/datasets/create/website/base/crawling.tsx
@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
 import { RowStruct } from '@/app/components/base/icons/src/public/other'
 
 type Props = {
@@ -19,15 +18,16 @@ const Crawling: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
+    <div className={className}>
+      <div className='flex items-center h-[34px] px-4 shadow-xs shadow-shadow-shadow-3
+        border-y-[0.5px] border-divider-regular text-xs text-text-tertiary'>
         {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
       </div>
 
       <div className='p-2'>
         {['', '', '', ''].map((item, index) => (
           <div className='py-[5px]' key={index}>
-            <RowStruct />
+            <RowStruct className='text-text-quaternary' />
           </div>
         ))}
       </div>
diff --git a/web/app/components/datasets/create/website/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index f061c4624e..5bf4d228dc 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -16,13 +16,13 @@ const ErrorMessage: FC<Props> = ({
   errorMsg,
 }) => {
   return (
-    <div className={cn(className, 'py-2 px-4 border-t border-gray-200 bg-[#FFFAEB]')}>
+    <div className={cn(className, 'py-2 px-4 border-t border-divider-subtle bg-dataset-crawler-error-message-bg')}>
       <div className='flex items-center h-5'>
         <AlertTriangle className='mr-2 w-4 h-4 text-text-warning-secondary' />
-        <div className='text-sm font-medium text-[#DC6803]'>{title}</div>
+        <div className='system-md-medium text-text-warning'>{title}</div>
       </div>
       {errorMsg && (
-        <div className='mt-1 pl-6 leading-[18px] text-xs font-normal text-gray-700'>{errorMsg}</div>
+        <div className='mt-1 pl-6 system-xs-regular text-text-secondary'>{errorMsg}</div>
       )}
     </div>
   )
diff --git a/web/app/components/datasets/create/website/base/field.tsx b/web/app/components/datasets/create/website/base/field.tsx
index 5b5ca90c5d..013b351ca8 100644
--- a/web/app/components/datasets/create/website/base/field.tsx
+++ b/web/app/components/datasets/create/website/base/field.tsx
@@ -31,8 +31,8 @@ const Field: FC<Props> = ({
   return (
     <div className={cn(className)}>
       <div className='flex py-[7px]'>
-        <div className={cn(labelClassName, 'flex items-center h-[18px] text-[13px] font-medium text-gray-900')}>{label} </div>
-        {isRequired && <span className='ml-0.5 text-xs font-semibold text-[#D92D20]'>*</span>}
+        <div className={cn(labelClassName, 'flex items-center h-[16px] text-[13px] font-semibold text-text-secondary')}>{label} </div>
+        {isRequired && <span className='ml-0.5 text-xs font-semibold text-text-destructive'>*</span>}
         {tooltip && (
           <Tooltip
             popupContent={
diff --git a/web/app/components/datasets/create/website/base/input.tsx b/web/app/components/datasets/create/website/base/input.tsx
index 7d2d2b609f..8a487af796 100644
--- a/web/app/components/datasets/create/website/base/input.tsx
+++ b/web/app/components/datasets/create/website/base/input.tsx
@@ -50,7 +50,12 @@ const Input: FC<Props> = ({
       {...otherOption}
       value={value}
       onChange={handleChange}
-      className='flex h-9 w-full py-1 px-2 rounded-lg text-xs leading-normal bg-gray-100 caret-primary-600 hover:bg-gray-100 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none focus:bg-gray-50 placeholder:text-gray-400'
+      className='flex h-8 w-full p-2 rounded-lg system-xs-regular text-components-input-text-filled bg-components-input-bg-normal
+      caret-[#295eff] border border-transparent
+        hover:bg-components-input-bg-hover hover:border hover:border-components-input-border-hover
+        focus-visible:outline-none focus:bg-components-inout-border-active focus:border focus:border-components-input-border-active
+        focus:shadow-xs focus:shadow-shadow-shadow-3
+        placeholder:text-components-input-text-placeholder'
       placeholder={placeholder}
     />
   )
diff --git a/web/app/components/datasets/create/website/base/options-wrap.tsx b/web/app/components/datasets/create/website/base/options-wrap.tsx
index 652401a20f..7f85b75649 100644
--- a/web/app/components/datasets/create/website/base/options-wrap.tsx
+++ b/web/app/components/datasets/create/website/base/options-wrap.tsx
@@ -3,8 +3,8 @@ import { useBoolean } from 'ahooks'
 import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiEqualizer2Line } from '@remixicon/react'
 import cn from '@/utils/classnames'
-import { Settings04 } from '@/app/components/base/icons/src/vender/line/general'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -34,14 +34,14 @@ const OptionsWrap: FC<Props> = ({
   return (
     <div className={cn(className, !fold ? 'mb-0' : 'mb-3')}>
       <div
-        className='flex justify-between items-center h-[26px] py-1 cursor-pointer select-none'
+        className='flex items-center gap-x-1 h-[26px] py-1 cursor-pointer select-none'
         onClick={foldToggle}
       >
-        <div className='flex items-center text-gray-700'>
-          <Settings04 className='mr-1 w-4 h-4' />
-          <div className='text-[13px] font-semibold text-gray-800 uppercase'>{t(`${I18N_PREFIX}.options`)}</div>
+        <div className='flex items-center grow'>
+          <RiEqualizer2Line className='mr-1 w-4 h-4 text-text-secondary' />
+          <span className='text-[13px] leading-[16px] font-semibold text-text-secondary uppercase'>{t(`${I18N_PREFIX}.options`)}</span>
         </div>
-        <ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 text-gray-500')} />
+        <ChevronRight className={cn(!fold && 'rotate-90', 'w-4 h-4 shrink-0 text-text-tertiary')} />
       </div>
       {!fold && (
         <div className='mb-4'>
diff --git a/web/app/components/datasets/create/website/base/url-input.tsx b/web/app/components/datasets/create/website/base/url-input.tsx
index e6b0475874..b7dc9bfca5 100644
--- a/web/app/components/datasets/create/website/base/url-input.tsx
+++ b/web/app/components/datasets/create/website/base/url-input.tsx
@@ -28,7 +28,7 @@ const UrlInput: FC<Props> = ({
   }, [isRunning, onRun, url])
 
   return (
-    <div className='flex items-center justify-between'>
+    <div className='flex items-center justify-between gap-x-2'>
       <Input
         value={url}
         onChange={handleUrlChange}
@@ -37,8 +37,8 @@ const UrlInput: FC<Props> = ({
       <Button
         variant='primary'
         onClick={handleOnRun}
-        className='ml-2'
         loading={isRunning}
+        spinnerClassName='!ml-0'
       >
         {!isRunning ? t(`${I18N_PREFIX}.run`) : ''}
       </Button>
diff --git a/web/app/components/datasets/create/website/firecrawl/header.tsx b/web/app/components/datasets/create/website/firecrawl/header.tsx
index c06b816120..7035ea5ea6 100644
--- a/web/app/components/datasets/create/website/firecrawl/header.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/header.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+import Button from '@/app/components/base/button'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -19,22 +19,23 @@ const Header: FC<Props> = ({
   return (
     <div className='flex h-6 items-center justify-between'>
       <div className='flex items-center'>
-        <div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
-        <div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
-        <div
-          className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
-          onClick={onSetting}
-        >
-          <Settings01 className='w-3.5 h-3.5 text-gray-500' />
-        </div>
+        <div className='text-base font-medium text-text-secondary'>{t(`${I18N_PREFIX}.firecrawlTitle`)}</div>
+        <div className='ml-2 mr-2 w-px h-3.5 bg-divider-regular' />
+        <Button className='flex items-center gap-x-[1px] h-6 px-1.5' onClick={onSetting}>
+          <RiEqualizer2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
+          <span className='text-components-button-secondary-text text-xs font-medium px-[3px]'>
+            {t(`${I18N_PREFIX}.configureFirecrawl`)}
+          </span>
+        </Button>
       </div>
       <a
         href='https://docs.firecrawl.dev/introduction'
-        target='_blank' rel='noopener noreferrer'
-        className='flex items-center text-xs text-primary-600'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
       >
-        <BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
-        {t(`${I18N_PREFIX}.firecrawlDoc`)}
+        <RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
+        <span>{t(`${I18N_PREFIX}.firecrawlDoc`)}</span>
       </a>
     </div>
   )
diff --git a/web/app/components/datasets/create/website/firecrawl/index.tsx b/web/app/components/datasets/create/website/firecrawl/index.tsx
index aa4dffc174..5e3bc5c804 100644
--- a/web/app/components/datasets/create/website/firecrawl/index.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/index.tsx
@@ -9,7 +9,6 @@ import Crawling from '../base/crawling'
 import ErrorMessage from '../base/error-message'
 import Header from './header'
 import Options from './options'
-import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import type { CrawlOptions, CrawlResultItem } from '@/models/datasets'
 import Toast from '@/app/components/base/toast'
@@ -179,10 +178,10 @@ const FireCrawl: FC<Props> = ({
   return (
     <div>
       <Header onSetting={handleSetting} />
-      <div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
+      <div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
         <UrlInput onRun={handleRun} isRunning={isRunning} />
         <OptionsWrap
-          className={cn('mt-4')}
+          className='mt-4'
           controlFoldOptions={controlFoldOptions}
         >
           <Options className='mt-2' payload={crawlOptions} onChange={onCrawlOptionsChange} />
diff --git a/web/app/components/datasets/create/website/firecrawl/options.tsx b/web/app/components/datasets/create/website/firecrawl/options.tsx
index 8cc2c6757c..c1816b4e7b 100644
--- a/web/app/components/datasets/create/website/firecrawl/options.tsx
+++ b/web/app/components/datasets/create/website/firecrawl/options.tsx
@@ -36,6 +36,7 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.crawlSubPage`)}
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
       <div className='flex justify-between space-x-4'>
         <Field
@@ -76,6 +77,7 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.extractOnlyMainContent`)}
         isChecked={payload.only_main_content}
         onChange={handleChange('only_main_content')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
     </div>
   )
diff --git a/web/app/components/datasets/create/website/index.tsx b/web/app/components/datasets/create/website/index.tsx
index 58b7f5f2fd..5e9e4cee59 100644
--- a/web/app/components/datasets/create/website/index.tsx
+++ b/web/app/components/datasets/create/website/index.tsx
@@ -73,27 +73,29 @@ const Website: FC<Props> = ({
   return (
     <div>
       <div className="mb-4">
-        <div className="font-medium text-gray-700 mb-2 h-6">
+        <div className="system-md-medium text-text-secondary mb-2">
           {t('datasetCreation.stepOne.website.chooseProvider')}
         </div>
         <div className="flex space-x-2">
           <button
-            className={`px-4 py-2 text-sm font-medium rounded-md flex items-center justify-center ${
+            className={cn('px-4 py-2 rounded-lg flex items-center justify-center',
               selectedProvider === DataSourceProvider.jinaReader
-                ? 'bg-primary-50 text-primary-600'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
+                ? 'system-sm-medium bg-components-option-card-option-selected-bg text-text-primary border-[1.5px] border-components-option-card-option-selected-border'
+                : `system-sm-regular bg-components-option-card-option-bg text-text-secondary border border-components-option-card-option-border
+                hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
+            )}
             onClick={() => setSelectedProvider(DataSourceProvider.jinaReader)}
           >
             <span className={cn(s.jinaLogo, 'mr-2')} />
             <span>Jina Reader</span>
           </button>
           <button
-            className={`px-4 py-2 text-sm font-medium rounded-md ${
+            className={cn('px-4 py-2 rounded-lg',
               selectedProvider === DataSourceProvider.fireCrawl
-                ? 'bg-primary-50 text-primary-600'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
-            }`}
+                ? 'system-sm-medium bg-components-option-card-option-selected-bg text-text-primary border-[1.5px] border-components-option-card-option-selected-border'
+                : `system-sm-regular bg-components-option-card-option-bg text-text-secondary border border-components-option-card-option-border
+                hover:bg-components-option-card-option-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs hover:shadow-shadow-shadow-3`,
+            )}
             onClick={() => setSelectedProvider(DataSourceProvider.fireCrawl)}
           >
             🔥 Firecrawl
diff --git a/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx
index 25d40fe076..3dd69b2943 100644
--- a/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/base/checkbox-with-label.tsx
@@ -25,7 +25,7 @@ const CheckboxWithLabel: FC<Props> = ({
   return (
     <label className={cn(className, 'flex items-center h-7 space-x-2')}>
       <Checkbox checked={isChecked} onCheck={() => onChange(!isChecked)} />
-      <div className={cn(labelClassName, 'text-sm font-normal text-gray-800')}>{label}</div>
+      <div className={cn('text-sm font-normal text-gray-800', labelClassName)}>{label}</div>
       {tooltip && (
         <Tooltip
           popupContent={
diff --git a/web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx b/web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx
deleted file mode 100644
index 5531d3e140..0000000000
--- a/web/app/components/datasets/create/website/jina-reader/crawled-result-item.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
-import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
-import Checkbox from '@/app/components/base/checkbox'
-
-type Props = {
-  payload: CrawlResultItemType
-  isChecked: boolean
-  isPreview: boolean
-  onCheckChange: (checked: boolean) => void
-  onPreview: () => void
-}
-
-const CrawledResultItem: FC<Props> = ({
-  isPreview,
-  payload,
-  isChecked,
-  onCheckChange,
-  onPreview,
-}) => {
-  const { t } = useTranslation()
-
-  const handleCheckChange = useCallback(() => {
-    onCheckChange(!isChecked)
-  }, [isChecked, onCheckChange])
-  return (
-    <div className={cn(isPreview ? 'border-[#D1E0FF] bg-primary-50 shadow-xs' : 'group hover:bg-gray-100', 'rounded-md px-2 py-[5px] cursor-pointer border border-transparent')}>
-      <div className='flex items-center h-5'>
-        <Checkbox className='group-hover:border-2 group-hover:border-primary-600 mr-2 shrink-0' checked={isChecked} onCheck={handleCheckChange} />
-        <div className='grow w-0 truncate text-sm font-medium text-gray-700' title={payload.title}>{payload.title}</div>
-        <div onClick={onPreview} className='hidden group-hover:flex items-center h-6 px-2 text-xs rounded-md font-medium text-gray-500 uppercase hover:bg-gray-50'>{t('datasetCreation.stepOne.website.preview')}</div>
-      </div>
-      <div className='mt-0.5 truncate pl-6 leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
-    </div>
-  )
-}
-export default React.memo(CrawledResultItem)
diff --git a/web/app/components/datasets/create/website/jina-reader/crawled-result.tsx b/web/app/components/datasets/create/website/jina-reader/crawled-result.tsx
deleted file mode 100644
index 2bd51e4d73..0000000000
--- a/web/app/components/datasets/create/website/jina-reader/crawled-result.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React, { useCallback } from 'react'
-import { useTranslation } from 'react-i18next'
-import CheckboxWithLabel from './base/checkbox-with-label'
-import CrawledResultItem from './crawled-result-item'
-import cn from '@/utils/classnames'
-import type { CrawlResultItem } from '@/models/datasets'
-
-const I18N_PREFIX = 'datasetCreation.stepOne.website'
-
-type Props = {
-  className?: string
-  list: CrawlResultItem[]
-  checkedList: CrawlResultItem[]
-  onSelectedChange: (selected: CrawlResultItem[]) => void
-  onPreview: (payload: CrawlResultItem) => void
-  usedTime: number
-}
-
-const CrawledResult: FC<Props> = ({
-  className = '',
-  list,
-  checkedList,
-  onSelectedChange,
-  onPreview,
-  usedTime,
-}) => {
-  const { t } = useTranslation()
-
-  const isCheckAll = checkedList.length === list.length
-
-  const handleCheckedAll = useCallback(() => {
-    if (!isCheckAll)
-      onSelectedChange(list)
-
-    else
-      onSelectedChange([])
-  }, [isCheckAll, list, onSelectedChange])
-
-  const handleItemCheckChange = useCallback((item: CrawlResultItem) => {
-    return (checked: boolean) => {
-      if (checked)
-        onSelectedChange([...checkedList, item])
-
-      else
-        onSelectedChange(checkedList.filter(checkedItem => checkedItem.source_url !== item.source_url))
-    }
-  }, [checkedList, onSelectedChange])
-
-  const [previewIndex, setPreviewIndex] = React.useState<number>(-1)
-  const handlePreview = useCallback((index: number) => {
-    return () => {
-      setPreviewIndex(index)
-      onPreview(list[index])
-    }
-  }, [list, onPreview])
-
-  return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center justify-between h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
-        <CheckboxWithLabel
-          isChecked={isCheckAll}
-          onChange={handleCheckedAll} label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
-          labelClassName='!font-medium'
-        />
-        <div>{t(`${I18N_PREFIX}.scrapTimeInfo`, {
-          total: list.length,
-          time: usedTime.toFixed(1),
-        })}</div>
-      </div>
-      <div className='p-2'>
-        {list.map((item, index) => (
-          <CrawledResultItem
-            key={item.source_url}
-            isPreview={index === previewIndex}
-            onPreview={handlePreview(index)}
-            payload={item}
-            isChecked={checkedList.some(checkedItem => checkedItem.source_url === item.source_url)}
-            onCheckChange={handleItemCheckChange(item)}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}
-export default React.memo(CrawledResult)
diff --git a/web/app/components/datasets/create/website/jina-reader/crawling.tsx b/web/app/components/datasets/create/website/jina-reader/crawling.tsx
deleted file mode 100644
index ee26e7671a..0000000000
--- a/web/app/components/datasets/create/website/jina-reader/crawling.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-import type { FC } from 'react'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
-import { RowStruct } from '@/app/components/base/icons/src/public/other'
-
-type Props = {
-  className?: string
-  crawledNum: number
-  totalNum: number
-}
-
-const Crawling: FC<Props> = ({
-  className = '',
-  crawledNum,
-  totalNum,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className={cn(className, 'border-t border-gray-200')}>
-      <div className='flex items-center h-[34px] px-4 bg-gray-50 shadow-xs border-b-[0.5px] border-black/8 text-xs font-normal text-gray-700'>
-        {t('datasetCreation.stepOne.website.totalPageScraped')} {crawledNum}/{totalNum}
-      </div>
-
-      <div className='p-2'>
-        {['', '', '', ''].map((item, index) => (
-          <div className='py-[5px]' key={index}>
-            <RowStruct />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-export default React.memo(Crawling)
diff --git a/web/app/components/datasets/create/website/jina-reader/header.tsx b/web/app/components/datasets/create/website/jina-reader/header.tsx
index 85014a30ee..fc3eb101c8 100644
--- a/web/app/components/datasets/create/website/jina-reader/header.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/header.tsx
@@ -2,8 +2,8 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
-import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import { RiBookOpenLine, RiEqualizer2Line } from '@remixicon/react'
+import Button from '@/app/components/base/button'
 
 const I18N_PREFIX = 'datasetCreation.stepOne.website'
 
@@ -19,22 +19,23 @@ const Header: FC<Props> = ({
   return (
     <div className='flex h-6 items-center justify-between'>
       <div className='flex items-center'>
-        <div className='text-base font-medium text-gray-700'>{t(`${I18N_PREFIX}.jinaReaderTitle`)}</div>
-        <div className='ml-2 mr-1 w-px h-3.5 bg-gray-200'></div>
-        <div
-          className='p-1 rounded-md hover:bg-black/5 cursor-pointer'
-          onClick={onSetting}
-        >
-          <Settings01 className='w-3.5 h-3.5 text-gray-500' />
-        </div>
+        <div className='text-sm font-semibold text-text-secondary'>{t(`${I18N_PREFIX}.jinaReaderTitle`)}</div>
+        <div className='ml-2 mr-2 w-px h-3.5 bg-divider-regular' />
+        <Button className='flex items-center gap-x-[1px] h-6 px-1.5' onClick={onSetting}>
+          <RiEqualizer2Line className='w-3.5 h-3.5 text-components-button-secondary-text' />
+          <span className='text-components-button-secondary-text text-xs font-medium px-[3px]'>
+            {t(`${I18N_PREFIX}.configureJinaReader`)}
+          </span>
+        </Button>
       </div>
       <a
         href='https://jina.ai/reader'
-        target='_blank' rel='noopener noreferrer'
-        className='flex items-center text-xs text-primary-600'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='inline-flex items-center gap-x-1 text-xs font-medium text-text-accent'
       >
-        <BookOpen01 className='mr-1 w-3.5 h-3.5 text-primary-600' />
-        {t(`${I18N_PREFIX}.jinaReaderDoc`)}
+        <RiBookOpenLine className='w-3.5 h-3.5 text-text-accent' />
+        <span>{t(`${I18N_PREFIX}.jinaReaderDoc`)}</span>
       </a>
     </div>
   )
diff --git a/web/app/components/datasets/create/website/jina-reader/index.tsx b/web/app/components/datasets/create/website/jina-reader/index.tsx
index 1c133f935c..8a56915a6a 100644
--- a/web/app/components/datasets/create/website/jina-reader/index.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/index.tsx
@@ -9,7 +9,6 @@ import Crawling from '../base/crawling'
 import ErrorMessage from '../base/error-message'
 import Header from './header'
 import Options from './options'
-import cn from '@/utils/classnames'
 import { useModalContext } from '@/context/modal-context'
 import Toast from '@/app/components/base/toast'
 import { checkJinaReaderTaskStatus, createJinaReaderTask } from '@/service/datasets'
@@ -192,10 +191,10 @@ const JinaReader: FC<Props> = ({
   return (
     <div>
       <Header onSetting={handleSetting} />
-      <div className={cn('mt-2 p-4 pb-0 rounded-xl border border-gray-200')}>
+      <div className='mt-2 p-4 pb-0 rounded-xl border border-components-panel-border bg-background-default-subtle'>
         <UrlInput onRun={handleRun} isRunning={isRunning} />
         <OptionsWrap
-          className={cn('mt-4')}
+          className='mt-4'
           controlFoldOptions={controlFoldOptions}
         >
           <Options className='mt-2' payload={crawlOptions} onChange={onCrawlOptionsChange} />
diff --git a/web/app/components/datasets/create/website/jina-reader/mock-crawl-result.ts b/web/app/components/datasets/create/website/jina-reader/mock-crawl-result.ts
deleted file mode 100644
index 8fd5e6636f..0000000000
--- a/web/app/components/datasets/create/website/jina-reader/mock-crawl-result.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { CrawlResultItem } from '@/models/datasets'
-
-const result: CrawlResultItem[] = [
-  {
-    title: 'Start the frontend Docker container separately',
-    markdown: 'Markdown 1',
-    description: 'Description 1',
-    source_url: 'https://example.com/1',
-  },
-  {
-    title: 'Advanced Tool Integration',
-    markdown: 'Markdown 2',
-    description: 'Description 2',
-    source_url: 'https://example.com/2',
-  },
-  {
-    title: 'Local Source Code Start | English | Dify',
-    markdown: 'Markdown 3',
-    description: 'Description 3',
-    source_url: 'https://example.com/3',
-  },
-]
-
-export default result
diff --git a/web/app/components/datasets/create/website/jina-reader/options.tsx b/web/app/components/datasets/create/website/jina-reader/options.tsx
index 52cfaa8b3b..c06d8e8749 100644
--- a/web/app/components/datasets/create/website/jina-reader/options.tsx
+++ b/web/app/components/datasets/create/website/jina-reader/options.tsx
@@ -36,12 +36,14 @@ const Options: FC<Props> = ({
         label={t(`${I18N_PREFIX}.crawlSubPage`)}
         isChecked={payload.crawl_sub_pages}
         onChange={handleChange('crawl_sub_pages')}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
       <CheckboxWithLabel
         label={t(`${I18N_PREFIX}.useSitemap`)}
         isChecked={payload.use_sitemap}
         onChange={handleChange('use_sitemap')}
         tooltip={t(`${I18N_PREFIX}.useSitemapTooltip`) as string}
+        labelClassName='text-[13px] leading-[16px] font-medium text-text-secondary'
       />
       <div className='flex justify-between space-x-4'>
         <Field
diff --git a/web/app/components/datasets/create/website/no-data.tsx b/web/app/components/datasets/create/website/no-data.tsx
index 8a508a48c6..f1c079faf3 100644
--- a/web/app/components/datasets/create/website/no-data.tsx
+++ b/web/app/components/datasets/create/website/no-data.tsx
@@ -37,13 +37,17 @@ const NoData: FC<Props> = ({
 
   return (
     <>
-      <div className='max-w-[640px] p-6 rounded-2xl bg-gray-50 mt-4'>
-        <div className='flex w-11 h-11 items-center justify-center bg-gray-50 rounded-xl border-[0.5px] border-gray-100 shadow-lg'>
+      <div className='max-w-[640px] p-6 rounded-2xl bg-workflow-process-bg mt-4'>
+        <div className='flex w-12 h-12 items-center justify-center bg-components-card-bg rounded-[10px]
+          border-[0.5px] border-components-card-border shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px]'>
           {currentProvider.emoji}
         </div>
-        <div className='my-2'>
-          <span className='text-gray-700 font-semibold'>{currentProvider.title}<Icon3Dots className='inline relative -top-3 -left-1.5' /></span>
-          <div className='mt-1 pb-3 text-gray-500 text-[13px] font-normal'>
+        <div className='mt-2 mb-1 pt-1 pb-3 flex flex-col gap-y-1'>
+          <span className='text-text-secondary system-md-semibold'>
+            {currentProvider.title}
+            <Icon3Dots className='inline relative -top-2.5 -left-1.5' />
+          </span>
+          <div className='text-text-tertiary system-sm-regular'>
             {currentProvider.description}
           </div>
         </div>
diff --git a/web/app/components/datasets/create/website/preview.tsx b/web/app/components/datasets/create/website/preview.tsx
index 5180a83442..5800493bad 100644
--- a/web/app/components/datasets/create/website/preview.tsx
+++ b/web/app/components/datasets/create/website/preview.tsx
@@ -20,19 +20,19 @@ const WebsitePreview = ({
   return (
     <div className={cn(s.filePreview, 'h-full')}>
       <div className={cn(s.previewHeader)}>
-        <div className={cn(s.title)}>
+        <div className={cn(s.title, 'title-md-semi-bold')}>
           <span>{t('datasetCreation.stepOne.pagePreview')}</span>
           <div className='flex items-center justify-center w-6 h-6 cursor-pointer' onClick={hidePreview}>
             <XMarkIcon className='h-4 w-4'></XMarkIcon>
           </div>
         </div>
-        <div className='leading-5 text-sm font-medium text-gray-900 break-words'>
+        <div className='title-sm-semi-bold text-text-primary break-words'>
           {payload.title}
         </div>
-        <div className='truncate leading-[18px] text-xs font-normal text-gray-500' title={payload.source_url}>{payload.source_url}</div>
+        <div className='truncate system-xs-medium text-text-tertiary' title={payload.source_url}>{payload.source_url}</div>
       </div>
-      <div className={cn(s.previewContent)}>
-        <div className={cn(s.fileContent, 'body-md-regular')}>{payload.markdown}</div>
+      <div className={cn(s.previewContent, 'body-md-regular')}>
+        <div className={cn(s.fileContent)}>{payload.markdown}</div>
       </div>
     </div>
   )
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index af8d23c309..1fc55fd5ad 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -87,7 +87,6 @@ const config = {
         'status-indicator-red-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-error-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
         'status-indicator-blue-shadow': '0px 2px 6px 0px var(--color-components-badge-status-light-normal-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
         'status-indicator-gray-shadow': '0px 1px 2px 0px var(--color-components-badge-status-light-disabled-halo), 0px 0px 0px 1px var(--color-components-badge-status-light-border-outer)',
-        'emulate-border': '0 0 0 0.5px rgba(0, 0, 0, 0)',
       },
       opacity: {
         2: '0.02',
@@ -108,6 +107,7 @@ const config = {
         '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-mask-bg': 'var(--color-dataset-chunk-list-mask-bg)',
+        'dataset-crawler-error-message-bg': 'var(--color-dataset-crawler-error-message-bg)',
       },
       lineClamp: {
         '20': '20',
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 6d4c5f3908..12013c33fa 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -32,4 +32,5 @@ html[data-theme="dark"] {
     rgba(24, 24, 27, 0.08) 0%,
     rgba(0, 0, 0, 0) 100%
   );
+  --color-dataset-crawler-error-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
 }
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 501f9f1d1f..c00f645a7b 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -32,4 +32,5 @@ html[data-theme="light"] {
     rgba(200, 206, 218, 0.2) 0%,
     rgba(255, 255, 255, 0) 100%
   );
+  --color-dataset-crawler-error-message-bg: linear-gradient(92deg, rgba(247, 144, 9, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
 }