diff --git a/client/src/pages/AccountsPage.tsx b/client/src/pages/AccountsPage.tsx
index 19e53a0..1442c07 100644
--- a/client/src/pages/AccountsPage.tsx
+++ b/client/src/pages/AccountsPage.tsx
@@ -2,12 +2,12 @@ import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { AccountStatus, AllUser, AllUserResponse } from "@/types/user";
 import Header from "@/components/Header";
-import ContentDrawer from "@/components/ContentDrawer";
-import UserCreate from "@/components/UserCreate";
+import ContentDrawer from "@/components/drawers/ContentDrawer";
+import UserCreate from "@/components/drawers/users/UserCreate";
 import { Avatar, Table } from "antd";
 import { TableProps } from "antd/lib";
 import { UserService } from "@/services/userService";
-import UserEdit from "@/components/UserEdit";
+import UserEdit from "@/components/drawers/users/UserEdit";
 import { useSearchParams } from "react-router-dom";
 
 export default function AccountsPage() {
@@ -201,7 +201,7 @@ export default function AccountsPage() {
       <ContentDrawer
         open={openCreate}
         closeDrawer={closeCreateDrawer}
-        type="create"
+        type="userCreate"
       >
         <UserCreate getUsers={getUsers} closeDrawer={closeCreateDrawer} />
       </ContentDrawer>
@@ -211,7 +211,7 @@ export default function AccountsPage() {
         email={activeAccount?.email}
         open={openEdit}
         closeDrawer={closeEditDrawer}
-        type="edit"
+        type="userEdit"
       >
         <UserEdit userId={activeAccount?.id} closeDrawer={closeEditDrawer} />
       </ContentDrawer>
diff --git a/client/src/pages/ProcessDiagramPage.tsx b/client/src/pages/ProcessDiagramPage.tsx
index eaabfd7..edf6637 100644
--- a/client/src/pages/ProcessDiagramPage.tsx
+++ b/client/src/pages/ProcessDiagramPage.tsx
@@ -1,11 +1,33 @@
-import Header from '@/components/Header';
-import { useTranslation } from 'react-i18next';
+import Header from "@/components/Header";
+import { useTranslation } from "react-i18next";
+
+import ReactFlowDrawer from "@/components/ReactFlowDrawer";
+import { useState } from "react";
+import ContentDrawer from "@/components/drawers/ContentDrawer";
 
 export default function ProcessDiagramPage() {
   const { t } = useTranslation();
+
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+  const showDrawer = () => setIsDrawerOpen(true);
+  const closeDrawer = () => {
+    setIsDrawerOpen(false);
+  };
+
   return (
     <>
-      <Header title={t('processDiagrams')} />
+      <Header title={t("processDiagrams")} />
+      <div style={{ width: "100%", height: "100%" }}>
+        <ReactFlowDrawer showDrawer={showDrawer} />
+      </div>
+
+      <ContentDrawer
+        open={isDrawerOpen}
+        closeDrawer={closeDrawer}
+        children={undefined}
+        type={"nodeEdit"}
+      ></ContentDrawer>
     </>
   );
 }