diff --git a/Video 130/passop-mongo/src/components/Manager.jsx b/Video 130/passop-mongo/src/components/Manager.jsx
index e60c064a..28cb9e41 100644
--- a/Video 130/passop-mongo/src/components/Manager.jsx	
+++ b/Video 130/passop-mongo/src/components/Manager.jsx	
@@ -1,19 +1,18 @@
-import React from 'react'
-import { useRef, useState, useEffect } from 'react';
-import { ToastContainer, toast } from 'react-toastify';
+import { useRef, useState, useEffect } from 'react'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
 import { v4 as uuidv4 } from 'uuid';
-import 'react-toastify/dist/ReactToastify.css';
 
 const Manager = () => {
     const ref = useRef()
     const passwordRef = useRef()
-    const [form, setform] = useState({ site: "", username: "", password: "" })
+    const [form, setform] = useState({ site: '', username: '', password: '' })
     const [passwordArray, setPasswordArray] = useState([])
 
     const getPasswords = async () => {
-        let req = await fetch("http://localhost:3000/")
+        let req = await fetch('http://localhost:3000/')
         let passwords = await req.json()
-        setPasswordArray(passwords)
+        setPasswordArray(passwords);
     }
 
 
@@ -22,46 +21,23 @@ const Manager = () => {
     }, [])
 
 
-    const copyText = (text) => {
-        toast('Copied to clipboard!', {
-            position: "top-right",
-            autoClose: 5000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-            theme: "dark",
-        });
-        navigator.clipboard.writeText(text)
+    const handleChange = (e) => {
+        setform({ ...form, [e.target.name]: e.target.value })
     }
 
     const showPassword = () => {
-        passwordRef.current.type = "text"
-        console.log(ref.current.src)
-        if (ref.current.src.includes("icons/eyecross.png")) {
-            ref.current.src = "icons/eye.png"
-            passwordRef.current.type = "password"
-        }
-        else {
-            passwordRef.current.type = "text"
-            ref.current.src = "icons/eyecross.png"
+        if (ref.current.src.includes("/crosseye.svg")) {
+            ref.current.src = "/eye.svg"
+            passwordRef.current.type = 'password'
+        } else {
+            ref.current.src = "/crosseye.svg"
+            passwordRef.current.type = 'text'
         }
-
     }
 
     const savePassword = async () => {
-        if (form.site.length > 3 && form.username.length > 3 && form.password.length > 3) {
-
-            // If any such id exists in the db, delete it 
-            await fetch("http://localhost:3000/", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: form.id }) })
-
-            setPasswordArray([...passwordArray, { ...form, id: uuidv4() }])
-            await fetch("http://localhost:3000/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ ...form, id: uuidv4() }) })
-
-            // Otherwise clear the form and show toast
-            setform({ site: "", username: "", password: "" })
-            toast('Password saved!', {
+        if (form.site === '' || form.username === '' || form.password === '') {
+            toast.error('Please fill all fields!', {
                 position: "top-right",
                 autoClose: 5000,
                 hideProgressBar: false,
@@ -69,144 +45,155 @@ const Manager = () => {
                 pauseOnHover: true,
                 draggable: true,
                 progress: undefined,
-                theme: "dark",
+                theme: "light",
             });
+            return;
         }
-        else {
-            toast('Error: Password not saved!');
+        setPasswordArray([...passwordArray, { ...form, id: uuidv4() }])
+        //while editing delete the old password
+        if (form.id) {  // Changed from form.ide to form.id
+            await fetch("http://localhost:3000/", {
+                method: 'DELETE',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ id: form.id })
+            })
         }
-
+        // localStorage.setItem('passwords', JSON.stringify([...passwordArray, { ...form, id: uuidv4() }]))
+        await fetch("http://localhost:3000/", {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ ...form, id: uuidv4() })
+        })
+        setform({ site: '', username: '', password: '' })
+        toast.success('Password saved successfully!', {
+            position: "top-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+        });
     }
-
     const deletePassword = async (id) => {
-        console.log("Deleting password with id ", id)
-        let c = confirm("Do you really want to delete this password?")
-        if (c) {
-            setPasswordArray(passwordArray.filter(item => item.id !== id))
-            
-            await fetch("http://localhost:3000/", { method: "DELETE", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id }) })
-
-            toast('Password Deleted!', {
-                position: "top-right",
-                autoClose: 5000,
-                hideProgressBar: false,
-                closeOnClick: true, 
-                draggable: true,
-                progress: undefined,
-                theme: "dark",
-            });
-        }
-
+        let confirmDelete = window.confirm("Are you sure you want to delete this password?");
+        if (!confirmDelete) return;
+        setPasswordArray(passwordArray.filter((item) => item.id !== id))
+        // localStorage.setItem('passwords', JSON.stringify(passwordArray.filter((item) => item.id !== id)))
+        let res = await fetch("http://localhost:3000/", {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ id: id })
+        })
+
+        toast.error('Password deleted successfully!', {
+            position: "top-right",
+            autoClose: 5000,
+            hideProgressBar: false,
+            closeOnClick: true,
+            pauseOnHover: true,
+            draggable: true,
+            progress: undefined,
+            theme: "light",
+        });
     }
-
     const editPassword = (id) => {
-        setform({ ...passwordArray.filter(i => i.id === id)[0], id: id })
-        setPasswordArray(passwordArray.filter(item => item.id !== id))
-    }
-
 
-    const handleChange = (e) => {
-        setform({ ...form, [e.target.name]: e.target.value })
+        setform({
+            ...passwordArray.find((item) => item.id === id),
+            id: id // keep the id same for editing
+        })
+        setPasswordArray(passwordArray.filter((item) => item.id !== id))
     }
 
-
     return (
         <>
-            <ToastContainer />
-            <div className="absolute inset-0 -z-10 h-full w-full bg-green-50 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"><div className="absolute left-0 right-0 top-0 -z-10 m-auto h-[310px] w-[310px] rounded-full bg-green-400 opacity-20 blur-[100px]"></div></div>
-            <div className=" p-3 md:mycontainer min-h-[88.2vh] ">
+            <ToastContainer
+                position="top-right"
+                autoClose={5000}
+                hideProgressBar={false}
+                newestOnTop={false}
+                closeOnClick={false}
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                theme="light"
+            />
+
+            <div className="absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem]"></div>
+            <div className="md:mycontainer">
                 <h1 className='text-4xl text font-bold text-center'>
-                    <span className='text-green-500'> &lt;</span>
-
-                    <span>Pass</span><span className='text-green-500'>OP/&gt;</span>
+                    <span className="text-green-700">&lt;</span>
+                    Pass
+                    <span className='text-[#FFD700] text-5xl'>Vault</span>
+                    <span className="text-green-700">/&gt;</span>
 
                 </h1>
-                <p className='text-green-900 text-lg text-center'>Your own Password Manager</p>
-
-                <div className="flex flex-col p-4 text-black gap-8 items-center">
-                    <input value={form.site} onChange={handleChange} placeholder='Enter website URL' className='rounded-full border border-green-500 w-full p-4 py-1' type="text" name="site" id="site" />
-                    <div className="flex flex-col md:flex-row w-full justify-between gap-8">
-                        <input value={form.username} onChange={handleChange} placeholder='Enter Username' className='rounded-full border border-green-500 w-full p-4 py-1' type="text" name="username" id="username" />
-                        <div className="relative">
-                            <input ref={passwordRef} value={form.password} onChange={handleChange} placeholder='Enter Password' className='rounded-full border border-green-500 w-full p-4 py-1' type="password" name="password" id="password" />
-                            <span className='absolute right-[3px] top-[4px] cursor-pointer' onClick={showPassword}>
-                                <img ref={ref} className='p-1' width={26} src="icons/eye.png" alt="eye" />
-                            </span>
+                <p className='text-yellow-400 text-lg text-center'>Your own password manager</p>
+
+                <div className="text-black flex flex-col p-4 gap-5">
+                    <input value={form.site} onChange={handleChange} placeholder='Enter Your Website Name' className='rounded-full border border-yellow-400 w-full p-4 py-1' type="text" name="site" id="site-name" />
+                    <div className="flex gap-8">
+                        <input value={form.username} onChange={handleChange} placeholder='Enter Your User Name' className='rounded-full border border-yellow-400 w-full p-4 py-1' type="text" name="username" id="user-name" />
+                        <div className='relative w-full'>
+                            <input ref={passwordRef} value={form.password} onChange={handleChange} placeholder='Enter Your Password' className='rounded-full border border-yellow-400 w-full p-4 py-1' type="password" name="password" id="user-password" />
+                            <span className='absolute right-2 top-0'><img ref={ref} className='p-1 cursor-pointer' onClick={showPassword} width={34} src="/eye.svg" alt="" /></span>
                         </div>
-
                     </div>
-                    <button onClick={savePassword} className='flex justify-center items-center gap-2 bg-green-400 hover:bg-green-300 rounded-full px-8 py-2 w-fit border border-green-900'>
-                        <lord-icon
-                            src="https://cdn.lordicon.com/jgnvfzqg.json"
-                            trigger="hover" >
-                        </lord-icon>
-                        Save</button>
+                    <div className='items-center flex flex-col'>
+                        <button onClick={savePassword} className='border-blue-600 border flex justify-center items-center rounded-full text-black px-2 py-2 gap-2 w-48 transition-all duration-300 bg-blue-300 hover:bg-blue-400'>
+                            <lord-icon
+                                src="https://cdn.lordicon.com/gzqofmcx.json"
+                                trigger="hover">
+                            </lord-icon>
+                            Save Password
+                        </button>
+                    </div>
                 </div>
 
                 <div className="passwords">
                     <h2 className='font-bold text-2xl py-4'>Your Passwords</h2>
-                    {passwordArray.length === 0 && <div> No passwords to show</div>}
-                    {passwordArray.length != 0 && <table className="table-auto w-full rounded-md overflow-hidden mb-10">
-                        <thead className='bg-green-800 text-white'>
+                    {passwordArray.length === 0 && <div>No passwords Found</div>}
+
+                    {passwordArray.length !== 0 && <table className="table-auto w-full overflow-hidden rounded-lg border border-yellow-400">
+                        <thead className='bg-yellow-400 text-black'>
                             <tr>
-                                <th className='py-2'>Site</th>
-                                <th className='py-2'>Username</th>
-                                <th className='py-2'>Password</th>
+                                <th className='py-2'>Site Name</th>
+                                <th className='py-2'>User Name</th>
+                                <th className='py-2'>User Password</th>
                                 <th className='py-2'>Actions</th>
                             </tr>
                         </thead>
-                        <tbody className='bg-green-100'>
+                        <tbody className='bg-yellow-100 text-black'>
                             {passwordArray.map((item, index) => {
                                 return <tr key={index}>
-                                    <td className='py-2 border border-white text-center'>
-                                        <div className='flex items-center justify-center '>
-                                            <a href={item.site} target='_blank'>{item.site}</a>
-                                            <div className='lordiconcopy size-7 cursor-pointer' onClick={() => { copyText(item.site) }}>
-                                                <lord-icon
-                                                    style={{ "width": "25px", "height": "25px", "paddingTop": "3px", "paddingLeft": "3px" }}
-                                                    src="https://cdn.lordicon.com/iykgtsbt.json"
-                                                    trigger="hover" >
-                                                </lord-icon>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td className='py-2 border border-white text-center'>
-                                        <div className='flex items-center justify-center '>
-                                            <span>{item.username}</span>
-                                            <div className='lordiconcopy size-7 cursor-pointer' onClick={() => { copyText(item.username) }}>
-                                                <lord-icon
-                                                    style={{ "width": "25px", "height": "25px", "paddingTop": "3px", "paddingLeft": "3px" }}
-                                                    src="https://cdn.lordicon.com/iykgtsbt.json"
-                                                    trigger="hover" >
-                                                </lord-icon>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td className='py-2 border border-white text-center'>
-                                        <div className='flex items-center justify-center '>
-                                            <span>{"*".repeat(item.password.length)}</span>
-                                            <div className='lordiconcopy size-7 cursor-pointer' onClick={() => { copyText(item.password) }}>
-                                                <lord-icon
-                                                    style={{ "width": "25px", "height": "25px", "paddingTop": "3px", "paddingLeft": "3px" }}
-                                                    src="https://cdn.lordicon.com/iykgtsbt.json"
-                                                    trigger="hover" >
-                                                </lord-icon>
-                                            </div>
-                                        </div>
-                                    </td>
-                                    <td className='justify-center py-2 border border-white text-center'>
-                                        <span className='cursor-pointer mx-1' onClick={() => { editPassword(item.id) }}>
+                                    <td className='border py-2 text-center w-32'>{item.site}</td>
+                                    <td className='border py-2 text-center w-32'>{item.username}</td>
+                                    <td className='border py-2 text-center w-32'>{item.password}</td>
+                                    <td className='border py-2 text-center w-32'>
+                                        <span className='cursor-pointer mx-1' onClick={() => {
+                                            editPassword(item.id)
+                                        }}>
                                             <lord-icon
-                                                src="https://cdn.lordicon.com/gwlusjdu.json"
+                                                src="https://cdn.lordicon.com/fikcyfpp.json"
                                                 trigger="hover"
-                                                style={{ "width": "25px", "height": "25px" }}>
+                                                stroke="bold">
                                             </lord-icon>
                                         </span>
-                                        <span className='cursor-pointer mx-1' onClick={() => { deletePassword(item.id) }}>
+                                        <span className='cursor-pointer mx-1' onClick={() => {
+                                            deletePassword(item.id)
+                                        }}>
                                             <lord-icon
-                                                src="https://cdn.lordicon.com/skkahier.json"
-                                                trigger="hover"
-                                                style={{ "width": "25px", "height": "25px" }}>
+                                                src="https://cdn.lordicon.com/oqeixref.json"
+                                                trigger="hover">
                                             </lord-icon>
                                         </span>
                                     </td>
@@ -216,7 +203,6 @@ const Manager = () => {
                     </table>}
                 </div>
             </div>
-
         </>
     )
 }