diff --git a/app/assets/javascripts/darkswarm/controllers/producer_node_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/producer_node_controller.js.coffee
new file mode 100644
index 0000000000..03b99d7ebb
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/controllers/producer_node_controller.js.coffee
@@ -0,0 +1,9 @@
+Darkswarm.controller "ProducerNodeCtrl", ($scope, Navigation, $location, $anchorScroll) ->
+  $scope.toggle = ->
+    Navigation.navigate $scope.producer.path
+
+  $scope.open = ->
+    $location.path() == $scope.producer.path
+
+  if $scope.open()
+    $anchorScroll()
diff --git a/app/assets/javascripts/darkswarm/controllers/producers_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/producers_controller.js.coffee
new file mode 100644
index 0000000000..1a28b5b107
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/controllers/producers_controller.js.coffee
@@ -0,0 +1,2 @@
+Darkswarm.controller "ProducersCtrl", ($scope, Producers) ->
+  $scope.Producers = Producers
diff --git a/app/assets/javascripts/darkswarm/services/producers.js.coffee b/app/assets/javascripts/darkswarm/services/producers.js.coffee
new file mode 100644
index 0000000000..62a5087642
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/services/producers.js.coffee
@@ -0,0 +1,4 @@
+Darkswarm.factory 'Producers', (producers) ->
+  new class Producers
+    constructor: ->
+      @producers = producers
diff --git a/app/controllers/producers_controller.rb b/app/controllers/producers_controller.rb
index 615f74871c..5a3a961137 100644
--- a/app/controllers/producers_controller.rb
+++ b/app/controllers/producers_controller.rb
@@ -1,4 +1,7 @@
 class ProducersController < BaseController
+  layout 'darkswarm'
+
   def index
+    @producers = Enterprise.is_primary_producer.visible
   end
 end
diff --git a/app/views/json/_producers.rabl b/app/views/json/_producers.rabl
new file mode 100644
index 0000000000..b0fd6265c6
--- /dev/null
+++ b/app/views/json/_producers.rabl
@@ -0,0 +1,6 @@
+collection @producers
+attributes :name, :id
+
+node :path do |producer|
+  producer_path(producer) 
+end
diff --git a/app/views/producers/_fat.html.haml b/app/views/producers/_fat.html.haml
new file mode 100644
index 0000000000..d0108680ce
--- /dev/null
+++ b/app/views/producers/_fat.html.haml
@@ -0,0 +1,16 @@
+.row.active_table_row{"ng-show" => "open()"}
+  .columns.small-4
+    %strong Shop for
+    %p.trans-sentence
+      {{ producer.taxons | printArray }}
+  .columns.small-8
+    About Us
+
+.row.active_table_row.link{"ng-show" => "open()", "ng-repeat" => "hub in producer.hubs"}
+  .columns.small-11
+    %a{"bo-href" => "hub.path"} 
+      Shop at
+      %strong {{ hub.name }}
+  .columns.small-1.text-right
+    %a{"bo-href" => "hub.path"} 
+      %i.fi-arrow-right
diff --git a/app/views/producers/_skinny.html.haml b/app/views/producers/_skinny.html.haml
new file mode 100644
index 0000000000..c87c2295ed
--- /dev/null
+++ b/app/views/producers/_skinny.html.haml
@@ -0,0 +1,9 @@
+.row.active_table_row{"ng-click" => "toggle()", "ng-class" => "{'closed' : !open()}"}
+  .columns.small-4
+    %strong {{ producer.name }}
+  .columns.small-3
+    {{ producer.address.city }}
+  .columns.small-4
+    {{ producer.address.state | uppercase }}
+  .columns.small-1.text-right
+    %i{"ng-class" => "{'fi-arrow-down' : !open(), 'fi-arrow-up' : open()}"} 
diff --git a/app/views/producers/index.haml b/app/views/producers/index.haml
index e69de29bb2..33d5093ea3 100644
--- a/app/views/producers/index.haml
+++ b/app/views/producers/index.haml
@@ -0,0 +1,15 @@
+.producers{"ng-controller" => "ProducersCtrl"}
+  :javascript
+    angular.module('Darkswarm').value('producers', #{render partial: "json/producers", object: @producers})
+  
+  .row{bindonce: true}
+    .small-12.columns
+      .active_table
+        %producer.active_table_node.row{id: "{{producer.path}}",
+        "ng-repeat" => "producer in Producers.producers",
+        "ng-controller" => "ProducerNodeCtrl",
+        "ng-class" => "{'closed' : !open(), 'open' : open(), 'inactive' : !producer.active}"}
+
+          .small-12.columns
+            = render partial: 'producers/skinny'
+            = render partial: 'producers/fat'
diff --git a/config/routes.rb b/config/routes.rb
index d514641701..2352b832d6 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -7,7 +7,7 @@ Openfoodnetwork::Application.routes.draw do
     get :order_cycle
   end
 
-  resources :producers, only: :index
+  resources :producers
 
   namespace :shop do
     get '/checkout', :to => 'checkout#edit' , :as => :checkout
diff --git a/spec/controllers/producers_controller_spec.rb b/spec/controllers/producers_controller_spec.rb
index 1d53bb90b9..885b3981a1 100644
--- a/spec/controllers/producers_controller_spec.rb
+++ b/spec/controllers/producers_controller_spec.rb
@@ -2,7 +2,8 @@ require 'spec_helper'
 
 describe ProducersController do
   it "gets all active producers" do
-    Enterprise.stub_chain(:active)
+    Enterprise.stub_chain(:is_primary_producer, :visible)
+    Enterprise.should_receive(:is_primary_producer)
     get :index
   end
 end