diff --git a/README.md b/README.md
index 01d591b..876a1fa 100644
--- a/README.md
+++ b/README.md
@@ -47,11 +47,11 @@ This app showcases the use of the following tools and technologies:
 ## Roadmap
 
 - [x] **Dark Mode**: Switch between light and dark themes.
+- [ ] **Weekly View**: View your habits on a weekly calendar.
+- [ ] **Daily View**: Dive into your habits on a daily calendar.
 - [ ] **Export**: Export your habits and entries.
 - [ ] **Environments**: Associate habits with environments where they occur.
 - [ ] **Categories**: Group habits into categories.
-- [ ] **Weekly View**: View your habits on a weekly calendar.
-- [ ] **Daily View**: Dive into your habits on a daily calendar.
 - [ ] **Sharing**: Share your calendar with trusted people.
 - [ ] **Statistics**: Track your progress with insightful statistics.
 - [ ] **Notifications**: Get reminders to log your habits.
diff --git a/src/components/App.tsx b/src/components/App.tsx
index b764ca5..55ca56b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -25,8 +25,14 @@ const App = () => {
       <AppHeader />
       <main className="flex h-full flex-1 flex-col items-start bg-background">
         <Routes>
-          <Route path="/calendar/month" element={<MonthCalendar />} />
-          <Route path="/calendar/week" element={<WeekCalendar />} />
+          <Route
+            path="/calendar/month/:year?/:month?/:day?"
+            element={<MonthCalendar />}
+          />
+          <Route
+            path="/calendar/week/:year?/:month?/:day?"
+            element={<WeekCalendar />}
+          />
           <Route path="/habits" element={<HabitsPage />} />
           <Route path="/account" element={<AccountPage />} />
           <Route path="*" element={<Navigate to="/calendar/month" replace />} />
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
index 6bd6e0c..4f6eb4d 100644
--- a/src/components/Providers.tsx
+++ b/src/components/Providers.tsx
@@ -9,13 +9,17 @@ type ProviderProps = {
   children: ReactNode;
 };
 
-const LowerProviders = ({ children }: ProviderProps) => {
+const LowerProviders = React.memo(function WrappedProvider({
+  children,
+}: ProviderProps) {
   const navigate = useNavigate();
 
   return <NextUIProvider navigate={navigate}>{children}</NextUIProvider>;
-};
+});
 
-const PotentialSupabaseProvider = ({ children }: ProviderProps) => {
+const PotentialSupabaseProvider = React.memo(function WrappedProvider({
+  children,
+}: ProviderProps) {
   if (!Object.keys(supabaseClient).length) {
     return children;
   }
@@ -25,17 +29,21 @@ const PotentialSupabaseProvider = ({ children }: ProviderProps) => {
       {children}
     </SessionContextProvider>
   );
-};
+});
 
-const UpperProviders = ({ children }: ProviderProps) => {
+const UpperProviders = React.memo(function WrappedProvider({
+  children,
+}: ProviderProps) {
   return (
     <BrowserRouter>
       <I18nProvider locale="en-GB">{children}</I18nProvider>
     </BrowserRouter>
   );
-};
+});
 
-const Providers = ({ children }: ProviderProps) => {
+const Providers = React.memo(function WrappedProviders({
+  children,
+}: ProviderProps) {
   return (
     <UpperProviders>
       <PotentialSupabaseProvider>
@@ -43,6 +51,6 @@ const Providers = ({ children }: ProviderProps) => {
       </PotentialSupabaseProvider>
     </UpperProviders>
   );
-};
+});
 
 export default Providers;
diff --git a/src/components/calendar-month/MonthCalendar.tsx b/src/components/calendar-month/MonthCalendar.tsx
index 7221207..2ad15ea 100644
--- a/src/components/calendar-month/MonthCalendar.tsx
+++ b/src/components/calendar-month/MonthCalendar.tsx
@@ -1,14 +1,15 @@
-import { generateCalendarRange } from '@helpers';
 import { useDocumentTitle } from '@hooks';
 import { CalendarDate, GregorianCalendar } from '@internationalized/date';
 import { useDisclosure } from '@nextui-org/react';
 import { useOccurrencesStore } from '@stores';
 import { capitalizeFirstLetter } from '@utils';
 import clsx from 'clsx';
+import { endOfMonth, endOfWeek, startOfMonth, startOfWeek } from 'date-fns';
 import React from 'react';
-import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
-import { useLocation } from 'react-router-dom';
+import { useCalendar, useLocale } from 'react-aria';
+import { useParams } from 'react-router-dom';
 import { useCalendarState } from 'react-stately';
+import { useShallow } from 'zustand/react/shallow';
 
 import MonthCalendarGrid from './MonthCalendarGrid';
 import MonthCalendarHeader from './MonthCalendarHeader';
@@ -25,14 +26,15 @@ const createCalendar = (identifier: string) => {
 };
 
 const MonthCalendar = () => {
-  const { onRangeChange } = useOccurrencesStore();
+  const onRangeChange = useOccurrencesStore(
+    useShallow((state) => state.onRangeChange)
+  );
   const { locale } = useLocale();
   const calendarState = useCalendarState({
     locale,
     createCalendar,
   });
-  const { calendarProps, prevButtonProps, nextButtonProps, title } =
-    useCalendar({}, calendarState);
+  const { calendarProps, title } = useCalendar({}, calendarState);
   const {
     isOpen: isNoteDialogOpen,
     onOpen: openNoteDialog,
@@ -44,38 +46,35 @@ const MonthCalendar = () => {
     onClose: closeOccurrenceDialog,
   } = useDisclosure();
   const [activeDate, setActiveDate] = React.useState<Date | null>(null);
-  const { state: locationState } = useLocation();
-
-  const setFocusedDate = React.useCallback(
-    (year: number, month: number, day: number) => {
-      const nextFocusedDate = new CalendarDate(year, month, day);
-      calendarState.setFocusedDate(nextFocusedDate);
-    },
-    [calendarState]
-  );
+  const params = useParams();
 
   React.useEffect(() => {
-    if (!locationState) {
+    const { year, month, day } = params;
+
+    if (!year || !month || !day) {
       return;
     }
 
-    const { year, month } = locationState;
+    const focusedDate = new Date(Number(year), Number(month) - 1, 1);
 
-    setFocusedDate(year, month, 1);
-  }, [locationState, setFocusedDate]);
+    const rangeStart = startOfWeek(startOfMonth(focusedDate));
+    const rangeEnd = endOfWeek(endOfMonth(focusedDate));
 
-  React.useEffect(() => {
-    onRangeChange(
-      generateCalendarRange(
-        calendarState.visibleRange.start.year,
-        calendarState.visibleRange.start.month
-      )
+    onRangeChange([+rangeStart, +rangeEnd]);
+
+    const nextFocusedDate = new CalendarDate(
+      focusedDate.getFullYear(),
+      focusedDate.getMonth() + 1,
+      focusedDate.getDate()
     );
-  }, [
-    calendarState.visibleRange.start.year,
-    calendarState.visibleRange.start.month,
-    onRangeChange,
-  ]);
+
+    const hasFocusedDateChanged =
+      calendarState.focusedDate.toString() !== nextFocusedDate.toString();
+
+    if (hasFocusedDateChanged) {
+      calendarState.setFocusedDate(nextFocusedDate);
+    }
+  }, [params, calendarState, onRangeChange]);
 
   const [activeMonthLabel, activeYear] = title.split(' ');
 
@@ -83,24 +82,6 @@ const MonthCalendar = () => {
     `${activeMonthLabel.slice(0, 3)} ${activeYear} | Habitrack Calendar`
   );
 
-  const navigateToMonth = (month: number) => {
-    const { year, day } = calendarState.focusedDate;
-    setFocusedDate(year, month, day);
-  };
-
-  const navigateToYear = (year: number) => {
-    const { month, day } = calendarState.focusedDate;
-    setFocusedDate(year, month, day);
-  };
-
-  const resetFocusedDate = () => {
-    const now = new Date();
-    const day = now.getDate();
-    const month = now.getMonth();
-    const year = now.getFullYear();
-    setFocusedDate(year, month + 1, day);
-  };
-
   const handleOccurrenceModalClose = () => {
     window.setTimeout(() => {
       closeOccurrenceDialog();
@@ -133,13 +114,6 @@ const MonthCalendar = () => {
     setActiveDate(new Date(fullYear, monthIndex - 1, dateNumber, 12));
   };
 
-  const transformButtonProps = (
-    buttonProps: Pick<AriaButtonProps<'button'>, 'isDisabled' | 'aria-label'>
-  ) => ({
-    'aria-label': buttonProps['aria-label'] || '',
-    disabled: Boolean(buttonProps.isDisabled),
-  });
-
   const calendarContainerClassName = clsx(
     'flex h-full w-full max-w-full flex-1 flex-col gap-2 p-0 px-8 pb-8 lg:gap-4 lg:px-16 lg:py-4',
     isOccurrenceDialogOpen && 'pointer-events-none'
@@ -151,13 +125,6 @@ const MonthCalendar = () => {
         <MonthCalendarHeader
           activeMonthLabel={capitalizeFirstLetter(activeMonthLabel)}
           activeYear={activeYear}
-          prevButtonProps={transformButtonProps(prevButtonProps)}
-          nextButtonProps={transformButtonProps(nextButtonProps)}
-          onNavigateBack={calendarState.focusPreviousPage}
-          onNavigateForward={calendarState.focusNextPage}
-          onNavigateToMonth={navigateToMonth}
-          onNavigateToYear={navigateToYear}
-          onResetFocusedDate={resetFocusedDate}
         />
         <MonthCalendarGrid
           activeMonthLabel={capitalizeFirstLetter(activeMonthLabel)}
diff --git a/src/components/calendar-month/MonthCalendarCell.tsx b/src/components/calendar-month/MonthCalendarCell.tsx
index 0e4f3c9..5b1d406 100644
--- a/src/components/calendar-month/MonthCalendarCell.tsx
+++ b/src/components/calendar-month/MonthCalendarCell.tsx
@@ -1,5 +1,6 @@
 import { isCalendarDay } from '@helpers';
-import { useScreenSize } from '@hooks';
+import { useScreenWidth } from '@hooks';
+import type { CalendarDate } from '@internationalized/date';
 import { Button, Tooltip } from '@nextui-org/react';
 import {
   CalendarBlank,
@@ -10,9 +11,12 @@ import {
 import { useNotesStore, useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import clsx from 'clsx';
-import { format, isToday, isFuture } from 'date-fns';
+import { format, isToday, isFuture, startOfMonth, addMonths } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
+// import { useCalendarCell } from 'react-aria';
+import { useNavigate } from 'react-router-dom';
+import type { CalendarState } from 'react-stately';
 
 import OccurrenceChip from './OccurrenceChip';
 
@@ -23,54 +27,44 @@ export type CellPosition =
   | 'bottom-right'
   | '';
 
-export type CellRangeStatus = 'below-range' | 'in-range' | 'above-range';
+export type CellRangeStatus = 'below-range' | 'in-range' | 'above-range' | '';
 
 type CalendarCellProps = {
-  dateNumber: number;
-  monthNumber: number;
-  fullYear: number;
-  onAddNote: (
-    dateNumber: number,
-    monthNumber: number,
-    fullYear: number
-  ) => void;
-  onAddOccurrence: (
-    dateNumber: number,
-    monthNumber: number,
-    fullYear: number
-  ) => void;
-  onNavigateBack?: () => void;
-  onNavigateForward?: () => void;
+  state: CalendarState;
+  date: CalendarDate;
+  visibleMonth: Date;
+  onAddNote: () => void;
+  onAddOccurrence: () => void;
   rangeStatus: CellRangeStatus;
   position: CellPosition;
 };
 
 const MonthCalendarCell = ({
-  dateNumber,
-  monthNumber,
-  fullYear,
-  onNavigateBack,
-  onNavigateForward,
+  // state,
+  date,
+  visibleMonth,
   onAddNote,
   onAddOccurrence,
   rangeStatus,
   position,
 }: CalendarCellProps) => {
   const cellRef = React.useRef<HTMLDivElement>(null);
+  // const cellProps = useCalendarCell({ date }, state, cellRef);
   const user = useUser();
   const { removeOccurrence, fetchingOccurrences, occurrencesByDate } =
     useOccurrencesStore();
   const { notes, fetchingNotes } = useNotesStore();
-  const screenSize = useScreenSize();
-  const cellDate = new Date(fullYear, monthNumber - 1, dateNumber);
+  const { isDesktop, isMobile } = useScreenWidth();
+  const cellDate = new Date(date.year, date.month - 1, date.day);
   const isTodayCell = isToday(cellDate);
   const isFutureCell = isFuture(cellDate);
-  const date = format(cellDate, 'yyyy-MM-dd');
-  const isDesktop = screenSize >= 1024;
+  const formattedDay = format(cellDate, 'yyyy-MM-dd');
+  const navigate = useNavigate();
 
-  const occurrences = isCalendarDay(date) ? occurrencesByDate[date] || [] : [];
-  const isMobile = screenSize < 768;
-  const hasNote = notes.some((note) => note.day === date);
+  const occurrences = isCalendarDay(formattedDay)
+    ? occurrencesByDate[formattedDay] || []
+    : [];
+  const hasNote = notes.some((note) => note.day === formattedDay);
 
   const groupedOccurrences = Object.groupBy(occurrences, (o) => o.habitId);
 
@@ -79,45 +73,46 @@ const MonthCalendarCell = ({
       return null;
     }
 
-    return onAddNote(dateNumber, monthNumber, fullYear);
-  }, [fetchingOccurrences, user, dateNumber, monthNumber, fullYear, onAddNote]);
+    return onAddNote();
+  }, [fetchingOccurrences, user, onAddNote]);
 
   const handleAddOccurrenceClick = React.useCallback(
-    (e?: React.MouseEvent) => {
+    (e?: React.MouseEvent, forceOpenDialog = false) => {
       if (fetchingOccurrences || !user) {
         return null;
       }
 
       if (!isTodayCell) {
         if (rangeStatus === 'below-range') {
-          return onNavigateBack?.();
+          const prevMonth = startOfMonth(addMonths(visibleMonth, -1));
+
+          return navigate(
+            `/calendar/month/${prevMonth.getFullYear()}/${prevMonth.getMonth() + 1}/1`
+          );
         }
 
         if (rangeStatus === 'above-range') {
-          return onNavigateForward?.();
+          const nextMonth = startOfMonth(addMonths(visibleMonth, 1));
+
+          return navigate(
+            `/calendar/month/${nextMonth.getFullYear()}/${nextMonth.getMonth() + 1}/1`
+          );
         }
       }
 
-      if (
-        !isFutureCell &&
-        (isMobile || e?.currentTarget instanceof HTMLButtonElement)
-      ) {
-        return onAddOccurrence(dateNumber, monthNumber, fullYear);
+      if (!isFutureCell || forceOpenDialog) {
+        return onAddOccurrence();
       }
     },
     [
-      dateNumber,
       fetchingOccurrences,
-      fullYear,
-      monthNumber,
       onAddOccurrence,
-      onNavigateBack,
-      onNavigateForward,
       rangeStatus,
       user,
-      isMobile,
       isTodayCell,
       isFutureCell,
+      visibleMonth,
+      navigate,
     ]
   );
 
@@ -130,7 +125,7 @@ const MonthCalendarCell = ({
 
     const enterHandler = (event: KeyboardEvent) => {
       if (event.key === 'Enter') {
-        handleAddOccurrenceClick();
+        handleAddOccurrenceClick(undefined, true);
       }
     };
 
@@ -177,13 +172,14 @@ const MonthCalendarCell = ({
 
   return (
     <div
+      // {...cellProps}
       className={cellRootClassName}
       ref={cellRef}
       tabIndex={0}
-      onClick={handleAddOccurrenceClick}
+      onClick={(e) => handleAddOccurrenceClick(e)}
     >
       <div className={cellHeaderClassName}>
-        <p className="font-bold">{dateNumber}</p>
+        <p className="font-bold">{date.day}</p>
         <div className="flex items-center justify-between gap-2">
           {rangeStatus === 'in-range' && !isMobile && (
             <div className="flex items-center gap-1">
@@ -192,7 +188,7 @@ const MonthCalendarCell = ({
                   <Button
                     className="h-5 min-w-fit px-2 opacity-100 transition-opacity group-hover/cell:opacity-100 md:opacity-0 lg:h-6 lg:px-4"
                     radius="sm"
-                    onClick={handleAddOccurrenceClick}
+                    onClick={(e) => handleAddOccurrenceClick(e, true)}
                     color="secondary"
                     isDisabled={fetchingOccurrences || !user}
                   >
diff --git a/src/components/calendar-month/MonthCalendarGrid.tsx b/src/components/calendar-month/MonthCalendarGrid.tsx
index 907ad7d..333894e 100644
--- a/src/components/calendar-month/MonthCalendarGrid.tsx
+++ b/src/components/calendar-month/MonthCalendarGrid.tsx
@@ -1,12 +1,13 @@
-import { getYearWeekNumberFromMonthWeek } from '@helpers';
+import { getMonthIndex, getYearWeekNumberFromMonthWeek } from '@helpers';
 import { type CalendarDate, getWeeksInMonth } from '@internationalized/date';
 import { Button } from '@nextui-org/react';
 import { isTruthy } from '@utils';
 import clsx from 'clsx';
+import { addMonths, isSameMonth } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 import { useCalendarGrid, useLocale } from 'react-aria';
-import { Link, useLocation } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { type CalendarState } from 'react-stately';
 
 import type { CellPosition, CellRangeStatus } from './MonthCalendarCell';
@@ -37,8 +38,7 @@ const MonthCalendarGrid = ({
   const { locale } = useLocale();
   const weeksInMonthCount = getWeeksInMonth(state.visibleRange.start, locale);
   const weekIndexes = [...new Array(weeksInMonthCount).keys()];
-  const { month: activeMonth } = state.visibleRange.start;
-  const { pathname } = useLocation();
+  const visibleMonth = new Date(activeYear, getMonthIndex(activeMonthLabel), 1);
 
   const getCellPosition = (
     weekIndex: number,
@@ -85,6 +85,7 @@ const MonthCalendarGrid = ({
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
+          transition={{ duration: 0.1 }}
         >
           {weekIndexes.map((weekIndex) => {
             const { week } = getYearWeekNumberFromMonthWeek(
@@ -106,17 +107,7 @@ const MonthCalendarGrid = ({
                     'absolute -left-[24px] bottom-0 h-[107px] w-[20px] min-w-fit p-0 md:-left-[48px] md:w-[40px]'
                   )}
                   variant="light"
-                  to="/calendar/week"
-                  state={{
-                    prevPathname: pathname,
-                    month: activeMonth,
-                    year: activeYear,
-                    startDate: new Date(
-                      firstDate.year,
-                      firstDate.month - 1,
-                      firstDate.day
-                    ),
-                  }}
+                  to={`/calendar/week/${firstDate.year}/${firstDate.month}/${firstDate.day}`}
                 >
                   {week}
                 </Button>
@@ -136,15 +127,20 @@ const MonthCalendarGrid = ({
 
                       const { month, day, year } = calendarDate;
 
-                      const rangeStatus: CellRangeStatus =
-                        (month < activeMonth ||
-                          (month === 12 && activeMonth === 1)) &&
-                        month !== 1
+                      const date = new Date(year, month - 1, day);
+                      const prevMonth = addMonths(visibleMonth, -1);
+                      const nextMonth = addMonths(visibleMonth, 1);
+
+                      const rangeStatus: CellRangeStatus = isSameMonth(
+                        date,
+                        visibleMonth
+                      )
+                        ? 'in-range'
+                        : isSameMonth(date, prevMonth)
                           ? 'below-range'
-                          : month > activeMonth ||
-                              (month === 1 && activeMonth === 12)
+                          : isSameMonth(date, nextMonth)
                             ? 'above-range'
-                            : 'in-range';
+                            : '';
 
                       const [cellKey] = calendarDate.toString().split('T');
 
@@ -153,15 +149,15 @@ const MonthCalendarGrid = ({
                       return (
                         <MonthCalendarCell
                           key={cellKey}
-                          dateNumber={day}
-                          monthNumber={month}
-                          fullYear={year}
-                          onAddOccurrence={onAddOccurrence}
-                          onAddNote={onAddNote}
+                          state={state}
+                          visibleMonth={visibleMonth}
+                          date={calendarDate}
+                          onAddOccurrence={() =>
+                            onAddOccurrence(day, month, year)
+                          }
+                          onAddNote={() => onAddNote(day, month, year)}
                           rangeStatus={rangeStatus}
                           position={position}
-                          onNavigateBack={state.focusPreviousPage}
-                          onNavigateForward={state.focusNextPage}
                         />
                       );
                     })}
diff --git a/src/components/calendar-month/MonthCalendarHeader.test.tsx b/src/components/calendar-month/MonthCalendarHeader.test.tsx
index f14c14e..92d30d3 100644
--- a/src/components/calendar-month/MonthCalendarHeader.test.tsx
+++ b/src/components/calendar-month/MonthCalendarHeader.test.tsx
@@ -9,55 +9,10 @@ describe(MonthCalendarHeader.name, () => {
   const props: MonthCalendarHeaderProps = {
     activeMonthLabel: 'January',
     activeYear: '2022',
-    prevButtonProps: {
-      disabled: false,
-      'aria-label': 'Previous month',
-    },
-    nextButtonProps: {
-      disabled: false,
-      'aria-label': 'Next month',
-    },
-    onNavigateBack: jest.fn(),
-    onNavigateForward: jest.fn(),
-    onNavigateToMonth: jest.fn(),
-    onNavigateToYear: jest.fn(),
-    onResetFocusedDate: jest.fn(),
   };
 
   it.skip('should render month and year', () => {
     const { getByText } = render(<MonthCalendarHeader {...props} />);
     expect(getByText('January 2022')).toBeInTheDocument();
   });
-
-  it.skip('should disable previous button', () => {
-    const { getByRole } = render(
-      <MonthCalendarHeader
-        {...props}
-        prevButtonProps={{ ...props.prevButtonProps, disabled: true }}
-      />
-    );
-    expect(getByRole('navigate-back')).toBeDisabled();
-  });
-
-  it.skip('should disable next button', () => {
-    const { getByRole } = render(
-      <MonthCalendarHeader
-        {...props}
-        nextButtonProps={{ ...props.nextButtonProps, disabled: true }}
-      />
-    );
-    expect(getByRole('navigate-forward')).toBeDisabled();
-  });
-
-  it.skip('should call onNavigateBack', () => {
-    const { getByRole } = render(<MonthCalendarHeader {...props} />);
-    getByRole('navigate-back').click();
-    expect(props.onNavigateBack).toHaveBeenCalled();
-  });
-
-  it.skip('should call onNavigateForward', () => {
-    const { getByRole } = render(<MonthCalendarHeader {...props} />);
-    getByRole('navigate-forward').click();
-    expect(props.onNavigateForward).toHaveBeenCalled();
-  });
 });
diff --git a/src/components/calendar-month/MonthCalendarHeader.tsx b/src/components/calendar-month/MonthCalendarHeader.tsx
index c1bad12..a18a6fa 100644
--- a/src/components/calendar-month/MonthCalendarHeader.tsx
+++ b/src/components/calendar-month/MonthCalendarHeader.tsx
@@ -1,5 +1,5 @@
 import { TraitChip } from '@components';
-import { useScreenSize } from '@hooks';
+import { useScreenWidth } from '@hooks';
 import type { Habit, Trait } from '@models';
 import type { SelectedItems } from '@nextui-org/react';
 import {
@@ -9,28 +9,22 @@ import {
   Button,
   SelectSection,
 } from '@nextui-org/react';
-import { ArrowFatLeft, ArrowFatRight } from '@phosphor-icons/react';
+import {
+  ArrowFatLeft,
+  ArrowFatRight,
+  ArrowsClockwise,
+} from '@phosphor-icons/react';
 import { useTraitsStore, useHabitsStore, useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import { getHabitIconUrl } from '@utils';
 import clsx from 'clsx';
+import { addMonths, startOfToday, startOfMonth } from 'date-fns';
 import React from 'react';
-
-type NavigationButtonProps = {
-  disabled: boolean;
-  'aria-label': string;
-};
+import { Link, useNavigate, useParams } from 'react-router-dom';
 
 export type MonthCalendarHeaderProps = {
   activeMonthLabel: string;
   activeYear: string;
-  prevButtonProps: NavigationButtonProps;
-  nextButtonProps: NavigationButtonProps;
-  onNavigateBack: () => void;
-  onNavigateForward: () => void;
-  onNavigateToMonth: (month: number) => void;
-  onNavigateToYear: (year: number) => void;
-  onResetFocusedDate: () => void;
 };
 
 const MONTHS = [
@@ -53,20 +47,29 @@ const YEARS = Array.from({ length: 31 }, (_, i) => 2000 + i);
 const MonthCalendarHeader = ({
   activeMonthLabel,
   activeYear,
-  prevButtonProps,
-  nextButtonProps,
-  onNavigateBack,
-  onNavigateForward,
-  onNavigateToMonth,
-  onNavigateToYear,
-  onResetFocusedDate,
 }: MonthCalendarHeaderProps) => {
   const { habits } = useHabitsStore();
   const { traits } = useTraitsStore();
   const { filteredBy, filterBy } = useOccurrencesStore();
   const user = useUser();
-  const screenSize = useScreenSize();
-  const isOnCurrentMonth = activeMonthLabel === MONTHS[new Date().getMonth()];
+  const { screenWidth, isDesktop, isMobile } = useScreenWidth();
+  const isOnCurrentMonth =
+    activeMonthLabel === MONTHS[new Date().getMonth()] &&
+    activeYear === new Date().getFullYear().toString();
+  const { year, month, day } = useParams();
+  const navigate = useNavigate();
+
+  const focusedDate = React.useMemo(() => {
+    if (!year || !month || !day) {
+      return new Date();
+    }
+
+    return new Date(Number(year), Number(month) - 1, Number(day));
+  }, [year, month, day]);
+
+  const prevMonth = startOfMonth(addMonths(focusedDate, -1));
+  const nextMonth = startOfMonth(addMonths(focusedDate, 1));
+  const today = startOfToday();
 
   const shouldRenderFilters = !!user && habits.length > 0 && traits.length > 0;
 
@@ -77,13 +80,17 @@ const MonthCalendarHeader = ({
   const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (
     event
   ) => {
-    onNavigateToMonth(MONTHS.indexOf(event.target.value) + 1);
+    navigate(
+      `/calendar/month/${focusedDate.getFullYear()}/${MONTHS.indexOf(event.target.value) + 1}/${focusedDate.getDate()}`
+    );
   };
 
   const handleYearChange: React.ChangeEventHandler<HTMLSelectElement> = (
     event
   ) => {
-    onNavigateToYear(+event.target.value);
+    navigate(
+      `/calendar/month/${event.target.value}/${focusedDate.getMonth() + 1}/${focusedDate.getDate()}`
+    );
   };
 
   const handleHabitsFilterChange: React.ChangeEventHandler<
@@ -104,9 +111,6 @@ const MonthCalendarHeader = ({
     });
   };
 
-  const isMobile = screenSize < 768;
-  const isDesktop = screenSize > 1024;
-
   return (
     <div className="flex items-stretch justify-between px-0 pt-2 lg:px-0 lg:pt-0">
       <div className="flex items-stretch justify-between gap-0 lg:gap-2">
@@ -148,20 +152,21 @@ const MonthCalendarHeader = ({
             }}
           >
             {YEARS.map((year) => (
-              <SelectItem key={year.toString()}>{year.toString()}</SelectItem>
+              <SelectItem as={Link} key={year.toString()}>
+                {year.toString()}
+              </SelectItem>
             ))}
           </Select>
         </div>
         <div className="flex items-stretch gap-0 lg:gap-2">
           <Button
             isIconOnly
+            as={Link}
+            to={`/calendar/month/${prevMonth.getFullYear()}/${prevMonth.getMonth() + 1}/${prevMonth.getDate()}`}
             size={isDesktop ? 'md' : 'sm'}
             radius="sm"
             variant="light"
             color="secondary"
-            isDisabled={prevButtonProps.disabled}
-            aria-label={prevButtonProps['aria-label']}
-            onClick={onNavigateBack}
             className={clsx(
               'h-auto dark:text-secondary-600',
               isMobile && 'w-6 min-w-fit p-0'
@@ -172,25 +177,26 @@ const MonthCalendarHeader = ({
           </Button>
           {!isMobile && !isOnCurrentMonth && (
             <Button
+              as={Link}
               size={isDesktop ? 'md' : 'sm'}
               radius="sm"
-              variant="bordered"
+              variant="light"
               color="secondary"
-              onClick={onResetFocusedDate}
               className="h-auto"
+              to={`/calendar/month/${today.getFullYear()}/${today.getMonth() + 1}/${today.getDate()}`}
+              startContent={<ArrowsClockwise size={isDesktop ? 16 : 12} />}
             >
               Today
             </Button>
           )}
           <Button
+            as={Link}
             isIconOnly
             size={isDesktop ? 'md' : 'sm'}
             variant="light"
             color="secondary"
             radius="sm"
-            isDisabled={nextButtonProps.disabled}
-            aria-label={nextButtonProps['aria-label']}
-            onClick={onNavigateForward}
+            to={`/calendar/month/${nextMonth.getFullYear()}/${nextMonth.getMonth() + 1}/${nextMonth.getDate()}`}
             className={clsx('h-auto', isMobile && 'w-6 min-w-fit p-0')}
             role="navigate-forward"
           >
@@ -240,7 +246,7 @@ const MonthCalendarHeader = ({
                     key={id}
                     src={iconUrl}
                     alt={`${name} icon`}
-                    className={clsx('h-4 w-4', screenSize < 400 && 'h-3 w-3')}
+                    className={clsx('h-4 w-4', screenWidth < 400 && 'h-3 w-3')}
                   />
                 );
               });
@@ -294,7 +300,7 @@ const MonthCalendarHeader = ({
               label: '!-translate-y-2',
             }}
             popoverProps={{
-              crossOffset: screenSize < 768 ? -75 : 0,
+              crossOffset: isMobile ? -75 : 0,
             }}
             renderValue={(selectedTraits: SelectedItems<Trait>) => {
               return selectedTraits.map(({ key }) => {
diff --git a/src/components/calendar-month/OccurrenceChip.test.tsx b/src/components/calendar-month/OccurrenceChip.test.tsx
index 6221d79..63fea53 100644
--- a/src/components/calendar-month/OccurrenceChip.test.tsx
+++ b/src/components/calendar-month/OccurrenceChip.test.tsx
@@ -1,4 +1,4 @@
-import { useScreenSize } from '@hooks';
+import { useScreenWidth } from '@hooks';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { makeTestOccurrence } from '@tests';
 import { getHabitIconUrl } from '@utils';
@@ -7,7 +7,7 @@ import React from 'react';
 import OccurrenceChip, { type OccurrenceChipProps } from './OccurrenceChip';
 
 jest.mock('@hooks', () => ({
-  useScreenSize: jest.fn(),
+  useScreenWidth: jest.fn(),
 }));
 
 jest.mock('@stores', () => ({
@@ -17,6 +17,10 @@ jest.mock('@stores', () => ({
   }),
 }));
 
+jest.mock('@hooks', () => ({
+  useScreenWidth: jest.fn().mockReturnValue({ screenWidth: 1000 }),
+}));
+
 describe(OccurrenceChip.name, () => {
   const mockOnDelete = jest.fn();
   const props: OccurrenceChipProps = {
@@ -49,7 +53,7 @@ describe(OccurrenceChip.name, () => {
   });
 
   it('should not render delete button on small screens', () => {
-    (useScreenSize as jest.Mock).mockReturnValue(1024);
+    (useScreenWidth as jest.Mock).mockReturnValue({ screenWidth: 1024 });
     const { queryByRole } = render(<OccurrenceChip {...props} />);
     const chipDelete = queryByRole('habit-chip-delete-button');
     expect(chipDelete).toBeNull();
diff --git a/src/components/calendar-month/OccurrenceChip.tsx b/src/components/calendar-month/OccurrenceChip.tsx
index 3cf1754..61aafdc 100644
--- a/src/components/calendar-month/OccurrenceChip.tsx
+++ b/src/components/calendar-month/OccurrenceChip.tsx
@@ -1,4 +1,4 @@
-import { useScreenSize } from '@hooks';
+import { useScreenWidth } from '@hooks';
 import type { Occurrence } from '@models';
 import { Badge, Button, Tooltip } from '@nextui-org/react';
 import { Note, Trash } from '@phosphor-icons/react';
@@ -38,7 +38,7 @@ const OccurrenceChip = ({
   const occurrenceNotes = notes.filter(
     (n) => n.occurrenceId && occurrenceIds.includes(n.occurrenceId)
   );
-  const screenSize = useScreenSize();
+  const { screenWidth } = useScreenWidth();
 
   const chipStyle = {
     borderColor: colorOverride || traitColor,
@@ -97,7 +97,7 @@ const OccurrenceChip = ({
         style={chipStyle}
         className={clsx(
           'relative mb-0 min-w-8 rounded-md border-2 bg-slate-100 p-1.5 dark:bg-slate-800 md:mb-1 md:mr-1',
-          screenSize < 400 && 'p-1'
+          screenWidth < 400 && 'p-1'
         )}
         role="habit-chip"
         onClick={(e) => {
@@ -111,7 +111,7 @@ const OccurrenceChip = ({
         <img
           src={iconUrl}
           alt={`${habitName} icon`}
-          className={clsx('h-4 w-4', screenSize < 400 && 'h-3 w-3')}
+          className={clsx('h-4 w-4', screenWidth < 400 && 'h-3 w-3')}
         />
       </div>
     </Tooltip>
diff --git a/src/components/calendar-week/WeekCalendar.tsx b/src/components/calendar-week/WeekCalendar.tsx
index 0bbd869..0ac175a 100644
--- a/src/components/calendar-week/WeekCalendar.tsx
+++ b/src/components/calendar-week/WeekCalendar.tsx
@@ -1,5 +1,3 @@
-import { Button } from '@nextui-org/react';
-import { ArrowFatLeft } from '@phosphor-icons/react';
 import { useOccurrencesStore } from '@stores';
 import {
   addDays,
@@ -15,24 +13,26 @@ import {
 } from 'date-fns';
 import { motion } from 'framer-motion';
 import React from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 
 import OccurrenceChip from '../calendar-month/OccurrenceChip';
 
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
 const WeekCalendar = () => {
-  const { state } = useLocation();
+  const { year, month, day } = useParams();
   const { occurrences } = useOccurrencesStore();
   const [startOfTheWeek, setStartOfTheWeek] = React.useState(new Date());
 
   React.useEffect(() => {
-    if (!state) {
+    if (!year || !month || !day) {
       return;
     }
 
-    setStartOfTheWeek(startOfWeek(startOfDay(state.startDate || new Date())));
-  }, [state]);
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+
+    setStartOfTheWeek(startOfWeek(startOfDay(date)));
+  }, [year, month, day]);
 
   const days = eachDayOfInterval<Date>({
     start: startOfTheWeek,
@@ -71,35 +71,8 @@ const WeekCalendar = () => {
     [days, occurrencesInWeek]
   );
 
-  if (!state) {
-    return (
-      <div className="flex h-full w-full max-w-full flex-1 flex-col p-4">
-        <h1 className="mt-2 text-center text-xl font-bold">Week Calendar</h1>
-        <p className="mb-4 text-center text-sm italic text-stone-400 dark:text-stone-500">
-          Weekly calendar is only available when navigating from the month
-          calendar for now
-        </p>
-      </div>
-    );
-  }
-
-  const { prevPathname, month, year } = state;
-
   return (
-    <div className="relative my-8 flex h-full w-full max-w-full flex-1 flex-col space-y-8 px-5 py-2 lg:px-16 lg:py-4">
-      <Button
-        as={Link}
-        to={prevPathname}
-        state={{
-          year,
-          month,
-        }}
-        className="absolute left-6 top-0"
-        variant="flat"
-      >
-        <ArrowFatLeft size={20} />
-        Back
-      </Button>
+    <div className="relative my-8 flex h-full w-full max-w-full flex-1 flex-col space-y-8 px-8 py-2 lg:px-16 lg:py-4">
       <div className="space-y-2 text-center">
         <h1 className="text-xl font-bold">
           Week {getWeek(startOfTheWeek)} of {getISOWeekYear(startOfTheWeek)}
@@ -113,10 +86,15 @@ const WeekCalendar = () => {
           const weekDayName = WEEK_DAYS[getDay(day) - 1] || WEEK_DAYS[6];
 
           return (
-            <div key={dayIndex} className="group flex flex-1 flex-col gap-2">
-              <h3 className="text-center text-stone-600 dark:text-stone-300">
-                {weekDayName}
-              </h3>
+            <div key={dayIndex} className="group flex flex-1 flex-col gap-4">
+              <div className="space-y-2 text-center">
+                <h3 className="text-stone-600 dark:text-stone-300">
+                  {weekDayName}
+                </h3>
+                <h6 className="text-stone-600 dark:text-stone-300">
+                  {day.getDate()}
+                </h6>
+              </div>
               <div className="flex flex-col border-r border-stone-300 group-last-of-type:border-r-0 dark:border-stone-600">
                 {eachMinuteOfInterval<Date>(
                   {
@@ -133,11 +111,11 @@ const WeekCalendar = () => {
                       className="group/minutes-cell relative flex gap-4"
                     >
                       {dayIndex === 0 && (
-                        <p className="absolute -left-4 -top-1 w-3 basis-0 -translate-y-3 self-start text-right text-stone-600 dark:text-stone-200 md:static md:text-base">
+                        <p className="translate-0 absolute -left-[23px] -top-[13px] w-3 basis-0 self-start text-right text-stone-600 dark:text-stone-200 md:static md:-translate-y-3 md:text-base">
                           {hour !== 0 && hour}
                         </p>
                       )}
-                      <div className="flex h-20 w-full overflow-x-hidden border-b border-stone-300 p-2 group-last-of-type/minutes-cell:border-b-0 dark:border-stone-500">
+                      <div className="flex h-20 w-full flex-wrap gap-2 overflow-x-hidden border-b border-stone-300 p-2 group-last-of-type/minutes-cell:border-b-0 dark:border-stone-500">
                         {groupOccurrences(dayIndex, hour).map(
                           ([habitId, habitOccurrences]) => {
                             if (!habitOccurrences) {
diff --git a/src/components/habit/habits-page/HabitsPage.test.tsx b/src/components/habit/habits-page/HabitsPage.test.tsx
index ce0859d..4285b9b 100644
--- a/src/components/habit/habits-page/HabitsPage.test.tsx
+++ b/src/components/habit/habits-page/HabitsPage.test.tsx
@@ -40,7 +40,11 @@ jest.mock('@hooks', () => ({
     .fn()
     .mockReturnValue(['', jest.fn(), jest.fn(), jest.fn()]),
   useFileField: jest.fn().mockReturnValue([null, jest.fn(), jest.fn()]),
-  useScreenSize: jest.fn(),
+  useScreenWidth: jest.fn().mockReturnValue({
+    screenWidth: 1400,
+    isMobile: false,
+    isDesktop: true,
+  }),
 }));
 
 describe(HabitsPage.name, () => {
diff --git a/src/components/habit/habits-page/HabitsPage.tsx b/src/components/habit/habits-page/HabitsPage.tsx
index d300d75..df031c1 100644
--- a/src/components/habit/habits-page/HabitsPage.tsx
+++ b/src/components/habit/habits-page/HabitsPage.tsx
@@ -4,7 +4,7 @@ import {
   EditHabitDialog,
   TraitChip,
 } from '@components';
-import { useDocumentTitle, useScreenSize } from '@hooks';
+import { useDocumentTitle, useScreenWidth } from '@hooks';
 import { type Habit } from '@models';
 import {
   Button,
@@ -69,7 +69,7 @@ const HabitsPage = () => {
   const { removeOccurrencesByHabitId } = useOccurrencesStore();
   const [habitToEdit, setHabitToEdit] = React.useState<Habit | null>(null);
   const [habitToRemove, setHabitToRemove] = React.useState<Habit | null>(null);
-  const screenSize = useScreenSize();
+  const { isMobile } = useScreenWidth();
 
   useDocumentTitle('My Habits | Habitrack');
 
@@ -99,8 +99,6 @@ const HabitsPage = () => {
     setHabitToEdit(null);
   };
 
-  const isMobile = screenSize < 768;
-
   return (
     <>
       <h1 className="mx-auto my-4 text-3xl font-bold text-gray-800 dark:text-gray-300">
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 47f1022..0a7f8b5 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -1,5 +1,5 @@
 import { AuthModalButton } from '@components';
-import { useScreenSize, useFetchOnAuth } from '@hooks';
+import { useScreenWidth, useFetchOnAuth } from '@hooks';
 import { Button, Tooltip, Spinner } from '@nextui-org/react';
 import { GithubLogo } from '@phosphor-icons/react';
 import { useSessionContext } from '@supabase/auth-helpers-react';
@@ -11,7 +11,7 @@ import ThemeToggle from './ThemeToggle';
 
 const Header = () => {
   useFetchOnAuth();
-  const screenSize = useScreenSize();
+  const { screenWidth, isMobile, isDesktop } = useScreenWidth();
   const session = useSessionContext();
 
   return (
@@ -36,8 +36,8 @@ const Header = () => {
               color="primary"
               as={Link}
               to="/calendar/month"
-              size={screenSize > 1024 ? 'md' : 'sm'}
-              className={screenSize < 339 ? 'min-w-fit px-2' : ''}
+              size={isDesktop ? 'md' : 'sm'}
+              className={screenWidth < 339 ? 'min-w-fit px-2' : ''}
             >
               Calendar
             </Button>
@@ -46,16 +46,16 @@ const Header = () => {
               variant="flat"
               as={Link}
               to="/habits"
-              size={screenSize > 1024 ? 'md' : 'sm'}
+              size={isDesktop ? 'md' : 'sm'}
               className={clsx(
                 'dark:text-secondary-800',
-                screenSize < 339 && 'min-w-fit px-2'
+                screenWidth < 339 && 'min-w-fit px-2'
               )}
             >
               Habits
             </Button>
             <ThemeToggle />
-            {screenSize > 768 && (
+            {!isMobile && (
               <Tooltip
                 showArrow
                 content="View source code on GitHub"
@@ -70,9 +70,9 @@ const Header = () => {
                   as={Link}
                   to="https://github.com/domhhv/habitrack"
                   target="_blank"
-                  size={screenSize > 1024 ? 'md' : 'sm'}
+                  size={isDesktop ? 'md' : 'sm'}
                 >
-                  <GithubLogo size={screenSize > 1024 ? 20 : 16} />
+                  <GithubLogo size={isDesktop ? 20 : 16} />
                 </Button>
               </Tooltip>
             )}
diff --git a/src/components/header/ThemeToggle.tsx b/src/components/header/ThemeToggle.tsx
index b6860b0..ee552cd 100644
--- a/src/components/header/ThemeToggle.tsx
+++ b/src/components/header/ThemeToggle.tsx
@@ -1,4 +1,4 @@
-import { ThemeMode, useScreenSize, useThemeMode } from '@hooks';
+import { ThemeMode, useScreenWidth, useThemeMode } from '@hooks';
 import { ButtonGroup, Button } from '@nextui-org/react';
 import {
   SunDim as SunIcon,
@@ -17,7 +17,7 @@ const modesToIcons = {
 
 const ThemeToggle = () => {
   const { themeMode, setThemeMode } = useThemeMode();
-  const screenSize = useScreenSize();
+  const { screenWidth } = useScreenWidth();
 
   const handleThemeChange = (newThemeMode: ThemeMode) => () => {
     setThemeMode(newThemeMode);
@@ -42,7 +42,7 @@ const ThemeToggle = () => {
             isIconOnly
             variant="flat"
             color="secondary"
-            size={screenSize > 1024 ? 'md' : 'sm'}
+            size={screenWidth > 1024 ? 'md' : 'sm'}
           >
             <Icon
               className={twMerge('dark:text-neutral-200', iconClassName)}
diff --git a/src/components/user-account/AuthModalButton.tsx b/src/components/user-account/AuthModalButton.tsx
index b9ed2c0..d29b224 100644
--- a/src/components/user-account/AuthModalButton.tsx
+++ b/src/components/user-account/AuthModalButton.tsx
@@ -1,4 +1,4 @@
-import { useScreenSize } from '@hooks';
+import { useScreenWidth } from '@hooks';
 import {
   Button,
   ButtonGroup,
@@ -29,7 +29,7 @@ export type AuthMode = 'login' | 'register' | 'reset-password';
 
 const AuthModalButton = () => {
   const user = useUser();
-  const screenSize = useScreenSize();
+  const { screenWidth } = useScreenWidth();
   const { showSnackbar } = useSnackbarsStore();
   const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
   const [authenticating, setAuthenticating] = React.useState(false);
@@ -114,16 +114,16 @@ const AuthModalButton = () => {
   return (
     <>
       {user?.id ? (
-        <ButtonGroup size={screenSize > 1024 ? 'md' : 'sm'}>
+        <ButtonGroup size={screenWidth > 1024 ? 'md' : 'sm'}>
           <Button
-            isIconOnly={screenSize < 1024}
+            isIconOnly={screenWidth < 1024}
             as={Link}
             to="/account"
             data-testid="auth-button"
             variant="flat"
             startContent={<UserIcon data-testid="user-icon" weight="bold" />}
           >
-            {screenSize > 1024 && 'Account'}
+            {screenWidth > 1024 && 'Account'}
           </Button>
           <Tooltip content="Log out">
             <Button
diff --git a/src/helpers/calendar.ts b/src/helpers/calendar.ts
index 11da3fd..c170267 100644
--- a/src/helpers/calendar.ts
+++ b/src/helpers/calendar.ts
@@ -78,7 +78,7 @@ export const generateCalendarRange = (
   return [+rangeStart, +rangeEnd];
 };
 
-const monthNames = [
+const MONTH = [
   'January',
   'February',
   'March',
@@ -94,7 +94,7 @@ const monthNames = [
 ];
 
 export function getMonthIndex(monthLabel: string): number {
-  return monthNames.indexOf(monthLabel);
+  return MONTH.indexOf(monthLabel);
 }
 
 function getMondayOffset(day: number): number {
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 5ce3351..2299089 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -1,3 +1,4 @@
 export * from './supabaseClient';
 export * from './occurrencesCache';
 export * from './calendar';
+export { default as tailwindConfig } from './tailwindConfig';
diff --git a/src/helpers/tailwindConfig.ts b/src/helpers/tailwindConfig.ts
new file mode 100644
index 0000000..6605c0e
--- /dev/null
+++ b/src/helpers/tailwindConfig.ts
@@ -0,0 +1,4 @@
+import tailwindConfig from '@root/tailwind.config';
+import resolveConfig from 'tailwindcss/resolveConfig';
+
+export default resolveConfig(tailwindConfig);
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index aecea28..b144308 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -1,7 +1,7 @@
 export * from './useThemeMode';
 export { default as useThemeMode } from './useThemeMode';
 
-export { default as useScreenSize } from './useScreenSize';
+export { default as useScreenWidth } from './useScreenWidth';
 export { default as useTextField } from './useTextField';
 export { default as useFileField } from './useFileField';
 export { default as useDataFetch } from './useDataFetch';
diff --git a/src/hooks/useScreenSize.test.ts b/src/hooks/useScreenSize.test.ts
deleted file mode 100644
index 03a2495..0000000
--- a/src/hooks/useScreenSize.test.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { fireEvent, renderHook } from '@testing-library/react';
-
-import useScreenSize from './useScreenSize';
-
-describe(useScreenSize.name, () => {
-  it('should return a number', () => {
-    const { result } = renderHook(() => useScreenSize());
-    expect(typeof result.current).toBe('number');
-  });
-
-  it('should return the window innerWidth', () => {
-    (window.innerWidth as number) = 1000;
-    const { result } = renderHook(() => useScreenSize());
-    expect(result.current).toEqual(1000);
-  });
-
-  it('should update the screen size when the window is resized', () => {
-    (window.innerWidth as number) = 1024;
-    const { result } = renderHook(() => useScreenSize());
-    expect(result.current).toEqual(1024);
-    fireEvent.resize(window, { target: { innerWidth: 1000 } });
-    expect(result.current).toEqual(1000);
-  });
-});
diff --git a/src/hooks/useScreenSize.ts b/src/hooks/useScreenSize.ts
deleted file mode 100644
index e396f7a..0000000
--- a/src/hooks/useScreenSize.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-const useScreenSize = () => {
-  const [screenSize, setScreenSize] = React.useState(() => {
-    return window.innerWidth;
-  });
-
-  React.useEffect(() => {
-    const handleResize = (event: UIEvent) => {
-      setScreenSize((event.target as typeof window)?.innerWidth);
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  return screenSize;
-};
-
-export default useScreenSize;
diff --git a/src/hooks/useScreenWidth.test.ts b/src/hooks/useScreenWidth.test.ts
new file mode 100644
index 0000000..8ffc10f
--- /dev/null
+++ b/src/hooks/useScreenWidth.test.ts
@@ -0,0 +1,24 @@
+import { fireEvent, renderHook } from '@testing-library/react';
+
+import useScreenWidth from './useScreenWidth';
+
+describe(useScreenWidth.name, () => {
+  it('should return screenWidth as a number', () => {
+    const { result } = renderHook(() => useScreenWidth());
+    expect(typeof result.current.screenWidth).toBe('number');
+  });
+
+  it('should return the window innerWidth', () => {
+    (window.innerWidth as number) = 1000;
+    const { result } = renderHook(() => useScreenWidth());
+    expect(result.current.screenWidth).toEqual(1000);
+  });
+
+  it('should update the screen size when the window is resized', () => {
+    (window.innerWidth as number) = 1024;
+    const { result } = renderHook(() => useScreenWidth());
+    expect(result.current.screenWidth).toEqual(1024);
+    fireEvent.resize(window, { target: { innerWidth: 1000 } });
+    expect(result.current.screenWidth).toEqual(1000);
+  });
+});
diff --git a/src/hooks/useScreenWidth.ts b/src/hooks/useScreenWidth.ts
new file mode 100644
index 0000000..9f7f0cd
--- /dev/null
+++ b/src/hooks/useScreenWidth.ts
@@ -0,0 +1,29 @@
+import { tailwindConfig } from '@helpers';
+import React from 'react';
+
+const useScreenWidth = () => {
+  const [screenWidth, setScreenWidth] = React.useState(() => {
+    return window.innerWidth;
+  });
+
+  React.useEffect(() => {
+    const handleResize = (event: UIEvent) => {
+      setScreenWidth((event.target as typeof window)?.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  const { md, lg } = tailwindConfig.theme.screens;
+
+  const isMobile = screenWidth < Number(md.slice(0, -2));
+  const isDesktop = screenWidth >= Number(lg.slice(0, -2));
+
+  return { screenWidth, isMobile, isDesktop };
+};
+
+export default useScreenWidth;
diff --git a/src/stores/occurrences.store.ts b/src/stores/occurrences.store.ts
index b52eb76..95a5af9 100644
--- a/src/stores/occurrences.store.ts
+++ b/src/stores/occurrences.store.ts
@@ -159,7 +159,7 @@ const useOccurrencesStore = create<OccurrencesState>((set, get) => {
         ),
       }));
     },
-    onRangeChange: (range: [number, number]) => set({ range }),
+    onRangeChange: (range: [number, number]) => set(() => ({ range })),
     updateOccurrences: (
       allOccurrences: Occurrence[],
       filteredBy: OccurrenceFilters
diff --git a/tests/jest.config.js b/tests/jest.config.js
index 3725769..cbd67a7 100644
--- a/tests/jest.config.js
+++ b/tests/jest.config.js
@@ -14,6 +14,7 @@ export default {
     '@models': '<rootDir>/src/models',
     '@stores': '<rootDir>/src/stores',
     '@tests': '<rootDir>/tests',
+    '@root/tailwind.config': '<rootDir>/tailwind.config.ts',
   },
   transform: {
     '\\.[jt]sx?$': 'babel-jest',
diff --git a/tsconfig.json b/tsconfig.json
index 08f251f..96e68f6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,7 +26,8 @@
       "@helpers": ["helpers"],
       "@models": ["models"],
       "@stores": ["stores"],
-      "@tests": ["../tests"]
+      "@tests": ["../tests"],
+      "@root/*": ["../*"]
     }
   },
   "include": ["src", "tests", "./supabase/database.types.ts"]
diff --git a/vite.config.ts b/vite.config.ts
index cbebaa8..5f163b7 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,6 +32,7 @@ export default defineConfig(({ mode }) => {
         '@models': resolve(__dirname, './src/models'),
         '@stores': resolve(__dirname, './src/stores'),
         '@tests': resolve(__dirname, './tests'),
+        '@root': resolve(__dirname, './'),
       },
     },
     build: {