diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index e82cfa8..e3b7829 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -14,21 +14,23 @@ import IconSideNav from './components/IconSideNav'; // Import IconSideNav
 const App = () => {
     return (
         <BrowserRouter>
-            <div className="App">
+        <div className='display: flex'>
+                <IconSideNav />
+                <div className='flex-1'>
                 <NavBar />
-                <Routes>
-                    <Route path="/" element={<Home />} />
-                    <Route path="/login" element={<LoginPage />} />
-                    <Route path="/signup" element={<SignUpPage />} />
-                    <Route path="/testAuth" element={<TestAuth />} />
-                    <Route path="/update_profile" element={<ProfileUpdate />} />
-                    <Route path="/calendar" element={<Calendar />} />
-                </Routes>
+                <div className='flex items-center justify-center'>
+                    <Routes>
+                        <Route path="/" element={<Home />} />
+                        <Route path="/tasks" element={<KanbanBoard />} />
+                        <Route path="/login" element={<LoginPage />} />
+                        <Route path="/signup" element={<SignUpPage />} />
+                        <Route path="/testAuth" element={<TestAuth />} />
+                        <Route path="/update_profile" element={<ProfileUpdate />} />
+                        <Route path="/calendar" element={<Calendar />} />
+                    </Routes>
+                    </div>
+                </div>
             </div>
-            <div>
-                <IconSideNav /> {<KanbanBoard />}
-            </div>
-
         </BrowserRouter>
     );
 }
diff --git a/frontend/src/components/IconSideNav.jsx b/frontend/src/components/IconSideNav.jsx
index 672c99a..a6e7f79 100644
--- a/frontend/src/components/IconSideNav.jsx
+++ b/frontend/src/components/IconSideNav.jsx
@@ -18,7 +18,6 @@ const IconSideNav = () => {
   return (
     <div className="bg-slate-900 text-slate-100 flex">
       <SideNav />
-      <div className="w-full"></div>
     </div>
   );
 };
@@ -27,7 +26,7 @@ const SideNav = () => {
   const [selected, setSelected] = useState(0);
 
   return (
-    <nav className="h-[500px] w-fit bg-slate-950 p-4 flex flex-col items-center gap-2">
+    <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-screen">
       {menuItems.map((item) => (
         <NavItem
           key={item.id}
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 600a702..1ec76b5 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -119,12 +119,10 @@ function KanbanBoard() {
       className="
         m-auto
         flex
-        min-h-screen
         w-full
         items-center
         overflow-x-auto
         overflow-y-hidden
-        px-[40px]
     "
     >
       <DndContext