diff --git a/web/app/components/datasets/create/stepper/step.tsx b/web/app/components/datasets/create/stepper/step.tsx
index ff0dd066ab..f40a275b04 100644
--- a/web/app/components/datasets/create/stepper/step.tsx
+++ b/web/app/components/datasets/create/stepper/step.tsx
@@ -30,7 +30,7 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
           ? 'text-white'
           : !isDisabled
             ? 'text-text-tertiary'
-            : 'text-text-tertiary/30',
+            : 'text-text-tertiary opacity-30',
       )}>
         {label}
       </div>
@@ -41,7 +41,7 @@ export const StepperStep: FC<StepperStepProps> = (props) => {
         ? 'text-text-accent'
         : !isDisabled
           ? 'text-text-tertiary'
-          : 'text-text-tertiary/30',
+          : 'text-text-tertiary opacity-30',
     )}>{name}</div>
   </div>
 }
diff --git a/web/app/components/datasets/create/top-bar/index.tsx b/web/app/components/datasets/create/top-bar/index.tsx
index 87ed8ed503..526ae870ad 100644
--- a/web/app/components/datasets/create/top-bar/index.tsx
+++ b/web/app/components/datasets/create/top-bar/index.tsx
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { Stepper, type StepperProps } from '../stepper'
 import classNames from '@/utils/classnames'
 
-export type TopbarProps = Pick<StepperProps, 'activeStepIndex'> & {
+export type TopbarProps = Pick<StepperProps, 'activeIndex'> & {
   className?: string
 }
 
@@ -21,7 +21,7 @@ export const Topbar: FC<TopbarProps> = (props) => {
   return <div className={classNames('flex items-center justify-between relative', className)}>
     <Link href={'/datasets'} className="h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex">
       <RiArrowLeftLine className='size-4 mr-2' />
-      <p className="text-[#101827] text-[13px] font-semibold uppercase leading-none">
+      <p className="text-text-primary text-[13px] font-semibold uppercase leading-none">
         {t('datasetCreation.steps.header.creation')}
       </p>
     </Link>
diff --git a/web/app/components/datasets/create/website/base/error-message.tsx b/web/app/components/datasets/create/website/base/error-message.tsx
index aa337ec4bf..f061c4624e 100644
--- a/web/app/components/datasets/create/website/base/error-message.tsx
+++ b/web/app/components/datasets/create/website/base/error-message.tsx
@@ -18,7 +18,7 @@ const ErrorMessage: FC<Props> = ({
   return (
     <div className={cn(className, 'py-2 px-4 border-t border-gray-200 bg-[#FFFAEB]')}>
       <div className='flex items-center h-5'>
-        <AlertTriangle className='mr-2 w-4 h-4 text-[#F79009]' />
+        <AlertTriangle className='mr-2 w-4 h-4 text-text-warning-secondary' />
         <div className='text-sm font-medium text-[#DC6803]'>{title}</div>
       </div>
       {errorMsg && (