diff --git a/ui/package.json b/ui/package.json
index 623a5c6dc..6b384d93e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -20,12 +20,13 @@
     "moment": "^2.29.2",
     "monaco-editor": "^0.44.0",
     "node-forge": "^1.3.0",
+    "orkes-workflow-visualizer": "^1.0.0",
     "parse-svg-path": "^0.1.2",
     "prop-types": "^15.7.2",
-    "react": "^16.8.0",
+    "react": "^18.3.1",
     "react-cron-generator": "^1.3.5",
     "react-data-table-component": "^6.11.8",
-    "react-dom": "^16.8.0",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-is": "^17.0.2",
     "react-query": "^3.19.4",
diff --git a/ui/src/pages/definition/WorkflowDefinition.jsx b/ui/src/pages/definition/WorkflowDefinition.jsx
index 77963f518..7f18244ca 100644
--- a/ui/src/pages/definition/WorkflowDefinition.jsx
+++ b/ui/src/pages/definition/WorkflowDefinition.jsx
@@ -12,7 +12,6 @@ import {
   useWorkflowNamesAndVersions,
 } from "../../data/workflow";
 import WorkflowDAG from "../../components/diagram/WorkflowDAG";
-import WorkflowGraph from "../../components/diagram/WorkflowGraph";
 import ResetConfirmationDialog from "./ResetConfirmationDialog";
 import {
   configureMonaco,
@@ -23,6 +22,7 @@ import SaveWorkflowDialog from "./SaveWorkflowDialog";
 import update from "immutability-helper";
 import { usePushHistory } from "../../components/NavLink";
 import { timestampRenderer } from "../../utils/helpers";
+import { WorkflowVisualizer } from "orkes-workflow-visualizer";
 
 import {
   KeyboardArrowLeftRounded,
@@ -67,8 +67,8 @@ const useStyles = makeStyles({
     gap: 8,
   },
   editorLineDecorator: {
-    backgroundColor: "rgb(45, 45, 45, 0.1)"
-  }
+    backgroundColor: "rgb(45, 45, 45, 0.1)",
+  },
 });
 
 const actions = {
@@ -240,21 +240,26 @@ export default function Workflow() {
   };
 
   const handleWorkflowNodeClick = (node) => {
-    let editor = editorRef.current.getModel()
-    let searchResult = editor.findMatches(`"taskReferenceName": "${node.ref}"`)
-    if (searchResult.length){
-      editorRef.current.revealLineInCenter(searchResult[0]?.range?.startLineNumber, 0);
-      setDecorations(editorRef.current.deltaDecorations(decorations, [
-        {
-          range: searchResult[0]?.range,
-          options: {
-            isWholeLine: true,
-            inlineClassName: classes.editorLineDecorator
-          }
-        }
-      ]))
+    let editor = editorRef.current.getModel();
+    let searchResult = editor.findMatches(`"taskReferenceName": "${node.ref}"`);
+    if (searchResult.length) {
+      editorRef.current.revealLineInCenter(
+        searchResult[0]?.range?.startLineNumber,
+        0
+      );
+      setDecorations(
+        editorRef.current.deltaDecorations(decorations, [
+          {
+            range: searchResult[0]?.range,
+            options: {
+              isWholeLine: true,
+              inlineClassName: classes.editorLineDecorator,
+            },
+          },
+        ])
+      );
     }
-  }
+  };
 
   return (
     <>
@@ -369,8 +374,17 @@ export default function Workflow() {
           className={classes.resizer}
           onMouseDown={(e) => handleMouseDown(e)}
         />
-        <div className={classes.workflowGraph}>
-          {dag && <WorkflowGraph dag={dag} onClick={handleWorkflowNodeClick} />}
+        <div className={classes.workflowGraph} style={{ overflow: "scroll" }}>
+          {dag && dag?.workflowDef && (
+            <WorkflowVisualizer
+              maxHeightOverride
+              pannable
+              zoomable
+              zoom={0.7}
+              data={dag?.workflowDef}
+              onClick={(e, data) => handleWorkflowNodeClick({ ref: data?.id })}
+            />
+          )}
         </div>
       </div>
     </>
diff --git a/ui/src/pages/execution/Execution.jsx b/ui/src/pages/execution/Execution.jsx
index 656713697..2527f2436 100644
--- a/ui/src/pages/execution/Execution.jsx
+++ b/ui/src/pages/execution/Execution.jsx
@@ -222,7 +222,12 @@ export default function Execution() {
                   </div>
                 )}
                 <div className={classes.frItem}>
-                  <NavLink newTab path={`/workflowDef/${execution.workflowName}`}>Definition</NavLink>
+                  <NavLink
+                    newTab
+                    path={`/workflowDef/${execution.workflowName}`}
+                  >
+                    Definition
+                  </NavLink>
                 </div>
                 <SecondaryButton onClick={refresh} style={{ marginRight: 10 }}>
                   Refresh
diff --git a/ui/src/pages/execution/TaskDetails.jsx b/ui/src/pages/execution/TaskDetails.jsx
index 6948f645f..0850a7d4f 100644
--- a/ui/src/pages/execution/TaskDetails.jsx
+++ b/ui/src/pages/execution/TaskDetails.jsx
@@ -1,9 +1,9 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Tabs, Tab, Paper } from "../../components";
 import Timeline from "./Timeline";
 import TaskList from "./TaskList";
-import WorkflowGraph from "../../components/diagram/WorkflowGraph";
 import { makeStyles } from "@material-ui/styles";
+import { WorkflowVisualizer } from "orkes-workflow-visualizer";
 
 const useStyles = makeStyles({
   taskWrapper: {
@@ -32,11 +32,14 @@ export default function TaskDetails({
         </Tabs>
 
         {tabIndex === 0 && (
-          <WorkflowGraph
-            selectedTask={selectedTask}
+          <WorkflowVisualizer
+            maxHeightOverride
+            pannable
+            zoomable
+            zoom={0.7}
+            data={dag?.execution}
             executionMode={true}
-            dag={dag}
-            onClick={setSelectedTask}
+            onClick={(e, data) => setSelectedTask({ ref: data?.id })}
           />
         )}
         {tabIndex === 1 && (