diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js
index 7f000a20..0b197bd2 100644
--- a/components/common/RefreshButton.js
+++ b/components/common/RefreshButton.js
@@ -11,13 +11,17 @@ import useDateRange from 'hooks/useDateRange';
 function RefreshButton({ websiteId }) {
   const [dateRange] = useDateRange(websiteId);
   const [loading, setLoading] = useState(false);
-  const selector = useCallback(state => state[`/api/website/${websiteId}/stats`], [websiteId]);
+  const selector = useCallback(state => state[`/website/${websiteId}/stats`], [websiteId]);
   const completed = useStore(selector);
 
   function handleClick() {
-    if (dateRange) {
+    if (!loading && dateRange) {
       setLoading(true);
-      setDateRange(websiteId, dateRange);
+      if (/^[\d]+/.test(dateRange.value)) {
+        setDateRange(websiteId, dateRange.value);
+      } else {
+        setDateRange(websiteId, dateRange);
+      }
     }
   }
 
diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js
index 90dbe6ab..d8065fe3 100644
--- a/components/metrics/MetricsTable.js
+++ b/components/metrics/MetricsTable.js
@@ -26,8 +26,7 @@ export default function MetricsTable({
   ...props
 }) {
   const shareToken = useShareToken();
-  const [dateRange] = useDateRange(websiteId);
-  const { startDate, endDate, modified } = dateRange;
+  const [{ startDate, endDate, modified }] = useDateRange(websiteId);
   const {
     resolve,
     router,
diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js
index f3d3e371..9279dd90 100644
--- a/components/metrics/WebsiteChart.js
+++ b/components/metrics/WebsiteChart.js
@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { useRouter } from 'next/router';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
 import WebsiteHeader from './WebsiteHeader';
@@ -12,11 +11,10 @@ import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
 import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
-import useLocale from 'hooks/useLocale';
-import { getDateArray, getDateLength, getDateRange, getDateRangeValues } from 'lib/date';
+import { getDateArray, getDateLength, getDateRangeValues } from 'lib/date';
 import useShareToken from 'hooks/useShareToken';
+import useApi from 'hooks/useApi';
 import { TOKEN_HEADER } from 'lib/constants';
-import { get } from 'lib/web';
 import styles from './WebsiteChart.module.css';
 
 export default function WebsiteChart({
@@ -31,14 +29,13 @@ export default function WebsiteChart({
   const shareToken = useShareToken();
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, value, modified } = dateRange;
-  const { locale } = useLocale();
   const [timezone] = useTimezone();
-  const { basePath } = useRouter();
   const {
     router,
     resolve,
     query: { url, ref },
   } = usePageQuery();
+  const { get } = useApi();
 
   const { data, loading, error } = useFetch(
     `/website/${websiteId}/pageviews`,
@@ -73,12 +70,10 @@ export default function WebsiteChart({
 
   async function handleDateChange(value) {
     if (value === 'all') {
-      const { data, ok } = await get(`${basePath}/api/website/${websiteId}`);
+      const { data, ok } = await get(`/website/${websiteId}`);
       if (ok) {
         setDateRange({ value, ...getDateRangeValues(new Date(data.created_at), Date.now()) });
       }
-    } else if (typeof value === 'string') {
-      setDateRange(getDateRange(value, locale));
     } else {
       setDateRange(value);
     }
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 94e8a930..3b76cfcb 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -9,20 +9,20 @@ import MenuLayout from 'components/layout/MenuLayout';
 import Link from 'components/common/Link';
 import Loading from 'components/common/Loading';
 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 LanguagesTable from '../metrics/LanguagesTable';
-import EventsTable from '../metrics/EventsTable';
-import EventsChart from '../metrics/EventsChart';
+import PagesTable from 'components/metrics/PagesTable';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import BrowsersTable from 'components/metrics/BrowsersTable';
+import OSTable from 'components/metrics/OSTable';
+import DevicesTable from 'components/metrics/DevicesTable';
+import CountriesTable from 'components/metrics/CountriesTable';
+import LanguagesTable from 'components/metrics/LanguagesTable';
+import EventsTable from 'components/metrics/EventsTable';
+import EventsChart from 'components/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 styles from './WebsiteDetails.module.css';
 
 const views = {
   url: PagesTable,
diff --git a/components/settings/DateRangeSetting.js b/components/settings/DateRangeSetting.js
index 092e2427..53dfe983 100644
--- a/components/settings/DateRangeSetting.js
+++ b/components/settings/DateRangeSetting.js
@@ -14,14 +14,6 @@ export default function DateRangeSetting() {
   const { startDate, endDate, value } = dateRange;
   const options = filterOptions.filter(e => e.value !== 'all');
 
-  function handleChange(value) {
-    if (typeof value === 'string') {
-      setDateRange(getDateRange(value, locale));
-    } else {
-      setDateRange(value);
-    }
-  }
-
   function handleReset() {
     setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale));
   }
@@ -33,7 +25,7 @@ export default function DateRangeSetting() {
         value={value}
         startDate={startDate}
         endDate={endDate}
-        onChange={handleChange}
+        onChange={setDateRange}
       />
       <Button className={styles.button} size="small" onClick={handleReset}>
         <FormattedMessage id="label.reset" defaultMessage="Reset" />
diff --git a/hooks/useShareToken.js b/hooks/useShareToken.js
index 49f67f7e..4084cce2 100644
--- a/hooks/useShareToken.js
+++ b/hooks/useShareToken.js
@@ -1,16 +1,15 @@
 import { useEffect } from 'react';
-import { useRouter } from 'next/router';
-import { get } from 'lib/web';
 import useStore, { setShareToken } from 'store/app';
+import useApi from './useApi';
 
 const selector = state => state.shareToken;
 
 export default function useShareToken(shareId) {
-  const { basePath } = useRouter();
   const shareToken = useStore(selector);
+  const { get } = useApi();
 
   async function loadToken(id) {
-    const { data } = await get(`${basePath}/api/share/${id}`);
+    const { data } = await get(`/share/${id}`);
 
     if (data) {
       setShareToken(data);
diff --git a/store/websites.js b/store/websites.js
index d3fb37df..70f8bd67 100644
--- a/store/websites.js
+++ b/store/websites.js
@@ -1,15 +1,26 @@
 import create from 'zustand';
 import produce from 'immer';
+import app from './app';
+import { getDateRange } from '../lib/date';
 
 const store = create(() => ({}));
 
-export function setDateRange(websiteId, dateRange) {
+export function setDateRange(websiteId, value) {
   store.setState(
     produce(state => {
       if (!state[websiteId]) {
         state[websiteId] = {};
       }
 
+      let dateRange = value;
+
+      if (typeof value === 'string') {
+        const { locale } = app.getState();
+        dateRange = getDateRange(value, locale);
+      }
+
+      console.log({ websiteId, value, dateRange });
+
       state[websiteId].dateRange = { ...dateRange, modified: Date.now() };
 
       return state;