diff --git a/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee b/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
index 4875cf81ec..0d1d6ce0b5 100644
--- a/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
+++ b/app/assets/javascripts/darkswarm/directives/price_breakdown.js.coffee
@@ -8,4 +8,7 @@ Darkswarm.directive 'priceBreakdownPopup', ->
   restrict: 'EA'
   replace: true
   templateUrl: 'price_breakdown.html'
-  scope: true
+  scope: false
+
+  link: (scope, elem, attrs) ->
+    scope.expanded = false unless scope.expanded?
diff --git a/app/assets/javascripts/templates/price_breakdown.html.haml b/app/assets/javascripts/templates/price_breakdown.html.haml
index 33554b93fe..2508dc33da 100644
--- a/app/assets/javascripts/templates/price_breakdown.html.haml
+++ b/app/assets/javascripts/templates/price_breakdown.html.haml
@@ -1,4 +1,27 @@
 .joyride-tip-guide{"ng-class" => "{ in: tt_isOpen, fade: tt_animation }"}
   %span.joyride-nub.bottom
   .joyride-content-wrapper
-    %price-percentage{percentage: 'variant.basePricePercentage'}
+
+    .collapsed{"ng-show" => "!expanded"}
+      %price-percentage{percentage: 'variant.basePricePercentage'}
+      %a{"ng-click" => "expanded = !expanded"} Full price breakdown
+
+    .expanded{"ng-show" => "expanded"}
+      %ul
+        %li
+          Cost
+          %span {{ variant.base_price | currency }}
+        %li
+          Admin fee
+          %span {{ variant.fees.admin | currency }}
+        %li
+          Sales fee
+          %span {{ variant.fees.sales | currency }}
+        %li
+          Packing fee
+          %span {{ variant.fees.packing | currency }}
+        %li
+          Transport fee
+          %span {{ variant.fees.transport | currency }}
+      %a{"ng-click" => "expanded = !expanded"} Price graph
+      \= {{ variant.price | currency }}