diff --git a/src/components/calendar/MonthCalendar.tsx b/src/components/calendar/MonthCalendar.tsx
index d633635..fb65709 100644
--- a/src/components/calendar/MonthCalendar.tsx
+++ b/src/components/calendar/MonthCalendar.tsx
@@ -14,50 +14,43 @@ import { useParams } from 'react-router';
 import type { CalendarState } from 'react-stately';
 
 import { useFirstDayOfWeek } from '@hooks';
-import type { OccurrenceFilters } from '@models';
-import { useUser, useHabits, useTraits, useCalendarRangeChange } from '@stores';
+import { useCalendarRangeChange } from '@stores';
 
+import MonthCalendarFilters from './MonthCalendarFilters';
 import MonthCalendarGrid from './MonthCalendarGrid';
-import MonthCalendarHeader from './MonthCalendarHeader';
+import MonthCalendarNavigation from './MonthCalendarNavigation';
 
 type MonthCalendarProps = {
   state: CalendarState;
 };
 
 const MonthCalendar = ({ state }: MonthCalendarProps) => {
-  const { user } = useUser();
   const changeCalendarRange = useCalendarRangeChange();
-  const habits = useHabits();
-  const traits = useTraits();
   const params = useParams();
   const { locale } = useLocale();
-  const [filters, setFilters] = React.useState<OccurrenceFilters>({
-    habitIds: new Set(),
-    traitIds: new Set(),
-  });
   const { firstDayOfWeek } = useFirstDayOfWeek();
-  const [fetchedMonthYear, setFetchedMonthYear] = React.useState<string>('');
-
-  const derivedFilters = React.useMemo(() => {
-    return {
-      habitIds: new Set(
-        Object.values(habits).map((habit) => {
-          return habit.id.toString();
-        })
-      ),
-      traitIds: new Set(
-        Object.values(traits).map((trait) => {
-          return trait.id.toString();
-        })
-      ),
-    };
-  }, [habits, traits]);
 
   React.useEffect(() => {
-    if (!filters.habitIds.size || !filters.traitIds.size) {
-      setFilters(derivedFilters);
-    }
-  }, [derivedFilters, filters.habitIds.size, filters.traitIds.size]);
+    const focusedDateTime = toCalendarDateTime(state.focusedDate);
+
+    const rangeStart = startOfWeek(
+      startOfMonth(focusedDateTime),
+      locale,
+      firstDayOfWeek
+    );
+    const rangeEnd = endOfWeek(
+      endOfMonth(focusedDateTime),
+      locale,
+      firstDayOfWeek
+    ).set({
+      hour: 23,
+      millisecond: 999,
+      minute: 59,
+      second: 59,
+    });
+
+    changeCalendarRange([rangeStart, rangeEnd]);
+  }, [state.focusedDate, firstDayOfWeek, changeCalendarRange, locale]);
 
   React.useEffect(() => {
     const currentMonth = startOfMonth(today(state.timeZone));
@@ -77,50 +70,15 @@ const MonthCalendar = ({ state }: MonthCalendarProps) => {
     if (state.focusedDate.toString() !== paramsDate.toString()) {
       state.setFocusedDate(toCalendarDate(paramsDate));
     }
-
-    if (!user || fetchedMonthYear === paramsDate.toString()) {
-      return;
-    }
-
-    setFetchedMonthYear(paramsDate.toString());
-
-    const paramsDateTime = toCalendarDateTime(paramsDate);
-
-    const rangeStart = startOfWeek(
-      startOfMonth(paramsDateTime),
-      locale,
-      firstDayOfWeek
-    );
-    const rangeEnd = endOfWeek(
-      endOfMonth(paramsDateTime),
-      locale,
-      firstDayOfWeek
-    ).set({
-      hour: 23,
-      millisecond: 999,
-      minute: 59,
-      second: 59,
-    });
-
-    changeCalendarRange([rangeStart, rangeEnd]);
-  }, [
-    user,
-    changeCalendarRange,
-    params,
-    state,
-    locale,
-    fetchedMonthYear,
-    firstDayOfWeek,
-  ]);
+  }, [params, state]);
 
   return (
     <>
-      <MonthCalendarHeader
-        state={state}
-        filters={filters}
-        onFilterChange={setFilters}
-      />
-      <MonthCalendarGrid state={state} filters={filters} />
+      <div className="flex flex-col items-stretch justify-between gap-2 px-0 pt-2 md:pt-0 lg:flex-row lg:gap-0 lg:px-0">
+        <MonthCalendarNavigation state={state} />
+        <MonthCalendarFilters />
+      </div>
+      <MonthCalendarGrid state={state} />
     </>
   );
 };
diff --git a/src/components/calendar/MonthCalendarFilters.tsx b/src/components/calendar/MonthCalendarFilters.tsx
index 7f37a2d..0338d3f 100644
--- a/src/components/calendar/MonthCalendarFilters.tsx
+++ b/src/components/calendar/MonthCalendarFilters.tsx
@@ -6,27 +6,30 @@ import {
   SelectItem,
   SelectSection,
 } from '@heroui/react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import groupBy from 'lodash.groupby';
 import React from 'react';
 
 import { TraitChip, CrossPlatformHorizontalScroll } from '@components';
-import type { Habit, Trait, OccurrenceFilters } from '@models';
+import { useScreenWidth } from '@hooks';
+import type { Habit, Trait } from '@models';
 import { StorageBuckets } from '@models';
 import { getPublicUrl } from '@services';
-import { useHabits, useTraits } from '@stores';
-
-export type MonthCalendarFiltersProps = {
-  filters: OccurrenceFilters;
-  onFilterChange: (filters: OccurrenceFilters) => void;
-};
+import {
+  useUser,
+  useHabits,
+  useTraits,
+  useCalendarFilters,
+  useCalendarFiltersChange,
+} from '@stores';
 
-const MonthCalendarFilters = ({
-  filters,
-  onFilterChange,
-}: MonthCalendarFiltersProps) => {
+const MonthCalendarFilters = () => {
   const habits = useHabits();
   const traits = useTraits();
+  const filters = useCalendarFilters();
+  const { user } = useUser();
+  const { isDesktop } = useScreenWidth();
+  const changeCalendarFilters = useCalendarFiltersChange();
   const {
     isOpen: isHabitsFilterSelectOpen,
     onOpenChange: onHabitsFilterSelectOpenChange,
@@ -37,19 +40,19 @@ const MonthCalendarFilters = ({
   } = useDisclosure();
 
   const areAllHabitsSelected = React.useMemo(() => {
-    if (filters.habitIds.size === 1 && filters.habitIds.has('')) {
+    if (filters.habitIds.length === 1 && filters.habitIds.includes('')) {
       return false;
     }
 
-    return filters.habitIds.size === Object.keys(habits).length;
+    return filters.habitIds.length === Object.keys(habits).length;
   }, [filters.habitIds, habits]);
 
   const areAllTraitsSelected = React.useMemo(() => {
-    if (filters.traitIds.size === 1 && filters.traitIds.has('')) {
+    if (filters.traitIds.length === 1 && filters.traitIds.includes('')) {
       return false;
     }
 
-    return filters.traitIds.size === Object.keys(traits).length;
+    return filters.traitIds.length === Object.keys(traits).length;
   }, [filters.traitIds, traits]);
 
   const habitsByTraitName = React.useMemo(() => {
@@ -63,9 +66,9 @@ const MonthCalendarFilters = ({
   > = (event) => {
     if (event.target.value.includes('toggle-all')) {
       if (areAllHabitsSelected) {
-        onFilterChange({
+        changeCalendarFilters({
           ...filters,
-          habitIds: new Set(['']),
+          habitIds: [''],
         });
 
         return;
@@ -75,17 +78,17 @@ const MonthCalendarFilters = ({
         return id !== '';
       });
 
-      onFilterChange({
+      changeCalendarFilters({
         ...filters,
-        habitIds: new Set(allHabitIds),
+        habitIds: allHabitIds,
       });
 
       return;
     }
 
-    onFilterChange({
+    changeCalendarFilters({
       ...filters,
-      habitIds: new Set(event.target.value.split(',')),
+      habitIds: event.target.value.split(','),
     });
   };
 
@@ -94,9 +97,9 @@ const MonthCalendarFilters = ({
   > = (event) => {
     if (event.target.value.includes('toggle-all')) {
       if (areAllTraitsSelected) {
-        onFilterChange({
+        changeCalendarFilters({
           ...filters,
-          traitIds: new Set(['']),
+          traitIds: [''],
         });
 
         return;
@@ -106,202 +109,212 @@ const MonthCalendarFilters = ({
         return id !== '';
       });
 
-      onFilterChange({
+      changeCalendarFilters({
         ...filters,
-        traitIds: new Set(allTraitIds),
+        traitIds: allTraitIds,
       });
 
       return;
     }
 
-    onFilterChange({
+    changeCalendarFilters({
       ...filters,
-      traitIds: new Set(event.target.value.split(',')),
+      traitIds: event.target.value.split(','),
     });
   };
 
   return (
-    <motion.div
-      initial={{
-        height: 0,
-        opacity: 0,
-      }}
-      className="flex flex-col items-stretch justify-end gap-2 min-[450px]:flex-row lg:justify-between"
-      exit={{
-        height: 0,
-        opacity: 0,
-        transition: {
-          height: {
-            duration: 0.4,
-          },
-          opacity: {
-            duration: 0.25,
-          },
-        },
-      }}
-      animate={{
-        height: 'auto',
-        opacity: 1,
-        transition: {
-          height: {
-            duration: 0.4,
-          },
-          opacity: {
-            delay: 0.15,
-            duration: 0.25,
-          },
-        },
-      }}
-    >
-      {!!Object.keys(habits).length && (
-        <Select
-          size="sm"
-          radius="sm"
-          color="secondary"
-          variant="bordered"
-          selectionMode="multiple"
-          className="w-full md:w-50"
-          selectedKeys={filters.habitIds}
-          isOpen={isHabitsFilterSelectOpen}
-          onChange={handleHabitsFilterChange}
-          onOpenChange={onHabitsFilterSelectOpenChange}
-          scrollShadowProps={{
-            visibility: 'bottom',
+    <AnimatePresence mode="wait">
+      {(isDesktop || filters.isShownOnMobile) && user && (
+        <motion.div
+          initial={{
+            height: 0,
+            opacity: 0,
+          }}
+          className="flex flex-col items-stretch justify-end gap-2 min-[450px]:flex-row lg:justify-between"
+          exit={{
+            height: 0,
+            opacity: 0,
+            transition: {
+              height: {
+                duration: 0.4,
+              },
+              opacity: {
+                duration: 0.25,
+              },
+            },
+          }}
+          animate={{
+            height: 'auto',
+            opacity: 1,
+            transition: {
+              height: {
+                duration: 0.4,
+              },
+              opacity: {
+                delay: 0.15,
+                duration: 0.25,
+              },
+            },
           }}
-          renderValue={(selectedHabits: SelectedItems<Habit>) => {
-            return (
-              <CrossPlatformHorizontalScroll className="flex space-x-2">
-                {selectedHabits.map(({ key }) => {
-                  if (typeof key !== 'string' || !habits[key]) {
+        >
+          <Select
+            size="sm"
+            radius="sm"
+            color="secondary"
+            variant="bordered"
+            selectionMode="multiple"
+            className="w-full md:w-50"
+            placeholder="Filter by habits"
+            selectedKeys={filters.habitIds}
+            isOpen={isHabitsFilterSelectOpen}
+            onChange={handleHabitsFilterChange}
+            onOpenChange={onHabitsFilterSelectOpenChange}
+            scrollShadowProps={{
+              visibility: 'bottom',
+            }}
+            renderValue={(selectedHabits: SelectedItems<Habit>) => {
+              return (
+                <CrossPlatformHorizontalScroll className="flex space-x-2">
+                  {selectedHabits.map(({ key }) => {
+                    if (typeof key !== 'string' || !habits[key]) {
+                      return null;
+                    }
+
+                    const { iconPath, id, name } = habits[key];
+
+                    return (
+                      <Tooltip key={id} closeDelay={0} content={name}>
+                        <img
+                          className="h-4 w-4"
+                          alt={`${name} icon`}
+                          src={getPublicUrl(
+                            StorageBuckets.HABIT_ICONS,
+                            iconPath
+                          )}
+                        />
+                      </Tooltip>
+                    );
+                  })}
+                </CrossPlatformHorizontalScroll>
+              );
+            }}
+          >
+            <>
+              {!!Object.keys(habits).length && (
+                <SelectItem
+                  key="toggle-all"
+                  className="mb-0.5"
+                  textValue="Toggle all"
+                >
+                  <Checkbox
+                    color="secondary"
+                    isSelected={areAllHabitsSelected}
+                    isIndeterminate={
+                      !areAllHabitsSelected && filters.habitIds.some(Boolean)
+                    }
+                  />
+                  <span>
+                    {areAllHabitsSelected ? 'Unselect' : 'Select'} all
+                  </span>
+                </SelectItem>
+              )}
+              {Object.entries(habitsByTraitName).map(
+                ([traitName, habits], index, array) => {
+                  if (!habits?.length) {
                     return null;
                   }
 
-                  const { iconPath, id, name } = habits[key];
-
                   return (
-                    <Tooltip key={id} closeDelay={0} content={name}>
-                      <img
-                        className="h-4 w-4"
-                        alt={`${name} icon`}
-                        src={getPublicUrl(StorageBuckets.HABIT_ICONS, iconPath)}
-                      />
-                    </Tooltip>
+                    <SelectSection
+                      key={traitName}
+                      title={traitName}
+                      showDivider={index < array.length - 1}
+                      classNames={{
+                        heading:
+                          'flex w-full sticky top-1 z-20 py-1.5 px-2 pl-4 bg-default-100 shadow-small rounded-small',
+                      }}
+                    >
+                      {habits.map((habit) => {
+                        return (
+                          <SelectItem key={habit.id} textValue={habit.name}>
+                            <div className="flex items-center gap-2">
+                              <img
+                                alt={habit.name}
+                                className="h-4 w-4"
+                                src={getPublicUrl(
+                                  StorageBuckets.HABIT_ICONS,
+                                  habit.iconPath
+                                )}
+                              />
+                              <span className="truncate">{habit.name}</span>
+                            </div>
+                          </SelectItem>
+                        );
+                      })}
+                    </SelectSection>
                   );
-                })}
-              </CrossPlatformHorizontalScroll>
-            );
-          }}
-        >
-          <>
-            {!!Object.keys(habits).length && (
-              <SelectItem
-                key="toggle-all"
-                className="mb-0.5"
-                textValue="Toggle all"
-              >
-                <Checkbox
-                  color="secondary"
-                  isSelected={areAllHabitsSelected}
-                  isIndeterminate={
-                    !areAllHabitsSelected && filters.habitIds.size > 1
-                  }
-                />
-                <span>{areAllHabitsSelected ? 'Unselect' : 'Select'} all</span>
-              </SelectItem>
-            )}
-            {Object.entries(habitsByTraitName).map(
-              ([traitName, habits], index, array) => {
-                if (!habits?.length) {
-                  return null;
                 }
+              )}
+            </>
+          </Select>
+          <Select
+            size="sm"
+            radius="sm"
+            color="secondary"
+            variant="bordered"
+            selectionMode="multiple"
+            placeholder="Filter by traits"
+            selectedKeys={filters.traitIds}
+            isOpen={isTraitsFilterSelectOpen}
+            onChange={handleTraitsFilterChange}
+            onOpenChange={onTraitsFilterSelectOpenChange}
+            className="w-full min-[450px]:w-1/2 md:w-[250px]"
+            renderValue={(selectedTraits: SelectedItems<Trait>) => {
+              return (
+                <CrossPlatformHorizontalScroll className="flex space-x-2">
+                  {selectedTraits.map(({ key }) => {
+                    if (typeof key !== 'string' || !traits[key]) {
+                      return null;
+                    }
 
-                return (
-                  <SelectSection
-                    key={traitName}
-                    title={traitName}
-                    showDivider={index < array.length - 1}
-                    classNames={{
-                      heading:
-                        'flex w-full sticky top-1 z-20 py-1.5 px-2 pl-4 bg-default-100 shadow-small rounded-small',
-                    }}
-                  >
-                    {habits.map((habit) => {
-                      return (
-                        <SelectItem key={habit.id} textValue={habit.name}>
-                          <div className="flex items-center gap-2">
-                            <img
-                              alt={habit.name}
-                              role="habit-icon"
-                              className="h-4 w-4"
-                              src={getPublicUrl(
-                                StorageBuckets.HABIT_ICONS,
-                                habit.iconPath
-                              )}
-                            />
-                            <span className="truncate">{habit.name}</span>
-                          </div>
-                        </SelectItem>
-                      );
-                    })}
-                  </SelectSection>
-                );
-              }
-            )}
-          </>
-        </Select>
-      )}
-      <Select
-        size="sm"
-        radius="sm"
-        color="secondary"
-        variant="bordered"
-        selectionMode="multiple"
-        selectedKeys={filters.traitIds}
-        isOpen={isTraitsFilterSelectOpen}
-        onChange={handleTraitsFilterChange}
-        onOpenChange={onTraitsFilterSelectOpenChange}
-        className="w-full min-[450px]:w-1/2 md:w-[250px]"
-        renderValue={(selectedTraits: SelectedItems<Trait>) => {
-          return (
-            <CrossPlatformHorizontalScroll className="flex space-x-2">
-              {selectedTraits.map(({ key }) => {
-                if (typeof key !== 'string' || !traits[key]) {
-                  return null;
-                }
+                    const { color, id, name } = traits[key];
 
-                const { color, id, name } = traits[key];
-
-                return <TraitChip key={id} trait={{ color, name }} />;
-              })}
-            </CrossPlatformHorizontalScroll>
-          );
-        }}
-      >
-        <>
-          {!!Object.keys(traits).length && (
-            <SelectItem
-              key="toggle-all"
-              className="mb-0.5"
-              textValue="Toggle all"
-            >
-              <Checkbox
-                color="secondary"
-                isSelected={areAllTraitsSelected}
-                isIndeterminate={
-                  !areAllTraitsSelected && filters.traitIds.size > 1
-                }
-              />
-              <span>{areAllTraitsSelected ? 'Unselect' : 'Select'} all</span>
-            </SelectItem>
-          )}
-          <SelectSection title="Filter by traits">
-            {Object.values(traits).map((trait) => {
-              return <SelectItem key={trait.id}>{trait.name}</SelectItem>;
-            })}
-          </SelectSection>
-        </>
-      </Select>
-    </motion.div>
+                    return <TraitChip key={id} trait={{ color, name }} />;
+                  })}
+                </CrossPlatformHorizontalScroll>
+              );
+            }}
+          >
+            <>
+              {!!Object.keys(traits).length && (
+                <SelectItem
+                  key="toggle-all"
+                  className="mb-0.5"
+                  textValue="Toggle all"
+                >
+                  <Checkbox
+                    color="secondary"
+                    isSelected={areAllTraitsSelected}
+                    isIndeterminate={
+                      !areAllTraitsSelected && filters.traitIds.some(Boolean)
+                    }
+                  />
+                  <span>
+                    {areAllTraitsSelected ? 'Unselect' : 'Select'} all
+                  </span>
+                </SelectItem>
+              )}
+              <SelectSection title="Filter by traits">
+                {Object.values(traits).map((trait) => {
+                  return <SelectItem key={trait.id}>{trait.name}</SelectItem>;
+                })}
+              </SelectSection>
+            </>
+          </Select>
+        </motion.div>
+      )}
+    </AnimatePresence>
   );
 };
 
diff --git a/src/components/calendar/MonthCalendarGrid.tsx b/src/components/calendar/MonthCalendarGrid.tsx
index da5909e..1a5685d 100644
--- a/src/components/calendar/MonthCalendarGrid.tsx
+++ b/src/components/calendar/MonthCalendarGrid.tsx
@@ -10,19 +10,24 @@ import { Link } from 'react-router';
 import type { CalendarState } from 'react-stately';
 
 import { useScreenWidth, useFirstDayOfWeek } from '@hooks';
-import type { OccurrenceFilters } from '@models';
-import { useWeekNotes, useOccurrences, useNoteDrawerActions } from '@stores';
+import {
+  useWeekNotes,
+  useOccurrences,
+  useCalendarFilters,
+  useNoteDrawerActions,
+} from '@stores';
 import { getISOWeek } from '@utils';
 
 import type { CellPosition } from './MonthCalendarCell';
 import MonthCalendarCell from './MonthCalendarCell';
 
 type CalendarGridProps = {
-  filters: OccurrenceFilters;
+  // filters: OccurrenceFilters;
   state: CalendarState;
 };
 
-const MonthCalendarGrid = ({ filters, state }: CalendarGridProps) => {
+const MonthCalendarGrid = ({ state }: CalendarGridProps) => {
+  const filters = useCalendarFilters();
   const occurrences = useOccurrences();
   const { firstDayOfWeek } = useFirstDayOfWeek();
   const { gridProps, weekDays } = useCalendarGrid(
@@ -211,9 +216,9 @@ const MonthCalendarGrid = ({ filters, state }: CalendarGridProps) => {
                               return (
                                 o.occurredAt.compare(startDate) >= 0 &&
                                 o.occurredAt.compare(endDate) <= 0 &&
-                                filters.habitIds.has(o.habitId.toString()) &&
-                                filters.traitIds.has(
-                                  o.habit.trait.id.toString() || ''
+                                filters.habitIds.includes(o.habitId) &&
+                                filters.traitIds.includes(
+                                  o.habit.trait.id || ''
                                 )
                               );
                             }
diff --git a/src/components/calendar/MonthCalendarHeader.tsx b/src/components/calendar/MonthCalendarHeader.tsx
deleted file mode 100644
index 85b1600..0000000
--- a/src/components/calendar/MonthCalendarHeader.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { AnimatePresence } from 'framer-motion';
-import React from 'react';
-import type { CalendarState } from 'react-stately';
-
-import { useScreenWidth } from '@hooks';
-import type { OccurrenceFilters } from '@models';
-import { useUser, useHabits, useTraits } from '@stores';
-
-import MonthCalendarFilters from './MonthCalendarFilters';
-import MonthCalendarNavigation from './MonthCalendarNavigation';
-
-export type MonthCalendarHeaderProps = {
-  filters: OccurrenceFilters;
-  state: CalendarState;
-  onFilterChange: (filters: OccurrenceFilters) => void;
-};
-
-const MonthCalendarHeader = ({
-  filters,
-  onFilterChange,
-  state,
-}: MonthCalendarHeaderProps) => {
-  const habits = useHabits();
-  const traits = useTraits();
-  const { user } = useUser();
-  const { isDesktop } = useScreenWidth();
-  const [isFilteringShownOnMobile, setIsFilteringShownOnMobile] =
-    React.useState(false);
-
-  const shouldRenderFilters = React.useMemo(() => {
-    if (!isDesktop && !isFilteringShownOnMobile) {
-      return false;
-    }
-
-    if (Object.keys(habits).length <= 1 && Object.keys(traits).length <= 1) {
-      return false;
-    }
-
-    return Boolean(user);
-  }, [habits, isFilteringShownOnMobile, isDesktop, traits, user]);
-
-  const isFilterToggleVisible = React.useMemo(() => {
-    if (Object.keys(habits).length <= 1 && Object.keys(traits).length <= 1) {
-      return false;
-    }
-
-    return Boolean(user);
-  }, [habits, traits, user]);
-
-  return (
-    <div className="flex flex-col items-stretch justify-between gap-2 px-0 pt-2 md:pt-0 lg:flex-row lg:gap-0 lg:px-0">
-      <MonthCalendarNavigation
-        state={state}
-        isFilterToggleVisible={isFilterToggleVisible}
-        onToggleFilters={() => {
-          setIsFilteringShownOnMobile((prev) => {
-            return !prev;
-          });
-        }}
-      />
-      <AnimatePresence mode="wait">
-        {shouldRenderFilters && (
-          <MonthCalendarFilters
-            filters={filters}
-            onFilterChange={onFilterChange}
-          />
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-export default MonthCalendarHeader;
diff --git a/src/components/calendar/MonthCalendarNavigation.tsx b/src/components/calendar/MonthCalendarNavigation.tsx
index a90cf60..f51960f 100644
--- a/src/components/calendar/MonthCalendarNavigation.tsx
+++ b/src/components/calendar/MonthCalendarNavigation.tsx
@@ -16,23 +16,26 @@ import { Link, useNavigate } from 'react-router';
 import type { CalendarState } from 'react-stately';
 
 import { useScreenWidth } from '@hooks';
-import { useNoteDrawerActions, useOccurrenceDrawerActions } from '@stores';
+import {
+  useUser,
+  useCalendarFilters,
+  useNoteDrawerActions,
+  useCalendarFiltersChange,
+  useOccurrenceDrawerActions,
+} from '@stores';
 
 export type MonthCalendarNavigationProps = {
-  isFilterToggleVisible: boolean;
   state: CalendarState;
-  onToggleFilters: () => void;
 };
 
 const YEARS = Array.from({ length: 31 }, (_, i) => {
   return 2000 + i;
 });
 
-const MonthCalendarNavigation = ({
-  isFilterToggleVisible,
-  onToggleFilters,
-  state,
-}: MonthCalendarNavigationProps) => {
+const MonthCalendarNavigation = ({ state }: MonthCalendarNavigationProps) => {
+  const filters = useCalendarFilters();
+  const changeCalendarFilters = useCalendarFiltersChange();
+  const { user } = useUser();
   const { isDesktop, isMobile, screenWidth } = useScreenWidth();
   const [monthSelectValue, setMonthSelectValue] = React.useState<Selection>(
     new Set([])
@@ -83,6 +86,13 @@ const MonthCalendarNavigation = ({
     navigate(`/calendar/month/${year}/${month}/1`);
   };
 
+  const toggleFiltersVisibility = () => {
+    changeCalendarFilters({
+      ...filters,
+      isShownOnMobile: !filters.isShownOnMobile,
+    });
+  };
+
   return (
     <div className="flex flex-col items-stretch justify-end gap-2 max-[445px]:gap-4 min-[446px]:flex-row lg:justify-between lg:gap-2">
       <div className="flex w-full gap-2">
@@ -114,15 +124,15 @@ const MonthCalendarNavigation = ({
         </Button>
       </div>
       <div className="mr-0 flex items-stretch gap-2 lg:mr-2">
-        {!isDesktop && isFilterToggleVisible && (
+        {!isDesktop && !!user && (
           <Button
             size="sm"
             isIconOnly
             radius="sm"
             variant="light"
             color="secondary"
-            onPress={onToggleFilters}
             aria-label="Toggle filters"
+            onPress={toggleFiltersVisibility}
             className={cn(isMobile && 'min-w-fit p-0')}
           >
             <FunnelSimpleIcon size={20} />
diff --git a/src/components/calendar/WeekCalendar.tsx b/src/components/calendar/WeekCalendar.tsx
index abb945f..4d5e301 100644
--- a/src/components/calendar/WeekCalendar.tsx
+++ b/src/components/calendar/WeekCalendar.tsx
@@ -26,7 +26,6 @@ import { useCalendarState } from 'react-stately';
 import { OccurrenceChip } from '@components';
 import { useScreenWidth, useFirstDayOfWeek } from '@hooks';
 import {
-  useUser,
   useDayNotes,
   useOccurrences,
   useNoteDrawerActions,
@@ -36,14 +35,12 @@ import {
 import { getISOWeek, getISOWeekYear } from '@utils';
 
 const WeekCalendar = () => {
-  const { user } = useUser();
   const changeCalendarRange = useCalendarRangeChange();
   const dayNotes = useDayNotes();
   const { isDesktop } = useScreenWidth();
   const { openNoteDrawer } = useNoteDrawerActions();
   const { openOccurrenceDrawer } = useOccurrenceDrawerActions();
   const occurrences = useOccurrences();
-  const [fetchedWeekYear, setFetchedWeekYear] = React.useState('');
   const { locale } = useLocale();
   const params = useParams();
   const navigate = useNavigate();
@@ -67,6 +64,20 @@ const WeekCalendar = () => {
     state
   );
 
+  React.useEffect(() => {
+    const focusedDateTime = toCalendarDateTime(state.focusedDate);
+
+    const rangeStart = startOfWeek(focusedDateTime, locale, firstDayOfWeek);
+    const rangeEnd = endOfWeek(focusedDateTime, locale, firstDayOfWeek).set({
+      hour: 23,
+      millisecond: 999,
+      minute: 59,
+      second: 59,
+    });
+
+    changeCalendarRange([rangeStart, rangeEnd]);
+  }, [state.focusedDate, firstDayOfWeek, changeCalendarRange, locale]);
+
   React.useEffect(() => {
     const currentWeek = state.visibleRange.start;
 
@@ -85,32 +96,7 @@ const WeekCalendar = () => {
     if (state.focusedDate.toString() !== paramsDate.toString()) {
       state.setFocusedDate(toCalendarDate(paramsDate));
     }
-
-    if (!user || fetchedWeekYear === state.focusedDate.toString()) {
-      return;
-    }
-
-    setFetchedWeekYear(state.focusedDate.toString());
-
-    const paramsDateTime = toCalendarDateTime(paramsDate);
-    const rangeStart = startOfWeek(paramsDateTime, locale, firstDayOfWeek);
-    const rangeEnd = endOfWeek(paramsDateTime, locale, firstDayOfWeek).set({
-      hour: 23,
-      millisecond: 999,
-      minute: 59,
-      second: 59,
-    });
-
-    changeCalendarRange([rangeStart, rangeEnd]);
-  }, [
-    user,
-    changeCalendarRange,
-    firstDayOfWeek,
-    fetchedWeekYear,
-    state,
-    params,
-    locale,
-  ]);
+  }, [state, params]);
 
   const hasNote = React.useCallback(
     (date: CalendarDate) => {
diff --git a/src/stores/habits.store.ts b/src/stores/habits.store.ts
index 464f2ab..c21c2ca 100644
--- a/src/stores/habits.store.ts
+++ b/src/stores/habits.store.ts
@@ -46,7 +46,18 @@ export const createHabitsSlice: SliceCreator<keyof HabitsSlice> = (set) => {
         const habits = await listHabits();
 
         set((state) => {
+          const prevHabitIds = state.calendarFilters.habitIds;
+          const nextHabitIds = habits.map((habit) => {
+            return habit.id;
+          });
+
           state.habits = keyBy(habits, 'id');
+          state.calendarFilters.habitIds =
+            prevHabitIds.length === 0
+              ? nextHabitIds
+              : prevHabitIds.filter((id) => {
+                  return nextHabitIds.includes(id);
+                });
         });
       },
 
diff --git a/src/stores/traits.store.ts b/src/stores/traits.store.ts
index fd93277..6eac2c1 100644
--- a/src/stores/traits.store.ts
+++ b/src/stores/traits.store.ts
@@ -37,7 +37,19 @@ export const createTraitsSlice: SliceCreator<keyof TraitsSlice> = (set) => {
         const traits = await listTraits();
 
         set((state) => {
+          const prevTraitIds = state.calendarFilters.traitIds;
+          const nextTraitIds = traits.map((trait) => {
+            return trait.id;
+          });
+
           state.traits = keyBy(traits, 'id');
+
+          state.calendarFilters.traitIds =
+            prevTraitIds.length === 0
+              ? nextTraitIds
+              : prevTraitIds.filter((id) => {
+                  return nextTraitIds.includes(id);
+                });
         });
       },
     },
diff --git a/src/stores/ui.store.ts b/src/stores/ui.store.ts
index 82cc2ad..5c3196a 100644
--- a/src/stores/ui.store.ts
+++ b/src/stores/ui.store.ts
@@ -28,13 +28,21 @@ export type ConfirmationOptions = {
   title?: string;
 };
 
+export type CalendarFilters = {
+  habitIds: string[];
+  isShownOnMobile: boolean;
+  traitIds: string[];
+};
+
 type ConfirmationState = ConfirmationOptions & {
   isOpen: boolean;
 };
 
 export type UiSlice = {
+  calendarFilters: CalendarFilters;
   calendarRange: [CalendarDateTime, CalendarDateTime];
   confirmation: ConfirmationState;
+  changeCalendarFilters: (filters: CalendarFilters) => void;
   changeCalendarRange: (range: [CalendarDateTime, CalendarDateTime]) => void;
   confirmationActions: {
     approveConfirmation: () => void;
@@ -86,11 +94,21 @@ const initialConfirmationState = {
 export const createUiSlice: SliceCreator<keyof UiSlice> = (set) => {
   return {
     confirmation: initialConfirmationState,
+    changeCalendarFilters: (filters) => {
+      set((state) => {
+        state.calendarFilters = filters;
+      });
+    },
     changeCalendarRange: (range) => {
       set((state) => {
         state.calendarRange = range;
       });
     },
+    calendarFilters: {
+      habitIds: [],
+      isShownOnMobile: false,
+      traitIds: [],
+    },
     calendarRange: [
       toCalendarDateTime(now(getLocalTimeZone())),
       toCalendarDateTime(now(getLocalTimeZone())),
@@ -198,6 +216,18 @@ export const createUiSlice: SliceCreator<keyof UiSlice> = (set) => {
   };
 };
 
+export const useCalendarFilters = () => {
+  return useBoundStore((state) => {
+    return state.calendarFilters;
+  });
+};
+
+export const useCalendarFiltersChange = () => {
+  return useBoundStore((state) => {
+    return state.changeCalendarFilters;
+  });
+};
+
 export const useCalendarRangeChange = () => {
   return useBoundStore((state) => {
     return state.changeCalendarRange;