diff --git a/app/assets/javascripts/templates/admin/columns_dropdown.html.haml b/app/assets/javascripts/templates/admin/columns_dropdown.html.haml
index f06944182a..7d6059de4d 100644
--- a/app/assets/javascripts/templates/admin/columns_dropdown.html.haml
+++ b/app/assets/javascripts/templates/admin/columns_dropdown.html.haml
@@ -1,11 +1,13 @@
-.ofn-drop-down.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } }
-  %span{ :class => 'icon-reorder' }= "  #{t('admin.columns')}".html_safe
-  %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
+.ofn-drop-down.ofn-drop-down-v2.right#columns-dropdown{ ng: { controller: 'ColumnsDropdownCtrl' } }
+  .ofn-drop-down-label
+    = "  #{t('admin.columns')}".html_safe
+    %span{ 'ng-class' => "expanded && 'icon-caret-up' || !expanded && 'icon-caret-down'" }
   %div.menu{ 'ng-show' => "expanded" }
-    %div.menu_item{ ng: { repeat: "column in columns", click: "toggle(column)", class: "{selected: column.visible}" } }
-      %span.check
-      %span.name {{ column.name }}
-    %hr
-    %div.menu_item.text-center
-      %input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } }
-      %input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} }
+    .menu_items
+      .menu_item{ ng: { repeat: "column in columns", click: "toggle(column);" } }
+        %input.redesigned-input{ type: "checkbox", ng: { checked: "column.visible" } }
+        {{ column.name }}
+      %hr
+      %div.menu_item.text-center
+        %input.fullwidth.orange{ type: "button", ng: { value: "saved() ? 'Saved': 'Saving'", show: "saved() || saving", disabled: "saved()" } }
+        %input.fullwidth.red{ type: "button", :value => t('admin.column_save_as_default').html_safe, ng: { show: "!saved() && !saving", click: "saveColumnPreferences(action)"} }
diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss
index 4ba11d97e8..85fd5c7416 100644
--- a/app/webpacker/css/admin/dropdown.scss
+++ b/app/webpacker/css/admin/dropdown.scss
@@ -200,13 +200,24 @@
 		max-height: 200px;
 		overflow-y: scroll;
 
-		label.menu_item {
+		.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/spec/support/request/admin_helper.rb b/spec/support/request/admin_helper.rb
index 63e0476a1a..60e0fcdbd4 100644
--- a/spec/support/request/admin_helper.rb
+++ b/spec/support/request/admin_helper.rb
@@ -3,13 +3,19 @@
 module AdminHelper
   def toggle_columns(*labels)
     # open dropdown
-    find("div#columns-dropdown", text: "COLUMNS").click
+    # case insensitive search for "Columns" text
+    find("div#columns-dropdown", text: /columns/i).click
 
-    labels.each do |label|
-      find("div#columns-dropdown div.menu div.menu_item", text: label).click
+    within "div#columns-dropdown" do
+      labels.each do |label|
+        # Convert label to case-insensitive regexp if not one already
+        label = /#{label}/i unless label.is_a?(Regexp)
+
+        find("div.menu div.menu_item", text: /#{label}/i).click
+      end
     end
 
     # close dropdown
-    find("div#columns-dropdown", text: "COLUMNS").click
+    find("div#columns-dropdown", text: /columns/i).click
   end
 end
diff --git a/spec/system/admin/bulk_product_update_spec.rb b/spec/system/admin/bulk_product_update_spec.rb
index ccc335cbd2..3649842832 100644
--- a/spec/system/admin/bulk_product_update_spec.rb
+++ b/spec/system/admin/bulk_product_update_spec.rb
@@ -345,7 +345,7 @@ describe '
     login_as_admin
     visit spree.admin_products_path
 
-    toggle_columns "Available On", /^Category?/, "Inherits Properties?", "SKU"
+    toggle_columns "Available On", /^Category?/i, "Inherits Properties?", "SKU"
 
     within "tr#p_#{p.id}" do
       expect(page).to have_field "product_name", with: p.name
@@ -712,7 +712,7 @@ describe '
         expect(page).to have_selector "th", text: "ON HAND"
         expect(page).to have_selector "th", text: "AV. ON"
 
-        toggle_columns /^.{0,1}Producer$/
+        toggle_columns /^.{0,1}Producer$/i
 
         expect(page).to have_no_selector "th", text: "PRODUCER"
         expect(page).to have_selector "th", text: "NAME"