diff --git a/src/components/DataflowCanvasUpdated.jsx b/src/components/DataflowCanvasUpdated.jsx
index 5c59940..1e319ec 100644
--- a/src/components/DataflowCanvasUpdated.jsx
+++ b/src/components/DataflowCanvasUpdated.jsx
@@ -228,7 +228,18 @@ const CustomEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, so
 };
 
 // Process Node (represents ETL or data transformation)
-const ProcessNode = ({ data }) => {
+const ProcessNode = ({ data, id }) => {
+  // Function to handle process edit
+  const handleProcessEdit = () => {
+    // Find the process in the mock data
+    const process = mockApiData.processes.find(p => p.slug === id);
+    if (process) {
+      // We'll use window.processEditCallback which will be set in the main component
+      if (window.processEditCallback) {
+        window.processEditCallback(process);
+      }
+    }
+  };
   // Determine status color
   const statusColor = data.status === 'active' ? '#52c41a' : '#ff4d4f';
   const isActive = data.status === 'active';
@@ -334,7 +345,7 @@ const ProcessNode = ({ data }) => {
         alignItems: 'center',
         justifyContent: 'center',
         padding: '15px',
-        pointerEvents: 'none' // Allow clicks to pass through to the node
+        pointerEvents: 'auto' // Enable clicks on the content
       }}>
         {/* Icon and title */}
         <div style={{ 
@@ -343,17 +354,23 @@ const ProcessNode = ({ data }) => {
           alignItems: 'center',
           marginBottom: '5px'
         }}>
-          <div style={{ 
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '40px',
-            height: '40px',
-            borderRadius: '50%',
-            background: `url(#${gradientId})`,
-            marginBottom: '8px',
-            boxShadow: '0 3px 6px rgba(0,0,0,0.15)'
-          }}>
+          <div 
+            onClick={handleProcessEdit}
+            style={{ 
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              width: '40px',
+              height: '40px',
+              borderRadius: '50%',
+              background: `url(#${gradientId})`,
+              marginBottom: '8px',
+              boxShadow: '0 3px 6px rgba(0,0,0,0.15)',
+              cursor: 'pointer',
+              pointerEvents: 'auto',
+              zIndex: 100
+            }}
+          >
             <CustomProcessIcon width="24" height="24" />
           </div>
           
@@ -1176,6 +1193,20 @@ const DataflowCanvas = () => {
     }
   }, [reactFlowInstance]);
   
+  // Set up a global callback for process editing
+  // This is used by the ProcessNode component
+  useEffect(() => {
+    window.processEditCallback = (process) => {
+      setSelectedProcessForEdit(process);
+      setShowProcessForm(true);
+    };
+    
+    return () => {
+      // Clean up when component unmounts
+      window.processEditCallback = null;
+    };
+  }, []);
+  
   return (
     <div style={{ width: '100%', height: '100vh' }}>
       <ReactFlow
@@ -1260,7 +1291,7 @@ const DataflowCanvas = () => {
 // Wrap with ReactFlowProvider
 const DataflowCanvasWithProvider = () => (
   <ReactFlowProvider>
-    <DataflowCanvas />
+    <DataflowCanvasUpdated />
   </ReactFlowProvider>
 );
 
diff --git a/src/components/TableCreationPopup.jsx b/src/components/TableCreationPopup.jsx
index 6a277db..8418881 100644
--- a/src/components/TableCreationPopup.jsx
+++ b/src/components/TableCreationPopup.jsx
@@ -77,7 +77,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
       }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
-          <h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <h2 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '10px' , color: "black"}}>
             {getTableTypeIcon()}
             Create New Table
           </h2>
@@ -97,7 +97,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
 
         <form onSubmit={handleSubmit}>
           <div style={{ marginBottom: '15px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black"}}>
               Table Name:
             </label>
             <input
@@ -116,7 +116,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
           </div>
 
           <div style={{ marginBottom: '15px' }}>
-            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
+            <label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold', color: "black" }}>
               Table Type:
             </label>
             <div style={{ display: 'flex', gap: '10px' }}>
@@ -129,7 +129,8 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
                 borderRadius: '4px',
                 cursor: 'pointer',
                 backgroundColor: tableType === 'stage' ? '#e6f7ff' : 'white',
-                borderColor: tableType === 'stage' ? '#1890ff' : '#d9d9d9'
+                borderColor: tableType === 'stage' ? '#1890ff' : '#d9d9d9',
+                color: "black"
               }}>
                 <input
                   type="radio"
@@ -139,7 +140,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
                   onChange={() => setTableType('stage')}
                   style={{ margin: 0 }}
                 />
-                <CustomDatabaseIcon width="20" height="20" />
+                <CustomDatabaseIcon width="20" height="20" style={{ color: "black" }}/>
                 Stage
               </label>
               
@@ -152,7 +153,8 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
                 borderRadius: '4px',
                 cursor: 'pointer',
                 backgroundColor: tableType === 'fact' ? '#fff7e6' : 'white',
-                borderColor: tableType === 'fact' ? '#fa8c16' : '#d9d9d9'
+                borderColor: tableType === 'fact' ? '#fa8c16' : '#d9d9d9',
+                 color: "black"
               }}>
                 <input
                   type="radio"
@@ -175,7 +177,8 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
                 borderRadius: '4px',
                 cursor: 'pointer',
                 backgroundColor: tableType === 'dimension' ? '#f6ffed' : 'white',
-                borderColor: tableType === 'dimension' ? '#52c41a' : '#d9d9d9'
+                borderColor: tableType === 'dimension' ? '#52c41a' : '#d9d9d9',
+                color: "black"
               }}>
                 <input
                   type="radio"