diff --git a/web/app/components/base/icons/assets/vender/line/general/checklist.svg b/web/app/components/base/icons/assets/vender/line/general/checklist.svg
new file mode 100644
index 0000000000..7af862e6dd
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/line/general/checklist.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<path id="Vector" d="M8.75 11H14M8.75 5H14M2 5.75L3.125 6.5L5.375 3.5M2 11.75L3.125 12.5L5.375 9.5" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/line/general/Checklist.json b/web/app/components/base/icons/src/vender/line/general/Checklist.json
new file mode 100644
index 0000000000..b344f1f7da
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/general/Checklist.json
@@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "16",
+			"height": "16",
+			"viewBox": "0 0 16 16",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Icon"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector",
+							"d": "M8.75 11H14M8.75 5H14M2 5.75L3.125 6.5L5.375 3.5M2 11.75L3.125 12.5L5.375 9.5",
+							"stroke": "currentColor",
+							"stroke-width": "1.5",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Checklist"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/line/general/Checklist.tsx b/web/app/components/base/icons/src/vender/line/general/Checklist.tsx
new file mode 100644
index 0000000000..6cecf4692e
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/line/general/Checklist.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Checklist.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Checklist'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/line/general/index.ts b/web/app/components/base/icons/src/vender/line/general/index.ts
index 98599bc60f..7460282d72 100644
--- a/web/app/components/base/icons/src/vender/line/general/index.ts
+++ b/web/app/components/base/icons/src/vender/line/general/index.ts
@@ -3,6 +3,7 @@ export { default as Bookmark } from './Bookmark'
 export { default as CheckCircle } from './CheckCircle'
 export { default as CheckDone01 } from './CheckDone01'
 export { default as Check } from './Check'
+export { default as Checklist } from './Checklist'
 export { default as DotsGrid } from './DotsGrid'
 export { default as DotsHorizontal } from './DotsHorizontal'
 export { default as Edit02 } from './Edit02'
diff --git a/web/app/components/workflow/header/checklist.tsx b/web/app/components/workflow/header/checklist.tsx
new file mode 100644
index 0000000000..02ae026c31
--- /dev/null
+++ b/web/app/components/workflow/header/checklist.tsx
@@ -0,0 +1,48 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Checklist } from '@/app/components/base/icons/src/vender/line/general'
+
+const WorkflowChecklist = () => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-end'
+      offset={{
+        mainAxis: 12,
+        crossAxis: -4,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className='flex items-center justify-center p-0.5 w-8 h-8 rounded-lg border-[0.5px] border-gray-200 bg-white shadow-xs'>
+          <div
+            className={`
+              group flex items-center justify-center w-full h-full rounded-md cursor-pointer 
+              hover:bg-primary-50
+              ${open && 'bg-primary-50'}
+            `}
+          >
+            <Checklist
+              className={`
+                w-4 h-4 group-hover:text-primary-600
+                ${open ? 'text-primary-600' : 'text-gray-500'}`
+              }
+            />
+          </div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent></PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(WorkflowChecklist)
diff --git a/web/app/components/workflow/header/index.tsx b/web/app/components/workflow/header/index.tsx
index 75964db1ab..4cd829fe67 100644
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -18,6 +18,7 @@ import EditingTitle from './editing-title'
 import RunningTitle from './running-title'
 import RestoringTitle from './restoring-title'
 import Publish from './publish'
+import Checklist from './checklist'
 import { Grid01 } from '@/app/components/base/icons/src/vender/line/layout'
 import Button from '@/app/components/base/button'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
@@ -118,6 +119,7 @@ const Header: FC = () => {
               {t('workflow.common.features')}
             </Button>
             <Publish />
+            <Checklist />
           </div>
         )
       }
@@ -148,6 +150,7 @@ const Header: FC = () => {
             >
               {t('workflow.common.restore')}
             </Button>
+            <Checklist />
           </div>
         )
       }
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index edf3fa0222..84262a8c3b 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -79,7 +79,7 @@ const BasePanel: FC<BasePanelProps> = ({
   }, [handleNodeDataUpdateWithSyncDraft, id])
 
   return (
-    <div className='relative h-full'>
+    <div className='relative mr-2 h-full'>
       <div
         ref={triggerRef}
         className='absolute top-1/2 -translate-y-1/2 -left-2 w-1 h-6 bg-gray-300 rounded-sm cursor-col-resize resize-x'></div>
diff --git a/web/app/components/workflow/panel/chat-record/index.tsx b/web/app/components/workflow/panel/chat-record/index.tsx
index b5c23997db..1ee0c6d6e9 100644
--- a/web/app/components/workflow/panel/chat-record/index.tsx
+++ b/web/app/components/workflow/panel/chat-record/index.tsx
@@ -70,18 +70,30 @@ const ChatRecord = () => {
   }
 
   return (
-    <Chat
-      config={{} as any}
-      chatList={chatMessageList}
-      chatContainerclassName='px-4'
-      chatContainerInnerClassName='pt-6'
-      chatFooterClassName='px-4 rounded-b-2xl'
-      chatFooterInnerClassName='pb-4'
-      chatNode={<UserInput />}
-      noChatInput
-      allToolIcons={{}}
-      showPromptLog
-    />
+    <div
+      className={`
+        flex flex-col w-[400px] rounded-l-2xl h-full border border-black/[0.02] shadow-xl
+      `}
+      style={{
+        background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
+      }}
+    >
+      <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
+        {`TEST CHAT#${historyWorkflowData?.sequence_number}`}
+      </div>
+      <Chat
+        config={{} as any}
+        chatList={chatMessageList}
+        chatContainerclassName='px-4'
+        chatContainerInnerClassName='pt-6'
+        chatFooterClassName='px-4 rounded-b-2xl'
+        chatFooterInnerClassName='pb-4'
+        chatNode={<UserInput />}
+        noChatInput
+        allToolIcons={{}}
+        showPromptLog
+      />
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index d617dbac00..618feddace 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -14,6 +14,7 @@ import RunHistory from './run-history'
 import Record from './record'
 import InputsPanel from './inputs-panel'
 import WorkflowPreview from './workflow-preview'
+import ChatRecord from './chat-record'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 
@@ -46,12 +47,7 @@ const Panel: FC = () => {
   ])
 
   return (
-    <div
-      className={`
-        absolute top-14 right-0 bottom-2 flex pr-2 z-10
-        ${(showRunHistory || showDebugAndPreviewPanel) && '!pr-0'}
-      `}
-    >
+    <div className='absolute top-14 right-0 bottom-2 flex z-10'>
       {
         showMessageLogModal && (
           <MessageLogModal
@@ -66,10 +62,15 @@ const Panel: FC = () => {
         )
       }
       {
-        historyWorkflowData && (
+        historyWorkflowData && !isChatMode && (
           <Record />
         )
       }
+      {
+        historyWorkflowData && isChatMode && (
+          <ChatRecord />
+        )
+      }
       {
         showDebugAndPreviewPanel && (
           <DebugAndPreview />
diff --git a/web/app/components/workflow/panel/record.tsx b/web/app/components/workflow/panel/record.tsx
index b372cccc60..bfebbb8137 100644
--- a/web/app/components/workflow/panel/record.tsx
+++ b/web/app/components/workflow/panel/record.tsx
@@ -1,45 +1,21 @@
-import {
-  memo,
-  // useCallback,
-} from 'react'
-import {
-  useIsChatMode,
-  // useWorkflow,
-} from '../hooks'
+import { memo } from 'react'
+import { useIsChatMode } from '../hooks'
 import Run from '../run'
 import { useStore } from '../store'
-import ChatRecord from './chat-record'
-// import type { WorkflowRunDetailResponse } from '@/models/log'
 
 const Record = () => {
   const isChatMode = useIsChatMode()
-  // const { renderTreeFromRecord } = useWorkflow()
   const historyWorkflowData = useStore(s => s.historyWorkflowData)
 
-  // const getResultCallback = useCallback((res: WorkflowRunDetailResponse) => {
-  //   const { graph } = res
-
-  //   renderTreeFromRecord(graph.nodes, graph.edges, graph.viewport)
-  // }, [renderTreeFromRecord])
-
   return (
     <div className={`
       flex flex-col h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
       ${isChatMode ? 'w-[320px]' : 'w-[400px]'}
     `}>
       <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
-        {`Test ${isChatMode ? 'Chat' : 'Run'}#${historyWorkflowData?.sequence_number}`}
+        {`Test Run#${historyWorkflowData?.sequence_number}`}
       </div>
-      {
-        isChatMode
-          ? <ChatRecord />
-          : (
-            <Run
-              runID={historyWorkflowData?.id || ''}
-              // getResultCallback={getResultCallback}
-            />
-          )
-      }
+      <Run runID={historyWorkflowData?.id || ''} />
     </div>
   )
 }
diff --git a/web/app/components/workflow/panel/run-history.tsx b/web/app/components/workflow/panel/run-history.tsx
index 64e4369fda..e6224e726d 100644
--- a/web/app/components/workflow/panel/run-history.tsx
+++ b/web/app/components/workflow/panel/run-history.tsx
@@ -38,7 +38,7 @@ const RunHistory = () => {
     return null
 
   return (
-    <div className='flex flex-col ml-2 w-[200px] h-full bg-white border-[0.5px] border-gray-200 shadow-xl rounded-l-2xl'>
+    <div className='absolute -top-2 right-2 flex flex-col ml-2 w-[240px] min-h-[214px] bg-white border-[0.5px] border-gray-200 shadow-xl rounded-xl overflow-y-auto z-[11]'>
       <div className='shrink-0 flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'>
         {t('workflow.common.runHistory')}
         <div