diff --git a/frontend/react-app/src/css/CreateTaskForm.css b/frontend/react-app/src/css/CreateTaskForm.css
index 1ab4b81..a8ed0d9 100644
--- a/frontend/react-app/src/css/CreateTaskForm.css
+++ b/frontend/react-app/src/css/CreateTaskForm.css
@@ -54,7 +54,8 @@
 
   #createTaskBtn {
     margin-left: 25%;
-    background-color: #52529e;
+    margin-top: 24px;
+    background-color: #3f5d8b;
     color: white;
     font-size: 1em;
   }
diff --git a/frontend/react-app/src/css/MyTasks.css b/frontend/react-app/src/css/MyTasks.css
index c474f7a..3163b6e 100644
--- a/frontend/react-app/src/css/MyTasks.css
+++ b/frontend/react-app/src/css/MyTasks.css
@@ -1,38 +1,45 @@
 *{
     text-decoration: none;
 }
+
 html{
     height: 100%;
     margin: 0;
     padding: 0;
 }
+
 div.MyTasksPage{
     background-color: #5d5d81;
 }
+
 .pageFlexbox{
     display: flex;
     flex-direction: column;
 }
+
 div.content-wrapper{
     /* color: #bfcde0; */
-    margin-left: 5%;
-    margin-right: 5%;
     font-family: Calibri;
+    margin: 0 auto;
 }
+
 div.flexbox{
     margin-top: 2rem;
     margin-bottom: 2rem;
-    justify-content:space-between;
-    width: 90%;
     display: flex;
-    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 30px;
+    width: 100%;
+    max-width: 1600px;
 }
+
 .taskBox{
-    width: 90%;
+    width: 100%;
 }
 
 .create-task-btn {
-    background-color: #238de3;
+    background-color: #2d2644;
     color: white;
     border: none;
     padding: 15px 30px;
@@ -40,8 +47,34 @@ div.flexbox{
     font-size: 16px;
     cursor: pointer;
     border-radius: 10px;
-  }
+}
 
-  .pageContainer {
+.pageContainer {
+    width: 100%;
+}
+
+.column-box {
+    background-color: #e6e4f7;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+    width: 1200px;
+}
+
+.column-box h1, h2 {
+    font-size: 30px;
+}
+
+.my-tasks-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.section-divider {
+    border: none;
+    border-top: 2px solid #3f5d8b;
+    margin-top: 8px;
+    margin-bottom: 16px;
     width: 100%;
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/react-app/src/pages/MyTasks.jsx b/frontend/react-app/src/pages/MyTasks.jsx
index 620e64c..031ea7c 100644
--- a/frontend/react-app/src/pages/MyTasks.jsx
+++ b/frontend/react-app/src/pages/MyTasks.jsx
@@ -51,14 +51,14 @@ function mapTaskItem(taskItem) {
   }
 
 function MyTasks(){
-const [cookies] = useCookies(['userInfo'])
-const userId = cookies.userInfo.accountId
-const isAdmin =cookies.userInfo.role ==='admin';
+    const [cookies] = useCookies(['userInfo'])
+    const userId = cookies.userInfo.accountId
+    const isAdmin =cookies.userInfo.role ==='admin';
 
-const [tasksToDo, setTasksToDo ] = useState([]);
-const [loading, setLoading] = useState(true);
+    const [tasksToDo, setTasksToDo ] = useState([]);
+    const [loading, setLoading] = useState(true);
 
-async function fetchData(){
+    async function fetchData(){
     try{
         const results = await getAssignedTasks(userId);
         console.log("API Results:", results);
@@ -136,45 +136,49 @@ const headerAndAccessorsComplete = [
 if(loading){
     return (<div>Loading...</div>)
 }
-const tasksToDoData = setUpData(tasksToDo);
-const tasksCompletedData = setUpDataCompleted(tasksToDo);
-return (
-
-    <div className='pageContainer'>
-        <Header/>
-        <div className='pageBody'>
-        <div class="content-wrapper flexbox">
-                
-                <h1>My Tasks</h1>
-                <span class ="taskBox">
-                {tasksToDoData.length > 0 ? (
-                    <TaskList
-                    dataToUse={tasksToDoData}
-                    headersAndAccessors={headerAndAccessors}
-                    />
-                ) : (
-                    <p>No tasks to do</p>
-                )}
-                    
-
-                </span>
-                <a href="/create-task"><button className="create-task-btn">Create Task</button></a>
-                
-                <h2>My Completed Tasks</h2>
-                {tasksCompletedData.length > 0 ? (
-                    <TaskList
-                    dataToUse={tasksCompletedData}
-                    headersAndAccessors={headerAndAccessorsComplete}
-                    />
-                ) : (
-                    <h2>No tasks completed</h2>
-                )}
-                
-                
-                
+    const tasksToDoData = setUpData(tasksToDo);
+    const tasksCompletedData = setUpDataCompleted(tasksToDo);
+    return (
+        <div className='pageContainer'>
+            <Header/>
+            <div className='pageBody'>
+                <div class="content-wrapper flexbox">                    
+                    <div className="column-box">
+                        <div className="my-tasks-row">
+                            <h1>My Tasks</h1>
+                            <a href="/create-task"><button className="create-task-btn">Create Task</button></a>
+                        </div>
+                        <div className="section-divider"></div>
+
+                        <div className ="taskBox">
+                        {tasksToDoData.length > 0 ? (
+                            <TaskList
+                            dataToUse={tasksToDoData}
+                            headersAndAccessors={headerAndAccessors}
+                            />
+                        ) : (
+                            <p>No tasks to do</p>
+                        )} 
+                        </div>
+                    </div>
+                        
+                    <div className="column-box">
+                        <h2>My Completed Tasks</h2>
+                        <div className="section-divider"></div>
+                        <div className ="taskBox">
+                            {tasksCompletedData.length > 0 ? (
+                                <TaskList
+                                dataToUse={tasksCompletedData}
+                                headersAndAccessors={headerAndAccessorsComplete}
+                                />
+                            ) : (
+                                <h2>No tasks completed</h2>
+                                )}
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
-        </div>
-    </div>
     );