diff --git a/Packages/design/styles/responsive.styl b/Packages/design/styles/responsive.styl
index a150fb178..09a9f9bbe 100644
--- a/Packages/design/styles/responsive.styl
+++ b/Packages/design/styles/responsive.styl
@@ -1,23 +1,26 @@
 @import "./spacings"
 
 
-// MIN WIDTH 1600
+// MIN WIDTH 1920
 generateSpacings('r', $spacer-x, $spacer-y)
 
-@media screen and (min-width: 1440px) and (max-width: 1599px)
+@media screen and (min-width: 1600px) and (max-width: 1919px)
   generateSpacings('r', ($spacer-x * 0.9), ($spacer-y * 0.9))
 
-@media screen and (min-width: 1360px) and (max-width: 1439px)
+@media screen and (min-width: 1440px) and (max-width: 1599px)
   generateSpacings('r', ($spacer-x * 0.8), ($spacer-y * 0.8))
 
-@media screen and (min-width: 1280px) and (max-width: 1359px)
+@media screen and (min-width: 1360px) and (max-width: 1439px)
   generateSpacings('r', ($spacer-x * 0.7), ($spacer-y * 0.7))
 
-@media screen and (min-width: 1152px) and (max-width: 1279px)
+@media screen and (min-width: 1280px) and (max-width: 1359px)
   generateSpacings('r', ($spacer-x * 0.6), ($spacer-y * 0.6))
 
-@media screen and (min-width: 1024px) and (max-width: 1151px)
+@media screen and (min-width: 1152px) and (max-width: 1279px)
   generateSpacings('r', ($spacer-x * 0.5), ($spacer-y * 0.5))
 
-@media screen and (max-width: 1023px)
+@media screen and (min-width: 1024px) and (max-width: 1151px)
   generateSpacings('r', ($spacer-x * 0.4), ($spacer-y * 0.4))
+
+@media screen and (max-width: 1023px)
+  generateSpacings('r', ($spacer-x * 0.3), ($spacer-y * 0.3))
diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html
index 1c08c7890..c5c04207d 100644
--- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html
+++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.html
@@ -1,36 +1,40 @@
 <template name="studySeriesQuickSwitch">
-    <div class="quickSwitch {{side}} clearfix">
-        <div class="switchSection {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
-            <div class="label">Study</div>
-            <div class="studySwitch"></div>
-            <div class="switchHover studyHover clearfix">
-                <div class="scrollArea">
-                    {{>studyTimepointBrowser timepointViewType=timepointViewType viewportIndex=viewportIndex}}
-                </div>
-            </div>
-        </div>
-        <div class="switchSection {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
-            {{#let thumbnailsList=(thumbnails currentStudy)}}
-                <div class="label">Series</div>
-                <div class="seriesSwitch clearfix">
-                    {{#each thumbnail in thumbnailsList}}
-                        {{#if lt @index 8}}
-                            <div class="seriesItem {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}} {{#if isSeriesActive thumbnail.stack.seriesInstanceUid viewportIndex}}active{{/if}}"></div>
-                        {{else}}
-                            {{#if eq @index 8}}
-                                <div class="seriesItem count {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">{{thumbnailsList.length}}</div>
-                            {{/if}}
-                        {{/if}}
-                    {{/each}}
-                </div>
-                <div class="switchHover seriesHover clearfix">
-                    <div class="scrollArea">
-                        {{#each thumbnail in thumbnailsList}}
-                            {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
-                        {{/each}}
+    <div class="quickSwitchWrapper {{side}}">
+        <div class="quickSwitch clearfix rp-t-1 {{#if eq side 'left'}}rp-r-3{{else}}rp-l-3{{/if}}">
+            <div class="switchSection rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
+                <div class="label">Study</div>
+                <div class="studySwitch">
+                    <div class="studyBox"></div>
+                    <div class="switchHover studyHover clearfix">
+                        <div class="scrollArea">
+                            {{>studyTimepointBrowser timepointViewType=timepointViewType viewportIndex=viewportIndex}}
+                        </div>
                     </div>
                 </div>
-            {{/let}}
+            </div>
+            <div class="switchSection rm-x-1 {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">
+                {{#let thumbnailsList=(thumbnails currentStudy)}}
+                    <div class="label">Series</div>
+                    <div class="seriesSwitch clearfix">
+                        {{#each thumbnail in thumbnailsList}}
+                            {{#if lt @index 8}}
+                                <div class="seriesItem {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}} {{#if isSeriesActive thumbnail.stack.seriesInstanceUid viewportIndex}}active{{/if}}"></div>
+                            {{else}}
+                                {{#if eq @index 8}}
+                                    <div class="seriesItem count {{#if eq side 'left'}}pull-right{{else}}pull-left{{/if}}">{{thumbnailsList.length}}</div>
+                                {{/if}}
+                            {{/if}}
+                        {{/each}}
+                        <div class="switchHover seriesHover clearfix">
+                            <div class="scrollArea">
+                                {{#each thumbnail in thumbnailsList}}
+                                    {{>thumbnailEntry thumbnail=thumbnail viewportIndex=viewportIndex}}
+                                {{/each}}
+                            </div>
+                        </div>
+                    </div>
+                {{/let}}
+            </div>
         </div>
     </div>
 </template>
diff --git a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
index 7a184a906..7ab63327b 100644
--- a/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
+++ b/Packages/lesiontracker/client/components/studySeriesQuickSwitch/studySeriesQuickSwitch.styl
@@ -1,59 +1,50 @@
 @import "{design}/app"
 
 $switchSize = 55px
-$switchTop = 5px
-$switchHeight = 70px
-$switchWrapperWidth = 140px
 $seriesSpacing = 2px
 
-.quickSwitch
-  height: $switchHeight
+.quickSwitchWrapper
   position: absolute
-  top: $switchTop
-  width: $switchWrapperWidth
-
+  top: 0
   &.middle
-    left: 'calc(50% - %s)' % ($switchWrapperWidth / 2)
+    left: 50%
+    transform(translateX(-50%))
   &.left
-    left: 'calc(50% - %s - 20px)' % $switchWrapperWidth
+    border-right: 1px solid $uiBorderColor
+    right: 50%
   &.right
-    left: calc(50% + 20px)
+    left: 50%
+
+.quickSwitch
 
   .switchSection
     display: inline-block
     float: left
     height: 100%
-    margin: 0 5px
     position: relative
 
     &:hover
-      .studySwitch, .seriesSwitch
+      .studySwitch .studyBox, .seriesSwitch .seriesItem
         opacity: 0
       .switchHover
         opacity: 0.8
       .studyHover
         transform(scale(1))
 
-    .label
-      color: $textSecondaryColor
-      display: block
-      font-size: 12px
-      font-weight: 300
-      padding: 0
-      text-align: center
-      text-transform: uppercase
-
-    .studySwitch, .seriesSwitch
+    .studySwitch .studyBox, .seriesSwitch .seriesItem
       transition(opacity 0.3s ease)
 
+    .studySwitch, .seriesSwitch
+      position: relative
+
     .studySwitch
-      background-color: $darkUiColor
-      border: solid 1px $activeColor
-      border-radius: 11px
-      display: block
-      height: $switchSize
-      margin: 0 auto
-      width: $switchSize
+      .studyBox
+        background-color: $darkUiColor
+        border: solid 1px $activeColor
+        border-radius: 11px
+        display: block
+        height: $switchSize
+        width: $switchSize
 
     .seriesSwitch
       display: block
@@ -78,13 +69,23 @@ $seriesSpacing = 2px
         &.active
           background-color: $activeColor
 
+    .label
+      color: $textSecondaryColor
+      display: block
+      font-size: 12px
+      font-weight: 300
+      line-height: 34px
+      padding: 0
+      text-align: center
+      text-transform: uppercase
+
 .switchHover
   background: black
   border-radius: 5px
   opacity: 0
   overflow: hidden
   position: absolute
-  top: 18px
+  top: 0
   transform(scale(0))
   transition(all 0.3s ease)
   z-index: 10000
@@ -105,7 +106,7 @@ $seriesSpacing = 2px
   .thumbnailEntry
     margin: 0
 
-.quickSwitch.left, .quickSwitch.middle
+.quickSwitchWrapper.left, .quickSwitchWrapper.middle
   .seriesHover .thumbnailEntry
     float: right
   .studyHover
@@ -115,7 +116,7 @@ $seriesSpacing = 2px
     right: 0
     transform-origin(100% 0%)
 
-.quickSwitch.right
+.quickSwitchWrapper.right
   .seriesHover .thumbnailEntry
     float: left
   .studyHover
@@ -134,38 +135,35 @@ $seriesSmallSpacing = 1px
     transform(scale(0.5))
 @media screen and (min-width: 1024px) and (max-width: 1151px)
   .switchSection:hover .seriesHover
-    transform(scale(0.63))
+    transform(scale(0.61))
 @media screen and (min-width: 1152px) and (max-width: 1279px)
   .switchSection:hover .seriesHover
-    transform(scale(0.72))
+    transform(scale(0.69))
 @media screen and (min-width: 1280px) and (max-width: 1359px)
   .switchSection:hover .seriesHover
-    transform(scale(0.81))
+    transform(scale(0.77))
 @media screen and (min-width: 1360px) and (max-width: 1439px)
   .switchSection:hover .seriesHover
-    transform(scale(0.86))
+    transform(scale(0.82))
 @media screen and (min-width: 1440px) and (max-width: 1599px)
   .switchSection:hover .seriesHover
-    transform(scale(0.91))
-@media screen and (min-width: 1600px)
+    transform(scale(0.87))
+@media screen and (min-width: 1600px) and (max-width: 1919px)
+  .switchSection:hover .seriesHover
+    transform(scale(0.97))
+@media screen and (min-width: 1920px)
   .switchSection:hover .seriesHover
     transform(scale(1))
 
 @media screen and (max-width: 1599px)
   .quickSwitch
-    height: 45px
-    &.left
-      left: 'calc(50% - %s - 8px)' % $switchWrapperWidth
-    &.right
-      left: calc(50% + 8px)
     .switchSection
-      .switchHover
-        top: 8px
       .label
         font-size: 8px
         font-weight: 400
+        line-height: 12px
         padding: 0
-      .studySwitch
+      .studySwitch .studyBox
         border-radius: 7px
         height: $switchSmallSize
         width: $switchSmallSize
@@ -178,6 +176,6 @@ $seriesSmallSpacing = 1px
           margin: $seriesSmallSpacing
           width: 10px
           &.count
-            font-size: 10px;
-            font-weight: 300;
-            line-height: 10px;
+            font-size: 10px
+            font-weight: 300
+            line-height: 10px