diff --git a/pyproject.toml b/pyproject.toml
index b88f506..0a99108 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -29,14 +29,16 @@ classifiers = [
 keywords = ["mesh", "networking", "lora", "repeater", "daemon", "iot"]
 
 
+
 dependencies = [
-    "pymc_core[hardware]>=1.0.2",
+    "pymc_core[hardware] @ git+https://github.com/rightup/pyMC_core.git@feat/cad",
     "pyyaml>=6.0.0",
     "cherrypy>=18.0.0",
 ]
 
 
 
+
 [project.optional-dependencies]
 dev = [
     "pytest>=7.4.0",
diff --git a/repeater/http_server.py b/repeater/http_server.py
index 2c9bd16..9c41278 100644
--- a/repeater/http_server.py
+++ b/repeater/http_server.py
@@ -58,14 +58,14 @@ class CADCalibrationEngine:
         self.calibration_thread = None
         
     def get_test_ranges(self, spreading_factor: int):
-        """Get CAD test ranges based on spreading factor"""
+        """Get CAD test ranges based on spreading factor - comprehensive coverage"""
         sf_ranges = {
-            7:  (range(16, 29, 1), range(6, 15, 1)),
-            8:  (range(16, 29, 1), range(6, 15, 1)),  
-            9:  (range(18, 31, 1), range(7, 16, 1)),
-            10: (range(20, 33, 1), range(8, 16, 1)),
-            11: (range(22, 35, 1), range(9, 17, 1)),
-            12: (range(24, 37, 1), range(10, 18, 1)),
+            7:  (range(17, 26, 1), range(7, 15, 1)),   # Full range coverage
+            8:  (range(17, 26, 1), range(7, 15, 1)),   # Full range coverage
+            9:  (range(19, 28, 1), range(8, 16, 1)),   # Full range coverage
+            10: (range(21, 30, 1), range(9, 17, 1)),   # Full range coverage
+            11: (range(23, 32, 1), range(10, 18, 1)),  # Full range coverage
+            12: (range(25, 34, 1), range(11, 19, 1)),  # Full range coverage
         }
         return sf_ranges.get(spreading_factor, sf_ranges[8])
     
@@ -75,12 +75,12 @@ class CADCalibrationEngine:
         
         for _ in range(samples):
             try:
-                result = await radio.perform_cad(det_peak=det_peak, det_min=det_min, timeout=0.6)
+                result = await radio.perform_cad(det_peak=det_peak, det_min=det_min, timeout=0.3)
                 if result:
                     detections += 1
             except Exception:
                 pass
-            await asyncio.sleep(0.03)
+            await asyncio.sleep(0.01)  # Reduced sleep time
         
         return {
             'det_peak': det_peak,
@@ -92,13 +92,12 @@ class CADCalibrationEngine:
     
     def broadcast_to_clients(self, data):
         """Send data to all connected SSE clients"""
-        message = f"data: {json.dumps(data)}\n\n"
-        for client in self.clients.copy():
-            try:
-                client.write(message.encode())
-                client.flush()
-            except Exception:
-                self.clients.discard(client)
+        # Store the message for clients to pick up
+        self.last_message = data
+        # Also store in a queue for clients to consume
+        if not hasattr(self, 'message_queue'):
+            self.message_queue = []
+        self.message_queue.append(data)
     
     def calibration_worker(self, samples: int, delay_ms: int):
         """Worker thread for calibration process"""
@@ -129,60 +128,105 @@ class CADCalibrationEngine:
             
             self.broadcast_to_clients({
                 "type": "status", 
-                "message": f"Starting calibration: SF{sf}, {total_tests} tests"
+                "message": f"Starting calibration: SF{sf}, {total_tests} tests",
+                "test_ranges": {
+                    "peak_min": min(peak_range),
+                    "peak_max": max(peak_range),
+                    "min_min": min(min_range),
+                    "min_max": max(min_range),
+                    "spreading_factor": sf,
+                    "total_tests": total_tests
+                }
             })
             
             current = 0
             
-            # Run calibration in event loop
+            import random
+            
+
+            peak_list = list(peak_range)
+            min_list = list(min_range)
+            
+            # Create all test combinations
+            test_combinations = []
+            for det_peak in peak_list:
+                for det_min in min_list:
+                    test_combinations.append((det_peak, det_min))
+            
+            # Sort by distance from center for center-out pattern
+            peak_center = (max(peak_list) + min(peak_list)) / 2
+            min_center = (max(min_list) + min(min_list)) / 2
+            
+            def distance_from_center(combo):
+                peak, min_val = combo
+                return ((peak - peak_center) ** 2 + (min_val - min_center) ** 2) ** 0.5
+            
+            # Sort by distance from center
+            test_combinations.sort(key=distance_from_center)
+            
+
+            band_size = max(1, len(test_combinations) // 8)  # Create 8 bands
+            randomized_combinations = []
+            
+            for i in range(0, len(test_combinations), band_size):
+                band = test_combinations[i:i + band_size]
+                random.shuffle(band)  # Randomize within each band
+                randomized_combinations.extend(band)
+            
+            # Run calibration in event loop with center-out randomized pattern
             if self.event_loop:
-                for det_peak in peak_range:
+                for det_peak, det_min in randomized_combinations:
                     if not self.running:
                         break
                         
-                    for det_min in min_range:
-                        if not self.running:
-                            break
-                            
-                        current += 1
-                        self.progress["current"] = current
+                    current += 1
+                    self.progress["current"] = current
+                    
+                    # Update progress
+                    self.broadcast_to_clients({
+                        "type": "progress",
+                        "current": current,
+                        "total": total_tests,
+                        "peak": det_peak,
+                        "min": det_min
+                    })
+                    
+                    # Run the test
+                    future = asyncio.run_coroutine_threadsafe(
+                        self.test_cad_config(radio, det_peak, det_min, samples),
+                        self.event_loop
+                    )
+                    
+                    try:
+                        result = future.result(timeout=30)  # 30 second timeout per test
                         
-                        # Update progress
+                        # Store result
+                        key = f"{det_peak}-{det_min}"
+                        self.results[key] = result
+                        
+                        # Send result to clients
                         self.broadcast_to_clients({
-                            "type": "progress",
-                            "current": current,
-                            "total": total_tests,
-                            "peak": det_peak,
-                            "min": det_min
+                            "type": "result",
+                            **result
                         })
+                    except Exception as e:
+                        logger.error(f"CAD test failed for peak={det_peak}, min={det_min}: {e}")
                         
-                        # Run the test
-                        future = asyncio.run_coroutine_threadsafe(
-                            self.test_cad_config(radio, det_peak, det_min, samples),
-                            self.event_loop
-                        )
-                        
-                        try:
-                            result = future.result(timeout=30)  # 30 second timeout per test
-                            
-                            # Store result
-                            key = f"{det_peak}-{det_min}"
-                            self.results[key] = result
-                            
-                            # Send result to clients
-                            self.broadcast_to_clients({
-                                "type": "result",
-                                **result
-                            })
-                        except Exception as e:
-                            logger.error(f"CAD test failed for peak={det_peak}, min={det_min}: {e}")
-                            
-                        # Delay between tests
-                        if self.running and delay_ms > 0:
-                            time.sleep(delay_ms / 1000.0)
+                    # Delay between tests
+                    if self.running and delay_ms > 0:
+                        time.sleep(delay_ms / 1000.0)
             
             if self.running:
-                self.broadcast_to_clients({"type": "completed", "message": "Calibration completed"})
+                # Find best result
+                best_result = None
+                if self.results:
+                    best_result = max(self.results.values(), key=lambda x: x['detection_rate'])
+                
+                self.broadcast_to_clients({
+                    "type": "completed", 
+                    "message": "Calibration completed",
+                    "results": {"best": best_result} if best_result else None
+                })
             else:
                 self.broadcast_to_clients({"type": "status", "message": "Calibration stopped"})
                 
@@ -200,6 +244,7 @@ class CADCalibrationEngine:
         self.running = True
         self.results.clear()
         self.progress = {"current": 0, "total": 0}
+        self.clear_message_queue()  # Clear any old messages
         
         # Start calibration in separate thread
         self.calibration_thread = threading.Thread(
@@ -217,15 +262,10 @@ class CADCalibrationEngine:
         if self.calibration_thread:
             self.calibration_thread.join(timeout=2)
     
-    def add_client(self, response_stream):
-        """Add SSE client"""
-        self.clients.add(response_stream)
-    
-    def remove_client(self, response_stream):
-        """Remove SSE client"""
-        self.clients.discard(response_stream)
-
-
+    def clear_message_queue(self):
+        """Clear the message queue when starting a new calibration"""
+        if hasattr(self, 'message_queue'):
+            self.message_queue.clear()
 class APIEndpoints:
 
     def __init__(
@@ -235,13 +275,15 @@ class APIEndpoints:
         config: Optional[dict] = None,
         event_loop=None,
         daemon_instance=None,
+        config_path=None,
     ):
 
         self.stats_getter = stats_getter
         self.send_advert_func = send_advert_func
         self.config = config or {}
-        self.event_loop = event_loop  # Store reference to main event loop
-        self.daemon_instance = daemon_instance  # Store reference to daemon instance
+        self.event_loop = event_loop
+        self.daemon_instance = daemon_instance
+        self._config_path = config_path or '/etc/pymc_repeater/config.yaml'
         
         # Initialize CAD calibration engine
         self.cad_calibration = CADCalibrationEngine(daemon_instance, event_loop)
@@ -395,6 +437,72 @@ class APIEndpoints:
             logger.error(f"Error stopping CAD calibration: {e}")
             return {"success": False, "error": str(e)}
     
+    @cherrypy.expose
+    @cherrypy.tools.json_out()
+    @cherrypy.tools.json_in()
+    def save_cad_settings(self):
+        """Save CAD calibration settings to config"""
+        if cherrypy.request.method != "POST":
+            return {"success": False, "error": "Method not allowed"}
+        
+        try:
+            data = cherrypy.request.json or {}
+            peak = data.get("peak")
+            min_val = data.get("min_val")
+            detection_rate = data.get("detection_rate", 0)
+            
+            if peak is None or min_val is None:
+                return {"success": False, "error": "Missing peak or min_val parameters"}
+            
+            # Update the radio immediately if available
+            if self.daemon_instance and hasattr(self.daemon_instance, 'radio') and self.daemon_instance.radio:
+                if hasattr(self.daemon_instance.radio, 'set_custom_cad_thresholds'):
+                    self.daemon_instance.radio.set_custom_cad_thresholds(peak=peak, min_val=min_val)
+                    logger.info(f"Applied CAD settings to radio: peak={peak}, min={min_val}")
+            
+            # Update the in-memory config
+            if "radio" not in self.config:
+                self.config["radio"] = {}
+            if "cad" not in self.config["radio"]:
+                self.config["radio"]["cad"] = {}
+            
+            self.config["radio"]["cad"]["peak_threshold"] = peak
+            self.config["radio"]["cad"]["min_threshold"] = min_val
+            
+            # Save to config file
+            config_path = getattr(self, '_config_path', '/etc/pymc_repeater/config.yaml')
+            self._save_config_to_file(config_path)
+            
+            logger.info(f"Saved CAD settings to config: peak={peak}, min={min_val}, rate={detection_rate:.1f}%")
+            return {
+                "success": True, 
+                "message": f"CAD settings saved: peak={peak}, min={min_val}",
+                "settings": {"peak": peak, "min_val": min_val, "detection_rate": detection_rate}
+            }
+            
+        except Exception as e:
+            logger.error(f"Error saving CAD settings: {e}")
+            return {"success": False, "error": str(e)}
+
+    def _save_config_to_file(self, config_path):
+        """Save current config to YAML file"""
+        try:
+            import yaml
+            import os
+            
+            # Ensure directory exists
+            os.makedirs(os.path.dirname(config_path), exist_ok=True)
+            
+            # Write config to file
+            with open(config_path, 'w') as f:
+                yaml.dump(self.config, f, default_flow_style=False, indent=2)
+                
+            logger.info(f"Configuration saved to {config_path}")
+            
+        except Exception as e:
+            logger.error(f"Failed to save config to {config_path}: {e}")
+            raise
+
     @cherrypy.expose
     def cad_calibration_stream(self):
         """Server-Sent Events stream for real-time updates"""
@@ -404,25 +512,62 @@ class APIEndpoints:
         cherrypy.response.headers['Access-Control-Allow-Origin'] = '*'
         
         def generate():
-            # Add client to calibration engine
-            response = cherrypy.response
-            self.cad_calibration.add_client(response)
+            
+            if not hasattr(self.cad_calibration, 'message_queue'):
+                self.cad_calibration.message_queue = []
             
             try:
-                # Send initial connection message
+          
                 yield f"data: {json.dumps({'type': 'connected', 'message': 'Connected to CAD calibration stream'})}\n\n"
                 
-                # Keep connection alive - the calibration engine will send data
+               
+                if self.cad_calibration.running:
+             
+                    config = getattr(self.cad_calibration.daemon_instance, 'config', {})
+                    radio_config = config.get("radio", {})
+                    sf = radio_config.get("spreading_factor", 8)
+                    
+         
+                    peak_range, min_range = self.cad_calibration.get_test_ranges(sf)
+                    total_tests = len(peak_range) * len(min_range)
+                    
+              
+                    status_message = {
+                        "type": "status", 
+                        "message": f"Calibration in progress: SF{sf}, {total_tests} tests",
+                        "test_ranges": {
+                            "peak_min": min(peak_range),
+                            "peak_max": max(peak_range),
+                            "min_min": min(min_range),
+                            "min_max": max(min_range),
+                            "spreading_factor": sf,
+                            "total_tests": total_tests
+                        }
+                    }
+                    yield f"data: {json.dumps(status_message)}\n\n"
+                
+                last_message_index = len(self.cad_calibration.message_queue)
+                
+               
                 while True:
-                    time.sleep(1)
-                    # Send keepalive every second
-                    yield f"data: {json.dumps({'type': 'keepalive'})}\n\n"
+                   
+                    current_queue_length = len(self.cad_calibration.message_queue)
+                    if current_queue_length > last_message_index:
+                    
+                        for i in range(last_message_index, current_queue_length):
+                            message = self.cad_calibration.message_queue[i]
+                            yield f"data: {json.dumps(message)}\n\n"
+                        last_message_index = current_queue_length
+                    else:
+                       
+                        yield f"data: {json.dumps({'type': 'keepalive'})}\n\n"
+                    
+                    time.sleep(0.5)  
                     
             except Exception as e:
                 logger.error(f"SSE stream error: {e}")
             finally:
-                # Remove client when connection closes
-                self.cad_calibration.remove_client(response)
+                pass  
         
         return generate()
     
@@ -443,6 +588,7 @@ class StatsApp:
         config: Optional[dict] = None,
         event_loop=None,
         daemon_instance=None,
+        config_path=None,
     ):
 
         self.stats_getter = stats_getter
@@ -453,7 +599,7 @@ class StatsApp:
         self.config = config or {}
 
         # Create nested API object for routing
-        self.api = APIEndpoints(stats_getter, send_advert_func, self.config, event_loop, daemon_instance)
+        self.api = APIEndpoints(stats_getter, send_advert_func, self.config, event_loop, daemon_instance, config_path)
 
         # Load template on init
         if template_dir:
@@ -671,12 +817,13 @@ class HTTPStatsServer:
         config: Optional[dict] = None,
         event_loop=None,
         daemon_instance=None,
+        config_path=None,
     ):
 
         self.host = host
         self.port = port
         self.app = StatsApp(
-            stats_getter, template_dir, node_name, pub_key, send_advert_func, config, event_loop, daemon_instance
+            stats_getter, template_dir, node_name, pub_key, send_advert_func, config, event_loop, daemon_instance, config_path
         )
 
     def start(self):
diff --git a/repeater/main.py b/repeater/main.py
index 44c7c0f..e2a9b12 100644
--- a/repeater/main.py
+++ b/repeater/main.py
@@ -12,12 +12,6 @@ from pymc_core.protocol.constants import MAX_PATH_SIZE, ROUTE_TYPE_DIRECT
 logger = logging.getLogger("RepeaterDaemon")
 
 
-
-
-
-logger = logging.getLogger("RepeaterDaemon")
-
-
 class RepeaterDaemon:
 
     def __init__(self, config: dict, radio=None):
@@ -53,8 +47,13 @@ class RepeaterDaemon:
                 
 
                 if hasattr(self.radio, 'set_custom_cad_thresholds'):
-                    self.radio.set_custom_cad_thresholds(peak=23, min_val=11)
-                    logger.info("CAD thresholds set: peak=23, min=11")
+                    # Load CAD settings from config, with defaults
+                    cad_config = self.config.get("radio", {}).get("cad", {})
+                    peak_threshold = cad_config.get("peak_threshold", 23)
+                    min_threshold = cad_config.get("min_threshold", 11)
+                    
+                    self.radio.set_custom_cad_thresholds(peak=peak_threshold, min_val=min_threshold)
+                    logger.info(f"CAD thresholds set from config: peak={peak_threshold}, min={min_threshold}")
                 else:
                     logger.warning("Radio does not support CAD configuration")
                 
@@ -361,7 +360,6 @@ class RepeaterDaemon:
             else:
                 pub_key_formatted = pub_key_hex
 
-        # Get the current event loop (the main loop where the radio was initialized)
         current_loop = asyncio.get_event_loop()
 
         self.http_server = HTTPStatsServer(
@@ -372,9 +370,10 @@ class RepeaterDaemon:
             node_name=node_name,
             pub_key=pub_key_formatted,
             send_advert_func=self.send_advert,
-            config=self.config,  # Pass the config reference
-            event_loop=current_loop,  # Pass the main event loop
-            daemon_instance=self,  # Pass the daemon instance for CAD calibration
+            config=self.config, 
+            event_loop=current_loop, 
+            daemon_instance=self,  
+            config_path=getattr(self, 'config_path', '/etc/pymc_repeater/config.yaml'),
         )
 
         try:
@@ -410,12 +409,14 @@ def main():
 
     # Load configuration
     config = load_config(args.config)
+    config_path = args.config if args.config else '/etc/pymc_repeater/config.yaml'
 
     if args.log_level:
         config["logging"]["level"] = args.log_level
 
     # Don't initialize radio here - it will be done inside the async event loop
     daemon = RepeaterDaemon(config, radio=None)
+    daemon.config_path = config_path
 
     # Run
     try:
diff --git a/repeater/templates/cad-calibration.html b/repeater/templates/cad-calibration.html
index d0bf5a1..d5e1fa9 100644
--- a/repeater/templates/cad-calibration.html
+++ b/repeater/templates/cad-calibration.html
@@ -5,8 +5,9 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/static/style.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/chartjs-chart-matrix@2.0.1/dist/chartjs-chart-matrix.min.js"></script>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
+    <script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
     <style>
         .calibration-controls {
             background: var(--bg-secondary);
@@ -15,35 +16,108 @@
             margin: 20px 0;
             border: 1px solid var(--border-color);
             display: flex;
-            gap: 20px;
+            justify-content: center;
             align-items: center;
-            flex-wrap: wrap;
-        }
-        
-        .control-group {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-        }
-        
-        .control-group label {
-            font-weight: 600;
-            color: var(--text-secondary);
-        }
-        
-        .control-group input {
-            padding: 8px 12px;
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            width: 80px;
         }
         
         .buttons {
             display: flex;
-            gap: 10px;
-            margin-left: auto;
+            gap: 16px;
+        }
+
+        /* Control button styling - matching site design system */
+        .control-btn {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 16px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 6px;
+            color: #d4d4d4;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.875rem;
+            font-family: inherit;
+            min-width: 160px;
+        }
+
+        .control-btn:hover:not(:disabled) {
+            background: rgba(255, 255, 255, 0.1);
+            border-color: rgba(255, 255, 255, 0.2);
+            transform: translateY(-1px);
+        }
+
+        .control-btn:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+            background: rgba(255, 255, 255, 0.02);
+        }
+
+        .control-btn-start {
+            background: rgba(16, 185, 129, 0.1);
+            border-color: rgba(16, 185, 129, 0.3);
+            color: #10b981;
+        }
+
+        .control-btn-start:hover:not(:disabled) {
+            background: rgba(16, 185, 129, 0.2);
+            border-color: rgba(16, 185, 129, 0.4);
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
+        }
+
+        .control-btn-danger {
+            background: rgba(239, 68, 68, 0.1);
+            border-color: rgba(239, 68, 68, 0.3);
+            color: #ef4444;
+        }
+
+        .control-btn-danger:hover:not(:disabled) {
+            background: rgba(239, 68, 68, 0.2);
+            border-color: rgba(239, 68, 68, 0.4);
+            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
+        }
+
+        .control-btn .icon {
+            width: 20px;
+            height: 20px;
+            flex-shrink: 0;
+        }
+
+        .control-label {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            flex-grow: 1;
+        }
+
+        .control-title {
+            font-weight: 500;
+            font-size: 0.875rem;
+            line-height: 1.2;
+        }
+
+        .control-value {
+            font-size: 0.75rem;
+            opacity: 0.8;
+            line-height: 1.1;
+        }
+
+        .control-btn-save {
+            background: rgba(59, 130, 246, 0.1);
+            border-color: rgba(59, 130, 246, 0.3);
+            color: #3b82f6;
+        }
+
+        .control-btn-save:hover:not(:disabled) {
+            background: rgba(59, 130, 246, 0.2);
+            border-color: rgba(59, 130, 246, 0.4);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
+        }
+
+        .save-controls {
+            display: flex;
+            justify-content: center;
         }
         
         .chart-container {
@@ -52,8 +126,106 @@
             padding: 20px;
             margin: 20px 0;
             border: 1px solid var(--border-color);
-            height: 500px;
+            height: 600px; /* Increased to match new chart height */
             position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .heatmap-svg {
+            border-radius: 4px;
+            background: var(--bg-primary);
+        }
+        
+        .heatmap-cell {
+            stroke: var(--border-color);
+            stroke-width: 1;
+            cursor: pointer;
+        }
+        
+        .heatmap-cell:hover {
+            stroke: var(--primary);
+            stroke-width: 2;
+        }
+        
+        .axis-label {
+            font-size: 12px;
+            fill: var(--text-secondary);
+        }
+        
+        .axis-title {
+            font-size: 14px;
+            font-weight: bold;
+            fill: var(--text-primary);
+        }
+        
+        .legend-title {
+            font-size: 12px;
+            font-weight: bold;
+            fill: var(--text-primary);
+        }
+        
+        .legend-label {
+            font-size: 10px;
+            fill: var(--text-secondary);
+        }
+        
+        .axis {
+            font-size: 12px;
+        }
+        
+        .axis path,
+        .axis line {
+            fill: none;
+            stroke: #888;
+            shape-rendering: crispEdges;
+        }
+        
+        .axis text {
+            fill: #fff !important;
+            font-weight: bold;
+        }
+        
+        .hexagon {
+            cursor: pointer;
+        }
+        
+        .hexagon:hover {
+            opacity: 1 !important;
+        }
+        
+        .non-detected {
+            cursor: pointer;
+        }
+        
+        .chart-background {
+            pointer-events: none;
+        }
+        
+        .heatmap-tooltip {
+            position: absolute;
+            background-color: white;
+            border: solid 2px #333;
+            border-radius: 5px;
+            padding: 8px;
+            font-size: 12px;
+            color: #333;
+            pointer-events: none;
+            opacity: 0;
+            z-index: 1000;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+        }
+        
+        .heatmap-title {
+            fill: #fff !important;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        
+        .heatmap-subtitle {
+            fill: #ccc !important;
+            font-size: 14px;
         }
         
         .status-container {
@@ -134,47 +306,72 @@
     </style>
 </head>
 <body>
-    <div class="container">
-        <!-- Include navigation -->
-        <nav class="nav-container">
-            <div class="nav-brand">
-                <a href="/" class="nav-link">
-                    <i class="nav-icon">📡</i>
-                    <span>{{ node_name }}</span>
-                </a>
-            </div>
-            <div class="nav-links">
-                <a href="/" class="nav-link">Dashboard</a>
-                <a href="/configuration" class="nav-link">Configuration</a>
-                <a href="/cad-calibration" class="nav-link active">CAD Calibration</a>
-            </div>
-        </nav>
+    <div class="layout">
+        <!-- Navigation Component -->
+        <!-- NAVIGATION_PLACEHOLDER -->
 
-        <div class="content">
-            <div class="page-header">
+        <!-- Main Content -->
+        <main class="content">
+            <header>
                 <h1>CAD Calibration Tool</h1>
-                <p>Real-time Channel Activity Detection calibration with heatmap visualization</p>
-            </div>
+                <p>Real-time Channel Activity Detection calibration</p>
+            </header>
 
             <!-- Controls -->
             <div class="calibration-controls">
-                <div class="control-group">
-                    <label for="samples">Samples per test:</label>
-                    <input type="number" id="samples" value="50" min="10" max="200">
-                </div>
-                <div class="control-group">
-                    <label for="delay">Delay (ms):</label>
-                    <input type="number" id="delay" value="100" min="50" max="500">
-                </div>
                 <div class="buttons">
-                    <button id="start-btn" class="btn btn-primary">Start Calibration</button>
-                    <button id="stop-btn" class="btn btn-danger" disabled>Stop</button>
+                    <button id="start-btn" class="control-btn control-btn-start">
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polygon points="5 3 19 12 5 21 5 3"></polygon>
+                        </svg>
+                        <span class="control-label">
+                            <span class="control-title">Start Calibration</span>
+                      
+                        </span>
+                    </button>
+                    <button id="stop-btn" class="control-btn control-btn-danger" disabled>
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="6" y="6" width="12" height="12"></rect>
+                        </svg>
+                        <span class="control-label">
+                            <span class="control-title">Stop</span>
+                            <span class="control-value">Halt calibration</span>
+                        </span>
+                    </button>
                 </div>
             </div>
 
             <!-- Status and Progress -->
             <div class="status-container">
                 <div id="status-message">Ready to start calibration</div>
+                <div id="range-info" style="margin: 10px 0; padding: 10px; background: var(--bg-tertiary); border-radius: 4px; font-size: 14px; display: none;">
+                    <strong>Configuration:</strong> 
+                    <span id="sf-display">SF?</span> | 
+                    <span id="peak-range">Peak: ? - ?</span> | 
+                    <span id="min-range">Min: ? - ?</span> | 
+                    <span id="total-tests">? tests</span>
+                </div>
+                <div id="visualization-legend" style="margin: 10px 0; padding: 10px; background: var(--bg-tertiary); border-radius: 4px; font-size: 12px; display: none;">
+                    <strong>Legend:</strong>
+                    <div style="display: flex; flex-wrap: wrap; gap: 15px; margin-top: 5px;">
+                        <div style="display: flex; align-items: center; gap: 5px;">
+                            <div style="width: 12px; height: 12px; background: linear-gradient(45deg, rgba(0, 150, 150, 0.2), rgba(0, 200, 200, 0.9)); border-radius: 2px;"></div>
+                            <span>Detection density (light to bright)</span>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 5px;">
+                            <div style="width: 12px; height: 12px; background: #333333; border-radius: 2px;"></div>
+                            <span>Tested - No detections</span>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 5px;">
+                            <div style="width: 12px; height: 12px; background: rgba(68, 1, 84, 0.1); border: 1px solid #555; border-radius: 2px;"></div>
+                            <span>Not yet tested</span>
+                        </div>
+                        <div style="display: flex; align-items: center; gap: 5px;">
+                            <div style="width: 6px; height: 6px; background: #ffffff; border-radius: 50%;"></div>
+                            <span>Individual detections</span>
+                        </div>
+                    </div>
+                </div>
                 <div class="progress-container">
                     <div class="progress-bar">
                         <div id="progress-fill" class="progress-fill"></div>
@@ -205,7 +402,7 @@
 
             <!-- Chart -->
             <div class="chart-container">
-                <canvas id="heatmapChart"></canvas>
+                <div id="heatmap-container"></div>
             </div>
 
             <!-- Results -->
@@ -214,125 +411,426 @@
                 <div id="best-result" class="best-result hidden">
                     <h4>Optimal Settings Found:</h4>
                     <p id="best-settings"></p>
+                    <div class="save-controls" style="margin-top: 20px;">
+                        <button id="save-settings-btn" class="control-btn control-btn-save">
+                            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
+                            </svg>
+                            <span class="control-label">
+                                <span class="control-title">Save Settings</span>
+                                <span class="control-value">Apply to configuration</span>
+                            </span>
+                        </button>
+                    </div>
+                </div>
+                <div id="no-results" class="best-result hidden">
+                    <h4>No Optimal Settings Found</h4>
+                    <p>All tested combinations showed low detection rates. Consider running calibration again or adjusting test parameters.</p>
                 </div>
             </div>
-        </div>
+        </main>
     </div>
 
     <script>
         let eventSource = null;
-        let heatmapChart = null;
+        let svg = null;
         let isRunning = false;
         let startTime = null;
         let calibrationData = {};
-        let peakRange = [];
-        let minRange = [];
+        let individualSamples = []; // Store all individual sample data points for hexbin
+        let allTestResults = {}; // Store aggregated test results by peak/min
+        
+        // D3.js hexbin configuration
+        const margin = {top: 80, right: 25, bottom: 60, left: 60};
+        const width = 700 - margin.left - margin.right;
+        const height = 500 - margin.top - margin.bottom;
+        
+        let x, y, colorScale, tooltip, hexbin;
 
-        // Initialize Chart.js heatmap
+        // Initialize D3.js hexbin chart
         function initChart() {
-            const ctx = document.getElementById('heatmapChart').getContext('2d');
+            console.log('Initializing hexbin chart...');
             
-            heatmapChart = new Chart(ctx, {
-                type: 'scatter',
-                data: {
-                    datasets: [{
-                        label: 'Detection Rate (%)',
-                        data: [],
-                        backgroundColor: function(context) {
-                            const value = context.parsed.v || 0;
-                            return getHeatmapColor(value);
-                        },
-                        pointRadius: function(context) {
-                            const canvas = context.chart.canvas;
-                            const width = canvas.width;
-                            const height = canvas.height;
-                            return Math.min(width, height) / 50; // Adjust based on canvas size
-                        },
-                        pointHoverRadius: function(context) {
-                            const canvas = context.chart.canvas;
-                            const width = canvas.width;
-                            const height = canvas.height;
-                            return Math.min(width, height) / 40;
-                        }
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    plugins: {
-                        legend: {
-                            display: false
-                        },
-                        tooltip: {
-                            callbacks: {
-                                title: function(context) {
-                                    const point = context[0];
-                                    return `Peak: ${point.parsed.x}, Min: ${point.parsed.y}`;
-                                },
-                                label: function(context) {
-                                    return `Detection Rate: ${context.parsed.v.toFixed(1)}%`;
-                                }
-                            }
-                        }
-                    },
-                    scales: {
-                        x: {
-                            type: 'linear',
-                            position: 'bottom',
-                            title: {
-                                display: true,
-                                text: 'CAD Peak Threshold'
-                            },
-                            grid: {
-                                display: true
-                            }
-                        },
-                        y: {
-                            type: 'linear',
-                            title: {
-                                display: true,
-                                text: 'CAD Min Threshold'
-                            },
-                            grid: {
-                                display: true
-                            }
-                        }
-                    },
-                    onHover: function(event, activeElements) {
-                        event.native.target.style.cursor = activeElements.length > 0 ? 'pointer' : 'default';
+            // Clear any existing chart
+            d3.select("#heatmap-container").selectAll("*").remove();
+            
+            // Create main SVG
+            svg = d3.select("#heatmap-container")
+                .append("svg")
+                .attr("width", width + margin.left + margin.right)
+                .attr("height", height + margin.top + margin.bottom)
+                .append("g")
+                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+            
+            // Add title
+            svg.append("text")
+                .attr("x", width / 2)
+                .attr("y", -50)
+                .attr("text-anchor", "middle")
+                .attr("class", "heatmap-title")
+                .text("CAD Detection Rate");
+            
+            // Add subtitle
+            svg.append("text")
+                .attr("x", width / 2)
+                .attr("y", -25)
+                .attr("text-anchor", "middle")
+                .attr("class", "heatmap-subtitle")
+                .text("detection density visualization");
+            
+            // Create scales for peak and min values - will be updated dynamically
+            x = d3.scaleLinear()
+                .domain([16, 35])  // Default range, will be updated when calibration starts
+                .range([0, width]);
+                
+            y = d3.scaleLinear()
+                .domain([6, 20])   // Default range, will be updated when calibration starts
+                .range([height, 0]);
+            
+            // Add dark background for the chart area
+            svg.append("rect")
+                .attr("class", "chart-background")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", width)
+                .attr("height", height)
+                .style("fill", "#1a1a1a")
+                .style("stroke", "#444")
+                .style("stroke-width", "1px");
+            
+            // Add X axis
+            svg.append("g")
+                .attr("class", "axis x-axis")
+                .attr("transform", "translate(0," + height + ")")
+                .call(d3.axisBottom(x).tickFormat(d3.format("d")))
+                .selectAll("text")
+                .style("fill", "#fff");
+            
+            // Add Y axis
+            svg.append("g")
+                .attr("class", "axis y-axis")
+                .call(d3.axisLeft(y).tickFormat(d3.format("d")))
+                .selectAll("text")
+                .style("fill", "#fff");
+                
+            // Add axis labels
+            svg.append("text")
+                .attr("class", "axis-label")
+                .attr("x", width / 2)
+                .attr("y", height + 45)
+                .attr("text-anchor", "middle")
+                .style("fill", "#fff")
+                .style("font-weight", "bold")
+                .text("CAD Peak Threshold");
+                
+            svg.append("text")
+                .attr("class", "axis-label")
+                .attr("transform", "rotate(-90)")
+                .attr("x", -height / 2)
+                .attr("y", -40)
+                .attr("text-anchor", "middle")
+                .style("fill", "#fff")
+                .style("font-weight", "bold")
+                .text("CAD Min Threshold");
+            
+            // Initialize hexbin with fixed radius for consistent shape
+            hexbin = d3.hexbin()
+                .radius(12) // Fixed radius matching mesh generation
+                .extent([[0, 0], [width, height]]);
+            
+            // Color scale for hexbin density - single color fading from light to bright
+            colorScale = d3.scaleLinear()
+                .range(["rgba(0, 150, 150, 0.1)", "rgba(0, 200, 200, 0.9)"]) // Light teal to bright teal
+                .domain([0, 10]); // Will be updated dynamically
+            
+            // Create tooltip
+            tooltip = d3.select("#heatmap-container")
+                .append("div")
+                .attr("class", "heatmap-tooltip");
+                
+            console.log('Hexbin chart initialized');
+        }
+        
+        // Update hexbin chart when new data arrives
+        function updateChart(peak, min, rate, samples, detections) {
+            if (!svg) return;
+            
+            console.log(`Adding data: Peak=${peak}, Min=${min}, Rate=${rate}%, Samples=${samples}, Detections=${detections}`);
+            
+            // Store aggregated result for statistics
+            const key = `${peak}_${min}`;
+            if (!allTestResults[key]) {
+                allTestResults[key] = { peak, min, detections: 0, samples: 0 };
+            }
+            allTestResults[key].detections += detections;
+            allTestResults[key].samples += samples;
+            
+            // Add individual sample points to the data array
+            if (samples && detections !== undefined) {
+                // Get current domain bounds and add safety margin
+                const xDomain = x.domain();
+                const yDomain = y.domain();
+                
+                // Only add samples if they're within the actual test range
+                if (peak >= xDomain[0] && peak <= xDomain[1] && 
+                    min >= yDomain[0] && min <= yDomain[1]) {
+                    
+                    for (let i = 0; i < samples; i++) {
+                        // Add small random offset but ensure it stays within bounds
+                        let offsetPeak = peak + (Math.random() - 0.5) * 0.3; // Smaller offset
+                        let offsetMin = min + (Math.random() - 0.5) * 0.3;   // Smaller offset
+                        
+                        // Strict clamping to actual domain bounds
+                        offsetPeak = Math.max(xDomain[0] + 0.1, Math.min(xDomain[1] - 0.1, offsetPeak));
+                        offsetMin = Math.max(yDomain[0] + 0.1, Math.min(yDomain[1] - 0.1, offsetMin));
+                        
+                        individualSamples.push({
+                            peak: offsetPeak,
+                            min: offsetMin,
+                            detected: i < detections,  // First 'detections' samples are detected
+                            originalPeak: peak,
+                            originalMin: min,
+                            sampleIndex: i + 1,
+                            testRun: Object.keys(calibrationData).length + 1
+                        });
                     }
+                    console.log(`Added ${samples} individual samples for Peak=${peak}, Min=${min}. Total samples: ${individualSamples.length}`);
+                } else {
+                    console.log(`Skipping out-of-range sample: Peak=${peak}, Min=${min} (outside domain)`);
                 }
-            });
-        }
-
-        // Color mapping for heatmap
-        function getHeatmapColor(value) {
-            if (value >= 80) return '#4CAF50';  // Green - Excellent
-            if (value >= 60) return '#8BC34A';  // Light Green - Good
-            if (value >= 40) return '#FFC107';  // Yellow - Moderate
-            if (value >= 20) return '#FF9800';  // Orange - Poor
-            if (value > 0) return '#F44336';    // Red - Very poor
-            return '#9E9E9E';                   // Gray - No data
-        }
-
-        // Update chart with new data
-        function updateChart(peak, min, rate) {
-            if (!heatmapChart) return;
+            }
             
-            const dataPoint = {
-                x: peak,
-                y: min,
-                v: rate
+            // Update hexbin visualization
+            updateHexbin();
+        }
+        
+        function updateHexbin() {
+            if (individualSamples.length === 0) return;
+            
+            // Prepare data for smooth contour patches - only detected samples for density
+            const detectedSamples = individualSamples
+                .filter(d => d.detected)
+                .map(d => [x(d.peak), y(d.min)]);
+                
+            console.log(`Updating smooth contours with ${detectedSamples.length} detected samples out of ${individualSamples.length} total`);
+            
+            // Create density grid for smooth contour patches
+            const gridSize = 20; // Grid resolution for density calculation
+            const densityGrid = [];
+            
+            // Calculate density at each grid point
+            for (let i = 0; i < gridSize; i++) {
+                densityGrid[i] = [];
+                for (let j = 0; j < gridSize; j++) {
+                    const gridX = (i / (gridSize - 1)) * width;
+                    const gridY = (j / (gridSize - 1)) * height;
+                    
+                    // Count nearby detected samples using Gaussian kernel
+                    let density = 0;
+                    const bandwidth = 30; // Bandwidth for smoothing
+                    
+                    detectedSamples.forEach(sample => {
+                        const dx = gridX - sample[0];
+                        const dy = gridY - sample[1];
+                        const distance = Math.sqrt(dx * dx + dy * dy);
+                        density += Math.exp(-(distance * distance) / (2 * bandwidth * bandwidth));
+                    });
+                    
+                    densityGrid[i][j] = density;
+                }
+            }
+            
+            // Find maximum density for scaling
+            const maxDensity = Math.max(...densityGrid.flat()) || 1;
+            colorScale.domain([0, maxDensity * 0.8]); // Scale to 80% for better contrast
+            
+            // Create STRICT clip path to absolutely contain patches within chart area
+            svg.select("#clip").remove();
+            svg.append("clipPath")
+                .attr("id", "clip")
+                .append("rect")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", width)
+                .attr("height", height);
+            
+            // Tooltip functions
+            const mouseover = function(event, d) {
+                tooltip.style("opacity", 1);
+                d3.select(this)
+                    .style("stroke", "white")
+                    .style("stroke-width", "2px");
             };
             
-            heatmapChart.data.datasets[0].data.push(dataPoint);
-            heatmapChart.update('none'); // No animation for real-time updates
+            const mousemove = function(event, d) {
+                // Calculate approximate peak/min values for this hexagon
+                const peakVal = Math.round(x.invert(d.x));
+                const minVal = Math.round(y.invert(d.y));
+                
+                // Find samples in this area
+                const samplesInHex = individualSamples.filter(sample => {
+                    const sampleX = x(sample.peak);
+                    const sampleY = y(sample.min);
+                    const distance = Math.sqrt(Math.pow(sampleX - d.x, 2) + Math.pow(sampleY - d.y, 2));
+                    return distance <= hexbin.radius();
+                });
+                
+                const detectedInHex = samplesInHex.filter(s => s.detected).length;
+                const totalInHex = samplesInHex.length;
+                const detectionRate = totalInHex > 0 ? (detectedInHex / totalInHex * 100) : 0;
+                
+                let tooltipHtml = `<strong>Area: Peak≈${peakVal}, Min≈${minVal}</strong><br>`;
+                tooltipHtml += `<strong>Samples in area: ${totalInHex}</strong><br>`;
+                tooltipHtml += `<strong>Detected: ${detectedInHex}</strong><br>`;
+                tooltipHtml += `<strong>Detection rate: ${detectionRate.toFixed(1)}%</strong>`;
+                
+                tooltip
+                    .html(tooltipHtml)
+                    .style("left", (event.pageX + 10) + "px")
+                    .style("top", (event.pageY - 10) + "px")
+                    .style("opacity", 1);
+            };
+            
+            const mouseleave = function(event, d) {
+                tooltip.style("opacity", 0);
+                d3.select(this)
+                    .style("stroke", "#888")
+                    .style("stroke-width", "1px");
+            };
+            
+            // Remove old elements
+            svg.selectAll(".contour-patch").remove();
+            svg.selectAll(".tested-area").remove();
+            
+            // Create smooth contour patches for detected areas
+            const patchSize = width / (gridSize - 1);
+            const patches = [];
+            
+            for (let i = 0; i < gridSize - 1; i++) {
+                for (let j = 0; j < gridSize - 1; j++) {
+                    const density = densityGrid[i][j];
+                    
+                    if (density > 0.1) { // Only create patches where there's meaningful density
+                        const x1 = i * patchSize;
+                        const y1 = j * patchSize;
+                        const x2 = (i + 1) * patchSize;
+                        const y2 = (j + 1) * patchSize;
+                        
+                        patches.push({
+                            x: x1,
+                            y: y1,
+                            width: x2 - x1,
+                            height: y2 - y1,
+                            density: density
+                        });
+                    }
+                }
+            }
+            
+            // Add tested areas with zero detections as background
+            Object.keys(allTestResults).forEach(testKey => {
+                const testResult = allTestResults[testKey];
+                if (testResult.detections === 0 && testResult.samples > 0) {
+                    const testX = x(testResult.peak);
+                    const testY = y(testResult.min);
+                    
+                    svg.append("circle")
+                        .attr("class", "tested-area")
+                        .attr("cx", testX)
+                        .attr("cy", testY)
+                        .attr("r", 8)
+                        .attr("clip-path", "url(#clip)")
+                        .style("fill", "#333333")
+                        .style("opacity", 0.3)
+                        .style("stroke", "none");
+                }
+            });
+            
+            // Create smooth patches with gradient fills
+            svg.selectAll(".contour-patch")
+                .data(patches)
+                .enter().append("rect")
+                .attr("class", "contour-patch")
+                .attr("x", d => d.x)
+                .attr("y", d => d.y)
+                .attr("width", d => d.width)
+                .attr("height", d => d.height)
+                .attr("clip-path", "url(#clip)")
+                .style("fill", d => colorScale(d.density))
+                .style("stroke", "none")
+                .style("opacity", d => Math.min(0.9, d.density / maxDensity + 0.1))
+                .style("rx", "2px") // Slightly rounded corners for smooth appearance
+                .style("ry", "2px")
+                .on("mouseover", function(event, d) {
+                    tooltip.style("opacity", 1);
+                    d3.select(this)
+                        .style("stroke", "rgba(255, 255, 255, 0.8)")
+                        .style("stroke-width", "1px");
+                })
+                .on("mousemove", function(event, d) {
+                    const peakVal = Math.round(x.invert(d.x + d.width/2));
+                    const minVal = Math.round(y.invert(d.y + d.height/2));
+                    
+                    let tooltipHtml = `<strong>Detection Zone</strong><br>`;
+                    tooltipHtml += `<strong>Area: Peak≈${peakVal}, Min≈${minVal}</strong><br>`;
+                    tooltipHtml += `<strong>Detection Density: ${(d.density).toFixed(1)}</strong><br>`;
+                    tooltipHtml += `<strong>Status: Active detection area</strong>`;
+                    
+                    tooltip
+                        .html(tooltipHtml)
+                        .style("left", (event.pageX + 10) + "px")
+                        .style("top", (event.pageY - 10) + "px")
+                        .style("opacity", 1);
+                })
+                .on("mouseleave", function(event, d) {
+                    tooltip.style("opacity", 0);
+                    d3.select(this)
+                        .style("stroke", "none");
+                });
+                
+            // Add subtle dots for individual samples (optional overlay)
+            svg.selectAll(".sample-dot").remove();
+            svg.selectAll(".sample-dot")
+                .data(individualSamples.filter(d => d.detected)) // Only show detected samples as tiny dots
+                .enter().append("circle")
+                .attr("class", "sample-dot")
+                .attr("cx", d => {
+                    const cx = x(d.peak);
+                    return Math.max(1, Math.min(width - 1, cx)); // Keep dots well within chart bounds
+                })
+                .attr("cy", d => {
+                    const cy = y(d.min);
+                    return Math.max(1, Math.min(height - 1, cy)); // Keep dots well within chart bounds
+                })
+                .attr("r", 1.0) // Slightly larger for better visibility
+                .attr("clip-path", "url(#clip)") // Ensure dots are clipped to chart area
+                .style("fill", "#ffffff")
+                .style("opacity", 0.6) // More visible
+                .style("stroke", "none");
+                
+            console.log(`Total sample dots rendered: ${individualSamples.filter(d => d.detected).length}`);
+                
+            console.log(`Rendered ${patches.length} smooth contour patches`);
+            console.log(`Total individual samples stored: ${individualSamples.length}`);
+            console.log(`Detected samples for contours: ${detectedSamples.length}`);
+            
+            // Debug: Log sample distribution by peak/min
+            const samplesByLocation = {};
+            individualSamples.forEach(sample => {
+                const key = `${sample.originalPeak}_${sample.originalMin}`;
+                if (!samplesByLocation[key]) {
+                    samplesByLocation[key] = { detected: 0, total: 0 };
+                }
+                samplesByLocation[key].total++;
+                if (sample.detected) samplesByLocation[key].detected++;
+            });
+            console.log('Samples by location:', samplesByLocation);
         }
 
         // Start calibration
         async function startCalibration() {
-            const samples = parseInt(document.getElementById('samples').value);
-            const delay = parseInt(document.getElementById('delay').value);
+            const samples = 10; // Fixed samples per test
+            const delay = 50;   // Fixed delay in ms
             
             try {
                 const response = await fetch('/api/cad-calibration-start', {
@@ -351,16 +849,36 @@
                     startTime = Date.now();
                     calibrationData = {};
                     
-                    // Clear chart
-                    if (heatmapChart) {
-                        heatmapChart.data.datasets[0].data = [];
-                        heatmapChart.update();
+                    // Clear chart and reset data
+                    individualSamples = [];
+                    calibrationData = {};
+                    allTestResults = {}; // Clear all individual test results
+                    
+                    // Hide range info and legend until new calibration starts
+                    document.getElementById('range-info').style.display = 'none';
+                    document.getElementById('visualization-legend').style.display = 'none';
+                    
+                    if (svg) {
+                        svg.selectAll(".contour-patch").remove();
+                        svg.selectAll(".tested-area").remove();
+                        svg.selectAll(".sample-dot").remove();
+                        svg.select("#clip").remove();
+                        console.log('Cleared contour patches and reset data structures');
                     }
                     
                     // Update UI
                     document.getElementById('start-btn').disabled = true;
                     document.getElementById('stop-btn').disabled = false;
                     document.getElementById('results-container').classList.add('hidden');
+                    document.getElementById('best-result').classList.add('hidden');
+                    
+                    // Reset statistics
+                    document.getElementById('tests-completed').textContent = '0';
+                    document.getElementById('best-rate').textContent = '0%';
+                    document.getElementById('avg-rate').textContent = '0%';
+                    document.getElementById('elapsed-time').textContent = '0s';
+                    document.getElementById('progress-fill').style.width = '0%';
+                    document.getElementById('progress-text').textContent = '0 / 0 tests completed';
                     
                     // Start SSE connection
                     connectEventSource();
@@ -420,11 +938,81 @@
             };
         }
 
+        // Update chart scales based on test ranges
+        function updateChartScales(ranges) {
+            if (!ranges || !x || !y || !svg) {
+                console.log('Cannot update scales - missing components:', { ranges, x: !!x, y: !!y, svg: !!svg });
+                return;
+            }
+            
+            console.log('Updating chart scales with ranges:', ranges);
+            
+            // Calculate total tests
+            const peakCount = ranges.peak_max - ranges.peak_min + 1;
+            const minCount = ranges.min_max - ranges.min_min + 1;
+            const totalTests = peakCount * minCount;
+            
+            // Update range info display
+            document.getElementById('range-info').style.display = 'block';
+            document.getElementById('visualization-legend').style.display = 'block';
+            document.getElementById('sf-display').textContent = `SF${ranges.spreading_factor}`;
+            document.getElementById('peak-range').textContent = `Peak: ${ranges.peak_min} - ${ranges.peak_max}`;
+            document.getElementById('min-range').textContent = `Min: ${ranges.min_min} - ${ranges.min_max}`;
+            document.getElementById('total-tests').textContent = `${totalTests} tests`;
+            
+            // Use FIXED domains for consistent hexagon positioning
+            // This prevents auto-scaling issues that distort hexagon placement
+            const newPeakDomain = [ranges.peak_min - 0.5, ranges.peak_max + 0.5];
+            const newMinDomain = [ranges.min_min - 0.5, ranges.min_max + 0.5];
+            
+            console.log('Setting FIXED domains:', {
+                peak: newPeakDomain,
+                min: newMinDomain
+            });
+            
+            x.domain(newPeakDomain);
+            y.domain(newMinDomain);
+            
+            // Update hexbin extent to match EXACT scale bounds
+            if (hexbin) {
+                hexbin.extent([[0, 0], [width, height]]);
+                console.log('Updated hexbin extent to chart bounds');
+            }
+            
+            // Update axes WITHOUT transitions to prevent positioning issues
+            const xAxisSelection = svg.select(".x-axis");
+            const yAxisSelection = svg.select(".y-axis");
+            
+            if (!xAxisSelection.empty()) {
+                xAxisSelection.call(d3.axisBottom(x).tickFormat(d3.format("d")));
+            }
+                
+            if (!yAxisSelection.empty()) {
+                yAxisSelection.call(d3.axisLeft(y).tickFormat(d3.format("d")));
+            }
+            
+            // Ensure axis text stays white
+            svg.selectAll(".axis text").style("fill", "#fff");
+            
+            console.log('Chart scale update completed with fixed positioning');
+        }
+
         // Handle calibration updates
         function handleCalibrationUpdate(data) {
+            console.log('Received calibration update:', data);
             switch (data.type) {
                 case 'status':
                     document.getElementById('status-message').textContent = data.message;
+                    
+                    // Update chart scales if test ranges are provided
+                    console.log('Status message received:', data.message);
+                    console.log('Test ranges in status:', data.test_ranges);
+                    if (data.test_ranges) {
+                        console.log('Calling updateChartScales with ranges:', data.test_ranges);
+                        updateChartScales(data.test_ranges);
+                    } else {
+                        console.log('No test_ranges in status message');
+                    }
                     break;
                     
                 case 'progress':
@@ -435,19 +1023,25 @@
                     break;
                     
                 case 'result':
-                    // Store result and update chart
+                    // Store result and update chart with individual sample breakdown
+                    console.log('Processing result:', data);
                     const key = `${data.det_peak}_${data.det_min}`;
                     calibrationData[key] = data;
-                    updateChart(data.det_peak, data.det_min, data.detection_rate);
+                    
+                    // Pass samples and detections to create individual sample visualizations
+                    updateChart(data.det_peak, data.det_min, data.detection_rate, data.samples, data.detections);
                     updateStats();
                     break;
                     
                 case 'complete':
+                case 'completed':
                     isRunning = false;
                     document.getElementById('start-btn').disabled = false;
                     document.getElementById('stop-btn').disabled = true;
-                    document.getElementById('status-message').textContent = 'Calibration completed';
-                    showResults(data.results);
+                    document.getElementById('status-message').textContent = data.message || 'Calibration completed';
+                    
+                    // Calculate and show results from our collected data
+                    calculateAndShowResults();
                     
                     if (eventSource) {
                         eventSource.close();
@@ -480,16 +1074,45 @@
             document.getElementById('avg-rate').textContent = avgRate.toFixed(1) + '%';
         }
 
-        // Show results
-        function showResults(results) {
+        // Calculate and show results from collected data
+        function calculateAndShowResults() {
+            console.log('Calculating results from collected data...');
+            console.log('Calibration data:', calibrationData);
+            
             document.getElementById('results-container').classList.remove('hidden');
             
-            if (results && results.best) {
-                const best = results.best;
-                document.getElementById('best-result').classList.remove('hidden');
-                document.getElementById('best-settings').innerHTML = 
-                    `Peak: <strong>${best.det_peak}</strong>, Min: <strong>${best.det_min}</strong>, Rate: <strong>${best.detection_rate.toFixed(1)}%</strong>`;
+            // Find best result from our collected data
+            let bestResult = null;
+            let bestRate = 0;
+            
+            for (const [key, result] of Object.entries(calibrationData)) {
+                if (result.detection_rate > bestRate) {
+                    bestRate = result.detection_rate;
+                    bestResult = result;
+                }
             }
+            
+            console.log('Best result found:', bestResult);
+            
+            // Store globally for save functionality
+            bestCalibrationResult = bestResult;
+            
+            if (bestResult && bestRate > 0) {
+                document.getElementById('best-result').classList.remove('hidden');
+                document.getElementById('no-results').classList.add('hidden');
+                document.getElementById('best-settings').innerHTML = 
+                    `Peak: <strong>${bestResult.det_peak}</strong>, Min: <strong>${bestResult.det_min}</strong>, Rate: <strong>${bestResult.detection_rate.toFixed(1)}%</strong>`;
+            } else {
+                // Show no results message
+                document.getElementById('best-result').classList.add('hidden');
+                document.getElementById('no-results').classList.remove('hidden');
+                bestCalibrationResult = null;
+            }
+        }
+
+        // Legacy function for backward compatibility
+        function showResults(results) {
+            calculateAndShowResults();
         }
 
         // Show error message
@@ -498,13 +1121,88 @@
             document.getElementById('status-message').style.color = 'var(--error)';
         }
 
+        // Save calibration settings to config
+        async function saveSettings() {
+            const saveBtn = document.getElementById('save-settings-btn');
+            if (!bestCalibrationResult) {
+                showError('No calibration results to save');
+                return;
+            }
+            
+            // Disable save button and show loading
+            saveBtn.disabled = true;
+            const originalContent = saveBtn.innerHTML;
+            saveBtn.innerHTML = `
+                <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M21 12a9 9 0 11-6.219-8.56"></path>
+                </svg>
+                <span class="control-label">
+                    <span class="control-title">Saving...</span>
+                    <span class="control-value">Updating configuration</span>
+                </span>
+            `;
+            
+            try {
+                const response = await fetch('/api/save_cad_settings', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        peak: bestCalibrationResult.det_peak,
+                        min_val: bestCalibrationResult.det_min,
+                        detection_rate: bestCalibrationResult.detection_rate
+                    })
+                });
+                
+                const result = await response.json();
+                if (result.success) {
+                    // Success feedback
+                    saveBtn.innerHTML = `
+                        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polyline points="20 6 9 17 4 12"></polyline>
+                        </svg>
+                        <span class="control-label">
+                            <span class="control-title">Saved!</span>
+                            <span class="control-value">Settings applied</span>
+                        </span>
+                    `;
+                    
+                    // Show success message
+                    document.getElementById('status-message').textContent = 
+                        `Settings saved! Peak=${bestCalibrationResult.det_peak}, Min=${bestCalibrationResult.det_min} applied to configuration.`;
+                    document.getElementById('status-message').style.color = 'var(--success)';
+                    
+                    // Reset button after 3 seconds
+                    setTimeout(() => {
+                        saveBtn.innerHTML = originalContent;
+                        saveBtn.disabled = false;
+                    }, 3000);
+                } else {
+                    throw new Error(result.error || 'Failed to save settings');
+                }
+            } catch (error) {
+                console.error('Save error:', error);
+                showError('Failed to save settings: ' + error.message);
+                saveBtn.innerHTML = originalContent;
+                saveBtn.disabled = false;
+            }
+        }
+
+        // Store best result globally for saving
+        let bestCalibrationResult = null;
+
         // Event listeners
         document.getElementById('start-btn').addEventListener('click', startCalibration);
         document.getElementById('stop-btn').addEventListener('click', stopCalibration);
+        document.getElementById('save-settings-btn').addEventListener('click', saveSettings);
 
         // Initialize chart when page loads
         document.addEventListener('DOMContentLoaded', function() {
+            console.log('Initializing CAD calibration hexbin chart...');
             initChart();
+            // Reset data tracking
+            individualSamples = [];
+            calibrationData = {};
+            allTestResults = {};
         });
 
         // Cleanup on page unload
diff --git a/repeater/templates/configuration.html b/repeater/templates/configuration.html
index 1de67bc..5adb4dd 100644
--- a/repeater/templates/configuration.html
+++ b/repeater/templates/configuration.html
@@ -26,7 +26,7 @@
             <div class="info-box" style="background: var(--accent-color); color: white; border: none;">
                 <strong>CAD Calibration Tool Available</strong>
                 <p style="margin: 8px 0 0 0;">
-                    Optimize your Channel Activity Detection settings for better mesh performance. 
+                    Optimize your Channel Activity Detection settings. 
                     <a href="/cad-calibration" style="color: white; text-decoration: underline;">Launch CAD Calibration Tool →</a>
                 </p>
             </div>