diff --git a/web/app/components/base/app-icon/index.tsx b/web/app/components/base/app-icon/index.tsx
index 5e7378c087..832ae64c1b 100644
--- a/web/app/components/base/app-icon/index.tsx
+++ b/web/app/components/base/app-icon/index.tsx
@@ -33,7 +33,7 @@ const AppIcon: FC<AppIconProps> = ({
   onClick,
 }) => {
   const wrapperClassName = classNames(
-    style.appIcon,
+    'flex items-center justify-center relative w-9 h-9 text-lg rounded-lg grow-0 shrink-0',
     size !== 'medium' && style[size],
     rounded && style.rounded,
     className ?? '',
diff --git a/web/app/components/base/app-icon/style.module.css b/web/app/components/base/app-icon/style.module.css
index 06a2478d41..8554058ffb 100644
--- a/web/app/components/base/app-icon/style.module.css
+++ b/web/app/components/base/app-icon/style.module.css
@@ -1,7 +1,3 @@
-.appIcon {
-  @apply flex items-center justify-center relative w-9 h-9 text-lg rounded-lg grow-0 shrink-0;
-}
-
 .appIcon.large {
   @apply w-10 h-10;
 }
@@ -20,4 +16,4 @@
 
 .appIcon.rounded {
   @apply rounded-full;
-}
\ No newline at end of file
+}
diff --git a/web/app/components/base/input-number/index.tsx b/web/app/components/base/input-number/index.tsx
index b32cc4e0fb..7492e0814c 100644
--- a/web/app/components/base/input-number/index.tsx
+++ b/web/app/components/base/input-number/index.tsx
@@ -39,7 +39,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
       }}
     />
     {unit && <div className='flex items-center bg-components-input-bg-normal text-[13px] text-text-placeholder pr-2'>{unit}</div>}
-    <div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l text-text-tertiary focus:shadow-xs'>
+    <div className='flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs'>
       <button onClick={inc} className={classNames(
         size === 'sm' ? 'pt-1' : 'pt-1.5',
         'px-1.5 hover:bg-components-input-bg-hover',
diff --git a/web/app/components/base/param-item/index.tsx b/web/app/components/base/param-item/index.tsx
index 771893b6a1..add9be2280 100644
--- a/web/app/components/base/param-item/index.tsx
+++ b/web/app/components/base/param-item/index.tsx
@@ -35,7 +35,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
               }}
             />
           )}
-          <span className="mx-1 text-gray-900 text-[13px] leading-[18px] font-medium">{name}</span>
+          <span className="mx-1 text-text-secondary text-[13px] leading-[18px] font-medium">{name}</span>
           {!noTooltip && (
             <Tooltip
               triggerClassName='w-4 h-4 shrink-0'
@@ -59,6 +59,7 @@ const ParamItem: FC<Props> = ({ className, id, name, noTooltip, tip, step = 0.1,
             onChange={(value) => {
               onChange(id, value)
             }}
+            className='w-8'
           />
         </div>
         <div className="flex items-center h-7 grow">
diff --git a/web/app/components/base/radio-card/index.tsx b/web/app/components/base/radio-card/index.tsx
index 0c03f3be08..8ca7e8ee02 100644
--- a/web/app/components/base/radio-card/index.tsx
+++ b/web/app/components/base/radio-card/index.tsx
@@ -41,8 +41,8 @@ const RadioCard: FC<Props> = ({
           {icon}
         </div>
         <div className='grow'>
-          <div className='leading-5 text-sm font-medium text-gray-900'>{title}</div>
-          <div className='leading-[18px] text-xs font-normal text-[#667085]'>{description}</div>
+          <div className='leading-5 text-sm font-medium text-text-secondary'>{title}</div>
+          <div className='leading-[18px] text-xs font-normal text-text-tertiary'>{description}</div>
         </div>
         {!noRadio && (
           <div className='shrink-0 flex items-center h-8'>
@@ -54,7 +54,7 @@ const RadioCard: FC<Props> = ({
         )}
       </div>
       {((isChosen && chosenConfig) || noRadio) && (
-        <div className={cn(chosenConfigWrapClassName, 'p-3 border-t border-gray-200')}>
+        <div className={cn(chosenConfigWrapClassName, 'p-3')}>
           {chosenConfig}
         </div>
       )}
diff --git a/web/app/components/base/simple-pie-chart/index.tsx b/web/app/components/base/simple-pie-chart/index.tsx
index 7de539cbb1..4b987ab42d 100644
--- a/web/app/components/base/simple-pie-chart/index.tsx
+++ b/web/app/components/base/simple-pie-chart/index.tsx
@@ -10,10 +10,11 @@ export type SimplePieChartProps = {
   fill?: string
   stroke?: string
   size?: number
+  animationDuration?: number
   className?: string
 }
 
-const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009', size = 12, className }: SimplePieChartProps) => {
+const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009', size = 12, animationDuration, className }: SimplePieChartProps) => {
   const option: EChartsOption = useMemo(() => ({
     series: [
       {
@@ -34,7 +35,7 @@ const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009',
       {
         type: 'pie',
         radius: '83%',
-        animationDuration: 600,
+        animationDuration: animationDuration ?? 600,
         data: [
           { value: percentage, itemStyle: { color: fill } },
           { value: 100 - percentage, itemStyle: { color: '#fff' } },
@@ -48,7 +49,7 @@ const SimplePieChart = ({ percentage = 80, fill = '#fdb022', stroke = '#f79009',
         cursor: 'default',
       },
     ],
-  }), [stroke, fill, percentage])
+  }), [stroke, fill, percentage, animationDuration])
 
   return (
     <ReactECharts
diff --git a/web/app/components/billing/priority-label/index.tsx b/web/app/components/billing/priority-label/index.tsx
index 36338cf4a8..75237e632a 100644
--- a/web/app/components/billing/priority-label/index.tsx
+++ b/web/app/components/billing/priority-label/index.tsx
@@ -38,17 +38,17 @@ const PriorityLabel = () => {
       </div>
     }>
       <span className={`
-        flex items-center ml-1 px-[5px] h-[18px] rounded border border-[#C7D7FE]
-        text-[10px] font-medium text-[#3538CD]
+        shrink-0 flex items-center ml-1 px-1 h-[18px] rounded-[5px] border border-text-accent-secondary
+        text-2xs font-medium text-text-accent-secondary
       `}>
         {
           plan.type === Plan.professional && (
-            <ZapNarrow className='mr-0.5 w-3 h-3' />
+            <ZapNarrow className='mr-0.5 size-3' />
           )
         }
         {
           (plan.type === Plan.team || plan.type === Plan.enterprise) && (
-            <ZapFast className='mr-0.5 w-3 h-3' />
+            <ZapFast className='mr-0.5 size-3' />
           )
         }
         {t(`billing.plansCommon.priority.${priority}`)}
diff --git a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
index 6d61cc4c69..0177177665 100644
--- a/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
+++ b/web/app/components/datasets/common/document-picker/preview-document-picker.tsx
@@ -54,7 +54,7 @@ const PreviewDocumentPicker: FC<Props> = ({
           <FileIcon name={name} extension={extension} size='md' />
           <div className='flex flex-col items-start ml-1'>
             <div className='flex items-center space-x-0.5'>
-              <span className={cn('system-md-semibold max-w-[200px] overflow-clip')}> {name || '--'}</span>
+              <span className={cn('system-md-semibold max-w-[200px] overflow-clip text-text-primary')}> {name || '--'}</span>
               <ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
             </div>
           </div>
diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index 8c46747b63..49f090786e 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -25,7 +25,7 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
       <OptionCard icon={<Image className='w-4 h-4' src={retrievalIcon.vector} alt='' />}
         title={t('dataset.retrieval.invertedIndex.title')}
         description={t('dataset.retrieval.invertedIndex.description')} isActive
-        activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
+        activeHeaderClassName='dataset-option-card-purple-gradient'
       >
         <RetrievalParamConfig
           type={RETRIEVE_METHOD.invertedIndex}
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index 986135e3c6..fab0cad597 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -69,7 +69,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.semantic,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
+          activeHeaderClassName='dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.semantic}
@@ -90,7 +90,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             search_method: RETRIEVE_METHOD.fullText,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
+          activeHeaderClassName='dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.fullText}
@@ -116,7 +116,7 @@ const RetrievalMethodConfig: FC<Props> = ({
             reranking_enable: true,
           })}
           effectImg={Effect.src}
-          activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]'
+          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
         >
           <RetrievalParamConfig
             type={RETRIEVE_METHOD.hybrid}
diff --git a/web/app/components/datasets/common/retrieval-param-config/index.tsx b/web/app/components/datasets/common/retrieval-param-config/index.tsx
index 7c528044e1..dc29a3b524 100644
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -140,7 +140,7 @@ const RetrievalParamConfig: FC<Props> = ({
               </div>
             )}
             <div className='flex items-center'>
-              <span className='mr-0.5'>{t('common.modelProvider.rerankModel.key')}</span>
+              <span className='mr-0.5 text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
               <Tooltip
                 popupContent={
                   <div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
diff --git a/web/app/components/datasets/create/embedding-process/index.module.css b/web/app/components/datasets/create/embedding-process/index.module.css
index 1ebb006b54..f2ab4d85a2 100644
--- a/web/app/components/datasets/create/embedding-process/index.module.css
+++ b/web/app/components/datasets/create/embedding-process/index.module.css
@@ -14,24 +14,7 @@
   border-radius: 6px;
   overflow: hidden;
 }
-.sourceItem.error {
-  background: #FEE4E2;
-}
-.sourceItem.success {
-  background: #D1FADF;
-}
-.progressbar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background-color: #B2CCFF;
-}
-.sourceItem .info {
-  display: flex;
-  align-items: center;
-  z-index: 1;
-}
+
 .sourceItem .info .name {
   font-weight: 500;
   font-size: 12px;
@@ -55,13 +38,6 @@
   color: #05603A;
 }
 
-
-.cost {
-  @apply flex justify-between items-center text-xs text-gray-700;
-}
-.embeddingStatus {
-  @apply flex items-center justify-between text-gray-900 font-medium text-sm mr-2;
-}
 .commonIcon {
   @apply w-3 h-3 mr-1 inline-block align-middle;
 }
@@ -81,35 +57,33 @@
   @apply text-xs font-medium;
 }
 
-.fileIcon {
-  @apply w-4 h-4 mr-1 bg-center bg-no-repeat;
+.unknownFileIcon {
   background-image: url(../assets/unknown.svg);
-  background-size: 16px;
 }
-.fileIcon.csv {
+.csv {
   background-image: url(../assets/csv.svg);
 }
-.fileIcon.docx {
+.docx {
   background-image: url(../assets/docx.svg);
 }
-.fileIcon.xlsx,
-.fileIcon.xls {
+.xlsx,
+.xls {
   background-image: url(../assets/xlsx.svg);
 }
-.fileIcon.pdf {
+.pdf {
   background-image: url(../assets/pdf.svg);
 }
-.fileIcon.html,
-.fileIcon.htm {
+.html,
+.htm {
   background-image: url(../assets/html.svg);
 }
-.fileIcon.md,
-.fileIcon.markdown {
+.md,
+.markdown {
   background-image: url(../assets/md.svg);
 }
-.fileIcon.txt {
+.txt {
   background-image: url(../assets/txt.svg);
 }
-.fileIcon.json {
+.json {
   background-image: url(../assets/json.svg);
 }
diff --git a/web/app/components/datasets/create/embedding-process/index.tsx b/web/app/components/datasets/create/embedding-process/index.tsx
index f6d500ef15..64f2570b4a 100644
--- a/web/app/components/datasets/create/embedding-process/index.tsx
+++ b/web/app/components/datasets/create/embedding-process/index.tsx
@@ -6,13 +6,15 @@ import { useTranslation } from 'react-i18next'
 import { omit } from 'lodash-es'
 import { ArrowRightIcon } from '@heroicons/react/24/solid'
 import {
+  RiCheckboxCircleFill,
   RiErrorWarningFill,
   RiLoader2Fill,
   RiTerminalBoxLine,
 } from '@remixicon/react'
 import Image from 'next/image'
 import { indexMethodIcon, retrievalIcon } from '../icons'
-import s from './index.module.css'
+import { IndexingType } from '../step-two'
+import DocumentFileIcon from '../../common/document-file-icon'
 import cn from '@/utils/classnames'
 import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
 import Button from '@/app/components/base/button'
@@ -25,7 +27,6 @@ import { Plan } from '@/app/components/billing/type'
 import { ZapFast } from '@/app/components/base/icons/src/vender/solid/general'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
 import { useProviderContext } from '@/context/provider-context'
-import Tooltip from '@/app/components/base/tooltip'
 import { sleep } from '@/utils'
 import { RETRIEVE_METHOD } from '@/types/app'
 
@@ -83,7 +84,7 @@ const RuleDetail: FC<{
     return value
   }, [sourceData])
 
-  return <div className='flex flex-col pt-8 pb-10 first:mt-0'>
+  return <div className='flex flex-col gap-1'>
     {Object.keys(segmentationRuleMap).map((field) => {
       return <FieldInfo
         key={field}
@@ -93,11 +94,12 @@ const RuleDetail: FC<{
     })}
     <FieldInfo
       label={t('datasetCreation.stepTwo.indexMode')}
-      displayedValue={t(`datasetCreation.stepTwo.${indexingType}`) as string}
+      displayedValue={t(`datasetCreation.stepTwo.${indexingType === IndexingType.ECONOMICAL ? 'economical' : 'qualified'}`) as string}
       valueIcon={
         <Image
+          className='size-4'
           src={
-            indexingType === 'economy'
+            indexingType === IndexingType.ECONOMICAL
               ? indexMethodIcon.economical
               : indexMethodIcon.high_quality
           }
@@ -107,15 +109,17 @@ const RuleDetail: FC<{
     />
     <FieldInfo
       label={t('datasetSettings.form.retrievalSetting.title')}
-      displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
+      // displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
+      displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'invertedIndex' : retrievalMethod}.title`) as string}
       valueIcon={
         <Image
+          className='size-4'
           src={
             retrievalMethod === RETRIEVE_METHOD.fullText
               ? retrievalIcon.fullText
-              : RETRIEVE_METHOD.semantic
-                ? retrievalIcon.vector
-                : retrievalIcon.hybrid
+              : retrievalMethod === RETRIEVE_METHOD.hybrid
+                ? retrievalIcon.hybrid
+                : retrievalIcon.vector
           }
           alt=''
         />
@@ -167,6 +171,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
   }
 
   useEffect(() => {
+    setIsStopQuery(false)
     startQueryStatus()
     return () => {
       stopQueryStatus()
@@ -225,8 +230,8 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
 
   return (
     <>
-      <div className='h-5 flex items-center mb-5'>
-        <div className={s.embeddingStatus}>
+      <div className="h-5 flex items-center mb-3">
+        <div className="flex items-center justify-between text-gray-900 font-medium text-sm mr-2">
           {isEmbedding && <div className='flex items-center'>
             <RiLoader2Fill className='size-4 mr-1 animate-spin' />
             {t('datasetDocuments.embedding.processing')}
@@ -247,68 +252,68 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
           </div>
         )
       }
-      <div className={s.progressContainer}>
+      <div className="flex flex-col gap-0.5 pb-2">
         {indexingStatusBatchDetail.map(indexingStatusDetail => (
           <div key={indexingStatusDetail.id} className={cn(
-            s.sourceItem,
-            indexingStatusDetail.indexing_status === 'error' && s.error,
-            indexingStatusDetail.indexing_status === 'completed' && s.success,
+            'relative h-[26px] bg-components-progress-bar-bg rounded-md overflow-hidden',
+            indexingStatusDetail.indexing_status === 'error' && 'bg-state-destructive-hover-alt',
+            // indexingStatusDetail.indexing_status === 'completed' && 's.success',
           )}>
             {isSourceEmbedding(indexingStatusDetail) && (
-              <div className={s.progressbar} style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
+              <div className="absolute top-0 left-0 h-full min-w-0.5 bg-components-progress-bar-progress border-r-[2px] border-r-components-progress-bar-progress-highlight" style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
             )}
-            <div className={`${s.info} grow`}>
+            <div className="flex gap-1 pl-[6px] pr-2 h-full items-center z-[1]">
               {getSourceType(indexingStatusDetail.id) === DataSourceType.FILE && (
-                <div className={cn(s.fileIcon, s[getFileType(getSourceName(indexingStatusDetail.id))])} />
+                // <div className={cn(
+                //   'shrink-0 marker:size-4 bg-center bg-no-repeat bg-contain',
+                //   s[getFileType(getSourceName(indexingStatusDetail.id))] || s.unknownFileIcon,
+                // )} />
+                <DocumentFileIcon
+                  className="shrink-0 size-4"
+                  name={getSourceName(indexingStatusDetail.id)}
+                  extension={getFileType(getSourceName(indexingStatusDetail.id))}
+                />
               )}
               {getSourceType(indexingStatusDetail.id) === DataSourceType.NOTION && (
                 <NotionIcon
-                  className='shrink-0 mr-1'
+                  className='shrink-0'
                   type='page'
                   src={getIcon(indexingStatusDetail.id)}
                 />
               )}
-              <div className={`${s.name} truncate`} title={getSourceName(indexingStatusDetail.id)}>{getSourceName(indexingStatusDetail.id)}</div>
-              {
-                enableBilling && (
-                  <PriorityLabel />
-                )
-              }
-            </div>
-            <div className='shrink-0'>
-              {isSourceEmbedding(indexingStatusDetail) && (
-                <div className={s.percent}>{`${getSourcePercent(indexingStatusDetail)}%`}</div>
-              )}
-              {indexingStatusDetail.indexing_status === 'error' && indexingStatusDetail.error && (
-                <Tooltip
-                  popupContent={(
-                    <div className='max-w-[400px]'>
-                      {indexingStatusDetail.error}
-                    </div>
-                  )}
-                >
-                  <div className={cn(s.percent, s.error, 'flex items-center')}>
-                    Error
-                    <RiErrorWarningFill className='ml-1 w-4 h-4' />
-                  </div>
-                </Tooltip>
-              )}
-              {indexingStatusDetail.indexing_status === 'error' && !indexingStatusDetail.error && (
-                <div className={cn(s.percent, s.error, 'flex items-center')}>
-                  Error
+              <div className="grow flex items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
+                <div className="text-xs truncate">
+                  {getSourceName(indexingStatusDetail.id)}
                 </div>
+                {
+                  enableBilling && (
+                    <PriorityLabel />
+                  )
+                }
+              </div>
+              {isSourceEmbedding(indexingStatusDetail) && (
+                <div className="shrink-0 text-xs">{`${getSourcePercent(indexingStatusDetail)}%`}</div>
+              )}
+              {indexingStatusDetail.indexing_status === 'error' && (
+                <>
+                  <span className="flex items-center max-w-[200px] text-xs text-text-destructive truncate" title={indexingStatusDetail.error || ''}>
+                    {indexingStatusDetail.error || 'Error'}
+                  </span>
+                  <RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
+                </>
               )}
               {indexingStatusDetail.indexing_status === 'completed' && (
-                <div className={cn(s.percent, s.success)}>100%</div>
+                <RiCheckboxCircleFill className='shrink-0 size-4' />
               )}
             </div>
           </div>
         ))}
       </div>
-      <RuleDetail sourceData={ruleDetail} indexingType={
-        indexingType
-      }
-      retrievalMethod={retrievalMethod}
+      <hr className="my-3 h-[1px] bg-divider-subtle border-0" />
+      <RuleDetail
+        sourceData={ruleDetail}
+        indexingType={indexingType}
+        retrievalMethod={retrievalMethod}
       />
       <div className='flex items-center gap-2 my-10'>
         <Button className='w-fit' onClick={navToApiDocs}>
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 93a7c0e535..7d29f2ef9c 100644
--- a/web/app/components/datasets/create/file-uploader/index.module.css
+++ b/web/app/components/datasets/create/file-uploader/index.module.css
@@ -1,58 +1,3 @@
-.fileUploader {
-  @apply mb-6;
-}
-
-.fileUploader .title {
-  @apply mb-2;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.fileUploader .tip {
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 18px;
-}
-
-.uploader {
-  @apply relative box-border flex justify-center items-center mb-2 p-3;
-  flex-direction: column;
-  max-width: 640px;
-  min-height: 80px;
-  border-radius: 12px;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.uploader .draggingCover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-
-.uploader .uploadIcon {
-  content: '';
-  display: block;
-  margin-right: 8px;
-  width: 24px;
-  height: 24px;
-  background: center no-repeat url(../assets/upload-cloud-01.svg);
-  background-size: contain;
-}
-
-.uploader .browse {
-  @apply pl-1 cursor-pointer;
-  color: #155eef;
-}
-
-.fileList {
-  @apply space-y-2;
-}
-
 .file {
   @apply box-border relative flex items-center justify-between;
   padding: 8px 12px 8px 8px;
diff --git a/web/app/components/datasets/create/file-uploader/index.tsx b/web/app/components/datasets/create/file-uploader/index.tsx
index 0afa5b38f0..439614d337 100644
--- a/web/app/components/datasets/create/file-uploader/index.tsx
+++ b/web/app/components/datasets/create/file-uploader/index.tsx
@@ -3,11 +3,12 @@ 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 { RiDeleteBinLine, RiUploadCloud2Line } from '@remixicon/react'
+import DocumentFileIcon from '../../common/document-file-icon'
 import cn from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { ToastContext } from '@/app/components/base/toast'
+import SimplePieChart from '@/app/components/base/simple-pie-chart'
 
 import { upload } from '@/service/base'
 import { fetchFileUploadConfig } from '@/service/common'
@@ -15,6 +16,8 @@ import { fetchSupportFileTypes } from '@/service/datasets'
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n/language'
 import { IS_CE_EDITION } from '@/config'
+import { useAppContext } from '@/context/app-context'
+import { Theme } from '@/types/app'
 
 const FILES_NUMBER_LIMIT = 20
 
@@ -223,6 +226,9 @@ const FileUploader = ({
     initialUpload(files.filter(isValid))
   }, [isValid, initialUpload])
 
+  const { theme } = useAppContext()
+  const chartColor = useMemo(() => theme === Theme.dark ? '#5289ff' : '#296dff', [theme])
+
   useEffect(() => {
     dropRef.current?.addEventListener('dragenter', handleDragEnter)
     dropRef.current?.addEventListener('dragover', handleDragOver)
@@ -237,12 +243,12 @@ const FileUploader = ({
   }, [handleDrop])
 
   return (
-    <div className={s.fileUploader}>
+    <div className="mb-5">
       {!hideUpload && (
         <input
           ref={fileUploader}
           id="fileUploader"
-          style={{ display: 'none' }}
+          className="hidden"
           type="file"
           multiple={!notSupportBatchUpload}
           accept={ACCEPTS.join(',')}
@@ -250,52 +256,66 @@ const FileUploader = ({
         />
       )}
 
-      <div className={cn(s.title, titleClassName, 'text-text-secondary')}>{t('datasetCreation.stepOne.uploader.title')}</div>
-      {!hideUpload && (
+      <div className={cn('text-text-tertiary text-sm font-semibold leading-6 mb-1', titleClassName)}>{t('datasetCreation.stepOne.uploader.title')}</div>
 
-        <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={classNames(s.uploadIcon, 'text-text-tertiary')} />
-            <span className='text-text-secondary'>
+      {!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')}>
+          <div className="flex justify-center items-center min-h-5 text-sm leading-4 text-text-secondary">
+            <RiUploadCloud2Line className='mr-2 size-5' />
+            <span>
               {t('datasetCreation.stepOne.uploader.button')}
-              <label className={s.browse} onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
+              <label className="ml-1 text-text-accent cursor-pointer" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
             </span>
           </div>
-          <div className={classNames(s.tip, 'text-text-tertiary')}>{t('datasetCreation.stepOne.uploader.tip', {
+          <div>{t('datasetCreation.stepOne.uploader.tip', {
             size: fileUploadConfig.file_size_limit,
             supportTypes: supportTypesShowNames,
           })}</div>
-          {dragging && <div ref={dragRef} className={s.draggingCover} />}
+          {dragging && <div ref={dragRef} className='absolute top-0 left-0 w-full h-full' />}
         </div>
       )}
-      <div className={s.fileList}>
+      <div className='space-y-1 max-w-[640px] cursor-default'>
+
         {fileList.map((fileItem, index) => (
           <div
             key={`${fileItem.fileID}-${index}`}
             onClick={() => fileItem.file?.id && onPreview(fileItem.file)}
             className={cn(
-              s.file,
-              fileItem.progress < 100 && s.uploading,
+              'flex items-center h-12 bg-components-panel-on-panel-item-bg text-xs leading-3 text-text-tertiary border border-components-panel-border rounded-lg shadow-xs',
+              // 'border-state-destructive-border bg-state-destructive-hover',
             )}
           >
-            {fileItem.progress < 100 && (
-              <div className={s.progressbar} style={{ width: `${fileItem.progress}%` }} />
-            )}
-            <div className={s.fileInfo}>
-              <div className={cn(s.fileIcon, s[getFileType(fileItem.file)])} />
-              <div className={s.filename}>{fileItem.file.name}</div>
-              <div className={s.size}>{getFileSize(fileItem.file.size)}</div>
+            <div className="shrink-0 flex justify-center items-center w-12">
+              <DocumentFileIcon
+                className="shrink-0 size-6"
+                name={fileItem.file.name}
+                extension={getFileType(fileItem.file)}
+              />
             </div>
-            <div className={s.actionWrapper}>
+            <div className="grow shrink flex flex-col gap-0.5 pr-8">
+              <div className="text-sm leading-4 text-text-secondary w-full whitespace-nowrap text-ellipsis overflow-hidden">{fileItem.file.name}</div>
+              <div className="w-full leading-3 truncate text-text-tertiary">
+                <span className='uppercase'>{getFileType(fileItem.file)}</span>
+                <span className='px-1 text-text-quaternary'>·</span>
+                <span>{getFileSize(fileItem.file.size)}</span>
+                {/* <span className='px-1 text-text-quaternary'>·</span>
+                  <span>10k characters</span> */}
+              </div>
+            </div>
+            <div className="shrink-0 flex items-center justify-end gap-1 pr-3 w-16">
+              {/* <span className="flex justify-center items-center w-6 h-6 cursor-pointer">
+                  <RiErrorWarningFill className='size-4 text-text-warning' />
+                </span> */}
               {(fileItem.progress < 100 && fileItem.progress >= 0) && (
-                <div className={s.percent}>{`${fileItem.progress}%`}</div>
-              )}
-              {fileItem.progress === 100 && (
-                <div className={s.remove} onClick={(e) => {
-                  e.stopPropagation()
-                  removeFile(fileItem.fileID)
-                }} />
+                // <div className={s.percent}>{`${fileItem.progress}%`}</div>
+                <SimplePieChart percentage={fileItem.progress} stroke={chartColor} fill={chartColor} animationDuration={0} />
               )}
+              <span className="flex justify-center items-center w-6 h-6 cursor-pointer" onClick={(e) => {
+                e.stopPropagation()
+                removeFile(fileItem.fileID)
+              }}>
+                <RiDeleteBinLine className='size-4 text-text-tertiary' />
+              </span>
             </div>
           </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 546df9ce71..a76e951d5d 100644
--- a/web/app/components/datasets/create/step-one/index.module.css
+++ b/web/app/components/datasets/create/step-one/index.module.css
@@ -88,23 +88,6 @@
   background-color: #eaecf0;
 }
 
-.OtherCreationOption {
-  @apply flex items-center cursor-pointer;
-  font-weight: 500;
-  font-size: 13px;
-  line-height: 18px;
-  color: #155EEF;
-}
-.OtherCreationOption::before {
-  content: '';
-  display: block;
-  margin-right: 4px;
-  width: 16px;
-  height: 16px;
-  background: center no-repeat url(../assets/folder-plus.svg);
-  background-size: contain;
-}
-
 .notionConnectionTip {
   display: flex;
   flex-direction: column;
diff --git a/web/app/components/datasets/create/step-one/index.tsx b/web/app/components/datasets/create/step-one/index.tsx
index 6003b3727f..a5f5a48f85 100644
--- a/web/app/components/datasets/create/step-one/index.tsx
+++ b/web/app/components/datasets/create/step-one/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiArrowRightLine, RiFolder6Line } from '@remixicon/react'
 import FilePreview from '../file-preview'
 import FileUploader from '../file-uploader'
 import NotionPagePreview from '../notion-page-preview'
@@ -200,7 +201,15 @@ const StepOne = ({
                   <VectorSpaceFull />
                 </div>
               )}
-              <Button disabled={nextDisabled} className={s.submitButton} variant='primary' onClick={onStepChange}>{t('datasetCreation.stepOne.button')}</Button>
+              <div className="flex justify-end gap-2 max-w-[640px]">
+                {/* <Button>{t('datasetCreation.stepOne.cancel')}</Button> */}
+                <Button disabled={!nextDisabled} variant='primary' onClick={onStepChange}>
+                  <span className="flex gap-0.5 px-[10px]">
+                    <span className="px-0.5">{t('datasetCreation.stepOne.button')}</span>
+                    <RiArrowRightLine className="size-4" />
+                  </span>
+                </Button>
+              </div>
             </>
           )}
           {dataSourceType === DataSourceType.NOTION && (
@@ -249,7 +258,10 @@ const StepOne = ({
           {!datasetId && (
             <>
               <div className={s.dividerLine} />
-              <div onClick={modalShowHandle} className={s.OtherCreationOption}>{t('datasetCreation.stepOne.emptyDatasetCreation')}</div>
+              <span className="inline-flex items-center cursor-pointer text-[13px] leading-4 text-text-accent" onClick={modalShowHandle}>
+                <RiFolder6Line className="size-4 mr-1" />
+                {t('datasetCreation.stepOne.emptyDatasetCreation')}
+              </span>
             </>
           )}
         </div>
diff --git a/web/app/components/datasets/create/step-three/index.tsx b/web/app/components/datasets/create/step-three/index.tsx
index 1e7c49ac37..e2bc7f5881 100644
--- a/web/app/components/datasets/create/step-three/index.tsx
+++ b/web/app/components/datasets/create/step-three/index.tsx
@@ -24,29 +24,29 @@ const StepThree = ({ datasetId, datasetName, indexingType, creationCache, retrie
   const isMobile = media === MediaType.mobile
 
   return (
-    <div className='flex w-full max-h-full h-full overflow-y-auto'>
-      <div className={'h-full w-full overflow-y-scroll px-6 sm:px-16'}>
-        <div className='max-w-[636px]'>
+    <div className="flex justify-center w-full max-h-full h-full overflow-y-auto">
+      <div className="grow shrink-0 h-full max-w-[960px] overflow-y-scroll px-14 sm:px-16">
+        <div className="mx-auto max-w-[640px]">
           {!datasetId && (
             <>
-              <div className={s.creationInfo}>
-                <div className={s.title}>{t('datasetCreation.stepThree.creationTitle')}</div>
-                <div className={s.content}>{t('datasetCreation.stepThree.creationContent')}</div>
-                <div className='flex gap-4'>
-                  <AppIcon {...creationCache?.dataset} className='size-14' />
-                  <div className='w-full'>
-                    <div className={s.label}>{t('datasetCreation.stepThree.label')}</div>
-                    <div className={s.datasetName}>{datasetName || creationCache?.dataset?.name}</div>
+              <div className="pt-10">
+                <div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.creationTitle')}</div>
+                <div className="mb-7 text-[13px] leading-4 text-text-tertiary">{t('datasetCreation.stepThree.creationContent')}</div>
+                <div className="flex gap-4">
+                  <AppIcon {...creationCache?.dataset} className="size-14 text-2xl self-center" />
+                  <div className="grow flex flex-col gap-1">
+                    <div className="text-[13px] leading-6 font-semibold">{t('datasetCreation.stepThree.label')}</div>
+                    <div className="w-full px-3 py-2 text-[13px] leading-4 bg-components-input-bg-normal rounded-lg truncate">{datasetName || creationCache?.dataset?.name}</div>
                   </div>
                 </div>
               </div>
-              <div className={s.dividerLine} />
+              <hr className="my-6 h-[1px] bg-divider-subtle border-0" />
             </>
           )}
           {datasetId && (
-            <div className={s.creationInfo}>
-              <div className={s.title}>{t('datasetCreation.stepThree.additionTitle')}</div>
-              <div className={s.content}>{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
+            <div className="pt-10">
+              <div className="mb-1 text-xl leading-[22px] font-semibold text-text-primary">{t('datasetCreation.stepThree.additionTitle')}</div>
+              <div className="mb-7 text-[13px] leading-4 text-text-tertiary">{`${t('datasetCreation.stepThree.additionP1')} ${datasetName || creationCache?.dataset?.name} ${t('datasetCreation.stepThree.additionP2')}`}</div>
             </div>
           )}
           <EmbeddingProcess
diff --git a/web/app/components/datasets/create/step-two/index.module.css b/web/app/components/datasets/create/step-two/index.module.css
index bda6138153..d7864d9667 100644
--- a/web/app/components/datasets/create/step-two/index.module.css
+++ b/web/app/components/datasets/create/step-two/index.module.css
@@ -18,11 +18,10 @@
 }
 
 .form .label {
-  @apply pb-2 flex items-center;
+  @apply pb-2 flex items-center text-text-secondary;
   font-weight: 500;
   font-size: 16px;
   line-height: 24px;
-  color: #344054;
 }
 
 .segmentationItem {
@@ -91,8 +90,7 @@
 }
 
 .radioItem {
-  @apply relative mb-2 rounded-xl border border-gray-100 cursor-pointer;
-  background-color: #fcfcfd;
+  @apply relative mb-2 rounded-xl border border-components-option-card-option-border cursor-pointer bg-components-option-card-option-bg;
 }
 
 .radioItem.segmentationItem.custom {
diff --git a/web/app/components/datasets/create/step-two/index.tsx b/web/app/components/datasets/create/step-two/index.tsx
index ed8ee9064d..7f3b7520b5 100644
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -588,7 +588,7 @@ const StepTwo = ({
                 && <OptionCard
                   title={t('datasetCreation.stepTwo.general')}
                   icon={<Image src={SettingCog} alt={t('datasetCreation.stepTwo.general')} />}
-                  activeHeaderClassName='bg-gradient-to-r from-[#EFF0F9] to-[#F9FAFB]'
+                  activeHeaderClassName='bg-dataset-option-card-blue-gradient'
                   description={t('datasetCreation.stepTwo.generalTip')}
                   isActive={
                     [ChuckingMode.text, ChuckingMode.qa].includes(
@@ -638,7 +638,7 @@ const StepTwo = ({
                               <Checkbox
                                 checked={rule.enabled}
                               />
-                              <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
+                              <label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
                             </div>
                           ))}
                         </div>
@@ -692,7 +692,7 @@ const StepTwo = ({
                   title={t('datasetCreation.stepTwo.parentChild')}
                   icon={<Image src={FamilyMod} alt={t('datasetCreation.stepTwo.parentChild')} />}
                   effectImg={OrangeEffect.src}
-                  activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]'
+                  activeHeaderClassName='bg-dataset-option-card-orange-gradient'
                   description={t('datasetCreation.stepTwo.parentChildTip')}
                   isActive={
                     datasetId ? currentDataset!.doc_form === ChuckingMode.parentChild : docForm === ChuckingMode.parentChild
@@ -805,7 +805,7 @@ const StepTwo = ({
                               <Checkbox
                                 checked={rule.enabled}
                               />
-                              <label className="ml-2 text-sm font-normal cursor-pointer text-gray-800">{getRuleName(rule.id)}</label>
+                              <label className="ml-2 text-sm font-normal cursor-pointer text-text-secondary">{getRuleName(rule.id)}</label>
                             </div>
                           ))}
                         </div>
@@ -820,105 +820,82 @@ const StepTwo = ({
           <div className='max-w-[640px]'>
             <div className='flex items-center gap-3 flex-wrap sm:flex-nowrap'>
               {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.QUALIFIED)) && (
-                <div
-                  className={cn(
-                    s.radioItem,
-                    s.indexItem,
-                    !isAPIKeySet && s.disabled,
-                    !hasSetIndexType && indexType === IndexingType.QUALIFIED && s.active,
-                    hasSetIndexType && s.disabled,
-                    hasSetIndexType && '!w-full !min-h-[96px]',
-                  )}
-                  onClick={() => {
+                <OptionCard
+                  title={<p className='flex items-center'>
+                    {t('datasetCreation.stepTwo.qualified')}
+                    {!hasSetIndexType && <Badge className='ml-1' uppercase>{t('datasetCreation.stepTwo.recommend')}</Badge>}
+                    <span className='ml-auto'>
+                      {!hasSetIndexType && <span className={cn(s.radio)} />}
+                    </span>
+                  </p>}
+                  description={t('datasetCreation.stepTwo.qualifiedTip')}
+                  icon={<Image src={indexMethodIcon.high_quality} alt='' />}
+                  isActive={!hasSetIndexType && indexType === IndexingType.QUALIFIED}
+                  disabled={!isAPIKeySet || hasSetIndexType}
+                  onSwitched={() => {
                     if (isAPIKeySet)
                       setIndexType(IndexingType.QUALIFIED)
                   }}
-                >
-                  <div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
-                    <Image src={indexMethodIcon.high_quality} alt='Gold Icon' width={20} height={20} />
-                  </div>
-                  {!hasSetIndexType && <span className={cn(s.radio)} />}
-                  <div className={s.typeHeader}>
-                    <div className={s.title}>
-                      {t('datasetCreation.stepTwo.qualified')}
-                      {!hasSetIndexType && <span className={s.recommendTag}>{t('datasetCreation.stepTwo.recommend')}</span>}
-                    </div>
-                    <div className={s.tip}>{t('datasetCreation.stepTwo.qualifiedTip')}</div>
-                  </div>
-                  {!isAPIKeySet && (
-                    <div className={s.warningTip}>
-                      <span>{t('datasetCreation.stepTwo.warning')}&nbsp;</span>
-                      <span className={s.click} onClick={onSetting}>{t('datasetCreation.stepTwo.click')}</span>
-                    </div>
-                  )}
-                </div>
+                />
               )}
 
               {(!hasSetIndexType || (hasSetIndexType && indexingType === IndexingType.ECONOMICAL)) && (
-                <PortalToFollowElem
-                  open={
-                    isHoveringEconomy && docForm !== ChuckingMode.text
-                  }
-                  placement={'top'}
-                >
-                  <PortalToFollowElemTrigger>
-                    <div
-                      className={cn(
-                        s.radioItem,
-                        s.indexItem,
-                        !hasSetIndexType && indexType === IndexingType.ECONOMICAL && s.active,
-                        hasSetIndexType && s.disabled,
-                        hasSetIndexType && '!w-full !min-h-[96px]',
-                        docForm !== ChuckingMode.text && s.disabled,
-                      )}
-                      onClick={changeToEconomicalType}
-                      ref={economyDomRef}
-                    >
-                      <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
-                        <header className='pt-6 mb-4'>
-                          <h2 className='text-lg font-semibold'>
-                            {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
-                          </h2>
-                          <p className='font-normal text-sm mt-2'>
-                            {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
-                          </p>
-                        </header>
-                        <div className='flex gap-2 pb-6'>
-                          <Button className='ml-auto' onClick={() => {
-                            setIsQAConfirmDialogOpen(false)
-                          }}>
-                            {t('datasetCreation.stepTwo.cancel')}
-                          </Button>
-                          <Button variant={'primary'} onClick={() => {
-                            setIsQAConfirmDialogOpen(false)
-                            setIndexType(IndexingType.QUALIFIED)
-                            setDocForm(ChuckingMode.qa)
-                          }}>
-                            {t('datasetCreation.stepTwo.switch')}
-                          </Button>
-                        </div>
-                      </CustomDialog>
-                      <div className='h-8 p-1.5 bg-white rounded-lg border border-components-panel-border-subtle justify-center items-center inline-flex absolute left-5 top-[18px]'>
-                        <Image src={indexMethodIcon.economical} alt='Economical Icon' width={20} height={20} />
-                      </div>
-                      {!hasSetIndexType && <span className={cn(s.radio)} />}
-                      <div className={s.typeHeader}>
-                        <div className={s.title}>{t('datasetCreation.stepTwo.economical')}</div>
-                        <div className={s.tip}>{t('datasetCreation.stepTwo.economicalTip')}</div>
-                      </div>
+                <>
+                  <CustomDialog show={isQAConfirmDialogOpen} onClose={() => setIsQAConfirmDialogOpen(false)} className='w-[432px]'>
+                    <header className='pt-6 mb-4'>
+                      <h2 className='text-lg font-semibold'>
+                        {t('datasetCreation.stepTwo.qaSwitchHighQualityTipTitle')}
+                      </h2>
+                      <p className='font-normal text-sm mt-2'>
+                        {t('datasetCreation.stepTwo.qaSwitchHighQualityTipContent')}
+                      </p>
+                    </header>
+                    <div className='flex gap-2 pb-6'>
+                      <Button className='ml-auto' onClick={() => {
+                        setIsQAConfirmDialogOpen(false)
+                      }}>
+                        {t('datasetCreation.stepTwo.cancel')}
+                      </Button>
+                      <Button variant={'primary'} onClick={() => {
+                        setIsQAConfirmDialogOpen(false)
+                        setIndexType(IndexingType.QUALIFIED)
+                        setDocForm(ChuckingMode.qa)
+                      }}>
+                        {t('datasetCreation.stepTwo.switch')}
+                      </Button>
                     </div>
-                  </PortalToFollowElemTrigger>
-                  <PortalToFollowElemContent>
-                    <div className='p-3 bg-white text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
-                      {
-                        docForm === ChuckingMode.qa
-                          ? t('datasetCreation.stepTwo.notAvailableForQA')
-                          : t('datasetCreation.stepTwo.notAvailableForParentChild')
-                      }
-                    </div>
-                  </PortalToFollowElemContent>
-                </PortalToFollowElem>
-              )}
+                  </CustomDialog>
+                  <PortalToFollowElem
+                    open={
+                      isHoveringEconomy && docForm !== ChuckingMode.text
+                    }
+                    placement={'top'}
+                  >
+                    <PortalToFollowElemTrigger>
+                      <OptionCard
+                        title={t('datasetCreation.stepTwo.economical')}
+                        description={t('datasetCreation.stepTwo.economicalTip')}
+                        icon={<Image src={indexMethodIcon.economical} alt='' />}
+                        isActive={!hasSetIndexType && indexType === IndexingType.ECONOMICAL}
+                        disabled={!isAPIKeySet || hasSetIndexType || docForm !== ChuckingMode.text}
+                        ref={economyDomRef}
+                        onSwitched={() => {
+                          if (isAPIKeySet && docForm === ChuckingMode.text)
+                            setIndexType(IndexingType.ECONOMICAL)
+                        }}
+                      />
+                    </PortalToFollowElemTrigger>
+                    <PortalToFollowElemContent>
+                      <div className='p-3 bg-components-tooltip-bg border-components-panel-border text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
+                        {
+                          docForm === ChuckingMode.qa
+                            ? t('datasetCreation.stepTwo.notAvailableForQA')
+                            : t('datasetCreation.stepTwo.notAvailableForParentChild')
+                        }
+                      </div>
+                    </PortalToFollowElemContent>
+                  </PortalToFollowElem>
+                </>)}
             </div>
             {hasSetIndexType && indexType === IndexingType.ECONOMICAL && (
               <div className='mt-2 text-xs text-gray-500 font-medium'>
diff --git a/web/app/components/datasets/create/step-two/language-select/index.tsx b/web/app/components/datasets/create/step-two/language-select/index.tsx
index 1e0f2db030..016f2a5f20 100644
--- a/web/app/components/datasets/create/step-two/language-select/index.tsx
+++ b/web/app/components/datasets/create/step-two/language-select/index.tsx
@@ -28,7 +28,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
           {languages.filter(language => language.supported).map(({ prompt_name }) => (
             <div
               key={prompt_name}
-              className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-gray-700 text-sm'
+              className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-text-secondary text-sm'
               onClick={() => onSelect(prompt_name)}>{prompt_name}
             </div>
           ))}
@@ -40,7 +40,7 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
           <RiArrowDownSLine className='w-3 h-3 opacity-60' />
         </div>
       }
-      btnClassName={open => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit', open ? 'text-blue-600' : 'text-gray-500')}
+      btnClassName={() => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit text-components-button-tertiary-text')}
       className='!w-[120px] h-fit !z-20 !translate-x-0 !left-[-16px]'
     />
   )
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx
index ba84d335c3..bb339b4a41 100644
--- a/web/app/components/datasets/create/step-two/option-card.tsx
+++ b/web/app/components/datasets/create/step-two/option-card.tsx
@@ -1,12 +1,11 @@
-import { type ComponentProps, type FC, type ReactNode } from 'react'
+import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
 import Image from 'next/image'
-import piggyBank from '../assets/piggy-bank-01.svg'
 import Effect from '../assets/option-card-effect-blue.svg'
 import classNames from '@/utils/classnames'
 
 const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
-    <path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="white"/>
+    <path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="currentColor"/>
   </svg>
 )
 
@@ -27,12 +26,12 @@ export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
   )}>
     <div className='size-14 flex items-center justify-center relative overflow-hidden'>
       {isActive && <Image src={effectImg || Effect.src} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
-      <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-white'>
-        {icon || <Image src={piggyBank.src} className='size-5' alt={description} width={20} height={20} />}
+      <div className='size-8 rounded-lg border p-1.5 shadow border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
+        {icon}
       </div>
     </div>
     <TriangleArrow
-      className='absolute left-4 -bottom-1.5'
+      className='absolute left-4 -bottom-1.5 text-components-panel-bg'
     />
     <div className='flex-1 space-y-1 py-3 pr-4'>
       <div className='text-text-secondary text-sm font-semibold leading-tight'>{title}</div>
@@ -52,14 +51,18 @@ type OptionCardProps = {
   effectImg?: string
   onSwitched?: () => void
   noHighlight?: boolean
+  disabled?: boolean
 } & Omit<ComponentProps<'div'>, 'title'>
 
-export const OptionCard: FC<OptionCardProps> = (props) => {
-  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, ...rest } = props
+export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
+  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, onClick, noHighlight, disabled, ...rest } = props
   return <div
     className={classNames(
-      'rounded-xl',
-      (isActive && !noHighlight) ? 'border-components-option-card-option-selected-border bg-components-panel-bg' : 'border-components-option-card-option-border bg-components-option-card-option-bg',
+      'rounded-xl border',
+      (isActive && !noHighlight)
+        ? 'border-components-option-card-option-selected-border bg-components-panel-bg'
+        : 'border-components-option-card-option-border bg-components-option-card-option-bg',
+      disabled && 'opacity-50',
       className,
     )}
     style={{
@@ -71,7 +74,9 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
         onSwitched?.()
       onClick?.(e)
     }}
-    {...rest}>
+    {...rest}
+    ref={ref}
+  >
     <OptionCardHeader
       icon={icon}
       title={title}
@@ -81,10 +86,14 @@ export const OptionCard: FC<OptionCardProps> = (props) => {
       effectImg={effectImg}
     />
     {/** Body */}
-    {isActive && <div className='p-3'>{children}
+    {isActive && (children || actions) && <div className='p-3'>
+      {children}
       {actions && <div className='flex gap-2 mt-4'>
         {actions}
-      </div>}
+      </div>
+      }
     </div>}
   </div>
-}
+})
+
+OptionCard.displayName = 'OptionCard'
diff --git a/web/app/components/datasets/documents/detail/metadata/index.tsx b/web/app/components/datasets/documents/detail/metadata/index.tsx
index 659fff6d18..b0599a8dbe 100644
--- a/web/app/components/datasets/documents/detail/metadata/index.tsx
+++ b/web/app/components/datasets/documents/detail/metadata/index.tsx
@@ -24,7 +24,6 @@ import type { DocType, FullDocumentDetail } from '@/models/datasets'
 import { CUSTOMIZABLE_DOC_TYPES } from '@/models/datasets'
 import type { inputType, metadataType } from '@/hooks/use-metadata'
 import { useBookCategories, useBusinessDocCategories, useLanguages, useMetadataMap, usePersonalDocCategories } from '@/hooks/use-metadata'
-import classNames from '@/utils/classnames'
 
 const map2Options = (map: { [key: string]: string }) => {
   return Object.keys(map).map(key => ({ value: key, name: map[key] }))
@@ -59,9 +58,9 @@ export const FieldInfo: FC<IFieldInfoProps> = ({
   const readAlignTop = !showEdit && textNeedWrap
 
   return (
-    <div className={cn(s.fieldInfo, editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
-      <div className={cn(s.label, editAlignTop && 'pt-1')}>{label}</div>
-      <div className={classNames(s.value, 'flex items-center gap-1')}>
+    <div className={cn('flex items-center gap-1 py-0.5 min-h-5 text-xs', editAlignTop && '!items-start', readAlignTop && '!items-start pt-1')}>
+      <div className={cn('w-[200px] text-text-tertiary font-medium overflow-hidden text-ellipsis whitespace-nowrap', editAlignTop && 'pt-1')}>{label}</div>
+      <div className="grow flex items-center gap-1 text-text-secondary">
         {valueIcon}
         {!showEdit
           ? displayedValue
diff --git a/web/app/components/datasets/documents/detail/metadata/style.module.css b/web/app/components/datasets/documents/detail/metadata/style.module.css
index 60420c196e..37796d38dc 100644
--- a/web/app/components/datasets/documents/detail/metadata/style.module.css
+++ b/web/app/components/datasets/documents/detail/metadata/style.module.css
@@ -53,18 +53,7 @@
 .desc {
   @apply text-gray-500 text-xs;
 }
-.fieldInfo {
-  /* height: 1.75rem; */
-  min-height: 1.75rem;
-  @apply flex flex-row items-center gap-4;
-}
-.fieldInfo > .label {
-  @apply w-2/5 max-w-[128px] text-gray-500 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap;
-}
-.fieldInfo > .value {
-  overflow-wrap: anywhere;
-  @apply w-3/5 text-gray-700 font-normal text-xs;
-}
+
 .changeTip {
   @apply text-[#D92D20] text-xs text-center;
 }
diff --git a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
index c5b7e8395c..2107f98a9a 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-name/index.tsx
@@ -39,7 +39,7 @@ const ModelName: FC<ModelNameProps> = ({
   return (
     <div
       className={`
-        flex items-center truncate text-[13px] font-medium text-gray-800
+        flex items-center truncate text-[13px] font-medium text-components-input-text-filled
         ${className}
       `}
     >
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
index 023c6a5cd2..556a2ef66f 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx
@@ -13,6 +13,7 @@ import ModelIcon from '../model-icon'
 import ModelName from '../model-name'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import Tooltip from '@/app/components/base/tooltip'
+import classNames from '@/utils/classnames'
 
 type ModelTriggerProps = {
   open: boolean
@@ -32,13 +33,13 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
 
   return (
     <div
-      className={`
-        group flex items-center px-2 h-8 rounded-lg bg-gray-100 
-        ${!readonly && 'hover:bg-gray-200 cursor-pointer'}
-        ${className}
-        ${open && '!bg-gray-200'}
-        ${model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]'}
-      `}
+      className={classNames(
+        'group flex items-center px-2 h-8 rounded-lg bg-components-input-bg-normal',
+        !readonly && 'hover:bg-components-input-bg-hover cursor-pointer',
+        className,
+        open && '!bg-components-input-bg-hover',
+        model.status !== ModelStatusEnum.active && '!bg-[#FFFAEB]',
+      )}
     >
       <ModelIcon
         className='shrink-0 mr-1.5'
@@ -68,7 +69,6 @@ const ModelTrigger: FC<ModelTriggerProps> = ({
           }
         </div>
       )}
-
     </div>
   )
 }
diff --git a/web/i18n/en-US/dataset-creation.ts b/web/i18n/en-US/dataset-creation.ts
index 514738e9da..a05a683d0f 100644
--- a/web/i18n/en-US/dataset-creation.ts
+++ b/web/i18n/en-US/dataset-creation.ts
@@ -47,6 +47,7 @@ const translation = {
     notionSyncTitle: 'Notion is not connected',
     notionSyncTip: 'To sync with Notion, connection to Notion must be established first.',
     connect: 'Go to connect',
+    cancel: 'Cancel',
     button: 'Next',
     emptyDatasetCreation: 'I want to create an empty Knowledge',
     modal: {
diff --git a/web/i18n/zh-Hans/dataset-creation.ts b/web/i18n/zh-Hans/dataset-creation.ts
index 48e1b4e7f2..30e32023f7 100644
--- a/web/i18n/zh-Hans/dataset-creation.ts
+++ b/web/i18n/zh-Hans/dataset-creation.ts
@@ -47,6 +47,7 @@ const translation = {
     notionSyncTitle: 'Notion 未绑定',
     notionSyncTip: '同步 Notion 内容前，须先绑定 Notion 空间',
     connect: '去绑定',
+    cancel: '取消',
     button: '下一步',
     emptyDatasetCreation: '创建一个空知识库',
     modal: {
diff --git a/web/i18n/zh-Hant/dataset-creation.ts b/web/i18n/zh-Hant/dataset-creation.ts
index 8c5673cb3f..e4f5011859 100644
--- a/web/i18n/zh-Hant/dataset-creation.ts
+++ b/web/i18n/zh-Hant/dataset-creation.ts
@@ -37,6 +37,7 @@ const translation = {
     notionSyncTitle: 'Notion 未繫結',
     notionSyncTip: '同步 Notion 內容前，須先繫結 Notion 空間',
     connect: '去繫結',
+    cancel: '取消',
     button: '下一步',
     emptyDatasetCreation: '建立一個空知識庫',
     modal: {
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 4759c2fa80..8f289c784d 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,6 +1,7 @@
-/** @type {import('tailwindcss').Config} */
 import tailwindThemeVarDefine from './themes/tailwind-theme-var-define'
-module.exports = {
+
+/** @type {import('tailwindcss').Config} */
+const config = {
   content: [
     './app/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
@@ -115,3 +116,5 @@ module.exports = {
     preflight: false,
   },
 }
+
+export default config
diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css
index 269f306efa..9a342897b2 100644
--- a/web/themes/manual-dark.css
+++ b/web/themes/manual-dark.css
@@ -6,4 +6,7 @@ html[data-theme="dark"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.30) 0%, rgba(0, 0, 0, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #1D1D20 0%, #222225 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(24, 24, 27, 0.25) 0%, rgba(24, 24, 27, 0.04) 100%);
-}
\ No newline at end of file
+  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #24252E 0%, #1E1E21 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #25242E 0%, #1E1E21 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #2B2322 0%, #1E1E21 100%);
+}
diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css
index 8f3ee5d3ff..2de9edda1e 100644
--- a/web/themes/manual-light.css
+++ b/web/themes/manual-light.css
@@ -6,4 +6,7 @@ html[data-theme="light"] {
   --color-dataset-chunk-process-error-bg: linear-gradient(92deg, rgba(240, 68, 56, 0.25) 0%, rgba(255, 255, 255, 0.00) 100%);
   --color-dataset-chunk-detail-card-hover-bg: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
   --color-dataset-child-chunk-expand-btn-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%);
-}
\ No newline at end of file
+  --color-dataset-option-card-blue-gradient: linear-gradient(180deg, #F2F4F7 0%, #F9FAFB 100%);
+  --color-dataset-option-card-purple-gradient: linear-gradient(180deg, #F0EEFA 0%, #F9FAFB 100%);
+  --color-dataset-option-card-orange-gradient: linear-gradient(180deg, #F8F2EE 0%, #F9FAFB 100%);
+}