diff --git a/src/management-system-v2/app/(dashboard)/processes/[processId]/modeler.tsx b/src/management-system-v2/app/(dashboard)/processes/[processId]/modeler.tsx
index d66486ba0..4f775df37 100644
--- a/src/management-system-v2/app/(dashboard)/processes/[processId]/modeler.tsx
+++ b/src/management-system-v2/app/(dashboard)/processes/[processId]/modeler.tsx
@@ -1,6 +1,14 @@
 'use client';
 
-import React, { useCallback, useEffect, useMemo, useRef, useState, useTransition } from 'react';
+import React, {
+  use,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useTransition,
+} from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import ModelerToolbar from './modeler-toolbar';
 import XmlEditor from './xml-editor';
@@ -9,8 +17,8 @@ import { debounce } from '@/lib/utils';
 import VersionToolbar from './version-toolbar';
 import useMobileModeler from '@/lib/useMobileModeler';
 import { updateProcess } from '@/lib/data/processes';
-import { is as bpmnIs } from 'bpmn-js/lib/util/ModelUtil';
 import { App } from 'antd';
+import { is as bpmnIs, isAny as bpmnIsAny } from 'bpmn-js/lib/util/ModelUtil';
 import BPMNCanvas, { BPMNCanvasProps, BPMNCanvasRef } from '@/components/bpmn-canvas';
 
 type ModelerProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -151,6 +159,26 @@ const Modeler = ({ versionName, process, versions, ...divProps }: ModelerProps)
     }
   }, [messageApi, subprocessId]);
 
+  useEffect(() => {
+    if (modeler.current) {
+      const canvas = modeler.current.getCanvas();
+      const subprocessPlane = canvas
+        .getRootElements()
+        .find((el: any) => el.businessObject.id === subprocessId);
+      if (subprocessPlane) {
+        canvas.setRootElement(subprocessPlane);
+      } else {
+        const processPlane = canvas
+          .getRootElements()
+          .find((el) => bpmnIsAny(el, ['bpmn:Process', 'bpmn:Collaboration']));
+        if (!processPlane) {
+          return;
+        }
+        canvas.setRootElement(processPlane);
+      }
+    }
+  }, [subprocessId]);
+
   const handleOpenXmlEditor = async () => {
     // Undefined can maybe happen when click happens during router transition?
     if (modeler.current) {
diff --git a/src/management-system-v2/app/(dashboard)/processes/[processId]/wrapper.tsx b/src/management-system-v2/app/(dashboard)/processes/[processId]/wrapper.tsx
index 7d5a5de47..095f41247 100644
--- a/src/management-system-v2/app/(dashboard)/processes/[processId]/wrapper.tsx
+++ b/src/management-system-v2/app/(dashboard)/processes/[processId]/wrapper.tsx
@@ -26,8 +26,6 @@ import EllipsisBreadcrumb from '@/components/ellipsis-breadcrumb';
 import { is as bpmnIs, isAny as bpmnIsAny } from 'bpmn-js/lib/util/ModelUtil';
 import { isExpanded } from 'bpmn-js/lib/util/DiUtil';
 import { isPlane } from 'bpmn-js/lib/util/DrilldownUtil';
-import type ElementRegistry from 'diagram-js/lib/core/ElementRegistry';
-import type Canvas from 'diagram-js/lib/core/Canvas';
 import { Root } from 'bpmn-js/lib/model/Types';
 
 type SubprocessInfo = {