diff --git a/package-lock.json b/package-lock.json
index bc57870..2721515 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,5 +2,49 @@
   "name": "bio-branch",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-icons": "^5.3.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    }
+  }
 }
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..644e5da
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-icons": "^5.3.0"
+  }
+}
diff --git a/site/pages/apply.js b/site/pages/apply.js
index 262899b..79b2778 100644
--- a/site/pages/apply.js
+++ b/site/pages/apply.js
@@ -3,6 +3,8 @@ import styles from '../styles/apply.module.css';
 import { toast } from 'react-toastify';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { FaEye } from "react-icons/fa";
+import { FaEyeSlash } from "react-icons/fa";
 
 const Apply = () => {
   const router = useRouter();
@@ -10,6 +12,7 @@ const Apply = () => {
   const [category, setCategory] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
   const [submitted, setSubmitted] = useState(false);
 
   const handleCategoryChange = (e) => {
@@ -70,7 +73,7 @@ const Apply = () => {
               <span className='flex items-center shadow-md border-2 px-3 py-2 rounded-md focus:outline-none'>
                 <img className='w-6 mr-2' src="/svg/email.svg" alt="" />
                 <input
-                 className='focus:outline-none'
+                  className='focus:outline-none'
                   placeholder='Add Email'
                   type="email"
                   value={email}
@@ -82,19 +85,26 @@ const Apply = () => {
                   <path d="M 25 3 C 18.363281 3 13 8.363281 13 15 L 13 20 L 9 20 C 7.355469 20 6 21.355469 6 23 L 6 47 C 6 48.644531 7.355469 50 9 50 L 41 50 C 42.644531 50 44 48.644531 44 47 L 44 23 C 44 21.355469 42.644531 20 41 20 L 37 20 L 37 15 C 37 8.363281 31.636719 3 25 3 Z M 25 5 C 30.566406 5 35 9.433594 35 15 L 35 20 L 15 20 L 15 15 C 15 9.433594 19.433594 5 25 5 Z M 9 22 L 41 22 C 41.554688 22 42 22.445313 42 23 L 42 47 C 42 47.554688 41.554688 48 41 48 L 9 48 C 8.445313 48 8 47.554688 8 47 L 8 23 C 8 22.445313 8.445313 22 9 22 Z M 25 30 C 23.300781 30 22 31.300781 22 33 C 22 33.898438 22.398438 34.6875 23 35.1875 L 23 38 C 23 39.101563 23.898438 40 25 40 C 26.101563 40 27 39.101563 27 38 L 27 35.1875 C 27.601563 34.6875 28 33.898438 28 33 C 28 31.300781 26.699219 30 25 30 Z"></path>
                 </svg>
                 <input
-                 className='focus:outline-none'
+                  className='focus:outline-none'
                   placeholder='Add Password'
-                  type="password"
+                  type={showPassword ? "text" : "password"}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                   required
                 />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className='focus:outline-none ml-2'
+                >
+                  {showPassword ? <FaEyeSlash /> : <FaEye />}
+                </button>
               </span>
 
               <h5 className='text-center text-sm text-blue-600'>Account Type</h5>
               <span className="flex justify-between">
                 <label htmlFor="" className='flex gap-2 cursor-pointer'>
-                  <input type="radio" value='Creator' checked={category === 'Creator'} onChange={handleCategoryChange} className='cursor-pointer'/>
+                  <input type="radio" value='Creator' checked={category === 'Creator'} onChange={handleCategoryChange} className='cursor-pointer' />
                   <p>Creator</p>
                 </label>
                 <label htmlFor="" className='flex gap-2 cursor-pointer'>
@@ -102,7 +112,7 @@ const Apply = () => {
                   <p>Agency</p>
                 </label>
                 <label htmlFor="Brand" className='flex gap-2 cursor-pointer'>
-                  <input type="radio" value='Brand' checked={category === 'Brand'} onChange={handleCategoryChange} className='cursor-pointer'/>
+                  <input type="radio" value='Brand' checked={category === 'Brand'} onChange={handleCategoryChange} className='cursor-pointer' />
                   <p>Brand</p>
                 </label>
               </span>
diff --git a/site/pages/login.js b/site/pages/login.js
index 4b03f33..6d77094 100644
--- a/site/pages/login.js
+++ b/site/pages/login.js
@@ -3,11 +3,14 @@ import styles from '../styles/apply.module.css';
 import { toast } from 'react-toastify';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
+import { FaEye } from "react-icons/fa";
+import { FaEyeSlash } from "react-icons/fa";
 
 const Login = () => {
   const route = useRouter();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false); // State to toggle password visibility
 
   const handleLogin = (e) => {
     e.preventDefault();
@@ -20,7 +23,6 @@ const Login = () => {
       body: JSON.stringify({ email, password }),
     };
 
-    // backend implementations
     fetch('https://bio-branch-server.onrender.com/api/login', options)
       .then(response => response.json())
       .then(data => {
@@ -36,7 +38,6 @@ const Login = () => {
       .catch(error => toast.error("An error occurred. Please try again."));
   };
 
-  // Google login function
   const googleLogin = () => {
     window.location.href = 'http://localhost:4000/auth/google';
   };
@@ -51,11 +52,32 @@ const Login = () => {
             <form onSubmit={handleLogin} className='flex flex-col gap-3 text-lg'>
               <span className='flex items-center shadow-md border-2 px-3 py-2 rounded-md focus:outline-none'>
                 <img className='w-6 mr-2' src="/svg/email.svg" alt="" />
-                <input className='px-3 rounded-md focus:outline-none' placeholder='Add Email' type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+                <input
+                  className='px-3 rounded-md focus:outline-none'
+                  placeholder='Add Email'
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                />
               </span>
+
               <span className='flex items-center shadow-md border-2 px-3 py-2 rounded-md focus:outline-none'>
                 <img className='w-7 mr-2' src="/svg/password.png" alt="" />
-                <input className='px-3 rounded-md focus:outline-none' placeholder='Add Password' type="password" value={password} onChange={(e) => setPassword(e.target.value)} required/>
+                <input
+                  className='px-3 rounded-md focus:outline-none'
+                  placeholder='Add Password'
+                  type={showPassword ? "text" : "password"}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className='ml-2 focus:outline-none'
+                >
+                  {showPassword ? <FaEyeSlash /> : <FaEye />}
+                </button>
               </span>
 
               <input type='submit' value='Login' className='bg-blue-500 text-white px-3 py-2 rounded-md' />