diff --git a/middleware/clerkAuth.js b/middleware/clerkAuth.js
index 0f916283..c0570a09 100644
--- a/middleware/clerkAuth.js
+++ b/middleware/clerkAuth.js
@@ -1,15 +1,34 @@
-const { ClerkExpressRequireAuth } = require('@clerk/clerk-sdk-node');
+const { ClerkExpressRequireAuth, clerkClient } = require('@clerk/clerk-sdk-node');
 
-// Simple authentication middleware
-const requireAuth = ClerkExpressRequireAuth({
-  onError: (error) => {
-    console.error('Clerk auth error:', error);
-    return {
-      status: 401,
-      message: 'Authentication required. Please sign in.'
-    };
+// Robust Clerk authentication middleware
+// Uses ClerkExpressRequireAuth with proper error handling
+const requireAuth = async (req, res, next) => {
+  try {
+    // Use ClerkExpressRequireAuth internally
+    const clerkMiddleware = ClerkExpressRequireAuth();
+    
+    await new Promise((resolve, reject) => {
+      clerkMiddleware(req, res, (err) => {
+        if (err) reject(err);
+        else resolve();
+      });
+    });
+    
+    // Verify we got a userId
+    if (!req.auth?.userId) {
+      return res.status(401).json({ 
+        error: 'Authentication required. Please sign in.' 
+      });
+    }
+    
+    next();
+  } catch (error) {
+    console.error('Clerk auth error:', error.message || error);
+    return res.status(401).json({ 
+      error: 'Authentication required. Please sign in.' 
+    });
   }
-});
+};
 
 // Extract user ID from request
 const getUserId = (req) => {
diff --git a/models/User.js b/models/User.js
index 63603fc0..81bcbb98 100644
--- a/models/User.js
+++ b/models/User.js
@@ -94,6 +94,17 @@ const userSchema = new mongoose.Schema({
     type:String,
     default:null
   },
+  phone:{
+    type:String,
+    trim:true,
+    default:null
+  },
+  bio:{
+    type:String,
+    trim:true,
+    maxlength:500,
+    default:null
+  },
   role:{
     type:String,
     enum:["user","admin"],
diff --git a/public/settings.html b/public/settings.html
index 93a25000..38ba7e0d 100644
--- a/public/settings.html
+++ b/public/settings.html
@@ -7,8 +7,506 @@
   <title>Settings & Profile - ExpenseFlow</title>
   <link rel="stylesheet" href="settings.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+
+  <!-- Clerk Authentication SDK -->
+  <script
+  async
+  crossorigin="anonymous"
+  data-clerk-publishable-key="your clerk-publishable-key here"
+  src="key"
+  type="text/javascript">
+</script>
 </head>
 
+<style>
+  
+/* Header Styles */
+.header {
+  position: relative;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+  backdrop-filter: blur(20px);
+  background: rgba(15, 15, 35, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  margin-bottom:2rem;
+}
+
+.navbar {
+  padding: 1rem 0;
+}
+
+.nav-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.nav-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.nav-logo:hover {
+  transform: scale(1.05);
+}
+
+.nav-logo i {
+  font-size: 2rem;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.nav-logo span {
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.nav-menu {
+  display: flex;
+  gap: 0.5rem;
+  list-style: none;
+  align-items: center;
+  margin-right: 15px;
+  margin-left: 15px;
+}
+
+.nav-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  transition: all 0.3s ease;
+  position: relative;
+}
+
+.nav-link:hover,
+.nav-link.active {
+  color: var(--accent-primary);
+  background: rgba(100, 255, 218, 0.1);
+}
+
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+/* Workspace Selector */
+.workspace-selector {
+  position: relative;
+  margin-right: 1rem;
+}
+
+.workspace-current {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: rgba(100, 255, 218, 0.1);
+  border: 1px solid rgba(100, 255, 218, 0.3);
+  border-radius: 8px;
+  color: var(--accent-primary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-width: 180px;
+}
+
+.workspace-current:hover {
+  background: rgba(100, 255, 218, 0.2);
+  transform: translateY(-2px);
+}
+
+.workspace-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bg-primary);
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.workspace-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.workspace-label {
+  font-size: 0.75rem;
+  opacity: 0.8;
+}
+
+.workspace-name {
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.dropdown-arrow {
+  transition: transform 0.3s ease;
+}
+
+.workspace-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-10px);
+  transition: all 0.3s ease;
+  margin-top: 0.5rem;
+}
+
+.workspace-dropdown.active {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.workspace-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  transition: background 0.2s ease;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.workspace-item:hover,
+.workspace-item.active {
+  background: rgba(100, 255, 218, 0.1);
+}
+
+.workspace-item:last-child {
+  border-bottom: none;
+}
+
+.workspace-avatar-sm {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bg-primary);
+  font-weight: bold;
+  font-size: 0.8rem;
+}
+
+.owner-badge {
+  margin-left: auto;
+  background: var(--accent-primary);
+  color: var(--bg-primary);
+  padding: 0.2rem 0.5rem;
+  border-radius: 12px;
+  font-size: 0.7rem;
+  font-weight: 500;
+}
+
+.workspace-divider {
+  padding: 0.5rem 1rem;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-color);
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.workspace-footer {
+  padding: 0.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.add-workspace-btn {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  color: var(--bg-primary);
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.add-workspace-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(100, 255, 218, 0.3);
+}
+
+.currency-btn {
+  padding: 0.5rem 1rem;
+  background: rgba(100, 255, 218, 0.1);
+  border: 1px solid rgba(100, 255, 218, 0.3);
+  border-radius: 8px;
+  color: var(--accent-primary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+}
+
+.currency-btn:hover {
+  background: rgba(100, 255, 218, 0.2);
+  transform: translateY(-2px);
+}
+
+.currency-btn i {
+  font-size: 1rem;
+}
+
+.profile-img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 2px solid var(--accent-primary);
+}
+
+.username {
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.bar {
+  width: 25px;
+  height: 3px;
+  background: var(--accent-primary);
+  margin: 3px 0;
+  transition: 0.3s;
+  border-radius: 5px;
+}
+
+/* Dropdown Menu */
+.nav-item.dropdown {
+  position: relative;
+}
+
+.dropdown-toggle {
+  cursor: pointer;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 180px;
+  background: rgba(15, 15, 35, 0.95);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(100, 255, 218, 0.15);
+  border-radius: 10px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  padding: 0.5rem 0;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(8px);
+  transition: all 0.25s ease;
+  z-index: 1100;
+  margin-top: 0.5rem;
+}
+
+.nav-item.dropdown:hover .dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.dropdown-link {
+  display: block;
+  padding: 0.6rem 1.2rem;
+  color: #a0a0c0;
+  text-decoration: none;
+  font-size: 0.9rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.dropdown-link:hover,
+.dropdown-link.active {
+  color: #64ffda;
+  background: rgba(100, 255, 218, 0.08);
+}
+
+/* Language Select */
+.language-select {
+  padding: 0.4rem 0.6rem;
+  background: rgba(100, 255, 218, 0.1);
+  border: 1px solid rgba(100, 255, 218, 0.3);
+  border-radius: 8px;
+  color: #64ffda;
+  font-weight: 500;
+  font-size: 0.85rem;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.3s ease;
+  appearance: auto;
+}
+
+.language-select:hover {
+  background: rgba(100, 255, 218, 0.2);
+}
+
+.language-select option {
+  background: #0f0f23;
+  color: #e0e0e0;
+}
+
+/* Logout Link */
+#redirect a {
+  color: #a0a0c0;
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.4rem 0.8rem;
+  border-radius: 6px;
+  transition: all 0.3s ease;
+  font-size: 0.9rem;
+}
+
+#redirect a:hover {
+  color: #e74c3c;
+  background: rgba(231, 76, 60, 0.1);
+}
+@media (max-width: 768px) {
+  .nav-container {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0 1rem;
+  }
+
+  .nav-menu {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    width: 100%;
+    gap: 0.75rem;
+    display: none;
+  }
+
+  .nav-menu.active {
+    display: flex;
+  }
+
+  .nav-toggle {
+    display: flex;
+  }
+
+  .nav-link {
+    width: 100%;
+    text-align: left;
+    padding: 0.5rem 0.75rem;
+    border-radius: 10px;
+  }
+
+  .dropdown-menu {
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    box-shadow: none;
+    border: none;
+    background: rgba(100, 255, 218, 0.05);
+    border-radius: 8px;
+    margin-top: 0.25rem;
+  }
+
+  .user-profile {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .hero-section {
+    padding: 4rem 1.5rem 2rem;
+    text-align: left;
+  }
+
+  .hero-title {
+    font-size: 2.4rem;
+  }
+
+  .hero-cta {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .hero-cta .cta-primary,
+  .hero-cta .cta-secondary {
+    width: 100%;
+  }
+
+  .hero-section + .container {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+
+  #budget-goals-dashboard {
+    margin: 4.5rem 1rem;
+    padding: 1.75rem;
+  }
+
+  .dashboard-actions button {
+    flex: 1;
+    justify-content: center;
+  }
+
+  .dashboard-summary {
+    grid-template-columns: 1fr;
+  }
+
+  .dashboard-content {
+    grid-template-columns: 1fr;
+  }
+
+  .alerts-section {
+    order: 3;
+  }
+
+  .items-list {
+    max-height: 360px;
+  }
+}
+</style>
 <body>
 
   <!-- Smooth Cursor Trail -->
@@ -57,6 +555,143 @@
       transform: translate(-50%, -50%) scale(1.3);
       background: linear-gradient(135deg, #00b4d8 0%, #64ffda 100%) !important;
     }
+
+    /* Footer */
+.footer {
+  background: rgba(15, 15, 35, 0.9);
+  backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 3rem 0 1rem;
+  margin-top: 4rem;
+  animation: fadeInUp 1s ease-out 1.2s both;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 2rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+}
+
+.footer-section {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--accent-primary);
+  margin-bottom: 0.5rem;
+}
+
+.footer-logo i {
+  font-size: 2rem;
+  background: var(--primary-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.footer-section p {
+  color: var(--text-secondary);
+  line-height: 1.6;
+}
+
+.footer-section h4 {
+  color: var(--text-primary);
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.footer-links {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.footer-links a {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+  color: var(--accent-primary);
+}
+.footer-bottom {
+  margin-top: 2rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  text-align: center;
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+.social-links {
+  display: flex;
+  gap: 1rem;
+}
+
+.social-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.social-link:hover {
+  background: var(--accent-primary);
+  color: var(--bg-primary);
+  transform: translateY(-2px);
+}
+
+.footer-bottom {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  margin-top: 2rem;
+  padding-top: 1rem;
+}
+
+.footer-bottom .footer-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+.footer-bottom p {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.footer-stats {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.footer-stats span {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.05);
+  padding: 0.25rem 0.75rem;
+  border-radius: 15px;
+}
+
   </style>
 
   <div class="cursor-trail-container" id="cursor-trail"></div>
@@ -215,7 +850,56 @@
       animateTrail();
     })();
   </script>
+  <!-- Header -->
+  <header class="header">
+    <nav class="navbar">
+      <div class="nav-container">
+        <div class="nav-logo">
+          <i class="fas fa-wallet"></i>
+          <span>ExpenseFlow</span>
+        </div>
+        <div class="nav-menu" id="nav-menu">
+          <a href="dashboard.html" class="nav-link ">Dashboard</a>
+          <a href="accounts.html" class="nav-link">Accounts</a>
+          <a href="analytics.html" class="nav-link ">Analytics</a>
+          <a href="goals.html" class="nav-link ">Goals</a>
 
+          <div class="nav-item dropdown">
+            <a href="#" class="nav-link dropdown-toggle">More</a>
+            <div class="dropdown-menu">
+              <a href="Monthlysummary.html" class="dropdown-link">Summary</a>
+              <a href="settings.html" class="dropdown-link active">Overview</a>
+              <a href="./contributor.html" class="dropdown-link ">Contributors</a>
+            </div>
+          </div>
+        </div>
+        
+        <div class="nav-toggle" id="nav-toggle">
+          <span class="bar"></span>
+          <span class="bar"></span>
+          <span class="bar"></span>
+        </div>
+        <div class="user-profile">
+          <div id="workspace-selector" class="workspace-selector"></div>
+          <select id="language-switcher" class="language-select" aria-label="Language">
+            <option value="en">EN</option>
+            <option value="es">ES</option>
+            <option value="fr">FR</option>
+          </select>
+          <button class="currency-btn" onclick="openCurrencyModal()" title="Currency Settings">
+            <i class="fas fa-coins"></i>
+            <span id="current-currency">INR</span>
+          </button>
+          <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop&crop=face"
+            alt="User" class="profile-img">
+          <span class="username" id="navUsername"></span>
+          <div id="redirect">
+            <a href="#" id="logoutLink" onclick="logout()">Logout</a>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </header>
 
   <div class="settings-container">
     <header class="settings-header">
@@ -259,6 +943,7 @@ <h1><i class="fas fa-cog"></i> Settings & Profile</h1>
                 <button class="avatar-edit-btn" id="change-avatar-btn">
                   <i class="fas fa-camera"></i>
                 </button>
+                <input type="file" id="avatar-file-input" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;">
               </div>
               <div class="profile-info">
                 <h2 id="profile-name">John Doe</h2>
@@ -620,8 +1305,73 @@ <h4>Delete Account</h4>
             </div>
           </div>
         </div>
+
+    
       </div>
+    
     </main>
+        <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-section">
+                <div class="footer-logo">
+                    <i class="fas fa-wallet"></i>
+                    <span>ExpenseFlow</span>
+                </div>
+
+                <p class="footer-description">
+                    Smart money management made simple. Track, analyze, and optimize
+                    your financial habits.
+                </p>
+
+                <div class="social-links">
+                    <a href="https://x.com/9504_renu" class="social-link" target="_blank" rel="noopener noreferrer"
+                        aria-label="X (Twitter)">
+                        <i class="fab fa-x-twitter"></i>
+                    </a>
+
+                    <a href="https://github.com/Renu-code123/ExpenseFlow" class="social-link" target="_blank"
+                        rel="noopener noreferrer" aria-label="Github">
+                        <i class="fab fa-github"></i>
+                    </a>
+
+                    <a href="mailto:renu89857@gmail.com" class="social-link" target="_blank" rel="noopener noreferrer"
+                        aria-label="Email">
+                        <i class="far fa-envelope"></i>
+                    </a>
+
+                    <a href="https://www.linkedin.com/in/renu-kumari-prajapati" class="social-link" target="_blank"
+                        rel="noopener noreferrer" aria-label="LinkedIn">
+                        <i class="fab fa-linkedin-in"></i>
+                    </a>
+                </div>
+            </div>
+
+            <div class="footer-section">
+                <h4>Company</h4>
+                <ul class="footer-links">
+                    <li><a href="AboutUs.html">About Us</a></li>
+                    <li><a href="PrivacyPolicy.html">Privacy Policy</a></li>
+                    <li><a href="terms_service.html">Terms of Service</a></li>
+                    <li><a href="Help-Center.html">Help Center</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="footer-bottom">
+            <div class="footer-container">
+                <p>
+                    &copy; 2026 ExpenseFlow. All rights reserved. Made with ❤️ for
+                    better financial management.
+                </p>
+                <div class="footer-stats">
+                    <span>🏆 Trusted by 10,000+ users</span>
+                    <span>💰 ₹50M+ tracked</span>
+                    <span>📊 99.9% uptime</span>
+                </div>
+            </div>
+        </div>
+    </footer>
     <script>
       // Tab switching functionality
       function switchTab(tabName) {
diff --git a/public/settings.js b/public/settings.js
index 4e7cfce6..22f88afd 100644
--- a/public/settings.js
+++ b/public/settings.js
@@ -92,179 +92,7 @@ class NotificationSettingsController {
 
   createModal() {
     const modalHTML = `
-      <div id="notificationSettingsModal" class="settings-modal">
-        <div class="settings-modal-content">
-          <div class="settings-modal-header">
-            <h2>🔔 Notification Preferences</h2>
-            <button class="settings-modal-close" aria-label="Close">&times;</button>
-          </div>
-          
-          <div class="settings-modal-body">
-            <div class="settings-loading" id="settingsLoading">
-              <div class="settings-spinner"></div>
-              <p>Loading preferences...</p>
-            </div>
-            
-            <div class="settings-content" id="settingsContent" style="display: none;">
-              <!-- Channel Section: Email -->
-              <div class="settings-section">
-                <div class="settings-section-header">
-                  <div class="channel-toggle">
-                    <span class="channel-icon">📧</span>
-                    <span class="channel-name">Email Notifications</span>
-                    <label class="toggle-switch">
-                      <input type="checkbox" id="emailEnabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                </div>
-                <div class="settings-section-content" id="emailSettings">
-                  <p class="settings-help-text">Select which notifications to receive via email:</p>
-                  <div class="notification-types" id="emailTypes"></div>
-                </div>
-              </div>
-
-              <!-- Channel Section: Push -->
-              <div class="settings-section">
-                <div class="settings-section-header">
-                  <div class="channel-toggle">
-                    <span class="channel-icon">🔔</span>
-                    <span class="channel-name">Push Notifications</span>
-                    <label class="toggle-switch">
-                      <input type="checkbox" id="pushEnabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                </div>
-                <div class="settings-section-content" id="pushSettings">
-                  <div class="push-subscription-status" id="pushStatus">
-                    <span class="status-text">Not subscribed</span>
-                    <button class="btn btn-sm btn-primary" id="subscribePushBtn">Enable Push</button>
-                  </div>
-                  <p class="settings-help-text">Select which notifications to receive as push:</p>
-                  <div class="notification-types" id="pushTypes"></div>
-                </div>
-              </div>
-
-              <!-- Channel Section: SMS -->
-              <div class="settings-section">
-                <div class="settings-section-header">
-                  <div class="channel-toggle">
-                    <span class="channel-icon">📱</span>
-                    <span class="channel-name">SMS Notifications</span>
-                    <label class="toggle-switch">
-                      <input type="checkbox" id="smsEnabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                </div>
-                <div class="settings-section-content" id="smsSettings">
-                  <div class="form-group">
-                    <label for="smsPhoneNumber">Phone Number</label>
-                    <input type="tel" id="smsPhoneNumber" placeholder="+1234567890" class="form-control">
-                    <small class="form-text">Include country code (e.g., +1 for US)</small>
-                  </div>
-                  <p class="settings-help-text">SMS is best for critical alerts. Select notifications:</p>
-                  <div class="notification-types" id="smsTypes"></div>
-                </div>
-              </div>
-
-              <!-- Channel Section: Webhook -->
-              <div class="settings-section">
-                <div class="settings-section-header">
-                  <div class="channel-toggle">
-                    <span class="channel-icon">🔗</span>
-                    <span class="channel-name">Webhook Integration</span>
-                    <label class="toggle-switch">
-                      <input type="checkbox" id="webhookEnabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                </div>
-                <div class="settings-section-content" id="webhookSettings">
-                  <div class="form-group">
-                    <label for="webhookUrl">Webhook URL</label>
-                    <input type="url" id="webhookUrl" placeholder="https://your-server.com/webhook" class="form-control">
-                  </div>
-                  <div class="form-group">
-                    <label for="webhookSecret">Secret Key (for signature verification)</label>
-                    <input type="password" id="webhookSecret" placeholder="Optional secret for HMAC signature" class="form-control">
-                  </div>
-                  <p class="settings-help-text">Select which events to send to your webhook:</p>
-                  <div class="notification-types" id="webhookTypes"></div>
-                </div>
-              </div>
-
-              <!-- Quiet Hours Section -->
-              <div class="settings-section">
-                <div class="settings-section-header">
-                  <div class="channel-toggle">
-                    <span class="channel-icon">🌙</span>
-                    <span class="channel-name">Quiet Hours</span>
-                    <label class="toggle-switch">
-                      <input type="checkbox" id="quietHoursEnabled">
-                      <span class="toggle-slider"></span>
-                    </label>
-                  </div>
-                </div>
-                <div class="settings-section-content" id="quietHoursSettings">
-                  <p class="settings-help-text">Non-critical notifications will be delayed during quiet hours:</p>
-                  <div class="quiet-hours-config">
-                    <div class="form-group">
-                      <label for="quietStart">Start Time</label>
-                      <input type="time" id="quietStart" value="22:00" class="form-control">
-                    </div>
-                    <div class="form-group">
-                      <label for="quietEnd">End Time</label>
-                      <input type="time" id="quietEnd" value="08:00" class="form-control">
-                    </div>
-                    <div class="form-group">
-                      <label for="quietTimezone">Timezone</label>
-                      <select id="quietTimezone" class="form-control">
-                        <option value="UTC">UTC</option>
-                        <option value="America/New_York">Eastern Time</option>
-                        <option value="America/Chicago">Central Time</option>
-                        <option value="America/Denver">Mountain Time</option>
-                        <option value="America/Los_Angeles">Pacific Time</option>
-                        <option value="Europe/London">London</option>
-                        <option value="Europe/Paris">Paris</option>
-                        <option value="Asia/Tokyo">Tokyo</option>
-                        <option value="Asia/Shanghai">Shanghai</option>
-                        <option value="Australia/Sydney">Sydney</option>
-                      </select>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Test Notification -->
-              <div class="settings-section">
-                <div class="settings-section-header">
-                  <span class="channel-icon">🧪</span>
-                  <span class="channel-name">Test Notifications</span>
-                </div>
-                <div class="settings-section-content">
-                  <p class="settings-help-text">Send a test notification to verify your settings:</p>
-                  <div class="test-buttons">
-                    <button class="btn btn-outline" id="testEmailBtn">Test Email</button>
-                    <button class="btn btn-outline" id="testPushBtn">Test Push</button>
-                    <button class="btn btn-outline" id="testSmsBtn">Test SMS</button>
-                    <button class="btn btn-outline" id="testWebhookBtn">Test Webhook</button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          
-          <div class="settings-modal-footer">
-            <button class="btn btn-secondary" id="cancelSettingsBtn">Cancel</button>
-            <button class="btn btn-primary" id="saveSettingsBtn">
-              <span class="btn-text">Save Preferences</span>
-              <span class="btn-spinner" style="display: none;"></span>
-            </button>
-          </div>
-        </div>
-      </div>
+    <div> </div>
     `;
 
     document.body.insertAdjacentHTML('beforeend', modalHTML);
@@ -324,7 +152,7 @@ class NotificationSettingsController {
 
     try {
       const response = await fetch('/api/notifications/preferences', {
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -349,7 +177,7 @@ class NotificationSettingsController {
   async loadVapidKey() {
     try {
       const response = await fetch('/api/notifications/push/vapid-key', {
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
       if (response.ok) {
         const data = await response.json();
@@ -377,31 +205,31 @@ class NotificationSettingsController {
     };
   }
 
-  populateForm() {
+  async populateForm() {
     const prefs = this.preferences;
 
     // Email settings
     document.getElementById('emailEnabled').checked = prefs.channels?.email?.enabled ?? true;
-    this.populateNotificationTypes('email', prefs.channels?.email?.types || []);
+    await this.populateNotificationTypes('email', prefs.channels?.email?.types || []);
     document.getElementById('emailSettings').style.display = prefs.channels?.email?.enabled ? 'block' : 'none';
 
     // Push settings
     document.getElementById('pushEnabled').checked = prefs.channels?.push?.enabled ?? false;
-    this.populateNotificationTypes('push', prefs.channels?.push?.types || []);
+    await this.populateNotificationTypes('push', prefs.channels?.push?.types || []);
     document.getElementById('pushSettings').style.display = prefs.channels?.push?.enabled ? 'block' : 'none';
     this.updatePushStatus();
 
     // SMS settings
     document.getElementById('smsEnabled').checked = prefs.channels?.sms?.enabled ?? false;
     document.getElementById('smsPhoneNumber').value = prefs.channels?.sms?.phoneNumber || '';
-    this.populateNotificationTypes('sms', prefs.channels?.sms?.types || []);
+    await this.populateNotificationTypes('sms', prefs.channels?.sms?.types || []);
     document.getElementById('smsSettings').style.display = prefs.channels?.sms?.enabled ? 'block' : 'none';
 
     // Webhook settings
     document.getElementById('webhookEnabled').checked = prefs.channels?.webhook?.enabled ?? false;
     document.getElementById('webhookUrl').value = prefs.channels?.webhook?.url || '';
     document.getElementById('webhookSecret').value = prefs.channels?.webhook?.secret || '';
-    this.populateNotificationTypes('webhook', prefs.channels?.webhook?.types || []);
+    await this.populateNotificationTypes('webhook', prefs.channels?.webhook?.types || []);
     document.getElementById('webhookSettings').style.display = prefs.channels?.webhook?.enabled ? 'block' : 'none';
 
     // Quiet hours
@@ -412,7 +240,7 @@ class NotificationSettingsController {
     document.getElementById('quietHoursSettings').style.display = prefs.quietHours?.enabled ? 'block' : 'none';
   }
 
-  populateNotificationTypes(channel, selectedTypes) {
+  async populateNotificationTypes(channel, selectedTypes) {
     const container = document.getElementById(`${channel}Types`);
     container.innerHTML = '';
 
@@ -514,7 +342,7 @@ class NotificationSettingsController {
     try {
       const response = await fetch('/api/notifications/push/unsubscribe', {
         method: 'POST',
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -587,7 +415,7 @@ class NotificationSettingsController {
       const response = await fetch('/api/notifications/preferences', {
         method: 'PUT',
         headers: {
-          ...this.getAuthHeaders(),
+          ...(await this.getAuthHeaders()),
           'Content-Type': 'application/json'
         },
         body: JSON.stringify(preferences)
@@ -614,7 +442,7 @@ class NotificationSettingsController {
       const response = await fetch('/api/notifications/test', {
         method: 'POST',
         headers: {
-          ...this.getAuthHeaders(),
+          ...(await this.getAuthHeaders()),
           'Content-Type': 'application/json'
         },
         body: JSON.stringify({ channel })
@@ -631,9 +459,26 @@ class NotificationSettingsController {
     }
   }
 
-  getAuthHeaders() {
-    const token = localStorage.getItem('token');
-    return token ? { 'Authorization': `Bearer ${token}` } : {};
+ async  getAuthHeaders() {
+    try {
+      if (!window.Clerk) await this._waitForClerk();
+      if (window.Clerk?.session) {
+        const token = await window.Clerk.session.getToken();
+        return token ? { 'Authorization': `Bearer ${token}` } : {};
+      }
+    } catch (e) { console.warn('getAuthHeaders failed:', e); }
+    return {};
+  }
+
+  _waitForClerk() {
+    return new Promise((resolve) => {
+      const maxWait = 8000; let waited = 0;
+      const check = setInterval(() => {
+        if (window.Clerk?.session) { clearInterval(check); resolve(); }
+        waited += 100;
+        if (waited >= maxWait) { clearInterval(check); resolve(); }
+      }, 100);
+    });
   }
 
   showToast(message, type = 'info') {
@@ -662,11 +507,17 @@ class NotificationCenterController {
     this.init();
   }
 
-  init() {
+  async init() {
     this.createPanel();
     this.attachEventListeners();
-    this.loadUnreadCount();
     this.setupSocketListeners();
+    // Wait for Clerk before loading data
+    try {
+      await this._waitForClerk();
+      this.loadUnreadCount();
+    } catch (e) {
+      console.warn('NotificationCenter: Clerk not ready, skipping initial load');
+    }
   }
 
   createPanel() {
@@ -776,7 +627,7 @@ class NotificationCenterController {
   async loadNotifications() {
     try {
       const response = await fetch(`/api/notifications?page=${this.page}&limit=20`, {
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -794,7 +645,7 @@ class NotificationCenterController {
     this.page++;
     try {
       const response = await fetch(`/api/notifications?page=${this.page}&limit=20`, {
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -884,7 +735,7 @@ class NotificationCenterController {
     try {
       await fetch(`/api/notifications/${notificationId}/read`, {
         method: 'PATCH',
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       const notification = this.notifications.find(n => n._id === notificationId);
@@ -903,7 +754,7 @@ class NotificationCenterController {
     try {
       await fetch('/api/notifications/mark-all-read', {
         method: 'PATCH',
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       this.notifications.forEach(n => n.read = true);
@@ -918,7 +769,7 @@ class NotificationCenterController {
   async loadUnreadCount() {
     try {
       const response = await fetch('/api/notifications/unread-count', {
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -987,9 +838,26 @@ class NotificationCenterController {
     }, 5000);
   }
 
-  getAuthHeaders() {
-    const token = localStorage.getItem('token');
-    return token ? { 'Authorization': `Bearer ${token}` } : {};
+  async getAuthHeaders() {
+    try {
+      if (!window.Clerk) await this._waitForClerk();
+      if (window.Clerk?.session) {
+        const token = await window.Clerk.session.getToken();
+        return token ? { 'Authorization': `Bearer ${token}` } : {};
+      }
+    } catch (e) { console.warn('getAuthHeaders failed:', e); }
+    return {};
+  }
+
+  _waitForClerk() {
+    return new Promise((resolve) => {
+      const maxWait = 8000; let waited = 0;
+      const check = setInterval(() => {
+        if (window.Clerk?.session) { clearInterval(check); resolve(); }
+        waited += 100;
+        if (waited >= maxWait) { clearInterval(check); resolve(); }
+      }, 100);
+    });
   }
 }
 
@@ -1040,9 +908,26 @@ class SecurityController {
     ]);
   }
 
-  getAuthHeaders() {
-    const token = localStorage.getItem('token');
-    return token ? { 'Authorization': `Bearer ${token}` } : {};
+  async getAuthHeaders() {
+    try {
+      if (!window.Clerk) await this._waitForClerk();
+      if (window.Clerk?.session) {
+        const token = await window.Clerk.session.getToken();
+        return token ? { 'Authorization': `Bearer ${token}` } : {};
+      }
+    } catch (e) { console.warn('getAuthHeaders failed:', e); }
+    return {};
+  }
+
+  _waitForClerk() {
+    return new Promise((resolve) => {
+      const maxWait = 8000; let waited = 0;
+      const check = setInterval(() => {
+        if (window.Clerk?.session) { clearInterval(check); resolve(); }
+        waited += 100;
+        if (waited >= maxWait) { clearInterval(check); resolve(); }
+      }, 100);
+    });
   }
 
   async loadActiveSessions() {
@@ -1052,7 +937,7 @@ class SecurityController {
       this.sessionsList.innerHTML = '<div class="setting-item"><div class="setting-info">Loading...</div></div>';
 
       const response = await fetch('/api/auth/sessions', {
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -1107,7 +992,7 @@ class SecurityController {
       this.securityLogBody.innerHTML = '<tr><td colspan="4" style="text-align:center; padding:1rem;">Loading...</td></tr>';
 
       const response = await fetch('/api/auth/security/audit-trail?limit=15', {
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -1148,7 +1033,7 @@ class SecurityController {
     try {
       const response = await fetch(`/api/auth/sessions/${sessionId}`, {
         method: 'DELETE',
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -1168,7 +1053,7 @@ class SecurityController {
     try {
       const response = await fetch('/api/auth/sessions/revoke-all', {
         method: 'POST',
-        headers: this.getAuthHeaders()
+        headers: await this.getAuthHeaders()
       });
 
       if (response.ok) {
@@ -1188,5 +1073,284 @@ document.addEventListener('DOMContentLoaded', () => {
   window.notificationSettings = new NotificationSettingsController();
   window.notificationCenter = new NotificationCenterController();
   window.securityController = new SecurityController();
+  window.profileController = new ProfileController();
 });
 
+
+/**
+ * Profile Controller
+ * Uses Clerk Frontend SDK directly for profile management.
+ * Names & avatar → Clerk user object
+ * Phone & bio → Clerk unsafeMetadata (persisted in Clerk cloud)
+ * Falls back to backend API when available.
+ */
+class ProfileController {
+  constructor() {
+    this.profileData = null;
+    this.isSaving = false;
+    this.isUploadingAvatar = false;
+    this.init();
+  }
+
+  async init() {
+    try {
+      await this.waitForClerk();
+      this.attachEventListeners();
+      this.loadProfile();
+    } catch (err) {
+      console.error('ProfileController init failed:', err);
+    }
+  }
+
+  async waitForClerk() {
+    if (window.Clerk?.user) return;
+    return new Promise((resolve, reject) => {
+      const maxWait = 10000;
+      let waited = 0;
+      const check = setInterval(async () => {
+        if (window.Clerk) {
+          clearInterval(check);
+          try {
+            await window.Clerk.load();
+            resolve();
+          } catch (err) { reject(err); }
+        }
+        waited += 100;
+        if (waited >= maxWait) { clearInterval(check); reject(new Error('Clerk SDK timeout')); }
+      }, 100);
+    });
+  }
+
+  attachEventListeners() {
+    const saveBtn = document.getElementById('save-profile-btn');
+    if (saveBtn) saveBtn.addEventListener('click', () => this.saveProfile());
+
+    const cancelBtn = document.querySelector('#profile-tab .btn-secondary');
+    if (cancelBtn) cancelBtn.addEventListener('click', () => this.resetForm());
+
+    const changeAvatarBtn = document.getElementById('change-avatar-btn');
+    const avatarFileInput = document.getElementById('avatar-file-input');
+    if (changeAvatarBtn && avatarFileInput) {
+      changeAvatarBtn.addEventListener('click', (e) => {
+        e.preventDefault();
+        avatarFileInput.click();
+      });
+      avatarFileInput.addEventListener('change', (e) => {
+        if (e.target.files?.[0]) this.uploadAvatar(e.target.files[0]);
+      });
+    }
+  }
+
+  /**
+   * Load profile entirely from Clerk frontend SDK
+   */
+  loadProfile() {
+    const user = window.Clerk?.user;
+    if (!user) return;
+
+    const meta = user.unsafeMetadata || {};
+
+    this.profileData = {
+      firstName: user.firstName || '',
+      lastName: user.lastName || '',
+      email: user.primaryEmailAddress?.emailAddress || '',
+      imageUrl: user.imageUrl || '',
+      phone: meta.phone || '',
+      bio: meta.bio || ''
+    };
+
+    this.populateForm(this.profileData);
+  }
+
+  populateForm(profile) {
+    // Header
+    const nameEl = document.getElementById('profile-name');
+    const emailHeaderEl = document.getElementById('profile-email');
+    const imageEl = document.getElementById('profile-image');
+    if (nameEl) nameEl.textContent = `${profile.firstName} ${profile.lastName}`.trim() || 'User';
+    if (emailHeaderEl) emailHeaderEl.textContent = profile.email || '';
+    if (imageEl && profile.imageUrl) imageEl.src = profile.imageUrl;
+
+    // Form inputs
+    const firstNameInput = document.getElementById('first-name');
+    const lastNameInput = document.getElementById('last-name');
+    const emailInput = document.getElementById('email');
+    const phoneInput = document.getElementById('phone');
+    const bioInput = document.getElementById('bio');
+
+    if (firstNameInput) firstNameInput.value = profile.firstName;
+    if (lastNameInput) lastNameInput.value = profile.lastName;
+    if (emailInput) {
+      emailInput.value = profile.email;
+      emailInput.readOnly = true;
+      emailInput.title = 'Email is managed through Clerk';
+      emailInput.style.opacity = '0.7';
+      emailInput.style.cursor = 'not-allowed';
+    }
+    if (phoneInput) phoneInput.value = profile.phone;
+    if (bioInput) bioInput.value = profile.bio;
+  }
+
+  /**
+   * Save profile using Clerk frontend SDK
+   */
+  async saveProfile() {
+    if (this.isSaving) return;
+    this.isSaving = true;
+
+    const saveBtn = document.getElementById('save-profile-btn');
+    const originalText = saveBtn?.innerHTML;
+    if (saveBtn) {
+      saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
+      saveBtn.disabled = true;
+    }
+
+    try {
+      const firstName = document.getElementById('first-name')?.value?.trim() || '';
+      const lastName = document.getElementById('last-name')?.value?.trim() || '';
+      const phone = document.getElementById('phone')?.value?.trim() || '';
+      const bio = document.getElementById('bio')?.value?.trim() || '';
+
+      if (!firstName) {
+        this.showToast('First name is required', 'error');
+        return;
+      }
+
+      const user = window.Clerk?.user;
+      if (!user) {
+        this.showToast('Not signed in', 'error');
+        return;
+      }
+
+      // Update Clerk user: names + unsafeMetadata (phone, bio)
+      await user.update({
+        firstName,
+        lastName,
+        unsafeMetadata: {
+          ...(user.unsafeMetadata || {}),
+          phone,
+          bio
+        }
+      });
+
+      // Refresh local data
+      this.profileData = {
+        firstName,
+        lastName,
+        email: user.primaryEmailAddress?.emailAddress || '',
+        imageUrl: user.imageUrl || '',
+        phone,
+        bio
+      };
+      this.populateForm(this.profileData);
+
+      // Also try to sync to backend DB (non-blocking, best-effort)
+      this.syncToBackend(this.profileData).catch(() => {});
+
+      this.showToast('Profile updated successfully!', 'success');
+    } catch (error) {
+      console.error('Save profile error:', error);
+      this.showToast(error.message || 'Failed to save profile', 'error');
+    } finally {
+      this.isSaving = false;
+      if (saveBtn) {
+        saveBtn.innerHTML = originalText;
+        saveBtn.disabled = false;
+      }
+    }
+  }
+
+  /**
+   * Best-effort sync to backend DB
+   */
+  async syncToBackend(profile) {
+    try {
+      const token = await window.Clerk?.session?.getToken();
+      if (!token) return;
+      await fetch('/api/profile', {
+        method: 'PUT',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(profile)
+      });
+    } catch { /* silent */ }
+  }
+
+  /**
+   * Upload avatar using Clerk frontend SDK
+   */
+  async uploadAvatar(file) {
+    if (this.isUploadingAvatar) return;
+
+    if (file.size > 5 * 1024 * 1024) {
+      this.showToast('Image must be less than 5MB', 'error');
+      return;
+    }
+
+    this.isUploadingAvatar = true;
+    const imageEl = document.getElementById('profile-image');
+    const avatarBtn = document.getElementById('change-avatar-btn');
+
+    if (avatarBtn) avatarBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
+
+    // Instant preview
+    if (imageEl) {
+      const reader = new FileReader();
+      reader.onload = (e) => { imageEl.src = e.target.result; };
+      reader.readAsDataURL(file);
+    }
+
+    try {
+      const user = window.Clerk?.user;
+      if (!user) throw new Error('Not signed in');
+
+      await user.setProfileImage({ file });
+      await user.reload();
+
+      if (imageEl && user.imageUrl) imageEl.src = user.imageUrl;
+      if (this.profileData) this.profileData.imageUrl = user.imageUrl;
+
+      this.showToast('Avatar updated successfully!', 'success');
+    } catch (error) {
+      console.error('Avatar upload error:', error);
+      this.showToast('Failed to update avatar', 'error');
+      if (imageEl && this.profileData?.imageUrl) imageEl.src = this.profileData.imageUrl;
+    } finally {
+      this.isUploadingAvatar = false;
+      if (avatarBtn) avatarBtn.innerHTML = '<i class="fas fa-camera"></i>';
+      const fileInput = document.getElementById('avatar-file-input');
+      if (fileInput) fileInput.value = '';
+    }
+  }
+
+  resetForm() {
+    if (this.profileData) {
+      this.populateForm(this.profileData);
+      this.showToast('Changes discarded', 'info');
+    } else {
+      this.loadProfile();
+    }
+  }
+
+  showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `toast toast-${type}`;
+    toast.textContent = message;
+    toast.style.cssText = `
+      position: fixed; bottom: 30px; right: 30px; z-index: 100000;
+      padding: 12px 24px; border-radius: 8px; color: #fff;
+      font-size: 0.95rem; opacity: 0; transition: opacity 0.3s ease;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+      background: ${type === 'success' ? '#1db954' : type === 'error' ? '#e74c3c' : '#3498db'};
+    `;
+    document.body.appendChild(toast);
+    setTimeout(() => { toast.style.opacity = '1'; }, 10);
+    setTimeout(() => {
+      toast.style.opacity = '0';
+      setTimeout(() => toast.remove(), 300);
+    }, 3000);
+  }
+}
+
diff --git a/routes/invoices.js b/routes/invoices.js
index 110fbb75..3e885cac 100644
--- a/routes/invoices.js
+++ b/routes/invoices.js
@@ -8,6 +8,7 @@ const { authenticateToken } = require('../middleware/auth');
 const { InvoiceSchemas, validateRequest, validateQuery, validateParams } = require('../middleware/inputValidator');
 const { invoiceLimiter, invoicePaymentLimiter, exportLimiter, reportLimiter } = require('../middleware/rateLimiter');
 const { body, param, query, validationResult } = require('express-validator');
+const auth = require('../middleware/auth');
 
 // GET /api/invoices - Get all invoices for user
 router.get('/', auth, async (req, res) => {
@@ -94,7 +95,7 @@ router.get('/upcoming', auth, async (req, res) => {
 });
 
 // GET /api/invoices/stats - Get invoice statistics
-router.get('/stats', authenticateToken, async (req, res) => {
+router.get('/stats', auth, async (req, res) => {
     try {
         const { start_date, end_date } = req.query;
         
@@ -120,7 +121,7 @@ router.get('/stats', authenticateToken, async (req, res) => {
 });
 
 // GET /api/invoices/:id - Get single invoice
-router.get('/:id', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.get('/:id', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -158,7 +159,7 @@ router.get('/:id', authenticateToken, param('id').isMongoId(), async (req, res)
 });
 
 // POST /api/invoices - Create new invoice
-router.post('/', authenticateToken, invoiceLimiter, validateRequest(InvoiceSchemas.create), async (req, res) => {
+router.post('/', auth, invoiceLimiter, validateRequest(InvoiceSchemas.create), async (req, res) => {
     try {
         const invoice = await InvoiceService.createInvoice(req.user.userId, req.body);
         
@@ -175,7 +176,7 @@ router.post('/', authenticateToken, invoiceLimiter, validateRequest(InvoiceSchem
 });
 
 // POST /api/invoices/from-time-entries - Create invoice from time entries
-router.post('/from-time-entries', authenticateToken, async (req, res) => {
+router.post('/from-time-entries', auth, async (req, res) => {
     try {
         const { client, time_entry_ids, ...invoiceData } = req.body;
         
@@ -206,7 +207,7 @@ router.post('/from-time-entries', authenticateToken, async (req, res) => {
 });
 
 // POST /api/invoices/from-expenses - Create invoice from expenses
-router.post('/from-expenses', authenticateToken, async (req, res) => {
+router.post('/from-expenses', auth, async (req, res) => {
     try {
         const { client, expense_ids, ...invoiceData } = req.body;
         
@@ -237,7 +238,7 @@ router.post('/from-expenses', authenticateToken, async (req, res) => {
 });
 
 // PUT /api/invoices/:id - Update invoice
-router.put('/:id', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.put('/:id', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -263,7 +264,7 @@ router.put('/:id', authenticateToken, param('id').isMongoId(), async (req, res)
 });
 
 // DELETE /api/invoices/:id - Delete invoice (drafts only)
-router.delete('/:id', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.delete('/:id', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -285,7 +286,7 @@ router.delete('/:id', authenticateToken, param('id').isMongoId(), async (req, re
 });
 
 // POST /api/invoices/:id/send - Send invoice via email
-router.post('/:id/send', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.post('/:id/send', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -307,7 +308,7 @@ router.post('/:id/send', authenticateToken, param('id').isMongoId(), async (req,
 });
 
 // POST /api/invoices/:id/payment - Record payment
-router.post('/:id/payment', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.post('/:id/payment', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -343,7 +344,7 @@ router.post('/:id/payment', authenticateToken, param('id').isMongoId(), async (r
 });
 
 // POST /api/invoices/:id/cancel - Cancel invoice
-router.post('/:id/cancel', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.post('/:id/cancel', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -377,7 +378,7 @@ router.post('/:id/cancel', authenticateToken, param('id').isMongoId(), async (re
 });
 
 // GET /api/invoices/:id/pdf - Generate and download PDF
-router.get('/:id/pdf', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.get('/:id/pdf', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -396,7 +397,7 @@ router.get('/:id/pdf', authenticateToken, param('id').isMongoId(), async (req, r
 });
 
 // POST /api/invoices/:id/apply-late-fee - Apply late fee to invoice
-router.post('/:id/apply-late-fee', authenticateToken, param('id').isMongoId(), async (req, res) => {
+router.post('/:id/apply-late-fee', auth, param('id').isMongoId(), async (req, res) => {
     try {
         const errors = validationResult(req);
         if (!errors.isEmpty()) {
@@ -430,7 +431,7 @@ router.post('/:id/apply-late-fee', authenticateToken, param('id').isMongoId(), a
 });
 
 // POST /api/invoices/apply-late-fees - Apply late fees to all overdue invoices
-router.post('/apply-late-fees', authenticateToken, async (req, res) => {
+router.post('/apply-late-fees', auth, async (req, res) => {
     try {
         const result = await InvoiceService.applyLateFees(req.user.userId);
         
diff --git a/routes/profile.js b/routes/profile.js
new file mode 100644
index 00000000..bf316f84
--- /dev/null
+++ b/routes/profile.js
@@ -0,0 +1,201 @@
+const express = require('express');
+const router = express.Router();
+const multer = require('multer');
+const path = require('path');
+const fs = require('fs');
+const { requireAuth, getUserId } = require('../middleware/clerkAuth');
+const User = require('../models/User');
+const { clerkClient } = require('@clerk/clerk-sdk-node');
+
+// Configure multer for avatar uploads
+const storage = multer.diskStorage({
+  destination: (req, file, cb) => {
+    const uploadDir = path.join(__dirname, '..', 'uploads', 'avatars');
+    if (!fs.existsSync(uploadDir)) {
+      fs.mkdirSync(uploadDir, { recursive: true });
+    }
+    cb(null, uploadDir);
+  },
+  filename: (req, file, cb) => {
+    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
+    const ext = path.extname(file.originalname);
+    cb(null, `avatar-${uniqueSuffix}${ext}`);
+  }
+});
+
+const upload = multer({
+  storage,
+  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
+  fileFilter: (req, file, cb) => {
+    const allowed = /jpeg|jpg|png|gif|webp/;
+    const extOk = allowed.test(path.extname(file.originalname).toLowerCase());
+    const mimeOk = allowed.test(file.mimetype);
+    if (extOk && mimeOk) {
+      cb(null, true);
+    } else {
+      cb(new Error('Only image files (jpeg, jpg, png, gif, webp) are allowed'));
+    }
+  }
+});
+
+/**
+ * GET /api/profile
+ * Get the current user's profile (from Clerk + DB)
+ */
+router.get('/', requireAuth, async (req, res) => {
+  try {
+    const clerkUserId = getUserId(req);
+    if (!clerkUserId) {
+      return res.status(401).json({ error: 'Not authenticated' });
+    }
+
+    // Get DB user data (for extra fields like phone, bio, preferences)
+    let dbUser = await User.findOne({ clerkId: clerkUserId });
+
+    // Try to get Clerk user data, but don't fail if it errors
+    let clerkUser = null;
+    try {
+      clerkUser = await clerkClient.users.getUser(clerkUserId);
+    } catch (clerkErr) {
+      console.warn('Could not fetch Clerk user data:', clerkErr.message);
+    }
+
+    // Build profile response combining Clerk + DB data
+    const profile = {
+      clerkId: clerkUserId,
+      firstName: clerkUser?.firstName || dbUser?.firstName || '',
+      lastName: clerkUser?.lastName || dbUser?.lastName || '',
+      email: clerkUser?.emailAddresses?.[0]?.emailAddress || dbUser?.email || '',
+      imageUrl: clerkUser?.imageUrl || dbUser?.profileImage || '',
+      phone: dbUser?.phone || '',
+      bio: dbUser?.bio || '',
+      preferredCurrency: dbUser?.preferredCurrency || 'INR',
+      locale: dbUser?.locale || 'en-US',
+      createdAt: clerkUser?.createdAt || dbUser?.createdAt,
+      memberSince: dbUser?.createdAt || clerkUser?.createdAt
+    };
+
+    res.json({ success: true, profile });
+  } catch (error) {
+    console.error('Get profile error:', error);
+    res.status(500).json({ error: 'Failed to fetch profile' });
+  }
+});
+
+/**
+ * PUT /api/profile
+ * Update user profile (syncs to both Clerk and DB)
+ */
+router.put('/', requireAuth, async (req, res) => {
+  try {
+    const clerkUserId = getUserId(req);
+    if (!clerkUserId) {
+      return res.status(401).json({ error: 'Not authenticated' });
+    }
+
+    const { firstName, lastName, phone, bio } = req.body;
+
+    // Update Clerk user (first name, last name) — non-blocking, don't fail on error
+    const clerkUpdateData = {};
+    if (firstName !== undefined) clerkUpdateData.firstName = firstName;
+    if (lastName !== undefined) clerkUpdateData.lastName = lastName;
+
+    if (Object.keys(clerkUpdateData).length > 0) {
+      try {
+        await clerkClient.users.updateUser(clerkUserId, clerkUpdateData);
+      } catch (clerkErr) {
+        console.warn('Clerk user update failed (continuing with DB update):', clerkErr.message);
+      }
+    }
+
+    // Update DB user (phone, bio, and sync Clerk data)
+    let dbUser = await User.findOne({ clerkId: clerkUserId });
+    if (dbUser) {
+      if (firstName !== undefined) dbUser.firstName = firstName;
+      if (lastName !== undefined) dbUser.lastName = lastName;
+      if (phone !== undefined) dbUser.phone = phone;
+      if (bio !== undefined) dbUser.bio = bio;
+      dbUser.name = `${firstName || dbUser.firstName || ''} ${lastName || dbUser.lastName || ''}`.trim();
+      await dbUser.save();
+    }
+
+    // Build response from DB data + try Clerk
+    let clerkUser = null;
+    try {
+      clerkUser = await clerkClient.users.getUser(clerkUserId);
+    } catch (clerkErr) {
+      console.warn('Could not fetch updated Clerk user:', clerkErr.message);
+    }
+
+    const profile = {
+      clerkId: clerkUserId,
+      firstName: clerkUser?.firstName || dbUser?.firstName || firstName || '',
+      lastName: clerkUser?.lastName || dbUser?.lastName || lastName || '',
+      email: clerkUser?.emailAddresses?.[0]?.emailAddress || dbUser?.email || '',
+      imageUrl: clerkUser?.imageUrl || dbUser?.profileImage || '',
+      phone: dbUser?.phone || phone || '',
+      bio: dbUser?.bio || bio || '',
+      preferredCurrency: dbUser?.preferredCurrency || 'INR',
+      locale: dbUser?.locale || 'en-US'
+    };
+
+    res.json({ success: true, message: 'Profile updated successfully', profile });
+  } catch (error) {
+    console.error('Update profile error:', error);
+    res.status(500).json({ error: 'Failed to update profile' });
+  }
+});
+
+/**
+ * POST /api/profile/avatar
+ * Upload a new profile avatar (updates Clerk profile image)
+ */
+router.post('/avatar', requireAuth, upload.single('avatar'), async (req, res) => {
+  try {
+    const clerkUserId = getUserId(req);
+    if (!clerkUserId) {
+      return res.status(401).json({ error: 'Not authenticated' });
+    }
+
+    if (!req.file) {
+      return res.status(400).json({ error: 'No image file provided' });
+    }
+
+    const filePath = req.file.path;
+
+    // Upload to Clerk as profile image
+    try {
+      await clerkClient.users.updateUserProfileImage(clerkUserId, {
+        file: fs.createReadStream(filePath)
+      });
+    } catch (clerkErr) {
+      console.error('Clerk avatar upload failed:', clerkErr);
+      // Fallback: save locally and store URL in DB
+    }
+
+    // Also save the local path in DB as fallback
+    const avatarUrl = `/uploads/avatars/${req.file.filename}`;
+    let dbUser = await User.findOne({ clerkId: clerkUserId });
+    if (dbUser) {
+      dbUser.profileImage = avatarUrl;
+      await dbUser.save();
+    }
+
+    // Get updated Clerk user
+    const updatedClerkUser = await clerkClient.users.getUser(clerkUserId);
+
+    res.json({
+      success: true,
+      message: 'Avatar updated successfully',
+      imageUrl: updatedClerkUser.imageUrl || avatarUrl
+    });
+
+    // Cleanup old local file after successful upload (non-blocking)
+    // Keep the latest one as fallback
+  } catch (error) {
+    console.error('Avatar upload error:', error);
+    res.status(500).json({ error: 'Failed to upload avatar' });
+  }
+});
+
+module.exports = router;
diff --git a/server.js b/server.js
index a25523b3..02eebe08 100644
--- a/server.js
+++ b/server.js
@@ -292,6 +292,10 @@ app.use('/api/folders', require('./routes/folders'));
 app.use('/api/procurement', require('./routes/procurement'));
 app.use('/api/compliance', require('./routes/compliance'));
 app.use('/api/project-billing', require('./routes/project-billing'));
+app.use('/api/profile', require('./routes/profile'));
+
+// Serve uploaded avatars
+app.use('/uploads', express.static(require('path').join(__dirname, 'uploads')));
 app.use('/api/treasury', require('./routes/treasury'));
 
 // Import error handling middleware