diff --git a/src/app/pages/home/home-page.component.ts b/src/app/pages/home/home-page.component.ts
index f42f146..9fa3b59 100644
--- a/src/app/pages/home/home-page.component.ts
+++ b/src/app/pages/home/home-page.component.ts
@@ -62,16 +62,26 @@ export class HomePageComponent implements OnInit, OnDestroy {
     this.changeDetector.detectChanges();
 
     this.nodeSet = new vis.DataSet([
-      { id: '192.168.1.0/24', label: 'Zone' },
+      { id: '192.168.1.0/24', label: 'Zone', group: 'zone' },
     ]);
     this.edgeSet = new vis.DataSet([]);
 
     const options = {
       width: '100%',
-      height: '100%'
+      height: '100%',
+      groups: {
+        zone: { color: { background: 'red' }, borderWidth: 5 },
+        host: { color: { background: 'blue' }, borderWidth: 3 },
+        service: { color: { background: 'white' }, borderWidth: 1 },
+      }
     };
 
     this.visNetwork = new vis.Network(this.discoveryTargetRef.nativeElement, { nodes: this.nodeSet, edges: this.edgeSet }, options);
+    this.visNetwork.on('click', (params) => {
+      const ids = params.nodes;
+      const clickedNodes = this.nodeSet.get(ids);
+      console.log('clicked nodes:', clickedNodes);
+    });
 
 
     const zone: Zone = {
@@ -160,11 +170,11 @@ export class HomePageComponent implements OnInit, OnDestroy {
 
     if (null !== this.nodeSet.get(hostId)) {
       this.nodeSet.update([
-        { id: hostId, label: `${host.name}(${host.address})` }
+        { id: hostId, label: `${host.name}(${host.address})`, group: 'host', host: host },
       ]);
     } else {
       this.nodeSet.add([
-        { id: hostId, label: `${host.name}(${host.address})` }
+        { id: hostId, label: `${host.name}(${host.address})`, group: 'host', host: host },
       ]);
       this.edgeSet.add([
         { from: '192.168.1.0/24', to: hostId },
@@ -190,10 +200,10 @@ export class HomePageComponent implements OnInit, OnDestroy {
     const hostId = service.port.host.address;
     const serviceId = `${service.port.host.address}-${service.port.portNumber}-${service.key}`;
     this.nodeSet.add([
-      { id: `${serviceId}`, label: `${service.key}` }
+      { id: `${serviceId}`, label: `${service.key}`, group: 'service', service: service }
     ]);
     this.edgeSet.add([
-      { from: `${hostId}`, to: `${serviceId}` },
+      { from: `${hostId}`, label: `${service.port.portNumber}`, to: `${serviceId}` },
     ]);
 
   }