diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html
index c74a91c2d..15312adac 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.html
@@ -4,7 +4,7 @@
             <div class="p-x-1">
                 {{#each timepoint in timepoints}}
                     {{#if shouldShowTimepoint timepoint @index}}
-                        <div class="timepointEntry p-y-2 active">
+                        <div class="timepointEntry p-y-2">
                             <div class="timepointHeader">
                                 <div class="timepointDetails clearfix">
                                     <div class="timepointFollowupTitle pull-left">
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js
index 7e835f98d..ac2d3c732 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointBrowser.js
@@ -1,3 +1,18 @@
+Template.studyTimepointBrowser.onRendered(() => {
+    const instance = Template.instance();
+    instance.autorun(() => {
+        // Runs this computation everytime the timepointViewType is changed
+        const type = instance.data.timepointViewType.get();
+
+        // Removes all active classes to collapse the timepoints and studies
+        instance.$('.timepointEntry, .studyTimepointStudy').removeClass('active');
+        if (type === 'key') {
+            // Show only first timepoint expanded for key timepoints
+            instance.$('.timepointEntry:first').addClass('active');
+        }
+    });
+});
+
 Template.studyTimepointBrowser.events({
     'click .timepointHeader'(event, instance) {
         const $timepoint = $(event.currentTarget).closest('.timepointEntry');
@@ -11,21 +26,28 @@ Template.studyTimepointBrowser.events({
 });
 
 Template.studyTimepointBrowser.helpers({
-    timepoints: function() {
+    timepoints() {
+        // Sort timepoints based on timeline and type
         const sort = {
             sort: {
-                earliestDate: -1
+                earliestDate: -1,
+                timepointType: -1
             }
         };
+        // Returns all timepoints with sorting
         return Timepoints.find({}, sort);
     },
+    // Decides if a timepoint should be shown or omitted
     shouldShowTimepoint(timepoint, index) {
         const instance = Template.instance();
+
+        // Show all timepoints when view type is all
         if (instance.data.timepointViewType.get() === 'all') {
             return true;
         }
 
-        return index < 4 || timepoint.timepointType === 'baseline';
+        // Show only the latest timepoints and baseline
+        return index < 3 || timepoint.timepointType === 'baseline';
     },
     // Build the timepoint title based on its date
     timepointTitle(timepoint, total, index) {
@@ -39,7 +61,7 @@ Template.studyTimepointBrowser.helpers({
             2: '(Nadir)'
         };
         // TODO: [design] find out how to define the nadir timepoint
-        const followUp = total - index - 1;
+        const followUp = total - index;
         const parenthesis = states[index] || '';
         return `Follow-up ${followUp} ${parenthesis}`;
     }