diff --git a/app/assets/javascripts/discourse/helpers/period-title.js.es6 b/app/assets/javascripts/discourse/helpers/period-title.js.es6
index 36ca2a69205..3753f0c167c 100644
--- a/app/assets/javascripts/discourse/helpers/period-title.js.es6
+++ b/app/assets/javascripts/discourse/helpers/period-title.js.es6
@@ -1,5 +1,3 @@
-import { iconHTML } from 'discourse/helpers/fa-icon';
-
 const TITLE_SUBS = {
   all: 'all_time',
   yearly: 'this_year',
@@ -7,7 +5,26 @@ const TITLE_SUBS = {
   daily: 'today',
 };
 
-export default Ember.Handlebars.makeBoundHelper(function (period) {
+export default Ember.Handlebars.makeBoundHelper(function (period, options) {
   const title = I18n.t('filters.top.' + (TITLE_SUBS[period] || 'this_week'));
-  return new Handlebars.SafeString(iconHTML('calendar-o') + " " + title);
+  if (options.hash.showDateRange) {
+    var dateString = "";
+    switch(period) {
+      case 'yearly':
+        dateString = moment().subtract(1, 'year').format(I18n.t('dates.full_with_year_no_time'));
+        break;
+      case 'weekly':
+        dateString = moment().subtract(1, 'week').format(I18n.t('dates.full_no_year_no_time')) + " - " + moment().format(I18n.t('dates.full_no_year_no_time'));
+        break;
+      case 'monthly':
+        dateString = moment().subtract(1, 'month').format(I18n.t('dates.full_no_year_no_time')) + " - " + moment().format(I18n.t('dates.full_no_year_no_time'));
+        break;
+      case 'daily':
+        dateString = moment().format(I18n.t('dates.full_no_year_no_time'));
+        break;
+    }
+    return new Handlebars.SafeString(title + " <span class='top-date-string'>" + dateString + "</span>");
+  } else {
+    return new Handlebars.SafeString(title);
+  }
 });
diff --git a/app/assets/javascripts/discourse/templates/components/period-chooser.hbs b/app/assets/javascripts/discourse/templates/components/period-chooser.hbs
index 8f7fddc94f6..570d7034e7a 100644
--- a/app/assets/javascripts/discourse/templates/components/period-chooser.hbs
+++ b/app/assets/javascripts/discourse/templates/components/period-chooser.hbs
@@ -1,4 +1,4 @@
-<h2>{{period-title period}}</h2>
+<h2>{{period-title period showDateRange=true}}</h2>
 <button>{{fa-icon "caret-down"}}</button>
 
 <div id='period-popup' {{bind-attr class="showPeriods::hidden :period-popup"}}>
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index d6d2fb5b7a7..ebd2d26860c 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -232,6 +232,13 @@ ol.category-breadcrumb {
   h2 {
     float: left;
     margin: 5px 0 10px;
+
+    .top-date-string {
+      color: scale-color($primary, $lightness: 60%);
+      font-weight: normal;
+      font-size: 0.7em;
+      text-transform: uppercase;
+    }
   }
 
   button {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 388b178b033..b276ae68182 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -33,8 +33,10 @@ en:
       time: "h:mm a"
       long_no_year: "MMM D h:mm a"
       long_no_year_no_time: "MMM D"
+      full_no_year_no_time: "MMMM Do"
       long_with_year: "MMM D, YYYY h:mm a"
       long_with_year_no_time: "MMM D, YYYY"
+      full_with_year_no_time: "MMMM Do, YYYY"
       long_date_with_year: "MMM D, 'YY LT"
       long_date_without_year: "MMM D, LT"
       long_date_with_year_without_time: "MMM D, 'YY"