diff --git a/app/assets/javascripts/shared-ember-helpers/boolean.js.coffee b/app/assets/javascripts/shared-ember-helpers/boolean.js.coffee
new file mode 100644
index 00000000..3ce3a413
--- /dev/null
+++ b/app/assets/javascripts/shared-ember-helpers/boolean.js.coffee
@@ -0,0 +1,3 @@
+Ember.Handlebars.registerBoundHelper 'boolean', (truefalse, options={})->
+  classname = if truefalse then 'boolean-true' else 'boolean-false'
+  new Handlebars.SafeString("<span class=\"#{classname}\"></span>")
diff --git a/app/assets/javascripts/shared-ember-helpers/state.js.coffee b/app/assets/javascripts/shared-ember-helpers/state.js.coffee
new file mode 100644
index 00000000..95f35e83
--- /dev/null
+++ b/app/assets/javascripts/shared-ember-helpers/state.js.coffee
@@ -0,0 +1,3 @@
+Ember.Handlebars.registerBoundHelper 'state', (subject, state, options={})->
+  path = "state.#{subject}.#{state}"
+  new Handlebars.SafeString("<span data-t=\"#{path}\">#{t(path)}</span>")
diff --git a/app/assets/javascripts/supplier/app/controllers/lists_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/lists_controller.js.coffee
new file mode 100644
index 00000000..61f4be90
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/controllers/lists_controller.js.coffee
@@ -0,0 +1,4 @@
+Qsupplier.App.ListsController = Ember.ArrayController.extend
+  dateChanged: (->
+    @set('model', @store.find('list', date: @get('date')))
+  ).observes('date')
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 3776fc8f..398a4ff2 100644
--- a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
+++ b/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
@@ -1,5 +1,5 @@
 Qsupplier.App.SectionController = Ember.ObjectController.extend
-  needs: ['application']
+  needs: ['application', 'sections', 'section'] #wtf? section, otherwise an Ember error
   editmode: false
   makeEditable: -> @set('editmode', true)
   finishEditable: ->
@@ -14,3 +14,4 @@ Qsupplier.App.SectionController = Ember.ObjectController.extend
     closeList: (list)-> list.close() if list
   textures: ['wood1', 'wood2']
 
+  sections: (-> @get('controllers.sections.model')).property('controllers.sections.model')
diff --git a/app/assets/javascripts/supplier/app/controllers/sections_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/sections_controller.js.coffee
index b10db036..979060d3 100644
--- a/app/assets/javascripts/supplier/app/controllers/sections_controller.js.coffee
+++ b/app/assets/javascripts/supplier/app/controllers/sections_controller.js.coffee
@@ -1,2 +1,2 @@
 Qsupplier.App.SectionsController = Ember.ArrayController.extend
-  needs: ['application', 'section']
+  needs: ['application']
diff --git a/app/assets/javascripts/supplier/app/controllers/sections_index_controller.js.coffee b/app/assets/javascripts/supplier/app/controllers/sections_index_controller.js.coffee
new file mode 100644
index 00000000..32c47820
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/controllers/sections_index_controller.js.coffee
@@ -0,0 +1,10 @@
+Qsupplier.App.SectionsIndexController = Ember.ArrayController.extend
+  needs: ['application', 'sections']
+  sections: (-> @get('controllers.sections.model')).property('controllers.sections.model')
+  sectionQrCodesUrl: ((a,b,c)->
+    debugger
+    Routes.qr_codes_suppliers_tables_path()
+  ).property()
+  newPath: Routes.new_suppliers_section_path()
+  qrPath: (section_id)->
+    Routes.qr_codes_suppliers_tables_path section_id: section_id
diff --git a/app/assets/javascripts/supplier/app/helpers/route_link_helper.js.coffee b/app/assets/javascripts/supplier/app/helpers/route_link_helper.js.coffee
new file mode 100644
index 00000000..3417ac13
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/helpers/route_link_helper.js.coffee
@@ -0,0 +1,12 @@
+Ember.Handlebars.registerHelper 'path', (route, params..., options)->
+  route_method = Routes["#{route}_path"]
+  throw "Route #{route} cannout be found" unless route_method
+
+  mapped_options = {}
+
+  for k, v of options.hash
+    mapped_options[k] = Ember.Handlebars.get(this, v, options) || v
+  params.push mapped_options
+
+  path = route_method.apply(this, params)
+  new Handlebars.SafeString("href='#{path}'")
diff --git a/app/assets/javascripts/supplier/app/models/list.js.coffee b/app/assets/javascripts/supplier/app/models/list.js.coffee
index e3a53099..8e11b53a 100644
--- a/app/assets/javascripts/supplier/app/models/list.js.coffee
+++ b/app/assets/javascripts/supplier/app/models/list.js.coffee
@@ -7,6 +7,7 @@ Qsupplier.App.List = DS.Model.extend
   is_paid: attr 'boolean'
   has_active_orders: attr 'boolean'
   price: attr 'number'
+  closed_at: DS.attr('date')
   table_number: attr 'number'
   table: DS.belongsTo('table', inverse: 'active_list')
   #users: DS.hasMany('user', inverse: 'active_list')
diff --git a/app/assets/javascripts/supplier/app/modifications/model_extensions.js.coffee b/app/assets/javascripts/supplier/app/modifications/model_extensions.js.coffee
index 721fd003..b820652a 100644
--- a/app/assets/javascripts/supplier/app/modifications/model_extensions.js.coffee
+++ b/app/assets/javascripts/supplier/app/modifications/model_extensions.js.coffee
@@ -1,6 +1,6 @@
 DS.Model.reopen
-  created_at: DS.attr('string')
-  updated_at: DS.attr('string')
+  created_at: DS.attr('date')
+  updated_at: DS.attr('date')
 DS.Model.reopenClass
   findCached: (id)->
     return null unless id
diff --git a/app/assets/javascripts/supplier/app/router.js.coffee b/app/assets/javascripts/supplier/app/router.js.coffee
index 7491997c..50ee286c 100644
--- a/app/assets/javascripts/supplier/app/router.js.coffee
+++ b/app/assets/javascripts/supplier/app/router.js.coffee
@@ -8,4 +8,6 @@ Qsupplier.App.Router.map ->
   @route '/', queryParams: ['section_id']
   @resource 'sections', ->
     @resource 'section', path: ':section_id'
+  @resource 'lists', ->
+    @resource 'list', path: ':list_id'
   #@resource 'lists', queryParams: ['state']
diff --git a/app/assets/javascripts/supplier/app/routes/lists_route.js.coffee b/app/assets/javascripts/supplier/app/routes/lists_route.js.coffee
new file mode 100644
index 00000000..d8f1aeba
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/routes/lists_route.js.coffee
@@ -0,0 +1,4 @@
+Qsupplier.App.ListsRoute = Ember.Route.extend
+  #model: -> @store.find 'list'
+  setupController: (controller, model)->
+    controller.set 'date', (new Date()).toISOString().substr(0,10)
diff --git a/app/assets/javascripts/supplier/app/templates/lists.emblem b/app/assets/javascripts/supplier/app/templates/lists.emblem
new file mode 100644
index 00000000..2c3bd05e
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/templates/lists.emblem
@@ -0,0 +1,26 @@
+h1=t 'models.plural.list'
+Qsupplier.App.ListDisplayDateSelector valueBinding=date
+if controller.model
+  table.table
+    thead
+      tr
+        th.state=t 'attributes.list.state'
+        th.boolean=t 'attributes.list.needs_help'
+        th.boolean=t 'attributes.list.needs_payment'
+        th.timestamp=t 'attributes.list.closed_at'
+        th.table_number=t 'models.table'
+        th.currentcy=t 'attributes.list.price'
+        th.timestamp=t 'attributes.list.created_at'
+    tbody
+      each list in controller
+        tr
+          td.state=state 'list' list.state
+          td.boolean.needs_help=boolean list.needs_help
+          td.boolean.needs_payment=boolean list.needs_payment
+          td.timestamp=time list.closed_at
+          td.table_number 7
+          td.currency=currency list.price
+          td.timestamp=time list.created_at
+else
+  .row
+    .panel=t 'list.none_found'
diff --git a/app/assets/javascripts/supplier/app/templates/section.emblem b/app/assets/javascripts/supplier/app/templates/section.emblem
index aaa48811..452d3973 100644
--- a/app/assets/javascripts/supplier/app/templates/section.emblem
+++ b/app/assets/javascripts/supplier/app/templates/section.emblem
@@ -1,3 +1,7 @@
+.section-tabs-container
+  link-to 'sections' | b
+  each section in sections
+    view Qsupplier.App.SectionTabHeaderView context=section
 .section-manage-tables.pull-right
   if editmode
     .btn-group
diff --git a/app/assets/javascripts/supplier/app/templates/sections.emblem b/app/assets/javascripts/supplier/app/templates/sections.emblem
index cad582a2..26191258 100644
--- a/app/assets/javascripts/supplier/app/templates/sections.emblem
+++ b/app/assets/javascripts/supplier/app/templates/sections.emblem
@@ -1,4 +1 @@
-.section-tabs-container
-  each section in controller
-    view Qsupplier.App.SectionTabHeaderView context=section
 = outlet
diff --git a/app/assets/javascripts/supplier/app/templates/sections/index.emblem b/app/assets/javascripts/supplier/app/templates/sections/index.emblem
new file mode 100644
index 00000000..fd89621a
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/templates/sections/index.emblem
@@ -0,0 +1,40 @@
+h1=t 'models.plural.section'
+if sections
+  table.table
+    thead
+      tr
+        th=t 'attributes.section.title'
+        th=t 'models.plural.table'
+        th.numeric=t 'attributes.section.width'
+        th.numeric=t 'attributes.section.height'
+        /th.boolean=t 'attributes.list.needs_help'
+        /th.boolean=t 'attributes.list.needs_payment'
+        /th.timestamp=t 'attributes.list.closed_at'
+        /th.table_number=t 'models.table'
+        /th.currentcy=t 'attributes.list.price'
+        /th.timestamp=t 'attributes.list.created_at'
+        th.actions=t 'helpers.actions.title'
+    tbody
+      each section in sections
+        tr
+          td
+            link-to 'section' section
+              =section.title
+          td
+            span.table-count= section.tables.length
+          td.numeric= section.width
+          td.numeric= section.height
+          /td.boolean.needs_help=boolean list.needs_help
+          /td.boolean.needs_payment=boolean list.needs_payment
+          /td.timestamp=time list.closed_at
+          /td.table_number 7
+          /td.currency=currency list.price
+          /td.timestamp=time list.created_at
+          td.actions
+            a.table-qr-codes{path qr_codes_suppliers_tables section_id=section.id}
+              span
+else
+  .row
+    .panel=t 'section.none_found'
+.form-actions
+  a.form-action-new{path new_suppliers_section}=t 'helpers.links.new'
diff --git a/app/assets/javascripts/supplier/app/views/list_display_date_selector.js.coffee b/app/assets/javascripts/supplier/app/views/list_display_date_selector.js.coffee
new file mode 100644
index 00000000..595d391b
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/views/list_display_date_selector.js.coffee
@@ -0,0 +1,4 @@
+Qsupplier.App.ListDisplayDateSelector = Ember.TextField.extend
+  classNames: 'datepicker'
+  didInsertElement: ->
+    setTranslations @$().hide()
diff --git a/app/assets/javascripts/supplier/foundation1/application.js.erb b/app/assets/javascripts/supplier/foundation1/application.js.erb
index 11838b95..72bfd6cb 100644
--- a/app/assets/javascripts/supplier/foundation1/application.js.erb
+++ b/app/assets/javascripts/supplier/foundation1/application.js.erb
@@ -17,9 +17,11 @@ var Qstorage = localStorage;
 
 $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
+
 String.prototype.capitalize = function() {
     return this.charAt(0).toUpperCase() + this.slice(1);
 }
+
 var path_mapping = {
   user_root: '/user',
   join_occupied_table: '/user/join_occupied_table',
diff --git a/app/assets/javascripts/supplier/foundation1/initializer.js.coffee b/app/assets/javascripts/supplier/foundation1/initializer.js.coffee
index 80864547..3d399cd7 100644
--- a/app/assets/javascripts/supplier/foundation1/initializer.js.coffee
+++ b/app/assets/javascripts/supplier/foundation1/initializer.js.coffee
@@ -126,6 +126,9 @@ $ ->
       menu.show().animate left: 0
       toggle.animate left: 222 - 30, -> $(@).addClass('open')
 
+  $('[data-boolean]').each -> 
+    $(@).addClass(if $(@).data('boolean') then 'boolean-true' else 'boolean-false')
+
   # Hide alert boxes on click
   $(document).on 'click', '.general-alerts .alert-box', -> $(@).slideUp()
 
diff --git a/app/assets/javascripts/translations.js.coffee.erb b/app/assets/javascripts/translations.js.coffee.erb
index cf316afa..fafff3a6 100644
--- a/app/assets/javascripts/translations.js.coffee.erb
+++ b/app/assets/javascripts/translations.js.coffee.erb
@@ -75,12 +75,19 @@
     $("*[data-time]").each ->
       $(this).text moment($(this).data("time")).format($(this).data("timeFormat") or "dd D MMM HH:MM")
 
+  # jQuery UI datepicker support
   $(".datepicker").datepicker "option", $.datepicker.regional[locale] if $.fn.datepicker
+
+  # pickadate support
   if $.fn.pickadate
-    datepicker_object = $('.datepicker')
+    if selector.hasClass('datepicker')
+      datepicker_object = selector
+      selector.siblings('.pickadate-display').remove()
+    else
+      datepicker_object = selector.find('.datepicker')
+      selector.find('.pickadate-display').remove()
     datepicker_object.pickadate('stop') if datepicker_object.data('pickadate')
     $.extend( $.fn.pickadate.defaults, $pickadate_translations[locale] )
-    $('.pickadate-display').remove()
     window.pickadate_options ||= {}
     datepicker_object.pickadate(window.pickadate_options)
     datepicker_object.change()
@@ -89,16 +96,20 @@
 @setupTranslations = (options = {})->
   locale = options.locale || Qstorage.getItem('locale') || 'en'
   if $.fn.pickadate
-    $('.datepicker').change ->
+    $(document).on 'change', '.datepicker', ->
       input = $(@)
       input.next().remove() if input.next().hasClass('pickadate-display')
-      display_format = $pickadate_translations[$locale].displayFormat
-      display_date = input.data('pickadate').get('select', display_format)
-      display_date = ' '+display_date # add space between the icon and the date
-      display_tag = $('<span></span>').addClass('pickadate-display').append('<span class="fa fa-calendar fa-lg"></span>').append($('<span></span>').text(display_date))
-      #display_tag.click (e)->(e.preventDefault();input.click().focus();false )
-      display_tag.click (e)->(e.preventDefault();input.pickadate('open');false )
-      $(@).after(display_tag)
+      if input.data('pickadate')
+        if input.val()
+          display_format = $pickadate_translations[$locale].displayFormat
+          display_date = input.data('pickadate').get('select', display_format)
+          display_date = $('<span></span>').text(' '+display_date) # add space between the icon and the date
+        else
+          display_date = $('<span></span>').data('t', 'datepicker.no_date').text(t('datepicker.no_date'))
+        display_tag = $('<span></span>').addClass('pickadate-display').append('<span class="fa fa-calendar fa-lg"></span>').append(display_date)
+        #display_tag.click (e)->(e.preventDefault();input.click().focus();false )
+        display_tag.click (e)->(e.preventDefault();input.pickadate('open');false )
+        $(@).after(display_tag)
   setLocale(locale)
   $('.datepicker').change().hide()
 $transformation_mappings =
diff --git a/app/assets/stylesheets/supplier/foundation1/forms.css.sass b/app/assets/stylesheets/supplier/foundation1/forms.css.sass
index 0bd9472a..6062a462 100644
--- a/app/assets/stylesheets/supplier/foundation1/forms.css.sass
+++ b/app/assets/stylesheets/supplier/foundation1/forms.css.sass
@@ -19,3 +19,19 @@
     &.full
       @media #{$large-up}
         +grid-column($columns: 9, $last-column:true)
+body
+  label
+    &.number
+      display: inline-block
+      padding: 4px 10px
+  input
+    &.number
+      width: 60px
+      display: inline-block
+  .apply-filter
+    +button($bg: $primary-color, $padding: $button-tny)
+  .error
+    input, textarea
+      border-color: $alert-color
+  input[type="number"]
+    text-align: right
diff --git a/app/assets/stylesheets/supplier/foundation1/lists.css.sass b/app/assets/stylesheets/supplier/foundation1/lists.css.sass
new file mode 100644
index 00000000..5a34643b
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/lists.css.sass
@@ -0,0 +1,12 @@
+@import font-awesome
+@import ./foundation_and_overrides
+td.boolean
+  +table-fit
+  &.needs_help
+    .boolean-true
+      @extend .fa
+      @extend .fa-exclamation
+  &.needs_payment
+    .boolean-true
+      @extend .fa
+      @extend .fa-money
diff --git a/app/assets/stylesheets/supplier/foundation1/menu_main.css.sass b/app/assets/stylesheets/supplier/foundation1/menu_main.css.sass
index 8d325328..82465def 100644
--- a/app/assets/stylesheets/supplier/foundation1/menu_main.css.sass
+++ b/app/assets/stylesheets/supplier/foundation1/menu_main.css.sass
@@ -8,7 +8,7 @@ header.top-menu
   background-position: left bottom, right bottom
   background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
   color: $green
-  padding-left: 49px
+  padding-left: 48px
   padding-right: 52px 
   .menu-content
     background-color: white
diff --git a/app/assets/stylesheets/supplier/foundation1/structure.css.sass b/app/assets/stylesheets/supplier/foundation1/structure.css.sass
index 66688954..6afdfa31 100644
--- a/app/assets/stylesheets/supplier/foundation1/structure.css.sass
+++ b/app/assets/stylesheets/supplier/foundation1/structure.css.sass
@@ -1,15 +1,7 @@
 $side-spacing: 0px
 @import constants
 @import ./foundation_and_overrides
-html
-body
-  label
-    &.number
-      display: inline
-      padding: 4px 10px
-  input
-    &.number
-      width: 40px
+@import font-awesome
 .supplier-is-closed
   +alert($bg: $secondary-color)
   .close
diff --git a/app/assets/stylesheets/supplier/foundation1/tables.css.sass b/app/assets/stylesheets/supplier/foundation1/tables.css.sass
index 49b53a28..d2efefac 100644
--- a/app/assets/stylesheets/supplier/foundation1/tables.css.sass
+++ b/app/assets/stylesheets/supplier/foundation1/tables.css.sass
@@ -10,12 +10,23 @@ table
     +table-fit
   th.status-icons, td.status-icons
     +table-fit
+  td
+    &.boolean
+      text-align: center
+    &.currency
+      text-align: right
 .table-edit
   +button($bg: $secondary-color)
   +button-icon-only
   span
     @extend .fa
     @extend .fa-pencil
+.table-qr-codes
+  +button($bg: $secondary-color)
+  +button-icon-only
+  span
+    @extend .fa
+    @extend .fa-qrcode
 .table-destroy
   +button($bg: $secondary-color)
   +button-icon-only
diff --git a/app/controllers/suppliers/lists_controller.rb b/app/controllers/suppliers/lists_controller.rb
index 36d120ff..c100fd60 100644
--- a/app/controllers/suppliers/lists_controller.rb
+++ b/app/controllers/suppliers/lists_controller.rb
@@ -3,7 +3,20 @@ module Suppliers
     # GET /lists
     # GET /lists.json
     def index
-      @lists = List.for_supplier(current_supplier, page: params[:page], per_page: params[:per_page] || 25)
+      if params[:date].present?
+        @date = params[:date].present? ? (Date.parse(params[:date]) rescue Date.today) : Date.today
+        @time = @date.to_time(:utc)
+        @start_time = @time.beginning_of_day
+        @end_time = @time.end_of_day
+        if current_supplier.night_offset.present?
+          @start_time += current_supplier.night_offset.to_f.hours
+          @end_time += current_supplier.night_offset.to_f.hours
+        end
+        @lists  = List.for_supplier_created_at current_supplier, @start_time..@end_time
+        @lists.include_relation(:table) # for number
+      else
+        @lists = List.for_supplier(current_supplier, page: params[:page], per_page: params[:per_page] || 25)
+      end
       @lists.include_relation(:table)
 
       respond_to do |format|
diff --git a/app/serializers/list_serializer.rb b/app/serializers/list_serializer.rb
index 69fe9251..609518f1 100644
--- a/app/serializers/list_serializer.rb
+++ b/app/serializers/list_serializer.rb
@@ -1,7 +1,7 @@
 class ListSerializer < Qwaiter::Serializer
   # user ids for facebook pictures
   #embed :ids
-  attributes :state, :needs_help, :needs_payment, :user_requests_closing, :is_paid, :price, :table_id, :table_number, :section_id, :user_ids, :supplier_id #, :has_active_orders
+  attributes :state, :needs_help, :needs_payment, :user_requests_closing, :is_paid, :price, :table_id, :table_number, :section_id, :user_ids, :supplier_id, :closed_at #, :has_active_orders
 
   #def has_active_orders
     #object.has_active_orders?
diff --git a/app/serializers/user_extended_list_serializer.rb b/app/serializers/user_extended_list_serializer.rb
index 8f1d4533..abc3a052 100644
--- a/app/serializers/user_extended_list_serializer.rb
+++ b/app/serializers/user_extended_list_serializer.rb
@@ -10,7 +10,7 @@ class UserExtendedListSerializer < Qwaiter::Serializer
   self.root = :list
   embed :ids, include: true
   attributes :extended_version, :state, :needs_help, :needs_payment, :user_requests_closing, :is_paid, :price,
-    :table_id, :table_number, :section_id, :user_ids, :supplier_id
+    :table_id, :table_number, :section_id, :user_ids, :supplier_id, :closed_at
     #:supplier_orders_in_process_count, :supplier_orders_placed_count
 
   def has_active_orders
diff --git a/app/serializers/user_list_serializer.rb b/app/serializers/user_list_serializer.rb
index 43c51412..c1c4e565 100644
--- a/app/serializers/user_list_serializer.rb
+++ b/app/serializers/user_list_serializer.rb
@@ -1,7 +1,7 @@
 class UserListSerializer < Qwaiter::Serializer
   # user ids for facebook pictures
   #embed :ids
-  attributes :state, :needs_help, :needs_payment, :user_requests_closing, :is_paid, :price, :table_id, :table_number, :section_id, :user_ids, :supplier_name
+  attributes :state, :needs_help, :needs_payment, :user_requests_closing, :is_paid, :price, :table_id, :table_number, :section_id, :user_ids, :supplier_name, :closed_at
 
   #def has_active_orders
     #object.has_active_orders?
diff --git a/app/views/suppliers/application/_error_messages.html.slim b/app/views/suppliers/application/_error_messages.html.slim
index 5c3a5704..b908f77e 100644
--- a/app/views/suppliers/application/_error_messages.html.slim
+++ b/app/views/suppliers/application/_error_messages.html.slim
@@ -1,6 +1,5 @@
 -if target.errors.any?
-  .alert.alert-error
-    button type="button" class="close" data-dismiss="alert" &times;
+  .alert.alert-error.alert-box.alert
     h4 data-t="helpers.forms.errors.title" data-t-attributes=%[{"count":#{target.errors.count}}] = t('helpers.forms.errors.title', :count => target.errors.count)
     ul
       - for message in target.errors.full_messages
diff --git a/app/views/suppliers/lists/_lists_table.html.slim b/app/views/suppliers/lists/_lists_table.html.slim
index a9b4cc5b..114c4b6a 100644
--- a/app/views/suppliers/lists/_lists_table.html.slim
+++ b/app/views/suppliers/lists/_lists_table.html.slim
@@ -13,13 +13,16 @@ table.table
     - lists.each do |list|
       tr
         td= link_to list.state, [:suppliers, list]
-        td=show_boolean list.needs_help
-        td=show_boolean list.needs_payment
+        td.boolean.needs_help
+          span data-boolean=list.needs_help.to_s
+        td.boolean.needs_payment
+          span data-boolean=list.needs_payment.to_s
         td.timestamp data-time=list.closed_at.try(:utc).try(:iso8601)
         td= link_to_if list.table.present?, list.table_number, [:suppliers, list.table]
         td.currency= list.price.present? ? currency(list.price) : '...'
         td.timestamp data-time=list.created_at.utc.iso8601
         td.actions
-          = link_to t('helpers.links.edit'), [:edit, :suppliers, list], class: 'btn btn-mini', data: {t: 'helpers.links.edit'}
-          '
-          = link_to t("helpers.links.destroy"), [:suppliers, list], method: :delete, data: {confirm: are_you_sure? }, class: 'btn btn-mini btn-danger', data: {t: 'helpers.links.destroy'}
+          = link_to [:edit, :suppliers, list], class: 'table-edit' do
+            span data-title="helpers.links.edit"
+          = link_to [:suppliers, list], method: :delete, data: {confirm: are_you_sure? }, class: 'table-destroy' do
+            span data-title="helpers.links.destroy"
diff --git a/app/views/suppliers/lists/index.html.slim b/app/views/suppliers/lists/index.html.slim
index 0d3fa024..777c0ea4 100644
--- a/app/views/suppliers/lists/index.html.slim
+++ b/app/views/suppliers/lists/index.html.slim
@@ -1,5 +1,7 @@
-div.page-header= title :index, List
-.well
+- content_for :head do
+  = javascript_include_tag 'supplier/app/application'
+/div.page-header= title :index, List
+/.well
   - if @lists.any?
     = paginate @lists
     = render 'lists_table', lists: @lists
diff --git a/app/views/suppliers/lists/show.html.slim b/app/views/suppliers/lists/show.html.slim
index c5029bb3..22bc91ab 100644
--- a/app/views/suppliers/lists/show.html.slim
+++ b/app/views/suppliers/lists/show.html.slim
@@ -4,6 +4,11 @@ dl.dl-horizontal
   dd= l @list.created_at, format: :short
   dt= t('supplier.lists.show.users')
   dd= @list.users.map(&:supplier_name).join(', ')
+.display-row
+  .display-label
+    span data-t='attributes.list.created_at'
+  .display-field
+    span data-time=@list.created_at.iso8601
 .well
   table#list-table.table.list-table
     thead
diff --git a/app/views/suppliers/products/show.html.slim b/app/views/suppliers/products/show.html.slim
index 2d158321..7649fef3 100644
--- a/app/views/suppliers/products/show.html.slim
+++ b/app/views/suppliers/products/show.html.slim
@@ -1,19 +1,25 @@
 - model_class = Product
 .page-header= title :show, @product
 
-dl.dl-horizontal.show-list
-  dt= model_class.human_attribute_name(:name)
-  dd= @product.name
-  dt= model_class.human_attribute_name(:code)
-  dd= @product.code
-  dt= model_class.human_attribute_name(:price)
-  dd=currency @product.price
-  dt= ProductCategory.model_name.human_plural
-  dd= @product.category_links(namespace: :suppliers)
+.display-row
+  .display-label
+    span data-t='attributes.product.name'
+  .display-field
+    span= @product.name
+.display-row
+  .display-label
+    span data-t='attributes.product.code'
+  .display-field
+    span= @product.code
+.display-row
+  .display-label
+    span data-t='attributes.product.price'
+  .display-field
+    span=currency @product.price
+.display-row
+  .display-label
+    span data-t='models.plural.product_category'
+  .display-field
+    span= @product.category_links(namespace: :suppliers)
 
-.form-actions
-  = link_to t("helpers.links.back"), suppliers_products_path, class: 'btn'
-  '
-  = link_to t('helpers.links.edit'), [:edit, :suppliers, @product], class: 'btn'
-  '
-  = link_to t("helpers.links.destroy"), [:suppliers, @product], method: :delete, data: {confirm: are_you_sure? }, class: 'btn btn-danger'
+= supplier_form_actions :index, :edit, :destroy, object: @product, for: :products
diff --git a/app/views/suppliers/sections/_form.html.slim b/app/views/suppliers/sections/_form.html.slim
index 8cdf6ed7..bd9342c4 100644
--- a/app/views/suppliers/sections/_form.html.slim
+++ b/app/views/suppliers/sections/_form.html.slim
@@ -1,16 +1,19 @@
 -# DEPRICATED
 = form_for [:suppliers, @section], html: {class: 'form-horizontal' } do |f|
   = render 'error_messages', target: @section
-  .control-group class=(@section.errors[:title].any? ? 'error' : nil)
-    = f.label :title, class: 'control-label'
-    .controls
-      = f.text_field :title, class: 'text_field'
-  .control-group class=(@section.errors[:width].any? ? 'error' : nil)
-    = f.label :width, class: 'control-label'
-    .controls
-      = f.text_field :width, class: ['text_field', :numeric]
-  .control-group class=(@section.errors[:height].any? ? 'error' : nil)
-    = f.label :height, class: 'control-label'
-    .controls
-      = f.text_field :height, class: ['text_field', :numeric]
+  .form-row class=(@section.errors[:title].any? ? 'error' : nil)
+    .form-label
+      = f.label :title
+    .form-field
+      = f.text_field :title
+  .form-row class=(@section.errors[:width].any? ? 'error' : nil)
+    .form-label
+      = f.label :width
+    .form-field
+      = f.number_field :width
+  .form-row class=(@section.errors[:height].any? ? 'error' : nil)
+    .form-label
+      = f.label :height
+    .form-field
+      = f.number_field :height
   = f.supplier_form_actions
diff --git a/app/views/suppliers/sections/index.html.slim b/app/views/suppliers/sections/index.html.slim
index e1518319..606bac14 100644
--- a/app/views/suppliers/sections/index.html.slim
+++ b/app/views/suppliers/sections/index.html.slim
@@ -1,6 +1,8 @@
-- model_class = Section
-.page-header= title :index, model_class
-- if @sections.any?
+/- model_class = Section
+/.page-header= title :index, model_class
+- content_for :head do
+  = javascript_include_tag 'supplier/app/application'
+/- if @sections.any?
   table.table
     thead
       tr
@@ -19,9 +21,10 @@
           td.numeric= section.width
           td.numeric= section.height
           td.actions
-            = link_to t('supplier.tables.qr_codes.link'), qr_codes_suppliers_tables_path(section_id: section.id), class: 'btn btn-mini btn-info', data: {t: 'tables.qr_codes.link'}
-            '
-            = link_to t("helpers.links.destroy"), [:suppliers, section], method: :delete, data: {confirm: are_you_sure?, t: 'helpers.links.destroy'}, class: 'btn btn-mini btn-danger'
-- else
+            = link_to polymorphic_path([:qr_codes, :suppliers, :tables], section_id: section.id), class: 'table-qr-codes' do
+              span data-title="helpers.links.qr_codes"
+            = link_to [:suppliers, section], method: :delete, data: {confirm: are_you_sure? }, class: 'table-destroy' do
+              span data-title="helpers.links.destroy"
+/- else
   = no_content_given model_class
-= supplier_form_actions :new, for: :sections
+/= supplier_form_actions :new, for: :sections
diff --git a/app/views/suppliers/tables/_form.html.slim b/app/views/suppliers/tables/_form.html.slim
index 7b109dcb..78727921 100644
--- a/app/views/suppliers/tables/_form.html.slim
+++ b/app/views/suppliers/tables/_form.html.slim
@@ -1,11 +1,13 @@
 = form_for [:suppliers, @table], html: {class: 'form-horizontal' } do |f|
   = render 'error_messages', target: @table
-  .control-group class=(@table.errors[:number].any? ? 'error' : nil)
-    = f.label :number, class: 'control-label', data: {t: 'attributes.table.number'}
-    .controls
-      = f.text_field :number, class: 'text_field'
-  .control-group class=(@table.errors[:section_id].any? ? 'error' : nil)
-    = f.label :section_id, Section.model_name.human, class: 'control-label', data: {t: 'models.section'}
-    .controls
+  .form-row class=(@table.errors[:number].any? ? 'error' : nil)
+    .form-label
+      = f.label :number
+    .form-field
+      = f.number_field :number
+  .form-row class=(@table.errors[:section_id].any? ? 'error' : nil)
+    .form-label
+      = f.label :section_id, Section.model_name.human, class: 'control-label', data: {t: 'models.section'}
+    .form-field
       = f.collection_select :section_id, current_supplier.sections, :id, :title, include_blank: "[#{t('supplier.tables.has_no_section')}]"
   = f.supplier_form_actions
diff --git a/app/views/suppliers/tables/index.html.slim b/app/views/suppliers/tables/index.html.slim
index 0337aef8..f9796457 100644
--- a/app/views/suppliers/tables/index.html.slim
+++ b/app/views/suppliers/tables/index.html.slim
@@ -6,7 +6,7 @@ div.page-header= title :index, model_class
   label.number for="filter-to_number" data-t="attributes.table.to_number"
   input#filter-to_number.number type="number" size=4 value=params[:to_number] name="to_number"
   '
-  = submit_tag 'Filter'
+  = submit_tag 'Filter', class: 'apply-filter'
 - if @tables.any?
   = paginate @tables
   table.table
diff --git a/app/views/suppliers/tables/show.html.slim b/app/views/suppliers/tables/show.html.slim
index aa1eb74d..1f18b083 100644
--- a/app/views/suppliers/tables/show.html.slim
+++ b/app/views/suppliers/tables/show.html.slim
@@ -1,10 +1,13 @@
-- model_class = Table
 .page-header= title :show, @table
-
-dl.dl-horizontal.show-list
-  dt= model_class.human_attribute_name(:number)
-  dd= @table.number
-  - if @table.section.present?
-    dt= Section.model_name.human
-    dd= link_to @table.section.title, [:suppliers, @table.section]
+.display-row
+  .display-label
+    span data-t='attributes.table.number'
+  .display-field
+    span= @table.number
+- if @table.section.present?
+  .display-row
+    .display-label
+      span data-t='models.section'
+    .display-field
+      span= link_to @table.section.title, [:suppliers, @table.section]
 = supplier_form_actions :index, :edit, :destroy, object: @table, for: :tables
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9a850b38..ad792bbc 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -21,6 +21,7 @@ en:
       destroy: Delete
       back: Back
       cancel: Cancel
+      index: Overview
     forms:
       errors:
         title: There are problems found during saving (%{count})
diff --git a/config/locales/nl.yml b/config/locales/nl.yml
index 5c52b950..a7203b86 100644
--- a/config/locales/nl.yml
+++ b/config/locales/nl.yml
@@ -20,6 +20,7 @@ nl:
       destroy: Verwijder
       back: Terug
       cancel: Terug
+      index: Overzicht
     forms:
       errors:
         title: 'De actie kon niet worden uitgevoerd. %{count} fout(en)'
diff --git a/config/locales/supplier.en.yml b/config/locales/supplier.en.yml
index 871aace9..4d57d84b 100644
--- a/config/locales/supplier.en.yml
+++ b/config/locales/supplier.en.yml
@@ -32,6 +32,7 @@ en:
     list:
       is_helped_button: Question answered!
       close_list: Close!
+      none_found: 'No ${models.plural.list|downcase}'
     order:
       being_processed: 'In process!'
       being_served: 'Is delivered!'
@@ -89,3 +90,9 @@ en:
       preview:
         header: 'Select moment to preview products'
         description: 'Products visible to customers at chosen moment:'
+    state:
+      list:
+        active: 'Active'
+        closed: 'Closed'
+    datepicker:
+      no_date: 'Pick a date'
diff --git a/config/locales/supplier.nl.yml b/config/locales/supplier.nl.yml
index a5e1281f..b2bf7a4e 100644
--- a/config/locales/supplier.nl.yml
+++ b/config/locales/supplier.nl.yml
@@ -32,6 +32,7 @@ nl:
     list:
       is_helped_button: Vraag beantwoord!
       close_list: Afsluiten!
+      none_found: 'Geen ${models.plural.list|downcase}'
     order:
       being_processed: 'Ben bezig!'
       being_served: 'Ik kom het brengen!'
@@ -89,3 +90,9 @@ nl:
       preview:
         header: 'Selecteer tijdstip voor voorbeeld'
         description: 'Producten op gekozen tijdstip:'
+    state:
+      list:
+        active: 'Actief'
+        closed: 'Afgesloten'
+    datepicker:
+      no_date: 'Selecteer een datum'