diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index f7d7b3de3a1..ac27ff555f7 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -9698,6 +9698,43 @@ div.panel.ui-dialog div.list-view div.fixed-header {
   max-width: 184px !important;
 }
 
+div.ui-dialog div.acl div.multi-edit table.multi-edit thead tr th,
+div.ui-dialog div.acl div.multi-edit table.multi-edit tbody tr td {
+  min-width: 75px;
+}
+
+div.ui-dialog div.acl div.multi-edit div.data div.data-body div.data-item table tbody tr td {
+  width: 100%;
+  min-width: 77px;
+}
+
+.detail-view .acl .multi-edit {
+}
+
+.detail-view .acl .multi-edit th,
+.detail-view .acl .multi-edit td {
+  padding-right: 0px !important;
+  min-width: 25px !important;
+}
+
+.detail-view .acl .multi-edit th {
+  font-size: 10px;
+}
+
+.detail-view .acl .multi-edit input {
+  width: 50px;
+}
+
+.detail-view .acl .multi-edit .add-vm {
+  width: 51px;
+  text-indent: 0px;
+  padding-right: 0px;
+}
+
+.detail-view .acl .multi-edit td.multi-actions {
+  width: 65px;
+}
+
 /*Autoscaler*/
 .ui-dialog div.autoscaler {
   overflow: auto;
diff --git a/ui/scripts/ui-custom/vpc.js b/ui/scripts/ui-custom/vpc.js
index f4bd5e0059e..4e432801223 100644
--- a/ui/scripts/ui-custom/vpc.js
+++ b/ui/scripts/ui-custom/vpc.js
@@ -16,21 +16,53 @@
 // under the License. 
 (function($, cloudStack) {
   var elems = {
+    aclDialog: function(args) {
+      var isDialog = args.isDialog;
+      var actionArgs = args.actionArgs;
+      var context = args.context;
+      var $acl = $('<div>').addClass('acl').multiEdit(
+        $.extend(true, {}, actionArgs.multiEdit, {
+          context: context
+        })
+      );
+
+      // Show ACL dialog
+      if (isDialog) {
+        $acl.dialog({
+          title: 'Configure ACL',
+          dialogClass: 'configure-acl',
+          width: 900,
+          height: 600,
+          buttons: {
+            'Done': function() {
+              $(':ui-dialog').remove();
+              $('.overlay').remove();
+            }
+          }
+        });
+      }
+
+      return $acl;
+    },
     vpcConfigureTooltip: function(args) {
+      var context = args.context;
       var $browser = args.$browser;
       var $chart = args.$chart;
       var ipAddresses = args.ipAddresses;
+      var acl = args.acl;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
       var links = {
         'ip-addresses': 'IP Addresses',
         'gateways': 'Private Gateway',
-        'site-to-site-vpn': 'Site-to-site VPN'
+        'site-to-site-vpn': 'Site-to-site VPN',
+        'network-acls':  'ACLs'
       };
       var $links = $('<ul>').addClass('links');
       var $tooltip = $('<div>').addClass('vpc-configure-tooltip').append(
         $('<div>').addClass('arrow')
       );
+      var tierDetailView = args.tierDetailView;
 
       // Make links
       $.map(links, function(label, id) {
@@ -43,6 +75,37 @@
         // Link event
         $link.click(function() {
           switch (id) {
+          case 'network-acls':
+              $browser.cloudBrowser('addPanel', {
+              title: 'Network ACLs',
+              maximizeIfSelected: true,
+              complete: function($panel) {
+                $panel.listView(
+                  $.extend(true, {}, acl.listView, {
+                    listView: {
+                      actions: {
+                        add: {
+                          label: 'Add network ACL',
+                          action: {
+                            custom: function() {
+                              elems.aclDialog({
+                                isDialog: true,
+                                actionArgs: acl,
+                                context: context
+                              });
+                            }
+                          }
+                        }
+                      },
+                      detailView: tierDetailView
+                    }
+                  }),
+                  { context: acl.context }
+                );
+              }
+            });
+            break;
+
           case 'ip-addresses':
             $browser.cloudBrowser('addPanel', {
               title: 'IP Addresses',
@@ -200,24 +263,30 @@
       return $tooltip;
     },
     vpcConfigureArea: function(args) {
+      var context = args.context;
       var $browser = args.$browser;
       var $chart = args.$chart;
       var ipAddresses = args.ipAddresses;
+      var acl = args.acl;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
       var $config = $('<div>').addClass('config-area');
       var $configIcon = $('<span>').addClass('icon').html('&nbsp');
-
+      var tierDetailView = args.tierDetailView;
+      
       $config.append($configIcon);
 
       // Tooltip event
       $configIcon.mouseover(function() {
         var $tooltip = elems.vpcConfigureTooltip({
+          context: context,
           $browser: $browser,
           $chart: $chart,
           ipAddresses: ipAddresses,
           gateways: gateways,
-          siteToSiteVPN: siteToSiteVPN
+          acl: acl,
+          siteToSiteVPN: siteToSiteVPN,
+          tierDetailView: tierDetailView
         });
 
         // Make sure tooltip is center aligned with icon
@@ -240,6 +309,8 @@
       return $router;
     },
     tier: function(args) {
+      var ipAddresses = args.ipAddresses;
+      var acl = args.acl;
       var name = args.name;
       var cidr = args.cidr;
       var context = args.context;
@@ -316,7 +387,7 @@
       if (isPlaceholder) {
         $tier.addClass('placeholder');
         $title.html('Create Tier');
-      } else {
+      } else {        
         $title.html(
           cloudStack.concat(name, 8)
         );
@@ -385,6 +456,7 @@
     },
     chart: function(args) {
       var $browser = args.$browser;
+      var acl = args.acl;
       var ipAddresses = args.ipAddresses;
       var gateways = args.gateways;
       var siteToSiteVPN = args.siteToSiteVPN;
@@ -404,11 +476,14 @@
             )
             .append(
               elems.vpcConfigureArea({
+                context: context,
                 $browser: $browser,
                 $chart: $chart,
                 ipAddresses: $.extend(ipAddresses, {context: context}),
                 gateways: $.extend(gateways, {context: context}),
-                siteToSiteVPN: $.extend(siteToSiteVPN, {context: context})
+                siteToSiteVPN: $.extend(siteToSiteVPN, {context: context}),
+                acl: $.extend(acl, {context: context}),
+                tierDetailView: tierDetailView
               })
             );
 
@@ -418,9 +493,11 @@
         }
 
         addTierDialog({
+          ipAddresses: ipAddresses,
           $browser: $browser,
           tierDetailView: tierDetailView,
           $tiers: $tiers,
+          acl: acl,
           context: context,
           actions: actions,
           vmListView: vmListView,
@@ -433,6 +510,8 @@
       if (tiers != null && tiers.length > 0) {
         $(tiers).map(function(index, tier) {
           var $tier = elems.tier({
+            ipAddresses: ipAddresses,
+            acl: acl,
             $browser: $browser,
             detailView: tierDetailView,
             name: tier.name,
@@ -596,22 +675,10 @@
       });
       break;
     case 'acl':
-      // Show ACL dialog
-      $('<div>').addClass('acl').multiEdit(
-        $.extend(true, {}, actionArgs.multiEdit, {
-          context: context
-        })
-      ).dialog({
-        title: 'Configure ACL for tier: ' + $tier.find('.title').attr('title'),
-        dialogClass: 'configure-acl',
-        width: 900,
-        height: 600,
-        buttons: {
-          'Done': function() {
-            $(':ui-dialog').remove();
-            $('.overlay').remove();
-          }
-        }
+      elems.aclDialog({
+        isDialog: true,
+        actionArgs: actionArgs,
+        context: context  
       }).closest('.ui-dialog').overlay();
       break;
     default:
@@ -629,6 +696,8 @@
 
   // Appends a new tier to chart
   var addNewTier = function(args) {
+    var ipAddresses = args.ipAddresses;
+    var acl = args.acl;
     var actions = args.actions;
     var vmListView = args.vmListView;
     var actionPreFilter = args.actionPreFilter;
@@ -636,12 +705,14 @@
     var $browser = args.$browser;
     var tierDetailView = args.tierDetailView;
     var tier = $.extend(args.tier, {
+      ipAddresses: ipAddresses,
       $browser: $browser,
       detailView: tierDetailView,
       context: context,
       vmListView: vmListView,
       actions: actions,
       actionPreFilter: actionPreFilter,
+      acl: acl,
       virtualMachines: []
     });
     var $tiers = args.$tiers;
@@ -656,6 +727,7 @@
 
   // Renders the add tier form, in a dialog
   var addTierDialog = function(args) {
+    var ipAddresses = args.ipAddresses;
     var actions = args.actions;
     var context = args.context;
     var vmListView = args.vmListView;
@@ -663,6 +735,7 @@
     var $tiers = args.$tiers;
     var $browser = args.$browser;
     var tierDetailView = args.tierDetailView;
+    var acl = args.acl;
 
     cloudStack.dialog.createForm({
       context: context,
@@ -686,12 +759,14 @@
                 function(args) {
                   $loading.remove();
                   addNewTier({
+                    ipAddresses: ipAddresses,
                     $browser: $browser,
                     tierDetailView: tierDetailView,
                     context: $.extend(true, {}, context, {
                       networks: [tier]
                     }),
                     tier: tier,
+                    acl: acl,
                     $tiers: $tiers,
                     actions: actions,
                     actionPreFilter: actionPreFilter,
@@ -722,6 +797,7 @@
     var tierArgs = args.tiers;
     var ipAddresses = args.ipAddresses;
     var gateways = args.gateways;
+    var acl = args.acl;
     var siteToSiteVPN = args.siteToSiteVPN;
 
     return function(args) {
@@ -743,12 +819,36 @@
             context: context,
             response: {
               success: function(args) {
+                // Setup detail view tabs
+                var tierDetailView = $.extend(true, {}, tierArgs.detailView, {
+                  tabs: {
+                    acl: {
+                      custom: function(args) {
+                        var $acl = elems.aclDialog({
+                          isDialog: false,
+                          actionArgs: acl,
+                          context: args.context
+                        });
+                        
+                        return $acl;
+                      }
+                    },
+                    ipAddresses: {
+                      custom: function(args) {
+                        return $('<div>').listView(ipAddresses.listView(),
+                                                   {context: args.context});
+                      }
+                    }
+                  }
+                });
+                
                 var tiers = args.tiers;
                 var $chart = elems.chart({
                   $browser: $browser,
                   ipAddresses: ipAddresses,
                   gateways: gateways,
-                  tierDetailView: tierArgs.detailView,
+                  acl: acl,
+                  tierDetailView: tierDetailView,
                   siteToSiteVPN: siteToSiteVPN,
                   vmListView: vmListView,
                   context: context,
diff --git a/ui/scripts/ui/widgets/multiEdit.js b/ui/scripts/ui/widgets/multiEdit.js
index 870d0856ab4..cece45e56c9 100644
--- a/ui/scripts/ui/widgets/multiEdit.js
+++ b/ui/scripts/ui/widgets/multiEdit.js
@@ -893,6 +893,7 @@
           context: context,
           data: data,
           itemData: itemData,
+          $multi: $multi,
           response: {
             success: function(successArgs) {
               var notification = successArgs ? successArgs.notification : null;
diff --git a/ui/scripts/vpc.js b/ui/scripts/vpc.js
index a9f01ab3b9a..234818e08da 100644
--- a/ui/scripts/vpc.js
+++ b/ui/scripts/vpc.js
@@ -65,6 +65,42 @@
       },
       'startport': { edit: true, label: 'label.start.port' },
       'endport': { edit: true, label: 'label.end.port' },
+      'networkid': {
+        label: 'Select Tier',
+        select: function(args) {
+          var data = {
+            listAll: true,
+            vpcid: args.context.vpc[0].id
+          };
+
+          // Only show selected tier, if viewing from detail view
+          if (args.context.networks &&
+              args.context.networks[0] &&
+              args.context.networks[0].vpcid) {
+            $.extend(data, {
+              id: args.context.networks[0].id
+            });
+          }
+          
+          //  Ajax Call to display the Tiers
+          $.ajax({
+            url: createURL('listNetworks'),
+            data: data,
+            success: function(json) {
+              var networks = json.listnetworksresponse.network;
+              
+              args.response.success({
+                data: $(networks).map(function(index, network) {
+                  return {
+                    name: network.id,
+                    description: network.name
+                  };
+                })
+              });
+            }
+          });
+        }
+      },
       'icmptype': { edit: true, label: 'ICMP.type', isDisabled: true },
       'icmpcode': { edit: true, label: 'ICMP.code', isDisabled: true },
       'traffictype' : {
@@ -89,16 +125,31 @@
     add: {
       label: 'Add',
       action: function(args) {
+        var $multi = args.$multi;
+        
         $.ajax({
           url: createURL('createNetworkACL'),
           data: $.extend(args.data, {
-            networkid: args.context.networks[0].id
+            networkid: args.data.networkid
           }),
           dataType: 'json',
           success: function(data) {
             args.response.success({
               _custom: {
-                jobId: data.createnetworkaclresponse.jobid
+                jobId: data.createnetworkaclresponse.jobid,
+                getUpdatedItem: function(json) {
+                  var networkName = $multi.find('select[name=networkid] option[value=' + args.data.networkid + ']').html();
+                  var data = $.extend(json.queryasyncjobresultresponse.jobresult.networkacl, {
+                    networkid: networkName
+                  });
+                  var aclRules = $multi.data('acl-rules');
+                  
+                  aclRules.push(data);
+                  $multi.data('acl-rules', aclRules);
+                  $(window).trigger('cloudStack.fullRefresh');
+
+                  return data;
+                }
               },
               notification: {
                 label: 'Add ACL',
@@ -127,7 +178,10 @@
               var jobID = data.deletenetworkaclresponse.jobid;
               args.response.success({
                 _custom: {
-                  jobId: jobID
+                  jobId: jobID,
+                  getUpdatedItem: function() {
+                    $(window).trigger('cloudStack.fullRefresh');
+                  }
                 },
                 notification: {
                   label: 'Remove ACL',
@@ -143,23 +197,42 @@
       }
     },
     dataProvider: function(args) {
-      $.ajax({
-        url: createURL('listNetworkACLs'),
-        data: {
-          listAll: true,
-          networkid: args.context.networks[0].id
-        },
-        dataType: 'json',
-        async: true,
-        success: function(json) {
-          args.response.success({
-            data: json.listnetworkaclsresponse.networkacl
-          });
-        },
-        error: function(XMLHttpResponse) {
-          args.response.error(parseXMLHttpResponse(XMLHttpResponse));
-        }
-      });
+      var $multi = args.$multi;
+      var data = {
+        vpcid: args.context.vpc[0].id,
+        listAll: true
+      };
+
+      if (!$multi.data('acl-rules')) {
+        $multi.data('acl-rules', []);
+      }
+
+      if (args.context.networks &&
+          args.context.networks[0] &&
+          args.context.networks[0].vpcid) {
+        data.networkid = args.context.networks[0].id;
+
+        $.ajax({
+          url: createURL('listNetworkACLs'),
+          data: data,
+          dataType: 'json',
+          async: true,
+          success: function(json) {
+            args.response.success({
+              data: $(json.listnetworkaclsresponse.networkacl).map(function(index, acl) {
+                return $.extend(acl, {
+                  networkid: args.context.networks[0].name
+                });
+              })
+            });
+          },
+          error: function(XMLHttpResponse) {
+            args.response.error(parseXMLHttpResponse(XMLHttpResponse));
+          }
+        });
+      } else {
+        args.response.success({ data: $multi.data('acl-rules') });
+      }
     }
   };
 
@@ -443,6 +516,54 @@
         return cloudStack.sections.network.sections.ipAddresses;
       }
     },
+    acl: {
+      multiEdit: aclMultiEdit,
+      
+      listView: {
+        listView: {
+          id: 'networks',
+          fields: {
+            tierName: { label: 'Tier' },
+            aclTotal: { label: 'ACL Total' }
+          },
+          dataProvider: function(args) {
+            $.ajax({
+              url: createURL('listNetworks'),
+              data: {
+                listAll: true,
+                vpcid: args.context.vpc[0].id
+              },
+              success: function(json) {
+                args.response.success({
+                  data: $.map(json.listnetworksresponse.network, function(tier) {
+                    var aclTotal = 0;
+                    
+                    // Get ACL total
+                    $.ajax({
+                      url: createURL('listNetworkACLs'),
+                      async: false,
+                      data: {
+                        listAll: true,
+                        networkid: tier.id
+                      },
+                      success: function(json) {
+                        aclTotal = json.listnetworkaclsresponse.networkacl ?
+                          json.listnetworkaclsresponse.networkacl.length : 0;
+                      }
+                    });
+                    
+                    return $.extend(tier, {
+                      tierName: tier.name,
+                      aclTotal: aclTotal
+                    });
+                  })
+                });
+              }
+            });
+          }
+        }      
+      }
+    },
     gateways: {
       add: {
         preCheck: function(args) {
@@ -1433,7 +1554,7 @@
         isMaximized: true,
         tabs: {
           details: {
-            title: 'label.tier.details',
+            title: 'Network Details',
             preFilter: function(args) {
               var hiddenFields = [];
               var zone;
@@ -1575,6 +1696,22 @@
             }
           },
 
+          acl: {
+            title: 'Network ACL',
+            custom: function(args) {
+              // Widget renders ACL multi-edit, overriding this fn
+              return $('<div>');
+            }
+          },
+
+          ipAddresses: {
+            title: 'label.menu.ipaddresses',
+            custom: function(args) {
+              // Widget renders IP addresses, overriding this fn
+              return $('<div>');
+            }
+          },
+
           addloadBalancer: {
             title: 'label.add.load.balancer',
             custom: function(args) {
@@ -1931,13 +2068,14 @@
             poll: pollAsyncJobResult
           }
         },
-
-        acl: {
+        
+        // Removing ACL buttons from the tier chart
+        /* acl: {
           label: 'Configure ACL for tier',
           shortLabel: 'ACL',
-          multiEdit: aclMultiEdit
-        },
-
+         multiEdit: aclMultiEdit
+        }, */
+            
         remove: {
           label: 'Remove tier',
           action: function(args) {