diff --git a/web/app/components/workflow/hooks/use-workflow-run.ts b/web/app/components/workflow/hooks/use-workflow-run.ts
index 5bea2ca6ad..b9c6e0b8d8 100644
--- a/web/app/components/workflow/hooks/use-workflow-run.ts
+++ b/web/app/components/workflow/hooks/use-workflow-run.ts
@@ -202,7 +202,10 @@ export const useWorkflowRun = () => {
             setWorkflowRunningData,
           } = workflowStore.getState()
           setWorkflowRunningData(produce(workflowRunningData!, (draft) => {
-            draft.tracing!.push(data as any)
+            draft.tracing!.push({
+              ...data,
+              status: 'running',
+            } as any)
           }))
 
           const nodes = getNodes()
diff --git a/web/app/components/workflow/panel/run-history.tsx b/web/app/components/workflow/panel/run-history.tsx
index fef090fd0a..85f2fd62c0 100644
--- a/web/app/components/workflow/panel/run-history.tsx
+++ b/web/app/components/workflow/panel/run-history.tsx
@@ -9,7 +9,7 @@ import {
   useWorkflowRun,
 } from '../hooks'
 import { CheckCircle, XClose } from '@/app/components/base/icons/src/vender/line/general'
-import { AlertCircle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
+import { AlertCircle, AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import {
   useStore,
   useWorkflowStore,
@@ -77,9 +77,14 @@ const RunHistory = () => {
                 handleBackupDraft()
               }}
             >
+              {
+                !isChatMode && item.status === WorkflowRunningStatus.Stopped && (
+                  <AlertTriangle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F79009]' />
+                )
+              }
               {
                 !isChatMode && item.status === WorkflowRunningStatus.Failed && (
-                  <AlertCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F79009]' />
+                  <AlertCircle className='mt-0.5 mr-1.5 w-3.5 h-3.5 text-[#F04438]' />
                 )
               }
               {
diff --git a/web/app/components/workflow/panel/workflow-preview.tsx b/web/app/components/workflow/panel/workflow-preview.tsx
index 6b5c887b75..f74be9550b 100644
--- a/web/app/components/workflow/panel/workflow-preview.tsx
+++ b/web/app/components/workflow/panel/workflow-preview.tsx
@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next'
 import ResultPanel from '../run/result-panel'
 import TracingPanel from '../run/tracing-panel'
 import { useStore } from '../store'
+import Loading from '@/app/components/base/loading'
 
 const WorkflowPreview = () => {
   const { t } = useTranslation()
@@ -22,9 +23,9 @@ const WorkflowPreview = () => {
       flex flex-col w-[420px] h-full rounded-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'>
-        Test Run#${workflowRunningData?.result.sequence_number}
+        Test Run#{workflowRunningData?.result.sequence_number}
       </div>
-      <div>
+      <div className='grow relative flex flex-col'>
         <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
           <div
             className={cn(
@@ -41,24 +42,36 @@ const WorkflowPreview = () => {
             onClick={() => switchTab('TRACING')}
           >{t('runLog.tracing')}</div>
         </div>
-        {currentTab === 'RESULT' && (
-          <ResultPanel
-            inputs={workflowRunningData?.result?.inputs}
-            outputs={workflowRunningData?.result?.outputs}
-            status={workflowRunningData?.result?.status || ''}
-            error={workflowRunningData?.result?.error}
-            elapsed_time={workflowRunningData?.result?.elapsed_time}
-            total_tokens={workflowRunningData?.result?.total_tokens}
-            created_at={workflowRunningData?.result?.created_at}
-            created_by={''}
-            steps={workflowRunningData?.result?.total_steps}
-          />
-        )}
-        {currentTab === 'TRACING' && (
-          <TracingPanel
-            list={workflowRunningData?.tracing || []}
-          />
-        )}
+        <div className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab === 'TRACING' && '!bg-gray-50')}>
+          {currentTab === 'RESULT' && (
+            <ResultPanel
+              inputs={workflowRunningData?.result?.inputs}
+              outputs={workflowRunningData?.result?.outputs}
+              status={workflowRunningData?.result?.status || ''}
+              error={workflowRunningData?.result?.error}
+              elapsed_time={workflowRunningData?.result?.elapsed_time}
+              total_tokens={workflowRunningData?.result?.total_tokens}
+              created_at={workflowRunningData?.result?.created_at}
+              created_by={''}
+              steps={workflowRunningData?.result?.total_steps}
+            />
+          )}
+          {currentTab === 'RESULT' && !workflowRunningData?.result && (
+            <div className='flex h-full items-center justify-center bg-white'>
+              <Loading />
+            </div>
+          )}
+          {currentTab === 'TRACING' && (
+            <TracingPanel
+              list={workflowRunningData?.tracing || []}
+            />
+          )}
+          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
+            <div className='flex h-full items-center justify-center bg-gray-50'>
+              <Loading />
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/run/index.tsx b/web/app/components/workflow/run/index.tsx
index 4ab6a9dbbc..180d5f880a 100644
--- a/web/app/components/workflow/run/index.tsx
+++ b/web/app/components/workflow/run/index.tsx
@@ -106,7 +106,7 @@ const RunPanel: FC<RunProps> = ({ activeTab = 'RESULT', runID }) => {
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detal */}
-      <div className={cn('grow bg-white h-0 overflow-y-auto', currentTab === 'TRACING' && '!bg-gray-50')}>
+      <div className={cn('grow bg-white h-0 overflow-y-auto rounded-b-2xl', currentTab === 'TRACING' && '!bg-gray-50')}>
         {loading && (
           <div className='flex h-full items-center justify-center bg-white'>
             <Loading />
diff --git a/web/app/components/workflow/run/node.tsx b/web/app/components/workflow/run/node.tsx
index 63c03067a2..076242ce8b 100644
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@@ -69,7 +69,7 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed = true, className }) => {
             <AlertTriangle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F79009]' />
           )}
           {nodeInfo.status === 'running' && (
-            <div className='shrink-0 text-primary-600 text-[13px] leading-[16px] font-medium'>
+            <div className='shrink-0 flex items-center text-primary-600 text-[13px] leading-[16px] font-medium'>
               <Loading02 className='mr-1 w-3.5 h-3.5 animate-spin' />
               <span>Running</span>
             </div>