diff --git a/config/cp.php b/config/cp.php
index 188b7d9f5d5..813f68b46d2 100644
--- a/config/cp.php
+++ b/config/cp.php
@@ -27,6 +27,18 @@
 
     'start_page' => 'dashboard',
 
+    /*
+    |--------------------------------------------------------------------------
+    | Listing Filters
+    |--------------------------------------------------------------------------
+    |
+    | Whether to always show the filters on listing pages or hide them behind
+    | a toggle button to keep things more simple.
+    |
+    */
+
+    'always_show_filters' => false,
+
     /*
     |--------------------------------------------------------------------------
     | Dashboard Widgets
diff --git a/package-lock.json b/package-lock.json
index 1b320a4dca8..0f466b1a62e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -85,6 +85,7 @@
         "@babel/preset-env": "^7.20.2",
         "@rollup/plugin-inject": "^5.0.3",
         "@tailwindcss/container-queries": "^0.1.0",
+        "@tailwindcss/line-clamp": "^0.4.2",
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue2": "^2.2.0",
         "autoprefixer": "^10.4.0",
@@ -4049,6 +4050,15 @@
         "tailwindcss": ">=3.2.0"
       }
     },
+    "node_modules/@tailwindcss/line-clamp": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.2.tgz",
+      "integrity": "sha512-HFzAQuqYCjyy/SX9sLGB1lroPzmcnWv1FHkIpmypte10hptf4oPUfucryMKovZh2u0uiS9U5Ty3GghWfEJGwVw==",
+      "dev": true,
+      "peerDependencies": {
+        "tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tailwindcss/typography": {
       "version": "0.5.9",
       "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.9.tgz",
diff --git a/package.json b/package.json
index 94e4c2bf683..a8f32be85a3 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
     "@babel/preset-env": "^7.20.2",
     "@rollup/plugin-inject": "^5.0.3",
     "@tailwindcss/container-queries": "^0.1.0",
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@tailwindcss/typography": "^0.5.9",
     "@vitejs/plugin-vue2": "^2.2.0",
     "autoprefixer": "^10.4.0",
diff --git a/resources/css/components/column-picker.css b/resources/css/components/column-picker.css
index 6d4233ff90a..a6e4543fb47 100644
--- a/resources/css/components/column-picker.css
+++ b/resources/css/components/column-picker.css
@@ -3,17 +3,10 @@
 }
 
 .column-picker-item {
-    @apply bg-white text-sm outline-none flex items-center rounded select-none;
-    padding: 4px 8px;
-    margin: -1px 0;
+    @apply text-sm outline-none flex items-center select-none h-full;
 
     &.sortable {
-        cursor: grab;
-
-        label {
-            cursor: grab;
-        }
-
+        @apply rounded bg-white border;
         &:hover  {
             @apply bg-gray-200;
         }
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index 737daa8fdf5..921960eaaff 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -18,7 +18,7 @@
 }
 
 .bard-editor .bard-invalid {
-    @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
+    @apply p-2 @lg:px-4 bg-red-100 text-red-500 text-xs whitespace-nowrap;
 }
 
 /*  Modes */
@@ -40,17 +40,12 @@
 }
 
 .bard-fixed-toolbar {
-    @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
-    position: sticky;
-    padding: 4px 8px;
-    z-index: 5;
-    top: 0;
+    @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between px-1 py-2 z-5 top-0;
+    /* position: sticky; */
+
 
     .bard-toolbar-button {
-        @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base text-center;
-        height: 32px;
-        width: 32px;
-        margin: 0;
+        @apply text-gray-800 rounded px-1 flex text-center justify-center items-center text-base h-8 w-8 m-0;
         svg {
             @apply w-auto h-4;
         }
@@ -84,11 +79,7 @@
     @apply bg-black rounded-full shadow-lg px-4;
 
     button {
-        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
-        height: 32px;
-        width: 32px;
-        margin: 0 2px;
-        outline: none;
+        @apply text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent h-8 w-8 my-0 mx-0.5 outline-none;
         svg {
             @apply w-auto h-4;
         }
@@ -187,7 +178,7 @@
 }
 
 .bard-set.has-error > .replicator-set-header label {
-    @apply text-red;
+    @apply text-red-500;
 }
 
 /* The set selection options for each text block
@@ -216,7 +207,7 @@
     }
 
     .bard-fixed-toolbar {
-        @apply shadow h-12 justify-center;
+        @apply shadow h-12;
         padding: 7px 8px;
         top: 0;
         z-index: 999;
@@ -238,6 +229,10 @@
         * > .ProseMirror {
             min-height: auto;
         }
+
+        &:focus {
+            @apply ring-0;
+        }
     }
 
     .bard-set-selector {
@@ -500,19 +495,20 @@
   ========================================================================== */
 
   .bard-link-toolbar {
-    @apply bg-white rounded absolute leading-none shadow mt-2;
+    /* @apply bg-white rounded absolute leading-none shadow mt-2;
     z-index: 100;
     width: 300px;
     top: 100%;
+    right: 0; */
 
-    &:before {
+    /* &:before {
         content: '';
         border: 6px solid transparent;
         border-bottom-color: white;
         position: absolute;
         bottom: 100%;
         left: 10px;
-    }
+    } */
 
     .input {
         @apply p-0 text-xs h-8 bg-transparent shadow-none border-none;
diff --git a/resources/css/components/fieldtypes/list.css b/resources/css/components/fieldtypes/list.css
deleted file mode 100644
index 3edee96ab8a..00000000000
--- a/resources/css/components/fieldtypes/list.css
+++ /dev/null
@@ -1,106 +0,0 @@
-/* ==========================================================================
-   LIST FIELDTYPE
-   ========================================================================== */
-
-.list-fieldtype ul {
-    padding: 0;
-    margin: 0;
-	list-style: none;
-}
-
-.list-fieldtype li {
-	padding: 0 16px;
-	background: url('../../../svg/bullet.svg') no-repeat 3px 9px;
-    background-size: 5px;
-	margin-bottom: 8px;
-    font-size: 16px;
-	position: relative;
-	font-size: 14px;
-
-    &:active { cursor: ns-resize; }
-
-	&.editing {
-		padding-left: 0px;
-		background: #fff;
-	}
-
-	&:last-child {
-		padding-left: 0;
-        margin-bottom: 0;
-		background: none;
-	}
-
-	input {
-		background: #fff url('../../../svg/bullet.svg') no-repeat 3px 9px;
-        background-size: 5px;
-		box-shadow: none;
-        padding: 0 16px;
-        height: auto !important;
-		font-size: 14px;
-		outline: 0px !important;
-		&:active, &:focus { outline: 0px !important; -webkit-appearance: none; box-shadow: 0 0 0 0; }
-	}
-
-    .delete {
-        @apply text-gray-600 absolute cursor-pointer inline-block opacity-0;
-	    width: 10px;
-	    height: 10px;
-		top: 1px;
-        left: 1px;
-	}
-
-	&:hover .delete {
-        opacity: 1;
-        &:hover {
-            @apply text-gray-800;
-        }
-	}
-}
-
-
-/* Inside a Grid
-  ========================================================================== */
-
-.grid-fieldtype .list-fieldtype {
-
-	padding: 8px 0 10px;
-
-	ul {
-        border: none;
-        padding: 0;
-        border-radius: 0;
-    }
-
-    li {
-        background-position: 10px 8px;
-        font-size: 14px;
-        margin: 0 0 8px;
-        padding-left: 20px;
-        &:last-child { padding-left: 0; }
-        input {
-            background-position: 10px 8px;
-            padding: 0 10px 0 20px;
-            margin-top: 0;
-
-            &:hover { background-color: #fff; }
-        }
-        .delete {
-            left: 8px;
-        }
-    }
-
-    .ui-sortable-helper {
-        box-shadow: none;
-        .delete { display: none; }
-    }
-}
-
-
-/* Inside a Bard
-  ========================================================================== */
-
-.bard-fieldtype .list-fieldtype {
-    input.input-text {
-        border: none;
-    }
-}
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index 86a7429c302..8d0259ef7dc 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -6,7 +6,7 @@
     @apply border rounded overflow-hidden relative;
 
     .markdown-toolbar {
-        @apply bg-white shadow-none rounded-t border-b text-sm flex items-center justify-between;
+        @apply bg-white shadow-none rounded-t border-b text-sm flex flex-wrap items-center justify-between;
         padding: 4px 8px;
     }
 
@@ -50,7 +50,7 @@
     }
 
     .CodeMirror {
-        @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal p-3 text-xs;
+        @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal px-0 py-1 @md/markdown:p-3 text-xs;
         border-radius: 0 0 3px 3px;
 
         &:focus-within {
@@ -108,7 +108,7 @@
     .markdown-modes button {
         @apply text-gray-700;
         &.active {
-            @apply text-white;
+            @apply text-white bg-black;
         }
     }
 
@@ -181,10 +181,9 @@
   ========================================================================== */
 
 .markdown-preview {
-    @apply mx-auto;
+    @apply mx-auto px-3 py-2 @md/markdown:py-4 @md/markdown:px-5;
 
-    padding: 16px 20px;
-    min-height: 167px; /*  @TODO Refactor to avoid a magic number. */
+    min-height: 167px;
 
     ol {
         @apply list-decimal;
diff --git a/resources/css/components/fieldtypes/replicator.css b/resources/css/components/fieldtypes/replicator.css
index 34a8c75d682..216310d53b4 100644
--- a/resources/css/components/fieldtypes/replicator.css
+++ b/resources/css/components/fieldtypes/replicator.css
@@ -44,9 +44,9 @@
 
     &.invalid {
         .replicator-set-header-inner {
-            @apply bg-red-lighter;
+            @apply bg-red-100;
             label {
-                @apply text-red;
+                @apply text-red-500;
             }
         }
     }
@@ -79,11 +79,11 @@
 }
 
 .replicator-set.has-error > .replicator-set-header label {
-    @apply text-red;
+    @apply text-red-500;
 }
 
 .replicator-set-body > .has-error > label {
-    @apply text-red;
+    @apply text-red-500;
 }
 
 .replicator-fullscreen {
diff --git a/resources/css/components/filters.css b/resources/css/components/filters.css
index 72a78ed930d..30658159474 100644
--- a/resources/css/components/filters.css
+++ b/resources/css/components/filters.css
@@ -15,7 +15,7 @@
     }
 
     a.active:after {
-        @apply bg-red block;
+        @apply bg-red-500 block;
         content: "";
         width: 4px;
         height: 4px;
diff --git a/resources/css/components/global-header.css b/resources/css/components/global-header.css
index 11447d5f937..b05d74975f8 100644
--- a/resources/css/components/global-header.css
+++ b/resources/css/components/global-header.css
@@ -124,12 +124,12 @@
 
 
 .session-expiry-stripe {
-    @apply px-4 py-2 text-xs top-0 text-center bg-red text-white cursor-pointer w-full outline-none fixed;
+    @apply px-4 py-2 text-xs top-0 text-center bg-red-500 text-white cursor-pointer w-full outline-none fixed;
     z-index: 999;
     height: 48px;
 
     &:hover {
-        @apply bg-red-dark;
+        @apply bg-red-700;
     }
 
     &:active, &:focus {
diff --git a/resources/css/components/items.css b/resources/css/components/items.css
index fdcbb17fa0f..d8b712473f4 100644
--- a/resources/css/components/items.css
+++ b/resources/css/components/items.css
@@ -15,7 +15,7 @@
 
     &.invalid {
         .item-inner {
-            @apply border-red bg-red-lighter text-red;
+            @apply border-red-300 bg-red-100 text-red-500;
         }
     }
 
diff --git a/resources/css/components/metrics.css b/resources/css/components/metrics.css
index 42db7bc1c8b..d71136fc857 100644
--- a/resources/css/components/metrics.css
+++ b/resources/css/components/metrics.css
@@ -26,8 +26,8 @@
     }
     &.dark { }
     &.blue { @apply bg-blue; }
-    &.green { @apply bg-green; }
-    &.red { @apply bg-red; }
+    &.green { @apply bg-green-600; }
+    &.red { @apply bg-red-500; }
 }
 
 .metric.simple {
diff --git a/resources/css/components/notifications.css b/resources/css/components/notifications.css
index 37fc2933e34..3838fb7043f 100644
--- a/resources/css/components/notifications.css
+++ b/resources/css/components/notifications.css
@@ -21,11 +21,11 @@
     }
 
     &.success i {
-        @apply bg-green-light;
+        @apply bg-green-400 text-green-700;
     }
 
     &.error i {
-        @apply bg-red;
+        @apply bg-red-500;
     }
 
     &.default i {
diff --git a/resources/css/components/popover.css b/resources/css/components/popover.css
index d17c12772f0..9fb3c471052 100644
--- a/resources/css/components/popover.css
+++ b/resources/css/components/popover.css
@@ -34,11 +34,27 @@
     position: relative;
 }
 
+/*  When open */
+.popover-open {
+    .popover {
+        pointer-events: auto;
+        visibility: visible;
+    }
+
+    .popover-content {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .rotating-dots {
+        transform: rotate(90deg);
+    }
+}
+
 /*  Supporting elements */
 .rotating-dots {
     @apply relative cursor-pointer;
     transition: .12s ease-out;
-    /*  top: 1px; */
 }
 
 .rotating-dots-button {
@@ -54,20 +70,3 @@
         @apply focus-outline;
     }
 }
-
-/*  When open */
-.popover-open {
-    .popover {
-        pointer-events: auto;
-        visibility: visible;
-    }
-
-    .popover-content {
-        transform: scale(1);
-        opacity: 1;
-    }
-
-    .rotating-dots {
-        transform: rotate(90deg);
-    }
-}
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 3c8d4e93ae4..bec4122e484 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -55,7 +55,7 @@ code.parent-url {
     }
 
     .has-error > .field-inner > label {
-        @apply text-red;
+        @apply text-red-500;
     }
 
     .field-inner {
diff --git a/resources/css/components/revisions.css b/resources/css/components/revisions.css
index d9c1c6f5f9e..39ada720f7b 100644
--- a/resources/css/components/revisions.css
+++ b/resources/css/components/revisions.css
@@ -37,10 +37,10 @@
     @apply uppercase text-4xs ml-2 text-white rounded-sm;
     height: 16px;
 
-    &.publish { @apply bg-green-light; }
+    &.publish { @apply bg-green-600; }
     &.revision,
     &.restore { @apply text-gray-700; }
-    &.unpublish { @apply bg-red; }
+    &.unpublish { @apply bg-red-500; }
 }
 
 .revision-item-note {
@@ -49,7 +49,7 @@
 }
 
 .revision-item.status-published {
-    .revision-item-bullet { @apply bg-green; }
+    .revision-item-bullet { @apply bg-green-600; }
 }
 
 .revision-item.status-working-copy {
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 22c9b7f2ca4..ceec3c61894 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -66,10 +66,10 @@
     }
 
     .tab-button.has-error {
-        @apply text-red;
+        @apply text-red-500;
 
         &.active {
-            box-shadow: theme('colors.red.DEFAULT') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
+            box-shadow: theme('colors.red.400') 0px 3px inset, rgb(230, 235, 241) -1px 0px inset
         }
     }
 }
@@ -88,3 +88,27 @@
 @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;
+    }
+}
+
+.button-tab {
+    @apply text-gray-700 inline-block focus:outline-none px-2 py-1 mr-1;
+
+    &:hover {
+        @apply text-blue;
+    }
+
+    &.active {
+        @apply bg-blue-100 text-blue-800 rounded;
+    }
+}
diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css
index 96ec0d5394f..6794f672b09 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -68,13 +68,13 @@
 }
 
 .toggle-container.on {
-    @apply bg-green-light border-green;
+    @apply bg-green-500 border-green-600;
     .toggle-slider {
         width: 44px;
     }
 
     .toggle-knob:focus {
-        box-shadow: 0 0 10px rgba(#64BD63, .7);
+        box-shadow: 0 0 10px theme(colors.green.500/70);
     }
 }
 
diff --git a/resources/css/cp.css b/resources/css/cp.css
index ffa183523c6..62a594ca5d6 100644
--- a/resources/css/cp.css
+++ b/resources/css/cp.css
@@ -61,7 +61,6 @@
 @import "components/fieldtypes/environment";
 @import "components/fieldtypes/grid";
 @import "components/fieldtypes/hidden";
-@import "components/fieldtypes/list";
 @import "components/fieldtypes/markdown";
 @import "components/fieldtypes/partial";
 @import "components/fieldtypes/relationship";
diff --git a/resources/css/elements/badges.css b/resources/css/elements/badges.css
index f0b3c4f22e0..490f1bca1f1 100644
--- a/resources/css/elements/badges.css
+++ b/resources/css/elements/badges.css
@@ -16,7 +16,7 @@
 }
 
 .badge-updates {
-    @apply text-3xs not-italic bg-red text-white rounded-full leading-normal;
+    @apply text-3xs not-italic bg-red-500 text-white rounded-full leading-normal;
     padding: 2px 6px 1px;
 }
 
@@ -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..7593297a17c 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -32,13 +32,14 @@ button {
 /*  Default, non-primary action button */
 .btn, .btn-default {
     @apply text-gray-800 shadow-button;
-
     background: linear-gradient(180deg, #fff, #f9fafb);
-    border: 1px solid #c4cdd6;
+    border: 1px solid #D3DDE7;
+    border-bottom: 1px solid #c4cdd6;
+    box-shadow: inset 0 1px 0 0 #fff, 0 1px 0 0 rgba(0, 0, 0,.05), 0 2px 1px 0 theme(colors.gray.600 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
         background: linear-gradient(180deg, #f9fafb, #f4f6f8);
-        border-color: #c4cdd5;
+        border-bottom: 1px solid #BFC7D0;
     }
 
     &.active, &.active:hover {
@@ -54,15 +55,12 @@ button {
 
 /*  Primary action button */
 .btn-primary {
-    @apply text-white;
-    background: linear-gradient(to bottom, theme('colors.blue.500'), theme('colors.blue.600'));
-    border: 1px solid theme('colors.blue.700');
-    box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
+    @apply text-white bg-gradient-to-b from-blue-500 to-blue-600 border border-blue-700 border-b-blue-800;
+    box-shadow: inset 0 1px 0 0 theme('colors.blue.400'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), :active:not(:disabled) {
-        background: linear-gradient(to bottom, theme('colors.blue.600'), theme('colors.blue.700'));
-        border: 1px solid theme('colors.blue.800');
-        box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
+        @apply from-blue-600 to-blue-700 border-blue-800 border-b-blue-900;
+        box-shadow: inset 0 1px 0 0 theme('colors.blue.500'), 0 1px 0 0 rgba(25,30,35,.05), 0 3px 2px -1px theme(colors.blue.900 / .15), 0 0 0 0 transparent;
     }
 
     &:disabled {
@@ -72,18 +70,20 @@ button {
 
 /*  Danger/delete button */
 .btn-danger {
-    background: linear-gradient(180deg, #e53e3e, #c53030);
-    border: 1px solid #9b2c2c;
-    box-shadow: inset 0 1px 0 0 #f56565, 0 1px 0 0 rgba(25,30,35,.05), 0 0 0 0 transparent;
-    color: white;
+    @apply text-white bg-gradient-to-b from-red-500 to-red-600 border border-red-600 border-b-red-900;
+    box-shadow: inset 0 1px 0 0 theme('colors.red.400'), 0 1px 0 0 rgba(0, 0, 0,.05), 0 3px 2px -1px theme(colors.red.900 / .15), 0 0 0 0 transparent;
 
     &:hover:not(:disabled), &:active:not(:disabled) {
-        background: linear-gradient(180deg, #c53030, #9b2c2c);
-        border-color: #742a2a;
+        @apply from-red-600 to-red-700 border border-red-700 border-b-red-900;
     }
 
     &:disabled {
-        @apply text-red-lighter opacity-75;
+        @apply text-red-100 opacity-75;
+    }
+
+    &:focus {
+        @apply ring-red-500 ring-1 ring-offset-1;
+        /* box-shadow: 0 5px 20px theme(colors.red.400 / 0.5); */
     }
 }
 
@@ -97,7 +97,7 @@ button {
     }
 
     &:focus {
-        @apply focus-outline bg-gray-300;
+        @apply ring-2 outline-none;
     }
 
     &:active, &:focus:active {
@@ -111,9 +111,13 @@ button {
 
 /* Size Variations
   ========================================================================== */
-
 .btn-sm {
+    @apply py-1 px-2 h-8;
+}
+
+.btn-xs {
     @apply text-2xs;
+    line-height: 0;
     height: 1.625rem; /*  24px */
     padding: 4px 10px;
 }
diff --git a/resources/css/elements/dropdowns.css b/resources/css/elements/dropdowns.css
index 4991420af72..b7bd59899d1 100644
--- a/resources/css/elements/dropdowns.css
+++ b/resources/css/elements/dropdowns.css
@@ -30,10 +30,10 @@
     }
 
     button.warning, a.warning {
-        @apply text-red;
+        @apply text-red-500;
 
         &:hover {
-            @apply bg-red text-white;
+            @apply bg-red-500 text-white;
         }
     }
 
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index f8e82b455d1..97842f7b3f3 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;
@@ -202,7 +205,7 @@ input.input-text-minimal:read-only,
 
 
 label .required {
-    @apply text-red;
+    @apply text-red-500;
     font-style: normal;
 
     + .localizable-icon {
diff --git a/resources/css/elements/icons.css b/resources/css/elements/icons.css
index 4afa4d6b83f..93feb8b0458 100644
--- a/resources/css/elements/icons.css
+++ b/resources/css/elements/icons.css
@@ -21,31 +21,11 @@ svg {
 	width: 7px;
     flex-shrink: 0;
 
-    &.published { @apply bg-green-light }
+    &.published { @apply bg-green-600 }
     &.draft, &.expired { @apply bg-gray-600 }
     &.scheduled, &.hollow { @apply bg-transparent border border-gray-600 }
 }
 
-.icon-status-draft {
-	@apply bg-gray-700;
-}
-
-.icon-status-hidden {
-    @apply border border-gray-700;
-}
-
-.icon-status-live {
-	@apply bg-green;
-}
-
-.icon-status-error {
-	@apply bg-red;
-}
-
-.icon-status-warning {
-    @apply bg-yellow-dark;
-}
-
 .icon-header-avatar {
     height: 32px;
     width: 32px;
diff --git a/resources/css/elements/tables.css b/resources/css/elements/tables.css
index 635f10a3037..55abfa8c2f5 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,56 +37,56 @@
 	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-3 whitespace-nowrap;
+            &:first-child { @apply rounded-tl-lg; }
+			&:last-child { @apply rounded-tr-lg; }
 			&:hover {
 				@apply text-gray-900;
 			}
 		}
+        th.handle-column {
+            @apply p-0 w-4;
+        }
 		.type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 pr-4 text-right;
-			width: 24px;
-		}
 	}
 
     tbody {
 		outline: none;
         tr {
-			@apply border-b text-sm;
+			@apply border-b border-gray-400 text-sm;
 
 			&.row-selected {
 				@apply bg-gray-200;
 			}
 
 			&:first-child {
-				td:first-child {
-				    @apply rounded-tl;
+				td:first-child, th:first-child {
+				    @apply rounded-tl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-tr;
+				td:last-child, th:last-child {
+				    @apply rounded-tr-md;
 				}
 			}
 
 			&:last-child {
 				@apply border-none;
-				td:first-child {
-				    @apply rounded-bl;
+
+                td:first-child, th:first-child {
+				    @apply rounded-bl-md;
 				}
 
-				td:last-child {
-				    @apply rounded-br;
+				td:last-child, th:last-child {
+				    @apply rounded-br-md;
 				}
 			}
 
@@ -99,25 +99,19 @@
             }
 
             td {
-                @apply py-2 px-4 break-words;
+                @apply py-2 px-4 break-words ;
+            }
+
+            td.table-drag-handle {
+                @apply w-1 border-r h-full py-2 px-0;
             }
 		}
-		.type-column {
+
+        .type-column {
 			text-align: right;
 		}
-		.actions-column {
-			@apply p-0 text-right;
-			width: 24px;
-			.rotating-dots-button {
-				margin-right: 18px;
-			}
-		}
     }
 
-    .checkbox-column {
-		@apply w-4 pr-0 relative z-10;
-		padding-left: 20px;
-    }
 
     .sortable-column {
         @apply cursor-pointer select-none;
@@ -127,12 +121,10 @@
         }
 
         &.current-column {
-            @apply font-bold;
             svg { opacity: 1; }
         }
 
         svg {
-            /*  transition: all 150ms ease; */
             opacity: 0;
         }
 
@@ -146,11 +138,67 @@
     }
 }
 
-@screen md {
+/* Sticky Meta Columns */
+.data-table {
+    thead th.checkbox-column {
+        @apply p-0 pr-2 z-10 sticky -left-px;
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    thead th.actions-column {
+        @apply p-0 pl-2 text-right sticky z-1 -right-px;
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+        width: 45px;
+        min-width: 45px;
+    }
+
+    tbody th.checkbox-column {
+        @apply z-1 px-3 sticky -left-px;
+        background-image: linear-gradient(to right, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+    }
+
+    tbody th.actions-column {
+        @apply p-0 pl-2 text-right sticky -right-px z-1;
+        background-image: linear-gradient(to left, rgba(255,255,255,1) 70%, rgba(255,255,255,0) 100%);
+        min-width: 45px;
+        width: 45px;
+    }
+
+    tbody tr.row-selected .checkbox-column {
+        background-image: linear-gradient(to left, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr.row-selected .actions-column {
+        background-image: linear-gradient(to right, theme(colors.gray.200) 70%, theme(colors.gray.200 / 0%) 100%);
+    }
+
+    tbody tr:hover .checkbox-column {
+        background-image: linear-gradient(to right, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+
+    tbody tr:hover .actions-column {
+        background-image: linear-gradient(to left, theme(colors.gray.100) 70%, theme(colors.gray.100 / 0%) 100%);
+    }
+}
+
+/* .data-table[data-size="sm"] {
+    thead th.checkbox-column,
+    thead th.actions-column,
+    tbody th.checkbox-column,
+    tbody th.actions-column {
+        position: static !important;
+        background: none !important;
+    }
+} */
+
+
+/* @screen md {
 	.data-table {
 		@apply w-full table;
 	}
-}
+} */
 
 .data-list-header ~ .data-table {
     thead th {
@@ -257,3 +305,59 @@ table.control {
         padding-left: 30px;
     }
 }
+
+
+/* Index Fields
+  ========================================================================== */
+
+.bard-index-field,
+.code-index-field,
+.markdown-index-field,
+.text-index-field,
+.textarea-index-field {
+    @apply line-clamp-2 text-xs;
+}
+
+.title-index-field {
+    @apply line-clamp-2;
+    min-width: 10vw;
+}
+
+.relationship-index-field {
+    min-width: 10vw;
+    .relationship-index-field-item {
+        @apply rounded bg-gray-100 border px-1 flex items-center text-2xs;
+        a {
+            @apply line-clamp-1;
+        }
+    }
+}
+
+.date-index-field {
+    @apply whitespace-nowrap text-gray-800;
+}
+
+.slug-index-field {
+    @apply line-clamp-2 font-mono text-2xs;
+}
+
+.status-index-field {
+    @apply inline-block text-xs bg-gray-300 text-gray-800 shrink rounded-full px-2 py-0.5 text-center justify-center;
+
+    &.status-published:not(.status-private) {
+        @apply text-green-900 bg-green-200 ;
+    }
+
+    &.status-scheduled {
+        @apply text-amber-900 bg-amber-200;
+    }
+}
+
+.role-index-field, .groups-index-field {
+    @apply flex flex-wrap -mb-1.5;
+
+    .role-index-field-item,
+    .groups-index-field-item {
+        @apply rounded bg-gray-100 border px-1 inline-block text-2xs line-clamp-1 mb-1;
+    }
+}
diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index 71642bfd506..b9fa558fdaa 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -186,7 +186,7 @@
 	}
 
 	span {
-        @apply text-md shrink-0 font-thin;
+        @apply text-md shrink-0 font-normal;
 	}
 }
 
diff --git a/resources/js/components/DropdownList.vue b/resources/js/components/DropdownList.vue
index cc78b5dbc3b..6fd4b0e2786 100644
--- a/resources/js/components/DropdownList.vue
+++ b/resources/js/components/DropdownList.vue
@@ -1,5 +1,5 @@
 <template>
-    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose">
+    <popover class="dropdown-list" :disabled="disabled" :placement="placement" :scroll="scroll" :autoclose="autoclose" :strategy="strategy">
         <template #trigger>
             <slot name="trigger">
                 <button class="rotating-dots-button" :aria-label="__('Open Dropdown')">
@@ -30,6 +30,11 @@ export default {
             type: Boolean,
             default: false
         }
+    },
+    computed: {
+        strategy() {
+            return this.scroll ? 'fixed' : 'absolute';
+        }
     }
 }
 </script>
diff --git a/resources/js/components/FavoriteCreator.vue b/resources/js/components/FavoriteCreator.vue
index 7210ec0b4c4..49e1a95c05a 100644
--- a/resources/js/components/FavoriteCreator.vue
+++ b/resources/js/components/FavoriteCreator.vue
@@ -17,7 +17,7 @@
         </popover>
         <div v-else>
             <button @click="remove" class="h-6 w-6 block outline-none p-1 text-gray hover:text-gray-800" v-tooltip="__('Unpin from Favorites')" :aria-label="__('Unpin from Favorites')">
-                <svg-icon name="pin" class="text-green"></svg-icon>
+                <svg-icon name="pin" class="text-green-600"></svg-icon>
             </button>
         </div>
     </div>
diff --git a/resources/js/components/LengthLimiter.vue b/resources/js/components/LengthLimiter.vue
index fb8c409234f..a93282a8fda 100644
--- a/resources/js/components/LengthLimiter.vue
+++ b/resources/js/components/LengthLimiter.vue
@@ -16,7 +16,7 @@ export default {
             return (this.value) ? this.value.length : 0
         },
         limitIndicatorColor() {
-            return this.limitReached ? 'text-red' : 'text-gray'
+            return this.limitReached ? 'text-red-500' : 'text-gray'
         }
     }
 
diff --git a/resources/js/components/Popover.vue b/resources/js/components/Popover.vue
index ee15514833e..f740296b8f3 100644
--- a/resources/js/components/Popover.vue
+++ b/resources/js/components/Popover.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="popover-container" :class="{'popover-open': isOpen}" v-on-clickaway="close" @mouseleave="leave">
+    <div class="popover-container" :class="{'popover-open': isOpen}" v-on-clickaway="clickawayClose" @mouseleave="leave">
         <div @click="toggle" ref="trigger" aria-haspopup="true" :aria-expanded="isOpen" v-if="$scopedSlots.default">
             <slot name="trigger"></slot>
         </div>
@@ -20,26 +20,34 @@ export default {
     mixins: [ clickaway ],
 
     props: {
-        disabled: {
+        autoclose: {
             type: Boolean,
             default: false
         },
-        placement: {
-            type: String,
-            default: 'bottom-end',
+        clickaway: {
+            type: Boolean,
+            default: true
+        },
+        disabled: {
+            type: Boolean,
+            default: false
         },
         offset: {
             type: Array,
             default: () => [0, 10]
         },
+        placement: {
+            type: String,
+            default: 'bottom-end',
+        },
         scroll: {
             type: Boolean,
             default: false
         },
-        autoclose: {
-            type: Boolean,
-            default: false
-        }
+        strategy: {
+            type: String,
+            default: 'absolute'
+        },
     },
 
     data() {
@@ -63,6 +71,7 @@ export default {
         bindPopper() {
             this.popper = createPopper(this.$refs.trigger, this.$refs.popover, {
                 placement: this.placement,
+                strategy: this.strategy,
                 modifiers: [
                     {
                         name: 'offset',
@@ -88,11 +97,17 @@ export default {
             this.escBinding = this.$keys.bind('esc', e => this.close())
             this.popper && this.popper.update();
         },
+        clickawayClose() {
+            if (this.clickaway) {
+                this.close();
+            }
+        },
         close() {
             this.isOpen = false;
             if (this.escBinding) {
                 this.escBinding.destroy();
             }
+            this.$emit('closed');
         },
         leave() {
             if (this.autoclose) {
diff --git a/resources/js/components/SessionExpiry.vue b/resources/js/components/SessionExpiry.vue
index e867944edcb..69456051426 100644
--- a/resources/js/components/SessionExpiry.vue
+++ b/resources/js/components/SessionExpiry.vue
@@ -22,11 +22,11 @@
                 <div class="form-group">
                     <label v-text="__('messages.session_expiry_enter_password')" />
                     <small
-                        class="help-block text-red"
+                        class="help-block text-red-500"
                         v-if="errors.email"
                         v-text="errors.email[0]" />
                     <small
-                        class="help-block text-red"
+                        class="help-block text-red-500"
                         v-if="errors.password"
                         v-text="errors.password[0]" />
                     <div class="flex items-center">
diff --git a/resources/js/components/UpdatesBadge.vue b/resources/js/components/UpdatesBadge.vue
index 54fc4ca7a2f..36f7e3d26ef 100644
--- a/resources/js/components/UpdatesBadge.vue
+++ b/resources/js/components/UpdatesBadge.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-if="count" class="badge-sm bg-red">
+    <span v-if="count" class="badge-sm bg-red-500">
         {{ count }}
     </span>
 </template>
diff --git a/resources/js/components/ValidationErrors.vue b/resources/js/components/ValidationErrors.vue
index c7ec280a7a7..7d8c8ce9c30 100644
--- a/resources/js/components/ValidationErrors.vue
+++ b/resources/js/components/ValidationErrors.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div v-if="hasErrors" class="bg-red text-white p-4 rounded-md shadow mb-4">
+    <div v-if="hasErrors" class="bg-red-500 text-white p-4 rounded-md shadow mb-4">
         <p v-for="(error, i) in flattenedErrors" :key="i">{{ error }}</p>
     </div>
 
diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index ad75e15d164..6037b5e8cb5 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -44,7 +44,7 @@
                     @selections-updated="(ids) => $emit('selections-updated', ids)"
                 >
                     <div slot-scope="{ filteredRows: rows }" :class="modeClass">
-                        <div class="card p-0" :class="{ 'rounded-tl-none': showContainerTabs, 'select-none' : shifting }">
+                        <div class="card overflow-hidden p-0" :class="{ 'rounded-tl-none': showContainerTabs, 'select-none' : shifting }">
                             <div class="relative w-full">
 
                                 <div class="data-list-header">
@@ -90,6 +90,7 @@
                                 class="-mt-px"
                             />
 
+                            <div class="overflow-x-auto overflow-y-hidden">
                             <data-list-table
                                 v-if="mode === 'table' && ! containerIsEmpty"
                                 :allow-bulk-actions="true"
@@ -110,7 +111,7 @@
                                         </td>
                                         <td :colspan="columns.length" />
                                     </tr>
-                                    <tr v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation">
+                                    <tr v-for="(folder, i) in folders" :key="folder.path" v-if="!restrictFolderNavigation && page === 1">
                                         <td />
                                         <td @click="selectFolder(folder.path)">
                                             <a class="flex items-center cursor-pointer group">
@@ -121,8 +122,8 @@
                                         <td />
                                         <td />
 
-                                        <td class="actions-column" :colspan="columns.length">
-                                            <dropdown-list v-if="folderActions(folder).length">
+                                        <th class="actions-column" :colspan="columns.length">
+                                            <dropdown-list placement="left-start" scroll v-if="folderActions(folder).length">
                                                 <!-- TODO: Folder edit -->
                                                 <!-- <dropdown-item :text="__('Edit')" @click="editedFolderPath = folder.path" /> -->
 
@@ -143,7 +144,7 @@
                                                 @closed="editedFolderPath = null"
                                                 @updated="folderUpdated(i, $event)"
                                             />
-                                        </td>
+                                        </th>
                                     </tr>
                                 </template>
 
@@ -157,7 +158,7 @@
                                 </template>
 
                                 <template slot="actions" slot-scope="{ row: asset }">
-                                    <dropdown-list>
+                                    <dropdown-list placement="left-start" scroll>
                                         <dropdown-item :text="__(canEdit ? 'Edit' : 'View')" @click="edit(asset.id)" />
                                         <div class="divider" v-if="asset.actions.length" />
                                         <data-list-inline-actions
@@ -171,6 +172,7 @@
                                 </template>
 
                             </data-list-table>
+                            </div>
 
                             <!-- Grid Mode -->
                             <div v-if="mode === 'grid' && ! containerIsEmpty">
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 9848e728fcc..a466cbd3888 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -60,7 +60,7 @@
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Download') }}</span>
                         </button>
 
-                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-light rounded items-center text-center px-3 py-1.5">
+                        <button v-if="allowDeleting && canRunAction('delete')" @click="runAction('delete')" class="flex bg-gray-750 hover:bg-gray-900 hover:text-red-400 rounded items-center text-center px-3 py-1.5">
                             <svg-icon name="trash-line" class="h-4" />
                             <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
                         </button>
@@ -120,14 +120,14 @@
 
                     @updated="values = { ...$event, focus: values.focus }"
                 >
-                    <div class="w-full sm:p-4 md:py-0 md:w-1/3 md:grow h1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
+                    <div class="w-full sm:p-4 md:pt-px md:w-1/3 md:grow h-1/2 md:h-full overflow-scroll" slot-scope="{ setFieldValue, setFieldMeta }">
 
                         <div v-if="saving" class="loading">
                             <loading-graphic text="Saving" />
                         </div>
 
                         <div class="card p-0">
-                            <div v-if="error" class="bg-red text-white p-4 shadow mb-4" v-text="error" />
+                            <div v-if="error" class="bg-red-500 text-white p-4 shadow mb-4" v-text="error" />
                             <publish-fields
                                 :fields="fields"
                                 :read-only="readOnly"
@@ -268,7 +268,6 @@ export default {
     },
 
     mounted() {
-        document.body.classList.add('overflow-hidden')
         this.$modal.show('asset-editor');
         this.load();
     },
@@ -363,7 +362,6 @@ export default {
         close() {
             this.$modal.hide('asset-editor');
             this.$emit('closed');
-            document.body.classList.remove('overflow-hidden')
         },
 
         shouldClose() {
diff --git a/resources/js/components/assets/Upload.vue b/resources/js/components/assets/Upload.vue
index 33004081232..505cdbad8e4 100644
--- a/resources/js/components/assets/Upload.vue
+++ b/resources/js/components/assets/Upload.vue
@@ -1,9 +1,9 @@
 <template>
 
-    <div class="flex items-center my-4" :class="{'text-red': status == 'error'}">
+    <div class="flex items-center my-4" :class="{'text-red-500': status == 'error'}">
 
         <div class="mx-2 flex items-center">
-            <svg-icon name="micro-warning" class="text-red h-4 w-4" v-if="status === 'error'" />
+            <svg-icon name="micro-warning" class="text-red-500 h-4 w-4" v-if="status === 'error'" />
             <loading-graphic v-else :inline="true" text="" />
         </div>
 
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index 05ef83c09d1..20c0ac68aff 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -14,7 +14,7 @@
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
                 <div v-if="errors.title">
-                    <small class="help-block text-red" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="blueprint.title" autofocus="autofocus">
             </div>
@@ -23,7 +23,7 @@
                 <label class="block">{{ __('Hidden') }}</label>
                 <small class="help-block">{{ __('messages.blueprints_hidden_instructions') }}</small>
                 <div v-if="errors.hidden">
-                    <small class="help-block text-red" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.hidden" :key="i" v-text="error" />
                 </div>
                 <toggle-input name="hidden" v-model="blueprint.hidden" />
             </div>
@@ -33,7 +33,7 @@
             <h2>{{ __('Tab Sections') }}</h2>
             <p class="max-w-lg">{{ __('messages.tab_sections_instructions') }}</p>
             <div v-if="errors.sections">
-                <small class="help-block text-red" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
+                <small class="help-block text-red-500" v-for="(error, i) in errors.sections" :key="i" v-text="error" />
             </div>
         </div>
 
diff --git a/resources/js/components/blueprints/Listing.vue b/resources/js/components/blueprints/Listing.vue
index 0c03bff7881..730ea0d44a2 100644
--- a/resources/js/components/blueprints/Listing.vue
+++ b/resources/js/components/blueprints/Listing.vue
@@ -7,7 +7,7 @@
             >
                 <template slot="cell-title" slot-scope="{ row: blueprint }">
                     <div class="flex items-center">
-                        <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green']" />
+                        <div class="little-dot mr-2" :class="[blueprint.hidden ? 'hollow' : 'bg-green-600']" />
                         <a :href="blueprint.edit_url">{{ blueprint.title }}</a>
                     </div>
                 </template>
diff --git a/resources/js/components/collections/DeleteLocalizationConfirmation.vue b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
index 590aeee8f7c..50c194adc4e 100644
--- a/resources/js/components/collections/DeleteLocalizationConfirmation.vue
+++ b/resources/js/components/collections/DeleteLocalizationConfirmation.vue
@@ -23,7 +23,7 @@
                             </div>
                         </div>
 
-                        <small v-if="error" class="help-block text-red mt-2 mb-0" v-text="__('statamic::validation.required')" />
+                        <small v-if="error" class="help-block text-red-500 mt-2 mb-0" v-text="__('statamic::validation.required')" />
                     </div>
                 </div>
             </div>
diff --git a/resources/js/components/collections/Listing.vue b/resources/js/components/collections/Listing.vue
index ab2f45da8a2..265933f1a9b 100644
--- a/resources/js/components/collections/Listing.vue
+++ b/resources/js/components/collections/Listing.vue
@@ -1,12 +1,12 @@
 <template>
     <data-list ref="dataList" :columns="columns" :rows="rows">
-        <div class="card p-0" slot-scope="{ filteredRows: rows }">
+        <div class="card overflow-hidden p-0" slot-scope="{ filteredRows: rows }">
             <data-list-table :rows="rows">
                 <template slot="cell-title" slot-scope="{ row: collection }">
                     <a :href="collection.entries_url">{{ collection.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: collection, index }">
-                    <dropdown-list>
+                    <dropdown-list scroll placement="left-start">
                         <dropdown-item :text="__('View')" :redirect="collection.entries_url" />
                         <dropdown-item v-if="collection.url" :text="__('Visit URL')" :external-link="collection.url"  />
                         <dropdown-item v-if="collection.editable" :text="__('Edit Collection')" :redirect="collection.edit_url" />
diff --git a/resources/js/components/data-list/Action.vue b/resources/js/components/data-list/Action.vue
index fbf6596b468..08db46cf4a6 100644
--- a/resources/js/components/data-list/Action.vue
+++ b/resources/js/components/data-list/Action.vue
@@ -13,7 +13,7 @@
         >
             <div v-if="confirmationText" v-text="confirmationText" :class="{ 'mb-4': warningText || action.fields.length }" />
 
-            <div v-if="warningText" v-text="warningText" class="text-red" :class="{ 'mb-4': action.fields.length }" />
+            <div v-if="warningText" v-text="warningText" class="text-red-500" :class="{ 'mb-4': action.fields.length }" />
 
             <publish-container
                 v-if="action.fields.length"
diff --git a/resources/js/components/data-list/BulkActions.vue b/resources/js/components/data-list/BulkActions.vue
index 6f4e246407f..829e2dac516 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
@@ -19,7 +20,7 @@
                 <button
                     slot-scope="{ action, select }"
                     class="input-group-item"
-                    :class="{'text-red': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
+                    :class="{'text-red-500': action.dangerous, 'rounded-r': index + 1 === sortedActions.length }"
                     @click="select"
                     v-text="__(action.title)" />
             </data-list-action>
diff --git a/resources/js/components/data-list/ColumnPicker.vue b/resources/js/components/data-list/ColumnPicker.vue
index ab7069c4612..dd37ad9fc3a 100644
--- a/resources/js/components/data-list/ColumnPicker.vue
+++ b/resources/js/components/data-list/ColumnPicker.vue
@@ -1,41 +1,44 @@
 <template>
-    <popover ref="popover">
+    <popover ref="popover" scroll strategy="fixed">
 
         <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>
 
-        <div class="column-picker">
+        <div class="column-picker rounded-t-md bg-gray-100 w-64">
+            <header v-text="__('Displayed Columns')" class="border-b px-2 py-2 text-sm bg-white rounded-t-md font-medium"/>
             <sortable-list
                 v-model="selectedColumns"
                 :vertical="true"
-                item-class="column-picker-item"
-                handle-class="column-picker-item"
-                :mirror="false"
+                item-class="item"
+                handle-class="item"
+                append-to=".popover-content"
             >
-                <div class="outline-none text-left px-2 py-2">
-                    <h6 v-text="__('Displayed Columns')" class="p-2"/>
-                    <div class="column-picker-item sortable" v-for="column in selectedColumns" :key="column.field">
-                        <label>
+                <div class="flex flex-col space-y-1 px-2 p-3 select-none">
+                    <div class="item sortable cursor-grab" v-for="column in selectedColumns" :key="column.field">
+                        <div class="item-move py-1">&nbsp;</div>
+                        <div class="flex flex-1 ml-2 items-center p-0">
                             <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column)" :disabled="selectedColumns.length === 1" />
                             {{ column.label }}
-                        </label>
+                        </div>
                     </div>
                 </div>
             </sortable-list>
 
-            <div v-if="hiddenColumns.length" class="outline-none text-left px-2 pb-2">
-                <h6 v-text="__('Available Columns')" class="px-2 pb-2"/>
-                <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
-                    <label class="cursor-pointer">
-                        <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
-                        {{ column.label }}
-                    </label>
+            <div v-if="hiddenColumns.length" class="outline-none text-left">
+                <header v-text="__('Available Columns')" class="border-y px-2 py-2 text-sm bg-white font-medium"/>
+                <div class="flex flex-col space-y-1 py-2 px-3 select-none">
+                    <div class="column-picker-item" v-for="column in hiddenColumns" :key="column.field">
+                        <label class="flex items-center cursor-pointer">
+                            <input type="checkbox" class="mr-2" v-model="column.visible" @change="columnToggled(column) "/>
+                            {{ column.label }}
+                        </label>
+                    </div>
                 </div>
             </div>
         </div>
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..f045459e440 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 class="pr-2">
+        <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..a56697e61d3 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" scroll strategy="fixed">
                 <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" scroll strategy="fixed">
                 <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..bc0895395ec 100644
--- a/resources/js/components/data-list/HasFilters.js
+++ b/resources/js/components/data-list/HasFilters.js
@@ -2,11 +2,13 @@ export default {
 
     data() {
         return {
+            activeFilterBadges: {},
+            activeFilters: {},
             activePreset: null,
             activePresetPayload: {},
             searchQuery: '',
-            activeFilters: {},
-            activeFilterBadges: {},
+            showFilters: this.$config.get('alwaysShowFilters'),
+            alwaysShowFilters: this.$config.get('alwaysShowFilters'),
         }
     },
 
@@ -22,12 +24,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 +101,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 aa470f9b805..796e789fdaa 100644
--- a/resources/js/components/data-list/Table.vue
+++ b/resources/js/components/data-list/Table.vue
@@ -1,8 +1,8 @@
 <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">
+    <table :data-size="relativeColumnsSize" ref="table" tabindex="0" class="data-table" :class="{ 'select-none' : shifting }" @keydown.shift="shiftDown" @keyup="clearShift">
+        <thead v-if="allowBulkActions || visibleColumns.length > 1">
             <tr>
-                <th class="checkbox-column" v-if="allowBulkActions || reorderable">
+                <th :class="{'checkbox-column': ! reorderable, 'handle-column': reorderable}" v-if="allowBulkActions || reorderable">
                     <data-list-toggle-all ref="toggleAll" v-if="allowBulkActions && !singleSelect" />
                 </th>
                 <th
@@ -14,10 +14,11 @@
                         'cursor-not-allowed': !sortable,
                         'text-right pr-8': column.numeric,
                     }"
+                    class="group"
                     @click.prevent="changeSortColumn(column.field)"
                 >
                     <span v-text="column.label" />
-                    <svg v-if="sharedState.sortColumn === column.field" :class="sharedState.sortDirection" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1">
+                    <svg :class="[sharedState.sortDirection, {'opacity-100 pointer-events-none': sharedState.sortColumn === column.field}]" height="8" width="8" viewBox="0 0 10 6.5" class="ml-1 opacity-0 group-hover:opacity-100">
                         <path d="M9.9,1.4L5,6.4L0,1.4L1.4,0L5,3.5L8.5,0L9.9,1.4z" fill="currentColor"/>
                     </svg>
                 </th>
@@ -25,9 +26,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
@@ -42,7 +41,7 @@
             <slot name="tbody-start" />
             <tr v-for="(row, index) in rows" :key="row.id" class="sortable-row outline-none" :class="{'row-selected': sharedState.selections.includes(row.id)}">
                 <td class="table-drag-handle" v-if="reorderable"></td>
-                <td class="checkbox-column" v-if="allowBulkActions && !reorderable">
+                <th class="checkbox-column" v-if="allowBulkActions && !reorderable">
                     <input
                         v-if="!reorderable"
                         type="checkbox"
@@ -52,7 +51,7 @@
                         :id="`checkbox-${row.id}`"
                         @click="checkboxClicked(row, index, $event)"
                     />
-                </td>
+                </th>
                 <td v-for="column in visibleColumns" :key="column.field" @click="rowClicked(row, index, $event)" :width="column.width" :class="{'text-right pr-8': column.numeric}">
                     <slot
                         :name="`cell-${column.field}`"
@@ -72,14 +71,14 @@
                         <template v-if="type === 'terms'">{{ row.taxonomy.title }}</template>
                     </span>
                 </td>
-                <td class="actions-column">
+                <th class="actions-column">
                     <slot
                         name="actions"
                         :row="row"
                         :index="actualIndex(row)"
                         :display-index="index"
                     ></slot>
-                </td>
+                </th>
             </tr>
         </tbody>
         </sortable-list>
@@ -125,13 +124,6 @@ export default {
             type: Boolean,
             default: false
         },
-        allowColumnPicker: {
-            type: Boolean,
-            default: false
-        },
-        columnPreferencesKey: {
-            type: String,
-        },
         type: {
             type: String
         },
@@ -154,6 +146,14 @@ export default {
             return this.sharedState.selections.length === this.sharedState.maxSelections;
         },
 
+        relativeColumnsSize() {
+            if (this.visibleColumns.length <= 4) return 'sm';
+            if (this.visibleColumns.length <= 8) return 'md';
+            if (this.visibleColumns.length >= 12) return 'lx';
+
+            return 'xl';
+        },
+
         singleSelect() {
             return this.sharedState.maxSelections === 1;
         },
diff --git a/resources/js/components/data-list/ToggleAll.vue b/resources/js/components/data-list/ToggleAll.vue
index 3fe97a95c75..0cbf17ec09d 100644
--- a/resources/js/components/data-list/ToggleAll.vue
+++ b/resources/js/components/data-list/ToggleAll.vue
@@ -1,5 +1,5 @@
 <template>
-    <label for="checkerOfAllBoxes" class="btn btn-sm px-1.5 flex items-center justify-center -ml-1.5 relative -left-px cursor-pointer">
+    <label for="checkerOfAllBoxes" class="flex items-center justify-center relative cursor-pointer">
         <input type="checkbox" @change="toggle" :checked="anyItemsChecked" id="checkerOfAllBoxes" class="relative top-0">
     </label>
 </template>
diff --git a/resources/js/components/entries/Listing.vue b/resources/js/components/entries/Listing.vue
index 8ea523d365d..4bcb08fe331 100644
--- a/resources/js/components/entries/Listing.vue
+++ b/resources/js/components/entries/Listing.vue
@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <div v-if="initializing" class="card loading">
             <loading-graphic />
         </div>
@@ -16,17 +15,39 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <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="card overflow-hidden p-0 relative">
+                    <div class="flex items-center justify-between p-2 text-sm border-b">
+
+                        <data-list-filter-presets
+                            ref="presets"
+                            v-show="alwaysShowFilters || ! 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"
+                        />
+
+                        <data-list-search class="h-8" v-if="showFilters" ref="search" v-model="searchQuery" :placeholder="searchPlaceholder" />
+
+                        <div class="flex ml-2 space-x-2">
+                            <button class="btn btn-sm" v-text="__('Cancel')" v-show="! alwaysShowFilters && showFilters" @click="filtersHide" />
+                            <button class="btn btn-sm" v-text="__('Save')" v-show="showFilters && isDirty" @click="$refs.presets.savePreset()" />
+                            <button class="btn flex items-center btn-sm w-12" @click="handleShowFilters" v-if="! showFilters" v-tooltip="__('Show Filter Controls (F)')">
+                                <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"
@@ -53,43 +75,45 @@
                         @started="actionStarted"
                         @completed="actionCompleted"
                     />
-
-                    <data-list-table
-                        v-show="items.length"
-                        :allow-bulk-actions="!reordering"
-                        :loading="loading"
-                        :reorderable="reordering"
-                        :sortable="!reordering"
-                        :toggle-selection-on-row-click="true"
-                        :allow-column-picker="true"
-                        :column-preferences-key="preferencesKey('columns')"
-                        @sorted="sorted"
-                        @reordered="reordered"
-                    >
-                        <template slot="cell-title" slot-scope="{ row: entry }">
-                            <div class="flex items-center">
-                                <div class="little-dot mr-2" :class="getStatusClass(entry)" />
-                                <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
-                            </div>
-                        </template>
-                        <template slot="cell-slug" slot-scope="{ row: entry }">
-                            <span class="font-mono text-2xs">{{ entry.slug }}</span>
-                        </template>
-                        <template slot="actions" slot-scope="{ row: entry, index }">
-                            <dropdown-list>
-                                <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" />
-                                <data-list-inline-actions
-                                    :item="entry.id"
-                                    :url="actionUrl"
-                                    :actions="entry.actions"
-                                    @started="actionStarted"
-                                    @completed="actionCompleted"
-                                />
-                            </dropdown-list>
-                        </template>
-                    </data-list-table>
+                    <div class="overflow-x-auto overflow-y-hidden">
+                        <data-list-table
+                            v-show="items.length"
+                            :allow-bulk-actions="!reordering"
+                            :loading="loading"
+                            :reorderable="reordering"
+                            :sortable="!reordering"
+                            :toggle-selection-on-row-click="true"
+                            @sorted="sorted"
+                            @reordered="reordered"
+                        >
+                            <template slot="cell-title" slot-scope="{ row: entry }">
+                                <div class="title-index-field">
+                                    <div class="little-dot mr-2" v-tooltip="getStatusLabel(entry)" :class="getStatusClass(entry)" v-if="! columnShowing('status')" />
+                                    <a :href="entry.edit_url" @click.stop>{{ entry.title }}</a>
+                                </div>
+                            </template>
+                            <template slot="cell-status" slot-scope="{ row: entry }">
+                                <div class="status-index-field select-none" v-tooltip="getStatusTooltip(entry)" :class="`status-${entry.status}`" v-text="getStatusLabel(entry)" />
+                            </template>
+                            <template slot="cell-slug" slot-scope="{ row: entry }">
+                                <div class="slug-index-field" :title="entry.slug">{{ entry.slug }}</div>
+                            </template>
+                            <template slot="actions" slot-scope="{ row: entry, index }">
+                                <dropdown-list placement="left-start" scroll>
+                                    <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" />
+                                    <data-list-inline-actions
+                                        :item="entry.id"
+                                        :url="actionUrl"
+                                        :actions="entry.actions"
+                                        @started="actionStarted"
+                                        @completed="actionCompleted"
+                                    />
+                                </dropdown-list>
+                            </template>
+                        </data-list-table>
+                    </div>
                 </div>
                 <data-list-pagination
                     class="mt-6"
@@ -101,7 +125,6 @@
                 />
             </div>
         </data-list>
-
     </div>
 </template>
 
@@ -167,12 +190,36 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-green';
+                return 'bg-green-600';
             } else {
                 return 'bg-gray-400';
             }
         },
 
+        getStatusLabel(entry) {
+            if (entry.status === 'published') {
+                return __('Published');
+            } else if (entry.status === 'scheduled') {
+                return __('Scheduled');
+            } else if (entry.status === 'expired') {
+                return __('Expired');
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
+        getStatusTooltip(entry) {
+            if (entry.status === 'published') {
+                return __('messages.status_published_with_date', {date: entry.date})
+            } else if (entry.status === 'scheduled') {
+                return __('messages.status_scheduled_with_date', {date: entry.date})
+            } else if (entry.status === 'expired') {
+                return __('messages.status_expired_with_date', {date: entry.date})
+            } else if (entry.status === 'draft') {
+                return __('Draft');
+            }
+        },
+
         reorder() {
             this.filtersReset();
 
@@ -189,6 +236,10 @@ export default {
             this.request();
         },
 
+        columnShowing(column) {
+            return this.visibleColumns.find(c => c.field === column);
+        },
+
         reordered(items) {
             this.items = items;
         },
@@ -215,7 +266,6 @@ export default {
                     this.$toast.error(__('Something went wrong'));
                 });
         },
-
     }
 
 }
diff --git a/resources/js/components/entries/PublishActions.vue b/resources/js/components/entries/PublishActions.vue
index 987dce75662..772005a7a8e 100644
--- a/resources/js/components/entries/PublishActions.vue
+++ b/resources/js/components/entries/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-red" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/entries/PublishForm.vue b/resources/js/components/entries/PublishForm.vue
index ac2bec3fb63..c83a0105766 100644
--- a/resources/js/components/entries/PublishForm.vue
+++ b/resources/js/components/entries/PublishForm.vue
@@ -136,7 +136,7 @@
                                 >
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
                                     <div class="mb-1 flex items-center" v-if="published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('Entry has a published version')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-else>
@@ -144,7 +144,7 @@
                                         <span class="text-2xs" v-text="__('Entry has not been published')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('This is the published version')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-if="isDirty">
@@ -171,9 +171,9 @@
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
                                             <span class="little-dot mr-2" :class="{
-                                                'bg-green': option.published,
+                                                'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
-                                                'bg-red': !option.exists
+                                                'bg-red-500': !option.exists
                                             }" />
                                             {{ option.name }}
                                             <loading-graphic
diff --git a/resources/js/components/entries/Widget.vue b/resources/js/components/entries/Widget.vue
index 6f0529cd58c..057467dec00 100644
--- a/resources/js/components/entries/Widget.vue
+++ b/resources/js/components/entries/Widget.vue
@@ -16,7 +16,7 @@
                 <data-list-table :loading="loading">
                     <template slot="cell-title" slot-scope="{ row: entry }">
                         <div class="flex items-center">
-                            <div class="little-dot mr-2" :class="[entry.published ? 'bg-green' : 'bg-gray-400']" />
+                            <div class="little-dot mr-2" :class="[entry.published ? 'bg-green-600' : 'bg-gray-400']" />
                             <a :href="entry.edit_url">{{ entry.title }}</a>
                         </div>
                     </template>
diff --git a/resources/js/components/field-conditions/Builder.vue b/resources/js/components/field-conditions/Builder.vue
index 2799832962b..5a5c44885ac 100644
--- a/resources/js/components/field-conditions/Builder.vue
+++ b/resources/js/components/field-conditions/Builder.vue
@@ -57,7 +57,7 @@
                     class="ml-4" />
 
                 <button @click="remove(index)" class="btn-close ml-2 group">
-                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-red" />
+                    <svg-icon name="trash" class="w-4 h-4 group-hover:text-red-500" />
                 </button>
             </div>
 
diff --git a/resources/js/components/fieldsets/EditForm.vue b/resources/js/components/fieldsets/EditForm.vue
index 8c5a16d06f7..9b173c10747 100644
--- a/resources/js/components/fieldsets/EditForm.vue
+++ b/resources/js/components/fieldsets/EditForm.vue
@@ -16,7 +16,7 @@
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.fieldsets_title_instructions') }}</small>
                 <div v-if="errors.title">
-                    <small class="help-block text-red" v-for="(error, i) in errors.title" :key="i" v-text="error" />
+                    <small class="help-block text-red-500" v-for="(error, i) in errors.title" :key="i" v-text="error" />
                 </div>
                 <input type="text" name="title" class="input-text" v-model="fieldset.title" autofocus="autofocus">
             </div>
diff --git a/resources/js/components/fieldtypes/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
index 5f3351e01de..eed1aaaa3c2 100644
--- a/resources/js/components/fieldtypes/DateFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="datetime">
+    <div class="datetime min-w-[145px]">
 
         <button type="button" class="btn flex mb-2 md:mb-0 items-center pl-3" v-if="!isReadOnly && config.inline === false && !hasDate" @click="addDate" tabindex="0">
             <svg-icon name="calendar" class="w-4 h-4 mr-2"></svg-icon>
@@ -7,7 +7,8 @@
     	</button>
 
         <div v-if="hasDate || config.inline"
-            class="date-time-container flex-col @xs:flex-row"
+            class="date-time-container flex flow-col @sm:flex-row"
+            :class="config.time_seconds_enabled ? 'space-x-1' : 'space-x-3'"
         >
 
             <div class="flex-1 date-container">
@@ -86,7 +87,7 @@
                 </v-date-picker>
             </div>
 
-            <div v-if="config.time_enabled && !isRange" class="time-container mt-2 @xs:ml-2 @xs:mt-0 time-fieldtype">
+            <div v-if="config.time_enabled && !isRange" class="time-container @xs:ml-2 @xs:mt-0 time-fieldtype">
 				<time-fieldtype
                     v-if="hasTime"
                     ref="time"
diff --git a/resources/js/components/fieldtypes/ListFieldtype.vue b/resources/js/components/fieldtypes/ListFieldtype.vue
index a805e0cd9be..bd2bf8f5259 100644
--- a/resources/js/components/fieldtypes/ListFieldtype.vue
+++ b/resources/js/components/fieldtypes/ListFieldtype.vue
@@ -1,61 +1,44 @@
 <template>
-    <sortable-list
-        v-model="data"
-        :vertical="true"
-        item-class="sortable-row"
-        handle-class="sortable-handle"
-        @dragstart="$emit('focus')"
-        @dragend="$emit('blur')"
-    >
-        <ul ref="list" class="outline-none">
-            <li class="sortable-row outline-none"
-                v-for="(item, index) in data"
-                :key="item._id"
-                :class="{ editing: (editing === index) }"
+    <div class="table-field">
+        <table class="table-fieldtype-table">
+            <sortable-list
+                v-model="data"
+                :vertical="true"
+                item-class="sortable-row"
+                handle-class="sortable-handle"
+                @dragstart="$emit('focus')"
+                @dragend="$emit('blur')"
             >
-                <span v-if="isReadOnly">
-                    {{ data[index].value }}
-                </span>
-                <template v-if="!isReadOnly">
-                    <span v-if="editing === index">
-                        <input
-                            type="text"
-                            class="w-full"
-                            v-model="data[index].value"
-                            :readonly="isReadOnly"
-                            :id="fieldId"
-                            @keydown.enter.prevent="saveAndAddNewItem"
-                            @keyup.up="previousItem"
-                            @keyup.down="nextItem"
-                            @focus="editItem(index)"
-                            @blur="focused = false"
-                        />
-                    </span>
-                    <span v-else @click.prevent="editItem(index)">
-                        <span class="sortable-handle">{{ item.value }}</span>
-                        <button class="delete" @click="deleteItem(index)">
-                            <svg-icon name="delete-x" />
-                        </button>
-                    </span>
-                </template>
-            </li>
-            <li>
-                <input
-                    v-if="!isReadOnly"
-                    type="text"
-                    class="w-full"
-                    v-model="newItem"
-                    ref="newItem"
-                    :placeholder="`${__('Add an item')}...`"
-                    @keydown.enter.prevent="addItem"
-                    @blur="newItemInputBlurred"
-                    @paste="newItemInputPaste"
-                    @focus="editItem(data.length)"
-                    @keyup.up="previousItem"
-                />
-            </li>
-        </ul>
-    </sortable-list>
+                <tbody>
+                    <tr class="sortable-row" v-for="(element, index) in data" :key="element._id">
+                        <td class="sortable-handle table-drag-handle" v-if="!isReadOnly" :class="{'rounded-tl': index === 0 }"></td>
+                        <td>
+                            <input
+                                type="text"
+                                ref="listItem"
+                                class="input-text"
+                                v-model="element.value"
+                                :readonly="isReadOnly"
+                                @blur="focused = false"
+                                @focus="editItem(index)"
+                                @keydown.enter.prevent="nextItem"
+                                @keyup.up="previousItem"
+                                @keyup.down="nextItem"
+                                @paste="newItemInputPaste"
+                            />
+                        </td>
+                        <td class="row-controls" v-if="!isReadOnly">
+                            <button @click="deleteValue(index)" class="inline text-lg antialiased text-gray-600 hover:text-gray-800 ">&times;</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </sortable-list>
+        </table>
+
+        <button class="btn" @click="addItem" v-if="!isReadOnly">
+            {{ addButton }}
+        </button>
+    </div>
 </template>
 
 <script>
@@ -73,10 +56,10 @@ export default {
     data() {
         return {
             data: [],
-            newItem: '',
             editing: null,
             focused: false,
             mounted: false,
+            deleting: false
         }
     },
 
@@ -93,6 +76,7 @@ export default {
             }
         },
 
+
         value: {
             immediate: true,
             handler(value) {
@@ -115,54 +99,44 @@ export default {
         }
     },
 
+    computed: {
+        addButton() {
+            return __(this.config.add_button || 'Add Item');
+        },
+    },
+
     methods: {
         addItem() {
-            if (this.newItem === '') {
-                return;
-            }
+            this.data.push(this.newSortableValue());
+            this.$nextTick(() => this.editItem(this.data.length - 1));
+        },
 
-            this.data.push(this.newSortableValue(this.newItem));
-            this.newItem = '';
-            this.editing = this.data.length;
+        deleteValue(index) {
+            this.data.splice(index, 1);
         },
 
         editItem(index) {
             this.editing = index;
-
-            this.$nextTick(function () {
-                this.focusItem();
-            });
+            this.$refs.listItem[index].focus();
         },
 
         newItemInputPaste(event) {
-            if (this.newItem !== '') {
-                return;
-            }
-
             const value = event.clipboardData.getData('text');
             if (!value.includes("\n")) {
                 return;
             }
 
+            this.deleteIfEmpty()
+
             value.split("\n").forEach((item) => {
                 this.data.push(this.newSortableValue(item));
             });
 
-            event.preventDefault();
-        },
+            this.$nextTick(() => this.editItem(this.data.length - 1));
 
-        newItemInputBlurred() {
-            this.addItem();
-            this.focused = false;
+            event.preventDefault();
         },
 
-        focusItem() {
-            this.focused = true;
-
-            return this.editing === this.data.length
-                ? this.$refs.newItem.focus()
-                : this.$refs.list.querySelector('.editing input').select();
-        },
 
         previousItem() {
             this.deleteIfEmpty();
@@ -173,13 +147,12 @@ export default {
         nextItem() {
             let deletedAdjustment = this.deleteIfEmpty() ? 1 : 0;
 
-            this.editItem(this.editing + 1 - deletedAdjustment);
-        },
-
-        saveAndAddNewItem() {
-            this.deleteIfEmpty();
+            if (this.editing + 1 >= this.data.length) {
+                this.addItem();
+            } else {
+                this.editItem(this.editing + 1 - deletedAdjustment);
+            }
 
-            this.editItem(this.data.length);
         },
 
         deleteIfEmpty() {
diff --git a/resources/js/components/fieldtypes/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
index 90211344882..75c22f42d1a 100644
--- a/resources/js/components/fieldtypes/MarkdownFieldtype.vue
+++ b/resources/js/components/fieldtypes/MarkdownFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
 <fullscreen :enabled="fullScreenMode" target-class="markdown-fieldtype">
-    <div class="markdown-fieldtype-wrapper" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
+    <div class="markdown-fieldtype-wrapper @container/markdown" :class="{'markdown-fullscreen': fullScreenMode, 'markdown-dark-mode': darkMode }">
 
         <uploader
             ref="uploader"
@@ -86,7 +86,7 @@
                         </div>
                     </div>
 
-                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose"></div>
+                    <div v-show="mode == 'preview'" v-html="markdownPreviewText" class="markdown-preview prose-sm @md/markdown:prose-base"></div>
                 </div>
             </div>
         </uploader>
@@ -441,19 +441,19 @@ export default {
          */
         shortcut: function(e) {
             var key = e.keyCode;
-            var meta = e.metaKey === true;
+            var mod = e.metaKey === true || e.ctrlKey === true;
 
-            if (meta && key === 66) { // cmd+b
+            if (mod && key === 66) { // cmd+b
                 this.bold();
                 e.preventDefault();
             }
 
-            if (meta && key === 73) { // cmd+i
+            if (mod && key === 73) { // cmd+i
                 this.italic();
                 e.preventDefault();
             }
 
-            if (meta && key === 75) { // cmd+k
+            if (mod && key === 75) { // cmd+k
                 this.insertLink();
                 e.preventDefault();
             }
diff --git a/resources/js/components/fieldtypes/SelectFieldtype.vue b/resources/js/components/fieldtypes/SelectFieldtype.vue
index 4db8f38d4ea..9e215362c89 100644
--- a/resources/js/components/fieldtypes/SelectFieldtype.vue
+++ b/resources/js/components/fieldtypes/SelectFieldtype.vue
@@ -49,7 +49,7 @@
                                 <span>×</span>
                             </button>
                             <button v-else type="button" class="vs__deselect">
-                                <span class="opacity-50">×</span>
+                                <span class="text-gray-500">×</span>
                             </button>
                         </span>
                     </div>
@@ -121,9 +121,9 @@ export default {
 
         limitIndicatorColor() {
             if (this.limitExceeded) {
-                return 'text-red';
+                return 'text-red-500';
             } else if (this.limitReached) {
-                return 'text-green';
+                return 'text-green-600';
             }
 
             return 'text-gray';
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 0136c373ae7..917723493f5 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -19,7 +19,7 @@
                                 </div>
                             </th>
                             <th class="row-controls pr-0">
-                                <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-500 hover:text-gray-700">
+                                <button @click="fullScreenMode = !fullScreenMode" class="flex items-center w-full h-full justify-center text-gray-600 hover:text-gray-800">
                                     <svg-icon name="expand-2" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
                                     <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
                                 </button>
diff --git a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
index 5b52f03791e..7a0c0bcce9a 100644
--- a/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/ToggleIndexFieldtype.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="flex items-center">
-        <svg-icon name="check" class="w-3 text-green" v-if="this.value" />
+        <svg-icon name="check" class="w-3 text-green-600" v-if="this.value" />
         <svg-icon name="close" class="w-3 text-gray-500" v-if="!this.value" />
     </div>
 </template>
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 5b2d768e6d2..25cf6ea93be 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -403,7 +403,6 @@ export default {
          */
         openSelector() {
             this.showSelector = true;
-            this.$root.hideOverflow = true;
         },
 
         /**
@@ -411,7 +410,6 @@ export default {
          */
         closeSelector() {
             this.showSelector = false;
-            this.$root.hideOverflow = false;
         },
 
         /**
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index 890b74b507f..6cb59225ea9 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -5,7 +5,7 @@
      be within the context of a publish form to continue working
      once it has been portaled out. -->
 <div :class="{ 'publish-fields': fullScreenMode }">
-<div :class="{ wrapperClasses: fullScreenMode }">
+<div :class="fullScreenMode && wrapperClasses">
 
     <div
         class="bard-fieldtype-wrapper"
@@ -15,7 +15,7 @@
     >
 
         <div class="bard-fixed-toolbar" v-if="!readOnly && showFixedToolbar">
-            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed">
+            <div class="flex flex-wrap flex-1 items-center no-select" v-if="toolbarIsFixed" :class="{'justify-center': fullScreenMode}">
                 <component
                     v-for="button in visibleButtons(buttons)"
                     :key="button.name"
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbar.vue b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
index 757e69bdbbc..6a5f5b3e034 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbar.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbar.vue
@@ -1,33 +1,25 @@
 <template>
 
     <div class="bard-link-toolbar">
-
         <div>
-
             <!-- Link type select -->
             <div class="flex items-center px-4 py-2 border-b">
 
-                <label
-                    class="mr-3 flex items-center font-normal"
-                    v-for="type in visibleLinkTypes"
-                    :for="type.type"
-                    :key="type.type"
+                <button
+                    class="button-tab"
+                    v-for="visibleLinkType in visibleLinkTypes"
+                    :class="{active: visibleLinkType.type === linkType}"
+                    :for="visibleLinkType.type"
+                    :key="visibleLinkType.type"
+                    :id="visibleLinkType.type"
+                    @click="setLinkType(visibleLinkType.type)"
                 >
-                    <input
-                        class="mr-1 top-0"
-                        type="radio"
-                        name="link-type"
-                        :id="type.type"
-                        :checked="type.type === linkType"
-                        @click="setLinkType(type.type)"
-                    />
-                    {{ type.title }}
-                </label>
-
+                    {{ visibleLinkType.title }}
+                </button>
             </div>
 
             <div class="px-4 py-4 border-b">
-                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center">
+                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center hover:border-gray-600">
 
                     <!-- URL input -->
                     <input
@@ -37,12 +29,13 @@
                         ref="urlInput"
                         class="input h-auto text-sm"
                         placeholder="URL"
+                        @keydown.enter.prevent="commit"
                     />
 
                     <!-- Data input -->
                     <div
                         v-else
-                        class="w-full flex justify-between"
+                        class="w-full flex items-center justify-between cursor-pointer"
                         @click="openSelector"
                     >
 
@@ -58,11 +51,13 @@
                         </div>
 
                         <button
+                        class="flex items-center"
                             v-tooltip="`${__('Browse')}...`"
                             :aria-label="`${__('Browse')}...`"
                             @click="openSelector"
                         >
-                            <svg-icon :name="linkType === 'asset' ? 'folder-image' : 'folder-generic'" class="h-4 w-4" />
+                            <svg-icon v-show="linkType === 'asset'" name="folder-image" class="h-4 w-4" />
+                            <svg-icon v-show="linkType !== 'asset'" name="folder-generic" class="h-4 w-4" />
                         </button>
 
                     </div>
@@ -70,7 +65,7 @@
                 </div>
 
                 <!-- Title attribute -->
-                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center" >
+                <div class="h-8 mb-4 p-2 border rounded border-gray-500 flex items-center hover:border-gray-600" >
                     <input
                         type="text"
                         ref="input"
@@ -80,15 +75,17 @@
                     />
                 </div>
 
-                <label for="target-blank" class="flex items-center font-normal">
+                <label for="target-blank" class="flex items-center font-normal cursor-pointer text-gray-800 hover:text-black">
                     <input class="checkbox mr-2" type="checkbox" v-model="targetBlank" id="target-blank">
                     {{ __('Open in new window') }}
                 </label>
             </div>
 
-            <div class="flex items-center justify-end space-x-1 font-normal px-4 py-3">
+            <footer class="bg-gray-100 rounded-b-md flex items-center justify-end space-x-3 font-normal p-2">
+                <button @click="$emit('canceled')" class="text-xs text-gray-600 hover:text-gray-800">
+                    {{ __('Cancel') }}
+                </button>
                 <button
-                    v-tooltip="__('Remove Link')"
                     :aria-label="__('Remove Link')"
                     @click="remove"
                     class="btn btn-sm"
@@ -102,9 +99,9 @@
                     @click="commit"
                     class="btn btn-sm"
                 >
-                    {{ __('OK') }}
+                    {{ __('Save') }}
                 </button>
-            </div>
+            </footer>
 
         </div>
 
diff --git a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
index 4bba94caed2..ff02bc60926 100644
--- a/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
+++ b/resources/js/components/fieldtypes/bard/LinkToolbarButton.vue
@@ -1,27 +1,29 @@
 <template>
-
-    <div class="inline-block relative">
-
-        <button
-            class="bard-toolbar-button"
-            :class="{ active }"
-            v-tooltip="button.text"
-            :aria-label="button.text"
-            @click="toggleLinkToolbar"
-        >
-            <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
-        </button>
-
-        <link-toolbar
-            v-if="showingToolbar"
-            :link-attrs="linkAttrs"
-            :config="config"
-            :bard="bard"
-            @updated="setLink"
-            @deselected="showingToolbar = false"
-        />
-    </div>
-
+    <popover ref="popover" placement="bottom-end" @closed="popoverClosed" :clickaway="false">
+        <template #trigger>
+            <button
+                class="bard-toolbar-button"
+                :class="{ active }"
+                v-tooltip="button.text"
+                :aria-label="button.text"
+                @click="toggleLinkToolbar"
+            >
+                <svg-icon :name="button.svg" v-if="button.svg"></svg-icon>
+            </button>
+        </template>
+        <template #default>
+            <link-toolbar
+                class="w-80"
+                ref="toolbar"
+                v-if="showingToolbar"
+                :link-attrs="linkAttrs"
+                :config="config"
+                :bard="bard"
+                @updated="setLink"
+                @canceled="close"
+            />
+        </template>
+    </popover>
 </template>
 
 <script>
@@ -54,10 +56,19 @@ export default {
             }
         },
 
+        close() {
+            this.showingToolbar = false;
+            this.$refs.popover.close();
+        },
+
+        popoverClosed() {
+            this.showingToolbar = false;
+        },
+
         setLink(attributes) {
             this.editor.commands.setLink(attributes);
             this.linkAttrs = null;
-            this.showingToolbar = false;
+            this.close();
             this.editor.view.dom.focus();
         }
 
diff --git a/resources/js/components/fieldtypes/grid/Cell.vue b/resources/js/components/fieldtypes/grid/Cell.vue
index e2e3d0f7897..7194234a73d 100644
--- a/resources/js/components/fieldtypes/grid/Cell.vue
+++ b/resources/js/components/fieldtypes/grid/Cell.vue
@@ -19,7 +19,7 @@
         </div>
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </td>
 
diff --git a/resources/js/components/fieldtypes/grid/Grid.vue b/resources/js/components/fieldtypes/grid/Grid.vue
index c4e937edf1c..876a86bb2ac 100644
--- a/resources/js/components/fieldtypes/grid/Grid.vue
+++ b/resources/js/components/fieldtypes/grid/Grid.vue
@@ -12,10 +12,10 @@
 
         <section :class="{'p-4': fullScreenMode}">
 
-            <small v-if="hasExcessRows" class="help-block text-red">
+            <small v-if="hasExcessRows" class="help-block text-red-500">
                 {{ __('Max Rows') }}: {{ maxRows }}
             </small>
-            <small v-else-if="hasNotEnoughRows" class="help-block text-red">
+            <small v-else-if="hasNotEnoughRows" class="help-block text-red-500">
                 {{ __('Min Rows') }}: {{ minRows }}
             </small>
 
diff --git a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
index 2fb13efa5f1..0072b2c7dc6 100644
--- a/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
+++ b/resources/js/components/fieldtypes/relationship/RelationshipIndexFieldtype.vue
@@ -1,15 +1,17 @@
 <template>
 
-    <div class="text-2xs">
+    <div class="flex flex-wrap">
         <div
             v-for="(item, i) in value"
             :key="item.id"
-            class="flex items-center"
-            :class="{ 'mb-2': i < value.length-1 }"
+            class="relationship-index-field-item"
+            :class="{ 'mb-1.5': i < value.length-1 }"
         >
-            <div v-if="item.published && item.published !== null"
-                class="little-dot mr-2" :class="[item.published ? 'bg-green' : 'bg-gray-400']" />
-            <a :href="item.edit_url">{{ item.title }}</a>
+            <div class="flex items-center shrink">
+                <div v-if="item.published && item.published !== null"
+                    class="little-dot h-1 w-1 mr-1" :class="[item.published ? 'bg-green-600' : 'bg-gray-400']" />
+                <a :href="item.edit_url" :title="item.title" v-text="item.title" />
+            </div>
         </div>
     </div>
 
diff --git a/resources/js/components/fieldtypes/replicator/Field.vue b/resources/js/components/fieldtypes/replicator/Field.vue
index 0f460c5adcd..ff788dd39e3 100644
--- a/resources/js/components/fieldtypes/replicator/Field.vue
+++ b/resources/js/components/fieldtypes/replicator/Field.vue
@@ -36,7 +36,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
 
     </div>
diff --git a/resources/js/components/fieldtypes/replicator/Replicator.vue b/resources/js/components/fieldtypes/replicator/Replicator.vue
index a3d96efaddd..2a4e39f0c00 100644
--- a/resources/js/components/fieldtypes/replicator/Replicator.vue
+++ b/resources/js/components/fieldtypes/replicator/Replicator.vue
@@ -8,24 +8,34 @@
 <div :class="{ wrapperClasses: fullScreenMode }">
 <div class="replicator-fieldtype-container" :class="{'replicator-fullscreen bg-white': fullScreenMode }">
 
-    <header class="bg-white border-b py-3 pl-3 flex items-center justify-between relative" v-if="fullScreenMode">
-        <h2 v-text="config.display" />
-        <button class="btn-close absolute top-2 right-5" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+    <header class="bg-white fixed top-0 inset-x-0 border-b p-3 pl-4 flex items-center justify-between shadow z-max" v-if="fullScreenMode">
+        <h2 v-text="config.display" class="flex-1" />
+            <div class="flex items-center">
+                <div class="btn-group">
+                    <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
+                        <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-1 text-gray-750" />
+                    </button>
+                    <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
+                        <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-1 text-gray-750" />
+                    </button>
+                </div>
+                <button class="btn-close ml-2" @click="fullScreenMode = false" :aria-label="__('Exit Fullscreen Mode')">&times;</button>
+            </div>
     </header>
 
-    <section :class="{'p-4 bg-gray-200 h-full': fullScreenMode}">
+    <section :class="{'mt-12 p-4 bg-gray-200': fullScreenMode}">
 
-        <div class="flex justify-end">
+        <div class="flex justify-end" v-if="! fullScreenMode">
             <div class="btn-group">
                 <button @click="expandAll" class="btn btn-icon flex items-center" v-tooltip="__('Expand Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 w-3.5" />
+                    <svg-icon name="arrows-horizontal-expand" class="h-3.5 px-0.5 text-gray-750" />
                 </button>
                 <button @click="collapseAll" class="btn btn-icon flex items-center" v-tooltip="__('Collapse Sets')" v-if="config.collapse !== 'accordion' && value.length > 0">
-                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 w-3.5" />
+                    <svg-icon name="arrows-horizontal-collapse" class="h-3.5 px-0.5 text-gray-750" />
                 </button>
                 <button @click="fullScreenMode = !fullScreenMode" class="btn btn-icon flex items-center" v-tooltip="__('Toggle Fullscreen Mode')">
-                    <svg-icon name="expand-2" class="h-3.5 w-3.5" v-show="! fullScreenMode" />
-                    <svg-icon name="shrink-all" class="h-3.5 w-3.5" v-show="fullScreenMode" />
+                    <svg-icon name="expand-2" class="h-3.5 px-0.5 text-gray-750" v-show="! fullScreenMode" />
+                    <svg-icon name="shrink-all" class="h-3.5 px-0.5 text-gray-750" v-show="fullScreenMode" />
                 </button>
             </div>
         </div>
diff --git a/resources/js/components/inputs/relationship/SelectField.vue b/resources/js/components/inputs/relationship/SelectField.vue
index d4811907df1..0dbda8f21d9 100644
--- a/resources/js/components/inputs/relationship/SelectField.vue
+++ b/resources/js/components/inputs/relationship/SelectField.vue
@@ -38,6 +38,7 @@
                     item-class="sortable-item"
                     handle-class="sortable-item"
                     :value="items"
+                    :delay="75"
                     @input="input"
                 >
                     <div class="vs__selected-options-outside flex flex-wrap">
@@ -58,6 +59,15 @@
 
 </template>
 
+<style scoped>
+    .draggable-mirror {
+        display: none !important;
+    }
+    .draggable-source--is-dragging {
+        @apply opacity-75 bg-transparent border-dashed
+    }
+</style>
+
 <script>
 import { SortableList, SortableItem } from '../../sortable/Sortable';
 
diff --git a/resources/js/components/inputs/relationship/Selector.vue b/resources/js/components/inputs/relationship/Selector.vue
index b27154906d0..47042f428d8 100644
--- a/resources/js/components/inputs/relationship/Selector.vue
+++ b/resources/js/components/inputs/relationship/Selector.vue
@@ -271,7 +271,7 @@ export default {
             if (entry.published && entry.private) {
                 return 'bg-transparent border border-gray-600';
             } else if (entry.published) {
-                return 'bg-green';
+                return 'bg-green-600';
             } else {
                 return 'bg-gray-400';
             }
diff --git a/resources/js/components/login/LoginModal.vue b/resources/js/components/login/LoginModal.vue
index f3ae30d5b87..df8b451d05b 100644
--- a/resources/js/components/login/LoginModal.vue
+++ b/resources/js/components/login/LoginModal.vue
@@ -8,10 +8,10 @@
             </template>
             <template slot="body">
                 <div class="mb-4">
-                    <label :class="{ 'text-red': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
+                    <label :class="{ 'text-red-500': errors.password.length }">{{ __('Password for :username', { username: this.username }) }} <i class="required">*</i></label>
                     <input type="password" name="password" class="input-text" v-model="password" ref="password" @keydown.enter.prevent="submit" />
-                    <small class="block text-red mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
-                    <small class="block text-red mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
+                    <small class="block text-red-500 mt-2" v-if="errors.username.length">{{ errors.username[0] }}</small>
+                    <small class="block text-red-500 mt-2" v-if="errors.password.length">{{ errors.password[0] }}</small>
                 </div>
             </template>
             <template slot="footer">
diff --git a/resources/js/components/nav/ItemEditor.vue b/resources/js/components/nav/ItemEditor.vue
index 364968f38f8..d5bf33c222d 100644
--- a/resources/js/components/nav/ItemEditor.vue
+++ b/resources/js/components/nav/ItemEditor.vue
@@ -17,20 +17,20 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateDisplay }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
                         <text-input v-model="config.display" :focus="true" />
-                        <div v-if="validateDisplay" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateDisplay" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validateUrl }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('URL') }} <span class="text-red-500">*</span></label>
                         <div class="help-block -mt-2">
                             <p v-text="__('Enter any internal or external URL.')"></p>
                         </div>
                         <text-input v-model="config.url" />
-                        <div v-if="validateUrl" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validateUrl" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/nav/SectionEditor.vue b/resources/js/components/nav/SectionEditor.vue
index a8ac5fcf421..ca4f626a34a 100644
--- a/resources/js/components/nav/SectionEditor.vue
+++ b/resources/js/components/nav/SectionEditor.vue
@@ -17,9 +17,9 @@
 
                 <div class="publish-field mb-8" :class="{ 'has-error': validate }">
                     <div class="field-inner">
-                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red">*</span></label>
+                        <label class="text-sm font-medium mb-2">{{ __('Display') }} <span class="text-red-500">*</span></label>
                         <text-input v-model="section" :focus="true" />
-                        <div v-if="validate" class="help-block text-red mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
+                        <div v-if="validate" class="help-block text-red-500 mt-2"><p>{{ __('statamic::validation.required') }}</p></div>
                     </div>
                 </div>
 
diff --git a/resources/js/components/publish/Field.vue b/resources/js/components/publish/Field.vue
index 4346852e1bd..28164d265b9 100644
--- a/resources/js/components/publish/Field.vue
+++ b/resources/js/components/publish/Field.vue
@@ -52,7 +52,7 @@
         <loading-graphic v-if="loadingMeta" :size="16" :inline="true" />
 
         <slot name="fieldtype" v-if="!loadingMeta">
-            <div class="text-xs text-red" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
+            <div class="text-xs text-red-500" v-if="!fieldtypeComponentExists">Component <code v-text="fieldtypeComponent"></code> does not exist.</div>
             <component
                 v-else
                 :is="fieldtypeComponent"
@@ -76,7 +76,7 @@
             v-html="instructions" />
 
         <div v-if="hasError">
-            <small class="help-block text-red mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
+            <small class="help-block text-red-500 mt-2 mb-0" v-for="(error, i) in errors" :key="i" v-text="error" />
         </div>
     </div>
     </publish-field-meta>
diff --git a/resources/js/components/roles/PublishForm.vue b/resources/js/components/roles/PublishForm.vue
index d13bee557a2..d7ad24cd0d9 100644
--- a/resources/js/components/roles/PublishForm.vue
+++ b/resources/js/components/roles/PublishForm.vue
@@ -31,7 +31,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-red p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-red-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
diff --git a/resources/js/components/sortable/SortableList.vue b/resources/js/components/sortable/SortableList.vue
index 55c9191a97d..26772df939c 100644
--- a/resources/js/components/sortable/SortableList.vue
+++ b/resources/js/components/sortable/SortableList.vue
@@ -42,6 +42,10 @@ export default {
         constrainDimensions: {
             type: Boolean
         },
+        delay: {
+            type: Number,
+            default: 200
+        },
         disabled: {
             type: Boolean,
             default: false
@@ -54,7 +58,7 @@ export default {
             let options = Object.assign({}, {
                 draggable: `.${CSS.escape(this.itemClass)}`,
                 handle: `.${CSS.escape(this.handleClass)}`,
-                delay: 200,
+                delay: this.delay,
                 swapAnimation: { vertical: this.vertical, horizontal: !this.vertical },
                 plugins: [Plugins.SwapAnimation],
                 mirror: {
diff --git a/resources/js/components/structures/Branch.vue b/resources/js/components/structures/Branch.vue
index 5c9cc078190..722516e9c3d 100644
--- a/resources/js/components/structures/Branch.vue
+++ b/resources/js/components/structures/Branch.vue
@@ -112,7 +112,7 @@ export default {
         getStatusClass() {
             switch (this.page.status) {
                 case 'published':
-                    return 'bg-green';
+                    return 'bg-green-600';
                 case 'draft':
                     return 'bg-gray-400';
                 default:
diff --git a/resources/js/components/taxonomies/Listing.vue b/resources/js/components/taxonomies/Listing.vue
index 391c6c95541..746f666d319 100644
--- a/resources/js/components/taxonomies/Listing.vue
+++ b/resources/js/components/taxonomies/Listing.vue
@@ -6,7 +6,7 @@
                     <a :href="taxonomy.terms_url">{{ taxonomy.title }}</a>
                 </template>
                 <template slot="actions" slot-scope="{ row: taxonomy, index }">
-                    <dropdown-list>
+                    <dropdown-list placement="left-start" scroll>
                         <dropdown-item :text="__('Edit')" :redirect="taxonomy.edit_url" />
                         <dropdown-item :text="__('Edit Blueprints')" :redirect="taxonomy.blueprints_url" />
                         <dropdown-item
diff --git a/resources/js/components/terms/Listing.vue b/resources/js/components/terms/Listing.vue
index 9e7c55e541e..51a5dd4dad2 100644
--- a/resources/js/components/terms/Listing.vue
+++ b/resources/js/components/terms/Listing.vue
@@ -16,16 +16,38 @@
             @visible-columns-updated="visibleColumns = $event"
         >
             <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="card overflow-hidden p-0 relative">
+                    <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 (F)')">
+                                <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"
@@ -70,7 +93,7 @@
                             <span class="font-mono text-2xs">{{ term.slug }}</span>
                         </template>
                         <template slot="actions" slot-scope="{ row: term, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <dropdown-item :text="__('View')" :redirect="term.permalink" />
                                 <dropdown-item :text="__('Edit')" :redirect="term.edit_url" />
                                 <div class="divider" />
diff --git a/resources/js/components/terms/PublishActions.vue b/resources/js/components/terms/PublishActions.vue
index 919f48af1b1..867a7abcce5 100644
--- a/resources/js/components/terms/PublishActions.vue
+++ b/resources/js/components/terms/PublishActions.vue
@@ -52,7 +52,7 @@
                         <div class="flex-1" v-text="actionInfoText" />
                     </div>
 
-                    <div class="text-gray text-xs flex mb-6 text-red" v-if="action === 'schedule'">
+                    <div class="text-gray text-xs flex mb-6 text-red-500" v-if="action === 'schedule'">
                         <div class="pt-px w-4 mr-2">
                             <svg-icon name="info-circle" class="pt-px" />
                         </div>
diff --git a/resources/js/components/terms/PublishForm.vue b/resources/js/components/terms/PublishForm.vue
index af963745986..e464934995f 100644
--- a/resources/js/components/terms/PublishForm.vue
+++ b/resources/js/components/terms/PublishForm.vue
@@ -8,7 +8,7 @@
                 <div class="flex items-center">
                     <span v-if="! isCreating"
                         class="little-dot mr-2"
-                        :class="{ 'bg-green-light': published, 'bg-gray-600': !published }" />
+                        :class="{ 'bg-green-600': published, 'bg-gray-600': !published }" />
                     <span v-html="$options.filters.striptags(title)" />
                 </div>
             </h1>
@@ -130,7 +130,7 @@
                                 <div class="border-t p-4" v-if="revisionsEnabled">
                                     <label class="publish-field-label font-medium mb-2" v-text="__('Revisions')"/>
                                     <div class="mb-1 flex items-center" v-if="published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('Entry has a published version')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-else="published">
@@ -146,7 +146,7 @@
                                         <span class="text-2xs" v-text="__('Entry has unpublished changes')"></span>
                                     </div>
                                     <div class="mb-1 flex items-center" v-if="!isWorkingCopy && published">
-                                        <span class="text-green w-6 text-center">&check;</span>
+                                        <span class="text-green-600 w-6 text-center">&check;</span>
                                         <span class="text-2xs" v-text="__('This is the published version')"></span>
                                     </div>
                                     <button
@@ -170,9 +170,9 @@
                                     >
                                         <div class="flex-1 flex items-center" :class="{ 'line-through': !option.exists }">
                                             <span class="little-dot mr-2" :class="{
-                                                'bg-green': option.published,
+                                                'bg-green-600': option.published,
                                                 'bg-gray-500': !option.published,
-                                                'bg-red': !option.exists
+                                                'bg-red-500': !option.exists
                                             }" />
                                             {{ option.name }}
                                             <loading-graphic :size="14" text="" class="ml-2" v-if="localizing === option.handle" />
diff --git a/resources/js/components/updater/Updater.vue b/resources/js/components/updater/Updater.vue
index 2ccb8675e2e..90807793b1e 100644
--- a/resources/js/components/updater/Updater.vue
+++ b/resources/js/components/updater/Updater.vue
@@ -28,7 +28,7 @@
                 <h4 v-text="__('messages.addon_has_more_releases_beyond_license_heading')" />
                 <p v-text="__('messages.addon_has_more_releases_beyond_license_body')" />
             </div>
-            <button class="btn btn-sm" v-text="__('View additional releases')" />
+            <button class="btn btn-xs" v-text="__('View additional releases')" />
         </div>
 
         <template v-if="showingUnlicensedReleases">
diff --git a/resources/js/components/user-groups/PublishForm.vue b/resources/js/components/user-groups/PublishForm.vue
index ebf7d4c5be6..7c4f7ef882f 100644
--- a/resources/js/components/user-groups/PublishForm.vue
+++ b/resources/js/components/user-groups/PublishForm.vue
@@ -29,7 +29,7 @@
                     v-model="handle"
                 />
 
-                <div class="text-xs text-red p-6 pt-0" v-if="initialHandle && handle != initialHandle">
+                <div class="text-xs text-red-500 p-6 pt-0" v-if="initialHandle && handle != initialHandle">
                     {{ __('messages.role_change_handle_warning') }}
                 </div>
 
@@ -53,7 +53,7 @@
                                 @input="roles = $event" />
                         </div>
                     </publish-field-meta>
-                    <small class="help-block text-red mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
+                    <small class="help-block text-red-500 mt-2 mb-0" v-if="errors.roles" v-text="errors.roles[0]" />
                 </div>
 
             </div>
diff --git a/resources/js/components/users/Listing.vue b/resources/js/components/users/Listing.vue
index 98494f60642..36f4a958d0e 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 (F)')">
+                                <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')" />
@@ -42,15 +89,19 @@
                             </a>
                         </template>
                         <template slot="cell-roles" slot-scope="{ row: user, value: roles }">
-                            <span v-if="user.super" class="badge-pill-sm mr-1">{{ __('Super Admin') }}</span>
-                            <span v-if="!roles || roles.length === 0" />
-                            <span v-for="role in (roles || [])" class="badge-pill-sm mr-1">{{ role.title }}</span>
+                            <div class="role-index-field">
+                                <div v-if="user.super" class="role-index-field-item mr-1">{{ __('Super Admin') }}</div>
+                                <div v-if="!roles || roles.length === 0" />
+                                <div v-for="(role, i) in (roles || [])" class="role-index-field-item" :class="{ 'mb-1.5': i < roles.length-1 }">{{ role.title }}</div>
+                            </div>
                         </template>
                         <template slot="cell-groups" slot-scope="{ row: user, value: groups }">
-                            <span v-for="group in (groups || [])" class="badge-pill-sm mr-1">{{ group.title }}</span>
+                            <div class="groups-index-field">
+                                <div v-for="group in (groups || [])" class="groups-index-field-item mr-1 mb-1.5">{{ group.title }}</div>
+                            </div>
                         </template>
                         <template slot="actions" slot-scope="{ row: user, index }">
-                            <dropdown-list>
+                            <dropdown-list placement="left-start" scroll>
                                 <dropdown-item :text="__('Edit')" :redirect="user.edit_url" v-if="user.editable" />
                                 <dropdown-item :text="__('View')" :redirect="user.edit_url" v-else />
                                 <data-list-inline-actions
diff --git a/resources/js/components/users/Wizard.vue b/resources/js/components/users/Wizard.vue
index c6fa7ff1c38..df3757ab7f4 100644
--- a/resources/js/components/users/Wizard.vue
+++ b/resources/js/components/users/Wizard.vue
@@ -21,7 +21,7 @@
                 <label class="font-bold text-base mb-1" for="email">{{ __('Email Address') }}*</label>
                 <input type="email" v-model="user.email" id="email" class="input-text" required autofocus tabindex="1">
 
-                <div class="text-2xs text-red mt-2 flex items-center" v-if="userExists">
+                <div class="text-2xs text-red-500 mt-2 flex items-center" v-if="userExists">
                     <svg-icon name="info-circle" class="h-4 w-4 mr-1 flex items-center mb-px"></svg-icon>
                     {{ __('This user already exists.') }}
                 </div>
diff --git a/resources/lang/en/messages.php b/resources/lang/en/messages.php
index 62a62bbc62d..764c60a2caa 100644
--- a/resources/lang/en/messages.php
+++ b/resources/lang/en/messages.php
@@ -185,6 +185,9 @@
     'session_expiry_logged_out_for_inactivity' => 'You have been logged out because you\'ve been inactive for a while.',
     'session_expiry_logging_out_in_seconds' => 'You have been inactive for a while and will be logged out in :seconds seconds. Click to extend your session.',
     'session_expiry_new_window' => 'Opens in a new window. Come back once you\'ve logged in.',
+    'status_expired_with_date' => 'Expired on :date',
+    'status_published_with_date' => 'Published on :date',
+    'status_scheduled_with_date' => 'Scheduled to be published on :date',
     'show_slugs_instructions' => 'Whether to display slugs in the tree view.',
     'tab_sections_instructions' => 'The fields in each section will be grouped together into tabs. Create new fields, reuse existing fields, or import entire groups of fields from existing fieldsets.',
     'taxonomies_blueprints_instructions' => 'Terms in this taxonomy may use any of these blueprints.',
diff --git a/resources/svg/add-bold.svg b/resources/svg/add-bold.svg
new file mode 100644
index 00000000000..4467c834a28
--- /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-linecap="round" stroke-width="1.5" d="M7 1v12M13 7H1"/></svg>
\ No newline at end of file
diff --git a/resources/svg/bullet.svg b/resources/svg/bullet.svg
deleted file mode 100644
index f175b833d70..00000000000
--- a/resources/svg/bullet.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="currentColor"/></svg>
\ No newline at end of file
diff --git a/resources/svg/delete-x.svg b/resources/svg/delete-x.svg
deleted file mode 100644
index 219ea003fac..00000000000
--- a/resources/svg/delete-x.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 4"><path fill="currentColor" d="M3.045 2.141a.2.2 0 0 1 0-.283l.81-.81a.494.494 0 0 0 0-.697L3.65.144a.494.494 0 0 0-.697 0l-.81.81a.2.2 0 0 1-.284 0l-.81-.81a.494.494 0 0 0-.697 0L.144.351a.494.494 0 0 0 0 .697l.81.81a.2.2 0 0 1 0 .283l-.81.81a.494.494 0 0 0 0 .697l.207.208a.494.494 0 0 0 .697 0l.81-.81a.2.2 0 0 1 .284 0l.81.81a.494.494 0 0 0 .697 0l.207-.208a.494.494 0 0 0 0-.696Z"/></svg>
\ No newline at end of file
diff --git a/resources/svg/filter-lines.svg b/resources/svg/filter-lines.svg
new file mode 100644
index 00000000000..faeabd06413
--- /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.51 12.211h4.98M3.182 8.737h7.636M1.897 5.263h10.206M.81 1.788h12.38"/></svg>
\ No newline at end of file
diff --git a/resources/svg/h1.svg b/resources/svg/h1.svg
index 20cb0e6c165..31d94701518 100644
--- a/resources/svg/h1.svg
+++ b/resources/svg/h1.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13.57 12.94"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm4.16 4.81-.93.72a.55.55 0 0 1-.35.12c-.16 0-.33-.07-.42-.19-.08-.1-.11-.2-.11-.3 0-.18.1-.34.23-.45l1.73-1.34c.11-.08.27-.14.41-.14.3 0 .53.23.53.52v8.66c0 .29-.23.52-.54.52s-.55-.23-.55-.52V4.8z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M11.39 7.65v5.1M9.7 8.72h.42c.7 0 1.27-.57 1.27-1.27m1.7 5.3h-3.4m-8.69 0V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h2.svg b/resources/svg/h2.svg
index 39e9400b856..74daade3ce9 100644
--- a/resources/svg/h2.svg
+++ b/resources/svg/h2.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.03 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm7.22 11.57c.27 0 .48.23.48.5 0 .29-.22.52-.48.52h-4.51c-.36 0-.55-.22-.55-.5s.2-.48.34-.63c1.47-1.54 3.75-3.97 3.75-5.89 0-.85-.48-1.54-1.45-1.54-.59 0-1.09.25-1.41.98-.12.26-.27.36-.51.36-.33 0-.51-.26-.51-.55 0-.07.01-.12.03-.19.37-1.15 1.39-1.69 2.49-1.69 1.67 0 2.44 1.23 2.44 2.41 0 2.67-3.03 5.55-3.74 6.22h3.62z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.93 12.75H9.61V12c0-.53.29-1 .74-1.22l1.84-.86c.44-.21.73-.67.73-1.18 0-.71-.54-1.29-1.21-1.29h-.86c-.54 0-1 .37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h3.svg b/resources/svg/h3.svg
index 0a865148bd5..fffbe155ffd 100644
--- a/resources/svg/h3.svg
+++ b/resources/svg/h3.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.61 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm4.71 3.03c1.37 0 2.26.91 2.26 2.41 0 1.04-.45 1.88-1.28 2.31 1.02.22 1.59 1.21 1.59 2.33 0 1.71-1.11 2.77-2.58 2.77-.99 0-1.85-.37-2.36-1.2a.888.888 0 0 1-.13-.42c0-.16.06-.31.19-.41.08-.05.16-.1.25-.1.17 0 .32.11.43.29.43.59.95.75 1.58.75 1.02 0 1.62-.75 1.62-1.72 0-1.02-.69-1.66-1.68-1.66h-.2c-.31 0-.5-.23-.5-.55s.2-.55.5-.55h.14c.73 0 1.42-.67 1.42-1.65s-.5-1.51-1.34-1.51c-.63 0-1.01.22-1.31.67-.12.16-.27.25-.42.25-.08 0-.16-.03-.25-.08a.465.465 0 0 1-.18-.38c0-.12.04-.25.11-.37.47-.76 1.21-1.17 2.12-1.17z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M9.54 11.87c.18.52.67.88 1.25.88h.88c.73 0 1.33-.59 1.33-1.33v-.22c0-.73-.59-1.33-1.33-1.33h-.44.33c.67 0 1.22-.54 1.22-1.22s-.54-1.22-1.22-1.22h-.66c-.56 0-1.03.37-1.17.88M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h4.svg b/resources/svg/h4.svg
index dce794f1655..c540cb00915 100644
--- a/resources/svg/h4.svg
+++ b/resources/svg/h4.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.43 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm6.97 10.48v1.84c0 .31-.22.55-.47.55s-.47-.23-.47-.55v-1.84h-3.33c-.27 0-.51-.25-.51-.56 0-.12.04-.26.11-.38l3.17-5.91c.11-.2.24-.34.46-.34.26 0 .44.23.44.5 0 .1-.02.22-.08.33l-2.84 5.26h2.58V7.27c0-.31.22-.55.47-.55s.47.23.47.55v2.11h.65c.27 0 .5.26.5.55s-.22.55-.5.55h-.65z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M12.36 11.42H9.15c-.18 0-.32-.14-.32-.32 0-.08.03-.15.08-.21l2.92-3.34c.06-.07.14-.1.23-.1.17 0 .3.14.3.3v3.67zm0 0h.88m-.88 0v1.33M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h5.svg b/resources/svg/h5.svg
index 3f0efda3b80..13943ffe8d9 100644
--- a/resources/svg/h5.svg
+++ b/resources/svg/h5.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.1 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm3.58 11.02c.43.55.97.74 1.52.74.95 0 1.67-.85 1.67-2.02s-.78-2.02-2.02-2.02c-.2 0-.39.03-.58.05-.03 0-.07.01-.11.01-.32 0-.52-.26-.52-.61v-.11l.37-3.38c.04-.3.26-.52.51-.52h2.85c.25 0 .45.23.45.55s-.2.55-.45.55h-2.47l-.31 2.58c.18-.05.43-.1.66-.1 1.51 0 2.62 1.15 2.62 2.96 0 1.98-1.23 3.15-2.71 3.15-.78 0-1.59-.25-2.27-1.23-.06-.1-.09-.2-.09-.33 0-.16.06-.33.19-.42.09-.07.18-.11.27-.11.14 0 .27.1.4.26z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75m6.07.92H9.95l-.44 2.65.32-.16c.37-.18.77-.28 1.19-.28h.7c.73 0 1.33.59 1.33 1.33v.44c0 .73-.59 1.33-1.33 1.33h-.88c-.58 0-1.07-.37-1.25-.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/svg/h6.svg b/resources/svg/h6.svg
index bf3c68a9f1f..135e0238703 100644
--- a/resources/svg/h6.svg
+++ b/resources/svg/h6.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.32 12.87"><path fill="currentColor" d="M8.32 0c.37 0 .68.34.68.74v11.37c0 .42-.31.76-.68.76s-.7-.34-.7-.76v-5.1H1.38v5.1c0 .42-.31.76-.68.76s-.7-.34-.7-.76V.74C0 .34.31 0 .7 0s.68.34.68.74v4.83h6.24V.74c0-.4.31-.74.7-.74zm3.97 8.1c.31-.72.91-1.27 1.82-1.27 1.27 0 2.21 1.2 2.21 2.93 0 1.88-1.18 3.08-2.38 3.08-1.72 0-2.68-1.62-2.68-3.52 0-3.25 1.79-5.54 3.34-6.18.08-.03.17-.05.24-.05.17 0 .3.1.36.3.02.07.03.12.03.19 0 .23-.14.41-.33.49-1.17.57-2.31 1.9-2.62 4.02zm-.1 1.23c0 1.3.57 2.43 1.73 2.43.85 0 1.46-.89 1.46-1.91 0-1.1-.53-1.99-1.57-1.99-.9 0-1.45.8-1.62 1.47z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><defs><clipPath id="a"><path d="M0 0h14v14H0z" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M1 12.75V1.25m5.75 0v11.5M1 6.52h5.75m2.75 4.9v-.22c0-.73.59-1.33 1.33-1.33h.88c.73 0 1.33.59 1.33 1.33v.22c0 .73-.59 1.33-1.33 1.33h-.88c-.73 0-1.33-.59-1.33-1.33zm0 0V8.77c0-.73.59-1.33 1.33-1.33h.88c.58 0 1.07.37 1.25.88" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 4230c4018c7..f6b7e23bfa3 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -39,13 +39,13 @@
             <div class="mb-8">
                 <label class="mb-2" for="input-email">{{ __('Email') }}</label>
                 <input type="text" class="input-text input-text" name="email" value="{{ old('email') }}" autofocus id="input-email">
-                @if ($hasError('email'))<div class="text-red text-xs mt-2">{{ $errors->first('email') }}</div>@endif
+                @if ($hasError('email'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('email') }}</div>@endif
             </div>
 
             <div class="mb-8">
                 <label class="mb-2" for="input-password">{{ __('Password') }}</label>
                 <input type="password" class="input-text input-text" name="password" id="input-password">
-                @if ($hasError('password'))<div class="text-red text-xs mt-2">{{ $errors->first('password') }}</div>@endif
+                @if ($hasError('password'))<div class="text-red-500 text-xs mt-2">{{ $errors->first('password') }}</div>@endif
             </div>
             <div class="flex justify-between items-center">
                 <label for="remember-me" class="flex items-center cursor-pointer">
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
index 19c3808efcd..353ee5016cf 100644
--- a/resources/views/auth/passwords/email.blade.php
+++ b/resources/views/auth/passwords/email.blade.php
@@ -23,7 +23,7 @@
                 <input id="email" type="text" class="input-text input-text" name="email" value="{{ old('email') }}" >
 
                 @error('email', 'user.forgot_password')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
index d45c71e61ea..a34fd5a8692 100644
--- a/resources/views/auth/passwords/reset.blade.php
+++ b/resources/views/auth/passwords/reset.blade.php
@@ -21,7 +21,7 @@
                 <input id="email" type="email" class="input-text input-text" name="email" value="{{ $email ?? old('email') }}" autofocus required>
 
                 @error('email')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
@@ -31,7 +31,7 @@
                 <input id="password" type="password" class="input-text input-text" name="password" required>
 
                 @error('password')
-                    <div class="text-red text-xs mt-2">{{ $message }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $message }}</div>
                 @enderror
             </div>
 
diff --git a/resources/views/auth/protect/password.antlers.html b/resources/views/auth/protect/password.antlers.html
index 824bef61e5c..d469fb5e489 100644
--- a/resources/views/auth/protect/password.antlers.html
+++ b/resources/views/auth/protect/password.antlers.html
@@ -35,7 +35,7 @@ <h2 class="text-xl mt-4 font-normal mb-4">{{ trans key="Protected Page" }}</h2>
 
             {{ get_errors:all bag="passwordProtect" }}
                 {{ messages }}
-                    <div class="mt-6 text-sm text-red-600">{{ message }}</div>
+                    <div class="mt-6 text-sm text-red-500-600">{{ message }}</div>
                 {{ /messages }}
             {{ /get_errors:all }}
 
diff --git a/resources/views/blueprints/index.blade.php b/resources/views/blueprints/index.blade.php
index 9823110228a..030706f5b9a 100644
--- a/resources/views/blueprints/index.blade.php
+++ b/resources/views/blueprints/index.blade.php
@@ -38,7 +38,7 @@
                         <td>
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('content-writing')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('collections.blueprints.edit', [$collection, $blueprint]) }}">{{ $blueprint->title() }}</a>
                             </div>
                         </td>
@@ -62,7 +62,7 @@
                         <td>
                             <div class="flex items-center">
                                 <div class="w-4 h-4 mr-4">@cp_svg('tags')</div>
-                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
+                                <span class="little-dot {{ $blueprint->hidden() ? 'hollow' : 'bg-green-600' }} mr-2" v-tooltip="'{{ __($blueprint->hidden() ? 'Hidden': 'Visible') }}'"></span>
                                 <a href="{{ cp_route('taxonomies.blueprints.edit', [$taxonomy, $blueprint]) }}">{{ $blueprint->title() }}</a>
                             </div>
                         </td>
diff --git a/resources/views/collections/blueprints/create.blade.php b/resources/views/collections/blueprints/create.blade.php
index 590ab0c104e..f499ec074d9 100644
--- a/resources/views/collections/blueprints/create.blade.php
+++ b/resources/views/collections/blueprints/create.blade.php
@@ -17,7 +17,7 @@
                     {{ __('statamic::messages.blueprints_title_instructions') }}
                 </div>
                 @if ($errors->has('title'))
-                    <div class="text-red text-xs mt-2">{{ $errors->first('title') }}</div>
+                    <div class="text-red-500 text-xs mt-2">{{ $errors->first('title') }}</div>
                 @endif
             </div>
         </div>
diff --git a/resources/views/licensing.blade.php b/resources/views/licensing.blade.php
index 252edb1f8ac..4f98ead6813 100644
--- a/resources/views/licensing.blade.php
+++ b/resources/views/licensing.blade.php
@@ -50,7 +50,7 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $site->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $site->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                         {{ $site->key() ?? __('No license key') }}
                     </td>
                     <td class="relative">
@@ -59,7 +59,7 @@
                             <span class="text-2xs">({{ trans_choice('and :count more', $site->additionalDomainCount()) }})</span>
                         @endif
                     </td>
-                    <td class="text-right text-red">{{ $site->invalidReason() }}</td>
+                    <td class="text-right text-red-500">{{ $site->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -69,11 +69,11 @@
             <table class="data-table">
                 <tr>
                     <td class="w-64 font-bold">
-                        <span class="little-dot {{ $statamic->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                        <span class="little-dot {{ $statamic->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                         Statamic @if ($statamic->pro())<span class="text-pink">Pro</span>@else Free @endif
                     </td>
                     <td>{{ $statamic->version() }}</td>
-                    <td class="text-right text-red">{{ $statamic->invalidReason() }}</td>
+                    <td class="text-right text-red-500">{{ $statamic->invalidReason() }}</td>
                 </tr>
             </table>
         </div>
@@ -87,12 +87,12 @@
                 @foreach ($addons as $addon)
                     <tr>
                         <td class="w-64 mr-2">
-                            <span class="little-dot {{ $addon->valid() ? 'bg-green' : 'bg-red' }} mr-2"></span>
+                            <span class="little-dot {{ $addon->valid() ? 'bg-green-600' : 'bg-red-500' }} mr-2"></span>
                             <span class="font-bold"><a href="{{ $addon->addon()->marketplaceUrl() }}" class="text-gray hover:text-blue">{{ $addon->name() }}</a></span>
                             @if ($addon->edition())<span class="badge uppercase font-bold text-gray-600">{{ $addon->edition() ?? '' }}</span>@endif
                         </td>
                         <td>{{ $addon->version() }}</td>
-                        <td class="text-right text-red">{{ $addon->invalidReason() }}</td>
+                        <td class="text-right text-red-500">{{ $addon->invalidReason() }}</td>
                     </tr>
                 @endforeach
             </table>
@@ -106,7 +106,7 @@
                 @foreach ($unlistedAddons as $addon)
                     <tr>
                         <td class="w-64 font-bold mr-2">
-                            <span class="little-dot bg-green mr-2"></span>
+                            <span class="little-dot bg-green-600 mr-2"></span>
                             {{ $addon->name() }}
                         </td>
                         <td>{{ $addon->version() }}</td>
diff --git a/resources/views/nav/duplicates.blade.php b/resources/views/nav/duplicates.blade.php
index 036fd2b76ce..bc753f5ebf3 100644
--- a/resources/views/nav/duplicates.blade.php
+++ b/resources/views/nav/duplicates.blade.php
@@ -1,6 +1,6 @@
 <li class="{{ $item->isActive() ? 'current' : '' }}">
     <a href="{{ $item->url() }}">
         <i>{!! $item->icon() !!}</i><span>{{ __($item->name()) }}</span>
-        <span class="badge-sm bg-red ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
+        <span class="badge-sm bg-red-500 ml-2">{{ Statamic\Facades\Stache::duplicates()->count() }}</span>
     </a>
 </li>
diff --git a/resources/views/partials/licensing-alerts.blade.php b/resources/views/partials/licensing-alerts.blade.php
index 66129184972..6a2c45118ec 100644
--- a/resources/views/partials/licensing-alerts.blade.php
+++ b/resources/views/partials/licensing-alerts.blade.php
@@ -20,7 +20,7 @@
             <div class="
                 py-3 px-4 text-sm w-full rounded-md
                 @if ($licenses->isOnTestDomain()) bg-gray-800 text-gray-300 @endif
-                @if ($licenses->isOnPublicDomain()) bg-red text-white @endif
+                @if ($licenses->isOnPublicDomain()) bg-red-500 text-white @endif
             ">
                 @if ($licenses->isOnTestDomain())
                     <div class="flex items-center justify-between">
diff --git a/resources/views/playground.blade.php b/resources/views/playground.blade.php
index 2c1ecb23ce5..bbf9c75e9cf 100644
--- a/resources/views/playground.blade.php
+++ b/resources/views/playground.blade.php
@@ -149,10 +149,10 @@
 
         <h6 class="mb-4">Small</h6>
         <div class="flex">
-            <button class="mr-4 btn btn-sm">Default Button</button>
-            <button class="mr-4 btn-primary btn-sm">Primary Button</button>
-            <button class="mr-4 btn-danger btn-sm">Danger Button</button>
-            <button class="btn-flat btn-sm">Flat Button</button>
+            <button class="mr-4 btn btn-xs">Default Button</button>
+            <button class="mr-4 btn-primary btn-xs">Primary Button</button>
+            <button class="mr-4 btn-danger btn-xs">Danger Button</button>
+            <button class="btn-flat btn-xs">Flat Button</button>
         </div>
     </div>
 
@@ -205,14 +205,21 @@
         <h6 class="mb-4">Other Colors (needs simplifying)</h6>
         <div class="flex text-sm text-center">
             <div class="text-black bg-blue p-6 flex-1">Blue</div>
-            <div class="text-black bg-green p-6 flex-1">Green</div>
-            <div class="text-black bg-red p-6 flex-1">Red</div>
+            <div class="text-black bg-green-600 p-6 flex-1">Green</div>
             <div class="text-black bg-orange-light border border-orange p-6 m-1 flex-1">Orange</div>
             <div class="text-black bg-yellow border border-yellow-dark p-6 m-1 flex-1">Yellow</div>
             <div class="text-black bg-yellow-dark p-6 m-1 flex-1">Yellow Dark</div>
             <div class="text-black bg-pink border border-pink-dark m-1 p-6 flex-1">Pink</div>
             <div class="text-black bg-purple-light border border-purple p-6 flex-1">Purple</div>
         </div>
+
+        <h6 class="my-4">Reds</h6>
+        <div class="flex text-sm text-center space-x-1">
+            <div class="text-black bg-red-100 border border-red-200 p-6 flex-1">Red Lighter</div>
+            <div class="text-black bg-red-400 p-6 flex-1">Red Light</div>
+            <div class="text-black bg-red-500 p-6 flex-1">Red</div>
+            <div class="text-black bg-red-700 p-6 flex-1">Red Dark</div>
+        </div>
     </div>
 
     <h2 class="mb-2">Widgets</h2>
@@ -227,7 +234,7 @@
                 </div>
                 <div class="text-4xl mb-4">89</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-sm">8.54% Increase</span>
                 </div>
             </div>
@@ -242,7 +249,7 @@
                 </div>
                 <div class="text-4xl mb-4">35</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-sm">2.15% Increase</span>
                 </div>
             </div>
@@ -257,7 +264,7 @@
                 </div>
                 <div class="text-4xl mb-4 text-gray-400">251</div>
                 <div class="flex items-center ">
-                    <span class="w-4 h-4 text-green mr-2">@cp_svg('performance-increase')</span>
+                    <span class="w-4 h-4 text-green-500 mr-2">@cp_svg('performance-increase')</span>
                     <span class="leading-none text-gray-400 text-sm">8.54% Increase</span>
                 </div>
             </div>
diff --git a/resources/views/updater/index.blade.php b/resources/views/updater/index.blade.php
index 1d4a4380a98..d03dbb9b907 100644
--- a/resources/views/updater/index.blade.php
+++ b/resources/views/updater/index.blade.php
@@ -34,7 +34,7 @@ class="btn-primary btn-lg">{{ __('Try again') }}</a>
                     <td class="w-64"><a href="{{ route('statamic.cp.updater.product', 'statamic') }}" class="text-blue font-bold">Statamic</a></td>
                     <td>{{ $statamic->currentVersion() }}</td>
                     @if ($count = $statamic->availableUpdatesCount())
-                        <td class="text-right"><span class="badge-sm bg-green btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                        <td class="text-right"><span class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                         <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
@@ -52,7 +52,7 @@ class="text-blue font-bold mr-2">{{ $addon -> name() }}</a>
                     <td>{{ $addon -> version() }}</td>
                     @if ($count = $addon->changelog()->availableUpdatesCount())
                     <td class="text-right"><span
-                            class="badge-sm bg-green btn-sm">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
+                            class="badge-sm bg-green-600 btn-xs">{{ trans_choice('1 update|:count updates', $count) }}</span></td>
                     @else
                     <td class="text-right">{{ __('Up to date') }}</td>
                     @endif
diff --git a/resources/views/utilities/email.blade.php b/resources/views/utilities/email.blade.php
index aa78772c3f9..0655b38046b 100644
--- a/resources/views/utilities/email.blade.php
+++ b/resources/views/utilities/email.blade.php
@@ -20,7 +20,7 @@
                 <button type="submit" class="btn-primary">{{ __('Send Test Email') }}</button>
             </div>
             @if ($errors->has('email'))
-                <p class="mt-2"><small class="help-block text-red">{{ $errors->first('email') }}</small></p>
+                <p class="mt-2"><small class="help-block text-red-500">{{ $errors->first('email') }}</small></p>
             @endif
         </form>
     </div>
diff --git a/resources/views/utilities/search.blade.php b/resources/views/utilities/search.blade.php
index 3d8c7f6e4a4..ca29618c901 100644
--- a/resources/views/utilities/search.blade.php
+++ b/resources/views/utilities/search.blade.php
@@ -23,7 +23,7 @@
 
     <div class="card p-0">
         @if ($errors->has('indexes'))
-            <p class="p-4"><small class="help-block text-red">{{ $errors->first() }}</small></p>
+            <p class="p-4"><small class="help-block text-red-500">{{ $errors->first() }}</small></p>
         @endif
 
         <table class="data-table">
@@ -72,7 +72,7 @@
                             <form method="POST" action="{{ cp_route('utilities.search') }}">
                                 @csrf
                                 <input type="hidden" name="indexes[]" value="{{ $index->name() }}">
-                                <button type="submit" class="btn btn-sm">{{ __('Update') }}</button>
+                                <button type="submit" class="btn btn-xs">{{ __('Update') }}</button>
                             </form>
                         </td>
                     </tr>
diff --git a/resources/views/widgets/updater.blade.php b/resources/views/widgets/updater.blade.php
index 2dd1fcea7ca..4aea9f2181b 100644
--- a/resources/views/widgets/updater.blade.php
+++ b/resources/views/widgets/updater.blade.php
@@ -7,7 +7,7 @@
             <span>{{ __('Updates') }}</span>
         </h2>
         @if ($count)
-            <a href="{{ cp_route('updater') }}" class="badge-sm bg-green text-white">
+            <a href="{{ cp_route('updater') }}" class="badge-sm bg-green-600 text-white">
                 {{ trans_choice('1 update available|:count updates available', $count) }}
             </a>
         @endif
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/Collections/CollectionsController.php b/src/Http/Controllers/CP/Collections/CollectionsController.php
index 041bca2e396..4c94b6a1fa9 100644
--- a/src/Http/Controllers/CP/Collections/CollectionsController.php
+++ b/src/Http/Controllers/CP/Collections/CollectionsController.php
@@ -75,6 +75,11 @@ public function show(Request $request, $collection)
 
         $columns = $blueprint
             ->columns()
+            ->prepend(Column::make('status')
+                ->listable(true)
+                ->visible(true)
+                ->defaultVisibility(true)
+                ->sortable(false), 'status')
             ->setPreferred("collections.{$collection->handle()}.columns")
             ->rejectUnlisted()
             ->values();
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/Http/Resources/CP/Entries/Entries.php b/src/Http/Resources/CP/Entries/Entries.php
index c0fd9e4a01e..2f15f40024d 100644
--- a/src/Http/Resources/CP/Entries/Entries.php
+++ b/src/Http/Resources/CP/Entries/Entries.php
@@ -3,6 +3,7 @@
 namespace Statamic\Http\Resources\CP\Entries;
 
 use Illuminate\Http\Resources\Json\ResourceCollection;
+use Statamic\CP\Column;
 use Statamic\Http\Resources\CP\Concerns\HasRequestedColumns;
 
 class Entries extends ResourceCollection
@@ -31,6 +32,14 @@ private function setColumns()
     {
         $columns = $this->blueprint->columns();
 
+        $status = Column::make('status')
+            ->listable(true)
+            ->visible(true)
+            ->defaultVisibility(true)
+            ->sortable(false);
+
+        $columns->prepend($status, 'status');
+
         if ($key = $this->columnPreferenceKey) {
             $columns->setPreferred($key);
         }
diff --git a/src/Http/Resources/CP/Entries/ListedEntry.php b/src/Http/Resources/CP/Entries/ListedEntry.php
index a63f83e2549..cd1a30fd5a3 100644
--- a/src/Http/Resources/CP/Entries/ListedEntry.php
+++ b/src/Http/Resources/CP/Entries/ListedEntry.php
@@ -33,6 +33,7 @@ public function toArray($request)
         return [
             'id' => $entry->id(),
             'published' => $entry->published(),
+            'status' => $entry->status(),
             'private' => $entry->private(),
             'date' => $this->when($collection->dated(), function () {
                 return $this->resource->date()->inPreferredFormat();
@@ -60,9 +61,13 @@ protected function values($extra = [])
                 $value = $extra[$key] ?? $this->resource->value($key);
             }
 
-            $value = $this->blueprint
-                ->field($key)
-                ->setValue($value)
+            $field = $this->blueprint->field($key);
+
+            if (! $field) {
+                return [$key => $value];
+            }
+
+            $value = $field->setValue($value)
                 ->setParent($this->resource)
                 ->preProcessIndex()
                 ->value();
diff --git a/src/Http/View/Composers/JavascriptComposer.php b/src/Http/View/Composers/JavascriptComposer.php
index d9113d48943..66f0fe06132 100644
--- a/src/Http/View/Composers/JavascriptComposer.php
+++ b/src/Http/View/Composers/JavascriptComposer.php
@@ -38,6 +38,7 @@ public function compose(View $view)
             'user' => $this->user($user),
             'paginationSize' => config('statamic.cp.pagination_size'),
             'paginationSizeOptions' => config('statamic.cp.pagination_size_options'),
+            'alwaysShowFilters' => config('statamic.cp.always_show_filters'),
             'translationLocale' => app('translator')->locale(),
             'translations' => app('translator')->toJson(),
             'sites' => $this->sites(),
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/tailwind.config.js b/tailwind.config.js
index b18b28034cc..da7977428d2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,11 +38,6 @@ module.exports = {
                 950: '#141a1f',
                 DEFAULT: '#73808c',
             },
-            green: {
-                dark: '#3A804D',
-                light: '#64BD63',
-                DEFAULT: '#479967',
-            },
             orange: {
                 light: '#fcc062',
                 DEFAULT: '#f5a82f',
@@ -58,17 +53,14 @@ module.exports = {
                 DEFAULT: '#c471ed',
                 dark: '#a855cd',
             },
-            red: {
-                lighter: '#fce9e9',
-                light: '#ed7c78',
-                DEFAULT: '#e7514b',
-                dark: '#cb4743',
-            },
             yellow: {
                 light: '#ffffe0',
                 DEFAULT: '#fbfab0',
                 dark: '#e8dc1e',
             },
+            amber: colors.amber,
+            green: colors.green,
+            red: colors.red,
         },
         screens: {
             'sm': '576px',
@@ -152,6 +144,8 @@ module.exports = {
                 240: '60rem',
             },
             zIndex: {
+                1: '1',
+                2: '2',
                 5: '5',
                 200: '200',
                 top: '1001',
@@ -162,6 +156,7 @@ module.exports = {
     },
     plugins: [
         require('@tailwindcss/container-queries'),
+        require('@tailwindcss/line-clamp'),
         require('@tailwindcss/typography'),
     ],
     important: true,
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();