diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
index 843c19c..85f5de7 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/forcesvg.component.ts
@@ -48,6 +48,7 @@
     ModelEventMemo,
     ModelEventType,
     Node,
+    Options,
     Region,
     RegionLink,
     SubRegion,
@@ -57,7 +58,7 @@
 import {DeviceNodeSvgComponent} from './visuals/devicenodesvg/devicenodesvg.component';
 import { HostNodeSvgComponent} from './visuals/hostnodesvg/hostnodesvg.component';
 import { LinkSvgComponent} from './visuals/linksvg/linksvg.component';
-import { Options } from './models/force-directed-graph';
+import {SelectedEvent} from './visuals/nodevisual';
 
 interface UpdateMeta {
     id: string;
@@ -98,8 +99,9 @@
     @Input() scale: number = 1;
     @Input() regionData: Region = <Region>{devices: [ [], [], [] ], hosts: [ [], [], [] ], links: []};
     @Output() linkSelected = new EventEmitter<RegionLink>();
-    @Output() selectedNodeEvent = new EventEmitter<UiElement>();
+    @Output() selectedNodeEvent = new EventEmitter<UiElement[]>();
     public graph: ForceDirectedGraph;
+    private selectedNodes: UiElement[] = [];
 
     // References to the children of this component - these are created in the
     // template view with the *ngFor and we get them by a query here
@@ -308,28 +310,52 @@
     }
 
     /**
-     * Iterate through all hosts and devices to deselect the previously selected
+     * Iterate through all hosts and devices and links to deselect the previously selected
      * node. The emit an event to the parent that lets it know the selection has
      * changed.
+     *
+     * This function collates all of the nodes that have been selected and passes
+     * a collection of nodes up to the topology component
+     *
      * @param selectedNode the newly selected node
      */
-    updateSelected(selectedNode: UiElement): void {
-        this.log.debug('Node or link selected', selectedNode ? selectedNode.id : 'none');
-        this.devices
-            .filter((d) =>
-                selectedNode === undefined || d.device.id !== selectedNode.id)
-            .forEach((d) => d.deselect());
-        this.hosts
-            .filter((h) =>
-                selectedNode === undefined || h.host.id !== selectedNode.id)
-            .forEach((h) => h.deselect());
+    updateSelected(selectedNode: SelectedEvent): void {
+        this.log.debug('Node or link ',
+            selectedNode.uiElement,
+            selectedNode.deselecting ? 'deselected' : 'selected',
+            selectedNode.isShift ? 'Multiple' : '');
 
-        this.links
-            .filter((l) =>
-                selectedNode === undefined || l.link.id !== selectedNode.id)
-            .forEach((l) => l.deselect());
+        if (selectedNode.isShift && selectedNode.deselecting) {
+            const idx = this.selectedNodes.findIndex((n) =>
+                n.id === selectedNode.uiElement.id
+            );
+            this.selectedNodes.splice(idx, 1);
+            this.log.debug('Removed node', idx);
+
+        } else if (selectedNode.isShift) {
+            this.selectedNodes.push(selectedNode.uiElement);
+
+        } else if (selectedNode.deselecting) {
+            this.selectedNodes = [];
+
+        } else {
+            const selNodeId = selectedNode.uiElement.id;
+            // Otherwise if shift was not pressed deselect previous
+            this.devices
+                .filter((d) => d.device.id !== selNodeId)
+                .forEach((d) => d.deselect());
+            this.hosts
+                .filter((h) => h.host.id !== selNodeId)
+                .forEach((h) => h.deselect());
+
+            this.links
+                .filter((l) => l.link.id !== selNodeId)
+                .forEach((l) => l.deselect());
+
+            this.selectedNodes = [selectedNode.uiElement];
+        }
         // Push the changes back up to parent (Topology Component)
-        this.selectedNodeEvent.emit(selectedNode);
+        this.selectedNodeEvent.emit(this.selectedNodes);
     }
 
     /**
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
index 399955c..e87e1a8 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.html
@@ -47,7 +47,7 @@
 <svg:g xmlns:svg="http://www.w3.org/2000/svg"
        [attr.transform]="'translate(' + device?.x + ',' + device?.y + '), scale(' + scale + ')'"
         [ngClass]="['node', 'device', device.online?'online':'', selected?'selected':'']"
-        (click)="toggleSelected(device)">
+        (click)="toggleSelected(device, $event)">
     <svg:desc>Device {{device.id}}</svg:desc>
     <!-- Template explanation: Creates an SVG Rectangle and in
         line 1) set a css style and shift so that it's centred
@@ -88,4 +88,4 @@
     </svg:text>
     <svg:use [attr.xlink:href]="'#' + deviceIcon()" width="36" height="36" x="-18" y="-18">
     </svg:use>
-</svg:g>
\ No newline at end of file
+</svg:g>
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
index ce6bd46..adcd788 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/devicenodesvg/devicenodesvg.component.ts
@@ -24,7 +24,7 @@
 } from '@angular/core';
 import {Device, LabelToggle, UiElement} from '../../models';
 import {IconService, LocMeta, LogService, MetaUi, ZoomUtils} from 'gui2-fw-lib';
-import {NodeVisual} from '../nodevisual';
+import {NodeVisual, SelectedEvent} from '../nodevisual';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {LocationType} from '../../../backgroundsvg/backgroundsvg.component';
 
@@ -68,7 +68,7 @@
     @Input() device: Device;
     @Input() scale: number = 1.0;
     @Input() labelToggle: LabelToggle.Enum = LabelToggle.Enum.NONE;
-    @Output() selectedEvent = new EventEmitter<UiElement>();
+    @Output() selectedEvent = new EventEmitter<SelectedEvent>();
     textWidth: number = 36;
     constructor(
         protected log: LogService,
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
index ccce65a..0ce4a4a 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.html
@@ -45,7 +45,7 @@
 <svg:g  xmlns:svg="http://www.w3.org/2000/svg"
         [attr.transform]="'translate(' + host?.x + ',' + host?.y + '), scale(' + scale + ')'"
         [ngClass]="['node', 'host', 'endstation', 'fixed', selected?'selected':'', 'hovered']"
-        (click)="toggleSelected(host)">
+        (click)="toggleSelected(host, $event)">
     <svg:desc>Host {{host.id}}</svg:desc>
     <!-- Template explanation: Creates an SVG Circle and in
         line 1) Apply the drop shadow defined above to this circle
@@ -67,4 +67,4 @@
         *ngIf="labelToggle != 0"
         dy="30" text-anchor="middle"
         >{{hostName()}}</svg:text>
-</svg:g>
\ No newline at end of file
+</svg:g>
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
index 26c105a..806f9b2 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/hostnodesvg/hostnodesvg.component.ts
@@ -23,7 +23,7 @@
 } from '@angular/core';
 import {Host, HostLabelToggle, Node} from '../../models';
 import {LogService} from 'gui2-fw-lib';
-import {NodeVisual} from '../nodevisual';
+import {NodeVisual, SelectedEvent} from '../nodevisual';
 
 /**
  * The Host node in the force graph
@@ -40,7 +40,7 @@
     @Input() host: Host;
     @Input() scale: number = 1.0;
     @Input() labelToggle: HostLabelToggle.Enum = HostLabelToggle.Enum.IP;
-    @Output() selectedEvent = new EventEmitter<Node>();
+    @Output() selectedEvent = new EventEmitter<SelectedEvent>();
 
     constructor(
         protected log: LogService
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
index c856763..a94914d 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.html
@@ -39,7 +39,7 @@
         [attr.x2]="link.target?.x" [attr.y2]="link.target?.y"
         [ngClass]="['link', selected?'selected':'', enhanced?'enhanced':'', highlighted]"
         [ngStyle]="{'stroke-width': (enhanced ? 4 : 2) * scale + 'px'}"
-        (click)="toggleSelected(link)"
+        (click)="toggleSelected(link, $event)"
         (mouseover)="enhance()"
         [attr.filter]="highlighted?'url(#glow)':'none'">
 </svg:line>
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
index eab533f..9853889 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/linksvg/linksvg.component.ts
@@ -20,7 +20,7 @@
 } from '@angular/core';
 import {Link, LinkHighlight, UiElement} from '../../models';
 import {LogService} from 'gui2-fw-lib';
-import {NodeVisual} from '../nodevisual';
+import {NodeVisual, SelectedEvent} from '../nodevisual';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 
 interface Point {
@@ -52,7 +52,7 @@
     @Input() label: string;
     @Input() scale = 1.0;
     isHighlighted: boolean = false;
-    @Output() selectedEvent = new EventEmitter<UiElement>();
+    @Output() selectedEvent = new EventEmitter<SelectedEvent>();
     @Output() enhancedEvent = new EventEmitter<Link>();
     enhanced: boolean = false;
     labelPosSrc: Point = {x: 0, y: 0};
diff --git a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/nodevisual.ts b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/nodevisual.ts
index a41df62..10bf3d8 100644
--- a/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/nodevisual.ts
+++ b/web/gui2-topo-lib/projects/gui2-topo-lib/src/lib/layer/forcesvg/visuals/nodevisual.ts
@@ -16,20 +16,30 @@
 import {EventEmitter} from '@angular/core';
 import {UiElement} from '../models';
 
+export interface SelectedEvent {
+    uiElement: UiElement;
+    deselecting: boolean;
+    isShift: boolean;
+    isCtrl: boolean;
+    isAlt: boolean;
+}
+
 /**
  * A base class for the Host and Device components
  */
 export abstract class NodeVisual {
     selected: boolean;
-    selectedEvent = new EventEmitter<UiElement>();
+    selectedEvent = new EventEmitter<SelectedEvent>();
 
-    toggleSelected(uiElement: UiElement) {
+    toggleSelected(uiElement: UiElement, event: MouseEvent) {
         this.selected = !this.selected;
-        if (this.selected) {
-            this.selectedEvent.emit(uiElement);
-        } else {
-            this.selectedEvent.emit();
-        }
+        this.selectedEvent.emit(<SelectedEvent>{
+            uiElement: uiElement,
+            deselecting: !this.selected,
+            isShift: event.shiftKey,
+            isCtrl: event.ctrlKey,
+            isAlt: event.altKey
+        });
     }
 
     deselect() {