diff --git a/src/components/App.tsx b/src/components/App.tsx
index 54da305..25b6d01 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -23,7 +23,7 @@ const App = () => {
   return (
     <Providers>
       <AppHeader />
-      <div className="flex h-full flex-1 flex-col items-start bg-slate-50 dark:bg-slate-950">
+      <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 />} />
@@ -31,7 +31,7 @@ const App = () => {
           <Route path="/account" element={<AccountPage />} />
           <Route path="*" element={<Navigate to="/calendar/month" replace />} />
         </Routes>
-      </div>
+      </main>
       <Snackbars />
     </Providers>
   );
diff --git a/src/components/calendar-month/CalendarCell.tsx b/src/components/calendar-month/CalendarCell.tsx
index 6ec9b46..7b97fd2 100644
--- a/src/components/calendar-month/CalendarCell.tsx
+++ b/src/components/calendar-month/CalendarCell.tsx
@@ -10,7 +10,7 @@ import {
 import { useNotesStore, useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import clsx from 'clsx';
-import { format } from 'date-fns';
+import { format, isToday, isFuture } from 'date-fns';
 import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 
@@ -61,16 +61,10 @@ const CalendarCell = ({
   const { removeOccurrence, fetchingOccurrences, occurrencesByDate } =
     useOccurrencesStore();
   const { notes, fetchingNotes } = useNotesStore();
-  const today = new Date();
-  const isToday =
-    today.getDate() === dateNumber &&
-    today.getMonth() + 1 === monthNumber &&
-    today.getFullYear() === fullYear;
   const screenSize = useScreenSize();
-  const date = format(
-    new Date(fullYear, monthNumber - 1, dateNumber),
-    'yyyy-MM-dd'
-  );
+  const cellDate = new Date(fullYear, monthNumber - 1, dateNumber);
+  const isTodayCell = isToday(cellDate);
+  const date = format(cellDate, 'yyyy-MM-dd');
 
   const occurrences = isCalendarDay(date) ? occurrencesByDate[date] || [] : [];
   const isMobile = screenSize < 768;
@@ -103,7 +97,6 @@ const CalendarCell = ({
 
     return onAddOccurrence(dateNumber, monthNumber, fullYear);
   }, [
-    isToday,
     dateNumber,
     fetchingOccurrences,
     fullYear,
@@ -152,21 +145,21 @@ const CalendarCell = ({
   };
 
   const cellRootClassName = clsx(
-    'group/cell flex h-auto flex-1 flex-col gap-2 border-r-2 border-neutral-500 transition-colors last-of-type:border-r-0 hover:bg-neutral-200 dark:border-neutral-400 dark:hover:bg-neutral-800 lg:h-28',
+    'group/cell flex h-auto flex-1 flex-col gap-2 border-r-2 border-neutral-500 transition-colors last-of-type:border-r-0 hover:bg-neutral-200 dark:border-neutral-400 dark:hover:bg-neutral-800 lg:h-36',
     rangeStatus === 'below-range' && 'cursor-w-resize',
     rangeStatus === 'above-range' && 'cursor-e-resize',
     position === 'top-left' && 'rounded-tl-md',
     position === 'top-right' && 'rounded-tr-md',
     position === 'bottom-left' && 'rounded-bl-md',
     position === 'bottom-right' && 'rounded-br-md',
-    isToday &&
-      'bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-800 dark:hover:bg-neutral-700'
+    isTodayCell &&
+      'bg-background-200 hover:bg-background-300 dark:bg-background-800 dark:hover:bg-background-700'
   );
 
   const cellHeaderClassName = clsx(
-    'flex w-full items-center justify-between border-b-1 border-neutral-500 px-1.5 py-0.5 text-sm dark:border-neutral-400 md:text-base',
+    'flex w-full items-center justify-between border-b-1 border-neutral-500 px-1.5 py-1.5 text-sm dark:border-neutral-400 md:text-base',
     rangeStatus !== 'in-range' && 'text-neutral-400 dark:text-neutral-600',
-    isToday ? 'w-full self-auto md:self-start' : 'w-full'
+    isTodayCell ? 'w-full self-auto md:self-start' : 'w-full'
   );
 
   return (
@@ -181,24 +174,26 @@ const CalendarCell = ({
         <div className="flex items-center justify-between gap-2">
           {rangeStatus === 'in-range' && !isMobile && (
             <div className="flex items-center gap-1">
-              <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"
-                  radius="sm"
-                  onClick={handleAddOccurrenceClick}
-                  color="primary"
-                  isDisabled={fetchingOccurrences || !user}
-                >
-                  <CalendarPlus weight="bold" size={14} />
-                </Button>
-              </Tooltip>
+              {!isFuture(cellDate) && (
+                <Tooltip content="Log habit" closeDelay={0}>
+                  <Button
+                    className="h-6 min-w-fit px-4 opacity-100 transition-opacity group-hover/cell:opacity-100 md:opacity-0"
+                    radius="sm"
+                    onClick={handleAddOccurrenceClick}
+                    color="primary"
+                    isDisabled={fetchingOccurrences || !user}
+                  >
+                    <CalendarPlus weight="bold" size={18} />
+                  </Button>
+                </Tooltip>
+              )}
               <Tooltip
                 content={hasNote ? 'Edit note' : 'Add note'}
                 closeDelay={0}
               >
                 <Button
                   className={clsx(
-                    'h-5 min-w-fit px-2 opacity-0 transition-opacity group-hover/cell:opacity-100',
+                    'h-6 min-w-fit px-4 opacity-0 transition-opacity group-hover/cell:opacity-100',
                     hasNote && 'opacity-100'
                   )}
                   radius="sm"
@@ -207,7 +202,7 @@ const CalendarCell = ({
                   isDisabled={fetchingNotes || !user}
                 >
                   {hasNote ? (
-                    <NotePencil weight="bold" size={14} />
+                    <NotePencil weight="bold" size={18} />
                   ) : (
                     <NoteBlank weight="bold" size={14} />
                   )}
diff --git a/src/components/calendar-month/CalendarGrid.tsx b/src/components/calendar-month/CalendarGrid.tsx
index 016dd43..a50f9d8 100644
--- a/src/components/calendar-month/CalendarGrid.tsx
+++ b/src/components/calendar-month/CalendarGrid.tsx
@@ -5,6 +5,7 @@ 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 { type CalendarState } from 'react-stately';
 
 import type { CellPosition, CellRangeStatus } from './CalendarCell';
@@ -20,7 +21,6 @@ type CalendarGridProps = {
   ) => void;
   activeMonthLabel: string;
   activeYear: number;
-  onWeekClick: (weekNum: number) => void;
 };
 
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
@@ -31,14 +31,26 @@ const CalendarGrid = ({
   onAddOccurrence,
   activeMonthLabel,
   activeYear,
-  onWeekClick,
 }: 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 getCellPosition = (
     weekIndex: number,
     dayIndex: number
@@ -86,23 +98,24 @@ const CalendarGrid = ({
           exit={{ opacity: 0 }}
         >
           {weekIndexes.map((weekIndex) => {
-            const weekNum = getYearWeekNumberFromMonthWeek(
+            const { week } = getYearWeekNumberFromMonthWeek(
               activeMonthLabel,
               activeYear,
               weekIndex
             );
+            const dates = state.getDatesInWeek(weekIndex);
 
             return (
-              <div key={weekIndex} className="group flex items-center gap-4">
+              <div key={weekIndex} className="group flex items-center gap-2">
                 <Button
                   className={clsx(
-                    'h-[110px] basis-[40px]',
+                    'h-[110px] min-w-fit basis-[40px] p-0',
                     'hidden' // TODO: show the week number button, open weekly view (WIP) on click
                   )}
-                  variant="ghost"
-                  onClick={() => onWeekClick(weekNum)}
+                  variant="light"
+                  onClick={() => handleWeekClick(dates[0])}
                 >
-                  {weekNum}
+                  {week}
                 </Button>
                 <div
                   className={clsx(
@@ -120,10 +133,15 @@ const CalendarGrid = ({
 
                       const { month, day, year } = calendarDate;
 
+                      console.log({ month2: month });
+
                       const rangeStatus: CellRangeStatus =
-                        month < activeMonth
+                        (month < activeMonth ||
+                          (month === 12 && activeMonth === 1)) &&
+                        month !== 1
                           ? 'below-range'
-                          : month > activeMonth
+                          : month > activeMonth ||
+                              (month === 1 && activeMonth === 12)
                             ? 'above-range'
                             : 'in-range';
 
diff --git a/src/components/calendar-month/MonthCalendar.tsx b/src/components/calendar-month/MonthCalendar.tsx
index 2725f22..8ee6710 100644
--- a/src/components/calendar-month/MonthCalendar.tsx
+++ b/src/components/calendar-month/MonthCalendar.tsx
@@ -7,7 +7,6 @@ import { capitalizeFirstLetter } from '@utils';
 import clsx from 'clsx';
 import React from 'react';
 import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
-import { useNavigate } from 'react-router-dom';
 import { useCalendarState } from 'react-stately';
 
 import CalendarGrid from './CalendarGrid';
@@ -44,7 +43,6 @@ const MonthCalendar = () => {
     onClose: closeOccurrenceDialog,
   } = useDisclosure();
   const [activeDate, setActiveDate] = React.useState<Date | null>(null);
-  const navigate = useNavigate();
 
   React.useEffect(() => {
     onRangeChange(
@@ -120,10 +118,6 @@ const MonthCalendar = () => {
     setActiveDate(new Date(fullYear, monthIndex - 1, dateNumber, 12));
   };
 
-  const handleWeekClick = (weekNumber: number) => {
-    navigate('/calendar/week', { state: { weekNumber } });
-  };
-
   const transformButtonProps = (
     buttonProps: Pick<AriaButtonProps<'button'>, 'isDisabled' | 'aria-label'>
   ) => ({
@@ -156,7 +150,6 @@ const MonthCalendar = () => {
           state={state}
           onAddOccurrence={handleOccurrenceModalOpen}
           onAddNote={handleNoteModalOpen}
-          onWeekClick={handleWeekClick}
         />
       </div>
 
diff --git a/src/components/calendar-week/WeekCalendar.tsx b/src/components/calendar-week/WeekCalendar.tsx
index 507af36..1385dee 100644
--- a/src/components/calendar-week/WeekCalendar.tsx
+++ b/src/components/calendar-week/WeekCalendar.tsx
@@ -1,12 +1,130 @@
-// import { useLocation } from 'react-router-dom';
+/* eslint-disable */
+
+import { useOccurrencesStore } from '@stores';
+import { addDays, eachDayOfInterval, startOfDay, startOfWeek } from 'date-fns';
+import { motion } from 'framer-motion';
+import React from 'react';
+import { useLocation } 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 { weekNumber } = state;
+  const { state } = useLocation();
+  const { occurrences } = useOccurrencesStore();
+  const [startOfTheWeek, setStartOfTheWeek] = React.useState(() => {
+    const initialDate = state?.startDate || new Date();
+
+    return startOfWeek(startOfDay(initialDate));
+  });
+
+  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-neutral-400 dark:text-neutral-500">
+          Weekly calendar is only available when navigating from the month
+          calendar for now
+        </p>
+      </div>
+    );
+  }
+
+  const { startDate }: { startDate: Date } = state;
+
+  const days = eachDayOfInterval({
+    start: startOfTheWeek,
+    end: addDays(startOfTheWeek, 6),
+  });
+
+  // console.log({ startDate, startOfTheWeek, days });
+
+  // const groupOccurrences = (dayIndex: number, hour: number) => {
+  //   const day = dayIndex === 6 ? 0 : dayIndex + 1;
+  //
+  //   const relatedOccurrences = occurrences.filter((o) => {
+  //     const date = new Date(o.timestamp);
+  //     return (
+  //       date.getFullYear() === year &&
+  //       date.getMonth() === month &&
+  //       date.getDate() === dates[dayIndex]?.day &&
+  //       date.getDay() === day &&
+  //       date.getHours() === hour
+  //     );
+  //   });
+  //
+  //   if (hour === 0) {
+  //     console.log('relatedOccurrences', relatedOccurrences);
+  //   }
+  //   return Object.entries(Object.groupBy(relatedOccurrences, (o) => o.habitId));
+  // };
 
   return (
-    <div className="flex h-full w-full max-w-full flex-1 flex-col px-2">
-      <h1>Weekly Calendar</h1>
+    <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 {week} of {year}*/}
+        Weekly Calendar
+      </h1>
+      <p className="mb-4 text-center text-sm italic text-neutral-400 dark:text-neutral-500">
+        Coming soon
+      </p>
+      {/*{[...Array(25)].map((_, hourIndex) => (*/}
+      {/*  <div*/}
+      {/*    key={hourIndex}*/}
+      {/*    className="ml-4 flex border-b border-neutral-300 first-of-type:border-b-0 last-of-type:border-b-0 dark:border-neutral-600"*/}
+      {/*  >*/}
+      {/*    {[...Array(7)].map((_, dayIndex) => {*/}
+      {/*      if (hourIndex === 0) {*/}
+      {/*        return (*/}
+      {/*          <div*/}
+      {/*            key={`${hourIndex}-${dayIndex}`}*/}
+      {/*            className="mb-2 flex flex-1 items-center justify-center text-neutral-600 dark:text-neutral-300"*/}
+      {/*          >*/}
+      {/*            <p className="font-bold">{WEEK_DAYS[dayIndex]}</p>*/}
+      {/*          </div>*/}
+      {/*        );*/}
+      {/*      }*/}
+
+      {/*      return (*/}
+      {/*        <div*/}
+      {/*          key={`${hourIndex}-${dayIndex}`}*/}
+      {/*          className="relative h-20 flex-1 border-neutral-300 dark:border-neutral-600 [&:not(:last-of-type)]:border-r"*/}
+      {/*        >*/}
+      {/*          {hourIndex > 1 && dayIndex === 0 && (*/}
+      {/*            <p className="absolute -left-6 -top-3 text-neutral-500 dark:text-neutral-400">*/}
+      {/*              {hourIndex - 1}*/}
+      {/*            </p>*/}
+      {/*          )}*/}
+      {/*          <div className="flex h-full flex-1 flex-wrap justify-center gap-2 overflow-x-auto overflow-y-visible p-2 md:justify-start">*/}
+      {/*            {groupOccurrences(dayIndex, hourIndex - 1).map(*/}
+      {/*              ([habitId, habitOccurrences]) => {*/}
+      {/*                if (!habitOccurrences) {*/}
+      {/*                  return null;*/}
+      {/*                }*/}
+
+      {/*                return (*/}
+      {/*                  <motion.div*/}
+      {/*                    key={habitId}*/}
+      {/*                    initial={{ opacity: 0 }}*/}
+      {/*                    animate={{ opacity: 1 }}*/}
+      {/*                    exit={{ scale: 0 }}*/}
+      {/*                    transition={{ duration: 0.5 }}*/}
+      {/*                  >*/}
+      {/*                    <OccurrenceChip*/}
+      {/*                      occurrences={habitOccurrences}*/}
+      {/*                      onDelete={() => null}*/}
+      {/*                    />*/}
+      {/*                  </motion.div>*/}
+      {/*                );*/}
+      {/*              }*/}
+      {/*            )}*/}
+      {/*          </div>*/}
+      {/*        </div>*/}
+      {/*      );*/}
+      {/*    })}*/}
+      {/*  </div>*/}
+      {/*))}*/}
     </div>
   );
 };
diff --git a/src/components/common/ConfirmDialog/ConfirmDialog.tsx b/src/components/common/ConfirmDialog/ConfirmDialog.tsx
index e5e0dc3..dcef5c9 100644
--- a/src/components/common/ConfirmDialog/ConfirmDialog.tsx
+++ b/src/components/common/ConfirmDialog/ConfirmDialog.tsx
@@ -32,7 +32,7 @@ const ConfirmDialog = ({
           {children}
           <div className="mb-4 mt-2 flex flex-row justify-end gap-4">
             <Button
-              color="primary"
+              color="default"
               variant="bordered"
               onClick={onCancel}
               isDisabled={loading}
diff --git a/src/components/habit/add-habit/AddHabitDialogButton.tsx b/src/components/habit/add-habit/AddHabitDialogButton.tsx
index 3f178d5..2933e86 100644
--- a/src/components/habit/add-habit/AddHabitDialogButton.tsx
+++ b/src/components/habit/add-habit/AddHabitDialogButton.tsx
@@ -61,19 +61,17 @@ const AddHabitDialogButton = () => {
 
   return (
     <>
-      <div className="m-auto my-4 flex w-[95%] justify-end lg:w-[80%]">
-        <Button
-          color="primary"
-          variant="solid"
-          startContent={<Plus weight="bold" />}
-          onClick={handleDialogOpen}
-          isDisabled={fetchingHabits}
-          data-testid="add-habit-button"
-          className="w-full lg:w-auto"
-        >
-          Add habit
-        </Button>
-      </div>
+      <Button
+        color="primary"
+        variant="solid"
+        startContent={<Plus weight="bold" />}
+        onClick={handleDialogOpen}
+        isDisabled={fetchingHabits}
+        data-testid="add-habit-button"
+        className="w-full lg:w-auto"
+      >
+        Add habit
+      </Button>
       <AddCustomTraitModal
         open={addTraitModalOpen}
         onClose={() => setAddTraitModalOpen(false)}
@@ -125,6 +123,7 @@ const AddHabitDialogButton = () => {
             <Button
               variant="bordered"
               size="sm"
+              color="secondary"
               startContent={<Plus />}
               onClick={() => setAddTraitModalOpen(true)}
             >
@@ -135,7 +134,7 @@ const AddHabitDialogButton = () => {
               as="label"
               variant="flat"
               size="sm"
-              color="primary"
+              color="secondary"
               startContent={<CloudArrowUp />}
             >
               Upload Icon
diff --git a/src/components/habit/add-trait/AddCustomTraitModal.tsx b/src/components/habit/add-trait/AddCustomTraitModal.tsx
index aae7135..a996688 100644
--- a/src/components/habit/add-trait/AddCustomTraitModal.tsx
+++ b/src/components/habit/add-trait/AddCustomTraitModal.tsx
@@ -71,18 +71,21 @@ const AddCustomTraitModal = ({ open, onClose }: AddCustomTraitModalProps) => {
             You can define a custom trait for your habits (e g. Moderately Bad)
           </p>
           <Input
+            variant="bordered"
             value={label}
             onChange={handleLabelChange}
             isDisabled={addingTrait}
             label="Trait Label"
           />
           <Input
+            variant="bordered"
             value={slug}
             onChange={handleSlugChange}
             isDisabled={addingTrait}
             label="Trait Slug"
           />
           <Textarea
+            variant="bordered"
             value={description}
             onChange={handleDescriptionChange}
             isDisabled={addingTrait}
@@ -92,6 +95,7 @@ const AddCustomTraitModal = ({ open, onClose }: AddCustomTraitModalProps) => {
             <HexColorPicker color={color} onChange={handleTraitColorChange} />
             <div className="flex w-1/2 flex-col gap-2">
               <Input
+                variant="bordered"
                 value={color.slice(1)}
                 onChange={(event) => handleTraitColorChange(event.target.value)}
                 startContent="#"
diff --git a/src/components/habit/habits-page/HabitsPage.tsx b/src/components/habit/habits-page/HabitsPage.tsx
index 353b527..086bfee 100644
--- a/src/components/habit/habits-page/HabitsPage.tsx
+++ b/src/components/habit/habits-page/HabitsPage.tsx
@@ -109,10 +109,10 @@ const HabitsPage = () => {
       <Table
         shadow="none"
         isHeaderSticky
-        className="mx-auto w-[95%] lg:w-[80%]"
+        className="px-4 lg:px-16 lg:py-4"
         classNames={{
           base: clsx(
-            'overflow-scroll',
+            'overflow-scroll [&>div]:bg-background-50 [&>div]:dark:bg-background-800',
             isMobile ? 'max-h-[400px]' : 'max-h-[600px]'
           ),
         }}
@@ -124,7 +124,7 @@ const HabitsPage = () => {
         </TableHeader>
         <TableBody
           emptyContent="No habits yet"
-          items={habits.map(({ id, ...habit }) => ({ ...habit, key: id }))}
+          // items={habits.map(({ id, ...habit }) => ({ ...habit, key: id }))}
         >
           {habits.map((habit) => (
             <TableRow key={habit.id}>
@@ -140,7 +140,12 @@ const HabitsPage = () => {
                 )}
               </TableCell>
               <TableCell>
-                <Chip size="sm" variant="faded" className="ml-2 h-5 border-1">
+                <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"
@@ -174,7 +179,7 @@ const HabitsPage = () => {
                       isIconOnly
                       size="sm"
                       variant="bordered"
-                      color="primary"
+                      color="secondary"
                       onClick={() => handleEditStart(habit)}
                       role="edit-habit-button"
                       data-testid={`edit-habit-id-${habit.id}-button`}
@@ -204,7 +209,9 @@ const HabitsPage = () => {
         </TableBody>
       </Table>
       <EditHabitDialog onClose={handleEditEnd} habit={habitToEdit} />
-      <AddHabitDialogButton />
+      <div className="m-auto my-4 flex w-full justify-end px-4 lg:px-16 lg:py-4">
+        <AddHabitDialogButton />
+      </div>
       <ConfirmDialog
         open={!!habitToRemove}
         heading="Delete habit"
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 41659b9..900780d 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -17,7 +17,7 @@ const Header = () => {
   const screenSize = useScreenSize();
 
   return (
-    <header className="border-b border-b-slate-300 bg-slate-200 dark:border-b-slate-800 dark:bg-black">
+    <header className="border-b border-b-slate-300 bg-background brightness-[95%] dark:border-b-slate-800 dark:brightness-[90%]">
       {/*{!hasFetched && (*/}
       {/*  <div className="absolute bottom-0 left-0 right-0 top-0 z-50 flex h-full flex-1 items-center justify-center bg-slate-50 opacity-90 dark:bg-slate-950">*/}
       {/*    <div className="flex -translate-y-[73px] items-center justify-center">*/}
@@ -38,7 +38,7 @@ const Header = () => {
           <Button
             color="primary"
             as={Link}
-            to="/calendar"
+            to="/calendar/month"
             size={screenSize > 1024 ? 'md' : 'sm'}
             className={screenSize < 339 ? 'min-w-fit px-2' : ''}
           >
@@ -59,7 +59,7 @@ const Header = () => {
               showArrow
               content="View source code on GitHub"
               delay={1000}
-              color="primary"
+              color="secondary"
               placement="right"
             >
               <Button
@@ -69,7 +69,7 @@ const Header = () => {
                 as={Link}
                 to="https://github.com/domhhv/habitrack"
                 target="_blank"
-                className="text-slate-500 hover:!bg-blue-500 hover:text-white dark:text-slate-400 dark:hover:!bg-blue-500 dark:hover:text-white"
+                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 fe8e7d6..f7dfe27 100644
--- a/src/components/header/ThemeToggle.tsx
+++ b/src/components/header/ThemeToggle.tsx
@@ -29,7 +29,7 @@ const ThemeToggle = () => {
         const isSelected = themeMode === mode;
         const iconClassName = clsx(isSelected && 'text-white');
         const buttonClassName = clsx(
-          'bg-slate-100 dark:bg-slate-800',
+          'bg-slate-200 dark:bg-slate-800',
           isSelected && 'bg-slate-400 dark:bg-slate-600'
         );
 
diff --git a/src/helpers/calendar.ts b/src/helpers/calendar.ts
index 586463a..11da3fd 100644
--- a/src/helpers/calendar.ts
+++ b/src/helpers/calendar.ts
@@ -93,7 +93,7 @@ const monthNames = [
   'December',
 ];
 
-function getMonthIndex(monthLabel: string): number {
+export function getMonthIndex(monthLabel: string): number {
   return monthNames.indexOf(monthLabel);
 }
 
@@ -122,24 +122,26 @@ function shiftSundayToSeven(day: number): number {
   return day === 0 ? 7 : day;
 }
 
-function getISOWeekNumber(date: Date): number {
+function getISOWeekYearAndNumber(date: Date): { year: number; week: number } {
   const utcDate = new Date(
     Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
   );
   const dayNum = shiftSundayToSeven(utcDate.getUTCDay());
   utcDate.setUTCDate(utcDate.getUTCDate() + (4 - dayNum));
-  const startOfYear = new Date(Date.UTC(utcDate.getUTCFullYear(), 0, 1));
+  const isoYear = utcDate.getUTCFullYear();
+  const startOfIsoYear = new Date(Date.UTC(isoYear, 0, 1));
   const daysSinceYearStart =
-    (utcDate.getTime() - startOfYear.getTime()) / 86400000 + 1;
-  return Math.ceil(daysSinceYearStart / 7);
+    (utcDate.getTime() - startOfIsoYear.getTime()) / 86400000 + 1;
+  const weekNumber = Math.ceil(daysSinceYearStart / 7);
+  return { year: isoYear, week: weekNumber };
 }
 
 export function getYearWeekNumberFromMonthWeek(
   monthLabel: string,
   year: number,
   weekIndex: number
-): number {
+): { year: number; week: number } {
   const monthIndex = getMonthIndex(monthLabel);
   const date = getDateForMonthWeek(year, monthIndex, weekIndex);
-  return getISOWeekNumber(date);
+  return getISOWeekYearAndNumber(date);
 }
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index e0ad7ae..0000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { nextui } from '@nextui-org/react';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  darkMode: 'class',
-  content: [
-    './index.html',
-    './src/**/*.{ts,tsx}',
-    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [
-    nextui({
-      addCommonColors: true,
-    }),
-  ],
-};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..0124565
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,200 @@
+import { nextui } from '@nextui-org/react';
+import type { Config } from 'tailwindcss';
+
+export default {
+  darkMode: 'class',
+  content: [
+    './index.html',
+    './src/**/*.{ts,tsx}',
+    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    nextui({
+      themes: {
+        light: {
+          colors: {
+            background: {
+              DEFAULT: '#F0F8F6',
+              50: '#F7FAF9',
+              100: '#d9f7e7',
+              200: '#dbf3e6',
+              300: '#ACFAD5',
+              400: '#81F1C6',
+              500: '#5FE4BD',
+              600: '#2FD3B3',
+              700: '#22B5A6',
+              800: '#179797',
+              900: '#0E707A',
+            },
+            foreground: '#333333',
+            primary: {
+              100: '#D3FBE5',
+              200: '#A8F8D3',
+              300: '#7AECC1',
+              400: '#56DAB5',
+              500: '#26C2A5',
+              600: '#1BA69A',
+              700: '#138B8B',
+              800: '#0C6670',
+              900: '#074C5D',
+              DEFAULT: '#26C2A5',
+            },
+            success: {
+              100: '#F1FBD2',
+              200: '#E1F8A7',
+              300: '#C5EA78',
+              400: '#A6D553',
+              500: '#7DBA23',
+              600: '#649F19',
+              700: '#4D8511',
+              800: '#386B0B',
+              900: '#2A5906',
+              DEFAULT: '#7DBA23',
+            },
+            secondary: {
+              100: '#CEF4FF',
+              200: '#9CE4FF',
+              300: '#6CCFFF',
+              400: '#47B8FF',
+              500: '#0A94FF',
+              600: '#0772DB',
+              700: '#0555B7',
+              800: '#033C93',
+              900: '#012A7A',
+              DEFAULT: '#0A94FF',
+            },
+            warning: {
+              100: '#FEF8D0',
+              200: '#FEEEA1',
+              300: '#FEE272',
+              400: '#FDD64F',
+              500: '#FCC316',
+              600: '#D8A110',
+              700: '#B5820B',
+              800: '#926407',
+              900: '#785004',
+              DEFAULT: '#FCC316',
+            },
+            danger: {
+              100: '#FFE7D5',
+              200: '#FFC8AC',
+              300: '#FFA382',
+              400: '#FF8063',
+              500: '#FF4530',
+              600: '#DB2623',
+              700: '#B71821',
+              800: '#930F22',
+              900: '#7A0922',
+              DEFAULT: '#FF4530',
+            },
+            default: {
+              100: '#F3F4F6',
+              200: '#E5E7EB',
+              300: '#D1D5DB',
+              400: '#9CA3AF',
+              500: '#6B7280',
+              600: '#4B5563',
+              700: '#374151',
+              800: '#1F2937',
+              900: '#111827',
+              DEFAULT: '#D1D5DB',
+            },
+          },
+        },
+        dark: {
+          colors: {
+            background: {
+              DEFAULT: '#031816',
+              50: '#12634F',
+              100: '#0F5A48',
+              200: '#0D5242',
+              300: '#0B4A3C',
+              400: '#0A4136',
+              500: '#083930',
+              600: '#06312A',
+              700: '#052824',
+              800: '#04201D',
+              900: '#031816',
+            },
+            foreground: '#E5F5F1',
+            primary: {
+              100: '#D3FBE5',
+              200: '#A8F8D3',
+              300: '#7AECC1',
+              400: '#56DAB5',
+              500: '#26C2A5',
+              600: '#1BA69A',
+              700: '#138B8B',
+              800: '#0C6670',
+              900: '#074C5D',
+              DEFAULT: '#26C2A5',
+            },
+            success: {
+              100: '#F1FBD2',
+              200: '#E1F8A7',
+              300: '#C5EA78',
+              400: '#A6D553',
+              500: '#7DBA23',
+              600: '#649F19',
+              700: '#4D8511',
+              800: '#386B0B',
+              900: '#2A5906',
+              DEFAULT: '#7DBA23',
+            },
+            secondary: {
+              100: '#CEF4FF',
+              200: '#9CE4FF',
+              300: '#6CCFFF',
+              400: '#47B8FF',
+              500: '#0A94FF',
+              600: '#0772DB',
+              700: '#0555B7',
+              800: '#033C93',
+              900: '#012A7A',
+              DEFAULT: '#0A94FF',
+            },
+            warning: {
+              100: '#FEF8D0',
+              200: '#FEEEA1',
+              300: '#FEE272',
+              400: '#FDD64F',
+              500: '#FCC316',
+              600: '#D8A110',
+              700: '#B5820B',
+              800: '#926407',
+              900: '#785004',
+              DEFAULT: '#FCC316',
+            },
+            danger: {
+              100: '#FFE7D5',
+              200: '#FFC8AC',
+              300: '#FFA382',
+              400: '#FF8063',
+              500: '#FF4530',
+              600: '#DB2623',
+              700: '#B71821',
+              800: '#930F22',
+              900: '#7A0922',
+              DEFAULT: '#FF4530',
+            },
+            default: {
+              100: '#111827',
+              200: '#1F2937',
+              300: '#374151',
+              400: '#4B5563',
+              500: '#6B7280',
+              600: '#9CA3AF',
+              700: '#D1D5DB',
+              800: '#E5E7EB',
+              900: '#F3F4F6',
+              DEFAULT: '#6B7280',
+            },
+          },
+        },
+      },
+    }),
+  ],
+} satisfies Config;