diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 6b981c74170..4d5ba36965a 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -2598,7 +2598,6 @@ Dialogs*/
 /*** Create form*/
 .ui-dialog div.form-container {
   height: 106px;
-  width: 100%;
   text-align: left;
   display: inline-block;
 }
@@ -2610,6 +2609,7 @@ Dialogs*/
 }
 
 .ui-dialog div.form-container div.form-item {
+  width: 100%;
   display: inline-block;
   margin: 0 0 12px;
 }
@@ -2637,15 +2637,14 @@ Dialogs*/
 }
 
 .ui-dialog div.form-container div.value {
-  width: 232px;
-  overflow: hidden;
-  float: right;
+  width: 61%;
+  float: left;
   margin: 0 0 0 15px;
   display: inline-block;
 }
 
 .ui-dialog div.form-container div.value input {
-  width: 226px;
+  width: 98%;
   font-size: 14px;
   background: #F6F6F6;
   /*+border-radius:4px;*/
@@ -2663,7 +2662,7 @@ Dialogs*/
 }
 
 .ui-dialog div.form-container div.value select {
-  width: 231px;
+  width: 100%;
   float: right;
 }
 
@@ -2741,6 +2740,44 @@ Dialogs*/
   border-color: #878787;
 }
 
+/**** Dynamic input*/
+.ui-dialog div.form-container div.value .dynamic-input {
+  background: #FFFFFF;
+  width: 98%;
+  min-height: 50px;
+  clear: both;
+  max-height: 211px;
+  overflow: auto;
+  border: 1px solid #CDCDCD;
+  /*+border-radius:6px;*/
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  -khtml-border-radius: 6px;
+  border-radius: 6px 6px 6px 6px;
+  /*+box-shadow:inset -1px 1px 1px #636363;*/
+  -moz-box-shadow: inset -1px 1px 1px #636363;
+  -webkit-box-shadow: inset -1px 1px 1px #636363;
+  -o-box-shadow: inset -1px 1px 1px #636363;
+  box-shadow: inset -1px 1px 1px #636363;
+}
+
+.ui-dialog div.form-container div.value .dynamic-input .form-item {
+  width: 97%;
+  margin: 4px 0 0 5px;
+}
+
+.ui-dialog div.form-container div.value .dynamic-input .name {
+  width: 86px;
+}
+
+.ui-dialog div.form-container div.value .dynamic-input .name label {
+  width: inherit;
+}
+
+.ui-dialog div.form-container div.value .dynamic-input .value {
+  width: 50%;
+}
+
 /*User options*/
 #user-options {
   width: 115px;
diff --git a/ui/scripts-test/configuration.js b/ui/scripts-test/configuration.js
index 9922c4821b1..67f56e62616 100644
--- a/ui/scripts-test/configuration.js
+++ b/ui/scripts-test/configuration.js
@@ -1,4 +1,4 @@
-(function(cloudStack, testData) {
+(function(cloudStack, testData, $) {
   cloudStack.sections.configuration = {
     title: 'Configuration',
     id: 'configuration',
@@ -72,7 +72,7 @@
             setTimeout(function() {
               args.response.success({
                 data: testData.data.serviceOfferings
-              });              
+              });
             });
           }
         }
@@ -144,7 +144,7 @@
             setTimeout(function() {
               args.response.success({
                 data: testData.data.systemServiceOfferings
-              });              
+              });
             });
           }
         }
@@ -250,6 +250,135 @@
             networkrate: { label: 'Network Rate' },
             traffictype: { label: 'Traffic Type'}
           },
+
+          actions: {
+            add: {
+              label: 'Add network offering',
+
+              action: function(args) {
+                setTimeout(function() {
+                  args.response.success();
+                }, 200);
+              },
+
+              createForm: {
+                title: 'Add network offering',
+                desc: 'Please specify the network offering',
+                fields: {
+                  name: { label: 'Name', validation: { required: true } },
+
+                  displayText: { label: 'Display Text', validation: { required: true } },
+
+                  maxConnections: { label: 'Max Connections' },
+
+                  networkRate: { label: 'Network Rate' },
+
+                  trafficType: {
+                    label: 'Traffic Type', validation: { required: true },
+                    select: function(args) {
+                      args.response.success({
+                        data: [
+                          { id: 'GUEST', description: 'Guest' }
+                        ]
+                      });
+                    }
+                  },
+
+                  guestType: {
+                    label: 'Guest Type',
+                    select: function(args) {
+                      args.response.success({
+                        data: [
+                          { id: 'Isolated', description: 'Isolated' },
+                          { id: 'Shared', description: 'Shared' }
+                        ]
+                      });
+                    }
+                  },
+
+                  availability: {
+                    label: 'Availability',
+                    select: function(args) {
+                      args.response.success({
+                        data: [
+                          { id: 'Required', description: 'Required' },
+                          { id: 'Optional', description: 'Optional' },
+                          { id: 'Unavailable', description: 'Unavailable' }
+                        ]
+                      });
+                    }
+                  },
+
+                  serviceOfferingId: {
+                    label: 'Service Offering',
+                    select: function(args) {
+                      args.response.success({
+                        data: $.map(testData.data.serviceOfferings, function(elem) {
+                          return {
+                            id: elem.id,
+                            description: elem.name
+                          };
+                        })
+                      });
+                    }
+                  },
+
+                  specifyVlan: { label: 'Specify VLAN', isBoolean: true },
+
+                  vlanId: { label: 'VLAN ID', isHidden: true, dependsOn: 'specifyVlan'},
+
+                  supportedServices: { 
+                    label: 'Supported Services',
+
+                    dynamic: function(args) {
+                      setTimeout(function() {
+                        var fields = {};
+                        var services = ['Vpn', 'Dhcp', 'Gateway', 'Firewall', 'Lb', 'UserData', 'SourceNat', 'StaticNat', 'PortForwarding', 'SecurityGroup'];
+
+                        $(services).each(function() {
+                          var id = {
+                            isEnabled: this + '.' + 'isEnabled',
+                            capabilities: this + '.' + 'capabilities',
+                            provider: this + '.' + 'provider'
+                          };
+
+                          fields[id.isEnabled] = { label: this, isBoolean: true };
+                          fields[id.provider] = { 
+                            label: this + ' Provider',
+                            isHidden: true,
+                            dependsOn: id.isEnabled,
+                            select: function(args) {
+                              args.response.success({
+                                data: [
+                                  { id: 'NetScaler', description: 'NetScaler'},
+                                  { id: 'SRX', description: 'SRX' }
+                                ]
+                              });
+                            }
+                          };
+                        });
+
+                        args.response.success({
+                          fields: fields
+                        });
+                      }, 50);
+                    }
+                  },
+
+                  tags: { label: 'Tags' }
+                }
+              },
+              
+              notification: {
+                poll: testData.notifications.testPoll
+              },
+              messages: {
+                notification: function(args) {
+                  return 'Added network offering';
+                }
+              }
+            }
+          },
           dataProvider: function(args) {
             setTimeout(function() {
               args.response.success({
@@ -261,4 +390,4 @@
       }
     }
   };
-})(cloudStack, testData);
+})(cloudStack, testData, jQuery);
diff --git a/ui/scripts/ui-custom/zoneChart.js b/ui/scripts/ui-custom/zoneChart.js
index 1c445d77134..487de353428 100644
--- a/ui/scripts/ui-custom/zoneChart.js
+++ b/ui/scripts/ui-custom/zoneChart.js
@@ -247,6 +247,7 @@
                     complete: function($newPanel) {
                       $newPanel.detailView(
                         $.extend(true, {}, naas.mainNetworks[itemID].detailView, {
+                          $browser: listViewArgs.$browser,
                           context: { zones: context.physicalResources }
                         })
                       );
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index c2b1f99e521..33e4f043541 100644
--- a/ui/scripts/ui/dialog.js
+++ b/ui/scripts/ui/dialog.js
@@ -44,7 +44,7 @@
             // Checkbox
             $dependsOn.bind('click', function(event) {
               var $target = $(this);
-              var $dependent = $form.find('[depends-on=' + dependsOn + ']');
+              var $dependent = $target.closest('form').find('[depends-on=\'' + dependsOn + '\']');
 
               if (($target.is(':checked') && !isReverse) ||
                   ($target.is(':unchecked') && isReverse)) {
@@ -102,6 +102,7 @@
               }
             }
           };
+
           selectFn = this.select;
           $input = $('<select>')
             .attr({ name: key })
@@ -114,9 +115,10 @@
           $.extend(selectArgs, { $select: $input });
 
           if (dependsOn) {
-            $dependsOn = $form.find('input, select').filter(function() {
+            $dependsOn = $input.closest('form').find('input, select').filter(function() {
               return $(this).attr('name') === dependsOn;
             });
+
             $dependsOn.bind('change', function(event) {
               var $target = $(this);
 
@@ -166,6 +168,30 @@
               $input.attr('checked', 'checked');
             }
           }
+        } else if (this.dynamic) {
+          // Generate a 'sub-create-form' -- append resulting fields
+          $input = $('<div>').addClass('dynamic-input').appendTo($value);
+          $form.hide();
+
+          this.dynamic({
+            response: {
+              success: function(args) {
+                var form = cloudStack.dialog.createForm({
+                  noDialog: true,
+                  form: {
+                    title: '',
+                    fields: args.fields
+                  }
+                });
+
+                var $fields = form.$formContainer.find('.form-item').appendTo($input);
+                $form.show();
+
+                // Form should be slightly wider
+                $form.closest(':ui-dialog').dialog('option', { position: 'center' });
+              }
+            }
+          });
         } else {
           $input = $('<input>').attr({
             name: key,