diff --git a/src/Login/Login.css b/src/Login/Login.css
index 50dacdd..953037f 100644
--- a/src/Login/Login.css
+++ b/src/Login/Login.css
@@ -106,8 +106,4 @@ min-height: 100vh;
     position: absolute;
     right: 10px;
     top:22px;
-  }
-  .eyes:nth-child(2)
-  {
-      display: none;
   }
\ No newline at end of file
diff --git a/src/Login/Login.jsx b/src/Login/Login.jsx
index 9f12736..2466600 100644
--- a/src/Login/Login.jsx
+++ b/src/Login/Login.jsx
@@ -16,25 +16,8 @@ function Login() {
   const [modalMessage, setModalMessage] = useState("");
   const [isError, setIsError] = useState(false);
   const [isLoading, setIsLoading] = useState(false); // Loading state
-  const [t, setToggle] = useState("block");
+  const [d, setDisplay] = useState(false);
   const navigate = useNavigate(); // Initialize useNavigate
-  const toggled = () => {
-    const input = document.getElementsByClassName("password-eye")[0];
-    const eyes1 = document.getElementsByClassName("eyes")[0];
-    const eyes2 = document.getElementsByClassName("eyes")[1];
-    if (t === "none") {
-      eyes1.style.display = "none";
-      eyes2.style.display = "block";
-      input.type = "password";
-      setToggle("block");
-    }
-    else {
-      eyes2.style.display = "none";
-      eyes1.style.display = "block";
-      input.type = "text";
-      setToggle("none");
-    }
-  }
 
   useEffect(() => {
     // Check if session ID exists in local storage and is still valid
@@ -56,7 +39,7 @@ function Login() {
 
   const handleLogin = (e) => {
     e.preventDefault();
-    setIsLoading(true); 
+    setIsLoading(true);
 
     axios
       .post("http://localhost:5000/teacher/login", { email, password })
@@ -84,7 +67,8 @@ function Login() {
     axios
       .post("http://localhost:5000/teacher/verify-otp", { email, otp })
       .then((response) => {
-        const { sessionId, message, teacherId, name, email, mobileNumber } = response.data;
+        const { sessionId, message, teacherId, name, email, mobileNumber } =
+          response.data;
 
         // Set modal state first
         setModalMessage(message);
@@ -124,67 +108,91 @@ function Login() {
 
   return (
     <div className="lpgin-container-main">
-    <div className="login-container">
-      <img src={logo} alt="Logo" />
-      <h2>Teacher : Login</h2>
-      <form onSubmit={showOtp ? handleSubmit : handleLogin}>
-        <div>
-          <label>Email:</label>
+      <div className="login-container">
+        <img src={logo} alt="Logo" />
+        <h2>Teacher : Login</h2>
+        <form onSubmit={showOtp ? handleSubmit : handleLogin}>
           <div>
-            <input
-              type="email"
-              value={email}
-              placeholder="Enter your Email"
-              onChange={(e) => setEmail(e.target.value)}
-              disabled = {showOtp}
-              required
-            />
+            <label>Email:</label>
+            <div>
+              <input
+                type="email"
+                value={email}
+                placeholder="Enter your Email"
+                onChange={(e) => setEmail(e.target.value)}
+                disabled={showOtp}
+                required
+              />
+            </div>
           </div>
-        </div>
 
-        <div>
-          <label>Password:</label>
-          <div className="eye-container">
-            <input
-              type="password"
-              placeholder="Enter Your Password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              disabled = {showOtp}
-              required
-              className="password-eye"
-            />
-            <FaEye className="eyes" onClick={() => toggled()} />
-            <FaEyeSlash className="eyes" onClick={() => toggled()} />
-          </div>
-        </div>
-        {showOtp && (
           <div>
-            <label>OTP:</label>
-            <div>
+            <label>Password:</label>
+            <div className="eye-container">
               <input
-                type="text"
-                placeholder="Enter OTP"
-                value={otp}
-                onChange={(e) => setOtp(e.target.value)}
+                type={d ? "text" : "password"}
+                placeholder="Enter Your Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                disabled={showOtp}
                 required
+                className="password-eye"
               />
+              {d ? (
+                <FaEye
+                  className="eyes"
+                  onClick={() => {
+                    setDisplay(false);
+                  }}
+                />
+              ) : (
+                <FaEyeSlash
+                  className="eyes"
+                  onClick={() => {
+                    setDisplay(true);
+                  }}
+                />
+              )}
             </div>
           </div>
-        )}
-        <p className="login_forgot_password" onClick={() => navigate("/forgot_password")}>Forgot Password?</p>
-        <button type="submit" disabled={isLoading}>
-          {isLoading ? "Submiting..." : showOtp ? "Submit" : "Next"}
-        </button>
-        <p className="signup_text_redirect" onClick={() => navigate("/sign_up")}> Want to create Account? Signup. </p>
-      </form>
-      <AlertModal
-        isOpen={modalIsOpen}
-        onClose={handleCloseModal}
-        message={modalMessage}
-        iserror={isError}
-      />
-    </div>
+          {showOtp && (
+            <div>
+              <label>OTP:</label>
+              <div>
+                <input
+                  type="text"
+                  placeholder="Enter OTP"
+                  value={otp}
+                  onChange={(e) => setOtp(e.target.value)}
+                  required
+                />
+              </div>
+            </div>
+          )}
+          <p
+            className="login_forgot_password"
+            onClick={() => navigate("/forgot_password")}
+          >
+            Forgot Password?
+          </p>
+          <button type="submit" disabled={isLoading}>
+            {isLoading ? "Submiting..." : showOtp ? "Submit" : "Next"}
+          </button>
+          <p
+            className="signup_text_redirect"
+            onClick={() => navigate("/sign_up")}
+          >
+            {" "}
+            Want to create Account? Signup.{" "}
+          </p>
+        </form>
+        <AlertModal
+          isOpen={modalIsOpen}
+          onClose={handleCloseModal}
+          message={modalMessage}
+          iserror={isError}
+        />
+      </div>
     </div>
   );
 }
diff --git a/src/Reset_Password/Reset_Password.css b/src/Reset_Password/Reset_Password.css
index bd86321..8600654 100644
--- a/src/Reset_Password/Reset_Password.css
+++ b/src/Reset_Password/Reset_Password.css
@@ -86,10 +86,6 @@
 {
     cursor: pointer;
 }
-.eye-icon
-{
-    display: none;
-}
 @media (max-width:720px)
 {
     .reset-container
diff --git a/src/Reset_Password/Reset_Password.jsx b/src/Reset_Password/Reset_Password.jsx
index 5504107..9dec4f4 100644
--- a/src/Reset_Password/Reset_Password.jsx
+++ b/src/Reset_Password/Reset_Password.jsx
@@ -7,135 +7,140 @@ import { useNavigate, useLocation } from "react-router-dom";
 import AlertModal from "../AlertModal/AlertModal";
 import Loader from "../Loader/Loader";
 
-
 const Reset_Password = () => {
-    const [password, setPassword] = useState("");
-    const [confirmPassword, setConfirmPassword] = useState("");
-    const [d0, setDisplay0] = useState("block");
-    const [d1, setDisplay1] = useState("block");
-    const [message, setMessage] = useState("");
-    const [modalIsOpen, setModalIsOpen] = useState(false); // Modal state
-    const [loading,setLoading] = useState(true);
-    const [isError, setIsError] = useState(false); // Error state for modal
-    const navigate = useNavigate();
-    const location = useLocation();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [d1, setDisplay1] = useState(false);
+  const [d2, setDisplay2] = useState(false);
+  const [message, setMessage] = useState("");
+  const [modalIsOpen, setModalIsOpen] = useState(false); // Modal state
+  const [loading, setLoading] = useState(true);
+  const [isError, setIsError] = useState(false); // Error state for modal
+  const navigate = useNavigate();
+  const location = useLocation();
 
-    useEffect(()=>
-    {
-        setTimeout(()=>{setLoading(false)},1000);
-    },[]);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
 
-    const toggleEye = (index) => {
-        const input = document.getElementsByClassName("password-toggle")[index];
-        const eye = document.getElementsByClassName("eye-icon")[index];
-        const eye_slash = document.getElementsByClassName("eye-icon-slash")[index];
-        if (index === 0) {
-            if (d0 === "none") {
-                eye.style.display = "none";
-                eye_slash.style.display = "block";
-                input.type = "password";
-                setDisplay0("block");
-            } else {
-                eye_slash.style.display = "none";
-                eye.style.display = "block";
-                input.type = "text";
-                setDisplay0("none");
-            }
-        } else {
-            if (d1 === "none") {
-                eye.style.display = "none";
-                eye_slash.style.display = "block";
-                input.type = "password";
-                setDisplay1("block");
-            } else {
-                eye_slash.style.display = "none";
-                eye.style.display = "block";
-                input.type = "text";
-                setDisplay1("none");
-            }
-        }
-    };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setMessage("Passwords do not match");
+      setIsError(true);
+      setModalIsOpen(true);
+      return;
+    }
 
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (password !== confirmPassword) {
-            setMessage("Passwords do not match");
-            setIsError(true);
-            setModalIsOpen(true);
-            return;
-        }
+    const urlParams = new URLSearchParams(location.search);
+    const token = urlParams.get("token");
+    const email = urlParams.get("email");
 
-        const urlParams = new URLSearchParams(location.search);
-        const token = urlParams.get("token");
-        const email = urlParams.get("email");
-
-        try {
-            const response = await axios.post("http://localhost:5000/teacher/reset-password", {
-                token,
-                email,
-                newPassword: password,
-            });
-            setMessage(response.data.message);
-            setIsError(false);
-            setModalIsOpen(true);
-            setTimeout(() => {
-                setModalIsOpen(false);
-                navigate("/Login");
-            }, 3000);
-        } catch (error) {
-            setMessage(error.response?.data?.error || "Something went wrong. Please try again.");
-            setIsError(true);
-            setModalIsOpen(true);
+    try {
+      const response = await axios.post(
+        "http://localhost:5000/teacher/reset-password",
+        {
+          token,
+          email,
+          newPassword: password,
         }
-    };
+      );
+      setMessage(response.data.message);
+      setIsError(false);
+      setModalIsOpen(true);
+      setTimeout(() => {
+        setModalIsOpen(false);
+        navigate("/Login");
+      }, 3000);
+    } catch (error) {
+      setMessage(
+        error.response?.data?.error || "Something went wrong. Please try again."
+      );
+      setIsError(true);
+      setModalIsOpen(true);
+    }
+  };
 
-    return (
-        <div className="reset-container-main">
-            {loading ? (<Loader />) : (<>
-                <div className="reset-container">
+  return (
+    <div className="reset-container-main">
+      {loading ? (
+        <Loader />
+      ) : (
+        <>
+          <div className="reset-container">
             <img alt="logo" src={Logo} />
             <h2>Teacher: Reset Password</h2>
             <form onSubmit={handleSubmit}>
-                <label>Password:</label>
-                <div className="input-password">
-                    <input 
-                        type="password" 
-                        placeholder="Enter your New Password" 
-                        className="password-toggle" 
-                        value={password} 
-                        onChange={(e) => setPassword(e.target.value)}
-                        required
-                    />
-                    <FaEye className="eye-icon" onClick={() => { toggleEye(0); }} />
-                    <FaEyeSlash className="eye-icon-slash" onClick={() => { toggleEye(0); }} />
-                </div>
-                <label>Confirm Password:</label>
-                <div className="input-password">
-                    <input 
-                        type="password" 
-                        placeholder="Confirm your New Password" 
-                        className="password-toggle" 
-                        value={confirmPassword} 
-                        onChange={(e) => setConfirmPassword(e.target.value)}
-                        required
-                    />
-                    <FaEye className="eye-icon" onClick={() => { toggleEye(1); }} />
-                    <FaEyeSlash className="eye-icon-slash" onClick={() => { toggleEye(1); }} />
-                </div>
-                <button type="submit">Reset Password</button>
+              <label>Password:</label>
+              <div className="input-password">
+                <input
+                  type={d1 ? "text" : "password"}
+                  placeholder="Enter your New Password"
+                  className="password-toggle"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+                {d1 ? (
+                  <FaEye
+                    className="eye-icon"
+                    onClick={() => {
+                        setDisplay1(false);
+                    }}
+                  />
+                ) : (
+                  <FaEyeSlash
+                    className="eye-icon-slash"
+                    onClick={() => {
+                      setDisplay1(true);
+                    }}
+                  />
+                )}
+              </div>
+              <label>Confirm Password:</label>
+              <div className="input-password">
+                <input
+                  type={d2 ? "text" : "password"}
+                  placeholder="Confirm your New Password"
+                  className="password-toggle"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  required
+                />
+                {
+                    d2 ? 
+                    (<FaEye
+                        className="eye-icon"
+                        onClick={() => {
+                          setDisplay2(false);
+                        }}
+                      />) 
+                    :
+                    (<FaEyeSlash
+                        className="eye-icon-slash"
+                        onClick={() => {
+                          setDisplay2(true);
+                        }}
+                    />)
+                }
+              </div>
+              <button type="submit">Reset Password</button>
             </form>
-            
+
             {/* Use the AlertModal component */}
             <AlertModal
-                isOpen={modalIsOpen} 
-                onClose={() => setModalIsOpen(false)} 
-                message={message} 
-                iserror={isError} 
+              isOpen={modalIsOpen}
+              onClose={() => setModalIsOpen(false)}
+              message={message}
+              iserror={isError}
             />
-        </div>
-            </>)}
-        </div>
-    );
+          </div>
+        </>
+      )}
+    </div>
+  );
 };
 
 export default Reset_Password;
diff --git a/src/Sign_up/SignUp.jsx b/src/Sign_up/SignUp.jsx
index 9045115..93d16d9 100644
--- a/src/Sign_up/SignUp.jsx
+++ b/src/Sign_up/SignUp.jsx
@@ -21,53 +21,16 @@ const SignUp = () => {
   const [alertMessage, setAlertMessage] = useState("");
   const [isErrorAlert, setIsErrorAlert] = useState(false);
   const [loading, setLoading] = useState(false); // Loading state for signup button
-  const [loadingSpinner,setLoadingSpinner] = useState(true);
+  const [loadingSpinner, setLoadingSpinner] = useState(true);
   const [isFirstClick, setIsFirstClick] = useState(true); // Track if it is the first click
-  const [d0,setToggle0] = useState("block");
-  const [d1,setToggle1] = useState("block");
+  const [d1, setDisplay1] = useState(false);
+  const [d2, setDisplay2] = useState(false);
 
-  useEffect(()=>{setTimeout(()=>{setLoadingSpinner(false);},1000);},[]);
-
-  const toggled=(index)=>
-  {
-      const input=document.getElementsByClassName("password-eye")[index];
-      const eye0=document.getElementsByClassName("eye-icon-signup")[index];
-      const eye1=document.getElementsByClassName("eye-icon-slash-signup")[index];
-      if(index==0)
-      {
-          if(d0==="block")
-          {
-              eye1.style.display="none";
-              eye0.style.display="block";
-              input.type="text";
-              setToggle0("none");
-          }
-          else
-          {
-              eye0.style.display="none";
-              eye1.style.display="block";
-              input.type="password";
-              setToggle0("block");
-          }
-      }
-      else
-      {
-        if(d1==="block")
-        {
-            eye1.style.display="none";
-            eye0.style.display="block";
-            input.type="text";
-            setToggle1("none");
-        }
-        else
-        {
-            eye0.style.display="none";
-            eye1.style.display="block";
-            input.type="password";
-            setToggle1("block");
-        }
-      }
-  }
+  useEffect(() => {
+    setTimeout(() => {
+      setLoadingSpinner(false);
+    }, 1000);
+  }, []);
 
   const handleChange = (e) => {
     setFormData({
@@ -123,116 +86,149 @@ const SignUp = () => {
     }
 
     if (isFirstClick) {
-      setIsWarningOpen(true); 
-      setIsFirstClick(false); 
+      setIsWarningOpen(true);
+      setIsFirstClick(false);
     } else {
-      handleSignUp(); 
+      handleSignUp();
     }
   };
 
   const handleWarningConfirm = () => {
-    setIsWarningOpen(false); 
+    setIsWarningOpen(false);
     handleSignUp();
   };
 
   const handleAlertConfirm = () => {
-    setIsAlertOpen(false); 
-    navigate("/verify_passcode"); 
+    setIsAlertOpen(false);
+    navigate("/verify_passcode");
   };
 
   return (
     <div className="sign_up_Box_min">
-      {loadingSpinner ? (<Loader />) : (<>
-        <div className="Sign_up_Box">
-        <img src={var1} alt="" />
-        <h3>Teacher : Sign Up</h3>
-        <form onSubmit={handleFormSubmit}>
-          <div>
-            <label>
-              Name :
-              <input
-                type="text"
-                name="name"
-                placeholder="Enter your Name"
-                value={formData.name}
-                onChange={handleChange}
-                required
-              />
-            </label>
-          </div>
+      {loadingSpinner ? (
+        <Loader />
+      ) : (
+        <>
+          <div className="Sign_up_Box">
+            <img src={var1} alt="" />
+            <h3>Teacher : Sign Up</h3>
+            <form onSubmit={handleFormSubmit}>
+              <div>
+                <label>
+                  Name :
+                  <input
+                    type="text"
+                    name="name"
+                    placeholder="Enter your Name"
+                    value={formData.name}
+                    onChange={handleChange}
+                    required
+                  />
+                </label>
+              </div>
 
-          <div>
-            <label>
-              Email :
-              <input
-                type="email"
-                name="email"
-                placeholder="Enter your Email"
-                value={formData.email}
-                onChange={handleChange}
-                required
-              />
-            </label>
-          </div>
-          <div>
-            <label>
-              Mobile No.
-              <input
-                type="tel"
-                name="mobileNumber"
-                placeholder="Enter your Mobile No."
-                value={formData.mobileNumber}
-                onChange={handleChange}
-                required
-              />
-            </label>
-          </div>
-          <div>
-            <label>
-              Password:
-              <div className="eye-containers">
-                <input
-                  type="password"
-                  name="password"
-                  placeholder="Enter Your Password"
-                  value={formData.password}
-                  onChange={handleChange}
-                  required
-                  className="password-eye"
-                />
-                <FaEye className="eyes-signup eye-icon-signup" onClick={()=> toggled(0)}/>
-                <FaEyeSlash className="eyes-signup eye-icon-slash-signup" onClick={()=> toggled(0)}/>
+              <div>
+                <label>
+                  Email :
+                  <input
+                    type="email"
+                    name="email"
+                    placeholder="Enter your Email"
+                    value={formData.email}
+                    onChange={handleChange}
+                    required
+                  />
+                </label>
               </div>
-            </label>
-          </div>
-          <div>
-            <label>
-              Confirm Password:
-              <div className="eye-containers">
-                <input
-                  type="password"
-                  name="confirmPassword"
-                  placeholder="Confirm Your Password"
-                  value={formData.confirmPassword}
-                  onChange={handleChange}
-                  required
-                  className="password-eye"
-                />
-                <FaEye className="eyes-signup eye-icon-signup" onClick={()=> toggled(1)}/>
-                <FaEyeSlash className="eyes-signup eye-icon-slash-signup" onClick={()=> toggled(1)}/>
+              <div>
+                <label>
+                  Mobile No.
+                  <input
+                    type="tel"
+                    name="mobileNumber"
+                    placeholder="Enter your Mobile No."
+                    value={formData.mobileNumber}
+                    onChange={handleChange}
+                    required
+                  />
+                </label>
+              </div>
+              <div>
+                <label>
+                  Password:
+                  <div className="eye-containers">
+                    <input
+                      type={d1 ? "text" : "password"}
+                      name="password"
+                      placeholder="Enter Your Password"
+                      value={formData.password}
+                      onChange={handleChange}
+                      required
+                      className="password-eye"
+                    />
+                    {d1 ? (
+                      <FaEye
+                        className="eyes-signup eye-icon-signup"
+                        onClick={() => {
+                          setDisplay1(false);
+                        }}
+                      />
+                    ) : (
+                      <FaEyeSlash
+                        className="eyes-signup eye-icon-slash-signup"
+                        onClick={() => {
+                          setDisplay1(true);
+                        }}
+                      />
+                    )}
+                  </div>
+                </label>
+              </div>
+              <div>
+                <label>
+                  Confirm Password:
+                  <div className="eye-containers">
+                    <input
+                      type={d2 ? "text" : "password"}
+                      name="confirmPassword"
+                      placeholder="Confirm Your Password"
+                      value={formData.confirmPassword}
+                      onChange={handleChange}
+                      required
+                      className="password-eye"
+                    />
+                    {d2 ? (
+                      <FaEye
+                        className="eyes-signup eye-icon-signup"
+                        onClick={() => {
+                          setDisplay2(false);
+                        }}
+                      />
+                    ) : (
+                      <FaEyeSlash
+                        className="eyes-signup eye-icon-slash-signup"
+                        onClick={() => {
+                          setDisplay2(true);
+                        }}
+                      />
+                    )}
+                  </div>
+                </label>
               </div>
-            </label>
-          </div>
 
-          <button type="submit" disabled={loading}>
-            {loading ? "Signing up..." : "Sign up"}
-          </button>
-        </form>
-        <p className="signup_text_redirect" onClick={() => navigate("/verify_passcode")}>
-          Already Have passcode?
-        </p>
-      </div>
-      </>)}
+              <button type="submit" disabled={loading}>
+                {loading ? "Signing up..." : "Sign up"}
+              </button>
+            </form>
+            <p
+              className="signup_text_redirect"
+              onClick={() => navigate("/verify_passcode")}
+            >
+              Already Have passcode?
+            </p>
+          </div>
+        </>
+      )}
 
       {/* Warning Modal for OTP */}
       <AlertModal
@@ -246,7 +242,7 @@ const SignUp = () => {
       {/* Alert Modal for success/error messages */}
       <AlertModal
         isOpen={isAlertOpen}
-        onClose={handleAlertConfirm} 
+        onClose={handleAlertConfirm}
         message={alertMessage}
         iserror={isErrorAlert}
       />
diff --git a/src/Sign_up/Sign_up.css b/src/Sign_up/Sign_up.css
index cd422bd..211019f 100644
--- a/src/Sign_up/Sign_up.css
+++ b/src/Sign_up/Sign_up.css
@@ -8,10 +8,6 @@
     right: 10px;
     top: 15px;
 }
-.eye-icon-signup
-{
-    display: none;
-}
 .sign_up_Box_min{
     display: flex;
     align-items: center;