diff --git a/ui/scripts-test/system.js b/ui/scripts-test/system.js
index 64c3b97c01c..b1cce5ddce1 100644
--- a/ui/scripts-test/system.js
+++ b/ui/scripts-test/system.js
@@ -48,6 +48,57 @@
                 dataProvider: function(args) {
                   args.response.success({ data: testData.data.networks[0] });
                 }
+              },
+              ipAddresses: {
+                title: 'IP Addresses',
+                custom: function(args) {
+                  return $('<div></div>').multiEdit({
+                    noSelect: true,
+                    fields: {
+                      'gateway': { edit: true, label: 'Gateway' },
+                      'netmask': { edit: true, label: 'Netmask' },
+                      'vlanid': { edit: true, label: 'VLAN' },
+                      'startip': { edit: true, label: 'Start IP' },
+                      'endip': { edit: true, label: 'End IP' },
+                      'add-rule': { label: 'Add', addButton: true }
+                    },
+                    add: {
+                      label: 'Add',
+                      action: function(args) {
+                        setTimeout(function() {
+                          args.response.success({
+                            notification: {
+                              label: 'Added IP address',
+                              poll: testData.notifications.testPoll
+                            }
+                          });
+                        }, 500);
+                      }
+                    },
+                    actions: {
+                      destroy: {
+                        label: 'Remove Rule',
+                        action: function(args) {
+                          setTimeout(function() {
+                            args.response.success({
+                              notification: {
+                                label: 'Removed IP address',
+                                poll: testData.notifications.testPoll
+                              }
+                            });
+                          }, 500);
+                        }
+                      }
+                    },
+                    dataProvider: function(args) {
+                      setTimeout(function() {
+                        args.response.success({
+                          data: []
+                        });
+                      }, 100);
+                    }
+                  });
+                }
               }
             }
           }
@@ -82,6 +133,121 @@
                 dataProvider: function(args) {
                   args.response.success({ data: testData.data.networks[0] });
                 }
+              },
+              cidr: {
+                title: 'CIDR',
+                custom: function(args) {
+                  return $('<div></div>').multiEdit({
+                    noSelect: true,
+                    fields: {
+                      'cidr': { edit: true, label: 'CIDR' },
+                      'add-rule': {
+                        label: 'Add',
+                        addButton: true
+                      }
+                    },
+                    add: {
+                      label: 'Add',
+                      action: function(args) {
+                        setTimeout(function() {
+                          args.response.success({
+                            notification: {
+                              label: 'Added VLAN range',
+                              poll: testData.notifications.testPoll
+                            }
+                          });
+                        }, 500);
+                      }
+                    },
+                    actions: {
+                      destroy: {
+                        label: 'Remove Rule',
+                        action: function(args) {
+                          setTimeout(function() {
+                            args.response.success({
+                              notification: {
+                                label: 'Removed VLAN range',
+                                poll: testData.notifications.testPoll
+                              }
+                            });
+                          }, 500);
+                        }
+                      }
+                    },
+                    dataProvider: function(args) {
+                      setTimeout(function() {
+                        args.response.success({
+                          data: [
+                            {
+                              cidr: '0.0.0.0/0',
+                              startvlanrange: '1480', endvlanrange: '1559'
+                            }
+                          ]
+                        });
+                      }, 100);
+                    }
+                  });
+                }
+              },
+              vlanRanges: {
+                title: 'VLAN Ranges',
+                custom: function(args) {
+                  return $('<div></div>').multiEdit({
+                    noSelect: true,
+                    fields: {
+                      'startvlanrange': {
+                        edit: true, label: 'Start VLAN'
+                      },
+                      'endvlanrange': {
+                        edit: true, label: 'End VLAN'
+                      },
+                      'add-rule': {
+                        label: 'Add',
+                        addButton: true
+                      }
+                    },
+                    add: {
+                      label: 'Add',
+                      action: function(args) {
+                        setTimeout(function() {
+                          args.response.success({
+                            notification: {
+                              label: 'Added VLAN range',
+                              poll: testData.notifications.testPoll
+                            }
+                          });
+                        }, 500);
+                      }
+                    },
+                    actions: {
+                      destroy: {
+                        label: 'Remove Rule',
+                        action: function(args) {
+                          setTimeout(function() {
+                            args.response.success({
+                              notification: {
+                                label: 'Removed VLAN range',
+                                poll: testData.notifications.testPoll
+                              }
+                            });
+                          }, 500);
+                        }
+                      }
+                    },
+                    dataProvider: function(args) {
+                      setTimeout(function() {
+                        args.response.success({
+                          data: [
+                            {
+                              cidr: '0.0.0.0/0',
+                              startvlanrange: '1480', endvlanrange: '1559'
+                            }
+                          ]
+                        });
+                      }, 100);
+                    }
+                  });
+                }
               }
             }
           }
@@ -134,7 +300,7 @@
         },
 
         types: {
-          // Virtual router
+          // Virtual router list view
           virtualRouter: {
             label: 'Virtual Router',
             fields: {
@@ -143,29 +309,31 @@
               state: { label: 'Status' }
             },
             dataProvider: function(args) {
-              args.response.success({
-                data: [
-                  {
-                    name: 'Router0001S',
-                    ipaddress: '192.168.1.1',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0001B',
-                    ipaddress: '192.168.1.155',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0002',
-                    ipaddress: '192.168.1.13',
-                    state: 'Enabled'
-                  }
-                ]
-              });
+              setTimeout(function() {
+                args.response.success({
+                  data: [
+                    {
+                      name: 'Router0001S',
+                      ipaddress: '192.168.1.1',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0001B',
+                      ipaddress: '192.168.1.155',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0002',
+                      ipaddress: '192.168.1.13',
+                      state: 'Enabled'
+                    }
+                  ]
+                });                
+              }, 500);
             }
           },
 
-          // NetScaler
+          // NetScaler list view
           netscaler: {
             label: 'NetScaler',
             fields: {
@@ -173,30 +341,71 @@
               ipaddress: { label: 'IP Address' },
               state: { label: 'Status' }
             },
-            dataProvider: function(args) {
-              args.response.success({
-                data: [
-                  {
-                    name: 'Router0001S',
-                    ipaddress: '192.168.1.1',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0001B',
-                    ipaddress: '192.168.1.155',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0002',
-                    ipaddress: '192.168.1.13',
-                    state: 'Enabled'
+            actions: {
+              add: {
+                label: 'Add new NetScaler',
+                createForm: {
+                  title: 'Add NetScaler Device',
+                  desc: 'Please enter your NetScaler device\'s information to add it to your network.',
+                  fields: {
+                    name: {
+                      label: 'Name',
+                      validation: { required: true }
+                    },
+                    ipaddress: {
+                      label: 'IP Address',
+                      validation: { required: true }
+                    },
+                    supportedServices: {
+                      label: 'Supported Services',
+                      isBoolean: true,
+                      multiArray: {
+                        serviceA: { label: 'Service A' },
+                        serviceB: { label: 'Service B' },
+                        serviceC: { label: 'Service C' }
+                      }
+                    }
                   }
-                ]
-              });
+                },
+                action: function(args) {
+                  args.response.success();
+                },
+                messages: {
+                  notification: function(args) {
+                    return 'Added new NetScaler';
+                  }
+                },
+                notification: {
+                  poll: testData.notifications.testPoll
+                }
+              }
+            },
+            dataProvider: function(args) {
+              setTimeout(function() {
+                args.response.success({
+                  data: [
+                    {
+                      name: 'Router0001S',
+                      ipaddress: '192.168.1.1',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0001B',
+                      ipaddress: '192.168.1.155',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0002',
+                      ipaddress: '192.168.1.13',
+                      state: 'Enabled'
+                    }
+                  ]
+                });                
+              }, 500);
             }
           },
 
-          // F5
+          // F5 list view
           f5: {
             label: 'F5',
             fields: {
@@ -205,29 +414,31 @@
               state: { label: 'Status' }
             },
             dataProvider: function(args) {
-              args.response.success({
-                data: [
-                  {
-                    name: 'Router0001S',
-                    ipaddress: '192.168.1.1',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0001B',
-                    ipaddress: '192.168.1.155',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0002',
-                    ipaddress: '192.168.1.13',
-                    state: 'Enabled'
-                  }
-                ]
-              });
+              setTimeout(function() {
+                args.response.success({
+                  data: [
+                    {
+                      name: 'Router0001S',
+                      ipaddress: '192.168.1.1',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0001B',
+                      ipaddress: '192.168.1.155',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0002',
+                      ipaddress: '192.168.1.13',
+                      state: 'Enabled'
+                    }
+                  ]
+                });
+              }, 500);
             }
           },
 
-          // SRX
+          // SRX list view
           srx: {
             label: 'SRX',
             fields: {
@@ -236,29 +447,31 @@
               state: { label: 'Status' }
             },
             dataProvider: function(args) {
-              args.response.success({
-                data: [
-                  {
-                    name: 'Router0001S',
-                    ipaddress: '192.168.1.1',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0001B',
-                    ipaddress: '192.168.1.155',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0002',
-                    ipaddress: '192.168.1.13',
-                    state: 'Enabled'
-                  }
-                ]
+              setTimeout(function() {
+                args.response.success({
+                  data: [
+                    {
+                      name: 'Router0001S',
+                      ipaddress: '192.168.1.1',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0001B',
+                      ipaddress: '192.168.1.155',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0002',
+                      ipaddress: '192.168.1.13',
+                      state: 'Enabled'
+                    }
+                  ]
+                });
               });
             }
           },
 
-          // Security groups
+          // Security groups list view
           securityGroups: {
             label: 'Security Groups',
             fields: {
@@ -267,24 +480,26 @@
               state: { label: 'Status' }
             },
             dataProvider: function(args) {
-              args.response.success({
-                data: [
-                  {
-                    name: 'Router0001S',
-                    ipaddress: '192.168.1.1',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0001B',
-                    ipaddress: '192.168.1.155',
-                    state: 'Enabled'
-                  },
-                  {
-                    name: 'Router0002',
-                    ipaddress: '192.168.1.13',
-                    state: 'Enabled'
-                  }
-                ]
+              setTimeout(function() {
+                args.response.success({
+                  data: [
+                    {
+                      name: 'Router0001S',
+                      ipaddress: '192.168.1.1',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0001B',
+                      ipaddress: '192.168.1.155',
+                      state: 'Enabled'
+                    },
+                    {
+                      name: 'Router0002',
+                      ipaddress: '192.168.1.13',
+                      state: 'Enabled'
+                    }
+                  ]
+                });
               });
             }
           }
diff --git a/ui/scripts/ui-custom/zoneChart.js b/ui/scripts/ui-custom/zoneChart.js
index 15d546f5400..aca960b5a83 100644
--- a/ui/scripts/ui-custom/zoneChart.js
+++ b/ui/scripts/ui-custom/zoneChart.js
@@ -34,13 +34,14 @@
           var status = networkStatus[name];
 
           var $item = $('<li>').addClass('provider')
+                .attr('rel', name)
+                .attr('network-status', status)
                 .addClass(name).addClass(status)
                 .appendTo($networkProviders)
                 .append($('<div>').addClass('name').html(type.label))
                 .append($('<div>').addClass('status')
                         .append($('<span>').html(status)))
-                .append($('<div>').addClass('view-all normal').html('View all'))
-                .append($('<div>').addClass('view-all enable').html('Enable'));
+                .append($('<div>').addClass('view-all configure').html('Configure'));
         });
 
         // View all action
@@ -242,6 +243,7 @@
 
                   $browser.cloudBrowser('addPanel', {
                     title: itemID + ' details',
+                    maximizeIfSelected: true,
                     complete: function($newPanel) {
                       $newPanel.detailView(
                          naas.mainNetworks[itemID].detailView
@@ -251,6 +253,69 @@
 
                   return false;
                 });
+
+                // Provider configure event
+                $tabContent.find('li.provider .view-all.configure').click(function() {
+                  var $li = $(this).closest('li');
+                  var itemID = $li.attr('rel');
+                  var status = $li.attr('network-status');
+                  var networkProviderArgs = naas.networkProviders.types[itemID];
+                  var createForm = networkProviderArgs.actions.add.createForm;
+                  var action = networkProviderArgs.actions.add;
+
+                  $browser.cloudBrowser('addPanel', {
+                    title: itemID + ' details',
+                    maximizeIfSelected: true,
+                    complete: function($newPanel) {
+                      if (status == 'disabled') {
+                        // Create form
+                        var formData = cloudStack.dialog.createForm({
+                          form: createForm,
+                          context: { zones: listViewArgs.context.physicalResources },
+                          after: function(args) {
+                            action.action($.extend(args, {
+                              response: {
+                                success: function(args) {
+                                  $('div.notifications').notifications('add', {
+                                    desc: action.messages.notification({}),
+                                    interval: 1000,
+                                    poll: action.notification.poll
+                                  });
+                                  $newPanel.html('').listView({
+                                    listView: naas.networkProviders.types[itemID]
+                                  });
+                                }
+                              }
+                            }));
+                          },
+                          noDialog: true
+                        });
+
+                        var $formContainer = formData.$formContainer;
+                        var $form = $formContainer.find('form');
+                        var completeAction = formData.completeAction;
+
+                        $newPanel.append(
+                          $.merge(
+                            $formContainer,
+                            $('<div>')
+                              .addClass('button submit')
+                              .append($('<span>').html('Add'))
+                              .click(function() {
+                                if ($form.valid()) {
+                                  completeAction($formContainer);
+                                }
+                              })
+                          )
+                        );
+                      } else {
+                        $newPanel.listView({
+                          listView: naas.networkProviders.types[itemID]
+                        });
+                      }
+                    }
+                  });
+                });
               });
 
               $tabMain.tabs();