diff --git a/backend/config/passportConfig.js b/backend/config/passportConfig.js
index 59ac9e51..50db1f60 100644
--- a/backend/config/passportConfig.js
+++ b/backend/config/passportConfig.js
@@ -9,12 +9,12 @@ passport.use(
             try {
                 const user = await User.findOne( {email} );
                 if (!user) {
-                    return done(null, false, { message: 'Email is invalid '});
+                    return done(null, false, { message: 'Invalid email or password' });
                 }
 
                 const isMatch = await user.comparePassword(password);
                 if (!isMatch) {
-                    return done(null, false, { message: 'Invalid password' });
+                    return done(null, false, { message: 'Invalid email or password' });
                 }
 
                 return done(null, {
diff --git a/backend/data/discussions.json b/backend/data/discussions.json
new file mode 100644
index 00000000..e474e8ee
--- /dev/null
+++ b/backend/data/discussions.json
@@ -0,0 +1,30 @@
+{
+  "discussions": [
+    {
+      "id": "b3808b42-91e4-4d81-991a-07a96d7a549f",
+      "title": "Test discussion from shell",
+      "body": "This is a sufficiently long discussion body to pass validation and save.",
+      "category": "Help",
+      "tags": [
+        "test",
+        "api"
+      ],
+      "authorId": "8d706914-51d9-40ca-981c-ac9dcb6a1881",
+      "authorName": "Guest",
+      "likes": [
+        "00000000-0000-0000-0000-000000000000"
+      ],
+      "comments": [
+        {
+          "id": "d1b1bcad-6989-49ff-a587-667f8426198e",
+          "text": "Yes",
+          "authorId": "00000000-0000-0000-0000-000000000000",
+          "authorName": "demo-user",
+          "createdAt": "2026-05-27T12:56:14.816Z"
+        }
+      ],
+      "createdAt": "2026-05-27T11:55:11.307Z",
+      "updatedAt": "2026-05-27T13:00:24.816Z"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/backend/data/users.json b/backend/data/users.json
new file mode 100644
index 00000000..b4d801da
--- /dev/null
+++ b/backend/data/users.json
@@ -0,0 +1,10 @@
+{
+  "users": [
+    {
+      "id": "00000000-0000-0000-0000-000000000000",
+      "username": "demo-user",
+      "email": "user@example.com",
+      "password": "$2a$10$00000000000000000000000000000000000000000000000000000"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/backend/models/Discussion.js b/backend/models/Discussion.js
new file mode 100644
index 00000000..94705f09
--- /dev/null
+++ b/backend/models/Discussion.js
@@ -0,0 +1,81 @@
+const mongoose = require('mongoose');
+
+const CommentSchema = new mongoose.Schema(
+  {
+    text: {
+      type: String,
+      required: true,
+      trim: true,
+      maxlength: 1000,
+    },
+    authorId: {
+      type: String,
+      required: true,
+    },
+    authorName: {
+      type: String,
+      required: true,
+      trim: true,
+    },
+  },
+  { timestamps: true }
+);
+
+const DiscussionSchema = new mongoose.Schema(
+  {
+    title: {
+      type: String,
+      required: true,
+      trim: true,
+      minlength: 4,
+      maxlength: 140,
+    },
+    body: {
+      type: String,
+      required: true,
+      trim: true,
+      minlength: 20,
+      maxlength: 4000,
+    },
+    category: {
+      type: String,
+      required: true,
+      trim: true,
+      maxlength: 60,
+    },
+    tags: {
+      type: [
+        {
+          type: String,
+          trim: true,
+          maxlength: 30,
+        },
+      ],
+      default: [],
+    },
+    authorId: {
+      type: String,
+      required: true,
+    },
+    authorName: {
+      type: String,
+      required: true,
+      trim: true,
+    },
+    likes: {
+      type: [
+        {
+          type: String,
+        },
+      ],
+      default: [],
+    },
+    comments: {
+      type: [CommentSchema],
+      default: [],
+    },
+  },
+  { timestamps: true }
+);
+
+module.exports = mongoose.model('Discussion', DiscussionSchema);
\ No newline at end of file
diff --git a/backend/routes/auth.js b/backend/routes/auth.js
index 1c1cf764..b47213cc 100644
--- a/backend/routes/auth.js
+++ b/backend/routes/auth.js
@@ -1,15 +1,137 @@
 const express = require("express");
 const passport = require("passport");
+const fs = require("fs/promises");
+const path = require("path");
+const bcrypt = require("bcryptjs");
+const crypto = require("crypto");
 const User = require("../models/User");
 const { signupSchema, loginSchema } = require("../validators/authValidator");
 const { validateRequest } = require("../validators/validationRequest");
 const router = express.Router();
 
+const getUseMongoAuth = () => typeof global.mongooseConnected !== "undefined" ? global.mongooseConnected : Boolean(process.env.MONGO_URI);
+const dataDir = path.join(__dirname, "..", "data");
+const usersFile = path.join(dataDir, "users.json");
+const usersLockFile = `${usersFile}.lock`;
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const acquireUsersLock = async () => {
+    const retries = 80;
+    const delayMs = 25;
+
+    for (let attempt = 0; attempt < retries; attempt += 1) {
+        try {
+            const handle = await fs.open(usersLockFile, "wx");
+            return handle;
+        } catch (error) {
+            if (error.code !== "EEXIST") {
+                throw error;
+            }
+
+            await sleep(delayMs);
+        }
+    }
+
+    throw new Error("Could not acquire users file lock");
+};
+
+const withUsersLock = async (callback) => {
+    const lockHandle = await acquireUsersLock();
+
+    try {
+        return await callback();
+    } finally {
+        await lockHandle.close();
+        await fs.unlink(usersLockFile).catch(() => {});
+    }
+};
+
+const ensureUsersFileUnlocked = async () => {
+    await fs.mkdir(dataDir, { recursive: true });
+
+    try {
+        await fs.access(usersFile);
+    } catch {
+        await fs.writeFile(usersFile, JSON.stringify({ users: [] }, null, 2), "utf8");
+    }
+};
+
+const readUsersUnlocked = async () => {
+    await ensureUsersFileUnlocked();
+    const raw = await fs.readFile(usersFile, "utf8");
+
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed.users) ? parsed.users : [];
+    } catch (error) {
+        throw new Error(`Failed to parse users file at ${usersFile}: ${error.message}`);
+    }
+};
+
+const writeUsersUnlocked = async (users) => {
+    await ensureUsersFileUnlocked();
+    const tempFile = `${usersFile}.${process.pid}.${Date.now()}.tmp`;
+
+    // Write to a temporary file first, then atomically replace the target file.
+    await fs.writeFile(tempFile, JSON.stringify({ users }, null, 2), "utf8");
+    await fs.rename(tempFile, usersFile);
+};
+
+const readUsersWithLock = async () => withUsersLock(readUsersUnlocked);
+
+const createUserIfNotExistsWithLock = async (newUser) => withUsersLock(async () => {
+    const users = await readUsersUnlocked();
+    const existingUser = users.find((user) => user.email === newUser.email || user.username === newUser.username);
+
+    if (existingUser) {
+        return false;
+    }
+
+    users.push(newUser);
+    await writeUsersUnlocked(users);
+    return true;
+});
+
+const createSessionUser = (req, user) => {
+    req.session.authUser = {
+        id: user.id,
+        username: user.username,
+        email: user.email,
+    };
+
+    req.user = req.session.authUser;
+};
+
 // Signup route
 router.post("/signup", validateRequest(signupSchema), async (req, res) => {
 
     const { username,  email, password } = req.body;
-                                   
+
+    if (!getUseMongoAuth()) {
+        try {
+            const salt = await bcrypt.genSalt(10);
+            const hashedPassword = await bcrypt.hash(password, salt);
+
+            const newUser = {
+                id: crypto.randomUUID(),
+                username,
+                email,
+                password: hashedPassword,
+            };
+
+            const created = await createUserIfNotExistsWithLock(newUser);
+
+            if (!created) {
+                return res.status(400).json({ message: 'User already exists' });
+            }
+
+            return res.status(201).json({ message: 'User created successfully' });
+        } catch (err) {
+            return res.status(500).json({ message: 'Error creating user', error: err.message });
+        }
+    }
+
     try {
         const existingUser = await User.findOne({
             $or: [{ email }, { username }],
@@ -42,13 +164,73 @@ router.get("/me", (req, res) => {
 });
 
 // Login route
-router.post("/login", validateRequest(loginSchema), passport.authenticate('local'), (req, res) => {
-    res.status(200).json( { message: 'Login successful', user: req.user } );
+router.post("/login", validateRequest(loginSchema), async (req, res, next) => {
+    if (!getUseMongoAuth()) {
+        try {
+            const { email, password } = req.body;
+            const users = await readUsersWithLock();
+            const user = users.find((item) => item.email === email);
+
+            if (!user) {
+                return res.status(401).json({ message: 'Invalid email or password' });
+            }
+
+            const isMatch = await bcrypt.compare(password, user.password);
+            if (!isMatch) {
+                return res.status(401).json({ message: 'Invalid email or password' });
+            }
+
+            req.session.regenerate((err) => {
+                if (err) {
+                    return res.status(500).json({ message: 'Login failed', error: err.message });
+                }
+
+                createSessionUser(req, user);
+
+                return res.status(200).json({
+                    message: 'Login successful',
+                    user: req.user,
+                });
+            });
+        } catch (err) {
+            return res.status(500).json({ message: 'Login failed', error: err.message });
+        }
+    }
+
+    return passport.authenticate('local', (err, user, info) => {
+        if (err) {
+            return next(err);
+        }
+
+        if (!user) {
+            return res.status(401).json({ message: info?.message || 'Invalid credentials' });
+        }
+
+        req.logIn(user, (loginErr) => {
+            if (loginErr) {
+                return next(loginErr);
+            }
+
+            return res.status(200).json({ message: 'Login successful', user: req.user });
+        });
+    })(req, res, next);
 });
 
 // Logout route
 router.get("/logout", (req, res) => {
 
+    if (!getUseMongoAuth()) {
+        req.session.destroy((err) => {
+            if (err) {
+                return res.status(500).json({ message: 'Logout failed', error: err.message });
+            }
+
+            return res.status(200).json({ message: 'Logged out successfully' });
+        });
+
+        return;
+    }
+
     req.logout((err) => {
 
         if (err) {
diff --git a/backend/routes/discussions.js b/backend/routes/discussions.js
new file mode 100644
index 00000000..8c981697
--- /dev/null
+++ b/backend/routes/discussions.js
@@ -0,0 +1,351 @@
+const express = require('express');
+const fs = require('fs/promises');
+const path = require('path');
+const crypto = require('crypto');
+const { discussionSchema, commentSchema } = require('../validators/discussionValidator');
+const { validateRequest } = require('../validators/validationRequest');
+
+const router = express.Router();
+
+const dataDir = path.join(__dirname, '..', 'data');
+const dataFile = path.join(dataDir, 'discussions.json');
+let storeMutex = Promise.resolve();
+
+const ensureDataFile = async () => {
+  await fs.mkdir(dataDir, { recursive: true });
+
+  try {
+    await fs.access(dataFile);
+  } catch {
+    await fs.writeFile(dataFile, JSON.stringify({ discussions: [] }, null, 2), 'utf8');
+  }
+};
+
+const readStore = async () => {
+  await ensureDataFile();
+  const raw = await fs.readFile(dataFile, 'utf8');
+
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed.discussions) ? parsed.discussions : [];
+  } catch (error) {
+    throw new Error(`Invalid discussions store JSON in ${dataFile}: ${error.message}`);
+  }
+};
+
+const writeStore = async (discussions) => {
+  await ensureDataFile();
+  const tempFile = `${dataFile}.${process.pid}.${Date.now()}.tmp`;
+
+  // Write to a temporary file first, then atomically replace the target file.
+  await fs.writeFile(tempFile, JSON.stringify({ discussions }, null, 2), 'utf8');
+  await fs.rename(tempFile, dataFile);
+};
+
+const updateStore = async (updater) => {
+  let releaseLock;
+  const waitForTurn = storeMutex;
+  storeMutex = new Promise((resolve) => {
+    releaseLock = resolve;
+  });
+
+  await waitForTurn;
+
+  try {
+    const discussions = await readStore();
+    const result = await updater(discussions);
+    const nextDiscussions = Array.isArray(result?.discussions) ? result.discussions : discussions;
+
+    if (result?.persist !== false) {
+      await writeStore(nextDiscussions);
+    }
+
+    return { ...result, discussions: nextDiscussions };
+  } finally {
+    releaseLock();
+  }
+};
+
+const normalizeTags = (tags = []) =>
+  tags
+    .map((tag) => String(tag).trim())
+    .filter(Boolean)
+    .map((tag) => tag.replace(/^#?/, '').toLowerCase());
+
+const requireAuth = (req, res, next) => {
+  if (!req.user) {
+    return res.status(401).json({ message: 'Authentication required' });
+  }
+
+  return next();
+};
+
+const getAuthenticatedIdentity = (req) => ({
+  id: req.user._id?.toString?.() || req.user.id || req.user.email || 'user',
+  name: req.user.username || req.user.email || 'Member',
+});
+
+const getCommunityIdentity = (req) => {
+  if (req.user) {
+    return {
+      id: req.user._id?.toString?.() || req.user.id || req.user.email || 'user',
+      name: req.user.username || req.user.email || 'Member',
+    };
+  }
+
+  if (!req.session.communityUserId) {
+    req.session.communityUserId = crypto.randomUUID();
+  }
+
+  if (!req.session.communityUserName) {
+    req.session.communityUserName = 'Guest';
+  }
+
+  return {
+    id: req.session.communityUserId,
+    name: req.session.communityUserName,
+  };
+};
+
+const toPublicDiscussion = (discussion, currentUserId) => ({
+  id: discussion.id,
+  title: discussion.title,
+  body: discussion.body,
+  category: discussion.category,
+  tags: discussion.tags,
+  author: {
+    id: discussion.authorId,
+    name: discussion.authorName,
+  },
+  likesCount: discussion.likes.length,
+  commentsCount: discussion.comments.length,
+  likedByCurrentUser: currentUserId ? discussion.likes.includes(currentUserId) : false,
+  canEdit: currentUserId ? String(discussion.authorId) === String(currentUserId) : false,
+  comments: discussion.comments.map((comment) => ({
+    id: comment.id,
+    text: comment.text,
+    author: {
+      id: comment.authorId,
+      name: comment.authorName,
+    },
+    createdAt: comment.createdAt,
+  })),
+  createdAt: discussion.createdAt,
+  updatedAt: discussion.updatedAt,
+});
+
+router.get('/', async (req, res) => {
+  try {
+    const discussions = await readStore();
+    const { search = '', category = '', tag = '', sort = 'recent' } = req.query;
+    const currentUserId = req.user ? getCommunityIdentity(req).id : (req.session?.communityUserId || null);
+
+    let filtered = discussions;
+
+    if (category) {
+      filtered = filtered.filter((discussion) => discussion.category === category);
+    }
+
+    if (tag) {
+      const searchTag = String(tag).toLowerCase();
+      filtered = filtered.filter((discussion) => discussion.tags.includes(searchTag));
+    }
+
+    if (search) {
+      const term = String(search).toLowerCase();
+      filtered = filtered.filter((discussion) => {
+        const haystack = [discussion.title, discussion.body, discussion.category, discussion.tags.join(' ')].join(' ').toLowerCase();
+        return haystack.includes(term);
+      });
+    }
+
+    filtered = filtered.sort((left, right) => {
+      if (sort === 'trending') {
+        const leftScore = left.likes.length * 2 + left.comments.length;
+        const rightScore = right.likes.length * 2 + right.comments.length;
+
+        if (rightScore !== leftScore) {
+          return rightScore - leftScore;
+        }
+      }
+
+      return new Date(right.updatedAt).getTime() - new Date(left.updatedAt).getTime();
+    });
+
+    return res.status(200).json({
+      items: filtered.map((discussion) => toPublicDiscussion(discussion, currentUserId)),
+      categories: Array.from(new Set(filtered.map((discussion) => discussion.category))).sort(),
+      isAuthenticated: !!req.user,
+    });
+  } catch (error) {
+    return res.status(500).json({ message: 'Unable to load discussions', error: error.message });
+  }
+});
+
+router.post('/', requireAuth, validateRequest(discussionSchema), async (req, res) => {
+  try {
+    const identity = getAuthenticatedIdentity(req);
+    const now = new Date().toISOString();
+
+    const discussion = {
+      id: crypto.randomUUID(),
+      title: String(req.body.title).trim(),
+      body: String(req.body.body).trim(),
+      category: String(req.body.category).trim(),
+      tags: normalizeTags(req.body.tags || []),
+      authorId: identity.id,
+      authorName: identity.name,
+      likes: [],
+      comments: [],
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    await updateStore((discussions) => {
+      discussions.unshift(discussion);
+      return { discussions };
+    });
+
+    return res.status(201).json({
+      message: 'Discussion created successfully',
+      discussion: toPublicDiscussion(discussion, identity.id),
+    });
+  } catch (error) {
+    return res.status(500).json({ message: 'Unable to create discussion', error: error.message });
+  }
+});
+
+router.put('/:id', requireAuth, validateRequest(discussionSchema), async (req, res) => {
+  try {
+    const identity = getAuthenticatedIdentity(req);
+    const result = await updateStore((discussions) => {
+      const discussion = discussions.find((item) => item.id === req.params.id);
+
+      if (!discussion) {
+        return { status: 404, message: 'Discussion not found', persist: false };
+      }
+
+      if (String(discussion.authorId) !== String(identity.id)) {
+        return { status: 403, message: 'You can only edit your own discussion', persist: false };
+      }
+
+      discussion.title = String(req.body.title).trim();
+      discussion.body = String(req.body.body).trim();
+      discussion.category = String(req.body.category).trim();
+      discussion.tags = normalizeTags(req.body.tags || []);
+      discussion.updatedAt = new Date().toISOString();
+
+      return { discussions, discussion };
+    });
+
+    if (result.status) {
+      return res.status(result.status).json({ message: result.message });
+    }
+
+    return res.status(200).json({
+      message: 'Discussion updated successfully',
+      discussion: toPublicDiscussion(result.discussion, identity.id),
+    });
+  } catch (error) {
+    return res.status(500).json({ message: 'Unable to update discussion', error: error.message });
+  }
+});
+
+router.delete('/:id', requireAuth, async (req, res) => {
+  try {
+    const identity = getAuthenticatedIdentity(req);
+    const result = await updateStore((discussions) => {
+      const discussionIndex = discussions.findIndex((item) => item.id === req.params.id);
+
+      if (discussionIndex === -1) {
+        return { status: 404, message: 'Discussion not found', persist: false };
+      }
+
+      if (String(discussions[discussionIndex].authorId) !== String(identity.id)) {
+        return { status: 403, message: 'You can only delete your own discussion', persist: false };
+      }
+
+      discussions.splice(discussionIndex, 1);
+      return { discussions };
+    });
+
+    if (result.status) {
+      return res.status(result.status).json({ message: result.message });
+    }
+
+    return res.status(200).json({ message: 'Discussion deleted successfully' });
+  } catch (error) {
+    return res.status(500).json({ message: 'Unable to delete discussion', error: error.message });
+  }
+});
+
+router.post('/:id/likes', requireAuth, async (req, res) => {
+  try {
+    const identity = getAuthenticatedIdentity(req);
+    const result = await updateStore((discussions) => {
+      const discussion = discussions.find((item) => item.id === req.params.id);
+
+      if (!discussion) {
+        return { status: 404, message: 'Discussion not found', persist: false };
+      }
+
+      const alreadyLiked = discussion.likes.includes(identity.id);
+      discussion.likes = alreadyLiked
+        ? discussion.likes.filter((likeId) => String(likeId) !== String(identity.id))
+        : [...discussion.likes, identity.id];
+      discussion.updatedAt = new Date().toISOString();
+
+      return { discussions, discussion, alreadyLiked };
+    });
+
+    if (result.status) {
+      return res.status(result.status).json({ message: result.message });
+    }
+
+    return res.status(200).json({
+      message: result.alreadyLiked ? 'Discussion unliked' : 'Discussion liked',
+      discussion: toPublicDiscussion(result.discussion, identity.id),
+    });
+  } catch (error) {
+    return res.status(500).json({ message: 'Unable to update like state', error: error.message });
+  }
+});
+
+router.post('/:id/comments', requireAuth, validateRequest(commentSchema), async (req, res) => {
+  try {
+    const commentText = req.body.text;
+
+    const identity = getAuthenticatedIdentity(req);
+    const result = await updateStore((discussions) => {
+      const discussion = discussions.find((item) => item.id === req.params.id);
+
+      if (!discussion) {
+        return { status: 404, message: 'Discussion not found', persist: false };
+      }
+
+      discussion.comments.push({
+        id: crypto.randomUUID(),
+        text: commentText,
+        authorId: identity.id,
+        authorName: identity.name,
+        createdAt: new Date().toISOString(),
+      });
+      discussion.updatedAt = new Date().toISOString();
+
+      return { discussions, discussion };
+    });
+
+    if (result.status) {
+      return res.status(result.status).json({ message: result.message });
+    }
+
+    return res.status(201).json({
+      message: 'Comment added successfully',
+      discussion: toPublicDiscussion(result.discussion, identity.id),
+    });
+  } catch (error) {
+    return res.status(500).json({ message: 'Unable to add comment', error: error.message });
+  }
+});
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/server.js b/backend/server.js
index 211416be..88fef719 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -45,18 +45,48 @@ app.use(session({
 app.use(passport.initialize());
 app.use(passport.session());
 
+global.mongooseConnected = false;
+
+app.use((req, res, next) => {
+    if (!global.mongooseConnected) {
+        if (req.session?.authUser) {
+            req.user = req.session.authUser;
+        }
+    }
+
+    next();
+});
+
 // Routes
 const authRoutes = require('./routes/auth');
+const discussionRoutes = require('./routes/discussions');
 app.use('/api/auth', authRoutes);
+app.use('/api/discussions', discussionRoutes);
 
-// Connect to MongoDB
-mongoose.connect(process.env.MONGO_URI, {}).then(() => {
-    logger.info('Connected to MongoDB');
+const startServer = () => {
+    const port = process.env.PORT || 5000;
 
-    const PORT = process.env.PORT || 5000;
-    app.listen(PORT, () => {
-        logger.info(`Server running on port ${PORT}`);
+    app.listen(port, () => {
+        logger.info(`Server running on port ${port}`);
     });
-}).catch((err) => {
-    logger.error('MongoDB connection error', err);
-});
+};
+
+// Connect to MongoDB when available, but do not block community discussions if it is not.
+if (process.env.MONGO_URI) {
+    mongoose.connect(process.env.MONGO_URI, {})
+        .then(() => {
+            logger.info('Connected to MongoDB');
+            global.mongooseConnected = true;
+            startServer();
+        })
+        .catch((err) => {
+            logger.error('MongoDB connection error', err);
+            logger.warn('Starting without MongoDB; falling back to JSON file-backed authentication');
+            global.mongooseConnected = false;
+            startServer();
+        });
+} else {
+    logger.warn('MONGO_URI is not set; starting without MongoDB');
+    global.mongooseConnected = false;
+    startServer();
+}
diff --git a/backend/validators/discussionValidator.js b/backend/validators/discussionValidator.js
new file mode 100644
index 00000000..2beb637a
--- /dev/null
+++ b/backend/validators/discussionValidator.js
@@ -0,0 +1,30 @@
+const { z } = require('zod');
+
+const discussionSchema = z.object({
+  title: z
+    .string()
+    .trim()
+    .min(4, 'Title must be at least 4 characters long')
+    .max(140, 'Title must be at most 140 characters long'),
+  body: z
+    .string()
+    .trim()
+    .min(20, 'Post body must be at least 20 characters long')
+    .max(4000, 'Post body must be at most 4000 characters long'),
+  category: z
+    .string()
+    .trim()
+    .min(2, 'Category is required')
+    .max(60, 'Category must be at most 60 characters long'),
+  tags: z.array(z.string().trim().min(1).max(30)).max(6).default([]),
+});
+
+const commentSchema = z.object({
+  text: z
+    .string()
+    .trim()
+    .min(2, 'Comment must be at least 2 characters long')
+    .max(1000, 'Comment must be at most 1000 characters long'),
+});
+
+module.exports = { discussionSchema, commentSchema };
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index e26d3330..a771c098 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,7 +19,7 @@ function App() {
         {!isFullscreen && <Navbar />}
         <ScrollNavigator />
 
-        <main className={`flex justify-center items-center ${isFullscreen ? "flex-1" : "flex-grow bg-gray-50 dark:bg-gray-800"}`}>
+        <main className={`flex w-full flex-col ${isFullscreen ? "flex-1" : "flex-grow bg-gray-50 dark:bg-gray-800"}`}>
           <Router />
         </main>
 
diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index b811e093..79c8f446 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -7,9 +7,8 @@ import Signup from "../pages/Signup/Signup.tsx";
 import Login from "../pages/Login/Login.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
 import Home from "../pages/Home/Home.tsx";
-import ProfilePage from "../pages/Profile/ProfilePage.tsx";
-import EditProfilePage from "../pages/Profile/EditProfilePage.tsx";
-import Activity from "../pages/Activity.tsx";
+import Activity from "../pages/Activity.tsx"; 
+import Community from "../pages/Community/Community.tsx";
 import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; // ✅ Updated import path to match your new folder structure
 import RepoCompare from "../pages/RepoCompare/RepoCompare.tsx";
 
@@ -27,7 +26,8 @@ const Router = () => {
       <Route path="/me" element={<ProfilePage />}></Route>
       <Route path="/profile/edit" element={<EditProfilePage />}></Route>
       <Route path="/activity" element={<Activity />} />
-      <Route path="/compare" element={<RepoCompare />} />
+      <Route path="/community" element={<Community />} />
+      <Route path="/discussions" element={<Community />} />
 
       {/* Privacy Policy page route */}
       <Route path="/privacy" element={<PrivacyPolicy />} />
diff --git a/src/components/AuthShell.tsx b/src/components/AuthShell.tsx
new file mode 100644
index 00000000..afe9cd3f
--- /dev/null
+++ b/src/components/AuthShell.tsx
@@ -0,0 +1,101 @@
+import React, { ReactNode } from "react";
+
+type Highlight = {
+  title: string;
+  description: string;
+};
+
+interface AuthShellProps {
+  mode: "dark" | "light";
+  badge: string;
+  title: string;
+  subtitle: string;
+  highlights: Highlight[];
+  children: ReactNode;
+  footer: ReactNode;
+}
+
+const AuthShell: React.FC<AuthShellProps> = ({ mode, badge, title, subtitle, highlights, children, footer }) => {
+  const surfaceClass =
+    mode === "dark"
+      ? "bg-slate-950 text-white"
+      : "bg-[radial-gradient(circle_at_top,_rgba(255,255,255,0.92),_rgba(226,232,240,0.92))] text-slate-900";
+
+  const panelClass =
+    mode === "dark"
+      ? "border-white/10 bg-white/10 text-white shadow-[0_24px_80px_rgba(15,23,42,0.45)]"
+      : "border-slate-200/80 bg-white/85 text-slate-900 shadow-[0_24px_80px_rgba(15,23,42,0.12)]";
+
+  return (
+    <div className={`relative min-h-screen overflow-hidden ${surfaceClass}`}>
+      <div className="absolute inset-0 pointer-events-none">
+        <div className={`absolute -left-24 top-12 h-72 w-72 rounded-full blur-3xl ${mode === "dark" ? "bg-cyan-500/15" : "bg-cyan-400/20"}`} />
+        <div className={`absolute right-0 top-0 h-96 w-96 rounded-full blur-3xl ${mode === "dark" ? "bg-fuchsia-500/20" : "bg-fuchsia-300/25"}`} />
+        <div className={`absolute bottom-0 left-1/4 h-80 w-80 rounded-full blur-3xl ${mode === "dark" ? "bg-indigo-500/15" : "bg-indigo-300/20"}`} />
+        <div
+          className={`absolute inset-0 opacity-30 ${mode === "dark" ? "bg-[linear-gradient(rgba(148,163,184,0.07)_1px,transparent_1px),linear-gradient(90deg,rgba(148,163,184,0.07)_1px,transparent_1px)]" : "bg-[linear-gradient(rgba(15,23,42,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.06)_1px,transparent_1px)]"}`}
+          style={{ backgroundSize: "64px 64px" }}
+        />
+      </div>
+
+      <div className="relative mx-auto grid min-h-screen w-full max-w-7xl lg:grid-cols-[1.05fr_0.95fr]">
+        <aside className="flex items-center px-6 py-10 sm:px-10 lg:px-12">
+          <div className="max-w-xl space-y-8">
+            <div className="inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/10 px-4 py-2 text-sm font-medium backdrop-blur-xl">
+              <span className="h-2.5 w-2.5 rounded-full bg-emerald-400" />
+              {badge}
+            </div>
+
+            <div className="space-y-4">
+              <div className="inline-flex h-16 w-16 items-center justify-center overflow-hidden rounded-2xl border border-white/10 bg-white shadow-2xl shadow-slate-950/20">
+                <img src="/crl-icon.png" alt="GitHubTracker logo" className="h-11 w-11 object-contain" />
+              </div>
+              <div>
+                <h1 className={`text-4xl font-semibold tracking-tight sm:text-5xl ${mode === "dark" ? "text-white" : "text-slate-950"}`}>
+                  {title}
+                </h1>
+                <p className={`mt-4 max-w-lg text-base leading-7 sm:text-lg ${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
+                  {subtitle}
+                </p>
+              </div>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              {highlights.map((highlight) => (
+                <div key={highlight.title} className={`rounded-2xl border p-4 backdrop-blur-xl ${panelClass}`}>
+                  <p className={`text-sm font-semibold uppercase tracking-[0.2em] ${mode === "light" ? "text-cyan-600/90" : "text-cyan-300/90"}`}>{highlight.title}</p>
+                  <p className={`mt-2 text-sm leading-6 ${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>{highlight.description}</p>
+                </div>
+              ))}
+            </div>
+
+            <div className={`rounded-[1.75rem] border p-5 backdrop-blur-xl ${panelClass}`}>
+              <p className={`text-sm font-semibold uppercase tracking-[0.2em] ${mode === "light" ? "text-fuchsia-600/90" : "text-fuchsia-300/90"}`}>Why it works</p>
+              <div className="mt-4 space-y-3">
+                {[
+                  "A focused form card keeps the primary action obvious.",
+                  "The left panel gives new users a quick reason to continue.",
+                  "Responsive spacing keeps the layout balanced on mobile and desktop.",
+                ].map((item) => (
+                  <div key={item} className="flex gap-3 text-sm leading-6">
+                    <span className="mt-2 h-2 w-2 shrink-0 rounded-full bg-emerald-400" />
+                    <p className={mode === "dark" ? "text-slate-300" : "text-slate-600"}>{item}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </aside>
+
+        <main className="flex items-center justify-center px-4 py-8 sm:px-6 lg:px-10">
+          <div className={`w-full max-w-lg rounded-[2rem] border p-6 sm:p-8 lg:p-10 ${panelClass}`}>
+            {children}
+            <div className="mt-8 border-t border-white/10 pt-6">{footer}</div>
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+export default AuthShell;
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index eaf85e29..c604798a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -72,26 +72,13 @@ const Navbar: React.FC = () => {
             Contributors
           </NavLink>
 
-          {!isLoading && !isAuthenticated && (
-            <>
-              <NavLink to="/login" className={navLinkStyles}>
-                Login
-              </NavLink>
-
-              <NavLink to="/signup" className={navLinkStyles}>
-                Signup
-              </NavLink>
-            </>
-          )}
+          <NavLink to="/community" className={navLinkStyles}>
+            Community
+          </NavLink>
 
-          {!isLoading && isAuthenticated && (
-            <button
-              onClick={handleLogout}
-              className="px-4 py-2 rounded-xl text-sm lg:text-base font-semibold transition-all duration-300 text-white bg-rose-500 hover:bg-rose-600 shadow-sm"
-            >
-              Logout
-            </button>
-          )}
+          <NavLink to="/login" className={navLinkStyles}>
+            Login
+          </NavLink>
 
           {user && <ProfileDropDown user={user} />}
           {/* Theme Toggle */}
@@ -157,8 +144,20 @@ const Navbar: React.FC = () => {
               Compare
             </NavLink>
 
-            <NavLink to="/contributors" className={navLinkStyles} onClick={closeMenu}>
-              Contributors
+            <NavLink
+              to="/community"
+              className={navLinkStyles}
+              onClick={closeMenu}
+            >
+              Community
+            </NavLink>
+
+            <NavLink
+              to="/login"
+              className={navLinkStyles}
+              onClick={closeMenu}
+            >
+              Login
             </NavLink>
             {!user && (
               <NavLink
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
new file mode 100644
index 00000000..fec2fd9b
--- /dev/null
+++ b/src/pages/Community/Community.tsx
@@ -0,0 +1,676 @@
+import { useCallback, useEffect, useMemo, useState, type FormEvent } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import { useDebounce } from "../../hooks/useDebounce";
+import { ThemeContext } from "../../context/ThemeContext";
+import { useContext } from "react";
+import type { ThemeContextType } from "../../context/ThemeContext";
+import {
+  ArrowUpRight,
+  Heart,
+  MessageSquare,
+  Plus,
+  Search,
+  ShieldCheck,
+  Sparkles,
+  Tag,
+  Trash2,
+  PencilLine,
+  X,
+  MessagesSquare,
+} from "lucide-react";
+
+const apiBase = import.meta.env.VITE_BACKEND_URL || (import.meta.env.DEV ? "http://localhost:5000" : window.location.origin);
+
+type DiscussionComment = {
+  id: string;
+  text: string;
+  author: { id: string; name: string };
+  createdAt: string;
+};
+
+type Discussion = {
+  id: string;
+  title: string;
+  body: string;
+  category: string;
+  tags: string[];
+  author: { id: string; name: string };
+  likesCount: number;
+  commentsCount: number;
+  likedByCurrentUser: boolean;
+  canEdit: boolean;
+  comments: DiscussionComment[];
+  createdAt: string;
+  updatedAt: string;
+};
+
+type DiscussionFormState = {
+  title: string;
+  body: string;
+  category: string;
+  tags: string;
+};
+
+const categoryPresets = ["All", "Open Source", "Ideas", "Help", "Showcase", "Tools", "Career", "Other"];
+
+const emptyFormState: DiscussionFormState = {
+  title: "",
+  body: "",
+  category: "Open Source",
+  tags: "",
+};
+
+const formatDate = (value: string) =>
+  new Intl.DateTimeFormat("en", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  }).format(new Date(value));
+
+const stripTags = (value: string) =>
+  value
+    .split(",")
+    .map((tag) => tag.trim().replace(/^#/, ""))
+    .filter(Boolean);
+
+const getApiErrorMessage = (error: unknown, fallback: string) => {
+  if (!axios.isAxiosError(error)) {
+    return fallback;
+  }
+
+  const firstValidationError = error.response?.data?.errors?.[0]?.message;
+  return firstValidationError || error.response?.data?.message || fallback;
+};
+
+export default function Community() {
+  const navigate = useNavigate();
+  const themeContext = useContext(ThemeContext) as ThemeContextType;
+  const { mode } = themeContext;
+
+  const [discussions, setDiscussions] = useState<Discussion[]>([]);
+  const [categories, setCategories] = useState<string[]>(categoryPresets.slice(1));
+  const [search, setSearch] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("All");
+  const [sortMode, setSortMode] = useState<"recent" | "trending">("trending");
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [isAuthenticated, setIsAuthenticated] = useState(true);
+  const [form, setForm] = useState<DiscussionFormState>(emptyFormState);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [commentDrafts, setCommentDrafts] = useState<Record<string, string>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const debouncedSearch = useDebounce(search, 300);
+
+  const filteredDiscussions = useMemo(() => discussions, [discussions]);
+
+  const trendingDiscussions = useMemo(
+    () => [...filteredDiscussions]
+      .sort((left, right) => {
+        const leftScore = left.likesCount * 2 + left.commentsCount;
+        const rightScore = right.likesCount * 2 + right.commentsCount;
+        return rightScore - leftScore;
+      })
+      .slice(0, 3),
+    [filteredDiscussions]
+  );
+
+  const loadDiscussions = useCallback(async () => {
+    setIsLoading(true);
+    setError("");
+
+    try {
+      const response = await axios.get(`${apiBase}/api/discussions`, {
+        params: {
+          search: debouncedSearch,
+          category: selectedCategory === "All" ? "" : selectedCategory,
+          sort: sortMode,
+        },
+        withCredentials: true,
+      });
+
+      setDiscussions(response.data.items || []);
+      setCategories(response.data.categories?.length ? response.data.categories : categoryPresets.slice(1));
+      setIsAuthenticated(!!response.data.isAuthenticated);
+    } catch (requestError) {
+      setError("Unable to load community discussions right now.");
+      if (axios.isAxiosError(requestError) && requestError.response?.status === 401) {
+        setIsAuthenticated(false);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [debouncedSearch, selectedCategory, sortMode]);
+
+  useEffect(() => {
+    void loadDiscussions();
+  }, [loadDiscussions]);
+
+  const resetForm = () => {
+    setForm(emptyFormState);
+    setEditingId(null);
+  };
+
+  const populateForEdit = (discussion: Discussion) => {
+    setForm({
+      title: discussion.title,
+      body: discussion.body,
+      category: discussion.category,
+      tags: discussion.tags.join(", "),
+    });
+    setEditingId(discussion.id);
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+    setMessage("");
+
+    const tags = stripTags(form.tags);
+    if (tags.length > 6) {
+      setMessage("Use up to 6 tags per discussion.");
+      setIsSubmitting(false);
+      return;
+    }
+
+    if (tags.some((tag) => tag.length > 30)) {
+      setMessage("Each tag must be 30 characters or fewer.");
+      setIsSubmitting(false);
+      return;
+    }
+
+    const payload = {
+      title: form.title.trim(),
+      body: form.body.trim(),
+      category: form.category.trim(),
+      tags,
+    };
+
+    try {
+      const response = editingId
+        ? await axios.put(`${apiBase}/api/discussions/${editingId}`, payload, { withCredentials: true })
+        : await axios.post(`${apiBase}/api/discussions`, payload, { withCredentials: true });
+
+      setMessage(response.data.message || "Saved successfully");
+      resetForm();
+      await loadDiscussions();
+    } catch (requestError) {
+      if (axios.isAxiosError(requestError) && requestError.response?.status === 401) {
+        setIsAuthenticated(false);
+        setMessage("Sign in to create and manage discussions.");
+        return;
+      }
+
+      setMessage(getApiErrorMessage(requestError, "Unable to save discussion."));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleDelete = async (discussionId: string) => {
+    try {
+      await axios.delete(`${apiBase}/api/discussions/${discussionId}`, { withCredentials: true });
+      await loadDiscussions();
+      setMessage("Discussion deleted.");
+    } catch (requestError) {
+      if (axios.isAxiosError(requestError) && requestError.response?.status === 401) {
+        setIsAuthenticated(false);
+        setMessage("Sign in to delete your discussion.");
+        return;
+      }
+      setMessage("Unable to delete discussion.");
+    }
+  };
+
+  const handleLike = async (discussionId: string) => {
+    try {
+      await axios.post(`${apiBase}/api/discussions/${discussionId}/likes`, {}, { withCredentials: true });
+      await loadDiscussions();
+    } catch (requestError) {
+      if (axios.isAxiosError(requestError) && requestError.response?.status === 401) {
+        setIsAuthenticated(false);
+        setMessage("Sign in to like discussions.");
+        return;
+      }
+      setMessage("Unable to update like state.");
+    }
+  };
+
+  const handleComment = async (discussionId: string) => {
+    const commentText = commentDrafts[discussionId]?.trim();
+    if (!commentText || commentText.length < 2) {
+      setMessage("Comment must be at least 2 characters long.");
+      return;
+    }
+
+    if (commentText.length > 1000) {
+      setMessage("Comment must be at most 1000 characters long.");
+      return;
+    }
+
+    try {
+      await axios.post(
+        `${apiBase}/api/discussions/${discussionId}/comments`,
+        { text: commentText },
+        { withCredentials: true }
+      );
+      setCommentDrafts((current) => ({ ...current, [discussionId]: "" }));
+      await loadDiscussions();
+    } catch (requestError) {
+      if (axios.isAxiosError(requestError) && requestError.response?.status === 401) {
+        setIsAuthenticated(false);
+        setMessage("Sign in to comment on discussions.");
+        return;
+      }
+      setMessage(getApiErrorMessage(requestError, "Unable to add comment."));
+    }
+  };
+
+  const heroTitle = mode === "dark" ? "text-white" : "text-slate-950";
+  const heroCopy = mode === "dark" ? "text-slate-300" : "text-slate-600";
+  const shell = mode === "dark" ? "bg-slate-950 text-white" : "bg-slate-50 text-slate-950";
+
+  return (
+    <div className={`w-full min-h-screen ${shell} relative overflow-hidden`}>
+      <div className="absolute inset-0 pointer-events-none">
+        <div className={`absolute -top-32 left-8 h-72 w-72 rounded-full blur-3xl ${mode === "dark" ? "bg-cyan-500/15" : "bg-cyan-300/25"}`} />
+        <div className={`absolute top-48 right-0 h-96 w-96 rounded-full blur-3xl ${mode === "dark" ? "bg-indigo-500/15" : "bg-indigo-300/25"}`} />
+      </div>
+
+      <div className="relative mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <div className="mb-8 flex flex-col gap-5 rounded-[2rem] border border-white/10 bg-white/70 p-6 shadow-2xl backdrop-blur-xl dark:bg-slate-900/70">
+          <div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
+            <div className="max-w-3xl">
+              <span className="inline-flex items-center gap-2 rounded-full border border-cyan-500/20 bg-cyan-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.24em] text-cyan-700 dark:text-cyan-300">
+                <Sparkles className="h-3.5 w-3.5" />
+                Community Discussions
+              </span>
+              <h1 className={`mt-4 text-4xl font-black tracking-tight sm:text-5xl ${heroTitle}`}>
+                Build ideas, ask questions, and ship together.
+              </h1>
+              <p className={`mt-4 max-w-2xl text-base leading-7 sm:text-lg ${heroCopy}`}>
+                A dedicated space for GitHub community conversations, product feedback, open-source questions,
+                and developer collaboration.
+              </p>
+            </div>
+
+            <div className="grid gap-3 sm:grid-cols-3 lg:min-w-[340px] lg:grid-cols-1 xl:grid-cols-3">
+              <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900">
+                <p className="text-xs uppercase tracking-[0.22em] text-slate-500">Posts</p>
+                <p className="mt-2 text-2xl font-bold">{discussions.length}</p>
+              </div>
+              <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900">
+                <p className="text-xs uppercase tracking-[0.22em] text-slate-500">Trending</p>
+                <p className="mt-2 text-2xl font-bold">{trendingDiscussions.length}</p>
+              </div>
+              <div className="rounded-2xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-900">
+                <p className="text-xs uppercase tracking-[0.22em] text-slate-500">Categories</p>
+                <p className="mt-2 text-2xl font-bold">{categories.length}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <button
+              type="button"
+              onClick={() => navigate("/login")}
+              className="inline-flex items-center gap-2 rounded-full bg-slate-950 px-4 py-2 text-sm font-semibold text-white transition hover:scale-[1.02] dark:bg-white dark:text-slate-950"
+            >
+              <ShieldCheck className="h-4 w-4" />
+              Sign in to post
+            </button>
+            <span className="text-sm text-slate-500 dark:text-slate-400">
+              Authenticated users can create, edit, delete, like, and comment.
+            </span>
+          </div>
+        </div>
+
+        <div className="grid gap-6 xl:grid-cols-[minmax(0,1.6fr)_minmax(320px,0.8fr)]">
+          <section className="space-y-6">
+            <div className="rounded-[2rem] border border-white/10 bg-white/80 p-5 shadow-xl backdrop-blur-xl dark:bg-slate-900/80">
+              <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+                <div>
+                  <h2 className="text-2xl font-bold">Discussion feed</h2>
+                  <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                    Search, filter, and follow the most active conversations.
+                  </p>
+                </div>
+
+                <div className="flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setSortMode("trending")}
+                    className={`rounded-full px-4 py-2 text-sm font-semibold transition ${sortMode === "trending" ? "bg-cyan-500 text-white" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300"}`}
+                  >
+                    Trending
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => setSortMode("recent")}
+                    className={`rounded-full px-4 py-2 text-sm font-semibold transition ${sortMode === "recent" ? "bg-cyan-500 text-white" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300"}`}
+                  >
+                    Recent
+                  </button>
+                </div>
+              </div>
+
+              <div className="mt-4 grid gap-3 lg:grid-cols-[minmax(0,1fr)_220px]">
+                <label className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-slate-600 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-300">
+                  <Search className="h-4 w-4" />
+                  <input
+                    value={search}
+                    onChange={(event) => setSearch(event.target.value)}
+                    placeholder="Search discussions, tags, or categories"
+                    aria-label="Search discussions, tags, or categories"
+                    className="w-full bg-transparent text-sm outline-none placeholder:text-slate-400"
+                  />
+                </label>
+
+                <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-800 dark:bg-slate-950">
+                  <select
+                    value={selectedCategory}
+                    onChange={(event) => setSelectedCategory(event.target.value)}
+                    aria-label="Filter by category"
+                    className="w-full bg-transparent text-sm font-medium outline-none"
+                  >
+                    {["All", ...categories.filter((category) => category !== "All")].map((category) => (
+                      <option key={category} value={category}>
+                        {category}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
+              <div className="mt-4 flex flex-wrap gap-2">
+                {categoryPresets.map((category) => (
+                  <button
+                    key={category}
+                    type="button"
+                    onClick={() => setSelectedCategory(category)}
+                    className={`rounded-full px-4 py-2 text-sm font-semibold transition ${selectedCategory === category ? "bg-slate-950 text-white dark:bg-white dark:text-slate-950" : "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300"}`}
+                  >
+                    {category}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {isAuthenticated ? null : (
+              <div className="rounded-3xl border border-amber-200 bg-amber-50 px-5 py-4 text-amber-900 dark:border-amber-400/30 dark:bg-amber-400/10 dark:text-amber-200">
+                You can read discussions without signing in, but posting, editing, commenting, and liking require a logged-in session.
+              </div>
+            )}
+
+            {error ? (
+              <div className="rounded-3xl border border-rose-200 bg-rose-50 px-5 py-4 text-rose-700 dark:border-rose-400/30 dark:bg-rose-400/10 dark:text-rose-200">
+                {error}
+              </div>
+            ) : null}
+
+            {message ? (
+              <div className="rounded-3xl border border-cyan-200 bg-cyan-50 px-5 py-4 text-cyan-900 dark:border-cyan-400/30 dark:bg-cyan-400/10 dark:text-cyan-100">
+                {message}
+              </div>
+            ) : null}
+
+            <form onSubmit={handleSubmit} className="rounded-[2rem] border border-white/10 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:bg-slate-900/90">
+              <div className="flex items-center justify-between gap-4">
+                <div>
+                  <h3 className="text-xl font-bold">{editingId ? "Edit discussion" : "Create a discussion"}</h3>
+                  <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+                    Share ideas, ask questions, or start a thread around a repository or technology.
+                  </p>
+                </div>
+
+                {editingId ? (
+                  <button
+                    type="button"
+                    onClick={resetForm}
+                    className="inline-flex items-center gap-2 rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-slate-300 hover:text-slate-900 dark:border-slate-700 dark:text-slate-300 dark:hover:text-white"
+                  >
+                    <X className="h-4 w-4" />
+                    Cancel
+                  </button>
+                ) : null}
+              </div>
+
+              <div className="mt-5 grid gap-4">
+                <input
+                  required
+                  minLength={4}
+                  maxLength={140}
+                  value={form.title}
+                  onChange={(event) => setForm((current) => ({ ...current, title: event.target.value }))}
+                  placeholder="Discussion title"
+                  className="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-cyan-500 dark:border-slate-800 dark:bg-slate-950"
+                />
+
+                <textarea
+                  required
+                  rows={6}
+                  minLength={20}
+                  maxLength={4000}
+                  value={form.body}
+                  onChange={(event) => setForm((current) => ({ ...current, body: event.target.value }))}
+                  placeholder="Describe your idea, question, or repository topic..."
+                  className="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-cyan-500 dark:border-slate-800 dark:bg-slate-950"
+                />
+
+                <div className="grid gap-4 lg:grid-cols-[1fr_1.2fr]">
+                  <input
+                    required
+                    minLength={2}
+                    maxLength={60}
+                    value={form.category}
+                    onChange={(event) => setForm((current) => ({ ...current, category: event.target.value }))}
+                    placeholder="Category"
+                    className="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-cyan-500 dark:border-slate-800 dark:bg-slate-950"
+                  />
+
+                  <input
+                    value={form.tags}
+                    onChange={(event) => setForm((current) => ({ ...current, tags: event.target.value }))}
+                    placeholder="Tags, separated by commas"
+                    className="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm outline-none transition focus:border-cyan-500 dark:border-slate-800 dark:bg-slate-950"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isSubmitting}
+                  className="inline-flex items-center justify-center gap-2 rounded-2xl bg-slate-950 px-5 py-3 text-sm font-semibold text-white transition hover:scale-[1.01] disabled:cursor-not-allowed disabled:opacity-60 dark:bg-white dark:text-slate-950"
+                >
+                  <Plus className="h-4 w-4" />
+                  {isSubmitting ? "Saving..." : editingId ? "Update discussion" : "Publish discussion"}
+                </button>
+              </div>
+            </form>
+
+            <div className="space-y-5">
+              {isLoading ? (
+                <div className="rounded-[2rem] border border-white/10 bg-white/90 p-6 text-center text-slate-500 shadow-xl dark:bg-slate-900/90 dark:text-slate-400">
+                  Loading community feed...
+                </div>
+              ) : discussions.length === 0 ? (
+                <div className="rounded-[2rem] border border-dashed border-slate-300 bg-white/70 p-8 text-center text-slate-500 shadow-xl dark:border-slate-700 dark:bg-slate-900/70 dark:text-slate-400">
+                  No discussions found. Start the first thread in this category.
+                </div>
+              ) : (
+                discussions.map((discussion) => (
+                  <article
+                    key={discussion.id}
+                    className="rounded-[2rem] border border-white/10 bg-white/90 p-6 shadow-2xl backdrop-blur-xl transition hover:-translate-y-1 hover:shadow-cyan-500/10 dark:bg-slate-900/90"
+                  >
+                    <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                      <div className="space-y-3">
+                        <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.22em] text-slate-500">
+                          <span className="inline-flex items-center gap-2 rounded-full bg-cyan-500/10 px-3 py-1 text-cyan-700 dark:text-cyan-300">
+                            <Tag className="h-3.5 w-3.5" />
+                            {discussion.category}
+                          </span>
+                          <span>{discussion.author.name}</span>
+                          <span>•</span>
+                          <span>{formatDate(discussion.createdAt)}</span>
+                        </div>
+
+                        <h3 className="text-2xl font-bold leading-tight">{discussion.title}</h3>
+                        <p className="max-w-4xl whitespace-pre-line text-sm leading-7 text-slate-600 dark:text-slate-300">
+                          {discussion.body}
+                        </p>
+
+                        <div className="flex flex-wrap gap-2">
+                          {discussion.tags.map((tag) => (
+                            <span
+                              key={tag}
+                              className="inline-flex items-center gap-2 rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+                            >
+                              #{tag}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="flex flex-wrap items-center gap-2 lg:flex-col lg:items-end">
+                        <button
+                          type="button"
+                          onClick={() => void handleLike(discussion.id)}
+                          className={`inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-semibold transition ${discussion.likedByCurrentUser ? "bg-rose-500 text-white" : "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200"}`}
+                        >
+                          <Heart className={`h-4 w-4 ${discussion.likedByCurrentUser ? "fill-current" : ""}`} />
+                          {discussion.likesCount}
+                        </button>
+
+                        <div className="inline-flex items-center gap-2 rounded-full bg-slate-100 px-4 py-2 text-sm font-semibold text-slate-700 dark:bg-slate-800 dark:text-slate-200">
+                          <MessageSquare className="h-4 w-4" />
+                          {discussion.commentsCount}
+                        </div>
+
+                        {discussion.canEdit ? (
+                          <div className="flex items-center gap-2">
+                            <button
+                              type="button"
+                              onClick={() => populateForEdit(discussion)}
+                              className="inline-flex items-center gap-2 rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600 transition hover:border-cyan-400 hover:text-cyan-700 dark:border-slate-700 dark:text-slate-300"
+                            >
+                              <PencilLine className="h-4 w-4" />
+                              Edit
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => void handleDelete(discussion.id)}
+                              className="inline-flex items-center gap-2 rounded-full border border-rose-200 px-4 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-500 hover:text-white dark:border-rose-400/40 dark:text-rose-300"
+                            >
+                              <Trash2 className="h-4 w-4" />
+                              Delete
+                            </button>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+
+                    <div className="mt-6 rounded-3xl border border-slate-200 bg-slate-50 p-4 dark:border-slate-800 dark:bg-slate-950">
+                      <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 dark:text-slate-300">
+                        <MessagesSquare className="h-4 w-4" />
+                        Comments
+                      </div>
+
+                      <div className="mt-4 space-y-3">
+                        {discussion.comments.length === 0 ? (
+                          <p className="text-sm text-slate-500 dark:text-slate-400">No comments yet. Start the conversation.</p>
+                        ) : (
+                          discussion.comments.slice(0, 3).map((comment) => (
+                            <div key={comment.id} className="rounded-2xl bg-white px-4 py-3 text-sm shadow-sm dark:bg-slate-900">
+                              <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
+                                <span>{comment.author.name}</span>
+                                <span>•</span>
+                                <span>{formatDate(comment.createdAt)}</span>
+                              </div>
+                              <p className="mt-2 leading-6 text-slate-700 dark:text-slate-200">{comment.text}</p>
+                            </div>
+                          ))
+                        )}
+                      </div>
+
+                      <div className="mt-4 flex flex-col gap-3 sm:flex-row">
+                        <input
+                          minLength={2}
+                          maxLength={1000}
+                          value={commentDrafts[discussion.id] || ""}
+                          onChange={(event) =>
+                            setCommentDrafts((current) => ({
+                              ...current,
+                              [discussion.id]: event.target.value,
+                            }))
+                          }
+                          placeholder="Write a reply..."
+                          className="flex-1 rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm outline-none transition focus:border-cyan-500 dark:border-slate-800 dark:bg-slate-900"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => void handleComment(discussion.id)}
+                          className="inline-flex items-center justify-center gap-2 rounded-2xl bg-cyan-500 px-4 py-3 text-sm font-semibold text-white transition hover:bg-cyan-600"
+                        >
+                          <ArrowUpRight className="h-4 w-4" />
+                          Reply
+                        </button>
+                      </div>
+                    </div>
+                  </article>
+                ))
+              )}
+            </div>
+          </section>
+
+          <aside className="space-y-6">
+            <div className="rounded-[2rem] border border-white/10 bg-white/90 p-5 shadow-2xl backdrop-blur-xl dark:bg-slate-900/90">
+              <div className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.22em] text-slate-500">
+                <Sparkles className="h-4 w-4 text-cyan-500" />
+                Trending
+              </div>
+              <div className="mt-4 space-y-4">
+                {trendingDiscussions.length === 0 ? (
+                  <p className="text-sm text-slate-500 dark:text-slate-400">Trending discussions will show up here.</p>
+                ) : (
+                  trendingDiscussions.map((discussion) => (
+                    <div
+                      key={discussion.id}
+                      className="rounded-2xl border border-slate-200 bg-slate-50 p-4 transition hover:border-cyan-400 hover:bg-cyan-50 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-900"
+                    >
+                      <p className="text-sm font-bold leading-6">{discussion.title}</p>
+                      <div className="mt-2 flex items-center justify-between text-xs text-slate-500">
+                        <span>{discussion.category}</span>
+                        <span>{discussion.likesCount} likes</span>
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+
+            <div className="rounded-[2rem] border border-white/10 bg-white/90 p-5 shadow-2xl backdrop-blur-xl dark:bg-slate-900/90">
+              <div className="flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.22em] text-slate-500">
+                <MessageSquare className="h-4 w-4 text-cyan-500" />
+                Quick stats
+              </div>
+              <div className="mt-4 grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
+                <div className="rounded-2xl bg-slate-50 p-4 dark:bg-slate-950">
+                  <p className="text-xs uppercase tracking-[0.22em] text-slate-400">Total posts</p>
+                  <p className="mt-2 text-2xl font-bold">{discussions.length}</p>
+                </div>
+                <div className="rounded-2xl bg-slate-50 p-4 dark:bg-slate-950">
+                  <p className="text-xs uppercase tracking-[0.22em] text-slate-400">Total comments</p>
+                  <p className="mt-2 text-2xl font-bold">
+                    {discussions.reduce((count, discussion) => count + discussion.comments.length, 0)}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index 03759ab4..c5c9f80a 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -4,11 +4,10 @@ import Features from "../../components/Features";
 
 function Home() {
   return (
-    <div className="">
+    <div className="flex flex-col min-h-screen w-full">
         <Hero />
         <Features />
         <HowItWorks />
-
     </div>
   )
 }
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 858d0f45..6e50088b 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -1,11 +1,13 @@
 import React, { useState, ChangeEvent, FormEvent, useContext } from "react";
 import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
+import { ArrowRight, Lock, Mail, ShieldCheck, Sparkles } from "lucide-react";
+import AuthShell from "../../components/AuthShell";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 import { AuthContext } from "../../context/AuthContext";
 
-const backendUrl = import.meta.env.VITE_BACKEND_URL || ""; // Fallback to an empty string if VITE_BACKEND_URL is undefined to ensure relative routing
+const backendUrl = import.meta.env.VITE_BACKEND_URL || (import.meta.env.DEV ? "http://localhost:5000" : window.location.origin);
 
 interface LoginFormData {
   email: string;
@@ -22,6 +24,17 @@ const Login: React.FC = () => {
   const authContext = useContext(AuthContext);
   const { mode } = themeContext;
 
+  const highlights = [
+    {
+      title: "Fast access",
+      description: "Jump back into your tracker, dashboards, and community activity in one step.",
+    },
+    {
+      title: "Secure session",
+      description: "Signed-in sessions use the same backend cookie flow your app already relies on.",
+    },
+  ];
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData({ ...formData, [name]: value });
@@ -32,9 +45,7 @@ const Login: React.FC = () => {
     setIsLoading(true);
 
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/login`, formData, {
-        withCredentials: true
-      });
+      const response = await axios.post(`${backendUrl}/api/auth/login`, formData, { withCredentials: true });
       setMessage(response.data.message);
 
       if (response.data.message === 'Login successful') {
@@ -53,113 +64,98 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div
-      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${mode === "dark"
-        ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
-        : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
-        }`}
+    <AuthShell
+      mode={mode}
+      badge="Welcome back"
+      title="Sign in to GitHubTracker"
+      subtitle="Pick up where you left off and keep tracking the people, repositories, and discussions that matter to you."
+      highlights={highlights}
+      footer={
+        <p className={`text-center text-sm ${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
+          Don't have an account?
+          <Link to="/signup" className="ml-1 font-semibold text-cyan-300 transition-colors hover:text-cyan-200">
+            Create one now
+          </Link>
+        </p>
+      }
     >
-      {/* Animated background elements */}
-      <div className="absolute inset-0">
-        <div className={`absolute -top-40 -right-40 w-96 h-96 ${mode === "dark" ? "bg-purple-500" : "bg-purple-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute -bottom-40 -left-40 w-96 h-96 ${mode === "dark" ? "bg-blue-500" : "bg-blue-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute top-40 left-40 w-96 h-96 ${mode === "dark" ? "bg-pink-500" : "bg-pink-300"} rounded-full blur-3xl opacity-30 animate-pulse`} />
-        <div className={`absolute top-1/2 right-1/4 w-64 h-64 ${mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"} rounded-full blur-2xl opacity-20 animate-pulse delay-1000`} />
-      </div>
-
-      <div className="relative w-full max-w-md px-4 sm:px-6">
-        {/* Branding */}
-        <div className="text-center mb-10">
-          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-            <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+      <div className="space-y-8">
+        <div className="space-y-3 text-center sm:text-left">
+          <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.22em] text-cyan-300/90">
+            <Sparkles className="h-3.5 w-3.5" />
+            Secure login
+          </div>
+          <div>
+            <h2 className={`text-3xl font-semibold tracking-tight ${mode === "dark" ? "text-white" : "text-slate-950"}`}>
+              Welcome back
+            </h2>
+            <p className={`mt-2 text-sm leading-6 ${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
+              Enter your credentials to continue to your dashboard.
+            </p>
           </div>
-
-          <h1 className={`text-4xl font-bold bg-clip-text text-transparent mb-2 ${mode === "dark"
-            ? "bg-gradient-to-r from-purple-300 via-pink-300 to-indigo-300"
-            : "bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600"
-            }`}>
-            GitHubTracker
-          </h1>
-          <p className={`${mode === "dark" ? "text-slate-300" : "text-gray-700"} text-lg font-medium`}>
-            Track your GitHub journey
-          </p>
         </div>
 
-        {/* Form Card */}
-        <div className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${mode === "dark" ? "bg-white/10 backdrop-blur-xl border-white/20 text-white" : "bg-white border-gray-200 text-black"}`}>
-          <h2 className={`text-2xl font-bold text-center mb-8 ${mode === "dark" ? "text-white" : "text-gray-800"}`}>
-            Welcome Back
-          </h2>
-
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div className="relative">
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <label className="block space-y-2">
+            <span className={`text-sm font-medium ${mode === "dark" ? "text-slate-200" : "text-slate-700"}`}>Email address</span>
+            <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 transition focus-within:ring-2 ${mode === "dark" ? "border-white/10 bg-white/5 focus-within:ring-cyan-400/50" : "border-slate-200 bg-slate-50 focus-within:ring-cyan-500/30"}`}>
+              <Mail className={`h-5 w-5 shrink-0 ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`} />
               <input
                 type="email"
                 name="email"
-                placeholder="Enter your email"
+                placeholder="name@example.com"
                 value={formData.email}
                 onChange={handleChange}
                 autoComplete="username"
                 required
-                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${mode === "dark"
-                  ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
-                  : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
-                  }`}
+                className={`w-full bg-transparent text-sm outline-none ${mode === "dark" ? "placeholder-slate-500 text-white" : "placeholder-slate-400 text-slate-900"}`}
               />
             </div>
+          </label>
 
-            <div className="relative">
+          <label className="block space-y-2">
+            <span className={`text-sm font-medium ${mode === "dark" ? "text-slate-200" : "text-slate-700"}`}>Password</span>
+            <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 transition focus-within:ring-2 ${mode === "dark" ? "border-white/10 bg-white/5 focus-within:ring-cyan-400/50" : "border-slate-200 bg-slate-50 focus-within:ring-cyan-500/30"}`}>
+              <Lock className={`h-5 w-5 shrink-0 ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`} />
               <input
                 type="password"
                 name="password"
                 autoComplete="current-password"
-                placeholder="Enter your password"
+                placeholder="••••••••"
                 value={formData.password}
                 onChange={handleChange}
                 required
-                className={`w-full pl-4 pr-4 py-4 rounded-2xl focus:outline-none transition-all ${mode === "dark"
-                  ? "bg-white/5 border border-white/10 text-white placeholder-slate-400 focus:ring-2 focus:ring-purple-500"
-                  : "bg-gray-100 border border-gray-300 text-gray-900 placeholder-gray-500 focus:ring-2 focus:ring-purple-400"
-                  }`}
+                className={`w-full bg-transparent text-sm outline-none ${mode === "dark" ? "placeholder-slate-500 text-white" : "placeholder-slate-400 text-slate-900"}`}
               />
             </div>
-
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isLoading ? "Signing in..." : "Sign In"}
-            </button>
-          </form>
-
-          {/* Message */}
-          {message && (
-            <div className={`mt-6 p-4 rounded-2xl text-center text-sm font-medium ${message === "Login successful"
-              ? "bg-green-500/20 text-green-300 border border-green-500/30"
-              : "bg-red-500/20 text-red-300 border border-red-500/30"
-              }`}>
-              {message}
+          </label>
+
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-600 px-6 py-4 text-sm font-semibold text-white shadow-lg shadow-cyan-500/20 transition duration-300 hover:-translate-y-0.5 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {isLoading ? "Signing in..." : "Sign in"}
+            {!isLoading && <ArrowRight className="h-4 w-4" />}
+          </button>
+        </form>
+
+        {message && (
+          <div
+            className={`rounded-2xl border px-4 py-3 text-sm ${
+              message === "Login successful"
+                ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300"
+                : "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-300"
+            }`}
+          >
+            <div className="flex items-start gap-2">
+              <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0" />
+              <p>{message}</p>
             </div>
-          )}
-
-          {/* Footer Text */}
-          <div className="text-center mt-8 pb-8">
-            <p className={`${mode === "dark" ? "text-slate-500" : "text-gray-600"} text-sm`}>
-              Don't have an account?
-              <Link
-                to="/signup"
-                className="ml-1 text-purple-400 hover:text-purple-300 transition-colors duration-300"
-              >
-                Sign up here
-              </Link>
-            </p>
           </div>
-        </div>
+        )}
       </div>
-
-      <div className={`${mode === "dark" ? "from-slate-900" : "from-slate-100"} absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`} />
-    </div>
+    </AuthShell>
   );
 };
 
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 037ea379..02af028e 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -1,12 +1,12 @@
 import React, { useState, useContext } from "react";
 import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
-import { motion } from "framer-motion";
-import { User, Mail, Lock, Eye, EyeOff } from "lucide-react";
+import { ArrowRight, Eye, EyeOff, Lock, Mail, ShieldCheck, Sparkles, User } from "lucide-react";
+import AuthShell from "../../components/AuthShell";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
-const backendUrl = import.meta.env.VITE_BACKEND_URL || ""; // Fallback to an empty string if VITE_BACKEND_URL is undefined to ensure relative routing
+const backendUrl = import.meta.env.VITE_BACKEND_URL || (import.meta.env.DEV ? "http://localhost:5000" : window.location.origin);
 
 interface SignUpFormData {
   username: string;
@@ -32,9 +32,21 @@ const SignUp: React.FC = () => {
   const themeContext = useContext(ThemeContext) as ThemeContextType;
   const { mode } = themeContext;
 
+  const highlights = [
+    {
+      title: "Quick setup",
+      description: "Create a profile in minutes and start organizing your GitHub activity right away.",
+    },
+    {
+      title: "Built-in validation",
+      description: "Clear feedback helps users enter a valid name, email, and stronger password from the start.",
+    },
+  ];
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    setFormData({ ...formData, [name]: value });
+    setFormData((previous) => ({ ...previous, [name]: value }));
+
     let errorMessage = "";
     if (name === "username") {
       if (!value.trim()) {
@@ -43,6 +55,7 @@ const SignUp: React.FC = () => {
         errorMessage = "Only letters are allowed";
       }
     }
+
     if (name === "email") {
       if (!value.trim()) {
         errorMessage = "Email is required";
@@ -50,6 +63,7 @@ const SignUp: React.FC = () => {
         errorMessage = "Enter a valid email";
       }
     }
+
     if (name === "password") {
       if (!value.trim()) {
         errorMessage = "Password is required";
@@ -57,46 +71,47 @@ const SignUp: React.FC = () => {
         errorMessage = "Password must contain uppercase, lowercase, number, and special character";
       }
     }
-    setErrors((prev) => ({ ...prev, [name]: errorMessage }));
+
+    setErrors((previous) => ({ ...previous, [name]: errorMessage }));
   };
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+
     const usernameError = !formData.username.trim()
       ? "Username is required"
-      : !/^[a-zA-Z0-9_]+$/.test(formData.username)
-        ? "Username can only contain letters, numbers, and underscores"
+      : !/^[A-Za-z\s]+$/.test(formData.username)
+        ? "Only letters are allowed"
         : "";
     const emailError = !formData.email.trim()
       ? "Email is required"
       : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())
-      ? "Enter a valid email"
-      : "";
+        ? "Enter a valid email"
+        : "";
     const passwordError = !formData.password.trim()
       ? "Password is required"
-      : !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/.test(formData.password)
-        ? "Password must contain uppercase, lowercase, number, and special character"
+      : !/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/.test(formData.password)
+        ? "Password must be 8+ characters with letters and numbers"
         : "";
+
     if (usernameError || emailError || passwordError) {
       setErrors({ username: usernameError, email: emailError, password: passwordError });
       return;
     }
+
     setIsLoading(true);
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/signup`, formData, { 
-        withCredentials: true 
-      });
-      setMessage(response.data.message); // Show success message from backend
+      const response = await axios.post(`${backendUrl}/api/auth/signup`, formData, { withCredentials: true });
+      setMessage(response.data.message);
 
-      // Navigate to login page after successful signup
-      if (response.data.message === 'User created successfully') {
+      if (response.data.message === "User created successfully") {
         navigate("/login");
       }
-    } catch (error) {
+    } catch (error: unknown) {
       if (axios.isAxiosError(error)) {
         setMessage(error.response?.data?.message || "Something went wrong. Please try again.");
       } else {
-        setMessage("An unexpected error occurred. Please try again.");
+        setMessage("Something went wrong. Please try again.");
       }
     } finally {
       setIsLoading(false);
@@ -104,142 +119,124 @@ const SignUp: React.FC = () => {
   };
 
   return (
-    <div
-      className={`min-h-screen h-full w-full flex items-center justify-center relative overflow-hidden ${
-        mode === "dark"
-          ? "bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"
-          : "bg-gradient-to-br from-slate-100 via-purple-100 to-slate-100"
-      }`}
+    <AuthShell
+      mode={mode}
+      badge="Start here"
+      title="Create your GitHubTracker account"
+      subtitle="Set up your profile once, then use the tracker, discussions, and contributor tools with a consistent sign-in."
+      highlights={highlights}
+      footer={
+        <p className={`text-center text-sm ${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
+          Already have an account?
+          <Link to="/login" className="ml-1 font-semibold text-cyan-300 transition-colors hover:text-cyan-200">
+            Sign in instead
+          </Link>
+        </p>
+      }
     >
-      <div className="absolute inset-0">
-        <div
-          className={`absolute -top-40 -right-40 w-96 h-96 ${
-            mode === "dark" ? "bg-purple-500" : "bg-purple-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
-        />
-        <div
-          className={`absolute -bottom-40 -left-40 w-96 h-96 ${
-            mode === "dark" ? "bg-blue-500" : "bg-blue-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
-        />
-        <div
-          className={`absolute top-40 left-40 w-96 h-96 ${
-            mode === "dark" ? "bg-pink-500" : "bg-pink-300"
-          } rounded-full blur-3xl opacity-30 animate-pulse`}
-        />
-        <div
-          className={`absolute top-1/2 right-1/4 w-64 h-64 ${
-            mode === "dark" ? "bg-indigo-500" : "bg-indigo-300"
-          } rounded-full blur-2xl opacity-20 animate-pulse delay-1000`}
-        />
-      </div>
-
-      <div className="relative w-full max-w-md px-4 sm:px-6">
-        <motion.div
-          initial={{ opacity: 0, y: -20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="text-center mb-10"
-        >
-          <div className="inline-flex items-center justify-center w-20 h-20 bg-white rounded-3xl mb-6 shadow-2xl transform hover:scale-105 transition-transform duration-300 overflow-hidden">
-            <img src="/crl-icon.png" alt="Logo" className="w-14 h-14 object-contain" />
+      <div className="space-y-8">
+        <div className="space-y-3 text-center sm:text-left">
+          <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.22em] text-cyan-300/90">
+            <Sparkles className="h-3.5 w-3.5" />
+            New account
           </div>
-          <h1 className={`text-4xl font-bold mb-2 ${mode === "dark" ? "text-white" : "text-black"}`}>GitHubTracker</h1>
-          <p className={`text-lg font-medium ${mode === "dark" ? "text-slate-300" : "text-gray-700"}`}>Join your GitHub journey</p>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6, delay: 0.2 }}
-          className={`rounded-3xl p-6 sm:p-10 shadow-2xl border ${
-            mode === "dark"
-              ? "bg-white/10 backdrop-blur-xl border-white/20 text-white"
-              : "bg-white border-gray-200 text-black"
-          }`}
-        >
-          
-          <h2
-            className={`text-2xl font-bold text-center mb-8 ${
-              mode === "dark" ? "text-white" : "text-gray-800"
-            }`}
-          >
-            Create Account
-          </h2>
-
-          <form onSubmit={handleSubmit} className="space-y-6">
-            <div>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                  <User className="h-5 w-5 text-gray-400" />
-                </div>
-                <input type="text" name="username" placeholder="Enter your username" value={formData.username} onChange={handleChange} required
-                  className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
-                />
-              </div>
-              {errors.username && <p className="text-red-500 text-sm mt-2">{errors.username}</p>}
+          <div>
+            <h2 className={`text-3xl font-semibold tracking-tight ${mode === "dark" ? "text-white" : "text-slate-950"}`}>
+              Build your profile
+            </h2>
+            <p className={`mt-2 text-sm leading-6 ${mode === "dark" ? "text-slate-300" : "text-slate-600"}`}>
+              Use a simple, guided signup flow with instant feedback while you type.
+            </p>
+          </div>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-5">
+          <label className="block space-y-2">
+            <span className={`text-sm font-medium ${mode === "dark" ? "text-slate-200" : "text-slate-700"}`}>Username</span>
+            <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 transition focus-within:ring-2 ${mode === "dark" ? "border-white/10 bg-white/5 focus-within:ring-cyan-400/50" : "border-slate-200 bg-slate-50 focus-within:ring-cyan-500/30"}`}>
+              <User className={`h-5 w-5 shrink-0 ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`} />
+              <input
+                type="text"
+                name="username"
+                placeholder="Your display name"
+                value={formData.username}
+                onChange={handleChange}
+                required
+                className={`w-full bg-transparent text-sm outline-none ${mode === "dark" ? "text-white placeholder-slate-500" : "text-slate-900 placeholder-slate-400"}`}
+              />
             </div>
-
-            <div>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                  <Mail className="h-5 w-5 text-gray-400" />
-                </div>
-                <input type="email" name="email" placeholder="Enter your email" value={formData.email} onChange={handleChange} required
-                  className={`w-full pl-12 pr-4 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
-                />
-              </div>
-              {errors.email && <p className="text-red-500 text-sm mt-2">{errors.email}</p>}
+            {errors.username && <p className="text-sm text-rose-600 dark:text-rose-300">{errors.username}</p>}
+          </label>
+
+          <label className="block space-y-2">
+            <span className={`text-sm font-medium ${mode === "dark" ? "text-slate-200" : "text-slate-700"}`}>Email address</span>
+            <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 transition focus-within:ring-2 ${mode === "dark" ? "border-white/10 bg-white/5 focus-within:ring-cyan-400/50" : "border-slate-200 bg-slate-50 focus-within:ring-cyan-500/30"}`}>
+              <Mail className={`h-5 w-5 shrink-0 ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`} />
+              <input
+                type="email"
+                name="email"
+                placeholder="name@example.com"
+                value={formData.email}
+                onChange={handleChange}
+                required
+                className={`w-full bg-transparent text-sm outline-none ${mode === "dark" ? "text-white placeholder-slate-500" : "text-slate-900 placeholder-slate-400"}`}
+              />
             </div>
-
-            <div>
-              <div className="relative">
-                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-                  <Lock className="h-5 w-5 text-gray-400" />
-                </div>
-                <input type={showPassword ? "text" : "password"} name="password" placeholder="Enter your password" value={formData.password} onChange={handleChange} required
-                  className={`w-full pl-12 pr-12 py-4 rounded-2xl border focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent transition-all duration-300 ${mode === "dark" ? "bg-white/10 border-white/20 text-white placeholder-gray-400" : "bg-gray-100 border-gray-300 text-black placeholder-gray-400"}`}
-                />
-                <button type="button" onClick={() => setShowPassword(!showPassword)} aria-label={showPassword ? "Hide password" : "Show password"} aria-pressed={showPassword}
-                  className={`absolute inset-y-0 right-0 pr-4 flex items-center transition-colors duration-200 ${mode === "dark" ? "text-slate-400 hover:text-white" : "text-gray-500 hover:text-gray-800"}`}>
-                  {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
-                </button>
-              </div>
-              {errors.password && <p className="text-red-500 text-sm mt-2">{errors.password}</p>}
+            {errors.email && <p className="text-sm text-rose-600 dark:text-rose-300">{errors.email}</p>}
+          </label>
+
+          <label className="block space-y-2">
+            <span className={`text-sm font-medium ${mode === "dark" ? "text-slate-200" : "text-slate-700"}`}>Password</span>
+            <div className={`flex items-center gap-3 rounded-2xl border px-4 py-3 transition focus-within:ring-2 ${mode === "dark" ? "border-white/10 bg-white/5 focus-within:ring-cyan-400/50" : "border-slate-200 bg-slate-50 focus-within:ring-cyan-500/30"}`}>
+              <Lock className={`h-5 w-5 shrink-0 ${mode === "dark" ? "text-slate-400" : "text-slate-500"}`} />
+              <input
+                type={showPassword ? "text" : "password"}
+                name="password"
+                placeholder="At least 8 characters"
+                value={formData.password}
+                onChange={handleChange}
+                required
+                className={`w-full bg-transparent text-sm outline-none ${mode === "dark" ? "text-white placeholder-slate-500" : "text-slate-900 placeholder-slate-400"}`}
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((previous) => !previous)}
+                aria-label={showPassword ? "Hide password" : "Show password"}
+                aria-pressed={showPassword}
+                className={`shrink-0 transition-colors ${mode === "dark" ? "text-slate-400 hover:text-white" : "text-slate-500 hover:text-slate-900"}`}
+              >
+                {showPassword ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+              </button>
             </div>
+            {errors.password && <p className="text-sm text-rose-600 dark:text-rose-300">{errors.password}</p>}
+          </label>
 
-            <button
-              type="submit"
-              disabled={isLoading}
-              className="w-full bg-gradient-to-r from-purple-600 via-pink-600 to-indigo-600 text-white py-4 px-6 rounded-2xl font-semibold focus:ring-4 focus:ring-purple-500/50 transition-all duration-300 hover:scale-[1.02] hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isLoading ? "Creating account..." : "Create Account"}
-            </button>
-          </form>
-
-          {message && (
-            <div className={`text-center mt-6 p-3 rounded-xl ${message.includes("successfully") ? "text-green-600 bg-green-100" : "text-red-600 bg-red-100"}`}>
-              {message}
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="inline-flex w-full items-center justify-center gap-2 rounded-2xl bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-600 px-6 py-4 text-sm font-semibold text-white shadow-lg shadow-cyan-500/20 transition duration-300 hover:-translate-y-0.5 hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            {isLoading ? "Creating account..." : "Create account"}
+            {!isLoading && <ArrowRight className="h-4 w-4" />}
+          </button>
+        </form>
+
+        {message && (
+          <div
+            className={`rounded-2xl border px-4 py-3 text-sm ${
+              message.includes("successfully")
+                ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-300"
+                : "border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-300"
+            }`}
+          >
+            <div className="flex items-start gap-2">
+              <ShieldCheck className="mt-0.5 h-4 w-4 shrink-0" />
+              <p>{message}</p>
             </div>
-          )}
-
-          <div className="text-center mt-8">
-            <p className={mode === "dark" ? "text-gray-300" : "text-gray-600"}>
-              Already have an account?{" "}
-              <Link to="/login" className={`font-medium hover:underline transition-colors duration-300 ${mode === "dark" ? "text-white" : "text-black"}`}>
-                Sign in here
-              </Link>
-            </p>
           </div>
-        </motion.div>
+        )}
       </div>
-
-      <div
-        className={`${
-          mode === "dark" ? "from-slate-900" : "from-slate-100"
-        } absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t to-transparent`}
-      />
-    </div>
+    </AuthShell>
   );
 };