diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 1a94ddaf2..1a88caf9c 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -240,14 +240,16 @@
             </md-list-item>
           </md-list>
         </md-content>
-        <md-button class="iconButton md-fab md-fab--bottom md-accent hide-sm" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-add"><!--icon--></i></md-button>
+        <md-button class="iconButton md-fab md-fab--bottom md-accent
+                          hide-sm" label:aria-label="New Contact" ng-click="newComponent()"><i class="md-icon-add"><!--icon--></i></md-button>
         <!-- This extra container is used to animate views transitions
              double quotes in ng-animate is not a typo                         -->
         <div id="detailView" class="view-detail"  layout="column">
           <md-card class="viewer" ui-view="card"><!-- card view --></md-card>
         </div>
 
-        <md-button class="iconButton md-fab md-accent show-sm" label:aria-label="New Contact" ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><i class="md-icon-add"><!--icon--></i></md-button>
+        <md-button class="iconButton md-fab md-accent show-sm"
+                   label:aria-label="New Contact" ng-click="newComponent()"><i class="md-icon-add"><!--icon--></i></md-button>
       </div>
 
     </section>
diff --git a/UI/WebServerResources/js/Contacts/card-model.js b/UI/WebServerResources/js/Contacts/card-model.js
index 3eb28095f..a4bf0ac02 100644
--- a/UI/WebServerResources/js/Contacts/card-model.js
+++ b/UI/WebServerResources/js/Contacts/card-model.js
@@ -21,6 +21,8 @@
         this.isNew = true;
       }
 
+      this.refs = [];
+
       if (!this.shortFormat)
         this.shortFormat = this.$shortFormat();
       
diff --git a/UI/WebServerResources/js/ContactsUI.js b/UI/WebServerResources/js/ContactsUI.js
index a444bd3e5..320b51197 100644
--- a/UI/WebServerResources/js/ContactsUI.js
+++ b/UI/WebServerResources/js/ContactsUI.js
@@ -91,7 +91,7 @@
       $urlRouterProvider.otherwise('/personal');
     }])
 
-    .controller('AddressBookCtrl', ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$mdDialog', 'sgFocus', 'sgCard', 'sgAddressBook', 'sgDialog', 'sgSettings', 'stateAddressbooks', 'stateAddressbook', function($state, $scope, $rootScope, $stateParams, $timeout, $modal, focus, Card, AddressBook, Dialog, Settings, stateAddressbooks, stateAddressbook) {
+    .controller('AddressBookCtrl', ['$state', '$scope', '$rootScope', '$stateParams', '$timeout', '$mdDialog', 'sgFocus', 'sgCard', 'sgAddressBook', 'sgDialog', 'sgSettings', 'stateAddressbooks', 'stateAddressbook', function($state, $scope, $rootScope, $stateParams, $timeout, $mdDialog, focus, Card, AddressBook, Dialog, Settings, stateAddressbooks, stateAddressbook) {
       var currentAddressbook;
 
       $scope.activeUser = Settings.activeUser;
@@ -127,6 +127,41 @@
             }
           });
       };
+      $scope.newComponent = function(ev) {
+        $mdDialog.show({
+          parent: angular.element(document.body),
+          targetEvent: ev,
+          clickOutsideToClose: true,
+          escapeToClose: true,
+          template:
+          '<md-dialog aria-label="Create component">' +
+            '  <md-content>' +
+            '  <div layout="column">' +
+            '    <md-button ng-click="createContact()">' +
+            '      Contact' +
+            '    </md-button>' +
+            '    <md-button ng-click="createList()">' +
+            '      List' +
+            '    </md-button>' +
+            '  </div>' +
+            '  </md-content>' +
+            '</md-dialog>',
+          locals: {
+            state: $state
+          },
+          controller: ComponentDialogController
+        });
+        function ComponentDialogController(scope, $mdDialog, state) {
+          scope.createContact = function() {
+            state.go('addressbook.new', { addressbookId: $scope.addressbook.id, contactType: 'card' });
+            $mdDialog.hide();
+          }
+          scope.createList = function() {
+            state.go('addressbook.new', { addressbookId: $scope.addressbook.id, contactType: 'list' });
+            $mdDialog.hide();
+          }
+        }
+      };
       $scope.currentFolderIsConfigurable = function(folder) {
         return ($scope.addressbook && $scope.addressbook.id == folder.id && !folder.isRemote);
       };