diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 22c9b7f2ca4..0f5feb22a08 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -88,3 +88,15 @@
 @screen md {
     .tabs .tab-button { @apply text-base; }
 }
+
+.pill-tab {
+    @apply text-gray-700 flex items-center focus:outline-none px-2 py-1 rounded;
+
+    &:hover {
+        @apply text-gray-900;
+    }
+
+    &.active {
+        @apply bg-blue-100 text-blue-900;
+    }
+}
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index f0b3c4f22e0..3ca495a000e 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -27,19 +27,23 @@
 }
 
 .filter-badge {
-    @apply text-2xs text-gray-800 bg-gray-300 flex items-center;
-    height: 1.625rem; /*  24px */
+    @apply text-2xs text-gray-800 bg-white border flex items-center rounded-full;
+    height: 1.625rem;
     padding-left: 10px;
 
     button {
-        @apply px-2 text-base text-gray-500 flex items-center rounded;
+        @apply px-2 text-base text-gray-600 flex items-center rounded;
 
         &:hover {
-            @apply text-gray-700;
+            @apply text-gray-800;
         }
 
         &:focus {
             @apply focus-outline;
         }
     }
+
+    &.filter-badge-control {
+        @apply bg-gray-200 border border-gray-500 border-dashed hover:border-gray-600 hover:bg-gray-300;
+    }
 }
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 4e37adaccc5..103c883038d 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -97,7 +97,7 @@ button {
     }
 
     &:focus {
-        @apply focus-outline bg-gray-300;
+        @apply ring-2 outline-none;
     }
 
     &:active, &:focus:active {
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index f8e82b455d1..560c4a255c6 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -142,7 +142,10 @@ input.input-text-minimal:read-only,
 
 .radio-fieldtype .option,
 .checkboxes-fieldtype .option {
-    @apply mt-3 flex items-center;
+    @apply flex items-center;
+    &:not(:first-child) {
+        @apply mt-3;
+    }
 
     input {
         @apply leading-normal mr-1;
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 7cda6424471..721e009095b 100644
--- a/resources/css/elements/tables.css
+++ b/resources/css/elements/tables.css
@@ -16,7 +16,7 @@
 }
 
 .data-list-bulk-actions {
-	@apply bg-white absolute w-full py-3 z-10;
+	@apply bg-white absolute w-full py-2 z-10;
 	padding-left: 56px;
 }
 
@@ -37,16 +37,16 @@
 	overflow-x: auto;
 
     thead {
-		@apply text-sm text-gray-700 text-gray-900;
+		@apply bg-gray-100 text-xs text-gray-700 text-gray-900;
 
 		tr {
 			@apply border-b;
 		}
 
         th {
-            @apply font-medium px-4 py-3;
-            &:first-child { @apply rounded-tl; }
-			&:last-child { @apply rounded-tr; }
+            @apply font-medium px-4 py-2;
+            &:first-child { @apply rounded-tl-lg; }
+			&:last-child { @apply rounded-tr-lg; }
 			&:hover {
 				@apply text-gray-900;
 			}
@@ -127,12 +127,10 @@
         }
 
         &.current-column {
-            @apply font-bold;
             svg { opacity: 1; }
         }
 
         svg {
-            /*  transition: all 150ms ease; */
             opacity: 0;
         }
 
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index cc78b5dbc3b..576061d93f6 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -20,7 +20,7 @@ export default {
         },
         placement: {
             type: String,
-            default: 'bottom-end'
+            default: 'bottom'
         },
         scroll: {
             type: Boolean,
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index ee15514833e..4dcf1a27aa9 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -26,7 +26,7 @@ export default {
         },
         placement: {
             type: String,
-            default: 'bottom-end',
+            default: 'bottom',
         },
         offset: {
             type: Array,
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index 6f4e246407f..ec1db482be7 100644
--- a/resources/js/components/data-list/BulkActions.vue
+++ b/resources/js/components/data-list/BulkActions.vue
@@ -3,8 +3,9 @@
     <div v-if="showAlways || hasSelections" class="data-list-bulk-actions">
         <div class="input-group input-group-sm relative z-10">
             <div class="input-group-prepend">
-                <div class="text-gray-700"
+                <div class="text-gray-700 hidden md:inline-block"
                     v-text="__n(`:count item selected|:count items selected`, selections.length)" />
+                <div class="text-gray-700 md:hidden" v-text="selections.length" />
             </div>
 
             <data-list-action
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index f1a5062cb40..3015e3b5849 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -4,9 +4,9 @@
         <template slot="trigger">
             <button
                 v-tooltip="__('Customize Columns')"
-                class="btn btn-sm px-1 py-1 -ml-1 cursor-pointer"
+                class="btn py-1 px-1 h-8 w-8 flex items-center justify-center"
             >
-                <svg-icon name="settings-horizontal" class="w-4" />
+                <svg-icon name="settings-horizontal" class="w-4 h-4" />
             </button>
         </template>
 
diff --git a/resources/js/components/data-list/Filter.vue b/resources/js/components/data-list/Filter.vue
index e5765c689a8..f64f0415cb0 100644
--- a/resources/js/components/data-list/Filter.vue
+++ b/resources/js/components/data-list/Filter.vue
@@ -2,7 +2,7 @@
 
     <div class="w-full no-label">
         <publish-container
-            class="p-4"
+            class="p-3"
             v-if="filter.fields.length"
             :name="`filter-${filter.handle}`"
             :meta="{}"
diff --git a/resources/js/components/data-list/FilterPresets.vue b/resources/js/components/data-list/FilterPresets.vue
index e27ca8ad1d7..688b764b786 100644
--- a/resources/js/components/data-list/FilterPresets.vue
+++ b/resources/js/components/data-list/FilterPresets.vue
@@ -1,14 +1,45 @@
 <template>
-    <div v-if="presets" class="border-b px-4 text-sm">
+    <div>
+        <div class="flex flex-wrap items-center">
 
-        <button class="data-list-filter-link" :class="{ active: ! activePreset }" @click="viewAll" v-text="__('All')" />
+            <button class="pill-tab mr-1" :class="{ 'active': ! activePreset }" @click="viewAll" v-text="__('All')" />
 
-        <template v-for="(preset, handle) in presets">
-            <button class="data-list-filter-link" :class="{ active: handle === activePreset }" @click="viewPreset(handle)">
-                {{ preset.display }}
+            <template v-for="(preset, handle) in presets">
+                <button class="pill-tab active mr-1" v-if="handle === activePreset">
+                    {{ preset.display }}
+                    <button class="opacity-50 hover:opacity-100" @click="showDeleteModal = true">
+                        <span class="w-2 h-2 ml-2 mr-1">&times;</span>
+                    </button>
+                </button>
+                <button class="pill-tab mr-1" v-else @click="viewPreset(handle)">
+                    {{ preset.display }}
+                </button>
+            </template>
+
+            <button class="pill-tab" @click="createNewEmptyPreset" >
+                <svg-icon name="add-bold" class="w-3 h-3"/>
             </button>
-        </template>
+        </div>
+
+        <confirmation-modal
+            :buttonText="__('Save')"
+            :title="__('Create New View')"
+            v-if="showSaveModal"
+            @cancel="showSaveModal = false"
+            @confirm="handleSavePreset"
+        >
+            <text-input :focus="true" v-model="savingPresetName" @keydown.enter="handleSavePreset" />
+        </confirmation-modal>
 
+        <confirmation-modal
+            v-if="showDeleteModal"
+            :title="__('Delete View')"
+            :bodyText="__('Are you sure you want to delete this view?')"
+            :buttonText="__('Delete')"
+            :danger="true"
+            @confirm="deletePreset"
+            @cancel="showDeleteModal = false"
+        />
     </div>
 </template>
 
@@ -16,13 +47,21 @@
 export default {
 
     props: {
+        activeFilters: Object,
         activePreset: String,
+        activePresetPayload: Object,
+        hasActiveFilters: Boolean,
         preferencesPrefix: String,
+        searchQuery: String,
     },
 
     data() {
         return {
             presets: [],
+            showDeleteModal: false,
+            showSaveModal: false,
+            savingPresetName: null,
+            test: 'hello!'
         }
     },
 
@@ -30,6 +69,17 @@ export default {
         preferencesKey() {
             return this.preferencesPrefix ? `${this.preferencesPrefix}.filters` : null;
         },
+
+        presetPreferencesPayload() {
+            let payload = {
+                display: this.savingPresetName || this.activePresetPayload.display,
+            };
+
+            if (this.searchQuery) payload.query = this.searchQuery;
+            if (this.hasActiveFilters) payload.filters = clone(this.activeFilters);
+
+            return payload;
+        },
     },
 
     created() {
@@ -48,11 +98,62 @@ export default {
             this.viewPreset(handle)
         },
 
+        deletePreset() {
+            this.$preferences.remove(`${this.preferencesKey}.${this.activePreset}`)
+                .then(response => {
+                    this.$emit('deleted', this.activePreset);
+                    this.$toast.success(__('View deleted'));
+                    this.showDeleteModal = false;
+                    this.refreshPresets();
+                })
+                .catch(error => {
+                    this.$toast.error(__('Unable to delete view'));
+                    this.showDeleteModal = false;
+                });
+        },
+
+        savePreset() {
+            if (!this.activePreset) {
+                this.showSaveModal = true;
+                return;
+            }
+
+            this.handleSavePreset();
+        },
+
+        createNewEmptyPreset() {
+            this.savingPresetName = null;
+            this.showSaveModal = true;
+        },
+
+        handleSavePreset() {
+            let presetHandle = this.activePreset || this.$slugify(this.savingPresetName, '_');
+
+            this.$preferences.set(`${this.preferencesKey}.${presetHandle}`, this.presetPreferencesPayload)
+                .then(response => {
+                    this.$toast.success(__('View saved'));
+                    this.showSaveModal = false;
+                    this.getPresets();
+                    this.viewPreset(presetHandle);
+                    this.hasActiveFilters ? this.refreshPreset() : this.$emit('show-filters');
+                })
+                .catch(error => {
+                    this.$toast.error(__('Unable to save view'));
+                    this.showSaveModal = false;
+                });
+        },
+
         refreshPresets() {
             this.getPresets();
             this.viewAll();
         },
 
+        refreshPreset() {
+            this.getPresets();
+            this.$emit('hide-filters');
+            this.viewPreset(this.activePreset);
+        },
+
         viewAll() {
             this.$emit('reset');
         },
diff --git a/resources/js/components/data-list/Filters.vue b/resources/js/components/data-list/Filters.vue
index becb28080ae..b7eb311adf2 100644
--- a/resources/js/components/data-list/Filters.vue
+++ b/resources/js/components/data-list/Filters.vue
@@ -1,29 +1,19 @@
 <template>
-    <div class="w-full">
-        <div class="input-group focus-within-only">
+    <div class="w-full" v-if="isFiltering || isSearching">
+        <div class="flex flex-wrap px-3 border-b pt-2">
 
-            <popover v-if="filters.length">
+            <!-- Field filter (requires custom selection UI) -->
+            <popover v-if="fieldFilter">
                 <template slot="trigger">
-                    <button class="input-group-prepend cursor-pointer px-4" @click="resetFilterPopover">
-                        {{ __('Filter') }}
-                        <svg height="8" width="8" viewBox="0 0 10 6.5" class="ml-1"><path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor" /></svg>
+                    <button class="filter-badge filter-badge-control mr-2 mb-2" @click="resetFilterPopover">
+                        {{ __('Field') }}
+                        <svg-icon name="chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover, afterClosed: afterPopoverClosed }">
                     <div class="flex flex-col text-left w-64">
-                        <h6 class="p-4 pb-0" v-text="__('Show everything where:')"/>
-                        <div v-if="showFilterSelection" class="p-4 pt-2">
-                            <button
-                                v-for="filter in unpinnedFilters"
-                                :key="filter.handle"
-                                v-text="filter.title"
-                                class="btn w-full mt-2"
-                                @click="creating = filter.handle"
-                            />
-                        </div>
                         <div class="filter-fields text-sm">
                             <field-filter
-                                v-show="showFieldFilter"
                                 ref="fieldFilter"
                                 :config="fieldFilter"
                                 :values="activeFilters.fields || {}"
@@ -48,43 +38,16 @@
                 </template>
             </popover>
 
-            <data-list-search ref="search" :value="searchQuery" @input="$emit('search-changed', $event)" />
-
-            <template v-if="isFiltering">
-                <popover v-if="canSave" placement="bottom-end" ref="savePopover">
-                    <template slot="trigger">
-                        <button class="input-group-item px-3">{{ __('Save') }}</button>
-                    </template>
-                    <div class="p-4 w-96">
-                        <h6 v-text="__('Filter preset name')" class="mb-2" />
-                        <div class="flex items-center">
-                            <input class="input-text border-r rounded-r" type="text" v-model="savingPresetName" @keydown.enter="save" ref="savedFilterName">
-                            <button class="btn-primary ml-2" @click="save" :disabled="saving || ! savingPresetName">Save</button>
-                        </div>
-                    </div>
-                </popover>
-                <button v-if="isDirty" class="input-group-item px-3" @click="reset">{{ __('Reset') }}</button>
-                <button v-if="activePreset" class="flex items-center input-group-item px-3" @click="deleting = true"><svg-icon name="trash" class="w-4 h-4" /></button>
-                <confirmation-modal
-                    v-if="deleting"
-                    :title="__('Delete Preset')"
-                    :bodyText="__('Are you sure you want to delete this preset?')"
-                    :buttonText="__('Delete')"
-                    :danger="true"
-                    @confirm="remove"
-                    @cancel="deleting = false"
-                />
-            </template>
-
-            <popover v-if="pinnedFilters.length" v-for="filter in pinnedFilters" :key="filter.handle" placement="bottom-end">
+            <!-- Standard non-field filters -->
+            <popover v-if="standardFilters.length" v-for="filter in standardFilters" :key="filter.handle">
                 <template slot="trigger">
-                    <button class="input-group-item px-3">
+                    <button class="filter-badge filter-badge-control mr-2 mb-2">
                         {{ filter.title }}
-                        <svg height="8" width="8" viewBox="0 0 10 6.5" class="ml-1"><path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor" /></svg>
+                        <svg-icon name="chevron-down-xs" class="w-2 h-2 mx-2" />
                     </button>
                 </template>
                 <template #default="{ close: closePopover }">
-                    <div class="filter-fields">
+                    <div class="filter-fields w-64">
                         <data-list-filter
                             :key="filter.handle"
                             :filter="filter"
@@ -96,17 +59,16 @@
                 </template>
             </popover>
 
-        </div>
-
-        <div class="flex flex-wrap mt-2" v-if="activeCount">
-            <div class="filter-badge mr-2" v-for="(badge, handle) in fieldFilterBadges">
+            <!-- Active filter badges -->
+            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in fieldFilterBadges">
                 <span>{{ badge }}</span>
-                <button @click="removeFieldFilter(handle)">&times;</button>
+                <button @click="removeFieldFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
-            <div class="filter-badge mr-2" v-for="(badge, handle) in standardBadges">
+            <div class="filter-badge mr-2 mb-2" v-for="(badge, handle) in standardBadges">
                 <span>{{ badge }}</span>
-                <button @click="removeStandardFilter(handle)">&times;</button>
+                <button @click="removeStandardFilter(handle)" v-tooltip="__('Remove Filter')">&times;</button>
             </div>
+
         </div>
     </div>
 
@@ -136,6 +98,7 @@ export default {
         searchQuery: String,
         savesPresets: Boolean,
         preferencesPrefix: String,
+        isSearching: Boolean,
     },
 
     data() {
@@ -170,26 +133,6 @@ export default {
             return this.filters.filter(filter => filter.handle !== 'fields');
         },
 
-        pinnedFilters() {
-            return this.filters.filter(filter => filter.pinned);
-        },
-
-        unpinnedFilters() {
-            return this.filters.filter(filter => ! filter.pinned);
-        },
-
-        showFilterSelection() {
-            if (this.fieldFilter && this.unpinnedFilters.length === 1) return false;
-
-            return ! this.creating;
-        },
-
-        showFieldFilter() {
-            if (this.fieldFilter && this.unpinnedFilters.length === 1) return true;
-
-            return this.creating === 'fields';
-        },
-
         fieldFilterBadges() {
             return data_get(this.activeFilterBadges, 'fields', {});
         },
diff --git a/resources/js/components/data-list/HasFilters.js b/resources/js/components/data-list/HasFilters.js
index eb3c182199b..c30c5eed2e4 100644
--- a/resources/js/components/data-list/HasFilters.js
+++ b/resources/js/components/data-list/HasFilters.js
@@ -2,11 +2,12 @@ export default {
 
     data() {
         return {
+            activeFilterBadges: {},
+            activeFilters: {},
             activePreset: null,
             activePresetPayload: {},
             searchQuery: '',
-            activeFilters: {},
-            activeFilterBadges: {},
+            showFilters: false,
         }
     },
 
@@ -22,12 +23,46 @@ export default {
             return count;
         },
 
+        canSave() {
+            return this.isDirty && this.preferencesPrefix;
+        },
+
+        isDirty() {
+            if (! this.isFiltering) return false;
+
+            if (this.activePreset) {
+                return this.activePresetPayload.query != this.searchQuery
+                    || ! _.isEqual(this.activePresetPayload.filters || {}, this.activeFilters);
+            }
+
+            return true;
+        },
+
+        isFiltering() {
+            return ! _.isEmpty(this.activeFilters) || this.searchQuery || this.activePreset;
+        },
+
         hasActiveFilters() {
             return this.activeFilterCount > 0;
-        }
+        },
+
+        searchPlaceholder() {
+            if (this.activePreset) {
+                return __('Searching in: ') + this.activePresetPayload.display;
+            }
+
+            return __('Search');
+        },
 
     },
 
+    created() {
+        this.$keys.bind('f', e => {
+            e.preventDefault();
+            this.handleShowFilters();
+        });
+    },
+
     methods: {
 
         searchChanged(query) {
@@ -65,10 +100,30 @@ export default {
             this.activePreset = null;
             this.activePresetPayload = {};
             this.searchQuery = '';
+            this.showFilters = false;
             this.activeFilters = {};
             this.activeFilterBadges = {};
         },
 
+        filtersHide() {
+            this.showFilters = false;
+            this.searchQuery = '';
+        },
+
+        filtersShow() {
+            this.showFilters = true;
+        },
+
+        handleShowFilters() {
+            this.showFilters = true;
+
+            this.$nextTick(function () {
+                if (this.$refs.search) {
+                    this.$refs.search.focus();
+                }
+            });
+        },
+
         unselectAllItems() {
             if (this.$refs.dataList) {
                 this.$refs.dataList.clearSelections();
diff --git a/resources/js/components/data-list/Search.vue b/resources/js/components/data-list/Search.vue
index d953aedb828..84041781a0e 100644
--- a/resources/js/components/data-list/Search.vue
+++ b/resources/js/components/data-list/Search.vue
@@ -2,17 +2,31 @@
     <input
         type="text"
         ref="input"
-        :placeholder="__('Search...')"
+        :placeholder="__(placeholder)"
         :value="value"
         @input="emitEvent"
         @keyup.esc="reset"
+        autofocus
         class="input-text flex-1 bg-white text-sm">
 </template>
 
 <script>
 export default {
 
-    props: ['value'],
+    props: [
+        'value'
+    ],
+
+    props: {
+        placeholder: {
+            type: String,
+            default: 'Search...'
+        },
+        value: {
+            type: String,
+            default: ''
+        }
+    },
 
     methods: {
         emitEvent: _.debounce(function (event) {
diff --git a/resources/js/components/data-list/Table.vue b/resources/js/components/data-list/Table.vue
index c759701cb5a..55917186d0b 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -1,6 +1,6 @@
 <template>
     <table ref="table" tabindex="0" class="data-table" :class="{ 'opacity-50': loading, 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
-        <thead v-if="allowBulkActions || allowColumnPicker || visibleColumns.length > 1">
+        <thead v-if="allowBulkActions || visibleColumns.length > 1">
             <tr>
                 <th class="checkbox-column" v-if="allowBulkActions || reorderable">
                     <data-list-toggle-all ref="toggleAll" v-if="allowBulkActions && !singleSelect" />
@@ -25,9 +25,7 @@
                     <template v-if="type === 'entries'">{{ __('Collection') }}</template>
                     <template v-if="type === 'terms'">{{ __('Taxonomy') }}</template>
                 </th>
-                <th class="actions-column">
-                    <data-list-column-picker :preferences-key="columnPreferencesKey" v-if="allowColumnPicker" />
-                </th>
+                <th class="actions-column" />
             </tr>
         </thead>
         <sortable-list
@@ -124,13 +122,6 @@ export default {
             type: Boolean,
             default: false
         },
-        allowColumnPicker: {
-            type: Boolean,
-            default: false
-        },
-        columnPreferencesKey: {
-            type: String,
-        },
         type: {
             type: String
         },
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 8ea523d365d..0e4de7b851e 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -17,16 +17,37 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">
-                    <data-list-filter-presets
-                        v-if="!reordering"
-                        ref="presets"
-                        :active-preset="activePreset"
-                        :preferences-prefix="preferencesPrefix"
-                        @selected="selectPreset"
-                        @reset="filtersReset"
-                    />
-                    <div class="data-list-header" v-if="!reordering">
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="!reordering && ! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8 w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+                    <div v-show="!reordering && showFilters">
                         <data-list-filters
+                            ref="filters"
                             :filters="filters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
@@ -34,6 +55,7 @@
                             :active-filter-badges="activeFilterBadges"
                             :active-count="activeFilterCount"
                             :search-query="searchQuery"
+                            :is-searching="showFilters"
                             :saves-presets="true"
                             :preferences-prefix="preferencesPrefix"
                             @filter-changed="filterChanged"
@@ -61,8 +83,6 @@
                         :reorderable="reordering"
                         :sortable="!reordering"
                         :toggle-selection-on-row-click="true"
-                        :allow-column-picker="true"
-                        :column-preferences-key="preferencesKey('columns')"
                         @sorted="sorted"
                         @reordered="reordered"
                     >
@@ -76,7 +96,7 @@
                             <span class="font-mono text-2xs">{{ entry.slug }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: entry, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="bottom-start">
                                 <dropdown-item :text="__('View')" :external-link="entry.permalink" v-if="entry.viewable && entry.permalink" />
                                 <dropdown-item :text="__('Edit')" :redirect="entry.edit_url" v-if="entry.editable" />
                                 <div class="divider" v-if="entry.actions.length" />
@@ -101,7 +121,6 @@
                 />
             </div>
         </data-list>
-
     </div>
 </template>
 
@@ -215,7 +234,6 @@ export default {
                     this.$toast.error(__('Something went wrong'));
                 });
         },
-
     }
 
 }
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index 9e7c55e541e..bb18f09dcc9 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -17,15 +17,37 @@
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">
-                    <data-list-filter-presets
-                        ref="presets"
-                        :active-preset="activePreset"
-                        :preferences-prefix="preferencesPrefix"
-                        @selected="selectPreset"
-                        @reset="filtersReset"
-                    />
-                    <div class="data-list-header">
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+                    <div v-show="showFilters">
                         <data-list-filters
+                            ref="filters"
                             :filters="filters"
                             :active-preset="activePreset"
                             :active-preset-payload="activePresetPayload"
@@ -33,6 +55,7 @@
                             :active-filter-badges="activeFilterBadges"
                             :active-count="activeFilterCount"
                             :search-query="searchQuery"
+                            :is-searching="showFilters"
                             :saves-presets="true"
                             :preferences-prefix="preferencesPrefix"
                             @filter-changed="filterChanged"
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 98494f60642..2a494997364 100644
--- a/resources/js/components/users/Listing.vue
+++ b/resources/js/components/users/Listing.vue
@@ -1,4 +1,4 @@
-    <template>
+<template>
     <div>
 
         <div v-if="initializing" class="card loading">
@@ -8,16 +8,63 @@
         <data-list
             v-if="!initializing"
             ref="dataList"
-            :columns="columns"
             :rows="items"
+            :columns="columns"
             :sort="false"
             :sort-column="sortColumn"
             :sort-direction="sortDirection"
         >
             <div slot-scope="{ hasSelections }">
                 <div class="card p-0 relative">
-                    <div class="data-list-header">
-                        <data-list-search v-model="searchQuery" />
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="! showFilters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :has-active-filters="hasActiveFilters"
+                            :preferences-prefix="preferencesPrefix"
+                            :search-query="searchQuery"
+                            @selected="selectPreset"
+                            @reset="filtersReset"
+                            @hide-filters="filtersHide"
+                            @show-filters="filtersShow"
+                        />
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn py-1 px-2 h-8" v-text="__('Cancel')" v-show="showFilters" @click="filtersHide" />
+                            <button class="btn py-1 px-2 h-8" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center py-1 px-2 h-8" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls')">
+                                <svg-icon name="search" class="w-4 h-4" />
+                                <svg-icon name="filter-lines" class="w-4 h-4" />
+                            </button>
+                            <data-list-column-picker :preferences-key="preferencesKey('columns')" />
+                        </div>
+                    </div>
+
+                   <div v-show="showFilters">
+                        <data-list-filters
+                            ref="filters"
+                            :filters="filters"
+                            :active-preset="activePreset"
+                            :active-preset-payload="activePresetPayload"
+                            :active-filters="activeFilters"
+                            :active-filter-badges="activeFilterBadges"
+                            :active-count="activeFilterCount"
+                            :search-query="searchQuery"
+                            :is-searching="showFilters"
+                            :saves-presets="true"
+                            :preferences-prefix="preferencesPrefix"
+                            @filter-changed="filterChanged"
+                            @search-changed="searchChanged"
+                            @saved="$refs.presets.setPreset($event)"
+                            @deleted="$refs.presets.refreshPresets()"
+                            @restore-preset="$refs.presets.viewPreset($event)"
+                            @reset="filtersReset"
+                        />
                     </div>
 
                     <div v-show="items.length === 0" class="p-6 text-center text-gray-500" v-text="__('No results')" />
diff --git a/resources/svg/add-bold.svg b/resources/svg/add-bold.svg
new file mode 100644
index 00000000000..e80b757a94e
--- /dev/null
+++ b/resources/svg/add-bold.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M7 1V13"></path><path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" d="M13 7L1 7"></path></svg>
diff --git a/resources/svg/filter-lines.svg b/resources/svg/filter-lines.svg
new file mode 100644
index 00000000000..fd038eba0e3
--- /dev/null
+++ b/resources/svg/filter-lines.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.51001 12.2115H9.48992"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M3.18237 8.73718H10.8177"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M1.89697 5.26282H12.1031"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M0.80957 1.78848H13.1904"></path></svg>
\ No newline at end of file
diff --git a/src/Auth/UserRepository.php b/src/Auth/UserRepository.php
index 5262f7db0bd..2f09ba0c5b7 100644
--- a/src/Auth/UserRepository.php
+++ b/src/Auth/UserRepository.php
@@ -64,8 +64,8 @@ public function blueprint()
         $blueprint->ensureField('email', ['type' => 'text', 'input_type' => 'email', 'display' => 'Email Address', 'listable' => true]);
 
         if (Statamic::pro()) {
-            $blueprint->ensureField('roles', ['type' => 'user_roles', 'mode' => 'select', 'width' => 50, 'listable' => true]);
-            $blueprint->ensureField('groups', ['type' => 'user_groups', 'mode' => 'select', 'width' => 50, 'listable' => true]);
+            $blueprint->ensureField('roles', ['type' => 'user_roles', 'mode' => 'select', 'width' => 50, 'listable' => true, 'filterable' => false]);
+            $blueprint->ensureField('groups', ['type' => 'user_groups', 'mode' => 'select', 'width' => 50, 'listable' => true, 'filterable' => false]);
         } else {
             $blueprint->removeField('roles');
             $blueprint->removeField('groups');
diff --git a/src/Console/Commands/stubs/filter.php.stub b/src/Console/Commands/stubs/filter.php.stub
index c8c669807fa..170767bfc3d 100644
--- a/src/Console/Commands/stubs/filter.php.stub
+++ b/src/Console/Commands/stubs/filter.php.stub
@@ -6,13 +6,6 @@ use Statamic\Query\Scopes\Filter;
 
 class DummyClass extends Filter
 {
-    /**
-     * Pin the filter.
-     *
-     * @var bool
-     */
-    public $pinned = false;
-
     /**
      * Define the filter's title.
      *
diff --git a/src/Http/Controllers/CP/Users/UsersController.php b/src/Http/Controllers/CP/Users/UsersController.php
index 53edab1d588..e5d8180b634 100644
--- a/src/Http/Controllers/CP/Users/UsersController.php
+++ b/src/Http/Controllers/CP/Users/UsersController.php
@@ -69,7 +69,9 @@ protected function json($request)
             ? UserGroup::find($request->group)->queryUsers()
             : $this->indexQuery();
 
-        $activeFilterBadges = $this->queryFilters($query, $request->filters);
+        $activeFilterBadges = $this->queryFilters($query, $request->filters, [
+            'blueprints' => ['user'],
+        ]);
 
         $users = $query
             ->orderBy(request('sort', 'email'), request('order', 'asc'))
diff --git a/src/Query/Scopes/Filter.php b/src/Query/Scopes/Filter.php
index 4a3c685861d..0d50d997918 100644
--- a/src/Query/Scopes/Filter.php
+++ b/src/Query/Scopes/Filter.php
@@ -11,7 +11,6 @@ abstract class Filter extends Scope implements Arrayable
     use HasTitle, HasFields;
 
     protected $context = [];
-    protected $pinned = false;
 
     public function visibleTo($key)
     {
@@ -59,7 +58,6 @@ public function toArray()
             'handle' => $this->handle(),
             'title' => $this->title(),
             'extra' => $this->extra(),
-            'pinned' => $this->pinned(),
             'auto_apply' => $this->autoApply(),
             'fields' => $this->fields()->toPublishArray(),
             'meta' => $this->fields()->meta(),
diff --git a/src/Query/Scopes/Filters/Fields.php b/src/Query/Scopes/Filters/Fields.php
index 69aa3fd22b0..3de57154fcd 100644
--- a/src/Query/Scopes/Filters/Fields.php
+++ b/src/Query/Scopes/Filters/Fields.php
@@ -2,8 +2,10 @@
 
 namespace Statamic\Query\Scopes\Filters;
 
+use Statamic\Facades\Blueprint;
 use Statamic\Facades\Collection;
 use Statamic\Facades\Taxonomy;
+use Statamic\Facades\User;
 use Statamic\Query\Scopes\Filter;
 use Statamic\Support\Arr;
 
@@ -59,7 +61,7 @@ public function badge($values)
 
     public function visibleTo($key)
     {
-        return in_array($key, ['entries', 'entries-fieldtype', 'terms']);
+        return in_array($key, ['entries', 'entries-fieldtype', 'terms', 'users']);
     }
 
     protected function getFields()
@@ -87,6 +89,14 @@ protected function getBlueprints()
             });
         }
 
+        if (isset($this->context['blueprints'])) {
+            return collect($this->context['blueprints'])->map(function ($handle) {
+                return $handle === 'user'
+                    ? User::blueprint()
+                    : Blueprint::find($handle);
+            });
+        }
+
         return collect();
     }
 }
diff --git a/src/Query/Scopes/Filters/Site.php b/src/Query/Scopes/Filters/Site.php
index 5e5ad092108..ceb3368517c 100644
--- a/src/Query/Scopes/Filters/Site.php
+++ b/src/Query/Scopes/Filters/Site.php
@@ -7,8 +7,6 @@
 
 class Site extends Filter
 {
-    protected $pinned = true;
-
     public static function title()
     {
         return __('Site');
diff --git a/src/Query/Scopes/Filters/Status.php b/src/Query/Scopes/Filters/Status.php
index d0ab3c540aa..ff0688d8ddb 100644
--- a/src/Query/Scopes/Filters/Status.php
+++ b/src/Query/Scopes/Filters/Status.php
@@ -7,8 +7,6 @@
 
 class Status extends Filter
 {
-    public $pinned = true;
-
     public static function title()
     {
         return __('Status');
diff --git a/src/Query/Scopes/Filters/UserGroup.php b/src/Query/Scopes/Filters/UserGroup.php
index 2f5de3edcd4..360b34c1d1d 100644
--- a/src/Query/Scopes/Filters/UserGroup.php
+++ b/src/Query/Scopes/Filters/UserGroup.php
@@ -25,7 +25,7 @@ public function fieldItems()
 
     public function apply($query, $values)
     {
-        $query->where('group', $values['group']);
+        $query->where('groups/'.$values['group'], true);
     }
 
     public function badge($values)
diff --git a/src/Query/Scopes/Filters/UserRole.php b/src/Query/Scopes/Filters/UserRole.php
index 653cde5b5bb..71a3a77a490 100644
--- a/src/Query/Scopes/Filters/UserRole.php
+++ b/src/Query/Scopes/Filters/UserRole.php
@@ -25,7 +25,11 @@ public function fieldItems()
 
     public function apply($query, $values)
     {
-        $query->where('role', $values['role']);
+        if ($values['role'] === 'super') {
+            $query->where('super', true);
+        } else {
+            $query->where('roles/'.$values['role'], true);
+        }
     }
 
     public function badge($values)
diff --git a/src/Stache/Indexes/Users/Role.php b/src/Stache/Indexes/Users/Role.php
new file mode 100644
index 00000000000..1fe813b3a46
--- /dev/null
+++ b/src/Stache/Indexes/Users/Role.php
@@ -0,0 +1,16 @@
+<?php
+
+namespace Statamic\Stache\Indexes\Users;
+
+use Statamic\Stache\Indexes\Value;
+use Statamic\Support\Str;
+
+class Role extends Value
+{
+    public function getItemValue($item)
+    {
+        $role = Str::after($this->name(), 'roles/');
+
+        return $item->hasRole($role);
+    }
+}
diff --git a/src/Stache/Stores/UsersStore.php b/src/Stache/Stores/UsersStore.php
index fad18ba261c..e0c563f8dd6 100644
--- a/src/Stache/Stores/UsersStore.php
+++ b/src/Stache/Stores/UsersStore.php
@@ -2,20 +2,30 @@
 
 namespace Statamic\Stache\Stores;
 
+use Statamic\Facades\Role as UserRole;
 use Statamic\Facades\User;
 use Statamic\Facades\UserGroup;
 use Statamic\Facades\YAML;
 use Statamic\Stache\Indexes\Users\Group;
+use Statamic\Stache\Indexes\Users\Role;
 
 class UsersStore extends BasicStore
 {
     protected function storeIndexes()
     {
-        return UserGroup::all()->mapWithKeys(function ($group) {
+        $groups = UserGroup::all()->mapWithKeys(function ($group) {
             return ['groups/'.$group->handle() => Group::class];
-        })
-        ->push('email')
-        ->all();
+        });
+
+        $roles = UserRole::all()->mapWithKeys(function ($role) {
+            return ['roles/'.$role->handle() => Role::class];
+        });
+
+        return collect()
+            ->merge($groups)
+            ->merge($roles)
+            ->push('email')
+            ->all();
     }
 
     protected $groups = [];
diff --git a/tests/Auth/FileUserTest.php b/tests/Auth/FileUserTest.php
index 2f42f84d34e..2fe2893628b 100644
--- a/tests/Auth/FileUserTest.php
+++ b/tests/Auth/FileUserTest.php
@@ -101,6 +101,7 @@ public function it_gets_permissions_from_a_cache()
 
         Role::shouldReceive('find')->with('direct')->andReturn($directRole);
         UserGroup::shouldReceive('find')->with('usergroup')->andReturn($userGroup);
+        Role::shouldReceive('all')->andReturn(collect([$directRole]));     // the stache calls this when getting a user. unrelated to test.
         UserGroup::shouldReceive('all')->andReturn(collect([$userGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible()
diff --git a/tests/Auth/PermissibleContractTests.php b/tests/Auth/PermissibleContractTests.php
index aa4be51a76d..d0352cf13c5 100644
--- a/tests/Auth/PermissibleContractTests.php
+++ b/tests/Auth/PermissibleContractTests.php
@@ -51,6 +51,7 @@ public function handle(string $handle = null)
         RoleAPI::shouldReceive('find')->with('c')->andReturn($roleC);
         RoleAPI::shouldReceive('find')->with('d')->andReturn($roleD);
         RoleAPI::shouldReceive('find')->with('unknown')->andReturnNull();
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA, $roleB, $roleC, $roleD])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible();
         $this->assertInstanceOf(Collection::class, $user->roles());
@@ -108,6 +109,7 @@ public function handle(string $handle = null)
 
         RoleAPI::shouldReceive('find')->with('b')->andReturn($roleB);
         RoleAPI::shouldReceive('find')->with('c')->andReturn($roleC);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA, $roleB, $roleC, $roleD])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible()->assignRole([$roleA, $roleB, $roleC, $roleD]);
 
@@ -138,6 +140,7 @@ public function handle(string $handle = null)
         };
 
         RoleAPI::shouldReceive('find')->with('a')->andReturn($roleA);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$roleA])); // the stache calls this when getting a user. unrelated to test.
 
         $user = $this->createPermissible();
 
@@ -172,6 +175,7 @@ public function it_gets_and_checks_permissions()
 
         RoleAPI::shouldReceive('find')->with('direct')->andReturn($directRole);
         UserGroupAPI::shouldReceive('find')->with('usergroup')->andReturn($userGroup);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$directRole]));     // the stache calls this when getting a user. unrelated to test.
         UserGroupAPI::shouldReceive('all')->andReturn(collect([$userGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $nonSuperUser = $this->createPermissible()
@@ -255,6 +259,7 @@ public function permissions($permissions = null)
         RoleAPI::shouldReceive('find')->with('nonsuperrole')->andReturn($nonSuperRole);
         UserGroupAPI::shouldReceive('find')->with('supergroup')->andReturn($superGroup);
         UserGroupAPI::shouldReceive('find')->with('nonsupergroup')->andReturn($nonSuperGroup);
+        RoleAPI::shouldReceive('all')->andReturn(collect([$superRole, $nonSuperRole]));        // the stache calls this when getting a user. unrelated to test.
         UserGroupAPI::shouldReceive('all')->andReturn(collect([$superGroup, $nonSuperGroup])); // the stache calls this when getting a user. unrelated to test.
 
         $superUserThroughRole = $this->createPermissible()->assignRole($superRole)->save();