diff --git a/src/components/calendar-month/MonthCalendar.tsx b/src/components/calendar-month/MonthCalendar.tsx
index 98a5bc8..7221207 100644
--- a/src/components/calendar-month/MonthCalendar.tsx
+++ b/src/components/calendar-month/MonthCalendar.tsx
@@ -7,10 +7,11 @@ import { capitalizeFirstLetter } from '@utils';
 import clsx from 'clsx';
 import React from 'react';
 import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
+import { useLocation } from 'react-router-dom';
 import { useCalendarState } from 'react-stately';
 
-import CalendarGrid from './CalendarGrid';
-import CalendarHeader from './CalendarHeader';
+import MonthCalendarGrid from './MonthCalendarGrid';
+import MonthCalendarHeader from './MonthCalendarHeader';
 import NoteDialog from './NoteDialog';
 import OccurrenceDialog from './OccurrenceDialog';
 
@@ -26,12 +27,12 @@ const createCalendar = (identifier: string) => {
 const MonthCalendar = () => {
   const { onRangeChange } = useOccurrencesStore();
   const { locale } = useLocale();
-  const state = useCalendarState({
+  const calendarState = useCalendarState({
     locale,
     createCalendar,
   });
   const { calendarProps, prevButtonProps, nextButtonProps, title } =
-    useCalendar({}, state);
+    useCalendar({}, calendarState);
   const {
     isOpen: isNoteDialogOpen,
     onOpen: openNoteDialog,
@@ -43,17 +44,36 @@ 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]
+  );
+
+  React.useEffect(() => {
+    if (!locationState) {
+      return;
+    }
+
+    const { year, month } = locationState;
+
+    setFocusedDate(year, month, 1);
+  }, [locationState, setFocusedDate]);
 
   React.useEffect(() => {
     onRangeChange(
       generateCalendarRange(
-        state.visibleRange.start.year,
-        state.visibleRange.start.month
+        calendarState.visibleRange.start.year,
+        calendarState.visibleRange.start.month
       )
     );
   }, [
-    state.visibleRange.start.year,
-    state.visibleRange.start.month,
+    calendarState.visibleRange.start.year,
+    calendarState.visibleRange.start.month,
     onRangeChange,
   ]);
 
@@ -63,18 +83,13 @@ const MonthCalendar = () => {
     `${activeMonthLabel.slice(0, 3)} ${activeYear} | Habitrack Calendar`
   );
 
-  const setFocusedDate = (year: number, month: number, day: number) => {
-    const nextFocusedDate = new CalendarDate(year, month, day);
-    state.setFocusedDate(nextFocusedDate);
-  };
-
   const navigateToMonth = (month: number) => {
-    const { year, day } = state.focusedDate;
+    const { year, day } = calendarState.focusedDate;
     setFocusedDate(year, month, day);
   };
 
   const navigateToYear = (year: number) => {
-    const { month, day } = state.focusedDate;
+    const { month, day } = calendarState.focusedDate;
     setFocusedDate(year, month, day);
   };
 
@@ -133,21 +148,21 @@ const MonthCalendar = () => {
   return (
     <>
       <div {...calendarProps} className={calendarContainerClassName}>
-        <CalendarHeader
+        <MonthCalendarHeader
           activeMonthLabel={capitalizeFirstLetter(activeMonthLabel)}
           activeYear={activeYear}
           prevButtonProps={transformButtonProps(prevButtonProps)}
           nextButtonProps={transformButtonProps(nextButtonProps)}
-          onNavigateBack={state.focusPreviousPage}
-          onNavigateForward={state.focusNextPage}
+          onNavigateBack={calendarState.focusPreviousPage}
+          onNavigateForward={calendarState.focusNextPage}
           onNavigateToMonth={navigateToMonth}
           onNavigateToYear={navigateToYear}
           onResetFocusedDate={resetFocusedDate}
         />
-        <CalendarGrid
+        <MonthCalendarGrid
           activeMonthLabel={capitalizeFirstLetter(activeMonthLabel)}
           activeYear={Number(activeYear)}
-          state={state}
+          state={calendarState}
           onAddOccurrence={handleOccurrenceModalOpen}
           onAddNote={handleNoteModalOpen}
         />
diff --git a/src/components/calendar-month/CalendarCell.tsx b/src/components/calendar-month/MonthCalendarCell.tsx
similarity index 94%
rename from src/components/calendar-month/CalendarCell.tsx
rename to src/components/calendar-month/MonthCalendarCell.tsx
index 69ce000..0e4f3c9 100644
--- a/src/components/calendar-month/CalendarCell.tsx
+++ b/src/components/calendar-month/MonthCalendarCell.tsx
@@ -45,7 +45,7 @@ type CalendarCellProps = {
   position: CellPosition;
 };
 
-const CalendarCell = ({
+const MonthCalendarCell = ({
   dateNumber,
   monthNumber,
   fullYear,
@@ -64,6 +64,7 @@ const CalendarCell = ({
   const screenSize = useScreenSize();
   const cellDate = new Date(fullYear, monthNumber - 1, dateNumber);
   const isTodayCell = isToday(cellDate);
+  const isFutureCell = isFuture(cellDate);
   const date = format(cellDate, 'yyyy-MM-dd');
   const isDesktop = screenSize >= 1024;
 
@@ -97,7 +98,10 @@ const CalendarCell = ({
         }
       }
 
-      if (isMobile || e?.currentTarget instanceof HTMLButtonElement) {
+      if (
+        !isFutureCell &&
+        (isMobile || e?.currentTarget instanceof HTMLButtonElement)
+      ) {
         return onAddOccurrence(dateNumber, monthNumber, fullYear);
       }
     },
@@ -113,6 +117,7 @@ const CalendarCell = ({
       user,
       isMobile,
       isTodayCell,
+      isFutureCell,
     ]
   );
 
@@ -161,7 +166,7 @@ const CalendarCell = ({
     position === 'bottom-left' && 'rounded-bl-md',
     position === 'bottom-right' && 'rounded-br-md',
     isTodayCell &&
-      'bg-background-200 hover:bg-background-300 dark:bg-background-800 dark:hover:bg-background-700'
+      'bg-background-100 hover:bg-background-300 dark:bg-background-700 dark:hover:bg-background-700'
   );
 
   const cellHeaderClassName = clsx(
@@ -182,13 +187,13 @@ const CalendarCell = ({
         <div className="flex items-center justify-between gap-2">
           {rangeStatus === 'in-range' && !isMobile && (
             <div className="flex items-center gap-1">
-              {!isFuture(cellDate) && (
+              {!isFutureCell && (
                 <Tooltip content="Log habit" closeDelay={0}>
                   <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}
-                    color="primary"
+                    color="secondary"
                     isDisabled={fetchingOccurrences || !user}
                   >
                     <CalendarPlus weight="bold" size={isDesktop ? 18 : 14} />
@@ -206,7 +211,7 @@ const CalendarCell = ({
                   )}
                   radius="sm"
                   onClick={handleAddNoteClick}
-                  color={hasNote ? 'success' : 'primary'}
+                  color={hasNote ? 'success' : 'secondary'}
                   isDisabled={fetchingNotes || !user}
                 >
                   {hasNote ? (
@@ -251,4 +256,4 @@ const CalendarCell = ({
   );
 };
 
-export default CalendarCell;
+export default MonthCalendarCell;
diff --git a/src/components/calendar-month/CalendarGrid.tsx b/src/components/calendar-month/MonthCalendarGrid.tsx
similarity index 85%
rename from src/components/calendar-month/CalendarGrid.tsx
rename to src/components/calendar-month/MonthCalendarGrid.tsx
index c41d631..907ad7d 100644
--- a/src/components/calendar-month/CalendarGrid.tsx
+++ b/src/components/calendar-month/MonthCalendarGrid.tsx
@@ -1,15 +1,16 @@
 import { 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 { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 import { useCalendarGrid, useLocale } from 'react-aria';
-import { useNavigate } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { type CalendarState } from 'react-stately';
 
-import type { CellPosition, CellRangeStatus } from './CalendarCell';
-import CalendarCell from './CalendarCell';
+import type { CellPosition, CellRangeStatus } from './MonthCalendarCell';
+import MonthCalendarCell from './MonthCalendarCell';
 
 type CalendarGridProps = {
   state: CalendarState;
@@ -25,31 +26,19 @@ type CalendarGridProps = {
 
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-const CalendarGrid = ({
+const MonthCalendarGrid = ({
   state,
   onAddNote,
   onAddOccurrence,
   activeMonthLabel,
   activeYear,
 }: CalendarGridProps) => {
-  const navigate = useNavigate();
   const { gridProps } = useCalendarGrid({}, state);
   const { locale } = useLocale();
   const weeksInMonthCount = getWeeksInMonth(state.visibleRange.start, locale);
   const weekIndexes = [...new Array(weeksInMonthCount).keys()];
   const { month: activeMonth } = state.visibleRange.start;
-
-  const handleWeekClick = (startDate: CalendarDate | null) => {
-    if (!startDate) {
-      return;
-    }
-
-    navigate('/calendar/week', {
-      state: {
-        startDate: new Date(startDate.year, startDate.month - 1, startDate.day),
-      },
-    });
-  };
+  const { pathname } = useLocation();
 
   const getCellPosition = (
     weekIndex: number,
@@ -103,7 +92,8 @@ const CalendarGrid = ({
               activeYear,
               weekIndex
             );
-            const dates = state.getDatesInWeek(weekIndex);
+            const dates = state.getDatesInWeek(weekIndex).filter(isTruthy);
+            const [firstDate] = dates;
 
             return (
               <div
@@ -111,11 +101,22 @@ const CalendarGrid = ({
                 className="group relative flex items-end gap-1 md:gap-2"
               >
                 <Button
+                  as={Link}
                   className={clsx(
                     'absolute -left-[24px] bottom-0 h-[107px] w-[20px] min-w-fit p-0 md:-left-[48px] md:w-[40px]'
                   )}
                   variant="light"
-                  onClick={() => handleWeekClick(dates[0])}
+                  to="/calendar/week"
+                  state={{
+                    prevPathname: pathname,
+                    month: activeMonth,
+                    year: activeYear,
+                    startDate: new Date(
+                      firstDate.year,
+                      firstDate.month - 1,
+                      firstDate.day
+                    ),
+                  }}
                 >
                   {week}
                 </Button>
@@ -150,7 +151,7 @@ const CalendarGrid = ({
                       const position = getCellPosition(weekIndex, dayIndex);
 
                       return (
-                        <CalendarCell
+                        <MonthCalendarCell
                           key={cellKey}
                           dateNumber={day}
                           monthNumber={month}
@@ -174,4 +175,4 @@ const CalendarGrid = ({
   );
 };
 
-export default CalendarGrid;
+export default MonthCalendarGrid;
diff --git a/src/components/calendar-month/CalendarHeader.test.tsx b/src/components/calendar-month/MonthCalendarHeader.test.tsx
similarity index 76%
rename from src/components/calendar-month/CalendarHeader.test.tsx
rename to src/components/calendar-month/MonthCalendarHeader.test.tsx
index 4646b2d..f14c14e 100644
--- a/src/components/calendar-month/CalendarHeader.test.tsx
+++ b/src/components/calendar-month/MonthCalendarHeader.test.tsx
@@ -1,10 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import CalendarHeader, { type CalendarHeaderProps } from './CalendarHeader';
+import MonthCalendarHeader, {
+  type MonthCalendarHeaderProps,
+} from './MonthCalendarHeader';
 
-describe(CalendarHeader.name, () => {
-  const props: CalendarHeaderProps = {
+describe(MonthCalendarHeader.name, () => {
+  const props: MonthCalendarHeaderProps = {
     activeMonthLabel: 'January',
     activeYear: '2022',
     prevButtonProps: {
@@ -23,13 +25,13 @@ describe(CalendarHeader.name, () => {
   };
 
   it.skip('should render month and year', () => {
-    const { getByText } = render(<CalendarHeader {...props} />);
+    const { getByText } = render(<MonthCalendarHeader {...props} />);
     expect(getByText('January 2022')).toBeInTheDocument();
   });
 
   it.skip('should disable previous button', () => {
     const { getByRole } = render(
-      <CalendarHeader
+      <MonthCalendarHeader
         {...props}
         prevButtonProps={{ ...props.prevButtonProps, disabled: true }}
       />
@@ -39,7 +41,7 @@ describe(CalendarHeader.name, () => {
 
   it.skip('should disable next button', () => {
     const { getByRole } = render(
-      <CalendarHeader
+      <MonthCalendarHeader
         {...props}
         nextButtonProps={{ ...props.nextButtonProps, disabled: true }}
       />
@@ -48,13 +50,13 @@ describe(CalendarHeader.name, () => {
   });
 
   it.skip('should call onNavigateBack', () => {
-    const { getByRole } = render(<CalendarHeader {...props} />);
+    const { getByRole } = render(<MonthCalendarHeader {...props} />);
     getByRole('navigate-back').click();
     expect(props.onNavigateBack).toHaveBeenCalled();
   });
 
   it.skip('should call onNavigateForward', () => {
-    const { getByRole } = render(<CalendarHeader {...props} />);
+    const { getByRole } = render(<MonthCalendarHeader {...props} />);
     getByRole('navigate-forward').click();
     expect(props.onNavigateForward).toHaveBeenCalled();
   });
diff --git a/src/components/calendar-month/CalendarHeader.tsx b/src/components/calendar-month/MonthCalendarHeader.tsx
similarity index 57%
rename from src/components/calendar-month/CalendarHeader.tsx
rename to src/components/calendar-month/MonthCalendarHeader.tsx
index 32477ad..c1bad12 100644
--- a/src/components/calendar-month/CalendarHeader.tsx
+++ b/src/components/calendar-month/MonthCalendarHeader.tsx
@@ -1,8 +1,19 @@
+import { TraitChip } from '@components';
 import { useScreenSize } from '@hooks';
-import { Select, SelectItem, Button, SelectSection } from '@nextui-org/react';
+import type { Habit, Trait } from '@models';
+import type { SelectedItems } from '@nextui-org/react';
+import {
+  ListboxItem,
+  Select,
+  SelectItem,
+  Button,
+  SelectSection,
+} from '@nextui-org/react';
 import { ArrowFatLeft, ArrowFatRight } 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 React from 'react';
 
 type NavigationButtonProps = {
@@ -10,7 +21,7 @@ type NavigationButtonProps = {
   'aria-label': string;
 };
 
-export type CalendarHeaderProps = {
+export type MonthCalendarHeaderProps = {
   activeMonthLabel: string;
   activeYear: string;
   prevButtonProps: NavigationButtonProps;
@@ -39,7 +50,7 @@ const MONTHS = [
 
 const YEARS = Array.from({ length: 31 }, (_, i) => 2000 + i);
 
-const CalendarHeader = ({
+const MonthCalendarHeader = ({
   activeMonthLabel,
   activeYear,
   prevButtonProps,
@@ -49,7 +60,7 @@ const CalendarHeader = ({
   onNavigateToMonth,
   onNavigateToYear,
   onResetFocusedDate,
-}: CalendarHeaderProps) => {
+}: MonthCalendarHeaderProps) => {
   const { habits } = useHabitsStore();
   const { traits } = useTraitsStore();
   const { filteredBy, filterBy } = useOccurrencesStore();
@@ -59,6 +70,10 @@ const CalendarHeader = ({
 
   const shouldRenderFilters = !!user && habits.length > 0 && traits.length > 0;
 
+  const habitsByTraitName = React.useMemo(() => {
+    return Object.groupBy(habits, (habit) => habit.trait?.name || 'Unknown');
+  }, [habits]);
+
   const handleMonthChange: React.ChangeEventHandler<HTMLSelectElement> = (
     event
   ) => {
@@ -93,11 +108,14 @@ const CalendarHeader = ({
   const isDesktop = screenSize > 1024;
 
   return (
-    <div className="flex items-center justify-between px-0 pt-2 lg:px-0 lg:pt-0">
-      <div className="flex items-center justify-between gap-0 lg:gap-2">
-        <div className="mr-0 flex items-center gap-2 lg:mr-2">
+    <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">
+        <div className="mr-0 flex items-stretch gap-2 lg:mr-2">
           <Select
             variant="bordered"
+            color="secondary"
+            radius="sm"
+            label={isMobile ? null : 'Month'}
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={new Set([activeMonthLabel])}
             onChange={handleMonthChange}
@@ -115,6 +133,9 @@ const CalendarHeader = ({
           </Select>
           <Select
             variant="bordered"
+            color="secondary"
+            radius="sm"
+            label={isMobile ? null : 'Year'}
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={new Set([activeYear])}
             onChange={handleYearChange}
@@ -131,15 +152,20 @@ const CalendarHeader = ({
             ))}
           </Select>
         </div>
-        <div className="flex items-center gap-0 lg:gap-2">
+        <div className="flex items-stretch gap-0 lg:gap-2">
           <Button
             isIconOnly
             size={isDesktop ? 'md' : 'sm'}
+            radius="sm"
             variant="light"
+            color="secondary"
             isDisabled={prevButtonProps.disabled}
             aria-label={prevButtonProps['aria-label']}
             onClick={onNavigateBack}
-            className={isMobile ? 'w-6 min-w-fit p-0' : ''}
+            className={clsx(
+              'h-auto dark:text-secondary-600',
+              isMobile && 'w-6 min-w-fit p-0'
+            )}
             role="navigate-back"
           >
             <ArrowFatLeft size={isDesktop ? 20 : 16} />
@@ -147,8 +173,11 @@ const CalendarHeader = ({
           {!isMobile && !isOnCurrentMonth && (
             <Button
               size={isDesktop ? 'md' : 'sm'}
+              radius="sm"
               variant="bordered"
+              color="secondary"
               onClick={onResetFocusedDate}
+              className="h-auto"
             >
               Today
             </Button>
@@ -157,10 +186,12 @@ const CalendarHeader = ({
             isIconOnly
             size={isDesktop ? 'md' : 'sm'}
             variant="light"
+            color="secondary"
+            radius="sm"
             isDisabled={nextButtonProps.disabled}
             aria-label={nextButtonProps['aria-label']}
             onClick={onNavigateForward}
-            className={isMobile ? 'w-6 min-w-fit p-0' : ''}
+            className={clsx('h-auto', isMobile && 'w-6 min-w-fit p-0')}
             role="navigate-forward"
           >
             <ArrowFatRight size={isDesktop ? 20 : 16} />
@@ -168,9 +199,12 @@ const CalendarHeader = ({
         </div>
       </div>
       {shouldRenderFilters && (
-        <div className="flex items-center justify-between gap-2">
+        <div className="flex items-stretch justify-between gap-2">
           <Select
             variant="bordered"
+            color="secondary"
+            radius="sm"
+            label={isMobile ? null : 'Filter by habits'}
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={filteredBy.habitIds}
             onChange={handleHabitsFilterChange}
@@ -179,35 +213,102 @@ const CalendarHeader = ({
             classNames={{
               popoverContent: isMobile ? 'w-[150px]' : 'w-[250px]',
               selectorIcon: isMobile && 'hidden',
-              innerWrapper: isMobile && 'w-full',
-              value: isMobile && 'text-tiny',
+              innerWrapper: clsx(
+                'w-full overflow-x-scroll !pt-6 md:w-48',
+                isMobile && '!pt-0'
+              ),
+              value: 'text-tiny md:text-base !overflow-visible flex gap-2 w-48',
+              trigger: clsx(!isMobile && 'h-18 pt-0'),
+              label: '!-translate-y-2',
             }}
             popoverProps={{
               crossOffset: isMobile ? -75 : 0,
             }}
+            renderValue={(selectedHabits: SelectedItems<Habit>) => {
+              return selectedHabits.map(({ key }) => {
+                const habit = habits.find((h) => h.id === Number(key));
+
+                if (!habit) {
+                  return null;
+                }
+
+                const { id, name, iconPath } = habit;
+                const iconUrl = getHabitIconUrl(iconPath);
+
+                return (
+                  <img
+                    key={id}
+                    src={iconUrl}
+                    alt={`${name} icon`}
+                    className={clsx('h-4 w-4', screenSize < 400 && 'h-3 w-3')}
+                  />
+                );
+              });
+            }}
           >
-            <SelectSection title="Filter by habits">
-              {habits.map((habit) => (
-                <SelectItem key={habit.id}>{habit.name}</SelectItem>
-              ))}
-            </SelectSection>
+            {Object.keys(habitsByTraitName).map((traitName) => (
+              <SelectSection key={traitName} title={traitName} showDivider>
+                {habitsByTraitName[traitName] ? (
+                  habitsByTraitName[traitName].map((habit) => {
+                    const iconUrl = getHabitIconUrl(habit.iconPath);
+
+                    return (
+                      <SelectItem key={habit.id} textValue={habit.name}>
+                        <div className="flex items-center gap-2">
+                          <img
+                            src={iconUrl}
+                            alt={habit.name}
+                            role="habit-icon"
+                            className="h-4 w-4"
+                          />
+                          <span>{habit.name}</span>
+                        </div>
+                      </SelectItem>
+                    );
+                  })
+                ) : (
+                  <ListboxItem key="none">No habits</ListboxItem>
+                )}
+              </SelectSection>
+            ))}
           </Select>
           <Select
             variant="bordered"
+            color="secondary"
+            radius="sm"
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={filteredBy.traitIds}
+            label={isMobile ? null : 'Filter by traits'}
             onChange={handleTraitsFilterChange}
             className="w-[75px] md:w-[250px]"
             selectionMode="multiple"
             classNames={{
               popoverContent: isMobile ? 'w-[150px]' : 'w-[250px]',
               selectorIcon: isMobile && 'hidden',
-              innerWrapper: isMobile && 'w-full',
-              value: isMobile && 'text-tiny',
+              innerWrapper: clsx(
+                'w-full overflow-x-scroll !pt-6 md:w-48',
+                isMobile && '!pt-0'
+              ),
+              value: 'text-tiny md:text-base !overflow-visible flex gap-2 w-48',
+              trigger: clsx(!isMobile && 'h-18 pt-0'),
+              label: '!-translate-y-2',
             }}
             popoverProps={{
               crossOffset: screenSize < 768 ? -75 : 0,
             }}
+            renderValue={(selectedTraits: SelectedItems<Trait>) => {
+              return selectedTraits.map(({ key }) => {
+                const trait = traits.find((t) => t.id === Number(key));
+
+                if (!trait) {
+                  return null;
+                }
+
+                const { id, name, color } = trait;
+
+                return <TraitChip key={id} trait={{ name, color }} />;
+              });
+            }}
           >
             <SelectSection title="Filter by traits">
               {traits.map((trait) => (
@@ -221,4 +322,4 @@ const CalendarHeader = ({
   );
 };
 
-export default CalendarHeader;
+export default MonthCalendarHeader;
diff --git a/src/components/calendar-month/OccurrenceChip.tsx b/src/components/calendar-month/OccurrenceChip.tsx
index 7c0dfa3..3cf1754 100644
--- a/src/components/calendar-month/OccurrenceChip.tsx
+++ b/src/components/calendar-month/OccurrenceChip.tsx
@@ -9,6 +9,7 @@ import { format } from 'date-fns';
 import React from 'react';
 
 export type OccurrenceChipProps = {
+  interactable?: boolean;
   occurrences: Occurrence[];
   onDelete?: (
     occurrenceId: number,
@@ -18,6 +19,7 @@ export type OccurrenceChipProps = {
 };
 
 const OccurrenceChip = ({
+  interactable = true,
   occurrences,
   onDelete,
   colorOverride,
@@ -82,7 +84,7 @@ const OccurrenceChip = ({
 
   let chipTooltip = (
     <Tooltip
-      isDisabled={!habitName}
+      isDisabled={!habitName || !interactable}
       content={tooltipContent}
       radius="sm"
       classNames={{
@@ -94,19 +96,22 @@ const OccurrenceChip = ({
       <div
         style={chipStyle}
         className={clsx(
-          'relative mt-0 min-w-0 rounded-full border-2 bg-slate-100 p-1.5 dark:bg-slate-800 md:mr-1 md:mt-1',
+          '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'
         )}
         role="habit-chip"
         onClick={(e) => {
           e.stopPropagation();
-          alert('Habit entry modal is coming soon!');
+
+          if (interactable) {
+            alert('Habit entry modal is coming soon!');
+          }
         }}
       >
         <img
           src={iconUrl}
           alt={`${habitName} icon`}
-          className={clsx('h-4 w-4 rounded', screenSize < 400 && 'h-3 w-3')}
+          className={clsx('h-4 w-4', screenSize < 400 && 'h-3 w-3')}
         />
       </div>
     </Tooltip>
diff --git a/src/components/calendar-week/WeekCalendar.tsx b/src/components/calendar-week/WeekCalendar.tsx
index 3994f3c..0bbd869 100644
--- a/src/components/calendar-week/WeekCalendar.tsx
+++ b/src/components/calendar-week/WeekCalendar.tsx
@@ -1,5 +1,5 @@
-/* eslint-disable */
-
+import { Button } from '@nextui-org/react';
+import { ArrowFatLeft } from '@phosphor-icons/react';
 import { useOccurrencesStore } from '@stores';
 import {
   addDays,
@@ -18,8 +18,6 @@ import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 
 import OccurrenceChip from '../calendar-month/OccurrenceChip';
-import { Button } from '@nextui-org/react';
-import { ArrowFatLeft } from '@phosphor-icons/react';
 
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
@@ -36,20 +34,6 @@ const WeekCalendar = () => {
     setStartOfTheWeek(startOfWeek(startOfDay(state.startDate || new Date())));
   }, [state]);
 
-  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 { startDate }: { startDate: Date } = state;
-
   const days = eachDayOfInterval<Date>({
     start: startOfTheWeek,
     end: addDays(startOfTheWeek, 6),
@@ -65,7 +49,7 @@ const WeekCalendar = () => {
       const date = new Date(o.timestamp);
       return date >= occurrencesRange[0] && date <= occurrencesRange[1];
     });
-  }, [days]);
+  }, [days, occurrences, startOfTheWeek]);
 
   const groupOccurrences = React.useCallback(
     (dayIndex: number, hour: number) => {
@@ -84,14 +68,32 @@ const WeekCalendar = () => {
         Object.groupBy(relatedOccurrences, (o) => o.habitId)
       );
     },
-    [days]
+    [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="/calendar/month"
+        to={prevPathname}
+        state={{
+          year,
+          month,
+        }}
         className="absolute left-6 top-0"
         variant="flat"
       >
@@ -100,10 +102,10 @@ const WeekCalendar = () => {
       </Button>
       <div className="space-y-2 text-center">
         <h1 className="text-xl font-bold">
-          Week {getWeek(startDate)} of {getISOWeekYear(startDate)}
+          Week {getWeek(startOfTheWeek)} of {getISOWeekYear(startOfTheWeek)}
         </h1>
         <p className="text-sm italic text-stone-400 dark:text-stone-500">
-          Editing coming soon
+          Logging & navigation coming soon
         </p>
       </div>
       <div className="flex justify-around">
@@ -111,7 +113,7 @@ const WeekCalendar = () => {
           const weekDayName = WEEK_DAYS[getDay(day) - 1] || WEEK_DAYS[6];
 
           return (
-            <div className="group flex flex-1 flex-col gap-2">
+            <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>
@@ -126,7 +128,10 @@ const WeekCalendar = () => {
                   const hour = minute.getHours();
 
                   return (
-                    <div className="group/minutes-cell relative flex gap-4">
+                    <div
+                      key={`${dayIndex}-${hour}`}
+                      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">
                           {hour !== 0 && hour}
diff --git a/src/components/common/TraitChip/TraitChip.tsx b/src/components/common/TraitChip/TraitChip.tsx
new file mode 100644
index 0000000..44ff52c
--- /dev/null
+++ b/src/components/common/TraitChip/TraitChip.tsx
@@ -0,0 +1,26 @@
+import type { Trait } from '@models';
+import { Chip } from '@nextui-org/react';
+import React from 'react';
+
+type TraitChipProps = {
+  trait: Pick<Trait, 'name' | 'color'> | null;
+};
+
+const TraitChip = ({ trait }: TraitChipProps) => {
+  return (
+    <Chip size="sm" variant="faded" className="h-5 border-1" color="secondary">
+      <div className="flex items-center gap-1 font-semibold">
+        <span
+          className="mr-0.5 inline-block h-1 w-1 rounded-full"
+          role="habit-trait-chip-color-indicator"
+          style={{
+            backgroundColor: trait?.color || 'black',
+          }}
+        />
+        <p role="habit-trait-chip-name">{trait?.name || 'Unknown trait'}</p>
+      </div>
+    </Chip>
+  );
+};
+
+export default TraitChip;
diff --git a/src/components/common/TraitChip/index.ts b/src/components/common/TraitChip/index.ts
new file mode 100644
index 0000000..d17db12
--- /dev/null
+++ b/src/components/common/TraitChip/index.ts
@@ -0,0 +1 @@
+export { default as TraitChip } from './TraitChip';
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index f200806..a525272 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -3,3 +3,4 @@ export * from './VisuallyHiddenInput';
 export * from './PasswordInput';
 export * from './Alert';
 export * from './Snackbars';
+export * from './TraitChip';
diff --git a/src/components/habit/habits-page/HabitsPage.tsx b/src/components/habit/habits-page/HabitsPage.tsx
index 086bfee..d300d75 100644
--- a/src/components/habit/habits-page/HabitsPage.tsx
+++ b/src/components/habit/habits-page/HabitsPage.tsx
@@ -2,12 +2,12 @@ import {
   AddHabitDialogButton,
   ConfirmDialog,
   EditHabitDialog,
+  TraitChip,
 } from '@components';
 import { useDocumentTitle, useScreenSize } from '@hooks';
 import { type Habit } from '@models';
 import {
   Button,
-  Chip,
   Table,
   TableBody,
   TableCell,
@@ -109,10 +109,9 @@ const HabitsPage = () => {
       <Table
         shadow="none"
         isHeaderSticky
-        className="px-4 lg:px-16 lg:py-4"
         classNames={{
           base: clsx(
-            'overflow-scroll [&>div]:bg-background-50 [&>div]:dark:bg-background-800',
+            'overflow-scroll px-8 py-2 lg:px-16 lg:py-4 [&>div]:bg-white [&>div]:dark:bg-background-800',
             isMobile ? 'max-h-[400px]' : 'max-h-[600px]'
           ),
         }}
@@ -122,10 +121,7 @@ const HabitsPage = () => {
             <TableColumn key={column.key}>{column.label}</TableColumn>
           )}
         </TableHeader>
-        <TableBody
-          emptyContent="No habits yet"
-          // items={habits.map(({ id, ...habit }) => ({ ...habit, key: id }))}
-        >
+        <TableBody emptyContent="No habits yet">
           {habits.map((habit) => (
             <TableRow key={habit.id}>
               <TableCell>
@@ -140,25 +136,7 @@ const HabitsPage = () => {
                 )}
               </TableCell>
               <TableCell>
-                <Chip
-                  size="sm"
-                  variant="faded"
-                  className="ml-2 h-5 border-1"
-                  color="secondary"
-                >
-                  <div className="flex items-center gap-1 font-semibold">
-                    <span
-                      className="mr-0.5 inline-block h-1 w-1 rounded-full"
-                      role="habit-trait-chip-color-indicator"
-                      style={{
-                        backgroundColor: habit.trait?.color || 'black',
-                      }}
-                    />
-                    <p role="habit-trait-chip-name">
-                      {habit.trait?.name || 'Unknown trait'}
-                    </p>
-                  </div>
-                </Chip>
+                <TraitChip trait={habit.trait} />
               </TableCell>
               <TableCell>
                 {format(habit.createdAt, isMobile ? 'MMM d, y' : 'LLLL do, y')}
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 2f99fb2..47f1022 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -3,6 +3,7 @@ import { useScreenSize, useFetchOnAuth } from '@hooks';
 import { Button, Tooltip, Spinner } from '@nextui-org/react';
 import { GithubLogo } from '@phosphor-icons/react';
 import { useSessionContext } from '@supabase/auth-helpers-react';
+import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -20,20 +21,18 @@ const Header = () => {
           <div className="flex -translate-y-[73px] items-center justify-center">
             <Spinner
               color="primary"
+              labelColor="primary"
               size="lg"
               label="Please wait"
-              classNames={{
-                circle1: 'border-b-white',
-                circle2: 'border-b-white',
-              }}
             />
           </div>
         </div>
       )}
       <header className="border-b border-b-slate-300 bg-background brightness-[95%] dark:border-b-slate-800 dark:brightness-[90%]">
-        <div className="mx-auto flex w-full items-center justify-between gap-2 px-2 py-2 lg:px-16 lg:py-4">
+        <div className="mx-auto flex w-full items-center justify-between gap-2 px-8 py-2 lg:gap-4 lg:px-16 lg:py-4">
           <div className="flex items-center gap-2">
             <Button
+              variant="flat"
               color="primary"
               as={Link}
               to="/calendar/month"
@@ -43,11 +42,15 @@ const Header = () => {
               Calendar
             </Button>
             <Button
-              color="primary"
+              color="secondary"
+              variant="flat"
               as={Link}
               to="/habits"
               size={screenSize > 1024 ? 'md' : 'sm'}
-              className={screenSize < 339 ? 'min-w-fit px-2' : ''}
+              className={clsx(
+                'dark:text-secondary-800',
+                screenSize < 339 && 'min-w-fit px-2'
+              )}
             >
               Habits
             </Button>
@@ -67,7 +70,6 @@ const Header = () => {
                   as={Link}
                   to="https://github.com/domhhv/habitrack"
                   target="_blank"
-                  className=""
                   size={screenSize > 1024 ? 'md' : 'sm'}
                 >
                   <GithubLogo size={screenSize > 1024 ? 20 : 16} />
diff --git a/src/components/header/ThemeToggle.tsx b/src/components/header/ThemeToggle.tsx
index f7dfe27..b6860b0 100644
--- a/src/components/header/ThemeToggle.tsx
+++ b/src/components/header/ThemeToggle.tsx
@@ -29,8 +29,7 @@ const ThemeToggle = () => {
         const isSelected = themeMode === mode;
         const iconClassName = clsx(isSelected && 'text-white');
         const buttonClassName = clsx(
-          'bg-slate-200 dark:bg-slate-800',
-          isSelected && 'bg-slate-400 dark:bg-slate-600'
+          isSelected && 'bg-secondary-500 dark:bg-secondary-600'
         );
 
         const Icon = modesToIcons[mode];
@@ -41,11 +40,14 @@ const ThemeToggle = () => {
             className={buttonClassName}
             onPress={handleThemeChange(mode)}
             isIconOnly
+            variant="flat"
+            color="secondary"
             size={screenSize > 1024 ? 'md' : 'sm'}
           >
             <Icon
               className={twMerge('dark:text-neutral-200', iconClassName)}
               weight={isSelected ? 'bold' : 'regular'}
+              size={16}
             />
           </Button>
         );
diff --git a/src/components/user-account/AccountPage.tsx b/src/components/user-account/AccountPage.tsx
index 20d4a88..4a4b8a2 100644
--- a/src/components/user-account/AccountPage.tsx
+++ b/src/components/user-account/AccountPage.tsx
@@ -1,7 +1,6 @@
 import { Alert, PasswordInput } from '@components';
 import { useDocumentTitle } from '@hooks';
 import { Button, Input, Spinner } from '@nextui-org/react';
-import clsx from 'clsx';
 import React, { type FormEventHandler } from 'react';
 import { twMerge } from 'tailwind-merge';
 
@@ -26,9 +25,8 @@ const AccountPage = () => {
     updateAccount,
   } = useAccountPage();
 
-  const containerClassName = clsx(
-    'mx-auto flex flex-col items-center justify-center'
-  );
+  const containerClassName =
+    'w-full mt-8 flex flex-col items-center justify-center';
 
   if (!user && loading) {
     return (
@@ -58,11 +56,11 @@ const AccountPage = () => {
   };
 
   return (
-    <div className="flex h-lvh w-full flex-col items-start self-start pt-8">
+    <div className="flex h-lvh w-full flex-col items-start self-start px-8 py-2 lg:px-16 lg:py-4">
       <div className={containerClassName} data-testid="account-page">
         <h1 className="text-xl font-semibold">Your Account Info</h1>
         <form
-          className="mt-4 md:w-[400px]"
+          className="mt-4 w-full md:w-96"
           onSubmit={handleSubmit}
           data-testid="account-form"
         >
diff --git a/src/components/user-account/AuthModalButton.tsx b/src/components/user-account/AuthModalButton.tsx
index eb6c793..b9ed2c0 100644
--- a/src/components/user-account/AuthModalButton.tsx
+++ b/src/components/user-account/AuthModalButton.tsx
@@ -120,7 +120,7 @@ const AuthModalButton = () => {
             as={Link}
             to="/account"
             data-testid="auth-button"
-            color="primary"
+            variant="flat"
             startContent={<UserIcon data-testid="user-icon" weight="bold" />}
           >
             {screenSize > 1024 && 'Account'}
@@ -129,8 +129,9 @@ const AuthModalButton = () => {
             <Button
               onPress={signOut}
               isIconOnly
-              color="primary"
-              className="border-l"
+              color="secondary"
+              variant="flat"
+              className="border-l dark:border-secondary-400 dark:text-secondary-800"
               startContent={
                 <SignOutIcon data-testid="sign-out-icon" weight="bold" />
               }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 30b086d..0b598b0 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -3,3 +3,4 @@ export * from './transformEntity';
 export * from './getHabitIconUrl';
 export * from './getErrorMessage';
 export * from './toEventLike';
+export * from './isTruthy';
diff --git a/src/utils/isTruthy.ts b/src/utils/isTruthy.ts
new file mode 100644
index 0000000..088dc4e
--- /dev/null
+++ b/src/utils/isTruthy.ts
@@ -0,0 +1,3 @@
+export const isTruthy = <T>(value: T | null | undefined): value is T => {
+  return Boolean(value);
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 80c32d6..864544f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -30,16 +30,16 @@ export default {
             },
             foreground: '#333333',
             primary: {
-              100: '#EDFBD5',
-              200: '#D8F7AD',
-              300: '#B7E87F',
-              400: '#93D25B',
-              500: '#65B52D',
-              600: '#4C9B20',
-              700: '#368216',
-              800: '#23680E',
-              900: '#165608',
-              DEFAULT: '#65B52D',
+              100: '#D3FBE5',
+              200: '#A8F8D3',
+              300: '#7AECC1',
+              400: '#56DAB5',
+              500: '#26C2A5',
+              600: '#1BA69A',
+              700: '#138B8B',
+              800: '#0C6670',
+              900: '#074C5D',
+              DEFAULT: '#26C2A5',
             },
             success: {
               100: '#EDFBD5',
@@ -144,16 +144,16 @@ export default {
               DEFAULT: '#7DBA23',
             },
             secondary: {
-              100: '#CEF4FF',
-              200: '#9CE4FF',
-              300: '#6CCFFF',
-              400: '#47B8FF',
-              500: '#0A94FF',
-              600: '#0772DB',
-              700: '#0555B7',
-              800: '#033C93',
-              900: '#012A7A',
-              DEFAULT: '#0A94FF',
+              100: '#242849',
+              200: '#2E3463',
+              300: '#3A4381',
+              400: '#4953A2',
+              500: '#5864C4',
+              600: '#6976DF',
+              700: '#8188EC',
+              800: '#A3A9F4',
+              900: '#C5CAF9',
+              DEFAULT: '#5864C4',
             },
             warning: {
               100: '#FEF8D0',