diff --git a/web/app/(commonLayout)/datasets/DatasetCard.tsx b/web/app/(commonLayout)/datasets/DatasetCard.tsx
index ad83a41dff..5180350f3f 100644
--- a/web/app/(commonLayout)/datasets/DatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/DatasetCard.tsx
@@ -192,7 +192,7 @@ const DatasetCard = ({
               />
             </div>
           </div>
-          <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-gray-200' />
+          <div className='!hidden group-hover:!flex shrink-0 mx-1 w-[1px] h-[14px] bg-divider-regular' />
           <div className='!hidden group-hover:!flex shrink-0'>
             <CustomPopover
               htmlContent={<Operations showDelete={!isCurrentWorkspaceDatasetOperator} />}
diff --git a/web/app/components/base/notion-page-selector/base.module.css b/web/app/components/base/notion-page-selector/base.module.css
deleted file mode 100644
index d9aa9fe359..0000000000
--- a/web/app/components/base/notion-page-selector/base.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.setting-icon {
-  background: url(./assets/setting.svg) center center no-repeat;
-  background-size: 14px 14px;
-}
\ No newline at end of file
diff --git a/web/app/components/base/notion-page-selector/base.tsx b/web/app/components/base/notion-page-selector/base.tsx
index e3b321b120..a16be24ce7 100644
--- a/web/app/components/base/notion-page-selector/base.tsx
+++ b/web/app/components/base/notion-page-selector/base.tsx
@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
-import s from './base.module.css'
+import { RiEqualizer2Line } from '@remixicon/react'
 import WorkspaceSelector from './workspace-selector'
 import SearchInput from './search-input'
 import PageSelector from './page-selector'
-import cn from '@/utils/classnames'
 import { preImportNotionPages } from '@/service/datasets'
 import { NotionConnector } from '@/app/components/datasets/create/step-one'
 import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
@@ -88,23 +87,24 @@ const NotionPageSelector = ({
   }, [firstWorkspaceId])
 
   return (
-    <div className='bg-gray-25 border border-gray-200 rounded-xl'>
+    <div className='bg-background-default-subtle border border-components-panel-border rounded-xl'>
       {
         data?.notion_info?.length
           ? (
             <>
-              <div className='flex items-center pl-[10px] pr-2 h-11 bg-white border-b border-b-gray-200 rounded-t-xl'>
-                <WorkspaceSelector
-                  value={currentWorkspaceId || firstWorkspaceId}
-                  items={notionWorkspaces}
-                  onSelect={handleSelectWorkspace}
-                />
-                <div className='mx-1 w-[1px] h-3 bg-gray-200' />
-                <div
-                  className={cn(s['setting-icon'], 'w-6 h-6 cursor-pointer')}
-                  onClick={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })}
-                />
-                <div className='grow' />
+              <div className='flex items-center gap-x-2 p-2 h-12 bg-components-panel-bg border-b border-b-divider-regular rounded-t-xl'>
+                <div className='grow flex items-center gap-x-1'>
+                  <WorkspaceSelector
+                    value={currentWorkspaceId || firstWorkspaceId}
+                    items={notionWorkspaces}
+                    onSelect={handleSelectWorkspace}
+                  />
+                  <div className='mx-1 w-[1px] h-3 bg-divider-regular' />
+                  <RiEqualizer2Line
+                    className='w-4 h-4 cursor-pointer text-text-tertiary'
+                    onClick={() => setShowAccountSettingModal({ payload: 'data-source', onCancelCallback: mutate })}
+                  />
+                </div>
                 <SearchInput
                   value={searchValue}
                   onChange={handleSearchValueChange}
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.module.css b/web/app/components/base/notion-page-selector/page-selector/index.module.css
deleted file mode 100644
index 1542095b8e..0000000000
--- a/web/app/components/base/notion-page-selector/page-selector/index.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.arrow {
-  width: 20px;
-  height: 20px;
-  background: url(../assets/down-arrow.svg) center center no-repeat;
-  background-size: 16px 16px;
-  transform: rotate(-90deg);
-}
-
-.arrow-expand {
-  transform: rotate(0);
-}
-
-.preview-item {
-  background-color: #eff4ff;
-  border: 1px solid #D1E0FF;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-}
\ No newline at end of file
diff --git a/web/app/components/base/notion-page-selector/page-selector/index.tsx b/web/app/components/base/notion-page-selector/page-selector/index.tsx
index 8f398790e7..3e375fd7dd 100644
--- a/web/app/components/base/notion-page-selector/page-selector/index.tsx
+++ b/web/app/components/base/notion-page-selector/page-selector/index.tsx
@@ -2,9 +2,9 @@ import { memo, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FixedSizeList as List, areEqual } from 'react-window'
 import type { ListChildComponentProps } from 'react-window'
+import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import Checkbox from '../../checkbox'
 import NotionIcon from '../../notion-icon'
-import s from './index.module.css'
 import cn from '@/utils/classnames'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 
@@ -94,10 +94,16 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
     if (hasChild) {
       return (
         <div
-          className={cn(s.arrow, current.expand && s['arrow-expand'], 'shrink-0 mr-1 w-5 h-5 hover:bg-gray-200 rounded-md')}
+          className='flex items-center justify-center shrink-0 mr-1 w-5 h-5 hover:bg-components-button-ghost-bg-hover rounded-md'
           style={{ marginLeft: current.depth * 8 }}
           onClick={() => handleToggle(index)}
-        />
+        >
+          {
+            current.expand
+              ? <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
+              : <RiArrowRightSLine className='w-4 h-4 text-text-tertiary' />
+          }
+        </div>
       )
     }
     if (current.parent_id === 'root' || !pagesMap[current.parent_id]) {
@@ -112,14 +118,12 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
 
   return (
     <div
-      className={cn('group flex items-center pl-2 pr-[2px] rounded-md border border-transparent hover:bg-gray-100 cursor-pointer', previewPageId === current.page_id && s['preview-item'])}
+      className={cn('group flex items-center pl-2 pr-[2px] rounded-md hover:bg-state-base-hover cursor-pointer',
+        previewPageId === current.page_id && 'bg-state-base-hover')}
       style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
     >
       <Checkbox
-        className={cn(
-          'shrink-0 mr-2 group-hover:border-primary-600 group-hover:border-[2px]',
-          disabled && 'group-hover:border-transparent',
-        )}
+        className='shrink-0 mr-2'
         checked={checkedIds.has(current.page_id)}
         disabled={disabled}
         onCheck={() => {
@@ -135,7 +139,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
         src={current.page_icon}
       />
       <div
-        className='grow text-sm font-medium text-gray-700 truncate'
+        className='grow text-[13px] leading-4 font-medium text-text-secondary truncate'
         title={current.page_name}
       >
         {current.page_name}
@@ -143,7 +147,9 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       {
         canPreview && (
           <div
-            className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs font-medium text-gray-500 cursor-pointer hover:bg-gray-50 hover:text-gray-700'
+            className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs leading-4 font-medium text-components-button-secondary-text
+            cursor-pointer bg-components-button-secondary-bg border-[0.5px] border-components-button-secondary-border shadow-xs shadow-shadow-shadow-3
+            backdrop-blur-[10px] hover:bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover'
             onClick={() => handlePreview(index)}>
             {t('common.dataSource.notion.selector.preview')}
           </div>
@@ -152,7 +158,7 @@ const ItemComponent = ({ index, style, data }: ListChildComponentProps<{
       {
         searchValue && (
           <div
-            className='shrink-0 ml-1 max-w-[120px] text-xs text-gray-400 truncate'
+            className='shrink-0 ml-1 max-w-[120px] text-xs text-text-quaternary truncate'
             title={breadCrumbs.join(' / ')}
           >
             {breadCrumbs.join(' / ')}
@@ -278,7 +284,7 @@ const PageSelector = ({
 
   if (!currentDataList.length) {
     return (
-      <div className='flex items-center justify-center h-[296px] text-[13px] text-gray-500'>
+      <div className='flex items-center justify-center h-[296px] text-[13px] text-text-tertiary'>
         {t('common.dataSource.notion.selector.noSearchResult')}
       </div>
     )
diff --git a/web/app/components/base/notion-page-selector/search-input/index.module.css b/web/app/components/base/notion-page-selector/search-input/index.module.css
deleted file mode 100644
index a65b7d5390..0000000000
--- a/web/app/components/base/notion-page-selector/search-input/index.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.search-icon {
-  background: url(../assets/search.svg) center center;
-  background-size: 14px 14px;
-}
-
-.clear-icon {
-  background: url(../assets/clear.svg) center center;
-  background-size: contain;
-}
-
-.input-wrapper {
-  flex-basis: 200px;
-  width: 0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-}
\ No newline at end of file
diff --git a/web/app/components/base/notion-page-selector/search-input/index.tsx b/web/app/components/base/notion-page-selector/search-input/index.tsx
index 8bf55273b7..665d0cca4f 100644
--- a/web/app/components/base/notion-page-selector/search-input/index.tsx
+++ b/web/app/components/base/notion-page-selector/search-input/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTranslation } from 'react-i18next'
-import s from './index.module.css'
+import { RiCloseCircleFill, RiSearchLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 
 type SearchInputProps = {
@@ -19,18 +19,18 @@ const SearchInput = ({
   }, [onChange])
 
   return (
-    <div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}>
-      <div className={cn(s['search-icon'], 'mr-[6px] w-4 h-4')} />
+    <div className={cn('w-[200px] flex items-center p-2 h-8 rounded-lg bg-components-input-bg-normal')}>
+      <RiSearchLine className={'w-4 h-4 mr-0.5 shrink-0 text-components-input-text-placeholder'} />
       <input
-        className='grow text-[13px] bg-inherit border-0 outline-0 appearance-none'
+        className='min-w-0 grow px-1 text-[13px] leading-[16px] bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder border-0 outline-0 appearance-none'
         value={value}
         onChange={(e: ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
         placeholder={t('common.dataSource.notion.selector.searchPages') || ''}
       />
       {
         value && (
-          <div
-            className={cn(s['clear-icon'], 'ml-1 w-4 h-4 cursor-pointer')}
+          <RiCloseCircleFill
+            className={'w-4 h-4 shrink-0 cursor-pointer text-components-input-text-placeholder'}
             onClick={handleClear}
           />
         )
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
index b68e1561e9..7939c14628 100644
--- 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
@@ -1,8 +1,3 @@
-.down-arrow {
-  background: url(../assets/down-arrow.svg) center center no-repeat;
-  background-size: cover;
-}
-
 .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;
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 66227d4f4d..0d0619c693 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
@@ -2,6 +2,7 @@
 import { useTranslation } from 'react-i18next'
 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'
@@ -31,9 +32,9 @@ export default function WorkspaceSelector({
                 src={currentWorkspace?.workspace_icon}
                 name={currentWorkspace?.workspace_name}
               />
-              <div className='mr-1 w-[90px] text-left text-sm font-medium text-gray-700 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-primary-600'>{currentWorkspace?.pages.length}</div>
-              <div className={cn(s['down-arrow'], 'mr-2 w-3 h-3')} />
+              <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>
+              <RiArrowDownSLine className='w-4 h-4 text-text-secondary' />
             </Menu.Button>
             <Transition
               as={Fragment}
diff --git a/web/app/components/base/tag-management/selector.tsx b/web/app/components/base/tag-management/selector.tsx
index 68fe7dd2ab..dda658ad57 100644
--- a/web/app/components/base/tag-management/selector.tsx
+++ b/web/app/components/base/tag-management/selector.tsx
@@ -231,10 +231,10 @@ const TagSelector: FC<TagSelectorProps> = ({
   const Trigger = () => {
     return (
       <div className={cn(
-        'group/tip relative w-full flex items-center gap-1 px-2 py-[7px] rounded-md cursor-pointer hover:bg-gray-100',
+        'group/tip relative w-full flex items-center gap-1 px-2 py-[7px] rounded-md cursor-pointer',
       )}>
-        <Tag01 className='shrink-0 w-3 h-3' />
-        <div className='grow text-xs text-start leading-[18px] font-normal truncate'>
+        <Tag01 className='shrink-0 w-3 h-3 text-components-input-text-placeholder' />
+        <div className='grow text-start system-sm-regular  text-components-input-text-placeholder truncate'>
           {!triggerContent ? t('common.tag.addTag') : triggerContent}
         </div>
       </div>
@@ -260,8 +260,8 @@ const TagSelector: FC<TagSelectorProps> = ({
           btnElement={<Trigger />}
           btnClassName={open =>
             cn(
-              open ? '!bg-gray-100 !text-gray-700' : '!bg-transparent',
-              '!w-full !p-0 !border-0 !text-gray-500 hover:!bg-gray-100 hover:!text-gray-700',
+              open ? '!bg-components-input-bg-normal' : '!bg-transparent',
+              '!w-full !p-0 !border-0 hover:!bg-state-base-hover',
             )
           }
           popupClassName='!w-full !ring-0'
diff --git a/web/app/components/datasets/create/empty-dataset-creation-modal/index.module.css b/web/app/components/datasets/create/empty-dataset-creation-modal/index.module.css
index 37f971eb9d..3131c9ee35 100644
--- a/web/app/components/datasets/create/empty-dataset-creation-modal/index.module.css
+++ b/web/app/components/datasets/create/empty-dataset-creation-modal/index.module.css
@@ -6,11 +6,10 @@
   @apply flex items-center place-content-between h-8;
 }
 .modalHeader .title {
-  @apply grow;
+  @apply grow text-text-primary;
   font-weight: 600;
   font-size: 20px;
   line-height: 32px;
-  color: #101828;
 }
 .modalHeader .close {
   @apply shrink-0 h-4 w-4 bg-center bg-no-repeat cursor-pointer;
@@ -19,20 +18,18 @@
 }
 
 .modal .tip {
-  @apply mt-1 mb-8;
+  @apply mt-1 mb-8 text-text-tertiary;
   font-weight: 400;
   font-size: 13px;
   line-height: 18px;
-  color: #667085;
 }
 
 .form {
   @apply mb-8;
 }
 .form .label {
-  @apply mb-2;
+  @apply mb-2 text-text-primary;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
-  color: #101828;
 }
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index e42a24cfef..0271e8e508 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -256,7 +256,7 @@ const FileUploader = ({
         />
       )}
 
-      <div className={cn('text-text-tertiary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
+      <div className={cn('text-text-secondary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
 
       {!hideUpload && (
         <div ref={dropRef} className={cn('relative box-border flex flex-col justify-center items-center gap-1 mb-2 px-4 py-3 max-w-[640px] min-h-20 leading-4 text-xs text-text-tertiary bg-components-dropzone-bg border border-dashed border-components-dropzone-border rounded-xl', dragging && 'bg-components-dropzone-bg-accent border-components-dropzone-border-accent')}>
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 bb8dd9b895..9658724a89 100644
--- a/web/app/components/datasets/create/step-one/index.module.css
+++ b/web/app/components/datasets/create/step-one/index.module.css
@@ -3,9 +3,6 @@
   top: 0;
   left: 0;
   padding: 42px 64px 12px 0;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 28px;
 }
 
 .form {
@@ -14,38 +11,22 @@
 }
 
 .dataSourceItem {
-  @apply box-border relative grow shrink-0 flex items-center p-3 h-14 bg-white rounded-xl cursor-pointer;
-  border: 0.5px solid #EAECF0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: #101828;
+  @apply relative grow shrink-0 flex items-center p-3 h-14 bg-components-option-card-option-bg rounded-xl
+  cursor-pointer border border-components-option-card-option-border text-text-secondary;
 }
 
 .dataSourceItem:hover {
-  background-color: #f5f8ff;
-  border: 0.5px solid #B2CCFF;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  @apply bg-components-option-card-option-bg-hover border border-components-option-card-option-border-hover shadow-xs shadow-shadow-shadow-3;
 }
 
 .dataSourceItem.active {
-  background-color: #f5f8ff;
-  border: 1.5px solid #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}
-
-.dataSourceItem.disabled {
-  background-color: #f9fafb;
-  border: 0.5px solid #EAECF0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  cursor: default;
+  @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;
 }
 
+.dataSourceItem.disabled,
 .dataSourceItem.disabled:hover {
-  background-color: #f9fafb;
-  border: 0.5px solid #EAECF0;
-  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+  @apply bg-components-option-card-option-bg border-[0.5px] border-components-option-card-option-border cursor-not-allowed text-text-disabled shadow-none;
 }
 
 .comingTag {
@@ -64,17 +45,9 @@
 }
 
 .datasetIcon {
-  @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat;
-  background-color: #F5FAFF;
+  @apply flex mr-2 w-8 h-8 rounded-lg bg-center bg-no-repeat bg-text-primary-on-surface border-[0.5px] border-divider-regular backdrop-blur-sm;
   background-image: url(../assets/file.svg);
   background-size: 16px;
-  border: 0.5px solid #D1E9FF;
-}
-
-.dataSourceItem:active .datasetIcon,
-.dataSourceItem:hover .datasetIcon {
-  background-color: #F5F8FF;
-  border: 0.5px solid #E0EAFF;
 }
 
 .datasetIcon.notion {
@@ -97,54 +70,7 @@
   background-color: #eaecf0;
 }
 
-.notionConnectionTip {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: 24px;
-  width: 640px;
-  background: #F9FAFB;
-  border-radius: 16px;
-}
-
 .notionIcon {
-  display: flex;
-  padding: 12px;
-  width: 48px;
-  height: 48px;
-  background: #fff center no-repeat url(../assets/notion.svg);
+  background: var(--color-components-card-bg) center no-repeat url(../assets/notion.svg);
   background-size: 24px;
-  border: 0.5px solid #EAECF5;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  border-radius: 12px;
-}
-
-.notionConnectionTip .title {
-  position: relative;
-  margin: 24px 0 4px;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 24px;
-  color: #374151;
-}
-
-.notionConnectionTip .title::after {
-  content: '';
-  position: absolute;
-  top: -6px;
-  right: -12px;
-  width: 16px;
-  height: 16px;
-  background: center no-repeat url(../assets/Icon-3-dots.svg);
-  background-size: contain;
-}
-
-.notionConnectionTip .tip {
-  margin-bottom: 20px;
-  font-style: normal;
-  font-weight: 400;
-  font-size: 13px;
-  line-height: 18px;
-  color: #6B7280;
 }
\ No newline at end of file
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 2cca003b39..c5c79d4b62 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -19,6 +19,7 @@ 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'
+import { Icon3Dots } from '@/app/components/base/icons/src/vender/line/others'
 
 type IStepOneProps = {
   datasetId?: string
@@ -48,10 +49,15 @@ export const NotionConnector = ({ onSetting }: NotionConnectorProps) => {
   const { t } = useTranslation()
 
   return (
-    <div className={s.notionConnectionTip}>
-      <span className={s.notionIcon} />
-      <div className={s.title}>{t('datasetCreation.stepOne.notionSyncTitle')}</div>
-      <div className={s.tip}>{t('datasetCreation.stepOne.notionSyncTip')}</div>
+    <div className='flex flex-col items-start p-6 w-[640px] rounded-2xl bg-workflow-process-bg'>
+      <span className={cn(s.notionIcon, 'w-12 h-12 p-3 border-[0.5px] border-components-card-border rounded-[10px] shadow-lg shadow-shadow-shadow-5 mb-2')} />
+      <div className='flex flex-col gap-y-1 pt-1 pb-3 mb-1'>
+        <span className='text-text-secondary system-md-semibold'>
+          {t('datasetCreation.stepOne.notionSyncTitle')}
+          <Icon3Dots className='inline relative -top-2.5 -left-1.5 w-4 h-4 text-text-secondary' />
+        </span>
+        <div className='text-text-tertiary system-sm-regular'>{t('datasetCreation.stepOne.notionSyncTip')}</div>
+      </div>
       <Button className='h-8' variant='primary' onClick={onSetting}>{t('datasetCreation.stepOne.connect')}</Button>
     </div>
   )
@@ -132,7 +138,9 @@ const StepOne = ({
           <div className={classNames(s.form)}>
             {
               shouldShowDataSourceTypeList && (
-                <div className={classNames(s.stepHeader, 'z-10 text-text-secondary bg-components-panel-bg-blur')}>{t('datasetCreation.steps.one')}</div>
+                <div className={classNames(s.stepHeader, 'z-10 text-text-secondary system-md-semibold')}>
+                  {t('datasetCreation.steps.one')}
+                </div>
               )
             }
             {
@@ -141,6 +149,7 @@ const StepOne = ({
                   <div
                     className={cn(
                       s.dataSourceItem,
+                      'system-sm-medium',
                       dataSourceType === DataSourceType.FILE && s.active,
                       dataSourceTypeDisable && dataSourceType !== DataSourceType.FILE && s.disabled,
                     )}
@@ -158,6 +167,7 @@ const StepOne = ({
                   <div
                     className={cn(
                       s.dataSourceItem,
+                      'system-sm-medium',
                       dataSourceType === DataSourceType.NOTION && s.active,
                       dataSourceTypeDisable && dataSourceType !== DataSourceType.NOTION && s.disabled,
                     )}
@@ -175,6 +185,7 @@ const StepOne = ({
                   <div
                     className={cn(
                       s.dataSourceItem,
+                      'system-sm-medium',
                       dataSourceType === DataSourceType.WEB && s.active,
                       dataSourceTypeDisable && dataSourceType !== DataSourceType.WEB && s.disabled,
                     )}
diff --git a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx b/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
index 25d40fe076..3dd69b2943 100644
--- a/web/app/components/datasets/create/website/base/checkbox-with-label.tsx
+++ b/web/app/components/datasets/create/website/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/rename-modal/index.tsx b/web/app/components/datasets/rename-modal/index.tsx
index e93862f63d..b215927605 100644
--- a/web/app/components/datasets/rename-modal/index.tsx
+++ b/web/app/components/datasets/rename-modal/index.tsx
@@ -68,13 +68,13 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
       isShow={show}
       onClose={() => { }}
     >
-      <div className='relative pb-2 text-xl font-medium leading-[30px] text-gray-900'>{t('datasetSettings.title')}</div>
+      <div className='relative pb-2 text-xl font-medium leading-[30px] text-text-primary'>{t('datasetSettings.title')}</div>
       <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
+        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
       </div>
       <div>
         <div className={cn('flex justify-between py-4 flex-wrap items-center')}>
-          <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'>
+          <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
             {t('datasetSettings.form.name')}
           </div>
           <Input
@@ -85,7 +85,7 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
           />
         </div>
         <div className={cn('flex justify-between py-4 flex-wrap items-center')}>
-          <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-gray-900'>
+          <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
             {t('datasetSettings.form.desc')}
           </div>
           <div className='w-full'>
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index 8490896e3b..27bbd06794 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -68,6 +68,8 @@ const translation = {
       jinaReaderNotConfigured: 'Jina Reader is not configured',
       jinaReaderNotConfiguredDescription: 'Set up Jina Reader by entering your free API key for access.',
       configure: 'Configure',
+      configureFirecrawl: 'Configure Firecrawl',
+      configureJinaReader: 'Configure Jina Reader',
       run: 'Run',
       firecrawlTitle: 'Extract web content with 🔥Firecrawl',
       firecrawlDoc: 'Firecrawl docs',
diff --git a/web/i18n/zh-Hans/dataset-creation.ts b/web/i18n/zh-Hans/dataset-creation.ts
index c61e75eb98..1ac1e35eb1 100644
--- a/web/i18n/zh-Hans/dataset-creation.ts
+++ b/web/i18n/zh-Hans/dataset-creation.ts
@@ -68,6 +68,8 @@ const translation = {
       jinaReaderNotConfigured: 'Jina Reader 未配置',
       jinaReaderNotConfiguredDescription: '请配置 Jina Reader 的免费 API 密钥以访问它。',
       configure: '配置',
+      configureFirecrawl: '配置 Firecrawl',
+      configureJinaReader: '配置 Jina Reader',
       run: '运行',
       firecrawlTitle: '使用 🔥Firecrawl 提取网页内容',
       firecrawlDoc: 'Firecrawl 文档',
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 0da4968a7f..af8d23c309 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -87,6 +87,7 @@ 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',