diff --git a/index.html b/index.html
index 676c1f2..7899c4f 100644
--- a/index.html
+++ b/index.html
@@ -1538,51 +1538,32 @@ <h2 class="headline-md section-title" id="cta-label" data-aos="fade-right" style
 
 
    <!--JS for searching courses -->
-   <script>
-    // Define searchCourses function
-    function searchCourses() {
-        const searchTerm = document.getElementById('search-bar').value.toLowerCase();
-        const courses = document.querySelectorAll('.category-card');
-        const resultsDiv = document.getElementById('search-results');
-        resultsDiv.innerHTML = ''; // Clear previous results
-        let found = false; // Flag to track if any course is found
-
-        courses.forEach((course) => {
-            const courseTitle = course.querySelector('.title-lg').innerText.toLowerCase();
-            if (courseTitle.includes(searchTerm)) {
-                const resultCard = course.cloneNode(true); // Clone the course card
-                resultsDiv.appendChild(resultCard); // Show matching result at the top
-                found = true; // Set flag to true if a course is found
-            }
-        });
-
-        // If no courses match, show "No results found"
-        if (!found) {
-            resultsDiv.innerHTML = '<p>No results found</p>';
-        }
-
-        // Show resultsDiv if searchTerm is not empty
-        if (searchTerm.trim() !== '') {
-            resultsDiv.style.display = 'block';
-        } else {
-            resultsDiv.style.display = 'none';
-        }
-    }
-
-    // Event listener to hide the resultsDiv when clicking outside of the search bar or results area
-    document.addEventListener('click', function(event) {
-        const searchBar = document.getElementById('search-bar');
-        const resultsDiv = document.getElementById('search-results');
-
-        if (!searchBar.contains(event.target) && !resultsDiv.contains(event.target)) {
-            resultsDiv.style.display = 'none'; // Hide results if clicked outside
+ <script>
+    
+        // Define searchCourses function
+        function searchCourses() {
+    const searchTerm = document.getElementById('search-bar').value.toLowerCase();
+    const courses = document.querySelectorAll('.category-card');
+    const resultsDiv = document.getElementById('search-results');
+    resultsDiv.innerHTML = ''; // Clear previous results
+    let found = false; // Flag to track if any course is found
+
+    courses.forEach((course) => {
+        const courseTitle = course.querySelector('.title-lg').innerText.toLowerCase();
+        if (courseTitle.includes(searchTerm)) {
+            const resultCard = course.cloneNode(true); // Clone the course card
+            resultsDiv.appendChild(resultCard); // Show matching result at the top
+            found = true; // Set flag to true if a course is found
         }
     });
 
-    // Ensure that clicking inside the search bar shows results again
-    document.getElementById('search-bar').addEventListener('input', searchCourses);
-</script>
+    // If no courses match, show "No results found"
+    if (!found) {
+        resultsDiv.innerHTML = '<p>No results found</p>';
+    }
+}
 
+    </script>
 
   <!-- 
    - custom js link
diff --git a/signin.html b/signin.html
index 1c1d98e..896759c 100644
--- a/signin.html
+++ b/signin.html
@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SkillWise - Sign In</title>
     <link rel="stylesheet" href="assets/css/signin.css">
-    <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
+  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
 </head>
 <body style="overflow: hidden;">
   <header>
@@ -36,7 +36,7 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                 </div>
                 <div class="input-group">
                     <label for="email">Email</label>
-                    <input type="email" id="email" name="email" placeholder="Enter your email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter a valid email address">
+                    <input type="email" id="email" name="email" placeholder="Enter your email" required>
                 </div>
                 <div class="input-group">
                     <label for="password">Password</label>
@@ -45,23 +45,30 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                         <i class="fa-solid fa-eye-slash" id="togglePassword"></i>
                     </div>
                 </div>
+                <!-- <div class="strength-bar">
+                    <div id="strengthBar" class="strength-bar-inner"></div>
+                </div>
+                <p class="suggestion">
+                  <small>Use special characters and numbers for a strong password</small>
+                </p> -->
                 <button type="submit" class="signin-btn">Sign In</button>
                 <p class="signup-link">Don't have an account? <a href="./signup.html">Sign up here</a></p>
             </form>
         </div>
     </div>
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
-    <script>
+    <script >
         const togglePassword = document.querySelector("#togglePassword");
-        const passwordInput = document.querySelector("#password");
+const passwordInput = document.querySelector("#password");
+
+togglePassword.addEventListener("click", function () {
+  const type = passwordInput.getAttribute("type") === "password" ?  "text": "password";
+  passwordInput.setAttribute("type", type);
 
-        togglePassword.addEventListener("click", function () {
-            const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
-            passwordInput.setAttribute("type", type);
+  this.classList.toggle("fa-eye-slash");
+  this.classList.toggle("fa-eye");
+});
 
-            this.classList.toggle("fa-eye-slash");
-            this.classList.toggle("fa-eye");
-        });
     </script>
 
 </body>
diff --git a/signup.html b/signup.html
index 1755463..f884e70 100644
--- a/signup.html
+++ b/signup.html
@@ -5,21 +5,21 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SkillWise - Sign up</title>
     <link rel="stylesheet" href="assets/css/signin.css">
-    <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
+  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
 </head>
 <body>
     <header>
         <nav class="navbar">
-            <a href="./index.html" class="logo">SkillWise</a>
-            <ul style="margin-right: 2rem;">
-                <li>
-                    <a href="./index.html" class="nav-link" style="margin-right: 0.5rem;">Home</a>
-                    <i class="fa-solid fa-house"></i>
-                </li>
-            </ul>
+          <a href="./index.html" class="logo">SkillWise</a>
+          <ul style="margin-right: 2rem;">
+            <li>
+              <a href="./index.html" class="nav-link" style="margin-right: 0.5rem;">Home</a>
+              <i class="fa-solid fa-house"></i>
+            </li>
+          </ul>
         </nav>
-    </header>
+      </header>
     <div class="container">
         <div class="form-container">
             <!-- Add SkillWise Icon/Logo -->
@@ -31,7 +31,7 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
             <form action="#" method="POST">
                 <div class="input-group">
                     <label for="username">Full Name</label>
-                    <input type="text" id="fullname" name="fullname" placeholder="Create your username" required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" 
+                    <input type="text" id="fullname" name="fullname" placeholder="Create your username" required required pattern="[a-zA-Z ]+" oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')" 
                     oninput="this.setCustomValidity('')">
                 </div>
                 <div class="input-group">
@@ -40,7 +40,7 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                 </div>
                 <div class="input-group">
                     <label for="email">Email</label>
-                    <input type="email" id="email" name="email" placeholder="Enter your email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="Please enter a valid email address">
+                    <input type="email" id="email" name="email" placeholder="Enter your email" required>
                 </div>
                 <div class="input-group">
                     <label for="password">Password</label>
@@ -49,75 +49,81 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                         <i class="fa-solid fa-eye-slash" id="togglePassword"></i>
                     </div> 
                 </div>
-                <div class="strength-bar">
-                    <div id="strengthBar" class="strength-bar-inner"></div>
-                </div>
-                <p class="suggestion">
-                    <small id="strength_msg">Use special characters and numbers for a strong password</small>
-                </p>
+                    <div class="strength-bar">
+                        <div id="strengthBar" class="strength-bar-inner"></div>
+                    </div>
+                    <p class="suggestion">
+                      <small id="strength_msg">Use special characters and numbers for a strong password</small>
+
+                    </p>
                 <button type="submit" class="signin-btn">Sign Up</button>
                 <p class="signup-link">Already have an account? <a href="./signin.html">Sign in here</a></p>
             </form>
         </div>
     </div>
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
-    <script>
+    <script >
         const togglePassword = document.querySelector("#togglePassword");
-        const passwordInput = document.querySelector("#password");
+const passwordInput = document.querySelector("#password");
+
+togglePassword.addEventListener("click", function () {
+  const type = passwordInput.getAttribute("type") === "password" ?  "text": "password";
+  passwordInput.setAttribute("type", type);
+
+  this.classList.toggle("fa-eye-slash");
+  this.classList.toggle("fa-eye");
+});
 
-        togglePassword.addEventListener("click", function () {
-            const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
-            passwordInput.setAttribute("type", type);
 
-            this.classList.toggle("fa-eye-slash");
-            this.classList.toggle("fa-eye");
-        });
+function checkPasswordStrength() {
+      const password = document.getElementById('password').value;
+      const strengthBar = document.getElementById('strengthBar');
+      const strength_text = document.getElementById('strength_msg');
 
-        function checkPasswordStrength() {
-            const password = document.getElementById('password').value;
-            const strengthBar = document.getElementById('strengthBar');
-            const strength_text = document.getElementById('strength_msg');
+      let strength = 0;
 
-            let strength = 0;
+      if (password.length >= 8) strength += 1;
+      if (/[A-Z]/.test(password)) strength += 1;
+      if (/[a-z]/.test(password)) strength += 1;
+      if (/[0-9]/.test(password)) strength += 1;
+      if (/[\W]/.test(password)) strength += 1;
 
-            if (password.length >= 8) strength += 1;
-            if (/[A-Z]/.test(password)) strength += 1;
-            if (/[a-z]/.test(password)) strength += 1;
-            if (/[0-9]/.test(password)) strength += 1;
-            if (/[\W]/.test(password)) strength += 1;
 
-            switch (strength) {
-                case 1:
-                    strengthBar.style.width = '20%';
-                    strengthBar.style.backgroundColor = 'red';
-                    strength_text.textContent = "Password Strength: Very Weak";
-                    break;
-                case 2:
-                    strengthBar.style.width = '40%';
-                    strengthBar.style.backgroundColor = 'orange';
-                    strength_text.textContent = "Password Strength: Weak";
-                    break;
-                case 3:
-                    strengthBar.style.width = '60%';
-                    strengthBar.style.backgroundColor = 'yellow';
-                    strength_text.textContent = "Password Strength: Moderate";
-                    break;
-                case 4:
-                    strengthBar.style.width = '80%';
-                    strengthBar.style.backgroundColor = 'lightgreen';
-                    strength_text.textContent = "Password Strength: Good";
-                    break;
-                case 5:
-                    strengthBar.style.width = '100%';
-                    strengthBar.style.backgroundColor = 'green';
-                    strength_text.textContent = "Password Strength: Strong";
-                    break;
-                default:
-                    strengthBar.style.width = '0%';
-                    strength_text.textContent = "Use special characters and numbers for a strong password";
-                    break;
-            }
+
+      switch (strength) {
+        case 1:
+          strengthBar.style.width = '20%';
+          strengthBar.style.backgroundColor = 'red';
+          strength_text.textContent = "Password Strength : Very Weak";
+          break;
+        case 2:
+          strengthBar.style.width = '40%';
+          strengthBar.style.backgroundColor = 'orange';
+          strength_text.textContent = "Password Strength : Weak";
+          break;
+        case 3:
+          strengthBar.style.width = '60%';
+          strengthBar.style.backgroundColor = 'yellow';
+          strength_text.textContent = "Password Strength : Moderate";
+          break;
+        case 4:
+          strengthBar.style.width = '80%';
+          strengthBar.style.backgroundColor = 'lightgreen';
+          strength_text.textContent = "Password Strength : Good";
+          break;
+        case 5:
+          strengthBar.style.width = '100%';
+          strengthBar.style.backgroundColor = 'green';
+          strength_text.textContent = "Password Strength : Strong";
+          break;
+        default:
+          strengthBar.style.width = '0%';
+          strength_text.textContent ="Use special characters and numbers for a strong password";
+          break;
         }
+    }
+
+
     </script>
 </body>
 </html>

No results found