diff --git a/package-lock.json b/package-lock.json
index 3da5221..e26ecbb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "ionicons": "^7.4.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-password-strength-bar": "^0.4.1",
         "react-router-dom": "^6.26.2",
         "react-scripts": "^5.0.1",
         "react-typing-effect": "^2.0.5",
@@ -18474,6 +18475,19 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "license": "MIT"
     },
+    "node_modules/react-password-strength-bar": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/react-password-strength-bar/-/react-password-strength-bar-0.4.1.tgz",
+      "integrity": "sha512-2NvYz4IUU8k7KDZgsXKoJWreKCZLKGaqF5QhIVhc09OsPBFXFMh0BeghNkBIRkaxLeI7/xjivknDCYfluBCXKA==",
+      "license": "MIT",
+      "dependencies": {
+        "zxcvbn": "4.4.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6",
+        "react-dom": ">=16.8.6"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -22447,6 +22461,12 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==",
+      "license": "MIT"
     }
   }
 }
diff --git a/package.json b/package.json
index 4f40661..f429d6f 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "ionicons": "^7.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-password-strength-bar": "^0.4.1",
     "react-router-dom": "^6.26.2",
     "react-scripts": "^5.0.1",
     "react-typing-effect": "^2.0.5",
diff --git a/src/Modal.js b/src/Modal.js
index ba61ef1..157c9a1 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -1,9 +1,11 @@
 import React, { useState } from "react";
 import "./Modal.css";
+import PasswordStrengthBar from "react-password-strength-bar";
 
 function Modal({ isModalOpen, toggleModal }) {
   const [isLogin, setIsLogin] = useState(true); // State to toggle between login and signup
   const [showPassword, setShowPassword] = useState(false); // State to toggle password visibility
+  const [password, setPassword] = useState('');
 
   const toggleForm = () => {
     setIsLogin(!isLogin);
@@ -13,6 +15,10 @@ function Modal({ isModalOpen, toggleModal }) {
     setShowPassword(!showPassword);
   };
 
+  const handlePasswordChange = (e) => {
+    setPassword(e.target.value);
+  };
+
   return (
     <div className={`modal-container ${isModalOpen ? "show" : ""}`}>
       <div className="modal-content">
@@ -28,6 +34,7 @@ function Modal({ isModalOpen, toggleModal }) {
           <input
             type={showPassword ? "text" : "password"}
             placeholder="Password"
+            onChange={handlePasswordChange}
             required
           />
           <button
@@ -38,22 +45,25 @@ function Modal({ isModalOpen, toggleModal }) {
             {showPassword ? "👁️" : "👁️‍🗨️"}
           </button>
         </div>
-
+        
         {!isLogin && (
-          <div className="inputBox password-container">
-            <input
-              type={showPassword ? "text" : "password"}
-              placeholder="Confirm Password"
-              required
-            />
-            <button
-              type="button"
-              className="eye-button"
-              onClick={togglePasswordVisibility}
-            >
-              {showPassword ? "👁️" : "👁️‍🗨️"}
-            </button>
-          </div>
+          <>
+            <PasswordStrengthBar password={password} />
+            <div className="inputBox password-container">
+              <input
+                type={showPassword ? "text" : "password"}
+                placeholder="Confirm Password"
+                required
+              />
+              <button
+                type="button"
+                className="eye-button"
+                onClick={togglePasswordVisibility}
+              >
+                {showPassword ? "👁️" : "👁️‍🗨️"}
+              </button>
+            </div>
+          </>
         )}
 
         <button className="primary-btn">{isLogin ? "Login" : "Sign Up"}</button>