diff --git a/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/css/innercontent.css b/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/css/innercontent.css
index 5fe1ff7..7a02751 100644
--- a/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/css/innercontent.css
+++ b/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/css/innercontent.css
@@ -1,27 +1,23 @@
 /* Inner Content - Doc Type Picker */
 
-.inner-content__doctypepicker table input,
-.inner-content__doctypepicker table select {
-    width: 100%;
-    padding-right: 0;
+.inner-content__doctypepicker .inner-content__help-container {
+    text-align: right;
+    margin-bottom: .5em;
 }
 
-.inner-content__doctypepicker table td.icon-navigation,
 .inner-content__doctypepicker i.inner-content__help-icon {
     vertical-align: middle;
     color: #CCC;
 }
 
-.inner-content__doctypepicker table td.icon-navigation:hover,
-.inner-content__doctypepicker i.inner-content__help-icon:hover {
-    color: #343434;
-}
+    .inner-content__doctypepicker i.inner-content__help-icon:hover {
+        color: #343434;
+    }
 
-.inner-content__doctypepicker table .td-min {
-    width: 1px;
+.inner-content__doctypepicker .list-view-layout__system {
+    width: 100%;
 }
 
-
 /* Inner Content - Content Overlay Panel */
 
 .inner-content-overlay > .umb-overlay-right > .umb-overlay__form > .umb-overlay-container {
diff --git a/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/js/innercontent.js b/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/js/innercontent.js
index 62d7661..1837c08 100644
--- a/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/js/innercontent.js
+++ b/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/js/innercontent.js
@@ -1,4 +1,4 @@
-// Prevalue Editors
+// Prevalue Editors
 angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTypePickerController", [
 
     "$scope",
@@ -7,10 +7,17 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
     function ($scope, innerContentService) {
 
         var vm = this;
+        vm.docTypes = [];
+        vm.selectedDocTypes = [];
+        vm.selectedItems = [];
         vm.add = add;
         vm.remove = remove;
         vm.tooltipMouseOver = tooltipMouseOver;
         vm.tooltipMouseLeave = tooltipMouseLeave;
+        vm.getContentType = getContentType;
+        vm.openDocTypePicker = openDocTypePicker;
+        vm.showPrompt = showPrompt;
+        vm.hidePrompt = hidePrompt;
 
         vm.sortableOptions = {
             axis: "y",
@@ -33,23 +40,35 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
 
         innerContentService.getAllContentTypes().then(function (docTypes) {
             vm.docTypes = docTypes;
+            initSelectedItems();
+            updateSelectedDocTypes();
+
+            $scope.$watch('vm.selectedItems', _.debounce(function (newVal, oldVal) {
+                if (newVal !== oldVal) {
+                    updateModel();
+                }
+            }, 300), true);
         });
 
         if (!$scope.model.value) {
             $scope.model.value = [];
-            add();
         }
 
         function add() {
-            $scope.model.value.push({
-                icContentTypeGuid: "",
-                nameTemplate: ""
-            });
+            var newItem = {
+                guid: "",
+                nameTemplate: "",
+                icon: "",
+                name: "",
+                alias: ""
+            };
+            openDocTypePicker(newItem, true);
             setDirty();
         };
 
         function remove(index) {
-            $scope.model.value.splice(index, 1);
+            vm.selectedItems.splice(index, 1);
+            updateSelectedDocTypes();
             setDirty();
         };
 
@@ -69,6 +88,76 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
             };
         };
 
+        function initSelectedItems() {
+            vm.selectedItems = _.map($scope.model.value, function (i) {
+                var docType = getContentType(i.icContentTypeGuid);
+
+                return {
+                    guid: i.icContentTypeGuid,
+                    nameTemplate: i.nameTemplate,
+                    icon: docType.icon,
+                    name: docType.name,
+                    alias: docType.alias
+                };
+            });
+        }
+
+        function updateSelectedDocTypes() {
+            vm.selectedDocTypes = _.filter(vm.docTypes, function (i) {
+                var match = _.find(vm.selectedItems, function (c) {
+                    return c.guid === i.guid;
+                });
+
+                return match !== undefined;
+            });
+        };
+
+        function updateModel() {
+            $scope.model.value = _.map(vm.selectedItems, function (i) {
+                return {
+                    icContentTypeGuid: i.guid,
+                    nameTemplate: i.nameTemplate
+                };
+            });
+        }
+
+        function getContentType(guid) {
+            return _.find(vm.docTypes, function (d) {
+                return d.guid === guid;
+            });
+        };
+
+        function openDocTypePicker(item, isNew) {
+            vm.docTypePicker = {
+                view: "itempicker",
+                availableItems: vm.docTypes,
+                selectedItems: vm.selectedDocTypes,
+                show: true,
+                submit: function (model) {
+                    item.guid = model.selectedItem.guid;
+                    item.icon = model.selectedItem.icon;
+                    item.name = model.selectedItem.name;
+                    item.alias = model.selectedItem.alias;
+
+                    if (isNew === true) {
+                        vm.selectedItems.push(item);
+                    }
+
+                    updateSelectedDocTypes();
+                    vm.docTypePicker.show = false;
+                    vm.docTypePicker = null;
+                }
+            };
+        };
+
+        function showPrompt(item) {
+            item.promptIsVisible = true;
+        };
+
+        function hidePrompt(item) {
+            delete item.promptIsVisible;
+        };
+
         function setDirty() {
             if ($scope.propertyForm) {
                 $scope.propertyForm.$setDirty();
diff --git a/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/views/innercontent.doctypepicker.html b/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/views/innercontent.doctypepicker.html
index 8c4fd03..6f8409b 100644
--- a/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/views/innercontent.doctypepicker.html
+++ b/src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/views/innercontent.doctypepicker.html
@@ -1,42 +1,43 @@
 <div class="inner-content__doctypepicker" ng-controller="Our.Umbraco.InnerContent.Controllers.DocTypePickerController as vm">
-    <div>
-        <table class="table table-striped">
-            <thead>
-                <tr>
-                    <th class="td-min" />
-                    <th>
-                        Document Type
-                    </th>
-                    <th>
-                        Name Template
-                        <i class="icon icon-help-alt inner-content__help-icon"
-                           data-tooltip="Enter an angularjs expression to evaluate against each item for its name."
-                           ng-mouseover="vm.tooltipMouseOver($event)"
-                           ng-mouseleave="vm.tooltipMouseLeave()"></i>
-                    </th>
-                    <th class="td-min" ng-show="model.value.length > 1" />
-                </tr>
-            </thead>
-            <tbody ui-sortable="vm.sortableOptions" ng-model="model.value">
-                <tr ng-repeat="config in model.value">
-                    <td class="icon icon-navigation"></td>
-                    <td>
-                        <select ng-options="dt.guid as dt.name for dt in vm.docTypes"
-                                ng-model="config.icContentTypeGuid" required></select>
-                    </td>
-                    <td>
-                        <input type="text" ng-model="config.nameTemplate" />
-                    </td>
-                    <td ng-show="model.value.length > 1">
-                        <a class="btn btn-danger" ng-click="vm.remove($index)">Remove</a>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <div>
-            <a href="" class="btn" ng-click="vm.add()">Add</a>
+    <div class="inner-content__help-container">
+        <i class="icon icon-help-alt inner-content__help-icon"
+           data-tooltip="Name Template: Enter an angularjs expression to evaluate against each item for its name."
+           ng-mouseover="vm.tooltipMouseOver($event)"
+           ng-mouseleave="vm.tooltipMouseLeave()"></i>
+    </div>
+    <div class="list-view-layouts" ui-sortable="vm.sortableOptions" ng-model="vm.selectedItems">
+        <div class="list-view-layout" ng-repeat="item in vm.selectedItems">
+            <i class="icon-navigation list-view-layout__sort-handle"></i>
+            <div>
+                <a href="" ng-click="vm.openDocTypePicker(item)" class="list-view-layout__icon">
+                    <i class="{{ item.icon ||  'icon-stop' }}"></i>
+                </a>
+            </div>
+            <div class="list-view-layout__name">
+                <span class="list-view-layout__name-text">{{ item.name || 'Name' }}</span>
+                <span class="list-view-layout__system">({{ item.alias || 'alias' }})</span>
+            </div>
+            <div class="list-view-layout__path">
+                <input type="text" ng-model="item.nameTemplate" placeholder="name template..." class="-full-width-input" />
+            </div>
+            <div>
+                <div class="list-view-layout__remove">
+                    <i class="icon-trash" ng-click="vm.showPrompt(item)"></i>
+                    <umb-confirm-action ng-if="item.promptIsVisible"
+                                        direction="left"
+                                        on-confirm="vm.remove($index)"
+                                        on-cancel="vm.hidePrompt(item)">
+                    </umb-confirm-action>
+                </div>
+            </div>
         </div>
+        <a href="" class="list-view-add-layout" ng-click="vm.add()">Add Content Type</a>
     </div>
+    <umb-overlay ng-if="vm.docTypePicker.show"
+                 model="vm.docTypePicker"
+                 view="vm.docTypePicker.view"
+                 position="right">
+    </umb-overlay>
     <umb-tooltip ng-if="vm.tooltip.show" event="vm.tooltip.event">
         {{vm.tooltip.content}}
     </umb-tooltip>