diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index f6490fc79b..c99d032143 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -132,6 +132,7 @@
 @import "components/umb-content-grid.less";
 @import "components/umb-contextmenu.less";
 @import "components/umb-layout-selector.less";
+@import "components/umb-mini-search.less";
 @import "components/tooltip/umb-tooltip.less";
 @import "components/tooltip/umb-tooltip-list.less";
 @import "components/overlays/umb-overlay-backdrop.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/buttons.less b/src/Umbraco.Web.UI.Client/src/less/buttons.less
index 85532f4231..df81d7df44 100644
--- a/src/Umbraco.Web.UI.Client/src/less/buttons.less
+++ b/src/Umbraco.Web.UI.Client/src/less/buttons.less
@@ -261,10 +261,11 @@ input[type="button"] {
 .btn-outline {
   border: 1px solid;
   border-color: @gray-7;
-  background: @white;
+  background: transparent;
   color: @blueExtraDark;
   padding: 5px 13px;
-  transition: all .2s linear;
+  transition: border-color .12s linear, color .12s linear;
+  font-weight: 600;
 }
 
 .btn-outline:hover,
@@ -272,7 +273,8 @@ input[type="button"] {
 .btn-outline:active {
   border-color: @ui-light-type-hover;
   color: @ui-light-type-hover;
-  background: @white;
+  background: transparent;
+  transition: border-color .12s linear, color .12s linear;
 }
 
 // Cross-browser Jank
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
index 9ebd6d6e5d..c0ac89622d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-layout-selector.less
@@ -6,7 +6,8 @@
 .umb-layout-selector__active-layout {
    background: transparent;
    box-sizing: border-box;
-   border: 1px solid @inputBorder;
+   border: 1px solid @ui-action-discreet-border;
+   color: @ui-action-discreet-type;
    cursor: pointer;
    height: 30px;
    width: 30px;
@@ -17,7 +18,8 @@
 }
 
 .umb-layout-selector__active-layout:hover {
-   border-color: @inputBorderFocus;
+   border-color: @ui-action-discreet-border-hover;
+   color: @ui-action-discreet-type-hover;
 }
 
 .umb-layout-selector__dropdown {
@@ -31,6 +33,7 @@
    flex-direction: column;
    transform: translate(-50%,0);
    left: 50%;
+   border-radius: 3px;
 }
 
 .umb-layout-selector__dropdown-item {
@@ -46,11 +49,11 @@
 }
 
 .umb-layout-selector__dropdown-item:hover {
-   border: 1px solid @gray-8;
+   border: 1px solid @ui-action-discreet-border;
 }
 
 .umb-layout-selector__dropdown-item.-active {
-   border: 1px solid @blue;
+   border: 1px solid @ui-action-discreet-border-hover;
 }
 
 .umb-layout-selector__dropdown-item-icon,
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
new file mode 100644
index 0000000000..ac15b3dcf8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-mini-search.less
@@ -0,0 +1,44 @@
+.umb-mini-search {
+    position: relative;
+    display: block;
+
+    .icon {
+        position: absolute;
+        padding: 5px 8px;
+        pointer-events: none;
+        top: 2px;
+        color: @ui-action-discreet-type;
+        transition: color .1s linear;
+    }
+
+    input {
+        width: 0px;
+        padding-left:24px;
+        margin-bottom: 0px;
+        background-color: transparent;
+        border-color: @ui-action-discreet-border;
+        transition: background-color .1s linear, border-color .1s linear, color .1s linear, width .1s ease-in-out, padding-left .1s ease-in-out;
+    }
+
+    &:focus-within, &:hover {
+        .icon {
+            color: @ui-action-discreet-type-hover;
+        }
+        input {
+            color: @ui-action-discreet-border-hover;
+            border-color: @ui-action-discreet-border-hover;
+        }
+    }
+
+    input:focus, &:focus-within input {
+        background-color: white;
+        color: @ui-action-discreet-border-hover;
+        border-color: @ui-action-discreet-border-hover;
+    }
+    
+    input:focus, &:focus-within input, &.--has-value input {
+        width: 190px;
+        padding-left:30px;
+    }
+
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/listview.less b/src/Umbraco.Web.UI.Client/src/less/listview.less
index 975dbdbd4a..b724688a32 100644
--- a/src/Umbraco.Web.UI.Client/src/less/listview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/listview.less
@@ -1,6 +1,10 @@
 // Listview
 // -------------------------
 
+.umb-listview {
+    min-height: 100px;
+}
+
 .umb-listview table {
 	border: 1px solid @gray-8;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
index 93fa590f68..8865d084e1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-content-grid.html
@@ -1,7 +1,7 @@
 <div class="umb-content-grid">
 
    <div
-      class="umb-content-grid__item"
+      class="umb-content-grid__item umb-outline"
       ng-repeat="item in content"
       ng-class="{'-selected': item.selected}"
       ng-click="clickItem(item, $event, $index)">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
index c6c841f8b1..1fa917a07f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-layout-selector.html
@@ -1,6 +1,6 @@
 <div class="umb-layout-selector" ng-show="vm.showLayoutSelector">
 
-   <button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout" ng-click="vm.toggleLayoutDropdown()" prevent-default>
+   <button type="button" aria-expanded="{{vm.layoutDropDownIsOpen}}" class="umb-layout-selector__active-layout umb-outline" ng-click="vm.toggleLayoutDropdown()" prevent-default>
       <i class="{{ vm.activeLayout.icon }}" aria-hidden="true"></i>
       <span class="sr-only">
           <localize key="visuallyHiddenTexts_activeListLayout">Active layout:</localize>&nbsp;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
index e14315f9f4..c596734e36 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-list-view.html
@@ -1,7 +1,7 @@
 <div class="umb-minilistview">
 
-    <div class="umb-mini-list-view umb-animated" 
-        ng-class="{'umb-mini-list-view--forward': listViewAnimation === 'in', 'umb-mini-list-view--backwards': listViewAnimation === 'out'}" 
+    <div class="umb-mini-list-view umb-animated"
+        ng-class="{'umb-mini-list-view--forward': listViewAnimation === 'in', 'umb-mini-list-view--backwards': listViewAnimation === 'out'}"
         ng-repeat="miniListView in miniListViews">
 
         <div class="umb-mini-list-view__title">
@@ -60,7 +60,7 @@
                 </div>
 
                 <!-- Items -->
-                <div class="umb-table-row cursor-pointer"
+                <div class="umb-table-row cursor-pointer umb-outline"
                     ng-repeat="child in miniListView.children"
                     ng-click="selectNode(child)"
                     ng-class="{'-selected':child.selected, 'not-allowed':!child.allowed}">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html
new file mode 100644
index 0000000000..20ce87f0eb
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umb-mini-search.html
@@ -0,0 +1,14 @@
+<ng-form class="umb-mini-search" ng-class="{'--has-value': vm.model !== null && vm.model !== ''}" novalidate>
+    <i class="icon icon-search"></i>
+    <input
+        class="form-control search-input"
+        type="text"
+        localize="placeholder,label"
+        label="@general_typeToSearch"
+        placeholder="@general_typeToSearch"
+        ng-model="vm.model"
+        ng-change="vm.onChange()"
+        ng-keydown="vm.onKeyDown($event)"
+        prevent-enter-submit
+        no-dirty-check>
+</ng-form>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js
new file mode 100644
index 0000000000..074d29bbd7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-mini-search/umbminisearch.component.js
@@ -0,0 +1,43 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('umbraco')
+        .component('umbMiniSearch', {
+            templateUrl: 'views/components/umb-mini-search/umb-mini-search.html',
+            controller: UmbMiniSearchController,
+            controllerAs: 'vm',
+            bindings: {
+                model: "=",
+                onStartTyping: "&",
+                onSearch: "&"
+            }
+        });
+
+    function UmbMiniSearchController($scope) {
+        
+        var vm = this;
+        
+        var searchDelay = _.debounce(function () {
+            $scope.$apply(function () {
+                vm.onSearch();
+            });
+        }, 500);
+    
+        vm.onKeyDown = function (ev) {
+            //13: enter
+            switch (ev.keyCode) {
+                case 13:
+                    vm.onSearch();
+                    break;
+            }
+        };
+    
+        vm.onChange = function () {
+            vm.onStartTyping();
+            searchDelay();
+        };
+
+    }
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
index df817c1657..ae19ab175f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-table.html
@@ -2,7 +2,7 @@
     <div class="umb-table" ng-if="vm.items">
         <!-- Listviews head section -->
         <div class="umb-table-head">
-            <div class="umb-table-row">
+            <div class="umb-table-row umb-outline">
                 <div class="umb-table-cell">
 
                     <button type="button" class="umb-table__action" ng-show="vm.allowSelectAll" ng-click="vm.selectAll()">
@@ -37,7 +37,7 @@
         </div>
         <!-- Listview body section -->
         <div class="umb-table-body">
-            <div class="umb-table-row -selectable"
+            <div class="umb-table-row -selectable umb-outline"
                  ng-repeat="item in vm.items track by $index"
                  ng-class="{'-selected':item.selected, '-light':!item.published && item.updater != null}"
                  ng-click="vm.selectItem(item, $index, $event)">
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
index be9ad6816d..fe83a4d451 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
@@ -324,33 +324,19 @@ function listViewController($scope, $interpolate, $routeParams, $injector, $time
         });
     };
 
-    var searchListView = _.debounce(function () {
-        $scope.$apply(function () {
-            makeSearch();
-        });
-    }, 500);
+    
 
-    $scope.forceSearch = function (ev) {
-        //13: enter
-        switch (ev.keyCode) {
-            case 13:
-                makeSearch();
-                break;
-        }
-    };
-
-    $scope.enterSearch = function () {
-        $scope.viewLoaded = false;
-        searchListView();
-    };
-
-    function makeSearch() {
+    $scope.makeSearch = function() {
         if ($scope.options.filter !== null && $scope.options.filter !== undefined) {
             $scope.options.pageNumber = 1;
             $scope.reloadView($scope.contentId);
         }
     }
 
+    $scope.onSearchStartTyping = function() {
+        $scope.viewLoaded = false;
+    }
+
     $scope.selectedItemsCount = function () {
         return $scope.selection.length;
     };
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index 304f3f3fbc..c566323493 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -14,14 +14,14 @@
 
                     <!-- Renders when it's only possible to create one specific document type for, which no blueprint exists-->
                    <div class="btn-group" ng-show="createAllowedButtonSingle">
-                       <button type="button" class="btn btn-white" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
+                       <button type="button" class="btn btn-outline" ng-click="createBlank(entityType,listViewAllowedTypes[0].alias)" prevent-default>
                            <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                        </button>
                    </div>
 
                    <!-- Renders when it's only possible to create one specific document type for which a blueprint exits-->
                    <div class="btn-group" ng-show="createAllowedButtonSingleWithBlueprints" deep-blur="leaveDropdown()">
-                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
+                       <button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()" prevent-default>
                            <span>
                                <localize key="actions_create">Create</localize> {{listViewAllowedTypes[0].name}}
                            </span>
@@ -46,7 +46,7 @@
 
                    <!-- Renders when it's possible to create multiple document types and blueprints for one or more of the document types-->
                    <div class="btn-group" ng-show="createAllowedButtonMultiWithBlueprints" deep-blur="leaveDropdown()">
-                       <button type="button" class="btn btn-white dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
+                       <button type="button" class="btn btn-outline dropdown-toggle" aria-expanded="{{page.createDropdownOpen === undefined ? false : page.createDropdownOpen}}" data-toggle="dropdown" ng-click="toggleDropdown()">
                            <localize key="actions_create">Create</localize>
                            <span class="caret" aria-hidden="true"></span>
                        </button>
@@ -126,21 +126,10 @@
                </umb-editor-sub-header-section>
 
                <umb-editor-sub-header-section ng-show="(selection.length == 0)">
-                   <ng-form class="form-search -no-margin-bottom pull-right" novalidate>
-                       <div class="inner-addon left-addon">
-                           <i class="icon icon-search" ng-click="enterSearch($event)"></i>
-                           <input
-                               class="form-control search-input"
-                               type="text"
-                               localize="placeholder"
-                               placeholder="@general_typeToSearch"
-                               ng-model="options.filter"
-                               ng-change="enterSearch()"
-                               ng-keydown="forceSearch($event)"
-                               prevent-enter-submit
-                               no-dirty-check>
-                       </div>
-                   </ng-form>
+
+                    <umb-mini-search model="options.filter" on-search="makeSearch()" on-start-typing="onSearchStartTyping()">
+                    </umb-mini-search>
+
                </umb-editor-sub-header-section>
 
                <umb-editor-sub-header-section ng-show="(selection.length > 0)">