diff --git a/package-lock.json b/package-lock.json
index 662899b..fa5ae24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@material/typography": "^14.0.0",
         "@mui/material": "^5.14.19",
         "@reduxjs/toolkit": "^1.9.7",
+        "@remix-run/router": "^1.13.1",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -24,6 +25,7 @@
         "react-redux": "^8.1.3",
         "react-router-dom": "^6.20.0",
         "react-scripts": "5.0.1",
+        "tailwindcss-animate": "^1.0.7",
         "tailwindcss-animated": "^1.0.1",
         "uuid": "^9.0.1",
         "web-vitals": "^2.1.4"
@@ -3771,9 +3773,9 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
-      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q==",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -15545,6 +15547,22 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-router-dom/node_modules/@remix-run/router": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/react-router/node_modules/@remix-run/router": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -17179,6 +17197,14 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders"
+      }
+    },
     "node_modules/tailwindcss-animated": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.0.1.tgz",
@@ -21288,9 +21314,9 @@
       }
     },
     "@remix-run/router": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
-      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA=="
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.1.tgz",
+      "integrity": "sha512-so+DHzZKsoOcoXrILB4rqDkMDy7NLMErRdOxvzvOKb507YINKUP4Di+shbTZDhSE/pBZ+vr7XGIpcOO0VLSA+Q=="
     },
     "@restart/hooks": {
       "version": "0.4.11",
@@ -29677,6 +29703,13 @@
       "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
       "requires": {
         "@remix-run/router": "1.13.0"
+      },
+      "dependencies": {
+        "@remix-run/router": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+          "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA=="
+        }
       }
     },
     "react-router-dom": {
@@ -29686,6 +29719,13 @@
       "requires": {
         "@remix-run/router": "1.13.0",
         "react-router": "6.20.0"
+      },
+      "dependencies": {
+        "@remix-run/router": {
+          "version": "1.13.0",
+          "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
+          "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA=="
+        }
       }
     },
     "react-scripts": {
@@ -30908,6 +30948,12 @@
         "sucrase": "^3.32.0"
       }
     },
+    "tailwindcss-animate": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
+      "integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
+      "requires": {}
+    },
     "tailwindcss-animated": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.0.1.tgz",
diff --git a/package.json b/package.json
index bd67645..f9b2175 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "@material/typography": "^14.0.0",
     "@mui/material": "^5.14.19",
     "@reduxjs/toolkit": "^1.9.7",
+    "@remix-run/router": "^1.13.1",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -19,6 +20,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.20.0",
     "react-scripts": "5.0.1",
+    "tailwindcss-animate": "^1.0.7",
     "tailwindcss-animated": "^1.0.1",
     "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"
diff --git a/src/components/Column/Column.js b/src/components/Column/Column.js
index d3a88b6..0d51ded 100644
--- a/src/components/Column/Column.js
+++ b/src/components/Column/Column.js
@@ -18,7 +18,7 @@ function Column({ columnName, tasks, taskStatus }) {
   return (
     <>
       <div className="flex flex-col w-5/12 min-w-1/4">
-        <div className="column-title font-bold pt-3 pb-3 text-gray-900 font-fjalla text-xl">
+        <div className="column-title ml-1 font-bold pt-3 pb-3 text-gray-900 font-fjalla text-xl">
           {columnName}
         </div>
         <div className="w-10/12 sm:w-11/12">{columnTasks}</div>
diff --git a/src/components/Dashboard/Dashboard.js b/src/components/Dashboard/Dashboard.js
index 3aab59a..ff5721b 100644
--- a/src/components/Dashboard/Dashboard.js
+++ b/src/components/Dashboard/Dashboard.js
@@ -24,9 +24,12 @@ function Dashboard({ userStatus }) {
   });
 
   return (
-    <div className="flex h-auto">
-      <div className="w-2/12 ml-5 mr-5 mt-3 min-w-max">
-        <div className="dashboard min-w-max p-3 bg-white border border-gray-200 rounded-lg shadow-sm">
+    <div className="flex h-auto ">
+      <div className="w-2/12 ml-5 mr-5 min-w-max">
+        <div
+          className="dashboard min-w-max p-3 bg-white border border-gray-200 rounded-lg shadow-sm"
+          style={{ maxHeight: "545px", overflowY: "auto" }}
+        >
           <div className="projects font-bold text-gray-900 border-b pb-1 mb-1 font-fjalla text-xl">
             Projects
           </div>
diff --git a/src/components/FileUpload/FileUpload.js b/src/components/FileUpload/FileUpload.js
index c7b8f59..11cc581 100644
--- a/src/components/FileUpload/FileUpload.js
+++ b/src/components/FileUpload/FileUpload.js
@@ -74,14 +74,14 @@ function FileUpload() {
   };
 
   return (
-    <div className="flex mt-4 mb-4">
+    <div className="flex flex-col mt-4 mb-4">
+      <label
+        htmlFor="formFile"
+        className="form-label font-bold text-gray-900 border-b pb-1 mb-2 font-fjalla text-xl"
+      >
+        Files
+      </label>
       <div className="min-w-max p-3 bg-white border border-gray-200 rounded-lg shadow-sm">
-        <label
-          htmlFor="formFile"
-          className="form-label font-bold text-gray-900 border-b pb-1 mb-2 font-fjalla text-xl"
-        >
-          Files
-        </label>
         <div className="upload-file flex">
           <input
             className="form-control"
diff --git a/src/components/ProjectBoard/ProjectBoard.js b/src/components/ProjectBoard/ProjectBoard.js
index 7b7b00e..b1f363a 100644
--- a/src/components/ProjectBoard/ProjectBoard.js
+++ b/src/components/ProjectBoard/ProjectBoard.js
@@ -21,20 +21,23 @@ function ProjectBoard() {
 
   return (
     <>
-      <div className="flex flex-col w-auto h-auto mb-4">
+      <div className="flex flex-col w-auto h-auto">
         {selectedProject ? (
-          <div className="flex justify-between w-10/12 pl-1 pr-2 font-fjalla text-3xl text-purple-600 mb-2">
-            {project.title}
-            <div className="text-gray-900 self-end text-xl italic">
+          <div className="flex justify-between pl-1 pr-2 font-fjalla text-2xl text-purple-600 mb-1">
+            {selectedProject.title}
+            {/* <div className="text-gray-900 self-end text-xl">
               Project Board
-            </div>
+            </div> */}
           </div>
         ) : (
-          <div className="flex justify-center w-9/12 font-fjalla text-2xl text-purple-700 mb-4 animate-pulse animate-infinite animate-ease-out">
+          <div className="flex justify-center w-9/12 font-fjalla text-2xl text-purple-700 mb-1">
             No project selected
           </div>
         )}
-        <div className="project-board flex h-3/4 w-10/12 border border-gray-200 rounded-lg bg-white shadow-sm pl-5">
+        <div
+          className="flex h-3/4 w-10/12 border border-gray-200 rounded-lg bg-white shadow-sm"
+          style={{ maxHeight: "545px", overflowY: "auto" }}
+        >
           <Column
             columnName="Backlog"
             tasks={backlogTasks}
diff --git a/src/components/Task/Task.js b/src/components/Task/Task.js
index 9d05a35..7f48dc5 100644
--- a/src/components/Task/Task.js
+++ b/src/components/Task/Task.js
@@ -3,7 +3,7 @@ import EditTask from "../EditTask/EditTask";
 function Task({ title, id, description, status, priority }) {
   return (
     <>
-      <div className="task flex justify-between rounded-md border border-gray-200 p-3 shadow-sm mb-3 h-max">
+      <div className="task flex justify-between rounded-md border border-gray-200 p-3 shadow-sm mb-3 h-max m-1">
         <div className="flex flex-col">
         <div className="task-title">{title}</div>
         <div className="task-description font-light text-sm mb-2">{description}</div>
diff --git a/src/components/WhiteBoard/WhiteBoard.js b/src/components/WhiteBoard/WhiteBoard.js
index 03b25fd..f896c22 100644
--- a/src/components/WhiteBoard/WhiteBoard.js
+++ b/src/components/WhiteBoard/WhiteBoard.js
@@ -1,35 +1,38 @@
-import React, { useEffect } from 'react';
-import createSocket from '../utils/websocket';
+import React, { useEffect } from "react";
+import createSocket from "../utils/websocket";
 
 function WhiteBoard() {
   const socket = createSocket();
-  var isDrawing = false
-  var lastX = 0
-  var lastY = 0
-  var lastSent = 0
-  var context = null
-  var remoteContext = null
-  var remoteLastX = 0
-  var remoteLastY = 0
+  var isDrawing = false;
+  var lastX = 0;
+  var lastY = 0;
+  var lastSent = 0;
+  var context = null;
+  var remoteContext = null;
+  var remoteLastX = 0;
+  var remoteLastY = 0;
 
   function received(data) {
     // console.log("Receiving Message", data)
     const jsonData = JSON.parse(data.data);
     const received_message = jsonData.message;
-    
+
     if (!received_message) {
       // console.error('Invalid data received from the server:', data);
       return;
     }
 
-    if (received_message['state'] === "start" || received_message['state'] === "stop") {
+    if (
+      received_message["state"] === "start" ||
+      received_message["state"] === "stop"
+    ) {
       // console.log("Info data", data)
-      remoteLastX = received_message['x'];
-      remoteLastY = received_message['y'];
+      remoteLastX = received_message["x"];
+      remoteLastY = received_message["y"];
       return;
     }
 
-    drawRemoteData(received_message['x'], received_message['y']);
+    drawRemoteData(received_message["x"], received_message["y"]);
   }
 
   function drawRemoteData(x, y) {
@@ -42,30 +45,29 @@ function WhiteBoard() {
     remoteLastX = x;
     remoteLastY = y;
   }
-  
+
   useEffect(() => {
-    const canvas = document.getElementById('canvas');
-    const ctx = canvas.getContext('2d');
+    const canvas = document.getElementById("canvas");
+    const ctx = canvas.getContext("2d");
     // Set up the canvas and event listeners
     context = ctx;
-    remoteContext = canvas.getContext('2d');
-    
-    ctx.fillStyle = 'white';
+    remoteContext = canvas.getContext("2d");
+
+    ctx.fillStyle = "white";
     ctx.fillRect(0, 0, canvas.width, canvas.height);
 
     canvas.addEventListener("mousedown", startDrawing);
     canvas.addEventListener("mouseup", stopDrawing);
     canvas.addEventListener("mousemove", draw);
 
-    socket.addEventListener('message', received);
+    socket.addEventListener("message", received);
 
     return () => {
       canvas.removeEventListener("mousedown", startDrawing);
       canvas.removeEventListener("mouseup", stopDrawing);
       canvas.removeEventListener("mousemove", draw);
-      socket.removeEventListener('message', received);
+      socket.removeEventListener("message", received);
     };
-
   }, [socket]);
 
   function startDrawing(event) {
@@ -94,7 +96,7 @@ function WhiteBoard() {
     console.log("isDrawing:", isDrawing);
     console.log("lastX:", lastX);
     console.log("lastY:", lastY);
-    
+
     // Send the coordinates to the server every 10ms
     // time.now() returns the current time in milliseconds
     if (Date.now() - lastSent > 10) {
@@ -122,25 +124,28 @@ function WhiteBoard() {
   }
 
   function sendDrawData(x, y, state) {
-
     const message = {
       command: "message",
-      identifier: JSON.stringify({ id: 1, channel: "DrawChannel"}),
-      data: JSON.stringify({action: "draw", x, y, state })
+      identifier: JSON.stringify({ id: 1, channel: "DrawChannel" }),
+      data: JSON.stringify({ action: "draw", x, y, state }),
     };
 
-      const jsonString = JSON.stringify(message);
-      socket.send(jsonString);
+    const jsonString = JSON.stringify(message);
+    socket.send(jsonString);
   }
 
   return (
-    <div className='whiteboard flex flex-col w-10/12 pb-5'>
-    <div className="flex font-fjalla text-gray-900 self-end text-xl italic mb-1 pr-2">
-      WhiteBoard
-    </div>
-      <canvas id="canvas" width="865" height="500" className='rounded-2xl border-8 border-gray-300 shadow-sm'></canvas>
+    <div className="whiteboard flex flex-col w-10/12 pb-5 mt-4">
+      <div className="flex font-fjalla text-gray-900 self-start text-xl border-b w-100 mb-2">
+        WhiteBoard
+      </div>
+      <canvas
+        id="canvas"
+        width="865"
+        height="450"
+        className="rounded-2xl border-gray-200 shadow-sm"
+      ></canvas>
     </div>
   );
-    
 }
-export default WhiteBoard;
\ No newline at end of file
+export default WhiteBoard;