diff --git a/app/controllers/controller.js b/app/controllers/controller.js
index 09c23d6..9ac562c 100644
--- a/app/controllers/controller.js
+++ b/app/controllers/controller.js
@@ -15,6 +15,11 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
     // store the umbraco property alias to help generate unique IDs.  Hopefully there's a better way to get this in the future :)
     $scope.umbracoHostPropertyAlias = $scope.$parent.$parent.model.alias;
 
+    $scope.overlayMenu = {
+        show: false,
+        style: {}
+    };
+
     init();
 
     //hold references to helper resources 
@@ -74,6 +79,54 @@ angular.module("umbraco").controller("Imulus.ArchetypeController", function ($sc
     };
 
     //handles a fieldset add
+    $scope.openFieldsetPicker = function ($index, event) {
+        if ($scope.canAdd() == false) {
+            return;
+        }
+
+        $scope.overlayMenu.fieldsets = [];
+        _.each($scope.model.config.fieldsets, function (fieldset) {
+            var icon = fieldset.icon;
+            $scope.overlayMenu.fieldsets.push({
+                alias: fieldset.alias,
+                label: fieldset.label,
+                icon: (fieldset.icon || "icon-document-dashed-line") // default icon if none is chosen
+            });
+            $scope.overlayMenu.index = $index;
+        });
+
+        // sanity check
+        if ($scope.overlayMenu.fieldsets.length == 0) {
+            return;
+        }
+        if ($scope.overlayMenu.fieldsets.length == 1) {
+            // only one fieldset type - no need to display the picker
+            $scope.addRow($scope.overlayMenu.fieldsets[0].alias, $index);
+            return;
+        }
+
+        // calculate overlay position
+        // - yeah... it's jQuery (ungh!) but that's how the Grid does it.
+        var offset = $(event.target).offset();
+        var scrollTop = $(event.target).closest(".umb-panel-body").scrollTop();
+        if (offset.top < 400) {
+            $scope.overlayMenu.style.top = 300 + scrollTop;
+        }
+        else {
+            $scope.overlayMenu.style.top = offset.top - 150 + scrollTop;
+        }
+        $scope.overlayMenu.show = true;
+    };
+
+    $scope.closeFieldsetPicker = function () {
+        $scope.overlayMenu.show = false;
+    };
+    
+    $scope.pickFieldset = function (fieldsetAlias, $index) {
+        $scope.closeFieldsetPicker();
+        $scope.addRow(fieldsetAlias, $index);
+    };    
+    
     $scope.addRow = function (fieldsetAlias, $index) {
         if ($scope.canAdd()) {
             if ($scope.model.config.fieldsets) {
diff --git a/app/less/archetype.less b/app/less/archetype.less
index 315bed0..fc8a9aa 100644
--- a/app/less/archetype.less
+++ b/app/less/archetype.less
@@ -70,7 +70,7 @@
             min-height: 42px;
 
             .label-sub {
-                padding: 8px 0 4px 0;
+                padding: 10px 0 4px 0;
                 display: inline-block;
                 &.module-label {
                     width: 100%;
@@ -134,7 +134,9 @@
                     text-overflow: ellipsis;
                 }
                 &.dimmed {
-                    color: #d9d9d9;
+                    i, span {
+                        color: #d9d9d9 !important;
+                    }
                 }
             }
 
@@ -225,6 +227,10 @@
             color: #343434;
         }
     }
+
+    .fieldsetPicker .icon {
+        color: #333;
+    }
 }
 
 .archetypeEditor, .archetypeConfig {
diff --git a/app/views/archetype.default.html b/app/views/archetype.default.html
index 2a53e1f..72d021d 100644
--- a/app/views/archetype.default.html
+++ b/app/views/archetype.default.html
@@ -13,18 +13,10 @@
                         </label>
                     </div>
                     <div class="archetypeEditorControls label-sub" ng-hide="model.config.hideFieldsetControls">
-                        <i class="icon icon-add dropdown-toggle" ng-show="canAdd()" data-toggle="{{ model.config.fieldsets.length > 1 ? 'dropdown' : ''}}" ng-click="model.config.fieldsets.length == 1 ? addRow(fieldset.alias, $index) : return"></i>
-                        <ul class="dropdown-menu umb-actions">
-                            <li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias, $parent.$index)">
-                                <a>
-                                    <i class="fieldsetIcon icon ng-class:fieldsetModel.icon"></i>
-                                    <span class="menu-label">{{fieldsetModel.label}}</span>
-                                </a>
-                            </li>
-                        </ul>
+                        <i class="icon icon-add dropdown-toggle" ng-show="canAdd()" ng-click="openFieldsetPicker($index, $event)"></i>
                         <i class="icon icon-navigation handle" ng-show="canSort()"></i>
                         <i class="icon icon-documents" ng-click="cloneRow($index)" ng-show="canClone()"></i>
-                        <i class="icon icon-power" ng-class="{dimmed: fieldset.disabled}" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
+                        <i class="icon icon-power" ng-click="enableDisable(fieldset)" ng-show="canDisable()"></i>
                         <i class="icon icon-delete" ng-click="removeRow($index)" ng-show="canRemove()"></i>
                     </div>
                 </div>
@@ -49,17 +41,24 @@
         </li>
     </ul>
     <div ng-show="showAddButton()">
-        <a class="archetypeAddButton" data-toggle="{{ model.config.fieldsets.length > 1 ? 'dropdown' : ''}}" ng-click="model.config.fieldsets.length == 1 ? addRow(model.config.fieldsets[0].alias, 0) : return" prevent-default>
+        <a class="archetypeAddButton" ng-click="openFieldsetPicker(0, $event)" prevent-default>
             <i class="icon icon-add dropdown-toggle"></i>
-            <localize key="general_add" class="archetypeAddButtonText">Add</localize>
+            <archetype-localize key="addFieldset">Add an item</archetype-localize>
         </a>
-        <ul class="dropdown-menu umb-actions">
-            <li ng-repeat="fieldsetModel in model.config.fieldsets" ng-click="addRow(fieldsetModel.alias, 0)">
-                <a>
-                    <i class="fieldsetIcon icon ng-class:fieldsetModel.icon"></i>
-                    <span class="menu-label">{{fieldsetModel.label}}</span>
-                </a>
-            </li>
-        </ul>
+    </div>
+    <div class="usky-grid fieldsetPicker" ng-if="overlayMenu.show">
+        <div class="cell-tools-menu" ng-style="overlayMenu.style" delayed-mouseleave="closeFieldsetPicker()">
+            <h5>
+                <archetype-localize key="addFieldset">Add an item</archetype-localize>
+            </h5>
+            <ul class="elements">
+                <li ng-repeat="fieldset in overlayMenu.fieldsets">
+                    <a ng-click="pickFieldset(fieldset.alias, overlayMenu.index)" href>
+                        <i class="icon {{fieldset.icon}}"></i>
+                        {{fieldset.label}}
+                    </a>
+                </li>
+            </ul>
+        </div>
     </div>
 </div>