diff --git a/src/components/DataflowCanvas.jsx b/src/components/DataflowCanvas.jsx
index 8fe4329..c306411 100644
--- a/src/components/DataflowCanvas.jsx
+++ b/src/components/DataflowCanvas.jsx
@@ -1587,6 +1587,13 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
     }
   }, [error]);
   
+  // Create a loading component
+  // const LoadingComponent = () => (
+  //   <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+  //     <div>Loading data from API...</div>
+  //   </div>
+  // );
+  
   // Log error but continue with mockApiData as fallback
   useEffect(() => {
     if (error) {
@@ -2562,10 +2569,7 @@ const DataflowCanvas = ({ dbSlug, hasSchemas = true }) => {
     setShowProcessPopup(false);
   };
 
-  // Show the table creation popup
-  const addTableNode = () => {
-    setShowTablePopup(true);
-  };
+
   
   // Handle table creation from the popup
   const handleCreateTable = async (tableData) => {
diff --git a/src/components/ERDiagramCanvas.jsx b/src/components/ERDiagramCanvas.jsx
index f9b0625..5779d1f 100644
--- a/src/components/ERDiagramCanvas.jsx
+++ b/src/components/ERDiagramCanvas.jsx
@@ -563,167 +563,61 @@ const ERDiagramCanvasContent = () => {
   };
 
   // Mock database data representing ONE database with multiple schemas (fallback only)
-  // const mockDatabaseData = {
-  //   id: 1,
-  //   name: "Sample Database",
-  //   slug: "sample_database",
-  //   description: "Sample Database Structure (Mock Data)",
-  //   service: selectedService?.name || "Unknown Service",
-  //   dataSource: selectedDataSource?.name || "Unknown DataSource",
-  //   schemas: [
-  //     {
-  //       sch: "FINANCE_MART",
-  //       tables: [
-  //         {
-  //           id: 1,
-  //           name: "accounts",
-  //           table_type: "dimension",
-  //           columns: [
-  //             { name: "account_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "account_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "account_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "account_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "balance", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 2,
-  //           name: "transactions",
-  //           table_type: "fact",
-  //           columns: [
-  //             { name: "transaction_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
-  //             { name: "transaction_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
-  //             { name: "amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "transaction_type", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "description", data_type: "VARCHAR(255)", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 3,
-  //           name: "customers",
-  //           table_type: "dimension",
-  //           columns: [
-  //             { name: "customer_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "first_name", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "last_name", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "phone", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "registration_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 4,
-  //           name: "financial_reports",
-  //           table_type: "fact",
-  //           columns: [
-  //             { name: "report_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
-  //             { name: "report_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
-  //             { name: "balance_amount", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "profit_loss", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         }
-  //       ]
-  //     },
-  //     {
-  //       sch: "Schema100",
-  //       tables: [
-  //         {
-  //           id: 5,
-  //           name: "products",
-  //           table_type: "dimension",
-  //           columns: [
-  //             { name: "product_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "product_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "category", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "price", data_type: "DECIMAL(10,2)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "stock_quantity", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 6,
-  //           name: "orders",
-  //           table_type: "fact",
-  //           columns: [
-  //             { name: "order_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "customer_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
-  //             { name: "product_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
-  //             { name: "order_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
-  //             { name: "quantity", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
-  //             { name: "total_amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 7,
-  //           name: "inventory",
-  //           table_type: "stage",
-  //           columns: [
-  //             { name: "inventory_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "product_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
-  //             { name: "warehouse_location", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "stock_level", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
-  //             { name: "last_updated", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 8,
-  //           name: "suppliers",
-  //           table_type: "dimension",
-  //           columns: [
-  //             { name: "supplier_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "supplier_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "contact_email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "phone_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         }
-  //       ]
-  //     },
-  //     {
-  //       sch: "New_sch",
-  //       tables: [
-  //         {
-  //           id: 9,
-  //           name: "analytics_summary",
-  //           table_type: "fact",
-  //           columns: [
-  //             { name: "summary_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
-  //             { name: "total_revenue", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "total_orders", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
-  //             { name: "unique_customers", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 10,
-  //           name: "user_sessions",
-  //           table_type: "stage",
-  //           columns: [
-  //             { name: "session_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "customer_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
-  //             { name: "session_start", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false },
-  //             { name: "session_end", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false },
-  //             { name: "pages_viewed", data_type: "INTEGER", is_primary_key: false, is_foreign_key: false },
-  //             { name: "device_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         },
-  //         {
-  //           id: 11,
-  //           name: "reports",
-  //           table_type: "dimension",
-  //           columns: [
-  //             { name: "report_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
-  //             { name: "report_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "report_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "created_by", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
-  //             { name: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
-  //           ]
-  //         }
-  //       ]
-  //     }
-  //   ]
-  // };
+  const mockDatabaseData = {
+    id: 1,
+    name: "Sample Database",
+    slug: "sample_database",
+    description: "Sample Database Structure (Mock Data)",
+    service: selectedService?.name || "Unknown Service",
+    dataSource: selectedDataSource?.name || "Unknown DataSource",
+    schemas: [
+      {
+        sch: "FINANCE_MART",
+        tables: [
+          {
+            id: 1,
+            name: "accounts",
+            table_type: "dimension",
+            columns: [
+              { name: "account_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
+              { name: "account_number", data_type: "VARCHAR(20)", is_primary_key: false, is_foreign_key: false },
+              { name: "account_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
+              { name: "account_type", data_type: "VARCHAR(50)", is_primary_key: false, is_foreign_key: false },
+              { name: "balance", data_type: "DECIMAL(15,2)", is_primary_key: false, is_foreign_key: false },
+              { name: "created_date", data_type: "TIMESTAMP", is_primary_key: false, is_foreign_key: false }
+            ]
+          },
+          {
+            id: 2,
+            name: "transactions",
+            table_type: "fact",
+            columns: [
+              { name: "transaction_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
+              { name: "account_id", data_type: "INTEGER", is_primary_key: false, is_foreign_key: true },
+              { name: "transaction_date", data_type: "DATE", is_primary_key: false, is_foreign_key: false },
+              { name: "amount", data_type: "DECIMAL(12,2)", is_primary_key: false, is_foreign_key: false }
+            ]
+          }
+        ]
+      },
+      {
+        sch: "SALES_MART",
+        name: "Sales Mart",
+        tables: [
+          {
+            id: 3,
+            name: "customers",
+            table_type: "dimension",
+            columns: [
+              { name: "customer_id", data_type: "INTEGER", is_primary_key: true, is_foreign_key: false },
+              { name: "customer_name", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false },
+              { name: "email", data_type: "VARCHAR(100)", is_primary_key: false, is_foreign_key: false }
+            ]
+          }
+        ]
+      }
+    ]
+  };
 
   // API Functions for fetching real data
   const fetchDatabases = async () => {
@@ -1155,48 +1049,99 @@ const ERDiagramCanvasContent = () => {
     try {
       console.log('Adding new table:', tableData);
       
-      // Here you would typically make an API call to create the table
-      // For now, we'll add it to the current diagram
-      
       // Find the target schema
       const targetSchema = availableSchemas.find(schema => schema.sch === tableData.schema);
       if (!targetSchema) {
         throw new Error('Target schema not found');
       }
-      
-      // Create a new table object
-      const newTable = {
-        id: `new-table-${Date.now()}`,
+
+      // Prepare API payload
+      const apiPayload = {
+        token: token,
+        org: orgSlug,
+        con: selectedDatabase?.slug || "my_dwh", // Use selected database slug
+        sch: tableData.schema,
         name: tableData.name,
-        description: tableData.description,
+        external_name: null,
         table_type: tableData.table_type,
-        columns: tableData.columns,
-        schema: tableData.schema,
-        database: selectedDatabase?.name || 'Unknown'
+        description: tableData.description,
+        columns: tableData.columns.map(col => ({
+          column_name: col.name,
+          data_type: col.data_type,
+          is_nullable: col.is_nullable
+        })),
+        keys: tableData.keys.map(key => ({
+          key_name: key.name,
+          key_type: key.key_type,
+          key_columns: [{
+            column_name: key.column_name,
+            sequence: key.sequence
+          }]
+        }))
       };
-      
-      // Add the table to existing tables list
-      setExistingTables(prev => [...prev, newTable]);
-      
-      // Update the current database structure and regenerate the diagram
-      const updatedDatabase = { ...selectedDatabase };
-      const schemaIndex = updatedDatabase.schemas.findIndex(s => s.sch === tableData.schema);
-      
-      if (schemaIndex !== -1) {
-        if (!updatedDatabase.schemas[schemaIndex].tables) {
-          updatedDatabase.schemas[schemaIndex].tables = [];
+
+      console.log('API Payload:', apiPayload);
+
+      // Make API call to create the table
+      const response = await axios.post(ENDPOINTS.TABLE_CREATE, apiPayload, {
+        headers: {
+          'Content-Type': 'application/json'
         }
-        updatedDatabase.schemas[schemaIndex].tables.push(newTable);
+      });
+
+      console.log('API Response:', response.data);
+
+      if (response.data.status === 200) {
+        // API call successful, create new table object for local state
+        const newTable = {
+          id: response.data.id || `new-table-${Date.now()}`,
+          name: tableData.name,
+          tbl: response.data.tbl || tableData.name.toLowerCase(), // Table slug from API or fallback
+          description: tableData.description,
+          table_type: tableData.table_type,
+          columns: tableData.columns,
+          schema: tableData.schema,
+          database: selectedDatabase?.slug || 'Unknown',
+          created_at: new Date().toISOString()
+        };
         
-        // Regenerate the ER diagram with the new table
-        generateERDiagram(updatedDatabase);
+        // Add the table to existing tables list
+        setExistingTables(prev => [...prev, newTable]);
         
-        console.log('Table added successfully:', newTable);
+        // Update the current database structure and regenerate the diagram
+        const updatedDatabase = { ...selectedDatabase };
+        const schemaIndex = updatedDatabase.schemas.findIndex(s => s.sch === tableData.schema);
+        
+        if (schemaIndex !== -1) {
+          if (!updatedDatabase.schemas[schemaIndex].tables) {
+            updatedDatabase.schemas[schemaIndex].tables = [];
+          }
+          updatedDatabase.schemas[schemaIndex].tables.push(newTable);
+          
+          // Update the selected database state
+          setSelectedDatabase(updatedDatabase);
+          
+          // Regenerate the ER diagram with the new table
+          generateERDiagram(updatedDatabase);
+          
+          console.log('Table added successfully:', newTable);
+        }
+      } else {
+        throw new Error(response.data.message || 'Failed to create table');
       }
       
     } catch (error) {
       console.error('Error adding table:', error);
-      throw error;
+      
+      // Check if it's an API error
+      if (error.response) {
+        const errorMessage = error.response.data?.message || `API Error: ${error.response.status}`;
+        throw new Error(errorMessage);
+      } else if (error.request) {
+        throw new Error('Network error: Unable to connect to the API');
+      } else {
+        throw new Error(error.message || 'Unknown error occurred');
+      }
     }
   };
 
diff --git a/src/components/InfiniteCanvas.jsx b/src/components/InfiniteCanvas.jsx
index 8d85085..e106d89 100644
--- a/src/components/InfiniteCanvas.jsx
+++ b/src/components/InfiniteCanvas.jsx
@@ -1104,6 +1104,17 @@ const ServiceNode = ({ data = {} }) => {
           }}
           onClick={() => data.onToggle && data.onToggle(data.id)}
         >
+          {data.expanded ? (
+            <>
+              <span>Collapse Connections</span>
+              <FaChevronUp size={10} />
+            </>
+          ) : (
+            <>
+              <span>Expand Connections</span>
+              <FaChevronDown size={10} />
+            </>
+          )}
         </button>
       </div>
       
diff --git a/src/components/children/Pipelines.jsx b/src/components/children/Pipelines.jsx
new file mode 100644
index 0000000..e69de29