diff --git a/frontend/react-app/src/css/MyTasks.css b/frontend/react-app/src/css/MyTasks.css
index 058891d..b8d4280 100644
--- a/frontend/react-app/src/css/MyTasks.css
+++ b/frontend/react-app/src/css/MyTasks.css
@@ -71,13 +71,12 @@ div.flexbox{
 .pageContainer {
     width: 100%;
 }
-
-.column-box {
+.column-box-mytasks {
     background-color: #e6e4f7;
     border-radius: 16px;
     padding: 24px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
-    width: 1200px;
+    width:100%;
 }
 
 .column-box h1, h2 {
diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index bfe8c28..d2d3632 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -190,7 +190,7 @@ if(loading){
             <Header/>
             <div className='pageBody'>
                 <div class="content-wrapper flexbox">                    
-                    <div className="column-box">
+                    <div className="column-box-mytasks">
                         <div className="my-tasks-row">
                             <h1>My Tasks</h1>
                             <a href="/create-task"><button className="create-task-btn">Create Task</button></a>
@@ -209,7 +209,7 @@ if(loading){
                         </div>
                     </div>
                         
-                    <div className="column-box">
+                    <div className="column-box-mytasks">
                         <h2>My Completed Tasks</h2>
                         <div className="section-divider"></div>
                         <div className ="taskBox">