diff --git a/web/app/components/app/workflow-log/detail.tsx b/web/app/components/app/workflow-log/detail.tsx
index 20daa8dc44..dc5127b6e7 100644
--- a/web/app/components/app/workflow-log/detail.tsx
+++ b/web/app/components/app/workflow-log/detail.tsx
@@ -15,9 +15,9 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
   return (
     <div className='grow relative flex flex-col py-3'>
       <span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onClose}>
-        <RiCloseLine className='w-4 h-4 text-gray-500' />
+        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
       </span>
-      <h1 className='shrink-0 px-4 py-1 text-md font-semibold text-gray-900'>{t('appLog.runDetail.workflowTitle')}</h1>
+      <h1 className='shrink-0 px-4 py-1 text-text-primary system-xl-semibold'>{t('appLog.runDetail.workflowTitle')}</h1>
       <Run runID={runID}/>
     </div>
   )
diff --git a/web/app/components/base/chat/chat/answer/workflow-process.tsx b/web/app/components/base/chat/chat/answer/workflow-process.tsx
index 5f36e40c40..99fe99c5e8 100644
--- a/web/app/components/base/chat/chat/answer/workflow-process.tsx
+++ b/web/app/components/base/chat/chat/answer/workflow-process.tsx
@@ -67,9 +67,9 @@ const WorkflowProcessItem = ({
   return (
     <div
       className={cn(
-        'mb-2 rounded-xl border-[0.5px] border-black/8',
+        'mb-2 rounded-xl border-[0.5px] border-components-panel-border',
         collapse ? 'py-[7px]' : hideInfo ? 'pt-2 pb-1' : 'py-2',
-        collapse && (!grayBg ? 'bg-white' : 'bg-gray-50'),
+        collapse && (!grayBg ? 'bg-components-panel-bg' : 'bg-background-section-burn'),
         hideInfo ? 'mx-[-8px] px-1' : 'w-full px-3',
       )}
       style={{
@@ -85,23 +85,23 @@ const WorkflowProcessItem = ({
       >
         {
           running && (
-            <RiLoader2Line className='shrink-0 mr-1 w-3 h-3 text-[#667085] animate-spin' />
+            <RiLoader2Line className='shrink-0 mr-1 w-3 h-3 text-text-accent animate-spin' />
           )
         }
         {
           succeeded && (
-            <CheckCircle className='shrink-0 mr-1 w-3 h-3 text-[#12B76A]' />
+            <CheckCircle className='shrink-0 mr-1 w-3 h-3 text-text-success' />
           )
         }
         {
           failed && (
-            <RiErrorWarningFill className='shrink-0 mr-1 w-3 h-3 text-[#F04438]' />
+            <RiErrorWarningFill className='shrink-0 mr-1 w-3 h-3 text-text-destructive' />
           )
         }
-        <div className='grow text-xs font-medium text-gray-700'>
+        <div className='grow text-xs font-medium text-text-secondary'>
           {t('workflow.common.workflowProcess')}
         </div>
-        <RiArrowRightSLine className={`'ml-1 w-3 h-3 text-gray-500' ${collapse ? '' : 'rotate-90'}`} />
+        <RiArrowRightSLine className={`'ml-1 w-3 h-3 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />
       </div>
       {
         !collapse && (
diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index 45130b126f..0807450776 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -1,13 +1,11 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { useBoolean, useClickAway } from 'ahooks'
+import { useEffect, useRef, useState } from 'react'
+import { useClickAway } from 'ahooks'
 import { RiCloseLine } from '@remixicon/react'
-import IterationResultPanel from '../../workflow/run/iteration-result-panel'
 import cn from '@/utils/classnames'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import Run from '@/app/components/workflow/run'
-import type { NodeTracing } from '@/types/workflow'
 
 type MessageLogModalProps = {
   currentLogItem?: IChatItem
@@ -36,23 +34,12 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
     setMounted(true)
   }, [])
 
-  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
-  const [isShowIterationDetail, {
-    setTrue: doShowIterationDetail,
-    setFalse: doHideIterationDetail,
-  }] = useBoolean(false)
-
-  const handleShowIterationDetail = useCallback((detail: NodeTracing[][]) => {
-    setIterationRunResult(detail)
-    doShowIterationDetail()
-  }, [doShowIterationDetail])
-
   if (!currentLogItem || !currentLogItem.workflow_run_id)
     return null
 
   return (
     <div
-      className={cn('relative flex flex-col py-3 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10')}
+      className={cn('relative flex flex-col py-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
       style={{
         width: fixedWidth ? width : 480,
         ...(!fixedWidth
@@ -68,28 +55,15 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
       }}
       ref={ref}
     >
-      {isShowIterationDetail
-        ? (
-          <IterationResultPanel
-            list={iterationRunResult}
-            onHide={doHideIterationDetail}
-            onBack={doHideIterationDetail}
-          />
-        )
-        : (
-          <>
-            <h1 className='shrink-0 px-4 py-1 text-md font-semibold text-gray-900'>{t('appLog.runDetail.title')}</h1>
-            <span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onCancel}>
-              <RiCloseLine className='w-4 h-4 text-gray-500' />
-            </span>
-            <Run
-              hideResult activeTab={defaultTab as any}
-              runID={currentLogItem.workflow_run_id}
-              onShowIterationDetail={handleShowIterationDetail}
-            />
-          </>
-        )}
-
+      <h1 className='shrink-0 px-4 py-1 text-text-primary system-xl-semibold'>{t('appLog.runDetail.title')}</h1>
+      <span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onCancel}>
+        <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+      </span>
+      <Run
+        hideResult
+        activeTab={defaultTab as any}
+        runID={currentLogItem.workflow_run_id}
+      />
     </div>
   )
 }
diff --git a/web/app/components/workflow/panel/record.tsx b/web/app/components/workflow/panel/record.tsx
index 079dd2cc86..eefdd2d638 100644
--- a/web/app/components/workflow/panel/record.tsx
+++ b/web/app/components/workflow/panel/record.tsx
@@ -18,8 +18,8 @@ const Record = () => {
   }, [handleUpdateWorkflowCanvas])
 
   return (
-    <div className='flex flex-col w-[400px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white'>
-      <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
+    <div className='flex flex-col w-[400px] h-full rounded-l-2xl border-[0.5px] border-components-panel-border shadow-xl bg-components-panel-bg'>
+      <div className='flex items-center justify-between p-4 pb-1 text-text-primary system-xl-semibold'>
         {`Test Run#${historyWorkflowData?.sequence_number}`}
       </div>
       <Run
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 8b9981346b..8a671adc93 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -22,10 +22,9 @@ export type RunProps = {
   activeTab?: 'RESULT' | 'DETAIL' | 'TRACING'
   runID: string
   getResultCallback?: (result: WorkflowRunDetailResponse) => void
-  onShowIterationDetail: (detail: NodeTracing[][]) => void
 }
 
-const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getResultCallback, onShowIterationDetail }) => {
+const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getResultCallback }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const [currentTab, setCurrentTab] = useState<string>(activeTab)
@@ -197,35 +196,35 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
   return (
     <div className='grow relative flex flex-col'>
       {/* tab */}
-      <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
+      <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-divider-subtle'>
         {!hideResult && (
           <div
             className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-              currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
+              'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
+              currentTab === 'RESULT' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
             )}
             onClick={() => switchTab('RESULT')}
           >{t('runLog.result')}</div>
         )}
         <div
           className={cn(
-            'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-            currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
+            'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
+            currentTab === 'DETAIL' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
           )}
           onClick={() => switchTab('DETAIL')}
         >{t('runLog.detail')}</div>
         <div
           className={cn(
-            'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-            currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
+            'mr-6 py-3 border-b-2 border-transparent system-sm-semibold-uppercase text-text-tertiary cursor-pointer',
+            currentTab === 'TRACING' && '!border-util-colors-blue-brand-blue-brand-600 text-text-primary',
           )}
           onClick={() => switchTab('TRACING')}
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detal */}
-      <div ref={ref} className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-gray-50')}>
+      <div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
         {loading && (
-          <div className='flex h-full items-center justify-center bg-white'>
+          <div className='flex h-full items-center justify-center bg-components-panel-bg'>
             <Loading />
           </div>
         )}
diff --git a/web/app/components/workflow/run/iteration-result-panel.tsx b/web/app/components/workflow/run/iteration-result-panel.tsx
index c833ea0342..229871b755 100644
--- a/web/app/components/workflow/run/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-result-panel.tsx
@@ -28,24 +28,24 @@ const IterationResultPanel: FC<Props> = ({
     <>
       <div className={cn(!noWrap && 'shrink-0 ', 'pl-4 pr-3 pt-3')}>
         <div className='shrink-0 flex justify-between items-center h-8'>
-          <div className='text-base font-semibold text-gray-900 truncate'>
+          <div className='system-xl-semibold text-text-primary truncate'>
             {t(`${i18nPrefix}.testRunIteration`)}
           </div>
           <div className='ml-2 shrink-0 p-1 cursor-pointer' onClick={onHide}>
-            <RiCloseLine className='w-4 h-4 text-gray-500 ' />
+            <RiCloseLine className='w-4 h-4 text-text-tertiary' />
           </div>
         </div>
-        <div className='flex items-center py-2 space-x-1 text-primary-600 cursor-pointer' onClick={onBack}>
+        <div className='flex items-center py-2 space-x-1 text-util-colors-blue-brand-blue-brand-600 cursor-pointer' onClick={onBack}>
           <ArrowNarrowLeft className='w-4 h-4' />
-          <div className='leading-[18px] text-[13px] font-medium'>{t(`${i18nPrefix}.back`)}</div>
+          <div className='system-sm-medium'>{t(`${i18nPrefix}.back`)}</div>
         </div>
       </div>
       {/* List */}
-      <div className={cn(!noWrap ? 'h-0 grow' : 'max-h-full', 'overflow-y-auto px-4 pb-4 bg-gray-50')}>
+      <div className={cn(!noWrap ? 'h-0 grow' : 'max-h-full', 'overflow-y-auto px-4 pb-4 bg-background-section-burn')}>
         {list.map((iteration, index) => (
           <div key={index} className={cn('my-4', index === 0 && 'mt-2')}>
             <div className='flex items-center'>
-              <div className='shrink-0 leading-[18px] text-xs font-semibold text-gray-500 uppercase'>{t(`${i18nPrefix}.iteration`)} {index + 1}</div>
+              <div className='shrink-0 system-xs-semibold-uppercase text-text-tertiary'>{t(`${i18nPrefix}.iteration`)} {index + 1}</div>
               <div
                 className='ml-3 grow w-0 h-px'
                 style={{ background: 'linear-gradient(to right, #F3F4F6, rgba(243, 244, 246, 0))' }}
@@ -83,7 +83,7 @@ const IterationResultPanel: FC<Props> = ({
       }}
       onClick={handleNotBubble}
     >
-      <div className='h-full rounded-2xl bg-white flex flex-col'>
+      <div className='h-full rounded-2xl bg-components-panel-bg flex flex-col'>
         {main}
       </div>
     </div >
diff --git a/web/app/components/workflow/run/output-panel.tsx b/web/app/components/workflow/run/output-panel.tsx
index 67030a05fe..3860ecc58e 100644
--- a/web/app/components/workflow/run/output-panel.tsx
+++ b/web/app/components/workflow/run/output-panel.tsx
@@ -19,7 +19,7 @@ const OutputPanel: FC<OutputPanelProps> = ({
   height,
 }) => {
   return (
-    <div className='bg-gray-50 py-2'>
+    <div className='bg-background-section-burn py-2'>
       {isRunning && (
         <div className='pt-4 pl-[26px]'>
           <LoadingAnim type='text' />
diff --git a/web/app/components/workflow/run/result-panel.tsx b/web/app/components/workflow/run/result-panel.tsx
index 187ee5d55b..11272ad54f 100644
--- a/web/app/components/workflow/run/result-panel.tsx
+++ b/web/app/components/workflow/run/result-panel.tsx
@@ -36,7 +36,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className='bg-white py-2'>
+    <div className='bg-components-panel-bg py-2'>
       <div className='px-4 py-2'>
         <StatusPanel
           status={status}
@@ -73,7 +73,7 @@ const ResultPanel: FC<ResultPanelProps> = ({
         )}
       </div>
       <div className='px-4 py-2'>
-        <div className='h-[0.5px] bg-black opacity-5' />
+        <div className='h-[0.5px] divider-subtle' />
       </div>
       <div className='px-4 py-2'>
         <MetaData
diff --git a/web/app/components/workflow/run/result-text.tsx b/web/app/components/workflow/run/result-text.tsx
index 55977cdd2b..ddb233059e 100644
--- a/web/app/components/workflow/run/result-text.tsx
+++ b/web/app/components/workflow/run/result-text.tsx
@@ -20,7 +20,7 @@ const ResultText: FC<ResultTextProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className='bg-gray-50 py-2'>
+    <div className='bg-background-section-burn py-2'>
       {isRunning && !outputs && (
         <div className='pt-4 pl-[26px]'>
           <LoadingAnim type='text' />
@@ -28,7 +28,7 @@ const ResultText: FC<ResultTextProps> = ({
       )}
       {!isRunning && error && (
         <div className='px-4'>
-          <div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rbga(0,0,0,0.05)] shadow-xs'>
+          <div className='px-3 py-[10px] rounded-lg !bg-[#fef3f2] border-[0.5px] border-[rgba(0,0,0,0.05)] shadow-xs'>
             <div className='text-xs leading-[18px] text-[#d92d20]'>{error}</div>
           </div>
         </div>
diff --git a/web/app/components/workflow/run/tracing-panel.tsx b/web/app/components/workflow/run/tracing-panel.tsx
index c80bcb41db..de2eb09b39 100644
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@@ -10,7 +10,7 @@ type TracingPanelProps = {
 
 const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail }) => {
   return (
-    <div className='bg-gray-50 py-2'>
+    <div className='bg-background-section-burn py-2'>
       {list.map(node => (
         <NodePanel
           key={node.id}