diff --git a/public/scripts/components.js b/public/scripts/components.js
index 11cb776..449a5c1 100644
--- a/public/scripts/components.js
+++ b/public/scripts/components.js
@@ -94,10 +94,10 @@ class ClusterMembersComponent extends Component {
     constructor(container, viewModel, eventBus) {
         super(container, viewModel, eventBus);
         
-        console.log('ClusterMembersComponent: Constructor called');
-        console.log('ClusterMembersComponent: Container:', container);
-        console.log('ClusterMembersComponent: Container ID:', container?.id);
-        console.log('ClusterMembersComponent: Container innerHTML:', container?.innerHTML);
+        logger.debug('ClusterMembersComponent: Constructor called');
+        logger.debug('ClusterMembersComponent: Container:', container);
+        logger.debug('ClusterMembersComponent: Container ID:', container?.id);
+        logger.debug('ClusterMembersComponent: Container innerHTML:', container?.innerHTML);
         
         // Track if we're in the middle of a render operation
         this.renderInProgress = false;
@@ -113,17 +113,17 @@ class ClusterMembersComponent extends Component {
     }
 
     mount() {
-        console.log('ClusterMembersComponent: Starting mount...');
+        logger.debug('ClusterMembersComponent: Starting mount...');
         super.mount();
         
         // Show loading state immediately when mounted
-        console.log('ClusterMembersComponent: Showing initial loading state');
+        logger.debug('ClusterMembersComponent: Showing initial loading state');
         this.showLoadingState();
         
         // Set up loading timeout safeguard
         this.setupLoadingTimeout();
         
-        console.log('ClusterMembersComponent: Mounted successfully');
+        logger.debug('ClusterMembersComponent: Mounted successfully');
     }
 
     // Setup loading timeout safeguard to prevent getting stuck in loading state
@@ -139,12 +139,12 @@ class ClusterMembersComponent extends Component {
 
     // Force a render check when loading gets stuck
     forceRenderCheck() {
-        console.log('ClusterMembersComponent: Force render check called');
+        logger.debug('ClusterMembersComponent: Force render check called');
         const members = this.viewModel.get('members');
         const error = this.viewModel.get('error');
         const isLoading = this.viewModel.get('isLoading');
         
-        console.log('ClusterMembersComponent: Force render check state:', { members, error, isLoading });
+        logger.debug('ClusterMembersComponent: Force render check state:', { members, error, isLoading });
         
         if (error) {
             this.showErrorState(error);
@@ -156,67 +156,67 @@ class ClusterMembersComponent extends Component {
     }
 
     setupEventListeners() {
-        console.log('ClusterMembersComponent: Setting up event listeners...');
+        logger.debug('ClusterMembersComponent: Setting up event listeners...');
         // Note: Refresh button is now handled by ClusterViewComponent
         // since it's in the cluster header, not in the members container
     }
 
     setupViewModelListeners() {
-        console.log('ClusterMembersComponent: Setting up view model listeners...');
+        logger.debug('ClusterMembersComponent: Setting up view model listeners...');
         // Listen to cluster members changes with change detection
         this.subscribeToProperty('members', this.handleMembersUpdate.bind(this));
         this.subscribeToProperty('isLoading', this.handleLoadingUpdate.bind(this));
         this.subscribeToProperty('error', this.handleErrorUpdate.bind(this));
-        console.log('ClusterMembersComponent: View model listeners set up');
+        logger.debug('ClusterMembersComponent: View model listeners set up');
     }
 
     // Handle members update with state preservation
     handleMembersUpdate(newMembers, previousMembers) {
-        console.log('ClusterMembersComponent: Members updated:', { newMembers, previousMembers });
+        logger.debug('ClusterMembersComponent: Members updated:', { newMembers, previousMembers });
         
         // Prevent multiple simultaneous renders
         if (this.renderInProgress) {
-            console.log('ClusterMembersComponent: Render already in progress, skipping update');
+            logger.debug('ClusterMembersComponent: Render already in progress, skipping update');
             return;
         }
         
         // Check if we're currently loading - if so, let the loading handler deal with it
         const isLoading = this.viewModel.get('isLoading');
         if (isLoading) {
-            console.log('ClusterMembersComponent: Currently loading, skipping members update (will be handled by loading completion)');
+            logger.debug('ClusterMembersComponent: Currently loading, skipping members update (will be handled by loading completion)');
             return;
         }
         
         // On first load (no previous members), always render
         if (!previousMembers || !Array.isArray(previousMembers) || previousMembers.length === 0) {
-            console.log('ClusterMembersComponent: First load or no previous members, performing full render');
+            logger.debug('ClusterMembersComponent: First load or no previous members, performing full render');
             this.render();
             return;
         }
         
         if (this.shouldPreserveState(newMembers, previousMembers)) {
             // Perform partial update to preserve UI state
-            console.log('ClusterMembersComponent: Preserving state, performing partial update');
+            logger.debug('ClusterMembersComponent: Preserving state, performing partial update');
             this.updateMembersPartially(newMembers, previousMembers);
         } else {
             // Full re-render if structure changed significantly
-            console.log('ClusterMembersComponent: Structure changed, performing full re-render');
+            logger.debug('ClusterMembersComponent: Structure changed, performing full re-render');
             this.render();
         }
     }
 
     // Handle loading state update
     handleLoadingUpdate(isLoading) {
-        console.log('ClusterMembersComponent: Loading state changed:', isLoading);
+        logger.debug('ClusterMembersComponent: Loading state changed:', isLoading);
         
         if (isLoading) {
-            console.log('ClusterMembersComponent: Showing loading state');
+            logger.debug('ClusterMembersComponent: Showing loading state');
             this.renderLoading(`\n            <div class="loading">\n                <div>Loading cluster members...</div>\n            </div>\n        `);
             
             // Set up a loading completion check
             this.checkLoadingCompletion();
         } else {
-            console.log('ClusterMembersComponent: Loading completed, checking if we need to render');
+            logger.debug('ClusterMembersComponent: Loading completed, checking if we need to render');
             // When loading completes, check if we have data to render
             this.handleLoadingCompletion();
         }
@@ -228,16 +228,16 @@ class ClusterMembersComponent extends Component {
         const error = this.viewModel.get('error');
         const isLoading = this.viewModel.get('isLoading');
         
-        console.log('ClusterMembersComponent: Handling loading completion:', { members, error, isLoading });
+        logger.debug('ClusterMembersComponent: Handling loading completion:', { members, error, isLoading });
         
         if (error) {
-            console.log('ClusterMembersComponent: Loading completed with error, showing error state');
+            logger.debug('ClusterMembersComponent: Loading completed with error, showing error state');
             this.showErrorState(error);
         } else if (members && members.length > 0) {
-            console.log('ClusterMembersComponent: Loading completed with data, rendering members');
+            logger.debug('ClusterMembersComponent: Loading completed with data, rendering members');
             this.renderMembers(members);
         } else if (!isLoading) {
-            console.log('ClusterMembersComponent: Loading completed but no data, showing empty state');
+            logger.debug('ClusterMembersComponent: Loading completed but no data, showing empty state');
             this.showEmptyState();
         }
     }
@@ -253,7 +253,7 @@ class ClusterMembersComponent extends Component {
         this.loadingCompletionCheck = setTimeout(() => {
             const isLoading = this.viewModel.get('isLoading');
             if (!isLoading) {
-                console.log('ClusterMembersComponent: Loading completion check triggered');
+                logger.debug('ClusterMembersComponent: Loading completion check triggered');
                 this.handleLoadingCompletion();
             }
         }, 1000); // Check after 1 second
@@ -394,7 +394,7 @@ class ClusterMembersComponent extends Component {
 
     // Show loading state
     showLoadingState() {
-        console.log('ClusterMembersComponent: showLoadingState() called');
+        logger.debug('ClusterMembersComponent: showLoadingState() called');
         this.renderLoading(`
             <div class="loading">
                 <div>Loading cluster members...</div>
@@ -404,13 +404,13 @@ class ClusterMembersComponent extends Component {
 
     // Show error state
     showErrorState(error) {
-        console.log('ClusterMembersComponent: showErrorState() called with error:', error);
+        logger.debug('ClusterMembersComponent: showErrorState() called with error:', error);
         this.renderError(`Error loading cluster members: ${error}`);
     }
 
     // Show empty state
     showEmptyState() {
-        console.log('ClusterMembersComponent: showEmptyState() called');
+        logger.debug('ClusterMembersComponent: showEmptyState() called');
         this.renderEmpty(`
             <div class="empty-state">
                 <div class="empty-state-icon">🌐</div>
@@ -423,14 +423,14 @@ class ClusterMembersComponent extends Component {
     }
 
     renderMembers(members) {
-        console.log('ClusterMembersComponent: renderMembers() called with', members.length, 'members');
+        logger.debug('ClusterMembersComponent: renderMembers() called with', members.length, 'members');
         
         const membersHTML = members.map(member => {
             const statusClass = member.status === 'active' ? 'status-online' : 'status-offline';
             const statusText = member.status === 'active' ? 'Online' : 'Offline';
             const statusIcon = member.status === 'active' ? '🟢' : '🔴';
             
-            console.log('ClusterMembersComponent: Rendering member:', member);
+            logger.debug('ClusterMembersComponent: Rendering member:', member);
             
             return `
                 <div class="member-card" data-member-ip="${member.ip}">
@@ -470,9 +470,9 @@ class ClusterMembersComponent extends Component {
             `;
         }).join('');
 
-        console.log('ClusterMembersComponent: Setting HTML, length:', membersHTML.length);
+        logger.debug('ClusterMembersComponent: Setting HTML, length:', membersHTML.length);
         this.setHTML('', membersHTML);
-        console.log('ClusterMembersComponent: HTML set, setting up member cards...');
+        logger.debug('ClusterMembersComponent: HTML set, setting up member cards...');
         this.setupMemberCards(members);
     }
 
@@ -1134,7 +1134,7 @@ class NodeDetailsComponent extends Component {
     }
 
     setupTabs() {
-        console.log('NodeDetailsComponent: Setting up tabs');
+        logger.debug('NodeDetailsComponent: Setting up tabs');
         super.setupTabs(this.container, {
             onChange: (tab) => {
                 // Persist active tab in the view model for restoration
@@ -1148,7 +1148,7 @@ class NodeDetailsComponent extends Component {
     // Update active tab without full re-render
     updateActiveTab(newTab, previousTab = null) {
         this.setActiveTab(newTab);
-        console.log(`NodeDetailsComponent: Active tab updated to '${newTab}'`);
+        logger.debug(`NodeDetailsComponent: Active tab updated to '${newTab}'`);
     }
 
     setupFirmwareUpload() {
@@ -1245,17 +1245,17 @@ class FirmwareComponent extends Component {
     constructor(container, viewModel, eventBus) {
         super(container, viewModel, eventBus);
         
-        console.log('FirmwareComponent: Constructor called');
-        console.log('FirmwareComponent: Container:', container);
-        console.log('FirmwareComponent: Container ID:', container?.id);
+        logger.debug('FirmwareComponent: Constructor called');
+        logger.debug('FirmwareComponent: Container:', container);
+        logger.debug('FirmwareComponent: Container ID:', container?.id);
         
         // Check if the dropdown exists in the container
         if (container) {
             const dropdown = container.querySelector('#specific-node-select');
-            console.log('FirmwareComponent: Dropdown found in constructor:', !!dropdown);
+            logger.debug('FirmwareComponent: Dropdown found in constructor:', !!dropdown);
             if (dropdown) {
-                console.log('FirmwareComponent: Dropdown tagName:', dropdown.tagName);
-                console.log('FirmwareComponent: Dropdown id:', dropdown.id);
+                logger.debug('FirmwareComponent: Dropdown tagName:', dropdown.tagName);
+                logger.debug('FirmwareComponent: Dropdown id:', dropdown.id);
             }
         }
     }
@@ -1275,16 +1275,16 @@ class FirmwareComponent extends Component {
         
         // Setup specific node select change handler
         const specificNodeSelect = this.findElement('#specific-node-select');
-        console.log('FirmwareComponent: setupEventListeners - specificNodeSelect found:', !!specificNodeSelect);
+        logger.debug('FirmwareComponent: setupEventListeners - specificNodeSelect found:', !!specificNodeSelect);
         if (specificNodeSelect) {
-            console.log('FirmwareComponent: specificNodeSelect element:', specificNodeSelect);
-            console.log('FirmwareComponent: specificNodeSelect tagName:', specificNodeSelect.tagName);
-            console.log('FirmwareComponent: specificNodeSelect id:', specificNodeSelect.id);
+            logger.debug('FirmwareComponent: specificNodeSelect element:', specificNodeSelect);
+            logger.debug('FirmwareComponent: specificNodeSelect tagName:', specificNodeSelect.tagName);
+            logger.debug('FirmwareComponent: specificNodeSelect id:', specificNodeSelect.id);
             
             // Store the bound handler as an instance property
             this._boundNodeSelectHandler = this.handleNodeSelect.bind(this);
             this.addEventListener(specificNodeSelect, 'change', this._boundNodeSelectHandler);
-            console.log('FirmwareComponent: Event listener added to specificNodeSelect');
+            logger.debug('FirmwareComponent: Event listener added to specificNodeSelect');
         } else {
             console.warn('FirmwareComponent: specificNodeSelect element not found during setupEventListeners');
         }
@@ -1345,15 +1345,15 @@ class FirmwareComponent extends Component {
     mount() {
         super.mount();
         
-        console.log('FirmwareComponent: Mounting...');
+        logger.debug('FirmwareComponent: Mounting...');
         
         // Check if the dropdown exists when mounted
         const dropdown = this.findElement('#specific-node-select');
-        console.log('FirmwareComponent: Mount - dropdown found:', !!dropdown);
+        logger.debug('FirmwareComponent: Mount - dropdown found:', !!dropdown);
         if (dropdown) {
-            console.log('FirmwareComponent: Mount - dropdown tagName:', dropdown.tagName);
-            console.log('FirmwareComponent: Mount - dropdown id:', dropdown.id);
-            console.log('FirmwareComponent: Mount - dropdown innerHTML:', dropdown.innerHTML);
+            logger.debug('FirmwareComponent: Mount - dropdown tagName:', dropdown.tagName);
+            logger.debug('FirmwareComponent: Mount - dropdown id:', dropdown.id);
+            logger.debug('FirmwareComponent: Mount - dropdown innerHTML:', dropdown.innerHTML);
         }
         
         // Initialize target visibility and label list on first mount
@@ -1365,7 +1365,7 @@ class FirmwareComponent extends Component {
             console.warn('FirmwareComponent: Initialization after mount failed:', e);
         }
         
-        console.log('FirmwareComponent: Mounted successfully');
+        logger.debug('FirmwareComponent: Mounted successfully');
     }
 
     render() {
@@ -1751,7 +1751,7 @@ class FirmwareComponent extends Component {
         const specificNodeSelect = this.findElement('#specific-node-select');
         const labelSelect = this.findElement('#label-select');
         
-        console.log('FirmwareComponent: updateTargetVisibility called with targetType:', targetType);
+        logger.debug('FirmwareComponent: updateTargetVisibility called with targetType:', targetType);
         
         if (targetType === 'specific') {
             if (specificNodeSelect) { specificNodeSelect.style.display = 'inline-block'; }
@@ -1792,9 +1792,9 @@ class FirmwareComponent extends Component {
             return;
         }
         
-        console.log('FirmwareComponent: populateNodeSelect called');
-        console.log('FirmwareComponent: Select element:', select);
-        console.log('FirmwareComponent: Available nodes:', this.viewModel.get('availableNodes'));
+        logger.debug('FirmwareComponent: populateNodeSelect called');
+        logger.debug('FirmwareComponent: Select element:', select);
+        logger.debug('FirmwareComponent: Available nodes:', this.viewModel.get('availableNodes'));
         
         // Clear existing options
         select.innerHTML = '<option value="">Select a node...</option>';
@@ -1822,7 +1822,7 @@ class FirmwareComponent extends Component {
         // Ensure event listener is still bound after repopulating
         this.ensureNodeSelectListener(select);
         
-        console.log('FirmwareComponent: Node select populated with', availableNodes.length, 'nodes');
+        logger.debug('FirmwareComponent: Node select populated with', availableNodes.length, 'nodes');
     }
 
     // Ensure the node select change listener is properly bound
@@ -2284,7 +2284,7 @@ class ClusterStatusComponent extends Component {
 class TopologyGraphComponent extends Component {
     constructor(container, viewModel, eventBus) {
         super(container, viewModel, eventBus);
-        console.log('TopologyGraphComponent: Constructor called');
+        logger.debug('TopologyGraphComponent: Constructor called');
         this.svg = null;
         this.simulation = null;
         this.zoom = null;
@@ -2303,7 +2303,7 @@ class TopologyGraphComponent extends Component {
         this.width = Math.max(this.width, 800);
         this.height = Math.max(this.height, 600);
         
-        console.log('TopologyGraphComponent: Updated dimensions to', this.width, 'x', this.height);
+        logger.debug('TopologyGraphComponent: Updated dimensions to', this.width, 'x', this.height);
     }
 
     handleResize() {
@@ -2330,14 +2330,14 @@ class TopologyGraphComponent extends Component {
     mount() {
         if (this.isMounted) return;
         
-        console.log('TopologyGraphComponent: Starting mount...');
-        console.log('TopologyGraphComponent: isInitialized =', this.isInitialized);
+        logger.debug('TopologyGraphComponent: Starting mount...');
+        logger.debug('TopologyGraphComponent: isInitialized =', this.isInitialized);
         
         // Call initialize if not already done
         if (!this.isInitialized) {
-            console.log('TopologyGraphComponent: Initializing during mount...');
+            logger.debug('TopologyGraphComponent: Initializing during mount...');
             this.initialize().then(() => {
-                console.log('TopologyGraphComponent: Initialization completed, calling completeMount...');
+                logger.debug('TopologyGraphComponent: Initialization completed, calling completeMount...');
                 // Complete mount after initialization
                 this.completeMount();
             }).catch(error => {
@@ -2346,7 +2346,7 @@ class TopologyGraphComponent extends Component {
                 this.completeMount();
             });
         } else {
-            console.log('TopologyGraphComponent: Already initialized, calling completeMount directly...');
+            logger.debug('TopologyGraphComponent: Already initialized, calling completeMount directly...');
             this.completeMount();
         }
     }