diff --git a/.gitignore b/.gitignore
index 85d4ddf3..d042671c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,4 +36,5 @@ backend/.env
 
 node_modules
 .history
-edit.md
\ No newline at end of file
+edit.md
+backend/uploads/
diff --git a/backend/controllers/certificateBatchController.js b/backend/controllers/certificateBatchController.js
new file mode 100644
index 00000000..f6f7fab4
--- /dev/null
+++ b/backend/controllers/certificateBatchController.js
@@ -0,0 +1,685 @@
+const  { User }  = require("../models/schema");
+const { CertificateBatch } = require("../models/certificateSchema");
+const {
+  validateBatchSchema,
+  validateBatchUsersIds,
+  zodObjectId,
+} = require("../utils/batchValidate");
+const { findEvent } = require("../services/event.service");
+const { findTemplate } = require("../services/template.service");
+const { getApprovers } = require("../services/user.service");
+const {
+  getOrganization,
+  getCoordinatorOrganization,
+} = require("../services/organization.service");
+const { HttpError } = require("../utils/httpError");
+const generateCertificates = require("../services/certificates.service");
+
+async function createBatch(req, res) {
+  try {
+    const { id } = req.user;
+
+    const {
+      title,
+      eventId,
+      templateId,
+      signatoryDetails,
+      students: users,
+      action,
+    } = req.body;
+    const validation = validateBatchSchema.safeParse({
+      title,
+      eventId,
+      templateId,
+      signatoryDetails,
+      users,
+    });
+
+    if(!["Submitted", "Draft"].includes(action)){
+      return res.status(400).json({message: "Invalid action"});
+    }
+
+    let lifecycleStatus, approvalStatus;
+    if (action === "Submitted") {
+      lifecycleStatus = "Submitted";
+      approvalStatus = "Pending";
+    }
+
+    if (!validation.success) {
+      let errors = validation.error.issues.map((issue) => issue.message);
+      return res.status(400).json({ message: errors });
+    }
+
+    const event = await findEvent(eventId);
+    const template = await findTemplate(templateId);
+
+    // Get coordinator's organization
+    const club = await getCoordinatorOrganization(req.user);
+
+    const eventOrgId = event.organizing_unit_id.toString();
+    const clubOrgId = club._id.toString();
+
+    if (eventOrgId !== clubOrgId) {
+      return res.status(403).json({
+        message: "You are not authorized to initiate batches.",
+      });
+    }
+
+    if (club.type.toLowerCase() !== "club") {
+      return res.status(403).json({ message: "Organization is not a Club" });
+    }
+
+    // Resolve General Secretary and President objects for the club's domain.
+    // approverIds MUST be stored in this exact order: [GENSEC, PRESIDENT].
+    // currentApprovalLevel indexes directly into this array (0 = GENSEC's
+    // turn, 1 = President's turn), so this order is load-bearing for the
+    // entire approval workflow. Do not reorder without also updating
+    // approveBatch/rejectBatch below.
+    const { gensecObj, presidentObj } = await getApprovers(club.category);
+
+    if (!gensecObj || !presidentObj) {
+      return res.status(500).json({
+        message:
+          "Could not resolve GENSEC/President for this club's domain. Please contact an admin.",
+      });
+    }
+
+    // Order is significant: index 0 = GENSEC, index 1 = President.
+    const approverIds = [gensecObj._id, presidentObj._id];
+
+    // Validate user ids and existence (bulk query + duplicate detection)
+    const uniqueUsers = [...new Set(users.map((id) => id.toString()))];
+    const duplicates = uniqueUsers.length !== users.length;
+    if (duplicates) {
+      return res
+        .status(400)
+        .json({ message: "Duplicate user ids are not allowed in a batch" });
+    }
+
+    const existing = await User.find({ _id: { $in: users } }).select("_id");
+    const existingSet = new Set(existing.map((u) => u._id.toString()));
+
+    const missing = uniqueUsers.filter((u) => !existingSet.has(u));
+
+    if(missing.length > 0){
+      missing.map((uid) => ({ uid, ok: false, reason: "User not found" }));
+      return res.status(400).json({ message: "Invalid user data sent", details: missing });
+    }
+
+
+    const newBatch = await CertificateBatch.create({
+      title,
+      eventId: event._id,
+      templateId: template._id,
+      initiatedBy: id,
+      approverIds,
+      approvalStatus: approvalStatus,
+      lifecycleStatus: lifecycleStatus || "Draft",
+      currentApprovalLevel: 0,
+      users: users,
+      signatoryDetails,
+    });
+
+    try{
+    // Email sending is disabled project-wide for now. Do not re-enable here.
+    // await newBatchSendEmail(req.user.personal_info.email, ccEmails, link, emailBatchObj);
+    } catch(err){
+      console.error("Email sending failed", err.message);
+    }
+
+    res.json({ message: "New Batch created successfully" });
+
+  } catch (err) {
+    console.error(err);
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    res.status(500).json({ message: err.message || "Internal server error" });
+  }
+}
+
+async function editBatch(req, res) {
+  try {
+    const { id } = req.user;
+    const {
+      batchId,
+      title,
+      eventId,
+      templateId,
+      signatoryDetails,
+      students: users,
+      action,
+    } = req.body;
+
+    const user = await User.findById(id);
+    if (!user) {
+      return res.status(404).json({ message: "User not found" });
+    }
+
+    if (!["Submitted", "Draft"].includes(action)) {
+      return res.status(400).json({ message: "Invalid action" });
+    }
+    const userIds = (users || []).map((user) =>
+  typeof user === "string"
+    ? user
+    : user?._id
+).filter(Boolean);
+    const validation = validateBatchSchema.safeParse({
+      title,
+      eventId: eventId?._id || eventId,
+      templateId,
+      signatoryDetails,
+      users: userIds,
+    });
+
+    const objectId = zodObjectId.safeParse(batchId);
+    let errors = [];
+    if (!validation.success) errors.push(...validation.error.issues);
+    if (!objectId.success) errors.push(...objectId.error.issues);
+
+    errors = errors.map((issue) => issue.message);
+    if (errors.length > 0) return res.status(400).json({ message: errors });
+
+    const batch = await CertificateBatch.findById(batchId);
+
+    if (!batch) {
+      return res.status(404).json({ message: "Batch not found" });
+    }
+
+    Object.assign(batch, validation.data);
+
+    batch.lifecycleStatus = action;
+
+if (action === "Submitted") {
+    batch.approvalStatus = "Pending";
+    batch.currentApprovalLevel = 0;
+}
+    // NOTE: currentApprovalLevel is intentionally left untouched here.
+    // See "Edge cases" notes below regarding resubmission after a rejection.
+    await batch.save();
+
+    return res.json({ message: "Batch updated successfully" });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    res.status(500).json({ message: err.message || "Internal server error" });
+  }
+}
+
+async function getBatchUsers(req, res) {
+  try {
+    let { userIds } = req.body;
+    const validation = validateBatchUsersIds.safeParse(userIds);
+
+    if (!validation.success) {
+      let errors = validation.error.issues.map((issue) => issue.message);
+      return res.status(400).json({ message: errors });
+    }
+
+    const users = await User.find({ _id: { $in: userIds } }).select("username personal_info academic_info ");
+    const foundIds = users.map((u) => u._id.toString());
+
+    const missingIds = userIds.filter(
+      (id) => !foundIds.includes(id.toString()),
+    );
+    if (missingIds.length > 0) {
+      return res
+        .status(404)
+        .json({ message: `Users not found: ${missingIds.join(", ")}` });
+    }
+    return res.json({ message: users });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    res.status(500).json({ message: err.message || "Internal server error" });
+  }
+}
+
+async function duplicateBatch(req, res) {
+  try {
+    const { batchId } = req.body;
+    const { id } = req.user;
+
+    const objectIdValidation = zodObjectId.safeParse(batchId);
+    if (!objectIdValidation.success) {
+      return res.status(400).json({ message: "Invalid batch ID" });
+    }
+
+    const batch = await CertificateBatch.findById(batchId)
+      .select(
+        "title eventId templateId initiatedBy approverIds users signatoryDetails -_id",
+      );
+    if (!batch) {
+      return res.status(404).json({ message: "Batch not found" });
+    }
+
+    // Check authorization: only the initiator can duplicate
+    if (batch.initiatedBy.toString() !== id) {
+      return res.status(403).json({
+        message: "You are not authorized to duplicate this batch",
+      });
+    }
+
+    const array = batch.title.split("(Copy)");
+    const count = array.length -1;
+    const title = `${array[0]} Copy(${count})`;
+    const newBatch = await CertificateBatch.create({
+      ...batch.toObject(),
+      title: title,
+      lifecycleStatus: "Draft",
+      currentApprovalLevel: 0,
+      approvalStatus: undefined,
+    });
+
+    return res.json({ message: "Batch duplicated successfully" });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    res.status(500).json({ message: err.message || "Internal server error" });
+  }
+}
+
+async function deleteBatch(req, res) {
+  try {
+    const { batchId } = req.body;
+    const { id } = req.user;
+
+    const objectIdValidation = zodObjectId.safeParse(batchId);
+    if (!objectIdValidation.success) {
+      return res.status(400).json({ message: "Invalid batch ID" });
+    }
+
+    const batch = await CertificateBatch.findOneAndDelete({
+      _id: batchId,
+      initiatedBy: id,
+    });
+    if (!batch) {
+      return res
+        .status(403)
+        .json({ message: "Batch not found or unauthorized" });
+    }
+
+    return res.json({ message: "Batch deleted successfully" });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    return res
+      .status(500)
+      .json({ message: err.message || "Internal server error" });
+  }
+}
+
+async function archiveBatch(req, res) {
+  try {
+    const { batchId } = req.body;
+    const { id } = req.user;
+
+    const objectIdValidation = zodObjectId.safeParse(batchId);
+    if (!objectIdValidation.success) {
+      return res.status(400).json({ message: "Invalid batch ID" });
+    }
+
+    const batch = await CertificateBatch.findOneAndUpdate(
+      { _id: batchId, initiatedBy: id },
+      { lifecycleStatus: "Archived" },
+      { new: true },
+    );
+    if (!batch) {
+      return res
+        .status(403)
+        .json({ message: "Batch not found or unauthorized" });
+    }
+
+    return res.json({ message: "Batch archived successfully" });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    return res
+      .status(500)
+      .json({ message: err.message || "Internal server error" });
+  }
+}
+
+async function getUserBatches(req, res) {
+  try {
+    const id  = req.user._id;
+    const userId = req.params.userId;
+    let batches;
+    const user = await User.findById(id);
+    if (!user) {
+      return res.status(404).json({ message: "User not found" });
+    }
+
+    if (user.role === "PRESIDENT" || user.role.startsWith("GENSEC")) {
+      batches = await CertificateBatch.find({
+        approverIds: id,
+        lifecycleStatus: { $ne: "Draft" },
+      });
+    } else {
+      if (id.toString() !== userId.toString()) {
+        return res.status(403).json({ message: "User is Unauthorized" });
+      }
+      batches = await CertificateBatch.find({
+        initiatedBy: id,
+      });
+    }
+
+    batches = await CertificateBatch.populate(batches, [
+  {
+    path: "eventId",
+    select: "title organizing_unit_id schedule",
+    populate: {
+      path: "organizing_unit_id",
+      select: "name",
+    },
+  },
+  {
+    path: "initiatedBy",
+    select: "personal_info",
+  },
+  {
+    path: "users",
+    select: "personal_info academic_info",
+  },
+  {
+    path: "approverIds",
+    select: "personal_info",
+  },
+]);
+    if (!batches || batches.length === 0) {
+      return res.status(200).json({
+        message: batches,
+        info: batches.length === 0
+          ? "No batches found"
+          : undefined,
+        });
+    }
+
+    return res.json({ message: batches });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    return res
+      .status(500)
+      .json({ message: err.message || "Internal server error" });
+  }
+}
+
+async function approverEditBatch(req, res) {
+  const { id } = req.user;
+
+  const user = await User.findById(id);
+  if (!user) {
+    return res.status(404).json({ message: "User not found" });
+  }
+
+  if (user.role !== "PRESIDENT" && !user.role.startsWith("GENSEC")) {
+    return res.status(403).json({ message: "Access denied" });
+  }
+
+  let { users } = req.body;
+  const validation = validateBatchUsersIds.safeParse(users);
+  if (!validation.success) {
+    let errors = validation.error.issues.map((issue) => issue.message);
+    return res.status(400).json({ message: errors });
+  }
+
+  const { _id } = req.body;
+  const batch = await CertificateBatch.findById(_id);
+  if (!batch) {
+    return res.status(404).json({ message: "Batch not found" });
+  }
+  batch.users = users;
+  await batch.save();
+
+  res.status(200).json({ message: "Batch updated successfully" });
+}
+
+/**
+ * Approve a batch.
+ *
+ * FIX (Problem 1/2/3/4): membership in approverIds is NOT sufficient to
+ * approve. The caller must be the approver AT THE CURRENT LEVEL
+ * (batch.approverIds[batch.currentApprovalLevel]). The state transition is
+ * also performed as a single atomic findOneAndUpdate keyed on the current
+ * level, so two concurrent/duplicate requests can't both succeed and
+ * double-generate certificates.
+ */
+async function approveBatch(req, res) {
+  try {
+    const batchId = req.params.batchId;
+    const { id } = req.user;
+
+    const validateId = zodObjectId.safeParse(batchId);
+    if (!validateId.success) {
+      return res.status(400).json({ message: "Invalid batch ID" });
+    }
+
+    const batch = await CertificateBatch.findById(batchId);
+    if (!batch) {
+      return res.status(404).json({ message: "Batch not found" });
+    }
+
+    // Prevent approving an already approved / non-submitted batch
+    if (
+      batch.approvalStatus === "Approved" ||
+      batch.lifecycleStatus === "Active"
+    ) {
+      return res.status(400).json({
+        message: "Batch has already been approved.",
+      });
+    }
+
+    if (batch.lifecycleStatus !== "Submitted") {
+      return res.status(400).json({
+        message: "Batch is not currently awaiting approval.",
+      });
+    }
+
+    const level = batch.currentApprovalLevel;
+
+    if (level !== 0 && level !== 1) {
+      return res.status(400).json({
+        message: "Batch is not awaiting approval at this stage.",
+      });
+    }
+
+    // Whose turn is it, really? (index 0 = GENSEC, index 1 = President)
+    const expectedApproverId = batch.approverIds[level];
+    if (!expectedApproverId || expectedApproverId.toString() !== id.toString()) {
+      return res.status(403).json({
+        message: "It is not your turn to approve this batch yet.",
+      });
+    }
+
+    // Atomic transition: the match query re-verifies both the level AND
+    // that this exact user occupies that array position, at write time.
+    // If another request already advanced the level, this update matches
+    // nothing and updatedBatch comes back null.
+    const matchQuery = {
+      _id: batchId,
+      currentApprovalLevel: level,
+    };
+    matchQuery[`approverIds.${level}`] = id;
+
+    let update;
+    if (level === 0) {
+      // GENSEC approval -> hand off to President
+      update = {
+        currentApprovalLevel: 1,
+        lifecycleStatus: "Submitted",
+        approvalStatus: "Pending",
+      };
+    } else {
+      // President (final) approval -> batch becomes Active
+      update = {
+        currentApprovalLevel: 2,
+        lifecycleStatus: "Active",
+        approvalStatus: "Approved",
+      };
+    }
+
+    const updatedBatch = await CertificateBatch.findOneAndUpdate(
+      matchQuery,
+      update,
+      { new: true },
+    );
+
+    if (!updatedBatch) {
+      return res.status(409).json({
+        message:
+          "This batch was already updated by another approver. Please refresh.",
+      });
+    }
+
+    if (level === 1) {
+      // Final (President) approval just happened - generate certificates
+      // exactly once, from the freshly-updated, level===2 document.
+      await generateCertificates(updatedBatch);
+    }
+
+    return res.status(200).json({
+      message:
+        level === 0
+          ? "Batch approved by GENSEC. Forwarded to President."
+          : "Batch approved successfully. Certificates are being generated.",
+    });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+
+    return res.status(500).json({
+      message: err.message || "Internal server error",
+    });
+  }
+}
+
+/**
+ * Reject a batch.
+ *
+ * FIX (Problem 1/6): same turn-based check as approveBatch - only the
+ * approver at the current level may reject.
+ *
+ * FIX (crash bug): the previous implementation read
+ * `batch.approverIds.find(a => a._id...)` and `batch.eventId.title` /
+ * `batch.initiatedBy.personal_info.name` on a batch fetched WITHOUT
+ * .populate(). Those fields are raw ObjectIds, not populated documents, so
+ * `a._id` and `.personal_info` were always undefined, and
+ * `currentApprover.email` threw a TypeError on every single reject call.
+ * Since email sending is disabled project-wide right now, that entire
+ * object-building block has been removed rather than "fixed", to avoid
+ * resurrecting dead/untested email code.
+ *
+ * BEHAVIOR CHANGE: the previous code incremented `currentApprovalLevel` on
+ * rejection (e.g. GENSEC reject moved level 0 -> 1, effectively handing the
+ * batch to the President next). That looked unintentional - rejecting
+ * shouldn't advance the approval chain forward. This version marks the
+ * batch Rejected and leaves currentApprovalLevel untouched. Please confirm
+ * this matches the workflow you want (see "Edge cases" notes below on what
+ * should happen when the coordinator edits and resubmits after a
+ * rejection).
+ */
+async function rejectBatch(req, res) {
+  try {
+    const batchId = req.params.batchId;
+    const { id } = req.user;
+
+    const validateId = zodObjectId.safeParse(batchId);
+    if (!validateId.success) {
+      return res.status(400).json({ message: "Invalid batch ID" });
+    }
+
+    const batch = await CertificateBatch.findById(batchId);
+    if (!batch) {
+      return res.status(404).json({ message: "Batch not found" });
+    }
+
+    if (batch.lifecycleStatus !== "Submitted") {
+      return res.status(400).json({
+        message: "Batch is not currently awaiting approval.",
+      });
+    }
+
+    const level = batch.currentApprovalLevel;
+    if (level !== 0 && level !== 1) {
+      return res.status(400).json({
+        message: "Batch is not awaiting approval at this stage.",
+      });
+    }
+
+    const expectedApproverId = batch.approverIds[level];
+    if (!expectedApproverId || expectedApproverId.toString() !== id.toString()) {
+      return res.status(403).json({
+        message: "It is not your turn to act on this batch yet.",
+      });
+    }
+
+    const matchQuery = { _id: batchId, currentApprovalLevel: level };
+    matchQuery[`approverIds.${level}`] = id;
+
+    const updatedBatch = await CertificateBatch.findOneAndUpdate(
+      matchQuery,
+      {
+        approvalStatus: "Rejected",
+        lifecycleStatus: "Submitted",
+      },
+      { new: true },
+    );
+
+    if (!updatedBatch) {
+      return res.status(409).json({
+        message:
+          "This batch was already updated by another approver. Please refresh.",
+      });
+    }
+
+    // Email notifications are disabled project-wide. Do not add them back.
+
+    return res.status(200).json({ message: "Batch rejected successfully" });
+  } catch (err) {
+    if (err instanceof HttpError) {
+      const payload = { message: err.message };
+      if (err.details) payload.details = err.details;
+      return res.status(err.statusCode).json(payload);
+    }
+    return res
+      .status(500)
+      .json({ message: err.message || "Internal server error" });
+  }
+}
+
+module.exports = {
+  createBatch,
+  editBatch,
+  getBatchUsers,
+  duplicateBatch,
+  deleteBatch,
+  archiveBatch,
+  getUserBatches,
+  approverEditBatch,
+  approveBatch,
+  rejectBatch,
+};
\ No newline at end of file
diff --git a/backend/controllers/certificateController.js b/backend/controllers/certificateController.js
new file mode 100644
index 00000000..7345dcea
--- /dev/null
+++ b/backend/controllers/certificateController.js
@@ -0,0 +1,57 @@
+const { Certificate } = require("../models/certificateSchema");
+
+/**
+ * {
+    _id: "1",
+    event: "Tech Fest 2024",
+    issuedBy: "Computer Science Club",
+    date: "2024-01-15",
+    status: "Approved",
+    certificateUrl: "#",
+    rejectionReason: undefined,
+    },
+ */
+
+async function getCertificates(req, res) {
+  try {
+    const id = req.user._id;
+
+    const certificates = await Certificate.find({ userId: id }).populate({
+      path: "batchId",
+      select: "title lifecycleStatus approvalStatus",
+      populate: {
+        path: "eventId",
+        select: "title schedule organizing_unit_id",
+        populate: {
+          path: "organizing_unit_id",
+          select: "name",
+        },
+      },
+    });
+
+    const certificateObjs = certificates
+      .filter((cert) => cert.batchId)
+      .map((cert) => ({
+        _id: cert._id,
+        event: cert.batchId?.eventId?.title || "Unknown Event",
+        issuedBy: cert.batchId?.eventId?.organizing_unit_id?.name || "Unknown",
+        date: new Date(cert.createdAt).toLocaleDateString("en-GB"),
+        status: cert.status,
+        certificateUrl: cert.certificateUrl || "#",
+        rejectionReason:
+          cert.status === "Rejected" ? cert.rejectionReason : "",
+      }));
+
+    // Always 200 with an array (possibly empty) - see fix note above.
+    return res.status(200).json({ message: certificateObjs });
+  } catch (err) {
+    console.error("getCertificates error:", err);
+    return res
+      .status(500)
+      .json({ message: err.message || "Internal server error" });
+  }
+}
+
+module.exports = {
+  getCertificates,
+};
\ No newline at end of file
diff --git a/backend/controllers/templateController.js b/backend/controllers/templateController.js
new file mode 100644
index 00000000..55abf2e2
--- /dev/null
+++ b/backend/controllers/templateController.js
@@ -0,0 +1,156 @@
+const Template = require("../models/templateSchema");
+
+// GET /api/templates
+async function getTemplates(req, res) {
+  try {
+    const templates = await Template.find()
+      .populate({
+        path: "createdBy",
+        select: "personal_info",
+      })
+      .sort({ createdAt: -1 });
+
+    return res.status(200).json({
+      message: templates,
+    });
+  } catch (err) {
+    return res.status(500).json({
+      message: err.message,
+    });
+  }
+}
+
+// GET /api/templates/:id
+async function getTemplate(req, res) {
+  try {
+    const { id } = req.params;
+
+    const template = await Template.findById(id).populate({
+      path: "createdBy",
+      select: "personal_info",
+    });
+
+    if (!template) {
+      return res.status(404).json({
+        message: "Template not found",
+      });
+    }
+
+    return res.status(200).json({
+      message: template,
+    });
+  } catch (err) {
+    return res.status(500).json({
+      message: err.message,
+    });
+  }
+}
+
+// POST /api/templates
+async function createTemplate(req, res) {
+  try {
+    const {
+      title,
+      description,
+      category,
+      design,
+      status,
+    } = req.body;
+
+    if (!title || !category) {
+      return res.status(400).json({
+        message: "Title and category are required",
+      });
+    }
+
+    const template = await Template.create({
+      title,
+      description,
+      category,
+      design: design || "default.html",
+      status: status || "Draft",
+      createdBy: req.user._id,
+    });
+
+    return res.status(201).json({
+      message: template,
+    });
+  } catch (err) {
+    return res.status(500).json({
+      message: err.message,
+    });
+  }
+}
+
+// PATCH /api/templates/:id
+async function updateTemplate(req, res) {
+  try {
+    const { id } = req.params;
+
+    const template = await Template.findById(id);
+
+    if (!template) {
+      return res.status(404).json({
+        message: "Template not found",
+      });
+    }
+
+  const ALLOWED_FIELDS = [
+  "title",
+  "description",
+  "category",
+  "design",
+  "status",
+];
+
+ALLOWED_FIELDS.forEach((field) => {
+  if (req.body[field] !== undefined) {
+    template.set(field, req.body[field]);
+  }
+});
+
+
+    await template.save();
+
+    return res.status(200).json({
+      message: template,
+    });
+  } catch (err) {
+    return res.status(500).json({
+      message: err.message,
+    });
+  }
+}
+
+// DELETE /api/templates/:id
+async function deleteTemplate(req, res) {
+  try {
+    const { id } = req.params;
+
+    const template = await Template.findById(id);
+
+    if (!template) {
+      return res.status(404).json({
+        message: "Template not found",
+      });
+    }
+
+    await template.deleteOne();
+
+    return res.status(200).json({
+      message: "Template deleted successfully",
+    });
+  } catch (err) {
+    return res.status(500).json({
+      message: err.message,
+    });
+  }
+}
+
+module.exports = {
+  getTemplates,
+  getTemplate,
+  createTemplate,
+  updateTemplate,
+  deleteTemplate,
+};
\ No newline at end of file
diff --git a/backend/index.js b/backend/index.js
index 4f2de1bc..3612fd2c 100644
--- a/backend/index.js
+++ b/backend/index.js
@@ -23,6 +23,11 @@ const analyticsRoutes = require("./routes/analytics.js");
 const porRoutes = require("./routes/por.js");
 const budgetRoutes = require("./routes/budget.js");
 const roomBookingRoutes = require("./routes/roomBooking.js");
+const certificateRoutes = require("./routes/certificate");
+const certificateBatchRoutes = require("./routes/certificateBatch");
+const templateRoutes = require("./routes/template");
+
+
 const app = express();
 
 if (process.env.NODE_ENV === "production") {
@@ -64,6 +69,9 @@ app.use("/", routes_general);
 app.use("/auth", routes_auth);
 app.use("/onboarding", onboardingRoutes);
 app.use("/profile", profileRoutes);
+app.use("/api/certificates", certificateRoutes);
+app.use("/api/batches", certificateBatchRoutes);
+app.use("/api/templates", templateRoutes);
 app.use("/api/feedback", feedbackRoutes);
 app.use("/api/events", eventsRoutes);
 app.use("/api/skills", skillsRoutes);
diff --git a/backend/models/certificateSchema.js b/backend/models/certificateSchema.js
new file mode 100644
index 00000000..b1126004
--- /dev/null
+++ b/backend/models/certificateSchema.js
@@ -0,0 +1,178 @@
+const mongoose = require("mongoose");
+
+const certificateBatchSchema = new mongoose.Schema(
+  {
+    title: { type: String, required: true },
+    eventId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "Event",
+    },
+    templateId: { type: mongoose.Schema.Types.ObjectId, ref: "Template" },
+    initiatedBy: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "User",
+      required: true,
+    },
+    approverIds: {
+      type: [{ type: mongoose.Schema.Types.ObjectId, ref: "User" }],
+      required: true,
+    },
+    approvalStatus: {
+      type: String,
+      enum: ["Pending", "Approved", "Rejected"],
+      required: function () {
+        return this.lifecycleStatus !== "Draft";
+      },
+    },
+    lifecycleStatus: {
+      type: String,
+      enum: ["Draft", "Submitted", "Active", "Archived"],
+      default: "Draft",
+    },
+    currentApprovalLevel: {
+      type: Number,
+      default: 0,
+      max: 2,
+    },
+    users: {
+      type: [{ type: mongoose.Schema.Types.ObjectId, ref: "User" }],
+      required: function () {
+        return this.lifecycleStatus === "Draft" ? false : true;
+      },
+    },
+    signatoryDetails: {
+      type: [
+        {
+          name: { type: String, required: true },
+          signature: { type: String, default: this.name },
+          role: { type: String, required: true },
+        },
+      ],
+      required: function () {
+        return this.lifecycleStatus === "Draft" ? false : true;
+      },
+    },
+  },
+  {
+    timestamps: true,
+  },
+);
+
+const certificateSchema = new mongoose.Schema(
+  {
+    userId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "User",
+      required: true,
+    },
+    batchId: {
+      type: mongoose.Schema.Types.ObjectId,
+      ref: "CertificateBatch",
+      required: true,
+    },
+    status: {
+      type: String,
+      required: true,
+      enum: ["Approved", "Rejected"],
+    },
+    rejectionReason: {
+      type: String,
+      required: function () {
+        return this.status === "Rejected";
+      },
+    },
+    certificateUrl: {
+      type: String,
+      required: function () {
+        return this.status === "Approved";
+      },
+    },
+    certificateId: {
+      type: String,
+      required: function () {
+        return this.status === "Approved";
+      },
+    },
+  },
+  {
+    timestamps:true,
+  },
+);
+//Indexed to serve the purpose of "Get pending batches for the logged-in approver."
+/*
+
+_id	approverIds	status
+1	[A, B, C]	PendingL1
+2	[B, D]	PendingL1
+3	[A, D]	PendingL2
+4	[B]	PendingL1
+
+Index entries for B
+
+approverIds	   _id
+B	            1
+B	            2
+B	            4
+
+*/
+// For "Get pending batches for logged-in approver"
+// Common filter: approverIds includes user, submitted batches, pending approval.
+certificateBatchSchema.index(
+  {
+    approverIds: 1,
+    approvalStatus: 1,
+    lifecycleStatus: 1,
+    currentApprovalLevel: 1,
+  },
+  {
+    partialFilterExpression: {
+      approvalStatus: "Pending",
+      lifecycleStatus: { $in : ["Submitted"] },
+    },
+  },
+);
+
+//This is done to ensure that within each batch only 1 certificate is issued per userId.
+certificateSchema.index({ batchId: 1, userId: 1 }, { unique: true });
+
+//This index is for this purpose -> Get all approved certificates for the logged-in student.
+
+certificateSchema.index(
+  { certificateId: 1 },
+  {
+    unique: true,
+    partialFilterExpression: { certificateId: { $exists: true },
+   },
+  },
+);
+
+// Fast lookup for a user's certificates
+certificateSchema.index(
+  { userId: 1, certificateId: 1 },
+  {
+    partialFilterExpression: {
+      certificateId: { $exists: true },
+    },
+  },
+);
+
+const CertificateBatch = mongoose.model(
+  "CertificateBatch",
+  certificateBatchSchema,
+);
+const Certificate = mongoose.model("Certificate", certificateSchema);
+
+module.exports = {
+  CertificateBatch,
+  Certificate,
+};
+
+/*
+
+if i use partialFilter when querying i have to specify its filter condition so mongodb uses that index
+so here
+certificateBatchSchema.index({approverIds: 1}, {partialFilterExpression: { status: {$in: ["PendingL1", "PendingL2"]}}} )
+i need to do
+CertificateBatch.find({approverIds: id, status: {$in: ["PendingL1", "PendingL2"]} } )
+
+*/
\ No newline at end of file
diff --git a/backend/models/templateSchema.js b/backend/models/templateSchema.js
new file mode 100644
index 00000000..1656c8d5
--- /dev/null
+++ b/backend/models/templateSchema.js
@@ -0,0 +1,24 @@
+const mongoose = require("mongoose");
+
+const templateSchema = new mongoose.Schema({
+    title: { type: String, required: true },
+    description: {type: String},
+    design: {type: String, default: "Default"},
+    createdBy: {
+        type: mongoose.Schema.Types.ObjectId,
+        ref: "User",
+        required: true,
+    },
+    category: {
+        type: String,
+        enum: ["CULTURAL", "TECHNICAL", "SPORTS", "ACADEMIC", "OTHER"],
+    },
+    status: {
+        type: String,
+        enum: ["Draft", "Active", "Archived"],
+        default: "Draft"
+    }
+}, {timestamps: true});
+
+
+module.exports = mongoose.model("Template", templateSchema);
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index dec1d123..b917e697 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -11,7 +11,7 @@
       "dependencies": {
         "axios": "^1.5.1",
         "body-parser": "^1.20.2",
-        "cloudinary": "^2.6.1",
+        "cloudinary": "^2.10.0",
         "connect-mongodb-session": "^3.1.1",
         "cors": "^2.8.5",
         "dotenv": "^16.3.2",
@@ -20,6 +20,7 @@
         "express-rate-limit": "^7.5.1",
         "express-rate-limiter": "^1.3.1",
         "express-session": "^1.17.3",
+        "handlebars": "^4.7.9",
         "jsonwebtoken": "^9.0.2",
         "jwt-decode": "^3.1.2",
         "moment": "^2.30.1",
@@ -35,8 +36,10 @@
         "passport-google-oauth20": "^2.0.0",
         "passport-local": "^1.0.0",
         "passport-local-mongoose": "^8.0.0",
+        "puppeteer": "^25.2.1",
         "streamifier": "^0.1.1",
-        "uuid": "^11.1.0"
+        "uuid": "^11.1.0",
+        "zod": "^4.4.3"
       },
       "devDependencies": {
         "cookie": "^0.5.0",
@@ -969,6 +972,30 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@puppeteer/browsers": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.0.5.tgz",
+      "integrity": "sha512-xYXNuEQmHNIPWWcbL/skf2KF7seyp7c1xmKFRk3wmdFx7VwBsKVrtOLKs8ecaezsKPsWeF1YsgwIiElAscaryA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "modern-tar": "^0.7.6",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "browsers": "lib/main-cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      },
+      "peerDependencies": {
+        "proxy-agent": ">=8.0.1"
+      },
+      "peerDependenciesMeta": {
+        "proxy-agent": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@smithy/abort-controller": {
       "version": "4.2.12",
       "resolved": "https://registry.npmjs.org/@smithy/abort-controller/-/abort-controller-4.2.12.tgz",
@@ -2217,6 +2244,31 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chromium-bidi": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-16.0.1.tgz",
+      "integrity": "sha512-J63PGu/9PpeCwLIcKYyzWP6yaVL5pxuBc0shlYCYM8BaAkmlwiQboXO1iNbOgSDbVklEyYFfNEcHD8oOAWacUA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "mitt": "^3.0.1",
+        "zod": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=20.19.0 <22.0.0 || >=22.12.0"
+      },
+      "peerDependencies": {
+        "devtools-protocol": "*"
+      }
+    },
+    "node_modules/chromium-bidi/node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/cli-cursor": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz",
@@ -2250,13 +2302,54 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/cliui/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cliui/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/cloudinary": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.9.0.tgz",
-      "integrity": "sha512-F3iKMOy4y0zy0bi5JBp94SC7HY7i/ImfTPSUV07iJmRzH1Iz8WavFfOlJTR1zvYM/xKGoiGZ3my/zy64In0IQQ==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/cloudinary/-/cloudinary-2.10.0.tgz",
+      "integrity": "sha512-sY09kYg7wprkndAOjZBAYqFZqwL+SxnEGcAvksOvFA+5upnFn949UjkEkHKNSwkBtW/xRDd0p6NgbSXZcxkI3w==",
       "license": "MIT",
       "dependencies": {
-        "lodash": "^4.17.21"
+        "lodash": "^4.17.23"
       },
       "engines": {
         "node": ">=9"
@@ -2634,6 +2727,12 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/devtools-protocol": {
+      "version": "0.0.1638949",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1638949.tgz",
+      "integrity": "sha512-mXwg4Fqnv0WR4iuAT/gYUmctNkjILwXFHyZ+m7Ty1dfr0ezZt2U3gnrrJTfRobJTHoXf+IbuFvFITzLrLFjwJA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -2691,7 +2790,6 @@
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
       "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/encodeurl": {
@@ -2886,6 +2984,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -3624,11 +3731,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
     "node_modules/get-east-asian-width": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz",
       "integrity": "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=18"
@@ -3786,6 +3901,27 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "license": "MIT"
     },
+    "node_modules/handlebars": {
+      "version": "4.7.9",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.9.tgz",
+      "integrity": "sha512-4E71E0rpOaQuJR2A3xDZ+GM1HyWYv1clR58tC8emQNeQe3RH7MAzSbat+V0wG78LQBo6m6bzSG/L4pBuCsgnUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.2",
+        "source-map": "^0.6.1",
+        "wordwrap": "^1.0.0"
+      },
+      "bin": {
+        "handlebars": "bin/handlebars"
+      },
+      "engines": {
+        "node": ">=0.4.7"
+      },
+      "optionalDependencies": {
+        "uglify-js": "^3.1.4"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -4636,7 +4772,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
       "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14"
@@ -5039,6 +5174,30 @@
         "node": "*"
       }
     },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mitt": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+      "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+      "license": "MIT"
+    },
+    "node_modules/modern-tar": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.7.6.tgz",
+      "integrity": "sha512-sweCIVXzx1aIGTCdzcMlSZt1h8k5Tmk08VNAuRk3IU28XamGiOH5ypi11g6De2CH7PhYqSSnGy2A/EFhbWnVKg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/moment": {
       "version": "2.30.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
@@ -5354,6 +5513,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
+      "license": "MIT"
+    },
     "node_modules/node-exports-info": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
@@ -8345,6 +8510,44 @@
         "node": ">=6"
       }
     },
+    "node_modules/puppeteer": {
+      "version": "25.2.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-25.2.1.tgz",
+      "integrity": "sha512-2D5RMkQH9FRhDU57a1/jV9xWoxqZvUjaZOYjAAPdRCEY8A01V5sxzyGOMs8XiKU9fPF91SOSwNYpHRu5SD958g==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "3.0.5",
+        "chromium-bidi": "16.0.1",
+        "devtools-protocol": "0.0.1638949",
+        "lilconfig": "^3.1.3",
+        "puppeteer-core": "25.2.1",
+        "typed-query-selector": "^2.12.2"
+      },
+      "bin": {
+        "puppeteer": "lib/puppeteer/node/cli.js"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
+    "node_modules/puppeteer-core": {
+      "version": "25.2.1",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-25.2.1.tgz",
+      "integrity": "sha512-MwEZ4FFGJ1ZLOmu/04eISxoEMKtCnHyJBRFfgpwPPSYNG6gT6Xw1laNziFSV7uwDcx3jK+ATYIo9SfOd8Uhc3w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@puppeteer/browsers": "3.0.5",
+        "chromium-bidi": "16.0.1",
+        "devtools-protocol": "0.0.1638949",
+        "typed-query-selector": "^2.12.2",
+        "webdriver-bidi-protocol": "0.4.2",
+        "ws": "^8.21.0"
+      },
+      "engines": {
+        "node": ">=22.12.0"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.2.tgz",
@@ -9000,6 +9203,15 @@
         "npm": ">= 3.0.0"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/sparse-bitfield": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
@@ -9071,7 +9283,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
       "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "emoji-regex": "^10.3.0",
@@ -9089,7 +9300,6 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
       "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -9102,7 +9312,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
       "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.2.2"
@@ -9456,12 +9665,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typed-query-selector": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
+      "integrity": "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==",
+      "license": "MIT"
+    },
     "node_modules/typedarray": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
       "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
       "license": "MIT"
     },
+    "node_modules/uglify-js": {
+      "version": "3.19.3",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
+      "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==",
+      "license": "BSD-2-Clause",
+      "optional": true,
+      "bin": {
+        "uglifyjs": "bin/uglifyjs"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/uid-safe": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
@@ -9565,6 +9793,12 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/webdriver-bidi-protocol": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.2.tgz",
+      "integrity": "sha512-VSV+fzfChirL3e7jay2yUC7B4HQCGtEWEg/MSSQbK+qWbqeGlRLlXTzPpYr3XGUvbpDHumWZBJxgesg4N7dbtA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -9696,11 +9930,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
+      "license": "MIT"
+    },
     "node_modules/wrap-ansi": {
       "version": "9.0.2",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
       "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-styles": "^6.2.1",
@@ -9718,7 +9957,6 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
       "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -9731,7 +9969,6 @@
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
       "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -9744,7 +9981,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
       "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^6.2.2"
@@ -9762,6 +9998,36 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "license": "ISC"
     },
+    "node_modules/ws": {
+      "version": "8.21.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.0.tgz",
+      "integrity": "sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/yaml": {
       "version": "2.8.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
@@ -9778,6 +10044,32 @@
         "url": "https://github.com/sponsors/eemeli"
       }
     },
+    "node_modules/yargs": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^7.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "license": "ISC",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -9789,6 +10081,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.4.3.tgz",
+      "integrity": "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/backend/package.json b/backend/package.json
index 3814a629..77a919f0 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -31,7 +31,7 @@
   "dependencies": {
     "axios": "^1.5.1",
     "body-parser": "^1.20.2",
-    "cloudinary": "^2.6.1",
+    "cloudinary": "^2.10.0",
     "connect-mongodb-session": "^3.1.1",
     "cors": "^2.8.5",
     "dotenv": "^16.3.2",
@@ -40,6 +40,7 @@
     "express-rate-limit": "^7.5.1",
     "express-rate-limiter": "^1.3.1",
     "express-session": "^1.17.3",
+    "handlebars": "^4.7.9",
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^3.1.2",
     "moment": "^2.30.1",
@@ -55,8 +56,10 @@
     "passport-google-oauth20": "^2.0.0",
     "passport-local": "^1.0.0",
     "passport-local-mongoose": "^8.0.0",
+    "puppeteer": "^25.2.1",
     "streamifier": "^0.1.1",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "zod": "^4.4.3"
   },
   "devDependencies": {
     "cookie": "^0.5.0",
diff --git a/backend/routes/certificate.js b/backend/routes/certificate.js
new file mode 100644
index 00000000..0e56279a
--- /dev/null
+++ b/backend/routes/certificate.js
@@ -0,0 +1,7 @@
+const router = require("express").Router();
+const isAuthenticated = require("../middlewares/isAuthenticated");
+const {getCertificates} = require("../controllers/certificateController"); 
+
+router.get("/", isAuthenticated, getCertificates);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/certificateBatch.js b/backend/routes/certificateBatch.js
new file mode 100644
index 00000000..53db26f7
--- /dev/null
+++ b/backend/routes/certificateBatch.js
@@ -0,0 +1,89 @@
+const router = require("express").Router();
+const {
+  createBatch,
+  editBatch,
+  getBatchUsers,
+  duplicateBatch,
+  deleteBatch,
+  archiveBatch,
+  getUserBatches,
+  approverEditBatch,
+  approveBatch,
+  rejectBatch,
+} = require("../controllers/certificateBatchController");
+
+const  isAuthenticated  = require("../middlewares/isAuthenticated");
+const authorizeRole = require("../middlewares/authorizeRole");
+const { ROLE_GROUPS, ROLES } = require("../utils/roles");
+
+router.get(
+  "/:userId",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.ADMIN),
+  getUserBatches,
+);
+
+router.post(
+  "/create-batch",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  createBatch,
+);
+
+router.patch(
+  "/edit-batch",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  editBatch,
+);
+
+router.patch(
+  "/approver/edit-batch",
+  isAuthenticated,
+  authorizeRole([...ROLE_GROUPS.GENSECS, ROLES.PRESIDENT]),
+  approverEditBatch,
+);
+
+router.post(
+  "/batch-users",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  getBatchUsers,
+);
+
+router.post(
+  "/duplicate-batch",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  duplicateBatch,
+);
+
+router.delete(
+  "/delete-batch",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  deleteBatch,
+);
+
+router.patch(
+  "/archive-batch",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  archiveBatch,
+);
+
+router.get(
+  "/:batchId/approve",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.ADMIN),
+  approveBatch,
+);
+
+router.get(
+  "/:batchId/reject",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.ADMIN),
+  rejectBatch,
+);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/routes/template.js b/backend/routes/template.js
new file mode 100644
index 00000000..1a57c6e9
--- /dev/null
+++ b/backend/routes/template.js
@@ -0,0 +1,53 @@
+const router = require("express").Router();
+
+const {
+  getTemplates,
+  getTemplate,
+  createTemplate,
+  updateTemplate,
+  deleteTemplate,
+} = require("../controllers/templateController");
+
+const isAuthenticated = require("../middlewares/isAuthenticated");
+const authorizeRole = require("../middlewares/authorizeRole");
+const { ROLE_GROUPS } = require("../utils/roles");
+
+// View all templates
+router.get(
+  "/",
+  isAuthenticated,
+  getTemplates
+);
+
+// View a single template
+router.get(
+  "/:id",
+  isAuthenticated,
+  getTemplate
+);
+
+// Create template
+router.post(
+  "/",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  createTemplate
+);
+
+// Update template
+router.patch(
+  "/:id",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  updateTemplate
+);
+
+// Delete template
+router.delete(
+  "/:id",
+  isAuthenticated,
+  authorizeRole(ROLE_GROUPS.COORDINATORS),
+  deleteTemplate
+);
+
+module.exports = router;
\ No newline at end of file
diff --git a/backend/services/certificates.service.js b/backend/services/certificates.service.js
new file mode 100644
index 00000000..8742c8d4
--- /dev/null
+++ b/backend/services/certificates.service.js
@@ -0,0 +1,110 @@
+const puppeteer = require("puppeteer");
+const crypto = require("crypto");
+const { User } = require("../models/schema");
+const renderToPdf = require("../utils/renderPdf");
+const { Certificate } = require("../models/certificateSchema");
+
+async function generateCertificates(batch) {
+  const users = await User.find({
+    _id: { $in: batch.users },
+  }).select("personal_info");
+
+  const failures = [];
+  let browser;
+
+  try {
+    browser = await puppeteer.launch({ headless: true });
+
+    for (const user of users) {
+      try {
+        
+        const existingCertificate = await Certificate.findOne({
+          batchId: batch._id,
+          userId: user._id,
+        });
+
+        if (existingCertificate) {
+          console.log(
+            `Certificate already exists for ${user.personal_info.name}. Skipping...`,
+          );
+          continue;
+        }
+
+        const uniqueCertificateId = `${batch._id.toString()}_${user._id.toString()}`;
+      
+        const certificateNumber = `COSA-${crypto
+          .createHash("md5")
+          .update(uniqueCertificateId)
+          .digest("hex")
+          .slice(0, 8)
+          .toUpperCase()}`;
+
+        const data = {
+          certificateType: "Certificate of Participation",
+          certificateTitle: "Certificate of Achievement",
+          recipientName: user.personal_info.name,
+          description:
+            "In recognition of outstanding participation in the Innovation Club, demonstrating exceptional commitment, collaboration, and leadership.",
+          certificateId: uniqueCertificateId, 
+          certificateNumber, 
+          issueDate: new Date().toLocaleDateString("en-GB"),
+          
+          signatories: (batch.signatoryDetails || []).map((s) => ({
+            name: s.name,
+            role: s.role,
+          })),
+        };
+
+        // Generate PDF 
+        const pdfId = await renderToPdf(data, browser);
+
+        // Upload to Cloudinary
+        // TODO: Replace with Cloudinary URL once upload networking issue is resolved.
+        const certificateUrl = "#";
+
+        if (!certificateUrl) {
+          throw new Error("Cloudinary upload failed.");
+        }
+
+        // Save certificate record
+        await Certificate.create({
+          batchId: batch._id,
+          userId: user._id,
+          certificateUrl,
+          certificateId: data.certificateId,
+          status: "Approved",
+        });
+
+        console.log(`Certificate created for ${user.personal_info.name}`);
+      } catch (userErr) {
+        console.error(
+          `Certificate generation failed for user ${user._id}:`,
+          userErr.message,
+        );
+        failures.push({ userId: user._id.toString(), reason: userErr.message });
+      }
+    }
+  } finally {
+    if (browser) {
+      try {
+        await browser.close();
+      } catch (closeErr) {
+        console.error("Failed to close browser:", closeErr.message);
+      }
+    }
+  }
+
+  if (failures.length > 0) {
+    console.error(
+      `generateCertificates: batch ${batch._id} completed with ${failures.length} failure(s):`,
+      failures,
+    );
+    const err = new Error(
+      `Certificate generation completed with ${failures.length} failure(s) out of ${users.length}.`,
+    );
+    err.partialFailures = failures;
+    throw err;
+  }
+}
+
+module.exports = generateCertificates;
\ No newline at end of file
diff --git a/backend/services/email.service.js b/backend/services/email.service.js
new file mode 100644
index 00000000..bac7b3df
--- /dev/null
+++ b/backend/services/email.service.js
@@ -0,0 +1,270 @@
+const nodemailer = require("nodemailer");
+
+const transport = nodemailer.createTransport({
+  service: "gmail",
+  auth: {
+    user: process.env.EMAIL_USER,
+    pass: process.env.EMAIL_PASS
+  }  
+})
+
+async function forgotPasswordSendEmail(email, link){
+    const options = {
+        from: `COSA Support Team <${process.env.EMAIL_USER}>`,
+        to: email,
+        subject: "Password Reset Request – Action Required",
+        html: `
+                <div style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+                    <h2 style="color: #111;">Password Reset Request</h2>
+                    <p>Hello,</p>
+                    <p>We received a request to reset your password.</p>
+                    <p>
+                        Click the button below to set a new password. This link will expire in 
+                        <strong>10 minutes</strong>.
+                    </p>
+                    <p style="margin: 20px 0;">
+                        <a href="${link}" 
+                        style="
+                            background-color: #151515;
+                            color: #fff;
+                            padding: 12px 20px;
+                            text-decoration: none;
+                            border-radius: 5px;
+                            display: inline-block;
+                        ">
+                        Reset Password
+                        </a>
+                    </p>
+                    <p>If you did not request this, you can safely ignore this email.</p>
+                    <hr />
+                    <p style="font-size: 12px; color: #777;">
+                        This is an automated message. Please do not reply.
+                    </p>
+                </div>       
+        ` 
+    }
+
+    try {
+        await transport.sendMail(options);
+    } catch(err) {
+        throw new Error(`Error sending email: ${err.message}`);
+    }
+}
+
+
+async function newBatchSendEmail(toEmail, ccEmails=[], batchLink, batchObj){
+    const approverList = (batchObj.approverList || []).map((a, index) => `
+        <div>
+            <strong>Approver ${index + 1}:</strong><br/>
+            Name: ${a.name}<br/>
+            Email: ${a.email}
+        </div>
+        <br />    
+    `).join("");
+
+    const options = {
+        from: `COSA Support Team <${process.env.EMAIL_USER}>`,
+        to: toEmail,
+        cc: ccEmails.join(","),
+        subject: "Batch Created Successfully – Action Required from Approvers",
+        html: `
+        <div style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+            
+            <h2 style="color: #111;">New Batch Created</h2>
+
+            <p>Hello,</p>
+
+            <p>
+                A new batch has been created by the club coordinator. Please find the details below:
+            </p>
+
+            <p>
+                <strong>Batch Name:</strong> ${batchObj.title}<br/>
+                <strong>Event Name:</strong> ${batchObj.event.name}<br/>
+                <strong>Description:</strong> ${batchObj.event.description || "N/A"}
+                <strong>Created By:</strong> ${batchObj.createdBy}<br/>
+                <strong>Created At:</strong> ${batchObj.createdAt}<br/>
+            </p>
+
+            <p>
+                <strong>Approvers Assigned:</strong><br/>
+            </p>
+            ${approverList}
+            
+
+            <p style="margin: 20px 0;">
+                <a href="${batchLink}" 
+                style="
+                    background-color: #151515;
+                    color: #fff;
+                    padding: 12px 20px;
+                    text-decoration: none;
+                    border-radius: 5px;
+                    display: inline-block;
+                ">
+                View Batch Details
+                </a>
+            </p>
+
+            <p>
+                <strong>Note for Approvers:</strong> Please review and take the necessary action on this batch.
+            </p>
+
+            <p>
+                If you have any questions, please contact the coordinator.
+            </p>
+
+            <hr />
+
+            <p style="font-size: 12px; color: #777;">
+                This is an automated notification. Please do not reply.
+            </p>
+
+        </div>
+        `
+    }
+
+    try{
+        await transport.sendMail(options);
+    }catch(err){
+        throw new Error(`Error sending email: ${err.message}`);
+    }
+}
+
+async function batchStatusSendEmail(toEmail, ccEmails, batchLink, batchObj, action){
+    
+    const approverList = batchObj.pendingApprovers.map((a, index) => `
+        <div>
+            <strong>Approver ${index + 1}:</strong><br/>
+            Name: ${a.name}<br/>
+            Email: ${a.email}
+        </div>
+        <br />    
+    `).join("");
+
+    const Emailformat = {
+        "approve": {
+            html: `<div style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+                    
+                    <h2 style="color: #111;">Batch Approved</h2>
+
+                    <p>Hello,</p>
+
+                    <p>
+                        <strong>${batchObj.currentApprover.name}</strong> has approved the batch 
+                        <strong>${batchObj.title}</strong> at <strong>Level ${batchObj.approvalLevel}</strong>.
+                    </p>
+
+                    <p>
+                        <strong>Batch Details:</strong><br/>
+                        Batch Name: ${batchObj.title}<br/>
+                        Event Name: ${batchObj.event.name}
+                        Description: ${batchObj.event.description}
+                        Created By: ${batchObj.createdBy}<br/>
+                        CreatedAt: ${batchObj.createdAt}<br/>
+                        
+                    </p>
+
+                    <p style="margin: 20px 0;">
+                        <a href="${batchLink}" 
+                        style="
+                            background-color: #151515;
+                            color: #fff;
+                            padding: 12px 20px;
+                            text-decoration: none;
+                            border-radius: 5px;
+                            display: inline-block;
+                        ">
+                        View Batch Details
+                        </a>
+                    </p>
+
+                    <p>
+                        <strong>Pending Approval from: </strong><br/>
+                        ${approverList}
+                    </p>
+
+                    <hr />
+
+                    <p style="font-size: 12px; color: #777;">
+                        This is an automated notification. Please do not reply.
+                    </p>
+
+                </div>`, 
+            subject: "Batch Approved"
+        },
+        "reject": {
+            subject: "Batch Rejected – Notification", 
+            html: `<div style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
+
+                    <h2 style="color: #c00;">Batch Rejected</h2>
+
+                    <p>Hello,</p>
+
+                    <p>
+                        The batch <strong>${batchObj.title}</strong> has been <strong>rejected</strong> by 
+                        <strong>${batchObj.currentApprover.name}</strong> at <strong>Level ${batchObj.approvalLevel}</strong>.
+                    </p>
+
+                    <p>
+                        <strong>Batch Details:</strong><br/>
+                        Batch Name: ${batchObj.title}<br/>
+                        Event Name: ${batchObj.event.name}
+                        Description: ${batchObj.event.description}
+                        Created By: ${batchObj.createdBy}<br/>
+                        CreatedAt: ${batchObj.createdAt}<br/>
+                        
+                    </p>
+
+                    <p style="margin: 20px 0;">
+                        <a href="${batchLink}" 
+                        style="
+                            background-color: #c00;
+                            color: #fff;
+                            padding: 12px 20px;
+                            text-decoration: none;
+                            border-radius: 5px;
+                            display: inline-block;
+                        ">
+                        View Batch Details
+                        </a>
+                    </p>
+
+                    <p>
+                        No further approvals will be processed for this batch. Please contact the approver if you need more information.
+                    </p>
+
+                    <hr />
+
+                    <p style="font-size: 12px; color: #777;">
+                        This is an automated notification. Please do not reply.
+                    </p>
+
+                </div>`
+        }
+    }
+
+    const options = {
+        from: `COSA Support Team <${process.env.EMAIL_USER}>`,
+        to: toEmail,
+        cc: ccEmails.join(","),
+        subject: Emailformat[action].subject,
+        html: Emailformat[action].html,
+    }
+
+    try{
+        if(!["approve", "reject"].includes(action)){
+            throw new Error("Invalid action");
+        }
+        await transport.sendMail(options);
+    }catch(err){
+        throw new Error(err);
+    }
+
+} 
+
+module.exports = {
+    forgotPasswordSendEmail,
+    newBatchSendEmail,
+    batchStatusSendEmail
+};
diff --git a/backend/services/event.service.js b/backend/services/event.service.js
new file mode 100644
index 00000000..f72249cd
--- /dev/null
+++ b/backend/services/event.service.js
@@ -0,0 +1,31 @@
+const { Event } = require("../models/schema");
+const { HttpError } = require("../utils/httpError");
+
+async function findEvent(id) {
+  const event = await Event.findById(id);
+  if (!event) throw new HttpError(400, "Selected event doesn't exist");
+  return event;
+}
+
+async function isEventContact(user, event) {
+  const unitEmail = String(
+    event.organizing_unit_id?.contact_info?.email || ""
+  )
+    .trim()
+    .toLowerCase();
+
+  const userEmail = String(
+    user.username ||
+    user.personal_info?.email ||
+    ""
+  )
+    .trim()
+    .toLowerCase();
+
+  return unitEmail === userEmail;
+}
+
+module.exports = {
+    findEvent,
+    isEventContact
+}
\ No newline at end of file
diff --git a/backend/services/organization.service.js b/backend/services/organization.service.js
new file mode 100644
index 00000000..9f14886f
--- /dev/null
+++ b/backend/services/organization.service.js
@@ -0,0 +1,68 @@
+const { OrganizationalUnit } = require("../models/schema");
+const { HttpError } = require("../utils/httpError");
+
+async function getOrganization(id) {
+  const org = await OrganizationalUnit.findById(id);
+  if (!org) throw new HttpError(403, "Organization doesn't exist");
+  return org;
+}
+
+async function getPresidentOrganization(club) {
+
+  if(club.type?.toLowerCase() !== "club"){
+    throw new HttpError(403, "Organization is not a club");
+  }
+  const presidentOrg = await OrganizationalUnit.findOne({
+    hierarchy_level: 0,
+    parent_unit_id: null,
+  });
+  if (!presidentOrg) throw new HttpError(500, "President organization not found");
+
+  if (!club.parent_unit_id) {
+    throw new HttpError(403, "Organization(Club) does not belong to a council");
+  }
+
+  const councilObj = await getOrganization(club.parent_unit_id);
+  if (!councilObj.parent_unit_id) {
+    throw new HttpError(403, "Organization(Council) does not belong to a president organization");
+  }
+
+  if (councilObj.type?.toLowerCase() !== "council") {  
+    throw new HttpError(403, "Organization does not belong to a council");  
+  } 
+
+  const presidentObj = await getOrganization(councilObj.parent_unit_id);
+  if (!presidentOrg._id.equals(presidentObj._id)) {
+    throw new HttpError(500, "Invalid Organization");
+  }
+
+  return presidentObj;
+}
+
+
+async function getCoordinatorOrganization(user) {
+  const userEmail = String(
+    user.username || user.personal_info?.email || ""
+  )
+    .trim()
+    .toLowerCase();
+
+  const organization = await OrganizationalUnit.findOne({
+    "contact_info.email": new RegExp(`^${userEmail}$`, "i"),
+  });
+
+  if (!organization) {
+    throw new HttpError(
+      403,
+      "Coordinator is not associated with any organization"
+    );
+  }
+
+  return organization;
+}
+
+module.exports = {
+    getOrganization,
+    getPresidentOrganization,
+    getCoordinatorOrganization
+}
\ No newline at end of file
diff --git a/backend/services/template.service.js b/backend/services/template.service.js
new file mode 100644
index 00000000..412ce60c
--- /dev/null
+++ b/backend/services/template.service.js
@@ -0,0 +1,18 @@
+const Template = require("../models/templateSchema");
+const { HttpError } = require("../utils/httpError");
+const mongoose = require("mongoose"); 
+
+async function findTemplate(id) {
+
+  if (!mongoose.Types.ObjectId.isValid(id)) {  
+    throw new HttpError(400, "Invalid template ID format");  
+  } 
+
+  const template = await Template.findById(id);
+  if (!template) throw new HttpError(404, "Selected template doesn't exist");
+  return template;
+}
+
+module.exports = {
+    findTemplate
+}
\ No newline at end of file
diff --git a/backend/services/user.service.js b/backend/services/user.service.js
new file mode 100644
index 00000000..ab1eb9c9
--- /dev/null
+++ b/backend/services/user.service.js
@@ -0,0 +1,51 @@
+const { PositionHolder } = require("../models/schema");
+const { Position }= require("../models/schema");
+const { User } = require("../models/schema");
+const { HttpError } = require("../utils/httpError");
+
+async function getUserPosition(userId) {
+  const positionHolder = await PositionHolder.findOne({ user_id: userId });
+  if (!positionHolder) {
+    throw new HttpError(403, "You do not hold a valid position in any organization");
+  }
+
+  const position = await Position.findById(positionHolder.position_id);
+  if (!position) throw new HttpError(403, "Invalid Position");
+
+  return position;
+}
+
+async function getApprovers(category) {
+  const normalizedCategory = String(category || "").toUpperCase();
+
+  const gensecObj = await User.findOne({ role: `GENSEC_${normalizedCategory}`,
+  strategy: "local",
+ });
+
+  if (!gensecObj) {
+    throw new HttpError(403, "General secretary doesn't exist for the category");
+  }
+
+ /* const gensecPosition = await getUserPosition(gensecObj._id);
+  if (gensecPosition.title !== gensecObj.role.toUpperCase()) {
+    throw new HttpError(500, "Data inconsistent - General Secretary could not be resolved");
+  } */
+
+  const presidentObj = await User.findOne({
+     role: "PRESIDENT",
+     strategy: "local", 
+    });
+  if (!presidentObj) throw new HttpError(403, "President role doesn't exist");
+
+ /* const presidentPosition = await getUserPosition(presidentObj._id);
+  if (presidentPosition.title !== presidentObj.role.toUpperCase()) {
+    throw new HttpError(500, "Data inconsistent - President could not be resolved");
+  } */
+
+  return { gensecObj, presidentObj };
+}
+
+module.exports = { 
+    getUserPosition,
+    getApprovers
+}
\ No newline at end of file
diff --git a/backend/template-designs/certificate.hbs b/backend/template-designs/certificate.hbs
new file mode 100644
index 00000000..d65e3dbf
--- /dev/null
+++ b/backend/template-designs/certificate.hbs
@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>{{certificateTitle}} – {{recipientName}}</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    html, body {
+      width: 100%;
+      height: 100%;
+      background: #f0ece4;
+    }
+
+    .page {
+      width: 1122px;
+      height: 794px;
+      background: #faf8f4;
+      position: relative;
+      overflow: hidden;
+      font-family: 'Jost', sans-serif;
+    }
+
+    /* ── Outer decorative border ── */
+    .border-outer {
+      position: absolute;
+      inset: 18px;
+      border: 1.5px solid #b8a882;
+    }
+    .border-inner {
+      position: absolute;
+      inset: 26px;
+      border: 0.5px solid #cfc5a8;
+    }
+
+    /* ── Corner ornaments ── */
+    .corner {
+      position: absolute;
+      width: 56px;
+      height: 56px;
+    }
+    .corner svg { width: 100%; height: 100%; }
+    .corner-tl { top: 10px; left: 10px; }
+    .corner-tr { top: 10px; right: 10px; transform: scaleX(-1); }
+    .corner-bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
+    .corner-br { bottom: 10px; right: 10px; transform: scale(-1); }
+
+    /* ── Subtle background pattern ── */
+    .bg-pattern {
+      position: absolute;
+      inset: 0;
+      opacity: 0.04;
+      background-image:
+        repeating-linear-gradient(45deg, #8c7a4e 0px, #8c7a4e 1px, transparent 0px, transparent 50%),
+        repeating-linear-gradient(-45deg, #8c7a4e 0px, #8c7a4e 1px, transparent 0px, transparent 50%);
+      background-size: 28px 28px;
+    }
+
+    /* ── Left accent strip ── */
+    .left-strip {
+      position: absolute;
+      left: 40px;
+      top: 80px;
+      bottom: 80px;
+      width: 3px;
+      background: linear-gradient(to bottom, transparent, #b8a882 20%, #8c7a4e 50%, #b8a882 80%, transparent);
+    }
+
+    /* ── Right accent strip ── */
+    .right-strip {
+      position: absolute;
+      right: 40px;
+      top: 80px;
+      bottom: 80px;
+      width: 3px;
+      background: linear-gradient(to bottom, transparent, #b8a882 20%, #8c7a4e 50%, #b8a882 80%, transparent);
+    }
+
+    /* ── Institution seal / emblem area ── */
+    .seal {
+      position: absolute;
+      top: 52px;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+    }
+    .seal-ring {
+      width: 72px;
+      height: 72px;
+      border-radius: 50%;
+      border: 1.5px solid #b8a882;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 8px;
+      background: #faf8f4;
+      position: relative;
+    }
+    .seal-ring::before {
+      content: '';
+      position: absolute;
+      inset: 5px;
+      border-radius: 50%;
+      border: 0.5px solid #cfc5a8;
+    }
+    .seal-initials {
+      font-family: 'Cormorant Garamond', serif;
+      font-size: 22px;
+      font-weight: 600;
+      color: #6b5a35;
+      letter-spacing: 2px;
+    }
+    .institution-name {
+      font-family: 'Jost', sans-serif;
+      font-size: 9px;
+      font-weight: 500;
+      letter-spacing: 4px;
+      text-transform: uppercase;
+      color: #8c7a4e;
+    }
+
+    /* ── Divider lines ── */
+    .divider {
+      position: absolute;
+      height: 0.5px;
+      background: linear-gradient(to right, transparent, #b8a882 20%, #8c7a4e 50%, #b8a882 80%, transparent);
+    }
+    .divider-top {
+      top: 148px;
+      left: 100px;
+      right: 100px;
+    }
+    .divider-bottom {
+      bottom: 118px;
+      left: 100px;
+      right: 100px;
+    }
+
+    /* ── Main body ── */
+    .body {
+      position: absolute;
+      top: 160px;
+      left: 90px;
+      right: 90px;
+      bottom: 130px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: 0;
+    }
+
+    .cert-type {
+      font-family: 'Jost', sans-serif;
+      font-size: 9.5px;
+      font-weight: 500;
+      letter-spacing: 5px;
+      text-transform: uppercase;
+      color: #8c7a4e;
+      margin-bottom: 16px;
+    }
+
+    .cert-title {
+      font-family: 'Cormorant Garamond', serif;
+      font-size: 46px;
+      font-weight: 300;
+      color: #2d2517;
+      letter-spacing: 1px;
+      line-height: 1.1;
+      margin-bottom: 20px;
+    }
+
+    .presented-to {
+      font-family: 'Jost', sans-serif;
+      font-size: 10px;
+      font-weight: 400;
+      letter-spacing: 3px;
+      text-transform: uppercase;
+      color: #a89268;
+      margin-bottom: 10px;
+    }
+
+    .recipient-name {
+      font-family: 'Cormorant Garamond', serif;
+      font-size: 52px;
+      font-weight: 400;
+      font-style: italic;
+      color: #3a2d14;
+      letter-spacing: 1px;
+      line-height: 1.1;
+      margin-bottom: 18px;
+    }
+
+    .name-underline {
+      width: 240px;
+      height: 0.5px;
+      background: linear-gradient(to right, transparent, #8c7a4e, transparent);
+      margin: 0 auto 18px;
+    }
+
+    .description {
+      font-family: 'Jost', sans-serif;
+      font-size: 11.5px;
+      font-weight: 300;
+      color: #5c4d30;
+      letter-spacing: 0.5px;
+      line-height: 1.75;
+      max-width: 560px;
+    }
+
+    /* ── Cert meta (ID + date) — sits just below the top divider ── */
+    .cert-meta {
+      position: absolute;
+      top: 22px;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    /* ── Footer ── */
+    .footer {
+      position: absolute;
+      bottom: 36px;
+      left: 80px;
+      right: 80px;
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-evenly;
+    }
+
+    .sig-block {
+      text-align: center;
+      min-width: 160px;
+    }
+    .sig-line {
+      width: 160px;
+      height: 0.5px;
+      background: #b8a882;
+      margin-bottom: 6px;
+    }
+    .sig-name {
+      font-family: 'Jost', sans-serif;
+      font-size: 9px;
+      font-weight: 500;
+      letter-spacing: 2px;
+      text-transform: uppercase;
+      color: #8c7a4e;
+    }
+    .sig-title {
+      font-family: 'Jost', sans-serif;
+      font-size: 8.5px;
+      font-weight: 300;
+      color: #a89268;
+      letter-spacing: 1px;
+      margin-top: 2px;
+    }
+
+    .cert-id {
+      font-family: 'Jost', sans-serif;
+      font-size: 8px;
+      font-weight: 300;
+      letter-spacing: 2px;
+      color: #b8a882;
+    }
+    .cert-date {
+      font-family: 'Cormorant Garamond', serif;
+      font-size: 13px;
+      font-weight: 400;
+      color: #6b5a35;
+      letter-spacing: 0.5px;
+      margin-top: 3px;
+    }
+
+    /* ── Small decorative diamond ── */
+    .diamond {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      background: #b8a882;
+      transform: rotate(45deg);
+      margin: 0 10px;
+      vertical-align: middle;
+    }
+    .diamond-row {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 14px;
+    }
+    .diamond-line {
+      width: 60px;
+      height: 0.5px;
+      background: linear-gradient(to right, transparent, #b8a882);
+    }
+    .diamond-line.right {
+      background: linear-gradient(to left, transparent, #b8a882);
+    }
+  </style>
+</head>
+<body>
+<div class="page" id="certificate">
+
+  <!-- Background texture -->
+  <div class="bg-pattern"></div>
+
+  <!-- Borders -->
+  <div class="border-outer"></div>
+  <div class="border-inner"></div>
+
+  <!-- Corner ornaments -->
+  <div class="corner corner-tl">
+    <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 52 L4 4 L52 4" stroke="#b8a882" stroke-width="1" fill="none"/>
+      <path d="M4 36 Q4 20 20 20 Q4 20 4 4" stroke="#cfc5a8" stroke-width="0.5" fill="none"/>
+      <circle cx="4" cy="4" r="2.5" fill="#b8a882"/>
+      <path d="M10 4 L4 10" stroke="#b8a882" stroke-width="0.5"/>
+    </svg>
+  </div>
+  <div class="corner corner-tr">
+    <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 52 L4 4 L52 4" stroke="#b8a882" stroke-width="1" fill="none"/>
+      <path d="M4 36 Q4 20 20 20 Q4 20 4 4" stroke="#cfc5a8" stroke-width="0.5" fill="none"/>
+      <circle cx="4" cy="4" r="2.5" fill="#b8a882"/>
+      <path d="M10 4 L4 10" stroke="#b8a882" stroke-width="0.5"/>
+    </svg>
+  </div>
+  <div class="corner corner-bl">
+    <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 52 L4 4 L52 4" stroke="#b8a882" stroke-width="1" fill="none"/>
+      <path d="M4 36 Q4 20 20 20 Q4 20 4 4" stroke="#cfc5a8" stroke-width="0.5" fill="none"/>
+      <circle cx="4" cy="4" r="2.5" fill="#b8a882"/>
+      <path d="M10 4 L4 10" stroke="#b8a882" stroke-width="0.5"/>
+    </svg>
+  </div>
+  <div class="corner corner-br">
+    <svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M4 52 L4 4 L52 4" stroke="#b8a882" stroke-width="1" fill="none"/>
+      <path d="M4 36 Q4 20 20 20 Q4 20 4 4" stroke="#cfc5a8" stroke-width="0.5" fill="none"/>
+      <circle cx="4" cy="4" r="2.5" fill="#b8a882"/>
+      <path d="M10 4 L4 10" stroke="#b8a882" stroke-width="0.5"/>
+    </svg>
+  </div>
+
+  <!-- Side accent strips -->
+  <div class="left-strip"></div>
+  <div class="right-strip"></div>
+
+  <!-- Dividers -->
+  <div class="divider divider-top"></div>
+  <div class="divider divider-bottom"></div>
+
+  <!-- Cert ID + Date — top centre, above seal -->
+  <div class="cert-meta">
+    <div class="cert-id">Certificate No. {{certificateNumber}}</div>
+    <div class="cert-date">{{issueDate}}</div>
+  </div>
+
+  <!-- Institution seal -->
+  <div class="seal">
+    <div class="seal-ring">
+      <span class="seal-initials">COSA</span>
+    </div>
+    <div class="institution-name">Council of Student Affairs, IIT Bhilai</div>
+  </div>
+
+  <!-- Main body -->
+  <div class="body">
+    <div class="cert-type">{{certificateType}}</div>
+    <div class="cert-title">{{certificateTitle}}</div>
+
+    <div class="diamond-row">
+      <div class="diamond-line"></div>
+      <div class="diamond"></div>
+      <div class="diamond-line right"></div>
+    </div>
+
+    <div class="presented-to">This certificate is proudly presented to</div>
+    <div class="recipient-name">{{recipientName}}</div>
+    <div class="name-underline"></div>
+    <div class="description">{{description}}</div>
+  </div>
+
+  <!-- Footer: ONE .footer flex row, signatories loop INSIDE it -->
+  <div class="footer">
+    {{#each signatories}}
+    <div class="sig-block">
+      <div class="sig-line"></div>
+      <div class="sig-name">{{this.name}}</div>
+      <div class="sig-title">{{this.role}}</div>
+    </div>
+    {{/each}}
+  </div>
+
+</div>
+</body>
+</html>
diff --git a/backend/utils/batchValidate.js b/backend/utils/batchValidate.js
new file mode 100644
index 00000000..f814ad94
--- /dev/null
+++ b/backend/utils/batchValidate.js
@@ -0,0 +1,29 @@
+const zod = require("zod");
+
+const zodObjectId = zod.string().regex(/^[0-9a-zA-Z]{24}$/, "Invalid ObjectId");
+
+const validateBatchSchema = zod.object({
+  title: zod.string().min(5, "Title should be atleast 5 characters"),
+  eventId: zodObjectId,
+  templateId: zodObjectId,
+  signatoryDetails: zod
+    .array(
+      zod.object({
+        name: zod.string().min(3, "Name must be atleast 5 characters"),
+        signature: zod.string().optional(),
+        role: zod.string().min(1, "Invalid position"),
+      }),
+    )
+    .nonempty("At least one signatory is required"),
+  users: zod.array(zodObjectId).min(1, "Atleast 1 user must be associated."),
+});
+
+const validateBatchUsersIds = zod
+  .array(zodObjectId)
+  .nonempty("At least 1 participant is required");
+
+module.exports = {
+  validateBatchSchema,
+  zodObjectId,
+  validateBatchUsersIds,
+};
\ No newline at end of file
diff --git a/backend/utils/cloudinary.js b/backend/utils/cloudinary.js
new file mode 100644
index 00000000..778e5b27
--- /dev/null
+++ b/backend/utils/cloudinary.js
@@ -0,0 +1,27 @@
+const path = require("path");
+const fs = require("fs");
+const cloudinary = require("cloudinary").v2;
+
+async function uploadTocloudinary(pdfId) {
+    const pdfPath = path.join(__dirname, "../uploads", `${pdfId}.pdf`);
+
+    try {
+        const result = await cloudinary.uploader.upload(pdfPath, {
+            resource_type: "raw",
+            folder: "certificates",
+            timeout: 120000,
+        });
+
+        return result.secure_url;
+    } catch (err) {
+        console.error("Cloudinary upload failed:");
+        console.dir(err, { depth: null });
+        throw err;
+    } finally {
+        if (fs.existsSync(pdfPath)) {
+            fs.unlinkSync(pdfPath);
+        }
+    }
+}
+
+module.exports = uploadTocloudinary;
\ No newline at end of file
diff --git a/backend/utils/httpError.js b/backend/utils/httpError.js
new file mode 100644
index 00000000..872ad8bb
--- /dev/null
+++ b/backend/utils/httpError.js
@@ -0,0 +1,15 @@
+class HttpError extends Error {
+  /**
+   * @param {number} statusCode
+   * @param {string} message
+   * @param {any} [details]
+   */
+  constructor(statusCode, message, details) {
+    super(message);
+    this.name = "HttpError";
+    this.statusCode = statusCode;
+    this.details = details;
+  }
+}
+
+module.exports = { HttpError };
diff --git a/backend/utils/renderPdf.js b/backend/utils/renderPdf.js
new file mode 100644
index 00000000..9dab7409
--- /dev/null
+++ b/backend/utils/renderPdf.js
@@ -0,0 +1,75 @@
+const puppeteer = require("puppeteer");
+const handlebars = require("handlebars");
+const fs = require("fs");
+const path = require("path");
+
+function sanitizeForFilename(value) {
+  return String(value)
+    .trim()
+    .replace(/[^a-zA-Z0-9_-]/g, "_")
+    .replace(/_+/g, "_");
+}
+
+ async function renderToPdf(data, sharedBrowser = null) {
+  let browser = sharedBrowser;
+  let ownBrowser = false;
+  let page;
+
+  try {
+    if (!browser) {
+      browser = await puppeteer.launch({ headless: true });
+      ownBrowser = true;
+    }
+
+    page = await browser.newPage();
+
+    const filePath = path.join(
+      __dirname,
+      "../template-designs/certificate.hbs",
+    );
+    const template = fs.readFileSync(filePath, "utf-8");
+
+    const html = handlebars.compile(template)(data);
+    await page.setContent(html, { waitUntil: "networkidle0" });
+
+    const safeName = sanitizeForFilename(data.recipientName);
+    const safeCertId = sanitizeForFilename(data.certificateId);
+    const fileId = `${safeName}_${safeCertId}`;
+
+    const uploadDir = path.join(__dirname, "../uploads");
+    if (!fs.existsSync(uploadDir)) {
+      fs.mkdirSync(uploadDir, { recursive: true });
+    }
+
+    const outputPath = path.join(uploadDir, `${fileId}.pdf`);
+    await page.pdf({
+      path: outputPath,
+      width: "1122px",
+      height: "794px",
+      printBackground: true,
+      margin: { top: 0, right: 0, bottom: 0, left: 0 },
+    });
+
+    console.log("Certificate successfully generated at", outputPath);
+    return fileId;
+  } catch (err) {
+    throw err;
+  } finally {
+    if (page) {
+      try {
+        await page.close();
+      } catch(err){
+       console.warn("Failed to close page:", err.message);
+    }
+    }
+    if (ownBrowser && browser) {
+      try {
+        await browser.close();
+      } catch(err){
+      console.warn("Failed to close browser:", err.message);
+      }
+    }
+  }
+}
+
+module.exports = renderToPdf;
\ No newline at end of file
diff --git a/frontend/src/Components/Batches/StudentPanel.jsx b/frontend/src/Components/Batches/StudentPanel.jsx
new file mode 100644
index 00000000..6bd582e4
--- /dev/null
+++ b/frontend/src/Components/Batches/StudentPanel.jsx
@@ -0,0 +1,289 @@
+import { useState, useEffect } from "react";
+import { fetchBatchUsers } from "../../services/batch";
+import { Users, ChevronDown, ChevronUp, Search, X } from "lucide-react";
+import { Avatar, Checkbox } from "../Batches/modalDialog";
+import { Modal } from "./ui";
+/* ─── tiny helpers ─────────────────────────────────────────── */
+const toId = (s) => s?._id;
+
+/* ─── StudentsPanel ─────────────────────────────────────────── */
+export default function StudentsPanel({
+  form,
+  setForm,
+  isViewOnly,
+  selectedEvent,
+}) {
+  const [open, setOpen] = useState(false);
+  const [details, setDetails] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [localSelected, setLocalSelected] = useState(new Set());
+  const [search, setSearch] = useState("");
+  let studentIds = form.students || [];
+  let count = studentIds?.length || 0;
+  /* reset when panel closes */
+  const closePanel = () => {
+    setOpen(false);
+    setSearch("");
+  };
+
+  /* fetch when opening */
+  useEffect(() => {
+    if (!open || !selectedEvent) return;
+    if (count === 0) {
+      count = Object.keys(selectedEvent?.participants).length || 0;
+      if (count === 0) {
+        setDetails([]);
+        setLocalSelected(new Set());
+        return;
+      } else studentIds = selectedEvent.participants || [];
+    }
+
+    let cancelled = false;
+    setLoading(true);
+
+    fetchBatchUsers(studentIds).then((data) => {
+      if (cancelled) return;
+      setDetails(Array.isArray(data) ? data : []);
+      setLocalSelected(new Set(studentIds));
+      setLoading(false);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, selectedEvent]);
+
+  const toggle = (id) =>
+    setLocalSelected((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
+  const selectAll = () => setLocalSelected(new Set(details.map((s) => s?._id)));
+
+  const deselectAll = () => setLocalSelected(new Set());
+
+  const saveSelection = () => {
+    setForm((f) => ({ ...f, students: Array.from(localSelected) }));
+    closePanel();
+  };
+
+  const cancelSelection = () => {
+    setLocalSelected(new Set(studentIds));
+    closePanel();
+  };
+
+  const filtered = details.filter((s) => {
+    if (!search.trim()) return true;
+    const q = search.toLowerCase();
+    return (
+      s.personal_info?.name?.toLowerCase().includes(q) ||
+      s._id?.toString().toLowerCase().includes(q) ||
+      s.academic_info?.branch?.toLowerCase().includes(q) ||
+      s.academic_info?.program?.toLowerCase().includes(q)
+    );
+  });
+
+  const allSelected =
+    details.length > 0 && details.every((s) => localSelected.has(s?._id));
+
+  const pendingChanges =
+    open &&
+    !isViewOnly &&
+    (localSelected.size !== count ||
+      !studentIds.every((id) => localSelected.has(id)));
+  return (
+    <>
+      {/* ── trigger button ── */}
+      <button
+        onClick={() => setOpen(true)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          width: "100%",
+          padding: "9px 12px",
+          borderRadius: 12,
+          border: "1.5px solid #e7e5e0",
+          background: "#fafaf5",
+          cursor: "pointer",
+          fontSize: 12,
+          fontWeight: 700,
+          color: "#1c1917",
+          fontFamily: "inherit",
+        }}
+      >
+        <Users size={13} color="#78716c" />
+        <span style={{ flex: 1, textAlign: "left" }}>View Participants</span>
+      </button>
+
+      <Modal open={open} onClose={closePanel} title="View Participants">
+        <div className="mt-3">
+          <div className="border-[1.5px] border-gray-400 rounded-xl bg-white overflow-hidden">
+            {/* search + bulk controls */}
+            <div className="px-2.5 py-2 border-b border-[#f0ede8] flex gap-1.5 items-center">
+              {/* search input */}
+              <div className="flex-1 relative">
+                <Search
+                  size={11}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 text-[#a8a29e] pointer-events-none"
+                />
+
+                <input
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search by name, ID, branch, program"
+                  className="w-full box-border border-[1.5px] border-[#e7e5e0] rounded-lg pl-6 pr-7 py-[5px] text-[11px] text-[#1c1917] bg-[#fafaf5] outline-none font-inherit"
+                />
+
+                {search && (
+                  <button
+                    onClick={() => setSearch("")}
+                    className="absolute right-1.5 top-1/2 -translate-y-1/2 bg-transparent border-none cursor-pointer p-0 flex items-center text-[#a8a29e]"
+                  >
+                    <X size={11} />
+                  </button>
+                )}
+              </div>
+
+              {/* Select All / Deselect All */}
+              {!isViewOnly && details.length > 0 && (
+                <button
+                  onClick={allSelected ? deselectAll : selectAll}
+                  className="text-[10px] font-bold px-2.5 py-[5px] !rounded-lg border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-[#1a3d15] cursor-pointer whitespace-nowrap font-inherit"
+                >
+                  {allSelected ? "Deselect All" : "Select All"}
+                </button>
+              )}
+            </div>
+
+            {/* student list */}
+            <div className="max-h-[240px] overflow-y-auto px-2.5 py-2 flex flex-col gap-1.5">
+              {loading ? (
+                <div className="flex justify-center items-center h-16 text-[#a8a29e] text-xs font-semibold">
+                  Loading participants…
+                </div>
+              ) : filtered.length === 0 ? (
+                <div className="text-center py-6 text-[#a8a29e] text-xs font-semibold">
+                  {count === 0
+                    ? "No participants added to this batch yet."
+                    : "No results match your search."}
+                </div>
+              ) : (
+                filtered.map((student) => (
+                  <StudentCard
+                    key={student?._id}
+                    student={student}
+                    selected={localSelected.has(student?._id)}
+                    onToggle={toggle}
+                    disabled={isViewOnly}
+                  />
+                ))
+              )}
+            </div>
+
+            {/* panel footer */}
+            <div className="border-t border-[#f0ede8] px-2.5 py-2 flex items-center gap-2">
+              {/* left: count summary */}
+              <span className="text-[10px] text-[#a8a29e] font-semibold flex-1">
+                {isViewOnly
+                  ? `${count} participant${count !== 1 ? "s" : ""} in batch`
+                  : `${localSelected.size} of ${details.length} selected`}
+              </span>
+
+              {isViewOnly ? (
+                <button
+                  onClick={closePanel}
+                  className="text-[11px] font-bold px-3.5 py-1.5 rounded-[10px] border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-[#78716c] cursor-pointer font-inherit"
+                >
+                  Close
+                </button>
+              ) : (
+                <>
+                  <button
+                    onClick={cancelSelection}
+                    className="text-md font-bold px-3.5 py-1.5 !rounded-xl border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-red-600 cursor-pointer font-inherit"
+                  >
+                    Cancel
+                  </button>
+
+                  <button
+                    onClick={saveSelection}
+                    className="text-md font-bold px-4 py-1.5 !rounded-xl border-none bg-green-600 text-white cursor-pointer font-inherit"
+                  >
+                    Save Selection
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+/* ─── StudentCard ───────────────────────────────────────────── */
+function StudentCard({ student, selected, onToggle, disabled }) {
+  return (
+    <div
+      onClick={disabled ? undefined : () => onToggle(student?._id)}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "8px 10px",
+        borderRadius: 12,
+        border: `1.5px solid ${selected ? "#bbf7d0" : "#e7e5e0"}`,
+        background: selected ? "#f0fdf4" : "#fafaf5",
+        cursor: disabled ? "default" : "pointer",
+        transition: "border-color 0.15s, background 0.15s",
+        userSelect: "none",
+      }}
+    >
+      <Avatar student={student} />
+
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 12,
+            fontWeight: 700,
+            color: "#1c1917",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {student.personal_info?.name || "Unknown Student"} -{" "}
+          {student.username}
+        </div>
+
+        {(student.academic_info?.program ||
+          student.academic_info?.branch ||
+          student.academic_info.batch_year) && (
+          <div
+            style={{
+              fontSize: 10,
+              color: "#a8a29e",
+              marginTop: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {[
+              student?.academic_info?.program,
+              student?.academic_info?.branch,
+              student?.academic_info?.batch_year || "",
+            ]
+              .filter(Boolean)
+              .join(" · ")}
+          </div>
+        )}
+      </div>
+
+      <Checkbox checked={selected} disabled={disabled} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Batches/batchCard.jsx b/frontend/src/Components/Batches/batchCard.jsx
new file mode 100644
index 00000000..8ef9acee
--- /dev/null
+++ b/frontend/src/Components/Batches/batchCard.jsx
@@ -0,0 +1,464 @@
+import { BatchStatusBadge, CertThumb, ApprovalStatusBadge } from "./ui";
+import {
+  SquarePen,
+  ScanEye,
+  Trash2,
+  Copy,
+  Archive,
+  CalendarRange,
+  MapPin,
+  Users,
+} from "lucide-react";
+
+const BATCH_COLORS = [
+  { bg: "#f0fdf4", border: "#bbf7d0", pill: "#166534", pillBg: "#dcfce7" },
+  { bg: "#fefce8", border: "#fde68a", pill: "#92400e", pillBg: "#fef3c7" },
+  { bg: "#f0f9ff", border: "#bae6fd", pill: "#0c4a6e", pillBg: "#e0f2fe" },
+  { bg: "#fdf4ff", border: "#e9d5ff", pill: "#581c87", pillBg: "#f3e8ff" },
+  { bg: "#fff1f2", border: "#fecdd3", pill: "#881337", pillBg: "#ffe4e6" },
+  { bg: "#f0fdfa", border: "#99f6e4", pill: "#134e4a", pillBg: "#ccfbf1" },
+];
+
+function ActionBtn({ label, primary, danger, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        !text-xs px-2.5 py-1 mt-1
+        font-bold !rounded-xl
+        transition-opacity duration-150 cursor-pointer
+        ${
+          primary
+            ? "bg-green-100 text-green-600 hover:bg-green-50"
+            : danger
+              ? "bg-stone-50 text-red-600 hover:bg-red-50"
+              : "bg-stone-50 text-stone-600 hover:bg-stone-100"
+        }
+    `}
+    >
+      {label}
+    </button>
+  );
+}
+
+function ActionBtnList({ icon: Icon, danger, onClick }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        !text-xs px-2 py-1.5 mt-1
+        font-bold !rounded-md
+        transition-opacity duration-150 cursor-pointer
+        ${
+          danger
+            ? "bg-stone-50 text-red-600 hover:bg-red-200"
+            : "bg-stone-50 text-green-800 hover:bg-green-200"
+        }
+    `}
+    >
+      <Icon size={18} />
+    </button>
+  );
+}
+
+export function BatchCard({
+  batch,
+  onView,
+  onEdit,
+  onDelete,
+  onDuplicate,
+  onArchive,
+}) {
+
+  const batchKey = String(batch._id || batch.id || batch.batchId || "");  
+  const colorIndex = [...batchKey].reduce((sum, ch) => sum + ch.charCodeAt(0), 0) %  BATCH_COLORS.length;  
+  const c = BATCH_COLORS[colorIndex % BATCH_COLORS.length];  
+
+  return (
+    <div
+      style={{
+        background: "#fff",
+        border: "1.5px solid #e7e5e0",
+        borderRadius: 20,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column",
+        transition: "box-shadow 0.18s, border-color 0.18s",
+        cursor: "pointer",
+      }}
+    >
+      {/* Thumbnail */}
+      <div style={{ height: 156, padding: 10, background: "#f9f9ec" }}>
+        <CertThumb batch={batch} />
+      </div>
+
+      {/* Body */}
+      <div
+        style={{
+          padding: "14px 15px",
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+        }}
+      >
+        {/* Title + status */}
+        <div className="flex items-start justify-between gap-8">
+          <div style={{ minWidth: 0 }}>
+            <p
+              className="m-0 text-[13px]
+              font-bold text-[#1c1917] tracking-[-0.01em]
+              overflow-hidden text-ellipsis
+              whitespace-nowrap"
+            >
+              {batch.eventId.title}
+            </p>
+            <p
+              className="m-0 text-[13px]
+              font-medium text-zinc-600
+              tracking-[-0.01em] overflow-hidden
+              text-ellipsis whitespace-nowrap"
+            >
+              {batch.eventId.organizing_unit_id.name || ""}
+            </p>
+          </div>
+          <BatchStatusBadge status={batch.lifecycleStatus} />
+        </div>
+
+        {/* Inner sub-panel */}
+        <div
+          className="rounded-xl px-[10px] py-[8px] flex flex-col gap-[6px]"
+          style={{
+            background: c.bg,
+            border: `1px solid ${c.border}`,
+          }}
+        >
+          {/* Row 1 */}
+          <div className="flex gap-[6px] justify-between">
+            <span className="text-[11px] font-bold text-stone-700">
+              {batch.eventId.title}
+            </span>
+
+            <span className="flex items-center gap-1 text-[10px] font-semibold">
+              <CalendarRange size={12} />
+              {new Date(batch.createdAt).toLocaleDateString()}
+            </span>
+          </div>
+
+          {/* Row 2 */}
+          <div className="flex gap-[6px] items-center justify-between w-full">
+            {/* Left side */}
+            <div className="flex items-center gap-1 text-[11px] font-bold text-stone-500">
+              <Users size={12} />
+              <span>Students: {batch.users.length}</span>
+            </div>
+
+            {/* Right side */}
+            <div className="flex items-center gap-1 text-[11px] font-bold text-stone-500 overflow-hidden text-ellipsis whitespace-nowrap">
+              <MapPin size={12} />
+              <span>{batch.eventId.schedule?.venue}</span>
+            </div>
+          </div>
+
+          {/*
+            <div className="flex items-center justify-between w-full text-[11px] text-stone-500">
+              <span className="font-semibold">Event Schedule:</span>
+              <span>
+                {new Date(batch.eventId.schedule.start).toLocaleDateString()} -{" "}
+                {new Date(batch.eventId.schedule.end).toLocaleDateString()}
+              </span>
+            </div>
+
+
+            <div className="flex items-center justify-start gap-[5px] text-stone-500 font-semibold text-[11px]">
+              Approval: {batch.currentApprovalLevel} / 2
+          </div>
+          */}
+
+          {/* Row 5 */}
+          <div className="flex items-center gap-[5px] w-full">
+            <div className="flex justify-between w-full">
+              <span className="text-[10px] text-stone-600">
+                Last Updated: {new Date(batch.updatedAt).toLocaleDateString()}
+              </span>
+
+              <span className="text-[11px] text-stone-600 font-semibold overflow-hidden text-ellipsis whitespace-nowrap">
+                -{batch?.initiatedBy?.personal_info?.name || "User"}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div
+          style={{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 5,
+            marginTop: "auto",
+          }}
+        >
+          {batch.lifecycleStatus === "Draft" && (
+            <>
+              <ActionBtn label="View" primary onClick={() => onView(batch)} />
+              <ActionBtn label="Edit" onClick={() => onEdit(batch)} />
+              <ActionBtn label="Duplicate" onClick={() => onDuplicate(batch)} />
+              <ActionBtn
+                label="Delete"
+                danger
+                onClick={() => onDelete(batch)}
+              />
+            </>
+          )}
+          {batch.lifecycleStatus === "Submitted" && (
+            <>
+              <ActionBtn label="View" primary onClick={() => onView(batch)} />
+              <ActionBtn label="Duplicate" onClick={() => onDuplicate(batch)} />
+              <ActionBtn label="Archive" onClick={() => onArchive(batch._id)} />
+            </>
+          )}
+          {batch.lifecycleStatus === "Archived" && (
+            <>
+              <ActionBtn label="View" primary onClick={() => onView(batch)} />
+              <ActionBtn label="Duplicate" onClick={() => onDuplicate(batch)} />
+              <ActionBtn
+                label="Delete"
+                danger
+                onClick={() => onDelete(batch)}
+              />
+            </>
+          )}
+          {batch.lifecycleStatus === "Active" && (
+            <>
+              <ActionBtn label="View" primary onClick={() => onView(batch)} />
+              <ActionBtn label="Duplicate" onClick={() => onDuplicate(batch)} />
+              <ActionBtn label="Archive" onClick={() => onArchive(batch._id)} />
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function BatchList({
+  filtered,
+  onView,
+  onEdit,
+  onDelete,
+  onDuplicate,
+  onArchive,
+}) {
+  //console.log('filtered prop', filtered);
+  return (
+    <div className="bg-white border border-stone-200 rounded-2xl overflow-hidden shadow-sm">
+      <table className="w-full border-collapse">
+        {/* Header */}
+        <thead>
+          <tr className="bg-gradient-to-r from-[#2A6040] to-[#1E4A30]">
+            {[
+              "Batch",
+              "Organization",
+              "Students",
+              "Batch Status",
+              "Approval Status",
+              "Created By",
+              "Last Modified",
+              "Actions",
+            ].map((h, i, arr) => (
+              <th
+                key={h}
+                className="py-3 flex-col justify-center items-center text-[10px]
+                        font-bold uppercase tracking-widest text-white/70 whitespace-nowrap text-center"
+                style={
+                  i < arr.length - 1
+                    ? { borderRight: "1px solid rgba(255,255,255,0.07)" }
+                    : {}
+                }
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+
+        {/* Body */}
+        <tbody>
+          {filtered?.map((b, i) => {
+            const c = BATCH_COLORS[b.color % BATCH_COLORS.length];
+
+            return (
+              <tr
+                key={b._id}
+                className="hover:bg-stone-50 transition-colors"
+                style={{
+                  borderBottom:
+                    i < filtered.length - 1 ? "1px solid #e7e5e0" : "none",
+                }}
+              >
+                {/* Batch Name */}
+                <td
+                  className="py-2 text-center align-middle"
+                  style={{ borderRight: "1px solid #f1f1f0" }}
+                >
+                  <div className="flex items-center gap-2">
+                    <p className="text-sm font-bold text-stone-500 m-auto">
+                      {b.title}
+                    </p>
+                  </div>
+                </td>
+
+                {/* Organization */}
+                <td
+                  className="py-2"
+                  style={{ borderRight: "1px solid #f1f1f0" }}
+                >
+                  <div className="flex items-center gap-2">
+                    <p className="text-sm font-bold text-stone-500 m-auto">
+                      {b.eventId.organizing_unit_id.name}
+                    </p>
+                  </div>
+                </td>
+
+                {/* Students */}
+                <td
+                  className="py-2"
+                  style={{ borderRight: "1px solid #f1f1f0" }}
+                >
+                  <div className="flex items-center gap-2">
+                    <p className="text-sm font-bold text-stone-400 m-auto">
+                      {b.users.length}
+                    </p>
+                  </div>
+                </td>
+
+                {/* Batch Status */}
+                <td>
+                  <div className="flex justify-center"
+                  style={{ borderRight: "1px solid #f1f1f0" }}
+                >
+                  <BatchStatusBadge status={b.lifecycleStatus} />
+                  </div>
+                </td>
+
+                {/* Approval Status */}
+                <td>
+                  <div className="flex justify-center"
+                  style={{ borderRight: "1px solid #f1f1f0" }}
+                >
+                  <ApprovalStatusBadge status={b.approvalStatus} />
+                  </div>
+                </td>
+
+                {/* Created By */}
+                <td
+                  className="py-2"
+                  style={{ borderRight: "1px solid #f1f1f0" }}
+                >
+                  <div className="flex items-center gap-2">
+                    <p className="text-sm font-bold text-stone-500 m-auto">
+                      {b.initiatedBy.personal_info.name}
+                    </p>
+                  </div>
+                </td>
+
+                {/* Modified */}
+                <td
+                  className="py-2"
+                  style={{ borderRight: "1px solid #f1f1f0" }}
+                >
+                  <div className="flex items-center gap-2">
+                    <p className="text-sm text-stone-500 m-auto">
+                      {new Date(b.updatedAt).toLocaleDateString("en-GB").replaceAll("/", "-")}
+                    </p>
+                  </div>
+                </td>
+
+                {/* Actions */}
+                <td className="px-4 py-2">
+                  <div
+                    style={{
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: 5,
+                      marginTop: "auto",
+                    }}
+                  >
+                    {b.lifecycleStatus === "Draft" && (
+                      <>
+                        <ActionBtnList
+                          icon={SquarePen}
+                          primary
+                          onClick={() => onEdit(b)}
+                        />
+                        <ActionBtnList
+                          icon={Trash2}
+                          danger
+                          onClick={() => onDelete(b)}
+                        />
+                      </>
+                    )}
+
+                    {b.lifecycleStatus === "Active" && (
+                      <>
+                        <ActionBtnList
+                          icon={ScanEye}
+                          primary
+                          onClick={() => onView(b)}
+                        />
+                        <ActionBtnList
+                          icon={SquarePen}
+                          onClick={() => onEdit(b)}
+                        />
+                        <ActionBtnList
+                          icon={Copy}
+                          onClick={() => onDuplicate(b)}
+                        />
+                        <ActionBtnList
+                          icon={Trash2}
+                          danger
+                          onClick={() => onDelete(b)}
+                        />
+                      </>
+                    )}
+                    {b.lifecycleStatus === "Submitted" && (
+                      <>
+                        <ActionBtnList
+                          icon={ScanEye}
+                          primary
+                          onClick={() => onView(b)}
+                        />
+                        <ActionBtnList
+                          icon={Archive}
+                          onClick={() => onArchive(b._id)}
+                        />
+                      </>
+                    )}
+                    {b.lifecycleStatus === "Archived" && (
+                      <>
+                        <ActionBtnList
+                          icon={ScanEye}
+                          primary
+                          onClick={() => onView(b)}
+                        />
+                        <ActionBtnList
+                          icon={Copy}
+                          onClick={() => onDuplicate(b)}
+                        />
+                        <ActionBtnList
+                          icon={Trash2}
+                          danger
+                          onClick={() => onDelete(b)}
+                        />
+                      </>
+                    )}
+                  </div>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Batches/batches.jsx b/frontend/src/Components/Batches/batches.jsx
new file mode 100644
index 00000000..8eeeb6ae
--- /dev/null
+++ b/frontend/src/Components/Batches/batches.jsx
@@ -0,0 +1,555 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  LayoutGrid,
+  List,
+  Search,
+  X,
+  Info,
+  SquareUser,
+  Plus,
+  Building2,
+  FolderOpen,
+  CircleFadingArrowUp,
+} from "lucide-react";
+import ModalDialog from "./modalDialog";
+import { BatchCard, BatchList } from "./batchCard";
+import { Select } from "./select";
+import {
+  fetchBatches,
+  createBatch,
+  editBatch,
+  duplicateBatch,
+  deleteBatch,
+  archiveBatchApi,
+} from "../../services/batch";
+import { fetchEvents } from "../../services/events";
+import { fetchTemplates } from "../../services/templates";
+import { useAdminContext } from "../../context/AdminContext";
+
+export default function BatchesPage() {
+  const { isUserLoggedIn } = useAdminContext();
+  const [batches, setBatches] = useState([]);
+  const [events, setEvents] = useState([]);
+  const [templates, setTemplates] = useState([]);
+
+  const [search, setSearch] = useState("");
+  const [org, setOrg] = useState("ALL");
+  const [status, setStatus] = useState("ALL");
+  const [approvalStatus, setApprovalStatus] = useState("ALL");
+  const [creator, setCreator] = useState("ALL");
+  const [view, setView] = useState("grid");
+
+  const [viewingBatch, setViewingBatch] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editing, setEditing] = useState(null);
+
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [toast, setToast] = useState(null);
+  const [form, setForm] = useState({
+    title: "", // batch.title
+    eventId: "", // batch.eventId._id (if exists)
+    eventName: "", // batch.eventId.title
+    org: "", // batch.eventId.organizing_unit_id.name
+    startDate: "", // batch.eventId.schedule.start
+    endDate: "", // batch.eventId.schedule.end
+    venue: "", // batch.eventId.schedule.venue
+    description: "",
+    templateId: "", // batch.templateId._id
+    signatoryDetails: [], //batch.signatoryDetails
+    students: [], // batch.users
+  });
+
+  const fire = (msg) => {
+    setToast(msg);
+    setTimeout(() => setToast(null), 2200);
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [batches, events, templates] = await Promise.all([
+          fetchBatches(isUserLoggedIn?._id),
+          fetchEvents(),
+          fetchTemplates(),
+        ]);
+
+        if (!batches || !events || !templates) {
+          fire("Could not load data");
+          return;
+        }
+
+        //console.log("Batches is:", batches[0]);
+
+        Array.isArray(batches) && setBatches(batches);
+        Array.isArray(events) && setEvents(events);
+        if (templates?.status === 200) {
+          setTemplates(templates.data);
+        }
+      } catch (err) {
+        fire("Failed to load data");
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const filter = useMemo(() => {
+    const list = batches || [];
+    return {
+      statuses: [...new Set(list.map((b) => b.lifecycleStatus))],
+      approvalStatuses: [...new Set(list.map((b) => b.approvalStatus))],
+      creators: [...new Set(list.map((b) => b.initiatedBy.personal_info.name))],
+      organizations: [
+        ...new Set(list.map((b) => b.eventId.organizing_unit_id.name)),
+      ],
+    };
+  }, [batches]);
+
+  const filtered = (batches || []).filter((b) => {
+    const batchOrg = b.eventId.organizing_unit_id.name;
+    const matchSearch =
+      !search || b.title.toLowerCase().includes(search?.toLowerCase());
+    const matchOrg = org === "ALL" || batchOrg === org;
+    const matchStatus = status === "ALL" || b.lifecycleStatus === status;
+    const matchApprovalStatus =
+      approvalStatus === "ALL" || b.approvalStatus === approvalStatus;
+    const matchCreator =
+      creator === "ALL" || b.initiatedBy.personal_info.name === creator;
+    return (
+      matchSearch &&
+      matchOrg &&
+      matchStatus &&
+      matchApprovalStatus &&
+      matchCreator
+    );
+  });
+
+  const hasFilters =
+    org !== "ALL" ||
+    status !== "ALL" ||
+    approvalStatus !== "ALL" ||
+    creator !== "ALL" ||
+    search;
+  const clearAll = () => {
+    setOrg("ALL");
+    setStatus("ALL");
+    setCreator("ALL");
+    setApprovalStatus("ALL");
+    setSearch("");
+  };
+
+  const openCreate = () => {
+    setEditing(null);
+    setViewingBatch(null);
+    setForm({
+      title: "", // batch.title
+      eventId: "", // batch.eventId._id (if exists)
+      eventName: "", // batch.eventId.title
+      org: "", // batch.eventId.organizing_unit_id.name
+      startDate: "", // batch.eventId.schedule.start
+      endDate: "", // batch.eventId.schedule.end
+      venue: "", // batch.eventId.schedule.venue
+      description: "",
+      templateId: "", // batch.templateId._id
+      templateName: "", // batch.templateId.title
+      signatoryDetails: [], //batch.signatoryDetails
+      students: [], // batch.users
+    });
+    setModalOpen(true);
+  };
+
+  const openEdit = useCallback((b) => {
+    if (b.lifecycleStatus !== "Draft") return;
+    if (!b.eventId || !b.templateId) {
+      fire("Batch data is incomplete");
+      return;
+    }
+
+    setEditing(b);
+    setViewingBatch(null);
+    setForm({
+      title: b.title,
+      eventId: b.eventId?._id || "",
+      eventName: b.eventId.title || "",
+      org: b.eventId.organizing_unit_id?.name || "",
+      startDate: b.eventId?.schedule?.start
+        ? new Date(b.eventId.schedule.start).toLocaleDateString("en-GB")
+        : "",
+
+      endDate: b.eventId?.schedule?.end
+        ? new Date(b.eventId.schedule.end).toLocaleDateString("en-GB")
+        : "",
+
+      description: b.eventId.description || "",
+      templateId: b.templateId._id || "",
+      signatoryDetails: b.signatoryDetails || [],
+      students: b.users || [],
+    });
+    setModalOpen(true);
+  }, []);
+  const openView = useCallback((batch) => {
+    setViewingBatch(batch);
+    setEditing(null);
+    setForm({
+      title: batch.title,
+      eventId: batch.eventId._id,
+      eventName: batch.eventId.title,
+      org: batch.eventId.organizing_unit_id.name,
+      startDate: new Date(batch.eventId.schedule.start).toLocaleDateString(
+        "en-GB",
+      ),
+      endDate: new Date(batch.eventId.schedule.end).toLocaleDateString("en-GB"),
+      venue: batch.eventId.schedule.venue,
+      description: batch.eventId.description,
+      templateId: batch.templateId._id,
+      signatoryDetails: batch.signatoryDetails,
+      students: batch.users,
+    });
+    setModalOpen(true);
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setModalOpen(false);
+    setViewingBatch(null);
+    setEditing(null);
+  }, []);
+
+  // When user selects an event in the dropdown, populate Event Details from that event
+  const handleEventChange = useCallback(
+    (eventId) => {
+      const selected = events.find((ev) => ev._id === eventId);
+      setForm((f) => ({
+        ...f,
+        eventId,
+        eventName: selected ? selected.title : "",
+        org:
+          selected &&
+          selected.organizing_unit_id &&
+          (selected.organizing_unit_id.name || ""),
+        startDate:
+          selected && selected.schedule && selected.schedule.start
+            ? new Date(selected.schedule.start).toLocaleDateString("en-GB")
+            : "",
+        endDate:
+          selected && selected.schedule && selected.schedule.end
+            ? new Date(selected.schedule.end).toLocaleDateString("en-GB")
+            : "",
+        description: selected && (selected.description || ""),
+      }));
+      setSelectedEvent(selected);
+    },
+    [events],
+  );
+
+  const handleTemplateChange = useCallback(
+    (templateId) => {
+      const selected = templates.find((t) => t._id === templateId);
+      setForm((f) => ({
+        ...f,
+        templateId: selected && (selected._id || "Unknown"),
+      }));
+    },
+    [templates],
+  );
+
+  const getDifference = (editing, form) => {
+    const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
+    for (let key in form) {
+      if (!isEqual(form[key], editing[key])) return true;
+    }
+    return false;
+  };
+
+  const saveBatch = useCallback(
+    async (action) => {
+      if (
+        !form.title ||
+        !form.eventId ||
+        !form.templateId ||
+        form.signatoryDetails.length === 0 ||
+        form.students.length === 0
+      ) {
+        fire("Please fill in all fields");
+        return;
+      }
+      
+      try {
+        let response;
+        if (editing) {
+          if (action === "Draft") {
+            if (!getDifference(editing, form)) return;
+            response = await editBatch({
+              ...form,
+              action: "Draft",
+              batchId: editing?._id,
+            });
+          } else if (action === "Submitted") {
+            response = await editBatch({
+              ...form,
+              action: "Submitted",
+              batchId: editing?._id,
+            });
+          }
+        } 
+        else {
+          if (action === "Draft") {
+            response = await createBatch({
+              ...form,
+              action: "Draft",
+            });
+          } else if (action === "Submitted") {
+            response = await createBatch({
+              ...form,
+              action: "Submitted",
+            });
+          }
+        }
+
+        if(response.status !== 200 && response.status !== 201) return ;
+        closeModal();
+        fire(response.data);
+        const updated = await fetchBatches(isUserLoggedIn?._id);
+        if (updated) setBatches(updated);
+        
+      } catch (err) {
+        console.error(err);
+        fire("Failed to " + action);
+      }
+    },
+    [form],
+  );
+
+  const delBatch = useCallback(async (batch) => {
+    const response = await deleteBatch(batch._id);
+    response && fire(response);
+    const updated = await fetchBatches(isUserLoggedIn?._id);
+    if (updated && updated.length !== 0) setBatches(updated);
+  }, []);
+
+  const archiveBatch = useCallback(async (id) => {
+    const response = await archiveBatchApi(id);
+    response && fire(response);
+    const updated = await fetchBatches(isUserLoggedIn?._id);
+    if (updated && updated.length !== 0) setBatches(updated);
+  }, []);
+
+  const dupBatch = useCallback(async (b) => {
+    const response = await duplicateBatch(b?._id);
+    response && fire(response);
+    const updated = await fetchBatches(isUserLoggedIn?._id);
+
+    if (updated && updated.length !== 0) setBatches(updated);
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-[#FEFCE8] p-6">
+      <style>
+        {`@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap'); * { font-family:'DM Sans',sans-serif; }`}
+      </style>
+
+      {/* Toast */}
+      {toast && (
+        <div
+          style={{
+            position: "fixed",
+            top: 18,
+            right: 18,
+            zIndex: 200,
+            background: "#1a3d15",
+            color: "#fff",
+            borderRadius: 14,
+            padding: "10px 18px",
+            fontSize: 12,
+            fontWeight: 700,
+            boxShadow: "0 8px 32px rgba(26,61,21,0.3)",
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <span
+            style={{
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: "#86efac",
+              display: "inline-block",
+            }}
+          />
+          {toast}
+        </div>
+      )}
+
+      {/*Header */}
+      <div className="flex items-center gap-2.5 mb-5 flex-wrap">
+        {/* view toggle */}
+        <div className="flex items-center bg-white border border-yellow-100 rounded-xl p-1 gap-0.5">
+          <button
+            onClick={() => setView("grid")}
+            className={`p-1.5 !rounded-lg transition-colors ${view === "grid" ? "text-white shadow-sm" : "text-gray-400 hover:text-gray-600"}`}
+            style={
+              view === "grid"
+                ? { background: "linear-gradient(135deg, #2A6040, #1E4A30)" }
+                : {}
+            }
+          >
+            <LayoutGrid size={15} />
+          </button>
+          <button
+            onClick={() => setView("list")}
+            className={`p-1.5 !rounded-lg transition-colors ${view === "list" ? "text-white shadow-sm" : "text-gray-400 hover:text-gray-600"}`}
+            style={
+              view === "list"
+                ? { background: "linear-gradient(135deg, #2A6040, #1E4A30)" }
+                : {}
+            }
+          >
+            <List size={15} />
+          </button>
+        </div>
+
+        {/* search */}
+        <div className="relative flex-1 min-w-48 max-w-72">
+          <Search
+            size={13}
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+          />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search batches..."
+            className="w-full pl-8 pr-4 py-2 text-xs font-medium rounded-xl border border-yellow-100 bg-white text-gray-700 placeholder:text-gray-400 outline-none focus:border-yellow-300 focus:ring-2 focus:ring-yellow-100 transition-all"
+          />
+          {search && (
+            <button
+              onClick={() => setSearch("")}
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+
+        <Select
+          value={org}
+          onChange={setOrg}
+          options={filter.organizations}
+          icon={Building2}
+          placeholder="Organization"
+        />
+
+        <Select
+          value={status}
+          onChange={setStatus}
+          options={filter.statuses}
+          icon={Info}
+          placeholder="Batch Status"
+        />
+
+        <Select
+          value={approvalStatus}
+          onChange={setApprovalStatus}
+          options={filter.approvalStatuses}
+          icon={CircleFadingArrowUp}
+          placeholder="Approval Status"
+        />
+
+        <Select
+          value={creator}
+          onChange={setCreator}
+          options={filter.creators}
+          icon={SquareUser}
+          placeholder="Created By"
+        />
+
+        {hasFilters && (
+          <button
+            onClick={clearAll}
+            className="text-xs font-semibold bg-white text-yellow-700 !rounded-2xl border hover:text-yellow-900 px-2 py-2 "
+          >
+            Clear
+          </button>
+        )}
+
+        {/** Create */}
+        <div className="">
+          <button
+            onClick={openCreate}
+            className="flex items-center gap-2 px-3 py-2 !rounded-md text-sm font-bold text-white shadow-md shadow-emerald-900/20"
+            style={{ background: "linear-gradient(135deg, #2A6040, #1E4A30)" }}
+          >
+            <Plus size={16} />
+          </button>
+        </div>
+      </div>
+
+      {/* empty state */}
+      {filtered?.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <FolderOpen size={42} className="text-yellow-200 mb-3" />
+          <p className="text-lg font-bold text-gray-400">No batches found</p>
+          {search || hasFilters ? (
+            <p className="text-xs font-bold text-gray-400">
+              Try adjusting your filters or search
+            </p>
+          ) : (
+            <p className="text-xs font-bold text-gray-400">
+              No batches exist. Create one today
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* View grid */}
+      {view === "grid" && filtered?.length > 0 && (
+        <div
+          style={{
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(235px, 1fr))",
+            gap: 14,
+          }}
+        >
+          {filtered.map((b) => (
+            <BatchCard
+              key={b.id}
+              batch={b}
+              onView={openView}
+              onEdit={openEdit}
+              onDelete={delBatch}
+              onDuplicate={dupBatch}
+              onArchive={archiveBatch}
+            />
+          ))}
+        </div>
+      )}
+
+      {/**List grid */}
+      {view === "list" && filtered?.length > 0 && (
+        <BatchList
+          filtered={filtered}
+          onView={openView}
+          onEdit={openEdit}
+          onDelete={delBatch}
+          onDuplicate={dupBatch}
+          onArchive={archiveBatch}
+        />
+      )}
+
+      <ModalDialog
+        modalOpen={modalOpen}
+        closeModal={closeModal}
+        viewingBatch={viewingBatch}
+        editing={editing}
+        form={form}
+        setForm={setForm}
+        saveDraft={() => saveBatch("Draft")}
+        submitBatch={() => saveBatch("Submitted")}
+        events={events}
+        templates={templates}
+        handleEventChange={handleEventChange}
+        handleTemplateChange={handleTemplateChange}
+        selectedEvent={selectedEvent}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Batches/modalDialog.jsx b/frontend/src/Components/Batches/modalDialog.jsx
new file mode 100644
index 00000000..188084e4
--- /dev/null
+++ b/frontend/src/Components/Batches/modalDialog.jsx
@@ -0,0 +1,378 @@
+import { useState, useEffect } from "react";
+import { Modal, Field, Divider } from "./ui";
+import { fetchBatchUsers } from "../../services/batch";
+import { Users, ChevronDown, ChevronUp, Search, X, Plus } from "lucide-react";
+import StudentsPanel from "./StudentPanel";
+
+/* ─── tiny helpers ─────────────────────────────────────────── */
+const toId = (s) =>
+  s && typeof s === "object" ? (s._id || s).toString() : String(s);
+
+const initials = (name = "") =>
+  name
+    .split(" ")
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase() || "?";
+
+const DEFAULT_PIC = "https://www.gravatar.com/avatar/?d=mp";
+
+/* ─── Avatar ────────────────────────────────────────────────── */
+export function Avatar({ student, size = 34 }) {
+  const name = student.personal_info?.name || "";
+  const pic = student.personal_info?.profilePic;
+  const hasRealPic = pic && pic !== DEFAULT_PIC;
+
+  return (
+    <div
+      style={{
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        background: "#dcfce7",
+        border: "1.5px solid #bbf7d0",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 11,
+        fontWeight: 800,
+        color: "#166534",
+        flexShrink: 0,
+        overflow: "hidden",
+      }}
+    >
+      {hasRealPic ? (
+        <img
+          src={pic}
+          alt={name}
+          style={{ width: "100%", height: "100%", objectFit: "cover" }}
+        />
+      ) : (
+        initials(name)
+      )}
+    </div>
+  );
+}
+
+/* ─── Checkbox ──────────────────────────────────────────────── */
+export function Checkbox({ checked, disabled }) {
+  return (
+    <div
+      style={{
+        width: 17,
+        height: 17,
+        borderRadius: 5,
+        border: `1.5px solid ${checked ? "#16a34a" : "#d4d0cb"}`,
+        background: checked ? "#16a34a" : "#fff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        transition: "all 0.15s",
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      {checked && (
+        <svg width="10" height="7" viewBox="0 0 10 7" fill="none">
+          <path
+            d="M1 3.5L3.5 6L9 1"
+            stroke="white"
+            strokeWidth="1.6"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      )}
+    </div>
+  );
+}
+
+/* ─── Main ModalDialog ──────────────────────────────────────── */
+export default function ModalDialog({
+  modalOpen,
+  closeModal,
+  viewingBatch,
+  editing,
+  form,
+  setForm,
+  saveDraft,
+  submitBatch,
+  events = [],
+  templates = [],
+  handleEventChange,
+  handleTemplateChange,
+  selectedEvent,
+}) {
+  const hc = (e) =>
+    setForm((f) => ({
+      ...f,
+      [e.target.name]: e.target.value,
+    }));
+
+  const handleSignatoryChange = (index = -1, field, value) => {
+    setForm((prev) => {
+      if (index === -1) {
+        return { ...prev, signatoryDetails: [{ [field]: value }] };
+      }
+      const updated = [...prev.signatoryDetails];
+      updated[index] = {
+        ...updated[index],
+        [field]: value,
+      };
+
+      return { ...prev, signatoryDetails: updated };
+    });
+  };
+
+  const isViewOnly = viewingBatch && Object.keys(viewingBatch).length > 0;
+
+  useEffect(() => {
+    if (form.signatoryDetails.length === 0) {
+      setForm((prev) => ({
+        ...prev,
+        signatoryDetails: [{ name: "", role: "" }],
+      }));
+    }
+  }, []);
+
+  const selectStyle = {
+    width: "100%",
+    boxSizing: "border-box",
+    border: "1.5px solid #e7e5e0",
+    borderRadius: 12,
+    padding: "9px 12px",
+    fontSize: 13,
+    color: "#1c1917",
+    background: "#fafaf5",
+    outline: "none",
+    fontFamily: "inherit",
+  };
+
+  const labelStyle = {
+    display: "block",
+    fontSize: 10,
+    fontWeight: 800,
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    color: "#1a3d15",
+    marginBottom: 5,
+  };
+
+  return (
+    <Modal
+      open={modalOpen}
+      onClose={closeModal}
+      title={
+        viewingBatch
+          ? `View — ${viewingBatch.title}`
+          : editing
+            ? `Edit — ${editing.title}`
+            : "Create New Batch"
+      }
+    >
+      <Field
+        label="Batch Name"
+        name="title"
+        value={form.title}
+        onChange={hc}
+        placeholder="Hackathon 2026 Certificates"
+      />
+
+      <Divider label="Event Details" />
+
+      <div style={{ marginBottom: 12 }}>
+        <label style={labelStyle}>Event</label>
+        <select
+          name="eventId"
+          value={form.eventId || ""}
+          disabled={isViewOnly}
+          onChange={(e) => handleEventChange(e.target.value)}
+          style={selectStyle}
+        >
+          <option value="">Select an event</option>
+          {events.map((ev) => (
+            <option key={ev._id} value={ev._id}>
+              {ev.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <Field
+        label="Event Name"
+        name="eventName"
+        value={form.eventName || ""}
+        onChange={hc}
+        placeholder="Event Name"
+        disabled
+      />
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr 1fr",
+          gap: 12,
+        }}
+      >
+        <Field
+          label="Organization"
+          name="org"
+          value={form.org}
+          onChange={hc}
+          placeholder="Organization"
+          disabled
+        />
+        <Field
+          label="Start Date"
+          name="startDate"
+          type="text"
+          value={form.startDate}
+          onChange={hc}
+          disabled
+        />
+        <Field
+          label="End Date"
+          name="endDate"
+          type="text"
+          value={form.endDate}
+          onChange={hc}
+          disabled
+        />
+      </div>
+
+      <Field
+        label="Description"
+        name="description"
+        type="textarea"
+        value={form.description}
+        onChange={hc}
+        placeholder="Brief description…"
+      />
+
+      <Divider label="Certificate Details" />
+
+      <div style={{ marginBottom: 12 }}>
+        <label style={labelStyle}>Template</label>
+        <select
+          name="templateId"
+          value={form.templateId || ""}
+          onChange={(e) => handleTemplateChange(e.target.value)}
+          disabled={isViewOnly}
+          style={selectStyle}
+        >
+          <option value="">Select a template</option>
+          {templates?.map((t) => (
+            <option key={t._id} value={t._id}>
+              {t.title}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Signatory Details */}
+      <div className="flex flex-col gap-3">
+        {form.signatoryDetails.map((sig, index) => {
+          return (
+            <div key={index} className="grid grid-cols-2 gap-3">
+              <Field
+                label="Signatory Name"
+                name="name"
+                value={sig?.name || ""}
+                onChange={(e) =>
+                  handleSignatoryChange(index, "name", e.target.value)
+                }
+                placeholder="John Smith"
+                disabled={isViewOnly}
+              />
+              <Field
+                label="Role"
+                name="sigRole"
+                value={sig?.role || ""}
+                onChange={(e) =>
+                  handleSignatoryChange(index, "role", e.target.value)
+                }
+                placeholder="Dean"
+                disabled={isViewOnly}
+              />
+            </div>
+          );
+        })}
+
+        {!isViewOnly && form.signatoryDetails.length < 3 && (
+          <button
+            onClick={() =>
+              setForm((prev) => ({
+                ...prev,
+                signatoryDetails: [
+                  ...prev.signatoryDetails,
+                  { name: "", role: "" },
+                ],
+              }))
+            }
+            className="flex items-center gap-[4px] w-[10vw] px-2.5 py-1 !rounded-xl border border-[#e7e5e0]
+            bg-[#fafaf5] cursor-pointer !text-sm text-zinc-600 "
+          >
+            <Plus size={12} />
+            Add Signatory
+          </button>
+        )}
+      </div>
+
+      <Divider label="Students" />
+
+      <Field
+        label="No.of Students"
+        name="students"
+        type="number"
+        value={form.students.length !== 0 ? form.students.length : null}
+        placeholder="No.of Students"
+        disabled
+      />
+      <StudentsPanel
+        form={form}
+        setForm={setForm}
+        isViewOnly={isViewOnly}
+        selectedEvent={selectedEvent}
+      />
+
+      {/* ── modal footer buttons ── */}
+      <div className="flex mt-4">
+        {!isViewOnly ? (
+          <>
+            <button
+              onClick={closeModal}
+              className="px-[15px] py-[9px] !rounded-2xl border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-red-600 text-xs font-bold cursor-pointer"
+            >
+              Cancel
+            </button>
+
+            <div className="flex-1" />
+
+            <button
+              onClick={saveDraft}
+              className="px-[17px] py-[9px] !mr-3 !rounded-2xl border-[1.5px] border-amber-200 bg-amber-50 text-amber-800 text-xs font-extrabold cursor-pointer"
+            >
+              Save Draft
+            </button>
+
+            <button
+              onClick={submitBatch}
+              className="px-5 py-[9px] !rounded-2xl bg-[#1a3d15] text-white text-xs font-extrabold cursor-pointer"
+            >
+              Submit Batch
+            </button>
+          </>
+        ) : (
+          <button
+            onClick={closeModal}
+            className="px-[15px] py-[9px] !rounded-2xl border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-gray-600 text-xs font-bold cursor-pointer"
+          >
+            Close
+          </button>
+        )}
+      </div>
+    </Modal>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Batches/select.jsx b/frontend/src/Components/Batches/select.jsx
new file mode 100644
index 00000000..f62e0cc2
--- /dev/null
+++ b/frontend/src/Components/Batches/select.jsx
@@ -0,0 +1,15 @@
+import {ChevronDown} from "lucide-react"
+/* ── select dropdown ─────────────────────────────────────── */
+export const Select = ({ value, onChange, options = [], icon: Icon, placeholder }) => (
+    <div className="relative">
+      {Icon && <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />}
+      <select
+        value={value} onChange={e => onChange(e.target.value)}
+        className={`appearance-none bg-white border border-yellow-100 text-gray-700 text-xs font-semibold rounded-xl pr-7 py-2 outline-none focus:border-yellow-300 focus:ring-2 focus:ring-yellow-100 transition-all cursor-pointer ${Icon ? "pl-8" : "pl-3"}`}
+      >
+        <option value="ALL">{placeholder}</option>
+        {options.map(o => <option key={o} value={o}>{o}</option>)}
+      </select>
+      <ChevronDown size={12} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
+    </div>
+  );
\ No newline at end of file
diff --git a/frontend/src/Components/Batches/studentPanel.jsx b/frontend/src/Components/Batches/studentPanel.jsx
new file mode 100644
index 00000000..a31a492e
--- /dev/null
+++ b/frontend/src/Components/Batches/studentPanel.jsx
@@ -0,0 +1,293 @@
+import { useState, useEffect } from "react";
+import { fetchBatchUsers } from "../../services/batch";
+import { Users, ChevronDown, ChevronUp, Search, X } from "lucide-react";
+import { Avatar, Checkbox } from "./modalDialog";
+import { Modal } from "./ui";
+/* ─── tiny helpers ─────────────────────────────────────────── */
+const toId = (s) => s?._id;
+
+/* ─── StudentsPanel ─────────────────────────────────────────── */
+export default function StudentsPanel({
+  form,
+  setForm,
+  isViewOnly,
+  selectedEvent,
+}) {
+  const [open, setOpen] = useState(false);
+  const [details, setDetails] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [localSelected, setLocalSelected] = useState(new Set());
+  const [search, setSearch] = useState("");
+  let studentIds = (form.students || [])
+  .map((s) => (typeof s === "string" ? s : s?._id))
+  .filter(Boolean);
+  let count = studentIds?.length || 0;
+  /* reset when panel closes */
+  const closePanel = () => {
+    setOpen(false);
+    setSearch("");
+  };
+
+  /* fetch when opening */
+  useEffect(() => {
+    if (!open || !selectedEvent) return;
+    if (count === 0) {
+      count = Object.keys(selectedEvent?.participants).length || 0;
+      if (count === 0) {
+        setDetails([]);
+        setLocalSelected(new Set());
+        return;
+      } else studentIds = selectedEvent.participants || [];
+    }
+
+    let cancelled = false;
+    setLoading(true);
+
+    console.log("studentIds:", studentIds);
+    
+    fetchBatchUsers(studentIds).then((data) => {
+      if (cancelled) return;
+      setDetails(Array.isArray(data) ? data : []);
+      setLocalSelected(new Set(studentIds));
+      setLoading(false);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, selectedEvent]);
+
+  const toggle = (id) =>
+    setLocalSelected((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+
+  const selectAll = () => setLocalSelected(new Set(details.map((s) => s?._id)));
+
+  const deselectAll = () => setLocalSelected(new Set());
+
+  const saveSelection = () => {
+    setForm((f) => ({ ...f, students: Array.from(localSelected) }));
+    closePanel();
+  };
+
+  const cancelSelection = () => {
+    setLocalSelected(new Set(studentIds));
+    closePanel();
+  };
+
+  const filtered = details.filter((s) => {
+    if (!search.trim()) return true;
+    const q = search.toLowerCase();
+    return (
+      s.personal_info?.name?.toLowerCase().includes(q) ||
+      s._id?.toString().toLowerCase().includes(q) ||
+      s.academic_info?.branch?.toLowerCase().includes(q) ||
+      s.academic_info?.program?.toLowerCase().includes(q)
+    );
+  });
+
+  const allSelected =
+    details.length > 0 && details.every((s) => localSelected.has(s?._id));
+
+  const pendingChanges =
+    open &&
+    !isViewOnly &&
+    (localSelected.size !== count ||
+      !studentIds.every((id) => localSelected.has(id)));
+  return (
+    <>
+      {/* ── trigger button ── */}
+      <button
+        onClick={() => setOpen(true)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          width: "100%",
+          padding: "9px 12px",
+          borderRadius: 12,
+          border: "1.5px solid #e7e5e0",
+          background: "#fafaf5",
+          cursor: "pointer",
+          fontSize: 12,
+          fontWeight: 700,
+          color: "#1c1917",
+          fontFamily: "inherit",
+        }}
+      >
+        <Users size={13} color="#78716c" />
+        <span style={{ flex: 1, textAlign: "left" }}>View Participants</span>
+      </button>
+
+      <Modal open={open} onClose={closePanel} title="View Participants">
+        <div className="mt-3">
+          <div className="border-[1.5px] border-gray-400 rounded-xl bg-white overflow-hidden">
+            {/* search + bulk controls */}
+            <div className="px-2.5 py-2 border-b border-[#f0ede8] flex gap-1.5 items-center">
+              {/* search input */}
+              <div className="flex-1 relative">
+                <Search
+                  size={11}
+                  className="absolute left-2 top-1/2 -translate-y-1/2 text-[#a8a29e] pointer-events-none"
+                />
+
+                <input
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder="Search by name, ID, branch, program"
+                  className="w-full box-border border-[1.5px] border-[#e7e5e0] rounded-lg pl-6 pr-7 py-[5px] text-[11px] text-[#1c1917] bg-[#fafaf5] outline-none font-inherit"
+                />
+
+                {search && (
+                  <button
+                    onClick={() => setSearch("")}
+                    className="absolute right-1.5 top-1/2 -translate-y-1/2 bg-transparent border-none cursor-pointer p-0 flex items-center text-[#a8a29e]"
+                  >
+                    <X size={11} />
+                  </button>
+                )}
+              </div>
+
+              {/* Select All / Deselect All */}
+              {!isViewOnly && details.length > 0 && (
+                <button
+                  onClick={allSelected ? deselectAll : selectAll}
+                  className="text-[10px] font-bold px-2.5 py-[5px] !rounded-lg border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-[#1a3d15] cursor-pointer whitespace-nowrap font-inherit"
+                >
+                  {allSelected ? "Deselect All" : "Select All"}
+                </button>
+              )}
+            </div>
+
+            {/* student list */}
+            <div className="max-h-[240px] overflow-y-auto px-2.5 py-2 flex flex-col gap-1.5">
+              {loading ? (
+                <div className="flex justify-center items-center h-16 text-[#a8a29e] text-xs font-semibold">
+                  Loading participants…
+                </div>
+              ) : filtered.length === 0 ? (
+                <div className="text-center py-6 text-[#a8a29e] text-xs font-semibold">
+                  {count === 0
+                    ? "No participants added to this batch yet."
+                    : "No results match your search."}
+                </div>
+              ) : (
+                filtered.map((student) => (
+                  <StudentCard
+                    key={student?._id}
+                    student={student}
+                    selected={localSelected.has(student?._id)}
+                    onToggle={toggle}
+                    disabled={isViewOnly}
+                  />
+                ))
+              )}
+            </div>
+
+            {/* panel footer */}
+            <div className="border-t border-[#f0ede8] px-2.5 py-2 flex items-center gap-2">
+              {/* left: count summary */}
+              <span className="text-[10px] text-[#a8a29e] font-semibold flex-1">
+                {isViewOnly
+                  ? `${count} participant${count !== 1 ? "s" : ""} in batch`
+                  : `${localSelected.size} of ${details.length} selected`}
+              </span>
+
+              {isViewOnly ? (
+                <button
+                  onClick={closePanel}
+                  className="text-[11px] font-bold px-3.5 py-1.5 rounded-[10px] border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-[#78716c] cursor-pointer font-inherit"
+                >
+                  Close
+                </button>
+              ) : (
+                <>
+                  <button
+                    onClick={cancelSelection}
+                    className="text-md font-bold px-3.5 py-1.5 !rounded-xl border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] text-red-600 cursor-pointer font-inherit"
+                  >
+                    Cancel
+                  </button>
+
+                  <button
+                    onClick={saveSelection}
+                    className="text-md font-bold px-4 py-1.5 !rounded-xl border-none bg-green-600 text-white cursor-pointer font-inherit"
+                  >
+                    Save Selection
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+}
+
+/* ─── StudentCard ───────────────────────────────────────────── */
+function StudentCard({ student, selected, onToggle, disabled }) {
+  return (
+    <div
+      onClick={disabled ? undefined : () => onToggle(student?._id)}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "8px 10px",
+        borderRadius: 12,
+        border: `1.5px solid ${selected ? "#bbf7d0" : "#e7e5e0"}`,
+        background: selected ? "#f0fdf4" : "#fafaf5",
+        cursor: disabled ? "default" : "pointer",
+        transition: "border-color 0.15s, background 0.15s",
+        userSelect: "none",
+      }}
+    >
+      <Avatar student={student} />
+
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 12,
+            fontWeight: 700,
+            color: "#1c1917",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {student.personal_info?.name || "Unknown Student"} -{" "}
+          {student.username}
+        </div>
+
+        {(student.academic_info?.program ||
+          student.academic_info?.branch ||
+          student.academic_info?.batch_year) && (
+          <div
+            style={{
+              fontSize: 10,
+              color: "#a8a29e",
+              marginTop: 1,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {[
+              student?.academic_info?.program,
+              student?.academic_info?.branch,
+              student?.academic_info?.batch_year || "",
+            ]
+              .filter(Boolean)
+              .join(" · ")}
+          </div>
+        )}
+      </div>
+
+      <Checkbox checked={selected} disabled={disabled} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Batches/ui.jsx b/frontend/src/Components/Batches/ui.jsx
new file mode 100644
index 00000000..a112d4d1
--- /dev/null
+++ b/frontend/src/Components/Batches/ui.jsx
@@ -0,0 +1,321 @@
+const BATCH_COLORS = [
+  { bg: "#f0fdf4", border: "#bbf7d0", pill: "#166534", pillBg: "#dcfce7" },
+  { bg: "#fefce8", border: "#fde68a", pill: "#92400e", pillBg: "#fef3c7" },
+  { bg: "#f0f9ff", border: "#bae6fd", pill: "#0c4a6e", pillBg: "#e0f2fe" },
+  { bg: "#fdf4ff", border: "#e9d5ff", pill: "#581c87", pillBg: "#f3e8ff" },
+  { bg: "#fff1f2", border: "#fecdd3", pill: "#881337", pillBg: "#ffe4e6" },
+  { bg: "#f0fdfa", border: "#99f6e4", pill: "#134e4a", pillBg: "#ccfbf1" },
+];
+
+const BATCH_STATUS_MAP = {
+  Draft: {
+    label: "Draft",
+    dot: "#a8a29e",
+    bg: "#f5f5f4",
+    color: "#78716c",
+    border: "#e7e5e0",
+  },
+  Active: {
+    label: "Active",
+    dot: "#f59e0b",
+    bg: "#fffbeb",
+    color: "#92400e",
+    border: "#fde68a",
+  },
+  Submitted: {
+    label: "Submitted",
+    dot: "#22c55e",
+    bg: "#f0fdf4",
+    color: "#166534",
+    border: "#bbf7d0",
+  },
+  Archived: {
+    label: "Archived",
+    dot: "#274582",
+    bg: "#86aaceac",
+    color: "#374151",
+    border: "#6f8ebe",
+  },
+};
+
+const APPROVAL_STATUS_MAP = {
+  Pending: {
+    label: "Pending",
+    dot: "#f59e0b",
+    bg: "#fffbeb",
+    color: "#92400e",
+    border: "#fde68a",
+  },
+  Approved: {
+    label: "Approved",
+    dot: "#22c55e",
+    bg: "#f0fdf4",
+    color: "#166534",
+    border: "#bbf7d0",
+  },
+  Rejected: {
+    label: "Rejected",
+    dot: "#ef4444",
+    bg: "#fef2f2",
+    color: "#991b1b",
+    border: "#fecaca",
+  },
+  NA: {
+    label: "N/A",
+    dot: "#a8a29e",
+    bg: "#f5f5f4",
+    color: "#78716c",
+    border: "#e7e5e0",
+  },
+};
+
+function Brackets({ color }) {
+  const s = { position: "absolute", width: 12, height: 12 };
+  return (
+    <>
+      <span
+        style={{
+          ...s,
+          top: 8,
+          left: 8,
+          borderTop: `2px solid ${color}`,
+          borderLeft: `2px solid ${color}`,
+          borderRadius: "3px 0 0 0",
+        }}
+      />
+      <span
+        style={{
+          ...s,
+          top: 8,
+          right: 8,
+          borderTop: `2px solid ${color}`,
+          borderRight: `2px solid ${color}`,
+          borderRadius: "0 3px 0 0",
+        }}
+      />
+    </>
+  );
+}
+
+export function BatchStatusBadge({ status }) {
+  const s = BATCH_STATUS_MAP[status] || BATCH_STATUS_MAP.Draft;
+  return (
+    <span
+      className="text-[10px] font-bold tracking-[0.08em] uppercase py-[3px] px-[9px] rounded-full border inline-flex items-center gap-1 whitespace-nowrap leading-none"
+      style={{ borderColor: s.border, background: s.bg, color: s.color }}
+    >
+      <span className="w-[5px] h-[5px] rounded-full flex-shrink-0" style={{ background: s.dot }} />
+      {s.label}
+    </span>
+  );
+}
+
+export function ApprovalStatusBadge({ status }) {
+  const s = APPROVAL_STATUS_MAP[status] || APPROVAL_STATUS_MAP["NA"];
+  return (
+    <span
+      className="text-[10px] font-bold tracking-[0.08em] uppercase py-[3px] px-[9px] rounded-full border inline-flex items-center gap-1 whitespace-nowrap leading-none"
+      style={{ borderColor: s.border, background: s.bg, color: s.color }}
+    >
+      <span className="w-[5px] h-[5px] rounded-full flex-shrink-0" style={{ background: s.dot }} />
+      {s.label}
+    </span>
+  );
+}
+
+export function CertThumb({ batch }) {
+  const colorIndex = Math.floor(Math.random() * BATCH_COLORS.length);
+  const c = BATCH_COLORS[colorIndex % BATCH_COLORS.length];
+  return (
+    <div
+      style={{
+        background: c.bg,
+        border: `1.5px solid ${c.border}`,
+        borderRadius: 14,
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        padding: 14,
+        position: "relative",
+        boxSizing: "border-box",
+      }}
+    >
+      <Brackets color={c.border} />
+      <span
+        className="text-[9px] font-extrabold
+        tracking-[0.12em] uppercase
+        px-[10px] py-[3px]
+        rounded-full text-center
+        whitespace-pre-line border"
+        style={{
+          background: c.pillBg,
+          color: c.pill,
+          borderColor: c.border,
+        }}
+      >
+        {batch.title?.split("-").join("\n")}
+      </span>
+      <div
+        style={{
+          width: "58%",
+          height: 2,
+          borderRadius: 2,
+          background: c.border,
+        }}
+      />
+      <div
+        style={{
+          width: "38%",
+          height: 2,
+          borderRadius: 2,
+          background: c.border,
+          opacity: 0.55,
+        }}
+      />
+      <div
+        style={{
+          width: 26,
+          height: 26,
+          borderRadius: "50%",
+          border: `2px solid ${c.border}`,
+          marginTop: 2,
+        }}
+      />
+    </div>
+  );
+}
+
+export function Modal({ open, onClose, title, children }) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        className="absolute inset-0 bg-black/20 backdrop-blur-[4px]"
+      />
+
+      {/* Modal container */}
+      <div className="relative w-full max-w-[500px] max-h-[90vh] overflow-y-auto bg-white rounded-3xl border-[1.5px] border-[#e7e5e0] shadow-[0_24px_80px_rgba(0,0,0,0.1)]">
+        {/* Header */}
+        <div className="sticky top-0 z-[1] flex items-center justify-between px-[22px] py-4 bg-white border-b border-[#f0ede8] rounded-t-3xl">
+          <h2 className="m-0 !text-lg font-black text-[#1c1917]">{title}</h2>
+
+          <button
+            onClick={onClose}
+            className="w-7 h-7 !rounded-full border-[1.5px] border-[#e7e5e0] bg-[#fafaf5] cursor-pointer text-base text-stone-500 flex items-center justify-center"
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="px-[22px] py-[18px]">{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export function Field({
+  label,
+  name,
+  value,
+  onChange,
+  type = "text",
+  placeholder = "",
+  disabled = false,
+}) {
+  return (
+    <div style={{ marginBottom: 12 }}>
+      <label
+        style={{
+          display: "block",
+          fontSize: 10,
+          fontWeight: 800,
+          textTransform: "uppercase",
+          letterSpacing: "0.1em",
+          color: "#1a3d15",
+          marginBottom: 5,
+        }}
+      >
+        {label}
+      </label>
+      {type === "textarea" ? (
+        <textarea
+          name={name}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          rows={3}
+          style={{
+            width: "100%",
+            boxSizing: "border-box",
+            border: "1.5px solid #e7e5e0",
+            borderRadius: 12,
+            padding: "9px 12px",
+            fontSize: 13,
+            color: "#1c1917",
+            background: "#fafaf5",
+            resize: "none",
+            outline: "none",
+            fontFamily: "inherit",
+          }}
+        />
+      ) : (
+        <input
+          type={type}
+          name={name}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          style={{
+            width: "100%",
+            boxSizing: "border-box",
+            border: "1.5px solid #e7e5e0",
+            borderRadius: 12,
+            padding: "9px 12px",
+            fontSize: 13,
+            color: "#1c1917",
+            background: disabled ? "#f5f5f4" : "#fafaf5",
+            outline: "none",
+            fontFamily: "inherit",
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+export function Divider({ label }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        margin: "8px 0 10px",
+      }}
+    >
+      <span
+        style={{
+          fontSize: 10,
+          fontWeight: 800,
+          textTransform: "uppercase",
+          letterSpacing: "0.1em",
+          color: "#a8a29e",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {label}
+      </span>
+      <div style={{ flex: 1, height: 1, background: "#f0ede8" }} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Certificates/CertificatesList.jsx b/frontend/src/Components/Certificates/CertificatesList.jsx
new file mode 100644
index 00000000..182218da
--- /dev/null
+++ b/frontend/src/Components/Certificates/CertificatesList.jsx
@@ -0,0 +1,293 @@
+import React, { useState, useEffect } from "react";
+import { Download, Eye, Calendar, User, Award, Search } from "lucide-react";
+import { useAdminContext } from "../../context/AdminContext";
+import { fetchCertificates } from "../../services/certificate";
+import {toast} from "react-toastify";
+
+const CertificatesList = () => {
+  const { isUserLoggedIn } = useAdminContext();
+  const [certificates, setCertificates] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [certificateFilter, setCertificateFilter] = useState("ALL");
+  const [searchTerm, setSearchTerm] = useState("");
+
+  useEffect(() => {
+    async function loadCertificates() {
+      try {
+        setLoading(true);
+        /*{
+            _id: "1",
+            event: "Tech Fest 2024",
+            issuedBy: "Computer Science Club",
+            date: "2024-01-15",
+            status: "Approved",
+            certificateUrl: "#",
+            rejectionReason: undefined,
+          },*/
+
+        const response = await fetchCertificates();
+        if(Array.isArray(response)){
+          toast.success("Certificates fetched successfully");
+          setCertificates(response);
+          return ;
+        }
+
+      } catch (err) {
+        console.error("Error fetching certificates:", err);
+        setError("Failed to fetch certificates");
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    if (isUserLoggedIn && Object.keys(isUserLoggedIn).length > 0) {
+      loadCertificates();
+    }
+  }, [isUserLoggedIn]);
+
+  const filteredCertificates = certificates.filter((cert) => {
+    // Filter by status
+    const matchesStatus =
+      certificateFilter === "ALL" || cert.status === certificateFilter;
+
+    // Filter by search term (searches in event name and issuedBy)
+    const matchesSearch =
+      !searchTerm ||
+      cert.event?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      cert.issuedBy?.toLowerCase().includes(searchTerm.toLowerCase());
+
+    return matchesStatus && matchesSearch;
+  });
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case "Approved":
+        return "bg-green-100 text-green-800 border-green-300";
+      case "Pending":
+        return "bg-yellow-100 text-yellow-800 border-yellow-300";
+      case "Rejected":
+        return "bg-red-100 text-red-800 border-red-300";
+      default:
+        return "bg-gray-100 text-gray-800 border-gray-300";
+    }
+  };
+
+  const formatDate = (dateString) => {
+    if (!dateString) return "N/A";
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  const isSafeCertificateUrl = (url) => {
+    try {
+      const parsed = new URL(url, window.location.origin);
+      return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch {
+      return false;
+    }
+  };
+  
+
+  const filterButtons = [
+    { label: "ALL", value: "ALL" },
+    { label: "Pending", value: "Pending" },
+    { label: "Approved", value: "Approved" },
+    { label: "Rejected", value: "Rejected" },
+  ];
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-gray-600 text-lg">Loading certificates...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-red-600 text-lg">{error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col p-6 bg-gray-50">
+      {/* Filter Buttons */}
+      <div className="flex gap-3 mb-6  flex-shrink-0">
+        {filterButtons.map((btn) => (
+          <button
+            key={btn.value}
+            onClick={() => setCertificateFilter(btn.value)}
+            className={`px-4 h-[40px] !rounded-2xl font-semibold transition-all duration-200 ${
+              certificateFilter === btn.value
+                ? "bg-black text-white shadow-md"
+                : "bg-white text-black border-2 border-black hover:bg-gray-50"
+            }`}
+          >
+            {btn.label}
+          </button>
+        ))}
+
+        {/**search bar */}
+        <div className="relative flex-1 ">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+            size={20}
+          />
+          <input
+            type="text"
+            placeholder="Search by event or issued by..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-4 py-1.5 rounded-xl border-2 border-black bg-white text-black placeholder-gray-400 "
+          />
+        </div>
+      </div>
+
+      {/* Certificates Grid */}
+      <div className="flex-1 overflow-auto">
+        {filteredCertificates.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-gray-500">
+            <Award size={48} className="mb-4 opacity-50" />
+            <p className="text-lg">
+              {searchTerm
+                ? `No certificates found matching ${searchTerm}`
+                : `No ${certificateFilter === "ALL" ? "" : certificateFilter.toLowerCase()} certificates found.`}
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filteredCertificates.map((certificate) => (
+              <div
+                key={certificate._id}
+                className="bg-white rounded-2xl shadow-sm border-2 border-black p-3 flex flex-col hover:shadow-md transition-shadow"
+              >
+                {/* Certificate Header */}
+                <div className="flex items-start justify-between mb-4">
+                  <Award className="text-yellow-500" size={32} />
+                  <span
+                    className={`px-3 py-1 rounded-lg text-sm font-semibold border ${getStatusColor(
+                      certificate.status,
+                    )}`}
+                  >
+                    {certificate.status}
+                  </span>
+                </div>
+
+                {/* Certificate Details */}
+                <div className="flex-1 space-y-3 mb-4">
+                  <div>
+                    <div className="text-sm text-gray-500 mb-1">Event</div>
+                    <div className="text-base font-semibold text-gray-900">
+                      {certificate.event || "N/A"}
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="text-sm text-gray-500 mb-1 flex items-center gap-1">
+                      <User size={12} />
+                      Issued By
+                    </div>
+                    <div className="text-sm text-gray-700">
+                      {certificate.issuedBy || "N/A"}
+                    </div>
+                  </div>
+
+                  <div>
+                    <div className="text-sm text-gray-500 mb-1 flex items-center gap-1">
+                      <Calendar size={12} />
+                      Date
+                    </div>
+                    <div className="text-sm text-gray-700">
+                      {formatDate(certificate.date)}
+                    </div>
+                  </div>
+
+                  {certificate.rejectionReason && (
+                    <div className="bg-red-50 border border-red-200 rounded-lg p-2">
+                      <div className="text-sm text-red-600 font-semibold mb-1">
+                        Rejection Reason
+                      </div>
+                      <div className="text-xs text-red-700">
+                        {certificate.rejectionReason}
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-2 mt-auto">
+                  {certificate.status === "Approved" &&
+                    (certificate.certificateUrl === "#" ? (
+                    <button
+                    disabled
+                    className="w-full px-4 py-2 bg-gray-200 text-gray-600 rounded-lg cursor-not-allowed font-medium text-sm"
+                    >
+                    Certificate Generated (Download Coming Soon)
+                    </button>
+                  ) : (
+                  <>
+                 <button
+                  onClick={() => {
+                  window.open(
+                  certificate.certificateUrl,
+                  "_blank",
+                  "noopener,noreferrer"
+                  );
+                }}
+                className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800"
+              >
+              <Eye size={16} />
+              View
+              </button>
+
+              <button
+              onClick={() => {
+              const link = document.createElement("a");
+              link.href = certificate.certificateUrl;
+              link.download = `${certificate.event}_certificate.pdf`;
+              link.click();
+            }}
+            className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-white border-2 border-black rounded-lg"
+          > 
+            <Download size={16} />
+             Download
+            </button>
+        </>
+      ))}
+
+
+                  {certificate.status === "Pending" && (
+                    <button
+                      disabled
+                      //className="w-full px-4 py-2 bg-gray-100 text-gray-500 rounded-2xl cursor-not-allowed font-medium text-sm"
+                      className={`w-full px-4 py-2 rounded-lg font-medium text-sm cursor-not-allowed ${getStatusColor(certificate.status)}`}
+                    >
+                      Pending Approval
+                    </button>
+                  )}
+                  {certificate.status === "Rejected" && (
+                    <button
+                      disabled
+                      className={`w-full px-4 py-2 rounded-lg font-medium text-sm cursor-not-allowed ${getStatusColor(certificate.status)}`}
+                    >
+                      Certificate Rejected
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CertificatesList;
\ No newline at end of file
diff --git a/frontend/src/Components/Requests/Card.jsx b/frontend/src/Components/Requests/Card.jsx
new file mode 100644
index 00000000..a1b140d1
--- /dev/null
+++ b/frontend/src/Components/Requests/Card.jsx
@@ -0,0 +1,220 @@
+import { useState } from "react";
+import { useAdminContext } from "../../context/AdminContext";
+
+const STATUS = {
+  Pending: {
+    cls: "bg-yellow-50 text-yellow-700 border border-yellow-200",
+    dot: "bg-yellow-400",
+  },
+  Approved: {
+    cls: "bg-emerald-50 text-emerald-700 border border-emerald-100",
+    dot: "bg-emerald-500",
+  },
+  Rejected: {
+    cls: "bg-red-50 text-red-600 border border-red-100",
+    dot: "bg-red-400",
+  },
+  Draft: {
+    cls: "bg-gray-50 text-gray-600 border border-gray-100",
+    dot: "bg-gray-400",
+  },
+};
+
+const COL_BORDER = { borderRight: "1px solid #fef3c7" };
+
+export default function RequestsTable({
+  requests,
+  onApprove,
+  onReject,
+  onView,
+  onEdit,
+}) {
+  const { isUserLoggedIn } = useAdminContext();
+  return (
+    <div className="flex justify-center mt-4">
+      <style>{`@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap'); * { font-family:'DM Sans',sans-serif; box-sizing:border-box; }`}</style>
+
+      <div className="w-full max-w-6xl rounded-2xl overflow-hidden shadow-lg shadow-yellow-200/60 border border-yellow-100 bg-white">
+        {/* ── thead ─────────────────────────────────────────── */}
+        <table className="w-full border-collapse">
+          <thead>
+            <tr
+              style={{
+                background: "linear-gradient(135deg, #2A6040 0%, #1E4A30 100%)",
+              }}
+            >
+              {[
+                "Event",
+                "Organization",
+                "Event Schedule",
+                "Venue",
+                "Status",
+                "Actions",
+              ].map((h, i, arr) => (
+                <th
+                  key={h}
+                  className="px-4 py-2.5 text-left text-[10px] font-bold uppercase tracking-widest text-white/60 whitespace-nowrap"
+                  style={
+                    i < arr.length - 1
+                      ? { borderRight: "1px solid rgba(255,255,255,0.07)" }
+                      : {}
+                  }
+                >
+                  {h}
+                </th>
+              ))}
+            </tr>
+          </thead>
+
+          {/* ── tbody ─────────────────────────────────────────── */}
+          <tbody className="bg-white align-middle">
+            {requests.map((req, i) => {
+              const currentApprover =
+              req.approverIds?.[req.currentApprovalLevel];
+
+              const currentApproverId =
+                currentApprover?._id || currentApprover;
+
+              const isCurrentApprover =
+                currentApproverId?.toString() ===
+                isUserLoggedIn?._id?.toString();
+
+              const locked =
+                req.approvalStatus !== "Pending" ||
+                !isCurrentApprover;
+
+              
+              const last = i === requests.length - 1;
+              return (
+                <tr
+                  key={req._id}
+                  className="group hover:bg-amber-100/60 transition-colors duration-150"
+                  style={{
+                    borderBottom: last ? "none" : "2px solidrgb(198, 194, 150)",
+                  }}
+                >
+                  {/* Event Name */}
+                  <td className="px-3 py-2 align-middle" style={COL_BORDER}>
+                    <span
+                      className={`inline-flex items-center text-[12px] font-bold uppercase `}
+                    >
+                      {req.eventId.title}
+                    </span>
+                  </td>
+
+                  {/* organization Name */}
+                  <td
+                    className="px-3 py-2 align-middle max-w-[200px]"
+                    style={COL_BORDER}
+                  >
+                    <span className="inline-flex items-center text-sm text-gray-500 font-semibold">
+                      {req.eventId.organizing_unit_id.name}
+                    </span>
+                  </td>
+
+                  {/* Event Schedule */}
+                  <td
+                    className="px-3 py-2 whitespace-nowrap align-middle"
+                    style={COL_BORDER}
+                  >
+                    <span className="inline-flex items-center text-sm font-semibold  text-gray-500">
+                      {new Date(req.eventId.schedule.start).toLocaleDateString(
+                        "en-GB",
+                      )}{" "}
+                      -{" "}
+                      {new Date(req.eventId.schedule.end).toLocaleDateString(
+                        "en-GB",
+                      )}
+                    </span>
+                  </td>
+
+                  {/* Venue */}
+                  <td className="px-3 py-2 align-middle" style={COL_BORDER}>
+                    <span className="inline-flex items-center text-sm font-semibold text-gray-600">
+                      {req.eventId.schedule.venue}
+                    </span>
+                  </td>
+
+                  {/* status */}
+                  <td className="px-3 py-2 align-middle" style={COL_BORDER}>
+                    {(() => {
+                      const conf = STATUS[req.approvalStatus] || STATUS.Draft;
+                      return (
+                        <span
+                          className={`inline-flex items-center gap-1.5 text-[12px] font-semibold px-2.5 py-0.5 rounded-full ${conf.cls}`}
+                        >
+                          <span
+                            className={`w-1.5 h-1.5 rounded-full ${conf.dot}`}
+                          />
+                          {req.approvalStatus || "Draft"}
+                        </span>
+                      );
+                    })()}
+                  </td>
+
+                  {/* actions */}
+                  <td className="px-2 py-1.5 align-middle">
+                    <div className="flex items-center gap-1.5">
+                      <button
+                        className="px-2 !rounded-lg text-sm font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 border border-blue-100 transition-colors whitespace-nowrap"
+                        onClick={() => onView(req)}
+                      >
+                        View
+                      </button>
+                      {isCurrentApprover ? (
+                        <>
+                          <button
+                            onClick={() => onEdit(req)}
+                            disabled={locked}
+                            className={`px-2 !rounded-lg text-sm font-semibold border transition-colors
+                            ${
+                              locked
+                                ? "text-gray-300 bg-gray-50 border-gray-100 cursor-not-allowed"
+                                : "text-gray-600 bg-white border-gray-200 hover:bg-gray-50"
+                            }`}
+                          >
+                            Edit
+                          </button>
+                          <button
+                            onClick={() => {
+                              onApprove(true);
+                              onView(req);
+                            }}
+                            disabled={locked}
+                            className={`px-2 !rounded-lg text-sm font-semibold border transition-colors
+                            ${
+                              locked
+                                ? "text-gray-300 bg-gray-50 border-gray-100 cursor-not-allowed"
+                                : "text-emerald-700 bg-emerald-50 border-emerald-100 hover:bg-emerald-100"
+                            }`}
+                          >
+                            Approve
+                          </button>
+                          <button
+                            onClick={() => {
+                              onReject(true);
+                              onView(req);
+                            }}
+                            disabled={locked}
+                            className={`px-2 !rounded-lg text-sm font-semibold border transition-colors
+                            ${
+                              locked
+                                ? "text-gray-300 bg-gray-50 border-gray-100 cursor-not-allowed"
+                                : "text-red-600 bg-red-50 border-red-100 hover:bg-red-100"
+                            }`}
+                          >
+                            Reject
+                          </button>
+                        </>
+                      ) : null}
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Requests/Requests.jsx b/frontend/src/Components/Requests/Requests.jsx
new file mode 100644
index 00000000..b025b605
--- /dev/null
+++ b/frontend/src/Components/Requests/Requests.jsx
@@ -0,0 +1,219 @@
+import { Search, OctagonAlert, FileText } from "lucide-react";
+import { useEffect, useState, useCallback } from "react";
+import { useRequest } from "../../context/RequestContext";
+import { useAdminContext } from "../../context/AdminContext";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+
+import RequestsTable from "./Card";
+import { ViewModal } from "./viewModal";
+import { EditModal } from "./editModal";
+
+import { fetchBatches, approveBatch, rejectBatch } from "../../services/batch";
+
+export default function Requests() {
+  const { requestStatus, setRequestStatus } = useRequest();
+
+  const { isUserLoggedIn } = useAdminContext();
+  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const [requests, setRequests] = useState([]);
+  const [viewing, setViewing] = useState(null);
+  const [editing, setEditing] = useState(null);
+  const [approveStatus, setApproveStatus] = useState(null);
+  const [rejectStatus, setRejectStatus] = useState(null);
+  const [search, setSearch] = useState("");
+
+  const stats = [
+    { dot: "bg-yellow-400", label: "Pending", value: requestStatus.pending },
+    { dot: "bg-emerald-500", label: "Approved", value: requestStatus.approved },
+    { dot: "bg-red-500", label: "Rejected", value: requestStatus.rejected },
+  ];
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        if (!isUserLoggedIn || Object.keys(isUserLoggedIn).length === 0) {
+          navigate("/");
+          return;
+        }
+
+        setLoading(true);
+        //api req to fetch data
+        const response = await fetchBatches(isUserLoggedIn._id);
+
+        if (Array.isArray(response)) {
+          response && toast.success("User batches fetched successfully");
+          setRequests(response || []);
+          return;
+        }
+      } catch (err) {
+        toast.error(err.message || "Requests could not be fetched");
+        console.error(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [isUserLoggedIn]);
+
+  const filteredRequests = useCallback(() => {
+    return (requests || []).filter((req) => {
+      if (!search || !search.trim()) return true;
+
+      const event = req.eventId.title.toLowerCase();
+      const organization = req.eventId.organizing_unit_id.name.toLowerCase();
+      const requestedBy = req.initiatedBy.personal_info.name.toLowerCase();
+
+      const searchWords = search.toLowerCase().split(" ").filter(Boolean);
+
+      return searchWords.every(
+        (word) =>
+          event.includes(word) ||
+          organization.includes(word) ||
+          requestedBy.includes(word),
+      );
+    });
+  }, [requests, search]);
+
+  // keep request stats in sync with current requests
+  useEffect(() => {
+    if (!requests || requests.length === 0) {
+      setRequestStatus({ pending: 0, approved: 0, rejected: 0, total: 0 });
+      return;
+    }
+
+    let pending = 0;
+    let approved = 0;
+    let rejected = 0;
+    let total = 0;
+
+    (requests || []).forEach((req) => {
+      if (req.approvalStatus === "Approved") {
+        approved++;
+        total += req.users.length || 0;
+      } else if (req.approvalStatus === "Rejected") rejected++;
+      else pending++;
+    });
+
+    setRequestStatus({
+      pending,
+      approved,
+      rejected,
+      total,
+    });
+  }, [requests]);
+
+  const approve = async function (batch) {
+    const response = await approveBatch(batch);
+    console.log("Approve Batch ", response);
+    response && toast.success(response);
+    const updated = await fetchBatches(isUserLoggedIn?._id);
+    updated && setRequests(updated);
+  };
+
+  const reject = async function (batch) {
+    const response = await rejectBatch(batch);
+    response && toast.success(response);
+    const updated = await fetchBatches(isUserLoggedIn?._id);
+    updated && setRequests(updated);
+  };
+
+  function handleUpdateRequest(updatedRequest) {
+    setRequests((prev) =>
+      prev.map((req) => (req.id === updatedRequest.id ? updatedRequest : req)),
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-gray-600 text-lg">Loading Requests...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-[#FEFCE8] px-6 pt-4 pb-6 font-sans">
+      <style>{`@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap'); * { font-family: 'DM Sans', sans-serif; }`}</style>
+
+      {/* stats + search bar */}
+      <div className="flex items-center justify-between gap-10 mb-2">
+        {/* Stats Box */}
+        <div className="bg-white rounded-2xl shadow-md px-4 py-2.5 flex items-center gap-6">
+          {stats.map(({ dot, label, value }) => (
+            <div key={label} className="flex items-center gap-2">
+              <span className={`w-2.5 h-2.5 rounded-full ${dot}`} />
+              <span className="text-sm font-semibold text-gray-700">
+                {label}:{" "}
+                <span className="font-bold text-gray-900">{value}</span>
+              </span>
+            </div>
+          ))}
+
+          <div className="flex items-center gap-1 border-gray-100">
+            <FileText size={14} className="text-gray-400" />
+            <span className="text-sm font-semibold text-gray-700">
+              Certificates Generated:{" "}
+              <span className="font-bold text-gray-900">
+                {requestStatus.total}
+              </span>
+            </span>
+          </div>
+        </div>
+
+        {/* Search Input */}
+        <div className="relative flex-1 max-w-md">
+          <Search
+            size={14}
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+          />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search by event, organization or requester"
+            className="pl-9 pr-4 py-2 w-full text-sm rounded-xl border border-gray-200 bg-gray-50 text-gray-700 placeholder:text-gray-400 outline-none"
+          />
+        </div>
+      </div>
+
+      {/* Request Table */}
+      {filteredRequests().length === 0 ? (
+        <div className="text-center py-16 text-gray-400 text-sm font-medium">
+          No requests match your search.
+        </div>
+      ) : (
+        <RequestsTable
+          requests={filteredRequests()}
+          onView={setViewing}
+          onEdit={setEditing}
+          onApprove={setApproveStatus}
+          onReject={setRejectStatus}
+        />
+      )}
+
+      {viewing && (
+        <ViewModal
+          request={viewing}
+          approveStatus={approveStatus}
+          approve={approve}
+          rejectStatus={rejectStatus}
+          reject={reject}
+          onClose={() => {
+            setViewing(null);
+            approveStatus && setApproveStatus(null);
+            rejectStatus && setRejectStatus(null);
+          }}
+        />
+      )}
+      {editing && (
+        <EditModal
+          request={editing}
+          onClose={() => setEditing(null)}
+          setRequests={setRequests}
+        />
+      )}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Requests/editModal.jsx b/frontend/src/Components/Requests/editModal.jsx
new file mode 100644
index 00000000..4bcf1950
--- /dev/null
+++ b/frontend/src/Components/Requests/editModal.jsx
@@ -0,0 +1,355 @@
+import { useState } from "react";
+import {
+  X,
+  CalendarDays,
+  Users,
+  UserCircle2,
+  Award,
+  Pencil,
+  FlameKindling,
+  Save,
+  Building2,
+  ChevronDown,
+} from "lucide-react";
+
+import { Overlay, C } from "./ui";
+import { approverEditBatch, fetchBatches } from "../../services/batch";
+import { toast } from "react-toastify";
+import { useAdminContext } from "../../context/AdminContext";
+
+/* EDIT MODAL */
+const Field = ({ label, icon: Icon, children, half }) => (
+  <div
+    style={{
+      gridColumn: half ? undefined : "1 / -1",
+      display: "flex",
+      flexDirection: "column",
+      gap: 6,
+    }}
+  >
+    <label
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 6,
+        fontSize: 11,
+        fontWeight: 700,
+        color: C.warmGray,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+      }}
+    >
+      {Icon && <Icon size={13} strokeWidth={2} />}
+      {label} <span style={{ color: C.red }}>*</span>
+    </label>
+    {children}
+  </div>
+);
+
+const inputStyle = {
+  width: "100%",
+  padding: "10px 14px",
+  borderRadius: 10,
+  fontSize: 14,
+  color: C.text,
+  background: C.white,
+  border: `1.5px solid ${C.border}`,
+  outline: "none",
+  boxSizing: "border-box",
+  fontFamily: "inherit",
+  transition: "border-color 0.15s",
+};
+
+export const EditModal = ({ request, onClose, setRequests }) => {
+  const { isUserLoggedIn } = useAdminContext();
+  const [form, setForm] = useState({ ...request });
+  const [selected, setSelected] = useState(new Set());
+
+  const allIds = (request.users || []).map((u) => u._id);
+  const allSelected =
+    allIds.length > 0 && allIds.every((id) => selected.has(id));
+  const someSelected = allIds.some((id) => selected.has(id));
+  const toggleAll = () => {
+    if (allSelected) {
+      setSelected(new Set());
+    } else {
+      setSelected(new Set(allIds));
+    }
+  };
+
+  const toggleOne = (id) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+
+  const onSave = async () => {
+    if (selected.size === 0) {
+      toast.error("Please select at least one user");
+      return;
+    }
+
+    const response = await approverEditBatch({
+      ...form,
+      users: Array.from(selected),
+    });
+    response && toast.success(response);
+    const updated = await fetchBatches(isUserLoggedIn?._id);
+    updated && setRequests(updated);
+    onClose();
+  };
+
+  return (
+    <Overlay onClose={onClose}>
+      <div
+        style={{
+          width: "60vw",
+          height: "80vh",
+          maxHeight: "90vh",
+          background: C.cream,
+          borderRadius: 20,
+          overflow: "hidden",
+          border: `1.5px solid ${C.borderStrong}`,
+          boxShadow: "0 24px 60px rgba(30,26,10,0.3)",
+          fontFamily: "'DM Sans', sans-serif",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {/* header */}
+        <div
+          style={{
+            background: `linear-gradient(135deg, #F7F0A8 0%, #EDE090 100%)`,
+            padding: "22px 28px 18px",
+            borderBottom: `1px solid ${C.borderStrong}`,
+            flexShrink: 0,
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+            }}
+          >
+            <div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 4,
+                }}
+              >
+                <Pencil size={16} color={C.amber} strokeWidth={2.2} />
+                <span
+                  style={{
+                    fontSize: 11,
+                    fontWeight: 700,
+                    color: C.warmGray,
+                    letterSpacing: "0.1em",
+                    textTransform: "uppercase",
+                  }}
+                >
+                  Edit Request
+                </span>
+              </div>
+              <h2
+                style={{
+                  margin: 0,
+                  fontSize: 20,
+                  fontWeight: 800,
+                  color: C.text,
+                }}
+              >
+                Edit participant Details
+              </h2>
+              <p
+                style={{ margin: "4px 0 0", fontSize: 13, color: C.textMuted }}
+              >
+                Changes will update the certificate request record
+              </p>
+            </div>
+            <button
+              onClick={onClose}
+              style={{
+                background: "rgba(0,0,0,0.08)",
+                border: "none",
+                borderRadius: 8,
+                padding: 6,
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                color: C.warmGray,
+                flexShrink: 0,
+              }}
+            >
+              <X size={15} />
+            </button>
+          </div>
+        </div>
+
+        {/* scrollable body */}
+        <div className="p-6 flex flex-col gap-4 w-full">
+          {/* Selection summary */}
+          {selected.size > 0 && (
+            <div className="flex items-center justify-between bg-amber-100 border border-amber-200 rounded-lg px-3 py-2">
+              <span className="text-sm font-semibold text-amber-800">
+                {selected.size} participant{selected.size > 1 ? "s" : ""}{" "}
+                selected
+              </span>
+              <button
+                onClick={() => setSelected(new Set())}
+                className="text-[11px] font-bold text-amber-700 hover:text-amber-900"
+              >
+                Clear all
+              </button>
+            </div>
+          )}
+
+          {/* Scrollable Table */}
+          <div className="max-h-52 overflow-y-auto">
+            <table className="w-full border-collapse text-[12.5px]">
+              <thead className="sticky top-0 z-10 bg-amber-50">
+                <tr>
+                  {["SL.No", "Name", "Email", "Department", "Batch Year"].map(
+                    (h, i) => (
+                      <th
+                        key={h}
+                        className={`px-3 py-2 font-bold text-xs tracking-wider uppercase text-amber-800 border-b border-amber-200 whitespace-nowrap ${
+                          i === 0 ? "text-center w-10" : "text-left"
+                        }`}
+                      >
+                        {h}
+                      </th>
+                    ),
+                  )}
+
+                  {/* Select all th */}
+                  <th className="px-3 py-2 text-center font-bold text-xs tracking-wider uppercase text-amber-800 border-b border-amber-200 whitespace-nowrap">
+                    <div className="flex flex-col items-center gap-0.5">
+                      <input
+                        type="checkbox"
+                        checked={allSelected}
+                        ref={(el) => {
+                          if (el)
+                            el.indeterminate = someSelected && !allSelected;
+                        }}
+                        onChange={toggleAll}
+                        className="w-3.5 h-3.5 accent-green-300 cursor-pointer"
+                      />
+                      <span className="text-xs font-bold tracking-wider text-amber-800 ">
+                        {allSelected ? "Deselect All" : "All"}
+                      </span>
+                    </div>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {(request.users || []).map((user, idx) => {
+                  const isSelected = selected.has(user._id);
+                  return (
+                    <tr
+                      key={user._id || idx}
+                      className={`border-b border-amber-100 last:border-none hover:bg-amber-50 transition-colors ${
+                        idx % 2 === 0 ? "bg-white" : "bg-amber-50/40"
+                      }`}
+                    >
+                      <td className="px-3 py-1 text-center text-[12px] font-bold text-amber-600">
+                        {idx + 1}
+                      </td>
+                      <td className="px-3 py-1 font-semibold text-stone-900">
+                        {user.personal_info?.name || ""}
+                      </td>
+                      <td className="px-3 py-1 text-stone-500">
+                        {user.personal_info?.email || ""}
+                      </td>
+                      <td className="px-3 py-1">
+                        <span className="bg-amber-100 text-amber-800 border border-amber-200 rounded-md px-2 py-0.5 text-[11px] font-semibold">
+                          {user.academic_info?.branch || ""}
+                        </span>
+                      </td>
+                      <td className="px-3 py-1">
+                        <span className="bg-amber-100 text-amber-800 border border-amber-200 rounded-md px-2 py-0.5 text-[11px] font-semibold">
+                          {user.academic_info?.batch_year || ""}
+                        </span>
+                      </td>
+                      {/* Row checkbox */}
+                      <td className="px-3 py-1 text-center">
+                        <input
+                          type="checkbox"
+                          checked={isSelected}
+                          onChange={() => toggleOne(user._id)}
+                          onClick={(e) => e.stopPropagation()}
+                          className="w-3.5 h-3.5 accent-green-300 cursor-pointer"
+                        />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* footer */}
+        <div
+          style={{
+            padding: "16px 28px 24px",
+            borderTop: `1px solid ${C.border}`,
+            display: "flex",
+            gap: 10,
+            justifyContent: "flex-end",
+            flexShrink: 0,
+          }}
+        >
+          <button
+            onClick={onClose}
+            style={{
+              padding: "10px 22px",
+              borderRadius: 11,
+              background: "transparent",
+              color: C.warmGray,
+              border: `1.5px solid ${C.border}`,
+              cursor: "pointer",
+              fontWeight: 600,
+              fontSize: 14,
+              fontFamily: "inherit",
+            }}
+            onMouseEnter={(e) => {
+              e.target.style.background = C.creamDark;
+            }}
+            onMouseLeave={(e) => {
+              e.target.style.background = "transparent";
+            }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onSave}
+            style={{
+              padding: "10px 24px",
+              borderRadius: 11,
+              background: `linear-gradient(135deg, #2A6040, #1E4A30)`,
+              color: "#E8F5EE",
+              border: "none",
+              cursor: "pointer",
+              fontWeight: 700,
+              fontSize: 14,
+              fontFamily: "inherit",
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              boxShadow: "0 4px 14px rgba(30,74,48,0.3)",
+            }}
+          >
+            <Save size={15} />
+            Save Changes
+          </button>
+        </div>
+      </div>
+    </Overlay>
+  );
+};
\ No newline at end of file
diff --git a/frontend/src/Components/Requests/ui.jsx b/frontend/src/Components/Requests/ui.jsx
new file mode 100644
index 00000000..83399e93
--- /dev/null
+++ b/frontend/src/Components/Requests/ui.jsx
@@ -0,0 +1,47 @@
+/* ─── palette tokens (warm yellow theme) ─────────────────── */
+export const C = {
+    cream: "#FEFBE8",
+    creamDark: "#F5F0C8",
+    amber: "#D4A017",
+    amberLight: "#F0C040",
+    amberSoft: "#FBF0C0",
+    warmGray: "#6B6340",
+    text: "#2E2A1A",
+    textMuted: "#8A8060",
+    border: "#E8DFA0",
+    borderStrong: "#C9BB70",
+    green: "#3D7A4F",
+    greenBg: "#EAF5EE",
+    red: "#B94040",
+    redBg: "#FDEAEA",
+    white: "#FFFEF5",
+};
+
+
+/* ─── Modal Popup (click on it and it will come infront of screen) ─────────────────────────────────────── */
+export const Overlay = ({ children, onClose }) => (
+    <div
+      onClick={onClose}
+      className="fixed inset-0 z-50 bg-[rgba(30,26,10,0.45)] backdrop-blur-sm flex items-center justify-center p-3.5"
+    >
+      <div onClick={(e) => e.stopPropagation()}>
+        {children}
+      </div>
+    </div>
+);
+  
+  /* ─── pill badge (for showing status or priority)─────────────────────────────────────────── */
+export const Pill = ({ label, color = "amber" }) => {
+    const styles = {
+        amber: "bg-yellow-100 text-yellow-800",
+        red: "bg-red-100 text-red-700",
+        green: "bg-green-100 text-green-700 ",
+    };
+
+    return (
+        <span className={`inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs tracking-wide font-semibold ${styles[color]}`}
+        >
+            {label}
+        </span>
+    );
+};
\ No newline at end of file
diff --git a/frontend/src/Components/Requests/viewModal.jsx b/frontend/src/Components/Requests/viewModal.jsx
new file mode 100644
index 00000000..1ff2d312
--- /dev/null
+++ b/frontend/src/Components/Requests/viewModal.jsx
@@ -0,0 +1,245 @@
+import { Overlay, Pill, C } from "./ui";
+import { X, CalendarDays, Users, UserCircle2, Award } from "lucide-react";
+
+const labelColor = {
+  Approved: "green",
+  Rejected: "red",
+  Pending: "amber",
+};
+
+/* ─── info tile (used in View modal) ────────────────────── */
+const InfoTile = ({ icon: Icon, label, value, wide }) => (
+  <div
+    className={`
+      ${wide ? "col-span-full" : ""}
+      rounded-[14px]
+      flex flex-col gap-[6px]
+      border
+    `}
+    style={{
+      padding: "16px 20px",
+      background: C.white,
+      borderColor: C.border
+    }}
+  >
+    <div
+      className="flex items-center gap-[7px]"
+      style={{ color: C.warmGray}}
+    >
+      <Icon size={15} strokeWidth={2} />
+      <span className="text-[11px] font-semibold tracking-[0.08em] uppercase">
+        {label}
+      </span>
+    </div>
+
+    <span
+      className={`
+        text-[20px] font-bold tracking-[-0.01em]
+        text-[${C.text}]
+      `}
+    >
+      {value}
+    </span>
+  </div>
+);
+
+/* VIEW MODAL */
+export const ViewModal = ({
+  request,
+  onClose,
+  approveStatus,
+  approve,
+  rejectStatus,
+  reject,
+}) => (
+  <Overlay onClose={onClose}>
+    <div
+      className= "w-[50vw] rounded-[20px] overflow-hidden border-[1.5px] shadow-[0_24px_60px_rgba(30,26,10,0.28)]"
+
+      style={{
+        background: C.cream,
+        borderColor: C.borderStrong,
+        fontFamily: "'DM Sans', sans-serif",
+      }}
+    >
+      {/* header strip */}
+      <div
+        className="
+          bg-[linear-gradient(135deg,#F7F0A8_0%,#EDE090_100%)]
+          w-full h-14
+          border-b
+          relative"
+
+        style={{borderColor: C.borderStrong }}
+      >
+        <div className="flex items-start justify-between gap-3">
+          {/* Left: title + org */}
+          <div className="flex flex-col gap-1 my-2 mx-6">
+            <span className="text-md font-bold text-stone-900 leading-tight">
+              {request.eventId.title}
+            </span>
+            <span className="text-md font-bold text-zinc-500">
+              {request.eventId.organizing_unit_id.name}
+            </span>
+          </div>
+
+          {/* Right: close button */}
+          <button
+            onClick={onClose}
+            className={`
+              shrink-0
+              mt-3 !mr-8
+              bg-[rgba(0,0,0,0.08)]
+              !rounded-md
+              p-[5px]
+              cursor-pointer
+              text-[${C.warmGray}]
+              hover:bg-[rgba(0,0,0,0.14)]
+              transition-colors
+            `}
+          >
+            <X size={16} />
+          </button>
+        </div>
+      </div>
+
+      {/* body */}
+      <div className="p-6 flex flex-col gap-4 w-full">
+        {/* Participants Table */}
+        <div className="border border-amber-200 rounded-xl overflow-hidden">
+          {/* Table Header Bar */}
+          <div className="bg-amber-50 px-4 border-b border-amber-200 flex items-center justify-between">
+            <span className="flex items-center py-2 text-sm font-semibold tracking-widest uppercase text-amber-800">
+              Participants
+            </span>
+            <span className="text-xs font-semibold text-amber-800 bg-amber-100 border border-amber-200 rounded-full px-3 py-0.5">
+              {request.users?.length || 0} members
+            </span>
+          </div>
+
+          {/* Scrollable Table */}
+          <div className="max-h-52 overflow-y-auto">
+            <table className="w-full border-collapse text-[12.5px]">
+              <thead className="sticky top-0 z-10 bg-amber-50">
+                <tr>
+                  {["SL.No", "Name", "Email", "Department", "Batch Year"].map(
+                    (h, i) => (
+                      <th
+                        key={h}
+                        className={`px-3 py-2 font-bold text-xs tracking-wider uppercase text-amber-800 border-b border-amber-200 whitespace-nowrap ${
+                          i === 0 ? "text-center w-10" : "text-left"
+                        }`}
+                      >
+                        {h}
+                      </th>
+                    ),
+                  )}
+                </tr>
+              </thead>
+              <tbody>
+                {(request.users || []).map((user, idx) => (
+                  <tr
+                    key={user._id || idx}
+                    className={`border-b border-amber-100 last:border-none hover:bg-amber-50 transition-colors ${
+                      idx % 2 === 0 ? "bg-white" : "bg-amber-50/40"
+                    }`}
+                  >
+                    <td className="px-3 py-1 text-center text-[12px] font-bold text-amber-600">
+                      {idx + 1}
+                    </td>
+                    <td className="px-3 py-1 font-semibold text-stone-900">
+                      {user.personal_info?.name || ""}
+                    </td>
+                    <td className="px-3 py-1 text-stone-500">
+                      {user.personal_info?.email || ""}
+                    </td>
+                    <td className="px-3 py-1">
+                      <span className="bg-amber-100 text-amber-800 border border-amber-200 rounded-md px-2 py-0.5 text-[11px] font-semibold">
+                        {user.academic_info?.branch || ""}
+                      </span>
+                    </td>
+                    <td className="px-3 py-1">
+                      <span className="bg-amber-100 text-amber-800 border border-amber-200 rounded-md px-2 py-0.5 text-[11px] font-semibold">
+                        {user.academic_info?.batch_year || ""}
+                      </span>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {/* Event Details */}
+        <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
+          <p className="text-sm font-bold tracking-widest uppercase text-amber-800 mb-3">
+            Event Details
+          </p>
+          <div className="grid grid-cols-2">
+            {[
+              { label: "Event Title", value: request.eventId.title },
+              { label: "Venue", value: request.eventId.schedule.venue },
+              {
+                label: "Start Date",
+                value: new Date(
+                  request.eventId.schedule.start,
+                ).toLocaleDateString("en-GB"),
+              },
+              {
+                label: "End Date",
+                value: new Date(
+                  request.eventId.schedule.end,
+                ).toLocaleDateString("en-GB"),
+              },
+              { label: "Mode", value: request.eventId.schedule.mode || "—" },
+              {
+                label: "Batch Created",
+                value: new Date(request.createdAt).toLocaleDateString("en-GB"),
+              },
+              {
+                label: "Initiated By",
+                value: request.initiatedBy.personal_info.name,
+                wide: true,
+              },
+            ].map(({ label, value, wide }) => (
+              <div key={label} className={wide ? "col-span-2" : ""}>
+                <p className="text-xs font-semibold tracking-wide uppercase text-amber-600">
+                  {label}
+                </p>
+                <p className="text-sm font-semibold text-stone-900 mt-0">
+                  {value}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Close Button */}
+        <div className="flex justify-end">
+          <button
+            onClick={onClose}
+            className="px-3 py-1 !rounded-xl border-none cursor-pointer font-bold text-sm bg-stone-900 text-amber-50 !mr-4"
+          >
+            Close
+          </button>
+          {approveStatus && (
+            <button
+              onClick={() => approve(request)}
+              className="px-3 py-1 !rounded-xl border-none cursor-pointer font-bold text-sm bg-green-600 text-amber-50"
+            >
+              Approve
+            </button>
+          )}
+          {rejectStatus && (
+            <button
+              onClick={() => reject(request)}
+              className="px-3 py-1 !rounded-xl border-none cursor-pointer font-bold text-sm bg-red-500 text-amber-50"
+            >
+              Reject
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  </Overlay>
+);
\ No newline at end of file
diff --git a/frontend/src/Components/Templates/Select.jsx b/frontend/src/Components/Templates/Select.jsx
new file mode 100644
index 00000000..e555aac4
--- /dev/null
+++ b/frontend/src/Components/Templates/Select.jsx
@@ -0,0 +1,15 @@
+import {ChevronDown} from "lucide-react"
+/* ── select dropdown ─────────────────────────────────────── */
+export const Select = ({ value, onChange, options, icon: Icon, placeholder }) => (
+    <div className="relative">
+      {Icon && <Icon size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />}
+      <select
+        value={value} onChange={e => onChange(e.target.value)}
+        className={`appearance-none bg-white border border-yellow-100 text-gray-700 text-xs font-semibold rounded-xl pr-7 py-2 outline-none focus:border-yellow-300 focus:ring-2 focus:ring-yellow-100 transition-all cursor-pointer ${Icon ? "pl-8" : "pl-3"}`}
+      >
+        <option value="All">{placeholder}</option>
+        {options.map(o => <option key={o} value={o}>{o === "All" ? placeholder : o}</option>)}
+      </select>
+      <ChevronDown size={12} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none" />
+    </div>
+  );
\ No newline at end of file
diff --git a/frontend/src/Components/Templates/Template.jsx b/frontend/src/Components/Templates/Template.jsx
new file mode 100644
index 00000000..ba83f006
--- /dev/null
+++ b/frontend/src/Components/Templates/Template.jsx
@@ -0,0 +1,538 @@
+import { useState, useEffect, useMemo } from "react";
+import {
+  Search,
+  Plus,
+  Eye,
+  Pencil,
+  Trash2,
+  FileText,
+  LayoutGrid,
+  List,
+  X,
+  Filter,
+  SquareUser,
+  Info,
+} from "lucide-react";
+
+import { toast } from "react-toastify";
+
+import TemplateModal from "./TemplateModal";
+import ThumbnailPreview from "./thumbnailPreview";
+import { Select } from "./Select";
+import { useAdminContext } from "../../context/AdminContext";
+import { fetchTemplates } from "../../services/templates";
+import { deleteTemplate } from "../../services/templates";
+
+const STATUS_STYLE = {
+  Active: "bg-emerald-100 text-emerald-700 border border-emerald-200",
+  Draft: "bg-yellow-100 text-yellow-700 border border-yellow-300",
+  Archived: "bg-gray-100 text-gray-500 border border-gray-200",
+};
+
+const STATUS_DOT = {
+  Active: "bg-emerald-500",
+  Draft: "bg-yellow-400",
+  Archived: "bg-gray-400",
+};
+
+const TEMPLATE_STATUS_MAP = {
+  Active: "#5c8a6e",   // muted green
+  Draft: "#8a7d5c",    // muted amber/tan
+  Archived: "#6e7a8a", // muted slate blue
+};
+
+export default function Templates() {
+  const [templates, setTemplates] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const [showModal, setShowModal] = useState(false);
+  const [selectedTemplate, setSelectedTemplate] = useState(null);
+
+  const [search, setSearch] = useState("");
+  const [catFilter, setCat] = useState("All");
+  const [statusFilter, setStatus] = useState("All");
+  const [creatorFilter, setCreator] = useState("All");
+  const [mode, setMode] = useState("create");
+  const [view, setView] = useState("grid"); // "grid" | "list"
+
+  const { userRole} = useAdminContext();
+  const role = (userRole || "").toUpperCase();
+
+  const loadTemplates = async () => {
+  setLoading(true);
+
+  try {
+    const res = await fetchTemplates();
+
+    if (res?.status === 200) {
+      setTemplates(res.data);
+    }
+  } finally {
+    setLoading(false);
+  }
+};
+
+useEffect(() => {
+  loadTemplates();
+}, []);
+
+
+  const filtered = templates?.filter((t) => {
+    if(!t?.title || !t?.category || !t?.createdBy?.personal_info?.name || !t.status) return false;
+
+    const matchSearch = !search || t.title.toLowerCase().includes(search?.toLowerCase());
+    const matchCat = catFilter === "All" || t.category === catFilter;
+    const matchStatus = statusFilter === "All" || t.status === statusFilter;
+    const matchCreator =
+      creatorFilter === "All" ||
+      t.createdBy.personal_info.name === creatorFilter;
+  
+    return matchSearch && matchCat && matchStatus && matchCreator;
+  });
+
+  const filters = useMemo(
+    () => ({
+      categories: [...new Set(templates?.map((t) => t.category))],
+      statuses: [...new Set(templates?.map((t) => t.status))],
+      creators: [
+        ...new Set(templates?.map((t) => t.createdBy.personal_info.name)),
+      ],
+    }),
+    [templates],
+  );
+  
+  
+  const del = async (id) => {
+  const ok = window.confirm(
+    "Are you sure you want to archive this template?"
+  );
+
+  if (!ok) return;
+
+  try {
+    await deleteTemplate(id);
+    await loadTemplates();
+  } catch (err) {
+    console.error(err);
+    toast.error("Failed to archive template.");
+  }
+};
+
+  const hasFilters =
+    catFilter !== "All" ||
+    statusFilter !== "All" ||
+    creatorFilter !== "All" ||
+    search;
+
+  const clearAll = () => {
+    setCat("All");
+    setStatus("All");
+    setCreator("All");
+    setSearch("");
+  };
+
+  if (loading) {
+  return (
+    <div className="flex justify-center items-center h-96">
+      <p className="text-gray-500">Loading templates...</p>
+    </div>
+  );
+}
+
+  return (
+    <div className="min-h-screen bg-[#FEFCE8] p-6">
+      <style>{`@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap'); * { font-family:'DM Sans',sans-serif; }`}</style>
+
+      {/* ── filters bar ───────────────────────────────────── */}
+      <div className="flex items-center gap-2.5 mb-5 flex-wrap">
+        {/* view toggle */}
+        <div className="flex items-center bg-white border border-yellow-100 rounded-xl p-1 gap-0.5">
+          <button
+            onClick={() => setView("grid")}
+            className={`p-1.5 !rounded-lg transition-colors ${view === "grid" ? "text-white shadow-sm" : "text-gray-400 hover:text-gray-600"}`}
+            style={
+              view === "grid"
+                ? { background: "linear-gradient(135deg, #2A6040, #1E4A30)" }
+                : {}
+            }
+          >
+            <LayoutGrid size={15} />
+          </button>
+          <button
+            onClick={() => setView("list")}
+            className={`p-1.5 !rounded-lg transition-colors ${view === "list" ? "text-white shadow-sm" : "text-gray-400 hover:text-gray-600"}`}
+            style={
+              view === "list"
+                ? { background: "linear-gradient(135deg, #2A6040, #1E4A30)" }
+                : {}
+            }
+          >
+            <List size={15} />
+          </button>
+        </div>
+
+        {/* search */}
+        <div className="relative flex-1 min-w-48 max-w-72">
+          <Search
+            size={13}
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
+          />
+          <input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder="Search templates…"
+            className="w-full pl-8 pr-4 py-2 text-xs font-medium rounded-xl border border-yellow-100 bg-white text-gray-700 placeholder:text-gray-400 outline-none focus:border-yellow-300 focus:ring-2 focus:ring-yellow-100 transition-all"
+          />
+          {search && (
+            <button
+              onClick={() => setSearch("")}
+              className="absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+            >
+              <X size={12} />
+            </button>
+          )}
+        </div>
+
+        <Select
+          value={catFilter}
+          onChange={setCat}
+          options={filters.categories}
+          icon={Filter}
+          placeholder="Categories"
+        />
+
+        <Select
+          value={statusFilter}
+          onChange={setStatus}
+          options={filters.statuses}
+          icon={Info}
+          placeholder="Status"
+        />
+
+        <Select
+          value={creatorFilter}
+          onChange={setCreator}
+          options={filters.creators}
+          icon={SquareUser}
+          placeholder="Creators"
+        />
+
+        {hasFilters && (
+          <button
+            onClick={clearAll}
+            className="text-xs font-semibold bg-white text-yellow-700 !rounded-2xl border hover:text-yellow-900 px-2 py-2 "
+          >
+            Clear all
+          </button>
+        )}
+
+        <div className="ml-32">
+          <button
+            onClick={() => {
+              setMode("create");
+              setSelectedTemplate(null);
+              setShowModal(true);
+            }}
+            className="flex items-center gap-2 px-4 py-2.5 !rounded-2xl text-sm font-bold text-white shadow-md shadow-emerald-900/20"
+          style={{
+             background:"linear-gradient(135deg,#2A6040,#1E4A30)",
+  }}
+>
+  <Plus size={16} />
+  <span>Create</span>
+</button>
+        </div>
+      </div>
+
+      {/* ── empty state ───────────────────────────────────── */}
+      {filtered?.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-24 text-center">
+          <FileText size={42} className="text-yellow-200 mb-3" />
+          <p className="text-lg font-bold text-gray-400">No templates found</p>
+          {search ? (
+            <p className="text-xs font-bold text-gray-400">
+              Try adjusting your filters or search
+            </p>
+          ) : (
+            <p className="text-xs font-bold text-gray-400">
+              No templates exist. Create one today
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* GRID VIEW */}
+      {view === "grid" && filtered?.length > 0 && (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {filtered?.map((t) => (
+            <div
+              key={t._id}
+              className="group bg-white border border-yellow-100 rounded-2xl overflow-hidden hover:border-yellow-200 hover:shadow-lg hover:shadow-yellow-100/50 transition-all duration-200 cursor-pointer"
+            >
+              {/* thumbnail */}
+              <div className="relative h-36 w-full border-b border-yellow-50">
+                <ThumbnailPreview color={TEMPLATE_STATUS_MAP[t.status]} category={t.category}/>
+                {/* hover overlay */}
+                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors duration-200" />
+                {/* status badge */}
+                <div className="absolute bottom-2.5 right-2.5">
+                  <span
+                    className={`inline-flex items-center mr-3 mb-1 gap-1 text-[9px] font-bold px-2 py-0.5 rounded-full ${STATUS_STYLE[t.status]}`}
+                  >
+                    <span
+                      className={`w-1 h-1 rounded-full ${STATUS_DOT[t.status]}`}
+                    />
+                    {t.status}
+                  </span>
+                </div>
+              </div>
+
+              {/* card body */}
+              <div className="rounded-b-2xl bg-white">
+                {/* inner panel mimicking the rounded sub-card in the image */}
+                <div className="rounded-xl p-2.5 space-y-2 ">
+                  {/* Row 1: NAME field + small category box */}
+                  <div className="flex items-center justify-between">
+                    <div className="flex border border-yellow-200 rounded-md px-2 bg-amber-50/40">
+                      <p className="text-[12px] font-bold text-gray-900 truncate my-auto p-2 leading-tight">
+                        {t.title}
+                      </p>
+                    </div>
+                    <div className="flex border border-yellow-200 rounded-2xl px-2 bg-amber-50/40 mr-5">
+                      <span className="text-[10px] font-bold uppercase mx-auto py-1 tracking-widest text-amber-600 whitespace-nowrap">
+                        {t.category}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Row 2 */}
+                  <div className="flex items-center justify-between">
+                    {/* LEFT: action buttons */}
+                    <div className="flex items-center gap-1.5">
+                      <button
+                        className={`flex items-center justify-center h-6 border border-yellow-200 !rounded-xl px-2 text-blue-600 hover:bg-blue-100 shrink-0`}
+                        onClick={() => {
+    setSelectedTemplate(t);
+    setMode("view");
+    setShowModal(true);
+}}
+                      >
+                        <span
+                          className={`text-[9px] font-bold uppercase tracking-widest whitespace-nowrap`}
+                        >
+                          View
+                        </span>
+                      </button>
+
+                      {(role === "PRESIDENT" ||
+                      role.startsWith("GENSEC") ||
+                      t.title.includes("Copy")) ? (
+                        <>
+                          <button
+                            className={`flex items-center justify-center h-6 border border-yellow-200 !rounded-xl px-2 text-gray-600 hover:bg-gray-200 shrink-0`}
+                            onClick={() => {
+    setSelectedTemplate(t);
+    setMode("edit");
+    setShowModal(true);
+}}
+                          >
+                            <span
+                              className={`text-[9px] font-bold uppercase tracking-widest whitespace-nowrap`}
+                            >
+                              Edit
+                            </span>
+                          </button>
+
+                          <button
+                            className={`flex items-center justify-center h-6 border border-yellow-200 !rounded-xl px-2 text-red-600 hover:bg-red-100 shrink-0`}
+                            onClick={() => del(t._id)}
+                          >
+                            <span
+                              className={`text-[9px] font-bold uppercase tracking-widest whitespace-nowrap`}
+                            >
+                              Delete
+                            </span>
+                          </button>
+                        </>
+                      ) : null }
+                    </div>
+
+                    {/* RIGHT: avatar + author + date */}
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-5 h-5 rounded-full border-2 flex items-center justify-center text-[8px] font-bold text-white shrink-0"
+                        style={{ borderColor: t.color, background: t.color }}
+                      >
+                        {t.createdBy.personal_info.name
+                          .split(" ")
+                          .map((n) => n[0])
+                          .join("")}
+                      </div>
+
+                      <span className="text-[10px] text-gray-400 font-medium">
+                        {t.createdBy.personal_info.name}
+                      </span>
+
+                      <span className="text-[10px] text-gray-400 font-medium whitespace-nowrap">
+                        {new Date(t.createdAt).toLocaleDateString("en-GB").replaceAll("/", "-")}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* LIST VIEW */}
+      {view === "list" && filtered?.length > 0 && (
+        <div className="bg-white border border-yellow-100 rounded-2xl overflow-hidden shadow-sm">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr
+                style={{
+                  background: "linear-gradient(135deg, #2A6040, #1E4A30)",
+                }}
+              >
+                {[
+                  "Template",
+                  "Category",
+                  "Status",
+                  "Created By",
+                  "Last Modified",
+                  "Actions",
+                ].map((h, i, arr) => (
+                  <th
+                    key={h}
+                    className="px-5 py-3 text-left text-[10px] font-bold uppercase tracking-widest text-white/60 whitespace-nowrap"
+                    style={
+                      i < arr.length - 1
+                        ? { borderRight: "1px solid rgba(255,255,255,0.07)" }
+                        : {}
+                    }
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((t, i) => (
+                <tr
+                  key={t._id}
+                  className="hover:bg-amber-50/40 transition-colors"
+                  style={{
+                    borderBottom:
+                      i < filtered.length - 1 ? "1px solid #fef9c3" : "none",
+                  }}
+                >
+                  <td
+                    className="px-5 py-1.5"
+                    style={{ borderRight: "1px solid #fef3c7" }}
+                  >
+                    <div className="flex items-center">
+                      <p className="text-sm font-bold text-gray-900">
+                        {t.title}
+                      </p>
+                    </div>
+                  </td>
+                  <td
+                    className="px-4 py-1.5"
+                    style={{ borderRight: "1px solid #fef3c7" }}
+                  >
+                    <span className="text-[10px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-md bg-amber-50 text-amber-600 border border-amber-100">
+                      {t.category}
+                    </span>
+                  </td>
+                  <td
+                    className="px-4 py-1.5"
+                    style={{ borderRight: "1px solid #fef3c7" }}
+                  >
+                    <span
+                      className={`inline-flex items-center gap-1.5 text-[10px] font-semibold px-2.5 py-0.5 rounded-full ${STATUS_STYLE[t.status]}`}
+                    >
+                      <span
+                        className={`w-1.5 h-1.5 rounded-full ${STATUS_DOT[t.status]}`}
+                      />
+                      {t.status}
+                    </span>
+                  </td>
+                  <td
+                    className="px-4 py-1.5"
+                    style={{ borderRight: "1px solid #fef3c7" }}
+                  >
+                    <div className="flex items-center">
+                      <span className="text-xs text-gray-600 font-medium">
+                        {t.createdBy.personal_info.name}
+                      </span>
+                    </div>
+                  </td>
+                  <td
+                    className="px-4 py-1.5"
+                    style={{ borderRight: "1px solid #fef3c7" }}
+                  >
+                    <span className="text-xs text-gray-500 font-medium">
+                      {new Date(t.updatedAt).toLocaleDateString("en-GB").replaceAll("/", "-")}
+                    </span>
+                  </td>
+                  <td className="px-4 py-1.5">
+                    <div className="flex items-center gap-1">
+                      <button
+                        className="p-1.5 !rounded-lg text-blue-500 hover:bg-blue-50 border transition-colors"
+                          onClick={() => {
+                            setSelectedTemplate(t);
+                            setMode("view");
+                            setShowModal(true);
+                          }}
+                      >
+                      <Eye size={14} />
+                      </button>
+
+
+                      {(role === "PRESIDENT" ||
+                      role.startsWith("GENSEC") ||
+                      t.title.includes("Copy")) ? (
+                        <>
+                          <button
+                            className="p-1.5 !rounded-lg text-gray-600 border hover:bg-amber-50 hover:text-amber-600 transition-colors"
+                            onClick={() => {
+                              setSelectedTemplate(t);
+                              setMode("edit");
+                              setShowModal(true);
+                            }}
+                          >
+                          <Pencil size={14} />
+                          </button>
+
+                          <button
+                            className="p-1.5 !rounded-lg text-red-400 border hover:bg-red-50 hover:text-red-500 transition-colors"
+                            onClick={() => del(t._id)}
+                          >
+                            <Trash2 size={14} />
+                          </button>
+                        </>
+                      ) : (
+                        <></>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+      <TemplateModal
+    open={showModal}
+    mode={mode}
+    template={selectedTemplate}
+    onClose={() => {
+        setShowModal(false);
+        setSelectedTemplate(null);
+    }}
+    onSuccess={loadTemplates}
+/>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Templates/TemplateModal.jsx b/frontend/src/Components/Templates/TemplateModal.jsx
new file mode 100644
index 00000000..c445cec5
--- /dev/null
+++ b/frontend/src/Components/Templates/TemplateModal.jsx
@@ -0,0 +1,307 @@
+import { useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { toast } from "react-toastify";
+
+import {
+  createTemplate,
+  updateTemplate,
+} from "../../services/templates";
+
+const categories = [
+  "TECHNICAL",
+  "CULTURAL",
+  "SPORTS",
+  "ACADEMIC",
+  "OTHER",
+];
+
+const statuses = [
+  "Draft",
+  "Active",
+  "Archived",
+];
+
+const designs = [
+  "Default",
+  "Classic",
+  "Modern",
+];
+
+const initialState = {
+  title: "",
+  description: "",
+  category: "TECHNICAL",
+  design: "Default",
+  status: "Draft",
+};
+
+export default function TemplateModal({
+  open,
+  mode = "create",
+  template,
+  onClose,
+  onSuccess,
+}) {
+  const editing = mode === "edit";
+  const viewing = mode === "view";
+
+  const [form, setForm] = useState(initialState);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (template) {
+      setForm({
+        title: template.title || "",
+        description: template.description || "",
+        category: template.category || "TECHNICAL",
+        design: template.design || "Default",
+        status: template.status || "Draft",
+      });
+    } else {
+      setForm(initialState);
+    }
+  }, [template, open]);
+
+  if (!open) return null;
+
+  const handleChange = (field, value) => {
+    setForm((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleClose = () => {
+    if (!loading) {
+      setForm(initialState);
+      onClose();
+    }
+  };
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+
+    if (viewing) {
+      handleClose();
+      return;
+    }
+
+    if (!form.title.trim()) {
+      toast.error("Template title is required");
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      if (editing) {
+        const res = await updateTemplate(template._id, form);
+
+        if (res?.status === 200) {
+          toast.success("Template updated successfully");
+        }
+      } else {
+        const res = await createTemplate(form);
+
+        if (res?.status === 201 || res?.status === 200) {
+          toast.success("Template created successfully");
+        }
+      }
+
+      await onSuccess?.();
+      handleClose();
+    } catch (err) {
+      toast.error(err?.response?.data?.message || "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex justify-center items-center z-50">
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-xl p-6">
+
+        {/* Header */}
+
+        <div className="flex justify-between items-center mb-6">
+
+          <h2 className="text-2xl font-bold text-[#2A6040]">
+
+            {viewing
+              ? "View Template"
+              : editing
+              ? "Edit Template"
+              : "Create Template"}
+
+          </h2>
+
+          <button
+            onClick={handleClose}
+            disabled={loading}
+          >
+            <X />
+          </button>
+
+        </div>
+
+        <form
+          onSubmit={handleSubmit}
+          className="space-y-5"
+        >
+
+          {/* Title */}
+
+          <div>
+
+            <label className="font-semibold">
+              Title
+            </label>
+
+            <input
+              disabled={viewing || loading}
+              className="border rounded-lg w-full mt-2 p-2"
+              value={form.title}
+              onChange={(e) =>
+                handleChange("title", e.target.value)
+              }
+            />
+
+          </div>
+
+          {/* Description */}
+
+          <div>
+
+            <label className="font-semibold">
+              Description
+            </label>
+
+            <textarea
+              rows={4}
+              disabled={viewing || loading}
+              className="border rounded-lg w-full mt-2 p-2"
+              value={form.description}
+              onChange={(e) =>
+                handleChange("description", e.target.value)
+              }
+            />
+
+          </div>
+
+          {/* Category */}
+
+          <div>
+
+            <label className="font-semibold">
+              Category
+            </label>
+
+            <select
+              disabled={viewing || loading}
+              className="border rounded-lg w-full mt-2 p-2"
+              value={form.category}
+              onChange={(e) =>
+                handleChange("category", e.target.value)
+              }
+            >
+              {categories.map((c) => (
+                <option key={c}>
+                  {c}
+                </option>
+              ))}
+            </select>
+
+          </div>
+
+          {/* Design */}
+
+          <div>
+
+            <label className="font-semibold">
+              Design
+            </label>
+
+            <select
+              disabled={viewing || loading}
+              className="border rounded-lg w-full mt-2 p-2"
+              value={form.design}
+              onChange={(e) =>
+                handleChange("design", e.target.value)
+              }
+            >
+              {designs.map((d) => (
+                <option key={d}>
+                  {d}
+                </option>
+              ))}
+            </select>
+
+          </div>
+
+          {/* Status */}
+
+          {editing && (
+            <div>
+
+              <label className="font-semibold">
+                Status
+              </label>
+
+              <select
+                disabled={viewing || loading}
+                className="border rounded-lg w-full mt-2 p-2"
+                value={form.status}
+                onChange={(e) =>
+                  handleChange("status", e.target.value)
+                }
+              >
+                {statuses.map((s) => (
+                  <option key={s}>
+                    {s}
+                  </option>
+                ))}
+              </select>
+
+            </div>
+          )}
+
+          {/* Footer */}
+
+          <div className="flex justify-end gap-3 pt-4">
+
+            <button
+              type="button"
+              onClick={handleClose}
+              className="border border-gray-300 px-5 py-2 rounded-lg hover:bg-gray-100"
+            >
+              {viewing ? "Close" : "Cancel"}
+            </button>
+
+            {!viewing && (
+
+              <button
+                type="submit"
+                disabled={loading}
+                className="px-5 py-2 rounded-lg text-white"
+                style={{
+                  background:
+                    "linear-gradient(135deg,#2A6040,#1E4A30)",
+                }}
+              >
+                {loading
+                  ? "Saving..."
+                  : editing
+                  ? "Update"
+                  : "Create"}
+              </button>
+
+            )}
+
+          </div>
+
+        </form>
+
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/Components/Templates/thumbnailPreview.jsx b/frontend/src/Components/Templates/thumbnailPreview.jsx
new file mode 100644
index 00000000..c251c28b
--- /dev/null
+++ b/frontend/src/Components/Templates/thumbnailPreview.jsx
@@ -0,0 +1,32 @@
+/* ── thumbnail pattern generator ────────────────────────── */
+export default function ThumbnailPreview({ color, category }){
+    const c = color;
+    return (
+      <div className="relative w-full h-full overflow-hidden" style={{ background: `${c}15` }}>
+        {/* decorative lines */}
+        <div className="absolute inset-0 flex flex-col justify-center items-center gap-1.5 p-4">
+          <div className="w-3/4 h-0.5 rounded-full opacity-20" style={{ background: c }} />
+          <div className="w-1/2 h-3 rounded-sm opacity-10" style={{ background: c }} />
+          <div className="w-2/3 h-0.5 rounded-full opacity-15" style={{ background: c }} />
+          <div className="w-1/2 h-0.5 rounded-full opacity-10" style={{ background: c }} />
+          <div className="mt-1 w-10 h-10 rounded-full border-2 opacity-20 flex items-center justify-center" style={{ borderColor: c }}>
+            <div className="w-5 h-5 rounded-full opacity-30" style={{ background: c }} />
+          </div>
+          <div className="w-2/3 h-0.5 rounded-full opacity-10 mt-1" style={{ background: c }} />
+          <div className="w-1/2 h-0.5 rounded-full opacity-10" style={{ background: c }} />
+        </div>
+        {/* corner accents */}
+        <div className="absolute top-2 left-2 w-3 h-3 border-t-2 border-l-2 rounded-tl opacity-30" style={{ borderColor: c }} />
+        <div className="absolute top-2 right-2 w-3 h-3 border-t-2 border-r-2 rounded-tr opacity-30" style={{ borderColor: c }} />
+        <div className="absolute bottom-2 left-2 w-3 h-3 border-b-2 border-l-2 rounded-bl opacity-30" style={{ borderColor: c }} />
+        <div className="absolute bottom-2 right-2 w-3 h-3 border-b-2 border-r-2 rounded-br opacity-30" style={{ borderColor: c }} />
+        {/* category chip */}
+        <div className="absolute top-2.5 left-1/2 -translate-x-1/2">
+          <span className="text-[8px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-full text-white/80" style={{ background: `${c}90` }}>
+            {category}
+          </span>
+        </div>
+      </div>
+    );
+  };
+  
\ No newline at end of file
diff --git a/frontend/src/config/dashboardComponents.js b/frontend/src/config/dashboardComponents.js
index 4a7d641d..f90ae029 100644
--- a/frontend/src/config/dashboardComponents.js
+++ b/frontend/src/config/dashboardComponents.js
@@ -27,6 +27,10 @@ import AnnouncementsPage from "../pages/announcementsPage";
 import TenurePage from "../pages/TenurePage";
 import BudgetPage from "../pages/budgetPage";
 import RoomBookingPage from "../pages/roomBookingPage";
+import BatchesPage from "../pages/batchesPage";
+import TemplatesPage from "../pages/templatesPage";
+import RequestsPage from "../pages/requestsPage";
+import CertificatesPage from "../pages/certificatesPage";
 
 export const DashboardComponents = {
   dashboard: HomePage,
@@ -38,6 +42,10 @@ export const DashboardComponents = {
   achievements: AchievementsPage,
   endorsement: EndorsementPage,
   profile: ProfilePage,
+  certificates: CertificatesPage,
+  batches: BatchesPage,
+  templates: TemplatesPage,
+  requests: RequestsPage,
   cosa: ViewTenure,
   announcements: AnnouncementsPage,
   "manage-positions": CreateTenure,
diff --git a/frontend/src/config/navbarConfig.js b/frontend/src/config/navbarConfig.js
index a9547599..9fc25b89 100644
--- a/frontend/src/config/navbarConfig.js
+++ b/frontend/src/config/navbarConfig.js
@@ -12,6 +12,10 @@ import {
   Megaphone,
   Wallet,
   DoorOpen,
+  Dock,
+  ClipboardPaste,
+  LayoutTemplate,
+  FolderOpen,
 } from "lucide-react";
 
 const GENSEC_COMMON_NAV = [
@@ -26,6 +30,7 @@ const GENSEC_COMMON_NAV = [
   { key: "por", label: "PORs", icon: UserPlus },
   { key: "budget", label: "Budget", icon: Wallet },
   { key: "profile", label: "Profile", icon: User },
+  { key: "requests", label: "Requests", icon: ClipboardPaste },
   { key: "organization", label: "Clubs", icon: Users },
   { key: "tenure", label: "Tenure", icon: Users },
 ];
@@ -43,6 +48,7 @@ export const NavbarConfig = {
     { key: "roombooking", label: "RoomBooking", icon: DoorOpen },
     // { key: "add-event", label: "Add Event", icon: Plus },
     { key: "profile", label: "Profile", icon: User },
+    { key: "requests", label: "Requests", icon: ClipboardPaste },
     { key: "organization", label: "Clubs", icon: Users },
     { key: "tenure", label: "Tenure", icon: Users },
   ],
@@ -64,6 +70,8 @@ export const NavbarConfig = {
     // { key: "add-event", label: "Add Event", icon: Plus },
     { key: "feedback", label: "Feedback", icon: ClipboardList },
     { key: "profile", label: "Profile", icon: User },
+    { key: "batches", label: "Batches", icon: FolderOpen },
+    { key: "templates", label: "Templates", icon: LayoutTemplate },
     { key: "endorsement", label: "Endorsements", icon: Award },
     { key: "tenure", label: "Tenure", icon: Users },
   ],
@@ -74,6 +82,7 @@ export const NavbarConfig = {
 
     { key: "profile", label: "Profile", icon: User },
     // { key: "cosa", label: "CoSA", icon: Users },
+    { key: "certificates", label: "Certificates", icon: Dock },
     { key: "events", label: "Events", icon: Calendar },
     { key: "feedback", label: "Feedback", icon: MessageSquare },
     // { key: "view-feedback", label: "Feedback", icon: ClipboardList },
diff --git a/frontend/src/context/RequestContext.js b/frontend/src/context/RequestContext.js
new file mode 100644
index 00000000..729f77f1
--- /dev/null
+++ b/frontend/src/context/RequestContext.js
@@ -0,0 +1,26 @@
+import { useContext } from "react";
+import { createContext, useState } from "react";
+
+export const RequestContext = createContext();
+
+export function RequestProvider({ children }) {
+  const [requestStatus, setRequestStatus] = useState({
+    pending: 0,
+    approved: 0,
+    rejected: 0,
+    total: 0
+  })
+
+  return (
+    <RequestContext.Provider
+      value={{ requestStatus, setRequestStatus }}
+    >
+      {children}
+    </RequestContext.Provider>
+  );
+}
+
+//Custom Hook
+export function useRequest() {
+  return useContext(RequestContext);
+}
\ No newline at end of file
diff --git a/frontend/src/pages/batchesPage.jsx b/frontend/src/pages/batchesPage.jsx
new file mode 100644
index 00000000..5bf6f787
--- /dev/null
+++ b/frontend/src/pages/batchesPage.jsx
@@ -0,0 +1,34 @@
+import Layout from "../Components/common/Layout.jsx";
+import Batches from "../Components/Batches/batches.jsx"
+import { useSidebar } from "../hooks/useSidebar.js";
+
+export default function BatchesPage() {
+  const { isCollapsed } = useSidebar();
+
+  const components = {
+    Batches: Batches,
+  };
+
+  const gridConfig = [
+    {
+      id: "batches",
+      component: "Batches",
+      position: {
+        colStart: 0,
+        colEnd: isCollapsed ? 26 : 20,
+        rowStart: 0,
+        rowEnd: 16,
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Layout
+        headerText="Batches"
+        gridConfig={gridConfig}
+        components={components}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/certificatesPage.jsx b/frontend/src/pages/certificatesPage.jsx
new file mode 100644
index 00000000..c976fb51
--- /dev/null
+++ b/frontend/src/pages/certificatesPage.jsx
@@ -0,0 +1,32 @@
+import Layout from "../Components/common/Layout";
+import CertificatesList from "../Components/Certificates/CertificatesList";
+import { useSidebar } from "../hooks/useSidebar";
+
+export default function CertificatesPage() {
+  const { isCollapsed } = useSidebar();
+
+  const components = {
+    CertificatesList: CertificatesList,
+  };
+
+  const gridConfig = [
+    {
+      id: "certificates",
+      component: "CertificatesList",
+      position: {
+        colStart: 0,
+        colEnd: isCollapsed ? 26 : 20,
+        rowStart: 0,
+        rowEnd: 16,
+      },
+    },
+  ];
+
+  return (
+    <Layout
+      headerText="Certificates"
+      gridConfig={gridConfig}
+      components={components}
+    />
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/requestsPage.jsx b/frontend/src/pages/requestsPage.jsx
new file mode 100644
index 00000000..1c6053a7
--- /dev/null
+++ b/frontend/src/pages/requestsPage.jsx
@@ -0,0 +1,36 @@
+import Layout from "../Components/common/Layout";
+import Requests from "../Components/Requests/Requests.jsx";
+import { RequestProvider } from "../context/RequestContext.js";
+import { useSidebar } from "../hooks/useSidebar";
+
+export default function RequestsPage() {
+  const { isCollapsed } = useSidebar();
+
+  const components = {
+    
+    Requests: Requests,
+  };
+
+  const gridConfig = [
+    {
+      id: "requests",
+      component: "Requests",
+      position: {
+        colStart: 0,
+        colEnd: isCollapsed ? 26 : 20,
+        rowStart: 0,
+        rowEnd: 16,
+      },
+    },
+  ];
+
+  return (
+    <RequestProvider>
+      <Layout
+        headerText="Requests"
+        gridConfig={gridConfig}
+        components={components}
+      />
+    </RequestProvider>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/pages/templatesPage.jsx b/frontend/src/pages/templatesPage.jsx
new file mode 100644
index 00000000..ecee5e5a
--- /dev/null
+++ b/frontend/src/pages/templatesPage.jsx
@@ -0,0 +1,35 @@
+import Layout from "../Components/common/Layout";
+import Templates from "../Components/Templates/Template";
+//import { RequestProvider } from "../context/RequestContext.js";
+import { useSidebar } from "../hooks/useSidebar";
+
+export default function TemplatesPage() {
+  const { isCollapsed } = useSidebar();
+
+  const components = {
+    Templates: Templates,
+  };
+
+  const gridConfig = [
+    {
+      id: "templates",
+      component: "Templates",
+      position: {
+        colStart: 0,
+        colEnd: isCollapsed ? 25 : 20,
+        rowStart: 0,
+        rowEnd: 16,
+      },
+    },
+  ];
+
+  return (
+    <>
+      <Layout
+        headerText="Templates"
+        gridConfig={gridConfig}
+        components={components}
+      />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/routes/StudentRoutes.js b/frontend/src/routes/StudentRoutes.js
index 7ec1c251..e28f0c9f 100644
--- a/frontend/src/routes/StudentRoutes.js
+++ b/frontend/src/routes/StudentRoutes.js
@@ -11,6 +11,8 @@ import Logout from "../Components/Logout";
 import Home from "../Components/OldComponents/Home";
 import StudentProfile from "../Components/Profile/ProfilePage";
 import TenurePage from "../pages/TenurePage";
+import CertificatesPage from "../pages/certificatesPage";
+
 
 export const getStudentRoutes = (isUserLoggedIn, isOnboardingComplete) => [
   <Route
@@ -121,4 +123,16 @@ export const getStudentRoutes = (isUserLoggedIn, isOnboardingComplete) => [
       </ProtectedRoute>
     }
   />,
+    <Route
+  key="certificates"
+  path="/certificates"
+  element={
+    <ProtectedRoute
+      isAuthenticated={isUserLoggedIn}
+      isOnboardingComplete={isOnboardingComplete}
+    >
+      <CertificatesPage />
+    </ProtectedRoute>
+  }
+/>,
 ];
diff --git a/frontend/src/services/batch.js b/frontend/src/services/batch.js
new file mode 100644
index 00000000..923d5e6e
--- /dev/null
+++ b/frontend/src/services/batch.js
@@ -0,0 +1,107 @@
+import api from "../utils/api";
+
+export async function fetchBatchUsers(userIds = []) {
+  try {
+    const res = await api.post("/api/batches/batch-users", { userIds });
+    return res.data.message;
+  } catch (err) {
+    console.error("fetchBatchUsers error:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function fetchBatches(userId) {
+  try {
+    const res = await api.get(`/api/batches/${userId}`);
+    return res.data.message;
+  } catch (err) {
+    console.error("fetchBatches error:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function createBatch(data) {
+  try {
+    const response = await api.post("/api/batches/create-batch", data);
+    console.log("Response", response);
+    return {data: response.data.message, status: response.status};
+  } catch (err) {
+    console.error("createBatch error:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function editBatch(data) {
+  try {
+    const res = await api.patch("/api/batches/edit-batch", data);
+    return res.data.message;
+  } catch (err) {
+    console.error("Error while editing batch:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function approverEditBatch(data) {
+  try {
+    const res = await api.patch("/api/batches/approver/edit-batch", data);
+    return res.data.message;
+  } catch (err) {
+    console.error("Error while editing batch:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function duplicateBatch(batchId) {
+  try {
+    const res = await api.post("/api/batches/duplicate-batch", { batchId });
+    return res.data.message;
+  } catch (err) {
+    console.error("Error while duplicating batch:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function deleteBatch(batchId) {
+  try {
+    //console.log("Deleting batch:", batchId);
+    const res = await api.delete("/api/batches/delete-batch", {
+      data: { batchId },
+    });
+    return res.data.message;
+  } catch (err) {
+    console.error("Error while deleting batch:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function archiveBatchApi(batchId) {
+  try {
+    //console.log("Deleting batch:", batchId);
+    const res = await api.patch("/api/batches/archive-batch", { batchId });
+    return res.data.message;
+  } catch (err) {
+    console.error("Error while archiving batch:", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function approveBatch(batch) {
+  try {
+    const res = await api.get(`/api/batches/${batch?._id}/approve`);
+    console.log(res);
+    return res.data.message;
+  } catch (err) {
+    console.error("Error while approving batch: ", err);
+    return err.response?.data.message;
+  }
+}
+
+export async function rejectBatch(batch) {
+  try {
+    const res = await api.get(`/api/batches/${batch?._id}/reject`);
+    return res.data.message;
+  } catch (err) {
+    console.error("Error while rejecting batch: ", err);
+    return err.response?.data.message;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/services/certificate.js b/frontend/src/services/certificate.js
new file mode 100644
index 00000000..d0ab4cb2
--- /dev/null
+++ b/frontend/src/services/certificate.js
@@ -0,0 +1,12 @@
+import api from "../utils/api";
+
+export async function fetchCertificates() {
+    try{
+        const res = await api.get("/api/certificates");
+        return res.data.message;
+    }
+    catch(err){
+        console.error("Error while fetching user certificates:", err);
+        return err.response?.data.message;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/services/events.js b/frontend/src/services/events.js
new file mode 100644
index 00000000..3d2c36bf
--- /dev/null
+++ b/frontend/src/services/events.js
@@ -0,0 +1,13 @@
+import api from "../utils/api";
+
+/* api/events */
+export async function fetchEvents() {
+  try {
+    const res = await api.get("/api/events/events");
+    // Axios auto-throws on non-2xx; res.data is the response body directly
+    return res.data;
+  } catch (err) {
+    console.error("fetchEvents error:", err);
+    return err.response?.data.message;
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/services/templates.js b/frontend/src/services/templates.js
new file mode 100644
index 00000000..65299fc7
--- /dev/null
+++ b/frontend/src/services/templates.js
@@ -0,0 +1,91 @@
+import api from "../utils/api";
+
+/* GET /api/templates */
+export async function fetchTemplates() {
+  try {
+    const res = await api.get("/api/templates");
+
+    return {
+      data: res.data.message,
+      status: res.status,
+    };
+  } catch (err) {
+    console.error("fetchTemplates error:", err);
+    return err.response?.data?.message;
+  }
+}
+
+/* GET /api/templates/:id */
+export async function fetchTemplate(id) {
+  try {
+    const res = await api.get(`/api/templates/${id}`);
+
+    return {
+      data: res.data.message,
+      status: res.status,
+    };
+  } catch (err) {
+    console.error("fetchTemplate error:", err);
+    return err.response?.data?.message;
+  }
+}
+
+/* POST /api/templates */
+export async function createTemplate(data) {
+  try {
+    const res = await api.post("/api/templates", data);
+
+    return {
+      data: res.data.message,
+      status: res.status,
+    };
+  } catch (err) {
+    console.error("createTemplate error:", err);
+    return err.response?.data?.message;
+  }
+}
+
+/* PATCH /api/templates/:id */
+export async function updateTemplate(id, data) {
+  try {
+    const res = await api.patch(`/api/templates/${id}`, data);
+
+    return {
+      data: res.data.message,
+      status: res.status,
+    };
+  } catch (err) {
+    console.error("updateTemplate error:", err);
+    return err.response?.data?.message;
+  }
+}
+
+/* DELETE /api/templates/:id */
+/* (Archives the template if your backend uses soft delete) */
+export async function deleteTemplate(id) {
+  try {
+    const res = await api.delete(`/api/templates/${id}`);
+
+    return {
+      data: res.data.message,
+      status: res.status,
+    };
+  } catch (err) {
+    console.error("deleteTemplate error:", err);
+    return err.response?.data?.message;
+  }
+}
+
+export async function archiveTemplate(id) {
+  try {
+    const res = await api.delete(`/api/templates/${id}`);
+
+    return {
+      data: res.data.message,
+      status: res.status,
+    };
+  } catch (err) {
+    console.error("archiveTemplate error:", err);
+    throw err;
+  }
+}
\ No newline at end of file