diff --git a/frontend/src/Components/DashBoard/PomodoroTimer.jsx b/frontend/src/Components/DashBoard/PomodoroTimer.jsx
index a5961af..9e0461b 100644
--- a/frontend/src/Components/DashBoard/PomodoroTimer.jsx
+++ b/frontend/src/Components/DashBoard/PomodoroTimer.jsx
@@ -1,7 +1,8 @@
 import { useContext } from "react";
-import ThemeContext from "../ui/theme-provider.jsx"; 
+import ThemeContext from "../ui/theme-provider.jsx";
 import { useTimer } from "../../context/TimerContext.jsx";
-import Topbar from './Topbar';
+import Topbar from "./Topbar";
+import Sidebar from "./Sidebar"; // ✅ Added Sidebar
 
 // Circular Timer Component
 function CircularTimer({ value, max, label, size = 140, isDarkMode }) {
@@ -16,7 +17,14 @@ function CircularTimer({ value, max, label, size = 140, isDarkMode }) {
   return (
     <div style={{ width: size, height: size, position: "relative" }}>
       <svg width={size} height={size}>
-        <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={palette.track} strokeWidth="10" />
+        <circle
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          stroke={palette.track}
+          strokeWidth="10"
+        />
         <circle
           cx={size / 2}
           cy={size / 2}
@@ -41,13 +49,30 @@ function CircularTimer({ value, max, label, size = 140, isDarkMode }) {
           flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
-          pointerEvents: "none"
+          pointerEvents: "none",
         }}
       >
-        <span style={{ fontSize: 32, color: palette.text, fontWeight: 700, fontFamily: "'Roboto Mono', monospace", letterSpacing: 2 }}>
+        <span
+          style={{
+            fontSize: 32,
+            color: palette.text,
+            fontWeight: 700,
+            fontFamily: "'Roboto Mono', monospace",
+            letterSpacing: 2,
+          }}
+        >
           {String(value).padStart(2, "0")}
         </span>
-        <span style={{ fontSize: 15, color: palette.label, marginTop: 7, textTransform: "uppercase", letterSpacing: 1.5, fontFamily: "'Roboto', sans-serif" }}>
+        <span
+          style={{
+            fontSize: 15,
+            color: palette.label,
+            marginTop: 7,
+            textTransform: "uppercase",
+            letterSpacing: 1.5,
+            fontFamily: "'Roboto', sans-serif",
+          }}
+        >
           {label}
         </span>
       </div>
@@ -59,7 +84,7 @@ function CircularTimer({ value, max, label, size = 140, isDarkMode }) {
 const sessionLabels = {
   work: "Focus Time 💻",
   shortBreak: "Short Break ☕",
-  longBreak: "Long Break 🚶‍♂️"
+  longBreak: "Long Break 🚶‍♂️",
 };
 
 export default function PomodoroTimer() {
@@ -69,68 +94,176 @@ export default function PomodoroTimer() {
   const {
     timeLeft,
     isRunning,
-    sessionType, 
+    sessionType,
     sessions,
-    startTimer, 
-    pauseTimer, 
-    resetTimer, 
+    startTimer,
+    pauseTimer,
+    resetTimer,
     workTime,
     shortBreak,
     longBreak,
     updateWorkTime,
     updateShortBreak,
     updateLongBreak,
-    SESSIONS_BEFORE_LONG_BREAK
+    SESSIONS_BEFORE_LONG_BREAK,
   } = useTimer();
 
   const minutes = Math.floor(timeLeft / 60);
   const seconds = timeLeft % 60;
 
   return (
-    <div className={`min-h-screen flex flex-col transition-colors duration-500 ${isDarkMode ? "bg-[#232b34] text-white" : "bg-gradient-to-br from-blue-100 to-white text-black"}`}>
-      <Topbar/>
-      <div className="flex flex-col items-center justify-center flex-1 px-4 py-6">
-        <h1 className="text-3xl md:text-4xl font-bold mb-10">
-          {sessionLabels[sessionType]}
-        </h1>
+    <div
+      className={`flex flex-col h-screen transition-colors duration-500 ${
+        isDarkMode
+          ? "bg-[#232b34] text-white"
+          : "bg-gradient-to-br from-blue-100 to-white text-black"
+      }`}
+    >
+      <Topbar />
+      <div className="flex flex-1 overflow-hidden">
+        {/* ✅ Sidebar added (same as Dashboard) */}
+        <Sidebar />
 
-        <div style={{ display: "flex", alignItems: "center", gap: "54px", marginBottom: "36px", justifyContent: "center" }}>
-          <CircularTimer value={minutes} max={59} label="MINUTES" size={140} isDarkMode={isDarkMode} />
-          <span style={{ fontSize: "44px", fontWeight: "700", color: isDarkMode ? "#d5dae0" : "#232b34", textShadow: isDarkMode ? "0 0 8px #232b34" : "0 0 5px #dde", margin: "0 8px", minWidth: "22px", letterSpacing: 2, opacity: 0.8, userSelect: "none" }}>:</span>
-          <CircularTimer value={seconds} max={59} label="SECONDS" size={140} isDarkMode={isDarkMode} />
-        </div>
+        {/* Main Pomodoro Area */}
+        <div className="flex-1 flex flex-col items-center justify-center overflow-y-auto px-4 py-6">
+          <h1 className="text-3xl md:text-4xl font-bold mb-10">
+            {sessionLabels[sessionType]}
+          </h1>
 
-        <div className="flex flex-col md:flex-row gap-6 mb-8 w-full max-w-xl justify-center p-6 rounded-xl shadow-lg transition-colors duration-500">
-          {[
-            { label: "Work", value: Math.floor(workTime / 60), onChange: e => updateWorkTime(Number(e.target.value)) },
-            { label: "Short Break", value: Math.floor(shortBreak / 60), onChange: e => updateShortBreak(Number(e.target.value)) },
-            { label: "Long Break", value: Math.floor(longBreak / 60), onChange: e => updateLongBreak(Number(e.target.value)) }
-          ].map(input => (
-            <div key={input.label} className="flex flex-col items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner w-28 transition-colors duration-300">
-              <label className="text-sm mb-2 text-gray-800 dark:text-gray-200 font-medium">{input.label} (min)</label>
-              <input type="number" min="1" value={input.value} onChange={input.onChange} className="w-full text-center px-2 py-1 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all duration-300 text-black dark:text-white" />
-            </div>
-          ))}
-        </div>
+          {/* Circular Timer */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "54px",
+              marginBottom: "36px",
+              justifyContent: "center",
+            }}
+          >
+            <CircularTimer
+              value={minutes}
+              max={59}
+              label="MINUTES"
+              size={140}
+              isDarkMode={isDarkMode}
+            />
+            <span
+              style={{
+                fontSize: "44px",
+                fontWeight: "700",
+                color: isDarkMode ? "#d5dae0" : "#232b34",
+                textShadow: isDarkMode ? "0 0 8px #232b34" : "0 0 5px #dde",
+                margin: "0 8px",
+                minWidth: "22px",
+                letterSpacing: 2,
+                opacity: 0.8,
+                userSelect: "none",
+              }}
+            >
+              :
+            </span>
+            <CircularTimer
+              value={seconds}
+              max={59}
+              label="SECONDS"
+              size={140}
+              isDarkMode={isDarkMode}
+            />
+          </div>
 
-        <div className="flex gap-4 mb-8">
-          {!isRunning ? (
-            <button onClick={startTimer} className={`px-6 py-2 rounded-full font-semibold shadow-lg transform transition-transform hover:scale-105 ${isDarkMode ? "bg-blue-600 hover:bg-blue-700" : "bg-blue-400 hover:bg-blue-500 text-black"}`}>Start</button>
-          ) : (
-            <button onClick={pauseTimer} className={`px-6 py-2 rounded-full font-semibold shadow-lg transform transition-transform hover:scale-105 bg-yellow-500 hover:bg-yellow-600 text-black`}>Pause</button>
-          )}
-          <button onClick={resetTimer} className={`px-6 py-2 rounded-full font-semibold shadow-lg transform transition-transform hover:scale-105 bg-red-600 hover:bg-red-700 text-white`}>Reset</button>
-        </div>
+          {/* Session Settings */}
+          <div className="flex flex-col md:flex-row gap-6 mb-8 w-full max-w-xl justify-center p-6 rounded-xl shadow-lg transition-colors duration-500">
+            {[
+              {
+                label: "Work",
+                value: Math.floor(workTime / 60),
+                onChange: (e) => updateWorkTime(Number(e.target.value)),
+              },
+              {
+                label: "Short Break",
+                value: Math.floor(shortBreak / 60),
+                onChange: (e) => updateShortBreak(Number(e.target.value)),
+              },
+              {
+                label: "Long Break",
+                value: Math.floor(longBreak / 60),
+                onChange: (e) => updateLongBreak(Number(e.target.value)),
+              },
+            ].map((input) => (
+              <div
+                key={input.label}
+                className="flex flex-col items-center bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner w-28 transition-colors duration-300"
+              >
+                <label className="text-sm mb-2 text-gray-800 dark:text-gray-200 font-medium">
+                  {input.label} (min)
+                </label>
+                <input
+                  type="number"
+                  min="1"
+                  value={input.value}
+                  onChange={input.onChange}
+                  className="w-full text-center px-2 py-1 rounded-md border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 transition-all duration-300 text-black dark:text-white"
+                />
+              </div>
+            ))}
+          </div>
 
-        <div className="flex gap-2 mb-4">
-          {[...Array(SESSIONS_BEFORE_LONG_BREAK)].map((_, i) => (
-            <div key={i} className={`w-5 h-5 rounded-full transition-colors duration-500 ${i < sessions ? "bg-green-400" : isDarkMode ? "bg-gray-600" : "bg-gray-400"}`} />
-          ))}
+          {/* Control Buttons */}
+          <div className="flex gap-4 mb-8">
+            {!isRunning ? (
+              <button
+                onClick={startTimer}
+                className={`px-6 py-2 rounded-full font-semibold shadow-lg transform transition-transform hover:scale-105 ${
+                  isDarkMode
+                    ? "bg-blue-600 hover:bg-blue-700"
+                    : "bg-blue-400 hover:bg-blue-500 text-black"
+                }`}
+              >
+                Start
+              </button>
+            ) : (
+              <button
+                onClick={pauseTimer}
+                className="px-6 py-2 rounded-full font-semibold shadow-lg transform transition-transform hover:scale-105 bg-yellow-500 hover:bg-yellow-600 text-black"
+              >
+                Pause
+              </button>
+            )}
+            <button
+              onClick={resetTimer}
+              className="px-6 py-2 rounded-full font-semibold shadow-lg transform transition-transform hover:scale-105 bg-red-600 hover:bg-red-700 text-white"
+            >
+              Reset
+            </button>
+          </div>
+
+          {/* Session Dots */}
+          <div className="flex gap-2 mb-4">
+            {[...Array(SESSIONS_BEFORE_LONG_BREAK)].map((_, i) => (
+              <div
+                key={i}
+                className={`w-5 h-5 rounded-full transition-colors duration-500 ${
+                  i < sessions
+                    ? "bg-green-400"
+                    : isDarkMode
+                    ? "bg-gray-600"
+                    : "bg-gray-400"
+                }`}
+              />
+            ))}
+          </div>
+
+          <p
+            className={`text-sm ${
+              isDarkMode ? "text-gray-300" : "text-gray-700"
+            } transition-colors duration-500`}
+          >
+            {sessionType === "work"
+              ? `Session ${sessions + 1} of ${SESSIONS_BEFORE_LONG_BREAK}`
+              : "Break Time"}
+          </p>
         </div>
-        <p className={`text-sm ${isDarkMode ? "text-gray-300" : "text-gray-700"} transition-colors duration-500`}>
-          {sessionType === 'work' ? `Session ${sessions + 1} of ${SESSIONS_BEFORE_LONG_BREAK}` : "Break Time"}
-        </p>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/Components/DashBoard/Todo.jsx b/frontend/src/Components/DashBoard/Todo.jsx
index 0ea261c..c8cff2d 100644
--- a/frontend/src/Components/DashBoard/Todo.jsx
+++ b/frontend/src/Components/DashBoard/Todo.jsx
@@ -2,6 +2,8 @@ import React, { useEffect, useMemo, useState } from "react";
 import Topbar from "./Topbar";
 import BackButton from "../ui/backbutton";
 import { Plus, Pencil, Trash2, CheckCircle2, Circle, Filter } from "lucide-react";
+import Sidebar from "./Sidebar"; // ✅ Add this after Topbar import
+
 
 // Mock-only UI for GSSOC To-Do page. Uses local state; backend wiring will follow.
 export default function Todo() {
@@ -214,121 +216,199 @@ export default function Todo() {
   }
 
   return (
-    <div className="flex flex-col h-screen">
+    <div className="flex flex-col flex-1">
+      {" "}
       <Topbar />
-      <main className="flex-1 p-6 bg-[#d1e4f3] dark:bg-gray-900">
-        <div className="max-w-full mx-auto space-y-6">
-          <div className="flex items-center gap-3">
-            <BackButton to="/dashboard" />
-            <h2 className="text-2xl font-bold text-[var(--card-foreground)] dark:text-gray-100">To-Do List</h2>
-            <div className="flex items-center gap-2 ml-auto">
-              <div className="relative">
-                <select value={filter} onChange={(e)=>setFilter(e.target.value)} className="appearance-none pr-8 pl-3 py-2 rounded-lg bg-[var(--card)] dark:bg-gray-800 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-700">
-                  <option value="all">All</option>
-                  <option value="upcoming">Upcoming deadlines</option>
-                  <option value="completed">Completed</option>
-                </select>
-                <Filter className="w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] dark:text-gray-400" />
+      <div className="flex min-h-screen bg-[#d1e4f3] dark:bg-gray-900">
+        {" "}
+        <Sidebar /> {/* sidebar stays left */}
+        <main className="flex-1 p-6 bg-[#d1e4f3] dark:bg-gray-900">
+          <div className="max-w-full mx-auto space-y-6">
+            <div className="flex items-center gap-3">
+              <BackButton to="/dashboard" />
+              <h2 className="text-2xl font-bold text-[var(--card-foreground)] dark:text-gray-100">
+                To-Do List
+              </h2>
+              <div className="flex items-center gap-2 ml-auto">
+                <div className="relative">
+                  <select
+                    value={filter}
+                    onChange={(e) => setFilter(e.target.value)}
+                    className="appearance-none pr-8 pl-3 py-2 rounded-lg bg-[var(--card)] dark:bg-gray-800 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-700"
+                  >
+                    <option value="all">All</option>
+                    <option value="upcoming">Upcoming deadlines</option>
+                    <option value="completed">Completed</option>
+                  </select>
+                  <Filter className="w-4 h-4 absolute right-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)] dark:text-gray-400" />
+                </div>
+                <button
+                  type="button"
+                  onClick={openAddModal}
+                  className="px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] flex items-center gap-2 hover:opacity-90"
+                >
+                  <Plus className="w-4 h-4" />
+                  Add
+                </button>
               </div>
-              <button type="button" onClick={openAddModal} className="px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)] flex items-center gap-2 hover:opacity-90">
-                <Plus className="w-4 h-4" />
-                Add
-              </button>
             </div>
-          </div>
 
-          {/* Add / Edit Modal */}
-          {showModal && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
-              <div className="w-full max-w-lg p-5 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-xl">
-                <div className="flex items-center justify-between">
-                  <h3 className="text-xl font-semibold text-[var(--card-foreground)] dark:text-gray-100">{editingId ? "Edit Task" : "Add Task"}</h3>
-                  <button onClick={() => { setShowModal(false); resetForm(); }} className="px-2 py-1 rounded-md hover:bg-[var(--accent)] dark:hover:bg-gray-700/50 text-[var(--card-foreground)] dark:text-gray-100">✕</button>
-                </div>
-                <form onSubmit={handleSubmitModal} className="mt-4 grid grid-cols-1 gap-3">
-                  <input value={modalData.title} onChange={(e)=>setModalData({ ...modalData, title: e.target.value })} placeholder="Title" className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600" />
-                  <textarea value={modalData.description} onChange={(e)=>setModalData({ ...modalData, description: e.target.value })} placeholder="Description" className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600" rows="3" />
-                  <div className="grid grid-cols-2 gap-3">
-                    <select value={modalData.status} onChange={(e)=>setModalData({ ...modalData, status: e.target.value })} className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600">
-                      <option value="pending">Pending</option>
-                      <option value="completed">Completed</option>
-                    </select>
-                    <input type="datetime-local" value={modalData.deadline} onChange={(e)=>setModalData({ ...modalData, deadline: e.target.value })} className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600" />
-                  </div>
-                  <div className="flex items-center justify-end gap-2 mt-2">
-                    <button type="button" onClick={() => { setShowModal(false); resetForm(); }} className="px-4 py-2 rounded-lg border border-[var(--input)] dark:border-gray-600 text-[var(--card-foreground)] dark:text-gray-100 hover:bg-[var(--accent)] dark:hover:bg-gray-700/50">Cancel</button>
-                    <button type="submit" className="px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)]">
-                      {editingId ? "Save Changes" : "Add Task"}
+            {/* Add / Edit Modal */}
+            {showModal && (
+              <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40">
+                <div className="w-full max-w-lg p-5 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-xl">
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-xl font-semibold text-[var(--card-foreground)] dark:text-gray-100">
+                      {editingId ? "Edit Task" : "Add Task"}
+                    </h3>
+                    <button
+                      onClick={() => {
+                        setShowModal(false);
+                        resetForm();
+                      }}
+                      className="px-2 py-1 rounded-md hover:bg-[var(--accent)] dark:hover:bg-gray-700/50 text-[var(--card-foreground)] dark:text-gray-100"
+                    >
+                      ✕
                     </button>
                   </div>
-                </form>
+                  <form
+                    onSubmit={handleSubmitModal}
+                    className="mt-4 grid grid-cols-1 gap-3"
+                  >
+                    <input
+                      value={modalData.title}
+                      onChange={(e) =>
+                        setModalData({ ...modalData, title: e.target.value })
+                      }
+                      placeholder="Title"
+                      className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600"
+                    />
+                    <textarea
+                      value={modalData.description}
+                      onChange={(e) =>
+                        setModalData({
+                          ...modalData,
+                          description: e.target.value,
+                        })
+                      }
+                      placeholder="Description"
+                      className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600"
+                      rows="3"
+                    />
+                    <div className="grid grid-cols-2 gap-3">
+                      <select
+                        value={modalData.status}
+                        onChange={(e) =>
+                          setModalData({ ...modalData, status: e.target.value })
+                        }
+                        className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600"
+                      >
+                        <option value="pending">Pending</option>
+                        <option value="completed">Completed</option>
+                      </select>
+                      <input
+                        type="datetime-local"
+                        value={modalData.deadline}
+                        onChange={(e) =>
+                          setModalData({
+                            ...modalData,
+                            deadline: e.target.value,
+                          })
+                        }
+                        className="px-3 py-2 rounded-lg bg-[var(--background)] dark:bg-gray-900 text-[var(--card-foreground)] dark:text-gray-100 border border-[var(--input)] dark:border-gray-600"
+                      />
+                    </div>
+                    <div className="flex items-center justify-end gap-2 mt-2">
+                      <button
+                        type="button"
+                        onClick={() => {
+                          setShowModal(false);
+                          resetForm();
+                        }}
+                        className="px-4 py-2 rounded-lg border border-[var(--input)] dark:border-gray-600 text-[var(--card-foreground)] dark:text-gray-100 hover:bg-[var(--accent)] dark:hover:bg-gray-700/50"
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        type="submit"
+                        className="px-4 py-2 rounded-lg bg-[var(--primary)] text-[var(--primary-foreground)]"
+                      >
+                        {editingId ? "Save Changes" : "Add Task"}
+                      </button>
+                    </div>
+                  </form>
+                </div>
               </div>
-            </div>
-          )}
-
-          {/* Content */}
-         <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
-    <div className="lg:col-span-2 space-y-4">
-      
-      {/* --- Pending Tasks Section --- */}
-      {/* Only show this section if filter is 'all' OR 'upcoming' */}
-      {(filter === 'all' || filter === 'upcoming') && (
-        <div className="p-4 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-sm">
-          <h3 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-gray-100 mb-3">
-            Pending
-          </h3>
-          <div className="space-y-3">
-            {/* Inner check: Show tasks or "No tasks" message */}
-            {filtered(pendingTasks).length === 0 ? (
-              <p className="text-sm text-[var(--muted-foreground)] dark:text-gray-400">
-                No pending tasks yet.
-              </p>
-            ) : (
-              filtered(pendingTasks).map(task => <TaskCard key={task._id || task.id} task={task} />)
             )}
-          </div>
-        </div>
-      )}
 
-      {/* --- Completed Tasks Section --- */}
-      {/* Only show this section if filter is 'all' OR 'completed' */}
-      {(filter === 'all' || filter === 'completed') && (
-        <div className="p-4 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-sm">
-          <h3 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-gray-100 mb-3">
-            Completed
-          </h3>
-          <div className="space-y-3">
-            {/* Inner check: Show tasks or "No tasks" message */}
-            {filtered(completedTasks).length === 0 ? (
-              <p className="text-sm text-[var(--muted-foreground)] dark:text-gray-400">
-                No completed tasks yet.
-              </p>
-            ) : (
-              filtered(completedTasks).map(task => <TaskCard key={task._id || task.id} task={task} />)
-            )}
-          </div>
-        </div>
-      )}
+            {/* Content */}
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+              <div className="lg:col-span-2 space-y-4">
+                {/* --- Pending Tasks Section --- */}
+                {/* Only show this section if filter is 'all' OR 'upcoming' */}
+                {(filter === "all" || filter === "upcoming") && (
+                  <div className="p-4 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-sm">
+                    <h3 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-gray-100 mb-3">
+                      Pending
+                    </h3>
+                    <div className="space-y-3">
+                      {/* Inner check: Show tasks or "No tasks" message */}
+                      {filtered(pendingTasks).length === 0 ? (
+                        <p className="text-sm text-[var(--muted-foreground)] dark:text-gray-400">
+                          No pending tasks yet.
+                        </p>
+                      ) : (
+                        filtered(pendingTasks).map((task) => (
+                          <TaskCard key={task._id || task.id} task={task} />
+                        ))
+                      )}
+                    </div>
+                  </div>
+                )}
 
-    </div>
+                {/* --- Completed Tasks Section --- */}
+                {/* Only show this section if filter is 'all' OR 'completed' */}
+                {(filter === "all" || filter === "completed") && (
+                  <div className="p-4 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-sm">
+                    <h3 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-gray-100 mb-3">
+                      Completed
+                    </h3>
+                    <div className="space-y-3">
+                      {/* Inner check: Show tasks or "No tasks" message */}
+                      {filtered(completedTasks).length === 0 ? (
+                        <p className="text-sm text-[var(--muted-foreground)] dark:text-gray-400">
+                          No completed tasks yet.
+                        </p>
+                      ) : (
+                        filtered(completedTasks).map((task) => (
+                          <TaskCard key={task._id || task.id} task={task} />
+                        ))
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
 
-    {/* Right column widgets */}
-    <div className="space-y-4">
-      {/* Move Quick Tips to top for visibility */}
-      <div className="p-4 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-sm">
-        <h3 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-gray-100">Quick Tips</h3>
-        <ul className="mt-2 list-disc list-inside text-sm text-[var(--muted-foreground)] dark:text-gray-400 space-y-1">
-          <li>Use deadlines to prioritize tasks.</li>
-          <li>Break big goals into smaller, actionable items.</li>
-          <li>Mark tasks done to track your streaks.</li>
-        </ul>
+              {/* Right column widgets */}
+              <div className="space-y-4">
+                {/* Move Quick Tips to top for visibility */}
+                <div className="p-4 rounded-xl bg-[var(--card)] dark:bg-gray-800 border border-[var(--border)] dark:border-gray-700 shadow-sm">
+                  <h3 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-gray-100">
+                    Quick Tips
+                  </h3>
+                  <ul className="mt-2 list-disc list-inside text-sm text-[var(--muted-foreground)] dark:text-gray-400 space-y-1">
+                    <li>Use deadlines to prioritize tasks.</li>
+                    <li>Break big goals into smaller, actionable items.</li>
+                    <li>Mark tasks done to track your streaks.</li>
+                  </ul>
+                </div>
+                <GoalProgress />
+                <WeeklyGoals />
+              </div>
+            </div>
+          </div>
+        </main>
       </div>
-      <GoalProgress />
-      <WeeklyGoals />
-    </div>
-  </div>
-        </div>
-      </main>
     </div>
   );
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..cdbc3db
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "DevSync",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}