diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js
index 4fc1824080..fbe099835f 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/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js
index 8a46d29645..28288775de 100644
--- a/ui/src/shared/components/TimeRangeDropdown.js
+++ b/ui/src/shared/components/TimeRangeDropdown.js
@@ -88,7 +88,7 @@ class TimeRangeDropdown extends Component {
 
     return (
       <div className="time-range-dropdown">
-        <div className={classnames('dropdown dropdown-160', {open: isOpen})}>
+        <div className={classnames('dropdown dropdown-290', {open: isOpen})}>
           <div
             className="btn btn-sm btn-default dropdown-toggle"
             onClick={() => this.toggleMenu()}
@@ -116,7 +116,7 @@ class TimeRangeDropdown extends Component {
                     }
                   >
                     <a href="#" onClick={this.showCustomTimeRange}>
-                      Custom Time Range
+                      Date Picker
                     </a>
                   </li>}
               {timeRanges.map(item => {
diff --git a/ui/src/style/components/custom-time-range.scss b/ui/src/style/components/custom-time-range.scss
index 10f3813c46..48f2e924bc 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;