diff --git a/client/src/components/profile/components/HeatMap.js b/client/src/components/profile/components/HeatMap.js
index a9d5f8af1b..166b82f074 100644
--- a/client/src/components/profile/components/HeatMap.js
+++ b/client/src/components/profile/components/HeatMap.js
@@ -5,7 +5,7 @@ import ReactTooltip from 'react-tooltip';
 import addDays from 'date-fns/add_days';
 import addMonths from 'date-fns/add_months';
 import startOfDay from 'date-fns/start_of_day';
-import format from 'date-fns/format';
+import isEqual from 'date-fns/is_equal';
 
 import FullWidthRow from '../../helpers/FullWidthRow';
 import Spacer from '../../helpers/Spacer';
@@ -22,33 +22,17 @@ const propTypes = {
 };
 
 function HeatMap({ calendar, streak }) {
-  // an issue with react-calendar-heatmap makes the days off by one
-  // see this https://github.com/kevinsqi/react-calendar-heatmap/issues/112
-  // I have added one day in the marked places to account for the offset
-
-  // this logic adds a day to all the timestamps (remove if issue gets fixed)
-  let tempCalendar = {};
-  const secondsInADay = 60 * 60 * 24;
-  for (let timestamp of Object.keys(calendar)) {
-    tempCalendar[parseInt(timestamp, 10) + secondsInADay] = 1;
-  }
-
-  calendar = tempCalendar;
-
-  // the addDays of 1 to startOfToday (remove if issue gets fixed)
-  const startOfToday = addDays(startOfDay(Date.now()), 1);
-  const sixMonthsAgo = addMonths(startOfToday, -6);
-  const startOfCalendar = format(addDays(sixMonthsAgo, -1), 'YYYY-MM-DD');
-  const endOfCalendar = format(startOfToday, 'YYYY-MM-DD');
+  const endOfCalendar = startOfDay(Date.now());
+  const startOfCalendar = addMonths(endOfCalendar, -6);
 
   let calendarData = [];
-  let dayCounter = sixMonthsAgo;
+  let dayCounter = startOfCalendar;
 
   // create a data point for each day of the calendar period (six months)
-  while (dayCounter <= startOfToday) {
+  while (dayCounter <= endOfCalendar) {
     // this is the format needed for react-calendar-heatmap
     const newDay = {
-      date: format(dayCounter, 'YYYY-MM-DD'),
+      date: startOfDay(dayCounter),
       count: 0
     };
 
@@ -56,13 +40,11 @@ function HeatMap({ calendar, streak }) {
     dayCounter = addDays(dayCounter, 1);
   }
 
-  // this adds one to the count of the day for each timestamp
   for (let timestamp of Object.keys(calendar)) {
     timestamp = Number(timestamp * 1000) || null;
     if (timestamp) {
-      const startOfTimestampDay = format(startOfDay(timestamp), 'YYYY-MM-DD');
-      const index = calendarData.findIndex(
-        day => day.date === startOfTimestampDay
+      const index = calendarData.findIndex(day =>
+        isEqual(day.date, startOfDay(timestamp))
       );
 
       if (index >= 0) {
@@ -93,14 +75,16 @@ function HeatMap({ calendar, streak }) {
             } else {
               valueCount = 'No points';
             }
+            const dateFormatted = value.date
+              ? 'on ' +
+                value.date.toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'short',
+                  day: 'numeric'
+                })
+              : '';
             return {
-              'data-tip': `<b>${valueCount}</b> on ${new Date(
-                value.date
-              ).toLocaleDateString('en-US', {
-                year: 'numeric',
-                month: 'short',
-                day: 'numeric'
-              })}`
+              'data-tip': `<b>${valueCount}</b> ${dateFormatted}`
             };
           }}
           values={calendarData}
diff --git a/client/src/components/profile/components/__snapshots__/HeatMap.test.js.snap b/client/src/components/profile/components/__snapshots__/HeatMap.test.js.snap
index 4f6db267d9..af7e0b2ce3 100644
--- a/client/src/components/profile/components/__snapshots__/HeatMap.test.js.snap
+++ b/client/src/components/profile/components/__snapshots__/HeatMap.test.js.snap
@@ -2168,9 +2168,9 @@ exports[`<HeatMap/> renders correctly 1`] = `
                   <title />
                 </rect>
                 <rect
-                  class="color-empty"
+                  class="color-scale-1"
                   currentItem="false"
-                  data-tip="<b>No points</b> on Jan 30, 2020"
+                  data-tip="<b>2 points</b> on Jan 30, 2020"
                   height="10"
                   width="10"
                   x="0"
@@ -2179,9 +2179,9 @@ exports[`<HeatMap/> renders correctly 1`] = `
                   <title />
                 </rect>
                 <rect
-                  class="color-scale-1"
+                  class="color-empty"
                   currentItem="false"
-                  data-tip="<b>2 points</b> on Jan 31, 2020"
+                  data-tip="<b>No points</b> on Jan 31, 2020"
                   height="10"
                   width="10"
                   x="0"
@@ -2227,17 +2227,6 @@ exports[`<HeatMap/> renders correctly 1`] = `
                 >
                   <title />
                 </rect>
-                <rect
-                  class="color-empty"
-                  currentItem="false"
-                  data-tip="<b>No points</b> on Feb 4, 2020"
-                  height="10"
-                  width="10"
-                  x="0"
-                  y="22"
-                >
-                  <title />
-                </rect>
               </g>
             </g>
             <g