diff --git a/components/messages.js b/components/messages.js
index 98a64c4f..afd8d848 100644
--- a/components/messages.js
+++ b/components/messages.js
@@ -175,6 +175,8 @@ export const labels = defineMessages({
   browser: { id: 'label.browser', defaultMessage: 'Browser' },
   device: { id: 'label.device', defaultMessage: 'Device' },
   pageTitle: { id: 'label.pageTitle', defaultMessage: 'Page title' },
+  day: { id: 'label.day', defaultMessage: 'Day' },
+  date: { id: 'label.date', defaultMessage: 'Date' },
 });
 
 export const messages = defineMessages({
diff --git a/components/pages/reports/Report.js b/components/pages/reports/Report.js
index 0a98ef75..685ebb9f 100644
--- a/components/pages/reports/Report.js
+++ b/components/pages/reports/Report.js
@@ -8,6 +8,8 @@ export const ReportContext = createContext(null);
 export function Report({ reportId, defaultParameters, children, ...props }) {
   const report = useReport(reportId, defaultParameters);
 
+  //console.log({ report });
+
   return (
     <ReportContext.Provider value={{ ...report }}>
       <Page {...props} className={styles.container}>
diff --git a/components/pages/reports/retention/RetentionTable.js b/components/pages/reports/retention/RetentionTable.js
index 7d0f2522..01a84a01 100644
--- a/components/pages/reports/retention/RetentionTable.js
+++ b/components/pages/reports/retention/RetentionTable.js
@@ -2,9 +2,12 @@ import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { ReportContext } from '../Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { useMessages } from 'hooks';
+import { dateFormat } from 'lib/date';
 import styles from './RetentionTable.module.css';
 
 export function RetentionTable() {
+  const { formatMessage, labels } = useMessages();
   const { report } = useContext(ReportContext);
   const { data } = report || {};
 
@@ -19,21 +22,27 @@ export function RetentionTable() {
     return arr;
   }, []);
 
-  const days = Array(14).fill(null);
+  const days = Array(32).fill(null);
 
   return (
     <>
       <div className={styles.table}>
         <div className={styles.row}>
+          <div className={styles.date}>{formatMessage(labels.date)}</div>
           {days.map((n, i) => (
             <div key={i} className={styles.header}>
-              Day {i}
+              {formatMessage(labels.day)} {i}
             </div>
           ))}
         </div>
         {dates.map((date, i) => {
           return (
             <div key={i} className={styles.row}>
+              <div className={styles.date}>
+                {dateFormat(date, 'P')}
+                <br />
+                {date}
+              </div>
               {days.map((n, day) => {
                 return (
                   <div key={day} className={styles.cell}>
diff --git a/components/pages/reports/retention/RetentionTable.module.css b/components/pages/reports/retention/RetentionTable.module.css
index 785582a0..0943ffc0 100644
--- a/components/pages/reports/retention/RetentionTable.module.css
+++ b/components/pages/reports/retention/RetentionTable.module.css
@@ -26,3 +26,7 @@
   background: var(--blue100);
   border-radius: var(--border-radius);
 }
+
+.date {
+  min-width: 200px;
+}
diff --git a/hooks/useReport.js b/hooks/useReport.js
index e036fc3a..72f90af3 100644
--- a/hooks/useReport.js
+++ b/hooks/useReport.js
@@ -1,5 +1,6 @@
 import { produce } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
+import { useTimezone } from './useTimezone';
 import useApi from './useApi';
 
 const baseParameters = {
@@ -12,6 +13,7 @@ export function useReport(reportId, defaultParameters) {
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);
   const { get, post } = useApi();
+  const [timezone] = useTimezone();
 
   const loadReport = async id => {
     const data = await get(`/reports/${id}`);
@@ -33,7 +35,7 @@ export function useReport(reportId, defaultParameters) {
 
       const { type } = report;
 
-      const data = await post(`/reports/${type}`, parameters);
+      const data = await post(`/reports/${type}`, { ...parameters, timezone });
 
       setReport(
         produce(state => {
diff --git a/lib/date.js b/lib/date.js
index bf5dd90a..8a023822 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -250,9 +250,13 @@ export const customFormats = {
 };
 
 export function dateFormat(date, str, locale = 'en-US') {
-  return format(date, customFormats?.[locale]?.[str] || str, {
-    locale: getDateLocale(locale),
-  });
+  return format(
+    typeof date === 'string' ? new Date(date) : date,
+    customFormats?.[locale]?.[str] || str,
+    {
+      locale: getDateLocale(locale),
+    },
+  );
 }
 
 export function maxDate(...args) {
diff --git a/pages/api/reports/retention.ts b/pages/api/reports/retention.ts
index 83ed0b57..40b3266b 100644
--- a/pages/api/reports/retention.ts
+++ b/pages/api/reports/retention.ts
@@ -8,6 +8,7 @@ import { getRetention } from 'queries';
 export interface RetentionRequestBody {
   websiteId: string;
   dateRange: { window; startDate: string; endDate: string };
+  timezone: string;
 }
 
 export interface RetentionResponse {
@@ -26,6 +27,7 @@ export default async (
     const {
       websiteId,
       dateRange: { startDate, endDate },
+      timezone,
     } = req.body;
 
     if (!(await canViewWebsite(req.auth, websiteId))) {
@@ -35,6 +37,7 @@ export default async (
     const data = await getRetention(websiteId, {
       startDate: new Date(startDate),
       endDate: new Date(endDate),
+      timezone,
     });
 
     return ok(res, data);