diff --git a/web/app/components/workflow/block-selector/tools/item.tsx b/web/app/components/workflow/block-selector/tools/item.tsx
index 3cef90c33e..24f92e1a78 100644
--- a/web/app/components/workflow/block-selector/tools/item.tsx
+++ b/web/app/components/workflow/block-selector/tools/item.tsx
@@ -105,9 +105,10 @@ const Item = ({
               provider_id: data.id,
               provider_type: data.type,
               tool_name: tool.name,
-              _icon: data.icon,
               title: tool.label[language],
-              desc: tool.description[language],
+              _icon: data.icon,
+              _about: tool.description[language],
+              _author: data.author,
             })}
           >
             <div className='absolute left-[22px] w-[1px] h-8 bg-black/5' />
diff --git a/web/app/components/workflow/block-selector/types.ts b/web/app/components/workflow/block-selector/types.ts
index 09fe34c87c..6d746ca623 100644
--- a/web/app/components/workflow/block-selector/types.ts
+++ b/web/app/components/workflow/block-selector/types.ts
@@ -30,6 +30,7 @@ export type ToolDefaultValue = {
   provider_type: string
   tool_name: string
   title: string
-  desc: string
   _icon: Collection['icon']
+  _about: string
+  _author: string
 }
diff --git a/web/app/components/workflow/constants.ts b/web/app/components/workflow/constants.ts
index 69e618ca9c..f1a16cca49 100644
--- a/web/app/components/workflow/constants.ts
+++ b/web/app/components/workflow/constants.ts
@@ -14,24 +14,28 @@ import EndNodeDefault from './nodes/end/default'
 
 export const NODES_INITIAL_DATA = {
   [BlockEnum.Start]: {
+    _author: 'Dify',
     type: BlockEnum.Start,
     title: '',
     desc: '',
     ...StartNodeDefault.defaultValue,
   },
   [BlockEnum.End]: {
+    _author: 'Dify',
     type: BlockEnum.End,
     title: '',
     desc: '',
     ...EndNodeDefault.defaultValue,
   },
   [BlockEnum.DirectAnswer]: {
+    _author: 'Dify',
     type: BlockEnum.DirectAnswer,
     title: '',
     desc: '',
     ...DirectAnswerDefault.defaultValue,
   },
   [BlockEnum.LLM]: {
+    _author: 'Dify',
     type: BlockEnum.LLM,
     title: '',
     desc: '',
@@ -39,6 +43,7 @@ export const NODES_INITIAL_DATA = {
     ...LLMDefault.defaultValue,
   },
   [BlockEnum.KnowledgeRetrieval]: {
+    _author: 'Dify',
     type: BlockEnum.KnowledgeRetrieval,
     title: '',
     desc: '',
@@ -48,6 +53,7 @@ export const NODES_INITIAL_DATA = {
     ...KnowledgeRetrievalDefault.defaultValue,
   },
   [BlockEnum.IfElse]: {
+    _author: 'Dify',
     type: BlockEnum.IfElse,
     title: '',
     desc: '',
@@ -55,6 +61,7 @@ export const NODES_INITIAL_DATA = {
     ...IfElseDefault.defaultValue,
   },
   [BlockEnum.Code]: {
+    _author: 'Dify',
     type: BlockEnum.Code,
     title: '',
     desc: '',
@@ -65,6 +72,7 @@ export const NODES_INITIAL_DATA = {
     ...CodeDefault.defaultValue,
   },
   [BlockEnum.TemplateTransform]: {
+    _author: 'Dify',
     type: BlockEnum.TemplateTransform,
     title: '',
     desc: '',
@@ -73,6 +81,7 @@ export const NODES_INITIAL_DATA = {
     ...TemplateTransformDefault.defaultValue,
   },
   [BlockEnum.QuestionClassifier]: {
+    _author: 'Dify',
     type: BlockEnum.QuestionClassifier,
     title: '',
     desc: '',
@@ -81,6 +90,7 @@ export const NODES_INITIAL_DATA = {
     ...QuestionClassifierDefault.defaultValue,
   },
   [BlockEnum.HttpRequest]: {
+    _author: 'Dify',
     type: BlockEnum.HttpRequest,
     title: '',
     desc: '',
@@ -88,6 +98,7 @@ export const NODES_INITIAL_DATA = {
     ...HttpRequestDefault.defaultValue,
   },
   [BlockEnum.VariableAssigner]: {
+    _author: 'Dify',
     type: BlockEnum.VariableAssigner,
     title: '',
     desc: '',
@@ -106,3 +117,4 @@ export const NODES_INITIAL_DATA = {
 export const NODE_WIDTH = 220
 export const X_OFFSET = 64
 export const Y_OFFSET = 39
+export const TREE_DEEPTH = 20
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index c63ab2ae0d..25628c93f2 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -202,7 +202,9 @@ const WorkflowWrap: FC<WorkflowProps> = ({
 
   if (isLoading) {
     return (
-      <Loading />
+      <div className='flex justify-center items-center relative w-full h-full bg-[#F0F2F7]'>
+        <Loading />
+      </div>
     )
   }
 
diff --git a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
index 6cfdd83b2d..fa68ab6e7f 100644
--- a/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
@@ -11,18 +11,21 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import type { Node } from '@/app/components/workflow/types'
 
 type PanelOperatorProps = {
-  nodeId: string
+  id: string
+  data: Node['data']
 }
 const PanelOperator = ({
-  nodeId,
+  id,
+  data,
 }: PanelOperatorProps) => {
   const edges = useEdges()
   const { handleNodeDelete } = useWorkflow()
   const [open, setOpen] = useState(false)
 
-  const edge = edges.find(edge => edge.target === nodeId)
+  const edge = edges.find(edge => edge.target === id)
 
   return (
     <PortalToFollowElem
@@ -49,7 +52,7 @@ const PanelOperator = ({
         <div className='w-[240px] border-[0.5px] border-gray-200 rounded-2xl shadow-xl bg-white'>
           <div className='p-1'>
             <ChangeBlock
-              nodeId={nodeId}
+              nodeId={id}
               sourceHandle={edge?.sourceHandle || 'source'}
             />
             <div className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'>Help Link</div>
@@ -58,7 +61,7 @@ const PanelOperator = ({
           <div className='p-1'>
             <div
               className='flex items-center px-3 h-8 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50'
-              onClick={() => handleNodeDelete(nodeId)}
+              onClick={() => handleNodeDelete(id)}
             >
               Delete
             </div>
@@ -69,10 +72,10 @@ const PanelOperator = ({
               <div className='flex items-center mb-1 h-[22px] font-medium'>
                 ABOUT
               </div>
-              <div className='text-gray-500 leading-[18px]'>A tool for performing a Google SERP search and extracting snippets and webpages.Input should be a search query.</div>
+              <div className='text-gray-500 leading-[18px]'>{data._about}</div>
               <div className='my-2 h-[0.5px] bg-black/5'></div>
               <div className='leading-[18px]'>
-                Created By Dify
+                Created By {data._author}
               </div>
             </div>
           </div>
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index c82f3ae4a8..53296cc6a6 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/web/app/components/workflow/nodes/_base/panel.tsx
@@ -34,7 +34,6 @@ const BasePanel: FC<BasePanelProps> = ({
   data,
   children,
 }) => {
-  const type = data.type
   const {
     handleNodeSelect,
     handleNodeDataUpdate,
@@ -75,7 +74,7 @@ const BasePanel: FC<BasePanelProps> = ({
                 </TooltipPlus>
               )
             }
-            <PanelOperator nodeId={id} />
+            <PanelOperator id={id} data={data} />
             <div className='mx-3 w-[1px] h-3.5 bg-gray-200' />
             <div
               className='flex items-center justify-center w-6 h-6 cursor-pointer'
diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts
index 963b39d8d3..d899e2a516 100644
--- a/web/app/components/workflow/types.ts
+++ b/web/app/components/workflow/types.ts
@@ -31,6 +31,8 @@ export type CommonNodeType<T = {}> = {
   _targetBranches?: Branch[]
   _isSingleRun?: boolean
   _icon?: Collection['icon']
+  _about?: string
+  _author?: string
   title: string
   desc: string
   type: BlockEnum