diff --git a/seatunnel-engine/seatunnel-engine-ui/src/components/node-log/index.tsx b/seatunnel-engine/seatunnel-engine-ui/src/components/node-log/index.tsx
new file mode 100644
index 00000000000..a2c80353b6e
--- /dev/null
+++ b/seatunnel-engine/seatunnel-engine-ui/src/components/node-log/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { getNodeLogs } from '@/service/node-log'
+import type { NodeLog } from '@/service/node-log/types'
+import { NCollapse, NCollapseItem } from 'naive-ui'
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup(props) {
+    const logList = ref([] as NodeLog[])
+    getNodeLogs().then((res) => (logList.value = res))
+    return () => (
+      <div class="p-6">
+        <NCollapse accordion>
+          {logList.value.map((log) => (
+            <NCollapseItem title={log.logName}>
+              <iframe src={log.logLink} width="100%" height="700px" style="border: none" />
+            </NCollapseItem>
+          ))}
+        </NCollapse>
+      </div>
+    )
+  }
+})
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/router/routes.ts b/seatunnel-engine/seatunnel-engine-ui/src/router/routes.ts
index 58296e67451..ead7a047de5 100644
--- a/seatunnel-engine/seatunnel-engine-ui/src/router/routes.ts
+++ b/seatunnel-engine/seatunnel-engine-ui/src/router/routes.ts
@@ -48,11 +48,23 @@ const routes: RouteRecordRaw[] = [
         meta: { title: 'workers', showSide: true, activeSide: 'workers' },
         component: () => import('@/views/managers')
       },
+      {
+        path: 'managers/workers/logs/:hostname',
+        name: 'managers-workers-logs',
+        meta: { title: 'workers', showSide: true, activeSide: 'workers' },
+        component: () => import('@/views/managers/logs')
+      },
       {
         path: 'managers/master',
         name: 'managers-master',
         meta: { title: 'master', showSide: true, activeSide: 'master' },
         component: () => import('@/views/managers')
+      },
+      {
+        path: 'managers/master/logs/:master-hostname',
+        name: 'managers-master-logs',
+        meta: { title: 'master', showSide: true, activeSide: 'master' },
+        component: () => import('@/views/managers/logs')
       }
     ]
   }
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/service/node-log/index.ts b/seatunnel-engine/seatunnel-engine-ui/src/service/node-log/index.ts
new file mode 100644
index 00000000000..5b125dd09e4
--- /dev/null
+++ b/seatunnel-engine/seatunnel-engine-ui/src/service/node-log/index.ts
@@ -0,0 +1,27 @@
+/*
+ * 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 { get } from '@/service/service'
+import type { NodeLog } from './types'
+
+export const getNodeLogs = () => get<NodeLog[]>(`/logs?format=json`)
+export const getNodeLogContent = (logName: string) => get<NodeLog[]>(`/log/${logName}`)
+
+export const JobLogService = {
+  getNodeLogs,
+  getNodeLogContent
+}
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/service/node-log/types.ts b/seatunnel-engine/seatunnel-engine-ui/src/service/node-log/types.ts
new file mode 100644
index 00000000000..af1a357b46b
--- /dev/null
+++ b/seatunnel-engine/seatunnel-engine-ui/src/service/node-log/types.ts
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+export interface NodeLog {
+  node: string
+  logLink: string
+  logName: string
+}
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/views/managers/index.tsx b/seatunnel-engine/seatunnel-engine-ui/src/views/managers/index.tsx
index 758a8034342..6f6cd387cb7 100644
--- a/seatunnel-engine/seatunnel-engine-ui/src/views/managers/index.tsx
+++ b/seatunnel-engine/seatunnel-engine-ui/src/views/managers/index.tsx
@@ -22,7 +22,7 @@ import { NButton } from 'naive-ui'
 import { NSpace, NLayout, NLayoutContent } from 'naive-ui'
 import { managerService } from '@/service/manager'
 import type { Monitor } from '@/service/manager/types'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 export default defineComponent({
   setup() {
@@ -40,6 +40,10 @@ export default defineComponent({
 
     function createColumns(): DataTableColumns<Monitor> {
       const view = (row: Monitor) => {}
+      const router = useRouter()
+      const logView = (row: Monitor) => {
+        router.push({name: "managers-workers-logs", params: {'hostname': `${row.host}_${row.port}`}})
+      }
       return [
         {
           title: 'Host',
@@ -72,6 +76,22 @@ export default defineComponent({
           //       { default: () => 'View' }
           //     )
           //   }
+        },
+        {
+          title: 'Action',
+          key: 'actions',
+          render(row) {
+            return h(
+                NButton,
+                {
+                  strong: true,
+                  tertiary: true,
+                  size: 'small',
+                  onClick: () => logView(row)
+                },
+                { default: () => 'ViewLog' }
+            )
+          }
         }
       ]
     }
diff --git a/seatunnel-engine/seatunnel-engine-ui/src/views/managers/logs.tsx b/seatunnel-engine/seatunnel-engine-ui/src/views/managers/logs.tsx
new file mode 100644
index 00000000000..b9d41c85983
--- /dev/null
+++ b/seatunnel-engine/seatunnel-engine-ui/src/views/managers/logs.tsx
@@ -0,0 +1,15 @@
+import NodeLog from "@/components/node-log";
+import { NLayout, NLayoutContent } from "naive-ui";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+    setup() {
+    return () => (
+      <NLayout>
+        <NLayoutContent>
+          <NodeLog></NodeLog>
+        </NLayoutContent>
+      </NLayout>
+    )
+    }
+})
\ No newline at end of file