diff --git a/ui/src/shared/components/CustomTimeRange.js b/ui/src/shared/components/CustomTimeRange.js
index 341b92d7b0..9da0bdf377 100644
--- a/ui/src/shared/components/CustomTimeRange.js
+++ b/ui/src/shared/components/CustomTimeRange.js
@@ -51,10 +51,12 @@ class CustomTimeRange extends Component {
           {`${moment(lower).format('MMM Do HH:mm')} — ${moment(upper).format('MMM Do HH:mm')}`}
           <span className="caret"></span>
         </button>
-        <div className="custom-time-container">
-          <div className="time-lower" ref={(r) => this.lower = r} />
-          <div className="time-upper" ref={(r) => this.upper = r} />
-          <div className="apply-time button" onClick={this.handleClick}>Apply</div>
+        <div className="custom-time--container">
+          <div className="custom-time--dates">
+            <div className="custom-time--lower" ref={(r) => this.lower = r} />
+            <div className="custom-time--upper" ref={(r) => this.upper = r} />
+          </div>
+          <div className="custom-time--apply btn btn-sm btn-primary" onClick={this.handleClick}>Apply</div>
         </div>
       </div>
     )
diff --git a/ui/src/style/components/custom-time-range.scss b/ui/src/style/components/custom-time-range.scss
index b7490e6e42..ab701d4257 100644
--- a/ui/src/style/components/custom-time-range.scss
+++ b/ui/src/style/components/custom-time-range.scss
@@ -12,28 +12,243 @@
   .caret {
     position: absolute;
     right: 9px;
-    top: 50%;
+    top: calc(50% + 1px);
     transform: translateY(-50%);
   }
 }
-.custom-time-container {
+.custom-time--container {
   display: none;
   position: absolute;
-  top: 40px;
+  flex-direction: column;
+  align-items: center;
+  top: 35px;
   right: 0;
-  background: red;
+  background: $g5-pepper;
+  border-radius: $radius;
+  padding: 8px;
   z-index: 1000;
+  box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
 }
-.custom-time-range.show {
-  .custom-time-container {
-    display: block;
+.custom-time--dates {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.custom-time--lower {
+  margin-right: 4px;
+}
+.custom-time--upper {
+  margin-left: 4px;
+}
+
+$custom-time-arrow: 28px;
+$rd-cell-size: 30px;
+
+.rd-container {
+  display: flex !important;
+  flex-direction: column;
+  align-items: center;
+}
+.rd-date {
+  position: relative;
+}
+.rd-back,
+.rd-next,
+.rd-month-label {
+  position: absolute;
+  top: 0;
+  height: $custom-time-arrow;
+  line-height: $custom-time-arrow;
+}
+.rd-back,
+.rd-next {
+  outline: none;
+  width: $custom-time-arrow;
+  border: 0;
+  background-color: transparent;
+  border-radius: 50%;
+  color: $g15-platinum;
+  transition:
+    background-color 0.25s ease,
+    color 0.25s ease;
+
+  &:after {
+    font-family: 'icomoon' !important;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    color: inherit;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    font-size: 16px;
   }
-  .custom-time-range--btn {
-    color: $g20-white;
+  &:hover {
     background-color: $g6-smoke;
+    color: $g20-white;
+  }
+}
+.rd-back {
+  left: 0;
+  &:after {
+    left: calc(50% - 1px);
+    content: "\e90c";
+  }
+}
+.rd-next {
+  left: calc(100% - #{$custom-time-arrow});
+  &:after {
+    left: calc(50% + 1px);
+    content: "\e911";
+  }
+}
+.rd-month-label {
+  font-weight: 600;
+  color: $g15-platinum;
+  left: $custom-time-arrow;
+  text-align: center;
+  @include no-user-select();
+  width: calc(100% - #{($custom-time-arrow * 2)});
+}
+.rd-days {
+  margin-top: ($custom-time-arrow + 8px);
+  background-color: transparent;
+  border-radius: $radius-small;
+
+  /* Cancel out default table styles */
+  tr:hover {
+    background-color: transparent !important;
+    color: inherit !important;
+  }
+
+  thead.rd-days-head th.rd-day-head,
+  tbody.rd-days-body td.rd-day-body {
+    padding: 0 !important;
+    min-height: $rd-cell-size !important;
+    height: $rd-cell-size !important;
+    max-height: $rd-cell-size !important;
+    min-width: $rd-cell-size !important;
+    width: $rd-cell-size !important;
+    max-width: $rd-cell-size !important;
+    vertical-align: middle;
+    text-align: center;
+    border: 2px solid $g5-pepper !important;
+  }
+  thead.rd-days-head th.rd-day-head {
+    color: $g15-platinum !important;
+    background-color: $g5-pepper !important;
+  }
+  tbody.rd-days-body td.rd-day-body {
+    @include no-user-select();
+    letter-spacing: -1px;
+    font-family: $code-font;
+    transition:
+      background-color 0.25s ease,
+      color 0.25s ease;
+    color: $g13-mist !important;
+    background-color: $g3-castle;
+    border-radius: 5px;
+
+    &:hover {
+      cursor: $cc-pointer;
+      color: $g20-white !important;
+      background-color: $g6-smoke;
+    }
+    &.rd-day-next-month,
+    &.rd-day-prev-month {
+      cursor: $cc-default;
+      color: $g8-storm !important;
+      background-color: $g5-pepper !important;
+    }
+    &.rd-day-selected {
+      background-color: $c-pool !important;
+      color: $g20-white !important;
+    }
   }
 }
 
-.rd-day-selected {
-  background: blue;
+
+.rd-time {
+  margin: 0 2px;
+  width: calc(100% - 4px);
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
 }
+.rd-time-selected {
+  @include no-user-select();
+  height: 28px;
+  line-height: 28px;
+  background-color: $g3-castle;
+  border-radius: $radius-small;
+  width: 100%;
+  letter-spacing: -1px;
+  font-family: $code-font;
+  color: $g13-mist;
+  display: inline-block;
+  transition:
+    color 0.25s ease,
+    background-color 0.25s ease;
+  text-align: center;
+
+  &:hover {
+    color: $g20-white;
+    background-color: $g6-smoke;
+    cursor: $cc-pointer;
+  }
+}
+.rd-time-list {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 120px;
+  height: 200px;
+  transform: translate(-50%,-50%);
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  @include custom-scrollbar-round($c-pool, $c-laser);
+  @include gradient-h($c-ocean, $c-pool);
+  border-radius: $radius;
+  box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
+}
+
+.rd-time-option {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  padding-left: $scrollbar-width;
+  text-align: center;
+  @include no-user-select();
+  font-family: $code-font;
+  color: $c-yeti;
+  letter-spacing: -1px;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $g20-white;
+    cursor: $cc-pointer;
+    outline: none;
+    @include gradient-h($c-laser, $c-pool);
+  }
+}
+
+.custom-time--apply {
+  margin-top: 8px;
+  width: 120px;
+}
+
+
+/* Show State */
+.custom-time-range.show {
+  .custom-time--container {
+    display: flex;
+  }
+  .custom-time-range--btn {
+    color: $g20-white !important;
+    background-color: $g6-smoke;
+  }
+}
\ No newline at end of file