diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index 6887d4d..effb083 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Card } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -29,6 +29,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
   const [calendarStartDate, setCalendarStartDate] = useState(startOfToday());
   const [draggedTask, setDraggedTask] = useState<string | null>(null);
   const [hoveredDate, setHoveredDate] = useState<Date | null>(null);
+  const [visibleDays, setVisibleDays] = useState(7);
   const [completionModal, setCompletionModal] = useState<{ isOpen: boolean; task: Task | null }>({
     isOpen: false,
     task: null
@@ -41,8 +42,29 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
     refetchOnWindowFocus: false,
   });
 
-  // Get 7 days starting from today for calendar
-  const dates = Array.from({ length: 7 }, (_, i) => addDays(calendarStartDate, i));
+  // Calculate responsive visible days based on screen width
+  useEffect(() => {
+    const calculateVisibleDays = () => {
+      const screenWidth = window.innerWidth;
+      // Subtract margins and padding (approximately 32px total)
+      const availableWidth = screenWidth - 32;
+      // Minimum width per day card (including gaps): ~120px
+      const minDayWidth = 120;
+      const maxDays = Math.floor(availableWidth / minDayWidth);
+      
+      // Clamp between 2 and 7 days
+      const calculated = Math.max(2, Math.min(7, maxDays));
+      setVisibleDays(calculated);
+    };
+
+    calculateVisibleDays();
+    window.addEventListener('resize', calculateVisibleDays);
+    
+    return () => window.removeEventListener('resize', calculateVisibleDays);
+  }, []);
+
+  // Get dynamic number of days starting from calendar start date
+  const dates = Array.from({ length: visibleDays }, (_, i) => addDays(calendarStartDate, i));
 
   const isOverdue = (task: Task) => {
     if (!task.dueDate) return false;
@@ -159,9 +181,9 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
   };
 
   const navigateCalendar = (direction: 'prev' | 'next') => {
-    const newDate = addDays(calendarStartDate, direction === 'next' ? 7 : -7);
+    const newDate = addDays(calendarStartDate, direction === 'next' ? visibleDays : -visibleDays);
     setCalendarStartDate(newDate);
-    console.log(`Navigating calendar to ${newDate.toLocaleDateString()}`);
+    console.log(`Navigating calendar to ${newDate.toLocaleDateString()}, showing ${visibleDays} days`);
   };
 
   const handleTaskComplete = (task: Task) => {
@@ -306,7 +328,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
             <div className="flex items-center gap-2">
               <Calendar className="w-4 h-4 text-primary" />
               <h3 className="text-sm font-semibold" data-testid="text-calendar-title">
-                Next 7 Days
+                Next {visibleDays} Days
               </h3>
             </div>
             
@@ -331,8 +353,8 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit, onS
             </div>
           </div>
 
-          {/* Full Width Calendar Grid - Responsive */}
-          <div className="grid grid-cols-4 sm:grid-cols-7 gap-2">
+          {/* Full Width Calendar Grid - Dynamic */}
+          <div className={`grid gap-2`} style={{ gridTemplateColumns: `repeat(${visibleDays}, minmax(0, 1fr))` }}>
             {dates.map((date, index) => {
               const dayTasks = getTasksForDate(date);
               const isToday = isSameDay(date, new Date());