diff --git a/Calculator/cal.css b/Calculator/cal.css
index 25bad49..42733f1 100644
--- a/Calculator/cal.css
+++ b/Calculator/cal.css
@@ -1,64 +1,161 @@
-body{
-    background-image: url(c10.jpg);
-    background-repeat: no-repeat;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background-position: center;
-    background-size: cover;
+/* General body */
+body {
+    font-family: "Segoe UI", Arial, sans-serif;
+    background: #f5f5f5;
+    color: #333;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    height: 100vh;
+    margin: 0;
+    transition: background 0.3s, color 0.3s;
 }
-button{
-    width: 200px;
-    height: 50px;
-    margin: 2px 2px;
-    background-color: blue;
-    color: #fff4a7;
+
+/* Container */
+#outside {
+    background: #ffffff;
+    padding: 30px;
     border-radius: 20px;
-    font-weight: bolder;
-    font-style: italic;
-    font-size: larger;
+    text-align: center;
+    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+    width: 420px;
+    margin-top: 40px;
+    transition: background 0.3s, box-shadow 0.3s;
+}
+
+/* Header */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
-#outside{
-    color: white;
-    border-radius: 5px;
-    margin: auto;
-    margin-top: 100px;
-    width: 1000px;
-    height: 600px;
-    padding: 5px;
+
+/* Heading */
+#heading {
+    font-size: 2rem;
+    color: #ff9800;
 }
-#heading{
-    margin: auto;
-    width: 412px;
-    font-size: xxx-large;
+
+/* Theme toggle */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 26px;
 }
-#btn{
-    margin: auto;
-    margin-top: 20px;
-    width: 815px;
+.switch input { opacity: 0; width: 0; height: 0; }
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    border-radius: 26px;
+    transition: 0.4s;
 }
-.btn-inside{
-    width: 900px;
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 20px; width: 20px;
+    left: 3px; bottom: 3px;
+    background-color: white;
+    border-radius: 50%;
+    transition: 0.4s;
 }
-#val{
-    /* border: 2px solid red; */
-    height: 55px;
-    width: 783px;
-    margin-left: 100px;
-    color: white;
-    padding-left: 37px;
-    padding-top: 20px;
-    font-weight: bolder;
+input:checked + .slider { background-color: #2196f3; }
+input:checked + .slider:before { transform: translateX(24px); }
+
+/* Display */
+#val {
+    width: 100%;
+    height: 70px;
+    font-size: 1.8rem;
+    text-align: right;
+    margin-bottom: 10px;
+    padding: 12px;
+    border-radius: 12px;
+    border: 1px solid #ccc;
+    background: #fff;
+    color: #000;
+    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
+    transition: background 0.3s, color 0.3s;
 }
-#res{
-    /* border: 2px solid red; */
-    height: 50px;
-    width: 783px;
-    margin-left: 100px;
-    color: white;
-    padding-left: 37px;
-    padding-top: 25px;
-    font-weight: bolder;
-    font-size: x-large;
+
+#res {
+    font-size: 1.3rem;
+    margin-bottom: 20px;
+    text-align: right;
+    color: #ff5722;
+    min-height: 20px;
+    transition: color 0.3s;
+}
+
+/* Buttons grid */
+#btn { display: grid; grid-gap: 12px; }
+.btn-inside { display: flex; justify-content: center; gap: 12px; }
+
+/* Buttons - adaptive color */
+button {
+    flex: 1;
+    padding: 18px;
+    font-size: 1.3rem;
+    font-weight: bold;
+    border: none;
+    border-radius: 12px;
+    cursor: pointer;
+    background: #1976d2;
+    color: #fff;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    transition: 0.2s all;
+}
+button:hover { background: #1565c0; transform: scale(1.05); }
+button:active { transform: scale(0.95); }
+
+/* History side panel */
+.history-panel {
+    position: fixed;
+    top: 0; right: -250px;
+    width: 250px;
+    height: 100%;
+    background: #ffffff;
+    border-left: 1px solid #ccc;
+    box-shadow: -4px 0 12px rgba(0,0,0,0.2);
+    padding: 20px;
+    transition: right 0.3s;
+    overflow-y: auto;
+    z-index: 100;
+}
+.history-panel h3 { margin-top: 0; }
+.history-panel ul { padding-left: 0; list-style: none; }
+.history-panel li {
+    padding: 8px 5px;
+    border-bottom: 1px solid #eee;
+    cursor: pointer;
+}
+.history-panel li:hover { background: #f0f0f0; }
+
+/* History button */
+.history-btn {
+    position: fixed;
+    top: 20px; right: 20px;
+    padding: 10px 15px;
+    font-size: 1.2rem;
+    background: #ff9800;
+    color: #fff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    z-index: 101;
+    transition: 0.2s all;
 }
+.history-btn:hover { background: #fb8c00; }
 
+/* Dark mode */
+body.dark { background: #1e1e2f; color: #fff; }
+body.dark #outside { background: #2b2b3c; box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
+body.dark #val { background: #1e1e2f; color: #fff; }
+body.dark #res { color: #b3e5fc; }
+body.dark button { background: #64b5f6; color: #000; }
+body.dark button:hover { background: #42a5f5; }
+body.dark .history-panel { background: #2b2b3c; color: #fff; border-left: 1px solid #555; }
+body.dark .history-panel li:hover { background: #3a3a4d; }
diff --git a/Calculator/cal.html b/Calculator/cal.html
index 84a65f1..c69dd9e 100644
--- a/Calculator/cal.html
+++ b/Calculator/cal.html
@@ -1,54 +1,68 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="cal.css">
-    <title>Calculator</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Calculator</title>
+  <link rel="stylesheet" href="cal.css">
 </head>
-
 <body>
-    <div id="outside">
-        <h1 id="heading">🖩CALCULATOR🖩</h1>
-        <div>
-            <div>
-                <h1 id="val"> </h1>
-            </div>
-            <div>
-                <p id="res"></p>
-            </div>
-            <div id="btn">
-                <div class="btn-inside">
-                    <button onclick="adder('1')">1</button>
-                    <button onclick="adder('2')">2</button>
-                    <button onclick="adder('3')">3</button>
-                    <button onclick="adder('*')">*</button>
-                </div>
-                <div class="btn-inside">
-                    <button onclick="adder('4')">4</button>
-                    <button onclick="adder('5')">5</button>
-                    <button onclick="adder('6')">6</button>
-                    <button onclick="adder('+')">+</button>
-                </div>
-                <div class="btn-inside">
-                    <button onclick="adder('7')">7</button>
-                    <button onclick="adder('8')">8</button>
-                    <button onclick="adder('9')">9</button>
-                    <button onclick="adder('-')">-</button>
-                </div>
-                <div class="btn-inside">
-                    <button onclick="clearer()">C</button>
-                    <button onclick="adder('0')">0</button>
-                    <button onclick="compute(1)">=</button>
-                    <button onclick="adder('/')">/</button>
-                </div>
-                <button onclick="adder('.')">.</button>
-            </div>
-        </div>
+  <div id="outside">
+    <div class="header">
+      <h1 id="heading">🖩 CALCULATOR 🖩</h1>
+      <!-- Theme toggle -->
+      <label class="switch">
+        <input type="checkbox" id="theme-toggle">
+        <span class="slider"></span>
+      </label>
     </div>
-    <script src="cal.js"></script>
-</body>
 
-</html>
\ No newline at end of file
+    <!-- Display -->
+    <input id="val" readonly />
+    <p id="res"></p>
+
+    <!-- Buttons -->
+    <div id="btn">
+      <div class="btn-inside">
+        <button onclick="adder('7')">7</button>
+        <button onclick="adder('8')">8</button>
+        <button onclick="adder('9')">9</button>
+        <button onclick="adder('/')">/</button>
+      </div>
+      <div class="btn-inside">
+        <button onclick="adder('4')">4</button>
+        <button onclick="adder('5')">5</button>
+        <button onclick="adder('6')">6</button>
+        <button onclick="adder('*')">*</button>
+      </div>
+      <div class="btn-inside">
+        <button onclick="adder('1')">1</button>
+        <button onclick="adder('2')">2</button>
+        <button onclick="adder('3')">3</button>
+        <button onclick="adder('-')">-</button>
+      </div>
+      <div class="btn-inside">
+        <button onclick="clearer()">C</button>
+        <button onclick="adder('0')">0</button>
+        <button onclick="computeFinal()">=</button>
+        <button onclick="adder('+')">+</button>
+      </div>
+      <div class="btn-inside">
+        <button onclick="adder('.')">.</button>
+        <button onclick="backspace()">←</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Side History Panel -->
+  <div class="history-panel" id="history-panel">
+    <h3>History</h3>
+    <ul id="history"></ul>
+  </div>
+
+  <!-- History Toggle Button -->
+  <button id="history-toggle" class="history-btn">☰</button>
+
+  <script src="cal.js"></script>
+</body>
+</html>
diff --git a/Calculator/cal.js b/Calculator/cal.js
index 1699f4c..7cb992f 100644
--- a/Calculator/cal.js
+++ b/Calculator/cal.js
@@ -1,42 +1,104 @@
-let valEl = document.getElementById("val")
-let resEl = document.getElementById("res")
-function clearer(){
-    valEl.innerText = ""
-    resEl.innerText = ""
+let valEl = document.getElementById("val");
+let resEl = document.getElementById("res");
+let historyEl = document.getElementById("history");
+let historyPanel = document.getElementById("history-panel");
+let historyToggle = document.getElementById("history-toggle");
+let themeToggle = document.getElementById("theme-toggle");
+
+// Load history from localStorage
+let calcHistory = JSON.parse(localStorage.getItem("calcHistory") || "[]");
+updateHistory();
+
+// ------------------ Calculator Functions ------------------
+
+// Clear display
+function clearer() {
+    valEl.value = "";
+    resEl.innerText = "";
 }
-function adder(k){
-    valEl.innerText += k
-    if(k=='*' || k=='+' || k=='-' || k=='/'){
-        compute(0)
+
+// Add number/operator
+function adder(k) {
+    let lastChar = valEl.value.slice(-1);
+    if ("+-*/".includes(k) && "+-*/".includes(lastChar)) {
+        valEl.value = valEl.value.slice(0, -1) + k;
+    } else {
+        valEl.value += k;
     }
 }
-function compute(is){
-    let temp = valEl.innerText, i
-    let t = temp[temp.length-1];
-    for(i=0;i<temp.length-1;i++){
-        if((temp[i]=='*' || temp[i]=='+' || temp[i]=='-' || temp[i]=='/') && i!=0){
-            break;
+
+// Backspace
+function backspace() {
+    valEl.value = valEl.value.slice(0, -1);
+}
+
+// Compute expression
+function computeFinal() {
+    try {
+        let expr = valEl.value;
+        if (!/^[0-9+\-*/.() ]+$/.test(expr)) {
+            resEl.innerText = "Invalid Input";
+            return;
         }
-    }
-    if(i!=temp.length-1){
-        let part1 = parseFloat(temp.substring(0,i));
-        let part2 = parseFloat(temp.substring(i+1));
-        let k5 = temp[i];
-        if(k5=='+'){
-            resEl.innerText = (part1)+(part2);
-        }else if(k5=='-'){
-            resEl.innerText = (part1)-(part2);
-        }else if(k5=='*'){
-            resEl.innerText = (part1)*(part2);
-        }else{
-            resEl.innerText = (part1)/(part2);
+        let result = eval(expr);
+        if (result === Infinity || result === -Infinity || isNaN(result)) {
+            resEl.innerText = "Error";
+        } else {
+            resEl.innerText = "= " + result;
+            saveHistory(expr + " = " + result);
         }
-        resEl.innerText = '= ' + resEl.innerText
-        if(!is){
-            valEl.innerText = resEl.innerText + t
-            if(valEl.innerText[0] == '='){
-                valEl.innerText = valEl.innerText.substring(1)
-            }
-        } 
+    } catch (e) {
+        resEl.innerText = "Error";
+    }
+}
+
+// ------------------ History Functions ------------------
+
+// Save calculation to history
+function saveHistory(entry) {
+    calcHistory.unshift(entry); // latest first
+    if (calcHistory.length > 20) calcHistory.pop(); // keep last 20
+    localStorage.setItem("calcHistory", JSON.stringify(calcHistory));
+    updateHistory();
+}
+
+// Update history panel
+function updateHistory() {
+    historyEl.innerHTML = "";
+    calcHistory.forEach(item => {
+        let li = document.createElement("li");
+        li.textContent = item;
+        li.onclick = () => {
+            valEl.value = item.split('=')[0].trim();
+            resEl.innerText = "";
+        };
+        historyEl.appendChild(li);
+    });
+}
+
+// Toggle history panel
+historyToggle.addEventListener("click", () => {
+    if (historyPanel.style.right === "0px") {
+        historyPanel.style.right = "-250px";
+    } else {
+        historyPanel.style.right = "0px";
+    }
+});
+
+// ------------------ Theme Toggle ------------------
+themeToggle.addEventListener("change", () => {
+    document.body.classList.toggle("dark");
+});
+
+// ------------------ Optional: Keyboard support ------------------
+document.addEventListener("keydown", (e) => {
+    if ((e.key >= '0' && e.key <= '9') || "+-*/.".includes(e.key)) {
+        adder(e.key);
+    } else if (e.key === "Enter") {
+        computeFinal();
+    } else if (e.key === "Backspace") {
+        backspace();
+    } else if (e.key === "Escape") {
+        clearer();
     }
-}
\ No newline at end of file
+});
diff --git a/Clock/index.css b/Clock/index.css
index 81c1a15..c70a248 100644
--- a/Clock/index.css
+++ b/Clock/index.css
@@ -1,37 +1,132 @@
-#clockContainer{  
+/* --- General Body and Theme Styling --- */
+body {
+    background-color: #f4f4f4;
+    color: #333;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+body.dark-mode {
+    background-color: #1a1a1a;
+    color: #f0f0f0;
+}
+
+/* --- Analog Clock --- */
+#clockContainer {
     position: relative;
-    margin: auto;
-    height: 40vw;
-    width: 40vw; 
+    margin: 20px auto;
+    height: 40vmin; /* Using vmin for better responsiveness */
+    width: 40vmin;
     background: url(clock.png) no-repeat;
     background-size: 100%;
+    transition: filter 0.3s;
 }
 
-#hour, #minute, #second{
+body.dark-mode #clockContainer {
+    filter: invert(1);
+}
+
+#hour, #minute, #second {
     position: absolute;
     background: black;
-    border-radius: 10px; 
+    border-radius: 10px;
     transform-origin: bottom;
 }
-#hour{
-    width: 1.8%;
-    height: 25%;
-    top: 25%;
-    left: 48.85%;
-    opacity: 0.8;  
-}
-#minute{
-    width: 1.6%;
-    height: 30%;
-    top: 19%;
-    left: 48.9%;
-    opacity: 0.8;  
-}
-#second{
-    width: 1%;
-    height: 40%;
-    top: 9%;
-    left: 49.25%;
-    opacity: 0.8; 
-    
-}
\ No newline at end of file
+
+#hour { width: 1.8%; height: 25%; top: 25%; left: 49.1%; }
+#minute { width: 1.6%; height: 35%; top: 15%; left: 49.2%; }
+#second { width: 1%; height: 40%; top: 10%; left: 49.5%; background-color: red; }
+
+
+/* --- Digital Clock and Date --- */
+#digital-display {
+    text-align: center;
+    margin-top: 20px;
+}
+
+#digital-time {
+    font-size: 3rem;
+    font-weight: 600;
+}
+
+#date-display {
+    font-size: 1.2rem;
+    margin-top: 5px;
+}
+
+
+/* --- Top Controls (Toggle & Timezone) --- */
+.controls-container {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+#timezone-selector {
+    padding: 8px;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+    font-size: 1rem;
+}
+
+body.dark-mode #timezone-selector {
+    background-color: #333;
+    color: #f0f0f0;
+    border-color: #555;
+}
+
+/* Fancy Toggle Switch */
+.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
+.switch input { opacity: 0; width: 0; height: 0; }
+.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
+.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
+input:checked + .slider { background-color: #4CAF50; }
+input:checked + .slider:before { transform: translateX(26px); }
+
+
+/* --- Stopwatch --- */
+#stopwatch-container {
+    margin-top: 30px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    text-align: center;
+    width: 300px;
+}
+
+body.dark-mode #stopwatch-container {
+    border-color: #555;
+}
+
+#stopwatch-display {
+    font-size: 2rem;
+    font-family: 'Courier New', Courier, monospace;
+    margin: 10px 0 20px 0;
+}
+
+.stopwatch-controls button {
+    padding: 10px 20px;
+    margin: 0 5px;
+    font-size: 1rem;
+    cursor: pointer;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    transition: background-color 0.2s;
+}
+
+#startBtn { background-color: #4CAF50; /* Green */ }
+#stopBtn { background-color: #f44336;  /* Red */ }
+#resetBtn { background-color: #555;   /* Grey */ }
+
+#startBtn:hover { background-color: #45a049; }
+#stopBtn:hover { background-color: #da190b; }
+#resetBtn:hover { background-color: #333; }
\ No newline at end of file
diff --git a/Clock/index.html b/Clock/index.html
index 13664bd..70355bd 100644
--- a/Clock/index.html
+++ b/Clock/index.html
@@ -3,15 +3,48 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Clock Using Pure JS</title>
+    <title>Enhanced JS Clock</title>
     <link rel="stylesheet" href="index.css">
-    <script src="index.js"></script>
 </head>
 <body>
+
+    <div class="controls-container">
+        <label class="switch">
+            <input type="checkbox" id="theme-toggle">
+            <span class="slider"></span>
+        </label>
+
+        <select id="timezone-selector">
+            <option value="Asia/Kolkata">India (IST)</option>
+            <option value="Europe/London">London (GMT)</option>
+            <option value="America/New_York">New York (EST)</option>
+            <option value="America/Los_Angeles">Los Angeles (PST)</option>
+            <option value="Australia/Sydney">Sydney (AEST)</option>
+            <option value="Asia/Tokyo">Tokyo (JST)</option>
+        </select>
+    </div>
+
     <div id="clockContainer">
         <div id="hour"></div>
         <div id="minute"></div>
         <div id="second"></div>
     </div>
+
+    <div id="digital-display">
+        <div id="digital-time">00:00:00</div>
+        <div id="date-display">Date</div>
+    </div>
+
+    <div id="stopwatch-container">
+        <h2>Stopwatch</h2>
+        <div id="stopwatch-display">00:00:00.000</div>
+        <div class="stopwatch-controls">
+            <button id="startBtn">Start</button>
+            <button id="stopBtn">Stop</button>
+            <button id="resetBtn">Reset</button>
+        </div>
+    </div>
+
+    <script src="index.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/Clock/index.js b/Clock/index.js
index 835800b..4df53a1 100644
--- a/Clock/index.js
+++ b/Clock/index.js
@@ -1,13 +1,95 @@
-setInterval(() => {
-    d = new Date();
-    htime = d.getHours();
-    mtime = d.getMinutes();
-    stime = d.getSeconds();
-    hrotation = 30*htime + mtime/2;
-    mrotation = 6*mtime;
-    srotation = 6*stime;
-
-    hour.style.transform = `rotate(${hrotation}deg)`;
-    minute.style.transform = `rotate(${mrotation}deg)`;
-    second.style.transform = `rotate(${srotation}deg)`;
-}, 1000);
\ No newline at end of file
+// Wait for the DOM to be fully loaded before running the script
+document.addEventListener('DOMContentLoaded', () => {
+
+    // --- Element Selection ---
+    const hourHand = document.getElementById('hour');
+    const minuteHand = document.getElementById('minute');
+    const secondHand = document.getElementById('second');
+    const digitalTime = document.getElementById('digital-time');
+    const dateDisplay = document.getElementById('date-display');
+    const timezoneSelector = document.getElementById('timezone-selector');
+    const themeToggle = document.getElementById('theme-toggle');
+
+    // --- Theme Toggle Logic ---
+    themeToggle.addEventListener('change', () => {
+        document.body.classList.toggle('dark-mode');
+    });
+
+    // --- Clock and Date Update Function ---
+    function updateClocks() {
+        const selectedTimezone = timezoneSelector.value;
+        const now = new Date();
+
+        // Use Intl.DateTimeFormat for robust timezone handling
+        const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false, timeZone: selectedTimezone };
+        const timeString = new Intl.DateTimeFormat('en-US', timeOptions).format(now);
+        const [h, m, s] = timeString.split(':').map(Number);
+        
+        const dateOptions = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: selectedTimezone };
+        const dateString = new Intl.DateTimeFormat('en-US', dateOptions).format(now);
+        
+        // Analog Clock Rotation
+        const hrotation = 30 * h + m / 2;
+        const mrotation = 6 * m;
+        const srotation = 6 * s;
+
+        hourHand.style.transform = `rotate(${hrotation}deg)`;
+        minuteHand.style.transform = `rotate(${mrotation}deg)`;
+        secondHand.style.transform = `rotate(${srotation}deg)`;
+        
+        // Digital Clock and Date Display
+        digitalTime.textContent = timeString;
+        dateDisplay.textContent = dateString;
+    }
+
+    // Update the clock immediately and then every second
+    updateClocks();
+    setInterval(updateClocks, 1000);
+
+    // Update clocks when timezone changes
+    timezoneSelector.addEventListener('change', updateClocks);
+
+
+    // --- Stopwatch Logic ---
+    const stopwatchDisplay = document.getElementById('stopwatch-display');
+    const startBtn = document.getElementById('startBtn');
+    const stopBtn = document.getElementById('stopBtn');
+    const resetBtn = document.getElementById('resetBtn');
+
+    let startTime;
+    let elapsedTime = 0;
+    let stopwatchInterval;
+
+    function formatTime(ms) {
+        const date = new Date(ms);
+        const minutes = String(date.getUTCMinutes()).padStart(2, '0');
+        const seconds = String(date.getUTCSeconds()).padStart(2, '0');
+        const milliseconds = String(date.getUTCMilliseconds()).padStart(3, '0');
+        return `${minutes}:${seconds}.${milliseconds}`;
+    }
+
+    function startStopwatch() {
+        if (!stopwatchInterval) { // Prevent multiple intervals
+            startTime = Date.now() - elapsedTime;
+            stopwatchInterval = setInterval(() => {
+                elapsedTime = Date.now() - startTime;
+                stopwatchDisplay.textContent = formatTime(elapsedTime);
+            }, 10); // Update every 10ms for smooth milliseconds
+        }
+    }
+
+    function stopStopwatch() {
+        clearInterval(stopwatchInterval);
+        stopwatchInterval = null;
+    }
+
+    function resetStopwatch() {
+        stopStopwatch();
+        elapsedTime = 0;
+        stopwatchDisplay.textContent = '00:00:00.000';
+    }
+
+    startBtn.addEventListener('click', startStopwatch);
+    stopBtn.addEventListener('click', stopStopwatch);
+    resetBtn.addEventListener('click', resetStopwatch);
+});
\ No newline at end of file
diff --git a/TODO-LIST/src/App.css b/TODO-LIST/src/App.css
index 85771d2..f916268 100644
--- a/TODO-LIST/src/App.css
+++ b/TODO-LIST/src/App.css
@@ -1,121 +1,310 @@
-.home {
-  min-height: 100vh;
-  background-color: white;
+/* Reset and Base */
+*, *::after, *::before {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
 }
 
+body {
+  margin: 0;
+  font-family: 'Open Sans', sans-serif;
+  background-color: #f0f6ff; /* light blue background */
+  color: #222;
+}
+
+/* Container */
 .container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 15px;
+  max-width: 600px;
+  margin: 40px auto;
+  padding: 0 15px;
 }
 
+/* Form */
 .todo-form {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 300px;
+  gap: 10px;
+  margin-bottom: 20px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.todo-form input[type="text"],
+.todo-form textarea {
+  flex: 1;
   padding: 10px;
-  background-color: #E1F0F7;
+  border: 1px solid #1DA1F2;
   border-radius: 6px;
-  gap: 5px;
+  font-size: 1rem;
+  outline: none;
+  transition: border 0.2s ease;
 }
 
-input{
-  padding: 7px;
-  width: 98%;
+.todo-form input[type="text"]:focus,
+.todo-form textarea:focus {
+  border-color: #0d8ddb;
+  box-shadow: 0 0 0 3px rgba(29,161,242,0.2);
+}
+
+.todo-form textarea {
+  resize: none;
+  min-height: 40px;
+}
+
+.todo-form .btn-addTodo {
+  padding: 10px 18px;
+  background: #1DA1F2;
   border: none;
   border-radius: 6px;
-  outline: none;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.1s ease;
 }
-input:focus{
-  box-shadow: 0 0 0 2px #2cb0ee;
+
+.todo-form .btn-addTodo:hover {
+  background: #0d8ddb;
 }
-.btn-addTodo{
-  padding: 6px;
-  border: none;
-  border-radius: 4px;
-  outline: none;
-  background-color: #1DA1F2;
+
+.todo-form .btn-addTodo:active {
+  transform: scale(0.95);
+}
+
+/* Filter Buttons */
+.filters {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.filters button {
+  padding: 6px 14px;
+  background: #fff;
+  border: 1px solid #1DA1F2;
+  border-radius: 6px;
+  color: #1DA1F2;
+  font-weight: 600;
   cursor: pointer;
-  color: white;
-  font-weight: 700;
-  font-size: 14px;
-  width: 70px;
+  transition: all 0.2s ease;
 }
 
-.todo {
-  width: 300px;
-  padding: 10px;
-  background-color: #E1F0F7;
+.filters button:hover {
+  background: #1DA1F2;
+  color: #fff;
+}
+
+.filters button.active {
+  background: #1DA1F2;
+  color: #fff;
+  box-shadow: 0 0 6px rgba(29,161,242,0.4);
+}
+
+/* Date input for custom filter */
+.filters input[type="date"] {
+  padding: 6px 10px;
+  border: 1px solid #1DA1F2;
   border-radius: 6px;
-  margin-top: 10px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  outline: none;
+  transition: border 0.2s ease;
+}
+
+.filters input[type="date"]:focus {
+  border-color: #0d8ddb;
+  box-shadow: 0 0 0 3px rgba(29,161,242,0.2);
+}
+
+/* Todo Card */
+.todo {
+  background: #fff;
+  border: 1px solid #d6e9ff;
+  border-radius: 8px;
+  padding: 15px;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.todo:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+}
+
+/* Completed Task */
+.todo.completed h3,
+.todo.completed .desc {
+  text-decoration: line-through;
+  color: #777;
+}
+
+/* Task Layout */
+.task-main {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: flex-start;
 }
 
-.text {
-  font-size: 16px;
-  font-weight: 700;
-  margin-right: auto;
-  overflow: hidden;
-  overflow-wrap: break-word;
+/* Todo Title */
+.todo h3 {
+  font-size: 1.1rem;
+  color: #1DA1F2;
+  margin-bottom: 6px;
+}
+
+/* Task Description */
+.todo .desc {
+  font-size: 0.9rem;
+  color: #444;
+  background: #f7fbff;
+  border-left: 3px solid #1DA1F2;
+  padding: 6px 10px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  line-height: 1.4;
 }
 
-.utils{
+/* Timestamp */
+.todo small {
+  display: block;
+  font-size: 0.8rem;
+  color: #777;
+  margin-bottom: 6px;
+}
+
+/* Task Actions (right side buttons) */
+.task-actions {
   display: flex;
+  gap: 12px;
   align-items: center;
-  gap: 8px;
+  font-size: 1.2rem;
 }
 
-.go-up {
-  width: 0; 
-  height: 0; 
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #1DA1F2;
+/* Tick (Complete) */
+.task-actions .tick {
+  color: green;
+  font-size: 1.3rem;
   cursor: pointer;
+  transition: transform 0.2s ease;
 }
 
-.go-down{
-  width: 0; 
-  height: 0; 
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #1DA1F2;
+.task-actions .tick:hover {
+  transform: scale(1.2);
+}
+
+/* Edit button */
+.task-actions .edit {
   cursor: pointer;
+  font-size: 1.2rem;
+  color: #f39c12;
+  transition: transform 0.2s ease;
+}
+
+.task-actions .edit:hover {
+  transform: scale(1.2);
 }
 
-.remove{
+/* Remove button */
+.task-actions .remove {
+  width: 18px;
+  height: 18px;
+  border: 2px solid #e63946;
+  border-radius: 50%;
   position: relative;
-  width: 20px;
-  height: 20px;
   cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.task-actions .remove:hover {
+  transform: scale(1.2);
 }
 
-.remove::after {
+.task-actions .remove::before,
+.task-actions .remove::after {
+  content: "";
   position: absolute;
-  content:'';
-  width: 100%;
+  top: 50%;
+  left: 50%;
+  width: 10px;
   height: 2px;
-  background-color: black;
-  top:0;
-  left:0;
-  border-radius: 999px;
-  transform: translateY(10px) rotate(-45deg);
+  background: #e63946;
+  transform: translate(-50%, -50%) rotate(45deg);
 }
 
-.remove::before {
-  position: absolute;
-  content:'';
+.task-actions .remove::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+/* Edit Mode */
+.edit-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.edit-mode input,
+.edit-mode textarea {
   width: 100%;
-  height: 2px;
-  background-color: black;
-  top:100%;
-  left:0;
-  border-radius: 999px;
-  transform: translateY(-10px) rotate(45deg);
-}
\ No newline at end of file
+  padding: 8px 10px;
+  border: 1px solid #1DA1F2;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  outline: none;
+}
+
+.edit-mode input:focus,
+.edit-mode textarea:focus {
+  border-color: #0d8ddb;
+  box-shadow: 0 0 0 3px rgba(29,161,242,0.2);
+}
+
+.edit-mode textarea {
+  min-height: 60px;
+  resize: vertical;
+}
+
+.edit-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.edit-actions button {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 6px;
+  background: #1DA1F2;
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, transform 0.1s ease;
+}
+
+.edit-actions button:hover {
+  background: #0d8ddb;
+}
+
+.edit-actions button:active {
+  transform: scale(0.96);
+}
+
+.edit-actions button:last-child {
+  background: #ccc;
+  color: #333;
+}
+
+.edit-actions button:last-child:hover {
+  background: #999;
+  color: #fff;
+}
+
+/* No tasks text */
+.no-tasks {
+  text-align: center;
+  margin-top: 20px;
+  font-weight: bold;
+  font-size: 1rem;
+  color: #555;
+}
diff --git a/TODO-LIST/src/components/Todo.jsx b/TODO-LIST/src/components/Todo.jsx
index a1bee9e..484375c 100644
--- a/TODO-LIST/src/components/Todo.jsx
+++ b/TODO-LIST/src/components/Todo.jsx
@@ -1,17 +1,66 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-const Todo = ({ todo,deleteTodo,moveUp,moveDown,total,index}) => {
-    
-    return (
-        <div className='todo'>
-            <p className='text'>{todo.text}</p>
-                <div className='utils'>
-                <div className='go-up' style={{borderBottomColor:index === 0 ? 'grey' : '#1DA1F2'}} onClick={() => moveUp(todo.id)}></div>
-                <div className='go-down' style={{borderTopColor:index === total - 1 ? 'grey' : '#1DA1F2'}} onClick={() => moveDown(todo.id)}></div>
-                <div className='remove'  onClick={() => deleteTodo(todo.id)}></div>
-            </div>
+const Todo = ({ todo, deleteTodo, editTodo, moveUp, moveDown, total, index }) => {
+  const [isEditing, setIsEditing] = useState(false)
+  const [newTitle, setNewTitle] = useState(todo.title)
+  const [newDesc, setNewDesc] = useState(todo.desc)
+
+  const handleSave = () => {
+    if (newTitle.trim()) {
+      editTodo(todo.id, newTitle, newDesc)
+      setIsEditing(false)
+    }
+  }
+
+  return (
+    <div className='todo'>
+      {isEditing ? (
+        <div className="edit-mode">
+          <input
+            type="text"
+            value={newTitle}
+            onChange={(e) => setNewTitle(e.target.value)}
+            placeholder="Edit title"
+          />
+          <textarea
+            value={newDesc}
+            onChange={(e) => setNewDesc(e.target.value)}
+            placeholder="Edit description"
+          />
+          <button onClick={handleSave}>Save</button>
+          <button onClick={() => setIsEditing(false)}>Cancel</button>
         </div>
-    )
+      ) : (
+        <>
+          <h3 className="text">{todo.title}</h3>
+          {todo.desc && <p>{todo.desc}</p>}
+          <div className='utils'>
+            <div
+              className='go-up'
+              style={{ borderBottomColor: index === 0 ? 'grey' : '#1DA1F2' }}
+              onClick={() => moveUp(todo.id)}
+            ></div>
+            <div
+              className='go-down'
+              style={{ borderTopColor: index === total - 1 ? 'grey' : '#1DA1F2' }}
+              onClick={() => moveDown(todo.id)}
+            ></div>
+            <div
+              className='remove'
+              onClick={() => deleteTodo(todo.id)}
+            ></div>
+            <div
+              className='edit'
+              onClick={() => setIsEditing(true)}
+              style={{ cursor: 'pointer', marginLeft: '10px', color: '#1DA1F2' }}
+            >
+              ✏️
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
 }
 
 export default Todo
diff --git a/TODO-LIST/src/pages/Home.jsx b/TODO-LIST/src/pages/Home.jsx
index 74b9c24..b7a4433 100644
--- a/TODO-LIST/src/pages/Home.jsx
+++ b/TODO-LIST/src/pages/Home.jsx
@@ -1,75 +1,183 @@
-import React,{useState,useEffect} from 'react'
-import {nanoid} from 'nanoid'
-import Todo from '../components/Todo'
+import React, { useState, useEffect } from "react";
+import { nanoid } from "nanoid";
+import Todo from "../components/Todo";
 
 const getTodos = () => {
-    let todos = localStorage.getItem('todos')
-    if (todos) {
-        return JSON.parse(todos)
-    }
-    return []
-}
+  let todos = localStorage.getItem("todos");
+  if (todos) {
+    return JSON.parse(todos);
+  }
+  return [];
+};
 
 const Home = () => {
-    const [todos, setTodos] = useState(getTodos())
-    const [todo, setTodo] = useState('')
+  const [todos, setTodos] = useState(getTodos());
+  const [title, setTitle] = useState("");
+  const [desc, setDesc] = useState("");
+  const [filter, setFilter] = useState("all");
+  const [customDate, setCustomDate] = useState("");
 
-    const addTodo = (e) => {
-        e.preventDefault()
-        if (todo && todos.findIndex(t => t.text === todo) === -1) {
-            setTodos(prev => [...prev, {id:nanoid(),text:todo}])
-            setTodo('')
-        }
+  const addTodo = (e) => {
+    e.preventDefault();
+    if (title && todos.findIndex((t) => t.title === title) === -1) {
+      setTodos((prev) => [
+        ...prev,
+        {
+          id: nanoid(),
+          title,
+          desc,
+          createdAt: new Date().toISOString(),
+          completed: false,
+        },
+      ]);
+      setTitle("");
+      setDesc("");
     }
+  };
+
+  const deleteTodo = (id) => {
+    setTodos((prev) => prev.filter((t) => t.id !== id));
+  };
+
+  const editTodo = (id, newTitle, newDesc) => {
+    setTodos((prev) =>
+      prev.map((t) =>
+        t.id === id ? { ...t, title: newTitle, desc: newDesc } : t
+      )
+    );
+  };
 
-    const deleteTodo = (id) => {
-        setTodos(prev => prev.filter(t => t.id !== id))
+  const toggleComplete = (id) => {
+    setTodos((prev) =>
+      prev.map((t) =>
+        t.id === id ? { ...t, completed: !t.completed } : t
+      )
+    );
+  };
+
+  const moveUp = (id) => {
+    let index = todos.findIndex((t) => t.id === id);
+    if (index > 0) {
+      let temp = todos[index];
+      todos[index] = todos[index - 1];
+      todos[index - 1] = temp;
+      setTodos([...todos]);
     }
+  };
 
-    const moveUp = (id) => {
-        let index = todos.findIndex(t => t.id === id)
-        if (index > 0) {
-            let temp = todos[index]
-            todos[index] = todos[index - 1]
-            todos[index - 1] = temp
-            setTodos([...todos])
-        }
+  const moveDown = (id) => {
+    let index = todos.findIndex((t) => t.id === id);
+    if (index < todos.length - 1) {
+      let temp = todos[index];
+      todos[index] = todos[index + 1];
+      todos[index + 1] = temp;
+      setTodos([...todos]);
     }
+  };
+
+  // Filtering
+  const filteredTodos = todos.filter((t) => {
+    if (!t.createdAt) return true;
+    const now = new Date();
+    const created = new Date(t.createdAt);
 
-    const moveDown = (id) => {
-        let index = todos.findIndex(t => t.id === id)
-        if (index < todos.length - 1) {
-            let temp = todos[index]
-            todos[index] = todos[index + 1]
-            todos[index + 1] = temp
-            setTodos([...todos])
-        }
+    if (filter === "today") {
+      return created.toDateString() === now.toDateString();
     }
-    useEffect(() => {
-        localStorage.setItem('todos', JSON.stringify(todos))
-    },[todos])
+    if (filter === "week") {
+      const oneWeekAgo = new Date();
+      oneWeekAgo.setDate(now.getDate() - 7);
+      return created >= oneWeekAgo;
+    }
+    if (filter === "custom" && customDate) {
+      return created.toDateString() === new Date(customDate).toDateString();
+    }
+    return true;
+  });
+
+  useEffect(() => {
+    localStorage.setItem("todos", JSON.stringify(todos));
+  }, [todos]);
+
+  return (
+    <div className="home">
+      <div className="container">
+        {/* Add Todo */}
+        <form className="todo-form" onSubmit={addTodo}>
+          <input
+            type="text"
+            placeholder="Task Title..."
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+          />
+          <textarea
+            placeholder="Task Description..."
+            value={desc}
+            onChange={(e) => setDesc(e.target.value)}
+          />
+          <button type="submit" className="btn-addTodo">
+            Add Task
+          </button>
+        </form>
 
-    return (
-    <div className='home'>
-      <div className='container'>
-          <form className='todo-form' onSubmit={addTodo}>
-            <input type="text" placeholder='Add item...' value={todo} onChange={(e) => setTodo(e.target.value)}/>
-            <input type='button' onClick={addTodo} className='btn-addTodo' value='Add' />
-          </form>
-          {
-                todos.length? (
-            <div className='todo-list'>
-                {
-                    todos.map((todo,index) => {
-                        return <Todo key={todo.id} todo={todo} deleteTodo={deleteTodo} moveUp={moveUp} moveDown = {moveDown} total = {todos.length} index={index}/>
-                    })
-                }
-            </div> ) : <p style={{textAlign:'center', marginTop:'10px', fontWeight:'bold'}}>No todo...</p>
+        {/* Filter Buttons */}
+        <div className="filters">
+          <button
+            className={filter === "all" ? "active" : ""}
+            onClick={() => setFilter("all")}
+          >
+            All
+          </button>
+          <button
+            className={filter === "today" ? "active" : ""}
+            onClick={() => setFilter("today")}
+          >
+            Today
+          </button>
+          <button
+            className={filter === "week" ? "active" : ""}
+            onClick={() => setFilter("week")}
+          >
+            This Week
+          </button>
+          <button
+            className={filter === "custom" ? "active" : ""}
+            onClick={() => setFilter("custom")}
+          >
+            Custom Date
+          </button>
+          {filter === "custom" && (
+            <input
+              type="date"
+              value={customDate}
+              onChange={(e) => setCustomDate(e.target.value)}
+            />
+          )}
+        </div>
 
-          }
+        {/* Todo List */}
+        {filteredTodos.length ? (
+          <div className="todo-list">
+            {filteredTodos.map((todo, index) => (
+              <Todo
+                key={todo.id}
+                todo={todo}
+                deleteTodo={deleteTodo}
+                editTodo={editTodo}
+                toggleComplete={toggleComplete}
+                moveUp={moveUp}
+                moveDown={moveDown}
+                total={filteredTodos.length}
+                index={index}
+              />
+            ))}
+          </div>
+        ) : (
+          <p className="no-tasks">No tasks...</p>
+        )}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Home
\ No newline at end of file
+export default Home;