diff --git a/app/views/spree/admin/zones/_country_member.html.erb b/app/views/spree/admin/zones/_country_member.html.erb
deleted file mode 100644
index 8294b5d151..0000000000
--- a/app/views/spree/admin/zones/_country_member.html.erb
+++ /dev/null
@@ -1,5 +0,0 @@
-
- <%= f.hidden_field :zoneable_type, :value => 'Spree::Country' %>
- <%= f.collection_select(:zoneable_id, @countries, :id, :name, {:include_blank => true}, {:class => 'select2 fullwidth'}) %>
- <%= remove_nested f %>
-
diff --git a/app/views/spree/admin/zones/_country_member.html.haml b/app/views/spree/admin/zones/_country_member.html.haml
new file mode 100644
index 0000000000..f09ba19efc
--- /dev/null
+++ b/app/views/spree/admin/zones/_country_member.html.haml
@@ -0,0 +1,4 @@
+%li
+ = f.hidden_field :zoneable_type, value: 'Spree::Country'
+ = f.collection_select(:zoneable_id, @countries, :id, :name, {include_blank: true}, {class: 'select2 fullwidth'})
+ = remove_nested f
diff --git a/app/views/spree/admin/zones/_form.html.erb b/app/views/spree/admin/zones/_form.html.erb
deleted file mode 100644
index 8d0d9886c3..0000000000
--- a/app/views/spree/admin/zones/_form.html.erb
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
\ No newline at end of file
diff --git a/app/views/spree/admin/zones/_form.html.haml b/app/views/spree/admin/zones/_form.html.haml
new file mode 100644
index 0000000000..3fae4a2ee6
--- /dev/null
+++ b/app/views/spree/admin/zones/_form.html.haml
@@ -0,0 +1,23 @@
+.alpha.six.columns
+ %fieldset.no-border-bottom
+ %legend{align: "center"}= t("spree.general_settings")
+ = zone_form.field_container :name do
+ = zone_form.label :name, t("spree.name")
+ %br/
+ = zone_form.text_field :name, class: 'fullwidth'
+ = zone_form.field_container :description do
+ = zone_form.label :description, t("spree.description")
+ %br/
+ = zone_form.text_field :description, class: 'fullwidth'
+ .field
+ = zone_form.check_box :default_tax
+ = label_tag t("spree.default_tax_zone")
+ .field
+ = label_tag t("spree.type")
+ %ul
+ %li
+ = zone_form.radio_button('kind', 'country', { id: 'country_based' })
+ = label_tag :country_based, t("spree.country_based")
+ %li
+ = zone_form.radio_button('kind', 'state', { id: 'state_based' })
+ = label_tag :state_based, t("spree.state_based")
diff --git a/app/views/spree/admin/zones/_member_type.html.erb b/app/views/spree/admin/zones/_member_type.html.erb
deleted file mode 100644
index c28ca0e546..0000000000
--- a/app/views/spree/admin/zones/_member_type.html.erb
+++ /dev/null
@@ -1,19 +0,0 @@
-<%= javascript_tag "var #{type}_member='#{generate_template(zone_form, :zone_members, {:partial => type + "_member"})}';" %>
-
-
-
-
-
diff --git a/app/views/spree/admin/zones/_member_type.html.haml b/app/views/spree/admin/zones/_member_type.html.haml
new file mode 100644
index 0000000000..633067fabc
--- /dev/null
+++ b/app/views/spree/admin/zones/_member_type.html.haml
@@ -0,0 +1,11 @@
+= javascript_tag "var #{type}_member='#{generate_template(zone_form, :zone_members, {:partial => type + "_member"})}';"
+
+.omega.six.columns{id: "#{type}_members"}
+ %fieldset.no-border-bottom
+ %legend{align: "center"}= t("spree.type")
+ %ul.member-list.fields{id: "ul-nested-#{type.dasherize}"}
+ - members_of_type = zone_form.object.zone_members.select { |member| member.zoneable_type && member.zoneable_type == "Spree::#{type.camelize}" }
+ = zone_form.fields_for :zone_members, members_of_type do |member_form|
+ = render partial: "#{type}_member", locals: { f: member_form }
+ .field.align-center
+ = button_link_to t("spree.add_#{type}"), "##{type}_member", { icon: 'icon-plus', id:"nested-#{type.dasherize}" }
diff --git a/app/views/spree/admin/zones/_state_member.html.erb b/app/views/spree/admin/zones/_state_member.html.erb
deleted file mode 100644
index 28e2afe3b5..0000000000
--- a/app/views/spree/admin/zones/_state_member.html.erb
+++ /dev/null
@@ -1,5 +0,0 @@
-
- <%= f.hidden_field :zoneable_type, :value => 'Spree::State' %>
- <%= f.collection_select(:zoneable_id, @states, :id, :name, {:include_blank => true}, {:class => 'select2 fullwidth'}) %>
- <%= remove_nested f %>
-
diff --git a/app/views/spree/admin/zones/_state_member.html.haml b/app/views/spree/admin/zones/_state_member.html.haml
new file mode 100644
index 0000000000..4b917288a7
--- /dev/null
+++ b/app/views/spree/admin/zones/_state_member.html.haml
@@ -0,0 +1,4 @@
+%li.field
+ = f.hidden_field :zoneable_type, value: 'Spree::State'
+ = f.collection_select(:zoneable_id, @states, :id, :name, {include_blank: true}, {class: 'select2 fullwidth'})
+ = remove_nested f
diff --git a/app/views/spree/admin/zones/edit.html.erb b/app/views/spree/admin/zones/edit.html.erb
deleted file mode 100644
index 2b0007b196..0000000000
--- a/app/views/spree/admin/zones/edit.html.erb
+++ /dev/null
@@ -1,23 +0,0 @@
-<%= render :partial => 'spree/admin/shared/configuration_menu' %>
-
-<% content_for :page_title do %>
- <%= Spree.t(:editing_zone) %>
-<% end %>
-
-<% content_for :page_actions do %>
-
- <%= button_link_to Spree.t(:back_to_zones_list), admin_zones_path, :icon => 'icon-arrow-left' %>
-
-<% end %>
-
-<%= render :partial => 'spree/shared/error_messages', :locals => { :target => @zone } %>
-
-<%= form_for [:admin, @zone] do |zone_form| %>
-
-<% end %>
diff --git a/app/views/spree/admin/zones/edit.html.haml b/app/views/spree/admin/zones/edit.html.haml
new file mode 100644
index 0000000000..4ef88128bc
--- /dev/null
+++ b/app/views/spree/admin/zones/edit.html.haml
@@ -0,0 +1,18 @@
+= render partial: 'spree/admin/shared/configuration_menu'
+
+- content_for :page_title do
+ = t("spree.editing_zone")
+
+- content_for :page_actions do
+ %li
+ = button_link_to t("spree.back_to_zones_list"), admin_zones_path, icon: 'icon-arrow-left'
+
+= render partial: 'spree/shared/error_messages', locals: { target: @zone }
+
+= form_for [:admin, @zone] do |zone_form|
+ %fieldset.no-border-top
+ = render partial: 'form', locals: { zone_form: zone_form }
+ = render partial: 'member_type', locals: { type: 'country', zone_form: zone_form }
+ = render partial: 'member_type', locals: { type: 'state', zone_form: zone_form }
+ .clear
+ = render partial: 'spree/admin/shared/edit_resource_links'
diff --git a/app/views/spree/admin/zones/index.html.erb b/app/views/spree/admin/zones/index.html.erb
deleted file mode 100644
index 19b081b19b..0000000000
--- a/app/views/spree/admin/zones/index.html.erb
+++ /dev/null
@@ -1,53 +0,0 @@
-<%= render :partial => 'spree/admin/shared/configuration_menu' %>
-
-<% content_for :page_title do %>
- <%= Spree.t(:zones) %>
-<% end %>
-
-<% content_for :page_actions do %>
-
- <%= button_link_to Spree.t(:new_zone), new_object_url, :icon => 'icon-plus', :id => 'admin_new_zone_link' %>
-
-<% end %>
-
-<%= paginate @zones %>
-
-<% if @zones.empty? %>
-
- <%= Spree.t(:none) %>
-
-<% else %>
-
-
-
-
-
-
-
-
-
- | <%= sort_link @search,:name, Spree.t(:name), :title => 'zones_order_by_name_title' %> |
-
- <%= sort_link @search,:description, Spree.t(:description), {}, {:title => 'zones_order_by_description_title'} %>
- |
- <%= Spree.t(:default_tax) %> |
- |
-
-
-
- <% @zones.each do |zone| %>
-
- | <%=zone.name %> |
- <%=zone.description %> |
- <%=zone.default_tax %> |
-
- <%=link_to_edit zone, :no_text => true %>
- <%=link_to_delete zone, :no_text => true %>
- |
-
- <% end %>
-
-
-<% end%>
-
-<%= paginate @zones %>
diff --git a/app/views/spree/admin/zones/index.html.haml b/app/views/spree/admin/zones/index.html.haml
new file mode 100644
index 0000000000..29c1cd4211
--- /dev/null
+++ b/app/views/spree/admin/zones/index.html.haml
@@ -0,0 +1,41 @@
+= render partial: 'spree/admin/shared/configuration_menu'
+
+- content_for :page_title do
+ = t("spree.zones")
+
+- content_for :page_actions do
+ %li
+ = button_link_to t("spree.new_zone"), new_object_url, icon: 'icon-plus', id: 'admin_new_zone_link'
+
+= paginate @zones
+
+- if @zones.empty?
+ .no-objects-found
+ = t("spree.none")
+
+- else
+ %table#listing_zones.index
+ %colgroup
+ %col{style: "width: 30%"}/
+ %col{style: "width: 40%"}/
+ %col{style: "width: 15%"}/
+ %col{style: "width: 15%"}/
+ %thead
+ %tr
+ %th= sort_link @search,:name, t("spree.name"), title: 'zones_order_by_name_title'
+ %th
+ = sort_link @search,:description, t("spree.description"), {}, {title: 'zones_order_by_description_title'}
+ %th= t("spree.default_tax")
+ %th.actions
+ %tbody
+ - @zones.each do |zone|
+ - tr_class = cycle('odd', 'even')
+ - tr_id = spree_dom_id(zone)
+ %tr{class: tr_class, id: tr_id}
+ %td= zone.name
+ %td= zone.description
+ %td.align-center= zone.default_tax
+ %td.actions
+ = link_to_edit zone, no_text: true
+ = link_to_delete zone, no_text: true
+= paginate @zones
diff --git a/app/views/spree/admin/zones/new.html.erb b/app/views/spree/admin/zones/new.html.erb
deleted file mode 100644
index 36c0c0a2e1..0000000000
--- a/app/views/spree/admin/zones/new.html.erb
+++ /dev/null
@@ -1,21 +0,0 @@
-<%= render :partial => 'spree/admin/shared/configuration_menu' %>
-
-<% content_for :page_title do %>
- <%= Spree.t(:new_zone) %>
-<% end %>
-
-<% content_for :page_actions do %>
-
- <%= button_link_to Spree.t(:back_to_zones_list), spree.admin_zones_path, :icon => 'icon-arrow-left' %>
-
-<% end %>
-
-<%= render :partial => 'spree/shared/error_messages', :locals => { :target => @zone } %>
-
-<%= form_for [:admin, @zone] do |zone_form| %>
- <%= render :partial => 'form', :locals => { :zone_form => zone_form } %>
-
-
-
- <%= render :partial => 'spree/admin/shared/new_resource_links' %>
-<% end %>
diff --git a/app/views/spree/admin/zones/new.html.haml b/app/views/spree/admin/zones/new.html.haml
new file mode 100644
index 0000000000..b6bac9e73b
--- /dev/null
+++ b/app/views/spree/admin/zones/new.html.haml
@@ -0,0 +1,15 @@
+= render partial: 'spree/admin/shared/configuration_menu'
+
+- content_for :page_title do
+ = t("spree.new_zone")
+
+- content_for :page_actions do
+ %li
+ = button_link_to t("spree.back_to_zones_list"), spree.admin_zones_path, icon: 'icon-arrow-left'
+
+= render partial: 'spree/shared/error_messages', locals: { target: @zone }
+
+= form_for [:admin, @zone] do |zone_form|
+ = render partial: 'form', locals: { zone_form: zone_form }
+ .clear
+ = render partial: 'spree/admin/shared/new_resource_links'