diff --git a/backend/data/discussions.json b/backend/data/discussions.json
new file mode 100644
index 00000000..c3f3e241
--- /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": [
+        "c8cf4cfd-145c-4950-8392-5f40f2a9ccde"
+      ],
+      "comments": [
+        {
+          "id": "d1b1bcad-6989-49ff-a587-667f8426198e",
+          "text": "Yes",
+          "authorId": "c8cf4cfd-145c-4950-8392-5f40f2a9ccde",
+          "authorName": "arpit",
+          "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..4d7435cb
--- /dev/null
+++ b/backend/data/users.json
@@ -0,0 +1,10 @@
+{
+  "users": [
+    {
+      "id": "c8cf4cfd-145c-4950-8392-5f40f2a9ccde",
+      "username": "arpit",
+      "email": "arpitshirbhate5@gmail.com",
+      "password": "$2a$10$6MsaZTunN.oNj5UOHdwfrOYELPdptaMQxK5Tj4/2kFekFY/jVL4mi"
+    }
+  ]
+}
\ 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 7c2cda78..42cb0a14 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 useMongoAuth = 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 {
+        return [];
+    }
+};
+
+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 (!useMongoAuth) {
+        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 }],
@@ -31,13 +153,67 @@ router.post("/signup", validateRequest(signupSchema), async (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 (!useMongoAuth) {
+        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: 'Email is invalid ' });
+            }
+
+            const isMatch = await bcrypt.compare(password, user.password);
+            if (!isMatch) {
+                return res.status(401).json({ message: 'Invalid password' });
+            }
+
+            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 (!useMongoAuth) {
+        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..552c5d06
--- /dev/null
+++ b/backend/routes/discussions.js
@@ -0,0 +1,346 @@
+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();
+  await fs.writeFile(dataFile, JSON.stringify({ discussions }, null, 2), 'utf8');
+};
+
+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 = getCommunityIdentity(req).id;
+
+    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(),
+    });
+  } 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 48d6ccfb..1d4c1701 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -14,6 +14,10 @@ const logger = require('./logger');
 const app = express();
 
 // CORS configuration
+const clientOrigin = process.env.CLIENT_URL || 'http://localhost:5173';
+app.use(cors({
+    origin: clientOrigin,
+    credentials: true,
 const allowedOrigins = ['http://localhost:5173', 'https://github-spy.etlify.app'];
 app.use(cors({
     origin: function (origin, callback) {
@@ -36,18 +40,44 @@ app.use(session({
 app.use(passport.initialize());
 app.use(passport.session());
 
+// When MongoDB is unavailable, auth routes use a file-backed session user.
+if (!process.env.MONGO_URI) {
+    app.use((req, res, next) => {
+        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');
+            startServer();
+        })
+        .catch((err) => {
+            logger.error('MongoDB connection error', err);
+            logger.warn('Starting without MongoDB; auth routes may fail, but the discussion backend remains available');
+            startServer();
+        });
+} else {
+    logger.warn('MONGO_URI is not set; starting without MongoDB');
+    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 8eafb448..f7924f31 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -17,7 +17,7 @@ function App() {
 
         {!isFullscreen && <Navbar />}
 
-        <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 874ef7e7..c591366a 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -8,6 +8,7 @@ import Login from "../pages/Login/Login.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
 import Home from "../pages/Home/Home.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
 
 const Router = () => {
@@ -22,6 +23,8 @@ const Router = () => {
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/contributor/:username" element={<ContributorProfile />} />
       <Route path="/activity" element={<Activity />} />
+      <Route path="/community" element={<Community />} />
+      <Route path="/discussions" element={<Community />} />
 
       {/* Privacy Policy page route */}
       <Route path="/privacy" element={<PrivacyPolicy />} />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index fd5eac86..2a414432 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -53,6 +53,10 @@ const Navbar: React.FC = () => {
             Contributors
           </NavLink>
 
+          <NavLink to="/community" className={navLinkStyles}>
+            Community
+          </NavLink>
+
           <NavLink to="/login" className={navLinkStyles}>
             Login
           </NavLink>
@@ -131,6 +135,14 @@ const Navbar: React.FC = () => {
               Contributors
             </NavLink>
 
+            <NavLink
+              to="/community"
+              className={navLinkStyles}
+              onClick={closeMenu}
+            >
+              Community
+            </NavLink>
+
             <NavLink
               to="/login"
               className={navLinkStyles}
diff --git a/src/pages/Community/Community.tsx b/src/pages/Community/Community.tsx
new file mode 100644
index 00000000..3c53ca12
--- /dev/null
+++ b/src/pages/Community/Community.tsx
@@ -0,0 +1,675 @@
+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 || "http://localhost:5000";
+
+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(true);
+      setError("");
+    } 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"
+                    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)}
+                    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/Login/Login.tsx b/src/pages/Login/Login.tsx
index 92b7073e..ba23edd6 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -4,7 +4,7 @@ import { useNavigate, Link } from "react-router-dom";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
+const backendUrl = import.meta.env.VITE_BACKEND_URL || (import.meta.env.DEV ? "http://localhost:5000" : window.location.origin);
 
 interface LoginFormData {
   email: string;
@@ -30,7 +30,7 @@ const Login: React.FC = () => {
     setIsLoading(true);
 
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/login`, formData);
+      const response = await axios.post(`${backendUrl}/api/auth/login`, formData, { withCredentials: true });
       setMessage(response.data.message);
 
       if (response.data.message === 'Login successful') {
diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
index 2ac51dcc..0dcafad4 100644
--- a/src/pages/Signup/Signup.tsx
+++ b/src/pages/Signup/Signup.tsx
@@ -6,7 +6,7 @@ import { User, Mail, Lock, Eye, EyeOff } from "lucide-react";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
 
-const backendUrl = import.meta.env.VITE_BACKEND_URL;
+const backendUrl = import.meta.env.VITE_BACKEND_URL || "http://localhost:5000";
 
 interface SignUpFormData {
   username: string;
@@ -83,8 +83,10 @@ const SignUp: React.FC = () => {
     }
     setIsLoading(true);
     try {
-      const response = await axios.post(`${backendUrl}/api/auth/signup`,
-        formData // Include cookies for session
+      const response = await axios.post(
+        `${backendUrl}/api/auth/signup`,
+        formData,
+        { withCredentials: true }
       );
       setMessage(response.data.message); // Show success message from backend