diff --git a/.replit b/.replit
index 43487c6..2b8bbf4 100644
--- a/.replit
+++ b/.replit
@@ -15,7 +15,7 @@ localPort = 5000
 externalPort = 80
 
 [[ports]]
-localPort = 38607
+localPort = 39317
 externalPort = 3000
 
 [env]
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 63deb8c..350cf67 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -9,7 +9,7 @@ import { Card } from "@/components/ui/card";
 // Components
 import BottomNavigation from './components/BottomNavigation';
 import TaskCreationModal from './components/TaskCreationModal';
-import TaskList from './components/TaskList';
+import TasksWithCalendar from './components/TasksWithCalendar';
 import CalendarView from './components/CalendarView';
 import KanbanBoard from './components/KanbanBoard';
 import ProjectTemplate from './components/ProjectTemplate';
@@ -118,7 +118,7 @@ function App() {
     switch (currentTab) {
       case 'tasks':
         return (
-          <TaskList 
+          <TasksWithCalendar 
             tasks={tasks}
             onTaskUpdate={handleTaskUpdate}
             onTaskEdit={(task) => console.log('Edit task:', task.title)}
diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
new file mode 100644
index 0000000..337d0fd
--- /dev/null
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -0,0 +1,423 @@
+import { useState } from 'react';
+import { Card } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Search, Filter, SortAsc, Calendar, List, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Task } from './TaskCard';
+import TaskCard from './TaskCard';
+import TimeCompletionModal from './TimeCompletionModal';
+import { addDays, format, isSameDay, startOfWeek } from 'date-fns';
+
+interface TasksWithCalendarProps {
+  tasks: Task[];
+  onTaskUpdate?: (taskId: string, updates: Partial<Task>) => void;
+  onTaskEdit?: (task: Task) => void;
+}
+
+type SortOption = 'dueDate' | 'priority' | 'title' | 'status';
+type FilterOption = 'all' | 'todo' | 'inProgress' | 'done' | 'overdue';
+
+export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: TasksWithCalendarProps) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<SortOption>('dueDate');
+  const [filterBy, setFilterBy] = useState<FilterOption>('all');
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [draggedTask, setDraggedTask] = useState<string | null>(null);
+  const [activeView, setActiveView] = useState<'list' | 'calendar'>('list');
+  const [completionModal, setCompletionModal] = useState<{ isOpen: boolean; task: Task | null }>({
+    isOpen: false,
+    task: null
+  });
+
+  // Get two weeks starting from current week for calendar
+  const startDate = startOfWeek(currentDate);
+  const dates = Array.from({ length: 14 }, (_, i) => addDays(startDate, i));
+
+  const isOverdue = (task: Task) => {
+    if (!task.dueDate) return false;
+    return task.dueDate < new Date() && task.status !== 'done';
+  };
+
+  const filteredAndSortedTasks = tasks
+    .filter(task => {
+      // Search filter
+      const matchesSearch = task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+                           task.description?.toLowerCase().includes(searchQuery.toLowerCase());
+      
+      if (!matchesSearch) return false;
+      
+      // Status filter
+      switch (filterBy) {
+        case 'overdue':
+          return isOverdue(task);
+        case 'all':
+          return true;
+        default:
+          return task.status === filterBy;
+      }
+    })
+    .sort((a, b) => {
+      switch (sortBy) {
+        case 'dueDate':
+          if (!a.dueDate && !b.dueDate) return 0;
+          if (!a.dueDate) return 1;
+          if (!b.dueDate) return -1;
+          return a.dueDate.getTime() - b.dueDate.getTime();
+        
+        case 'priority':
+          const priorityOrder = { high: 3, medium: 2, low: 1 };
+          return priorityOrder[b.priority] - priorityOrder[a.priority];
+        
+        case 'title':
+          return a.title.localeCompare(b.title);
+        
+        case 'status':
+          const statusOrder = { todo: 1, inProgress: 2, done: 3 };
+          return statusOrder[a.status] - statusOrder[b.status];
+        
+        default:
+          return 0;
+      }
+    });
+
+  // Tasks that are NOT on the calendar (no due date or not scheduled)
+  const unscheduledTasks = filteredAndSortedTasks.filter(task => !task.dueDate);
+  
+  const getTasksForDate = (date: Date) => {
+    return filteredAndSortedTasks.filter(task => 
+      task.dueDate && isSameDay(task.dueDate, date)
+    );
+  };
+
+  const getFilterCount = (filter: FilterOption) => {
+    switch (filter) {
+      case 'overdue':
+        return tasks.filter(isOverdue).length;
+      case 'all':
+        return tasks.length;
+      default:
+        return tasks.filter(task => task.status === filter).length;
+    }
+  };
+
+  const handleDragStart = (taskId: string, e: React.DragEvent) => {
+    setDraggedTask(taskId);
+    e.dataTransfer.effectAllowed = 'move';
+    console.log('Drag started for task:', taskId);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedTask(null);
+  };
+
+  const handleDrop = (date: Date, e: React.DragEvent) => {
+    e.preventDefault();
+    if (draggedTask) {
+      onTaskUpdate?.(draggedTask, { dueDate: date });
+      console.log(`Task ${draggedTask} moved to`, date.toLocaleDateString());
+      setDraggedTask(null);
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+
+  const navigateWeek = (direction: 'prev' | 'next') => {
+    const newDate = addDays(currentDate, direction === 'next' ? 7 : -7);
+    setCurrentDate(newDate);
+    console.log(`Navigating to week of ${newDate.toLocaleDateString()}`);
+  };
+
+  const handleTaskComplete = (task: Task) => {
+    setCompletionModal({ isOpen: true, task });
+  };
+
+  const handleTimeLogged = (timeSpent: number) => {
+    if (completionModal.task) {
+      onTaskUpdate?.(completionModal.task.id, { 
+        status: 'done',
+        timeTracked: (completionModal.task.timeTracked || 0) + timeSpent,
+        isTracking: false
+      });
+    }
+    setCompletionModal({ isOpen: false, task: null });
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold" data-testid="text-task-list-title">
+          My Tasks
+        </h2>
+        <Badge variant="secondary" data-testid="badge-task-count">
+          {filteredAndSortedTasks.length} tasks
+        </Badge>
+      </div>
+
+      {/* Search and Filters */}
+      <div className="space-y-3">
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <Input
+            placeholder="Search tasks..."
+            value={searchQuery}
+            onChange={(e) => {
+              setSearchQuery(e.target.value);
+              console.log('Search query:', e.target.value);
+            }}
+            className="pl-10"
+            data-testid="input-search-tasks"
+          />
+        </div>
+        
+        <div className="flex gap-3">
+          <Select value={filterBy} onValueChange={(value: FilterOption) => {
+            setFilterBy(value);
+            console.log('Filter changed to:', value);
+          }}>
+            <SelectTrigger className="flex-1" data-testid="select-filter">
+              <div className="flex items-center gap-2">
+                <Filter className="w-4 h-4" />
+                <SelectValue />
+              </div>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All ({getFilterCount('all')})</SelectItem>
+              <SelectItem value="todo">To Do ({getFilterCount('todo')})</SelectItem>
+              <SelectItem value="inProgress">In Progress ({getFilterCount('inProgress')})</SelectItem>
+              <SelectItem value="done">Done ({getFilterCount('done')})</SelectItem>
+              <SelectItem value="overdue">Overdue ({getFilterCount('overdue')})</SelectItem>
+            </SelectContent>
+          </Select>
+          
+          <Select value={sortBy} onValueChange={(value: SortOption) => {
+            setSortBy(value);
+            console.log('Sort changed to:', value);
+          }}>
+            <SelectTrigger className="flex-1" data-testid="select-sort">
+              <div className="flex items-center gap-2">
+                <SortAsc className="w-4 h-4" />
+                <SelectValue />
+              </div>
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="dueDate">Due Date</SelectItem>
+              <SelectItem value="priority">Priority</SelectItem>
+              <SelectItem value="title">Title</SelectItem>
+              <SelectItem value="status">Status</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* View Toggle */}
+      <Tabs value={activeView} onValueChange={(value) => setActiveView(value as 'list' | 'calendar')}>
+        <TabsList className="grid w-full grid-cols-2">
+          <TabsTrigger value="list" data-testid="tab-list-view">
+            <List className="w-4 h-4 mr-2" />
+            List View
+          </TabsTrigger>
+          <TabsTrigger value="calendar" data-testid="tab-calendar-view">
+            <Calendar className="w-4 h-4 mr-2" />
+            Calendar View
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="list" className="space-y-4">
+          {/* Task List */}
+          <div className="space-y-3">
+            {unscheduledTasks.length === 0 ? (
+              <div className="text-center py-8">
+                <p className="text-muted-foreground" data-testid="text-no-tasks">
+                  {searchQuery || filterBy !== 'all' 
+                    ? 'No unscheduled tasks match your filters'
+                    : 'No unscheduled tasks. Drag tasks to the calendar to schedule them!'
+                  }
+                </p>
+              </div>
+            ) : (
+              <>
+                <div className="text-sm font-medium text-muted-foreground mb-2">
+                  Unscheduled Tasks - Drag to calendar to schedule
+                </div>
+                {unscheduledTasks.map((task) => (
+                  <div
+                    key={task.id}
+                    draggable
+                    onDragStart={(e) => handleDragStart(task.id, e)}
+                    onDragEnd={handleDragEnd}
+                    className={`cursor-move transition-transform ${
+                      draggedTask === task.id ? 'opacity-50 scale-95' : 'hover:scale-[1.02]'
+                    }`}
+                  >
+                    <TaskCard
+                      task={task}
+                      onPlay={() => {
+                        onTaskUpdate?.(task.id, { isTracking: true, timeTracked: task.timeTracked });
+                        console.log(`Timer started for ${task.title}`);
+                      }}
+                      onPause={() => {
+                        onTaskUpdate?.(task.id, { isTracking: false });
+                        console.log(`Timer paused for ${task.title}`);
+                      }}
+                      onEdit={() => {
+                        onTaskEdit?.(task);
+                        console.log(`Edit task ${task.title}`);
+                      }}
+                      onStatusChange={(newStatus) => {
+                        if (newStatus === 'done') {
+                          handleTaskComplete(task);
+                        } else {
+                          onTaskUpdate?.(task.id, { status: newStatus });
+                        }
+                        console.log(`Task ${task.title} status changed to ${newStatus}`);
+                      }}
+                      isDragging={draggedTask === task.id}
+                    />
+                  </div>
+                ))}
+              </>
+            )}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="calendar" className="space-y-4">
+          {/* Calendar Header */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Calendar className="w-5 h-5 text-primary" />
+              <h3 className="text-lg font-semibold" data-testid="text-calendar-title">
+                Next Two Weeks
+              </h3>
+            </div>
+            
+            <div className="flex items-center gap-2">
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={() => navigateWeek('prev')}
+                data-testid="button-prev-week"
+                className="w-8 h-8"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </Button>
+              
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={() => navigateWeek('next')}
+                data-testid="button-next-week"
+                className="w-8 h-8"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+
+          {/* Calendar Grid */}
+          <div className="grid grid-cols-2 sm:grid-cols-7 gap-3">
+            {dates.map((date, index) => {
+              const dayTasks = getTasksForDate(date);
+              const isToday = isSameDay(date, new Date());
+              const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+              
+              return (
+                <Card 
+                  key={index}
+                  className={`p-3 min-h-[140px] transition-all ${
+                    isToday ? 'ring-2 ring-primary' : ''
+                  } ${
+                    isWeekend ? 'bg-muted/30' : ''
+                  } ${
+                    draggedTask ? 'hover:ring-2 hover:ring-primary/50 hover:bg-primary/5' : 'hover-elevate'
+                  }`}
+                  onDragOver={handleDragOver}
+                  onDrop={(e) => handleDrop(date, e)}
+                  onClick={() => {
+                    console.log('Date selected:', date.toLocaleDateString());
+                  }}
+                  data-testid={`calendar-date-${format(date, 'yyyy-MM-dd')}`}
+                >
+                  <div className="text-center mb-3">
+                    <div className="text-xs text-muted-foreground font-medium">
+                      {format(date, 'EEE')}
+                    </div>
+                    <div className={`text-sm font-semibold ${
+                      isToday ? 'text-primary' : ''
+                    }`}>
+                      {format(date, 'd')}
+                    </div>
+                  </div>
+                  
+                  <div className="space-y-2">
+                    {dayTasks.slice(0, 3).map((task) => (
+                      <div
+                        key={task.id}
+                        draggable
+                        onDragStart={(e) => handleDragStart(task.id, e)}
+                        onDragEnd={handleDragEnd}
+                        className={`cursor-move ${draggedTask === task.id ? 'opacity-50' : ''}`}
+                        data-testid={`calendar-task-${task.id}`}
+                      >
+                        <Badge 
+                          variant="outline" 
+                          className="w-full justify-start text-xs p-2 h-auto"
+                        >
+                          <div className="truncate flex-1 text-left">
+                            {task.title}
+                          </div>
+                        </Badge>
+                      </div>
+                    ))}
+                    
+                    {dayTasks.length > 3 && (
+                      <Badge variant="secondary" className="w-full justify-center text-xs">
+                        +{dayTasks.length - 3} more
+                      </Badge>
+                    )}
+                    
+                    {dayTasks.length === 0 && draggedTask && (
+                      <div className="text-center text-xs text-muted-foreground py-4 border-2 border-dashed border-primary/30 rounded">
+                        Drop task here
+                      </div>
+                    )}
+                  </div>
+                </Card>
+              );
+            })}
+          </div>
+          
+          {/* Calendar Legend */}
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-primary"></div>
+              <span>Today</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 rounded-full bg-muted"></div>
+              <span>Weekend</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-3 h-3 border-2 border-dashed border-primary/30 rounded"></div>
+              <span>Drop zone</span>
+            </div>
+          </div>
+        </TabsContent>
+      </Tabs>
+
+      {/* Time Completion Modal */}
+      <TimeCompletionModal
+        isOpen={completionModal.isOpen}
+        onClose={() => setCompletionModal({ isOpen: false, task: null })}
+        onSave={handleTimeLogged}
+        taskTitle={completionModal.task?.title || ''}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/client/src/components/TimeCompletionModal.tsx b/client/src/components/TimeCompletionModal.tsx
new file mode 100644
index 0000000..1ffcfa5
--- /dev/null
+++ b/client/src/components/TimeCompletionModal.tsx
@@ -0,0 +1,193 @@
+import { useState } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Clock, Timer } from 'lucide-react';
+
+interface TimeCompletionModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (timeSpent: number) => void; // in minutes
+  taskTitle: string;
+}
+
+export default function TimeCompletionModal({ isOpen, onClose, onSave, taskTitle }: TimeCompletionModalProps) {
+  const [hours, setHours] = useState(0);
+  const [minutes, setMinutes] = useState(0);
+  const [manualHours, setManualHours] = useState('');
+  const [activeTab, setActiveTab] = useState('clock');
+
+  const handleSave = () => {
+    let totalMinutes = 0;
+    
+    if (activeTab === 'clock') {
+      totalMinutes = hours * 60 + minutes;
+    } else {
+      const parsedHours = parseFloat(manualHours) || 0;
+      totalMinutes = Math.round(parsedHours * 60);
+    }
+    
+    onSave(totalMinutes);
+    console.log(`Time logged: ${totalMinutes} minutes for task: ${taskTitle}`);
+    handleClose();
+  };
+
+  const handleClose = () => {
+    setHours(0);
+    setMinutes(0);
+    setManualHours('');
+    setActiveTab('clock');
+    onClose();
+  };
+
+  const formatTime = (h: number, m: number) => {
+    return `${h}h ${m}m`;
+  };
+
+  const getCurrentTimeDisplay = () => {
+    if (activeTab === 'clock') {
+      return formatTime(hours, minutes);
+    } else {
+      const parsedHours = parseFloat(manualHours) || 0;
+      const h = Math.floor(parsedHours);
+      const m = Math.round((parsedHours - h) * 60);
+      return formatTime(h, m);
+    }
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-md mx-4">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Timer className="w-4 h-4" />
+            Task Completed!
+          </DialogTitle>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          <div className="text-center">
+            <p className="text-sm text-muted-foreground mb-2">
+              How much time did you spend on:
+            </p>
+            <p className="font-medium truncate" data-testid="text-completed-task-title">
+              {taskTitle}
+            </p>
+          </div>
+
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="clock" data-testid="tab-clock-picker">
+                <Clock className="w-4 h-4 mr-2" />
+                Clock
+              </TabsTrigger>
+              <TabsTrigger value="manual" data-testid="tab-manual-input">
+                <Timer className="w-4 h-4 mr-2" />
+                Manual
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="clock" className="space-y-4">
+              {/* Apple-style Clock Picker */}
+              <div className="space-y-4">
+                <div className="text-center">
+                  <div className="text-2xl font-mono" data-testid="text-clock-display">
+                    {formatTime(hours, minutes)}
+                  </div>
+                </div>
+                
+                <div className="grid grid-cols-2 gap-4">
+                  {/* Hours Picker */}
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-center block">Hours</label>
+                    <div className="space-y-1 max-h-32 overflow-y-auto border rounded-md p-2">
+                      {Array.from({ length: 13 }, (_, i) => (
+                        <Button
+                          key={i}
+                          variant={hours === i ? "default" : "ghost"}
+                          size="sm"
+                          className="w-full"
+                          onClick={() => setHours(i)}
+                          data-testid={`button-hour-${i}`}
+                        >
+                          {i}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+                  
+                  {/* Minutes Picker */}
+                  <div className="space-y-2">
+                    <label className="text-sm font-medium text-center block">Minutes</label>
+                    <div className="space-y-1 max-h-32 overflow-y-auto border rounded-md p-2">
+                      {Array.from({ length: 12 }, (_, i) => i * 5).map((minute) => (
+                        <Button
+                          key={minute}
+                          variant={minutes === minute ? "default" : "ghost"}
+                          size="sm"
+                          className="w-full"
+                          onClick={() => setMinutes(minute)}
+                          data-testid={`button-minute-${minute}`}
+                        >
+                          {minute}
+                        </Button>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            <TabsContent value="manual" className="space-y-4">
+              {/* Manual Input */}
+              <div className="space-y-3">
+                <div className="text-center">
+                  <div className="text-2xl font-mono" data-testid="text-manual-display">
+                    {getCurrentTimeDisplay()}
+                  </div>
+                </div>
+                
+                <div>
+                  <label className="text-sm font-medium block mb-2">Hours (decimal)</label>
+                  <Input
+                    type="number"
+                    step="0.25"
+                    min="0"
+                    max="24"
+                    placeholder="e.g., 1.5 for 1 hour 30 minutes"
+                    value={manualHours}
+                    onChange={(e) => setManualHours(e.target.value)}
+                    data-testid="input-manual-hours"
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Examples: 0.5 = 30min, 1.25 = 1h 15min, 2.75 = 2h 45min
+                  </p>
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+          
+          <div className="flex gap-3 pt-2">
+            <Button 
+              variant="outline" 
+              onClick={handleClose}
+              className="flex-1"
+              data-testid="button-cancel-time"
+            >
+              Cancel
+            </Button>
+            <Button 
+              onClick={handleSave}
+              disabled={activeTab === 'clock' ? hours === 0 && minutes === 0 : !manualHours.trim()}
+              className="flex-1"
+              data-testid="button-save-time"
+            >
+              Save Time
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
\ No newline at end of file