diff --git a/resources/css/components/assets.css b/resources/css/components/assets.css
index 66a68ed0da2..a6445dfadf9 100644
--- a/resources/css/components/assets.css
+++ b/resources/css/components/assets.css
@@ -146,9 +146,7 @@
    ========================================================================== */
 
 .asset-tile {
-    @apply bg-white;
-    min-width: 0;
-    position: relative;
+    @apply bg-white relative min-w-0;
 
     .asset-thumb {
         @apply flex justify-center items-center;
@@ -157,152 +155,60 @@
         }
     }
 
+    .asset-thumb-container:hover .asset-controls {
+        @apply block;
+    }
+
     .asset-meta {
         @apply border-t w-full text-2xs text-gray-700;
     }
 
     .asset-filename {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        @apply truncate;
     }
 
     .asset-controls {
         @apply absolute hidden;
     }
-
-    .asset-thumb-container:hover .asset-controls {
-        display: block;
-    }
 }
 
 .asset-tile.selected {
     @apply border-blue;
     box-shadow: 0 0 0 1px theme('colors.blue.DEFAULT');
+}
 
+.asset-thumbnail {
+    @apply border border-white;
 }
 
 /* The Asset Editor
   ========================================================================== */
 
-@media all and (max-width: 800px) {
-    .asset-editor-meta-items .meta-item {
-        display: none;
-    }
-}
-
 .asset-editor {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    background: white;
-    height: 100%;
-
-    .loading {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 10;
-        background: rgba(255, 255, 255, 0.7);
-        @apply flex items-center justify-center;
-    }
-
-    .editor-main {
-        flex-grow: 1;
-        display: flex;
-        justify-content: space-between;
-    }
-
     .editor-preview {
-        flex-basis: 64%;
-        flex-grow: 1;
-    }
-
-    .editor-form {
-        flex-basis: 36%;
-    }
-
-    .editor-meta {
-        display: flex;
-        border-bottom: 1px solid #e0e0e0;
-    }
-}
-
-.asset-editor-meta-items {
-    @apply flex flex-1 items-center;
-
-    .meta-item {
-  		@apply flex items-start flex-col border-l px-4 h-full justify-center;
-      cursor: text;
-    }
-
-    .meta-label {
-		@apply block p-0 text-sm text-gray-800;
-    }
-
-	.meta-value {
-		@apply block p-0 text-xs text-gray-600;
-    }
-}
-
-.asset-editor-meta-actions {
-    display: flex;
-    align-items: center;
-    height: 60px;
-
-    button {
-        display: block;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        padding: 0 25px;
-
-        &:not(:first-child) {
-            @apply border;
+        .editor-preview-image {
+            @apply flex flex-col flex-1 p-8;
         }
-        svg { opacity: .75; }
-        &:hover svg { opacity: 1; }
-    }
-}
 
-.asset-editor .editor-preview {
-	@apply bg-gray-800 flex flex-col justify-between;
-
-    .editor-preview-image {
-        flex: 1;
-        padding: 30px;
-        display: flex;
-        flex-direction: column;
-    }
-
-    .image-wrapper {
-        flex: 1 1 auto;
-        position: relative;
-
-        > * {
-            @apply absolute w-auto h-auto max-w-full max-h-full;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            box-shadow: 0 0 32px rgba(0, 0, 0, .35);
+        .image-wrapper {
+            flex: 1 1 auto;
+            position: relative;
+
+            > * {
+                @apply absolute w-auto h-auto max-w-full max-h-full;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+                box-shadow: 0 0 32px rgba(0, 0, 0, .35);
+            }
         }
     }
 
-    .editor-file-actions {
-		@apply bg-gray-900 p-4 text-center h-16;
-
-        button {
-            @apply mx-1;
-        }
+    .loading {
+        @apply absolute inset-0 z-10 bg-white/70 flex items-center justify-center rounded;
     }
 }
 
-.asset-thumbnail {
-    border: 1px solid white;
-}
-
 /* Lazyloading
   ========================================================================== */
 
diff --git a/resources/css/components/fieldtypes/assets.css b/resources/css/components/fieldtypes/assets.css
index 5edcec20621..6af1713e64c 100644
--- a/resources/css/components/fieldtypes/assets.css
+++ b/resources/css/components/fieldtypes/assets.css
@@ -7,14 +7,14 @@
 }
 
 .assets-fieldtype .assets-fieldtype-picker {
-    @apply flex items-center px-4 py-2 bg-gray-200 border rounded;
+    @apply flex flex-col @sm:flex-row items-start @sm:items-center px-4 py-2 bg-gray-200 border rounded;
 
     &.is-expanded {
         @apply border-b-0 rounded-b-none;
     }
 
     .asset-upload-control {
-      @apply ml-4;
+      @apply mt-2 @sm:ml-4 @sm:mt-0 text-xs text-gray-600 leading-tight;
     }
 
     .upload-text-button {
diff --git a/resources/css/components/fieldtypes/bard.css b/resources/css/components/fieldtypes/bard.css
index d96c77d7b7c..d61e02cc5a4 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -9,15 +9,17 @@
 }
 
 .bard-editor {
-    @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative;
+    @apply text-gray-800 bg-gray-100 shadow-inner p-0 relative rounded;
 }
 
 .bard-editor .ProseMirror {
-    @apply p-2 min-h-40;
+    @apply p-1 min-h-40 text-sm leading-tight;
+    @apply @sm:p-2 text-md leading-normal;
+    @apply @lg:p-4;
 }
 
 .bard-editor .bard-invalid {
-    @apply p-2 bg-red-lighter text-red text-xs whitespace-nowrap;
+    @apply p-2 @lg:px-4 bg-red-lighter text-red text-xs whitespace-nowrap;
 }
 
 /*  Modes */
@@ -38,12 +40,6 @@
     }
 }
 
-/*  Responive Wangjangling */
-@screen md {
-    .bard-editor .ProseMirror { @apply p-4; }
-    .bard-editor .bard-invalid { @apply px-4; }
-}
-
 .bard-fixed-toolbar {
     @apply bg-white shadow-none rounded-t border-b text-sm flex items-start justify-between;
     position: sticky;
@@ -81,7 +77,7 @@
     }
 
     button sup {
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        @apply font-sans;
     }
 }
 
@@ -205,10 +201,14 @@
 .bard-set-selector {
     /*  transition: all .15s ease-in-out; */
 
-    .dropdown-menu {
+    /* .dropdown-menu {
         left: -5px;
         right: auto;
-    }
+    } */
+}
+
+.set-picker .popover .popover-content {
+    min-width: 320px !important;
 }
 
 
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 06d0fdfebad..3c8d4e93ae4 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -41,14 +41,12 @@ code.parent-url {
 }
 
 .publish-fields {
-    display: flex;
-    flex-wrap: wrap;
+    @apply flex flex-wrap;
 
     .form-group {
         > label,
         .field-inner > label {
-            font-weight: 500;
-            margin-bottom: 8px;
+            @apply font-medium mb-2;
         }
     }
 
@@ -65,14 +63,8 @@ code.parent-url {
     }
 
     .read-only-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
+        @apply absolute inset-0 cursor-not-allowed bg-white/25;
         z-index: 100;
-        cursor: not-allowed;
-        background: rgba(255, 255, 255, 0.25);
     }
 }
 
@@ -87,7 +79,6 @@ code.parent-url {
 .publish-sidebar {
     @apply shrink-0;
     margin-left: 20px;
-
     width: 300px;
 
     .publish-section-actions {
@@ -112,33 +103,3 @@ code.parent-url {
 .publish-section:not(:empty) {
     @apply shadow bg-white rounded-md w-full;
 }
-
-
-
-/* Inline publish form
-   Used in popovers and in the asset editor modal.
-   ========================================================================== */
-
-.editor-form {
-    position: relative;
-
-    .editor-form-fields {
-        /*  Could have done this with flexbox but firefox was pushing */
-        /*  out the height if there were many publish fields. */
-        position: absolute;
-        top: 0;
-        left: 0;
-        bottom: 71px;
-        right: 0;
-        overflow: auto;
-    }
-
-    .editor-form-actions {
-        @apply absolute p-4 h-16 border-t bottom-0 inset-x-0;
-        z-index: 2;
-    }
-
-    .publish-fields .form-group {
-        @apply px-4 pt-2
-    }
-}
diff --git a/resources/css/components/tabs.css b/resources/css/components/tabs.css
index 5fca7b6759d..b8f155d5c7a 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -67,9 +67,6 @@
     }
 }
 
-.tab-panel:focus {
-    @apply focus-outline;
-}
 
 @screen md {
     .tabs .tab-button {
diff --git a/resources/css/components/toggle.css b/resources/css/components/toggle.css
index 1d0cf604b11..d6675970dbc 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -24,15 +24,13 @@
 }
 
 .toggle-container {
-    background: #fff;
+    @apply bg-white cursor-pointer relative border;
     height: 22px;
     width: 46px;
     border-radius: 20px;
-    cursor: pointer;
-    position: relative;
-    border: 1px solid #dfdfdf;
     font-size: 0.1px;
     margin: 6px 0;
+    transition: background-color 0.2s ease;
     &:focus { outline: none; }
 }
 
@@ -40,7 +38,7 @@
     position: absolute;
     top: -1px;
     width: 20px;
-    height: 22px;
+    height: 20px;
     border-radius: 20px;
     transition: all 0.2s ease;
 
@@ -67,8 +65,8 @@
 }
 
 .toggle-container.on {
+    @apply bg-green-light border-green;
     .toggle-slider {
-        @apply bg-green-light;
         width: 44px;
     }
 
@@ -105,7 +103,7 @@
     }
 
     .toggle-container.on .toggle-slider {
-        width: 22px;
+        width: 19px;
     }
 }
 
diff --git a/resources/css/core/utilities.css b/resources/css/core/utilities.css
index d3543fee2db..472dc24ca94 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -7,7 +7,7 @@
 }
 
 .focus-outline {
-    @apply border-blue-300;
+    @apply border border-blue-200;
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(0,125,255,.25);
 }
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index de3db6f9311..bd72472d45e 100644
--- a/resources/css/elements/forms.css
+++ b/resources/css/elements/forms.css
@@ -10,16 +10,9 @@ input {
     @apply placeholder:text-gray-600;
 }
 
-input[type="checkbox"] {
-    font-size: 18px;
-    position: relative;
-    top: 1px;
-}
-
+input[type="checkbox"],
 input[type="radio"] {
-    font-size: 18px;
-    position: relative;
-    top: 1px;
+    @apply text-lg;
 }
 
 select {
@@ -32,6 +25,7 @@ select {
 
 .input-text {
     @apply appearance-none bg-gray-100 text-gray-800 max-w-full w-full border p-2 rounded shadow-inner placeholder:text-gray-600;
+    @apply border;
     transition: border-color .15s ease-in-out,
                 box-shadow .15s ease-in-out;
 
@@ -155,8 +149,7 @@ input.input-text-minimal:read-only,
     @apply mt-3 flex items-center;
 
     input {
-        @apply leading-normal mr-1 relative;
-        top: -1px;
+        @apply leading-normal mr-1;
     }
 
     label {
@@ -251,7 +244,7 @@ input[type="file"] {
 /* Form groups
   ========================================================================== */
 .form-group {
-    @apply p-3 m-0;
+    @apply p-3 @sm:p-4 @lg:p-6 m-0;
 
     label {
         font-weight: 500;
@@ -292,8 +285,3 @@ input[type="file"] {
     }
 }
 
-@screen md {
-    .form-group {
-        @apply p-6;
-    }
-}
diff --git a/resources/js/components/assets/Editor/Editor.vue b/resources/js/components/assets/Editor/Editor.vue
index 7eb88144b16..9848e728fcc 100644
--- a/resources/js/components/assets/Editor/Editor.vue
+++ b/resources/js/components/assets/Editor/Editor.vue
@@ -5,7 +5,7 @@
         :full="true"
         @closed="close">
 
-    <div class="asset-editor" :class="isImage ? 'is-image' : 'is-file'">
+    <div class="asset-editor flex flex-col relative bg-gray-100 h-full rounded" :class="isImage ? 'is-image' : 'is-file'">
 
         <div v-if="loading" class="loading">
             <loading-graphic />
@@ -13,43 +13,60 @@
 
         <template v-if="!loading">
 
-            <div class="editor-meta">
-                <div class="asset-editor-meta-items">
-                    <div class="meta-item">
-                        <span class="meta-label">{{ __('Path') }}</span>
-                        <span class="meta-value">{{ asset.path }}</span>
-                    </div>
-                    <div class="meta-item" v-if="isImage">
-                        <span class="meta-label">{{ __('Dimensions') }}</span>
-                        <span class="meta-value">{{ asset.width }} x {{ asset.height }}</span>
-                    </div>
-                    <div class="meta-item">
-                        <span class="meta-label">{{ __('Size') }}</span>
-                        <span class="meta-value">{{ asset.size }}</span>
-                    </div>
-                    <div class="meta-item">
-                        <span class="meta-label">{{ __('Last Modified') }}</span>
-                        <span class="meta-value" :title="asset.lastModified">{{ asset.lastModifiedRelative }}</span>
-                    </div>
-                </div>
-
-                <div class="asset-editor-meta-actions">
-                    <button @click="open" v-tooltip="__('Open in a new window')" :aria-label="__('Open in a new window')">
-                        <svg-icon name="external-link" class="h-6 w-6"/>
-                    </button>
-                    <button @click="download" v-tooltip="__('Download file')" :aria-label="__('Download file')" v-if="asset.allowDownloading">
-                        <svg-icon name="download" class="h-6 w-6"/>
-                    </button>
-                    <button @click="close" v-tooltip="__('Close editor')" :aria-label="__('Close editor')">
-                        <svg-icon name="close" class="h-6 w-6"/>
-                    </button>
-                </div>
+            <!-- Header -->
+            <div id="asset-editor-header" class="flex justify-between w-full px-2 relative">
+                <button class="flex items-center p-4 group" @click="open" v-tooltip.right="__('Open in a new window')" :aria-label="__('Open in a new window')">
+                    <svg-icon name="folder-image" class="text-gray-700 h-5 w-5" />
+                    <span class="ml-2 text-sm text-gray-800 group-hover:text-blue">{{ asset.path }}</span>
+                    <svg-icon name="chevron-right" class="text-gray-700 h-5 w-5 group-hover:text-blue" />
+                </button>
+                <button class="btn-close absolute top-2 right-2.5" @click="close" :aria-label="__('Close Editor')">&times;</button>
             </div>
 
-            <div class="editor-main">
+            <div class="flex flex-1 flex-col md:flex-row md:justify-between grow overflow-scroll">
+
+                <!-- Visual Area -->
+                <div class="editor-preview bg-gray-800 md:rounded-tr-md flex flex-col justify-between flex-1 min-h-[45vh] md:min-h-auto md:flex-auto md:grow w-full md:w-1/2 lg:w-2/3 shadow-[inset_0px_4px_3px_0px_black]">
+
+                    <!-- Toolbar -->
+                    <div id="asset-editor-toolbar" class="@container/toolbar flex items-center justify-center py-4 px-2 text-2xs text-white text-center space-x-1 sm:space-x-3" v-if="!readOnly">
+                        <button v-if="isImage && isFocalPointEditorEnabled" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center justify-center px-3 py-1.5" @click.prevent="openFocalPointEditor">
+                            <svg-icon name="focal-point" class="h-4" />
+                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Focal Point') }}</span>
+                        </button>
+
+                        <button v-if="canRunAction('rename_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('rename_asset')">
+                            <svg-icon name="rename-file" class="h-4" />
+                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Rename') }}</span>
+                        </button>
+
+                        <button v-if="canRunAction('move_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('move_asset')">
+                            <svg-icon name="move-file" class="h-4" />
+                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Move') }}</span>
+                        </button>
+
+                        <button v-if="canRunAction('replace_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('replace_asset')">
+                            <svg-icon name="swap" class="h-4" />
+                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Replace') }}</span>
+                        </button>
 
-                <div class="editor-preview">
+                        <button v-if="canRunAction('reupload_asset')" type="button" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click.prevent="runAction('reupload_asset')">
+                            <svg-icon name="upload-cloud" class="h-4" />
+                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Reupload') }}</span>
+                        </button>
+
+                        <button v-if="asset.allowDownloading" class="flex bg-gray-750 hover:bg-gray-900 hover:text-yellow-light rounded items-center px-3 py-1.5" @click="download" :aria-label="__('Download file')">
+                            <svg-icon name="download-desktop" class="h-4"/>
+                            <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">
+                            <svg-icon name="trash-line" class="h-4" />
+                            <span class="ml-2 hidden @3xl/toolbar:inline-block">{{ __('Delete') }}</span>
+                        </button>
+                    </div>
+
+                    <!-- Image Preview -->
                     <div
                         v-if="asset.isImage || asset.isSvg || asset.isAudio || asset.isVideo"
                         class="editor-preview-image"
@@ -91,47 +108,25 @@
                     <div class="h-full" v-else-if="asset.isPreviewable && canUseGoogleDocsViewer">
                         <iframe class="h-full w-full" frameborder="0" :src="'https://docs.google.com/gview?url=' + asset.permalink + '&embedded=true'"></iframe>
                     </div>
-
-                    <div class="editor-file-actions" v-if="!readOnly">
-                        <button v-if="isImage && isFocalPointEditorEnabled" type="button" class="btn" @click.prevent="openFocalPointEditor">
-                            {{ __('Set Focal Point') }}
-                        </button>
-
-                        <button v-if="canRunAction('rename_asset')" type="button" class="btn" @click.prevent="runAction('rename_asset')">
-                            {{ __('Rename') }}
-                        </button>
-
-                        <button v-if="canRunAction('move_asset')" type="button" class="btn" @click.prevent="runAction('move_asset')">
-                            {{ __('Move') }}
-                        </button>
-
-                        <button v-if="canRunAction('replace_asset')" type="button" class="btn" @click.prevent="runAction('replace_asset')">
-                            {{ __('Replace') }}
-                        </button>
-
-                        <button v-if="canRunAction('reupload_asset')" type="button" class="btn" @click.prevent="runAction('reupload_asset')">
-                            {{ __('Reupload') }}
-                        </button>
-                    </div>
-
                 </div>
 
+                <!-- Fields Area -->
                 <publish-container
                     v-if="fields"
                     :name="publishContainer"
                     :blueprint="fieldset"
                     :values="values"
                     :meta="meta"
-                    :errors="errors"
+
                     @updated="values = { ...$event, focus: values.focus }"
                 >
-                    <div class="editor-form" slot-scope="{ setFieldValue, setFieldMeta }">
+                    <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 v-if="saving" class="loading">
                             <loading-graphic text="Saving" />
                         </div>
 
-                        <div class="editor-form-fields">
+                        <div class="card p-0">
                             <div v-if="error" class="bg-red text-white p-4 shadow mb-4" v-text="error" />
                             <publish-fields
                                 :fields="fields"
@@ -140,20 +135,33 @@
                                 @meta-updated="setFieldMeta"
                             />
                         </div>
-
-                        <div class="editor-form-actions text-right" v-if="!readOnly">
-                            <button v-if="allowDeleting && canRunAction('delete')" type="button" class="btn-danger mr-2" @click="runAction('delete')">
-                                {{ __('Delete') }}
-                            </button>
-                            <button type="button" class="btn-primary" @click="save">
-                                {{ __('Save') }}
-                            </button>
-                        </div>
-
                     </div>
                 </publish-container>
+            </div>
 
-
+            <div class="bg-gray-200 w-full border-t flex items-center justify-end py-3 px-4 rounded-b">
+                <div id="asset-meta-data" class="flex-1 hidden sm:flex space-x-3 py-1 h-full text-xs text-gray-800">
+                    <div class="flex items-center bg-gray-400 rounded py-1 pl-2 pr-3" v-if="isImage">
+                        <svg-icon name="image-picture" class="h-3 mr-2" />
+                        <div class="">{{ asset.width }} x {{ asset.height }}</div>
+                    </div>
+                    <div class="flex items-center bg-gray-400 rounded py-1 pl-2 pr-3">
+                        <svg-icon name="sd-card" class="h-3 mr-2" />
+                        <div class="">{{ asset.size }}</div>
+                    </div>
+                    <div class="flex items-center bg-gray-400 rounded py-1 pl-2 pr-3">
+                        <svg-icon name="thumbprint" class="h-3 mr-2" />
+                        <div class="" :title="asset.lastModified">{{ asset.lastModifiedRelative }}</div>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-3">
+                    <button type="button" class="btn" @click="close">
+                        {{ __('Cancel') }}
+                    </button>
+                    <button type="button" class="btn-primary" @click="save" v-if="!readOnly">
+                        {{ __('Save') }}
+                    </button>
+                </div>
             </div>
 
         </template>
@@ -238,18 +246,12 @@ export default {
 
     computed: {
 
-        /**
-         * Whether the asset is an image
-         */
         isImage() {
             if (! this.asset) return false;
 
             return this.asset.isImage;
         },
 
-        /**
-         * Whether there are errors present.
-         */
         hasErrors: function() {
             return this.error || Object.keys(this.errors).length;
         },
@@ -262,11 +264,11 @@ export default {
         isFocalPointEditorEnabled()
         {
             return Statamic.$config.get("focalPointEditorEnabled");
-        }
+        },
     },
 
-
     mounted() {
+        document.body.classList.add('overflow-hidden')
         this.$modal.show('asset-editor');
         this.load();
     },
@@ -314,32 +316,20 @@ export default {
             });
         },
 
-        /**
-         * Open the focal point editor UI
-         */
         openFocalPointEditor() {
             this.showFocalPointEditor = true;
         },
 
-        /**
-         * Close the focal point editor UI
-         */
         closeFocalPointEditor() {
             this.showFocalPointEditor = false;
         },
 
-        /**
-         * When the focal point is selected
-         */
         selectFocalPoint(point) {
             point = (point === '50-50-1') ? null : point;
             this.$set(this.values, 'focus', point);
             this.$dirty.add(this.publishContainer);
         },
 
-        /**
-         * Save the asset
-         */
         save() {
             this.saving = true;
             const url = cp_url(`assets/${utf8btoa(this.id)}`);
@@ -370,12 +360,10 @@ export default {
             this.errors = {};
         },
 
-        /**
-         * Close the editor
-         */
         close() {
             this.$modal.hide('asset-editor');
             this.$emit('closed');
+            document.body.classList.remove('overflow-hidden')
         },
 
         shouldClose() {
diff --git a/resources/js/components/blueprints/Builder.vue b/resources/js/components/blueprints/Builder.vue
index d97ed1ed1ab..05ef83c09d1 100644
--- a/resources/js/components/blueprints/Builder.vue
+++ b/resources/js/components/blueprints/Builder.vue
@@ -9,7 +9,7 @@
             </div>
         </header>
 
-        <div class="publish-form card p-0" v-if="showTitle">
+        <div class="publish-form card p-0 @container" v-if="showTitle">
             <div class="form-group">
                 <label class="block">{{ __('Title') }}</label>
                 <small class="help-block">{{ __('messages.blueprints_title_instructions') }}</small>
diff --git a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
index 56d9a1d27ba..5b2d768e6d2 100644
--- a/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
+++ b/resources/js/components/fieldtypes/assets/AssetsFieldtype.vue
@@ -32,16 +32,16 @@
                         @click="openSelector"
                         @keyup.space.enter="openSelector"
                         tabindex="0">
-                        <svg-icon name="folder-image" class="w-6 h-6 text-gray-800"></svg-icon>
+                        <svg-icon name="folder-image" class="w-4 h-4 text-gray-800"></svg-icon>
                         {{ __('Browse') }}
                     </button>
 
-                    <p class="asset-upload-control text-xs text-gray-600" v-if="config.allow_uploads">
+                    <p class="asset-upload-control" v-if="config.allow_uploads">
                         <button type="button" class="upload-text-button" @click.prevent="uploadFile">
                             {{ __('Upload file') }}
                         </button>
-                        <span v-if="soloAsset" class="drag-drop-text hidden @md:inline" v-text="__('or drag & drop here to replace.')"></span>
-                        <span v-else class="drag-drop-text hidden @md:inline" v-text="__('or drag & drop here.')"></span>
+                        <span v-if="soloAsset" class="drag-drop-text" v-text="__('or drag & drop here to replace.')"></span>
+                        <span v-else class="drag-drop-text" v-text="__('or drag & drop here.')"></span>
                     </p>
                 </div>
 
diff --git a/resources/js/components/fieldtypes/bard/BardFieldtype.vue b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
index b4dd4620e29..33eae2bd86d 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -45,17 +45,39 @@
             </bubble-menu>
 
             <floating-menu class="bard-set-selector" :editor="editor" :tippy-options="{ offset: calcFloatingOffset, zIndex: 6 }" :should-show="shouldShowSetButton" v-if="editor">
-                <dropdown-list>
-                    <template v-slot:trigger>
-                        <button type="button" class="btn-round group flex items-center justify-center" :aria-label="__('Add Set')" v-tooltip="__('Add Set')">
-                            <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
-                        </button>
+                <popover class="set-picker" :scroll="true" :autoclose="false">
+                    <template #trigger>
+                        <slot name="trigger">
+                            <button type="button" class="btn-round group flex items-center justify-center" :aria-label="__('Add Set')" v-tooltip="__('Add Set')">
+                                <svg-icon name="micro-plus" class="w-3 h-3 text-gray-800 group-hover:text-black" />
+                            </button>
+                        </slot>
                     </template>
-
-                    <div v-for="set in config.sets" :key="set.handle">
-                        <dropdown-item :text="set.display || set.handle" @click="addSet(set.handle)" />
-                    </div>
-                </dropdown-list>
+                    <template #default>
+                        <div class="set-picker-header p-3 border-b text-xs flex items-center">
+                            <input type="text" class="py-1 px-2 border rounded w-full" :placeholder="__('Search Sets')" v-show="showSetSearch" />
+                            <button v-show="!showSetSearch" class="text-gray-700 hover:text-gray-900">
+                                <svg-icon name="chevron-left" class="w-2 h-2 mx-1" />
+                                {{ __('Set Group Name')}}
+                            </button>
+                        </div>
+                        <div class="p-1">
+                            <div v-for="set in config.sets" :key="set.handle" class="rounded">
+                                <dropdown-item @click="addSet(set.handle)" class="flex items-center group px-2 py-1.5 hover:bg-gray-200 rounded-md">
+                                    <div class="h-10 w-10 rounded bg-white border border-gray-600 mr-2 p-2.5">
+                                        <svg-icon name="folder-generic" class="text-gray-800" />
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="text-md font-medium text-gray-800 truncate w-52">{{ set.display || set.handle }}</div>
+                                        <!-- Placeholder Description -->
+                                        <div class="text-2xs text-gray-700 truncate w-52">{{ set.description || 'Lorem ipsum dolar sit amet' }}</div>
+                                    </div>
+                                    <svg-icon name="chevron-right-thin" class="text-gray-600 group-hover:text-gray-800" />
+                                </dropdown-item>
+                            </div>
+                        </div>
+                    </template>
+                </popover>
             </floating-menu>
 
             <div class="bard-invalid" v-if="invalid" v-html="__('Invalid content')"></div>
@@ -151,6 +173,7 @@ export default {
             invalid: false,
             pageHeader: null,
             escBinding: null,
+            showSetSearch: true
         }
     },
 
diff --git a/resources/svg/chevron-right-thin.svg b/resources/svg/chevron-right-thin.svg
new file mode 100644
index 00000000000..ab8f22d3289
--- /dev/null
+++ b/resources/svg/chevron-right-thin.svg
@@ -0,0 +1 @@
+<svg width="7" height="12" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l5.468-4.837a.217.217 0 000-.326L0 1" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
diff --git a/resources/svg/download-desktop.svg b/resources/svg/download-desktop.svg
new file mode 100644
index 00000000000..69cc780a934
--- /dev/null
+++ b/resources/svg/download-desktop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M6.25 5.61424H4.94752C4.75627 5.61424 4.58178 5.72333 4.49802 5.89526C4.41426 6.06719 4.43591 6.27183 4.5538 6.42243C5.20932 7.25986 5.66685 7.65949 6.32505 8.16367C6.72846 8.47269 7.27163 8.47269 7.67504 8.16367C8.33323 7.65949 8.79077 7.25986 9.44629 6.42243C9.56417 6.27183 9.58582 6.06719 9.50207 5.89526C9.41831 5.72333 9.24382 5.61424 9.05257 5.61424H7.75V0.766602C7.75 0.352388 7.41422 0.0166016 7.00001 0.0166016C6.58579 0.0166016 6.25 0.352388 6.25 0.766602V5.61424ZM4.05266 2.29989C4.46585 2.2708 4.77724 1.91227 4.74815 1.49908C4.71907 1.08589 4.36054 0.774504 3.94735 0.803587C3.39391 0.84254 2.84811 0.903724 2.32989 1.00112C1.40942 1.17411 0.703621 1.87958 0.48842 2.76569C0.249922 3.74774 0.24995 4.50988 0.250001 5.91968V5.91969L0.250005 5.98354L0.250001 6.0474V6.04741C0.24995 7.45721 0.249922 8.21934 0.48842 9.20139C0.703621 10.0875 1.40942 10.793 2.32989 10.966C3.53647 11.1927 4.92759 11.2273 6.25 11.2326V12.4836H5C4.58579 12.4836 4.25 12.8194 4.25 13.2336C4.25 13.6478 4.58579 13.9836 5 13.9836H9.00001C9.41422 13.9836 9.75001 13.6478 9.75001 13.2336C9.75001 12.8194 9.41422 12.4836 9.00001 12.4836H7.75V11.2326C9.07242 11.2273 10.4635 11.1927 11.6701 10.966C12.5906 10.793 13.2964 10.0875 13.5116 9.20139C13.7501 8.21934 13.7501 7.4572 13.75 6.0474L13.75 5.98354L13.75 5.91968C13.7501 4.50988 13.7501 3.74775 13.5116 2.76569C13.2964 1.87958 12.5906 1.17411 11.6701 1.00112C11.1519 0.903724 10.6061 0.84254 10.0527 0.803587C9.63947 0.774504 9.28094 1.08589 9.25186 1.49908C9.22277 1.91227 9.53415 2.2708 9.94735 2.29989C10.4625 2.33615 10.948 2.39165 11.3931 2.47531C11.71 2.53486 11.972 2.78234 12.054 3.11969C12.2463 3.91187 12.25 4.49852 12.25 5.98354C12.25 7.46857 12.2463 8.05521 12.054 8.8474C11.972 9.18474 11.71 9.43222 11.3931 9.49178C10.1427 9.72677 8.62637 9.73338 7.08249 9.73354C7.0554 9.73058 7.02788 9.72905 7 9.72905C6.97213 9.72905 6.94461 9.73058 6.91752 9.73354C5.37364 9.73338 3.8573 9.72677 2.60695 9.49178C2.29006 9.43222 2.02798 9.18474 1.94605 8.84739C1.75366 8.05521 1.75 7.46857 1.75 5.98354C1.75 4.49852 1.75366 3.91187 1.94605 3.11969C2.02798 2.78234 2.29006 2.53486 2.60695 2.47531C3.05206 2.39165 3.53748 2.33615 4.05266 2.29989Z" clip-rule="evenodd"></path></svg>
diff --git a/resources/svg/focal-point.svg b/resources/svg/focal-point.svg
new file mode 100644
index 00000000000..166901faa41
--- /dev/null
+++ b/resources/svg/focal-point.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M4.18477 1.8025C4.59707 1.76274 4.89908 1.39627 4.85932 0.983974C4.81956 0.571672 4.45309 0.269666 4.04079 0.309424C3.36262 0.374819 2.70105 0.454895 2.06661 0.538208C1.27952 0.641569 0.663627 1.26409 0.565549 2.04986C0.487486 2.67527 0.410743 3.3303 0.347358 4.00244C0.308469 4.41483 0.611247 4.78066 1.02363 4.81955C1.43601 4.85843 1.80184 4.55566 1.84073 4.14327C1.90212 3.49234 1.97683 2.85391 2.054 2.23564C2.06775 2.12549 2.15382 2.03963 2.26191 2.02544C2.88645 1.94343 3.52968 1.86567 4.18477 1.8025ZM6.99995 9.50638C8.38418 9.50638 9.50632 8.38424 9.50632 7.00001C9.50632 5.61578 8.38418 4.49364 6.99995 4.49364C5.61572 4.49364 4.49358 5.61578 4.49358 7.00001C4.49358 8.38424 5.61572 9.50638 6.99995 9.50638ZM12.9239 9.18043C13.3363 9.21932 13.6391 9.58515 13.6002 9.99753C13.5368 10.6697 13.4601 11.3247 13.382 11.9501C13.2839 12.7359 12.668 13.3584 11.8809 13.4618C11.2465 13.5451 10.5849 13.6252 9.90676 13.6906C9.49445 13.7303 9.12799 13.4283 9.08823 13.016C9.04847 12.6037 9.35048 12.2372 9.76278 12.1975C10.4179 12.1343 11.0611 12.0565 11.6856 11.9745C11.7937 11.9603 11.8798 11.8745 11.8936 11.7643C11.9707 11.1461 12.0454 10.5076 12.1068 9.8567C12.1457 9.44432 12.5115 9.14154 12.9239 9.18043ZM9.08823 0.983974C9.12799 0.571672 9.49445 0.269666 9.90676 0.309424C10.5849 0.374819 11.2465 0.454895 11.8809 0.538208C12.668 0.641569 13.2839 1.26409 13.382 2.04986C13.4601 2.67527 13.5368 3.3303 13.6002 4.00244C13.6391 4.41483 13.3363 4.78066 12.9239 4.81955C12.5115 4.85843 12.1457 4.55566 12.1068 4.14327C12.0454 3.49234 11.9707 2.85391 11.8936 2.23564C11.8798 2.12549 11.7937 2.03963 11.6856 2.02544C11.0611 1.94343 10.4179 1.86567 9.76278 1.8025C9.35048 1.76274 9.04847 1.39627 9.08823 0.983974ZM1.84073 9.8567C1.80184 9.44432 1.43601 9.14154 1.02363 9.18043C0.611247 9.21932 0.308469 9.58515 0.347358 9.99753C0.410743 10.6697 0.487486 11.3247 0.565549 11.9501C0.663627 12.7359 1.27952 13.3584 2.06661 13.4618C2.70105 13.5451 3.36262 13.6252 4.04079 13.6906C4.45309 13.7303 4.81956 13.4283 4.85932 13.016C4.89908 12.6037 4.59707 12.2372 4.18477 12.1975C3.52968 12.1343 2.88644 12.0565 2.26191 11.9745C2.15382 11.9603 2.06775 11.8745 2.054 11.7643C1.97683 11.1461 1.90212 10.5076 1.84073 9.8567Z" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/resources/svg/image-picture.svg b/resources/svg/image-picture.svg
new file mode 100644
index 00000000000..52d04029617
--- /dev/null
+++ b/resources/svg/image-picture.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M3.82433 0.583225C4.83702 0.470346 5.90379 0.370117 7.00018 0.370117C8.09657 0.370117 9.16334 0.470346 10.176 0.583225C11.8787 0.773017 13.2459 2.13845 13.4285 3.84533C13.5364 4.85308 13.6302 5.91211 13.6302 7.00018C13.6302 8.08824 13.5364 9.14728 13.4285 10.155C13.2459 11.8619 11.8787 13.2273 10.176 13.4171C9.16334 13.53 8.09657 13.6302 7.00018 13.6302C5.90379 13.6302 4.83702 13.53 3.82433 13.4171C2.12162 13.2273 0.754434 11.8619 0.571818 10.155C0.464 9.14728 0.370117 8.08824 0.370117 7.00018C0.370117 5.91211 0.464 4.85308 0.571818 3.84533C0.754433 2.13845 2.12161 0.773017 3.82433 0.583225ZM10.5476 4.25202C10.5476 5.05084 9.89999 5.69841 9.10117 5.69841C8.30235 5.69841 7.65479 5.05084 7.65479 4.25202C7.65479 3.4532 8.30235 2.80563 9.10117 2.80563C9.89999 2.80563 10.5476 3.4532 10.5476 4.25202ZM4.35212 11.9632C3.19298 11.8165 2.26024 10.7572 2.13616 9.44026C2.07394 8.77978 2.01829 8.10734 1.989 7.42497C1.97839 7.17779 2.1543 6.96055 2.40051 6.9363C2.58826 6.91782 2.77674 6.90883 2.9654 6.90941C4.36972 6.87334 5.73964 7.40507 6.83073 8.4097C7.71409 9.22307 8.36816 10.3036 8.72275 11.5175C8.80594 11.8023 8.60152 12.0835 8.30581 12.1079C7.87457 12.1434 7.43854 12.1658 6.99839 12.1658C6.0971 12.1658 5.2131 12.0722 4.35212 11.9632ZM10.089 11.8595C9.95276 11.9064 9.81512 11.8107 9.78785 11.6693C9.64802 10.944 9.35778 10.0477 8.83071 9.26489C8.73177 9.11794 8.79834 8.91183 8.97124 8.87323C9.37828 8.78236 9.79324 8.73675 10.2102 8.73778C10.7158 8.73745 11.2189 8.80647 11.7086 8.9428C11.8215 8.9742 11.8935 9.08292 11.8829 9.19955C11.8756 9.27998 11.8681 9.36023 11.8606 9.44031C11.7528 10.584 11.0352 11.5334 10.089 11.8595Z" clip-rule="evenodd"></path></svg>
diff --git a/resources/svg/move-file.svg b/resources/svg/move-file.svg
new file mode 100644
index 00000000000..5b3acfe0b71
--- /dev/null
+++ b/resources/svg/move-file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M3.38141 0.619931C4.52572 0.541255 5.63176 0.5 7 0.5C7.45158 0.5 7.87486 0.504493 8.28061 0.51336C8.78418 0.524364 9.27766 0.691426 9.68259 1.00394C10.8786 1.92705 11.6113 2.7069 12.515 3.93803C12.8076 4.33676 12.9664 4.81496 12.9787 5.30429C12.9928 5.86338 13 6.42893 13 7C13 8.41 12.9562 9.78642 12.8728 11.1152C12.7965 12.3305 11.8315 13.2967 10.6186 13.3801C9.47428 13.4587 8.36824 13.5 7 13.5C5.63176 13.5 4.52572 13.4587 3.38141 13.3801C2.16848 13.2967 1.20348 12.3305 1.12721 11.1152C1.04381 9.78642 1 8.41 1 7C1 5.59 1.04381 4.21358 1.1272 2.88484C1.20348 1.66952 2.16848 0.703324 3.38141 0.619931ZM5.54695 8.16487L4.67851 7.29643C4.54186 7.15978 4.33869 7.11411 4.1567 7.17914C3.97472 7.24417 3.8465 7.40826 3.8274 7.60057C3.72035 8.67846 3.72006 9.28678 3.82763 10.3221C3.85208 10.5573 4.03802 10.7432 4.27328 10.7677C5.30854 10.8753 5.91686 10.875 6.99476 10.7679C7.18707 10.7488 7.35115 10.6206 7.41619 10.4386C7.48122 10.2566 7.43555 10.0535 7.2989 9.91682L6.43083 9.04875L8.22387 7.25571C8.46795 7.01163 8.46795 6.61591 8.22387 6.37183C7.9798 6.12775 7.58407 6.12775 7.33999 6.37183L5.54695 8.16487Z" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/resources/svg/rename-file.svg b/resources/svg/rename-file.svg
new file mode 100644
index 00000000000..ae46671d0aa
--- /dev/null
+++ b/resources/svg/rename-file.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M3.5 0.120117C3.08579 0.120117 2.75 0.455904 2.75 0.870117C2.75 1.28433 3.08579 1.62012 3.5 1.62012H5C5.34524 1.62012 5.66813 1.74987 5.89964 1.9682C6.12965 2.18512 6.25 2.46962 6.25 2.7563V7.19336H4.5C4.08579 7.19336 3.75 7.52915 3.75 7.94336C3.75 8.35757 4.08579 8.69336 4.5 8.69336H6.25V11.2441C6.25 11.5308 6.12965 11.8153 5.89964 12.0322C5.66813 12.2506 5.34524 12.3803 5 12.3803H3.5C3.08579 12.3803 2.75 12.7161 2.75 13.1303C2.75 13.5445 3.08579 13.8803 3.5 13.8803H5C5.71563 13.8803 6.41015 13.6126 6.92879 13.1235C6.953 13.1007 6.97674 13.0774 7 13.0538C7.02326 13.0774 7.047 13.1007 7.07121 13.1235C7.58985 13.6126 8.28437 13.8803 9 13.8803H10.5C10.9142 13.8803 11.25 13.5445 11.25 13.1303C11.25 12.7161 10.9142 12.3803 10.5 12.3803H9C8.65476 12.3803 8.33187 12.2506 8.10036 12.0322C7.87035 11.8153 7.75 11.5308 7.75 11.2441V8.69336H9.5C9.91421 8.69336 10.25 8.35757 10.25 7.94336C10.25 7.52915 9.91421 7.19336 9.5 7.19336H7.75V2.7563C7.75 2.46962 7.87035 2.18512 8.10036 1.9682C8.33187 1.74987 8.65476 1.62012 9 1.62012H10.5C10.9142 1.62012 11.25 1.28433 11.25 0.870117C11.25 0.455904 10.9142 0.120117 10.5 0.120117H9C8.28437 0.120117 7.58985 0.387811 7.07121 0.876939C7.047 0.899775 7.02326 0.923011 7 0.946632C6.97674 0.923011 6.953 0.899775 6.92879 0.876939C6.41015 0.387811 5.71563 0.120117 5 0.120117H3.5Z" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/resources/svg/sd-card.svg b/resources/svg/sd-card.svg
new file mode 100644
index 00000000000..1fe4a630833
--- /dev/null
+++ b/resources/svg/sd-card.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M10.2096 0.845445C8.55604 0.68975 7.07975 0.637678 5.12829 0.833308C4.77675 0.86855 4.45281 1.02965 4.21114 1.27942L1.96056 3.60537C1.7267 3.84707 1.57686 4.16398 1.54806 4.50738C1.36486 6.69165 1.5103 8.80487 1.69442 10.9209C1.7989 12.1215 2.75161 13.0896 3.9666 13.1759C6.17846 13.333 7.95315 13.333 10.165 13.1759C11.378 13.0898 12.3398 12.121 12.4152 10.9066C12.5781 8.28492 12.5764 5.73801 12.4116 3.11588L11.9126 3.14724L12.4116 3.11588C12.3364 1.92005 11.4017 0.957692 10.2096 0.845445ZM6.68359 2.8252C7.02877 2.8252 7.30859 3.10502 7.30859 3.4502V5.13733C7.30859 5.48251 7.02877 5.76233 6.68359 5.76233C6.33842 5.76233 6.05859 5.48251 6.05859 5.13733V3.4502C6.05859 3.10502 6.33842 2.8252 6.68359 2.8252ZM9.85986 3.4502C9.85986 3.10502 9.58004 2.8252 9.23486 2.8252C8.88969 2.8252 8.60986 3.10502 8.60986 3.4502V5.13733C8.60986 5.48251 8.88969 5.76233 9.23486 5.76233C9.58004 5.76233 9.85986 5.48251 9.85986 5.13733V3.4502Z" clip-rule="evenodd"></path></svg>
diff --git a/resources/svg/swap.svg b/resources/svg/swap.svg
new file mode 100644
index 00000000000..8ac3358719c
--- /dev/null
+++ b/resources/svg/swap.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M4.95726 1.93304C4.24332 1.93304 3.66456 2.5118 3.66456 3.22574V8.35699H4.67403C4.96391 8.35699 5.22784 8.52405 5.35189 8.78605C5.47594 9.04805 5.43789 9.35808 5.25418 9.58231C4.59105 10.3917 4.16967 10.8136 3.38721 11.4488C3.11176 11.6724 2.71731 11.6724 2.44186 11.4488C1.65939 10.8136 1.23802 10.3917 0.57489 9.58231C0.391174 9.35808 0.353128 9.04805 0.477177 8.78605C0.601225 8.52405 0.865154 8.35699 1.15504 8.35699H2.16456V3.22574C2.16456 1.68338 3.41489 0.433044 4.95726 0.433044C6.49962 0.433044 7.74995 1.68338 7.74995 3.22574L7.74992 10.7579C7.74992 11.4719 8.32868 12.0506 9.04262 12.0506C9.75656 12.0506 10.3353 11.4719 10.3353 10.7579V5.64191H9.32586C9.03598 5.64191 8.77205 5.47485 8.648 5.21285C8.52396 4.95085 8.562 4.64082 8.74572 4.41659C9.40884 3.60721 9.83022 3.18526 10.6127 2.55011C10.8881 2.32651 11.2826 2.32651 11.558 2.55011C12.3405 3.18526 12.7619 3.60721 13.425 4.41659C13.6087 4.64082 13.6468 4.95085 13.5227 5.21285C13.3987 5.47485 13.1347 5.64191 12.8449 5.64191H11.8353V10.7579C11.8353 12.3003 10.585 13.5506 9.04262 13.5506C7.50026 13.5506 6.24992 12.3003 6.24992 10.7579L6.24995 3.22574C6.24995 2.5118 5.67119 1.93304 4.95726 1.93304Z" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/resources/svg/thumbprint.svg b/resources/svg/thumbprint.svg
new file mode 100644
index 00000000000..8e3c059cdbc
--- /dev/null
+++ b/resources/svg/thumbprint.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M9.62502 0.702379C8.41921 0.00621687 6.98624 -0.18244 5.64133 0.177909C4.29642 0.538258 3.14974 1.4181 2.45352 2.62388C2.2464 2.98259 2.36929 3.44129 2.72801 3.64841C3.08672 3.85553 3.54541 3.73264 3.75253 3.37392C4.24983 2.51265 5.06889 1.88419 6.02954 1.6268C6.99019 1.36941 8.01374 1.50417 8.87503 2.00142C9.23375 2.20853 9.69245 2.08562 9.89955 1.7269C10.1067 1.36817 9.98374 0.909482 9.62502 0.702379ZM10.7408 3.13725C11.1148 2.95923 11.5624 3.11811 11.7404 3.49212C12.0733 4.19155 12.25 4.96177 12.25 5.74877V5.74881V8.75077C12.25 9.44021 12.1142 10.1229 11.8504 10.7599C11.5865 11.3968 11.1998 11.9756 10.7123 12.4631C10.2248 12.9506 9.64605 13.3373 9.00909 13.6011C8.37213 13.865 7.68944 14.0008 7 14.0008C6.58579 14.0008 6.25 13.665 6.25 13.2508C6.25 12.8366 6.58579 12.5008 7 12.5008C7.49246 12.5008 7.98009 12.4038 8.43506 12.2153C8.89003 12.0269 9.30343 11.7506 9.65165 11.4024C9.99987 11.0542 10.2761 10.6408 10.4645 10.1858C10.653 9.73086 10.75 9.24323 10.75 8.75077V5.74877V5.74873C10.75 5.18659 10.6238 4.63646 10.386 4.13679C10.208 3.76278 10.3668 3.31527 10.7408 3.13725ZM2.5 5.49805C2.91421 5.49805 3.25 5.83384 3.25 6.24805V8.75105V8.7513C3.24975 9.48952 3.46739 10.2114 3.87565 10.8264C4.07795 11.1312 4.3226 11.4031 4.60075 11.6346C4.91909 11.8996 4.96232 12.3725 4.69731 12.6909C4.43229 13.0092 3.95939 13.0524 3.64105 12.7874C3.25165 12.4633 2.90913 12.0827 2.62591 11.656C2.05439 10.795 1.7497 9.78446 1.75 8.75105V8.75098V8.75079V6.24805C1.75 5.83384 2.08579 5.49805 2.5 5.49805ZM7.07404 4.65051C6.94484 4.61857 6.81011 4.61603 6.6798 4.64308C6.27423 4.72728 5.8772 4.46676 5.793 4.06119C5.7088 3.65563 5.96933 3.25859 6.37489 3.1744C6.72501 3.10171 7.08697 3.10854 7.4341 3.19437C7.78122 3.2802 8.10466 3.44285 8.38056 3.67033C8.65645 3.89781 8.87777 4.18431 9.0282 4.50871C9.17788 4.8315 9.25357 5.18363 9.24976 5.53937V6.58653C9.24976 7.00074 8.91398 7.33653 8.49976 7.33653C8.08555 7.33653 7.74976 7.00074 7.74976 6.58653V5.53501V5.52532L7.74983 5.52532C7.75154 5.39224 7.72337 5.26047 7.66738 5.13972C7.61139 5.01898 7.52901 4.91234 7.42632 4.82767C7.32363 4.743 7.20325 4.68246 7.07404 4.65051ZM5.98434 7.03467C5.98434 6.62046 5.64855 6.28467 5.23434 6.28467C4.82013 6.28467 4.48434 6.62046 4.48434 7.03467V8.83549C4.47795 9.3186 4.61859 9.79231 4.88767 10.1937C5.15797 10.597 5.54498 10.908 5.99691 11.0853C6.44884 11.2625 6.94413 11.2975 7.41649 11.1855C7.88885 11.0736 8.31574 10.82 8.64003 10.4588C8.91674 10.1505 8.89119 9.67636 8.58297 9.39965C8.27474 9.12294 7.80055 9.14849 7.52384 9.45671C7.4037 9.59055 7.24554 9.68449 7.07053 9.72597C6.89553 9.76745 6.71203 9.75449 6.5446 9.68882C6.37716 9.62315 6.23378 9.50791 6.13364 9.35852C6.0335 9.20913 5.98137 9.03271 5.98424 8.85288L5.98434 8.85288V8.84091V7.03467Z" clip-rule="evenodd"></path></svg>
diff --git a/resources/svg/trash-line.svg b/resources/svg/trash-line.svg
new file mode 100644
index 00000000000..998a9df9c02
--- /dev/null
+++ b/resources/svg/trash-line.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" d="M0.75 3.74524H13.25"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M11.4907 3.74518H2.50506C2.36001 6.36772 2.36227 8.97003 2.75318 11.5761C2.8975 12.5382 3.72398 13.25 4.69687 13.25H9.29887C10.2718 13.25 11.0982 12.5382 11.2426 11.5761C11.6335 8.97003 11.6357 6.36772 11.4907 3.74518Z"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4.50195 3.74521V3.24601C4.50195 2.58402 4.76492 1.94916 5.23302 1.48106C5.70111 1.01297 6.33598 0.75 6.99796 0.75C7.65994 0.75 8.29481 1.01297 8.7629 1.48106C9.231 1.94916 9.49397 2.58402 9.49397 3.24601V3.74521"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M5.50024 6.41864V10.5565"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M8.49561 6.41864V10.5565"></path></svg>
diff --git a/resources/svg/upload-cloud.svg b/resources/svg/upload-cloud.svg
new file mode 100644
index 00000000000..dd8d3330f37
--- /dev/null
+++ b/resources/svg/upload-cloud.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M11.0499 9.62418C10.8844 9.68853 10.7113 9.55534 10.69 9.37911C10.6511 9.05758 10.534 8.74457 10.3409 8.46968C9.70711 7.56769 9.23175 7.10315 8.60641 6.56951C8.15091 6.1808 7.59764 5.98169 7.04198 5.97217C7.0281 5.97188 7.01419 5.97174 7.00024 5.97174C6.9864 5.97174 6.97259 5.97188 6.95882 5.97216C6.40298 5.98156 5.8495 6.18067 5.39385 6.56951C4.7685 7.10315 4.29315 7.56769 3.65937 8.46968C3.49311 8.70629 3.38327 8.97114 3.33109 9.24535C3.29867 9.4157 3.1242 9.53546 2.96479 9.46721C2.43351 9.23974 1.96571 8.96432 1.59015 8.64246C0.950964 8.09466 0.559921 7.32036 0.503046 6.4899C0.446172 5.65944 0.728124 4.84085 1.28688 4.21419C1.56354 3.90391 1.89984 3.65008 2.27656 3.46721C2.65328 3.28435 3.06305 3.17602 3.48248 3.14841L3.49195 3.14842C3.50374 3.14908 3.51563 3.14942 3.52759 3.14942C4.01069 3.14942 4.4835 3.30981 4.87608 3.55533C5.27613 3.80552 5.54363 4.11259 5.6551 4.35051C5.80153 4.66309 6.17364 4.79777 6.48621 4.65133C6.79879 4.50489 6.93347 4.13279 6.78703 3.82021C6.54936 3.3129 6.0889 2.8395 5.53888 2.49552C5.27033 2.32757 4.96886 2.1831 4.64416 2.07847C4.4689 2.02199 4.39152 1.80794 4.51822 1.67433C4.74835 1.43166 5.01138 1.21789 5.30187 1.03975C6.05395 0.578538 6.94458 0.384041 7.82524 0.488694C8.70589 0.593346 9.52333 0.990823 10.1412 1.61484C10.7592 2.23886 11.1402 3.05169 11.2208 3.9178C11.2275 3.9634 11.2474 4.00616 11.2782 4.04104C11.3089 4.07591 11.3491 4.10144 11.3942 4.11462C12.0463 4.26524 12.6194 4.64504 13.005 5.18211C13.3906 5.71918 13.562 6.37624 13.4866 7.02886C13.4113 7.68149 13.0945 8.28438 12.5962 8.72337C12.179 9.09087 11.6508 9.39047 11.0499 9.62418ZM7.01464 7.22196C7.00993 7.22188 7.00522 7.22183 7.00049 7.22183C6.99586 7.22183 6.99125 7.22187 6.98665 7.22196C6.71041 7.22514 6.43492 7.32463 6.20549 7.52042C5.64243 8.00091 5.24371 8.38948 4.68236 9.18839C4.52144 9.4174 4.50144 9.71697 4.63048 9.96534C4.75952 10.2137 5.01613 10.3696 5.29602 10.3696H6.25049L6.25049 12.9463C6.25049 13.3605 6.58627 13.6963 7.00049 13.6963C7.4147 13.6963 7.75049 13.3605 7.75049 12.9463L7.75049 10.3696H8.70469C8.98459 10.3696 9.24119 10.2137 9.37023 9.96534C9.49927 9.71697 9.47927 9.4174 9.31835 9.18839C8.757 8.38948 8.35828 8.00091 7.79522 7.52042C7.56595 7.32477 7.29069 7.22528 7.01464 7.22196Z" clip-rule="evenodd"></path></svg>
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 2100361ffe7..052a807a548 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,7 @@ module.exports = {
                 500: '#c4ccd4',
                 600: '#a7b3be',
                 700: '#73808c',
+                750: '#354248',
                 800: '#1c2e36',
                 900: '#19292f',
                 950: '#141a1f',