diff --git a/dolphinscheduler-ui-next/src/router/modules/projects.ts b/dolphinscheduler-ui-next/src/router/modules/projects.ts
index b780a75af9..68818b8b97 100644
--- a/dolphinscheduler-ui-next/src/router/modules/projects.ts
+++ b/dolphinscheduler-ui-next/src/router/modules/projects.ts
@@ -56,7 +56,15 @@ export default {
       }
     },
     {
-      path: '/projects/:projectCode/workflow/definitions/create',
+      path: '/projects/:projectCode/workflow-definitions',
+      name: 'workflow-definition-list',
+      component: components['workflow-definition-list'],
+      meta: {
+        title: '工作流定义'
+      }
+    },
+    {
+      path: '/projects/:projectCode/workflow-definitions/create',
       name: 'workflow-definition-create',
       component: components['workflow-definition-create'],
       meta: {
@@ -64,12 +72,44 @@ export default {
       }
     },
     {
-      path: '/projects/:projectCode/workflow/definitions/:code',
+      path: '/projects/:projectCode/workflow-definitions/:code',
       name: 'workflow-definition-details',
       component: components['workflow-definition-details'],
       meta: {
         title: '工作流定义详情'
       }
+    },
+    {
+      path: '/projects/:projectCode/workflow-instances',
+      name: 'workflow-instance-list',
+      component: components['workflow-instance-list'],
+      meta: {
+        title: '工作流实例'
+      }
+    },
+    {
+      path: '/projects/:projectCode/workflow-instances/:id',
+      name: 'workflow-instance-details',
+      component: components['workflow-instance-details'],
+      meta: {
+        title: '工作流实例详情'
+      }
+    },
+    {
+      path: '/projects/:projectCode/task-instances',
+      name: 'task-instance-list',
+      component: components['task-instance-list'],
+      meta: {
+        title: '任务实例'
+      }
+    },
+    {
+      path: '/projects/:projectCode/task-definitions',
+      name: 'task-definition-list',
+      component: components['task-definition-list'],
+      meta: {
+        title: '任务定义'
+      }
     }
   ]
 }
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/hook-demo.ts b/dolphinscheduler-ui-next/src/views/projects/dag/workflow/hook-demo.ts
deleted file mode 100644
index 73cd46566b..0000000000
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/hook-demo.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { ref, onMounted, Ref, onUnmounted } from 'vue'
-
-interface Options {
-  // readonly: Ref<boolean>;
-  // canvas: Ref<HTMLElement | undefined>;
-}
-
-/**
- * Canvas Init
- * 1. Bind the graph to the dom
- * 2. Redraw when the page is resized
- * 3. Register custom graphics
- */
-export function useCanvasInit(options: Options) {
-  // Whether the graph can be operated
-  const {} = options
-
-  return {}
-}
diff --git a/dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx b/dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx
new file mode 100644
index 0000000000..c14060b52b
--- /dev/null
+++ b/dolphinscheduler-ui-next/src/views/projects/task-definition-list/task-definition-list.tsx
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'TaskDefinitionList',
+  setup() {
+    return () => <div>TaskDefinitionList</div>
+  }
+})
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/task/config.ts b/dolphinscheduler-ui-next/src/views/projects/task-details/config.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/task/config.ts
rename to dolphinscheduler-ui-next/src/views/projects/task-details/config.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/task/task-config.tsx b/dolphinscheduler-ui-next/src/views/projects/task-details/task-config.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/task/task-config.tsx
rename to dolphinscheduler-ui-next/src/views/projects/task-details/task-config.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/index.tsx b/dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx
similarity index 92%
rename from dolphinscheduler-ui-next/src/views/projects/dag/index.tsx
rename to dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx
index 7b43218c4e..86a203d9cf 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/task-instance-list/task-instance-list.tsx
@@ -18,8 +18,8 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'Projects',
+  name: 'TaskInstanceList',
   setup() {
-    return () => <div>Projects</div>
+    return () => <div>TaskInstanceList</div>
   }
 })
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-definition-list/workflow-definition-list.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-definition-list/workflow-definition-list.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-canvas.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-canvas.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-canvas.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-canvas.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-config.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-config.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-config.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-config.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-hooks.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-hooks.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-hooks.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-hooks.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-sidebar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
similarity index 97%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-sidebar.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
index e1ec7d2f77..cd3a0f8da4 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-sidebar.tsx
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-sidebar.tsx
@@ -18,7 +18,7 @@
 import type { PropType, Ref } from 'vue'
 import type { Dragged } from './dag'
 import { defineComponent, ref, inject } from 'vue'
-import { ALL_TASK_TYPES } from '../task/config'
+import { ALL_TASK_TYPES } from '../task-details/config'
 import { useSidebarDrag } from './dag-hooks'
 import Styles from './dag.module.scss'
 
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-toolbar.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-toolbar.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag-toolbar.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag-toolbar.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
similarity index 54%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.module.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
index 37f4d355a1..2298363907 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.module.scss
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.module.scss
@@ -83,52 +83,52 @@ $toolbarHeight: 50px;
     background-size: 100% 100%;
     margin-right: 10px;
     &.icon-shell {
-      background-image: url("../../../../assets/images/task-icons/shell.png");
+      background-image: url("../../../assets/images/task-icons/shell.png");
     }
     &.icon-sub_process {
-      background-image: url("../../../../assets/images/task-icons/sub_process.png");
+      background-image: url("../../../assets/images/task-icons/sub_process.png");
     }
     &.icon-procedure {
-      background-image: url("../../../../assets/images/task-icons/procedure.png");
+      background-image: url("../../../assets/images/task-icons/procedure.png");
     }
     &.icon-sql {
-      background-image: url("../../../../assets/images/task-icons/sql.png");
+      background-image: url("../../../assets/images/task-icons/sql.png");
     }
     &.icon-flink {
-      background-image: url("../../../../assets/images/task-icons/flink.png");
+      background-image: url("../../../assets/images/task-icons/flink.png");
     }
     &.icon-mr {
-      background-image: url("../../../../assets/images/task-icons/mr.png");
+      background-image: url("../../../assets/images/task-icons/mr.png");
     }
     &.icon-python {
-      background-image: url("../../../../assets/images/task-icons/python.png");
+      background-image: url("../../../assets/images/task-icons/python.png");
     }
     &.icon-dependent {
-      background-image: url("../../../../assets/images/task-icons/dependent.png");
+      background-image: url("../../../assets/images/task-icons/dependent.png");
     }
     &.icon-http {
-      background-image: url("../../../../assets/images/task-icons/http.png");
+      background-image: url("../../../assets/images/task-icons/http.png");
     }
     &.icon-datax {
-      background-image: url("../../../../assets/images/task-icons/datax.png");
+      background-image: url("../../../assets/images/task-icons/datax.png");
     }
     &.icon-pigeon {
-      background-image: url("../../../../assets/images/task-icons/pigeon.png");
+      background-image: url("../../../assets/images/task-icons/pigeon.png");
     }
     &.icon-sqoop {
-      background-image: url("../../../../assets/images/task-icons/sqoop.png");
+      background-image: url("../../../assets/images/task-icons/sqoop.png");
     }
     &.icon-conditions {
-      background-image: url("../../../../assets/images/task-icons/conditions.png");
+      background-image: url("../../../assets/images/task-icons/conditions.png");
     }
     &.icon-seatunnel {
-      background-image: url("../../../../assets/images/task-icons/seatunnel.png");
+      background-image: url("../../../assets/images/task-icons/seatunnel.png");
     }
     &.icon-spark {
-      background-image: url("../../../../assets/images/task-icons/spark.png");
+      background-image: url("../../../assets/images/task-icons/spark.png");
     }
     &.icon-switch {
-      background-image: url("../../../../assets/images/task-icons/switch.png");
+      background-image: url("../../../assets/images/task-icons/switch.png");
     }
   }
 
@@ -138,52 +138,52 @@ $toolbarHeight: 50px;
     background-color: $blueBg;
     .sidebar-icon {
       &.icon-shell {
-        background-image: url("../../../../assets/images/task-icons/shell_hover.png");
+        background-image: url("../../../assets/images/task-icons/shell_hover.png");
       }
       &.icon-sub_process {
-        background-image: url("../../../../assets/images/task-icons/sub_process_hover.png");
+        background-image: url("../../../assets/images/task-icons/sub_process_hover.png");
       }
       &.icon-procedure {
-        background-image: url("../../../../assets/images/task-icons/procedure_hover.png");
+        background-image: url("../../../assets/images/task-icons/procedure_hover.png");
       }
       &.icon-sql {
-        background-image: url("../../../../assets/images/task-icons/sql_hover.png");
+        background-image: url("../../../assets/images/task-icons/sql_hover.png");
       }
       &.icon-flink {
-        background-image: url("../../../../assets/images/task-icons/flink_hover.png");
+        background-image: url("../../../assets/images/task-icons/flink_hover.png");
       }
       &.icon-mr {
-        background-image: url("../../../../assets/images/task-icons/mr_hover.png");
+        background-image: url("../../../assets/images/task-icons/mr_hover.png");
       }
       &.icon-python {
-        background-image: url("../../../../assets/images/task-icons/python_hover.png");
+        background-image: url("../../../assets/images/task-icons/python_hover.png");
       }
       &.icon-dependent {
-        background-image: url("../../../../assets/images/task-icons/dependent_hover.png");
+        background-image: url("../../../assets/images/task-icons/dependent_hover.png");
       }
       &.icon-http {
-        background-image: url("../../../../assets/images/task-icons/http_hover.png");
+        background-image: url("../../../assets/images/task-icons/http_hover.png");
       }
       &.icon-datax {
-        background-image: url("../../../../assets/images/task-icons/datax_hover.png");
+        background-image: url("../../../assets/images/task-icons/datax_hover.png");
       }
       &.icon-pigeon {
-        background-image: url("../../../../assets/images/task-icons/pigeon_hover.png");
+        background-image: url("../../../assets/images/task-icons/pigeon_hover.png");
       }
       &.icon-sqoop {
-        background-image: url("../../../../assets/images/task-icons/sqoop_hover.png");
+        background-image: url("../../../assets/images/task-icons/sqoop_hover.png");
       }
       &.icon-conditions {
-        background-image: url("../../../../assets/images/task-icons/conditions_hover.png");
+        background-image: url("../../../assets/images/task-icons/conditions_hover.png");
       }
       &.icon-seatunnel {
-        background-image: url("../../../../assets/images/task-icons/seatunnel_hover.png");
+        background-image: url("../../../assets/images/task-icons/seatunnel_hover.png");
       }
       &.icon-spark {
-        background-image: url("../../../../assets/images/task-icons/spark_hover.png");
+        background-image: url("../../../assets/images/task-icons/spark_hover.png");
       }
       &.icon-switch {
-        background-image: url("../../../../assets/images/task-icons/switch_hover.png");
+        background-image: url("../../../assets/images/task-icons/switch_hover.png");
       }
     }
   }
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/dag.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/dag.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-drop.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-drop.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-drop.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-drop.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-init.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-init.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-canvas-init.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-canvas-init.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-cell-active.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-cell-active.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-cell-active.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-cell-active.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-graph-operations.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
similarity index 98%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-graph-operations.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
index a3127d8f14..809e4dc5a8 100644
--- a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-graph-operations.ts
+++ b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-graph-operations.ts
@@ -18,7 +18,7 @@
 import type { Ref } from 'vue'
 import type { Node, Graph, Edge } from '@antv/x6'
 import { X6_NODE_NAME, X6_EDGE_NAME } from './dag-config'
-import { ALL_TASK_TYPES } from '../task/config'
+import { ALL_TASK_TYPES } from '../task-details/config'
 import utils from '@/utils'
 
 interface Options {
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-node-search.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-node-search.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-node-search.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-node-search.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-sidebar-drag.ts b/dolphinscheduler-ui-next/src/views/projects/workflow-details/use-sidebar-drag.ts
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/use-sidebar-drag.ts
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/use-sidebar-drag.ts
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.module.scss b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.module.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.module.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.module.scss
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-create.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-create.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-details.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-definition-details.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-definition-details.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-details.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-instance-details.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-details.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/workflow-instance-details.tsx
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/x6-style.scss b/dolphinscheduler-ui-next/src/views/projects/workflow-details/x6-style.scss
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/x6-style.scss
rename to dolphinscheduler-ui-next/src/views/projects/workflow-details/x6-style.scss
diff --git a/dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-list.tsx b/dolphinscheduler-ui-next/src/views/projects/workflow-instance-list/workflow-instance-list.tsx
similarity index 100%
rename from dolphinscheduler-ui-next/src/views/projects/dag/workflow/workflow-instance-list.tsx
rename to dolphinscheduler-ui-next/src/views/projects/workflow-instance-list/workflow-instance-list.tsx