diff --git a/ui/modules/vpc/vpc.css b/ui/modules/vpc/vpc.css
index 51c3f7e05bd..466ce80cf85 100644
--- a/ui/modules/vpc/vpc.css
+++ b/ui/modules/vpc/vpc.css
@@ -21,6 +21,8 @@
   width: 100%;
   height: 100%;
   overflow: auto;
+  overflow-x: hidden;
+  position: relative;
 }
 
 .vpc-network-chart .tiers {
@@ -247,29 +249,29 @@
   float: left;
   /*+placement:shift 10px 176px;*/
   position: relative;
-  left: 10px;
-  top: 176px;
+  left: 0px;
+  top: 214px;
 }
 
 .vpc-network-chart .tier-item.router .header {
   padding: 15px 0 14px;
   border-bottom: 1px solid #808080;
   background: #C3C6C9;
-/*Old browsers*/
+  /*Old browsers*/
   background: -moz-linear-gradient(top, #c3c6c9 0%, #909497 100%);
-/*FF3.6+*/
+  /*FF3.6+*/
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c3c6c9), color-stop(100%,#909497));
-/*Chrome,Safari4+*/
+  /*Chrome,Safari4+*/
   background: -webkit-linear-gradient(top, #c3c6c9 0%,#909497 100%);
-/*Chrome10+,Safari5.1+*/
+  /*Chrome10+,Safari5.1+*/
   background: -o-linear-gradient(top, #c3c6c9 0%,#909497 100%);
-/*Opera 11.10+*/
+  /*Opera 11.10+*/
   background: -ms-linear-gradient(top, #c3c6c9 0%,#909497 100%);
-/*IE10+*/
+  /*IE10+*/
   background: linear-gradient(to bottom, #c3c6c9 0%,#909497 100%);
-/*W3C*/
+  /*W3C*/
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c3c6c9', endColorstr='#909497',GradientType=0 );
-/*IE6-8*/
+  /*IE6-8*/
 }
 
 .vpc-network-chart .tier-item.router .header .title {
@@ -311,3 +313,32 @@
   background-color: #818181;
 }
 
+.vpc-network-chart .connector-line {
+}
+
+.vpc-network-chart .connector-line .connector-start,
+.vpc-network-chart .connector-line .connector-mid,
+.vpc-network-chart .connector-line .connector-end {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background: #CCCCCC;
+}
+
+.vpc-network-chart .connector-line .connector-start,
+.vpc-network-chart .connector-line .connector-end {
+  height: 3px;
+}
+
+.vpc-network-chart .connector-line .connector-start {
+  width: 50px;
+  margin-left: 18px;
+}
+
+.vpc-network-chart .connector-line .connector-mid {
+  width: 3px;
+}
+
+.vpc-network-chart .connector-line .connector-end {
+}
+
diff --git a/ui/modules/vpc/vpc.js b/ui/modules/vpc/vpc.js
index a6037c00fb7..a3c2ec738e9 100644
--- a/ui/modules/vpc/vpc.js
+++ b/ui/modules/vpc/vpc.js
@@ -113,6 +113,64 @@
       return $tier;
     },
 
+    connectorLine: function(args) {
+      var $connector = $('<div></div>').addClass('connector-line');
+      var $router = args.$router;
+      var $tier = args.$tier;
+      var $connectorStart = $('<div></div>').addClass('connector-start');
+      var $connectorMid = $('<div></div>').addClass('connector-mid');
+      var $connectorEnd = $('<div></div>').addClass('connector-end');
+
+      $connector.append($connectorStart, $connectorMid, $connectorEnd);
+
+      var posStartOffsetLeft = 5;
+      var posStartOffsetTop = 10;
+      var posStart = {
+        top: $router.position().top + ($router.outerHeight() / 2 + ($tier.index() * posStartOffsetTop)),
+        left: $router.position().left + $router.outerWidth()
+      };
+      var posStartWidth = 60 - (($tier.index() + 1) * posStartOffsetLeft);
+
+      var posEndOffset = 15;
+      var posEnd = {
+        top: $tier.position().top + ($tier.outerHeight() / 2),
+        left: posStart.left + posStartWidth + posEndOffset
+      };
+      var posEndWidth = Math.abs($tier.position().left -
+                                 (posStart.left + posStartWidth)) - posEndOffset;
+
+      // Start line (next to router)
+      $connectorStart.css({
+        top: posStart.top,
+        left: posStart.left
+      });
+      $connectorStart.width(posStartWidth);
+
+      // End line (next to tier)
+      $connectorEnd.css({
+        top: posEnd.top,
+        left: posEnd.left
+      });
+      $connectorEnd.width(posEndWidth);
+
+      // Mid line (connect start->end)
+      if (posStart.top > posEnd.top) { // Tier above router
+        $connectorMid.css({
+          top: posEnd.top,
+          left: posEnd.left
+        });
+        $connectorMid.height(posStart.top - posEnd.top);
+      } else { // Tier below router
+        $connectorMid.css({
+          top: posStart.top,
+          left: posStart.left + posStartWidth + posEndOffset
+        });
+        $connectorMid.height(posEnd.top - posStart.top);
+      }
+
+      return $connector;
+    },
+
     router: function(args) {
       var $router = elems.tier({
         context: args.context,
@@ -171,7 +229,7 @@
           var section = cloudStack.vpc.sections[id];
           var $section = $('<div>');
           var $loading = $('<div>').addClass('loading-overlay');
-          
+
           if ($.isFunction(section)) {
             section = cloudStack.vpc.sections[id]();
           }
@@ -193,7 +251,7 @@
 
                 $section.appendTo($panel);
               }
-            });            
+            });
           };
 
           if (before) {
@@ -262,10 +320,17 @@
           response: {
             success: function(data) {
               var tiers = data.tiers;
+              var $router;
               var $placeholder = elems.tierPlaceholder({
                 context: context
               });
 
+              // Router
+              $router = elems.router({
+                context: context,
+                dashboardItems: data.routerDashboard
+              }).appendTo($chart);
+
               $(tiers).map(function(index, tier) {
                 var $tier = elems.tier({
                   context: context,
@@ -273,6 +338,14 @@
                   dashboardItems: tier._dashboardItems
                 });
                 $tier.appendTo($tiers);
+
+                // Connect tier to router via line
+                //
+                // -- Needs to execute after chart generation is complete,
+                //    so that chart elements have positioning in place.
+                $chart.bind('cloudStack.vpc.chartReady', function() {
+                  elems.connectorLine({ $tier: $tier, $router: $router }).appendTo($chart);
+                });
               });
 
               // Add placeholder tier
@@ -289,12 +362,6 @@
               if (args.complete) {
                 args.complete($chart);
               }
-
-              // Router
-              elems.router({
-                context: context,
-                dashboardItems: data.routerDashboard
-              }).appendTo($chart);
             }
           }
         });
@@ -303,6 +370,7 @@
           chart({
             complete: function($newChart) {
               $chart.replaceWith($newChart);
+              $newChart.trigger('cloudStack.vpc.chartReady');
             }
           });
         });
@@ -314,7 +382,11 @@
         title: vpcItem.displaytext ? vpcItem.displaytext : vpcItem.name,
         maximizeIfSelected: true,
         complete: function($panel) {
-          var $chart = chart();
+          var $chart = chart({
+            complete: function($chart) {
+              $chart.trigger('cloudStack.vpc.chartReady');
+            }
+          });
 
           $chart.appendTo($panel);
         }