diff --git a/platform/i18n/src/locales/en-US/Common.json b/platform/i18n/src/locales/en-US/Common.json
index 00cf4f4af..64c587150 100644
--- a/platform/i18n/src/locales/en-US/Common.json
+++ b/platform/i18n/src/locales/en-US/Common.json
@@ -1,4 +1,5 @@
 {
+  "Close": "Close",
   "Image": "Image",
   "Layout": "Layout",
   "Measurements": "Measurements",
diff --git a/platform/i18n/src/locales/en-US/DatePicker.json b/platform/i18n/src/locales/en-US/DatePicker.json
new file mode 100644
index 000000000..e2eb258de
--- /dev/null
+++ b/platform/i18n/src/locales/en-US/DatePicker.json
@@ -0,0 +1,5 @@
+{
+  "Clear dates": "Clear dates",
+  "End Date": "End Date",
+  "Start Date": "Start Date"
+}
\ No newline at end of file
diff --git a/platform/i18n/src/locales/en-US/index.js b/platform/i18n/src/locales/en-US/index.js
index 7540419ee..3d3e49b1f 100644
--- a/platform/i18n/src/locales/en-US/index.js
+++ b/platform/i18n/src/locales/en-US/index.js
@@ -2,6 +2,7 @@ import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
 import MeasurementTable from './MeasurementTable.json';
 import StudyList from './StudyList.json';
@@ -13,6 +14,7 @@ export default {
     Buttons,
     CineDialog,
     Common,
+    DatePicker,
     Header,
     MeasurementTable,
     StudyList,
diff --git a/platform/i18n/src/locales/pt-BR/Common.json b/platform/i18n/src/locales/pt-BR/Common.json
index 03de3c5eb..e23d93c6c 100644
--- a/platform/i18n/src/locales/pt-BR/Common.json
+++ b/platform/i18n/src/locales/pt-BR/Common.json
@@ -1,4 +1,5 @@
 {
+  "Close": "Fechar",
   "Image": "Imagem",
   "Layout": "Layout",
   "More": "Mais",
diff --git a/platform/i18n/src/locales/pt-BR/DatePicker.json b/platform/i18n/src/locales/pt-BR/DatePicker.json
new file mode 100644
index 000000000..a8dbd03e5
--- /dev/null
+++ b/platform/i18n/src/locales/pt-BR/DatePicker.json
@@ -0,0 +1,5 @@
+{
+  "Clear dates": "Limpar datas",
+  "End Date": "Data Final",
+  "Start Date": "Data Inicial"
+}
\ No newline at end of file
diff --git a/platform/i18n/src/locales/pt-BR/index.js b/platform/i18n/src/locales/pt-BR/index.js
index 98bb8bce2..1b37dc9a6 100644
--- a/platform/i18n/src/locales/pt-BR/index.js
+++ b/platform/i18n/src/locales/pt-BR/index.js
@@ -2,6 +2,7 @@ import AboutModal from './AboutModal.json';
 import Buttons from './Buttons.json';
 import CineDialog from './CineDialog.json';
 import Common from './Common.json';
+import DatePicker from './DatePicker.json';
 import Header from './Header.json';
 import UserPreferencesModal from './UserPreferencesModal.json';
 
@@ -11,6 +12,7 @@ export default {
     Buttons,
     CineDialog,
     Common,
+    DatePicker,
     Header,
     UserPreferencesModal,
   },
diff --git a/platform/ui/src/components/studyList/CustomDateRangePicker.css b/platform/ui/src/components/studyList/CustomDateRangePicker.css
index 2ad518939..6b2b07845 100644
--- a/platform/ui/src/components/studyList/CustomDateRangePicker.css
+++ b/platform/ui/src/components/studyList/CustomDateRangePicker.css
@@ -2,22 +2,23 @@
 
 /* Will edit everything selected including everything between a range of dates */
 .CalendarDay__selected_span {
-  background: var(--table-text-secondary-color);
-  color: #fff;
+  background: var(--datePicker-picker-background);
+  color: var(--datePicker-picker-text);
   border-color: #e4e7e7;
 }
 
 /* Will edit selected date or the endpoints of a range of dates */
 .CalendarDay__selected {
-  background: var(--table-text-secondary-color);
-  color: #fff;
+  background: var(--datePicker-picker-background);
+  color: var(--datePicker-picker-text);
   border-color: #e4e7e7;
 }
 
 /* Will edit when hovered over. _span style also has this property */
-.CalendarDay__selected:hover {
-  background: var(--table-text-secondary-color);
-  color: #fff;
+.CalendarDay__selected:hover,
+.CalendarDay__default:hover {
+  background: var(--datePicker-picker-background);
+  color: var(--datePicker-picker-text);
   border-color: #e4e7e7;
 }
 
@@ -25,8 +26,8 @@
 is not yet selected. Edits the dates between your mouse and said date */
 .CalendarDay__hovered_span:hover,
 .CalendarDay__hovered_span {
-  background: var(--table-text-secondary-color);
-  color: #fff;
+  background: var(--datePicker-picker-background);
+  color: var(--datePicker-picker-text);
   border-color: #e4e7e7;
 }
 
@@ -42,15 +43,15 @@ is not yet selected. Edits the dates between your mouse and said date */
 /* Container - visual */
 .DateRangePickerInput {
   width: calc(100% - 10px); /* Just use padding? */
-  background-color: var(--input-background-color);
-  border-color: var(--input-background-color);
-  color: var(--input-placeholder-color);
+  background-color: var(--datePicker-input-background);
+  border-color: var(--datePicker-input-background);
+  color: var(--datePicker-picker-text-input);
   height: 40px;
 }
 
 .DateRangePickerInput.DateRangePickerInput__withBorder {
   border-radius: 4px;
-  background-color: var(--input-background-color);
+  background-color: var(--datePicker-input-background);
 }
 
 /* Input Container */
@@ -58,14 +59,14 @@ is not yet selected. Edits the dates between your mouse and said date */
   width: 97px;
   height: 38px;
   border-radius: 4px;
-  background-color: var(--input-background-color);
+  background-color: var(--datePicker-input-background);
 }
 
 /* Actual Input Element */
 .DateInput > .DateInput_input {
   border-color: transparent;
   background-color: transparent;
-  color: var(--input-placeholder-color);
+  color: var(--datePicker-picker-text-input);
   height: 38px;
   font-size: 10pt;
   padding: 0;
@@ -80,4 +81,39 @@ is not yet selected. Edits the dates between your mouse and said date */
 .PresetDateRangePicker_button {
   margin: 0;
   padding: 4px 8px;
+  color: #00a699;
+  background: var(--datePicker-picker-text-input);
+}
+
+.PresetDateRangePicker_button:hover {
+  background: #00a699;
+  color: var(--datePicker-picker-text-input);
+}
+
+.CalendarDay__blocked_out_of_range:hover {
+  background: #fff;
+  cursor: not-allowed;
+  color: var(--datePicker-picker-text-disabled);
+}
+
+.DateRangePicker_select {
+  background-color: white;
+  color: var(--datePicker-picker-text);
+  border: 1px solid #e4e7e7;
+  border-radius: 4px;
+  display: inline-block;
+  padding: 3px 20px 3px 10px;
+  font-size: 14px;
+  cursor: pointer;
+  appearance: none;
+
+  background-image: linear-gradient(45deg, transparent 50%, gray 50%),
+    linear-gradient(135deg, gray 50%, transparent 50%);
+  background-position: calc(100% - 11px) 11px, calc(100% - 6px) calc(11px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+}
+
+.DateRangePicker_select:hover {
+  border-color: #c4c4c4;
 }
diff --git a/platform/ui/src/components/studyList/CustomDateRangePicker.js b/platform/ui/src/components/studyList/CustomDateRangePicker.js
index 4d8fc335b..17b5d47df 100644
--- a/platform/ui/src/components/studyList/CustomDateRangePicker.js
+++ b/platform/ui/src/components/studyList/CustomDateRangePicker.js
@@ -7,39 +7,25 @@ import './CustomDateRangePicker.css';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { DateRangePicker } from 'react-dates';
+import moment from 'moment';
+import i18n from '@ohif/i18n';
+import { useTranslation } from 'react-i18next';
 
-export default class CustomDateRangePicker extends React.Component {
-  static propTypes = {
-    presets: PropTypes.arrayOf(
-      PropTypes.shape({
-        text: PropTypes.string,
-        start: PropTypes.required,
-        end: PropTypes.required,
-      })
-    ),
-  };
+function CustomDateRangePicker(props) {
+  moment.locale(i18n.language); // using i18n in the date picker
 
-  constructor(props) {
-    super(props);
-    this.state = {
-      startDate: this.props.startDate,
-      endDate: this.props.endDate,
-    };
+  const { t } = useTranslation('DatePicker');
 
-    this.renderDatePresets = this.renderDatePresets.bind(this);
-    this.onDatesChange = this.onDatesChange.bind(this);
-  }
+  const {
+    onDatesChange,
+    startDate,
+    endDate,
+    presets,
+    ...dateRangePickerProps
+  } = props;
 
-  onDatesChange({ startDate, endDate, preset }) {
-    this.setState({ startDate, endDate });
-    if (this.props.onDatesChange) {
-      this.props.onDatesChange({ startDate, endDate, preset });
-    }
-  }
-
-  renderDatePresets() {
-    const { presets } = this.props;
-    const { startDate, endDate } = this.state;
+  const renderDatePresets = () => {
+    const { presets } = props;
 
     return (
       <div className="PresetDateRangePicker_panel">
@@ -54,7 +40,7 @@ export default class CustomDateRangePicker extends React.Component {
                 isSelected ? 'PresetDateRangePicker_button__selected' : ''
               }`}
               onClick={() =>
-                this.onDatesChange({
+                onDatesChange({
                   startDate: start,
                   endDate: end,
                   preset: true,
@@ -67,30 +53,89 @@ export default class CustomDateRangePicker extends React.Component {
         })}
       </div>
     );
-  }
+  };
+  const renderMonthElement = ({ month, onMonthSelect, onYearSelect }) => {
+    const containerStyle = {
+      margin: '0 5px',
+    };
 
-  render() {
-    let {
-      autoFocus,
-      autoFocusEndDate,
-      initialStartDate,
-      initialEndDate,
-      stateDateWrapper,
-      onDatesChange,
-      startDate,
-      endDate,
-      presets,
-      ...dateRangePickerProps
-    } = this.props;
+    const renderYearsOptions = () => {
+      const yearsRange = 20;
+      const options = [];
+
+      for (let i = 0; i < yearsRange; i++) {
+        const year = moment().year() - i;
+        options.push(<option value={year}>{year}</option>);
+      }
+
+      return options;
+    };
+
+    renderMonthElement.propTypes = {
+      onMonthSelect: PropTypes.func,
+      onYearSelect: PropTypes.func,
+    };
 
     return (
-      <DateRangePicker
-        {...dateRangePickerProps}
-        startDate={this.state.startDate}
-        endDate={this.state.endDate}
-        renderCalendarInfo={this.renderDatePresets}
-        onDatesChange={this.onDatesChange}
-      />
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <div style={containerStyle}>
+          <select
+            className="DateRangePicker_select"
+            value={month.month()}
+            onChange={e => onMonthSelect(month, e.target.value)}
+          >
+            {moment.months().map((label, value) => (
+              <option key={value} value={value}>
+                {label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div style={containerStyle}>
+          {}
+          <select
+            className="DateRangePicker_select"
+            value={month.year()}
+            onChange={e => onYearSelect(month, e.target.value)}
+          >
+            {renderYearsOptions()}
+          </select>
+        </div>
+      </div>
     );
-  }
+  };
+
+  return (
+    <DateRangePicker
+      {...dateRangePickerProps}
+      startDate={startDate}
+      endDate={endDate}
+      renderCalendarInfo={renderDatePresets}
+      onDatesChange={onDatesChange}
+      renderMonthElement={renderMonthElement}
+      startDatePlaceholderText={t('Start Date')}
+      endDatePlaceholderText={t('End Date')}
+      phrases={{
+        closeDatePicker: t('Common:Close'),
+        clearDates: t('Clear dates'),
+      }}
+    />
+  );
 }
+
+CustomDateRangePicker.propTypes = {
+  presets: PropTypes.arrayOf(
+    PropTypes.shape({
+      text: PropTypes.string,
+      start: PropTypes.required,
+      end: PropTypes.required,
+    })
+  ),
+  autoFocus: PropTypes.bool.isRequired,
+  onDatesChange: PropTypes.func.isRequired,
+  startDate: PropTypes.instanceOf(Date),
+  endDate: PropTypes.instanceOf(Date),
+  month: PropTypes.instanceOf(Date),
+};
+
+export default CustomDateRangePicker;
diff --git a/platform/ui/src/components/studyList/StudyList.js b/platform/ui/src/components/studyList/StudyList.js
index 84e0d31f5..76e4c1e56 100644
--- a/platform/ui/src/components/studyList/StudyList.js
+++ b/platform/ui/src/components/studyList/StudyList.js
@@ -25,7 +25,6 @@ function StudyList(props) {
     onFilterChange: handleFilterChange,
     onSelectItem: handleSelectItem,
     t,
-    //
     studyListDateFilterNumDays,
   } = props;
 
@@ -208,7 +207,6 @@ StudyList.propTypes = {
     allFields: PropTypes.string.isRequired,
   }).isRequired,
   onFilterChange: PropTypes.func.isRequired,
-  //
   studyListDateFilterNumDays: PropTypes.number,
 };
 
diff --git a/platform/ui/src/components/studyList/StudyList.styl b/platform/ui/src/components/studyList/StudyList.styl
index 807304bdf..564a00289 100644
--- a/platform/ui/src/components/studyList/StudyList.styl
+++ b/platform/ui/src/components/studyList/StudyList.styl
@@ -176,7 +176,7 @@ table.table
       margin: 0 auto;
       color: var(--table-text-primary-color);
       font-weight: 400;
-      padding: 20px;
+      padding: 20px 8px;
       user-select: none;
       font-size: 15px;
 
diff --git a/platform/ui/src/components/studyList/TableSearchFilter.js b/platform/ui/src/components/studyList/TableSearchFilter.js
index 6c422e797..e3a2aa514 100644
--- a/platform/ui/src/components/studyList/TableSearchFilter.js
+++ b/platform/ui/src/components/studyList/TableSearchFilter.js
@@ -6,8 +6,6 @@ import CustomDateRangePicker from './CustomDateRangePicker.js';
 import { Icon } from './../../elements/Icon';
 import { useTranslation } from 'react-i18next';
 
-
-
 function TableSearchFilter(props) {
   const {
     meta,
@@ -17,7 +15,7 @@ function TableSearchFilter(props) {
     sortFieldName,
     sortDirection,
     // TODO: Rename
-    studyListDateFilterNumDays
+    studyListDateFilterNumDays,
   } = props;
   const [focusedInput, setFocusedInput] = useState(null);
   const [t] = useTranslation(); // 'Common'?
@@ -25,11 +23,13 @@ function TableSearchFilter(props) {
   const sortIcons = ['sort', 'sort-up', 'sort-down'];
   const sortIconForSortField =
     sortDirection === 'asc' ? sortIcons[1] : sortIcons[2];
-  //
   const today = moment();
   const lastWeek = moment().subtract(7, 'day');
   const lastMonth = moment().subtract(1, 'month');
-  const defaultStartDate = moment().subtract(studyListDateFilterNumDays, 'days');
+  const defaultStartDate = moment().subtract(
+    studyListDateFilterNumDays,
+    'days'
+  );
   const defaultEndDate = today;
   const studyDatePresets = [
     {
@@ -82,8 +82,8 @@ function TableSearchFilter(props) {
             endDateId="end-date"
             // TODO: We need a dynamic way to determine which fields values to update
             onDatesChange={({ startDate, endDate, preset = false }) => {
-              onValueChange('studyDateTo', startDate);
-              onValueChange('studyDateFrom', endDate);
+              onValueChange('studyDateFrom', startDate);
+              onValueChange('studyDateTo', endDate);
             }}
             focusedInput={focusedInput}
             onFocusChange={updatedVal => setFocusedInput(updatedVal)}
diff --git a/platform/viewer/src/studylist/StudyListRoute.js b/platform/viewer/src/studylist/StudyListRoute.js
index 3218e7a26..f1c91f7b3 100644
--- a/platform/viewer/src/studylist/StudyListRoute.js
+++ b/platform/viewer/src/studylist/StudyListRoute.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useContext } from 'react';
 import PropTypes from 'prop-types';
-import Dropzone from 'react-dropzone';
 import OHIF from '@ohif/core';
 import { withRouter } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -113,7 +112,8 @@ function StudyListRoute(props) {
       pageNumber,
       displaySize,
       server,
-    ]);
+    ]
+  );
 
   // TODO: Update Server
   // if (this.props.server !== prevProps.server) {
@@ -188,10 +188,12 @@ function StudyListRoute(props) {
   }
 
   function handleFilterChange(fieldName, value) {
-    const updatedFilterValues = Object.assign({}, filterValues);
-
-    updatedFilterValues[fieldName] = value;
-    setFilterValues(updatedFilterValues);
+    setFilterValues(state => {
+      return {
+        ...state,
+        [fieldName]: value,
+      };
+    });
   }
 
   return (
diff --git a/platform/viewer/src/variables.css b/platform/viewer/src/variables.css
index 5fe5ef59f..a2501f499 100644
--- a/platform/viewer/src/variables.css
+++ b/platform/viewer/src/variables.css
@@ -31,4 +31,12 @@
 
   /** z-Index **/
   --snackbar-zIndex: 10;
+
+  /** DatePicker Colors **/
+  --datePicker-input-background: #2c363f;
+  --datePicker-picker-background: #9ccef9;
+  --datePicker-picker-disabled: #d3d3d3;
+  --datePicker-picker-text: #484848;
+  --datePicker-picker-text-disabled: #aaa;
+  --datePicker-picker-text-input: #fff;
 }