diff --git a/app/javascript/dashboard/components/ui/DateRangePicker.vue b/app/javascript/dashboard/components/ui/DateRangePicker.vue
index f8880fca5..83699a747 100644
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -4,6 +4,7 @@
       :range="true"
       :confirm="true"
       :clearable="false"
+      :editable="false"
       :confirm-text="confirmText"
       :placeholder="placeholder"
       :value="value"
@@ -53,5 +54,11 @@ export default {
     box-shadow: none;
     height: 4.6rem;
   }
+
+  .mx-input:disabled,
+  .mx-input[readonly] {
+    background-color: var(--white);
+    cursor: pointer;
+  }
 }
 </style>
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index cf2c14a57..0e0eb44fc 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -50,7 +50,15 @@
       {
         "id": 4,
         "name": "Last year"
+      },
+      {
+        "id": 5,
+        "name": "Custom date range"
       }
-    ]
+    ],
+    "CUSTOM_DATE_RANGE": {
+      "CONFIRM": "Apply",
+      "PLACEHOLDER": "Select date range"
+    }
   }
 }
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
index 4d830d856..9d6bf0fe3 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue
@@ -8,19 +8,28 @@
     >
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
     </woot-button>
-    <div class="small-3 pull-right">
-      <multiselect
-        v-model="currentDateRangeSelection"
-        track-by="name"
-        label="name"
-        :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
-        :options="dateRange"
-        :searchable="false"
-        :allow-empty="true"
-        @select="changeDateSelection"
+    <div class="range-selector">
+      <div class="small-3 pull-right">
+        <multiselect
+          v-model="currentDateRangeSelection"
+          track-by="name"
+          label="name"
+          :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
+          selected-label
+          :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+          deselect-label=""
+          :options="dateRange"
+          :searchable="false"
+          :allow-empty="false"
+          @select="changeDateSelection"
+        />
+      </div>
+      <woot-date-range-picker
+        v-if="isDateRangeSelected"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onChange"
       />
     </div>
     <div class="row">
@@ -57,6 +66,7 @@ import subDays from 'date-fns/subDays';
 import getUnixTime from 'date-fns/getUnixTime';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
 
 const REPORTS_KEYS = {
   CONVERSATIONS: 'conversations_count',
@@ -67,12 +77,18 @@ const REPORTS_KEYS = {
   RESOLUTION_COUNT: 'resolutions_count',
 };
 
+const CUSTOM_DATE_RANGE_ID = 5;
+
 export default {
+  components: {
+    WootDateRangePicker,
+  },
   data() {
     return {
       currentSelection: 0,
       currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
       dateRange: this.$t('REPORT.DATE_RANGE'),
+      customDateRange: [new Date(), new Date()],
     };
   },
   computed: {
@@ -81,9 +97,15 @@ export default {
       accountReport: 'getAccountReports',
     }),
     to() {
-      return getUnixTime(startOfDay(new Date()));
+      if (this.isDateRangeSelected) {
+        return this.fromCustomDate(this.customDateRange[1]);
+      }
+      return this.fromCustomDate(new Date());
     },
     from() {
+      if (this.isDateRangeSelected) {
+        return this.fromCustomDate(this.customDateRange[0]);
+      }
       const dateRange = {
         0: 6,
         1: 29,
@@ -93,7 +115,7 @@ export default {
       };
       const diff = dateRange[this.currentDateRangeSelection.id];
       const fromDate = subDays(new Date(), diff);
-      return getUnixTime(startOfDay(fromDate));
+      return this.fromCustomDate(fromDate);
     },
     collection() {
       if (this.accountReport.isFetching) {
@@ -130,6 +152,9 @@ export default {
         DESC: this.$t(`REPORT.METRICS.${key}.DESC`),
       }));
     },
+    isDateRangeSelected() {
+      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
+    },
   },
   mounted() {
     this.fetchAllData();
@@ -170,6 +195,18 @@ export default {
         to,
       });
     },
+    fromCustomDate(date) {
+      return getUnixTime(startOfDay(date));
+    },
+    onChange(value) {
+      this.customDateRange = value;
+      this.fetchAllData();
+    },
   },
 };
 </script>
+<style lang="scss" scoped>
+.range-selector {
+  display: flex;
+}
+</style>