diff --git a/app/assets/javascripts/admin/all.js b/app/assets/javascripts/admin/all.js
index afbc382ca0..b062e66261 100644
--- a/app/assets/javascripts/admin/all.js
+++ b/app/assets/javascripts/admin/all.js
@@ -18,6 +18,8 @@
 //= require admin/spree_paypal_express
 //= require ../shared/ng-infinite-scroll.min.js
 //= require ../shared/ng-tags-input.min.js
+//= require angular-rails-templates
+//= require_tree ../templates/admin
 //= require ./admin
 //= require ./customers/customers
 //= require ./dropdown/dropdown
diff --git a/app/assets/javascripts/admin/index_utils/directives/panel_row.js.coffee b/app/assets/javascripts/admin/index_utils/directives/panel_row.js.coffee
new file mode 100644
index 0000000000..bc14ddbe75
--- /dev/null
+++ b/app/assets/javascripts/admin/index_utils/directives/panel_row.js.coffee
@@ -0,0 +1,33 @@
+angular.module("admin.indexUtils").directive "panelRow", (Panels) ->
+  restrict: "C"
+  templateUrl: "admin/panel.html"
+  scope:
+    object: "&"
+    panels: "="
+  link: (scope, element, attrs) ->
+    scope.template = ""
+    selected = null
+
+    setTemplate = ->
+      if selected?
+        scope.template = 'admin/panels/' + scope.panels[selected] + '.html'
+      else
+        scope.template = ""
+
+    scope.getSelected = ->
+      selected
+
+    scope.setSelected = (name) ->
+      scope.$apply ->
+        selected = name
+        setTemplate()
+
+    scope.open = (name) ->
+      element.show 0, ->
+        scope.setSelected name
+
+    scope.close = ->
+      element.hide 0, ->
+        scope.setSelected null
+
+    Panels.register(scope.object().id, scope)
diff --git a/app/assets/javascripts/admin/index_utils/directives/panel_toggle.js.coffee b/app/assets/javascripts/admin/index_utils/directives/panel_toggle.js.coffee
new file mode 100644
index 0000000000..528cd11249
--- /dev/null
+++ b/app/assets/javascripts/admin/index_utils/directives/panel_toggle.js.coffee
@@ -0,0 +1,11 @@
+angular.module("admin.indexUtils").directive "panelToggle", (Panels) ->
+  restrict: "E"
+  replace: true
+  transclude: true
+  template: "<div ng-transclude></div>"
+  scope:
+    name: "@name"
+    object: "&object"
+  link: (scope, element, attrs) ->
+    element.on "click", ->
+      Panels.toggle(scope.object().id, scope.name)
diff --git a/app/assets/javascripts/admin/index_utils/index_utils.js.coffee b/app/assets/javascripts/admin/index_utils/index_utils.js.coffee
index 0925bf45ed..adcd68e3c5 100644
--- a/app/assets/javascripts/admin/index_utils/index_utils.js.coffee
+++ b/app/assets/javascripts/admin/index_utils/index_utils.js.coffee
@@ -1 +1 @@
-angular.module("admin.indexUtils", ['ngResource']).config ($httpProvider) ->
  $httpProvider.defaults.headers.common["X-CSRF-Token"] = $("meta[name=csrf-token]").attr("content");
  $httpProvider.defaults.headers.common["Accept"] = "application/json, text/javascript, */*";
\ No newline at end of file
+angular.module("admin.indexUtils", ['ngResource', 'templates']).config ($httpProvider) ->
  $httpProvider.defaults.headers.common["X-CSRF-Token"] = $("meta[name=csrf-token]").attr("content");
  $httpProvider.defaults.headers.common["Accept"] = "application/json, text/javascript, */*";
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/index_utils/services/panels.js.coffee b/app/assets/javascripts/admin/index_utils/services/panels.js.coffee
new file mode 100644
index 0000000000..8f9939ea4b
--- /dev/null
+++ b/app/assets/javascripts/admin/index_utils/services/panels.js.coffee
@@ -0,0 +1,18 @@
+angular.module("admin.indexUtils").factory 'Panels', ->
+  new class Panels
+    panels: {}
+
+    register: (id, scope) ->
+      if id? && scope?
+        @panels[id] = scope
+
+    toggle: (id, name) ->
+      scope = @panels[id]
+      selected = scope.getSelected()
+      switch selected
+        when name
+          scope.close()
+        when null
+          scope.open(name)
+        else
+          scope.setSelected(name)
diff --git a/app/assets/javascripts/templates/admin/panel.html.haml b/app/assets/javascripts/templates/admin/panel.html.haml
new file mode 100644
index 0000000000..fac75a4fea
--- /dev/null
+++ b/app/assets/javascripts/templates/admin/panel.html.haml
@@ -0,0 +1,2 @@
+%td{ colspan: 4 }
+  .panel{ ng: { include: "template" } }
diff --git a/app/assets/javascripts/templates/admin/panels/enterprise_status.html.haml b/app/assets/javascripts/templates/admin/panels/enterprise_status.html.haml
new file mode 100644
index 0000000000..29bf3d5197
--- /dev/null
+++ b/app/assets/javascripts/templates/admin/panels/enterprise_status.html.haml
@@ -0,0 +1 @@
+enterprise_status {{ object().name }}
diff --git a/app/assets/javascripts/templates/admin/panels/enterprise_type.html.haml b/app/assets/javascripts/templates/admin/panels/enterprise_type.html.haml
new file mode 100644
index 0000000000..4491d33f53
--- /dev/null
+++ b/app/assets/javascripts/templates/admin/panels/enterprise_type.html.haml
@@ -0,0 +1 @@
+enterprise_type {{ object().name }}
diff --git a/app/assets/stylesheets/admin/panel_rows.css.scss b/app/assets/stylesheets/admin/panel_rows.css.scss
new file mode 100644
index 0000000000..24fffb2ec6
--- /dev/null
+++ b/app/assets/stylesheets/admin/panel_rows.css.scss
@@ -0,0 +1,6 @@
+tr.panel-row {
+  display: none;
+  td {
+    padding: 0;
+  }
+}
diff --git a/app/views/admin/enterprises/index.html.haml b/app/views/admin/enterprises/index.html.haml
index b1f46cd902..ae3172c81c 100644
--- a/app/views/admin/enterprises/index.html.haml
+++ b/app/views/admin/enterprises/index.html.haml
@@ -46,35 +46,37 @@
         %col.type{ width: "25%"}
         %col.status{ width: "25%"}
         %col.manage{ width: "25%"}
-        -# %col.actions{ width: "10%"}
         %thead
           %tr{ ng: { controller: "ColumnsCtrl" } }
             %th.name{ ng: { show: 'columns.name.visible' } }
               Name
-              -# %a{ :href => '', ng: { click: "predicate = 'name'; reverse = !reverse" } } Name
             %th.type{ ng: { show: 'columns.type.visible' } } Type
             %th.status{ ng: { show: 'columns.status.visible' } } Status
             %th.manage{ ng: { show: 'columns.manage.visible' } } Manage
-            -# %th.actions
-            -#   Ask?&nbsp;
-            -#   %input{ :type => 'checkbox', 'ng-model' => "confirmDelete" }
-        %tr.enterprise{ :id => "e_{{enterprise.id}}", ng: { repeat: "enterprise in filteredEnterprises = ( allEnterprises | filter:{ name: quickSearch } )", class: { even: "'even'", odd: "'odd'"} } }
-          %td.name{ ng: { show: 'columns.name.visible' } }
-            %span{ bo: { bind: "enterprise.name" } }
-          %td.type{ ng: { show: 'columns.type.visible' } }
-            %a.button.fullwidth{ ng: { click: ""} }
-              %span{ bo: { bind: "enterprise.category" } }
-              %i.icon-arrow-down
-          %td.status{ ng: { show: 'columns.status.visible' } }
-            %a.button.fullwidth{ ng: { click: ""} }
-              Status
-              %i.icon-arrow-down
-          %td.manage{ ng: { show: 'columns.manage.visible' } }
-            %a.button.fullwidth{ href: '#' }
-              Manage
-              %i.icon-arrow-right
-          -# %td.actions
-          -#   %a{ 'ng-click' => "deleteEnterprise(enterprise)", :class => "delete-enterprise icon-trash no-text" }
+        %tbody{ :id => "e_{{enterprise.id}}", ng: { repeat: "enterprise in filteredEnterprises = ( allEnterprises | filter:{ name: quickSearch } )" } }
+          %tr.enterprise{ ng: { class: { even: "'even'", odd: "'odd'"} } }
+            %td.name{ ng: { show: 'columns.name.visible' } }
+              %span{ bo: { bind: "enterprise.name" } }
+            %td.type{ ng: { show: 'columns.type.visible' } }
+              %panel-toggle{ name: "type", object: "enterprise" }
+                %a.button.fullwidth
+                  %span{ bo: { bind: "enterprise.category" } }
+                  %i.icon-arrow-down
+            %td.status{ ng: { show: 'columns.status.visible' } }
+              %panel-toggle{ name: "status", object: "enterprise" }
+                %a.button.fullwidth{ ng: { click: ""} }
+                  Status
+                  %i.icon-arrow-down
+            %td.manage{ ng: { show: 'columns.manage.visible' } }
+              %a.button.fullwidth{ href: '#' }
+                Manage
+                %i.icon-arrow-right
+
+          %tr.panel-row{ object: "enterprise", panels: "{type: 'enterprise_type', status: 'enterprise_status'}" }
+
+
+
+
 
 
 
diff --git a/spec/javascripts/unit/admin/index_utils/directives/panel_row_spec.js.coffee b/spec/javascripts/unit/admin/index_utils/directives/panel_row_spec.js.coffee
new file mode 100644
index 0000000000..2161afe7de
--- /dev/null
+++ b/spec/javascripts/unit/admin/index_utils/directives/panel_row_spec.js.coffee
@@ -0,0 +1,33 @@
+describe "PanelRow directive", ->
+  Panels = null
+  element = null
+  directiveScope = null
+
+  beforeEach ->
+    module 'admin.indexUtils'
+
+  beforeEach inject ($rootScope, $compile, $injector, $templateCache, _Panels_) ->
+    Panels = _Panels_
+    $templateCache.put 'admin/panel.html', '<span>{{ template }}</span>'
+    # Declare the directive HTML.
+    element = angular.element('<div class="panel-row" object="{id: \'12\'}" panels="{ panel1: \'template\'}"></div>')
+    # Define the root scope.
+    scope = $rootScope
+    # Compile and digest the directive.
+    $compile(element) scope
+    scope.$digest()
+
+    directiveScope = element.find('span').scope()
+    return
+
+  describe "initialisation", ->
+    it "registers the scope with the panels service", ->
+      expect(Panels.panels[12]).toEqual directiveScope
+
+  describe "setting the selected panel", ->
+    beforeEach ->
+      directiveScope.setSelected('panel1')
+
+    it 'updates the active template on the scope', ->
+      expect(element.find('span').html()).toEqual "admin/panels/template.html"
+      return
diff --git a/spec/javascripts/unit/admin/index_utils/services/panels_spec.js.coffee b/spec/javascripts/unit/admin/index_utils/services/panels_spec.js.coffee
new file mode 100644
index 0000000000..a55d9ffa61
--- /dev/null
+++ b/spec/javascripts/unit/admin/index_utils/services/panels_spec.js.coffee
@@ -0,0 +1,52 @@
+describe "Panels service", ->
+  Panels = null
+
+  beforeEach ->
+    module 'admin.indexUtils'
+
+    inject (_Panels_) ->
+      Panels = _Panels_
+
+  describe "registering panels", ->
+    it "adds the panel provided scope to @panelsm indexed by the provided id", ->
+      Panels.register(23, { some: 'scope'} )
+      expect(Panels.panels[23]).toEqual { some: 'scope' }
+
+    it "ignores the input if id or scope are null", ->
+      Panels.register(null, { some: 'scope'} )
+      Panels.register(23, null)
+      expect(Panels.panels).toEqual { }
+
+  describe "toggling a panel", ->
+    scopeMock = null
+
+    beforeEach ->
+      scopeMock =
+        open: jasmine.createSpy('open')
+        close: jasmine.createSpy('close')
+        setSelected: jasmine.createSpy('setSelected')
+      Panels.panels = { '12':  scopeMock }
+
+    describe "when no panel is currently selected", ->
+      beforeEach ->
+        scopeMock.getSelected = jasmine.createSpy('getSelected').andReturn(null)
+        Panels.toggle(12, 'panel_name')
+
+      it "calls #open on the scope", ->
+        expect(scopeMock.open).toHaveBeenCalledWith('panel_name')
+
+    describe "when #toggle is called for the currently selected panel", ->
+      beforeEach ->
+        scopeMock.getSelected = jasmine.createSpy('getSelected').andReturn('panel_name')
+        Panels.toggle(12, 'panel_name')
+
+      it "calls #close on the scope", ->
+        expect(scopeMock.close).toHaveBeenCalled()
+
+    describe "when #toggle is called for a different panel", ->
+      beforeEach ->
+        scopeMock.getSelected = jasmine.createSpy('getSelected').andReturn('some_other_panel_name')
+        Panels.toggle(12, 'panel_name')
+
+      it "calls #setSelected on the scope", ->
+        expect(scopeMock.setSelected).toHaveBeenCalledWith('panel_name')