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 894ed320321..4aecdbbdc3f 100644
--- a/resources/css/components/fieldtypes/bard.css
+++ b/resources/css/components/fieldtypes/bard.css
@@ -2,22 +2,23 @@
     @apply border rounded relative outline-none;
 
     * { outline: none; }
-
-    &:focus-within {
-        @apply focus-outline;
-    }
 }
 
 .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/bard:p-2 text-md leading-normal;
+    @apply @lg/bard:p-4;
+    &:focus {
+        @apply ring-2 ring-inset ring-blue-200;
+    }
 }
 
 .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 +39,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;
@@ -57,7 +52,7 @@
         width: 32px;
         margin: 0;
         svg {
-            @apply w-4 h-4;
+            @apply w-auto h-4;
         }
     }
 
@@ -81,7 +76,7 @@
     }
 
     button sup {
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        @apply font-sans;
     }
 }
 
@@ -89,12 +84,13 @@
     @apply bg-black rounded-full shadow-lg px-4;
 
     button {
-        @apply focus-none text-gray-700 rounded px-1 flex items-center justify-center text-base text-center bg-transparent;
+        @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;
         svg {
-            @apply w-4 h-4;
+            @apply w-auto h-4;
         }
     }
 
diff --git a/resources/css/components/fieldtypes/markdown.css b/resources/css/components/fieldtypes/markdown.css
index f72fabbeb85..86a7429c302 100644
--- a/resources/css/components/fieldtypes/markdown.css
+++ b/resources/css/components/fieldtypes/markdown.css
@@ -5,10 +5,6 @@
 .markdown-fieldtype-wrapper {
     @apply border rounded overflow-hidden relative;
 
-    &:focus-within {
-        @apply focus-outline;
-    }
-
     .markdown-toolbar {
         @apply bg-white shadow-none rounded-t border-b text-sm flex items-center justify-between;
         padding: 4px 8px;
@@ -26,14 +22,10 @@
         }
 
         &.active {
-                @apply bg-gray-300 text-black;
+            @apply bg-gray-300 text-black;
         }
     }
 
-    .markdown-buttons button:focus {
-        @apply focus-outline;
-    }
-
     .markdown-buttons button:disabled {
         @apply opacity-50;
         &:hover {
@@ -61,12 +53,16 @@
         @apply bg-gray-100 shadow-inner h-auto font-mono leading-normal p-3 text-xs;
         border-radius: 0 0 3px 3px;
 
+        &:focus-within {
+            @apply ring-2 ring-inset ring-blue-200;
+        }
+
         .cm-comment {
             @apply font-mono text-sm
         }
     }
 
-    CodeMirror-code { min-height: 100px; }
+    .CodeMirror-code { min-height: 100px; }
 
     .helpers {
         @apply border-t text-xs text-gray-800 flex items-center;
diff --git a/resources/css/components/fieldtypes/table.css b/resources/css/components/fieldtypes/table.css
index 7f317822dcc..00e2e59423d 100644
--- a/resources/css/components/fieldtypes/table.css
+++ b/resources/css/components/fieldtypes/table.css
@@ -74,5 +74,11 @@
 
 .table-fieldtype-table .row-controls {
     @apply w-8 pl-0 text-center;
-    vertical-align: center;
+    vertical-align: middle;
+    &:focus-within {
+        @apply bg-gray-200;
+        button {
+            @apply outline-none ring-0;
+        }
+    }
 }
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..22c9b7f2ca4 100644
--- a/resources/css/components/tabs.css
+++ b/resources/css/components/tabs.css
@@ -37,17 +37,24 @@
         min-height: 94%;
     }
 
+    .tab-button:hover {
+        @apply bg-white;
+    }
+    .tab-button:active {
+        @apply bg-white text-blue;
+    }
+
+    .tab-button:focus {
+        @apply bg-white text-blue border-b-0 ring-1 ring-inset;
+    }
+
     .tab-button.active {
         @apply bg-white text-blue border-t-2 border-blue relative h-full min-h-full border-b-0 outline-none;
         z-index: 1;
     }
 
-    .tab-button:active {
-        @apply bg-white text-blue border-b-0 outline-none;
-    }
-
     .tab-button:focus {
-        @apply bg-white text-blue border-b-0 focus-outline;
+        @apply border-t;
     }
 
     .tab-button.ghost {
@@ -67,9 +74,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..96ec0d5394f 100644
--- a/resources/css/components/toggle.css
+++ b/resources/css/components/toggle.css
@@ -6,6 +6,9 @@
     height: 32px;
     display: flex;
     align-items: center;
+    &:focus-within .toggle-container {
+        @apply ring-2;
+    }
 
     .inline-label {
         @apply ml-2 font-normal text-gray-700;
@@ -24,15 +27,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 +41,7 @@
     position: absolute;
     top: -1px;
     width: 20px;
-    height: 22px;
+    height: 20px;
     border-radius: 20px;
     transition: all 0.2s ease;
 
@@ -67,8 +68,8 @@
 }
 
 .toggle-container.on {
+    @apply bg-green-light border-green;
     .toggle-slider {
-        @apply bg-green-light;
         width: 44px;
     }
 
@@ -105,7 +106,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..c15af3c0324 100644
--- a/resources/css/core/utilities.css
+++ b/resources/css/core/utilities.css
@@ -7,13 +7,13 @@
 }
 
 .focus-outline {
-    @apply border-blue-300;
+    @apply border border-blue-300;
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(0,125,255,.25);
 }
 
 .focus-none {
-    @apply border-0;
+    /* @apply border-0; */
     outline: 0;
     box-shadow: none;
 }
@@ -79,14 +79,10 @@
 }
 
 .clickable {
-    @apply text-gray-800 select-none cursor-pointer border;
-    border: 1px solid #c4cdd6;
-    background: linear-gradient(180deg, #fff, #f9fafb);
-    box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
+    @apply text-gray-800 select-none cursor-pointer border bg-gradient-to-b from-white to-gray-100;
 
     &:hover {
-        background: linear-gradient(180deg, #f9fafb, #f4f6f8);
-        border-color: #c4cdd5;
+        @apply border-gray-500 from-white to-gray-200;
     }
 }
 
diff --git a/resources/css/elements/buttons.css b/resources/css/elements/buttons.css
index 077849398cb..3c13dd90bd1 100644
--- a/resources/css/elements/buttons.css
+++ b/resources/css/elements/buttons.css
@@ -17,7 +17,7 @@ button {
     padding: .475rem 1.25rem;
 
     &:focus {
-        @apply focus-outline;
+        @apply ring-2 outline-none;
     }
 
     &:disabled {
@@ -181,6 +181,9 @@ button {
         padding: .475rem .5rem;
         &.btn-flat { @apply border-r-0; }
     }
+    .btn:focus {
+        @apply ring-inset;
+    }
 }
 
 
diff --git a/resources/css/elements/forms.css b/resources/css/elements/forms.css
index de3db6f9311..f8e82b455d1 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,17 +25,13 @@ 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;
 
     &:not(textarea) {
-        height: 38px;
+        height: 2.375rem;
     }
-
-    &:focus, &:focus-within {
-        @apply focus-outline;
-    }
-
 }
 
 /*  Used inside tables, grids, and so on */
@@ -68,13 +57,14 @@ input.input-text-minimal:read-only,
 
 .input-group {
     @apply appearance-none text-gray-800 w-full p-0 rounded flex items-center;
-    height: 38px;
+    height: 2.375rem;
 
     &:not(.focus-within-only):focus, &:not(.focus-within-only):focus-within {
-        @apply focus-outline;
+        @apply ring-2 ring-blue-300;
 
         .input-text:focus, .input-group-prepend:focus, .input-group-append:focus, .input-group-item:focus {
-            @apply focus-none;
+            outline: 0;
+            box-shadow: none;
         }
     }
 
@@ -95,7 +85,7 @@ input.input-text-minimal:read-only,
         background: linear-gradient(180deg, #fff, #f9fafb);
         border: 1px solid #c4cdd6;
         box-shadow: 0 1px 0 0 rgba(25,30,35,.05);
-        height: 38px;
+        height: 2.375rem;
         line-height: 36px;
 
         &button {
@@ -155,8 +145,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 {
@@ -186,10 +175,6 @@ input.input-text-minimal:read-only,
   .select-input-container {
     @apply rounded relative;
 
-    &:focus, &:focus-within {
-        @apply focus-outline;
-    }
-
     select {
         @apply text-sm text-gray-800 shadow-button cursor-pointer block w-full h-full text-left relative max-w-full;
         @apply select-none rounded leading-normal align-middle whitespace-nowrap appearance-none subpixel-antialiased;
@@ -200,10 +185,6 @@ input.input-text-minimal:read-only,
         letter-spacing: -0.01em;
         padding: .475rem 1.75rem .475rem .75rem;
 
-        &:focus {
-            @apply focus-outline;
-        }
-
         &:hover:not(:disabled), &:active:not(:disabled) {
             background: linear-gradient(180deg, #f9fafb, #f4f6f8);
             border-color: #c4cdd5;
@@ -251,7 +232,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 +273,3 @@ input[type="file"] {
     }
 }
 
-@screen md {
-    .form-group {
-        @apply p-6;
-    }
-}
diff --git a/resources/css/vendors/vue-select.css b/resources/css/vendors/vue-select.css
index 16ef7d3a087..71642bfd506 100644
--- a/resources/css/vendors/vue-select.css
+++ b/resources/css/vendors/vue-select.css
@@ -1,7 +1,5 @@
 .v-select {
-	@apply rounded min-w-0;
-	position: relative;
-	font-family: inherit
+	@apply rounded min-w-0 relative font-sans;
 }
 
 .vs__fade-enter-active,
@@ -46,13 +44,13 @@
 }
 
 .vs__dropdown-toggle {
-	@apply appearance-none text-gray-800 w-full p-0 rounded flex items-center;
+	@apply appearance-none text-gray-800 w-full p-0 rounded flex items-center bg-gray-100 shadow-inner border border-gray-500;
     height: 2.375rem;
     transition: border-color .15s ease-in-out,
                 box-shadow .15s ease-in-out;
 
-    &:focus, &:focus-within {
-        @apply focus-outline;
+    &:focus-within {
+        @apply ring-2;
     }
 
 	.vs--disabled & {
@@ -70,8 +68,8 @@
 
 .v-select:not(.vs--unsearchable) .vs__selected-options {
 	@apply appearance-none text-gray-800 text-sm;
-	@apply flex flex-wrap flex-1 border border-gray-500 border-r-0 rounded-l relative h-full;
-	box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,.05);
+	@apply flex flex-wrap flex-1 rounded-l relative h-full;
+	/* box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,.05); */
 	padding: 5px 8px;
 	line-height: 1.5;
 	width: calc(100% - 34px);
@@ -90,12 +88,13 @@
 
 .vs--single.vs--unsearchable .vs__selected-options {
 	@apply clickable;
-	@apply flex flex-1 rounded-l relative h-full border-r-0;
+	@apply flex flex-1 rounded-l relative h-full border-0;
 	width: calc(100% - 34px);
 }
 
 .vs__actions {
-	@apply flex items-center;
+	@apply flex items-center rounded-r;
+    height: 2.375rem;
 }
 
 .vs--searchable .vs__dropdown-toggle {
@@ -108,16 +107,13 @@
 
 .vs__open-indicator {
 	@apply clickable;
-	@apply flex items-center rounded-r px-2 text-sm shrink-0;
-	height: 2.375rem;
+	@apply flex items-center rounded-r px-2 text-sm shrink-0 h-full border-r-0;
+	/* height: 2.375rem; */
 }
 
 .vs__open-indicator svg {
-	@apply flex items-center text-gray-900;
-	height: 16px;
-	width: 16px;
-	-webkit-transform: scale(1);
-	transform: scale(1);
+	@apply flex items-center text-gray-900 relative w-4 h-4;
+	transform: translateY(1px) scale(1);
 	transition: -webkit-transform .15s cubic-bezier(1, -.115, .975, .855);
 	transition: transform .15s cubic-bezier(1, -.115, .975, .855);
 	transition: transform .15s cubic-bezier(1, -.115, .975, .855), -webkit-transform .15s cubic-bezier(1, -.115, .975, .855);
@@ -126,7 +122,7 @@
 
 .vs--open .vs__open-indicator svg {
 	-webkit-transform: rotate(180deg) scale(1);
-	transform: rotate(180deg) scale(1)
+	transform: rotate(180deg) scale(1) translateY(0px);
 }
 
 .vs--loading .vs__open-indicator {
@@ -134,12 +130,7 @@
 }
 
 .vs__clear {
-	@apply text-gray-900 px-2 cursor-pointer shadow-inner text-base bg-transparent;
-	height: 2.375rem;
-	box-shadow: inset -1px 1px 1px 0px rgba(0,0,0,.05);
-	border-top: 1px solid #c4cdd6;
-	border-bottom: 1px solid #c4cdd6;
-	background-color: transparent;
+	@apply text-gray-900 px-2 cursor-pointer text-base bg-transparent shadow-none;
 	&:hover {
 		@apply text-blue;
 	}
@@ -187,7 +178,7 @@
 	@apply flex items-center cursor-pointer text-gray-600 ml-1 p-0 outline-none;
 
 	&:hover {
-		@apply text-gray-800;
+		@apply text-gray-700;
 	}
 
 	&:focus {
@@ -195,10 +186,7 @@
 	}
 
 	span {
-		flex-shrink: 0;
-		font-size: 17px;
-		font-weight: 700;
-		padding-top: 1px;
+        @apply text-md shrink-0 font-thin;
 	}
 }
 
@@ -231,7 +219,7 @@
 
 .vs__search,
 .vs__search:focus {
-	@apply appearance-none text-sm text-gray-800 px-2 border-transparent outline-none m-0 p-0 bg-transparent max-w-full;
+	@apply appearance-none text-sm text-gray-800 pr-2 border-transparent outline-none m-0 p-0 bg-transparent max-w-full;
 	line-height: 1.4;
 	border-left: none;
 	box-shadow: none;
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/DateFieldtype.vue b/resources/js/components/fieldtypes/DateFieldtype.vue
index e529d344081..5f3351e01de 100644
--- a/resources/js/components/fieldtypes/DateFieldtype.vue
+++ b/resources/js/components/fieldtypes/DateFieldtype.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="datetime @container">
+    <div class="datetime">
 
         <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>
diff --git a/resources/js/components/fieldtypes/TableFieldtype.vue b/resources/js/components/fieldtypes/TableFieldtype.vue
index 54d38c5c9cb..b7c2a58e4a7 100644
--- a/resources/js/components/fieldtypes/TableFieldtype.vue
+++ b/resources/js/components/fieldtypes/TableFieldtype.vue
@@ -8,7 +8,7 @@
                     <th v-for="(column, index) in columnCount" :key="index">
                         <div class="flex items-center justify-between h-6">
                             <span class="column-count">{{ index + 1 }}</span>
-                            <a v-show="canDeleteColumns" class="opacity-25 text-lg antialiased hover:opacity-75" @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')">
+                            <a v-show="canDeleteColumns" class="text-gray-600 hover:text-gray-800 text-lg antialiased focus:text-blue" @click="confirmDeleteColumn(index)" :aria-label="__('Delete Column')">
                                 &times;
                             </a>
                         </div>
@@ -32,7 +32,7 @@
                             <input type="text" v-model="row.value.cells[cellIndex]" class="input-text" :readonly="isReadOnly" @focus="$emit('focus')" @blur="$emit('blur')" />
                         </td>
                         <td class="row-controls" v-if="canDeleteRows">
-                            <button @click="confirmDeleteRow(rowIndex)" class="inline opacity-25 text-lg antialiased hover:opacity-75" :aria-label="__('Delete Row')">&times;</button>
+                            <button @click="confirmDeleteRow(rowIndex)" class="inline text-gray-600 hover:text-gray-800 text-lg antialiased" :aria-label="__('Delete Row')">&times;</button>
                         </td>
                     </tr>
                 </tbody>
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 5be0149bee4..9c74a678d97 100644
--- a/resources/js/components/fieldtypes/bard/BardFieldtype.vue
+++ b/resources/js/components/fieldtypes/bard/BardFieldtype.vue
@@ -31,7 +31,7 @@
             </div>
         </div>
 
-        <div class="bard-editor" :class="{ 'mode:read-only': readOnly, 'mode:minimal': ! showFixedToolbar, 'mode:inline': inputIsInline }" tabindex="0">
+        <div class="bard-editor @container/bard" :class="{ 'mode:read-only': readOnly, 'mode:minimal': ! showFixedToolbar, 'mode:inline': inputIsInline }" tabindex="0">
             <bubble-menu class="bard-floating-toolbar" :editor="editor" :tippy-options="{ maxWidth: 'none', zIndex: 1000 }" v-if="editor && toolbarIsFloating && !readOnly">
                 <component
                     v-for="button in visibleButtons(buttons)"
diff --git a/resources/js/components/fieldtypes/bard/Image.vue b/resources/js/components/fieldtypes/bard/Image.vue
index a5733f0d146..478bbf0a79a 100644
--- a/resources/js/components/fieldtypes/bard/Image.vue
+++ b/resources/js/components/fieldtypes/bard/Image.vue
@@ -8,8 +8,8 @@
                     <img :src="src" class="block mx-auto" data-drag-handle />
                 </div>
 
-                <div class="flex items-center p-2 pt-0 rounded-b" @paste.stop>
-                    <text-input name="alt" v-model="alt" prepend="Alt Text" class="mr-2" />
+                <div class="flex items-center p-2 border-t rounded-b" @paste.stop>
+                    <text-input name="alt" v-model="alt" :prepend="__('Alt Text')" class="mr-2 flex-1" />
                     <button class="btn-flat mr-2" @click="openSelector">
                         {{ __('Replace') }}
                     </button>
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/h1.svg b/resources/svg/h1.svg
index 49e3f7604ca..709e021de73 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.53 13.88"><path fill="currentColor" d="M8.32 0c.37 0 .68.37.68.79v12.18c0 .45-.31.81-.68.81s-.7-.37-.7-.81V7.51H1.38v5.46c0 .45-.31.81-.68.81s-.7-.37-.7-.81V.79C0 .36.31 0 .7 0s.68.37.68.79v5.17h6.24V.79c0-.43.31-.79.7-.79zm4.13 6.46l-.91.66c-.09.07-.23.11-.35.11-.16 0-.32-.06-.42-.17a.412.412 0 01-.11-.27c0-.16.09-.31.23-.41l1.71-1.22c.11-.07.27-.12.4-.12.3 0 .52.21.52.47v7.9c0 .26-.23.47-.54.47s-.54-.21-.54-.47V6.47z"/></svg>
+<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-.74zM12.48 4.81l-.93.72a.55.55 0 01-.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>
diff --git a/resources/svg/h2.svg b/resources/svg/h2.svg
index 3146e35832a..c45b73801ec 100644
--- a/resources/svg/h2.svg
+++ b/resources/svg/h2.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.25 13.79"><path fill="currentColor" d="M8.32 0c.37 0 .68.37.68.79v12.18c0 .45-.31.81-.68.81s-.7-.37-.7-.81V7.51H1.38v5.46c0 .45-.31.81-.68.81s-.7-.37-.7-.81V.79C0 .36.31 0 .7 0s.68.37.68.79v5.17h6.24V.79c0-.43.31-.79.7-.79zm6.5 12.59c.24 0 .44.21.44.46 0 .26-.2.47-.44.47h-4.07c-.32 0-.49-.2-.49-.46s.18-.44.31-.57c1.33-1.41 3.38-3.62 3.38-5.37 0-.77-.44-1.41-1.31-1.41-.53 0-.99.22-1.27.9-.1.24-.24.32-.46.32-.3 0-.46-.24-.46-.5 0-.06.01-.11.02-.17.33-1.04 1.25-1.54 2.25-1.54 1.5 0 2.2 1.12 2.2 2.2 0 2.44-2.73 5.06-3.37 5.67h3.27z"/></svg>
+<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-.74zM15.54 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>
diff --git a/resources/svg/h3.svg b/resources/svg/h3.svg
index c936de2f15f..8a2c684b161 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.07 13.79"><path fill="currentColor" d="M8.32 0c.37 0 .68.37.68.79v12.18c0 .45-.31.81-.68.81s-.7-.37-.7-.81V7.51H1.38v5.46c0 .45-.31.81-.68.81s-.7-.37-.7-.81V.79C0 .36.31 0 .7 0s.68.37.68.79v5.17h6.24V.79c0-.43.31-.79.7-.79zm4.21 4.82c1.35 0 2.23.83 2.23 2.2 0 .95-.44 1.72-1.26 2.1 1.01.2 1.57 1.11 1.57 2.13 0 1.55-1.1 2.52-2.55 2.52-.97 0-1.83-.33-2.33-1.09a.727.727 0 01-.13-.39c0-.15.06-.29.19-.37.08-.05.16-.09.24-.09.16 0 .31.1.43.26.43.54.94.68 1.56.68 1.01 0 1.6-.68 1.6-1.57 0-.93-.68-1.52-1.66-1.52h-.2c-.3 0-.5-.21-.5-.5s.2-.5.5-.5h.14c.72 0 1.4-.61 1.4-1.5s-.5-1.38-1.32-1.38c-.62 0-.99.2-1.3.61-.12.15-.27.22-.42.22-.08 0-.16-.02-.24-.07-.1-.07-.17-.2-.17-.35 0-.11.04-.22.1-.34.46-.7 1.19-1.07 2.09-1.07z"/></svg>
+<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-.74zM13.03 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 01-.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 01-.18-.38c0-.12.04-.25.11-.37.47-.76 1.21-1.17 2.12-1.17z"/></svg>
diff --git a/resources/svg/h4.svg b/resources/svg/h4.svg
index b18370778fd..aa73e340644 100644
--- a/resources/svg/h4.svg
+++ b/resources/svg/h4.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.06 13.79"><path fill="currentColor" d="M8.32 0c.37 0 .68.37.68.79v12.18c0 .45-.31.81-.68.81s-.7-.37-.7-.81V7.51H1.38v5.46c0 .45-.31.81-.68.81s-.7-.37-.7-.81V.79C0 .36.31 0 .7 0s.68.37.68.79v5.17h6.24V.79c0-.43.31-.79.7-.79zm5.72 11.61v1.68c0 .29-.2.5-.42.5s-.42-.21-.42-.5v-1.68h-2.95c-.24 0-.45-.22-.45-.51 0-.11.03-.24.09-.35l2.81-5.38c.09-.19.21-.31.41-.31.23 0 .39.21.39.46 0 .09-.02.2-.07.3l-2.52 4.8h2.29V8.69c0-.29.2-.5.42-.5s.42.21.42.5v1.93h.58c.24 0 .44.24.44.5s-.2.5-.44.5h-.58z"/></svg>
+<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-.74zM15.29 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>
diff --git a/resources/svg/h5.svg b/resources/svg/h5.svg
index 6dcec179a7b..f9d08f8aa68 100644
--- a/resources/svg/h5.svg
+++ b/resources/svg/h5.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.09 13.79"><path fill="currentColor" d="M8.32 0c.37 0 .68.37.68.79v12.18c0 .45-.31.81-.68.81s-.7-.37-.7-.81V7.51H1.38v5.46c0 .45-.31.81-.68.81s-.7-.37-.7-.81V.79C0 .36.31 0 .7 0s.68.37.68.79v5.17h6.24V.79c0-.43.31-.79.7-.79zm2.62 12.11c.42.5.96.67 1.5.67.94 0 1.65-.77 1.65-1.84S13.32 9.1 12.1 9.1c-.2 0-.39.02-.57.05-.03 0-.07.01-.11.01-.32 0-.52-.24-.52-.56v-.1l.36-3.08c.04-.27.26-.47.5-.47h2.81c.25 0 .44.21.44.5s-.2.5-.44.5h-2.44l-.31 2.35c.18-.05.42-.09.66-.09 1.49 0 2.59 1.04 2.59 2.7 0 1.8-1.22 2.87-2.67 2.87-.77 0-1.57-.22-2.24-1.12a.53.53 0 01-.09-.3c0-.15.06-.3.19-.39.09-.06.17-.1.27-.1.14 0 .27.09.4.24z"/></svg>
+<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-.74zM11.9 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>
diff --git a/resources/svg/h6.svg b/resources/svg/h6.svg
index 27e75b3df7b..25e89a44e67 100644
--- a/resources/svg/h6.svg
+++ b/resources/svg/h6.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.08 13.79"><path fill="currentColor" d="M8.32 0c.37 0 .68.37.68.79v12.18c0 .45-.31.81-.68.81s-.7-.37-.7-.81V7.51H1.38v5.46c0 .45-.31.81-.68.81s-.7-.37-.7-.81V.79C0 .36.31 0 .7 0s.68.37.68.79v5.17h6.24V.79c0-.43.31-.79.7-.79zm2.79 9.45c.3-.66.89-1.16 1.8-1.16 1.25 0 2.18 1.09 2.18 2.67 0 1.72-1.17 2.81-2.35 2.81-1.7 0-2.65-1.48-2.65-3.21 0-2.96 1.76-5.05 3.3-5.63.08-.02.16-.05.24-.05.16 0 .29.09.36.27.02.06.03.11.03.17 0 .21-.14.37-.33.45-1.16.52-2.28 1.73-2.58 3.67zm-.1 1.12c0 1.18.57 2.21 1.71 2.21.84 0 1.44-.81 1.44-1.74 0-1.01-.52-1.82-1.55-1.82-.89 0-1.43.73-1.6 1.34z"/></svg>
+<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-.74zM12.29 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>
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',