diff --git a/app/views/admin/shared/_stimulus_pagination.html.haml b/app/views/admin/shared/_stimulus_pagination.html.haml
index e7e97fc643..e7b4b9960a 100644
--- a/app/views/admin/shared/_stimulus_pagination.html.haml
+++ b/app/views/admin/shared/_stimulus_pagination.html.haml
@@ -2,21 +2,29 @@
 
 .pagination{ "data-controller": "search" }
   - if pagy.prev
-    %button{ data: { action: 'click->search#changePage', page: pagy.prev } }!= pagy_t('pagy.nav.prev')
+    %button.page.prev{ data: { action: 'click->search#changePage', page: pagy.prev } }
+      - if feature?(:admin_style_v3, spree_current_user)
+        %i.icon-chevron-left{ data: { action: 'click->search#changePage', page: pagy.prev } }
+      - else
+        != pagy_t('pagy.nav.prev')
   - else
-    %button.disabled{disabled: "disabled"}!= pagy_t('pagy.nav.prev')
+    %button.page.disabled{disabled: "disabled"}!= pagy_t('pagy.nav.prev')
 
   - pagy.series.each do |item|                      # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
     - if item.is_a?(Integer)                        # page link
-      %button{ data: { action: 'click->search#changePage', page: item } }= item
+      %button.page{ data: { action: 'click->search#changePage', page: item } }= item
 
     - elsif item.is_a?(String)                      # current page
-      %button.active= item
+      %button.page.current.active= item
 
     - elsif item == :gap                            # page gap
-      %span.pagination-ellipsis!= pagy_t('pagy.nav.gap')
+      %span.page.gap.pagination-ellipsis!= pagy_t('pagy.nav.gap')
 
   - if pagy.next
-    %button{ data: { action: 'click->search#changePage', page: pagy.next } }!= pagy_t('pagy.nav.next')
+    %button.page.next{ data: { action: 'click->search#changePage', page: pagy.next } }
+      - if feature?(:admin_style_v3, spree_current_user)
+        %i.icon-chevron-right{ data: { action: 'click->search#changePage', page: pagy.next } }
+      - else
+        != pagy_t('pagy.nav.next')
   - else
-    %button.disabled.pagination-next{disabled: "disabled"}!= pagy_t('pagy.nav.next')
+    %button.page.disabled.pagination-next{disabled: "disabled"}!= pagy_t('pagy.nav.next')
diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss
index 35e4270d8f..075fe06797 100644
--- a/app/webpacker/css/admin/all.scss
+++ b/app/webpacker/css/admin/all.scss
@@ -72,6 +72,7 @@
 @import "components/todo";
 @import "components/tooltip";
 @import "components/wizard_progress";
+@import "components/text-angular";
 
 @import "pages/enterprise_form";
 @import "pages/subscription_form";
diff --git a/app/webpacker/css/admin/components/buttons.scss b/app/webpacker/css/admin/components/buttons.scss
index c5804a76f0..1291d04e15 100644
--- a/app/webpacker/css/admin/components/buttons.scss
+++ b/app/webpacker/css/admin/components/buttons.scss
@@ -76,3 +76,18 @@ button:not(.plain):not(.trix-button),
     }
   }
 }
+
+input.red,
+a.button.red,
+button.red {
+  background-color: $color-warning;
+  margin-right: 5px;
+  color: #ffffff;
+}
+
+a.button.red {
+  &:not(:hover) {
+    color: #fff;
+    background-color: $color-warning;
+  }
+}
diff --git a/app/webpacker/css/admin/components/text-angular.scss b/app/webpacker/css/admin/components/text-angular.scss
new file mode 100644
index 0000000000..d6eab98151
--- /dev/null
+++ b/app/webpacker/css/admin/components/text-angular.scss
@@ -0,0 +1,43 @@
+// textAngular wysiwyg
+text-angular {
+  .ta-editor {
+    border: 1px solid $pale-blue;
+    border-radius: 3px;
+  }
+
+  .ta-toolbar {
+    border: 1px solid #cdd9e4;
+    padding: 0.4em;
+    margin-bottom: -1px;
+    background-color: #f1f1f1;
+    border-radius: 0.25em 0.25em 0 0;
+  }
+  .ta-scroll-window > .ta-bind {
+    max-height: 400px;
+    min-height: 100px;
+    outline: none;
+    p {
+      margin-bottom: 1.5rem;
+    }
+  }
+  .ta-scroll-window.form-control {
+    min-height: 100px;
+    box-shadow: none !important;
+  }
+  .btn-group {
+    display: inline;
+    margin-right: 8px;
+    button {
+      padding: 5px 10px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
+      // Hope this (text-angular) will be removed soon in order to use trix editor
+      margin-right: 0.25em;
+    }
+    button.active:not(:hover) {
+      box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.3) inset;
+      background-color: #4583bf;
+    }
+  }
+  a {
+    color: $spree-green;
+  }
+}
diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss
index b4de0d2f52..a579c8415a 100644
--- a/app/webpacker/css/admin/openfoodnetwork.scss
+++ b/app/webpacker/css/admin/openfoodnetwork.scss
@@ -19,11 +19,6 @@ table .blank-action {
   width: 29px;
 }
 
-text-angular .ta-editor {
-  border: 1px solid $pale-blue;
-  border-radius: 3px;
-}
-
 #header #logo {
   top: 10px;
 }
@@ -43,21 +38,6 @@ div.error:not(.flash) {
   margin-bottom: 0;
 }
 
-input.red,
-a.button.red,
-button.red {
-  background-color: $color-warning;
-  margin-right: 5px;
-  color: #ffffff;
-}
-
-a.button.red {
-  &:not(:hover) {
-    color: #fff;
-    background-color: $color-warning;
-  }
-}
-
 input.orange {
   background-color: #ff9848;
   margin-right: 5px;
@@ -229,45 +209,6 @@ table#listing_enterprise_groups {
   border-color: $color-error;
 }
 
-// textAngular wysiwyg
-text-angular {
-  .ta-toolbar {
-    border: 1px solid #cdd9e4;
-    padding: 0.4em;
-    margin-bottom: -1px;
-    background-color: #f1f1f1;
-    border-radius: 0.25em 0.25em 0 0;
-  }
-  .ta-scroll-window > .ta-bind {
-    max-height: 400px;
-    min-height: 100px;
-    outline: none;
-    p {
-      margin-bottom: 1.5rem;
-    }
-  }
-  .ta-scroll-window.form-control {
-    min-height: 100px;
-    box-shadow: none !important;
-  }
-  .btn-group {
-    display: inline;
-    margin-right: 8px;
-    button {
-      padding: 5px 10px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
-      // Hope this (text-angular) will be removed soon in order to use trix editor
-      margin-right: 0.25em;
-    }
-    button.active:not(:hover) {
-      box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.3) inset;
-      background-color: #4583bf;
-    }
-  }
-  a {
-    color: $spree-green;
-  }
-}
-
 span.required {
   color: $color-5;
   font-size: 110%;
diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index ab285437bf..d9358e7a1b 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -37,23 +37,22 @@
 
 @import "../shared/trix";
 
-@import "../admin/plugins/flatpickr-customization";
-@import "../admin/plugins/powertip";
+@import "plugins/flatpickr-customization"; // admin_v3
+@import "plugins/powertip"; // admin_v3
 @import "../admin/plugins/jstree";
-@import "../admin/plugins/select2";
 
-@import "../admin/sections/orders";
+@import "sections/orders"; // admin_v3
 @import "../admin/sections/products";
 
 @import "../admin/hacks/mozilla";
 @import "../admin/hacks/opera";
 @import "../admin/hacks/ie";
 
-@import "../admin/components/actions";
+@import "components/actions"; // admin_v3
 @import "../admin/components/alert-box";
 @import "../admin/components/alert_row";
 @import "components/buttons"; // admin_v3
-@import "../admin/components/date-picker";
+@import "components/date-picker"; // admin_v3
 @import "../admin/components/dialogs";
 @import "../admin/components/input";
 @import "../admin/components/jquery_dialog";
@@ -66,7 +65,7 @@
 @import "../admin/components/product_autocomplete";
 @import "../admin/components/progress";
 @import "../admin/components/save_bar";
-@import "../admin/components/sidebar";
+@import "components/sidebar"; // admin_v3
 @import "../admin/components/simple_modal";
 @import "../admin/components/states";
 @import "../admin/components/stripe_connect_button";
@@ -77,6 +76,7 @@
 @import "../admin/components/todo";
 @import "../admin/components/tooltip";
 @import "../admin/components/wizard_progress";
+@import "components/text-angular"; // admin_v3
 
 @import "../admin/pages/enterprise_form";
 @import "../admin/pages/subscription_form";
@@ -86,14 +86,14 @@
 @import "../admin/advanced_settings";
 @import "../admin/alert";
 @import "../admin/animations";
-@import "../admin/change_type_form";
+@import "pages/change_type_form"; // admin_v3
 @import "../admin/customers";
-@import "../admin/dashboard_item";
-@import "../admin/dashboard-single-ent";
+@import "dashboard/dashboard_item"; // admin_v3
+@import "pages/dashboard-single-ent"; // admin_v3
 @import "../admin/dialog";
 @import "../admin/disabled";
-@import "../admin/dropdown";
-@import "../admin/enterprise_index_panels";
+@import "components/dropdown"; // admin_v3
+@import "pages/enterprise_index_panels"; // admin_v3
 @import "../admin/enterprises";
 @import "../admin/filters_and_controls";
 @import "../admin/grid";
@@ -105,14 +105,14 @@
 @import "../admin/openfoodnetwork";
 @import "../admin/order_cycles";
 @import "../admin/orders";
-@import "../admin/product_import";
+@import "pages/product_import"; // admin_v3
 @import "../admin/products";
 @import "../admin/products_v3";
 @import "../admin/question-mark-tooltip";
 @import "../admin/relationships";
 @import "../admin/reports";
-@import "../admin/select2";
-@import "../admin/sidebar-item";
+@import "components/select2"; // admin_v3
+@import "components/sidebar-item"; // admin_v3
 @import "../admin/side_menu";
 @import "../admin/tables";
 @import "../admin/tag_rules";
@@ -129,3 +129,4 @@
 
 @import "app/components/help_modal_component/help_modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
+@import "app/webpacker/css/admin/trix.scss";
diff --git a/app/webpacker/css/admin_v3/components/actions.scss b/app/webpacker/css/admin_v3/components/actions.scss
new file mode 100644
index 0000000000..c766a284ac
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/actions.scss
@@ -0,0 +1,31 @@
+table tbody tr {
+  &.highlight {
+    @each $action in $actions {
+      &.action-#{$action} td {
+        background-color: get-value($actions, $actions-bg-colors, $action);
+        border-color: get-value($actions, $actions-brd-colors, $action);
+      }
+    }
+
+    &.action-remove td,
+    &.action-void td {
+      text-decoration: line-through;
+
+      &.actions {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &.before-highlight {
+    @each $action in $actions {
+      &.action-#{$action} td {
+        border-bottom-color: get-value($actions, $actions-brd-colors, $action);
+      }
+    }
+  }
+
+  td.actions {
+    background-color: transparent !important;
+  }
+}
diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 9b77e318d2..d6e5b4af7f 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -48,8 +48,8 @@ button:not(.plain):not(.trix-button),
 
     &:hover {
       background-color: $color-11;
-      border: 1px solid $color-10;
-      color: $color-10;
+      border: 1px solid $color-btn-hover-bg;
+      color: $color-btn-hover-bg;
     }
 
     &:active,
@@ -89,6 +89,24 @@ button:not(.plain):not(.trix-button),
     height: $btn-relaxed-height;
   }
 
+  &.big {
+    @extend .relaxed; // use relaxed height
+    width: 100%;
+    font-size: 1rem;
+    @include border-radius(25px);
+    text-transform: uppercase;
+  }
+
+  &.red {
+    background-color: $color-btn-red-bg;
+    border-color: $color-btn-red-bg;
+
+    &:hover {
+      background-color: $color-btn-red-hover-bg;
+      border-color: $color-btn-red-hover-bg;
+    }
+  }
+
   .badge {
     position: absolute;
     top: 0;
diff --git a/app/webpacker/css/admin_v3/components/date-picker.scss b/app/webpacker/css/admin_v3/components/date-picker.scss
new file mode 100644
index 0000000000..e2fc0ef504
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/date-picker.scss
@@ -0,0 +1,20 @@
+// scss-lint:disable QualifyingElement
+
+input.datetimepicker {
+  min-width: 12.9em;
+}
+
+.container input[readonly].flatpickr-input,
+.container input[readonly].datepicker,
+.container input[readonly].datetimepicker {
+  background-color: $lighter-grey;
+  cursor: pointer;
+}
+
+img.ui-datepicker-trigger {
+  margin-left: -1.75em;
+  position: absolute;
+  margin-top: 0.5em;
+}
+
+// scss-lint:enable QualifyingElement
diff --git a/app/webpacker/css/admin_v3/components/dropdown.scss b/app/webpacker/css/admin_v3/components/dropdown.scss
new file mode 100644
index 0000000000..6a93884aeb
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/dropdown.scss
@@ -0,0 +1,252 @@
+#content-header .ofn-drop-down {
+  border: none;
+  background-color: $spree-blue;
+  color: #fff;
+  float: none;
+  margin-left: 3px;
+}
+
+.ofn-drop-down {
+  .dropdown-content {
+    display: none;
+  }
+
+  .toggle-off {
+    display: none;
+  }
+
+  &:active:not(.disabled),
+  &:focus:not(.disabled) {
+    .dropdown-content {
+      display: inline-block;
+    }
+  }
+}
+
+.ofn-drop-down:hover,
+.ofn-drop-down.expanded {
+  border: 1px solid #adadad;
+  color: #575757;
+}
+
+@mixin ofn-drop-down-style {
+  padding: 7px 15px;
+  border-radius: 3px;
+  border: 1px solid #d4d4d4;
+  background-color: #f5f5f5;
+  display: block;
+  color: #828282;
+  cursor: pointer;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: center;
+  margin-right: 10px;
+
+  &.disabled {
+    opacity: 0.5;
+
+    &:hover {
+      cursor: default;
+      border-color: #d4d4d4;
+      color: #828282;
+    }
+  }
+}
+
+.ofn-drop-down-with-prepend {
+  display: flex;
+
+  &.right {
+    float: right;
+  }
+
+  .ofn-drop-down {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .ofn-drop-down-prepend {
+    @include ofn-drop-down-style;
+
+    border-right: none;
+    margin-left: 0;
+    margin-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    cursor: default;
+  }
+}
+
+.ofn-drop-down {
+  @include ofn-drop-down-style;
+
+  position: relative;
+  float: left;
+
+  &.right {
+    float: right;
+    margin-right: 0px;
+    margin-left: 10px;
+  }
+
+  &:hover,
+  &.expanded {
+    border: 1px solid #adadad;
+    color: #575757;
+  }
+
+  > span {
+    width: auto;
+    text-transform: uppercase;
+    font-size: 85%;
+    font-weight: 600;
+  }
+
+  .menu {
+    margin-top: 1px;
+    position: absolute;
+    float: none;
+    top: 100%;
+    left: 0px;
+    padding: 5px 0px;
+    border: 1px solid #adadad;
+    background-color: #ffffff;
+    box-shadow: 1px 3px 10px #888888;
+    z-index: 100;
+    white-space: nowrap;
+
+    .filter {
+      padding-left: 5px;
+      padding-right: 5px;
+      position: relative;
+
+      > input[type="text"] {
+        border: 1px solid rgba(18, 18, 18, 0.1);
+        width: 100%;
+        padding-left: 30px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-size: 13px;
+        color: #454545;
+      }
+
+      &:after {
+        content: "\f002";
+        font-family: FontAwesome;
+        position: absolute;
+        left: 15px;
+        top: 13px;
+        color: #454545;
+      }
+    }
+
+    .menu_item {
+      margin: 0px;
+      padding: 2px 10px;
+      color: #454545;
+      text-align: left;
+      display: block;
+
+      .check {
+        display: inline-block;
+        text-align: center;
+        width: 40px;
+        &:before {
+          content: "\00a0";
+        }
+      }
+
+      .name {
+        display: inline-block;
+        padding: 0px 15px 0px 0px;
+      }
+
+      &.selected {
+        .check:before {
+          content: "\2713";
+        }
+      }
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .menu_item:hover {
+      background-color: #ededed;
+    }
+  }
+}
+
+.ofn-drop-down-v2 {
+  border: 1px solid $lighter-grey;
+  background-color: $lighter-grey;
+  padding: 0px;
+
+  &:hover {
+    border-color: $lighter-grey;
+  }
+
+  .ofn-drop-down-label {
+    color: $near-black;
+    padding: 10px;
+    width: 235px;
+    display: flex;
+    justify-content: space-between;
+
+    &:hover {
+      color: $near-black;
+    }
+
+    .label {
+      padding-right: 10px;
+    }
+
+    .icon-caret-down,
+    .icon-caret-up {
+      padding-right: 0px;
+      &:before {
+        display: none;
+      }
+      &:after {
+        @include arrowDown;
+      }
+    }
+
+    .icon-caret-up:after {
+      transform: rotate(180deg);
+    }
+  }
+
+  .menu {
+    width: 100%;
+  }
+
+  .menu_items {
+    max-height: 200px;
+    overflow-y: scroll;
+
+    .menu_item {
+      margin-bottom: 5px;
+      color: #454545;
+      font-weight: 400;
+      cursor: pointer;
+      padding-top: 4px;
+      padding-bottom: 5px;
+      text-transform: uppercase;
+      font-size: 85%;
+    }
+  }
+}
+
+.ofn-drop-down.ofn-drop-down-v2 {
+  // Add very specific styling here for components that are in transition:
+  // ie. the ones using the two classes above
+  .ofn-drop-down-label {
+    padding-top: 7px;
+    padding-bottom: 7px;
+  }
+}
diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss
index 6b5a2518ae..e5d448f2d4 100644
--- a/app/webpacker/css/admin_v3/components/navigation.scss
+++ b/app/webpacker/css/admin_v3/components/navigation.scss
@@ -23,13 +23,13 @@ nav.menu {
       }
 
       &.active a {
-        color: $green;
+        color: $red;
         border-left-width: 0;
-        border-bottom-color: $green;
+        border-bottom-color: $red;
       }
 
       &:hover a {
-        color: $green;
+        color: $red;
       }
     }
   }
@@ -53,7 +53,7 @@ nav.menu {
 
       &:hover {
         i {
-          color: $green;
+          color: $red;
         }
       }
     }
diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 538cd8e6c1..82642f54a6 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -9,15 +9,20 @@
   justify-content: center;
   gap: 8px;
 
+  button.page,
   .page {
-    width: 40px;
-    line-height: 40px;
+    width: $btn-relaxed-height;
+    line-height: $btn-relaxed-height;
+    height: $btn-relaxed-height;
+    padding: 0;
+    margin: 0;
     text-align: center;
     display: inline-block;
     text-align: center;
     background-color: $color-1;
     @include defaultBoxShadow;
     border-radius: 4px;
+    border: none;
     color: $color-8;
     font-weight: 600;
 
@@ -31,6 +36,10 @@
       color: $white;
     }
 
+    &.disabled {
+      display: none;
+    }
+
     &.prev {
       margin-right: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
       & > i {
@@ -45,9 +54,11 @@
       }
     }
 
+    &:hover:not(.gap):not(.disabled),
     &[href]:hover {
       background-color: $color-5;
       color: $white;
+      border: none;
     }
 
     &.gap {
@@ -55,6 +66,10 @@
       box-shadow: none;
       width: auto;
     }
+
+    &:active {
+      border: none;
+    }
   }
 
   button {
diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
new file mode 100644
index 0000000000..5751802972
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -0,0 +1,260 @@
+.select2-container {
+  &:hover .select2-choice,
+  &.select2-container-active .select2-choice {
+    background-color: $color-sel-hover-bg !important;
+    border-color: $color-sel-hover-bg !important;
+  }
+  .select2-choice {
+    background-image: none !important;
+    background-color: $color-sel-bg;
+    border: none !important;
+    box-shadow: none !important;
+    @include border-radius($border-radius);
+    color: $color-1 !important;
+    font-size: 90%;
+    height: 31px;
+    line-height: inherit !important;
+    padding: 5px 15px 7px;
+
+    span {
+      display: block;
+      padding: 2px;
+    }
+
+    .select2-search-choice-close {
+      background-image: none !important;
+      font-size: 100% !important;
+      @extend .icon-remove;
+      @extend [class^="icon-"], :before;
+      margin-top: 2px;
+    }
+  }
+
+  &.select2-container-active {
+    .select2-choice {
+      box-shadow: none !important;
+    }
+
+    &.select2-dropdown-open .select2-choice div b {
+      @extend .icon-caret-up;
+    }
+  }
+}
+
+.select2-drop {
+  border-color: $color-sel-hover-bg;
+  box-shadow: none !important;
+  z-index: 1000000;
+
+  &.select2-drop-above {
+    border-color: $color-sel-hover-bg;
+  }
+}
+
+.select2-search {
+  @extend .icon-search;
+
+  font-size: 100%;
+  color: darken($color-border, 15);
+  padding: 0 9px 0 0;
+
+  &:before {
+    @extend [class^="icon-"], :before;
+
+    position: absolute;
+    top: 13px;
+    left: 13px;
+  }
+
+  input {
+    @extend input, [type="text"];
+
+    padding: 6px 0 6px 25px;
+    margin: 5px 0 0 5px;
+    font-family: $base-font-family;
+    font-size: 90%;
+    box-shadow: none;
+    background-image: none;
+  }
+}
+
+.select2-container .select2-choice .select2-arrow {
+  background-image: none;
+  background: transparent;
+  border: 0;
+
+  b {
+    padding-top: 7px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: none;
+    font-family: FontAwesome;
+    font-weight: 200 !important;
+
+    &:before {
+      content: "\f0d7";
+    }
+  }
+}
+
+.select2-results {
+  padding-left: 0 !important;
+
+  li {
+    font-size: 85% !important;
+
+    &.select2-highlighted {
+      .select2-result-label {
+        &,
+        h6 {
+          color: $color-1 !important;
+        }
+      }
+    }
+
+    .select2-result-label {
+      color: $color-body-text;
+      min-height: 22px;
+      clear: both;
+      overflow: auto;
+    }
+
+    &.select2-no-results,
+    &.select2-searching {
+      padding: 5px;
+      background-color: transparent;
+      color: $color-body-text;
+      text-align: center;
+      font-weight: $font-weight-bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .select2-highlighted {
+    background-color: $color-sel-bg;
+  }
+}
+
+.select2-container-multi {
+  &.select2-container-active,
+  &.select2-dropdown-open {
+    .select2-choices {
+      border-color: $color-btn-hover-bg !important;
+      box-shadow: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .select2-choices {
+    @extend input, [type="text"];
+    padding: 6px 3px 3px 3px;
+    box-shadow: none;
+    background-image: none !important;
+
+    .select2-search-choice {
+      @include border-radius($border-radius);
+      margin: 0 0 3px 3px;
+      background-image: none;
+      background-color: $color-btn-bg;
+      border: none;
+      box-shadow: none;
+      color: $color-1 !important;
+      font-size: 85%;
+
+      &:hover {
+        background-color: $color-btn-hover-bg;
+      }
+
+      .select2-search-choice-close {
+        background-image: none !important;
+        font-size: 85% !important;
+        @extend .icon-remove;
+        @extend [class^="icon-"], :before;
+        margin-left: 2px;
+        color: $color-1;
+      }
+    }
+  }
+}
+
+label .select2-container {
+  margin-top: -6px;
+  .select2-choice {
+    span {
+      text-transform: none;
+      font-weight: normal;
+    }
+  }
+}
+
+.select2-container {
+  .select2-choice,
+  .select2-choices {
+    height: $btn-relaxed-height !important; // !important is needed because of vendor/assets/stylesheets/select2.css.scss
+    padding: 10px;
+  }
+}
+
+.select2-container .select2-choices {
+  input {
+    position: relative;
+    top: -10px;
+  }
+}
+
+.select2-container {
+  .select2-choice {
+    padding: 10px 15px;
+    color: $near-black !important;
+
+    .select2-search-choice-close {
+      display: none !important;
+    }
+    .select2-arrow {
+      width: 27px; // adjust to align with tom-select
+      border: none;
+      background-image: none;
+      background-color: transparent;
+
+      b {
+        padding-top: 11px; // adjust to align with tom-select
+        &:before {
+          @include arrowDown;
+        }
+      }
+    }
+  }
+
+  &.select2-container-multi {
+    .select2-search-field {
+      max-height: 20px;
+      input {
+        padding: 0 !important;
+        margin: 0 0 0 5px !important;
+      }
+    }
+    .select2-search-choice {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-left: 7px;
+
+      .select2-search-choice-close {
+        position: relative;
+        order: -1;
+        width: auto;
+        left: 0;
+        top: 0;
+        margin: 0;
+        padding: 0;
+        font-size: 100% !important;
+      }
+    }
+  }
+}
+
+.select2-results li.select2-highlighted .select2-result-label,
+.select2-results li.select2-highlighted .select2-result-label h6 {
+  color: $near-black !important;
+}
diff --git a/app/webpacker/css/admin_v3/components/sidebar-item.scss b/app/webpacker/css/admin_v3/components/sidebar-item.scss
new file mode 100644
index 0000000000..773fca5ee9
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/sidebar-item.scss
@@ -0,0 +1,123 @@
+div.sidebar_item {
+  margin-bottom: 30px;
+
+  .centered {
+    text-align: center;
+  }
+
+  div.header {
+    font-size: 105%;
+    color: #fff;
+    padding: 10px 0px;
+    position: relative;
+
+    &.blue {
+      background-color: $spree-blue;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+  }
+
+  .list {
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &.red {
+      color: $color-warning;
+
+      .list-item {
+        border: solid $color-warning;
+        border-width: 0px 3px 0px 3px;
+
+        a.alpha,
+        span.alpha {
+          margin-left: -3px;
+        }
+
+        &.odd {
+          background-color: #fcf6ef;
+
+          &:hover {
+            background-color: $color-btn-bg;
+          }
+        }
+      }
+
+      a {
+        color: $color-warning;
+      }
+    }
+  }
+
+  .list-item {
+    .icon-arrow-right {
+      padding-top: 6px;
+      font-size: 20px;
+    }
+
+    border: solid $spree-blue;
+    border-width: 0px 1px 0px 1px;
+
+    a.alpha,
+    span.alpha {
+      font-weight: bold;
+      margin-left: -1px;
+      padding: 10px 2px 10px 5%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    span.omega {
+      padding: 8px 18px 8px 0px;
+      margin-right: -3px;
+      text-align: right;
+    }
+
+    .icon-remove-sign {
+      color: $color-warning;
+      font-size: 18px;
+    }
+
+    &.even {
+      background-color: #fff;
+    }
+
+    &.odd {
+      background-color: $spree-light-blue;
+    }
+
+    &.even,
+    &.odd {
+      &:hover {
+        color: #ffffff;
+        background-color: $color-btn-bg;
+
+        a {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  a.button {
+    color: #fff;
+    font-weight: bold;
+    text-align: center;
+    border-radius: 0px;
+
+    &.blue {
+      background-color: $spree-blue;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+
+    &:hover {
+      background-color: $color-btn-hover-bg;
+    }
+  }
+}
diff --git a/app/webpacker/css/admin_v3/components/sidebar.scss b/app/webpacker/css/admin_v3/components/sidebar.scss
new file mode 100644
index 0000000000..eeb8ad80c1
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/sidebar.scss
@@ -0,0 +1,26 @@
+// Sidebar
+//---------------------------------------------------
+#sidebar {
+  overflow: visible;
+  border-top: 1px solid $color-border;
+  margin-top: 17px;
+
+  .sidebar-title {
+    color: $red;
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+
+    > span {
+      display: inline;
+      background: #fff;
+      padding: 5px 10px;
+      position: relative;
+      top: -14px;
+
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+}
diff --git a/app/webpacker/css/admin_v3/components/text-angular.scss b/app/webpacker/css/admin_v3/components/text-angular.scss
new file mode 100644
index 0000000000..ca4f162d32
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/text-angular.scss
@@ -0,0 +1,43 @@
+// textAngular wysiwyg
+text-angular {
+  .ta-editor {
+    border: 1px solid $pale-blue;
+    border-radius: 3px;
+  }
+
+  .ta-toolbar {
+    border: 1px solid #cdd9e4;
+    padding: 0.4em;
+    margin-bottom: -1px;
+    background-color: #f1f1f1;
+    border-radius: 0.25em 0.25em 0 0;
+  }
+  .ta-scroll-window > .ta-bind {
+    max-height: 400px;
+    min-height: 100px;
+    outline: none;
+    p {
+      margin-bottom: 1.5rem;
+    }
+  }
+  .ta-scroll-window.form-control {
+    min-height: 100px;
+    box-shadow: none !important;
+  }
+  .btn-group {
+    display: inline;
+    margin-right: 8px;
+    button {
+      padding: 0 8px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
+      // Hope this (text-angular) will be removed soon in order to use trix editor
+      margin-right: 0.25em;
+    }
+    button.active:not(:hover) {
+      box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.3) inset;
+      background-color: #4583bf;
+    }
+  }
+  a {
+    color: $spree-green;
+  }
+}
diff --git a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
new file mode 100644
index 0000000000..3316704ef1
--- /dev/null
+++ b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
@@ -0,0 +1,240 @@
+div.dashboard_item {
+  margin-bottom: 30px;
+
+  .centered {
+    text-align: center;
+  }
+
+  .text-icon {
+    margin-top: 8px;
+    display: block;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    padding: 0px 6px;
+    border-radius: 10px;
+
+    &.green {
+      background-color: $spree-green;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+
+    &.orange {
+      background-color: $color-warning;
+    }
+  }
+
+  div.header {
+    height: 50px;
+    border-radius: 6px 6px 0px 0px;
+    border: 1px solid $spree-blue;
+    position: relative;
+
+    a[ofn-with-tip] {
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+    }
+
+    &.red {
+      border-color: $color-warning;
+      border-width: 3px;
+
+      h3 {
+        color: $color-warning;
+      }
+    }
+
+    &.orange {
+      border-color: $color-warning;
+      border-width: 3px;
+
+      h3 {
+        color: $color-warning;
+      }
+    }
+
+    h3.alpha {
+      height: 100%;
+      padding: 10px 5px 0px 3%;
+    }
+
+    a {
+      border-radius: 0px 4px 0px 0px;
+      height: 100%;
+      line-height: 100%;
+      padding: 15px 2px 0px 2px;
+    }
+  }
+
+  .tabs {
+    height: 30px;
+    border: solid $spree-blue;
+    border-width: 0px 0px 1px 0px;
+    margin-top: 3px;
+
+    div.dashboard_tab {
+      cursor: pointer;
+      height: 30px;
+      color: #fff;
+      background-color: $spree-blue;
+      padding: 5px 5px 0px 5px;
+      text-align: center;
+      font-weight: bold;
+      border: solid $spree-blue;
+      border-width: 1px 1px 0px 1px;
+
+      &:hover {
+        background-color: $spree-green;
+      }
+
+      &.selected {
+        color: $spree-blue;
+        background-color: #fff;
+      }
+    }
+  }
+
+  .list {
+    max-height: 250px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .list-title {
+    border: solid $spree-blue;
+    border-width: 0px 1px 0px 1px;
+
+    span {
+      font-size: 105%;
+      padding: 10px 0px;
+      font-weight: bold;
+    }
+
+    span.alpha {
+      padding: 10px 2px 10px 5%;
+    }
+  }
+
+  .list-item {
+    border: solid $spree-blue;
+    border-width: 0px 1px 0px 1px;
+    height: 38px;
+
+    span.alpha {
+      font-weight: bold;
+      margin-left: -3px;
+      padding: 10px 2px 0px 5%;
+    }
+
+    span.omega {
+      padding-right: 13px;
+      margin-right: -3px;
+      text-align: right;
+    }
+
+    .icon-arrow-right {
+      padding-top: 6px;
+      font-size: 20px;
+    }
+
+    .icon-warning-sign {
+      color: $color-warning;
+      font-size: 30px;
+    }
+
+    .icon-remove-sign {
+      color: $color-warning;
+      font-size: 30px;
+    }
+
+    .icon-ok-sign {
+      color: $spree-green;
+      font-size: 30px;
+    }
+
+    &.orange {
+      color: $color-warning;
+      border: solid $color-warning;
+    }
+
+    &.red {
+      color: $color-warning;
+      border: solid $color-warning;
+    }
+
+    &.orange,
+    &.red {
+      border-width: 0px 3px 0px 3px;
+    }
+
+    &.even {
+      background-color: #fff;
+    }
+
+    &.odd {
+      background-color: $spree-light-blue;
+    }
+
+    &.even,
+    &.odd {
+      &:hover {
+        color: #ffffff;
+        background-color: $spree-green;
+
+        .icon-arrow-right {
+          color: #fff;
+        }
+
+        .icon-remove-sign {
+          color: #fff;
+        }
+
+        .icon-warning-sign {
+          color: #fff;
+        }
+
+        .icon-ok-sign {
+          color: #fff;
+        }
+
+        .text-icon {
+          &.green {
+            color: $spree-green;
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  a.button {
+    color: #fff;
+    font-size: 110%;
+    font-weight: bold;
+    text-align: center;
+
+    &.orange {
+      background-color: $color-warning;
+    }
+
+    &.blue {
+      background-color: $spree-blue;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+
+    &:hover {
+      background-color: $color-btn-hover-bg;
+    }
+
+    &.bottom {
+      border-radius: 0px 0px 6px 6px;
+    }
+  }
+}
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index 7706a4073d..d584e67db9 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -45,10 +45,12 @@ $color-btn-hover-bg:             $orient !default;
 $color-btn-hover-text:           $white !default;
 $color-btn-hover-border:         $dark-blue !default;
 $color-btn-disabled-bg:          $light-grey !default;
+$color-btn-red-bg:               $red !default;
+$color-btn-red-hover-bg:         $roof-terracotta !default;
 
 // Actions colors
-$color-action-edit-bg:           very-light($color-success, 5  ) !default;
-$color-action-edit-brd:          very-light($color-success, 20 ) !default;
+$color-action-edit-bg:           very-light($teal) !default;
+$color-action-edit-brd:          #81B4BC !default;
 $color-action-clone-bg:          very-light($color-notice,  5  ) !default;
 $color-action-clone-brd:         very-light($color-notice,  15 ) !default;
 $color-action-remove-bg:         very-light($color-error,   5  ) !default;
@@ -65,10 +67,8 @@ $color-action-mail-bg:           very-light($color-success, 5  ) !default;
 $color-action-mail-brd:          very-light($color-success, 20 ) !default;
 
 // Select2 select field colors
-$color-sel-bg:                   $teal !default;
-$color-sel-text:                 $white !default;
-$color-sel-hover-bg:             lighten($color-sel-bg, 2) !default;
-$color-sel-hover-text:           $white !default;
+$color-sel-bg:                   $lighter-grey !default;
+$color-sel-hover-bg:             $lighter-grey !default;
 
 // Text inputs styles
 $color-txt-brd:                  $color-border !default;
diff --git a/app/webpacker/css/admin_v3/mixins.scss b/app/webpacker/css/admin_v3/mixins.scss
index 76f01458be..5301558d32 100644
--- a/app/webpacker/css/admin_v3/mixins.scss
+++ b/app/webpacker/css/admin_v3/mixins.scss
@@ -1,3 +1,17 @@
 @mixin defaultBoxShadow {
   box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07);
 }
+
+@mixin arrowDown {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #808080 transparent transparent transparent;
+}
diff --git a/app/webpacker/css/admin_v3/pages/change_type_form.scss b/app/webpacker/css/admin_v3/pages/change_type_form.scss
new file mode 100644
index 0000000000..0bd7c92560
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/change_type_form.scss
@@ -0,0 +1,112 @@
+#change_type {
+  section {
+    margin: 2em 0 0 0;
+
+    &,
+    & * {
+      color: $spree-blue;
+    }
+  }
+
+  .description {
+    background-color: $spree-light-blue;
+    margin-top: -2em;
+    padding: 4em 2em 2em 1em;
+
+    @media all and (max-width: 786px) {
+      margin-bottom: 2em;
+    }
+  }
+
+  .admin-cta {
+    border: 1px solid $spree-blue;
+
+    @include border-radius(3px);
+
+    text-align: center;
+    padding: 1em;
+  }
+
+  .error {
+    display: block;
+    color: #f57e80;
+    border: 1px solid #f57e80;
+    background-color: #fde6e7;
+
+    @include border-radius(3px);
+
+    margin-bottom: 1em;
+    padding: 0.5em;
+  }
+
+  a.selector {
+    position: relative;
+    border: 2px solid black;
+    text-align: center;
+    width: 100%;
+    cursor: pointer;
+    line-height: normal;
+    height: auto;
+
+    &,
+    & * {
+      color: white;
+    }
+
+    &:after,
+    &:before {
+      top: 100%;
+      left: 50%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &:after {
+      border-color: rgba(136, 183, 213, 0);
+      border-top-color: $spree-blue;
+      border-width: 12px;
+      margin-left: -12px;
+    }
+
+    &:hover {
+      &:after {
+        border-top-color: $spree-green;
+      }
+    }
+
+    &:before {
+      border-color: rgba(84, 152, 218, 0);
+      border-top-color: black;
+      border-width: 15px;
+      margin-left: -15px;
+    }
+
+    .bottom {
+      background: repeating-linear-gradient(
+        60deg,
+        rgba(84, 152, 218, 0),
+        rgba(84, 152, 218, 0) 5px,
+        rgba(255, 255, 255, 0.25) 5px,
+        rgba(255, 255, 255, 0.25) 10px
+      );
+      margin-top: 1em;
+      margin-left: -15px;
+      margin-right: -15px;
+      padding: 5px;
+      text-transform: uppercase;
+    }
+
+    &.selected {
+      background-color: black;
+
+      &:after,
+      &:hover &:after {
+        border-top-color: black;
+      }
+    }
+  }
+}
diff --git a/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss b/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss
new file mode 100644
index 0000000000..ba7bf4a637
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss
@@ -0,0 +1,12 @@
+.dashboard_item.single-ent {
+  .header {
+    padding: 0.77778em 1.33333em 0.77778em 0.77778em;
+    height: auto !important;
+  }
+
+  .list {
+    .button.bottom {
+      width: 100%;
+    }
+  }
+}
diff --git a/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss b/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss
new file mode 100644
index 0000000000..e9dc24eb02
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss
@@ -0,0 +1,120 @@
+.enterprise_package_panel,
+.enterprise_producer_panel {
+  .info {
+    p {
+      font-size: 1rem;
+      margin: 10px 0px;
+    }
+  }
+
+  a.selector {
+    display: block;
+    position: relative;
+    margin-bottom: 20px;
+    border: 2px solid black;
+    text-align: center;
+    // width: 100%;
+    cursor: pointer;
+    &,
+    & * {
+      color: white;
+    }
+    &:hover {
+      &:after {
+        border-top-color: $spree-green;
+      }
+    }
+    &.disabled {
+      background-color: #c1c1c1;
+    }
+    .bottom {
+      background: repeating-linear-gradient(
+        60deg,
+        rgba(84, 152, 218, 0),
+        rgba(84, 152, 218, 0) 5px,
+        rgba(255, 255, 255, 0.25) 5px,
+        rgba(255, 255, 255, 0.25) 10px
+      );
+      margin-top: 1em;
+      margin-left: -15px;
+      margin-right: -15px;
+      padding: 5px;
+      text-transform: uppercase;
+    }
+    &.selected {
+      background-color: #000000;
+
+      &:after {
+        top: 50%;
+        left: 0;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+
+        border-top: 20px solid transparent;
+        border-bottom: 20px solid transparent;
+        border-right: 20px solid #000000;
+        margin-top: -20px;
+        margin-left: -20px;
+      }
+    }
+  }
+}
+
+.enterprise_status_panel {
+  .status-ok {
+    margin: 30px 0px;
+    i.icon-ok-sign {
+      color: $spree-green;
+      font-size: 1.5rem;
+    }
+  }
+
+  td.description {
+    font-size: 0.9rem;
+  }
+
+  td.severity {
+    text-align: center;
+
+    i {
+      font-size: 1.5rem;
+
+      &.issue {
+        color: $color-warning;
+      }
+
+      &.warning {
+        color: #ff9848;
+      }
+    }
+  }
+}
+
+tags-input .tags li.tag-item {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  margin: 2px 0 2px 3px;
+  background-image: none;
+  background-color: $teal;
+  border: none;
+  box-shadow: none;
+  color: white !important;
+  font-size: 85%;
+  height: 25px;
+}
+
+tags-input .tags .tag-item .remove-button {
+  color: white;
+}
+
+table th.actions .no-text[class*="icon-"],
+table td.actions .no-text[class*="icon-"] {
+  cursor: pointer;
+}
diff --git a/app/webpacker/css/admin_v3/pages/product_import.scss b/app/webpacker/css/admin_v3/pages/product_import.scss
new file mode 100644
index 0000000000..89bbd7a7c8
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/product_import.scss
@@ -0,0 +1,299 @@
+$pi-red: $color-warning;
+$pi-green: lighten($spree-green, 10%);
+$pi-orange: $bright-orange;
+$pi-blue: lighten($orient, 10%);
+$pi-light-yellow: #faffaf;
+
+// scss-lint:disable NestingDepth
+
+div.panel-section {
+  .error {
+    color: $pi-red;
+  }
+  .warning {
+    color: $bright-orange;
+  }
+  .success {
+    color: $pi-green;
+  }
+  .info {
+    color: #68b7c0;
+  }
+
+  div.panel-header {
+    width: 100%;
+    clear: both;
+    float: left;
+    padding: 0.5em;
+
+    div {
+      font-size: 1.25em;
+      float: left;
+    }
+
+    div.header-caret {
+      width: 2em;
+      text-align: center;
+      min-height: 0.1em; //Empty div fix
+    }
+
+    div.header-icon {
+      width: 2.5em;
+      text-align: center;
+      padding-top: 0.18em;
+
+      i {
+        font-size: 1.5em;
+        line-height: 0.9em;
+      }
+    }
+
+    div.header-count {
+      min-width: 2em;
+      text-align: right;
+      padding-right: 0.5em;
+    }
+
+    div.header-description {
+      width: auto;
+    }
+  }
+
+  div.panel-header:hover {
+    cursor: pointer;
+    background-color: #f7f7f7;
+  }
+
+  div.panel-header.active {
+    background-color: #efefef;
+    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.75);
+  }
+
+  div.panel-content {
+    width: 100%;
+    clear: both;
+    margin-bottom: 0.5em;
+    background-color: #f9f9f9;
+    padding: 1.5em;
+
+    div.table-wrap {
+      width: 100%;
+      overflow: auto;
+      border-right: 1px solid #ceede3;
+      max-height: 23em;
+    }
+
+    table {
+      background-color: white;
+      margin-bottom: 0;
+      td,
+      th {
+        white-space: nowrap;
+      }
+
+      tr {
+        &.error {
+          color: #c84c4c;
+        }
+
+        &:hover td.invalid {
+          background-color: darken(#f05c51, 5%);
+        }
+
+        i {
+          display: block;
+          margin-bottom: -0.2em;
+          font-size: 1.4em !important;
+        }
+      }
+
+      td {
+        &.invalid {
+          background-color: #f05c51;
+          box-shadow: inset 0px 0px 1px red;
+          color: white;
+        }
+      }
+    }
+
+    div.import-errors {
+      margin-bottom: 0.85em;
+
+      p.line {
+        font-size: 1.15em;
+        margin-bottom: 0.2em;
+        color: #577084;
+      }
+      p.error {
+        color: #cb1b1b;
+        margin-bottom: 0.2em;
+      }
+    }
+  }
+}
+
+br.panels.clearfix {
+  clear: both;
+}
+
+.panel-section.import-settings {
+  .header-description {
+    padding-left: 1em;
+  }
+
+  span.header-error {
+    font-size: 0.85em;
+    color: $pi-red;
+  }
+
+  .select2-search {
+    display: none;
+  }
+
+  .select2-results {
+    margin: 0;
+  }
+}
+
+.post-save-results {
+  p {
+    font-size: 1.25em;
+    margin-bottom: 0.5em;
+
+    strong {
+      margin-right: 0.2em;
+      min-width: 1.8em;
+      display: inline-block;
+      text-align: right;
+    }
+
+    i {
+      font-size: 1.4em;
+      vertical-align: middle;
+      position: relative;
+    }
+
+    i.fa-check-circle {
+      color: $pi-green;
+    }
+    i.fa-info-circle {
+      color: $pi-blue;
+    }
+  }
+
+  p.save-error {
+    color: #ee4728;
+    font-size: 1.05em;
+    margin-top: 0.4em;
+  }
+}
+
+form.product-import,
+div.post-save-results,
+div.import-wrapper {
+  input[type="submit"] {
+    margin-right: 0.5em;
+  }
+  input[type="submit"],
+  button,
+  a.button {
+    min-width: 8em;
+    text-align: center;
+  }
+}
+
+div.import-wrapper {
+  .alert-box {
+    margin: 0 0 1.75em;
+  }
+
+  .ng-hide:not(.ng-hide-animate) {
+    // We have to use !important here to override angular's display properties
+    // scss-lint:disable ImportantRule
+    display: block !important;
+    position: absolute;
+    opacity: 0;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .ng-hide-add,
+  .ng-hide-remove,
+  .ng-hide-animate {
+    transition: all 0.4s ease-in-out;
+  }
+
+  form.product-import,
+  div.save-results {
+    transition: all 0.4s ease-in-out;
+  }
+
+  div.progress-interface {
+    text-align: center;
+    transition: all 0.4s ease-in-out;
+
+    button:disabled {
+      background: #ccc !important;
+    }
+  }
+
+  .post-save-results {
+    a.button {
+      float: left;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+div.progress-bar {
+  height: 25px;
+  width: 30em;
+  max-width: 90%;
+  margin: 1em auto;
+  background: #f7f7f7;
+  padding: 3px;
+  border-radius: 0.3em;
+  border: 1px solid #eee;
+
+  span.progress-track {
+    display: block;
+    background: lighten($pi-green, 10%);
+    height: 100%;
+    border-radius: 0.3em;
+    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+    transition: width 0.3s ease-in-out;
+  }
+}
+
+#upload-sidebar {
+  float: right;
+  background-color: lighten($spree-light-blue, 2.5%);
+  border: 1px solid lighten($pale-blue, 2.5%);
+  width: 50%;
+  padding: 0 1.5em 1.5em;
+
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 1.25em 0 1em;
+  }
+
+  a.download {
+    display: block;
+    font-size: 1.05em;
+    margin-bottom: 0.5em;
+
+    i {
+      margin-right: 0.25em;
+    }
+  }
+
+  span.category {
+    display: inline-block;
+    background-color: $pi-blue;
+    color: white;
+    padding: 0.3em 0.6em;
+    margin: 0 0.4em 0.5em 0;
+  }
+}
diff --git a/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
new file mode 100644
index 0000000000..92fa3f5f77
--- /dev/null
+++ b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
@@ -0,0 +1,89 @@
+$background-grey: $lighter-grey;
+$background-blue: $color-3;
+
+// scss-lint:disable SelectorFormat
+
+.flatpickr-calendar {
+  border-radius: 0;
+
+  // Disable animation
+  &.animate.open {
+    animation: none;
+  }
+
+  &.arrowBottom::after {
+    border-top-color: $background-grey;
+  }
+
+  &.arrowTop::after {
+    border-bottom-color: $background-blue;
+  }
+
+  .flatpickr-months .flatpickr-month {
+    border-radius: 0;
+  }
+
+  .flatpickr-months .flatpickr-month,
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+    background: $background-blue;
+  }
+
+  .flatpickr-weekdays {
+    background: $background-blue;
+
+    .flatpickr-weekday {
+      background: $background-blue;
+      color: white;
+    }
+  }
+
+  .flatpickr-day.selected,
+  .flatpickr-day.startRange,
+  .flatpickr-day.endRange,
+  .flatpickr-day.selected.inRange,
+  .flatpickr-day.startRange.inRange,
+  .flatpickr-day.endRange.inRange,
+  .flatpickr-day.selected:focus,
+  .flatpickr-day.startRange:focus,
+  .flatpickr-day.endRange:focus,
+  .flatpickr-day.selected:hover,
+  .flatpickr-day.startRange:hover,
+  .flatpickr-day.endRange:hover,
+  .flatpickr-day.selected.prevMonthDay,
+  .flatpickr-day.startRange.prevMonthDay,
+  .flatpickr-day.endRange.prevMonthDay,
+  .flatpickr-day.selected.nextMonthDay,
+  .flatpickr-day.startRange.nextMonthDay,
+  .flatpickr-day.endRange.nextMonthDay {
+    background: $background-blue;
+    border-color: $background-blue;
+  }
+}
+
+// scss-lint:enable SelectorFormat
+
+// customization for shortcut-buttons
+.shortcut-buttons-flatpickr-wrapper > .shortcut-buttons-flatpickr-buttons {
+  justify-content: space-between;
+  flex-grow: 1;
+}
+
+// material-ui colors customization ("~flatpickr/dist/themes/material_blue")
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+  box-shadow: -10px 0 0 #e2e2e2;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months #admin-menu ul li.selected a.flatpickr-prev-month svg,
+#admin-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
+.flatpickr-months #sub-menu ul li.selected a.flatpickr-prev-month svg,
+#sub-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month:hover svg,
+.flatpickr-months #admin-menu ul li.selected a.flatpickr-next-month svg,
+#admin-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg,
+.flatpickr-months #sub-menu ul li.selected a.flatpickr-next-month svg,
+#sub-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg {
+  fill: white;
+}
diff --git a/app/webpacker/css/admin_v3/plugins/powertip.scss b/app/webpacker/css/admin_v3/plugins/powertip.scss
new file mode 100644
index 0000000000..9aeda09656
--- /dev/null
+++ b/app/webpacker/css/admin_v3/plugins/powertip.scss
@@ -0,0 +1,118 @@
+#powerTip {
+  background-color: $color-3;
+  padding: 5px 15px;
+  @include border-radius($border-radius);
+
+  &.n:before,
+  &.ne:before,
+  &.nw:before {
+    border-top-width: 5px;
+    border-top-color: $color-3;
+    bottom: -5px;
+  }
+
+  &.e:before {
+    border-right-width: 5px;
+    border-right-color: $color-3;
+    left: -5px;
+  }
+  &.s:before,
+  &.se:before,
+  &.sw:before {
+    border-bottom-width: 5px;
+    border-bottom-color: $color-3;
+    top: -5px;
+  }
+  &.w:before {
+    border-left-width: 5px;
+    border-left-color: $color-3;
+    right: -5px;
+  }
+  &.ne:before,
+  &.se:before {
+    border-right-width: 5px;
+    border-right-color: $color-3;
+    left: -5px;
+  }
+  &.nw:before,
+  &.sw:before {
+    border-left-width: 5px;
+    border-right-color: $color-3;
+    right: -5px;
+  }
+
+  &.clone,
+  &.yellow,
+  &.cancel {
+    background-color: $color-notice;
+
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
+      border-top-color: $color-notice;
+    }
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
+      border-right-color: $color-notice;
+    }
+    &.s:before,
+    &.se:before,
+    &.sw:before {
+      border-bottom-color: $color-notice;
+    }
+    &.w:before {
+      border-left-color: $color-notice;
+    }
+  }
+  &.edit,
+  &.green,
+  &.capture,
+  &.save,
+  &.add {
+    background-color: $teal;
+
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
+      border-top-color: $teal;
+    }
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
+      border-right-color: $teal;
+    }
+    &.s:before,
+    &.se:before,
+    &.sw:before {
+      border-bottom-color: $teal;
+    }
+    &.w:before {
+      border-left-color: $teal;
+    }
+  }
+  &.remove,
+  &.red,
+  &.void {
+    background-color: $color-error;
+
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
+      border-top-color: $color-error;
+    }
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
+      border-right-color: $color-error;
+    }
+    &.s:before,
+    &.se:before,
+    &.sw:before {
+      border-bottom-color: $color-error;
+    }
+    &.w:before {
+      border-left-color: $color-error;
+    }
+  }
+}
diff --git a/app/webpacker/css/admin_v3/sections/orders.scss b/app/webpacker/css/admin_v3/sections/orders.scss
new file mode 100644
index 0000000000..da9b274c43
--- /dev/null
+++ b/app/webpacker/css/admin_v3/sections/orders.scss
@@ -0,0 +1,65 @@
+// Customize orders filter
+.admin-orders-index-search {
+  select[data-placeholder="Status"] {
+    width: 100%;
+  }
+
+  .select2-container {
+    width: 100% !important;
+  }
+}
+
+// Order-total
+.order-details-total {
+  text-align: center;
+
+  .order-total {
+    font-size: 35px;
+    font-weight: 600;
+    color: $teal;
+  }
+}
+
+.admin-order-form-fields {
+  legend.stock-location {
+    color: $color-body-text;
+
+    .shipment-number {
+      color: $teal;
+    }
+    .stock-location-name {
+      color: $teal;
+    }
+  }
+}
+
+.insufficient-stock-items {
+  legend {
+    color: $color-error;
+  }
+
+  table tr:last-child th {
+    border-bottom: 1px solid $color-tbl-border;
+  }
+}
+
+// Customize orduct add fieldset
+#add-line-item {
+  fieldset {
+    padding: 10px 0;
+
+    .field {
+      margin-bottom: 0;
+
+      input[type="text"],
+      input[type="number"] {
+        width: 100%;
+      }
+    }
+    .actions {
+      .button {
+        margin-top: 28px;
+      }
+    }
+  }
+}
diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss
index b9abfd6068..87cbe94a82 100644
--- a/app/webpacker/css/admin_v3/shared/forms.scss
+++ b/app/webpacker/css/admin_v3/shared/forms.scss
@@ -1,5 +1,13 @@
 $text-inputs: "input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel]";
 
+#{$text-inputs},
+input[type="date"],
+input[type="datetime"],
+input[type="time"],
+input[type="number"] {
+  height: $btn-relaxed-height;
+}
+
 #{$text-inputs},
 input[type="date"],
 input[type="datetime"],
@@ -9,9 +17,10 @@ textarea,
 fieldset {
   @include border-radius($border-radius);
   padding: $vpadding-txt $hpadding-txt;
-  border: 1px solid $color-txt-brd;
+  border: 1px solid $lighter-grey;
   color: $color-txt-text;
   font-size: 90%;
+  background-color: $lighter-grey;
 
   &:focus {
     outline: none;
@@ -141,7 +150,7 @@ fieldset {
 
   legend {
     background-color: $color-1;
-    color: $color-2;
+    color: $red;
     font-size: 14px;
     font-weight: 600;
     text-align: center;
diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss
index 0611bd80da..44ec51060c 100644
--- a/app/webpacker/css/admin_v3/shared/tables.scss
+++ b/app/webpacker/css/admin_v3/shared/tables.scss
@@ -19,6 +19,10 @@ table {
       border-left: 4px solid $color-border;
     }
 
+    &:last-child {
+      border-right: 4px solid $color-border;
+    }
+
     &.header {
       font-weight: $font-weight-bold;
     }
@@ -95,7 +99,7 @@ table {
       .icon-capture:hover,
       .icon-ok:hover,
       .icon-plus:hover {
-        background-color: $color-success;
+        background-color: $teal;
         color: $white;
       }
       .icon-copy:hover {
diff --git a/app/webpacker/packs/admin-style-v3.scss b/app/webpacker/packs/admin-style-v3.scss
index 4cbab328cd..170fae42e3 100644
--- a/app/webpacker/packs/admin-style-v3.scss
+++ b/app/webpacker/packs/admin-style-v3.scss
@@ -1,3 +1,5 @@
 @import "../css/admin_v3/all.scss";
 
 @import "../css/admin_v3/components/spinner.scss";
+
+@import "../../../node_modules/trix/dist/trix.css";