diff --git a/app/assets/javascripts/supplier/app/views/mark_list_helped_button_view.js.coffee b/app/assets/javascripts/supplier/app/components/button/mark-list-helped.js.coffee
similarity index 66%
rename from app/assets/javascripts/supplier/app/views/mark_list_helped_button_view.js.coffee
rename to app/assets/javascripts/supplier/app/components/button/mark-list-helped.js.coffee
index 852b3c2c..6eee2a98 100644
--- a/app/assets/javascripts/supplier/app/views/mark_list_helped_button_view.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/button/mark-list-helped.js.coffee
@@ -1,5 +1,5 @@
-App.MarkListHelpedButtonView = Ember.View.extend
-  templateName: 'mark_list_helped_button'
+App.ButtonMarkListHelpedComponent = Ember.View.extend
+  templateName: 'components/button/mark-list-helped'
   classNames: ['mark-list-as-helped-button']
   classNameBindings: ['content.needs_help:show:hide']
   tagName: 'button'
diff --git a/app/assets/javascripts/supplier/app/components/mark-order-active.js.coffee b/app/assets/javascripts/supplier/app/components/button/mark-order-active.js.coffee
similarity index 57%
rename from app/assets/javascripts/supplier/app/components/mark-order-active.js.coffee
rename to app/assets/javascripts/supplier/app/components/button/mark-order-active.js.coffee
index da215a1d..16fac170 100644
--- a/app/assets/javascripts/supplier/app/components/mark-order-active.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/button/mark-order-active.js.coffee
@@ -1,6 +1,6 @@
-App.MarkOrderActiveComponent = Ember.Component.extend
+App.ButtonMarkOrderActiveComponent = Ember.Component.extend
   tagName: 'button'
-  templateName: 'components/buttons/mark-order-active'
+  templateName: 'components/button/mark-order-active'
   classNames: ['mark-order-active-button']
   classNameBindings: ['order.placed:active:hide']
   click: -> @get('order').mark_active()
diff --git a/app/assets/javascripts/supplier/app/components/mark-order-cancelled.js.coffee b/app/assets/javascripts/supplier/app/components/button/mark-order-cancelled.js.coffee
similarity index 70%
rename from app/assets/javascripts/supplier/app/components/mark-order-cancelled.js.coffee
rename to app/assets/javascripts/supplier/app/components/button/mark-order-cancelled.js.coffee
index b0b62b52..e4633dd6 100644
--- a/app/assets/javascripts/supplier/app/components/mark-order-cancelled.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/button/mark-order-cancelled.js.coffee
@@ -1,6 +1,6 @@
-App.MarkOrderCancelledComponent = Ember.Component.extend
+App.ButtonMarkOrderCancelledComponent = Ember.Component.extend
   tagName: 'button'
-  templateName: 'components/buttons/mark-order-cancelled'
+  templateName: 'components/button/mark-order-cancelled'
   classNames: ['mark-order-cancelled-button']
   classNameBindings: ['showButton:active:hide']
   showButton: Ember.computed 'order.state', ->
diff --git a/app/assets/javascripts/supplier/app/components/mark-order-delivered.js.coffee b/app/assets/javascripts/supplier/app/components/button/mark-order-delivered.js.coffee
similarity index 70%
rename from app/assets/javascripts/supplier/app/components/mark-order-delivered.js.coffee
rename to app/assets/javascripts/supplier/app/components/button/mark-order-delivered.js.coffee
index 55ecaa3c..fc8cae8e 100644
--- a/app/assets/javascripts/supplier/app/components/mark-order-delivered.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/button/mark-order-delivered.js.coffee
@@ -1,6 +1,6 @@
-App.MarkOrderDeliveredComponent = Ember.Component.extend
+App.ButtonMarkOrderDeliveredComponent = Ember.Component.extend
   tagName: 'button'
-  templateName: 'components/buttons/mark-order-delivered'
+  templateName: 'components/button/mark-order-delivered'
   classNames: ['mark-order-delivered-button']
   classNameBindings: ['showButton:active:hide']
   showButton: Ember.computed 'order.state', ->
diff --git a/app/assets/javascripts/supplier/app/templates/_list_content.emblem b/app/assets/javascripts/supplier/app/templates/_list_content.emblem
index b5bb458a..37592de0 100644
--- a/app/assets/javascripts/supplier/app/templates/_list_content.emblem
+++ b/app/assets/javascripts/supplier/app/templates/_list_content.emblem
@@ -23,9 +23,9 @@ if list.sorted_orders
         span.currency= currency order.total
         span.created_at= time order.created_at
         .list-order-actions
-          = mark-order-active order=order
-          = mark-order-delivered order=order
-          = mark-order-cancelled order=order
+          = button-mark-order-active order=order
+          = button-mark-order-delivered order=order
+          = button-mark-order-cancelled order=order
     if showTotal
       .list-orders-total.total
         = t 'general.total'
diff --git a/app/assets/javascripts/supplier/app/templates/active_list.emblem b/app/assets/javascripts/supplier/app/templates/active_list.emblem
index b01de474..2739d009 100644
--- a/app/assets/javascripts/supplier/app/templates/active_list.emblem
+++ b/app/assets/javascripts/supplier/app/templates/active_list.emblem
@@ -16,7 +16,8 @@ td.actions
       span.fa-stack.fa-2x.fa-stack-sized
         i.fa.fa-bell.fa-stack-small
         i.fa.fa-ban.revoke
-  = view "mark-list-helped-button" content=view.content
+  /= view "mark-list-helped-button" content=view.content
+  = button-mark-list-helped content=view.content
   /= view "remove-list-needs-payment" content=view.content
   = view "close-list-button" content=view.content
 
diff --git a/app/assets/javascripts/supplier/app/templates/active_order.emblem b/app/assets/javascripts/supplier/app/templates/active_order.emblem
index b0b1ff23..37e5855f 100644
--- a/app/assets/javascripts/supplier/app/templates/active_order.emblem
+++ b/app/assets/javascripts/supplier/app/templates/active_order.emblem
@@ -10,6 +10,6 @@ td.section_title= link-to 'section' view.content.list.table.section.id: span=vie
 td.currency=currency view.content.total
 td.time= time view.content.created_at format="HH:mm"
 td.actions
-  = mark-order-active order=view.content
-  = mark-order-delivered order=view.content
-  = mark-order-cancelled order=view.content
+  = button-mark-order-active order=view.content
+  = button-mark-order-delivered order=view.content
+  = button-mark-order-cancelled order=view.content
diff --git a/app/assets/javascripts/supplier/app/templates/components/buttons/mark-order-cancelled.emblem b/app/assets/javascripts/supplier/app/templates/components/button/mark-list-helped.emblem
similarity index 100%
rename from app/assets/javascripts/supplier/app/templates/components/buttons/mark-order-cancelled.emblem
rename to app/assets/javascripts/supplier/app/templates/components/button/mark-list-helped.emblem
diff --git a/app/assets/javascripts/supplier/app/templates/components/buttons/mark-order-active.emblem b/app/assets/javascripts/supplier/app/templates/components/button/mark-order-active.emblem
similarity index 100%
rename from app/assets/javascripts/supplier/app/templates/components/buttons/mark-order-active.emblem
rename to app/assets/javascripts/supplier/app/templates/components/button/mark-order-active.emblem
diff --git a/app/assets/javascripts/supplier/app/templates/mark_list_helped_button.emblem b/app/assets/javascripts/supplier/app/templates/components/button/mark-order-cancelled.emblem
similarity index 100%
rename from app/assets/javascripts/supplier/app/templates/mark_list_helped_button.emblem
rename to app/assets/javascripts/supplier/app/templates/components/button/mark-order-cancelled.emblem
diff --git a/app/assets/javascripts/supplier/app/templates/components/buttons/mark-order-delivered.emblem b/app/assets/javascripts/supplier/app/templates/components/button/mark-order-delivered.emblem
similarity index 100%
rename from app/assets/javascripts/supplier/app/templates/components/buttons/mark-order-delivered.emblem
rename to app/assets/javascripts/supplier/app/templates/components/button/mark-order-delivered.emblem
diff --git a/app/assets/javascripts/supplier/app/templates/section/table.emblem b/app/assets/javascripts/supplier/app/templates/section/table.emblem
index 0566a5be..1a635faf 100644
--- a/app/assets/javascripts/supplier/app/templates/section/table.emblem
+++ b/app/assets/javascripts/supplier/app/templates/section/table.emblem
@@ -9,7 +9,8 @@ if table.active_list
     .title= table.number
     if table.active_list
       .table-action-row
-        = view "mark-list-helped-button" contentBinding="table.active_list"
+        /= view "mark-list-helped-button" contentBinding="table.active_list"
+        = button-mark-list-helped content=table.active_list
         = view "close-list-button" contentBinding="table.active_list"
     each order in table.active_list.active_orders
       .table-action-row= order.display_tag
diff --git a/app/assets/javascripts/translations.js.coffee.erb b/app/assets/javascripts/translations.js.coffee.erb
index 2e668c6f..d3dce2a4 100644
--- a/app/assets/javascripts/translations.js.coffee.erb
+++ b/app/assets/javascripts/translations.js.coffee.erb
@@ -14,6 +14,7 @@
     errors: <%= I18n.t('errors', locale: :nl).to_json %>
     date: <%= {day_name: Hash[Date::DAYNAMES.map(&:downcase).zip(I18n.t('date.day_names', locale: :nl))]}.to_json %>
 
+
 @day_minutes_to_time = (minutes)->
   return "" unless minutes
   [("0" + Math.floor(minutes/60)).substr(-2,2), ("0" + Math.floor(minutes%60)).substr(-2,2)].join(":")
diff --git a/app/assets/javascripts/user/app/templates/application.emblem b/app/assets/javascripts/user/app/templates/application.emblem
index 167cbddb..6bb31063 100644
--- a/app/assets/javascripts/user/app/templates/application.emblem
+++ b/app/assets/javascripts/user/app/templates/application.emblem
@@ -8,4 +8,4 @@
           span.fa.fa-times.fa-lg
         span= globals.notice
     = outlet
-=outlet modal
+=outlet "modal"
diff --git a/app/assets/javascripts/user/app/templates/modals/product_info.emblem b/app/assets/javascripts/user/app/templates/modals/product_info.emblem
index cc2965d2..9805f5f3 100644
--- a/app/assets/javascripts/user/app/templates/modals/product_info.emblem
+++ b/app/assets/javascripts/user/app/templates/modals/product_info.emblem
@@ -1,10 +1,10 @@
-if image
-  .right: img src=image.small alt=""
-p==description
-if product_variants
+if model.image
+  .right: img src=model.image.small alt=""
+p==model.description
+if model.product_variants
   h4= t 'models.plural.product_variant'
   ul
-    each product_variant in product_variants
+    each model.product_variants as |product_variant|
       li= product_variant.name
 hr
 button{action "close"}= t 'modal.info.close'
diff --git a/config/locales/user.en.yml b/config/locales/user.en.yml
index 7712695a..1cb94541 100644
--- a/config/locales/user.en.yml
+++ b/config/locales/user.en.yml
@@ -140,3 +140,6 @@ en:
       orders_placed_count_explanation: "&nbsp; means that there are %{count} orders placed and not yet processing or finished"
       orders_in_process_count_explanation: "&nbsp; means that there are %{count} orders currently processing"
       close: Got it
+    modal:
+      info:
+        close: Close
diff --git a/config/locales/user.nl.yml b/config/locales/user.nl.yml
index e90009d1..7680fc55 100644
--- a/config/locales/user.nl.yml
+++ b/config/locales/user.nl.yml
@@ -140,3 +140,6 @@ nl:
       orders_placed_count_explanation: "&nbsp; betekent dat er %{count} nog niet in behandeling of afgesloten bestellingen zijn"
       orders_in_process_count_explanation: "&nbsp; betekent dat er %{count} bestellingen in behandeling zijn"
       close: Got it
+    modal:
+      info:
+        close: Sluit