diff --git a/Frontend/package.json b/Frontend/package.json
index fcb8cefa..b8149ba6 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -19,6 +19,7 @@
     "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.6.0",
         "react-router-dom": "^6.4.2"
     },
     "devDependencies": {
diff --git a/Frontend/src/pages/login/Login.jsx b/Frontend/src/pages/login/Login.jsx
index aa4bf1e2..156ab82e 100644
--- a/Frontend/src/pages/login/Login.jsx
+++ b/Frontend/src/pages/login/Login.jsx
@@ -1,8 +1,25 @@
-import React from "react"
+import React, { useState } from "react"
 import "./login.css"
 import { Link } from "react-router-dom"
+import { AiOutlineEyeInvisible, AiOutlineEye } from "react-icons/ai";
 
 function Login() {
+    const [ emailInput, setEmailInput] = useState("");
+    const[ passwordInput, setPasswordInput] = useState("");
+    const [ passwordType, setPasswordType] = useState("password");
+    const [isPassword, setIsPassword] = useState(true);
+
+    const handleToggle = () => {
+        if (isPassword) {
+            setPasswordType("text")
+            setIsPassword(false);
+        } else {
+            setPasswordType("password");
+            setIsPassword(true);
+        }
+        return setIsPassword(!isPassword);
+    }
+
     return (
         <div>
             <section className="container forms">
@@ -24,16 +41,20 @@ function Login() {
 
                         <form action="#">
                             <div className="field input-field">
-                                <input type="email" placeholder="Email" className="input" />
+                                <input value={emailInput} type="email" placeholder="Email" className="input" onChange={(e) => setEmailInput(e.target.value)}/>
                             </div>
 
                             <div className="field input-field">
                                 <input
-                                    type="password"
+                                    value={passwordInput}
+                                    type={passwordType}
                                     placeholder="Password"
                                     className="password"
+                                    onChange={(e) => setPasswordInput(e.target.value)}
                                 />
-                                <i className="bx bx-hide eye-icon" />
+                                 <div role="presentation" className="eye-icon" onClick={handleToggle}>
+                                 {isPassword ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
+                                </div>
                             </div>
 
                             <div className="field button-field">
diff --git a/Frontend/src/pages/signup/Signup.jsx b/Frontend/src/pages/signup/Signup.jsx
index c0f7ba2e..a5a2e034 100644
--- a/Frontend/src/pages/signup/Signup.jsx
+++ b/Frontend/src/pages/signup/Signup.jsx
@@ -1,8 +1,25 @@
-import React from "react"
+import React, { useState } from "react"
 import "./signup.css"
 import { Link } from "react-router-dom"
+import { AiOutlineEyeInvisible, AiOutlineEye } from "react-icons/ai"
 
 function Signup() {
+    const [ nameInput, setNameInput] = useState("");
+    const [ emailInput, setEmailInput] = useState("");
+    const [ passwordInput, setPasswordInput] = useState("");
+    const [ passwordType, setPasswordType] = useState("password");
+    const [ isPassword, setIsPassword] = useState(true);
+
+    const handleToggle = () => {
+        if (isPassword) {
+            setPasswordType("text")
+            setIsPassword(false);
+        } else {
+            setPasswordType("password");
+            setIsPassword(true);
+        }
+        return setIsPassword(!isPassword);
+    }
     return (
         <section className="container forms">
             <div className="form login">
@@ -11,15 +28,18 @@ function Signup() {
 
                     <form action="#">
                         <div className="field input-field">
-                            <input type="text" placeholder="Full Name" className="input" />
+                            <input value={nameInput} type="text" placeholder="Full Name" className="input" onChange={(e) => setNameInput(e.target.value)} />
                         </div>
 
                         <div className="field input-field">
-                            <input type="email" placeholder="Email" className="input" />
+                            <input value={emailInput} type="email" placeholder="Email" className="input" onChange={(e) => setEmailInput(e.target.value)}/>
                         </div>
                         <div className="field input-field">
-                            <input type="password" placeholder="Password" className="password" />
-                            <i className="bx bx-hide eye-icon" />
+                            <input value={passwordInput} type={passwordType} placeholder="Password" className="password" onChange={(e) => setPasswordInput(e.target.value)}/>
+                            
+                            <div role="presentation" className="eye-icon" onClick={handleToggle}>
+                                 {isPassword ? <AiOutlineEye /> : <AiOutlineEyeInvisible />}
+                            </div>
                         </div>
 
                         <div className="field button-field">