diff --git a/__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap b/__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap
index ed3f5e749f..cc189c8d4c 100644
--- a/__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap
+++ b/__tests__/shared/components/challenge-listing/Filters/__snapshots__/FiltersPanel.jsx.snap
@@ -113,7 +113,7 @@ exports[`Matches shallow shapshot 1`] = `
         />
       </div>
       <div
-        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c"
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hidetwomonthdatepicker___OurWT"
       >
         <label
           htmlFor="date-range-picker"
@@ -123,6 +123,23 @@ exports[`Matches shallow shapshot 1`] = `
         <DateRangePicker
           endDate={undefined}
           id="date-range-picker"
+          numberOfMonths="1"
+          onDatesChange={[Function]}
+          startDate={undefined}
+        />
+      </div>
+      <div
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hideonemonthdatepicker___2zdTb"
+      >
+        <label
+          htmlFor="date-range-picker"
+        >
+          Date range
+        </label>
+        <DateRangePicker
+          endDate={undefined}
+          id="date-range-picker"
+          numberOfMonths="2"
           onDatesChange={[Function]}
           startDate={undefined}
         />
@@ -239,7 +256,23 @@ exports[`Matches shallow shapshot 2`] = `
         />
       </div>
       <div
-        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c"
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hidetwomonthdatepicker___OurWT"
+      >
+        <label
+          htmlFor="date-range-picker"
+        >
+          Date range
+        </label>
+        <DateRangePicker
+          endDate={undefined}
+          id="date-range-picker"
+          numberOfMonths="1"
+          onDatesChange={[Function]}
+          startDate={undefined}
+        />
+      </div>
+      <div
+        className="src-shared-components-challenge-listing-Filters-FiltersPanel-___style__filter___1-QUz src-shared-components-challenge-listing-Filters-FiltersPanel-___style__dates___3kH3c src-shared-components-challenge-listing-Filters-FiltersPanel-___style__hideonemonthdatepicker___2zdTb"
       >
         <label
           htmlFor="date-range-picker"
@@ -249,6 +282,7 @@ exports[`Matches shallow shapshot 2`] = `
         <DateRangePicker
           endDate={undefined}
           id="date-range-picker"
+          numberOfMonths="2"
           onDatesChange={[Function]}
           startDate={undefined}
         />
diff --git a/src/shared/components/challenge-listing/Filters/DateRangePicker.jsx b/src/shared/components/challenge-listing/Filters/DateRangePicker.jsx
index 61e8f55fb2..d4276633fd 100644
--- a/src/shared/components/challenge-listing/Filters/DateRangePicker.jsx
+++ b/src/shared/components/challenge-listing/Filters/DateRangePicker.jsx
@@ -28,6 +28,7 @@ class DateRangePicker extends React.Component {
   render() {
     return (
       <WrappedDateRangePicker
+        numberOfMonths={this.props.numberOfMonths}
         focusedInput={this.state.focusedInput}
         isOutsideRange={() => false}
         onDatesChange={this.props.onDatesChange}
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
index 6da8f23a73..28b1f8471c 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/index.jsx
@@ -105,9 +105,28 @@ export default function FiltersPanel({
               }
             />
           </div>
-          <div styleName="filter dates">
+          <div styleName="filter dates hidetwomonthdatepicker">
             <label htmlFor="date-range-picker">Date range</label>
             <DateRangePicker
+              numberOfMonths="1"
+              endDate={filterState.endDate && moment(filterState.endDate)}
+              id="date-range-picker"
+              onDatesChange={(dates) => {
+                let d = dates.endDate ? dates.endDate.toISOString() : null;
+                let state = Filter.setEndDate(filterState, d);
+                d = dates.startDate ? dates.startDate.toISOString() : null;
+                state = Filter.setStartDate(state, d);
+                setFilterState(state);
+              }}
+              startDate={
+                filterState.startDate && moment(filterState.startDate)
+              }
+            />
+          </div>
+          <div styleName="filter dates hideonemonthdatepicker">
+            <label htmlFor="date-range-picker">Date range</label>
+            <DateRangePicker
+              numberOfMonths="2"
               endDate={filterState.endDate && moment(filterState.endDate)}
               id="date-range-picker"
               onDatesChange={(dates) => {
diff --git a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
index df7ff51432..b29b999843 100644
--- a/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
+++ b/src/shared/components/challenge-listing/Filters/FiltersPanel/style.scss
@@ -28,6 +28,7 @@ $panel-radius-4: $corner-radius * 2;
     right: 0;
     background: $tc-white;
     padding: 15px;
+    overflow-y: scroll;
   }
 
   &.hidden {
@@ -85,6 +86,7 @@ $panel-radius-4: $corner-radius * 2;
       width: 100%;
       padding-left: 0;
       border-left: none;
+      margin-bottom: $panel-space-100;
     }
 
     button {
@@ -197,6 +199,18 @@ $panel-radius-4: $corner-radius * 2;
       @include xxs-to-sm {
         margin-top: 20px;
       }
+
+      &.hidetwomonthdatepicker {
+        @media screen and (min-width: $screen-md) {
+          display: none;
+        }
+      }
+
+      &.hideonemonthdatepicker {
+        @media screen and (max-width: $screen-md - 1px) {
+          display: none;
+        }
+      }
     }
   }
 }