From ba22eb2e5f477342164366a55748be2a070aeb87 Mon Sep 17 00:00:00 2001
From: Devika <devika.vellikkunnathillam@dbtez.com>
Date: Tue, 1 Jul 2025 16:01:23 +0530
Subject: [PATCH] Changes in InfiniteCanvas --Refactoring Changes

---
 src/App.jsx                        |    2 +-
 src/components/DataflowCanvas.jsx  |    3 +-
 src/components/ERDiagramCanvas.jsx |    2 +-
 src/components/InfiniteCanvas.css  | 1571 ++++++++++++++++++++++++++++
 src/components/InfiniteCanvas.jsx  |  730 +++----------
 5 files changed, 1697 insertions(+), 611 deletions(-)
 create mode 100644 src/components/InfiniteCanvas.css

diff --git a/src/App.jsx b/src/App.jsx
index 414f522..f6d7669 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -286,7 +286,7 @@ function App() {
             <>
               <div className="page-header">
                 <h1 className="page-title">
-                  Overview
+                  Qubit Services
                 </h1>
                 <Breadcrumbs 
                   aria-label="breadcrumb"
diff --git a/src/components/DataflowCanvas.jsx b/src/components/DataflowCanvas.jsx
index c306411..03e10d8 100644
--- a/src/components/DataflowCanvas.jsx
+++ b/src/components/DataflowCanvas.jsx
@@ -98,7 +98,7 @@ const generateCustomStyles = () => {
       z-index: 5 !important;
       background: white !important;
       border-radius: 8px !important;
-      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
+      box-shadow: 0 4px 8px rgba(249, 242, 242, 0.94) !important;
     }
     
     /* Edge styling for left-to-right data flow */
@@ -131,7 +131,6 @@ const generateCustomStyles = () => {
 // Import icons from react-icons
 import { FaTable, FaArrowRight, FaExchangeAlt, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine, FaEdit, FaTrash, FaChevronDown } from 'react-icons/fa';
 import { BiSolidData, BiTransfer } from 'react-icons/bi';
-import { AiFillFolder } from 'react-icons/ai';
 import { TbTransform } from 'react-icons/tb';
 import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, CustomProcessIcon, CustomSchemaIcon } from './CustomIcons';
 
diff --git a/src/components/ERDiagramCanvas.jsx b/src/components/ERDiagramCanvas.jsx
index 15a0a20..082396a 100644
--- a/src/components/ERDiagramCanvas.jsx
+++ b/src/components/ERDiagramCanvas.jsx
@@ -1794,7 +1794,7 @@ const ERDiagramCanvasContent = () => {
       >
         <Controls 
           style={{
-            background: 'rgba(26, 26, 26, 0.8)',
+            background: 'rgba(255, 255, 255, 0.8)',
             border: '1px solid rgba(138, 43, 226, 0.3)',
             borderRadius: '8px'
           }}
diff --git a/src/components/InfiniteCanvas.css b/src/components/InfiniteCanvas.css
new file mode 100644
index 0000000..8b5b149
--- /dev/null
+++ b/src/components/InfiniteCanvas.css
@@ -0,0 +1,1571 @@
+/* InfiniteCanvas Component Styles */
+
+/* Modal Styles */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background-color: white;
+  border-radius: 8px;
+  width: 700px;
+  max-width: 90%;
+  max-height: 90vh;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #eee;
+  background-color: #f8f8f8;
+}
+
+.modal-title {
+  margin: 0;
+  color: #333;
+  font-size: 18px;
+}
+
+.modal-close-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 20px;
+  color: #666;
+}
+
+.modal-body {
+  padding: 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+/* Form Styles */
+.form-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.form-section-title {
+  margin: 0;
+}
+
+.form-section-close {
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+  color: #666;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 500;
+  color: #333;
+}
+
+.form-input {
+  width: 100%;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+}
+
+.form-textarea {
+  width: 100%;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+  min-height: 60px;
+  resize: vertical;
+}
+
+.form-select {
+  width: 100%;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+  background-color: white;
+}
+
+.form-input-group {
+  display: flex;
+  gap: 10px;
+}
+
+.form-input-flex {
+  flex: 1;
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  font-size: 14px;
+}
+
+.form-button-group {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.form-button-cancel {
+  padding: 10px 20px;
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.form-button-primary {
+  padding: 10px 15px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.form-button-save {
+  padding: 10px 20px;
+  background-color: #00a99d;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+/* Wrapper Styles */
+.infinite-canvas-wrapper {
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+}
+
+/* Schema and Table Form specific styles */
+.schema-form-group {
+  margin-bottom: 24px;
+}
+
+/* Entity Selector Styles */
+.entity-selector-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #eee;
+}
+
+.entity-selector-button {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: #00a99d;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.2s;
+}
+
+.guidance-message {
+  padding: 30px;
+  text-align: center;
+  color: #666;
+  font-style: italic;
+}
+
+.guidance-message-dashed {
+  padding: 30px;
+  text-align: center;
+  border: 1px dashed #ddd;
+  border-radius: 4px;
+  color: #666;
+  background-color: #fafafa;
+}
+
+/* Table Form Styles */
+.table-form-group {
+  margin-bottom: 16px;
+}
+
+.columns-section {
+  margin-bottom: 24px;
+}
+
+.columns-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.columns-label {
+  font-weight: 500;
+  color: #333;
+}
+
+.add-column-button {
+  padding: 5px 10px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.column-input-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.column-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.column-add-button {
+  padding: 8px 15px;
+  background-color: #52c41a;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.column-cancel-button {
+  padding: 8px 15px;
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.columns-list {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.column-item {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.column-item:last-child {
+  border-bottom: none;
+}
+
+.column-item:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.column-item:nth-child(odd) {
+  background-color: white;
+}
+
+.column-remove-button {
+  background: none;
+  border: none;
+  color: #ff4d4f;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.no-columns-message {
+  padding: 20px;
+  text-align: center;
+  color: #999;
+  font-style: italic;
+}
+
+/* Button hover effects */
+.form-button-cancel:hover {
+  background-color: #e6e6e6;
+}
+
+.form-button-primary:hover {
+  background-color: #40a9ff;
+}
+
+.form-button-save:hover {
+  background-color: #36b3a8;
+}
+
+.modal-close-button:hover {
+  color: #333;
+}
+
+.form-section-close:hover {
+  color: #333;
+}
+
+/* Entity Selector Styles */
+.entity-selector-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #eee;
+}
+
+.entity-selector-button {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: #00a99d;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.2s;
+}
+
+.guidance-message-dashed {
+  padding: 30px;
+  text-align: center;
+  border: 1px dashed #ddd;
+  border-radius: 4px;
+  color: #666;
+  background-color: #fafafa;
+}
+
+/* Table Form Styles */
+.table-form-group {
+  margin-bottom: 16px;
+}
+
+.columns-section {
+  margin-bottom: 24px;
+}
+
+.columns-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.columns-label {
+  font-weight: 500;
+  color: #333;
+}
+
+.add-column-button {
+  padding: 5px 10px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.column-input-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.column-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.column-add-button {
+  padding: 8px 15px;
+  background-color: #52c41a;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.column-cancel-button {
+  padding: 8px 15px;
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.columns-list {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.column-item {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.column-item:last-child {
+  border-bottom: none;
+}
+
+.column-item:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.column-item:nth-child(odd) {
+  background-color: white;
+}
+
+.column-remove-button {
+  background: none;
+  border: none;
+  color: #ff4d4f;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.no-columns-message {
+  padding: 15px;
+  text-align: center;
+  border: 1px dashed #ddd;
+  border-radius: 4px;
+  color: #999;
+  background-color: #fafafa;
+  font-size: 13px;
+}
+
+/* Custom Edge Styles */
+.edge-label {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  pointer-events: all;
+  padding: 2px 5px;
+  border-radius: 4px;
+  color: white;
+  font-weight: 500;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Service Node Styles */
+.service-node {
+  padding: 20px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, #222, #2a2a2a);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 169, 157, 0.3) inset;
+  border: 2px solid #00a99d;
+  color: #fff;
+  width: 240px;
+  min-height: 110px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-family: Inter, sans-serif;
+  justify-content: space-between;
+}
+
+.service-node-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.service-node-logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.service-node-logo {
+  margin-right: 2px;
+  vertical-align: middle;
+}
+
+.service-node-title {
+  font-weight: 600;
+  font-size: 20px;
+  color: #fff;
+  margin: 0;
+}
+
+.service-node-subtitle {
+  font-size: 12px;
+  color: #aaa;
+  margin: 0;
+}
+
+.service-node-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 8px;
+}
+
+.service-node-button {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.2), rgba(0, 169, 157, 0.1));
+  border: 1px solid rgba(0, 169, 157, 0.4);
+  border-radius: 6px;
+  padding: 8px 16px;
+  color: #00a99d;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+  width: 100%;
+  justify-content: center;
+}
+
+.service-node-button:hover {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.3), rgba(0, 169, 157, 0.15));
+  border-color: rgba(0, 169, 157, 0.6);
+  transform: translateY(-1px);
+}
+
+/* Database Node Styles */
+.database-node {
+  padding: 10px;
+  border-radius: 5px;
+  background: white;
+  border: 2px solid;
+  min-width: 150px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.database-node-header {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.database-node-icon {
+  margin-right: 8px;
+}
+
+.database-node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+}
+
+.database-node-stats {
+  font-size: 0.8em;
+  color: #aaa;
+  margin-bottom: 5px;
+}
+
+.database-node-connection {
+  font-size: 0.7em;
+  color: #888;
+  margin-bottom: 10px;
+}
+
+.database-node-button-container {
+  display: flex;
+  justify-content: center;
+}
+
+.database-node-button {
+  padding: 4px 8px;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 0.7em;
+  transition: opacity 0.2s;
+}
+
+.database-node-button:hover {
+  opacity: 0.8;
+}
+
+/* Schema Node Styles */
+.schema-node {
+  padding: 10px;
+  border-radius: 5px;
+  background: white;
+  border: 2px solid;
+  min-width: 150px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.schema-node-header {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.schema-node-icon {
+  margin-right: 8px;
+}
+
+.schema-node-stats {
+  font-size: 0.8em;
+  color: #aaa;
+}
+
+/* Table Node Styles */
+.table-node {
+  padding: 10px;
+  border-radius: 5px;
+  background: white;
+  border: 2px solid;
+  min-width: 150px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.table-node-header {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.table-node-icon {
+  margin-right: 8px;
+}
+
+.table-node-stats {
+  font-size: 0.8em;
+  color: #aaa;
+}
+
+/* Node Handle Styles */
+.node-handle {
+  background: #00a99d;
+  width: 8px;
+  height: 8px;
+}
+
+.node-handle-custom {
+  width: 10px;
+  height: 10px;
+}
+
+/* Panel Styles */
+.welcome-panel {
+  padding: 20px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(0, 169, 157, 0.1), rgba(0, 169, 157, 0.05));
+  border: 1px solid rgba(0, 169, 157, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.welcome-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.welcome-logo-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.welcome-logo {
+  margin-right: 2px;
+  vertical-align: middle;
+}
+
+.welcome-title {
+  font-weight: 600;
+  font-size: 20px;
+  color: #333;
+  margin: 0;
+}
+
+.welcome-subtitle {
+  font-size: 12px;
+  color: #aaa;
+  margin: 0;
+}
+
+.welcome-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.welcome-add-button {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.2), rgba(0, 169, 157, 0.1));
+  border: 1px solid rgba(0, 169, 157, 0.4);
+  color: #00a99d;
+  padding: 12px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.welcome-add-button:hover {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.3), rgba(0, 169, 157, 0.15));
+  border-color: rgba(0, 169, 157, 0.6);
+  transform: translateY(-1px);
+}
+
+/* Connection Mode Indicator */
+.connection-mode-indicator {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 12px;
+  font-weight: 500;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.connection-mode-indicator.connecting {
+  background: rgba(255, 193, 7, 0.9);
+  color: #000;
+}
+
+.connection-mode-indicator.connected {
+  background: rgba(40, 167, 69, 0.9);
+}
+
+/* Additional hover effects */
+.add-column-button:hover {
+  background-color: #40a9ff;
+}
+
+.column-add-button:hover {
+  background-color: #73d13d;
+}
+
+.column-cancel-button:hover {
+  background-color: #e6e6e6;
+}
+
+.column-remove-button:hover {
+  color: #ff7875;
+}
+
+/* Entity Selector Styles */
+.entity-selector-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #eee;
+}
+
+.entity-selector-button {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: #00a99d;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.2s;
+}
+
+.guidance-message-dashed {
+  padding: 30px;
+  text-align: center;
+  border: 1px dashed #ddd;
+  border-radius: 4px;
+  color: #666;
+  background-color: #fafafa;
+}
+
+/* Table Form Styles */
+.table-form-group {
+  margin-bottom: 16px;
+}
+
+.columns-section {
+  margin-bottom: 24px;
+}
+
+.columns-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.columns-label {
+  font-weight: 500;
+  color: #333;
+}
+
+.add-column-button {
+  padding: 5px 10px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.column-input-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.column-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.column-add-button {
+  padding: 8px 15px;
+  background-color: #52c41a;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.column-cancel-button {
+  padding: 8px 15px;
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.columns-list {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.column-item {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.column-item:last-child {
+  border-bottom: none;
+}
+
+.column-item:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.column-item:nth-child(odd) {
+  background-color: white;
+}
+
+.column-remove-button {
+  background: none;
+  border: none;
+  color: #ff4d4f;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.no-columns-message {
+  padding: 15px;
+  text-align: center;
+  border: 1px dashed #ddd;
+  border-radius: 4px;
+  color: #999;
+  background-color: #fafafa;
+  font-size: 13px;
+}
+
+/* Custom Edge Styles */
+.edge-label {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  pointer-events: all;
+  padding: 2px 5px;
+  border-radius: 4px;
+  color: white;
+  font-weight: 500;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Service Node Styles */
+.service-node {
+  padding: 20px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, #222, #2a2a2a);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 169, 157, 0.3) inset;
+  border: 2px solid #00a99d;
+  color: #fff;
+  width: 240px;
+  min-height: 110px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-family: Inter, sans-serif;
+  justify-content: space-between;
+}
+
+.service-node-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.service-node-logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.service-node-logo {
+  margin-right: 2px;
+  vertical-align: middle;
+}
+
+.service-node-title {
+  font-weight: 600;
+  font-size: 20px;
+  color: #fff;
+  margin: 0;
+}
+
+.service-node-subtitle {
+  font-size: 12px;
+  color: #aaa;
+  margin: 0;
+}
+
+.service-node-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.service-node-button {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.2), rgba(0, 169, 157, 0.1));
+  border: 1px solid rgba(0, 169, 157, 0.4);
+  color: #00a99d;
+  padding: 12px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.service-node-button:hover {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.3), rgba(0, 169, 157, 0.15));
+  border-color: rgba(0, 169, 157, 0.6);
+  transform: translateY(-1px);
+}
+
+/* Database Node Styles */
+.database-node {
+  padding: 10px;
+  border-radius: 5px;
+  background: white;
+  border: 2px solid;
+  min-width: 150px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.database-node-header {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.database-node-icon {
+  margin-right: 8px;
+}
+
+.database-node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+}
+
+.database-node-stats {
+  font-size: 0.8em;
+  color: #aaa;
+  margin-bottom: 5px;
+}
+
+.database-node-connection {
+  font-size: 0.7em;
+  color: #888;
+  margin-bottom: 10px;
+}
+
+.database-node-button-container {
+  display: flex;
+  justify-content: center;
+}
+
+.database-node-button {
+  padding: 4px 8px;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 0.7em;
+  transition: opacity 0.2s;
+}
+
+.database-node-button:hover {
+  opacity: 0.8;
+}
+
+.node-handle {
+  background: #00a99d;
+  width: 8px;
+  height: 8px;
+}
+
+.node-handle-custom {
+  width: 10px;
+  height: 10px;
+}
+
+/* Additional hover effects */
+.add-column-button:hover {
+  background-color: #40a9ff;
+}
+
+.column-add-button:hover {
+  background-color: #73d13d;
+}
+
+.column-cancel-button:hover {
+  background-color: #e6e6e6;
+}
+
+.column-remove-button:hover {
+  color: #ff7875;
+}
+
+/* Entity Selector Styles */
+.entity-selector-container {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #eee;
+}
+
+.entity-selector-button {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: #00a99d;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  transition: all 0.2s;
+}
+
+.guidance-message {
+  padding: 30px;
+  text-align: center;
+  color: #666;
+  font-style: italic;
+}
+
+.guidance-message-dashed {
+  padding: 30px;
+  text-align: center;
+  border: 1px dashed #ddd;
+  border-radius: 4px;
+  color: #666;
+  background-color: #fafafa;
+}
+
+/* Table Form Styles */
+.table-form-group {
+  margin-bottom: 16px;
+}
+
+.columns-section {
+  margin-bottom: 24px;
+}
+
+.columns-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.columns-label {
+  font-weight: 500;
+  color: #333;
+}
+
+.add-column-button {
+  padding: 5px 10px;
+  background-color: #1890ff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.column-input-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.column-input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.column-add-button {
+  padding: 8px 15px;
+  background-color: #52c41a;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.column-cancel-button {
+  padding: 8px 15px;
+  background-color: #f5f5f5;
+  color: #333;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.columns-list {
+  border: 1px solid #eee;
+  border-radius: 4px;
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.column-item {
+  padding: 8px 12px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.column-item:last-child {
+  border-bottom: none;
+}
+
+.column-item:nth-child(even) {
+  background-color: #f9f9f9;
+}
+
+.column-item:nth-child(odd) {
+  background-color: white;
+}
+
+.column-remove-button {
+  background: none;
+  border: none;
+  color: #ff4d4f;
+  cursor: pointer;
+  font-size: 12px;
+}
+
+.no-columns-message {
+  padding: 15px;
+  text-align: center;
+  border: 1px dashed #ddd;
+  border-radius: 4px;
+  color: #999;
+  background-color: #fafafa;
+  font-size: 13px;
+}
+
+/* Additional hover effects */
+.add-column-button:hover {
+  background-color: #40a9ff;
+}
+
+.column-add-button:hover {
+  background-color: #73d13d;
+}
+
+.column-cancel-button:hover {
+  background-color: #e6e6e6;
+}
+
+.column-remove-button:hover {
+  color: #ff7875;
+}
+
+/* Custom Edge Styles */
+.edge-label {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  pointer-events: all;
+  padding: 2px 5px;
+  border-radius: 4px;
+  color: white;
+  font-weight: 500;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+/* Welcome Panel Styles */
+.welcome-panel {
+  padding: 20px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, rgba(0, 169, 157, 0.1), rgba(0, 169, 157, 0.05));
+  border: 1px solid rgba(0, 169, 157, 0.2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  margin: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.welcome-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.welcome-logo-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.welcome-logo {
+  margin-right: 2px;
+  vertical-align: middle;
+}
+
+.welcome-title {
+  font-weight: 600;
+  font-size: 20px;
+  color: #333;
+  margin: 0;
+}
+
+.welcome-subtitle {
+  font-size: 12px;
+  color: #aaa;
+  margin: 0;
+}
+
+.welcome-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.welcome-add-button {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.2), rgba(0, 169, 157, 0.1));
+  border: 1px solid rgba(0, 169, 157, 0.4);
+  color: #00a99d;
+  padding: 12px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.welcome-add-button:hover {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.3), rgba(0, 169, 157, 0.15));
+  border-color: rgba(0, 169, 157, 0.6);
+  transform: translateY(-1px);
+}
+
+/* Node Styles */
+.node-handle {
+  background: #00a99d;
+  width: 8px;
+  height: 8px;
+}
+
+.database-node {
+  padding: 10px;
+  border-radius: 5px;
+  background: white;
+  border: 2px solid;
+  min-width: 150px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.database-node-header {
+  font-weight: bold;
+  margin-bottom: 5px;
+  display: flex;
+  align-items: center;
+}
+
+.database-node-icon {
+  margin-right: 8px;
+}
+
+.database-node-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 120px;
+}
+
+.database-node-stats {
+  font-size: 0.8em;
+  color: #aaa;
+  margin-bottom: 5px;
+}
+
+.database-node-connection {
+  font-size: 0.7em;
+  color: #888;
+  margin-bottom: 10px;
+}
+
+.database-node-button-container {
+  display: flex;
+  justify-content: center;
+}
+
+.database-node-button {
+  padding: 4px 8px;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 0.7em;
+  transition: opacity 0.2s;
+}
+
+.database-node-button:hover {
+  opacity: 0.8;
+}
+
+.node-handle-custom {
+  width: 10px;
+  height: 10px;
+}
+
+/* Service Node Styles */
+.service-node {
+  padding: 20px;
+  border-radius: 12px;
+  background: linear-gradient(145deg, #222, #2a2a2a);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 169, 157, 0.3) inset;
+  border: 2px solid #00a99d;
+  color: #fff;
+  width: 240px;
+  min-height: 110px;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  font-family: Inter, sans-serif;
+  justify-content: space-between;
+}
+
+.service-node-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.service-node-logo-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.service-node-logo {
+  margin-right: 2px;
+  vertical-align: middle;
+}
+
+.service-node-title {
+  font-weight: 600;
+  font-size: 20px;
+  color: #fff;
+  margin: 0;
+}
+
+.service-node-subtitle {
+  font-size: 12px;
+  color: #aaa;
+  margin: 0;
+}
+
+.service-node-button-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.service-node-button {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.2), rgba(0, 169, 157, 0.1));
+  border: 1px solid rgba(0, 169, 157, 0.4);
+  color: #00a99d;
+  padding: 12px 24px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: 500;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: all 0.2s ease;
+}
+
+.service-node-button:hover {
+  background: linear-gradient(145deg, rgba(0, 169, 157, 0.3), rgba(0, 169, 157, 0.15));
+  border-color: rgba(0, 169, 157, 0.6);
+  transform: translateY(-1px);
+}
+
+.add-column-button:hover {
+  background-color: #40a9ff;
+}
+
+.column-add-button:hover {
+  background-color: #73d13d;
+}
+
+.column-cancel-button:hover {
+  background-color: #e6e6e6;
+}
+
+.column-remove-button:hover {
+  color: #ff7875;
+}
\ No newline at end of file
diff --git a/src/components/InfiniteCanvas.jsx b/src/components/InfiniteCanvas.jsx
index e106d89..7e45bca 100644
--- a/src/components/InfiniteCanvas.jsx
+++ b/src/components/InfiniteCanvas.jsx
@@ -17,6 +17,7 @@ import ReactFlow, {
   getBezierPath
 } from 'reactflow';
 import 'reactflow/dist/style.css';
+import './InfiniteCanvas.css';
 import axios from 'axios';
 import planPlusLogo from '../assets/img/planPlusLogo.png'; 
 
@@ -34,56 +35,18 @@ const Modal = ({ isOpen, title, onClose, children }) => {
   if (!isOpen) return null;
   
   return (
-    <div style={{
-      position: 'fixed',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      zIndex: 1000
-    }}>
-      <div style={{
-        backgroundColor: 'white',
-        borderRadius: '8px',
-        width: '700px',
-        maxWidth: '90%',
-        maxHeight: '90vh',
-        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.2)',
-        overflow: 'hidden',
-        display: 'flex',
-        flexDirection: 'column'
-      }}>
-        <div style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          padding: '16px 20px',
-          borderBottom: '1px solid #eee',
-          backgroundColor: '#f8f8f8'
-        }}>
-          <h3 style={{ margin: 0, color: '#333', fontSize: '18px' }}>{title}</h3>
+    <div className="modal-overlay">
+      <div className="modal-content">
+        <div className="modal-header">
+          <h3 className="modal-title">{title}</h3>
           <button 
             onClick={onClose}
-            style={{
-              background: 'none',
-              border: 'none',
-              cursor: 'pointer',
-              fontSize: '20px',
-              color: '#666'
-            }}
+            className="modal-close-button"
           >
             <FaTimes />
           </button>
         </div>
-        <div style={{ 
-          padding: '20px',
-          overflowY: 'auto',
-          flex: 1
-        }}>
+        <div className="modal-body">
           {children}
         </div>
       </div>
@@ -190,13 +153,8 @@ const DatabaseForm = ({ onSave, onCancel }) => {
     <div>
       {showSchemaForm ? (
         <div>
-          <div style={{ 
-            display: 'flex', 
-            justifyContent: 'space-between', 
-            alignItems: 'center',
-            marginBottom: '16px'
-          }}>
-            <h4 style={{ margin: 0 }}>
+          <div className="form-section-header">
+            <h4 className="form-section-title">
               {currentSchemaIndex !== null ? 'Edit Schema' : 'Add Schema'}
             </h4>
             <button
@@ -204,13 +162,7 @@ const DatabaseForm = ({ onSave, onCancel }) => {
                 setShowSchemaForm(false);
                 setCurrentSchemaIndex(null);
               }}
-              style={{
-                background: 'none',
-                border: 'none',
-                fontSize: '18px',
-                cursor: 'pointer',
-                color: '#666'
-              }}
+              className="form-section-close"
             >
               ×
             </button>
@@ -227,25 +179,14 @@ const DatabaseForm = ({ onSave, onCancel }) => {
         </div>
       ) : showTableForm ? (
         <div>
-          <div style={{ 
-            display: 'flex', 
-            justifyContent: 'space-between', 
-            alignItems: 'center',
-            marginBottom: '16px'
-          }}>
-            <h4 style={{ margin: 0 }}>Add Table</h4>
+          <div className="form-section-header">
+            <h4 className="form-section-title">Add Table</h4>
             <button
               onClick={() => {
                 setShowTableForm(false);
                 setCurrentSchemaForTable(null);
               }}
-              style={{
-                background: 'none',
-                border: 'none',
-                fontSize: '18px',
-                cursor: 'pointer',
-                color: '#666'
-              }}
+              className="form-section-close"
             >
               ×
             </button>
@@ -261,8 +202,8 @@ const DatabaseForm = ({ onSave, onCancel }) => {
         </div>
       ) : (
         <form onSubmit={handleSubmit}>
-          <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+          <div className="form-group">
+            <label className="form-label">
               Name
             </label>
             <input
@@ -271,19 +212,13 @@ const DatabaseForm = ({ onSave, onCancel }) => {
               value={formData.name}
               onChange={handleChange}
               placeholder="Name"
-              style={{
-                width: '100%',
-                padding: '10px',
-                borderRadius: '4px',
-                border: '1px solid #ddd',
-                fontSize: '14px'
-              }}
+              className="form-input"
               required
             />
           </div>
           
-          <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+          <div className="form-group">
+            <label className="form-label">
               Description
             </label>
             <textarea
@@ -291,57 +226,35 @@ const DatabaseForm = ({ onSave, onCancel }) => {
               value={formData.description}
               onChange={handleChange}
               placeholder="Description"
-              style={{
-                width: '100%',
-                padding: '10px',
-                borderRadius: '4px',
-                border: '1px solid #ddd',
-                fontSize: '14px',
-                minHeight: '60px',
-                resize: 'vertical'
-              }}
+              className="form-textarea"
             />
           </div>
           
-          <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+          <div className="form-group">
+            <label className="form-label">
               URL
             </label>
-            <div style={{ display: 'flex', gap: '10px' }}>
+            <div className="form-input-group">
               <input
                 type="url"
                 name="url"
                 value={formData.url}
                 onChange={handleChange}
                 placeholder="http://"
-                style={{
-                  flex: 1,
-                  padding: '10px',
-                  borderRadius: '4px',
-                  border: '1px solid #ddd',
-                  fontSize: '14px'
-                }}
+                className="form-input-flex"
               />
               <button
                 type="button"
                 onClick={fetchId}
-                style={{
-                  padding: '10px 15px',
-                  backgroundColor: '#1890ff',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: 'pointer',
-                  fontSize: '14px'
-                }}
+                className="form-button-primary"
               >
                 Fetch ID
               </button>
             </div>
           </div>
           
-          <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+          <div className="form-group">
+            <label className="form-label">
               Key
             </label>
             <input
@@ -350,32 +263,19 @@ const DatabaseForm = ({ onSave, onCancel }) => {
               value={formData.key}
               onChange={handleChange}
               placeholder="http://"
-              style={{
-                width: '100%',
-                padding: '10px',
-                borderRadius: '4px',
-                border: '1px solid #ddd',
-                fontSize: '14px'
-              }}
+              className="form-input"
             />
           </div>
           
-          <div style={{ marginBottom: '16px' }}>
-            <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+          <div className="form-group">
+            <label className="form-label">
               Database Type
             </label>
             <select
               name="type"
               value={formData.type}
               onChange={handleChange}
-              style={{
-                width: '100%',
-                padding: '10px',
-                borderRadius: '4px',
-                border: '1px solid #ddd',
-                fontSize: '14px',
-                backgroundColor: 'white'
-              }}
+              className="form-select"
             >
               <option value="PostgreSQL">PostgreSQL</option>
               <option value="MySQL">MySQL</option>
@@ -387,33 +287,17 @@ const DatabaseForm = ({ onSave, onCancel }) => {
           
           {/* Schemas Section removed as per requirements */}
           
-          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '24px' }}>
+          <div className="form-button-group">
             <button
               type="button"
               onClick={onCancel}
-              style={{
-                padding: '10px 20px',
-                backgroundColor: '#f5f5f5',
-                color: '#333',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '14px'
-              }}
+              className="form-button-cancel"
             >
               Cancel
             </button>
             <button
               type="submit"
-              style={{
-                padding: '10px 20px',
-                backgroundColor: '#00a99d',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '14px'
-              }}
+              className="form-button-save"
             >
               Save Database
             </button>
@@ -443,8 +327,8 @@ const SchemaForm = ({ onSave, onCancel, parentDatabase, initialData }) => {
   
   return (
     <form onSubmit={handleSubmit}>
-      <div style={{ marginBottom: '16px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+      <div className="form-group">
+        <label className="form-label">
           Schema Name
         </label>
         <input
@@ -453,19 +337,13 @@ const SchemaForm = ({ onSave, onCancel, parentDatabase, initialData }) => {
           value={formData.name}
           onChange={handleChange}
           placeholder="Schema Name"
-          style={{
-            width: '100%',
-            padding: '10px',
-            borderRadius: '4px',
-            border: '1px solid #ddd',
-            fontSize: '14px'
-          }}
+          className="form-input"
           required
         />
       </div>
       
-      <div style={{ marginBottom: '24px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+      <div className="schema-form-group">
+        <label className="form-label">
           Description
         </label>
         <textarea
@@ -473,45 +351,21 @@ const SchemaForm = ({ onSave, onCancel, parentDatabase, initialData }) => {
           value={formData.description}
           onChange={handleChange}
           placeholder="Schema Description"
-          style={{
-            width: '100%',
-            padding: '10px',
-            borderRadius: '4px',
-            border: '1px solid #ddd',
-            fontSize: '14px',
-            minHeight: '60px',
-            resize: 'vertical'
-          }}
+          className="form-textarea"
         />
       </div>
       
-      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
+      <div className="form-button-group">
         <button
           type="button"
           onClick={onCancel}
-          style={{
-            padding: '10px 20px',
-            backgroundColor: '#f5f5f5',
-            color: '#333',
-            border: '1px solid #ddd',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '14px'
-          }}
+          className="form-button-cancel"
         >
           Cancel
         </button>
         <button
           type="submit"
-          style={{
-            padding: '10px 20px',
-            backgroundColor: '#00a99d',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '14px'
-          }}
+          className="form-button-save"
         >
           {initialData ? 'Update Schema' : 'Add Schema'}
         </button>
@@ -546,33 +400,14 @@ const EntitySelector = ({
   return (
     <div>
       {/* Entity Type Selector - Only Database */}
-      <div style={{ 
-        display: 'flex', 
-        justifyContent: 'center', 
-        marginBottom: '20px',
-        borderRadius: '8px',
-        overflow: 'hidden',
-        border: '1px solid #eee'
-      }}>
+      <div className="entity-selector-container">
         <button
           onClick={() => {
             setActiveEntityType('database');
             setSelectedDatabaseForSchema(null);
             setSelectedSchemaForTable(null);
           }}
-          style={{
-            flex: 1,
-            padding: '12px',
-            border: 'none',
-            background: '#00a99d',
-            color: 'white',
-            cursor: 'pointer',
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: '5px',
-            transition: 'all 0.2s'
-          }}
+          className="entity-selector-button"
         >
           <svg width="20" height="20" viewBox="0 0 41 39" fill="none" xmlns="http://www.w3.org/2000/svg">
             <rect width="40.5" height="38.7" rx="3.6" fill="url(#db_paint0_linear)"/>
@@ -598,27 +433,13 @@ const EntitySelector = ({
       
       {/* Guidance message when no parents are available */}
       {activeEntityType === 'schema' && availableDatabases.length === 0 && (
-        <div style={{ 
-          padding: '30px', 
-          textAlign: 'center', 
-          border: '1px dashed #ddd',
-          borderRadius: '4px',
-          color: '#666',
-          backgroundColor: '#fafafa'
-        }}>
+        <div className="guidance-message-dashed">
           You need to create a database first before creating a schema.
         </div>
       )}
       
       {activeEntityType === 'table' && availableSchemas.length === 0 && (
-        <div style={{ 
-          padding: '30px', 
-          textAlign: 'center', 
-          border: '1px dashed #ddd',
-          borderRadius: '4px',
-          color: '#666',
-          backgroundColor: '#fafafa'
-        }}>
+        <div className="guidance-message-dashed">
           You need to create a schema first before creating a table.
         </div>
       )}
@@ -667,8 +488,8 @@ const TableForm = ({ onSave, onCancel, parentSchema, initialData }) => {
   
   return (
     <form onSubmit={handleSubmit}>
-      <div style={{ marginBottom: '16px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+      <div className="table-form-group">
+        <label className="form-label">
           Table Name
         </label>
         <input
@@ -677,19 +498,13 @@ const TableForm = ({ onSave, onCancel, parentSchema, initialData }) => {
           value={formData.name}
           onChange={handleChange}
           placeholder="Table Name"
-          style={{
-            width: '100%',
-            padding: '10px',
-            borderRadius: '4px',
-            border: '1px solid #ddd',
-            fontSize: '14px'
-          }}
+          className="form-input"
           required
         />
       </div>
       
-      <div style={{ marginBottom: '16px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+      <div className="table-form-group">
+        <label className="form-label">
           Table Description
         </label>
         <textarea
@@ -697,34 +512,19 @@ const TableForm = ({ onSave, onCancel, parentSchema, initialData }) => {
           value={formData.description}
           onChange={handleChange}
           placeholder="Table Description"
-          style={{
-            width: '100%',
-            padding: '10px',
-            borderRadius: '4px',
-            border: '1px solid #ddd',
-            fontSize: '14px',
-            minHeight: '60px',
-            resize: 'vertical'
-          }}
+          className="form-textarea"
         />
       </div>
       
-      <div style={{ marginBottom: '16px' }}>
-        <label style={{ display: 'block', marginBottom: '6px', fontWeight: '500', color: '#333' }}>
+      <div className="table-form-group">
+        <label className="form-label">
           Table Type
         </label>
         <select
           name="type"
           value={formData.type}
           onChange={handleChange}
-          style={{
-            width: '100%',
-            padding: '10px',
-            borderRadius: '4px',
-            border: '1px solid #ddd',
-            fontSize: '14px',
-            backgroundColor: 'white'
-          }}
+          className="form-select"
         >
           <option value="dimension">Dimension</option>
           <option value="fact">Fact</option>
@@ -733,67 +533,33 @@ const TableForm = ({ onSave, onCancel, parentSchema, initialData }) => {
       </div>
       
       {/* Columns Section */}
-      <div style={{ marginBottom: '24px' }}>
-        <div style={{ 
-          display: 'flex', 
-          justifyContent: 'space-between', 
-          alignItems: 'center',
-          marginBottom: '10px'
-        }}>
-          <label style={{ fontWeight: '500', color: '#333' }}>
+      <div className="columns-section">
+        <div className="columns-header">
+          <label className="columns-label">
             Columns
           </label>
           <button
             type="button"
             onClick={() => setShowColumnInput(true)}
-            style={{
-              padding: '5px 10px',
-              backgroundColor: '#1890ff',
-              color: 'white',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '12px',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '5px'
-            }}
+            className="add-column-button"
           >
             <FaPlus size={10} /> Add Column
           </button>
         </div>
         
         {showColumnInput && (
-          <div style={{ 
-            display: 'flex', 
-            gap: '10px',
-            marginBottom: '10px'
-          }}>
+          <div className="column-input-container">
             <input
               type="text"
               value={columnName}
               onChange={(e) => setColumnName(e.target.value)}
               placeholder="Column name"
-              style={{
-                flex: 1,
-                padding: '8px',
-                borderRadius: '4px',
-                border: '1px solid #ddd',
-                fontSize: '14px'
-              }}
+              className="column-input"
             />
             <button
               type="button"
               onClick={addColumn}
-              style={{
-                padding: '8px 15px',
-                backgroundColor: '#52c41a',
-                color: 'white',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '14px'
-              }}
+              className="column-add-button"
             >
               Add
             </button>
@@ -803,15 +569,7 @@ const TableForm = ({ onSave, onCancel, parentSchema, initialData }) => {
                 setShowColumnInput(false);
                 setColumnName('');
               }}
-              style={{
-                padding: '8px 15px',
-                backgroundColor: '#f5f5f5',
-                color: '#333',
-                border: '1px solid #ddd',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '14px'
-              }}
+              className="column-cancel-button"
             >
               Cancel
             </button>
@@ -819,35 +577,17 @@ const TableForm = ({ onSave, onCancel, parentSchema, initialData }) => {
         )}
         
         {formData.columns.length > 0 ? (
-          <div style={{ 
-            border: '1px solid #eee', 
-            borderRadius: '4px',
-            maxHeight: '150px',
-            overflowY: 'auto'
-          }}>
+          <div className="columns-list">
             {formData.columns.map((column, index) => (
               <div 
                 key={index} 
-                style={{ 
-                  padding: '8px 12px',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  borderBottom: index < formData.columns.length - 1 ? '1px solid #f0f0f0' : 'none',
-                  backgroundColor: index % 2 === 0 ? '#f9f9f9' : 'white'
-                }}
+                className="column-item"
               >
                 <span>{column}</span>
                 <button
                   type="button"
                   onClick={() => removeColumn(index)}
-                  style={{
-                    background: 'none',
-                    border: 'none',
-                    color: '#ff4d4f',
-                    cursor: 'pointer',
-                    fontSize: '14px'
-                  }}
+                  className="column-remove-button"
                 >
                   ×
                 </button>
@@ -855,47 +595,23 @@ const TableForm = ({ onSave, onCancel, parentSchema, initialData }) => {
             ))}
           </div>
         ) : (
-          <div style={{ 
-            padding: '15px', 
-            textAlign: 'center', 
-            border: '1px dashed #ddd',
-            borderRadius: '4px',
-            color: '#999',
-            backgroundColor: '#fafafa',
-            fontSize: '13px'
-          }}>
+          <div className="no-columns-message">
             No columns added yet. Click "Add Column" to create one.
           </div>
         )}
       </div>
       
-      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
+      <div className="form-button-group">
         <button
           type="button"
           onClick={onCancel}
-          style={{
-            padding: '10px 20px',
-            backgroundColor: '#f5f5f5',
-            color: '#333',
-            border: '1px solid #ddd',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '14px'
-          }}
+          className="form-button-cancel"
         >
           Cancel
         </button>
         <button
           type="submit"
-          style={{
-            padding: '10px 20px',
-            backgroundColor: '#00a99d',
-            color: 'white',
-            border: 'none',
-            borderRadius: '4px',
-            cursor: 'pointer',
-            fontSize: '14px'
-          }}
+          className="form-button-save"
         >
           {initialData ? 'Update Table' : 'Add Table'}
         </button>
@@ -921,21 +637,10 @@ const CustomEdge = ({ id, source, target, sourceX, sourceY, targetX, targetY, so
       <EdgeLabelRenderer>
         <div
           style={{
-            position: 'absolute',
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            fontSize: 12,
-            pointerEvents: 'all',
-            backgroundColor: style.stroke || '#1a1a1a',
-            padding: '2px 5px',
-            borderRadius: '4px',
-            color: 'white',
-            fontWeight: 500,
-            boxShadow: '0 0 5px rgba(0,0,0,0.3)',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '4px'
+            backgroundColor: style.stroke || '#1a1a1a'
           }}
-          className="nodrag nopan"
+          className="edge-label nodrag nopan"
         >
           <FaArrowRight size={10} />
           {data?.label || 'connects to'}
@@ -1019,105 +724,26 @@ const ServiceNode = ({ data = {} }) => {
   }
   
   return (
-    <div style={{
-      padding: '20px',
-      borderRadius: '12px',
-      background: 'linear-gradient(145deg, #222, #2a2a2a)',
-      boxShadow: '0 10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 169, 157, 0.3) inset',
-      border: '2px solid #00a99d',
-      color: '#fff',
-      width: '240px',
-      minHeight: '110px',
-      display: 'flex',
-      flexDirection: 'column',
-      position: 'relative',
-      fontFamily: 'Inter, sans-serif',
-      justifyContent: 'space-between'
-    }}>
-      <div style={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        marginBottom: '16px'
-      }}>
+    <div className="service-node">
+      <div className="service-node-content">
         {/* Logo and text container */}
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginBottom: '8px'
-        }}>
+        <div className="service-node-logo-container">
           <img 
             src={planPlusLogo} 
             alt="Logo" 
             width="85" 
-            style={{ 
-              marginRight: '2px', 
-              verticalAlign: 'middle' 
-            }} 
+            className="service-node-logo"
           />
-          <span style={{ 
-            fontWeight: '600', 
-            fontSize: '20px',
-            color: '#fff',
-            marginLeft: '2px',
-            marginTop: '2px'
-          }}>
+          <span className="service-node-title">
             Plan+
           </span>
         </div>
         
         {/* Connected databases count */}
-        <div style={{ 
-          fontSize: '12px',
-          color: '#aaa',
-          marginTop: '2px',
-          textAlign: 'center'
-        }}>
+        <div className="service-node-subtitle">
           Connected Databases: {data.databases || 0}
         </div>
       </div>
-      
-      <div style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginTop: '8px'
-      }}>
-        <button
-          style={{
-            background: 'linear-gradient(145deg, rgba(0, 169, 157, 0.2), rgba(0, 169, 157, 0.1))',
-            border: '1px solid rgba(0, 169, 157, 0.4)',
-            borderRadius: '6px',
-            padding: '8px 16px',
-            color: '#00a99d',
-            fontSize: '12px',
-            fontWeight: '500',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            gap: '6px',
-            boxShadow: '0 2px 5px rgba(0, 0, 0, 0.2)',
-            transition: 'all 0.2s ease',
-            width: '100%',
-            justifyContent: 'center'
-          }}
-          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>
-      
       {/* Handles for connections - explicit id for targeting */}
       <Handle
         id="bottom"
@@ -1129,7 +755,7 @@ const ServiceNode = ({ data = {} }) => {
           height: '8px',
           border: '2px solid #00a99d',
           boxShadow: '0 0 5px rgba(0, 169, 157, 0.5)',
-          bottom: '-5px' // Move it slightly outside the node for better connection
+          bottom: '-5px'
         }}
       />
     </div>
@@ -1143,11 +769,6 @@ const DatabaseNode = ({ data = {} }) => {
     data = {}; // Provide a default empty object
   }
   
-  // Enhanced styles for handles used in hierarchy connections
-  
-  // Debug: Log the data being received by the component
-  // console.log('DatabaseNode data:', data);
-  
   // Assign different colors to different databases
   const colorMap = {
     'my_dwh': '#00a99d',   // First database - teal
@@ -1190,8 +811,6 @@ const DatabaseNode = ({ data = {} }) => {
   
   return (
     <div className="database-node" style={{ 
-      padding: '10px', 
-      borderRadius: '5px', 
       background: bgColor, 
       border: `1px solid ${borderColor}`,
       width: '180px',
@@ -1204,42 +823,41 @@ const DatabaseNode = ({ data = {} }) => {
         type="source" 
         position={Position.Right} 
         id="right" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       <Handle 
         type="target" 
         position={Position.Left} 
         id="left" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       <Handle 
         type="source" 
         position={Position.Bottom} 
         id="bottom" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       <Handle 
         type="target" 
         position={Position.Top} 
         id="top" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       
-      <div style={{ 
-        fontWeight: 'bold', 
-        marginBottom: '5px', 
-        display: 'flex', 
-        alignItems: 'center'
-      }}>
-        <span style={{ marginRight: '8px' }}>
+      <div className="database-node-header">
+        <span className="database-node-icon">
           <DatabaseIcon />
         </span>
         {/* Display the database name from the API response */}
-        <span title={data.name || data.label || 'Unknown Database'} style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '120px' }}>
+        <span title={data.name || data.label || 'Unknown Database'} className="database-node-name">
           {data.name || data.label || 'Unknown Database'}
         </span>
       </div>
@@ -1253,7 +871,7 @@ const DatabaseNode = ({ data = {} }) => {
       </div> */}
       
       {/* View Details Button */}
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <div className="database-node-button-container">
         <button
           onClick={(event) => {
             // Stop propagation to prevent the node click handler from being triggered
@@ -1265,20 +883,15 @@ const DatabaseNode = ({ data = {} }) => {
               console.warn('Cannot view details: missing required data properties');
             }
           }}
+          className="database-node-button"
           style={{
-            padding: '4px 8px',
             backgroundColor: borderColor,
-            color: 'white',
-            border: 'none',
-            borderRadius: '3px',
-            cursor: 'pointer',
             fontSize: '11px',
             width: '100%',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',
-            gap: '5px',
-            transition: 'all 0.2s'
+            gap: '5px'
           }}
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -1317,8 +930,6 @@ const SchemaNode = ({ data }) => {
   
   return (
     <div className="schema-node" style={{ 
-      padding: '10px', 
-      borderRadius: '5px', 
       background: bgColor, 
       border: `1px solid ${borderColor}`,
       width: '160px',
@@ -1331,44 +942,43 @@ const SchemaNode = ({ data }) => {
         type="source" 
         position={Position.Right} 
         id="right" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       <Handle 
         type="target" 
         position={Position.Left} 
         id="left" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       <Handle 
         type="source" 
         position={Position.Bottom} 
         id="bottom" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       <Handle 
         type="target" 
         position={Position.Top} 
         id="top" 
-        style={{ background: handleColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: handleColor }} 
         isConnectable={true}
       />
       
-      <div style={{ 
-        fontWeight: 'bold', 
-        marginBottom: '5px', 
-        display: 'flex', 
-        alignItems: 'center'
-      }}>
-        <span style={{ marginRight: '8px' }}>
+      <div className="schema-node-header">
+        <span className="schema-node-icon">
           <SchemaIcon />
         </span>
         {data.label}
       </div>
       
-      <div style={{ fontSize: '0.8em', color: '#aaa' }}>
+      <div className="schema-node-stats">
         {isDbtezSchema ? 'Schema' : `${data.tables} tables`}
       </div>
     </div>
@@ -1378,29 +988,11 @@ const SchemaNode = ({ data }) => {
 const TableNode = ({ data }) => {
   const tableType = data.type || (data.isFact ? 'fact' : 'dimension');
   
-  // Determine colors based on table type
-  let borderColor, background, labelBg, labelColor;
-  
-  switch(tableType) {
-    case 'fact':
-      borderColor = '#fa8c16'; // Orange for fact tables
-      background = '#1a1a1a';
-      labelBg = '#fa8c16';
-      labelColor = 'white';
-      break;
-    case 'stage':
-      borderColor = '#1890ff'; // Blue for stage tables
-      background = '#1a1a1a';
-      labelBg = '#1890ff';
-      labelColor = 'white';
-      break;
-    case 'dimension':
-    default:
-      borderColor = '#52c41a'; // Green for dimension tables
-      background = '#1a1a1a';
-      labelBg = '#52c41a';
-      labelColor = 'white';
-  }
+  // Use consistent teal color for all tables
+  const borderColor = '#00a99d'; // Teal for all tables
+  const background = '#1a1a1a';
+  const labelBg = '#00a99d';
+  const labelColor = 'white';
   
   // Table SVG icon
   const TableIcon = () => (
@@ -1418,8 +1010,6 @@ const TableNode = ({ data }) => {
   
   return (
     <div className="table-node" style={{ 
-      padding: '10px', 
-      borderRadius: '5px', 
       background: background, 
       border: `1px solid ${borderColor}`,
       width: '150px',
@@ -1432,34 +1022,38 @@ const TableNode = ({ data }) => {
         type="source" 
         position={Position.Right} 
         id="right" 
-        style={{ background: borderColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: borderColor }} 
         isConnectable={true}
       />
       <Handle 
         type="target" 
         position={Position.Left} 
         id="left" 
-        style={{ background: borderColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: borderColor }} 
         isConnectable={true}
       />
       <Handle 
         type="source" 
         position={Position.Bottom} 
         id="bottom" 
-        style={{ background: borderColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: borderColor }} 
         isConnectable={true}
       />
       <Handle 
         type="target" 
         position={Position.Top} 
         id="top" 
-        style={{ background: borderColor, width: '10px', height: '10px' }} 
+        className="node-handle-custom"
+        style={{ background: borderColor }} 
         isConnectable={true}
       />
       
-      <div style={{ fontWeight: 'bold', marginBottom: '5px', display: 'flex', alignItems: 'center' }}>
+      <div className="table-node-header">
         <div style={{ display: 'flex', alignItems: 'center', flex: 1 }}>
-          <span style={{ marginRight: '8px' }}>
+          <span className="table-node-icon">
             <TableIcon />
           </span>
           <span style={{ maxWidth: '90px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
@@ -1478,7 +1072,7 @@ const TableNode = ({ data }) => {
           </span>
         </div>
       </div>
-      <div style={{ fontSize: '0.8em', color: '#aaa' }}>
+      <div className="table-node-stats">
         {data.columns && data.columns.length > 0 ? 
           `${data.columns.length} columns` : 
           tableType === 'fact' ? 'Fact Table' : 
@@ -1623,7 +1217,6 @@ const InfiniteCanvas = () => {
   useEffect(() => {
     // Skip if we've already fetched the data
     if (hasFetchedDatabases) {
-      console.log('Skipping database fetch - already loaded');
       return;
     }
     
@@ -1633,9 +1226,6 @@ const InfiniteCanvas = () => {
         const API_BASE_URL = 'https://sandbox.kezel.io/api';
         const token = "abdhsg"; // Replace with your actual token
         const orgSlug = "sN05Pjv11qvH"; // Replace with your actual org slug
-        
-        console.log('Fetching databases from API...');
-        
         const response = await axios.post(
           `${API_BASE_URL}/qbt_database_list_get`,
           {
@@ -1662,13 +1252,7 @@ const InfiniteCanvas = () => {
             schemas: 0, // We'll update these later if needed
             tables: 0
           }));
-          
-          console.log('Mapped databases from API:', apiDatabases);
-          
-          // Update state with API data
           setDatabases(apiDatabases);
-          
-          // Mark that we've fetched the data
           setHasFetchedDatabases(true);
         }
       } catch (error) {
@@ -2107,23 +1691,16 @@ const InfiniteCanvas = () => {
     try {
       // Only clear the cache for the current database
       if (dbSlug === 'my_dwh2') {
-        console.log('Setting empty schemas for service 2 database');
-        // For service 2, we want to ensure it always shows as empty
         localStorage.setItem(`schemas_${dbSlug}`, JSON.stringify([]));
         localStorage.setItem(`tables_${dbSlug}`, JSON.stringify([]));
       } else {
-        // For other databases like MyDataWarehouseDB, we want to preserve their data
-        // but ensure we're not using stale data
+
         console.log(`Preserving schemas for database: ${dbName}`);
-        
-        // We don't need to clear anything for MyDataWarehouseDB
-        // This ensures its schemas will be loaded from the API or mock data
       }
     } catch (error) {
       console.error('Error managing cached data in localStorage:', error);
     }
-    
-    // Store the selected database info in localStorage for the DataFlow component to use
+
     localStorage.setItem('selectedDatabase', JSON.stringify({
       id: dbId,
       name: dbName,
@@ -2750,7 +2327,7 @@ const InfiniteCanvas = () => {
   };
 
   return (
-    <div style={{ width: '100%', height: '80vh', background: '#121212' }} ref={reactFlowWrapper}>
+    <div style={{ width: '100%', height: '80vh', background: '#fff' }} ref={reactFlowWrapper}>
       <ReactFlow
         nodes={nodes}
         edges={edges}
@@ -2948,66 +2525,6 @@ const InfiniteCanvas = () => {
                 Dbtez Data Warehouse
               </span>
             </div>
-            
-            <div style={{ display: 'flex', gap: '5px' }}>
-              <button 
-                onClick={() => toggleDatabaseExpansion('db4')}
-                style={{
-                  padding: '4px 0',
-                  background: 'linear-gradient(45deg, #00a99d, #52c41a)',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '3px',
-                  cursor: 'pointer',
-                  fontSize: '14px',
-                  fontWeight: 'bold',
-                  width: '30px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  boxShadow: '0 0 5px rgba(0, 169, 157, 0.3)'
-                }}
-                className="glow-effect"
-                title="Expand/Collapse Database"
-              >
-                {expandedDatabases['db4'] ? '−' : '+'}
-              </button>
-              
-              <button 
-                onClick={() => {
-                  if (!expandedDatabases['db4']) {
-                    toggleDatabaseExpansion('db4');
-                    setTimeout(() => {
-                      toggleSchemaExpansion('schema10');
-                    }, 100);
-                  } else if (!expandedSchemas['schema10']) {
-                    toggleSchemaExpansion('schema10');
-                  } else {
-                    // If both are expanded, collapse schema
-                    toggleSchemaExpansion('schema10');
-                  }
-                }}
-                style={{
-                  padding: '4px 0',
-                  background: 'linear-gradient(45deg, #fa8c16, #faad14)',
-                  color: 'white',
-                  border: 'none',
-                  borderRadius: '3px',
-                  cursor: 'pointer',
-                  fontSize: '14px',
-                  fontWeight: 'bold',
-                  width: '30px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  boxShadow: '0 0 5px rgba(250, 140, 22, 0.3)'
-                }}
-                className="glow-effect"
-                title="Expand/Collapse Sales Schema"
-              >
-                {expandedSchemas['schema10'] ? '−' : '+'}
-              </button>
-            </div>
           </div>
         </Panel>
         
@@ -3145,7 +2662,6 @@ const InfiniteCanvas = () => {
     </div>
   );
 };
-
 export default function InfiniteCanvasWrapper() {
   return (
     <div style={{ width: '100%', height: '100%', background: '#121212' }}>