diff --git a/src/app/service-graph/components/coarse/coarse.component.ts b/src/app/service-graph/components/coarse/coarse.component.ts
index c7a7ac5..ac687d0 100644
--- a/src/app/service-graph/components/coarse/coarse.component.ts
+++ b/src/app/service-graph/components/coarse/coarse.component.ts
@@ -88,10 +88,10 @@
     this.renderLinks(this.graph.links);
   }
 
-  private getSvgDimensions(): {width: number, heigth: number} {
+  private getSvgDimensions(): {width: number, height: number} {
     return {
       width: $('xos-coarse-tenancy-graph svg').width() || 0,
-      heigth: $('xos-coarse-tenancy-graph svg').height() || 0
+      height: $('xos-coarse-tenancy-graph svg').height() || 0
     };
   }
 
@@ -125,12 +125,22 @@
       });
   }
 
+  private collide(n: any) {
+    const svgDim = this.getSvgDimensions();
+    const x = Math.max(n.width / 2, Math.min(n.x, svgDim.width - (n.width / 2)));
+    const y = Math.max(n.height / 2, Math.min(n.y, svgDim.height - (n.height / 2)));
+    return `${x}, ${y}`;
+  }
+
   private setupForceLayout() {
 
+    let svgDim = this.getSvgDimensions();
+
     const tick = () => {
+
       this.nodeGroup.selectAll('g.node')
         .attr({
-          transform: d => `translate(${d.x}, ${d.y})`
+          transform: d => `translate(${this.collide(d)})`
         });
 
       this.linkGroup.selectAll('line')
@@ -141,9 +151,9 @@
           y2: l => l.target.y || 0,
         });
     };
-    const svgDim = this.getSvgDimensions();
+
     this.forceLayout = d3.layout.force()
-      .size([svgDim.width, svgDim.heigth])
+      .size([svgDim.width, svgDim.height])
       .linkDistance(config.force.linkDistance)
       .charge(config.force.charge)
       .gravity(config.force.gravity)
@@ -168,7 +178,7 @@
       .append('g')
       .attr({
         class: n => `node ${this.XosGraphHelpers.parseElemClasses(n.d3Class)}`,
-        transform: `translate(${svgDim.width / 2}, ${svgDim.heigth / 2})`
+        transform: `translate(${svgDim.width / 2}, ${svgDim.height / 2})`
       })
       .call(this.forceLayout.drag)
       .on('mousedown', () => {
@@ -194,9 +204,9 @@
 
     const existing = node.selectAll('rect');
 
-
     // resize node > rect as contained text
-    existing.each(function() {
+
+    existing.each(function(d: any) {
       const textBBox = self.XosGraphHelpers.getSiblingTextBBox(this);
       const rect = d3.select(this);
       rect.attr({
@@ -205,7 +215,10 @@
         x: textBBox.x - (config.node.padding / 2),
         y: (textBBox.y + self.textOffset) - (config.node.padding / 2)
       });
+      d.width = textBBox.width + config.node.padding;
+      d.height = textBBox.height + config.node.padding;
     });
+
   }
 
   private renderLinks(links: IXosServiceGraphLink[]) {