diff --git a/components/common/DateFilter.js b/components/common/DateFilter.js
index 63705e94..d3699560 100644
--- a/components/common/DateFilter.js
+++ b/components/common/DateFilter.js
@@ -1,14 +1,14 @@
-import Calendar from 'assets/calendar-alt.svg';
-import DatePickerForm from 'components/forms/DatePickerForm';
-import { endOfYear, isSameDay } from 'date-fns';
-import useLocale from 'hooks/useLocale';
-import { dateFormat, getDateRange } from 'lib/date';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import DropDown from './DropDown';
-import Icon from './Icon';
+import { endOfYear, isSameDay } from 'date-fns';
 import Modal from './Modal';
+import DropDown from './DropDown';
+import DatePickerForm from 'components/forms/DatePickerForm';
+import useLocale from 'hooks/useLocale';
+import { getDateRange, dateFormat } from 'lib/date';
+import Calendar from 'assets/calendar-alt.svg';
+import Icon from './Icon';
 
 const filterOptions = [
   { label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index 0a9dbb70..a1607867 100644
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@@ -1,15 +1,15 @@
-import Dots from 'assets/ellipsis-h.svg';
-import Refresh from 'assets/redo.svg';
-import useDateRange from 'hooks/useDateRange';
-import useLocale from 'hooks/useLocale';
-import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
+import { FormattedMessage } from 'react-intl';
 import { setDateRange } from 'redux/actions/websites';
-import { getDateRange } from '../../lib/date';
 import Button from './Button';
+import Refresh from 'assets/redo.svg';
+import Dots from 'assets/ellipsis-h.svg';
+import useDateRange from 'hooks/useDateRange';
+import { getDateRange } from '../../lib/date';
+import useLocale from 'hooks/useLocale';
+import { DEFAULT_DATE_RANGE } from '../../lib/constants';
 
 function RefreshButton({ websiteId, createdAt }) {
   const dispatch = useDispatch();
diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js
index 68556c96..746a2048 100644
--- a/components/metrics/EventsChart.js
+++ b/components/metrics/EventsChart.js
@@ -7,10 +7,10 @@ import useDateRange from 'hooks/useDateRange';
 import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import useShareToken from 'hooks/useShareToken';
-import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants';
+import { EVENT_COLORS, TOKEN_HEADER, DEFAULT_DATE_RANGE } from 'lib/constants';
 
-export default function EventsChart({ websiteId, className, token }) {
-  const [dateRange] = useDateRange(websiteId);
+export default function EventsChart({ websiteId, className, token, createdAt }) {
+  const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt);
   const { startDate, endDate, unit, modified } = dateRange;
   const [timezone] = useTimezone();
   const { query } = usePageQuery();
diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js
index 06ed7646..91acfed8 100644
--- a/components/metrics/MetricsBar.js
+++ b/components/metrics/MetricsBar.js
@@ -1,14 +1,14 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import ErrorMessage from 'components/common/ErrorMessage';
 import Loading from 'components/common/Loading';
-import useDateRange from 'hooks/useDateRange';
+import ErrorMessage from 'components/common/ErrorMessage';
 import useFetch from 'hooks/useFetch';
+import useDateRange from 'hooks/useDateRange';
 import usePageQuery from 'hooks/usePageQuery';
 import useShareToken from 'hooks/useShareToken';
+import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
 import { DEFAULT_DATE_RANGE, TOKEN_HEADER } from 'lib/constants';
-import { formatLongNumber, formatNumber, formatShortTime } from 'lib/format';
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import MetricCard from './MetricCard';
 import styles from './MetricsBar.module.css';
 
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 95eb00c3..9f1884eb 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -12,7 +12,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import useShareToken from 'hooks/useShareToken';
 import ErrorMessage from 'components/common/ErrorMessage';
 import DataTable from './DataTable';
-import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
+import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER, DEFAULT_DATE_RANGE } from 'lib/constants';
 import styles from './MetricsTable.module.css';
 
 export default function MetricsTable({
@@ -23,10 +23,11 @@ export default function MetricsTable({
   filterOptions,
   limit,
   onDataLoad,
+  createdAt,
   ...props
 }) {
   const shareToken = useShareToken();
-  const [dateRange] = useDateRange(websiteId);
+  const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt);
   const { startDate, endDate, modified } = dateRange;
   const {
     resolve,
diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js
index c137589f..9f0b4473 100644
--- a/components/metrics/PagesTable.js
+++ b/components/metrics/PagesTable.js
@@ -11,7 +11,7 @@ import styles from './PagesTable.module.css';
 export const FILTER_COMBINED = 0;
 export const FILTER_RAW = 1;
 
-export default function PagesTable({ websiteId, websiteDomain, showFilters, ...props }) {
+export default function PagesTable({ websiteId, websiteDomain, showFilters, createdAt, ...props }) {
   const [filter, setFilter] = useState(FILTER_COMBINED);
   const {
     resolve,
@@ -52,6 +52,7 @@ export default function PagesTable({ websiteId, websiteDomain, showFilters, ...p
         dataFilter={urlFilter}
         filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
         renderLabel={renderLink}
+        createdAt={createdAt}
         {...props}
       />
     </>
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index fab9627b..f4238db5 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -1,22 +1,21 @@
-import Times from 'assets/times.svg';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import Button from 'components/common/Button';
+import PageviewsChart from './PageviewsChart';
+import MetricsBar from './MetricsBar';
+import WebsiteHeader from './WebsiteHeader';
 import DateFilter from 'components/common/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
-import useDateRange from 'hooks/useDateRange';
+import Button from 'components/common/Button';
 import useFetch from 'hooks/useFetch';
-import usePageQuery from 'hooks/usePageQuery';
+import useDateRange from 'hooks/useDateRange';
 import useTimezone from 'hooks/useTimezone';
-import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import usePageQuery from 'hooks/usePageQuery';
 import { getDateArray, getDateLength } from 'lib/date';
-import { useMemo } from 'react';
-import useShareToken from '../../hooks/useShareToken';
-import { TOKEN_HEADER } from '../../lib/constants';
-import ErrorMessage from '../common/ErrorMessage';
-import MetricsBar from './MetricsBar';
-import PageviewsChart from './PageviewsChart';
+import Times from 'assets/times.svg';
 import styles from './WebsiteChart.module.css';
-import WebsiteHeader from './WebsiteHeader';
+import ErrorMessage from '../common/ErrorMessage';
+import useShareToken from '../../hooks/useShareToken';
+import { TOKEN_HEADER, DEFAULT_DATE_RANGE } from '../../lib/constants';
 
 export default function WebsiteChart({
   websiteId,
diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js
index af9cea11..c75f8b90 100644
--- a/components/metrics/WebsiteHeader.js
+++ b/components/metrics/WebsiteHeader.js
@@ -1,11 +1,12 @@
-import Arrow from 'assets/arrow-right.svg';
-import Favicon from 'components/common/Favicon';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import Link from 'components/common/Link';
+import PageHeader from 'components/layout/PageHeader';
 import RefreshButton from 'components/common/RefreshButton';
 import ButtonLayout from 'components/layout/ButtonLayout';
-import PageHeader from 'components/layout/PageHeader';
-import { FormattedMessage } from 'react-intl';
+import Favicon from 'components/common/Favicon';
 import ActiveUsers from './ActiveUsers';
+import Arrow from 'assets/arrow-right.svg';
 import styles from './WebsiteHeader.module.css';
 
 export default function WebsiteHeader({ websiteId, title, domain, showLink = false, createdAt }) {
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index a1a4486b..a942653a 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -1,27 +1,27 @@
-import Arrow from 'assets/arrow-right.svg';
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
+import WebsiteChart from 'components/metrics/WebsiteChart';
+import WorldMap from 'components/common/WorldMap';
+import Page from 'components/layout/Page';
+import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout';
+import MenuLayout from 'components/layout/MenuLayout';
 import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
-import WorldMap from 'components/common/WorldMap';
-import GridLayout, { GridColumn, GridRow } from 'components/layout/GridLayout';
-import MenuLayout from 'components/layout/MenuLayout';
-import Page from 'components/layout/Page';
-import WebsiteChart from 'components/metrics/WebsiteChart';
+import Arrow from 'assets/arrow-right.svg';
+import styles from './WebsiteDetails.module.css';
+import PagesTable from '../metrics/PagesTable';
+import ReferrersTable from '../metrics/ReferrersTable';
+import BrowsersTable from '../metrics/BrowsersTable';
+import OSTable from '../metrics/OSTable';
+import DevicesTable from '../metrics/DevicesTable';
+import CountriesTable from '../metrics/CountriesTable';
+import EventsTable from '../metrics/EventsTable';
+import EventsChart from '../metrics/EventsChart';
 import useFetch from 'hooks/useFetch';
 import usePageQuery from 'hooks/usePageQuery';
 import useShareToken from 'hooks/useShareToken';
 import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants';
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
-import BrowsersTable from '../metrics/BrowsersTable';
-import CountriesTable from '../metrics/CountriesTable';
-import DevicesTable from '../metrics/DevicesTable';
-import EventsChart from '../metrics/EventsChart';
-import EventsTable from '../metrics/EventsTable';
-import OSTable from '../metrics/OSTable';
-import PagesTable from '../metrics/PagesTable';
-import ReferrersTable from '../metrics/ReferrersTable';
-import styles from './WebsiteDetails.module.css';
 
 const views = {
   url: PagesTable,
@@ -88,12 +88,6 @@ export default function WebsiteDetails({ websiteId }) {
     },
   ];
 
-  const tableProps = {
-    websiteId,
-    websiteDomain: data?.domain,
-    limit: 10,
-  };
-
   const DetailsComponent = views[view];
 
   function handleDataLoad() {
@@ -106,6 +100,13 @@ export default function WebsiteDetails({ websiteId }) {
     return null;
   }
 
+  const tableProps = {
+    websiteId,
+    websiteDomain: data?.domain,
+    limit: 10,
+    createdAt: data?.created_at,
+  };
+
   return (
     <Page>
       <div className="row">
@@ -156,7 +157,11 @@ export default function WebsiteDetails({ websiteId }) {
               <EventsTable {...tableProps} onDataLoad={setEventsData} />
             </GridColumn>
             <GridColumn xs={12} md={12} lg={8}>
-              <EventsChart className={styles.eventschart} websiteId={websiteId} />
+              <EventsChart
+                className={styles.eventschart}
+                websiteId={websiteId}
+                createdAt={data.created_at}
+              />
             </GridColumn>
           </GridRow>
         </GridLayout>
diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js
index dd4cf172..44ae8ae1 100644
--- a/components/pages/WebsiteList.js
+++ b/components/pages/WebsiteList.js
@@ -1,15 +1,14 @@
+import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Link from 'components/common/Link';
+import WebsiteChart from 'components/metrics/WebsiteChart';
+import Page from 'components/layout/Page';
+import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import Button from 'components/common/Button';
+import useFetch from 'hooks/useFetch';
 import Arrow from 'assets/arrow-right.svg';
 import Chart from 'assets/chart-bar.svg';
-import Button from 'components/common/Button';
-import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
-import Link from 'components/common/Link';
-import Page from 'components/layout/Page';
-import WebsiteChart from 'components/metrics/WebsiteChart';
-import useFetch from 'hooks/useFetch';
-import { useState } from 'react';
-import { FormattedMessage } from 'react-intl';
 import styles from './WebsiteList.module.css';
-
 export default function WebsiteList({ userId }) {
   const { data } = useFetch('/api/websites', { params: { user_id: userId } });
   const [hideCharts, setHideCharts] = useState(false);
diff --git a/hooks/useDateRange.js b/hooks/useDateRange.js
index 10e58793..de9c19b5 100644
--- a/hooks/useDateRange.js
+++ b/hooks/useDateRange.js
@@ -1,9 +1,9 @@
+import { useDispatch, useSelector } from 'react-redux';
 import { parseISO } from 'date-fns';
-import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
 import { getDateRange } from 'lib/date';
 import { getItem, setItem } from 'lib/web';
-import { useDispatch, useSelector } from 'react-redux';
 import { setDateRange } from '../redux/actions/websites';
+import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
 import useForceUpdate from './useForceUpdate';
 import useLocale from './useLocale';
 
diff --git a/lib/date.js b/lib/date.js
index 6cf25972..31ee3f85 100644
--- a/lib/date.js
+++ b/lib/date.js
@@ -1,32 +1,32 @@
+import moment from 'moment-timezone';
 import {
-  addDays,
-  addHours,
   addMinutes,
+  addHours,
+  addDays,
   addMonths,
   addYears,
+  subHours,
+  subDays,
+  startOfMinute,
+  startOfHour,
+  startOfDay,
+  startOfWeek,
+  startOfMonth,
+  startOfYear,
+  endOfHour,
+  endOfDay,
+  endOfWeek,
+  endOfMonth,
+  endOfYear,
+  differenceInMinutes,
+  differenceInHours,
   differenceInCalendarDays,
   differenceInCalendarMonths,
   differenceInCalendarYears,
-  differenceInHours,
-  differenceInMinutes,
-  endOfDay,
-  endOfHour,
-  endOfMonth,
-  endOfWeek,
-  endOfYear,
   format,
-  startOfDay,
-  startOfHour,
-  startOfMinute,
-  startOfMonth,
-  startOfWeek,
-  startOfYear,
-  subDays,
-  subHours,
 } from 'date-fns';
 import { enUS } from 'date-fns/locale';
 import { dateLocales } from 'lib/lang';
-import moment from 'moment-timezone';
 
 export function getTimezone() {
   return moment.tz.guess();