diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
index 5469e7772..4a851fd23 100644
--- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
+++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.html
@@ -1,16 +1,16 @@
 <template name="lesionTracker">
-    <div class="topBar">
+    <div class="topBar {{#if onStudyList}}studyList{{/if}}">
         <a class="brandSection pull-left" href="http://ohif.org">
             <img class="logoImage" src="/images/logo.png">
             <div class="logoText">
                 Open Health Imaging Foundation
             </div>
         </a>
-        {{ #unless onStudyList}}
-        <div class="studyListLinkSection pull-left">
-            <a id="loadStudyList">Study List</a>
+        {{ #if studyListToggleText }}
+        <div class="studyListLinkSection pull-left js-toggle-studyList">
+            {{studyListToggleText}}
         </div>
-        {{ /unless }}
+        {{ /if }}
         <div class="userAccountSection pull-right">
             {{>userAccountMenu}}
         </div>
@@ -32,5 +32,4 @@
     {{ >lastLoginModal }}
     {{ >studyContextMenu }}
     {{ >progressDialog}}
-    {{ >lesionTableHUD }}
 </template>
\ No newline at end of file
diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js
index b4ed7e43a..4cdf5c09c 100644
--- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js
+++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.js
@@ -36,23 +36,16 @@ Template.lesionTracker.onRendered(function() {
 });
 
 Template.lesionTracker.events({
-    'click #tablist a[data-toggle="tab"]': function(e) {
-        // If this tab is already active, do nothing
-        var tabButton = $(e.currentTarget);
-        var tabTitle = tabButton.parents('.tabTitle');
-        if (tabTitle.hasClass('active')) {
-            return;
+    'click .js-toggle-studyList': function() {
+        var contentId = Session.get('activeContentId');
+        var worklistContentId = 'worklistTab';
+        var viewerContentId = 'viewerTab';
+
+        if (contentId !== worklistContentId) {
+            switchToTab(worklistContentId);
+        } else {
+            switchToTab(viewerContentId);
         }
-
-        // Otherwise, switch to the tab
-        var contentId = tabButton.data('target').replace('#', '');
-        switchToTab(contentId);
-    },
-    'click #loadStudyList': function() {
-        // TODO: Make some set of 'closing study' callbacks
-        $('#lesionTableHUD').display('none');
-
-        switchToTab('worklistTab');
     }
 });
 
@@ -62,6 +55,21 @@ Template.lesionTracker.helpers({
     showWorklistMenu: function() {
         return Template.instance().showWorklistMenu.get();
     },
+    studyListToggleText: function() {
+        var contentId = Session.get('activeContentId');
+        if (!contentId) {
+            return;
+        }
+
+        var worklistContentId = 'worklistTab';
+        var viewerContentId = 'viewerTab';
+
+        if (contentId === worklistContentId) {
+            return 'Back to viewer';
+        } else if (contentId === viewerContentId) {
+            return 'Study list';
+        }
+    },
     onStudyList: function() {
         return (Session.get('activeContentId') === 'worklistTab');
     }
diff --git a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
index 36b8d374d..b1468ad8d 100644
--- a/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
+++ b/Packages/lesiontracker/client/components/lesionTracker/lesionTracker.styl
@@ -4,6 +4,7 @@
   height: $topBarHeight
   color: $textPrimaryColor
   background-color: $primaryBackgroundColor
+  transition(all 0.5s ease)
 
   .brandSection
     height: 100%
@@ -11,6 +12,7 @@
 
     img.logoImage
       height: 100%
+      max-height: 50px
       margin: 0 5px
 
     .logoText
@@ -20,18 +22,41 @@
       color: $textPrimaryColor
 
   .studyListLinkSection
+    color: $textSecondaryColor
     border-left: $uiBorderThickness solid $uiBorderColor;
-    padding: 5px
+    font-weight: 400
+    font-size: 13px
+    line-height: 30px
+    padding: 0 10px
     margin: 0 10px
+    cursor: pointer
 
-    a
-      text-decoration: none
-      cursor: pointer
-      line-height: 100%
+    &:hover
+      color: $hoverColor
+
+    &:active
+      color: $activeColor
 
   .userAccountSection
      margin: 0 10px
 
+  &.studyList
+    background-color: rgba(21, 25, 30, 0.7)
+    height: 160px
+
+    .brandSection
+      margin-top: 50px
+      margin-left: 50px
+
+      .logoText
+        font-size: 30px
+
+    .studyListLinkSection
+      position: absolute
+      border: none
+      top: 5px
+      left: 5px
+
 #worklistTabs
   height: "calc(100% - %s)" % $topBarHeight
 
diff --git a/Packages/lesiontracker/client/components/viewer/viewer.html b/Packages/lesiontracker/client/components/viewer/viewer.html
index d0b9f7875..7a7badd7e 100644
--- a/Packages/lesiontracker/client/components/viewer/viewer.html
+++ b/Packages/lesiontracker/client/components/viewer/viewer.html
@@ -1,16 +1,17 @@
 <template name="viewer">
     {{#if Template.subscriptionsReady}}
     <div id="viewer">
-        {{>confirmDeleteDialog}}
-        {{>lesionLocationDialog}}
-        {{>nonTargetLesionDialog}}
-        {{>nonTargetResponseDialog}}
+        {{ >confirmDeleteDialog }}
+        {{ >lesionLocationDialog }}
+        {{ >nonTargetLesionDialog }}
+        {{ >nonTargetResponseDialog }}
+        {{ >lesionTableHUD }}
         <!-- >conformanceCheckFeedback -->
 
         {{ >toolbarSection }}
         {{ >flexboxLayout }}
     </div>
     {{else}}
-        {{>loadingText}}
+        {{ >loadingText }}
     {{/if}}
 </template>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/worklist.styl b/Packages/worklist/client/components/worklist.styl
index 47005eaa4..e90e4b24d 100644
--- a/Packages/worklist/client/components/worklist.styl
+++ b/Packages/worklist/client/components/worklist.styl
@@ -20,7 +20,6 @@ body
   background-color: black
   margin: 0 auto
   color: white
-  padding: 20px 30px
   
 #tabs
   width: 100%
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.html b/Packages/worklist/client/components/worklistResult/worklistResult.html
index c59b4f9bf..3392b4da8 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.html
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.html
@@ -1,85 +1,96 @@
 <template name="worklistResult">
+    <div class="studyListToolbar">
+        <div class="header">
+            Study list
+        </div>
+        <div class="studyCount pull-right">
+            85
+        </div>
+        <div class="pull-right">
+            {{>worklistToolbar}}
+        </div>
+    </div>
     <div id="studyListContainer">
-        {{>worklistToolbar}}
         <table id="tblStudyList" class="worklistResult table noselect">
             <thead>
             <tr>
                 <th>
-                    <input type="text"
-                           class="form-control worklist-search"
-                           id="patientName"
-                           placeholder="Search Patient Name">
                     <div id="_patientName" class="sortingCell">
                         <span>Patient Name</span>
                         <i class="{{sortingColumnsIcons.patientName}}">&nbsp;</i>
                     </div>
+                    <input type="text"
+                           class="form-control worklist-search"
+                           id="patientName"
+                           placeholder="Patient Name">
                 </th>
                 <th>
+                    <div id="_patientId" class="sortingCell">
+                        <span>MRN</span>
+                        <i class="{{sortingColumnsIcons.patientId}}">&nbsp;</i>
+                    </div>
                     <input type="text"
                            class="form-control worklist-search"
                            id="patientId"
-                           placeholder="Search Patient ID">
-                    <div id="_patientId" class="sortingCell">
-                        <span>Patient ID</span>
-                        <i class="{{sortingColumnsIcons.patientId}}">&nbsp;</i>
-                    </div>
+                           placeholder="MRN">
                 </th>
 
                 {{#unless isTouchDevice}}
                     <th>
-                        <input type="text"
-                               class="form-control worklist-search"
-                               id="accessionNumber"
-                               placeholder="Search Accession #">
                         <div id="_accessionNumber" class="sortingCell">
                             <span>Accession #</span>
                             <i class="{{sortingColumnsIcons.accessionNumber}}">&nbsp;</i>
                         </div>
+                        <input type="text"
+                               class="form-control worklist-search"
+                               id="accessionNumber"
+                               placeholder="Accession #">
                     </th>
                 {{/unless}}
 
                 <th>
-                    <input type="text"
-                           class="form-control worklist-search"
-                           name="daterange"
-                           id="studyDate"
-                           placeholder="Search Study Date">
                     <div id="_studyDate" class="sortingCell">
                         <span>Study Date</span>
                         <i class="{{sortingColumnsIcons.studyDate}}">&nbsp;</i>
                     </div>
+                    <input type="text"
+                           class="form-control worklist-search"
+                           name="daterange"
+                           id="studyDate"
+                           placeholder="Study Date">
                 </th>
 
                 {{#unless isTouchDevice}}
                     <th>
-                        <input type="text"
-                               class="form-control worklist-search"
-                               id="modality"
-                               placeholder="Search Modality">
                         <div id="_modalities" class="sortingCell">
                             <span>Modality</span>
                             <i class="{{sortingColumnsIcons.modalities}}">&nbsp;</i>
                         </div>
+                        <input type="text"
+                               class="form-control worklist-search"
+                               id="modality"
+                               placeholder="Modality">
                     </th>
                 {{/unless}}
                 <th>
-                    <input type="text"
-                           class="form-control worklist-search"
-                           id="studyDescription"
-                           placeholder="Search Study Description">
                     <div id="_studyDescription" class="sortingCell">
                         <span>Study Description</span>
                         <i class="{{sortingColumnsIcons.studyDescription}}">&nbsp;</i>
                     </div>
+                    <input type="text"
+                           class="form-control worklist-search"
+                           id="studyDescription"
+                           placeholder="Study Description">
                 </th>
 
                 {{#unless isTouchDevice}}
-                    <th>
-                        <div id="_numberOfStudyRelatedInstances" class="sortingCell">
-                            <span># Images</span>
-                            <i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}">&nbsp;</i>
-                        </div>
-                    </th>
+                <th>
+                    <div id="_numberOfStudyRelatedInstances" class="sortingCell">
+                        <span># Images</span>
+                        <i class="{{sortingColumnsIcons.numberOfStudyRelatedInstances}}">&nbsp;</i>
+                    </div>
+                    <input type="text" class="form-control worklist-search invisible"/>
+                </th>
                 {{/unless}}
             </tr>
             </thead>
diff --git a/Packages/worklist/client/components/worklistResult/worklistResult.styl b/Packages/worklist/client/components/worklistResult/worklistResult.styl
index 2c5c550e2..60b3ebe30 100644
--- a/Packages/worklist/client/components/worklistResult/worklistResult.styl
+++ b/Packages/worklist/client/components/worklistResult/worklistResult.styl
@@ -1,20 +1,49 @@
-#studyListContainer
-  position: relative
-  table#tblStudyList
-    color: #888888
-    border-collapse: collapse
-    border-color: gray
+@import "{design}/app"
 
+$hoverColor = #2c363f
+$textPrimaryColor = white
+$textSecondaryColor = #91b9cd
+
+$inputBackgroundColor = #2c363f
+$inputPlaceholderColor = lightgray
+
+$studyListToolbarHeight = 75px
+
+.studyListToolbar
+  height: $studyListToolbarHeight
+  background: #151a1f
+  border-bottom: 2px solid black
+  padding: 0 30px
+
+  div
+    display: inline-block
+
+  .header
+    font-size: 22px
+    font-weight: 200
+    color: $textSecondaryColor
+    padding: 0 10px
+    line-height: $studyListToolbarHeight
+
+  .worklistToolbar
+    height: $studyListToolbarHeight
+    line-height: $studyListToolbarHeight
+
+  .studyCount
+    font-size: 40px
+    font-weight: 100
+    color: #6fbde2
+    padding: 0 10px
+    line-height: $studyListToolbarHeight
+
+#studyListContainer
+  table#tblStudyList
     thead
-      background-color: black
+      background-color: #151a1f
       white-space: nowrap
+      border-bottom: solid 1px #6fbde2;
 
       tr
-        th:first-child
-          div.sortingCell
-            border-right: 0.5px dashed #555555
-            border-left: none
-
         th
           padding: 0
 
@@ -24,11 +53,10 @@
             width: 100%
             min-width: 95px
             margin: 0 auto
-            color: white
-            padding: 10px
-            font-weight: 500
+            color: $textPrimaryColor
+            font-weight: 400
+            padding: 20px
             background: #171717
-            border-left: 0.5px dashed #555555
 
             span
               font-size: 15px
@@ -43,38 +71,38 @@
           input.worklist-search
             height: 34px
             margin: 0 5px 20px 5px
+            padding: 20px
             cursor: pointer
-            padding: 10px
             border: none
-            background-color: #707070
-            color: #434343
+            background-color: $inputBackgroundColor
+            color: $inputPlaceholderColor
             font-size: 10pt
             font-weight: normal
             width: calc(100% - 10px)
+            border-radius: 4px
             box-sizing: border-box
 
-            -webkit-transition: all 0.15s ease-in-out;
-            -moz-transition: all 0.15s ease-in-out;
-            -o-transition: all 0.15s ease-in-out;
-            transition: all 0.15s ease-in-out;
+            transition(all 0.15s ease)
+
+            &.invisible
+              visibility: hidden
 
             &:active, &:hover
-              color: black
-              background-color: #d3d3d9
+              background-color: $inputBackgroundColor
 
             &::-webkit-input-placeholder /* WebKit, Blink, Edge */
-              color:    #434343
+              color:    $inputPlaceholderColor
 
             &:-moz-placeholder /* Mozilla Firefox 4 to 18 */
-              color:    #434343
+              color:    $inputPlaceholderColor
               opacity:  1
 
             &::-moz-placeholder /* Mozilla Firefox 19+ */
-              color:    #434343
+              color:    $inputPlaceholderColor
               opacity:  1
 
             &:-ms-input-placeholder /* Internet Explorer 10-11 */
-              color:    #434343
+              color:    $inputPlaceholderColor
 
       ::-webkit-datetime-edit-year-field:not([aria-valuenow]),
       ::-webkit-datetime-edit-month-field:not([aria-valuenow]),
@@ -87,21 +115,23 @@
         padding: 5px
         background-color: black
 
+        &:nth-child(even)
+          background-color: #151a1f
+
         td
-          color: #ffffff
-          border-top: 0.5px dashed #555555
+          color: $textPrimaryColor
+          font-weight: 200
+          border-top: 1px solid #436270
           white-space: nowrap
 
-          -webkit-transition: all 0.1s ease
-          transition: all 0.1s ease
+          transition(all 0.1s ease)
 
         &:hover, &:active, &.active
-          background-color: #009BD2
+          background-color: $hoverColor
           color: white
 
           td
             // This selector is necessary to override bootstrap's 'table' class
-            border-top: 0.5px dashed #dddddd
-            border-bottom: 0.5px dashed #dddddd
-            color: white
-            background-color: #009BD2
\ No newline at end of file
+            border-top: 1px solid #436270
+            border-bottom: 1px solid #436270
+            background-color: $hoverColor
\ No newline at end of file
diff --git a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.html b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.html
index 4f495bc44..9f36fc19b 100644
--- a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.html
+++ b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.html
@@ -1,12 +1,12 @@
 <template name="worklistToolbar">
-    <div id='worklistToolbar'>
-        <div class="btn-group">
-            {{#if importSupported }}
-                <span class="btn btn-default btn-file">
-                    <i class="fa fa-upload"></i>
-                    <input id="btnImport" title="Import Study" type="file" webkitdirectory directory multiple>
-                </span>
-            {{/if }}
+    <div class='worklistToolbar'>
+        {{#if importSupported }}
+        <div class="addNewStudy btn-file">
+            <label for="btnImport">
+                <i class="fa fa-plus"></i> Add new study
+            </label>
+            <input id="btnImport" class="inputfile" type="file" webkitdirectory directory multiple>
         </div>
+        {{/if }}
     </div>
 </template>
\ No newline at end of file
diff --git a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.js b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.js
index d2c4b6d2c..fa294e0fa 100644
--- a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.js
+++ b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.js
@@ -11,7 +11,7 @@ Template.worklistToolbar.events({
     'click #btnImport': function(e) {
         // Reset file input
         var fileInput = e.currentTarget;
-        $(fileInput).val("");
+        $(fileInput).val('');
     }
 });
 
@@ -21,17 +21,14 @@ Template.worklistToolbar.helpers({
         var studyListFunctionsEnabled = Meteor.settings && Meteor.settings.public && Meteor.settings.public.ui &&
             Meteor.settings.public.ui.studyListFunctionsEnabled || false;
 
-        if (importSupported && studyListFunctionsEnabled) {
-            return true;
-        }
-        return false;
+        return (importSupported && studyListFunctionsEnabled);
     }
 });
 
-Meteor.call("importSupported", function(err, result) {
+Meteor.call('importSupported', function(err, result) {
     if (!err && result) {
         Session.set('importSupported', true);
     } else {
         Session.set('importSupported', false);
     }
-});
\ No newline at end of file
+});
diff --git a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
index e27fc9b2d..f72f3b898 100644
--- a/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
+++ b/Packages/worklist/client/components/worklistToolbar/worklistToolbar.styl
@@ -1,27 +1,24 @@
-#worklistToolbar
-  background-color: black
-  position: absolute
-  top: 0
-  right: 0
+@import "{design}/app"
 
-  .btn-file
-    position: relative
-    overflow: hidden
-    width: 30px
-    height: 30px
-    padding: 5px
-    line-height: 20px
+.worklistToolbar
+  .addNewStudy
+    margin: 0 10px
 
-    input[type=file]
-      position: absolute
-      top: 0
-      right: 0
-      min-width: 100%
-      min-height: 100%
-      font-size: 100 px
-      text-align: right
+    label
+      color: $textSecondaryColor
+      font-weight: 300
+      cursor: pointer
+
+      &:hover
+        color: $hoverColor
+
+      &:active
+        color: $activeColor
+
+    .inputfile
+      width: 0.1px;
+      height: 0.1px
       opacity: 0
-      outline: none
-      background: white
-      cursor: inherit
-      display: block
\ No newline at end of file
+      overflow: hidden
+      position: absolute
+      z-index: -1
\ No newline at end of file
diff --git a/Packages/worklist/package.js b/Packages/worklist/package.js
index 7b617cc3e..d447c65f1 100644
--- a/Packages/worklist/package.js
+++ b/Packages/worklist/package.js
@@ -16,6 +16,7 @@ Package.onUse(function (api) {
     api.use('silentcicero:jszip');
 
     // Our custom packages
+    api.use('design');
     api.use('dicomweb');
     api.use('dimseservice');
     api.use('orthanc-remote');