From f23e7cbdb2f6a97da3e09b81f81deb7b1451db93 Mon Sep 17 00:00:00 2001
From: Saptarshi Mukherjee <mukherjeesaptarshi289@gmail.com>
Date: Wed, 18 Feb 2026 11:18:46 +0530
Subject: [PATCH] feat: Add user accounts and progress tracking system

---
 backend/.env.example                  |  13 +-
 backend/config/passport.js            |  63 +++
 backend/controllers/authController.js |  75 ++-
 backend/models/User.js                |  15 +
 backend/package-lock.json             | 171 +++++-
 backend/package.json                  |   5 +-
 backend/routes/authRoutes.js          |  34 +-
 backend/server.js                     |  18 +-
 frontend/css/style.css                | 383 +++++++++----
 frontend/js/auth.js                   | 282 ++++++----
 frontend/js/dashboard.js              | 131 +++++
 frontend/js/guides.js                 | 167 ++++--
 frontend/js/profile2.js               |  60 +-
 frontend/pages/dashboard.html         | 304 ++++++++++
 frontend/pages/guides.html            | 782 ++++++++++++++------------
 frontend/pages/login.html             | 182 ++++++
 frontend/pages/profile.html           |  70 +--
 frontend/pages/signup.html            | 147 +++++
 18 files changed, 2177 insertions(+), 725 deletions(-)
 create mode 100644 backend/config/passport.js
 create mode 100644 frontend/js/dashboard.js
 create mode 100644 frontend/pages/dashboard.html
 create mode 100644 frontend/pages/login.html
 create mode 100644 frontend/pages/signup.html

diff --git a/backend/.env.example b/backend/.env.example
index 08be54b6..33affa53 100644
--- a/backend/.env.example
+++ b/backend/.env.example
@@ -1,4 +1,15 @@
 PORT=5000
 MONGO_URI=mongodb://localhost:27017/os-compass
+JWT_SECRET=your_jwt_secret_here
+SESSION_SECRET=your_session_secret_here
+GITHUB_CLIENT_ID=your_github_client_id
+GITHUB_CLIENT_SECRET=your_github_client_secret
+GITHUB_CALLBACK_URL=http://localhost:5000/api/auth/github/callback
+FRONTEND_URL=http://localhost:5500
+EMAIL_HOST=smtp.mailtrap.io
+EMAIL_PORT=2525
+EMAIL_USER=your_user
+EMAIL_PASS=your_pass
+EMAIL_FROM=noreply@opensource-compass.org
 GEMINI_API_KEY=
-GEMINI_MODEL=gemini-2.5-flash
+GEMINI_MODEL=gemini-2.0-flash
diff --git a/backend/config/passport.js b/backend/config/passport.js
new file mode 100644
index 00000000..59c5dee9
--- /dev/null
+++ b/backend/config/passport.js
@@ -0,0 +1,63 @@
+import passport from "passport";
+import { Strategy as GitHubStrategy } from "passport-github2";
+import User from "../models/User.js";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+passport.use(
+    new GitHubStrategy(
+        {
+            clientID: process.env.GITHUB_CLIENT_ID,
+            clientSecret: process.env.GITHUB_CLIENT_SECRET,
+            callbackURL: process.env.GITHUB_CALLBACK_URL || "http://localhost:5000/api/auth/github/callback",
+        },
+        async (accessToken, refreshToken, profile, done) => {
+            try {
+                let user = await User.findOne({ githubId: profile.id });
+
+                if (!user) {
+                    // If user doesn't exist by githubId, check if one exists by email
+                    const email = profile.emails && profile.emails[0] ? profile.emails[0].value : null;
+
+                    if (email) {
+                        user = await User.findOne({ email });
+                    }
+
+                    if (user) {
+                        // Update existing user with githubId
+                        user.githubId = profile.id;
+                        await user.save();
+                    } else {
+                        // Create new user
+                        user = await User.create({
+                            name: profile.displayName || profile.username,
+                            email: email || `${profile.username}@github.com`,
+                            githubId: profile.id,
+                            password: Math.random().toString(36).slice(-8), // Dummy password
+                        });
+                    }
+                }
+
+                return done(null, user);
+            } catch (error) {
+                return done(error, null);
+            }
+        }
+    )
+);
+
+passport.serializeUser((user, done) => {
+    done(null, user.id);
+});
+
+passport.deserializeUser(async (id, done) => {
+    try {
+        const user = await User.findById(id);
+        done(null, user);
+    } catch (error) {
+        done(error, null);
+    }
+});
+
+export default passport;
diff --git a/backend/controllers/authController.js b/backend/controllers/authController.js
index 71df9430..5654d517 100644
--- a/backend/controllers/authController.js
+++ b/backend/controllers/authController.js
@@ -31,17 +31,22 @@ export const registerUser = async (req, res) => {
   });
 
   // Send Welcome Email
-  await sendEmail({
-    to: email,
-    subject: "Welcome to AlgoAI 🚀",
-    html: `
-      <h2>Hello ${name} 👋</h2>
-      <p>Welcome to <b>AlgoAI</b>.</p>
-      <p>You can now start using AI tools.</p>
-      <br/>
-      <p>— Team AlgoAI</p>
-    `,
-  });
+  try {
+    await sendEmail({
+      to: email,
+      subject: "Welcome to OpenSource Compass 🚀",
+      html: `
+        <h2>Hello ${name} 👋</h2>
+        <p>Welcome to <b>OpenSource Compass</b>.</p>
+        <p>You can now track your progress and personalize your learning journey.</p>
+        <br/>
+        <p>— The OpenSource Compass Team</p>
+      `,
+    });
+  } catch (error) {
+    console.error("Welcome email failed to send:", error);
+    // Continue even if email fails - don't block registration
+  }
 
   res.status(201).json({
     success: true,
@@ -74,7 +79,7 @@ export const loginUser = async (req, res) => {
       { expiresIn: "1d" }
     );
 
-    
+
     res.cookie("token", token, {
       httpOnly: true,
       secure: process.env.NODE_ENV === "production",
@@ -108,6 +113,48 @@ export const logoutUser = (req, res) => {
 
 
 export const getUserProfile = async (req, res) => {
-  const user = await User.findById(req.userId).select("-password");
-  res.json({ success: true, user });
+  // User is already attached to req.user by protect middleware
+  res.json({ success: true, user: req.user });
+};
+
+export const trackGuideCompletion = async (req, res) => {
+  const { guideId } = req.body;
+  if (!guideId) return res.status(400).json({ message: "Guide ID required" });
+
+  try {
+    const user = await User.findById(req.user._id);
+    if (!user) return res.status(404).json({ message: "User not found" });
+
+    // Check if already completed
+    const isAlreadyCompleted = user.completedGuides.some((g) => g.guideId === guideId);
+    if (isAlreadyCompleted) {
+      return res.status(200).json({ success: true, message: "Guide already completed", user });
+    }
+
+    user.completedGuides.push({ guideId, completedAt: new Date() });
+    await user.save();
+
+    res.json({ success: true, message: "Guide progress tracked", user });
+  } catch (error) {
+    res.status(500).json({ message: "Server error" });
+  }
+};
+
+export const updateUserProfile = async (req, res) => {
+  const { name, password } = req.body;
+  try {
+    const user = await User.findById(req.user._id);
+    if (!user) return res.status(404).json({ message: "User not found" });
+
+    if (name) user.name = name;
+    if (password) {
+      const hashedPassword = await bcrypt.hash(password, 10);
+      user.password = hashedPassword;
+    }
+
+    await user.save();
+    res.json({ success: true, message: "Profile updated", user: { id: user._id, name: user.name, email: user.email } });
+  } catch (error) {
+    res.status(500).json({ message: "Server error" });
+  }
 };
diff --git a/backend/models/User.js b/backend/models/User.js
index 3b38bef0..672fc336 100644
--- a/backend/models/User.js
+++ b/backend/models/User.js
@@ -21,6 +21,13 @@ const UserSchema = new mongoose.Schema(
       minlength: [6, "Password must be at least 6 characters"],
     },
 
+    //  GITHUB AUTH
+    githubId: {
+      type: String,
+      unique: true,
+      sparse: true,
+    },
+
     //  NEW FIELDS FOR CONTRIBUTOR PROGRESS
     progress: {
       issuesSelected: {
@@ -42,6 +49,14 @@ const UserSchema = new mongoose.Schema(
       },
     },
 
+    // TRACKING GUIDES AND MODULES
+    completedGuides: [
+      {
+        guideId: { type: String, required: true },
+        completedAt: { type: Date, default: Date.now },
+      }
+    ],
+
     //  ONBOARDING LEVEL
     level: {
       type: String,
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 7bab12b7..5dca7347 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -16,9 +16,12 @@
         "cors": "^2.8.6",
         "dotenv": "^17.2.3",
         "express": "^5.2.1",
+        "express-session": "^1.19.0",
         "jsonwebtoken": "^9.0.3",
         "mongoose": "^9.1.1",
-        "nodemailer": "^7.0.13"
+        "nodemailer": "^7.0.13",
+        "passport": "^0.7.0",
+        "passport-github2": "^0.1.12"
       }
     },
     "node_modules/@google/generative-ai": {
@@ -84,6 +87,15 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/base64url": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/base64url/-/base64url-3.0.1.tgz",
+      "integrity": "sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/bcryptjs": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-3.0.3.tgz",
@@ -446,6 +458,50 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/express-session": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/express-session/-/express-session-1.19.0.tgz",
+      "integrity": "sha512-0csaMkGq+vaiZTmSMMGkfdCOabYv192VbytFypcvI0MANrp+4i/7yEkJ0sbAEhycQjntaKGzYfjfXQyVb7BHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "~0.7.2",
+        "cookie-signature": "~1.0.7",
+        "debug": "~2.6.9",
+        "depd": "~2.0.0",
+        "on-headers": "~1.1.0",
+        "parseurl": "~1.3.3",
+        "safe-buffer": "~5.2.1",
+        "uid-safe": "~2.1.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/express-session/node_modules/cookie-signature": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz",
+      "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
+      "license": "MIT"
+    },
+    "node_modules/express-session/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/express-session/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "license": "MIT"
+    },
     "node_modules/finalhandler": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-2.1.1.tgz",
@@ -973,6 +1029,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/oauth": {
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.10.2.tgz",
+      "integrity": "sha512-JtFnB+8nxDEXgNyniwz573xxbKSOu3R8D40xQKqcjwJ2CDkYqUDI53o6IuzDJBx60Z8VKCm271+t8iFjakrl8Q==",
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -1006,6 +1068,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/on-headers": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz",
+      "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -1024,6 +1095,63 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/passport": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/passport/-/passport-0.7.0.tgz",
+      "integrity": "sha512-cPLl+qZpSc+ireUvt+IzqbED1cHHkDoVYMo30jbJIdOOjQ1MQYZBPiNvmi8UM6lJuOpTPXJGZQk0DtC4y61MYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "passport-strategy": "1.x.x",
+        "pause": "0.0.1",
+        "utils-merge": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jaredhanson"
+      }
+    },
+    "node_modules/passport-github2": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/passport-github2/-/passport-github2-0.1.12.tgz",
+      "integrity": "sha512-3nPUCc7ttF/3HSP/k9sAXjz3SkGv5Nki84I05kSQPo01Jqq1NzJACgMblCK0fGcv9pKCG/KXU3AJRDGLqHLoIw==",
+      "dependencies": {
+        "passport-oauth2": "1.x.x"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/passport-oauth2": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/passport-oauth2/-/passport-oauth2-1.8.0.tgz",
+      "integrity": "sha512-cjsQbOrXIDE4P8nNb3FQRCCmJJ/utnFKEz2NX209f7KOHPoX18gF7gBzBbLLsj2/je4KrgiwLLGjf0lm9rtTBA==",
+      "license": "MIT",
+      "dependencies": {
+        "base64url": "3.x.x",
+        "oauth": "0.10.x",
+        "passport-strategy": "1.x.x",
+        "uid2": "0.0.x",
+        "utils-merge": "1.x.x"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/jaredhanson"
+      }
+    },
+    "node_modules/passport-strategy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/passport-strategy/-/passport-strategy-1.0.0.tgz",
+      "integrity": "sha512-CB97UUvDKJde2V0KDWWB3lyf6PC3FaZP7YxZ2G8OAtn9p4HI9j9JLP9qjOGZFvyl8uwNT8qM+hGnz/n16NI7oA==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/path-to-regexp": {
       "version": "8.3.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-8.3.0.tgz",
@@ -1034,6 +1162,11 @@
         "url": "https://opencollective.com/express"
       }
     },
+    "node_modules/pause": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
+      "integrity": "sha512-KG8UEiEVkR3wGEb4m5yZkVCzigAD+cVEJck2CzYZO37ZGJfctvVptVO192MwrtPhzONn6go8ylnOdMhKqi4nfg=="
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1077,6 +1210,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/random-bytes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/random-bytes/-/random-bytes-1.0.0.tgz",
+      "integrity": "sha512-iv7LhNVO047HzYR3InF6pUcUsPQiHTM1Qal51DcGSuZFBil1aBBWG5eHPNek7bvILMaYJ/8RU1e8w1AMdHmLQQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/range-parser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
@@ -1337,6 +1479,24 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/uid-safe": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
+      "integrity": "sha512-KPHm4VL5dDXKz01UuEd88Df+KzynaohSL9fBh096KWAxSKZQDI2uBrVqtvRM4rwrIrRRKsdLNML/lnaaVSRioA==",
+      "license": "MIT",
+      "dependencies": {
+        "random-bytes": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/uid2": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.4.tgz",
+      "integrity": "sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -1346,6 +1506,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/backend/package.json b/backend/package.json
index 9b30e1ea..13052d61 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -18,9 +18,12 @@
     "cors": "^2.8.6",
     "dotenv": "^17.2.3",
     "express": "^5.2.1",
+    "express-session": "^1.19.0",
     "jsonwebtoken": "^9.0.3",
     "mongoose": "^9.1.1",
-    "nodemailer": "^7.0.13"
+    "nodemailer": "^7.0.13",
+    "passport": "^0.7.0",
+    "passport-github2": "^0.1.12"
   },
   "description": ""
 }
diff --git a/backend/routes/authRoutes.js b/backend/routes/authRoutes.js
index e889d182..a89d9342 100644
--- a/backend/routes/authRoutes.js
+++ b/backend/routes/authRoutes.js
@@ -15,12 +15,15 @@
 // router.get("/profile", protect, getUserProfile); // Protected route
 
 // export default router;
-import express from "express";
+import passport from "passport";
+import jwt from "jsonwebtoken";
 import {
   registerUser,
   loginUser,
   logoutUser,
   getUserProfile,
+  trackGuideCompletion,
+  updateUserProfile,
 } from "../controllers/authController.js";
 import { protect } from "../middleware/authMiddleware.js";
 
@@ -31,4 +34,33 @@ router.post("/login", loginUser);
 router.post("/logout", logoutUser);
 router.get("/me", protect, getUserProfile);
 
+// GitHub OAuth Routes
+router.get("/github", passport.authenticate("github", { scope: ["user:email"] }));
+
+router.get(
+  "/github/callback",
+  passport.authenticate("github", { failureRedirect: "/login" }),
+  (req, res) => {
+    // Generate JWT for the user authenticated via GitHub
+    const token = jwt.sign(
+      { id: req.user._id },
+      process.env.JWT_SECRET,
+      { expiresIn: "1d" }
+    );
+
+    res.cookie("token", token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: process.env.NODE_ENV === "production" ? "none" : "lax",
+      maxAge: 24 * 60 * 60 * 1000,
+    });
+
+    // Redirect to frontend dashboard or home
+    res.redirect(`${process.env.FRONTEND_URL || "http://localhost:5500"}/frontend/pages/dashboard.html`);
+  }
+);
+
+// Progress Tracking Route
+router.post("/track-guide", protect, trackGuideCompletion);
+
 export default router;
diff --git a/backend/server.js b/backend/server.js
index c2514416..86d9125f 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -7,13 +7,29 @@ import contributorProgressRoutes from "./routes/contributorProgressRoutes.js";
 import chatRoute from "./routes/chat.route.js";
 import prRoutes from "./routes/prRoutes.js";
 import issueRoutes from "./routes/issueRoutes.js";
+import session from "express-session";
+import passport from "./config/passport.js";
+import cookieParser from "cookie-parser";
 dotenv.config();
 
 const app = express();
 
 // Middleware
-app.use(cors());
+app.use(cors({
+  origin: ["http://localhost:3000", "http://localhost:5500", "http://127.0.0.1:5500", "http://127.0.0.1:3000"],
+  credentials: true
+}));
 app.use(express.json());
+app.use(cookieParser());
+app.use(
+  session({
+    secret: process.env.SESSION_SECRET || "opensource-compass-secret",
+    resave: false,
+    saveUninitialized: false,
+  })
+);
+app.use(passport.initialize());
+app.use(passport.session());
 app.use("/api", chatRoute);
 app.use("/api/pr", prRoutes);
 app.use("/api/issue", issueRoutes);
diff --git a/frontend/css/style.css b/frontend/css/style.css
index f08d712c..afa82a0a 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -4,71 +4,86 @@
 /* =========================
    1. UNIFIED THEME VARIABLES
    ========================= */
-   :root {
-    /* Primary Palette - Light Mode */
-    --bg-main: #fdf4e3;          /* Warm Cream */
-    --bg-alt: #ffffff;           /* Pure White */
-    --surface: rgba(255, 255, 255, 0.8);
-    
-    --text-high: #1b263b;        /* Deep Navy */
-    --text-mid: #5a5a5a;         /* Gray */
-    --text-inv: #ffffff;
-    
-    --gold-bright: #d4af37;
-    --gold-deep: #b8860b;
-    --gold-glow: rgba(212, 175, 55, 0.3);
-
-    --border: rgba(212, 175, 55, 0.2);
-    --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    --glass: blur(12px) saturate(180%);
+:root {
+  /* Primary Palette - Light Mode */
+  --bg-main: #fdf4e3;
+  /* Warm Cream */
+  --bg-alt: #ffffff;
+  /* Pure White */
+  --surface: rgba(255, 255, 255, 0.8);
+
+  --text-high: #1b263b;
+  /* Deep Navy */
+  --text-mid: #5a5a5a;
+  /* Gray */
+  --text-inv: #ffffff;
+
+  --gold-bright: #d4af37;
+  --gold-deep: #b8860b;
+  --gold-glow: rgba(212, 175, 55, 0.3);
+
+  --border: rgba(212, 175, 55, 0.2);
+  --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  --glass: blur(12px) saturate(180%);
 }
 
 body.dark-mode {
-    /* Primary Palette - Dark Mode */
-    --bg-main: #0b1220;          /* Deep Navy Background */
-    --bg-alt: #16213e;           /* Lighter Navy Surface */
-    --surface: rgba(22, 33, 62, 0.8);
-    
-    --text-high: #fdf4e3;        /* Warm Cream Text */
-    --text-mid: #b9bfd1;         /* Muted Slate */
-    
-    --gold-bright: #e4c76a;
-    --gold-glow: rgba(228, 199, 106, 0.25);
-    
-    --border: rgba(228, 199, 106, 0.15);
-    --shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
+  /* Primary Palette - Dark Mode */
+  --bg-main: #0b1220;
+  /* Deep Navy Background */
+  --bg-alt: #16213e;
+  /* Lighter Navy Surface */
+  --surface: rgba(22, 33, 62, 0.8);
+
+  --text-high: #fdf4e3;
+  /* Warm Cream Text */
+  --text-mid: #b9bfd1;
+  /* Muted Slate */
+
+  --gold-bright: #e4c76a;
+  --gold-glow: rgba(228, 199, 106, 0.25);
+
+  --border: rgba(228, 199, 106, 0.15);
+  --shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
 }
 
 /* =========================
    2. GLOBAL VISIBILITY FIXES
    ========================= */
 body {
-    background: var(--bg-main);
-    color: var(--text-mid);
-    transition: background 0.4s ease, color 0.4s ease;
+  background: var(--bg-main);
+  color: var(--text-mid);
+  transition: background 0.4s ease, color 0.4s ease;
 }
 
-h1, h2, h3, h4 {
-    color: var(--text-high);
+h1,
+h2,
+h3,
+h4 {
+  color: var(--text-high);
 }
 
 /* =========================
    3. ADAPTIVE CARD & NESTING FIXES
    ========================= */
-.card, .why-card, .stat-card, .newsletter-container {
-    background: var(--surface) !important;
-    backdrop-filter: var(--glass);
-    -webkit-backdrop-filter: var(--glass);
-    border: 1px solid var(--border) !important;
-    box-shadow: var(--shadow);
-    color: var(--text-high) !important;
-    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
-}
-
-.card:hover, .why-card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 20px 40px var(--gold-glow);
-    border-color: var(--gold-bright) !important;
+.card,
+.why-card,
+.stat-card,
+.newsletter-container {
+  background: var(--surface) !important;
+  backdrop-filter: var(--glass);
+  -webkit-backdrop-filter: var(--glass);
+  border: 1px solid var(--border) !important;
+  box-shadow: var(--shadow);
+  color: var(--text-high) !important;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
+}
+
+.card:hover,
+.why-card:hover {
+  transform: translateY(-10px);
+  box-shadow: 0 20px 40px var(--gold-glow);
+  border-color: var(--gold-bright) !important;
 }
 
 /* =========================
@@ -77,45 +92,47 @@ h1, h2, h3, h4 {
 
 /* Newsletter adaptive colors */
 .newsletter-form input {
-    background: var(--bg-alt) !important;
-    color: var(--text-high) !important;
-    border: 2px solid var(--border) !important;
+  background: var(--bg-alt) !important;
+  color: var(--text-high) !important;
+  border: 2px solid var(--border) !important;
 }
 
 /* Badge Glow (Visible in Dark Mode) */
 .badge {
-    background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
-    box-shadow: 0 4px 15px var(--gold-glow);
+  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
+  box-shadow: 0 4px 15px var(--gold-glow);
 }
 
 /* Icon visibility */
-.stat-icon i, .why-card-icon i {
-    color: var(--gold-bright);
-    filter: drop-shadow(0 0 8px var(--gold-glow));
+.stat-icon i,
+.why-card-icon i {
+  color: var(--gold-bright);
+  filter: drop-shadow(0 0 8px var(--gold-glow));
 }
 
 /* Navbar Adaptive Blur */
 header {
-    background: var(--surface);
-    backdrop-filter: var(--glass);
-    border-bottom: 3px solid var(--gold-bright);
+  background: var(--surface);
+  backdrop-filter: var(--glass);
+  border-bottom: 3px solid var(--gold-bright);
 }
 
 /* =========================
    5. UTILITY & SCROLLBAR
    ========================= */
 ::-webkit-scrollbar {
-    width: 10px;
+  width: 10px;
 }
 
 ::-webkit-scrollbar-track {
-    background: var(--bg-main);
+  background: var(--bg-main);
 }
 
 ::-webkit-scrollbar-thumb {
-    background: var(--gold-bright);
-    border-radius: 5px;
+  background: var(--gold-bright);
+  border-radius: 5px;
 }
+
 * {
   margin: 0;
   padding: 0;
@@ -140,6 +157,106 @@ body {
   }
 }
 
+/* Auth & Profile Styles */
+.profile-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-left: 1rem;
+}
+
+.profile-icon {
+  width: 38px;
+  height: 38px;
+  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  box-shadow: 0 4px 10px var(--gold-glow);
+}
+
+.profile-menu {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px;
+  width: 200px;
+  box-shadow: var(--shadow);
+  display: none;
+  flex-direction: column;
+  z-index: 1001;
+}
+
+.profile-dropdown:hover .profile-menu {
+  display: flex;
+}
+
+.profile-menu-item {
+  padding: 10px;
+  color: var(--text-high);
+  text-decoration: none;
+  font-size: 0.9rem;
+  border-radius: 8px;
+  transition: background 0.2s;
+}
+
+.profile-menu-item:hover {
+  background: rgba(212, 175, 55, 0.1);
+}
+
+.track-guide-btn {
+  background: white;
+  border: 1px solid var(--gold-bright);
+  color: var(--gold-deep);
+  padding: 8px 16px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.track-guide-btn:hover {
+  background: var(--gold-bright);
+  color: white;
+}
+
+.track-guide-btn.completed-style {
+  background: #27ae60;
+  color: white;
+  border-color: #27ae60;
+  cursor: default;
+}
+
+.btn-auth {
+  width: 100%;
+  padding: 1rem;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
+  color: white;
+  border: none;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.btn-auth:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px var(--gold-glow);
+}
+
+.btn-small {
+  padding: 0.5rem 1rem;
+  font-size: 0.85rem;
+  border-radius: 20px;
+}
+
 
 /* =========================
    THEME VARIABLES (CLASSIC)
@@ -157,32 +274,52 @@ body {
   --shadow-main: 0 8px 32px rgb(0 0 0 / 12%);
   --shadow-hover: 0 20px 40px rgb(0 0 0 / 18%);
   --bounce-curve: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --newsletter-bg: #fcfbf7;        /* Light cream */
-  --newsletter-card: #ffffff;      /* Pure white */
-  --newsletter-text-h: #1a1a1a;    /* Deep navy/black */
-  --newsletter-text-p: #555555;    /* Gray */
-  --newsletter-border: #e2d1a8;    /* Golden beige */
-  --newsletter-btn: #b59d5c;       /* Primary gold */
+  --newsletter-bg: #fcfbf7;
+  /* Light cream */
+  --newsletter-card: #ffffff;
+  /* Pure white */
+  --newsletter-text-h: #1a1a1a;
+  /* Deep navy/black */
+  --newsletter-text-p: #555555;
+  /* Gray */
+  --newsletter-border: #e2d1a8;
+  /* Golden beige */
+  --newsletter-btn: #b59d5c;
+  /* Primary gold */
   --newsletter-input-bg: #ffffff;
-  --programs-header-h3: #1b263b;    /* Deep Navy */
-  --programs-header-p: #5a5a5a;     /* Muted Gray */
-  --programs-bg: #ffffff;           /* Pure White */
+  --programs-header-h3: #1b263b;
+  /* Deep Navy */
+  --programs-header-p: #5a5a5a;
+  /* Muted Gray */
+  --programs-bg: #ffffff;
+  /* Pure White */
   /* Light Mode - Stats */
   /* Light Mode - Stats */
-  --stats-bg: #fdf4e3;           /* Warm Cream */
-  --stats-card-bg: #ffffff;      /* Pure White */
-  --stats-text-h: #1b263b;       /* Deep Navy */
-  --stats-text-p: #5a5a5a;       /* Charcoal Gray */
-  --stats-card-border: #e2d1a8;  /* Golden Beige */
+  --stats-bg: #fdf4e3;
+  /* Warm Cream */
+  --stats-card-bg: #ffffff;
+  /* Pure White */
+  --stats-text-h: #1b263b;
+  /* Deep Navy */
+  --stats-text-p: #5a5a5a;
+  /* Charcoal Gray */
+  --stats-card-border: #e2d1a8;
+  /* Golden Beige */
   --stats-shadow: rgba(0, 0, 0, 0.08);
-  --programs-bg: #ffffff;           /* Pure White */
-  --programs-text-h3: #1b263b;      /* Deep Navy */
-  --programs-text-p: #5a5a5a;       /* Muted Gray */
-  --programs-underline: #d4af37;    /* Primary Gold */
+  --programs-bg: #ffffff;
+  /* Pure White */
+  --programs-text-h3: #1b263b;
+  /* Deep Navy */
+  --programs-text-p: #5a5a5a;
+  /* Muted Gray */
+  --programs-underline: #d4af37;
+  /* Primary Gold */
   --video-section-bg: #ffffff;
-  --video-h3-color: #ffffff;       /* Deep Navy */
-  --video-eyebrow-color: #b8860b;  /* Secondary Gold */
-  
+  --video-h3-color: #ffffff;
+  /* Deep Navy */
+  --video-eyebrow-color: #b8860b;
+  /* Secondary Gold */
+
 }
 
 body.dark-mode {
@@ -204,46 +341,69 @@ body.dark-mode {
 
   --border-subtle: rgba(255, 255, 255, 0.08);
   /* Dark Mode Overrides */
-  --newsletter-bg: #121212;        /* Dark background */
-  --newsletter-card: #1e1e1e;      /* Slightly lighter dark card */
-  --newsletter-text-h: #f0f0f0;    /* Off-white */
-  --newsletter-text-p: #b0b0b0;    /* Light gray */
-  --newsletter-border: #333333;    /* Subtle dark border */
-  --newsletter-input-bg: #2d2d2d;  /* Dark input field */
+  --newsletter-bg: #121212;
+  /* Dark background */
+  --newsletter-card: #1e1e1e;
+  /* Slightly lighter dark card */
+  --newsletter-text-h: #f0f0f0;
+  /* Off-white */
+  --newsletter-text-p: #b0b0b0;
+  /* Light gray */
+  --newsletter-border: #333333;
+  /* Subtle dark border */
+  --newsletter-input-bg: #2d2d2d;
+  /* Dark input field */
   /* Dark Mode Overrides */
-  --programs-header-h3: #fdf4e3;    /* Warm Cream / Off-white */
-  --programs-header-p: #b9bfd1;     /* Lighter Slate Gray */
+  --programs-header-h3: #fdf4e3;
+  /* Warm Cream / Off-white */
+  --programs-header-p: #b9bfd1;
+  /* Lighter Slate Gray */
   --programs-bg: #0b1220;
   /* Dark Mode - Stats */
   /* Dark Mode - Stats */
-  --stats-bg: #d5e2b4;           /* Solid Dark Background */
-  --stats-card-bg: rgba(20, 26, 43, 0.95); /* Deep Navy Glass */
-  --stats-text-h: #f5f4f0;       /* Off-White Header */
-  --stats-text-p: #b9bfd1;       /* Muted Slate Text */
-  --stats-card-border: rgba(228, 199, 106, 0.3); /* Softer Gold Border */
+  --stats-bg: #d5e2b4;
+  /* Solid Dark Background */
+  --stats-card-bg: rgba(20, 26, 43, 0.95);
+  /* Deep Navy Glass */
+  --stats-text-h: #f5f4f0;
+  /* Off-White Header */
+  --stats-text-p: #b9bfd1;
+  /* Muted Slate Text */
+  --stats-card-border: rgba(228, 199, 106, 0.3);
+  /* Softer Gold Border */
   --stats-shadow: rgba(0, 0, 0, 0.6);
-  --programs-bg: #0b1220;           /* Deep Space Navy */
-  --programs-text-h3: #fdf4e3;      /* Warm Cream */
-  --programs-text-p: #b9bfd1;       /* Slate Blue Gray */
+  --programs-bg: #0b1220;
+  /* Deep Space Navy */
+  --programs-text-h3: #fdf4e3;
+  /* Warm Cream */
+  --programs-text-p: #b9bfd1;
+  /* Slate Blue Gray */
   --programs-underline: #e4c76a;
-  --video-section-bg: #0b1220;     /* Deep Space Navy */
-  --video-h3-color: #fdf4e3;       /* Warm Cream */
-  --video-eyebrow-color: #ffca28;  /* Bright Gold */
+  --video-section-bg: #0b1220;
+  /* Deep Space Navy */
+  --video-h3-color: #fdf4e3;
+  /* Warm Cream */
+  --video-eyebrow-color: #ffca28;
+  /* Bright Gold */
 }
+
 :root {
   /* Light Mode - Standard High Contrast */
-  --h3-color: #1b263b; /* Deep Navy */
+  --h3-color: #1b263b;
+  /* Deep Navy */
 }
 
 body.dark-mode {
   /* Dark Mode - High Visibility */
-  --h3-color: #fdf4e3; /* Warm Cream */
+  --h3-color: #fdf4e3;
+  /* Warm Cream */
 }
 
 /* Global H3 Application */
 h3 {
   color: var(--h3-color);
-  transition: color 0.4s ease; /* Smooth theme switching */
+  transition: color 0.4s ease;
+  /* Smooth theme switching */
 }
 
 /* =========================
@@ -259,6 +419,7 @@ body {
   color: var(--charcoal-dark);
   padding-top: 90px;
 }
+
 .video-section {
   padding: 60px 20px;
   text-align: center;
@@ -293,6 +454,7 @@ body {
   background: linear-gradient(90deg, var(--primary-gold), var(--secondary-gold));
   border-radius: 2px;
 }
+
 .programs {
   background-color: var(--programs-bg);
   padding: 80px 6%;
@@ -327,6 +489,7 @@ body {
   margin: 0 auto 3.5rem;
   transition: color 0.4s ease;
 }
+
 .programs {
   background-color: var(--programs-bg);
   transition: background-color 0.4s ease;
@@ -360,6 +523,7 @@ body {
   border-radius: 2px;
   box-shadow: 0 0 10px var(--gold-glow);
 }
+
 .stats {
   background-color: var(--stats-bg);
   padding: 80px 6%;
@@ -385,7 +549,8 @@ body {
   border-radius: 20px;
   text-align: center;
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
-  backdrop-filter: blur(10px); /* Adds premium glass feel in dark mode */
+  backdrop-filter: blur(10px);
+  /* Adds premium glass feel in dark mode */
 }
 
 .stat-card:hover {
@@ -2123,4 +2288,4 @@ body.dark-mode .newsletter-section input {
   background-color: #333 !important;
   color: #ffffff !important;
   border: 1px solid #555 !important;
-}
+}
\ No newline at end of file
diff --git a/frontend/js/auth.js b/frontend/js/auth.js
index 9a2611d3..d085b3eb 100644
--- a/frontend/js/auth.js
+++ b/frontend/js/auth.js
@@ -1,156 +1,192 @@
-// Authentication logic using localStorage
+const API_URL = 'http://localhost:5000/api';
 
-// --- Event Listeners ---
-document.addEventListener('DOMContentLoaded', function() {
-    updateProfileIcon(); // Initialize nav on every page load
-    
+document.addEventListener('DOMContentLoaded', function () {
+    initAuth();
+});
+
+async function initAuth() {
+    await checkAuthStatus();
+
+    // Attach form listeners if they exist
     const signupForm = document.getElementById('signupForm');
     if (signupForm) signupForm.addEventListener('submit', handleSignup);
 
     const loginForm = document.getElementById('loginForm');
     if (loginForm) loginForm.addEventListener('submit', handleLogin);
-});
-
-// --- Auth Handlers ---
-function handleSignup(e) {
-    e.preventDefault();
-    const name = document.getElementById('name').value.trim();
-    const email = document.getElementById('email').value.trim();
-    const password = document.getElementById('password').value;
-    const confirmPassword = document.getElementById('confirmPassword').value;
-    
-    clearErrors();
-    let isValid = true;
-    
-    if (name.length < 2) { showError('nameError', 'Name must be at least 2 characters'); isValid = false; }
-    if (!isValidEmail(email)) { showError('emailError', 'Please enter a valid email address'); isValid = false; }
-    if (password.length < 6) { showError('passwordError', 'Password must be at least 6 characters'); isValid = false; }
-    if (password !== confirmPassword) { showError('confirmPasswordError', 'Passwords do not match'); isValid = false; }
-    
-    if (!isValid) return;
-
-    const users = JSON.parse(localStorage.getItem('users') || '[]');
-    if (users.find(user => user.email === email)) {
-        showError('emailError', 'An account with this email already exists');
-        return;
-    }
-    
-    const newUser = {
-        id: Date.now().toString(),
-        name: name,
-        email: email,
-        password: password,
-        createdAt: new Date().toISOString()
-    };
-    
-    users.push(newUser);
-    localStorage.setItem('users', JSON.stringify(users));
-    localStorage.setItem('currentUser', JSON.stringify({ id: newUser.id, name: newUser.name, email: newUser.email }));
-    
-    alert('Account created successfully!');
-    window.location.href = 'index.html';
 }
 
-function handleLogin(e) {
-    e.preventDefault();
-    const email = document.getElementById('loginEmail').value.trim();
-    const password = document.getElementById('loginPassword').value;
-    
-    clearErrors();
-    const users = JSON.parse(localStorage.getItem('users') || '[]');
-    const user = users.find(u => u.email === email && u.password === password);
-    
-    if (!user) {
-        showError('loginPasswordError', 'Invalid email or password');
-        return;
+async function checkAuthStatus() {
+    try {
+        const response = await fetch(`${API_URL}/auth/me`, {
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include' // Required to send cookies cross-origin
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            localStorage.setItem('currentUser', JSON.stringify(data.user));
+            updateUI(data.user);
+        } else {
+            localStorage.removeItem('currentUser');
+            updateUI(null);
+        }
+    } catch (error) {
+        console.error('Auth check failed:', error);
+        updateUI(null);
     }
-    
-    localStorage.setItem('currentUser', JSON.stringify({ id: user.id, name: user.name, email: user.email }));
-    window.location.href = 'index.html';
 }
 
-// --- Profile Icon & Dropdown Logic ---
-function updateProfileIcon() {
-    const nav = document.querySelector('nav');
-    if (!nav) return;
+function updateUI(user) {
+    const navLinks = document.querySelector('.nav-links');
+    if (!navLinks) return;
 
-    const existingProfile = nav.querySelector('.profile-dropdown');
-    if (existingProfile) existingProfile.remove();
+    // Clean up existing auth elements
+    const authElements = navLinks.querySelectorAll('.auth-item');
+    authElements.forEach(el => el.remove());
+
+    if (user) {
+        // User is logged in - add Dashboard link as first item
+        const dashboardLink = document.createElement('a');
+        dashboardLink.href = getCorrectPath('frontend/pages/dashboard.html');
+        dashboardLink.textContent = 'Dashboard';
+        dashboardLink.className = 'auth-item';
+
+        // Find first link to insert before
+        const firstLink = navLinks.querySelector('a');
+        if (firstLink) {
+            navLinks.insertBefore(dashboardLink, firstLink);
+        } else {
+            navLinks.appendChild(dashboardLink);
+        }
 
-    const currentUser = getCurrentUser();
-    
-    if (currentUser) {
         const profileDropdown = document.createElement('div');
-        profileDropdown.className = 'profile-dropdown';
-        
-        const profileIcon = document.createElement('div');
-        profileIcon.className = 'profile-icon';
-        profileIcon.textContent = currentUser.name.charAt(0).toUpperCase();
-        profileIcon.onclick = toggleProfileMenu;
-        
-        const profileMenu = document.createElement('div');
-        profileMenu.className = 'profile-menu';
-        profileMenu.id = 'profileMenu';
-        
-        profileMenu.innerHTML = `
-            <div class="profile-menu-item" style="font-weight:600; color:var(--primary-blue)">${currentUser.name}</div>
-            <div class="profile-menu-item" style="font-size:12px; color:#666; margin-bottom:5px;">${currentUser.email}</div>
-            <a href="../pages/profile.html" class="profile-menu-item">👤 Profile Settings</a>
-            <hr>
-            <a href="#" class="profile-menu-item logout" id="logoutBtn">Logout</a>
+        profileDropdown.className = 'profile-dropdown auth-item';
+        profileDropdown.innerHTML = `
+            <div class="profile-icon">${user.name.charAt(0).toUpperCase()}</div>
+            <div class="profile-menu">
+                <div class="profile-menu-item" style="font-weight:600; color:var(--gold-bright); border-bottom: 1px solid var(--border); margin-bottom: 5px;">${user.name}</div>
+                <a href="${getCorrectPath('frontend/pages/dashboard.html')}" class="profile-menu-item">📊 Dashboard</a>
+                <a href="${getCorrectPath('frontend/pages/profile.html')}" class="profile-menu-item">👤 Profile</a>
+                <hr style="border: 0.5px solid var(--border); margin: 5px 0;">
+                <a href="#" class="profile-menu-item logout-btn" id="logoutBtn">Logout</a>
+            </div>
         `;
-        
-        profileDropdown.appendChild(profileIcon);
-        profileDropdown.appendChild(profileMenu);
-        nav.appendChild(profileDropdown);
-
-        document.getElementById('logoutBtn').addEventListener('click', (e) => {
-            e.preventDefault();
-            logout();
-        });
+        navLinks.appendChild(profileDropdown);
+
+        document.getElementById('logoutBtn').addEventListener('click', handleLogout);
     } else {
+        // User is logged out
         const loginLink = document.createElement('a');
-        loginLink.href = '../pages/login.html';
+        loginLink.href = getCorrectPath('frontend/pages/login.html');
         loginLink.textContent = 'Login';
-        loginLink.style.marginLeft = '24px';
-        nav.appendChild(loginLink);
+        loginLink.className = 'btn-small auth-item';
+        loginLink.style.marginLeft = '1rem';
+        navLinks.appendChild(loginLink);
     }
 }
 
-function toggleProfileMenu(e) {
-    e.stopPropagation();
-    const menu = document.getElementById('profileMenu');
-    if (menu) {
-        menu.classList.toggle('active');
-        if (menu.classList.contains('active')) {
-            document.addEventListener('click', function closeMenu(event) {
-                if (!event.target.closest('.profile-dropdown')) {
-                    menu.classList.remove('active');
-                    document.removeEventListener('click', closeMenu);
-                }
-            });
+async function handleLogin(e) {
+    e.preventDefault();
+    const email = document.getElementById('loginEmail').value;
+    const password = document.getElementById('loginPassword').value;
+    const errorEl = document.getElementById('loginError');
+
+    try {
+        const response = await fetch(`${API_URL}/auth/login`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            credentials: 'include', // Required to receive cookies
+            body: JSON.stringify({ email, password })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            localStorage.setItem('currentUser', JSON.stringify(data.user));
+            // Success! Redirect to dashboard. Use absolute-adjacent path for reliability.
+            window.location.href = 'dashboard.html';
+        } else {
+            errorEl.textContent = data.message || 'Login failed';
+            errorEl.style.display = 'block';
         }
+    } catch (error) {
+        errorEl.textContent = 'Server error. Please try again later.';
+        errorEl.style.display = 'block';
     }
 }
 
-// --- Utilities ---
-function logout() {
-    localStorage.removeItem('currentUser');
-    window.location.href = '../index.html';
+async function handleSignup(e) {
+    e.preventDefault();
+    const name = document.getElementById('name').value;
+    const email = document.getElementById('email').value;
+    const password = document.getElementById('password').value;
+    const confirmPassword = document.getElementById('confirmPassword').value;
+    const errorEl = document.getElementById('signupError');
+
+    if (password !== confirmPassword) {
+        errorEl.textContent = 'Passwords do not match';
+        errorEl.style.display = 'block';
+        return;
+    }
+
+    try {
+        const response = await fetch(`${API_URL}/auth/register`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, email, password })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            alert('Account created! Please login.');
+            window.location.href = 'login.html';
+        } else {
+            errorEl.textContent = data.message || 'Signup failed';
+            errorEl.style.display = 'block';
+        }
+    } catch (error) {
+        errorEl.textContent = 'Server error. Please try again later.';
+        errorEl.style.display = 'block';
+    }
 }
 
-function getCurrentUser() {
-    const user = localStorage.getItem('currentUser');
-    return user ? JSON.parse(user) : null;
+async function handleLogout(e) {
+    if (e) e.preventDefault();
+    try {
+        await fetch(`${API_URL}/auth/logout`, {
+            method: 'POST',
+            credentials: 'include'
+        });
+        localStorage.removeItem('currentUser');
+        // Redirect to home using correct pathing
+        window.location.href = getCorrectPath('index.html');
+    } catch (error) {
+        console.error('Logout failed:', error);
+        // Clean up even if request fails
+        localStorage.removeItem('currentUser');
+        window.location.href = getCorrectPath('index.html');
+    }
 }
 
-function isValidEmail(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }
+function getCorrectPath(path) {
+    const isPagesDir = window.location.pathname.includes('/pages/');
 
-function showError(elementId, message) {
-    const err = document.getElementById(elementId);
-    if (err) { err.textContent = message; err.style.display = 'block'; }
+    if (!isPagesDir) {
+        // We are at root or index.html level
+        return path;
+    } else {
+        // We are inside /frontend/pages/
+        if (path.startsWith('frontend/pages/')) {
+            // Target is in the same directory as current file
+            return path.replace('frontend/pages/', '');
+        }
+        // Target is at root, need to go up two levels
+        return '../../' + path;
+    }
 }
 
-function clearErrors() {
-    document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');
+function getCurrentUser() {
+    const user = localStorage.getItem('currentUser');
+    return user ? JSON.parse(user) : null;
 }
\ No newline at end of file
diff --git a/frontend/js/dashboard.js b/frontend/js/dashboard.js
new file mode 100644
index 00000000..e9c8c0b1
--- /dev/null
+++ b/frontend/js/dashboard.js
@@ -0,0 +1,131 @@
+const API_URL = 'http://localhost:5000/api';
+
+document.addEventListener('DOMContentLoaded', function () {
+    loadDashboard();
+});
+
+async function loadDashboard() {
+    const user = getCurrentUser();
+    if (!user) {
+        window.location.href = 'login.html'; // Assume we are in /pages/
+        return;
+    }
+
+    // Update Basic UI immediately from localStorage
+    document.getElementById('userName').textContent = user.name;
+    document.getElementById('welcomeName').textContent = user.name;
+    document.getElementById('userEmail').textContent = user.email;
+    document.getElementById('userAvatar').textContent = user.name.charAt(0).toUpperCase();
+
+    try {
+        // Fetch fresh profile data to get latest progress from DB
+        const response = await fetch(`${API_URL}/auth/me`, {
+            credentials: 'include'
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            renderProgress(data.user);
+            // Sync local storage with fresh data
+            localStorage.setItem('currentUser', JSON.stringify(data.user));
+        } else {
+            // Session might have expired on server
+            localStorage.removeItem('currentUser');
+            window.location.href = 'login.html';
+        }
+    } catch (error) {
+        console.error('Failed to load progress:', error);
+        // If offline or error, try to render with what we have
+        renderProgress(user);
+    }
+}
+
+function renderProgress(user) {
+    const completedGuides = user.completedGuides || [];
+    const completedCount = completedGuides.length;
+
+    // Total guides available in current system
+    const totalGuides = 5;
+    const percentage = Math.round((completedCount / totalGuides) * 100);
+
+    // Update Dashboard Stats Card
+    const compEl = document.getElementById('completedCount');
+    if (compEl) compEl.textContent = completedCount;
+
+    const pendEl = document.getElementById('pendingCount');
+    if (pendEl) pendEl.textContent = Math.max(0, totalGuides - completedCount);
+
+    const prgText = document.getElementById('progressText');
+    if (prgText) prgText.textContent = `${percentage}%`;
+
+    const fillEl = document.getElementById('overallProgressFill');
+    if (fillEl) fillEl.style.width = `${percentage}%`;
+
+    // Update Rank
+    let rank = 'Novice';
+    if (completedCount >= 2) rank = 'Learner';
+    if (completedCount >= 4) rank = 'Contributor';
+    if (completedCount >= 5) rank = 'Master';
+
+    const rankEl = document.getElementById('rankLabel');
+    if (rankEl) rankEl.textContent = rank;
+
+    // Render Guide List with dynamic content
+    const listContainer = document.getElementById('progressList');
+    if (!listContainer) return;
+
+    listContainer.innerHTML = '';
+
+    const allGuides = [
+        { id: 'git-01', name: 'Introduction to Git', icon: 'fab fa-git-alt' },
+        { id: 'oss-01', name: 'Open Source Ethics', icon: 'fas fa-shield-alt' },
+        { id: 'gh-01', name: 'First PR on GitHub', icon: 'fas fa-code-branch' },
+        { id: 'comm-01', name: 'Community Guidelines', icon: 'fas fa-users' },
+        { id: 'adv-01', name: 'Advanced Workflows', icon: 'fas fa-microchip' }
+    ];
+
+    allGuides.forEach(guide => {
+        const isCompleted = completedGuides.some(g => g.guideId === guide.id);
+        const item = document.createElement('div');
+        item.className = 'guide-item';
+        item.innerHTML = `
+            <div class="guide-info">
+                <div class="guide-icon"><i class="${guide.icon}"></i></div>
+                <div>
+                    <h4 style="margin:0; color: var(--text-high);">${guide.name}</h4>
+                    <span style="font-size:0.8rem; color:var(--text-mid)">Module ID: ${guide.id}</span>
+                </div>
+            </div>
+            <span class="status-badge ${isCompleted ? 'completed' : 'pending'}" style="white-space: nowrap;">
+                ${isCompleted ? '<i class="fas fa-check"></i> Finished' : 'Pending'}
+            </span>
+        `;
+        listContainer.appendChild(item);
+    });
+}
+
+function getCurrentUser() {
+    const user = localStorage.getItem('currentUser');
+    return user ? JSON.parse(user) : null;
+}
+
+// Attach logout to sidebar button
+const dashLogout = document.getElementById('dashboardLogout');
+if (dashLogout) {
+    dashLogout.addEventListener('click', async (e) => {
+        e.preventDefault();
+        try {
+            await fetch(`${API_URL}/auth/logout`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            localStorage.removeItem('currentUser');
+            // Go to home page (../../index.html)
+            window.location.href = '../../index.html';
+        } catch (error) {
+            console.error('Logout error:', error);
+            localStorage.removeItem('currentUser');
+            window.location.href = '../../index.html';
+        }
+    });
+}
diff --git a/frontend/js/guides.js b/frontend/js/guides.js
index f149e8c1..a4b52e2d 100644
--- a/frontend/js/guides.js
+++ b/frontend/js/guides.js
@@ -8,7 +8,7 @@ if (toggleBtn && sidebar && overlay) {
         sidebar.classList.add('active');
         overlay.classList.add('active');
     });
-    
+
     overlay.addEventListener('click', () => {
         sidebar.classList.remove('active');
         overlay.classList.remove('active');
@@ -20,11 +20,11 @@ document.querySelectorAll('.copy-btn').forEach(button => {
     button.addEventListener('click', () => {
         const codeBlock = button.closest('.code-block').querySelector('pre');
         const code = codeBlock.innerText;
-        
+
         navigator.clipboard.writeText(code).then(() => {
             button.textContent = 'Copied!';
             button.classList.add('copied');
-            
+
             setTimeout(() => {
                 button.textContent = 'Copy';
                 button.classList.remove('copied');
@@ -33,46 +33,32 @@ document.querySelectorAll('.copy-btn').forEach(button => {
     });
 });
 
-// Progress checkboxes functionality
-document.querySelectorAll('.progress-checkbox').forEach(checkbox => {
-    checkbox.addEventListener('change', function() {
-        if(this.checked) {
-            this.nextElementSibling.style.textDecoration = 'line-through';
-            this.nextElementSibling.style.color = '#666';
-        } else {
-            this.nextElementSibling.style.textDecoration = 'none';
-            this.nextElementSibling.style.color = 'inherit';
-        }
-    });
-});
-
 // Smooth scrolling for sidebar links
 document.querySelectorAll('.sidebar-menu a').forEach(anchor => {
-    anchor.addEventListener('click', function(e) {
-        e.preventDefault();
-        
-        // Remove active class from all links
-        document.querySelectorAll('.sidebar-menu a').forEach(link => {
-            link.classList.remove('active');
-        });
-        
-        // Add active class to clicked link
-        this.classList.add('active');
-        
-        const targetId = this.getAttribute('href');
-        const targetElement = document.querySelector(targetId);
-        
-        if(targetElement) {
-            window.scrollTo({
-                top: targetElement.offsetTop - 100,
-                behavior: 'smooth'
+    anchor.addEventListener('click', function (e) {
+        if (this.getAttribute('href').startsWith('#')) {
+            e.preventDefault();
+
+            document.querySelectorAll('.sidebar-menu a').forEach(link => {
+                link.classList.remove('active');
             });
-        }
-        
-        // Close sidebar on mobile after clicking
-        if(window.innerWidth <= 992) {
-            if (sidebar) sidebar.classList.remove('active');
-            if (overlay) overlay.classList.remove('active');
+
+            this.classList.add('active');
+
+            const targetId = this.getAttribute('href');
+            const targetElement = document.querySelector(targetId);
+
+            if (targetElement) {
+                window.scrollTo({
+                    top: targetElement.offsetTop - 100,
+                    behavior: 'smooth'
+                });
+            }
+
+            if (window.innerWidth <= 992) {
+                if (sidebar) sidebar.classList.remove('active');
+                if (overlay) overlay.classList.remove('active');
+            }
         }
     });
 });
@@ -81,18 +67,105 @@ document.querySelectorAll('.sidebar-menu a').forEach(anchor => {
 window.addEventListener('scroll', () => {
     const sections = document.querySelectorAll('section');
     let currentSection = '';
-    
+
     sections.forEach(section => {
         const sectionTop = section.offsetTop - 150;
-        if(pageYOffset >= sectionTop) {
+        if (window.pageYOffset >= sectionTop) {
             currentSection = '#' + section.getAttribute('id');
         }
     });
-    
+
     document.querySelectorAll('.sidebar-menu a').forEach(link => {
-        link.classList.remove('active');
-        if(link.getAttribute('href') === currentSection) {
-            link.classList.add('active');
+        if (link.getAttribute('href').startsWith('#')) {
+            link.classList.remove('active');
+            if (link.getAttribute('href') === currentSection) {
+                link.classList.add('active');
+            }
+        }
+    });
+});
+
+// --- Progress Tracking (Backend Integration) ---
+const TRACK_API_URL = 'http://localhost:5000/api/auth/track-guide';
+const STATUS_API_URL = 'http://localhost:5000/api/auth/me';
+
+document.addEventListener('DOMContentLoaded', () => {
+    checkCompletedGuides();
+
+    document.querySelectorAll('.track-guide-btn').forEach(btn => {
+        btn.addEventListener('click', async () => {
+            const guideId = btn.getAttribute('data-guide-id');
+            const user = JSON.parse(localStorage.getItem('currentUser'));
+
+            if (!user) {
+                alert('Please sign in to save your learning progress!');
+                window.location.href = 'login.html';
+                return;
+            }
+
+            // UI Feedback
+            const originalText = btn.textContent;
+            btn.textContent = 'Saving...';
+            btn.disabled = true;
+
+            try {
+                const response = await fetch(TRACK_API_URL, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    credentials: 'include',
+                    body: JSON.stringify({ guideId })
+                });
+
+                if (response.ok) {
+                    const data = await response.json();
+                    btn.textContent = '✓ Completed';
+                    btn.classList.add('completed-style');
+                    // Update local storage with new progress
+                    localStorage.setItem('currentUser', JSON.stringify(data.user));
+                } else {
+                    btn.textContent = originalText;
+                    btn.disabled = false;
+                    const data = await response.json();
+                    alert(data.message || 'Error tracking progress');
+                }
+            } catch (error) {
+                console.error('Failed to track progress:', error);
+                btn.textContent = originalText;
+                btn.disabled = false;
+            }
+        });
+    });
+});
+
+async function checkCompletedGuides() {
+    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
+
+    // For local first-load consistency, fetch fresh data if logged in
+    if (currentUser) {
+        try {
+            const res = await fetch(STATUS_API_URL, { credentials: 'include' });
+            if (res.ok) {
+                const data = await res.json();
+                localStorage.setItem('currentUser', JSON.stringify(data.user));
+                markUI(data.user.completedGuides);
+            } else {
+                markUI(currentUser.completedGuides);
+            }
+        } catch (e) {
+            markUI(currentUser.completedGuides);
+        }
+    }
+}
+
+function markUI(completedGuides) {
+    if (!completedGuides) return;
+
+    document.querySelectorAll('.track-guide-btn').forEach(btn => {
+        const guideId = btn.getAttribute('data-guide-id');
+        if (completedGuides.some(g => g.guideId === guideId)) {
+            btn.textContent = '✓ Completed';
+            btn.disabled = true;
+            btn.classList.add('completed-style');
         }
     });
-});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/frontend/js/profile2.js b/frontend/js/profile2.js
index cc657a3a..35775f9e 100644
--- a/frontend/js/profile2.js
+++ b/frontend/js/profile2.js
@@ -1,6 +1,7 @@
+const API_URL = 'http://localhost:5000/api';
+
 document.addEventListener('DOMContentLoaded', () => {
     const currentUser = JSON.parse(localStorage.getItem('currentUser'));
-    const users = JSON.parse(localStorage.getItem('users')) || [];
 
     if (!currentUser) {
         window.location.href = 'login.html';
@@ -16,34 +17,49 @@ document.addEventListener('DOMContentLoaded', () => {
     nameInput.value = currentUser.name;
     emailInput.value = currentUser.email;
 
-    document.getElementById('profileForm').addEventListener('submit', (e) => {
+    document.getElementById('profileForm').addEventListener('submit', async (e) => {
         e.preventDefault();
 
-        // Find user in the master users array
-        const userIndex = users.findIndex(u => u.email === currentUser.email);
+        const name = nameInput.value.trim();
+        const password = passwordInput.value.trim();
 
-        if (userIndex !== -1) {
-            // 1. Update master users array
-            users[userIndex].name = nameInput.value.trim();
-            if (passwordInput.value.trim() !== "") {
-                users[userIndex].password = passwordInput.value;
-            }
+        msg.textContent = "Updating...";
+        msg.style.color = "var(--text-mid)";
+
+        try {
+            const response = await fetch(`${API_URL}/auth/update-profile`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                credentials: 'include',
+                body: JSON.stringify({
+                    name,
+                    password: password || undefined
+                })
+            });
 
-            // 2. Update current session object
-            currentUser.name = nameInput.value.trim();
+            const data = await response.json();
 
-            // 3. Save back to localStorage
-            localStorage.setItem('users', JSON.stringify(users));
-            localStorage.setItem('currentUser', JSON.stringify(currentUser));
+            if (response.ok) {
+                // Update current session object in localStorage
+                const updatedUser = { ...currentUser, name: data.user.name };
+                localStorage.setItem('currentUser', JSON.stringify(updatedUser));
 
-            msg.textContent = "Profile updated successfully!";
-            msg.style.color = "green";
+                msg.textContent = "Profile updated successfully! ✨";
+                msg.style.color = "#27ae60";
 
-            // Update the icon in the nav immediately
-            if (typeof updateProfileIcon === "function") updateProfileIcon();
-            
-            // Clear password field
-            passwordInput.value = "";
+                // Update the UI via auth.js if available
+                if (typeof checkAuthStatus === "function") await checkAuthStatus();
+
+                // Clear password field
+                passwordInput.value = "";
+            } else {
+                msg.textContent = data.message || "Failed to update profile";
+                msg.style.color = "#c53030";
+            }
+        } catch (error) {
+            console.error('Update profile error:', error);
+            msg.textContent = "Server error. Please try again later.";
+            msg.style.color = "#c53030";
         }
     });
 });
\ No newline at end of file
diff --git a/frontend/pages/dashboard.html b/frontend/pages/dashboard.html
new file mode 100644
index 00000000..7bc57abb
--- /dev/null
+++ b/frontend/pages/dashboard.html
@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Learner Dashboard | OpenSource Compass</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../css/style.css">
+    <style>
+        .dashboard-layout {
+            display: grid;
+            grid-template-columns: 280px 1fr;
+            gap: 2rem;
+            max-width: 1400px;
+            margin: 2rem auto;
+            padding: 0 2rem;
+        }
+
+        @media (max-width: 968px) {
+            .dashboard-layout {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .sidebar {
+            background: var(--surface);
+            padding: 2rem;
+            border-radius: 20px;
+            border: 1px solid var(--border);
+            height: fit-content;
+            position: sticky;
+            top: 110px;
+        }
+
+        .user-brief {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .user-avatar {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
+            border-radius: 50%;
+            margin: 0 auto 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            color: white;
+            box-shadow: 0 10px 20px var(--gold-glow);
+        }
+
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+
+        .sidebar-link {
+            padding: 0.8rem 1.2rem;
+            border-radius: 10px;
+            color: var(--text-high);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .sidebar-link:hover, .sidebar-link.active {
+            background: rgba(212, 175, 55, 0.1);
+            color: var(--gold-deep);
+        }
+
+        .main-content {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        .welcome-card {
+            background: linear-gradient(135deg, var(--deep-navy), #2c3e50);
+            padding: 3rem;
+            border-radius: 24px;
+            color: white;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .welcome-card h2 {
+            font-family: 'Playfair Display', serif;
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            color: white;
+        }
+
+        .welcome-card p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            text-align: left;
+            margin: 0;
+            color: white;
+        }
+
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 1.5rem;
+        }
+
+        .mini-stat-card {
+            background: var(--surface);
+            padding: 1.5rem;
+            border-radius: 18px;
+            border: 1px solid var(--border);
+            text-align: center;
+        }
+
+        .mini-stat-card i {
+            font-size: 1.5rem;
+            color: var(--gold-bright);
+            margin-bottom: 0.5rem;
+        }
+
+        .mini-stat-card h4 {
+            margin: 0.5rem 0;
+            font-size: 1.8rem;
+        }
+
+        .mini-stat-card p {
+            margin: 0;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            color: var(--text-mid);
+        }
+
+        .progress-section {
+            background: var(--surface);
+            padding: 2rem;
+            border-radius: 24px;
+            border: 1px solid var(--border);
+        }
+
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+
+        .guide-list {
+            display: grid;
+            gap: 1rem;
+        }
+
+        .guide-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: var(--bg-main);
+            padding: 1.2rem 1.5rem;
+            border-radius: 15px;
+            border: 1px solid transparent;
+            transition: all 0.3s ease;
+        }
+
+        .guide-item:hover {
+            border-color: var(--gold-bright);
+            transform: translateX(5px);
+        }
+
+        .guide-info {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+
+        .guide-icon {
+            width: 40px;
+            height: 40px;
+            background: white;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--gold-deep);
+            font-size: 1.2rem;
+        }
+
+        .status-badge {
+            padding: 0.4rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+        }
+
+        .status-badge.completed {
+            background: rgba(39, 174, 96, 0.1);
+            color: #27ae60;
+        }
+
+        .status-badge.pending {
+            background: rgba(243, 156, 18, 0.1);
+            color: #f39c12;
+        }
+
+        .progress-bar-container {
+            width: 100%;
+            height: 10px;
+            background: rgba(0,0,0,0.05);
+            border-radius: 10px;
+            margin-top: 1rem;
+            overflow: hidden;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--gold-bright), var(--gold-deep));
+            width: 0%;
+            transition: width 1s ease-out;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="navbar-container">
+            <a href="../index.html" style="text-decoration: none;"><h1><i class="fas fa-compass"></i> OpenSource Compass</h1></a>
+            <div class="nav-links" id="navLinks">
+                <a href="../index.html">Home</a>
+                <a href="guides.html">Guides</a>
+                <a href="Resources.html">Roadmaps</a>
+                <!-- Profile icon will be injected by auth.js -->
+            </div>
+        </div>
+    </header>
+
+    <main>
+        <div class="dashboard-layout">
+            <aside class="sidebar">
+                <div class="user-brief">
+                    <div class="user-avatar" id="userAvatar">U</div>
+                    <h3 id="userName">User Name</h3>
+                    <p id="userEmail" style="font-size: 0.8rem; color: var(--text-mid);">user@example.com</p>
+                </div>
+                <nav class="sidebar-nav">
+                    <a href="#" class="sidebar-link active"><i class="fas fa-th-large"></i> Overview</a>
+                    <a href="profile.html" class="sidebar-link"><i class="fas fa-user-cog"></i> Profile Settings</a>
+                    <a href="guides.html" class="sidebar-link"><i class="fas fa-book-open"></i> My Guides</a>
+                    <a href="#" class="sidebar-link" id="dashboardLogout"><i class="fas fa-sign-out-alt"></i> Logout</a>
+                </nav>
+            </aside>
+
+            <section class="main-content">
+                <div class="welcome-card">
+                    <h2>Welcome back, <span id="welcomeName">Learner</span>! 👋</h2>
+                    <p>You're doing great on your open source journey. Keep it up!</p>
+                    <div class="progress-bar-container">
+                        <div class="progress-fill" id="overallProgressFill"></div>
+                    </div>
+                    <p style="font-size: 0.9rem; margin-top: 0.5rem; opacity: 0.8;"><span id="progressText">0%</span> of the roadmap completed</p>
+                </div>
+
+                <div class="stats-grid">
+                    <div class="mini-stat-card">
+                        <i class="fas fa-check-circle"></i>
+                        <h4 id="completedCount">0</h4>
+                        <p>Guides Finished</p>
+                    </div>
+                    <div class="mini-stat-card">
+                        <i class="fas fa-clock"></i>
+                        <h4 id="pendingCount">5</h4>
+                        <p>Guides in Progress</p>
+                    </div>
+                    <div class="mini-stat-card">
+                        <i class="fas fa-trophy"></i>
+                        <h4 id="rankLabel">Novice</h4>
+                        <p>Contribution Rank</p>
+                    </div>
+                </div>
+
+                <div class="progress-section">
+                    <div class="section-header">
+                        <h3>Your Progress</h3>
+                        <a href="guides.html" class="btn-small" style="font-size: 0.9rem; color: var(--gold-deep);">Explore More</a>
+                    </div>
+                    <div class="guide-list" id="progressList">
+                        <!-- Items will be injected by dashboard.js -->
+                        <div class="loading-spinner" style="text-align: center; padding: 2rem;">
+                            <i class="fas fa-spinner fa-spin"></i> Loading your progress...
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </main>
+
+    <script src="../js/components.js"></script>
+    <script src="../js/auth.js"></script>
+    <script src="../js/dashboard.js"></script>
+</body>
+</html>
diff --git a/frontend/pages/guides.html b/frontend/pages/guides.html
index 7b8fb2a9..56b4c7bb 100644
--- a/frontend/pages/guides.html
+++ b/frontend/pages/guides.html
@@ -22,398 +22,438 @@
   <link rel="stylesheet" href="/frontend/css/dark-mode.css">
   <link rel='manifest' href='../../manifest.json' />
 
-<style>
-/* =========================================
+  <style>
+    /* =========================================
    GUIDES PAGE DARK MODE FIXES (Corrected)
 ========================================= */
-/* --- Global Smooth Transition --- */
-body.dark-mode {
-    background-color: #000000 !important;
-    color: #ffffff !important;
-}
-body.dark-mode * {
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
-}
-
-body.dark-mode {
-    background-color: #121212 !important;
-}
-body.dark-mode section,
-body.dark-mode main {
-    background: transparent !important;
-    border: none !important;
-}
-
-/* 1. Force Main Backgrounds */
-body.dark-mode .guide,
-body.dark-mode .pull-request-guide,
-body.dark-mode .github-guide-timeline,
-body.dark-mode .contributing-best-practices,
-body.dark-mode .common-mistakes {
-    background-color: #121212 !important;
-    color: #e0e0e0 !important;
-}
-body.dark-mode .guide h3,
-body.dark-mode .pull-request-guide h3,
-body.dark-mode .github-guide-timeline h3,
-body.dark-mode .contributing-best-practices h3,
-body.dark-mode .common-mistakes h2 {
-    color: #d4af37 !important; /* Consistent Golden Headings */
-}
-/* 2. Enhanced Card Backgrounds */
-body.dark-mode .guide-list li,
-body.dark-mode .pr-steps li,
-body.dark-mode .timeline-list li,
-body.dark-mode .practice-item,
-body.dark-mode .mistakes-list li {
-    border: 1px solid #2a2a2a !important;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
-    position: relative;
-    overflow: hidden;
-}
-
-/* 3. Golden Headlines */
-body.dark-mode .guide-list h4,
-body.dark-mode .pr-steps h4,
-body.dark-mode .timeline-list h4,
-body.dark-mode .practice-item h4 {
-    color: #b8860b !important;
-}
-
-/* 4. Icons & Steps */
-body.dark-mode .step,
-body.dark-mode .icon,
-body.dark-mode .mistake-icon {
-    color: #d4af37 !important;
-    border-color: #d4af37 !important;
-}
-
-/* 5. Descriptions */
-body.dark-mode .guide-list p,
-body.dark-mode .pr-steps p,
-body.dark-mode .timeline-list p,
-body.dark-mode .practice-item p {
-    color: #b0b0b0 !important;
-}
-
-/* 6. ADVANCED HOVER EFFECTS */
-body.dark-mode .guide-list li:hover,
-body.dark-mode .pr-steps li:hover,
-body.dark-mode .timeline-list li:hover,
-body.dark-mode .practice-item:hover,
-body.dark-mode .mistakes-list li:hover {
-    /* Lift effect with elastic curve */
-    transform: translateY(-8px) scale(1.02);
-    
-    /* Gold Border Glow */
-    border-color: #d4af37 !important;
-    
-    /* Deep Shadow & Outer Glow */
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.2) !important;
-    
-    /* Slight background highlight */
-    
-}
-
-/* Subtle Shimmer Overlay on Hover */
-body.dark-mode .guide-list li::after {
-    content: '';
-    position: absolute;
-    top: 0; left: -100%;
-    width: 100%; height: 100%;
-    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05), transparent);
-    transition: 0.5s;
-}
-/* Specific fix for Mistakes List text visibility in Dark Mode */
-body.dark-mode .mistakes-list p {
-    color: #ffffff !important; /* Forces text to white */
-    opacity: 0.9;              /* Optional: slightly softer than pure white for better UX */
-}
-
-/* Optional: If you want the numbers to remain dark for contrast against the gold circle */
-body.dark-mode .mistake-icon {
-    color: #121212 !important; 
-    background-color: #d4af37 !important;
-}
-body.dark-mode .guide-list li:hover::after {
-    left: 100%;
-}
-
-/* =========================================
+    /* --- Global Smooth Transition --- */
+    body.dark-mode {
+      background-color: #000000 !important;
+      color: #ffffff !important;
+    }
+
+    body.dark-mode * {
+      transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
+    }
+
+    body.dark-mode {
+      background-color: #121212 !important;
+    }
+
+    body.dark-mode section,
+    body.dark-mode main {
+      background: transparent !important;
+      border: none !important;
+    }
+
+    /* 1. Force Main Backgrounds */
+    body.dark-mode .guide,
+    body.dark-mode .pull-request-guide,
+    body.dark-mode .github-guide-timeline,
+    body.dark-mode .contributing-best-practices,
+    body.dark-mode .common-mistakes {
+      background-color: #121212 !important;
+      color: #e0e0e0 !important;
+    }
+
+    body.dark-mode .guide h3,
+    body.dark-mode .pull-request-guide h3,
+    body.dark-mode .github-guide-timeline h3,
+    body.dark-mode .contributing-best-practices h3,
+    body.dark-mode .common-mistakes h2 {
+      color: #d4af37 !important;
+      /* Consistent Golden Headings */
+    }
+
+    /* 2. Enhanced Card Backgrounds */
+    body.dark-mode .guide-list li,
+    body.dark-mode .pr-steps li,
+    body.dark-mode .timeline-list li,
+    body.dark-mode .practice-item,
+    body.dark-mode .mistakes-list li {
+      border: 1px solid #2a2a2a !important;
+      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+      position: relative;
+      overflow: hidden;
+    }
+
+    /* 3. Golden Headlines */
+    body.dark-mode .guide-list h4,
+    body.dark-mode .pr-steps h4,
+    body.dark-mode .timeline-list h4,
+    body.dark-mode .practice-item h4 {
+      color: #b8860b !important;
+    }
+
+    /* 4. Icons & Steps */
+    body.dark-mode .step,
+    body.dark-mode .icon,
+    body.dark-mode .mistake-icon {
+      color: #d4af37 !important;
+      border-color: #d4af37 !important;
+    }
+
+    /* 5. Descriptions */
+    body.dark-mode .guide-list p,
+    body.dark-mode .pr-steps p,
+    body.dark-mode .timeline-list p,
+    body.dark-mode .practice-item p {
+      color: #b0b0b0 !important;
+    }
+
+    /* 6. ADVANCED HOVER EFFECTS */
+    body.dark-mode .guide-list li:hover,
+    body.dark-mode .pr-steps li:hover,
+    body.dark-mode .timeline-list li:hover,
+    body.dark-mode .practice-item:hover,
+    body.dark-mode .mistakes-list li:hover {
+      /* Lift effect with elastic curve */
+      transform: translateY(-8px) scale(1.02);
+
+      /* Gold Border Glow */
+      border-color: #d4af37 !important;
+
+      /* Deep Shadow & Outer Glow */
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(212, 175, 55, 0.2) !important;
+
+      /* Slight background highlight */
+
+    }
+
+    /* Subtle Shimmer Overlay on Hover */
+    body.dark-mode .guide-list li::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: -100%;
+      width: 100%;
+      height: 100%;
+      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.05), transparent);
+      transition: 0.5s;
+    }
+
+    /* Specific fix for Mistakes List text visibility in Dark Mode */
+    body.dark-mode .mistakes-list p {
+      color: #ffffff !important;
+      /* Forces text to white */
+      opacity: 0.9;
+      /* Optional: slightly softer than pure white for better UX */
+    }
+
+    /* Optional: If you want the numbers to remain dark for contrast against the gold circle */
+    body.dark-mode .mistake-icon {
+      color: #121212 !important;
+      background-color: #d4af37 !important;
+    }
+
+    body.dark-mode .guide-list li:hover::after {
+      left: 100%;
+    }
+
+    /* =========================================
    EQUAL SIZE PRACTICE ITEMS - 4 ROWS x 2 COLUMNS
 ========================================= */
-.practices-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr); /* Fixed 2 columns */
-    grid-template-rows: repeat(4, 1fr); /* Fixed 4 rows */
-    gap: 1.5rem;
-    align-items: stretch; /* Force equal heights */
-}
-
-/* Responsive: Stack to 1 column on mobile */
-@media (max-width: 768px) {
     .practices-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      /* Fixed 2 columns */
+      grid-template-rows: repeat(4, 1fr);
+      /* Fixed 4 rows */
+      gap: 1.5rem;
+      align-items: stretch;
+      /* Force equal heights */
+    }
+
+    /* Responsive: Stack to 1 column on mobile */
+    @media (max-width: 768px) {
+      .practices-grid {
         grid-template-columns: 1fr;
         grid-template-rows: auto;
+      }
+    }
+
+    .practice-item {
+      display: flex;
+      flex-direction: column;
+      min-height: 300px;
+      /* Fixed minimum height for all boxes */
+      height: 100%;
+      /* Fill grid cell */
+      padding: 1.5rem;
+      box-sizing: border-box;
+    }
+
+    .practice-item .icon {
+      flex-shrink: 0;
+      /* Icon doesn't grow/shrink */
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+      height: 2.5rem;
+      /* Fixed height for icon */
+      line-height: 1;
+    }
+
+    .practice-item h4 {
+      flex-shrink: 0;
+      /* Heading doesn't shrink */
+      min-height: 4.5em;
+      /* Fixed space for headings */
+      margin-bottom: 0.75rem;
+      line-height: 1.4;
     }
-}
-
-.practice-item {
-    display: flex;
-    flex-direction: column;
-    min-height: 300px; /* Fixed minimum height for all boxes */
-    height: 100%; /* Fill grid cell */
-    padding: 1.5rem;
-    box-sizing: border-box;
-}
-
-.practice-item .icon {
-    flex-shrink: 0; /* Icon doesn't grow/shrink */
-    font-size: 2.5rem;
-    margin-bottom: 1rem;
-    height: 2.5rem; /* Fixed height for icon */
-    line-height: 1;
-}
-
-.practice-item h4 {
-    flex-shrink: 0; /* Heading doesn't shrink */
-    min-height: 4.5em; /* Fixed space for headings */
-    margin-bottom: 0.75rem;
-    line-height: 1.4;
-}
-
-.practice-item p {
-    flex-grow: 1; /* Description fills remaining space */
-    margin: 0;
-    line-height: 1.6;
-    display: flex;
-    align-items: flex-start;
-}
-</style>
+
+    .practice-item p {
+      flex-grow: 1;
+      /* Description fills remaining space */
+      margin: 0;
+      line-height: 1.6;
+      display: flex;
+      align-items: flex-start;
+    }
+  </style>
 </head>
+
 <body>
   <div id="cursor-highlight" aria-hidden="true"></div>
 
   <div id="navbar"></div>
 
-<main>
- <section class="guide">
-  <h3>Beginner Open Source Guide</h3>
-  <p>Open source is a way to collaborate on projects where the code is publicly available. Contributing helps you learn, gain experience, and give back to the community.</p>
-
-  <ul class="guide-list">
-    <li>
-      <span class="step">1</span>
-      <h4>Learn Git & GitHub basics</h4>
-      <p>Start by understanding Git version control and creating repositories on GitHub. This is the foundation for contributing to open source projects.</p>
-    </li>
-      <li>
-      <span class="step">2</span>
-      <h4>Explore small projects</h4>
-      <p>Contribute to beginner-friendly projects to build confidence and experience. Look for tags like "good first issue."</p>
-    </li>
-    <li>
-      <span class="step">3</span>
-      <h4>Understand issues & labels</h4>
-      <p>Learn how to read issues, use labels, and understand project workflows to know where you can contribute effectively.</p>
-    </li>
-    <li>
-      <span class="step">4</span>
-      <h4>Make your first pull request</h4>
-      <p>Submit your first PR to fix a bug or add a small feature. This helps you practice collaboration and the contribution process.</p>
-    </li>
-  </ul>
-</section>
-<section class="pull-request-guide">
-  <h3>Step-by-Step Guide to Your First Pull Request</h3>
-  <ul class="pr-steps">
-    <li>
-      <span class="step">1</span>
-      <i class="fa-solid fa-code-branch icon"></i>
-      <h4>Fork the repository</h4>
-      <p>Create your own copy of the repository to work on without affecting the original project.</p>
-    </li>
-    <li>
-      <span class="step">2</span>
-      <i class="fa-solid fa-download icon"></i>
-      <h4>Clone it locally on your computer</h4>
-      <p>Download the repository to your computer using Git to start making changes.</p>
-    </li>
-    <li>
-      <span class="step">3</span>
-      <i class="fa-solid fa-plus icon"></i>
-      <h4>Create a new branch for your changes</h4>
-      <p>Use a descriptive branch name to organize your work and keep main safe.</p>
-    </li>
-    <li>
-      <span class="step">4</span>
-      <i class="fa-solid fa-pencil icon"></i>
-      <h4>Make your changes and commit them</h4>
-      <p>Edit the code, add features or fixes, and commit your changes with clear messages.</p>
-    </li>
-    <li>
-      <span class="step">5</span>
-      <i class="fa-solid fa-upload icon"></i>
-      <h4>Push the branch to GitHub and open a pull request</h4>
-      <p>Send your branch to GitHub and create a pull request to propose your changes.</p>
-    </li>
-    <li>
-      <span class="step">6</span>
-      <i class="fa-solid fa-check icon"></i>
-      <h4>Review feedback and merge once approved</h4>
-      <p>Respond to comments, make any requested edits, and merge once maintainers approve.</p>
-    </li>
-  </ul>
-</section>
-<section class="github-guide-timeline">
-  <h3>Understanding GitHub Issues, Labels, and Workflows</h3>
-  <p>Mastering GitHub issues and workflows helps you contribute effectively and communicate clearly with project maintainers.</p>
-
-  <ol class="timeline-list">
-    <li>
-      <div class="icon">🔍</div>
-      <div class="content">
-        <h4>How to find issues to work on</h4>
-        <p>Learn to identify beginner-friendly issues or areas of the project that match your skills and interest.</p>
-      </div>
-    </li>
-    <li>
-      <div class="icon">🏷️</div>
-      <div class="content">
-        <h4>Understanding issue labels</h4>
-        <p>Recognize labels like "good first issue" or "help wanted" to know what the project expects and where you can contribute.</p>
-      </div>
-    </li>
-    <li>
-      <div class="icon">💬</div>
-      <div class="content">
-        <h4>How to comment effectively and ask for clarification</h4>
-        <p>Communicate clearly in issue threads to ask questions, offer help, or provide updates on your work.</p>
-      </div>
-    </li>
-    <li>
-      <div class="icon">✅</div>
-      <div class="content">
-        <h4>How maintainers review contributions and merge PRs</h4>
-        <p>Understand the review process, how maintainers provide feedback, and the workflow for merging your pull requests.</p>
+  <main>
+    <section class="guide">
+      <h3>Beginner Open Source Guide</h3>
+      <p>Open source is a way to collaborate on projects where the code is publicly available. Contributing helps you
+        learn, gain experience, and give back to the community.</p>
+      <button class="track-guide-btn btn-small" data-guide-id="git-01" style="margin-top: 10px;">Mark as
+        Completed</button>
+
+      <ul class="guide-list">
+        <li>
+          <span class="step">1</span>
+          <h4>Learn Git & GitHub basics</h4>
+          <p>Start by understanding Git version control and creating repositories on GitHub. This is the foundation for
+            contributing to open source projects.</p>
+        </li>
+        <li>
+          <span class="step">2</span>
+          <h4>Explore small projects</h4>
+          <p>Contribute to beginner-friendly projects to build confidence and experience. Look for tags like "good first
+            issue."</p>
+        </li>
+        <li>
+          <span class="step">3</span>
+          <h4>Understand issues & labels</h4>
+          <p>Learn how to read issues, use labels, and understand project workflows to know where you can contribute
+            effectively.</p>
+        </li>
+        <li>
+          <span class="step">4</span>
+          <h4>Make your first pull request</h4>
+          <p>Submit your first PR to fix a bug or add a small feature. This helps you practice collaboration and the
+            contribution process.</p>
+        </li>
+      </ul>
+    </section>
+    <section class="pull-request-guide">
+      <h3>Step-by-Step Guide to Your First Pull Request</h3>
+      <button class="track-guide-btn btn-small" data-guide-id="gh-01" style="margin-bottom: 20px;">Mark as
+        Completed</button>
+      <ul class="pr-steps">
+        <li>
+          <span class="step">1</span>
+          <i class="fa-solid fa-code-branch icon"></i>
+          <h4>Fork the repository</h4>
+          <p>Create your own copy of the repository to work on without affecting the original project.</p>
+        </li>
+        <li>
+          <span class="step">2</span>
+          <i class="fa-solid fa-download icon"></i>
+          <h4>Clone it locally on your computer</h4>
+          <p>Download the repository to your computer using Git to start making changes.</p>
+        </li>
+        <li>
+          <span class="step">3</span>
+          <i class="fa-solid fa-plus icon"></i>
+          <h4>Create a new branch for your changes</h4>
+          <p>Use a descriptive branch name to organize your work and keep main safe.</p>
+        </li>
+        <li>
+          <span class="step">4</span>
+          <i class="fa-solid fa-pencil icon"></i>
+          <h4>Make your changes and commit them</h4>
+          <p>Edit the code, add features or fixes, and commit your changes with clear messages.</p>
+        </li>
+        <li>
+          <span class="step">5</span>
+          <i class="fa-solid fa-upload icon"></i>
+          <h4>Push the branch to GitHub and open a pull request</h4>
+          <p>Send your branch to GitHub and create a pull request to propose your changes.</p>
+        </li>
+        <li>
+          <span class="step">6</span>
+          <i class="fa-solid fa-check icon"></i>
+          <h4>Review feedback and merge once approved</h4>
+          <p>Respond to comments, make any requested edits, and merge once maintainers approve.</p>
+        </li>
+      </ul>
+    </section>
+    <section class="github-guide-timeline">
+      <h3>Understanding GitHub Issues, Labels, and Workflows</h3>
+      <button class="track-guide-btn btn-small" data-guide-id="comm-01" style="margin-bottom: 20px;">Mark as
+        Completed</button>
+      <p>Mastering GitHub issues and workflows helps you contribute effectively and communicate clearly with project
+        maintainers.</p>
+
+      <ol class="timeline-list">
+        <li>
+          <div class="icon">🔍</div>
+          <div class="content">
+            <h4>How to find issues to work on</h4>
+            <p>Learn to identify beginner-friendly issues or areas of the project that match your skills and interest.
+            </p>
+          </div>
+        </li>
+        <li>
+          <div class="icon">🏷️</div>
+          <div class="content">
+            <h4>Understanding issue labels</h4>
+            <p>Recognize labels like "good first issue" or "help wanted" to know what the project expects and where you
+              can contribute.</p>
+          </div>
+        </li>
+        <li>
+          <div class="icon">💬</div>
+          <div class="content">
+            <h4>How to comment effectively and ask for clarification</h4>
+            <p>Communicate clearly in issue threads to ask questions, offer help, or provide updates on your work.</p>
+          </div>
+        </li>
+        <li>
+          <div class="icon">✅</div>
+          <div class="content">
+            <h4>How maintainers review contributions and merge PRs</h4>
+            <p>Understand the review process, how maintainers provide feedback, and the workflow for merging your pull
+              requests.</p>
+          </div>
+        </li>
+      </ol>
+    </section>
+    <section class="contributing-best-practices">
+      <h3>Best Practices for Contributing</h3>
+      <button class="track-guide-btn btn-small" data-guide-id="oss-01" style="margin-bottom: 20px;">Mark as
+        Completed</button>
+      <p>Follow these best practices to make your contributions effective, professional, and easy for maintainers to
+        review.</p>
+
+      <div class="practices-grid">
+        <div class="practice-item">
+          <div class="icon">📝</div>
+          <h4>Write clear, concise commits</h4>
+          <p>Meaningful commit messages make it easier for others to understand your changes.</p>
+        </div>
+        <div class="practice-item">
+          <div class="icon">📚</div>
+          <h4>Follow contribution guidelines</h4>
+          <p>Adhering to project guidelines ensures your PR meets expectations and saves time for maintainers.</p>
+        </div>
+        <div class="practice-item">
+          <div class="icon">🎨</div>
+          <h4>Maintain code style and formatting</h4>
+          <p>Keep your code consistent with the project's style and formatting conventions.</p>
+        </div>
+        <div class="practice-item">
+          <div class="icon">🤝</div>
+          <h4>Communicate professionally</h4>
+          <p>Be polite, constructive, and respectful when discussing changes or providing feedback.</p>
+        </div>
+        <div class="practice-item">
+          <div class="icon">🔍</div>
+          <h4>Read and understand existing issues</h4>
+          <p>
+            Review open and closed issues to avoid duplicate efforts and to understand
+            current discussions or decisions.
+          </p>
+        </div>
+
+        <div class="practice-item">
+          <div class="icon">💬</div>
+          <h4>Ask before working on large or breaking changes</h4>
+          <p>
+            Discuss major changes with maintainers beforehand to ensure alignment with
+            the project's direction.
+          </p>
+        </div>
+
+        <div class="practice-item">
+          <div class="icon">🧩</div>
+          <h4>Keep pull requests small and focused</h4>
+          <p>
+            Small, well-scoped pull requests are easier to review, test, and merge.
+          </p>
+        </div>
+
+        <div class="practice-item">
+          <div class="icon">📄</div>
+          <h4>Update documentation when behavior changes</h4>
+          <p>
+            Make sure README files or guides reflect any changes introduced by your
+            contribution.
+          </p>
+        </div>
+
       </div>
-    </li>
-  </ol>
-</section>
-<section class="contributing-best-practices">
-  <h3>Best Practices for Contributing</h3>
-  <p>Follow these best practices to make your contributions effective, professional, and easy for maintainers to review.</p>
-
-  <div class="practices-grid">
-    <div class="practice-item">
-      <div class="icon">📝</div>
-      <h4>Write clear, concise commits</h4>
-      <p>Meaningful commit messages make it easier for others to understand your changes.</p>
-    </div>
-    <div class="practice-item">
-      <div class="icon">📚</div>
-      <h4>Follow contribution guidelines</h4>
-      <p>Adhering to project guidelines ensures your PR meets expectations and saves time for maintainers.</p>
-    </div>
-    <div class="practice-item">
-      <div class="icon">🎨</div>
-      <h4>Maintain code style and formatting</h4>
-      <p>Keep your code consistent with the project's style and formatting conventions.</p>
-    </div>
-    <div class="practice-item">
-      <div class="icon">🤝</div>
-      <h4>Communicate professionally</h4>
-      <p>Be polite, constructive, and respectful when discussing changes or providing feedback.</p>
-    </div>
-    <div class="practice-item">
-  <div class="icon">🔍</div>
-  <h4>Read and understand existing issues</h4>
-  <p>
-    Review open and closed issues to avoid duplicate efforts and to understand
-    current discussions or decisions.
-  </p>
-</div>
-
-<div class="practice-item">
-  <div class="icon">💬</div>
-  <h4>Ask before working on large or breaking changes</h4>
-  <p>
-    Discuss major changes with maintainers beforehand to ensure alignment with
-    the project's direction.
-  </p>
-</div>
-
-<div class="practice-item">
-  <div class="icon">🧩</div>
-  <h4>Keep pull requests small and focused</h4>
-  <p>
-    Small, well-scoped pull requests are easier to review, test, and merge.
-  </p>
-</div>
-
-<div class="practice-item">
-  <div class="icon">📄</div>
-  <h4>Update documentation when behavior changes</h4>
-  <p>
-    Make sure README files or guides reflect any changes introduced by your
-    contribution.
-  </p>
-</div>
-
-  </div>
-</section>
-<section class="common-mistakes">
-  <h2>Common Mistakes Beginners Should Avoid</h2>
-  <ul class="mistakes-list">
-    <li>
-      <span class="mistake-icon">1</span>
-      <p>Not reading the README</p>
-    </li>
-    <li>
-      <span class="mistake-icon">2</span>
-      <p>Skipping contributing guidelines</p>
-    </li>
-    <li>
-      <span class="mistake-icon">3</span>
-      <p>Making large or unclear pull requests</p>
-    </li>
-    <li>
-      <span class="mistake-icon">4</span>
-      <p>Not testing changes before submitting</p>
-    </li>
+    </section>
+    <section class="common-mistakes">
+      <h2>Common Mistakes Beginners Should Avoid</h2>
+      <ul class="mistakes-list">
+        <li>
+          <span class="mistake-icon">1</span>
+          <p>Not reading the README</p>
+        </li>
         <li>
-      <span class="mistake-icon">5</span>
-      <p>Opening issues or pull requests without checking for duplicates</p>
-    </li>
-    <li>
-      <span class="mistake-icon">6</span>
-      <p>Ignoring or misunderstanding maintainers' feedback</p>
-    </li>
-    <li>
-      <span class="mistake-icon">7</span>
-      <p>Making large or breaking changes without prior discussion</p>
-    </li>
-    <li>
-      <span class="mistake-icon">8</span>
-      <p>Poor or unclear pull request descriptions</p>
-    </li>
-  </ul>
-</section>
-
-</main>
-
-<div id="footer"></div>
-
-<script src="../js/components.js"></script>
+          <span class="mistake-icon">2</span>
+          <p>Skipping contributing guidelines</p>
+        </li>
+        <li>
+          <span class="mistake-icon">3</span>
+          <p>Making large or unclear pull requests</p>
+        </li>
+        <li>
+          <span class="mistake-icon">4</span>
+          <p>Not testing changes before submitting</p>
+        </li>
+        <li>
+          <span class="mistake-icon">5</span>
+          <p>Opening issues or pull requests without checking for duplicates</p>
+        </li>
+        <li>
+          <span class="mistake-icon">6</span>
+          <p>Ignoring or misunderstanding maintainers' feedback</p>
+        </li>
+        <li>
+          <span class="mistake-icon">7</span>
+          <p>Making large or breaking changes without prior discussion</p>
+        </li>
+        <li>
+          <span class="mistake-icon">8</span>
+          <p>Poor or unclear pull request descriptions</p>
+        </li>
+      </ul>
+    </section>
+
+  </main>
+
+  <div id="footer"></div>
+
+  <script src="../js/components.js"></script>
 
   <script src="../js/theme.js"></script>
 
 
-<script src="../js/chatbot.js"></script>
-<script src="../js/main.js"></script>
-<script src="/frontend/js/DMtheme.js"></script>
+  <script src="../js/chatbot.js"></script>
+  <script src="../js/main.js"></script>
+  <script src="/frontend/js/DMtheme.js"></script>
   <button id="scrollTopBtn" title="Back to Top">
-   <i class="fas fa-chevron-up"></i>
+    <i class="fas fa-chevron-up"></i>
   </button>
   <script src='../js/pwa.js'></script>
 </body>
diff --git a/frontend/pages/login.html b/frontend/pages/login.html
new file mode 100644
index 00000000..c2ecf0bd
--- /dev/null
+++ b/frontend/pages/login.html
@@ -0,0 +1,182 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login | OpenSource Compass</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="../css/style.css">
+    <style>
+        .auth-page {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 80vh;
+            padding: 2rem;
+        }
+
+        .auth-card {
+            background: var(--surface);
+            padding: 3rem;
+            border-radius: 24px;
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow);
+            max-width: 450px;
+            width: 100%;
+            text-align: center;
+        }
+
+        .auth-card h2 {
+            font-family: 'Playfair Display', serif;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .form-group {
+            text-align: left;
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.8rem 1.2rem;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            background: white;
+            outline: none;
+            transition: border-color 0.3s ease;
+        }
+
+        .form-group input:focus {
+            border-color: var(--gold-bright);
+        }
+
+        .btn-auth {
+            width: 100%;
+            padding: 1rem;
+            border-radius: 12px;
+            background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
+            color: white;
+            border: none;
+            font-weight: 700;
+            cursor: pointer;
+            margin-top: 1rem;
+            transition: transform 0.2s ease;
+        }
+
+        .btn-auth:hover {
+            transform: translateY(-2px);
+        }
+
+        .divider {
+            margin: 2rem 0;
+            display: flex;
+            align-items: center;
+            color: var(--text-mid);
+            font-size: 0.8rem;
+        }
+
+        .divider::before,
+        .divider::after {
+            content: "";
+            flex: 1;
+            height: 1px;
+            background: var(--border);
+            margin: 0 1rem;
+        }
+
+        .btn-github {
+            width: 100%;
+            padding: 0.9rem;
+            border-radius: 12px;
+            background: #24292e;
+            color: white;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 1rem;
+            text-decoration: none;
+        }
+
+        .btn-github:hover {
+            background: #2f363d;
+        }
+
+        .auth-footer {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            color: var(--text-mid);
+        }
+
+        .auth-footer a {
+            color: var(--gold-deep);
+            text-decoration: none;
+            font-weight: 600;
+        }
+
+        .error-message {
+            background: #fff5f5;
+            color: #c53030;
+            padding: 0.8rem;
+            border-radius: 10px;
+            font-size: 0.85rem;
+            margin-bottom: 1.5rem;
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="navbar"></header>
+
+    <main class="auth-page">
+        <div class="auth-card">
+            <h2>Welcome Back</h2>
+            <div id="loginError" class="error-message">Invalid email or password.</div>
+
+            <form id="loginForm">
+                <div class="form-group">
+                    <label>Email Address</label>
+                    <input type="email" id="loginEmail" placeholder="name@example.com" required>
+                </div>
+                <div class="form-group">
+                    <label>Password</label>
+                    <input type="password" id="loginPassword" placeholder="••••••••" required>
+                </div>
+                <button type="submit" class="btn-auth">Sign In</button>
+            </form>
+
+            <div class="divider">OR</div>
+
+            <a href="http://localhost:5000/api/auth/github" class="btn-github">
+                <i class="fab fa-github"></i>
+                Continue with GitHub
+            </a>
+
+            <div class="auth-footer">
+                Don't have an account? <a href="signup.html">Create one</a>
+            </div>
+        </div>
+    </main>
+
+    <div id="footer"></div>
+
+    <script src="../js/components.js"></script>
+    <script src="../js/auth.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/frontend/pages/profile.html b/frontend/pages/profile.html
index 820f3fb7..56e12608 100644
--- a/frontend/pages/profile.html
+++ b/frontend/pages/profile.html
@@ -1,48 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <title>Profile Settings</title>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
-    />
-    <link rel="stylesheet" href="../css/style.css">
+  <meta charset="UTF-8">
+  <title>Profile Settings</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+  <link rel="stylesheet" href="../css/style.css">
   <link rel='manifest' href='../../manifest.json' />
 </head>
+
 <body>
-    <nav></nav>
-    
-    <div class="auth-container">
-        <h2>Account Settings</h2>
-        <form id="profileForm">
-            <div class="form-group">
-                <label>Full Name</label>
-                <input type="text" id="editName" required>
-            </div>
-            <div class="form-group">
-                <label>Email Address</label>
-                <input type="email" id="editEmail" readonly style="background:#f4f4f4">
-            </div>
-            <div class="form-group">
-                <label>New Password (leave blank to keep current)</label>
-                <input type="password" id="editPassword">
-            </div>
-            <button type="submit" class="btn">Save Changes</button>
-            <p id="profileMessage" class="error-message"></p>
-        </form>
+  <header id="navbar"></header>
+
+  <div class="auth-page">
+    <div class="auth-card">
+      <h2>Account Settings</h2>
+      <form id="profileForm">
+        <div class="form-group">
+          <label>Full Name</label>
+          <input type="text" id="editName" required>
+        </div>
+        <div class="form-group">
+          <label>Email Address</label>
+          <input type="email" id="editEmail" readonly
+            style="background:var(--bg-main); cursor: not-allowed; opacity: 0.7;">
+        </div>
+        <div class="form-group">
+          <label>New Password (leave blank to keep current)</label>
+          <input type="password" id="editPassword" placeholder="••••••••">
+        </div>
+        <button type="submit" class="btn-auth">Save Changes</button>
+        <p id="profileMessage" style="margin-top: 1rem; font-size: 0.9rem;"></p>
+      </form>
     </div>
+  </div>
 
-    <div id="footer"></div>
+  <div id="footer"></div>
 
-    <script src="../js/components.js"></script>
-    <script src="../js/auth.js"></script>
-    <script src="../js/profile2.js"></script>
-    <script src="../js/main.js"></script>
+  <script src="../js/components.js"></script>
+  <script src="../js/auth.js"></script>
+  <script src="../js/profile2.js"></script>
 
   <button id="scrollTopBtn" title="Back to Top">
-   <i class="fas fa-chevron-up"></i>
+    <i class="fas fa-chevron-up"></i>
   </button>
   <script src='../js/pwa.js'></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/frontend/pages/signup.html b/frontend/pages/signup.html
new file mode 100644
index 00000000..67eb5a70
--- /dev/null
+++ b/frontend/pages/signup.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Create Account | OpenSource Compass</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
+    <link
+        href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600;700&display=swap"
+        rel="stylesheet">
+    <link rel="stylesheet" href="../css/style.css">
+    <style>
+        .auth-page {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 80vh;
+            padding: 2rem;
+        }
+
+        .auth-card {
+            background: var(--surface);
+            padding: 3rem;
+            border-radius: 24px;
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow);
+            max-width: 450px;
+            width: 100%;
+            text-align: center;
+        }
+
+        .auth-card h2 {
+            font-family: 'Playfair Display', serif;
+            font-size: 2rem;
+            margin-bottom: 2rem;
+        }
+
+        .form-group {
+            text-align: left;
+            margin-bottom: 1.2rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.4rem;
+            font-weight: 600;
+            font-size: 0.85rem;
+        }
+
+        .form-group input {
+            width: 100%;
+            padding: 0.8rem 1.2rem;
+            border-radius: 12px;
+            border: 1px solid var(--border);
+            background: white;
+            outline: none;
+            transition: all 0.3s ease;
+        }
+
+        .form-group input:focus {
+            border-color: var(--gold-bright);
+            box-shadow: 0 0 0 4px var(--gold-glow);
+        }
+
+        .btn-auth {
+            width: 100%;
+            padding: 1rem;
+            border-radius: 12px;
+            background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
+            color: white;
+            border: none;
+            font-weight: 700;
+            cursor: pointer;
+            margin-top: 1rem;
+            transition: transform 0.2s ease;
+        }
+
+        .btn-auth:hover {
+            transform: translateY(-2px);
+        }
+
+        .auth-footer {
+            margin-top: 2rem;
+            font-size: 0.9rem;
+            color: var(--text-mid);
+        }
+
+        .auth-footer a {
+            color: var(--gold-deep);
+            text-decoration: none;
+            font-weight: 600;
+        }
+
+        .error-message {
+            background: #fff5f5;
+            color: #c53030;
+            padding: 0.8rem;
+            border-radius: 10px;
+            font-size: 0.85rem;
+            margin-bottom: 1.5rem;
+            display: none;
+        }
+    </style>
+</head>
+
+<body>
+    <header id="navbar"></header>
+
+    <main class="auth-page">
+        <div class="auth-card">
+            <h2>Join the Journey</h2>
+            <div id="signupError" class="error-message">Something went wrong. Please try again.</div>
+
+            <form id="signupForm">
+                <div class="form-group">
+                    <label>Full Name</label>
+                    <input type="text" id="name" placeholder="John Doe" required>
+                </div>
+                <div class="form-group">
+                    <label>Email Address</label>
+                    <input type="email" id="email" placeholder="john@example.com" required>
+                </div>
+                <div class="form-group">
+                    <label>Password</label>
+                    <input type="password" id="password" placeholder="Min 6 characters" required>
+                </div>
+                <div class="form-group">
+                    <label>Confirm Password</label>
+                    <input type="password" id="confirmPassword" placeholder="••••••••" required>
+                </div>
+                <button type="submit" class="btn-auth">Create Account</button>
+            </form>
+
+            <div class="auth-footer">
+                Already have an account? <a href="login.html">Sign in</a>
+            </div>
+        </div>
+    </main>
+
+    <div id="footer"></div>
+
+    <script src="../js/components.js"></script>
+    <script src="../js/auth.js"></script>
+</body>
+
+</html>
\ No newline at end of file