diff --git a/src/views/components/Calendar.css b/src/views/components/Calendar.css
index 909fa4f..965ffbc 100644
--- a/src/views/components/Calendar.css
+++ b/src/views/components/Calendar.css
@@ -1,9 +1,44 @@
 .react-calendar {
   width: 100%;
-  max-width: 600px;
+  max-width: min(600px, 95vw);
   font-family: 'Roboto', sans-serif;
   background-color: transparent;
   border: none;
+  margin: 0 auto;
+}
+
+/* Force proper 7-day grid layout */
+.react-calendar__month-view__days {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr) !important;
+  gap: 2px;
+}
+
+.react-calendar__month-view__weekdays {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr) !important;
+  gap: 2px;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .react-calendar {
+    max-width: 100%;
+    font-size: 0.875rem;
+  }
+
+  .react-calendar__tile {
+    min-width: 28px;
+    max-width: 42px;
+    min-height: 28px;
+    max-height: 42px;
+    font-size: clamp(0.7rem, 3vw, 0.8rem);
+  }
+
+  .react-calendar__month-view__weekdays__weekday {
+    padding: 0.25em;
+    font-size: 0.75rem;
+  }
 }
 
 /* Add styles for weekday names */
@@ -28,14 +63,20 @@
 }
 
 .react-calendar__tile {
-  padding: 10px;
-  max-height: 40px;
-  min-width: 40px;
+  padding: 0;
+  width: 100%;
+  aspect-ratio: 1;
   text-align: center;
   border-radius: 50%;
   transition: all 0.2s ease-in-out;
   position: relative;
-  font-size: 0.875rem;
+  font-size: clamp(0.75rem, 2vw, 0.875rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border: none;
+  background: transparent;
 }
 
 .react-calendar__tile:enabled:hover {
@@ -88,25 +129,28 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 16px;
+  height: 12px;
   flex-wrap: wrap;
-  position: relative;
-  min-height: 16px;
-  margin-top: -5px;
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  min-height: 12px;
+  width: 100%;
 }
 
 .dot {
-  width: 0.3em;
-  height: 0.3em;
+  width: clamp(3px, 0.25em, 5px);
+  height: clamp(3px, 0.25em, 5px);
   border-radius: 50%;
-  margin: 0 1px;
+  margin: 0 0.5px;
 }
 
 .dot-with-line {
-  width: 1.2em;
-  height: 0.3em;
-  border-radius: 0.15em;
-  margin: 0 1px;
+  width: clamp(12px, 1em, 16px);
+  height: clamp(3px, 0.25em, 5px);
+  border-radius: clamp(1.5px, 0.125em, 2.5px);
+  margin: 0 0.5px;
 }
 .dot-empty {
   background-color: transparent;
diff --git a/src/views/components/Calendar.module.css b/src/views/components/Calendar.module.css
new file mode 100644
index 0000000..0f6f5fc
--- /dev/null
+++ b/src/views/components/Calendar.module.css
@@ -0,0 +1,295 @@
+.reactCalendar {
+  width: 100%;
+  min-width: 280px;
+  font-family: 'Roboto', sans-serif;
+  background-color: transparent;
+  border: none;
+  margin: 0 auto;
+}
+
+/* Force proper 7-day grid layout */
+.reactCalendar :global(.react-calendar__month-view__days) {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr) !important;
+  gap: 2px;
+}
+
+.reactCalendar :global(.react-calendar__month-view__weekdays) {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr) !important;
+  gap: 2px;
+}
+
+/* Year view - force 3 columns layout */
+.reactCalendar :global(.react-calendar__year-view__months) {
+  display: grid !important;
+  grid-template-columns: repeat(3, 1fr) !important;
+  gap: 8px;
+}
+
+/* Decade view - force 3 columns layout for years */
+.reactCalendar :global(.react-calendar__decade-view__years) {
+  display: grid !important;
+  grid-template-columns: repeat(3, 1fr) !important;
+  gap: 8px;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .reactCalendar {
+    font-size: 0.875rem;
+  }
+
+  .reactCalendar :global(.react-calendar__tile) {
+    min-height: 28px;
+    font-size: clamp(0.7rem, 3vw, 0.8rem);
+  }
+
+  .reactCalendar :global(.react-calendar__month-view__weekdays__weekday) {
+    padding: 0.25em;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Ensure year view stays 3 columns on mobile */
+  .reactCalendar :global(.react-calendar__year-view__months) {
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 4px;
+  }
+
+  /* Ensure decade view stays 3 columns on mobile */
+  .reactCalendar :global(.react-calendar__decade-view__years) {
+    grid-template-columns: repeat(3, 1fr) !important;
+    gap: 4px;
+  }
+}
+
+/* Add styles for weekday names */
+.reactCalendar :global(.react-calendar__month-view__weekdays__weekday) {
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5em;
+  color: #666;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reactCalendar :global(.react-calendar__month-view__weekdays__weekday abbr) {
+  text-decoration: none;
+  border-bottom: none;
+  cursor: default;
+}
+
+/* reduce the naivation bar height */
+.reactCalendar :global(.react-calendar__navigation) {
+  height: 30px;
+  margin-bottom: 10px;
+  width: 100%;
+  display: flex;
+}
+
+.reactCalendar :global(.react-calendar__navigation__label) {
+  flex-grow: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.reactCalendar :global(.react-calendar__tile) {
+  padding: 0;
+  width: 100%;
+  aspect-ratio: 1;
+  text-align: center;
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  font-size: clamp(0.75rem, 2vw, 0.875rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border: none;
+  background: transparent;
+}
+
+.reactCalendar :global(.react-calendar__tile:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg);
+  color: var(--joy-palette-primary-solidColor);
+}
+
+/* Active/Selected date */
+.reactCalendar :global(.react-calendar__tile--active) {
+  background-color: var(--joy-palette-primary-solidBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+  border: none !important;
+  box-shadow: 0 2px 4px var(--joy-palette-primary-shadowRing);
+}
+
+.reactCalendar :global(.react-calendar__tile--active:hover) {
+  background-color: var(--joy-palette-primary-solidHoverBg) !important;
+}
+
+/* Today's date */
+.reactCalendar :global(.react-calendar__tile--now) {
+  background-color: transparent !important;
+  border: 1.5px solid var(--joy-palette-primary-solidBg) !important;
+  color: var(--joy-palette-primary-solidBg) !important;
+  font-weight: 500;
+}
+
+.reactCalendar :global(.react-calendar__tile--now:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+}
+
+/* Disabled dates */
+.reactCalendar :global(.react-calendar__tile:disabled) {
+  color: var(--joy-palette-text-tertiary);
+  cursor: not-allowed;
+  background: transparent;
+}
+
+/* Weekend dates */
+.reactCalendar :global(.react-calendar__month-view__days__day--weekend) {
+  color: var(--joy-palette-text-secondary);
+}
+
+/* Neighboring month dates */
+.reactCalendar
+  :global(.react-calendar__month-view__days__day--neighboringMonth) {
+  color: var(--joy-palette-text-tertiary);
+}
+
+.dotContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 12px;
+  flex-wrap: wrap;
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  min-height: 12px;
+  width: 100%;
+}
+
+.dot {
+  width: clamp(3px, 0.25em, 5px);
+  height: clamp(3px, 0.25em, 5px);
+  border-radius: 50%;
+  margin: 0 0.5px;
+}
+
+.dotWithLine {
+  width: clamp(12px, 1em, 16px);
+  height: clamp(3px, 0.25em, 5px);
+  border-radius: clamp(1.5px, 0.125em, 2.5px);
+  margin: 0 0.5px;
+}
+
+.dotEmpty {
+  background-color: transparent;
+}
+
+.choreTooltip {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  z-index: 10;
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
+}
+
+/* Year view month tiles - override circular styling */
+.reactCalendar :global(.react-calendar__year-view__months__month) {
+  border-radius: 8px !important; /* Override the 50% circular radius */
+  padding: 12px 8px !important;
+  min-width: 60px !important;
+  max-height: 50px !important;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.reactCalendar
+  :global(.react-calendar__year-view__months__month:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+}
+
+/* Decade view year tiles - similar fix */
+.reactCalendar :global(.react-calendar__decade-view__years__year) {
+  border-radius: 8px !important;
+  padding: 12px 8px !important;
+  min-width: 60px !important;
+  max-height: 50px !important;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.reactCalendar
+  :global(.react-calendar__decade-view__years__year:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+}
+
+/* Century view decade tiles */
+.reactCalendar :global(.react-calendar__century-view__decades__decade) {
+  border-radius: 8px !important;
+  padding: 12px 8px !important;
+  min-width: 60px !important;
+  max-height: 50px !important;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.reactCalendar
+  :global(.react-calendar__century-view__decades__decade:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+}
+
+/* Navigation buttons (month/year selectors and arrows) */
+.reactCalendar :global(.react-calendar__navigation button) {
+  border-radius: 8px !important; /* Override circular border-radius */
+  padding: 6px 12px !important;
+  min-width: auto !important;
+  max-height: none !important;
+  font-weight: 500;
+  background-color: transparent;
+  border: 1px solid transparent;
+  transition: all 0.2s ease-in-out;
+  color: var(--joy-palette-text-primary);
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Navigation arrow buttons only */
+.reactCalendar :global(.react-calendar__navigation__arrow) {
+  font-size: 1.4rem !important;
+}
+
+.reactCalendar :global(.react-calendar__navigation button:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+  border-color: var(--joy-palette-primary-outlinedBorder);
+}
+
+.reactCalendar :global(.react-calendar__navigation button:enabled:focus) {
+  background-color: var(--joy-palette-primary-softActiveBg) !important;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--joy-palette-primary-outlinedBorder);
+}
diff --git a/src/views/components/CalendarDual.jsx b/src/views/components/CalendarDual.jsx
new file mode 100644
index 0000000..946551c
--- /dev/null
+++ b/src/views/components/CalendarDual.jsx
@@ -0,0 +1,173 @@
+import { Box, Typography } from '@mui/joy'
+import { useEffect, useState } from 'react'
+import Calendar from 'react-calendar'
+// import 'react-calendar/dist/Calendar.css'
+import { useNavigate } from 'react-router-dom'
+import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
+import { getPriorityColor, TASK_COLOR } from '../../utils/Colors'
+import styles from './CalendarDual.module.css'
+
+const getAssigneeColor = (assignee, userProfile) => {
+  return assignee === userProfile.id
+    ? TASK_COLOR.ASSIGNED_TO_ME
+    : TASK_COLOR.ASSIGNED_TO_OTHER
+}
+const CalendarDual = ({ chores, onDateChange }) => {
+  const { data: userProfile } = useUserProfile()
+
+  const [selectedDate, setSeletedDate] = useState(null)
+  const [currentDate, setCurrentDate] = useState(new Date())
+  const [nextMonth, setNextMonth] = useState(() => {
+    const next = new Date()
+    next.setMonth(next.getMonth() + 1)
+    return next
+  })
+  const Navigate = useNavigate()
+
+  // Fetch circle members data to get assignee names
+  const { data: circleMembersData } = useCircleMembers()
+  const circleMembers = circleMembersData?.res || []
+
+  // Update next month whenever current date changes
+  useEffect(() => {
+    const next = new Date(currentDate.getTime())
+    next.setMonth(currentDate.getMonth() + 1)
+    setNextMonth(next)
+  }, [currentDate])
+
+  // Helper function to get assignee display name
+  const getAssigneeName = assignedTo => {
+    if (assignedTo === userProfile.id) {
+      return userProfile.displayName
+    }
+    const assignee = circleMembers.find(member => member.userId === assignedTo)
+    return assignee ? `${assignee.displayName}` : 'Assigned to other'
+  }
+
+  const tileContent = ({ date, view }) => {
+    if (view === 'month') {
+      const dayChores = chores.filter(chore => {
+        const choreDate = new Date(chore.nextDueDate).toLocaleDateString()
+        const tileDate = date.toLocaleDateString()
+        return choreDate === tileDate
+      })
+      if (dayChores.length === 0) {
+        return (
+          <div className={styles.dotContainer}>
+            <span className={styles.dotEmpty}></span>
+          </div>
+        )
+      }
+      if (dayChores.length > 3) {
+        return (
+          <div className={styles.dotContainer}>
+            <span
+              className={styles.dotWithLine}
+              style={{
+                backgroundColor: getPriorityColor(dayChores[0].priority),
+              }}
+            ></span>
+          </div>
+        )
+      }
+
+      return (
+        <div className={styles.dotContainer}>
+          {dayChores.map((chore, index) => {
+            return (
+              <span
+                key={index}
+                className={styles.dot}
+                style={{
+                  backgroundColor: getPriorityColor(chore.priority),
+                }}
+              ></span>
+            )
+          })}
+        </div>
+      )
+    }
+    return null
+  }
+
+  const renderSingleCalendar = (date, isSecondary = false) => (
+    <div
+      className={`${styles.reactCalendar} ${isSecondary ? styles.secondaryCalendar : ''}`}
+    >
+      {isSecondary && (
+        <div className={styles.secondaryCalendarHeader}>
+          <Typography level='title-md' sx={{ textAlign: 'center', mb: 1 }}>
+            {date.toLocaleDateString('en-US', {
+              month: 'long',
+              year: 'numeric',
+            })}
+          </Typography>
+        </div>
+      )}
+      <Calendar
+        className={styles.reactCalendar}
+        tileContent={tileContent}
+        onChange={d => {
+          let date = new Date(d)
+          setSeletedDate(date)
+          onDateChange(date)
+        }}
+        value={selectedDate}
+        activeStartDate={date}
+        // Don't show navigation on secondary calendar
+        showNavigation={!isSecondary}
+        // format the days from MON, TUE, WED, THU, FRI, SAT, SUN to first three letters:
+        formatShortWeekday={(locale, date) =>
+          ['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]
+        }
+        onActiveStartDateChange={({ activeStartDate }) => {
+          if (!isSecondary) {
+            setCurrentDate(activeStartDate)
+          }
+        }}
+      />
+    </div>
+  )
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {/* Responsive Calendar Layout */}
+      <Box
+        sx={{
+          width: '100%',
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+          gap: { xs: 2, md: 4 },
+          justifyContent: 'center',
+          alignItems: { xs: 'center', md: 'flex-start' },
+        }}
+      >
+        {/* Primary Calendar */}
+        <Box sx={{ flex: 1, display: 'flex', justifyContent: 'center' }}>
+          {renderSingleCalendar(currentDate)}
+        </Box>
+
+        {/* Secondary Calendar - only show on desktop */}
+        <Box
+          sx={{
+            flex: 1,
+            display: { xs: 'none', md: 'flex' },
+            justifyContent: 'center',
+          }}
+        >
+          {renderSingleCalendar(nextMonth, true)}
+        </Box>
+      </Box>
+    </div>
+  )
+}
+
+export default CalendarDual
diff --git a/src/views/components/CalendarDual.module.css b/src/views/components/CalendarDual.module.css
new file mode 100644
index 0000000..c82e02c
--- /dev/null
+++ b/src/views/components/CalendarDual.module.css
@@ -0,0 +1,296 @@
+.reactCalendar {
+  width: 100%;
+  max-width: min(400px, 95vw);
+  font-family: 'Roboto', sans-serif;
+  background-color: transparent;
+  border: none;
+  margin: 0 auto;
+}
+/* checkpoint here */
+
+/* Desktop dual calendar layout */
+@media (min-width: 768px) {
+  .reactCalendar {
+    max-width: 350px;
+    min-width: 350px;
+  }
+}
+
+/* Hide navigation on secondary calendar */
+.secondaryCalendar :global(.react-calendar__navigation) {
+  display: none;
+}
+
+/* Secondary calendar header styling */
+.secondaryCalendarHeader {
+  height: 30px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Force proper 7-day grid layout */
+.reactCalendar :global(.react-calendar__month-view__days) {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr) !important;
+  gap: 2px;
+}
+
+.reactCalendar :global(.react-calendar__month-view__weekdays) {
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr) !important;
+  gap: 2px;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .reactCalendar {
+    max-width: 100%;
+    font-size: 0.875rem;
+  }
+
+  .reactCalendar :global(.react-calendar__tile) {
+    min-width: 28px;
+    max-width: 42px;
+    min-height: 28px;
+    max-height: 42px;
+    font-size: clamp(0.7rem, 3vw, 0.8rem);
+  }
+
+  .reactCalendar :global(.react-calendar__month-view__weekdays__weekday) {
+    padding: 0.25em;
+    font-size: 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* Add styles for weekday names */
+.reactCalendar :global(.react-calendar__month-view__weekdays__weekday) {
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5em;
+  color: #666;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reactCalendar :global(.react-calendar__month-view__weekdays__weekday abbr) {
+  text-decoration: none;
+  border-bottom: none;
+  cursor: default;
+}
+
+/* reduce the naivation bar height */
+.reactCalendar :global(.react-calendar__navigation) {
+  height: 30px;
+  margin-bottom: 10px;
+  width: 100%;
+  display: flex;
+}
+
+.reactCalendar :global(.react-calendar__navigation__label) {
+  flex-grow: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.reactCalendar :global(.react-calendar__tile) {
+  padding: 0;
+  width: 100%;
+  aspect-ratio: 1;
+  text-align: center;
+  border-radius: 50%;
+  transition: all 0.2s ease-in-out;
+  position: relative;
+  font-size: clamp(0.75rem, 2vw, 0.875rem);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border: none;
+  background: transparent;
+}
+
+.reactCalendar :global(.react-calendar__tile:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg);
+  color: var(--joy-palette-primary-solidColor);
+}
+
+/* Active/Selected date */
+.reactCalendar :global(.react-calendar__tile--active) {
+  background-color: var(--joy-palette-primary-solidBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+  border: none !important;
+  box-shadow: 0 2px 4px var(--joy-palette-primary-shadowRing);
+}
+
+.reactCalendar :global(.react-calendar__tile--active:hover) {
+  background-color: var(--joy-palette-primary-solidHoverBg) !important;
+}
+
+/* Today's date */
+.reactCalendar :global(.react-calendar__tile--now) {
+  background-color: transparent !important;
+  border: 1.5px solid var(--joy-palette-primary-solidBg) !important;
+  color: var(--joy-palette-primary-solidBg) !important;
+  font-weight: 500;
+}
+
+.reactCalendar :global(.react-calendar__tile--now:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+}
+
+/* Disabled dates */
+.reactCalendar :global(.react-calendar__tile:disabled) {
+  color: var(--joy-palette-text-tertiary);
+  cursor: not-allowed;
+  background: transparent;
+}
+
+/* Weekend dates */
+.reactCalendar :global(.react-calendar__month-view__days__day--weekend) {
+  color: var(--joy-palette-text-secondary);
+}
+
+/* Neighboring month dates */
+.reactCalendar
+  :global(.react-calendar__month-view__days__day--neighboringMonth) {
+  color: var(--joy-palette-text-tertiary);
+}
+
+.dotContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 12px;
+  flex-wrap: wrap;
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  transform: translateX(-50%);
+  min-height: 12px;
+  width: 100%;
+}
+
+.dot {
+  width: clamp(3px, 0.25em, 5px);
+  height: clamp(3px, 0.25em, 5px);
+  border-radius: 50%;
+  margin: 0 0.5px;
+}
+
+.dotWithLine {
+  width: clamp(12px, 1em, 16px);
+  height: clamp(3px, 0.25em, 5px);
+  border-radius: clamp(1.5px, 0.125em, 2.5px);
+  margin: 0 0.5px;
+}
+
+.dotEmpty {
+  background-color: transparent;
+}
+
+.choreTooltip {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: #333;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+  z-index: 10;
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    opacity 0.2s ease,
+    visibility 0.2s ease;
+}
+
+/* Year view month tiles - override circular styling */
+.reactCalendar :global(.react-calendar__year-view__months__month) {
+  border-radius: 8px !important; /* Override the 50% circular radius */
+  padding: 12px 8px !important;
+  min-width: 60px !important;
+  max-height: 50px !important;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.reactCalendar
+  :global(.react-calendar__year-view__months__month:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+}
+
+/* Decade view year tiles - similar fix */
+.reactCalendar :global(.react-calendar__decade-view__years__year) {
+  border-radius: 8px !important;
+  padding: 12px 8px !important;
+  min-width: 60px !important;
+  max-height: 50px !important;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.reactCalendar
+  :global(.react-calendar__decade-view__years__year:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+}
+
+/* Century view decade tiles */
+.reactCalendar :global(.react-calendar__century-view__decades__decade) {
+  border-radius: 8px !important;
+  padding: 12px 8px !important;
+  min-width: 60px !important;
+  max-height: 50px !important;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.reactCalendar
+  :global(.react-calendar__century-view__decades__decade:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+}
+
+/* Navigation buttons (month/year selectors and arrows) */
+.reactCalendar :global(.react-calendar__navigation button) {
+  border-radius: 8px !important; /* Override circular border-radius */
+  padding: 6px 12px !important;
+  min-width: auto !important;
+  max-height: none !important;
+  font-weight: 500;
+  background-color: transparent;
+  border: 1px solid transparent;
+  transition: all 0.2s ease-in-out;
+  color: var(--joy-palette-text-primary);
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+}
+
+/* Navigation arrow buttons only */
+.reactCalendar :global(.react-calendar__navigation__arrow) {
+  font-size: 1.2rem !important;
+}
+
+.reactCalendar :global(.react-calendar__navigation button:enabled:hover) {
+  background-color: var(--joy-palette-primary-softBg) !important;
+  color: var(--joy-palette-primary-solidColor) !important;
+  border-color: var(--joy-palette-primary-outlinedBorder);
+}
+
+.reactCalendar :global(.react-calendar__navigation button:enabled:focus) {
+  background-color: var(--joy-palette-primary-softActiveBg) !important;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--joy-palette-primary-outlinedBorder);
+}
diff --git a/src/views/components/CalendarMonthly.jsx b/src/views/components/CalendarMonthly.jsx
new file mode 100644
index 0000000..e480e4c
--- /dev/null
+++ b/src/views/components/CalendarMonthly.jsx
@@ -0,0 +1,84 @@
+import Calendar from 'react-calendar'
+import { getPriorityColor } from '../../utils/Colors'
+import styles from './Calendar.module.css'
+const CalendarMonthly = ({ chores, onDateChange }) => {
+  const tileContent = ({ date, view }) => {
+    if (view === 'month') {
+      const dayChores = chores.filter(chore => {
+        const choreDate = new Date(chore.nextDueDate).toLocaleDateString()
+        const tileDate = date.toLocaleDateString()
+        return choreDate === tileDate
+      })
+      if (dayChores.length === 0) {
+        return (
+          <div className={styles.dotContainer}>
+            <span className={styles.dotEmpty}></span>
+          </div>
+        )
+      }
+      if (dayChores.length > 3) {
+        return (
+          <div className={styles.dotContainer}>
+            <span
+              className={styles.dotWithLine}
+              style={{
+                backgroundColor: getPriorityColor(dayChores[0].priority),
+              }}
+            ></span>
+          </div>
+        )
+      }
+
+      return (
+        <div className={styles.dotContainer}>
+          {dayChores.map((chore, index) => {
+            return (
+              <span
+                key={index}
+                className={styles.dot}
+                style={{
+                  backgroundColor: getPriorityColor(chore.priority),
+                }}
+              ></span>
+            )
+          })}
+        </div>
+      )
+    }
+    return null
+  }
+  return (
+    <div className={styles.reactCalendar}>
+      <Calendar
+        tileContent={tileContent}
+        onChange={d => {
+          onDateChange(new Date(d))
+        }}
+        // format the days from MON, TUE, WED, THU, FRI, SAT, SUN to first three letters:
+        formatShortWeekday={(locale, date) =>
+          ['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]
+        }
+        // format month names to show only first 3 characters
+        formatMonth={(locale, date) => {
+          const monthNames = [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec',
+          ]
+          return monthNames[date.getMonth()]
+        }}
+      />
+    </div>
+  )
+}
+
+export default CalendarMonthly
diff --git a/src/views/components/CalendarView.jsx b/src/views/components/CalendarView.jsx
index aaed132..fd3e2ce 100644
--- a/src/views/components/CalendarView.jsx
+++ b/src/views/components/CalendarView.jsx
@@ -2,27 +2,13 @@ import { CalendarMonth } from '@mui/icons-material'
 import { Avatar, Box, Chip, Grid, Typography } from '@mui/joy'
 import moment from 'moment'
 import { useState } from 'react'
-import Calendar from 'react-calendar'
-import 'react-calendar/dist/Calendar.css'
+// import 'react-calendar/dist/Calendar.css'
 import { useNavigate } from 'react-router-dom'
 import { useCircleMembers, useUserProfile } from '../../queries/UserQueries'
-import { TASK_COLOR } from '../../utils/Colors'
-import './Calendar.css'
+import { getPriorityColor, TASK_COLOR } from '../../utils/Colors'
+
+import CalendarMonthly from './CalendarMonthly'
 
-const getPriorityColor = priority => {
-  switch (priority) {
-    case 1:
-      return TASK_COLOR.PRIORITY_1
-    case 2:
-      return TASK_COLOR.PRIORITY_2
-    case 3:
-      return TASK_COLOR.PRIORITY_3
-    case 4:
-      return TASK_COLOR.PRIORITY_4
-    default:
-      return TASK_COLOR.NO_PRIORITY
-  }
-}
 const getAssigneeColor = (assignee, userProfile) => {
   return assignee === userProfile.id
     ? TASK_COLOR.ASSIGNED_TO_ME
@@ -47,52 +33,6 @@ const CalendarView = ({ chores }) => {
     return assignee ? `${assignee.displayName}` : 'Assigned to other'
   }
 
-  const tileContent = ({ date, view }) => {
-    if (view === 'month') {
-      const dayChores = chores.filter(chore => {
-        const choreDate = new Date(chore.nextDueDate).toLocaleDateString()
-        const tileDate = date.toLocaleDateString()
-        return choreDate === tileDate
-      })
-      if (dayChores.length === 0) {
-        return (
-          <div className='dot-container'>
-            <span className='dot-empty'></span>
-          </div>
-        )
-      }
-      if (dayChores.length > 3) {
-        return (
-          <div className='dot-container'>
-            <span
-              className='dot-with-line'
-              style={{
-                backgroundColor: getPriorityColor(dayChores[0].priority),
-              }}
-            ></span>
-          </div>
-        )
-      }
-
-      return (
-        <div className='dot-container'>
-          {dayChores.map((chore, index) => {
-            return (
-              <span
-                key={index}
-                className='dot'
-                style={{
-                  backgroundColor: getPriorityColor(chore.priority),
-                }}
-              ></span>
-            )
-          })}
-        </div>
-      )
-    }
-    return null
-  }
-
   return (
     <div
       style={{
@@ -110,7 +50,7 @@ const CalendarView = ({ chores }) => {
           alignItems: 'center',
           justifyContent: 'flex-start',
           gap: 1,
-          width: '100%',
+          maxWidth: '250px',
           mb: 2,
         }}
       >
@@ -118,16 +58,16 @@ const CalendarView = ({ chores }) => {
         <Typography level='title-md'>Calendar Overview</Typography>
       </Box>
 
-      <Calendar
-        tileContent={tileContent}
-        onChange={d => {
-          setSeletedDate(new Date(d))
-        }}
-        // format the days from MON, TUE, WED, THU, FRI, SAT, SUN to first three letters:
-        formatShortWeekday={(locale, date) =>
-          ['S', 'M', 'T', 'W', 'T', 'F', 'S'][date.getDay()]
-        }
-      />
+      <div>
+        <CalendarMonthly
+          // className={styled.reactCalendar}
+          chores={chores}
+          onDateChange={date => {
+            setSeletedDate(date)
+          }}
+        />
+      </div>
+
       {!selectedDate && (
         <Grid
           container