diff --git a/meshview/mqtt_store.py b/meshview/mqtt_store.py
index 292d996..809879b 100644
--- a/meshview/mqtt_store.py
+++ b/meshview/mqtt_store.py
@@ -115,6 +115,7 @@ async def process_envelope(topic, env):
                     node.short_name = user.short_name
                     node.hw_model = hw_model
                     node.role = role
+                    node.channel = env.channel_id
                     node.last_update =datetime.datetime.now()
 
                 else:
diff --git a/meshview/templates/base.html b/meshview/templates/base.html
index 27e8b8a..b6d438b 100644
--- a/meshview/templates/base.html
+++ b/meshview/templates/base.html
@@ -35,7 +35,7 @@
         </style>
     </head>
     <body hx-indicator="#spinner">
-        <br><div style="text-align:center"><strong>{{ site_config["site"]["title"] }} - {{ site_config["site"]["domain"] }}</strong></div>
+        <br><div style="text-align:center"><strong>{{ site_config["site"]["title"] }} {{ site_config["site"]["domain"] }}</strong></div>
         <div style="text-align: center;">{{ site_config["site"]["message"] }}</div>
         <div style="text-align:center">Quick Links:&nbsp;&nbsp;<a href="/nodelist">Nodes</a>&nbsp;-&nbsp;<a href="/chat">Conversations</a>&nbsp;-&nbsp;<a href="/firehose">See <strong>everything</strong> </a>
             &nbsp;-&nbsp;Mesh Graph <a href="/nodegraph/LongFast">LF</a>&nbsp;-&nbsp;<a href="/nodegraph/MediumSlow">MS </a>&nbsp;-&nbsp;<a href="/stats">Stats </a>
diff --git a/meshview/templates/packet_details.html b/meshview/templates/packet_details.html
index 4b402c9..33a770f 100644
--- a/meshview/templates/packet_details.html
+++ b/meshview/templates/packet_details.html
@@ -36,7 +36,7 @@
 
 {% if map_center %}
 <script>
-    var details_map = L.map('details_map').setView({{ map_center | tojson }}, 10);
+    var details_map = L.map('details_map').setView({{ map_center | tojson }}, 12);
     var markers = L.featureGroup();
     markers.addTo(details_map);
 
@@ -55,7 +55,7 @@
     var fromNodeLatLng = L.latLng({{ from_node_cord | tojson }});
 
     var fromNode = L.circleMarker(fromNodeLatLng, {
-        radius: 8,
+        radius: 10,
         color: 'red',
         weight: 1,
         fillColor: 'red',
@@ -80,6 +80,7 @@
         // Calculate distance in miles
         var distanceMiles = getDistanceInMiles(fromNodeLatLng, uplinkNodeLatLng).toFixed(1);
 
+/*
         var node = L.circleMarker(uplinkNodeLatLng, {
             radius: 6,
             color: 'blue',
@@ -87,6 +88,17 @@
             fillColor: 'blue',
             fillOpacity: 0.4
         }).addTo(markers);
+*/
+
+		var node = L.marker(uplinkNodeLatLng, {
+		    icon: L.divIcon({
+		        className: 'text-icon',  // Custom class for styling
+        		html: '<div style="font-size: 12px; color: white; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 16px; width: 16px; border-radius: 50%; background-color: blue; border: 1px solid blue;">{{u.hops}}</div>',
+		        iconSize: [16, 16],  // Size of the icon container
+		        iconAnchor: [8, 8]  // Anchoring the text to the center of the marker
+		    })
+		}).addTo(markers);
+		node.setZIndexOffset({{u.hops}}*-1);
 
         // Add a tooltip with node details and distance
         node.bindTooltip(`
@@ -97,12 +109,17 @@
             <b>Distance:</b> ${distanceMiles} miles <br/>
             <b>Coordinates:</b> [{{u.lat}}, {{u.long}}]
         `, { permanent: false, direction: 'top', opacity: 0.9 });
+
     {% endfor %}
 
+    if (markers.getLayers().length > 0) {
+        details_map.fitBounds(markers.getBounds().pad(0.1), { animate: true });
+    }
+
     // Ensure markers are added before adjusting map bounds
     setTimeout(() => {
         if (markers.getLayers().length > 0) {
-            details_map.fitBounds(markers.getBounds().pad(0.3), { animate: true });
+            details_map.fitBounds(markers.getBounds().pad(0.1), { animate: true });
         }
     }, 500); // Delay to ensure markers load
 
@@ -120,9 +137,9 @@
         div.style.textAlign = 'left'; /* Ensure left alignment */
         div.innerHTML = `
             <b>Legend</b><br>
-            <svg width="16" height="16">
-                <circle cx="8" cy="8" r="6" fill="blue" stroke="blue" stroke-width="1" fill-opacity="0.4"/>
-            </svg> Receiving Node<br>
+            <svg width="20" height="20">
+                <circle cx="8" cy="8" r="6" fill="blue" stroke="blue" stroke-width="1" fill-opacity="0.9"/>
+            </svg> Receiving Node (Number is hop count)<br>
             <svg width="20" height="20">
                 <circle cx="10" cy="10" r="8" fill="red" stroke="red" stroke-width="1" fill-opacity="0.4"/>
             </svg> Sending Node<br>
