diff --git a/app/assets/javascripts/darkswarm/directives/page.js.coffee b/app/assets/javascripts/darkswarm/directives/page.js.coffee
new file mode 100644
index 0000000000..9ae6f8267c
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/page.js.coffee
@@ -0,0 +1,12 @@
+Darkswarm.directive "page", ->
+  restrict: "C"
+  require: "^^pagesetCtrl"
+  scope:
+    name: "@"
+  link: (scope, element, attrs, ctrl) ->
+    element.on "click", ->
+      scope.$apply ->
+        ctrl.toggle(scope.name)
+
+    ctrl.registerSelectionListener (prefix, selection) ->
+      element.toggleClass('selected', selection == scope.name)
diff --git a/app/assets/javascripts/darkswarm/directives/page_view.js.coffee b/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
new file mode 100644
index 0000000000..76f9402300
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/page_view.js.coffee
@@ -0,0 +1,15 @@
+Darkswarm.directive "pageView", ->
+  restrict: "C"
+  require: "^^pagesetCtrl"
+  template: "<div ng-include='template'></div>"
+  scope:
+    templates: "="
+  link: (scope, element, attrs, ctrl) ->
+    scope.template = null
+
+    ctrl.registerSelectionListener (prefix, selection) ->
+      if selection?
+        selection = "#{prefix}/#{selection}" if prefix?
+        scope.template = "#{selection}.html"
+      else
+        scope.template = null
diff --git a/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
new file mode 100644
index 0000000000..b880356245
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/pageset_ctrl.js.coffee
@@ -0,0 +1,30 @@
+Darkswarm.directive "pagesetCtrl", (Tabsets, $location) ->
+  restrict: "C"
+  scope:
+    id: "@"
+    selected: "@"
+    navigate: "="
+    prefix: "@?"
+    alwaysopen: "="
+  controller: ($scope, $element) ->
+    if $scope.navigate
+      path = $location.path()?.match(/^\/\w+$/)?[0]
+      $scope.selected = path[1..] if path
+
+    this.toggle = (name) ->
+      state = if $scope.alwaysopen then 'open' else null
+      Tabsets.toggle($scope.id, name, state)
+
+    this.select = (selection) ->
+      $scope.$broadcast("selection:changed", selection)
+      $element.toggleClass("expanded", selection?)
+      $location.path(selection) if $scope.navigate
+
+    this.registerSelectionListener = (callback) ->
+      $scope.$on "selection:changed", (event, selection) ->
+        callback($scope.prefix, selection)
+
+    this
+
+  link: (scope, element, attrs, ctrl) ->
+    Tabsets.register(ctrl, scope.id, scope.selected)
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index 40007e2b6a..a913096417 100644
--- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
@@ -3,7 +3,7 @@
 @import "branding";
 
 // Tabs styling
-.tabset-ctrl#shop-tabs {
+.pageset-ctrl#shop-tabs {
 
   .tab-buttons {
     color: $dark-grey;
@@ -23,7 +23,7 @@
     }
   }
 
-  .tab {
+  .page {
     text-align: center;
     border-top: 4px solid transparent;
     display: inline-block;
@@ -75,7 +75,7 @@
 
   // content revealed in accordion
 
-  .tab-view {
+  .page-view {
     margin-bottom: 5em;
     background: none;
     border: none;
diff --git a/app/views/shopping_shared/_tabs.html.haml b/app/views/shopping_shared/_tabs.html.haml
index 434c5070a2..8b80141f5a 100644
--- a/app/views/shopping_shared/_tabs.html.haml
+++ b/app/views/shopping_shared/_tabs.html.haml
@@ -3,12 +3,12 @@
   - shop_tabs.each do |tab|
     = render "shopping_shared/tabs/#{tab[:name]}"
 
-  .tabset-ctrl#shop-tabs{ navigate: 'true', alwaysopen: 'true', selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } }
+  .pageset-ctrl#shop-tabs{ navigate: 'true', alwaysopen: 'true', selected: shop_tabs.first[:name], prefix: 'shop', ng: { cloak: true } }
     .tab-buttons
       .row
         .columns.small-12.large-8
           - shop_tabs.each do |tab|
-            .tab{ id: "tab_#{tab[:name]}", name: tab[:name] }
+            .page{ id: "tab_#{tab[:name]}", name: tab[:name] }
               %a{ href: 'javascript:void(0)' }=tab[:title]
 
-    .tab-view
+    .page-view