diff --git a/app/assets/javascripts/supplier/app/views/form_elements/boolean_button_view.js.coffee b/app/assets/javascripts/supplier/app/components/form/boolean-button.js.coffee
similarity index 65%
rename from app/assets/javascripts/supplier/app/views/form_elements/boolean_button_view.js.coffee
rename to app/assets/javascripts/supplier/app/components/form/boolean-button.js.coffee
index daf9c860..d14a470c 100644
--- a/app/assets/javascripts/supplier/app/views/form_elements/boolean_button_view.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/form/boolean-button.js.coffee
@@ -1,13 +1,14 @@
-App.BooleanButtonView = Ember.View.extend
+App.BooleanButtonComponent = Ember.Component.extend
   tagName: 'a'
   href: '#'
   classNames: "button"
-  templateName: "form_elements/boolean_button"
+  templateName: "form/boolean-button"
   #template: Ember.Handlebars.compile "<span>{{view.text}}</span>"
   classNameBindings: ['rounded:round', 'active:active:disabled']
 
   text: Ember.computed 'text_path', ->
-    new Ember.Handlebars.SafeString(tspan(@text_path))
+    return unless text_path = @get('text_path')
+    new Ember.Handlebars.SafeString(tspan(text_path))
 
   active: Ember.computed 'value', ->
     if @reverse then !@get('value') else !!@get('value')
diff --git a/app/assets/javascripts/supplier/app/views/form_elements/boolean_switch_view.js.coffee b/app/assets/javascripts/supplier/app/components/form/boolean-switch.js.coffee
similarity index 68%
rename from app/assets/javascripts/supplier/app/views/form_elements/boolean_switch_view.js.coffee
rename to app/assets/javascripts/supplier/app/components/form/boolean-switch.js.coffee
index 705720a0..5fe0a5a4 100644
--- a/app/assets/javascripts/supplier/app/views/form_elements/boolean_switch_view.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/form/boolean-switch.js.coffee
@@ -1,6 +1,6 @@
-App.BooleanSwitchView = Ember.View.extend
+App.BooleanSwitchComponent = Ember.Component.extend
   classNames: "switch"
-  templateName: "form_elements/boolean_switch"
+  templateName: "form/boolean-switch"
   classNameBindings: ['rounded:round']
 
   click: ->
diff --git a/app/assets/javascripts/supplier/app/components/menu-product.js.coffee b/app/assets/javascripts/supplier/app/components/menu-product.js.coffee
index 0acdbeba..b2b41d1f 100644
--- a/app/assets/javascripts/supplier/app/components/menu-product.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/menu-product.js.coffee
@@ -8,8 +8,8 @@ App.MenuProductComponent = Ember.Component.extend
     (@get('product.code') || "").toLowerCase().indexOf(filter.toLowerCase()) >= 0
   ).property('code_filter')
   menu_product_class: (-> "menu-product-#{@get('product.id') || 'new'}").property('product.id')
-  code_filter_display: (->
-    return new Ember.Handlebars.SafeString('&nbsp;') unless code = @get('product.code')
+  code_filter_display: Ember.computed 'code_filter', 'product.code', ->
+    return "&nbsp;".htmlSafe() unless code = @get('product.code')
     return code unless filter = @get('code_filter')
     index = code.toLowerCase().indexOf(filter.toLowerCase())
     if index >= 0
@@ -19,14 +19,13 @@ App.MenuProductComponent = Ember.Component.extend
       "#{pre_code}<span class='highlight'>#{highlight}</span>#{post_code}".htmlSafe()
     else
       code
-  ).property('code_filter')
   actions:
     makeEditable: -> @set('editMode', true)
     save: ->
       return unless @get('product.isValid')
       @get('product.product_variants').forEach (product_variant)->
-        product_variant.save() if product_variant.get('isDirty')
-      if @get('product.isDirty')
+        product_variant.save() if product_variant.get('hasDirtyAttributes')
+      if @get('product.hasDirtyAttributes')
         @get('product').save()
       @set 'editMode', false
     destroyProduct: (product)->
diff --git a/app/assets/javascripts/supplier/app/components/menu-time-preview.js.coffee b/app/assets/javascripts/supplier/app/components/menu-time-preview.js.coffee
index 8de3da41..fdb09fc5 100644
--- a/app/assets/javascripts/supplier/app/components/menu-time-preview.js.coffee
+++ b/app/assets/javascripts/supplier/app/components/menu-time-preview.js.coffee
@@ -22,11 +22,11 @@ App.MenuTimePreviewComponent = Ember.Component.extend
       @set 'active', false
       @set 'collapsed', true
   daysContent: (-> 
-    $days.map( (d) -> Ember.Object.create( name: d, text: t("date.day_names.#{d}")) )
+    $days.map( (d) -> Ember.Object.create( name: d, text: t("date.day_name.#{d}")) )
   ).property()
   preview_day_text: (->
     return "" unless day = @get('preview_day.text')
-    #day_text = tspan("date.day_names.#{day.get('name')}")
+    #day_text = tspan("date.day_name.#{day.get('name')}")
     tag = "<h4>#{day}</h4>"
     new Ember.Handlebars.SafeString(tag)
   ).property('preview_day')
diff --git a/app/assets/javascripts/supplier/app/controllers/modals/base_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/modals/base_controller.js.coffee
index 493cdae5..ecd1738e 100644
--- a/app/assets/javascripts/supplier/app/controllers/modals/base_controller.js.coffee
+++ b/app/assets/javascripts/supplier/app/controllers/modals/base_controller.js.coffee
@@ -11,9 +11,13 @@
       translation_params = model.serialize() if model.serialize
 
     # return translated title_path if directly set by options
-    return tspan(@get('modal_options.title_path'), translation_params).htmlSafe() if @get('modal_options.title_path')
     # return translated title_path if directly set by controller
-    return tspan(@title_path, translation_params).htmlSafe() if @title_path
+    if title_path = @get('modal_options.title_path') || @get('title_path')
+      return tspan(title_path, translation_params).htmlSafe()
+    # return translated title_path if directly set by options
+    #return tspan(@get('modal_options.title_path'), translation_params).htmlSafe() if @get('modal_options.title_path')
+    # return translated title_path if directly set by controller
+    #return tspan(@title_path, translation_params).htmlSafe() if @title_path
     # infer title path based on controller name App.modals.AddSectionController => add_section
     underscored = `this.constructor.toString().substr(11).replace(/Controller$/, '').underscore()`
     # find translated title or humanize the controller name
diff --git a/app/assets/javascripts/supplier/app/controllers/modals/product_category_move_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/modals/product_category_move_controller.js.coffee
index c51fb9f8..fd7c4131 100644
--- a/app/assets/javascripts/supplier/app/controllers/modals/product_category_move_controller.js.coffee
+++ b/app/assets/javascripts/supplier/app/controllers/modals/product_category_move_controller.js.coffee
@@ -27,4 +27,4 @@ App.modals.ProductCategoryMoveController = App.modals.BaseController.extend
       if product = products.findProperty('id', id)
         #TODO: raise in frontend if product.get('isDirty'). Cannot modify position of product containing non persisted change
         product.set('position', i)
-        product.save() if product.get('isDirty')
+        product.save() if product.get('hasDirtyAttributes')
diff --git a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
index c672ca7f..47ae442a 100644
--- a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
+++ b/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
@@ -6,8 +6,8 @@ App.SectionController = Ember.Controller.extend
     finishEditable: ->
       @set('editmode', false)
       @get('model').save()
-      @get('model.section_elements').filterProperty('isDirty').invoke 'save'
-      @get('model.section_areas').filterProperty('isDirty').invoke 'save'
+      @get('model.section_elements').filterProperty('hasDirtyAttributes').invoke 'save'
+      @get('model.section_areas').filterProperty('hasDirtyAttributes').invoke 'save'
     rollbackEditable: ->
       @get('model').rollback()
       @get('model.section_elements').forEach (section_element) ->
diff --git a/app/assets/javascripts/supplier/app/templates/components/menu-product.emblem b/app/assets/javascripts/supplier/app/templates/components/menu-product.emblem
index 03f0206e..1a09fe1b 100644
--- a/app/assets/javascripts/supplier/app/templates/components/menu-product.emblem
+++ b/app/assets/javascripts/supplier/app/templates/components/menu-product.emblem
@@ -13,7 +13,7 @@ if editMode
       a.save-product-action{action "save"}: span
   .row
     .small-3.columns= t 'attributes.product.active'
-    .small-9.columns: view "boolean-switch" value=product.active
+    .small-9.columns: boolean-switch value=product.active
   .row.menu-product-container
     .small-12.medium-6.columns
       = descriptionPlaceholder
diff --git a/app/assets/javascripts/supplier/app/templates/components/menu-time-preview.emblem b/app/assets/javascripts/supplier/app/templates/components/menu-time-preview.emblem
index f773aa85..1939459e 100644
--- a/app/assets/javascripts/supplier/app/templates/components/menu-time-preview.emblem
+++ b/app/assets/javascripts/supplier/app/templates/components/menu-time-preview.emblem
@@ -11,7 +11,7 @@ else
     h4= t 'product_category.time_preview.title'
     = view "select" content=daysContent optionValuePath="content.value" optionLabelPath="content.text" selection=preview_day prompt=" -- "
     br
-    = view 'boolean-button' value=preview_full_day reverse=true text_path="product_category.time_preview.active_at"
+    = boolean-button value=preview_full_day reverse=true text_path="product_category.time_preview.active_at"
     unless preview_full_day
       = view "select-minute-of-day" value=preview_minute_of_day
     hr
diff --git a/app/assets/javascripts/supplier/app/templates/form/boolean-button.emblem b/app/assets/javascripts/supplier/app/templates/form/boolean-button.emblem
new file mode 100644
index 00000000..a6df08be
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/templates/form/boolean-button.emblem
@@ -0,0 +1 @@
+span= text
diff --git a/app/assets/javascripts/supplier/app/templates/form/boolean-switch.emblem b/app/assets/javascripts/supplier/app/templates/form/boolean-switch.emblem
new file mode 100644
index 00000000..0d2d35d1
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/templates/form/boolean-switch.emblem
@@ -0,0 +1,2 @@
+= input type="checkbox" id=view.switchId checked=value
+label for=switchId
diff --git a/app/assets/javascripts/supplier/app/templates/form_elements/boolean_button.emblem b/app/assets/javascripts/supplier/app/templates/form_elements/boolean_button.emblem
deleted file mode 100644
index 154a69f2..00000000
--- a/app/assets/javascripts/supplier/app/templates/form_elements/boolean_button.emblem
+++ /dev/null
@@ -1 +0,0 @@
-span= view.text
diff --git a/app/assets/javascripts/supplier/app/templates/form_elements/boolean_switch.emblem b/app/assets/javascripts/supplier/app/templates/form_elements/boolean_switch.emblem
deleted file mode 100644
index fd22b59a..00000000
--- a/app/assets/javascripts/supplier/app/templates/form_elements/boolean_switch.emblem
+++ /dev/null
@@ -1,2 +0,0 @@
-= input type="checkbox" id=view.switchId checkedBinding="view.value"
-label for=view.switchId
diff --git a/app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem b/app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem
index bdfaf276..0c936f8a 100644
--- a/app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem
+++ b/app/assets/javascripts/supplier/app/templates/modals/employee_edit.emblem
@@ -12,10 +12,10 @@ p=t 'employee.modal.body_header'
 if isNotSelf
   .form-row.manager
     .form-label= t 'attributes.employee.manager'
-    .form-field= view "boolean-switch" value=model.manager
+    .form-field= boolean-switch value=model.manager
   .form-row.active
     .form-label= t 'attributes.employee.active'
-    .form-field= view "boolean-switch" value=model.active
+    .form-field= boolean-switch value=model.active
 
 .form-row.color
   .form-label= t 'attributes.employee.color'
@@ -26,4 +26,4 @@ if isNotSelf
 hr
 button.modal-close{action "close"}=t 'employee.modal.close_button'
 button.modal-confirm.right{action "save"} disabled=model.isInvalid
-  =t 'employee.modal.save_button'
+  t 'employee.modal.save_button'
diff --git a/app/assets/javascripts/supplier/app/templates/modals/product_category_form.emblem b/app/assets/javascripts/supplier/app/templates/modals/product_category_form.emblem
index 1cae928e..6ab6a2d1 100644
--- a/app/assets/javascripts/supplier/app/templates/modals/product_category_form.emblem
+++ b/app/assets/javascripts/supplier/app/templates/modals/product_category_form.emblem
@@ -6,32 +6,32 @@
     unless model.supplier.week_starts_on_monday
       .form-row.sunday
         .form-label.half= t 'date.day_name.sunday'
-        .form-field.half= view "boolean-switch" value=model.active_on_sunday
+        .form-field.half= boolean-switch value=model.active_on_sunday
     .form-row.monday
       .form-label.half= t 'date.day_name.monday'
-      .form-field.half= view "boolean-switch" value=model.active_on_monday
+      .form-field.half= boolean-switch value=model.active_on_monday
     .form-row.tuesday
       .form-label.half= t 'date.day_name.tuesday'
-      .form-field.half= view "boolean-switch" value=model.active_on_tuesday
+      .form-field.half= boolean-switch value=model.active_on_tuesday
     .form-row.wednesday
       .form-label.half= t 'date.day_name.wednesday'
-      .form-field.half= view "boolean-switch" value=model.active_on_wednesday
+      .form-field.half= boolean-switch value=model.active_on_wednesday
     .form-row.thursday
       .form-label.half= t 'date.day_name.thursday'
-      .form-field.half= view "boolean-switch" value=model.active_on_thursday
+      .form-field.half= boolean-switch value=model.active_on_thursday
     .form-row.friday
       .form-label.half= t 'date.day_name.friday'
-      .form-field.half= view "boolean-switch" value=model.active_on_friday
+      .form-field.half= boolean-switch value=model.active_on_friday
     .form-row.saturday
       .form-label.half= t 'date.day_name.saturday'
-      .form-field.half= view "boolean-switch" value=model.active_on_saturday
+      .form-field.half= boolean-switch value=model.active_on_saturday
     if model.supplier.week_starts_on_monday
       .form-row.sunday
         .form-label.half= t 'date.day_name.sunday'
-        .form-field.half= view "boolean-switch" valueBinding=model.active_on_sunday
+        .form-field.half= boolean-switch valueBinding=model.active_on_sunday
   .small-12.medium-6.columns
     .row
-      .small-12.columns.text-center= view 'boolean-button' value=model.full_day reverse=true text_path="product_category.modal.active_between.top"
+      .small-12.columns.text-center= boolean-button value=model.full_day reverse=true text_path="product_category.modal.active_between.top"
     unless model.full_day
       .row
         .small-12.columns= view "select-minute-of-day" value=model.start_from
diff --git a/app/assets/javascripts/supplier/foundation1/application.js.erb b/app/assets/javascripts/supplier/foundation1/application.js.erb
index 6f3d053b..714541c0 100644
--- a/app/assets/javascripts/supplier/foundation1/application.js.erb
+++ b/app/assets/javascripts/supplier/foundation1/application.js.erb
@@ -13,6 +13,7 @@
 //= require pickdate
 //= require_directory .
 //= require_self
+
 if(!Modernizr.cssanimations){
   window.location = "/unsupported-browser";
 }
diff --git a/app/assets/javascripts/translations.js.coffee.erb b/app/assets/javascripts/translations.js.coffee.erb
index d3dce2a4..2e668c6f 100644
--- a/app/assets/javascripts/translations.js.coffee.erb
+++ b/app/assets/javascripts/translations.js.coffee.erb
@@ -14,7 +14,6 @@
     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/config/locales/supplier.en.yml b/config/locales/supplier.en.yml
index edbd87ba..c07331db 100644
--- a/config/locales/supplier.en.yml
+++ b/config/locales/supplier.en.yml
@@ -148,7 +148,7 @@ en:
       new_button: Add ${models.product_category}
       time_preview:
         title: Preview ${models.plural.product_category|downcase}
-        active_at: Active on
+        active_at: Active at time
         activate_button: Activate preview
         deactivate_button: Stop preview
       modal:
@@ -180,6 +180,8 @@ en:
       preview:
         header: 'Select moment to preview products'
         description: 'Products visible to customers at chosen moment:'
+    product_variant:
+      add_product_variant: "Add variant"
     state:
       list:
         active: 'Active'
diff --git a/config/locales/supplier.nl.yml b/config/locales/supplier.nl.yml
index ea66c152..52ee78cd 100644
--- a/config/locales/supplier.nl.yml
+++ b/config/locales/supplier.nl.yml
@@ -146,7 +146,7 @@ nl:
       new_button: ${models.product_category} toevoegen
       time_preview:
         title: Preview ${models.plural.product_category|downcase}
-        active_at: Actief om
+        active_at: Actief op tijdstip
         activate_button: Activeer preview
         deactivate_button: Stop preview
       modal:
@@ -183,6 +183,8 @@ nl:
       preview:
         header: 'Selecteer tijdstip voor voorbeeld'
         description: 'Producten op gekozen tijdstip:'
+    product_variant:
+      add_product_variant: "Variant toevoegen"
     state:
       list:
         active: 'Actief'