diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js
index 4fc182408..fbe099835 100644
--- a/ui/src/shared/components/CustomTimeRange.js
+++ b/ui/src/shared/components/CustomTimeRange.js
@@ -40,39 +40,40 @@ class CustomTimeRange extends Component {
   render() {
     return (
       <div className="custom-time--container">
-        <div className="custom-time--moving-dates">
+        <div className="custom-time--shortcuts">
+          <div className="custom-time--shortcuts-header">Shortcuts</div>
           <div
-            className="custom-time--moving-date"
+            className="custom-time--shortcut"
             onClick={this.handleMovingTimeRange('pastWeek')}
           >
             Past Week
           </div>
           <div
-            className="custom-time--moving-date"
+            className="custom-time--shortcut"
             onClick={this.handleMovingTimeRange('pastMonth')}
           >
             Past Month
           </div>
           <div
-            className="custom-time--moving-date"
+            className="custom-time--shortcut"
             onClick={this.handleMovingTimeRange('pastYear')}
           >
             Past Year
           </div>
           <div
-            className="custom-time--moving-date"
+            className="custom-time--shortcut"
             onClick={this.handleMovingTimeRange('thisWeek')}
           >
             This Week
           </div>
           <div
-            className="custom-time--moving-date"
+            className="custom-time--shortcut"
             onClick={this.handleMovingTimeRange('thisMonth')}
           >
             This Month
           </div>
           <div
-            className="custom-time--moving-date"
+            className="custom-time--shortcut"
             onClick={this.handleMovingTimeRange('thisYear')}
           >
             This Year
diff --git a/ui/src/style/components/custom-time-range.scss b/ui/src/style/components/custom-time-range.scss
index 10f3813c4..48f2e924b 100644
--- a/ui/src/style/components/custom-time-range.scss
+++ b/ui/src/style/components/custom-time-range.scss
@@ -39,20 +39,26 @@
 .custom-time--upper {
   margin-left: 4px;
 }
-.custom-time--moving-dates {
+.custom-time--shortcuts {
   @include no-user-select();
   align-items: stretch;
   background-color: $g6-smoke;
   border-radius: $radius 0 0 $radius;
 }
-.custom-time--moving-date {
+.custom-time--shortcuts-header {
   white-space: nowrap;
-  padding: 8px 16px;
+  padding: 16px;
+  color: $g15-platinum;
+  font-weight: 700;
+}
+.custom-time--shortcut {
+  white-space: nowrap;
+  padding: 6px 16px;
   transition:
     color 0.25s ease,
     background-color 0.25s ease;
-  color: $g13-mist;
-  font-weight: 600;
+  color: $g11-sidewalk;
+  font-weight: 500;
 
   &:hover {
     cursor: pointer;