diff --git a/Styles/auth.css b/Styles/auth.css
index 2900de3..d70371d 100644
--- a/Styles/auth.css
+++ b/Styles/auth.css
@@ -9,7 +9,7 @@
 
 /* Authentication Card */
 .auth-card {
-    background: var(--card-bg);
+    background: var(--card-background);
     border-radius: 10px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     padding: 2rem;
@@ -20,7 +20,7 @@
 .auth-card h2 {
     text-align: center;
     margin-bottom: 1.5rem;
-    color: var(--text);
+    color: var(--text-color);
 }
 
 /* Authentication Form */
@@ -37,24 +37,24 @@
 }
 
 .form-group label {
-    color: var(--text);
+    color: var(--text-color);
     font-weight: 500;
 }
 
 .form-group input,
 .form-group select {
     padding: 0.75rem;
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-color);
     border-radius: 5px;
-    background: var(--input-bg);
-    color: var(--text);
+    background: var(--background-color);
+    color: var(--text-color);
     font-size: 1rem;
 }
 
 .form-group input:focus,
 .form-group select:focus {
     outline: none;
-    border-color: var(--accent);
+    border-color: var(--secondary-color);
     box-shadow: 0 0 0 2px rgba(29, 161, 242, 0.2);
 }
 
@@ -65,7 +65,7 @@
 
 /* Authentication Button */
 .auth-button {
-    background: var(--accent);
+    background: var(--secondary-color);
     color: white;
     border: none;
     border-radius: 5px;
@@ -77,7 +77,7 @@
 }
 
 .auth-button:hover {
-    background: var(--hover);
+    background: var(--primary-color);
 }
 
 /* Authentication Links */
@@ -88,11 +88,11 @@
 
 .auth-links p {
     margin: 0.5rem 0;
-    color: var(--text);
+    color: var(--text-color);
 }
 
 .auth-links a {
-    color: var(--accent);
+    color: var(--secondary-color);
     text-decoration: none;
     font-weight: 500;
 }
@@ -115,6 +115,38 @@
     margin-top: 0.25rem;
 }
 
+/* Password Visibility Toggle */
+.password-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.password-wrapper input {
+    width: 100%;
+    padding-right: 2.5rem;
+}
+
+.password-toggle {
+    position: absolute;
+    right: 0.5rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-color);
+    padding: 0.25rem;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.password-toggle:hover {
+    opacity: 1;
+}
+
 /* Responsive Design */
 @media (max-width: 480px) {
     .auth-card {
diff --git a/Styles/chat.css b/Styles/chat.css
index 2dd3710..02621fe 100644
--- a/Styles/chat.css
+++ b/Styles/chat.css
@@ -24,7 +24,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 15px;
-    background-color: var(--accent);
+    background-color: var(--secondary-color);
     color: var(--text-color);
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
@@ -87,7 +87,7 @@
 .chatbot-send {
     margin-left: 10px;
     padding: 10px 15px;
-    background-color: var(--accent);
+    background-color: var(--secondary-color);
     color: var(--text-color);
     border: none;
     border-radius: 5px;
@@ -100,7 +100,7 @@
     right: 20px;
     width: 50px;
     height: 50px;
-    background-color: var(--accent);
+    background-color: var(--secondary-color);
     color: var(--text-color);
     border: none;
     border-radius: 50%;
@@ -135,7 +135,7 @@
 }
 
 .chatbot-messages::-webkit-scrollbar-thumb:hover {
-    background: var(--accent);
+    background: var(--secondary-color);
 }
 
 /* Loading animation */
@@ -153,7 +153,7 @@
 .typing-indicator span {
     width: 8px;
     height: 8px;
-    background: var(--accent);
+    background: var(--secondary-color);
     border-radius: 50%;
     animation: typing 1s infinite ease-in-out;
 }
diff --git a/Styles/main.css b/Styles/main.css
index 83dd353..9ab1144 100644
--- a/Styles/main.css
+++ b/Styles/main.css
@@ -1138,6 +1138,40 @@ ul li i.fa-check {
     color: var(--light-text);
 }
 
+/* Scroll to Top Button */
+#scrollToTop {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    width: 44px;
+    height: 44px;
+    background: var(--secondary-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(10px);
+    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
+    z-index: 999;
+}
+
+#scrollToTop.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+#scrollToTop:hover {
+    background: var(--primary-color);
+}
+
 /* Responsive Modal */
 @media (max-width: 768px) {
     .modal-content {
diff --git a/admin.html b/admin.html
index aa0c2b7..1067321 100644
--- a/admin.html
+++ b/admin.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>EduBridge Admin Dashboard</title>
+  <title>EduBridge | Admin</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Fraunces:wght@500;700&family=Space+Grotesk:wght@400;500;600&display=swap" rel="stylesheet" />
@@ -317,8 +317,24 @@ <h3>Follow Us</h3>
 
   <div class="toast-container" id="toastContainer" aria-live="polite" aria-atomic="true"></div>
 
+  <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
+
   <script src="scripts/content-data.js"></script>
   <script src="scripts/quiz-data.js"></script>
   <script src="scripts/admin.js"></script>
+  <script>
+    // Scroll to Top
+    const scrollBtn = document.getElementById('scrollToTop');
+    window.addEventListener('scroll', () => {
+      if (window.scrollY > 300) {
+        scrollBtn.classList.add('visible');
+      } else {
+        scrollBtn.classList.remove('visible');
+      }
+    });
+    scrollBtn.addEventListener('click', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+  </script>
 </body>
 </html>
diff --git a/ai.html b/ai.html
index b185ae7..6b9ccbd 100644
--- a/ai.html
+++ b/ai.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI & Machine Learning - EduBridge</title>
+    <title>EduBridge | AI Assistant</title>
     <!-- CSS Dependencies -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
@@ -474,6 +474,21 @@ <h3>Follow Us</h3>
                 closeVideo();
             }
         }
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
\ No newline at end of file
diff --git a/career.html b/career.html
index 0a840e8..f798815 100644
--- a/career.html
+++ b/career.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Career Guidance - EduBridge</title>
+    <title>EduBridge | Career Guidance</title>
     <!-- CSS Dependencies -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
@@ -516,6 +516,21 @@ <h3>Follow Us</h3>
                 closeVideo();
             }
         }
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
\ No newline at end of file
diff --git a/forgot-password.html b/forgot-password.html
new file mode 100644
index 0000000..d67cd18
--- /dev/null
+++ b/forgot-password.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EduBridge | Forgot Password</title>
+    <link rel="stylesheet" href="Styles/main.css">
+    <link rel="stylesheet" href="Styles/auth.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
+</head>
+<body>
+    <header>
+        <nav class="navbar">
+            <a href="index.html" class="logo">EduBridge</a>
+            <ul class="nav-links">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="webdev.html">Web Development</a></li>
+                <li><a href="ai.html">AI & ML</a></li>
+                <li><a href="career.html">Career</a></li>
+                <li>
+                    <div class="theme-selector" id="themeSelector">
+                        <button class="theme-selector-btn" id="themeButton">
+                            <i class="fas fa-palette"></i>
+                            Theme
+                        </button>
+                        <div class="theme-selector-dropdown">
+                            <div class="theme-option" data-theme="light">
+                                <i class="fas fa-sun"></i>
+                                Light Mode
+                            </div>
+                            <div class="theme-option" data-theme="dark">
+                                <i class="fas fa-moon"></i>
+                                Dark Mode
+                            </div>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+    </header>
+
+    <main class="auth-container">
+        <div class="auth-card">
+            <h2>Forgot Password</h2>
+            <p style="text-align:center;margin-bottom:1.5rem;color:var(--text);">Enter your registered email address and we'll send you a link to reset your password.</p>
+            <form id="forgotPasswordForm" class="auth-form">
+                <div class="form-group">
+                    <label for="email">Email</label>
+                    <input type="email" id="email" name="email" required>
+                </div>
+                <button type="submit" class="auth-button">Send Reset Link</button>
+            </form>
+            <div class="auth-links">
+                <p><a href="login.html">Back to Login</a></p>
+            </div>
+        </div>
+    </main>
+
+    <footer>
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>About Us</h3>
+                <p>EduBridge is dedicated to providing quality education in technology fields.</p>
+            </div>
+            <div class="footer-section">
+                <h3>Quick Links</h3>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="webdev.html">Web Development</a></li>
+                    <li><a href="ai.html">AI & ML</a></li>
+                    <li><a href="career.html">Career</a></li>
+                </ul>
+            </div>
+            <div class="footer-section">
+                <h3>Follow Us</h3>
+                <a href="https://x.com/shivam98997467" target="_blank" class="social-button" title="Follow us on Twitter">
+                    <i class="fab fa-twitter"></i>
+                </a>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        const themeSelector = document.getElementById('themeSelector');
+        const themeButton = document.getElementById('themeButton');
+        const themeOptions = document.querySelectorAll('.theme-option');
+        const currentTheme = localStorage.getItem('theme') || 'light';
+
+        document.documentElement.setAttribute('data-theme', currentTheme);
+        updateActiveThemeOption(currentTheme);
+
+        themeButton.addEventListener('click', (e) => {
+            e.stopPropagation();
+            themeSelector.classList.toggle('active');
+        });
+
+        document.addEventListener('click', (e) => {
+            if (!themeSelector.contains(e.target)) {
+                themeSelector.classList.remove('active');
+            }
+        });
+
+        themeOptions.forEach(option => {
+            option.addEventListener('click', () => {
+                const theme = option.getAttribute('data-theme');
+                document.documentElement.setAttribute('data-theme', theme);
+                localStorage.setItem('theme', theme);
+                updateActiveThemeOption(theme);
+                themeSelector.classList.remove('active');
+            });
+        });
+
+        function updateActiveThemeOption(theme) {
+            themeOptions.forEach(option => {
+                if (option.getAttribute('data-theme') === theme) {
+                    option.classList.add('active');
+                } else {
+                    option.classList.remove('active');
+                }
+            });
+        }
+
+        document.getElementById('forgotPasswordForm').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = this.email.value;
+            const btn = this.querySelector('.auth-button');
+            btn.textContent = 'Sending...';
+            btn.disabled = true;
+            setTimeout(() => {
+                btn.textContent = 'Send Reset Link';
+                btn.disabled = false;
+                const existing = this.querySelector('.success-message, .error-message');
+                if (existing) existing.remove();
+                const msg = document.createElement('div');
+                msg.className = 'success-message';
+                msg.textContent = 'If an account with that email exists, a reset link has been sent.';
+                msg.style.cssText = 'text-align:center;margin-top:1rem;color:#28a745;';
+                this.appendChild(msg);
+            }, 1500);
+        });
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+    </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
+</body>
+</html>
diff --git a/index.html b/index.html
index edf7b35..d8f91c9 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>EduBridge - Learn Tech Skills</title>
+  <title>EduBridge | Home</title>
   <!-- CSS Dependencies -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
   <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
@@ -243,7 +243,24 @@ <h3>Follow Us</h3>
 
     // Load chatbot when the page is ready
     document.addEventListener('DOMContentLoaded', loadChatbot);
+
+    // Scroll to Top
+    const scrollBtn = document.getElementById('scrollToTop');
+    if (scrollBtn) {
+      window.addEventListener('scroll', () => {
+        if (window.scrollY > 300) {
+          scrollBtn.classList.add('visible');
+        } else {
+          scrollBtn.classList.remove('visible');
+        }
+      });
+      scrollBtn.addEventListener('click', () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      });
+    }
   </script>
+
+  <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html>
 
diff --git a/login.html b/login.html
index 6b8d607..ad1aeb7 100644
--- a/login.html
+++ b/login.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - EduBridge</title>
+    <title>EduBridge | Login</title>
     <link rel="stylesheet" href="Styles/main.css">
     <link rel="stylesheet" href="Styles/auth.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
@@ -51,7 +51,12 @@ <h2>Login to EduBridge</h2>
                 </div>
                 <div class="form-group">
                     <label for="password">Password</label>
-                    <input type="password" id="password" name="password" required>
+                    <div class="password-wrapper">
+                        <input type="password" id="password" name="password" required>
+                        <button type="button" class="password-toggle" aria-label="Toggle password visibility">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                    </div>
                 </div>
                 <button type="submit" class="auth-button">Login</button>
             </form>
@@ -133,6 +138,36 @@ <h3>Follow Us</h3>
                 }
             });
         }
+
+        // Password Visibility Toggle
+        document.querySelectorAll('.password-toggle').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const input = btn.closest('.password-wrapper').querySelector('input');
+                const icon = btn.querySelector('i');
+                if (input.type === 'password') {
+                    input.type = 'text';
+                    icon.classList.replace('fa-eye', 'fa-eye-slash');
+                } else {
+                    input.type = 'password';
+                    icon.classList.replace('fa-eye-slash', 'fa-eye');
+                }
+            });
+        });
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
\ No newline at end of file
diff --git a/profile.html b/profile.html
index cc0143b..d6636b4 100644
--- a/profile.html
+++ b/profile.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>My Profile - EduBridge</title>
+    <title>EduBridge | Profile</title>
     <link rel="stylesheet" href="Styles/main.css">
     <link rel="stylesheet" href="Styles/profile.css">
     <link rel="stylesheet" href="Styles/chat.css">
@@ -296,6 +296,21 @@ <h3>${course.name}</h3>
                 messageDiv.remove();
             }, 3000);
         }
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
\ No newline at end of file
diff --git a/quiz.html b/quiz.html
index beb7c9d..8b94cde 100644
--- a/quiz.html
+++ b/quiz.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>EduBridge - Course Quizzes</title>
+    <title>EduBridge | Quiz</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
     <link rel="stylesheet" href="Styles/main.css"/>
@@ -227,6 +227,21 @@ <h3>Follow Us</h3>
                 authButtons.style.display = 'block';
             }
         });
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
\ No newline at end of file
diff --git a/register.html b/register.html
index 4947545..9858d25 100644
--- a/register.html
+++ b/register.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Register - EduBridge</title>
+    <title>EduBridge | Register</title>
     <link rel="stylesheet" href="Styles/main.css">
     <link rel="stylesheet" href="Styles/auth.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
@@ -55,11 +55,21 @@ <h2>Create an Account</h2>
                 </div>
                 <div class="form-group">
                     <label for="password">Password</label>
-                    <input type="password" id="password" name="password" required>
+                    <div class="password-wrapper">
+                        <input type="password" id="password" name="password" required>
+                        <button type="button" class="password-toggle" aria-label="Toggle password visibility">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                    </div>
                 </div>
                 <div class="form-group">
                     <label for="confirmPassword">Confirm Password</label>
-                    <input type="password" id="confirmPassword" name="confirmPassword" required>
+                    <div class="password-wrapper">
+                        <input type="password" id="confirmPassword" name="confirmPassword" required>
+                        <button type="button" class="password-toggle" aria-label="Toggle password visibility">
+                            <i class="fas fa-eye"></i>
+                        </button>
+                    </div>
                 </div>
                 <div class="form-group">
                     <label for="interests">Areas of Interest</label>
@@ -148,6 +158,36 @@ <h3>Follow Us</h3>
                 }
             });
         }
+
+        // Password Visibility Toggle
+        document.querySelectorAll('.password-toggle').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const input = btn.closest('.password-wrapper').querySelector('input');
+                const icon = btn.querySelector('i');
+                if (input.type === 'password') {
+                    input.type = 'text';
+                    icon.classList.replace('fa-eye', 'fa-eye-slash');
+                } else {
+                    input.type = 'password';
+                    icon.classList.replace('fa-eye-slash', 'fa-eye');
+                }
+            });
+        });
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
\ No newline at end of file
diff --git a/webdev.html b/webdev.html
index 701d3a5..71bbdcb 100644
--- a/webdev.html
+++ b/webdev.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Web Development - EduBridge</title>
+    <title>EduBridge | Web Development</title>
     <!-- CSS Dependencies -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
     <link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css"/>
@@ -414,6 +414,21 @@ <h3>Follow Us</h3>
                 closeVideo();
             }
         }
+
+        // Scroll to Top
+        const scrollBtn = document.getElementById('scrollToTop');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 300) {
+                scrollBtn.classList.add('visible');
+            } else {
+                scrollBtn.classList.remove('visible');
+            }
+        });
+        scrollBtn.addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
+    <button id="scrollToTop" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
 </body>
 </html> 
\ No newline at end of file