diff --git a/Gruntfile.js b/Gruntfile.js
index 679fc20..86006a9 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -54,6 +54,7 @@ module.exports = function(grunt) {
         src: [
           'app/controllers/controller.js',
           'app/controllers/config.controller.js',
+          'app/controllers/config.dialog.controller.js',
           'app/directives/archetypeproperty.js',
           'app/directives/archetypesubmitwatcher.js',
           'app/directives/archetypecustomview.js',
@@ -73,7 +74,7 @@ module.exports = function(grunt) {
     copy: {
       html: {
         cwd: 'app/views/',
-        src: ['archetype.html', 'archetype.default.html', 'archetype.config.html'],
+        src: ['archetype.html', 'archetype.default.html', 'archetype.config.html', 'archetype.config.fieldset.dialog.html', 'archetype.config.stylescript.dialog.html', 'archetype.config.developer.dialog.html'],
         dest: '<%= basePath %>/views',
         expand: true
       },
diff --git a/app/controllers/config.controller.js b/app/controllers/config.controller.js
index 00d5826..24af51e 100644
--- a/app/controllers/config.controller.js
+++ b/app/controllers/config.controller.js
@@ -309,6 +309,19 @@ angular.module("umbraco").controller("Imulus.ArchetypeConfigController", functio
         $scope.model.value.fieldsets = fieldsets;
     }
 
+    $scope.showOptions = function ($event, template) {
+        $event.preventDefault();
+
+        dialogService.open({
+            template: template,
+            show: true,
+            callback: function(data) {
+                $scope.archetypeConfigRenderModel = data;
+            },
+            dialogData: $scope.archetypeConfigRenderModel
+        });
+    }
+
     //archetype css
     assetsService.loadCss("../App_Plugins/Archetype/css/archetype.css");
 });
diff --git a/app/controllers/config.dialog.controller.js b/app/controllers/config.dialog.controller.js
new file mode 100644
index 0000000..cf3009d
--- /dev/null
+++ b/app/controllers/config.dialog.controller.js
@@ -0,0 +1,3 @@
+angular.module('umbraco').controller('ArchetypeConfigOptionsController', function ($scope) {
+	$scope.model = $scope.dialogData;
+});
\ No newline at end of file
diff --git a/app/less/archetype.less b/app/less/archetype.less
index 0835a78..c04ba9f 100644
--- a/app/less/archetype.less
+++ b/app/less/archetype.less
@@ -387,16 +387,24 @@
     }
 
     .archetypeAdvancedOptions {
-        margin-top: 15px;
-        div {
-            margin-bottom: 10px;
-        }
         label {
-            width: 400px;
+            width: 100%;
         }
+
+        input[type=checkbox] {
+            margin-top: 0;
+            margin-right: 2px;
+        }
+
+        small {
+            color: #b3b3b3;
+        }
+
+
         .archetypeFieldsetGroups {
             padding: 0 10px;
             margin-bottom: 20px;
+
             ul {
                 padding: 0;
                 margin: 0;
@@ -447,3 +455,7 @@
     visibility: visible !important;
     background-color:   #d0e7f1 !important;
 }
+
+.archetype-dialog {
+    margin: 10px;
+}
\ No newline at end of file
diff --git a/app/views/archetype.config.developer.dialog.html b/app/views/archetype.config.developer.dialog.html
new file mode 100644
index 0000000..b5623fd
--- /dev/null
+++ b/app/views/archetype.config.developer.dialog.html
@@ -0,0 +1,21 @@
+<div class="umb-dialog archetype-dialog archetypeConfig" ng-controller="ArchetypeConfigOptionsController">
+    <div class="umb-dialog-body" auto-scale="90">
+        <div>
+            <label for="archetypeAdvancedOptionsDeepDatatypeRequest"><archetype-localize key="deepDatatypeRequest">Enable Deep Datatype Requests?</archetype-localize><small><archetype-localize key="deepDatatypeRequestDescription">Allows for easier datatype interception at the cost of caching performance.</archetype-localize></small></label>
+            <input type="checkbox" id="archetypeAdvancedOptionsDeepDatatypeRequest" ng-model="model.enableDeepDatatypeRequests"/>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsDeveloperMode"><archetype-localize key="toggleDeveloperMode">Enable Developer Mode?</archetype-localize><small><archetype-localize key="toggleDeveloperModeDescription">Toggle Developer Mode</archetype-localize></small></label>
+            <input type="checkbox" id="archetypeAdvancedOptionsDeveloperMode" ng-model="model.developerMode"/>
+        </div>
+        <div>
+            <label for="archetypeOverrideDefaultConverter"><archetype-localize key="overrideDefaultConverter">Override Default Property Value Converter?</archetype-localize><small><archetype-localize key="overrideDefaultConverterDescription">Check this if you wish to use your own custom property value converter.</archetype-localize></small></label>
+            <input type="checkbox" id="archetypeOverrideDefaultConverter" ng-model="model.overrideDefaultPropertyValueConverter" />
+        </div>
+
+        <div>
+            <label for="archetypeAdvancedOptionsConfigModel"><archetype-localize key="configModel">Config Model</archetype-localize><small><archetype-localize key="configModelDescription">Be careful editing the text below, it controls the schema for this archetype.</archetype-localize></small></label>
+            <textarea class="archetypeDeveloperModel" id="archetypeAdvancedOptionsConfigModel" ng-model="model"></textarea>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/views/archetype.config.fieldset.dialog.html b/app/views/archetype.config.fieldset.dialog.html
new file mode 100644
index 0000000..3ceca39
--- /dev/null
+++ b/app/views/archetype.config.fieldset.dialog.html
@@ -0,0 +1,51 @@
+<div class="umb-dialog archetype-dialog archetypeConfig" ng-controller="ArchetypeConfigOptionsController">
+    <div class="umb-dialog-body archetypeAdvancedOptions" auto-scale="90">
+        <div>
+            <label for="archetypeAdvancedOptionsStartWithAddButton"><input type="checkbox" id="archetypeAdvancedOptionsStartWithAddButton" ng-model="model.startWithAddButton"/><archetype-localize key="startWithAddButton">Start With Add Button?</archetype-localize><small><archetype-localize key="startWithAddButtonDescription">Empty property shows an add button instead of providing a default fieldset.</archetype-localize></small></label>
+        </div>
+
+        <div>
+            <label for="archetypeAdvancedOptionsHideControls"><input type="checkbox" id="archetypeAdvancedOptionsHideControls" ng-model="model.hideFieldsetControls"/><archetype-localize key="hideFieldsetControls">Hide Fieldset Controls?</archetype-localize><small><archetype-localize key="hideFieldsetControlsDescription">Hides the fieldset add/remove/sort controls.</archetype-localize></small></label>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsHideLabels"><input type="checkbox" id="archetypeAdvancedOptionsHideLabels" ng-model="model.hidePropertyLabels"/><archetype-localize key="hidePropertyLabels">Hide Property Labels?</archetype-localize><small><archetype-localize key="hidePropertyLabelsDescription">Hides the property labels.</archetype-localize></small></label>       
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsMaxFieldsets"><archetype-localize key="maxFieldsets">Max Fieldsets</archetype-localize><small><archetype-localize key="maxFieldsetsDescription">How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</archetype-localize></small></label>
+            <input type="number" id="archetypeAdvancedOptionsMaxFieldsets" class="archetypeMaxFieldsets" ng-model="model.maxFieldsets"/>
+        </div>
+
+        <div>
+            <label for="archetypeAdvancedOptionsCollapsing"><input type="checkbox" id="archetypeAdvancedOptionsCollapsing" ng-model="model.enableCollapsing"/><archetype-localize key="enableCollapsing">Enable Collapsing?</archetype-localize><small><archetype-localize key="enableCollapsingDescription">Enable fieldset collapsing.</archetype-localize></small></label>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsCloning"><input type="checkbox" id="archetypeAdvancedOptionsCloning" ng-model="model.enableCloning"/><archetype-localize key="enableCloning">Enable Cloning?</archetype-localize><small><archetype-localize key="enableCloningDescription">Enable fieldset cloning.</archetype-localize></small></label>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsDisabling"><input type="checkbox" id="archetypeAdvancedOptionsDisabling" ng-model="model.enableDisabling" /><archetype-localize key="enableDisabling">Enable Fieldset Disabling?</archetype-localize><small><archetype-localize key="enableDisablingDescription">Allows fieldsets to be individually enabled/disabled.</archetype-localize></small></label>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsFieldsetToolbar"><input type="checkbox" id="archetypeAdvancedOptionsFieldsetToolbar" ng-model="model.hideFieldsetToolbar"/><archetype-localize key="hideFieldsetToolbar">Hide Fieldset Toolbar?</archetype-localize><small><archetype-localize key="hideFieldsetToolbarDescription">Hides the fieldset toolbar that appears when more than one fieldset model appears.</archetype-localize></small></label>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsMultipleFieldsets"><input type="checkbox" id="archetypeAdvancedOptionsMultipleFieldsets" ng-model="model.enableMultipleFieldsets"/><archetype-localize key="enableMultipleFieldsets">Enable Multiple Fieldsets?</archetype-localize><small><archetype-localize key="enableMultipleFieldsetsDescription">Allows multiple types of fieldsets within this archetype.</archetype-localize></small></label>
+        </div>
+
+        <div class="archetypeFieldsetGroups" ng-show="model.enableMultipleFieldsets">
+            <h4><archetype-localize key="fieldsetGroups">Fieldset groups</archetype-localize></h4>
+            <small><archetype-localize key="fieldsetGroupsDescription">If you have a lot of fieldsets to choose from, you may want to consider grouping them in the fieldset picker. Once you have created your groups here, a group picker will be displayed in the fieldset editor and you can assign your fieldsets to their respective groups.</archetype-localize></p>
+            <ul ui-sortable="sortableOptions" ng-model="model.fieldsetGroups">
+                <li ng-repeat="fieldsetGroup in model.fieldsetGroups">
+                    <div>
+                        <label for="archetypeFieldsetGroupName_{{$index}}"><archetype-localize key="fieldsetGroupName">Name</archetype-localize></label>
+                        <input id="archetypeFieldsetGroupName_{{$index}}" type="text" ng-model="fieldsetGroup.name" />
+                        <i class="icon icon-delete" ng-click="removeFieldsetGroup($index)"></i>
+                        <i class="icon icon-navigation handle" ng-show="model.fieldsetGroups.length > 1"></i>
+                    </div>
+                </li>
+            </ul>
+            <label ng-click="addFieldsetGroup($index)"><i class="icon icon-add"></i> <archetype-localize key="addFieldsetGroup">Add group</archetype-localize></label>
+            <hr/>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/views/archetype.config.html b/app/views/archetype.config.html
index fb5f05b..8ff552f 100644
--- a/app/views/archetype.config.html
+++ b/app/views/archetype.config.html
@@ -83,95 +83,9 @@
 
     <div class="archetypeOptions">
         <div>
-            <label for="archetypeOptionsToggle"><archetype-localize key="toggleAdvanced">Toggle Advanced Options</archetype-localize><small><archetype-localize key="toggleAdvancedDescription">Show advanced options.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeOptionsToggle" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
-        </div>
-    </div>
-
-    <div class="archetypeAdvancedOptions" ng-show="archetypeConfigRenderModel.showAdvancedOptions">
-        <div class="archetypeFieldsetGroups" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
-            <h4><archetype-localize key="fieldsetGroups">Fieldset groups</archetype-localize></h4>
-            <p><archetype-localize key="fieldsetGroupsDescription">If you have a lot of fieldsets to choose from, you may want to consider grouping them in the fieldset picker. Once you have created your groups here, a group picker will be displayed in the fieldset editor and you can assign your fieldsets to their respective groups.</archetype-localize></p>
-            <ul ui-sortable="sortableOptions" ng-model="archetypeConfigRenderModel.fieldsetGroups">
-                <li ng-repeat="fieldsetGroup in archetypeConfigRenderModel.fieldsetGroups">
-                    <div>
-                        <label for="archetypeFieldsetGroupName_{{$index}}"><archetype-localize key="fieldsetGroupName">Name</archetype-localize></label>
-                        <input id="archetypeFieldsetGroupName_{{$index}}" type="text" ng-model="fieldsetGroup.name" />
-                        <i class="icon icon-delete" ng-click="removeFieldsetGroup($index)"></i>
-                        <i class="icon icon-navigation handle" ng-show="archetypeConfigRenderModel.fieldsetGroups.length > 1"></i>
-                    </div>
-                </li>
-            </ul>
-            <label ng-click="addFieldsetGroup($index)"><i class="icon icon-add"></i> <archetype-localize key="addFieldsetGroup">Add group</archetype-localize></label>
-            <hr/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsStartWithAddButton"><archetype-localize key="startWithAddButton">Start With Add Button?</archetype-localize><small><archetype-localize key="startWithAddButtonDescription">Empty property shows an add button instead of providing a default fieldset.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsStartWithAddButton" ng-model="archetypeConfigRenderModel.startWithAddButton"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsHideControls"><archetype-localize key="hideFieldsetControls">Hide Fieldset Controls?</archetype-localize><small><archetype-localize key="hideFieldsetControlsDescription">Hides the fieldset add/remove/sort controls.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsHideControls" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsHideLabels"><archetype-localize key="hidePropertyLabels">Hide Property Labels?</archetype-localize><small><archetype-localize key="hidePropertyLabelsDescription">Hides the property labels.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsHideLabels" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsMaxFieldsets"><archetype-localize key="maxFieldsets">Max Fieldsets</archetype-localize><small><archetype-localize key="maxFieldsetsDescription">How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</archetype-localize></small></label>
-            <input type="number" id="archetypeAdvancedOptionsMaxFieldsets" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsMultipleFieldsets"><archetype-localize key="enableMultipleFieldsets">Enable Multiple Fieldsets?</archetype-localize><small><archetype-localize key="enableMultipleFieldsetsDescription">Allows multiple types of fieldsets within this archetype.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsMultipleFieldsets" ng-model="archetypeConfigRenderModel.enableMultipleFieldsets"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsCollapsing"><archetype-localize key="enableCollapsing">Enable Collapsing?</archetype-localize><small><archetype-localize key="enableCollapsingDescription">Enable fieldset collapsing.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsCollapsing" ng-model="archetypeConfigRenderModel.enableCollapsing"/>
-        </div>
-                <div>
-            <label for="archetypeAdvancedOptionsCloning"><archetype-localize key="enableCloning">Enable Cloning?</archetype-localize><small><archetype-localize key="enableCloningDescription">Enable fieldset cloning.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsCloning" ng-model="archetypeConfigRenderModel.enableCloning"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsDisabling"><archetype-localize key="enableDisabling">Enable Fieldset Disabling?</archetype-localize><small><archetype-localize key="enableDisablingDescription">Allows fieldsets to be individually enabled/disabled.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsDisabling" ng-model="archetypeConfigRenderModel.enableDisabling" />
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsFieldsetToolbar"><archetype-localize key="hideFieldsetToolbar">Hide Fieldset Toolbar?</archetype-localize><small><archetype-localize key="hideFieldsetToolbarDescription">Hides the fieldset toolbar that appears when more than one fieldset model appears.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsFieldsetToolbar" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsCustomClass"><archetype-localize key="customWrapperClass">Custom Wrapper Class</archetype-localize><small><archetype-localize key="customWrapperClassDescription">(Optional) Enter a custom CSS class that will be applied to the wrapper div.</archetype-localize></small></label>
-            <input type="text" id="archetypeAdvancedOptionsCustomClass" ng-model="archetypeConfigRenderModel.customCssClass"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsCustomCss"><archetype-localize key="cssFile">CSS File</archetype-localize><small><archetype-localize key="cssFileDescription">(Optional) Enter a path for a custom CSS file to be included on the page.</archetype-localize></small></label>
-            <input type="text" id="archetypeAdvancedOptionsCustomCss" ng-model="archetypeConfigRenderModel.customCssPath"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsCustomJs"><archetype-localize key="jsFile">JS File</archetype-localize><small><archetype-localize key="jsFileDescription">(Optional) Enter a path for a custom JS file to be included on the page.</archetype-localize></small></label>
-            <input type="text" id="archetypeAdvancedOptionsCustomJs" ng-model="archetypeConfigRenderModel.customJsPath"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsCustomView"><archetype-localize key="viewFile">View File</archetype-localize><small><archetype-localize key="viewFileDescription">(Optional) Enter a path for a custom view file to be used to render this Archetype.</archetype-localize></small></label>
-            <input type="text" id="archetypeAdvancedOptionsCustomView" ng-model="archetypeConfigRenderModel.customViewPath"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsDeepDatatypeRequest"><archetype-localize key="deepDatatypeRequest">Enable Deep Datatype Requests?</archetype-localize><small><archetype-localize key="deepDatatypeRequestDescription">Allows for easier datatype interception at the cost of caching performance.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsDeepDatatypeRequest" ng-model="archetypeConfigRenderModel.enableDeepDatatypeRequests"/>
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsDeveloperMode"><archetype-localize key="toggleDeveloperMode">Enable Developer Mode?</archetype-localize><small><archetype-localize key="toggleDeveloperModeDescription">Toggle Developer Mode</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeAdvancedOptionsDeveloperMode" ng-model="archetypeConfigRenderModel.developerMode"/>
-        </div>
-        <div>
-            <label for="archetypeOverrideDefaultConverter"><archetype-localize key="overrideDefaultConverter">Override Default Property Value Converter?</archetype-localize><small><archetype-localize key="overrideDefaultConverterDescription">Check this if you wish to use your own custom property value converter.</archetype-localize></small></label>
-            <input type="checkbox" id="archetypeOverrideDefaultConverter" ng-model="archetypeConfigRenderModel.overrideDefaultPropertyValueConverter" />
-        </div>
-        <div>
-            <label for="archetypeAdvancedOptionsConfigModel"><archetype-localize key="configModel">Config Model</archetype-localize><small><archetype-localize key="configModelDescription">Be careful editing the text below, it controls the schema for this archetype.</archetype-localize></small></label>
-            <textarea class="archetypeDeveloperModel" id="archetypeAdvancedOptionsConfigModel" ng-model="archetypeConfigRenderModel"></textarea>
+            <button class="btn btn-default" ng-click="showOptions($event, '../App_Plugins/archetype/views/archetype.config.fieldset.dialog.html')">Fieldset Options</button>
+            <button class="btn btn-default" ng-click="showOptions($event, '../App_Plugins/archetype/views/archetype.config.stylescript.dialog.html')">Custom Style/Script Options</button>
+            <button class="btn btn-default" ng-click="showOptions($event, '../App_Plugins/archetype/views/archetype.config.developer.dialog.html')">Developer Options</button>
         </div>
     </div>
 </div>
diff --git a/app/views/archetype.config.stylescript.dialog.html b/app/views/archetype.config.stylescript.dialog.html
new file mode 100644
index 0000000..481a1f7
--- /dev/null
+++ b/app/views/archetype.config.stylescript.dialog.html
@@ -0,0 +1,20 @@
+<div class="umb-dialog archetype-dialog archetypeConfig" ng-controller="ArchetypeConfigOptionsController">
+    <div class="umb-dialog-body" auto-scale="90">
+        <div>
+            <label for="archetypeAdvancedOptionsCustomClass"><archetype-localize key="customWrapperClass">Custom Wrapper Class</archetype-localize><small><archetype-localize key="customWrapperClassDescription">(Optional) Enter a custom CSS class that will be applied to the wrapper div.</archetype-localize></small></label>
+            <input type="text" id="archetypeAdvancedOptionsCustomClass" ng-model="model.customCssClass"/>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsCustomCss"><archetype-localize key="cssFile">CSS File</archetype-localize><small><archetype-localize key="cssFileDescription">(Optional) Enter a path for a custom CSS file to be included on the page.</archetype-localize></small></label>
+            <input type="text" id="archetypeAdvancedOptionsCustomCss" ng-model="model.customCssPath"/>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsCustomJs"><archetype-localize key="jsFile">JS File</archetype-localize><small><archetype-localize key="jsFileDescription">(Optional) Enter a path for a custom JS file to be included on the page.</archetype-localize></small></label>
+            <input type="text" id="archetypeAdvancedOptionsCustomJs" ng-model="model.customJsPath"/>
+        </div>
+        <div>
+            <label for="archetypeAdvancedOptionsCustomView"><archetype-localize key="viewFile">View File</archetype-localize><small><archetype-localize key="viewFileDescription">(Optional) Enter a path for a custom view file to be used to render this Archetype.</archetype-localize></small></label>
+            <input type="text" id="archetypeAdvancedOptionsCustomView" ng-model="model.customViewPath"/>
+        </div>
+    </div>
+</div>
\ No newline at end of file