diff --git a/app/assets/javascripts/darkswarm/all.js.coffee b/app/assets/javascripts/darkswarm/all.js.coffee
index 4b8269dedd..96486a4a69 100644
--- a/app/assets/javascripts/darkswarm/all.js.coffee
+++ b/app/assets/javascripts/darkswarm/all.js.coffee
@@ -8,7 +8,7 @@
 #= require ./shop
 #= require_tree .
 
-#$ ->
-  #$(document).foundation()
+$ ->
+  $(document).foundation()
 
 
diff --git a/app/assets/stylesheets/darkswarm/header.css.scss b/app/assets/stylesheets/darkswarm/header.css.sass
similarity index 50%
rename from app/assets/stylesheets/darkswarm/header.css.scss
rename to app/assets/stylesheets/darkswarm/header.css.sass
index e7df510621..a33fa1b30d 100644
--- a/app/assets/stylesheets/darkswarm/header.css.scss
+++ b/app/assets/stylesheets/darkswarm/header.css.sass
@@ -1,3 +1,3 @@
 /*body { background: #ff0000; }*/
-
-
+nav.top-bar
+  margin-bottom: 0px
diff --git a/app/assets/stylesheets/darkswarm/overrides.css.sass b/app/assets/stylesheets/darkswarm/overrides.css.sass
new file mode 100644
index 0000000000..fcec6b455d
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/overrides.css.sass
@@ -0,0 +1,2 @@
+.row
+  max-width: 74em
diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass
new file mode 100644
index 0000000000..7637ff28c6
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/shop.css.sass
@@ -0,0 +1,59 @@
+product
+  display: block 
+
+
+shop
+  color: #999
+  display: block
+  navigation
+    display: block
+    background: #F4EBDE
+    distributor.details
+      display: block
+      height: 150px
+      select
+        width: 200px
+      position: relative
+      img, h3
+        display: inline
+      location
+        display: block
+        padding-left: 28px
+
+      ordercycle
+        display: block
+        position: absolute
+        right: 20px
+        top: 12px
+
+        form.custom 
+          width: 400px
+          strong
+            line-height: 37px
+            padding-right: 8px
+          closing
+            font-size: 80%
+            display: block
+          .custom.dropdown
+            width: 200px
+            display: inline-block
+            background: transparent
+            font-weight: bold
+            border-color: #888
+
+  products
+    display: block
+    padding-top: 36px
+    table
+      width: 100%
+      font-size: 1.2em
+      border-collapse: collapse
+      border: none
+      td, th
+        background: #fff
+        border: 1px solid #bbb
+        border-left: 0px
+        border-right: 0px
+      
+
+
diff --git a/app/assets/stylesheets/darkswarm/typography.css.sass b/app/assets/stylesheets/darkswarm/typography.css.sass
new file mode 100644
index 0000000000..7b4ba55d7c
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/typography.css.sass
@@ -0,0 +1,29 @@
+@font-face
+  font-family: 'AvenirBla_IE'
+  src: url("/AveniBla.eot") format("opentype")
+
+@font-face
+  font-family: 'AvenirBla'
+  src: url("/AvenirLTStd-Black.otf") format("opentype")
+
+@font-face
+  font-family: 'AvenirMed_IE'
+  src: url("/AveniMed.eot") format("opentype")
+
+@font-face
+  font-family: 'AvenirMed'
+  src: url("/AvenirLTStd-Medium.otf") format("opentype")
+        
+body 
+  font-family: "AvenirMed_IE", "AvenirMed"
+
+h1, h2, h3, h4, h5, h6
+  color: #666
+  font-family: "AvenirMed_IE", "AvenirMed"
+  
+// These selectors match the default Foundation selectors
+// For clean overriden magic
+table tr th, table tr td
+  color: #666
+table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr td 
+  color: #666
diff --git a/app/views/shop/_order_cycles.html.haml b/app/views/shop/_order_cycles.html.haml
index d99ec34d15..cc50a90137 100644
--- a/app/views/shop/_order_cycles.html.haml
+++ b/app/views/shop/_order_cycles.html.haml
@@ -9,8 +9,14 @@
     = render partial: "shop/last_order_cycle"
 
   - else
-    Ready for:
-    %select{"ng-model" => "order_cycle.order_cycle_id", 
-            "ng-init" => "order_cycle.order_cycle_id = #{current_order_cycle.andand.id}",
-            "ng-change" => "changeOrderCycle()",
-            "ng-options" => "c for c in #{@order_cycles.map {|oc| oc.id}.to_json}"}
+    %form.custom
+      %strong Ready for:
+      %select{"ng-model" => "order_cycle.order_cycle_id", 
+              "ng-init" => "order_cycle.order_cycle_id = #{current_order_cycle.andand.id}",
+              "ng-change" => "changeOrderCycle()",
+              "ng-options" => "oc.id as oc.time for oc in #{@order_cycles.map {|oc| {time: pickup_time(oc), id: oc.id}}.to_json}"}
+
+      %closing
+        %img{src: "/icon/goes/here"}
+        Orders close
+        %strong= current_order_cycle.orders_close_at.strftime "%A %m"
diff --git a/app/views/shop/_products.html.haml b/app/views/shop/_products.html.haml
new file mode 100644
index 0000000000..d37ae6d4b4
--- /dev/null
+++ b/app/views/shop/_products.html.haml
@@ -0,0 +1,22 @@
+%products{"ng-controller" => "ProductsCtrl"}
+  %table
+    %thead
+      %th Item
+      %th Description
+      %th Variant
+      %th QTY
+      %th Bulk
+      %th Price
+    %tr.product{"ng-repeat" => "product in data.products "}
+      %td {{ product.product.name }}
+      %td {{ product.product.description }}
+      %td {{ product.master.options_text }}
+      %td Quantity thing
+      %td.group_buy{"ng-class" => "{enabled: product.group_buy}"} 
+        Not available
+      %td.price
+        %small from
+        $ {{ product.price }}
+
+
+  %pre {{ data.products | json }}
diff --git a/app/views/shop/show.html.haml b/app/views/shop/show.html.haml
index 19467e091b..33c02ccf58 100644
--- a/app/views/shop/show.html.haml
+++ b/app/views/shop/show.html.haml
@@ -1,17 +1,17 @@
 %shop{"ng-app" => "Shop"}
-  = @distributor.name
+  %navigation
+    %distributor.details.row
+      %img{src: "/route/to/distributor/icon"}
+      %h3
+        = @distributor.name
+      %location= @distributor.address.city
+      = render partial: "shop/order_cycles"
 
-  = render partial: "shop/order_cycles"
-
-  %description
-    = @distributor.long_description.andand.html_safe
-
-  %products{"ng-controller" => "ProductsCtrl"}
-    %product{"ng-repeat" => "product in data.products "}
-      {{ product.product.name }}
-      {{ product.product.description }}
-
-    %pre {{ data.products | json }}
+      %description
+        = @distributor.long_description.andand.html_safe
+    
+  %products.row
+    = render partial: "shop/products"
 
   = render partial: "enterprises/contact_us"
   = render partial: "enterprises/about_us"
diff --git a/public/AveniBla.eot b/public/AveniBla.eot
new file mode 100644
index 0000000000..1ae59a3381
Binary files /dev/null and b/public/AveniBla.eot differ
diff --git a/public/AveniMed.eot b/public/AveniMed.eot
new file mode 100644
index 0000000000..61c35da54b
Binary files /dev/null and b/public/AveniMed.eot differ
diff --git a/public/AvenirLTStd-Black.otf b/public/AvenirLTStd-Black.otf
new file mode 100644
index 0000000000..1a934a2af3
Binary files /dev/null and b/public/AvenirLTStd-Black.otf differ
diff --git a/public/AvenirLTStd-Medium.otf b/public/AvenirLTStd-Medium.otf
new file mode 100644
index 0000000000..e902718152
Binary files /dev/null and b/public/AvenirLTStd-Medium.otf differ