diff --git a/OHIFViewer/client/components/viewer/viewer.styl b/OHIFViewer/client/components/viewer/viewer.styl
index f0ed1148f..85d1041b5 100644
--- a/OHIFViewer/client/components/viewer/viewer.styl
+++ b/OHIFViewer/client/components/viewer/viewer.styl
@@ -1,7 +1,5 @@
 #viewer
   border-top: 1px solid #525252
-  display: flex
-  flex-flow: row nowrap
   height: 100%
   width: 100%
 
diff --git a/Packages/design/app.styl b/Packages/design/app.styl
index 789f4c61a..094eef529 100644
--- a/Packages/design/app.styl
+++ b/Packages/design/app.styl
@@ -1,7 +1,3 @@
-@import "{design}/styles/webfonts"
-@import "{design}/styles/variables"
-@import "{design}/styles/mixins"
-@import "{design}/styles/spacings"
-@import "{design}/styles/responsive"
-
-@import "{design}/styles/global"
+@import "{design}/styles/imports/mixins"
+@import "{design}/styles/imports/spacings"
+@import "{design}/styles/imports/variables"
diff --git a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
index b65fe9dfc..c6d88f7c8 100644
--- a/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
+++ b/Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl
@@ -5,7 +5,6 @@ $borderColorActive = #3C8074
 $textColorActive = #2D2D2D
 
 .roundedButtonGroup
-  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
 
   .roundedButtonWrapper
     cursor: pointer
diff --git a/Packages/design/package.js b/Packages/design/package.js
index 7d150992e..a25149f1a 100644
--- a/Packages/design/package.js
+++ b/Packages/design/package.js
@@ -15,16 +15,20 @@ Package.onUse(function(api) {
     // Importable colors / typography settings
     api.addFiles([
         'app.styl',
-        'styles/global.styl',
-        'styles/mixins.styl',
-        'styles/responsive.styl',
-        'styles/spacings.styl',
-        'styles/variables.styl',
-        'styles/webfonts.styl'
+        'styles/imports/mixins.styl',
+        'styles/imports/spacings.styl',
+        'styles/imports/variables.styl'
     ], 'client', {
         isImport: true
     });
 
+    // Common styles
+    api.addFiles([
+        'styles/common/webfonts.styl',
+        'styles/common/global.styl',
+        'styles/common/spacings.styl'
+    ], 'client');
+
     // Rounded Button Group
     api.addFiles([
         'components/roundedButtonGroup/roundedButtonGroup.html',
diff --git a/Packages/design/styles/global.styl b/Packages/design/styles/common/global.styl
similarity index 59%
rename from Packages/design/styles/global.styl
rename to Packages/design/styles/common/global.styl
index 28ba095be..7333ae680 100644
--- a/Packages/design/styles/global.styl
+++ b/Packages/design/styles/common/global.styl
@@ -1,7 +1,9 @@
-html *
-    font-family: 'Roboto', sans-serif
+@import "{design}/app.styl"
 
-hr
+html body
+  font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
+
+html hr
   border-top: 1px solid $uiBorderColor
 
 .center-table
diff --git a/Packages/design/styles/responsive.styl b/Packages/design/styles/common/spacings.styl
similarity index 86%
rename from Packages/design/styles/responsive.styl
rename to Packages/design/styles/common/spacings.styl
index 09a9f9bbe..70e4a4684 100644
--- a/Packages/design/styles/responsive.styl
+++ b/Packages/design/styles/common/spacings.styl
@@ -1,5 +1,10 @@
-@import "./spacings"
+@import "{design}/app.styl"
 
+generateSpacings('', $spacer-x, $spacer-y)
+
+.m-x-auto
+  margin-left: auto !important
+  margin-right: auto !important
 
 // MIN WIDTH 1920
 generateSpacings('r', $spacer-x, $spacer-y)
diff --git a/Packages/design/styles/webfonts.styl b/Packages/design/styles/common/webfonts.styl
similarity index 100%
rename from Packages/design/styles/webfonts.styl
rename to Packages/design/styles/common/webfonts.styl
diff --git a/Packages/design/styles/mixins.styl b/Packages/design/styles/imports/mixins.styl
similarity index 100%
rename from Packages/design/styles/mixins.styl
rename to Packages/design/styles/imports/mixins.styl
diff --git a/Packages/design/styles/spacings.styl b/Packages/design/styles/imports/spacings.styl
similarity index 89%
rename from Packages/design/styles/spacings.styl
rename to Packages/design/styles/imports/spacings.styl
index abff5951e..aa4113ca2 100644
--- a/Packages/design/styles/spacings.styl
+++ b/Packages/design/styles/imports/spacings.styl
@@ -34,9 +34,3 @@ generateSpacings($prefix, $spacerX, $spacerY)
         .{$prefix}{$property[0]}-{$axis[0]}-{$spacing[0]}
           {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
           {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
-
-generateSpacings('', $spacer-x, $spacer-y)
-
-.m-x-auto
-  margin-left: auto !important
-  margin-right: auto !important
diff --git a/Packages/design/styles/variables.styl b/Packages/design/styles/imports/variables.styl
similarity index 100%
rename from Packages/design/styles/variables.styl
rename to Packages/design/styles/imports/variables.styl
diff --git a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
index 85d990cfd..eef896210 100644
--- a/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
+++ b/Packages/lesiontracker/client/components/flexboxLayout/flexboxLayout.styl
@@ -2,6 +2,7 @@
 
 .viewerSection
   display: flex
+  flex: 1
   flex-flow: row nowrap
   align-items: stretch
   height: calc(100% - 78px);
diff --git a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
index 969b25a8b..ddb9d8195 100644
--- a/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
+++ b/Packages/lesiontracker/client/components/radialProgressBar/radialProgressBar.styl
@@ -29,7 +29,6 @@ $circleSize = 46px
     width: $circleSize
     height: $circleSize
     line-height: $circleSize
-    font-family: Roboto
     font-weight: 700
     font-size: 17px
     text-align: center
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
index 2289cc2f0..17223a024 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.styl
@@ -5,7 +5,7 @@ $timepointButtonHeight = 55px
 .studyTimepointBrowser
   background-color: $primaryBackgroundColor
   float: left
-  height: calc(100% - 55px - 50px - 30px)
+  height: 100%
   position: relative
   width: 100%
 
@@ -74,7 +74,6 @@ $timepointButtonHeight = 55px
 
     .timepointFollowupTitle
       color: $textPrimaryColor
-      font-family: Roboto
       padding-top: 2px
 
   .studyTimepointScrollArea
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
index 8ad908ac4..03ef1f6d8 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
@@ -59,7 +59,6 @@ $spacerY = 12px
   border: 1px solid $boxBorderColor
   border-radius: 12px
   cursor: pointer
-  font-family: Roboto
   padding: $spacerY $spacerX ($spacerY - 1)
   position: relative
   transition($sidebarTransition)
diff --git a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
index c7c152412..611373607 100644
--- a/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
+++ b/Packages/lesiontracker/client/components/toolbarSection/toolbarSection.styl
@@ -2,6 +2,7 @@
 
 .toolbarSection
   border-bottom: $uiBorderColor $uiBorderThickness solid
+  flex: 0 0 auto
   height: $toolbarHeight
   overflow: hidden
   padding-top: 6px
diff --git a/Packages/lesiontracker/client/components/viewer/viewer.styl b/Packages/lesiontracker/client/components/viewer/viewer.styl
index 9931e54a5..a13912f1e 100644
--- a/Packages/lesiontracker/client/components/viewer/viewer.styl
+++ b/Packages/lesiontracker/client/components/viewer/viewer.styl
@@ -1,12 +1,14 @@
 @import "{design}/app"
 
 #viewer
-  width: 100%
+  align-items: stretch
+  background-color: black
+  display: flex
+  flex-flow: column wrap
   height: 100%
   margin: 0
   padding: 0
-  background-color: black
-
+  width: 100%
 
 //font awesome icons
 .fa-cr:before
diff --git a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
index 5256be5d0..310d7724f 100644
--- a/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
+++ b/Packages/viewerbase/client/components/studyBrowser/thumbnailEntry/thumbnailEntry.styl
@@ -5,7 +5,6 @@ $seriesCountBackgroundColor = #678696
 .thumbnailEntry
   cursor: pointer
   display: table
-  font-family: Roboto
   margin: 0 auto
 
   &.draggable