diff --git a/app/assets/javascripts/templates/price_breakdown.html.haml b/app/assets/javascripts/templates/price_breakdown.html.haml
index 707a66e09c..09df66b5a4 100644
--- a/app/assets/javascripts/templates/price_breakdown.html.haml
+++ b/app/assets/javascripts/templates/price_breakdown.html.haml
@@ -2,25 +2,25 @@
   %span.joyride-nub.right
   .joyride-content-wrapper
     %ul
-      %li.cost
+      %li
         .right {{ ::variant.price | localizeCurrency }}
         %span{"ng-bind" => "::'item_cost' | t"}
-      %li.admin-fee{"ng-if" => "::variant.fees.admin"}
+      %li{"ng-if" => "::variant.fees.admin"}
         .right {{ ::variant.fees.admin | localizeCurrency }}
         %span{"ng-bind" => "::'admin_fee' | t"}
-      %li.sales-fee{"ng-if" => "::variant.fees.sales"}
+      %li{"ng-if" => "::variant.fees.sales"}
         .right {{ ::variant.fees.sales | localizeCurrency }}
         %span{"ng-bind" => "::'sales_fee' | t"}
-      %li.packing-fee{"ng-if" => "::variant.fees.packing"}
+      %li{"ng-if" => "::variant.fees.packing"}
         .right {{ ::variant.fees.packing | localizeCurrency }}
         %span{"ng-bind" => "::'packing_fee' | t"}
-      %li.transport-fee{"ng-if" => "::variant.fees.transport"}
+      %li{"ng-if" => "::variant.fees.transport"}
         .right {{ ::variant.fees.transport | localizeCurrency }}
         %span{"ng-bind" => "::'transport_fee' | t"}
-      %li.fundraising-fee{"ng-if" => "::variant.fees.fundraising"}
+      %li{"ng-if" => "::variant.fees.fundraising"}
         .right {{ ::variant.fees.fundraising | localizeCurrency }}
         %span{"ng-bind" => "::'fundraising_fee' | t"}
-      %li.total
+      %li
         %strong
           .right = {{ ::variant.price_with_fees | localizeCurrency }}
            
diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.scss b/app/assets/stylesheets/darkswarm/_shop-popovers.scss
index 5f7d06cf68..64b820fd75 100644
--- a/app/assets/stylesheets/darkswarm/_shop-popovers.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-popovers.scss
@@ -5,18 +5,17 @@
 // Foundation overrides
 .joyride-tip-guide.price_breakdown {
   // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
-  background-color: #999;
-  color: #1f1f1f;
   margin-left: -8px;
 
-  @include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.7));
+  @include box-shadow(0 2px 8px 0 rgba(0, 0, 0, 0.35));
 
   .joyride-content-wrapper {
     padding: 1.125rem 1.25rem 1.5rem;
     padding: 1rem;
     margin: 1%;
     width: 98%;
-    background-color: white;
+    background-color: $grey-800;
+    color: white;
   }
 
   h1, h2, h3, h4, h5, h6 {
@@ -25,7 +24,7 @@
 
   .joyride-nub.right {
     top: 38px;
-    border-color: #999 !important;
+    border-color: $grey-800 !important;
     border-top-color: transparent !important;
     border-right-color: transparent !important;
     border-bottom-color: transparent !important;
@@ -38,17 +37,13 @@
   }
 
   li {
-    background-color: #13bf85;
+    border-bottom: .1em solid $grey-700;
     padding: 0 0.25rem;
     margin-bottom: 2px;
-    color: white;
-  }
-
-  li.cost {
-    background-color: #0b8c61;
   }
 
   li:last-child {
+    border-bottom: 0;
     margin-bottom: 0.75rem;
   }
 }
diff --git a/spec/features/consumer/shopping/variant_overrides_spec.rb b/spec/features/consumer/shopping/variant_overrides_spec.rb
index add793f035..f572ddca99 100644
--- a/spec/features/consumer/shopping/variant_overrides_spec.rb
+++ b/spec/features/consumer/shopping/variant_overrides_spec.rb
@@ -58,10 +58,9 @@ feature "shopping with variant overrides defined", js: true do
 
     it "calculates fees correctly" do
       page.find("#variant-#{product1_variant1.id} .graph-button").click
-      binding.pry
-      expect(page).to have_selector 'li.cost div', text: with_currency(55.55)
-      expect(page).to have_selector 'li.packing-fee div', text: with_currency(5.56)
-      expect(page).to have_selector 'li.total div', text: "= #{with_currency(61.11)}"
+      expect(page).to have_selector 'li', text: "#{with_currency(55.55)} Item cost"
+      expect(page).to have_selector 'li', text: "#{with_currency(5.56)} Packing fee"
+      expect(page).to have_selector 'li', text: "= #{with_currency(61.11)}"
     end
 
     it "shows the correct prices when products are in the cart" do