diff --git a/app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee b/app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee
new file mode 100644
index 00000000..2827ddab
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/components/dropdown_link.js.coffee
@@ -0,0 +1,12 @@
+Qsupplier.App.DropdownLink = Ember.Component.extend
+  templateName: 'dropdown_link_view'
+  active: false
+  classNames: ['dropdown-container']
+  classNameBindings: ['active']
+  didInsertElement: ->
+    @$('.dropdown-trigger').click (e)=>
+      e.preventDefault()
+      @set 'active', !@get('active')
+
+
+
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 398a4ff2..a686fe5e 100644
--- a/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
+++ b/app/assets/javascripts/supplier/app/controllers/section_controller.js.coffee
@@ -1,17 +1,18 @@
 Qsupplier.App.SectionController = Ember.ObjectController.extend
   needs: ['application', 'sections', 'section'] #wtf? section, otherwise an Ember error
   editmode: false
-  makeEditable: -> @set('editmode', true)
-  finishEditable: ->
-    @set('editmode', false)
-    @get('model').save()
-  addTables: ->
-    $('#add-tables-modal').modal()
-  arrangeTables: ->
-    $('#arrange-tables-modal').modal()
   actions:
     markListAsHelped: (list) -> list.is_helped() if list
     closeList: (list)-> list.close() if list
+    makeEditable: -> @set('editmode', true)
+    finishEditable: ->
+      @set('editmode', false)
+      @get('model').save()
+    addTables: ->
+      debugger
+      $('#add-tables-modal').modal()
+    arrangeTables: ->
+      $('#arrange-tables-modal').modal()
   textures: ['wood1', 'wood2']
 
   sections: (-> @get('controllers.sections.model')).property('controllers.sections.model')
diff --git a/app/assets/javascripts/supplier/app/templates/dropdown_link_view.emblem b/app/assets/javascripts/supplier/app/templates/dropdown_link_view.emblem
new file mode 100644
index 00000000..8ff78d58
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/templates/dropdown_link_view.emblem
@@ -0,0 +1,5 @@
+a.dropdown-trigger.button.tiny.dropdown href="#"
+  span.dropdown-trigger-text= view.title
+  /span.dropdown-trigger-icon
+.dropdown-list-container
+  = yield
diff --git a/app/assets/javascripts/supplier/app/templates/section.emblem b/app/assets/javascripts/supplier/app/templates/section.emblem
index 7004479d..b46f96bc 100644
--- a/app/assets/javascripts/supplier/app/templates/section.emblem
+++ b/app/assets/javascripts/supplier/app/templates/section.emblem
@@ -12,23 +12,24 @@
         each texture in textures
           li
             a{ action setTexture texture } {{texture}}
-    a.tiny.button.dropdown href="#" data-dropdown="section-action-list" Action
+    /a.tiny.button.dropdown.section-actions-menu-header href="#" data-dropdown="section-action-list" Action
     /button.btn.dropdown-toggle data-toggle="dropdown"
       span Action
       span.caret
-    ul#section-action-list.f-dropdown data-dropdown-content=true
-      li
-        a{action addTables} {{t 'section.add_tables.button_label'}}
-      li
-        a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}}
-      li
-        a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}}
-      li
-        a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}}
-    view Ember.TextField valueBinding="title" class="section-edit-title-field"
-    view Ember.TextField valueBinding="width" class="dimension section-edit-width-field"
-    span x
-    view Ember.TextField valueBinding="height" class="dimension section-edit-height-field"
+    Qsupplier.App.DropdownLink title="Action"
+      ul
+        li
+          a{action addTables} {{t 'section.add_tables.button_label'}}
+        li
+          a{action arrangeTables} {{t 'section.arrange_tables.modal.title'}}
+        li
+          a href="{{route 'qr_codes_suppliers_tables_path' section_id=id}}" {{t 'tables.qr_codes.link'}}
+        li
+          a href="{{route 'suppliers_section_path' id}}" data-method="delete" data-confirm="{{t 'helpers.links.are_you_sure' bare=true}}" {{t 'helpers.links.destroy'}}
+    Ember.TextField valueBinding="title" class="section-edit-title-field"
+    Qsupplier.App.NumberField valueBinding="width" class="dimension section-edit-width-field"
+    span.fa.fa-lg.fa-times
+    Qsupplier.App.NumberField valueBinding="height" class="dimension section-edit-height-field"
     a.section-normal-mode-button{ action finishEditable }: span
   else
     a.section-edit-mode-button{ action makeEditable }: span
diff --git a/app/assets/javascripts/supplier/app/views/number_field.js.coffee b/app/assets/javascripts/supplier/app/views/number_field.js.coffee
new file mode 100644
index 00000000..4ef3f300
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/views/number_field.js.coffee
@@ -0,0 +1,3 @@
+Qsupplier.App.NumberField = Ember.TextField.extend
+  type: 'number'
+  attributeBindings: ['min', 'max', 'step']
diff --git a/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee b/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee
index 22326c4f..408e867d 100644
--- a/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee
+++ b/app/assets/javascripts/supplier/app/views/section_table_view.js.coffee
@@ -45,7 +45,7 @@ Qsupplier.App.SectionTableView = Ember.View.extend DragNDrop.Draggable,
   #click: ->
     #@$('.table-actions').show()
   didInsertElement: ->
-    @$el = @$(@get('element'))
+    @$el = @$()
     #@$('.table-actions').hide()
     #title = @$('.table-actions .title').clone()
     content = @$('.table-actions')
diff --git a/app/assets/javascripts/supplier/app/views/section_view.js.coffee b/app/assets/javascripts/supplier/app/views/section_view.js.coffee
new file mode 100644
index 00000000..10be8251
--- /dev/null
+++ b/app/assets/javascripts/supplier/app/views/section_view.js.coffee
@@ -0,0 +1,21 @@
+#Qsupplier.App.SectionView = Ember.View.extend {}
+  #initFoundation: (->
+    #debugger
+    #@$().foundation()
+  #).on('didInsertElement')
+  #didInsertElement: ->
+    #@$().foundation()
+    #debugger
+    #true
+#$(document).on 'load', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true
+#$(document).on 'change', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true
+#$(document).on 'ready', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true
+#$(document).on 'click', '[data-dropdown]', (a,b,c)->
+  #debugger
+  #true
diff --git a/app/assets/javascripts/supplier/foundation1/application.js.erb b/app/assets/javascripts/supplier/foundation1/application.js.erb
index 5f2b56e9..f00add00 100644
--- a/app/assets/javascripts/supplier/foundation1/application.js.erb
+++ b/app/assets/javascripts/supplier/foundation1/application.js.erb
@@ -2,7 +2,7 @@
 //= require jquery_ujs
 //= require jquery.ui.sortable
 //= require vendor/modernizr
-//= require foundation
+// require foundation FOUNDATION 5 JAVASCRIPT IMPLEMENTATIONS AND EMBER ARE NOT COMPATIBLE, FOUNDATION IS TOO SIMPLISTIC AT THE MOMENT AND DESTROYS DOM EVENTS
 //= require js-routes
 //= require translations
 //= require qwaiter
@@ -20,8 +20,6 @@ var Qstorage = localStorage;
 $.extend($translations.en, <%= I18n.t('supplier', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('supplier', locale: :nl).to_json %>);
 
-$(document).foundation();
-
 String.prototype.capitalize = function() {
     return this.charAt(0).toUpperCase() + this.slice(1);
 }
diff --git a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass b/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass
index c969d522..2e68bd74 100644
--- a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass
+++ b/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass
@@ -2,7 +2,7 @@
   font-size: 24px
   padding: 4px 0px
 .section-manage-tables
-  margin: -32px 6px 4px 6px
+  margin: -26px 6px 4px 6px
   min-width: 470px
   text-align: right
   .section-edit-title-field
@@ -10,10 +10,10 @@
     width: 120px
   .section-edit-width-field
     display: inline-block
-    width: 40px
+    width: 52px
   .section-edit-height-field
     display: inline-block
-    width: 40px
+    width: 52px
   #section-action-list
     text-align: left
 .section-tables-container
@@ -28,7 +28,9 @@
     height: 48px
     width: 83px
     background-repeat: no-repeat
+    box-shadow: 5px 5px 5px #888888
     color: black
+    border-radius: 3px
     a
       color: black
     //background-image: image-url('icons/section-table.png')
diff --git a/app/assets/stylesheets/supplier/foundation1/_ember_dropdown.css.sass b/app/assets/stylesheets/supplier/foundation1/_ember_dropdown.css.sass
new file mode 100644
index 00000000..2d5bd42d
--- /dev/null
+++ b/app/assets/stylesheets/supplier/foundation1/_ember_dropdown.css.sass
@@ -0,0 +1,49 @@
+.dropdown-container
+  position: relative
+  display: inline-block
+  .button.dropdown-trigger
+    padding-top: 4px
+    padding-bottom: 4px
+    margin-bottom: 0
+    .dropdown-trigger-icon
+      @extend .fa
+      @extend .fa-lg
+      @extend .fa-caret-left
+      margin-right: 6px
+    
+  .dropdown-list-container
+    display: none
+    text-align: left
+    background-color: white
+    position: absolute
+    right: 0
+    margin: 0
+    min-width: 160px
+    z-index: 542
+    margin-top: 7px
+    border-radius: 4px
+
+    &:after
+      border: solid transparent
+      content: " "
+      height: 0
+      width: 0
+      position: absolute
+      pointer-events: none
+      border-width: 6px
+      border-bottom-color: white
+      bottom: 100%
+      right: 30px
+      
+      
+    ul
+      list-style: none
+  //&:hover
+    //.dropdown-list-container
+      //display: block
+  &.active
+    .dropdown-list-container
+      display: block
+    .button.dropdown-trigger
+      .dropdown-trigger-icon
+        @extend .fa-caret-down
diff --git a/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass b/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass
index b0b28a61..4f987254 100644
--- a/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass
+++ b/app/assets/stylesheets/supplier/foundation1/_qsections.css.sass
@@ -8,3 +8,15 @@
     @extend .fa
     @extend .fa-lg
     @extend .fa-save
+.section-actions-menu-header
+  padding-top: 4px
+  padding-bottom: 4px
+.section-manage-tables
+  .dropdown-container
+    margin-right: 10px
+  input
+    height: auto
+    padding-top: 4px
+    padding-bottom: 4px
+    &.section-edit-title-field
+      margin-right: 10px
diff --git a/app/assets/stylesheets/supplier/foundation1/_qstructure.css.sass b/app/assets/stylesheets/supplier/foundation1/_qstructure.css.sass
index 3eed2242..11aeef45 100644
--- a/app/assets/stylesheets/supplier/foundation1/_qstructure.css.sass
+++ b/app/assets/stylesheets/supplier/foundation1/_qstructure.css.sass
@@ -15,7 +15,7 @@ $side-spacing: 0px
 .draggable
   cursor: move !important
 input.dimension
-  width: 40px
+  width: 52px
 .location_picker_map
   width: 600px
   height: 500px
diff --git a/app/assets/stylesheets/supplier/foundation1/application.css.sass b/app/assets/stylesheets/supplier/foundation1/application.css.sass
index 0fd94b43..585262d9 100644
--- a/app/assets/stylesheets/supplier/foundation1/application.css.sass
+++ b/app/assets/stylesheets/supplier/foundation1/application.css.sass
@@ -17,3 +17,4 @@
 @import ./qtables
 @import ./section_tab_headers
 @import ./qlists
+@import ./ember_dropdown