diff --git a/public/scripts/framework.js b/public/scripts/framework.js
index b76df22..9245c6f 100644
--- a/public/scripts/framework.js
+++ b/public/scripts/framework.js
@@ -88,7 +88,7 @@ class ViewModel {
 
     // Set data property and notify listeners
     set(property, value) {
-        console.log(`ViewModel: Setting property '${property}' to:`, value);
+        logger.debug(`ViewModel: Setting property '${property}' to:`, value);
         
         // Check if the value has actually changed
         const hasChanged = this._data[property] !== value;
@@ -100,10 +100,10 @@ class ViewModel {
             // Update the data
             this._data[property] = value;
             
-            console.log(`ViewModel: Property '${property}' changed, notifying listeners...`);
+            logger.debug(`ViewModel: Property '${property}' changed, notifying listeners...`);
             this._notifyListeners(property, value, this._previousData[property]);
         } else {
-            console.log(`ViewModel: Property '${property}' unchanged, skipping notification`);
+            logger.debug(`ViewModel: Property '${property}' unchanged, skipping notification`);
         }
     }
 
@@ -132,7 +132,7 @@ class ViewModel {
         });
         
         if (Object.keys(changedProperties).length > 0) {
-            console.log(`ViewModel: Updated ${Object.keys(changedProperties).length} changed properties:`, Object.keys(changedProperties));
+            logger.debug(`ViewModel: Updated ${Object.keys(changedProperties).length} changed properties:`, Object.keys(changedProperties));
         }
     }
 
@@ -157,20 +157,20 @@ class ViewModel {
 
     // Notify listeners of property changes
     _notifyListeners(property, value, previousValue) {
-        console.log(`ViewModel: _notifyListeners called for property '${property}'`);
+        logger.debug(`ViewModel: _notifyListeners called for property '${property}'`);
         if (this._listeners.has(property)) {
             const callbacks = this._listeners.get(property);
-            console.log(`ViewModel: Found ${callbacks.length} listeners for property '${property}'`);
+            logger.debug(`ViewModel: Found ${callbacks.length} listeners for property '${property}'`);
             callbacks.forEach((callback, index) => {
                 try {
-                    console.log(`ViewModel: Calling listener ${index} for property '${property}'`);
+                    logger.debug(`ViewModel: Calling listener ${index} for property '${property}'`);
                     callback(value, previousValue);
                 } catch (error) {
                     console.error(`Error in property listener for ${property}:`, error);
                 }
             });
         } else {
-            console.log(`ViewModel: No listeners found for property '${property}'`);
+            logger.debug(`ViewModel: No listeners found for property '${property}'`);
         }
     }
 
@@ -285,13 +285,13 @@ class Component {
     mount() {
         if (this.isMounted) return;
         
-        console.log(`${this.constructor.name}: Starting mount...`);
+        logger.debug(`${this.constructor.name}: Starting mount...`);
         this.isMounted = true;
         this.setupEventListeners();
         this.setupViewModelListeners();
         this.render();
         
-        console.log(`${this.constructor.name}: Mounted successfully`);
+        logger.debug(`${this.constructor.name}: Mounted successfully`);
     }
 
     // Unmount the component
@@ -302,14 +302,14 @@ class Component {
         this.cleanupEventListeners();
         this.cleanupViewModelListeners();
         
-        console.log(`${this.constructor.name} unmounted`);
+        logger.debug(`${this.constructor.name} unmounted`);
     }
 
     // Pause the component (keep alive but pause activity)
     pause() {
         if (!this.isMounted) return;
         
-        console.log(`${this.constructor.name}: Pausing component`);
+        logger.debug(`${this.constructor.name}: Pausing component`);
         
         // Pause any active timers or animations
         if (this.updateInterval) {
@@ -328,7 +328,7 @@ class Component {
     resume() {
         if (!this.isMounted || !this.isPaused) return;
         
-        console.log(`${this.constructor.name}: Resuming component`);
+        logger.debug(`${this.constructor.name}: Resuming component`);
         
         this.isPaused = false;
         
@@ -385,7 +385,7 @@ class Component {
     // Partial update method for efficient data updates
     updatePartial(property, newValue, previousValue) {
         // Override in subclasses to implement partial updates
-        console.log(`${this.constructor.name}: Partial update for '${property}':`, { newValue, previousValue });
+        logger.debug(`${this.constructor.name}: Partial update for '${property}':`, { newValue, previousValue });
     }
 
     // UI State Management Methods
@@ -474,22 +474,22 @@ class Component {
 
     // Helper method to set innerHTML safely
     setHTML(selector, html) {
-        console.log(`${this.constructor.name}: setHTML called with selector '${selector}', html length: ${html.length}`);
+        logger.debug(`${this.constructor.name}: setHTML called with selector '${selector}', html length: ${html.length}`);
         
         let element;
         if (selector === '') {
             // Empty selector means set HTML on the component's container itself
             element = this.container;
-            console.log(`${this.constructor.name}: Using component container for empty selector`);
+            logger.debug(`${this.constructor.name}: Using component container for empty selector`);
         } else {
             // Find element within the component's container
             element = this.findElement(selector);
         }
         
         if (element) {
-            console.log(`${this.constructor.name}: Element found, setting innerHTML`);
+            logger.debug(`${this.constructor.name}: Element found, setting innerHTML`);
             element.innerHTML = html;
-            console.log(`${this.constructor.name}: innerHTML set successfully`);
+            logger.debug(`${this.constructor.name}: innerHTML set successfully`);
         } else {
             console.error(`${this.constructor.name}: Element not found for selector '${selector}'`);
         }
@@ -651,7 +651,7 @@ class App {
         
         // Store in cache
         this.componentCache.set(name, component);
-        console.log(`App: Pre-initialized component for route '${name}'`);
+        logger.debug(`App: Pre-initialized component for route '${name}'`);
     }
 
     // Navigate to a route
@@ -659,13 +659,13 @@ class App {
         // Check cooldown period
         const now = Date.now();
         if (now - this.lastNavigationTime < this.navigationCooldown) {
-            console.log(`App: Navigation cooldown active, skipping route '${routeName}'`);
+            logger.debug(`App: Navigation cooldown active, skipping route '${routeName}'`);
             return;
         }
         
         // If navigation is already in progress, queue this request
         if (this.navigationInProgress) {
-            console.log(`App: Navigation in progress, queuing route '${routeName}'`);
+            logger.debug(`App: Navigation in progress, queuing route '${routeName}'`);
             if (!this.navigationQueue.includes(routeName)) {
                 this.navigationQueue.push(routeName);
             }
@@ -674,7 +674,7 @@ class App {
 
         // If trying to navigate to the same route, do nothing
         if (this.currentView && this.currentView.routeName === routeName) {
-            console.log(`App: Already on route '${routeName}', skipping navigation`);
+            logger.debug(`App: Already on route '${routeName}', skipping navigation`);
             return;
         }
 
@@ -687,19 +687,19 @@ class App {
         this.navigationInProgress = true;
         
         try {
-            console.log(`App: Navigating to route '${routeName}'`);
+            logger.debug(`App: Navigating to route '${routeName}'`);
             const route = this.routes.get(routeName);
             if (!route) {
                 console.error(`Route '${routeName}' not found`);
                 return;
             }
 
-            console.log(`App: Route found, component: ${route.componentClass.name}, container: ${route.containerId}`);
+            logger.debug(`App: Route found, component: ${route.componentClass.name}, container: ${route.containerId}`);
 
             // Get or create component from cache
             let component = this.componentCache.get(routeName);
             if (!component) {
-                console.log(`App: Component not in cache, creating new instance for '${routeName}'`);
+                logger.debug(`App: Component not in cache, creating new instance for '${routeName}'`);
                 const container = document.getElementById(route.containerId);
                 if (!container) {
                     console.error(`Container '${route.containerId}' not found`);
@@ -714,12 +714,12 @@ class App {
 
             // Hide current view smoothly
             if (this.currentView) {
-                console.log('App: Hiding current view');
+                logger.debug('App: Hiding current view');
                 await this.hideCurrentView();
             }
 
             // Show new view
-            console.log(`App: Showing new view '${routeName}'`);
+            logger.debug(`App: Showing new view '${routeName}'`);
             await this.showView(routeName, component);
 
             // Update navigation state
@@ -731,7 +731,7 @@ class App {
             // Mark view as cached for future use
             this.cachedViews.add(routeName);
             
-            console.log(`App: Navigation to '${routeName}' completed`);
+            logger.debug(`App: Navigation to '${routeName}' completed`);
 
         } catch (error) {
             console.error('App: Navigation failed:', error);
@@ -741,7 +741,7 @@ class App {
             // Process any queued navigation requests
             if (this.navigationQueue.length > 0) {
                 const nextRoute = this.navigationQueue.shift();
-                console.log(`App: Processing queued navigation to '${nextRoute}'`);
+                logger.debug(`App: Processing queued navigation to '${nextRoute}'`);
                 setTimeout(() => this.navigateTo(nextRoute), 100);
             }
         }
@@ -753,7 +753,7 @@ class App {
         
         // If component is mounted, pause it instead of unmounting
         if (this.currentView.isMounted) {
-            console.log('App: Pausing current view instead of unmounting');
+            logger.debug('App: Pausing current view instead of unmounting');
             this.currentView.pause();
         }
         
@@ -773,10 +773,10 @@ class App {
         
         // Ensure component is mounted (but not necessarily active)
         if (!component.isMounted) {
-            console.log(`App: Mounting component for '${routeName}'`);
+            logger.debug(`App: Mounting component for '${routeName}'`);
             component.mount();
         } else {
-            console.log(`App: Resuming component for '${routeName}'`);
+            logger.debug(`App: Resuming component for '${routeName}'`);
             component.resume();
         }
         
@@ -858,11 +858,11 @@ class App {
 
     // Clean up cached components (call when app is shutting down)
     cleanup() {
-        console.log('App: Cleaning up cached components...');
+        logger.debug('App: Cleaning up cached components...');
         
         this.componentCache.forEach((component, routeName) => {
             if (component.isMounted) {
-                console.log(`App: Unmounting cached component '${routeName}'`);
+                logger.debug(`App: Unmounting cached component '${routeName}'`);
                 component.unmount();
             }
         });