diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
index fd08599222..80c2bfe09a 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -1,77 +1,13 @@
 @import "typography";
 
-.darkswarm navigation {
-  display: block;
-  background: $white;
-
-  distributor.details {
-    box-sizing: border-box;
-    display: block;
-    min-height: 150px;
-    padding: 30px 0 20px 0;
-    position: relative;
-
-    select {
-      width: 200px;
-    }
-
-    img {
-      display: block;
-      height: 100px;
-      width: 100px;
-      margin-right: 12px;
-    }
-
-    location {
-      @include headingFont;
-    }
-    @media all and (max-width: 768px) {
-      location, location + small {
-        display: block;
-      }
-    }
-
-    #distributor_title h3 {
-      margin-top: 0;
-      padding-top: 0.45em;
-
-      @media all and (max-width: 768px) {
-          margin-bottom: 8px;
-      }
-    }
-  }
-}
-
 ordercycle {
   float: right;
-  background: $teal-400;
-  color: $white;
+  background: $grey-050;
+  color: $grey-800;
   width: 100%;
   border-radius: 0.5em 0.5em 0 0;
-  position: absolute;
-  right: 1em;
-  padding: 1em;
-  margin-top: 3em;
-  height: 7.6em;
-
-  &.requires-selection {
-    background-color: $red-700;
-
-    .order-cycle-select {
-      border: 1px solid $red-500;
-
-      .select-label {
-        background-color: rgba($red-500, 0.5);
-      }
-
-      select {
-        background-color: $white;
-        background-image: url('/assets/black-caret.svg');
-        color: $grey-500;
-        font-style: italic;
-      }
-    }
-  }
+  margin-top: 1em;
+  padding: 1em 1.25em 0;
 
   p {
     max-width: 400px;
@@ -97,14 +33,10 @@ ordercycle {
     }
   }
 
-  @media all and (max-width: 768px) {
+  @media all and (max-width: 480px) {
     padding: 0.5em 1em 0.75em;
   }
 
-  form.custom {
-    text-align: center;
-  }
-
   .order-cycle-select {
     border: 1px solid $teal-300;
     display: inline-block;
@@ -164,9 +96,44 @@ ordercycle {
 
   closing {
     @include headingFont;
-    color: $white;
+    color: $grey-800;
     font-size: 1.25rem;
     display: block;
+    padding: 0.5em 0;
+
+    span {
+      @media all and (max-width: 768px) {
+        font-size: 0.875em;
+      }
+    }
+  }
+}
+
+shop ordercycle {
+  background: $teal-400;
+  color: $white;
+
+  &.requires-selection {
+    background-color: $red-700;
+
+    .order-cycle-select {
+      border: 1px solid $red-500;
+
+      .select-label {
+        background-color: rgba($red-500, 0.5);
+      }
+
+      select {
+        background-color: $white;
+        background-image: url('/assets/black-caret.svg');
+        color: $grey-500;
+        font-style: italic;
+      }
+    }
+  }
+
+  closing {
+    color: $white;
     padding: 0 0 12px;
 
     @media all and (max-width: 1024px) {
@@ -181,11 +148,25 @@ ordercycle {
       float: none;
       padding: 0 0 10px;
     }
+  }
 
-    span {
-      @media all and (max-width: 768px) {
-        font-size: 0.875em;
-      }
+  form.custom {
+    text-align: center;
+  }
+}
+
+shop navigation ordercycle {
+  margin-top: 3em;
+  padding: 1em;
+  height: 7.6em;
+  position: absolute;
+  right: 1em;
+}
+
+.sub-header {
+  form {
+    p {
+      margin-bottom: 0.75em;
     }
   }
 }
diff --git a/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
index c1a4c8ffe3..d233284767 100644
--- a/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-popovers.css.scss
@@ -1,31 +1,6 @@
 @import "mixins";
 @import "branding";
 
-// .darkswarm
-//   product
-
-ordercycle {
-  .joyride-tip-guide {
-    background-color: $clr-brick;
-
-    .joyride-nub.right {
-      border-color: $clr-brick !important;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-    }
-
-    p {
-      margin: 0;
-      font-weight: 700;
-    }
-
-    @media all and (max-width: 768px) {
-      z-index: 10;
-    }
-  }
-}
-
 // Pop over
 // Foundation overrides
 .joyride-tip-guide.price_breakdown {
diff --git a/app/assets/stylesheets/darkswarm/active_table_search.css.scss b/app/assets/stylesheets/darkswarm/active_table_search.css.scss
index 4159126538..b934116cdc 100644
--- a/app/assets/stylesheets/darkswarm/active_table_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/active_table_search.css.scss
@@ -27,7 +27,7 @@
 }
 
 products .filter-box {
-  background: #f7f7f7;
+  background: $grey-050;
 }
 
 .filter-box {
diff --git a/app/assets/stylesheets/darkswarm/branding.css.scss b/app/assets/stylesheets/darkswarm/branding.css.scss
index 55401e0f24..b8ab72349c 100644
--- a/app/assets/stylesheets/darkswarm/branding.css.scss
+++ b/app/assets/stylesheets/darkswarm/branding.css.scss
@@ -1,5 +1,7 @@
 $ofn-brand: #f27052;
 
+$distributor-header-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
+
 // e.g. australia, uk, norway specific color
 
 $ofn-grey: #808184;
@@ -39,6 +41,8 @@ $light-grey-transparency: rgba(0, 0, 0, .1);
 $black: #000;
 $white: #fff;
 
+$grey-050: #f7f7f7;
+
 $grey-400: #bbb;
 $grey-500: #999;
 $grey-600: #777;
diff --git a/app/assets/stylesheets/darkswarm/checkout.css.scss b/app/assets/stylesheets/darkswarm/checkout.css.scss
index 458fd24d5e..1ad32a975b 100644
--- a/app/assets/stylesheets/darkswarm/checkout.css.scss
+++ b/app/assets/stylesheets/darkswarm/checkout.css.scss
@@ -44,7 +44,7 @@ checkout {
   h5 {
     margin: 0;
     padding: 0.65em;
-    background: #f7f7f7;
+    background: $grey-050;
 
     .label {
       font-size: 1em;
diff --git a/app/assets/stylesheets/darkswarm/distributor_header.css.scss b/app/assets/stylesheets/darkswarm/distributor_header.css.scss
new file mode 100644
index 0000000000..8e3fdc2a9b
--- /dev/null
+++ b/app/assets/stylesheets/darkswarm/distributor_header.css.scss
@@ -0,0 +1,52 @@
+@import 'typography';
+
+section {
+  :not(shop) navigation {
+    box-shadow: $distributor-header-shadow;
+  }
+}
+
+.darkswarm navigation {
+  display: block;
+  background: $white;
+  position: relative;
+  z-index: 2;
+
+  .details {
+    box-sizing: border-box;
+    display: block;
+    min-height: 150px;
+    padding: 30px 0 0;
+    position: relative;
+
+    select {
+      width: 200px;
+    }
+
+    img {
+      display: block;
+      height: 100px;
+      width: 100px;
+      margin-right: 12px;
+    }
+
+    location {
+      @include headingFont;
+    }
+
+    @media all and (max-width: 768px) {
+      location, location + small {
+        display: block;
+      }
+    }
+
+    #distributor_title h3 {
+      margin-top: 0;
+      padding-top: 0.45em;
+
+      @media all and (max-width: 768px) {
+        margin-bottom: 8px;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
index a4c9c1f692..7eaf76afeb 100644
--- a/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_tabs.css.scss
@@ -7,7 +7,7 @@
 
   .tab-buttons {
     color: $dark-grey;
-    box-shadow: 0 1px 0 rgba(0,0,0,0.05), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
+    box-shadow: $distributor-header-shadow;
 
     .columns {
       display: flex;
diff --git a/app/views/checkout/edit.html.haml b/app/views/checkout/edit.html.haml
index 27271ae6d3..9d85b3e8df 100644
--- a/app/views/checkout/edit.html.haml
+++ b/app/views/checkout/edit.html.haml
@@ -7,7 +7,6 @@
 
 .darkswarm.footer-pad
   - content_for :order_cycle_form do
-
     %closing
       = t :checkout_now
     %p
@@ -15,16 +14,23 @@
       %strong
         = pickup_time current_order_cycle
 
-  = render partial: "shopping_shared/header", locals: { hide_oc_selector: true }
+  - content_for :ordercycle_sidebar do
+    .show-for-large-up.large-4.columns
+      = render partial: "shopping_shared/order_cycles"
+
+  = render partial: "shopping_shared/header"
+
+  .sub-header.show-for-medium-down
+    = render partial: "shopping_shared/order_cycles"
 
   %accordion{"close-others" => "false"}
     %checkout.row{"ng-controller" => "CheckoutCtrl"}
-      .small-12.medium-8.large-9.columns
+      .small-12.medium-8.columns
         - unless spree_current_user
           = render partial: "checkout/authentication"
         %div{"ng-show" => "enabled", "ng-controller" => "AccordionCtrl"}
           = render partial: "checkout/form"
-      .small-12.medium-4.large-3.columns
+      .small-12.medium-4.columns
         = render partial: "checkout/summary"
 
 
diff --git a/app/views/enterprises/shop.html.haml b/app/views/enterprises/shop.html.haml
index e08625d0df..7f98960b33 100644
--- a/app/views/enterprises/shop.html.haml
+++ b/app/views/enterprises/shop.html.haml
@@ -38,6 +38,10 @@
           - if oc_select_options.count > 1
             %option{value: "", disabled: "", selected: ""}= t :shopping_oc_select
 
+  - content_for :ordercycle_sidebar do
+    .show-for-large-up.large-4.columns
+      = render partial: "shopping_shared/order_cycles"
+
   = render partial: "shopping_shared/header"
   = render partial: "shopping_shared/tabs"
 
diff --git a/app/views/shopping_shared/_header.html.haml b/app/views/shopping_shared/_header.html.haml
index 37806539e2..e718e9247c 100644
--- a/app/views/shopping_shared/_header.html.haml
+++ b/app/views/shopping_shared/_header.html.haml
@@ -10,6 +10,4 @@
           = distributor.name
         %location= distributor.address.city
 
-    - unless defined? hide_oc_selector
-      .show-for-large-up.large-4.columns
-        = render partial: "shopping_shared/order_cycles"
+    = yield :ordercycle_sidebar
diff --git a/app/views/spree/orders/edit.html.haml b/app/views/spree/orders/edit.html.haml
index 56f4e03ef8..f654cfebb1 100644
--- a/app/views/spree/orders/edit.html.haml
+++ b/app/views/spree/orders/edit.html.haml
@@ -16,8 +16,15 @@
         - else
           = @order.distributor.next_collection_at
 
+  - content_for :ordercycle_sidebar do
+    .show-for-large-up.large-4.columns
+      = render partial: "shopping_shared/order_cycles"
+
   = render partial: "shopping_shared/header"
 
+  .sub-header.show-for-medium-down
+    = render partial: "shopping_shared/order_cycles"
+
   %fieldset.footer-pad
     - if @order.line_items.empty?
       %div.row{"data-hook" => "empty_cart"}