diff --git a/Frontend Interview Preparation.txt b/Frontend Interview Preparation.txt
index 0926557..284c337 100644
--- a/Frontend Interview Preparation.txt	
+++ b/Frontend Interview Preparation.txt	
@@ -121,7 +121,9 @@ I'd be happy to provide detailed answers on these HTML and web development topic
 
 Semantic HTML5 Elements
 
-Semantic HTML5 elements are tags that convey meaning about the structure and content of a web page to both browsers and developers. They improve accessibility, SEO, and code readability. Key semantic elements include:
+Semantic HTML5 elements are tags that convey meaning about the structure and content of a web page to
+ both browsers and developers. They improve accessibility, SEO, and code readability. Key semantic
+  elements include:
 
 <header>: Introductory content or navigational links
 <nav>: Navigation links
@@ -134,7 +136,8 @@ Semantic HTML5 elements are tags that convey meaning about the structure and con
 <time>: For dates and times
 <mark>: Highlighted text
 
-Using these elements properly helps search engines understand your content and assists screen readers in navigating the page structure.
+Using these elements properly helps search engines understand your content and assists screen 
+readers in navigating the page structure.
 
 HTML Forms and Validation
 
diff --git a/README.md b/README.md
index fa4f542..ecd176f 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,8 @@
 - OTP Login
 - Dark mode Light mode
 
+
+
 ## Medium:
 
 - Selectable Grid ✅
diff --git a/src/All Assessment/assessment01/StopWatch.jsx b/src/All Assessment/assessment01/StopWatch.jsx
index 21bdba9..0447c81 100644
--- a/src/All Assessment/assessment01/StopWatch.jsx	
+++ b/src/All Assessment/assessment01/StopWatch.jsx	
@@ -1,21 +1,16 @@
 import React, { useEffect, useState } from "react";
-import '../../index.css'
+import "../../index.css";
 import GoToHome from "../../Components/GoToHome";
-// import GoToHome from "../../Components/GoToHome";
 
 const StopWatch = () => {
   const [clicked, setClicked] = useState(false);
   const [time, setTime] = useState(0);
 
-  const handleclick = () => {
-    setClicked(!clicked);
-  };
-
   useEffect(() => {
     let interval;
     if (clicked) {
       interval = setInterval(() => {
-        setTime(prevTime => prevTime + 1);
+        setTime((prevTime) => prevTime + 1);
       }, 500);
     } else {
       clearInterval(interval);
@@ -27,13 +22,10 @@ const StopWatch = () => {
   return (
     <div className="flex flex-col items-center justify-center h-screen gap-10">
       <div className="text-6xl">{time}</div>
-      <button
-        className="custom-button"
-        onClick={handleclick}
-      >
-        {clicked ? 'Stop' : 'Start'}
+      <button className="custom-button" onClick={() => setClicked(!clicked)}>
+        {clicked ? "Stop" : "Start"}
       </button>
-      <GoToHome/>
+      <GoToHome />
     </div>
   );
 };
diff --git a/src/All Assessment/assessment05/InfiniteScroll.jsx b/src/All Assessment/assessment05/InfiniteScroll.jsx
index d277ff0..dd0dfd6 100644
--- a/src/All Assessment/assessment05/InfiniteScroll.jsx	
+++ b/src/All Assessment/assessment05/InfiniteScroll.jsx	
@@ -1,41 +1,71 @@
-import React, { useState, useEffect } from "react";
-import GoToHome from "../../Components/GoToHome";
+// import React, { useState, useEffect } from "react";
+// import GoToHome from "../../Components/GoToHome";
+
+import { useEffect, useState } from "react";
+
+// const InfiniteScroll = () => {
+//   const [count, setCount] = useState(50);
+
+//   useEffect(() => {
+//       const onScroll = () => {
+//         if (
+//           window.innerHeight + window.scrollY >=
+//           window.document.body.offsetHeight - 30
+//         ) {
+//           setCount(count + 50);
+//         }
+//       };
+
+//       window.addEventListener("scroll", onScroll);
+//       return () => window.removeEventListener("scroll", onScroll);
+
+//     },
+//     [count]);
+
+//   const elements = [];
+//   for (let i = 0; i < count; i++) {
+//     elements.push(
+//       <div key={i}>
+//         {i + 1}
+//       </div>
+//     );
+//   }
+//   return (
+//     <main className="flex flex-col items-center w-full">
+//     <h1 className="text-4xl">Infinite Scroll</h1>
+//     <GoToHome/>
+//       {elements}
+//     </main>
+//   );
+// };
 
 const InfiniteScroll = () => {
-  const [count, setCount] = useState(50);
 
+  const [count, setCount] = useState(50);
   useEffect(() => {
-      const onScroll = () => {
-        if (
-          window.innerHeight + window.scrollY >=
-          window.document.body.offsetHeight - 30
-        ) {
-          setCount(count + 50);
-        }
-      };
-
-      window.addEventListener("scroll", onScroll);
-      return () => window.removeEventListener("scroll", onScroll);
-
-    },
-    [count]);
-
-  const elements = [];
-  for (let i = 0; i < count; i++) {
-    elements.push(
-      <div key={i}>
-        {i + 1}
-      </div>
-    );
+const onscroll = () => {
+  if(window.innerHeight + window.scrollY >= window.document.body.offsetHeight){
+ 
+    setCount(prev => prev + 50);
+  }
+}
+let event = window.addEventListener("scroll", onscroll);
+return () => window.removeEventListener("scroll", event);
+  }, [count]);
+
+  let elements = []
+  for(let i=0; i<count; i++){
+elements.push(
+  <p key={i}>{i+1}</p>
+)
   }
+
   return (
-    <main className="flex flex-col items-center w-full">
-    <h1 className="text-4xl">Infinite Scroll</h1>
-    <GoToHome/>
-      {elements}
-    </main>
+    <div>
+      <h1>Infinite Scroll</h1>
+      <div>{elements}</div>
+    </div>
   );
 };
 
 export default InfiniteScroll;
-
diff --git a/src/All Assessment/assessment19/FollowingCurser.jsx b/src/All Assessment/assessment19/FollowingCurser.jsx
index d8a0321..71aced8 100644
--- a/src/All Assessment/assessment19/FollowingCurser.jsx	
+++ b/src/All Assessment/assessment19/FollowingCurser.jsx	
@@ -25,7 +25,7 @@ const FollowingCurser = () => {
     };
   };
 
-  const throttledHandleMovement = throttle(handleMovement, 40);  
+  const throttledHandleMovement = throttle(handleMovement, 20);  
 
   return (
     <div
diff --git a/src/All Assessment/assessment20/Debouncing.jsx b/src/All Assessment/assessment20/Debouncing.jsx
new file mode 100644
index 0000000..d16fbba
--- /dev/null
+++ b/src/All Assessment/assessment20/Debouncing.jsx	
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+
+const Debouncing = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [debouncedValue, setDebouncedValue] = useState('');
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(inputValue);
+    }, 300); 
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [inputValue]);
+
+  const handleChange = (event) => {
+    setInputValue(event.target.value);
+  };
+
+  return (
+    <div className='flex flex-col h-screen bg-gray-800/20 items-center justify-center'>
+      <input
+        className='bg-transparent border-2 border-gray-500 rounded-lg w-1/2 px-10 py-3'
+        type="text"
+        value={inputValue}
+        onChange={handleChange}
+        placeholder="Type something..."
+      />
+      <p>Input value: {inputValue}</p>
+      <p>Debounced value: {debouncedValue}</p>
+    </div>
+  );
+};
+
+export default Debouncing;
diff --git a/src/All Assessment/assessment20/readme.md b/src/All Assessment/assessment20/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment20/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/All Assessment/assessment21/MyToaster.jsx b/src/All Assessment/assessment21/MyToaster.jsx
new file mode 100644
index 0000000..fc41723
--- /dev/null
+++ b/src/All Assessment/assessment21/MyToaster.jsx	
@@ -0,0 +1,76 @@
+import React from "react";
+import GoToHome from "../../Components/GoToHome";
+
+const MyToaster = () => {
+  const [toast, setToast] = React.useState([]);
+  console.log("toast:", toast);
+
+  const handleClick = () => {
+    const newToast = { id: Date.now() };
+    setToast(prev => [...prev, newToast]);
+    setTimeout(() => {
+      removeToast(newToast.id);
+    }, 6000);
+  };
+
+  const removeToast = id => {
+    setToast(prev => prev.filter(t => t.id !== id));
+  };
+
+  return (
+    <div className="App">
+      <div style={{ position: "fixed", top: "10px", right: "20px" }}>
+        {toast.map((t, index) =>
+          <div key={t.id} style={{ marginTop: `${index * 60}px` }}>
+            <Toast close={() => removeToast(t.id)} />
+          </div>
+        )}
+      </div>
+      <GoToHome />
+      <h1>Toaster By sameerkali</h1>
+      <button style={{ backgroundColor: "#ccc" }} onClick={handleClick}>
+        Click Me To Show Toaster
+      </button>
+    </div>
+  );
+};
+
+export default MyToaster;
+
+const Toast = ({ close, time = 6 }) => {
+  const [count, setCount] = React.useState(time);
+
+  React.useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCount((prev) => {
+        if (prev === 1) {
+          clearInterval(intervalId);
+          close();
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [close]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "20px",
+        padding: "10px",
+        backgroundColor: "red",
+      }}
+    >
+      <h1>I am a sweet Toast</h1>
+      <h1>{count}</h1>
+      <button style={{ fontSize: "3rem", backgroundColor: "transparent" }} onClick={close}>
+        x
+      </button>
+    </div>
+  );
+};
+
diff --git a/src/All Assessment/assessment21/Toster.jsx b/src/All Assessment/assessment21/Toster.jsx
new file mode 100644
index 0000000..f16326a
--- /dev/null
+++ b/src/All Assessment/assessment21/Toster.jsx	
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react";
+import GotoHome from "../../Components/GoToHome";
+import './styles.css'
+
+const Toster = () => {
+  const [toasts, setToasts] = useState([]);
+
+  const handleClick = () => {
+    const newToast = { id: Date.now(), visible: true };
+    setToasts((prevToasts) => [newToast, ...prevToasts]);
+
+    setTimeout(() => {
+      removeToast(newToast.id);
+    }, 6000);
+  };
+
+  const removeToast = (id) => {
+    setToasts((prevToasts) =>
+      prevToasts.map((toast) =>
+        toast.id === id ? { ...toast, visible: false } : toast
+      )
+    );
+    setTimeout(() => {
+      setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id));
+    }, 500);
+  };
+
+  return (
+    <div className="h-screen flex justify-center items-center flex-col gap-8">
+      {toasts.map((toast, index) => (
+        <div
+          key={toast.id}
+          className={`z-1000 absolute right-10 transition-all duration-500 ${
+            toast.visible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
+          }`}
+          style={{ top: `${10 + index * 60}px` }}
+        >
+          <TosterBox onClose={() => removeToast(toast.id)} />
+        </div>
+      ))}
+      <button
+        className="cursor-pointer border-black border px-10 py-3 hover:bg-gray-100"
+        onClick={handleClick}
+      >
+        Click To Show Toster
+      </button>
+      <GotoHome />
+    </div>
+  );
+};
+
+export default Toster;
+
+const TosterBox = ({ onClose }) => {
+  return (
+    <div className="bg-red-400 rounded shadow-lg relative overflow-hidden">
+      <div className="flex justify-between px-10 py-4 gap-10">
+        <h1 className="text-white">This is a Toster Box after click</h1>
+        <button className="text-white" onClick={onClose}>
+          x
+        </button>
+      </div>
+      <div className="absolute bottom-0 left-0 h-1 bg-red-500 progress-bar"></div>
+    </div>
+  );
+};
diff --git a/src/All Assessment/assessment21/readme.md b/src/All Assessment/assessment21/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment21/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/All Assessment/assessment21/styles.css b/src/All Assessment/assessment21/styles.css
new file mode 100644
index 0000000..a7b5f46
--- /dev/null
+++ b/src/All Assessment/assessment21/styles.css	
@@ -0,0 +1,12 @@
+.progress-bar {
+    animation: progress 6s linear forwards;
+  }
+  
+  @keyframes progress {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
\ No newline at end of file
diff --git a/src/All Assessment/assessment22/Todo.jsx b/src/All Assessment/assessment22/Todo.jsx
new file mode 100644
index 0000000..dea1c69
--- /dev/null
+++ b/src/All Assessment/assessment22/Todo.jsx	
@@ -0,0 +1,127 @@
+// import React, { useState } from "react";
+
+// import { useState } from "react";
+
+// const Todo = () => {
+//   const [todos, setTodos] = useState([]);
+//   const [todo, setTodo] = useState("");
+//   console.log(todo)
+
+//   const addTodo = () => {
+//     if(todo.trim() !== ""){
+//       let newTodo = {id: Date.now() , content: todo}
+//       setTodos( prev => [...prev, newTodo ])
+//     }
+//   };
+
+//   const removeTodo = (id) => {
+//     setTodos(todos.filter(t => t.id !== id))
+//   };
+
+//   const updateTodo = (id, newText) => {
+//       setTodos(todos.map(t => ( t.id === id ? {...t, content: newText} : t)))
+//   };
+
+//   const handleChange = (e) => {
+//     setTodo(e.target.value)
+//   };
+
+//   return (
+//     <div className="flex flex-col h-screen items-center">
+//       <h1 className="text-5xl font-bold font-sans mt-10">Todo Local Storage</h1>
+//       <div className="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-4 mt-10">
+//         <input
+//           className="w-[25rem] px-3 py-1 border border-black rounded-sm"
+//           type="text"
+//           placeholder="learn todo"
+//           value={todo}
+//           onChange={handleChange}
+//         />
+//         <button
+//           className="bg-red-700 px-10 py-2 text-white font-bold"
+//           onClick={addTodo}
+//         >
+//           Add
+//         </button>
+//       </div>
+//       <div className="mt-10">
+//         {todos.map((todo) => (
+//           <div key={todo.id} className="flex space-x-4">
+//             <p>{todo.content}</p>
+//             <button
+//               className="bg-blue-500 px-4 py-1 text-white rounded"
+//               onClick={() => updateTodo(todo.id, prompt("Update todo", todo.content))}
+//             >
+//               Update
+//             </button>
+//             <button
+//               className="bg-red-500 px-4 py-1 text-white rounded"
+//               onClick={() => removeTodo(todo.id)}
+//             >
+//               Remove
+//             </button>
+//           </div>
+//         ))}
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default Todo;
+
+import React, { useState } from "react";
+
+const Todo = () => {
+  const [todo, setTodo] = useState("");
+  const [todos, setTodos] = useState([]);
+  const [clickUpdate, setClickUpdate] = useState(false);
+  console.log("todos:", todos);
+
+  const AddTodo = () => {
+    if (todo !== "") {
+      let newTodo = { id: Date.now(), content: todo };
+      setTodos((prev) => [...prev, newTodo]);
+      setTodo("");
+    }
+  };
+  const removeTodo = (id) => {
+    setTodos(todos.filter((t) => t.id != id));
+  };
+  const updateTodo = (id) => {
+    setClickUpdate(!clickUpdate);
+  };
+  return (
+    <div>
+      <input
+        value={todo}
+        className="border-2 border-black "
+        placeholder=" eat apple"
+        onChange={(e) => {
+          setTodo(e.target.value);
+        }}
+      />
+      <button onClick={AddTodo}>add</button>
+      <ul>
+        {todos.map((t) => (
+          <div className="flex gap-10" key={t.id}>
+            {clickUpdate ? (
+              <li>{t.content}</li>
+            ) : (
+              <input
+                value={t.content}
+                className="border-2 border-black "
+                onChange={(e) => {
+                  setTodo(e.target.value);
+                }}
+              />
+            )}
+            <button onClick={() => removeTodo(t.id)}>Remove</button>
+            <button onClick={() => updateTodo(t.id)}>Update</button>
+          </div>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Todo;
diff --git a/src/All Assessment/assessment22/readme.md b/src/All Assessment/assessment22/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment22/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/All Assessment/assessment22/styles.css b/src/All Assessment/assessment22/styles.css
new file mode 100644
index 0000000..a7b5f46
--- /dev/null
+++ b/src/All Assessment/assessment22/styles.css	
@@ -0,0 +1,12 @@
+.progress-bar {
+    animation: progress 6s linear forwards;
+  }
+  
+  @keyframes progress {
+    from {
+      width: 100%;
+    }
+    to {
+      width: 0%;
+    }
+  }
\ No newline at end of file
diff --git a/src/All Assessment/assessment23/Counter_p.jsx b/src/All Assessment/assessment23/Counter_p.jsx
new file mode 100644
index 0000000..51cfdf5
--- /dev/null
+++ b/src/All Assessment/assessment23/Counter_p.jsx	
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+
+const Counter_p = () => {
+  const [count, setCount] = useState(10);
+  const [size, setSize] = useState(1);
+
+  const handleSizeChange = (e) => {
+    const newSize = parseInt(e.target.value, 10) || 1; // Ensure size is a number and defaults to 1
+    setSize(newSize);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-gray-100">
+      <div className="flex gap-4 items-center mb-5">
+        <button
+          className="px-4 py-2 bg-green-500 text-white rounded shadow hover:bg-green-600"
+          onClick={() => setCount((prev) => prev + size)}
+        >
+          +
+        </button>
+        <p className="text-xl font-bold">{count}</p>
+        <button
+          className="px-4 py-2 bg-red-500 text-white rounded shadow hover:bg-red-600"
+          onClick={() => setCount((prev) => (prev > 0 ? prev - size : 0))}
+        >
+          -
+        </button>
+      </div>
+
+      <button
+        className="mb-5 px-4 py-2 bg-blue-500 text-white rounded shadow hover:bg-blue-600"
+        onClick={() => setCount(0)}
+      >
+        RESET
+      </button>
+
+      <div className="flex gap-3 items-center">
+        <input
+          type="number"
+          placeholder="Step size"
+          className="px-3 py-2 border rounded shadow focus:outline-none focus:ring-2 focus:ring-blue-400"
+          onChange={handleSizeChange}
+        />
+        <p className="text-gray-700">Current step: {size}</p>
+      </div>
+    </div>
+  );
+};
+
+export default Counter_p;
diff --git a/src/All Assessment/assessment23/readme.md b/src/All Assessment/assessment23/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment23/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/All Assessment/assessment24/FormValidation.jsx b/src/All Assessment/assessment24/FormValidation.jsx
new file mode 100644
index 0000000..330b7bf
--- /dev/null
+++ b/src/All Assessment/assessment24/FormValidation.jsx	
@@ -0,0 +1,99 @@
+import React, { useState } from "react";
+import GoToHome from "../../Components/GoToHome";
+
+const FormValidation = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [errors, setErrors] = useState({});
+
+  const validateForm = () => {
+    const newErrors = {};
+
+    if (!name.trim()) {
+      newErrors.name = "Name is required.";
+    }
+    if (!email.trim()) {
+      newErrors.email = "Email is required.";
+    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+      newErrors.email = "Invalid email format.";
+    }
+    if (!password.trim()) {
+      newErrors.password = "Password is required.";
+    } else if (password.length < 6) {
+      newErrors.password = "Password must be at least 6 characters.";
+    }
+
+    return newErrors;
+  };
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    const formErrors = validateForm();
+    if (Object.keys(formErrors).length > 0) {
+      setErrors(formErrors);
+    } else {
+      alert("Form submitted successfully!");
+      setErrors({});
+      // Reset fields after submission
+      setName("");
+      setEmail("");
+      setPassword("");
+    }
+  };
+
+  return (
+    <div className="h-screen flex justify-center items-center bg-gray-100">
+    
+      <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
+        <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
+        <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
+          <div>
+            <input
+              type="text"
+              placeholder="Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.name && (
+              <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+            )}
+          </div>
+          <div>
+            <input
+              type="email"
+              placeholder="abc@xyz.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.email && (
+              <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+            )}
+          </div>
+          <div>
+            <input
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="border-2 p-2 w-full rounded"
+            />
+            {errors.password && (
+              <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+            )}
+          </div>
+          <button
+            type="submit"
+            className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
+          >
+            Submit
+          </button>
+          <GoToHome />
+        </form>
+      </div>
+    </div>
+  );
+};
+export default FormValidation;
diff --git a/src/All Assessment/assessment24/readme.md b/src/All Assessment/assessment24/readme.md
new file mode 100644
index 0000000..93ba11c
--- /dev/null
+++ b/src/All Assessment/assessment24/readme.md	
@@ -0,0 +1 @@
+## Blink game
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
index 11aa129..7184c7e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -34,7 +34,11 @@ import Code from "./Components/Code_Snippet/Code";
 import FollowingCurser from "./All Assessment/assessment19/FollowingCurser";
 
 import Debouncing from "./All Assessment/assessment19/Debouncing";
-
+import Toster from "./All Assessment/assessment21/Toster";
+import MyToaster from "./All Assessment/assessment21/MyToaster";
+import Todo from "./All Assessment/assessment22/Todo";
+import Counter_p from './All Assessment/assessment23/Counter_p'
+import FormValidation from "./All Assessment/assessment24/FormValidation";
 
 ReactGA.initialize("G-R3DJ0V5QK6");
 
@@ -104,6 +108,14 @@ const App = () => {
         <Route path="/problems" element={<ProblemsPage />} />
         <Route path="/feedback" element={<Feedback />} />
         <Route path="/debouncing" element={<Debouncing />} />
+        <Route path="/toster" element={<Toster />} />
+        <Route path="/mytoster" element={<MyToaster />} />
+        <Route path="/todo" element={<Todo />} />
+        <Route path="/counter_p" element={<Counter_p />} />
+        <Route path="/formValidation" element={<FormValidation />} />
+
+
+        
         <Route
           path="/code"
           element={<Code code={exampleCode} language="javascript" />}
diff --git a/src/Utils.js b/src/Utils.js
index 04ad087..c99e885 100644
--- a/src/Utils.js
+++ b/src/Utils.js
@@ -77,8 +77,29 @@ export const buttonDetails = [
     name: "following-curser",
     description: "following curser."
   },
+  {
     name: "Debouncing",
     description: "Impliment Debouncing."
+  },
+  {
+    name: "Toster",
+    description: "Toster message trigger on event."
+  },
+  {
+    name: "MyToster",
+    description: "Toster message trigger on event jo ki maine khud banaya hai"
+  },
+  {
+    name: "Todo",
+    description: "Basic todo app using local storage"
+  },
+  {
+    name: "Counter_p",
+    description: "Advanced Counter "
+  },
+  {
+    name: "FormValidation",
+    description: "Advanced Counter "
   }
 ];
 
@@ -484,10 +505,8 @@ export const categories = [
 
 export const ServiceId = "service_gtb4j1e";
 
-
 export const Arun_M_questions = {
   questions: [
-    
     {
       id: 1,
       title: "Implement Debounce",
@@ -536,7 +555,15 @@ export const Arun_M_questions = {
       link: "https://github.com/sameerkali/React_coding_round_practice",
       description: "Implement function currying with placeholders.",
       difficulty: "hard",
-      askedIn: ["Amazon", "Flipkart", "Yandex", "Xiaomi", "Vimeo", "Gojek", "Zeta"]
+      askedIn: [
+        "Amazon",
+        "Flipkart",
+        "Yandex",
+        "Xiaomi",
+        "Vimeo",
+        "Gojek",
+        "Zeta"
+      ]
     },
     {
       id: 5,
@@ -604,7 +631,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement a system for automatically retrying failed promises.",
+      description:
+        "Implement a system for automatically retrying failed promises.",
       difficulty: "medium",
       askedIn: ["Amazon", "Flipkart", "Adobe", "Paypal", "Swiggy"]
     },
@@ -616,7 +644,16 @@ export const Arun_M_questions = {
       link: "https://github.com/sameerkali/React_coding_round_practice",
       description: "Implement the Promise.all() method.",
       difficulty: "medium",
-      askedIn: ["TikTok", "Lyft", "Snapchat", "Disney+ Hotstar", "MakeMyTrip", "Jio", "MindTickle", "Zepto"]
+      askedIn: [
+        "TikTok",
+        "Lyft",
+        "Snapchat",
+        "Disney+ Hotstar",
+        "MakeMyTrip",
+        "Jio",
+        "MindTickle",
+        "Zepto"
+      ]
     },
     {
       id: 13,
@@ -974,7 +1011,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement a custom version of the classnames library for React.",
+      description:
+        "Implement a custom version of the classnames library for React.",
       difficulty: "medium",
       askedIn: ["Meta"]
     },
@@ -984,7 +1022,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement a custom version of Redux using the Immer library.",
+      description:
+        "Implement a custom version of Redux using the Immer library.",
       difficulty: "medium",
       askedIn: []
     },
@@ -1024,7 +1063,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement a virtualized list to efficiently render large lists of items.",
+      description:
+        "Implement a virtualized list to efficiently render large lists of items.",
       difficulty: "hard",
       askedIn: ["Google"]
     },
@@ -1034,7 +1074,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Use the Context API to implement theme switching across a React application.",
+      description:
+        "Use the Context API to implement theme switching across a React application.",
       difficulty: "medium",
       askedIn: ["Amazon"]
     },
@@ -1044,7 +1085,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create a custom React hook for data fetching with error handling and loading states.",
+      description:
+        "Create a custom React hook for data fetching with error handling and loading states.",
       difficulty: "medium",
       askedIn: ["Netflix"]
     },
@@ -1054,7 +1096,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Develop an image carousel component with auto-slide and manual navigation.",
+      description:
+        "Develop an image carousel component with auto-slide and manual navigation.",
       difficulty: "easy",
       askedIn: ["Microsoft"]
     },
@@ -1064,7 +1107,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement form validation using Formik and Yup for a user registration form.",
+      description:
+        "Implement form validation using Formik and Yup for a user registration form.",
       difficulty: "medium",
       askedIn: ["Apple"]
     },
@@ -1084,7 +1128,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement a debounce function to limit the rate at which a function is executed.",
+      description:
+        "Implement a debounce function to limit the rate at which a function is executed.",
       difficulty: "medium",
       askedIn: ["LinkedIn"]
     },
@@ -1094,7 +1139,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create a Markdown previewer that converts Markdown input to HTML in real-time.",
+      description:
+        "Create a Markdown previewer that converts Markdown input to HTML in real-time.",
       difficulty: "easy",
       askedIn: ["Twitter"]
     },
@@ -1104,7 +1150,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement a product filter component for an e-commerce website.",
+      description:
+        "Implement a product filter component for an e-commerce website.",
       difficulty: "medium",
       askedIn: ["Shopify"]
     },
@@ -1124,7 +1171,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create a real-time data visualization dashboard using D3.js and React.",
+      description:
+        "Create a real-time data visualization dashboard using D3.js and React.",
       difficulty: "hard",
       askedIn: ["Tesla"]
     },
@@ -1134,7 +1182,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Build a dynamic form builder that allows users to create and customize forms.",
+      description:
+        "Build a dynamic form builder that allows users to create and customize forms.",
       difficulty: "medium",
       askedIn: ["Salesforce"]
     },
@@ -1144,7 +1193,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create a responsive navbar that collapses and expands based on screen size.",
+      description:
+        "Create a responsive navbar that collapses and expands based on screen size.",
       difficulty: "easy",
       askedIn: ["Adobe"]
     },
@@ -1154,7 +1204,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Develop a weather application that uses geolocation to fetch weather data for the user's current location.",
+      description:
+        "Develop a weather application that uses geolocation to fetch weather data for the user's current location.",
       difficulty: "medium",
       askedIn: ["IBM"]
     },
@@ -1164,7 +1215,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create a recipe finder app that fetches recipes from an external API based on user input.",
+      description:
+        "Create a recipe finder app that fetches recipes from an external API based on user input.",
       difficulty: "easy",
       askedIn: ["Pinterest"]
     },
@@ -1174,7 +1226,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement custom scrollbars for a web application using CSS and JavaScript.",
+      description:
+        "Implement custom scrollbars for a web application using CSS and JavaScript.",
       difficulty: "medium",
       askedIn: ["Slack"]
     },
@@ -1184,7 +1237,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create an animated SVG graphic using React and CSS animations.",
+      description:
+        "Create an animated SVG graphic using React and CSS animations.",
       difficulty: "hard",
       askedIn: ["Spotify"]
     },
@@ -1194,7 +1248,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Develop a real-time collaborative text editor using WebSockets.",
+      description:
+        "Develop a real-time collaborative text editor using WebSockets.",
       difficulty: "hard",
       askedIn: ["Dropbox"]
     },
@@ -1204,7 +1259,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Build a video player component with custom controls and full-screen functionality.",
+      description:
+        "Build a video player component with custom controls and full-screen functionality.",
       difficulty: "medium",
       askedIn: ["YouTube"]
     },
@@ -1214,7 +1270,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create an image gallery with a lightbox feature for viewing images in a modal.",
+      description:
+        "Create an image gallery with a lightbox feature for viewing images in a modal.",
       difficulty: "easy",
       askedIn: ["Flickr"]
     },
@@ -1224,7 +1281,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Build a tool that converts Markdown input into HTML output in real-time.",
+      description:
+        "Build a tool that converts Markdown input into HTML output in real-time.",
       difficulty: "medium",
       askedIn: ["Medium"]
     },
@@ -1234,7 +1292,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement a shopping cart feature for an e-commerce site with add, remove, and update functionalities.",
+      description:
+        "Implement a shopping cart feature for an e-commerce site with add, remove, and update functionalities.",
       difficulty: "medium",
       askedIn: ["Amazon"]
     },
@@ -1244,7 +1303,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Integrate a GraphQL API into a React application and perform queries and mutations.",
+      description:
+        "Integrate a GraphQL API into a React application and perform queries and mutations.",
       difficulty: "hard",
       askedIn: ["Airbnb"]
     },
@@ -1254,7 +1314,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement state management using Redux in a React application.",
+      description:
+        "Implement state management using Redux in a React application.",
       difficulty: "medium",
       askedIn: ["PayPal"]
     },
@@ -1264,7 +1325,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Create a voice recognition feature to interact with a web application using the Web Speech API.",
+      description:
+        "Create a voice recognition feature to interact with a web application using the Web Speech API.",
       difficulty: "hard",
       askedIn: ["Google"]
     },
@@ -1274,7 +1336,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Develop a password strength indicator to provide feedback on the strength of user passwords.",
+      description:
+        "Develop a password strength indicator to provide feedback on the strength of user passwords.",
       difficulty: "easy",
       askedIn: ["Twitter"]
     },
@@ -1284,7 +1347,8 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Implement server-side rendering for a React application using Next.js.",
+      description:
+        "Implement server-side rendering for a React application using Next.js.",
       difficulty: "medium",
       askedIn: ["Netflix"]
     },
@@ -1294,12 +1358,20 @@ export const Arun_M_questions = {
       date: "25 July 2024",
       author: "sameerkali",
       link: "https://github.com/sameerkali/React_coding_round_practice",
-      description: "Enhance the accessibility of a web application by implementing ARIA roles and keyboard navigation.",
+      description:
+        "Enhance the accessibility of a web application by implementing ARIA roles and keyboard navigation.",
       difficulty: "medium",
       askedIn: ["Microsoft"]
     },
-    
-    
-    
+    {
+      id: 81,
+      title: "Following Curser",
+      date: "20 August 2024",
+      author: "sameerkali",
+      link: "https://github.com/sameerkali/React_coding_round_practice",
+      description: "A circle that follows the Curser",
+      difficulty: "easy",
+      askedIn: [""]
+    }
   ]
-}
\ No newline at end of file
+};