diff --git a/app/assets/javascripts/discourse/helpers/period-title.js.es6 b/app/assets/javascripts/discourse/helpers/period-title.js.es6
index 37af602c29d..5a8315117d1 100644
--- a/app/assets/javascripts/discourse/helpers/period-title.js.es6
+++ b/app/assets/javascripts/discourse/helpers/period-title.js.es6
@@ -30,7 +30,7 @@ export default htmlHelper((period, options) => {
         break;
     }
 
-    return `${title} <span class='top-date-string'>${dateString}</span>`;
+    return `<span class="date-section">${title}</span><span class='top-date-string'>${dateString}</span>`;
   } else {
     return title;
   }
diff --git a/app/assets/stylesheets/common/select-kit/period-chooser.scss b/app/assets/stylesheets/common/select-kit/period-chooser.scss
index 3994057f830..1759b9ddf68 100644
--- a/app/assets/stylesheets/common/select-kit/period-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/period-chooser.scss
@@ -18,10 +18,15 @@
 
         h2.selected-name {
           overflow: auto;
-          color: black;
+          color: $secondary;
           display: inline-block;
           box-sizing: border-box;
 
+          .date-section {
+            color: $primary;
+            margin-right: 5px;
+          }
+
           .top-date-string {
             font-size: $font-down-1;
             color: dark-light-choose($primary-medium, $secondary-high);
@@ -31,7 +36,7 @@
         }
 
         .d-icon {
-          color: black;
+          color: $primary;
           opacity: 1;
           margin: 5px 0 10px 5px;
           font-size: $font-up-3;
@@ -46,8 +51,7 @@
 
       .period-chooser-row {
         font-weight: bold;
-        padding: 5px;
-        color: #222;
+        padding: 5px;;
         font-size: $font-up-1;
         align-items: center;
         display: flex;
@@ -56,6 +60,10 @@
           flex: 1;
         }
 
+        .date-section {
+          color: $primary;
+        }
+
         .top-date-string {
           font-weight: normal;
           font-size: $font-down-1;