diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.spec.ts
index ce827e7..81fe7ce 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.spec.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/forcesvg.component.spec.ts
@@ -30,7 +30,7 @@
 import {SubRegionNodeSvgComponent} from './visuals/subregionnodesvg/subregionnodesvg.component';
 import {HostNodeSvgComponent} from './visuals/hostnodesvg/hostnodesvg.component';
 import {LinkSvgComponent} from './visuals/linksvg/linksvg.component';
-import {Device, Host, Link, LinkType, Region} from './models';
+import {Device, Host, Link, LinkType, LinkHighlight, Region} from './models';
 import {ChangeDetectorRef, SimpleChange} from '@angular/core';
 import {TopologyService} from '../../topology.service';
 import {BadgeSvgComponent} from './visuals/badgesvg/badgesvg.component';
@@ -102,6 +102,12 @@
     const odtnSampleData = require('./tests/test-OdtnConfig-topo2CurrentRegion.json');
     const odtnRegionData: Region = <Region><unknown>(odtnSampleData.payload);
 
+    const topo2BaseData = require('./tests/topo2Highlights-base-data.json');
+    const topo2BaseRegionData: Region = <Region><unknown>(topo2BaseData.payload);
+
+    const highlightSampleData = require('./tests/topo2Highlights-sample.json');
+    const linkHightlights: LinkHighlight[] = <LinkHighlight[]><unknown>(highlightSampleData.payload.links);
+
     const emptyRegion: Region = <Region>{devices: [ [], [], [] ], hosts: [ [], [], [] ], links: []};
 
     beforeEach(() => {
@@ -295,4 +301,20 @@
         expect(component.graph.links.length).toBe(6);
 
     });
+
+    it('should handle highlights and match them to existing links', () => {
+        component.regionData = topo2BaseRegionData;
+        component.ngOnChanges(
+            {'regionData' : new SimpleChange(<Region>{}, topo2BaseRegionData, true)});
+
+        expect(component.graph.links.length).toBe(9);
+
+        expect(linkHightlights.length).toBe(6);
+
+        // should be able to find all of the highlighted links in the original data set
+        linkHightlights.forEach((lh: LinkHighlight) => {
+            const foundLink = component.graph.links.find((l: Link) => l.id === Link.linkIdFromShowHighlights(lh.id));
+            expect(foundLink).toBeDefined();
+        });
+    });
 });
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/tests/topo2Highlights-base-data.json b/web/gui2-topo-lib/lib/layer/forcesvg/tests/topo2Highlights-base-data.json
new file mode 100644
index 0000000..ae1b9f2
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/tests/topo2Highlights-base-data.json
@@ -0,0 +1,380 @@
+{
+    "event": "topo2CurrentRegion",
+    "payload": {
+        "id": "(root)",
+        "subregions": [],
+        "links": [
+            {
+                "id": "device:leaf1/1~device:spine1/1",
+                "epA": "device:leaf1/1",
+                "epB": "device:spine1/1",
+                "type": "UiDeviceLink",
+                "portA": "1",
+                "portB": "1",
+                "rollup": [
+                    {
+                        "id": "device:leaf1/1~device:spine1/1",
+                        "epA": "device:leaf1/1",
+                        "epB": "device:spine1/1",
+                        "type": "UiDeviceLink",
+                        "portA": "1",
+                        "portB": "1"
+                    }
+                ]
+            },
+            {
+                "id": "device:leaf2/2~device:spine2/2",
+                "epA": "device:leaf2/2",
+                "epB": "device:spine2/2",
+                "type": "UiDeviceLink",
+                "portA": "2",
+                "portB": "2",
+                "rollup": [
+                    {
+                        "id": "device:leaf2/2~device:spine2/2",
+                        "epA": "device:leaf2/2",
+                        "epB": "device:spine2/2",
+                        "type": "UiDeviceLink",
+                        "portA": "2",
+                        "portB": "2"
+                    }
+                ]
+            },
+            {
+                "id": "00:00:00:00:00:1A/None~device:leaf1/3",
+                "epA": "00:00:00:00:00:1A/None",
+                "epB": "device:leaf1",
+                "type": "UiEdgeLink",
+                "portB": "3",
+                "rollup": [
+                    {
+                        "id": "00:00:00:00:00:1A/None~device:leaf1/3",
+                        "epA": "00:00:00:00:00:1A/None",
+                        "epB": "device:leaf1",
+                        "type": "UiEdgeLink",
+                        "portB": "3"
+                    }
+                ]
+            },
+            {
+                "id": "00:00:00:00:00:30/None~device:leaf2/3",
+                "epA": "00:00:00:00:00:30/None",
+                "epB": "device:leaf2",
+                "type": "UiEdgeLink",
+                "portB": "3",
+                "rollup": [
+                    {
+                        "id": "00:00:00:00:00:30/None~device:leaf2/3",
+                        "epA": "00:00:00:00:00:30/None",
+                        "epB": "device:leaf2",
+                        "type": "UiEdgeLink",
+                        "portB": "3"
+                    }
+                ]
+            },
+            {
+                "id": "device:leaf1/2~device:spine2/1",
+                "epA": "device:leaf1/2",
+                "epB": "device:spine2/1",
+                "type": "UiDeviceLink",
+                "portA": "2",
+                "portB": "1",
+                "rollup": [
+                    {
+                        "id": "device:leaf1/2~device:spine2/1",
+                        "epA": "device:leaf1/2",
+                        "epB": "device:spine2/1",
+                        "type": "UiDeviceLink",
+                        "portA": "2",
+                        "portB": "1"
+                    }
+                ]
+            },
+            {
+                "id": "device:leaf2/1~device:spine1/2",
+                "epA": "device:leaf2/1",
+                "epB": "device:spine1/2",
+                "type": "UiDeviceLink",
+                "portA": "1",
+                "portB": "2",
+                "rollup": [
+                    {
+                        "id": "device:leaf2/1~device:spine1/2",
+                        "epA": "device:leaf2/1",
+                        "epB": "device:spine1/2",
+                        "type": "UiDeviceLink",
+                        "portA": "1",
+                        "portB": "2"
+                    }
+                ]
+            },
+            {
+                "id": "00:00:00:00:00:20/None~device:leaf1/6",
+                "epA": "00:00:00:00:00:20/None",
+                "epB": "device:leaf1",
+                "type": "UiEdgeLink",
+                "portB": "6",
+                "rollup": [
+                    {
+                        "id": "00:00:00:00:00:20/None~device:leaf1/6",
+                        "epA": "00:00:00:00:00:20/None",
+                        "epB": "device:leaf1",
+                        "type": "UiEdgeLink",
+                        "portB": "6"
+                    }
+                ]
+            },
+            {
+                "id": "00:00:00:00:00:1C/None~device:leaf1/5",
+                "epA": "00:00:00:00:00:1C/None",
+                "epB": "device:leaf1",
+                "type": "UiEdgeLink",
+                "portB": "5",
+                "rollup": [
+                    {
+                        "id": "00:00:00:00:00:1C/None~device:leaf1/5",
+                        "epA": "00:00:00:00:00:1C/None",
+                        "epB": "device:leaf1",
+                        "type": "UiEdgeLink",
+                        "portB": "5"
+                    }
+                ]
+            },
+            {
+                "id": "00:00:00:00:00:1B/None~device:leaf1/4",
+                "epA": "00:00:00:00:00:1B/None",
+                "epB": "device:leaf1",
+                "type": "UiEdgeLink",
+                "portB": "4",
+                "rollup": [
+                    {
+                        "id": "00:00:00:00:00:1B/None~device:leaf1/4",
+                        "epA": "00:00:00:00:00:1B/None",
+                        "epB": "device:leaf1",
+                        "type": "UiEdgeLink",
+                        "portB": "4"
+                    }
+                ]
+            }
+        ],
+        "devices": [
+            [],
+            [],
+            [
+                {
+                    "id": "device:spine1",
+                    "nodeType": "device",
+                    "type": "switch",
+                    "online": true,
+                    "master": "172.24.0.3",
+                    "layer": "def",
+                    "props": {
+                        "managementAddress": "grpc://mininet:50003?device_id=1",
+                        "protocol": "P4Runtime, gNMI, gNOI",
+                        "gridX": "400.0",
+                        "gridY": "400.0",
+                        "driver": "stratum-bmv2",
+                        "name": "device:spine1",
+                        "p4DeviceId": "1",
+                        "locType": "grid"
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 400.0,
+                        "longOrX": 400.0
+                    }
+                },
+                {
+                    "id": "device:spine2",
+                    "nodeType": "device",
+                    "type": "switch",
+                    "online": true,
+                    "master": "172.24.0.3",
+                    "layer": "def",
+                    "props": {
+                        "managementAddress": "grpc://mininet:50004?device_id=1",
+                        "protocol": "P4Runtime, gNMI, gNOI",
+                        "gridX": "600.0",
+                        "gridY": "400.0",
+                        "driver": "stratum-bmv2",
+                        "name": "device:spine2",
+                        "p4DeviceId": "1",
+                        "locType": "grid"
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 400.0,
+                        "longOrX": 600.0
+                    }
+                },
+                {
+                    "id": "device:leaf2",
+                    "nodeType": "device",
+                    "type": "switch",
+                    "online": true,
+                    "master": "172.24.0.3",
+                    "layer": "def",
+                    "props": {
+                        "managementAddress": "grpc://mininet:50002?device_id=1",
+                        "protocol": "P4Runtime, gNMI, gNOI",
+                        "gridX": "800.0",
+                        "gridY": "600.0",
+                        "driver": "stratum-bmv2",
+                        "name": "device:leaf2",
+                        "p4DeviceId": "1",
+                        "locType": "grid"
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 600.0,
+                        "longOrX": 800.0
+                    }
+                },
+                {
+                    "id": "device:leaf1",
+                    "nodeType": "device",
+                    "type": "switch",
+                    "online": true,
+                    "master": "172.24.0.3",
+                    "layer": "def",
+                    "props": {
+                        "managementAddress": "grpc://mininet:50001?device_id=1",
+                        "protocol": "P4Runtime, gNMI, gNOI",
+                        "gridX": "200.0",
+                        "gridY": "600.0",
+                        "driver": "stratum-bmv2",
+                        "name": "device:leaf1",
+                        "p4DeviceId": "1",
+                        "locType": "grid"
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 600.0,
+                        "longOrX": 200.0
+                    }
+                }
+            ]
+        ],
+        "hosts": [
+            [],
+            [],
+            [
+                {
+                    "id": "00:00:00:00:00:30/None",
+                    "nodeType": "host",
+                    "layer": "def",
+                    "ips": [
+                        "2001:2:3::1"
+                    ],
+                    "props": {
+                        "gridX": "750.0",
+                        "gridY": "700.0",
+                        "latitude": null,
+                        "name": "h3",
+                        "locType": "grid",
+                        "longitude": null
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 700.0,
+                        "longOrX": 750.0
+                    },
+                    "configured": false
+                },
+                {
+                    "id": "00:00:00:00:00:1A/None",
+                    "nodeType": "host",
+                    "layer": "def",
+                    "ips": [
+                        "2001:1:1::a"
+                    ],
+                    "props": {
+                        "gridX": "100.0",
+                        "gridY": "700.0",
+                        "latitude": null,
+                        "name": "h1a",
+                        "locType": "grid",
+                        "longitude": null
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 700.0,
+                        "longOrX": 100.0
+                    },
+                    "configured": false
+                },
+                {
+                    "id": "00:00:00:00:00:1B/None",
+                    "nodeType": "host",
+                    "layer": "def",
+                    "ips": [
+                        "2001:1:1::b"
+                    ],
+                    "props": {
+                        "gridX": "100.0",
+                        "gridY": "800.0",
+                        "latitude": null,
+                        "name": "h1b",
+                        "locType": "grid",
+                        "longitude": null
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 800.0,
+                        "longOrX": 100.0
+                    },
+                    "configured": false
+                },
+                {
+                    "id": "00:00:00:00:00:1C/None",
+                    "nodeType": "host",
+                    "layer": "def",
+                    "ips": [
+                        "2001:1:1::c"
+                    ],
+                    "props": {
+                        "gridX": "250.0",
+                        "gridY": "800.0",
+                        "latitude": null,
+                        "name": "h1c",
+                        "locType": "grid",
+                        "longitude": null
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 800.0,
+                        "longOrX": 250.0
+                    },
+                    "configured": false
+                },
+                {
+                    "id": "00:00:00:00:00:20/None",
+                    "nodeType": "host",
+                    "layer": "def",
+                    "ips": [
+                        "2001:1:2::1"
+                    ],
+                    "props": {
+                        "gridX": "400.0",
+                        "gridY": "700.0",
+                        "latitude": null,
+                        "name": "h2",
+                        "locType": "grid",
+                        "longitude": null
+                    },
+                    "location": {
+                        "locType": "grid",
+                        "latOrY": 700.0,
+                        "longOrX": 400.0
+                    },
+                    "configured": false
+                }
+            ]
+        ],
+        "layerOrder": [
+            "opt",
+            "pkt",
+            "def"
+        ]
+    }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/tests/topo2Highlights-sample.json b/web/gui2-topo-lib/lib/layer/forcesvg/tests/topo2Highlights-sample.json
new file mode 100644
index 0000000..50995c8
--- /dev/null
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/tests/topo2Highlights-sample.json
@@ -0,0 +1,39 @@
+{
+  "event": "topo2Highlights",
+  "payload": {
+    "devices": [],
+    "hosts": [],
+    "links": [
+      {
+        "id": "device:leaf2/2~device:spine2/2",
+        "label": "964.91 Kbps",
+        "css": "secondary port-traffic-green"
+      },
+      {
+        "id": "device:leaf1/1~device:spine1/1",
+        "label": "3.92 Mbps",
+        "css": "secondary port-traffic-yellow"
+      },
+      {
+        "id": "00:00:00:00:00:30/None~device:leaf2/3",
+        "label": "4.46 Mbps",
+        "css": "secondary port-traffic-yellow"
+      },
+      {
+        "id": "device:leaf2/1~device:spine1/2",
+        "label": "3.53 Mbps",
+        "css": "secondary port-traffic-yellow"
+      },
+      {
+        "id": "device:leaf1/2~device:spine2/1",
+        "label": "1.06 Mbps",
+        "css": "secondary port-traffic-yellow"
+      },
+      {
+        "id": "00:00:00:00:00:20/None~device:leaf1/6",
+        "label": "4.98 Mbps",
+        "css": "secondary port-traffic-yellow"
+      }
+    ]
+  }
+}
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
index 1929204..ab5fff0 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.spec.ts
@@ -13,13 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { HostNodeSvgComponent } from './hostnodesvg.component';
+import {HostNodeSvgComponent} from './hostnodesvg.component';
 import {ActivatedRoute, Params} from '@angular/router';
 import {of} from 'rxjs';
 import {LogService} from 'gui2-fw-lib/public_api';
-import {Host} from '../../models';
+import {Host, HostLabelToggle} from '../../models';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {ChangeDetectorRef} from '@angular/core';
 import {BadgeSvgComponent} from '../badgesvg/badgesvg.component';
@@ -44,6 +44,9 @@
         testHost = new Host('host:1');
         testHost.ips = ['10.205.86.123', '192.168.56.10'];
 
+        const topo2BaseData = require('../../tests/topo2Highlights-base-data.json');
+        const topo2BaseHostsData: Host[] = <Host[]><unknown>(topo2BaseData.payload.hosts[2]);
+
         TestBed.configureTestingModule({
             imports: [ BrowserAnimationsModule ],
             declarations: [ HostNodeSvgComponent, BadgeSvgComponent ],
@@ -67,4 +70,24 @@
     it('should create', () => {
         expect(component).toBeTruthy();
     });
+
+    it('should be able to read host data properly', () => {
+        expect(topo2BaseHostsData.length).toBe(5);
+
+        expect(topo2BaseHostsData[0].id).toBe('00:00:00:00:00:30/None');
+
+        component.host = topo2BaseHostsData[0];
+        component.labelToggle = HostLabelToggle.Enum.NONE;
+        expect(component.hostName()).toBe('00:00:00:00:00:30/None');
+
+        component.labelToggle = HostLabelToggle.Enum.NAME;
+        expect(component.hostName()).toBe('h3');
+
+        component.labelToggle = HostLabelToggle.Enum.IP;
+        expect(component.hostName()).toBe('2001:2:3::1');
+
+        component.labelToggle = HostLabelToggle.Enum.MAC;
+        expect(component.hostName()).toBe('00:00:00:00:00:30/None');
+
+    });
 });
diff --git a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
index e6febb6..dc132d7 100644
--- a/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
+++ b/web/gui2-topo-lib/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
@@ -69,8 +69,10 @@
             return this.host.ips.join(',');
         } else if (this.labelToggle === HostLabelToggle.Enum.MAC) {
             return this.host.id;
+        } else if (this.labelToggle === HostLabelToggle.Enum.NAME) {
+            return this.host.props.name;
         } else {
-            return this.host.id; // Todo - replace with a friendly name
+            return this.host.id;
         }
 
     }