diff --git a/client/src/App.tsx b/client/src/App.tsx
index 2d4bce3..7e6b82d 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -316,7 +316,7 @@ function App() {
           </header>
 
           {/* Main Content */}
-          <main className="pb-20 px-4 py-6">
+          <main className="pb-20 px-3 py-4 sm:px-4 sm:py-6 max-w-screen-2xl mx-auto">
             {renderContent()}
           </main>
 
diff --git a/client/src/components/CalendarView.tsx b/client/src/components/CalendarView.tsx
index d41b341..67c8981 100644
--- a/client/src/components/CalendarView.tsx
+++ b/client/src/components/CalendarView.tsx
@@ -66,12 +66,12 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
   return (
     <div className="space-y-4">
       {/* Header */}
-      <div className="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-3 mb-4">
+      <div className="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-2 sm:pb-3 mb-3 sm:mb-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <Calendar className="w-5 h-5 text-primary" />
-            <h2 className="text-lg font-semibold" data-testid="text-calendar-title">
-              5-Week Calendar View
+            <Calendar className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
+            <h2 className="text-base sm:text-lg font-semibold" data-testid="text-calendar-title">
+              Calendar
             </h2>
           </div>
           
@@ -81,7 +81,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
               size="icon"
               onClick={() => navigateWeek('prev')}
               data-testid="button-prev-week"
-              className="w-8 h-8"
+              className="h-11 w-11"
             >
               <ChevronLeft className="w-4 h-4" />
             </Button>
@@ -91,7 +91,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
               size="icon"
               onClick={() => navigateWeek('next')}
               data-testid="button-next-week"
-              className="w-8 h-8"
+              className="h-11 w-11"
             >
               <ChevronRight className="w-4 h-4" />
             </Button>
@@ -100,7 +100,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
       </div>
 
       {/* Calendar Grid */}
-      <div className="grid grid-cols-7 gap-2">
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-2 sm:gap-3">
         {dates.map((date, index) => {
           const dayTasks = getTasksForDate(date);
           const isToday = isSameDay(date, new Date());
@@ -110,7 +110,7 @@ export default function CalendarView({ tasks, onTaskDrop, onTaskClick, onDateSel
           return (
             <Card 
               key={index}
-              className={`p-3 min-h-[120px] hover-elevate active-elevate-2 transition-all ${
+              className={`p-2 sm:p-3 min-h-[100px] sm:min-h-[120px] hover-elevate active-elevate-2 transition-all ${
                 isToday ? 'ring-2 ring-primary' : ''
               } ${
                 isWeekend ? 'bg-muted/30' : ''
diff --git a/client/src/components/KanbanBoard.tsx b/client/src/components/KanbanBoard.tsx
index 124b2a6..e58df72 100644
--- a/client/src/components/KanbanBoard.tsx
+++ b/client/src/components/KanbanBoard.tsx
@@ -169,12 +169,12 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
   return (
     <div className="space-y-4">
       {/* Header */}
-      <div className="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-3 mb-4">
-        <div className="flex items-center justify-between mb-4">
+      <div className="sticky top-16 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b pb-2 sm:pb-3 mb-3 sm:mb-4">
+        <div className="flex items-center justify-between mb-3 sm:mb-4">
           <div className="flex items-center gap-2">
-            <LayoutGrid className="w-5 h-5 text-primary" />
-            <h2 className="text-lg font-semibold" data-testid="text-kanban-title">
-              Task Board
+            <LayoutGrid className="w-4 h-4 sm:w-5 sm:h-5 text-primary" />
+            <h2 className="text-base sm:text-lg font-semibold" data-testid="text-kanban-title">
+              Board
             </h2>
           </div>
           
@@ -185,7 +185,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                 size="icon"
                 onClick={() => navigatePeriod('prev')}
                 data-testid="button-prev-period"
-                className="w-8 h-8"
+                className="h-11 w-11"
               >
                 <ChevronLeft className="w-4 h-4" />
               </Button>
@@ -199,7 +199,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                 size="icon"
                 onClick={() => navigatePeriod('next')}
                 data-testid="button-next-period"
-                className="w-8 h-8"
+                className="h-11 w-11"
               >
                 <ChevronRight className="w-4 h-4" />
               </Button>
@@ -208,8 +208,8 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
         </div>
 
         {/* Filter Bar */}
-        <Card className="p-4">
-        <div className="flex items-center justify-between flex-wrap gap-4">
+        <Card className="p-3 sm:p-4">
+        <div className="flex items-center justify-between flex-wrap gap-3 sm:gap-4">
           <div className="flex items-center gap-2">
             <Filter className="w-4 h-4 text-muted-foreground" />
             <span className="text-sm font-medium">Filters</span>
@@ -416,14 +416,14 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
 
         {/* All view modes use the same kanban layout, just with different filtering */}
         <TabsContent value="traditional" className="mt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
             {columns.map((column) => {
               const columnTasks = getTasksForColumn(column.status);
               
               return (
                 <Card 
                   key={column.id}
-                  className="p-4"
+                  className="p-3 sm:p-4"
                   onDragOver={handleDragOver}
                   onDrop={() => handleDrop(column.status)}
                   data-testid={`column-${column.id}`}
@@ -437,7 +437,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                     </Badge>
                   </div>
                   
-                  <div className="space-y-3 min-h-[200px]">
+                  <div className="space-y-2 sm:space-y-3 min-h-[150px] sm:min-h-[200px]">
                     {columnTasks.map((task) => (
                       <div
                         key={task.id}
@@ -480,14 +480,14 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
         </TabsContent>
 
         <TabsContent value="weekly" className="mt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
             {columns.map((column) => {
               const columnTasks = getTasksForColumn(column.status);
               
               return (
                 <Card 
                   key={column.id}
-                  className="p-4"
+                  className="p-3 sm:p-4"
                   onDragOver={handleDragOver}
                   onDrop={() => handleDrop(column.status)}
                   data-testid={`column-${column.id}`}
@@ -501,7 +501,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                     </Badge>
                   </div>
                   
-                  <div className="space-y-3 min-h-[200px]">
+                  <div className="space-y-2 sm:space-y-3 min-h-[150px] sm:min-h-[200px]">
                     {columnTasks.map((task) => (
                       <div
                         key={task.id}
@@ -544,14 +544,14 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
         </TabsContent>
 
         <TabsContent value="monthly" className="mt-4">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
             {columns.map((column) => {
               const columnTasks = getTasksForColumn(column.status);
               
               return (
                 <Card 
                   key={column.id}
-                  className="p-4"
+                  className="p-3 sm:p-4"
                   onDragOver={handleDragOver}
                   onDrop={() => handleDrop(column.status)}
                   data-testid={`column-${column.id}`}
@@ -565,7 +565,7 @@ export default function KanbanBoard({ tasks, onTaskStatusChange, onTaskUpdate, o
                     </Badge>
                   </div>
                   
-                  <div className="space-y-3 min-h-[200px]">
+                  <div className="space-y-2 sm:space-y-3 min-h-[150px] sm:min-h-[200px]">
                     {columnTasks.map((task) => (
                       <div
                         key={task.id}
diff --git a/client/src/components/ProjectTemplate.tsx b/client/src/components/ProjectTemplate.tsx
index 5fe3926..e7b1abb 100644
--- a/client/src/components/ProjectTemplate.tsx
+++ b/client/src/components/ProjectTemplate.tsx
@@ -522,40 +522,42 @@ export default function ProjectTemplate({
   return (
     <div className="space-y-6">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <h2 className="text-lg font-semibold" data-testid="text-settings-title">
-          Settings & Project Management
+      <div className="flex items-center justify-between gap-2">
+        <h2 className="text-base sm:text-lg font-semibold" data-testid="text-settings-title">
+          Settings
         </h2>
         <Button 
           onClick={() => setIsCreateProjectOpen(true)}
           data-testid="button-create-project"
+          size="lg"
+          className="h-11"
         >
           <Plus className="w-4 h-4 mr-2" />
           New Project
         </Button>
       </div>
 
-      <Tabs defaultValue="projects" className="space-y-4">
-        <TabsList>
-          <TabsTrigger value="projects" data-testid="tab-projects">Projects</TabsTrigger>
-          <TabsTrigger value="labels" data-testid="tab-labels">Labels</TabsTrigger>
+      <Tabs defaultValue="projects" className="space-y-3 sm:space-y-4">
+        <TabsList className="w-full">
+          <TabsTrigger value="projects" data-testid="tab-projects" className="flex-1">Projects</TabsTrigger>
+          <TabsTrigger value="labels" data-testid="tab-labels" className="flex-1">Labels</TabsTrigger>
         </TabsList>
 
-        <TabsContent value="projects" className="space-y-6">
+        <TabsContent value="projects" className="space-y-4 sm:space-y-6">
           {/* Project Kanban Board */}
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 lg:gap-6">
             {projectColumns.map((column) => {
               const columnProjects = getProjectsByStatus(column.status);
               
               return (
                 <Card
                   key={column.id}
-                  className="p-4"
+                  className="p-3 sm:p-4"
                   onDragOver={handleDragOver}
                   onDrop={() => handleDrop(column.status)}
                   data-testid={`column-${column.id}`}
                 >
-                  <div className="flex items-center justify-between mb-4">
+                  <div className="flex items-center justify-between mb-3 sm:mb-4">
                     <h3 className="font-semibold text-sm" data-testid={`text-column-title-${column.id}`}>
                       {column.title}
                     </h3>
@@ -564,14 +566,14 @@ export default function ProjectTemplate({
                     </Badge>
                   </div>
                   
-                  <div className="space-y-3 min-h-[400px]">
+                  <div className="space-y-2 sm:space-y-3 min-h-[200px] sm:min-h-[300px]">
                     {columnProjects.map((project) => (
                       <Card
                         key={project.id}
                         draggable
                         onDragStart={() => handleDragStart(project.id)}
                         onDragEnd={handleDragEnd}
-                        className={`p-4 cursor-move hover-elevate transition-all ${
+                        className={`p-3 sm:p-4 cursor-move hover-elevate transition-all ${
                           draggedProject === project.id ? 'opacity-50 scale-95' : ''
                         }`}
                         data-testid={`project-card-${project.id}`}